/* assets/css/arcade.css
 * Arcade-specific styles. Used on every page (Coin-Pill in header) and on /arcade.
 * All values come from base.css :root tokens — no hardcoded colors.
 */

/* Defend the HTML `hidden` attribute project-wide for the arcade page.
 * Any `display: flex/grid/inline-flex/...` rule on a selector would otherwise
 * override the UA's `[hidden] { display: none }` and leak the element back
 * onto the page when JS toggles `el.hidden = true`. We hit this three times
 * during the mega-lobby refactor (da10e2e, 95dd809) — pinning it here
 * forecloses the entire bug class. */
[hidden] { display: none !important; }

.header-coin-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text);
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
    flex-shrink: 0;
}

.header-coin-pill:hover {
    background: var(--bg-input);
    border-color: var(--accent);
    color: var(--accent);
}

.header-coin-pill .coin-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    fill: currentColor;
}

#header-coin-count {
    line-height: 1;
}

/* === arcade page === */
.arcade-panel { animation: page-fade .15s ease-out; }
@keyframes page-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* fit-to-viewport for arcade.html — body has .is-viewport-lock so the
   <main.app-container> is already a clipped flex-column. Chrome rows
   (page-actions, top-nav, subnav) stay auto; the *visible* arcade-panel
   takes the 1fr remainder. Mirrors the admin-side .is-fill cascade in
   admin-v2.css. The :not([hidden]) qualifier matters: hidden panels must
   stay display:none so they don't steal vertical space. */
body[data-layout="user"].is-viewport-lock > .app-container > .arcade-panel:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Game panels (crash, mines, …) keep their natural block flow; any
       overflow scrolls inside the panel instead of stretching the page. */
    overflow-y: auto;
}

/* Math the admin panel uses: 100vh = chrome + 1fr + footer. Every game's
   shell wrapper follows the .arcade-{name}-shell naming, so this single
   selector stretches each one to fill the panel's 1fr remainder — same
   100% width × 100% height fill the admin tabs get from .is-fill.

   Without this the shell would size to its tallest column (form), leaving
   a void below the stage. With it, stage stretches via the grid's
   align-items:stretch and the inner play-area-wrap (crash canvas, hilo
   board, etc.) inherits the fill via its own flex:1. */
body[data-layout="user"].is-viewport-lock > .app-container > .arcade-panel:not([hidden]) > [class$="-shell"] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* The lobby panel owns its own internal layout (tall aside lists), so it
   must NOT itself scroll — the games column + aside columns scroll instead. */
body[data-layout="user"].is-viewport-lock > .app-container > .arcade-panel[data-panel="lobby"]:not([hidden]) {
    overflow: hidden;
}
body[data-layout="user"].is-viewport-lock > .app-container > .arcade-panel[data-panel="lobby"]:not([hidden]) > .arcade-coin-hero {
    flex-shrink: 0;
    margin-bottom: 0;  /* flex gap is handled by .arcade-lobby-main margin-top */
}

/* lobby layout: hero (auto) → 2-column main (games left, aside right).
   Games column is narrower than before; aside is wider and renders the
   feed + history side-by-side, each filling the viewport remainder. */
.arcade-lobby-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 20px;
}
.arcade-lobby-games {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    /* Give the top-row tiles room to absorb the hover translate(-3px) +
       glow box-shadow without getting clipped by the scroll container's
       overflow:auto edge. */
    padding-top: 6px;
}
.arcade-lobby-aside {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 16px;
}
.arcade-aside-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    padding: 14px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    min-width: 0;
}
.arcade-aside-panel .arcade-feed-heading { margin: 0; }
/* Scoped via .arcade-aside-panel so specificity (2 classes) overrides the
   bare `.arcade-scroll-list { max-height: 230px }` rule defined later in
   this file — without that, the aside lists would cap at 230px instead of
   filling the viewport remainder. */
.arcade-aside-panel .arcade-aside-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}
@media (max-width: 1100px) {
    /* aside-columns get cramped first — collapse them back to a stacked
       pair so each list still gets readable width. */
    .arcade-lobby-aside {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}
@media (max-width: 960px) {
    /* phone/narrow tablet: drop viewport-lock semantics, let the page
       scroll naturally and revert to the original stacked layout. */
    body[data-layout="user"].is-viewport-lock { height: auto; overflow: visible; }
    body[data-layout="user"].is-viewport-lock > .app-container {
        display: block;
        overflow: visible;
    }
    body[data-layout="user"].is-viewport-lock > .app-container > .arcade-panel:not([hidden]) {
        display: block;
        overflow: visible;
    }
    .arcade-lobby-main { grid-template-columns: 1fr; }
    .arcade-lobby-games { overflow: visible; padding-right: 0; }
    .arcade-lobby-aside {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .arcade-aside-scroll { max-height: 260px; }
}

/* === big uniform game tiles ===
 * Each tile is a vertical card: hero icon top, body in the middle,
 * play-CTA pinned to the bottom. Tiles share size + structure; per-game
 * accent comes from `data-accent="<color>"` and tints the icon halo,
 * top-border highlight on hover, and the play-CTA.
 */
.arcade-lobby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 0;
}
.arcade-game-tile {
    --tile-accent:        var(--accent);
    --tile-accent-soft:   var(--accent-soft);
    --tile-accent-dim:    var(--accent-dim);

    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    padding: 18px 18px 14px;
    background: linear-gradient(160deg, var(--tile-accent-dim) 0%, var(--bg-card) 55%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform .15s var(--ease), border-color .15s, box-shadow .15s;
    overflow: hidden;
    min-height: 200px;
}
.arcade-game-tile::after {
    /* subtle radial glow in the top-right corner so each tile gets visual
     * weight even when its accent is muted. */
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, var(--tile-accent-soft) 0%, transparent 70%);
    pointer-events: none;
}
.arcade-game-tile:hover {
    transform: translateY(-3px);
    border-color: var(--tile-accent);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* per-game accent recipes — composed from existing tokens so the palette
 * stays inside the design system. */
.arcade-game-tile[data-accent="red"]    { --tile-accent: var(--danger);  --tile-accent-soft: var(--danger-muted);  --tile-accent-dim: rgba(232, 93, 93, 0.06); }
.arcade-game-tile[data-accent="orange"] { --tile-accent: var(--accent);  --tile-accent-soft: var(--accent-soft);   --tile-accent-dim: var(--accent-softer); }
.arcade-game-tile[data-accent="yellow"] { --tile-accent: var(--warning); --tile-accent-soft: var(--warning-muted); --tile-accent-dim: rgba(234, 179, 8, 0.06); }
.arcade-game-tile[data-accent="green"]  { --tile-accent: var(--success); --tile-accent-soft: var(--success-muted); --tile-accent-dim: rgba(74, 209, 126, 0.06); }
.arcade-game-tile[data-accent="blue"]   { --tile-accent: var(--info);    --tile-accent-soft: var(--info-muted);    --tile-accent-dim: rgba(121, 192, 255, 0.06); }

.arcade-game-tile-hero {
    width: 64px; height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--tile-accent-soft);
    color: var(--tile-accent);
    font-size: var(--fs-xl);
    transition: transform .15s var(--ease);
    position: relative;
    z-index: 1;
}
.arcade-game-tile:hover .arcade-game-tile-hero {
    transform: scale(1.08) rotate(-3deg);
}

.arcade-game-tile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.arcade-game-tile-body h3 {
    font-family: var(--font-mono);
    font-size: var(--fs-content);
    font-weight: var(--fw-bold);
    color: var(--text);
    margin: 0;
    letter-spacing: var(--ls-tight);
}
.arcade-game-tile-body p {
    font-size: var(--fs-label);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}
.arcade-game-tile-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--ls-none).6px;
    color: var(--text-dim);
    margin-top: 2px;
}

.arcade-game-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    color: var(--tile-accent);
    text-transform: uppercase;
    letter-spacing: var(--ls-none).6px;
    position: relative;
    z-index: 1;
}
.arcade-game-tile-cta i { font-size: var(--fs-micro); }
.arcade-game-tile:hover .arcade-game-tile-cta { transform: translateX(2px); transition: transform .15s var(--ease); }

/* 🔥 HOT badge — overlaid in the top-right when /arcade/trending says
 * this game has the most settled rounds in the last 30 min. */
.arcade-game-tile-badge {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: var(--text-inverse);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-xbold);
    letter-spacing: var(--ls-tracked);
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(232, 93, 93, 0.55);
    animation: arcade-hot-pulse 1.8s ease-in-out infinite;
}
.arcade-game-tile-badge i { font-size: var(--fs-micro); }
@keyframes arcade-hot-pulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(232, 93, 93, 0.45); }
    50%      { box-shadow: 0 2px 18px rgba(232, 93, 93, 0.85); }
}

.arcade-feed-wrap {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.arcade-feed-heading {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-tracked);
    margin: 0 0 10px;
}
.arcade-feed-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
.arcade-feed-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
    padding: 6px 10px;
    border-radius: var(--radius);
    background: var(--bg-card);
    align-items: center;
}
.arcade-feed-row .feed-game     { color: var(--accent); text-transform: uppercase; }
.arcade-feed-row .feed-username { color: var(--text); }
.arcade-feed-row .feed-bet      { color: var(--text-muted); }
.arcade-feed-row .feed-payout-win  { color: #6dc28b; font-weight: var(--fw-semi); }
.arcade-feed-row .feed-payout-loss { color: var(--text-muted); }
.arcade-feed-skeleton {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    padding: 8px;
}

.arcade-game-shell {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: stretch;
}
@media (max-width: 720px) {
    .arcade-game-shell { grid-template-columns: 1fr; }
}

/* Shared stage banner used across every game's stage card. State classes
 * (is-active / is-win / is-loss) are toggled by each game's JS. */
/* Stage banner doubles as headline + round-outcome display. Idle/active
   states stay quiet (dashed, muted text). Win/loss states transform into
   a vivid result chip with optional icon + pop-in animation — so the
   round outcome reads at a glance without needing a separate result panel.

   Shared across all games: any panel that wires .is-win / .is-loss onto
   its stage banner gets the upgraded result presentation for free. */
.arcade-stage-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--text-muted);
    letter-spacing: var(--ls-none).04em;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
    transition: padding 0.18s var(--ease), font-size 0.18s var(--ease);
}
.arcade-stage-banner strong { color: var(--accent); font-weight: var(--fw-semi); }
.arcade-stage-banner-icon { font-size: var(--fs-base); flex-shrink: 0; }
.arcade-stage-banner-icon[hidden] { display: none; }

.arcade-stage-banner.is-active {
    border-style: solid;
    border-color: rgba(var(--accent-rgb), 0.35);
    color: var(--text);
}

/* Result chip — banner morphs into a prominent headline when the round
   settles. Bigger type, vivid background, glow, pop-in animation. */
.arcade-stage-banner.is-win,
.arcade-stage-banner.is-loss {
    border-style: solid;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    padding: 14px 22px;
    letter-spacing: var(--ls-none).06em;
    text-transform: uppercase;
    animation: arcade-stage-banner-pop 0.32s var(--ease);
}
.arcade-stage-banner.is-win {
    border-color: var(--success);
    color: var(--success);
    background:
        linear-gradient(90deg, transparent, var(--success-muted) 50%, transparent),
        rgba(0, 0, 0, 0.22);
    box-shadow: 0 0 0 1px var(--success-muted), 0 8px 22px rgba(74, 209, 126, 0.20);
}
.arcade-stage-banner.is-loss {
    border-color: var(--danger);
    color: var(--danger);
    background:
        linear-gradient(90deg, transparent, rgba(232, 93, 93, 0.16) 50%, transparent),
        rgba(0, 0, 0, 0.22);
    box-shadow: 0 0 0 1px rgba(232, 93, 93, 0.20), 0 8px 22px rgba(232, 93, 93, 0.18);
}
@keyframes arcade-stage-banner-pop {
    0%   { transform: scale(0.96); opacity: 0.55; }
    55%  { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

/* Slight spacer when a quick-button row sits directly under another input */
.mines-count-quick-spaced { margin-top: 6px; }

.arcade-bet-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    padding: 16px;
}
.arcade-bet-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
.arcade-bet-row label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
}
.arcade-bet-row input[type="number"] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-body);
}
.arcade-bet-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 4px;
}
.arcade-bet-quick-btn {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    padding: 5px 0;
    cursor: pointer;
    text-transform: lowercase;
    letter-spacing: var(--ls-none).04em;
    transition: background .12s, border-color .12s, color .12s;
}
.arcade-bet-quick-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.arcade-bet-quick-btn:active { transform: translateY(1px); }

/* === fairness drawer === */
.arcade-page-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}
.arcade-fairness-trigger {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 7px 14px;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    text-transform: lowercase;
    letter-spacing: var(--ls-none).06em;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.arcade-fairness-trigger:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.fairness-modal .fairness-explainer {
    color: var(--text-muted);
    font-size: var(--fs-label);
    line-height: 1.55;
    margin: 0 0 16px;
}
.fairness-modal .fairness-explainer code {
    background: var(--bg-input);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: var(--fs-sm);
}
.fairness-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fairness-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fairness-row > label {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--ls-none).12em;
    color: var(--text-muted);
}
.fairness-mono {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    background: var(--bg-input);
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    word-break: break-all;
    color: var(--text);
}
.fairness-client-edit {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
}
.fairness-client-edit input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
}
.fairness-revealed {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.fairness-revealed-title {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--ls-none).12em;
    color: var(--accent);
    margin-bottom: 10px;
}

/* === bet-history strip === */
.arcade-history-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    overflow: hidden;
}
.arcade-history-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--ls-none).14em;
    color: var(--text-muted);
    flex-shrink: 0;
}
.arcade-history-strip {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 2px;
}
.arcade-history-strip::-webkit-scrollbar { height: 4px; }
.arcade-history-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.arcade-history-empty {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    padding: 4px 0;
}
.arcade-history-pill {
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap;
}
.arcade-history-pill.is-win {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.arcade-history-pill.is-loss {
    color: var(--danger);
    border-color: rgba(255, 92, 77, 0.4);
    background: rgba(255, 92, 77, 0.08);
}
.arcade-history-pill.is-neutral { color: var(--text-muted); }
.arcade-bet-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    color: var(--text-muted);
}
.arcade-side-picker {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.arcade-side-btn {
    background: none;
    border: none;
    padding: 7px 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.arcade-side-btn + .arcade-side-btn { border-left: 1px solid var(--border); }
.arcade-side-btn:hover    { color: var(--text); }
.arcade-side-btn.active   { color: var(--bg); background: var(--accent); }

.arcade-flip-btn {
    background: var(--accent);
    border: none;
    color: var(--bg);
    padding: 10px 16px;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: var(--ls-tracked);
    transition: opacity .12s, transform .08s;
}
.arcade-flip-btn:hover    { opacity: .9; }
.arcade-flip-btn:active   { transform: translateY(1px); }
.arcade-flip-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Round-outcome panel. Shared by every game; lives either in the stage
   (between banner and play-area, e.g. hilo) or below the form actions
   (legacy placement). Vivid win/loss colors + bold typography so the
   result reads at a glance instead of being buried as small text. */
.arcade-result {
    padding: 14px 18px;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    text-align: center;
    line-height: 1.45;
    letter-spacing: var(--ls-none).02em;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}
.arcade-result.win  {
    border-color: var(--success);
    color: var(--success);
    background: var(--success-muted);
    box-shadow: 0 0 0 1px var(--success-muted), 0 6px 16px rgba(74, 209, 126, 0.15);
}
.arcade-result.loss {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(232, 93, 93, 0.10);
    box-shadow: 0 0 0 1px rgba(232, 93, 93, 0.18), 0 6px 16px rgba(232, 93, 93, 0.12);
}

.arcade-coinflip-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 14px;
    padding: 18px;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb), 0.10) 0%, transparent 60%),
        var(--bg-card);
    perspective: 900px;
}
.arcade-coinflip-stage .arcade-coin-scene {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Anchor wraps coin + shadow so the shadow stays glued to the coin
   instead of falling to the bottom of the scene container. */
.arcade-coin-anchor {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arcade-dice-stage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    min-height: 0;
}
.arcade-dice-stage .dice-readout {
    flex: 1;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius);
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 56px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.35) 100%),
        var(--bg-card);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.arcade-coin-scene {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arcade-coin-3d {
    position: relative;
    width: 140px;
    height: 140px;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.22, 0.65, 0.18, 1.0);
    will-change: transform;
}
.arcade-coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-weight: var(--fw-xbold);
    backface-visibility: hidden;
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,0.12),
        inset 0 -8px 24px rgba(0,0,0,0.35),
        0 8px 24px rgba(0,0,0,0.45);
}
.arcade-coin-face i { font-size: var(--fs-display); opacity: 0.9; }
.arcade-coin-letter { font-size: var(--fs-h2); letter-spacing: var(--ls-tracked); }
.arcade-coin-heads {
    background: radial-gradient(circle at 32% 28%, #ffe08a 0%, #f2a13c 45%, #b4651a 100%);
    color: #3a1e05;
    border: 2px solid #d8881e;
}
.arcade-coin-tails {
    background: radial-gradient(circle at 32% 28%, #cfd5db 0%, #8e98a4 45%, #4b525c 100%);
    color: #1a1d22;
    border: 2px solid #6c7684;
    transform: rotateY(180deg);
}
/* thin rim visible when the coin is mid-flip */
.arcade-coin-edge {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(90deg, #80603a 0%, #c19050 50%, #80603a 100%);
    transform: rotateY(90deg);
    backface-visibility: hidden;
    opacity: 0.85;
}
.arcade-coin-shadow {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 14px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 70%);
    filter: blur(2px);
    transition: transform .3s, opacity .3s;
}
.arcade-coin-3d.is-flipping + .arcade-coin-shadow {
    transform: translateX(-50%) scaleX(0.65);
    opacity: 0.35;
}

/* dice stage gets the layered card look (combined with the .arcade-dice-stage
 * flex/padding rule above which provides the banner+readout layout) */
.arcade-dice-stage {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% -20%, rgba(var(--accent-rgb), 0.05) 0%, transparent 60%),
        var(--bg-card);
}
.arcade-dice-roll {
    font-family: var(--font-mono);
    font-size: clamp(56px, 9vw, 96px);
    font-weight: var(--fw-bold);
    color: var(--accent);
    letter-spacing: -2px;
    text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.3);
    line-height: 1;
}
.arcade-dice-roll.win  { color: #6dd9b0; text-shadow: 0 0 28px rgba(109, 217, 176, 0.5); }
.arcade-dice-roll.loss { color: var(--danger);  text-shadow: 0 0 28px rgba(255, 92, 77, 0.4); }

/* ═════════════════════════════════════════════════════════════════════
 * Daily Wheel — shares the same "hero on deep gradient + sparkles" look
 * as the legendary lootbox so the arcade feels consistent.
 * ═════════════════════════════════════════════════════════════════════ */
/* Wheel uses the same shell shape as crash/mines/hilo: 1fr stage | 360px
   form. The cosmic backdrop (originally directly on .arcade-wheel-stage)
   now lives in .arcade-wheel-stage-wrap — the analog of
   .crash-stage-canvas-wrap / .hilo-stage-wrap — so the banner can sit
   top-anchored above it. */
.arcade-wheel-shell {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: stretch;
}
.arcade-wheel-stage {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}
.arcade-wheel-stage-wrap {
    position: relative;
    flex: 1;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: var(--radius);
    overflow: hidden;
    box-sizing: border-box;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(255,170,102,.40), transparent 60%),
        radial-gradient(ellipse at 50% 30%,  rgba(199,125,255,.25), transparent 65%),
        linear-gradient(135deg, #1c0a2c 0%, #2a1048 35%, #4a1b7a 65%, #1a0a2f 100%);
    border: 1px solid rgba(255,170,102,.25);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4),
                0 10px 40px rgba(199,125,255,.25);
}

@media (max-width: 720px) {
    .arcade-wheel-shell { grid-template-columns: 1fr; }
}
.arcade-wheel-stage-aura {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(2px 2px at 12% 20%,  #ffd93d, transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 25%, #c77dff, transparent 60%),
        radial-gradient(1.5px 1.5px at 25% 85%, #ffffff, transparent 60%),
        radial-gradient(2px 2px at 80% 78%,   #ffd93d, transparent 60%),
        radial-gradient(1px 1px at 50% 12%,   #ffaaf7, transparent 60%);
    mix-blend-mode: screen;
    animation: arcade-wheel-twinkle 2.2s ease-in-out infinite;
}
@keyframes arcade-wheel-twinkle {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}
.arcade-wheel {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 340px;
    max-height: 340px;
    z-index: 2;
}
.arcade-wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -14px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 22px solid #ffd93d;
    z-index: 3;
    filter: drop-shadow(0 0 8px rgba(255,217,61,.9)) drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.arcade-wheel-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #ffd93d;
    /* Vibrant 8-slot gradient, alternating warm ↔ cool for clear wedges. */
    background: conic-gradient(
        from 0deg,
        #ff6b6b 0 12.5%,
        #4dabf7 12.5% 25%,
        #ffd93d 25% 37.5%,
        #c77dff 37.5% 50%,
        #6dc28b 50% 62.5%,
        #ff9d5a 62.5% 75%,
        #2be27a 75% 87.5%,
        #ffaaf7 87.5% 100%
    );
    transition: transform 4.5s cubic-bezier(.14, .8, .26, 1);
    box-shadow:
        inset 0 0 0 3px rgba(0,0,0,.35),
        0 0 40px rgba(255,217,61,.45),
        0 0 70px rgba(199,125,255,.25);
    animation: arcade-wheel-idle-glow 4s ease-in-out infinite;
}
@keyframes arcade-wheel-idle-glow {
    0%, 100% { box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 0 40px rgba(255,217,61,.45), 0 0 70px rgba(199,125,255,.25); }
    50%      { box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 0 60px rgba(255,217,61,.75), 0 0 100px rgba(199,125,255,.45); }
}
/* Decorative spoke lines — 8 radial lines separating the wedges. */
.arcade-wheel-disc::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg,
            rgba(0,0,0,.35) 0 0.6deg, transparent 0.6deg 45deg,
            rgba(0,0,0,.35) 45deg 45.6deg, transparent 45.6deg 90deg,
            rgba(0,0,0,.35) 90deg 90.6deg, transparent 90.6deg 135deg,
            rgba(0,0,0,.35) 135deg 135.6deg, transparent 135.6deg 180deg,
            rgba(0,0,0,.35) 180deg 180.6deg, transparent 180.6deg 225deg,
            rgba(0,0,0,.35) 225deg 225.6deg, transparent 225.6deg 270deg,
            rgba(0,0,0,.35) 270deg 270.6deg, transparent 270.6deg 315deg,
            rgba(0,0,0,.35) 315deg 315.6deg, transparent 315.6deg 360deg);
    pointer-events: none;
}
.arcade-wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff4b3, #ffd93d 55%, #a06a0a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h2-lg);
    color: #3a2200;
    z-index: 4;
    box-shadow:
        0 0 0 3px rgba(0,0,0,.45),
        0 4px 12px rgba(0,0,0,.6),
        inset 0 -4px 8px rgba(0,0,0,.35);
    text-shadow: 0 1px 2px rgba(255,255,255,.35);
}

.arcade-wheel-cta {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.arcade-wheel-cta p {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--text-muted);
    margin: 0;
}
.arcade-wheel-cta .arcade-flip-btn {
    min-width: 180px;
}
.arcade-wheel-cta .arcade-flip-btn.is-spinning {
    opacity: .6;
}

/* Reveal-overlay reuses the lootbox modal styling; only the prize layout is new. */
.arcade-wheel-reveal-stage {
    max-width: 420px;
    text-align: center;
}
.arcade-wheel-reveal-prize {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 20px 18px;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,217,61,.25), transparent 60%),
        var(--bg-card);
    border: 1px solid rgba(255,217,61,.35);
    width: 100%;
    box-sizing: border-box;
    animation: arcade-wheel-reveal-pop .45s ease-out;
}
@keyframes arcade-wheel-reveal-pop {
    0%   { transform: scale(.85); opacity: 0; }
    70%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.arcade-wheel-reveal-prize-icon {
    font-size: var(--fs-hero);
    color: #ffd93d;
    filter: drop-shadow(0 0 14px rgba(255,217,61,.75));
    animation: arcade-wheel-idle-glow 2.4s ease-in-out infinite;
}
.arcade-wheel-reveal-prize-amount {
    font-family: var(--font-mono);
    font-size: var(--fs-display);
    font-weight: var(--fw-xbold);
    color: #ffeb6b;
    letter-spacing: var(--ls-tracked);
    line-height: 1;
    text-shadow: 0 0 16px rgba(255,217,61,.55);
}
.arcade-wheel-reveal-prize-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}

/* === tab grouping === */
/* === top-nav (4 areas: arcade | cosmetics | leaderboard | stats) === */
.arcade-top-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    flex-wrap: wrap;
}
.arcade-top-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 18px;
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-weight: var(--fw-semi);
    color: var(--text-muted);
    cursor: pointer;
    letter-spacing: var(--ls-default);
    transition: color .12s, border-color .12s;
    margin-bottom: -1px;
}
.arcade-top-tab i { margin-right: 8px; }
.arcade-top-tab:hover { color: var(--text); }
.arcade-top-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* === subnav (contextual: lobby-back + game-switcher, or cosmetics sub-tabs) === */
.arcade-subnav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.arcade-subnav-back {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 14px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.arcade-subnav-back i { margin-right: 6px; }
.arcade-subnav-back:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* game-switcher strip — always-visible horizontal pill bar, replaces the
   old dropdown so every game is reachable in one click from any game
   panel. Scrolls horizontally on narrow viewports. */
.arcade-switch-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 2px;
    min-width: 0;
}
.arcade-switch-strip::-webkit-scrollbar         { height: 4px; }
.arcade-switch-strip::-webkit-scrollbar-thumb   { background: var(--border); border-radius: 2px; }
.arcade-switch-strip::-webkit-scrollbar-track   { background: transparent; }

.arcade-switch-chip {
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 7px 14px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: var(--ls-none).04em;
    transition: border-color .12s, color .12s, background .12s, transform .1s;
}
.arcade-switch-chip i { font-size: var(--fs-body); }
.arcade-switch-chip:hover {
    color: var(--text);
    border-color: var(--accent);
}
.arcade-switch-chip:active { transform: translateY(1px); }
.arcade-switch-chip.is-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* cosmetics sub-tabs (lootboxes | shop | inventory) */
.arcade-subtabs {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
}
.arcade-subtab {
    background: none;
    border: none;
    padding: 8px 18px;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    cursor: pointer;
    letter-spacing: var(--ls-default);
    transition: background .12s, color .12s;
}
.arcade-subtab i { margin-right: 6px; }
.arcade-subtab + .arcade-subtab { border-left: 1px solid var(--border); }
.arcade-subtab:hover  { color: var(--text); }
.arcade-subtab.active { color: var(--bg); background: var(--accent); }

@media (max-width: 640px) {
    .arcade-top-tab { padding: 8px 12px; font-size: var(--fs-label); }
    .arcade-top-tab i { margin-right: 4px; }
    .arcade-subnav { gap: 8px; }
    .arcade-subnav-back { padding: 6px 10px; font-size: var(--fs-sm); }
    /* On phones, chip labels would push the strip off-screen — show icons
       only, the title attribute carries the game name for accessibility. */
    .arcade-switch-chip { padding: 7px 10px; }
    .arcade-switch-chip-label { display: none; }
}

/* === coin hero === */
.arcade-coin-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--bg-card), var(--bg-input));
    padding: 24px 28px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.arcade-coin-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(255,170,102,0.15), transparent 60%);
    pointer-events: none;
}
.arcade-coin-hero-icon {
    font-size: 48px;
    color: var(--accent);
    filter: drop-shadow(0 0 12px rgba(255,170,102,0.4));
}
.arcade-coin-hero-amount {
    display: flex;
    flex-direction: column;
}
#arcade-hero-coins {
    font-family: var(--font-mono);
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    color: var(--text);
    line-height: 1;
}
.arcade-coin-hero-label {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-top: 4px;
}
.arcade-coin-hero-caps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
.arcade-coin-hero-cap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cap-label  { color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-default); font-size: var(--fs-xs); }
.cap-value  { color: var(--text); font-weight: var(--fw-semi); }
.cap-info   { margin-left: 4px; color: var(--text-muted); opacity: .6; cursor: help; font-size: .9em; transition: opacity .15s; }
.cap-info:hover { opacity: 1; }
@media (max-width: 720px) {
    .arcade-coin-hero { grid-template-columns: auto 1fr; }
    .arcade-coin-hero-caps { grid-column: 1 / -1; flex-direction: row; gap: 16px; }
}

/* Legacy `.arcade-game-card-icon` rule retired with the lobby refactor (b940284+).
 * The new `.arcade-game-tile-hero` carries its own flex layout. */

/* === side-by-side feed/history === */
.arcade-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
@media (max-width: 720px) {
    .arcade-side-by-side { grid-template-columns: 1fr; }
}
.arcade-scroll-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    max-height: 230px;
    overflow-y: auto;
    padding-right: 4px;
}
.arcade-scroll-list::-webkit-scrollbar         { width: 6px; }
.arcade-scroll-list::-webkit-scrollbar-thumb   { background: var(--border); border-radius: 3px; }
.arcade-scroll-list::-webkit-scrollbar-track   { background: transparent; }

/* === live pulse indicator === */
.arcade-live-pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #6dc28b;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    animation: live-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(109, 194, 139, 0.6);
}
@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(109, 194, 139, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(109, 194, 139, 0); }
    100% { box-shadow: 0 0 0 0   rgba(109, 194, 139, 0); }
}

/* === play card (recent plays) — tight rows so more fit in the scroll
       window without losing readability === */
.arcade-play-card,
.arcade-hist-card {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    transition: border-color .15s, background .15s;
}
.arcade-play-card:hover,
.arcade-hist-card:hover {
    background: var(--bg-card-hover, var(--bg-input));
    border-color: var(--border-focus, var(--accent));
}
.arcade-play-card.is-win  { border-left-color: #6dc28b; }
.arcade-play-card.is-loss { border-left-color: #d97a7a; }

.arcade-play-card-icon,
.arcade-hist-card-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    color: var(--text-dim);
    flex-shrink: 0;
}
.arcade-play-card.is-win  .arcade-play-card-icon { color: #6dc28b; background: rgba(109,194,139,0.12); }
.arcade-play-card.is-loss .arcade-play-card-icon { color: #d97a7a; background: rgba(217,122,122,0.12); }

.arcade-play-card-body,
.arcade-hist-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.arcade-play-card-row1 {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
}
.arcade-play-card-user {
    font-weight: var(--fw-semi);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.arcade-play-card-game {
    font-size: var(--fs-micro);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,170,102,0.12);
}
.arcade-play-card-row2 {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-dim);
}
.arcade-play-card-mult {
    color: var(--accent);
    font-weight: var(--fw-semi);
}
.arcade-play-card-net {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    min-width: 64px;
    text-align: right;
}
.arcade-play-card.is-win  .arcade-play-card-net { color: #6dc28b; }
.arcade-play-card.is-loss .arcade-play-card-net { color: #d97a7a; }

/* coin history card variant */
.arcade-hist-card.is-credit { border-left-color: #6dc28b; }
.arcade-hist-card.is-debit  { border-left-color: #d97a7a; }
.arcade-hist-card.is-credit .arcade-hist-card-icon { color: #6dc28b; background: rgba(109,194,139,0.12); }
.arcade-hist-card.is-debit  .arcade-hist-card-icon { color: #d97a7a; background: rgba(217,122,122,0.12); }
.arcade-hist-card-source {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    color: var(--text);
    text-transform: lowercase;
}
.arcade-hist-card-meta {
    display: flex;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-dim);
}
.arcade-hist-card-delta {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    min-width: 64px;
    text-align: right;
}
.arcade-hist-card.is-credit .arcade-hist-card-delta { color: #6dc28b; }
.arcade-hist-card.is-debit  .arcade-hist-card-delta { color: #d97a7a; }

/* highlight for new feed entries */
.arcade-play-card.is-new { animation: feed-pop .6s ease-out; }
@keyframes feed-pop {
    0%   { background: rgba(255, 170, 102, 0.18); }
    100% { background: var(--bg-card); }
}

/* scroll-list is now vertical stack of cards.
   max-height kept low enough that the lobby fits in a 900px viewport
   with footer visible. Tight row height keeps ~6-7 rows visible. */
.arcade-scroll-list {
    gap: 4px;
    max-height: 280px;
}

/* === crash (v2 — stage card with banner, sidebar stats, growth projection) === */
.arcade-crash-shell {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: stretch;
}
.crash-stage {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% -30%, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%),
        var(--bg-card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}
.crash-stage-canvas-wrap {
    position: relative;
    flex: 1;
    min-height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius);
    background:
        repeating-linear-gradient(0deg,  rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 56px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.35) 100%),
        var(--bg-card);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.arcade-crash-canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.arcade-crash-readout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.arcade-crash-mult {
    font-family: var(--font-mono);
    font-size: clamp(48px, 8vw, 84px);
    font-weight: var(--fw-bold);
    color: var(--text);
    letter-spacing: var(--ls-tracked);
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.7), 0 0 60px rgba(var(--accent-rgb), 0.18);
    transition: color .12s, text-shadow .25s;
    line-height: 1;
}
.arcade-crash-mult.crashed { color: var(--danger); text-shadow: 0 0 24px rgba(255, 92, 77, 0.45); }
.arcade-crash-mult.cashed  { color: var(--accent); text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.5); }
.arcade-crash-profit {
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--accent);
    letter-spacing: var(--ls-default);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    transition: color .12s, background .12s;
}
.arcade-crash-profit.crashed { color: var(--danger); }

.arcade-crash-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.arcade-crash-actions-single {
    grid-template-columns: 1fr;
}
.arcade-cashout-btn,
#crash-action-btn[data-mode="cashout"] {
    background: var(--accent);
    color: var(--bg);
}
#crash-action-btn[data-mode="cashout"]:hover {
    opacity: 0.9;
}
.arcade-cashout-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .arcade-crash-shell { grid-template-columns: 1fr; }
}

/* === auto-bet panel (dice + coinflip + limbo + crash) === */
.arcade-autobet-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}
@media (max-width: 640px) {
    /* Two label+input pairs side-by-side overflow on narrow phones.
     * Wrap so each pair gets its own row. */
    .arcade-autobet-row {
        grid-template-columns: auto 1fr;
    }
}
.arcade-autobet-row label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
}
.arcade-autobet-row input {
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
}
.arcade-autobet-stops {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px dashed var(--border);
}
.arcade-autobet-stop {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
}
.arcade-autobet-stop input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
}
.arcade-autobet-stop input[type="number"] {
    width: 90px;
    padding: 4px 6px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}
.arcade-autobet-actions {
    display: flex;
    gap: 8px;
}
.arcade-autobet-actions .arcade-flip-btn {
    flex: 1;
}
.arcade-autobet-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    margin-top: 8px;
}
.arcade-autobet-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
.arcade-autobet-summary-label {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
}
.arcade-autobet-summary-value {
    color: var(--text);
    font-weight: var(--fw-semi);
}
.arcade-autobet-summary-net {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-md);
}
.arcade-autobet-summary-net.is-win  .arcade-autobet-summary-value { color: #6dc28b; }
.arcade-autobet-summary-net.is-loss .arcade-autobet-summary-value { color: #d97a7a; }
.arcade-autobet-summary-reason {
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-dim);
    font-style: italic;
    padding-top: 4px;
}

/* === mines (v2 — bevel tiles, per-tile next-multiplier, sidebar stats) === */
.arcade-mines-shell {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: stretch;
}
.mines-stage {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% -20%, rgba(var(--accent-rgb), 0.05) 0%, transparent 60%),
        var(--bg-card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}
.mines-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Equal-height rows so tiles never overflow into the gap below.
       Combined with flex: 1 on the grid (in .mines-stage flex column), the
       grid takes remaining stage height and distributes it across 5 rows.
       Aspect-ratio kept as a hint for when grid fits without max-height
       clamping. */
    grid-template-rows: repeat(5, 1fr);
    gap: 12px;
    aspect-ratio: 1 / 1;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: min(820px, 100%);
    margin: 0 auto;
}
.mines-tile {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.35) 100%),
        linear-gradient(135deg, var(--bg-card) 0%, var(--bg-input) 60%, #0d1218 100%);
    color: var(--text-muted);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .1s, box-shadow .15s, filter .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    /* aspect-ratio removed (2026-05-14): tiles were claiming square height
       which overflowed compressed grid cells when the stage was wider than
       tall. Cells now drive tile size via grid-template-rows on .mines-grid. */
    min-width: 0;
    min-height: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 2px 0 rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
/* per-tile next-multiplier hint, e.g. "1.27x" */
.mines-tile-hint {
    font-size: clamp(9px, 1.5vw, 12px);
    color: rgba(255, 255, 255, 0.18);
    letter-spacing: var(--ls-none).02em;
    pointer-events: none;
    transition: color .15s, transform .12s;
}
.mines-tile.is-active .mines-tile-hint { color: rgba(var(--accent-rgb), 0.5); }
.mines-tile:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(var(--accent-rgb), 0.28);
    filter: brightness(1.08);
}
.mines-tile:hover:not(:disabled) .mines-tile-hint {
    color: var(--accent);
    transform: scale(1.05);
}
.mines-tile:disabled { cursor: default; }
.mines-tile.safe {
    border-color: rgba(109, 217, 176, 0.55);
    background:
        radial-gradient(circle at 50% 50%, rgba(109, 217, 176, 0.45) 0%, transparent 65%),
        linear-gradient(135deg, var(--bg-card), #0d1218);
    box-shadow: inset 0 0 0 1px rgba(109, 217, 176, 0.35), 0 0 16px rgba(109, 217, 176, 0.35);
}
.mines-tile.safe .mines-tile-hint { display: none; }
.mines-tile.safe::after {
    content: '';
    position: absolute;
    width: 38%;
    height: 38%;
    background: linear-gradient(135deg, #b9f0d6, #6dd9b0);
    transform: rotate(45deg);
    border-radius: 4px;
    box-shadow: 0 0 14px rgba(109, 217, 176, 0.7), inset 0 0 6px rgba(255, 255, 255, 0.5);
}
.mines-tile.mine {
    border-color: var(--danger);
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 92, 77, 0.5) 0%, transparent 65%),
        linear-gradient(135deg, #2a0c0c, #150505);
    box-shadow: inset 0 0 24px rgba(255, 92, 77, 0.35), 0 0 22px rgba(255, 92, 77, 0.55);
}
.mines-tile.mine .mines-tile-hint { display: none; }
.mines-tile.mine::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle at 35% 35%, #ff8a4d 0%, #ff3322 50%, #5a0707 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 92, 77, 0.7), inset 0 0 8px rgba(255, 255, 255, 0.18);
}
.mines-tile.revealed-mine-passive {
    border-color: rgba(255, 92, 77, 0.4);
    opacity: 0.45;
}
.mines-tile.revealed-mine-passive .mines-tile-hint { display: none; }
.mines-tile.revealed-mine-passive::after {
    content: '';
    position: absolute;
    width: 44%;
    height: 44%;
    background: radial-gradient(circle, #6a1818 0%, #2a0808 100%);
    border-radius: 50%;
}
.mines-tile.pending { opacity: 0.55; pointer-events: none; }

/* sidebar form — shared across mines/tower/crash/limbo/coinflip/dice/plinko */
.mines-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
}
.mines-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mines-stat-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    letter-spacing: var(--ls-none).08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mines-stat-value {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mines-stat-value.is-active { color: var(--accent); }

.mines-chance-inline {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    text-transform: none;
    letter-spacing: var(--ls-none).02em;
    margin-left: 6px;
    opacity: 0.85;
}
.mines-count-quick {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.mines-count-quick button {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    padding: 8px 0;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.mines-count-quick button:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.mines-count-quick button.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.mines-count-quick button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* cashout button: properly muted when disabled instead of full-orange-but-dead */
.arcade-cashout-btn:disabled {
    opacity: 0.32;
    filter: grayscale(0.55);
    cursor: not-allowed;
}

/* projection footer fills the otherwise-empty sidebar bottom */
.mines-projection {
    margin-top: auto;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mines-projection-title {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-none).12em;
    margin-bottom: 2px;
}
.mines-proj-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    align-items: baseline;
}
.mines-proj-label { color: var(--text-muted); text-transform: lowercase; }
.mines-proj-mult { color: var(--text); }
.mines-proj-pay  { color: var(--text-muted); }
.mines-proj-row.is-max .mines-proj-mult,
.mines-proj-row.is-max .mines-proj-pay  { color: var(--accent); font-weight: var(--fw-semi); }

@media (max-width: 720px) {
    .arcade-mines-shell { grid-template-columns: 1fr; }
    .mines-grid         { max-width: 100%; }
}

/* === plinko === */
.arcade-plinko-shell { grid-template-columns: 1fr 360px; }
.arcade-plinko-stage {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% -20%, rgba(var(--accent-rgb), 0.05) 0%, transparent 60%),
        var(--bg-card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.arcade-plinko-canvas {
    width: 100%;
    max-width: 880px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.arcade-plinko-slots {
    display: grid;
    grid-template-columns: repeat(var(--plinko-slot-count, 13), 1fr);
    gap: 3px;
    padding: 0 6px;
}
.arcade-plinko-slot {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    text-align: center;
    padding: 6px 2px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    transition: transform .15s, background .15s, color .15s;
}
.arcade-plinko-slot.tier-cold    { color: #7a8490; }
.arcade-plinko-slot.tier-neutral { color: var(--text); }
.arcade-plinko-slot.tier-warm    { color: #f2c14e; border-color: #f2c14e; }
.arcade-plinko-slot.tier-hot     { color: #ff7a2e; border-color: #ff7a2e; }
.arcade-plinko-slot.hit {
    animation: plinko-slot-hit .6s ease-out;
}
@keyframes plinko-slot-hit {
    0%   { transform: translateY(0)    scale(1);    background: var(--bg-input); color: var(--text-muted); }
    20%  { transform: translateY(-6px) scale(1.14); background: var(--accent);   color: var(--bg); border-color: var(--accent); }
    100% { transform: translateY(0)    scale(1);    background: var(--bg-input); color: var(--text-muted); }
}
.arcade-plinko-rows-range { flex: 1; }
.arcade-plinko-rows-val {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    min-width: 28px;
    text-align: right;
    color: var(--text);
}
.arcade-plinko-balls-input { max-width: 72px; }
.arcade-plinko-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* === tippy.js theme moved to base.css (2026-05-14): canonical "zcore" theme === */

/* === limbo (v2 — stage card, target marker, sidebar stats, projection) === */
.arcade-limbo-shell {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: stretch;
}
.limbo-stage {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% -20%, rgba(var(--accent-rgb), 0.06) 0%, transparent 60%),
        var(--bg-card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}
.limbo-readout {
    flex: 1;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius);
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 56px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.35) 100%),
        var(--bg-card);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.arcade-limbo-mult {
    font-family: var(--font-mono);
    font-size: clamp(56px, 9vw, 96px);
    font-weight: var(--fw-bold);
    color: var(--text);
    transition: color .2s, text-shadow .2s, transform .2s;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.7), 0 0 60px rgba(var(--accent-rgb), 0.18);
    line-height: 1;
}
.arcade-limbo-mult.win  { color: #6dd9b0; text-shadow: 0 0 24px rgba(109, 217, 176, 0.5); }
.arcade-limbo-mult.loss { color: var(--danger);  text-shadow: 0 0 24px rgba(255, 92, 77, 0.4); }
.limbo-target-marker {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--text-muted);
    letter-spacing: var(--ls-none).06em;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.35);
}
.limbo-target-marker span { color: var(--accent); font-weight: var(--fw-semi); }


/* === tower (v2 — bevel tiles, sidebar stats, projection) ===
 * Same shell pattern as mines: full-width, sidebar stretched. The grid
 * itself stays viewport-bounded so 9-12 levels fit without scroll. */
.arcade-tower-shell {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: stretch;
}
.tower-stage {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% -20%, rgba(var(--accent-rgb), 0.05) 0%, transparent 60%),
        var(--bg-card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    /* Stretch to fill the panel (via grid align-items:stretch + the shared
       [class$="-shell"] cascade). The previous height: clamp(...) cap
       prevented the tower from using the full viewport on tall screens. */
}
.arcade-tower-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.arcade-tower-row {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--tower-tiles, 4), 1fr);
    gap: 6px;
    opacity: 0.4;
    transition: opacity .2s;
}
.arcade-tower-row.active { opacity: 1; }
.arcade-tower-row.cleared { opacity: 0.72; }
.arcade-tower-tile {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.35) 100%),
        linear-gradient(135deg, var(--bg-card) 0%, var(--bg-input) 60%, #0d1218 100%);
    font-family: var(--font-mono);
    font-size: clamp(11px, 1.8vh, 14px);
    color: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform .1s, box-shadow .15s, filter .12s, color .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
    width: 100%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 2px 0 rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.arcade-tower-row.active .arcade-tower-tile { color: rgba(var(--accent-rgb), 0.5); }
.arcade-tower-row.active .arcade-tower-tile:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(var(--accent-rgb), 0.28);
    filter: brightness(1.08);
    color: var(--accent);
}
.arcade-tower-tile:disabled { cursor: default; }
.arcade-tower-tile.safe {
    border-color: rgba(109, 217, 176, 0.55);
    background:
        radial-gradient(circle at 50% 50%, rgba(109, 217, 176, 0.45) 0%, transparent 65%),
        linear-gradient(135deg, var(--bg-card), #0d1218);
    box-shadow: inset 0 0 0 1px rgba(109, 217, 176, 0.35), 0 0 16px rgba(109, 217, 176, 0.35);
    color: transparent;
}
.arcade-tower-tile.safe::after {
    content: '';
    position: absolute;
    width: 32%;
    height: 32%;
    background: linear-gradient(135deg, #b9f0d6, #6dd9b0);
    transform: rotate(45deg);
    border-radius: 4px;
    box-shadow: 0 0 14px rgba(109, 217, 176, 0.7), inset 0 0 6px rgba(255, 255, 255, 0.5);
}
.arcade-tower-tile.bomb {
    border-color: var(--danger);
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 92, 77, 0.5) 0%, transparent 65%),
        linear-gradient(135deg, #2a0c0c, #150505);
    box-shadow: inset 0 0 24px rgba(255, 92, 77, 0.35), 0 0 22px rgba(255, 92, 77, 0.55);
    color: transparent;
}
.arcade-tower-tile.bomb::after {
    content: '';
    position: absolute;
    width: 42%;
    height: 42%;
    background: radial-gradient(circle at 35% 35%, #ff8a4d 0%, #ff3322 50%, #5a0707 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 92, 77, 0.7), inset 0 0 8px rgba(255, 255, 255, 0.18);
}
.arcade-tower-tile.revealed-bomb-passive {
    border-color: rgba(255, 92, 77, 0.4);
    opacity: 0.45;
    color: transparent;
}
.arcade-tower-tile.revealed-bomb-passive::after {
    content: '';
    position: absolute;
    width: 36%;
    height: 36%;
    background: radial-gradient(circle, #6a1818 0%, #2a0808 100%);
    border-radius: 50%;
}
.arcade-tower-tile.pending { opacity: 0.55; pointer-events: none; }

.tower-form { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 720px) {
    .arcade-plinko-shell,
    .arcade-limbo-shell,
    .arcade-tower-shell { grid-template-columns: 1fr; }
    .arcade-limbo-mult  { font-size: 56px; }
    .tower-stage        { height: auto; min-height: 460px; }
    .arcade-tower-grid  { max-width: 100%; }
}

/* === lootboxes === */
.lootbox-section {
    margin-bottom: 24px;
}
.lootbox-section-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}
.lootbox-section-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-tracked);
    color: var(--text);
}
.lootbox-section-sub {
    margin: 0;
    font-size: var(--fs-label);
    color: var(--text-dim);
}
.lootbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
/* ═════════════════════════════════════════════════════════════════════
 * Lootbox card — hero on top (CSS-only tier art) + clean body below.
 * No raster images. Common = wood/bronze, Rare = crystal blue,
 * Legendary = purple→gold with animated sparkles.
 * ═════════════════════════════════════════════════════════════════════ */
.lootbox-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lootbox-card:hover {
    transform: translateY(-2px);
}
.lootbox-card-common:hover    { border-color: #cd7f32; box-shadow: 0 8px 28px rgba(205,127,50,.28); }
.lootbox-card-rare:hover      { border-color: #4dabf7; box-shadow: 0 8px 28px rgba(77,171,247,.35); }
.lootbox-card-legendary:hover { border-color: #c77dff; box-shadow: 0 10px 34px rgba(199,125,255,.50); }

/* ── hero area ── */
.lootbox-card-hero {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lootbox-card-hero-icon {
    font-size: 64px;
    line-height: 1;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.lootbox-card-hero-tier {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-xbold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
}
.lootbox-card-hero-aura {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ── common (bronze / wood) ── */
.lootbox-card-common .lootbox-card-hero {
    background:
        radial-gradient(ellipse at 50% 120%, rgba(205,127,50,.45), transparent 60%),
        linear-gradient(135deg, #2d1f0f 0%, #4a3318 50%, #2a1c0d 100%);
}
.lootbox-card-common .lootbox-card-hero-icon  { color: #cd7f32; }
.lootbox-card-common .lootbox-card-hero-tier  { color: #ffd27a; border: 1px solid rgba(205,127,50,.6); }

/* ── rare (crystal blue) ── */
.lootbox-card-rare .lootbox-card-hero {
    background:
        radial-gradient(ellipse at 50% 120%, rgba(77,171,247,.55), transparent 60%),
        linear-gradient(135deg, #0a1c30 0%, #13335e 50%, #0a1f3a 100%);
}
.lootbox-card-rare .lootbox-card-hero-icon    { color: #7cc7ff; animation: lootbox-rare-shimmer 3s ease-in-out infinite; }
.lootbox-card-rare .lootbox-card-hero-tier    { color: #9bd0ff; border: 1px solid rgba(77,171,247,.6); }
.lootbox-card-rare .lootbox-card-hero-aura {
    background:
        radial-gradient(1.5px 1.5px at 18% 30%,  #b9d9ff, transparent 60%),
        radial-gradient(1px 1px at 82% 60%,     #7cc7ff, transparent 60%),
        radial-gradient(2px 2px at 35% 75%,     #9bd0ff, transparent 60%),
        radial-gradient(1px 1px at 68% 20%,     #ffffff, transparent 60%);
    animation: lootbox-twinkle 2.4s ease-in-out infinite;
}
@keyframes lootbox-rare-shimmer {
    0%, 100% { filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 4px rgba(77,171,247,.5)); }
    50%      { filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(124,199,255,.9)); }
}

/* ── legendary (purple → gold ornate) ── */
.lootbox-card-legendary .lootbox-card-hero {
    background:
        radial-gradient(ellipse at 50% 110%, rgba(255,217,61,.28), transparent 55%),
        radial-gradient(ellipse at 50% 60%,  rgba(199,125,255,.55), transparent 65%),
        linear-gradient(135deg, #1c0a2c 0%, #3b1458 35%, #6b1f8a 65%, #2a0f3e 100%);
    animation: lootbox-legendary-bg 6s ease-in-out infinite;
}
.lootbox-card-legendary .lootbox-card-hero-icon {
    color: #ffd93d;
    animation: lootbox-legendary-icon 2.2s ease-in-out infinite;
}
.lootbox-card-legendary .lootbox-card-hero-tier {
    color: #1a1a1a;
    background: linear-gradient(135deg, #ffd93d, #c77dff);
    border: 1px solid #ffd93d;
}
.lootbox-card-legendary .lootbox-card-hero-aura {
    background:
        radial-gradient(2px 2px at 12% 25%, #ffd93d, transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 30%, #c77dff, transparent 60%),
        radial-gradient(1.5px 1.5px at 25% 75%, #ffffff, transparent 60%),
        radial-gradient(2px 2px at 75% 80%, #ffd93d, transparent 60%),
        radial-gradient(1px 1px at 50% 45%, #ffaaf7, transparent 60%);
    animation: lootbox-twinkle 1.8s ease-in-out infinite;
    mix-blend-mode: screen;
}
@keyframes lootbox-legendary-icon {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,217,61,.7)); }
    50%      { transform: scale(1.06); filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(255,217,61,1)) drop-shadow(0 0 40px rgba(199,125,255,.55)); }
}
@keyframes lootbox-legendary-bg {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.15); }
}
@keyframes lootbox-twinkle {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* ── body ── */
.lootbox-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
}
.lootbox-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.lootbox-card-name {
    margin: 0;
    font-size: var(--fs-content);
    font-weight: var(--fw-bold);
    color: var(--text);
    text-transform: lowercase;
    letter-spacing: var(--ls-tight);
}
.lootbox-card-price {
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--accent);
    white-space: nowrap;
}
.lootbox-card-desc {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.4;
}
.lootbox-card-drops {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.lootbox-drop-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--fs-micro);
    font-family: var(--font-mono);
    font-weight: var(--fw-semi);
    text-transform: lowercase;
    letter-spacing: var(--ls-default);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--text-muted);
}
.lootbox-drop-pill.rarity-common    { border-color: #888;    color: #aaa; }
.lootbox-drop-pill.rarity-rare      { border-color: #4dabf7; color: #4dabf7; }
.lootbox-drop-pill.rarity-epic      { border-color: #c77dff; color: #c77dff; }
.lootbox-drop-pill.rarity-legendary { border-color: #ffd93d; color: #ffd93d; }
.lootbox-drop-more {
    border-color: var(--border);
    color: var(--text-dim);
}
.lootbox-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.lootbox-open-btn {
    flex: 1;
    background: var(--accent);
    border: none;
    color: var(--bg);
    padding: 10px 10px;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-none).8px;
    cursor: pointer;
    transition: filter .12s, transform .08s;
}
.lootbox-open-btn:hover    { filter: brightness(1.1); }
.lootbox-open-btn:active   { transform: translateY(1px); }
.lootbox-open-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
/* 10x bulk: subtler secondary style so primary "open 1x" pops */
.lootbox-open-btn-bulk {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    flex: 1.3;
}
.lootbox-open-btn-bulk:hover { border-color: var(--accent); color: var(--accent); }

/* reveal overlay */
/* Overlay is locked to viewport — internal stage scrolls when tall.
   This keeps the reveal centered to screen, not to page scroll length. */
.lootbox-reveal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    padding: 20px;
    overflow: hidden;
}
.lootbox-reveal-overlay[hidden] { display: none; }
.lootbox-reveal-stage {
    position: relative;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(var(--accent-rgb), 0.08), transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 26px;
    max-width: 860px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.lootbox-reveal-stage > * { position: relative; z-index: 1; }
.lootbox-reveal-stage--bulk {
    max-width: 860px;
}
.lootbox-reveal-stage--bulk #lootbox-reveal-cards {
    gap: 4px;
}
/* Compact reel rows when opening in bulk so 10 fit on one screen. */
.lootbox-reveal-stage--bulk .lootbox-reel        { padding: 4px 0; }
.lootbox-reveal-stage--bulk .lootbox-reel-viewport { height: 84px; }
.lootbox-reveal-stage--bulk .lootbox-reel-item   { flex-basis: 90px; padding: 8px 4px 6px; }
.lootbox-reveal-stage--bulk .lootbox-reel-preview { width: 44px; height: 44px; }
.lootbox-reveal-stage--bulk .lootbox-reel-item-name   { font-size: var(--fs-micro); }
.lootbox-reveal-stage--bulk .lootbox-reel-item-rarity { font-size: var(--fs-tiny); }
.lootbox-reveal-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-none).16em;
    color: var(--text-muted);
}
#lootbox-reveal-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: stretch;
}

/* reel — neutral zcore card, accent ring only on the active row */
.lootbox-reel {
    position: relative;
    width: 100%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%, rgba(0, 0, 0, 0.25) 100%),
        var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.lootbox-reel-viewport {
    position: relative;
    width: 100%;
    height: 128px;
    overflow: hidden;
    /* soft fade on both edges */
    mask-image: linear-gradient(90deg,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%);
}
.lootbox-reel-track {
    display: flex;
    gap: 4px;
    height: 100%;
    will-change: transform;
    padding-left: 2px;
}
/* Pointer — gold center line with gem-shaped arrows top + bottom. */
.lootbox-reel-pointer {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg, #fff4b3 0%, #ffd93d 50%, #fff4b3 100%);
    box-shadow: 0 0 10px #ffd93d, 0 0 20px rgba(255,217,61,.6);
    z-index: 3;
    border-radius: 1px;
    pointer-events: none;
    animation: lootbox-pointer-pulse 1.6s ease-in-out infinite;
}
@keyframes lootbox-pointer-pulse {
    0%, 100% { box-shadow: 0 0 10px #ffd93d, 0 0 20px rgba(255,217,61,.5); }
    50%      { box-shadow: 0 0 16px #ffeb6b, 0 0 28px rgba(255,217,61,.85); }
}
.lootbox-reel-pointer::before,
.lootbox-reel-pointer::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 6px rgba(255,217,61,.85));
}
.lootbox-reel-pointer::before {
    top: -8px;
    border-top: 10px solid #ffd93d;
}
.lootbox-reel-pointer::after {
    bottom: -8px;
    border-bottom: 10px solid #ffd93d;
}

.lootbox-reel-item {
    flex: 0 0 120px;
    height: 100%;
    position: relative;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: calc(var(--radius) * 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 14px 6px 8px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* dramatic rarity backgrounds — CS-style vertical gradients */
.lootbox-reel-item.rarity-common {
    background:
        linear-gradient(180deg, rgba(155,161,166,0.10) 0%, rgba(155,161,166,0.40) 100%),
        var(--bg-modal);
    border-color: rgba(155,161,166,0.50);
}
.lootbox-reel-item.rarity-rare {
    background:
        linear-gradient(180deg, rgba(77,171,247,0.10) 0%, rgba(77,171,247,0.55) 100%),
        var(--bg-modal);
    border-color: rgba(77,171,247,0.70);
}
.lootbox-reel-item.rarity-epic {
    background:
        linear-gradient(180deg, rgba(199,125,255,0.12) 0%, rgba(199,125,255,0.60) 100%),
        var(--bg-modal);
    border-color: rgba(199,125,255,0.75);
}
.lootbox-reel-item.rarity-legendary {
    background:
        linear-gradient(180deg, rgba(255,217,61,0.12) 0%, rgba(255,140,40,0.55) 100%),
        var(--bg-modal);
    border-color: rgba(255,217,61,0.80);
}

.lootbox-reel-item-stripe {
    display: none; /* superseded by full-card gradient */
}

.lootbox-reel-item-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.lootbox-reel-item-rarity {
    margin-top: 3px;
    font-size: var(--fs-tiny);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-tracked);
    opacity: 0.85;
}
.lootbox-reel-item.rarity-common .lootbox-reel-item-rarity    { color: #d5d9dd; }
.lootbox-reel-item.rarity-rare .lootbox-reel-item-rarity      { color: #9bd0ff; }
.lootbox-reel-item.rarity-epic .lootbox-reel-item-rarity      { color: #e3beff; }
.lootbox-reel-item.rarity-legendary .lootbox-reel-item-rarity { color: #ffe896; }

/* preview block — fills most of the card, shows cosmetic preview */
.lootbox-reel-preview {
    width: 64px;
    height: 64px;
    margin: 0 auto 4px;
    background: rgba(0,0,0,0.30);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text);
    overflow: hidden;
    position: relative;
}
.lootbox-reel-preview-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text);
    font-size: var(--fs-base);
}
.lootbox-reel-preview-frame {
    /* the outline coming from cosmetic-frame-* is applied to the outer preview div */
}
.lootbox-reel-preview-title-text {
    font-size: var(--fs-sm);
    padding: 3px 8px;
    border-radius: 3px;
    line-height: 1;
}
.lootbox-reel-preview-effect-text {
    font-size: var(--fs-h2);
    line-height: 1;
}
.lootbox-reel-preview-bg {
    width: 64px;
    height: 64px;
    border-radius: 8px;
}
.lootbox-reel-preview-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.lootbox-reel-preview-generic i {
    font-size: var(--fs-h2);
    color: var(--text-dim);
}

/* winning cell: rarity-colored border + glow-pulse. We intentionally don't
   scale() here — the reel-viewport clips overflow, so a scaled cell gets
   cut at the edges. Glow-pulse conveys "this is the winner" without size. */
.lootbox-reel-item--win {
    animation: lootbox-reel-win-glow 1.4s ease-out 1 forwards;
    z-index: 1;
    border-width: 2px;
}
.lootbox-reel-item--win.rarity-common {
    border-color: #d5d9dd;
    box-shadow: 0 0 0 2px rgba(213,217,221,0.90), 0 0 28px 3px rgba(155,161,166,0.70);
}
.lootbox-reel-item--win.rarity-rare {
    border-color: #4dabf7;
    box-shadow: 0 0 0 2px rgba(77,171,247,0.95), 0 0 30px 3px rgba(77,171,247,0.85);
}
.lootbox-reel-item--win.rarity-epic {
    border-color: #c77dff;
    box-shadow: 0 0 0 2px rgba(199,125,255,0.95), 0 0 32px 4px rgba(199,125,255,0.85);
}
.lootbox-reel-item--win.rarity-legendary {
    border-color: #ffd93d;
    box-shadow: 0 0 0 2px rgba(255,217,61,1), 0 0 38px 5px rgba(255,180,60,0.90);
}

.lootbox-reel-dup-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: var(--fs-tiny);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--warning-muted);
    color: var(--warning);
    line-height: 1;
    z-index: 3;
}

.lootbox-reveal-summary {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text);
    text-align: center;
    padding: 10px 16px;
    border-radius: var(--radius);
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,217,61,.25);
    letter-spacing: var(--ls-default);
}

@keyframes lootbox-reel-win-pulse {
    0%   { transform: scale(1);    }
    35%  { transform: scale(1.10); }
    70%  { transform: scale(0.98); }
    100% { transform: scale(1);    }
}

/* === leaderboard === */
.arcade-leaderboard-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.arcade-lb-metric-pills,
.arcade-lb-period-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.arcade-lb-pill {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 6px 12px;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.arcade-lb-pill:hover { color: var(--text); border-color: var(--accent); }
.arcade-lb-pill.active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    font-weight: var(--fw-semi);
}
.arcade-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.arcade-lb-row {
    display: grid;
    grid-template-columns: 40px 40px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
/* Ranks 4+ render in a denser 2-column grid so the very wide right-side
 * whitespace stops being wasted. */
.arcade-lb-rest {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

/* === podium for top 3 === */
.arcade-lb-podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 12px;
    align-items: end;
}
.arcade-lb-podium-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 16px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    cursor: pointer;
    transition: transform .15s var(--ease), border-color .12s;
    position: relative;
}
.arcade-lb-podium-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}
.arcade-lb-podium-card--center {
    background: linear-gradient(160deg, var(--accent-soft) 0%, var(--bg-card) 60%);
    border-color: var(--accent);
    padding-top: 22px;
    padding-bottom: 18px;
}
.arcade-lb-podium-card .arcade-lb-rank {
    margin-bottom: 4px;
}
.arcade-lb-podium-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}
.arcade-lb-podium-name {
    font-family: var(--font-mono);
    font-size: var(--fs-content);
    font-weight: var(--fw-bold);
    color: var(--text);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.arcade-lb-podium-rounds {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-none).6px;
}
.arcade-lb-podium-value {
    font-family: var(--font-mono);
    font-size: var(--fs-h2);
    font-weight: var(--fw-xbold);
    color: var(--text);
    margin-top: 4px;
}
.arcade-lb-podium-card--center .arcade-lb-podium-value { font-size: var(--fs-h2-xl); color: var(--accent); }
.arcade-lb-podium-value.is-positive { color: var(--success); }
.arcade-lb-podium-value.is-negative { color: var(--danger);  }

/* === secondary-metric chips (shown in podium cards + dense rows) === */
.arcade-lb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 6px;
}
.arcade-lb-row .arcade-lb-chips {
    justify-content: flex-end;
    margin-top: 0;
}
.arcade-lb-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-input);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.arcade-lb-chip-label {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
    font-size: var(--fs-xs);
}
.arcade-lb-chip-value { color: var(--text); font-weight: var(--fw-semi); }
.arcade-lb-chip.is-positive .arcade-lb-chip-value { color: var(--success); }
.arcade-lb-chip.is-negative .arcade-lb-chip-value { color: var(--danger);  }

@media (max-width: 720px) {
    .arcade-lb-podium {
        grid-template-columns: 1fr;
    }
    .arcade-lb-row {
        grid-template-columns: 40px 40px minmax(0, 1fr) auto;
    }
    .arcade-lb-row .arcade-lb-chips { display: none; }
    .arcade-lb-rest {
        grid-template-columns: 1fr;
    }
}
.arcade-lb-row:hover {
    background: var(--bg-input);
    border-color: var(--border-focus, var(--accent));
}
.arcade-lb-rank {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--text-dim);
    text-align: center;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background: var(--bg-input);
}
.arcade-lb-rank.rank-gold   { color: #1a1a1a; background: #ffd93d; }
.arcade-lb-rank.rank-silver { color: #1a1a1a; background: #c0c0c0; }
.arcade-lb-rank.rank-bronze { color: #1a1a1a; background: #cd7f32; }
.arcade-lb-avatar { display: flex; align-items: center; }
.arcade-lb-body { min-width: 0; }
.arcade-lb-name {
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-weight: var(--fw-semi);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arcade-lb-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-dim);
    margin-top: 2px;
}
.arcade-lb-value {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.arcade-lb-value-amount {
    font-family: var(--font-mono);
    font-size: var(--fs-content);
    font-weight: var(--fw-bold);
    color: var(--text);
}
.arcade-lb-value.is-positive .arcade-lb-value-amount { color: #6dc28b; }
.arcade-lb-value.is-negative .arcade-lb-value-amount { color: #d97a7a; }
.arcade-lb-value-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
    margin-top: 1px;
}

/* === my stats === */
.arcade-stat-headlines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.arcade-stat-headline {
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}
.arcade-stat-headline-value {
    font-family: var(--font-mono);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--text);
}
.arcade-stat-headline.is-positive .arcade-stat-headline-value { color: #6dc28b; }
.arcade-stat-headline.is-negative .arcade-stat-headline-value { color: #d97a7a; }
.arcade-stat-headline-muted { color: var(--text-dim); }
.arcade-stat-headline-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
    margin-top: 4px;
}
.arcade-stat-biggest-win {
    padding: 14px 18px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(255,217,61,0.08), rgba(255,170,102,0.08)), var(--bg-card);
    border: 1px solid rgba(255,217,61,0.40);
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: center;
}
.arcade-stat-biggest-win-label {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: #ffd93d;
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
}
.arcade-stat-biggest-win-value {
    font-family: var(--font-mono);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    color: #6dc28b;
    grid-row: 1 / span 2;
    grid-column: 2;
}
.arcade-stat-biggest-win-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-dim);
}
.arcade-stat-gate-note {
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-dim);
    font-style: italic;
    margin-bottom: 12px;
}
.arcade-stat-section-title {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-tracked);
    margin: 8px 0;
}
.arcade-stat-game-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.arcade-stat-game-row {
    display: grid;
    grid-template-columns: 36px 90px repeat(6, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.arcade-stat-game-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-body);
}
.arcade-stat-game-name {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    color: var(--text);
    text-transform: lowercase;
}
.arcade-stat-game-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.arcade-stat-game-cell-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-default);
}
.arcade-stat-game-cell-value {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--text);
    font-weight: var(--fw-semi);
}
.arcade-stat-game-cell-value.is-positive { color: #6dc28b; }
.arcade-stat-game-cell-value.is-negative { color: #d97a7a; }

@media (max-width: 900px) {
    .arcade-stat-game-row {
        grid-template-columns: 32px 1fr;
        grid-auto-flow: row;
    }
    .arcade-stat-game-cell {
        grid-column: 2;
    }
}

/* === achievement progress rows (in stats tab) === */
.arcade-ach-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.arcade-ach-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}
.arcade-ach-row.status-owned      { border-left: 3px solid #ffd93d; }
.arcade-ach-row.status-unclaimed  { border-left: 3px solid #6dc28b; }
.arcade-ach-row.status-locked     { border-left: 3px solid var(--border); opacity: 0.75; }

.arcade-ach-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg-input); color: var(--text-dim);
    display: flex; align-items: center; justify-content: center; font-size: var(--fs-body);
}
.arcade-ach-row.status-owned     .arcade-ach-icon { color: #ffd93d; background: rgba(255,217,61,0.14); }
.arcade-ach-row.status-unclaimed .arcade-ach-icon { color: #6dc28b; background: rgba(109,194,139,0.14); }

.arcade-ach-body { min-width: 0; }
.arcade-ach-name {
    font-family: var(--font-mono);
    font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--text);
    text-transform: lowercase;
}
.arcade-ach-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro); color: var(--text-dim);
    margin-bottom: 4px;
}
.arcade-ach-bar {
    height: 4px; border-radius: 2px;
    background: var(--bg-input); overflow: hidden;
}
.arcade-ach-bar-fill {
    height: 100%; background: var(--accent);
    transition: width .3s ease;
}
.arcade-ach-row.status-owned     .arcade-ach-bar-fill { background: #ffd93d; }
.arcade-ach-row.status-unclaimed .arcade-ach-bar-fill { background: #6dc28b; }

.arcade-ach-status {
    font-family: var(--font-mono);
    font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-dim);
    min-width: 60px; text-align: right;
}
.arcade-ach-row.status-owned     .arcade-ach-status { color: #ffd93d; text-transform: uppercase; letter-spacing: var(--ls-default); }
.arcade-ach-row.status-unclaimed .arcade-ach-status { color: #6dc28b; }

/* ============================================================== *
 * HILO                                                            *
 * ============================================================== */

/* Hilo replicates the crash shell exactly: 1fr | 360px grid, stage hosts a
   bordered "play area" wrap that flex:1's into the remaining height (just
   like crash's canvas-wrap), the form column carries the standard stats /
   bet / actions / projection-footer rhythm. The shared
   [class$="-shell"] cascade at the top of this file stretches every game's
   shell under viewport-lock — no per-game override needed. */
.arcade-hilo-shell {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: stretch;
}

.hilo-stage {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% -30%, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%),
        var(--bg-card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

/* Inner play-area wrap — the hilo equivalent of `.crash-stage-canvas-wrap`.
   Takes the stage's remaining vertical space, grid-paper backdrop tells the
   eye it's a deliberate playing surface even when the board is shorter than
   the wrap. The board sits centered inside it. */
.hilo-stage-wrap {
    position: relative;
    flex: 1;
    min-height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius);
    background:
        repeating-linear-gradient(0deg,  rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 56px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.35) 100%),
        var(--bg-card);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    gap: 14px;
}

.hilo-form {
    /* Top-anchored content; projection-footer pinned to the bottom via the
       shared `.mines-projection { margin-top: auto }` rule (same as crash,
       mines, limbo). No justify-content override here. */
}

/* Stake-style pick board inside the play-area wrap:
     1. history strip on top — last 6 drawn cards (this round)
     2. main card centered
     3. pick row underneath: higher | skip | lower side-by-side in one line

   The .arcade-stage-action button class is shared so other Stake-style
   games can compose the same vocabulary without renaming. */
.hilo-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 560px;
}

/* History strip — small rank+suit tiles, reserved height even when empty so
   the card doesn't jump when the first real card lands. */
.hilo-history {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 56px;
    width: 100%;
}
.hilo-history-card {
    width: 40px;
    height: 56px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}
.hilo-history-card--empty { opacity: 0.25; border-style: dashed; }
.hilo-history-card--win   { border-color: var(--success); }
.hilo-history-card--loss  { border-color: var(--danger); opacity: 0.55; }
.hilo-history-card--skip  { border-color: var(--border-strong); opacity: 0.55; }
/* Mini-tile rank/suit sizes (scoped via .hilo-history-card so they don't
   collide with the main card's much larger .hilo-card > .hilo-card-rank). */
.hilo-history-card .hilo-card-rank { font-size: var(--fs-content); line-height: 1; }
.hilo-history-card .hilo-card-suit { font-size: var(--fs-label); line-height: 1; }

/* Pick row: three buttons in one line. Higher / lower take equal width,
   skip in the middle stays narrow (auto-sized to its icon + label). */
.hilo-pick-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    width: 100%;
}
/* Inside the pick row the action buttons live in fixed grid tracks, so we
   shrink the padding a bit to keep the row from feeling chunky. */
.hilo-pick-row > .arcade-stage-action {
    padding: 12px 14px;
}
.hilo-pick-row > .arcade-stage-action--skip {
    width: auto;
}

.hilo-card {
    width: 200px;
    height: 280px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    border: 2px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 240ms var(--ease);
    user-select: none;
}
.hilo-card--placeholder { color: var(--text-dim); border-style: dashed; }
.hilo-card--red   { color: var(--danger); }
.hilo-card--black { color: var(--text); }
.hilo-card--flip  { animation: hilo-flip 360ms var(--ease); }

/* Scope rank/suit sizes to the main card only. The previous global rule
   leaked an 80px rank into any descendant span.hilo-card-rank — including
   the now-retired history mini-tiles — overflowing their boxes. */
.hilo-card > .hilo-card-rank { font-size: 80px; font-weight: var(--fw-xbold); line-height: 1; }
.hilo-card > .hilo-card-suit { font-size: 44px; line-height: 1; }

@keyframes hilo-flip {
    0%   { transform: rotateY(90deg) scale(0.9); }
    100% { transform: rotateY(0)     scale(1);   }
}

/* ── Generic stage-action button (full-width prompt button rendered IN the
      stage, not the form). Used by hilo for higher/lower pick + skip flanker.
      Other games adopting Stake-style stage interactions (coinflip
      heads-vs-tails, dice over/under, etc.) can reuse this without rolling
      their own button class. */
.arcade-stage-action {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    text-transform: uppercase;
    letter-spacing: var(--ls-none).08em;
    cursor: pointer;
    transition: transform 120ms var(--ease), border-color 120ms var(--ease), background 120ms var(--ease), opacity 120ms;
}
.arcade-stage-action:hover:not(:disabled)  { transform: translateY(-1px); }
.arcade-stage-action:active:not(:disabled) { transform: translateY(1px); }
.arcade-stage-action:disabled              { opacity: .45; cursor: not-allowed; }

.arcade-stage-action > i { font-size: var(--fs-base); }
.arcade-stage-action-label { justify-self: start; }
.arcade-stage-action-mult {
    justify-self: end;
    font-size: var(--fs-content);
    font-weight: var(--fw-bold);
    text-transform: none;
    letter-spacing: var(--ls-none);
}

.arcade-stage-action--up {
    border-color: var(--success);
    color: var(--success);
}
.arcade-stage-action--up:hover:not(:disabled)  { background: var(--success-muted); }
.arcade-stage-action--down {
    border-color: var(--danger);
    color: var(--danger);
}
.arcade-stage-action--down:hover:not(:disabled) { background: rgba(232, 93, 93, 0.10); }

/* Skip variant of arcade-stage-action — narrower, no mult slot. Grid
   template falls back to two columns when the mult cell is absent so the
   icon centers cleanly. */
.arcade-stage-action--skip {
    grid-template-columns: auto auto;
    color: var(--text-muted);
}
.arcade-stage-action--skip:hover:not(:disabled) { background: var(--bg-card); color: var(--text); }

.hilo-form .arcade-bet-row { margin-top: 8px; }

@media (max-width: 960px) {
    .hilo-card { width: 180px; height: 250px; }
    .hilo-card > .hilo-card-rank { font-size: 72px; }
    .hilo-card > .hilo-card-suit { font-size: 40px; }
}
@media (max-width: 720px) {
    .arcade-hilo-shell { grid-template-columns: 1fr; }
    .hilo-card { width: 160px; height: 230px; }
    .hilo-card > .hilo-card-rank { font-size: 64px; }
    .hilo-card > .hilo-card-suit { font-size: var(--fs-display); }
}
@media (max-width: 480px) {
    .hilo-card { width: 130px; height: 190px; }
    .hilo-card > .hilo-card-rank { font-size: 52px; }
    .hilo-card > .hilo-card-suit { font-size: 30px; }
    .arcade-stage-action { padding: 12px 14px; font-size: var(--fs-label); }
    .arcade-stage-action-mult { font-size: var(--fs-body); }
    /* On phones the pick row stacks: higher full-width, skip full-width,
       lower full-width — easier to tap than 3 narrow tracks. */
    .hilo-pick-row { grid-template-columns: 1fr; }
}

/* ============================================================== *
 * ROULETTE                                                        *
 * ============================================================== */

/* Roulette adopts the same 2-col stage+form shape as crash/mines/hilo.
   Stage hosts the wheel and the *vertical* betting table side-by-side
   inside a play-area-wrap; form column carries chips/stats/actions/projection. */
.arcade-roulette-shell {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: stretch;
}

.roulette-stage {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% -30%, rgba(var(--accent-rgb), 0.06) 0%, transparent 60%),
        var(--bg-card);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

/* Inner play-area wrap — wheel on the left, vertical betting table on
   the right. Same role as .crash-stage-canvas-wrap / .hilo-stage-wrap. */
.roulette-stage-wrap {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 20px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius);
    background:
        repeating-linear-gradient(0deg,  rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 56px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.35) 100%),
        var(--bg-card);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.roulette-wheel-wrap {
    position: relative;
    align-self: center;
    justify-self: center;
    width: min(280px, 100%);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roulette-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        var(--border-strong) 0 45deg,
        var(--danger)        45deg 90deg,
        var(--border-strong) 90deg 135deg,
        var(--danger)        135deg 180deg,
        var(--border-strong) 180deg 225deg,
        var(--danger)        225deg 270deg,
        var(--border-strong) 270deg 315deg,
        var(--danger)        315deg 360deg
    );
    box-shadow: 0 0 0 4px var(--border-strong), 0 8px 24px rgba(0, 0, 0, 0.4);
    position: relative;
    transition: transform 1.5s var(--ease);
}

.roulette-wheel[data-spin="spinning"] { animation: roulette-spin 1.5s linear; }
@keyframes roulette-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(900deg); }
}

.roulette-wheel-disc {
    position: absolute;
    inset: 18px;
    background: var(--bg-elevated);
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roulette-wheel-number {
    font-size: clamp(32px, 6vw, 56px);
    font-weight: var(--fw-xbold);
    color: var(--text);
    font-family: var(--font-mono);
}
.roulette-wheel-number.is-spinning { color: var(--text-muted); animation: roulette-pulse 0.18s linear infinite; }
.roulette-wheel-number.is-red   { color: var(--danger);  }
.roulette-wheel-number.is-black { color: var(--text);    }
.roulette-wheel-number.is-green { color: var(--success); }

@keyframes roulette-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1.0; }
}

.roulette-wheel-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left:  8px solid transparent;
    border-right: 8px solid transparent;
    border-top:  12px solid var(--accent);
    z-index: 2;
}

.roulette-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
}

.roulette-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.roulette-chips.is-locked { opacity: 0.5; pointer-events: none; }

.roulette-chip {
    background: var(--bg-elevated);
    border: 2px solid var(--border-strong);
    color: var(--text);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-weight: var(--fw-bold);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: transform 120ms var(--ease), border-color 120ms var(--ease);
}
.roulette-chip:hover  { transform: translateY(-2px); }
.roulette-chip.active { border-color: var(--accent); color: var(--accent); }

.roulette-summary {
    display: flex;
    gap: 16px;
}

/* Vertical table sits inside the stage-wrap (which already provides the
   bordered grid-paper backdrop), so the table itself is just a flex
   column with no own card chrome. Scrolls internally on short viewports. */
.roulette-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

/* Vertical layout: 3 columns × (1 zero + 12 numbers + 1 col-bet) rows.
   Each cell stretches to its row height; the whole grid fills the table
   column of the stage-wrap. */
.roulette-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(32px, 1fr);
    gap: 4px;
}

.roulette-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    cursor: pointer;
    transition: filter 120ms var(--ease), border-color 120ms var(--ease);
    user-select: none;
}
.roulette-cell:hover     { filter: brightness(1.15); }
.roulette-cell.has-chip  { border-color: var(--accent); }
.roulette-cell.is-winner { border-color: var(--success); box-shadow: 0 0 0 2px var(--success-muted); }
.roulette-cell.is-loser  { opacity: 0.55; }

.roulette-cell--zero  { background: var(--success);       color: var(--text-inverse); }
.roulette-cell--red   { background: var(--danger);        color: var(--text-inverse); }
.roulette-cell--black { background: var(--border-strong); color: var(--text-inverse); }
.roulette-cell--column,
.roulette-cell--dozen,
.roulette-cell--even-money { background: var(--bg-elevated); font-size: var(--fs-label); }

/* Outside bets under the vertical number grid:
   - dozens (1st/2nd/3rd 12) stack as 3 full-width rows
   - even-money (1-18, even, red, black, odd, 19-36) form a 3-col × 2-row grid */
.roulette-outside {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 8px;
}
.roulette-outside .roulette-cell { padding: 10px 6px; }
.roulette-cell--dozen { grid-column: 1 / -1; }

.roulette-chip-stack {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--accent);
    color: var(--text-inverse);
    border-radius: var(--radius-pill);
    font-size: var(--fs-micro);
    font-weight: var(--fw-xbold);
    padding: 2px 7px;
    font-family: var(--font-mono);
    cursor: pointer;
    /* Slightly larger hit-area than the visible pill so touch users can
     * reliably tap it to remove a chip. */
    min-width: 18px;
    min-height: 18px;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform .12s var(--ease);
}
.roulette-chip-stack:hover  { transform: scale(1.1); }
.roulette-chip-stack:active { transform: scale(0.92); }

.roulette-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 960px) {
    /* Collapse the 2-col shell to a single column so the form stacks below
       the stage on narrow viewports. */
    .arcade-roulette-shell { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    /* Stage-wrap also collapses (wheel above table) for phones. */
    .roulette-stage-wrap { grid-template-columns: 1fr; }
    .roulette-wheel-wrap { width: 180px; }
    .roulette-chip { width: 38px; height: 38px; font-size: var(--fs-label); }
    .roulette-actions { flex-wrap: wrap; }
    .roulette-actions .arcade-flip-btn { flex: 1 1 auto; }
}

.roulette-projection {
    margin-top: 0;
}
.roulette-projection-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow-y: auto;
}
.mines-proj-row--empty {
    color: var(--text-dim);
    font-style: italic;
    justify-content: center;
}
.mines-proj-pay.is-win  { color: var(--success); }
.mines-proj-pay.is-loss { color: var(--danger);  }