/* ============================================
   CoinPlay V2 — "Royale Violet" shell
   core.css owns: design tokens, auth, lobby shell (header / wallet /
   games grid / bottom nav), game shell (.gh-bar header, game stage,
   control panel, bet bar, per-game action buttons), modal, toast,
   and BASE styles for the promo/withdraw/profile pages (pages.css
   loads after this and owns their final look).

   DO NOT rename selectors: core.js queries every id/class used here.
   ============================================ */

:root {
    /* ---- Royale Violet tokens ---- */
    --gold: #f5c451;
    --gold-bright: #ffd76a;
    --gold-deep: #b9822a;
    --violet: #8b5cf6;
    --violet-deep: #6d28d9;
    --violet-glow: rgba(139, 92, 246, 0.45);
    --emerald: #22c55e;
    --red: #ef4444;
    --text-primary: #f5f0ff;
    --text-secondary: #a79fc2;
    --text-muted: #6f6794;

    /* ---- v1 compat names (game CSS files reference these) ---- */
    --bg-primary: #0a0616;
    --bg-secondary: #150a28;
    --bg-panel: #1a0f30;
    --bg-card: #1c1233;
    --bg-hover: #2a1c4a;
    --green: #22c55e;
    --green-dark: #16a34a;
    --red-dark: #b91c1c;
    --purple: #8b5cf6;
    --purple-dark: #6d28d9;
    --cyan: #22d3ee;
    --border: rgba(245, 196, 81, 0.22);
    --card: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    --bg: #150a28;
    --text: #f5f0ff;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html { touch-action: manipulation; }

/*
 * Every tappable control must be immune to double-tap / pinch zoom.
 * `touch-action: manipulation` disables the gesture while keeping taps
 * instant (no 300ms delay); `user-select: none` stops long-press text
 * selection on labels.
 */
button,
.action-btn,
.crash-bet-btn,
.crash-cashout-btn,
.crash-amt-btn,
.crash-quick-btn,
.crash-record-more,
.crash-back-btn,
.crash-hist-close,
.wingo-ball-btn,
.wingo-color-btn,
.wingo-bs-btn,
.wingo-mult-chip,
.nav-item,
.game-card,
.mini-btn,
.auth-tab,
.dir-btn,
.choice-btn,
.risk-btn,
.preset,
.bet-btn,
.promo-tab,
.seg-pill,
.method-tab,
.pf-row,
.pf-qa,
.pf-copy {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #0a0616;
    color: var(--text-primary);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
}
/* Royale Violet page background — fixed violet-black gradient */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 0%, #241243 0%, #150a28 45%, #0a0616 100%);
}
#app-screen, #auth-screen { position: relative; z-index: 1; }

input, select, textarea {
    -webkit-user-select: text;
    user-select: text;
    font-size: 16px;
    font-family: inherit;
}

.hidden { display: none !important; }

.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; animation: screen-in 0.38s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes screen-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* ============================================================
   AUTH
   ============================================================ */
#auth-screen {
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.auth-container {
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 20px;
    padding: 32px 28px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: auth-glow 4s ease-in-out infinite;
}
@keyframes auth-glow {
    0%, 100% { box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 rgba(139,92,246,0); }
    50% { box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08), 0 0 34px rgba(139,92,246,.30); }
}

.logo-area { text-align: center; margin-bottom: 24px; }
.brand-lockup { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 8px; }
.coinfx { position: relative; display: inline-block; flex-shrink: 0; }
.coinfx img { position: absolute; inset: 0; width: 100%; height: 100%; }
.coinfx .coinfx-r { animation: coinspin 16s linear infinite; }
.brand-coin { width: 76px; height: 76px; filter: drop-shadow(0 4px 10px rgba(245,196,81,.25)); }
.balance-coin { width: 40px; height: 40px; filter: drop-shadow(0 4px 12px rgba(245,196,81,.45)); }
.brand-text { height: 54px; width: auto; }
@keyframes coinspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .coinfx .coinfx-r, .rimring::after, .avatar::before { animation: none; } }
.auth-logo {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    object-fit: cover;
    margin-bottom: 10px;
    filter: drop-shadow(0 8px 22px rgba(245,196,81,.35));
}
.logo {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    background: linear-gradient(180deg, #ffe9a8, #f5c451 55%, #c98f1f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tagline { color: var(--text-secondary); margin-top: 6px; font-size: 0.9rem; }

.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.auth-tab {
    flex: 1;
    padding: 11px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 700;
    min-height: 44px;
    transition: all 0.2s;
}
.auth-tab.active {
    background: linear-gradient(180deg, #ffd76a, #e8a91c);
    color: #2a1a00;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(245,196,81,.4);
}

.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form.hidden { display: none; }
.auth-form input {
    padding: 13px 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 10px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-form input:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(139,92,246,.25);
}

.btn-primary {
    padding: 14px;
    background: linear-gradient(180deg, #ffd76a, #e8a91c);
    border: none;
    border-radius: 16px;
    color: #2a1a00;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(245,196,81,.35), inset 0 1px 0 rgba(255,255,255,.55);
    transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.45; cursor: default; }

.btn-secondary {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(245,196,81,.22);
    color: var(--text-primary);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
}
.btn-secondary:disabled { opacity: 0.45; cursor: default; }

.btn-sm { padding: 8px 14px; font-size: 0.8rem; border-radius: 10px; white-space: nowrap; }
.btn-block { width: 100%; padding: 13px; font-size: 0.95rem; }
.btn-xs {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(245,196,81,.22);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}
.btn-xs.danger { color: #f87171; border-color: rgba(248,113,113,.4); }

.link-btn {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-error { color: var(--red); font-size: 0.85rem; margin-top: 10px; min-height: 18px; text-align: center; }
.auth-footer { color: var(--text-muted); font-size: 0.72rem; text-align: center; margin-top: 14px; }

/* ============================================================
   APP SHELL
   ============================================================ */
#app-screen {
    height: 100vh;
    height: 100dvh;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
#app-screen.active { display: flex; }

/* --- TOP BAR (promo / withdraw / profile pages) --- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(8px + var(--safe-top)) 12px 8px;
    background: rgba(21, 10, 40, 0.72);
    border-bottom: 1px solid rgba(245,196,81,.16);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    flex-shrink: 0;
    z-index: 50;
}
.topbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    min-width: 48px;
    min-height: 44px;
}
.topbar-btn:active { background: var(--bg-hover); }
.topbar-icon { font-size: 1.15rem; line-height: 1; }
.topbar-center { flex: 1; display: flex; justify-content: center; }

.balance-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(245,196,81,.35);
    border-radius: 22px;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--gold);
    white-space: nowrap;
    box-shadow: 0 0 18px rgba(245,196,81,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
.coin-icon { font-size: 1rem; }

/* ============================================================
   HOME LOBBY
   ============================================================ */
.home-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 76px; /* space for the fixed bottom nav */
}
.home-view > * { flex-shrink: 0; }

/* --- Lobby Header --- */
.lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: calc(14px + var(--safe-top)) 12px 12px;
    background:
        radial-gradient(90% 130% at 15% 0%, rgba(139,92,246,.18), transparent 55%),
        radial-gradient(70% 120% at 85% 0%, rgba(245,196,81,.12), transparent 55%);
    border-bottom: 1px solid rgba(255,255,255,.05);
    flex-shrink: 0;
}
.lobby-user { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* lion avatar: gold ring + slowly rotating violet glow ring */
.avatar {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #150b2e;
    border: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.5);
    isolation: isolate;
    flex-shrink: 0;
    overflow: visible;
}
.avatar::before {
    content: '';
    position: absolute;
    inset: -8px;
    background: url('/img/ui/logo-rim.webp') center / contain no-repeat;
    animation: coinspin 16s linear infinite;
    z-index: 2;
    pointer-events: none;
}
/* rotating coin-rim ring for profile pictures (game header, profile page) */
.rimring { position: relative; }
.rimring::after {
    content: '';
    position: absolute;
    inset: -11%;
    background: url('/img/ui/logo-rim.webp') center / contain no-repeat;
    animation: coinspin 16s linear infinite;
    pointer-events: none;
    z-index: 3;
}
.pf-ava-wrap { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
.avatar::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    box-shadow: 0 0 22px rgba(139,92,246,.55), 0 0 10px rgba(245,196,81,.35);
    z-index: -1;
}
@keyframes avatar-ring-spin { to { transform: rotate(360deg); } }
.avatar .avatar3d {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    border: 2px solid #0d0d1d;
}

.lobby-user-info { min-width: 0; }
.lobby-username {
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    max-width: 88px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* LEVEL pill: dark bronze with gold lettering — the value is LIVE (core.js) */
.lobby-level {
    margin-top: 4px;
    padding: 2px 9px;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #ffd76a;
    background: linear-gradient(180deg, #4a3512, #2a1e08);
    border: 1px solid rgba(255,199,44,.65);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,230,150,.35), 0 3px 8px rgba(0,0,0,.4);
    display: inline-block;
}

/* Bonus pill: gold gradient + 3D gift, pulses while claimable */
.lobby-bonus {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255,240,190,.7);
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: #2a1a00;
    background: linear-gradient(180deg, #ffd76a 0%, #e8a91c 55%, #c98f1f 100%);
    box-shadow: 0 6px 18px rgba(245,196,81,.4), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(120,72,0,.35);
    cursor: pointer;
    animation: bonus-pulse 2.2s ease-in-out infinite;
}
@keyframes bonus-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(245,196,81,.35), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(120,72,0,.35); }
    50% { box-shadow: 0 6px 26px rgba(255,215,106,.65), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(120,72,0,.35); }
}
.lobby-bonus:active { transform: scale(0.96); }
.lobby-bonus.bonus-done { animation: none; filter: saturate(0.35) brightness(0.8); box-shadow: 0 3px 8px rgba(0,0,0,.35); }

/* ===== Daily bonus 7-day calendar (inside the generic modal) ===== */
.bonus-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.bonus-cell {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 4px 8px;
    border-radius: 12px;
    background: rgba(139, 92, 246, .10);
    border: 1px solid rgba(139, 92, 246, .25);
    color: #a79fc2;
}
.bonus-cell-day { font-size: 0.68rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.bonus-cell-gift { width: 26px; height: 26px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.bonus-cell.done .bonus-cell-gift { filter: saturate(.35) brightness(.85); }
.bonus-cell.locked .bonus-cell-gift { filter: grayscale(.55) brightness(.65); opacity: .55; }
.bonus-cell-amt { font-size: 0.92rem; font-weight: 800; color: #f5f0ff; white-space: nowrap; }
.bonus-cell.done { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); }
.bonus-cell.done .bonus-cell-amt { color: #4ade80; }
.bonus-cell-check {
    position: absolute; top: 4px; right: 6px;
    font-size: 0.7rem; font-weight: 900; color: #4ade80;
}
.bonus-cell.today {
    background: linear-gradient(160deg, rgba(245, 196, 81, .22), rgba(245, 196, 81, .08));
    border-color: #f5c451;
    box-shadow: 0 0 0 1px rgba(245, 196, 81, .5), 0 6px 16px rgba(245, 196, 81, .25);
    animation: bonus-pulse 2.2s ease-in-out infinite;
}
.bonus-cell.today .bonus-cell-day { color: #ffd76a; }
.bonus-cell.locked { opacity: .55; }
.bonus-note { font-size: 0.82rem; line-height: 1.45; color: #a79fc2; text-align: center; margin-bottom: 14px; }
.bonus-result {
    text-align: center; font-size: 1rem; color: #f5f0ff;
    background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .4);
    border-radius: 12px; padding: 12px;
    animation: modal-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
.bonus-result b { color: #4ade80; }
.bonus-claimed-note { text-align: center; font-size: 0.8rem; color: #4ade80; margin-top: 8px; }
.lobby-bonus .bonus-gift {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* utility buttons: one uniform dark-glass circle for lang / sound / bell */
.header-toggles { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.toggle-chip {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.07);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.toggle-chip:active { transform: scale(0.9); background: rgba(255,255,255,.12); }
.toggle-chip::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 999px;
}
#header-toggles .toggle-chip, #header-toggles #notif-bell {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    background: linear-gradient(180deg, rgba(52,52,78,.95), rgba(22,22,40,.95));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 5px 12px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14);
    font-size: 1rem;
    color: #fff;
}
#header-toggles #notif-badge { top: -4px; right: -4px; border: 2px solid #14142a; }

/* --- Wallet / Balance Card --- */
.balance-card {
    margin: 8px 16px 20px;
    padding: 20px;
    border-radius: 20px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(245,196,81,.13), transparent 60%),
        radial-gradient(90% 70% at 50% 100%, rgba(139,92,246,.16), transparent 65%),
        linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.28);
    box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 32px rgba(245,196,81,.10), inset 0 1px 0 rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    text-align: center;
    flex-shrink: 0;
}
.balance-card-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.balance-logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    filter: drop-shadow(0 4px 12px rgba(245,196,81,.45));
}
.balance-card-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    letter-spacing: 2.5px;
    font-weight: 700;
}
.balance-card-value {
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin: 8px 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.balance-card-value #user-balance {
    background: linear-gradient(180deg, #ffe9a8, #f5c451 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(245,196,81,.35));
}
.balance-actions { display: flex; gap: 12px; justify-content: center; }
.btn-deposit, .btn-withdraw {
    flex: 1;
    max-width: 170px;
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-deposit:active, .btn-withdraw:active { transform: scale(0.96); }
.btn-deposit {
    background: linear-gradient(180deg, #ffd76a, #e8a91c);
    color: #2a1a00;
    border: 1px solid rgba(255,240,190,.5);
    box-shadow: 0 8px 22px rgba(245,196,81,.42), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-deposit:hover { filter: brightness(1.06); }
.btn-withdraw {
    background: rgba(255,255,255,.06);
    color: var(--text-primary);
    border: 1px solid rgba(139,92,246,.55);
    box-shadow: 0 6px 20px rgba(139,92,246,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-withdraw:hover { background: rgba(139,92,246,.12); }

/* --- Games Lobby --- */
.lobby-section { padding: 0 16px; flex-shrink: 0; }
.lobby-section-title {
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}
.games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* per-game accent tints */
.game-card.wingo    { --accent: #a855f7; }
.game-card.aviator  { --accent: #f87171; }
.game-card.highlow  { --accent: #fb923c; }
.game-card.plinko   { --accent: #22d3ee; }
.game-card.dice     { --accent: #4ade80; }
.game-card.mines    { --accent: #818cf8; }
.game-card.keno     { --accent: #f472b6; }
.game-card.roulette { --accent: #ef4444; }
.game-card.coinflip { --accent: #2dd4bf; }
.game-card.sevenup  { --accent: #4ade80; }
.game-card.dragontiger { --accent: #f43f5e; }
.game-card.color    { --accent: #f59e0b; }

.game-card {
    position: relative;
    padding: 20px 12px 16px;
    min-height: 172px;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.22);
    box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    animation: card-in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.game-card:active { transform: scale(0.96); }
.game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(110px 110px at 50% 32%, rgba(139,92,246,.28), transparent 70%),
        radial-gradient(90px 90px at 50% 30%,
            color-mix(in srgb, var(--accent, #a855f7) 30%, transparent),
            transparent 70%);
    pointer-events: none;
}
.games-grid .game-card:nth-child(2) { animation-delay: 0.06s; }
.games-grid .game-card:nth-child(3) { animation-delay: 0.12s; }
.games-grid .game-card:nth-child(4) { animation-delay: 0.18s; }
.games-grid .game-card:nth-child(5) { animation-delay: 0.24s; }
.games-grid .game-card:nth-child(6) { animation-delay: 0.30s; }
.games-grid .game-card:nth-child(7) { animation-delay: 0.36s; }
.games-grid .game-card:nth-child(8) { animation-delay: 0.42s; }
.games-grid .game-card:nth-child(9) { animation-delay: 0.48s; }
.games-grid .game-card:nth-child(10) { animation-delay: 0.54s; }
.games-grid .game-card:nth-child(11) { animation-delay: 0.60s; }
.games-grid .game-card:nth-child(12) { animation-delay: 0.66s; }
@keyframes card-in {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
    .game-card:hover {
        transform: translateY(-4px);
        border-color: rgba(245,196,81,.45);
        box-shadow: 0 18px 38px rgba(0,0,0,.55), 0 0 26px rgba(139,92,246,.28), inset 0 1px 0 rgba(255,255,255,.09);
    }
    .game-card:hover .game-card-icon3d { animation: cp-icon-float 2.6s ease-in-out infinite; }
}
@keyframes cp-icon-float {
    0%, 100% { transform: translateY(0) scale(1.06); }
    50% { transform: translateY(-6px) scale(1.06); }
}

.game-card-icon3d {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    object-fit: cover;
    position: relative;
    z-index: 1;
    image-rendering: -webkit-optimize-contrast;
    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,.55))
        drop-shadow(0 0 14px rgba(139,92,246,.35));
    transition: transform 0.25s ease;
}
.game-card-name {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.game-card-desc {
    font-size: 0.68rem;
    color: rgba(255,255,255,.55);
    position: relative;
    z-index: 1;
}
/* External game tiles — owner rule 2026-10-29 (night): SAME 2-column
   grid and SAME size as the built-in cards (first tile lands right of
   Chicken Road). Framed box holding the WHOLE image (no crop, height
   follows the image), name BELOW the box, JILI ribbon top-right.
   Built-in cards are untouched. */
.ext-game-tile {
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #fff;
    text-align: center;
}
/* Category sections (owner rule 2026-10-30, night): title + own
   3-column grid per category, View more past 6 games. */
.ext-section {
    margin-top: 20px;
}
.ext-section-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
}
.ext-game-tile.ext-hidden {
    display: none;
}
/* Tile loading state (owner, 2026-11-01): the tapped tile itself
   greys + shows a rotating spinner until the game opens. Replaces
   the global game-preloader overlay. Spinner reuses the coinspin
   keyframes already in this file. */
.ext-game-tile.tile-loading .ext-game-img { filter: grayscale(1) brightness(.55); }
.ext-game-tile.tile-loading .ext-game-name { opacity: .6; }
.ext-game-tile.tile-loading .ext-game-frame::after,
.game-card.tile-loading::after { content: ''; position: absolute; top: 50%; left: 50%;
    width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
    border: 3px solid rgba(245,196,81,.25); border-top-color: #f5c451;
    animation: coinspin .8s linear infinite; z-index: 5; }
.game-card.tile-loading .game-card-icon3d { filter: grayscale(1) brightness(.6); }
.game-card.tile-loading .game-card-name { opacity: .6; }
/* Image skeleton (owner, 2026-11-01): while a tile image loads, the
   frame shows a shimmer placeholder instead of a blank box — dark
   Royale Violet tones, not a bright grey block. Removed on img load;
   a failed image removes the frame (external) or the shimmer (Wingo). */
.ext-game-frame.skeleton { aspect-ratio: 1 / 1;
    background: linear-gradient(100deg, rgba(255,255,255,.06) 30%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 70%);
    background-size: 200% 100%; animation: skeleton-shimmer 1.4s linear infinite; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ext-game-frame.skeleton .ext-game-img { opacity: 0; }
/* Wingo tile inside Live Games: lock badge, old card jaisa. */
.ext-wingo-lock {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 1.3rem;
    filter: drop-shadow(0 2px 3px #000);
}
.ext-view-more {
    display: block;
    margin: 14px auto 0;
    padding: 8px 22px;
    background: transparent;
    border: 1px solid #d4af37;
    color: #d4af37;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.ext-game-frame {
    position: relative;
    border: 2px solid rgba(200, 200, 200, .65);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.ext-game-img {
    display: block;
    width: 100%;
    height: auto;
}
.ext-game-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background: #8e24aa;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 14px 4px 18px;
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
}
.ext-game-name {
    margin-top: 10px;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.game-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(8,10,16,.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(245,196,81,.5);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--gold-bright);
    box-shadow: 0 4px 12px rgba(0,0,0,.45), 0 0 12px rgba(245,196,81,.2);
    z-index: 2;
}

/* --- Bottom Nav --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: rgba(21,10,40,.97);
    border-top: 1px solid rgba(245,196,81,.16);
    box-shadow: 0 -10px 28px rgba(0,0,0,.5);
    padding: 8px 6px calc(8px + var(--safe-bottom));
    z-index: 300;
}
.nav-item {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 10px;
    min-height: 48px;
}
.nav-item:active { background: var(--bg-hover); }
.nav-item.active { color: var(--gold-bright); }
.nav-iconwrap { position: relative; line-height: 0; }
.nav-icon3d {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    filter: saturate(0.5) brightness(0.8);
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-item.active .nav-icon3d {
    filter: none;
    transform: scale(1.14);
    box-shadow: 0 0 16px rgba(245,196,81,.6);
}
.nav-item.active .nav-label { color: var(--gold-bright); }
.nav-label { font-size: 0.65rem; font-weight: 600; }
.nav-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #ff3b30;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #150a28;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* ============================================================
   GAME SHELL
   ============================================================ */
.game-view-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100vh;
    height: 100dvh;
}
.game-view-container.hidden { display: none; }

.game-stage {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.game-view { display: none; flex: 1; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; }
/* Pakka band: jo game khula nahi hai wo kisi bhi haal me nahi dikhega —
   per-game CSS ki koi setting ise hara nahi sakti (crash wala bug). */
.game-view:not(.active) { display: none !important; }
.game-view.active { display: flex; animation: screen-in 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both; }

/*
 * Shared game layout: the injected header pins to the top, the game's own
 * body is a centred, width-bounded scroll column.
 */
.game-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 4px 14px calc(16px + var(--safe-bottom));
}
.game-body > * {
    width: 100%;
    max-width: 360px;
    flex-shrink: 0;
}

.game-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    margin: 6px 0 18px;
    color: var(--text-primary);
}
.game-title-icon3d {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}

/* Stage — the game's main area, with a halo of its accent colour.
   Game CSS files set `--acc` on their own stage for the tint. */
.stage {
    width: 100%;
    max-width: 360px;
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 20px;
    box-shadow:
        0 12px 28px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 34px -6px var(--acc, rgba(139,92,246,.35));
    padding: 16px;
    position: relative;
    overflow: hidden;
}
.stage::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 60% at 50% 0%, var(--acc, rgba(139,92,246,.22)), transparent 65%);
    opacity: 0.5;
}

.game-result {
    margin-top: 16px;
    min-height: 24px;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    text-align: center;
}
.game-result.win { color: var(--emerald); text-shadow: 0 0 20px rgba(34,197,94,.65); animation: win-pulse 0.7s ease; }
.game-result.lose { color: var(--red); text-shadow: 0 0 20px rgba(239,68,68,.55); animation: lose-shake 0.45s ease; }
@keyframes win-pulse {
    0% { transform: scale(0.85); }
    40% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes lose-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* ============================================================
   SHARED GAME HEADER
   Injected by core.js (injectGameHeader) into every game view
   except wingo/crash which carry their own. Keep the selectors —
   the markup is generated, only this stylesheet restyles it.
   ============================================================ */
.gh-bar, .game-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 2px;
    gap: 10px;
    flex-shrink: 0;
    margin: 10px 12px 12px;
}

.gh-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.1s, background 0.2s;
}
.gh-back:active { transform: scale(0.92); background: rgba(255,255,255,.18); }
.gh-back::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
}

.gh-user { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.gh-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1a1030;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(139,92,246,.6);
    box-shadow: 0 0 12px rgba(139,92,246,.4);
    overflow: visible;
    padding: 0;
}
.gh-avatar3d {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.gh-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.gh-name span:first-child {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gh-uid {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.gh-balance { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.gh-balance-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.gh-balance-value {
    font-size: 1.25rem;
    font-weight: 900;
    background: linear-gradient(180deg, #ffe9a8, #f5c451 55%, #c98f1f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}
.gh-coin { font-size: 0.95rem; }

/* Wingo's own header avatar (self-contained view) */
.wingo-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,.28);
    box-shadow: 0 4px 12px rgba(0,0,0,.45);
}

/* ============================================================
   CONTROL PANEL + BET BAR (bottom chrome for shared games)
   ============================================================ */
.control-panel {
    display: flex;
    flex-direction: column;
    background: rgba(21,10,40,.85);
    border-top: 1px solid rgba(245,196,81,.20);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    flex-shrink: 0;
    padding: 10px 12px calc(14px + var(--safe-bottom) + var(--kb-offset, 0px));
    box-shadow: 0 -10px 28px rgba(0,0,0,.4);
    transition: padding-bottom 0.18s ease;
}
.controls-row { display: flex; order: 2; margin-top: 10px; }
.bet-bar { order: 1; }
.controls-group { display: none; width: 100%; gap: 10px; align-items: center; justify-content: center; }
.controls-group.active { display: flex; }

/* base action button — per-game accent gradients are defined below */
.action-btn {
    flex: 1;
    max-width: 220px;
    min-height: 56px;
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    cursor: pointer;
    background: rgba(255,255,255,.06);
    color: var(--text-primary);
    transition: transform 0.1s, box-shadow 0.15s, filter 0.2s;
}
.action-btn:active { transform: scale(0.96); }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.action-btn.cashout {
    background: linear-gradient(180deg, #ffd76a, #e8a91c);
    color: #2a1a00;
    border: none;
    max-width: 160px;
    box-shadow: 0 8px 22px rgba(245,196,81,.4), inset 0 1px 0 rgba(255,255,255,.5);
}

/* toggles (dice over/under, coinflip, plinko risk) */
.dir-toggle, .choice-toggle, .risk-toggle {
    display: flex;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(245,196,81,.18);
    border-radius: 12px;
    padding: 3px;
    gap: 3px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.35);
}
.dir-btn, .choice-btn, .risk-btn {
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 9px;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.15s;
}
.dir-btn.active, .choice-btn.active, .risk-btn.active {
    background: linear-gradient(180deg, #ffd76a, #e8a91c);
    color: #2a1a00;
    box-shadow: 0 4px 14px rgba(245,196,81,.45), inset 0 1px 0 rgba(255,255,255,.4);
    transform: translateY(-1px);
}

/* mines / keno extras */
.mini-input { display: flex; align-items: center; gap: 8px; }
.mini-input label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 700; }
.mini-input input {
    width: 64px;
    padding: 10px 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 10px;
    color: var(--text-primary);
    font-weight: 800;
    text-align: center;
    outline: none;
}
.mini-actions { display: flex; gap: 8px; }
.mini-action {
    padding: 10px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 10px;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    min-height: 44px;
}
.mini-action:active { background: var(--bg-hover); color: var(--text-primary); }

/* ============================================================
   PER-GAME BET BUTTONS — unique accent per game, one shape/size
   (kept from v1 — the user approved these)
   ============================================================ */
.action-btn.primary {
    min-height: 56px;
    font-size: 1.12rem;
    letter-spacing: 1.2px;
    border-radius: 16px;
    border: none;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    box-shadow: 0 10px 24px rgba(245,196,81,.35), inset 0 1px 0 rgba(255,255,255,.55);
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.action-btn.primary:hover { filter: brightness(1.1); }
.action-btn.primary:active { transform: scale(0.96); }

/* 🎲 Dice — ocean blue */
.controls-group[data-controls="dice"] .action-btn.primary {
    background: linear-gradient(135deg, #38bdf8 0%, #2563eb 60%, #1d4ed8 100%);
    box-shadow: 0 8px 26px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.controls-group[data-controls="dice"] .action-btn.primary::before { content: "🎲 "; }

/* 🪙 CoinFlip — rich gold */
.controls-group[data-controls="coinflip"] .action-btn.primary {
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 60%, #d97706 100%);
    box-shadow: 0 8px 26px rgba(245,158,11,.5), inset 0 1px 0 rgba(255,255,255,.45);
    color: #2a1800;
    text-shadow: none;
}
.controls-group[data-controls="coinflip"] .action-btn.primary::before { content: "🪙 "; }

/* 💣 Mines — emerald */
.controls-group[data-controls="mines"] .action-btn:not(.cashout) {
    background: linear-gradient(135deg, #34d399 0%, #059669 60%, #047857 100%);
    box-shadow: 0 8px 26px rgba(5,150,105,.5), inset 0 1px 0 rgba(255,255,255,.35);
    flex: 1;
    max-width: 220px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.controls-group[data-controls="mines"] .action-btn:not(.cashout)::before { content: "💣 "; }

/* 🔮 Plinko — pink/violet */
.controls-group[data-controls="plinko"] .action-btn.primary {
    background: linear-gradient(135deg, #f472b6 0%, #a855f7 60%, #7c3aed 100%);
    box-shadow: 0 8px 26px rgba(168,85,247,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.controls-group[data-controls="plinko"] .action-btn.primary::before { content: "🔮 "; }

/* 🃏 HiLo — teal wave */
.controls-group[data-controls="hilo"] .action-btn.primary {
    background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 60%, #0f766e 100%);
    box-shadow: 0 8px 26px rgba(13,148,136,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.controls-group[data-controls="hilo"] .action-btn.primary::before { content: "🃏 "; }

/* 🎱 Keno — indigo night */
.controls-group[data-controls="keno"] .action-btn.primary {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 60%, #4338ca 100%);
    box-shadow: 0 8px 26px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.controls-group[data-controls="keno"] .action-btn.primary::before { content: "🎱 "; }

/* 🎡 Roulette — casino red */
.controls-group[data-controls="roulette"] .action-btn.primary {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 60%, #991b1b 100%);
    box-shadow: 0 8px 26px rgba(220,38,38,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.controls-group[data-controls="roulette"] .action-btn.primary::before { content: "🎡 "; }

/* 🌈 Color — rainbow */
.controls-group[data-controls="color"] .action-btn.primary {
    background: linear-gradient(135deg, #f43f5e 0%, #f59e0b 50%, #22c55e 100%);
    box-shadow: 0 8px 26px rgba(245,158,11,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.controls-group[data-controls="color"] .action-btn.primary::before { content: "🌈 "; }

/* 7️⃣ 7 Up 7 Down — green */
.controls-group[data-controls="sevenup"] .action-btn.primary {
    background: linear-gradient(135deg, #16a34a, #84cc16);
    box-shadow: 0 8px 26px rgba(34,197,94,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.controls-group[data-controls="sevenup"] .action-btn.primary::before { content: "7️⃣ "; }

/* 🐉 Dragon Tiger — red/violet split */
.controls-group[data-controls="dragontiger"] .action-btn.primary {
    background: linear-gradient(90deg, #dc2626 0%, #7c3aed 50%, #2563eb 100%);
    box-shadow: 0 8px 26px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.controls-group[data-controls="dragontiger"] .action-btn.primary::before { content: "🐉 "; }

/* ===== BET BAR ===== */
/* ============ Floating +/− result digit (har game ke upar) ============ */
.float-delta {
    position: fixed;
    left: 50%;
    z-index: 400;
    pointer-events: none;
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    transform: translateX(-50%);
    animation: float-delta-anim 2s ease-out forwards;
}
.float-delta.plus { color: #22c55e; text-shadow: 0 2px 18px rgba(34,197,94,.55), 0 1px 2px rgba(0,0,0,.6); }
.float-delta.minus { color: #ef4444; text-shadow: 0 2px 18px rgba(239,68,68,.55), 0 1px 2px rgba(0,0,0,.6); }
@keyframes float-delta-anim {
    0% { opacity: 0; transform: translate(-50%, 12px) scale(0.65); }
    12% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
    22% { transform: translate(-50%, -4px) scale(1); }
    78% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -36px) scale(1); }
}

/* ===== Modern betting bar — ONE system for all 12 games (Stake-style) ===== */
.bet-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background:
        radial-gradient(120% 160% at 50% -30%, rgba(139,92,246,.20), transparent 60%),
        linear-gradient(180deg, rgba(38,24,72,.92), rgba(19,11,40,.94));
    border: 1px solid rgba(245,196,81,.38);
    border-radius: 18px;
    padding: 8px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
        0 10px 28px rgba(0,0,0,.5),
        0 0 0 1px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,233,168,.22),
        inset 0 -1px 0 rgba(0,0,0,.45);
}
.bet-main { display: flex; align-items: center; gap: 8px; width: 100%; }
.bet-btn {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(139,92,246,.30), rgba(88,52,180,.20));
    border: 1px solid rgba(167,139,250,.45);
    color: #ffd76a;
    font-size: 1.45rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 10px rgba(0,0,0,.35);
    transition: transform .08s ease, filter .12s ease;
}
.bet-btn:active { transform: scale(0.92); filter: brightness(1.3); }
.bet-amount { flex: 1; text-align: center; min-width: 0; }
.bet-amount label {
    display: block;
    font-size: 0.58rem;
    font-weight: 800;
    color: rgba(255,215,106,.75);
    text-transform: uppercase;
    letter-spacing: 2.2px;
    margin-bottom: 1px;
}
.bet-value-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.bet-value-row input {
    width: 76px;
    background: transparent;
    border: none;
    color: var(--gold-bright);
    font-size: 1.28rem;
    font-weight: 900;
    text-align: center;
    outline: none;
    text-shadow: 0 2px 10px rgba(245,196,81,.35);
}
.coin-icon-img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,233,168,.65);
    box-shadow: 0 0 10px rgba(245,196,81,.45), inset 0 0 4px rgba(0,0,0,.3);
}
.bet-presets {
    display: flex;
    gap: 0;
    background: rgba(10,6,22,.65);
    border: 1px solid rgba(245,196,81,.25);
    border-radius: 12px;
    padding: 3px;
    flex-shrink: 0;
}
.preset {
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 9px;
    color: var(--text-secondary);
    font-weight: 800;
    font-size: 0.74rem;
    cursor: pointer;
    min-height: 38px;
    transition: background .12s ease, color .12s ease, transform .08s ease;
}
.preset + .preset { border-left: 1px solid rgba(245,196,81,.12); border-radius: 0 9px 9px 0; }
.preset:first-child { border-radius: 9px 0 0 9px; }
.preset[data-preset="max"] { color: #ffd76a; }
.preset:active { background: rgba(245,196,81,.18); color: #ffe9a8; transform: scale(0.94); }

/* ============================================================
   MODAL
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(6,3,14,.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    padding: 16px;
}
.modal.hidden { display: none; }
.modal-content {
    background: linear-gradient(165deg, rgba(38,28,66,.96), rgba(20,12,38,.96));
    border: 1px solid rgba(245,196,81,.25);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 18px 48px rgba(0,0,0,.55);
    animation: modal-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
@keyframes modal-in {
    from { opacity: 0; transform: scale(0.92) translateY(10px); }
    to { opacity: 1; transform: none; }
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(245,196,81,.18);
    position: sticky;
    top: 0;
    background: rgba(38,28,66,.98);
    border-radius: 20px 20px 0 0;
}
.modal-header h3 { font-size: 1.1rem; }
.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.modal-body { padding: 20px; overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th, .data-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid rgba(245,196,81,.15); }
.data-table th { color: var(--text-secondary); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; }
.text-green { color: var(--emerald); }
.text-red { color: var(--red); }
.text-gold { color: var(--gold-bright); }

/* small info cards used inside modals (support FAQ, fairness) */
.promo-title { font-weight: 800; margin-bottom: 4px; }
.promo-desc { font-size: 0.85rem; color: var(--text-secondary); }

/* ============================================================
   TOAST
   ============================================================ */
#toast-container {
    position: fixed;
    top: calc(60px + var(--safe-top));
    right: 12px;
    left: 12px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    padding: 12px 16px;
    background: rgba(26,18,46,.92);
    border: 1px solid rgba(245,196,81,.25);
    border-left: 4px solid var(--emerald);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 10px 28px rgba(0,0,0,.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: toast-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15), toast-out 0.3s ease 2.5s forwards;
}
.toast.error { border-left-color: var(--red); }
@keyframes toast-in {
    from { transform: translateY(24px) scale(0.96); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateY(-8px); }
}

/* ============================================================
   PROMO / WITHDRAW / PROFILE — base styles.
   pages.css loads AFTER core.css and owns the final look;
   these keep every page readable even before that lands.
   ============================================================ */
.promo-view, .withdraw-view, .profile-view, .support-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
.promo-body, .withdraw-body, .profile-body, .support-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(20px + var(--safe-bottom));
}
.promo-body > *, .withdraw-body > *, .profile-body > *, .support-body > * { flex-shrink: 0; }

.promo-tabs {
    display: flex;
    gap: 4px;
    padding: 10px;
    background: rgba(21,10,40,.97);
    border-bottom: 1px solid rgba(245,196,81,.18);
    flex-shrink: 0;
}
.promo-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 2px 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 0.62rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 56px;
}
.promo-tab-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    filter: saturate(0.55) brightness(0.85);
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.promo-tab.active { color: var(--gold-bright); border-bottom-color: var(--gold); }
.promo-tab.active .promo-tab-icon { filter: none; transform: scale(1.1); box-shadow: 0 0 14px rgba(245,196,81,.5); }

.promo-pane { display: none; }
.promo-pane.active { display: block; }

.promo-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 6px 16px; }
.promo-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 22px rgba(245,196,81,.25);
    margin-bottom: 10px;
}
.promo-hero-title { font-size: 1.15rem; font-weight: 800; }
.promo-hero-desc { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; max-width: 300px; }

.promo-card {
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.promo-card-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.promo-note { font-size: 0.75rem; color: var(--text-secondary); margin-top: 8px; }

.invite-linkrow { display: flex; gap: 8px; }
.invite-link {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.78rem;
    padding: 10px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-row { display: flex; gap: 8px; }
.share-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 4px;
    border-radius: 14px;
    border: 1px solid rgba(245,196,81,.22);
    background: rgba(255,255,255,.05);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 64px;
    justify-content: center;
}
.share-btn:active { transform: scale(0.96); }
.share-ico { font-size: 1.4rem; line-height: 1; }
.share-wa { border-color: rgba(37,211,102,.4); }
.share-tg { border-color: rgba(0,136,204,.4); }
.share-ig { border-color: rgba(225,48,108,.4); }

.rate-row { display: flex; justify-content: space-between; padding: 7px 2px; font-size: 0.85rem; border-bottom: 1px dashed rgba(245,196,81,.18); }
.rate-row:last-of-type { border-bottom: none; }
.rate-row b { color: var(--gold-bright); }

.promo-list { display: flex; flex-direction: column; gap: 12px; }
.promo-loading, .promo-empty { text-align: center; color: var(--text-secondary); padding: 36px 16px; font-size: 0.85rem; }
.promo-ev-img, .promo-mis-img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
.promo-ev-title, .promo-mis-title { font-weight: 800; font-size: 0.95rem; }
.promo-ev-desc { font-size: 0.82rem; color: var(--text-secondary); margin-top: 6px; white-space: pre-line; }
.promo-ev-dates { font-size: 0.75rem; color: var(--gold-bright); margin-top: 8px; font-weight: 600; }
.promo-mis-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.promo-mis-kind {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold-bright);
    background: rgba(245,196,81,.12);
    border: 1px solid rgba(245,196,81,.35);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}
.promo-progress { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(245,196,81,.22); margin-top: 10px; overflow: hidden; }
.promo-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #e8a91c, #ffe9a8);
    box-shadow: 0 0 10px rgba(245,196,81,.6);
    transition: width 0.4s ease;
}
.promo-mis-meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-secondary); margin-top: 6px; }
.promo-reward { color: var(--gold-bright); font-weight: 800; }
.promo-mis-foot { margin-top: 10px; display: flex; justify-content: flex-end; }

.rebate-card {
    background: linear-gradient(160deg, rgba(245,196,81,.10), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.35);
    border-radius: 20px;
    padding: 22px 16px;
    text-align: center;
    box-shadow: 0 6px 26px rgba(0,0,0,.4), 0 0 24px rgba(245,196,81,.12);
}
.rebate-amount { font-size: 2rem; font-weight: 900; color: var(--gold-bright); text-shadow: 0 0 18px rgba(245,196,81,.4); }
.rebate-sub { font-size: 0.78rem; color: var(--text-secondary); margin: 6px 0 14px; }

.level-pills { display: flex; gap: 6px; margin-bottom: 10px; }
.level-pill {
    flex: 1;
    padding: 9px 0;
    border-radius: 10px;
    border: 1px solid rgba(245,196,81,.22);
    background: rgba(255,255,255,.05);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    min-height: 44px;
}
.level-pill.active {
    color: #2a1a00;
    background: linear-gradient(180deg, #ffd76a, #e8a91c);
    border-color: transparent;
    box-shadow: 0 0 14px rgba(245,196,81,.45);
}
.level-summary { display: flex; gap: 8px; margin-bottom: 12px; }
.level-stat {
    flex: 1;
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.level-stat b { font-size: 0.95rem; color: var(--gold-bright); }
.level-stat span { font-size: 0.62rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }

.member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 12px;
    padding: 10px 12px;
}
.member-name { font-weight: 700; font-size: 0.85rem; }
.member-sub { font-size: 0.7rem; color: var(--text-secondary); margin-top: 2px; }
.member-side { text-align: right; }
.member-badge { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; }
.member-badge.on { color: #4ade80; background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.4); }
.member-badge.off { color: var(--text-secondary); background: rgba(128,128,128,.12); border: 1px solid rgba(245,196,81,.22); }
.member-badge.wait { color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.4); }
.member-badge.bad { color: #f87171; background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4); }
.member-earn { font-size: 0.75rem; color: var(--gold-bright); font-weight: 700; margin-top: 3px; }

/* --- withdraw base --- */
.wd-balance-card {
    background: linear-gradient(160deg, rgba(245,196,81,.12), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.35);
    border-radius: 20px;
    padding: 18px 16px;
    text-align: center;
    margin-bottom: 12px;
    box-shadow: 0 6px 26px rgba(0,0,0,.4);
}
.wd-balance-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.wd-balance-amount {
    font-size: 1.9rem;
    font-weight: 900;
    background: linear-gradient(180deg, #ffe9a8, #f5c451 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 4px;
}
.wd-form-row { display: flex; gap: 8px; margin-bottom: 8px; }
.wd-input {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 11px 12px;
    font-family: inherit;
}
.wd-input:focus { outline: none; border-color: var(--gold); }
select.wd-input { flex: 1.4; }
select.wd-input option { background: #1c1233; color: var(--text-primary); }
.wd-form-grid { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.wd-form-title { font-size: 0.85rem; font-weight: 800; margin-top: 14px; }
.wd-form-actions { display: flex; gap: 8px; align-items: center; }
.wd-form-actions .btn-primary { flex: 1; padding: 12px; }
.seg-pills { display: flex; gap: 6px; margin-bottom: 12px; }
.seg-pill {
    flex: 1;
    padding: 9px 0;
    border-radius: 10px;
    border: 1px solid rgba(245,196,81,.22);
    background: rgba(255,255,255,.05);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    min-height: 44px;
}
.seg-pill.active {
    color: #2a1a00;
    background: linear-gradient(180deg, #ffd76a, #e8a91c);
    border-color: transparent;
    box-shadow: 0 0 14px rgba(245,196,81,.45);
}
.method-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.method-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 4px;
    border-radius: 14px;
    border: 1px solid rgba(245,196,81,.22);
    background: rgba(255,255,255,.05);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
    min-height: 64px;
}
.method-tab img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    filter: saturate(0.55) brightness(0.85);
    transition: filter 0.2s ease, transform 0.2s ease;
}
.method-tab.active { color: var(--gold-bright); border-color: rgba(245,196,81,.5); }
.method-tab.active img { filter: none; transform: scale(1.08); }
.wd-micon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }

/* --- profile base --- */
.profile-body { display: flex; flex-direction: column; gap: 12px; }
.pf-head {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.pf-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(245,196,81,.5);
    box-shadow: 0 0 16px rgba(245,196,81,.25);
    flex-shrink: 0;
    object-fit: cover;
}
.pf-idcol { flex: 1; min-width: 0; }
.pf-name-row { display: flex; align-items: center; gap: 6px; }
.pf-name { font-weight: 800; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-id-row { font-size: 0.75rem; color: var(--text-secondary); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.pf-copy { background: none; border: none; cursor: pointer; font-size: 0.8rem; padding: 6px; opacity: 0.7; min-width: 36px; min-height: 36px; }
.pf-copy:active { opacity: 1; transform: scale(1.15); }
.pf-bal { text-align: right; flex-shrink: 0; }
.pf-bal-val { font-size: 1.15rem; font-weight: 900; color: var(--gold-bright); }
.pf-bal-label { font-size: 0.62rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.pf-quick { display: flex; gap: 8px; }
.pf-qa {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}
.pf-qa:active { transform: scale(0.95); }
.pf-qa img { width: 42px; height: 42px; border-radius: 12px; }
.pf-vip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #f5b301 0%, #e09b00 60%, #c98500 100%);
    border-radius: 20px;
    padding: 14px;
    color: #1a1200;
    box-shadow: 0 6px 24px rgba(245,179,1,.25);
}
.pf-vip-icon { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 14px rgba(0,0,0,.3); }
.pf-vip-main { flex: 1; min-width: 0; }
.pf-vip-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pf-vip-level { font-size: 1.3rem; font-weight: 900; }
.pf-vip-next { font-size: 0.72rem; font-weight: 700; }
.pf-vip .promo-progress { background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.2); }
.pf-vip .promo-progress-fill { background: linear-gradient(90deg, #fff8e1, #ffffff); box-shadow: none; }
.pf-vip-sub { font-size: 0.7rem; font-weight: 600; margin-top: 5px; opacity: 0.85; }
.pf-vip .btn-primary { background: #1a1200; color: #ffd54f; border: none; flex-shrink: 0; box-shadow: none; }
.pf-menu {
    background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(245,196,81,.22);
    border-radius: 20px;
    overflow: hidden;
}
.pf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(245,196,81,.14);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    min-height: 56px;
}
.pf-row:last-child { border-bottom: none; }
.pf-row:active { background: var(--bg-hover); }
.pf-ico {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: rgba(245,196,81,.10);
    border: 1px solid rgba(245,196,81,.25);
    border-radius: 10px;
    flex-shrink: 0;
}
.pf-row > span:nth-child(2) { flex: 1; }
.pf-hint { font-size: 0.75rem; color: var(--text-secondary); }
.pf-arrow { color: var(--text-secondary); font-size: 1.2rem; }
.pf-danger { color: #f87171; }
.pf-danger .pf-ico { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }

/* ============================================================
   DESKTOP + SMALL PHONES
   ============================================================ */
@media (min-width: 769px) {
    body { overflow: auto; }
    #app-screen { max-width: 480px; margin: 0 auto; border-left: 1px solid rgba(245,196,81,.18); border-right: 1px solid rgba(245,196,81,.18); }
    .home-view, .game-view-container { max-width: 480px; margin: 0 auto; }
    .bottom-nav { max-width: 480px; left: 50%; transform: translateX(-50%); }
    .promo-view, .withdraw-view, .profile-view, .support-view { max-width: 480px; margin: 0 auto; border-left: 1px solid rgba(245,196,81,.18); border-right: 1px solid rgba(245,196,81,.18); }
    .promo-tabs { max-width: 480px; margin: 0 auto; left: 0; right: 0; }
}

@media (max-width: 420px) {
    .lobby-header { gap: 6px; padding-left: 10px; padding-right: 10px; }
    .avatar { width: 46px; height: 46px; }
    .lobby-username { max-width: 74px; font-size: 1rem; }
    .lobby-level { padding: 2px 9px; font-size: 0.64rem; }
    .lobby-bonus { padding: 8px 12px; min-height: 42px; font-size: 0.86rem; }
    .lobby-bonus .bonus-gift { width: 20px; height: 20px; }
    #header-toggles .toggle-chip, #header-toggles #notif-bell { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
    .header-toggles { gap: 4px; }
    .game-card { padding: 16px 10px 14px; min-height: 156px; }
    .game-card-icon3d { width: 66px; height: 66px; }
    .game-card-name { font-size: 0.98rem; }
    .balance-card-value { font-size: 2.2rem; }
}

/* ---- Reduced motion: disable all animation ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   APP LOCKS + SMALL-DEVICE FIT (added with the modern bet bar)
   - images cannot be long-pressed / right-clicked / dragged out
   - no tap highlight flash, no overscroll bounce to the browser
   - <=340px phones: bar + header shrink so nothing ever clips
   ============================================================ */
img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
body { -webkit-touch-callout: none; }
html, body { overscroll-behavior: none; }
button, .game-card, .nav-item { -webkit-tap-highlight-color: transparent; }

@media (max-width: 340px) {
    .bet-bar { gap: 6px; padding: 7px 6px; }
    .bet-btn { width: 38px; height: 38px; font-size: 1.25rem; }
    .bet-value-row input { width: 54px; font-size: 1.08rem; }
    .coin-icon-img { width: 21px; height: 21px; }
    .preset { padding: 7px 7px; font-size: 0.67rem; min-height: 34px; }
    .lobby-bonus span { display: none; }
    .lobby-bonus { padding: 8px 10px; }
    .game-card-name { font-size: 0.92rem; }
}

/* ============================================================
   QUICK AMOUNT CHIPS — in the button area, above the bet bar.
   Gold chips set the amount (10/100/1000/10000); violet chips
   multiply it (3x/10x/15x/20x). One row, scrolls sideways.
   ============================================================ */
.quick-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(245,196,81,.16);
}
.qrow { display: flex; gap: 6px; }
.qchip {
    flex: 1;
    min-width: 0;
    text-align: center;
    height: 31px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(245,196,81,.16), rgba(245,196,81,.06));
    border: 1px solid rgba(245,196,81,.45);
    color: #ffd76a;
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,233,168,.25);
    transition: transform .08s ease, background .12s ease;
}
.qchip.mult {
    background: linear-gradient(180deg, rgba(139,92,246,.22), rgba(139,92,246,.08));
    border-color: rgba(167,139,250,.5);
    color: #cdbffa;
}
.qchip:active { transform: scale(0.92); background: rgba(245,196,81,.35); color: #ffe9a8; }
.qchip.mult:active { background: rgba(139,92,246,.4); color: #fff; }

/* Short screens: compact the whole stack so stages keep their fit */
@media (max-height: 720px) {
    .qchip { height: 25px; padding: 0 3px; font-size: 0.72rem; }
    .quick-chips { margin-top: 5px; padding-top: 5px; gap: 5px; }
    .qrow { gap: 5px; }
    .game-title, .rv-title { display: none !important; }
    .action-btn { min-height: 48px; }
    .bet-bar { padding: 5px; }
    .bet-btn { width: 40px; height: 40px; }
    .preset { min-height: 33px; }
    .controls-row { margin-top: 8px; }
    .control-panel { padding-top: 8px; }
    .gh-bar, .game-head { margin: 6px 12px 6px; padding: 4px 2px; }
    .game-body { padding-top: 2px; padding-bottom: 10px; }
    .game-title { margin: 4px 0 8px; }
}

/* Roulette: wheel aur table ki unchai screen ki unchai ke hisaab se
   apne aap adjust hoti hai — har phone par pura bina scroll dikhe */
#game-roulette .roulette-wheel-wrap, #game-roulette .roulette-wheel { width: clamp(126px, 21dvh, 232px); height: clamp(126px, 21dvh, 232px); }
#game-roulette .roulette-grid { grid-auto-rows: clamp(30px, 4.6dvh, 46px); }
#game-roulette .roulette-outside .roulette-cell { height: clamp(27px, 4.2dvh, 38px); }
#game-roulette .roulette-stage { padding: 12px 10px 8px; margin-bottom: 5px; }
#game-roulette .roulette-table { padding: 8px; }
#game-roulette .roulette-display { margin-bottom: 8px; }

/* Darmiyani unchai (zyadatar aaj ke phone): Roulette bina scroll fit */
@media (max-height: 860px) {
    #game-roulette .roulette-display { margin-bottom: 5px; }
    #game-roulette .roulette-stage { padding: 10px 10px 6px; margin-bottom: 6px; }
    #game-roulette .roulette-table { padding: 6px; }
    #game-roulette .roulette-grid { grid-auto-rows: 37px; }
    #game-roulette .roulette-selected-row { min-height: 24px; margin: 2px 0 0; }
    #game-roulette .game-body { padding-top: 6px; padding-bottom: 6px; }
}
/* Chhoti-darmiyani unchai (~780 tak): ek step aur kaseli */
@media (max-height: 800px) {
    #game-roulette .roulette-wheel-wrap, #game-roulette .roulette-wheel { width: 148px; height: 148px; }
    #game-roulette .roulette-grid { grid-auto-rows: 31px; }
    #game-roulette .roulette-outside .roulette-cell { height: 28px; }
    #game-roulette .roulette-stage { padding: 8px 10px 4px; }
    #game-roulette .roulette-display { margin-bottom: 4px; }
    #game-roulette .roulette-selected-row { min-height: 22px; }
}
/* Short screens: Roulette pura bina scroll dikhe — wheel chhota, table
   kaseli, khaali jagah kam (user: free space use karo / chhota karke fit) */
@media (max-height: 720px) {
    #game-roulette .roulette-stage { padding: 8px 10px 4px; margin-bottom: 4px; }
    #game-roulette .roulette-table { padding: 6px; }
    #game-roulette .roulette-grid { gap: 3px; }
    #game-roulette .roulette-outside { gap: 3px; margin-top: 3px; }
    #game-roulette .roulette-selected-row { min-height: 22px; margin: 2px 0 0; }
    #game-roulette .game-result { margin-top: 2px; }
    #game-roulette .roulette-rail .roulette-history-item { width: 24px; height: 24px; font-size: 0.7rem; }
}
/* Aur bhi chhoti screen (purane chhote phone) — ek step aur kaseli */
@media (max-height: 660px) {
    #game-roulette .roulette-wheel-wrap, #game-roulette .roulette-wheel { width: 126px; height: 126px; }
    #game-roulette .roulette-grid { grid-auto-rows: 30px; }
    #game-roulette .roulette-outside .roulette-cell { height: 27px; }
}

/* ===== Email verification banner (lobby, soft gate) ===== */
.verify-banner {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 16px 0; padding: 10px 12px;
    background: linear-gradient(135deg, rgba(245, 196, 81, .16), rgba(245, 196, 81, .07));
    border: 1px solid rgba(245, 196, 81, .35);
    border-radius: 14px;
    touch-action: manipulation;
}
.verify-banner[hidden] { display: none; }
.verify-banner-icon { font-size: 18px; flex-shrink: 0; }
.verify-banner-text { flex: 1; font-size: 13px; line-height: 1.35; color: #f5f0ff; }
.verify-banner-btn {
    flex-shrink: 0; border: none; cursor: pointer;
    background: linear-gradient(180deg, #ffd76a, #f5c451 55%, #b9822a);
    color: #2a1a00; font-weight: 700; font-size: 12.5px;
    padding: 8px 12px; border-radius: 10px; min-height: 34px;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.verify-banner-btn:disabled { opacity: .55; }
.verify-banner-close {
    flex-shrink: 0; border: none; background: transparent; cursor: pointer;
    color: #a79fc2; font-size: 14px; padding: 6px 4px; min-height: 34px;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/* Wingo deposit-lock badge (2026-10-18) */
.game-card-lock {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(8, 10, 16, .72);
    border: 1px solid rgba(255, 255, 255, .35);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    z-index: 2;
}
.game-card.locked .game-card-icon3d { filter: grayscale(.7) brightness(.7); }

/* Built-in games, same look as the external tiles — owner rule
   2026-10-29 (night): framed FULL image box, name below the box.
   The #main-games-grid prefix beats the older .game-card rules and
   the small-phone media queries. Multiplier badge (corner pill) and
   the small description under the name are kept, so no info is lost;
   only the card chrome (gradient, glow, small centred icon) goes. */
#main-games-grid .game-card {
    padding: 0;
    min-height: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 0;
    justify-content: flex-start;
}
#main-games-grid .game-card::before { display: none; }
#main-games-grid .game-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: none;
}
#main-games-grid .game-card:hover .game-card-icon3d { animation: none; }
#main-games-grid .game-card-icon3d {
    width: 100%;
    height: auto;
    display: block;
    flex: none;
    border-radius: 10px;
    border: 2px solid rgba(200, 200, 200, .65);
    object-fit: cover;
    filter: none;
}
#main-games-grid .game-card.locked .game-card-icon3d {
    filter: grayscale(.7) brightness(.7);
}
#main-games-grid .game-card-name { margin-top: 10px; font-size: 0.92rem; }
/* 3-column grid: external tile names match the built-in name size so
   long names wrap the same way in the narrower columns. */
.ext-game-name { font-size: 0.92rem; }

/* Uniform tiles — owner rule 2026-10-30 (night): EVERY game, built-in
   or external, same size, example jaisa. Wajah: dono images height:auto
   par chal rahi thi, to jis image ka natural aspect alag tha uska tile
   chhota/bada ho jata tha. Fix: image box hamesha SQUARE
   (aspect-ratio 1/1) + COVER — image frame ko poora bharti hai, jaise
   ref image me hai. v67 me contain try kiya tha, par usse portrait
   images ke aas-paas kaali patti aati thi, to pehli column ki
   full-fill image baaki do se BADI lagti thi — outer box barabar tha,
   farak sirf fill ka tha. Cover me image ka kinara kat sakta hai
   (ref me bhi kata hai), par har box ek jaisa bhara hua dikhega.
   Naam ref jaisa: bold NAHI, halka weight, bina shadow. Naam ki
   jagah 2 line ke liye fixed hai, taaki 1-line aur 2-line naam wale
   cards bhi ek jaisi height rakhen; desc 1 line me (ellipsis) taaki
   wo bhi height na badhaye. Badge + desc rakhe hain. */
#main-games-grid .game-card-icon3d,
.ext-game-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
#main-games-grid .game-card-name,
.ext-game-name {
    /* v66: naam chhota (0.85rem) + FIXED height + vertically centred —
       1-line naam upar aur 2-line naam neeche nahi dikhega, dono
       ek hi box me centre me rahenge. Yehi screenshot wali upar-neeche
       wali dikkat ka doosra hissa tha: min-height sirf box barabar
       karta tha, naam phir bhi top par chipka rehta tha. */
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: normal;
    text-shadow: none;
    line-height: 1.2;
    height: 2.4em;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#main-games-grid .game-card-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    min-height: 1.2em;
}
.games-grid { align-items: start; }