/* ============================================================
   KNOTT Hard Iced Tea — Tongue Twister page

   Layers on styles.css: same tokens (--gold / --navy / --pale),
   same type (Rubik Black headlines, Rubik Medium UI, Kodchasan body),
   same masked .mark logos tinted by `color`.
   Yellow (--gold) page, navy (--navy) ink — guideline primary pair.
   ============================================================ */

/* ── Thai face: Anuphan, from 01 CI/Fonts (SIL OFL, see OFL-Anuphan.txt).
      Used for every Thai string on this page; Latin stays Rubik/Kodchasan. */
@font-face{
  font-family:'Anuphan';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Anuphan-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Anuphan';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Anuphan-Bold.woff2') format('woff2');
}

:root{
  --tt-seconds:6s;    /* must match ROUND_MS in game.js */
  --thai:'Anuphan','Kodchasan',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── UI labels on this page: Rubik Black (CI headline weight) ───
      Small tracked caps in Rubik Medium read as a generic grotesque;
      the Black weight is the brand's recognisable voice (logotype,
      packaging labels, FIND YOUR KNOTT). Tracking eased to suit. */
.tt-body .eyebrow{font-weight:900;letter-spacing:1.3px}
.tt-body .tt__start{font-weight:900}
/* (back link, hint, quit, footer strip and the selector set 900 in their own rules below) */

.tt-body{
  background:var(--gold);color:var(--navy);
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
}

/* ── Dynamic background: bouncing white symbols ──────────────
      Fixed layer under everything; game.js positions the icons with
      transforms. Content sections get z-index:1 so text stays on top. */
.tt-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.tt-bg__icon{
  position:absolute;top:0;left:0;
  color:var(--white);opacity:.72;
  will-change:transform;
}
/* Halloween sprites (pumpkin / bat) — raster art, so a touch more opaque */
.tt-bg__sprite{
  position:absolute;top:0;left:0;height:auto;
  opacity:.9;will-change:transform;pointer-events:none;user-select:none;
}
.tt-bg__sprite--bat{opacity:.68}   /* dark art: keep it behind the navy type */

/* Gold halo on the big type — same colour as the page so it's invisible,
   until a dark sprite passes behind the letters and gets knocked back. */
.tt__title,.tt__twister,.tt__done,.tt__lede,.tt__count{
  text-shadow:0 0 6px var(--gold),0 0 14px var(--gold),0 0 26px var(--gold);
}
.tt-bar,.tt,.tt-foot{position:relative;z-index:1}

/* ── Top bar ─────────────────────────────────────────────── */
.tt-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad-x);
}
.tt-bar__logo{width:120px;color:var(--navy)}          /* logotype, per p30 */
.tt-bar__logo:hover{color:#26325f}
.tt-bar__back{
  font-family:var(--head);font-weight:900;font-size:14px;letter-spacing:.9px;
  text-transform:uppercase;text-decoration:none;color:var(--navy);opacity:.8;
}
.tt-bar__back:hover{opacity:1}

/* ── Stage: screens stacked in one grid cell ─────────────── */
.tt{
  flex:1;display:grid;place-items:center;
  padding:16px var(--pad-x) 48px;
}
.tt__screen{
  grid-area:1/1;width:100%;max-width:960px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  /* leaving: quick fade out, then hidden */
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
  pointer-events:none;
}
.tt__screen.is-active{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  /* entering: becomes focusable at once, but only fades in after the old
     screen has cleared (.14s) — so the two never overlap */
  transition:opacity .28s ease .14s,transform .28s ease .14s,visibility 0s;
}

/* ── Idle ────────────────────────────────────────────────── */
.tt__symbol{width:clamp(84px,11vw,120px);color:var(--navy);margin-bottom:28px}
.tt__symbol--sm{width:64px;margin-bottom:18px}
.tt__title{
  margin:12px 0 18px;font-family:var(--head);font-weight:900;
  font-size:clamp(56px,11vw,120px);line-height:.88;letter-spacing:-2px;color:var(--navy);
}
.tt__lede{
  margin:0 0 34px;max-width:440px;
  font-family:var(--body);font-weight:500;font-size:19px;line-height:1.55;color:var(--navy);
}
.tt__lede strong{font-weight:600}
/* language selector — segmented pill in the navy/gold button idiom */
.tt__lang{
  display:inline-flex;gap:4px;padding:4px;margin-bottom:30px;
  border:1.5px solid var(--navy);border-radius:100px;
  background:var(--gold);   /* opaque so background sprites don't show through the pill */
}
.tt__lang-btn{
  padding:10px 24px;border:0;border-radius:100px;background:transparent;cursor:pointer;
  font-family:var(--head);font-weight:900;font-size:14px;letter-spacing:.9px;
  text-transform:uppercase;color:var(--navy);
  transition:background-color .15s ease,color .15s ease;
}
.tt__lang-btn[lang="th"]{
  font-family:var(--thai);font-weight:600;font-size:16px;letter-spacing:0;text-transform:none;
}
.tt__lang-btn:hover{background:rgba(48,63,121,.1)}
.tt__lang-btn.is-selected{background:var(--navy);color:var(--gold)}
.tt__lang-btn:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

.tt__start{padding:19px 60px;font-size:18px;letter-spacing:1.6px}
.tt__start:focus-visible{outline-color:var(--navy)}
.tt__hint{
  margin:22px 0 0;font-family:var(--head);font-weight:900;
  font-size:13px;letter-spacing:.9px;text-transform:uppercase;color:var(--navy);opacity:.55;
}
.tt__hint kbd{
  font:inherit;padding:2px 8px;border:1.5px solid currentColor;border-radius:6px;margin:0 2px;
}
@media (hover:none){ .tt__hint{display:none} }

/* ── Play ────────────────────────────────────────────────── */
.tt__screen--play{justify-content:center;min-height:58vh}
.tt__prompt{margin:0 0 26px;opacity:.75}
.tt__prompt [lang="th"]{
  font-family:var(--thai);font-weight:600;letter-spacing:0;text-transform:none;font-size:1.1em;
}

.tt__twister{
  margin:0 auto 40px;max-width:21ch;
  font-family:var(--head);font-weight:900;text-transform:uppercase;
  font-size:clamp(28px,4.8vw,62px);line-height:1.08;letter-spacing:-.6px;color:var(--navy);
}
/* Thai round — Anuphan Bold, no casing, taller leading for tone marks */
.tt__twister--th{
  font-family:var(--thai);font-weight:700;text-transform:none;letter-spacing:0;
  font-size:clamp(28px,4.6vw,58px);line-height:1.4;max-width:24ch;
}
.tt__twister .line{display:block}
/* longer twisters: smaller type, wider measure, so they still fit one screen */
.tt__twister--long{font-size:clamp(22px,3.6vw,46px);max-width:34ch;line-height:1.12}
.tt__twister--th.tt__twister--long{font-size:clamp(21px,3.3vw,40px);max-width:30ch;line-height:1.4}

/* selector button pops when its twister is re-rolled */
.tt__lang-btn.pop{animation:tt-pop .24s ease}

/* timer ring */
.tt__timer{position:relative;width:96px;height:96px;margin-bottom:28px}
.tt__ring{width:100%;height:100%;transform:rotate(-90deg)}
.tt__ring-track,.tt__ring-progress{fill:none;stroke-width:7;stroke-linecap:round}
.tt__ring-track{stroke:var(--navy);opacity:.18}
.tt__ring-progress{
  stroke:var(--navy);
  stroke-dasharray:276.46;                 /* 2πr, r = 44 */
  stroke-dashoffset:0;
}
.tt__timer.is-running .tt__ring-progress{
  animation:tt-drain var(--tt-seconds) linear forwards;
}
@keyframes tt-drain{to{stroke-dashoffset:276.46}}
.tt__count{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--head);font-weight:900;font-size:34px;color:var(--navy);
}
.tt__count.tick{animation:tt-pop .24s ease}
@keyframes tt-pop{from{transform:scale(1.28)}to{transform:scale(1)}}
/* last two seconds: ring + count pulse (stays in CI — no red) */
.tt__screen--play.is-urgent .tt__count{animation:tt-pulse .5s ease-in-out infinite alternate}
@keyframes tt-pulse{from{transform:scale(1)}to{transform:scale(1.14)}}

.tt__quit{
  margin-top:8px;padding:8px 14px;background:none;border:0;cursor:pointer;
  font-family:var(--head);font-weight:900;font-size:13px;letter-spacing:.9px;
  text-transform:uppercase;color:var(--navy);opacity:.55;
}
.tt__quit:hover,.tt__quit:focus-visible{opacity:1;outline:none;text-decoration:underline}

/* ── Done flash ──────────────────────────────────────────── */
.tt__done{
  margin:0 0 12px;font-family:var(--head);font-weight:900;
  font-size:clamp(44px,9vw,96px);line-height:.92;letter-spacing:-1.6px;color:var(--navy);
}
.tt__screen--done .tt__lede{margin-bottom:0}

/* ── Footer strip ────────────────────────────────────────── */
.tt-foot{padding:18px var(--pad-x) 26px;text-align:center}
.tt-foot__warning{
  margin:0;font-family:var(--head);font-weight:900;font-size:13px;letter-spacing:.9px;
  text-transform:uppercase;color:var(--navy);opacity:.6;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:640px){
  .tt-bar{padding:18px var(--pad-x)}
  .tt-bar__logo{width:104px}
  .tt-bar__back{font-size:12px}
  .tt__title{font-size:clamp(52px,16vw,80px)}
  .tt__lede{font-size:17px}
  .tt__start{width:100%;max-width:320px}
  .tt__timer{width:80px;height:80px;margin-bottom:22px}
  .tt__count{font-size:28px}
  .tt__twister{margin-bottom:30px}
}

@media (prefers-reduced-motion:reduce){
  .tt__screen{transition:none;transform:none}
  .tt__count.tick,.tt__screen--play.is-urgent .tt__count{animation:none}
}