/* Roadtrip -- roadtrip.3rt1.com
 *
 * Mobile-first: the only device that matters is a phone held by a passenger in
 * a moving car. Type is large, targets are big, and contrast stays high because
 * the reading conditions are bad by definition.
 */

/* --- Per-mode accent ---
 *
 * Ten games shared one look, so a journey rotating through them felt like one
 * long round. Each mode carries a hue, set on the stage as data-mode (the
 * single-mode page renders it; rt-play.js sets it per round during a journey)
 * and on the lobby cards. Everything else stays token-driven, so this adds
 * identity without adding a second palette to maintain.
 */
:root { --mode-accent: var(--color-primary); }

[data-mode="countdown"]     { --mode-accent: #2563eb; }
[data-mode="mastermind"]    { --mode-accent: #7c3aed; }
[data-mode="magnitude"]     { --mode-accent: #b45309; }
[data-mode="twentyq"]       { --mode-accent: #0f766e; }
[data-mode="chronology"]    { --mode-accent: #be123c; }
[data-mode="nim"]           { --mode-accent: #15803d; }
[data-mode="gridlogic"]     { --mode-accent: #4338ca; }
[data-mode="contradiction"] { --mode-accent: #c2410c; }
[data-mode="bidder"]        { --mode-accent: #0e7490; }
[data-mode="borderchain"]   { --mode-accent: #4d7c0f; }
[data-mode="samepage"]        { --mode-accent: #a21caf; }
[data-mode="auction"]         { --mode-accent: #7f1d1d; }
[data-mode="challenge"]       { --mode-accent: #854d0e; }
[data-mode="race"]            { --mode-accent: #0369a1; }
[data-mode="laststanding"]    { --mode-accent: #831843; }
[data-mode="splitdecision"]   { --mode-accent: #475569; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-mode="countdown"]     { --mode-accent: #7aa2ff; }
    :root:not([data-theme="light"]) [data-mode="mastermind"]    { --mode-accent: #b794f6; }
    :root:not([data-theme="light"]) [data-mode="magnitude"]     { --mode-accent: #f0b429; }
    :root:not([data-theme="light"]) [data-mode="twentyq"]       { --mode-accent: #4fd1c5; }
    :root:not([data-theme="light"]) [data-mode="chronology"]    { --mode-accent: #fb7185; }
    :root:not([data-theme="light"]) [data-mode="nim"]           { --mode-accent: #4ade80; }
    :root:not([data-theme="light"]) [data-mode="gridlogic"]     { --mode-accent: #a5b4fc; }
    :root:not([data-theme="light"]) [data-mode="contradiction"] { --mode-accent: #fdba74; }
    :root:not([data-theme="light"]) [data-mode="bidder"]        { --mode-accent: #67e8f9; }
    :root:not([data-theme="light"]) [data-mode="borderchain"]   { --mode-accent: #bef264; }
    :root:not([data-theme="light"]) [data-mode="samepage"]        { --mode-accent: #f0abfc; }
    :root:not([data-theme="light"]) [data-mode="auction"]         { --mode-accent: #fca5a5; }
    :root:not([data-theme="light"]) [data-mode="challenge"]       { --mode-accent: #fde047; }
    :root:not([data-theme="light"]) [data-mode="race"]            { --mode-accent: #7dd3fc; }
    :root:not([data-theme="light"]) [data-mode="laststanding"]    { --mode-accent: #f9a8d4; }
    :root:not([data-theme="light"]) [data-mode="splitdecision"]   { --mode-accent: #cbd5e1; }
}
:root[data-theme="dark"] [data-mode="countdown"]     { --mode-accent: #7aa2ff; }
:root[data-theme="dark"] [data-mode="mastermind"]    { --mode-accent: #b794f6; }
:root[data-theme="dark"] [data-mode="magnitude"]     { --mode-accent: #f0b429; }
:root[data-theme="dark"] [data-mode="twentyq"]       { --mode-accent: #4fd1c5; }
:root[data-theme="dark"] [data-mode="chronology"]    { --mode-accent: #fb7185; }
:root[data-theme="dark"] [data-mode="nim"]           { --mode-accent: #4ade80; }
:root[data-theme="dark"] [data-mode="gridlogic"]     { --mode-accent: #a5b4fc; }
:root[data-theme="dark"] [data-mode="contradiction"] { --mode-accent: #fdba74; }
:root[data-theme="dark"] [data-mode="bidder"]        { --mode-accent: #67e8f9; }
:root[data-theme="dark"] [data-mode="borderchain"]   { --mode-accent: #bef264; }
:root[data-theme="dark"] [data-mode="samepage"]        { --mode-accent: #f0abfc; }
:root[data-theme="dark"] [data-mode="auction"]         { --mode-accent: #fca5a5; }
:root[data-theme="dark"] [data-mode="challenge"]       { --mode-accent: #fde047; }
:root[data-theme="dark"] [data-mode="race"]            { --mode-accent: #7dd3fc; }
:root[data-theme="dark"] [data-mode="laststanding"]    { --mode-accent: #f9a8d4; }
:root[data-theme="dark"] [data-mode="splitdecision"]   { --mode-accent: #cbd5e1; }

/* Night keeps its own rule: a lit phone pulls a driver's eye, and ten bright
 * hues would undo the whole point of the theme. One dim accent for all of
 * them. */
:root[data-theme="night"] [data-mode] { --mode-accent: #3d5480; }

/* --- Light (default) --- */
:root {
    --color-bg: #f7f8fb;
    --color-surface: #ffffff;
    --color-surface-2: #eef1f7;
    --color-text: #10131c;
    --color-text-muted: #55607a;
    --color-border: #ccd3e0;
    --color-primary: #1d4ed8;
    --color-primary-text: #ffffff;
    --color-accent: #b45309;
    --color-good: #15803d;
    --color-bad: #b91c1c;

    --color-stripe: #e8b923;
    --color-sign: #14532d;
    --color-sign-text: #f4f7f2;

    --radius: 10px;
    --gap: 1rem;
    --tap: 3rem;
    --maxw: 46rem;
    --screen-dim: 1;
}

/* --- Dark (system preference), unless the user forced light --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #0b1020;
        --color-surface: #141a2e;
        --color-surface-2: #1d2440;
        --color-text: #eef2ff;
        --color-text-muted: #9aa6c4;
        --color-border: #2c3557;
        --color-primary: #6690ff;
        --color-primary-text: #06091a;
        --color-accent: #f0b429;
        --color-good: #4ade80;
        --color-bad: #f87171;
        --color-stripe: #d8a91d;
        --color-sign: #1a3f2b;
        --color-sign-text: #e6efe8;
    }
}

/* --- Dark, explicitly chosen --- */
:root[data-theme="dark"] {
    --color-bg: #0b1020;
    --color-surface: #141a2e;
    --color-surface-2: #1d2440;
    --color-text: #eef2ff;
    --color-text-muted: #9aa6c4;
    --color-border: #2c3557;
    --color-primary: #6690ff;
    --color-primary-text: #06091a;
    --color-accent: #f0b429;
    --color-good: #4ade80;
    --color-bad: #f87171;
    --color-stripe: #d8a91d;
    --color-sign: #1a3f2b;
    --color-sign-text: #e6efe8;
}

/* --- Night: far dimmer than dark mode.
 *
 * A phone at normal dark-mode brightness still lights up a cab at 2am and pulls
 * a driver's eye. Night mode drops luminance hard and removes pure white
 * entirely, trading some contrast for a screen the driver stops noticing.
 */
:root[data-theme="night"] {
    --color-bg: #000000;
    --color-surface: #07090f;
    --color-surface-2: #0c101a;
    --color-text: #8b93a8;
    --color-text-muted: #5b6274;
    --color-border: #171c28;
    --color-primary: #3d5480;
    --color-primary-text: #c3cbdd;
    --color-accent: #8a6a25;
    --color-good: #3f7a55;
    --color-bad: #8a4444;
    /* No sign green and no stripe yellow at night: both are bright enough to
       carry across a dark cab, which is exactly what this theme exists to
       stop. */
    --color-stripe: #23282f;
    --color-sign: #0c101a;
    --color-sign-text: #7b8393;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.55;
    font-size: 1.0625rem;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}

main { flex: 1 0 auto; width: 100%; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 1rem;
}

a { color: var(--color-primary); }
a:hover { text-decoration: none; }

h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: 1.9rem; margin-block: 1.25rem 0.5rem; }
h2 { font-size: 1.35rem; margin-block: 1.75rem 0.5rem; }
h3 { font-size: 1.1rem; }
p { margin-block: 0.5rem; }

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    background: var(--color-surface);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
}

/* --- Header --- */
.siteheader {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.siteheader__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    min-height: var(--tap);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}
.brand__mark {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
    border-radius: 5px;
}
.sitenav {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.95rem;
}
.nightbtn {
    font: inherit;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.35rem 0.7rem;
    min-height: 2.25rem;
    cursor: pointer;
}
.nightbtn[aria-pressed="true"] {
    color: var(--color-primary-text);
    background: var(--color-primary);
}

/* --- Hero and panels --- */
.hero { padding-block: 1.5rem 0.5rem; }
.hero__lede { font-size: 1.15rem; color: var(--color-text-muted); }
.hero__note { margin-top: 0.75rem; }
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-text);
    border-color: transparent;
}
.btn--wide { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.panel { margin-block: 1.5rem; }
.lede { color: var(--color-text-muted); }

.modelist { list-style: none; display: grid; gap: 0.75rem; }
.modecard {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--mode-accent);
    border-radius: var(--radius);
    padding: 1rem;
}
.modecard h3 a { color: var(--color-text); text-decoration-color: var(--mode-accent); }
.modecard h3 a:hover { color: var(--mode-accent); }
.modecard h3 { margin-bottom: 0.25rem; }
.modecard__meta { font-size: 0.9rem; color: var(--color-text-muted); }
.modecard--planned { opacity: 0.72; }

/* A mode this table is too small for stays on the list, grayed, with the
 * reason showing. Hiding it would leave the site looking like it had fewer
 * games than it has, and would give somebody no reason to add a third seat. */
.modecard[data-locked] { opacity: 0.55; }
.modecard[data-locked] h3 a { pointer-events: none; text-decoration: none; }
.modecard__lock {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mode-accent);
    margin-top: 0.35rem;
}

.tablepick {
    margin-block: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.tablepick__label { font-weight: 600; margin-bottom: 0.5rem; }
.tablepick__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tablepick__btn {
    font: inherit;
    font-weight: 600;
    min-width: 3.25rem;
    padding: 0.5rem 0.9rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}
.tablepick__btn[aria-pressed="true"] {
    color: var(--color-bg);
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.tablepick__note { margin-top: 0.5rem; font-size: 0.9rem; color: var(--color-text-muted); }

/* Who is refereeing this round. Only rendered above two players, because
 * with two there is nothing to rotate and nothing to say. */
.tablestrip {
    margin-block: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mode-accent);
}

.prose { max-width: 38rem; padding-block: 1rem 2rem; }
.prose h2 { margin-top: 1.5rem; }

/* --- House ad ---
 * One line, no image, no animation, and never rendered on a play screen.
 */
.housead {
    background: var(--color-surface-2);
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
}
.housead__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.75rem;
}
.housead__text { color: var(--color-text-muted); margin: 0; }
.housead__cta { font-weight: 600; white-space: nowrap; }

.sitefooter {
    border-top: 1px solid var(--color-border);
    padding-block: 1.25rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.sitefooter__meta { display: flex; gap: 0.5rem; }

/* --- Play stage --- */
.stage { padding-block: 1rem 2rem; }
.stage__loading { color: var(--color-text-muted); }

.roundhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}
.roundhead__mode { font-weight: 700; }
.roundhead__meta { font-size: 0.9rem; color: var(--color-text-muted); }

.readout {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--mode-accent);
    border-radius: var(--radius);
    padding: 1rem;
    margin-block: 1rem;
}
.readout__label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mode-accent);
}

/* Big enough to read aloud at a glance in a moving car. */
.tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.tile {
    flex: 0 0 auto;
    min-width: 2.6rem;
    padding: 0.5rem 0.35rem;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-transform: uppercase;
}
.tile--vowel { color: var(--color-accent); }
.tile--big { color: var(--color-primary); }

/* Guess history. The passenger re-reads a row on request, so the code and the
   verdict have to be findable without hunting -- fixed columns, tabular
   figures, newest at the bottom where the thumb already is. */
.guesslog {
    list-style: none;
    margin-block: 1rem;
    display: grid;
    gap: 0.35rem;
}
.guesslog__row {
    display: grid;
    grid-template-columns: 1.5rem auto 1fr;
    align-items: baseline;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.45rem 0.7rem;
}
.guesslog__n { color: var(--color-text-muted); font-size: 0.9rem; }
.guesslog__code {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}
.guesslog__result { color: var(--color-text-muted); font-size: 0.95rem; }

.target {
    font-size: 3.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.timer {
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.timer--low { color: var(--color-bad); }

.field { display: grid; gap: 0.4rem; margin-block: 1rem; }
.field label { font-weight: 600; }
.field input {
    font: inherit;
    font-size: 1.25rem;
    min-height: var(--tap);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
}
.field input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* --- Logic Grid ---
   Only one clue is ever on screen: tapping a number reads that clue out and
   costs a reading, so the buttons are a wrapping row of numbers and the text
   they reveal replaces whatever was there before. Holding the rest is the
   driver's job, which is the whole game. */
.setuplist { list-style: none; margin-block: 0.5rem; display: grid; gap: 0.2rem; }

.cluerow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1rem; }
.cluerow .btn { min-width: 3.25rem; padding-inline: 0.9rem; }
.cluerow .btn--read { border-style: dashed; }

.cluecard {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-block: 1rem;
}
.cluecard__text { font-size: 1.3rem; font-weight: 600; line-height: 1.35; }

.gridrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    margin-block: 0.5rem;
}
.gridrow__who { font-weight: 700; min-width: 5rem; }
.gridrow select {
    font: inherit;
    flex: 1 1 9rem;
    min-height: var(--tap);
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    color: var(--color-text);
}
.gridrow select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* --- Nim Arcade ---
   The phone is only the board, so a pile is shown twice: as a run of marks the
   passenger can take in at a glance, and as a number they read out. "Seven"
   misheard as "eleven" loses the board, and eleven marks do not look like
   seven. The marks are spaced out because a solid bar of pipes cannot be
   counted at arm's length in a moving car. */
.board__marks {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.35rem;
    letter-spacing: 0.3em;
    flex: 1 1 6rem;
    word-break: break-all;
}
.board__count {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* --- The Contradiction ---
   The whole account stays on screen, because the passenger reads it out and
   then reads the suspect stretch out again. That makes these lines prose to be
   spoken rather than a log to be scanned, so they take the full text color and
   a line height that survives being read aloud in a moving vehicle. */
.statement__line {
    /* The line the passenger reads out to the driver. It is the single most
       important thing on the screen and it used to render at body size, which
       made the passenger hunt for it at exactly the moment they should not be
       looking down. */
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-text);
    margin-block: 0.35rem 0.15rem;
    text-wrap: balance;
}
@media (min-width: 30rem) {
    .statement__line { font-size: 1.75rem; }
}

.actions { display: grid; gap: 0.6rem; margin-top: 1rem; }
@media (min-width: 30rem) {
    .actions { grid-auto-flow: column; }
}

.verdict {
    margin-block: 1rem;
    padding: 1.1rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 5px solid var(--color-border);
}
.verdict--good { border-top-color: var(--color-good); }
.verdict--bad { border-top-color: var(--color-bad); }
.verdict__headline {
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
    text-wrap: balance;
}
.verdict--good .verdict__headline { color: var(--color-good); }
.verdict--bad .verdict__headline { color: var(--color-bad); }
.verdict__detail { color: var(--color-text-muted); }

.solution {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--color-surface-2);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    display: inline-block;
    margin-top: 0.35rem;
    word-break: break-word;
}

.scorebar {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-block: 1rem;
}
.scorebar div { display: grid; }
.scorebar dt, .scorebar__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.scorebar__value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Toasts (never alert/confirm/prompt) --- */
.toast-region {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: grid;
    gap: 0.5rem;
    z-index: 50;
    width: min(28rem, calc(100vw - 2rem));
    pointer-events: none;
}
.toast {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
}
.toast--bad { border-left-color: var(--color-bad); }
.toast--good { border-left-color: var(--color-good); }

@media (prefers-reduced-motion: no-preference) {
    .toast { animation: toast-in 160ms ease-out; }
    @keyframes toast-in {
        from { opacity: 0; transform: translateY(0.5rem); }
        to { opacity: 1; transform: none; }
    }
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Share ---------------------------------------------------------- */
.share { display: inline-flex; }
.share__btn::before {
    content: "";
    width: 1rem;
    height: 1rem;
    margin-right: 0.45rem;
    background-color: currentColor;
    /* Inline mask rather than an <img>: it inherits the button's color, so it
       stays legible in light, dark and night themes without three assets. */
    -webkit-mask: var(--icon-share) center / contain no-repeat;
    mask: var(--icon-share) center / contain no-repeat;
}
:root {
    --icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.6' y1='10.5' x2='15.4' y2='6.5'/%3E%3Cline x1='8.6' y1='13.5' x2='15.4' y2='17.5'/%3E%3C/svg%3E");
}


/* ============================================================
 * Character
 *
 * The site had a competent, anonymous card look: system font, rounded boxes,
 * one blue. It could have been any app. The subject matter is specific --
 * two people in a car on a two-lane road at night in Montana -- so the
 * furniture borrows from what is actually out there: highway signage above,
 * an instrument cluster after dark. Both are legible by design under bad
 * conditions, which is the same problem this screen has.
 *
 * No webfont. A face would be the single biggest change here, but it means
 * vendoring a file into the precache, and the precache is the thing that has
 * to survive a day with no signal. System stacks plus weight, tracking and
 * case do most of the work.
 * ============================================================ */

/* The center line. A dashed stripe under the header, and the divider between
   sections. It is the one ornament in the place and it earns its keep by
   being the only thing here that is unmistakably about a road. */
.siteheader {
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--color-border);
}
.siteheader::after {
    content: "";
    display: block;
    height: 4px;
    background: repeating-linear-gradient(
        to right,
        var(--color-stripe) 0 2.25rem,
        transparent 2.25rem 4rem
    );
}

.brand {
    letter-spacing: -0.015em;
    font-size: 1.05rem;
}

/* Panel headings get a short stripe rather than a rule. */
.panel > h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}
.panel > h2::after {
    content: "";
    flex: 1;
    height: 3px;
    background: repeating-linear-gradient(
        to right,
        var(--color-border) 0 1rem,
        transparent 1rem 1.75rem
    );
}

/* --- The round header, as a sign bar --- */
.roundhead {
    border-bottom: 0;
    box-shadow: inset 0 -3px 0 var(--mode-accent);
    padding-bottom: 0.6rem;
    margin-bottom: 0.25rem;
}
.roundhead__mode {
    text-transform: uppercase;
    letter-spacing: 0.055em;
    font-size: 0.95rem;
    color: var(--mode-accent);
}
/* The level, as a mile marker. Small, boxed, tabular, and the only place on
   the screen that reports where you are in the ratchet. */
.roundhead__meta {
    font-variant-numeric: tabular-nums;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    background: var(--color-surface);
    white-space: nowrap;
}

/* --- The readout, as a sign panel --- */
.readout {
    background:
        linear-gradient(to bottom, color-mix(in srgb, var(--mode-accent) 7%, var(--color-surface)),
                        var(--color-surface));
    border-left-width: 5px;
}
.readout__label { font-size: 0.72rem; }

/* --- Instrument cluster --- */
.scorebar {
    border-block: 2px solid var(--color-border);
    padding-block: 0.55rem;
    background: var(--color-surface);
}
.scorebar__label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    display: block;
}
.scorebar__value {
    font-variant-numeric: tabular-nums;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}

/* --- The verdict, as a scoreboard --- */
.verdict {
    border-top-width: 6px;
    background:
        linear-gradient(to bottom, var(--color-surface-2), var(--color-surface));
}
.verdict__headline {
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.verdict__detail { font-variant-numeric: tabular-nums; }

/* --- Controls with some weight to them --- */
.btn {
    border-width: 2px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 8px;
}
.btn--primary {
    background: var(--mode-accent);
    color: var(--color-primary-text);
    border-color: transparent;
}
.btn:active { transform: translateY(1px); }
/* The question and gap lists are the main control surface in four of the
   modes, and a passenger is tapping them one-handed in a moving car. */
.btn--wide {
    justify-content: flex-start;
    text-align: left;
    padding-block: 0.75rem;
    min-height: 3.25rem;
    line-height: 1.3;
}

.tile {
    border-width: 2px;
    letter-spacing: 0.02em;
}

.guesslog__n {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}
.guesslog__row { border-left: 3px solid var(--color-border); padding-left: 0.5rem; }

.cluerow { display: grid; gap: 0.5rem; }

/* --- The hero, as a guide sign ---
 *
 * A green guide sign with an inset white border is the most recognizable
 * object on an American highway, and this site's first line is an instruction
 * about driving. The inset border is drawn the way the real ones are: a border
 * in the sign's own color to hold the gap, and the white line inside it.
 *
 * At night the sign goes almost black with dim lettering, like every other
 * surface in that theme. A lit green panel in a dark cab is precisely the
 * thing the driver's eye would catch.
 */
.hero h1 {
    background: var(--color-sign);
    color: var(--color-sign-text);
    border: 7px solid var(--color-sign);
    box-shadow: inset 0 0 0 2px var(--color-sign-text);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
    margin-bottom: 1rem;
}
.hero__lede { font-size: 1.15rem; }