/* BrainRush shared styles: dark board theme, gold accents, big readable text. */

:root {
  --bg: #0b1026;
  --panel: #151c3d;
  --panel-2: #1d2654;
  --border: #2c3770;
  --text: #eef1ff;
  --muted: #a3acd3;
  --gold: #f5c518;
  --gold-dark: #c99d00;
  --danger: #ff6b6b;
  --danger-bg: rgba(255, 107, 107, 0.12);
  --success: #4cd18a;
  --success-bg: rgba(76, 209, 138, 0.12);
  --radius: 8px;
  --focus: 0 0 0 3px rgba(245, 197, 24, 0.45);
}

* { box-sizing: border-box; }

/* text-size-adjust: iOS must not enlarge text on its own when the phone is turned sideways */
html { font-size: 17px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.45;
}

h1, h2, h3 { margin: 0 0 0.6rem; line-height: 1.2; }
h1 { font-size: 1.9rem; color: var(--gold); letter-spacing: 0.02em; }
h2 { font-size: 1.3rem; color: var(--gold); }
h3 { font-size: 1.05rem; }

a { color: var(--gold); }
/* Hover styles only for real pointers: on touch screens a tap would leave them stuck on (iOS). */
@media (hover: hover) { a:hover { color: #ffe27a; } }

.subtitle { color: var(--text); font-weight: 400; font-size: 1.2rem; }
.hint { color: var(--muted); font-size: 0.9rem; font-weight: 400; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Header ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: #0e1433;
}
.page-header h1 { margin: 0; }
.brand-logo { width: 2.2rem; height: 2.2rem; vertical-align: middle; margin-right: 0.6rem; }
.nav-link { font-weight: 600; text-decoration: none; }
@media (hover: hover) { .nav-link:hover { text-decoration: underline; } }

/* ---------- Maintenance overlay ---------- */
.page-header { position: relative; z-index: 101; } /* keeps the Admin link usable above the overlay */
.maintenance-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(5, 8, 22, 0.88);
}
.maintenance-overlay[hidden] { display: none; }
.maintenance-card {
  max-width: 36rem;
  max-height: 100%;
  overflow-y: auto;
  padding: 1.25rem;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.5;
}
.maintenance-card p { margin: 0; }
.maintenance-img { display: block; width: 100%; height: auto; margin-bottom: 1rem; border-radius: var(--radius); }

/* ---------- Double score popup (D-40) ---------- */
.double-overlay {
  position: fixed;
  inset: 0;
  z-index: 102; /* above the page header: the popup must be closed first */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(5, 8, 22, 0.88);
}
.double-overlay[hidden] { display: none; }
.double-card {
  max-width: 28rem;
  max-height: 100%;
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 0 32px rgba(245, 197, 24, 0.35);
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.5;
}
.double-card p { margin: 0 0 1.2rem; }
.double-card .double-title {
  margin-bottom: 0.6rem;
  color: var(--gold);
  font-size: 2rem;
  font-weight: 800;
  animation: banner-pulse 1.6s ease-in-out infinite;
}

/* ---------- Form controls ---------- */
input, select, textarea, button { font: inherit; }
/* No double-tap zoom when the host taps buttons quickly (e.g. + / - on the scoreboard) */
a, button, label, input, select, textarea { touch-action: manipulation; }
/* iOS zooms into any field with text under 16px; keep fields at 16px or more on touch screens */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em); }
}

input, select, textarea {
  width: 100%;
  padding: 0.45rem 0.6rem;
  color: var(--text);
  background: #0e1433;
  border: 1px solid var(--border);
  border-radius: 6px;
}
textarea { resize: vertical; min-height: 4.5rem; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-color: var(--gold);
}
select:disabled, input:disabled { opacity: 0.6; }

label { display: block; margin: 0.4rem 0 0.2rem; color: var(--muted); font-size: 0.9rem; }

.btn {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
@media (hover: hover) { .btn:hover:not(:disabled) { border-color: var(--gold); } }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn[hidden] { display: none; }
.btn-primary { background: var(--gold); color: #1a1a1a; border-color: var(--gold); font-weight: 600; }
@media (hover: hover) { .btn-primary:hover:not(:disabled) { background: #ffd84a; } }
.btn-danger { color: var(--danger); border-color: rgba(255, 107, 107, 0.5); }
@media (hover: hover) { .btn-danger:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-bg); } }
.btn-small { padding: 0.2rem 0.55rem; font-size: 0.85rem; }

.actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }

/* ---------- Inline messages ---------- */
.msg {
  margin: 0.7rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border-left: 4px solid var(--muted);
  white-space: pre-line;
  overflow-wrap: anywhere; /* long unbroken names wrap instead of widening the page (D-19) */
}
.msg-error { color: #ffd0d0; background: var(--danger-bg); border-left-color: var(--danger); }
.msg-success { color: #c9f5dc; background: var(--success-bg); border-left-color: var(--success); }
#global-msg { margin: 1rem 1.5rem 0; }
.msg-warning { color: #fff1c2; background: rgba(245, 197, 24, 0.12); border-left-color: var(--gold); }
/* Admin login notice (US-29): text + "Log in" button on one line */
.auth-banner { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 1.5rem 0; }
.auth-banner[hidden] { display: none; }
.auth-banner .auth-text { flex: 1 1 20rem; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Admin layout ---------- */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  padding: 1.25rem 1.5rem 2rem;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem 1.2rem;
  min-width: 0;
}
.panel-wide { grid-column: 1 / -1; }

.stack input { max-width: 12rem; }
.stack input.wide-input { max-width: none; }
.stack input.id-input { max-width: 18rem; } /* AdSense publisher ID (D-41) */
.stack .hint { margin: 0.2rem 0 0; }
/* Checkbox and its text on one line (banner on/off in Game settings) */
.check-label { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; color: var(--text); cursor: pointer; }
.check-label input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--gold); }

.inline-form { display: flex; gap: 0.5rem; align-items: center; }
.inline-form input { flex: 1; min-width: 0; }

.filter-row { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0.5rem; flex-wrap: wrap; }
.filter-row label { margin: 0; }
.filter-row select { width: auto; min-width: 14rem; }

.question-form {
  padding: 0.8rem 1rem 1rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.question-form.editing { border-color: var(--gold); }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .field { flex: 1 1 12rem; }
/* Image path + thumbnail of the picture question */
.image-field { display: flex; gap: 1rem; align-items: flex-start; }
.image-field-input { flex: 1; min-width: 0; }
.image-field-input .hint { margin: 0.3rem 0 0; }
.image-preview {
  flex: none;
  display: block;
  width: 7rem;
  height: 4.5rem;
  object-fit: contain;
  background: #0e1433;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
}
.image-preview[hidden] { display: none; }

/* Point value list */
.item-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.item-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--border);
}
.item-list li:last-child { border-bottom: none; }
.point-label { font-weight: 700; font-size: 1.1rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.item-meta { flex: 1; color: var(--muted); font-size: 0.85rem; }
.item-list li.is-disabled .point-label { color: var(--muted); text-decoration: line-through; }

/* Tables */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  padding: 0.45rem 0.6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.data-table th { color: var(--muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.data-table td.text-cell { max-width: 28rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.data-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table td.row-actions { white-space: nowrap; }
.data-table td.row-actions .btn + .btn { margin-left: 0.35rem; }
.data-table td.empty-row { color: var(--muted); font-style: italic; }
.data-table tr.is-editing td { background: rgba(245, 197, 24, 0.08); }
/* min-width keeps normal names on one line; "anywhere" still breaks very long unbroken names */
.data-table td.name-cell { min-width: 9rem; overflow-wrap: anywhere; }
.rename-input { max-width: 22rem; }

/* Game logs: file names look like links; the open file's row is highlighted */
.link-btn {
  padding: 0;
  color: var(--gold);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}
.link-btn:hover { color: var(--text); }
.data-table tr.is-open td { background: rgba(245, 197, 24, 0.08); }
.log-viewer { margin-top: 1rem; }
.log-viewer h3 { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.log-content {
  max-height: 28rem;
  margin: 0;
  padding: 0.8rem 1rem;
  overflow: auto;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-ok { background: var(--success-bg); color: var(--success); }
.badge-missing { background: var(--danger-bg); color: #ffb3b3; }

/* ---------- Game page ---------- */
.game-main { padding: 1.25rem 1.5rem 1rem; }
.screen[hidden] { display: none; }
.field-error { margin: 0.25rem 0 0; color: #ffb3b3; font-size: 0.9rem; }
.field-error[hidden] { display: none; }
.game input[aria-invalid="true"] { border-color: var(--danger); }
.btn-large { padding: 0.7rem 2rem; font-size: 1.2rem; }
.msg a { font-weight: 600; }
.msg .btn { margin-left: 0.6rem; }

/* Setup */
.setup { max-width: 54rem; margin: 0 auto; }
/* Home intro (D-42): one short muted line under "New game" that says what BrainRush is */
.site-intro { margin: -0.3rem 0 1rem; color: var(--muted); font-size: 0.95rem; }

/* Site footer (US-41): the same links on every public page. Hidden while a board game is on screen,
   so the board and question still fit one screen (D-30). */
.site-footer { margin-top: 2rem; padding: 1rem 1.25rem 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; text-align: center; }
.site-footer nav a { display: inline-block; padding: 0.3rem 0.15rem; color: var(--gold); text-decoration: none; }
@media (hover: hover) { .site-footer nav a:hover { text-decoration: underline; } }
.site-footer p { margin: 0.4rem 0 0; }
body[data-screen="board"] .site-footer, body[data-screen="question"] .site-footer { display: none; }
.contact-email { font-size: 1.2rem; font-weight: 600; }
.setup-block {
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.2rem 1.2rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.setup-block legend { padding: 0 0.4rem; color: var(--gold); font-weight: 700; font-size: 1.15rem; }

/* Mode toggle with the Streak Challenge buttons beside it; they wrap under it on narrow screens */
.mode-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0.2rem; }
.mode-row .mode-toggle { margin: 0; }
.mode-toggle { display: inline-flex; margin: 0.3rem 0 0.2rem; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.mode-option { position: relative; margin: 0; font-size: 1rem; color: var(--text); }
.mode-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mode-option span { display: block; padding: 0.45rem 1.2rem; cursor: pointer; }
.mode-option + .mode-option span { border-left: 1px solid var(--border); }
.mode-option input:checked + span { background: var(--gold); color: #1a1a1a; font-weight: 700; }
.mode-option input:focus-visible + span { box-shadow: inset var(--focus); }
.mode-limit { font-size: 0.8rem; font-weight: 400; }

.entry-list { list-style: none; margin: 0.4rem 0 0.8rem; padding: 0; }
.entry-row {
  display: grid;
  grid-template-columns: 5rem 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 0.6rem;
  padding: 0.3rem 0;
}
.entry-row .entry-label { margin: 0; font-size: 0.95rem; }
.entry-row .field-error { grid-column: 3 / -1; margin: 0; }
.swatch {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  cursor: pointer;
}
@media (hover: hover) { .swatch:hover { transform: scale(1.08); } }

.cat-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.cat-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.5rem 0.7rem;
  color: var(--text);
  font-size: 1rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.cat-label.is-selected { border-color: var(--gold); }
.cat-label.is-locked { color: var(--muted); cursor: not-allowed; }
.cat-label input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--gold); }
.cat-name-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cat-order { min-width: 1.5rem; border-radius: 999px; background: var(--gold); color: #1a1a1a; font-size: 0.8rem; font-weight: 700; text-align: center; }
.cat-order:empty { display: none; }
/* "Surprise me!" tile: one full row above the categories. */
.cat-surprise-item { grid-column: 1 / -1; }
.cat-label.cat-surprise { font-weight: 700; color: var(--gold); background: rgba(245, 197, 24, 0.08); border: 1px dashed var(--gold); }
.cat-label.cat-surprise.is-selected { border-style: solid; }
.cat-label.cat-surprise.is-locked { color: var(--muted); border-color: var(--border); }
.cat-surprise-hint { margin-left: 0.6rem; color: var(--muted); font-size: 0.85rem; font-weight: 400; }

.timer-input { max-width: 8rem; }
/* Timer and Played questions side by side, equal width (stacked on phones) */
.setup-pair { display: flex; gap: 1.25rem; }
.setup-pair > .setup-block { flex: 1; }
/* Same look as the question timer bar */
.played-track { height: 0.8rem; margin-top: 0.5rem; overflow: hidden; background: #0e1433; border: 1px solid var(--border); border-radius: 999px; }
.played-track[hidden] { display: none; }
.played-bar { height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease-out; }
#played-count { margin: 0.4rem 0 0.6rem; }
.start-row { justify-content: center; margin: 0.5rem 0; }

/* "New questions" banner on the setup screen (text and on/off come from Admin settings):
   gold strip with a pulsing NEW pill and a light shine sweeping across it */
.new-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  padding: 0.65rem 1rem;
  color: #1a1a1a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold) 30%, #ffe27a 70%, var(--gold));
  border-radius: var(--radius);
  box-shadow: 0 0 18px rgba(245, 197, 24, 0.35);
}
.new-banner[hidden] { display: none; }
.new-banner::before {
  content: "\2728  NEW";
  flex: none;
  padding: 0.1rem 0.6rem;
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  white-space: pre;
  background: var(--bg);
  border-radius: 999px;
  animation: banner-pulse 1.6s ease-in-out infinite;
}
.new-banner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: banner-shine 3.5s ease-in-out infinite;
}
@keyframes banner-pulse { 50% { transform: scale(1.1); } }
@keyframes banner-shine { 0% { left: -40%; } 60%, 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) {
  .new-banner::before { animation: none; }
  .new-banner::after { display: none; }
  .double-card .double-title { animation: none; }
}

/* Board: columns = categories, rows = point values (both from data; JS sets --cols and --digits) */
.board-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; max-width: 90rem; margin: 0 auto 0.8rem; }
.board-info { margin: 0; }
.btn-end { color: var(--gold); border-color: var(--gold-dark); font-weight: 600; }
@media (hover: hover) { .btn-end:hover:not(:disabled) { background: rgba(245, 197, 24, 0.12); } }
.board-done {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  max-width: 90rem;
  margin: 0 auto 0.9rem;
  padding: 0.8rem 1rem;
  background: rgba(245, 197, 24, 0.12);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
}
.board-done[hidden] { display: none; }
.board-done-text { margin: 0; font-size: 1.25rem; font-weight: 700; color: #fff1c2; }
/* FU-03 (D-30): on the board screen the page is one viewport tall and the board gets the height
   that header, bar, offer and scoreboard leave over. The page only scrolls once rows hit --row-min.
   game.js sets body[data-screen]; the flex chain below is only active while the board is shown. */
body[data-screen="board"] { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body[data-screen="board"] .game-main { display: flex; flex-direction: column; flex: 1 0 auto; }
body[data-screen="board"] #screen-board { display: flex; flex-direction: column; flex: 1 0 auto; }
/* auto side margins would shrink-wrap flex items, so give them the full width (max-width still applies) */
body[data-screen="board"] #screen-board > * { width: 100%; }

/* --cols, --rows and --digits are always set inline by game.js from the board data */
.board {
  --gap: 0.5rem;
  --cat-h: 3.6rem;
  --row-min: 2.75rem;
  --row-max: 6.5rem;
  --board-w: min(100vw - 3rem, 90rem);
  --cell-w: calc((var(--board-w) - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  /* rows share the board height equally; "1fr" never goes below a cell's min-height */
  grid-template-rows: auto repeat(var(--rows), 1fr);
  gap: var(--gap);
  flex: 1 0 0;
  /* few rows: stop growing at --row-max so the scoreboard stays right under the board */
  max-height: calc(var(--cat-h) + var(--rows) * (var(--row-max) + var(--gap)));
  max-width: 90rem;
  margin: 0 auto;
}
.board-cat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--cat-h);
  padding: 0.4rem 0.3rem;
  color: var(--text);
  font-size: clamp(0.62rem, calc(var(--cell-w) / 10.5), 1.1rem);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  -webkit-hyphens: auto;
  hyphens: auto;
  background: var(--panel-2);
  border-bottom: 3px solid var(--gold);
  border-radius: 6px;
}
.board-cat-name { min-width: 0; overflow-wrap: anywhere; }
.board-cat.is-mystery { color: var(--gold); font-size: clamp(1rem, calc(var(--cell-w) / 5), 1.8rem); }
.board-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  min-height: var(--row-min);
  padding: 0.3rem;
  overflow: hidden;
  /* size container: the label and owner name scale with the cell's real height (cqh), so content
     never makes a row taller than its share of the board */
  container-type: size;
  color: var(--gold);
  background: linear-gradient(#1f2a6b, #161f57);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
@media (hover: hover) { .board-cell:hover:not(:disabled) { border-color: var(--gold); filter: brightness(1.2); } }
/* Used cells (US-08): owner color is set inline by JS; no correct answer = grey */
.board-cell.is-used { cursor: default; background-image: none; border-color: rgba(0, 0, 0, 0.35); }
.board-cell.is-owned { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25); }
.board-cell.is-unanswered { color: #c3c7d4; background: #4b5163; }
.board-cell.is-used .cell-points { opacity: 0.85; }
/* FU-05: owned and grey cells share one smaller label size (room for the owner name, US-08).
   55cqh + 28cqh * 1.2 line height + the 0.2rem gap always fit the cell's content height. */
.board-cell.is-used .cell-points { font-size: min(calc(var(--label-size) * 0.7), 55cqh); }
.cell-owner {
  max-width: 100%;
  overflow: hidden;
  font-size: min(clamp(0.62rem, calc(var(--cell-w) / 11), 0.95rem), 28cqh);
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Swapped cell (US-32): the old value is struck through; the replacing question is shown small. */
.board-cell .cell-points.is-struck { text-decoration: line-through; text-decoration-thickness: 0.08em; opacity: 0.6; }
/* Played double-score cell (D-40): a small "×2" tag in the top-right corner */
.board-cell.is-double { position: relative; }
.cell-double {
  position: absolute;
  top: 0.15rem;
  right: 0.3rem;
  font-size: min(clamp(0.55rem, calc(var(--cell-w) / 12), 0.85rem), 22cqh);
  font-weight: 800;
  line-height: 1;
}
.cell-swap {
  max-width: 100%;
  overflow: hidden;
  font-size: min(clamp(0.5rem, calc(var(--cell-w) / 16), 0.7rem), 14cqh);
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Label shrinks with column width and digit count so e.g. 10000 never wraps or overflows,
   and with the cell height (cqh of the cell) on short rows. */
.cell-points {
  --label-size: min(2.6rem, calc(var(--cell-w) / (var(--digits) * 0.62 + 1)), 90cqh);
  font-size: var(--label-size);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

/* Scoreboard strip */
.scoreboard-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 90rem;
  margin: 1.2rem auto 0;
  padding: 0;
  list-style: none;
}
.score-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "name name name" "minus score plus" "helpers helpers helpers";
  align-items: center;
  gap: 0.2rem 0.5rem;
  flex: 1 1 11rem;
  min-width: 0;
  max-width: 18rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}
.score-name { grid-area: name; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.score-value { grid-area: score; font-size: 1.8rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.score-btn {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  color: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
}
@media (hover: hover) { .score-btn:hover { background: rgba(0, 0, 0, 0.38); } }
.score-minus { grid-area: minus; }
.score-plus { grid-area: plus; }
/* Helpers left (US-32): one small line of the chip symbols; a used helper is dimmed and struck */
.score-helpers { grid-area: helpers; display: flex; justify-content: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 700; line-height: 1; }
.score-helper { padding: 0.12rem 0.4rem; background: rgba(0, 0, 0, 0.22); border-radius: 999px; }
.score-helpers[hidden], .srow-helpers[hidden] { display: none; }
.score-helper.is-used { opacity: 0.35; text-decoration: line-through; }

/* Question screen (US-11..US-14): question left, scoring right; stacks on narrow screens */
.question { max-width: 90rem; margin: 0 auto; }
.question-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.question-main, .scoring {
  min-width: 0;
  padding: 1.1rem 1.4rem 1.3rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.question-heading {
  margin: 0 0 0.6rem;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.question-heading:focus { outline: none; }
/* Picture questions: a fixed height so every picture (also SVGs without a size) shows at the
   same size; contain keeps its aspect ratio. The height leaves room for the text, timer and
   answer with no page scroll at 1366x768 (D-30) and grows to 50vh on taller screens.
   The outline is a drop-shadow, not a border: it follows the painted picture, so a wide
   picture narrowed by max-width gets no empty framed bars. The thin light edge keeps white
   (Japan) and dark flags distinct from the panel. */
.question-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(7rem, calc(100vh - 32.5rem), 50vh);
  margin: 0 auto 1rem;
  object-fit: contain;
  border-radius: 4px;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.75)) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
}
.question-image[hidden] { display: none; }
/* Photos (Landmarks, D-35): a bigger picture than flags. The room comes from a compact
   layout: the language button sits on the prompt's line, the timer digits and the answer
   text are smaller, the spacing is tighter, and the "Time's up!" line only takes room once
   time is up. About 340px tall at 1366x768 (flags: 215px) and still no page scroll with a
   two-line answer; the few longer answers scroll a little (accepted by D-30). */
.question-main.has-photo .question-heading { margin-bottom: 0.4rem; }
.question-main.has-photo .question-text {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1rem 0.4rem 0;
}
.question-main.has-photo .lang-btn { vertical-align: middle; margin: 0 0 0.4rem; }
.question-main.has-photo .timer-value { font-size: 2rem; }
.question-main.has-photo .timer-status { min-height: 0; }
.question-main.has-photo .timer-status:empty { display: none; }
.question-main.has-photo .answer-block { margin-top: 0.4rem; }
.question-main.has-photo .answer-text { padding: 0.4rem 1rem; font-size: clamp(1.15rem, 1.9vw, 1.9rem); }
@media (min-width: 961px) {
  .question-main.has-photo .question-image { height: clamp(7rem, calc(100vh - 25.2rem), 58.5vh); }
}
/* Photo credit under the picture: one small muted line that takes the picture's bottom
   margin (about 1rem), so a credited picture adds no height and the 1366x768 layout still
   fits. Author names are Latin, so the caption stays left-to-right in Arabic mode too. */
.question-image.has-credit { margin-bottom: 0; }
.question-credit {
  margin: 0.1rem 0;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.question-credit[hidden] { display: none; }
/* The picture is the question, so its short prompt gets a smaller font: one line at
   1366x768, which keeps a long answer on screen without a page scroll. */
.question-image:not([hidden]) ~ .question-text {
  margin-bottom: 0.9rem;
  font-size: clamp(1.15rem, 1.7vw, 2rem);
}
/* FU-04: game.js sets --q-scale (1 for short questions, smaller for long ones) */
.question-text {
  margin: 0 0 1.2rem;
  font-size: max(1.15rem, calc(clamp(1.6rem, 3vw, 3rem) * var(--q-scale, 1)));
  font-weight: 700;
  line-height: 1.25;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lang-btn { margin: 0 0 1.2rem; }
.lang-btn[hidden] { display: none; }

/* Double score (D-40): gold "×2 Double score" badge after the heading */
.question-double {
  display: inline-block;
  margin-left: 0.8rem;
  padding: 0.1rem 0.6rem;
  color: #1a1a1a;
  background: var(--gold);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
  white-space: nowrap;
}

/* Swap helper (US-32): "Swapped from History – 300" after the new question's heading */
.question-swap-note {
  margin-left: 0.8rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

/* "3 choices" helper (US-32): the answer and two wrong options, labelled A/B/C */
.question-choices { display: grid; gap: 0.35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.question-choices[hidden] { display: none; }
.choice {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.3rem 0.75rem;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.choice-letter { flex: none; color: var(--gold); }
.choice-text { min-width: 0; }
/* Once the answer is shown, the right choice turns green like the answer box */
.question-choices.is-revealed .choice.is-answer { color: #c9f5dc; background: var(--success-bg); border-color: var(--success); }
/* With a picture the choices sit side by side in a smaller font (compact sizes of D-35), and on
   wide screens the picture gives up their height, so the 1366x768 layout still fits (D-30). */
.question-image:not([hidden]) ~ .question-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0.6rem; }
.question-image:not([hidden]) ~ .question-choices .choice { gap: 0.4rem; padding: 0.25rem 0.5rem; font-size: clamp(0.95rem, 1.2vw, 1.15rem); }
/* Text question with the 3 choices shown: a compact layout like the photo one (D-35), so the
   question, the choices, the timer and the answer fit 1366x768 with 6 contestants (D-30).
   game.js sets .has-choices on .question-main; [hidden] on the picture means a text question.
   Short choices (.is-short, set by game.js) sit side by side. */
.question-main.has-choices .question-heading { margin-bottom: 0.4rem; }
.question-main.has-choices .question-image[hidden] ~ .question-text {
  margin-bottom: 0.5rem;
  font-size: max(1.15rem, calc(clamp(1.4rem, 2.5vw, 2.6rem) * var(--q-scale, 1)));
}
.question-main.has-choices .question-image[hidden] ~ .lang-btn { margin-bottom: 0.5rem; padding: 0.3rem 0.8rem; }
.question-main.has-choices .question-image[hidden] ~ .question-choices { gap: 0.25rem; margin-bottom: 0.5rem; }
.question-main.has-choices .question-image[hidden] ~ .question-choices.is-short { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.question-main.has-choices .question-image[hidden] ~ .question-choices .choice {
  gap: 0.5rem;
  padding: 0.2rem 0.65rem;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1.2;
}
.question-main.has-choices .question-image[hidden] ~ .timer .timer-value { font-size: 2rem; }
.question-main.has-choices .question-image[hidden] ~ .timer .timer-status { min-height: 0; }
.question-main.has-choices .question-image[hidden] ~ .timer .timer-status:empty { display: none; }
.question-main.has-choices .question-image[hidden] ~ .answer-block { margin-top: 0.4rem; }
.question-main.has-choices .question-image[hidden] ~ .answer-block .answer-text {
  padding: 0.35rem 1rem;
  font-size: clamp(1.15rem, 1.9vw, 1.9rem);
}
@media (min-width: 961px) {
  .question-main.has-choices .question-image { height: clamp(7rem, calc(100vh - 35.7rem), 50vh); }
  .question-main.has-photo.has-choices .question-image { height: clamp(7rem, calc(100vh - 28.4rem), 58.5vh); }
}

.timer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.3rem 1rem;
}
.timer-value {
  min-width: 3ch;
  color: var(--gold);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.timer-track { height: 1rem; overflow: hidden; background: #0e1433; border: 1px solid var(--border); border-radius: 999px; }
.timer-bar {
  height: 100%;
  background: var(--gold);
  transform-origin: left center;
  transition: transform 0.1s linear, background-color 0.2s;
}
.timer.is-low .timer-value { color: var(--danger); }
.timer.is-low .timer-bar { background: var(--danger); }
.timer-controls { display: flex; gap: 0.5rem; }
.timer-controls .btn { min-width: 5.5rem; }
.timer-status { grid-column: 1 / -1; min-height: 1.45em; margin: 0; color: var(--danger); font-weight: 700; }

.answer-block { margin-top: 0.8rem; }
.answer-text {
  margin: 0;
  padding: 0.7rem 1rem;
  color: #c9f5dc;
  font-size: clamp(1.3rem, 2.3vw, 2.2rem);
  font-weight: 700;
  overflow-wrap: anywhere;
  background: var(--success-bg);
  border-left: 4px solid var(--success);
  border-radius: 6px;
}
.answer-text.is-rtl { text-align: right; border-left: 0; border-right: 4px solid var(--success); }
.answer-text:focus { outline: none; }
#answer-value { white-space: pre-wrap; }
.answer-text[hidden] { display: none; }
.answer-label { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

.scoring h3 { color: var(--gold); margin-bottom: 0.2rem; }
.scoring .hint { margin: 0 0 0.7rem; }
.score-rows { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.srow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.35rem;
  padding: 0.35rem 0.5rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 8px solid var(--border);
  border-radius: 6px;
}
.srow-name {
  flex: 1 1 5rem;
  min-width: 0;
  padding: 0.2rem 0.55rem;
  font-weight: 700;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
/* compact enough that a row with the helper chips stays on one line at 1366x768 (US-32) */
.srow .btn { padding: 0.35rem 0.5rem; font-size: 0.92rem; }
.srow.is-out .srow-name { opacity: 0.55; } /* another contestant used a helper on this question */
/* Helper chips (US-32): icon-sized; the full name is in the tooltip and the confirm */
.srow-helpers { display: flex; flex: none; gap: 0.15rem; }
.helper-chip {
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.2rem;
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  background: rgba(245, 197, 24, 0.1);
  border: 1px solid var(--gold-dark);
  border-radius: 999px;
  cursor: pointer;
}
@media (hover: hover) { .helper-chip:hover:not(:disabled) { background: rgba(245, 197, 24, 0.25); } }
.helper-chip:disabled { opacity: 0.35; cursor: not-allowed; }
.helper-chip.is-used { text-decoration: line-through; }
.helper-chip.is-busy { opacity: 1; }
.srow-score { min-width: 4ch; font-size: 1.2rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.btn-correct { color: var(--success); border-color: rgba(76, 209, 138, 0.55); }
@media (hover: hover) { .btn-correct:hover:not(:disabled) { border-color: var(--success); background: var(--success-bg); } }
.btn-wrong { color: var(--danger); border-color: rgba(255, 107, 107, 0.5); }
@media (hover: hover) { .btn-wrong:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-bg); } }
/* The mark that was given stays clearly visible while its buttons are disabled */
.btn-correct.is-chosen { opacity: 1; color: #0b1026; background: var(--success); border-color: var(--success); }
.btn-wrong.is-chosen { opacity: 1; color: #0b1026; background: var(--danger); border-color: var(--danger); }
/* Double score (D-40): Correct is a gold button with white text instead of green */
.btn-correct.is-double { color: #ffffff; background: var(--gold); border-color: var(--gold); font-weight: 700; }
@media (hover: hover) { .btn-correct.is-double:hover:not(:disabled) { background: var(--gold-dark); border-color: var(--gold-dark); } }
.btn-correct.is-double.is-chosen { color: #ffffff; background: var(--gold); border-color: var(--gold); }
.btn-block { display: block; width: 100%; }

@media (max-width: 960px) {
  .question-layout { grid-template-columns: minmax(0, 1fr); }
  .question-image { height: clamp(7rem, 40vh, 22rem); }
}

/* Results (US-15, US-16) */
.results { max-width: 46rem; margin: 0 auto; text-align: center; }
.results-winner {
  margin: 0.4rem 0 1.2rem;
  color: var(--gold);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.results-list { display: grid; gap: 0.6rem; margin: 0 0 1rem; padding: 0; list-style: none; text-align: left; }
.result-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 10px solid var(--border);
  border-radius: var(--radius);
}
.result-row.is-winner,
.result-row.is-me {
  background: rgba(245, 197, 24, 0.1);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(245, 197, 24, 0.3);
}
.result-rank { min-width: 2.2rem; color: var(--muted); font-size: 1.3rem; font-weight: 800; }
.result-swatch { flex: none; width: 1.3rem; height: 1.3rem; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; }
.result-name { flex: 1; min-width: 0; font-size: 1.3rem; font-weight: 700; overflow-wrap: anywhere; }
.result-badge { padding: 0.15rem 0.6rem; color: #1a1a1a; font-size: 0.85rem; font-weight: 800; background: var(--gold); border-radius: 999px; }
/* FU-08: tight line height; the big score no longer sets a taller row than the name needs,
   so 6 rows + headline + New Game fit 1366x768 */
.result-score { min-width: 4ch; font-size: 1.8rem; font-weight: 800; line-height: 1.15; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Streak Challenge (US-33, US-34, D-37) ---------- */
/* Setup: one "Challenger name" field, about as wide as 30 characters; the streak button in gold outline until chosen */
.streak-name-field { max-width: 24rem; margin-bottom: 0.8rem; }
.btn-streak:not(.btn-primary) { color: var(--gold); border-color: var(--gold-dark); font-weight: 600; }
@media (hover: hover) { .btn-streak:not(.btn-primary):hover:not(:disabled) { background: rgba(245, 197, 24, 0.12); } }
/* "Streak leaderboard" in the streak setup: a gold, glowing call to action next to the plain Back button */
.btn-leaderboard {
  color: var(--gold);
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.22), rgba(245, 197, 24, 0.06));
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.35);
  font-weight: 700;
}
@media (hover: hover) { .btn-leaderboard:hover:not(:disabled) { background: rgba(245, 197, 24, 0.3); box-shadow: 0 0 18px rgba(245, 197, 24, 0.55); } }

/* Question screen in streak mode (game.js sets .streak): the streak panel takes the scoring
   panel's column; there is no answer block and no Pause/Reset. Fits 1366x768 (D-30). */
.question.streak .scoring,
.question.streak .answer-block,
.question.streak .timer-controls { display: none; }
.streak-panel {
  min-width: 0;
  padding: 1.1rem 1.4rem 1.3rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.streak-panel[hidden] { display: none; }
.streak-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.3rem; }
.streak-name {
  min-width: 0;
  margin: 0;
  padding: 0.2rem 0.6rem;
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  background: var(--panel-2);
  border-left: 6px solid var(--border);
  border-radius: 4px;
}
.streak-count-line { margin: 0; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.streak-count { margin-left: 0.3rem; color: var(--gold); font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.streak-panel .hint { margin: 0 0 0.8rem; }
/* The 3 choices: big buttons with the .choice look of the 3 choices helper */
.streak-choices { display: grid; gap: 0.6rem; margin: 0 0 0.8rem; padding: 0; list-style: none; }
.streak-choice {
  width: 100%;
  padding: 0.7rem 1rem;
  color: var(--text);
  font-size: clamp(1.15rem, 1.8vw, 1.7rem);
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) { .streak-choice:hover:not(:disabled) { border-color: var(--gold); background: #24306a; } }
.streak-choice:disabled { cursor: default; opacity: 0.5; }
.streak-choice.is-right { opacity: 1; color: #c9f5dc; background: var(--success-bg); border-color: var(--success); }
.streak-choice.is-wrong { opacity: 1; color: #ffd0d0; background: var(--danger-bg); border-color: var(--danger); }
.streak-feedback { min-height: 1.45em; margin: 0 0 0.8rem; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.streak-feedback.is-good { color: var(--success); }
.streak-feedback.is-bad { color: var(--danger); }
.streak-panel .btn-block + .btn-block { margin-top: 0.6rem; }

/* Leaderboard (US-34): compact rows so the headline, 10 rows and the buttons fit 1366x768 */
.leaderboard { max-width: 46rem; margin: 0 auto; text-align: center; }
.leaderboard h2:focus { outline: none; }
.lb-headline {
  margin: 0.2rem 0 0.3rem;
  color: var(--gold);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.lb-headline[hidden], .lb-rank[hidden] { display: none; }
.lb-rank { margin: 0 0 0.8rem; font-size: 1.1rem; }
.lb-list { gap: 0.35rem; margin-bottom: 0.4rem; }
.lb-list .result-row { padding: 0.25rem 0.9rem; border-left-width: 6px; }
.lb-list .result-rank, .lb-list .result-name { font-size: 1.1rem; line-height: 1.35; }
.lb-meta { color: var(--muted); font-size: 0.95rem; white-space: nowrap; }
.lb-list .is-me .lb-meta { color: var(--text); }
.lb-empty { padding: 0.6rem; color: var(--muted); text-align: center; }

/* Ads (D-41): AdSense banner under the Streak leaderboard buttons, well apart from them so it is never
   clicked by mistake. No reserved height: nothing sits below it, so a late ad moves nothing (D-30). */
.ad-slot { margin: 1.6rem auto 0; padding-top: 0.6rem; border-top: 1px solid var(--border); text-align: center; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; } /* no ad to show: no empty box */
.ad-label { display: block; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Phones (portrait, up to 600px wide) ----------
   The game targets laptops and projectors (D-30). On a phone: less padding, the setup label above
   its field, two score cards per row, and timer and scoring rows rearranged so nothing is squeezed. */
@media (max-width: 600px) {
  .page-header { padding: 0.6rem 0.9rem; }
  h1 { font-size: 1.5rem; }
  .game-main { padding: 0.9rem 0.75rem 0.75rem; }
  .setup-block { padding: 0.7rem 0.8rem 0.9rem; }
  .setup-pair { flex-direction: column; gap: 0; }
  .new-banner { gap: 0.5rem; padding: 0.5rem 0.7rem; font-size: 0.95rem; }
  .entry-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .entry-row .entry-label { grid-column: 1 / -1; }
  .entry-row .field-error { grid-column: 2 / -1; }

  /* Board: tighter gaps; names in normal case are narrower than in capitals */
  .board-bar { margin-bottom: 0.5rem; }
  /* rows at least 48px tall (US-40 touch targets); a lower category row and less space above the
     scoreboard pay for it, so a full board scrolls no more than before */
  .board { --gap: 0.3rem; --cat-h: 2.6rem; --row-min: 48px; --board-w: calc(100vw - 1.5rem); }
  .board-cat { padding: 0.3rem 0.15rem; text-transform: none; letter-spacing: 0; }
  .board-cell { padding: 0.15rem; }
  .scoreboard-list { gap: 0.5rem; margin-top: 0.3rem; }
  /* tight padding: the 48px +/- buttons (US-40) then make a card no taller, so the board keeps its room */
  .score-card { flex-basis: 8.5rem; row-gap: 0.1rem; padding: 0.15rem 0.5rem; }
  .score-value { font-size: 1.35rem; }
  .score-btn { width: 48px; height: 48px; }

  /* Question: the timer buttons get their own line so the bar stays visible */
  .question-layout { gap: 0.9rem; }
  .question-main, .scoring { padding: 0.9rem 0.9rem 1rem; }
  .question-image { height: clamp(6rem, 30vh, 14rem); margin-bottom: 0.8rem; }
  .timer { grid-template-columns: auto minmax(0, 1fr); }
  .timer-controls { grid-column: 1 / -1; }
  .timer-controls .btn { flex: 1; }
  /* Scoring row: name, helper chips and score on top, Correct and Wrong side by side below */
  .srow-name { flex-basis: calc(100% - 13rem); } /* room for three 48px helper chips (US-40) */
  .srow .btn { flex: 1 1 0; align-self: stretch; padding: 0.4rem 0.3rem; font-size: 0.9rem; white-space: normal; }
  /* 3 choices: one per line, so short names are never split mid-word in narrow columns */
  .question-image:not([hidden]) ~ .question-choices,
  .question-main.has-choices .question-image[hidden] ~ .question-choices.is-short { grid-template-columns: 1fr; }

  .result-row { gap: 0.5rem; padding: 0.5rem 0.7rem; }
  .result-name { font-size: 1.1rem; }
  .result-score { font-size: 1.4rem; }

  /* Streak: the panel stacks under the question (960px rule); the leaderboard date goes on its own line */
  .streak-panel { padding: 0.9rem 0.9rem 1rem; }
  .streak-choice { min-height: 48px; padding: 0.6rem 0.8rem; }
  .lb-list .result-row { flex-wrap: wrap; gap: 0 0.5rem; padding: 0.35rem 0.7rem; }
  .lb-list .result-name { flex-basis: calc(100% - 3rem); }
  .lb-meta { margin-left: 2.7rem; white-space: normal; }

  /* Touch targets (US-40): buttons, fields and other small controls are at least 48px on phones
     (Android guideline). The board cells keep their size, so the board still fits 375x812 (D-30).
     Header links: vertical padding on an inline link enlarges the tap area without moving anything.
     Text links inside a sentence (the setup intro) are exempt, as WCAG 2.5.8 allows. */
  .page-header .nav-link { padding: 0.8rem 0.15rem; }
  .site-footer nav a { min-height: 48px; padding: 0.8rem 0.3rem; } /* footer links (US-41): same 48px rule */
  .game .btn, .game input[type="text"], .game input[type="number"] { min-height: 48px; }
  .mode-option span { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .cat-label { min-height: 48px; }
  .swatch { width: 48px; height: 48px; }
  .helper-chip { min-width: 48px; height: 48px; font-size: 0.8rem; }
}