:root {
  color-scheme: dark;
  font-family: "Courier New", Courier, ui-monospace, monospace;
  background: #11100e;
  color: #deddd6;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #11100e;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, transparent 48%, #080a0899 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.018) 4px);
  opacity: 1;
  z-index: 3;
  transition: opacity 2s ease;
}

body.soul-awake::after { opacity: .72; }

body::before {
  content: "";
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border: 1px solid #deddd6;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: opacity .08s linear;
  pointer-events: none;
}

body.can-use::before {
  opacity: .78;
  animation: attention 1.8s ease-in-out infinite;
}

@keyframes attention {
  0%, 100% { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.65); }
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  background: #050505;
  cursor: none;
  touch-action: none;
}

#touch-ui {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

#touch-ui[hidden] { display: none; }

#move-pad,
#touch-action,
#touch-pause { pointer-events: auto; touch-action: none; }

#move-pad {
  position: absolute;
  left: max(1.25rem, env(safe-area-inset-left));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  width: clamp(6.8rem, 25vw, 8rem);
  aspect-ratio: 1;
  border: 1px solid #deddd652;
  border-radius: 50%;
  background: #08080842;
  box-shadow: inset 0 0 2rem #0005;
}

#move-pad::before,
#move-pad::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: #deddd62e;
  transform: translate(-50%, -50%);
}

#move-pad::before { width: 42%; height: 1px; }
#move-pad::after { width: 1px; height: 42%; }

#move-knob {
  position: absolute;
  left: calc(50% - 1.15rem);
  top: calc(50% - 1.15rem);
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid #deddd6aa;
  border-radius: 50%;
  background: #aaa9a22b;
}

#touch-action {
  position: absolute;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(2.2rem, calc(env(safe-area-inset-bottom) + 1rem));
  width: 6.5rem;
  height: 6.5rem;
  padding: .5rem;
  border: 1px solid #deddd6a6;
  border-radius: 50%;
  color: #deddd6;
  background: #080808a6;
  font: .65rem/1.25 "Courier New", monospace;
  letter-spacing: .08em;
}

#touch-action:disabled { opacity: .22; }

#touch-pause {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  color: #deddd68f;
  background: #08080870;
  font: .65rem "Courier New", monospace;
  letter-spacing: .18em;
}

#look-hint {
  position: absolute;
  top: 50%;
  left: 65%;
  margin: 0;
  color: #deddd677;
  font-size: .6rem;
  letter-spacing: .12em;
  transform: translate(-50%, -50%);
  transition: opacity .8s linear;
}

#look-hint.used { opacity: 0; }

#gate {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: radial-gradient(circle at 50% 46%, #292720 0, #11100e 54%, #090908 100%);
}

#gate.hidden,
#gate[hidden] { display: none; }

.placard {
  width: min(37rem, 100%);
  padding: clamp(1.25rem, 4vw, 2.6rem);
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(-.18deg);
}

h1 {
  margin: 0 0 1.45rem;
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.07em;
  transform: scaleX(.93);
  transform-origin: left;
}

.invocation {
  margin: 0 0 2.5rem;
  color: #77766f;
  font-size: clamp(.62rem, 1.35vw, .76rem);
  line-height: 1.65;
  letter-spacing: .075em;
}

#subtitle {
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 7vh;
  width: min(52rem, calc(100vw - 2rem));
  margin: 0;
  padding: .85rem 1rem;
  border-left: 1px solid #aaa9a2;
  color: #deddd6;
  background: #080808d9;
  font-size: clamp(.72rem, 1.5vw, .9rem);
  line-height: 1.5;
  letter-spacing: .035em;
  opacity: 0;
  transform: translate(-50%, .65rem) rotate(-.2deg);
  transition: opacity .18s linear, transform .18s linear;
  pointer-events: none;
}

#subtitle.visible {
  opacity: 1;
  transform: translate(-50%, 0) rotate(-.2deg);
}

#subtitle.machine {
  border-left-color: #88d1c6;
  color: #b9e1da;
  background: #07100feb;
  text-shadow: 0 0 1rem #75c9bb44;
}

#soul {
  position: fixed;
  z-index: 4;
  top: 50%;
  right: clamp(.8rem, 2.5vw, 2rem);
  display: grid;
  width: min(10.5rem, 27vw);
  gap: .65rem;
  color: #87c6bc;
  font-size: .52rem;
  line-height: 1.5;
  letter-spacing: .13em;
  opacity: 0;
  transform: translate(.7rem, -50%);
  transition: opacity 2.4s ease, transform 2.4s ease;
  pointer-events: none;
}

body.soul-awake #soul {
  opacity: .5;
  transform: translate(0, -50%);
}

.soul-label { opacity: .58; }

.soul-meter {
  position: relative;
  display: block;
  height: 1px;
  overflow: visible;
  background: #82bdb32e;
}

.soul-meter::after {
  content: "";
  position: absolute;
  inset: -2px 0;
  background: repeating-linear-gradient(90deg, transparent 0 12px, #101b19 12px 14px);
}

.soul-meter i {
  display: block;
  width: calc(var(--soul, 0) * 100%);
  height: 1px;
  background: #9ce0d5;
  box-shadow: 0 0 .75rem #8ad7cb;
  transition: width 1.8s cubic-bezier(.2,.75,.2,1);
}

#soul-fragment {
  min-height: 3em;
  opacity: .78;
}

#enter {
  width: 100%;
  min-height: 3.25rem;
  border: 1px solid #aaa9a2;
  border-radius: 0;
  color: #e7e6df;
  background: #11110f;
  font: inherit;
  font-size: .75rem;
  letter-spacing: .13em;
  cursor: pointer;
}

#enter:hover,
#enter:focus-visible {
  color: #090909;
  background: #deddd6;
  outline: 1px solid #deddd6;
  outline-offset: 4px;
}

#status {
  min-height: 1.2em;
  margin: .65rem 0 1.8rem;
  color: #77766f;
  font-size: .68rem;
}

#status.error { color: #d8d7d0; }

.controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid #373733;
}

.controls div { min-width: 0; }

.controls dt {
  color: #c5c4bd;
  font-size: .66rem;
  letter-spacing: .08em;
}

.controls dd {
  margin: .3rem 0 0;
  color: #686761;
  font-size: .62rem;
}

.ending {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  align-content: center;
  color: #181713;
  background: #d8d3c5;
  font-family: "Courier New", monospace;
  text-align: center;
  opacity: 0;
  transition: opacity 5s linear;
}

.ending.visible { opacity: 1; }

.ending.waited {
  color: #d6d7d2;
  background: #111615;
}

.ending strong {
  display: block;
  font-size: clamp(1.2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: .28em;
}

.ending small {
  display: block;
  margin-top: 1.8rem;
  color: inherit;
  font-size: clamp(.62rem, 1vw, .76rem);
  letter-spacing: .15em;
  opacity: .56;
}

.ending p {
  width: min(38rem, calc(100vw - 3rem));
  margin: 3.5rem auto 0;
  font-size: clamp(.72rem, 1.4vw, .9rem);
  line-height: 1.8;
  letter-spacing: .07em;
  opacity: .72;
}

.ending .trace {
  margin-top: 1.35rem;
  font-size: clamp(.56rem, 1vw, .68rem);
  line-height: 1.65;
  opacity: .42;
}

.ending blockquote {
  width: min(35rem, calc(100vw - 3rem));
  margin: 2.2rem auto 0;
  padding: 1.2rem 1rem;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  font-size: clamp(.65rem, 1.15vw, .78rem);
  font-style: normal;
  line-height: 1.8;
  letter-spacing: .07em;
  opacity: .62;
}

.ending button {
  margin-top: 4.5rem;
  padding: .85rem 1.15rem;
  border: 1px solid currentColor;
  color: inherit;
  background: transparent;
  font: .62rem "Courier New", monospace;
  letter-spacing: .13em;
  opacity: 0;
  cursor: pointer;
  transition: opacity 1.5s linear, color .15s linear, background .15s linear;
}

.ending button.visible { opacity: .46; }

.ending button:hover,
.ending button:focus-visible {
  color: #111;
  background: #deddd6;
  outline: 1px solid currentColor;
  outline-offset: 4px;
  opacity: 1;
}

.ending.waited button:hover,
.ending.waited button:focus-visible {
  color: #111615;
  background: #d6d7d2;
}

@media (max-width: 35rem) {
  .controls { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .placard { box-shadow: .5rem .6rem 0 #0008; }
  #subtitle { bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 8.7rem); }
  #soul { top: max(1rem, env(safe-area-inset-top)); right: auto; left: 1rem; width: 9rem; transform: translateY(-.5rem); }
  body.soul-awake #soul { transform: translateY(0); }
  .invocation { margin-bottom: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .placard { transform: none; }
  body.can-use::before { animation: none; }
}