/* ==========================================================================
   Lexicade — styles
   ========================================================================== */

/* Self-hosted fonts. Files live in /fonts/. font-display: swap shows the
   system fallback first, then swaps in once the file loads — avoids the
   invisible-text flash without imposing a long block on first paint. */

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/barlow-semicondensed-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-semicondensed-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-semicondensed-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-semicondensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-semicondensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-semicondensed-700.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper: #F4F1EA;
  --ink: #1B1B18;
  --red: #C83C1A;
  --muted: #9A978F;
  --gold: #A87B20;
  --sun: #F5C020;       /* bright sunflower gold — perfect-game accent + summary sun */
  --faint: rgba(27,27,24,.07);
  --focus: #1B1B18;

  /* Stats chart "today" highlight */
  --accent: #3D5BA9;

  /* Point-value colors — P3 cool → warm spectrum.
     0 uses --muted (already defined). 10 uses --ink (baseline, no token). */
  --lc-20:  #6C8A8A;  /* cerulean dust */
  --lc-30:  #7E8C6E;  /* sage olive   */
  --lc-40:  #B08B3E;  /* ochre        */
  --lc-50:  #B85F3D;  /* terracotta   */
  --lc-60:  #9C2128;  /* oxide red    */
  --lc-80:  #6B3D6E;  /* aubergine    */
  --lc-100: #2C4F8A;  /* ultramarine  */
}

html { height: 100%; background: var(--paper); }
html, body { background: var(--paper); }

body {
  min-height: 100%;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#app {
  width: 100%;
  max-width: 390px;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(0,0,0,.15);
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
  transform: translateY(10px);
  overflow-y: auto;
  overflow-x: hidden;
}

.screen.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* Focus ring for keyboard users (using :focus-visible so mouse users don't see it) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ==========================================================================
   INTRO
   ========================================================================== */
#screen-intro { align-items: center; justify-content: center; overflow: hidden; }

#rainCanvas { position: absolute; inset: 0; pointer-events: none; }

.rain-tile {
  position: absolute;
  top: -56px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 32px;
  border: 1px solid rgba(27,27,24,.22);
  background: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; font-weight: 500;
  color: rgba(27,27,24,.4);
  animation: rainFall linear infinite;
}

@keyframes rainFall {
  0%   { transform: translateY(0); opacity: 0; }
  7%   { opacity: 1; }
  88%  { opacity: .85; }
  100% { transform: translateY(110vh); opacity: 0; }
}

.intro-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 44px 36px;
}

.intro-logo {
  font-size: 11px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  margin-bottom: 10px;
}

.intro-hed {
  font-size: 32px; font-weight: 300;
  line-height: 1.22;
  margin-bottom: 40px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  background: var(--ink); color: var(--paper);
  border: none;
  padding: 16px 40px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: opacity .15s;
  -webkit-tap-highlight-color: transparent;
  display: inline-block; text-align: center;
}
.btn:active { opacity: .7; }
.btn.full { width: 100%; }

/* Outline variant — same shape as .btn, transparent fill + ink border.
   Used for secondary actions (e.g. View My Stats, Back). */
.btn.outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  /* Compensate the 1.5px border on each side so outline buttons sit at the
     same height as their filled siblings. */
  padding: 14.5px 38.5px;
}

.btn[data-action="start"] {
  width: 150px; /* Locks the width across EN, FR, DE, and ES */
  padding-left: 0;
  padding-right: 0; /* Removes padding so text can use the full width */
  white-space: nowrap; /* Prevents longer text from breaking to a second line */
}

/* ==========================================================================
   ROUND PROGRESS BAR
   ========================================================================== */
.game-bar { display: flex; gap: 4px; padding: 14px 28px 0; }
.game-pip {
  flex: 1; height: 3px;
  background: rgba(27,27,24,.12);
  transition: background .3s;
}
.game-pip.done    { background: var(--ink); }
.game-pip.current { background: var(--muted); }

/* ==========================================================================
   GAME
   ========================================================================== */
#screen-game { display: flex; flex-direction: column; overflow: hidden; }

.game-head {
  padding: 14px 28px 12px;
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--faint);
  flex-shrink: 0;
}
.game-round-name { font-size: 20px; font-weight: 600; line-height: 1; }
/* Points indicator — inline "{n} points" using the same type & size as
   .game-round-name on the left. Both number and label hide while the
   value is empty so nothing renders between rounds, but the row stays
   anchored to the right edge of the header via the flex layout above. */
.pts-row {
  font-size: 20px; font-weight: 600; line-height: 1;
  color: var(--ink);
  text-align: right;
}
.pts-row #ptsPrev { margin-right: .3em; }
.pts-row #ptsPrev:empty { display: none; }
.pts-row #ptsPrev:empty + .pts-lbl { display: none; }

/* Word zone -------------------------------------------------------------- */
.word-zone {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--faint);
  flex-shrink: 0;
}
.word-tiles {
  display: flex; gap: 4px;
  min-height: 56px;
  align-items: center;
  /* Reserve a fixed 8-slot-wide area (8 × 38px tile + 7 × 4px gap =
     332px) and center it in the word zone. Letters fill from the left
     of this reserved area, so a partial word stays left-aligned within
     the centered "slot strip" rather than re-centering itself as
     letters are added. max-width keeps narrow viewports from
     overflowing the parent. */
  width: 332px;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: 2px;
}
.word-tiles::-webkit-scrollbar { display: none; }

/* Empty-word hint ("Tap letters below ...") — sits at the same
   vertical position and left edge as the min-letters / bonus
   indicator (.w-hint / .w-bonus), inside the shared .wz-hint-row.
   Fades via the .hidden class so it doesn't pop on/off as the user
   adds/removes letters. */
.word-empty {
  position: absolute;
  left: 0; top: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  color: #2C4F8A;
  pointer-events: none;
  transition: opacity 500ms ease;
}
.word-empty.hidden { opacity: 0; }

.wtile {
  width: 38px; height: 54px;
  border: 1.5px solid var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  cursor: grab;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  flex-shrink: 0;
  background: var(--paper);
  transition: opacity .15s;
}
/* Dragged tile's slot reserves layout space but renders nothing —
   the visible representation is the floating ghost only. */
.wtile.dragging { visibility: hidden; }
.wtile.drag-over {
  border-color: var(--red);
  background: rgba(200,60,26,.05);
}
.wtile .wl { font-size: 23px; font-weight: 500; line-height: 1; }
.wtile .wv { font-size: 10px; font-weight: 700; color: var(--ink); margin-top: 2px; }

/* Below the word-tile row sits a single 332px-wide strip (matching the
   word-tiles width and centering) where both the min-letters hint and
   the bonus indicator anchor to the same spot — the left edge of the
   first slot. They never have text simultaneously in normal play, so
   position:absolute on both lets them overlap cleanly. */
.wz-hint-row {
  position: relative;
  width: 332px;
  max-width: 100%;
  margin: 8px auto 0;
  min-height: 20px;     /* room for the 13px text */
}
.w-hint, .w-bonus {
  position: absolute;
  left: 0; top: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  color: #2C4F8A;
  opacity: 1;
  transition: opacity 500ms ease;
}
/* When empty, fade out. */
.w-hint:empty, .w-bonus:empty { opacity: 0; }

/* Rack ------------------------------------------------------------------- */
.rack-zone { flex: 1; padding: 12px 18px 6px; overflow-y: auto; }
.rack-lbl {
  font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.rack-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.rtile {
  /* Reset button defaults */
  appearance: none;
  background: var(--paper);
  font: inherit;
  color: inherit;
  margin: 0;

  aspect-ratio: 1;
  border: 1.5px solid var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: background .14s, border-color .14s;
  position: relative;
}
.rtile[disabled] { cursor: default; }
.rtile .rl { font-size: 28px; font-weight: 500; line-height: 1; }
.rtile .rv { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 3px; }

/* Digraph tiles (Spanish CH, LL, RR) fit two glyphs in the same
   square: shrink the letter face and tighten its kerning so the
   pair reads as one tile and aligns with single-letter siblings. */
.rtile.digraph .rl { font-size: 20px; letter-spacing: -0.04em; }
.wtile.digraph .wl { font-size: 17px; letter-spacing: -0.04em; }
.drag-ghost.tile-ghost.digraph .wl { font-size: 20px; letter-spacing: -0.04em; }

.rtile.gold { border-color: var(--gold); }
.rtile.gold .rl { color: var(--gold); }

.rtile.drag-over {
  border-color: var(--red);
  background: rgba(200,60,26,.06);
}
/* See .wtile.dragging — same intent on the rack side. */
.rtile.rack-dragging { visibility: hidden; }
.rtile.sel {
  background: rgba(27,27,24,.09);
  border-color: rgba(27,27,24,.3);
}
.rtile.sel .rl, .rtile.sel .rv { opacity: .32; }
.rtile.sel::after {
  content: '';
  position: absolute; top: 5px; right: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: .45;
}

/* Round-transition lockout — block input while the rack is animating */
#screen-game.transitioning .rack-tiles,
#screen-game.transitioning #wordTiles,
#screen-game.transitioning .game-foot {
  pointer-events: none;
}
#screen-game.transitioning .game-foot { opacity: .5; }



.game-foot {
  padding: 10px 18px 28px;
  border-top: 1px solid var(--faint);
  display: flex; gap: 8px;
  flex-shrink: 0;
}
.btn-clr {
  width: 88px;
  padding: 13px 8px;
  border: 1.5px solid var(--ink);
  background: transparent;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.btn-clr:active { opacity: .6; }

.btn-sub {
  flex: 1;
  padding: 13px;
  background: var(--ink); color: var(--paper);
  border: none;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  cursor: pointer;
  opacity: .22;
  transition: opacity .18s;
  -webkit-tap-highlight-color: transparent;
}
.btn-sub.go     { opacity: 1; }
.btn-sub:active { opacity: .7; }

.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  /* width/height set inline at drag start (varies w/ rack tile size) and
     toggled between big (rack) and small (word) on line crossing. The
     ghost's position is controlled by the --cx / --cy variables set
     each pointermove; using calc(50%) in the transform keeps it
     centered on the pointer regardless of the animating size. */
  left: 0; top: 0;
  transform: translate(calc(var(--cx, 0px) - 50%),
                       calc(var(--cy, 0px) - 50%));
  border: 1.5px solid var(--ink);
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  transition: width 120ms ease, height 120ms ease;
}
/* Letter / value font sizes morph in sync with the box. The
   .tile-ghost combinator is included so these rules out-specify
   `.drag-ghost.tile-ghost .wl { font-size: 28px }` and
   `.drag-ghost.tile-ghost .wv { font-size: 11px }` defined further
   down — without it the value visibly jumps from the source tile's
   font-size to 11px the moment the ghost appears (and back when it
   disappears), which the user observed as a shrink-then-grow on
   within-zone drags. */
.drag-ghost.tile-ghost.big   .wl { font-size: 28px; }
.drag-ghost.tile-ghost.big   .wv { font-size: 14px; margin-top: 3px; }
.drag-ghost.tile-ghost.small .wl { font-size: 23px; }
.drag-ghost.tile-ghost.small .wv { font-size: 10px; margin-top: 2px; }
.drag-ghost      .wl,
.drag-ghost      .wv {
  transition: font-size 120ms ease, margin-top 120ms ease;
}
.drag-ghost .wl { font-size: 18px; font-weight: 500; color: var(--paper); line-height: 1; }
.drag-ghost .wv { font-size: 8px; color: rgba(244,241,234,.45); margin-top: 2px; }

.drag-ghost.tile-ghost {
  background: var(--paper);
  border-color: var(--ink);
}
.drag-ghost.tile-ghost .wl { font-size: 28px; color: var(--ink); }
.drag-ghost.tile-ghost .wv { font-size: 11px; font-weight: 700; color: var(--ink); }

/* ==========================================================================
   POINT-VALUE COLORS
   P3 palette + option 3 application: tint LETTER + NUMBER + TILE BORDER.
   :has() pulls the per-tile color up from the inner .rv/.wv span without
   needing any JS change — the value-class still lives on the value element.
   The :not(.gold):not(.sel) guard keeps the existing gold-selected and
   sel-greyed-out states from being overridden.
   ========================================================================== */

/* --- VALUE NUMBER (always tinted) --- */
.rtile .rv.v0,  .wtile .wv.v0  { color: var(--muted); }
.rtile .rv.v20, .wtile .wv.v20 { color: var(--lc-20); }
.rtile .rv.v30, .wtile .wv.v30 { color: var(--lc-30); }
.rtile .rv.v40, .wtile .wv.v40 { color: var(--lc-40); }
.rtile .rv.v50, .wtile .wv.v50 { color: var(--lc-50); }
.rtile .rv.v60, .wtile .wv.v60 { color: var(--lc-60); }
.rtile .rv.v80, .wtile .wv.v80 { color: var(--lc-80); }
.rtile .rv.v100,.wtile .wv.v100{ color: var(--lc-100);}

/* --- LETTER (matches the value color) --- */
.rtile:not(.gold):not(.sel):has(.rv.v0)   .rl,
.wtile:has(.wv.v0)   .wl { color: var(--muted); }
.rtile:not(.gold):not(.sel):has(.rv.v20)  .rl,
.wtile:has(.wv.v20)  .wl { color: var(--lc-20); }
.rtile:not(.gold):not(.sel):has(.rv.v30)  .rl,
.wtile:has(.wv.v30)  .wl { color: var(--lc-30); }
.rtile:not(.gold):not(.sel):has(.rv.v40)  .rl,
.wtile:has(.wv.v40)  .wl { color: var(--lc-40); }
.rtile:not(.gold):not(.sel):has(.rv.v50)  .rl,
.wtile:has(.wv.v50)  .wl { color: var(--lc-50); }
.rtile:not(.gold):not(.sel):has(.rv.v60)  .rl,
.wtile:has(.wv.v60)  .wl { color: var(--lc-60); }
.rtile:not(.gold):not(.sel):has(.rv.v80)  .rl,
.wtile:has(.wv.v80)  .wl { color: var(--lc-80); }
.rtile:not(.gold):not(.sel):has(.rv.v100) .rl,
.wtile:has(.wv.v100) .wl { color: var(--lc-100); }

/* --- TILE FRAME (border matches too) --- */
/* 0 keeps the default ink border — spent tiles still need to read as a tile. */
.rtile:not(.gold):not(.sel):has(.rv.v20)  { border-color: var(--lc-20); }
.rtile:not(.gold):not(.sel):has(.rv.v30)  { border-color: var(--lc-30); }
.rtile:not(.gold):not(.sel):has(.rv.v40)  { border-color: var(--lc-40); }
.rtile:not(.gold):not(.sel):has(.rv.v50)  { border-color: var(--lc-50); }
.rtile:not(.gold):not(.sel):has(.rv.v60)  { border-color: var(--lc-60); }
.rtile:not(.gold):not(.sel):has(.rv.v80)  { border-color: var(--lc-80); }
.rtile:not(.gold):not(.sel):has(.rv.v100) { border-color: var(--lc-100); }
.wtile:has(.wv.v20)  { border-color: var(--lc-20); }
.wtile:has(.wv.v30)  { border-color: var(--lc-30); }
.wtile:has(.wv.v40)  { border-color: var(--lc-40); }
.wtile:has(.wv.v50)  { border-color: var(--lc-50); }
.wtile:has(.wv.v60)  { border-color: var(--lc-60); }
.wtile:has(.wv.v80)  { border-color: var(--lc-80); }
.wtile:has(.wv.v100) { border-color: var(--lc-100); }

/* --- DRAG GHOSTS --- */
/* Default ghost (ink background): keep value tint visible on dark, leave
   the letter on --paper for legibility. */
.drag-ghost .wv.v0   { color: var(--muted); }
.drag-ghost .wv.v20  { color: var(--lc-20); }
.drag-ghost .wv.v30  { color: var(--lc-30); }
.drag-ghost .wv.v40  { color: var(--lc-40); }
.drag-ghost .wv.v50  { color: var(--lc-50); }
.drag-ghost .wv.v60  { color: var(--lc-60); }
.drag-ghost .wv.v80  { color: var(--lc-80); }
.drag-ghost .wv.v100 { color: var(--lc-100); }

/* tile-ghost variant (paper background) — match the on-board treatment:
   letter, number, and border all take the value color. */
.drag-ghost.tile-ghost:has(.wv.v20)  { border-color: var(--lc-20);  }
.drag-ghost.tile-ghost:has(.wv.v30)  { border-color: var(--lc-30);  }
.drag-ghost.tile-ghost:has(.wv.v40)  { border-color: var(--lc-40);  }
.drag-ghost.tile-ghost:has(.wv.v50)  { border-color: var(--lc-50);  }
.drag-ghost.tile-ghost:has(.wv.v60)  { border-color: var(--lc-60);  }
.drag-ghost.tile-ghost:has(.wv.v80)  { border-color: var(--lc-80);  }
.drag-ghost.tile-ghost:has(.wv.v100) { border-color: var(--lc-100); }
/* v0 (carry-over) — letter stays muted so the ghost matches the rack
   tile's grey appearance for spent letters. Without this rule the
   letter inherits the generic .drag-ghost.tile-ghost .wl color: ink
   above, turning a grey carry-over tile black during drag. */
.drag-ghost.tile-ghost:has(.wv.v0)   .wl { color: var(--muted); }
.drag-ghost.tile-ghost:has(.wv.v20)  .wl { color: var(--lc-20);  }
.drag-ghost.tile-ghost:has(.wv.v30)  .wl { color: var(--lc-30);  }
.drag-ghost.tile-ghost:has(.wv.v40)  .wl { color: var(--lc-40);  }
.drag-ghost.tile-ghost:has(.wv.v50)  .wl { color: var(--lc-50);  }
.drag-ghost.tile-ghost:has(.wv.v60)  .wl { color: var(--lc-60);  }
.drag-ghost.tile-ghost:has(.wv.v80)  .wl { color: var(--lc-80);  }
.drag-ghost.tile-ghost:has(.wv.v100) .wl { color: var(--lc-100); }

/* ==========================================================================
   GAME SUMMARY
   ========================================================================== */
.summary-head {
  padding: 40px 28px 24px;
  border-bottom: 1px solid var(--faint);
  position: relative;
  overflow: hidden;
}
.summary-sun {
  position: absolute;
  top: -10px;
  right: -18px;
  width: 130px; height: 130px;
  opacity: .18;
  z-index: 1;
}
.summary-sun line,
.summary-sun circle {
  stroke: var(--sun);
}
.summary-logo {
  font-size: 11px; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase;
  margin-bottom: 6px;
}
.summary-eyebrow {
  font-size: 11px; color: var(--ink);
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 12px;
}
.summary-total {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 68px; font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}
.summary-total-lbl {
  font-size: 13px; color: var(--ink); font-weight: 300;
}

/* Perfect-game state — all three rounds at greedy-max score.
   Total number and label both adopt the sun gold. */
.summary-total.perfect,
.summary-total-lbl.perfect {
  color: var(--sun);
}

.summary-body { padding: 24px 28px; }

.summary-rounds {
  border-top: 1px solid var(--faint);
  margin-bottom: 24px;
}
.summary-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--faint);
}
.summary-round {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  width: 90px; flex-shrink: 0;
}
.summary-word {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 19px; font-weight: 500;
  text-transform: uppercase;
  flex: 1;
  padding: 0 8px;
}
.summary-pts {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px; color: var(--ink);
}
.summary-pts.best { color: var(--ink); font-weight: 600; }

/* Gap between Share Game and View My Stats is half a button height. */
.summary-btns { display: flex; flex-direction: column; gap: 24px; }

/* Flex spacer — absorbs remaining vertical space and centres the foot text
   halfway between the last button and the feedback link. */
.summary-lower {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-foot {
  text-align: center;
  font-size: 17px; 
  color: var(--ink);
  line-height: 1.7;
  padding: 0 28px;
}

/* Ghost buttons (Rules / Feedback) */
.ghost-btn {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  padding: 8px 24px 36px;
  width: 100%;
  letter-spacing: .03em;
  -webkit-tap-highlight-color: transparent;
}
.ghost-btn:active { opacity: .5; }


/* "Rules of the Game · Privacy · Contact" row at the bottom of the intro screen */
.intro-links {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 36px; /* safe-area tap target, matches ghost-btn base */
  white-space: nowrap;  /* Forces all text to stay on a single line */
}
.intro-links .ghost-btn {
  width: auto;
  padding: 8px 12px;   /* override the block ghost-btn padding */
  color: var(--ink);
}
.intro-links-sep {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
  padding: 8px 2px;
  line-height: 1;
}

/* Ensure the three links fit on narrow mobile screens (like iPhone SE) */
@media (max-width: 400px) {
  .intro-links .ghost-btn {
    font-size: 10px;    /* Slightly smaller text */
    padding: 8px 6px;   /* Tighter click padding */
  }
}

/* Rules modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27,27,24,.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay[hidden] { display: none; }

.modal-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 32px 28px 28px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 14px; right: 18px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
}

.modal-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.modal-body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 14px;
}
.modal-body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   STATS
   ========================================================================== */
#screen-stats { display: flex; flex-direction: column; }

/* Eyebrow label shared by every stats section */
.stats-lbl {
  font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}

/* 2x2 stat grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
  margin: 24px 28px 0;
  flex-shrink: 0;
}
.stats-cell { padding: 18px 18px 16px; }
.stats-cell.border-r { border-right:  1px solid var(--faint); }
.stats-cell.border-b { border-bottom: 1px solid var(--faint); }
.stats-cell .stats-lbl { margin-bottom: 6px; }
.stats-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 32px; font-weight: 600;
  line-height: 1;
}
.stats-unit {
  font-size: 10px; color: var(--ink);
  letter-spacing: .04em;
  margin-top: 4px;
}
/* Best-word cell — word + score · date sub-line, no separate unit.
   `min-height: 32px` matches .stats-val so the meta row underneath sits
   on the same baseline as the unit row on the left, and align-items:
   center vertically centres the smaller word against the val on the
   left for "mid-anchored" horizontal alignment between the two cells. */
.stats-word {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 28px; font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.stats-word-meta {
  /* Matches .stats-unit so the score / "points" / date line up with the
     "points" label on the left panel. */
  font-size: 10px;
  color: var(--ink);
  letter-spacing: .04em;
  margin-top: 4px;
  min-height: 11px;
}
.stats-word-meta .dim { color: var(--ink); }

/* Last-10-games chart */
.stats-chart {
  padding: 18px 28px 12px;
  flex: 1;
  position: relative;       /* anchor for the bar tooltip */
}
.stats-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.stats-chart-svg svg { display: block; overflow: visible; }
.sc-avg-lbl,
.sc-x-lbl {
  font-family: 'IBM Plex Mono', monospace;
  fill: var(--ink);
}
.sc-avg-lbl { font-size: 8px; }
.sc-x-lbl   { font-size: 8.5px; }
.sc-x-lbl.red    { fill: var(--red);    font-weight: 600; }
.sc-x-lbl.accent { fill: var(--accent); font-weight: 600; }

/* Interactive bars */
.sc-bar {
  cursor: pointer;
  transition: opacity .15s ease;
  outline: none;
}
.sc-bar:hover,
.sc-bar:focus,
.sc-bar.active { opacity: 1 !important; }
.sc-bar.is-today.active { filter: brightness(1.05); }

/* Per-bar tooltip */
.sc-tooltip {
  position: absolute;
  left: 0; top: 0;
  min-width: 140px;
  max-width: 220px;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease;
}
.sc-tooltip.visible {
  opacity: 1;
  visibility: visible;
}
.sc-tt-date {
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.sc-tt-rounds {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  margin-bottom: 6px;
}
.sc-tt-word {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sc-tt-pts {
  text-align: right;
  color: var(--paper);
}
.sc-tt-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid rgba(244, 241, 234, 0.2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Footer (Back button) */
.stats-foot {
  padding: 10px 28px 26px;
  border-top: 1px solid var(--faint);
  flex-shrink: 0;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.shaking { animation: shake .36s ease; }

@keyframes rackPop {
  0%   { transform: scale(.85); opacity: .4; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.rtile.shuffling {
  animation: rackPop .22s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Tile drops into the word zone when a letter is added */
@keyframes tileDrop {
  0%   { transform: translateY(-60px) scale(.85); opacity: 0; }
  60%  { transform: translateY(4px) scale(1.04); opacity: 1; }
  78%  { transform: translateY(-2px) scale(.99); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.wtile.raining {
  animation: tileDrop .42s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   LANGUAGE SWITCHER (shared between intro and summary screens)
   ========================================================================== */
.lang-switch,
.lang-switch-summary {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  gap: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  background: transparent;
}
.lang-switch a,
.lang-switch-summary a {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 2px;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.lang-switch a.active,
.lang-switch-summary a.active {
  color: var(--ink);
  font-weight: 600;
}
.lang-switch a:active,
.lang-switch-summary a:active { opacity: .5; }