/* SudokuRogue. Every duration in GDD s15.1 is a custom property here, and
   prefers-reduced-motion collapses them all to 0 (GDD s15.3): the state change
   still happens, only the motion goes. js/play.js reads the same properties, so
   a timeline and a transition can never disagree about how long a beat is. */

:root {
    --bg: #0a2326;
    --bg-2: #0f2d31;
    --panel: #14393e;
    --panel-2: #1b474d;
    --line: #275a61;
    --line-strong: #4fb3a9;
    --ink: #f4f1e4;
    --ink-dim: #a9c3bd;
    --ink-faint: #6e8f8a;
    --given: #f4f1e4;
    --placed: #7cc4ff;
    --gold: #ffcc33;
    --chips: #4cb3ff;
    --mult: #ff5d6c;
    --good: #5be39a;
    --bad: #ff5d6c;
    --peer: rgba(79, 179, 169, 0.12);
    --same: rgba(245, 200, 76, 0.22);
    --cursor: #ffcc33;
    --done: rgba(91, 227, 154, 0.10);

    /* Portrait: the grid takes the width, but never so much height that the
       pad falls off a short phone. Wide layouts redefine it below. */
    --cell: clamp(30px, min(calc((min(100vw, 640px) - 32px) / 9), calc((100svh - 340px) / 9)), 60px);
    --radius: 12px;

    /* GDD s15.1 durations, in ms */
    --t-place: 180ms;
    --t-wrong: 320ms;
    --t-unit-cell: 90ms;
    --t-chips: 300ms;
    --t-mult: 120ms;
    --t-total: 400ms;
    --t-cleared: 900ms;
    --t-deal: 80ms;
    --t-buy: 400ms;
    --t-over: 1200ms;
    --t-ui: 120ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --t-place: 0ms;
        --t-wrong: 0ms;
        --t-unit-cell: 0ms;
        --t-chips: 0ms;
        --t-mult: 0ms;
        --t-total: 0ms;
        --t-cleared: 0ms;
        --t-deal: 0ms;
        --t-buy: 0ms;
        --t-over: 0ms;
        --t-ui: 0ms;
    }
    *, *::before, *::after {
        animation-duration: 0ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0ms !important;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Hero art on the tyga CDN (docs/ART-PROMPTS.md): flat screenprints whose
   centre is already plain teal, so the scrim is light (chessingo's 0.72-0.86
   would bury the print). Top-to-bottom layers: the scrim, then the art. If the art is missing,
   slow or blocked its layer is empty and the teal gradient shows through
   (progressive enhancement, never a hard dependency). */
:root { --bg-art: url('https://prodmedia.tyga.host/public/tyga.cloud/landing/sudokurogue.com/sudokurogue_3.jpg'); }
@media (max-width: 780px) {
    :root { --bg-art: url('https://prodmedia.tyga.host/public/tyga.cloud/landing/sudokurogue.com/sudokurogue_2.jpg'); }
}
body {
    background-color: var(--bg);
    background:
        linear-gradient(rgba(6, 26, 29, 0.30), rgba(6, 26, 29, 0.50)),
        var(--bg-art) center / cover no-repeat,
        radial-gradient(1200px 700px at 50% -10%, #173f44 0%, var(--bg) 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--ink);
    font: 15px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}
button, input, select { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.app { min-height: 100%; display: flex; justify-content: center; }
.screen { display: none; width: 100%; max-width: 520px; padding: 12px 16px 24px; }
.screen-play { max-width: 640px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.app[data-screen="title"] .screen-title,
.app[data-screen="race"] .screen-race,
.app[data-screen="play"] .screen-play { display: flex; flex-direction: column; }

/* ── buttons: every clickable thing has hover and press (GDD s15.3) ─────── */

.btn {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel);
    cursor: pointer;
    font-weight: 600;
    transition: transform var(--t-ui) ease, background var(--t-ui) ease, border-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}
.btn:hover { background: var(--panel-2); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible, .tool:focus-visible, .key:focus-visible, .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(180deg, #ffd766, #e6ad25); color: #241a00; border-color: #ffd766; box-shadow: 0 4px 0 #9b6f0b; }
.btn-primary:hover { background: linear-gradient(180deg, #ffe08a, #f0b934); border-color: #ffe08a; }
.btn-primary:active { box-shadow: 0 1px 0 #9b6f0b; transform: translateY(3px); }
.btn-ghost { background: transparent; }
.btn-danger { border-color: #7a2c3a; color: #ffb3bd; }
.btn-danger:hover { background: #3a1820; border-color: var(--bad); }

/* ── title ─────────────────────────────────────────────────────────────── */

.screen-title, .screen-race { justify-content: center; min-height: 100vh; }
.title-card { display: flex; flex-direction: column; gap: 14px; text-align: center; }
/* The wordmark is an outlined SVG (scripts/make-logo.py), so it never falls back to a system face. */
.logo { margin: 0; line-height: 0; }
.logo img { display: block; width: min(100%, 520px); height: auto; margin: 0 auto; }
.tagline { color: var(--ink-dim); margin: 0 auto; max-width: 34ch; }
.title-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.seed-entry summary { cursor: pointer; color: var(--ink-dim); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.seed-entry summary:hover { color: var(--ink); }
.seed-form { display: flex; gap: 8px; }
.seed-form input, .seed-form select { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.seed-form select { flex: 0 0 auto; }
.seed-form input:focus, .seed-form select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.title-error, .race-status { color: var(--ink-dim); min-height: 1.4em; margin: 0; }
.title-error { color: #ffb3bd; }
.race-row { display: flex; justify-content: center; }
.lobby { display: grid; gap: 14px; }
.lobby-mode { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.lobby-mode h2 { margin: 0; }
@media (min-width: 760px) { .screen-race { max-width: 900px; } .lobby { grid-template-columns: 1fr 1fr; } }
.race-strip.relay { justify-content: space-between; }
.race-strip.relay.mine { border-color: var(--gold); color: var(--gold); }
.race-strip .code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.1em; }
.race-strip button { min-height: 32px; padding: 2px 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.race-strip button:hover { background: var(--panel); }
.grid.locked { opacity: 0.82; }

.history { margin: 0; font-size: 13px; color: var(--ink-dim); }
.board { text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.board h3 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.board h3 span { color: var(--ink-faint); font-weight: 600; text-transform: none; letter-spacing: 0; }
.board-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-variant-numeric: tabular-nums; font-size: 14px; }
.board-list li { display: grid; grid-template-columns: 2.2ch 1fr auto auto; gap: 10px; align-items: baseline; padding: 2px 4px; border-radius: 6px; }
.board-list li.me { background: rgba(245, 200, 76, 0.14); }
.board-list .rk { color: var(--ink-faint); text-align: right; }
.board-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .an { color: var(--ink-dim); font-size: 12px; }
.board-list .ch { font-weight: 800; color: var(--ink); }
.board-empty { margin: 0; color: var(--ink-faint); font-size: 13px; }
.summary-board { margin-top: 12px; }
.name-row { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-dim); }
.name-row input { width: 12ch; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.name-row input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* blind intro: persona and stakes, dealt in like a card */
.intro { text-align: center; animation: deal calc(var(--t-deal) * 4) cubic-bezier(.2, .9, .3, 1) both; }
.intro-ante { margin: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
.intro h2 { font-size: 30px; margin: 2px 0 10px; }
.intro.boss h2 { color: var(--mult); }
.intro-target { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 16px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.intro-label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
#intro-target { font-size: 26px; font-weight: 900; color: var(--chips); font-variant-numeric: tabular-nums; }
.intro-boss { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: linear-gradient(90deg, #3a1622, #2a1530); border: 1px solid #6e2737; display: flex; flex-direction: column; gap: 2px; }
.intro-boss strong { color: var(--mult); text-transform: uppercase; letter-spacing: 0.06em; }
.intro-boss span { color: #ffd0d6; font-size: 14px; }
.persona { margin: 14px 0 0; padding: 0; }
.persona p { margin: 0; font-style: italic; color: var(--ink) !important; font-size: 16px; }
.persona cite { display: block; margin-top: 4px; font-style: normal; color: var(--gold); font-size: 13px; font-weight: 700; }
.intro-rating { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint) !important; }

.boss-banner { cursor: pointer; transition: border-color var(--t-ui), background var(--t-ui); }
.boss-banner:hover { border-color: var(--line-strong); }
.boss-banner:active { transform: scale(0.99); }
.boss-banner:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.slot.full { cursor: pointer; }
.slot.full:active { transform: scale(0.97); }
.slot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cell.cand::before { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: rgba(245, 200, 76, 0.18); pointer-events: none; }
.cell.filled.cand::before { display: none; }

.moves { display: flex; flex-direction: column; align-items: center; gap: 0; }
.moves-n { font-size: 20px; font-weight: 900; color: var(--chips); font-variant-numeric: tabular-nums; line-height: 1; }
.moves.low .moves-n { color: var(--mult); animation: pulse 1s infinite; }
.moves.spent .moves-n { animation: bump var(--t-place) ease; }
.btn-skip { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.15; }
.btn-skip small { font-size: 11px; color: var(--gold); font-weight: 700; }
.skip-hint { margin: 8px 0 0; text-align: center; }
.coupon { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: #22301f; border: 1px solid #3f6b37; color: #bff2b3 !important; font-size: 13px; }
.shop-sub { margin: 14px 0 6px; font-size: 14px; }
.shop-sub span { font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.cards-charts { grid-template-columns: repeat(2, 1fr); }
.held { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.held .slot { min-height: 48px; }
.card.chart { min-height: 96px; border-color: #2c7bbf; background: linear-gradient(180deg, #1f3550, #18263a); }
.card .lvl { font-size: 11px; color: var(--chips); font-weight: 800; }
.tiers { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tiers th { text-align: left; font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 6px; }
.tiers td { padding: 6px; border-top: 1px solid var(--line); }
.tiers td.c { color: var(--chips); font-weight: 800; }
.tiers td.m { color: var(--mult); font-weight: 800; }
.tiers tr.up td:first-child { color: var(--gold); }
#info-tags { margin-top: 10px; font-size: 13px; color: var(--ink-dim); }
.cell.flash-level { animation: bump var(--t-buy) ease; }

/* ── HUD (GDD s15.4: target and chips always visible at 360x640) ────────── */

.hud { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; z-index: 3; padding-bottom: 8px; background: linear-gradient(180deg, var(--bg) 85%, transparent); }
.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hud-blind { display: flex; flex-direction: column; line-height: 1.15; }
.hud-ante { font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.hud-blindname { font-weight: 800; font-size: 17px; }
.hud-blindname.boss { color: var(--mult); }
.hud-money { font-weight: 900; color: var(--gold); font-size: 20px; font-variant-numeric: tabular-nums; }
.hud-money.bump { animation: bump var(--t-buy) ease; }
.seed-chip { display: flex; gap: 6px; align-items: baseline; min-height: 44px; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--line); background: transparent; cursor: pointer; font-family: ui-monospace, Menlo, monospace; font-size: 13px; max-width: 42%; overflow: hidden; transition: border-color var(--t-ui), background var(--t-ui); }
.seed-chip:hover { border-color: var(--line-strong); background: var(--bg-2); }
.seed-chip:active { transform: scale(0.97); }
.seed-label { color: var(--ink-faint); font-size: 11px; }
#seed-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.target { position: relative; height: 34px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.target-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #2a76c9, var(--chips)); transition: width var(--t-total) cubic-bezier(.2, .8, .2, 1); }
.target.met .target-fill { background: linear-gradient(90deg, #2c9c63, var(--good)); }
.target-text { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; gap: 4px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.target-sep { color: var(--ink-dim); }

.pips-wrap { display: flex; flex-direction: column; gap: 2px; }
.pips-wrap:last-child { align-items: flex-end; }
.pip-label { font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.pips { display: flex; gap: 4px; min-height: 14px; }
.pip { width: 14px; height: 14px; border-radius: 50%; transition: transform var(--t-wrong) ease, background var(--t-wrong) ease, opacity var(--t-wrong) ease; }
.pips-mistake .pip { background: var(--mult); box-shadow: 0 0 8px rgba(255, 93, 108, 0.5); }
.pips-burn .pip { background: #ff9a3c; box-shadow: 0 0 8px rgba(255, 154, 60, 0.5); border-radius: 3px; transform: rotate(45deg) scale(0.8); }
.pip.spent { background: transparent !important; box-shadow: inset 0 0 0 2px var(--line) !important; }
.pip.lost { animation: pip-lose var(--t-wrong) ease; }

.streak { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.streak-n { font-size: 22px; font-weight: 900; color: var(--gold); min-width: 1.4ch; text-align: right; }
.streak-x { font-size: 13px; color: var(--mult); font-weight: 800; }
.streak.reset .streak-n { animation: streak-reset var(--t-wrong) ease; }
.streak.up .streak-n { animation: bump var(--t-mult) ease; }

.boss-banner { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 6px 12px; border-radius: 10px; background: linear-gradient(90deg, #3a1622, #2a1530); border: 1px solid #6e2737; font-size: 13px; }
.boss-banner strong { color: var(--mult); text-transform: uppercase; letter-spacing: 0.06em; }
.boss-banner span { color: #ffd0d6; }
.boss-banner.upcoming { background: var(--bg-2); border-color: var(--line); }
.boss-banner.upcoming strong { color: var(--ink-dim); }
.boss-banner.upcoming span { color: var(--ink-faint); }
.boss-banner.upcoming { flex-wrap: nowrap; overflow: hidden; }
.boss-banner.upcoming strong { white-space: nowrap; font-size: 11px; }
.boss-banner.upcoming #boss-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 12px; }
.clock { margin-left: auto; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); }
.clock.low { color: var(--mult); animation: pulse 1s infinite; }

.race-strip { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; }
.race-strip .opp-bar { flex: 1; height: 8px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.race-strip .opp-fill { height: 100%; background: var(--mult); width: 0; transition: width var(--t-total) ease; }
.race-strip.error { border-color: var(--bad); color: #ffb3bd; }

/* ── the grid: fixed cells, no reflow ever (GDD s15.3) ──────────────────── */

.board-wrap { position: relative; display: flex; justify-content: center; margin: 4px 0 12px; }
.grid {
    display: grid;
    grid-template-columns: repeat(9, var(--cell));
    grid-template-rows: repeat(9, var(--cell));
    border: 2px solid var(--line-strong);
    border-radius: 8px;
    background: var(--bg-2);
    overflow: hidden;
    outline: none;
    user-select: none;
    touch-action: manipulation;
    transition: filter var(--t-over) ease;
}
.grid.dim .cell:not(.filled) { opacity: 0.35; transition: opacity var(--t-cleared) ease; }
.cell {
    position: relative;
    width: var(--cell);
    height: var(--cell);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: calc(var(--cell) * 0.56);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background var(--t-ui) ease;
}
.cell:nth-child(9n) { border-right: 0; }
.cell:nth-child(9n + 3), .cell:nth-child(9n + 6) { border-right: 2px solid var(--line-strong); }
.cell.r2, .cell.r5 { border-bottom: 2px solid var(--line-strong); }
.cell.r8 { border-bottom: 0; }
.cell:hover { background: rgba(255, 255, 255, 0.05); }
.cell:active { background: rgba(255, 255, 255, 0.09); }
.cell.peer { background: var(--peer); }
.cell.same { background: var(--same); }
.cell.done { background: var(--done); }
.cell.diag { background-image: linear-gradient(rgba(255, 93, 108, 0.08), rgba(255, 93, 108, 0.08)); }
.cell.cursor { box-shadow: inset 0 0 0 3px var(--cursor); z-index: 1; }
.cell .v { display: block; line-height: 1; }
.cell.given .v { color: var(--given); }
.cell.placed .v { color: var(--placed); }
.cell.revealed .v { color: var(--good); }
.cell.lie-fixed .v { color: var(--gold); }

/* nine fixed pencil positions; siblings never move (GDD s15.3) */
.pm { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none; }
.pm i { font-style: normal; font-size: calc(var(--cell) * 0.22); font-weight: 600; color: var(--ink-dim); display: grid; place-items: center; line-height: 1; visibility: hidden; }
.pm i.on { visibility: visible; }
.cell.filled .pm { display: none; }

.cell.pop .v { animation: pop var(--t-place) ease-out; }
.cell.wrong { animation: shake var(--t-wrong) ease; }
.cell.wrong::after { content: attr(data-wrong); position: absolute; inset: 0; display: grid; place-items: center; color: var(--bad); background: rgba(255, 93, 108, 0.28); animation: fade-out var(--t-wrong) ease forwards; }
.cell.flash { animation: unit-flash calc(var(--t-unit-cell) * 4) ease-out; }

/* ── the count-up (GDD s15.2) ───────────────────────────────────────────── */

.countup {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(20, 18, 28, 0.92);
    border: 1px solid var(--line-strong);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    white-space: nowrap;
}
.cu-tier { font-size: 12px; letter-spacing: 0.1em; color: var(--ink-dim); margin-right: 4px; }
.countup.tier-TRIPLE .cu-tier, .countup.tier-DOUBLE .cu-tier { color: var(--gold); }
.cu-chips { font-size: 26px; color: #fff; background: var(--chips); padding: 2px 10px; border-radius: 8px; min-width: 2.6ch; text-align: center; }
.cu-mult { font-size: 26px; color: rgba(255, 255, 255, 0.35); background: #4a2430; padding: 2px 10px; border-radius: 8px; min-width: 2.6ch; text-align: center; }
.cu-mult.landed { color: #fff; background: var(--mult); animation: punch var(--t-mult) ease-out; }
.cu-times, .cu-eq { color: var(--ink-dim); }
.cu-total { font-size: 26px; color: var(--gold); min-width: 3ch; opacity: 0; }
.cu-total.shown { opacity: 1; }

.stamp {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    transform: translate(-50%, -50%) rotate(-12deg);
    padding: 8px 22px;
    border: 5px solid var(--good);
    border-radius: 10px;
    color: var(--good);
    font-weight: 900;
    font-size: 40px;
    letter-spacing: 0.12em;
    background: rgba(20, 18, 28, 0.6);
    pointer-events: none;
    animation: stamp var(--t-cleared) cubic-bezier(.2, 1.6, .4, 1) both;
}

.flash { position: fixed; inset: 0; pointer-events: none; background: #fff; opacity: 0; z-index: 50; }
.flash.go { animation: screen-flash calc(var(--t-mult) * 3) ease-out; }

/* ── pad and tools: 44px minimum touch targets (GDD s15.3) ──────────────── */

.pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
@media (min-width: 480px) { .pad { grid-template-columns: repeat(10, 1fr); } }
.key {
    position: relative;
    min-height: 52px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel);
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--t-ui) ease, background var(--t-ui) ease, border-color var(--t-ui) ease;
}
.key:hover { background: var(--panel-2); border-color: var(--line-strong); }
.key:active { transform: scale(0.94); }
.key:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
.key .left { position: absolute; right: 4px; bottom: 2px; font-size: 10px; color: var(--ink-faint); font-weight: 600; }
.key.gated { opacity: 0.25; }
.pad.pencil .key { color: var(--ink-dim); font-size: 17px; border-style: dashed; }

.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.tool { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: 12px; color: var(--ink-dim); transition: transform var(--t-ui), background var(--t-ui), border-color var(--t-ui), color var(--t-ui); }
.tool:hover { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }
.tool:active { transform: scale(0.95); }
.tool:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.tool[aria-pressed="true"] { background: var(--panel-2); color: var(--gold); border-color: var(--gold); }
.tool-icon { font-size: 18px; line-height: 1.1; }
.tool.gated { opacity: 0.25; }
.tool.coach-target, .key.coach-target { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(245, 200, 76, 0.5); animation: pulse 1.2s infinite; }

.gadget-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.slot { min-height: 56px; border-radius: 10px; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; font-size: 11px; line-height: 1.15; color: var(--ink-faint); background: transparent; transition: transform var(--t-ui), border-color var(--t-ui), background var(--t-ui); }
.slot.full { border-style: solid; border-color: #2f8f86; background: linear-gradient(180deg, #2f2752, #231e3d); color: var(--ink); font-weight: 700; cursor: pointer; }
.slot.full:hover { transform: translateY(-2px); border-color: var(--gold); }
.slot.pulse { animation: slot-pulse var(--t-buy) ease; }

.coach { padding: 8px 12px; border-radius: 10px; background: #2b2410; border: 1px solid #6b5418; color: #ffe7a6; font-size: 14px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.coach button { min-height: 36px; padding: 4px 10px; border-radius: 8px; border: 1px solid #6b5418; background: transparent; color: #ffe7a6; cursor: pointer; }
.coach button:hover { background: #3a3014; }

/* ── overlays ──────────────────────────────────────────────────────────── */

.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 8, 16, 0.72); backdrop-filter: blur(3px); animation: fade-in var(--t-ui) ease; }
.panel { width: 100%; max-width: 380px; padding: 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); max-height: calc(100vh - 32px); overflow: auto; }
.panel-wide { max-width: 480px; }
.panel h2 { margin: 0 0 8px; }
.panel p { color: var(--ink-dim); }
.hint { font-size: 13px; color: var(--ink-faint) !important; }
.panel-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.panel-actions .btn { flex: 1; }
.panel-actions-col { flex-direction: column; }
.help .keys { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

.reward { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); margin-bottom: 12px; font-variant-numeric: tabular-nums; font-size: 14px; }
.reward dt { color: var(--ink-dim); }
.reward dd { margin: 0; color: var(--gold); font-weight: 800; text-align: right; }
.reward .sum { border-top: 1px solid var(--line); padding-top: 4px; color: var(--ink); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: hidden; }
.card {
    position: relative;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 12px;
    border: 1px solid #2f8f86;
    background: linear-gradient(180deg, #342b5e, #241e40);
    text-align: left;
    cursor: pointer;
    animation: deal calc(var(--t-deal) * 4) cubic-bezier(.2, .9, .3, 1) both;
    transition: transform var(--t-ui) ease, border-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.card:active { transform: translateY(-1px) scale(0.98); }
.card:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; border-color: var(--line); }
.card .name { font-weight: 800; font-size: 14px; }
.card .desc { font-size: 12px; color: var(--ink-dim); flex: 1; }
.card .cost { font-weight: 900; color: var(--gold); }
.card .why { font-size: 11px; color: #ffb3bd; }
.card.fly { animation: fly var(--t-buy) ease-in forwards; }
.empty { text-align: center; padding: 18px; border: 1px dashed var(--line); border-radius: 12px; }

.overlay-summary { backdrop-filter: none; background: rgba(10, 8, 16, 0.55); }
.app.over .screen-play { filter: grayscale(1) brightness(0.8); transition: filter var(--t-over) ease; }
.summary .stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.summary dt { color: var(--ink-dim); }
.summary dd { margin: 0; font-weight: 800; text-align: right; }
.summary-reason { margin: 0; }
.summary.won h2 { color: var(--gold); }

.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; padding: 10px 16px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); animation: toast-in var(--t-ui) ease; max-width: calc(100vw - 32px); }
.toast.error { border-color: var(--bad); color: #ffd0d6; }

.loading { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: rgba(10, 8, 16, 0.6); color: var(--ink-dim); }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: spin 0.8s linear infinite; }

/* ── keyframes ─────────────────────────────────────────────────────────── */

@keyframes pop { 0% { transform: scale(1); opacity: 0; } 50% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes unit-flash { 0% { background: rgba(245, 200, 76, 0.75); } 100% { background: var(--done); } }
@keyframes punch { 0% { transform: scale(1.8); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes streak-reset { 0% { color: var(--bad); transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes pip-lose { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes stamp { 0% { transform: translate(-50%, -50%) rotate(-12deg) scale(3); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; } }
@keyframes screen-flash { 0% { opacity: 0.55; } 100% { opacity: 0; } }
@keyframes deal { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fly { to { transform: translateY(60vh) scale(0.3); opacity: 0; } }
@keyframes slot-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 200, 76, 0.9); } 100% { box-shadow: 0 0 0 14px rgba(245, 200, 76, 0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes toast-in { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-height: 700px) {
    .key { min-height: 46px; }
    .tool { min-height: 44px; }
    .slot { min-height: 46px; }
    .board-wrap { margin-bottom: 8px; }
}

/* ── responsive: desktop and landscape go two-column ──────────────────────
   Board on the left at the largest size the viewport height allows, the HUD,
   pad, tools and build stacked on the right. The same DOM, only placement
   changes, so keyboard and touch behave identically in every layout. */

@media (min-width: 900px) and (min-height: 560px), (orientation: landscape) and (max-height: 560px) and (min-width: 560px) {
    .screen-play {
        max-width: 1180px;
        display: none;
        padding-top: 16px;
    }
    .app[data-screen="play"] .screen-play {
        display: grid;
        grid-template-columns: auto minmax(300px, 420px);
        grid-template-areas:
            "board hud"
            "board pad"
            "board tools"
            "board gadgets"
            "board rest";
        grid-template-rows: auto auto auto auto 1fr;
        column-gap: 28px;
        row-gap: 10px;
        justify-content: center;
        align-content: start;
    }
    .hud { grid-area: hud; position: static; background: none; padding-bottom: 0; }
    .board-wrap { grid-area: board; margin: 0; align-self: start; position: sticky; top: 16px; }
    .pad { grid-area: pad; grid-template-columns: repeat(5, 1fr); }
    .tools { grid-area: tools; margin-top: 0; }
    .gadget-bar { grid-area: gadgets; margin-top: 0; }
    :root { --cell: clamp(30px, min(calc((100svh - 40px) / 9), calc((100vw - 420px - 88px) / 9)), 76px); }
}

/* Landscape phones: every pixel of height goes to the grid. */
@media (orientation: landscape) and (max-height: 560px) {
    .screen-play { padding-top: 8px; padding-bottom: 8px; }
    .app[data-screen="play"] .screen-play { row-gap: 6px; column-gap: 16px; grid-template-columns: auto minmax(260px, 380px); }
    :root { --cell: clamp(26px, calc((100svh - 20px) / 9), 60px); }
    .hud { gap: 4px; }
    .target { height: 28px; }
    .key { min-height: 44px; font-size: 18px; }
    .tool { min-height: 44px; }
    .tool span:not(.tool-icon) { display: none; }
    .slot { min-height: 44px; font-size: 10px; }
    .boss-banner { padding: 4px 10px; }
    .screen-title, .screen-race { min-height: 0; padding-top: 16px; }
    .card { min-height: 104px; }
    .panel { padding: 14px 16px; }
    .reward { grid-template-columns: repeat(2, 1fr auto); column-gap: 12px; }
}

/* Big screens get a bigger, calmer HUD. */
@media (min-width: 1200px) and (min-height: 760px) {
    .hud-blindname { font-size: 20px; }
    .hud-money { font-size: 24px; }
    .target { height: 40px; font-size: 18px; }
    .key { min-height: 60px; font-size: 26px; }
}

/* Tablet portrait: one column, but wider keys. */
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
    .key { min-height: 58px; }
}

/* ── celebration FX (GDD s19) ───────────────────────────────────────────── */

.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 80; }
.app.shaking { animation: fx-shake 420ms cubic-bezier(.36, .07, .19, .97); }
@keyframes fx-shake {
    10%, 90% { transform: translate(calc(var(--shake) * -0.3), 0); }
    20%, 80% { transform: translate(calc(var(--shake) * 0.6), calc(var(--shake) * -0.3)); }
    30%, 50%, 70% { transform: translate(calc(var(--shake) * -1), calc(var(--shake) * 0.4)); }
    40%, 60% { transform: translate(var(--shake), calc(var(--shake) * -0.4)); }
}
.fx-word { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 85; pointer-events: none; white-space: nowrap;
    font-weight: 900; font-size: clamp(34px, 9vw, 64px); letter-spacing: 0.02em; }
.fx-word.big { font-size: clamp(48px, 15vw, 112px); }
.fx-word span { display: inline-block; animation: fx-letter 800ms cubic-bezier(.2, 1.8, .4, 1) both; }
.fx-word.big span { animation-duration: 1100ms; }
.fx-word.gold span { color: #ffd766; -webkit-text-stroke: 2px #8a5d00; text-shadow: 0 5px 0 #8a5d00, 0 0 30px rgba(255, 215, 102, 0.7); }
.fx-word.mult span { color: #ff8a96; -webkit-text-stroke: 2px #7a1020; text-shadow: 0 5px 0 #7a1020, 0 0 30px rgba(255, 93, 108, 0.7); }
.fx-word.chips span { color: #9fd8ff; -webkit-text-stroke: 2px #0f3c66; text-shadow: 0 5px 0 #0f3c66, 0 0 30px rgba(76, 179, 255, 0.7); }
.fx-word.good span { color: #9ff5c6; -webkit-text-stroke: 2px #0d5232; text-shadow: 0 5px 0 #0d5232, 0 0 30px rgba(91, 227, 154, 0.7); }
@keyframes fx-letter {
    0% { transform: translateY(40px) scale(0.2) rotate(-12deg); opacity: 0; }
    35% { transform: translateY(-14px) scale(1.25) rotate(4deg); opacity: 1; }
    55% { transform: translateY(4px) scale(0.95) rotate(-2deg); }
    75% { transform: translateY(0) scale(1.03); opacity: 1; }
    100% { transform: translateY(-30px) scale(1); opacity: 0; }
}
.fx-float { position: fixed; z-index: 84; pointer-events: none; transform: translate(-50%, -50%); font-weight: 900; font-size: 26px;
    font-variant-numeric: tabular-nums; animation: fx-float 1000ms cubic-bezier(.2, .8, .3, 1) forwards; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
.fx-float.gold { color: #ffd766; }
.fx-float.chips { color: #8fd0ff; }
.fx-float.good { color: #9ff5c6; }
.fx-float.mult { color: #ff9aa4; }
@keyframes fx-float { 0% { transform: translate(-50%, -20%) scale(0.5); opacity: 0; } 20% { transform: translate(-50%, -60%) scale(1.35); opacity: 1; }
    100% { transform: translate(-50%, -260%) scale(1); opacity: 0; } }
.fx-fly { position: fixed; z-index: 86; pointer-events: none; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 900; font-size: 18px; color: #241a00; background: radial-gradient(circle at 35% 30%, #fff1b8, #ffcc33 60%, #b8860b);
    box-shadow: 0 0 18px rgba(255, 215, 102, 0.8); }
.fx-fly.good { background: radial-gradient(circle at 35% 30%, #e5fff0, #5be39a 60%, #1f7a4b); color: #04301b; box-shadow: 0 0 18px rgba(91, 227, 154, 0.8); }
.fx-fly.chips { background: radial-gradient(circle at 35% 30%, #e6f5ff, #4cb3ff 60%, #1b5c99); color: #06233d; box-shadow: 0 0 18px rgba(76, 179, 255, 0.8); }
.fx-fly.mult { background: radial-gradient(circle at 35% 30%, #ffe6e9, #ff5d6c 60%, #8e1a28); color: #3a0008; box-shadow: 0 0 18px rgba(255, 93, 108, 0.8); }
.fx-bump { animation: fx-bump 380ms cubic-bezier(.2, 1.8, .4, 1); }
@keyframes fx-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fx-wipe { position: fixed; inset: 0; z-index: 90; pointer-events: none; clip-path: circle(0 at var(--x) var(--y)); animation: fx-wipe-in 320ms cubic-bezier(.7, 0, .3, 1) forwards; }
.fx-wipe.out { animation: fx-wipe-out 360ms cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes fx-wipe-in { to { clip-path: circle(150% at var(--x) var(--y)); } }
@keyframes fx-wipe-out { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0 at 50% 50%); } }

/* panels drop in with overshoot, Candy Crush style */
.overlay > .panel { animation: fx-drop 520ms cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes fx-drop { 0% { transform: translateY(-70px) scale(0.85); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.card { animation-timing-function: cubic-bezier(.2, 1.6, .4, 1) !important; }

/* the three-star card */
.fx-card { text-align: center; max-width: 360px; }
.fx-card-title { font-size: 30px; color: var(--gold); margin: 6px 0 4px; }
.fx-card-lines p { margin: 2px 0; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.fx-stars { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 96px; }
.fx-star { width: 72px; height: 72px; display: inline-block; }
.fx-star.s1 { width: 92px; height: 92px; }
.fx-star svg { width: 100%; height: 100%; fill: #275a61; stroke: #4fb3a9; stroke-width: 1; transition: fill 120ms; }
.fx-star.on svg { fill: #ffd766; stroke: #8a5d00; filter: drop-shadow(0 0 12px rgba(255, 215, 102, 0.8)); }
.fx-star.on:not(.still) { animation: fx-star 520ms cubic-bezier(.2, 1.9, .4, 1); }
@keyframes fx-star { 0% { transform: scale(0.2) rotate(-60deg); } 60% { transform: scale(1.35) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
.fx-card-ov.closing { animation: fade-out 180ms ease forwards; }

/* ── the dungeon (GDD s17) ──────────────────────────────────────────────── */

.grid-wrap { position: relative; display: inline-block; }
.rooms { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none; z-index: 2; }
.room { position: relative; }
.room .fog { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease;
    background:
        radial-gradient(circle at 30% 30%, rgba(80, 70, 130, 0.35), transparent 60%),
        repeating-linear-gradient(45deg, #15121f 0 6px, #191527 6px 12px);
    display: grid; place-items: center; color: #4b4475; font-size: calc(var(--cell) * 1.1); font-weight: 900; }
.room.dark .fog { opacity: 1; }
.room.lifting .fog { animation: fog-lift 700ms ease forwards; }
@keyframes fog-lift { 0% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 0; transform: scale(1.25); filter: blur(8px); } }
.room .badge { position: absolute; right: 1px; top: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; display: grid; place-items: center;
    font-size: 9px; font-weight: 900; line-height: 1; background: rgba(20, 18, 28, 0.85); border: 1px solid var(--line-strong); color: var(--ink); }
.room .badge.pop { animation: fx-bump 500ms cubic-bezier(.2, 1.8, .4, 1); }
.room .badge.gold { color: var(--gold); border-color: #8a5d00; }
.room .badge.chest { color: #c38bff; border-color: #6a3fa8; }
.room .badge.fountain { color: var(--good); border-color: #1f7a4b; }
.room .badge.scroll { color: #ffe7a6; border-color: #6b5418; }
.room .badge.monster { color: var(--mult); border-color: #7a1020; }
.room .badge.trap { color: #ff9a3c; border-color: #8a4a10; }
.room .badge.stairs { color: #9fd8ff; border-color: #2c7bbf; }
.room .badge.looted { opacity: 0.35; }
.room.stairs-found { box-shadow: inset 0 0 0 2px rgba(76, 179, 255, 0.7); }
.room.entry::after { content: ''; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--good); opacity: 0.6; }
.cell.door::after { content: ''; position: absolute; width: 38%; height: 38%; border-radius: 50% 50% 2px 2px; border: 2px solid var(--gold); border-bottom-width: 0;
    box-shadow: 0 0 10px rgba(245, 200, 76, 0.6); animation: pulse 1.6s infinite; pointer-events: none; }
.cell.door.to-n::after { top: 2px; } .cell.door.to-s::after { bottom: 2px; transform: rotate(180deg); }
.cell.door.to-w::after { left: 2px; transform: rotate(-90deg); } .cell.door.to-e::after { right: 2px; transform: rotate(90deg); }
.cell.in-dark { cursor: not-allowed; }
.cell.in-dark .v, .cell.in-dark .pm { visibility: hidden; }

.scroll-bar { display: flex; gap: 6px; margin-top: 8px; }
.scroll-bar .scroll { flex: 1; min-height: 44px; padding: 4px 8px; border-radius: 10px; border: 1px solid #6b5418; background: linear-gradient(180deg, #3a3014, #2b2410);
    color: #ffe7a6; font-size: 11px; font-weight: 700; cursor: pointer; text-align: center; line-height: 1.15; transition: transform var(--t-ui); }
.scroll-bar .scroll:hover { transform: translateY(-2px); border-color: var(--gold); }
.scroll-bar .scroll:active { transform: scale(0.96); }
.scroll-bar .scroll.known { border-color: var(--gold); }
.scroll-bar .scroll.empty { border-style: dashed; background: transparent; color: var(--ink-faint); cursor: default; }
.target .escape-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: #9fd8ff; box-shadow: 0 0 8px #4cb3ff; left: 50%; }

@media (prefers-reduced-motion: reduce) {
    .fx-word, .fx-float, .fx-fly, .fx-wipe { display: none !important; }
    .room .fog { transition: none; }
}
@media (orientation: landscape) and (max-height: 560px) { .scroll-bar .scroll { min-height: 44px; font-size: 10px; } }
@media (min-width: 900px) and (min-height: 560px), (orientation: landscape) and (max-height: 560px) and (min-width: 560px) {
    .scroll-bar { grid-area: rest; align-self: start; margin-top: 0; }
}

/* ── Rival Delvers (GDD s18) ───────────────────────────────────────────── */

.lobby-rival { border-color: var(--line-strong); background: var(--bg-2); }
.lobby-rival h2 { color: var(--gold); }

/* The Delver Globe (GDD s21.2). Flat ink on the lobby panel: the canvas draws
   solid squares, so the panel stays flat ink as well. */
.globe-wrap { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.globe-canvas { display: block; width: 100%; height: 100%; }
.globe-cap { position: absolute; left: 10px; right: 10px; bottom: 8px; margin: 0; font-size: 0.85rem; color: var(--ink-dim); text-align: center; }
.globe-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.globe-list li { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.globe-list li b { color: var(--gold); }
.vs-card { position: absolute; inset: 18% 12%; display: grid; place-content: center; gap: 4px; text-align: center; border-radius: 10px; border: 2px solid var(--gold); background: var(--ink); color: var(--bg); }
.vs-card .vs { font-family: system-ui, sans-serif; font-weight: 900; font-size: 1.6rem; color: #0d6f66; letter-spacing: 0.08em; }
.vs-card .who { font-weight: 800; font-size: 1.15rem; }
.vs-card .meta { font-size: 0.85rem; }
@media (max-width: 520px) { .globe-wrap { aspect-ratio: 1 / 1; } }

/* Fighter avatars (GDD s21.12): vipsallowed's builder in a frame, one PNG face. */
.fighter-row { display: flex; align-items: center; gap: 10px; }
.fighter-face, .vs-card .face { display: grid; place-items: center; overflow: hidden; border-radius: 10px; border: 2px solid var(--gold); background: var(--panel); color: var(--ink-dim); font-weight: 800; }
.fighter-face { width: 44px; height: 44px; }
.fighter-face .seat-img, .vs-card .face .seat-img { width: 100%; height: 100%; object-fit: cover; }
.seat-img.is-pixel { image-rendering: pixelated; }
.vs-card .face { width: 72px; height: 72px; justify-self: center; }
.vb-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.vb-frame { width: min(100%, 520px); height: 620px; border: 0; border-radius: 12px; background: var(--bg); }
.vb-picked { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--ink-dim); }
.vb-picked img { width: 56px; height: 56px; border-radius: 10px; border: 2px solid var(--gold); object-fit: cover; }
.vb-err { color: var(--bad); font-size: 0.9rem; text-align: center; margin: 0; }
@media (max-width: 420px) { .vb-frame { height: 560px; } }
@media (min-width: 760px) { .lobby { grid-template-columns: repeat(3, 1fr); } .screen-race { max-width: 1180px; } }
.versus { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.vs-side { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; min-width: 0; }
.vs-name { font-size: 12px; color: var(--ink-dim); max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-chips { font-size: 22px; font-weight: 900; }
.vs-a .vs-chips { color: var(--chips); }
.vs-b .vs-chips { color: var(--mult); }
.vs-side.turn .vs-name { color: var(--gold); font-weight: 800; }
.vs-side.turn .vs-name::before { content: '▶ '; }
.vs-bar { position: relative; height: 16px; border-radius: 8px; overflow: hidden; background: linear-gradient(90deg, transparent 50%, rgba(255, 93, 108, 0.6) 50%), var(--mult); border: 1px solid var(--line); }
.vs-fill { position: absolute; inset: 0 auto 0 0; width: 50%; background: linear-gradient(90deg, #2a76c9, var(--chips)); transition: width var(--t-total) cubic-bezier(.2, 1.4, .4, 1); }
.vs-bar::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: 0.6; }
.app.rival .moves, .app.rival .pips-burn, .app.rival .pips-wrap:last-child, .app.rival .gadget-bar, .app.rival #btn-burn { display: none !important; }
.app.rival .boss-banner { display: none !important; }