:root {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 100%; line-height: 1.5; font-synthesis: none; color-scheme: light;
  --page: #f9f9fb; --surface: #fff; --hover: #f0f0f3; --text: #1c2024;
  --muted: #60646c; --line: #d9d9e0; --control: #80838d; --focus: #3a5bc7;
  --accent: #815017; --accent-fill: #ffba6b; --error: #8e243b; --success: #245f43;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --map-word-font-size: .8125rem;
  --shell-width: 1180px; --page-gutter: 24px;
  --guess-surface: #e7e7e4; --guess-text: #182023;
  color: var(--text); background: var(--page);
  scrollbar-gutter: stable;
}
:root[data-theme=dark] {
  color-scheme: dark; --page: #111113; --surface: #18191b; --hover: #212225;
  --text: #edeef0; --muted: #b0b4ba; --line: #363a3f; --control: #777b84;
  --focus: #b7c5ff; --accent: #ffc078; --error: #ffd1d9; --success: #b1f1cb;
  --guess-surface: var(--hover); --guess-text: var(--text);
}
* { box-sizing: border-box }
body { margin: 0 }
[hidden] { display: none !important }
/* Until boot selects the real route, expose only the neutral status/recovery shell. */
.startup-enabled #main:has(> #startup-status:not([hidden])) > :not(#startup-status) { display: none !important }
a { color: inherit; text-underline-offset: 4px }
button, input, select { font: inherit; touch-action: manipulation }
button { min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: .875rem; line-height: 1.4; color: inherit; background: none }
button:hover { background: var(--hover) }
button:is(:disabled, [aria-disabled=true]) { cursor: not-allowed; opacity: .5 }
button[aria-busy=true] { cursor: wait }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px }
input, select { min-width: 0; width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--control); border-radius: 6px; color: var(--text); background: var(--surface); font-size: 1rem }
input::placeholder { color: var(--muted); opacity: 1 }
input[aria-invalid=true] { border-color: var(--error) }
.word-input-control { display: flex; position: relative; min-width: 0; width: 100%; }
.word-input-control > input { flex: 1; width: 100%; padding-inline-end: 52px; }
.word-input-control > .word-input-clear { position: absolute; inset-block: 0; inset-inline-end: 0; display: grid; place-items: center; width: 44px; min-width: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 0 5px 5px 0; color: var(--muted); }
.word-input-clear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.word-input-clear:focus-visible { outline-offset: -4px; }
label { display: block; font-size: .875rem; font-weight: 550; margin-bottom: 6px }
h1, h2, h3, p { margin: 0 }
h1 { font-size: 1.45rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.25 }
h2 { font-size: 1rem; font-weight: 600 }
h3 { font-size: .875rem; font-weight: 600 }
p { margin-bottom: 10px }
svg { vertical-align: middle }
.primary { background: var(--accent-fill); color: #24180e; border-color: var(--accent-fill); font-weight: 650 }
.primary:hover { background: #ffcb8f }
.outline { border-color: var(--control) }
.quiet { color: var(--muted) }
button:is([aria-pressed=true], [aria-expanded=true]) { color: var(--accent); border-color: var(--accent); background: var(--hover) }
.small { font-size: .75rem }
.muted, .empty { color: var(--muted) }
.mono, kbd { font-family: var(--mono); font-variant-numeric: tabular-nums }
kbd { font-size: .75rem }
.icon-button { display: inline-grid; place-items: center; width: 36px; padding: 7px; font-size: 1.25rem }
.icon-button svg, .outline svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
/* View content can reflow; the app's outer edges have one owner. */
.site-header, main, footer, .preview-controls { width: min(var(--shell-width), calc(100% - 2 * var(--page-gutter))); margin-inline: auto }
.game-page { min-height: 100dvh; display: flex; flex-direction: column; }
.game-page > main { flex: 1; }
.game-page > footer { flex: none; }
.site-header { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding-block: 8px }
.site-header nav { flex: none; flex-wrap: nowrap; gap: 2px; margin: 0 0 0 auto }
.identity { display: flex; flex: 1; justify-content: end; align-items: center; gap: 2px; min-width: 3rem; margin-left: 12px; }
.identity:has(#identity-empty[hidden]) { min-width: max(48px, 2rem); }
#identity-name { font-size: .875rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 20rem; }
.identity-edit { display: inline-flex; align-items: center; justify-content: end; gap: 6px; min-height: 36px; min-width: 28px; max-width: 100%; padding: 6px; color: var(--muted); }
#identity-edit:focus-visible { outline-offset: 0; }
/* Keep the anonymous label whole without reserving space for an empty name. */
.identity:has(#identity-empty:not([hidden])) { min-width: min-content; margin-left: 0; gap: 0; }
.identity:has(#identity-empty:not([hidden])) .identity-edit { padding-inline: 1px; gap: 2px; }
#identity-empty { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-edit svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.language-button { flex: none; min-width: 32px; padding-inline: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .04em }
.brand { display: inline-flex; flex: none; align-items: center; gap: 2px; min-height: 36px; font-size: 1.125rem; font-weight: 650; text-decoration: none; letter-spacing: -.035em; border-radius: 6px }
#brand-fire { display: block; flex: none; width: 36px; height: 36px; margin-left: -4px }
#brand-fire svg, #brand-fire img { display: block; width: 100%; height: 100%; overflow: visible }
/* Match the inline brand SVG's baseline before the view module loads. */
#brand-fire img { transform: translateY(-18%); }
.brand-embers { transform-origin: 0 9px; transition: transform .4s ease; filter: drop-shadow(0 0 3px #eb873633) }
#brand-fire .flame-shadow { filter: blur(3px) }
.brand:focus-visible .brand-embers { transform: scale(1.12) rotate(-4deg) }
@media (hover: hover) { .brand:hover .brand-embers { transform: scale(1.12) rotate(-4deg) } }
.brand:active .brand-embers { transform: scale(.95) }
@media (prefers-reduced-motion: reduce) { #brand-fire * { animation: none !important } #brand-fire .brand-embers { transition: none; transform: none } }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100% }
.page-title { position: relative; display: flex; align-items: center; gap: 2px; }
.experimental-badge { display: inline-block; flex: none; padding: 1px 5px; border: 1px solid var(--control); border-radius: 3px; color: var(--muted); font-size: .625rem; font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.experimental-badge[data-compact=true] { padding: 0 2px; font-size: .5rem; }
#game-experimental, .custom-observer-body > .experimental-badge { margin-bottom: 6px; }
.daily-nav { position: relative; display: inline-flex; align-items: center; }
.reset-info { --help-control-width: 28px; --help-gap: 6px; display: inline-flex; flex: none; }
.reset-info .icon-button { width: var(--help-control-width); min-height: 36px; padding: 5px; }
.reset-info svg { width: 16px; height: 16px; }
/* Static flex alignment follows this control's row, even in a wrapped heading. */
.reset-note { position: absolute; z-index: 8; top: auto; align-self: flex-end; transform: translateY(calc(100% + var(--help-gap))); left: 0; width: min(18rem, calc(100vw - 32px)); padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); box-shadow: 0 5px 18px #0002; font-size: .8125rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
/* Bridge only the invoker's width; neighbouring controls keep their hit areas. */
.reset-info:has(> .reset-note:not([hidden]))::after { content: ''; position: absolute; z-index: 8; align-self: flex-end; width: var(--help-control-width); height: var(--help-gap); transform: translateY(100%); pointer-events: auto; }
main { padding-block: 24px 0 }
.beta-pause { padding-block: clamp(40px, 12vh, 120px); max-width: 34rem }
.beta-pause p { margin-top: 12px; color: var(--muted) }
.heading-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px }
#subtitle { color: var(--muted); font-size: .875rem; margin: 5px 0 0 }
.race-clock { --clock-color: var(--success); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 44px; padding: 7px 10px; border-radius: 6px; overflow: hidden; color: var(--clock-color); background: color-mix(in srgb, var(--clock-color) 10%, var(--surface)); white-space: nowrap; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.race-clock[data-urgency=warning] { --clock-color: var(--accent); }
.race-clock[data-urgency=critical] { --clock-color: var(--error); }
.race-clock::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--clock-progress, 100%); background: currentColor; transition: width .25s linear; }
.race-clock svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.race-clock-value { min-width: 5ch; text-align: center; }
#guess-form { container: guess-action / inline-size; }
#round-category { margin: 0 0 6px; overflow-wrap: anywhere; }
#guess-form .guess-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
#guess-form #guess { min-width: 0; }
.guess-actions { display: flex; align-items: stretch; gap: 6px; flex: none; min-width: 0; max-width: 100%; }
.guess-actions > #guess-button { min-width: 0; margin-left: 0; }
.guess-actions > .race-clock { font-size: .875rem; line-height: 1.2; padding: 6px 8px; gap: 4px; }
.history-actions:not(:has(> :not([hidden]))) { display: none; }
.guess-submit-icon, .guess-busy-icon { display: none; width: 20px; height: 20px; grid-area: 1 / 1; }
.guess-submit-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.guess-busy-icon { fill: currentColor; }
.walk-stats:has(> .race-clock:not([hidden])) .walk-clock,
.walk-room:has(#race-clock:not([hidden])) .walk-clock { display: none; }
#guess-button { width: 44px; padding: 4px; place-items: center; }
#guess-button::before, #guess-button::after { content: none; }
#guess-button > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#guess-button > kbd { display: none; }
#guess-button .guess-submit-icon { display: block; }
#guess-button[aria-busy=true] .guess-submit-icon { display: none; }
#guess-button[aria-busy=true] .guess-busy-icon { display: block; }
@container guess-action (max-width: 10rem) {
  .guess-actions > .race-clock svg { display: none; }
}
@media (prefers-reduced-motion: reduce) { .race-clock::after { transition: none; } }
#entry-form { display: grid; gap: 16px }
#room-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.room-label { color: var(--muted); font-size: .75rem }
.room-label strong { font-family: var(--mono); font-weight: 500 }
#share { display: flex; gap: 6px; align-items: center }
.invite-actions { display: inline-flex; align-items: center; gap: 6px }
.game-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start }
.game-grid > *, .map-column { min-width: 0 }
.map-column { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px }
.game-grid:has(#entry-panel:not([hidden])) { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr) }
.game-grid:has(#play-area[hidden]):has(#entry-panel[hidden]) { grid-template-columns: 1fr }
.game-grid.observer-overview { grid-template-columns: 1fr }

.solo-game #race-panel > .panel-heading, .solo-game #players { display: none }
.world-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; color: var(--muted); font-size: .75rem; margin-bottom: 6px }
.world-toolbar > span { min-width: 0 }
.world-toolbar .check { margin: 0; font-size: inherit }
.world-toolbar button { flex: none }
.map-player-filter { min-width: 0; max-width: 100%; }
.segments.map-player-toggles { display: flex; flex-wrap: nowrap; overflow-x: auto; width: fit-content; }
.map-player-toggles button { flex: none; }
#postgame-heading:empty { display: none; }
.map-replay { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 12px }
.replay-actions { display: flex; gap: 8px; flex: 0 1 auto; min-width: 0; }
.replay-actions button { min-width: 0; overflow-wrap: anywhere; }
.replay-timeline { display: flex; align-items: center; gap: 8px; flex: 1 1 8rem; min-width: min-content; }
.map-replay input { flex: 1; min-width: 5rem; width: 0; padding: 0; accent-color: var(--accent) }
.map-replay .mono { min-width: 3em; text-align: right; white-space: nowrap; }
.world { width: 100%; min-width: 0 }
.world > .map-load-state[data-fixed=true] { aspect-ratio: 1000 / 680; min-height: 0 }
.map-canvas { position: relative; overflow: hidden; border: 1px solid #314044; border-radius: 8px; background: #0a1019; aspect-ratio: 1000/680; isolation: isolate }
.world-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100% }
.fire-label { fill: #baaa88; font: 10px var(--mono); letter-spacing: 4px }
.world-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: .7rem; padding-top: 8px }
.world-footer > span { white-space: nowrap }
.legend-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-inline: 4px }
.legend-dot.water { background: #799ca9 }.legend-dot.fire { background: #c58a4c }
.warmth-scale { flex: 1; min-width: 0; height: 2px; background: linear-gradient(90deg,#799ca9,#8b9978,#c58a4c) }
.panel-heading, .section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px }
.panel-heading { min-height: 36px }
.continuation { margin-top: 16px }
.continuation summary { width: fit-content; padding: 8px 0; cursor: pointer; color: var(--muted) }
.continuation .guess-list { margin-top: 8px }
.entry-actions { display: grid; gap: 8px; margin-top: 12px }
.entry-actions button { width: 100%; min-height: 44px }
.invitation-recovery { display: grid; gap: 16px; max-width: 28rem; }
.invitation-recovery > .error { margin: 0; }
.invitation-recovery .entry-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); margin: 0; }
#identity-note { margin: 9px 0 4px; max-width: 40ch }
#lab-target-field { margin-bottom: 12px }
.or { display: block; color: var(--muted); font-size: .75rem; margin: 18px 0 10px }
.input-row, .guess-entry { display: flex; gap: 8px }
.input-row { flex-wrap: wrap; align-items: stretch; }
.input-row > :first-child { flex: 1 1 10rem; min-width: min(100%, 10rem); }
.input-row > :last-child { flex: none; margin-inline-start: auto; min-height: 44px; }
.guess-entry { flex-wrap: wrap }
#guess { flex: 1; min-width: min(100%, 16ch) }
#join-code { font-family: var(--mono); letter-spacing: .1em }
#code-form .outline { flex: none }
.guess-entry .primary { width: auto; min-width: 6.5rem; min-height: 44px; flex: none; margin-left: auto }
.guess-entry kbd { margin-left: 8px }
#guess-button { position: relative; isolation: isolate; overflow: hidden }
#guess-button > kbd { grid-area: 1 / 2; }
#guess-button > .guess-cooldown { grid-area: auto; }
#guess-button > :not(.guess-cooldown) { position: relative; z-index: 1 }
.guess-cooldown { position: absolute; inset: 0; background: #646a7459; pointer-events: none; transform-origin: right; border-radius: inherit }
.guess-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; font-size: .75rem; color: var(--muted); margin: 7px 0 0 }
.guess-meta:not(:has(> :not(:empty):not([hidden]))) { display: none; }
#connection { font-size: .7rem }
.error, .notice { overflow-wrap: anywhere }
.error { color: var(--error); font-size: .875rem; margin: 8px 0 }
.error:empty { display: none }
.notice { padding: 10px 12px; border-radius: 6px; background: var(--hover); margin-bottom: 16px; font-size: .875rem }
.session-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px }
.session-notice:has(> #notice:not([hidden])) { padding: 10px 12px; border-radius: 6px; background: var(--hover) }
.session-notice:has(> #notice[hidden]):has(> #reconnect[hidden]) { display: none }
.session-notice > #notice { flex: 1 1 12rem; min-width: 0; padding: 0; margin: 0; background: none }
.session-notice > #reconnect { flex: none; max-width: 100%; min-height: 44px }
.toast { position: fixed; z-index: 30; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: 20px minmax(0, 1fr) 32px; align-items: start; gap: 10px; width: min(28rem, calc(100% - 32px)); max-height: min(calc(100dvh - 32px), var(--toast-max-height, 100dvh)); overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 8px 30px #0003; animation: toast-in .15s ease-out; }
.toast[data-edge=top] { top: max(16px, env(safe-area-inset-top)); bottom: auto; }
.toast-mark { color: var(--success); font-size: 1.125rem; font-weight: 700; line-height: 32px; text-align: center; }
.toast[data-kind=error] .toast-mark { color: var(--muted); }
.toast-content { display: grid; gap: 8px; min-width: 0; }
.toast-message { margin: 0; padding-block: 6px; font-size: .875rem; line-height: 1.4; font-weight: 550; overflow-wrap: anywhere; }
.toast-link { min-height: 44px; font-size: 1rem; padding: 8px; }
.toast-content button { justify-self: start; min-height: 44px; }
.toast-close { width: 32px; min-height: 32px; padding: 3px; }
@keyframes toast-in { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.last-guess { margin: 12px 0 16px }
.last-guess-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px }
.personal-best { color: var(--accent); font-weight: 650 }
.guess-progress { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; max-width: 100%; font-size: .875rem; }
.guess-progress-label { flex: none; }
.guess-progress-metrics { --heat: var(--line); --warmth: 0%; position: relative; display: inline-flex; align-items: baseline; justify-content: space-between; flex: none; width: min(8.5rem, 100%); gap: .75em; padding: 3px 0 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guess-progress-metrics::before, .guess-progress-metrics::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; }
.guess-progress-metrics::before { width: 100%; background: var(--line); }
.guess-progress-metrics::after { width: var(--warmth); max-width: 100%; background: var(--heat); }
.guess-progress-temperature { font-weight: 650; }
.guess-progress-count { color: var(--muted); }
.guess-progress-word { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.guess-progress.is-masked .guess-progress-word { color: var(--accent); letter-spacing: .1em; }
.guess-progress.is-unknown .guess-progress-temperature { color: var(--muted); font-weight: 400; }
.last-guess .guess-row::before { transform-origin: left; animation: reveal-warmth .32s cubic-bezier(.2,.7,.2,1) both }
@keyframes reveal-warmth { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.history .section-heading { margin-bottom: 5px }
.history:not(.has-guess-feedback):has(#guesses[hidden]) .section-heading { margin-bottom: 0 }
.history.has-guess-feedback { margin-top: 8px; }
.history.has-guess-feedback > .section-heading { min-height: 36px; margin-bottom: 4px; }
.history { container: guess-history / inline-size; }
.guess-feedback { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.guess-feedback:has(#last-guess:not([hidden])) { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.guess-feedback > #last-guess { min-width: 0; margin: 0; }
.guess-feedback > .history-actions { flex-wrap: nowrap; margin: 0; }
.guess-feedback .guess-sort button { width: var(--segment-height); }
.guess-feedback .guess-sort .sort-label { display: none; }
.guess-feedback .guess-row { flex-wrap: nowrap; min-height: 44px; padding: 6px 10px; gap: 8px; }
.guess-feedback .guess-temperature { min-width: 0; font-size: 1rem; }
.guess-feedback .guess-word, .guess-feedback .guess-word:has(> .guess-exploration) { display: flex; flex-wrap: wrap; align-items: baseline; width: auto; column-gap: 4px; }
.guess-feedback-word { display: flex; align-items: baseline; gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.guess-feedback-word > .guess-feedback-meta { flex: none; }
.guess-feedback-word > .guess-word-text { min-width: 0; }
.history.compact-guessing > .section-heading { height: 0; min-height: 0; margin: 0; }
.history.compact-guessing > .section-heading > h2,
.compact-feedback > .last-guess-heading { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.last-guess.compact-feedback { position: relative; }
.compact-feedback .guess-row { column-gap: 8px; }
.guess-feedback-meta { display: inline-flex; flex-wrap: wrap; flex: 0 1 auto; gap: 2px 6px; max-width: 100%; font-size: .6875rem; font-weight: 400; line-height: 1.2; color: var(--guess-text); }
.guess-feedback-meta :is(.muted, .personal-best) { color: inherit; }
.guess-feedback-symbol { display: none; line-height: 1; }
@container (max-width: 24rem) {
  .compact-feedback .guess-feedback-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .compact-feedback .guess-feedback-symbol { display: inline; }
}

.list-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 8px }
.list-controls:not(:has(> :not([hidden]))) { display: none }
.segments.guess-sort { --segment-padding-inline: 4px; margin-inline-start: auto }
.guess-sort button { display: inline-flex; align-items: center; justify-content: center; gap: 6px }
.guess-sort svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
#list-coverage { margin-left: auto; font-family: var(--mono) }
.guess-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px }
.guess-list, .last-guess { container-type: inline-size }
.guess-row { --guess-fill: var(--heat); position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; min-height: 40px; padding: 8px 13px; border-radius: 6px; overflow: hidden; background: var(--guess-surface); color: var(--guess-text); font-variant-numeric: tabular-nums }
:root[data-theme=dark] .guess-row { --guess-fill: color-mix(in srgb, var(--heat) 32%, var(--surface)); }
.guess-row::before { content: ''; position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--warmth); background: var(--guess-fill) }
.guess-word { flex: 1 1 auto; min-width: 0; max-width: 100%; font-weight: 650; font-size: 1rem; overflow-wrap: anywhere }
.guess-temperature { flex: none; margin-inline-start: auto; min-width: 4.5ch; font-size: 1.125rem; font-weight: 750; line-height: 1.15; letter-spacing: -.025em; text-align: right; white-space: nowrap }
/* Paint state above the heat, including zero/unknown rows; the minimum width
   is entirely stripe ink and adds no visible heat. */
.guess-row:is(.latest, [data-current=true])::before { min-width: 3px; box-shadow: inset 3px 0 var(--guess-text) }
.guess-row::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .22s ease-out; }
.guess-row.is-new-guess::after { opacity: 1; transition-duration: 0s; }
@media (prefers-reduced-motion: reduce) { .guess-row::after { transition: none; } }
@media (forced-colors: active) { .guess-row::after { border-color: Highlight; } }
.history-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px }
.history-footer > #history-total { color: var(--muted); font-size: .75rem; }
#return-guess { margin-left: auto; white-space: nowrap }
.empty { font-size: .875rem; padding: 16px 0 }
.players { list-style: none; margin: 0; padding: 0 }
.race-update { margin: 0; color: var(--accent); font-size: .875rem; overflow-wrap: anywhere }
.race-update:empty { inset: 0 }
#race-panel { scroll-margin-top: 16px }
.player { padding: 8px 0 }
.player-top { display: flex; align-items: center; gap: 8px }
.player-avatar { display: grid; place-items: center; width: 25px; height: 25px; flex: none; border-radius: 6px; background: var(--player); color: #182023; font-size: .75rem; font-weight: 650 }
.player-name { font-size: .875rem; font-weight: 550; overflow-wrap: anywhere }
.player small { font-size: .65rem; margin-left: 5px; color: var(--muted) }
.player-score { margin-left: auto; font: .875rem var(--mono); color: var(--accent) }
.player-bottom { display: flex; align-items: center; gap: 10px; margin: 5px 0 0 33px; color: var(--muted); font: .7rem var(--mono) }
.player-bottom > span:last-child { overflow-wrap: anywhere }
.player-status { margin: 3px 0 0 33px; font-size: .7rem; color: var(--muted) }
.player-status:empty { display: none }
.in-lobby .player { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 12px }
.in-lobby .player-status { margin: 0; max-width: 9rem; text-align: right }
.in-lobby .player[data-ready=true] .player-status { color: var(--success) }
.in-lobby .player > button { grid-column: 1 / -1; justify-self: end }
.room-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--line) }
.ending-actions { display: flex; flex-wrap: wrap; gap: 8px }
.host-actions { position: relative; }
.host-actions:not(:has(button:not([hidden]))) { display: none; }
.host-actions > summary { display: grid; place-items: center; width: 44px; min-height: 44px; border: 1px solid var(--control); border-radius: 6px; cursor: pointer; list-style: none; }
.host-actions > summary::-webkit-details-marker { display: none; }
.host-actions > summary:hover, .host-actions[open] > summary { background: var(--hover); }
.host-actions > summary:focus-visible { outline-offset: 3px; }
.host-actions > summary svg { width: 22px; height: 22px; fill: currentColor; }
.host-actions.compact-round-menu > summary { width: 40px; min-height: 40px; border-color: transparent; }
.host-actions.compact-round-menu > summary svg { width: 18px; height: 18px; }
@media (pointer: coarse) { .host-actions.compact-round-menu > summary { width: 44px; min-height: 44px; } }
.room-menu-label { display: none; }
.host-action-menu .room-menu-label { display: inline; }
.host-action-menu #room-label { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; }
.host-action-menu #room-label > span { display: inline; }
.host-action-menu .invite-actions { display: flex; flex-direction: column; align-items: stretch; }
#host-actions #copy-link, #host-actions #daily-reset-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 12px; font-size: .875rem; }
#host-actions .room-menu-label { min-width: 0; overflow-wrap: anywhere; }
#host-actions :is(#copy-link, #daily-reset-toggle) svg { flex: none; }
.host-action-menu #daily-reset { display: block; }
.host-action-menu #daily-reset::after { display: none; }
.host-action-menu .reset-note { position: static; display: block; width: auto; transform: none; padding: 6px 12px; border: 0; box-shadow: none; }
.host-action-menu { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; display: grid; width: max-content; max-width: min(19rem, calc(100vw - 32px)); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 24px #0002; }
.host-action-menu button { text-align: left; border-color: transparent; border-radius: 4px; }
.heading-row .host-actions { flex: none; }
.heading-row .host-actions .host-action-menu { left: auto; right: 0; }
.danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 50%, var(--line)) }
.danger:hover { background: color-mix(in srgb, var(--error) 8%, var(--surface)) }
#lobby-note { font-size: .8rem; color: var(--muted); margin: 12px 0 }
#lobby-controls .primary { width: 100% }
.room-membership { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.room-membership p { margin: 0; flex: 1 1 220px; }
.room-membership details { flex-basis: 100%; color: var(--muted); }
.room-membership ul { margin: 8px 0; padding-left: 20px; overflow-wrap: anywhere; }
.room-actions:has(> .room-membership:not([hidden])) { align-items: baseline; }
.room-actions > .room-membership { flex: 1 1 14rem; align-items: baseline; min-width: 0; max-width: 100%; margin: 0; gap: 6px 16px; }
.room-actions > .room-membership p { flex: 0 1 auto; min-width: 0; }
.room-actions > .room-membership details { flex: 1 1 6rem; min-width: 0; }
.room-actions > .room-membership details > summary { width: fit-content; max-width: 100%; }
.check { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 400; min-height: 36px; margin: 8px 0 }
.check input { width: 17px; height: 17px; min-height: 0; accent-color: var(--accent) }
.result { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; background: color-mix(in srgb, var(--accent-fill) 12%, var(--surface)); border-radius: 7px; margin-bottom: 18px }
.result p { font-size: .8rem; margin: 5px 0 0; color: var(--muted) }
.result-meta { display: flex; flex-wrap: wrap; gap: 0 12px; }
.daily-room #result > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; flex: 1; min-width: 0; }
.daily-room #result p { margin: 0; }
.daily-room #result-title { min-width: 0; max-width: 100%; }
.daily-room #daily-score { min-width: 0; max-width: 100%; align-items: start; }
#result-fire svg { width: 1.5em; height: 1.5em; margin-inline-end: .375em; vertical-align: -.25em; filter: drop-shadow(0 0 4px #efb57355) }
#result-label { overflow-wrap: anywhere }
.countdown { color: var(--accent); font-family: var(--mono); margin-bottom: 12px }
.demo-controls, .lab-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8rem; margin-bottom: 16px }
.demo-controls label { margin: 0 }.demo-controls select { width: auto; min-height: 36px; font-size: .875rem }
#demo-seek { flex-basis: 100%; min-height: 32px; padding: 0; border: 0; background: none; accent-color: var(--accent) }
.lab { margin-bottom: 20px }
.lab-scroll { max-height: 320px; overflow: auto }
.lab-scroll table { table-layout: fixed; min-width: 21em }
.lab-scroll th, .lab-scroll td { padding-inline: 6px }
.lab-scroll th:not(:nth-child(2)), .lab-scroll td:not(:nth-child(2)) { text-align: right; white-space: nowrap }
.lab-scroll th:first-child { width: 4.5em }
.lab-scroll th:nth-child(3) { width: 7.5em }
.lab-scroll th:last-child { width: 7em }
.lab-scroll td:nth-child(2) { overflow-wrap: anywhere }
.lab-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px }
table { border-collapse: collapse; width: 100%; font-size: .8rem; font-variant-numeric: tabular-nums }
th, td { padding: 8px; text-align: left }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--hover) 60%, transparent) }
th { background: var(--page); position: sticky; top: 0 }
#lab-count { margin: 8px 0 }.table-scroll { overflow: auto }
.race-results { margin-bottom: 28px }
.race-results > .result { border-radius: 0; padding: 0; margin-bottom: 8px; background: none }
.race-results #result-title { font-size: 1.6rem }
.result-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 16px; align-items: start }
.result-player { min-width: 0; padding-top: 8px }
.result-player > .guess-list { margin-bottom: 4px }
.result-player > .small { margin-left: 4px }
.race-statistics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 28px; margin-top: 24px }
.race-statistics h3 { margin-bottom: 10px }
.stat-words, .guess-distribution { list-style: none; padding: 0; margin: 0 }
.stat-words li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .875rem }
.stat-words li > :first-child { min-width: 0; overflow-wrap: anywhere }
.stat-words .mono { white-space: nowrap }
.distribution-axes { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; margin-bottom: 6px; font-size: .75rem; color: var(--muted) }
.distribution-scale { display: flex; justify-content: space-between; gap: 8px }
.guess-distribution li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 2em; align-items: center; gap: 8px; margin-bottom: 2px; font-size: .75rem }
.guess-distribution li > :last-child { text-align: right }
.distribution-bar { display: block; height: 1.4em; border-left: 1px solid var(--line); background: linear-gradient(to right, var(--accent) var(--portion), transparent var(--portion)) }
.guess-extremes { margin: 16px 0 0; font-size: .75rem }
.guess-extremes dt { color: var(--muted); margin-top: 8px }
.guess-extremes dd { margin: 0; overflow-wrap: anywhere }
.game-grid.has-results { grid-template-columns: 1fr }
.has-results:not(.live-history) #play-area:has(#observer-words[hidden]):not(:has(#turn-race:not([hidden]))) { display: none }
.has-results #race-panel > :is(.panel-heading, .players) { display: none }

@media (max-width: 720px) {
  .race-statistics { grid-template-columns: 1fr; gap: 24px }
}
footer { padding-block: 12px 20px; margin-top: 20px; color: var(--muted); font: .7rem/1.8 var(--mono) }
#build-info { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; min-height: 1.8em; }
footer a { text-decoration-color: var(--control) }
footer time { overflow-wrap: anywhere }
dialog { width: min(540px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 22px; border: 1px solid var(--control); border-radius: 9px; background: var(--surface); color: var(--text) }
dialog::backdrop { background: #080b11b8 }
.round-transition { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; padding: 24px; background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--accent-fill) 14%, var(--page)), var(--page) 68%); }
.round-transition[open] { display: grid; align-items: safe center; justify-items: center; }
.round-transition::backdrop { background: var(--page); }
.round-stage { width: min(100%, 50rem); text-align: center; }
.round-transition #round-identity { display: grid; grid-template-columns: auto minmax(0, max-content); justify-content: center; align-items: center; gap: 12px; margin-bottom: 16px; }
.round-transition #round-position { grid-column: 1 / -1; margin: 0 0 4px; color: var(--muted); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.round-transition #round-mode-icon { display: grid; place-items: center; }
.round-transition #round-mode-name { min-width: 0; overflow-wrap: anywhere; font-size: clamp(1.75rem, 5vmin, 2.5rem); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.round-transition #round-language { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .875rem; }
.round-transition #round-goal { margin: 0 0 16px; color: var(--muted); font-size: clamp(1.125rem, 3vmin, 1.5rem); line-height: 1.4; overflow-wrap: anywhere; text-wrap: balance; }
.round-transition #round-goal-word { color: var(--accent); font-weight: 700; }
.round-transition:focus-visible { outline: none; }
#round-fire { width: 5rem; margin: 0 auto 16px; filter: drop-shadow(0 0 18px #efb57344); }
#round-fire svg { display: block; width: 100%; overflow: visible; }
#round-transition-title { color: var(--muted); font-size: .875rem; margin: 0 0 12px; }
#round-word { color: var(--accent); font-size: clamp(3rem, 12vmin, 7rem); letter-spacing: -.04em; line-height: 1.12; overflow-wrap: anywhere; text-wrap: balance; }
[data-kind=countdown] #round-word { font-family: var(--mono); font-size: clamp(5rem, 19vmin, 10rem); font-weight: 500; font-variant-numeric: tabular-nums; }
#round-continue { min-height: 44px; margin-top: 36px; }
.round-transition[data-paused=true] #round-fire * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { #round-fire * { animation: none !important; } }
dialog p { font-size: .875rem; margin: 8px 0 16px }
dialog h3 { margin-top: 18px }
.dialog-heading, .dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.dialog-actions { justify-content: end; flex-wrap: wrap; margin-top: 20px }
#confirm[open], #identity-dialog[open], #identity-form { display: flex; flex-direction: column; }
#confirm[open], #identity-dialog[open] { overflow: hidden; max-width: none; }
#confirm[open], #identity-form { gap: 12px; }
#identity-form { min-height: 0; margin: 0; }
#confirm > .dialog-heading, #confirm > .dialog-actions, #identity-form > .dialog-heading, #identity-form > .dialog-actions { flex: none; }
#confirm > .dialog-actions, #identity-form > .dialog-actions { margin-top: 0; }
#confirm-body, #identity-body { min-height: 0; overflow: auto; overscroll-behavior: contain; margin: -6px; padding: 6px; scroll-padding: 6px; }
#identity-body { position: relative; flex: 1 1 auto; }
#identity-body:focus-visible { outline-offset: -4px; }
#identity-context { margin: 0 0 12px; }
#identity-error { margin: 8px 0 0; }
#confirm-body > p { margin: 0; }
#confirm-body > p + p { margin-top: 8px; }
#confirm-text { overflow-wrap: anywhere; }
@media (max-width: 580px) { #confirm, #identity-dialog { padding: 16px; max-height: calc(100% - 32px); } }
.skip { position: fixed; top: 0; left: 16px; z-index: 100; background: var(--surface); padding: 12px; transform: translateY(-100%) }.skip:focus { top: 12px; transform: none }
/* Keep the empty live region available without adding a sidebar grid track. */
.sr-only, .race-update:empty { position: absolute!important; width: 1px!important; height: 1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important }
.noscript { padding: 24px; text-align: center }
.daily-board { padding-top: 8px }
.board-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.board-date-actions { display: flex; flex: none; align-items: stretch; gap: inherit; }
.board-date-actions button[aria-disabled=true] { cursor: not-allowed; }
.daily-board > .section-heading { justify-content: start; gap: 8px 20px; margin-bottom: 16px; }
#board-refresh { min-height: 44px; }
.board-navigation input { width: 11rem; max-width: 100%; flex: 0 1 11rem; font-size: .875rem; }
.board-navigation .icon-button { min-width: 40px; min-height: 44px; }
#board-today { min-height: 44px; }
.medals strong { overflow-wrap: anywhere; }
.medals { list-style: none; padding: 0; margin: 10px 0; container: daily-board-rows / inline-size; }
.mode-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px }
.field-label { display: block; margin-bottom: 6px }
#word-language { margin-bottom: 12px }
.mode-options [aria-pressed="true"] { border-color: var(--accent); font-weight: 650 }
.medals li { display: flex; align-items: center; gap: 10px; padding: .25rem 8px; border-radius: 5px; font-size: .875rem }
.medals li[data-self=true] { background: var(--hover); }
.board-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.board-review { max-width: 100%; min-height: 32px; padding: 2px 0; text-align: left; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.board-review:hover { text-decoration-color: var(--accent); }
.board-self { white-space: nowrap; font-weight: 400; }
.board-player-status { display: block; }
.medals li > .board-result { flex: 0 1 8.5rem; min-width: 0; margin-left: auto; }
.board-result .guess-progress-metrics { width: 100%; flex-wrap: wrap; gap: 0 .5em; }
.board-result .guess-progress-temperature { margin-left: auto; }
.medals strong { font-weight: 550; overflow-wrap: anywhere }.medals li > span:last-child { margin-left: auto; white-space: nowrap }
@container daily-board-rows (max-width: 14rem) {
  .medals li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; }
  .medals li > .medal { grid-column: 1; grid-row: 1 / 3; }
  .medals li > .board-name { grid-column: 2; }
  .medals li > .board-result:last-child { grid-column: 2; justify-self: stretch; width: min(8.5rem, 100%); margin-left: 0; }
}
.medal { display: grid; place-items: center; width: max-content; min-width: max(28px, 2.2em); min-height: max(28px, 2.2em); padding: .2em .4em; aspect-ratio: 1; border-radius: 50%; flex: none; color: #24180e; background: #efc272; font: .8rem/1 var(--mono) }
.medal-2 { background: #c3cbd3 }.medal-3 { background: #d7ac92 }
.medal:not(.medal-1):not(.medal-2):not(.medal-3) { color: var(--muted); background: var(--hover) }
@media (max-width: 800px) {
  :root { --page-gutter: 16px; }
  .map-column { gap: 16px }.heading-row { align-items: start; flex-wrap: wrap; margin-bottom: 18px }
  .world { max-height: none } main { padding-top: 20px }.site-header { padding-block: 6px }
}
@media (max-width: 400px) {
  .guess-entry .primary { min-width: 5.5rem }
  .guess-entry kbd { display: none }
  .guess-meta p { margin-bottom: 2px }
}
@media (max-width: 360px) { :root { --page-gutter: 12px; } }
@container (max-width: 25rem) {
  .guess-row { column-gap: 10px; padding: 8px 10px }
}
@media (prefers-reduced-motion: reduce) { #result-fire * { animation: none!important } .last-guess .guess-row::before { animation: none } }
@media (forced-colors: active) {
  .guess-row { border: 1px solid CanvasText; color: CanvasText; background: Canvas }
  .guess-row::before { display: none }.guess-row:is(.latest, [data-current=true]) { border-inline-start-width: 3px }
  button { border-color: ButtonText }
}
.situation-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 }

/* Shared choices and one progress surface. No independent map/thermometer chrome. */
.segments { --segment-height: 38px; --segment-padding-block: 7px; --segment-padding-inline: 10px; --segment-font: .8125rem; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 5px; min-width: 0; max-width: 100%; background: var(--hover) }
.segments--compact { --segment-height: 30px; --segment-padding-block: 4px; --segment-padding-inline: 7px }
.segments > button { min-width: 0; min-height: var(--segment-height); padding: var(--segment-padding-block) var(--segment-padding-inline); font-size: var(--segment-font); line-height: 1.4; font-weight: 500; border: 1px solid transparent; border-radius: 3px; color: var(--muted); background: transparent }
.segments > button[aria-pressed=true] { color: var(--text); background: var(--surface); border-color: var(--control); font-weight: 650; box-shadow: 0 1px 2px #0001 }
.segments > button:not(:disabled):not([aria-disabled=true]):hover { color: var(--text); background: var(--surface) }
.segments > button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
.segments > button:disabled, .segments > button[aria-disabled=true] { opacity: .55; box-shadow: none }
@media (pointer: coarse) { .segments { --segment-height: 38px; } }
@media (forced-colors: active) {
  .segments > button[aria-pressed=true] { border-color: Highlight; outline: 2px solid Highlight; outline-offset: -3px; box-shadow: none }
  .segments > button:focus-visible { outline: 2px solid ButtonText; outline-offset: -2px }
  .segments > button:disabled { color: GrayText; opacity: 1 }
}
.progress-heading { display: flex; justify-content: end }
.progress-heading:empty { display: none }
.history-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; min-width: 0 }
.guessing-progress { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start }
.guessing-progress > * { min-width: 0 }
.guessing-progress > #guess-history:not(:has(> :not([hidden]))) { display: none; }
.guessing-progress > #thermometer { min-width: 0; scroll-margin: 8px; }
@container guess-history (min-width: 34rem) {
  .guessing-progress:has(> #thermometer:not([hidden])) { grid-template-columns: minmax(18rem, 1.2fr) minmax(14rem, 1fr); gap: 16px; }
}
.thermometer-toggle { flex: none }
#history-empty { margin: 0; padding-block: 4px }
.visual-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start }
.visual-panels > * { min-width: 0 }
.visual-panels:not(:has(> :not([hidden]))) { display: none }
.map-column:has(#visuals[hidden]):has(#daily-board[hidden]):not(:has(#room-standings:not([hidden]), #race-results:not([hidden]))) { display: none }
.ending-actions:not(:has(button:not([hidden]))) { display: none }
@media (min-width: 1100px) { .game-grid.has-progress { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) } }
@container progress (min-width: 38rem) {
  .visual-panels:has(#thermometer:not([hidden])):has(#world-section:not([hidden])) { grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.3fr) }
  .players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px }
}
.visuals #race-panel { padding: 0 }
.visuals .player { padding-block: 4px; border-bottom: 0 }
.visuals .players { row-gap: 12px }
.in-lobby .player { padding-block: 8px }
.guess-meta p:empty, #connection:empty { display: none }
.guess-meta:has(#guess-help:empty):has(#connection:empty) { display: none }
.history .section-heading { margin-bottom: 10px }
.list-controls { gap: 8px }
.game-grid.no-progress, .game-grid.no-progress:has(#entry-panel:not([hidden])) { grid-template-columns: 1fr; max-width: 760px; margin-inline: 0 }
.invitation-entry .game-grid.no-progress:has(#entry-panel:not([hidden])) { max-width: 28rem; margin-inline: 0; }
.game-grid.no-progress:has(#play-area:not([hidden]) #result:not([hidden])) { margin-inline: 0 }
.daily-play.no-progress:has(#guesses[hidden]):has(#guess-form[hidden]) #result { margin-bottom: 0 }
/* Entry and active views share the shell; only their internal grids differ. */
.home { padding-top: 8px; container-type: inline-size; }
.home .mode-options { align-items: end; gap: 20px; margin-bottom: 20px; }
.home .mode-options :is([data-mode], [id=explore-open]) { min-height: 48px; padding: 8px 0 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); background: none; font-size: 1.125rem; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
.home .mode-options > button[aria-pressed=true] { border-bottom-color: var(--accent); color: var(--text); }
.home .daily-nav { border-bottom: 2px solid transparent; }
.home .daily-nav [data-mode] { border-bottom: 0; min-height: 46px; }
.home .daily-nav:has([aria-pressed=true]) { border-bottom-color: var(--accent); }
.home .daily-nav [aria-pressed=true] { color: var(--text); }
/* Keep all four destinations together. Narrow or enlarged text uses two
   complete columns instead of leaving a single destination on another line. */
@container (max-width: 44rem) {
  .home .mode-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
  .home .mode-options :is([data-mode], [id=explore-open]) { min-width: 0; min-height: 56px; padding-block: 7px; font-size: 1rem; }
  .home .daily-nav { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; }
  .home .daily-nav [data-mode] { min-height: 54px; }
  .home .daily-nav .reset-info { --help-control-width: 24px; }
  .home .daily-nav .reset-info .icon-button { min-height: 44px; padding-inline: 4px; }
}
@container (max-width: 20rem) {
  .home .mode-options { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; }
  .home .mode-options :is([data-mode], [id=explore-open]) { text-align: left; min-height: 48px; }
  .home .daily-nav { grid-template-columns: minmax(0, max-content) 24px; }
  .home .daily-nav [data-mode] { min-height: 46px; }
}
.home #page-intro { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.home .game-grid, .home .game-grid:has(#entry-panel:not([hidden])) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.home .game-grid.map-entry { gap: 0; }
.map-home #word-atlas .atlas-heading > :is(h2, p) { display: none; }
.map-home #word-atlas .atlas-languages { margin-top: 0; }
.home .entry-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; gap: 12px; }
.home #join-existing { margin-top: 24px; }
.home .or { margin-bottom: 16px; }
.home #code-form { max-width: 25rem; }
.home #code-form .outline { min-width: 6rem; }
.daily-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 16px; container-type: inline-size; }
.daily-game { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; padding: 16px; background: var(--surface); border-radius: 8px; }
.daily-game-heading { display: flex; grid-column: 1; align-items: center; gap: 10px; margin-bottom: 4px; }
.daily-game-heading h2 { order: 1; }
.daily-game h2 { font-size: 1.125rem; }
.daily-state-icon { display: inline-flex; color: var(--muted); }
.daily-state-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.daily-game[data-status=in-progress] .daily-state-icon { color: var(--accent); }
.daily-game[data-status=finished] .daily-state-icon { color: var(--success); }
.daily-game[data-status=unavailable] .daily-state-icon { color: var(--error); }
.daily-game-status { grid-column: 1; font-size: .875rem; margin: 0; }
.daily-game-detail { grid-column: 1; margin: 4px 0 0; }
.daily-game > button { grid-column: 2; grid-row: 1 / 4; align-self: center; min-width: 6.5rem; min-height: 44px; }
.daily-game[data-status=finished], .daily-game[data-status=dnf] { background: var(--surface); }
.board-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.board-languages { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
.board-languages > button { min-width: 0; min-height: 44px; }
.board-column { min-width: 0; }
.board-column h3 { font-size: 1rem; margin-bottom: 8px; }
.board-column-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.board-column-heading h3 { margin: 0; }
.board-column-heading button { min-height: 44px; }
.board-column-heading:not(:has(> :not([hidden]))) { display: none; }
.board-column > p { margin: 0 0 12px; }
.daily-room .board-columns, .puzzle-route .board-columns { grid-template-columns: minmax(0, 1fr); }
.puzzle-entry .game-grid, .puzzle-entry .game-grid.no-progress:has(#entry-panel:not([hidden])) { grid-template-columns: minmax(0, 1fr); margin-inline: 0; }
.puzzle-entry #entry-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.puzzle-entry .entry-actions { display: flex; flex-wrap: wrap; max-width: 100%; margin: 0; }
.puzzle-entry .entry-actions button { width: auto; max-width: 100%; }
.puzzle-entry #daily-entry-status { margin: 0; }
.puzzle-entry #entry-error { flex-basis: 100%; margin: 0; }
.home .daily-board { padding-top: 8px; }
#board-rule { margin: 16px 0 0; width: 100%; }
.home .daily-board .section-heading { margin-bottom: 14px; }
.home .medals { margin-block: 8px; }
.game-grid.in-lobby, .game-grid.observer-overview, .game-grid.has-results { grid-template-columns: 1fr }
.game-grid.daily-play, .game-grid.daily-play.has-progress { grid-template-columns: minmax(0, 1fr); }
.daily-play .map-column { border: 0; padding-top: 0; }
:is(.daily-room, .puzzle-entry) .heading-row { flex-wrap: wrap; align-items: center; }
:is(.daily-room, .puzzle-entry) .heading-row > div:first-child { display: flex; flex: 1 1 12rem; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
:is(.daily-room, .puzzle-entry) :is(#subtitle, #room-language) { margin: 0; }
.daily-room .heading-row > .room-actions { flex: none; max-width: 100%; margin: 0; padding: 0; border: 0; }
.daily-room #page-intro { container: daily-heading / inline-size; }
.custom-room #page-title { min-width: 0; max-width: 100%; }
.custom-room #heading { min-width: 0; overflow-wrap: anywhere; }
@container daily-heading (max-width: 18rem) {
  .daily-room .heading-row > div:first-child { display: contents; }
}
@media (min-width: 1000px) {
  .game-grid.daily-play.has-progress { grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: 28px; }
  .game-grid.daily-play.has-progress.daily-results { grid-template-areas: "play map" "board map"; grid-template-rows: auto 1fr; }
  .daily-play.has-progress.daily-results > #play-area { grid-area: play; }
  .daily-play.has-progress.daily-results > .map-column { display: contents; }
  .daily-play.has-progress.daily-results #visuals { grid-area: map; }
  .daily-play.has-progress.daily-results #daily-board { grid-area: board; }
}
.in-lobby .map-column { max-width: 520px; width: 100% }
.observer-overview .map-column, .has-results .map-column { max-width: 760px; width: 100% }
#round-actions button { min-height: 44px }
@media (max-width: 800px) {
  .game-grid, .game-grid:has(#entry-panel:not([hidden])) { grid-template-columns: minmax(0, 1fr); gap: 24px }
  .has-progress .map-column { padding-top: 8px }
  .daily-play.has-progress .map-column { border: 0; padding-top: 0; }
  .has-progress .progress-heading { border: 0; padding-top: 0 }
  .in-lobby .map-column { border: 0; padding: 0 }
  .last-guess { margin-block: 8px }
  .last-guess-heading { margin-bottom: 4px }
  .history .section-heading { margin-bottom: 4px }
  .guess-sort button { width: var(--segment-height) }
  .guess-sort .sort-label { display: none }
  .guess-list { gap: 3px }
  .guess-row { min-height: 32px; padding: 4px 10px }
}
@media (max-width: 580px) {
  .identity { margin-left: 8px; }
  /* The anonymous Name label already identifies its action; preserve reading
     room when enlarged text shares the header with a reserved scrollbar gutter. */
  .identity:has(#identity-empty:not([hidden])) .identity-edit svg { display: none; }
  .home .mode-options { margin-bottom: 16px; }
  .board-navigation { gap: 6px; }
  .daily-board > .section-heading { gap: 6px 12px; }
  #board-refresh { margin-left: auto; }
  .daily-board .board-navigation { order: 3; flex-basis: 100%; }
  .board-navigation input { flex: 1 1 8rem; width: 8rem; }
  #board-today { margin-left: 0; padding-inline: 6px; }
  .board-columns { grid-template-columns: minmax(0, 1fr); }
  .board-languages { display: grid; }
  .home .entry-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 580px) {
  :is(.daily-room, .puzzle-entry) { padding-top: 8px; }
  :is(.daily-room, .puzzle-entry) .heading-row { margin-bottom: 8px; gap: 8px; }
  :is(.daily-room, .puzzle-entry) .heading-row > div:first-child { gap: 4px 12px; }
  :is(.daily-room, .puzzle-entry) h1 { font-size: 1.125rem; }
  :is(.daily-room, .puzzle-entry) #subtitle { font-size: .75rem; }
  .daily-room #guess-form > label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 580px) and (pointer: coarse) {
  .identity-edit { min-width: 44px; min-height: 44px; }
}
@media (max-width: 580px) {
  /* Keep one 8px toolbar/input gap during personal guessing. Hidden play areas,
     countdowns, closed attempts and Walk retain their own workspace spacing. */
  :is(.daily-room, .race-room):not(.walk-room):has(#play-area:not([hidden]) > #guess-form:not([hidden])):not(:has(#countdown:not([hidden]))) > .room-actions {
    padding-bottom: 0; margin-bottom: 8px; border-bottom: 0;
  }
}
@container (max-width: 17rem) {
  .daily-game { grid-template-columns: minmax(0, 1fr); }
  .daily-game > button { grid-column: 1; grid-row: auto; width: 100%; margin-top: 12px; }
}
@media (max-width: 400px) {
  .ending-actions { padding-left: 0; border-left: 0 }
}

/* Race play follows one reading order: input, guesses + narrow scale, fitted map. */
.race-room { padding-top: 14px; }
.race-room .game-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.race-room .map-column { max-width: none; border: 0; padding: 0; }
.race-room .heading-row { gap: 8px 12px; margin-bottom: 12px; }
.race-room #room-language { margin: 2px 0 0; }
.race-room #room-tools { flex: none; flex-wrap: nowrap; gap: 6px 10px; }
.race-room #room-tools .invite-actions > .icon-button { width: 44px; min-height: 44px; }
.race-room .room-label > span { display: none; }
.race-room .room-membership { gap: 6px 12px; }
.race-room .room-membership p:empty { display: none; }
.race-room #lobby-note { margin-block: 8px; }
.race-room #lobby-controls .primary { min-height: 44px; }
.race-room .room-actions { margin-block: 0 16px; padding-block: 0 10px; gap: 8px; }
.race-room .history { margin-top: 8px; }
.race-room .history .section-heading { margin-bottom: 6px; gap: 4px; }
.race-room .guess-sort button { width: var(--segment-height); }
.race-room .guess-sort .sort-label { display: none; }
@container guess-history (min-width: 38rem) {
  .guess-feedback .guess-sort button, .race-room .guess-sort button { width: auto; padding-inline: 8px; }
  .guess-feedback .guess-sort .sort-label, .race-room .guess-sort .sort-label { display: inline; }
}
.race-room .world-toolbar:has(#world-caption[hidden]) { display: none; }
.race-room .map-canvas { aspect-ratio: 1000 / 680; min-height: 0; }
.race-room .world-footer { display: none; }
.race-room #guess-history .guess-row { min-height: 36px; padding: 5px 8px; gap: 0 6px; }
.race-room .guess-entry { flex-wrap: nowrap; }
.race-room #guess { min-width: 0; }
.race-room .guess-entry .primary { width: auto; min-width: 5rem; }
.race-room .guess-entry kbd { display: none; }
@media (max-width: 580px) {
  .race-room { padding-top: 10px; }
  .race-room h1 { font-size: 1.125rem; }
  .race-room #room-tools { margin-left: auto; }
  .race-room #share { padding-inline: 8px; }
  .race-room #guess-form > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .race-room .last-guess { margin-block: 6px; }
  .race-room .ending-actions { gap: 4px; }
  .race-room .room-actions button { padding-inline: 8px; }
}
@media (max-width: 360px) {
  .race-room .guessing-progress { gap: 8px; }
  .race-room #share-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .race-room #share { min-width: 36px; justify-content: center; }
}

/* Waiting-room decisions precede the full roster; secondary controls stay quiet. */
.race-lobby .heading-row { margin-bottom: 20px; }
#race-kind { margin: 4px 0 0; line-height: 1.5; }
.race-lobby #lobby-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px; border-radius: 8px; background: var(--surface); }
.lobby-status { flex: 1 1 11rem; min-width: 0; }
#lobby-readiness { display: block; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.race-lobby #lobby-note { margin: 3px 0 0; font-size: .8125rem; }
.race-lobby #lobby-controls .primary { width: auto; flex: 0 1 auto; min-width: 8rem; min-height: 44px; }
.lobby-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-left: auto; }
.race-lobby .room-membership { flex: 1 1 14rem; gap: 0 12px; margin: 0; }
.race-lobby .room-membership p { flex-basis: 100%; }
.race-lobby .room-membership details { flex-basis: auto; }
.race-lobby :is(#participation:not(.primary), #observers-count) { min-height: 44px; padding-block: 10px; font-size: .8125rem; }
.race-lobby #participation:not(.primary) { padding-inline: 0; border-color: transparent; color: var(--muted); }
.race-lobby .panel-heading { justify-content: start; gap: 8px; min-height: 0; margin-bottom: 8px; }
.race-lobby #race-panel > .panel-heading { margin-top: 8px; }
.race-lobby .lobby-secondary .room-membership { flex: 0 1 auto; margin: 0; }
.race-lobby #player-count { color: var(--muted); font-size: .8125rem; }
.race-lobby .players { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; }
.race-lobby .player { min-width: 0; min-height: 48px; padding: 8px 6px; gap: 4px 8px; }
.race-lobby .player-top, .race-lobby .player-name { min-width: 0; }
.race-lobby .player-avatar { width: 1.75rem; height: 1.75rem; line-height: 1; }
.race-lobby .player[data-self=true] { background: var(--hover); border-radius: 6px; }
.race-lobby .player[data-self=true] .player-name { font-weight: 650; }
.race-lobby .player small { margin-left: 0; white-space: nowrap; }
.race-lobby .player-status { max-width: 7rem; overflow-wrap: anywhere; }
.race-lobby .player-status[data-state=ready] { padding-inline: 4px; font-size: 1rem; font-weight: 650; }
.race-lobby .player > button { min-height: 36px; }
.room-standings { min-width: 0; align-self: start; padding: 14px; border-radius: 8px; background: var(--surface); }
.room-standings > details > summary { min-height: 28px; cursor: pointer; }
.room-standings > details > summary h2 { display: inline; }
.room-standings #room-standings-scope { display: block; margin: 5px 0 14px; }
.room-standings > details > summary #room-standings-scope { margin: 2px 0 0; line-height: 1.35; font-weight: 400; }
.room-score-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8125rem; }
.room-score-table th, .room-score-table td { padding: 9px 3px; text-align: left; overflow-wrap: anywhere; }
.room-score-table thead th { position: static; background: transparent; color: var(--muted); font-weight: 400; font-size: .75rem; }
.room-score-table :is(th, td):first-child { width: 11%; padding-left: 0; white-space: nowrap; color: var(--muted); }
.room-score-table :is(th, td):nth-child(3) { width: 14%; text-align: center; }
.room-score-table :is(th, td):nth-child(4) { width: 27%; }
.room-score-table :is(th, td):last-child { width: 13%; text-align: right; font-variant-numeric: tabular-nums; }
.room-score-table tbody th { position: static; background: transparent; font-weight: 550; }
.room-score-table tbody tr[data-self=true] { background: var(--hover); }
.room-score-table small { color: var(--muted); font-size: inherit; font-weight: 400; }
.standings-points { font-weight: 700; color: var(--accent); }
.medal-stack { display: inline-flex; flex-direction: column; gap: 3px; max-width: 100%; }
.medal-count { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.medal-count > span:not(.sr-only) { min-width: 0; }
.medal-disc { display: inline-grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; font-size: .65rem; line-height: 1; font-weight: 750; color: #302010; background: #f0ca73; box-shadow: inset 0 0 0 2px #ffffff40; }
.medal-silver .medal-disc { background: #cbd3dc; }
.medal-bronze .medal-disc { background: #ddb58d; }
@container progress (min-width: 32rem) {
  .race-lobby .players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container progress (min-width: 66rem) {
  .race-lobby .players { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .race-lobby .map-column:has(#room-standings:not([hidden])) { grid-template-columns: minmax(0, 1fr) 21rem; gap: 28px; align-items: start; }
}
@media (max-width: 420px) {
  .race-lobby .heading-row { margin-bottom: 12px; }
  .race-lobby #lobby-controls { gap: 12px 16px; padding: 12px; }
}

/* Completed rounds retain a fitted map; personal review starts with guesses. */
.race-finished .map-column { max-width: none; width: 100%; border: 0; padding: 0; }
.race-finished .visual-panels { grid-template-columns: minmax(0, 1fr); }
#visual-panels:has(> .round-map) { display: block; }
.world-reading { display: contents; }
.world-section.round-map > .world-reading { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 12px; align-items: start; }
.world-section.round-map > .world-reading:has(> #thermometer:not([hidden])) { grid-template-columns: clamp(64px, 15%, 112px) minmax(0, 1fr); }
.round-map > .world-reading > .world-toolbar { grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.round-map #world-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.round-map > .world-reading > .world-toolbar:not(:has(> :not([hidden]):not(#world-caption))) { display: none; }
.round-map .map-player-filter { flex: 1; min-width: 0; }
.round-map > .world-reading > .world { grid-column: 1; grid-row: 2; min-width: 0; }
.round-map > .world-reading:has(> #thermometer:not([hidden])) > .world { grid-column: 2; }
.round-map > .world-reading > #thermometer { grid-column: 1; grid-row: 2; }
.round-map > .world-reading > #thermometer .temperature-vertical-panel { left: 0; right: auto; }
.round-map .map-replay { margin: 8px 0 0; }
.round-map > .world-reading > .world-footer { grid-column: 1 / -1; grid-row: 3; }
.round-map .map-word-index, .round-map .map-player-index { flex: 1 1 8rem; min-width: 0; max-width: 100%; }
.race-finished #world-section { grid-row: 1; }
.race-finished #world-section:not(.map-shell:fullscreen) > .world-reading > .world > :is(.map-viewport, .map-load-state) { aspect-ratio: 1.8; max-height: 70dvh; }
.comparison-result .race-finished #world-section:not(.map-shell:fullscreen) > .world-reading > .world > :is(.map-viewport, .map-load-state) { aspect-ratio: 1; }
.race-finished #race-results { margin: 0; }
.personal-result .race-finished #world-section:not(.map-shell:fullscreen) > .world-reading > .world > :is(.map-viewport, .map-load-state) { max-height: min(50dvh, 30rem); }
#postgame-heading .result { padding: 0 0 12px; border-radius: 0; background: none; justify-content: start; gap: 12px 24px; }
.result-disclosures { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; }
.result-disclosures:has(> button[aria-expanded=true]) { position: sticky; top: 0; z-index: 3; margin-bottom: 8px; background: var(--page); }
.result-disclosure { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 6px 8px; text-align: left; font-size: .875rem; }
.result-disclosure > span { min-width: 0; overflow-wrap: anywhere; }
.result-disclosure > svg { flex: none; width: .8em; height: .8em; }
.result-disclosure[aria-expanded=true] > svg { transform: rotate(90deg); }
.result-history-label { font-weight: 600; }
.race-guess-review > .result-disclosures { position: sticky; top: 0; z-index: 3; margin-bottom: 8px; background: var(--page); }
.result-player-select { flex: 1 1 12rem; width: auto; min-width: 0; max-width: 100%; min-height: 44px; }
.race-guess-review .result-sort { margin-inline-start: 0; }
.race-guess-review .result-disclosures > #result-statistics-toggle { order: 2; }
.result-disclosures > .result-sort { margin-inline-start: auto; max-width: 100%; }
.result-review-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 46rem; margin-top: 8px; }
.result-review-tools > .result-sort { margin-inline-start: auto; max-width: 100%; }
.result-disclosures .result-disclosure:focus-visible { outline-offset: -4px; }
.result-disclosures:not([hidden]) ~ :is(.result-history-panel, .result-review-tools, .result-statistics) :is(button, summary, [tabindex]) { scroll-margin-top: calc(var(--result-controls-height, 0px) + 8px); }
.race-results > #result-statistics-toggle { margin-bottom: 8px; }
#observer-words > .section-heading { justify-content: start; align-items: start; flex-wrap: wrap; gap: 8px 16px; }
.observer-access { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.observer-access h2 { min-width: 0; }
.stable-label { flex: none; display: inline-grid; align-items: center; }
.stable-label > span, .stable-label::before, .stable-label::after { grid-area: 1 / 1; }
.stable-label::before, .stable-label::after { visibility: hidden; }
.stable-label::before { content: attr(data-label-off); }
.stable-label::after { content: attr(data-label-on); }
.result-history-panel:not([hidden]) ~ .result-statistics:not([hidden]) { margin-top: 16px; }
.personal-word-result { container: personal-review / inline-size; }
@container personal-review (min-width: 56rem) {
  .personal-word-result > .map-column:has(> #visuals:not([hidden])) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; }
  .personal-word-result > .map-column:has(> #visuals:not([hidden])) > #race-results { grid-column: 1; grid-row: 1 / span 2; }
  .personal-word-result > .map-column:has(> #visuals:not([hidden])) > #visuals { grid-column: 2; grid-row: 1; }
  .personal-word-result > .map-column:has(> #visuals:not([hidden])) > #room-standings { grid-column: 2; grid-row: 2; }
}
.guess-word:has(> .guess-exploration) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; width: min-content; }
.guess-word:has(> .guess-exploration) > .guess-word-text { width: max-content; max-width: 100%; }
.guess-word > .guess-exploration { flex: 0 0 auto; max-width: 100%; font-size: .625rem; font-weight: 400; opacity: .85; white-space: nowrap; }
.race-finished #world-caption { margin-right: auto; font-size: .875rem; font-weight: 600; color: var(--text); }
@media (max-width: 580px) {
  .race-finished #world-section:not(.map-shell:fullscreen) > .world-reading > .world > :is(.map-viewport, .map-load-state) { aspect-ratio: 1; }
  .round-map .thermo-vertical { --temperature-height: 240px; }
}

.finish-race { border-color: var(--accent); color: var(--accent); font-weight: 650; }
.race-ended-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 12px; margin-bottom: 12px; }
.race-ended-outcome { display: grid; gap: 4px; flex: 1 1 8rem; min-width: 0; max-width: max-content; }
.race-ended-outcome:has(#result:not([hidden])) > h2 { font-size: .75rem; font-weight: 500; color: var(--muted); }
.race-ended-outcome > p { margin: 0; }
.race-ended-outcome .result { display: block; margin: 0; padding: 0; border-radius: 0; background: none; }
.race-ended-outcome #result-title { overflow-wrap: anywhere; }
.race-ended-outcome #result-detail { margin-top: 3px; }
.race-ended-actions > button { min-height: 44px; padding-inline: 8px; }
.race-podium { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; overflow: auto; border: 0; border-radius: 0; padding: clamp(16px, 4vw, 48px); background: var(--page); }
.race-podium::backdrop { background: var(--page); }
.podium-sheet { max-width: 960px; margin: auto; }
.podium-header { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 16px; padding-bottom: 12px; background: var(--page); }
.podium-header::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(16px, 4vw, 48px); background: var(--page); }

.preview-controls { margin: 12px auto 0; padding: 12px 16px; background: var(--hover); border-radius: 8px; }
.preview-heading { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; margin-bottom: 10px; }
.preview-heading strong { color: var(--accent); }
.preview-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
.preview-fields label { flex: 1 1 12rem; min-width: 0; margin: 0; }
.preview-fields label > span { display: block; margin-bottom: 4px; }
.preview-fields select { font-size: .875rem; }
.preview-fields button { min-height: 44px; }
.preview-controls > p { margin: 10px 0 0; }
.podium-header .podium-eyebrow { margin: 0 0 8px; color: var(--accent); font-size: .8125rem; }
#podium-title { font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.15; letter-spacing: -.035em; }
#podium-close { min-height: 44px; }
#podium-scope { margin: 18px 0 4px; }
.scoring-help { margin-top: 12px; border-top: 1px solid var(--line); }
.scoring-help > summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-size: .8125rem; font-weight: 550; }
.scoring-help > summary:focus-visible { outline-offset: 2px; border-radius: 3px; }
.scoring-help > p { max-width: 72ch; margin: 0 0 12px; line-height: 1.5; }
.podium-places { display: grid; gap: 16px; align-items: end; margin: 24px 0; }
.podium-places:has(.podium-completions) { margin-bottom: 0; }
.podium-place { min-width: 0; text-align: center; --medal: #f0ca73; }
.podium-place[data-rank="2"] { --medal: #cbd3dc; }
.podium-place[data-rank="3"] { --medal: #ddb58d; }
.podium-place .podium-place-title { margin: 0 0 8px; color: var(--muted); font-size: .875rem; font-weight: 500; }
.podium-winner { display: grid; justify-items: center; gap: 4px; padding: 8px 6px; }
.podium-winner + .podium-winner { margin-top: 4px; }
.podium-name { font-size: 1.125rem; line-height: 1.3; overflow-wrap: anywhere; max-width: 100%; }
.podium-points { color: var(--accent); font-size: 1.5rem; font-weight: 650; }
.podium-completions { grid-column: 1 / -1; font-size: .8125rem; }
.podium-winner .medal-stack { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: .8125rem; }
.podium-step { display: grid; place-items: center; height: 3rem; margin-top: 8px; border-top: 4px solid var(--medal); border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--medal) 16%, var(--surface)); font-size: 1.5rem; font-weight: 750; color: var(--text); }
.podium-place[data-rank="1"] .podium-step { height: 3.75rem; }
.podium-place[data-rank="3"] .podium-step { height: 2.5rem; }
.podium-table { container-type: inline-size; padding-top: 8px; }
.podium-table h3 { margin: 0 0 12px; font-size: 1rem; }
.podium-empty { padding: 32px 0; color: var(--muted); }
/* Center only occupied places; keep the ceremony above the complete results
   without reserving tall decorative blocks or an absent medal position. */
@media (width > 600px) {
  .podium-places { display: flex; justify-content: center; align-items: flex-end; }
  .podium-place { flex: 1 1 0; max-width: 20rem; }
  .podium-place[data-rank="1"] { order: 2; }
  .podium-place[data-rank="2"] { order: 1; }
  .podium-place[data-rank="3"] { order: 3; }
  .podium-winner + .podium-winner { margin-top: 2px; }
}
@container (min-width: 38rem) { .podium-table .medal-stack { flex-direction: row; flex-wrap: wrap; gap: 12px; } }