/* The clash lobby (GDD s12).
 *
 * THE CAGE IS THE SCREEN. Everything else here is furniture around one object:
 * the Globe of Death, nations lit by who is on the board, with the rider lapping
 * the inside of it. The lobby is the only screen a player sees before every
 * single duel, so it gets the treatment of a place in the show rather than a
 * form with a submit button.
 *
 * Tokens and the set come from style.css, so this file holds the lobby's own
 * furniture and nothing that belongs to the theme.
 */

.duel { min-height: 100vh; }

.brandbar .exit {
    margin-left: auto; color: var(--dust); text-decoration: none;
    font-size: 0.85rem; letter-spacing: 0.04em;
}
.brandbar .exit:hover { text-decoration: underline; }

.duelwrap { max-width: var(--measure); margin: 0 auto; padding: 1.5rem 16px 3rem; }

/* ── The arena ───────────────────────────────────────────────────────────────
 * The cage left, the column right, and the column is ONE grid child so it
 * centres against the cage instead of hanging off the top of it.
 */
.arena {
    display: grid; gap: 1.6rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    margin-bottom: 2.4rem;
}

.cage {
    position: relative; min-width: 0;
    aspect-ratio: 1 / 1; max-width: 100%;
    border-radius: var(--radius);
    /* Spotlit from above and warm from the dirt below: the cage is standing in
     * an arena, not floating on a flat colour. */
    background:
        radial-gradient(circle at 50% 42%, rgba(122, 46, 42, 0.45), rgba(36, 26, 22, 0) 70%),
        linear-gradient(180deg, rgba(46, 21, 18, 0.85), rgba(36, 26, 22, 0.25));
    border: 1px solid var(--card-line);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.cage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The dirt the cage stands on. Warm brown, never blue-black (GDD s5.1). */
.cage::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24%;
    background: linear-gradient(180deg,
        rgba(122, 46, 42, 0) 0%, rgba(122, 46, 42, 0.3) 70%, rgba(46, 21, 18, 0.62) 100%);
    pointer-events: none;
}

.side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.side-head p { margin: 0; }
.side-head .kicker {
    font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--dust);
}
.side-head .count {
    font-family: 'Alfa Slab One', 'Outfit', serif;
    font-size: 1.1rem; color: var(--cream); line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.panel {
    display: flex; flex-direction: column; gap: 0.85rem;
    padding: 1.1rem;
    border: 1px solid var(--card-line); border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    min-width: 0;
}
/* AND THIS LINE IS WHY THE SCREEN MADE NO SENSE.
 *
 * SCAN, LOCK and RIDE are three states of one step and duel.js has always
 * switched between them correctly, with `el.hidden = which !== 'lock'` and so
 * on. But `hidden` is only a UA stylesheet rule - `[hidden] { display: none }`
 * - and ANY author rule that sets `display` on the same element beats it. The
 * `display: flex` directly above silently cancelled every hidden on this page,
 * so all three panels rendered at once: a SCAN FOR A RIVAL button, a "holding
 * for a live rider" timer and an empty rival card with a RIDE button, stacked
 * down the column, all live, all at the same time.
 *
 * play.css has carried `.panel[hidden] { display: none }` since the run screen
 * was built. duel.css never got it. */
.panel[hidden] { display: none; }
/* The one huge button on the screen is the one decision on it. */
.panel .btn { width: 100%; text-align: center; }
.panel .btn.big { font-size: 1.15rem; padding: 0.95rem 1.4rem; }
.panel .btn[disabled] { opacity: 0.55; cursor: default; }
.panel .btn:not(.primary) {
    background: transparent; color: var(--cream);
    border-color: var(--card-line); box-shadow: none;
}
.panel .btn:focus-visible { outline: 3px solid var(--corn); outline-offset: 3px; }

/* ── The dial ──
 * A picker, never a form: one label, one select, one line of consequence under
 * it. The paid half of the ladder is listed and marked rather than hidden.
 */
.dial {
    display: flex; flex-direction: column; gap: 0.35rem;
    font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--dust);
}
.dial select {
    font: inherit; font-size: 0.92rem; letter-spacing: 0.01em; text-transform: none;
    color: var(--cream); background: rgba(46, 21, 18, 0.7);
    border: 1px solid var(--card-line); border-radius: 10px;
    padding: 0.6rem 0.7rem; width: 100%;
}
.dial select:focus-visible { outline: 3px solid var(--corn); outline-offset: 2px; }
.dial-note { margin: 0; font-size: 0.84rem; color: var(--text-dim); }

/* ── Scanning ── */
.lapline {
    margin: 0; font-family: 'Alfa Slab One', 'Outfit', serif;
    font-size: 0.95rem; letter-spacing: 0.08em; color: var(--corn);
}
.ticker {
    margin: 0; min-height: 1.5em; font-size: 0.92rem; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.ticker b { color: var(--corn); font-weight: 700; }
.wait { margin: 0; font-size: 0.84rem; color: var(--dust); font-variant-numeric: tabular-nums; }

/* ── The rival card ──
 * A badge, a name, one line of facts and one line about the contest. Nothing on
 * it apologises for itself (GDD s12.3).
 */
.locked .card {
    display: flex; flex-direction: column; gap: 0.45rem;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--card-line); border-radius: 12px;
    background: rgba(46, 21, 18, 0.55);
}
.badge {
    align-self: flex-start;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.3rem 0.65rem; border-radius: 999px;
}
/* LIVE is the dusty turquoise, which is the only accent on this screen that
 * means "here now". A stored rival takes harvest gold: present, not present-now. */
.badge.is-live { background: var(--sky); color: #0e2422; }
.badge.is-ranked {
    background: rgba(232, 169, 60, 0.18); color: var(--corn);
    border: 1px solid rgba(232, 169, 60, 0.45);
}
.rivalname {
    margin: 0; font-family: 'Alfa Slab One', 'Outfit', serif;
    font-size: 1.4rem; line-height: 1.15; color: var(--cream);
}
.rivalsub, .rivalrecord {
    margin: 0; font-size: 0.88rem; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.rivalrecord { color: var(--dust); }
.blindline { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--dust); }

.err {
    margin: 0; padding: 0.8rem 1rem;
    border: 1px solid rgba(217, 79, 43, 0.5); border-radius: 10px;
    background: rgba(217, 79, 43, 0.12);
    color: var(--cream); font-size: 0.9rem;
}

/* No canvas, or reduced motion: the same information, flat. */
.flat { font-size: 0.86rem; color: var(--text-dim); }
.flat ul {
    list-style: none; margin: 0.5rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem;
}
.flat li { font-variant-numeric: tabular-nums; }

/* ── How it works ──
 * The rule of the contest, stated once, where a player stands when they first
 * wonder. Numbered because it IS a sequence: seed, commit, reveal.
 */
/* The .howto block itself is web/css/howto.css now, shared with the run
 * screen. All that is left here is where it sits on THIS page: the lobby
 * stacks sections, the run screen floats it in a sheet, and the gap between
 * sections is the only part of that which is the lobby's business. */
.howto { margin-bottom: 2rem; }

/* ── The duel board ── */
.board h2 { font-size: 1.2rem; }
.flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.flags li {
    display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto auto;
    gap: 0.9rem; align-items: baseline;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--card-line); border-radius: 10px;
    background: var(--card);
    font-variant-numeric: tabular-nums;
}
.flags .r { color: var(--dust); font-size: 0.85rem; }
.flags .who { color: var(--cream); min-width: 0; overflow-wrap: anywhere; }
.flags .ft { color: var(--corn); font-weight: 700; }
.flags .wl { color: var(--text-dim); font-size: 0.85rem; }

@media (max-width: 860px) {
    .arena { grid-template-columns: minmax(0, 1fr); }
    /* The cage keeps the top of the screen on a phone: it is the thing a player
     * came to look at, and the column reads under it. */
    .cage { max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) {
    .flags li { grid-template-columns: 1.8rem minmax(0, 1fr) auto; }
    .flags .wl { grid-column: 2 / -1; }
}