/* The Console layout on a phone (November 2026). Loaded after the other
   console sheets; every rule here is inside a phone's media query, so a
   wider screen is untouched.

   Portrait phones are 640px wide and under. A phone on its side is a touch
   screen under 500px tall. */

/* ---------- a game's bar on a phone ----------
   One periwinkle row of the same height on every game: the wordmark, the
   game's name beside it, then Share and the Menu (the rules' "?" waits in
   the Menu, game-menu.js). The round's squares, the time setting, the clock and a
   game's tally sit in a slim row under the bar, on the page. */
@media (max-width: 640px) {
  :root { --phone-bar: 54px; }
  html:root:not(.party-game) #topbar {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 6px; row-gap: 0;
    min-height: 0; margin: 0 0 4px; padding: 0 8px 4px 10px;
    box-shadow: none; border: 0;
    background:
      linear-gradient(var(--f-ink, #1d1838), var(--f-ink, #1d1838)) 0 var(--phone-bar) / 100% 4px no-repeat,
      repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px) 0 calc(var(--phone-bar) - 3px) / 100% 3px no-repeat,
      linear-gradient(var(--shell), var(--shell)) 0 0 / 100% var(--phone-bar) no-repeat;
  }
  html:root:not(.party-game) #topbar .topbar-right { display: contents; }
  /* Everything waits for the second row unless it belongs to the first. */
  html:root:not(.party-game) #topbar > *, html:root:not(.party-game) #topbar .topbar-right > * { order: 3; }
  html:root:not(.party-game) #topbar::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  html:root:not(.party-game) #topbar > :is(.hud-home, h1, .brand),
  html:root:not(.party-game) #topbar .topbar-right > :is(#solo-share, #game-menu-btn) { order: 1; }

  html:root:not(.party-game) #topbar .hud-home {
    height: var(--phone-bar); margin: 0; flex: none;
    font-size: 20px; gap: 6px;
  }
  html:root:not(.party-game) #topbar .hud-home .shell-globe { width: 26px; height: 26px; }
  html:root:not(.party-game) #topbar .hud-home .hud-name { display: inline; }

  /* The title: up to two lines, shrunk to fit (kit.js) rather than cut. */
  html:root:not(.party-game) #topbar > h1,
  html:root:not(.party-game) #topbar > .brand > h1 {
    display: flex; align-items: center; gap: 6px;
    flex: 1 1 0; min-width: 0; height: var(--phone-bar); margin: 0;
    font-size: 20px; line-height: .95;
    white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: normal;
  }
  html:root:not(.party-game) #topbar > .brand { display: flex; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }
  html:root:not(.party-game) #topbar > h1::before,
  html:root:not(.party-game) #topbar > .brand > h1::before { content: ""; width: 3px; height: 26px; background: var(--f-ink); opacity: .45; flex: none; }

  html:root:not(.party-game) #topbar .topbar-right > :is(#solo-share, #game-menu-btn) {
    display: grid; place-items: center; flex: none;
    width: 40px; min-width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0;
  }
  html:root:not(.party-game) #topbar #game-menu-btn::after { content: none; }
  /* The rules' "?" and the settings live in the Menu on a phone. */
  html:root:not(.party-game) #topbar .topbar-right > :is(#help-btn, #settings-ctl, .hud-main, .hud-links) { display: none; }

  /* The second row: the round on the left, a time setting or clock on the
     right, small and close under the bar. */
  html:root:not(.party-game) #topbar :is(.round-chip, .solo-time-setting, #solo-clock, .hunt-clock, .ow-solo-side, .menu-solo, #city-track) {
    margin: 8px 0 0; flex: none;
  }
  html:root:not(.party-game) #topbar .round-chip { margin-right: auto; color: var(--text); }
  html:root:not(.party-game) #topbar .round-chip:empty { display: none; }
  html:root:not(.party-game) #topbar .round-chip .steps { gap: 4px; }
  html:root:not(.party-game) #topbar .round-chip .step { width: 14px; height: 14px; }
  html:root:not(.party-game) #topbar :is(.solo-time-setting, #solo-clock, .hunt-clock, .ow-solo-side) { margin-left: auto; color: var(--text); }
  html:root:not(.party-game) #topbar .solo-time-setting { font: 400 15px/1 var(--pixel); }
  html:root:not(.party-game) #topbar .solo-time-setting select { min-height: 36px; font-size: 16px; }
  html:root:not(.party-game) #topbar #solo-clock { font-size: 18px; }
}
@media (max-width: 359px) {
  /* Too narrow for the wordmark and a name: the globe stands for it. */
  html:root:not(.party-game) #topbar .hud-home .hud-name { display: none; }
  html:root:not(.party-game) #topbar .hud-home .shell-globe { width: 28px; height: 28px; }

}
/* City Limits writes its own bar: its title carries the city's difficulty,
   so it stays a size that fits two lines beside the wordmark. */
@media (max-width: 640px) {
  html:root:not(.party-game) #topbar > .brand > h1 { font-size: 18px; }
  html:root:not(.party-game) #topbar > .round-info { display: none; }
}
@media (max-width: 640px) {
  /* City Limits' "?" (in the Menu) is drawn like every other game's. */
  html:root:not(.party-game) #topbar #help-btn:not(.icon-btn) {
    border-color: var(--f-ink); color: var(--text); background: var(--panel);
    box-shadow: var(--plain-face), var(--f-bevel-sm);
    font: 500 18px/1 var(--mono, monospace);
  }
}
/* The Menu on a phone: How to play beside Settings, the same size. */
@media (max-width: 640px) {
  html:root:not(.party-game) #topbar #game-menu #help-btn {
    order: 0; flex: 1 1 0; width: auto; min-width: 0; height: 44px; margin: 0; padding: 0 12px;
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  }
  html:root:not(.party-game) #topbar #game-menu #settings-btn { order: 1; height: 44px; }
  html:root:not(.party-game) #topbar #game-menu .nav-box { height: 44px; }
}

/* ---------- a game's bar on a phone on its side ----------
   One slim row, 44px: the wordmark, the title, the round and time setting,
   then "?" and the Menu. The site's keys (Main Menu, Leagues, Leaderboard,
   the account), Settings and Share wait in the Menu, as in portrait, so the
   board keeps the height. */
@media (pointer: coarse) and (max-height: 500px) {
  :root { --phone-bar: 44px; }
  html:root:not(.party-game) #topbar {
    display: flex; flex-wrap: nowrap; align-items: center; column-gap: 8px; row-gap: 0;
    height: var(--phone-bar); min-height: 0; margin: 0 0 8px; padding: 0 max(8px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    border: 0; box-shadow: 0 4px 0 var(--f-ink, #1d1838);
    background: var(--gold-trim), var(--shell);
  }
  html:root:not(.party-game) #topbar::after { content: none; }
  html:root:not(.party-game) #topbar .topbar-right { display: contents; }
  html:root:not(.party-game) #topbar > *, html:root:not(.party-game) #topbar .topbar-right > * { order: 3; margin: 0; }
  html:root:not(.party-game) #topbar > :is(.hud-home, h1, .brand) { order: 1; }
  html:root:not(.party-game) #topbar .topbar-right > :is(#solo-share, #game-menu-btn) { order: 4; }
  html:root:not(.party-game) #topbar .hud-home { flex: none; height: auto; font-size: 20px; gap: 6px; }
  html:root:not(.party-game) #topbar .hud-home .shell-globe { width: 24px; height: 24px; }
  html:root:not(.party-game) #topbar .hud-home .hud-name { display: inline; }
  html:root:not(.party-game) #topbar > h1,
  html:root:not(.party-game) #topbar > .brand > h1 {
    display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; height: auto; margin: 0;
    font-size: 20px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html:root:not(.party-game) #topbar > .brand { display: flex; flex: 0 1 auto; min-width: 0; }
  html:root:not(.party-game) #topbar > h1::before,
  html:root:not(.party-game) #topbar > .brand > h1::before { content: ""; width: 3px; height: 22px; background: var(--f-ink); opacity: .45; flex: none; }
  html:root:not(.party-game) #topbar .topbar-right > :is(#help-btn, #settings-ctl, .hud-main, .hud-links) { display: none; }
  html:root:not(.party-game) #topbar > .round-info { display: none; }
  /* The round and the time setting sit at the right, before the keys. */
  html:root:not(.party-game) #topbar :is(.round-chip, .solo-time-setting, #solo-clock, .hunt-clock, .ow-solo-side, #city-track) { flex: none; color: var(--text); }
  html:root:not(.party-game) #topbar :is(.round-chip, .solo-time-setting, #solo-clock, .hunt-clock, .ow-solo-side, #city-track):not([hidden]) { margin-left: auto; }
  html:root:not(.party-game) #topbar :is(.round-chip, .solo-time-setting, #solo-clock, .hunt-clock, .ow-solo-side, #city-track):not([hidden]) ~ :is(.round-chip, .solo-time-setting, #solo-clock, .hunt-clock, .ow-solo-side, #city-track) { margin-left: 0; }
  html:root:not(.party-game) #topbar .round-chip:empty { display: none; }
  html:root:not(.party-game) #topbar .round-chip .step { width: 12px; height: 12px; }
  html:root:not(.party-game) #topbar .solo-time-setting { font: 400 14px/1 var(--pixel); }
  html:root:not(.party-game) #topbar .solo-time-setting select { min-height: 34px; height: 34px; font-size: 16px; }
  html:root:not(.party-game) #topbar .topbar-right > #solo-share,
  html:root:not(.party-game) #topbar .topbar-right > #game-menu-btn {
    display: grid; place-items: center; flex: none;
    width: 40px; min-width: 40px; height: 36px; margin: 0; padding: 0;
  }
  html:root:not(.party-game) #topbar #game-menu-btn::after { content: none; }
  html:root:not(.party-game) #topbar #game-menu #help-btn {
    flex: 1 1 0; width: auto; min-width: 0; height: 42px; margin: 0; padding: 0 12px;
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  }
  html:root:not(.party-game) #topbar .game-menu:not([hidden]) { max-height: calc(100dvh - 60px); overflow: auto; }
}

/* ---------- keys and small words in the games ----------
   A finger's 44px for the keys under the board and words of 12px or more.
   The Oracles keep the phone layout players already know. */
@media (max-width: 640px) {
  :is(.console-maps, .console-boards) main :is(#submit, #give-up, #skip-btn, #reveal-btn, #clear, #restart, #reset, #go, #next, #compare, #giveup-btn, .btn.ghost, .btn.quiet) {
    min-height: 44px; font-size: 14px;
  }
  :is(.console-maps, .console-boards) :is(.navigation-hint, .map-hint) { font-size: 12px; }
}

/* ---------- World Warp ----------
   The five choices fit one screen: each card is its statistic's name, and
   its period ("Latest year: 2024") waits in the "i" popup with the
   definition. The map takes what is left. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .cm-warp .warp-option .warp-period { display: none; }
  #stat-popover .warp-info-period { display: block; margin: 0 0 6px; font: 400 15px/1.2 var(--pixel); color: var(--muted); }
  .cm-warp .warp-option { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 46px 6px 8px; font-size: 13px; line-height: 1.2; }
  .cm-warp .warp-choice > .stat-info-mark { top: 50%; bottom: auto; right: 4px; translate: 0 -50%; }
}
@media (max-width: 640px) {
  /* The board fills the screen: the map's row takes the slack. */
  :root:not(.party-game) .cm-warp #app main > .stage { flex: 1 0 auto; grid-template-rows: auto auto auto minmax(200px, 1fr) auto auto auto; }
  .cm-warp .warp-option { padding-right: 40px; }
  .cm-warp .warp-choice > .stat-info-mark { width: 24px; height: 24px; font-size: 13px; }
}

/* ---------- Countries & Capitals ----------
   I'm done beside the answer box, in thumb reach, and the globe or map a
   size that leaves the box and the counts on a short phone's screen. */
@media (max-width: 600px) {
  :root:not(.party-game) .cm-quiz #app main > .stage {
    grid-template-areas:
      "head head"
      "modes modes"
      "orders view"
      "views views"
      "tools tools"
      "continents continents"
      "answer done"
      "status tally"
      "meter meter"
      "chips chips";
  }
  :root:not(.party-game) .cm-quiz #app main > .stage > .row #give-up { min-height: 48px; }
  :root:not(.party-game) .cm-quiz #app .hunt-views { grid-template-rows: clamp(220px, calc(100dvh - 410px), 420px); }
  :root:not(.party-game) .cm-quiz #app .world-mode-switch a { min-height: 40px; display: inline-flex; align-items: center; font-size: 13px; }
  :root:not(.party-game) .cm-quiz #app .continents { font-size: 12px; line-height: 1.35; }
}
@media (max-width: 360px) {
  :root:not(.party-game) .cm-quiz #app main > .stage {
    grid-template-areas: "head head" "modes modes" "orders orders" "view view" "views views" "tools tools" "continents continents" "answer done" "status tally" "meter meter" "chips chips";
  }
}

/* ---------- the leaderboard ----------
   The games as one row of keys that swipes sideways, so the board itself is
   on the first screen; the chosen one (pale violet, ink edge, gold flag) is
   scrolled into view (leaderboards-page.js) and the row fades at its right
   edge while more lies past it. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .leaderboard-page .board-chips {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 6px;
    margin: 0 -16px 10px; padding: 2px 16px 8px; background: none; box-shadow: none;
    scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .leaderboard-page .board-chips::-webkit-scrollbar { display: none; }
  .leaderboard-page .board-chips:not(.at-end) { mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .record-page.leaderboard-page .board-chips button { scroll-snap-align: start; }
  .leaderboard-page .board-chips::before { content: none; }
  .record-page.leaderboard-page .board-chips button {
    flex: none; width: auto; min-height: 40px; padding: 6px 12px; white-space: nowrap;
    background: var(--panel) !important; box-shadow: inset 0 0 0 2px var(--border) !important;
    font: 600 14px/1.2 var(--display); color: var(--text);
  }
  .record-page.leaderboard-page .board-chips button[aria-pressed="true"] {
    padding-left: 30px;
    background: var(--accent-soft) !important; box-shadow: inset 0 0 0 2px var(--text) !important; color: var(--text);
  }
}
@media (max-width: 600px) {
  :root:not(.party-game) .cm-quiz #app main > .stage > .answer-box, :root:not(.party-game) .cm-quiz #app #answer { width: 100%; max-width: none; }
  :root:not(.party-game) .console-maps #app .world-quiz-stage .continents, :root:not(.party-game) .console-maps #app .world-quiz-stage .continents * { font-size: 12px; line-height: 1.35; }
}

/* ---------- the main menu ----------
   More room between the boxes: the day, who is playing, and the two lists. */
@media (max-width: 760px) {
  #page section.group { margin-top: 16px; }
  #page .picker-left { gap: 14px; }
}

/* ---------- Distance Guessr ----------
   The two places stacked with their flags on one edge: a column as wide as
   the longer name, centred, each place starting at its left. */
@media (max-width: 640px) {
  :root:not(.party-game) .cb-distance #app .pair { grid-template-columns: auto; justify-content: center; justify-items: start; }
  :root:not(.party-game) .cb-distance #app .pair > .place { justify-self: start; justify-content: flex-start; }
  :root:not(.party-game) .cb-distance #app .pair > .tween { justify-self: center; }
}

/* ---------- Trend Lines ----------
   One screen on a phone: the question and score, the chart taking what is
   left, the four line slots two by two under it, the four countries in one
   row under those, and the keys at the bottom in thumb reach. The lines in
   view and the zoom share a slim row. (Grid areas over the page's own
   boxes, which step aside with display: contents.) */
@media (max-width: 600px) {
  :root:not(.party-game) .cb-trend #app main:not(.solo-result-board) { overflow-x: hidden; }
  :root:not(.party-game) .cb-trend #app main:not(.solo-result-board) > .trend-stage {
    flex: 1 1 0; display: grid; gap: 6px 8px; min-height: 0;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto minmax(130px, 1fr) auto auto auto;
    grid-template-areas:
      "prompt prompt prompt prompt"
      "hint hint hint hint"
      "chart chart chart chart"
      "pills pills pills pills"
      "random actions actions actions"
      "source source source source";
  }
  :root:not(.party-game) .cb-trend #app .trend-stage > :is(.chart-layout, .chart-tools),
  :root:not(.party-game) .cb-trend #app .trend-stage .pill-area { display: contents; }
  :root:not(.party-game) .cb-trend #app .trend-stage > .prompt-line { grid-area: prompt; min-width: 0; }
  :root:not(.party-game) .cb-trend #app .trend-stage #metric-name { font-size: 18px; line-height: 1.15; margin: 0 0 2px; }
  :root:not(.party-game) .cb-trend #app .trend-stage #metric-note { font-size: 13px; margin: 0; }
  :root:not(.party-game) .cb-trend #app .trend-stage #tally-left { grid-area: score; align-self: start; justify-self: end; font-size: 20px; padding-top: 2px; }
  :root:not(.party-game) .cb-trend #app .trend-stage #tally-right { grid-area: tally; align-self: center; font-size: 12px; }
  :root:not(.party-game) .cb-trend #app .trend-stage > .mobile-label-hint { grid-area: hint; margin: 0; font-size: 13px; line-height: 1.3; }
  :root:not(.party-game) .cb-trend #app .trend-stage > .source-line { grid-area: source; align-self: center; text-align: right; font-size: 12px; margin: 0; }

  /* The chart fills its row; the slots are a two-by-two grid under it. */
  :root:not(.party-game) .cb-trend #app .chart-shell { grid-area: chart; display: flex; flex-direction: column; min-height: 0; border: 0; }
  :root:not(.party-game) .cb-trend #app .chart-shell #chart { flex: 1 1 auto; height: auto; min-height: 130px; }
  :root:not(.party-game) .cb-trend #app .chart-shell #slots { flex: none; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 0 0; }
  :root:not(.party-game) .cb-trend #app .chart-shell #slots .line-slot { min-height: 44px; }
  :root:not(.party-game) .cb-trend #app .chart-shell #slots .slot-empty { font-size: 13px; }
  /* Once checked, each line reads across: the slot, the guess, the answer. */
  :root:not(.party-game) .cb-trend #app .chart-shell #slots:has(.revealed) { grid-template-columns: 1fr; gap: 4px; }

  /* A phone zooms by pinching, and every line stays in view: no line
     toggles and no zoom keys. */
  :root:not(.party-game) .cb-trend #app .line-filter,
  :root:not(.party-game) .cb-trend #app .trend-stage .zoom-set { display: none; }
  :root:not(.party-game) .cb-trend #app .line-filter { grid-area: filter; padding: 0; min-width: 0; border: 0; }
  :root:not(.party-game) .cb-trend #app .line-filter h3 { display: none; }
  :root:not(.party-game) .cb-trend #app .line-filter .filter-list { gap: 4px; }
  :root:not(.party-game) .cb-trend #app .line-filter .filter-row { min-height: 40px; min-width: 40px; }
  :root:not(.party-game) .cb-trend #app .trend-stage .zoom-set { grid-area: zoom; align-self: center; gap: 4px; }

  /* The countries: one row, each a finger's height, a long name on two lines. */
  :root:not(.party-game) .cb-trend #app .trend-stage .pill-bank { grid-area: pills; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-height: 44px; }
  :root:not(.party-game) .cb-trend #app .trend-stage .pill-bank:empty { display: flex; align-items: center; }
  :root:not(.party-game) .cb-trend #app .trend-stage .pill-bank:empty::before { font: 12px/1.3 var(--display); }
  :root:not(.party-game) .cb-trend #app .trend-stage .pill-bank > .country-pill {
    flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; max-width: none; padding: 4px 3px;
    white-space: normal; text-align: center; font-size: 12px; line-height: 1.1;
  }
  :root:not(.party-game) .cb-trend #app .trend-stage .pill-bank > .country-pill span { overflow: hidden; overflow-wrap: normal; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  :root:not(.party-game) .cb-trend #app .trend-stage .round-result { grid-area: pills; }
  :root:not(.party-game) .cb-trend #app .trend-stage:has(.round-result:not([hidden])) .pill-bank { visibility: hidden; }

  /* The keys at the bottom. */
  :root:not(.party-game) .cb-trend #app .trend-stage .random-place { grid-area: random; min-height: 44px; padding: 2px 8px; font-size: 13px; line-height: 1.1; }
  :root:not(.party-game) .cb-trend #app .trend-stage > .row { grid-area: actions; justify-content: flex-end; gap: 6px; margin: 0; flex-wrap: nowrap; }
  :root:not(.party-game) .cb-trend #app .trend-stage > .row .btn { min-height: 44px; min-width: 0; padding: 2px 8px; font-size: 13px; line-height: 1.1; }
}
/* A short phone: the instruction waits under "?", and the chart keeps its room. */
@media (max-width: 600px) and (max-height: 740px) {
  :root:not(.party-game) .cb-trend #app .trend-stage > .mobile-label-hint { display: none; }
  :root:not(.party-game) .cb-trend #app .trend-stage #metric-note { font-size: 12px; }
}
@media (max-width: 360px) {
  :root:not(.party-game) .cb-trend #app .trend-stage .pill-bank > .country-pill { font-size: 11px; }
}

/* ---------- the "i" beside a statistic ----------
   No bigger than the words it follows, with a finger's room round it that
   does not show. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html:root .stat-info-mark { width: 1.6em; height: 1.6em; min-width: 0; min-height: 0; font-size: .55em; margin-left: .3em; }
  html:root .stat-info-mark:not(.warp-choice > *) { position: relative; }
  html:root .stat-info-mark::before { content: ""; position: absolute; inset: -10px; }
}

/* ---------- City Limits ----------
   One screen: the bar, the imagery taking what is left, then the day's
   cities (moved over the view line by the page on a phone), the view line,
   the answer box, the guesses, the guess map and Reveal. */
@media (max-width: 640px) {
  :root:not(.party-game) .cb-city #content { overflow-y: auto; }
  :root:not(.party-game) .cb-city #map-wrap { flex: 1 1 auto; min-height: 170px; }
  :root:not(.party-game) .cb-city #panel { flex: none; padding: 0 10px 8px; }
  :root:not(.party-game) .cb-city #panel > #city-track { display: flex; width: 100%; margin: 8px 0 0; }
  :root:not(.party-game) .cb-city #panel > #city-track[hidden] { display: none; }
  :root:not(.party-game) .cb-city #panel > #city-track li { flex: 1 1 auto; justify-content: center; padding: 6px; font-size: 13px; }
  :root:not(.party-game) .cb-city #panel > #city-track li.score { flex: 0 1 auto; }
  :root:not(.party-game) .cb-city #play-panel { gap: 6px; grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  :root:not(.party-game) .cb-city #play-panel > #stage-label { margin-top: 6px; margin-bottom: 6px; }
  :root:not(.party-game) .cb-city #play-panel > #stage-label { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root:not(.party-game) .cb-city #play-panel > #guess-box { margin-top: 0; }
  /* The five guesses in one row, always shown: no heading to fold them. */
  :root:not(.party-game) .cb-city #play-panel .panel-fold { display: none; }
  :root:not(.party-game) .cb-city #play-panel #guess-list,
  :root:not(.party-game) .cb-city #play-panel #guess-list[hidden] { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  :root:not(.party-game) .cb-city #play-panel #guess-list .slot {
    min-height: 40px; min-width: 0; padding: 3px 4px; flex-wrap: wrap; align-content: center; gap: 1px 3px; font-size: 11px; line-height: 1.15;
  }
  :root:not(.party-game) .cb-city #play-panel #guess-list .slot { flex-wrap: nowrap; }
  :root:not(.party-game) .cb-city #play-panel #guess-list .slot-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
  :root:not(.party-game) .cb-city #play-panel #guess-list .slot-city { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
  :root:not(.party-game) .cb-city #play-panel #guess-list .dist-chip { max-width: 100%; padding: 0; background: none; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* A made guess gives its number's room to the distance, the main news:
     the order is plain from its place in the row. */
  :root:not(.party-game) .cb-city #play-panel #guess-list .slot.filled .dot { display: none; }
  :root:not(.party-game) .cb-city #play-panel #guess-list .slot.filled { padding-inline: 5px; }
  /* The guess map runs from side to side, as tall as the screen can spare:
     a short frame shows the whole world with sea either side. */
  :root:not(.party-game) .cb-city #guess-overview { margin: 0; }
  :root:not(.party-game) .cb-city #guess-overview .guess-map-frame { width: 100%; }
  :root:not(.party-game) .cb-city #guess-overview svg { aspect-ratio: auto !important; height: clamp(90px, 100dvh - 640px, 190px); }
  :root:not(.party-game) .cb-city #guess-overview figcaption { display: none; }
  :root:not(.party-game) .cb-city #round-actions button { min-height: 44px; }
}

/* ---------- the score on the round's row ----------
   Every game with rounds shows its running score at the right of the
   round's squares, in the Oracles' figures ("120 / 500"): kit.js
   setScore, and the Oracles' own total moved there (one-word.js). The
   game's own copy under the board steps aside. */
.round-score { display: none; }
/* (Every width since 10 Nov 2026: a wider screen has the same row under its bar.) */
@media all {
  html:root:not(.party-game) #topbar :is(.round-score, .ow-solo-side) { order: 3; margin-left: auto; flex: none; }
  html:root:not(.party-game) #topbar .round-score:not(:empty) { display: block; }
  html:root:not(.party-game) #topbar :is(.round-score, .ow-total) {
    font: 700 26px/1 var(--pixel); color: var(--text); white-space: nowrap;
  }
  html:root:not(.party-game) #topbar .ow-solo-side { flex-direction: row; align-items: center; gap: 8px; }
  :root:not(.party-game) .cm-warp #app .warp-header .warp-score,
  :root:not(.party-game) :is(.cb-distance, .cm-blind, .cb-size, .cb-sort, .cb-border, .cb-trend) #app main .tally,
  :root:not(.party-game) #app main:has(.lingo-stage) .tally { display: none; }
  /* The score lives at the top right at every size: a game's own running total steps aside. */
  :root:not(.party-game) :is(.cb-distance, .cm-blind, .cb-size, .cb-sort, .cb-border, .cb-trend) #app main:not(.solo-result-board) .tally #tally-left,
  :root:not(.party-game) #app main:has(.lingo-stage):not(.solo-result-board) .tally #tally-left { display: none !important; }
}
@media (max-width: 640px) {
  html:root:not(.party-game) #topbar :is(.round-score, .ow-solo-side) { margin-top: 6px; }
}
@media (max-width: 640px) {
  /* World Warp's question on one line, with the score gone to the bar. */
  :root:not(.party-game) .cm-warp #app main > .stage { grid-template-areas: "title title" "tag tag" "desc compare" "map map" "legend legend" "options options" "result result"; }
  :root:not(.party-game) .cm-warp #app .warp-header h2 { white-space: nowrap; font-size: min(20px, 5.2vw); }
}
/* The round's row in order: the squares at the left, a time setting or
   clock, then the score at the right edge. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html:root:not(.party-game) #topbar .topbar-right > #round-chip { order: 3; margin-right: auto; margin-left: 0; }
  html:root:not(.party-game) #topbar .topbar-right > :is(.solo-time-setting, #solo-clock, .hunt-clock) { order: 4; margin-left: 0; }
  html:root:not(.party-game) #topbar .topbar-right > :is(.round-score, .ow-solo-side) { order: 5; margin-left: 12px; }
  html:root:not(.party-game) #topbar .topbar-right > #round-chip:empty ~ :is(.solo-time-setting, #solo-clock, .hunt-clock) { margin-left: auto; }
}
/* A phone on its side: one row, so the round group sits right before the keys. */
@media (pointer: coarse) and (max-height: 500px) {
  html:root:not(.party-game) #topbar .topbar-right > #round-chip:not(:empty) { margin-left: auto; margin-right: 0; }
}

/* ---------- "Are you sure you want to leave?" (every width) ----------
   A window like the rules and results: a violet title strip, the page's
   ground, and two raised keys. Keep Playing is the gold one. */
html:root .solo-leave {
  padding: 0 22px 22px; border: 0; background: var(--panel); box-shadow: var(--f-bevel-lg);
}
html:root .solo-leave h2 {
  margin: 0 -22px 18px; padding: 12px 22px 10px;
  background: #5b3ff0; color: #fff; text-shadow: 2px 2px 0 rgba(29, 24, 56, .35);
  font: 400 24px/1.1 var(--pixel-title);
}
html:root .solo-leave button {
  min-height: 44px; padding: 10px 18px; border: 2px solid var(--f-ink);
  background: var(--panel); color: var(--text);
  box-shadow: var(--plain-face), var(--f-bevel-sm);
  font: 400 18px/1 var(--pixel-key, var(--pixel));
}
html:root .solo-leave button:hover:not(:disabled) { background: var(--wash); border-color: var(--f-ink); }
html:root .solo-leave [data-stay] { background: var(--key); color: #1d1838; box-shadow: var(--key-face), var(--f-bevel-sm); }
html:root .solo-leave [data-stay]:hover:not(:disabled) { background: var(--key-hover); }
html:root .solo-leave button:active:not(:disabled) { translate: 2px 2px; box-shadow: var(--f-bevel-down); }
/* The two keys are one size: equal halves of the row, as tall as each other when one wraps. */
html:root .solo-leave .solo-buttons { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
html:root .solo-leave .solo-buttons > button { width: 100%; height: auto; }
html:root .solo-leave button:disabled { opacity: .6; }

/* ---------- the time setting ("Play time  Free play") ----------
   Room between the words and the box, and the box's words a size down. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html:root:not(.party-game) #topbar .solo-time-setting { gap: 8px; }
  html:root:not(.party-game) #topbar .solo-time-setting select {
    min-height: 34px; height: 34px; padding: 0 26px 0 8px; font: 500 16px/1 var(--display);
  }
}

/* ---------- Minefield ----------
   The place's name has the whole width (its tag is not shown), so a long
   name is never cut. */
@media (max-width: 640px) {
  :root:not(.party-game) .cm-mine #app main > .stage {
    grid-template-areas: "title title" "tools tools" "map map" "count circles" "say say" "meter again";
  }
}
/* With an odd number of games the last one sits alone: it spans the row,
   so the dividing line over it runs the list's whole width. */
@media (max-width: 760px) {
  #page .rows li:last-child:nth-child(odd) { grid-column: 1 / -1; box-shadow: 0 -1px 0 var(--wash); }
  #page .rows li:last-child:nth-child(odd) .row { max-width: 50%; box-shadow: none; }
}
/* A game's state on the menu reads at the end of its plays line, a coloured
   mark and a word ("278 plays · ● New"), not a gold tag. */
@media (max-width: 760px) {
  #page .row { grid-template-columns: 26px auto auto minmax(0, 1fr); }
  #page .row .state, #page .rows li.has-keys .row .state.new, #page .rows li.has-keys .row .state.done {
    display: inline-flex; align-items: center; gap: 4px; justify-self: start; align-self: center;
    margin: 0 0 0 6px; padding: 0; min-width: 0; background: none; box-shadow: none;
    font: 600 11px/1 var(--display); color: var(--muted);
  }
  #page .row .state:empty { display: none; }
  #page .row .state::before { content: ""; flex: none; width: 7px; height: 7px; background: currentColor; }
  /* Beside a streak's flame the line is full: the mark alone (✓ or the gold
     square) says the state, and the word stays for screen readers. */
  #page .rows li:has(.streak) .row .state[class][class] { font-size: 0; gap: 0; }
  #page .rows li:has(.streak) .row .state[class][class]::before { font-size: 13px; }
  #page .row .state.new { color: #9a5d00; }
  #page .row .state.new::before { background: var(--gold); box-shadow: 0 0 0 1px #9a5d00; }
  #page .row .state.going { color: var(--accent); }
  #page .row .state.done { color: #1f7a3e; }
  #page .row .state.done::before { content: "✓"; width: auto; height: auto; background: none; font-size: 11px; }
  #page .row .state.free::before { content: none; }
  :root[data-theme="dark"] #page .row .state.new { color: var(--gold); }
  :root[data-theme="dark"] #page .row .state.done { color: #7ed29a; }
}
/* "? How to play" in the Menu reads on one line, as Settings does. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html:root:not(.party-game) #topbar #game-menu #help-btn { flex-direction: row; white-space: nowrap; gap: 8px; font-size: 16px; line-height: 1; }
}

/* ---------- a game's Options (unlimited games) ----------
   The key on the round's row, at the right; its panel opens under it, as
   the Menu's does. Outside the panel the choices are not shown on a phone. */
#game-options-btn { display: none; }
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html:root:not(.party-game) #topbar .topbar-right > #game-options-btn {
    order: 6; display: inline-flex; align-items: center; gap: 6px; flex: none;
    height: 36px; margin: 8px 0 0 auto; padding: 0 10px;
    border: 2px solid var(--f-ink); background: var(--panel); color: var(--text); cursor: pointer;
    box-shadow: var(--plain-face), var(--f-bevel-sm); font: 600 14px/1 var(--display);
  }
  html:root:not(.party-game) #topbar .topbar-right > #game-options-btn[aria-expanded="true"] { background: var(--accent-soft); }
  html:root:not(.party-game) #topbar .topbar-right > #game-options-btn:active { translate: 2px 2px; box-shadow: var(--f-bevel-down); }
  html:root:not(.party-game) #topbar #game-options-btn ~ .round-score,
  html:root:not(.party-game) #topbar .round-score ~ #game-options-btn { margin-left: 12px; }
  :is(#topbar .solo-time-setting, #hunt-setup, .minefield-controls .set-row, .minefield-controls .lives-picker, #circles-btn, .world-switches):not(#game-options *) { display: none !important; }
  html:root:not(.party-game) #topbar .game-options:not([hidden]) {
    position: absolute; z-index: 1250; width: min(340px, calc(100vw - 16px));
    display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px;
    background: var(--panel); color: var(--text); border: 2px solid var(--f-ink); box-shadow: var(--f-bevel);
    max-height: calc(100dvh - 120px); overflow: auto;
  }
  #game-options > * { margin: 0 !important; }
  #game-options .solo-time-setting { display: flex; justify-content: space-between; gap: 8px; font: 600 15px/1 var(--display); color: var(--text); }
  #game-options .solo-time-setting select { min-height: 40px; font: 500 16px/1 var(--display); }
  /* Population Hunt: the three modes one under another, then the mode's setting. */
  #game-options #hunt-setup { display: flex; flex-direction: column; gap: 10px; }
  #game-options #hunt-setup > [role="group"] { display: grid; grid-template-columns: 1fr; gap: 6px; }
  #game-options #hunt-setup .btn { min-height: 44px; font-size: 15px; }
  #game-options #hunt-setup .btn[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--text); }
  #game-options .hunt-race-options:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  #game-options .hunt-setting { display: flex; align-items: center; gap: 6px; }
  #game-options .hunt-setting .icon-btn { width: 40px; height: 40px; }
  /* Minefield: the maps and the lives. */
  #game-options .set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  #game-options .set-row #set-btn { min-height: 44px; min-width: 0; flex: 1 1 auto; max-width: 220px; }
  #game-options .lives-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  #game-options .lives-picker legend { float: none; width: 100%; margin: 0 0 4px; font: 600 15px/1 var(--display); color: var(--text); }
  #game-options .lives-picker button { width: 48px; height: 44px; font-size: 14px; }
  #game-options #circles-btn { min-height: 44px; }
  /* Countries & Capitals: the three games. */
  #game-options .world-switches, #game-options .world-mode-switch { display: flex; flex-direction: column; gap: 6px; }
  #game-options .world-mode-switch a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; }
}
/* Countries & Capitals with its games under Options: Globe and Map on a row
   of their own at the right, so the answer box has the width I'm done leaves. */
@media (max-width: 600px) {
  :root:not(.party-game) .cm-quiz #app main > .stage,
  :root:not(.party-game) .cm-quiz #app main > .stage:is(*) {
    grid-template-areas: "head head" "view view" "views views" "tools tools" "continents continents" "answer done" "status tally" "meter meter" "chips chips";
  }
  :root:not(.party-game) .cm-quiz #app .hunt-view-switch { justify-self: end; }
  html:root:not(.party-game) #topbar #game-options .solo-time-setting { font: 600 15px/1 var(--display); color: var(--text); }
}

/* ---------- the globes ----------
   A phone zooms a globe by pinching: no + and − keys; North up stays. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .hunt-globe-tools :is([data-action="in"], [data-action="out"]) { display: none !important; }
}

/* ---------- Size It Up ----------
   The guess's card sits close round its slider, so Lock it in stays on a
   short phone's screen and the shapes take the rest. */
@media (max-width: 640px) {
  :root:not(.party-game) .cb-size #app .guess-panel { padding: 6px 0; gap: 4px; }
  :root:not(.party-game) .cb-size #app main:not(.solo-result-board) > .stage { flex: 1 1 0; min-height: 0; row-gap: 8px; grid-template-rows: auto minmax(130px, 1fr) auto auto; }
  :root:not(.party-game) .cb-size #app #readout { margin: 0; }
  :root:not(.party-game) .cb-size #app main:not(.solo-result-board) #board-wrap { min-height: 0; height: auto; overflow: hidden; }
  :root:not(.party-game) .cb-size #app main:not(.solo-result-board) #board-wrap > svg { height: 100%; max-height: 100%; width: 100%; }
}

/* ---------- the maps ----------
   A phone pans and zooms a map with its fingers: no + − □ keys on the flat
   maps, City Limits' imagery or its guess map (which keeps "whole world"). */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .map-btns, .leaflet-control-zoom { display: none !important; }
}

/* ---------- Population Hunt ----------
   One screen: the heading on a line, the globe or map taking the room with
   Globe/Map over its corner, the running total (one copy) over the answer
   box with I'm done beside it, then the meter, the share of the world and
   the continents. Its modes and Play time are under Options. */
@media (max-width: 600px) {
  :root:not(.party-game) .cm-hunt #app main:not(.solo-result-board) > .stage {
    flex: 1 1 0; min-height: 0; display: grid; gap: 6px 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(180px, 1fr) auto auto auto auto auto;
    grid-template-areas: "head head" "views views" "progress progress" "field done" "meter meter" "of of" "strip strip";
  }
  :root:not(.party-game) .cm-hunt #app .stage > :is(.hunt-head, .hunt-foot),
  :root:not(.party-game) .cm-hunt #app .hunt-foot > .answer-box,
  :root:not(.party-game) .cm-hunt #app .hunt-foot > .hunt-bar { display: contents; }
  :root:not(.party-game) .cm-hunt #app .hunt-head > .prompt { grid-area: head; padding: 0 !important; margin: 0; min-height: 0; }
  :root:not(.party-game) .cm-hunt #app .hunt-head .prompt .note { display: none; }
  :root:not(.party-game) .cm-hunt #app .hunt-views { grid-area: views; height: auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  :root:not(.party-game) .cm-hunt #app .hunt-view-switch {
    grid-area: views; z-index: 3; align-self: start; justify-self: start; margin: 6px 0 0 6px; gap: 0;
  }
  :root:not(.party-game) .cm-hunt #app .hunt-view-switch .btn { flex: none; min-height: 36px; padding: 0 14px; font-size: 14px; }
  :root:not(.party-game) .cm-hunt #app .hunt-mobile-progress { grid-area: progress; margin: 0; }
  :root:not(.party-game) .cm-hunt #app .hunt-field { grid-area: field; margin: 0; }
  :root:not(.party-game) .cm-hunt #app #answer-status { grid-area: progress; align-self: end; }
  :root:not(.party-game) .cm-hunt #app .hunt-foot > .row { grid-area: done; margin: 0 !important; align-self: stretch; }
  :root:not(.party-game) .cm-hunt #app .hunt-foot > .row #give-up { min-height: 48px; height: 100%; }
  :root:not(.party-game) .cm-hunt #app .hunt-bar > :is(#score, #last) { display: none; }
  :root:not(.party-game) .cm-hunt #app .hunt-bar > #of { grid-area: of; margin: 0; font-size: 12px; color: var(--muted); }
  :root:not(.party-game) .cm-hunt #app .hunt-foot > .meter { grid-area: meter; margin: 0; }
  :root:not(.party-game) .cm-hunt #app .hunt-foot > .continents { grid-area: strip; margin: 0; font-size: 12px; gap: 2px 10px; }
}

/* ---------- the results' round picker (every width) ----------
   "Explore the Rounds [Round 1]": a small box in the reading face, like the
   Summary key beside it. */
html:root .solo-review-nav select {
  height: 34px; min-height: 0; padding: 0 28px 0 10px;
  font: 500 15px/1 var(--display); background-position: right 8px center;
}
@media (pointer: coarse) {
  html:root .solo-review-nav select { font-size: 16px; }
}

/* ---------- short phones: the last few rows of slack ----------
   Lingocation's globe takes the height left under the quote; World Warp
   keeps no empty row for its verdict until there is one; Sort It's rows
   and Countries & Capitals' board step down a little. */
@media (max-width: 640px) {
  /* Lingocation's globe keeps its size through the answer (the answer comes
     under it); on a short phone it is a little smaller, so the start fits. */
  :root:not(.party-game) #app .lingo-stage #lingocation-globe { height: min(100vw - 28px, 58dvh, 100dvh - 330px); }
}
@media (max-width: 640px) and (max-height: 740px) {
  :root:not(.party-game) .cm-warp #app main > .stage > .warp-result:has(#feedback:empty) { display: none; }
  :root:not(.party-game) .cb-sort #app .rank-row { min-height: 44px; }
  :root:not(.party-game) .cm-quiz #app .hunt-views { grid-template-rows: clamp(200px, calc(100dvh - 420px), 420px); }
}
/* Population Hunt's heading sits beside the Options key, on two lines, in
   the row the key has to itself. */
@media (max-width: 600px) {
  html:root:not(.party-game) body.cm-hunt #topbar { margin-bottom: -46px; }
  :root:not(.party-game) .cm-hunt #app main:not(.solo-result-board) { padding-top: 0; }
  :root:not(.party-game) .cm-hunt #app .hunt-head > .prompt { min-height: 44px; justify-content: center; padding-right: 112px !important; }
  :root:not(.party-game) .cm-hunt #app .hunt-head .prompt h2 { white-space: normal; overflow: visible; font-size: 16px; line-height: 1.15; }
}
@media (max-width: 600px) {
  :root:not(.party-game) .cm-hunt #app .hunt-field, :root:not(.party-game) .cm-hunt #app #answer { width: 100%; max-width: none; }
}

/* ---------- Oracle 2 ----------
   A clue's error ("One word only…") keeps its place above the box, out
   from under the keyboard, with its two lines' room held, so the box stays
   put as it comes and goes. */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  :root:not(.party-game) #solo.ow-master #s-panel > .ow-error { min-height: 1.35em; margin: 0; display: flex; align-items: flex-end; line-height: 1.35; }
}

/* ---------- streaks on the menu (every width) ----------
   A game on a streak (two days or more in a row) glows a purple-red fire:
   its row is edged and lit in magenta, the flame burns violet and red, and
   the glow flickers in pixel steps (still when motion is reduced). The
   glow is a box-shadow on the row, never a transform. */
#page .rows li:has(.streak) .row {
  background: linear-gradient(100deg, rgba(225, 45, 110, .13), rgba(125, 60, 240, .11));
  box-shadow: inset 0 0 0 2px #c2307e, 0 0 9px 1px rgba(200, 40, 140, .55);
}
#page .rows li:has(.streak) { position: relative; z-index: 1; }
#page .row .streak { color: #a3195f; font-weight: 400; }
#page .row .streak .flame path:nth-child(1) { fill: #7d2ae8; }
#page .row .streak .flame path:nth-child(2) { fill: #e3245e; }
#page .row .streak .flame path:nth-child(3) { fill: #ffd2e4; }
:root[data-theme="dark"] #page .rows li:has(.streak) .row { background: linear-gradient(100deg, rgba(225, 45, 110, .22), rgba(125, 60, 240, .2)); }
:root[data-theme="dark"] #page .row .streak { color: #ff8ac0; }
@keyframes streak-fire {
  0% { box-shadow: inset 0 0 0 2px #c2307e, 0 0 7px 0 rgba(200, 40, 140, .45); }
  50% { box-shadow: inset 0 0 0 2px #d0367a, 0 0 11px 2px rgba(225, 50, 110, .6); }
  100% { box-shadow: inset 0 0 0 2px #a52cb8, 0 0 9px 1px rgba(140, 50, 230, .55); }
}
@media (prefers-reduced-motion: no-preference) {
  #page .rows li:has(.streak) .row { animation: streak-fire 1.8s steps(3, jump-none) infinite alternate; }
}

/* ---------- the leaderboard's raised keys ----------
   The game pills are raised keys like every other on the site, the chosen
   one pressed in on pale violet; the "opens once you've played" window
   stands on the board with the same ink edge and drop. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .record-page.leaderboard-page .board-chips { gap: 8px; }
  .record-page.leaderboard-page .board-chips button {
    border: 2px solid var(--f-ink) !important;
    box-shadow: var(--plain-face), var(--f-bevel-sm) !important;
  }
  .record-page.leaderboard-page .board-chips button:active { translate: 2px 2px; }
  .record-page.leaderboard-page .board-chips button[aria-pressed="true"] {
    translate: 2px 2px; background: var(--accent-soft) !important;
    box-shadow: inset 0 2px 0 rgba(29, 24, 56, .12), var(--f-bevel-down) !important;
  }
}
.leaderboard-page .board-gate { border: 2px solid var(--f-ink); box-shadow: var(--plain-face), var(--f-bevel); }
/* Trend Lines once checked: slimmer answer rows and a chart that gives way,
   so the verdict and Next stay on the screen. */
@media (max-width: 600px) {
  :root:not(.party-game) .cb-trend #app main:not(.solo-result-board) > .trend-stage:has(.line-slot.revealed) { grid-template-rows: auto auto minmax(100px, 1fr) auto auto auto; }
  :root:not(.party-game) .cb-trend #app .chart-shell #slots:has(.revealed) { gap: 3px; padding-top: 4px; }
  :root:not(.party-game) .cb-trend #app .chart-shell #slots .line-slot.revealed { min-height: 0; padding: 2px; }
  :root:not(.party-game) .cb-trend #app .chart-shell #slots .line-slot.revealed .country-pill { min-height: 30px; padding: 2px 6px; }
  :root:not(.party-game) .cb-trend #app .chart-shell #slots .result-headings { padding: 0 4px; font-size: 11px; }
}
/* Oracle 2 as the site had it: the secret country in a white box with its
   flag, the banned category in a dashed box, and one line over them saying
   what the game is (a wider screen has its heading for that). */
.ow-about { display: none; }
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  :root:not(.party-game) #solo.ow-master > .ow-about { display: none; order: 0; margin: 0 0 4px; font-size: 14px; line-height: 1.35; color: var(--muted); }
  :root:not(.party-game) #solo.ow-master .ow-secret {
    border: 1px solid var(--f-ink) !important; background: var(--panel) !important;
    box-shadow: var(--plain-face), var(--f-bevel-sm) !important;
  }
  :root:not(.party-game) #solo.ow-master .ow-bans {
    border: 1px dashed var(--f-ink) !important; background: var(--panel) !important;
    box-shadow: var(--f-bevel-sm) !important;
  }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  :root:not(.party-game) #solo.ow-master .ow-bans .ow-ban { border: 1px solid #c4402c; padding: 2px 6px; }
}
/* A phone on its side: Options sits with the round's group, before Share. */
@media (pointer: coarse) and (max-height: 500px) {
  html:root:not(.party-game) #topbar .topbar-right > #game-options-btn { order: 3; height: 34px; margin: 0 0 0 auto; }
  html:root:not(.party-game) #topbar .topbar-right > #round-chip:not(:empty) ~ #game-options-btn { margin-left: 10px; }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  /* Oracle 2's country box holds the flag and the name, nothing else. */
  :root:not(.party-game) #solo.ow-master .ow-secret small { display: none; }
  :root:not(.party-game) #solo.ow-master .ow-secret { align-items: center; align-self: stretch; }
}
/* A phone on its side, the bar in one order: wordmark, title, then at the
   right the round's squares, the score, Options, Share and the Menu. */
@media (pointer: coarse) and (max-height: 500px) {
  html:root:not(.party-game) body #topbar .topbar-right > #round-chip { order: 3; margin: 0 0 0 auto; }
  html:root:not(.party-game) body #topbar .topbar-right > :is(.round-score, .ow-solo-side) { order: 3; margin: 0 0 0 12px; }
  html:root:not(.party-game) body #topbar .topbar-right > #round-chip:empty + :is(.round-score, .ow-solo-side) { margin-left: auto; }
  html:root:not(.party-game) body #topbar .topbar-right > :is(.solo-time-setting, #solo-clock, .hunt-clock) { order: 3; margin: 0 0 0 12px; }
  html:root:not(.party-game) body #topbar .topbar-right > #game-options-btn { order: 3; margin: 0 0 0 12px; }
  html:root:not(.party-game) body #topbar .topbar-right > #round-chip:empty ~ #game-options-btn:not(:is(.round-score, .ow-solo-side) ~ *) { margin-left: auto; }
  html:root:not(.party-game) body #topbar .topbar-right > :is(#solo-share, #game-menu-btn) { order: 4; }
  html:root:not(.party-game) body #topbar .topbar-right > #solo-share { margin-left: 12px; }
}
@media (pointer: coarse) and (max-height: 500px) {
  /* The title takes the bar's slack, so everything after it sits at the right. */
  html:root:not(.party-game) body #topbar > h1, html:root:not(.party-game) body #topbar > .brand { flex: 1 1 auto; }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  /* The line saying what Oracle 2 is goes once the first clue is in: the
     clues need its room by the last one. */
  :root:not(.party-game) #solo.ow-master:has(.ow-clue) > .ow-about { display: none; }
}
@media (max-width: 640px) and (min-height: 701px) {
  /* A screen with the room shows what Oracle 2 is, over the boxes. */
  :root:not(.party-game) #solo.ow-master:not(:has(.ow-clue)) > .ow-about { display: block; }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  /* After a round too: the country box keeps only its flag and name. */
  :root:not(.party-game) #solo.ow-master .ow-secret .ow-examples { display: none; }
}

/* ---------- Oracle 3's results (every width) ----------
   The game is over: no "4 of 4 found" in the bar, no line on how groups
   work and no tip on tapping a word. */
body:has(main.solo-result-board .cx-head) #topbar #round-chip,
main.solo-result-board .cx-head .note,
main.solo-result-board #cx-define-hint { display: none !important; }

/* ---------- a day's summary on a phone ----------
   Oracle 3's summary fits the screen above the placement note: tighter
   lines, a smaller colour grid, slimmer keys, and no web address line (it
   is for the shared picture). */
@media (max-width: 640px) {
  .backdrop .modal:has(.cx-summary) { padding-bottom: 12px; }
  .modal:has(.cx-summary) .cx-day { margin: 0 0 2px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modal:has(.cx-summary) h2 { margin: 0 0 4px; font-size: 22px; }
  .modal:has(.cx-summary) .headline { margin: 0; font-size: 30px; line-height: 1.1; }
  .modal:has(.cx-summary) .headline + p { margin: 2px 0 6px; font-size: 13px; line-height: 1.3; }
  .modal:has(.cx-summary) .cx-grid { zoom: .7; margin: 0 0 6px; }
  .modal:has(.cx-summary) .cx-summary { gap: 3px; margin: 0 0 6px; }
  .modal:has(.cx-summary) .cx-summary li { padding: 4px 8px; font-size: 13px; line-height: 1.25; }
  .modal:has(.cx-summary) .cx-day-site { display: none; }
  .modal:has(.cx-summary) > .note { display: none; }
  .backdrop .modal .modal-actions { gap: 6px; margin-top: 8px; }
  .backdrop .modal .modal-actions .btn { min-height: 44px; padding: 6px 10px; }
}
@media (max-width: 640px) and (min-height: 701px) {
  /* A tall phone holds two lines' room for a clue's error. */
  :root:not(.party-game) #solo.ow-master #s-panel > .ow-error { min-height: 2.7em; }
}

/* ---------- Oracle 2's example words (every width) ----------
   At a round's end they sit under the oracle's ranking, in one row that
   wraps: "Example words  thyme ⓘ  boycott ⓘ  noncontiguous ⓘ". */
#s-examples { order: 7; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 0; }
#s-examples > .k { flex: none; font-size: 13px; color: var(--muted); }
#s-examples > .ow-clue { flex: none; width: auto; margin: 0; }
/* A phone: one row, sized to fit (one-word.js oneRow). */
#s-examples.one-row { flex-wrap: nowrap; gap: 0 .45em; font-size: var(--ex-size, 14px); overflow: hidden; }
#s-examples.one-row > * { font-size: var(--ex-size, 14px) !important; white-space: nowrap; }
#s-examples.one-row > .ow-clue * { font-size: 1em !important; }
#s-examples.one-row > .ow-clue .cx-info { width: 1em; height: 1em; border-width: 1px; }
#s-examples.one-row > .ow-clue .cx-info::before { font-size: .7em; }
#s-examples.one-row > .ow-clue { padding: .2em .4em; gap: .25em; min-height: 0; }
@media (max-width: 640px) and (max-height: 700px) {
  /* A short phone holds no room for a clue's error until there is one. */
  :root:not(.party-game) #solo.ow-master #s-panel > .ow-error { min-height: 0; }
  :root:not(.party-game) #solo.ow-master #s-panel > .ow-error:empty { display: none; }
}
/* A short wide window: the example words keep to a slim row so the round's
   end still fits the screen. */
@media (min-width: 1000px) and (max-height: 700px) {
  #s-examples { margin-top: 2px; gap: 2px 6px; }
  #s-examples > .ow-clue { min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 12px; line-height: 1.3; }
}
@media (max-width: 640px) and (max-height: 700px) {
  :root:not(.party-game) #solo.ow-master .ow-bans .ow-ban { padding: 0 4px; }
  :root:not(.party-game) #solo.ow-master .ow-bans { padding-top: 2px; padding-bottom: 2px; }
}
/* The round's row stays slim: the score at 18px, the row's items a small step
   under the bar. */
@media (max-width: 640px) {
  /* The page is one screen tall: a long answer must not squeeze the bar up
     into its rounds row. */
  html:root:not(.party-game) #app > #topbar { flex-shrink: 0; }
  html:root:not(.party-game) #topbar .topbar-right > #round-chip { margin-top: 12px; }
  html:root:not(.party-game) #topbar .topbar-right > :is(.round-score, .ow-solo-side) { margin-top: 10px; }
  html:root:not(.party-game) #topbar :is(.round-score, .ow-total) { font-size: 18px; }
}
@media (max-width: 640px) and (max-height: 700px) {
  /* A short phone's bar is a little slimmer. */
  :root { --phone-bar: 50px; }
  html:root:not(.party-game) #topbar .topbar-right > :is(#solo-share, #game-menu-btn) { width: 38px; min-width: 38px; height: 38px; }
}
@media (max-width: 640px) and (max-height: 700px) {
  html:root:not(.party-game) #topbar .topbar-right > #round-chip { margin-top: 8px; }
  html:root:not(.party-game) #topbar .topbar-right > :is(.round-score, .ow-solo-side) { margin-top: 6px; }
}
@media (max-width: 640px) and (max-height: 700px) {
  html:root:not(.party-game) #topbar { padding-bottom: 2px; }
}

/* The menu's day and its walking flags sit straight on the page on a
   phone: no boxes round them and no checkered floor under the flags. */
@media (max-width: 760px) {
  #page .today, #page .crowd { background: transparent; box-shadow: none; }
  #page .crowd::after { display: none; }
  #page .dancer { margin-bottom: 4px; }
}


@media (max-width: 360px) {
  /* The narrowest phone gives Trend Lines' chart the page's side margins. */
  :root:not(.party-game) .cb-trend #app main:not(.solo-result-board) { padding-left: 5px; padding-right: 5px; }
}
/* Lingocation: In English is a small key at the end of the question's line. */
@media (max-width: 640px) {
  :root:not(.party-game) #app .lingo-stage > .prompt { position: relative; }
  :root:not(.party-game) #app .lingo-stage .lingocation-quote, :root:not(.party-game) #app .lingo-stage .lingocation-en { position: static; }
  :root:not(.party-game) #app .lingo-stage #kicker { padding-right: 104px; }
  :root:not(.party-game) #app .lingo-stage #english-btn {
    position: absolute; top: 0; right: 0; z-index: 2;
    min-height: 0; height: 32px; padding: 0 10px; font-size: 13px; line-height: 1;
  }
  :root:not(.party-game) #app .lingo-stage .lingocation-en:not(:has(.lingocation-english:not([hidden]))) { margin: 0; }
}
/* A saved Trend Lines round on a phone: its parts stacked in order, without
   the play grid's empty rows or the how-to-play line. */
@media (max-width: 760px) {
  :root:not(.party-game) .cb-trend #app main.solo-result-board .trend-stage { display: flex; flex-direction: column; gap: 8px; }
  :root:not(.party-game) .cb-trend #app main.solo-result-board :is(.mobile-label-hint, #pill-bank) { display: none; }
}
/* A phone's title keeps clear of the bar's dashed edge: its box is 40px tall in the
   middle of the bar, and a long name (Oracle 1.5's) steps down a size until it fits
   that box (kit.js). */
@media (max-width: 640px) {
  html:root:not(.party-game) #topbar > h1,
  html:root:not(.party-game) #topbar > .brand > h1 { max-height: 40px; align-self: center; }
}