/* ═══════════════════════════════════════════════════════════════
   CINE88 Casino — Premium Dark/Light Theme
   v4 — Auto Day/Night theme switching
   ═══════════════════════════════════════════════════════════════ */

/* ═══ DARK THEME (Default / Night: 18:00 - 06:00) ═══════════ */
:root {
    --bg-body: #0a0a0f;
    --bg-header: #12121a;
    --bg-topbar: #0e0e14;
    --bg-card: #16161f;
    --bg-card-hover: #1e1e2a;
    --bg-input: #1e1e28;
    --bg-popover: #1e1e2a;
    --bg-tab: #1a1a24;
    --border: #252530;
    --border-light: #35354a;
    --text-primary: #f3f5f7;
    --text-secondary: #a8acb0;
    --text-muted: #6b7280;
    --text-dark: #1a1a1a;
    --primary: #e60012;
    --primary-hover: #c00010;
    --primary-light: rgba(230,0,18,0.12);
    --green: #10b981;
    --red: #ef4444;
    --yellow: #f59e0b;
    --gold: #fbbf24;
    --gold-dark: #d4a017;
    --glow-gold: rgba(251,191,36,0.25);
    --glow-red: rgba(230,0,18,0.2);
    --shadow-card: 0 2px 8px rgba(0,0,0,.2);
    --shadow-card-hover: 0 12px 36px rgba(0,0,0,.5);
    --shadow-dropdown: 0 20px 60px rgba(0,0,0,0.7);
    --overlay-bg: rgba(0,0,0,0.75);
    --modal-bg: linear-gradient(160deg,#16161f 0%,#1a1a28 100%);
    --footer-bg: linear-gradient(180deg,#12121a,#0a0a10);
    --nav-bg: linear-gradient(180deg,rgba(14,14,20,.97),rgba(10,10,15,.99));
    --topbar-grad: linear-gradient(180deg,#0e0e14 0%,rgba(14,14,20,.95) 100%);
    --header-grad: linear-gradient(180deg,#14141e 0%,#0e0e16 100%);
    --game-card-bg: linear-gradient(160deg,#1e1e30,#14142a);
    --gc-thumb-bg: linear-gradient(135deg,#1a1a30 0%,#252540 50%,#1a1a30 100%);
    --scrollbar-thumb: #333;
    --winner-bg: linear-gradient(135deg,#16161f,rgba(30,30,42,.8));
    --badge-bg: rgba(255,255,255,0.06);
    --table-hover: rgba(255,255,255,0.02);
    --table-head: rgba(255,255,255,0.02);
    --border-topbar: rgba(255,255,255,0.04);
    --border-nav-top: rgba(255,255,255,0.06);
    --cat-card-bg: linear-gradient(160deg,#16161f 0%,rgba(30,30,42,.6) 100%);
    --cat-card-mobile-bg: linear-gradient(160deg,rgba(22,22,31,.9),rgba(30,30,42,.6));
    --jackpot-nohu-bg: linear-gradient(135deg,#1a0a00 0%,#3a1a00 40%,#6b3410 100%);
    --jackpot-daga-bg: linear-gradient(135deg,#0a1a0a 0%,#1a3a1a 100%);
    --jackpot-bar-bg: linear-gradient(135deg,#1a0f2e 0%,#0d0e12 100%);
    --info-box-bg: rgba(230,0,18,0.04);
    --info-box-border: rgba(230,0,18,0.1);
    --topbar-h: 50px;
    --header-h: 44px;
    --total-h: 94px;
    --nav-h: 60px;
    --max-w: 1280px;
    --radius: 10px;
    --radius-lg: 14px;
}

/* ═══ LIGHT THEME (Day: 06:00 - 18:00) ══════════════════════ */
html.light-theme {
    --bg-body: #f0f2f5;
    --bg-header: #ffffff;
    --bg-topbar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9fa;
    --bg-input: #f5f6f8;
    --bg-popover: #ffffff;
    --bg-tab: #eef0f3;
    --border: #e0e3e8;
    --border-light: #d0d4db;
    --text-primary: #1a1d24;
    --text-secondary: #5a6070;
    --text-muted: #8c919d;
    --text-dark: #1a1a1a;
    --primary: #d4000f;
    --primary-hover: #b5000d;
    --primary-light: rgba(212,0,15,0.08);
    --green: #059669;
    --red: #dc2626;
    --yellow: #d97706;
    --gold: #b8860b;
    --gold-dark: #8b6508;
    --glow-gold: rgba(184,134,11,0.15);
    --glow-red: rgba(212,0,15,0.12);
    --shadow-card: 0 1px 4px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.04);
    --shadow-card-hover: 0 8px 30px rgba(0,0,0,.1);
    --shadow-dropdown: 0 10px 40px rgba(0,0,0,0.12);
    --overlay-bg: rgba(0,0,0,0.4);
    --modal-bg: linear-gradient(160deg,#ffffff 0%,#f8f9fb 100%);
    --footer-bg: linear-gradient(180deg,#f8f9fb,#eef0f3);
    --nav-bg: linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,249,251,.99));
    --topbar-grad: linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,.97) 100%);
    --header-grad: linear-gradient(180deg,#ffffff 0%,#f8f9fb 100%);
    --game-card-bg: linear-gradient(160deg,#ffffff,#f5f7fa);
    --gc-thumb-bg: linear-gradient(135deg,#e8ecf2 0%,#dde2ea 50%,#e8ecf2 100%);
    --scrollbar-thumb: #c8ccd2;
    --winner-bg: linear-gradient(135deg,#ffffff,#f5f7fa);
    --badge-bg: rgba(0,0,0,0.04);
    --table-hover: rgba(0,0,0,0.02);
    --table-head: rgba(0,0,0,0.02);
    --border-topbar: rgba(0,0,0,0.06);
    --border-nav-top: rgba(0,0,0,0.06);
    --cat-card-bg: linear-gradient(160deg,#ffffff 0%,#f5f7fa 100%);
    --cat-card-mobile-bg: linear-gradient(160deg,rgba(255,255,255,.95),#f5f7fa);
    --jackpot-nohu-bg: linear-gradient(135deg,#fff8f0 0%,#fff0e0 40%,#ffe8d0 100%);
    --jackpot-daga-bg: linear-gradient(135deg,#f0fff0 0%,#e0ffe0 100%);
    --jackpot-bar-bg: linear-gradient(135deg,#f5f0ff 0%,#eef0f8 100%);
    --info-box-bg: rgba(212,0,15,0.04);
    --info-box-border: rgba(212,0,15,0.1);
}

/* ═══ LIGHT THEME OVERRIDES ══════════════════════════════════ */
html.light-theme body {
    -webkit-font-smoothing:auto;
}
html.light-theme ::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); }

html.light-theme .logo-text {
    background:linear-gradient(135deg,#d4000f 0%,#a5000c 50%,#d4000f 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 3px rgba(212,0,15,0.2));
}

html.light-theme .top-bar {
    box-shadow:0 1px 8px rgba(0,0,0,.06);
}
html.light-theme .header {
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

html.light-theme .search-box {
    background:#f0f2f5; border-color:#dde0e6;
}
html.light-theme .search-box input { color:var(--text-primary); }
html.light-theme .top-pass-input {
    background:#f0f2f5; border-color:#dde0e6; color:var(--text-primary);
}

html.light-theme .header-balance {
    background:linear-gradient(135deg,rgba(184,134,11,.06),rgba(184,134,11,.02));
    border-color:rgba(184,134,11,.15);
    color:var(--gold);
}

html.light-theme .header-user {
    background:rgba(0,0,0,0.03);
}
html.light-theme .header-user:hover { background:rgba(0,0,0,0.06); }

html.light-theme .user-dropdown {
    box-shadow:var(--shadow-dropdown); border-color:var(--border);
}
html.light-theme .user-dropdown a:hover {
    background:rgba(0,0,0,0.04);
}

html.light-theme .nav-item:hover { color:var(--text-primary); }
html.light-theme .nav-item.active { color:var(--primary); border-bottom-color:var(--primary); }

html.light-theme .cat-tab { background:var(--bg-tab); color:var(--text-secondary); }
html.light-theme .cat-tab:hover { background:rgba(0,0,0,0.05); color:var(--text-primary); }
html.light-theme .cat-tab.active {
    color:#fff; background:linear-gradient(135deg,var(--primary),#b5000d);
    box-shadow:0 2px 10px var(--glow-red);
}

html.light-theme .btn-ghost {
    background:rgba(0,0,0,0.04); color:var(--text-secondary); border-color:var(--border);
}
html.light-theme .btn-ghost:hover { background:rgba(0,0,0,0.08); color:var(--text-primary); }

html.light-theme .btn-register-gold {
    background:linear-gradient(135deg,#d4a017,#b8860b,#d4a017);
    background-size:200% 100%;
    color:#fff; font-weight:800;
}
html.light-theme .btn-login-red {
    background:linear-gradient(135deg,#d4000f,#a5000c);
    color:#fff;
}

html.light-theme .banner-slide::before {
    background:radial-gradient(circle at 30% 50%, rgba(212,0,15,.05) 0%, transparent 60%);
}
html.light-theme .banner-text h1 {
    color:var(--text-primary);
    text-shadow:0 1px 8px rgba(0,0,0,.08);
}
html.light-theme .banner-text p {
    color:var(--text-secondary);
}

html.light-theme .dot { background:rgba(0,0,0,0.15); }
html.light-theme .dot.active { background:var(--primary); box-shadow:0 0 8px var(--glow-red); }

html.light-theme .winner-item {
    background:var(--winner-bg); border-color:var(--border);
    box-shadow:var(--shadow-card);
}
html.light-theme .winner-item:hover { border-color:var(--gold); }
html.light-theme .w-amount { text-shadow:none; }

html.light-theme .cat-card {
    background:var(--cat-card-bg);
    box-shadow:var(--shadow-card);
}
html.light-theme .cat-card:hover {
    box-shadow:var(--shadow-card-hover);
}

html.light-theme .game-card {
    background:var(--game-card-bg);
    box-shadow:var(--shadow-card);
}
html.light-theme .game-card:hover {
    box-shadow:var(--shadow-card-hover);
}
html.light-theme .game-card .g-name {
    background:linear-gradient(transparent,rgba(255,255,255,0.95));
    color:var(--text-primary);
}

html.light-theme .game-card-home {
    background:var(--bg-card);
    box-shadow:var(--shadow-card);
}
html.light-theme .game-card-home:hover {
    box-shadow:var(--shadow-card-hover);
}
html.light-theme .gc-thumb {
    background:var(--gc-thumb-bg);
}
html.light-theme .gc-name {
    background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.95));
    color:var(--text-primary);
}

html.light-theme .live-thumb {
    box-shadow:var(--shadow-card);
}
html.light-theme .live-info {
    background:linear-gradient(transparent,rgba(0,0,0,0.7));
    color:#fff;
}

html.light-theme .promo-card {
    background:var(--bg-card); border-color:var(--border);
    box-shadow:var(--shadow-card);
}
html.light-theme .promo-card:hover {
    box-shadow:var(--shadow-card-hover);
}

html.light-theme .jackpot-nohu { background:var(--jackpot-nohu-bg); border-color:rgba(184,134,11,.15); }
html.light-theme .jackpot-daga { background:var(--jackpot-daga-bg); border-color:rgba(5,150,105,.15); }
html.light-theme .jp-amount { text-shadow:0 0 12px var(--glow-gold); }

html.light-theme .jackpot-bar {
    background:var(--jackpot-bar-bg);
    border-color:rgba(139,92,246,.1);
}

html.light-theme .provider-card {
    box-shadow:var(--shadow-card);
}

html.light-theme .modal-overlay { background:var(--overlay-bg); }
html.light-theme .modal-box {
    background:var(--modal-bg);
    border-color:var(--border);
    box-shadow:0 20px 60px rgba(0,0,0,.15);
}
html.light-theme .modal-logo span {
    background:linear-gradient(135deg,#d4000f,#a5000c);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 4px rgba(212,0,15,.15));
}

html.light-theme .form-control {
    background:var(--bg-input); border-color:var(--border); color:var(--text-primary);
}
html.light-theme .form-control:focus {
    border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light);
}

html.light-theme .card {
    background:var(--bg-card); border-color:var(--border);
    box-shadow:var(--shadow-card);
}

html.light-theme .stat-card {
    box-shadow:var(--shadow-card);
}

html.light-theme .info-box {
    background:var(--info-box-bg); border-color:var(--info-box-border);
}
html.light-theme .copy-field {
    background:var(--bg-input); border-color:var(--border);
}
html.light-theme .copy-field input { color:var(--primary); }

html.light-theme .alert-error { background:rgba(220,38,38,0.06); border-color:rgba(220,38,38,0.12); }
html.light-theme .alert-success { background:rgba(5,150,105,0.06); border-color:rgba(5,150,105,0.12); }

html.light-theme thead { background:var(--table-head); }
html.light-theme tr:hover td { background:var(--table-hover); }

html.light-theme .badge-pending { background:rgba(217,119,6,0.08); }
html.light-theme .badge-approved,.badge-completed { background:rgba(5,150,105,0.06); }

html.light-theme .float-btn {
    background:rgba(255,255,255,0.92); border-color:var(--border);
    color:var(--text-secondary);
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}
html.light-theme .float-btn:hover {
    background:var(--primary); color:#fff; border-color:var(--primary);
}
html.light-theme .float-btn-highlight {
    background:var(--primary); color:#fff; border-color:var(--primary);
}

html.light-theme .footer {
    background:var(--footer-bg);
    border-top-color:var(--border);
}
html.light-theme .footer-top .f-logo {
    background:linear-gradient(135deg,#d4000f,#a5000c);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}


html.light-theme .auth-box {
    box-shadow:0 10px 40px rgba(0,0,0,.08);
}
html.light-theme .auth-box .auth-logo span {
    background:linear-gradient(135deg,#d4000f,#a5000c);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

html.light-theme .q-item {
    box-shadow:var(--shadow-card);
}

html.light-theme .daga-prov {
    background:rgba(0,0,0,0.04); border-color:var(--border);
}

html.light-theme .prov-logo-item {
    box-shadow:var(--shadow-card);
}

/* ═══ THEME TOGGLE BUTTON ════════════════════════════════════ */
.theme-toggle {
    position:fixed; bottom:80px; right:14px; z-index:1400;
    width:44px; height:44px; border-radius:50%;
    background:var(--bg-card); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .3s;
    box-shadow:0 2px 12px rgba(0,0,0,.15);
    font-size:20px; line-height:1;
}
.theme-toggle:hover { transform:scale(1.1); border-color:var(--gold); }
@media(max-width:768px) {
    .theme-toggle { bottom:calc(var(--nav-h) + 14px); right:10px; width:40px; height:40px; font-size:18px; }
}

/* ═══ THEME TRANSITION ═══════════════════════════════════════ */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition:background .4s ease, background-color .4s ease, border-color .4s ease, color .3s ease, box-shadow .4s ease, filter .3s ease !important;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:var(--bg-body);
    color:var(--text-primary);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
button { font-family:inherit; cursor:pointer; border:none; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:2px; }
.text-gold { color:var(--gold); }

/* ═══ GLOBAL ANIMATIONS ══════════════════════════════════════ */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInScale { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes glow { 0%,100%{box-shadow:0 0 5px var(--glow-gold)} 50%{box-shadow:0 0 20px var(--glow-gold),0 0 40px rgba(251,191,36,0.1)} }
@keyframes rotateGlow { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes pulseBtn { 0%,100%{box-shadow:0 0 0 0 rgba(230,0,18,0.5)} 50%{box-shadow:0 0 0 10px rgba(230,0,18,0)} }
@keyframes borderGlow { 0%,100%{border-color:rgba(251,191,36,.2)} 50%{border-color:rgba(251,191,36,.5)} }
@keyframes sparkle { 0%,100%{opacity:0;transform:scale(0)} 50%{opacity:1;transform:scale(1)} }

/* ═══ TOP BAR ═════════════════════════════════════════════════ */
.top-bar {
    position:fixed; top:0; left:0; right:0;
    height:var(--topbar-h);
    background:var(--topbar-grad);
    border-bottom:1px solid var(--border-topbar);
    backdrop-filter:blur(20px);
    z-index:1200;
}
.top-bar-inner {
    display:flex; align-items:center; height:100%; gap:12px;
    max-width:var(--max-w); margin:0 auto; padding:0 16px;
}
.header-logo { display:flex; align-items:center; flex-shrink:0; margin-right:16px; }
.logo-text {
    font-family:'Oxanium',sans-serif;
    font-size:24px; font-weight:800;
    background:linear-gradient(135deg,#ff4444 0%,#e60012 50%,#ff6b35 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    letter-spacing:1px;
    filter:drop-shadow(0 0 8px rgba(230,0,18,0.3));
}
.top-bar-right {
    display:flex; align-items:center; gap:8px; margin-left:auto;
}
.top-link {
    padding:6px 14px; font-size:12px; font-weight:600;
    color:var(--gold); white-space:nowrap;
    position:relative;
}
.top-link::after {
    content:''; position:absolute; bottom:2px; left:14px; right:14px;
    height:1px; background:var(--gold); opacity:0; transition:opacity .2s;
}
.top-link:hover::after { opacity:1; }
.search-box {
    display:flex; align-items:center; gap:4px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:var(--radius); padding:0 8px;
    transition:border-color .2s;
}
.search-box:focus-within { border-color:var(--primary); }
.search-box input {
    background:none; border:none; color:var(--text-primary);
    font-size:12px; padding:7px 4px; outline:none; font-family:inherit;
}
.search-box input::placeholder { color:var(--text-muted); }
.top-pass-input {
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:var(--radius); color:var(--text-primary);
    font-size:12px; padding:7px 10px; outline:none; font-family:inherit;
    transition:border-color .2s;
}
.top-pass-input:focus { border-color:var(--primary); }
.top-pass-input::placeholder { color:var(--text-muted); }

/* ═══ HEADER / NAV BAR ════════════════════════════════════════ */
.header {
    position:fixed; top:var(--topbar-h); left:0; right:0;
    height:var(--header-h);
    background:var(--header-grad);
    border-bottom:2px solid var(--primary);
    z-index:1100;
}
.header-inner {
    display:flex; align-items:center; height:100%;
    max-width:var(--max-w); margin:0 auto; padding:0 16px;
}
.header-nav {
    display:flex; align-items:center; gap:0; flex:1;
    overflow-x:auto; scrollbar-width:none;
}
.header-nav::-webkit-scrollbar { display:none; }
.nav-item {
    display:flex; align-items:center; gap:5px;
    padding:10px 14px; font-size:12px; font-weight:600;
    color:var(--text-secondary); white-space:nowrap;
    transition:all .2s; border-bottom:2px solid transparent;
    margin-bottom:-2px; position:relative;
}
.nav-item:hover { color:#fff; }
.nav-item.active { color:var(--gold); border-bottom-color:var(--gold); }
.nav-item svg { opacity:0.7; }

/* ═══ BUTTONS ═════════════════════════════════════════════════ */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 20px; border:none; border-radius:var(--radius);
    font-size:13px; font-weight:700; transition:all .2s; cursor:pointer;
    line-height:1.4; position:relative; overflow:hidden;
}
.btn::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    transform:translateX(-100%); transition:transform .4s;
}
.btn:hover::after { transform:translateX(100%); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); box-shadow:0 4px 16px var(--glow-red); }
.btn-login-red {
    background:linear-gradient(135deg,#e60012,#cc0010);
    color:#fff; border-radius:6px; text-transform:uppercase; letter-spacing:.5px;
}
.btn-login-red:hover { box-shadow:0 4px 20px var(--glow-red); }
.btn-register-gold {
    background:linear-gradient(135deg,#fbbf24,#d4a017,#fbbf24);
    background-size:200% 100%;
    color:#000; font-weight:800;
    border-radius:6px; text-transform:uppercase; letter-spacing:.5px;
    animation:shimmer 3s linear infinite;
}
.btn-register-gold:hover { box-shadow:0 4px 20px var(--glow-gold); }
.btn-gold {
    background:linear-gradient(135deg,#fbbf24,#d4a017,#fbbf24);
    background-size:200% 100%;
    color:#000; font-weight:800; padding:14px 36px;
    border-radius:8px; font-size:15px; text-transform:uppercase;
    animation:shimmer 3s linear infinite;
    box-shadow:0 4px 24px var(--glow-gold);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 32px var(--glow-gold); }
.btn-login {
    background:transparent; border:1px solid var(--border-light);
    color:var(--text-primary);
}
.btn-login:hover { border-color:var(--primary); color:var(--primary); }
.btn-register {
    background:linear-gradient(135deg,var(--primary),#991b1b);
    color:#fff;
}
.btn-register:hover { filter:brightness(1.15); }
.btn-deposit { background:linear-gradient(135deg,#10b981,#059669); color:#fff; font-size:12px; }
.btn-deposit:hover { box-shadow:0 4px 16px rgba(16,185,129,.3); }
.btn-sm { padding:7px 14px; font-size:12px; }
.btn-block { display:flex; width:100%; justify-content:center; padding:12px; }
.btn-ghost { background:var(--badge-bg); color:var(--text-secondary); border:1px solid var(--border); }
.btn-ghost:hover { background:rgba(255,255,255,0.1); color:var(--text-primary); }
.btn-danger { background:var(--red); color:#fff; }
.btn-success { background:var(--green); color:#fff; }

/* Header user stuff */
.header-balance {
    display:flex; align-items:center; gap:6px;
    background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(251,191,36,.03));
    border:1px solid rgba(251,191,36,.15);
    padding:6px 12px; border-radius:var(--radius);
    font-size:13px; font-weight:700; color:var(--gold);
    animation:borderGlow 3s ease infinite;
}
.header-user {
    display:flex; align-items:center; gap:6px;
    padding:4px 10px 4px 4px; border-radius:var(--radius);
    cursor:pointer; position:relative; background:rgba(255,255,255,0.04);
    transition:background .2s;
}
.header-user:hover { background:rgba(255,255,255,0.08); }
.header-user .avatar {
    width:30px; height:30px; border-radius:50%;
    background:linear-gradient(135deg,var(--primary),#7c3aed);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:11px; color:#fff;
}
.header-user .username { font-size:12px; font-weight:600; }
.user-dropdown {
    display:none; position:absolute; top:calc(100% + 8px); right:0;
    background:var(--bg-popover); border:1px solid var(--border-light);
    border-radius:var(--radius-lg); min-width:190px;
    box-shadow:var(--shadow-dropdown); z-index:100; padding:6px;
    animation:fadeInUp .2s ease;
}
.user-dropdown.show { display:block; }
.user-dropdown a {
    display:flex; align-items:center; gap:8px;
    padding:10px 12px; font-size:13px; font-weight:500;
    color:var(--text-secondary); border-radius:8px; transition:all .15s;
}
.user-dropdown a:hover { background:var(--badge-bg); color:var(--text-primary); }

/* ═══ MAIN ════════════════════════════════════════════════════ */
.main { padding-top:var(--total-h); min-height:100vh; }
.container { max-width:var(--max-w); margin:0 auto; padding:0 16px; }
.section-block { padding:16px 0; animation:fadeInUp .6s ease both; }
.section-block:nth-child(2) { animation-delay:.1s; }
.section-block:nth-child(3) { animation-delay:.2s; }
.section-block:nth-child(4) { animation-delay:.3s; }

/* ═══ HERO BANNER ═════════════════════════════════════════════ */
.hero-banner { position:relative; overflow:hidden; }
.banner-slider { position:relative; }
.banner-slide {
    display:none; min-height:340px; position:relative;
}
.banner-slide::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 50%, rgba(230,0,18,.08) 0%, transparent 60%);
    pointer-events:none;
}
.banner-slide.active { display:block; animation:fadeInScale .8s ease; }
.banner-inner {
    display:flex; align-items:center; min-height:340px; padding:40px 0;
    max-width:var(--max-w); margin:0 auto; padding-left:16px; padding-right:16px;
}
.banner-text { max-width:600px; animation:slideInLeft .8s ease; }
.banner-text h1 {
    font-family:'Oxanium',sans-serif;
    font-size:clamp(32px,5vw,56px); font-weight:800;
    color:#fff; line-height:1.15; margin-bottom:10px;
    text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.banner-text p {
    font-size:clamp(18px,2.5vw,28px); font-weight:700;
    color:rgba(255,255,255,0.85); margin-bottom:22px;
}
.banner-img { animation:slideInRight .8s ease; }
.banner-img img { max-height:260px; filter:drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.banner-dots {
    position:absolute; bottom:18px; left:50%;
    transform:translateX(-50%); display:flex; gap:8px; z-index:10;
}
.dot {
    width:10px; height:10px; border-radius:50%;
    background:rgba(255,255,255,0.25); cursor:pointer; transition:all .3s;
}
.dot.active { background:var(--gold); width:30px; border-radius:5px; box-shadow:0 0 10px var(--glow-gold); }

/* ═══ SECTION HEADER ══════════════════════════════════════════ */
.sec-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 0 14px;
}
.sec-header h2 { font-size:18px; font-weight:800; }
.more-link {
    font-size:12px; font-weight:600; color:var(--primary);
    display:flex; align-items:center; gap:4px;
    transition:color .2s;
}
.more-link:hover { color:#ff4444; }

/* ═══ WINNERS MARQUEE ═════════════════════════════════════════ */
.winners-marquee {
    overflow:hidden; position:relative;
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.winners-track {
    display:flex; gap:12px; animation:marquee 30s linear infinite;
    width:max-content;
}
.winner-item {
    display:flex; align-items:center; gap:10px;
    background:var(--winner-bg);
    border:1px solid var(--border);
    border-radius:var(--radius); padding:10px 16px;
    flex-shrink:0; min-width:230px;
    transition:border-color .3s;
}
.winner-item:hover { border-color:var(--gold); }
.w-avatar {
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg,var(--primary),#ff6b35);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:12px; color:#fff; flex-shrink:0;
    box-shadow:0 2px 8px var(--glow-red);
}
.w-info { display:flex; flex-direction:column; flex:1; min-width:0; }
.w-name { font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w-game { font-size:10px; color:var(--text-muted); }
.w-amount { font-size:13px; font-weight:800; color:var(--gold); white-space:nowrap; text-shadow:0 0 8px var(--glow-gold); }

/* ═══ CATEGORY GRID ═══════════════════════════════════════════ */
.category-grid {
    display:grid; grid-template-columns:repeat(5,1fr);
    gap:10px;
}
.cat-card {
    background:var(--cat-card-bg);
    border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:20px 10px;
    text-align:center; cursor:pointer; transition:all .3s;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    position:relative; overflow:hidden;
}
.cat-card::before {
    content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:radial-gradient(circle,var(--cat-color,var(--primary)) 0%,transparent 70%);
    opacity:0; transition:opacity .4s;
}
.cat-card:hover::before { opacity:.06; }
.cat-card:hover { border-color:var(--cat-color,var(--primary)); transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.cat-icon {
    width:50px; height:50px; border-radius:14px;
    background:linear-gradient(135deg,var(--cat-color,var(--primary)),color-mix(in srgb, var(--cat-color,var(--primary)), #000 30%));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:24px;
    box-shadow:0 4px 16px rgba(0,0,0,.3);
    transition:transform .3s;
}
.cat-card:hover .cat-icon { transform:scale(1.1); }
.cat-icon svg { width:28px; height:28px; }
.cat-name { font-size:11px; font-weight:700; color:var(--text-primary); text-transform:uppercase; letter-spacing:.5px; }
.cat-jackpot { font-family:'Oxanium',sans-serif; font-size:11px; font-weight:700; color:var(--gold); text-shadow:0 0 6px var(--glow-gold); }

/* ═══ LIVE STREAM GRID ════════════════════════════════════════ */
.live-stream-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.live-card { cursor:pointer; transition:all .3s; }
.live-card:hover { transform:scale(1.04) translateY(-2px); }
.live-thumb {
    border-radius:var(--radius-lg); overflow:hidden;
    aspect-ratio:16/10; position:relative;
    display:flex; align-items:flex-end;
    box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.live-badge {
    position:absolute; top:8px; left:8px;
    background:var(--red); color:#fff;
    padding:3px 10px; border-radius:4px;
    font-size:10px; font-weight:800; letter-spacing:1px;
    animation:livePulse 1.5s infinite;
    box-shadow:0 2px 10px rgba(239,68,68,.4);
}
.live-info {
    display:flex; flex-direction:column; padding:10px 12px;
    background:linear-gradient(transparent,rgba(0,0,0,0.85)); width:100%;
}
.live-name { font-size:12px; font-weight:700; }
.live-viewers { font-size:10px; color:var(--gold); font-family:'Oxanium',sans-serif; }

/* ═══ PROVIDER LOGOS ══════════════════════════════════════════ */
.provider-logos {
    display:flex; gap:8px; flex-wrap:wrap;
    justify-content:center; padding:8px 0;
}
.prov-logo-item {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:8px 16px;
    cursor:pointer; transition:all .2s;
}
.prov-logo-item:hover { border-color:var(--primary); background:var(--bg-card-hover); transform:translateY(-1px); }
.prov-name { font-size:11px; font-weight:600; color:var(--text-secondary); }

/* ═══ JACKPOT SECTION ═════════════════════════════════════════ */
.jackpot-section {
    display:grid; grid-template-columns:1.5fr 1fr; gap:12px;
}
.jackpot-card {
    border-radius:var(--radius-lg); padding:28px;
    position:relative; overflow:hidden;
}
.jackpot-card::after {
    content:''; position:absolute; top:-100px; right:-100px;
    width:250px; height:250px; border-radius:50%;
    background:radial-gradient(circle,rgba(251,191,36,.06) 0%,transparent 70%);
    animation:float 6s ease-in-out infinite;
}
.jackpot-nohu {
    background:var(--jackpot-nohu-bg);
    border:1px solid rgba(251,191,36,0.15);
}
.jackpot-daga {
    background:var(--jackpot-daga-bg);
    border:1px solid rgba(16,185,129,0.15);
}
.jp-badge {
    display:inline-block; padding:4px 14px;
    background:linear-gradient(135deg,var(--primary),#ff4444);
    color:#fff; border-radius:6px; font-size:12px; font-weight:800;
    text-transform:uppercase; margin-bottom:6px;
    box-shadow:0 2px 10px var(--glow-red);
}
.jp-sub { font-size:12px; color:var(--text-muted); margin-bottom:12px; }
.jp-label-big {
    font-family:'Oxanium',sans-serif;
    font-size:20px; font-weight:800; color:var(--gold);
    text-transform:uppercase; letter-spacing:3px; margin-bottom:4px;
}
.jp-amount {
    font-family:'Oxanium',sans-serif;
    font-size:clamp(24px,3vw,38px); font-weight:800;
    color:var(--gold);
    text-shadow:0 0 30px var(--glow-gold);
    animation:glow 3s ease-in-out infinite;
}
.daga-providers { margin-top:20px; }
.daga-prov {
    display:inline-block; padding:6px 16px;
    background:var(--badge-bg); border:1px solid var(--border);
    border-radius:var(--radius); font-size:13px; font-weight:700;
    color:var(--text-secondary);
}

/* ═══ GAME GRID HOME — Premium Cards ═════════════════════════ */
.game-grid-home {
    display:grid; grid-template-columns:repeat(7,1fr); gap:10px;
}
.game-card-home {
    cursor:pointer; transition:all .3s; border-radius:var(--radius-lg);
    overflow:hidden; background:var(--bg-card);
    position:relative;
    box-shadow:var(--shadow-card);
}
.game-card-home:hover {
    transform:scale(1.06) translateY(-4px);
    box-shadow:var(--shadow-card-hover);
    z-index:2;
}
.gc-thumb {
    position:relative; aspect-ratio:4/3; overflow:hidden;
    background:var(--gc-thumb-bg);
}
.gc-thumb::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6) 100%);
    z-index:1; pointer-events:none;
}
.gc-thumb img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .4s, filter .4s;
}
.game-card-home:hover .gc-thumb img { transform:scale(1.12); filter:brightness(1.15) saturate(1.2); }
.gc-overlay {
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(135deg,rgba(230,0,18,.3),rgba(0,0,0,.5));
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .3s;
}
.game-card-home:hover .gc-overlay { opacity:1; }
.gc-play {
    width:48px; height:48px; background:var(--primary);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 20px var(--glow-red);
    transform:scale(.8); transition:transform .3s;
}
.game-card-home:hover .gc-play { transform:scale(1); }
.gc-jackpot {
    position:absolute; top:6px; left:6px; z-index:3;
    background:rgba(0,0,0,0.75); color:var(--gold);
    padding:3px 8px; border-radius:4px;
    font-family:'Oxanium',sans-serif;
    font-size:9px; font-weight:700;
    backdrop-filter:blur(4px);
}
.gc-name {
    padding:8px 10px; font-size:11px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    text-align:center;
    background:linear-gradient(180deg,var(--bg-card),rgba(18,18,26,.9));
}

/* ═══ PROMO GRID ══════════════════════════════════════════════ */
.promo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding-bottom:20px; }
.promo-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
    transition:all .3s; position:relative;
}
.promo-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.promo-card .pm-img {
    aspect-ratio:16/9;
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
}
.promo-card:hover .pm-img { filter:brightness(1.1); }
.pm-badge {
    position:absolute; top:8px; right:8px;
    background:linear-gradient(135deg,var(--primary),#ff4444);
    color:#fff; padding:3px 10px; border-radius:4px;
    font-size:10px; font-weight:800;
    box-shadow:0 2px 8px var(--glow-red);
    animation:pulse 2s infinite;
}
.promo-card .pm-body { padding:14px; }
.promo-card .pm-title { font-size:13px; font-weight:700; margin-bottom:4px; }
.promo-card .pm-desc { font-size:11px; color:var(--text-muted); line-height:1.6; }

/* ═══ MODAL (Login/Register Popup) ════════════════════════════ */
.modal-overlay {
    position:fixed; inset:0; z-index:2000;
    background:var(--overlay-bg);
    backdrop-filter:blur(8px);
    display:none; align-items:center; justify-content:center;
    padding:20px;
}
.modal-overlay.show { display:flex; }
.modal-box {
    background:var(--modal-bg);
    border:1px solid var(--border-light);
    border-radius:16px; padding:36px;
    width:100%; max-width:420px;
    box-shadow:0 30px 100px rgba(0,0,0,0.9);
    position:relative;
    animation:slideUp .4s cubic-bezier(.16,1,.3,1);
}
.modal-close {
    position:absolute; top:12px; right:14px;
    background:none; border:none; color:var(--text-muted);
    font-size:28px; cursor:pointer; line-height:1; transition:all .2s;
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border-radius:8px;
}
.modal-close:hover { color:var(--text-primary); background:var(--badge-bg); }
.modal-logo { text-align:center; margin-bottom:16px; }
.modal-logo span {
    font-family:'Oxanium',sans-serif; font-size:28px; font-weight:800;
    background:linear-gradient(135deg,#ff4444,#e60012);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 10px rgba(230,0,18,.3));
}
.modal-title { font-size:20px; text-align:center; font-weight:700; margin-bottom:4px; }
.modal-subtitle { text-align:center; color:var(--text-muted); margin-bottom:20px; font-size:13px; }
.modal-footer-text { text-align:center; margin-top:16px; font-size:13px; color:var(--text-muted); }
.modal-footer-text a { color:var(--gold); font-weight:600; }
.modal-error { margin-bottom:14px; }

/* ═══ FLOATING SIDEBAR ════════════════════════════════════════ */
.floating-sidebar {
    position:fixed; right:14px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:8px; z-index:1100;
}
.float-btn {
    width:42px; height:42px; border-radius:50%;
    background:rgba(20,20,30,0.9); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-secondary); transition:all .3s;
    backdrop-filter:blur(10px);
}
.float-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); transform:scale(1.1); }
.float-btn-highlight { background:var(--primary); color:#fff; border-color:var(--primary); animation:pulseBtn 2s infinite; }

/* ═══ FOOTER ══════════════════════════════════════════════════ */
.footer {
    background:var(--footer-bg);
    border-top:1px solid var(--border-topbar);
    padding:40px 0 20px; margin-top:20px;
}
.footer-inner { max-width:var(--max-w); margin:0 auto; padding:0 16px; }
.footer-top {
    text-align:center; padding-bottom:28px;
    border-bottom:1px solid var(--border);
}
.footer-top .f-logo {
    font-family:'Oxanium',sans-serif; font-size:28px; font-weight:800;
    background:linear-gradient(135deg,#ff4444,#e60012);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    margin-bottom:10px;
}
.footer-top .f-title { font-size:14px; font-weight:700; color:var(--gold); margin-bottom:8px; }
.footer-top p { font-size:12px; color:var(--text-muted); line-height:1.7; max-width:700px; margin:0 auto; }
.footer-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:24px; padding:24px 0; border-bottom:1px solid var(--border);
}
.footer-col h4 { font-size:13px; font-weight:700; margin-bottom:14px; color:var(--text-primary); }
.footer-col a { display:block; font-size:12px; color:var(--text-muted); padding:4px 0; transition:all .2s; }
.footer-col a:hover { color:var(--gold); padding-left:4px; }
.footer-badges { display:flex; gap:12px; padding-top:20px; flex-wrap:wrap; justify-content:center; }
.footer-badges img { height:32px; opacity:0.6; transition:opacity .2s; }
.footer-badges img:hover { opacity:1; }
.footer-copy { padding-top:16px; text-align:center; font-size:11px; color:var(--text-muted); }

/* ═══ CATEGORY TABS ═══════════════════════════════════════════ */
.cat-tabs {
    display:flex; gap:6px; padding:10px 0;
    overflow-x:auto; scrollbar-width:none;
}
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
    display:flex; align-items:center; gap:5px;
    padding:8px 16px; border-radius:var(--radius);
    font-size:12px; font-weight:600; color:var(--text-secondary);
    background:var(--bg-tab); white-space:nowrap;
    cursor:pointer; transition:all .2s; flex-shrink:0;
    border:none;
}
.cat-tab:hover { color:var(--text-primary); background:rgba(255,255,255,0.08); }
.cat-tab.active { color:#fff; background:linear-gradient(135deg,var(--primary),#cc0010); box-shadow:0 2px 12px var(--glow-red); }
.cat-tab .ico { font-size:16px; line-height:1; }

/* ═══ GAME GRID (Lobby) — Premium ════════════════════════════ */
.game-grid {
    display:grid; grid-template-columns:repeat(7,1fr); gap:10px; padding-bottom:20px;
}
.game-card {
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    aspect-ratio:111/148; background:var(--game-card-bg);
    cursor:pointer; transition:all .3s;
    box-shadow:var(--shadow-card);
}
.game-card:hover {
    transform:scale(1.06) translateY(-4px);
    box-shadow:var(--shadow-card-hover);
    z-index:2;
}
.game-card img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s, filter .5s;
}
.game-card:hover img { transform:scale(1.1); filter:brightness(1.15) saturate(1.15); }
.game-card .g-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(230,0,18,.25),rgba(0,0,0,.5));
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .3s;
}
.game-card:hover .g-overlay { opacity:1; }
.game-card .g-play {
    width:48px; height:48px; background:var(--primary);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 20px var(--glow-red);
    transform:scale(.7); transition:transform .3s;
}
.game-card:hover .g-play { transform:scale(1); }
.game-card .g-play svg { width:18px; height:18px; fill:#fff; margin-left:2px; }
.game-card .g-name {
    position:absolute; bottom:0; left:0; right:0;
    padding:24px 8px 8px;
    background:linear-gradient(transparent,rgba(0,0,0,0.9));
    font-size:10px; font-weight:600; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ═══ PROVIDER GRID ═══════════════════════════════════════════ */
.provider-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:10px; padding-bottom:20px;
}
.provider-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:16px; text-align:center;
    cursor:pointer; transition:all .3s;
}
.provider-card:hover { border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow-card-hover); }
.provider-card .p-icon { font-size:32px; margin-bottom:6px; }
.provider-card .p-name { font-size:12px; font-weight:600; color:var(--text-secondary); }
.provider-card .p-info { font-size:10px; color:var(--text-muted); margin-top:2px; }

/* ═══ JACKPOT BAR ═════════════════════════════════════════════ */
.jackpot-bar {
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
    background:var(--jackpot-bar-bg);
    border:1px solid rgba(168,85,247,0.15);
    border-radius:var(--radius-lg); padding:16px; margin:8px 0;
}
.jp-item { text-align:center; }
.jp-label { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; margin-bottom:4px; }
.jp-val {
    font-family:'Oxanium',sans-serif;
    font-size:clamp(18px,2.5vw,28px); font-weight:800; color:var(--gold);
}

/* ═══ FORMS ═══════════════════════════════════════════════════ */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:12px; color:var(--text-secondary); margin-bottom:5px; font-weight:600; }
.form-control {
    width:100%; padding:11px 14px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:var(--radius); color:var(--text-primary);
    font-size:14px; font-family:inherit; outline:none;
    transition:border-color .2s, box-shadow .2s;
}
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.form-control::placeholder { color:var(--text-muted); }
select.form-control { cursor:pointer; }

/* ═══ ALERTS ══════════════════════════════════════════════════ */
.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:14px; font-size:13px; font-weight:500; animation:fadeInUp .3s ease; }
.alert-error { background:rgba(239,68,68,0.08); color:var(--red); border:1px solid rgba(239,68,68,0.15); }
.alert-success { background:rgba(16,185,129,0.08); color:var(--green); border:1px solid rgba(16,185,129,0.15); }

/* ═══ CARDS ═══════════════════════════════════════════════════ */
.card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:20px; margin-bottom:14px;
}
.card h2 { font-size:15px; font-weight:700; margin-bottom:14px; }

/* ═══ AUTH PAGE ═══════════════════════════════════════════════ */
.auth-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--bg-body); padding:20px;
}
.auth-box {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:16px; padding:36px;
    width:100%; max-width:400px;
    box-shadow:var(--shadow-dropdown);
}
.auth-box .auth-logo { text-align:center; margin-bottom:20px; }
.auth-box .auth-logo span {
    font-family:'Oxanium',sans-serif; font-size:26px; font-weight:800;
    background:linear-gradient(135deg,#ff4444,#e60012);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.auth-box h1 { font-size:20px; text-align:center; margin-bottom:4px; font-weight:700; }
.auth-box .subtitle { text-align:center; color:var(--text-muted); margin-bottom:24px; font-size:13px; }
.auth-box .footer-text { text-align:center; margin-top:16px; font-size:13px; color:var(--text-muted); }
.auth-box .footer-text a { color:var(--gold); font-weight:600; }

/* ═══ DASHBOARD ═══════════════════════════════════════════════ */
.dash-wrap { max-width:900px; margin:0 auto; padding:20px 16px 100px; }
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:16px; }
.stat-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:18px;
    transition:border-color .2s;
}
.stat-card:hover { border-color:var(--primary); }
.stat-card .s-label { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.stat-card .s-val { font-size:24px; font-weight:800; margin-top:4px; }
.stat-card .s-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.q-item {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:16px 10px; background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); transition:all .3s;
}
.q-item:hover { border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow-card-hover); }
.q-item .q-ico { font-size:24px; }
.q-item .q-label { font-size:11px; font-weight:600; color:var(--text-secondary); }

/* ═══ INFO BOX ════════════════════════════════════════════════ */
.info-box {
    background:var(--info-box-bg); border:1px solid var(--info-box-border);
    border-radius:var(--radius); padding:12px 16px; margin:12px 0;
    font-size:12px; color:var(--text-secondary); line-height:1.7;
}
.info-box strong { color:var(--primary); }
.copy-field {
    display:flex; align-items:center; gap:6px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:var(--radius); padding:8px 12px;
}
.copy-field input { flex:1; background:none; border:none; color:var(--gold); font-size:12px; font-family:monospace; outline:none; }
.copy-field button {
    background:var(--badge-bg); color:var(--text-secondary); border:none;
    padding:6px 14px; border-radius:6px; font-size:11px; font-weight:600; transition:all .2s;
}
.copy-field button:hover { background:var(--primary); color:#fff; }

/* ═══ TABLES ══════════════════════════════════════════════════ */
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; font-size:12px; }
thead { background:var(--table-head); }
th { text-align:left; padding:10px 12px; color:var(--text-muted); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
td { padding:10px 12px; border-top:1px solid var(--border); }
tr:hover td { background:var(--table-hover); }
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:600; }
.badge-pending { background:rgba(245,158,11,0.12); color:var(--yellow); }
.badge-approved,.badge-completed { background:rgba(16,185,129,0.1); color:var(--green); }
.badge-rejected { background:rgba(239,68,68,0.1); color:var(--red); }
.badge-deposit { background:rgba(16,185,129,0.1); color:var(--green); }
.badge-withdraw { background:rgba(239,68,68,0.1); color:var(--red); }

/* ═══ BOTTOM NAV — Premium Mobile ═════════════════════════════ */

/* ═══ RESPONSIVE — TABLET ═════════════════════════════════════ */
@media(max-width:1024px) {
    .category-grid { grid-template-columns:repeat(3,1fr); }
    .game-grid-home { grid-template-columns:repeat(5,1fr); }
    .game-grid { grid-template-columns:repeat(5,1fr); }
    .live-stream-grid { grid-template-columns:repeat(3,1fr); }
    .provider-grid { grid-template-columns:repeat(3,1fr); }
    .promo-grid { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:1fr 1fr; gap:20px; }
    .jackpot-section { grid-template-columns:1fr; }
}

/* ═══ RESPONSIVE — MOBILE PREMIUM ═════════════════════════════ */
@media(max-width:768px) {
    :root {
        --topbar-h: 52px;
        --header-h: 42px;
        --total-h: 94px;
        --nav-h: 62px;
    }

    .top-bar { height:auto; min-height:var(--topbar-h); backdrop-filter:blur(20px); }
    .top-bar-inner { flex-wrap:wrap; padding:8px 12px; gap:8px; }
    .top-bar-right { flex-wrap:wrap; width:100%; justify-content:flex-end; gap:6px; }
    .search-box, .top-pass-input { display:none; }
    .logo-text { font-size:22px; }

    .header { top:var(--topbar-h); }
    .header-nav { display:flex; gap:0; }
    .nav-item { padding:10px 10px; font-size:11px; }
    .nav-item svg { display:none; }

    
    .main { padding-bottom:calc(var(--nav-h) + 10px); }

    /* Banner — Mobile hero */
    .banner-inner { min-height:200px; padding:24px 0; }
    .banner-text h1 { font-size:22px; }
    .banner-text p { font-size:15px; margin-bottom:16px; }
    .btn-gold { padding:10px 24px; font-size:13px; }
    .banner-img img { max-height:140px; }

    /* Categories */
    .category-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
    .cat-card {
        padding:16px 8px; border-radius:12px;
        background:var(--cat-card-mobile-bg);
        backdrop-filter:blur(4px);
    }
    .cat-icon { width:44px; height:44px; border-radius:12px; }
    .cat-name { font-size:9px; letter-spacing:.3px; }

    /* Game grids */
    .game-grid-home { grid-template-columns:repeat(3,1fr); gap:8px; }
    .game-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
    .game-card-home { border-radius:12px; }
    .game-card { border-radius:12px; }
    .gc-play { width:40px; height:40px; }
    .game-card .g-play { width:40px; height:40px; }

    /* Live stream */
    .live-stream-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .live-thumb { border-radius:12px; }

    /* Promo */
    .promo-grid { grid-template-columns:1fr; gap:10px; }
    .promo-card { display:flex; flex-direction:row; }
    .promo-card .pm-img { aspect-ratio:1/1; width:100px; min-height:auto; flex-shrink:0; }
    .promo-card .pm-body { display:flex; flex-direction:column; justify-content:center; padding:12px 14px; }

    /* Footer */
    .footer-grid { grid-template-columns:1fr 1fr; gap:16px; }
    .footer { padding-bottom:calc(var(--nav-h) + 16px); }

    /* Dashboard */
    .quick-grid { grid-template-columns:repeat(2,1fr); }
    .stats-row { grid-template-columns:1fr 1fr; gap:8px; }
    .dash-wrap { padding:12px 10px 80px; }

    /* Provider grid */
    .provider-grid { grid-template-columns:repeat(2,1fr); }

    /* Jackpot */
    .jackpot-section { grid-template-columns:1fr; gap:10px; }
    .jp-amount { font-size:24px; }

    /* Modal */
    .modal-box { padding:24px 18px; border-radius:14px; }

    /* Floating sidebar hide */
    .floating-sidebar { display:none; }

    /* Section headers */
    .sec-header { padding:14px 0 10px; }
    .sec-header h2 { font-size:16px; }

    /* Winners marquee mobile */
    .winner-item { padding:8px 12px; min-width:200px; }
}

/* ═══ RESPONSIVE — SMALL PHONES ═══════════════════════════════ */
@media(max-width:480px) {
    .category-grid { grid-template-columns:repeat(3,1fr); gap:6px; }
    .game-grid-home { grid-template-columns:repeat(3,1fr); gap:6px; }
    .game-grid { grid-template-columns:repeat(3,1fr); gap:6px; }
    .cat-card { padding:12px 6px; }
    .cat-name { font-size:8px; }
    .cat-icon { width:38px; height:38px; border-radius:10px; }
    .banner-inner { min-height:170px; padding:16px 0; }
    .banner-text h1 { font-size:20px; }
    .banner-text p { font-size:14px; }
    .footer-grid { grid-template-columns:1fr; }
    .stats-row { grid-template-columns:1fr; }
    .live-stream-grid { grid-template-columns:repeat(2,1fr); gap:6px; }
    .promo-card .pm-img { width:80px; }
}

/* ═══ MOBILE TOUCH OPTIMIZATIONS ══════════════════════════════ */
@media(hover:none) and (pointer:coarse) {
    .game-card:active { transform:scale(.97); }
    .game-card-home:active { transform:scale(.97); }
    .cat-card:active { transform:scale(.96); }
    .game-card .g-overlay,
    .game-card-home .gc-overlay { display:none; }
    .btn:active { transform:scale(.97); }
}

/* ============================================================
   CINE88 MOBILE REWRITE — BOM88 Style
   Complete mobile override (max-width: 768px)
   ============================================================ */

/* --- Mobile Category Scroll Bar (BOM88 style) --- */
.m-cat-bar {
    display:none;
}

/* --- Sidebar keep for later but default hidden --- */
.cat-sidebar-overlay { display:none; }
.cat-sidebar-overlay.open { display:block; }

@media(max-width:768px) {

/* ═══ RESET ALL PREVIOUS MOBILE PATCHES ═════════════════════ */
/* Override everything cleanly */

:root {
    --topbar-h: 50px;
    --nav-h: 56px;
}

/* ═══ TOP BAR — BOM88: Logo left, buttons right, single row ═ */
.top-bar {
    position:fixed !important; top:0; left:0; right:0;
    height:var(--topbar-h) !important;
    min-height:auto !important;
    background:var(--bg-topbar) !important;
    border-bottom:1px solid var(--border) !important;
    backdrop-filter:blur(16px);
    z-index:1200;
}
.top-bar-inner {
    display:flex !important; align-items:center !important;
    height:100% !important;
    flex-wrap:nowrap !important;
    padding:0 12px !important; gap:8px !important;
}

/* Hide menu toggle — we use scroll tabs instead */
.menu-toggle-btn { display:none !important; }

/* Logo */
.header-logo { flex-shrink:0; margin-right:auto !important; }
.logo-text { font-size:20px !important; }

/* Top bar right — compact */
.top-bar-right {
    display:flex !important; align-items:center !important;
    gap:6px !important; margin-left:auto !important;
    flex-wrap:nowrap !important; width:auto !important;
}

/* Hide promo link, search, password field */
.top-link { display:none !important; }
.search-box { display:none !important; }
.top-pass-input { display:none !important; }

/* Login/Register buttons — BOM88 style rounded pills */
.btn-login-red {
    padding:6px 14px !important; font-size:11px !important;
    border-radius:20px !important; letter-spacing:0 !important;
}
.btn-register-gold {
    padding:6px 14px !important; font-size:11px !important;
    border-radius:20px !important; letter-spacing:0 !important;
}

/* Logged in: hide balance & deposit, only avatar */
.desktop-only { display:none !important; }
.mobile-only { display:block !important; }
a.mobile-only, .dd-deposit-btn.mobile-only { display:flex !important; }
.header-user { padding:2px !important; background:transparent !important; }
.header-user .avatar { width:32px; height:32px; font-size:11px; }

/* Dropdown */
.user-dropdown { min-width:230px; right:-8px; }
.dd-balance { padding:14px 12px 10px; border-bottom:1px solid var(--border); text-align:center; }
.dd-deposit-btn {
    display:flex !important; align-items:center; gap:8px;
    padding:10px 12px !important; margin:4px 6px;
    background:linear-gradient(135deg,#10b981,#059669) !important;
    color:#fff !important; border-radius:8px !important;
    font-weight:700 !important; font-size:13px !important;
    justify-content:center;
}

/* ═══ HEADER NAV — HIDE (replaced by m-cat-bar) ═════════════ */
.header { display:none !important; }

/* ═══ MOBILE CATEGORY BAR — BOM88 horizontal scroll ═════════ */
.m-cat-bar {
    display:flex !important;
    position:fixed; top:var(--topbar-h); left:0; right:0;
    height:60px; z-index:1100;
    background:var(--bg-card);
    border-bottom:1px solid var(--border);
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
    align-items:center;
    padding:0 8px; gap:0;
}
.m-cat-bar::-webkit-scrollbar { display:none; }

.m-cat-item {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding:6px 12px; flex-shrink:0;
    text-decoration:none; color:var(--text-secondary);
    font-size:10px; font-weight:600; white-space:nowrap;
    transition:color .2s;
    min-width:60px;
}
.m-cat-item:active { transform:scale(.92); }
.m-cat-item.active { color:var(--primary); }
.m-cat-icon {
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; background:rgba(255,255,255,0.06);
    transition:all .2s;
}
.m-cat-item.active .m-cat-icon {
    background:var(--primary-light);
    box-shadow:0 0 12px var(--glow-red);
}
html.light-theme .m-cat-icon { background:rgba(0,0,0,0.04); }

/* ═══ MAIN — adjusted top padding ═══════════════════════════ */
.main {
    padding-top:calc(var(--topbar-h) + 60px) !important;
    padding-bottom:calc(var(--nav-h) + 16px) !important;
    min-height:100vh;
}

/* ═══ HIDE SECTIONS — Clean like BOM88 ══════════════════════ */
.hero-banner { display:none !important; }
section:has(.winners-marquee) { display:none !important; }
.winners-marquee { display:none !important; }
section:has(.category-grid) { display:none !important; }
.category-grid { display:none !important; }
section:has(.live-stream-grid) { display:none !important; }
.live-stream-grid { display:none !important; }
section:has(.promo-grid) { display:none !important; }
.promo-grid { display:none !important; }
section:has(.provider-logos) { display:none !important; }
.provider-logos { display:none !important; }
section:has(.jackpot-section) { display:none !important; }
.jackpot-section { display:none !important; }
.footer { display:none !important; }
.floating-sidebar { display:none !important; }

/* Section headers — tighter */
.sec-header { padding:12px 0 8px !important; }
.sec-header h2 { font-size:15px !important; }

/* ═══ GAME GRID — BOM88: 3 columns, square, vivid ═══════════ */
.game-grid,
.game-grid-home {
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important;
    padding:0 !important;
}

.game-card {
    aspect-ratio:1/1 !important;
    border-radius:12px !important;
    background:#1a1a2e !important;
    box-shadow:0 2px 8px rgba(0,0,0,.15) !important;
    overflow:hidden;
}
html.light-theme .game-card { background:#fff !important; }

.game-card img {
    width:100% !important; height:100% !important;
    object-fit:cover !important;
    border-radius:12px !important;
}
.game-card:hover img { transform:none !important; filter:none !important; }

/* Hide overlay on mobile — just show the image */
.game-card .g-overlay { display:none !important; }

/* Game name — overlaid at bottom */
.game-card .g-name {
    position:absolute !important; bottom:0 !important;
    left:0 !important; right:0 !important;
    padding:16px 6px 6px !important;
    background:linear-gradient(transparent, rgba(0,0,0,0.7)) !important;
    font-size:10px !important; font-weight:600 !important;
    text-align:center; color:#fff;
    border-radius:0 0 12px 12px;
}

/* Home game cards */
.game-card-home {
    border-radius:12px !important;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.15) !important;
}
.gc-thumb {
    aspect-ratio:1/1 !important;
    background:#1a1a2e !important;
}
html.light-theme .gc-thumb { background:#f0f2f5 !important; }

.gc-thumb img {
    width:100% !important; height:100% !important;
    object-fit:cover !important;
}
.game-card-home:hover .gc-thumb img { transform:none !important; filter:none !important; }
.gc-overlay { display:none !important; }
.gc-jackpot { display:none !important; }
.gc-name {
    padding:6px 8px !important; font-size:11px !important;
    text-align:center;
}

/* ═══ CAT TABS (lobby page) — BOM88 pill style ══════════════ */
.cat-tabs {
    padding:8px 0 !important; gap:6px !important;
}
.cat-tab {
    padding:6px 14px !important; font-size:11px !important;
    border-radius:20px !important;
    background:var(--bg-tab) !important;
}
.cat-tab.active {
    background:var(--primary) !important;
    box-shadow:none !important;
}
.cat-tab .ico { font-size:14px !important; }
.theme-toggle {
    bottom:calc(var(--nav-h) + 10px) !important;
    right:10px !important;
    width:36px !important; height:36px !important;
    font-size:16px !important;
    opacity:.7;
}

/* ═══ CONTAINER — edge to edge ══════════════════════════════ */
.container { padding:0 10px !important; }

/* ═══ MODALS — fullscreen on mobile ═════════════════════════ */
.modal-box {
    max-width:100% !important;
    border-radius:12px !important;
    padding:24px 16px !important;
}

/* ═══ DASHBOARD — compact ═══════════════════════════════════ */
.dash-wrap { padding:10px 10px 80px !important; }
.stats-row { grid-template-columns:1fr 1fr !important; gap:8px !important; }
.quick-grid { grid-template-columns:repeat(2,1fr) !important; }

/* ═══ TOUCH — no hover effects ══════════════════════════════ */
.game-card:hover { transform:none !important; box-shadow:0 2px 8px rgba(0,0,0,.15) !important; }
.game-card-home:hover { transform:none !important; box-shadow:0 2px 8px rgba(0,0,0,.15) !important; }
.game-card:active, .game-card-home:active { transform:scale(.96); }

} /* end @media 768px */

/* ═══ SMALL PHONES ═══════════════════════════════════════════ */
@media(max-width:380px) {
    .m-cat-item { padding:6px 8px; min-width:52px; }
    .m-cat-icon { width:28px; height:28px; font-size:15px; }
    .m-cat-item { font-size:9px; }
    .logo-text { font-size:18px !important; }
}

/* ═══ DESKTOP — ensure m-cat-bar hidden ═════════════════════ */
@media(min-width:769px) {
    .m-cat-bar { display:none !important; }
    .mobile-only { display:none !important; }
}

/* ═══ PREMIUM BOTTOM NAV — 5-Star Casino ═══════════════════════ */

/* --- Keyframes --- */
@keyframes bnav-pulse {
    0%, 100% { box-shadow: 0 0 12px var(--primary), 0 0 24px rgba(220,38,38,.3); }
    50% { box-shadow: 0 0 20px var(--primary), 0 0 40px rgba(220,38,38,.5); }
}
@keyframes bnav-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes bnav-ring-spin {
    0% { transform: translate(-50%,-50%) rotate(0deg); }
    100% { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes bnav-dot-pulse {
    0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

/* --- Nav container --- */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--nav-h, 64px) !important;
    background: linear-gradient(180deg, rgba(10,10,18,.95) 0%, rgba(6,6,12,.98) 100%) !important;
    border-top: 1px solid rgba(220,38,38,.15) !important;
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    z-index: 1300;
    padding-bottom: env(safe-area-inset-bottom, 0);
    overflow: visible;
}

/* Top glow line */
.bnav-glow {
    position: absolute;
    top: -1px; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), #fbbf24, var(--primary), transparent);
    opacity: .7;
    animation: bnav-shimmer 4s linear infinite;
    background-size: 200% 100%;
}

html.light-theme .bottom-nav {
    background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(248,248,252,.99) 100%) !important;
    border-top: 1px solid rgba(220,38,38,.1) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}

/* --- Inner flex --- */
.bottom-nav-inner {
    display: flex !important;
    height: 100% !important;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    position: relative;
}

/* --- Nav items --- */
.bnav-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 10px;
    font-size: 9px !important;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    position: relative;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    -webkit-tap-highlight-color: transparent;
}

.bnav-icon-wrap {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: transparent;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative;
}
.bnav-icon-wrap svg {
    width: 22px; height: 22px;
    fill: currentColor;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    filter: drop-shadow(0 0 0 transparent);
}

/* --- Active state --- */
.bnav-item.active {
    color: var(--primary) !important;
}
.bnav-item.active .bnav-icon-wrap {
    background: rgba(220,38,38,.12);
    box-shadow: 0 2px 12px rgba(220,38,38,.2);
}
.bnav-item.active .bnav-icon-wrap svg {
    filter: drop-shadow(0 0 6px rgba(220,38,38,.5));
    transform: scale(1.05);
}

/* Active indicator dot */
.bnav-item.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    animation: bnav-dot-pulse 2s ease-in-out infinite;
}

/* Remove old ::before indicator */
.bnav-item.active::before {
    display: none !important;
}

/* Tap effect */
.bnav-item:active {
    transform: scale(.88) !important;
}
.bnav-item:active .bnav-icon-wrap {
    background: rgba(220,38,38,.15);
}

/* --- CENTER BUTTON (Sảnh Game) — the star attraction --- */
.bnav-center {
    margin-top: -20px;
}
.bnav-icon-center {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
    box-shadow: 0 4px 16px rgba(220,38,38,.4), 0 0 20px rgba(220,38,38,.2);
    position: relative;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}
.bnav-icon-center svg {
    width: 26px; height: 26px;
    fill: #fff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    z-index: 2;
    position: relative;
}

/* Spinning ring around center button */
.bnav-center-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 58px; height: 58px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(251,191,36,.6);
    border-right-color: rgba(220,38,38,.4);
    animation: bnav-ring-spin 3s linear infinite;
    pointer-events: none;
}

.bnav-center.active .bnav-icon-center {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    animation: bnav-pulse 2s ease-in-out infinite;
}

.bnav-center:active .bnav-icon-center {
    transform: scale(.9);
    box-shadow: 0 2px 8px rgba(220,38,38,.6);
}

/* Center button doesn't need dot indicator */
.bnav-center.active::after { display: none; }

/* Light theme adjustments */
html.light-theme .bnav-item.active .bnav-icon-wrap {
    background: rgba(220,38,38,.08);
    box-shadow: 0 2px 12px rgba(220,38,38,.12);
}
html.light-theme .bnav-glow {
    opacity: .4;
}
html.light-theme .bnav-center-ring {
    border-top-color: rgba(220,38,38,.3);
    border-right-color: rgba(251,191,36,.3);
}

/* --- Mobile only --- */
@media(max-width:768px) {
    .bottom-nav { display: block !important; }
}
@media(min-width:769px) {
    .bottom-nav { display: none !important; }
}

/* Small phones */
@media(max-width:380px) {
    .bnav-item { padding: 6px 6px; font-size: 8px !important; }
    .bnav-icon-center { width: 46px; height: 46px; }
    .bnav-center-ring { width: 52px; height: 52px; }
    .bnav-icon-center svg { width: 22px; height: 22px; }
    .bnav-center { margin-top: -16px; }
}