:root {
    --bg: #0f1220;
    --card: #1b2138;
    --card2: #232b4a;
    --text: #eef1ff;
    --muted: #9aa3c7;
    --accent: #6c8cff;
    --accent2: #8f6cff;
    --good: #3ddc84;
    --bad: #ff5c74;
    --warn: #ffcf5c;
    --chart: #6488fa; /* validated: OKLCH L .656, C .174, 4.88:1 vs card surface */
    --app-width: 720px;
    --scroll-thumb: #5369b8;
    --scroll-thumb-hover: #708cff;
    --scroll-track: rgba(10,14,30,0.45);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 999px;
  }
  *::-webkit-scrollbar-thumb {
    min-height: 28px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--scroll-thumb-hover), var(--scroll-thumb)) padding-box;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8da2ff, var(--scroll-thumb-hover)) padding-box;
  }
  *::-webkit-scrollbar-corner { background: transparent; }
  html, body { height: 100%; }
  body {
    background: radial-gradient(1200px 800px at 70% -10%, #1c2450 0%, var(--bg) 55%);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .app {
    width: 100%;
    max-width: var(--app-width);
  }
  .card {
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 28px;
    height: min(760px, calc(100vh - 32px));
    max-height: calc(100vh - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  }
  h1 {
    font-size: 1.7rem;
    text-align: center;
    margin-bottom: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .tagline { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 0.95rem; }
  .label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 18px 0 8px; }

  /* Operation picker */
  .ops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .op-btn {
    font-size: 1.4rem;
    padding: 14px 0;
    border-radius: 14px;
    border: 2px solid transparent;
    background: var(--card2);
    color: var(--text);
    cursor: pointer;
    transition: transform 0.08s, border-color 0.15s;
  }
  .op-btn:hover { transform: translateY(-2px); }
  .op-btn.selected { border-color: var(--accent); background: #2a3560; }
  .op-any { grid-column: 1 / -1; font-size: 1rem; font-weight: 600; }

  /* Level picker */
  .levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .lvl-btn {
    padding: 10px 0;
    border-radius: 10px;
    border: 2px solid transparent;
    background: var(--card2);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.08s, border-color 0.15s;
  }
  .lvl-btn:hover { transform: translateY(-2px); }
  .lvl-btn.selected { border-color: var(--accent); background: #2a3560; }
  .lvl-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
  /* full-width row under the ten numbers, matching .op-any in the op picker */
  .lvl-any { grid-column: 1 / -1; font-size: 1rem; font-weight: 600; }

  .primary {
    width: 100%;
    margin-top: 24px;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    color: white;
    cursor: pointer;
    transition: filter 0.15s, transform 0.08s;
  }
  .primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
  .primary:disabled { filter: grayscale(0.7) brightness(0.6); cursor: not-allowed; transform: none; }

  /* Profile screen */
  .player-row { display: flex; gap: 10px; }
  .kid-check {
    display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 12px;
    background: var(--card2); font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .kid-check input { width: 18px; height: 18px; accent-color: var(--good); }
  #profile-name {
    flex: 1; min-width: 0;
    font-size: 1.1rem; padding: 12px 16px;
    border-radius: 14px; border: 2px solid var(--card2);
    background: var(--card2); color: var(--text); outline: none;
  }
  #profile-name:focus { border-color: var(--accent); }
  #profile-create {
    padding: 12px 22px; font-size: 1rem; font-weight: 600;
    border: none; border-radius: 14px;
    background: var(--accent); color: white; cursor: pointer;
  }
  #profile-create:hover { filter: brightness(1.12); }
  .profile-item {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    background: var(--card2); border: 2px solid transparent; border-radius: 12px;
    padding: 12px 16px; color: var(--text); cursor: pointer;
    margin-bottom: 8px; font-size: 1rem; text-align: left;
  }
  .profile-item:hover { border-color: var(--accent); }
  .profile-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .profile-item .meta { color: var(--muted); font-size: 0.85rem; }
  .profile-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.05rem; margin-left: 12px; }
  .profile-del:hover { color: var(--bad); }
  .no-profiles { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 8px 0; }

  .setup-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: var(--muted); font-size: 0.9rem; }
  .setup-head b { color: var(--text); }
  /* Controls and page titles have separate fixed rows, so neither can overlap
     and every purple title stays at the same vertical position. */
  .card > .setup-head {
    position: relative; z-index: 2;
    height: 56px; min-height: 56px; margin-bottom: 0;
  }
  .card > h1 {
    display: flex; align-items: flex-start; justify-content: center;
    height: 36px; margin: 0 !important; line-height: 1.2;
  }
  #screen-profile::before, #screen-results::before {
    content: ""; display: block; height: 56px; flex: none;
  }
  .header-identity {
    display: inline-flex; align-items: center; gap: 7px;
    height: 26px; min-width: 0; line-height: 26px;
  }
  .setup-player-controls { position: relative; }
  .setup-player-controls #player-label {
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    height: 26px; line-height: 26px;
  }
  #switch-player {
    position: absolute; top: 32px; left: 0; transform: none;
    min-height: 25px; padding: 4px 10px;
    font-size: 0.72rem; font-weight: 700; line-height: 1; white-space: nowrap;
  }
  #switch-player:hover { transform: translateY(-1px); }
  .linklike { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.9rem; padding: 0; }
  .linklike:hover { text-decoration: underline; }
  .btn-sm {
    background: var(--card2); border: 1px solid rgba(255,255,255,0.12); color: var(--text);
    cursor: pointer; font-size: 0.82rem; padding: 6px 12px; border-radius: 999px;
    transition: border-color 0.15s, background 0.15s, transform 0.08s;
  }
  .btn-sm:hover { border-color: var(--accent); background: #2a3560; transform: translateY(-1px); }
  .screen-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 31px; flex: 0 0 76px; padding: 0;
    background: var(--card2); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px; color: var(--text); cursor: pointer;
    font-size: 0.82rem; font-weight: 600; line-height: 1;
    transition: border-color 0.15s, background 0.15s, transform 0.08s;
  }
  .screen-back:hover { border-color: var(--accent); background: #2a3560; transform: translateY(-1px); }
  .backup-row { display: flex; gap: 8px; }
  .backup-row .btn-sm { flex: 1; }
  .backup-note { color: var(--muted); font-size: 0.8rem; text-align: center; min-height: 1.1em; margin-top: 8px; }
  .backup-note.ok { color: var(--good); }
  .backup-note.err { color: var(--bad); }
  .best-line { text-align: center; color: var(--muted); margin-top: 12px; min-height: 1.2em; font-size: 0.9rem; }
  .pb-banner { text-align: center; color: var(--good); font-weight: 700; margin-bottom: 14px; min-height: 1.3em; }

  /* Keep the setup header and game-mode controls anchored while mode content changes. */
  #screen-setup {
    overflow: hidden;
  }
  #screen-setup:not(.hidden) { display: flex; flex-direction: column; }
  #screen-setup > .setup-head, #screen-setup > h1, #setup-tagline,
  #screen-setup > .label, #game-modes { flex: none; }
  #setup-tagline { height: 2.8em; line-height: 1.4; margin-bottom: 14px; }
  #setup-mode-content {
    display: flex; flex: 1; min-height: 0; flex-direction: column;
    overflow-y: auto; scrollbar-width: none;
  }
  #setup-mode-content::-webkit-scrollbar { display: none; }
  #setup-mode-content .label { margin: 10px 0 8px; }
  #setup-mode-content .op-btn { padding-block: 10px; }
  #setup-mode-content .lvl-btn { padding-block: 7px; }
  #setup-mode-content .mode-btn { padding-block: 8px; }
  #setup-mode-content .primary { flex: none; margin-top: auto; padding-block: 12px; }
  /* `margin-top: auto` above only produces a gap when there's leftover space —
     once the mode content fills its box it collapses to 0 and Start sits flush
     against the timer-style row. Guarantee a real gap. (Blaster hides the row.) */
  #setup-mode-content #timer-style-row { margin-bottom: 20px; }

  /* Daily uses two columns on wide screens. Keeping the leaderboard as a sibling
     of Start lets narrow screens place it after the controls without overlap. */
  #setup-mode-content:has(#daily-panel:not(.hidden)) {
    display: grid;
    grid-template-columns: minmax(190px, .68fr) minmax(330px, 1.32fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    column-gap: 14px;
  }
  #setup-mode-content > #daily-panel:not(.hidden) {
    display: flex; flex-direction: column; min-height: 0;
    grid-column: 1; grid-row: 1;
  }
  #daily-panel > .daily-dashboard { flex: 1; min-height: 0; }
  #setup-mode-content > .daily-leaderboard:not(.hidden) {
    display: flex; flex-direction: column; min-height: 0;
    grid-column: 2; grid-row: 1;
    margin-top: 36px;
  }
  #setup-mode-content:has(#daily-panel:not(.hidden)) #timer-style-row,
  #setup-mode-content:has(#daily-panel:not(.hidden)) #start { grid-column: 1 / -1; }
  .daily-leaderboard #leaderboard-table { flex: 1; min-height: 84px; max-height: none; }
  /* Daily fixes its own op/level, so the best line is always empty here — don't
     reserve its height. */
  #setup-mode-content:has(#daily-panel:not(.hidden)) .best-line { display: none; }

  /* Same idea for Classic: the op/level grids are the flexible region, so Start
     and the timer row stay pinned and visible instead of scrolling off. */
  #setup-mode-content > #op-level-pickers:not(.hidden) {
    flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
  }
  #setup-mode-content > #op-level-pickers::-webkit-scrollbar { display: none; }

  #setup-mode-content .best-line {
    flex: none; height: 1.55em; line-height: 1.35; margin-top: 8px; padding-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Coin icon — pure CSS so it renders on every system */
  .coin {
    display: inline-block; width: 0.85em; height: 0.85em; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe08a, #f5c542 60%, #c9992a);
    border: 1px solid #a87b1c;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.25);
    vertical-align: -0.08em;
  }

  /* Avatars */
  .avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .avatar-btn {
    background: var(--card2); border: 2px solid transparent; border-radius: 12px;
    padding: 8px 4px 6px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--muted); font-size: 0.72rem;
    transition: transform 0.08s, border-color 0.15s;
  }
  .avatar-btn:hover { transform: translateY(-2px); }
  .avatar-btn.selected { border-color: var(--accent); background: #2a3560; }
  /* Same alignment as #avatar-chip so the header chip sits identically on
     every screen (setup, stats, shop, locker). */
  .avatar-inline { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 7px; line-height: 0; }
  .header-identity .avatar-inline { margin-right: 0; }
  .setup-head b { display: inline-flex; align-items: center; }
  /* Profile already has a large equipped character directly below its header. */
  #avatar-chip {
    display: inline-flex; align-items: center; justify-content: center; line-height: 0;
    background: none; border: none; cursor: pointer; padding: 0;
    vertical-align: middle; margin: 0; position: relative; top: 0;
  }
  /* Setup uses a button while Stats uses an inline identity span. Give both
     avatar wrappers the exact same box so switching screens cannot nudge the
     character by a pixel through line-box or button alignment differences. */
  #avatar-chip, .header-identity .avatar-inline {
    width: 26px; height: 26px; flex: 0 0 26px; margin-block: 0;
  }
  #avatar-chip:hover { filter: brightness(1.25); }
  .modal-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px;
  }
  .modal-card {
    background: var(--card); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
    padding: 22px; max-width: 360px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .modal-card h2 { font-size: 1.1rem; margin-bottom: 14px; text-align: center; }

  /* Stats screen */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .chip {
    padding: 6px 14px; border-radius: 999px; border: 2px solid transparent;
    background: var(--card2); color: var(--text); cursor: pointer; font-size: 0.9rem;
  }
  .chip:hover { border-color: rgba(255,255,255,0.2); }
  .chip.selected { border-color: var(--chart); }

  /* two-dimension filter (operation + difficulty) */
  .filter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .filter-row .filter-lbl { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; min-width: 40px; }
  .filter-row .chips { margin-bottom: 0; gap: 6px; }
  .filter-row .chip { padding: 4px 11px; font-size: 0.82rem; }

  /* Keep the Stats controls anchored while tab content changes below them. */
  #screen-stats {
    overflow: hidden;
  }
  #screen-stats:not(.hidden) { display: flex; flex-direction: column; }
  #screen-stats > .setup-head, #screen-stats > h1, #screen-stats > .tagline,
  .stats-overview, .stats-filter-block, .stats-tabs { flex: none; }
  #stats-content:not(.hidden) { display: flex; flex: 1; min-height: 0; flex-direction: column; }
  .stats-panel:not(.hidden) { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
  #screen-stats .stats-empty:not(.hidden) { flex: 1; }
  #screen-stats h1 { margin-bottom: 2px; }
  #screen-stats .tagline { margin-bottom: 12px; }
  #screen-stats .label { margin: 10px 0 5px; }
  #screen-stats .stats { margin: 0; gap: 4px; }
  #screen-stats .stat { padding: 5px 4px; border-radius: 7px; }
  #screen-stats .stat .num { font-size: 0.85rem; line-height: 1.05; white-space: nowrap; }
  #screen-stats .stat .cap { font-size: 0.5rem; }
  .stats-overview {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 2fr);
    align-items: stretch; gap: 8px;
    width: 100%; margin-bottom: 7px;
  }
  #stats-tiles {
    display: grid; grid-template-columns: 1fr;
    min-width: 0; gap: 8px;
  }
  #screen-stats #stats-tiles .stat {
    display: grid; align-content: center;
    min-height: 100%; padding: 8px;
  }
  #screen-stats #stats-tiles .stat .num {
    font-size: 1.35rem; line-height: 1.1;
  }
  #screen-stats #stats-tiles .stat .cap {
    margin-top: 3px; font-size: 0.68rem; letter-spacing: 0.07em;
  }
  .daily-overview {
    display: grid; grid-template-columns: 146px minmax(0, 1fr);
    align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 10px; background: var(--card2);
  }
  .daily-streak-copy {
    display: grid; align-content: center; justify-items: center; gap: 6px;
    width: 120px; justify-self: end;
  }
  .daily-streak-title {
    color: var(--muted); font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.08em; text-align: center; text-transform: uppercase;
  }
  .daily-streak-metrics { display: grid; grid-template-columns: 1fr; width: 100%; gap: 5px; }
  .daily-streak-metrics > div { width: 100%; padding: 7px 6px; border-radius: 7px; background: rgba(255,255,255,0.035); text-align: center; }
  .daily-streak-metrics b { display: block; font-size: 1.2rem; line-height: 1.05; }
  .daily-streak-metrics span { color: var(--muted); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .daily-calendar-wrap { justify-self: center; }
  .daily-calendar-label { margin-bottom: 3px; color: var(--text); font-size: 0.72rem; font-weight: 700; text-align: center; }
  .daily-calendar { display: grid; grid-template-columns: repeat(7, 22px); grid-auto-rows: 20px; gap: 2px; }
  .daily-weekday { color: var(--muted); font-size: 0.56rem; line-height: 20px; text-align: center; }
  .daily-day {
    display: grid; place-items: center; border-radius: 4px; background: rgba(255,255,255,0.07);
    color: var(--muted); font-size: 0.62rem; font-variant-numeric: tabular-nums;
  }
  .daily-day.blank { visibility: hidden; }
  .daily-day.played { background: var(--good); color: #10281b; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
  .daily-day.today { outline: 2px solid var(--accent); outline-offset: 1px; }
  .stats-filter-block {
    width: 100%; align-self: stretch;
    margin: 3px 0 1px;
  }
  @media (max-width: 520px) {
    .stats-overview { grid-template-columns: 1fr; gap: 6px; }
    #screen-stats #stats-tiles .stat .num { font-size: 1.15rem; }
    #screen-stats #stats-tiles .stat .cap { font-size: 0.62rem; }
    .daily-overview { grid-template-columns: 112px minmax(0, 1fr); gap: 5px; padding: 6px; }
    .daily-streak-copy { gap: 4px; }
    .daily-streak-copy { width: 104px; }
    .daily-streak-title { font-size: 0.52rem; }
    .daily-streak-metrics { gap: 3px; }
    .daily-streak-metrics > div { padding-inline: 3px; }
  }
  @media (max-width: 400px) {
    .daily-calendar { grid-template-columns: repeat(7, 18px); grid-auto-rows: 17px; }
    .daily-weekday { line-height: 17px; }
  }
  /* tabbed sections keep the page short */
  .stats-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
  .stats-tabs button {
    flex: 1; padding: 8px 4px; border: none; border-radius: 8px;
    background: var(--card2); color: var(--muted); cursor: pointer;
    font-size: 0.82rem; font-weight: 600;
  }
  .stats-tabs button.selected { background: #2a3560; color: var(--text); box-shadow: inset 0 -2px 0 var(--chart); }
  #panel-trend:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
  #panel-trend .chart-wrap { flex: 1; min-height: 0; }
  .chart-wrap { position: relative; background: rgba(255,255,255,0.02); border-radius: 12px; padding: 8px 4px 2px; }
  #panel-trend .chart-wrap svg { display: block; width: 100%; height: 100%; }
  #trend-svg .pt { cursor: pointer; }
  #trend-svg .pt:focus { outline: none; stroke: var(--accent); stroke-width: 2px; }
  .tooltip {
    position: absolute; pointer-events: none; display: none; z-index: 5;
    background: #2a3560; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
    padding: 6px 10px; font-size: 0.8rem; line-height: 1.45; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  }
  .tooltip .tip-muted { color: var(--muted); }
  .stats-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
  .stats-table th {
    color: var(--muted); font-weight: 600; text-align: right; padding: 6px 8px;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  }
  .stats-table th:first-child, .stats-table td:first-child { text-align: left; }
  /* Keep column headers visible while Game History scrolls. */
  #recent-table { overflow-x: auto; }
  #recent-table .stats-table th { position: sticky; top: 0; background: var(--card); z-index: 1; }
  #recent-table .stats-table { min-width: 620px; }
  .history-row { cursor: pointer; transition: background 0.12s ease; }
  .history-row:hover, .history-row:focus-visible { background: rgba(255,255,255,0.055); outline: none; }
  .stats-table td { padding: 7px 8px; text-align: right; border-top: 1px solid rgba(255,255,255,0.05); }
  .stats-empty { color: var(--muted); text-align: center; padding: 30px 0; }
  .history-detail-missing {
    grid-column: 1 / -1;
    width: 100%; padding: 24px 12px;
    color: var(--muted); text-align: center;
  }
  /* Per-row share button in Game History. */
  .stats-table td:last-child { padding: 4px 6px; width: 1%; }
  .row-share {
    min-width: 32px; min-height: 32px; padding: 4px 7px; line-height: 1;
    border: 1px solid rgba(255,255,255,0.16); border-radius: 9px;
    background: var(--card2); color: var(--text); cursor: pointer; font-size: 0.9rem;
  }
  .row-share:hover { border-color: var(--accent); background: #2a3560; }
  .row-share.copied { border-color: var(--good); color: var(--good); }

  #screen-history { overflow: hidden; }
  #screen-history:not(.hidden) { display: flex; flex-direction: column; }
  #screen-history > .setup-head, #screen-history > h1, #screen-history > .tagline,
  #screen-history > .history-filter-block { flex: none; }
  #screen-history h1 { margin-bottom: 2px; }
  #screen-history .tagline { margin-bottom: 10px; }
  #screen-history .filter-row { margin-bottom: 6px; }
  .history-filter-block {
    margin-bottom: 10px; padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  #screen-history .history-table-wrap:not(.hidden) {
    flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable;
  }
  #screen-history .stats-empty:not(.hidden) { flex: 1; }

  .result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; width: 100%; }
  .result-actions .primary { margin-top: 0; min-height: 48px; }
  #be-back { min-height: 42px; padding: 9px 20px; font-size: 0.95rem; font-weight: 700; }
  .share-button {
    min-height: 48px; padding: 10px; border: 1px solid rgba(255,255,255,0.16);
    border-radius: 14px; background: var(--card2); color: var(--text);
    cursor: pointer; font-size: 0.95rem; font-weight: 700;
  }
  .share-button:hover { border-color: var(--accent); background: #2a3560; }
  .share-button.copied { border-color: var(--good); color: var(--good); }

  /* Keep every post-game action visible in a desktop-height card. The answer
     breakdown is the flexible region; it scrolls internally when needed. */
  @media (min-width: 681px) {
    #screen-results:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
    #screen-results > h1 { margin-bottom: 2px; }
    #screen-results .final-score { font-size: 2.65rem; margin: 2px 0 0; line-height: 1.1; }
    #screen-results .final-sub { margin-bottom: 7px; }
    #screen-results .pb-banner { min-height: 1.15em; margin-bottom: 5px; }
    #screen-results .stage { height: 66px; margin: 0 0 6px; flex: none; }
    #screen-results .stage-sprite { top: 7px; width: 52px; height: 52px; margin-left: -26px; }
    #screen-results .stage-sprite .bob,
    #screen-results .stage-sprite svg { width: 52px; height: 52px; }
    #screen-results .stats { gap: 8px; margin-bottom: 8px; flex: none; }
    #screen-results .stat { padding: 7px; }
    #screen-results .stat .num { font-size: 1.1rem; }
    #screen-results .breakdown {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(5, auto);
      grid-auto-flow: column;
      flex: none; min-height: 0; max-height: none; overflow: visible;
    }
    #screen-results .row { gap: 6px; padding: 5px 8px; font-size: 0.82rem; }
    #screen-results .row > span:last-child { flex: none; white-space: nowrap; }
    #screen-results .result-actions { margin-top: 8px; flex: none; }
    #screen-results .result-actions .primary,
    #screen-results .share-button { min-height: 42px; }
  }

  /* Quiz screen */
  /* Timer style picker */
  .modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mode-btn {
    padding: 10px 0; border-radius: 10px; border: 2px solid transparent;
    background: var(--card2); color: var(--text); font-size: 1rem; cursor: pointer;
    transition: transform 0.08s, border-color 0.15s;
  }
  .mode-btn:hover { transform: translateY(-2px); }
  .mode-btn.selected { border-color: var(--accent); background: #2a3560; }

  /* Falling-question mode */
  .fall-zone { position: relative; }
  #screen-quiz.fall-mode .timer-bar-wrap { display: none; }
  #screen-quiz.fall-mode .fall-zone {
    height: 210px; margin-bottom: 16px; overflow: hidden;
    border-bottom: 2px dashed rgba(255,92,116,0.5);
  }
  #screen-quiz.fall-mode .question {
    position: absolute; left: 0; right: 0; margin: 0;
    transition: transform 0.1s linear;
    will-change: transform;
  }
  .question.qwarn { color: var(--warn); }
  .question.qdanger { color: var(--bad); }

  .quiz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--muted); font-size: 0.95rem; }
  .quiz-progress { display: flex; flex-direction: column; gap: 2px; }
  #game-context { color: var(--text); font-size: 0.82rem; font-weight: 700; }
  .score-live { font-weight: 600; color: var(--text); }
  .timer-bar-wrap { height: 10px; background: var(--card2); border-radius: 6px; overflow: hidden; margin-bottom: 26px; }
  .timer-bar { height: 100%; width: 100%; background: var(--good); border-radius: 6px; transition: width 0.1s linear; }
  .timer-bar.warn { background: var(--warn); }
  .timer-bar.danger { background: var(--bad); }
  .question {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin: 10px 0 26px;
    font-variant-numeric: tabular-nums;
  }
  /* Connected SVG radical: hook, rise, and vinculum are one scalable stroke. */
  .radical-svg { display: inline-block; height: 1.3em; width: auto; vertical-align: -0.22em; overflow: visible; }
  .radical-svg path {
    fill: none; stroke: currentColor; stroke-width: 5;
    stroke-linecap: square; stroke-linejoin: miter;
  }
  .radical-svg text {
    fill: currentColor; font: 700 44px "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
  }
  .answer-row { display: flex; gap: 10px; }
  #answer, #blaster-answer {
    flex: 1;
    min-width: 0;
    font-size: 1.5rem;
    padding: 12px 16px;
    border-radius: 14px;
    border: 2px solid var(--card2);
    background: var(--card2);
    color: var(--text);
    text-align: center;
    outline: none;
  }
  #answer:focus, #blaster-answer:focus { border-color: var(--accent); }
  #answer::-webkit-outer-spin-button, #answer::-webkit-inner-spin-button,
  #blaster-answer::-webkit-outer-spin-button, #blaster-answer::-webkit-inner-spin-button { -webkit-appearance: none; }
  #submit, #blaster-submit {
    padding: 12px 22px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    background: var(--accent);
    color: white;
    cursor: pointer;
  }
  #submit:hover, #blaster-submit:hover { filter: brightness(1.12); }
  .feedback {
    text-align: center;
    min-height: 28px;
    margin-top: 18px;
    font-size: 1.1rem;
    font-weight: 600;
  }
  .feedback.good { color: var(--good); }
  /* wrong answer: correct value gets its own big line, reason is small support text */
  .feedback.bad { color: var(--bad); display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .feedback.bad .fb-reason { font-size: 0.95rem; opacity: 0.85; }
  .feedback.bad .fb-answer { font-size: 2.1rem; font-weight: 700; line-height: 1.2; color: var(--text); }
  .feedback.bad .fb-answer b { color: var(--warn); }

  /* Get-ready countdown overlay */
  #screen-quiz { position: relative; }
  .countdown {
    position: absolute; inset: 0; z-index: 6;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--card); border-radius: 20px; gap: 8px;
  }
  .countdown .cd-label { color: var(--muted); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .countdown #countdown-num {
    font-size: 5.5rem; font-weight: 800; line-height: 1;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  @keyframes cd-pop { from { transform: scale(0.4); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
  .countdown.animate #countdown-num { animation: cd-pop 0.45s ease; }

  /* In-game character + happy/sad frame animations */
  .game-char {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    margin-top: 16px; min-height: 82px;
  }
  .game-char svg { width: 64px; height: 64px; transform-origin: bottom center; }
  .game-char .char-name { color: var(--muted); font-size: 0.75rem; }
  /* happy: a two-frame hop (steps() snaps between frames for that 8-bit feel) */
  @keyframes char-hop {
    0%, 49%   { transform: translateY(0)    scaleY(1); }
    50%, 100% { transform: translateY(-9px) scaleY(1.06); }
  }
  .game-char.happy svg { animation: char-hop 0.16s steps(1) 5; }
  /* sad: a two-frame droop/wobble */
  @keyframes char-droop {
    0%, 49%   { transform: translateY(0)   rotate(-7deg); }
    50%, 100% { transform: translateY(4px) rotate(7deg); }
  }
  .game-char.sad svg { animation: char-droop 0.2s steps(1) 4; filter: grayscale(0.4) brightness(0.85); }

  /* Drumroll blackout before results */
  .blackout {
    position: fixed; inset: 0; z-index: 50; background: #000; opacity: 0;
    transition: opacity 0.25s ease; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
  }
  .blackout.show { opacity: 1; pointer-events: auto; }
  .blackout.fade { opacity: 0; }
  .blackout-text {
    color: #fff; font-size: 1.4rem; letter-spacing: 0.18em; text-transform: uppercase;
    animation: blk-pulse 0.55s ease-in-out infinite alternate;
  }
  @keyframes blk-pulse { from { opacity: 0.25; } to { opacity: 1; } }

  /* Blaster mode */
  #screen-blaster { position: relative; }
  .blaster-field {
    position: relative; height: 210px; margin-bottom: 16px; overflow: hidden;
    background: rgba(255,255,255,0.02); border-radius: 12px;
    border-bottom: 3px solid var(--bad);
  }
  .mark {
    position: absolute; top: 0; width: 30px; text-align: center;
    font-size: 1.9rem; font-weight: 800; color: var(--accent);
    text-shadow: 0 0 8px rgba(108,140,255,0.55);
    will-change: top;
  }
  .mark.near { color: var(--warn); text-shadow: 0 0 10px rgba(255,207,92,0.7); }
  @keyframes field-surge { 0% { background: rgba(255,92,116,0.28); } 100% { background: rgba(255,255,255,0.02); } }
  .blaster-field.surge { animation: field-surge 0.4s ease-out; }

  /* the player's character as a blaster turret at the bottom of the field */
  .blaster-turret {
    position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; z-index: 3; pointer-events: none;
  }
  .turret-gun {
    width: 9px; height: 15px; border-radius: 3px 3px 1px 1px;
    background: linear-gradient(var(--accent2), var(--accent));
    box-shadow: 0 0 5px rgba(108,140,255,0.7); margin-bottom: -4px;
  }
  .turret-char svg { display: block; width: 46px; height: 46px; }
  @keyframes turret-recoil {
    0% { transform: translateX(-50%) translateY(0) scale(1); }
    25% { transform: translateX(-50%) translateY(5px) scale(0.95); }
    100% { transform: translateX(-50%) translateY(0) scale(1); }
  }
  .blaster-turret.fire { animation: turret-recoil 0.22s ease-out; }

  .beam {
    position: absolute; height: 3px; border-radius: 2px; transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(108,140,255,0.15), var(--good));
    box-shadow: 0 0 7px var(--good); z-index: 2; pointer-events: none;
    animation: beam-fade 0.18s ease-out forwards;
  }
  @keyframes beam-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
  .muzzle-flash {
    position: absolute; width: 15px; height: 15px; border-radius: 50%; z-index: 4; pointer-events: none;
    background: radial-gradient(circle, #fff 10%, var(--good) 55%, transparent 72%);
    animation: flash-pop 0.2s ease-out forwards;
  }
  @keyframes flash-pop {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
  }
  @keyframes mark-pop { from { transform: scale(1); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
  .mark.blasted { color: var(--good); animation: mark-pop 0.3s ease-out forwards; }

  #blaster-cd-num {
    font-size: 5.5rem; font-weight: 800; line-height: 1;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .countdown.animate #blaster-cd-num { animation: cd-pop 0.45s ease; }

  .blaster-end {
    position: absolute; inset: 0; z-index: 7; border-radius: 20px;
    background: rgba(27,33,56,0.97);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 20px; text-align: center;
  }
  .be-title { font-size: 2.1rem; font-weight: 800; }
  .be-title.win { color: var(--good); }
  .be-title.lose { color: var(--bad); }
  .be-sub { color: var(--muted); }
  .be-coins { font-size: 1.35rem; font-weight: 700; margin: 4px 0; }

  /* Shop + Profile (locker) */
  .charstack { position: relative; display: inline-block; vertical-align: middle; }
  .charstack svg { position: absolute; top: 0; left: 0; }
  #screen-profile { overflow: hidden; }
  #screen-profile:not(.hidden) { display: flex; flex-direction: column; }
  #screen-profile > * { flex: none; }
  #screen-profile > .tagline { margin-bottom: 10px; }
  #screen-profile > .label { margin: 10px 0 6px; }
  #avatar-pick { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  #avatar-pick .avatar-btn { padding: 4px 2px; }
  #screen-profile > #profile-list {
    flex: 1; min-height: 36px; overflow-y: auto;
    scrollbar-width: none;
  }
  #profile-list::-webkit-scrollbar { display: none; }

  #screen-results, #screen-shop, #screen-locker, #screen-history,
  #screen-quiz, #screen-blaster {
    overflow-y: auto;   /* scroll (not spill) if content exceeds a short viewport */
  }
  /* Shop/Profile can still scroll on short windows, but a scrollbar must not
     shift their centered titles and right-aligned Back buttons away from Stats. */
  #screen-shop, #screen-locker { scrollbar-width: none; }
  #screen-shop::-webkit-scrollbar, #screen-locker::-webkit-scrollbar { display: none; }
  body:has(#screen-shop:not(.hidden)) .app,
  body:has(#screen-locker:not(.hidden)) .app,
  body:has(#screen-history:not(.hidden)) .app { max-width: var(--app-width); }
  #screen-shop, #screen-locker { margin-inline: auto; }
  .shop-tabs {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
    width: 100%; max-width: 620px; margin: 0 auto 16px;
  }
  .shop-tabs button {
    padding: 9px 4px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    background: var(--card2); color: var(--muted); cursor: pointer;
    font-size: 0.9rem; font-weight: 700; white-space: nowrap;
  }
  .shop-tabs button span { color: var(--muted); font-size: 0.78em; white-space: nowrap; }
  /* On phones the five labels won't fit in a row — wrap to a 3-column grid and
     let each button's text wrap rather than spill past its cell. */
  @media (max-width: 560px) {
    .shop-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 440px; gap: 5px; }
    .shop-tabs button { padding: 7px 2px; font-size: 0.82rem; white-space: normal; line-height: 1.2; }
  }
  .shop-tabs button.selected {
    border-color: var(--accent); background: #2a3560; color: var(--text);
    box-shadow: inset 0 -2px 0 var(--accent);
  }
  .shop-tab-panels { width: 100%; max-width: 720px; margin-inline: auto; }

  /* Profile (locker) tab panels: stack all five in a single grid cell so the
     container is always as tall as the tallest cosmetic category. The
     inactive panels stay in the layout as invisible placeholders instead of
     collapsing, so switching among cosmetic categories never changes the height — the
     settings checkboxes below no longer jump. */
  #screen-locker .locker-tab-panels { display: grid; }
  #screen-locker .locker-tab-panels > .shop-tab-panel { grid-column: 1; grid-row: 1; }
  #screen-locker .locker-tab-panels > .shop-tab-panel.hidden {
    display: block; visibility: hidden;
  }
  #screen-shop .shop-grid, #screen-locker .shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .shop-columns { display: grid; width: 100%; max-width: 1000px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 30px); margin-inline: auto; }
  .shop-column .label { margin-top: 0; }
  .shop-hats .shop-grid, .shop-shirts .shop-grid, .shop-pants .shop-grid, .shop-boots .shop-grid, .shop-music .shop-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .shop-hats .hat-card, .shop-shirts .hat-card, .shop-pants .hat-card, .shop-boots .hat-card, .shop-music .hat-card { flex: 0 1 calc((100% - 20px) / 3); }
  .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hat-card {
    background: var(--card2); border: 2px solid transparent; border-radius: 12px;
    min-height: 197px; padding: 10px; text-align: center;
    display: flex; flex-direction: column;
  }
  .hat-card > button:last-child { margin-top: auto; }
  .hat-card.owned { border-color: rgba(61,220,132,0.35); }
  .hat-card.equipped { border-color: var(--good); }
  .hat-card.locked .hat-preview { opacity: 0.4; filter: grayscale(0.5); }
  .hat-preview { height: 58px; display: flex; align-items: center; justify-content: center; }
  .song-note { font-size: 2.4rem; line-height: 1; color: var(--accent); }
  .hat-card.equipped .song-note { color: var(--good); }
  .hat-card.locked .song-note { color: var(--muted); }
  .hat-card button + div + button { margin-top: 0; }
  .hat-name { font-size: 0.92rem; font-weight: 600; }
  .hat-cost { font-size: 0.82rem; color: var(--warn); margin: 2px 0 8px; }
  .hat-cost.owned-tag { color: var(--good); }
  .hat-card button {
    width: 100%; min-width: 0; padding: 7px 0; border: none; border-radius: 8px;
    cursor: pointer; font-size: 0.82rem; font-weight: 600;
    white-space: normal;
  }
  .hat-card button.buy { background: var(--accent); color: #fff; }
  .hat-card button.equip { background: var(--card); color: var(--text); border: 1px solid rgba(255,255,255,0.18); }
  .hat-card button.equipped-btn { background: var(--good); color: #10281b; }
  .hat-card button:disabled { filter: grayscale(0.6) brightness(0.55); cursor: not-allowed; }
  #screen-locker > h1 { margin-bottom: 2px; }
  .locker-hero { display: flex; align-items: center; gap: 16px; margin: 0 0 10px; }
  #locker-char { width: 72px; height: 72px; flex: 0 0 auto; line-height: 0; }
  .locker-name { font-size: 1.25rem; font-weight: 700; }
  .locker-coins { color: var(--warn); font-weight: 600; margin-top: 2px; }
  .locker-sub { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
  .leaderboard-preference {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--card2); border-radius: 9px; padding: 6px 8px; margin: 0;
  }
  .kid-profile-setting {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--card2); border-radius: 9px; padding: 6px 8px; margin: 0;
  }
  .profile-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
  .leaderboard-pref-title { font-size: 0.72rem; font-weight: 700; line-height: 1.15; }
  .leaderboard-pref-copy, .leaderboard-pref-status, .leaderboard-date, .leaderboard-status, .leaderboard-empty {
    color: var(--muted); font-size: 0.62rem; line-height: 1.2;
  }
  .leaderboard-pref-status { margin-top: 1px; }
  .toggle-label { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 0.67rem; font-weight: 600; cursor: pointer; }
  .toggle-label input { width: 15px; height: 15px; accent-color: var(--good); }
  .leaderboard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .leaderboard-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .leaderboard-groups button {
    padding: 6px; border: 1px solid transparent; border-radius: 8px; background: rgba(255,255,255,.06);
    color: var(--muted); font-size: .78rem; font-weight: 700; cursor: pointer;
  }
  .leaderboard-groups button.selected { color: var(--text); border-color: var(--warn); background: rgba(255,207,92,.12); }
  .leaderboard-row {
    /* Name column is minmax(10ch, 1fr): it always fits at least 10 characters
       before ellipsing, and the rank/score columns are sized to the widest real
       value (rank 50, a 4-digit score) so the leftover width goes to the name. */
    display: grid; grid-template-columns: 26px 30px minmax(10ch, 1fr) 50px 76px; gap: 7px; align-items: center;
    min-height: 38px; padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.07);
    font-variant-numeric: tabular-nums;
  }
  .leaderboard-row.mine { background: rgba(61,220,132,.1); }
  .leaderboard-rank { color: var(--muted); font-weight: 700; }
  .leaderboard-character {
    display: inline-flex; align-items: center; justify-content: center; line-height: 0;
    width: 30px; height: 32px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: inherit; cursor: pointer;
  }
  @keyframes leaderboard-happy-dance {
    0%, 100% { transform: translateY(0) rotate(0); }
    20% { transform: translateY(-4px) rotate(-9deg); }
    40% { transform: translateY(0) rotate(0); }
    60% { transform: translateY(-4px) rotate(9deg); }
    80% { transform: translateY(0) rotate(0); }
  }
  @media (hover: hover) {
    .leaderboard-character:hover .charstack {
      animation: leaderboard-happy-dance 0.65s ease-in-out infinite;
      transform-origin: 50% 85%;
    }
  }
  .leaderboard-character.tap-dancing .charstack {
    animation: leaderboard-happy-dance 0.65s ease-in-out 1;
    transform-origin: 50% 85%;
  }
  .leaderboard-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .leaderboard-correct { text-align: right; color: var(--muted); }
  .leaderboard-row b { color: var(--warn); text-align: right; }
  .leaderboard-empty { padding: 24px; text-align: center; }

  @media (max-width: 760px) {
    .shop-columns { grid-template-columns: 1fr; gap: 24px; }
    .shop-hats .shop-grid, .shop-shirts .shop-grid, .shop-pants .shop-grid, .shop-boots .shop-grid, .shop-music .shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-hats .hat-card, .shop-shirts .hat-card, .shop-pants .hat-card, .shop-boots .hat-card, .shop-music .hat-card { flex-basis: auto; }
    #screen-shop .shop-grid, #screen-locker .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #setup-tagline { height: 4.2em; }
    #avatar-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .profile-settings { grid-template-columns: 1fr; }
  }

  /* Short windows (laptops, landscape phones): reclaim vertical space from
     padding so the setup screen fits without scrolling. Placed after the
     width rules above so it isn't overridden by them.
     The tagline height is deliberately NOT reduced — it wraps to more lines on
     narrow screens, and clamping it would clip the text. */
  @media (max-height: 780px) {
    #setup-mode-content .label { margin: 6px 0 5px; }
    #setup-mode-content .op-btn { padding-block: 7px; }
    #setup-mode-content .lvl-btn { padding-block: 5px; }
    #setup-mode-content .mode-btn { padding-block: 6px; }
    #setup-mode-content .primary { padding-block: 9px; }
    #setup-mode-content #timer-style-row { margin-bottom: 12px; }
  }

  /* Results screen — end-of-game character stage */
  .stage { position: relative; width: 100%; height: 92px; overflow: hidden; margin: 6px 0 14px; }
  /* The dance rises above the compact desktop stage. Let the Results character
     use the empty space above it so tall hats and rotated corners are not cut
     off; other stages keep clipping their chase animation horizontally. */
  #results-stage { overflow: visible; }
  .stage-sprite { position: absolute; top: 14px; left: 50%; width: 64px; height: 64px; margin-left: -32px; }
  .stage-sprite .bob { width: 64px; height: 64px; }
  .stage-sprite svg { display: block; width: 64px; height: 64px; }
  .stage-sprite.lion { left: auto; right: -88px; margin-left: 0; opacity: 0; }
  .stage-sprite.lion.chasing { opacity: 1; }

  @keyframes stage-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  .stage-sprite.idle .bob { animation: stage-idle 1.5s ease-in-out infinite; }

  /* high score: a little dance */
  @keyframes stage-dance {
    0%   { transform: translateY(0)    rotate(0deg); }
    25%  { transform: translateY(-13px) rotate(-15deg); }
    50%  { transform: translateY(0)    rotate(0deg); }
    75%  { transform: translateY(-13px) rotate(15deg); }
    100% { transform: translateY(0)    rotate(0deg); }
  }
  .stage-sprite.dancing .bob { animation: stage-dance 0.55s ease-in-out infinite; }

  /* low score: character flees left, lion charges in and chases it off */
  @keyframes stage-flee  { 0%, 8% { transform: translateX(0); } 100% { transform: translateX(-340px); } }
  @keyframes stage-chase { 0% { transform: translateX(0); } 100% { transform: translateX(-560px); } }
  @keyframes stage-run   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  .stage-sprite.fleeing { animation: stage-flee 1.6s ease-in forwards; }
  .stage-sprite.chasing { animation: stage-chase 1.7s ease-in 0.12s forwards; }
  .stage-sprite.fleeing .bob,
  .stage-sprite.chasing .bob { animation: stage-run 0.16s ease-in-out infinite; }

  /* Results screen */
  .final-score { text-align: center; font-size: 3.2rem; font-weight: 800; margin: 10px 0 2px; }
  .final-sub { text-align: center; color: var(--muted); margin-bottom: 20px; }
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
  .stat { background: var(--card2); border-radius: 12px; padding: 12px; text-align: center; }
  .stat .num { font-size: 1.3rem; font-weight: 700; }
  .stat .cap { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
  .breakdown { max-height: 260px; overflow-y: auto; border-radius: 12px; }
  .row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 14px; font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-variant-numeric: tabular-nums;
  }
  .row:nth-child(odd) { background: rgba(255,255,255,0.025); }
  .row .q { color: var(--muted); }
  .row .pts.plus { color: var(--good); font-weight: 600; }
  .row .pts.minus { color: var(--bad); font-weight: 600; }
  .row .your-wrong { color: var(--bad); text-decoration: line-through; margin-right: 6px; }
  .hidden { display: none; }

  /* Accessibility: calm the decorative/looping motion for players who ask for
     reduced motion. Functional motion (timer bar, falling marks) is left intact. */
  @media (prefers-reduced-motion: reduce) {
    .game-char.happy svg, .game-char.sad svg,
    .stage-sprite.dancing .bob, .stage-sprite.idle .bob,
    .stage-sprite.fleeing, .stage-sprite.chasing,
    .stage-sprite.fleeing .bob, .stage-sprite.chasing .bob,
    .leaderboard-character:hover .charstack,
    .leaderboard-character.tap-dancing .charstack,
    .be-char.win svg, .be-char.lose svg,
    .blaster-turret.fire, .mark.blasted,
    .countdown.animate #countdown-num, .countdown.animate #blaster-cd-num,
    .blaster-field.surge, .blackout-text {
      animation: none !important;
    }
  }

  /* Visible keyboard focus for all interactive controls */
  button:focus-visible, input:focus-visible, .app-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Build/version and creator credit on the player-select screen */
  .build-tag { text-align: center; color: var(--muted); font-size: 0.7rem; opacity: 0.7; margin-top: 14px; }

  /* Daily Challenge */
  #game-modes { grid-template-columns: repeat(3, 1fr); }
  .daily-card {
    background: var(--card2); border-radius: 12px; padding: 16px; text-align: center;
  }
  .daily-dashboard { display: flex; align-items: stretch; }
  .daily-dashboard .daily-card { display: flex; flex: 1; flex-direction: column; justify-content: center; }
  .daily-leaderboard {
    background: linear-gradient(145deg, rgba(255,207,92,.12), var(--card2) 45%);
    border: 1px solid rgba(255,207,92,.3); border-radius: 12px; padding: 13px 14px;
    min-height: 150px;
  }
  .daily-leaderboard-title { font-size: 1.05rem; font-weight: 800; color: var(--warn); }
  .daily-leaderboard #leaderboard-table { max-height: 178px; overflow-y: auto; }
  @media (max-width: 680px) {
    #screen-setup .setup-head { flex-wrap: wrap; gap: 6px; }
    #screen-setup .setup-head > span:last-child { width: 100%; justify-content: flex-end; }
    .card > .setup-head { height: 74px; min-height: 74px; margin-bottom: 0; }
    .card > h1 { height: 36px; }
    #screen-profile::before, #screen-results::before { height: 74px; }
    /* Stack the Daily panel: challenge card, timer, Start, then leaderboard.
       The card/timer/Start are fixed height and always fit, so Start stays
       visible; the leaderboard takes whatever height is left and scrolls
       internally (min-height:0) instead of pushing the page into a scroll. */
    #setup-mode-content:has(#daily-panel:not(.hidden)) { display: flex; }
    #setup-mode-content > #daily-panel:not(.hidden) { flex: none; }
    #setup-mode-content > .daily-leaderboard:not(.hidden) {
      flex: 1 1 0; margin-top: 12px; min-height: 0;
    }
    #setup-mode-content:has(#daily-panel:not(.hidden)) .primary { margin-top: 0; }
    .daily-leaderboard #leaderboard-table { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }

    /* The setup card height-caps at 760px, so a phone's Daily view is tight no
       matter how tall the device is — compact the challenge card and the
       leaderboard's header chrome by width (not height) so a few leaders always
       show below Start without the page scrolling. Scoped with #ids so these
       win over the base .daily-card / .daily-leaderboard rules later in the file. */
    #setup-tagline { height: 2.6em; margin-bottom: 8px; }
    #setup-mode-content #daily-panel > .label { display: none; }
    #setup-mode-content #daily-panel .daily-card { padding: 10px 12px; }
    #setup-mode-content #daily-panel .daily-date { font-size: 0.95rem; }
    #setup-mode-content #daily-panel .daily-challenge { font-size: 1.2rem; margin: 3px 0 5px; }
    #setup-mode-content #daily-panel .daily-status { font-size: 0.8rem; line-height: 1.3; }
    #setup-mode-content .daily-leaderboard { padding: 8px 12px; min-height: 0; }
    #setup-mode-content .daily-leaderboard-title { font-size: 0.95rem; }
    #setup-mode-content .daily-leaderboard .leaderboard-date { display: none; }
    #setup-mode-content .daily-leaderboard .leaderboard-head { margin-bottom: 5px; }
    #setup-mode-content .daily-leaderboard .leaderboard-groups { margin-bottom: 5px; }
    #setup-mode-content .daily-leaderboard .leaderboard-groups button { padding: 4px; }
  }
  /* Narrow-screen leaderboard sizing. These live after the .daily-leaderboard
     base rule so the padding override actually wins on source order.
     The 10ch name floor can't shrink, so width is clawed back from the numeric
     columns; below 360px the row font also steps down, which shrinks 10ch
     proportionally — still ten characters, just smaller. */
  @media (max-width: 480px) {
    /* Keep the Shop Back button anchored even with a long player name and a
       seven-digit wallet. The equipped character still identifies the player. */
    #screen-shop .setup-head > b { font-size: 0; }
    #screen-shop .setup-head > b .avatar-inline { margin-right: 0; }
    #screen-shop .setup-head > span { gap: 6px !important; }
    .leaderboard-row {
      grid-template-columns: 22px 30px minmax(10ch, 1fr) 46px 64px; gap: 5px; padding: 5px 6px;
    }
  }
  @media (max-width: 360px) {
    .daily-leaderboard { padding: 13px 8px; }
    /* Don't shrink the font here: `ch` is the width of "0", so a smaller font
       would shrink the floor faster than real mixed-case text — 10ch would stop
       holding ten actual letters. Instead drop the rank number, which is the one
       column the reader can infer from row order, and keep the name at 10ch. */
    .leaderboard-rank { display: none; }
    .leaderboard-row {
      grid-template-columns: 30px minmax(10ch, 1fr) 44px 48px; gap: 4px; padding: 5px 4px;
    }
  }
  .daily-date { font-weight: 700; font-size: 1.05rem; }
  .daily-challenge {
    font-size: 1.6rem; font-weight: 800; margin: 6px 0 8px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .daily-status { color: var(--text); font-size: 0.95rem; }
  .daily-status .daily-sub { color: var(--muted); font-size: 0.85rem; }