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

/* The theme's colors (docs/light-theme-spec.md). These are the dark theme's;
   the light theme redefines them under :root[data-theme="light"], at the end.
   --accent and --accent2 are for text, borders and icons; the -fill versions
   are for a fill with dark text on it (the same color in the dark theme).
   --neon stays bright in both themes: it sits on the dark gadgets (the clock,
   the countdown, Beat AI's window). Faint white fills and hairlines are
   rgba(var(--tint-rgb), alpha), so the light theme can make them brown. */
:root {
  --bg: #0d0f1a;              /* wells: inputs, tiles, switches */
  --page: #0d0f1a;            /* the page behind everything */
  --panel: #171a2b;
  --panel-rgb: 23, 26, 43;
  --border: #2e3350;
  --accent: #ffcc4d;
  --accent-fill: #ffcc4d;
  --accent2: #6ee7ff;
  --accent2-fill: #6ee7ff;
  --accent2-rgb: 110, 231, 255;
  --neon: #6ee7ff;
  --text: #e8eaf6;
  --text-strong: #fff;
  --dim: #8b90b3;
  --dim-soft: rgba(139, 144, 179, 0.95);
  --tint-rgb: 255, 255, 255;
  --good: #4ade80;
  --bad: #ff5a6e;
  --bad-soft: #ff9aa6;
  --warn: #ffb347;
  --info: #c3c7d6;            /* the (i) buttons */
  --chain-0: #4ade80;         /* the word log's chain colors */
  --chain-1: #c084fc;
  --chain-2: #fde047;
  --mult-len: #7fd4a0;
  --mult-stick: #ff9ecf;
  --mult-chain: #f0b354;
  --call: #ffd84d;
  --bust: #ff6b7a;
  --scrim: rgba(9, 11, 18, 0.92);
  --scrim-pause: rgba(9, 11, 18, 0.96);
  --scrim-confirm: rgba(5, 6, 10, 0.78);
  --board-bg: #090b12;
  --board-frame: var(--accent2);
  --board-glow: rgba(110, 231, 255, 0.15);
  --consent-bg: #1a2130;
}

body {
  background: var(--page);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

#app {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  position: relative;
}

/* ---------- Banner ---------- */
#banner {
  display: grid;
  /* equal side columns keep the middle (token + HELP) dead-centre no matter how
     wide the Next Block preview or Last Word get; minmax(0,...) stops long side
     content from shoving the centre off */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;   /* side panels fill the height so labels line up and content bottom-aligns */
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 84px;
  position: relative;     /* anchors Beat AI's window, which overlays Last word */
}
/* labels sit at the top (even), block preview / last word sit at the bottom (aligned) */
#next-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
#last-word-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
#help-col { justify-self: center; align-self: center; }

#banner .label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--dim);
  margin-bottom: 4px;
}

#next-canvas { display: block; }

#last-word-panel { text-align: right; }
/* Beat AI: Last word keeps its place (invisible), so the banner is exactly
   as tall as in every other game and nothing below it moves */
#last-word-panel.ai-covered { visibility: hidden; }

/* Beat AI's window (docs/beat-ai-challenge-spec.md §8-9): the AI's board,
   light gray on black inside a thick border, with its score on the top line
   and the gap from the player's score beneath. The border is green while the
   player is ahead, red while behind, white while level. It overlays Last
   word's slot and fills the banner's own height (game.js sizes the board to
   what is left), so the layout never changes size. */
#ai-mini {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: #000;
  border: 3px solid #fff;
  border-radius: 6px;
  transition: border-color 0.2s;
}
#ai-mini.hidden { display: none; }
#ai-mini.ahead { border-color: #4ade80; }
#ai-mini.behind { border-color: #ff5a6e; }
#ai-mini-head { display: flex; flex-direction: column; align-items: center;
                font: 700 10px/1 'Courier New', monospace; color: #fff; letter-spacing: 0.5px; white-space: nowrap; }
#ai-mini-score { color: var(--neon); text-shadow: 0 0 5px rgba(110, 231, 255, 0.55); }   /* neon blue, as the clock */
/* the gap: 50% larger than the score line, on a fixed line so the AI's board never resizes */
#ai-mini-gap { height: 15px; font-size: 15px; line-height: 15px; }
#ai-mini-gap.ahead { color: #4ade80; }
#ai-mini-gap.behind { color: #ff5a6e; }
#ai-mini-gap.out { font-size: 10px; }   /* STACKED OUT keeps the window's width */
#ai-mini-canvas { display: block; }
/* the record under Beat AI's result line */
.beatai-record { display: block; font-size: 13px; font-weight: 500; color: var(--dim); margin-top: 4px; }

/* word + points on the headline, bonus breakdown on a dim line beneath */
#last-word-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
}

#last-word {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 2px;
}

#last-word-detail {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dim);
  min-height: 12px;      /* reserve the row so the headline never jumps */
  white-space: nowrap;
}

/* ---------- Field ---------- */
#field-wrap {
  display: flex;
  justify-content: center;
  position: relative;          /* anchor for the pause overlay */
}

#pause-overlay {
  position: absolute;
  inset: 0;
  background: var(--scrim-pause);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  z-index: 5;
}

#resume-game-btn,
#exit-game-btn {
  border: none;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #1a1a1a;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#resume-game-btn { background: #22c55e; }   /* green: continue playing */

#exit-game-btn {
  background: #ff5a6e;
  margin-top: 22px;                          /* a full blank line above, beyond the 20px gap */
}

#resume-game-btn:active,
#exit-game-btn:active { filter: brightness(1.15); }

#pause-overlay.hidden { display: none; }

/* Sound switch on the pause overlay: the Settings row, reachable mid-game */
.pause-sound { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 2px; color: var(--text); }
.pause-sound .btn-group { width: 120px; }
.pause-sound .btn-group button { padding: 6px 0; letter-spacing: 1px; touch-action: manipulation; }

/* Pre-game 3-2-1 countdown, centred over the board in the teal timer colour */
#countdown-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;                    /* purely visual; never intercepts taps */
  background: rgba(9, 11, 18, 0.45);
  border-radius: 4px;
}
#countdown-overlay.hidden { display: none; }
#countdown-num {
  font-size: 150px;
  font-weight: 800;
  line-height: 1;
  color: var(--neon);                      /* same teal as #timer */
  text-shadow: 0 0 28px rgba(110, 231, 255, 0.65), 0 4px 10px rgba(0, 0, 0, 0.5);
}
#countdown-num.pop { animation: countdown-pop 0.7s ease-out; }
@keyframes countdown-pop {
  0%   { transform: scale(0.4);  opacity: 0; }
  30%  { transform: scale(1.15); opacity: 1; }
  45%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

#board-canvas {
  border: 2px solid var(--board-frame);   /* teal frame around the grid while playing */
  border-radius: 4px;
  background: var(--board-bg);
  box-shadow: 0 0 10px var(--board-glow);
  max-width: 100%;       /* scale down to fit narrow screens, keep aspect ratio */
  height: auto;
  touch-action: none;    /* board gestures capture swipes/taps instead of scrolling the page */
}
/* Row Rush's rush: the frame glows orange (same 2px border, so nothing moves) */
#board-canvas.rush-glow {
  border-color: #fb923c;
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.75);
}

/* ---------- Touch controls (on-screen buttons) ---------- */
#touch-controls {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;   /* tall LEFT | rotate over DROP | tall RIGHT */
  gap: 8px;
}
.tc-mid { display: flex; flex-direction: column; gap: 8px; }

#touch-controls.hidden { display: none; }

/* ---------- Stickee Smart AI commentary ----------
   Occupies the touch-control slot while the AI drives (those buttons are
   unusable then). Plain-English reasoning on top, then a rule, then the
   literal scoring arithmetic. Sized to roughly the button block it replaces,
   scrolling internally so the board never shifts. */
#ai-commentary {
  background: var(--panel);
  border: 2px solid var(--accent2);
  border-radius: 10px;
  padding: 10px 12px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(var(--accent2-rgb), 0.12);
}

#ai-commentary.hidden { display: none; }

.ai-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent2);
  margin-bottom: 7px;
}

/* "?" legend toggle, sitting right after the panel title */
#ai-help-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--accent2);
  border-radius: 50%;
  background: none;
  color: var(--accent2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#ai-help-btn.active { background: var(--accent2-fill); color: #06212b; }

/* inline glossary revealed by "?" */
#ai-legend {
  margin-bottom: 9px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(var(--accent2-rgb), 0.05);
  font-size: 11.5px;
  line-height: 1.5;
  color: inherit;
}
#ai-legend.hidden { display: none; }
#ai-legend p { margin: 0 0 6px; }
#ai-legend ul { margin: 0 0 6px; padding-left: 16px; }
#ai-legend li { margin-bottom: 4px; }
#ai-legend b { color: var(--accent2); }

/* step-through: advances to the next block once the player has read the notes */
#ai-next-btn {
  margin-left: auto;            /* pins it (and AUTO) to the top right of the box */
  background: #22c55e;
  color: #1a1a1a;
  border: 2px solid #16a34a;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* AUTO: drop the per-block holds and run on to the end of the game */
#ai-auto-btn {
  background: var(--accent2-fill);
  color: #06212b;
  border: 2px solid #3bb8d4;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* pressed-in while running continuously, matching the Help button's active look */
#ai-auto-btn.active {
  background: #3bb8d4;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45);
  transform: translateY(1px);
}

#ai-next-btn:disabled,
#ai-auto-btn:disabled {
  background: var(--panel);
  color: var(--dim);
  border-color: var(--border);
  cursor: default;
  box-shadow: none;
  transform: none;
}
#ai-next-btn:not(:disabled) { animation: ai-next-ready 1.6s ease-in-out infinite; }
@keyframes ai-next-ready {
  0%, 100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
  50%      { box-shadow: 0 0 9px rgba(34, 197, 94, 0.6); }
}

/* the scoring arithmetic is collapsed by default: the notes are the headline */
#ai-detail-toggle {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 7px 0 0;
  border: none;
  border-top: 1px solid var(--border);   /* doubles as the separator under the notes */
  background: none;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 1px;
  text-align: left;
  cursor: pointer;
}
#ai-detail-toggle:hover { color: var(--accent2); }

/* soft pulse: the AI is thinking/acting */
.ai-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent2);
  animation: ai-pulse 1.4s ease-in-out infinite;
}
@keyframes ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

#ai-why {
  font-size: 12.5px;
  line-height: 1.45;
  color: inherit;
}

#ai-detail.hidden { display: none; }

#ai-detail {
  margin: 8px 0 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: var(--dim);
  white-space: pre;
  overflow-x: auto;
}

.tc-row { display: flex; gap: 8px; }
#tc-call.hidden { display: none; }
#tc-call { color: var(--call); }

.tc-btn {
  flex: 1;
  min-height: 54px;
  background: var(--panel);
  color: var(--accent);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  touch-action: none;                       /* control taps never scroll/zoom the page */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.tc-btn:active {
  background: var(--accent-fill);
  color: #1a1a1a;
  border-color: var(--accent-fill);
}

.tc-wide {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  letter-spacing: 3px;
}

/* ---------- Select Game page ---------- */
.panel.select-panel {        /* .panel.select-panel outweighs the mobile .panel override */
  position: relative;
  min-height: 480px;
  padding: 26px 20px 28px;    /* the top row holds Admin, Settings and the avatar; the heading's margin clears it */
}

#avatar-bubble {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  cursor: pointer;
}
#avatar-bubble:hover { border-color: var(--accent2); color: var(--accent2); }

/* Sign out lives at the bottom of the User panel as a full-width ghost button */
.ghost-btn {
  width: 100%;
  padding: 10px 0;
  margin-top: 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}
.ghost-btn:hover { border-color: var(--bad); color: var(--bad); }

/* Large back chevron in the panel header (left of the title) */
#user-overlay .panel, #admin-overlay .panel,
#groups-overlay .panel,
#groupboard-overlay .panel, #groupleaders-overlay .panel, #archives-overlay .panel { position: relative; }
.panel-back {
  position: absolute;
  top: 12px;
  left: 14px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 10px;
  -webkit-tap-highlight-color: transparent;
}
.panel-back:hover { color: var(--accent2); }

#welcome-msg {
  font-size: 19px;
  letter-spacing: 1px;
  color: var(--accent);
  margin: 44px 0 6px;
}

.choose-label {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 14px;
}

.format-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.format-btn {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.format-btn:hover { border-color: var(--accent2); }
.format-btn:active { border-color: var(--accent); background: rgba(255, 204, 77, 0.08); }

.fmt-icon { font-size: 42px; line-height: 1; }

/* disabled format tile with a Coming Soon badge */
.format-btn { position: relative; }

.format-btn.format-disabled {
  color: rgba(139, 144, 179, 0.5);
  border-color: rgba(46, 51, 80, 0.7);
  cursor: default;
}

.format-btn.format-disabled:hover,
.format-btn.format-disabled:active {
  border-color: rgba(46, 51, 80, 0.7);
  background: var(--bg);
}

.format-btn.format-disabled .fmt-icon {
  filter: grayscale(1);
  opacity: 0.35;
}

.coming-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: var(--accent-fill);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  pointer-events: none;
}

.format-btn[hidden] { display: none; }   /* .format-btn's flex would otherwise beat [hidden] */

/* Square tiles: the icon, the title and the status line make one block,
   centred both ways in the tile. Every tile's block is the same height (a
   48px icon box, one title line, and a status slot kept even when empty),
   so the block sits in the same place in every tile and the titles line up
   across a row whatever the icon or the status says. */
.format-btn:not(.nav-btn):not(.learn-btn) > .fmt-icon,
.format-btn:not(.nav-btn):not(.learn-btn) > .fmt-logo { flex: none; height: 48px; }
.format-btn:not(.nav-btn):not(.learn-btn) > .fmt-icon { display: flex; align-items: center; justify-content: center; }
.format-btn:not(.nav-btn):not(.learn-btn) > .fmt-logo { width: 48px; }
.format-btn:not(.nav-btn):not(.learn-btn) > .fmt-sub { min-height: 1.25em; }
.format-btn:not(.nav-btn):not(.learn-btn) > .fmt-sub:empty { display: block; visibility: hidden; }
/* the hub's tiles keep their content a little above centre, clear of the
   (i) button in the bottom right corner (the ✓ badge sits top right) */
.challenge-cell .format-btn:not(.nav-btn):not(.learn-btn) { padding-bottom: 24px; }
.challenge-cell .fmt-row { font-size: 22px; letter-spacing: 0; }   /* Wild Row's three stars, clear of the ✓ */

/* Challenge Games tile: a small neon ball circling its border, clockwise and
   slowly. The SVG spans the border box; its rect runs along the border's
   middle, and a zero-length round-capped dash is the ball. */
.neon-orbit {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 2px var(--accent2)) drop-shadow(0 0 5px var(--accent2));
}
.neon-orbit rect {
  fill: none;
  stroke: #dffaff;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  animation: neon-orbit 10s linear infinite;
}
@keyframes neon-orbit { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .neon-orbit rect { animation: none; } }

/* ---------- Challenge Games ---------- */
.fmt-logo { width: 52px; height: 52px; }   /* the SVG pads its shield; matches the 42px emoji icons */
.fmt-wild { color: var(--accent); }
.fmt-row { font-size: 26px; letter-spacing: 2px; line-height: 42px; }   /* three stars in the 42px icon slot */
.new-badge {                               /* until the player first opens Challenge Games */
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent2-fill);
  color: #06212b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 6px;
  pointer-events: none;
}
.new-badge.hidden { display: none; }
.challenge-logo { display: block; width: 56px; height: 56px; margin: 0 auto 4px; }
/* a challenge tile plus its (i) help button in the tile's top-right corner */
.challenge-cell { position: relative; }
/* Beat AI: the last row, one wide tile across both columns, half as tall as
   the others (4:1; 2:1 until 2026-10-12), the robot beside its name and the
   line under both. Its content sits in the middle, clear of the (i) in the
   corner, so it needs no bottom padding. Group round hides it (it has no
   group round) but keeps its row, so the page keeps its height. */
.challenge-cell[data-cell="beatai"] { grid-column: 1 / -1; }
.challenge-cell[data-cell="beatai"] .format-btn:not(.nav-btn):not(.learn-btn) { aspect-ratio: 4 / 1; gap: 4px; padding: 0 32px; }
.fmt-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fmt-head .fmt-icon { font-size: 30px; }
.challenge-cell[data-cell="beatai"] .fmt-sub { margin-top: 0; }
.format-grid.round-mode .challenge-cell[data-cell="beatai"] { visibility: hidden; }
.challenge-cell .format-btn { width: 100%; }
/* the (i) help button: a small light-gray circle in the tile's bottom right
   corner (20px, 2026-10-08: 25% smaller than the 26px it was, and gray
   rather than neon so it reads as secondary to the tile) */
.challenge-info-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1.5px solid var(--info);
  border-radius: 50%;
  background: var(--panel);
  color: var(--info);
  font: italic 700 11px/1 Georgia, 'Times New Roman', serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.challenge-info-btn::after { content: ''; position: absolute; inset: -8px; }   /* a ~36px tap target around the small circle */
.challenge-info-btn:hover,
.challenge-info-btn:focus-visible { background: var(--info); color: var(--bg); }
/* played-today badge: a 20px circle, the (i) button's size, in green, in the top right
   corner, shown in Group round mode once today's round is filed */
.challenge-done {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--good);
  border-radius: 50%;
  background: var(--panel);
  color: var(--good);
  font: 700 12px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
  pointer-events: none;
}
.challenge-done[hidden] { display: none; }
/* the help dialog: the confirm box, with reading-friendly body text */
.challenge-help-box { max-width: 360px; }
.challenge-help-body { text-align: left; font-size: 14px; line-height: 1.5; color: var(--text); }
.challenge-help-body p { margin: 0 0 10px; }
.challenge-help-body b { color: var(--accent); }
.challenge-more { text-align: center; color: var(--dim); font-size: 12px; margin: 6px 0 0; }

/* Text-only tiles (Leaderboard / Archives / How to Play / Learn from AI) share
   the grid with the square game-format boxes but carry no icon, so they drop
   the 1:1 aspect ratio and sit at a compact fixed height. */
.format-btn.nav-btn,
.format-btn.learn-btn {
  aspect-ratio: auto;
  min-height: 46px;
  padding: 10px 8px;
  gap: 0;
}

/* navigation tiles read as secondary, so the playable formats stay primary */
.format-btn.nav-btn {
  background: var(--panel);
  color: var(--dim);
  font-size: 13px;
}
.format-btn.nav-btn:hover { border-color: var(--accent2); color: var(--text); }

/* Learn from AI: playable, flagged teal like the AI commentary panel */
.format-btn.learn-btn {
  border-color: var(--accent2);
  color: var(--accent2);
  box-shadow: 0 0 10px rgba(var(--accent2-rgb), 0.12);
}
.format-btn.learn-btn:active { background: rgba(var(--accent2-rgb), 0.08); border-color: var(--accent2); }

/* Settings gear: the top row, just left of the avatar bubble (46px wide at right 14px) */
#settings-gear {
  position: absolute;
  top: 14px;
  right: 72px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  -webkit-tap-highlight-color: transparent;
}

#settings-gear span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dim);
}

#settings-gear:active { color: var(--accent2); }

/* Admin person icon: the top row's left corner, above the Welcome heading */
#admin-gear {
  position: absolute;
  top: 14px;
  left: 14px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
#admin-gear span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dim);
}
#admin-gear:active { color: var(--accent2); }
#admin-gear.hidden { display: none; }   /* only admins (email allowlist) see this */

/* Administrator panel: sections and options */
.admin-section { text-align: left; margin-bottom: 16px; }
.admin-heading {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 7px;
}
.admin-option {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(var(--tint-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.admin-option:hover { border-color: var(--accent2); }
.admin-option:active { background: rgba(var(--tint-rgb), 0.06); }
.admin-note { font-size: 11px; color: var(--dim); margin-top: 5px; }
.admin-note.hidden { display: none; }

/* Game Admin: card wrapping the recent-games table */
.admin-card {
  border: 1px solid var(--border);
  background: rgba(var(--tint-rgb), 0.03);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  text-align: left;
}
.admin-card-title {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 10px;
}

/* ---------- Settings: categories in collapsible sections ----------
   The Administrator page's sections (.admin-sec, below), one column on a
   phone and two on a large screen; the page scrolls itself, and SAVE stays
   at the bottom of the screen. */
#config-overlay { position: fixed; inset: 0; z-index: 30; overflow-y: auto; align-items: flex-start; padding: 12px 8px 0; }
#config-overlay .settings-panel { width: 100%; max-width: 560px; margin: auto; padding: 18px 14px 0; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; align-items: start; }
@media (min-width: 1000px) {
  #config-overlay .settings-panel { max-width: 920px; padding: 22px 24px 0; }
  .settings-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .settings-save { margin: 4px -24px 0; padding: 12px 24px 18px; }
}
.set-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; }
.set-rows .config-row { margin-bottom: 0; }
.set-rows .set-wide { grid-column: 1 / -1; }
.set-label { display: block; font-size: 11px; letter-spacing: 1px; color: var(--dim); margin-bottom: 5px; }   /* as .config-row label */
.set-rows .controls-help { margin: 0; }
.settings-save { position: sticky; bottom: 0; z-index: 2; margin: 4px -14px 0; padding: 12px 14px 16px;
                 background: linear-gradient(rgba(var(--panel-rgb), 0), var(--panel) 28%); }

/* ---------- Administrator: one page of collapsible sections ----------
   The page takes the whole viewport and scrolls itself: one column on a
   phone, two on a large screen (Moderation | Settings and Records). */
#admin-overlay { position: fixed; inset: 0; z-index: 30; display: block; overflow-y: auto; padding: 12px 8px 40px; }
#admin-overlay.hidden { display: none; }
#admin-overlay .admin-panel { width: 100%; max-width: 560px; margin: 0 auto; padding: 18px 14px 20px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; align-items: start; }
@media (min-width: 1000px) {
  #admin-overlay { padding: 24px 24px 48px; }
  #admin-overlay .admin-panel { max-width: 1120px; padding: 22px 24px 26px; }
  .admin-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.admin-toolbar { font-size: 12px; color: var(--dim); text-align: right; margin: -4px 0 6px; }
.admin-group-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim);
                     text-align: left; margin: 12px 2px 8px; }
.admin-sec { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(var(--tint-rgb), 0.03); text-align: left; }
.admin-sec > summary { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px; list-style: none; cursor: pointer;
                       -webkit-tap-highlight-color: transparent; }
.admin-sec > summary::-webkit-details-marker { display: none; }
.admin-sec > summary:hover { background: rgba(var(--tint-rgb), 0.03); }
.admin-sec > summary:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; border-radius: 10px; }
.admin-sec[open] > summary { border-bottom: 1px solid rgba(var(--tint-rgb), 0.07); }
.sec-icon { flex: none; width: 24px; font-size: 18px; text-align: center; }
.sec-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; color: var(--accent); }
.sec-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--dim); }
.sec-badge { flex: none; min-width: 22px; padding: 2px 7px; border-radius: 11px; background: #ff5a6e; color: #fff;
             font-size: 11px; font-weight: 800; text-align: center; }
.sec-badge.hidden { display: none; }
.sec-chevron { flex: none; color: var(--dim); font-size: 12px; transition: transform 0.15s; }
.admin-sec[open] > summary .sec-chevron { transform: rotate(180deg); }
.sec-body { padding: 12px; }
.sec-subhead { margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.sec-body > .sec-subhead:first-child, .sec-body > div > .sec-subhead:first-child { margin-top: 0; }
.sec-body .group-form-row { margin-bottom: 8px; }
.sec-body .group-form-row.mg-wrap { flex-wrap: wrap; }
.sec-body .mg-wrap .group-input { flex: 1 1 140px; }
.sec-body .mg-wrap .group-input.mg-narrow { flex: 0 1 110px; }
.mg-danger-row { margin-top: 12px; }
.mg-g-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mg-g-head .sec-subhead { margin: 0 0 8px; color: var(--text); font-size: 13px; letter-spacing: 0.5px; text-transform: none; }
#mg-group { margin: 10px 0 0; }
#ads-card, #beatai-card, #theme-card { margin-bottom: 6px; }
#beatai-card, #theme-card { margin-top: 14px; }
/* the last action's result stays in view while the page scrolls */
.admin-msg { position: sticky; top: 0; z-index: 2; margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
             background: var(--panel); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); font-size: 12px; color: var(--bad-soft); text-align: left; }
.admin-msg.ok { color: var(--good); }
.admin-msg.hidden { display: none; }

/* Stats & Data spans both columns on a large screen. System stats: seven
   cards (one column on a phone, two on a large screen), each a grid of number
   tiles (2 a row on a phone, 4 from 560px) and an optional bar chart. */
.admin-wide { grid-column: 1 / -1; }
.st-asof { text-align: left; margin: 0 0 10px; }
.st-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1000px) { .st-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.st-card { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(var(--tint-rgb), 0.02); }
.st-card-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: 13px; letter-spacing: 0.5px; color: var(--text); }
.st-note { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--dim); }
.st-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 560px) { .st-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-tile { min-width: 0; padding: 8px; border-radius: 6px; background: rgba(var(--tint-rgb), 0.035); }
.st-num { font-size: 19px; font-weight: 700; line-height: 1.15; color: var(--accent2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-num.word { font-size: 15px; line-height: 1.3; }
.st-label { margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--dim); }
.st-sub { margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--text); opacity: 0.85; }
.st-sub .mg-link { padding: 0; font-size: 11px; }
.st-chg { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.st-chg.up { color: var(--good); }
.st-chg.down { color: var(--bad); }
.st-chg.flat, .st-chg.neutral { color: var(--dim); }
.st-table td .st-chg { display: inline; margin: 0 0 0 4px; }
.st-line { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--dim); }
.st-empty { font-size: 12px; color: var(--dim); }
.st-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12px; }
.st-table th { padding: 4px 6px; border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); text-align: left; }
.st-table td { padding: 5px 6px; border-bottom: 1px solid rgba(var(--tint-rgb), 0.05); vertical-align: top; }
.st-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-table td.st-bad { color: var(--bad); font-weight: 700; }
.st-detail { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; color: var(--dim); }
.st-chart { margin-top: 12px; }
.st-chart-title { margin-bottom: 4px; font-size: 11px; color: var(--dim); }
.st-tip { color: var(--text); }
.st-bars { display: flex; align-items: flex-end; gap: 3px; }
.st-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; cursor: default; }
.st-col { width: 100%; height: 74px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--border); }
.st-v { font-size: 10px; line-height: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.st-fill { width: 72%; max-width: 28px; border-radius: 2px 2px 0 0; background: var(--accent2); opacity: 0.8; }
.st-bar:hover .st-fill { opacity: 1; }
.st-bar.mark .st-fill { background: var(--accent); }
.st-x { margin-top: 3px; font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; max-width: 100%; }
#recent-games-body { max-height: 300px; overflow-y: auto; font-size: 13px; }
#recent-games-body table { width: 100%; border-collapse: collapse; }
#recent-games-body th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
}
#recent-games-body td {
  padding: 4px 2px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.05);
}
#recent-games-body .rg-seed { font-family: "Consolas", monospace; color: var(--accent2); }

/* My Groups list */
#groups-body { text-align: left; font-size: 14px; }
.group-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.05);
}
.group-row:last-child { border-bottom: none; }
.group-row.clickable { cursor: pointer; }
.group-row.clickable:hover { background: rgba(var(--tint-rgb), 0.04); }

/* Groups: create / join forms and a group's board */
.group-label { display: block; font-size: 11px; letter-spacing: 1px; color: var(--dim); margin-bottom: 5px; text-align: left; }
.group-input {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.group-code-input { text-transform: uppercase; letter-spacing: 3px; font-family: "Consolas", monospace; }
.group-form-row { display: flex; gap: 6px; align-items: flex-start; }
.group-form-row .group-input { flex: 1; min-width: 0; }
.group-btn {
  flex: none;
  height: 36px;
  padding: 0 14px;
  background: var(--accent-fill);
  color: #1a1a1a;
  border: 1px solid var(--accent-fill);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}
.group-btn:disabled { opacity: 0.5; cursor: default; }
.gb-code { font-family: "Consolas", monospace; letter-spacing: 3px; color: var(--accent); }
#gb-copy-link { color: var(--accent2); text-decoration: none; }
#gb-copy-link:hover { text-decoration: underline; }
.gb-board table, #gb-roster table { width: 100%; border-collapse: collapse; }
.gb-board td, #gb-roster td { padding: 4px 2px; border-bottom: 1px solid rgba(var(--tint-rgb), 0.05); font-size: 13px; text-align: left; }
.gb-board th { padding: 2px 2px 4px; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--dim); text-align: left; text-transform: uppercase; }
.gb-board th.num { text-align: right; }
.gb-board tr:last-child td, #gb-roster tr:last-child td { border-bottom: none; }
.gb-board td.lb-rank { width: 8%; color: var(--dim); }
.gb-board td.lb-name { overflow-wrap: anywhere; }   /* a long name with no spaces wraps instead of widening the table */
.gb-board tr.me td { color: var(--accent); font-weight: 700; }
.gb-board td.num, #gb-roster td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gb-board .group-meta { font-size: 11px; }
/* Group Leaders: Today, Streak and Best fit a 320px phone (a row like "L15 · 1612" twice) */
.gb-board table.gl-streaks th { letter-spacing: 0.5px; }
@media (max-width: 360px) {
  .gb-board table.gl-streaks td { font-size: 12px; }
  .gb-board table.gl-streaks th { letter-spacing: 0; }
}
/* top five rows in view, the rest a scroll away; the header stays put */
.gb-board-scroll { position: relative; overflow-y: auto; }
.gb-board thead th { position: sticky; top: 0; z-index: 1; background: linear-gradient(rgba(var(--tint-rgb), 0.03), rgba(var(--tint-rgb), 0.03)), var(--panel); }
/* Group Leaders: a group picker (a plain name with one group), then one
   toggle per leaderboard, styled as a segmented row that grows with boards */
.gl-picker { margin: 4px 0 12px; }
.gl-select { width: 100%; padding: 8px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 15px; cursor: pointer; }
.gl-group-name { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); text-align: center; }
.gl-group-name.hidden, .gl-select.hidden, #gl-group-label.hidden { display: none; }
.gl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gl-tab {
  flex: 1 1 28%; min-width: 0; padding: 8px 4px; white-space: nowrap;
  background: var(--panel); color: var(--dim);
  border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0; cursor: pointer;
}
/* Group Leaders' board buttons: a grid of three equal columns, so a lone
   button on the last row (Wild Row) is as wide as the rest; it sits centred */
#gl-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#gl-tabs .gl-tab:last-child:nth-child(3n + 1) { grid-column: 2; }
.gl-tab:hover { border-color: var(--accent2); color: var(--text); }
.gl-tab[aria-selected="true"] { border-color: var(--accent2); color: var(--accent2); background: rgba(var(--accent2-rgb), 0.08); }
.gl-links { margin: 4px 0 10px; font-size: 13px; }
.gl-links a { color: var(--accent2); text-decoration: none; }
.gl-links a:hover { text-decoration: underline; }
.gl-links.hidden, #gl-card.hidden, #gl-tabs.hidden, #gl-mygroups-btn.hidden { display: none; }
/* Group rounds: the hub's Free play / Group round switch, its note, and the
   tiles' accent while switched to rounds; on Group Leaders, last week's card */
.round-switch { max-width: 320px; margin: 0 auto 10px; }
.round-hub-note { color: var(--accent2); }
.format-btn.round-tile { border-color: rgba(var(--accent2-rgb), 0.45); }
/* the hub's note card: the tagline and the round note in one grid cell, the
   hidden one kept for its height, so flipping the switch never moves the tiles */
.hub-note-card {
  display: grid;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--accent2-rgb), 0.18);
  border-radius: 10px;
  background: rgba(var(--tint-rgb), 0.025);
}
.hub-note-card .tagline { grid-area: 1 / 1; margin: 0; align-self: center; }
.hub-note-card .tagline.is-off { visibility: hidden; }
#round-hub-note:empty { display: none; }
#round-switch.hidden, #round-note.hidden,
#gl-last.hidden, #gl-play-round.hidden { display: none; }
.gl-play { margin: 0 0 10px; font-size: 13px; }
.gl-play a { color: var(--accent2); text-decoration: none; font-weight: 700; }
.gl-play a:hover { text-decoration: underline; }
.gl-play a.is-practice { color: var(--dim); font-weight: 600; }   /* today's round filed: only practice is left */
#gl-last-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
#gl-last-body td { padding: 4px 4px; border-bottom: 1px solid var(--border); }
#gl-last-body tr.me td { color: var(--accent); font-weight: 700; }
/* Breakthrough's levels cell opens its details card: hover, tap or keyboard (docs/breakthrough-levels-spec.md §5.2) */
.lvl-cell { padding: 0; border: 0; border-bottom: 1px dotted rgba(var(--tint-rgb), 0.4); background: none; color: inherit;
            font: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.lvl-cell:hover, .lvl-cell[aria-expanded="true"] { color: var(--accent2); border-bottom-color: var(--accent2); }
.gl-pop { position: fixed; z-index: 60; min-width: 190px; max-width: calc(100vw - 16px); padding: 8px 10px;
          background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
          box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); color: var(--text); font-size: 12px; line-height: 1.35; }
.gl-pop[hidden] { display: none; }
.gl-pop-head { margin-bottom: 4px; font-weight: 700; }
.gl-pop table { width: 100%; border-collapse: collapse; }
.gl-pop td { padding: 2px 0; }
.gl-pop td.num { padding-left: 14px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl-pop-foot { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(var(--tint-rgb), 0.1); color: var(--dim); }

/* collapsible card titles: the arrow sits in the upper left and turns when folded */
.card-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer;
}
.card-chevron { display: inline-block; font-size: 11px; transition: transform 0.15s; }
.card-toggle[aria-expanded="false"] .card-chevron { transform: rotate(-90deg); }
.admin-card-title:has(.card-toggle[aria-expanded="false"]) { margin-bottom: 0; }
.gb-remove { background: none; border: none; color: var(--bad); cursor: pointer; font-size: 14px; padding: 0 4px; }
.admin-note.ok { color: var(--good); }

/* Admin > Manage Group */
#mg-group.hidden, #mg-player.hidden { display: none; }
#mg-groups table, #mg-g-members table, #mg-g-board table, #mg-audit table { width: 100%; border-collapse: collapse; }
#mg-g-members td, #mg-g-board td, #mg-audit td { padding: 4px 2px; border-bottom: 1px solid rgba(var(--tint-rgb), 0.05); font-size: 12px; text-align: left; vertical-align: top; word-break: break-all; }
#mg-g-members td.num, #mg-g-board td.num { text-align: right; white-space: nowrap; word-break: normal; }
.mg-info { font-size: 12px; text-align: left; margin-bottom: 8px; word-break: break-all; }
.mg-info .group-meta { display: block; }
.mg-link { background: none; border: none; color: var(--accent2); cursor: pointer; font-size: 12px; padding: 0 4px; font-family: inherit; }
.mg-link:hover { text-decoration: underline; }
.group-btn.mg-danger { background: #ff5a6e; border-color: #ff5a6e; flex: 1; }
#mg-g-delete.hidden { display: none; }
/* the Group Recycle Bin card, and the tag on a binned or purged group in the list */
#mg-bin table { width: 100%; border-collapse: collapse; }
#mg-bin td { padding: 6px 2px; border-bottom: 1px solid rgba(var(--tint-rgb), 0.05); font-size: 12px; text-align: left; vertical-align: top; }
#mg-bin td.num { text-align: right; white-space: nowrap; }
#mg-bin .group-meta { display: block; font-size: 11px; color: var(--dim); }
#mg-bin .mg-purge { color: var(--bad); }
.mg-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--bad); }
#mg-audit { max-height: 220px; overflow-y: auto; }
#groups-note.hidden { display: none; }
.group-row .group-name { font-weight: 600; color: var(--text); min-width: 0; }
/* the code stays on one line; a long name, "Hammertime (Hammer02)", wraps instead */
.group-row .group-meta { font-size: 11px; color: var(--dim); white-space: nowrap; flex-shrink: 0; }
/* the right side of a My Groups row: the code, then (for the owner) a trash can that deletes the group */
.group-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.group-trash { display: inline-flex; padding: 5px; border: 0; border-radius: 6px; background: none; color: var(--dim);
               cursor: pointer; line-height: 0; }
.group-trash:hover, .group-trash:focus-visible { color: var(--bad); background: rgba(255, 90, 110, 0.1); }
.group-trash:disabled { opacity: 0.4; cursor: default; }

/* ---------- Splash / sign-in ---------- */
/* The art is a tall portrait: capped by the viewport so the status line
   below it stays on screen. Once the game has loaded it is the Play button. */
/* The splash art's box: exactly the still's proportions (720x1346), as wide
   as the panel allows but never taller than 70vh. The still fills it; the
   video (9:16, slightly shorter) covers it, trimming a sliver off each side. */
.splash-media {
  position: relative;
  width: min(100%, calc(70vh * 720 / 1346));
  aspect-ratio: 720 / 1346;
  margin: 0 auto 14px;
  border-radius: 12px;
  overflow: hidden;
}
.splash-art {
  display: block;
  width: 100%;
  height: 100%;
}
.splash-art.ready { cursor: pointer; }
.splash-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;            /* taps go to the art beneath, which is the way in */
}
.splash-video.on { opacity: 1; }
/* The sign-in form (auth.js showForm): the art crops to its "Stickee Words"
   title (about y 100-470 of the still's 1346px), so the form starts right
   beneath it and the page fits a phone. The video frames the art a little
   differently, so this view shows the still alone. */
.splash-panel.signin .splash-media { width: 100%; aspect-ratio: 720 / 370; margin-bottom: 12px; }
.splash-panel.signin .splash-art { object-fit: cover; object-position: 50% 10.2%; }
.splash-panel.signin .splash-video { display: none; }

.logo-cross {
  display: grid;
  grid-template-columns: repeat(5, 36px);
  grid-auto-rows: 36px;
  gap: 3px;
  justify-content: center;
  margin-bottom: 12px;
}

.lt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  font-size: 19px;
  font-weight: 800;
  color: #1a1a1a;
}

.lt i {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-style: normal;
  font-size: 8px;
  font-weight: 600;
}

.c-y { background: #f4d35e; }   /* WORDS  */
.c-g { background: #90be6d; }   /* STICKY */
.c-o { background: #ee964b; }   /* shared S */

.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #1f1f1f;
  border: none;
  border-radius: 8px;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.google-btn:hover { filter: brightness(0.95); }
.google-btn svg { width: 20px; height: 20px; }

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  font-size: 11px;
  margin: 12px 0;
}

.divider::before,
.divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.splash-panel input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}

.auth-error {
  color: var(--bad);
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}
.auth-error.hidden { display: none; }
.auth-error.info { color: var(--good); }   /* positive confirmation (e.g. reset email sent) */

.auth-toggle {
  font-size: 12px;
  color: var(--dim);
  text-align: center;
  margin-top: 10px;
}
.auth-toggle a { color: var(--accent2); text-decoration: none; }
.auth-toggle a:hover { text-decoration: underline; }
.auth-forgot { margin-top: 4px; }
.auth-forgot.hidden { display: none; }

/* Anonymous first: the sign-in page starts as artwork + status while the guest
   sign-in is in flight; the form shows only when asked for (or if it failed). */
#auth-form.hidden, #auth-status.hidden, #guest-continue.hidden { display: none; }
#guest-continue { margin-top: 10px; }
#guest-prompt.hidden, #guest-note.hidden, #user-signin-btn.hidden, #signout-btn.hidden, #token-note.hidden, #account-note.hidden { display: none; }
/* Game Archives: the month grid. Each playable day carries a tooltip with
   that day's top score (title attribute; the info line repeats it on tap). */
.archive-cal { margin: 8px 0 4px; }
.archive-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.archive-cal-head span { font-weight: 700; letter-spacing: 1px; color: var(--text); }
.archive-cal-head button {
  background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--accent);
  font-size: 16px; line-height: 1; padding: 4px 10px; cursor: pointer;
}
.archive-cal-head button:disabled { opacity: 0.3; cursor: default; }
.archive-cal-dow, .archive-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.archive-cal-dow span { font-size: 11px; color: var(--dim); text-align: center; padding-bottom: 2px; }
.archive-cal-days button {
  min-height: 34px; border-radius: 6px; border: 1px solid transparent;
  background: rgba(var(--tint-rgb), 0.04); color: var(--text); font-size: 14px; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px 0;
}
.archive-cal-days button .cal-top { font-size: 9px; color: var(--dim); line-height: 1; }
.archive-cal-days button:hover { border-color: var(--accent2); }
.archive-cal-days button.selected { background: var(--accent-fill); color: #1a1500; font-weight: 700; }
.archive-cal-days button.selected .cal-top { color: #4a3d00; }
.archive-cal-days button:disabled { color: rgba(var(--tint-rgb), 0.18); background: none; cursor: default; border-color: transparent; }
.archive-cal-days .cal-blank { visibility: hidden; }
#archive-note.hidden { display: none; }
#archive-play-btn:disabled { opacity: 0.45; cursor: default; filter: none; }

/* Close (X) in a panel's top-right corner, the mirror of .panel-back */
.panel-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
}
.panel-close:hover { color: var(--accent2); }

#delete-account-btn { margin-top: 18px; }
#delete-account-btn.hidden, #delete-account-confirm.hidden, #delete-account-msg.hidden { display: none; }
#delete-account-confirm { margin-top: 18px; text-align: left; }
#delete-account-confirm .admin-note { margin: 0 0 10px; line-height: 1.45; }
.ghost-btn.danger { border-color: var(--bad); color: var(--bad); }

/* A board name with a Player-XXXX code behind it: hover shows the code as a
   tooltip; a tap or Enter (no hover on touch screens) shows it inline. */
.player-name.has-code {
  cursor: pointer;
  text-decoration: underline dotted rgba(var(--tint-rgb), 0.35);
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.player-name.show-code::after {
  content: '\00b7  ' attr(data-code);
  display: inline-block;          /* keeps the name's dotted underline off the code */
  margin-left: 0.3em;
  font-size: 0.82em;
  font-weight: 400;
  color: var(--dim);
  white-space: nowrap;
}

/* Confirm dialog over an overlay (Delete my account): dims the panel behind it */
.confirm-dialog {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--scrim-confirm);
}
.confirm-dialog.hidden { display: none; }
.confirm-box {
  width: 100%;
  max-width: 320px;
  background: var(--panel);
  border: 2px solid #ff5a6e;
  border-radius: 12px;
  padding: 18px 18px 14px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.confirm-box h2 { margin: 0 0 8px; font-size: 17px; letter-spacing: 1px; color: var(--bad); }
.confirm-box .ghost-btn { width: 100%; margin-top: 8px; }
.ghost-btn.danger:hover { background: #ff5a6e; color: #fff; }
#token-note { color: var(--accent); }
#flags-note.hidden { display: none; }
#flags-note { color: var(--warn); }

/* Legal links and the analytics consent bar */
.legal-links { font-size: 11px; color: var(--dim); margin: 10px 0 0; }
.legal-links a { color: var(--dim); }
#consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  padding: 10px 14px;
  background: var(--consent-bg);
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text);
}
#consent-bar.hidden { display: none; }
#consent-bar a { color: var(--accent2); }
#consent-bar button { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font-size: 12px; font-family: inherit; }
#consent-bar #consent-ok { background: var(--accent-fill); color: #1a1a1a; border-color: var(--accent-fill); font-weight: 700; }
.guest-prompt { font-size: 12px; color: var(--dim); margin: -6px 0 12px; }
.guest-prompt a { color: var(--accent2); text-decoration: none; }
.guest-prompt a:hover { text-decoration: underline; }
#user-signin-btn { margin-bottom: 10px; }

/* Sign-in loading state: the active button spins, both lock out */
#google-btn:disabled, #email-signin-btn:disabled { opacity: 0.7; cursor: default; }
.btn-loading { pointer-events: none; }
.btn-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;      /* matches each button's text colour */
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.demo-note {
  font-size: 10px;
  color: var(--dim);
  margin-top: 10px;
}

/* ---------- HUD ---------- */
#hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);   /* centre the pause button under the Help button */
  align-items: center;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 16px;
  font-weight: 700;
}
#timer { justify-self: start; }
#pause-btn { justify-self: center; }
#score { justify-self: end; }

/* digital-clock tiles: timer = teal digits, score = golden tiles with black digits */
.dc-digit {
  display: inline-block;
  min-width: 14px;
  padding: 3px 2px;
  margin: 0 1px;
  background: #090b12;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--neon);
  text-shadow: 0 0 6px rgba(110, 231, 255, 0.45);
}
.dc-sep {
  margin: 0 1px;
  font-size: 20px;
  font-weight: 800;
  color: var(--neon);
  text-shadow: 0 0 6px rgba(110, 231, 255, 0.45);
}
#timer, #score { white-space: nowrap; }   /* digits never wrap to a 2nd row */
#timer .dc-digit { border: 1px solid rgba(255, 255, 255, 0.85); }   /* white outline for contrast on black */
#score .dc-digit { background: var(--accent-fill); color: #1a1a1a; text-shadow: none; }
/* Breakthrough: the score slot shows the level (docs/breakthrough-levels-spec.md §2.6) */
/* Row Rush: the part's clock is orange in the rush and its warning */
#timer.rush-hot .dc-digit { color: #fb923c; border-color: #fb923c; text-shadow: 0 0 6px rgba(251, 146, 60, 0.6); }
#timer.rush-hot .dc-sep { color: #fb923c; }

#pause-btn {
  background: #22c55e;          /* match the green RESUME GAME button in the grid */
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 9px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#pause-btn:active { filter: brightness(1.15); }

/* Stickee Help button in the banner, between Next Block and Last Word */
#auto-btn {
  background: #ff5a6e;               /* red button, black lettering (matches EXIT GAME) */
  color: #1a1a1a;
  border: 1px solid #ff5a6e;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

#auto-btn:active { background: #e0455a; color: #1a1a1a; }

#auto-btn.reload {
  background: var(--bg);             /* out of Help: distinct gold-on-dark "reload" look */
  color: var(--accent);
  border-color: var(--accent);
}

#auto-btn.reload:active { background: var(--accent-fill); color: #1a1a1a; }

/* Help mode running: button looks pressed / inset */
#auto-btn.help-active {
  background: #d83a4f;
  border-color: #b32d40;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.55);
  transform: translateY(1px);
}

/* Daily: no Help, no tokens - the slot shows a badge so the banner stays centred */
#auto-btn.hidden, #token-btn.hidden, #no-help-badge.hidden { display: none; }
/* Row Rush: the level in Stickee Help's place, neon blue (--accent2 with a glow),
   no taller than the side panels so the banner keeps its height */
#level-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  padding: 4px 14px 5px;
  border: 2px solid var(--accent2);
  border-radius: 10px;
  color: var(--accent2);
  font-weight: 800;
  text-shadow: 0 0 8px rgba(var(--accent2-rgb), 0.85), 0 0 16px rgba(var(--accent2-rgb), 0.4);
  box-shadow: 0 0 10px rgba(var(--accent2-rgb), 0.45), inset 0 0 8px rgba(var(--accent2-rgb), 0.18);
  white-space: nowrap;
}
#level-badge.hidden { display: none; }
#level-badge .lvl-cap { font-size: 11px; letter-spacing: 2px; margin-bottom: 3px; }
#level-badge-num { font-size: 28px; font-variant-numeric: tabular-nums; }
#no-help-badge {
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dim);
  white-space: nowrap;
}

/* Asterix Token display stacked above the Help button */
#help-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#token-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#token-btn svg { display: block; }
#token-count { font-size: 12px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
#token-btn:active { opacity: 0.7; }

/* Ad / get-tokens dialog: the reward GIF plays here */
.ad-slot {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #0d0f1a;
  line-height: 0;
  margin-bottom: 16px;
}
.ad-slot img { width: 100%; height: auto; display: block; }
/* buttons stay disabled until the 5s video finishes */
.big-btn:disabled, .ghost-btn:disabled { opacity: 0.45; cursor: default; filter: none; }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.overlay.hidden { display: none; }

.panel {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px 20px;
  width: 340px;
  text-align: center;
}

.panel h1 {
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 6px;
}

.tagline {
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 14px;
}

.config-row {
  margin-bottom: 10px;
  text-align: left;
}

.config-row label {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--dim);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.btn-group { display: flex; gap: 6px; }

/* Wild Calls without Multiplier + Wildcard: kept, but visibly not in force */
.config-row.inactive .btn-group { opacity: 0.4; }
.config-row.inactive label::after { content: ' \2014  needs Multiplier + Wildcard'; text-transform: none; }

.btn-group button {
  flex: 1;
  padding: 8px 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.btn-group button.selected {
  background: var(--accent-fill);
  color: #1a1a1a;
  border-color: var(--accent-fill);
  font-weight: 700;
}

#timer-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: "Consolas", monospace;
  font-size: 16px;
  text-align: center;
}

/* Blocks-per-game dropdown (Game Length: Blocks) - styled like the timer field */
.config-select {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
}

/* only one of the two length rows shows at a time (Game Length: Timer | Blocks) */
#timer-row.hidden, #blocks-row.hidden { display: none; }

/* timer +/- 1 minute stepper */
.timer-stepper {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.timer-stepper #timer-input {
  flex: 1;
  min-width: 0;
  padding: 8px 2px;
  font-size: 15px;
}

.step-btn {
  flex: none;
  width: 26px;
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.step-btn:active {
  background: var(--accent-fill);
  color: #1a1a1a;
  border-color: var(--accent-fill);
}

.controls-help {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
  font-size: 11px;
  color: var(--dim);
  margin: 12px 0;
  text-align: left;
}

.big-btn {
  width: 100%;
  padding: 12px 0;
  background: var(--accent-fill);
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
}

.big-btn:hover { filter: brightness(1.1); }

#save-settings-btn,
#restart-btn,
#email-signin-btn { background: #22c55e; }   /* green "go" buttons */

.final-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: "Consolas", monospace;
  font-size: 18px;
  margin: 12px 0 4px;
  color: var(--accent2);
}
/* final score uses the same golden digital tiles as the in-game score */
#final-score .dc-digit { background: var(--accent-fill); color: #1a1a1a; text-shadow: none; }
#final-score .dc-sep { color: var(--dim); }

.penalty-note {
  font-size: 12px;
  color: var(--bad);
  margin-bottom: 12px;
}

.penalty-note.hidden { display: none; }

.seed-note {
  font-family: "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dim);
  margin-bottom: 8px;
}

/* under PLAY AGAIN at the bottom of the game-over panel */
#seed-note { margin: 10px 0 0; }
/* Breakthrough's result line (blocks used, time, best): the headline of that game */
#groups-note.break-note { font-family: inherit; font-size: 20px; font-weight: 600; color: var(--text-strong); letter-spacing: 0; line-height: 1.3; margin-bottom: 12px; }

#word-log-final {
  max-height: 270px;          /* ~15 rows at 18px each */
  overflow-y: auto;
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 16px;
  text-align: left;
}

#word-log-final table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

#word-log-final td {
  border: none;
  padding: 1px 0;
  line-height: 16px;
  text-align: left;           /* both columns left justified */
}

#word-log-final td.w {
  width: 60%;
  color: var(--accent);
  font-weight: 700;
}

/* words cleared in the same solve chain share a colour; the palette rotates
   so neighbouring groups always stand out from each other */
#word-log-final tr.g0 td.w { color: var(--chain-0); }   /* green  */
#word-log-final tr.g1 td.w { color: var(--chain-1); }   /* purple */
#word-log-final tr.g2 td.w { color: var(--chain-2); }   /* yellow */

/* wildcard flag: marks words where a blank scored 0, so the lower points
   are self-explanatory instead of looking like a scoring bug */
.wild-mark {
  color: var(--accent);
  font-weight: 700;
  cursor: help;
}
.wild-note {
  margin: 6px 0 0;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--dim);
}

/* leaderboard: entries scored under superseded rules */
.lb-legacy {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dim);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 3px;
  cursor: help;
}

/* score-log multiplier badges: L = length bonus, S = stickee bonus, C = chain position */
.mults { white-space: nowrap; }
.len-mult, .chain-mult, .stick-mult {
  font-size: 10px;
  font-weight: 700;
  cursor: help;
}
.len-mult { color: var(--mult-len); }
.stick-mult { color: var(--mult-stick); }
.chain-mult { color: var(--mult-chain); }
/* Wild Calls: reading i of n, and a busted call (scored nothing) */
.call-mark { font-size: 10px; font-weight: 700; color: var(--call); cursor: help; }
#word-log-final tr.bust td { color: var(--bust); }

/* left bracket spanning words completed by the same block-solve */
#word-log-final td.bracket { width: 9px; padding: 0; }
#word-log-final td.br-top { border-left: 2px solid; border-top: 2px solid; }
#word-log-final td.br-mid { border-left: 2px solid; }
#word-log-final td.br-bot { border-left: 2px solid; border-bottom: 2px solid; }
#word-log-final tr.g0 td.bracket { border-color: var(--chain-0); }
#word-log-final tr.g1 td.bracket { border-color: var(--chain-1); }
#word-log-final tr.g2 td.bracket { border-color: var(--chain-2); }

#assist-mark { vertical-align: -3px; margin-left: 4px; }
#assist-mark.hidden { display: none; }

/* ---------- Leaderboard ---------- */
#leaderboard-body {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 16px;
  font-size: 13px;
  text-align: left;
}

#leaderboard-body table { width: 100%; border-collapse: collapse; }

#leaderboard-body td {
  border: none;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.05);
}

#leaderboard-body th {
  padding: 2px 2px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid rgba(var(--tint-rgb), 0.12);
}

#leaderboard-body .lb-rank { width: 8%; color: var(--dim); text-align: left; }
#leaderboard-body .lb-name {
  width: 30%;
  text-align: left;
  max-width: 0;                 /* let the cell shrink so ellipsis kicks in */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#leaderboard-body .lb-score { width: 24%; }
#leaderboard-body td.lb-score {
  font-family: "Consolas", monospace;
  font-weight: 700;
  color: var(--accent);
}
#leaderboard-body .lb-date { color: var(--dim); text-align: right; }

.lb-empty { color: var(--dim); font-size: 13px; line-height: 1.6; text-align: center; }
#leaderboard-body tr.me td { color: var(--accent); font-weight: 700; }
.lb-me { font-size: 12px; font-weight: 700; color: var(--accent); margin: 8px 0 12px; }
.lb-me.hidden { display: none; }
.share-btn { margin-bottom: 8px; background: var(--accent2-fill); border-color: var(--accent2-fill); }
.share-btn.hidden { display: none; }

.lb-reset {
  background: #ff5a6e;   /* destructive action: red, distinct from BACK */
  margin-bottom: 8px;
}

/* ---------- How to Play tour ---------- */
/* its X sits in the popup's own top right corner (2026-10-12; the screen's
   corner before), tucked in so a long card title clears it at 320px */
.howto-panel { text-align: left; position: relative; }
.howto-panel .panel-close { top: 4px; right: 4px; }

.howto-panel h1 { text-align: center; font-size: 18px; }

#howto-body {
  min-height: 240px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin: 12px 0;
}

#howto-body .howto-quote {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 3px solid var(--accent2);
  background: rgba(var(--accent2-rgb), 0.06);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: var(--dim);
}
#howto-body ul { margin: 8px 0 8px 18px; padding: 0; }
#howto-body li { margin-bottom: 5px; }
#howto-body b { color: var(--accent); }

.howto-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.howto-nav button {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 20px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

#howto-next { background: #22c55e; color: #1a1a1a; border-color: #22c55e; }

#howto-dots { color: var(--dim); font-size: 12px; letter-spacing: 3px; }

/* How to Play's quick-start cards: one picture, a few lines, and on the last
   card "Full rules ›" under LET'S PLAY. The picture keeps its shape and
   shrinks to fit a 320px phone. */
.howto-media { display: flex; justify-content: center; margin: 10px 0 0; }
.howto-media.hidden { display: none; }
.howto-media img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.howto-panel.is-card #howto-body { min-height: 72px; margin: 10px 0 12px; }
#howto-body .howto-hint { font-size: 12px; color: var(--dim); margin-top: 6px; }
.howto-more { margin: 10px 0 0; text-align: center; font-size: 13px; }
.howto-more.hidden { display: none; }
.howto-more a { color: var(--accent2); text-decoration: none; }
.howto-more a:hover { text-decoration: underline; }
/* the last card's two tiles, drawn like the Welcome page's */
.howto-tiles { display: flex; justify-content: center; gap: 12px; margin: 6px 0 12px; }
.howto-tile {
  width: 112px; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--bg); color: var(--text);
  border: 2px solid var(--border); border-radius: 14px;
  font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2;
}
.howto-tile .fmt-icon { font-size: 34px; line-height: 1; }
.howto-tile img { width: 40px; height: 40px; }

/* ---------- Display Size: Mobile (fill the screen) ---------- */
body.display-mobile #app {
  width: 100vw;
  max-width: 560px;
  min-height: 100dvh;
  padding: 6px 10px;
  gap: 6px;
}

body.display-mobile #board-canvas {
  width: 100%;                              /* upscale beyond native pixels... */
  height: auto;
  max-height: calc(100dvh - 320px);         /* ...but keep the controls on screen */
}

body.display-mobile .tc-btn { min-height: 58px; font-size: 24px; }
body.display-mobile .tc-wide { min-height: 52px; font-size: 16px; }
body.display-mobile #hud { font-size: 17px; }

/* ---------- Responsive / mobile ---------- */
@media (max-width: 420px) {
  #app {
    width: 100vw;
    padding: 6px 8px;
    gap: 6px;
    min-height: 100dvh;
  }
  #banner { min-height: 60px; padding: 6px 10px; }
  /* shrink the board so banner + HUD + controls all fit without page scroll */
  #board-canvas { max-height: calc(100dvh - 278px); width: auto; }
  #hud { padding: 8px 12px; font-size: 14px; }
  .tc-btn { min-height: 48px; font-size: 20px; }
  .panel { width: 92vw; max-width: 340px; padding: 22px 18px; }
}

/* Daily tile: the line under the title says where today stands (startDaily's answer) */
.fmt-sub {
  display: block;
  margin-top: -6px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.25;
  color: var(--dim-soft);
  text-align: center;
}
.fmt-sub:empty { display: none; }

/* Pause overlay: a Daily attempt's deadline */
.pause-deadline { font-size: 12px; letter-spacing: 1px; color: var(--text); margin-top: -12px; }
.pause-deadline.hidden { display: none; }

/* A question about the Daily, over the game field or the Select page: fixed and neutral, not a danger dialog */
.confirm-dialog.confirm-fixed { position: fixed; }
.confirm-box.neutral { border-color: var(--accent2); }
.confirm-box.neutral h2 { color: var(--accent2); }

/* ---------- Replay viewer (docs/game-replay-spec.md) ----------
   The bar takes the touch-control slot while a recorded game plays back:
   who is being watched, the block count, the speed and SKIP. */
#replay-bar {
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
}
#replay-bar.hidden { display: none; }
.replay-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 7px;
}
.replay-head #replay-who { color: inherit; letter-spacing: 0; font-weight: 600; }
.replay-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.replay-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--dim); }
#replay-speeds { display: flex; gap: 4px; margin-left: auto; }
#replay-speeds button, #replay-skip {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#replay-speeds button.selected { background: var(--accent-fill); color: #1a1a1a; border-color: var(--accent-fill); }
#replay-skip { border-color: var(--accent2); color: var(--accent2); }

/* WATCH beside a board row; the game-over replay buttons */
.watch-btn {
  background: none;
  border: 1px solid var(--accent2);
  border-radius: 6px;
  color: var(--accent2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.watch-btn:disabled { opacity: 0.5; cursor: default; }
.replay-btn { margin-bottom: 8px; }
.replay-btn.hidden { display: none; }
.archive-top { margin-top: 10px; text-align: left; }
.archive-top.hidden { display: none; }
.archive-top .admin-heading { margin-bottom: 4px; }
.archive-top table, #gb-yesterday-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.archive-top td, #gb-yesterday-body td { padding: 4px 4px; border-bottom: 1px solid var(--border); }
#gb-yesterday-body tr.me td { color: var(--accent); font-weight: 700; }
#gb-yesterday.hidden { display: none; }

/* the replay bar's speed label, and the Daily's date above the NO HELP badge */
.replay-speed-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--dim); align-self: center; margin-right: 2px; }
#daily-date { font-size: 10px; letter-spacing: 2px; color: var(--dim); white-space: nowrap; margin-bottom: 4px; }   /* the same row as the side panels' labels */
#help-col.has-date { align-self: stretch; justify-content: space-between; }   /* date at the top, HELP or NO HELP at the bottom, like the side panels */
#daily-date.hidden { display: none; }

/* ---------- Name on boards (docs/player-names-spec.md) ---------- */
.name-prompt { margin: 6px 0 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; text-align: left; }
.name-prompt.hidden { display: none; }
.name-prompt .admin-note { margin: 0 0 6px; }
.name-prompt .group-form-row { margin-bottom: 6px; }
#board-name-msg.ok, #name-prompt-msg.ok { color: var(--accent2); }
/* a guest's "claim your spot" card after the Daily (docs/anonymous-play-spec.md §3.1) */
.claim-card { margin: 6px 0 10px; padding: 10px 12px; border: 1px solid var(--accent2); border-radius: 8px; text-align: left; }
.claim-card.hidden { display: none; }
.claim-card .claim-title { margin: 0 0 4px; font-weight: bold; color: var(--accent2); }
.claim-card .admin-note { margin: 0 0 8px; }
.claim-card .group-form-row { margin-bottom: 6px; flex-wrap: wrap; }
.claim-card .group-btn { flex: 1; }
.claim-card .group-btn.claim-alt { background: none; color: inherit; }
.mg-matches { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.mg-matches.hidden { display: none; }
.mg-match { background: none; border: 1px solid var(--border); border-radius: 6px; color: inherit; font-size: 12px; text-align: left; padding: 6px 8px; cursor: pointer; font-family: inherit; }
.mg-match:hover { border-color: var(--accent2); }

/* ---------- Desktop ad rails (docs/desktop-ad-rails-spec.md) ----------
   One unit in each gutter beside the game column, positioned from the page
   centre so the column never moves; absolute rather than fixed, so nothing
   is "sticky". The column is 400px (560 in the Mobile display size). */
:root { --ad-col: 400px; }
body.display-mobile { --ad-col: 560px; }
.ad-rail {
  position: absolute;
  top: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ad-rail[hidden] { display: none; }
#ad-rail-left { right: calc(50% + var(--ad-col) / 2 + 32px); }
#ad-rail-right { left: calc(50% + var(--ad-col) / 2 + 32px); }
.ad-caption { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.ad-rail ins { display: block; }
.ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 1px;
}
#ads-card-msg { text-align: left; margin: 4px 0 0; }
#ads-card-msg.ok { color: var(--accent2); }

/* ---------- Light theme (docs/light-theme-spec.md) ----------
   On while <html data-theme="light">: the Administrator's Look switch
   (config/flags.theme), or ?theme=light for one page load. The splash art's
   look: cream panels with wood edges on its blurred forest, candy-colored
   tiles, a moss-green board so the letter tiles still pop, rounded type on
   the menus. The play screen keeps its sizes: the type there is unchanged,
   and the wood "ledges" are shadows, which take no space. The font and the
   forest are only fetched while the theme is on. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500 800;     /* the one 600 file serves every weight, so nothing is faux-bolded */
  font-display: swap;
  src: url(fonts/fredoka-600.woff2?v=1) format('woff2');
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fffdf6;
  --page: #dcebc8;
  --panel: #fff8ea;
  --panel-rgb: 255, 248, 234;
  --border: #dcb98c;
  --wood: #c9925a;
  --wood-dark: #a8642a;
  --accent: #c2410c;
  --accent-fill: #ffcc4d;
  --accent2: #1670b0;
  --accent2-fill: #7cc8f2;
  --accent2-rgb: 22, 112, 176;
  --text: #3b2a1a;
  --text-strong: #2a1c0f;
  --dim: #6f5a44;
  --dim-soft: #6f5a44;
  --tint-rgb: 120, 72, 24;
  --good: #15803d;
  --bad: #c8283f;
  --bad-soft: #c8283f;
  --warn: #b45309;
  --info: #8a7058;
  --chain-0: #15803d;
  --chain-1: #7e22ce;
  --chain-2: #a16207;
  --mult-len: #2f855a;
  --mult-stick: #be185d;
  --mult-chain: #b45309;
  --call: #a16207;
  --bust: #c8283f;
  --scrim: rgba(226, 238, 208, 0.5);
  --scrim-pause: rgba(255, 248, 234, 0.94);
  --scrim-confirm: rgba(59, 42, 26, 0.45);
  --board-bg: #23402c;
  --board-frame: #a8642a;
  --board-glow: rgba(120, 72, 24, 0.25);
  --consent-bg: #fff8ea;
  --soft-shadow: 0 6px 20px rgba(60, 40, 10, 0.2);
}
/* the forest behind everything, fixed (a fixed layer, since phones ignore background-attachment: fixed) */
[data-theme="light"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--page) url(img/meadow-bg.jpg?v=1) center / cover no-repeat;
}
/* panels: cream with a wood edge and a wood ledge underneath, like PLAY NOW */
[data-theme="light"] .panel,
[data-theme="light"] #banner,
[data-theme="light"] #hud {
  border-color: var(--wood);
  box-shadow: 0 4px 0 var(--wood-dark), 0 10px 22px rgba(60, 40, 10, 0.18);
}
[data-theme="light"] .panel { border-radius: 16px; }
[data-theme="light"] .tc-btn { border-color: var(--wood); box-shadow: 0 3px 0 var(--wood-dark); }
[data-theme="light"] .big-btn { box-shadow: 0 3px 0 rgba(90, 50, 15, 0.35); }
[data-theme="light"] .google-btn { box-shadow: 0 0 0 1px var(--border); }
[data-theme="light"] .admin-msg,
[data-theme="light"] .gl-pop,
[data-theme="light"] .confirm-box { box-shadow: var(--soft-shadow); }
[data-theme="light"] #level-badge { text-shadow: none; box-shadow: none; }
/* tiles: each a soft candy tint, the jelly letters' colors. Low specificity,
   so hover, the Group round edge and the nav tiles' own look still win. */
:where([data-theme="light"]) .format-btn,
:where([data-theme="light"]) .howto-tile {
  background: var(--tile-bg, var(--bg));
  border-color: var(--tile-edge, var(--border));
  box-shadow: 0 3px 0 var(--tile-edge, var(--border));
}
[data-theme="light"] [data-format="daily"],
[data-theme="light"] [data-challenge="stickystars"] { --tile-bg: #dcefff; --tile-edge: #7cb6e8; }
[data-theme="light"] #challenges-link,
[data-theme="light"] [data-challenge="wildcalls"] { --tile-bg: #efe2ff; --tile-edge: #b48ae6; }
[data-theme="light"] [data-format="timed"],
[data-theme="light"] [data-challenge="breakthrough"] { --tile-bg: #ffe7cc; --tile-edge: #f0a35c; }
[data-theme="light"] [data-format="infinity"],
[data-theme="light"] [data-challenge="wildrow"] { --tile-bg: #e0f4d2; --tile-edge: #8cc56b; }
[data-theme="light"] [data-challenge="rowrush"] { --tile-bg: #ffe0e6; --tile-edge: #ee8a9e; }
[data-theme="light"] [data-challenge="rubble"] { --tile-bg: #fff3c4; --tile-edge: #e6c154; }
[data-theme="light"] [data-challenge="beatai"] { --tile-bg: #e3e8f5; --tile-edge: #8e9cc7; }
/* rounded type on the menus (not the play screen, so a late font never moves the board) */
[data-theme="light"] .panel h1,
[data-theme="light"] .panel h2,
[data-theme="light"] .format-btn,
[data-theme="light"] .howto-tile,
[data-theme="light"] .big-btn,
[data-theme="light"] .howto-nav button,
[data-theme="light"] .choose-label,
[data-theme="light"] .sec-title,
[data-theme="light"] .gl-tab,
[data-theme="light"] .group-btn {
  font-family: 'Fredoka', "Segoe UI", system-ui, sans-serif;
}