/* =====================================================================
   ESAForum — Arcade Mini-Games Styles
   Created by ESAGAMES HOSTING SHIELD SRL
   Uses theme.css custom properties; dark theme, purple accent var(--primary)
   ===================================================================== */

/* ── Arcade page header ── */
.arcade-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

/* ── Points badge (reuse from games.css pattern) ── */
.arc-points-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb),.18), rgba(47,107,255,.12));
    border: 1px solid rgba(var(--primary-rgb),.35);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    backdrop-filter: blur(6px);
}
.arc-points-badge b { color: var(--amber); font-size: 17px; }

/* ── Guest notice ── */
.arc-guest-notice {
    background: rgba(var(--primary-rgb),.08);
    border: 1px solid rgba(var(--primary-rgb),.25);
    border-radius: var(--radius);
    padding: 16px 20px;
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 24px;
}
.arc-guest-notice a { color: var(--primary-2); }

/* ── Standard game container (left stage + right controls) ── */
.arc-game-container {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
    margin-top: 8px;
}
@media (max-width: 780px) {
    .arc-game-container { grid-template-columns: 1fr; }
}

/* ── Controls panel ── */
.arc-controls {
    position: sticky;
    top: calc(var(--header-h, 60px) + 16px);
}
.arc-controls-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 18px;
    color: #fff;
}

/* ── Bet input row ── */
.arc-bet-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.arc-bet-row label {
    font-size: 13px;
    color: var(--text-mute);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.arc-quick-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.arc-quick-btns .btn {
    flex: 1;
    min-width: 40px;
    font-size: 12px;
    padding: 5px 8px;
}

/* ── Play button ── */
.arc-play-btn {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius);
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--primary), #5b3edb);
    color: #fff;
    transition: opacity .18s, transform .15s, box-shadow .18s;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb),.35);
    position: relative;
    overflow: hidden;
}
.arc-play-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: arcShimmer 2.5s infinite;
}
@keyframes arcShimmer { to { transform: translateX(100%); } }
.arc-play-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(var(--primary-rgb),.5); }
.arc-play-btn:disabled { opacity: .55; cursor: not-allowed; animation: none; }
.arc-play-btn:disabled::after { display: none; }

/* ── Result area ── */
.arc-result {
    margin-top: 18px;
    padding: 16px;
    border-radius: var(--radius);
    text-align: center;
    transition: all .25s;
    display: none;
}
.arc-result.show { display: block; }
.arc-result.win  { background: rgba(46,230,166,.1);  border: 1px solid rgba(46,230,166,.35); }
.arc-result.lose { background: rgba(255,77,109,.08); border: 1px solid rgba(255,77,109,.3); }
.arc-result.err  { background: rgba(245,179,1,.08);  border: 1px solid rgba(245,179,1,.3); }
.arc-result.push { background: rgba(var(--primary-rgb),.09); border: 1px solid rgba(var(--primary-rgb),.3); }
.arc-result-icon  { font-size: 34px; margin-bottom: 6px; }
.arc-result-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.arc-result-detail { font-size: 13px; color: var(--text-dim); }

/* ── Stage shared ── */
.arc-stage {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--surface);
}

/* ======================================================================
   MINES 💣
   ====================================================================== */

.mines-stage {
    padding: 24px;
    background: linear-gradient(160deg, #150e2e, var(--surface));
    border: 1px solid rgba(var(--primary-rgb),.3);
    border-radius: var(--radius-lg);
}
.mines-stage-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--text-mute);
    font-weight: 600;
}
.mines-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.mines-cell {
    aspect-ratio: 1;
    border-radius: 10px;
    border: 2px solid rgba(var(--primary-rgb),.3);
    background: rgba(var(--primary-rgb),.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: border-color .15s, background .15s, transform .1s;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.mines-cell:hover:not(.revealed):not(.disabled) {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb),.18);
    transform: scale(1.05);
}
.mines-cell.selected {
    border-color: var(--amber);
    background: rgba(245,179,1,.15);
}
.mines-cell.revealed-safe {
    border-color: var(--green);
    background: rgba(46,230,166,.15);
    cursor: default;
}
.mines-cell.revealed-mine {
    border-color: var(--red);
    background: rgba(255,77,109,.2);
    cursor: default;
    animation: mineBoom .4s ease;
}
.mines-cell.disabled {
    cursor: default;
    opacity: .7;
}
@keyframes mineBoom {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.3); }
    60%  { transform: scale(.9); }
    100% { transform: scale(1); }
}

.mines-multiplier-bar {
    margin-top: 16px;
    text-align: center;
}
.mines-mult-value {
    font-size: 28px;
    font-weight: 900;
    color: var(--amber);
    text-shadow: 0 0 20px rgba(245,179,1,.5);
}
.mines-mult-label {
    font-size: 12px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px;
}

.mines-config-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.mines-config-row label {
    font-size: 13px;
    color: var(--text-mute);
    font-weight: 600;
    white-space: nowrap;
}
.mines-config-row select {
    flex: 1;
}

/* ======================================================================
   WHEEL OF FORTUNE 🎡
   ====================================================================== */

.wheel-stage {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(160deg, #0f1a30, var(--surface));
    border: 1px solid rgba(47,107,255,.3);
    border-radius: var(--radius-lg);
    position: relative;
}
.wheel-wrap {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 24px;
}
.wheel-canvas {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 4px solid rgba(var(--primary-rgb),.5);
    box-shadow: 0 0 40px rgba(var(--primary-rgb),.25), inset 0 0 20px rgba(0,0,0,.3);
}
.wheel-pointer {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    filter: drop-shadow(0 2px 6px rgba(255,200,0,.6));
    z-index: 10;
}
.wheel-center-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #5b3edb);
    border: 3px solid rgba(255,255,255,.2);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(var(--primary-rgb),.5);
    z-index: 10;
}
.wheel-result-label {
    font-size: 22px;
    font-weight: 800;
    color: var(--amber);
    min-height: 32px;
    text-align: center;
}

/* ======================================================================
   CRASH 🚀
   ====================================================================== */

.crash-stage {
    padding: 24px;
    background: linear-gradient(160deg, #060d20, #0d1428);
    border: 1px solid rgba(255,77,109,.25);
    border-radius: var(--radius-lg);
    min-height: 340px;
    display: flex;
    flex-direction: column;
}
.crash-canvas-wrap {
    flex: 1;
    position: relative;
    min-height: 240px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.05);
}
canvas#crash-canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.crash-multiplier-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}
.crash-mult-value {
    font-size: 52px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 30px rgba(255,255,255,.5);
    line-height: 1;
    font-family: 'JetBrains Mono', monospace;
    transition: color .3s;
}
.crash-mult-value.crashed { color: var(--red); text-shadow: 0 0 30px rgba(255,77,109,.7); }
.crash-mult-value.won     { color: var(--green); text-shadow: 0 0 30px rgba(46,230,166,.7); }
.crash-mult-label {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.crash-autocashout-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}
.crash-autocashout-row label {
    font-size: 13px;
    color: var(--text-mute);
    font-weight: 600;
    white-space: nowrap;
}

/* ======================================================================
   PLINKO 🔵
   ====================================================================== */

.plinko-stage {
    padding: 20px;
    background: linear-gradient(160deg, #0d1e30, var(--surface));
    border: 1px solid rgba(46,230,166,.2);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}
canvas#plinko-canvas {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    background: rgba(0,0,0,.25);
    display: block;
}
.plinko-slots-row {
    display: flex;
    width: 100%;
    max-width: 400px;
    margin-top: 8px;
    gap: 3px;
}
.plinko-slot {
    flex: 1;
    text-align: center;
    padding: 6px 2px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--text-mute);
    transition: background .3s, color .3s, transform .3s;
}
.plinko-slot.hit {
    background: rgba(245,179,1,.2);
    border-color: var(--amber);
    color: var(--amber);
    transform: scale(1.08);
}

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

.roulette-stage {
    padding: 28px 20px;
    background: linear-gradient(160deg, #0a1f10, #0d1428);
    border: 1px solid rgba(46,230,166,.25);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.roulette-wheel-wrap {
    position: relative;
    width: 260px;
    height: 260px;
    margin-bottom: 20px;
}
canvas#roulette-canvas {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 4px solid rgba(46,230,166,.3);
    box-shadow: 0 0 40px rgba(46,230,166,.15);
}
.roulette-ball {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    pointer-events: none;
    transition: none;
}
.roulette-number-display {
    font-size: 52px;
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    line-height: 1;
    min-height: 60px;
    color: #fff;
    text-shadow: 0 0 30px rgba(255,255,255,.3);
}
.roulette-number-display.red   { color: #ff4d6d; text-shadow: 0 0 30px rgba(255,77,109,.6); }
.roulette-number-display.black { color: #ccc; text-shadow: 0 0 20px rgba(200,200,200,.4); }
.roulette-number-display.green { color: var(--green); text-shadow: 0 0 30px rgba(46,230,166,.6); }

.roulette-bet-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.roulette-type-btn {
    padding: 10px 6px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--text-mute);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: border-color .18s, background .18s, color .18s;
}
.roulette-type-btn:hover { border-color: rgba(var(--primary-rgb),.5); color: var(--text); }
.roulette-type-btn.active {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb),.14);
    color: #fff;
    box-shadow: 0 0 14px rgba(var(--primary-rgb),.25);
}
.roulette-type-btn.type-red.active   { border-color: #ff4d6d; background: rgba(255,77,109,.14); color: #ff4d6d; }
.roulette-type-btn.type-black.active { border-color: #aaa;    background: rgba(170,170,170,.1); color: #ccc; }
.roulette-type-btn.type-green.active { border-color: var(--green); background: rgba(46,230,166,.12); color: var(--green); }

.roulette-number-input-wrap {
    margin-bottom: 12px;
    display: none;
}
.roulette-number-input-wrap.show { display: block; }
.roulette-number-input-wrap label { font-size: 13px; color: var(--text-mute); font-weight: 600; }

.roulette-payout-info {
    font-size: 12px;
    color: var(--text-mute);
    text-align: center;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,.04);
    border-radius: 6px;
}

/* ======================================================================
   PENALTY SHOOTOUT ⚽
   ====================================================================== */

.penalty-stage {
    padding: 24px;
    background: linear-gradient(160deg, #0a1f10, #0d1f15);
    border: 1px solid rgba(46,230,166,.25);
    border-radius: var(--radius-lg);
    min-height: 360px;
}

.penalty-pitch {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 220px;
    border-radius: 12px;
    background:
        radial-gradient(ellipse 80px 40px at 50% 85%, rgba(255,255,255,.08) 0%, transparent 100%),
        linear-gradient(180deg, #1a4a28 0%, #2d7a3a 40%, #22663a 70%, #1a5a30 100%);
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    border: 2px solid rgba(255,255,255,.1);
}

/* Goal post */
.penalty-goal {
    position: absolute;
    top: 8%;
    left: 15%;
    right: 15%;
    height: 28%;
    border: 3px solid rgba(255,255,255,.85);
    border-bottom: none;
    border-radius: 2px 2px 0 0;
}
.penalty-goal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg, rgba(255,255,255,.07) 0px, rgba(255,255,255,.07) 1px, transparent 1px, transparent 18px
    ),repeating-linear-gradient(
        0deg, rgba(255,255,255,.07) 0px, rgba(255,255,255,.07) 1px, transparent 1px, transparent 18px
    );
}

/* Ball */
.penalty-ball {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    transition: none;
    z-index: 5;
}

/* Goalkeeper */
.penalty-keeper {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    transition: left .3s ease;
    z-index: 4;
}

/* Direction picker */
.penalty-dir-picker {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.penalty-dir-btn {
    padding: 10px 6px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--text-mute);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: border-color .18s, background .18s, color .18s;
}
.penalty-dir-btn:hover { border-color: rgba(var(--primary-rgb),.5); color: var(--text); }
.penalty-dir-btn.active {
    border-color: var(--green);
    background: rgba(46,230,166,.12);
    color: #fff;
}
.penalty-dir-label {
    font-size: 12px;
    color: var(--text-mute);
    text-align: center;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.penalty-rounds-display {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.penalty-round-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--surface-2);
    transition: all .3s;
}
.penalty-round-icon.scored    { border-color: var(--green); background: rgba(46,230,166,.15); }
.penalty-round-icon.missed    { border-color: var(--red);   background: rgba(255,77,109,.12); }
.penalty-round-icon.active    { border-color: var(--amber); background: rgba(245,179,1,.1); animation: roundPulse 1s infinite alternate; }
@keyframes roundPulse { from { box-shadow: none; } to { box-shadow: 0 0 12px var(--amber); } }

.penalty-commentary {
    font-size: 14px;
    font-style: italic;
    color: var(--text-dim);
    text-align: center;
    min-height: 22px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.06);
}

.penalty-score-display {
    text-align: center;
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: .1em;
}

.penalty-score-label {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}

/* ======================================================================
   Shared animations and utilities
   ====================================================================== */

.arc-hidden { display: none !important; }
.arc-shimmer-text {
    background: linear-gradient(90deg, var(--amber), #ff8c00, var(--amber));
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 2s linear infinite;
}
@keyframes textShimmer { to { background-position: -200%; } }

.arc-win-flash {
    animation: winFlash .6s ease;
}
@keyframes winFlash {
    0%,100% { box-shadow: none; }
    50%      { box-shadow: 0 0 40px rgba(46,230,166,.6); }
}

.arc-breadcrumbs {
    font-size: 13px;
    color: var(--text-mute);
    margin-bottom: 16px;
}
.arc-breadcrumbs a { color: var(--primary-2); text-decoration: none; }
.arc-breadcrumbs a:hover { text-decoration: underline; }

/* Info box */
.arc-info-box {
    padding: 12px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-mute);
    line-height: 1.6;
    margin-bottom: 14px;
}
.arc-info-box strong { color: var(--text); }

/* Loading spinner */
.arc-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: arcSpin .7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes arcSpin { to { transform: rotate(360deg); } }

/* Responsive tweaks */
@media (max-width: 600px) {
    .wheel-wrap, .wheel-canvas { width: 220px; height: 220px; }
    .roulette-wheel-wrap, canvas#roulette-canvas { width: 200px; height: 200px; }
    .mines-cell { font-size: 16px; }
    .crash-mult-value { font-size: 38px; }
    .penalty-stage { padding: 14px; }
}

/* ======================================================================
   MOBILE RESPONSIVENESS — 768 px (tablets) and 480 px (phones)
   Appended for ESAForum arcade mobile audit.
   ====================================================================== */

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {

    /* Ensure the 2-col layout stacks at 768 as well (already handles ≤780 but
       restate cleanly so specificity beats any future additions) */
    .arc-game-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Controls panel: un-sticky on mobile so it doesn't fight the layout */
    .arc-controls {
        position: static;
    }

    /* ── Wheel ── */
    .wheel-wrap,
    .wheel-canvas {
        width: 240px;
        height: 240px;
    }

    /* ── Roulette ── */
    .roulette-wheel-wrap,
    canvas#roulette-canvas {
        width: 220px;
        height: 220px;
    }

    /* Roulette number grid: allow cells to be smaller so all 37 fit */
    #roulette-num-grid {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 3px !important;
        font-size: 10px !important;
    }

    /* ── Plinko ── */
    canvas#plinko-canvas {
        max-width: 100%;
    }
    .plinko-slots-row {
        max-width: 100%;
    }
    .plinko-slot {
        font-size: 10px;
        padding: 4px 1px;
    }

    /* ── Crash ── */
    .crash-autocashout-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .crash-autocashout-row label {
        white-space: normal;
    }
    /* Autocashout input: let it be fluid */
    #autocashout-input {
        width: auto !important;
        flex: 1;
        min-width: 70px;
        max-width: 120px;
    }

    /* ── Mines ── */
    .mines-stage {
        padding: 16px;
    }
    .mines-grid {
        gap: 6px;
    }

    /* ── Penalty per-round labels ── */
    .penalty-round-label-span {
        width: auto !important;
        min-width: 52px;
    }

    /* ── Quick-bet buttons: ensure they never overflow ── */
    .arc-quick-btns {
        flex-wrap: wrap;
    }
    .arc-quick-btns .btn {
        flex: 1 1 auto;
        min-width: 36px;
    }

    /* ── General: nothing should overflow viewport ── */
    .arc-stage,
    .mines-stage,
    .wheel-stage,
    .crash-stage,
    .plinko-stage,
    .roulette-stage,
    .penalty-stage {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
}

/* ── Phone (≤480px) ── */
@media (max-width: 480px) {

    /* ── Wheel ── */
    .wheel-wrap,
    .wheel-canvas {
        width: 180px;
        height: 180px;
    }
    .wheel-stage {
        padding: 20px 12px;
    }

    /* ── Roulette wheel ── */
    .roulette-wheel-wrap,
    canvas#roulette-canvas {
        width: 160px;
        height: 160px;
    }
    .roulette-number-display {
        font-size: 38px;
    }
    /* Number grid — tighter on narrow phones: show 7 cols still but shrink cells */
    #roulette-num-grid {
        gap: 2px !important;
        font-size: 9px !important;
    }

    /* ── Mines 5×5 grid ── */
    .mines-stage {
        padding: 12px;
    }
    .mines-grid {
        gap: 5px;
    }
    .mines-cell {
        font-size: 14px;
        border-radius: 7px;
    }
    .mines-mult-value {
        font-size: 22px;
    }

    /* ── Crash ── */
    .crash-mult-value {
        font-size: 32px;
    }
    .crash-stage {
        padding: 14px;
    }
    .crash-canvas-wrap {
        min-height: 180px;
    }

    /* ── Plinko: scale canvas down and slots text ── */
    .plinko-stage {
        padding: 12px;
    }
    canvas#plinko-canvas {
        max-width: 100%;
    }
    .plinko-slot {
        font-size: 9px;
        padding: 3px 1px;
        border-radius: 4px;
    }

    /* ── Penalty ── */
    .penalty-stage {
        padding: 12px;
    }
    .penalty-pitch {
        max-height: 170px;
    }
    .penalty-dir-btn {
        padding: 8px 4px;
        font-size: 12px;
    }
    .penalty-score-display {
        font-size: 28px;
    }

    /* ── Bet row / play button ── */
    .arc-play-btn {
        padding: 11px;
        font-size: 14px;
    }
    .arc-quick-btns .btn {
        font-size: 11px;
        padding: 4px 6px;
    }

    /* ── Controls title ── */
    .arc-controls-title {
        font-size: 14px;
        margin-bottom: 14px;
    }

    /* ── Points badge ── */
    .arc-points-badge {
        font-size: 13px;
        padding: 8px 14px;
    }
}