html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #f2e8d2; }
body { font-family: "Special Elite", "Courier New", monospace; color: #2c2a52; }
html, body { overscroll-behavior: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

#cap {
  position: absolute; top: 6.5vh; left: 50%; transform: translateX(-50%);
  max-width: 66vw; width: max-content; text-align: center;
  font-size: clamp(14px, 1.7vw, 20px); letter-spacing: 0.02em; color: #2c2a52;
  opacity: 0; transition: opacity 1.4s ease;
  padding: 10px 26px;
  background: rgba(244,235,214,0.95);
  border: 2px solid #2c2a52;
  box-shadow: 4px 4px 0 rgba(44,42,82,0.25);
}
#cap:empty { border: none; box-shadow: none; background: transparent; }
#cap.title { letter-spacing: 0.34em; font-size: clamp(13px, 1.5vw, 18px); }
#cap.on { opacity: 1; }

#announce {
  position: absolute; top: 13.5vh; left: 50%; transform: translateX(-50%);
  max-width: 62vw; width: max-content; text-align: center;
  font-size: clamp(12px, 1.3vw, 16px); color: #2c2a52;
  opacity: 0; transition: opacity 1.6s ease; padding: 8px 20px;
  background: rgba(244,235,214,0.93);
  border: 1.5px solid rgba(44,42,82,0.85);
  box-shadow: 3px 3px 0 rgba(44,42,82,0.22);
}
#announce:empty { border: none; box-shadow: none; background: transparent; }
#announce.on { opacity: 1; }

#ret { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; }
#tlabel {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 13px; letter-spacing: 0.14em; color: rgba(44,42,82,0.95);
  text-shadow: 0 0 2px rgba(242,232,210,1);
  text-transform: uppercase; opacity: 0; transition: opacity .3s;
  padding: 3px 14px; border-radius: 3px;
  background: rgba(242,232,210,0.72);
  border: 1px solid rgba(44,42,82,0.25);
}
#tlabel.on { opacity: 1; }
#tlabel .seen { opacity: 0.6; font-style: italic; letter-spacing: 0.04em; }

#line {
  position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%);
  max-width: 68vw; width: max-content; text-align: center;
  padding: 13px 28px;
  opacity: 0; transition: opacity 0.9s ease;
  background: rgba(244,235,214,0.96);
  border: 2px solid #2c2a52;
  box-shadow: 5px 5px 0 rgba(44,42,82,0.28);
}
#line.on { opacity: 1; }
#lineLabel {
  font-size: clamp(11px, 1.1vw, 14px); letter-spacing: 0.24em; color: #a33a3a;
  margin-bottom: 7px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(44,42,82,0.25);
}
#lineText {
  font-size: clamp(15px, 1.65vw, 21px); line-height: 1.55;
  color: #2c2a52;
}

#tally {
  position: absolute; right: 26px; bottom: 22px; font-size: 14px; letter-spacing: 0.12em;
  color: rgba(44,42,82,0.6); text-shadow: 0 0 2px rgba(242,232,210,1);
}
#tallyStar { margin-right: 7px; color: rgba(163,58,58,0.8); }

/* ---------- touch ---------- */
#touchui { display: none; position: fixed; inset: 0; z-index: 6; pointer-events: none; }
body.touch #touchui { display: block; }
/* the whole left side is the stick: it appears under the thumb wherever you touch */
#stickZone { position: absolute; left: 0; top: 0; bottom: 0; width: 42vw; pointer-events: auto; touch-action: none; }
#stick {
  position: absolute; left: 5vw; bottom: 6vh; width: 108px; height: 108px; border-radius: 50%;
  border: 1px solid rgba(44,42,82,0.35); pointer-events: none; touch-action: none;
}
#stickKnob {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(44,42,82,0.14); border: 1px solid rgba(44,42,82,0.4);
  transform: translate(-50%,-50%);
}
#btnSee, #btnSit {
  position: absolute; right: 5vw; width: 74px; height: 74px; border-radius: 50%;
  border: 1px solid rgba(44,42,82,0.4); color: rgba(44,42,82,0.85);
  display: flex; align-items: center; justify-content: center; letter-spacing: 0.18em; font-size: 13px;
  pointer-events: auto; user-select: none; -webkit-user-select: none;
  touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
#btnSee { bottom: 16vh; }
#btnSit { bottom: 5vh; width: 58px; height: 58px; font-size: 11px; right: calc(5vw + 88px); }
#btnSee.hot { background: rgba(240,230,200,0.16); }

/* ---------- overlays ---------- */
#start, #pause, #fallback {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  text-align: center;
}
#start {
  background:
    radial-gradient(1.6px 1.6px at 22% 34%, rgba(44,42,82,0.12), transparent 60%),
    radial-gradient(1.6px 1.6px at 71% 62%, rgba(44,42,82,0.1), transparent 60%),
    #f2e8d2;
  transition: opacity 2.2s ease;
}
#start.gone { opacity: 0; pointer-events: none; }
.startInner { max-width: 640px; padding: 24px 28px; }
#startRing {
  width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 50%;
  border: 3px solid rgba(44,42,82,0.85);
  box-shadow: 3px 2px 0 rgba(255,74,140,0.35), -3px -2px 0 rgba(63,118,170,0.3);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.05); opacity: 1; } }
#start h1 { font-weight: 400; letter-spacing: 0.5em; margin: 0 0 6px 0.5em; font-size: clamp(24px, 3.6vw, 38px); color: #2c2a52; }
#start .sub { opacity: 0.75; font-size: clamp(13px, 1.6vw, 17px); margin-bottom: 4px; }
#start .printing { font-size: clamp(11px, 1.2vw, 14px); letter-spacing: 0.28em; color: rgba(163,58,58,0.85); margin-bottom: 24px; }
#start .prose { line-height: 1.65; font-size: clamp(13px, 1.45vw, 16px); opacity: 0.88; margin-bottom: 26px; }
#start .keys { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: 12px; opacity: 0.6; margin-bottom: 30px; letter-spacing: 0.04em; }
#start .keys b { letter-spacing: 0.12em; }
#start .keysTouch { display: none; }
body.touch #start .keysDesk { display: none; }
body.touch #start .keysTouch { display: flex; }
button {
  font-family: inherit; font-size: 15px; letter-spacing: 0.14em; color: #f2e8d2;
  background: #2c2a52; border: none; border-radius: 3px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  padding: 13px 34px; cursor: pointer; box-shadow: 3px 3px 0 rgba(44,42,82,0.25);
}
button:hover { filter: brightness(1.15); }
#start .foot { margin-top: 22px; font-size: 11px; opacity: 0.5; letter-spacing: 0.05em; }

#pause { background: rgba(242,232,210,0.82); opacity: 0; pointer-events: none; transition: opacity 0.7s; }
#pause.on { opacity: 1; pointer-events: auto; }
.pauseInner { max-width: 480px; padding: 20px; color: #2c2a52; }
.pauseTitle { font-size: 22px; letter-spacing: 0.06em; margin-bottom: 10px; }
.pauseNote { opacity: 0.75; margin-bottom: 28px; font-size: 15px; }
.pauseKeys { margin-top: 24px; font-size: 12px; opacity: 0.55; letter-spacing: 0.06em; }

/* ---------- the constellation coda ---------- */
#coda {
  position: fixed; inset: 0; z-index: 9; opacity: 0; pointer-events: none;
  transition: opacity 3s ease;
  background: radial-gradient(120% 100% at 50% 40%, #fdf8ea 0%, #f7edd4 55%, #eee0bd 100%);
}
#coda.on { opacity: 1; pointer-events: auto; }
#codaHead {
  position: absolute; top: 7vh; left: 0; right: 0; text-align: center;
  letter-spacing: 0.34em; font-size: clamp(12px, 1.3vw, 16px); color: rgba(104,82,38,0.72);
}
#codaGlyph {
  position: absolute; left: 50%; top: 44%; width: 82vmin; height: 82vmin;
  border: 2px solid rgba(160,130,60,0.09); border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 80px rgba(220,190,120,0.12) inset;
}
#codaSvg { position: absolute; inset: 0; width: 100%; height: 100%; }
#codaLabel {
  position: absolute; transform: translate(-50%, -210%); white-space: nowrap;
  letter-spacing: 0.18em; font-size: clamp(12px, 1.25vw, 15px); text-transform: uppercase;
  color: rgba(94,74,32,0.9); opacity: 0; transition: opacity 0.45s;
}
#codaLabel.on { opacity: 1; }
#codaEnd { position: absolute; bottom: 5.5vh; left: 0; right: 0; text-align: center; opacity: 0; transition: opacity 2.4s ease; }
#codaEnd.on { opacity: 1; }
#codaStats { font-size: clamp(13px, 1.35vw, 16px); color: rgba(104,82,38,0.8); letter-spacing: 0.04em; margin-bottom: 9px; }
#codaFinal { font-size: clamp(17px, 2vw, 23px); color: rgba(52,40,14,0.96); margin-bottom: 20px; line-height: 1.58; }
#codaBtns button { margin: 0 8px; background: rgba(62,48,20,0.85); color: #f6ecd2; box-shadow: none; font-size: 15px; padding: 11px 26px; }

@media (max-width: 700px) {
  #line { bottom: 20vh; padding: 0 8vw; }
  #start .keysDesk { display: none; }
}