/* ── TOKENS ── */
:root {
  /* ── Surfaces ── soft warm off-white → crisp cards */
  --bg: #F6F2EA;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --ink: #1A1F2E;
  --ink2: #3C4255;
  --muted: #7E859A;
  --faint: #C4CAD8;
  --hairline: #ECEAE2;
  --gold: #C9A24B;
  --accent: #14B8A6;
  --accent-deep: #0D9488;
  --accent-bg: #D7F7F2;

  /* Hot = too high, go lower (warm coral) */
  --hot: #F16A4E;
  --hot-deep: #D9472B;
  /* --hot-bg one notch deeper: was #FFEFEA (HSL ~15°/100%/96%). At that
     lightness the tiles read as near-white with a whisper of color. This
     value (HSL ~15°/100%/92%) keeps the pastel feel but lets the hot tiles
     actually read as "warm" in a row of guesses. */
  --hot-bg: #FFE5DB;
  --hot-soft: #F8B8A6;

  /* Cold = too low, go higher (cool blue) */
  --cold: #3B7DD8;
  --cold-deep: #1F5EB8;
  /* --cold-bg one notch deeper: was #E8F1FC (HSL 214°/77%/95%). Paired
     with the hot-bg bump so cold and hot tiles keep visual parity. */
  --cold-bg: #DCE9FA;
  --cold-soft: #A8C8F0;

  /* Exact match (vibrant green) */
  --ok: #0EAF5B;
  --ok-deep: #098244;
  --ok-bg: #DDF3E4;
  --ok-soft: #8FDDAB;

  /* ── Radius scale ── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
  --radius: var(--r-md);

  /* ── Spacing scale (4px base) ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  /* ── Shadow system ── crisper, mockup-aligned */
  --shadow-xs: 0 1px 2px rgba(20,30,50,.06);
  --shadow-sm: 0 2px 6px rgba(20,30,50,.08);
  --shadow-md: 0 6px 18px rgba(20,30,50,.10);
  --shadow-lg: 0 14px 40px rgba(20,30,50,.14);
  --shadow-xl: 0 22px 60px rgba(20,30,50,.18);

  --t-fast: .12s;
  --t-mid: .22s;
  --t-slow: .4s;
  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  /* Responsive sizing tokens */
  --shell-max: 480px;
  --shell-pad: 16px;
  --tile-gap: 8px;
  --tile-radius: 12px;
  --tile-font: clamp(1.55rem, 6.5vw, 2.1rem);
  --htile-font: clamp(1.3rem, 5.2vw, 1.75rem);
  --arrow-font: clamp(.7rem, 2.4vw, .85rem);
  --range-bar-h: 5px;
  --range-label-font: clamp(.68rem, 2.2vw, .82rem);
  --range-gap: 3px;
  --guess-dot-h: 4px;
  --hdr-btn-size: 38px;
  --hdr-icon-font: 1rem;
  --logo-font: 1.9rem;
  --key-h: 48px;
  --key-max: 44px;
  --key-font: .95rem;
  --key-wide-max: 64px;
  --key-wide-font: .7rem;
  --kb-gap: 4px;
  --toast-font: .88rem;
  --guess-num-font: .78rem;
}

[data-theme="dark"] {
  --bg: #0E1118;
  --surface: #1A1F2A;
  --card: #1F2533;
  --ink: #F1F3F7;
  --ink2: #C6CAD6;
  --muted: #8B91A3;
  --faint: #3A4152;
  --hairline: #2B313F;
  --gold: #D4B66A;
  --accent: #2DD4BF;
  --accent-deep: #14B8A6;
  --accent-bg: #0F3533;

  --hot: #F48160;
  --hot-deep: #F16A4E;
  --hot-bg: #2A1C16;
  --hot-soft: #8F4A3D;

  --cold: #6BA3E8;
  --cold-deep: #3B7DD8;
  --cold-bg: #141E2A;
  --cold-soft: #3E608F;

  --ok: #3DD07A;
  --ok-deep: #22B560;
  --ok-bg: #13261B;
  --ok-soft: #3D6E4F;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.3);
  --shadow-md: 0 6px 18px rgba(0,0,0,.35);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.45);
  --shadow-xl: 0 22px 60px rgba(0,0,0,.55);
}

/* ── BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; touch-action: manipulation; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background .35s, color .35s;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── SHELL ── */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--shell-pad) 220px;
}

/* ── ICONS (refined SVG set, replaces emoji) ── */
.hi-icon {
  width: 20px; height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.hi-icon-sm { width: 14px; height: 14px; stroke-width: 2; }

/* ── HEADER - minimal ── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--hairline);
  animation: fadeIn .5s var(--ease) both;
  position: relative;
  z-index: 150;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex-shrink: 1;
}
.logo-mark {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--logo-font);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  transition: color .35s;
}
.logo-hi { color: var(--cold); }
.logo-lo { color: var(--hot); }
/* Puzzle tag (#040) - flat mono number that sits next to the wordmark */
.logo-day {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Mono', monospace;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  background: transparent;
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
  line-height: 1;
  align-self: center;
  text-transform: none;
  transform: none;
}
.logo-day-no { display: none; }
.logo-day-num { font-weight: 600; letter-spacing: .02em; }
.logo-day-num::before { content: '#'; opacity: .55; margin-right: 1px; }
.hdr-actions {
  display: flex;
  gap: 0;
  align-items: center;
  flex-shrink: 0;
}
.hdr-btn {
  width: var(--hdr-btn-size); height: var(--hdr-btn-size);
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--hdr-icon-font);
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  transition: background var(--t-fast), color var(--t-fast);
}
.hdr-btn:hover { background: var(--hairline); color: var(--ink); }
.hdr-btn:active { transform: scale(.9); }
.hdr-btn:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; }
.hdr-btn.sound-off { opacity: .45; }
.hdr-btn svg.hi-icon { width: 18px; height: 18px; stroke-width: 2; }

/* Segmented EN/RO language pill - wow-mockup .hdr-lang */
.lang-pill {
  width: auto !important;
  height: 26px;
  border-radius: var(--r-pill) !important;
  padding: 0 10px;
  margin: 0 2px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  border: 1px solid var(--hairline) !important;
  color: var(--muted);
  background: var(--surface);
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.lang-pill:hover { color: var(--ink); border-color: var(--faint) !important; background: var(--surface); }
.lang-pill .on  { color: var(--ink); font-weight: 800; }
.lang-pill .off { color: var(--muted); font-weight: 600; }
.lang-pill .sep { color: var(--faint); margin: 0 1px; font-weight: 700; }

/* ── OVERFLOW MENU (⋯) ── */
.hdr-overflow { position: relative; }
.hdr-overflow-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 200;
  min-width: 160px;
  animation: modalPop .15s var(--ease);
}
.hdr-overflow-menu.open { display: flex; flex-direction: column; }
.hdr-overflow-menu .hdr-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink2);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  text-decoration: none;
  width: 100%;
  text-align: left;
}
.hdr-overflow-menu .hdr-menu-item:hover { background: var(--hairline); color: var(--ink); }
.hdr-menu-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.hdr-btn-more { color: var(--muted); font-size: 1.3rem; letter-spacing: -.05em; }

/* ── ALPHA RIBBON (global letters-in-play pool) - wow-mockup .alpha-ribbon ── */
.alpha-ribbon {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  animation: slideUp .4s .08s var(--ease) both;
}
.alpha-ribbon-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.alpha-ribbon-title {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}
.alpha-ribbon-count {
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ink);
}
.alpha-ribbon-count .slash { color: var(--faint); margin: 0 2px; }
.alpha-ribbon-ticks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2px 0;
}
.alpha-tick {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  padding: 0;
  user-select: none;
  transform-origin: center center;
  transition: color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
@media (min-width: 420px) {
  .alpha-tick { font-size: 14px; }
}
.alpha-tick.out { opacity: .22; color: var(--muted); }
.alpha-tick.ok  { color: var(--ok); }
/* Transient classes added by renderAlphaRibbon() ONLY when a tick changes
   state after a guess. Keeps idle re-renders silent so the ribbon doesn't
   strobe every time the function runs. */
.alpha-tick.just-out {
  animation: alphaEliminate .55s var(--ease) both;
}
.alpha-tick.just-ok {
  animation: alphaLockIn .5s var(--ease) both;
}
@keyframes alphaEliminate {
  0%   { transform: translateY(0)    scale(1);    color: var(--hot);   opacity: 1; }
  40%  { transform: translateY(-2px) scale(1.15); color: var(--hot);   opacity: .9; }
  100% { transform: translateY(0)    scale(1);    color: var(--muted); opacity: .22; }
}
@keyframes alphaLockIn {
  0%   { transform: scale(1);   color: var(--ink); text-shadow: 0 0 0 rgba(34,181,96,0); }
  45%  { transform: scale(1.6); color: var(--ok);  text-shadow: 0 0 8px rgba(34,181,96,.55); }
  100% { transform: scale(1);   color: var(--ok);  text-shadow: 0 0 0 rgba(34,181,96,0); }
}
/* Brief pulse on the "x/26" count when the number drops. */
.alpha-ribbon-count.pulse {
  animation: alphaCountPulse .45s var(--ease) both;
}
@keyframes alphaCountPulse {
  0%   { transform: scale(1);   color: var(--ink); }
  50%  { transform: scale(1.18); color: var(--hot); }
  100% { transform: scale(1);   color: var(--ink); }
}

/* ── GUESS COUNTER - wow-mockup .game-progress ── */
.guess-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 2px 0;
  animation: slideUp .4s .1s var(--ease) both;
}
.guess-dots {
  display: flex;
  gap: 4px;
  flex: 1;
}
.gdot {
  flex: 1;
  height: var(--guess-dot-h);
  border-radius: 2px;
  background: var(--hairline);
  transition: background var(--t-mid), transform var(--t-mid);
}
.gdot.used { background: var(--ok); }
.gdot.won { background: var(--ok); }
.gdot.active { background: var(--cold); transform: scaleY(1.8); }
.guess-num {
  font-family: 'DM Mono', monospace;
  font-size: var(--guess-num-font);
  font-weight: 700;
  color: var(--ink);
  min-width: 22px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.guess-num.urgent { color: var(--hot); }
.streak-badge {
  font-size: .75rem;
  font-weight: 600;
  color: var(--hot);
  display: none;
  align-items: center;
  gap: 2px;
  animation: fadeIn .4s var(--ease);
}
.streak-badge.visible { display: flex; }

/* ── INPUT ROW ── */
.input-area {
  padding: 16px 0 0;
  animation: slideUp .4s .15s var(--ease) both;
}
.input-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--tile-gap);
  /* Real 3D depth for the reveal flip. 800px perspective reads as a gentle
     camera tilt - enough to sell a tile-by-tile flip without feeling like a
     toy. */
  perspective: 800px;
}
.itile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tile-radius);
  border: 2px solid var(--hairline);
  background: var(--card);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--tile-font);
  font-weight: 800;
  color: var(--ink);
  position: relative;
  transition: border-color var(--t-fast), background var(--t-fast), transform .08s var(--spring);
  user-select: none;
  will-change: transform;
  box-shadow: var(--shadow-xs);
  /* Enable 3D transforms and clean culling on the back face during rotateX. */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.itile.filled {
  border-color: var(--ink2);
  animation: pop .12s var(--spring);
}
@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes shrink { 0%{transform:scale(1)} 50%{transform:scale(.88)} 100%{transform:scale(1)} }
.itile.shrink { animation: shrink .1s var(--ease); }

.itile.flash-err { animation: flashErr .35s ease; }
@keyframes flashErr {
  0%{border-color:var(--hairline)} 30%{border-color:var(--hot)} 100%{border-color:var(--hairline)}
}

.empty-hint {
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  padding: 18px 0 0;
  animation: fadeIn .6s .3s var(--ease) both;
  transition: opacity .2s;
}

.itile.cursor {
  border-color: var(--cold);
}
.itile.cursor::after {
  content: '';
  position: absolute;
  bottom: 20%;
  width: 35%; height: 2px;
  border-radius: 1px;
  background: var(--cold);
  animation: blink 1s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.15} }

.itile.shake { animation: shake .4s ease; }
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}

/* ── REVEAL CHOREOGRAPHY ──────────────────────────────────────────────────
   Two-phase, JS-driven: first .flip-out rotates the old face out of view
   while dimming, then .flip-in rotates the freshly-classed r-state face
   into view with an overshoot. On the landing class we layer a second
   animation per outcome so the reveal "lands" with character - a green
   halo for OK, a directional bottom-edge swell for cold/hot. The effect
   is noticeably more alive than a plain scaleY flip while keeping the
   original ~400ms per-tile duration the game loop is timed against. */
.itile.flip-out { animation: flipOut .18s cubic-bezier(.55,.08,.68,.53) forwards; }
.itile.flip-in  { animation: flipIn  .24s cubic-bezier(.22,1.12,.36,1) forwards; }

@keyframes flipOut {
  0%   { transform: rotateX(0deg); filter: brightness(1); }
  100% { transform: rotateX(-92deg); filter: brightness(.78); }
}
@keyframes flipIn {
  0%   { transform: rotateX(92deg) scale(.96); filter: brightness(.85); }
  60%  { transform: rotateX(-8deg) scale(1.06); filter: brightness(1.08); }
  100% { transform: rotateX(0deg) scale(1);   filter: brightness(1); }
}

/* OK landing: outward halo pulse - reads as "locked in". */
.itile.r-ok.flip-in {
  animation: flipIn .24s cubic-bezier(.22,1.12,.36,1) forwards,
             okHalo .8s .18s var(--ease) both;
}
@keyframes okHalo {
  0%   { box-shadow: 0 4px 12px -4px rgba(14,175,91,.45), 0 0 0 0 rgba(14,175,91,.55); }
  40%  { box-shadow: 0 4px 12px -4px rgba(14,175,91,.45), 0 0 0 12px rgba(14,175,91,.14); }
  100% { box-shadow: 0 4px 12px -4px rgba(14,175,91,.45), 0 0 0 0 rgba(14,175,91,0); }
}

/* Cold/hot landing: bottom edge swells briefly to emphasize direction. */
.itile.r-cold.flip-in {
  animation: flipIn .24s cubic-bezier(.22,1.12,.36,1) forwards,
             coldSweep .55s .12s var(--ease) both;
}
.itile.r-hot.flip-in {
  animation: flipIn .24s cubic-bezier(.22,1.12,.36,1) forwards,
             hotSweep .55s .12s var(--ease) both;
}
@keyframes coldSweep {
  0%   { border-bottom-color: var(--cold); border-bottom-width: 4px; }
  45%  { border-bottom-color: var(--cold-deep); border-bottom-width: 6px; }
  100% { border-bottom-color: var(--cold); border-bottom-width: 4px; }
}
@keyframes hotSweep {
  0%   { border-bottom-color: var(--hot); border-bottom-width: 4px; }
  45%  { border-bottom-color: var(--hot-deep); border-bottom-width: 6px; }
  100% { border-bottom-color: var(--hot); border-bottom-width: 4px; }
}

/* Reveal states - match wow .tile.hi / .tile.lo (neutral border, tinted bottom edge).
   The bottom edge is intentionally 4px (was 3px) so the directional accent
   carries real weight against the deeper --cold-bg / --hot-bg and reads
   cleanly even at small tile sizes. */
.itile.r-cold {
  background: linear-gradient(180deg, var(--cold-bg) 0%, var(--surface) 100%);
  border: 2px solid var(--hairline);
  border-bottom: 4px solid var(--cold);
  color: var(--cold-deep);
}
.itile.r-hot {
  background: linear-gradient(0deg, var(--hot-bg) 0%, var(--surface) 100%);
  border: 2px solid var(--hairline);
  border-bottom: 4px solid var(--hot);
  color: var(--hot-deep);
}
.itile.r-ok {
  background: linear-gradient(180deg, var(--ok) 0%, var(--ok-deep) 100%);
  border-color: var(--ok-deep);
  border-bottom: 3px solid var(--ok-deep);
  color: #FFFFFF;
  box-shadow: 0 4px 12px -4px rgba(14,175,91,.45);
}

/* ── HISTORY ── */
.history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
}
.hist-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--tile-gap);
  animation: rowIn .3s var(--ease) both;
}
@keyframes rowIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.htile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tile-radius);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--htile-font);
  font-weight: 800;
  position: relative;
  overflow: hidden;
  animation: tileIn .3s var(--ease) both;
  transition: transform .15s var(--ease);
  will-change: transform;
}
.htile:hover { transform: translateY(-1px); }
@keyframes tileIn {
  from { opacity:0; transform:scale(.8); }
  to   { opacity:1; transform:scale(1); }
}

/* Cold: soft blue wash + tinted bottom edge (wow .tile.hi) */
.htile.h-cold {
  background: linear-gradient(180deg, var(--cold-bg) 0%, var(--surface) 100%);
  border: 1px solid var(--hairline);
  border-bottom: 3px solid var(--cold);
  color: var(--cold-deep);
}

/* Hot: soft coral wash + tinted bottom edge (wow .tile.lo) */
.htile.h-hot {
  background: linear-gradient(0deg, var(--hot-bg) 0%, var(--surface) 100%);
  border: 1px solid var(--hairline);
  border-bottom: 3px solid var(--hot);
  color: var(--hot-deep);
}

/* Win: punchy gradient + glow */
.htile.h-ok {
  background: linear-gradient(180deg, var(--ok) 0%, var(--ok-deep) 100%);
  border-color: var(--ok-deep);
  border-bottom: 3px solid var(--ok-deep);
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: 0 4px 12px -4px rgba(14,175,91,.45);
}
.ht-arrow {
  position: absolute;
  bottom: 5px;
  right: 6px;
  font-size: var(--arrow-font);
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  opacity: .55;
  line-height: 1;
}
.htile.h-cold .ht-arrow { color: var(--cold-deep); }
.htile.h-hot  .ht-arrow { color: var(--hot-deep); }
.htile.h-ok   .ht-arrow { color: rgba(255,255,255,.85); opacity: 1; }

/* ── RANGE HINTS - compact letter ranges under each row ── */
.range-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--tile-gap);
  margin-top: -2px;
  margin-bottom: 4px;
}
.range-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--range-gap);
}
.range-bar {
  width: 100%;
  height: var(--range-bar-h);
  border-radius: 2px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.range-fill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 2px;
  background: var(--cold-soft);
  transition: left .5s var(--ease), width .5s var(--ease);
}
/* Freshly-added guess rows get .rr-anim; the fill animates from a full
   26-wide band down to its narrowed target, making the range-shrink
   mechanic visible instead of appearing pre-collapsed. Replay rows on
   reload skip this class so historical bars stay stable. */
@keyframes rangeShrink {
  from { left: 0%; width: 100%; background: var(--cold); }
}
.range-row.rr-anim .range-fill:not(.locked) {
  animation: rangeShrink .6s var(--ease) backwards;
  animation-delay: .22s;
}
.range-row.rr-anim .range-fill.locked {
  animation: rangeLockPulse .55s var(--ease) .22s backwards;
}
@keyframes rangeLockPulse {
  0%   { transform: scaleY(1); filter: brightness(1); }
  55%  { transform: scaleY(1.6); filter: brightness(1.25); }
  100% { transform: scaleY(1); filter: brightness(1); }
}
.range-row.rr-anim .range-label {
  animation: rangeLabelFade .5s var(--ease) .4s backwards;
}
@keyframes rangeLabelFade {
  from { opacity: 0; transform: translateY(-2px); }
}
.range-fill.locked {
  background: var(--ok);
  left: 0 !important;
  width: 100% !important;
}
.range-fill.tight {
  background: var(--cold);
}
.range-label {
  font-family: 'DM Mono', monospace;
  font-size: var(--range-label-font);
  color: var(--muted);
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--t-mid);
  font-weight: 600;
}
.range-label.rl-locked {
  color: var(--ok);
  font-weight: 600;
}
.range-label.rl-tight {
  color: var(--cold);
  font-weight: 600;
}

/* ── KEYBOARD ── */
.kb-wrap {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline);
  padding: 7px 4px;
  padding-bottom: max(7px, env(safe-area-inset-bottom));
  z-index: 100;
  animation: slideUp .4s .25s var(--ease) both;
  transition: background .35s, border-color .35s;
}
.keyboard {
  max-width: var(--shell-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--kb-gap);
}
.key-row { display: flex; gap: 5px; justify-content: center; }
.key {
  height: var(--key-h);
  flex: 1;
  max-width: var(--key-max);
  border-radius: var(--r-sm);
  border: none;
  background: var(--card);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--key-font);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast), transform .06s, box-shadow var(--t-fast), opacity var(--t-mid);
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
}
.key:hover { box-shadow: var(--shadow-sm); }
.key:active { transform: translateY(1px); }
.key.wide {
  max-width: var(--key-wide-max);
  font-size: var(--key-wide-font);
  font-weight: 700;
  letter-spacing: .04em;
}
.key:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; }
.key.k-cold { background: var(--cold-bg); color: var(--cold-deep); box-shadow: none; border-color: var(--cold-bg); }
.key.k-hot  { background: var(--hot-bg);  color: var(--hot-deep);  box-shadow: none; border-color: var(--hot-bg); }
.key.k-ok   { background: var(--ok); color: #fff; border-color: var(--ok-deep); box-shadow: 0 2px 6px -2px rgba(14,175,91,.35); font-weight: 800; }
.key.k-go {
  background: linear-gradient(180deg, var(--ink) 0%, #11151F 100%);
  color: var(--bg);
  border-color: #0A0D14;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.25);
}
.k-rip {
  position:absolute; border-radius:50%; width:24px; height:24px;
  background: rgba(0,0,0,.06);
  transform:scale(0); pointer-events:none;
  animation: kRip .35s ease forwards;
}
[data-theme="dark"] .k-rip { background: rgba(255,255,255,.06); }
@keyframes kRip { to { transform:scale(4); opacity:0; } }

/* ── TOAST ── */
.toast-wrap {
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:900; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.toast {
  background: var(--ink);
  color: var(--bg);
  font-size: var(--toast-font);
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 100px;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s var(--spring) both, toastOut .3s 2s ease forwards;
}
.toast.t-ok { background: var(--ok); color: white; }
@keyframes toastIn  { from{opacity:0;transform:translateY(-10px) scale(.92);}to{opacity:1;transform:none;} }
@keyframes toastOut { to{opacity:0;transform:translateY(-8px);} }

/* ── RESULT (modal overlay) ── */
.result-bg {
  display: none;
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 1100;
  align-items: safe center; justify-content: center;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.result-bg.show {
  display: flex;
}
.result {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: var(--r-xl);
  background: var(--card);
  padding: var(--s-6) var(--s-5) var(--s-5);
  text-align: center;
  box-shadow: var(--shadow-xl);
  transition: background .35s;
  animation: slideUp .5s var(--spring);
}
/* Result eyebrow - mockup .res-eyebrow */
.res-badge {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .2em;
  color: var(--ok);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.result.lost .res-badge { color: var(--muted); }
/* Result hero title - mockup .res-title */
.res-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.res-word {
  display: none;
  font-family: 'DM Mono', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--ok);
  margin: 8px 0 4px;
}
.result.lost .res-word { color: var(--hot); }
.res-sub {
  font-size: .82rem;
  color: var(--ink2);
  margin-bottom: 14px;
  display: none;
}
/* ── POST-GAME INSIGHTS BAR - mockup .res-pills + .res-sub ── */
.res-insights {
  display: none;
  gap: 10px;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
  animation: fadeIn .5s .3s var(--ease) both;
}
.res-insights.show { display: flex; }
.res-insights-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  color: var(--ink2);
  font-weight: 500;
}
.res-insight-pill {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink2);
  padding: 0;
}
.res-insight-pill .insight-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  line-height: 1;
}
.res-insight-pill .insight-val {
  font-weight: 700; color: var(--ink);
}
/* Percentile - mockup .res-sub: muted body + accent strong */
.res-percentile {
  font-family: 'DM Sans', sans-serif;
  font-size: .84rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 0;
  letter-spacing: 0;
  text-align: center;
}
.res-percentile strong { color: var(--accent); font-weight: 700; }
.result.lost .res-percentile { color: var(--muted); }
.result.lost .res-percentile strong { color: var(--muted); }

/* ── TODAY'S WORD - playful preview card ── */
.res-entry-card {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  margin: var(--s-1) 0 var(--s-4);
  box-shadow: var(--shadow-sm);
  animation: fadeIn .4s .25s var(--ease) both;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.res-entry-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.res-entry-card:active { transform: translateY(-1px); }

/* wow .entry-card eyebrow pill with dot */
.res-entry-head {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  margin: var(--s-4) var(--s-5) var(--s-1);
  border-radius: var(--r-pill);
  background: var(--accent-bg);
  color: var(--accent);
  font-family: 'DM Mono', monospace;
  font-size: .56rem;
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.res-entry-head::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.res-entry-body { padding: 0 var(--s-5) var(--s-4); }
.res-entry-hero {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
  flex-wrap: wrap;
  line-height: 1;
}
.res-entry-word {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--ink);
  letter-spacing: -.025em;
  text-transform: lowercase;
  line-height: 1;
}
.res-entry-phon {
  font-family: 'DM Mono', monospace;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1;
  font-weight: 500;
}
.res-entry-pos {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  margin: 0 0 var(--s-3);
  text-transform: uppercase;
}
.res-entry-def {
  font-family: 'DM Sans', sans-serif;
  font-size: .94rem;
  color: var(--ink2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-weight: 400;
}
.res-entry-loading {
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-size: .92rem;
  color: var(--muted);
}

.res-entry-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  margin: 0 var(--s-4) var(--s-4);
  background: var(--accent);
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  letter-spacing: .01em;
  font-weight: 700;
  border-radius: var(--r-md);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 4px 14px -2px rgba(20,184,166,.35);
}
.res-entry-card:hover .res-entry-cta {
  background: #0D9488;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -2px rgba(20,184,166,.5);
}
.res-entry-cta svg {
  width: 16px; height: 16px;
  stroke-width: 2.4;
  transition: transform .2s var(--ease);
}
.res-entry-card:hover .res-entry-cta svg { transform: translateX(3px); }
[data-theme="dark"] .res-entry-cta {
  box-shadow: 0 4px 14px -2px rgba(45,212,191,.3);
}

/* ── LEGACY: small Explore button (kept for compact layouts / not used by default) ── */
.res-word-card-btn {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 8px 20px;
  border-radius: 100px;
  border: 1.5px solid var(--hairline);
  background: var(--surface);
  color: var(--ink2);
  font-family: 'DM Sans', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: all var(--t-mid);
  margin-bottom: 12px;
}
.res-word-card-btn:hover { border-color: var(--cold); color: var(--cold); background: var(--cold-bg); }
.res-word-card-btn:active { transform: scale(.96); }
.res-word-card-btn .wc-icon { font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   WORD CARD - playful, colorful word detail page
   ═══════════════════════════════════════════════════════════════════════════ */
.wc-bg {
  display: none;
  position: fixed; inset: 0;
  z-index: 1200;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  color: var(--ink);
}
.wc-bg.show { display: block; animation: wcPageOpen .55s cubic-bezier(.2,.7,.2,1); }
@keyframes wcPageOpen { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.wc-inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 var(--s-5) 90px;
  min-height: 100dvh;
  position: relative;
}

/* Close button - soft rounded */
.wc-close {
  position: fixed; top: var(--s-3); right: var(--s-3);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--hairline);
  color: var(--ink2); font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 1201;
  box-shadow: var(--shadow-md);
  transition: all .18s var(--ease);
}
.wc-close:hover { background: var(--hairline); color: var(--ink); transform: scale(1.05); }
.wc-close:active { transform: scale(.95); }

/* ── MASTHEAD - simple pill kicker ── */
.wc-masthead {
  text-align: center;
  padding: var(--s-8) 0 0;
  animation: wcFadeIn .5s ease both;
}
.wc-title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: 'DM Sans', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 8px var(--s-4);
  border-radius: var(--r-pill);
  margin: 0;
}
.wc-title::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(20,184,166,.22);
}
.wc-title-the { display: none; }
.wc-dateline {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  color: var(--muted);
  margin-top: var(--s-3);
  font-weight: 500;
}
.wc-dateline .sep { margin: 0 var(--s-2); color: var(--faint); }
.wc-rule-double { display: none; }
.wc-tiles { display: none; }

/* ── HERO - giant bold word ── */
.wc-fleuron, .wc-fleuron-sm { display: none; }
.wc-hero {
  text-align: center;
  padding: var(--s-6) 0 var(--s-5);
  animation: wcFadeIn .6s .15s ease both;
}
.wc-headline {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 13vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-transform: lowercase;
  background: linear-gradient(135deg, var(--cold) 0%, var(--accent) 50%, var(--hot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Legacy single-line phonetic (kept as a CSS-reachable fallback - the
   live HTML container now uses .wc-phonetic-row and pills below). */
.wc-phonetic {
  font-family: 'DM Mono', monospace;
  font-size: .95rem;
  color: var(--muted);
  letter-spacing: .02em;
  margin-bottom: var(--s-3);
  font-weight: 500;
}

.wc-audio-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: .8rem; font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink2);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all .18s var(--ease);
}
.wc-audio-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.wc-audio-btn:active { transform: scale(.95); }
.wc-audio-btn.playing { animation: wcListenPulse 1.1s ease-in-out infinite; }
@keyframes wcListenPulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }

.wc-rule { display: none; }
.wc-divider { display: none; }

/* ── SECTION TITLES ── */
.wc-section-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  font-weight: 700;
  margin: var(--s-6) 0 var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
}
.wc-section-title::before {
  content: '';
  width: 4px; height: 16px; border-radius: 2px;
  background: var(--accent);
}

/* ── DEFINITIONS - clean cards ── */
.wc-defs { margin-bottom: var(--s-3); }
.wc-def-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  text-align: left;
  margin-bottom: var(--s-3);
  box-shadow: var(--shadow-xs);
  animation: wcFadeIn .5s ease both;
}
.wc-def-card:nth-child(1) { animation-delay: .3s; }
.wc-def-card:nth-child(2) { animation-delay: .4s; }
.wc-def-card:nth-child(3) { animation-delay: .5s; }
.wc-def-card::before { display: none; }
.wc-def-card + .wc-def-card { border-top: 1px solid var(--hairline); }

.wc-def-pos {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px var(--s-2);
  border-radius: var(--r-pill);
  color: var(--accent);
  background: var(--accent-bg);
  margin-bottom: var(--s-2);
  text-transform: uppercase;
}
.wc-def-pos::before, .wc-def-pos::after { content: none; }
.wc-def-pos[data-pos="noun"], .wc-def-pos[data-pos="substantiv"] { color: var(--cold); background: var(--cold-bg); }
.wc-def-pos[data-pos="verb"] { color: var(--ok); background: var(--ok-bg); }
.wc-def-pos[data-pos="adjective"], .wc-def-pos[data-pos="adjectiv"] { color: var(--hot); background: var(--hot-bg); }
.wc-def-pos[data-pos="adverb"] { color: var(--accent); background: var(--accent-bg); }

.wc-def-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
}
.wc-def-card:first-child .wc-def-text::first-letter { all: unset; }
.wc-def-example {
  margin-top: var(--s-3);
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-style: italic;
  color: var(--muted);
  padding-left: var(--s-3);
  border-left: 3px solid var(--hairline);
  line-height: 1.5;
}

/* Multi-sense definitions: when the API returns >1 sense for the same POS
   the renderer groups them under a single pill. Each sense is a row with a
   monospace index (1, 2, ...) flanking a definition + optional example. */
.wc-def-sense {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.wc-def-sense + .wc-def-sense {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--hairline);
}
.wc-def-num {
  flex: 0 0 auto;
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.55;
  min-width: 14px;
  padding-top: 2px;
  text-align: right;
}
.wc-def-sense-body { flex: 1; min-width: 0; }

/* ── PHONETIC PILLS ── region-tagged pronunciation chips with inline
   Listen button. Replaces the standalone .wc-audio-btn pattern so UK/US
   pairs can appear side-by-side in a single flex row. */
/* Phonetic row uses the same visual language as the synonyms row
   (.wc-pills / .wc-pill) since that pattern is already proven to render
   as distinct chips across browsers. Explicit !important on the critical
   layout props is a belt-and-suspenders guard in case an inline style
   or an older cached ruleset tries to override. */
.wc-phonetic-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  align-items: center;
  margin-bottom: var(--s-4);
  padding: 0 var(--s-2);
}
.wc-phon-pill {
  display: inline-flex !important;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3) 6px 6px;
  background: var(--card);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.wc-phon-pill:hover { border-color: var(--accent); background: var(--accent-bg); }
.wc-phon-region {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
}
.wc-phon-ipa {
  font-family: 'DM Mono', monospace;
  font-size: .9rem;
  color: var(--ink);
  letter-spacing: .02em;
  font-weight: 500;
  white-space: nowrap;
}
.wc-phon-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-bg);
  border: 1px solid transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .1s var(--ease);
  padding: 0;
  flex-shrink: 0;
}
.wc-phon-play:hover { background: var(--accent); color: #fff; }
.wc-phon-play:active { transform: scale(.92); }
.wc-phon-play.playing { animation: wcListenPulse 1.1s ease-in-out infinite; background: var(--accent); color: #fff; }
.wc-phon-play svg { display: block; }

/* ── INFLECTED FORMS (RO only) ── chip row showing distinct spellings from
   dexonline's lexeme paradigm. Compact and scannable so the card stays
   balanced even when a verb yields 8 forms. */
/* Form chips mirror the synonyms .wc-pill pattern - same inline-flex +
   flex-wrap container - so they inherit the proven display characteristics.
   !important on display props prevents any stale cached CSS from reverting
   the container back to inline flow (which would produce the run-on text). */
.wc-forms-section {
  margin: var(--s-3) 0 var(--s-5);
  animation: wcFadeIn .5s .6s ease both;
}
.wc-forms {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.wc-form-chip {
  display: inline-flex !important;
  align-items: center;
  font-family: 'DM Mono', monospace;
  font-size: .85rem;
  font-weight: 500;
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1.5px solid var(--hairline);
  color: var(--ink);
  letter-spacing: .01em;
  cursor: default;
  box-shadow: var(--shadow-xs);
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.wc-form-chip:hover { border-color: var(--cold); color: var(--cold-deep); background: var(--cold-bg); }

/* ── ETYMOLOGY ── */
.wc-etymology {
  margin: var(--s-3) 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--accent-bg);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-align: left;
  animation: wcFadeIn .5s .55s ease both;
}
.wc-etymology-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  font-weight: 700; margin-bottom: var(--s-2);
  display: flex; align-items: center; gap: var(--s-2);
}
.wc-etymology-label::before {
  content: '✦';
  font-size: .8rem;
  line-height: 1;
}
.wc-etymology-text {
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 400;
  color: var(--ink2);
  line-height: 1.55;
}

/* ── EXAMPLES ── */
.wc-examples {
  margin: var(--s-5) 0 var(--s-5);
  animation: wcFadeIn .5s .65s ease both;
}
.wc-example-item {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: var(--ink2);
  line-height: 1.55;
  padding: var(--s-3) var(--s-4);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-2);
  box-shadow: var(--shadow-xs);
}
.wc-example-item::before, .wc-example-item::after { content: none; }
.wc-example-item + .wc-example-item { margin-top: 0; }

/* ── SYNONYMS / ANTONYMS - chips ── */
.wc-pills-section {
  margin-bottom: var(--s-5);
  animation: wcFadeIn .5s .7s ease both;
}
.wc-pills {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.wc-pill {
  display: inline-flex; align-items: center;
  padding: 6px var(--s-3);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink2);
  transition: all .2s var(--ease);
  cursor: default;
  box-shadow: var(--shadow-xs);
}
.wc-pill + .wc-pill::before { content: none; }
.wc-pill:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.wc-pill-antonym:hover { border-color: var(--hot); color: var(--hot); background: var(--hot-bg); }

/* ── SOURCE LINK ── */
.wc-source {
  text-align: center;
  margin: var(--s-4) 0 var(--s-3);
  animation: wcFadeIn .5s .75s ease both;
}
.wc-source a {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem; font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: .02em;
  text-transform: none;
  transition: color .2s;
}
.wc-source a:hover { color: var(--accent); text-decoration: underline; }

/* ── SHARE ── */
.wc-share-section {
  text-align: center;
  margin: var(--s-6) 0 var(--s-4);
  animation: wcFadeIn .5s .8s ease both;
}
.wc-share-section .wc-section-title { justify-content: center; margin-bottom: var(--s-4); }
.wc-share-section .wc-section-title::before { display: none; }
.wc-share-bar {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.wc-share-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink2);
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem; font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all .18s var(--ease);
}
.wc-share-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.wc-share-btn:active { transform: scale(.96); }
.wc-share-btn svg { width: 14px; height: 14px; fill: currentColor; }

/* ── FOOTER ── */
.wc-footer {
  text-align: center;
  padding: var(--s-5) 0 0;
  margin-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  animation: wcFadeIn .5s .85s ease both;
}
.wc-footer-logo {
  display: inline-flex;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: var(--s-2);
}
.wc-footer-hi { color: var(--cold); }
.wc-footer-lo { color: var(--hot); }
.wc-footer-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--muted);
  font-weight: 500;
}
.wc-footer-url {
  display: inline-block;
  margin-top: var(--s-2);
  font-family: 'DM Sans', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0;
  transition: color .2s;
}
.wc-footer-url:hover { color: var(--ink); text-decoration: underline; }

/* Shared fade-in */
@keyframes wcFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.res-countdown {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 12px;
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}
.res-countdown strong {
  color: var(--ink);
  font-weight: 600;
}

/* Stats inline -  4-chip row with a thin colored top bar per cell. Uses the
   same palette as the board tiles so the grid reads as a continuation of the
   game language: cold (played), accent (win%), hot (streak), ok (max). */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.stat-item {
  position: relative;
  text-align: center;
  padding: 16px 6px 12px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  border-top-width: 3px;
  overflow: hidden;
}
/* Per-cell accent colors - applied via nth-child so the renderer stays dumb. */
.stat-row .stat-item:nth-child(1) { border-top-color: var(--cold); }
.stat-row .stat-item:nth-child(2) { border-top-color: var(--accent); }
.stat-row .stat-item:nth-child(3) { border-top-color: var(--hot); }
.stat-row .stat-item:nth-child(4) { border-top-color: var(--ok); }
.stat-row .stat-item:nth-child(1) .stat-n { color: var(--cold-deep); }
.stat-row .stat-item:nth-child(2) .stat-n { color: var(--accent-deep); }
.stat-row .stat-item:nth-child(3) .stat-n { color: var(--hot-deep); }
.stat-row .stat-item:nth-child(4) .stat-n { color: var(--ok-deep); }
.stat-n {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.stat-l {
  font-family: 'DM Mono', monospace;
  font-size: .54rem;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 3px;
}
/* Distribution bars - mockup-style full-width rows with number + filled bar */
.dist-wrap { margin-bottom: 10px; }
.dist-title {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .18em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
}
.dist-label {
  width: 14px;
  color: var(--muted);
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
}
.dist-bar {
  flex: 1;
  height: 22px;
  min-width: 24px;
  background: var(--hairline);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 7px;
  font-family: 'DM Mono', monospace;
  font-size: .66rem;
  font-weight: 700;
  color: var(--ink2);
  position: relative;
  overflow: hidden;
  transition: width .5s var(--ease);
}
.dist-bar.has-val { background: var(--faint); color: var(--ink); }
.dist-bar.hl {
  background: linear-gradient(90deg, var(--ok) 0%, var(--ok-deep) 100%);
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(14,175,91,.35);
}

/* Share CTA - mockup .res-share-btn: full-width ink pill */
.share-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--ink) 0%, #11151F 100%);
  border: none;
  color: var(--bg);
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: all var(--t-mid);
  box-shadow: var(--shadow-md), 0 4px 14px -4px rgba(20,30,50,.25);
}
.share-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg), 0 8px 20px -4px rgba(20,30,50,.3); }
.share-btn:active { transform:scale(.96); }

.res-close {
  position:absolute; top:10px; right:10px;
  width:44px; height:44px; border-radius:50%;
  background:var(--hairline); border:none;
  color:var(--muted); font-size:.9rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background var(--t-fast), color var(--t-fast);
}
.res-close:hover { background:var(--faint); color:var(--ink); }
.res-close:active { transform:scale(.9); }

.view-results-btn {
  display: none;
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  padding: 13px 28px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--ink) 0%, #11151F 100%);
  border: none;
  color: var(--bg);
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  transition: all var(--t-mid);
  animation: btnFadeIn .3s ease both;
}
@keyframes btnFadeIn { from { opacity:0; } to { opacity:1; } }
.view-results-btn:hover { transform: translateX(-50%) translateY(-2px); box-shadow: var(--shadow-lg); }
.view-results-btn:active { transform: translateX(-50%) scale(.96); }

/* Share preview - wow-mockup .res-share (spectrum / interval bars) */
.share-preview {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 16px;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
}
.share-preview .res-share-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.share-preview .res-share-left {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: .92rem;
}
.share-preview .res-share-left .wm { color: var(--ink); letter-spacing: -.02em; }
.share-preview .res-share-left .wm .hi { color: var(--cold); }
.share-preview .res-share-left .wm .lo { color: var(--hot); }
.share-preview .res-share-left .dot { opacity: .4; margin: 0 4px; }
.share-preview .res-share-left .meta {
  font-family: 'DM Mono', monospace;
  color: var(--ink2);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
}
.share-preview .res-share-meta {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .06em;
  font-weight: 700;
}
.share-preview .res-share-spec {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 8px 0 6px;
}
.share-preview .res-share-spec-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.share-preview .res-share-spec .range-bar {
  height: 5px;
  border-radius: 2px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.share-preview .res-share-spec .range-fill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 2px;
  background: var(--cold-soft);
}
.share-preview .res-share-spec .range-fill.tight { background: var(--cold); }
.share-preview .res-share-spec .range-fill.locked { left: 0 !important; width: 100% !important; background: var(--ok); }
.share-preview .res-share-url {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  color: var(--accent);
  text-align: center;
  margin-top: 8px;
  letter-spacing: .02em;
  font-weight: 600;
}

/* ── MODAL ── */
.modal-bg {
  display: none;
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1100;
  align-items: center; justify-content: center;
  padding: 16px;
}
.modal-bg.show { display: flex; }
.modal-bg { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal {
  background: var(--card);
  border-radius: var(--r-xl);
  max-width: 380px; width: 100%;
  padding: var(--s-6) var(--s-6) var(--s-5);
  position: relative;
  box-shadow: var(--shadow-xl);
  animation: modalPop .35s var(--spring);
  max-height: 88vh;
  overflow-y: auto;
  transition: background .35s;
}
@keyframes modalPop { from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:none} }

/* Dark-mode CTA tone - prevent the bright-white slab inversion of var(--ink).
   Every primary CTA gets a subtle dark gradient + soft accent glow so it reads
   as a confident button on dark surfaces instead of an out-of-place white block. */
[data-theme="dark"] .splash-cta,
[data-theme="dark"] .modal-go,
[data-theme="dark"] .share-btn,
[data-theme="dark"] .view-results-btn,
[data-theme="dark"] .key.k-go {
  background: linear-gradient(180deg, #2A3040 0%, #1F2533 100%);
  color: var(--ink);
  border: 1px solid #3A4152;
  box-shadow: var(--shadow-md), 0 4px 14px -4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .splash-cta:hover,
[data-theme="dark"] .modal-go:hover,
[data-theme="dark"] .share-btn:hover,
[data-theme="dark"] .view-results-btn:hover {
  background: linear-gradient(180deg, #323A4D 0%, #252B3A 100%);
  box-shadow: var(--shadow-lg), 0 8px 20px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Dark-mode contrast pass for the newly wow-aligned surfaces. The -deep
   tokens collapse into the -base tones in dark (so the deep blue/coral on a
   dark surface is already the saturated version). Use the brighter non-deep
   accents directly for the stat numbers and share bars so they pop. */
[data-theme="dark"] .stat-row .stat-item:nth-child(1) .stat-n { color: var(--cold); }
[data-theme="dark"] .stat-row .stat-item:nth-child(2) .stat-n { color: var(--accent); }
[data-theme="dark"] .stat-row .stat-item:nth-child(3) .stat-n { color: var(--hot); }
[data-theme="dark"] .stat-row .stat-item:nth-child(4) .stat-n { color: var(--ok); }
[data-theme="dark"] .share-preview .res-share-spec .range-fill { background: var(--cold-deep); }
[data-theme="dark"] .share-preview .res-share-spec .range-fill.tight { background: var(--cold); }
[data-theme="dark"] .share-preview .res-share-spec .range-fill.locked { background: var(--ok); }
.modal-x {
  position:absolute; top:10px; right:10px;
  width:44px; height:44px; border-radius:50%;
  background:var(--hairline); border:none;
  color:var(--muted); font-size:.9rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-x:hover { background:var(--faint); color:var(--ink); }
.modal-x:active { transform:scale(.9); }
.modal-logo {
  display: block;
  width: 36px; height: 36px;
  margin: 0 auto 10px;
  border-radius: 8px;
}
.res-logo {
  display: block;
  width: 28px; height: 28px;
  margin: 0 auto 6px;
  border-radius: 6px;
}
.modal h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--s-4);
  padding-right: 30px;
}
.modal p {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--ink2);
  margin-bottom: 10px;
}
/* How-to-play hint cards - wow-mockup .howto-card */
.hint-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--r-md);
  margin: 10px 0;
  font-size: .88rem;
  line-height: 1.5;
  border: 1px solid transparent;
}
.hint-card.hc-cold { background: var(--cold-bg); color: var(--ink2); border-color: var(--cold-soft); }
.hint-card.hc-hot  { background: var(--hot-bg);  color: var(--ink2); border-color: var(--hot-soft); }
.hint-card.hc-ok   { background: var(--ok-bg);   color: var(--ink2); border-color: var(--ok-soft); }
.hint-card strong { color: var(--ink); font-weight: 800; }
.hint-card .mw-hi { color: var(--cold); font-weight: 800; }
.hint-card .mw-lo { color: var(--hot); font-weight: 800; }
.hint-card .mw-ok { color: var(--ok); font-weight: 800; }
/* Demo keycap inside the hint - wow .howto-card .demo-tile */
.hint-chip {
  width: 44px; height: 44px;
  border-radius: var(--r-xs);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  flex-shrink: 0;
  position: relative;
  box-shadow: var(--shadow-xs);
  color: var(--ink);
}
.hint-card.hc-cold .hint-chip { border-top: 3px solid var(--cold); color: var(--cold-deep); }
.hint-card.hc-hot  .hint-chip { border-bottom: 3px solid var(--hot); color: var(--hot-deep); }
.hint-card.hc-ok   .hint-chip { background: var(--ok); color: #fff; border-top: 3px solid var(--ok-deep); }
.hint-chip .chip-arrow {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: .56rem;
  font-weight: 800;
  opacity: .7;
}
.hint-card.hc-ok .hint-chip .chip-arrow { color: rgba(255,255,255,.9); opacity: 1; }
.hint-card-text { display: flex; flex-direction: column; gap: 2px; }
.hint-card-text strong {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.hint-card-text span {
  font-size: .82rem;
  color: var(--ink2);
  line-height: 1.45;
}
.modal-go {
  width: 100%;
  margin-top: var(--s-4);
  padding: 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--ink) 0%, #11151F 100%);
  border: none;
  color: var(--bg);
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity var(--t-mid), transform .15s var(--ease), box-shadow var(--t-mid);
  box-shadow: var(--shadow-md), 0 4px 14px -4px rgba(20,30,50,.22);
}
.modal-go:hover { opacity:.92; box-shadow: var(--shadow-lg), 0 6px 18px -4px rgba(20,30,50,.28); }
.modal-go:active { transform:scale(.97); }

/* ── CONFETTI ── */
#confetti { position:fixed; inset:0; z-index:500; pointer-events:none; }

/* ── CELEBRATE ── */
@keyframes bounce {
  0%,100%{transform:translateY(0)}
  35%{transform:translateY(-12px) scale(1.06)}
  55%{transform:translateY(-10px)}
  75%{transform:translateY(3px)}
}

/* ── RESPONSIVE BREAKPOINTS ── */

/* Small / short screens */
@media (max-height: 640px) {
  :root {
    --key-h: 40px;
    --kb-gap: 3px;
  }
  .kb-wrap { padding: 5px 4px; padding-bottom: max(5px, env(safe-area-inset-bottom)); }
  .shell { padding-bottom: 170px; }
}

/* Tablet (600px+) */
@media (min-width: 600px) {
  :root {
    --shell-max: 520px;
    --shell-pad: 22px;
    --tile-gap: 9px;
    --tile-radius: 13px;
    --tile-font: 1.85rem;
    --htile-font: 1.55rem;
    --arrow-font: .78rem;
    --range-bar-h: 5px;
    --range-label-font: .75rem;
    --range-gap: 3px;
    --hdr-btn-size: 40px;
    --hdr-icon-font: 1.05rem;
    --logo-font: 2rem;
    --key-h: 56px;
    --key-max: 46px;
    --key-font: 1rem;
    --key-wide-max: 66px;
    --key-wide-font: .72rem;
    --kb-gap: 6px;
    --toast-font: .9rem;
    --guess-num-font: .82rem;
    --guess-dot-h: 4px;
  }
  .kb-wrap { padding: 8px 6px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .key-row { gap: 5px; }
  .header { padding: 18px 0 14px; }
  .guess-bar { padding-top: 16px; }
  .input-area { padding-top: 18px; }
  .history { padding-top: 18px; gap: 8px; }
  .range-row { margin-bottom: 4px; }
  .shell { padding-bottom: 230px; }
}

/* Desktop (900px+) */
@media (min-width: 900px) {
  :root {
    --shell-max: 540px;
    --shell-pad: 24px;
    --tile-gap: 10px;
    --tile-radius: 14px;
    --tile-font: 2rem;
    --htile-font: 1.65rem;
    --arrow-font: .82rem;
    --range-bar-h: 6px;
    --range-label-font: .78rem;
    --range-gap: 3px;
    --hdr-btn-size: 42px;
    --hdr-icon-font: 1.1rem;
    --logo-font: 2.05rem;
    --key-h: 58px;
    --key-max: 48px;
    --key-font: 1.05rem;
    --key-wide-max: 70px;
    --key-wide-font: .75rem;
    --kb-gap: 6px;
    --toast-font: .92rem;
    --guess-num-font: .85rem;
    --guess-dot-h: 5px;
  }
  .keyboard { max-width: 520px; }
  .key-row { gap: 6px; }
  .shell { padding-bottom: 240px; }
}

/* ── RESULT COMPACT (short screens) ── */
@media (max-height: 700px) {
  .result { padding: 20px 16px 16px; }
  .res-logo { width: 24px; height: 24px; margin-bottom: 4px; }
  .res-badge { font-size: .62rem; margin-bottom: 2px; }
  .res-title { font-size: 1.3rem; }
  .res-word { font-size: 1.5rem; margin: 6px 0 2px; }
  .res-sub { font-size: .75rem; margin-bottom: 10px; }
  .stat-row { gap: 16px; margin-bottom: 8px; }
  .stat-n { font-size: 1.2rem; }
  .stat-l { font-size: .55rem; margin-top: 2px; }
  .dist-wrap { margin-bottom: 6px; }
  .dist-title { font-size: .58rem; margin-bottom: 4px; }
  .dist-row { margin-bottom: 2px; }
  .dist-bar { height: 17px; font-size: .55rem; }
  .dist-label { font-size: .65rem; }
  .share-preview { padding: 8px 12px; margin-bottom: 8px; font-size: .72rem; line-height: 1.4; }
  .share-btn { padding: 10px 28px; font-size: .78rem; }
  .res-countdown { font-size: .72rem; margin-top: 8px; }
  .res-close { top: 10px; right: 10px; width: 24px; height: 24px; font-size: .7rem; }
}

/* ── SPLASH SCREEN ── */
.splash {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity .45s ease, transform .45s ease;
  padding: 24px;
  text-align: center;
}
.splash.out {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
.splash-logo {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(4.2rem, 15vw, 7rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: var(--s-1);
}
.splash-hi { color: var(--cold); }
.splash-lo { color: var(--hot); }
.splash-motto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: clamp(.85rem, 3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.splash-sub {
  font-size: clamp(.82rem, 2.8vw, .95rem);
  color: var(--ink2);
  margin-bottom: 32px;
  line-height: 1.5;
}
.splash-sub strong { color: var(--ink); }

/* Animated demo */
.splash-demo {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  justify-content: center;
}
/* Demo tiles start at their final visible state in the base rule; the
   pop-in motion is driven by the keyframe with animation-fill-mode: both
   so it applies the 'from' state during the delay AND holds the 'to' state
   after completion. Previously 'opacity: 0' + 'transform: scale(.8)' lived
   in the base rule, which meant any environment that skipped animations
   (browser extensions, corporate policies, stale CSS) left the tiles
   permanently invisible on the splash screen. */
.demo-tile {
  width: clamp(34px, 9vw, 44px);
  height: clamp(34px, 9vw, 44px);
  border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: clamp(.95rem, 3vw, 1.25rem);
  font-weight: 700;
  animation: demoTileIn .4s var(--ease) both;
}
.demo-tile:nth-child(1) { animation-delay: .3s; }
.demo-tile:nth-child(2) { animation-delay: .38s; }
.demo-tile:nth-child(3) { animation-delay: .46s; }
.demo-tile:nth-child(4) { animation-delay: .54s; }
.demo-tile:nth-child(5) { animation-delay: .62s; }
.demo-tile:nth-child(6) { animation-delay: .70s; }
.demo-tile:nth-child(7) { animation-delay: .78s; }
.demo-tile:nth-child(8) { animation-delay: .86s; }
.demo-tile .demo-arrow {
  font-size: .6rem;
  font-weight: 700;
  margin-top: -2px;
  opacity: .85;
}
/* Splash demo tiles mirror the in-game reveal tile treatment so the
   first thing a player sees on the landing screen is the exact visual
   language they'll see playing: neutral border + tinted bottom edge
   for cold/hot, saturated fill for OK. */
.demo-tile.dt-cold {
  background: linear-gradient(180deg, var(--cold-bg) 0%, var(--surface) 100%);
  border: 2px solid var(--hairline);
  border-bottom: 4px solid var(--cold);
  color: var(--cold-deep);
}
.demo-tile.dt-hot {
  background: linear-gradient(0deg, var(--hot-bg) 0%, var(--surface) 100%);
  border: 2px solid var(--hairline);
  border-bottom: 4px solid var(--hot);
  color: var(--hot-deep);
}
.demo-tile.dt-ok {
  background: linear-gradient(180deg, var(--ok) 0%, var(--ok-deep) 100%);
  border: 2px solid var(--ok-deep);
  border-bottom: 3px solid var(--ok-deep);
  color: #FFFFFF;
  box-shadow: 0 4px 12px -4px rgba(14,175,91,.45);
}
@keyframes demoTileIn {
  from { opacity: 0; transform: scale(.8) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Demo range bar */
.demo-range {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: -20px;
  margin-bottom: 32px;
}
.demo-range-cell {
  width: clamp(34px, 9vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0;
  animation: demoTileIn .4s var(--ease) forwards;
}
.demo-range-cell:nth-child(1) { animation-delay: .5s; }
.demo-range-cell:nth-child(2) { animation-delay: .58s; }
.demo-range-cell:nth-child(3) { animation-delay: .66s; }
.demo-range-cell:nth-child(4) { animation-delay: .74s; }
.demo-range-cell:nth-child(5) { animation-delay: .82s; }
.demo-range-cell:nth-child(6) { animation-delay: .90s; }
.demo-range-cell:nth-child(7) { animation-delay: .98s; }
.demo-range-cell:nth-child(8) { animation-delay: 1.06s; }
.demo-range-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.demo-range-fill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 2px;
  transition: left 1s var(--ease), width 1s var(--ease);
}
.demo-range-fill.drf-cold { background: var(--cold-soft); }
.demo-range-fill.drf-hot  { background: var(--hot-soft); }
.demo-range-fill.drf-ok   { background: var(--ok); }
.demo-range-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  color: var(--muted);
  font-weight: 600;
}
.demo-range-label.drl-ok { color: var(--ok); }

/* Streak on splash */
.splash-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hot-bg);
  color: var(--hot);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 24px;
  animation: demoTileIn .4s .15s var(--ease) both;
}
.splash-streak .streak-num {
  font-family: 'DM Mono', monospace;
  font-size: 1rem;
}

/* CTA button - hero confidence */
.splash-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--ink) 0%, #11151F 100%);
  border: none;
  color: var(--bg);
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: var(--shadow-lg), 0 8px 22px -6px rgba(20,30,50,.3);
  transition: all .2s var(--ease);
  animation: demoTileIn .4s 1.1s var(--ease) both;
}
.splash-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl), 0 14px 30px -6px rgba(20,30,50,.35); }
.splash-cta:active { transform: scale(.96); }


/* Splash bottom nav */
.splash-nav {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  animation: demoTileIn .3s 1.4s var(--ease) both;
}
.splash-nav button {
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .2s;
  padding: 10px 12px;
  min-height: 44px;
  min-width: 44px;
}
.splash-nav button:hover { color: var(--ink2); }

/* ── ANIMATED HEADER TAGLINE - mockup compact variant ── */
.logo-motto {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
  opacity: .9;
}
.logo-motto .mw-arrow { font-size: .58rem; }
.logo-motto .motto-sep { font-size: .55rem; margin: 0 1px; }
.motto-word {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: color .3s, transform .3s;
}
.motto-word .mw-arrow {
  font-weight: 800;
  transition: transform .4s var(--ease), opacity .4s;
}
.motto-sep {
  margin: 0 4px;
  color: var(--faint);
  font-weight: 700;
}
/* Motto words are statically coloured per the WOW mockup:
   HI = cold (blue), LO = hot (orange), SOLVE = ok (green). Arrow inherits. */
.mw-hi { color: var(--cold); }
.mw-lo { color: var(--hot); }
.mw-ok { color: var(--ok); }
.mw-hi .mw-arrow,
.mw-lo .mw-arrow,
.mw-ok .mw-arrow { color: inherit; }

/* Pulse animation */
.motto-word.pulse-hi { color: var(--cold); }
.motto-word.pulse-lo { color: var(--hot); }
.motto-word.pulse-ok { color: var(--ok); }
.motto-word.pulse-hi .mw-arrow { opacity:1; transform: translateY(-3px); }
.motto-word.pulse-lo .mw-arrow { opacity:1; transform: translateY(3px); }
.motto-word.pulse-ok .mw-arrow { opacity:1; transform: scale(1.3); }

/* ── COLORFUL HEADER ICONS ── */
.hdr-btn-sound { color: var(--muted); }
.hdr-btn-theme { color: var(--accent); }
.hdr-btn-about { color: var(--cold); }
.hdr-btn-stats { color: var(--ok); }
.hdr-btn-help  { color: var(--hot); }
.hdr-btn-sound:hover, .hdr-btn-theme:hover, .hdr-btn-about:hover,
.hdr-btn-stats:hover, .hdr-btn-help:hover {
  background: var(--hairline);
}

/* ── ABOUT MODAL ── wow-mockup .scene-about styling */
.about-hero {
  text-align: center;
  margin: 2px 0 14px;
}
.about-hero .wm {
  font-family: 'DM Sans', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
}
.about-hero .wm .hi { color: var(--cold); }
.about-hero .wm .lo { color: var(--hot); }
.about-hero .tagline {
  margin-top: 6px;
  font-family: 'DM Mono', monospace;
  font-size: .66rem;
  letter-spacing: .24em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
}
.about-body p {
  font-size: .9rem;
  color: var(--ink2);
  line-height: 1.55;
  margin-bottom: 12px;
}
.about-body p strong { color: var(--ink); font-weight: 700; }
/* Lead line: the one-sentence what-is-Hilo takeaway. Reads a click louder
   than the body paragraphs without competing with the hero wordmark. */
.about-body .about-lead {
  font-size: 1.02rem;
  color: var(--ink);
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  margin: 2px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.about-body .about-lead strong { font-weight: 700; }
/* About footer: 3 stacked lines, bolder and more prominent than the
   original single ellipsis-risky line. The middle line gets a bigger
   Lucide coffee-cup icon to call out the human touch. */
.about-credit {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: .78rem;
  color: var(--ink2);
  line-height: 1.6;
  letter-spacing: .02em;
  font-weight: 500;
}
.about-credit-line {
  margin: 6px 0;
}
.about-credit-line:first-child { margin-top: 0; }
.about-credit-line:last-child { margin-bottom: 0; }
.about-credit strong { color: var(--ink); font-weight: 700; }
.about-credit a {
  color: var(--ink2);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted var(--faint);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.about-credit a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.about-credit-coffee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0;
  font-size: .82rem;
  color: var(--ink);
}
.about-credit-coffee .coffee-icon {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
  animation: coffeeSteam 3.2s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes coffeeSteam {
  0%, 100% { transform: rotate(0deg) scale(1); }
  45%      { transform: rotate(-4deg) scale(1.04); }
  55%      { transform: rotate(4deg) scale(1.04); }
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── GROUPS & LEADERBOARD ── */
.hdr-btn-groups { color: var(--gold); }
.hdr-btn-groups:hover { background: var(--hairline); }

.hg-panel { max-width: 400px; }
/* Panel title: echo the wow-style modal heads (left-aligned, gold icon
   separated from the word by a tighter gap). Emoji gets a subtle glyph
   chip so it stops feeling like a bare 👥 on the surface. */
.hg-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.hg-group-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
/* Group card: gold top-edge nods to the trophy icon and differentiates
   a "your groups" row from the plain identity surface card below. */
.hg-group-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 14px 13px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s var(--ease);
  font-family: 'DM Sans', sans-serif; font-size: .94rem;
  color: var(--ink); text-align: left;
  box-shadow: var(--shadow-xs);
}
.hg-group-item:hover {
  background: var(--card);
  border-color: var(--faint);
  border-top-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.hg-group-item:active { transform: translateY(0); }
.hg-group-icon { font-size: 1.15rem; filter: saturate(1.1); }
.hg-group-name { flex: 1; font-weight: 600; }
.hg-group-arrow { color: var(--muted); font-size: 1.25rem; font-weight: 400; }
.hg-empty {
  color: var(--muted); font-size: .85rem;
  text-align: center; padding: 22px 12px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
}

.hg-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.hg-btn {
  flex: 1; padding: 12px 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg); border: none;
  font-family: 'DM Sans', sans-serif; font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: opacity .15s; letter-spacing: .02em;
}
.hg-btn:hover { opacity: .85; }
.hg-btn:active { transform: scale(.97); }
.hg-btn-secondary {
  background: var(--surface); color: var(--ink); border: 1px solid var(--hairline);
}
.hg-btn-secondary:hover { background: var(--hairline); opacity: 1; }
.hg-btn-sm {
  padding: 6px 12px; border-radius: 8px;
  background: var(--surface); color: var(--ink2); border: 1px solid var(--hairline);
  font-family: 'DM Sans', sans-serif; font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
  white-space: nowrap;
}
.hg-btn-sm:hover { background: var(--hairline); }
.hg-btn-danger { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 25%, transparent); }
.hg-btn-danger:hover { background: color-mix(in srgb, var(--hot) 8%, transparent); }
.hg-btn-copy { padding: 4px 10px; border-radius: 6px; background: var(--hairline); border: none; font-size: .72rem; font-weight: 600; cursor: pointer; color: var(--ink2); font-family: 'DM Mono', monospace; }
.hg-btn-copy:hover { background: var(--faint); }
.hg-btn-leave { margin-top: 8px; }

.hg-divider { height: 1px; background: var(--hairline); margin: 20px 0 16px; }

/* Identity block: wrap label+value rows in a soft surface card so they
   read as a distinct "your account" section, not loose rows below the
   groups list. */
.hg-identity {
  margin-bottom: 14px;
  padding: 14px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
/* Section eyebrow - aligned to wow modal section pattern: mono uppercase
   with a small accent dot leading. Sits inside the identity card. */
.hg-section-title {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.hg-section-title::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.hg-identity-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.hg-identity-row:last-of-type { margin-bottom: 0; }
.hg-label { font-size: .74rem; color: var(--muted); font-weight: 600; min-width: 86px; text-transform: uppercase; letter-spacing: .04em; }
.hg-value { font-size: .92rem; font-weight: 600; color: var(--ink); }
.hg-recovery-code { font-family: 'DM Mono', monospace; font-size: .82rem; background: var(--hairline); padding: 6px 12px; border-radius: 8px; letter-spacing: .05em; font-weight: 600; color: var(--ink); user-select: all; }
.hg-rc-small { font-size: .72rem; padding: 4px 8px; }
.hg-hint {
  font-size: .72rem;
  color: var(--muted);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
  line-height: 1.55;
}

.hg-recovery-display { text-align: center; margin: 16px 0; }
.hg-recovery-display .hg-recovery-code { display: block; font-size: 1rem; padding: 14px 18px; margin-bottom: 10px; }
.hg-recovery-warning { font-size: .82rem; color: var(--hot); font-weight: 600; text-align: center; margin-bottom: 8px; }

/* Leaderboard */
.hg-lb-subtitle { font-size: .78rem; color: var(--muted); margin: -8px 0 14px; }
.hg-lb-list { display: flex; flex-direction: column; gap: 4px; }
.hg-lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--hairline);
  transition: background .15s;
}
.hg-lb-row.hg-lb-you { background: var(--ok-bg); border-color: var(--ok-soft); }
.hg-lb-rank { font-family: 'DM Mono', monospace; font-size: .82rem; font-weight: 700; color: var(--muted); min-width: 28px; }
.hg-lb-info { flex: 1; min-width: 0; }
.hg-lb-name { font-size: .88rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-lb-stats { font-size: .72rem; color: var(--muted); }
.hg-you { font-size: .68rem; color: var(--ok); font-weight: 700; margin-left: 4px; }
.hg-btn-kick { padding: 4px 10px; border-radius: 6px; background: none; border: 1px solid var(--hairline); font-size: .68rem; font-weight: 600; cursor: pointer; color: var(--muted); font-family: 'DM Sans', sans-serif; }
.hg-btn-kick:hover { color: var(--hot); border-color: var(--hot); }
.hg-back { background: none; border: none; color: var(--muted); font-size: .78rem; font-weight: 600; cursor: pointer; padding: 4px 0; margin-bottom: 4px; font-family: 'DM Sans', sans-serif; text-align: left; }
.hg-back:hover { color: var(--ink2); }

.hg-share-section { margin-bottom: 8px; }
.hg-share-code { font-size: .82rem; color: var(--ink2); margin-bottom: 8px; }
.hg-share-btns { display: flex; gap: 8px; }
.hg-admin-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Dialog */
.hg-dialog { max-width: 340px; }
.hg-field-label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.hg-input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--hairline); background: var(--surface);
  font-family: 'DM Mono', monospace; font-size: .92rem;
  color: var(--ink); outline: none; transition: border-color .15s;
  box-sizing: border-box;
}
.hg-input:focus { border-color: var(--cold); }
.hg-input::placeholder { color: var(--faint); }
.hg-error { font-size: .75rem; color: var(--hot); min-height: 20px; margin-top: 4px; }
.hg-dialog-btns { display: flex; gap: 8px; margin-top: 12px; }