/* ════════════════════════════════════════════════
   CIPHER CASINO — crypto casino design system
   Slate/navy base · indigo + emerald accents
════════════════════════════════════════════════ */
:root {
  --bg0:#0f172a; --bg1:#1e293b; --bg2:#1e293b; --bg3:#334155; --bg4:#3d4f66;
  --bg-hover:#475569;
  --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.11);
  --accent:#6366f1; --accent2:#818cf8; --accent3:#4f46e5;
  --accent-glow:rgba(99,102,241,0.45);
  --gold:#f59e0b; --gold2:#fbbf24;
  --green:#22c55e; --red:#ef4444; --blue:#3b82f6; --purple:#a855f7;
  --text1:#f1f5f9; --text2:#94a3b8; --text3:#64748b;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --u1:8px; --u2:16px; --u3:24px; --u4:32px;
  /* Design system (8px grid, shared surfaces) */
  --ds-u:8px;
  --ds-pad-1:8px; --ds-pad-2:16px; --ds-pad-3:24px; --ds-pad-4:32px;
  --ds-radius-sm:8px; --ds-radius-md:12px; --ds-radius-lg:18px;
  --ds-glass-strong:linear-gradient(155deg,rgba(30,41,59,0.88),rgba(15,23,42,0.92));
  --ds-shadow-card:0 16px 48px rgba(0,0,0,0.4);
  --ds-ease:cubic-bezier(0.22,1,0.36,1);
  --r:8px; --r2:12px; --r3:18px; --r4:24px;
  --sidebar-w:230px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --glass:rgba(30,41,59,0.72);
  --glass-border:rgba(255,255,255,0.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg0);color:var(--text1);min-height:100vh;min-height:100dvh;min-height:-webkit-fill-available;overflow:hidden;-webkit-font-smoothing:antialiased}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 80% at 10% -20%,rgba(99,102,241,0.14),transparent 50%),
    radial-gradient(ellipse 90% 60% at 100% 30%,rgba(34,197,94,0.06),transparent 45%),
    radial-gradient(ellipse 70% 50% at 50% 100%,rgba(129,140,248,0.08),transparent 40%);
  animation:cipher-bg-shift 22s ease-in-out infinite alternate;
}
@keyframes cipher-bg-shift{
  0%{opacity:1;filter:hue-rotate(0deg)}
  100%{opacity:0.92;filter:hue-rotate(12deg)}
}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

/* ══ Global design system primitives ══ */
.ds-card{border-radius:var(--ds-radius-lg);border:1px solid var(--glass-border)}
.ds-glass{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ds-glass-strong{background:var(--ds-glass-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--ds-shadow-card),inset 0 1px 0 rgba(255,255,255,0.06)}
.ds-modal-backdrop{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-pad-1);padding:10px var(--ds-pad-2);border-radius:var(--ds-radius-md);font-size:0.82rem;font-weight:700;border:none;cursor:pointer;touch-action:manipulation;transition:transform 0.14s var(--ds-ease),filter 0.14s,box-shadow 0.18s}
.ds-btn:active:not(:disabled){transform:scale(0.97)}
.ds-btn-primary{background:linear-gradient(135deg,var(--accent2),var(--accent3));color:#fff;box-shadow:0 6px 24px var(--accent-glow)}
.ds-btn-primary:hover:not(:disabled){filter:brightness(1.05)}
.ds-btn-secondary{background:rgba(99,102,241,0.14);color:var(--accent2);border:1px solid rgba(129,140,248,0.35)}
.ds-btn-secondary:hover:not(:disabled){background:rgba(99,102,241,0.22)}
.ds-btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2)}
.ds-btn-ghost:hover:not(:disabled){color:var(--text1);border-color:var(--border2);background:rgba(255,255,255,0.04)}
.ds-btn-gold{background:linear-gradient(135deg,var(--gold),#d97706);color:#0f172a;box-shadow:0 6px 22px rgba(245,158,11,0.35)}
.ds-btn-gold:hover:not(:disabled){filter:brightness(1.05)}
.ds-icon-btn{position:absolute;top:var(--ds-pad-2);right:var(--ds-pad-2);width:36px;height:36px;border-radius:var(--ds-radius-sm);border:1px solid var(--border2);background:rgba(0,0,0,0.25);color:var(--text2);font-size:1rem;cursor:pointer;transition:background 0.15s,color 0.15s,transform 0.12s}
.ds-icon-btn:hover{background:rgba(99,102,241,0.15);color:var(--text1)}
.ds-icon-btn:active{transform:scale(0.94)}
.ds-input{width:100%;padding:10px 12px;border-radius:var(--ds-radius-sm);border:1px solid var(--border);background:var(--bg3);color:var(--text1);font-size:0.88rem;transition:border-color 0.15s,box-shadow 0.15s}
.ds-input:focus{outline:none;border-color:rgba(99,102,241,0.55);box-shadow:0 0 0 3px rgba(99,102,241,0.12)}
.ds-chip{padding:8px 14px;border-radius:999px;border:1px solid var(--border2);background:rgba(15,23,42,0.6);color:var(--text2);font-size:0.72rem;font-weight:800;letter-spacing:0.04em;cursor:pointer;transition:all 0.18s var(--ds-ease)}
.ds-chip:hover{color:var(--text1);border-color:rgba(129,140,248,0.4)}
.wallet-tab.ds-chip.active{background:linear-gradient(135deg,rgba(99,102,241,0.35),rgba(79,70,229,0.2));border-color:rgba(129,140,248,0.5);color:var(--text1);box-shadow:0 4px 20px rgba(99,102,241,0.2)}

/* ══ SCREENS ══ */
.screen{display:none;width:100%;height:100vh;height:100dvh;min-height:-webkit-fill-available}
.screen.active{display:flex;flex-direction:column}
.game-screen{display:none!important}
.game-screen.active{display:flex!important;flex-direction:column;height:100vh;height:100dvh;min-height:-webkit-fill-available}

/* ══════════════════════ AUTH ══════════════════════ */
#auth-screen.active{display:flex;flex-direction:row;overflow:hidden}
.auth-canvas{position:fixed;inset:0;pointer-events:none;z-index:0}
.auth-wrap{display:flex;width:100%;height:100vh;position:relative;z-index:1}
.auth-left{flex:1;display:flex;flex-direction:column;justify-content:center;padding:5rem 4rem;background:linear-gradient(135deg,rgba(99,102,241,0.06) 0%,transparent 60%)}
.auth-brand{display:flex;align-items:center;gap:0.75rem;margin-bottom:3.5rem}
.brand-gem{flex-shrink:0}
.brand-wordmark{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:800;letter-spacing:-0.5px}
.auth-h1{font-family:'Space Grotesk',sans-serif;font-size:3.8rem;font-weight:800;line-height:1.05;letter-spacing:-2px;margin-bottom:1rem}
.auth-h1-accent{background:linear-gradient(90deg,var(--accent2),var(--gold2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-tagline{color:var(--text2);font-size:1rem;max-width:420px;line-height:1.6;margin-bottom:3rem}
.auth-stats{display:flex;align-items:center;gap:1.5rem}
.astat{text-align:center}
.astat-n{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;color:var(--accent2)}
.astat-l{font-size:0.72rem;color:var(--text2);margin-top:2px;letter-spacing:0.5px}
.astat-div{width:1px;height:36px;background:var(--border2)}
.auth-right{width:420px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2rem;background:rgba(0,0,0,0.25);border-left:1px solid var(--border)}
.auth-card{width:100%;max-width:380px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r4);padding:2.25rem;box-shadow:0 40px 80px rgba(0,0,0,0.5)}
.auth-tabs{display:flex;background:var(--bg0);border-radius:var(--r);padding:3px;margin-bottom:1.75rem;gap:3px}
.atab{flex:1;padding:0.6rem;background:transparent;border:none;color:var(--text2);font-size:0.88rem;font-weight:600;border-radius:7px;transition:all 0.18s}
.atab.active{background:var(--bg3);color:var(--text1)}
.auth-form{display:none;flex-direction:column;gap:1rem}
.auth-form.active{display:flex}
.afield{display:flex;flex-direction:column;gap:0.4rem}
.afield label{font-size:0.75rem;font-weight:600;color:var(--text2);letter-spacing:0.3px}
.afield input{padding:0.72rem 0.9rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text1);font-size:0.9rem;transition:border-color 0.18s}
.afield input:focus{outline:none;border-color:rgba(99,102,241,0.6);background:var(--bg4)}
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-right:2.8rem}
.pw-eye{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);padding:0;transition:color 0.15s}
.pw-eye:hover{color:var(--text1)}
.pw-bar{height:3px;background:var(--bg4);border-radius:2px;margin-top:0.35rem;overflow:hidden}
.pw-fill{height:100%;width:0;border-radius:2px;transition:width 0.3s,background 0.3s}
.ucheck{font-size:0.72rem;min-height:1rem;margin-top:0.2rem}
.ucheck.ok{color:var(--green)}.ucheck.bad{color:var(--red)}
.acheck{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:var(--text2);cursor:pointer}
.acheck input{width:14px;height:14px;accent-color:var(--accent)}
.bonus-badge{background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.25);border-radius:var(--r);padding:0.5rem 0.85rem;font-size:0.82rem;color:var(--accent2);text-align:center}
.aerr{color:var(--red);font-size:0.8rem;min-height:1rem;font-weight:500}
.btn,.abtn{display:inline-flex;align-items:center;justify-content:center;gap:0.35rem}
.abtn{width:100%;padding:0.8rem;background:linear-gradient(135deg,var(--accent3),var(--accent));color:#fff;border:none;border-radius:var(--r);font-size:0.92rem;font-weight:700;letter-spacing:0.3px;transition:transform 0.18s,box-shadow 0.22s,filter 0.2s;box-shadow:0 4px 18px rgba(79,70,229,0.25)}
.abtn:hover{background:linear-gradient(135deg,var(--accent),var(--accent2));transform:translateY(-2px);box-shadow:0 8px 28px rgba(99,102,241,0.38)}
.abtn:active{transform:translateY(0);box-shadow:0 2px 12px rgba(99,102,241,0.2)}
.avi-row{display:flex;flex-direction:column;gap:0.4rem}
.avi-row-lbl{font-size:0.75rem;font-weight:600;color:var(--text2)}
.avi-mini{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.avi-opt{padding:0.3rem;background:var(--bg3);border:2px solid transparent;border-radius:6px;font-size:1rem;text-align:center;cursor:pointer;transition:all 0.15s}
.avi-opt:hover{background:var(--bg4)}
.avi-opt.selected{border-color:var(--accent);background:rgba(99,102,241,0.12)}

/* ══════════════════════ APP SHELL ══════════════════════ */
#app-screen.active{display:flex;flex-direction:row;height:100vh;overflow:hidden}

/* SIDEBAR */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;height:100vh;overflow-y:auto;
  background:var(--bg1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:0;
  scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

.sb-brand{display:flex;align-items:center;gap:0.6rem;padding:1.1rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}
.sb-brand-icon{flex-shrink:0;filter:drop-shadow(0 0 14px rgba(129,140,248,0.35));transition:filter 0.25s}
.sb-brand:hover .sb-brand-icon{filter:drop-shadow(0 0 20px rgba(129,140,248,0.55))}
.sb-brand-name{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:800;letter-spacing:-0.3px}

.sb-promo{display:flex;align-items:center;gap:0.6rem;margin:0.75rem;padding:0.75rem;background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(251,191,36,0.06));border:1px solid rgba(245,158,11,0.2);border-radius:var(--r2);cursor:pointer;transition:border-color 0.15s}
.sb-promo:hover{border-color:rgba(245,158,11,0.4)}
.sbp-icon{font-size:1.3rem;flex-shrink:0}
.sbp-title{font-size:0.8rem;font-weight:700;color:var(--gold)}
.sbp-sub{font-size:0.68rem;color:var(--text2);margin-top:1px}

.sb-balance{margin:0 0.75rem 0.5rem;padding:0.75rem 0.9rem;background:var(--bg3);border-radius:var(--r2);border:1px solid var(--border)}
.sbb-label{font-size:0.62rem;font-weight:700;letter-spacing:1.5px;color:var(--text3)}
.sbb-amount{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:800;color:var(--accent2);letter-spacing:-0.5px;line-height:1.1;margin-top:2px}

.sb-nav{display:flex;flex-direction:column;padding:0.25rem 0.5rem;flex:1}
.sbn{display:flex;align-items:center;gap:0.6rem;width:100%;padding:0.62rem 0.75rem;background:transparent;border:none;border-radius:var(--r);color:var(--text2);font-size:0.875rem;font-weight:500;text-align:left;transition:all 0.15s;position:relative}
.sbn:hover{background:var(--bg3);color:var(--text1)}
.sbn-active{background:var(--bg3);color:var(--text1)}
.sbn-active::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:2px;background:var(--accent);border-radius:0 2px 2px 0}
.sbn-icon{width:16px;height:16px;flex-shrink:0;opacity:0.8}
.sbn-muted{color:var(--text3)}
.sbn-logout:hover{color:var(--red)}
.sbn-divider{height:1px;background:var(--border);margin:0.4rem 0.5rem}

/* Casino collapsible section */
.sbn-section{padding:0 0}
.sbn-section-hdr{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0.62rem 0.75rem;background:transparent;border:none;border-radius:var(--r);color:var(--text2);font-size:0.875rem;font-weight:500;cursor:pointer;transition:all 0.15s}
.sbn-section-hdr:hover{background:var(--bg3);color:var(--text1)}
.sbn-sec-left{display:flex;align-items:center;gap:0.6rem}
.sbn-chevron{width:14px;height:14px;transition:transform 0.25s;flex-shrink:0}
.sbn-chevron.open{transform:rotate(180deg)}
.sbn-children{display:flex;flex-direction:column;gap:0;padding:0 0 0 0.75rem;overflow:hidden;max-height:300px;transition:max-height 0.3s var(--ease)}
.sbn-children.collapsed{max-height:0}
.sbn-child{padding-left:0.5rem!important;font-size:0.85rem!important}

.sb-bottom{display:flex;flex-direction:column;gap:0.15rem;padding:0.5rem;border-top:1px solid var(--border);margin-top:auto}
.sb-staff-link{display:block;text-align:center;font-size:0.68rem;font-weight:600;color:var(--text3);text-decoration:none;padding:0.4rem 0.5rem 0.15rem;border-radius:var(--r);transition:color 0.15s,background 0.15s}
.sb-staff-link:hover{color:var(--accent2);background:rgba(99,102,241,0.08)}

/* TOPBAR mobile */
.topbar{display:none;align-items:center;justify-content:space-between;padding:0.6rem 0.85rem;background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0;z-index:40}
.tb-burger{background:none;border:none;color:var(--text1);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;cursor:pointer}
.tb-burger:hover{background:rgba(255,255,255,0.08)}
.tb-mid{display:flex;flex-direction:column;align-items:center;gap:1px}
.tb-logo{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:800;letter-spacing:0.5px}
.tb-sub{font-size:0.64rem;color:var(--text2);text-transform:uppercase;letter-spacing:0.1em}
.tb-actions{display:flex;gap:0.5rem;align-items:center}
.tb-action{border:none;background:rgba(99,102,241,0.15);color:var(--text1);border-radius:999px;width:36px;height:36px;font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.16s}
.tb-action:hover{background:rgba(99,102,241,0.3);transform:translateY(-1px)}
.tb-bal{display:flex;align-items:center;gap:0.35rem;font-size:0.82rem;font-weight:700;color:var(--accent2);min-width:72px;justify-content:center;white-space:nowrap}

.mobile-tabbar{display:none;position:fixed;bottom:0;left:0;right:0;height:58px;padding-bottom:env(safe-area-inset-bottom,0);background:rgba(15,23,42,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);justify-content:space-around;align-items:center;z-index:45}
.mtab{border:none;background:transparent;color:var(--text2);font-size:0.68rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;cursor:pointer;transition:color 0.18s,transform 0.15s}
.mtab:hover,.mtab:active{color:var(--text1)}
.mtab:hover{transform:translateY(-1px)}
.mtab-ico{font-size:1.2rem;line-height:1;filter:drop-shadow(0 0 8px transparent)}
.mtab:hover .mtab-ico{filter:drop-shadow(0 0 10px var(--accent-glow))}
.mtab-lbl{font-size:0.62rem;font-weight:600;letter-spacing:0.02em}
.mtab.mtab-active{color:var(--accent2)}
.mtab.mtab-active .mtab-ico{filter:drop-shadow(0 0 12px var(--accent-glow))}

@media (min-width:1001px) {
  .topbar, .mobile-tabbar, .mobile-scrim {display:none !important;}
}


/* MAIN CONTENT */
.main-content{flex:1;height:100vh;overflow-y:auto;background:transparent;position:relative}
.main-content::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0.4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='2' cy='2' r='1' fill='%236366f1' opacity='0.12'/%3E%3C/svg%3E");z-index:0}
.main-content > .page{position:relative;z-index:1}
.page{display:none;padding:2rem;max-width:1100px}
.page.active{display:block}
.page-h1{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-0.5px;margin-bottom:1.5rem}

/* Lobby */
.lobby-hero{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
.lh-left{display:flex;align-items:center;gap:0.9rem}
.lh-avi{font-size:2.4rem;line-height:1}
.lh-name{font-size:1.05rem;font-weight:700}
.lh-sub{font-size:0.8rem;color:var(--text2);margin-top:2px}
.lh-bal{text-align:right}
.lhb-label{font-size:0.62rem;font-weight:700;letter-spacing:2px;color:var(--text3)}
.lhb-amount{font-family:'Space Grotesk',sans-serif;font-size:2.2rem;font-weight:800;color:var(--accent2);letter-spacing:-1px;line-height:1}
.lhb-unit{font-size:0.72rem;color:var(--text2)}

/* Slim lobby activity ticker */
.lobby-ticker-wrap{margin:0 0 1.1rem}
.lobby-ticker-wrap[hidden]{display:none!important}
.lobby-ticker{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.32rem 0 0.5rem;
  border-bottom:1px solid rgba(255,255,255,0.055);
}
.lobby-ticker-dot{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:rgba(34,197,94,0.9);
  box-shadow:0 0 10px rgba(34,197,94,0.35);
  animation:lt-dot 2.4s ease-in-out infinite;
}
@keyframes lt-dot{0%,100%{opacity:0.9;transform:scale(1)}50%{opacity:0.35;transform:scale(0.92)}}
.lobby-ticker-label{
  font-family:'JetBrains Mono',monospace;font-size:0.56rem;font-weight:600;
  letter-spacing:0.14em;color:var(--text3);text-transform:uppercase;flex-shrink:0
}
.lobby-ticker-viewport{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.lobby-ticker-track{
  display:inline-flex;flex-wrap:nowrap;align-items:center;white-space:nowrap;
  font-size:0.7rem;color:var(--text2);line-height:1.4;
  animation:lt-marquee 52s linear infinite;
}
.lt-item{display:inline-flex;align-items:baseline;gap:0.25rem}
.lt-user{color:var(--text2);font-weight:500}
.lt-amt{font-family:'JetBrains Mono',monospace;font-size:0.68rem;font-weight:600;color:rgba(245,158,11,0.85)}
.lt-game{color:var(--text3);font-size:0.66rem}
.lt-sep{margin:0 1.1rem;color:rgba(255,255,255,0.06);user-select:none}
@keyframes lt-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .lobby-ticker-track{animation:none}
  .lobby-ticker-dot{animation:none}
}

.lobby-games-hdr{display:flex;align-items:baseline;gap:0.75rem;margin-bottom:0.9rem}
.lobby-games-hdr h2{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:800;letter-spacing:-0.3px}
.lgh-count{font-size:0.75rem;color:var(--text3)}

/* Game cards */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-bottom:2rem}
.gc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;cursor:pointer;transition:all 0.22s var(--ease);display:flex;flex-direction:column}
.gc:hover{border-color:var(--border2);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.gc-art{height:145px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.slots-art{background:linear-gradient(160deg,#1a1000,#0d0f1a)}
.bj-art{background:linear-gradient(160deg,#001a0d,#0d0f1a)}
.rou-art{background:linear-gradient(160deg,#1a0000,#0d0f1a)}
.bac-art{background:linear-gradient(160deg,#00001a,#0d0f1a)}
.gc-art-glow{position:absolute;inset:0;opacity:0.15;transition:opacity 0.3s}
.gc:hover .gc-art-glow{opacity:0.25}
.slots-glow{background:radial-gradient(circle at 50% 80%,#f59e0b,transparent)}
.slots-art-sweet{background:linear-gradient(155deg,#2a1538 0%,#1a0d28 40%,#12182e 100%)!important}
.slots-glow-sweet{background:radial-gradient(ellipse 90% 80% at 50% 100%,rgba(236,72,153,0.45),transparent 55%),radial-gradient(ellipse 70% 60% at 80% 20%,rgba(167,139,250,0.35),transparent 50%)!important}
.bj-glow{background:radial-gradient(circle at 50% 80%,#22c55e,transparent)}
.rou-glow{background:radial-gradient(circle at 50% 80%,#ef4444,transparent)}
.bac-glow{background:radial-gradient(circle at 50% 80%,#6366f1,transparent)}

/* Slots art preview */
.gc-reel-preview{display:flex;gap:6px}
.gc-reel-col{display:flex;flex-direction:column;gap:4px;background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:6px 8px}
.gc-reel-col div{font-size:1.5rem;line-height:1}
/* BJ art */
.gc-cards-preview{display:flex;gap:-8px}
.gc-prev-card{width:52px;height:72px;background:white;border-radius:6px;border:1px solid #ddd;display:flex;flex-direction:column;align-items:flex-start;padding:5px;font-size:0.9rem;font-weight:900;box-shadow:2px 4px 12px rgba(0,0,0,0.4)}
.gc-prev-card.c1{color:#1a1a2e;transform:rotate(-6deg);z-index:2}
.gc-prev-card.c2{transform:rotate(5deg) translateX(-12px);z-index:1}
.gc-prev-card span{font-size:1.1rem;line-height:1}
.gc-prev-card.c-bac1{color:#c0392b;transform:rotate(-4deg);z-index:2}
.gc-prev-card.c-bac2{color:#1a1a2e;transform:rotate(4deg) translateX(-10px);z-index:1}
/* Roulette art */
.gc-wheel-preview{display:flex;align-items:center;justify-content:center}
.gwp-outer{width:80px;height:80px;border-radius:50%;background:conic-gradient(#c0392b 0deg 10deg,#1a1a2e 10deg 20deg,#c0392b 20deg 30deg,#1a1a2e 30deg 40deg,#c0392b 40deg 50deg,#1a1a2e 50deg 60deg,#c0392b 60deg 70deg,#1a1a2e 70deg 80deg,#c0392b 80deg 90deg,#1a1a2e 90deg 100deg,#c0392b 100deg 110deg,#1a1a2e 110deg 120deg,#c0392b 120deg 130deg,#1a1a2e 130deg 140deg,#c0392b 140deg 150deg,#1a1a2e 150deg 160deg,#c0392b 160deg 170deg,#1a1a2e 170deg 180deg,#c0392b 180deg 190deg,#1a1a2e 190deg 200deg,#c0392b 200deg 210deg,#1a1a2e 210deg 220deg,#c0392b 220deg 230deg,#1a1a2e 230deg 240deg,#c0392b 240deg 250deg,#1a1a2e 250deg 260deg,#c0392b 260deg 270deg,#1a1a2e 270deg 280deg,#c0392b 280deg 290deg,#1a1a2e 290deg 300deg,#c0392b 300deg 310deg,#1a1a2e 310deg 320deg,#c0392b 320deg 330deg,#1a1a2e 330deg 340deg,#c0392b 340deg 350deg,#27ae60 350deg 360deg);border:3px solid rgba(255,255,255,0.15);animation:spin-preview 8s linear infinite}
.gwp-inner{position:absolute;width:30px;height:30px;background:var(--bg1);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.6rem;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,0.15);color:var(--text2);z-index:1}
@keyframes spin-preview{to{transform:rotate(360deg)}}
.gwp-spokes{display:none}

.gc-body{padding:0.9rem 1rem 0.5rem;flex:1}
.gc-row1{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.3rem}
.gc-name{font-size:0.95rem;font-weight:700}
.gc-tag{font-size:0.6rem;font-weight:800;letter-spacing:0.8px;padding:2px 8px;border-radius:20px;background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.gc-tag-hot{font-size:0.6rem;font-weight:800;letter-spacing:0.8px;padding:2px 8px;border-radius:20px;background:rgba(239,68,68,0.12);color:var(--red);border:1px solid rgba(239,68,68,0.25)}
.gc-tag-new{font-size:0.6rem;font-weight:800;letter-spacing:0.8px;padding:2px 8px;border-radius:20px;background:rgba(34,197,94,0.1);color:var(--green);border:1px solid rgba(34,197,94,0.2)}
.gc-desc{font-size:0.76rem;color:var(--text2);margin-bottom:0.2rem}
.gc-meta{font-size:0.7rem;color:var(--text3)}
.gc-cta{padding:0.65rem 1rem;font-size:0.8rem;font-weight:700;color:var(--accent2);border-top:1px solid var(--border);letter-spacing:0.3px;transition:background 0.15s}
.gc:hover .gc-cta{background:rgba(99,102,241,0.08)}

/* Shared: filter strip, table, kpis */
.filter-strip{display:flex;gap:0.35rem;margin-bottom:1rem;flex-wrap:wrap}
.fs-btn{padding:0.4rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:20px;color:var(--text2);font-size:0.78rem;font-weight:600;transition:all 0.15s}
.fs-btn.active{background:var(--bg3);color:var(--text1);border-color:var(--border2)}
.table-box{border-radius:var(--r2);border:1px solid var(--border);overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:0.82rem}
.data-table th{padding:0.7rem 0.9rem;background:var(--bg2);color:var(--text2);font-size:0.68rem;letter-spacing:1px;text-align:left;font-weight:700;border-bottom:1px solid var(--border)}
.data-table td{padding:0.62rem 0.9rem;border-bottom:1px solid rgba(255,255,255,0.04)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--bg2)}
.tbl-empty{text-align:center;color:var(--text2);padding:2rem!important}
.tx-win{color:var(--green);font-weight:600}.tx-loss{color:var(--red);font-weight:600}.tx-bonus{color:var(--gold);font-weight:600}.tx-push{color:var(--blue);font-weight:600}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.75rem;margin-bottom:1.5rem}
.kpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:1.25rem 1.4rem}
.kpi-n{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:800;color:var(--accent2);line-height:1}
.kpi-l{font-size:0.72rem;color:var(--text2);margin-top:0.4rem}
.stats-chart-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:1.5rem;margin-bottom:1rem}
.scc-title{font-size:0.72rem;font-weight:700;letter-spacing:1px;color:var(--text2);text-transform:uppercase;margin-bottom:1rem}
.chart-empty{text-align:center;color:var(--text2);font-size:0.85rem;padding:2rem 0}
.breakdown-row{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem}
.breakdown-name{min-width:80px;font-size:0.82rem;font-weight:600}
.breakdown-bar-wrap{flex:1;height:7px;background:var(--bg3);border-radius:4px;overflow:hidden}
.breakdown-bar{height:100%;border-radius:4px;transition:width 0.6s var(--ease)}
.breakdown-val{font-size:0.76rem;color:var(--text2);min-width:60px;text-align:right}
.profile-block{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:2rem}
.prof-top{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-bottom:1.5rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
.prof-avi{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prof-name{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:800}
.prof-since{font-size:0.8rem;color:var(--text2);margin-top:4px}
.prof-bal{margin-left:auto;text-align:right}
.pb-n{font-family:'Space Grotesk',sans-serif;font-size:2.2rem;font-weight:800;color:var(--accent2);line-height:1}
.pb-l{font-size:0.62rem;letter-spacing:2px;color:var(--text3)}
.avi-section{display:flex;flex-direction:column;gap:0.75rem}
.avi-section-label{font-size:0.75rem;font-weight:700;color:var(--text2)}
.avi-grid-lg{display:grid;grid-template-columns:repeat(8,1fr);gap:0.4rem}
.save-avi{align-self:flex-start;padding:0.55rem 1.4rem;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-size:0.85rem;font-weight:700;transition:all 0.15s}
.save-avi:hover{background:var(--accent2)}
.suc-msg{color:var(--green);font-size:0.8rem;min-height:1rem;font-weight:500}

/* ══════════════════════ GAME SHELL ══════════════════════ */
.game-shell{display:flex;flex:1;height:100vh;overflow:hidden}
.game-sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:0.75rem;overflow-y:auto;gap:0.15rem;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.right-sidebar{border-right:none;border-left:1px solid var(--border)}
.gs-back{display:flex;align-items:center;gap:0.4rem;padding:0.5rem 0.6rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text2);font-size:0.8rem;font-weight:600;margin-bottom:0.75rem;transition:all 0.15s;align-self:flex-start}
.gs-back:hover{color:var(--text1);border-color:var(--border2)}
.gs-section-label{font-size:0.6rem;font-weight:800;letter-spacing:2px;color:var(--text3);text-transform:uppercase;padding:0.3rem 0.3rem 0.2rem}
.gs-game-btn{display:flex;align-items:center;gap:0.6rem;width:100%;padding:0.65rem 0.6rem;background:transparent;border:1px solid transparent;border-radius:var(--r);text-align:left;color:var(--text2);transition:all 0.15s}
.gs-game-btn:hover{background:var(--bg3);color:var(--text1)}
.gs-game-btn.active{background:var(--bg3);border-color:var(--border2);color:var(--text1)}
.gsgb-icon{font-size:1.2rem;flex-shrink:0;line-height:1}
.gsgb-name{font-size:0.82rem;font-weight:700;line-height:1}
.gsgb-sub{font-size:0.68rem;color:var(--text2);margin-top:1px}
.gs-divider{height:1px;background:var(--border);margin:0.4rem 0}
.gs-paytable{display:flex;flex-direction:column;gap:0.25rem}
.pt-row{display:flex;align-items:center;justify-content:space-between;padding:0.35rem 0.4rem;background:var(--bg2);border-radius:6px;font-size:0.78rem}
.pt-combo{font-size:0.85rem}
.pt-multi{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.82rem}
.gs-session{display:flex;flex-direction:column;gap:0.3rem}
.gss-row{display:flex;justify-content:space-between;align-items:center;font-size:0.78rem;padding:0.2rem 0}
.gss-l{color:var(--text2)}.gss-v{font-weight:700;font-family:'Space Grotesk',sans-serif}.gss-v.green{color:var(--green)}.gss-v.red{color:var(--red)}.gss-v.gold{color:var(--gold)}.gss-v.blue{color:var(--blue)}
.gs-info-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:0.75rem;display:flex;flex-direction:column;gap:0.35rem}
.gsic-row{display:flex;justify-content:space-between;font-size:0.78rem;padding:0.2rem 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.gsic-row:last-child{border-bottom:none}
.gsic-row .gold{color:var(--gold);font-weight:700}

/* Spin log */
.spin-log{display:flex;flex-direction:column;gap:0.3rem;overflow-y:auto;flex:1}
.spin-log-empty{font-size:0.75rem;color:var(--text3);padding:0.4rem}
.sl-row{display:flex;align-items:center;gap:0.4rem;padding:0.35rem 0.4rem;background:var(--bg2);border-radius:6px;font-size:0.75rem;border-left:2px solid var(--border)}
.sl-row.win{border-left-color:var(--green)}
.sl-row.jackpot{border-left-color:var(--gold)}
.sl-row.loss{border-left-color:var(--red)}
.sl-syms{font-size:0.9rem;flex-shrink:0}
.sl-multi{font-weight:700;flex:1}
.sl-multi.win{color:var(--green)}.sl-multi.jackpot{color:var(--gold)}.sl-multi.loss{color:var(--text3)}
.sl-bet{color:var(--text3);font-size:0.7rem}

/* ══════════════════════ SLOTS VIEWPORT ══════════════════════ */
.slots-viewport{flex:1;display:flex;flex-direction:column;background:var(--bg0);position:relative;overflow:hidden}
.slot-fx-canvas{position:absolute;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}

.sv-header{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1.5rem;background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0;z-index:5}
.svh-name{font-family:'Space Grotesk',sans-serif;font-size:0.9rem;font-weight:800;letter-spacing:3px;color:var(--text2)}
.svh-jackpot{display:flex;align-items:center;gap:0.5rem}
.svhj-label{font-size:0.62rem;font-weight:800;letter-spacing:1.5px;color:var(--text3)}
.svhj-amount{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:800;color:var(--gold);letter-spacing:-0.5px}

/* 3D Slot Machine */
.slot-machine-3d{flex:1;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;perspective:1200px}
.machine-frame{position:relative;width:100%;max-width:600px}

.machine-cabinet{
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg3) 100%);
  border:1px solid var(--border2);
  border-radius:var(--r3);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;
  transform:rotateX(3deg);
  transform-style:preserve-3d;
}

.machine-top-lights{display:flex;justify-content:center;gap:10px;padding:0.75rem;background:var(--bg1);border-bottom:1px solid var(--border)}
.mlight{width:10px;height:10px;border-radius:50%;animation:ml-blink 1.4s ease-in-out infinite;flex-shrink:0}
.mlight:nth-child(even){animation-delay:0.7s}
@keyframes ml-blink{0%,100%{opacity:1;box-shadow:0 0 8px currentColor}50%{opacity:0.2;box-shadow:none}}

.cabinet-chrome{width:18px;background:linear-gradient(180deg,#3a3a4a,#252535,#3a3a4a);position:absolute;top:0;bottom:0;z-index:5}
.left-chrome{left:0;border-right:1px solid rgba(255,255,255,0.08);border-radius:var(--r3) 0 0 var(--r3)}
.right-chrome{right:0;border-left:1px solid rgba(255,255,255,0.08);border-radius:0 var(--r3) var(--r3) 0}

.reel-window{margin:0 18px;position:relative;display:flex;flex-direction:column;align-items:stretch;background:#060810;border-top:2px solid rgba(255,255,255,0.05);border-bottom:2px solid rgba(255,255,255,0.05)}
.reel-window-glass{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,0.015) 0%,transparent 60%);pointer-events:none;z-index:10}
.reels-container{display:flex;height:240px;gap:0;position:relative}
.reel3d{flex:1;overflow:hidden;position:relative;border-right:1px solid rgba(255,255,255,0.05)}
.reel3d:last-child{border-right:none}
.reel3d-strip{display:flex;flex-direction:column;will-change:transform;position:absolute;left:0;right:0;top:0}
.reel3d-strip--kf-spin{animation:reel-spin-weighted var(--reel-dur,2s) cubic-bezier(0.14,0.82,0.16,1) forwards}
@keyframes reel-spin-weighted{
  0%{transform:translateY(var(--r0,0px))}
  48%{transform:translateY(var(--r1,0px))}
  78%{transform:translateY(calc(var(--r2,0px) + 8px))}
  100%{transform:translateY(var(--r2,0px))}
}
.reel-spin-blur .r3d-sym{filter:blur(2.5px) brightness(0.84)}
.r3d-sym{height:80px;display:flex;align-items:center;justify-content:center;font-size:2.6rem;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));user-select:none}
.r3d-sym.sym-win{filter:drop-shadow(0 0 12px gold);animation:sym-pop 0.4s var(--ease) 3}
@keyframes sym-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.payline-wire{position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,0.1);transform:translateY(-50%);z-index:8;pointer-events:none;box-shadow:0 0 8px rgba(255,255,255,0.05)}
.slot-payline-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none;overflow:visible;color:var(--mc,#f59e0b);opacity:0;transition:opacity .3s ease}
.slot-payline-overlay.on{opacity:1}
.slot-payline-path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);opacity:0.95;vector-effect:non-scaling-stroke}
.reel-fade{position:absolute;left:0;right:0;height:70px;z-index:9;pointer-events:none}
.top-fade{top:0;background:linear-gradient(to bottom,#060810 0%,rgba(6,8,16,0.8) 50%,transparent 100%)}
.bot-fade{bottom:0;background:linear-gradient(to top,#060810 0%,rgba(6,8,16,0.8) 50%,transparent 100%)}
.reel-sep{width:1px;background:rgba(255,255,255,0.06);flex-shrink:0}

/* Win announce overlay */
.win-announce{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);z-index:40;background:rgba(0,0,0,0.92);border-radius:var(--r3);padding:1.5rem 3rem;text-align:center;border:1px solid;display:none;flex-direction:column;align-items:center;gap:0.3rem;backdrop-filter:blur(8px)}
.win-announce.show{display:flex;animation:wa-pop 0.4s var(--ease) forwards}
@keyframes wa-pop{from{transform:translate(-50%,-50%) scale(0.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.wa-label{font-size:0.7rem;font-weight:800;letter-spacing:3px;color:var(--text2)}
.wa-amount{font-family:'Space Grotesk',sans-serif;font-size:3.5rem;font-weight:900;line-height:1;letter-spacing:-2px}
.wa-multi{font-size:0.9rem;color:var(--text2);font-weight:600}

.spin-msg{min-height:2rem;text-align:center;padding:0.4rem;font-family:'Space Grotesk',sans-serif;font-size:0.88rem;font-weight:700;letter-spacing:1px;flex-shrink:0}
.sm-win{color:var(--green)}.sm-jackpot{color:var(--gold);animation:jp-flash 0.5s ease infinite alternate}.sm-lose{color:var(--text3)}
@keyframes jp-flash{from{opacity:1}to{opacity:0.4}}

/* SLOTS HUD — bottom control bar, Rainbet style */
.slots-hud{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.9rem 1.5rem;
  background:var(--bg1);border-top:1px solid var(--border);
  gap:1rem;flex-shrink:0;z-index:10;
}
.hud-left{display:flex;gap:1.5rem}
.hud-stat{display:flex;flex-direction:column;gap:1px}
.hud-stat-label{font-size:0.6rem;font-weight:700;letter-spacing:1.5px;color:var(--text3)}
.hud-stat-value{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:800;color:var(--text1);letter-spacing:-0.3px}
.hud-stat-value.green{color:var(--green)}
.hud-center{display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.hud-bet-group{display:flex;align-items:center;gap:0.4rem}
.hud-adj{width:34px;height:34px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);color:var(--text1);font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0}
.hud-adj:hover{background:var(--bg4);border-color:var(--accent)}
.hud-bet-box{min-width:80px;text-align:center;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:0.35rem 0.75rem}
.hud-bet-label{font-size:0.58rem;font-weight:800;letter-spacing:1.5px;color:var(--text3)}
.hud-bet-val{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:800;color:var(--accent2);letter-spacing:-0.3px;line-height:1}
.hud-quick-bets{display:flex;gap:0.3rem}
.hqb{padding:0.3rem 0.6rem;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:0.75rem;font-weight:700;transition:all 0.15s}
.hqb:hover{border-color:var(--accent);color:var(--accent2)}
.hqb-max{background:rgba(99,102,241,0.1);border-color:rgba(99,102,241,0.3);color:var(--accent2)}
.hud-right{display:flex;align-items:center;gap:0.75rem}
.hud-auto-wrap{display:flex;flex-direction:column;align-items:center;gap:0.35rem}
.hud-auto-btn{display:flex;align-items:center;gap:0.4rem;padding:0.55rem 1rem;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);color:var(--text2);font-size:0.78rem;font-weight:700;letter-spacing:0.5px;transition:all 0.15s;white-space:nowrap}
.hud-auto-btn:hover{border-color:var(--accent);color:var(--accent2)}
.hud-auto-btn.active{border-color:var(--red);color:var(--red);background:rgba(239,68,68,0.08)}
.auto-config{display:flex;gap:0.3rem;flex-wrap:wrap}
.ac-opt{padding:0.3rem 0.55rem;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:0.72rem;font-weight:800;transition:all 0.15s}
.ac-opt:hover{border-color:var(--accent);color:var(--accent2)}

/* THE SPIN BUTTON — hero element */
.hud-spin-btn{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent2),var(--accent3));
  border:none;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:'Space Grotesk',sans-serif;font-size:0.65rem;font-weight:800;letter-spacing:1px;
  transition:all 0.2s var(--ease);
  box-shadow:0 0 0 4px rgba(99,102,241,0.2),0 8px 24px rgba(99,102,241,0.4);
  flex-shrink:0;
}
.hud-spin-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 0 0 6px rgba(99,102,241,0.25),0 12px 32px rgba(99,102,241,0.5)}
.hud-spin-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none}
.hud-spin-btn.spinning .spin-btn-icon{animation:spin-icon 0.8s linear infinite}
@keyframes spin-icon{to{transform:rotate(360deg)}}
.spin-btn-icon{width:22px;height:22px}
.rou-spin-btn{width:auto!important;height:auto!important;border-radius:var(--r)!important;padding:0.8rem 2.5rem!important;font-size:0.95rem!important;letter-spacing:1px!important}

/* ══════════════════════ BLACKJACK ══════════════════════ */
.bj-viewport{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.bj-fx-canvas,.rou-fx-canvas,.bac-fx-canvas{position:absolute;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}
.bj-felt{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-around;
  padding:2rem;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%,#1a5c38 0%,#0a2a1c 55%,#060e10 100%);
}
.bj-felt::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0.015) 0%,transparent 70%);pointer-events:none}
.felt-logo{font-size:0.7rem;font-weight:700;letter-spacing:5px;color:rgba(255,255,255,0.07);text-align:center;pointer-events:none}
.felt-rules{font-size:0.62rem;letter-spacing:2px;color:rgba(255,255,255,0.06);text-align:center;pointer-events:none;margin-top:4px}
.bj-deck-info{position:absolute;top:1rem;right:1.5rem;display:flex;align-items:center;gap:0.5rem}
.bdi-stack{position:relative;width:28px;height:38px}
.bdi-card{position:absolute;width:22px;height:30px;border-radius:3px;border:1px solid rgba(255,255,255,0.15);background:repeating-linear-gradient(45deg,#1a1a6e,#1a1a6e 3px,#222a80 3px,#222a80 6px)}
.bdi-c1{bottom:0;left:0}.bdi-c2{bottom:3px;left:3px}.bdi-c3{bottom:6px;left:6px}
.bdi-count{font-family:'Space Grotesk',sans-serif;font-size:0.9rem;font-weight:700;color:rgba(255,255,255,0.4)}
.bj-area{display:flex;flex-direction:column;align-items:center;gap:0.6rem;width:100%}
.bj-area-label{font-size:0.68rem;font-weight:800;letter-spacing:3px;color:rgba(255,255,255,0.35);display:flex;align-items:center;gap:0.5rem}
.hand-val{background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.12);border-radius:20px;padding:1px 10px;font-size:0.82rem;color:white;font-weight:700}
.hand-val.bust{color:var(--red);border-color:rgba(239,68,68,0.4)}
.hand-val.bj{color:var(--gold);border-color:rgba(245,158,11,0.4)}
.card-row,.bac-card-row{display:flex;gap:0.4rem;min-height:100px;align-items:center;justify-content:center;flex-wrap:wrap}
.bj-outcome-banner{text-align:center;min-height:2.5rem;display:flex;align-items:center;justify-content:center}
.bj-outcome-text{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;color:rgba(255,255,255,0.5);letter-spacing:0.5px;transition:all 0.2s}
.bj-outcome-text.win{color:var(--gold);font-size:1.6rem;text-shadow:0 0 30px rgba(245,158,11,0.5)}
.bj-outcome-text.big{color:var(--gold);font-size:2rem;animation:jp-flash 0.4s ease infinite alternate}
.bj-outcome-text.lose{color:var(--red)}
.bj-outcome-text.push{color:var(--blue)}
.bj-controls{flex-shrink:0;background:var(--bg1);border-top:1px solid var(--border);padding:1rem 1.5rem}
.bj-panel{display:flex;flex-direction:column;gap:0.75rem}
.bj-chips{display:flex;gap:0.6rem;justify-content:center}
.bchip{width:54px;height:54px;border-radius:50%;font-size:0.75rem;font-weight:800;border:3px dashed rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.18s;box-shadow:0 4px 12px rgba(0,0,0,0.4);color:white;position:relative}
.bchip::after{content:'';position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(255,255,255,0.12)}
.bchip:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 10px 24px rgba(0,0,0,0.4)}
.ch5{background:radial-gradient(circle at 35% 30%,#ef4444,#991b1b)}
.ch25{background:radial-gradient(circle at 35% 30%,#22c55e,#15803d)}
.ch100{background:radial-gradient(circle at 35% 30%,#3b82f6,#1d4ed8)}
.ch500{background:radial-gradient(circle at 35% 30%,#a855f7,#7e22ce)}
.ch1k{background:radial-gradient(circle at 35% 30%,#2c3e50,#0f1923);border-color:rgba(245,158,11,0.4)}
.bj-bet-bar{display:flex;align-items:center;gap:0.75rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:0.75rem 1rem}
.bbb-left{display:flex;flex-direction:column;gap:2px}
.bbb-label{font-size:0.6rem;font-weight:800;letter-spacing:1.5px;color:var(--text3)}
.bbb-amount{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:900;color:var(--gold);line-height:1;letter-spacing:-1px}
.bbb-chips-vis{flex:1;display:flex;gap:0.3rem;flex-wrap:wrap;align-items:center}
.chip-vis{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,0.15);font-size:0.5rem;font-weight:800;color:white;display:flex;align-items:center;justify-content:center}
.bbb-right{display:flex;gap:0.5rem;align-items:center}
.bj-clear-btn{padding:0.4rem 0.8rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text2);font-size:0.75rem;font-weight:700;letter-spacing:1px;transition:all 0.15s}
.bj-clear-btn:hover{color:var(--red);border-color:rgba(239,68,68,0.3)}
.bj-deal-btn{padding:0.65rem 2rem;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-family:'Space Grotesk',sans-serif;font-size:0.95rem;font-weight:800;letter-spacing:0.5px;transition:all 0.18s}
.bj-deal-btn:hover{background:var(--accent2);box-shadow:0 4px 20px rgba(99,102,241,0.4)}
.bj-actions{display:flex;gap:0.6rem}
.bja{flex:1;padding:0.85rem 0.5rem;border:none;border-radius:var(--r2);display:flex;flex-direction:column;align-items:center;gap:0.25rem;font-family:'Space Grotesk',sans-serif;font-size:0.88rem;font-weight:800;letter-spacing:1px;cursor:pointer;transition:all 0.18s}
.bja:hover{transform:translateY(-2px);filter:brightness(1.1)}
.bja:disabled{opacity:0.35;cursor:not-allowed;transform:none}
.bja-sub{font-size:0.6rem;font-weight:500;letter-spacing:0.3px;opacity:0.75}
.bja.hit{background:var(--green);color:#001a09}
.bja.stand{background:var(--red);color:#fff}
.bja.double{background:var(--purple);color:#fff}
.bj-current-bet{text-align:center;font-size:0.8rem;color:var(--text2)}
.bj-result-btns{display:flex;gap:0.6rem;justify-content:center}
.bj-rebet-btn{padding:0.65rem 2rem;background:var(--bg3);border:1px solid rgba(245,158,11,0.3);border-radius:var(--r);font-family:'Space Grotesk',sans-serif;font-size:0.95rem;font-weight:700;color:var(--gold);transition:all 0.18s}
.bj-rebet-btn:hover{background:rgba(245,158,11,0.08)}
.bj-hist-list{display:flex;flex-direction:column;gap:0.25rem;overflow-y:auto;max-height:200px}
.bj-hist-empty,.spin-log-empty{font-size:0.75rem;color:var(--text3);padding:0.3rem}
.bjh-row{display:flex;align-items:center;gap:0.4rem;padding:0.35rem 0.4rem;background:var(--bg2);border-radius:6px;font-size:0.72rem;border-left:2px solid var(--border)}
.bjh-row.win{border-left-color:var(--green)}.bjh-row.lose,.bjh-row.bust{border-left-color:var(--red)}.bjh-row.bj{border-left-color:var(--gold)}.bjh-row.push{border-left-color:var(--blue)}
.bjh-icon{font-size:0.85rem;flex-shrink:0}
.bjh-name{flex:1;font-weight:600}
.bjh-net{font-weight:700;font-size:0.73rem}

/* Playing cards */
.pcard{width:68px;height:96px;background:white;border-radius:8px;border:1px solid #ddd;display:flex;flex-direction:column;padding:5px;box-shadow:2px 4px 16px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.9);position:relative;animation:deal-in 0.28s var(--ease);flex-shrink:0}
@keyframes deal-in{from{transform:translateY(-30px) rotate(-5deg) scale(0.8);opacity:0}to{transform:none;opacity:1}}
.pcard.facedown{background:repeating-linear-gradient(45deg,#1a2060,#1a2060 3px,#222a80 3px,#222a80 6px);border-color:#1a2060}
.pcback{position:absolute;inset:5px;border-radius:5px;border:1px solid rgba(255,255,255,0.08)}
.pcorner{display:flex;flex-direction:column;line-height:1}
.pr{font-size:0.85rem;font-weight:900}
.ps{font-size:0.62rem}
.pccenter{flex:1;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.pcorner.br{position:absolute;bottom:5px;right:5px;transform:rotate(180deg)}
.cr{color:#c0392b}.cb{color:#1a1a2e}

/* ══════════════════════ ROULETTE ══════════════════════ */
.rou-viewport{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem;overflow-y:auto;position:relative}
.rou-wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:0.75rem;position:relative}
#rou-canvas{border-radius:50%;box-shadow:0 0 60px rgba(239,68,68,0.15),0 0 120px rgba(239,68,68,0.05)}
.rou-result-badge{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:900;min-height:2.5rem;text-align:center;letter-spacing:-0.5px}
.rou-controls{display:flex;flex-direction:column;align-items:center;gap:0.75rem;width:100%;max-width:360px}
.rou-bet-adj-row{display:flex;align-items:center;gap:0.5rem;width:100%}
.rou-bet-list-wrap{display:flex;flex-direction:column;gap:0.3rem;overflow-y:auto}
.rou-bbet{display:flex;align-items:center;justify-content:space-between;padding:0.55rem 0.7rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;font-size:0.8rem;font-weight:600;transition:all 0.15s}
.rou-bbet:hover{border-color:var(--border2);background:var(--bg3)}
.rou-bbet.selected{border-color:var(--accent);background:rgba(99,102,241,0.08);color:var(--accent2)}
.rou-bbet-multi{font-size:0.68rem;color:var(--text2);font-weight:400}
.rou-bbet.selected .rou-bbet-multi{color:var(--accent2)}
.rou-bet-summary{font-size:0.82rem;color:var(--text2);text-align:center;padding:0.5rem;background:var(--bg2);border-radius:var(--r);border:1px solid var(--border)}
.rou-history{display:flex;flex-direction:column;gap:0.25rem;overflow-y:auto;max-height:200px}
.rh-row{display:flex;align-items:center;gap:0.4rem;padding:0.3rem 0.4rem;background:var(--bg2);border-radius:6px;font-size:0.72rem}
.rh-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:800;flex-shrink:0}
.rh-num.red{background:rgba(239,68,68,0.2);color:var(--red)}.rh-num.black{background:rgba(255,255,255,0.08);color:var(--text1)}.rh-num.green{background:rgba(34,197,94,0.15);color:var(--green)}
.rh-bet{color:var(--text2);flex:1}
.rh-net{font-weight:700}

/* ══════════════════════ PLINK ══════════════════════ */
.plink-viewport.plink-shake{animation:plink-shake-anim 0.48s cubic-bezier(0.36,0.07,0.19,0.97) both}
@keyframes plink-shake-anim{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  15%{transform:translate3d(calc(var(--plink-shake)*-1),2px,0) rotate(-0.35deg)}
  30%{transform:translate3d(var(--plink-shake),-2px,0) rotate(0.25deg)}
  45%{transform:translate3d(calc(var(--plink-shake)*-0.6),1px,0) rotate(-0.15deg)}
  60%{transform:translate3d(calc(var(--plink-shake)*0.4),0,0)}
}
#plink-result-badge.plink-win-pulse{animation:plink-badge-pulse 1s ease-out 1}
#plink-result-badge.plink-lose{box-shadow:inset 0 0 0 1px rgba(239,68,68,0.22)}
@keyframes plink-badge-pulse{
  0%{box-shadow:0 0 0 0 rgba(129,140,248,0.55)}
  100%{box-shadow:0 0 28px 6px rgba(129,140,248,0)}
}

.plink-viewport{
  --plink-shake:6px;
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0.95rem;
  padding:1rem 1.25rem 1.5rem;overflow-y:auto;position:relative;min-height:0;
  background:radial-gradient(circle 18% at 21% 22%, rgba(99,102,241,0.22), transparent 34%),
    radial-gradient(circle 25% at 80% 70%, rgba(245,158,11,0.16), transparent 36%),
    linear-gradient(140deg, #080d1a 0%, #090f1d 45%, #07101a 100%);
  backdrop-filter:blur(2px);
  animation:plink-bg-move 14s ease infinite;
  border-radius:var(--r3);
}
.plink-viewport::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size:24px 24px;opacity:0.22;pointer-events:none;z-index:10;
}
.plink-screen .game-shell{align-items:flex-start;justify-content:center}
.plink-screen .game-sidebar{max-width:280px;min-width:280px}
.plink-screen .plink-viewport{max-width:780px;width:100%;position:relative;overflow:hidden}
.plink-viewport::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(130deg, rgba(7,12,24,0.75), rgba(7,12,24,0.55));mix-blend-mode:screen;animation:plink-bg-ambient 14s ease infinite}
@keyframes plink-bg-ambient{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
@keyframes plink-bg-move{0%{background-position:0% 0%,0% 0%,0% 0%}50%{background-position:55% 25%,70% 80%,100% 100%}100%{background-position:0% 0%,0% 0%,0% 0%}}

.plink-fx-canvas{position:absolute;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}
.plink-canvas-wrap{width:100%;max-width:560px;flex:none;min-height:340px;border-radius:var(--r2);border:1px solid var(--border);overflow:hidden;background:rgba(8,16,36,0.9);box-shadow:0 15px 45px rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center}
.plink-canvas{width:100%;height:auto;max-height:520px;display:block;}

#plink-canvas{display:block;width:100%;height:100%}
.plink-result-badge{font-family:'Space Grotesk',sans-serif;font-size:1.06rem;font-weight:800;min-height:2.5rem;text-align:center;color:var(--text1);padding:0.6rem 0.8rem;background:rgba(8,15,27,0.9);border:1px solid rgba(255,255,255,0.14);border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,0.45);width:100%;max-width:560px}
.plink-controls{display:flex;flex-direction:column;align-items:center;gap:0.65rem;width:100%;max-width:520px}
.plink-extra-controls{display:flex;align-items:center;justify-content:center;gap:0.55rem;flex-wrap:wrap;width:100%;max-width:520px}
.plink-extra-controls .hud-mini-btn{border:1px solid rgba(99,102,241,0.4);background:rgba(99,102,241,0.14);border-radius:10px;color:#fff;padding:0.4rem 0.75rem;font-size:0.82rem;font-weight:700;cursor:pointer;transition:all .18s}
.plink-extra-controls .hud-mini-btn:hover{transform:translateY(-1px);background:rgba(99,102,241,0.24)}
.plink-stats-row{display:flex;justify-content:space-between;align-items:center;gap:0.65rem;width:100%;max-width:520px;font-size:0.82rem;color:var(--text2)}
#plink-highscore-label,#plink-top-payout-label{display:inline-block;background:rgba(10,14,33,0.7);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:0.35rem 0.6rem}
.plink-controls .rou-bet-adj-row{width:100%;max-width:440px;gap:0.55rem;justify-content:center}
.plink-controls .hud-adj{width:40px;height:40px;border-radius:10px;background:rgba(129,140,248,0.16);border:1px solid rgba(99,102,241,0.35);font-size:1.3rem;color:#fff;transition:all 0.17s}
.plink-controls .hud-adj:hover{transform:translateY(-2px);background:rgba(99,102,241,0.4)}
.plink-drop-btn{font-family:'Space Grotesk',sans-serif;font-size:0.94rem;font-weight:800;width:100%;max-width:440px;padding:0.82rem 1.2rem;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#0e1322;border:none;border-radius:12px;box-shadow:0 10px 22px rgba(245,158,11,0.38);letter-spacing:0.7px;transition:transform 0.16s,box-shadow 0.16s}
.plink-drop-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(245,158,11,0.5)}
.plink-repeat-btn{width:100%;max-width:440px;padding:0.68rem 1rem;border:1px solid rgba(129,140,248,0.4);border-radius:10px;background:rgba(18,24,48,0.85);color:var(--text2);font-weight:700;transition:all 0.15s}
.plink-repeat-btn:hover{background:rgba(99,102,241,0.16);color:var(--text1)}
.plink-side-hint{font-size:0.78rem;color:var(--text2);line-height:1.55;margin:0}
.plink-history{display:flex;flex-direction:column;gap:0.28rem;max-height:168px;overflow-y:auto;width:100%;max-width:520px}

.plink-hist-row{display:flex;justify-content:space-between;align-items:center;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:0.3rem 0.5rem;font-size:0.72rem;font-weight:700}
.plink-hist-m{color:var(--gold)}
.gc-plink .plink-lobby-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:120px;background:linear-gradient(165deg,#1e1b4b 0%,#0f172a 50%,#0a0c18 100%)}
.plink-lobby-pegs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;padding:1rem 1.25rem;max-width:140px}
.plink-lobby-pegs span{width:9px;height:9px;border-radius:50%;background:linear-gradient(145deg,#fde68a,#f59e0b);box-shadow:0 0 10px rgba(251,191,36,0.4)}
.plink-lobby-glow{background:radial-gradient(circle at 50% 85%,rgba(245,158,11,0.35),transparent 65%)}

/* ══════════════════════ BACCARAT ══════════════════════ */
.bac-viewport{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.bac-felt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;background:radial-gradient(ellipse at 50% 50%,#1a3a5c 0%,#0a1a2c 55%,#06080f 100%);position:relative;overflow:hidden}
.bac-table{display:flex;align-items:stretch;gap:0;width:100%;max-width:700px}
.bac-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:0.75rem;padding:1.5rem;background:rgba(0,0,0,0.15);border-radius:var(--r2)}
.bac-side-label{font-size:0.72rem;font-weight:800;letter-spacing:3px;color:rgba(255,255,255,0.4)}
.bac-hand-val{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:900;color:rgba(255,255,255,0.6);min-height:2.5rem}
.bac-center{width:120px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:1rem 0.5rem}
.bac-outcome-badge{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:800;letter-spacing:1px;text-align:center;color:rgba(255,255,255,0.3);background:rgba(0,0,0,0.3);border-radius:var(--r2);padding:0.5rem 0.75rem;border:1px solid rgba(255,255,255,0.08)}
.bac-outcome-badge.win{color:var(--gold);border-color:rgba(245,158,11,0.3);background:rgba(245,158,11,0.08)}
.bac-controls{flex-shrink:0;background:var(--bg1);border-top:1px solid var(--border);padding:1rem 1.5rem;display:flex;flex-direction:column;gap:0.75rem}
.bac-bet-choices{display:flex;gap:0.6rem;justify-content:center}
.bac-choice{flex:1;max-width:140px;padding:1rem;background:var(--bg3);border:2px solid var(--border);border-radius:var(--r2);cursor:pointer;text-align:center;transition:all 0.18s}
.bac-choice:hover{border-color:var(--border2);background:var(--bg4)}
.bac-choice.selected{border-color:var(--accent);background:rgba(99,102,241,0.1)}
.bac-choice.banker.selected{border-color:var(--red);background:rgba(239,68,68,0.08)}
.bac-choice.player.selected{border-color:var(--blue);background:rgba(59,130,246,0.08)}
.bac-choice.tie.selected{border-color:var(--green);background:rgba(34,197,94,0.08)}
.bcc-name{font-family:'Space Grotesk',sans-serif;font-size:0.85rem;font-weight:800;letter-spacing:1px;margin-bottom:0.3rem}
.bcc-odds{font-size:0.72rem;color:var(--text2)}
.bac-choice.selected .bcc-odds{color:inherit;opacity:0.8}
.bac-bead-road{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;overflow-y:auto;max-height:100px}
.bead{width:100%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.55rem;font-weight:800}
.bead.banker{background:rgba(239,68,68,0.2);color:var(--red);border:1px solid rgba(239,68,68,0.3)}
.bead.player{background:rgba(59,130,246,0.2);color:var(--blue);border:1px solid rgba(59,130,246,0.3)}
.bead.tie{background:rgba(34,197,94,0.15);color:var(--green);border:1px solid rgba(34,197,94,0.25)}
.banker-side{border-right:1px solid rgba(239,68,68,0.15)}
.player-side{border-left:1px solid rgba(59,130,246,0.15)}

/* ══════════════════════ MISC ══════════════════════ */
.ann-banner{position:fixed;top:0;left:0;right:0;z-index:9999;padding:0.65rem 3rem;font-size:0.85rem;font-weight:600;text-align:center;background:var(--bg3);border-bottom:2px solid var(--accent);color:var(--text1)}
.ann-close{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);font-size:1.1rem;cursor:pointer}
.admin-fab{position:fixed;bottom:1.25rem;right:1.25rem;width:36px;height:36px;background:var(--bg2);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.95rem;color:var(--text3);opacity:0.35;transition:opacity 0.2s;z-index:500;text-decoration:none}
.admin-fab:hover{opacity:1}
.gold{color:var(--gold)}.green{color:var(--green)}.red{color:var(--red)}.blue{color:var(--blue)}

@media(max-width:900px){
  .auth-left{display:none}
  .auth-right{width:100%;border-left:none;background:transparent}
  #app-screen.active{flex-direction:column}
  .sidebar{display:none;position:fixed;left:0;top:0;bottom:0;z-index:100;transform:translateX(-100%);transition:transform 0.25s var(--ease)}
  .sidebar.open{display:flex;transform:translateX(0);box-shadow:4px 0 40px rgba(0,0,0,0.6)}
  .topbar{display:flex}
  .main-content{
    height:calc(100dvh - 53px);
    height:calc(100svh - 53px);
    padding-bottom:max(0.75rem, env(safe-area-inset-bottom, 0px));
    box-sizing:border-box;
  }
  #app-screen.active .main-content{
    padding-bottom:calc(0.75rem + 4.35rem + env(safe-area-inset-bottom, 0px));
  }
  .game-sidebar{display:none}
  .right-sidebar{display:none}
  .slots-hud{padding:0.6rem 0.75rem;gap:0.5rem;padding-bottom:calc(0.6rem + env(safe-area-inset-bottom, 0px))}
  .hud-quick-bets{display:none}
  #cases-screen .game-shell{padding-bottom:env(safe-area-inset-bottom, 0px)}
  #crash-screen .crash-hud-footer{padding-bottom:calc(0.85rem + env(safe-area-inset-bottom, 0px))}
  .bj-controls,.bac-controls,.rou-controls,.plink-controls{padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px))}
}
@media(max-width:600px){
  .game-grid{grid-template-columns:1fr 1fr}
  .bj-actions{gap:0.4rem}
  .bj-chips{gap:0.4rem}
  .bchip{width:46px;height:46px;font-size:0.68rem}
  #rou-canvas{width:260px!important;height:260px!important}
}

/* ═══════════════════════════════════════════════════════════
   CIPHER v5.1 — REALISM UPDATE
   Animated chips · Real card physics · Casino textures
═══════════════════════════════════════════════════════════ */

/* ── Toast Notifications ── */
#toast-container{position:fixed;top:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:0.5rem;pointer-events:none}
.toast{display:flex;align-items:center;gap:0.65rem;padding:0.75rem 1rem;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);box-shadow:0 8px 30px rgba(0,0,0,0.4);font-size:0.85rem;font-weight:500;pointer-events:all;animation:toast-in 0.3s var(--ease);max-width:320px;backdrop-filter:blur(8px)}
@keyframes toast-in{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}
.toast.out{animation:toast-out 0.25s ease forwards}
@keyframes toast-out{to{transform:translateX(120%);opacity:0}}
.toast-icon{font-size:1.1rem;flex-shrink:0}
.toast-msg{flex:1}
.toast.win{border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.12)}
.toast.lose{border-color:rgba(239,68,68,0.3);background:rgba(239,68,68,0.08)}
.toast.info{border-color:rgba(99,102,241,0.4);background:rgba(99,102,241,0.1)}
.toast.gold{border-color:rgba(245,158,11,0.4);background:rgba(245,158,11,0.1)}

/* ── Daily Bonus Banner ── */
.daily-bonus-bar{display:flex;align-items:center;gap:0.75rem;background:linear-gradient(135deg,rgba(245,158,11,0.12),rgba(251,191,36,0.06));border:1px solid rgba(245,158,11,0.25);border-radius:var(--r2);padding:0.75rem 1rem;margin-bottom:1.25rem;cursor:pointer;transition:border-color 0.2s}
.daily-bonus-bar:hover{border-color:rgba(245,158,11,0.5)}
.dbb-icon{font-size:1.5rem;flex-shrink:0}
.dbb-text{flex:1}
.dbb-title{font-size:0.88rem;font-weight:700;color:var(--gold)}
.dbb-sub{font-size:0.72rem;color:var(--text2);margin-top:1px}
.dbb-btn{padding:0.4rem 1rem;background:var(--gold);color:#000;border:none;border-radius:var(--r);font-size:0.78rem;font-weight:800;transition:all 0.15s;white-space:nowrap}
.dbb-btn:hover{background:var(--gold2)}
.dbb-claimed{padding:0.4rem 1rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);font-size:0.78rem;color:var(--text3);white-space:nowrap}

/* ── XP / Level ── */
.sb-xp-bar{margin:0 0.75rem 0.5rem;padding:0.6rem 0.85rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2)}
.sxp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.4rem}
.sxp-level{font-size:0.72rem;font-weight:800;color:var(--accent2)}
.sxp-label{font-size:0.65rem;color:var(--text3)}
.sxp-track{height:5px;background:var(--bg1);border-radius:3px;overflow:hidden}
.sxp-fill{height:100%;background:linear-gradient(90deg,var(--accent3),var(--accent2));border-radius:3px;transition:width 0.5s var(--ease)}

/* ── Hotkeys HUD ── */
.hotkeys-hint{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);display:flex;gap:0.5rem;z-index:100;pointer-events:none;opacity:0;transition:opacity 0.3s}
.hotkeys-hint.show{opacity:1}
.hk-key{padding:0.25rem 0.5rem;background:rgba(0,0,0,0.7);border:1px solid var(--border2);border-radius:5px;font-size:0.68rem;font-weight:700;color:var(--text2);backdrop-filter:blur(4px)}

/* ══════════════════════════════
   BLACKJACK — FULL REALISM
══════════════════════════════ */

/* Felt texture overlay */
.bj-felt::after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.006) 2px,rgba(255,255,255,0.006) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,255,255,0.006) 2px,rgba(255,255,255,0.006) 4px);pointer-events:none;z-index:1}
.bj-felt>*{position:relative;z-index:2}

/* Casino-grade playing cards */
.pcard{
  width:72px;height:100px;
  background:white;border-radius:8px;
  border:1px solid rgba(0,0,0,0.12);
  display:flex;flex-direction:column;padding:5px;
  box-shadow:2px 4px 12px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.1),inset 0 1px 0 rgba(255,255,255,0.9);
  position:relative;flex-shrink:0;
  transform-origin:center bottom;
}
.pcard.deal-from-shoe{animation:deal-from-shoe 0.35s var(--ease) both}
@keyframes deal-from-shoe{
  from{transform:translateX(-180px) translateY(-60px) rotate(-12deg) scale(0.7);opacity:0}
  to{transform:none;opacity:1}
}
.pcard.facedown{
  background:linear-gradient(135deg,#1a1060 25%,#2d1f8a 50%,#1a1060 75%);
  background-size:8px 8px;
  border-color:#1a1060;
}
.pcard.facedown::after{content:'';position:absolute;inset:5px;border-radius:4px;border:1.5px solid rgba(255,255,255,0.12);background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.04) 6px)}
.pcard.flip-reveal{animation:card-flip 0.4s ease both}
@keyframes card-flip{0%{transform:scaleX(1)}50%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.pcard.winning-card{animation:card-win-glow 0.5s ease 3 alternate;box-shadow:0 0 20px rgba(34,197,94,0.6),2px 4px 12px rgba(0,0,0,0.5)}
@keyframes card-win-glow{from{box-shadow:0 0 0 rgba(34,197,94,0)}to{box-shadow:0 0 20px rgba(34,197,94,0.7),2px 4px 12px rgba(0,0,0,0.5)}}
.pcard.bj-card{box-shadow:0 0 20px rgba(245,158,11,0.7),2px 4px 12px rgba(0,0,0,0.5)!important}

/* Card inner content */
.pcorner{display:flex;flex-direction:column;line-height:1;align-items:flex-start}
.pr{font-size:1rem;font-weight:900;line-height:1}
.ps{font-size:0.75rem;line-height:1}
.pccenter{flex:1;display:flex;align-items:center;justify-content:center;font-size:1.8rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15))}
.pcorner.br{position:absolute;bottom:5px;right:5px;transform:rotate(180deg)}
.cr{color:#c0392b}.cb{color:#1a1a2e}

/* Card shoe indicator */
.card-shoe{position:absolute;top:1rem;right:1.5rem;display:flex;align-items:center;gap:0.5rem}
.shoe-stack{display:flex;gap:1px}
.shoe-card{width:14px;height:20px;background:linear-gradient(135deg,#1a1060,#2d1f8a);border-radius:2px;border:1px solid rgba(255,255,255,0.1)}
.shoe-info{display:flex;flex-direction:column;align-items:center}
.shoe-count{font-family:'Space Grotesk',sans-serif;font-size:0.9rem;font-weight:800;color:rgba(255,255,255,0.5);line-height:1}
.shoe-label{font-size:0.55rem;color:rgba(255,255,255,0.25);letter-spacing:1px}

/* Animated chips with physics */
.bj-chip-tray{display:flex;gap:0.75rem;justify-content:center;padding:0.5rem}
.bchip{
  width:58px;height:58px;border-radius:50%;
  font-size:0.72rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform 0.18s var(--ease),box-shadow 0.18s;
  position:relative;user-select:none;
  border:none;color:white;
}
.bchip::before{content:'';position:absolute;inset:4px;border-radius:50%;border:2px dashed rgba(255,255,255,0.3)}
.bchip::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,0.25),transparent 60%)}
.bchip:hover{transform:translateY(-6px) scale(1.08)}
.bchip:active{transform:translateY(-2px) scale(1.02)}
.ch5  {background:radial-gradient(circle at 35% 30%,#ff6b6b,#c0392b,#922b21);box-shadow:0 6px 20px rgba(192,57,43,0.5),inset 0 -3px 0 rgba(0,0,0,0.2)}
.ch25 {background:radial-gradient(circle at 35% 30%,#58d68d,#27ae60,#1e8449);box-shadow:0 6px 20px rgba(39,174,96,0.5),inset 0 -3px 0 rgba(0,0,0,0.2)}
.ch100{background:radial-gradient(circle at 35% 30%,#5dade2,#2980b9,#1f618d);box-shadow:0 6px 20px rgba(41,128,185,0.5),inset 0 -3px 0 rgba(0,0,0,0.2)}
.ch500{background:radial-gradient(circle at 35% 30%,#bb8fce,#8e44ad,#76448a);box-shadow:0 6px 20px rgba(142,68,173,0.5),inset 0 -3px 0 rgba(0,0,0,0.2)}
.ch1k {background:radial-gradient(circle at 35% 30%,#f0b429,#d4a017,#9a7d0a);box-shadow:0 6px 20px rgba(244,180,41,0.6),inset 0 -3px 0 rgba(0,0,0,0.2);color:#3a2a00}

/* Chip toss animation */
.chip-toss{position:fixed;pointer-events:none;z-index:1000;border-radius:50%;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:900;color:white;animation:chip-toss-anim 0.5s var(--ease) forwards}
@keyframes chip-toss-anim{
  0%{transform:scale(0.8) translateY(0) rotate(0deg);opacity:1}
  40%{transform:scale(1.1) translateY(-40px) rotate(180deg);opacity:1}
  100%{transform:scale(0.5) translateY(80px) rotate(360deg);opacity:0}
}

/* Stacked chip display */
.bet-chip-stack{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:30px}
.bet-chip-mini{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.55rem;font-weight:900;color:white;border:2px dashed rgba(255,255,255,0.2);flex-shrink:0;animation:chip-land 0.3s var(--ease)}
@keyframes chip-land{from{transform:scale(0) translateY(-20px);opacity:0}to{transform:none;opacity:1}}

/* Win/Lose outcome banner */
.bj-outcome-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:30;pointer-events:none;opacity:0;transition:opacity 0.3s}
.bj-outcome-overlay.show{opacity:1;pointer-events:all}
.bj-outcome-card{background:rgba(0,0,0,0.88);border-radius:var(--r3);padding:1.5rem 3rem;text-align:center;border:1px solid;backdrop-filter:blur(12px);transform:scale(0.8);transition:transform 0.35s var(--ease)}
.bj-outcome-overlay.show .bj-outcome-card{transform:scale(1)}
.bj-oc-label{font-size:0.7rem;font-weight:800;letter-spacing:3px;color:var(--text2);margin-bottom:0.4rem}
.bj-oc-result{font-family:'Space Grotesk',sans-serif;font-size:2.2rem;font-weight:900;line-height:1;letter-spacing:-1px;margin-bottom:0.4rem}
.bj-oc-amount{font-size:1rem;font-weight:600}

/* ══════════════════════════════
   SLOTS — CINEMATIC THEMES
══════════════════════════════ */

/* Theme backgrounds rendered by canvas */
.slots-bg-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.slots-lottie-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:none}
.slots-lottie-bg svg{width:100%!important;height:100%!important}
.slot-machine-3d{position:relative}
.slot-machine-3d>*{position:relative;z-index:1}

/* Reel motion blur effect */
.reel3d.spinning .r3d-sym{filter:blur(3px) brightness(0.7);transition:filter 0.1s}
.reel3d .r3d-sym{transition:filter 0.3s}

/* Symbol glow effects */
.r3d-sym.sym-wild{filter:drop-shadow(0 0 8px #ff6b35) drop-shadow(0 0 16px rgba(255,107,53,0.5))!important;animation:wild-pulse 0.6s ease infinite alternate}
@keyframes wild-pulse{from{filter:drop-shadow(0 0 8px #ff6b35)}to{filter:drop-shadow(0 0 16px #ff6b35) drop-shadow(0 0 24px rgba(255,107,53,0.4))}}
.r3d-sym.sym-jackpot{filter:drop-shadow(0 0 12px gold) drop-shadow(0 0 24px rgba(255,215,0,0.5))!important}

/* Win lines */
.win-line{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,gold,transparent);opacity:0;transform:scaleX(0);transition:all 0.3s;z-index:20}
.win-line.active{opacity:1;transform:scaleX(1);box-shadow:0 0 12px gold}

/* Machine theme badge */
.machine-theme-badge{display:flex;align-items:center;gap:0.5rem;font-size:0.72rem;font-weight:700;letter-spacing:2px;color:var(--text2);padding:0 0.5rem}
.mtb-dot{width:8px;height:8px;border-radius:50%}

/* Jackpot progressive display */
.progressive-jackpot{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(251,191,36,0.05));border-bottom:1px solid rgba(245,158,11,0.15)}
.pjp-label{font-size:0.6rem;font-weight:800;letter-spacing:2px;color:var(--text3)}
.pjp-amount{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:900;color:var(--gold);letter-spacing:-0.5px;animation:jackpot-count 0.1s ease infinite}

/* ══════════════════════════════
   ADMIN — GAME CONTROLS
══════════════════════════════ */

/* Game control cards */
.game-control-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:1.5rem}
.gc-control-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:1.25rem}
.gcc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.gcc-name{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;font-weight:700}
.gcc-status{display:flex;align-items:center;gap:0.4rem;font-size:0.72rem;font-weight:700}
.gcc-status.on{color:var(--green)}.gcc-status.off{color:var(--red)}
.gcc-control-row{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.82rem}
.gcc-control-row:last-child{border-bottom:none;padding-bottom:0}
.gcc-label{color:var(--text2);min-width:110px}
.gcc-input{width:90px;padding:0.3rem 0.5rem;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text1);font-size:0.82rem;font-weight:600;text-align:center;transition:border-color 0.15s}
.gcc-input:focus{outline:none;border-color:rgba(99,102,241,0.5)}
.gcc-select{padding:0.3rem 0.5rem;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text1);font-size:0.78rem;cursor:pointer}
.gcc-save-btn{padding:0.35rem 0.8rem;background:var(--accent);color:white;border:none;border-radius:6px;font-size:0.75rem;font-weight:700;transition:all 0.15s}
.gcc-save-btn:hover{background:var(--accent2)}
.gcc-warning{display:flex;align-items:center;gap:0.4rem;font-size:0.72rem;color:var(--red);margin-top:0.5rem;padding:0.4rem 0.6rem;background:rgba(239,68,68,0.08);border-radius:6px;border:1px solid rgba(239,68,68,0.2)}

/* Toggle switch */
.toggle-switch{position:relative;width:40px;height:22px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--bg4);border-radius:20px;cursor:pointer;transition:background 0.2s;border:1px solid var(--border2)}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;background:var(--text3);border-radius:50%;transition:all 0.2s}
.toggle-switch input:checked + .toggle-slider{background:var(--green)}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px);background:white}

/* Force result panel */
.force-result-panel{background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.2);border-radius:var(--r2);padding:0.75rem;margin-top:0.75rem}
.frp-title{font-size:0.68rem;font-weight:800;letter-spacing:1.5px;color:var(--red);margin-bottom:0.5rem}
.frp-buttons{display:flex;gap:0.4rem;flex-wrap:wrap}
.frp-btn{padding:0.35rem 0.7rem;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:0.74rem;font-weight:700;transition:all 0.15s;cursor:pointer}
.frp-btn:hover{border-color:var(--border2);color:var(--text1)}
.frp-btn.active-force{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.4);color:var(--red)}

/* Admin broadcast */
.broadcast-compose{display:flex;gap:0.5rem;align-items:flex-start}
.broadcast-input{flex:1;padding:0.65rem 0.85rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text1);font-size:0.88rem;transition:border-color 0.15s}
.broadcast-input:focus{outline:none;border-color:rgba(99,102,241,0.5)}

/* Live player monitor */
.live-players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.6rem}
.lpm-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:0.75rem;display:flex;align-items:center;gap:0.6rem;font-size:0.78rem}
.lpm-avi{font-size:1.1rem;flex-shrink:0}
.lpm-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.lpm-game{font-size:0.68rem;color:var(--text2)}
.lpm-bal{font-weight:700;color:var(--gold);white-space:nowrap;font-size:0.8rem}
.lpm-online{width:7px;height:7px;background:var(--green);border-radius:50%;flex-shrink:0}

/* ── Responsive additions ── */
@media(max-width:700px){
  .bchip{width:48px;height:48px;font-size:0.65rem}
  .bj-chip-tray{gap:0.5rem}
  .game-control-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════
   CIPHER v5.2 — CASE OPENING + QOL UPGRADES
   CS2-authentic design · Horizontal scroll reveal
═══════════════════════════════════════════════════════ */

/* ── Case tabs ── */
.case-tab{padding:0.75rem 1.25rem;background:transparent;border:none;color:var(--text2);font-size:0.85rem;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s;position:relative;bottom:-1px}
.case-tab:hover{color:var(--text1)}
.case-tab.active{color:var(--text1);border-bottom-color:var(--accent2)}
.case-tab-content{display:none}
.case-tab-content.active{display:block}

/* ── Case picker grid ── */
.case-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.case-card{background:var(--bg2);border:2px solid var(--border);border-radius:var(--r3);padding:1.25rem;cursor:pointer;transition:all 0.22s var(--ease);position:relative;overflow:hidden}
.case-card:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,0.4)}
.case-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 16px 40px rgba(99,102,241,0.2)}
.cc-glow{position:absolute;inset:0;opacity:0.4;pointer-events:none;transition:opacity 0.3s}
.case-card:hover .cc-glow{opacity:0.7}
.cc-icon{font-size:2.5rem;margin-bottom:0.5rem;line-height:1}
.cc-name{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:800;margin-bottom:0.25rem;letter-spacing:-0.3px}
.cc-desc{font-size:0.72rem;color:var(--text2);margin-bottom:0.75rem;line-height:1.4}
.cc-price{display:flex;align-items:baseline;gap:0.3rem;margin-bottom:0.25rem}
.cc-price-num{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:800;color:var(--gold)}
.cc-price-unit{font-size:0.72rem;color:var(--text2)}
.cc-opens{font-size:0.68rem;color:var(--text3);margin-bottom:0.75rem}
.odds-preview{display:flex;flex-direction:column;gap:3px}
.op-bar{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.op-fill{height:100%;border-radius:2px;min-width:3px}

/* ── Case open button ── */
.case-open-bar{display:flex;justify-content:center}
.case-open-btn{padding:0.9rem 2.5rem;background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;border:none;border-radius:var(--r2);font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:800;letter-spacing:0.5px;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 20px rgba(99,102,241,0.4);min-width:320px}
.case-open-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px rgba(99,102,241,0.5)}
.case-open-btn:disabled{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Case items list ── */
.cil-section{margin-bottom:1rem}
.cil-rarity-hdr{display:flex;align-items:center;gap:0.5rem;font-size:0.72rem;font-weight:800;letter-spacing:1.5px;padding:0.4rem 0;border-bottom:1px solid;margin-bottom:0.5rem;text-transform:uppercase}
.cil-rarity-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cil-rarity-pct{margin-left:auto;font-size:0.7rem;opacity:0.7}
.cil-items{display:flex;flex-direction:column;gap:0.3rem}
.cil-item{display:flex;align-items:center;gap:0.6rem;padding:0.5rem 0.65rem;background:var(--bg2);border:1px solid;border-radius:var(--r);font-size:0.78rem;transition:background 0.15s}
.cil-item:hover{background:var(--bg3)}
.cil-item-icon{font-size:1.1rem;flex-shrink:0}
.cil-item-info{flex:1}
.cil-item-name{font-weight:600;margin-bottom:1px}
.cil-item-wear{font-size:0.68rem;color:var(--text2)}
.cil-item-val{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:0.82rem;white-space:nowrap}

/* ── Inventory grid ── */
.case-inventory-grid{display:flex;flex-direction:column;gap:0.35rem}
.ci-item{display:flex;align-items:center;gap:0.6rem;padding:0.5rem 0.65rem;border:1px solid;border-radius:var(--r);font-size:0.78rem;position:relative;overflow:hidden}
.ci-rarity-stripe{position:absolute;left:0;top:0;bottom:0;width:3px}
.ci-icon{font-size:1.1rem;flex-shrink:0;margin-left:0.2rem}
.ci-info{flex:1}
.ci-name{font-weight:600;font-size:0.8rem}
.ci-wear{font-size:0.67rem;margin-top:1px}
.ci-val{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:0.82rem;white-space:nowrap}
.ci-empty{color:var(--text3);font-size:0.82rem;text-align:center;padding:2rem}
.cat-st{font-size:0.62rem;font-weight:800;color:#cf6a32;background:rgba(207,106,50,0.12);padding:1px 5px;border-radius:4px}

/* ══ ANIMATION OVERLAY ══ */
.case-anim-overlay{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.92);backdrop-filter:blur(12px);
}
.case-anim-overlay.open{display:flex;animation:fade-in-bg 0.3s ease}
@keyframes fade-in-bg{from{opacity:0}to{opacity:1}}
.case-anim-inner{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem 1rem;position:relative}
.case-anim-header{display:flex;align-items:center;gap:0.75rem;font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:800;letter-spacing:-0.3px}
.cah-icon{font-size:1.8rem;line-height:1}

/* The scroll window */
.case-anim-window{
  width:100%;position:relative;height:180px;
  border:1px solid var(--border2);border-radius:var(--r2);
  overflow:hidden;background:#06080f;
}
.case-anim-track-wrap{width:100%;height:100%;overflow:hidden;position:relative}
.case-anim-track{
  display:flex;align-items:center;gap:8px;
  height:100%;padding:0 16px;
  will-change:transform;
  position:absolute;top:0;left:0;
}

/* Individual item in track */
.cat-item{
  width:152px;height:150px;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--r2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0.3rem;
  padding:0.5rem;text-align:center;position:relative;
  overflow:hidden;transition:none;
}
.cat-rarity-bar{position:absolute;bottom:0;left:0;right:0;height:3px}
.cat-item-icon{font-size:2rem;line-height:1;margin-bottom:2px}
.cat-item-name{font-size:0.65rem;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--text1)}
.cat-item-wear{font-size:0.58rem;color:var(--text3)}
.cat-item-rarity{font-size:0.6rem;font-weight:800;letter-spacing:0.5px;margin-top:2px}
.cat-revealed{animation:item-reveal 0.4s var(--ease);z-index:5}
@keyframes item-reveal{from{transform:scale(0.9);opacity:0.5}to{transform:scale(1.08);opacity:1}}

/* Center marker */
.case-anim-center-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.5),transparent);transform:translateX(-50%);z-index:10;pointer-events:none}
.case-anim-pointer{position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;z-index:11}
.case-anim-pointer.top{top:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid rgba(255,255,255,0.6)}
.case-anim-pointer.bot{bottom:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid rgba(255,255,255,0.6)}
.case-anim-fade{position:absolute;top:0;bottom:0;width:140px;z-index:8;pointer-events:none}
.left-fade{left:0;background:linear-gradient(to right,#06080f,transparent)}
.right-fade{right:0;background:linear-gradient(to left,#06080f,transparent)}

/* Drop result card */
.case-drop-result{display:none;animation:drop-result-in 0.45s var(--ease)}
.case-drop-result.show{display:flex;align-items:center;justify-content:center}
@keyframes drop-result-in{from{opacity:0;transform:scale(0.7) translateY(20px)}to{opacity:1;transform:none}}
.cdr-card{
  background:var(--bg2);border:1px solid;border-radius:var(--r3);
  padding:2rem 2.5rem;text-align:center;
  position:relative;overflow:hidden;min-width:300px;max-width:420px;
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
}
.cdr-rarity-glow{position:absolute;inset:0;pointer-events:none;opacity:0.5}
.cdr-label{font-size:0.65rem;font-weight:800;letter-spacing:3px;margin-bottom:0.25rem}
.cdr-icon{font-size:3.5rem;line-height:1;animation:icon-bounce 0.5s var(--ease)}
@keyframes icon-bounce{from{transform:scale(0) rotate(-10deg)}to{transform:scale(1) rotate(0)}}
.cdr-st{font-size:0.75rem;font-weight:800;color:#cf6a32;background:rgba(207,106,50,0.15);padding:1px 6px;border-radius:4px}
.cdr-name{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:800;letter-spacing:-0.3px;line-height:1.2}
.cdr-wear{font-size:0.78rem;color:var(--text2)}
.cdr-rarity-badge{font-size:0.68rem;font-weight:800;letter-spacing:1px;padding:3px 10px;border-radius:20px;border:1px solid;text-transform:uppercase}
.cdr-value{display:flex;align-items:baseline;gap:0.4rem;margin-top:0.25rem}
.cdr-value-n{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:900;line-height:1}
.cdr-value-u{font-size:0.78rem;color:var(--text2)}
.cdr-float{font-size:0.68rem;color:var(--text3);font-family:monospace}
.cdr-btns{display:flex;gap:0.6rem;margin-top:0.5rem;flex-wrap:wrap;justify-content:center}
.cdr-btn-keep{padding:0.6rem 1.5rem;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-size:0.85rem;font-weight:700;cursor:pointer;transition:all 0.15s}
.cdr-btn-keep:hover{background:var(--accent2)}
.cdr-btn-sell{padding:0.6rem 1.5rem;border:1px solid;border-radius:var(--r);font-size:0.85rem;font-weight:700;cursor:pointer;transition:all 0.15s;background:transparent}
.cdr-btn-sell:hover{filter:brightness(1.2)}

.case-anim-skip{position:absolute;top:0.75rem;right:1rem;background:none;border:none;color:var(--text3);font-size:0.8rem;cursor:pointer;transition:color 0.15s}
.case-anim-skip:hover{color:var(--text1)}

/* ═══════════════════════════════════
   QOL UPGRADES v5.2
═══════════════════════════════════ */

/* Better lobby game count display */
.lgh-count{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:1px 8px;font-size:0.68rem;font-weight:700;color:var(--text3)}

/* Provably fair badge on games */
.pf-badge{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.62rem;font-weight:700;color:var(--green);opacity:0.7;letter-spacing:0.5px}
.pf-badge svg{width:10px;height:10px}

/* Better scrollbars */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* Smooth balance counter animation */
.lb-amount,.sbb-amount,.hud-stat-value,.kpi-n,.bbb-amount{transition:color 0.3s}

/* Loading skeleton */
.skel{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:200% 100%;animation:skel-pulse 1.5s ease infinite;border-radius:var(--r);height:1rem}
@keyframes skel-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Better game result animation */
@keyframes result-flash{0%,100%{opacity:1}50%{opacity:0.6}}
.result-flashing{animation:result-flash 0.3s ease 4}

/* Recent drops sidebar */
.recent-drop-row{display:flex;align-items:center;gap:0.4rem;padding:0.35rem 0.4rem;background:var(--bg2);border-radius:6px;font-size:0.72rem;border-left:2px solid var(--border);margin-bottom:0.25rem}

/* Hotkeys label in game */
.game-hotkey-hint{position:absolute;bottom:0.5rem;left:50%;transform:translateX(-50%);display:flex;gap:0.4rem;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:20}
.game-screen:hover .game-hotkey-hint{opacity:0.7}
.hk{padding:2px 6px;background:rgba(0,0,0,0.6);border:1px solid var(--border2);border-radius:4px;font-size:0.62rem;font-weight:700;color:var(--text2);backdrop-filter:blur(4px)}

/* Bet history sparkline in profile */
canvas#balance-chart{border-radius:var(--r);background:var(--bg3)}

/* Input number spinners hidden */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type=number]{-moz-appearance:textfield}

/* Auth form improved focus states */
.afield input:focus{box-shadow:0 0 0 3px rgba(99,102,241,0.15)}

/* Mobile / responsive improvements */
.mobile-mode .app-screen{flex-direction:column}
.mobile-mode .main-content{padding-top:64px;height:calc(100vh - 118px);overflow-y:auto}
.mobile-mode .sidebar{position:fixed;top:0;left:0;height:100vh;width:260px;transform:translateX(-100%);transition:transform 0.24s ease, box-shadow 0.24s ease;z-index:50;box-shadow:none}
.mobile-mode .sidebar.open{transform:translateX(0);box-shadow:20px 0 60px rgba(0,0,0,0.45)}
.mobile-mode .topbar{display:flex}
.mobile-mode .mobile-tabbar{display:flex}
.mobile-mode .main-content{margin-top:0}
.mobile-mode .page{padding:1rem}
.mobile-mode .game-shell{min-height:calc(100vh - 144px)}
.mobile-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);opacity:0;transition:opacity 0.2s ease;z-index:40}
.mobile-scrim:active{cursor:pointer}

@media (min-width:1001px) {
  .topbar{display:none !important}
  .mobile-tabbar{display:none !important}
  .mobile-scrim{display:none !important}
}

@media (max-width:1000px){
  :root{--sidebar-w:0}
  .sidebar{border-right:none}
  .main-content{padding:1rem 0.75rem 90px;}
  .page{padding:0.9rem;}
  .lobby-hero{flex-direction:column;align-items:flex-start}
  .lobby-games-hdr{justify-content:space-between;align-items:center}
  .sbn,.sbn-active,.sbn:hover{font-size:0.82rem;padding:0.62rem 0.6rem}
  .sb-promo{font-size:0.74rem; padding:0.65rem}
}

/* UI refinements */
.abtn, .abtn-outline, .sbn, .hud-auto-btn, .gsgb-name, .adm-btn-sm {transition:transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease}
.abtn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(99,102,241,0.35)}
.sbn:hover{transform:translateX(2px)}

/* Offline fallback skeleton line integrity */
@media (prefers-reduced-motion: reduce){.abtn:hover,.sbn:hover{transform:none;box-shadow:none;}}


/* Roulette result text */
.rou-result-badge{font-size:2rem;font-weight:900;text-align:center;min-height:3rem;display:flex;align-items:center;justify-content:center;letter-spacing:-1px;text-shadow:0 0 20px currentColor}

/* Balance going up animation */
@keyframes balance-up{0%{transform:scale(1)}30%{transform:scale(1.06);color:var(--green)}100%{transform:scale(1)}}
.balance-up{animation:balance-up 0.5s ease}

/* StatTrak indicator */
.st-indicator{font-size:0.62rem;font-weight:800;color:#cf6a32;background:rgba(207,106,50,0.1);border:1px solid rgba(207,106,50,0.25);padding:1px 6px;border-radius:4px}

/* Float value bar */
.float-bar{height:3px;background:linear-gradient(90deg,#4CAF50,#FFEB3B,#FF5722);border-radius:2px;position:relative;margin-top:4px}
.float-indicator{position:absolute;top:-2px;width:7px;height:7px;background:white;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 6px rgba(0,0,0,0.4)}

@media(max-width:768px){
  .case-picker{grid-template-columns:1fr}
  .case-anim-window{height:140px}
  .cat-item{width:120px;height:120px}
  .cat-item-icon{font-size:1.5rem}
  .cdr-card{padding:1.5rem}
  .case-anim-inner{padding:1rem 0.5rem}
}

body.light-mode {
  --bg0:#f4f6fb; --bg1:#ffffff; --bg2:#f8fafc; --bg3:#eef2f7; --bg4:#e2e8f0;
  --border:rgba(148,163,184,0.5); --border2:rgba(148,163,184,0.6);
  --accent:#4338ca; --accent2:#4f46e5; --accent3:#3730a3;
  --gold:#b45309; --gold2:#f59e0b;
  --green:#166534; --red:#b91c1c; --blue:#1d4ed8; --purple:#7e22ce;
  --text1:#0f172a; --text2:#334155; --text3:#64748b;
}

body.light-mode .sidebar, body.light-mode .auth-card, body.light-mode .main-content, body.light-mode .adm-sidebar, body.light-mode .adm-main { background: var(--bg2) !important; }
body.light-mode .sbn, body.light-mode .sb-promo, body.light-mode .sb-balance, body.light-mode .kpi-card { border-color: var(--border) !important; }

/* ═══════════════════════════════════════════
   AUTH IMPROVEMENTS + SVG SYMBOLS
═══════════════════════════════════════════ */
.auth-divider{display:flex;align-items:center;gap:0.75rem;margin:0.25rem 0;color:var(--text3);font-size:0.75rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.abtn-outline{width:100%;padding:0.72rem;background:transparent;border:1px solid var(--border2);border-radius:var(--r);color:var(--text2);font-size:0.88rem;font-weight:600;cursor:pointer;transition:all 0.18s}
.abtn-outline:hover{background:var(--bg3);color:var(--text1);border-color:var(--accent)}
.pw-hint{font-size:0.72rem;color:var(--text3);margin-top:0.2rem;min-height:1rem}
.reg-terms{font-size:0.72rem;color:var(--text3);line-height:1.5;text-align:center}
.afield label span{font-weight:400}

/* ─── SVG Slot Symbols ─── */
.slot-sym{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.slot-sym svg{width:54px;height:54px;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4))}
.r3d-sym{height:80px;display:flex;align-items:center;justify-content:center;flex-shrink:0;user-select:none}

/* Override emoji slot symbols with SVG-ready container */
.r3d-sym.has-svg{font-size:0;line-height:0}
.r3d-sym.sym-win svg{filter:drop-shadow(0 0 12px gold) drop-shadow(0 0 24px rgba(255,215,0,0.4))!important}

/* Case SVG icons */
.case-item-svg{width:32px;height:32px;flex-shrink:0}

/* ═══════════════════════════════════════════════════
   AUTH FORM POLISH — Email + improved registration
═══════════════════════════════════════════════════ */
.auth-divider{display:flex;align-items:center;gap:0.75rem;margin:0.25rem 0;color:var(--text3);font-size:0.75rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.abtn-outline{width:100%;padding:0.72rem;background:transparent;border:1px solid var(--border2);border-radius:var(--r);color:var(--text2);font-size:0.88rem;font-weight:600;cursor:pointer;transition:all 0.18s;margin-top:0.1rem}
.abtn-outline:hover{background:var(--bg3);color:var(--text1);border-color:var(--accent)}
.pw-hint{font-size:0.72rem;color:var(--text3);margin-top:0.2rem;min-height:1rem;transition:color 0.2s}
.reg-terms{font-size:0.7rem;color:var(--text3);line-height:1.5;text-align:center;margin-top:-0.25rem}

/* Auth left side stats */
.auth-stats-row{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.astat{text-align:center}
.astat-n{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;color:var(--accent2);line-height:1}
.astat-l{font-size:0.7rem;color:var(--text2);margin-top:3px;letter-spacing:0.3px}
.astat-div{width:1px;height:36px;background:var(--border2)}

/* ═══════════════════════════════════════════════════
   SVG SLOT SYMBOLS — Sizing & Containers
═══════════════════════════════════════════════════ */
.r3d-sym{height:80px;display:flex;align-items:center;justify-content:center;flex-shrink:0;user-select:none}
.slot-sym{display:flex;align-items:center;justify-content:center;width:72px;height:72px}
.slot-sym svg{width:52px;height:52px;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5))}
.r3d-sym.sym-win .slot-sym svg{filter:drop-shadow(0 0 14px #ffd700) drop-shadow(0 0 28px rgba(255,215,0,0.45))!important;animation:sym-pop 0.4s var(--ease) 3}
@keyframes sym-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* Cases SVG weapon icons */
.case-weapon-icon{display:flex;align-items:center;justify-content:center}
.case-weapon-icon svg{width:28px;height:28px}
.cil-item-icon .case-weapon-icon svg{width:24px;height:24px}

/* ═══════════════════════════════════════════════════
   CASES — Improved card visuals
═══════════════════════════════════════════════════ */
.cat-item-icon{display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.cat-item-icon svg{width:38px;height:38px;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4))}
.cdr-icon{display:flex;align-items:center;justify-content:center;margin:0.25rem 0}
.cdr-icon svg{width:64px;height:64px;filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5))}
.ci-icon{display:flex;align-items:center;justify-content:center}
.ci-icon svg{width:22px;height:22px}

/* ═══════════════════════════════════════════════════
   GAME CARD ART — SVG reel preview inside lobby
═══════════════════════════════════════════════════ */
.gc-reel-sym{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.1);border-radius:6px}
.gc-reel-sym svg{width:28px;height:28px}

/* ═══════════════════════════════════════════════════
   MISC QOL
═══════════════════════════════════════════════════ */
/* Smooth focus ring on all inputs */
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(99,102,241,0.15)!important}
/* Remove spinner on number inputs */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
/* Better link in register */
.auth-form a{transition:color 0.15s}
/* Balance counter green flash */
@keyframes balance-up{0%{transform:scale(1)}40%{transform:scale(1.07);color:var(--green)}100%{transform:scale(1)}}
.balance-up{animation:balance-up 0.5s ease}
/* Custom scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ── Forgot password link ── */
.forgot-link{background:none;border:none;color:var(--text3);font-size:0.75rem;cursor:pointer;padding:0;transition:color 0.15s;text-decoration:none}
.forgot-link:hover{color:var(--accent2);text-decoration:underline}

/* ── .env.example update ── */

/* ── v8 QOL: Loading states, form polish ── */
.abtn:disabled{opacity:0.6;cursor:not-allowed;transform:none!important}
.abtn-outline:disabled{opacity:0.5;cursor:not-allowed}
.aerr{min-height:1.1rem;font-size:0.8rem;color:var(--red);margin-top:0.1rem;line-height:1.4;transition:all 0.2s}
.aerr:empty{margin:0}

/* Spinning loader */
@keyframes spin{to{transform:rotate(360deg)}}
.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;margin-right:6px;vertical-align:middle}

/* Input focus glow */
.afield input:focus{box-shadow:0 0 0 3px rgba(99,102,241,0.2)!important;border-color:var(--accent)!important;outline:none}

/* Auth card header with logo */
.auth-logo{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:900;color:var(--accent2);letter-spacing:-1px;margin-bottom:0.15rem}
.auth-tagline{font-size:0.72rem;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-bottom:1.25rem}

/* Better verify nudge */
#verify-nudge{border-radius:var(--r2);animation:fade-in 0.3s ease}
@keyframes fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Cold start warning banner */
#cold-start-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:999;background:rgba(245,158,11,0.15);border-bottom:1px solid rgba(245,158,11,0.3);padding:0.5rem 1rem;text-align:center;font-size:0.8rem;color:var(--gold);backdrop-filter:blur(8px)}

/* Better checkbox styling */
.acheck{display:flex;align-items:center;gap:0.5rem;cursor:pointer;font-size:0.82rem;color:var(--text2);user-select:none}
.acheck input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.acheck span{line-height:1}

/* Admin: unverified badge */
.badge-unverified{display:inline-block;padding:2px 6px;background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);border-radius:4px;font-size:0.65rem;font-weight:700;color:#ef4444;margin-left:4px}
.badge-verified{display:inline-block;padding:2px 6px;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.25);border-radius:4px;font-size:0.65rem;font-weight:700;color:#22c55e;margin-left:4px}

/* Responsive auth */
@media(max-width:480px){
  .auth-card{padding:1.5rem 1.25rem}
  .auth-logo{font-size:1.3rem}
  .bonus-badge{font-size:0.75rem;padding:0.5rem 0.75rem}
}

/* ══════════════════════════════════════════════════════
   v8 CASES — Complete UI overhaul
══════════════════════════════════════════════════════ */

/* Case picker cards */
.cc-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.6rem}
.cc-icon-wrap{width:56px;height:56px;border-radius:12px;border:1px solid;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cc-price-row{display:flex;align-items:baseline;gap:0.35rem;margin:0.5rem 0}
.cc-price-num{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:900;line-height:1}
.cc-price-unit{font-size:0.72rem;color:var(--text2)}
.cc-odds{display:flex;flex-direction:column;gap:3px;margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--border)}
.cc-odd-row{display:flex;align-items:center;gap:0.4rem;font-size:0.68rem}
.cc-odd-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cc-odd-label{font-weight:700;flex:1}
.cc-odd-pct{color:var(--text3);font-weight:600}

/* Drop result card — fixed z-index and always-on-top */
.case-drop-result{
  display:none;
  position:absolute;inset:0;z-index:60;
  align-items:center;justify-content:center;
  background:rgba(5,5,15,0.88);
  backdrop-filter:blur(8px);
  animation:none;
}
.case-drop-result.show{display:flex;animation:result-in 0.4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes result-in{from{opacity:0;transform:scale(0.75)}to{opacity:1;transform:scale(1)}}
.cdr-card{
  background:#0f1120;border:1px solid;border-radius:18px;
  padding:2rem 2.25rem;text-align:center;
  position:relative;overflow:hidden;
  min-width:280px;max-width:380px;width:90%;
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  z-index:1;
}
.cdr-bg-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.cdr-label{font-size:0.62rem;font-weight:900;letter-spacing:3px;z-index:1;opacity:0.9}
.cdr-weapon-icon{width:90px;height:90px;display:flex;align-items:center;justify-content:center;z-index:1;animation:icon-drop 0.5s cubic-bezier(0.34,1.56,0.64,1)}
.cdr-weapon-icon svg{width:80px;height:80px;filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5))}
@keyframes icon-drop{from{transform:scale(0) rotate(-15deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.cdr-name{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:800;line-height:1.25;z-index:1}
.cdr-wear{font-size:0.75rem;color:var(--text2);z-index:1}
.cdr-st{font-size:0.7rem;font-weight:800;color:#cf6a32;background:rgba(207,106,50,0.15);padding:1px 5px;border-radius:4px}
.cdr-rarity-badge{font-size:0.65rem;font-weight:800;letter-spacing:1px;padding:3px 10px;border-radius:20px;border:1px solid;text-transform:uppercase;z-index:1}
.cdr-value-row{display:flex;align-items:baseline;gap:0.4rem;margin-top:0.25rem;z-index:1}
.cdr-value-n{font-family:'Space Grotesk',sans-serif;font-size:2.2rem;font-weight:900;line-height:1}
.cdr-value-u{font-size:0.75rem;color:var(--text2)}
.cdr-float-val{font-size:0.65rem;color:var(--text3);font-family:monospace;z-index:1}
.cdr-action-btns{display:flex;gap:0.6rem;margin-top:0.5rem;z-index:1}
.cdr-btn-primary{padding:0.65rem 2rem;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-size:0.9rem;font-weight:700;cursor:pointer;transition:all 0.15s;letter-spacing:0.3px}
.cdr-btn-primary:hover{background:var(--accent2);transform:translateY(-1px)}

/* Case animation overlay */
.case-anim-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.94);backdrop-filter:blur(16px)}
.case-anim-overlay.open{display:flex;animation:fadeIn 0.25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.case-anim-inner{width:100%;max-width:920px;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:2rem 1rem;position:relative}
.case-anim-header{display:flex;align-items:center;gap:0.75rem;font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:800}

/* Scroll window */
.case-anim-window{width:100%;position:relative;height:192px;border:1px solid var(--border2);border-radius:14px;overflow:hidden;background:#06080f}
.case-anim-track-wrap{width:100%;height:100%;overflow:hidden;position:relative}
.case-anim-track{display:flex;align-items:center;gap:8px;height:100%;padding:0 16px;will-change:transform;position:absolute;top:0;left:0}
.cat-item{width:152px;height:176px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0.5rem;text-align:center;position:relative;overflow:hidden;transition:box-shadow 0.3s,border-color 0.3s,transform 0.3s}
.cat-rarity-bar{position:absolute;bottom:0;left:0;right:0;height:3px}
.cat-item-icon{display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.cat-item-name{font-size:0.62rem;font-weight:700;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cat-item-wear{font-size:0.56rem;color:var(--text3)}
.cat-st{font-size:0.58rem;font-weight:800;color:#cf6a32}

.case-anim-center-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.55),transparent);transform:translateX(-50%);z-index:10;pointer-events:none}
.case-anim-pointer{position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;z-index:11}
.case-anim-pointer.top{top:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:11px solid rgba(255,255,255,0.65)}
.case-anim-pointer.bot{bottom:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:11px solid rgba(255,255,255,0.65)}
.case-anim-fade{position:absolute;top:0;bottom:0;width:160px;z-index:8;pointer-events:none}
.left-fade{left:0;background:linear-gradient(to right,#06080f,transparent)}
.right-fade{right:0;background:linear-gradient(to left,#06080f,transparent)}

.case-anim-skip{position:absolute;top:0.75rem;right:1rem;background:none;border:none;color:var(--text3);font-size:0.8rem;cursor:pointer;transition:color 0.15s;padding:4px 8px}
.case-anim-skip:hover{color:var(--text1)}

/* Inventory */
.ci-weapon-icon svg{filter:drop-shadow(0 1px 4px rgba(0,0,0,0.3))}

/* ══════════════════════════════════════════════════════
   v8 SLOTS — Premium feel
══════════════════════════════════════════════════════ */
.slot-sym svg{width:52px;height:52px;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4))}
.r3d-sym.sym-win .slot-sym svg,.r3d-sym.sym-win .slot-sym svg{filter:drop-shadow(0 0 16px gold) drop-shadow(0 0 30px rgba(255,215,0,0.4))}
.pt-sym{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}
.pt-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);font-size:0.75rem}

/* Win announce - bigger & more dramatic */
#win-announce{border-radius:16px;border:1px solid;padding:1.5rem 2rem;text-align:center;backdrop-filter:blur(12px)}
#wa-amount{font-family:'Space Grotesk',sans-serif;font-size:2.8rem;font-weight:900;line-height:1;margin:0.25rem 0}

/* Mobile cases */
@media(max-width:640px){
  .cat-item{width:120px;height:150px}
  .cat-item-icon .case-weapon-icon{width:32px;height:32px}
  .case-anim-window{height:168px}
  .cdr-card{padding:1.5rem 1.25rem}
  .cdr-weapon-icon{width:72px;height:72px}
  .cdr-weapon-icon svg{width:64px;height:64px}
  .cdr-value-n{font-size:1.8rem}
}

/* ═══════════════════════════════════════════════════════
   v9 SLOTS THEME — Animated BG canvas, premium symbols
═══════════════════════════════════════════════════════ */
.slots-bg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;border-radius:inherit}
.slots-viewport{position:relative;overflow:hidden}
.slot-fx-canvas{position:absolute;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}
.sv-header,.slot-machine-3d,.spin-msg,.slots-hud{position:relative;z-index:10}

/* Symbol container */
.slot-sym-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.slot-sym-wrap svg{width:52px;height:52px;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5));transition:filter 0.2s,transform 0.2s}
.r3d-sym.sym-win .slot-sym-wrap svg{filter:drop-shadow(0 0 18px gold) drop-shadow(0 0 35px rgba(255,215,0,0.4))}

/* Paytable */
.pt-sym-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
.pt-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.74rem}
.pt-combo{display:flex;align-items:center;gap:1px}
.pt-multi{font-weight:800;font-size:0.8rem}

/* Win announce — bigger & full-width */
.win-announce{position:absolute;left:50%;transform:translateX(-50%);top:50%;margin-top:-60px;
  min-width:320px;border-radius:16px;border:1px solid var(--border2);
  padding:1.5rem 2rem;text-align:center;z-index:40;
  display:none;animation:win-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.win-announce.show{display:block}
@keyframes win-pop{from{opacity:0;transform:translateX(-50%) scale(0.7)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.wa-label{font-size:0.72rem;font-weight:900;letter-spacing:3px;opacity:0.85;margin-bottom:4px}
.wa-amount{font-family:'Space Grotesk',sans-serif;font-size:3rem;font-weight:900;line-height:1;margin:4px 0}
.wa-multi{font-size:0.8rem;color:var(--text2)}

/* ── Admin FAB removal — hidden trigger ── */
.admin-fab{display:none!important}
#admin-secret-trigger{position:fixed;bottom:0;right:0;width:40px;height:40px;z-index:900;cursor:default}

/* ── Daily bonus loading state ── */
.dbb-btn:disabled{opacity:0.5;cursor:not-allowed}

/* ── Spin log in correct container ── */
#spin-log{overflow-y:auto;max-height:calc(100vh - 280px)}
#spin-log-list{display:flex;flex-direction:column;gap:0;padding:0}

/* ── Slots BG fills full viewport properly ── */
.slots-viewport{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#060208;position:relative;border-radius:0}

/* Machine picker when sidebars are hidden (narrow screens) */
.slots-mobile-bar{display:none;position:relative;z-index:12;flex-shrink:0;
  background:rgba(6,4,14,0.94);border-bottom:1px solid rgba(255,255,255,0.08);
  padding-top:max(0.25rem, env(safe-area-inset-top, 0px))}
.slots-mm-scroll{display:flex;gap:0.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:0.35rem max(0.65rem, env(safe-area-inset-right, 0px)) 0.4rem max(0.65rem, env(safe-area-inset-left, 0px));
  scrollbar-width:none}
.slots-mm-scroll::-webkit-scrollbar{display:none}
.slots-mm-chip{
  flex:0 0 auto;min-height:44px;padding:0.45rem 0.85rem;border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:var(--text2);
  font-size:0.72rem;font-weight:800;letter-spacing:0.04em;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation
}
.slots-mm-chip.active{
  border-color:rgba(236,72,153,0.55);background:rgba(236,72,153,0.2);color:#fce7f3
}

/* ═══════════════════════════════════════════════════════
   SLOTS — Sweet / candy studio (reference: premium slot HUD)
═══════════════════════════════════════════════════════ */
#slots-screen.slots-sweet .slots-viewport.slots-sweet-view{
  background:linear-gradient(168deg,#14081c 0%,#101528 38%,#0c1228 72%,#120a20 100%);
  isolation:isolate;
  flex:1;min-height:0;
}
#slots-screen.slots-sweet .slots-viewport.slots-sweet-view::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 55% at 50% -15%,var(--slot-aura-pink,rgba(244,114,182,0.18)),transparent 52%),
    radial-gradient(ellipse 70% 45% at 95% 25%,var(--slot-aura-violet,rgba(167,139,250,0.14)),transparent 48%),
    radial-gradient(ellipse 55% 40% at 5% 55%,rgba(56,189,248,0.1),transparent 45%),
    radial-gradient(ellipse 80% 50% at 50% 100%,var(--slot-aura-gold,rgba(236,72,153,0.08)),transparent 55%);
}
/* Candy-land vibe: soft “gumdrops” + cane stripes — no bitmap decode cost */
#slots-screen.slots-sweet .slots-viewport.slots-sweet-view::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0.22;
  background:
    radial-gradient(circle at 12% 78%,rgba(251,113,133,0.55) 0%,transparent 42%),
    radial-gradient(circle at 88% 72%,rgba(253,224,71,0.45) 0%,transparent 40%),
    radial-gradient(circle at 72% 18%,rgba(167,139,250,0.5) 0%,transparent 38%),
    radial-gradient(circle at 22% 28%,rgba(52,211,153,0.35) 0%,transparent 35%),
    repeating-linear-gradient(125deg,rgba(255,255,255,0.04) 0 6px,transparent 6px 14px,rgba(248,113,113,0.06) 14px 20px,transparent 20px 32px);
  mix-blend-mode:screen;
}
/* Second header band: scrolling jackpot ticker + free spins */
.slots-meta-row{position:relative;z-index:10;display:grid;grid-template-columns:1fr minmax(200px,320px);gap:0.65rem;align-items:stretch;margin:0 0.85rem 0.45rem}
.slots-jackpot-ticker{
  border-radius:12px;overflow:hidden;
  background:rgba(8,4,18,0.55);border:1px solid rgba(255,255,255,0.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.sjt-inner{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.sjt-marquee{display:flex;align-items:center;min-height:2.1rem;padding:0.25rem 0}
.sjt-track{display:inline-flex;white-space:nowrap;animation:sjt-scroll 19s linear infinite}
.sjt-seg{
  padding:0 2rem;font-size:0.68rem;font-weight:800;letter-spacing:2px;
  color:rgba(253,224,71,0.95);text-shadow:0 0 14px rgba(251,191,36,0.35);
}
@keyframes sjt-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.slots-free-panel{
  position:relative;display:flex;align-items:center;gap:0.65rem;
  padding:0.55rem 0.85rem;border-radius:12px;overflow:hidden;
  background:rgba(12,8,22,0.75);border:1px solid rgba(255,255,255,0.08);
  transition:border-color 0.25s,box-shadow 0.25s;
}
.slots-free-panel.sfp-active{
  border-color:rgba(34,197,94,0.45);
  box-shadow:0 0 24px rgba(34,197,94,0.12),inset 0 0 24px rgba(34,197,94,0.06);
}
.sfp-glow{position:absolute;inset:0;opacity:0;transition:opacity 0.3s;background:radial-gradient(circle at 30% 50%,rgba(52,211,153,0.2),transparent 65%);pointer-events:none}
.slots-free-panel.sfp-active .sfp-glow{opacity:1}
.sfp-icon{font-size:1.35rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4))}
.sfp-main{display:flex;flex-direction:column;gap:0;line-height:1.1}
.sfp-label{font-size:0.52rem;font-weight:900;letter-spacing:3px;color:rgba(253,224,71,0.9)}
.sfp-count{font-family:'Space Grotesk',sans-serif;font-size:1.35rem;font-weight:900;color:#fef9c3}
.sfp-right{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sfp-hint,.sfp-earn{font-size:0.58rem;color:rgba(255,255,255,0.42);line-height:1.35}
.sfp-earn{color:rgba(255,255,255,0.34);font-size:0.54rem}
.sl-free{
  font-size:0.48rem;font-weight:900;letter-spacing:0.5px;color:#22c55e;background:rgba(34,197,94,0.15);
  padding:1px 4px;border-radius:4px;margin-right:4px;flex-shrink:0
}
@media(max-width:900px){
  .slots-meta-row{grid-template-columns:1fr;margin:0 0.5rem 0.4rem}
  .slots-free-panel{order:-1}
}
.slots-bg-photo{
  display:none;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.slots-bg-photo.is-on{display:block}
.slots-bg-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,6,22,0.45) 0%,transparent 35%,transparent 55%,rgba(8,4,18,0.65) 100%);
}
#slots-screen.slots-sweet .slots-bg-canvas{z-index:0;opacity:0.85}
#slots-screen.slots-sweet .sv-header-sweet{
  position:relative;z-index:10;margin:0.5rem 0.85rem 0;padding:0.85rem 1.25rem;
  background:rgba(12,8,22,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.08);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-shrink:0;
}
#slots-screen.slots-sweet .svh-left{display:flex;flex-direction:column;gap:0.15rem;min-width:0}
#slots-screen.slots-sweet .svh-name{font-size:0.95rem;letter-spacing:2.5px;background:linear-gradient(90deg,#fce7f3,#e9d5ff,#bae6fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#slots-screen.slots-sweet .svh-sub{font-size:0.62rem;color:rgba(255,255,255,0.42);font-weight:600;letter-spacing:0.4px}
#slots-screen.slots-sweet .sv-jackpot-panel{
  display:flex;flex-direction:column;align-items:flex-end;gap:0;flex-shrink:0;
  padding:0.45rem 0.85rem;border-radius:12px;
  background:linear-gradient(145deg,rgba(251,191,36,0.12),rgba(244,114,182,0.08));
  border:1px solid rgba(251,191,36,0.25);
  box-shadow:0 0 24px rgba(251,191,36,0.12),inset 0 1px 0 rgba(255,255,255,0.06);
}
#slots-screen.slots-sweet .svhj-label{font-size:0.55rem;font-weight:900;letter-spacing:3px;color:rgba(253,224,71,0.85)}
#slots-screen.slots-sweet .svhj-amount{
  font-size:1.35rem;font-weight:900;letter-spacing:-0.5px;line-height:1.1;
  background:linear-gradient(90deg,#fde047,#fbbf24,#f59e0b,#fde68a,#fde047);
  background-size:220% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:slots-jp-shine 4s linear infinite;
}
#slots-screen.slots-sweet .svhj-hint{font-size:0.58rem;font-weight:700;color:rgba(255,255,255,0.38);margin-top:2px}
@keyframes slots-jp-shine{0%{background-position:0% center}100%{background-position:220% center}}

/* Candy-stripe frame around reels */
#slots-screen.slots-sweet .machine-frame{
  padding:5px;
  border-radius:22px;
  background:repeating-linear-gradient(
    135deg,
    rgba(251,113,133,0.95) 0px,rgba(251,113,133,0.95) 8px,
    rgba(255,255,255,0.92) 8px,rgba(255,255,255,0.92) 16px,
    rgba(196,181,253,0.95) 16px,rgba(196,181,253,0.95) 24px,
    rgba(255,255,255,0.88) 24px,rgba(255,255,255,0.88) 32px
  );
  box-shadow:0 28px 70px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.06) inset;
}
#slots-screen.slots-sweet .machine-cabinet{
  border-radius:17px;border:none;
  box-shadow:inset 0 2px 24px rgba(0,0,0,0.45),inset 0 0 60px rgba(236,72,153,0.06);
}
#slots-screen.slots-sweet .machine-top-lights{
  background:linear-gradient(180deg,rgba(30,20,45,0.95),rgba(20,15,35,0.98));
  border-bottom:1px solid rgba(255,255,255,0.06);
}
#slots-screen.slots-sweet .reel-window{
  background:linear-gradient(180deg,#070a12 0%,#0a0e18 100%);
  border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.05);
  border-radius:0 0 10px 10px;
}
#slots-screen.slots-sweet .reels-container{height:248px}

/* Candy: one “machine” — outer stripe frame only; grid fills cabinet below title */
#slots-screen.slots-sweet .slot-machine-3d.slot-candy-mode{
  flex:1;min-height:0;align-self:stretch;width:100%;
  align-items:stretch;justify-content:flex-start;
  padding:0.55rem 0.75rem 0.65rem;
}
#slots-screen.slots-sweet .slot-machine-3d.slot-candy-mode .machine-frame{
  display:flex;flex-direction:column;flex:1;min-height:0;
  max-width:none;width:100%;
}
#slots-screen.slots-sweet .slot-machine-3d.slot-candy-mode .machine-top-lights{flex-shrink:0}
#slots-screen.slots-sweet .slot-machine-3d.slot-candy-mode .machine-cabinet{
  flex:1;min-height:0;display:flex;flex-direction:column;
  transform:none;
}
#slots-screen.slots-sweet .slot-machine-3d.slot-candy-mode .reel-window{
  flex:1;min-height:0;display:flex;flex-direction:column;margin:0 12px;
  align-items:stretch;
}
#slots-screen.slots-sweet .slot-machine-3d.slot-candy-mode .candy-grid-wrap{
  flex:1;min-height:0;width:100%;
  flex-direction:column;
  align-items:stretch;justify-content:flex-start;
  padding:0.45rem 0.5rem 0.55rem;overflow:hidden;
}
#slots-screen.slots-sweet .candy-cane-frame{
  flex:1;min-height:0;display:flex;flex-direction:column;width:100%;
  border:none;padding:0;box-shadow:none;
  background:transparent;
  background-image:none;
}
#slots-screen.slots-sweet .candy-grid-title{
  flex-shrink:0;margin-bottom:0.45rem;
  font-size:clamp(0.95rem,2.2vw,1.35rem);
}
#slots-screen.slots-sweet .candy-grid-stage{
  flex:1;min-height:0;width:100%;max-width:none;margin:0;
  aspect-ratio:auto;
}
#slots-screen.slots-sweet .candy-grid{
  height:100%;min-height:0;
  gap:clamp(3px,0.7vw,7px);padding:clamp(4px,0.8vw,10px);
  border-radius:10px;
}

/* Bottom bar — credit / bet / win like live slot footer */
#slots-screen.slots-sweet .slots-hud{
  position:relative;z-index:24;margin-top:auto;padding:1rem 1.35rem 1.1rem;
  background:rgba(6,4,14,0.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,0.07);
  box-shadow:0 -12px 40px rgba(0,0,0,0.4);
}
#slots-screen .slot-fx-canvas{z-index:2!important}
#slots-screen.slots-sweet .hud-stat-label{color:rgba(255,255,255,0.45);font-size:0.58rem;letter-spacing:2px}
#slots-screen.slots-sweet .hud-stat-value{color:#f1f5f9}
#slots-screen.slots-sweet .hud-stat-value.green,
#slots-screen.slots-sweet #hud-win{
  color:#fde047!important;
  text-shadow:0 0 18px rgba(253,224,71,0.35);
  font-weight:900;
}
#slots-screen.slots-sweet .hud-bet-box{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1)}
#slots-screen.slots-sweet .hud-bet-val{color:#f9a8d4}
#slots-screen.slots-sweet .hud-spin-btn{
  width:76px;height:76px;
  background:linear-gradient(145deg,#ec4899 0%,#d946ef 45%,#a855f7 100%);
  box-shadow:0 0 0 4px rgba(236,72,153,0.22),0 10px 32px rgba(168,85,247,0.45);
}
#slots-screen.slots-sweet .hud-spin-btn:hover:not(:disabled){
  filter:brightness(1.08);transform:scale(1.03);
}
#slots-screen.slots-sweet .win-announce{
  border-radius:18px;
  border:2px solid transparent;
  background:linear-gradient(rgba(10,8,20,0.94),rgba(10,8,20,0.94)) padding-box,
    linear-gradient(135deg,#f472b6,#c084fc,#38bdf8,#f472b6) border-box;
  box-shadow:0 24px 80px rgba(0,0,0,0.65),0 0 60px rgba(236,72,153,0.15);
}
#slots-screen.slots-sweet .wa-amount{background:linear-gradient(90deg,#fef08a,#fde047,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

@media(max-width:768px){
  #slots-screen.slots-sweet .sv-header-sweet{flex-direction:column;align-items:stretch;margin:0.35rem 0.5rem 0;padding:0.65rem 0.85rem}
  #slots-screen.slots-sweet .sv-jackpot-panel{align-items:flex-start}
  #slots-screen.slots-sweet .slots-hud{flex-wrap:wrap;justify-content:center}
  #slots-screen.slots-sweet .hud-left{width:100%;justify-content:space-between}
  #slots-screen.slots-sweet .hud-right{width:100%;justify-content:center}
}

@media(max-width:900px){
  #slots-screen .game-shell{min-height:0;flex:1}
  #slots-screen .slots-viewport{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;min-height:0}
  #slots-screen .slots-mobile-bar{display:block}
  #slots-screen.slots-sweet .spin-msg{position:relative;z-index:8}
  #slots-screen .hud-adj,#slots-screen .hud-spin-btn,#slots-screen .hud-auto-btn{
    -webkit-tap-highlight-color:transparent;touch-action:manipulation
  }
}

/* ═══════════════════════════════════════════════════════
   CRASH + CS2 skin thumbs + responsive polish
═══════════════════════════════════════════════════════ */
.crash-shell{min-height:0}
.crash-sidebar .crash-side-bal{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;color:var(--accent2)}
.crash-help{font-size:0.78rem;color:var(--text2);line-height:1.55;padding:0 0.2rem}
.crash-viewport{flex:1;position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:linear-gradient(180deg,#0e1224 0%,#0d0f1a 45%,#12081a 100%)}
.crash-bg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0.9}
.crash-board{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem 1rem 0;gap:0.75rem}
.crash-mult-wrap{text-align:center}
.crash-mult-label{font-size:0.62rem;font-weight:800;letter-spacing:4px;color:var(--text3)}
.crash-mult-display{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.2rem,8vw,4rem);font-weight:900;letter-spacing:-2px;background:linear-gradient(135deg,#fff,#c4c8e8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:transform 0.12s ease}
.crash-mult-display.crash-mult-hot{filter:drop-shadow(0 0 20px rgba(251,191,36,0.55))}
.crash-mult-display.crash-mult-win{-webkit-text-fill-color:var(--green);background:none;color:var(--green)}
.crash-mult-display.crash-mult-lose{-webkit-text-fill-color:var(--red);background:none;color:var(--red)}
.crash-potential{font-size:0.85rem;color:var(--gold2);font-weight:700;margin-top:0.25rem}
.crash-chart-shell{position:relative;width:100%;max-width:720px;border-radius:var(--r3);border:1px solid rgba(255,255,255,0.08);background:rgba(10,12,22,0.65);box-shadow:0 24px 60px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.04);overflow:hidden}
.crash-chart-stage{position:relative;width:100%;aspect-ratio:400/200;max-height:min(220px,42vh)}
.crash-chart-svg{display:block;width:100%;height:100%;overflow:visible}
#crash-line-path{vector-effect:non-scaling-stroke}
.crash-chart-overlay{position:absolute;inset:0;pointer-events:none;z-index:4}
#crash-rocket-marker .crash-rocket-body{filter:drop-shadow(0 2px 8px rgba(56,189,248,0.75))}
.crash-hud-footer{display:grid;grid-template-columns:1fr minmax(200px,1.4fr) 1fr;gap:0.75rem;align-items:center;padding:0.85rem 1rem;background:rgba(0,0,0,0.45);border-top:1px solid var(--border)}
.crash-hud-item{font-size:0.72rem}
.crash-hud-l{display:block;color:var(--text3);font-weight:700;letter-spacing:1px;font-size:0.58rem;margin-bottom:2px}
.crash-hud-v{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:800;color:var(--text1)}
.crash-hud-center{display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.crash-hud-bet-row{display:flex;align-items:center;gap:0.35rem;flex-wrap:wrap;justify-content:center}
.crash-go-btn{width:100%;max-width:280px;padding:0.75rem 1rem;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;border-radius:var(--r2);font-size:0.92rem;font-weight:800;letter-spacing:0.5px;cursor:pointer;box-shadow:0 8px 28px rgba(34,197,94,0.35);transition:transform 0.15s,filter 0.15s}
.crash-go-btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.crash-go-btn:disabled{opacity:0.45;cursor:not-allowed}
.crash-run-btns{width:100%;display:flex;justify-content:center}
.crash-cashout-btn{min-width:220px;padding:0.85rem 1.5rem;background:linear-gradient(135deg,var(--gold),#d97706);color:#0d0f1a;border:none;border-radius:var(--r2);font-size:1rem;font-weight:900;letter-spacing:0.5px;cursor:pointer;box-shadow:0 8px 32px rgba(245,158,11,0.45);animation:crash-pulse 1.1s ease-in-out infinite}
.crash-cashout-btn:disabled{opacity:0.5;cursor:not-allowed;animation:none}
@keyframes crash-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.crash-lobby-art{background:linear-gradient(165deg,#0f172a,#1e1030)!important;display:flex;align-items:center;justify-content:center;min-height:120px}
.crash-lobby-chart{width:100%;padding:0.5rem}
.crash-lobby-glow{background:radial-gradient(circle at 50% 80%,rgba(34,197,94,0.35),transparent)!important}
.crash-phase-banner{font-size:0.72rem;font-weight:800;letter-spacing:2px;color:rgba(224,231,255,0.85);margin-bottom:0.35rem}
.crash-viewport{transition:box-shadow 0.6s var(--ease),filter 0.6s var(--ease)}
.crash-viewport.crash-tier-atmos{box-shadow:inset 0 0 80px rgba(56,189,248,0.06)}
.crash-viewport.crash-tier-space{box-shadow:inset 0 0 120px rgba(129,140,248,0.12),inset 0 -40px 100px rgba(30,27,75,0.35)}
.crash-viewport.crash-tier-glitch{box-shadow:inset 0 0 100px rgba(244,114,182,0.08);animation:crash-tier-glitch-pulse 2.4s ease-in-out infinite}
@keyframes crash-tier-glitch-pulse{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(25deg) saturate(1.15)}}
.crash-panels{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--u2);width:100%;max-width:720px;padding:var(--u2) var(--u2) calc(var(--u3) + env(safe-area-inset-bottom,0px))}
.crash-glass{background:linear-gradient(145deg,rgba(30,41,59,0.55),rgba(15,23,42,0.72));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:var(--r3);box-shadow:0 12px 40px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06)}
.crash-panel{padding:var(--u2) var(--u2) var(--u2)}
.crash-panel-h{font-family:'Space Grotesk',sans-serif;font-size:0.72rem;font-weight:800;letter-spacing:2px;color:var(--text2);margin-bottom:var(--space-1)}
.crash-panel-sub{font-size:0.65rem;color:var(--text3);margin-bottom:var(--u2);line-height:1.4}
.crash-feed-list{max-height:min(200px,28vh);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2);padding-right:4px}
.crash-feed-empty{font-size:0.72rem;color:var(--text3);padding:var(--u2) 0}
.crash-feed-row{display:flex;align-items:flex-start;gap:var(--space-2);font-size:0.72rem;line-height:1.35;color:var(--text2)}
.crash-feed-row .cfe-ico{flex-shrink:0;opacity:0.9}
.crash-feed-crash{color:rgba(248,113,113,0.95)}
.crash-feed-win{color:var(--text1)}
.cfe-profit{color:var(--green);font-weight:700;margin-left:4px}
.crash-rounds-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.crash-round-chip{font-family:'Space Grotesk',sans-serif;font-size:0.7rem;font-weight:800;padding:6px 10px;border-radius:999px;background:rgba(99,102,241,0.15);border:1px solid rgba(129,140,248,0.25);color:var(--accent2)}
.crash-chart-shell{transition:box-shadow 0.25s var(--ease),filter 0.25s}
.crash-chart-shell.crash-win-flash{box-shadow:0 0 0 2px rgba(34,197,94,0.55),0 24px 60px rgba(34,197,94,0.2);filter:brightness(1.08)}
.crash-shell-shake{animation:crash-shake 0.45s cubic-bezier(0.36,0.07,0.19,0.97) both}
@keyframes crash-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-0.3deg)}40%{transform:translateX(5px) rotate(0.2deg)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.crash-go-btn:active:not(:disabled),.crash-cashout-btn:active:not(:disabled){transform:scale(0.98)}
#crash-screen .hud-adj{transition:transform 0.12s var(--ease),background 0.15s,border-color 0.15s}
#crash-screen .hud-adj:hover{background:rgba(99,102,241,0.15)!important;border-color:rgba(129,140,248,0.35)!important;transform:translateY(-1px)}
.brand-gem svg{filter:drop-shadow(0 0 12px rgba(99,102,241,0.45))}
.crash-rocket-marker{will-change:transform}
#crash-rocket-marker svg{overflow:visible}
.classic-reels-wrap{position:relative;width:100%;flex:1;display:flex;flex-direction:column;min-height:0}
.candy-grid-wrap{width:100%;flex:1;display:flex;align-items:center;justify-content:center;padding:0.35rem;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.candy-cane-frame{border:10px solid transparent;border-radius:var(--r3);background-image:linear-gradient(135deg,rgba(12,14,24,0.97),rgba(12,14,24,0.97)),repeating-linear-gradient(-45deg,#dc2626 0,#dc2626 7px,#fff 7px,#fff 14px);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 20px 56px rgba(0,0,0,0.55),inset 0 0 0 1px rgba(255,255,255,0.05);padding:0.45rem 0.55rem 0.6rem}
.candy-grid-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(0.85rem,3.5vw,1.15rem);font-weight:900;text-align:center;background:linear-gradient(90deg,#fef08a,#fb7185,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.5rem;letter-spacing:0.06em}
.candy-grid-stage{position:relative;width:100%;max-width:min(94vw,540px);aspect-ratio:6/5;margin:0 auto}
.candy-cluster-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.candy-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr;gap:3px;width:100%;height:100%;background:rgba(139,92,246,0.12);border-radius:8px;padding:5px;min-height:0}
.candy-col{min-height:0;display:flex;flex-direction:column;border-radius:6px;background:rgba(255,255,255,0.04);overflow:hidden}
.candy-col-clip{flex:1;min-height:0;overflow:hidden;position:relative}
.candy-col-strip{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:stretch;will-change:transform}
.candy-col-clip--blur .candy-cell{filter:blur(1.8px) brightness(0.86);transition:filter .2s ease}
.candy-grid--spinning .candy-col{opacity:0.97}
.candy-cell{display:flex;align-items:center;justify-content:center;border-radius:5px;background:rgba(255,255,255,0.05);min-height:0;overflow:hidden;box-sizing:border-box}
.candy-cell .slot-sym-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:2px}
.candy-cell .slot-sym-wrap svg{max-width:100%;max-height:100%}
.candy-cell.candy-pop{animation:candy-pop 0.16s ease}
@keyframes candy-pop{0%{transform:scale(0.88)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
.candy-col-land{animation:candy-col-land 0.38s cubic-bezier(0.2,1.1,0.3,1)}
@keyframes candy-col-land{0%{transform:scale(0.9);filter:brightness(1.15)}100%{transform:scale(1);filter:brightness(1)}}
.candy-cell.candy-win-cell{box-shadow:0 0 0 2px var(--mc,#fb7185),0 0 14px var(--mg,rgba(251,113,133,0.55));background:rgba(255,255,255,0.12);z-index:2;position:relative;border-radius:6px}
.slot-machine-3d.slot-candy-mode .reel-window{min-height:0}
.skin-thumb-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.skin-thumb{max-width:100%;max-height:100%;width:auto;height:54px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.45))}
.skin-thumb-lg{width:120px;height:90px;object-fit:contain}
.skin-thumb-xs{width:24px;height:24px;object-fit:contain}
.cat-strip-icon{min-height:44px;display:flex;align-items:center;justify-content:center}
.cil-item-icon .skin-thumb{height:48px}
.steam-ref{font-size:0.65rem;color:var(--text3);white-space:nowrap}

@media(max-width:900px){
  .crash-hud-footer{grid-template-columns:1fr;gap:0.65rem;text-align:center}
  .crash-hud-item[style*="text-align:right"]{text-align:center!important}
  .crash-sidebar{order:2;border-right:none;border-top:1px solid var(--border)}
  .crash-shell{flex-direction:column-reverse}
  .crash-panels{grid-template-columns:1fr;max-width:100%}
}

@media(max-width:600px){
  .page{padding:1rem 0.85rem;max-width:100%}
  .lobby-hero{flex-direction:column;align-items:flex-start}
  .lh-bal{text-align:left;width:100%}
  #app-screen.active{overflow:auto;-webkit-overflow-scrolling:touch}
  .main-content{min-height:0}
}

/* ══ PWA extras: maintenance, reality check, chat, wallet, mobile tab bar ══ */
.maintenance-overlay{position:fixed;inset:0;z-index:20000;background:rgba(10,12,22,0.92);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:1.5rem;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
.maintenance-overlay.open{display:flex}
.maintenance-card{max-width:420px;width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r3);padding:2rem 1.75rem;text-align:center;box-shadow:0 32px 80px rgba(0,0,0,0.55)}
.maint-title{font-family:'Space Grotesk',sans-serif;font-size:1.35rem;font-weight:800;margin-bottom:0.75rem;color:var(--red)}
.maint-msg{color:var(--text1);font-size:0.92rem;line-height:1.55;margin-bottom:0.5rem}
.maint-hint{font-size:0.76rem;color:var(--text3)}
.maint-hint code{font-size:0.85em;background:rgba(255,255,255,0.06);padding:0.1em 0.35em;border-radius:4px}
.rc-modal,.chat-modal,.wallet-sheet{position:fixed;inset:0;z-index:15000;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:1rem;padding-bottom:max(1rem,env(safe-area-inset-bottom))}
.rc-modal.open,.chat-modal.open{display:flex}
.wallet-sheet.open{display:flex;align-items:flex-end;justify-content:center}
.rc-card,.chat-card{width:100%;max-width:400px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r3);padding:1.5rem;position:relative;box-shadow:0 24px 60px rgba(0,0,0,0.5)}
.rc-title,.chat-title{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:800;margin-bottom:0.75rem}
.rc-line{font-size:0.88rem;color:var(--text2);margin-bottom:0.45rem}
.rc-foot{font-size:0.72rem;color:var(--text3);line-height:1.5;margin:0.75rem 0 1rem}
.rc-btn{width:100%;padding:0.75rem;background:var(--accent);color:#fff;border:none;border-radius:var(--r2);font-weight:700;font-size:0.9rem}
.chat-close{position:absolute;top:0.65rem;right:0.65rem;background:var(--bg3);border:1px solid var(--border);color:var(--text2);width:32px;height:32px;border-radius:8px;font-size:1rem;line-height:1}
.chat-body{font-size:0.86rem;color:var(--text2);line-height:1.55}
.wallet-sheet-inner{position:relative;width:100%;max-width:480px;border-radius:var(--r3) var(--r3) 0 0;padding:var(--ds-pad-3) var(--ds-pad-2) var(--ds-pad-3);padding-bottom:max(var(--ds-pad-3),env(safe-area-inset-bottom));max-height:min(92vh,820px);overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 -16px 56px rgba(0,0,0,0.5)}
.wallet-tabs{display:flex;flex-wrap:wrap;gap:var(--ds-pad-1);margin:var(--ds-pad-2) 0 var(--ds-pad-2)}
.wallet-pane{padding-top:var(--ds-pad-1)}
.wallet-mini-hint{font-size:0.72rem;color:var(--text3);line-height:1.45;margin-bottom:var(--ds-pad-2)}
.wallet-np-duplicate .crypto-panel{margin-bottom:0}
.wallet-activity-list{display:flex;flex-direction:column;gap:var(--ds-pad-1);max-height:min(360px,50vh);overflow-y:auto;margin:var(--ds-pad-2) 0}
.wallet-act-row{display:grid;grid-template-columns:1fr auto;gap:2px var(--ds-pad-2);padding:var(--ds-pad-2);border-radius:var(--ds-radius-sm);background:rgba(0,0,0,0.2);border:1px solid var(--border)}
.wallet-act-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:0.65rem;color:var(--text3)}
.wallet-act-type{text-transform:uppercase;letter-spacing:0.06em;font-weight:700}
.wallet-act-desc{grid-column:1/-1;font-size:0.72rem;color:var(--text2);line-height:1.35}
.wallet-act-amt{font-weight:800;font-size:0.88rem}
.rc-card,.chat-card{border-radius:var(--ds-radius-lg)!important}
.wallet-close.ds-icon-btn{z-index:4;line-height:1}
.wallet-sheet-title{font-size:0.72rem;font-weight:800;letter-spacing:2px;color:var(--text3);text-transform:uppercase}
.wallet-sheet-bal{font-family:'Space Grotesk',sans-serif;font-size:2.25rem;font-weight:800;color:var(--gold);margin:0.35rem 0}
.wallet-sheet-sub{font-size:0.8rem;color:var(--text2)}
.mobile-tabbar{display:none}
@media(max-width:900px){
  .mobile-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:180;
    justify-content:space-around;align-items:stretch;
    background:rgba(13,15,26,0.92);backdrop-filter:blur(14px);
    border-top:1px solid var(--border);padding:0.35rem 0.25rem;
    padding-bottom:max(0.35rem,env(safe-area-inset-bottom));
    -webkit-tap-highlight-color:transparent;
  }
  .mtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;color:var(--text2);font-size:0.62rem;font-weight:600;padding:0.35rem 0.2rem;min-height:48px;touch-action:manipulation}
  .mtab:active{opacity:0.85}
  .mtab-ico{font-size:1.25rem;line-height:1}
}
.case-turbo-row{display:flex;align-items:center;gap:0.5rem;font-size:0.78rem;color:var(--text2);margin:0.5rem 0 0;cursor:pointer;user-select:none}
.case-turbo-row input{width:16px;height:16px;accent-color:var(--accent)}
.rou-repeat-btn,.plink-repeat-btn{margin-top:0.5rem;padding:0.55rem 1rem;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);color:var(--accent2);font-size:0.8rem;font-weight:700;width:100%;max-width:280px;touch-action:manipulation}
.rou-repeat-btn:hover,.plink-repeat-btn:hover{border-color:var(--accent);background:rgba(99,102,241,0.08)}
.affiliate-card{margin-top:1rem;padding:1rem 1.1rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);font-size:0.82rem;line-height:1.5}
.affiliate-card strong{color:var(--gold2)}
.affiliate-stats{margin-top:0.5rem;color:var(--text2);font-size:0.78rem}

@media(max-width:1100px){
  .auth-h1{font-size:clamp(2rem,8vw,3.2rem)}
  .game-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
}
@media(max-width:480px){
  .auth-card{padding:1.75rem 1.35rem}
  .game-grid{grid-template-columns:1fr}
  #toast-container{left:0.75rem;right:0.75rem;top:auto;bottom:calc(5rem + env(safe-area-inset-bottom));align-items:stretch}
  .toast{max-width:none}
}

/* ══ PFP, balances, affiliate hub, live feed, big win, terminal accents ══ */
.num-mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.user-pfp{
  --pfp-hue:200;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:10px;
  font-family:'JetBrains Mono',monospace;font-weight:800;font-size:0.78rem;letter-spacing:-0.02em;
  color:#0a0c14;
  background:linear-gradient(145deg,hsl(var(--pfp-hue),72%,62%),hsl(var(--pfp-hue),55%,38%));
  box-shadow:0 0 0 1px rgba(255,255,255,0.12),inset 0 1px 0 rgba(255,255,255,0.2);
}
.user-pfp-sm{width:2rem;height:2rem;font-size:0.68rem;border-radius:8px}
.user-pfp-lg{width:3rem;height:3rem;font-size:0.95rem;border-radius:12px}
.user-pfp-xl{width:3.5rem;height:3.5rem;font-size:1.05rem;border-radius:14px}

.prof-card{margin-top:1.25rem;padding:1.15rem 1.25rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2)}
.prof-card-dim{opacity:0.92}
.prof-hint{font-size:0.78rem;color:var(--text3);line-height:1.45;margin:0.35rem 0 0.75rem}
.pfp-editor{display:flex;align-items:flex-start;gap:1.25rem;flex-wrap:wrap;margin-bottom:0.75rem}
.pfp-fields{display:flex;flex-direction:column;gap:0.45rem;min-width:160px}
.pfp-lbl{font-size:0.68rem;font-weight:700;letter-spacing:0.6px;color:var(--text3);text-transform:uppercase}
.pfp-inp{padding:0.45rem 0.55rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);color:var(--text1);font-size:0.88rem;max-width:120px}
.pfp-range{width:100%;max-width:220px;accent-color:var(--accent)}
.pfp-rate-row{display:flex;align-items:center;gap:0.75rem;margin-top:0.65rem;flex-wrap:wrap}
.prof-check{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:var(--text2);cursor:pointer;margin:0.35rem 0}
.prof-check input{width:15px;height:15px;accent-color:var(--accent)}
.crypto-placeholder{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:0.35rem}
.cp-chip{font-family:'JetBrains Mono',monospace;font-size:0.68rem;font-weight:600;padding:0.35rem 0.65rem;border-radius:6px;background:var(--bg2);border:1px solid var(--border);color:var(--text2)}
.cp-chip.cp-soon{opacity:0.65;border-style:dashed}
.prof-foot{margin-top:1.25rem;font-size:0.78rem;color:var(--text3);line-height:1.5}

.aff-hub-hero{margin-bottom:1.25rem}
.aff-h1{margin-bottom:0.35rem}
.aff-lead{color:var(--text2);font-size:0.92rem;max-width:52ch;line-height:1.55}
.aff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.75rem}
.aff-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:1.1rem 1.15rem;
  display:flex;flex-direction:column;gap:0.35rem
}
.aff-card-accent{border-color:rgba(99,102,241,0.35);box-shadow:0 0 0 1px rgba(99,102,241,0.08)}
.aff-card-wide{grid-column:1/-1}
@media(min-width:700px){.aff-card-wide{grid-column:span 2}}
.aff-card-k{font-size:0.65rem;font-weight:800;letter-spacing:1.6px;color:var(--text3);text-transform:uppercase}
.aff-code-big{font-size:1.35rem;font-weight:700;color:var(--gold2);letter-spacing:0.06em}
.aff-stat{font-size:1.5rem;font-weight:800;color:var(--text1)}
.aff-card-s{font-size:0.76rem;color:var(--text3);line-height:1.4}
.aff-btn{
  margin-top:0.35rem;align-self:flex-start;padding:0.5rem 1rem;background:var(--accent);color:#fff;border:none;border-radius:var(--r);
  font-size:0.8rem;font-weight:700;cursor:pointer;transition:background 0.15s,transform 0.15s
}
.aff-btn:hover{background:var(--accent2);transform:translateY(-1px)}
.aff-micro{font-size:0.7rem;color:var(--text3);word-break:break-all;line-height:1.4;margin-top:0.25rem}
.aff-mini-stats{display:flex;justify-content:space-between;align-items:center;font-size:0.82rem;color:var(--text2);margin-top:0.25rem}
.aff-foot{font-size:0.74rem;color:var(--text3);margin-top:0.65rem;line-height:1.45}

.bw-overlay{
  position:fixed;inset:0;z-index:25000;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity 0.35s var(--ease);padding:1rem
}
.bw-overlay.bw-open{opacity:1;pointer-events:auto}
.bw-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 0%,rgba(0,0,0,0.85) 70%)}
.bw-rays{
  position:absolute;inset:-20%;opacity:0.35;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(99,102,241,0.15) 40deg,transparent 80deg,rgba(245,158,11,0.12) 140deg,transparent 200deg);
  animation:bw-spin 14s linear infinite
}
@keyframes bw-spin{to{transform:rotate(360deg)}}
.bw-card{
  position:relative;z-index:2;text-align:center;padding:2rem 2.5rem;border-radius:var(--r4);
  background:linear-gradient(165deg,rgba(30,36,64,0.95),rgba(13,15,26,0.92));
  border:1px solid rgba(99,102,241,0.4);box-shadow:0 0 80px rgba(99,102,241,0.25),0 24px 60px rgba(0,0,0,0.6);
  transform:scale(0.92);transition:transform 0.45s var(--ease)
}
.bw-overlay.bw-open .bw-card{transform:scale(1)}
.bw-kicker{font-family:'JetBrains Mono',monospace;font-size:0.68rem;font-weight:600;letter-spacing:3px;color:var(--green);margin-bottom:0.5rem}
.bw-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.6rem,5vw,2.4rem);font-weight:800;letter-spacing:-1px;margin-bottom:0.35rem}
.bw-amt{font-size:clamp(2rem,6vw,3rem);font-weight:800;color:var(--gold2);text-shadow:0 0 40px rgba(245,158,11,0.35)}
.bw-sub{font-size:0.82rem;color:var(--text2);margin-top:0.5rem}
.bw-tier-nice .bw-card{border-color:rgba(34,197,94,0.35);box-shadow:0 0 60px rgba(34,197,94,0.15)}
.bw-tier-big .bw-card{border-color:rgba(245,158,11,0.45)}
.bw-tier-epic .bw-card{border-color:rgba(168,85,247,0.5);box-shadow:0 0 100px rgba(168,85,247,0.2)}

.wallet-sheet-usd{font-size:0.88rem;color:var(--text2);margin-top:0.35rem}
.wallet-sheet-note{font-size:0.78rem;color:var(--text3);line-height:1.45;margin:0.75rem 0 0}
.wallet-recent-block{margin-top:1rem;padding-top:0.85rem;border-top:1px solid var(--border)}
.wallet-recent-hdr{font-size:0.65rem;font-weight:800;letter-spacing:0.12em;color:var(--text3);text-transform:uppercase;margin-bottom:0.45rem}
.wallet-recent-txs{display:flex;flex-direction:column;gap:0.35rem;max-height:140px;overflow-y:auto}
.wallet-tx-row{display:flex;justify-content:space-between;align-items:center;font-size:0.76rem;padding:0.4rem 0.5rem;background:var(--bg3);border-radius:var(--r);border:1px solid var(--border)}
.wallet-tx-game{color:var(--text2);font-weight:600}
.wallet-tx-amt{font-weight:800;font-family:'JetBrains Mono',monospace}
.wallet-tx-amt.pos{color:var(--green)}.wallet-tx-amt.neg{color:var(--red)}
.wallet-tx-empty{font-size:0.74rem;color:var(--text3);line-height:1.4}
.wallet-open-crypto{width:100%;margin-top:0.85rem;padding:0.72rem 1rem;background:linear-gradient(135deg,rgba(99,102,241,0.22),rgba(34,197,94,0.1));border:1px solid var(--border2);border-radius:var(--r2);color:var(--text1);font-size:0.82rem;font-weight:700;cursor:pointer;touch-action:manipulation;transition:transform 0.15s,box-shadow 0.2s}
.wallet-open-crypto:hover{box-shadow:0 6px 20px rgba(99,102,241,0.2)}
.wallet-open-crypto:active{opacity:0.92;transform:scale(0.99)}
.wallet-open-history{width:100%;margin-top:var(--ds-pad-2)}
.wallet-open-history:not(.ds-btn){padding:0.62rem 1rem;background:transparent;border:1px solid var(--border2);border-radius:var(--r2);color:var(--accent2);font-size:0.8rem;font-weight:700;cursor:pointer;touch-action:manipulation}
.wallet-open-history:not(.ds-btn):hover{background:rgba(99,102,241,0.08)}

.games-sheet{position:fixed;inset:0;z-index:15200;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.25s var(--ease)}
.games-sheet:not([hidden]){pointer-events:auto}
.games-sheet.open{opacity:1}
.games-sheet-scrim{position:absolute;inset:0;background:rgba(2,6,23,0.72);backdrop-filter:blur(4px)}
.games-sheet-panel{position:relative;width:100%;max-width:520px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--r3) var(--r3) 0 0;padding:1rem 1rem 1.25rem;padding-bottom:max(1.25rem,env(safe-area-inset-bottom));transform:translateY(100%);transition:transform 0.32s var(--ease);box-shadow:0 -20px 60px rgba(0,0,0,0.5)}
.games-sheet.open .games-sheet-panel{transform:translateY(0)}
.games-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}
.games-sheet-title{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:800}
.games-sheet-x{width:40px;height:40px;border:none;border-radius:var(--r);background:rgba(255,255,255,0.06);color:var(--text1);font-size:1.1rem;cursor:pointer}
.games-sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.55rem}
.games-sheet-tile{display:flex;flex-direction:column;align-items:center;gap:0.35rem;padding:0.85rem 0.5rem;border:1px solid var(--border);border-radius:var(--r2);background:rgba(15,23,42,0.65);color:var(--text1);cursor:pointer;transition:transform 0.15s,border-color 0.2s,box-shadow 0.2s}
.games-sheet-tile:hover,.games-sheet-tile:active{border-color:rgba(129,140,248,0.45);box-shadow:0 0 20px rgba(99,102,241,0.15);transform:translateY(-2px)}
.gst-ico{font-size:1.5rem;line-height:1}
.gst-n{font-size:0.72rem;font-weight:700;color:var(--text2)}

.app-loading-overlay{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.94);backdrop-filter:blur(8px)}
/* Author display:flex wins over the native [hidden] rule — force hide when closed or lobby never appears. */
.app-loading-overlay[hidden]{display:none!important}
.app-loading-card{text-align:center;padding:2rem;max-width:280px}
.app-loading-logo{font-family:'Space Grotesk',sans-serif;font-size:1.75rem;font-weight:800;background:linear-gradient(90deg,var(--accent2),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px rgba(99,102,241,0.35))}
.app-loading-bar{height:4px;background:var(--bg3);border-radius:99px;margin:1.25rem 0 0.75rem;overflow:hidden}
.app-loading-fill{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--green));animation:app-load-bar 0.9s ease-in-out infinite}
@keyframes app-load-bar{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.app-loading-txt{font-size:0.8rem;color:var(--text3)}

.crypto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:0.5rem}
.crypto-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:1rem}
.crypto-panel-title{font-size:0.7rem;font-weight:800;letter-spacing:1.2px;color:var(--text3);text-transform:uppercase;margin-bottom:0.65rem}
.crypto-lbl{display:block;font-size:0.65rem;font-weight:700;color:var(--text3);text-transform:uppercase;margin:0.5rem 0 0.25rem}
.crypto-lbl:first-of-type{margin-top:0}
.crypto-inp{width:100%;padding:0.5rem 0.6rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text1);font-size:0.85rem}
.crypto-btn{margin-top:0.75rem;width:100%}
.crypto-btn-out{background:linear-gradient(135deg,rgba(245,158,11,0.15),transparent)!important;border:1px solid rgba(245,158,11,0.35)!important}
.crypto-err,.crypto-msg{font-size:0.78rem;margin-top:0.5rem;padding:0.45rem 0.55rem;border-radius:var(--r)}
.crypto-err{color:var(--red);background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25)}
.crypto-msg.info{color:var(--gold2);background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25)}
.crypto-msg.ok{color:var(--green);background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.25)}
.crypto-result{margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--border)}
.crypto-pay-lbl{font-size:0.76rem;color:var(--text2);margin-bottom:0.45rem}
.crypto-addr-row{display:flex;gap:0.5rem;align-items:flex-start;flex-wrap:wrap}
.crypto-addr{flex:1;min-width:0;font-size:0.72rem;word-break:break-all;padding:0.5rem;background:var(--bg3);border-radius:var(--r);border:1px solid var(--border)}
.crypto-copy{padding:0.45rem 0.75rem;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-size:0.75rem;font-weight:700;flex-shrink:0;cursor:pointer;touch-action:manipulation}
.crypto-pay-meta{font-size:0.72rem;color:var(--text3);margin-top:0.45rem}
.crypto-wd-block{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--border)}
.crypto-wd-table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border)}
.crypto-wd-table{width:100%;border-collapse:collapse;font-size:0.76rem}
.crypto-wd-table th,.crypto-wd-table td{padding:0.45rem 0.55rem;text-align:left;border-bottom:1px solid var(--border)}
.crypto-wd-table th{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3);background:var(--bg2)}
.crypto-wd-table tr:last-child td{border-bottom:none}
.crypto-wd-table .np-st-pending{color:var(--gold2);font-weight:700}
.crypto-wd-table .np-st-proc{color:#93c5fd;font-weight:600}
.crypto-wd-table .np-st-ok{color:var(--green);font-weight:600}
.crypto-wd-table .np-st-bad{color:#fca5a5;font-weight:600}

.reg-pfp-preview-row{display:flex;align-items:center;gap:1rem;margin-top:0.35rem}
.reg-pfp-hint{font-size:0.76rem;color:var(--text3);line-height:1.45;flex:1;min-width:0}