/*
  The run screen. Loaded ON TOP of style.css, never instead of it: every colour
  here is a var() from the base theme, and the same prohibition applies - RETHEME
  BY VALUES, NEVER BY RENAMING TOKENS (GDD s5.1, repeated in s8). Nothing in this
  file may introduce a hex code or an rgba(0,0,0,...): a blue-black shadow is the
  one thing that drops the whole look back into a generic dark dashboard, and the
  warm brown --shadow exists so it cannot happen by accident.

  The type is the site's, too: Alfa Slab One for display and Outfit for
  everything else. This screen briefly had a condensed face of its own for the
  numerals, which looked fine on its own and meant the one page a player actually
  spends time on was the one page not set in the site's typeface.
*/

body.playing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.stage {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 16px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.panel[hidden] { display: none; }

/* ── the show card ───────────────────────────────────────────────────────── */
.showno {
    margin: 0;
    font: 600 15px/1 'Outfit', system-ui, sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dust);
}
.showno .of { color: var(--text-dim); letter-spacing: 0.1em; }

.rival {
    margin: 6px 0 0;
    font-family: 'Alfa Slab One', Georgia, serif;
    font-size: clamp(30px, 8vw, 50px);
    line-height: 1.02;
    color: var(--corn);
    text-shadow: var(--shadow-tight);
}
.rivaltext {
    margin: 0;
    max-width: 30ch;
    font-size: 16px;
    color: var(--text-dim);
}

/* ── the gauge ───────────────────────────────────────────────────────────── */
.gauge { width: 100%; max-width: 520px; }

.gauge-bar {
    position: relative;
    height: 22px;
    border: 2px solid var(--card-line);
    border-radius: 11px;
    background: var(--card);
    overflow: hidden;
}
.gauge-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--lime);
    /*
      No transition on the LIVE fill. It is redrawn every animation frame from
      the server's own clock, so a CSS ease would put the bar behind the number
      beside it and the player would be pulling the chute against a lagging bar.
    */
}
.gauge-fill.banked { background: var(--sky); }
.gauge-fill.live {
    background: var(--magenta);
    opacity: 0.92;
}
.gauge-bar > .banked { z-index: 1; }
.gauge-bar > .live { z-index: 0; }

.gauge-flag, .gauge-cap {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 3px;
    z-index: 3;
    background: var(--cream);
}
.gauge-cap { background: var(--berry); }
.gauge-flag > span, .gauge-cap > span {
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    font: 700 10px/1 'Outfit', system-ui, sans-serif;
    letter-spacing: 0.14em;
    color: var(--cream);
    white-space: nowrap;
}
.gauge-cap > span { color: var(--berry); }

.gauge-read {
    margin: 8px 0 0;
    font: 600 17px/1 'Outfit', system-ui, sans-serif;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}
.gauge-read strong { color: var(--text); font-size: 21px; }
.gauge-read .sep { color: var(--dust); padding: 0 4px; }

.attempts {
    margin: 0;
    font: 600 14px/1 'Outfit', system-ui, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dust);
}
.attempts .spent { color: var(--grape); }
.lastattempt { margin: 0; min-height: 1.2em; font-size: 15px; color: var(--text-dim); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn.huge {
    width: 100%;
    max-width: 420px;
    padding: 22px 28px;
    font-size: clamp(19px, 5vw, 25px);
    letter-spacing: 0.08em;
}
/*
  The chute button is the only --magenta thing on the screen while a jump is in
  the air, because it is the only thing on the screen the player can do. Burnt
  orange IS the chute in this palette (GDD s5.1) and it is spent on nothing else.
*/
.btn.huge.chute {
    background: var(--magenta);
    border-color: var(--magenta);
    color: var(--cream);
    animation: urge 1.1s ease-in-out infinite;
}
@keyframes urge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .btn.huge.chute { animation: none; }
}
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ── airborne ────────────────────────────────────────────────────────────── */
.airshow {
    margin: 0;
    font: 600 14px/1 'Outfit', system-ui, sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dust);
}
.readout {
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: center;
}
.readout strong {
    font-family: 'Alfa Slab One', Georgia, serif;
    font-size: clamp(54px, 17vw, 108px);
    line-height: 0.92;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
    text-shadow: var(--shadow-tight);
}
.readout .unit {
    font: 600 17px/1 'Outfit', system-ui, sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dust);
}
.readout.blind strong { color: var(--dust); }
.readout.rigged strong { color: var(--corn); }
.readnote { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--tangerine); }
.locknote, .peeknote { margin: 0; font-size: 15px; color: var(--corn); }

/* ── the pits ────────────────────────────────────────────────────────────── */
.cleared {
    margin: 0;
    font: 600 14px/1 'Outfit', system-ui, sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lime);
}
.pitshead, .gatehead, .overhead {
    margin: 0;
    font-family: 'Alfa Slab One', Georgia, serif;
    font-size: clamp(28px, 7vw, 44px);
    line-height: 1.04;
    color: var(--corn);
    text-shadow: var(--shadow-tight);
}
.pitsnote, .gatenote, .oversub { margin: 0; max-width: 34ch; color: var(--text-dim); }

.offer {
    display: grid;
    gap: 12px;
    width: 100%;
    grid-template-columns: 1fr;
}
@media (min-width: 620px) {
    .offer { grid-template-columns: repeat(3, 1fr); }
}
.relic {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 18px;
    text-align: left;
    background: var(--card);
    border: 2px solid var(--card-line);
    border-radius: var(--radius);
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.relic:hover, .relic:focus-visible {
    border-color: var(--corn);
    box-shadow: var(--shadow);
    outline: none;
}
.relic .rname {
    font-family: 'Alfa Slab One', Georgia, serif;
    font-size: 19px;
    color: var(--corn);
}
.relic .rdesc { font-size: 14px; color: var(--text-dim); }
/* Scar is the keystone (GDD s4.1), and it is marked as such in the offer. */
.relic.keystone { border-color: var(--magenta); }
.relic.keystone .rname { color: var(--magenta); }

.pitsrow, .gaterow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.held {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
}
.heldrelic {
    padding: 6px 12px;
    border: 1px solid var(--card-line);
    border-radius: 999px;
    font: 600 13px/1.4 'Outfit', system-ui, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dust);
}
.heldrelic.keystone { border-color: var(--magenta); color: var(--magenta); }
.heldslot {
    padding: 6px 12px;
    border: 1px dashed var(--card-line);
    border-radius: 999px;
    font: 600 13px/1.4 'Outfit', system-ui, sans-serif;
    color: var(--card-line);
}

/* ── run over ────────────────────────────────────────────────────────────── */
.gatescore, .finalscore { margin: 0; font-size: 17px; color: var(--text-dim); }
.finalscore strong {
    display: block;
    margin-top: 2px;
    font-family: 'Alfa Slab One', Georgia, serif;
    font-size: clamp(42px, 12vw, 72px);
    line-height: 1;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
}
.finalscore .lbl, .tally dt {
    font: 600 13px/1 'Outfit', system-ui, sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dust);
}
.tally {
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 18px;
    margin: 4px 0 0;
    text-align: left;
}
.tally dt { align-self: center; }
.tally dd {
    margin: 0;
    font: 600 17px/1 'Outfit', system-ui, sans-serif;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.tally dd.scar { color: var(--magenta); }
.overhead.lost { color: var(--tangerine); }
.overhead.won { color: var(--lime); }