@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/SourceSans3-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
button, input { font: inherit; }
body {
  margin: 0; overflow: hidden; background: #020308; color: #e8ecf8;
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#stage { position: fixed; inset: 0; z-index: 0; }
#stage canvas { display: block; }

/* ---------- cinematic text ---------- */
#txt {
  position: fixed; left: 50%; bottom: 16vh; transform: translateX(-50%);
  text-align: center; z-index: 20; pointer-events: none; width: min(90vw, 900px);
}
#kicker {
  font-size: clamp(11px, 1.2vw, 14px); font-weight: 500; letter-spacing: .5em;
  text-transform: uppercase; color: #a9bce0; margin-bottom: 14px;
  opacity: 0; filter: blur(6px); transition: all 1.1s ease;
  text-shadow: 0 0 6px rgba(4, 7, 16, .95), 0 0 14px rgba(4, 7, 16, .85), 0 1px 2px rgba(0, 0, 0, .9);
}
#line {
  font-size: clamp(24px, 3.4vw, 46px); font-weight: 200; line-height: 1.25;
  color: #eef2ff; letter-spacing: .01em;
  opacity: 0; filter: blur(10px); transform: translateY(10px);
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
  text-shadow: 0 0 30px rgba(140, 170, 255, .35), 0 1px 3px rgba(0, 0, 0, .9), 0 0 12px rgba(4, 7, 16, .8);
}
#line b { font-weight: 500; color: #fff; }
#line .bad { color: #ff7a6b; font-weight: 300; }
#txt.show #kicker { opacity: 1; filter: none; }
#txt.show #line { opacity: 1; filter: none; transform: none; }
#txt.hide #line { opacity: 0; filter: blur(8px); transition: all .5s ease; }

/* ---------- big word (the prompt) ---------- */
#bigword {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-size: clamp(60px, 10vw, 150px); font-weight: 200; color: #fff; z-index: 15;
  letter-spacing: .04em; pointer-events: none; opacity: 0;
  text-shadow: 0 0 60px rgba(160, 190, 255, .5);
  transition: transform 1.4s ease, filter 1.4s ease; /* opacity cuts instantly — background panes throttle transitions */
}
#bigword.show { opacity: 1; }
#bigword.away {
  opacity: 0; filter: blur(14px);
  transform: translate(calc(-50% - 34vw), -50%) scale(0.22);
}

/* ---------- loss counter ---------- */
#counterWrap {
  position: fixed; top: 26px; left: 50%; transform: translateX(-50%);
  text-align: center; z-index: 20; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
}
#counterWrap.show { opacity: 1; }
#counterLabel {
  display: block; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #8291b5; margin-bottom: 2px; white-space: nowrap;
}
#counter {
  font-size: clamp(26px, 3vw, 40px); font-weight: 200; color: #ffce8f;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(255, 190, 110, .35);
}
#counter.bad { color: #ff8d80; text-shadow: 0 0 24px rgba(255, 110, 90, .4); }
#guessline {
  margin-top: 8px; font-size: clamp(13px, 1.5vw, 19px); font-weight: 300;
  color: #b9c6e8; letter-spacing: .04em; opacity: 0; transition: opacity .8s ease;
  font-variant-numeric: tabular-nums;
}
#guessline.show { opacity: 1; }
#guessline b { color: #fff; font-weight: 500; }
.scorecard {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums;
  color: #93a5c9; background: rgba(28, 36, 62, .55); border-radius: 999px; padding: 4px 10px;
  transition: color .5s, text-shadow .5s;
}
.scorecard.won { color: #7df0ae; text-shadow: 0 0 14px rgba(125, 240, 174, .55); }
.chip:active { transform: scale(.96); }
.chip:focus-visible { outline: 1.5px solid #6f9dff; outline-offset: 2px; }

/* ---------- first-timer tutorial spotlight ---------- */
.spot { position: relative; z-index: 1; }
.spot::after {
  content: ''; position: absolute; inset: -7px; border-radius: inherit;
  border: 1.5px solid #6f9dff;
  box-shadow: 0 0 18px rgba(111, 157, 255, .55), inset 0 0 12px rgba(111, 157, 255, .15);
  animation: spotPulse 1.6s ease-in-out infinite; pointer-events: none;
}
@keyframes spotPulse { 50% { box-shadow: 0 0 30px rgba(111, 157, 255, .85), inset 0 0 16px rgba(111, 157, 255, .3); } }

#brand {
  position: fixed; top: 22px; left: 26px; z-index: 20; pointer-events: none;
  font-size: 11px; font-weight: 700; letter-spacing: .34em; color: #4c5a80;
}
#story {
  position: fixed; top: 44px; left: 26px; z-index: 20; pointer-events: none;
  font-size: 10.5px; font-weight: 400; letter-spacing: .04em; color: #66779e;
  max-width: 54ch; line-height: 1.7; opacity: 0; transition: opacity 1.4s ease;
}
#story.show { opacity: 1; }
#story b { color: #8fa3d0; font-weight: 500; }
#skip {
  position: fixed; top: 18px; right: 22px; z-index: 30;
  appearance: none; font-family: inherit; line-height: 1.2;
  font-size: 11px; letter-spacing: .18em; color: #5d6d96; cursor: pointer;
  background: rgba(10, 14, 26, .5); border: 1px solid rgba(100, 120, 170, .2);
  border-radius: 999px; padding: 7px 14px; transition: all .3s;
  opacity: 0; pointer-events: none;
}
#skip.show { opacity: 1; pointer-events: auto; }
#skip[hidden] { display: none; }
#skip:hover { color: #dfe6f5; border-color: #6f9dff; }
#skip:focus-visible { outline: 1.5px solid #6f9dff; outline-offset: 3px; color: #dfe6f5; }

/* ---------- living-mode HUD ---------- */
#hud {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(70px);
  display: flex; align-items: center; gap: 8px; z-index: 25;
  background: rgba(7, 10, 20, .72); border: 1px solid rgba(110, 130, 180, .16);
  border-radius: 16px; padding: 7px 12px; backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transition: opacity 1.2s ease, transform 1.2s ease, visibility 1.2s ease;
  max-width: calc(100vw - 16px); flex-wrap: nowrap; justify-content: center;
}
#hud.show { opacity: 1; visibility: visible; transform: translateX(-50%); }
.hudgroup { display: flex; gap: 5px; flex-wrap: nowrap; justify-content: center; }
.hudtools { display: flex; align-items: center; gap: 8px; }
.sep { width: 1px; height: 24px; background: rgba(120, 140, 190, .2); }
.chip {
  font-family: inherit; font-size: 12px; font-weight: 600; color: #9fb0d4;
  background: rgba(28, 36, 62, .55); border: 1px solid rgba(120, 140, 190, .22);
  border-radius: 999px; padding: 4px 10px; cursor: pointer; transition: all .25s;
  white-space: nowrap;
}
.chip:hover { border-color: #6f9dff; color: #eaf1ff; }
.chip.on { background: #2c4a8f; border-color: #6f9dff; color: #fff; box-shadow: 0 0 12px rgba(110, 150, 255, .45); }
.chip .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(120, 140, 190, .3); margin-right: 6px; vertical-align: 1px;
  transition: all .5s;
}
.chip.learned .dot { background: #37e08b; box-shadow: 0 0 8px #37e08b; }
.chip.learned { color: #b8eecf; }
#guessline.flash { animation: gflash 1s ease; }
@keyframes gflash {
  0% { transform: scale(1); }
  25% { transform: scale(1.14); color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.6); }
  100% { transform: scale(1); }
}
.chip.act { color: #cdd9f2; }
.chip.act:hover { transform: translateY(-1px); }
.chip.ghost { background: transparent; border-color: rgba(120, 140, 190, .14); color: #6d7da6; }
.chip.primary { background: linear-gradient(135deg, #2f62d8, #5a48d6); border-color: #7d95ff; color: #fff; }
.chip:disabled { opacity: .45; filter: saturate(.35); cursor: default; transform: none; }
.chip.primary:hover { box-shadow: 0 4px 18px rgba(80, 110, 230, .45); }
/* the step-size dial is earned: it appears after the first word is learned */
.lrmini { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .1em; color: #7e8db0;
  opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.lrmini.live { opacity: 1; pointer-events: auto; }
.lrmini output, .lrmini b { color: #ffd9a0; font-variant-numeric: tabular-nums; width: 34px; }
.lrmini input { width: 64px; accent-color: #6f9dff; cursor: pointer; }
.lrmini.hot output, .lrmini.hot b { color: #ff8d80; }
.lrmini.hot::after { content: ' too hot'; color: #ff8d80; font-weight: 700; }

#txt.hi { bottom: 86px; width: min(94vw, 980px); } /* just above the one-line menu, never over the lights */
body.living #line { font-size: clamp(19px, 2.2vw, 30px); }
body.living #kicker { margin-bottom: 8px; }
/* a dark floor so caption + menu always read, whatever the scene does behind them */
body.living::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 190px;
  background: linear-gradient(to top, rgba(4, 7, 16, .92), rgba(4, 7, 16, 0));
  z-index: 15; pointer-events: none;
}

/* living mode keeps the top counter quiet — one voice, and it is the caption */
body.living #counter { font-size: clamp(18px, 2vw, 26px); text-shadow: 0 0 14px rgba(255, 190, 110, .25); }
body.living #counterLabel { font-size: 9px; letter-spacing: .4em; }
body.living #guessline { margin-top: 4px; }

@media (max-width: 860px) {
  #txt { bottom: 22vh; }
  #txt.hi { bottom: 242px; width: calc(100vw - 28px); }
  body.living:has(#lrMini.live) #txt.hi { bottom: 290px; }
  #counterWrap { width: calc(100vw - 28px); max-width: 520px; }
  #counterLabel { letter-spacing: .12em; }
  #story {
    top: 112px; left: 14px; right: 14px; max-width: none; text-align: center;
    font-size: 11.5px; line-height: 1.55; letter-spacing: .02em; color: #8b9fc8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  }
  #hud {
    width: calc(100vw - 24px); max-width: 360px; display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "words words words" "score train run" "size size tools";
    gap: 8px; padding: 10px; flex-wrap: unset;
  }
  #promptChips {
    grid-area: words; width: 100%; display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  }
  #promptChips .chip { width: 100%; min-height: 42px; padding: 7px 5px; font-size: 12px; }
  #hudScore {
    grid-area: score; min-height: 42px; display: flex; align-items: center; justify-content: center;
  }
  #hudTrain, #hudRun { min-height: 42px; padding: 7px 10px; }
  #hudTrain { grid-area: train; }
  #hudRun { grid-area: run; }
  #lrMini { grid-area: size; min-width: 0; min-height: 42px; gap: 6px; }
  #lrMini:not(.live) { visibility: hidden; height: 0; min-height: 0; overflow: hidden; pointer-events: none; }
  #lrMini.live { visibility: visible; height: auto; }
  .lrmini input { width: 88px; }
  #hudtools { grid-area: tools; justify-content: flex-end; gap: 6px; }
  #hudtools .chip { min-width: 42px; min-height: 42px; padding: 7px 8px; }
  #hudtools #hudReset { min-width: 78px; }
  #brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .spot::after { animation: none !important; }
}