/*
 * Crossword Hub
 * Layout: a broadsheet front page. Centred serif masthead over a hairline-ruled
 * dateline; today's puzzles lead, then the week, then genre sections. The
 * solving desk puts the grid left and two clue columns right, newspaper style.
 */
:root {
  /* The 1913 newspaper meets a vintage board game: parchment, printer's ink,
     forest green, mustard for rewards and coral for the Arcade. */
  --paper: #efe5cc;
  --card: #f7efdc;
  --gold: #e3b64c;
  --navy: #2a241c;
  --midnight: #2a241c;
  --primary: #2f5a43;
  --on-primary: #f7efdc;
  --ink: #2a241c;
  --ink-soft: #5c5141;
  --rule: #d3c4a0;
  --wash: #e7dcc2;
  --accent: #a84a35;
  --cell: #fbf5e6;
  --block: #2a241c;
  --board: #2a241c; /* the dark board behind the grid: every non-letter square */
  --grid-line: #2a241c;
  --thumb-bg: #2a241c;
  --thumb-cell: #fbf5e6;
  --hl-word: #c6dce6;
  --hl-cell: #edc65c;
  --hl-cross: #e6ebe2;
  --on-hl-cell: #2a241c;
  --wrong: #a83224;
  --revealed: #2b5c8a;
  --pencil: #8a8170;
  --good: #2f5a43;
  --assist: #8a6512;
  --on-ink: #f7efdc;
  --forest-deep: #1f3f2f;
  --mustard: #e3b64c;
  --mustard-deep: #b98a22;
  --coral: #da6a4f;
  --coral-deep: #a84a35;
  --grain-opacity: 1;
  --shadow: 0 10px 40px rgba(42, 36, 28, 0.22);
  --font-display: 'Instrument Serif', 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-head: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui: 'Public Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --radius: 4px;
  --max: 1240px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #1c1915;
    --card: #26221c;
    --gold: #e2b54e;
    --navy: #2e2921;
    --midnight: #12100c;
    --primary: #8cc0a1;
    --on-primary: #142019;
    --ink: #efe6d3;
    --ink-soft: #b8ad98;
    --rule: #3d362c;
    --wash: #2e2921;
    --accent: #e8846b;
    --cell: #2e2921;
    --block: #0b0a08;
    --board: #0b0a08;
    --grid-line: #9c9078; /* light outlines so squares stand out from the board */
    --thumb-bg: #0b0a08;
    --thumb-cell: #9c9078;
    --hl-word: #3e5c6b;
    --hl-cell: #c9a23a;
    --hl-cross: #353029;
    --on-hl-cell: #14110d;
    --wrong: #ff7a66;
    --revealed: #8fb8e0;
    --pencil: #9a917f;
    --good: #8cc0a1;
    --assist: #e6b04a;
    --on-ink: #1c1915;
    --forest-deep: #5f947a;
    --mustard: #e2b54e;
    --mustard-deep: #a8801f;
    --coral: #e8846b;
    --coral-deep: #b9573f;
    --grain-opacity: 0.35;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --paper: #1c1915;
  --card: #26221c;
  --gold: #e2b54e;
  --navy: #2e2921;
  --midnight: #12100c;
  --primary: #8cc0a1;
  --on-primary: #142019;
  --ink: #efe6d3;
  --ink-soft: #b8ad98;
  --rule: #3d362c;
  --wash: #2e2921;
  --accent: #e8846b;
  --cell: #2e2921;
  --block: #0b0a08;
  --board: #0b0a08;
  --grid-line: #9c9078; /* light outlines so squares stand out from the board */
  --thumb-bg: #0b0a08;
  --thumb-cell: #9c9078;
  --hl-word: #3e5c6b;
  --hl-cell: #c9a23a;
  --hl-cross: #353029;
  --on-hl-cell: #14110d;
  --wrong: #ff7a66;
  --revealed: #8fb8e0;
  --pencil: #9a917f;
  --good: #8cc0a1;
  --assist: #e6b04a;
  --on-ink: #1c1915;
  --forest-deep: #5f947a;
  --mustard: #e2b54e;
  --mustard-deep: #a8801f;
  --coral: #e8846b;
  --coral-deep: #b9573f;
  --grain-opacity: 0.35;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
[hidden] { display: none !important; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--revealed); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
  z-index: 100;
}
.skip-link:focus { left: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-soft); }

.kicker {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--wash); }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary); opacity: 0.9; }
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--accent); }

/* ---------- Install prompt ---------- */
.install-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--wash);
}
.install-card[hidden] { display: none; }
.install-card img { border-radius: 11px; }
.install-title { margin: 0 0 2px; font-weight: 800; }
.install-text { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.install-actions { display: flex; align-items: center; gap: 12px; }
@media (max-width: 560px) {
  .install-card { grid-template-columns: auto minmax(0, 1fr); }
  .install-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
}
.icon-btn:hover { background: var(--wash); }
.icon-btn svg, .tool svg, .timer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.segmented {
  display: inline-flex;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
}
.segmented button[aria-checked='true'] { background: var(--primary); color: var(--on-primary); }

/* ---------- Masthead ---------- */
.masthead { background: var(--card); border-bottom: 1px solid var(--rule); padding-inline: 16px; }
.masthead-bar {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 28px;
  padding-block: 12px;
}
.masthead-nav { display: flex; gap: 4px; }
.masthead-nav button {
  border: 0;
  background: none;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
}
.masthead-nav button:hover { background: var(--wash); }
.masthead-nav button[aria-current='page'] { background: var(--primary); color: var(--on-primary); }
.masthead-nav svg, .masthead-nav .nav-stats { display: none; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.logo-mark { width: 38px; height: 38px; flex: 0 0 auto; }
.masthead-tools { display: flex; justify-content: flex-end; gap: 2px; }
.dateline {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a6a12;
}
:root[data-theme='dark'] .dateline { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .dateline { color: var(--gold); } }

/* Menus */
.menu { position: relative; }
.menu-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 170px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.menu-right .menu-list { left: auto; right: 0; }
.menu-list > button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 9px 12px;
  border-radius: 3px;
  font-size: 0.92rem;
}
.menu-list > button:hover { background: var(--wash); }
.settings-panel { width: 290px; padding: 16px; display: grid; gap: 10px; }
.panel-label { margin: 4px 0 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.settings-panel .segmented { justify-self: start; }
.switch { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }

/* ---------- Views ---------- */
main { flex: 1; }
.view { max-width: var(--max); margin: 0 auto; padding: 32px 16px 64px; }

.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.section-title { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: 1.85rem; line-height: 1.15; }
.section-head .section-title { margin: 0; }
.section-deck { margin: 6px 0 18px; max-width: 62ch; color: var(--ink-soft); }
.home-section { margin-top: 56px; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.hero-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.05; letter-spacing: -0.015em; }
.streak-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--rule);
  font-size: 0.92rem;
}
.streak-pill span { color: var(--ink-soft); }
.streak-pill .flame { width: 20px; height: 20px; color: #b5651d; }

/* Today */
.today { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
}
.feature-daily { border-color: var(--ink); }
.feature h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.06; }
.feature-mini h2 { font-size: 1.7rem; }
.feature .deck { margin: 10px 0 0; color: var(--ink-soft); max-width: 46ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; padding: 0; list-style: none; }
.chips li { padding: 5px 12px; border-radius: 999px; background: var(--wash); font-size: 0.82rem; font-weight: 700; }
.feature-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-lg { min-height: 48px; padding: 0 26px; font-size: 1rem; }
.feature .status { margin: 12px 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.feature .status.solved { color: var(--good); font-weight: 700; }
.thumb { display: block; background: var(--thumb-bg); border-radius: 10px; }
.feature-daily .thumb { width: 188px; height: 188px; }
.feature-mini .thumb { width: 96px; height: 96px; }

/* Brutal Challenge */
.brutal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 30px 32px;
  border-radius: 18px;
  background: var(--midnight);
  color: #f7f4ec;
}
.brutal-copy { flex: 1 1 420px; }
.brutal-kicker { margin: 0 0 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #e0b13d; }
.brutal h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; }
.brutal-copy p:not(.brutal-kicker) { margin: 10px 0 0; color: #c9cfdd; max-width: 62ch; }
.brutal-copy .brutal-status { color: #e0b13d; font-weight: 700; }
.btn-gold { background: #e0b13d; color: #1b2540; border-color: #e0b13d; }
.btn-gold:hover { background: #ecc35a; border-color: #ecc35a; }

/* Continue playing */
.continue-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.continue-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  text-align: left;
}
.continue-card:hover { border-color: var(--ink); }
.continue-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.continue-title { font-weight: 800; font-size: 1.05rem; }
.continue-card .bar { display: block; height: 6px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.continue-card .bar i { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.continue-meta { font-size: 0.82rem; color: var(--ink-soft); }

/* Trending now */
.trending-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.trend-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 168px;
  padding: 20px;
  border: 0;
  border-radius: 16px;
  color: #f7f4ec;
  text-align: left;
}
.trend-card .icon { width: 30px; height: 30px; color: #e0b13d; }
.trend-card > span { display: grid; gap: 4px; }
.trend-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #e0b13d; }
.trend-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.trend-card:hover .trend-title { text-decoration: underline; text-underline-offset: 3px; }

/* Week strip */
.week-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.week-strip button {
  width: 100%;
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--card);
  text-align: left;
}
.week-strip button:hover:not(:disabled) { border-color: var(--ink); }
.week-strip button:disabled { opacity: 0.45; }
.week-strip .day { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.week-strip .level { font-family: var(--font-display); font-size: 1.05rem; }
.week-strip .mark { margin-top: 6px; font-size: 0.78rem; color: var(--ink-soft); }
.week-strip .mark.solved { color: var(--good); font-weight: 700; }
.week-strip .mark.assisted { color: var(--assist); font-weight: 700; }
.week-strip .is-today button { border: 2px solid var(--ink); padding: 11px; }

/* Genres */
.category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.category-tabs button {
  border: 1px solid var(--rule);
  background: var(--card);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
}
.category-tabs button[aria-selected='true'] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.category-tabs .count { font-weight: 500; margin-left: 6px; opacity: 0.75; }
.genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.genre-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  text-align: left;
}
.genre-card:hover { border-color: var(--ink); }
.genre-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.genre-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #f7f4ec; }
.genre-card h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.genre-card p { margin: 4px 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.genre-card .meta { margin-top: 8px; font-size: 0.75rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.genre-card .meta .best { color: var(--good); font-weight: 700; }

/* Your stats */
.home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 22px; border: 1px solid var(--rule); border-radius: 18px; background: var(--card); margin-top: 16px; }
.home-stats div { display: grid; gap: 2px; }
.home-stats b { font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.home-stats span { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- Archive ---------- */
.page-head { padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.page-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; }
.page-head .section-deck { margin-bottom: 0; }
.archive-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 14px; }
.month-nav { display: flex; align-items: center; gap: 8px; }
.month-nav h2 { margin: 0; min-width: 11ch; text-align: center; font-family: var(--font-display); font-size: 1.35rem; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar .dow { padding: 4px 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.calendar button {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.calendar button:hover:not(:disabled) { border-color: var(--ink); }
.calendar button:disabled { opacity: 0.35; }
.calendar button.today { border: 2px solid var(--ink); }
.calendar .num { position: absolute; top: 6px; left: 8px; font-size: 0.8rem; font-weight: 700; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--rule); vertical-align: middle; }
.calendar .dot { width: 20px; height: 20px; margin-top: 8px; }
.dot.solved { background: var(--good); border-color: var(--good); }
.dot.assisted { background: var(--assist); border-color: var(--assist); }
.dot.progress { border-color: var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 18px 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.legend li { display: flex; align-items: center; gap: 8px; }

/* ---------- Game ---------- */
#game-view { padding-top: 16px; }
body.in-game .dateline { display: none; }
.puzzle-head { padding-bottom: 12px; }
.puzzle-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.1; }
.puzzle-meta { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.92rem; }

.toolbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: var(--card);
}
.timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.timer:hover { background: var(--wash); }
.timer.hidden-time #timer-text { display: none; }
.toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-weight: 700;
  font-size: 0.9rem;
}
.tool:hover { background: var(--wash); }
.tool[aria-pressed='true'] { background: var(--primary); color: var(--on-primary); }
.tool-primary { margin-left: 8px; border: 1px solid var(--ink); }
.tool.on { background: var(--primary); color: var(--on-primary); }
.menu-list .menu-toggle { border-top: 1px solid var(--rule); font-weight: 700; }

.game-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 16px;
}
.board-col { min-width: 0; }

.clue-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  margin-bottom: 12px;
  padding: 6px 4px;
  background: var(--hl-cross);
  border-radius: var(--radius);
}
.clue-bar p { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.clue-bar strong { margin-right: 10px; font-weight: 800; }
.clue-nav { border: 0; background: none; width: 36px; height: 40px; font-size: 1.6rem; line-height: 1; border-radius: 999px; }
.clue-nav:hover { background: var(--card); }

.board-wrap { position: relative; overflow-x: auto; }
.board {
  --size: 40px;
  --pad: 6px; /* keep in step with BOARD_PAD in js/app.js */
  display: grid;
  grid-auto-rows: var(--size);
  align-content: start;
  width: max-content;
  margin: 0 auto;
  /* A dark board around and between the words, so every answer reads as a
     clear strip of squares. The extra 1px leaves room for the last row's and
     column's closing line (see .cell). */
  padding: var(--pad) calc(var(--pad) + 1px) calc(var(--pad) + 1px) var(--pad);
  background: var(--board);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px rgba(16, 24, 48, 0.12);
  user-select: none;
  touch-action: manipulation;
}
/* Each square is one pixel bigger than its track, so neighbours overlap and
   share a single 1px line: every grid line is the same width. */
.cell {
  position: relative;
  width: calc(var(--size) + 1px);
  height: calc(var(--size) + 1px);
  border: 1px solid var(--grid-line);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(var(--size) * 0.06);
  background: var(--cell);
  font-weight: 600;
  font-size: calc(var(--size) * 0.6);
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}
.cell.block { background: transparent; cursor: default; border: 0; }
.cell.active { background: var(--hl-cell); color: var(--on-hl-cell); }
.cell.active .num { color: var(--on-hl-cell); }
/* Direction marker in the current square: a small arrow pointing across or down. */
.cell .dir { display: none; }
.cell.active .dir {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  pointer-events: none;
  opacity: 0.75;
}
.board:not(.dir-down) .cell.active .dir {
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  border-width: calc(var(--size) * 0.1) 0 calc(var(--size) * 0.1) calc(var(--size) * 0.14);
  border-left-color: var(--on-hl-cell);
}
.board.dir-down .cell.active .dir {
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  border-width: calc(var(--size) * 0.14) calc(var(--size) * 0.1) 0;
  border-top-color: var(--on-hl-cell);
}
.cell .num {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: max(8px, calc(var(--size) * 0.27));
  font-weight: 500;
  line-height: 1;
  color: var(--ink-soft);
  pointer-events: none;
}
/* Small squares (phones, big grids): a tinier number tucked into the corner
   and the letter nudged right and down so the two don't overlap. */
.board.compact .cell { padding: 0 0 0 calc(var(--size) * 0.14); font-size: calc(var(--size) * 0.58); align-items: flex-end; }
.board.compact .cell .letter { line-height: 0.95; }
.board.compact .cell .num { top: 1px; left: 1px; font-size: max(6px, calc(var(--size) * 0.3)); font-weight: 400; letter-spacing: -0.02em; }
.cell.in-cross { background: var(--hl-cross); }
.cell.in-word { background: var(--hl-word); }
.cell.in-word.active { background: var(--hl-cell); }
.cell.pencil .letter { color: var(--pencil); font-weight: 400; }
.cell.wrong .letter { color: var(--wrong); }
.cell.wrong::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--wrong) calc(50% - 1px), var(--wrong) calc(50% + 1px), transparent calc(50% + 1px));
  opacity: 0.7;
  pointer-events: none;
}
.cell.revealed::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 calc(var(--size) * 0.26) calc(var(--size) * 0.26) 0;
  border-color: transparent var(--revealed) transparent transparent;
}
.cell.revealed .letter, .cell.verified .letter { color: var(--revealed); }
.board.solved .cell:not(.block) { animation: settle 0.7s ease both; animation-delay: var(--d, 0ms); }
@keyframes settle {
  0% { background: var(--cell); }
  40% { background: var(--hl-cell); }
  100% { background: var(--cell); }
}
@media (prefers-reduced-motion: reduce) {
  .board.solved .cell:not(.block) { animation: none; }
}

/* ---------- Feedback animations ---------- */
.cell { transition: background-color 0.12s ease; }
.cell.pop .letter { display: inline-block; animation: pop 0.18s ease-out; }
@keyframes pop {
  0% { transform: scale(0.4); opacity: 0.2; }
  70% { transform: scale(1.18); }
  100% { transform: scale(1); opacity: 1; }
}
.cell.shake { animation: shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); z-index: 1; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); background: color-mix(in srgb, var(--wrong) 22%, var(--cell)); }
  40%, 60% { transform: translateX(5px); }
}
.cell.ripple { animation: ripple 0.5s ease both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes ripple {
  0% { transform: translateY(0); }
  35% { transform: translateY(-4px); background: var(--hl-cell); }
  100% { transform: translateY(0); }
}
.view.enter { animation: view-in 0.28s ease-out; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
dialog[open] { animation: dialog-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
dialog[open]::backdrop { animation: fade-in 0.2s ease; }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } }
.btn, .tool, .icon-btn, .masthead-nav button, .clue-nav, .genre-card, .calendar button {
  transition: transform 0.1s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .tool:active, .icon-btn:active, .masthead-nav button:active, .clue-nav:active, .calendar button:active { transform: scale(0.94); }
.genre-card:active { transform: scale(0.98); }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1000; }

/* Puzzle progress */
.puzzle-progress { height: 4px; margin-bottom: 10px; border-radius: 2px; background: var(--wash); overflow: hidden; }
.puzzle-progress i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 2px; transition: width 0.25s ease; }
.puzzle-progress.done i { background: #4caf7a; }

/* Daily streak badge */
.streak-chip {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, #f2c230 30%, transparent);
  color: var(--ink);
  letter-spacing: 0.04em;
  animation: chip-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes chip-in { from { transform: scale(0.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .view.enter, dialog[open], dialog[open]::backdrop, .streak-chip { animation: none; }
  .btn:active, .tool:active, .icon-btn:active, .masthead-nav button:active, .clue-nav:active, .calendar button:active, .genre-card:active { transform: none; }
}

.pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--rule);
}
.pause-title { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.6rem; }
.game-layout.paused .clues { filter: blur(6px); pointer-events: none; user-select: none; }

.done-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-weight: 700;
}
.done-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.done-actions .btn { min-height: 38px; padding: 0 16px; font-size: 0.88rem; }

/* Clue lists */
.clues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  position: sticky;
  top: 72px;
}
.clue-list { min-width: 0; }
.clue-list h2 {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.clue-list ol {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.clue-list li {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  gap: 4px;
  padding: 7px 8px 7px 6px;
  border-left: 6px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.38;
}
.clue-list li strong { font-weight: 800; }
.clue-list li:hover { background: var(--wash); }
.clue-list li.cross { border-left-color: var(--hl-word); }
.clue-list li.current { background: var(--hl-word); border-left-color: var(--hl-word); }
.clue-list li.done .text { color: var(--ink-soft); }
/* A tick beside finished words, in the list and in the clue bar. */
.clue-list li.done strong::after, .clue-bar.complete strong::after {
  content: '✓';
  margin-left: 4px;
  color: var(--good);
  font-size: 0.85em;
}
.clue-list .tag {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* On-screen keyboard (touch devices) */
/* Hidden text box that brings up the device's own keyboard on phones and
   tablets. It sits on the selected square so the page scrolls to it. */
.type-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px; /* stops iOS zooming in on focus */
  caret-color: transparent;
  pointer-events: none;
}
@media (pointer: coarse) {
  .footer-keys { display: none; }
  /* Keep the current clue in view while the keyboard is open. */
  .clue-bar { position: sticky; top: 0; z-index: 6; }
}

/* ---------- Dialogs ---------- */
dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(10, 10, 10, 0.5); }

.dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.dialog-close:hover { background: var(--wash); color: var(--ink); }
.win, .stats, .account, .privacy, .name-form, .room-invite { padding: 34px 28px 26px; }
.win { text-align: center; }
.win h2, .stats h2, .privacy h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.win-time { margin: 14px 0 0; font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.win-text { margin: 4px 0 0; color: var(--ink-soft); }
.win-stats { display: flex; justify-content: center; gap: 28px; margin: 18px 0 0; }
.win-stats:empty { display: none; }
.win-stats div { display: grid; }
.win-stats b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.win-stats span { font-size: 0.75rem; color: var(--ink-soft); }
.win-actions { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 14px; }
.win-next { margin: 14px 0 0; font-size: 0.86rem; color: var(--ink-soft); }
.win-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.win-share .btn { justify-content: center; }
.btn-whatsapp { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.btn-whatsapp:hover { background: #197a42; border-color: #197a42; }
.consent { position: fixed; z-index: 40; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - 32px)); display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow); font-size: 0.88rem; }
.consent p { margin: 0; }
.consent-actions { display: flex; justify-content: flex-end; gap: 8px; }
.panel-link { display: block; margin-top: 10px; }
.privacy ul { margin: 16px 0 0; padding-left: 18px; display: grid; gap: 10px; font-size: 0.92rem; }
.challenge-banner { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); font-size: 0.9rem; font-weight: 600; }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 14px; margin: 20px 0 24px; padding: 16px 0; border-block: 1px solid var(--rule); }
.stat-tiles div { display: grid; gap: 2px; }
.stat-tiles b { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-tiles span { font-size: 0.78rem; color: var(--ink-soft); }
.stats h3 { margin: 0 0 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
/* The No-Hint Club */
.club-lede { margin: -4px 0 0; font-size: 0.86rem; color: var(--ink-soft); }
#club-tiles { margin-top: 12px; }
.badges { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0 0 24px; padding: 0; }
.badge { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; color: var(--ink-soft); }
.badge .icon { flex: none; width: 20px; height: 20px; }
.badge span { display: grid; gap: 1px; min-width: 0; }
.badge b { font-size: 0.88rem; color: var(--ink); }
.badge small { font-size: 0.74rem; }
.badge.earned { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.badge.earned .icon { color: var(--gold); }
.fav-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 6px; }
.fav-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.92rem; }
.fav-list li span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.fav-list .empty { color: var(--ink-soft); }
.weekday-table { display: grid; gap: 6px; }
.weekday-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 4.5em; align-items: center; gap: 10px; font-size: 0.88rem; }
.weekday-row .bar { height: 10px; background: var(--wash); border-radius: 2px; overflow: hidden; }
.weekday-row .bar i { display: block; height: 100%; background: var(--ink); }
.weekday-row .t { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* Account */
.account-btn { position: relative; }
.account-btn[hidden] { display: none; }
.account-btn.signed-in svg { display: none; }
.account-btn .avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.85rem;
  font-weight: 800;
}
.account-btn .avatar[hidden] { display: none; }
.account h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.account-lede { margin: 0 0 18px; color: var(--ink-soft); }
.account .btn { width: 100%; }
.btn-google svg { width: 18px; height: 18px; }
.account-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--ink-soft); font-size: 0.82rem; }
.account-or::before, .account-or::after { content: ''; flex: 1; border-top: 1px solid var(--rule); }
#account-form { display: grid; gap: 12px; }
#account-form label { display: grid; gap: 4px; font-size: 0.82rem; font-weight: 700; }
#account-form input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* stops iOS zooming in */
  font-weight: 400;
}
#account-form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.account-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 14px 0 0; font-size: 0.88rem; }
.account-who { margin: 0 0 4px; font-weight: 700; overflow-wrap: anywhere; }
.account-status { margin: 0 0 18px; color: var(--ink-soft); font-size: 0.9rem; }
.account-note { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.82rem; text-align: center; }
.account-message { margin: 12px 0 0; color: var(--wrong); font-size: 0.9rem; }
.account-message:empty { display: none; }
.account-message.ok { color: var(--ink); }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  box-shadow: var(--shadow);
}

/* Footer */
.site-footer {
  padding: 28px 16px 34px;
  background: var(--midnight);
  color: #c9cfdd;
  text-align: center;
  font-size: 0.85rem;
}
.site-footer p { margin: 4px 0; }
.site-footer .footer-brand { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: #f7f4ec; margin-bottom: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .clues { grid-template-columns: 1fr; }
  .clue-list ol { max-height: 34vh; }
}
@media (max-width: 900px) {
  .today { grid-template-columns: 1fr; }
  .week-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Grid above the clues when upright; side by side (the default) on tablets
   and phones held sideways. Keep in step with sideBySide in js/app.js. */
@media (max-width: 900px) and (orientation: portrait), (max-width: 699px) {
  .game-layout { grid-template-columns: 1fr; }
  .clues { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clue-list ol { max-height: none; }
}
@media (max-width: 900px) and (min-width: 700px) and (orientation: landscape) {
  .game-layout { gap: 18px; }
  .clues { grid-template-columns: 1fr; top: 64px; max-height: calc(100vh - 80px); overflow: auto; }
  .clue-list ol { max-height: none; }
}
@media (max-width: 640px) {
  .masthead-bar { grid-template-columns: 1fr auto; padding-block: 12px 6px; }
  /* App-style tab bar along the bottom of the screen. */
  .masthead-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    justify-content: space-around;
    gap: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule);
  }
  .masthead-nav button, .masthead-nav .nav-stats {
    display: grid;
    justify-items: center;
    gap: 3px;
    flex: 1;
    padding: 4px 0;
    border: 0;
    border-radius: 10px;
    font-size: 0.7rem;
    color: var(--ink-soft);
  }
  .masthead-nav svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .masthead-nav button[aria-current='page'] { color: var(--ink); background: none; }
  .masthead-nav button:hover { background: none; }
  .masthead-nav button[aria-current='page'] svg { stroke-width: 2.4; }
  .masthead-tools [data-nav="stats"] { display: none; }
  body:not(.in-game) { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  body:not(.in-game) .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body:not(.in-game) .consent { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .wordmark { font-size: 1.35rem; gap: 9px; }
  .logo-mark { width: 32px; height: 32px; }
  .view { padding-top: 20px; }
  .home-section { margin-top: 40px; }
  .section-title { font-size: 1.5rem; }
  .feature { grid-template-columns: 1fr; padding: 20px; }
  .brutal { padding: 22px 20px; }
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px; }
  /* Rows that swipe sideways on phones. */
  .continue-row, .trending-row { display: flex; overflow-x: auto; margin-right: -16px; padding-right: 16px; scroll-snap-type: x mandatory; }
  .continue-card { flex: 0 0 230px; scroll-snap-align: start; }
  .trend-card { flex: 0 0 210px; min-height: 150px; scroll-snap-align: start; }
  .feature .thumb { display: none; }
  .week-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clues { grid-template-columns: 1fr; }
  .toolbar { gap: 4px; }
  .tool { padding: 0 9px; }
  .tool span { display: none; }
  .tool-primary { margin-left: 0; }
  .clue-bar { position: sticky; top: 57px; z-index: 15; margin-bottom: 10px; }
  .calendar { gap: 4px; }
  .calendar button { aspect-ratio: 1; }
  body.in-game .masthead-nav { display: none; }
  body.in-game .puzzle-meta { display: none; }
  body.in-game .puzzle-head .kicker { margin-bottom: 2px; }
  .calendar .dot { width: 14px; height: 14px; margin-top: 12px; }
  .calendar .num { top: 3px; left: 5px; font-size: 0.72rem; }
  .win, .stats, .account, .privacy, .name-form, .room-invite { padding: 30px 20px 22px; }
}

/* Genre and collection pages (play/, made by tools/build-pages.js) */
.landing-bar { padding: 14px 16px; border-bottom: 1px solid var(--rule); background: var(--card); }
.landing-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }
.landing-main { max-width: 760px; margin: 0 auto; padding: 32px 16px 24px; }
.landing-main h1 { margin: 6px 0 10px; font-family: var(--font-display); font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; }
.landing-main h2 { margin: 32px 0 10px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.landing-lede { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 20px; }
.landing-levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.landing-levels .btn { text-decoration: none; color: var(--ink); }
.landing-levels .btn-primary { color: var(--on-primary); }
.landing-note, .landing-small { color: var(--ink-soft); font-size: 0.92rem; }
.landing-small { margin-top: 28px; font-size: 0.82rem; }
.landing-clues { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.landing-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.landing-links a { display: inline-block; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--card); }
.landing-links a:hover { border-color: var(--ink); }
.landing-foot { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.9rem; }
.landing-foot a { color: var(--ink); }

/* Multiplayer: Help me solve */
.room-start { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.room-start:hover { border-color: var(--ink); }
.room-start svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.room-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); }
.room-players { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.room-player { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--peer) 14%, transparent); font-size: 0.82rem; font-weight: 700; max-width: 100%; }
.room-player i, .room-list i { width: 10px; height: 10px; border-radius: 50%; background: var(--peer); flex: none; }
.room-player.away { opacity: 0.55; }
.room-status { font-size: 0.82rem; color: var(--ink-soft); }
.btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.cell.peer { outline: 3px solid var(--peer); outline-offset: -3px; z-index: 1; }
.cell.peer-word { box-shadow: inset 0 -4px 0 var(--peer); }
.clue-list .peer-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.clue-list .peer-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--peer); }
.name-form, .room-invite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.room-badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--primary); color: var(--on-primary); }
.room-badge svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.name-form h2, .room-invite h2 { margin: 0; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.15; }
.room-lede { margin: -6px 0 0; color: var(--ink-soft); }
.name-field { display: grid; gap: 6px; }
.name-field span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.name-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1.05rem; font-weight: 600; }
.name-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.name-note { margin: -6px 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.name-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.name-actions .btn { justify-content: center; }
.room-link-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--paper); }
.room-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; color: var(--ink-soft); }
.room-copy { flex: none; padding: 8px 14px; border: 0; border-radius: 9px; background: var(--primary); color: var(--on-primary); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.btn-wide { width: 100%; justify-content: center; gap: 10px; }
.btn-whatsapp svg { width: 22px; height: 22px; fill: currentColor; }
.room-players-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rule); }
.room-players-head h3 { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.room-players-head span { font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.room-list li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; }
.room-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--peer); color: #fff; font-weight: 800; font-size: 0.95rem; }
.room-avatar.away { opacity: 0.45; }
.room-name { flex: 1; min-width: 0; font-weight: 600; }
.room-name em { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--wash); font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); vertical-align: 1px; }
.room-name small { margin-left: 6px; color: var(--ink-soft); font-weight: 500; }
.room-seats-free { display: flex; flex: none; width: 34px; justify-content: center; }
.room-seats-free i { width: 14px; height: 14px; margin-left: -6px; border-radius: 50%; border: 1.5px dashed var(--ink-soft); background: var(--card); }
.room-seats-free i:first-child { margin-left: 0; }
#game-view.joining .toolbar, #game-view.joining .game-layout, #game-view.joining .room-bar, #game-view.joining .room-start, #game-view.joining .puzzle-meta { display: none; }
.room-empty .room-name { color: var(--ink-soft); font-weight: 500; }
.room-remove { font-size: 0.85rem; }
.room-foot { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 0.82rem; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.room-leave { color: var(--wrong); font-size: 0.85rem; }

/* Phones held upright: the clue bar docks to the bottom, above the game's
   own letter keys (--dock-bottom is set in js/app.js). */
.sheet-hint { display: none; }
.phone-keys { display: none; }
@media (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  .clue-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--dock-bottom, 0px);
    z-index: 30;
    margin: 0;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    min-height: 68px;
    padding: 6px;
    border-radius: 0;
    border-top: 1px solid var(--rule);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    touch-action: pan-y;
  }
  .clue-bar .clue-nav { width: 52px; height: 52px; font-size: 2rem; background: var(--card); }
  .clue-bar p { cursor: pointer; padding: 4px 2px; }
  body.in-game .phone-keys:not([hidden]) {
    display: grid;
    gap: 7px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
    background: var(--wash);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }
  .keys-row { display: flex; justify-content: center; gap: 5px; }
  .keys-row button {
    flex: 0 1 calc((100% - 45px) / 10);
    min-width: 0;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: var(--card);
    color: var(--ink);
    font: 600 1.25rem var(--font-ui);
    box-shadow: 0 1px 0 var(--rule);
    -webkit-tap-highlight-color: transparent;
  }
  .keys-row button:active { background: var(--hl-word); color: var(--on-hl-cell); }
  .keys-row .key-wide { flex-basis: calc((100% - 45px) / 10 * 1.5); background: var(--rule); font-size: 1.3rem; }
  .sheet-hint { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .sheet-hint::after { content: ' ▴'; }
  /* Room below the grid for the clue bar and, while it's open, the device
     keyboard, so the bottom rows can always be scrolled up above both. */
  body.in-game #game-view { padding-bottom: calc(96px + var(--dock-bottom, 0px) + env(safe-area-inset-bottom, 0px)); }
}

/* The clue panel (phones) */
dialog.sheet { width: 100%; max-width: 560px; max-height: 78vh; margin: auto auto 0; padding: 0; border-radius: 18px 18px 0 0; }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--card); border-bottom: 1px solid var(--rule); }
.sheet-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.sheet-head .dialog-close { position: static; }
.sheet-lists { padding: 4px 16px 24px; }
.sheet-lists h3 { margin: 16px 0 6px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.sheet-lists ol { list-style: none; margin: 0; padding: 0; }
.sheet-lists li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 6px; padding: 10px 8px; border-radius: 10px; cursor: pointer; font-size: 0.98rem; }
.sheet-lists li strong { font-weight: 800; }
.sheet-lists li.current { background: var(--hl-word); color: var(--on-hl-cell); }
.sheet-lists li.done span { color: var(--ink-soft); }
.sheet-lists li.done strong::after { content: ' ✓'; color: var(--good); }

/* Phones held sideways: little height, so keep the header and tools compact
   and let the grid start near the top. */
@media (orientation: landscape) and (max-height: 520px) {
  body.in-game .masthead-bar { padding-block: 4px; }
  body.in-game .masthead-nav { display: none; }
  body.in-game .puzzle-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 6px; }
  body.in-game .puzzle-head .kicker { margin: 0; }
  body.in-game .puzzle-title { font-size: 1.15rem; }
  body.in-game .puzzle-meta { display: none; }
  body.in-game .room-start { margin-top: 0; padding: 4px 10px; font-size: 0.8rem; }
  body.in-game .toolbar { min-height: 0; padding-block: 2px; }
  body.in-game .game-layout { margin-top: 8px; }
  body.in-game .clues { top: 8px; max-height: calc(100vh - 24px); }
}

/* Zoom for big grids on phones (pinch the grid, or the Zoom tool) */
.board-wrap { touch-action: pan-x pan-y; }
#zoom-btn[aria-pressed='true'] .zoom-plus { display: none; }

/* Gift crosswords: the home card, the builder and the message at the end */
.gift-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: linear-gradient(120deg, var(--card), color-mix(in srgb, var(--gold) 14%, var(--card)));
  color: var(--ink);
  text-align: left;
}
.gift-card:hover { border-color: var(--ink); }
.gift-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: #fffdf8; }
.gift-icon svg, .gift-soon .room-badge svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gift-copy { flex: 1; display: grid; gap: 4px; min-width: 0; }
.gift-copy .kicker { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gift-head { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.gift-deck { color: var(--ink-soft); font-size: 0.92rem; }
.gift-go { font-size: 1.4rem; color: var(--ink-soft); }
.soon-badge { padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 0.66rem; letter-spacing: 0.08em; }
.soon-badge[hidden] { display: none; }
.gift-soon { display: grid; justify-items: start; gap: 10px; padding: 34px 28px 26px; }
.gift-soon .room-badge { background: var(--accent); color: #fffdf8; }
.gift-soon .kicker { margin: 6px 0 0; }
.gift-soon h2 { margin: 0; font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; }
.gift-soon p:not(.kicker) { margin: 0 0 8px; color: var(--ink-soft); }

.gift-form, .gift-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 760px; margin-top: 24px; }
.gift-form[hidden], .gift-result[hidden] { display: none; }
.gift-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field { display: grid; gap: 6px; font-weight: 700; font-size: 0.9rem; }
.field small { font-weight: 500; color: var(--ink-soft); }
.field-wide { grid-column: 1 / -1; }
.field input, .field textarea, .gift-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus, .field textarea:focus, .gift-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.gift-step { margin: 14px 0 0; font-family: var(--font-display); font-size: 1.4rem; }
.gift-help { margin: -6px 0 0; color: var(--ink-soft); font-size: 0.9rem; }
.gift-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gift-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) minmax(0, 2fr) 38px; align-items: center; gap: 8px; }
.gift-num { font-weight: 800; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.gift-answer { text-transform: uppercase; font-weight: 700 !important; letter-spacing: 0.04em; }
.gift-answer::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; }
.gift-row.has-problem input { border-color: var(--wrong); }
.gift-remove { width: 38px; height: 38px; color: var(--ink-soft); }
#gift-add { justify-self: start; }
#gift-add[hidden] { display: none; }
.gift-problems ul { margin: 0; padding: 12px 14px 12px 32px; border-radius: 10px; background: color-mix(in srgb, var(--wrong) 10%, var(--card)); color: var(--ink); font-size: 0.92rem; display: grid; gap: 4px; }
.gift-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gift-result h2 { margin: -8px 0 0; font-family: var(--font-display); font-size: 2rem; }
.gift-result .kicker { margin: 0; }
.gift-result-body { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.gift-result-body > div { flex: 1 1 260px; }
.gift-result-body p { margin: 0 0 10px; }
.gift-thumb { width: 150px; height: 150px; border-radius: 10px; }
.gift-missing { color: var(--ink-soft); font-size: 0.9rem; }
.gift-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gift-result .win-share { margin-top: 0; max-width: 460px; }
.gift-note { margin: 18px 0 0; padding: 16px 18px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 16%, var(--card)); text-align: left; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; }
.gift-note p { margin: 0; }
.gift-note cite { display: block; margin-top: 8px; font-family: var(--font-ui); font-style: normal; font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); }
.gift-note cite::before { content: '— '; }
@media (max-width: 600px) {
  .gift-card { padding: 16px; gap: 14px; }
  .gift-icon { width: 44px; height: 44px; }
  .gift-go { display: none; }
  .gift-fields { grid-template-columns: minmax(0, 1fr); }
  .gift-row { grid-template-columns: minmax(0, 1fr) 38px; grid-template-areas: 'a x' 'c c'; padding: 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); }
  .gift-num { display: none; }
  .gift-answer { grid-area: a; }
  .gift-clue { grid-area: c; }
  .gift-remove { grid-area: x; }
}

/* Crossword Hub Arcade: Clue Blitz and Survival */
.arcade-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.arcade-cards-hub { margin-top: 24px; }
.arcade-mode {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
}
.arcade-mode:hover { border-color: var(--ink); }
.arcade-badge { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: #fffdf8; background: var(--navy); }
/* (The start screens show the mode's ink drawing, with its own colours.) */
.arcade-badge svg { width: 28px; height: 28px; }
.arcade-blitz .arcade-badge { background: #c4870f; }
.arcade-survival .arcade-badge { background: var(--accent); }
.arcade-mode-copy { flex: 1; display: grid; gap: 3px; min-width: 0; }
.arcade-mode-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.1; }
.arcade-mode-tag { color: var(--ink-soft); font-size: 0.9rem; }
.arcade-mode-best { margin-top: 4px; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.arcade-mode-best.live { color: var(--good); }
.arcade-mode-go.done { background: var(--wash); color: var(--ink-soft); }
.arcade-next { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--wash); max-width: 52ch; }
.arcade-next .link-btn { margin-top: 4px; }
.arcade-mode-go { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 0.85rem; }

.arcade-start, .arcade-results { display: grid; justify-items: start; gap: 12px; max-width: 620px; padding: 12px 0 24px; }
.arcade-start[hidden], .arcade-results[hidden], .arcade-play[hidden] { display: none; }
.arcade-start h1, .arcade-results h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.05; }
.arcade-tagline { margin: -4px 0 0; font-size: 1.1rem; color: var(--ink-soft); }
.arcade-rules { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.arcade-best { margin: 0; font-weight: 700; }
.arcade-go { min-width: 200px; justify-content: center; font-size: 1.1rem; padding-block: 14px; }
.arcade-back { margin-bottom: 4px; }

.arcade-play { display: flex; flex-direction: column; gap: 14px; max-width: 620px; margin: 0 auto; padding-top: 8px; }
.arcade-hud { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 10px; padding-bottom: 10px; }
.hud-item { display: grid; justify-items: center; flex: 1; padding: 8px 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--rule); }
.hud-item b { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hud-item span { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.hud-time.low b { color: var(--wrong); }
.hud-combo.hot { border-color: #c4870f; background: color-mix(in srgb, #c4870f 14%, var(--card)); }
.hud-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: var(--wash); overflow: hidden; }
.hud-bar i { display: block; height: 100%; background: #c4870f; transition: width 0.2s linear; }
.hud-lives { display: flex; justify-content: center; align-items: center; gap: 4px; }
.hud-lives .life svg { width: 28px; height: 28px; fill: var(--accent); stroke: var(--accent); stroke-width: 1.5; }
.hud-lives .life.lost svg { fill: none; stroke: var(--rule); }
.arcade-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); }
.arcade-meta { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.arcade-clue { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 5vw, 1.8rem); line-height: 1.25; min-height: 2.5em; }
.arcade-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.arcade-word { display: flex; gap: var(--box-gap, 4px); }
/* --box is set in js/app.js from the space available and the longest word. */
.arcade-box {
  display: grid;
  place-items: center;
  width: var(--box, 34px);
  aspect-ratio: 1;
  border: 2px solid var(--rule);
  border-radius: min(8px, calc(var(--box, 34px) / 4));
  background: var(--paper);
  font-weight: 800;
  font-size: max(11px, calc(var(--box, 34px) * 0.55));
  border-width: clamp(1px, calc(var(--box, 34px) / 16), 2px);
}
.arcade-box.current { border-color: var(--primary); }
.arcade-box.revealed { border-color: var(--wrong); color: var(--wrong); }
.arcade-boxes.shake { animation: arcade-shake 0.35s; }
@keyframes arcade-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .arcade-boxes.shake { animation: none; } }
.arcade-feedback { margin: 0; min-height: 1.4em; text-align: center; font-weight: 700; }
.arcade-feedback.good { color: var(--good); }
.arcade-feedback.bad { color: var(--wrong); }
.arcade-feedback.info { color: var(--ink-soft); }
.arcade-controls { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.arcade-controls .btn { justify-content: center; padding-block: 13px; font-size: 1rem; }
.arcade-keys { display: grid; gap: 7px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.arcade-keys .keys-row { display: flex; justify-content: center; gap: 5px; }
.arcade-keys .keys-row button {
  flex: 0 1 calc((100% - 45px) / 10);
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  font: 600 1.25rem var(--font-ui);
  box-shadow: 0 1px 0 var(--rule);
  -webkit-tap-highlight-color: transparent;
}
.arcade-keys .keys-row button:active { background: var(--hl-word); color: var(--on-hl-cell); }
.arcade-keys .key-wide { flex-basis: calc((100% - 45px) / 10 * 1.5) !important; background: var(--rule) !important; }

.arcade-score { margin: 0; font-size: clamp(2.4rem, 10vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.arcade-pb { margin: -6px 0 0; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 30%, var(--card)); font-weight: 800; }
.arcade-results .win-stats { justify-content: flex-start; flex-wrap: wrap; margin: 0; }
.arcade-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.arcade-recap { width: 100%; margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 12px; }
.arcade-recap summary { cursor: pointer; font-weight: 700; }
.arcade-recap ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; font-size: 0.92rem; }
.arcade-recap li span { color: var(--ink-soft); }
.arcade-recap li.ok b::after { content: ' ✓'; color: var(--good); }
.arcade-recap li.missed b { color: var(--wrong); }

/* While a game is on screen on a phone: no tab bar or footer, so the clue,
   answer and keys fit on one screen. */
@media (max-width: 640px) {
  body.arcade-playing .masthead-nav, body.arcade-playing .site-footer { display: none; }
  body.arcade-playing .masthead-bar { padding-block: 6px; }
  .arcade-mode { padding: 16px; gap: 12px; }
  .arcade-mode-go { display: none; }
  .arcade-play { gap: 10px; }
  .hud-item b { font-size: 1.35rem; }
  .arcade-card { padding: 16px 14px; gap: 12px; }
}
/* Short phone screens (iPhone SE and similar): tighter, so the keys fit. */
@media (max-width: 640px) and (max-height: 700px) {
  body.arcade-playing .masthead-bar { padding-block: 2px; }
  .arcade-play { gap: 8px; padding-top: 2px; }
  .arcade-hud { padding-bottom: 8px; }
  .hud-item { padding: 4px; }
  .hud-item b { font-size: 1.15rem; }
  .hud-lives .life svg { width: 22px; height: 22px; }
  .arcade-card { padding: 12px; gap: 8px; }
  .arcade-clue { font-size: 1.2rem; min-height: 0; }
  .arcade-feedback { min-height: 1.2em; font-size: 0.9rem; }
  .arcade-controls .btn { padding-block: 9px; }
  .arcade-keys { gap: 5px; }
  .arcade-keys .keys-row button { height: 42px; }
}

/* =====================================================================
   Visual refresh: the 1913 newspaper meets a vintage board game.
   Parchment with a faint paper grain, printer's-ink rules, an Instrument
   Serif masthead and headlines, Newsreader for clues and section heads,
   forest green for actions, mustard for rewards, coral for the Arcade.
   ===================================================================== */
html { font-synthesis: none; } /* Instrument Serif has one weight: never fake bold */

/* Paper grain: a tiny tiled noise image, drawn once (no fixed layers). */
body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.16 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] body { background-image: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) body { background-image: none; } }

/* Masthead */
.masthead { background: transparent; border-bottom: 4px double var(--ink); }
.wordmark { gap: 12px; }
.logo-mark { width: 40px; height: 40px; border-radius: 9px; }
.wordmark-text { display: flex; flex-direction: column; align-items: flex-start; }
.wordmark-name { font-family: var(--font-display); font-weight: 400; font-size: 2.15rem; line-height: 0.95; letter-spacing: -0.005em; }
.wordmark-tag { margin-top: 3px; font-family: var(--font-ui); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; }
.masthead-nav button[aria-current='page'] { background: var(--primary); color: var(--on-primary); }

/* Type: Instrument Serif for big titles; Newsreader for smaller heads. */
.hero-title, .page-title, .feature h2, .brutal h2, .gift-head, .arcade-mode-name,
.arcade-start h1, .arcade-results h1, .gift-result h2, .gift-soon h2, .win h2, .stats h2, .privacy h2 {
  font-family: var(--font-display);
  font-weight: 400;
}
.hero-title { font-size: clamp(2.6rem, 6.4vw, 4.2rem); line-height: 0.98; letter-spacing: -0.01em; }
.page-title { font-size: clamp(2.5rem, 6vw, 3.6rem); line-height: 1; }
.feature h2 { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; }
.feature-mini h2 { font-size: 2.1rem; }
.brutal h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.02; }
.win h2, .stats h2, .privacy h2 { font-size: 2.5rem; line-height: 1; }
.genre-card h3, .trend-title, .week-strip .level, .month-nav h2, .site-footer .footer-brand, .gift-step, .name-form h2, .room-invite h2 {
  font-family: var(--font-head);
}
/* Section heads in bold italic, ruled, as on the 1913 page. */
.section-title { font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 1.7rem; }
.home-section > .section-title, .section-head { padding-bottom: 6px; border-bottom: 1px solid var(--ink); margin-bottom: 14px; }
.home-section > .section-title { margin-bottom: 14px; }
.section-head .section-title { border: 0; padding: 0; }
.dateline { color: #7a5a12; } /* mustard, darkened to read on parchment */
:root[data-theme='dark'] .dateline { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .dateline { color: var(--gold); } }
.page-head { border-bottom: 4px double var(--ink); }

/* Buttons: typeset labels with a little press-down depth. */
.btn { border-radius: 8px; border-color: var(--ink); }
.btn-primary { border-color: var(--primary); box-shadow: 0 3px 0 var(--forest-deep); }
.btn-primary:hover { opacity: 1; filter: brightness(1.06); }
.btn-primary:active { box-shadow: 0 1px 0 var(--forest-deep); transform: translateY(2px); }
.btn-gold { background: var(--mustard); border-color: var(--ink); color: #2a241c; box-shadow: 0 3px 0 var(--mustard-deep); }
.btn-gold:hover { background: var(--mustard); filter: brightness(1.05); border-color: var(--ink); }
.segmented button[aria-checked='true'] { background: var(--primary); color: var(--on-primary); }

/* Cards and panels: newsprint with ink borders. */
.feature { border-radius: 12px; border-color: var(--ink); }
.feature-daily { box-shadow: 4px 4px 0 var(--ink); }
.chips li { background: transparent; border: 1px solid var(--ink); }
.thumb { border-radius: 4px; }
.streak-pill { background: var(--mustard); border-color: var(--ink); color: #2a241c; }
.streak-pill span { color: #3b3122; }
.streak-pill .flame { color: #2a241c; }
.brutal { border-radius: 12px; background: var(--midnight); color: #f7efdc; box-shadow: 4px 4px 0 var(--mustard-deep); }
.brutal-kicker, .brutal-copy .brutal-status { color: var(--mustard); }
.brutal-copy p:not(.brutal-kicker) { color: #d8ccb2; }
.continue-card, .week-strip button, .home-stats { border-radius: 10px; border-color: var(--ink); }
.continue-card .bar i { background: var(--primary); }
.trend-card { border-radius: 12px; border: 1px solid var(--ink); color: #f7efdc; }
.trend-card .icon, .trend-kicker { color: var(--mustard); }
.gift-card, .arcade-mode { border-color: var(--ink); border-radius: 12px; }

/* Collections: a card catalogue. The level tabs are a drawer front with
   brass label holders; each genre is an index card with a filing tab and a
   rubber-stamped level. */
.category-tabs { gap: 6px; padding: 8px; border-radius: 8px; background: #6e4528; border: 1px solid var(--ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.category-tabs button { border: 1.5px solid transparent; background: transparent; color: #f7efdc; border-radius: 4px; font-family: var(--font-head); font-weight: 700; }
.category-tabs button[aria-selected='true'] { background: #f7efdc; color: #2a241c; border-color: #c9a25a; box-shadow: 0 0 0 2px #2a241c; }
.genre-grid { gap: 22px 16px; padding-top: 10px; }
.genre-card {
  position: relative;
  padding: 22px 16px 16px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--cell);
  box-shadow: 0 3px 0 var(--rule);
}
.genre-card:hover { box-shadow: 0 5px 0 var(--rule); transform: translateY(-1px); }
.card-tab {
  position: absolute;
  top: -11px;
  left: 14px;
  padding: 1px 10px;
  border: 1px solid var(--ink);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--wash);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.genre-card:nth-child(3n + 2) .card-tab { left: 38%; }
.genre-card:nth-child(3n) .card-tab { left: auto; right: 14px; }
.card-stamp {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 2px 7px;
  border: 2px solid currentColor;
  border-radius: 4px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transform: rotate(-8deg);
  opacity: 0.85;
}
.genre-card:nth-child(even) .card-stamp { transform: rotate(6deg); }
.stamp-easy, .stamp-casual { color: var(--good); }
.stamp-medium, .stamp-fan { color: #8a6512; }
:root[data-theme='dark'] .stamp-medium, :root[data-theme='dark'] .stamp-fan { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .stamp-medium, :root:not([data-theme='light']) .stamp-fan { color: var(--gold); } }
.stamp-hard, .stamp-expert, .stamp-superfan { color: var(--accent); }
.stamp-brutal { color: var(--wrong); }
.genre-card .meta { padding-right: 76px; }
.genre-icon { border-radius: 8px; border: 1px solid var(--ink); }

/* Footer */
.site-footer { background: var(--midnight); color: #d8ccb2; border-top: 4px double var(--mustard-deep); }
.site-footer .footer-brand { font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; color: #f7efdc; }

/* Search pages (play/) */
.landing-bar { background: transparent; border-bottom: 4px double var(--ink); }
.landing-brand { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; }
.landing-brand img { border-radius: 8px; }
.landing-links a { border-radius: 6px; border-color: var(--ink); }

/* Phones: the masthead is centred, newspaper style (the menu is the tab bar). */
@media (max-width: 640px) {
  .masthead-bar { grid-template-columns: 1fr auto 1fr; }
  .wordmark { grid-column: 2; justify-self: center; }
  .masthead-tools { grid-column: 3; }
  .logo-mark { display: none; }
  .wordmark-text { align-items: center; }
  .wordmark-name { font-size: 2.1rem; }
  .wordmark-tag { font-size: 0.5rem; }
  .hero-title { font-size: 2.6rem; }
  .genre-card .meta { padding-right: 70px; }
}

/* ---------- Visual refresh, part 2 ---------- */

/* The crossword: a crisp, inked board on parchment. */
.board { border-radius: 4px; box-shadow: 3px 3px 0 var(--rule); }
.cell { font-weight: 700; }
.clue-bar { background: var(--cell); border: 1px solid var(--ink); border-radius: 8px; box-shadow: 0 2px 0 var(--rule); }
.clue-bar strong { font-family: var(--font-head); font-style: italic; }
.clue-nav:hover { background: var(--wash); }
@media (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  .clue-bar { border: 0; border-top: 1.5px solid var(--ink); border-radius: 0; box-shadow: 0 -6px 18px rgba(42, 36, 28, 0.12); }
  .clue-bar .clue-nav { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
  body.in-game .phone-keys:not([hidden]) { border-top: 1px solid var(--ink); }
}
/* Keys as typeset tiles, on the game screens. */
.keys-row button, .arcade-keys .keys-row button {
  border: 1px solid #c2b28c;
  border-radius: 6px;
  background: var(--cell);
  font-weight: 700;
  box-shadow: 0 2px 0 #b9a77e;
}
.keys-row button:active, .arcade-keys .keys-row button:active { transform: translateY(1px); box-shadow: 0 1px 0 #b9a77e; }
.keys-row .key-wide, .arcade-keys .key-wide { background: var(--wash) !important; }
:root[data-theme='dark'] .keys-row button { border-color: #4a4337; box-shadow: 0 2px 0 #0b0a08; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .keys-row button { border-color: #4a4337; box-shadow: 0 2px 0 #0b0a08; } }

/* The completion dialog: a trophy, a ruled score line, and sharing. */
.win-art { display: flex; justify-content: center; margin: -4px 0 6px; }
.win-art svg { width: 180px; height: auto; }
.win-time { font-family: var(--font-display); font-weight: 400; font-size: 3.2rem; letter-spacing: 0; line-height: 1; }
.win-stats { gap: 0; margin: 18px 0 0; border-block: 1px solid var(--ink); }
.win-stats div { flex: 1; padding: 8px 6px; }
.win-stats div + div { border-left: 1px solid var(--rule); }
.win-stats b { font-family: var(--font-head); font-weight: 700; }
.win-stats span { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.66rem; }
.win .win-share { display: grid; grid-template-columns: none; gap: 10px; margin-top: 20px; padding: 14px; border: 1px dashed var(--ink-soft); border-radius: 10px; background: var(--cell); }
.win-share-title { margin: 0; font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 1.15rem; }
.win-share-main, .win-share-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.win-share-extra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.win-share-extra[hidden] { display: none; }
.win-share-main .btn, .win-share-extra .btn { justify-content: center; padding-inline: 8px; }
.win-share-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
.win-share-row .link-btn { font-size: 0.9rem; }
.win-share-row [aria-expanded='true']::after { content: ' ▴'; }
.win-share-row [aria-expanded='false']::after { content: ' ▾'; }
@media (max-width: 340px) { .win-share-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); } .win-share-extra .btn:last-child { grid-column: 1 / -1; } }

/* Arcade: ink-drawn mode cards on a sunburst. */
#arcade-hub .page-head { position: relative; overflow: hidden; }
#arcade-hub .page-head::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 100%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(227, 182, 76, 0.16) 0deg 7deg, transparent 7deg 14deg);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 60%);
  mask-image: radial-gradient(circle, #000 25%, transparent 60%);
  pointer-events: none;
}
.arcade-mode { position: relative; gap: 14px; border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.arcade-mode:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.arcade-mode.arcade-blitz { background: color-mix(in srgb, var(--mustard) 26%, var(--cell)); }
.arcade-mode.arcade-survival { background: color-mix(in srgb, var(--coral) 20%, var(--cell)); }
.arcade-art { flex: none; display: grid; place-items: center; width: 64px; height: 64px; }
.arcade-art svg, .arcade-start .arcade-badge svg { width: 100%; height: 100%; }
.arcade-mode-name { font-weight: 400; font-size: 1.7rem; }
.arcade-mode-go { border: 1.5px solid var(--ink); box-shadow: 0 2px 0 var(--forest-deep); }
.arcade-mode-go.done { box-shadow: none; }
.arcade-start .arcade-badge { width: 76px; height: 76px; padding: 0; border-radius: 0; background: none; }
.arcade-start h1, .arcade-results h1 { font-size: clamp(2.4rem, 7vw, 3.2rem); }
.arcade-rules li::marker { color: var(--accent); }

/* Pencil marks (Caveat): scores and annotations in the Arcade only. */
.pencil-mark { font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; font-weight: 700; letter-spacing: 0; }

/* Clue Blitz: a ruled scoreboard with a stopwatch. */
.hud-item { border: 1px solid var(--ink); border-radius: 6px; background: var(--cell); }
.hud-item b.pencil-mark { font-size: 2rem; line-height: 1; }
.hud-time { grid-template-columns: auto auto; grid-template-areas: 'w t' 'l l'; align-items: center; column-gap: 6px; background: var(--mustard); color: #2a241c; }
.hud-time .stopwatch { grid-area: w; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.hud-time b { grid-area: t; }
.hud-time span { grid-area: l; color: #3b3122; }
.hud-time.low { background: var(--coral); }
.hud-time.low b { color: #2a241c; }
.hud-combo.hot { border-color: var(--ink); background: color-mix(in srgb, var(--mustard) 30%, var(--cell)); }
.hud-bar { background: var(--rule); }
.hud-bar i { background: #2f5a43; }
.arcade-card { border: 1.5px solid var(--ink); border-radius: 10px; background: var(--cell); box-shadow: 0 3px 0 var(--rule); }
.arcade-meta { font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.arcade-clue { font-family: var(--font-head); font-weight: 500; }
.arcade-box { border-color: var(--ink); border-radius: 3px; background: var(--paper); }
.arcade-box.current { border-color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.arcade-score { font-family: var(--font-display); font-weight: 400; }

/* Survival: the official score sheet. */
.arcade-hud:has(.score-sheet) { padding-bottom: 0; }
.score-sheet { flex: 1; border: 1.5px solid var(--ink); background: var(--cell); box-shadow: 0 3px 0 var(--rule); font-size: 0.85rem; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: #2f5a43; color: #f7efdc; border-bottom: 2px solid var(--ink); font-family: var(--font-head); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; }
.sheet-head .hud-lives { gap: 3px; }
.sheet-head .life svg { width: 20px; height: 20px; fill: var(--coral); stroke: #f7efdc; stroke-width: 1.6; }
.sheet-head .life.lost svg { fill: none; stroke: rgba(247, 239, 220, 0.6); }
.score-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.score-sheet th { padding: 3px 8px; background: var(--wash); border-bottom: 1px solid var(--ink); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; }
.score-sheet th:first-child { width: 3em; }
.score-sheet th:nth-child(3), .score-sheet th:nth-child(4) { width: 4.2em; text-align: center; white-space: nowrap; letter-spacing: 0; }
.score-sheet td { padding: 0 8px; border-bottom: 1px solid var(--rule); }
.score-sheet td + td, .score-sheet th + th { border-left: 1px solid var(--ink); }
.score-sheet td.pencil-mark { font-size: 1.25rem; line-height: 1.3; text-align: center; }
.score-sheet td.ok { color: var(--good); }
.score-sheet td.miss { color: var(--accent); }
.sheet-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 10px; font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.sheet-foot .pencil-mark { font-size: 1.45rem; }
@media (max-height: 700px) { .score-sheet table { display: none; } }
.hud-item span { text-align: center; }

/* ---------- Arcade: three games ---------- */
.arcade-mode { padding: 16px; gap: 12px; min-height: 44px; }
.arcade-mode:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.arcade-mode:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.arcade-art { width: 56px; height: 56px; }
.arcade-mode-name { font-size: 1.55rem; line-height: 1; }
.arcade-mode-tag { font-size: 0.86rem; line-height: 1.35; }
.arcade-mode-best { margin-top: 2px; font-size: 0.78rem; }
.arcade-mode.arcade-ladder { background: color-mix(in srgb, #7fa98a 24%, var(--cell)); }
.arcade-cards { gap: 16px; }
@media (max-width: 640px) {
  #arcade-hub .page-head { padding-bottom: 12px; }
  #arcade-hub .page-title { font-size: 2.3rem; }
  #arcade-hub .section-deck { margin-top: 4px; font-size: 0.95rem; }
  .arcade-cards-hub { margin-top: 18px; }
  .arcade-mode { padding: 14px 12px; }
  .arcade-art { width: 50px; height: 50px; }
}

/* ---------- Word Ladder ---------- */
.ladder-home, .ladder-play, .ladder-done { display: grid; gap: 12px; max-width: 620px; margin: 0 auto; padding: 12px 0 24px; }
.ladder-home { justify-items: start; }
.ladder-home[hidden], .ladder-play[hidden], .ladder-done[hidden] { display: none; }
.ladder-home h1, .ladder-done h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 7vw, 3.2rem); line-height: 1.05; }
.ladder-home .arcade-badge { width: 76px; height: 76px; padding: 0; border-radius: 0; background: none; }
.ladder-home .arcade-badge svg { width: 100%; height: 100%; }
.ladder-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; width: 100%; }
.ladder-mode {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 16px 58px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  text-align: left;
}
.ladder-mode:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.ladder-mode:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.ladder-daily { background: color-mix(in srgb, #7fa98a 26%, var(--cell)); }
.ladder-practice { background: var(--cell); }
.ladder-mode-words { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.05; letter-spacing: 0.02em; }
.ladder-mode-line { font-size: 0.86rem; color: var(--ink-soft); }
.ladder-mode .arcade-mode-go { display: inline-block; position: absolute; left: 16px; bottom: 14px; }
.ladder-loading { margin: 0; font-family: var(--font-head); font-style: italic; color: var(--ink-soft); }

.ladder-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ladder-clock { padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--mustard); color: #2a241c; font-weight: 800; font-variant-numeric: tabular-nums; }
.ladder-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; line-height: 1; }
.ladder-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 6px 0; border-block: 1px solid var(--ink); font-size: 0.85rem; color: var(--ink-soft); }
.ladder-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ladder-rungs { --tile: 44px; list-style: none; display: grid; justify-items: center; gap: 6px; margin: 0; padding: 0; }
.rung { position: relative; display: flex; justify-content: center; }
/* The ladder's rails, drawn behind the words. */
.ladder-rungs::before { content: none; }
.rung + .rung::before { content: ''; position: absolute; top: -7px; left: 50%; width: 2px; height: 8px; background: var(--ink-soft); }
.rung-word { display: flex; gap: 6px; }
.tile {
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: var(--cell);
  font-weight: 800;
  font-size: calc(var(--tile) * 0.5);
  box-shadow: 0 2px 0 var(--rule);
}
.tile.changed { background: var(--mustard); color: #2a241c; }
.rung.start .tile { background: var(--wash); }
.rung.target .tile { background: #7fa98a; color: #1d2a20; border-color: var(--ink); }
.rung.entry .tile { border-style: dashed; background: transparent; color: var(--ink-soft); font-weight: 600; opacity: 0.6; box-shadow: none; }
.rung.entry .tile.typed { border-style: solid; background: var(--cell); color: var(--ink); font-weight: 800; opacity: 1; }
.rung.entry .tile.current { border: 2px solid var(--primary); opacity: 1; box-shadow: inset 0 -3px 0 var(--primary); }
.rung.entry.shake { animation: arcade-shake 0.35s; }
.rung.gap span { font-size: 1.2rem; letter-spacing: 0.3em; color: var(--ink-soft); line-height: 1; }
.ladder-controls { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.ladder-controls .btn { justify-content: center; padding-inline: 8px; }
.ladder-controls .btn:disabled { opacity: 0.45; }
.ladder-restart { justify-self: center; font-size: 0.88rem; }
.ladder-play .arcade-keys[hidden] { display: none; }
/* Finished: the rungs light up one after another. */
.ladder-rungs.climbed .rung .tile { animation: rung-glow 0.5s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
.ladder-rungs.climbed .rung:nth-child(2) .tile { --i: 1; }
.ladder-rungs.climbed .rung:nth-child(3) .tile { --i: 2; }
.ladder-rungs.climbed .rung:nth-child(4) .tile { --i: 3; }
.ladder-rungs.climbed .rung:nth-child(5) .tile { --i: 4; }
.ladder-rungs.climbed .rung:nth-child(6) .tile { --i: 5; }
.ladder-rungs.climbed .rung:nth-child(n + 7) .tile { --i: 6; }
@keyframes rung-glow { 40% { transform: translateY(-4px); background: #7fa98a; } 100% { transform: none; } }
.ladder-done { justify-items: center; text-align: center; }
.ladder-cheer { width: 140px; height: 70px; background: repeating-conic-gradient(from -90deg at 50% 100%, rgba(227, 182, 76, 0.55) 0deg 8deg, transparent 8deg 16deg); -webkit-mask-image: radial-gradient(circle at 50% 100%, #000 40%, transparent 72%); mask-image: radial-gradient(circle at 50% 100%, #000 40%, transparent 72%); animation: cheer-in 0.6s ease-out both; }
@keyframes cheer-in { from { transform: scale(0.6); opacity: 0; } }
.ladder-done-note { margin: -4px 0 0; color: var(--ink-soft); max-width: 46ch; }
.ladder-done .win-stats { width: 100%; }
.ladder-done .win-stats div { min-width: 0; }
.ladder-final { --tile: 32px; margin: 10px 0 0; }
.ladder-done .arcade-result-actions { justify-content: center; }
@media (max-width: 640px) {
  .ladder-play { gap: 10px; padding-top: 4px; }
  .ladder-title { font-size: 1.9rem; }
}
@media (max-height: 700px) and (pointer: coarse) {
  .ladder-rungs { --tile: 36px !important; gap: 4px; }
  .rung.gap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ladder-rungs.climbed .rung .tile, .ladder-cheer, .rung.entry.shake { animation: none; }
}

/* ---------- Statistics page ---------- */
#stats-view .page-head { margin-bottom: 18px; }
.stats-glance { display: grid; gap: 16px; margin-bottom: 18px; }
.stats-primary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat-card { display: grid; align-content: start; gap: 2px; padding: 14px 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--cell); box-shadow: 4px 4px 0 var(--ink); text-align: center; }
.stat-card b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-card span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.stat-card small { font-size: 0.74rem; color: var(--ink-soft); }
.stat-card:nth-child(2) { background: color-mix(in srgb, var(--mustard) 28%, var(--cell)); }
.week-track { padding: 12px 14px; border: 1px solid var(--ink); border-radius: 10px; background: var(--cell); }
.week-track-title { margin: 0 0 10px; font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 1.1rem; }
.week-days { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.week-day { display: grid; justify-items: center; gap: 2px; padding: 6px 0 8px; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink-soft); }
.week-day .wd { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.week-day .dd { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.week-day .marks { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.week-day .marks i { display: block; border: 1.5px solid var(--rule); border-radius: 2px; }
.week-day .m-daily { width: 14px; height: 14px; }
.week-day .m-mini { width: 9px; height: 9px; }
.week-day .marks i.on { background: var(--primary); border-color: var(--primary); }
.week-day.done { border-color: var(--ink); background: color-mix(in srgb, var(--primary) 10%, var(--cell)); }
.week-day.today { box-shadow: inset 0 -3px 0 var(--mustard); }
.week-note { margin: 8px 0 0; font-size: 0.78rem; color: var(--ink-soft); }
.stats-panel { margin-top: 12px; border: 1px solid var(--ink); border-radius: 10px; background: var(--cell); }
.stats-panel > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-height: 52px; padding: 12px 44px 12px 14px; position: relative; cursor: pointer; list-style: none; }
.stats-panel > summary::-webkit-details-marker { display: none; }
.stats-panel > summary::after { content: ''; position: absolute; right: 18px; top: 22px; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform 0.2s; }
.stats-panel[open] > summary::after { transform: rotate(-135deg); top: 26px; }
.stats-panel > summary:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: 10px; }
.panel-title { font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 1.3rem; }
.panel-sum { font-size: 0.82rem; color: var(--ink-soft); }
.panel-body { padding: 0 14px 16px; border-top: 1px solid var(--rule); }
.panel-body h3 { margin: 18px 0 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.panel-body .stat-tiles { margin: 14px 0 6px; padding: 0; border: 0; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0; }
.panel-body .stat-tiles div { padding: 10px 8px; border-bottom: 1px solid var(--rule); }
.panel-body .stat-tiles b { font-family: var(--font-head); font-size: 1.5rem; }
.panel-note { margin: -4px 0 8px; font-size: 0.8rem; color: var(--ink-soft); }
.panel-body .club-lede { margin: 12px 0 0; }
.panel-body .badges { margin: 14px 0 0; }
.badge-bar { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--wash); overflow: hidden; }
.badge-bar i { display: block; height: 100%; background: var(--mustard-deep); }
.badge { border-color: var(--ink); border-radius: 8px; background: var(--paper); }
.arcade-record { margin-top: 14px; padding: 10px 12px 4px; border: 1px solid var(--ink); border-radius: 8px; }
.arcade-record h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; text-transform: none; }
.arcade-record .stat-tiles { margin-top: 6px; }
.rec-blitz { background: color-mix(in srgb, var(--mustard) 18%, var(--cell)); }
.rec-survival { background: color-mix(in srgb, var(--coral) 14%, var(--cell)); }
.rec-ladder { background: color-mix(in srgb, #7fa98a 18%, var(--cell)); }
@media (max-width: 640px) {
  .stats-primary { gap: 8px; }
  .stat-card { padding: 12px 6px; box-shadow: 3px 3px 0 var(--ink); }
  .stat-card span { font-size: 0.62rem; letter-spacing: 0.06em; }
  .week-days { gap: 4px; }
  .week-track { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .stats-panel > summary::after { transition: none; } }

/* Results with four or more figures wrap into a ruled grid on phones, so
   long labels (LETTERS REVEALED) never run off the edge. */
.win-stats div { min-width: 0; }
.win-stats span { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .win-stats:has(> :nth-child(4)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .win-stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .win-stats:has(> :nth-child(4)) > div { border-left: 0; }
  .win-stats:has(> :nth-child(4)) > div:not(:nth-child(3n + 1)) { border-left: 1px solid var(--rule); }
  .win-stats:has(> :nth-child(4)) > div:nth-child(n + 4) { border-top: 1px solid var(--rule); }
  .win-stats:has(> :nth-child(4):last-child) > div { border-left: 0; }
  .win-stats:has(> :nth-child(4):last-child) > div:nth-child(even) { border-left: 1px solid var(--rule); }
  .win-stats:has(> :nth-child(4):last-child) > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .win-stats span { letter-spacing: 0.04em; }
}

/* Dialogs fit the screen you can actually see: on iPhones 100vh includes the
   space behind Safari's toolbars, so use the dynamic viewport where it's
   supported and keep clear of the notch and home bar. Anything taller
   scrolls inside the dialog. */
dialog {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Opening the dialog focuses its top, not the first button. */
.win:focus { outline: none; }
/* The completion dialog, tighter on phones so it usually fits without
   scrolling. */
@media (max-width: 560px) {
  .win { padding: 24px 18px 18px; }
  .win-art { margin: -6px 0 2px; }
  .win-art svg { width: 128px; }
  .win h2 { font-size: 2.1rem; }
  .win-time { margin-top: 6px; font-size: 2.7rem; }
  .win-text { font-size: 0.92rem; }
  .win-stats { margin-top: 12px; }
  .win-stats div { padding: 6px 4px; }
  .win-stats b { font-size: 1.3rem; }
  .win-next { margin-top: 10px; }
  .win .win-share { margin-top: 14px; padding: 10px; gap: 8px; }
  /* The main next step full width; the others side by side beneath it. */
  .win-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 4px; }
  .win-actions .btn { min-height: 44px; }
  .win-actions .btn-primary, .win-actions > .btn-primary + .btn:last-child, .win-actions > .btn:only-child { grid-column: 1 / -1; }
  .win-actions .btn:not(.btn-primary) { padding: 6px 10px; white-space: normal; line-height: 1.2; font-size: 0.86rem; }
}
@media (max-width: 560px) and (max-height: 760px) {
  .win-art svg { width: 88px; }
  .win-time { font-size: 2.3rem; }
}

/* ---------- Hint credits ---------- */
.wallet-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 10px 4px 6px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--mustard); color: #2a241c; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 2px 0 var(--mustard-deep); }
.wallet-btn[hidden] { display: none; }
.wallet-btn .bulb { width: 20px; height: 20px; fill: #fbf5e6; stroke: #2a241c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wallet-btn span:empty { display: none; }
.wallet-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--mustard-deep); }
.wallet { padding: 26px 22px 22px; }
.wallet-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 4px double var(--ink); }
.wallet-art { flex: none; width: 56px; height: 70px; }
.wallet-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 2.6rem; line-height: 1; }
.wallet-head h2 small { font-family: var(--font-head); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }
.wallet-pots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.wallet-pots div { display: grid; gap: 1px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 8px; background: var(--cell); }
.wallet-pots div:first-child { background: color-mix(in srgb, var(--mustard) 22%, var(--cell)); }
.wallet-pots b { font-family: var(--font-head); font-size: 1.7rem; line-height: 1.1; }
.wallet-pots span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.wallet-pots small { font-size: 0.76rem; color: var(--ink-soft); }
.wallet h3 { margin: 18px 0 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.wallet-list { list-style: none; margin: 0; padding: 0; }
.wallet-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem; }
.wallet-list b { flex: none; font-variant-numeric: tabular-nums; }
.wallet-history span { display: grid; }
.wallet-history small { color: var(--ink-soft); font-size: 0.74rem; }
.wallet-history .plus { color: var(--good); }
.wallet-history .minus { color: var(--accent); }
.wallet-note { margin: 8px 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.wallet-lede { margin: 14px 0 12px; }
#wallet-guest .btn { width: 100%; }
.menu-note { margin: 0; padding: 6px 12px 4px; font-size: 0.76rem; color: var(--ink-soft); white-space: nowrap; }
.menu-note[hidden] { display: none; }
.win-reward { margin: 10px auto 0; padding: 6px 12px; max-width: 34ch; border: 1.5px dashed var(--mustard-deep); border-radius: 8px; background: color-mix(in srgb, var(--mustard) 18%, var(--cell)); font-weight: 700; }
.win-reward[hidden] { display: none; }
@media (max-width: 640px) {
  .wallet-btn { min-height: 32px; padding: 2px 8px 2px 4px; font-size: 0.86rem; }
  .masthead-tools { gap: 6px; }
}

/* ---------- Crossword Duels ---------- */
.play-section { margin-top: 26px; }
.play-section > .section-title { padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.play-section > .section-deck { margin-top: 8px; }
.duel-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 4px 0 18px; }
.duel-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; padding: 16px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--cell); box-shadow: 4px 4px 0 var(--ink); }
.duel-mini { background: color-mix(in srgb, #9cc3d6 26%, var(--cell)); }
.duel-classic { background: color-mix(in srgb, var(--coral) 14%, var(--cell)); }
.duel-art { grid-row: 1 / 3; width: 56px; height: 56px; }
.duel-art svg { width: 100%; height: 100%; }
.duel-copy { display: grid; gap: 3px; min-width: 0; }
.duel-name { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.duel-name .soon-badge { vertical-align: middle; font-family: var(--font-ui); }
.duel-tag { font-size: 0.88rem; color: var(--ink-soft); }
.duel-rec { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.duel-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.duel-actions .btn { min-height: 44px; padding-inline: 14px; }
.duel-soon { font-size: 0.82rem; font-style: italic; color: var(--ink-soft); }
@media (max-width: 420px) {
  .duel-actions { grid-column: 1 / -1; }
  .duel-actions .btn { flex: 1; }
}

.duel-panel { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; padding: 8px 0 24px; }
.duel-panel h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 7vw, 3.2rem); line-height: 1.02; }
.duel-lede { margin: 0; color: var(--ink-soft); }
.duel-loading { margin: 40px 0; text-align: center; font-family: var(--font-head); font-style: italic; color: var(--ink-soft); }
.duel-players { list-style: none; display: grid; gap: 8px; margin: 4px 0; padding: 0; }
.duel-players li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 10px; background: var(--cell); }
.duel-players li > span:nth-child(2) { flex: 1; font-weight: 700; }
.duel-players li b { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.duel-players li.ready b { color: var(--good); }
.duel-players li.empty { border-style: dashed; color: var(--ink-soft); }
.duel-players li.empty > span:nth-child(2) { font-weight: 400; font-style: italic; }
.duel-avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--mustard); color: #2a241c; font-weight: 800; }
.duel-invite { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--ink-soft); border-radius: 10px; background: var(--cell); }
.duel-invite-title { margin: 0; font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 1.1rem; }
.duel-link { margin: 0; }
.duel-link input { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); font: 600 0.88rem var(--font-ui); }
.duel-share { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.duel-share .btn { justify-content: center; padding-inline: 8px; }
.duel-small { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
.duel-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.duel-buttons .btn { min-height: 46px; }
.duel-ready { min-width: 180px; }
.duel-rules { margin: 6px 0 0; padding: 12px 12px 12px 30px; border-block: 1px solid var(--ink); font-size: 0.86rem; display: grid; gap: 4px; }
.duel-rules li::marker { color: var(--accent); }
.duel-count { margin: 18px 0; text-align: center; font-family: var(--font-display); font-size: 6rem; line-height: 1; }
.duel-search { display: flex; justify-content: center; gap: 10px; margin: 18px 0; }
.duel-search span { width: 16px; height: 16px; border: 1.5px solid var(--ink); background: var(--mustard); animation: duel-search 1.2s ease-in-out infinite; }
.duel-search span:nth-child(2) { animation-delay: 0.2s; }
.duel-search span:nth-child(3) { animation-delay: 0.4s; }
@keyframes duel-search { 50% { transform: translateY(-8px); background: var(--cell); } }
.duel-result { display: grid; gap: 12px; text-align: center; justify-items: center; }
.duel-result h1 { text-transform: uppercase; letter-spacing: 0.02em; }
.duel-result.lost h1, .duel-result.draw h1 { color: var(--ink-soft); }
.duel-trophy svg { width: 150px; height: auto; }
.duel-final { width: 100%; }
.duel-offer { margin: 0; font-weight: 700; color: var(--accent); }
.duel-result .duel-buttons { justify-content: center; }

/* The live duel: both players' progress above the grid; no hints or checks. */
.duel-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin: 0 0 10px; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--cell); box-shadow: 0 2px 0 var(--rule); }
.duel-bar[hidden] { display: none; }
.duel-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'who pct' 'bar bar'; gap: 2px 6px; align-items: baseline; }
.duel-who { grid-area: who; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.duel-side b { grid-area: pct; font-family: var(--font-head); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.duel-meter { grid-area: bar; display: block; height: 8px; border: 1px solid var(--ink); border-radius: 2px; background: var(--paper); overflow: hidden; }
.duel-meter i { display: block; height: 100%; width: 0; background: var(--primary); transition: width 0.4s ease; }
.duel-opp .duel-meter i { background: var(--coral); }
.duel-clock { display: grid; justify-items: center; }
.duel-clock span { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.duel-clock span.low { color: var(--wrong); }
.duel-clock small { font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.duel-bar.ahead .duel-clock small { color: var(--good); }
.duel-note { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; color: var(--accent); }
.duel-note:empty { display: none; }
.duel-resign { grid-column: 1 / -1; justify-self: end; font-size: 0.8rem; }
#game-view.duel-mode [data-menu="reveal"], #game-view.duel-mode [data-menu="check"], #game-view.duel-mode #new-btn,
#game-view.duel-mode #room-start, #game-view.duel-mode .challenge-banner { display: none !important; }
@media (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  .duel-bar { margin-bottom: 6px; padding: 6px 10px; }
  .duel-clock span { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .duel-search span, .duel-meter i { animation: none; transition: none; }
}
/* Keep focused and scrolled-to controls clear of the phone tab bar. */
@media (max-width: 640px) { html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
/* The duel's scores stay in view while you solve. */
.duel-bar { position: sticky; top: 0; z-index: 7; }