@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800;900&family=Orbitron:wght@700;800;900&family=Press+Start+2P&family=Inter:wght@400;600;700;800&display=swap');

:root {
    --font-arcade: 'Press Start 2P', cursive, monospace;
    --font-led: 'Orbitron', sans-serif;
    --font-gaming: 'Outfit', 'Inter', sans-serif;
}

/* ============================================================
   GIGS PESA CASH — COMPACT GAME LAYOUT WITH ARCADE GAMING FONTS
   Loaded on every game page so the full game + bet controls fit
   on one screen (phone & laptop) without scrolling.
   ============================================================ */

/* Global Premium Gaming Fonts */
.brand-logo, .game-title-arcade, .arcade-plate, .marquee-text {
    font-family: var(--font-arcade) !important;
}

.wallet-badge, .sum-badge, .target-display, .odds-chip .val, .result-msg, .drawn-balls, .hand-total, .multiplier-val, .led-display, .credit-display, .bet-input {
    font-family: var(--font-led) !important;
    letter-spacing: 0.5px;
}

.btn-over, .btn-under, .btn-start, .btn-cashout, .btn-launch, .btn-bet, .action-btn, .btn-deal, .game-header, .controls-card, .quick-btn {
    font-family: var(--font-gaming) !important;
}

/* Tighten overall page padding so more fits vertically */
body.game-compact {
    padding: 8px !important;
}

/* ── Header ─────────────────────────────────────────────── */
.game-header {
    margin-bottom: 8px !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
}
.brand-logo { font-size: 1.05rem !important; }
.wallet-badge { padding: 4px 10px !important; font-size: 0.8rem !important; }
.btn-back { padding: 6px 10px !important; font-size: 0.75rem !important; }

/* ── Main wrapper ───────────────────────────────────────── */
.main-wrapper { gap: 8px !important; }

/* ── History bar ────────────────────────────────────────── */
.history-bar { gap: 4px !important; margin-bottom: 0 !important; }
.h-badge { padding: 2px 7px !important; font-size: 0.68rem !important; }

/* ── Arena / felt table ─────────────────────────────────── */
.arena, .felt-table {
    border-radius: 14px !important;
    padding: 12px 12px !important;
    gap: 10px !important;
}
.result-msg {
    font-size: 1.05rem !important;
    min-height: 26px !important;
}

/* ── Dice / cards / chips ───────────────────────────────── */
.die { width: 56px !important; height: 56px !important; font-size: 2rem !important; border-radius: 10px !important; }
.die-plus { font-size: 1.4rem !important; }
.sum-badge { font-size: 2rem !important; min-width: 44px !important; }
.card { width: 48px !important; height: 70px !important; font-size: 0.95rem !important; border-radius: 7px !important; }
.card .suit-center { font-size: 1.2rem !important; }
.hand-row { min-height: 76px !important; gap: 5px !important; }
.zone-label { padding: 2px 10px !important; font-size: 0.62rem !important; }
.hand-total { padding: 3px 9px !important; font-size: 0.8rem !important; }
.table-divider { margin: 2px 0 !important; }
.action-btn { padding: 8px 16px !important; font-size: 0.9rem !important; border-radius: 9px !important; }
.btn-deal { padding: 10px 24px !important; font-size: 1rem !important; }

/* ── Sliders / targets ──────────────────────────────────── */
.target-display { font-size: 1.6rem !important; margin-bottom: 4px !important; }
.slider-label { margin-bottom: 4px !important; font-size: 0.72rem !important; }

/* ── Odds chips ─────────────────────────────────────────── */
.odds-row { gap: 8px !important; }
.odds-chip { padding: 6px 14px !important; border-radius: 10px !important; }
.odds-chip .val { font-size: 1.2rem !important; }
.odds-chip .label-sm { font-size: 0.64rem !important; }

/* ── Bet buttons ────────────────────────────────────────── */
.bet-btns { gap: 8px !important; }
.btn-over, .btn-under, .btn-start, .btn-cashout, .btn-launch, .btn-bet {
    padding: 12px 8px !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
}

/* ── Controls card ──────────────────────────────────────── */
.controls-card {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    gap: 8px !important;
}
.label { font-size: 0.72rem !important; margin-bottom: 4px !important; }
.bet-input, .select-input {
    font-size: 0.95rem !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
}
.quick-row { gap: 4px !important; margin-top: 5px !important; }
.quick-btn { padding: 6px 8px !important; font-size: 0.75rem !important; border-radius: 7px !important; }

/* ── Compact screens: single column controls ────────────── */
@media (max-width: 900px) {
    .controls-card { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
    .controls-card { grid-template-columns: 1fr !important; }
    .bet-btns { flex-direction: row !important; }
}

/* ── Misc game-specific containers ──────────────────────── */
.prob-cell { padding: 3px 1px !important; }
.prob-cell .pval { font-size: 0.72rem !important; }

/* ── Roulette ──────────────────────────────────────────── */
.wheel-area { width: 190px !important; height: 190px !important; }
.wheel-center { width: 34px !important; height: 34px !important; }
.bet-cell { padding: 6px 3px !important; font-size: 0.64rem !important; border-radius: 6px !important; }
.chip-count { width: 15px !important; height: 15px !important; font-size: 0.55rem !important; }
.h-num { width: 24px !important; height: 24px !important; font-size: 0.62rem !important; }

/* ── Keno ──────────────────────────────────────────────── */
.keno-grid { gap: 4px !important; }
.keno-num { font-size: 0.75rem !important; border-radius: 7px !important; }
.drawn-balls { gap: 4px !important; min-height: 30px !important; }
.ball { width: 26px !important; height: 26px !important; font-size: 0.68rem !important; }

/* ── Mines / Plinko / grids ────────────────────────────── */
.mine-cell, .peg-cell, .grid-cell, .number-cell { padding: 2px !important; }

/* ── Slots machine ─────────────────────────────────────── */
.slot-reel, .reel-cell { font-size: 0.9rem !important; }

/* ── Scratch / lucky box ───────────────────────────────── */
.scratch-cell, .box-cell { font-size: 0.9rem !important; }