/* ==========================================================================
   range_ryder — arcade racer
   Layout: grid for the macro regions, flexbox inside them, per STANDARDS.md.
   Tablet-first, then re-stacked for phones.

   The HUD sits in the four corners and leaves the middle of the screen empty,
   because the middle of the screen is the road. The one exception is the typed
   word, which lives centre-bottom: it is what the player is actually looking at.
   ========================================================================== */

.ryder-root {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    grid-template-areas: "stack";
    background: #1b1030;
    color: #fff;
    overflow: hidden;
}

.ryder-root.hidden { display: none; }

/* All three share one cell and are explicitly stacked: the stage has to be
   positioned for the WebGL canvas to fill it, and a positioned element paints
   above a static sibling regardless of DOM order. */
.ryder-stage,
.ryder-overlay,
.ryder-lobby {
    grid-area: stack;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.ryder-stage { z-index: 0; overflow: hidden; }
.ryder-overlay { z-index: 1; }
.ryder-lobby { z-index: 2; }

.ryder-canvas { display: block; width: 100%; height: 100%; }

/* -- Overlay: four corners plus a centre console ------------------------- */

.ryder-overlay {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
        "tl    callout tr"
        ".     .       ."
        "console console console"
        "bl    .       br";
    gap: .5rem;
    padding: 3.9rem 1rem 1rem;
    pointer-events: none;
    /* Typography here is loud on purpose: this is an arcade cabinet HUD read at
       a glance while the eyes are on the road. */
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

.ryder-overlay-idle { opacity: .2; }

.ryder-corner { display: flex; flex-direction: column; gap: .3rem; }
.ryder-corner-tl { grid-area: tl; }
.ryder-corner-tr { grid-area: tr; align-items: flex-end; }
.ryder-corner-bl { grid-area: bl; justify-content: flex-end; }
.ryder-corner-br { grid-area: br; align-items: flex-end; justify-content: flex-end; }

/* -- Position and laps --------------------------------------------------- */

.ryder-position { display: flex; align-items: baseline; line-height: 1; }
.ryder-position b { font: 900 3.4rem var(--font-display); letter-spacing: -.02em; }
.ryder-position sup { font: 800 1.1rem var(--font-display); margin-left: .1rem; }

.ryder-laps { display: flex; flex-direction: column; line-height: 1.1; }
.ryder-laps span { font-size: .6rem; letter-spacing: .22em; opacity: .75; }
.ryder-laps b { font: 900 1.3rem var(--font-display); }

/* -- Clock and minimap --------------------------------------------------- */

.ryder-clock { font: 900 1.5rem var(--font-display); font-variant-numeric: tabular-nums; }
.ryder-laptime { font-size: .62rem; letter-spacing: .14em; opacity: .8; font-variant-numeric: tabular-nums; }
.ryder-minimap { width: 8.5rem; height: 8.5rem; margin-top: .3rem; }

/* -- Centre callout ------------------------------------------------------ */

.ryder-callout {
    grid-area: callout;
    justify-self: center;
    align-self: start;
    padding: .3rem 1.1rem;
    border-radius: 999px;
    font: 900 1.3rem var(--font-display);
    letter-spacing: .2em;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .18s ease, transform .18s ease;
}
.ryder-callout.is-visible { opacity: 1; transform: scale(1); }
.ryder-callout.is-good { color: #b6ffcf; background: rgba(0, 255, 136, .18); }
.ryder-callout.is-warn { color: #ffe9a8; background: rgba(255, 200, 0, .18); }
.ryder-callout.is-boost { color: #a8e9ff; background: rgba(0, 190, 255, .22); }

/* -- Nitro --------------------------------------------------------------- */

.ryder-nitro {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(10, 6, 24, .5);
    opacity: .5;
    transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.ryder-nitro.is-ready { opacity: 1; border-color: #6fe3ff; }
.ryder-nitro.is-burning { border-color: #fff; background: rgba(111, 227, 255, .35); }
.ryder-nitro-glyph {
    display: grid;
    place-items: center;
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    background: #6fe3ff;
    color: #06121b;
    font: 900 .9rem var(--font-display);
}
.ryder-nitro b { font: 900 1.3rem var(--font-display); }
.ryder-nitro small { font-size: .5rem; letter-spacing: .18em; opacity: .75; }

/* -- Speedometer --------------------------------------------------------- */

.ryder-speedo { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.ryder-speedo b { font: 900 3rem var(--font-display); font-variant-numeric: tabular-nums; }
.ryder-speedo > span { font-size: .62rem; letter-spacing: .22em; opacity: .8; margin-top: -.2rem; }

.ryder-gears { display: flex; gap: 3px; margin-top: .35rem; }
.ryder-gears i {
    width: .55rem; height: .85rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, .18);
}
/* The bar climbs through the rev-counter colours, so peak speed is readable
   peripherally without reading the number. */
.ryder-gears i:nth-child(-n+4).is-lit { background: #7dffb0; }
.ryder-gears i:nth-child(n+5).is-lit { background: #ffd166; }
.ryder-gears i:nth-child(n+7).is-lit { background: #ff5d73; }

/* -- The typed word ------------------------------------------------------ */

.ryder-console {
    grid-area: console;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}

/* The hazard alert sits above the throttle word. It is a WARNING, not a prompt —
   it names what is coming and which way is clear, but the words that act on it
   are the permanent steering words below. */
.ryder-alert {
    display: none;
    padding: .16rem .9rem;
    border: 2px solid #ffd166;
    border-radius: 999px;
    background: rgba(60, 30, 0, .82);
    font: 800 .68rem var(--font-display);
    letter-spacing: .16em;
    color: #ffd166;
    animation: ryderAlertPulse .7s ease-in-out infinite alternate;
}
.ryder-alert.is-live { display: block; }

@keyframes ryderAlertPulse {
    from { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); }
    to   { box-shadow: 0 0 16px 2px rgba(255, 209, 102, .45); }
}

/* Steering words flank the throttle word. Their POSITION carries the direction,
   so the player does not have to read a label to know which way a word sends
   them — the left word is on the left. */
.ryder-steer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}

.ryder-steer-word {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .7rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px;
    background: rgba(10, 6, 24, .72);
    color: inherit;
    font-family: var(--font-main);
    cursor: default;
    transition: border-color var(--transition-fast), opacity var(--transition-fast);
}
.ryder-steer-word b { font: 900 1.05rem var(--font-display); letter-spacing: .04em; }
/* Typed characters dim, matching the throttle word exactly — all three prompts
   are fed from one buffer, so they must show progress the same way. */
.ryder-steer-word b i { color: #7dffb0; opacity: .5; font-style: normal; }
.ryder-steer-arrow { font-size: .8rem; opacity: .7; }

/* At the edge of the road that direction does nothing, so it is visibly out. */
.ryder-steer-word.is-blocked { opacity: .28; }
/* The way out of an oncoming hazard. Advice only: the other word still works. */
.ryder-steer-word.is-safe {
    border-color: #ffd166;
    background: rgba(255, 209, 102, .16);
}

.ryder-prompt-row { display: flex; flex-direction: column; align-items: center; gap: .1rem; }

.ryder-prompt {
    padding: .25rem 1.4rem;
    border-radius: 10px;
    background: rgba(10, 6, 24, .62);
    font: 900 2.1rem var(--font-display);
    letter-spacing: .06em;
    overflow-wrap: anywhere;
    text-align: center;
}
/* Typed characters dim so the eye tracks forward through the word instead of
   re-reading it from the start. */
.ryder-prompt b { color: #7dffb0; opacity: .5; }

.ryder-hint { font-size: .62rem; letter-spacing: .12em; opacity: .75; font-style: italic; }

.ryder-root.is-fumbled .ryder-prompt { background: rgba(255, 60, 90, .45); }
.ryder-root.is-scrubbing .ryder-prompt { box-shadow: 0 0 0 2px #ffd166; }

.ryder-meters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem;
    font-size: .6rem;
    letter-spacing: .1em;
    opacity: .85;
}
.ryder-meters b { font-variant-numeric: tabular-nums; }
.ryder-warning { color: #ffd166; font-weight: 800; }

/* -- Lobby --------------------------------------------------------------- */

.ryder-lobby {
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(12, 6, 28, .82);
    pointer-events: auto;
    overflow-y: auto;
}
.ryder-lobby.hidden { display: none; }

.ryder-lobby-card {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    width: min(100%, 34rem);
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(60, 30, 90, .96), rgba(20, 10, 40, .96));
    text-align: center;
}
.ryder-lobby-card h2 { font: 900 1.6rem var(--font-display); letter-spacing: .1em; color: #ffb877; }
.ryder-lobby-copy { font-size: .74rem; line-height: 1.65; opacity: .9; }
.ryder-lobby-copy b { color: #7dffb0; }

.ryder-keys { list-style: none; display: flex; flex-direction: column; gap: .3rem; font-size: .68rem; }
.ryder-keys kbd {
    display: inline-block;
    min-width: 3.6rem;
    margin-right: .5rem;
    padding: .1rem .4rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 4px;
    background: rgba(0, 0, 0, .35);
    font: 800 .62rem var(--font-main);
}

.ryder-lobby-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem;
    font-size: .55rem;
    letter-spacing: .12em;
}
.ryder-grid-label, .ryder-grid-pace { opacity: .6; }
.ryder-grid-car {
    padding: .1rem .4rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, .1);
}

/* One row per circuit. Locked rows stay visible on purpose — seeing what a win
   opens is the reason to chase the win. */
.ryder-tracks { display: flex; flex-direction: column; gap: .25rem; text-align: left; }

.ryder-track {
    display: flex;
    flex-direction: column;
    padding: .3rem .55rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    background: rgba(0, 0, 0, .28);
}
/* Name on the left, time of day pushed to the right. The two carry different
   kinds of information — one is what you TYPE, the other is what you get — so
   they are weighted very differently rather than run together in one line. */
.ryder-track b {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font: 900 .82rem var(--font-display);
    letter-spacing: .1em;
    color: #ffb877;
}
.ryder-track b i { font-style: normal; }
.ryder-track b em {
    margin-left: auto;
    font-style: normal;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.ryder-track span { font-size: .6rem; opacity: .8; line-height: 1.4; }
.ryder-track.is-current { border-color: rgba(125, 255, 176, .6); }
/* On the name, not on the row, so it lands beside the circuit rather than
   after the time of day. */
.ryder-track.is-current b i::after { content: ' · SELECTED'; color: #7dffb0; font-size: .6rem; }
.ryder-track.is-locked { opacity: .42; }
.ryder-track.is-locked b { color: var(--text-secondary); }

.ryder-lock-note { font-size: .62rem; opacity: .8; }
.ryder-unlocked { color: #7dffb0; font-weight: 800; letter-spacing: .1em; }

/* The lobby is typed, so it shows the same buffer echo the race does. */
.ryder-menu-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .4rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .62rem;
    letter-spacing: .14em;
    opacity: .9;
}
.ryder-menu-prompt b {
    padding: .1rem .5rem;
    border-radius: 5px;
    background: rgba(255, 184, 119, .2);
    font: 900 .95rem var(--font-display);
    color: #ffb877;
}
.ryder-menu-buffer {
    min-width: 3rem;
    padding: .1rem .4rem;
    border-radius: 5px;
    background: rgba(0, 0, 0, .45);
    font: 900 .95rem var(--font-display);
    font-style: normal;
    color: #7dffb0;
    letter-spacing: .12em;
}
.ryder-menu-buffer.is-fumbled { background: rgba(255, 60, 90, .45); color: #fff; }

.ryder-lobby-actions { display: flex; flex-direction: column; gap: .5rem; }

.ryder-button {
    padding: .65rem .9rem;
    border: 1px solid rgba(255, 184, 119, .6);
    border-radius: 8px;
    background: rgba(255, 184, 119, .16);
    color: #fff;
    font: 800 .82rem var(--font-display);
    letter-spacing: .16em;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.ryder-button:hover, .ryder-button:focus-visible { background: rgba(255, 184, 119, .34); }
.ryder-button-quiet { border-color: rgba(255, 255, 255, .25); background: transparent; }

/* -- Responsive ---------------------------------------------------------- */

/* Phones: the corners shrink and the minimap goes, because the road is the
   thing worth the pixels and the minimap is the most redundant readout. */
@media (max-width: 620px) {
    .ryder-overlay { padding: 3.4rem .55rem .6rem; gap: .3rem; }
    .ryder-position b { font-size: 2.2rem; }
    .ryder-speedo b { font-size: 1.9rem; }
    .ryder-clock { font-size: 1.05rem; }
    .ryder-minimap { display: none; }
    .ryder-prompt { font-size: 1.5rem; padding: .2rem .8rem; }
    .ryder-steer-word b { font-size: .82rem; }
    .ryder-steer-word { padding: .15rem .45rem; }
    .ryder-steer { gap: .3rem; }
    .ryder-lanes i { width: 1.1rem; }
    .ryder-meters { gap: .5rem; }
}

/* Short landscape: the callout overlaps the road rather than claiming a row. */
@media (max-height: 560px) {
    .ryder-overlay { grid-template-rows: auto 1fr auto auto; padding-top: 3.2rem; }
    .ryder-position b { font-size: 2rem; }
    .ryder-speedo b { font-size: 1.8rem; }
    .ryder-minimap { width: 5.5rem; height: 5.5rem; }
    .ryder-prompt { font-size: 1.4rem; }
    .ryder-hint { display: none; }
}

@media (min-width: 1024px) {
    .ryder-overlay { padding: 4.2rem 1.8rem 1.2rem; }
    .ryder-prompt { font-size: 2.5rem; }
}

/* Motion is decoration; every state is also carried by colour and text. */
@media (prefers-reduced-motion: reduce) {
    .ryder-callout { transition: none; }
    /* The alert's colour and position already carry the alarm. */
    .ryder-alert { animation: none; box-shadow: 0 0 14px 2px rgba(255, 209, 102, .4); }
}