/* Rogue Sudoku. 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: #14121c;
    --bg-2: #1d1a29;
    --panel: #24203a;
    --panel-2: #2e2948;
    --line: #3b3560;
    --line-strong: #8a80c9;
    --ink: #ece9ff;
    --ink-dim: #a49fc6;
    --ink-faint: #6f6a93;
    --given: #ece9ff;
    --placed: #7cc4ff;
    --gold: #f5c84c;
    --chips: #4cb3ff;
    --mult: #ff5d6c;
    --good: #5be39a;
    --bad: #ff5d6c;
    --peer: rgba(138, 128, 201, 0.12);
    --same: rgba(245, 200, 76, 0.22);
    --cursor: #f5c84c;
    --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%; }
body {
    background: radial-gradient(1200px 700px at 50% -10%, #2a2445 0%, var(--bg) 60%) fixed, var(--bg);
    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; }
.logo { margin: 0; display: flex; flex-direction: column; line-height: 0.95; font-size: 54px; letter-spacing: 0.04em; font-weight: 900; }
.logo span:first-child { color: var(--gold); text-shadow: 0 4px 0 #8a5d00, 0 0 40px rgba(245, 200, 76, 0.25); }
.logo-sub { color: var(--ink); font-size: 30px; letter-spacing: 0.42em; margin-left: 0.42em; }
.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: #6a5ab0; 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 #6a5ab0;
    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; }
    .logo { font-size: 40px; }
    .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, #f5c84c 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: #3b3560; stroke: #8a80c9; 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: #6e2737; background: linear-gradient(180deg, #2a1530, var(--bg-2)); }
.lobby-rival h2 { color: var(--mult); }
@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; }