/* ══ Pi-Style 24h Mining System CSS ════════════════════════════ */

/* Simple centering wrapper — no clock ring */
.mine-btn-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
}

/* SVG ring — hidden (kept for JS compatibility, never shown) */
.mine-progress-svg { display: none !important; }

/* Ring fill — no-op (JS calls _updateRing but SVG is hidden) */
#mine-ring-fill { display: none !important; }

/* ── Countdown display ────────────────────────────────────────── */
.mine-countdown-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  animation: fadeInUp .4s cubic-bezier(.4,0,.2,1) forwards;
}
.mine-countdown-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,255,136,.06);
  border: 1px solid rgba(0,255,136,.25);
  border-radius: 30px;
  padding: 6px 16px;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 12px rgba(0,255,136,.6);
  box-shadow: 0 0 20px rgba(0,255,136,.08), inset 0 1px 0 rgba(255,255,255,.04);
  letter-spacing: 1px;
  animation: countdownPulse 2s ease-in-out infinite;
}
.mine-cd-icon { font-size: 14px; animation: none; }
@keyframes countdownPulse {
  0%,100% { box-shadow: 0 0 12px rgba(0,255,136,.1), inset 0 1px 0 rgba(255,255,255,.04); }
  50%      { box-shadow: 0 0 28px rgba(0,255,136,.2), inset 0 1px 0 rgba(255,255,255,.04); }
}

/* ── Live earnings display ────────────────────────────────────── */
.mine-live-earn {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: fadeInUp .5s .1s cubic-bezier(.4,0,.2,1) forwards;
  opacity: 0;
}
.mine-live-earn.visible { opacity: 1; animation: none; }
.mine-live-earn-val {
  font-family: 'Orbitron', monospace;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(100deg, #00FF88, #00C8FF, #9B6BFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(0,255,136,.4));
  transition: all .3s ease;
}
.mine-live-earn-unit {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.mine-live-earn-bar-wrap {
  width: 120px;
  height: 3px;
  background: rgba(0,255,136,.1);
  border-radius: 3px;
  overflow: hidden;
}
.mine-live-earn-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00FF88, #00C8FF);
  border-radius: 3px;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(0,255,136,.5);
}

/* ── Streak badge ─────────────────────────────────────────────── */
.mine-streak-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 6px auto 0;
  background: rgba(255,215,0,.08);
  border: 1px solid rgba(255,215,0,.3);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255,215,0,.4);
  box-shadow: 0 0 16px rgba(255,215,0,.1);
  animation: streakPulse 2.5s ease-in-out infinite;
}
@keyframes streakPulse {
  0%,100% { box-shadow: 0 0 10px rgba(255,215,0,.08); }
  50%      { box-shadow: 0 0 24px rgba(255,215,0,.22); }
}

/* ── Mining Complete Popup ────────────────────────────────────── */
.mining-complete-popup {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4,12,24,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: fadeIn .4s ease forwards;
}
.mcp-inner {
  position: relative;
  background: linear-gradient(145deg, #0C1A2E, #071430);
  border: 1px solid rgba(0,255,136,.35);
  border-radius: 28px;
  padding: 36px 28px 28px;
  text-align: center;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 0 60px rgba(0,255,136,.15), 0 32px 80px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  animation: popupSlideIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes popupSlideIn {
  0%   { transform: scale(.8) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0);     opacity: 1; }
}
.mcp-glow {
  position: absolute;
  inset: -1px;
  border-radius: 28px;
  background: conic-gradient(rgba(0,255,136,.2) 0deg, rgba(0,200,255,.1) 90deg, rgba(155,107,255,.1) 180deg, rgba(0,255,136,.2) 360deg);
  animation: coronaRotate 4s linear infinite;
  z-index: -1;
  filter: blur(8px);
}
.mcp-emoji { font-size: 56px; margin-bottom: 8px; animation: mineIconFloat 2s ease-in-out infinite; }
.mcp-title {
  font-family: 'Orbitron', monospace;
  font-size: 20px; font-weight: 900;
  background: linear-gradient(135deg, #00FF88, #00C8FF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.mcp-amount {
  font-family: 'Orbitron', monospace;
  font-size: 32px; font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255,215,0,.5);
  margin-bottom: 6px;
  animation: balanceBump .4s ease forwards;
}
.mcp-sub {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 11px; color: var(--muted);
  letter-spacing: 1px; margin-bottom: 16px;
}
.mcp-streak-row {
  background: rgba(255,215,0,.07);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 12px;
  padding: 8px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--gold);
  margin-bottom: 16px;
}
.mcp-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, rgba(0,255,136,.2), rgba(0,200,255,.12));
  border: 1.5px solid rgba(0,255,136,.4);
  border-radius: 16px;
  font-family: 'Orbitron', monospace;
  font-size: 13px; font-weight: 700;
  color: var(--green);
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(0,255,136,.15), inset 0 1px 0 rgba(255,255,255,.06);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.mcp-btn:active { transform: scale(.96); }

@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0);   }
}

/* ── Mining label size fix while countdown shows ─────────────── */
#mine-btn .mine-label {
  font-size: 11px;
  letter-spacing: 2px;
}

/* Make mine-rate show session info */
#mine-rate-display {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 10px;
  color: rgba(232,244,255,.4);
  margin-top: 4px;
  display: block;
}

/* ══ End Pi-Style Mining CSS ════════════════════════════════════ */


/* Re-assert tap effect animations — last in cascade, always wins */
.tap-particle {
  animation: ultraTapFloat .85s cubic-bezier(.2,1,.3,1) forwards !important;
  pointer-events: none !important;
}
.tap-ripple {
  animation: rippleGo .55s ease-out forwards !important;
  pointer-events: none !important;
  position: absolute !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(0,212,255,.55), rgba(0,212,255,0) 70%) !important;
}

/* Keyframes for dynamically-created FX elements */
@keyframes shockwaveRing {
  0%   { transform: scale(1);   opacity: .85; }
  100% { transform: scale(3.8); opacity: 0;   }
}
@keyframes sparkBurst {
  0%   { transform: translate(0,0) scale(1);                           opacity: 1; }
  100% { transform: translate(var(--dx),var(--dy)) scale(.12);         opacity: 0; }
}
@keyframes drtGlowFloat {
  0%   { opacity: 0; transform: translateY(0) scale(.7);   filter: blur(4px); }
  15%  { opacity: 1; transform: translateY(-8px) scale(1.1); filter: blur(0); }
  70%  { opacity: 1; transform: translateY(-32px) scale(1);  filter: blur(0); }
  100% { opacity: 0; transform: translateY(-58px) scale(.85); filter: blur(3px); }
}
@keyframes balanceBump {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.07); }
  100% { transform: scale(1);    }
}

/* Active mining button — green plasma glow */
#mine-btn.active {
  animation: miningPlasmaGlow 1.8s ease-in-out infinite !important;
  box-shadow: 0 0 40px rgba(0,255,136,.4), 0 0 80px rgba(0,200,255,.2) !important;
  cursor: not-allowed !important;
}

/* Idle button — cyan pulse ring until tapped */
#mine-btn:not(.active):not([disabled]) {
  animation: idleRingPulse 2.5s ease-out infinite !important;
}

/* Press feedback */
#mine-btn:active { transform: scale(.92) translateZ(0) !important; }

/* DRT float labels */
.drt-glow-float {
  animation: drtGlowFloat .95s cubic-bezier(.2,1,.3,1) forwards !important;
  pointer-events: none !important;
  position: fixed !important;
  z-index: 9999 !important;
  font-family: 'Orbitron', 'Inter', ui-monospace, monospace !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Mining start flash overlay */
.mine-start-flash {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 9996 !important;
  animation: mineStartFlash .6s ease-out forwards !important;
  background: radial-gradient(circle at 50% 55%,
    rgba(0,255,136,.22) 0%, rgba(0,200,255,.10) 40%, transparent 70%) !important;
}

/* Balance bump on tick */
.hero-balance.bump { animation: balanceBump .16s ease !important; }

/* Orbit particles keep running */
.mine-orbit-particle { animation-play-state: running !important; }

/* Coin rain — canonical rule co-located with @keyframes coinRain (further below) */



/* ─── style block (original order) ─── */


/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — DigiRial "Dark Cosmos" Theme
═══════════════════════════════════════════════════════════════ */
:root {
  --bg:        #040C18;
  --surface:   #08142A;
  --card:      #0D1E3A;
  --border:    rgba(0,200,255,0.12);
  --border2:   rgba(0,200,255,0.25);
  --primary:   #00C8FF;
  --primary2:  #0090FF;
  --gold:      #FFD700;
  --gold2:     #FFA500;
  --green:     #00FF88;
  --red:       #FF4444;
  --orange:    #FF8C00;
  --text:      #E8F4FF;
  --muted:     rgba(232,244,255,0.45);
  --r:         14px;
  --r2:        20px;
  --glow:      0 0 30px rgba(0,200,255,0.2);
  --glow2:     0 0 60px rgba(0,200,255,0.12);
  --font-head: 'Orbitron', 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Inter', ui-monospace, 'Courier New', monospace;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* ── V11 Extended Palette ── */
  --cyan:    #00D4FF;
  --cyan2:   #00A8D4;
  --violet:  #9B6BFF;
  --emerald: #00FF9D;
  --gold-hi: #FFE566;
  --gold-lo: #FF9F00;
  --bg-deep: #020810;
  --glass-1: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.06);
  --spec:    rgba(255,255,255,0.12);
  --glow-cyan:    0 0 20px rgba(0,212,255,.5), 0 0 60px rgba(0,212,255,.2);
  --glow-violet:  0 0 20px rgba(155,107,255,.5), 0 0 60px rgba(155,107,255,.2);
  --glow-emerald: 0 0 20px rgba(0,255,157,.5), 0 0 60px rgba(0,255,157,.2);
  --glow-gold:    0 0 20px rgba(255,215,0,.5), 0 0 60px rgba(255,215,0,.2);
}

/* ══ Crash / game / profile fluid type (ex index.html FIX 2) ══ */
#crash-mult-big { font-size: clamp(28px, 10vw, 44px) !important; }
#crash-status-label { font-size: clamp(9px, 2.5vw, 11px) !important; }
#crash-round-id, #crash-streak, #crash-players { font-size: clamp(11px, 3vw, 13px) !important; }
#crash-bet-input { font-size: clamp(15px, 4.5vw, 18px) !important; }
#crash-auto-val { font-size: clamp(10px, 3vw, 12px) !important; }
#crash-live-feed { font-size: clamp(10px, 2.8vw, 12px) !important; }
#rg-wins, #rg-actions, #rg-losses { font-size: clamp(15px, 4.5vw, 18px) !important; }
#gc-drt-out, #gc-coins-in { font-size: clamp(14px, 4vw, 16px) !important; }
.game-mode-card [style*="font-size:11px"], .game-mode-card [style*="font-size: 11px"] { font-size: clamp(10px, 2.8vw, 11px) !important; }
.game-mode-card [style*="font-size:15px"], .game-mode-card [style*="font-size: 15px"] { font-size: clamp(13px, 3.8vw, 15px) !important; }
.game-mode-card [style*="font-size:12px"] { font-size: clamp(10px, 3vw, 12px) !important; }
.game-mode-card [style*="font-size:9px"] { font-size: clamp(8px, 2.3vw, 9px) !important; }
#pvp-match-status { font-size: clamp(11px, 3vw, 13px) !important; }
.pvp-vs-row [style*="font-size:10px"] { font-size: clamp(9px, 2.5vw, 10px) !important; }
#ref-fomo-text { font-size: clamp(11px, 3vw, 12px) !important; }
#tab-ref-fomo { font-size: clamp(12px, 3.2vw, 13px) !important; }
#profile-name { font-size: clamp(17px, 5vw, 20px) !important; }
#profile-email { font-size: clamp(10px, 2.8vw, 12px) !important; }
.ludo-header [style*="font-size"] { font-size: clamp(9px, 2.5vw, 11px) !important; }
#sub-crashgame [style*="font-size:8px"] { font-size: clamp(7px, 2vw, 8px) !important; }
#gc-coins-in ~ span, [style*="font-size:1.2rem"] { font-size: clamp(14px, 4vw, 20px) !important; }
@media screen and (max-width: 374px) {
  #crash-mult-big { font-size: clamp(22px, 8vw, 32px) !important; }
  #crash-bet-input { font-size: 15px !important; }
  #rg-wins, #rg-actions, #rg-losses { font-size: 14px !important; }
  .game-mode-card [style*="font-size:15px"] { font-size: 12px !important; }
}

.leader-name-fs { font-size: clamp(13px, 3.8vw, 15px); font-weight: 700; }
.leader-bal-fs { font-size: clamp(11px, 3.2vw, 13px); }
.dr-inline-fs-12 { font-size: clamp(10px, 3vw, 12px); }
.rank-badge-fs-20 { font-size: 20px; }

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
*:not(canvas){max-width:100%;}
html,body{
  height:100vh;height:100dvh;width:100%;max-width:100%;overflow:hidden;
  overflow-x:hidden;
  max-width:100vw;
  background:var(--bg);color:var(--text);
  font-family: var(--font-body);
  font-size: clamp(13px, 3.5vw, 16px); /* fluid: scales between 13–16px */
  letter-spacing: 0.01em;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:pan-y;
  /* position:relative — avoids iOS keyboard scroll breaking on auth/chat inputs */
  position:relative;
}

/* ── GLOBAL PERFORMANCE OPTIMIZATIONS ──────────────────────── */
/* GPU-composite all animated elements to avoid layout thrashing */
.screen, .sub-screen {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* Sub-screens not visible */
.sub-screen:not(.open) {
  pointer-events: none;
}
/* Isolate toast container so it never triggers full-page repaints */
#toast-container {
  contain: layout style;
  isolation: isolate;
}
/* Buttons: remove all tap highlight flicker */
button, .action-btn, .nav-item, .back-btn, .copy-btn, .send-btn, .spin-btn, .pvp-tap-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* ── End global perf ── */

/* ════ ANTI-COLLAPSE SHIELD ════════════════════════════════════════
   Prevents visible screen collapse/jump on tap in ALL mobile WebViews
   (WhatsApp, Telegram, Instagram, Android Chrome, iOS Safari, etc.)

   Root causes addressed:
   1. position:fixed elements appended to <body> trigger body reflow
   2. getBoundingClientRect() on every tap forces synchronous layout
   3. Inline style.transform changes invalidate compositing layers
   4. Animating elements in the normal flow affect sibling layout

   Fixes:
   - #app is position:fixed so it can NEVER be affected by body reflow
   - .mine-section is fully paint-isolated (contain: layout style paint)
   - .mine-btn-wrap uses translateZ(0) for isolation (no standing will-change)
   - #dr-fx-overlay is the ONLY place FX elements are appended — not body
   ═══════════════════════════════════════════════════════════════════ */

/* App shell: already position:fixed — reinforcing isolation */
#app {
  isolation: isolate;
  contain: layout style;
}

/* Mine section: fully isolated paint zone — changes inside can NEVER
   affect layout of elements outside (hero card, progress bar, etc.) */
.mine-section {
  contain: layout style paint;
  isolation: isolate;
  position: relative;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Mine button wrap: own GPU layer, immune to parent reflows */
.mine-btn-wrap {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}

/* Mine button: transitions only on compositor-safe properties */
#mine-btn {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Remove any transition that could cause layout recalc */
  -webkit-tap-highlight-color: transparent;
}

#crash-graph-canvas {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.tap-particle,
.tap-ripple {
  will-change: transform;
}

/* FX overlay: sits above everything, never affects layout */
#dr-fx-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  pointer-events: none !important;
  z-index: 9997 !important;
  overflow: visible !important;
  /* BUG #15 FIX: 'contain: strict' implies overflow:hidden, clipping particles that
     extend outside the overlay bounds. Use 'contain: layout style' instead — this
     still creates an independent formatting context and prevents layout influence
     on the rest of the page, but does NOT force overflow:hidden. */
  contain: layout style;
  isolation: isolate;
  /* Prevent ANY layout influence on the rest of the page */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Particles/rings/sparks appended to overlay: never escape it visually
   but must NOT cause reflow in parent — overflow:visible on overlay handles this */
#dr-fx-overlay > * {
  pointer-events: none !important;
}

/* app-body: use transform-based GPU layer to prevent scroll jank on tap */
.app-body {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
/* ── End anti-collapse shield ── */

/* ── Scrollbars ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--primary);opacity:.3;border-radius:4px}

/* ── App Shell ── */
#app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ── Screens ── */
.screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
  transform:translateY(12px);
  overflow:hidden;
}
.screen.active{
  opacity:1;pointer-events:auto;
  transform:translateY(0);
  z-index:10;
}
.bg-canvas{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.bg-canvas canvas{position:absolute;inset:0;}
/* Dual-density grid: 80px major + 20px minor — from v14 */
.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(0,212,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.02) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,20px 20px,20px 20px;
  animation:gridDrift 30s linear infinite;
}
@keyframes gridDrift{to{background-position:80px 80px,80px 80px,20px 20px,20px 20px}}
/* arrowPulse defined later */

/* Full-screen vignette */
#app::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(2,8,16,.55) 75%,rgba(2,8,16,.85) 100%);
}

/* Tri-layer aurora orbs — from v14 */
.orb{
  position:absolute;border-radius:50%;
  pointer-events:none;
}
.orb-1{
  width:700px;height:700px;
  background:radial-gradient(circle at 40% 40%,rgba(0,144,255,.22) 0%,rgba(0,212,255,.10) 35%,rgba(155,107,255,.06) 60%,transparent 75%);
  top:-220px;right:-150px;
  animation:orbFloat1 16s ease-in-out infinite;filter:blur(90px);
  transform:translateZ(0);
}
.orb-2{
  width:600px;height:600px;
  background:radial-gradient(circle at 60% 60%,rgba(0,220,120,.18) 0%,rgba(0,255,157,.08) 40%,rgba(0,144,255,.05) 65%,transparent 78%);
  bottom:-160px;left:-120px;
  animation:orbFloat2 20s ease-in-out infinite;filter:blur(80px);
  transform:translateZ(0);
}
.orb-3{
  width:450px;height:450px;
  background:radial-gradient(circle at 50% 50%,rgba(155,107,255,.16) 0%,rgba(255,180,0,.07) 45%,transparent 72%);
  top:35%;left:25%;
  animation:orbFloat3 24s ease-in-out infinite;filter:blur(70px);
  transform:translateZ(0);
}
@keyframes orbFloat1{0%,100%{transform:translateY(0)translateX(0)scale(1)}33%{transform:translateY(-35px)translateX(12px)scale(1.04)}66%{transform:translateY(15px)translateX(-8px)scale(.97)}}
@keyframes orbFloat2{0%,100%{transform:translateY(0)translateX(0)scale(1)}40%{transform:translateY(28px)translateX(-16px)scale(1.05)}75%{transform:translateY(-12px)translateX(10px)scale(.96)}}
@keyframes orbFloat3{0%,100%{transform:translateY(0)scale(1)}50%{transform:translateY(-20px)scale(1.08)}}

/* ── Splash Screen ── */
#splash{
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;z-index:100;
  background:var(--bg);
}
.splash-logo{
  font-family:var(--font-head);font-size:52px;font-weight:800;
  background:linear-gradient(135deg, #00C8FF, #0090FF, #00FF88);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:-2px;animation:logoReveal 1s ease forwards;
  opacity:0;
}
.splash-sub{
  font-family:var(--font-mono);font-size:12px;
  color:var(--muted);letter-spacing:4px;text-transform:uppercase;
  margin-top:8px;animation:fadeUp .8s ease .4s forwards;opacity:0;
}
.splash-ring{
  width:120px;height:120px;border-radius:50%;
  border:2px solid transparent;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,
             linear-gradient(135deg,#00C8FF,#00FF88) border-box;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:32px;
  animation:ringPulse 2s ease infinite, fadeIn .6s ease forwards;
  opacity:0;
}
.splash-ring svg{width:56px;height:56px;}
/* ringPulse, logoReveal, fadeUp, fadeIn defined later with enhanced versions */
.splash-bar{
  width:180px;height:3px;background:var(--card);
  border-radius:2px;margin-top:48px;overflow:hidden;
  animation:fadeIn .5s ease .6s forwards;opacity:0;
}
.splash-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--primary),var(--green));
  border-radius:2px;animation:splashLoad 2s ease .8s forwards;
}
/* splashLoad defined later */

/* ── Auth Screen ── */
#auth{background:var(--bg);}
.auth-inner{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:32px 24px 24px;
  position:relative;z-index:2;overflow-y:auto;
}
.auth-logo-wrap{text-align:center;margin-bottom:36px;}
.auth-logo{
  font-family:var(--font-head);font-size:38px;font-weight:800;
  background:linear-gradient(135deg,#00C8FF,#0090FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.auth-sub{color:var(--muted);font-size:13px;margin-top:6px;letter-spacing:.5px;}

.auth-tabs{
  display:flex;gap:4px;background:var(--card);
  border-radius:12px;padding:4px;margin-bottom:28px;width:100%;max-width:360px;
}
.auth-tab{
  flex:1;padding:10px;border:none;background:transparent;
  color:var(--muted);font-family:var(--font-head);font-weight:600;
  font-size:14px;border-radius:9px;cursor:pointer;transition:all .2s;
}
.auth-tab.active{background:var(--primary);color:#000;}

.auth-form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px;}
.field{position:relative;}
.field input{
  width:100%;padding:14px 16px;
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r);color:var(--text);font-size:15px;
  font-family:var(--font-body);transition:border-color .2s;
  outline:none;
}
.field input:focus{border-color:var(--primary);}
.field input::placeholder{color:var(--muted);}
.field label{
  position:absolute;top:-10px;left:12px;
  background:var(--card);padding:0 6px;
  font-size:11px;color:var(--primary);
  font-family:var(--font-mono);letter-spacing:1px;text-transform:uppercase;
}
.ref-field{
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r);padding:12px 16px;
  font-size:13px;color:var(--muted);
}
.ref-field span{color:var(--primary);}

.btn-primary{
  padding:15px;border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#000;font-family:var(--font-head);font-weight:700;
  font-size:16px;border-radius:var(--r);cursor:pointer;
  transition:all .2s;letter-spacing:.5px;
  position:relative;overflow:hidden;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,200,255,.3);}
.btn-primary:active{transform:scale(.97);}
.btn-primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(255,255,255,.15),transparent);
  opacity:0;transition:opacity .2s;
}
.btn-primary:hover::after{opacity:1;}

.btn-secondary{
  padding:14px;border:1.5px solid var(--border);
  background:transparent;
  color:var(--text);font-family:var(--font-head);font-weight:700;
  font-size:15px;border-radius:var(--r);cursor:pointer;
  transition:all .2s;letter-spacing:.5px;
  display:block;width:100%;text-align:center;
}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary);}
.btn-secondary:active{transform:scale(.97);}

.demo-banner{
  margin-top:20px;padding:14px 18px;
  background:rgba(255,215,0,.06);border:1px solid rgba(255,215,0,.2);
  border-radius:var(--r);text-align:center;
}
.demo-banner p{font-size:12px;color:var(--gold);line-height:1.6;}
.demo-banner strong{color:#fff;}

/* ── Main App Layout ── */
#main{background:var(--bg);}
.app-body{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;z-index:2;padding-bottom:80px;}

/* ── Top Bar ── */
.top-bar{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 12px;
  background:linear-gradient(var(--bg),transparent);
  flex-shrink:0;
}
.top-logo{font-family:var(--font-head);font-size:22px;font-weight:800;
  background:linear-gradient(90deg,#00C8FF,#0090FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.top-right{display:flex;align-items:center;gap:10px;}
.icon-btn{
  width:38px;height:38px;border-radius:10px;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
  font-size:18px;flex-shrink:0;
}
.icon-btn:active{transform:scale(.9);}
.notif-dot{position:relative;}
.notif-dot::after{
  content:'';position:absolute;top:6px;right:6px;
  width:8px;height:8px;background:var(--red);
  border-radius:50%;border:2px solid var(--bg);
}
.phase-pill{
  padding:5px 12px;border-radius:20px;
  background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3);
  font-family:var(--font-mono);font-size:11px;color:var(--gold);
  font-weight:700;letter-spacing:.5px;
}

/* ── Balance Hero Card ── */
.hero-card{
  margin:4px 16px 0;
  background:linear-gradient(145deg,rgba(0,212,255,.09) 0%,rgba(155,107,255,.06) 50%,rgba(0,255,157,.04) 100%);
  border:1px solid rgba(0,212,255,.22);border-radius:24px;
  position:relative;overflow:hidden;
  box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(0,212,255,.08) inset,0 16px 60px rgba(0,0,0,.55),0 0 40px rgba(0,212,255,.08);
  backdrop-filter:blur(24px);padding:22px 24px;
}
/* Holographic foil sweep */
.hero-card::before{
  content:'';position:absolute;top:0;left:-120%;width:80%;height:100%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.025) 30%,rgba(0,212,255,.06) 50%,rgba(155,107,255,.04) 65%,transparent 100%);
  animation:heroFoilSweep 6s ease-in-out infinite;pointer-events:none;
}
/* Corner glow orb */
.hero-card::after{
  content:'';position:absolute;top:-50px;right:-50px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.18),transparent 65%);pointer-events:none;
}
@keyframes heroFoilSweep{0%{left:-120%;opacity:0}10%{opacity:1}50%{left:120%;opacity:1}55%{opacity:0}100%{left:120%;opacity:0}}

.hero-label{
  font-family:var(--font-mono);font-size:10px;
  color:rgba(232,244,255,.5);text-transform:uppercase;letter-spacing:3px;
  margin-bottom:10px;
}
/* Balance number shimmer */
.hero-balance{
  font-family:'Orbitron',sans-serif;font-size:44px;font-weight:900;
  background:linear-gradient(100deg,#ffffff 0%,#00D4FF 25%,#ffffff 40%,#9B6BFF 60%,#00FF9D 80%,#ffffff 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:balanceShimmer 4s linear infinite;letter-spacing:-1px;line-height:1;
  filter:drop-shadow(0 0 20px rgba(0,212,255,.35));
  display:inline-block;
}
.hero-token{
  font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;
  color:var(--cyan);text-shadow:0 0 14px rgba(0,212,255,.7);margin-left:6px;vertical-align:middle;
}
.hero-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:20px;gap:8px;
}
.stat-mini{text-align:center;flex:1;}
.stat-mini-val{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(0,212,255,.4);}
.stat-mini-lbl{font-size:11px;color:var(--muted);margin-top:2px;}
.hero-divider{width:1px;height:36px;background:rgba(0,212,255,.18);}

/* ── Mining Button — 3D sphere ── */
.mine-section{padding:20px 16px 0;text-align:center;}
.mine-btn-wrap{position:relative;display:inline-block;width:clamp(150px,42vw,220px);height:clamp(150px,42vw,220px);}
.mine-btn-wrap{
  position: relative;
  display: inline-block;
  width: clamp(150px, 42vw, 220px);
  height: clamp(150px, 42vw, 220px);
}
/* Rainbow rotating corona ring */
.mine-btn-wrap::before{
  content:'';position:absolute;inset:-5px;border-radius:50%;z-index:0;
  background:conic-gradient(#00D4FF 0deg,#9B6BFF 60deg,#FF3D6B 120deg,#FFD700 180deg,#00FF9D 240deg,#00D4FF 300deg,#9B6BFF 360deg);
  animation:coronaRotate 3s linear infinite;filter:blur(4px);opacity:.75;
}
/* Outer diffuse glow */
.mine-btn-wrap::after{
  content:'';position:absolute;inset:-16px;border-radius:50%;z-index:0;
  background:conic-gradient(rgba(0,212,255,.3) 0deg,rgba(155,107,255,.3) 90deg,rgba(0,255,157,.2) 180deg,rgba(0,212,255,.3) 360deg);
  animation:coronaRotate 5s linear infinite reverse;filter:blur(18px);opacity:.6;
}
@keyframes coronaRotate{to{transform:rotate(360deg)}}
#mine-btn{
  width:100%;height:100%;border-radius:50%;border:none;cursor:pointer;
  position:relative;z-index:1;overflow:hidden;touch-action:manipulation;
  background:
    radial-gradient(ellipse 55% 45% at 35% 28%,rgba(255,255,255,.18) 0%,transparent 60%),
    radial-gradient(circle at 50% 50%,#0D2A50 0%,#071830 50%,#040E20 100%);
  box-shadow:0 0 0 2px rgba(0,212,255,.3),0 8px 40px rgba(0,0,0,.8),inset 0 -4px 20px rgba(0,0,0,.6),inset 0 4px 16px rgba(0,212,255,.08);
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;
}
#mine-btn::before{
  content:'';position:absolute;top:14%;left:22%;width:42%;height:22%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 60%,transparent 100%);
  pointer-events:none;z-index:3;
}
#mine-btn::after{
  content:'';position:absolute;inset:4px;border-radius:50%;
  background:conic-gradient(rgba(0,212,255,.5) 0deg,rgba(155,107,255,.4) 90deg,rgba(0,255,157,.3) 180deg,rgba(255,215,0,.25) 270deg,rgba(0,212,255,.5) 360deg);
  mask:radial-gradient(circle,transparent 85%,black 88%);
  -webkit-mask:radial-gradient(circle,transparent 85%,black 88%); mask:radial-gradient(circle,transparent 85%,black 88%);
  animation:coronaRotate 4s linear infinite;z-index:2;
}
#mine-btn.active::after{background:conic-gradient(var(--green) 0deg, var(--primary) 180deg, var(--green) 360deg);}
#mine-btn.active{
  box-shadow:0 0 0 3px rgba(0,255,157,.6),0 0 30px rgba(0,255,157,.4),0 0 70px rgba(0,255,157,.15),0 8px 40px rgba(0,0,0,.8),inset 0 -4px 20px rgba(0,0,0,.6);
  animation:plasmaGlow 2s ease-in-out infinite !important;
}
#mine-btn:active{transform:scale(.93);}
@keyframes plasmaGlow{
  0%,100%{box-shadow:0 0 0 3px rgba(0,255,157,.5),0 0 25px rgba(0,255,157,.35),0 0 55px rgba(0,255,157,.12),0 8px 40px rgba(0,0,0,.8);}
  50%{box-shadow:0 0 0 5px rgba(0,255,157,.7),0 0 50px rgba(0,255,157,.55),0 0 90px rgba(0,255,157,.22),0 8px 40px rgba(0,0,0,.8);}
}
.mine-inner{position:relative;z-index:4;padding-top:28px;pointer-events:none;}
.mine-icon{font-size:48px;display:block;line-height:1;filter:drop-shadow(0 0 16px rgba(0,212,255,.8));animation:mineIconFloat 3.5s ease-in-out infinite;}
@keyframes mineIconFloat{0%,100%{transform:translateY(0)scale(1)}50%{transform:translateY(-6px)scale(1.04)}}
.mine-label{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:800;color:var(--cyan);text-transform:uppercase;letter-spacing:2.5px;margin-top:10px;display:block;text-shadow:0 0 16px rgba(0,212,255,.8);}
.mine-rate{font-family:'Inter',ui-monospace,monospace;font-size:11px;color:rgba(232,244,255,.4);margin-top:4px;}
/* Inner halo */
.mine-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.18) 0%,transparent 72%);opacity:0;pointer-events:none;transition:opacity .25s ease !important;}
#mine-btn.active .mine-halo{opacity:1;}
/* particle — used by spawnParticles() in Ludo game */
.particle {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  border-radius: 50%;
  animation: particleBurst 0.7s ease-out forwards;
}
@keyframes particleBurst {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, -40px)) scale(0.3); }
}
/* confetti-piece — canonical definition is further below; this placeholder removed to avoid cascade conflicts */

#mine-btn.active::after{background:conic-gradient(var(--green) 0deg, var(--primary) 180deg, var(--green) 360deg);}
#mine-btn.active{box-shadow:0 0 0 8px rgba(0,255,136,.12), 0 0 40px rgba(0,255,136,.2);}
#mine-btn:active{transform:scale(.94);}
.mine-inner{position:relative;z-index:2;padding-top:30px;pointer-events:none;}
.mine-icon{font-size:44px;display:block;line-height:1;
  animation:mineIconFloat 3s ease-in-out infinite;}
/* mineIconFloat defined later with enhanced scale */
@keyframes mineIconFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.05)} }

.mine-label{
  font-family:var(--font-head);font-size:13px;font-weight:700;
  color:var(--primary);text-transform:uppercase;letter-spacing:2px;
  margin-top:8px;display:block;
}
.mine-rate{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:4px;}

/* Tap ripple */
.tap-ripple{
  position:absolute;border-radius:50%;
  background:rgba(0,200,255,.4);
  transform:scale(0);animation:rippleGo .6s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleGo{to{transform:scale(4);opacity:0;}}

/* Tap particle */
.tap-particle{
  position:fixed;pointer-events:none;z-index:999;
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  color:var(--primary);animation:particleFloat .8s ease-out forwards;
}
/* particleFloat defined later */
@keyframes particleFloat { to { transform: translateY(-60px); opacity: 0; } }


/* ── Progress Bar ── */
.progress-section{padding:16px 16px 0;}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.progress-title{font-size:12px;color:var(--muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1px;}
.progress-val{font-family:var(--font-mono);font-size:12px;color:var(--primary);}
.progress-track{
  height:8px;background:var(--card);border-radius:8px;
  border:1px solid var(--border);overflow:hidden;
}
#tap-progress{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--primary),var(--green));
  border-radius:8px;transition:width .3s ease;
  position:relative;
}
#tap-progress::after{
  content:attr(data-pct);
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:9px;color:#000;font-weight:700;
}

/* ── Quick Stats ── */
.quick-stats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding:16px;
}
.stat-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;
  position:relative;overflow:hidden;transition:border-color .2s;
}
.stat-card:hover{border-color:var(--border2);}
.stat-card-icon{font-size:22px;margin-bottom:8px;display:block;}
.stat-card-val{font-family:var(--font-mono);font-size:17px;font-weight:700;color:#fff;}
.stat-card-lbl{font-size:11px;color:var(--muted);margin-top:3px;}
.stat-card-glow{
  position:absolute;top:-20px;right:-20px;
  width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle,var(--primary),transparent 70%);
  opacity:.08;
}

/* ── Section Header ── */
.section-header, .section-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 10px;
}
.section-title{font-family:var(--font-head);font-size:16px;font-weight:700;color:#fff;}
.section-action{font-size:12px;color:var(--primary);cursor:pointer;font-family:var(--font-mono);}

/* ── Action Row ── */
.action-row{
  display:flex;gap:10px;padding:0 16px;overflow-x:auto;
  scrollbar-width:none;padding-bottom:4px;
}
.action-row::-webkit-scrollbar{display:none}
.action-btn{
  flex-shrink:0;padding:10px 18px;
  border-radius:var(--r);border:1.5px solid var(--border);
  background:var(--card);cursor:pointer;
  font-family:var(--font-head);font-size:13px;font-weight:600;
  color:var(--text);transition:all .2s;
  display:flex;align-items:center;gap:8px;
  touch-action:manipulation;
}
.action-btn:active{transform:scale(.95);}
.action-btn.gold{border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.06);}
.action-btn.green{border-color:rgba(0,255,136,.3);background:rgba(0,255,136,.06);}

/* ── Bottom Nav ── */
.bottom-nav{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:space-around;
  padding:8px 0 max(8px,env(safe-area-inset-bottom));
  background:rgba(4,12,24,.92);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;cursor:pointer;padding:4px 14px;
  transition:all .2s;flex:1;
  border:none;background:transparent;
  touch-action:manipulation;
}
.nav-item:active{transform:scale(.92);}
.nav-icon{font-size:22px;transition:transform .2s;}
.nav-label{font-size:10px;color:var(--muted);font-family:var(--font-mono);letter-spacing:.5px;text-transform:uppercase;}
.nav-item.active .nav-icon{transform:scale(1.15);}
.nav-item.active .nav-label{color:var(--primary);}
.nav-item.active .nav-icon{filter:drop-shadow(0 0 8px var(--primary));}

/* ── Sub-screens ── */
.sub-screen{
  position:fixed;top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;
  z-index:200;
  display:flex;flex-direction:column;
  background:var(--bg);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  overflow:hidden;
}
.sub-screen.open{
  transform:translateX(0);
  pointer-events:auto;
}
.sub-header{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.back-btn{
  width:36px;height:36px;border-radius:10px;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;flex-shrink:0;
  transition:all .2s;
}
.back-btn:active{transform:scale(.9);}
.sub-title{font-family:var(--font-head);font-size:18px;font-weight:700;}
.sub-body{flex:1;overflow-y:auto;padding:16px;}

/* ── Leaderboard ── */
.leader-item{
  display:flex;align-items:center;gap:14px;
  padding:14px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r);
  margin-bottom:8px;transition:border-color .2s;
}
.leader-item.top1{border-color:rgba(255,215,0,.4);background:rgba(255,215,0,.04);}
.leader-item.top2{border-color:rgba(192,192,192,.4);background:rgba(192,192,192,.04);}
.leader-item.top3{border-color:rgba(205,127,50,.4);background:rgba(205,127,50,.04);}
.rank-badge{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  background:var(--surface);flex-shrink:0;
}
.leader-info{flex:1;}
.leader-name{font-weight:600;font-size:14px;}
.leader-sub{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--font-mono);}
.leader-bal{font-family:var(--font-mono);font-size:14px;color:var(--primary);font-weight:700;}

/* ── Chat ── */
.chat-messages{
  flex:1;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;gap:8px;
}
.chat-bubble{
  max-width:78%;padding:10px 14px;border-radius:14px;
  font-size:14px;line-height:1.5;
}
.chat-bubble.me{
  align-self:flex-end;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#000;border-bottom-right-radius:4px;
}
.chat-bubble.other{
  align-self:flex-start;
  background:var(--card);border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.chat-bubble .sender{font-size:11px;font-weight:700;margin-bottom:3px;font-family:var(--font-mono);}
.chat-bubble.me .sender{color:rgba(0,0,0,.6);}
.chat-bubble.other .sender{color:var(--primary);}
.chat-input-row{
  display:flex;gap:8px;padding:12px;
  border-top:1px solid var(--border);flex-shrink:0;
}
.chat-input{
  flex:1;padding:12px 14px;
  background:var(--card);border:1.5px solid var(--border);
  border-radius:12px;color:var(--text);font-size:14px;
  font-family:var(--font-body);outline:none;transition:border-color .2s;
}
.chat-input:focus{border-color:var(--primary);}
.send-btn{
  width:44px;height:44px;border-radius:12px;border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#000;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.send-btn:active{transform:scale(.92);}

/* ── Withdrawal ── */
.withdraw-balance{
  text-align:center;padding:28px;
  background:linear-gradient(135deg,rgba(0,255,136,.06),rgba(0,200,255,.06));
  border:1px solid rgba(0,255,136,.2);border-radius:var(--r2);
  margin-bottom:20px;
}
.withdraw-bal-val{font-family:var(--font-head);font-size:36px;font-weight:800;
  background:linear-gradient(135deg,#00FF88,var(--primary));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.withdraw-bal-lbl{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:4px;}
.min-note{font-size:12px;color:var(--orange);text-align:center;margin-bottom:16px;
  padding:10px;background:rgba(255,140,0,.06);border-radius:var(--r);border:1px solid rgba(255,140,0,.2);}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.method-card{
  padding:14px;background:var(--card);border:2px solid var(--border);
  border-radius:var(--r);cursor:pointer;text-align:center;transition:all .2s;
}
.method-card.selected{border-color:var(--primary);background:rgba(0,200,255,.06);}
.method-icon{font-size:24px;display:block;margin-bottom:6px;}
.method-name{font-size:12px;font-weight:600;font-family:var(--font-mono);}
.phase-warning{
  padding:14px;background:rgba(255,68,68,.06);
  border:1px solid rgba(255,68,68,.2);border-radius:var(--r);
  font-size:13px;color:#FF8888;line-height:1.6;margin-bottom:16px;
}

/* ── Info Row (Profile, Wallet) ── */
.info-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);
  font-size:13px;
}
.info-row:last-child{border-bottom:none;}
.info-key{color:var(--muted);}
.info-val{font-family:var(--font-mono);font-size:13px;font-weight:600;color:#fff;}

/* ── Referral ── */
.ref-card{
  background:linear-gradient(135deg,rgba(255,215,0,.06),rgba(255,165,0,.04));
  border:1px solid rgba(255,215,0,.2);border-radius:var(--r2);
  padding:24px;margin-bottom:16px;text-align:center;
}
.ref-code-display{
  font-family:var(--font-mono);font-size:24px;font-weight:700;
  color:var(--gold);letter-spacing:4px;margin:12px 0;
  padding:14px;background:rgba(255,215,0,.06);
  border-radius:var(--r);border:1px solid rgba(255,215,0,.2);
}
.copy-btn{
  padding:12px 24px;border:none;
  background:rgba(255,215,0,.15);
  color:var(--gold);font-family:var(--font-head);
  font-weight:700;font-size:14px;border-radius:var(--r);
  cursor:pointer;transition:all .2s;
}
.copy-btn:active{transform:scale(.95);}
.ref-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px;}
.ref-stat{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 8px;text-align:center;
}
.ref-stat-val{font-family:var(--font-mono);font-size:17px;font-weight:700;color:#fff;}
.ref-stat-lbl{font-size:10px;color:var(--muted);margin-top:4px;}

/* ── Settings items — see full definition in Settings section below ── */

/* ── Token Info ── */
.token-hero{
  background:linear-gradient(135deg,#0D1E3A,#0A1628);
  border:1px solid var(--border2);border-radius:var(--r2);
  padding:24px;margin-bottom:16px;text-align:center;
  position:relative;overflow:hidden;
}
.token-hero::before{
  content:'';position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(0,200,255,.1),transparent 70%);
}
.token-symbol{
  font-family:var(--font-head);font-size:56px;font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--green));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  position:relative;
}
.token-name{font-size:14px;color:var(--muted);font-family:var(--font-mono);margin-top:4px;}
.token-supply{font-family:var(--font-mono);font-size:13px;color:var(--primary);margin-top:12px;}

.phase-cards{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.phase-card{
  padding:14px 16px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r);
  display:flex;align-items:center;justify-content:space-between;
}
.phase-card.current{border-color:var(--primary);background:rgba(0,200,255,.05);}
.phase-card-label{font-family:var(--font-mono);font-size:13px;color:var(--muted);}
.phase-card-label strong{color:#fff;font-size:14px;}
.phase-rate{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--primary);}
.phase-status{font-size:11px;color:var(--green);}

/* ── Admin Panel ── */
.admin-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.admin-stat{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;text-align:center;
}
.admin-stat-val{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--primary);}
.admin-stat-lbl{font-size:11px;color:var(--muted);margin-top:4px;}
.admin-section{margin-bottom:20px;}
.admin-section-title{font-family:var(--font-head);font-size:14px;font-weight:700;margin-bottom:12px;color:var(--gold);}
.admin-btn{
  width:100%;padding:13px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);font-family:var(--font-head);font-weight:600;
  font-size:14px;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:12px;
  transition:all .2s;margin-bottom:8px;
}
.admin-btn:hover{border-color:var(--primary);background:rgba(0,200,255,.04);}
.admin-btn span{font-size:20px;}

/* ── Roadmap ── */
.roadmap-item{
  display:flex;gap:16px;margin-bottom:20px;
}
.roadmap-line{
  display:flex;flex-direction:column;align-items:center;flex-shrink:0;
}
.roadmap-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--primary);flex-shrink:0;
  box-shadow:0 0 10px var(--primary);
}
.roadmap-dot.done{background:var(--green);box-shadow:0 0 10px var(--green);}
.roadmap-dot.future{background:var(--surface);border:2px solid var(--border);}
.roadmap-connector{flex:1;width:2px;background:linear-gradient(var(--primary),var(--border));margin-top:4px;}
.roadmap-content{padding-top:0;padding-bottom:8px;}
.roadmap-phase{font-family:var(--font-mono);font-size:11px;color:var(--primary);text-transform:uppercase;letter-spacing:1px;}
.roadmap-title{font-family:var(--font-head);font-size:15px;font-weight:700;margin-top:2px;}
.roadmap-items{margin-top:6px;display:flex;flex-direction:column;gap:4px;}
.roadmap-item-li{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.roadmap-item-li::before{content:'→';color:var(--primary);flex-shrink:0;}

/* ── Settings ── */
.settings-section{margin-bottom:20px;}
.settings-label{font-family:var(--font-mono);font-size:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;padding:0 4px;}
.setting-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:var(--card);
  border:1px solid var(--border);margin-bottom:1px;
  cursor:pointer;transition:background .2s;
}
.setting-item:first-of-type{border-radius:var(--r) var(--r) 0 0;}
.setting-item:last-of-type{border-radius:0 0 var(--r) var(--r);}
.setting-item:only-child{border-radius:var(--r);}
.setting-item:hover{background:rgba(0,200,255,.04);}
.setting-left{display:flex;align-items:center;gap:14px;}
.setting-icon{font-size:20px;width:24px;text-align:center;}
.setting-title{font-size:14px;font-weight:500;}
.setting-arrow{color:var(--muted);font-size:16px;}
.toggle{
  width:44px;height:24px;background:var(--surface);
  border-radius:12px;border:1px solid var(--border);
  position:relative;cursor:pointer;transition:background .2s;
}
.toggle.on{background:var(--green);}
.toggle::after{
  content:'';position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .2s;
}
.toggle.on::after{transform:translateX(20px);}

/* ── Toast ── */
#toast-container{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;
  align-items:center;gap:8px;pointer-events:none;
}
.toast{
  padding:10px 20px;border-radius:20px;
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  backdrop-filter:blur(20px);
  animation:toastIn .3s ease, toastOut .3s ease 2.2s forwards;
  white-space:normal;word-break:break-word;max-width:calc(100vw - 32px);
  text-align:center;
}
.toast.success{background:rgba(0,255,136,.15);border:1px solid rgba(0,255,136,.3);color:var(--green);}
.toast.error{background:rgba(255,68,68,.15);border:1px solid rgba(255,68,68,.3);color:#FF8888;}
.toast.warn{background:rgba(255,215,0,.15);border:1px solid rgba(255,215,0,.3);color:var(--gold);}
.toast.info{background:rgba(0,200,255,.15);border:1px solid rgba(0,200,255,.3);color:var(--primary);}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.9)}}

/* ── Modal ── */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(4,12,24,.85);backdrop-filter:blur(12px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal{
  width:100%;max-width:480px;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--r2) var(--r2) 0 0;padding:24px;
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  max-height:90vh;overflow-y:auto;
}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-handle{
  width:40px;height:4px;background:var(--border2);
  border-radius:2px;margin:0 auto 20px;
}
.modal-title{font-family:var(--font-head);font-size:20px;font-weight:700;margin-bottom:16px;}

/* ── Onboarding ── */
#onboarding{background:var(--bg);z-index:90;}
.onboard-slides{
  display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);
  width:100%;flex:1;
}
.onboard-slide{
  min-width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 32px;text-align:center;
}
.onboard-emoji{font-size:80px;margin-bottom:24px;display:block;
  animation:onboardFloat 3s ease-in-out infinite;}
@keyframes onboardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.onboard-title{font-family:var(--font-head);font-size:28px;font-weight:800;line-height:1.2;margin-bottom:12px;}
.onboard-desc{font-size:15px;color:var(--muted);line-height:1.7;max-width:300px;}
.onboard-dots{display:flex;gap:8px;justify-content:center;padding:20px 0;}
.onboard-dot{
  width:8px;height:8px;border-radius:4px;
  background:var(--border2);transition:all .3s;
}
.onboard-dot.active{width:24px;background:var(--primary);}
.onboard-actions{padding:0 24px 40px;display:flex;flex-direction:column;gap:10px;}
/* btn-secondary base styles defined globally above — no re-declaration needed here */

/* ── Misc Utilities ── */
.divider{height:1px;background:var(--border);margin:16px 0;}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:20px;font-size:12px;font-family:var(--font-mono);}
.badge.green{background:rgba(0,255,136,.1);color:var(--green);border:1px solid rgba(0,255,136,.2);}
.badge.blue{background:rgba(0,200,255,.1);color:var(--primary);border:1px solid rgba(0,200,255,.2);}
.badge.gold{background:rgba(255,215,0,.1);color:var(--gold);border:1px solid rgba(255,215,0,.2);}
.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
.info-row:last-child{border-bottom:none;}
.info-key{font-size:13px;color:var(--muted);}
.info-val{font-family:var(--font-mono);font-size:13px;color:#fff;font-weight:600;}
.gradient-text{background:linear-gradient(135deg,var(--primary),var(--green));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* Loading */
.loading-spinner{
  display:inline-block;width:20px;height:20px;
  border:2px solid rgba(0,200,255,.2);border-top-color:var(--primary);
  border-radius:50%;animation:spin .7s linear infinite;
}
/* spin keyframe defined later */

/* ═══════════════════════════════════════════════════════════════
   🎮 GAMING SECTION STYLES
═══════════════════════════════════════════════════════════════ */

/* Energy Bar */
.energy-section{padding:14px 16px 0;}
.energy-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.energy-label{font-family:var(--font-mono);font-size:11px;color:#EAB308;text-transform:uppercase;letter-spacing:1px;}
.energy-val{font-family:var(--font-mono);font-size:12px;color:#EAB308;font-weight:700;}
.energy-track{height:10px;background:var(--card);border-radius:10px;border:1px solid rgba(234,179,8,.2);overflow:hidden;}
#energy-bar{
  height:100%;width:100%;
  background:linear-gradient(90deg,#EAB308,#F59E0B);
  border-radius:10px;transition:width .5s ease;
}
#energy-bar.low{background:linear-gradient(90deg,#EF4444,#F97316);animation:energyPulse 1s ease infinite;}
@keyframes energyPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* Level Badge & XP Bar */
.game-profile-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px 0;
}
.level-badge{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  border:2px solid rgba(139,92,246,.5);
  box-shadow:0 0 16px rgba(139,92,246,.3);
}
.level-badge-num{font-family:var(--font-head);font-size:18px;font-weight:800;color:#fff;line-height:1;}
.level-badge-lbl{font-size:8px;color:rgba(255,255,255,.7);font-family:var(--font-mono);text-transform:uppercase;margin-top:1px;}
.xp-info{flex:1;}
.xp-title{font-size:13px;font-weight:600;color:#fff;margin-bottom:4px;}
.xp-bar-track{height:6px;background:var(--card);border-radius:6px;overflow:hidden;border:1px solid rgba(99,102,241,.2);}
#xp-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#6366F1,#8B5CF6);border-radius:6px;transition:width .4s ease;}
.xp-text{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:3px;}
.multiplier-badge{
  padding:4px 10px;border-radius:20px;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
  font-family:var(--font-mono);font-size:11px;color:#F59E0B;font-weight:700;
  flex-shrink:0;
}

/* Game Mode Cards */
.game-modes-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding:14px 16px 0;
}
.game-mode-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;cursor:pointer;
  transition:all .2s;position:relative;overflow:hidden;
  text-align:center;
}
.game-mode-card:active{transform:scale(.96);}
.game-mode-card.featured{
  grid-column:1/-1;
  background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.06));
  border-color:rgba(99,102,241,.3);
}
.game-mode-card.featured:hover{border-color:rgba(139,92,246,.5);box-shadow:0 0 20px rgba(99,102,241,.15);}
.game-card-emoji{font-size:32px;display:block;margin-bottom:8px;}
.game-card-title{font-family:var(--font-head);font-size:14px;font-weight:700;color:#fff;}
.game-card-desc{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;}
.game-card-badge{
  position:absolute;top:8px;right:8px;
  padding:2px 7px;border-radius:10px;
  font-size:9px;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
}
.badge-free{background:rgba(0,255,136,.1);color:var(--green);border:1px solid rgba(0,255,136,.2);}
.badge-hot{background:rgba(239,68,68,.1);color:#EF4444;border:1px solid rgba(239,68,68,.2);}
.badge-daily{background:rgba(245,158,11,.1);color:#F59E0B;border:1px solid rgba(245,158,11,.2);}

/* Missions Panel */
.missions-panel{padding:14px 16px 0;}
.mission-item{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:12px 14px;margin-bottom:8px;
  transition:border-color .2s;
}
.mission-item.done{border-color:rgba(0,255,136,.2);background:rgba(0,255,136,.03);}
.mission-icon{font-size:22px;flex-shrink:0;}
.mission-info{flex:1;}
.mission-title{font-size:13px;font-weight:600;color:#fff;}
.mission-prog{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:2px;}
.mission-bar-track{height:4px;background:var(--surface);border-radius:4px;margin-top:5px;overflow:hidden;}
.mission-bar-fill{height:100%;background:linear-gradient(90deg,#6366F1,#8B5CF6);border-radius:4px;transition:width .4s;}
.mission-reward{font-family:var(--font-mono);font-size:11px;color:var(--gold);flex-shrink:0;font-weight:700;}
.claim-mission-btn{
  padding:4px 10px;border-radius:8px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  color:#fff;font-size:10px;font-weight:700;font-family:var(--font-mono);
  transition:all .2s;flex-shrink:0;
}
.claim-mission-btn:active{transform:scale(.95);}
.claim-mission-btn:disabled{background:var(--card);color:var(--muted);cursor:default;}

/* Risk Game Play Screen */
.risk-game-screen{
  display:flex;flex-direction:column;align-items:center;
  padding:20px 16px;text-align:center;
}
.risk-game-coins{
  font-family:var(--font-mono);font-size:28px;font-weight:700;
  color:var(--gold);margin-bottom:4px;
}
.risk-game-coins-lbl{font-size:11px;color:var(--muted);margin-bottom:20px;}
.risk-tap-btn{
  width:180px;height:180px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.15));
  border:2px solid rgba(99,102,241,.4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:all .2s;box-shadow:0 0 30px rgba(99,102,241,.2);
  position:relative;overflow:hidden;
}
.risk-tap-btn:active{transform:scale(.93);box-shadow:0 0 50px rgba(99,102,241,.4);}
.risk-tap-btn::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(#6366F1 0deg, transparent 80deg, transparent 360deg);
  animation:rotateBorder 3s linear infinite;z-index:-1;
}
.risk-tap-emoji{font-size:52px;line-height:1;}
.risk-tap-label{font-family:var(--font-head);font-size:11px;font-weight:700;color:rgba(139,92,246,1);letter-spacing:2px;margin-top:6px;text-transform:uppercase;}
.risk-stats-row{
  display:flex;gap:20px;margin-top:20px;
}
.risk-stat{text-align:center;}
.risk-stat-val{font-family:var(--font-mono);font-size:16px;font-weight:700;color:#fff;}
.risk-stat-lbl{font-size:10px;color:var(--muted);margin-top:2px;}
.risk-actions{display:flex;gap:10px;margin-top:20px;width:100%;}
.risk-action-btn{
  flex:1;padding:12px;border-radius:var(--r);border:1.5px solid var(--border);
  background:var(--card);cursor:pointer;font-family:var(--font-head);
  font-size:13px;font-weight:600;color:var(--text);transition:all .2s;
}
.risk-action-btn:active{transform:scale(.96);}
.risk-action-btn.purple{border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.08);color:#A5B4FC;}
.risk-action-btn.gold{border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.06);color:var(--gold);}
.risk-action-btn.red{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.06);color:#FCA5A5;}

/* Spin Wheel */
.spin-wheel-wrap{
  position:relative;width:220px;height:220px;
  margin:0 auto;
}
.spin-wheel-canvas{
  width:220px;height:220px;border-radius:50%;
  box-shadow:0 0 30px rgba(99,102,241,.25);
}
.spin-wheel-pointer{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font-size:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  z-index:10;
}
.spin-btn{
  display:block;width:100%;margin-top:16px;padding:14px;border:none;
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  color:#fff;font-family:var(--font-head);font-weight:700;font-size:15px;
  border-radius:var(--r);cursor:pointer;transition:all .2s;
  letter-spacing:.5px;
}
.spin-btn:active{transform:scale(.97);}
.spin-btn:disabled{background:var(--card);color:var(--muted);cursor:not-allowed;}
.spin-result{
  margin-top:12px;padding:10px;text-align:center;
  border-radius:var(--r);font-family:var(--font-mono);font-size:14px;font-weight:700;
  min-height:42px;display:flex;align-items:center;justify-content:center;
}
.spin-result.win{background:rgba(0,255,136,.08);color:var(--green);border:1px solid rgba(0,255,136,.2);}
.spin-result.lose{background:rgba(239,68,68,.06);color:#FCA5A5;border:1px solid rgba(239,68,68,.15);}

/* Recovery Modal */
#recovery-modal{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:flex-end;justify-content:center;
  background:rgba(4,12,24,.85);backdrop-filter:blur(6px);
}
#recovery-modal.open{display:flex;animation:modalSlideUp .35s cubic-bezier(.4,0,.2,1);}
@keyframes modalSlideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.recovery-sheet{
  width:100%;max-width:480px;
  background:var(--surface);
  border-radius:24px 24px 0 0;
  border:1px solid var(--border);
  border-bottom:none;
  padding:24px 20px max(24px, env(safe-area-inset-bottom));
}
.recovery-header{text-align:center;margin-bottom:20px;}
.recovery-emoji{font-size:44px;display:block;margin-bottom:8px;}
.recovery-title{font-family:var(--font-head);font-size:20px;font-weight:800;color:#fff;}
.recovery-subtitle{font-size:13px;color:var(--muted);margin-top:4px;}
.recovery-loss{
  font-family:var(--font-mono);font-size:22px;font-weight:700;color:#EF4444;
  text-align:center;margin-bottom:20px;
}
.recovery-options{display:flex;flex-direction:column;gap:10px;}
.recovery-btn{
  padding:14px 18px;border-radius:var(--r);border:none;cursor:pointer;
  display:flex;align-items:center;gap:12px;text-align:left;
  transition:all .2s;
}
.recovery-btn:active{transform:scale(.98);}
.recovery-btn.primary{
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  border:1px solid rgba(139,92,246,.4);
}
.recovery-btn.secondary{
  background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.25);
}
.recovery-btn.skip{
  background:transparent;border:1px solid var(--border);
  justify-content:center;
}
.recovery-btn-icon{font-size:24px;flex-shrink:0;}
.recovery-btn-info{flex:1;}
.recovery-btn-title{font-family:var(--font-head);font-size:14px;font-weight:700;color:#fff;}
.recovery-btn-sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;}
.recovery-btn.skip .recovery-btn-title{color:var(--muted);}

/* Win/Lose Result Popup */
#result-popup{
  position:fixed;inset:0;z-index:190;
  display:none;align-items:center;justify-content:center;
  pointer-events:none;
}
#result-popup.show{display:flex;}
.result-bubble{
  padding:12px 24px;border-radius:30px;
  font-family:var(--font-head);font-size:20px;font-weight:800;
  animation:resultPop .6s cubic-bezier(.17,.67,.83,.67) forwards;
  pointer-events:none;
}
.result-bubble.win{background:rgba(0,255,136,.15);color:var(--green);border:1.5px solid rgba(0,255,136,.4);}
.result-bubble.lose{background:rgba(239,68,68,.12);color:#EF4444;border:1.5px solid rgba(239,68,68,.3);}
@keyframes resultPop{0%{opacity:0;transform:scale(.6) translateY(20px)}50%{opacity:1;transform:scale(1.1) translateY(-10px)}100%{opacity:0;transform:scale(.9) translateY(-40px)}}

/* Game Spec Corner */
.spec-section{margin-bottom:20px;}
.spec-section-title{
  font-family:var(--font-head);font-size:15px;font-weight:700;
  color:var(--primary);margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
}
.spec-block{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:14px;margin-bottom:8px;
}
.spec-block code{
  display:block;font-family:var(--font-mono);font-size:11px;
  color:#A5B4FC;line-height:1.7;
  white-space:pre-wrap;
  background:rgba(99,102,241,.05);padding:10px;border-radius:8px;margin-top:8px;
}
.spec-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.spec-row:last-child{border-bottom:none;}
.spec-key{font-size:12px;color:var(--muted);}
.spec-val{font-family:var(--font-mono);font-size:12px;font-weight:700;color:#fff;}
.spec-val.green{color:var(--green);}
.spec-val.gold{color:var(--gold);}
.spec-val.red{color:#EF4444;}
.spec-val.purple{color:#A5B4FC;}

/* Coin Bounce animation */
@keyframes coinBounce{0%{transform:translateY(0)}30%{transform:translateY(-8px)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}
.coin-bounce{animation:coinBounce .4s ease;}

/* Gaming nav glow */
.nav-item.gaming-nav.active .nav-icon{filter:drop-shadow(0 0 8px #8B5CF6)!important;}
.nav-item.gaming-nav.active .nav-label{color:#A5B4FC!important;}

/* ── VIRAL V4 ADDITIONS ─────────────────────────────────── */

/* Status / Title Badge */
.status-title-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:20px;font-family:var(--font-mono);
  font-size:11px;font-weight:700;letter-spacing:.5px;
  margin-top:8px;
}
.status-king{background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.35);color:var(--gold);}
.status-untouchable{background:rgba(255,68,0,.12);border:1px solid rgba(255,68,0,.35);color:#FF6B35;}
.status-addict{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.35);color:#A78BFA;}
.status-hunter{background:rgba(0,200,255,.12);border:1px solid rgba(0,200,255,.35);color:var(--primary);}
.status-rookie{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted);}

/* Steal/Attack Notification Banner */
.attack-banner{
  position:fixed;top:60px;left:0;right:0;z-index:500;
  margin:0 12px;
  background:linear-gradient(135deg,rgba(255,68,68,.15),rgba(139,0,0,.1));
  border:1px solid rgba(255,68,68,.35);border-radius:var(--r);
  padding:12px 16px;display:flex;align-items:center;gap:10px;
  transform:translateY(-120px);transition:transform .4s cubic-bezier(.17,.67,.83,.67);
  backdrop-filter:blur(12px);
}
.attack-banner.show{transform:translateY(0);}
.attack-banner-text{flex:1;font-size:13px;font-weight:600;}
.attack-banner-btn{
  padding:7px 14px;border-radius:10px;border:none;cursor:pointer;
  background:rgba(255,68,68,.2);border:1px solid rgba(255,68,68,.4);
  color:#FF8888;font-family:var(--font-mono);font-size:12px;font-weight:700;
  flex-shrink:0;
}
.attack-banner-btn:active{transform:scale(.95);}

/* Share Card Modal */
#share-card-modal{
  position:fixed;inset:0;z-index:300;
  display:none;align-items:center;justify-content:center;
  background:rgba(4,12,24,.9);backdrop-filter:blur(12px);
  padding:20px;
}
#share-card-modal.open{display:flex;animation:fadeIn .3s ease;}
.share-card-sheet{
  width:100%;max-width:380px;
  border-radius:24px;padding:24px;
  background:linear-gradient(145deg,#0D1E3A,#0a152a);
  border:1px solid rgba(0,200,255,.2);
  text-align:center;position:relative;overflow:hidden;
}
.share-card-sheet::before{
  content:'';position:absolute;top:-50px;right:-50px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,255,.15),transparent 70%);
  pointer-events:none;
}
.share-card-win-amount{
  font-family:var(--font-head);font-size:52px;font-weight:800;
  background:linear-gradient(135deg,#00FF88,#00C8FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin:8px 0;
}
.share-card-tagline{font-family:var(--font-mono);font-size:13px;color:var(--muted);margin-bottom:16px;}
.share-card-user{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:12px 0;
}
.share-card-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--green));
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.share-btns-row{display:flex;gap:8px;margin-top:16px;}
.share-platform-btn{
  flex:1;padding:11px;border-radius:var(--r);border:none;cursor:pointer;
  font-family:var(--font-head);font-size:12px;font-weight:700;
  transition:all .2s;
}
.share-platform-btn:active{transform:scale(.95);}
.share-wa{background:#25D366;color:#fff;}
.share-tg{background:#229ED9;color:#fff;}
.share-copy{background:rgba(255,255,255,.1);border:1px solid var(--border);color:var(--text);}

/* PvP Quick Row — see full definition below */

/* PvP Arena */
.pvp-arena{
  background:radial-gradient(circle at center, rgba(99,102,241,.08), transparent 70%);
  border:1px solid rgba(99,102,241,.2);border-radius:var(--r2);
  padding:20px;margin-bottom:16px;text-align:center;
}
.pvp-vs-row{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:16px 0;
}
.pvp-player{
  flex:1;background:var(--card);border-radius:var(--r);
  padding:14px;border:1px solid var(--border);text-align:center;
}
.pvp-player.you{border-color:rgba(0,200,255,.3);background:rgba(0,200,255,.04);}
.pvp-player.opponent{border-color:rgba(255,68,68,.25);background:rgba(255,68,68,.03);}
.pvp-player-icon{font-size:32px;display:block;margin-bottom:6px;}
.pvp-player-name{font-family:var(--font-mono);font-size:12px;font-weight:700;}
.pvp-player-taps{
  font-family:var(--font-head);font-size:24px;font-weight:800;
  margin-top:4px;
}
.pvp-vs-badge{
  font-family:var(--font-head);font-size:18px;font-weight:800;
  color:var(--gold);background:rgba(255,215,0,.08);
  border:1px solid rgba(255,215,0,.2);border-radius:50%;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.pvp-tap-btn{
  width:clamp(100px,40vw,160px);height:clamp(100px,40vw,160px);border-radius:50%;border:3px solid #8B5CF6;
  background:radial-gradient(circle,rgba(99,102,241,.25),rgba(99,102,241,.08));
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:44px;margin:0 auto;
  transition:all .15s;box-shadow:0 0 30px rgba(99,102,241,.3);
  -webkit-tap-highlight-color:transparent;
}
.pvp-tap-btn:active{transform:scale(.92);box-shadow:0 0 50px rgba(99,102,241,.5);}
.pvp-timer-bar{
  height:6px;border-radius:6px;background:var(--card);margin:16px 0 8px;overflow:hidden;
}
.pvp-timer-fill{
  height:100%;background:linear-gradient(90deg,var(--green),var(--primary));
  transition:width .1s linear;border-radius:6px;
}

/* Mystery Drop Overlay */
.mystery-drop-popup{
  position:fixed;inset:0;z-index:250;
  display:none;align-items:center;justify-content:center;
  pointer-events:none;
}
.mystery-drop-popup.show{display:flex;}
.mystery-drop-bubble{
  background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(255,140,0,.1));
  border:2px solid rgba(255,215,0,.5);border-radius:24px;
  padding:20px 32px;text-align:center;
  animation:mysteryPop .7s cubic-bezier(.17,.67,.83,.67) forwards;
  pointer-events:none;
}
/* mysteryPop defined later */
.mystery-drop-icon{font-size:56px;display:block;margin-bottom:8px;}
.mystery-drop-title{font-family:var(--font-head);font-size:22px;font-weight:800;color:#fff;}
.mystery-drop-desc{font-family:var(--font-mono);font-size:14px;color:var(--gold);margin-top:4px;}

/* Clan / Team Card */
.team-card{
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.04));
  border:1px solid rgba(99,102,241,.25);border-radius:var(--r2);
  padding:18px;margin-bottom:12px;
}
.team-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);
  color:#A5B4FC;padding:4px 10px;border-radius:12px;margin-bottom:8px;
}
.team-leaderboard-row{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.team-leaderboard-row:last-child{border-bottom:none;}

/* FOMO Event Banner (top of screen) */
.fomo-bar{
  position:fixed;top:0;left:0;right:0;z-index:600;
  background:linear-gradient(90deg,#8B5CF6,#6366F1);
  padding:8px 16px;text-align:center;
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:#fff;
  transform:translateY(-100%);transition:transform .4s ease;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.fomo-bar.show{transform:translateY(0);}
.fomo-bar-close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:16px;cursor:pointer;opacity:.7;
}

/* Enhanced Leaderboard Tabs */
.leader-tabs{
  display:flex;gap:0;padding:0 16px 12px;overflow-x:auto;
  scrollbar-width:none;
}
.leader-tabs::-webkit-scrollbar{display:none}
.leader-tab{
  padding:7px 14px;border-radius:20px;border:1px solid var(--border);
  background:var(--card);cursor:pointer;font-family:var(--font-mono);
  font-size:11px;font-weight:700;color:var(--muted);margin-right:6px;
  transition:all .2s;flex-shrink:0;white-space:nowrap;
}
.leader-tab.active{background:rgba(0,200,255,.12);border-color:var(--primary);color:var(--primary);}

/* Referral Power bar */
.power-bar-track{
  height:10px;background:var(--card);border-radius:10px;
  border:1px solid var(--border);overflow:hidden;margin:8px 0;
}
.power-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));
  border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* PvP quick match row */
.pvp-quick-row{
  display:flex;gap:10px;padding:0 16px;overflow-x:auto;
  scrollbar-width:none;padding-bottom:4px;margin-bottom:16px;
}
.pvp-quick-row::-webkit-scrollbar{display:none}
.pvp-quick-card{
  flex-shrink:0;width:140px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r);
  padding:14px;text-align:center;cursor:pointer;transition:all .2s;
}
.pvp-quick-card:active{transform:scale(.95);}
.pvp-quick-card.challenge{border-color:rgba(255,68,68,.3);background:rgba(255,68,68,.04);}
.pvp-quick-icon{font-size:28px;display:block;margin-bottom:6px;}
.pvp-quick-name{font-size:12px;font-weight:600;font-family:var(--font-mono);}
.pvp-quick-status{font-size:10px;color:var(--muted);margin-top:2px;}
.pvp-quick-btn{
  margin-top:8px;width:100%;padding:6px;border-radius:8px;
  background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);
  color:#A5B4FC;font-family:var(--font-mono);font-size:11px;font-weight:700;cursor:pointer;
}

/* Revenge btn */
.revenge-indicator{
  position:absolute;top:-4px;right:-4px;
  width:12px;height:12px;border-radius:50%;
  background:var(--red);border:2px solid var(--bg);
  animation:revengePulse 1s ease-in-out infinite;
}
/* revengePulse defined later */

/* Phone OTP field fix */
#reg-phone, #reg-otp {
  width:100%;padding:13px 16px;
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r);color:var(--text);font-size:15px;
  font-family:var(--font-body);outline:none;transition:border-color .2s;
}
#reg-phone:focus, #reg-otp:focus{border-color:var(--primary);}

/* ══ LUDO ARENA STYLES ══════════════════════════════════════ */
#sub-ludo { background: var(--bg); }
.ludo-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,215,0,.15);
  flex-shrink: 0;
}
.ludo-title {
  font-family: var(--font-head); font-size: 18px; font-weight: 800;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ludo-coins-display {
  font-family: var(--font-mono); font-size: 12px; color: var(--gold);
  background: rgba(255,215,0,.08); border: 1px solid rgba(255,215,0,.2);
  padding: 4px 10px; border-radius: 20px;
}
.ludo-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 0 0 80px;
}
/* Mode selector */
.ludo-mode-row {
  display: flex; gap: 8px; padding: 14px 16px 6px;
}
.ludo-mode-btn {
  flex: 1; padding: 10px 6px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--muted); font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; cursor: pointer; transition: all .2s; text-align: center;
}
.ludo-mode-btn.active {
  border-color: rgba(255,215,0,.5); background: rgba(255,215,0,.08);
  color: var(--gold);
}
.ludo-mode-btn:active { transform: scale(.95); }
/* Stake selector */
.ludo-stake-row {
  display: flex; gap: 8px; padding: 8px 16px;
}
.ludo-stake-btn {
  flex: 1; padding: 8px 4px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--muted); font-family: var(--font-mono); font-size: 11px;
  cursor: pointer; transition: all .2s; text-align: center;
}
.ludo-stake-btn.active {
  border-color: rgba(0,200,255,.4); background: rgba(0,200,255,.08);
  color: var(--primary);
}
/* Start panel */
.ludo-start-panel {
  margin: 8px 16px; padding: 18px;
  background: linear-gradient(135deg, rgba(255,215,0,.06), rgba(255,165,0,.04));
  border: 1px solid rgba(255,215,0,.2); border-radius: var(--r2);
}
.ludo-find-btn {
  width: 100%; padding: 14px; border: none; border-radius: var(--r);
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000; font-family: var(--font-head); font-size: 16px; font-weight: 800;
  cursor: pointer; transition: all .2s; letter-spacing: .5px;
}
.ludo-find-btn:active { transform: scale(.97); }
.ludo-find-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Board wrapper */
.ludo-board-wrap {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 16px 0;
}
#ludo-canvas {
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(255,215,0,.12), 0 0 80px rgba(0,200,255,.06);
  max-width: 100%; touch-action: manipulation;
}
/* Player info row */
.ludo-players-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 16px 4px; width: 100%;
}
.ludo-player-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid transparent;
  transition: all .3s;
}
.ludo-player-chip.active-turn {
  box-shadow: 0 0 12px rgba(255,215,0,.3);
}
.ludo-player-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.ludo-player-name {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--text);
}
.ludo-player-pieces {
  font-size: 10px; color: var(--muted); margin-left: auto;
  font-family: var(--font-mono);
}
/* Dice area */
.ludo-dice-area {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
}
.ludo-dice-wrap {
  display: flex; align-items: center; gap: 12px;
}
#ludo-dice-display {
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, #1a2a4a, #0D1E3A);
  border: 2px solid rgba(255,215,0,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .15s;
}
#ludo-dice-display.rolling {
  animation: diceRoll .5s ease;
}
/* diceRoll defined later */
.ludo-roll-btn {
  padding: 10px 22px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000; font-family: var(--font-head); font-size: 14px; font-weight: 800;
  cursor: pointer; transition: all .2s;
}
.ludo-roll-btn:active { transform: scale(.93); }
.ludo-roll-btn:disabled { opacity: .4; cursor: not-allowed; }
.ludo-status-text {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  text-align: center;
}
/* Win overlay */
.ludo-win-overlay {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(4,12,24,.92);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.ludo-win-overlay.show { opacity: 1; pointer-events: auto; }
.ludo-win-emoji { font-size: 64px; animation: winBounce 1s ease infinite alternate; }
/* winBounce defined later */
.ludo-win-title {
  font-family: var(--font-head); font-size: 28px; font-weight: 800;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-top: 12px;
}
.ludo-win-sub { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin-top: 6px; }
.ludo-win-reward {
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
  color: var(--gold); margin-top: 8px;
}
.ludo-win-btns {
  display: flex; gap: 12px; margin-top: 24px;
}
.ludo-win-btn {
  padding: 12px 24px; border-radius: 12px; font-family: var(--font-head);
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s;
}
.ludo-win-btn.primary {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border: none; color: #000;
}
.ludo-win-btn.secondary {
  background: transparent; border: 1px solid rgba(255,215,0,.3); color: var(--gold);
}
/* Leaderboard mini */
.ludo-leaderboard {
  margin: 10px 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.ludo-lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.ludo-lb-row:last-child { border-bottom: none; }
.ludo-lb-rank { font-family: var(--font-mono); font-size: 13px; font-weight: 700; width: 24px; color: var(--muted); }
.ludo-lb-rank.gold { color: #FFD700; }
.ludo-lb-rank.silver { color: #C0C0C0; }
.ludo-lb-rank.bronze { color: #CD7F32; }
.ludo-lb-name { flex: 1; font-family: var(--font-mono); font-size: 12px; }
.ludo-lb-wins { font-family: var(--font-mono); font-size: 12px; color: var(--green); }


/* ─── style block (original order) ─── */


/* ═══ FONT SYSTEM UPGRADE ═══════════════════════════════════ */
:root {
  --font-head: 'Orbitron', 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Inter', ui-monospace, 'Courier New', monospace;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* ── Enhanced Color Palette ── */
  --bg:        #050A14;
  --surface:   #081528;
  --card:      #0C1A2E;
  --card2:     #101f38;
  --border:    rgba(0,200,255,0.14);
  --border2:   rgba(0,200,255,0.32);
  --primary:   #00C8FF;
  --primary2:  #0090FF;
  --purple:    #8B5CF6;
  --purple2:   #6366F1;
  --gold:      #FFD700;
  --gold2:     #FFA500;
  --green:     #00FF88;
  --red:       #FF4444;
  --text:      #E8F4FF;
  --muted:     rgba(232,244,255,0.42);

  /* ── Enhanced Glow System ── */
  --glow-blue:   0 0 20px rgba(0,200,255,0.35), 0 0 60px rgba(0,200,255,0.12);
  --glow-gold:   0 0 20px rgba(255,215,0,0.4),  0 0 60px rgba(255,215,0,0.12);
  --glow-green:  0 0 20px rgba(0,255,136,0.35), 0 0 60px rgba(0,255,136,0.12);
  --glow-purple: 0 0 20px rgba(139,92,246,0.4), 0 0 60px rgba(139,92,246,0.12);

  --r: 14px; --r2: 22px;
}

/* ── Body upgrade ── */
html, body {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.01em;
}

/* ══ ANIMATED BACKGROUND UPGRADE ══════════════════════════ */
.bg-grid {
  background-image:
    linear-gradient(rgba(0,200,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,.055) 1px, transparent 1px);
  background-size: 36px 36px;
}
.orb-1 {
  background: radial-gradient(circle, rgba(0,144,255,.22), transparent 70%);
  animation: orbFloat1 10s ease-in-out infinite;
}
.orb-2 {
  background: radial-gradient(circle, rgba(139,92,246,.16), transparent 70%);
}
.orb-3 {
  background: radial-gradient(circle, rgba(255,215,0,.09), transparent 70%);
}

/* ══ SPLASH SCREEN UPGRADE ═════════════════════════════════ */
.splash-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, #00C8FF 0%, #FFFFFF 40%, #00FF88 80%, #FFD700 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
  text-shadow: none;
  filter: drop-shadow(0 0 30px rgba(0,200,255,0.5));
}
.splash-ring {
  width: 130px; height: 130px;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(#00C8FF, #8B5CF6, #00FF88, #FFD700, #00C8FF) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 40px rgba(0,200,255,0.25), inset 0 0 30px rgba(0,200,255,0.05);
  animation: ringPulse 2s ease infinite, ringRotate 8s linear infinite, fadeIn .6s ease forwards;
}
/* ringRotate defined later */
.splash-sub {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 6px;
}
.splash-bar { width: 220px; height: 4px; border-radius: 4px; }
.splash-fill {
  background: linear-gradient(90deg, #8B5CF6, #00C8FF, #00FF88);
  background-size: 200% 100%;
  animation: splashLoad 2.2s ease .8s forwards, shimmerMove 1.5s linear infinite;
}
@keyframes shimmerMove { 0%{background-position:0%} 100%{background-position:200%} }

/* ══ TOP BAR UPGRADE ═══════════════════════════════════════ */
.top-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px; font-weight: 900;
  background: linear-gradient(90deg, #00C8FF, #8B5CF6, #00FF88);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 12px rgba(0,200,255,0.4));
}
.top-bar {
  background: linear-gradient(180deg, rgba(5,10,20,0.98) 0%, rgba(5,10,20,0.7) 100%);
  border-bottom: 1px solid rgba(0,200,255,0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.icon-btn {
  background: rgba(0,200,255,0.07);
  border: 1px solid rgba(0,200,255,0.18);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.icon-btn:hover { border-color: var(--primary); box-shadow: var(--glow-blue); }
.phase-pill {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.4);
  box-shadow: 0 0 12px rgba(255,215,0,0.2);
}

/* ══ HERO BALANCE CARD — GLASSMORPHISM UPGRADE ════════════ */
.hero-card {
  margin: 6px 14px 0;
  padding: 26px 24px;
  background: linear-gradient(135deg,
    rgba(0,200,255,0.10) 0%,
    rgba(8,21,40,0.95) 40%,
    rgba(139,92,246,0.07) 100%);
  border: 1px solid rgba(0,200,255,0.28);
  border-radius: 24px;
  position: relative; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,200,255,0.08) inset,
    0 8px 40px rgba(0,0,0,0.5),
    0 0 80px rgba(0,200,255,0.06);
  backdrop-filter: blur(20px);
}
.hero-card::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,255,0.18), transparent 70%);
  animation: heroGlowOrb 5s ease-in-out infinite;
}
.hero-card::after {
  content: '';
  position: absolute; bottom: -40px; left: -20px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.12), transparent 70%);
  animation: heroGlowOrb 7s ease-in-out infinite reverse;
}
@keyframes heroGlowOrb { 0%,100%{transform:scale(1) translateY(0)} 50%{transform:scale(1.2) translateY(-10px)} }

.hero-label {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 3px; color: var(--primary);
  text-transform: uppercase; margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(0,200,255,0.5));
}
.hero-balance {
  font-family: 'Orbitron', sans-serif;
  font-size: 44px; font-weight: 900;
  background: linear-gradient(135deg, #ffffff 0%, #00C8FF 50%, #00FF88 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; letter-spacing: -2px;
  filter: drop-shadow(0 0 20px rgba(0,200,255,0.3));
}
.hero-token {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--primary);
  letter-spacing: 2px; vertical-align: middle;
}
.hero-divider { background: rgba(0,200,255,0.18); }
.stat-mini-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 700; color: #fff;
}
.stat-mini-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
}

/* ══ MINING BUTTON — ELITE 3D UPGRADE ═════════════════════ */
.mine-section { padding: 22px 16px 0; }
.mine-btn-wrap {
  position: relative; display: inline-block;
  width: 210px; height: 210px;
}
/* outer glow ring */
.mine-btn-wrap::before {
  content: '';
  position: absolute; inset: -8px; border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #00C8FF 0%,  #8B5CF6 25%,
    #00FF88 50%, #FFD700 75%,
    #00C8FF 100%
  );
  animation: mineRingRotate 3s linear infinite;
  z-index: 0;
  filter: blur(4px);
  opacity: 0.6;
  pointer-events: none;
}
/* second rotating ring */
.mine-btn-wrap::after {
  content: '';
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    transparent 0%, rgba(0,200,255,0.8) 20%,
    transparent 40%, rgba(139,92,246,0.8) 60%,
    transparent 80%, rgba(0,255,136,0.6) 95%,
    transparent 100%
  );
  animation: mineRingRotate 2s linear infinite reverse;
  z-index: 0;
  pointer-events: none;
}
@keyframes mineRingRotate { to { transform: rotate(360deg); } }

#mine-btn {
  position: relative; z-index: 2;
  width: 100%; height: 100%; border-radius: 50%; border: none;
  background: radial-gradient(circle at 35% 35%,
    #1a2f4a 0%,
    #0C1A2E 40%,
    #050A14 100%);
  cursor: pointer;
  box-shadow:
    0 0 0 3px rgba(0,200,255,0.15),
    0 0 40px rgba(0,200,255,0.2),
    0 16px 40px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 8px rgba(0,0,0,0.4);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
#mine-btn::before {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(0,200,255,0.12) 0%,
    transparent 60%);
  border: 1.5px solid rgba(0,200,255,0.2);
  transition: all .3s;
  pointer-events: none;
}
#mine-btn::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(
    var(--primary) 0deg, transparent 90deg,
    transparent 360deg
  );
  animation: rotateBorder 3s linear infinite;
  z-index: -1;
  opacity: 0.6;
  pointer-events: none;
}
#mine-btn.active::after {
  background: conic-gradient(
    var(--green) 0deg, var(--primary) 90deg,
    #8B5CF6 200deg, var(--green) 360deg
  );
  opacity: 1;
}
#mine-btn.active {
  box-shadow:
    0 0 0 3px rgba(0,255,136,0.3),
    0 0 60px rgba(0,255,136,0.25),
    0 16px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
#mine-btn:active {
  transform: scale(.93);
  box-shadow:
    0 0 0 6px rgba(0,200,255,0.3),
    0 0 80px rgba(0,200,255,0.4),
    0 8px 20px rgba(0,0,0,0.5);
}
.mine-icon {
  font-size: 52px;
  filter: drop-shadow(0 0 16px rgba(0,200,255,0.6));
  animation: mineIconFloat 3s ease-in-out infinite, mineIconGlow 2s ease-in-out infinite;
}
@keyframes mineIconGlow {
  0%,100% { filter: drop-shadow(0 0 10px rgba(0,200,255,0.4)); }
  50% { filter: drop-shadow(0 0 24px rgba(0,200,255,0.8)) drop-shadow(0 0 40px rgba(0,200,255,0.3)); }
}
.mine-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 700;
  color: var(--primary); text-transform: uppercase;
  letter-spacing: 3px; margin-top: 10px;
  text-shadow: 0 0 12px rgba(0,200,255,0.6);
}
.mine-rate {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 11px; color: var(--muted); margin-top: 4px;
}
.mine-section > p {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 1px; color: var(--muted);
}

/* ══ TAP PARTICLE UPGRADE ══════════════════════════════════ */
.tap-particle {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--primary);
  text-shadow: 0 0 12px var(--primary);
}
.tap-ripple {
  background: radial-gradient(circle, rgba(0,200,255,0.5), rgba(0,200,255,0));
}

/* ══ PROGRESS BAR UPGRADE ══════════════════════════════════ */
.progress-section { padding: 18px 16px 0; }
.progress-title {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 2px;
}
.progress-val { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; }
.progress-track {
  height: 10px;
  background: rgba(8,21,40,0.9);
  border: 1px solid rgba(0,200,255,0.2);
  border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}
#tap-progress {
  height: 100%;
  background: linear-gradient(90deg,
    #8B5CF6 0%,
    #00C8FF 40%,
    #00FF88 100%);
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(0,200,255,0.5);
  position: relative; overflow: hidden;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
#tap-progress::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%
  );
  background-size: 200% 100%;
  animation: progressShine 2s linear infinite;
}
/* progressShine defined later */
#tap-progress::after {
  content: attr(data-pct);
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: 'Orbitron', sans-serif; font-size: 8px;
  color: rgba(0,0,0,0.8); font-weight: 700;
}

/* ══ ACTION BUTTONS UPGRADE ════════════════════════════════ */
.action-btn {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 0.5px;
  padding: 12px 20px;
  border-radius: 14px;
  background: rgba(0,200,255,0.07);
  border: 1.5px solid rgba(0,200,255,0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
}
.action-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent);
  opacity: 0; transition: opacity .2s;
}
.action-btn:hover::after { opacity: 1; }
.action-btn:active { transform: scale(.94); }
.action-btn.gold {
  border-color: rgba(255,215,0,0.4);
  background: rgba(255,215,0,0.09);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 16px rgba(255,215,0,0.1);
}
.action-btn.green {
  border-color: rgba(0,255,136,0.4);
  background: rgba(0,255,136,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 16px rgba(0,255,136,0.1);
}

/* ══ STAT CARDS UPGRADE ════════════════════════════════════ */
.stat-card {
  background: linear-gradient(135deg,
    rgba(12,26,46,0.95) 0%,
    rgba(8,21,40,0.9) 100%);
  border: 1px solid rgba(0,200,255,0.15);
  border-radius: 18px;
  padding: 18px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.stat-card:hover {
  border-color: rgba(0,200,255,0.35);
  box-shadow: var(--glow-blue), 0 4px 24px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}
.stat-card-icon { font-size: 24px; margin-bottom: 10px; filter: drop-shadow(0 0 10px currentColor); }
.stat-card-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; font-weight: 700; color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.stat-card-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  margin-top: 4px;
}

/* ══ BOTTOM NAV — FLOATING DOCK UPGRADE ═══════════════════ */
.bottom-nav {
  background: rgba(5,10,20,0.95);
  border-top: 1px solid rgba(0,200,255,0.12);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: 0 -4px 30px rgba(0,0,0,0.5);
  padding: 10px 0 max(10px,env(safe-area-inset-bottom));
}
.nav-item {
  padding: 6px 10px;
  border-radius: 14px;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.nav-icon {
  font-size: 22px;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.nav-label {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); transition: color .2s;
}
.nav-item.active {
  background: rgba(0,200,255,0.1);
}
.nav-item.active .nav-icon {
  transform: scale(1.2) translateY(-2px);
  filter: drop-shadow(0 0 12px var(--primary));
}
.nav-item.active .nav-label { color: var(--primary); }
.nav-item:active .nav-icon { transform: scale(.85); }

/* ══ SUB-SCREEN UPGRADE ════════════════════════════════════ */
.sub-header {
  background: linear-gradient(180deg, rgba(5,10,20,0.98) 0%, rgba(5,10,20,0.8) 100%);
  border-bottom: 1px solid rgba(0,200,255,0.12);
  backdrop-filter: blur(20px);
}
.sub-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 17px; font-weight: 700;
}
.back-btn {
  background: rgba(0,200,255,0.08);
  border: 1px solid rgba(0,200,255,0.2);
  border-radius: 12px;
  font-size: 20px; font-weight: 700;
  transition: all .2s;
}
.back-btn:hover { border-color: var(--primary); box-shadow: var(--glow-blue); }

/* ══ AUTH SCREEN UPGRADE ═══════════════════════════════════ */
.auth-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 36px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(135deg, #00C8FF, #8B5CF6, #00FF88);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(0,200,255,0.5));
}
.auth-sub {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
}
.auth-tab {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: 1px;
}
.auth-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #000; box-shadow: 0 4px 16px rgba(0,200,255,0.4);
}
.field input {
  background: rgba(12,26,46,0.9);
  border: 1.5px solid rgba(0,200,255,0.18);
  border-radius: 14px;
  font-family: 'Rajdhani', sans-serif; font-size: 15px;
  transition: all .25s;
}
.field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,200,255,0.12), 0 0 20px rgba(0,200,255,0.1);
}
.field label {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 2px; color: var(--primary);
  background: rgba(12,26,46,0.95);
}
.btn-primary {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 2px;
  border-radius: 14px;
  background: linear-gradient(135deg, #00C8FF, #0060CC);
  box-shadow: 0 8px 32px rgba(0,200,255,0.4), 0 2px 8px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity: 0; transition: opacity .2s;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,200,255,0.5); }

/* ══ LEADERBOARD UPGRADE ═══════════════════════════════════ */
.leader-item {
  background: rgba(12,26,46,0.8);
  border: 1px solid rgba(0,200,255,0.12);
  border-radius: 18px;
  transition: all .25s;
}
.leader-item:hover { border-color: rgba(0,200,255,0.3); transform: translateX(4px); }
.leader-item.top1 {
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(12,26,46,0.9));
  border-color: rgba(255,215,0,0.5);
  box-shadow: 0 0 24px rgba(255,215,0,0.12), inset 0 1px 0 rgba(255,215,0,0.1);
}
.leader-item.top2 {
  background: linear-gradient(135deg, rgba(192,192,192,0.08), rgba(12,26,46,0.9));
  border-color: rgba(192,192,192,0.45);
  box-shadow: 0 0 16px rgba(192,192,192,0.08);
}
.leader-item.top3 {
  background: linear-gradient(135deg, rgba(205,127,50,0.08), rgba(12,26,46,0.9));
  border-color: rgba(205,127,50,0.45);
}
.rank-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px; font-weight: 700;
  border-radius: 10px;
  background: rgba(0,200,255,0.1);
  border: 1px solid rgba(0,200,255,0.2);
}
.leader-name { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; }
.leader-bal {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px; color: var(--primary);
  text-shadow: 0 0 12px rgba(0,200,255,0.4);
}

/* ══ CHAT UPGRADE ══════════════════════════════════════════ */
.chat-bubble {
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.chat-bubble.me {
  background: linear-gradient(135deg, #00C8FF, #0070CC);
  box-shadow: 0 4px 20px rgba(0,200,255,0.3);
}
.chat-bubble.other {
  background: rgba(12,26,46,0.95);
  border: 1px solid rgba(0,200,255,0.15);
}
.chat-bubble .sender {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 1px;
}
.chat-input {
  background: rgba(12,26,46,0.9);
  border: 1.5px solid rgba(0,200,255,0.18);
  border-radius: 14px;
  font-family: 'Rajdhani', sans-serif; font-size: 14px;
}
.chat-input:focus { border-color: var(--primary); box-shadow: 0 0 20px rgba(0,200,255,0.12); }
.send-btn {
  border-radius: 14px;
  background: linear-gradient(135deg, #00C8FF, #0070CC);
  box-shadow: 0 4px 16px rgba(0,200,255,0.4);
  transition: all .2s;
}
.send-btn:hover { box-shadow: 0 6px 24px rgba(0,200,255,0.5); }

/* ══ WITHDRAW SCREEN UPGRADE ═══════════════════════════════ */
.withdraw-balance {
  background: linear-gradient(135deg,
    rgba(0,255,136,0.09), rgba(0,200,255,0.07));
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 24px;
  box-shadow: 0 0 40px rgba(0,255,136,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}
.withdraw-bal-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 40px; font-weight: 900;
}
.withdraw-bal-lbl { font-family: 'Inter', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; }
.method-card {
  background: rgba(12,26,46,0.9);
  border: 2px solid rgba(0,200,255,0.15);
  border-radius: 16px;
  transition: all .25s;
}
.method-card.selected {
  border-color: var(--primary);
  background: rgba(0,200,255,0.09);
  box-shadow: 0 0 20px rgba(0,200,255,0.15);
}

/* ══ REFERRAL SCREEN UPGRADE ═══════════════════════════════ */
.ref-card {
  background: linear-gradient(135deg,
    rgba(255,215,0,0.09), rgba(255,165,0,0.05));
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 24px;
  box-shadow: 0 0 40px rgba(255,215,0,0.06), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ref-code-display {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px; font-weight: 700; color: var(--gold);
  letter-spacing: 5px;
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(255,215,0,0.1);
}
.copy-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px; font-weight: 700;
  background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,165,0,0.1));
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(255,215,0,0.12);
  transition: all .2s;
}
.copy-btn:hover { box-shadow: var(--glow-gold); transform: translateY(-1px); }
.ref-stat {
  background: rgba(12,26,46,0.9);
  border: 1px solid rgba(0,200,255,0.15);
  border-radius: 16px;
}
.ref-stat-val { font-family: 'Orbitron', sans-serif; font-size: 18px; font-weight: 700; }
.ref-stat-lbl { font-family: 'Rajdhani', sans-serif; font-size: 11px; letter-spacing: 1px; }
.power-bar-fill {
  background: linear-gradient(90deg, #FFD700, #FFA500, #FF6B00);
  box-shadow: 0 0 12px rgba(255,215,0,0.4);
}

/* ══ LUDO ARENA UPGRADE ════════════════════════════════════ */
.ludo-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 17px; font-weight: 900;
  background: linear-gradient(135deg, #FFD700, #FF8C00, #FFD700);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.5));
}
.ludo-header {
  background: linear-gradient(180deg, rgba(5,10,20,0.98) 0%, rgba(5,10,20,0.8) 100%);
  border-bottom: 1px solid rgba(255,215,0,0.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.ludo-coins-display {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 700;
  box-shadow: 0 0 16px rgba(255,215,0,0.15);
}
.ludo-mode-btn {
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 1px;
  background: rgba(12,26,46,0.9);
  border: 1.5px solid rgba(0,200,255,0.18);
  border-radius: 12px; transition: all .25s;
}
.ludo-mode-btn.active {
  border-color: rgba(255,215,0,0.6);
  background: rgba(255,215,0,0.1);
  color: var(--gold);
  box-shadow: 0 0 20px rgba(255,215,0,0.15);
}
.ludo-find-btn {
  font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 800;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(255,215,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
}
.ludo-find-btn::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: btnShimmer 2.5s linear infinite;
}
/* btnShimmer defined later */
.ludo-roll-btn {
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(255,215,0,0.35);
}
#ludo-canvas {
  border-radius: 16px;
  box-shadow:
    0 0 60px rgba(255,215,0,0.15),
    0 0 120px rgba(0,200,255,0.08),
    0 16px 60px rgba(0,0,0,0.6);
}
.ludo-win-overlay {
  background: rgba(5,10,20,0.94);
  backdrop-filter: blur(20px);
}
.ludo-win-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 26px; font-weight: 900;
  background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.5));
}
.ludo-win-reward { font-family: 'Orbitron', sans-serif; }
.ludo-win-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  border-radius: 14px;
}
.ludo-win-btn.primary {
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  box-shadow: 0 6px 24px rgba(255,215,0,0.4);
}

/* ══ DICE DISPLAY UPGRADE ══════════════════════════════════ */
#ludo-dice-display {
  background: linear-gradient(135deg, #1a2a4a, #0C1A2E);
  border: 2px solid rgba(255,215,0,0.4);
  border-radius: 14px;
  box-shadow:
    0 0 20px rgba(255,215,0,0.15),
    0 6px 20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ══ GAME CARDS UPGRADE ════════════════════════════════════ */
.game-mode-card {
  background: linear-gradient(135deg,
    rgba(16,31,56,0.95) 0%,
    rgba(12,26,46,0.9) 100%);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.game-mode-card:hover, .game-mode-card:active {
  border-color: rgba(99,102,241,0.5);
  box-shadow: var(--glow-purple), 0 8px 32px rgba(0,0,0,0.4);
  transform: translateY(-3px) scale(1.01);
}
.game-mode-card.featured {
  background: linear-gradient(135deg,
    rgba(99,102,241,0.15) 0%,
    rgba(16,31,56,0.95) 60%,
    rgba(139,92,246,0.08) 100%);
  border: 1px solid rgba(99,102,241,0.4);
  box-shadow: var(--glow-purple), 0 8px 32px rgba(0,0,0,0.4);
}
.game-card-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
}
.game-card-emoji {
  font-size: 40px;
  filter: drop-shadow(0 0 16px rgba(139,92,246,0.5));
}

/* ══ SECTION HEADERS UPGRADE ═══════════════════════════════ */
.section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: 1px;
}
.section-action {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 11px;
}

/* ══ SETTINGS UPGRADE ══════════════════════════════════════ */
.setting-item {
  background: rgba(12,26,46,0.8);
  border: 1px solid rgba(0,200,255,0.1);
  border-radius: 14px; margin-bottom: 6px;
  transition: all .2s;
}
.setting-item:hover { border-color: rgba(0,200,255,0.25); background: rgba(12,26,46,0.95); }
.setting-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px; font-weight: 600;
}
.settings-label {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 3px; color: var(--primary);
}

/* ══ TOKEN/WALLET UPGRADE ══════════════════════════════════ */
.token-hero {
  background: linear-gradient(135deg, #0C1A2E, #081528);
  border: 1px solid rgba(0,200,255,0.25);
  border-radius: 24px;
  box-shadow: 0 0 60px rgba(0,200,255,0.06), inset 0 1px 0 rgba(255,255,255,0.06);
}
.token-symbol {
  font-family: 'Orbitron', sans-serif;
  font-size: 60px; font-weight: 900;
  filter: drop-shadow(0 0 20px rgba(0,200,255,0.4));
}
.token-name { font-family: 'Inter', ui-monospace, monospace; font-size: 13px; letter-spacing: 3px; }

/* ══ PVP SCREEN UPGRADE ════════════════════════════════════ */
.pvp-vs-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px; font-weight: 900;
  background: rgba(255,215,0,0.1);
  border: 2px solid rgba(255,215,0,0.3);
  box-shadow: 0 0 16px rgba(255,215,0,0.2);
}
.pvp-player-name { font-family: 'Inter', ui-monospace, monospace; }
.pvp-player-taps { font-family: 'Orbitron', sans-serif; }
.pvp-tap-btn {
  border: 3px solid #8B5CF6;
  box-shadow: 0 0 40px rgba(139,92,246,0.4), 0 0 80px rgba(139,92,246,0.15);
}
.pvp-tap-btn:active {
  box-shadow: 0 0 60px rgba(139,92,246,0.7), 0 0 100px rgba(139,92,246,0.3);
}

/* ══ ROADMAP UPGRADE ═══════════════════════════════════════ */
.roadmap-phase {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 2px; color: var(--primary);
}
.roadmap-title { font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700; }
.roadmap-dot { box-shadow: 0 0 16px var(--primary); }
.roadmap-dot.done { background: var(--green); box-shadow: 0 0 16px var(--green); }

/* ══ TOAST UPGRADE ═════════════════════════════════════════ */
#toast-container > div,
.toast {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
  border-radius: 16px !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* ══ LOADING / SPINNER UPGRADE ═════════════════════════════ */
.loading-spinner {
  width: 32px; height: 32px;
  border: 2px solid rgba(0,200,255,0.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  box-shadow: 0 0 16px rgba(0,200,255,0.3);
}

/* ══ ENERGY BAR UPGRADE ════════════════════════════════════ */
.energy-track {
  height: 10px; border-radius: 10px;
  background: rgba(8,21,40,0.9);
  border: 1px solid rgba(99,102,241,0.2);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}
#energy-bar {
  height: 100%;
  background: linear-gradient(90deg, #8B5CF6, #6366F1, #00C8FF);
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(99,102,241,0.5);
  position: relative; overflow: hidden;
}
#energy-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: progressShine 2s linear infinite;
}
.energy-label {
  font-family: 'Inter', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px;
}
.energy-val { font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; }

/* ══ XP BAR UPGRADE ════════════════════════════════════════ */
.xp-bar-track {
  background: rgba(8,21,40,0.9);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px; overflow: hidden;
}
#xp-bar-fill {
  background: linear-gradient(90deg, #8B5CF6, #A78BFA);
  box-shadow: 0 0 12px rgba(139,92,246,0.5);
}
.level-badge {
  background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.15));
  border: 2px solid rgba(99,102,241,0.5);
  box-shadow: 0 0 24px rgba(99,102,241,0.25);
}
.level-badge-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px; font-weight: 900; color: #fff;
}
.level-badge-lbl {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 2px;
}
.xp-title { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; }
.xp-text {
  font-family: 'Inter', ui-monospace, monospace; font-size: 10px; letter-spacing: 1px;
}
.multiplier-badge {
  font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: 900;
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,165,0,0.08));
  border: 2px solid rgba(255,215,0,0.4);
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

/* ══ FOMO BAR UPGRADE ══════════════════════════════════════ */
.fomo-bar {
  background: linear-gradient(90deg, #8B5CF6, #6366F1, #4F46E5);
  box-shadow: 0 4px 24px rgba(139,92,246,0.4);
  font-family: 'Inter', ui-monospace, monospace; font-size: 11px; letter-spacing: 1px;
}

/* ══ BADGES UPGRADE ════════════════════════════════════════ */
.badge {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 1px;
  border-radius: 20px;
}
.badge.green {
  background: rgba(0,255,136,0.1);
  border: 1px solid rgba(0,255,136,0.3);
  color: var(--green);
  box-shadow: 0 0 12px rgba(0,255,136,0.2);
}

/* ══ SHARE CARD UPGRADE ════════════════════════════════════ */
.share-card-sheet {
  background: linear-gradient(145deg, #0C1A2E, #081528);
  border: 1px solid rgba(0,200,255,0.25);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 60px rgba(0,200,255,0.08);
}
.share-card-win-amount {
  font-family: 'Orbitron', sans-serif;
  font-size: 52px; font-weight: 900;
  filter: drop-shadow(0 0 20px rgba(0,255,136,0.4));
}
.share-platform-btn { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; }

/* ══ LEADER TABS UPGRADE ═══════════════════════════════════ */
.leader-tab {
  font-family: 'Inter', ui-monospace, monospace; font-size: 10px; letter-spacing: 1px;
  background: rgba(12,26,46,0.9);
  border: 1px solid rgba(0,200,255,0.15);
  border-radius: 22px; transition: all .25s;
}
.leader-tab.active {
  background: rgba(0,200,255,0.12);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 16px rgba(0,200,255,0.15);
}

/* ══ ONBOARDING UPGRADE ════════════════════════════════════ */
#onboarding .auth-logo { font-size: 40px; }

/* ══ CONFETTI BOX-SHADOW — merged into canonical .confetti-piece below ══ */

/* ══ SECTION HDR INFO-ROW UPGRADE ══════════════════════════ */
.info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,200,255,0.08);
}
.info-key {
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--muted);
}
.info-val {
  font-family: 'Inter', ui-monospace, monospace; font-size: 12px; color: var(--primary);
}

/* ══ TEAM CARD UPGRADE ═════════════════════════════════════ */
.team-card {
  background: linear-gradient(135deg,
    rgba(99,102,241,0.10), rgba(139,92,246,0.05));
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}
.team-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
}

/* ══ PHASE CARDS UPGRADE ═══════════════════════════════════ */
.phase-card {
  background: rgba(12,26,46,0.9);
  border: 1px solid rgba(0,200,255,0.12);
  border-radius: 16px;
  transition: all .2s;
}
.phase-card.current {
  border-color: var(--primary);
  background: rgba(0,200,255,0.07);
  box-shadow: 0 0 24px rgba(0,200,255,0.1);
}
.phase-rate {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 700;
  text-shadow: 0 0 12px rgba(0,200,255,0.4);
}

/* ══ MYSTERY DROP UPGRADE ══════════════════════════════════ */
.mystery-drop-bubble {
  background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,140,0,0.1));
  border: 2px solid rgba(255,215,0,0.6);
  border-radius: 28px;
  box-shadow: 0 0 60px rgba(255,215,0,0.3), 0 24px 60px rgba(0,0,0,0.5);
}
.mystery-drop-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px; font-weight: 900;
  filter: drop-shadow(0 0 16px rgba(255,215,0,0.5));
}
.mystery-drop-desc { font-family: 'Inter', ui-monospace, monospace; }

/* ══ ATTACK BANNER UPGRADE ═════════════════════════════════ */
.attack-banner {
  background: rgba(255,68,68,0.12);
  border-bottom: 1px solid rgba(255,68,68,0.3);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(255,68,68,0.15);
}
.attack-banner-btn {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  border-radius: 10px;
}

/* ══ LUDO LOBBY PLAYER CHIPS ════════════════════════════════ */
.ludo-player-chip {
  background: rgba(12,26,46,0.8);
  border: 1px solid rgba(0,200,255,0.15);
  border-radius: 12px;
}
.ludo-player-chip.active-turn {
  border-color: rgba(255,215,0,0.5);
  box-shadow: 0 0 16px rgba(255,215,0,0.2);
}
.ludo-player-name { font-family: 'Inter', ui-monospace, monospace; font-size: 10px; }
.ludo-player-pieces { font-family: 'Inter', ui-monospace, monospace; }

/* ══ ADMIN PANEL UPGRADE ═══════════════════════════════════ */
.admin-stat-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px; font-weight: 700;
  text-shadow: 0 0 16px rgba(0,200,255,0.4);
}
.admin-btn {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px; font-weight: 700;
  background: rgba(12,26,46,0.9);
  border: 1px solid rgba(0,200,255,0.15);
  border-radius: 14px;
  transition: all .2s;
}
.admin-btn:hover {
  border-color: var(--primary);
  box-shadow: 0 0 16px rgba(0,200,255,0.15);
}
.admin-section-title { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; }

/* ══ HALVING COUNTDOWN UPGRADE ═════════════════════════════ */
.hero-card + * + * + * + * + * .countdown-section,
[style*="Next Halving"] {
  border-radius: 18px;
}

/* ══ SMOOTH SCREEN TRANSITIONS ═════════════════════════════ */
.screen { transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1); }
.screen.active { transform: translateY(0); }
.sub-screen { transition: transform .4s cubic-bezier(.4,0,.2,1); }

/* ══ GLOBAL BUTTON PRESS FEEL ══════════════════════════════ */
button:active, [onclick]:active {
  -webkit-tap-highlight-color: transparent;
}

/* ══ ADDICTIVE PULSING ANIMATIONS ══════════════════════════ */
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(0,200,255,0.3), 0 0 24px rgba(0,200,255,0.1); }
  50% { box-shadow: 0 0 24px rgba(0,200,255,0.6), 0 0 48px rgba(0,200,255,0.2); }
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,215,0,0.3); }
  50% { box-shadow: 0 0 28px rgba(255,215,0,0.6), 0 0 50px rgba(255,215,0,0.2); }
}
@keyframes greenPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(0,255,136,0.3); }
  50% { box-shadow: 0 0 28px rgba(0,255,136,0.6), 0 0 50px rgba(0,255,136,0.2); }
}

/* Apply pulsing to active elements */
#mine-btn.active { animation: greenPulse 2s ease-in-out infinite; }
.action-btn.gold { animation: goldPulse 3s ease-in-out infinite; }
.leader-item.top1 { animation: goldPulse 4s ease-in-out infinite; }

/* ══ GAME BADGE UPGRADE ════════════════════════════════════ */
.game-card-badge {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 8px !important; letter-spacing: 1px !important;
  padding: 3px 8px !important; border-radius: 10px !important;
}
.badge-hot {
  background: rgba(239,68,68,0.15) !important;
  color: #FF6B6B !important;
  border: 1px solid rgba(239,68,68,0.4) !important;
  box-shadow: 0 0 12px rgba(239,68,68,0.2) !important;
}
.badge-daily {
  background: rgba(245,158,11,0.15) !important;
  color: #FBB830 !important;
  border: 1px solid rgba(245,158,11,0.4) !important;
  box-shadow: 0 0 12px rgba(245,158,11,0.2) !important;
}
.badge-free {
  background: rgba(0,255,136,0.12) !important;
  color: var(--green) !important;
  border: 1px solid rgba(0,255,136,0.35) !important;
  box-shadow: 0 0 12px rgba(0,255,136,0.15) !important;
}

/* ══ GAME CARD DESC ════════════════════════════════════════ */
.game-card-desc {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important; font-weight: 500 !important;
}

/* ══ CARD SHIMMER EFFECT ON HOVER ══════════════════════════ */
.stat-card::after,
.game-mode-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transition: none;
}
.stat-card:hover::after,
.game-mode-card:hover::before {
  animation: cardShimmer .6s ease forwards;
}
@keyframes cardShimmer {
  0%  { left: -100%; }
  100% { left: 200%; }
}

/* ══ MISSION ITEMS UPGRADE ═════════════════════════════════ */
.mission-item {
  background: rgba(12,26,46,0.9) !important;
  border: 1px solid rgba(0,200,255,0.12) !important;
  border-radius: 16px !important;
  transition: all .25s !important;
}
.mission-item:hover { border-color: rgba(0,200,255,0.28) !important; }
.mission-item.done {
  border-color: rgba(0,255,136,0.3) !important;
  background: rgba(0,255,136,0.05) !important;
  box-shadow: 0 0 16px rgba(0,255,136,0.06) !important;
}

/* ══ WIN OVERLAY TITLE UPGRADE ═════════════════════════════ */
.win-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 26px !important; font-weight: 900 !important;
  letter-spacing: 3px !important;
  filter: drop-shadow(0 0 16px rgba(255,215,0,0.5)) !important;
}
.win-sub {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 12px !important; letter-spacing: 2px !important;
}

/* ══ RISK GAME BUTTON UPGRADE ══════════════════════════════ */
.risk-tap-btn, [id*="risk-btn"], .risk-btn {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 800 !important; letter-spacing: 2px !important;
}

/* ══ SPIN WHEEL UPGRADE ════════════════════════════════════ */
#spin-wheel, .spin-wheel {
  filter: drop-shadow(0 0 30px rgba(139,92,246,0.5)) !important;
}

/* ══ PVP QUICK CARDS UPGRADE ═══════════════════════════════ */
.pvp-quick-card {
  background: rgba(12,26,46,0.9) !important;
  border: 1px solid rgba(0,200,255,0.15) !important;
  border-radius: 16px !important;
  transition: all .25s !important;
}
.pvp-quick-card:active { transform: scale(.93) !important; }
.pvp-quick-card.challenge {
  border-color: rgba(239,68,68,0.3) !important;
  background: rgba(239,68,68,0.05) !important;
}
.pvp-quick-name { font-family: 'Inter', ui-monospace, monospace !important; }
.pvp-quick-btn {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 10px !important;
  border-radius: 10px !important;
}

/* ══ ONBOARD SLIDES UPGRADE ════════════════════════════════ */
.onboard-icon { filter: drop-shadow(0 0 20px rgba(0,200,255,0.5)); }
.onboard-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 22px !important; font-weight: 800 !important;
  letter-spacing: 1px !important;
}
.onboard-dot.active {
  background: var(--primary) !important;
  box-shadow: 0 0 12px rgba(0,200,255,0.5) !important;
}

/* ══ LUDO START PANEL UPGRADE ══════════════════════════════ */
.ludo-start-panel {
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,165,0,0.04)) !important;
  border: 1px solid rgba(255,215,0,0.25) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 40px rgba(255,215,0,0.06), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ══ LUDO LEADERBOARD ROWS UPGRADE ═════════════════════════ */
.ludo-leaderboard {
  background: rgba(12,26,46,0.9) !important;
  border: 1px solid rgba(255,215,0,0.15) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.ludo-lb-row {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: background .2s !important;
}
.ludo-lb-row:hover { background: rgba(255,215,0,0.04) !important; }
.ludo-lb-name { font-family: 'Inter', ui-monospace, monospace !important; }
.ludo-lb-rank { font-family: 'Orbitron', sans-serif !important; }
.ludo-lb-wins {
  font-family: 'Orbitron', sans-serif !important;
  text-shadow: 0 0 10px rgba(0,255,136,0.4) !important;
}

/* ══ LUDO STATUS TEXT UPGRADE ══════════════════════════════ */
.ludo-status-text {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 11px !important; letter-spacing: 1px !important;
  color: var(--muted) !important;
}

/* ══ INFO PANEL (below lobby) UPGRADE ═════════════════════ */
.ludo-info-grid, [class*="ludo-info"] {
  border-radius: 16px !important;
}

/* ══ STREAK FLAME EFFECT ═══════════════════════════════════ */
.val-streak {
  color: var(--gold) !important;
  text-shadow: 0 0 16px rgba(255,215,0,0.5) !important;
}

/* ══ GLOBAL GLOW FOR ACTIVE STATES ════════════════════════ */
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0,200,255,0.12), 0 0 20px rgba(0,200,255,0.1) !important;
}

/* ══ SCROLLBAR PREMIUM UPGRADE ═════════════════════════════ */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary), #8B5CF6);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0,200,255,0.3);
}

/* ══ FINAL: ENSURE SCREEN FONT INHERITANCE ═════════════════ */
.sub-body, .ludo-body, .app-body {
  font-family: 'Rajdhani', 'Inter', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.section-title, .sub-title, .game-card-title {
  font-family: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
}
/* ══ MOBILE SMOOTHNESS FINAL FIXES ════════════════════════════ */

/* Ensure inputs/selects are never smaller than 16px to prevent iOS zoom */
input, select, textarea {
  font-size: max(16px, 1em) !important;
  -webkit-appearance: none; appearance: none;
  -moz-appearance: none;
}

/* Fix: select element on iOS — add padding for arrow space */
select {
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300C8FF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Fix: prevent horizontal overflow from long words in chat/toasts */
.chat-bubble, .toast, .mission-title, .spec-key, .spec-val {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Fix: ensure sub-screens don't overflow on very small screens */
.sub-body {
  padding: 12px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Fix: action-row horizontal scroll on 320px */
.action-row {
  scroll-snap-type: x mandatory;
}
.action-btn {
  scroll-snap-align: start;
}

/* Fix: hero balance truncation on tiny screens */
.hero-balance {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
  /* Fluid size: never smaller than 22px, scales with viewport, capped by breakpoint overrides */
  font-size: clamp(22px, 10vw, 44px);
}

/* Fix: game-modes-grid needs explicit CSS (not just media override) */
.game-modes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px 0;
}

/* Fix: ensure toast container is always on top */
#toast-container {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: 90%;
  max-width: 380px;
}

/* Fix: kill feed positioning respects safe area */
.v12-kill-feed-wrap {
  top: max(60px, calc(env(safe-area-inset-top) + 50px));
}

/* Fix: fomo-bar respects safe area top */
.fomo-bar {
  padding-top: max(8px, env(safe-area-inset-top));
}

/* Fix: crash canvas should not overflow on small screens */
#crash-canvas {
  max-width: 100%;
  touch-action: none;
}

/* Fix: spin canvas */
#spin-canvas, .spin-wheel-canvas {
  max-width: 100%;
  touch-action: none;
}

/* Fix: ludo board responsiveness */
#ludo-board {
  max-width: min(320px, calc(100vw - 32px));
  max-height: min(320px, calc(100vw - 32px));
  touch-action: none;
}

/* Fix: ensure crash bet panel doesn't overflow */
.crash-bet-panel {
  flex-shrink: 0;
}

/* Smooth scrolling for all scrollable areas */
.app-body, .sub-body, .chat-messages, .auth-inner {
  scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════════════════════ */


/* ─── style block (original order) ─── */


/* ════ V11 DESIGN TOKENS — merged into main :root above ════ */

/* ════ BACKGROUND ════ */
body { background: var(--bg-deep); }

/* Tri-layer aurora orbs — richer, slower */
.orb-1 {
  width:700px;height:700px;
  background:radial-gradient(circle at 40% 40%,rgba(0,144,255,.22) 0%,rgba(0,212,255,.10) 35%,rgba(155,107,255,.06) 60%,transparent 75%);
  top:-220px;right:-150px;
  animation:orbFloat1 16s ease-in-out infinite;filter:blur(90px);
}
.orb-2 {
  width:600px;height:600px;
  background:radial-gradient(circle at 60% 60%,rgba(0,220,120,.18) 0%,rgba(0,255,157,.08) 40%,rgba(0,144,255,.05) 65%,transparent 78%);
  bottom:-160px;left:-120px;
  animation:orbFloat2 20s ease-in-out infinite;filter:blur(80px);
}
.orb-3 {
  width:450px;height:450px;
  background:radial-gradient(circle at 50% 50%,rgba(155,107,255,.16) 0%,rgba(255,180,0,.07) 45%,transparent 72%);
  top:35%;left:25%;
  animation:orbFloat3 24s ease-in-out infinite;filter:blur(70px);
}
@keyframes orbFloat1{0%,100%{transform:translateY(0)translateX(0)scale(1)}33%{transform:translateY(-35px)translateX(12px)scale(1.04)}66%{transform:translateY(15px)translateX(-8px)scale(.97)}}
@keyframes orbFloat2{0%,100%{transform:translateY(0)translateX(0)scale(1)}40%{transform:translateY(28px)translateX(-16px)scale(1.05)}75%{transform:translateY(-12px)translateX(10px)scale(.96)}}
@keyframes orbFloat3{0%,100%{transform:translateY(0)scale(1)}50%{transform:translateY(-20px)scale(1.08)}}

/* Dual-density grid: 80px major + 20px minor */
.bg-grid {
  background-image:
    linear-gradient(rgba(0,212,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(0,212,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.02) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,20px 20px,20px 20px;
  animation:gridDrift 30s linear infinite;
}
@keyframes gridDrift{to{background-position:80px 80px,80px 80px,20px 20px,20px 20px}}

/* Full-screen vignette */
#app::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(2,8,16,.55) 75%,rgba(2,8,16,.85) 100%);
}

/* ════ HERO CARD — Holographic glassmorphism ════ */
.hero-card{
  margin:4px 16px 0;
  background:linear-gradient(145deg,rgba(0,212,255,.09) 0%,rgba(155,107,255,.06) 50%,rgba(0,255,157,.04) 100%);
  border:1px solid rgba(0,212,255,.22);border-radius:24px;
  position:relative;overflow:hidden;
  box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(0,212,255,.08) inset,0 16px 60px rgba(0,0,0,.55),0 0 40px rgba(0,212,255,.08);
  backdrop-filter:blur(24px);padding:22px 24px;
}
/* Holographic foil sweep */
.hero-card::before{
  content:'';position:absolute;top:0;left:-120%;width:80%;height:100%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.025) 30%,rgba(0,212,255,.06) 50%,rgba(155,107,255,.04) 65%,transparent 100%);
  animation:heroFoilSweep 6s ease-in-out infinite;pointer-events:none;
}
/* Corner glow orb */
.hero-card::after{
  content:'';position:absolute;top:-50px;right:-50px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.18),transparent 65%);pointer-events:none;
}
@keyframes heroFoilSweep{0%{left:-120%;opacity:0}10%{opacity:1}50%{left:120%;opacity:1}55%{opacity:0}100%{left:120%;opacity:0}}

/* Balance number shimmer */
.hero-balance{
  font-family:'Orbitron',sans-serif;font-size:44px;font-weight:900;
  background:linear-gradient(100deg,#ffffff 0%,#00D4FF 25%,#ffffff 40%,#9B6BFF 60%,#00FF9D 80%,#ffffff 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:balanceShimmer 4s linear infinite;letter-spacing:-1px;line-height:1;
  filter:drop-shadow(0 0 20px rgba(0,212,255,.35));
}
/* balanceShimmer defined later */

.hero-token{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;color:var(--cyan);text-shadow:0 0 14px rgba(0,212,255,.7);}
.hero-label{font-family:'Inter',ui-monospace,monospace;font-size:10px;color:rgba(232,244,255,.5);text-transform:uppercase;letter-spacing:3px;margin-bottom:10px;}
.stat-mini-val{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(0,212,255,.4);}
.hero-divider{background:rgba(0,212,255,.18);}

/* ════ MINE BUTTON — 3D sphere ════ */
.mine-btn-wrap{position:relative;display:inline-block;width:clamp(150px,42vw,220px);height:clamp(150px,42vw,220px);}

/* Rainbow rotating corona ring */
.mine-btn-wrap::before{
  content:'';position:absolute;inset:-5px;border-radius:50%;z-index:0;
  background:conic-gradient(#00D4FF 0deg,#9B6BFF 60deg,#FF3D6B 120deg,#FFD700 180deg,#00FF9D 240deg,#00D4FF 300deg,#9B6BFF 360deg);
  animation:coronaRotate 3s linear infinite;filter:blur(4px);opacity:.75;
}
/* Outer diffuse glow */
.mine-btn-wrap::after{
  content:'';position:absolute;inset:-16px;border-radius:50%;z-index:0;
  background:conic-gradient(rgba(0,212,255,.3) 0deg,rgba(155,107,255,.3) 90deg,rgba(0,255,157,.2) 180deg,rgba(0,212,255,.3) 360deg);
  animation:coronaRotate 5s linear infinite reverse;filter:blur(18px);opacity:.6;
}
@keyframes coronaRotate{to{transform:rotate(360deg)}}

#mine-btn{
  width:100%;height:100%;border-radius:50%;border:none;cursor:pointer;
  position:relative;z-index:1;overflow:hidden;
  background:
    radial-gradient(ellipse 55% 45% at 35% 28%,rgba(255,255,255,.18) 0%,transparent 60%),
    radial-gradient(circle at 50% 50%,#0D2A50 0%,#071830 50%,#040E20 100%);
  box-shadow:0 0 0 2px rgba(0,212,255,.3),0 8px 40px rgba(0,0,0,.8),inset 0 -4px 20px rgba(0,0,0,.6),inset 0 4px 16px rgba(0,212,255,.08);
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;
}
/* Specular ellipse highlight */
#mine-btn::before{
  content:'';position:absolute;top:14%;left:22%;width:42%;height:22%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 60%,transparent 100%);
  pointer-events:none;z-index:3;
}
/* Inner conic arc ring */
#mine-btn::after{
  content:'';position:absolute;inset:4px;border-radius:50%;
  background:conic-gradient(rgba(0,212,255,.5) 0deg,rgba(155,107,255,.4) 90deg,rgba(0,255,157,.3) 180deg,rgba(255,215,0,.25) 270deg,rgba(0,212,255,.5) 360deg);
  mask:radial-gradient(circle,transparent 85%,black 88%);
  -webkit-mask:radial-gradient(circle,transparent 85%,black 88%); mask:radial-gradient(circle,transparent 85%,black 88%);
  animation:coronaRotate 4s linear infinite;z-index:2;
}
#mine-btn:active{transform:scale(.93);}

/* Active mining — breathing plasma glow */
#mine-btn.active{
  box-shadow:0 0 0 3px rgba(0,255,157,.6),0 0 30px rgba(0,255,157,.4),0 0 70px rgba(0,255,157,.15),0 8px 40px rgba(0,0,0,.8),inset 0 -4px 20px rgba(0,0,0,.6);
  animation:plasmaGlow 2s ease-in-out infinite !important;
}
@keyframes plasmaGlow{
  0%,100%{box-shadow:0 0 0 3px rgba(0,255,157,.5),0 0 25px rgba(0,255,157,.35),0 0 55px rgba(0,255,157,.12),0 8px 40px rgba(0,0,0,.8);}
  50%{box-shadow:0 0 0 5px rgba(0,255,157,.7),0 0 50px rgba(0,255,157,.55),0 0 90px rgba(0,255,157,.22),0 8px 40px rgba(0,0,0,.8);}
}

.mine-inner{position:relative;z-index:4;padding-top:28px;pointer-events:none;}
.mine-icon{font-size:48px;display:block;line-height:1;filter:drop-shadow(0 0 16px rgba(0,212,255,.8));animation:mineIconFloat 3.5s ease-in-out infinite;}
@keyframes mineIconFloat{0%,100%{transform:translateY(0)scale(1)}50%{transform:translateY(-6px)scale(1.04)}}
.mine-label{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:800;color:var(--cyan);text-transform:uppercase;letter-spacing:2.5px;margin-top:10px;display:block;text-shadow:0 0 16px rgba(0,212,255,.8);}
.mine-rate{font-family:'Inter',ui-monospace,monospace;font-size:11px;color:rgba(232,244,255,.4);margin-top:4px;}

/* ════ ACTION BUTTONS — Glossy + shimmer ════ */
.action-btn{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(0,212,255,.12) 0%,rgba(0,144,255,.08) 60%,rgba(155,107,255,.06) 100%);
  border:1px solid rgba(0,212,255,.22);border-radius:14px;
  padding:11px 20px;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;
  color:rgba(232,244,255,.9);
  transition:all .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 4px 16px rgba(0,0,0,.4);
}
.action-btn::before{
  content:'';position:absolute;top:0;left:-120%;width:80%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
}
.action-btn:hover::before{animation:btnShimmer .55s ease forwards;}
/* btnShimmer defined later */

.action-btn.gold{
  background:linear-gradient(145deg,rgba(255,215,0,.14) 0%,rgba(255,165,0,.09) 100%);
  border-color:rgba(255,215,0,.30);color:var(--gold-hi);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 16px rgba(0,0,0,.4),0 0 20px rgba(255,215,0,.08);
  animation:none !important;
}
.action-btn.green{
  background:linear-gradient(145deg,rgba(0,255,157,.12) 0%,rgba(0,200,100,.07) 100%);
  border-color:rgba(0,255,157,.28);color:var(--emerald);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 16px rgba(0,0,0,.4),0 0 20px rgba(0,255,157,.07);
}

/* ════ STAT CARDS ════ */
.stat-card{
  background:linear-gradient(145deg,rgba(13,30,58,.95) 0%,rgba(8,20,40,.98) 100%);
  border:1px solid rgba(0,212,255,.13);border-radius:18px;
  position:relative;overflow:hidden;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 8px 32px rgba(0,0,0,.45);
}
.stat-card:hover{transform:translateY(-3px)scale(1.01);border-color:rgba(0,212,255,.30);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 12px 40px rgba(0,0,0,.55),0 0 28px rgba(0,212,255,.10);}
.stat-card-val{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:800;color:#fff;text-shadow:0 0 14px rgba(0,212,255,.35);}
.stat-card-lbl{font-family:'Inter',ui-monospace,monospace;font-size:10px;color:rgba(232,244,255,.4);margin-top:4px;letter-spacing:1px;text-transform:uppercase;}
.stat-card-icon{font-size:24px;margin-bottom:10px;display:block;}

/* ════ BOTTOM NAV ════ */
.bottom-nav{
  background:rgba(4,12,24,.82);backdrop-filter:blur(28px)saturate(160%);
  border-top:1px solid rgba(0,212,255,.12);
  box-shadow:0 -1px 0 rgba(255,255,255,.05),0 -8px 32px rgba(0,0,0,.5);
}
.nav-item{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:12px;}
.nav-item:active{transform:scale(.88);}
.nav-item.active{background:rgba(0,212,255,.09);}
.nav-item.active .nav-icon{filter:drop-shadow(0 0 10px rgba(0,212,255,.9));transform:scale(1.2)translateY(-1px);}
.nav-item.active .nav-label{color:var(--cyan);text-shadow:0 0 12px rgba(0,212,255,.6);font-weight:700;}
.nav-label{font-family:'Inter',ui-monospace,monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;}
.nav-icon{font-size:22px;transition:all .2s;}

/* ════ TOP BAR ════ */
.top-bar{background:linear-gradient(180deg,rgba(4,12,24,.95) 0%,rgba(4,12,24,0) 100%);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,212,255,.07);}
.top-logo{
  font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;
  background:linear-gradient(90deg,#00D4FF 0%,#9B6BFF 60%,#00FF9D 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:logoShimmer 5s linear infinite;letter-spacing:-0.5px;
}
/* logoShimmer defined later */
.icon-btn{background:rgba(13,30,58,.8);border:1px solid rgba(0,212,255,.15);border-radius:12px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 4px 12px rgba(0,0,0,.4);backdrop-filter:blur(12px);transition:all .2s;}
.phase-pill{background:rgba(255,215,0,.10);border:1px solid rgba(255,215,0,.30);box-shadow:0 0 16px rgba(255,215,0,.12);font-family:'Inter',ui-monospace,monospace;font-size:10px;letter-spacing:2px;color:var(--gold-hi);}

/* ════ INPUTS ════ */
input,textarea,select{background:rgba(8,20,40,.9) !important;border:1.5px solid rgba(0,212,255,.15) !important;border-radius:14px !important;color:#E8F4FF !important;transition:all .25s !important;box-shadow:inset 0 2px 8px rgba(0,0,0,.5) !important;}
input:focus,textarea:focus,select:focus{border-color:var(--cyan) !important;box-shadow:inset 0 2px 8px rgba(0,0,0,.5),0 0 0 3px rgba(0,212,255,.15),0 0 24px rgba(0,212,255,.12) !important;outline:none !important;}
input::placeholder{color:rgba(232,244,255,.28) !important;}

/* ════ PROGRESS BAR ════ */
.progress-track{height:10px;background:rgba(8,20,40,.9);border:1px solid rgba(0,212,255,.12);border-radius:10px;box-shadow:inset 0 2px 6px rgba(0,0,0,.5);}
#tap-progress{background:linear-gradient(90deg,#00D4FF 0%,#9B6BFF 50%,#00FF9D 100%);box-shadow:0 0 16px rgba(0,212,255,.5);border-radius:10px;overflow:hidden;position:relative;}
#tap-progress::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,transparent 60%);}
#tap-progress::after{content:attr(data-pct);position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:'Inter',ui-monospace,monospace;font-size:9px;color:rgba(0,0,0,.8);font-weight:700;}

/* ════ LEADER ITEMS ════ */
.leader-item{background:rgba(13,30,58,.8);border:1px solid rgba(0,212,255,.10);border-radius:16px;margin-bottom:8px;box-shadow:0 4px 20px rgba(0,0,0,.35);transition:all .25s;}
.leader-item:hover{border-color:rgba(0,212,255,.25);transform:translateY(-1px);}
.leader-item.top1{background:linear-gradient(135deg,rgba(255,215,0,.09),rgba(13,30,58,.9));border-color:rgba(255,215,0,.38);box-shadow:0 0 28px rgba(255,215,0,.10),0 4px 20px rgba(0,0,0,.4);animation:none !important;}
.leader-item.top2{border-color:rgba(200,210,230,.25);box-shadow:0 0 18px rgba(200,210,230,.06);}
.leader-item.top3{border-color:rgba(205,127,50,.30);box-shadow:0 0 18px rgba(205,127,50,.07);}

/* ════ BUTTONS ════ */
.btn-primary{
  background:linear-gradient(145deg,#00D4FF 0%,#0090FF 60%,#7040E0 100%);border:none;border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 28px rgba(0,144,255,.35),0 0 0 1px rgba(0,212,255,.2);
  font-family:'Orbitron',sans-serif;font-size:15px;font-weight:800;letter-spacing:1px;
  transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;
}
.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:80%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:btnShimmer 3s ease-in-out infinite;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 36px rgba(0,144,255,.45),0 0 0 1px rgba(0,212,255,.35);}
.btn-primary:active{transform:scale(.96);}
.btn-secondary{background:rgba(13,30,58,.8);border:1px solid rgba(0,212,255,.18);border-radius:16px;color:rgba(232,244,255,.8);font-family:'Orbitron',sans-serif;font-size:14px;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 4px 16px rgba(0,0,0,.35);transition:all .2s;}
.btn-secondary:hover{border-color:rgba(0,212,255,.35);}

/* ════ SUB-SCREENS ════ */
.sub-screen{background:linear-gradient(180deg,rgba(4,12,24,.98) 0%,rgba(2,8,16,.99) 100%);}
.sub-header{background:rgba(4,12,24,.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,212,255,.10);box-shadow:0 1px 0 rgba(255,255,255,.04);}
.back-btn{background:rgba(13,30,58,.8);border:1px solid rgba(0,212,255,.15);border-radius:12px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset;transition:all .2s;}

/* ════ SPLASH ════ */
#splash{background:var(--bg-deep);}
.splash-logo{font-family:'Orbitron',sans-serif;font-size:56px;font-weight:900;letter-spacing:-2px;background:linear-gradient(135deg,#00D4FF 0%,#ffffff 40%,#9B6BFF 70%,#00FF9D 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px rgba(0,212,255,.4));}
.splash-ring{width:130px;height:130px;border:2px solid transparent;background:linear-gradient(var(--bg-deep),var(--bg-deep))padding-box,linear-gradient(135deg,#00D4FF,#9B6BFF,#00FF9D)border-box;box-shadow:0 0 0 6px rgba(0,212,255,.06),0 0 40px rgba(0,212,255,.20),0 0 80px rgba(155,107,255,.10);}
.splash-fill{background:linear-gradient(90deg,#00D4FF,#9B6BFF,#00FF9D);box-shadow:0 0 12px rgba(0,212,255,.6);}

/* ════ REF CARD ════ */
.ref-card{background:linear-gradient(145deg,rgba(255,215,0,.08) 0%,rgba(13,30,58,.95) 60%,rgba(255,165,0,.05) 100%);border:1px solid rgba(255,215,0,.25);border-radius:24px;box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 40px rgba(255,215,0,.07),0 12px 40px rgba(0,0,0,.45);}
.ref-code-display{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;letter-spacing:6px;color:var(--gold-hi);text-shadow:0 0 20px rgba(255,215,0,.5);background:rgba(255,215,0,.06);border:1px solid rgba(255,215,0,.22);border-radius:12px;}
.copy-btn{background:linear-gradient(135deg,rgba(255,215,0,.18),rgba(255,165,0,.12));border:1px solid rgba(255,215,0,.35);border-radius:12px;color:var(--gold-hi);font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;box-shadow:0 0 16px rgba(255,215,0,.12);}

/* ════ SETTINGS ════ */
.setting-item{background:rgba(10,22,42,.85);border:1px solid rgba(0,212,255,.10);border-radius:16px;margin-bottom:6px;transition:all .2s;box-shadow:0 1px 0 rgba(255,255,255,.04) inset;}
.setting-item:hover,.setting-item:active{border-color:rgba(0,212,255,.25);background:rgba(10,22,42,.95);}
.setting-title{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:600;}
.settings-label{font-family:'Inter',ui-monospace,monospace;font-size:9px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase;opacity:.7;}

/* ════ CHAT ════ */
.chat-bubble.me{background:linear-gradient(135deg,#00D4FF 0%,#0090FF 60%,#7040E0 100%);box-shadow:0 4px 20px rgba(0,144,255,.25);border-radius:18px 18px 4px 18px;}
.chat-bubble.other{background:rgba(13,30,58,.8);border:1px solid rgba(0,212,255,.12);box-shadow:0 4px 16px rgba(0,0,0,.3);border-radius:18px 18px 18px 4px;}
.send-btn{background:linear-gradient(135deg,#00D4FF,#0090FF);border-radius:14px;box-shadow:0 0 20px rgba(0,212,255,.3);transition:all .2s;}

/* ════ WITHDRAW ════ */
.withdraw-balance{background:linear-gradient(135deg,rgba(0,255,157,.07) 0%,rgba(13,30,58,.95) 60%,rgba(0,212,255,.06) 100%);border:1px solid rgba(0,255,157,.22);border-radius:24px;box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 40px rgba(0,255,157,.06);}
.withdraw-bal-val{font-family:'Orbitron',sans-serif;filter:drop-shadow(0 0 16px rgba(0,255,157,.35));}

/* ════ TOKEN HERO ════ */
.token-hero{background:linear-gradient(145deg,rgba(13,30,58,.98) 0%,rgba(8,20,40,.99) 100%);border:1px solid rgba(0,212,255,.20);border-radius:28px;box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 60px rgba(0,212,255,.07),0 20px 60px rgba(0,0,0,.5);}
.token-symbol{font-family:'Orbitron',sans-serif;font-size:62px;font-weight:900;filter:drop-shadow(0 0 24px rgba(0,212,255,.5));}

/* ════ TOAST ════ */
#toast-container > div,.toast{background:rgba(10,22,42,.92) !important;border:1px solid rgba(0,212,255,.20) !important;border-radius:18px !important;backdrop-filter:blur(24px) !important;box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 20px rgba(0,212,255,.08) !important;}

/* ════ AUTH ════ */
.auth-tabs{background:rgba(8,20,40,.9);border:1px solid rgba(0,212,255,.12);border-radius:16px;box-shadow:inset 0 2px 8px rgba(0,0,0,.4);}
.auth-tab.active{background:linear-gradient(135deg,#00D4FF,#0090FF);color:#000;border-radius:12px;box-shadow:0 4px 16px rgba(0,144,255,.3);}
.auth-logo{font-family:'Orbitron',sans-serif;font-size:40px;font-weight:900;background:linear-gradient(135deg,#00D4FF,#9B6BFF,#00FF9D);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(0,212,255,.3));}
.demo-banner{background:rgba(255,215,0,.07);border:1px solid rgba(255,215,0,.22);border-radius:16px;box-shadow:0 0 24px rgba(255,215,0,.06);}

/* ════ ROADMAP ════ */
.roadmap-dot{box-shadow:0 0 20px var(--cyan),0 0 40px rgba(0,212,255,.3);}
.roadmap-dot.done{background:var(--emerald);box-shadow:0 0 20px var(--emerald),0 0 40px rgba(0,255,157,.3);}
.roadmap-dot.future{background:rgba(13,30,58,.9);border:2px solid rgba(0,212,255,.25);box-shadow:none;}
.roadmap-connector{background:linear-gradient(180deg,rgba(0,212,255,.4),rgba(0,212,255,.06));}

/* ════ MISC ════ */
.method-card{background:rgba(13,30,58,.8);border:2px solid rgba(0,212,255,.12);border-radius:16px;transition:all .25s;box-shadow:0 1px 0 rgba(255,255,255,.05) inset;}
.method-card.selected{border-color:var(--cyan);background:rgba(0,212,255,.07);box-shadow:0 0 24px rgba(0,212,255,.14),0 1px 0 rgba(255,255,255,.08) inset;}
.phase-card{background:rgba(10,22,42,.85);border:1px solid rgba(0,212,255,.12);border-radius:18px;transition:all .2s;}
.phase-card.current{border-color:var(--cyan);background:rgba(0,212,255,.07);box-shadow:0 0 28px rgba(0,212,255,.12);}
.ref-stat{background:rgba(13,30,58,.85);border:1px solid rgba(0,212,255,.12);border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset;}
.level-badge{background:linear-gradient(135deg,rgba(99,102,241,.28),rgba(139,92,246,.18)) !important;border:2px solid rgba(99,102,241,.5) !important;box-shadow:0 0 28px rgba(99,102,241,.28),0 1px 0 rgba(255,255,255,.12) inset !important;}
.pvp-tap-btn{box-shadow:0 0 50px rgba(139,92,246,.45),0 0 100px rgba(139,92,246,.18),inset 0 2px 0 rgba(255,255,255,.1) !important;}
.pvp-tap-btn:active{box-shadow:0 0 70px rgba(139,92,246,.7),0 0 130px rgba(139,92,246,.3) !important;}
.loading-spinner{border:2px solid rgba(0,212,255,.12) !important;border-top-color:var(--cyan) !important;box-shadow:0 0 20px rgba(0,212,255,.35) !important;}
.mystery-drop-bubble{box-shadow:0 0 80px rgba(255,215,0,.35),0 30px 80px rgba(0,0,0,.6) !important;}
.share-card-sheet{background:linear-gradient(145deg,rgba(10,22,42,.98),rgba(6,14,28,.99)) !important;border-radius:32px !important;box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 30px 100px rgba(0,0,0,.75),0 0 60px rgba(0,212,255,.08) !important;}
.ludo-find-btn{box-shadow:0 6px 28px rgba(255,215,0,.35),0 1px 0 rgba(255,255,255,.2) inset !important;}
.power-bar-fill{box-shadow:0 0 14px rgba(255,215,0,.45) !important;}
.tap-particle{font-family:'Orbitron',sans-serif !important;font-size:14px !important;font-weight:900 !important;color:#00D4FF !important;text-shadow:0 0 16px rgba(0,212,255,.9),0 0 30px rgba(0,212,255,.5) !important;}
.tap-ripple{background:radial-gradient(circle,rgba(0,212,255,.55),rgba(0,212,255,0)70%);}
.gradient-text{background:linear-gradient(90deg,#00D4FF,#9B6BFF) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;filter:drop-shadow(0 0 8px rgba(0,212,255,.3));}

/* Contain paint only for non-scrollable sections to avoid trapping position:fixed children */
.app-body,.sub-body,.chat-messages {
  contain: layout style;
}

/* Scrollbar */
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00D4FF,#9B6BFF);border-radius:4px;box-shadow:0 0 8px rgba(0,212,255,.4);}

/* ════ ANIMATION WHITELIST — disable expensive animations on specific elements, re-enable GPU-safe approved ════ */
/* Scoped reset: only target elements known to have animations, NOT * to avoid silently breaking future additions */
.orb-1,.orb-2,.orb-3,
.bg-grid,
.hero-card::before,.hero-card::after,
.hero-balance,
.top-logo,.auth-logo,
.splash-logo,.splash-sub,.splash-ring,.splash-bar,.splash-fill,
.mine-icon,.mine-btn-wrap::before,.mine-btn-wrap::after,
#mine-btn::after,#mine-btn.active,
#tap-progress,#tap-progress::before,
#energy-bar,#energy-bar::before,#energy-bar.low,
.btn-primary::before,
.loading-spinner,
.tap-particle,.tap-ripple,
.revenge-indicator,
#ludo-dice-display.rolling,
.mystery-drop-bubble,
.ludo-win-emoji,
.onboard-emoji,
.fomo-bar,
.attack-banner,
.screen,
.sub-screen,
.modal-overlay,
.modal,
.toast,
.auth-tab,
.btn-secondary,.action-btn,.back-btn,.icon-btn,
.nav-item,
.onboard-slides,
.pvp-timer-fill,
#xp-bar-fill,.power-bar-fill,.mission-bar-fill,
#energy-bar,
.toggle,.toggle::after,
.coin-rain
{animation:none !important;transition:none !important;}

/* ── Structural transitions (GPU only: transform/opacity) ── */
.screen{transition:opacity .32s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1) !important;}
.sub-screen{transition:transform .3s cubic-bezier(.4,0,.2,1) !important;}
.modal-overlay{transition:opacity .28s cubic-bezier(.4,0,.2,1) !important;}
.modal{transition:transform .3s cubic-bezier(.4,0,.2,1) !important;}
.toast{transition:opacity .25s ease,transform .25s ease !important;}
.auth-tab{transition:background .18s ease !important;}
.btn-primary,.btn-secondary,.action-btn,.back-btn,.icon-btn{transition:transform .15s ease,opacity .15s ease,box-shadow .2s ease !important;}
.nav-item{transition:transform .18s ease !important;}
.onboard-slides{transition:transform .42s cubic-bezier(.4,0,.2,1) !important;}
.sub-screen .ludo-win-overlay{transition:opacity .35s ease !important;}
#tap-progress{transition:width .25s ease !important;}
#energy-bar{transition:width .4s ease !important;}
#xp-bar-fill,.power-bar-fill,.mission-bar-fill{transition:width .45s ease !important;}
.pvp-timer-fill{transition:width .1s linear !important;}
.fomo-bar{transition:transform .38s cubic-bezier(.4,0,.2,1) !important;}
.attack-banner{transition:transform .38s cubic-bezier(.17,.67,.83,.67) !important;}
.toggle{transition:background .18s ease !important;}
.toggle::after{transition:transform .18s ease !important;}

/* ── Re-enable approved animations ── */
.orb-1{animation:orbFloat1 16s ease-in-out infinite !important;}
.orb-2{animation:orbFloat2 20s ease-in-out infinite !important;}
.orb-3{animation:orbFloat3 24s ease-in-out infinite !important;}
.bg-grid{animation:gridDrift 36s linear infinite !important;}
.hero-card::before{animation:heroFoilSweep 7s ease-in-out infinite !important;}
.hero-balance{animation:balanceShimmer 4s linear infinite !important;}
.top-logo{animation:logoShimmer 5s linear infinite !important;}
.auth-logo{animation:logoShimmer 5s linear infinite !important;}
.splash-logo{animation:logoReveal .85s cubic-bezier(.34,1.56,.64,1) forwards !important;}
.splash-sub{animation:fadeUp .7s ease .35s forwards !important;}
.splash-ring{animation:ringPulse 2.4s ease-in-out infinite, fadeIn .5s ease forwards !important;}
.splash-bar{animation:fadeIn .4s ease .55s forwards !important;}
.splash-fill{animation:splashLoad 2.1s ease .8s forwards !important;}
.mine-icon{animation:mineIconFloat 3.2s ease-in-out infinite !important;}
.mine-btn-wrap::before{animation:coronaRotate 3s linear infinite !important;}
.mine-btn-wrap::after{animation:coronaRotate 5s linear infinite reverse !important;}
#mine-btn::after{animation:coronaRotate 4s linear infinite !important;}
#mine-btn.active{animation:plasmaGlow 2s ease-in-out infinite !important;}
#tap-progress::before{animation:progressShine 2.5s linear infinite !important;}
#energy-bar::before{animation:progressShine 2s linear infinite !important;}
#energy-bar.low{animation:energyPulse .9s ease-in-out infinite !important;}
.btn-primary::before{animation:btnShimmer 3s ease-in-out infinite !important;}
.loading-spinner{animation:spin .75s linear infinite !important;}
.tap-particle{animation:ultraTapFloat .85s cubic-bezier(.2,1,.3,1) forwards !important;}
.tap-ripple{animation:rippleGo .55s ease-out forwards !important;}
.revenge-indicator{animation:revengePulse .9s ease-in-out infinite !important;}
#ludo-dice-display.rolling{animation:diceRoll .45s ease !important;}
.mystery-drop-bubble{animation:mysteryPop .65s cubic-bezier(.17,.67,.83,.67) forwards !important;}
.ludo-win-emoji{animation:winBounce .9s ease-in-out infinite alternate !important;}
.onboard-emoji{animation:onboardFloat 3s ease-in-out infinite !important;}
[style*="btnShimmer"]{animation:btnShimmer 2.5s linear infinite !important;}
[style*="arrowPulse"]{animation:arrowPulse 1.5s ease-in-out infinite !important;}

/* ── Keyframes — GPU-safe (transform/opacity only) ── */
@keyframes progressShine{0%{transform:translateX(-200%)}100%{transform:translateX(200%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
@keyframes logoReveal{0%{opacity:0;transform:scale(.82)}60%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes splashLoad{0%{width:0}70%{width:86%}100%{width:100%}}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,.45),0 0 40px rgba(0,212,255,.18)}50%{box-shadow:0 0 0 20px rgba(0,212,255,0),0 0 64px rgba(0,212,255,.28)}}
@keyframes revengePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,68,68,.45)}50%{box-shadow:0 0 0 6px rgba(255,68,68,0)}}
@keyframes mysteryPop{0%{opacity:0;transform:scale(.5) translateY(28px)}55%{opacity:1;transform:scale(1.08) translateY(-8px)}80%{transform:scale(.98) translateY(0)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes winBounce{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-12px) scale(1.1)}}
@keyframes diceRoll{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-18deg) scale(1.14)}50%{transform:rotate(14deg) scale(.92)}75%{transform:rotate(-8deg) scale(1.08)}100%{transform:rotate(0) scale(1)}}
@keyframes arrowPulse{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
@keyframes onboardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes energyPulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes ultraTapFloat{0%{opacity:1;transform:translateY(0) scale(1)}60%{opacity:.9;transform:translateY(-44px) scale(1.1)}100%{opacity:0;transform:translateY(-70px) scale(.85)}}
@keyframes rippleGo{to{transform:scale(4.5);opacity:0}}
@keyframes shockwaveRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(3.8);opacity:0}}
@keyframes sparkBurst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0}}


/* ─── style block (original order) ─── */


/* ── Premium mine button ring glow ── */
.mine-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mine-btn-wrap::before,
.mine-btn-wrap::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0deg,
    rgba(0,200,255,.35) 60deg,
    rgba(139,92,246,.35) 120deg,
    rgba(0,255,136,.3) 180deg,
    rgba(255,215,0,.2) 240deg,
    transparent 300deg,
    transparent 360deg
  );
  filter: blur(3px);
}
.mine-btn-wrap::after {
  inset: -10px;
  opacity: .45;
  filter: blur(8px);
}
/* Fixed: .mine-btn-wrap is the PARENT of #mine-btn, so use :has() */
.mine-btn-wrap:has(#mine-btn.active)::before,
.mine-btn-wrap:has(#mine-btn.active)::after {
  background: conic-gradient(
    rgba(0,255,136,.6) 0deg,
    rgba(0,200,255,.4) 120deg,
    rgba(0,255,136,.6) 240deg,
    rgba(0,255,136,.6) 360deg
  );
}

/* ── Balance number — subtle count-up shimmer ── */
.hero-balance {
  display: inline-block;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1) !important;
}
.hero-balance.bump {
  transform: scale(1.06) !important;
}

/* ── Premium nav active indicator pill ── */
.nav-item.active::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--primary);
  margin: 1px auto 0;
  box-shadow: 0 0 6px var(--primary);
}

/* ── Tap feedback: elastic button scale ── */
#mine-btn:active {
  transform: scale(.91) !important;
}

/* ── Smooth inner halo on tap ── */
.mine-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,.18) 0%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease !important;
}
#mine-btn.active .mine-halo { opacity: 1; }

/* ── Coin rain particle ── */
.coin-rain {
  position: fixed;
  font-size: 18px;
  pointer-events: none;
  z-index: 9998;
  transform: translateZ(0);
}

/* ── Framerate monitor (dev — hidden in prod) ── */
#fps-monitor {
  display: none;
  position: fixed; bottom: 80px; right: 12px; z-index: 9999;
  font-family: 'Inter', ui-monospace, monospace; font-size: 10px;
  color: rgba(0,200,255,.6); pointer-events: none;
  background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 6px;
}

/* ── Screen transitions: slide-up feel ── */
/* Note: translateY value is set to 12px in the mobile-reset block below; this placeholder is kept for
   layer ordering only. The 12px !important rule in the <960px block is the canonical value. */
.screen.active {
  transform: translateY(0) !important;
}

/* ── Sub-screen: crisp slide-in ── */
.sub-screen {
  transform: translateX(100%) translateZ(0) !important;
}
.sub-screen.open {
  transform: translateX(0) translateZ(0) !important;
}

/* ── Toast: spring entry ── */
@keyframes v6ToastSlide {
  0%   { opacity: 0; transform: translateY(-16px) scale(.88); }
  60%  { opacity: 1; transform: translateY(3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes v6ToastOut {
  to { opacity: 0; transform: translateY(-10px) scale(.92); }
}

/* ── Progress bar shimmer (transform-based, not bg-position) ── */
#tap-progress { overflow: visible !important; }
#tap-progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  border-radius: inherit;
  animation: progressShine 2.4s linear infinite !important;
}

/* ── Onboarding dots spring ── */
.onboard-dot { transition: width .3s cubic-bezier(.34,1.56,.64,1), background .3s ease !important; }

/* ── Settings / leader items: touch feedback ── */
.leader-item:active, .setting-item:active, .mission-item:active {
  transform: scale(.985) !important;
  transition: transform .08s ease !important;
}

/* ── Glow on active nav ── */
.nav-item.active .nav-icon {
  filter: drop-shadow(0 0 10px var(--primary)) !important;
}
.nav-item.gaming-nav.active .nav-icon {
  filter: drop-shadow(0 0 10px #8B5CF6) !important;
}


/* ─── style block (original order) ─── */


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE BASE — safe-area, scroll, overflow fixes
════════════════════════════════════════════════════════════════ */

/* Ensure the html/body and #app fill exactly the viewport on every device */
/* (html,body properties merged into base CSS block above) */

#app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Every full-page screen fills the viewport — position/inset/opacity
   defined in base CSS above; only add extra sizing hints here */
.screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

/* Sub-screens fill the viewport */
.sub-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── FIX 2: Dynamic Viewport Height — handles iOS/Android browser chrome ── */
#app {
  height: 100vh;        /* fallback */
  height: 100dvh;       /* dynamic: shrinks when address bar shows */
  min-height: 100dvh;
}
.screen {
  height: 100vh;
  height: 100dvh;
}
.sub-screen {
  height: 100vh;
  height: 100dvh;
}

/* Scrollable inner bodies */
.app-body,
.sub-body,
.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

/* Bottom nav — always sits above system UI */
.bottom-nav {
  flex-shrink: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  min-height: calc(56px + env(safe-area-inset-bottom));
}

/* Top bar respects notch/island */
.top-bar {
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  flex-shrink: 0;
}

/* Auth inner — scrollable if keyboard pushes it */
.auth-inner {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  overflow-y: auto;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Prevent any element from overflowing horizontally — but not flex/grid children that need to shrink */
img, canvas, video, iframe, svg {
  max-width: 100%;
  box-sizing: border-box;
}
* {
  box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════════
   SMALL PHONES — 320px to 374px (iPhone SE, small Androids)
════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 374px) {
  .top-logo { font-size: clamp(16px, 4.8vw, 20px) !important; }
  .phase-pill { font-size: clamp(9px, 2.5vw, 12px) !important; padding: clamp(4px, 1.2vw, 6px) clamp(8px, 2.2vw, 10px) !important; }
  .icon-btn { width: clamp(30px, 8vw, 40px) !important; height: clamp(30px, 8vw, 40px) !important; font-size: clamp(12px, 3.5vw, 16px) !important; }

  .hero-card { margin: clamp(2px, 1.2vw, 6px) clamp(8px, 3vw, 14px) 0 !important; padding: clamp(14px, 4.2vw, 20px) clamp(12px, 3.6vw, 18px) !important; }
  .hero-balance { font-size: clamp(22px, 8.5vw, 32px) !important; letter-spacing: -1px !important; }
  .hero-token { font-size: clamp(10px, 3vw, 14px) !important; }
  .stat-mini-val { font-size: clamp(12px, 3.5vw, 16px) !important; }
  .stat-mini-lbl { font-size: clamp(9px, 2.5vw, 13px) !important; }

  .mine-section { padding: clamp(10px, 3vw, 14px) clamp(8px, 3vw, 14px) 0 !important; }
  .mine-btn-wrap { width: clamp(140px, 42vw, 210px) !important; height: clamp(140px, 42vw, 210px) !important; }
  .mine-icon { font-size: clamp(30px, 9vw, 42px) !important; }
  .mine-label { font-size: clamp(9px, 2.5vw, 13px) !important; letter-spacing: 1.5px !important; }
  .mine-rate { font-size: clamp(9px, 2.5vw, 13px) !important; }
  .mine-inner { padding-top: 20px !important; }

  .quick-stats { gap: 8px !important; padding: 10px !important; }
  .stat-card { padding: 12px !important; border-radius: 12px !important; }
  .stat-card-val { font-size: clamp(12px, 3.5vw, 16px) !important; }
  .stat-card-lbl { font-size: clamp(9px, 2.5vw, 13px) !important; }
  .stat-card-icon { font-size: clamp(16px, 4.5vw, 22px) !important; }

  .action-btn { padding: 8px 12px !important; font-size: clamp(10px, 3vw, 13px) !important; }
  .action-row { gap: 7px !important; padding: 0 10px !important; }

  .nav-icon { font-size: clamp(16px, 4.2vw, 20px) !important; }
  .nav-label { font-size: clamp(9px, 2.5vw, 13px) !important; }
  .nav-item { padding: 4px 6px !important; }

  .section-title { font-size: clamp(12px, 3.5vw, 16px) !important; }
  .section-hdr { padding: 0 10px 8px !important; }

  .app-body { padding-bottom: 70px !important; }

  /* Auth screen */
  .auth-logo { font-size: clamp(24px, 7vw, 34px) !important; }
  .auth-sub { font-size: clamp(9px, 2.5vw, 13px) !important; }
  .btn-primary, .btn-secondary { font-size: clamp(12px, 3.5vw, 16px) !important; padding: 13px !important; }
  .field input { font-size: clamp(12px, 3.5vw, 16px) !important; padding: 11px 12px !important; }

  /* Onboarding */
  .onboard-emoji { font-size: clamp(42px, 14vw, 60px) !important; }
  .onboard-title { font-size: clamp(16px, 5vw, 24px) !important; }
  .onboard-desc { font-size: clamp(12px, 3.5vw, 16px) !important; }

  /* Crash game */
  #crash-canvas { max-height: 180px !important; }
  .crash-bet-panel { padding: 10px !important; }

  /* PvP arena layout fix: stack vertically on tiny screens */
  .pvp-vs-row { gap: 4px !important; }
  .pvp-player { padding: 8px 6px !important; }
  .pvp-player-taps { font-size: 18px !important; }
  .pvp-tap-btn { width: 100px !important; height: 100px !important; font-size: 28px !important; }
}

/* ════════════════════════════════════════════════════════════════
   LARGE MODERN PHONES — 430px to 479px
   (iPhone 14/15 Pro Max, Samsung Galaxy S23 Ultra)
════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 430px) and (max-width: 479px) {
  html { font-size: 15px; }

  .hero-card { margin: 4px 16px 0 !important; padding: 20px 18px !important; }
  .hero-balance { font-size: 40px !important; }
  .hero-token { font-size: 14px !important; }

  .mine-btn-wrap { width: 185px !important; height: 185px !important; }
  .mine-icon { font-size: 44px !important; }

  .quick-stats { gap: 10px !important; padding: 14px !important; }
  .stat-card { padding: 15px !important; }
  .stat-card-val { font-size: 17px !important; }

  .app-body { padding-bottom: 78px !important; }
}

/* ════════════════════════════════════════════════════════════════
   STANDARD PHONES — 375px to 479px (iPhone 6/7/8/X/11/12/13/14)
════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 375px) and (max-width: 479px) {
  .hero-card { margin: clamp(3px, 1vw, 6px) clamp(10px, 3.2vw, 16px) 0 !important; padding: clamp(16px, 4.4vw, 22px) clamp(14px, 3.8vw, 20px) !important; }
  .hero-balance { font-size: clamp(30px, 8vw, 44px) !important; }

  .mine-btn-wrap { width: clamp(140px, 42vw, 210px) !important; height: clamp(140px, 42vw, 210px) !important; }
  .mine-icon { font-size: clamp(34px, 9vw, 44px) !important; }

  .quick-stats { gap: 9px !important; padding: 12px !important; }
  .stat-card { padding: 14px !important; }

  .app-body { padding-bottom: 76px !important; }
}

/* Mid-range phones: Galaxy S, Pixel 7, iPhone 14 class widths */
@media screen and (min-width: 380px) and (max-width: 430px) {
  html { font-size: clamp(13px, 3.3vw, 14.5px); }

  .hero-card { margin: clamp(3px, 0.9vw, 5px) clamp(12px, 3vw, 16px) 0 !important; padding: clamp(17px, 4.1vw, 21px) clamp(15px, 3.7vw, 19px) !important; }
  .hero-balance { font-size: clamp(32px, 8vw, 42px) !important; }
  .hero-token { font-size: clamp(12px, 3.2vw, 15px) !important; }

  .mine-btn-wrap { width: clamp(155px, 41vw, 190px) !important; height: clamp(155px, 41vw, 190px) !important; }
  .mine-icon { font-size: clamp(36px, 8.8vw, 42px) !important; }
  .mine-label { font-size: clamp(9px, 2.5vw, 12px) !important; }
  .mine-rate { font-size: clamp(9px, 2.5vw, 12px) !important; }

  .icon-btn { width: clamp(30px, 8vw, 40px) !important; height: clamp(30px, 8vw, 40px) !important; }
}

/* ════════════════════════════════════════════════════════════════
   LARGE PHONES — 480px to 599px (Pixel, Samsung Galaxy large)
════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 480px) and (max-width: 599px) {
  html { font-size: 15px; }

  .mine-btn-wrap { width: 190px !important; height: 190px !important; }
  .hero-balance { font-size: 40px !important; }
  .quick-stats { grid-template-columns: 1fr 1fr !important; }
  .app-body { padding-bottom: 78px !important; }
}

/* ════════════════════════════════════════════════════════════════
   SMALL TABLETS — 600px to 767px (small Android tablets)
════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 600px) and (max-width: 767px) {
  html { font-size: 15px; }

  #app, .screen, .sub-screen {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-card { margin: 6px 20px 0 !important; padding: 24px 22px !important; }
  .hero-balance { font-size: 44px !important; }

  .mine-section { padding: 20px 20px 0 !important; }
  .mine-btn-wrap { width: 200px !important; height: 200px !important; }

  .quick-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important; padding: 16px 20px !important;
  }

  .action-row { padding: 0 20px !important; }
  .section-hdr { padding: 0 20px 10px !important; }

  .bottom-nav { padding-left: 20px !important; padding-right: 20px !important; }
  .app-body { padding-bottom: 84px !important; }
}

/* ════════════════════════════════════════════════════════════════
   LANDSCAPE MODE — phones rotated sideways (height < 500px)
════════════════════════════════════════════════════════════════ */
@media screen and (orientation: landscape) and (max-height: 500px) {
  html { font-size: 13px; }

  .hero-card {
    padding: 10px 16px !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }
  .hero-balance { font-size: 24px !important; letter-spacing: -1px !important; }
  .hero-label { display: none !important; }
  .hero-divider { display: none !important; }
  .stat-mini-lbl { display: none !important; }

  .mine-section { padding: 4px 16px 0 !important; }
  .mine-btn-wrap { width: 100px !important; height: 100px !important; }
  .mine-icon { font-size: 28px !important; }
  .mine-label { font-size: 8px !important; letter-spacing: 1px !important; }
  .mine-rate { display: none !important; }
  .mine-btn-center { padding: 4px 0 !important; }

  .quick-stats {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .stat-card { padding: 8px !important; }
  .stat-card-icon { font-size: 16px !important; margin-bottom: 4px !important; }
  .stat-card-val { font-size: 13px !important; }
  .stat-card-lbl { font-size: 8px !important; }

  .bottom-nav {
    padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
    padding-top: 4px !important;
  }
  .nav-icon { font-size: 18px !important; }
  .nav-label { font-size: 7px !important; }

  .action-row { padding: 0 12px !important; }

  /* Sub-screens in landscape */
  .sub-body { padding: 8px !important; }
  .sub-header { padding: 8px 14px !important; }

  /* Crash game canvas height limit */
  #crash-graph-canvas, #crash-stars-canvas {
    max-height: 160px !important;
  }

  /* Ludo board size */
  #ludo-canvas {
    max-width: min(240px, calc(100vh - 120px)) !important;
    max-height: min(240px, calc(100vh - 120px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   TABLETS — 768px to 1023px (iPad, iPad Mini, Android tablets)
════════════════════════════════════════════════════════════════ */
/* ── MOBILE SAFETY RESET: ensure phones always get full-width layout ── */
@media screen and (max-width: 959px) {
  #app { position: fixed !important; inset: 0 !important; width: 100% !important; }
  .screen {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(12px) !important;
    border: none !important;
    box-shadow: none !important;
  }
  .screen.active { transform: translateY(0) !important; }
  .sub-screen {
    position: fixed !important;
    left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateX(100%) !important;
  }
  .sub-screen.open { transform: translateX(0) !important; }
}

/* ── REAL TABLETS & DESKTOPS (960px+) — genuine wide screens only ── */
/* NOTE: phones in "Desktop mode" also trigger this — we correct that via JS touch detection below */
@media screen and (min-width: 960px) {
  html { font-size: 16px; }

  /* Center the app in a phone-width column */
  #app {
    display: flex;
    justify-content: center;
    background: #020810;
  }

  .screen {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 430px !important;
    max-width: 430px !important;
    height: 100% !important;
    border-left: 1px solid rgba(0,200,255,0.1);
    border-right: 1px solid rgba(0,200,255,0.1);
    box-shadow: 0 0 80px rgba(0,0,0,0.6);
  }

  .screen.active {
    transform: translateX(-50%) !important;
  }

  .sub-screen {
    position: fixed !important;
    left: 50% !important;
    margin-left: -215px !important;
    /* Slide OFF to the LEFT (negative) so it never bleeds into the right side of the desktop viewport */
    transform: translateX(-430px) !important;
    width: 430px !important;
    max-width: 430px !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    /* Clip anything that escapes the column bounds */
    overflow: hidden;
  }
  .sub-screen.open {
    transform: translateX(0) !important;
  }
  /* Clip guard: wrap sub-screens so they can never bleed outside the 430px column */
  .screen {
    overflow: hidden !important;
  }

  #recovery-modal, #share-card-modal, #result-popup,
  .mystery-drop-popup, .fomo-bar, .attack-banner, .v12-kill-feed-wrap {
    left: 0 !important; right: 0 !important; width: 100% !important;
  }

  .bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
  .mine-btn-wrap { width: 220px !important; height: 220px !important; }
  .hero-balance  { font-size: 46px !important; }
  .quick-stats   { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .app-body      { padding-bottom: 90px !important; }

  /* Desktop background depth */
  body {
    background:
      radial-gradient(ellipse at 15% 50%, rgba(0,144,255,0.05) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 20%, rgba(0,200,100,0.04) 0%, transparent 50%),
      #040C18;
  }
  body::before, body::after {
    content: '';
    position: fixed; top: 0; bottom: 0;
    pointer-events: none; z-index: 0;
  }
  body::before { left: 0; right: calc(50% + 215px); background: linear-gradient(90deg, rgba(0,200,255,0.03), transparent); }
  body::after  { right: 0; left:  calc(50% + 215px); background: linear-gradient(270deg, rgba(0,200,255,0.03), transparent); }
}

/* ════════════════════════════════════════════════════════════════
   FIX 11: Touch device override — force mobile layout even when
   browser reports a desktop-width viewport (desktop mode, in-app
   browsers, WhatsApp WebView, Instagram, etc.)
════════════════════════════════════════════════════════════════ */
html.is-touch-device #app {
  display: block !important;
  background: var(--bg) !important;
}

html.is-touch-device .screen {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  transform: translateY(12px) !important;
}

html.is-touch-device .screen.active {
  transform: translateY(0) !important;
}

html.is-touch-device .sub-screen {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  transform: translateX(100%) !important;
}

html.is-touch-device .sub-screen.open {
  transform: translateX(0) !important;
}

/* Reset desktop-mode centering */
html.is-touch-device body::before,
html.is-touch-device body::after {
  display: none !important;
}

/* Mining button: full fluid width on touch devices */
html.is-touch-device .mine-btn-wrap {
  width: clamp(150px, 42vw, 210px) !important;
  height: clamp(150px, 42vw, 210px) !important;
}

/* ── LARGE DESKTOP 1200px+ ── */
@media screen and (min-width: 1200px) {
  .screen, .sub-screen { width: 430px !important; max-width: 430px !important; }
  .sub-screen { margin-left: -215px !important; transform: translateX(-430px) !important; }
  .hero-balance { font-size: 50px !important; }
  body::before { right: calc(50% + 215px); }
  body::after  { left:  calc(50% + 215px); }
}

/* ── LARGE DESKTOP 1440px+ ── */
@media screen and (min-width: 1440px) {
  .screen, .sub-screen { width: 430px !important; max-width: 430px !important; }
  .sub-screen { margin-left: -215px !important; transform: translateX(-430px) !important; }
  .hero-balance { font-size: 54px !important; }
}

/* ── MOUSE HOVER (real pointer devices only, never fires on touch) ── */
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover .nav-icon  { transform: scale(1.2); filter: drop-shadow(0 0 10px var(--primary)); }
  .nav-item:hover .nav-label { color: rgba(0,200,255,0.75); }
  .btn-primary:hover   { box-shadow: 0 10px 32px rgba(0,200,255,0.35); transform: translateY(-1px); }
  .action-btn:hover    { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,200,255,0.18); border-color: var(--border2); }
  .icon-btn:hover      { background: rgba(0,200,255,0.08); border-color: var(--border2); }
  .back-btn:hover      { background: rgba(0,200,255,0.1); border-color: var(--border2); }
  .copy-btn:hover      { background: rgba(255,215,0,0.25); }
  .leader-item:hover   { border-color: rgba(0,200,255,0.3); }
  .game-mode-card:hover{ transform: translateY(-4px) scale(1.02); }
  .setting-item:hover  { background: rgba(0,200,255,0.05) !important; }
  .mission-item:hover  { transform: translateX(3px); }
  .method-card:hover   { border-color: var(--primary); }
  #mine-btn:hover:not(.active) {
    box-shadow: 0 0 0 8px rgba(0,200,255,0.1), 0 0 50px rgba(0,200,255,0.2);
    transform: scale(1.03);
  }
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), rgba(0,200,255,0.25)); }
}

/* ════════════════════════════════════════════════════════════════
   LARGE TABLETS / iPad Pro — 1024px+
════════════════════════════════════════════════════════════════ */
/* merged into 1200px block above */

/* ════════════════════════════════════════════════════════════════
   LANDSCAPE PHONE — short viewport (landscape on a phone)
════════════════════════════════════════════════════════════════ */
@media screen and (max-height: 500px) and (orientation: landscape) {
  /* Superseded by FIX 4 block above */
}

/* ════════════════════════════════════════════════════════════════
   GAME MODES — responsive grid fixes
════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 479px) {
  .game-modes-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 10px 12px 0 !important;
    gap: 8px !important;
  }
  .game-mode-card { padding: 12px !important; }
  .game-card-emoji { font-size: 26px !important; margin-bottom: 5px !important; }
  .game-card-title { font-size: clamp(12px, 3.5vw, 16px) !important; }
  .game-card-desc { font-size: clamp(9px, 2.5vw, 13px) !important; }

  /* Missions */
  .missions-panel { padding: 10px 12px 0 !important; }
  .mission-item { padding: 10px 12px !important; }
  .mission-title { font-size: clamp(12px, 3.5vw, 16px) !important; }
  .mission-reward { font-size: clamp(9px, 2.5vw, 13px) !important; }

  /* PvP */
  .pvp-vs-row { gap: 6px !important; }
  .pvp-player { padding: 10px 8px !important; }
  .pvp-player-taps { font-size: 20px !important; }
  .pvp-tap-btn {
    width: clamp(100px, 34vw, 140px) !important;
    height: clamp(100px, 34vw, 140px) !important;
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .pvp-quick-row { gap: 6px !important; }
  .pvp-quick-card { padding: 10px 8px !important; }
  .pvp-quick-name { font-size: 11px !important; }

  /* Leaderboard */
  .leader-item { padding: 10px !important; gap: 10px !important; }
  .leader-name { font-size: clamp(12px, 3.5vw, 16px) !important; }
  .leader-bal { font-size: clamp(12px, 3.5vw, 16px) !important; }

  /* Referral */
  .ref-code-display { font-size: 18px !important; letter-spacing: 3px !important; }
  .ref-stats-row { grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; }
  .ref-stat { padding: 10px 6px !important; }
  .ref-stat-val { font-size: 15px !important; }
  .ref-stat-lbl { font-size: clamp(9px, 2.5vw, 13px) !important; }

  /* Withdraw */
  .method-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .method-card { padding: 10px !important; }

  /* Spin Wheel */
  .spin-wheel-wrap,
  .spin-wheel-canvas {
    width: clamp(180px, 52vw, 300px) !important;
    height: clamp(180px, 52vw, 300px) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CRASH GAME — responsive canvas & panel
════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 479px) {
  #crash-canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    border-radius: 12px !important;
  }
  .crash-bet-input-row { gap: 6px !important; }
  .crash-adjust-btn { padding: 8px 10px !important; font-size: 12px !important; }
  [id="crash-bet-input"] { font-size: 18px !important; }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  #crash-canvas { max-height: 240px !important; }
}

/* ════════════════════════════════════════════════════════════════
   LUDO BOARD — scale on small screens
════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 479px) {
  .ludo-board, #ludo-board {
    width: calc(100vw - 24px) !important;
    height: calc(100vw - 24px) !important;
    max-width: 340px !important;
    max-height: 340px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MODALS & SHEETS — ensure they don't overflow
════════════════════════════════════════════════════════════════ */
.recovery-sheet,
.share-card-sheet {
  max-height: 90vh;
  overflow-y: auto;
}

#recovery-modal {
  align-items: flex-end;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Full-width inputs on mobile */
@media screen and (max-width: 479px) {
  .field input,
  .chat-input,
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    -webkit-appearance: none; appearance: none;
    appearance: none;
  }

  select {
    font-size: 16px !important; /* Prevents iOS zoom */
    -webkit-appearance: none; appearance: none;
    appearance: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   SPLASH & ONBOARDING — responsive sizes
════════════════════════════════════════════════════════════════ */
.splash-logo {
  font-size: clamp(36px, 10vw, 60px) !important;
}
.splash-sub {
  font-size: clamp(12px, 3vw, 16px) !important;
}
.splash-ring {
  width: clamp(64px, 18vw, 100px) !important;
  height: clamp(64px, 18vw, 100px) !important;
}

.onboard-emoji {
  font-size: clamp(52px, 15vw, 80px) !important;
}
.onboard-title {
  font-size: clamp(18px, 5vw, 26px) !important;
}
.onboard-desc {
  font-size: clamp(13px, 3.5vw, 16px) !important;
}

/* Auth logo scales fluidly */
.auth-logo {
  font-size: clamp(28px, 8vw, 40px) !important;
}

/* ════════════════════════════════════════════════════════════════
   HERO BALANCE — fluid font sizing
════════════════════════════════════════════════════════════════ */
.hero-balance {
  font-size: clamp(28px, 9vw, 48px) !important;
}

/* ════════════════════════════════════════════════════════════════
   KILL FEED / TOAST — always within viewport
════════════════════════════════════════════════════════════════ */
.v12-kill-feed-wrap {
  left: 0 !important;
  right: 0 !important;
  max-width: 100vw !important;
  padding: 0 12px !important;
}
.v12-kill-feed-bar {
  max-width: 100% !important;
  font-size: clamp(11px, 3vw, 14px) !important;
  padding: 8px 14px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-wrap {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100vw - 32px) !important;
  max-width: 360px !important;
}

/* Change password modal */
.modal-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.6);
  display:flex;align-items:flex-end;justify-content:center;
  padding:12px;
}
.modal-sheet{
  width:100%;max-width:420px;
  background:rgba(4,12,24,.96);
  border:1px solid rgba(0,200,255,.15);
  border-radius:16px;
  box-shadow:0 20px 80px rgba(0,0,0,.65);
  overflow:hidden;
}
.modal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.modal-body{padding:14px;}
.modal-body .field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.modal-body .field label{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;}
.modal-body .field input{
  width:100%;
  min-height:44px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,200,255,.14);
  background:rgba(0,0,0,.35);
  color:var(--text);
  outline:none;
  font-size:16px; /* prevent iOS zoom */
}
.modal-body .field input:focus{border-color:rgba(0,200,255,.35);box-shadow:0 0 0 3px rgba(0,200,255,.12);}

/* ════════════════════════════════════════════════════════════════
   FOMO BAR — top safe area
════════════════════════════════════════════════════════════════ */
.fomo-bar {
  padding-top: max(8px, env(safe-area-inset-top)) !important;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* ════════════════════════════════════════════════════════════════
   ATTACK BANNER — below notch
════════════════════════════════════════════════════════════════ */
.attack-banner {
  top: max(60px, calc(env(safe-area-inset-top) + 54px)) !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
}

/* Remove "Revenge" attack banner UI */
.attack-banner {
  display: none !important;
}

/* Force-hide the specific banner element even if JS/inline styles apply */
#attack-banner {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════
   POWER BAR — always full width
════════════════════════════════════════════════════════════════ */
.power-bar-track {
  width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════
   COUNTDOWN / TIMER — fluid font
════════════════════════════════════════════════════════════════ */
.countdown-digits {
  font-size: clamp(24px, 7vw, 40px) !important;
}

/* ════════════════════════════════════════════════════════════════
   TABLET — enhance padding for wider feel
════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 960px) {
  .sub-body { padding: 20px !important; }
  .hero-card { margin: 8px 20px 0 !important; padding: 28px 24px !important; }
  .progress-section { padding: 20px 20px 0 !important; }
  .quick-stats { padding: 16px 20px !important; gap: 14px !important; }
  .action-row { padding: 0 20px !important; }
  .section-hdr { padding: 0 20px 12px !important; }
  .mine-section { padding: 24px 20px 0 !important; }
}

/* ════════════════════════════════════════════════════════════════
   PERFORMANCE: Reduce heavy blur on older/slower devices
════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 374px) {
  .hero-card { backdrop-filter: blur(8px) !important; }
  .bottom-nav { backdrop-filter: blur(12px) !important; }
  .sub-header { backdrop-filter: blur(8px) !important; }
  .orb-1, .orb-2, .orb-3 { filter: blur(40px) !important; }
}

/* ════════════════════════════════════════════════════════════════
   PREVENT TEXT SIZE ADJUSTMENT (iOS / Android browser)
════════════════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── FIX 5: Use --vh so soft keyboard doesn't cover inputs ── */
.auth-screen,
#auth {
  height: calc(var(--vh, 1vh) * 100) !important;
  min-height: calc(var(--vh, 1vh) * 100) !important;
}

/* Chat screen input stays above keyboard */
#sub-chat {
  height: calc(var(--vh, 1vh) * 100) !important;
}
.chat-messages {
  /* When keyboard is up, this shrinks so input stays visible */
  min-height: 0 !important;
}

/* ── FIX 8: Eliminate 300ms tap delay on all interactive elements ── */
.copy-btn,
.method-card,
.ludo-stake-btn,
.ludo-win-btn,
.ludo-win-btn.primary,
.ludo-win-btn.secondary,
.send-btn,
.back-btn,
.setting-item,
.admin-btn,
.phase-card,
.ref-stat,
.pvp-quick-card,
.pvp-quick-btn,
.leader-tab,
.crash-bet-panel button,
.mcp-btn,
.copy-btn,
.onboard-btn,
[onclick] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.crash-bet-panel {
  flex-shrink: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Safe area for game action panels at bottom of screen */
.ludo-dice-area,
.spin-action-row,
.crash-action-row {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* ════════════════════════════════════════════════════════════════
   APP-WIDE FLUID TYPOGRAPHY LAYER (phones 320–480)
   Converts remaining fixed px text to continuous scaling
════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 480px) {
  /* Body text scale */
  body,
  .action-btn,
  .btn-primary,
  .btn-secondary,
  .field input,
  .chat-input,
  textarea,
  select,
  .leader-name,
  .leader-bal,
  .sub-title,
  .section-title,
  .setting-title,
  .method-name,
  .phase-rate,
  .roadmap-item-li,
  .onboard-desc,
  .auth-sub {
    font-size: clamp(12px, 3.5vw, 16px) !important;
  }

  /* Labels / compact metadata */
  .phase-pill,
  .nav-label,
  .stat-mini-lbl,
  .stat-card-lbl,
  .leader-sub,
  .progress-title,
  .progress-val,
  .section-action,
  .hero-label,
  .mine-label,
  .mine-rate,
  .info-key,
  .info-val,
  .settings-label,
  .roadmap-phase,
  .mission-prog,
  .mission-reward,
  .ref-stat-lbl,
  .phase-status,
  .admin-stat-lbl {
    font-size: clamp(9px, 2.5vw, 13px) !important;
  }

  /* Headline / value text */
  .hero-balance,
  .withdraw-bal-val,
  .token-bal,
  .share-card-title,
  .ref-code-display,
  .risk-game-coins-val,
  .countdown-digits,
  .onboard-title {
    font-size: clamp(28px, 8vw, 44px) !important;
  }

  /* Mid-size numeric/value text */
  .stat-mini-val,
  .stat-card-val,
  .ref-stat-val,
  .admin-stat-val,
  .phase-card-label strong,
  .phase-card-label,
  .hero-token,
  .game-card-title,
  .mission-title,
  .ludo-lb-name,
  .ludo-lb-wins {
    font-size: clamp(12px, 3.5vw, 16px) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   TAP TARGET MINIMUM — WCAG / mobile UX
   Applied only to interactive controls, not every [onclick] element
════════════════════════════════════════════════════════════════ */
.nav-item,
.icon-btn,
.back-btn,
.send-btn,
button {
  min-width: 44px;
  min-height: 44px;
}
/* [onclick] tappables that are block-level action items */
.action-btn,
.copy-btn,
.setting-item,
.method-card,
.game-mode-card,
.pvp-quick-card,
.leader-item,
.mission-item,
.field input,
.chat-input,
textarea,
select {
  min-width: 44px;
  min-height: 44px;
}
/* ── Mine button: smooth elastic spring on tap ── */
#mine-btn {
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease !important;
}
#mine-btn.active {
  box-shadow: 0 0 0 10px rgba(0,255,136,.1), 0 0 50px rgba(0,255,136,.22) !important;
}
/* ── Smooth scroll for all scrollable containers ── */
.app-body, .sub-body, .chat-messages, .auth-inner {
  scroll-behavior: smooth;
}
/* ── Coin rain animation ── */
@keyframes coinRain {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-120px) rotate(720deg); opacity: 0; }
}
.coin-rain { animation: coinRain .9s ease-out forwards !important; }


/* ─── style block (original order) ─── */



/* ── Active mining: pulsing green plasma aura on button ── */
@keyframes miningPlasmaGlow {
  0%   { box-shadow: 0 0 0 0   rgba(0,255,136,0),
                     0 0 30px rgba(0,255,136,.25),
                     0 0 60px rgba(0,200,255,.15); }
  40%  { box-shadow: 0 0 0 14px rgba(0,255,136,.10),
                     0 0 50px rgba(0,255,136,.40),
                     0 0 90px rgba(0,200,255,.25); }
  100% { box-shadow: 0 0 0 26px rgba(0,255,136,0),
                     0 0 30px rgba(0,255,136,.10),
                     0 0 60px rgba(0,200,255,.08); }
}
#mine-btn.active {
  animation: miningPlasmaGlow 1.8s ease-in-out infinite !important;
  box-shadow: 0 0 40px rgba(0,255,136,.35), 0 0 80px rgba(0,200,255,.2) !important;
}

/* ── Mining ring: brighter, faster rotation when active ── */
.mine-btn-wrap:has(#mine-btn.active)::before {
  animation: coronaRotate 1.4s linear infinite !important;
  opacity: 1 !important;
  filter: blur(2px) !important;
}
.mine-btn-wrap:has(#mine-btn.active)::after {
  animation: coronaRotate 2.2s linear infinite reverse !important;
  opacity: .85 !important;
  filter: blur(5px) !important;
}

/* ── Floating +DRT glow label ── */
@keyframes drtGlowFloat {
  0%   { opacity: 0; transform: translateY(0) scale(.7); filter: blur(4px); }
  15%  { opacity: 1; transform: translateY(-8px) scale(1.1); filter: blur(0); }
  70%  { opacity: 1; transform: translateY(-32px) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-58px) scale(.85); filter: blur(3px); }
}
.drt-glow-float {
  position: fixed;
  font-family: 'Orbitron', 'Inter', ui-monospace, monospace;
  font-weight: 800;
  font-size: clamp(12px, 3.5vw, 16px);
  pointer-events: none;
  z-index: 9999;
  animation: drtGlowFloat .95s cubic-bezier(.2,1,.3,1) forwards;
  white-space: nowrap;
}

/* ── Mining start burst overlay flash ── */
@keyframes mineStartFlash {
  0%   { opacity: .55; }
  100% { opacity: 0; }
}
.mine-start-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 55%,
    rgba(0,255,136,.22) 0%,
    rgba(0,200,255,.10) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 9996;
  animation: mineStartFlash .6s ease-out forwards;
}

/* ── Orbiting mining particles when active ── */
@keyframes orbitCW {
  from { transform: rotate(0deg)   translateX(var(--r,70px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r,70px)) rotate(-360deg); }
}
@keyframes orbitCCW {
  from { transform: rotate(0deg)   translateX(var(--r,82px)) rotate(0deg); }
  to   { transform: rotate(-360deg) translateX(var(--r,82px)) rotate(360deg); }
}
.mine-orbit-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ── Daily tap CTA — glows when session NOT active ── */
@keyframes ctaGlow {
  0%,100% { opacity: .6; text-shadow: 0 0 8px rgba(0,200,255,.4); }
  50%     { opacity: 1;  text-shadow: 0 0 20px rgba(0,200,255,.9), 0 0 40px rgba(0,255,136,.5); }
}
.mine-cta-glow {
  animation: ctaGlow 2.2s ease-in-out infinite !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
}

/* ── Mining status badge under button ── */
.mine-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: 'Inter', ui-monospace, monospace;
  font-size: clamp(9px, 2.5vw, 13px);
  letter-spacing: .8px;
  border: 1px solid transparent;
  transition: all .3s ease;
}
.mine-status-badge.idle {
  background: rgba(0,200,255,.06);
  border-color: rgba(0,200,255,.2);
  color: var(--muted);
}
.mine-status-badge.active {
  background: rgba(0,255,136,.08);
  border-color: rgba(0,255,136,.35);
  color: #00FF88;
  box-shadow: 0 0 16px rgba(0,255,136,.15);
}
.mine-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.mine-status-badge.active .mine-status-dot {
  animation: energyPulse .8s ease-in-out infinite;
  box-shadow: 0 0 6px #00FF88;
}

/* ── DRT earned today counter ── */
.mine-earned-today {
  font-family: 'Orbitron', monospace;
  font-size: clamp(10px, 3vw, 14px);
  color: var(--gold);
  margin-top: 4px;
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease;
}
.mine-earned-today.visible {
  opacity: 1;
}

/* ── "Tap to mine" daily reminder pulse ring on button when idle ── */
@keyframes idleRingPulse {
  0%   { box-shadow: 0 0 0 0   rgba(0,200,255,.5); }
  70%  { box-shadow: 0 0 0 18px rgba(0,200,255,0); }
  100% { box-shadow: 0 0 0 0   rgba(0,200,255,0); }
}
#mine-btn:not(.active):not([disabled]) {
  animation: idleRingPulse 2.5s ease-out infinite !important;
}



/* ─── style block (original order) ─── */


/* ════ TIER 1: All devices — remove the most expensive always-on ops ════ */

/* backdrop-filter is the #1 GPU killer on low-end — consolidate */
/* Only keep it on bottom-nav (critical UI) and toasts (small surface area) */
.hero-card,
.modal-overlay,
.modal,
.sub-header,
.top-bar,
.attack-banner,
#share-card-modal,
.recovery-sheet,
.fomo-bar {
  /* Fallback solid bg so removing backdrop-filter doesn't break readability */
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Bottom nav and toast keep blur — small surface, worth it */
.bottom-nav {
  -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}
.toast {
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

/* ════ TIER 2: width ≤ 390px (budget Android, older iPhones) ════ */
@media screen and (max-width: 390px) {
  /* Kill orbs entirely — they're large blurred divs, huge paint cost */
  .orb-1, .orb-2, .orb-3 {
    display: none !important;
  }
  /* Simplify grid — no animation on low-end */
  .bg-grid {
    animation: none !important;
    opacity: .4 !important;
  }
  /* Reduce mine ring complexity */
  .mine-btn-wrap::before,
  .mine-btn-wrap::after {
    filter: none !important;
    opacity: .35 !important;
  }
  /* Remove hero card glow pseudo-elements */
  .hero-card::before,
  .hero-card::after {
    display: none !important;
  }
  /* Reduce particle canvas opacity — fewer visible particles needed */
  #particle-canvas {
    opacity: .5 !important;
  }
  /* Remove all drop-shadows from text (expensive on CPU compositing) */
  .hero-balance,
  .top-logo,
  .auth-logo,
  .splash-logo,
  .mine-label {
    filter: none !important;
  }
  /* Reduce splash animation complexity */
  .splash-ring {
    animation: ringPulse 3s ease-in-out infinite, fadeIn .5s ease forwards !important;
  }
  /* Simplify stat cards */
  .stat-card-glow { display: none !important; }
  /* Remove box-shadow heavy glows */
  .pvp-tap-btn {
    box-shadow: 0 0 20px rgba(139,92,246,.3) !important;
  }
  .level-badge {
    box-shadow: 0 0 8px rgba(139,92,246,.2) !important;
  }
}

/* ════ TIER 3: width ≤ 360px (very budget — Galaxy A-series, Redmi Note old) ════ */
@media screen and (max-width: 360px) {
  /* Strip all non-essential animations */
  .hero-card::before,
  .hero-card::after,
  .orb-1, .orb-2, .orb-3,
  .stat-card-glow,
  .mine-btn-wrap::before {
    display: none !important;
  }
  /* Single simplified ring */
  .mine-btn-wrap::after {
    background: rgba(0,200,255,.25) !important;
    filter: none !important;
    animation: coronaRotate 6s linear infinite !important;
    opacity: .5 !important;
  }
  /* Simpler hero card */
  .hero-card {
    background: rgba(0,200,255,.06) !important;
    box-shadow: none !important;
  }
  /* Simpler nav */
  .bottom-nav {
    -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }
  /* No animated bg */
  #particle-canvas { display: none !important; }
  /* Remove all box-shadows from cards */
  .stat-card,
  .leader-item,
  .game-mode-card {
    box-shadow: none !important;
  }
  /* Faster transitions to feel snappier */
  .screen {
    transition: opacity .2s ease !important;
    transform: none !important;
  }
  .sub-screen {
    transition: transform .22s ease !important;
  }
  /* Smaller font performance */
  .hero-balance {
    font-size: 36px !important;
  }
}

/* ════ TIER 4: prefers-reduced-motion (accessibility + battery saving) ════ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .screen { opacity: 1 !important; transform: none !important; }
  .sub-screen { transform: none !important; }
  .sub-screen.open { transform: none !important; }
  .orb-1,.orb-2,.orb-3 { animation: none !important; }
  .bg-grid { animation: none !important; }
  #particle-canvas { display: none !important; }
  .loading-spinner { animation: spin .8s linear infinite !important; }
  .splash-fill { animation: splashLoad 1.5s ease .3s forwards !important; }
  .splash-logo { animation: fadeIn .4s ease forwards !important; opacity: 0; }
}

/* ════ TIER 5: Low memory hint via CSS env() — future-proof ════ */
/* Some browsers expose reduced-data or navigation prefers */
@media (prefers-reduced-data: reduce) {
  .orb-1,.orb-2,.orb-3 { display: none !important; }
  #particle-canvas { display: none !important; }
  .bg-grid { animation: none !important; }
}


/* ─── style block (original order) ─── */


/* ── v6 Ultra Additions ────────────────────────────────── */
@keyframes drtLivePulse{0%,100%{opacity:1}50%{opacity:.5}}
/* skeletonShimmer defined later */
/* Fix #10: v6ConfettiFall was empty — added actual fall + rotation animation */
@keyframes v6ConfettiFall{
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes v6ToastSlide{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes v6ToastOut{from{transform:translateX(0);opacity:1}to{transform:translateX(110%);opacity:0}}

/* DRT stat tiles */
.drt-stat-tile{
  background:#0D1E3A;border:1px solid rgba(0,200,255,.12);
  border-radius:14px;padding:16px;text-align:center;
  transition:border-color .2s,transform .2s;
}
.drt-stat-tile:active{transform:scale(.97);}
.drt-stat-icon{font-size:22px;margin-bottom:6px;}
.drt-stat-val{font-family:'Inter',ui-monospace,monospace;font-size:16px;font-weight:700;color:#fff;word-break:break-all;}
.drt-stat-lbl{font-size:11px;color:rgba(232,244,255,.45);margin-top:3px;}

/* Skeleton shimmer */
.skel{
  background:linear-gradient(90deg,
    rgba(13,30,58,1) 25%,
    rgba(0,200,255,.08) 50%,
    rgba(13,30,58,1) 75%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.6s ease-in-out infinite;
  border-radius:8px;
}
.skel-line{height:14px;margin-bottom:8px;}
.skel-line.short{width:60%;}
.skel-line.med{width:80%;}
.skel-line.full{width:100%;}
.skel-circle{border-radius:50%;}
.skel-card{height:64px;border-radius:12px;margin-bottom:8px;}
.skel-balance{height:48px;width:180px;margin:0 auto 8px;border-radius:10px;}

/* Sound/Haptic toggle in settings */
.v6-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:#0D1E3A;
  border:1px solid rgba(0,200,255,.1);
  cursor:pointer;transition:background .2s;
}
.v6-toggle-row:hover{background:rgba(0,200,255,.04);}
.v6-toggle-row:first-child{border-radius:14px 14px 0 0;}
.v6-toggle-row:last-child{border-radius:0 0 14px 14px;}
.v6-toggle{
  width:44px;height:24px;border-radius:12px;border:1px solid rgba(0,200,255,.2);
  position:relative;transition:background .25s;cursor:pointer;flex-shrink:0;
}
.v6-toggle.on{background:rgba(0,200,255,.3);}
.v6-toggle.off{background:rgba(255,255,255,.06);}
.v6-toggle::after{
  content:'';position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;background:#fff;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.v6-toggle.on::after{transform:translateX(20px);}

/* DRT Dashboard button in nav-more */
.drt-dash-btn{
  width:100%;padding:14px 16px;background:linear-gradient(135deg,rgba(0,200,255,.08),rgba(0,255,136,.05));
  border:1px solid rgba(0,200,255,.2);border-radius:14px;
  display:flex;align-items:center;gap:14px;cursor:pointer;
  transition:border-color .2s,background .2s;margin-bottom:10px;
}
.drt-dash-btn:active{transform:scale(.98);}
.drt-dash-btn:hover{border-color:rgba(0,200,255,.4);}

/* Phase indicator rows */
.phase-row{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:10px;border:1px solid transparent;
}
.phase-row.current-phase{
  background:rgba(0,200,255,.06);
  border-color:rgba(0,200,255,.2);
}

/* Supply dist row */
.dist-row{display:flex;align-items:center;gap:10px;padding:6px 0;}
.dist-bar-bg{flex:1;height:6px;background:rgba(255,255,255,.05);border-radius:6px;overflow:hidden;}
.dist-bar-fill{height:100%;border-radius:6px;transition:width 1s ease;}




/* ─── style block (original order) ─── */


/* ── v7 Animations ── */
@keyframes v7BannerSlide { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes v7LevelPop { 0%{opacity:0;transform:scale(.7)} 70%{transform:scale(1.05)} 100%{opacity:1;transform:scale(1)} }
@keyframes v7ThemeTransition { from{opacity:.7} to{opacity:1} }

/* ── Dark/Light theme vars ── */
html[data-theme="light"] {
  --bg:       #F0F4F8;
  --surface:  #FFFFFF;
  --card:     #E8F0F8;
  --border:   rgba(0,100,180,0.15);
  --border2:  rgba(0,100,180,0.3);
  --text:     #0A1628;
  --muted:    rgba(10,22,40,0.5);
  --glow:     0 0 30px rgba(0,144,255,0.12);
}
html[data-theme="light"] .hero-balance {
  background:linear-gradient(135deg,#0A1628,#0090FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
html[data-theme="light"] .bg-grid { opacity:.4; }

/* ── Theme toggle in settings ── */
.v7-theme-toggle-row {
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;cursor:pointer;border-radius:12px;
  transition:background .2s;
}
.v7-theme-toggle-row:active { background:rgba(255,255,255,.04); }

/* ── Completion bar ── */
.v7-completion-bar {
  height:6px;background:var(--card);border-radius:6px;
  border:1px solid var(--border);overflow:hidden;margin-top:6px;
}
.v7-completion-fill {
  height:100%;background:linear-gradient(90deg,#00C8FF,#00FF88);
  border-radius:6px;transition:width .6s cubic-bezier(.4,0,.2,1);
}

/* ── Hall of Fame card ── */
.v7-hall-card {
  background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(255,140,0,.04));
  border:1px solid rgba(255,215,0,.25);border-radius:16px;
  padding:16px;margin-bottom:12px;
}
.v7-hall-title {
  font-family:'Inter',ui-monospace,monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:2px;color:rgba(255,215,0,.7);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.v7-hall-item {
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.v7-hall-item:last-child { border-bottom:none; }

/* ── Friend item ── */
.v7-friend-item {
  display:flex;align-items:center;gap:12px;
  padding:14px;background:var(--card);
  border:1px solid var(--border);border-radius:14px;
  margin-bottom:8px;transition:border-color .2s;
}
.v7-friend-item:hover { border-color:var(--border2); }
.v7-friend-avatar {
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--green));
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
}
.v7-friend-info { flex:1; }
.v7-friend-name { font-weight:700;font-size:14px; }
.v7-friend-bal { font-family:'Inter',ui-monospace,monospace;font-size:12px;color:var(--primary);margin-top:2px; }
.v7-friend-status { font-size:10px;margin-top:2px; }

/* ── Skeleton loading ── */
.v7-skeleton {
  background:linear-gradient(90deg,var(--card) 25%, rgba(0,200,255,.06) 50%, var(--card) 75%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.4s infinite;
  border-radius:10px;
}
@keyframes skeletonShimmer {
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.v7-skel-row {
  display:flex;gap:12px;align-items:center;
  padding:14px;background:var(--card);
  border:1px solid var(--border);border-radius:14px;
  margin-bottom:8px;
}

/* ── Empty state ── */
.v7-empty-state {
  text-align:center;padding:48px 20px;
}
.v7-empty-icon { font-size:52px;margin-bottom:12px;display:block; }
.v7-empty-title { font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:6px; }
.v7-empty-sub { font-family:'Inter',ui-monospace,monospace;font-size:12px;color:rgba(232,244,255,.45);line-height:1.7; }

/* ── Avatar selector button ── */
.v7-avatar-btn {
  width:52px;height:52px;border-radius:50%;border:2px solid var(--border);
  background:var(--card);font-size:26px;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;
}
.v7-avatar-btn:active { transform:scale(.9); }
.v7-avatar-btn.selected { border-color:var(--primary);background:rgba(0,200,255,.1);box-shadow:0 0 12px rgba(0,200,255,.3); }

/* ── Boost item card ── */
.v7-boost-card {
  background:linear-gradient(135deg,rgba(255,140,0,.08),rgba(255,68,68,.04));
  border:1px solid rgba(255,140,0,.25);border-radius:14px;
  padding:16px;margin-bottom:10px;
  display:flex;align-items:center;gap:14px;cursor:pointer;
  transition:all .2s;
}
.v7-boost-card:active { transform:scale(.98); }

/* ── Burn counter ── */
.v7-burn-live {
  background:linear-gradient(135deg,rgba(255,68,68,.1),rgba(255,140,0,.06));
  border:1px solid rgba(255,68,68,.25);border-radius:14px;
  padding:14px 16px;margin-bottom:12px;
  display:flex;align-items:center;gap:14px;
}


/* ─── style block (original order) ─── */


/* ═══ LUDO ARENA PREMIUM — Scoped Styles ═══ */

#sub-ludo{
  --bg:#03080F;--surface:#060F1C;--card:#0A1628;--card2:#0E1E36;
  --border:rgba(0,220,255,.1);--border2:rgba(0,220,255,.22);
  --cyan:#00DCFF;--cyan2:#0090CC;--gold:#FFD700;--gold2:#FF9500;
  --red:#FF3B5C;--green:#00FF94;--blue:#00AAFF;--yellow:#FFE600;
  --purple:#9D4FFF;--text:#EEF6FF;--muted:rgba(220,240,255,.42);
  --r:12px;--r2:18px;--r3:24px;
  --glow-c:0 0 24px rgba(0,220,255,.35);
  --glow-g:0 0 28px rgba(255,215,0,.4);
  --glow-r:0 0 22px rgba(255,59,92,.4);
  --font-head:'Orbitron',monospace;
  --font-body:'Rajdhani',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  /* Player colors */
  --p0:#2255FF;--p1:#FF2244;--p2:#22CC44;--p3:#FFCC00;
  --p0b:rgba(34,85,255,.18);--p1b:rgba(255,34,68,.16);
  --p2b:rgba(34,204,68,.14);--p3b:rgba(255,204,0,.15);
}


/* ── Scrollbars ── */

/* ── Shell ── */
#ludo-app-inner{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;}
/* ── Screen transitions ── */
#sub-ludo .screen{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;transform:translateY(10px);overflow:hidden;}
#sub-ludo .screen.active{opacity:1;pointer-events:auto;transform:translateY(0);z-index:10;}
/* ══════════════ BACKGROUND ══════════════ */

@keyframes ludoBgFloat {
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(12px,18px) scale(1.06)}}
/* ══════════════ TOAST ══════════════ */


/* ══════════════ LOBBY SCREEN ══════════════ */
#screen-lobby{background:var(--bg);display:flex;flex-direction:column;}
.lobby-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;flex-shrink:0;
  background:rgba(6,15,28,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);position:relative;z-index:2;}
.lobby-back{width:38px;height:38px;border-radius:10px;border:1px solid rgba(0,220,255,.2);
  background:rgba(0,220,255,.06);color:var(--cyan);font-size:18px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;}
.lobby-back:active{transform:scale(.9);}
.lobby-title-wrap{display:flex;align-items:center;gap:8px;}
.lobby-title{font-family:var(--font-head);font-size:17px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lobby-coin-pill{display:flex;align-items:center;gap:5px;
  background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.25);
  border-radius:20px;padding:6px 12px;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--gold);}
.lobby-body{flex:1;overflow-y:auto;padding:16px;}
/* Hero card */
.lobby-hero{
  background:linear-gradient(135deg,rgba(0,100,200,.15),rgba(60,0,120,.12));
  border:1px solid rgba(0,220,255,.18);border-radius:var(--r3);
  padding:22px;margin-bottom:20px;text-align:center;position:relative;overflow:hidden;}
.lobby-hero::before{content:'';position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:200px;height:200px;background:radial-gradient(circle,rgba(0,220,255,.08),transparent 70%);}
.hero-dice{font-size:52px;line-height:1;margin-bottom:8px;
  animation:diceSpin 4s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,215,0,.5));}
@keyframes diceSpin{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
.hero-title{font-family:var(--font-head);font-size:22px;font-weight:900;letter-spacing:2px;
  background:linear-gradient(135deg,var(--gold),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-sub{font-size:13px;color:var(--muted);margin-top:6px;font-family:var(--font-mono);}
/* Mode selector */
.section-label{font-family:var(--font-mono);font-size:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:2.5px;margin-bottom:10px;}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.mode-card{
  padding:16px 12px;background:var(--card);border:2px solid var(--border);
  border-radius:var(--r2);cursor:pointer;text-align:center;transition:all .22s;position:relative;}
.mode-card.active{border-color:var(--cyan);background:rgba(0,220,255,.07);
  box-shadow:0 0 20px rgba(0,220,255,.15);}
.mode-card-icon{font-size:26px;margin-bottom:6px;}
.mode-card-name{font-family:var(--font-head);font-size:11px;font-weight:700;color:#fff;}
.mode-card-sub{font-size:11px;color:var(--muted);margin-top:3px;}
/* Stake */
.stake-row{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;padding-bottom:2px;}
.stake-btn{flex-shrink:0;padding:8px 16px;border-radius:20px;border:1px solid var(--border);
  background:var(--card);color:var(--muted);font-family:var(--font-mono);font-size:12px;
  cursor:pointer;transition:all .2s;white-space:nowrap;}
.stake-btn.active{border-color:var(--gold);background:rgba(255,215,0,.1);color:var(--gold);}
/* Start btn */
.start-btn{
  width:100%;padding:16px;border:none;border-radius:var(--r2);
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#000;font-family:var(--font-head);font-size:14px;font-weight:700;letter-spacing:1px;
  cursor:pointer;transition:all .22s;box-shadow:0 6px 24px rgba(255,215,0,.3);
  display:flex;align-items:center;justify-content:center;gap:10px;}
.start-btn:active{transform:scale(.97);}
/* Stats row */
.stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:12px;text-align:center;}
.stat-val{font-family:var(--font-mono);font-size:18px;font-weight:700;}
.stat-lbl{font-size:10px;color:var(--muted);margin-top:3px;}
/* ══════════════ GAME SCREEN ══════════════ */
#screen-game{background:var(--bg);display:flex;flex-direction:column;}
.game-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 10px;flex-shrink:0;
  background:rgba(6,15,28,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);z-index:2;}
.game-back{width:36px;height:36px;border-radius:9px;border:1px solid rgba(0,220,255,.2);
  background:rgba(0,220,255,.06);color:var(--cyan);font-size:16px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;}
.game-back:active{transform:scale(.9);}
.game-title{font-family:var(--font-head);font-size:14px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.game-coins{display:flex;align-items:center;gap:5px;
  background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.2);
  border-radius:16px;padding:5px 10px;font-family:var(--font-mono);font-size:11px;color:var(--gold);}
/* Board area */
.board-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:8px;position:relative;overflow:hidden;min-height:0;}
#ludo-canvas{
  border-radius:14px;
  box-shadow:0 0 40px rgba(0,0,0,.6),0 0 60px rgba(0,100,200,.1);
  display:block;touch-action:none;}
/* Player cards */
.players-strip{
  padding:8px 12px 6px;flex-shrink:0;
  display:flex;gap:8px;overflow-x:auto;}
.player-card{
  flex:0 0 auto;min-width:140px;padding:10px 12px;
  border-radius:var(--r);border:2px solid var(--border);
  background:var(--card);transition:all .25s;position:relative;overflow:hidden;}
.player-card.active{box-shadow:0 0 18px rgba(0,220,255,.2);}
.player-card::before{content:'';position:absolute;inset:0;opacity:0;
  background:linear-gradient(135deg,rgba(0,220,255,.06),transparent);
  transition:opacity .25s;}
.player-card.active::before{opacity:1;}
.pc-top{display:flex;align-items:center;gap:8px;}
.pc-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;font-family:var(--font-head);}
.pc-name{font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:.5px;}
.pc-you{font-size:9px;color:var(--muted);margin-top:1px;font-family:var(--font-mono);}
.pc-progress{margin-top:8px;display:flex;gap:5px;}
.pc-token{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);transition:all .3s;}
.pc-token.done{background:var(--green);border-color:var(--green);
  box-shadow:0 0 8px rgba(0,255,148,.6);}
.pc-active-tag{position:absolute;top:6px;right:8px;
  background:var(--gold);color:#000;font-family:var(--font-mono);font-size:8px;font-weight:700;
  padding:2px 6px;border-radius:6px;letter-spacing:.5px;}
/* Turn timer bar */
.turn-timer-bar{height:3px;background:rgba(255,255,255,.08);flex-shrink:0;position:relative;}
.turn-timer-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold));
  transition:width .4s linear;border-radius:2px;}
/* Dice area */
.dice-area{
  padding:10px 14px 8px;flex-shrink:0;
  display:flex;align-items:center;gap:12px;
  background:rgba(6,15,28,.6);}
.dice-box{
  width:64px;height:64px;border-radius:14px;
  background:var(--card2);border:2px solid var(--border2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .3s;position:relative;overflow:hidden;}
.dice-box.rolling{animation:diceShake .15s ease-in-out infinite;}
.dice-box.landed{border-color:var(--gold);box-shadow:var(--glow-g);}
@keyframes diceShake{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.dice-face{font-size:30px;line-height:1;transition:all .1s;}
.dice-num{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:1px;}
.dice-right{flex:1;}
.status-text{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--text);
  line-height:1.3;margin-bottom:4px;}
.turn-label{font-family:var(--font-mono);font-size:10px;color:var(--muted);}
/* Roll button */
.roll-btn{
  padding:0 20px;height:52px;border:none;border-radius:14px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#000;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.5px;
  cursor:pointer;transition:all .22s;box-shadow:0 4px 20px rgba(255,165,0,.35);
  display:flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap;}
.roll-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
.roll-btn:not(:disabled):active{transform:scale(.95);}
.roll-btn.bonus{background:linear-gradient(135deg,#ff6b35,#ff3b5c);box-shadow:var(--glow-r);}
/* Move tokens row */
.move-tokens-row{
  padding:0 12px 8px;flex-shrink:0;
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:36px;}
.move-token-btn{
  padding:7px 14px;border-radius:10px;border:none;
  font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;
  transition:all .2s;animation:popIn .2s ease;}
@keyframes popIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.move-token-btn:active{transform:scale(.92);}
/* Bottom bar */
.bottom-bar{padding:8px 14px 12px;flex-shrink:0;
  display:flex;align-items:center;gap:8px;background:rgba(6,15,28,.6);}
.quit-btn{padding:9px 16px;border-radius:10px;border:1px solid rgba(255,59,92,.3);
  background:rgba(255,59,92,.07);color:#FF8899;font-family:var(--font-mono);
  font-size:11px;cursor:pointer;transition:all .2s;}
.quit-btn:active{transform:scale(.95);}
.balance-widget{flex:1;display:flex;align-items:center;gap:8px;
  background:rgba(0,220,255,.05);border:1px solid var(--border);
  border-radius:10px;padding:8px 12px;}
.balance-icon{font-size:16px;}
.balance-info{flex:1;}
.balance-val{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--gold);}
.balance-lbl{font-size:9px;color:var(--muted);}
/* ══════════════ WIN OVERLAY ══════════════ */
.win-overlay{
  position:absolute;inset:0;background:rgba(3,8,15,.92);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:100;opacity:0;pointer-events:none;transition:all .4s ease;padding:24px;}
.win-overlay.show{opacity:1;pointer-events:auto;}
.win-emoji{font-size:80px;margin-bottom:16px;animation:winBounce .6s .3s ease both;}
@keyframes winBounce{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.win-title{font-family:var(--font-head);font-size:28px;font-weight:900;letter-spacing:2px;
  background:linear-gradient(135deg,var(--gold),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;text-align:center;}
.win-sub{font-size:15px;color:var(--muted);margin-bottom:20px;text-align:center;}
.win-reward{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--green);
  margin-bottom:28px;padding:12px 24px;background:rgba(0,255,148,.08);
  border:1px solid rgba(0,255,148,.25);border-radius:12px;}
.win-btns{display:flex;gap:10px;width:100%;max-width:280px;}
.win-btn{flex:1;padding:14px;border:none;border-radius:12px;font-family:var(--font-head);
  font-size:12px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:all .2s;}
.win-btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000;}
.win-btn.secondary{background:var(--card);border:1px solid var(--border);color:var(--text);}
.win-btn:active{transform:scale(.95);}
/* ══════════════ CONFETTI ══════════════ */
/* Single canonical definition — box-shadow merged from former duplicate block */
.confetti-piece{position:fixed;pointer-events:none;z-index:200;
  box-shadow:0 0 6px currentColor;
  animation:confettiFall 2.5s ease-in forwards;}
@keyframes confettiFall{
  0%  {transform:translateY(-20px) translateX(0) rotate(0deg);opacity:1}
  25% {transform:translateY(25vh) translateX(20px) rotate(180deg);opacity:1}
  50% {transform:translateY(55vh) translateX(-15px) rotate(380deg);opacity:0.8}
  100%{transform:translateY(115vh) translateX(10px) rotate(720deg);opacity:0}}
/* ══════════════ GLOW PARTICLES ══════════════ */
.particle{position:absolute;pointer-events:none;border-radius:50%;
  animation:particleFloat 1.5s ease-out forwards;z-index:50;}
@keyframes particleFloat{
  0%{transform:translate(0,0) scale(1);opacity:.9}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
/* ══════════════ SAFE TILE PULSE ══════════════ */
@keyframes safePulse{0%,100%{opacity:.6}50%{opacity:1}}
/* ══════════════ RESPONSIVE ══════════════ */
@media(max-height:680px){
  .lobby-hero{padding:14px;}
  .hero-dice{font-size:38px;}
  .hero-title{font-size:17px;}
}

/* ─── Ludo sub-screen container ─── */
#sub-ludo { position:fixed;inset:0;z-index:50;overflow:hidden; }
#ludo-app-inner { position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden; }


/* ─── style block (original order) ─── */


/* ══ LUDO STAR LOBBY PREMIUM ══ */
.ls-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 8px;
  background:linear-gradient(180deg,rgba(4,10,28,0.98),rgba(4,10,28,0.85));
  border-bottom:1px solid rgba(255,215,0,0.12);
  flex-shrink:0;
}
.ls-back {
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;color:#fff;
  transition:all .2s;
}
.ls-back:active{transform:scale(.9);}
.ls-title-pill {
  font-family:'Orbitron',monospace;font-size:16px;font-weight:900;
  background:linear-gradient(135deg,#FFD700,#FFA500,#FFD700);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:1px;
}
.ls-coin-pill {
  display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,0.4);border:1px solid rgba(255,215,0,0.3);
  border-radius:20px;padding:5px 12px;
  font-family:'Orbitron',monospace;font-size:13px;font-weight:700;color:#FFD700;
}
.ls-coin-plus {
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#22CC44,#009933);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;color:#fff;cursor:pointer;
  box-shadow:0 0 10px rgba(34,204,68,0.4);
}

/* Player HUD Cards */
.ls-hud-row {
  display:flex;align-items:stretch;gap:8px;
  padding:10px 12px 6px;flex-shrink:0;
}
.ls-player-card {
  flex:1;border-radius:14px;padding:10px 10px;
  display:flex;flex-direction:column;gap:4px;
  position:relative;overflow:hidden;
}
.ls-player-card.blue-card {
  background:linear-gradient(135deg,rgba(34,85,255,0.15),rgba(0,100,200,0.08));
  border:1.5px solid rgba(34,85,255,0.5);
  box-shadow:0 0 20px rgba(34,85,255,0.2),inset 0 1px 0 rgba(100,150,255,0.1);
}
.ls-player-card.red-card {
  background:linear-gradient(135deg,rgba(255,34,68,0.15),rgba(200,0,50,0.08));
  border:1.5px solid rgba(255,34,68,0.5);
  box-shadow:0 0 20px rgba(255,34,68,0.2),inset 0 1px 0 rgba(255,100,120,0.1);
}
.ls-avatar-row {display:flex;align-items:center;gap:8px;}
.ls-avatar {
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  flex-shrink:0;border:2px solid currentColor;
  background:rgba(0,0,0,0.3);
}
.ls-username {
  font-family:'Orbitron',monospace;font-size:9px;font-weight:700;
  letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ls-userstats {
  display:flex;align-items:center;gap:4px;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:rgba(220,240,255,0.55);margin-top:2px;
}

/* Center Prize Panel */
.ls-prize-center {
  flex-shrink:0;min-width:90px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:8px 6px;
  background:rgba(0,0,0,0.3);
  border-radius:14px;border:1px solid rgba(255,215,0,0.2);
}
.ls-prize-label {
  font-family:'Rajdhani',sans-serif;font-size:8px;font-weight:600;
  color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:2px;
}
.ls-prize-amount {
  font-family:'Orbitron',monospace;font-size:20px;font-weight:900;
  color:#FFD700;text-shadow:0 0 20px rgba(255,215,0,0.5);
  display:flex;align-items:center;gap:4px;
  animation:prizeFloat 3s ease-in-out infinite;
}
@keyframes prizeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ls-prize-entry {
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:rgba(255,255,255,0.4);
}
.ls-gift-icons {display:flex;gap:4px;font-size:12px;}

/* Mode/Stake selectors */
.ls-section-label {
  font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;
  color:rgba(200,220,255,0.45);letter-spacing:3px;text-transform:uppercase;
  padding:8px 14px 4px;flex-shrink:0;
}
.ls-mode-grid {
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:0 12px;flex-shrink:0;
}
.ls-mode-card {
  border-radius:12px;padding:10px 6px;text-align:center;cursor:pointer;
  background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.1);
  transition:all .2s;
}
.ls-mode-card.active {
  background:rgba(34,85,255,0.2);border-color:rgba(34,85,255,0.6);
  box-shadow:0 0 16px rgba(34,85,255,0.3);
}
.ls-mode-card:active{transform:scale(.94);}
.ls-mode-icon {font-size:20px;margin-bottom:3px;}
.ls-mode-name {font-family:'Orbitron',monospace;font-size:8px;font-weight:700;color:#fff;letter-spacing:.5px;}
.ls-mode-sub {font-size:8px;color:rgba(200,220,255,0.4);font-family:'JetBrains Mono',monospace;margin-top:1px;}

.ls-stake-row {
  display:flex;gap:6px;padding:0 12px;overflow-x:auto;flex-shrink:0;
  scrollbar-width:none;
}
.ls-stake-row::-webkit-scrollbar{display:none}
.ls-stake-btn {
  flex-shrink:0;padding:7px 14px;border-radius:10px;
  background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.1);
  font-family:'Orbitron',monospace;font-size:10px;font-weight:700;color:rgba(255,255,255,0.6);
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.ls-stake-btn.active {
  background:rgba(255,215,0,0.15);border-color:rgba(255,215,0,0.6);
  color:#FFD700;box-shadow:0 0 12px rgba(255,215,0,0.25);
}
.ls-stake-btn:active{transform:scale(.94);}

/* Find Match button */
.ls-start-btn {
  margin:10px 12px 0;padding:16px;border:none;border-radius:16px;
  background:linear-gradient(135deg,#2255FF,#0033DD);color:#fff;
  font-family:'Orbitron',monospace;font-size:16px;font-weight:900;
  letter-spacing:3px;cursor:pointer;transition:all .2s;
  box-shadow:0 6px 30px rgba(34,85,255,0.5),0 0 0 1px rgba(100,150,255,0.2);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;
  flex-shrink:0;
}
.ls-start-btn::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  transform:translateX(-100%);animation:pgRollShimmer 2s ease-in-out infinite;
}
.ls-start-btn:not(:disabled):active{transform:scale(.97);}
.ls-start-btn:disabled{opacity:0.45;cursor:not-allowed;}
.ls-start-sub {
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:9px;
  color:rgba(255,255,255,0.3);padding:4px 0 0;flex-shrink:0;
}

/* Stats row */
.ls-stats-row {
  display:flex;gap:8px;padding:8px 12px 4px;flex-shrink:0;
}
.ls-stat-card {
  flex:1;border-radius:12px;padding:10px 8px;text-align:center;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
}
.ls-stat-val {font-family:'Orbitron',monospace;font-size:18px;font-weight:900;}
.ls-stat-lbl {font-size:9px;color:rgba(200,220,255,0.4);font-family:'JetBrains Mono',monospace;margin-top:2px;text-transform:uppercase;letter-spacing:1px;}

/* Turn indicator */
.ls-turn-indicator {
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:5px 14px;margin:0 12px;border-radius:30px;
  background:rgba(34,85,255,0.15);border:1px solid rgba(34,85,255,0.4);
  flex-shrink:0;animation:turnPulse 2s ease-in-out infinite;
}
/* turnPulse defined later with enhanced glow version */
.ls-turn-dot {width:8px;height:8px;border-radius:50%;background:#00DCFF;animation:blink 1s ease infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.ls-turn-text {font-family:'Orbitron',monospace;font-size:10px;font-weight:700;color:#00DCFF;letter-spacing:2px;}


/* ─── style block (original order) ─── */


    @keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.4)} }
    @keyframes winnerSlideIn {
      from { opacity:0; transform:translateX(-18px); }
      to   { opacity:1; transform:translateX(0); }
    }
    .wf-row {
      display:flex; align-items:center; gap:8px;
      padding:7px 12px;
      border-bottom:1px solid rgba(255,255,255,0.05);
      animation:winnerSlideIn 0.35s ease both;
      transition:background 0.2s;
    }
    .wf-row:last-child { border-bottom:none; }
    .wf-row:hover { background:rgba(0,255,148,0.04); }
    .wf-bullet {
      width:6px; height:6px; border-radius:50%; flex-shrink:0;
      box-shadow:0 0 6px currentColor;
    }
    .wf-avatar {
      font-size:14px; flex-shrink:0; line-height:1;
    }
    .wf-name {
      font-family:'Orbitron',sans-serif; font-size:9.5px; font-weight:700;
      flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .wf-prize {
      font-family:'Orbitron',sans-serif; font-size:9px; font-weight:900;
      color:#FFD700; white-space:nowrap;
      text-shadow:0 0 8px rgba(255,215,0,0.5);
    }
    .wf-time {
      font-family:'Inter',ui-monospace,monospace; font-size:8px;
      color:rgba(255,255,255,0.3); white-space:nowrap; flex-shrink:0;
    }
    .wf-badge {
      font-size:8px; padding:1px 5px; border-radius:6px;
      font-family:'Orbitron',sans-serif; font-weight:700;
      flex-shrink:0; letter-spacing:0.5px;
    }
    

/* ─── style block (original order) ─── */


/* ═══ LUDO STAR GAME SCREEN — PIXEL-PERFECT RECREATION ═══ */
/* Note: Inter loaded via Google Fonts in index.html — @import removed to avoid duplicate load */

#screen-game {
  background: linear-gradient(180deg, #0a1628 0%, #050c1a 100%);
  display: flex; flex-direction: column; overflow: hidden;
  position: relative;
}

/* ── TOP HEADER BAR ── Ludo Star style */
.pg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: rgba(5,12,26,0.98);
  flex-shrink: 0; position: relative; z-index: 5;
}
.pg-back-btn {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0;
  transition: all .2s;
}
.pg-back-btn:active { transform: scale(.9); }
.pg-title-area { display: flex; align-items: center; gap: 6px; }
.pg-title {
  font-family: 'Orbitron', monospace; font-size: 17px; font-weight: 900; letter-spacing: 3px;
  background: linear-gradient(135deg, #FFD700, #FFB300);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.pg-coins-pill {
  background: linear-gradient(135deg, #7A5200, #5A3C00);
  border: 1.5px solid #C98500; border-radius: 20px;
  padding: 5px 14px 5px 10px; display: flex; align-items: center; gap: 5px;
  font-family: 'Orbitron', monospace; font-size: 14px; font-weight: 700; color: #FFD700;
}
.pg-coins-plus {
  width: 22px; height: 22px; background: linear-gradient(135deg, #22CC44, #009933);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,200,50,0.4);
}

/* ── PRIZE POOL BAR — exactly as Ludo Star screenshot ── */
.pg-prize-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: rgba(6,14,32,0.9);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0; gap: 8px;
}
.pg-player-info {
  display: flex; align-items: center; gap: 8px; flex: 1;
}
.pg-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2.5px solid; object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  overflow: hidden; background: rgba(0,0,0,0.4);
  box-shadow: 0 0 12px rgba(0,0,0,0.6);
}
.pg-avatar-human { border-color: #2255FF; box-shadow: 0 0 14px rgba(34,85,255,0.5); }
.pg-avatar-ai { border-color: #FF2244; box-shadow: 0 0 14px rgba(255,34,68,0.5); }
.pg-player-details { display: flex; flex-direction: column; gap: 3px; }
.pg-player-name { font-family: 'Orbitron', monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; }
.pg-player-stats { display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.75); }
.pg-stat-icon { font-size: 11px; }
.pg-center-prize { text-align: center; flex-shrink: 0; min-width: 100px; }
.pg-prize-label {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.6);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px;
}
.pg-prize-pool-box {
  background: linear-gradient(135deg, rgba(120,60,0,0.5), rgba(80,30,0,0.5));
  border: 1.5px solid rgba(200,130,0,0.6); border-radius: 12px;
  padding: 6px 14px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 0 16px rgba(200,130,0,0.2);
}
.pg-prize-gifts { font-size: 18px; }
.pg-prize-amount {
  font-family: 'Orbitron', monospace; font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #FFD700, #FF9500);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1;
}
.pg-entry { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; }

/* ── BOARD SECTION ── */
.pg-board-section {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0; position: relative;
  background: linear-gradient(180deg, rgba(4,9,20,0.6) 0%, rgba(2,6,16,0.8) 100%);
}
#ludo-canvas {
  border-radius: 18px;
  box-shadow:
    0 0 0 5px #C8860A,
    0 0 0 9px rgba(200,134,10,0.35),
    0 0 60px rgba(200,134,10,0.25),
    0 12px 50px rgba(0,0,0,0.9);
  display: block; touch-action: none;
  flex-shrink: 0;
  filter: brightness(1.15) saturate(1.35) contrast(1.06);
}

/* Hide old players row - replaced by outside-dice-row */
.pg-players-row { display: none !important; }

/* ── SIDE ACTION BUTTONS (Emoji, Chat, History, Rules) ── */
.pg-side-left {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; padding: 0;
  z-index: 5;
}
.pg-side-right {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; padding: 0;
  z-index: 5;
}
.pg-side-btn {
  width: 54px; min-height: 54px; border-radius: 14px;
  background: linear-gradient(145deg, rgba(12,24,50,0.97), rgba(8,16,36,0.97));
  border: 1.5px solid rgba(255,255,255,0.13);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; transition: all .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.pg-side-btn:active { transform: scale(.9); }
.pg-side-btn-icon { font-size: 22px; line-height: 1; }
.pg-side-btn-label {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.8);
  line-height: 1;
}

/* ── PLAYERS ROW with YOUR TURN label ── */
.pg-pr-wrapper {
  position: relative; display: flex; align-items: center;
  flex-shrink: 0;
}
.pg-players-row {
  display: flex; align-items: center; width: 100%;
  padding: 6px 12px; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(5,12,26,0.85);
}
.pg-pr-player {
  flex: 1; display: flex; align-items: center; gap: 8px; padding: 2px 4px;
}
.pg-pr-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2.5px solid;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  flex-shrink: 0; overflow: hidden; background: rgba(0,0,0,0.4);
  position: relative;
}
.pg-pr-avatar::after {
  content: ''; position: absolute; bottom: 1px; right: 1px;
  width: 8px; height: 8px; border-radius: 50%; background: #22DD44;
  border: 1.5px solid #050C1A;
}
.pg-pr-info { flex: 1; min-width: 0; }
.pg-pr-name { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; }
.pg-pr-stats {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.6);
}
.pg-pr-divider-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0; min-width: 70px;
}
.pg-turn-label {
  background: linear-gradient(135deg, #00DCFF, #0090CC);
  color: #000; font-family: 'Orbitron', monospace; font-size: 7.5px; font-weight: 900;
  padding: 4px 10px; border-radius: 10px; letter-spacing: 1px; white-space: nowrap;
  box-shadow: 0 0 16px rgba(0,200,255,0.6);
  animation: turnPulse 1.5s ease-in-out infinite;
}
@keyframes turnPulse { 0%,100%{box-shadow:0 0 10px rgba(0,200,255,0.4)} 50%{box-shadow:0 0 24px rgba(0,200,255,0.9)} }
.pg-pr-dice-center {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
/* Roll arrows <<  >> */
.pg-roll-arrows { display: flex; align-items: center; gap: 4px; color: rgba(0,200,255,0.6); font-size: 14px; font-weight: 900; }

/* ── DICE + ROLL COMBINED SECTION ── */
.pg-dice-roll-section {
  flex-shrink: 0; padding: 5px 12px 6px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(5,12,26,0.95);
  border-top: 1px solid rgba(0,200,255,0.1);
}

/* 3D Dice - exactly like Ludo Star: white rounded square with dots */
.pg-dice-3d {
  width: 64px; height: 64px; border-radius: 14px;
  background: linear-gradient(145deg, #f8f8f8, #dddddd);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.7),
    0 0 20px rgba(0,180,255,0.25),
    inset 0 2px 4px rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; position: relative; flex-shrink: 0;
}
.pg-dice-3d:hover { transform: scale(1.05) rotate(2deg); }
.pg-dice-3d.rolling { animation: pgDiceShake .12s ease-in-out infinite; }
@keyframes pgDiceShake { 0%,100%{transform: rotate(-14deg) scale(1.08)} 50%{transform: rotate(14deg) scale(1.08)} }
.pg-dice-glow {
  position: absolute; inset: -3px; border-radius: 17px;
  background: transparent; border: 2px solid rgba(0,200,255,0.6);
  animation: pgDiceGlow 2s ease-in-out infinite; pointer-events: none;
}
@keyframes pgDiceGlow { 0%,100%{box-shadow:0 0 8px rgba(0,200,255,0.3),0 0 0 0 rgba(0,200,255,0.1)} 50%{box-shadow:0 0 20px rgba(0,200,255,0.7),0 0 0 4px rgba(0,200,255,0.1)} }

/* Big ROLL DICE button */
.pg-roll-btn-wrap { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pg-roll-btn {
  width: 100%; padding: 16px 10px; border: none; border-radius: 16px;
  background: linear-gradient(135deg, #1A44EE, #0520BB);
  color: #fff; font-family: 'Orbitron', monospace; font-size: 22px; font-weight: 900;
  letter-spacing: 4px; cursor: pointer; transition: all .2s;
  box-shadow: 0 4px 24px rgba(20,50,220,0.7), 0 0 0 2px rgba(80,120,255,0.3);
  position: relative; overflow: hidden;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.pg-roll-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  transform: translateX(-100%); animation: pgRollShimmer 2.5s ease-in-out infinite;
}
@keyframes pgRollShimmer { 0%{transform:translateX(-100%)} 60%{transform:translateX(100%)} 100%{transform:translateX(100%)} }
.pg-roll-btn:not(:disabled):active { transform: scale(.96); }
.pg-roll-btn:disabled { opacity: 0.42; cursor: not-allowed; }
.pg-roll-btn:disabled::before { display: none; }
.pg-roll-sub { text-align: center; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.35); }

/* DRT TOKEN side badge next to roll */
.pg-roll-drt-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: rgba(100,60,0,0.3); border: 1.5px solid rgba(200,140,0,0.35);
  border-radius: 14px; padding: 8px 10px; min-width: 72px; flex-shrink: 0;
}
.pg-drt-badge-icon { font-size: 20px; }
.pg-drt-badge-label { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 800; color: rgba(255,200,100,0.7); letter-spacing: 0.5px; text-transform: uppercase; }
.pg-drt-badge-val { font-family: 'Orbitron', monospace; font-size: 11px; font-weight: 700; color: #00DCFF; }

/* Energy row under dice */
.pg-energy-row {
  display: flex; align-items: center; gap: 4px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; color: #fff;
}
.pg-energy-icon { color: #FFD700; font-size: 13px; }
.pg-energy-plus {
  width: 18px; height: 18px; background: linear-gradient(135deg, #22CC44, #009933);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,180,50,0.4);
}

/* ── BOTTOM STATUS BAR ── */
.pg-bottom-status {
  display: flex; align-items: stretch; justify-content: space-between;
  padding: 6px 10px 8px; flex-shrink: 0;
  background: rgba(4,9,20,0.95);
  gap: 6px;
}
.pg-win-streak {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, rgba(180,60,0,0.25), rgba(120,30,0,0.2));
  border: 1.5px solid rgba(255,100,0,0.35);
  border-radius: 10px; padding: 5px 10px;
}
.pg-ws-icon { font-size: 14px; }
.pg-ws-text { font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 800; color: rgba(255,190,80,0.7); text-transform: uppercase; letter-spacing: 0.5px; }
.pg-ws-val { font-family: 'Orbitron', monospace; font-size: 14px; font-weight: 900; color: #FF8800; line-height: 1; }
.pg-safe-move {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(20,40,100,0.4), rgba(10,20,60,0.3));
  border: 1.5px solid rgba(50,100,255,0.35);
  border-radius: 14px; padding: 8px 12px; cursor: pointer; flex: 1;
}
.pg-sm-icon { font-size: 20px; }
.pg-sm-text {}
.pg-sm-title { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800; color: #fff; }
.pg-sm-sub { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.45); }
.pg-drt-token {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(100,60,0,0.3), rgba(60,30,0,0.2));
  border: 1.5px solid rgba(200,140,0,0.3);
  border-radius: 14px; padding: 8px 12px;
}
.pg-drt-icon { font-size: 20px; }
.pg-drt-text {}
.pg-drt-label { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 800; color: rgba(255,200,80,0.7); text-transform: uppercase; letter-spacing: 0.5px; }
.pg-drt-val { font-family: 'Orbitron', monospace; font-size: 11px; font-weight: 700; color: #00DCFF; }

/* ── MOVE TOKEN BUTTONS ── */
.pg-move-tokens-row {
  padding: 0 10px 4px; flex-shrink: 0;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 32px;
}
.pg-move-token-btn {
  padding: 6px 14px; border-radius: 10px; border: none;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all .2s; animation: pgPopIn .2s ease;
}
@keyframes pgPopIn { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
.pg-move-token-btn:active { transform: scale(.92); }

/* ── WIN OVERLAY ── */
.pg-win-overlay {
  position: absolute; inset: 0; background: rgba(3,8,15,0.94); backdrop-filter: blur(16px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 100; opacity: 0; pointer-events: none; transition: all .4s ease; padding: 24px;
}
.pg-win-overlay.show { opacity: 1; pointer-events: auto; }
.pg-win-emoji { font-size: 80px; margin-bottom: 16px; animation: pgWinBounce .6s .3s ease both; }
@keyframes pgWinBounce { from{transform:scale(0) rotate(-20deg)} to{transform:scale(1) rotate(0)} }
.pg-win-title { font-family: 'Orbitron', monospace; font-size: 28px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(135deg, #FFD700, #00DCFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 8px; text-align: center; }
.pg-win-sub { font-size: 15px; color: rgba(220,240,255,0.42); margin-bottom: 20px; text-align: center; }
.pg-win-reward { font-family: 'Orbitron', monospace; font-size: 22px; font-weight: 700; color: #00FF94;
  margin-bottom: 28px; padding: 12px 24px; background: rgba(0,255,148,0.08);
  border: 1px solid rgba(0,255,148,0.25); border-radius: 12px; }
.pg-win-btns { display: flex; gap: 10px; width: 100%; max-width: 280px; }
.pg-win-btn { flex: 1; padding: 14px; border: none; border-radius: 14px; font-family: 'Orbitron', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; cursor: pointer; transition: all .2s; }
.pg-win-btn.primary { background: linear-gradient(135deg, #FFD700, #FF9500); color: #000; }
.pg-win-btn.secondary { background: rgba(10,22,40,1); border: 1px solid rgba(0,220,255,0.2); color: #EEF6FF; }
.pg-win-btn:active { transform: scale(.95); }

/* ══ LUDO STAR BOTTOM CONTROL — Player cards + Dice + Roll ══ */
.ls-bottom-control {
  flex-shrink: 0;
  background: rgba(4, 10, 22, 0.98);
  border-top: 1px solid rgba(0,180,255,0.15);
  padding: 8px 10px 6px;
  display: flex; flex-direction: column; gap: 6px;
}

/* ── Top row: players + dice center ── */
.ls-control-top {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}

/* Player cards */
.ls-ctrl-player {
  flex: 1; display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 7px 9px;
  min-width: 0;
}
.ls-ctrl-left { flex-direction: row; }
.ls-ctrl-right { flex-direction: row-reverse; }
.ls-ctrl-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2.5px solid; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: rgba(0,0,0,0.35);
  position: relative;
}
.ls-ctrl-avatar::after {
  content:''; position: absolute; bottom: 0px; right: 0px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #22DD44; border: 1.5px solid #04091a;
}
.ls-ctrl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ls-ctrl-name {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 900;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-ctrl-stats {
  display: flex; align-items: center; gap: 4px;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.65);
}

/* Center: YOUR TURN pill + dice + arrows + energy */
.ls-ctrl-center {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0;
}

/* YOUR TURN cyan pill — exactly like screenshot */
.ls-your-turn-pill {
  background: linear-gradient(135deg, #00DCFF, #0099CC);
  color: #000; font-family: 'Orbitron', monospace;
  font-size: 8px; font-weight: 900; letter-spacing: 1.5px;
  padding: 4px 12px; border-radius: 20px;
  box-shadow: 0 0 16px rgba(0,220,255,0.7), 0 2px 8px rgba(0,0,0,0.5);
  white-space: nowrap; animation: lsTurnPulse 1.5s ease-in-out infinite;
}
@keyframes lsTurnPulse {
  0%,100%{box-shadow:0 0 10px rgba(0,220,255,0.5),0 2px 8px rgba(0,0,0,0.4)}
  50%{box-shadow:0 0 28px rgba(0,220,255,1),0 2px 8px rgba(0,0,0,0.4)}
}

/* Dice + arrows row */
.ls-dice-arrows-row {
  display: flex; align-items: center; gap: 6px;
}
.ls-arrow {
  font-size: 18px; font-weight: 900; color: rgba(0,200,255,0.7);
  line-height: 1; user-select: none;
}

/* The actual dice — white glossy square like screenshot */
.ls-dice-wrap {
  width: 58px; height: 58px; border-radius: 14px;
  background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 50%, #e0e0e0 100%);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.75),
    0 0 22px rgba(0,190,255,0.4),
    inset 0 3px 5px rgba(255,255,255,1),
    inset 0 -3px 5px rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; transition: transform .15s;
  animation: lsDiceGlowPulse 2s ease-in-out infinite;
}
@keyframes lsDiceGlowPulse {
  0%,100%{box-shadow:0 6px 18px rgba(0,0,0,0.75),0 0 16px rgba(0,190,255,0.35),inset 0 3px 5px #fff,inset 0 -3px 5px rgba(0,0,0,0.12);}
  50%{box-shadow:0 6px 18px rgba(0,0,0,0.75),0 0 32px rgba(0,190,255,0.8),inset 0 3px 5px #fff,inset 0 -3px 5px rgba(0,0,0,0.12);}
}
.ls-dice-wrap:active { transform: scale(0.88) rotate(6deg); }
.ls-dice-wrap.rolling { animation: lsDiceShake 0.1s ease-in-out infinite; }
@keyframes lsDiceShake {
  0%,100%{transform:rotate(-12deg) scale(1.05)} 50%{transform:rotate(12deg) scale(1.05)}
}
/* Cyan glow ring around dice */
.ls-dice-glow-ring {
  position: absolute; inset: -4px; border-radius: 18px;
  border: 2px solid rgba(0,210,255,0.55);
  box-shadow: 0 0 12px rgba(0,200,255,0.3);
  pointer-events: none;
}

/* Energy row */
.ls-energy-row {
  display: flex; align-items: center; gap: 4px;
}
.ls-energy-plus {
  width: 17px; height: 17px; border-radius: 50%;
  background: linear-gradient(135deg, #22CC44, #009933);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #fff; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,180,50,0.5);
}

/* ── ROLL DICE button — full width, glowing blue like screenshot ── */
.ls-roll-row { display: flex; flex-direction: column; gap: 3px; }
.ls-roll-btn {
  width: 100%; padding: 15px; border: none; border-radius: 16px;
  background: linear-gradient(135deg, #1E50FF, #0030CC);
  color: #fff; font-family: 'Orbitron', monospace;
  font-size: 20px; font-weight: 900; letter-spacing: 4px;
  cursor: pointer; transition: all .2s; position: relative; overflow: hidden;
  box-shadow:
    0 4px 20px rgba(30,80,255,0.7),
    0 0 0 2px rgba(100,150,255,0.35),
    0 0 40px rgba(30,80,255,0.35);
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.ls-roll-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: translateX(-100%); animation: lsRollShimmer 2.5s ease-in-out infinite;
}
@keyframes lsRollShimmer { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }
.ls-roll-btn:not(:disabled):active { transform: scale(.96); box-shadow: 0 2px 10px rgba(30,80,255,0.5); }
.ls-roll-btn:disabled { opacity: 0.42; cursor: not-allowed; }
.ls-roll-btn:disabled::before { display: none; }
.ls-roll-sub {
  text-align: center; font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.35);
}

/* Hide old sections now replaced */
.pg-outside-dice-row { display: none !important; }
.pg-dice-roll-section { display: none !important; }
.pg-players-row { display: none !important; }

/* Enhance board canvas — bigger, brighter */
#ludo-canvas {
  border-radius: 18px !important;
  box-shadow:
    0 0 0 4px rgba(200,134,10,0.6),
    0 0 50px rgba(200,134,10,0.3),
    0 0 80px rgba(0,100,200,0.15),
    0 8px 40px rgba(0,0,0,0.7) !important;
  filter: brightness(1.12) saturate(1.3) contrast(1.05);
}

/* Board section takes more space */
.pg-board-section {
  flex: 1 !important;
  padding: 4px 2px !important;
}

/* ── DICE DISPLAY controls ── */
.pg-left-btns, .pg-right-btns { display: none; } /* replaced by side buttons on board */
.pg-controls { display: none; } /* replaced by new layout */
.pg-roll-section { display: none; } /* replaced by new section */

/* ── Hide old left side emoji/chat (now in bottom bar) ── */
.pg-side-left { display: none !important; }

/* ── Bottom bar action buttons (Emoji/Chat/History) ── */
.pg-bottom-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; transition: all .2s;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 4px 10px; min-width: 48px;
}
.pg-bottom-action-btn:active { transform: scale(.9); background: rgba(0,210,255,0.12); }
.pg-bottom-btn-label {
  font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 800;
  color: rgba(255,255,255,0.7); letter-spacing: 0.3px;
}

/* ── Player name tags — smaller + glossy pill style ── */
.ls-ctrl-player {
  padding: 4px 7px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(6px) !important;
  gap: 5px !important;
}
.ls-ctrl-avatar {
  width: 28px !important; height: 28px !important;
  font-size: 15px !important;
}
.ls-ctrl-avatar::after {
  width: 7px !important; height: 7px !important;
}
.ls-ctrl-name {
  font-size: 8.5px !important;
  font-family: 'Orbitron', monospace !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
}
.ls-ctrl-stats {
  font-size: 7.5px !important;
  gap: 3px !important;
  color: rgba(255,255,255,0.55) !important;
}

/* ── Prize bar player info — smaller too ── */
.pg-player-name { font-size: 9px !important; }
.pg-player-stats { font-size: 9px !important; }
.pg-avatar { width: 36px !important; height: 36px !important; font-size: 17px !important; }

/* ── Board section - BIGGER board ── */
.pg-board-section {
  flex: 1 1 auto !important;
  padding: 2px 0 !important;
}
#ludo-canvas {
  width: 300px !important;
  height: 300px !important;
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* Token move buttons — instant tap response */
.move-token-btn {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.08s ease, background 0.08s ease !important;
}
.move-token-btn:active { transform: scale(0.92) !important; }

/* Roll button — instant tap */
#roll-btn, .ls-roll-btn {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}
#roll-btn:active, .ls-roll-btn:active { transform: scale(0.92) !important; }

/* ── Bottom control pushed down slightly ── */
.ls-bottom-control {
  padding: 6px 10px 4px !important;
  gap: 5px !important;
}
.ls-roll-btn {
  padding: 12px !important;
  font-size: 18px !important;
}

/* ── Win streak smaller ── */
.pg-win-streak { padding: 3px 7px !important; }



/* ─── style block (original order) ─── */


/* ═══════════════════════════════════════════════════════════════════
   LAYER 0 — ROOT TOKEN ENHANCEMENTS
═══════════════════════════════════════════════════════════════════ */
:root {
  /* Richer surface depth */
  --bg:        #020810;
  --surface:   #060F1F;
  --card:      #091628;
  --card2:     #0C1C32;

  /* Ultra vivid accent palette */
  --primary:   #00D4FF;
  --primary2:  #0099FF;
  --cyan-hot:  #00FFFF;
  --gold:      #FFD700;
  --gold2:     #FFAA00;
  --gold-hot:  #FFE566;
  --green:     #00FF99;
  --green2:    #00CC77;
  --purple:    #9B6BFF;
  --purple2:   #6B4FE0;

  /* Multi-layer glow system */
  --glow-cyan:   0 0 8px rgba(0,212,255,0.6), 0 0 24px rgba(0,212,255,0.3), 0 0 60px rgba(0,212,255,0.1);
  --glow-gold:   0 0 8px rgba(255,215,0,0.6),  0 0 24px rgba(255,215,0,0.3),  0 0 60px rgba(255,215,0,0.1);
  --glow-green:  0 0 8px rgba(0,255,153,0.6),  0 0 24px rgba(0,255,153,0.3),  0 0 60px rgba(0,255,153,0.1);
  --glow-purple: 0 0 8px rgba(155,107,255,0.6),0 0 24px rgba(155,107,255,0.3),0 0 60px rgba(155,107,255,0.1);

  /* Glass system */
  --glass-bg:    rgba(6,15,31,0.75);
  --glass-border: rgba(0,212,255,0.20);
  --glass-shine: rgba(255,255,255,0.06);
  --glass-blur:  blur(24px) saturate(180%);

  /* Specular top-edge highlight */
  --edge-top:   inset 0 1px 0 rgba(255,255,255,0.12);

  /* Premium borders */
  --border:    rgba(0,212,255,0.18);
  --border2:   rgba(0,212,255,0.40);
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 1 — DEEP SPACE BACKGROUND ATMOSPHERE
═══════════════════════════════════════════════════════════════════ */

/* Vignette overlay */
#app::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 50%,
    rgba(2,8,16,0.55) 100%
  );
}

/* Aurora nebula orbs — replaced with richer versions */
.orb-1 {
  width: 380px !important;
  height: 380px !important;
  top: -80px !important;
  left: -80px !important;
  background: radial-gradient(circle,
    rgba(0,144,255,0.22) 0%,
    rgba(0,80,200,0.10) 40%,
    transparent 70%) !important;
  animation: ultraOrb1 14s ease-in-out infinite !important;
}
.orb-2 {
  width: 320px !important;
  height: 320px !important;
  top: 30% !important;
  right: -60px !important;
  background: radial-gradient(circle,
    rgba(155,107,255,0.20) 0%,
    rgba(100,50,220,0.10) 40%,
    transparent 70%) !important;
  animation: ultraOrb2 18s ease-in-out infinite !important;
}
.orb-3 {
  width: 280px !important;
  height: 280px !important;
  bottom: 10% !important;
  left: 10% !important;
  background: radial-gradient(circle,
    rgba(0,255,153,0.12) 0%,
    rgba(0,180,100,0.06) 40%,
    transparent 70%) !important;
  animation: ultraOrb3 22s ease-in-out infinite !important;
}

@keyframes ultraOrb1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%  { transform: translate(30px,-20px) scale(1.08); }
  66%  { transform: translate(-15px,25px) scale(0.94); }
}
@keyframes ultraOrb2 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%  { transform: translate(-25px,15px) scale(1.12); }
  70%  { transform: translate(20px,-30px) scale(0.92); }
}
@keyframes ultraOrb3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%  { transform: translate(20px,-20px) scale(1.1); }
}

/* Finer grid with depth */
.bg-grid {
  background-image:
    linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px),
    linear-gradient(rgba(0,212,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.02) 1px, transparent 1px) !important;
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px !important;
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 2 — ULTRA PREMIUM TOP BAR
═══════════════════════════════════════════════════════════════════ */
.top-bar {
  background: linear-gradient(
    180deg,
    rgba(2,8,16,0.96) 0%,
    rgba(6,15,31,0.82) 100%
  ) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid rgba(0,212,255,0.15) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 32px rgba(0,0,0,0.5) !important;
  position: relative;
  z-index: 30;
}

.top-logo {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  background: linear-gradient(90deg,
    #00D4FF 0%,
    #FFFFFF 35%,
    #9B6BFF 65%,
    #00FF99 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: logoShimmer 4s linear infinite !important;
  letter-spacing: 2px !important;
  filter: drop-shadow(0 0 16px rgba(0,212,255,0.5)) !important;
}
@keyframes logoShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.icon-btn {
  background: rgba(0,212,255,0.08) !important;
  border: 1px solid rgba(0,212,255,0.22) !important;
  border-radius: 14px !important;
  box-shadow: var(--edge-top), 0 4px 16px rgba(0,0,0,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.icon-btn:active {
  transform: scale(0.93) !important;
  box-shadow: var(--glow-cyan) !important;
}

.phase-pill {
  background: rgba(255,215,0,0.1) !important;
  border: 1px solid rgba(255,215,0,0.50) !important;
  box-shadow: 0 0 12px rgba(255,215,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
  color: var(--gold-hot) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 3 — CRYSTAL HERO BALANCE CARD
═══════════════════════════════════════════════════════════════════ */
.hero-card {
  margin: 8px 14px 0 !important;
  padding: 26px 22px !important;
  background:
    linear-gradient(135deg,
      rgba(0,212,255,0.12) 0%,
      rgba(6,15,31,0.90) 35%,
      rgba(155,107,255,0.09) 70%,
      rgba(0,255,153,0.06) 100%) !important;
  border: 1px solid rgba(0,212,255,0.35) !important;
  border-radius: 26px !important;
  box-shadow:
    var(--edge-top),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 12px 48px rgba(0,0,0,0.6),
    0 0 80px rgba(0,212,255,0.08),
    0 0 0 1px rgba(0,212,255,0.10) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Holographic foil sweep */
.hero-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,0.035) 45%,
    rgba(0,212,255,0.04) 50%,
    rgba(255,255,255,0.035) 55%,
    transparent 65%
  ) !important;
  animation: holoFoil 6s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: 26px !important;
}
@keyframes holoFoil {
  0%,100% { transform: translateX(-120%) skewX(-15deg); }
  50%      { transform: translateX(120%) skewX(-15deg); }
}

/* Radial glow orbs inside card */
.hero-card::after {
  content: '' !important;
  position: absolute !important;
  top: -50px !important; right: -50px !important;
  width: 220px !important; height: 220px !important;
  background: radial-gradient(circle,
    rgba(0,212,255,0.22) 0%,
    rgba(155,107,255,0.10) 40%,
    transparent 70%) !important;
  animation: heroOrb 6s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes heroOrb {
  0%,100% { transform: scale(1) translate(0,0); }
  50%      { transform: scale(1.25) translate(-15px, 10px); }
}

.hero-label {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 3.5px !important;
  color: var(--primary) !important;
  text-transform: uppercase !important;
  filter: drop-shadow(0 0 10px rgba(0,212,255,0.7)) !important;
  position: relative !important;
  z-index: 2 !important;
}

.hero-balance {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 46px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg,
    #FFFFFF 0%,
    #00D4FF 40%,
    #00FF99 70%,
    #FFFFFF 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: balanceShimmer 3s linear infinite !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  filter: drop-shadow(0 0 24px rgba(0,212,255,0.35)) !important;
  position: relative !important;
  z-index: 2 !important;
}
@keyframes balanceShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.hero-token {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 16px rgba(0,212,255,0.8) !important;
}

.hero-divider {
  background: linear-gradient(180deg,
    transparent, rgba(0,212,255,0.4), transparent) !important;
  width: 1px !important;
  height: 40px !important;
}

.stat-mini-val {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 0 12px rgba(0,212,255,0.4) !important;
}
.stat-mini-lbl {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
  margin-top: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 4 — 3D ORB MINE BUTTON
═══════════════════════════════════════════════════════════════════ */
.mine-section { padding: 20px 16px 0 !important; }

.mine-btn-wrap {
  width: 216px !important;
  height: 216px !important;
  position: relative !important;
  display: inline-block !important;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.7)) !important;
}

/* Outermost ring — rotating rainbow gradient */
.mine-btn-wrap::before {
  content: '' !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  background: conic-gradient(
    from 0deg,
    #00D4FF,
    #9B6BFF,
    #00FF99,
    #FFD700,
    #FF6B6B,
    #00D4FF
  ) !important;
  animation: ringRotate 3s linear infinite !important;
  z-index: 0 !important;
}
/* Middle ring mask */
.mine-btn-wrap::after {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%,
    rgba(255,255,255,0.12) 0%,
    rgba(2,8,16,1) 60%) !important;
  z-index: 1 !important;
  animation: ringRotate 3s linear infinite reverse !important;
}

#mine-btn {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 2 !important;
  background:
    radial-gradient(circle at 38% 32%,
      rgba(255,255,255,0.18) 0%,
      rgba(0,180,230,0.12) 20%,
      rgba(9,22,40,0.95) 55%,
      rgba(2,8,16,1) 100%) !important;
  box-shadow:
    inset 0 4px 16px rgba(255,255,255,0.10),
    inset 0 -4px 16px rgba(0,0,0,0.6),
    0 0 0 2px rgba(0,212,255,0.3),
    0 0 40px rgba(0,212,255,0.2),
    0 16px 60px rgba(0,0,0,0.7) !important;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
  overflow: visible !important;
}

/* Specular highlight */
#mine-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 14px !important;
  left: 24px !important;
  width: 80px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.08) 50%,
    transparent 100%) !important;
  transform: rotate(-30deg) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* Rotating energy border */
#mine-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  background: conic-gradient(
    from 0deg,
    var(--primary) 0deg,
    rgba(0,212,255,0.1) 90deg,
    rgba(0,212,255,0.05) 180deg,
    rgba(0,212,255,0.1) 270deg,
    var(--primary) 360deg
  ) !important;
  animation: rotateBorder 2.5s linear infinite !important;
  z-index: -1 !important;
  opacity: 0.8 !important;
}

#mine-btn.active {
  background:
    radial-gradient(circle at 38% 32%,
      rgba(255,255,255,0.20) 0%,
      rgba(0,255,153,0.15) 20%,
      rgba(0,30,20,0.95) 55%,
      rgba(0,10,5,1) 100%) !important;
  box-shadow:
    inset 0 4px 16px rgba(255,255,255,0.12),
    inset 0 -4px 16px rgba(0,0,0,0.6),
    0 0 0 2px rgba(0,255,153,0.5),
    0 0 50px rgba(0,255,153,0.3),
    0 0 100px rgba(0,255,153,0.15),
    0 16px 60px rgba(0,0,0,0.7) !important;
  animation: mineActiveGlow 1.8s ease-in-out infinite !important;
}
#mine-btn.active::after {
  background: conic-gradient(
    from 0deg,
    #00FF99, #00D4FF, #00FF99, #00D4FF, #00FF99
  ) !important;
}
@keyframes mineActiveGlow {
  0%,100% {
    box-shadow:
      inset 0 4px 16px rgba(255,255,255,0.12),
      inset 0 -4px 16px rgba(0,0,0,0.6),
      0 0 0 2px rgba(0,255,153,0.5),
      0 0 50px rgba(0,255,153,0.3),
      0 0 100px rgba(0,255,153,0.15),
      0 16px 60px rgba(0,0,0,0.7);
  }
  50% {
    box-shadow:
      inset 0 4px 16px rgba(255,255,255,0.15),
      inset 0 -4px 16px rgba(0,0,0,0.6),
      0 0 0 3px rgba(0,255,153,0.7),
      0 0 70px rgba(0,255,153,0.45),
      0 0 130px rgba(0,255,153,0.2),
      0 16px 60px rgba(0,0,0,0.7);
  }
}

#mine-btn:active {
  transform: scale(0.94) !important;
}

.mine-inner {
  position: relative !important;
  z-index: 4 !important;
  padding-top: 28px !important;
  pointer-events: none !important;
}
.mine-icon {
  font-size: 48px !important;
  display: block !important;
  line-height: 1 !important;
  animation: mineIconFloat 3.5s ease-in-out infinite !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)) !important;
}
.mine-label {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 2.5px !important;
  margin-top: 10px !important;
  display: block !important;
  text-shadow: 0 0 20px rgba(0,212,255,0.8) !important;
}
.mine-rate {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.4) !important;
  margin-top: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 5 — PROGRESS BAR — LIQUID NEON
═══════════════════════════════════════════════════════════════════ */
.progress-track {
  height: 10px !important;
  background: rgba(0,212,255,0.06) !important;
  border: 1px solid rgba(0,212,255,0.15) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4) !important;
}
#tap-progress {
  height: 100% !important;
  background: linear-gradient(90deg,
    #9B6BFF, #00D4FF, #00FF99) !important;
  background-size: 200% 100% !important;
  /* Fix #8: animation only runs when width > 0; paused via JS when idle */
  animation: progressFlow 2s linear infinite paused !important;
  border-radius: 10px !important;
  box-shadow: 0 0 12px rgba(0,212,255,0.6), 0 0 24px rgba(0,212,255,0.3) !important;
  position: relative !important;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}
/* Glimmer dot at progress head */
#tap-progress::before {
  content: '' !important;
  position: absolute !important;
  right: -1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 8px rgba(0,212,255,1), 0 0 16px rgba(0,212,255,0.6) !important;
}
@keyframes progressFlow {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 6 — GLOSSY ACTION BUTTONS
═══════════════════════════════════════════════════════════════════ */
.action-btn {
  flex-shrink: 0 !important;
  padding: 11px 20px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,212,255,0.22) !important;
  background: linear-gradient(
    180deg,
    rgba(0,212,255,0.10) 0%,
    rgba(0,100,160,0.06) 100%) !important;
  cursor: pointer !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--text) !important;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  box-shadow:
    var(--edge-top),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 4px 20px rgba(0,0,0,0.4) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Shimmer sweep */
.action-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 30%,
    rgba(255,255,255,0.08) 50%,
    transparent 70%
  ) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.4s ease !important;
}
.action-btn:hover::after,
.action-btn:focus::after { transform: translateX(100%) !important; }

.action-btn.gold {
  border-color: rgba(255,215,0,0.45) !important;
  background: linear-gradient(
    180deg,
    rgba(255,215,0,0.14) 0%,
    rgba(200,140,0,0.07) 100%) !important;
  box-shadow:
    var(--edge-top),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 20px rgba(255,215,0,0.15),
    0 4px 20px rgba(0,0,0,0.4) !important;
  color: var(--gold-hot) !important;
}
.action-btn.green {
  border-color: rgba(0,255,153,0.40) !important;
  background: linear-gradient(
    180deg,
    rgba(0,255,153,0.12) 0%,
    rgba(0,160,90,0.06) 100%) !important;
  box-shadow:
    var(--edge-top),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 20px rgba(0,255,153,0.15),
    0 4px 20px rgba(0,0,0,0.4) !important;
  color: var(--green) !important;
}
.action-btn:active {
  transform: scale(0.94) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 7 — ULTRA GLOSSY STAT CARDS
═══════════════════════════════════════════════════════════════════ */
.stat-card {
  background: linear-gradient(
    145deg,
    rgba(0,212,255,0.09) 0%,
    rgba(9,22,40,0.92) 50%,
    rgba(2,8,16,0.95) 100%) !important;
  border: 1px solid rgba(0,212,255,0.20) !important;
  border-radius: 18px !important;
  box-shadow:
    var(--edge-top),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 8px 32px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(16px) !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.stat-card:hover, .stat-card:active {
  border-color: rgba(0,212,255,0.45) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    var(--edge-top),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 24px rgba(0,212,255,0.2),
    0 16px 48px rgba(0,0,0,0.6) !important;
}
.stat-card-val {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 0 16px rgba(0,212,255,0.4) !important;
}
.stat-card-lbl {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
  margin-top: 4px !important;
}
.stat-card-icon {
  font-size: 24px !important;
  margin-bottom: 10px !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 8 — FLOATING GLASS BOTTOM NAV
═══════════════════════════════════════════════════════════════════ */
.bottom-nav {
  background: rgba(2,8,16,0.88) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important; backdrop-filter: blur(12px) saturate(160%) !important;
  border-top: 1px solid rgba(0,212,255,0.18) !important;
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.06),
    0 -4px 40px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(0,212,255,0.08) !important;
  position: relative !important;
  z-index: 40 !important;
}
.nav-item {
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important;
  border-radius: 16px !important;
  padding: 6px 14px !important;
}
.nav-item.active {
  background: rgba(0,212,255,0.10) !important;
}
.nav-item.active .nav-label {
  color: var(--primary) !important;
  text-shadow: 0 0 8px rgba(0,212,255,0.8) !important;
}
.nav-item.active .nav-icon {
  filter: drop-shadow(0 0 12px rgba(0,212,255,0.9)) !important;
}
.nav-label {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.5px !important;
}
.nav-icon { font-size: 24px !important; }
.nav-item:active { transform: scale(0.88) !important; }

/* ═══════════════════════════════════════════════════════════════════
   LAYER 9 — PREMIUM LEADERBOARD
═══════════════════════════════════════════════════════════════════ */
.leader-item {
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.06) 0%,
    rgba(9,22,40,0.90) 100%) !important;
  border: 1px solid rgba(0,212,255,0.16) !important;
  border-radius: 18px !important;
  box-shadow:
    var(--edge-top),
    0 4px 24px rgba(0,0,0,0.4) !important;
  margin-bottom: 10px !important;
  transition: all 0.25s !important;
  backdrop-filter: blur(12px) !important;
}
.leader-item.top1 {
  background: linear-gradient(
    135deg,
    rgba(255,215,0,0.12) 0%,
    rgba(20,15,5,0.92) 100%) !important;
  border-color: rgba(255,215,0,0.50) !important;
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.15) inset,
    var(--glow-gold),
    0 8px 32px rgba(0,0,0,0.5) !important;
}
.leader-item.top2 {
  background: linear-gradient(
    135deg,
    rgba(200,200,210,0.10) 0%,
    rgba(9,14,25,0.92) 100%) !important;
  border-color: rgba(200,200,220,0.45) !important;
  box-shadow:
    0 0 16px rgba(192,192,220,0.18),
    0 8px 32px rgba(0,0,0,0.5) !important;
}
.leader-item.top3 {
  background: linear-gradient(
    135deg,
    rgba(205,127,50,0.10) 0%,
    rgba(9,14,22,0.92) 100%) !important;
  border-color: rgba(205,127,50,0.45) !important;
  box-shadow:
    0 0 16px rgba(205,127,50,0.18),
    0 8px 32px rgba(0,0,0,0.5) !important;
}

/* Metallic rank badges */
.rank-badge {
  border-radius: 10px !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
.leader-item.top1 .rank-badge {
  background: linear-gradient(135deg, #FFD700, #FF9500) !important;
  color: #000 !important;
  box-shadow: 0 0 16px rgba(255,215,0,0.5) !important;
}
.leader-item.top2 .rank-badge {
  background: linear-gradient(135deg, #E8E8FF, #B0B0D0) !important;
  color: #111 !important;
}
.leader-item.top3 .rank-badge {
  background: linear-gradient(135deg, #E8A060, #A05020) !important;
  color: #fff !important;
}
.leader-bal {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 13px !important;
  color: var(--primary) !important;
  text-shadow: 0 0 14px rgba(0,212,255,0.6) !important;
}
.leader-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 10 — PREMIUM FORM INPUTS
═══════════════════════════════════════════════════════════════════ */
input, select, textarea {
  background: rgba(6,15,31,0.8) !important;
  border: 1.5px solid rgba(0,212,255,0.22) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: all 0.25s !important;
  font-family: 'Rajdhani', sans-serif !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.4),
    0 0 0 3px rgba(0,212,255,0.14),
    0 0 24px rgba(0,212,255,0.12) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 11 — PREMIUM MAIN BUTTON (btn-primary)
═══════════════════════════════════════════════════════════════════ */
.btn-primary {
  background: linear-gradient(
    180deg,
    rgba(0,212,255,0.90) 0%,
    rgba(0,140,220,0.85) 100%) !important;
  border: 1px solid rgba(0,212,255,0.6) !important;
  color: #000 !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  border-radius: 16px !important;
  box-shadow:
    var(--edge-top),
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 4px 32px rgba(0,212,255,0.35),
    0 2px 8px rgba(0,0,0,0.4) !important;
  transition: all 0.25s !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-primary::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -80% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(
    90deg, transparent, rgba(255,255,255,0.18), transparent
  ) !important;
  transform: skewX(-15deg) !important;
  animation: btnShimmer 2.5s ease-in-out infinite !important;
}
@keyframes btnShimmer {
  0%   { left: -80%; }
  100% { left: 160%; }
}
.btn-primary:active {
  transform: scale(0.96) !important;
  box-shadow: 0 0 16px rgba(0,212,255,0.4) !important;
}

.btn-secondary {
  background: rgba(0,212,255,0.07) !important;
  border: 1px solid rgba(0,212,255,0.25) !important;
  color: var(--primary) !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: 16px !important;
  box-shadow: var(--edge-top), 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 12 — SUB-SCREENS: GLASS SURFACES
═══════════════════════════════════════════════════════════════════ */
.sub-screen {
  background: var(--bg) !important;
}
.sub-header {
  background: linear-gradient(
    180deg,
    rgba(6,15,31,0.96) 0%,
    rgba(9,22,40,0.80) 100%) !important;
  border-bottom: 1px solid rgba(0,212,255,0.18) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) !important;
}
.sub-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}
.back-btn {
  background: rgba(0,212,255,0.08) !important;
  border: 1px solid rgba(0,212,255,0.22) !important;
  border-radius: 12px !important;
  box-shadow: var(--edge-top), 0 4px 16px rgba(0,0,0,0.3) !important;
  font-size: 20px !important;
  color: var(--primary) !important;
  transition: all 0.2s !important;
}
.back-btn:active { transform: scale(0.88) !important; }

/* ═══════════════════════════════════════════════════════════════════
   LAYER 13 — PREMIUM TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════════════════ */
.toast {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 16px !important;
  backdrop-filter: blur(24px) !important;
  box-shadow:
    var(--edge-top),
    0 8px 40px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.05) inset !important;
  padding: 14px 20px !important;
}
.toast.success {
  background: rgba(0,40,20,0.92) !important;
  border: 1px solid rgba(0,255,153,0.40) !important;
  box-shadow:
    var(--edge-top),
    0 0 24px rgba(0,255,153,0.2),
    0 8px 40px rgba(0,0,0,0.6) !important;
  color: var(--green) !important;
}
.toast.error {
  background: rgba(40,5,5,0.92) !important;
  border: 1px solid rgba(255,80,80,0.40) !important;
  color: #FF8888 !important;
}
.toast.warn {
  background: rgba(40,30,0,0.92) !important;
  border: 1px solid rgba(255,200,0,0.40) !important;
  color: var(--gold-hot) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 14 — REFERRAL CARD PREMIUM
═══════════════════════════════════════════════════════════════════ */
.ref-card {
  background: linear-gradient(135deg,
    rgba(255,215,0,0.09) 0%,
    rgba(9,22,40,0.90) 60%,
    rgba(255,140,0,0.06) 100%) !important;
  border: 1px solid rgba(255,215,0,0.35) !important;
  border-radius: 24px !important;
  box-shadow:
    var(--edge-top),
    0 0 40px rgba(255,215,0,0.08),
    0 12px 48px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(16px) !important;
}
.ref-code-display {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 6px !important;
  color: var(--gold-hot) !important;
  background: rgba(255,215,0,0.06) !important;
  border: 1px solid rgba(255,215,0,0.30) !important;
  border-radius: 14px !important;
  text-shadow: 0 0 20px rgba(255,215,0,0.6) !important;
  box-shadow: 0 0 24px rgba(255,215,0,0.12) !important;
}
.copy-btn {
  background: linear-gradient(135deg,
    rgba(255,215,0,0.22) 0%,
    rgba(200,140,0,0.12) 100%) !important;
  border: 1px solid rgba(255,215,0,0.45) !important;
  color: var(--gold-hot) !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  box-shadow:
    var(--edge-top),
    0 0 20px rgba(255,215,0,0.15) !important;
  transition: all 0.22s !important;
}
.copy-btn:active { transform: scale(0.94) !important; }

/* ═══════════════════════════════════════════════════════════════════
   LAYER 15 — GAME ZONE UPGRADE
═══════════════════════════════════════════════════════════════════ */
.game-mode-card {
  background: linear-gradient(
    145deg,
    rgba(99,102,241,0.10) 0%,
    rgba(9,22,40,0.90) 70%) !important;
  border: 1px solid rgba(99,102,241,0.28) !important;
  border-radius: 22px !important;
  box-shadow:
    var(--edge-top),
    0 8px 32px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.03) inset !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(12px) !important;
}
.game-mode-card:active {
  transform: scale(0.96) !important;
  box-shadow: var(--glow-purple), 0 8px 32px rgba(0,0,0,0.5) !important;
}
.game-card-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.game-card-emoji {
  font-size: 36px !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)) !important;
}

/* Level badge */
.level-badge {
  background: linear-gradient(135deg, #9B6BFF, #6B4FE0) !important;
  border: 1px solid rgba(155,107,255,0.5) !important;
  box-shadow: var(--glow-purple), var(--edge-top) !important;
  border-radius: 14px !important;
}
.level-badge-num {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #fff !important;
  text-shadow: 0 0 12px rgba(255,255,255,0.5) !important;
}
.level-badge-lbl {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
}

/* XP bar */
.xp-bar-track {
  background: rgba(155,107,255,0.10) !important;
  border: 1px solid rgba(155,107,255,0.20) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
#xp-bar-fill {
  background: linear-gradient(90deg, #9B6BFF, #C084FC) !important;
  box-shadow: 0 0 12px rgba(155,107,255,0.5) !important;
  border-radius: 6px !important;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Energy bar */
.energy-track {
  border-radius: 6px !important;
  overflow: hidden !important;
  background: rgba(0,212,255,0.06) !important;
  border: 1px solid rgba(0,212,255,0.15) !important;
}
#energy-bar {
  background: linear-gradient(90deg, #00D4FF, #00FF99) !important;
  box-shadow: 0 0 10px rgba(0,212,255,0.5) !important;
  border-radius: 6px !important;
  transition: width 0.4s !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 16 — LUDO ARENA PREMIUM
═══════════════════════════════════════════════════════════════════ */
#ludo-canvas {
  border-radius: 16px !important;
  box-shadow:
    0 0 0 2px rgba(255,215,0,0.20),
    0 0 60px rgba(255,215,0,0.15),
    0 0 120px rgba(0,212,255,0.08),
    0 20px 80px rgba(0,0,0,0.7) !important;
}
.ludo-header {
  background: linear-gradient(180deg, rgba(6,15,31,0.95) 0%, transparent 100%) !important;
  backdrop-filter: blur(20px) !important;
}
.ludo-title {
  font-family: 'Orbitron', sans-serif !important;
  background: linear-gradient(135deg, #FFD700, #FFAA00, #FF8800) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.4)) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}
.ludo-find-btn {
  background: linear-gradient(180deg,
    #FFE566 0%, #FFD700 40%, #FFAA00 100%) !important;
  box-shadow:
    var(--edge-top),
    0 0 0 1px rgba(255,255,255,0.2) inset,
    0 4px 32px rgba(255,215,0,0.35),
    0 2px 8px rgba(0,0,0,0.4) !important;
  font-family: 'Orbitron', sans-serif !important;
  position: relative !important;
  overflow: hidden !important;
}
.ludo-find-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -80% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.25), transparent
  ) !important;
  transform: skewX(-15deg) !important;
  animation: btnShimmer 2s ease-in-out infinite !important;
}
#ludo-dice-display {
  background: linear-gradient(135deg, #1a2a4a, #0C1A2E) !important;
  border: 2px solid rgba(255,215,0,0.40) !important;
  box-shadow:
    var(--edge-top),
    inset 0 -2px 8px rgba(0,0,0,0.5),
    0 0 20px rgba(255,215,0,0.18),
    0 8px 24px rgba(0,0,0,0.5) !important;
}
.ludo-roll-btn {
  background: linear-gradient(180deg,
    #FFE566 0%, #FFD700 50%, #FF9500 100%) !important;
  box-shadow:
    var(--edge-top),
    0 4px 20px rgba(255,215,0,0.3) !important;
  font-family: 'Orbitron', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 17 — WITHDRAW & TOKEN HERO
═══════════════════════════════════════════════════════════════════ */
.withdraw-balance {
  background: linear-gradient(135deg,
    rgba(0,255,153,0.09) 0%,
    rgba(0,212,255,0.06) 100%) !important;
  border: 1px solid rgba(0,255,153,0.30) !important;
  border-radius: 24px !important;
  box-shadow:
    var(--edge-top),
    0 0 40px rgba(0,255,153,0.08),
    0 12px 40px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(12px) !important;
}
.withdraw-bal-val {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #00FF99, #00D4FF) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(0,255,153,0.4)) !important;
}

.token-hero {
  background: linear-gradient(135deg,
    rgba(0,212,255,0.10) 0%,
    rgba(9,22,40,0.90) 50%,
    rgba(155,107,255,0.08) 100%) !important;
  border: 1px solid rgba(0,212,255,0.30) !important;
  border-radius: 24px !important;
  box-shadow:
    var(--edge-top),
    0 0 60px rgba(0,212,255,0.08),
    0 12px 48px rgba(0,0,0,0.5) !important;
}
.token-symbol {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 60px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #00D4FF, #00FF99, #9B6BFF) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 28px rgba(0,212,255,0.35)) !important;
}

/* Method cards */
.method-card {
  background: rgba(9,22,40,0.85) !important;
  border: 2px solid rgba(0,212,255,0.18) !important;
  border-radius: 16px !important;
  box-shadow: var(--edge-top), 0 4px 20px rgba(0,0,0,0.4) !important;
  transition: all 0.22s !important;
  backdrop-filter: blur(12px) !important;
}
.method-card.selected {
  border-color: var(--primary) !important;
  background: rgba(0,212,255,0.08) !important;
  box-shadow: 0 0 24px rgba(0,212,255,0.20), var(--edge-top) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 18 — SECTION HEADERS & TITLES
═══════════════════════════════════════════════════════════════════ */
.section-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}
.section-action {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 11px !important;
  color: var(--primary) !important;
  text-shadow: 0 0 10px rgba(0,212,255,0.6) !important;
}
.progress-title {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
}
.progress-val {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 11px !important;
  color: var(--primary) !important;
  text-shadow: 0 0 8px rgba(0,212,255,0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 19 — ROADMAP PREMIUM
═══════════════════════════════════════════════════════════════════ */
.roadmap-dot {
  width: 16px !important;
  height: 16px !important;
  background: var(--primary) !important;
  box-shadow: 0 0 14px rgba(0,212,255,0.8), 0 0 28px rgba(0,212,255,0.4) !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
}
.roadmap-dot.done {
  background: var(--green) !important;
  box-shadow: 0 0 14px rgba(0,255,153,0.8), 0 0 28px rgba(0,255,153,0.4) !important;
}
.roadmap-connector {
  background: linear-gradient(180deg, var(--primary), rgba(0,212,255,0.20)) !important;
  width: 2px !important;
}
.roadmap-phase {
  font-family: 'Inter', ui-monospace, monospace !important;
  color: var(--primary) !important;
  text-shadow: 0 0 8px rgba(0,212,255,0.5) !important;
  letter-spacing: 2px !important;
}
.roadmap-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 20 — SETTINGS PREMIUM
═══════════════════════════════════════════════════════════════════ */
.setting-item {
  background: rgba(9,22,40,0.80) !important;
  border: 1px solid rgba(0,212,255,0.14) !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.2s !important;
}
.setting-item:first-of-type { border-radius: 16px 16px 0 0 !important; }
.setting-item:last-of-type  { border-radius: 0 0 16px 16px !important; }
.setting-item:only-of-type  { border-radius: 16px !important; }
.setting-item:hover, .setting-item:active {
  background: rgba(0,212,255,0.06) !important;
  border-color: rgba(0,212,255,0.28) !important;
}
.setting-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.settings-label {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(0,212,255,0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 21 — AUTH SCREEN PREMIUM
═══════════════════════════════════════════════════════════════════ */
.auth-logo {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg,
    #00D4FF 0%, #FFFFFF 40%, #9B6BFF 70%, #00FF99 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 24px rgba(0,212,255,0.4)) !important;
}
.auth-tagline {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  color: rgba(0,212,255,0.6) !important;
  text-transform: uppercase !important;
}
.auth-tabs {
  background: rgba(6,15,31,0.90) !important;
  border: 1px solid rgba(0,212,255,0.18) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}
.auth-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  box-shadow: 0 4px 16px rgba(0,212,255,0.30) !important;
}
.auth-tab {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 22 — SPLASH SCREEN ULTRA
═══════════════════════════════════════════════════════════════════ */
.splash-logo {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 52px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg,
    #00D4FF 0%,
    #FFFFFF 30%,
    #9B6BFF 55%,
    #00FF99 75%,
    #FFD700 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: splashLogoShimmer 2.5s linear infinite !important;
  letter-spacing: 3px !important;
  filter: drop-shadow(0 0 32px rgba(0,212,255,0.6)) !important;
}
@keyframes splashLogoShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.splash-ring {
  width: 140px !important;
  height: 140px !important;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(#00D4FF, #9B6BFF, #00FF99, #FFD700, #FF6B6B, #00D4FF) border-box !important;
  border: 2.5px solid transparent !important;
  box-shadow:
    0 0 0 4px rgba(0,212,255,0.06),
    0 0 60px rgba(0,212,255,0.20),
    0 0 120px rgba(155,107,255,0.10) !important;
  animation: ringPulse 2s ease infinite, ringRotate 5s linear infinite !important;
}
.splash-fill {
  background: linear-gradient(90deg,
    #9B6BFF, #00D4FF, #00FF99, #FFD700) !important;
  background-size: 300% 100% !important;
  animation: splashLoad 2.2s ease 0.8s forwards,
             shimmerMove 1.2s linear infinite !important;
  box-shadow: 0 0 12px rgba(0,212,255,0.6) !important;
}
.splash-sub {
  font-family: 'Inter', ui-monospace, monospace !important;
  letter-spacing: 8px !important;
  color: rgba(0,212,255,0.6) !important;
  font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 23 — FOMO BAR & ATTACK BANNER
═══════════════════════════════════════════════════════════════════ */
.fomo-bar {
  background: linear-gradient(90deg,
    rgba(100,60,200,0.95), rgba(80,50,180,0.90)) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow:
    0 4px 32px rgba(100,60,200,0.4),
    0 1px 0 rgba(255,255,255,0.08) inset !important;
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid rgba(155,107,255,0.30) !important;
}
.attack-banner {
  background: rgba(40,5,5,0.92) !important;
  border-bottom: 1px solid rgba(255,80,80,0.30) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 32px rgba(255,50,50,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 24 — MYSTERY DROP POPUP
═══════════════════════════════════════════════════════════════════ */
.mystery-drop-bubble {
  background: linear-gradient(145deg,
    rgba(255,215,0,0.20) 0%,
    rgba(9,22,40,0.92) 60%,
    rgba(255,140,0,0.12) 100%) !important;
  border: 2px solid rgba(255,215,0,0.65) !important;
  border-radius: 32px !important;
  box-shadow:
    var(--edge-top),
    0 0 0 4px rgba(255,215,0,0.08),
    0 0 80px rgba(255,215,0,0.35),
    0 30px 80px rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(24px) !important;
}
.mystery-drop-title {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 900 !important;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.7)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 25 — PHASE CARDS
═══════════════════════════════════════════════════════════════════ */
.phase-card {
  background: rgba(9,22,40,0.85) !important;
  border: 1px solid rgba(0,212,255,0.15) !important;
  border-radius: 18px !important;
  box-shadow: var(--edge-top), 0 4px 20px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.22s !important;
}
.phase-card.current {
  border-color: var(--primary) !important;
  background: rgba(0,212,255,0.07) !important;
  box-shadow:
    var(--edge-top),
    0 0 28px rgba(0,212,255,0.15),
    0 8px 32px rgba(0,0,0,0.5) !important;
}
.phase-rate {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 800 !important;
  text-shadow: 0 0 12px rgba(0,212,255,0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 26 — SCROLLBAR LUXURY
═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 3px !important; height: 3px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--primary), #8B5CF6) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 8px rgba(0,212,255,0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 27 — MISSION ITEMS
═══════════════════════════════════════════════════════════════════ */
.mission-item {
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.06) 0%,
    rgba(9,22,40,0.88) 100%) !important;
  border: 1px solid rgba(0,212,255,0.16) !important;
  border-radius: 18px !important;
  box-shadow: var(--edge-top), 0 4px 20px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.25s !important;
}
.mission-item.done {
  border-color: rgba(0,255,153,0.35) !important;
  background: linear-gradient(
    135deg,
    rgba(0,255,153,0.07) 0%,
    rgba(9,22,40,0.88) 100%) !important;
  box-shadow:
    var(--edge-top),
    0 0 20px rgba(0,255,153,0.10),
    0 4px 20px rgba(0,0,0,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 28 — ADMIN PANEL
═══════════════════════════════════════════════════════════════════ */
.admin-stat {
  background: linear-gradient(
    145deg,
    rgba(0,212,255,0.09) 0%,
    rgba(9,22,40,0.90) 100%) !important;
  border: 1px solid rgba(0,212,255,0.20) !important;
  border-radius: 18px !important;
  box-shadow: var(--edge-top), 0 4px 24px rgba(0,0,0,0.5) !important;
}
.admin-stat-val {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 18px rgba(0,212,255,0.5) !important;
}
.admin-btn {
  background: rgba(9,22,40,0.85) !important;
  border: 1px solid rgba(0,212,255,0.18) !important;
  border-radius: 16px !important;
  box-shadow: var(--edge-top), 0 4px 20px rgba(0,0,0,0.4) !important;
  transition: all 0.22s !important;
}
.admin-btn:hover, .admin-btn:active {
  border-color: var(--primary) !important;
  background: rgba(0,212,255,0.07) !important;
  box-shadow: 0 0 20px rgba(0,212,255,0.15), var(--edge-top) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 29 — SHARE CARD MODAL
═══════════════════════════════════════════════════════════════════ */
.share-card-sheet {
  background: linear-gradient(145deg,
    rgba(0,212,255,0.10) 0%,
    rgba(9,22,40,0.96) 40%,
    rgba(155,107,255,0.08) 100%) !important;
  border: 1px solid rgba(0,212,255,0.30) !important;
  border-radius: 32px !important;
  box-shadow:
    var(--edge-top),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 80px rgba(0,212,255,0.10),
    0 30px 90px rgba(0,0,0,0.75) !important;
  backdrop-filter: var(--glass-blur) !important;
}
.share-card-win-amount {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 54px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #00FF99, #00D4FF) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 24px rgba(0,255,153,0.5)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 30 — will-change only on high-churn interactive layers
═══════════════════════════════════════════════════════════════════ */
#mine-btn,
.tap-particle,
.tap-ripple,
#crash-graph-canvas {
  will-change: transform !important;
}

/* Smooth font rendering globally */
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ═══════════════════════════════════════════════════════════════════
   LAYER 31 — ONBOARDING PREMIUM
═══════════════════════════════════════════════════════════════════ */
.onboard-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  background: linear-gradient(135deg, #fff, var(--primary)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.onboard-icon {
  filter: drop-shadow(0 0 24px rgba(0,212,255,0.5)) !important;
}
.onboard-dot.active {
  background: var(--primary) !important;
  box-shadow: 0 0 14px rgba(0,212,255,0.7), 0 0 28px rgba(0,212,255,0.3) !important;
  width: 24px !important;
  border-radius: 4px !important;
}
.onboard-dot {
  background: rgba(255,255,255,0.20) !important;
  transition: all 0.3s !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 32 — CHAT BUBBLES PREMIUM
═══════════════════════════════════════════════════════════════════ */
.chat-bubble {
  border-radius: 18px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.chat-bubble.me {
  background: linear-gradient(135deg, #00D4FF, #0066CC) !important;
  box-shadow: 0 4px 20px rgba(0,212,255,0.25), var(--edge-top) !important;
}
.chat-bubble.other {
  background: rgba(9,22,40,0.85) !important;
  border: 1px solid rgba(0,212,255,0.18) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(12px) !important;
}
.send-btn {
  background: linear-gradient(135deg, #00D4FF, #0088EE) !important;
  box-shadow: var(--edge-top), 0 4px 16px rgba(0,212,255,0.30) !important;
  border-radius: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 33 — INFO ROWS (profile, stats)
═══════════════════════════════════════════════════════════════════ */
.info-row {
  border-bottom: 1px solid rgba(0,212,255,0.07) !important;
  padding: 10px 0 !important;
  transition: background 0.2s !important;
}
.info-key {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.40) !important;
}
.info-val {
  font-family: 'Inter', ui-monospace, monospace !important;
  font-size: 13px !important;
  color: var(--primary) !important;
  text-shadow: 0 0 8px rgba(0,212,255,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYER 34 — WIN OVERLAY
═══════════════════════════════════════════════════════════════════ */
.ludo-win-overlay {
  background: rgba(2,8,16,0.94) !important;
  backdrop-filter: blur(24px) !important;
}
.ludo-win-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #FFE566, #FFD700, #FFAA00) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.6)) !important;
}
.ludo-win-reward {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 24px !important;
  color: var(--gold-hot) !important;
  text-shadow: 0 0 20px rgba(255,215,0,0.7) !important;
}
.ludo-win-btn.primary {
  background: linear-gradient(180deg, #FFE566, #FFD700, #FF9500) !important;
  box-shadow: var(--edge-top), 0 4px 24px rgba(255,215,0,0.35) !important;
}

/* val-balance flash stays green-hot */
.val-balance {
  font-family: 'Orbitron', sans-serif !important;
}
.val-streak {
  color: var(--gold-hot) !important;
  text-shadow: 0 0 16px rgba(255,215,0,0.7) !important;
}

/* Tap particle upgrade */
.tap-particle {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--primary) !important;
  text-shadow: 0 0 12px rgba(0,212,255,0.8) !important;
}

/* Tap ripple upgrade */
.tap-ripple {
  background: radial-gradient(circle,
    rgba(0,212,255,0.5) 0%,
    rgba(0,212,255,0.1) 60%,
    transparent 100%) !important;
}


/* ─── style block (original order) ─── */


/* ══ V12 ULTRA — PREMIUM FONTS (loaded via <link> in <head> — @import removed to avoid duplicate network load) ══ */

/* ══ V12 ROOT OVERRIDES — HYPER-PREMIUM PALETTE ═══════════════ */
:root {
  --v12-plasma:     #00F5FF;
  --v12-neon-gold:  #FFE533;
  --v12-kill:       #FF2D55;
  --v12-win:        #39FF14;
  --v12-royal:      #7B2FFF;
  --v12-drt:        #00C8FF;
  --v12-bg-deep:    #02060F;
  --v12-surface:    #070F1E;
  --v12-card:       #0B1628;
  --v12-shimmer:    rgba(0,245,255,0.06);
  --v12-glow-plasma:0 0 40px rgba(0,245,255,0.35), 0 0 80px rgba(0,245,255,0.12);
  --v12-glow-gold:  0 0 30px rgba(255,229,51,0.5), 0 0 60px rgba(255,229,51,0.15);
  --v12-glow-kill:  0 0 30px rgba(255,45,85,0.5);
  --v12-glow-royal: 0 0 30px rgba(123,47,255,0.5), 0 0 60px rgba(123,47,255,0.15);
}

/* ══ V12 GLOBAL BACKGROUND — DEPTH MATRIX (static — no animation to avoid repaint) ════════════ */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background: #02060F;
  pointer-events: none;
}

/* ══ V12 HERO CARD — CASINO GRADE ════════════════════════════ */
.hero-card {
  background: linear-gradient(135deg,
    rgba(0,245,255,0.08) 0%,
    rgba(7,15,30,0.95) 40%,
    rgba(123,47,255,0.06) 100%) !important;
  border: 1px solid rgba(0,245,255,0.2) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(0,245,255,0.08),
    0 8px 40px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(0,245,255,0.12),
    inset 0 -1px 0 rgba(123,47,255,0.08) !important;
  position: relative; overflow: hidden !important;
}
.hero-card::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.06), transparent);
  animation: v12HeroShimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes v12HeroShimmer { 0%,100%{left:-100%} 50%{left:200%} }

/* ══ V12 BALANCE — CASINO JACKPOT STYLE ══════════════════════ */
.hero-balance {
  font-family: 'Orbitron', monospace !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #fff 0%, #00F5FF 50%, #7B2FFF 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 20px rgba(0,245,255,0.4)) !important;
  letter-spacing: -1px !important;
}
.hero-token {
  font-family: 'Orbitron', monospace !important;
  color: var(--v12-plasma) !important;
  text-shadow: 0 0 12px var(--v12-plasma) !important;
}

/* ══ V12 MINING BUTTON — PUBG AIRDROP STYLE ═════════════════ */
#mine-btn {
  background: radial-gradient(circle at 50% 40%,
    rgba(0,245,255,0.15) 0%,
    rgba(7,15,30,0.9) 60%) !important;
  border: none !important;
  box-shadow:
    0 0 0 2px rgba(0,245,255,0.2),
    0 0 60px rgba(0,245,255,0.15),
    0 20px 60px rgba(0,0,0,0.7) !important;
}
#mine-btn.active {
  box-shadow:
    0 0 0 3px rgba(57,255,20,0.4),
    0 0 80px rgba(57,255,20,0.25),
    0 0 120px rgba(0,245,255,0.1) !important;
  animation: v12MineBreath 2s ease-in-out infinite !important;
}
@keyframes v12MineBreath {
  0%,100% { box-shadow: 0 0 0 3px rgba(57,255,20,0.4), 0 0 60px rgba(57,255,20,0.2); }
  50%     { box-shadow: 0 0 0 6px rgba(57,255,20,0.2), 0 0 100px rgba(57,255,20,0.35); }
}
#mine-btn::before {
  background: linear-gradient(135deg,
    rgba(0,245,255,0.08),
    rgba(123,47,255,0.06)) !important;
  border: 2px solid rgba(0,245,255,0.15) !important;
}

/* ══ V12 STAT CARDS — BATTLE ROYALE HUD ═════════════════════ */
.stat-card {
  background: linear-gradient(145deg, #0B1628, #07111F) !important;
  border: 1px solid rgba(0,245,255,0.12) !important;
  border-radius: 20px !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(0,245,255,0.08) !important;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.stat-card:hover {
  border-color: rgba(0,245,255,0.3) !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--v12-glow-plasma), 0 8px 40px rgba(0,0,0,0.6) !important;
}
.stat-card-val {
  font-family: 'Orbitron', monospace !important;
  font-size: 19px !important;
  color: #fff !important;
}
.stat-card-lbl {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* ══ V12 BOTTOM NAV — FLOATING ISLAND ═══════════════════════ */
.bottom-nav {
  background: rgba(2,6,15,0.97) !important;
  border-top: 1px solid rgba(0,245,255,0.1) !important;
  box-shadow:
    0 -8px 40px rgba(0,0,0,0.6),
    0 -1px 0 rgba(0,245,255,0.06),
    inset 0 1px 0 rgba(0,245,255,0.05) !important;
  /* Reduced from blur(40px) — heavy on 30fps devices */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
}
.nav-item.active {
  background: linear-gradient(135deg,
    rgba(0,245,255,0.12),
    rgba(123,47,255,0.08)) !important;
  border-radius: 16px !important;
}
.nav-item.active .nav-icon {
  filter: drop-shadow(0 0 14px var(--v12-plasma)) !important;
}
.nav-item.active .nav-label {
  color: var(--v12-plasma) !important;
  text-shadow: 0 0 10px var(--v12-plasma) !important;
}

/* ══ V12 PROGRESS BAR — ROYAL BATTLE ════════════════════════ */
.progress-track {
  height: 10px !important;
  background: rgba(2,6,15,0.9) !important;
  border: 1px solid rgba(0,245,255,0.15) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5) !important;
}
#tap-progress {
  background: linear-gradient(90deg, #7B2FFF, #00F5FF, #39FF14) !important;
  box-shadow: 0 0 20px rgba(0,245,255,0.5) !important;
  border-radius: 10px !important;
  position: relative !important;
}
#tap-progress::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: v12ProgressShine 1.8s linear infinite;
  border-radius: 10px;
}
@keyframes v12ProgressShine { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══ V12 LEADER BOARD — RANKED MATCH ════════════════════════ */
.leader-item {
  background: linear-gradient(135deg, rgba(11,22,40,0.95), rgba(7,15,30,0.9)) !important;
  border: 1px solid rgba(0,245,255,0.1) !important;
  border-radius: 18px !important;
  transition: all 0.25s !important;
}
.leader-item.top1 {
  background: linear-gradient(135deg, rgba(255,229,51,0.1), rgba(11,22,40,0.95)) !important;
  border-color: rgba(255,229,51,0.5) !important;
  box-shadow: var(--v12-glow-gold) !important;
}
.leader-item.top2 {
  background: linear-gradient(135deg, rgba(200,200,200,0.08), rgba(11,22,40,0.95)) !important;
  border-color: rgba(200,200,200,0.4) !important;
}
.leader-item.top3 {
  background: linear-gradient(135deg, rgba(205,127,50,0.1), rgba(11,22,40,0.95)) !important;
  border-color: rgba(205,127,50,0.4) !important;
}

/* ══ V12 SPLASH LOGO — BATTLE ROYALE DROP-IN ════════════════ */
.splash-logo {
  font-family: 'Orbitron', monospace !important;
  font-size: 48px !important;
  background: linear-gradient(135deg, #00F5FF, #7B2FFF, #39FF14) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 30px rgba(0,245,255,0.6)) !important;
}
.splash-ring {
  box-shadow: 0 0 0 2px rgba(0,245,255,0.3), 0 0 60px rgba(0,245,255,0.3) !important;
  animation: v12RingPulse 2s ease-in-out infinite !important;
}
@keyframes v12RingPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,245,255,0.4), 0 0 40px rgba(0,245,255,0.2); }
  50%     { box-shadow: 0 0 0 20px rgba(0,245,255,0), 0 0 80px rgba(0,245,255,0.4); }
}

/* ══ V12 TOAST SYSTEM — BATTLE FEED ═════════════════════════ */
#toast-container {
  bottom: 90px !important;
  right: 12px !important;
  left: unset !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

/* ══ V12 ACTION BTNS ═════════════════════════════════════════ */
.action-btn {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  border-radius: 16px !important;
  background: rgba(11,22,40,0.9) !important;
  border: 1.5px solid rgba(0,245,255,0.18) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,245,255,0.08) !important;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.action-btn:active { transform: scale(0.92) !important; }
.action-btn.gold {
  border-color: rgba(255,229,51,0.4) !important;
  background: rgba(255,229,51,0.07) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 20px rgba(255,229,51,0.15) !important;
}
.action-btn.green {
  border-color: rgba(57,255,20,0.4) !important;
  background: rgba(57,255,20,0.07) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 20px rgba(57,255,20,0.15) !important;
}

/* ══ V12 AUTH SCREEN ═════════════════════════════════════════ */
.auth-logo {
  font-family: 'Orbitron', monospace !important;
  font-size: 34px !important;
  background: linear-gradient(135deg, #00F5FF, #7B2FFF, #FFE533) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(0,245,255,0.5)) !important;
}
.btn-primary {
  font-family: 'Orbitron', monospace !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  background: linear-gradient(135deg, #00C8FF, #7B2FFF) !important;
  box-shadow: 0 8px 40px rgba(0,200,255,0.4), 0 0 0 1px rgba(0,245,255,0.2) !important;
  border-radius: 16px !important;
}
.btn-primary:hover {
  box-shadow: 0 12px 50px rgba(0,200,255,0.55), 0 0 0 1px rgba(0,245,255,0.3) !important;
  transform: translateY(-2px) !important;
}

/* ══ V12 SECTION TITLES ══════════════════════════════════════ */
.section-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-shadow: 0 0 20px rgba(0,245,255,0.3) !important;
}

/* ══ V12 KILL FEED BAR — FOMO PSYCHOLOGY ════════════════════ */
#v12-kill-feed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: env(safe-area-inset-top, 0);
}
.v12-kf-entry {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  background: rgba(2,6,15,0.92);
  border: 1px solid rgba(0,245,255,0.2);
  border-radius: 100px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 20px rgba(0,245,255,0.1);
  animation: v12KFSlide 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  margin-bottom: 4px;
  max-width: 90vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes v12KFSlide {
  from { opacity:0; transform:translateY(-20px) scale(0.9); }
  to   { opacity:1; transform:translateY(0)     scale(1); }
}
.v12-kf-out {
  animation: v12KFOut 0.3s ease-in forwards !important;
}
@keyframes v12KFOut {
  to { opacity:0; transform:translateY(-10px) scale(0.95); }
}
.v12-kf-icon { font-size: 16px; flex-shrink: 0; }
.v12-kf-name { color: var(--v12-plasma); font-weight: 700; }
.v12-kf-amount { color: var(--v12-neon-gold); font-weight: 700; }

/* ══ V12 STREAK MULTIPLIER PULSE ════════════════════════════ */
#v12-streak-bar {
  position: fixed; bottom: 76px; left: 0; right: 0;
  z-index: 8000; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.4s;
}
#v12-streak-bar.show { opacity: 1; }
.v12-streak-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(255,45,85,0.15), rgba(123,47,255,0.12));
  border: 1.5px solid rgba(255,45,85,0.4);
  border-radius: 100px;
  font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 1px;
  color: #fff;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(255,45,85,0.25), 0 0 60px rgba(255,45,85,0.1);
  animation: v12StreakPulse 1.5s ease-in-out infinite;
}
@keyframes v12StreakPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(255,45,85,0.25); }
  50%     { box-shadow: 0 4px 40px rgba(255,45,85,0.5), 0 0 80px rgba(255,45,85,0.15); }
}

/* ══ V12 MINE BUTTON AREA SCAN RING ═════════════════════════ */
.mine-btn-wrap::before {
  content: '';
  position: absolute; inset: -20px;
  border-radius: 50%;
  border: 1px solid rgba(0,245,255,0.1);
  animation: v12ScanRing 3s linear infinite;
  pointer-events: none;
}
.mine-btn-wrap::after {
  content: '';
  position: absolute; inset: -40px;
  border-radius: 50%;
  border: 1px solid rgba(123,47,255,0.07);
  animation: v12ScanRing 4s linear infinite 1s;
  pointer-events: none;
}
@keyframes v12ScanRing {
  0%   { transform: scale(0.8); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ══ V12 BALANCE COUNTER ROLL ANIMATION ═════════════════════ */
@keyframes v12BalanceTick {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-4px); }
  75%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}
.v12-balance-tick {
  animation: v12BalanceTick 0.15s ease;
}

/* ══ V12 CASINO COIN BURST ═══════════════════════════════════ */
@keyframes v12CoinBurst {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--cx),var(--cy)) scale(0) rotate(var(--cr)); opacity: 0; }
}

/* ══ V12 LEVEL-UP OVERLAY ════════════════════════════════════ */
#v12-levelup-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: rgba(2,6,15,0.92);
  backdrop-filter: blur(20px);
}
#v12-levelup-overlay.show { display: flex; animation: v12LUFadeIn 0.4s ease; }
@keyframes v12LUFadeIn { from{opacity:0} to{opacity:1} }
.v12-lu-card {
  text-align: center; padding: 48px 36px;
  background: linear-gradient(145deg, rgba(123,47,255,0.2), rgba(0,245,255,0.08));
  border: 1px solid rgba(0,245,255,0.25);
  border-radius: 32px;
  box-shadow: var(--v12-glow-plasma), var(--v12-glow-royal);
  max-width: 320px; width: 90%;
}
.v12-lu-emoji {
  font-size: 80px;
  animation: v12LUBounce 0.6s 0.2s cubic-bezier(0.34,1.8,0.64,1) both;
  display: block; margin-bottom: 16px;
}
@keyframes v12LUBounce { from{transform:scale(0) rotate(-20deg)} to{transform:scale(1) rotate(0)} }
.v12-lu-title {
  font-family: 'Orbitron', monospace;
  font-size: 28px; font-weight: 700;
  background: linear-gradient(135deg, #FFE533, #00F5FF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(255,229,51,0.5));
  margin-bottom: 8px;
}
.v12-lu-level {
  font-family: 'Rajdhani', sans-serif;
  font-size: 64px; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, #7B2FFF, #00F5FF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin: 8px 0;
}
.v12-lu-reward {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px; letter-spacing: 1px;
  color: var(--v12-win); margin-bottom: 24px;
}
.v12-lu-btn {
  padding: 14px 40px; border: none; border-radius: 100px;
  background: linear-gradient(135deg, #7B2FFF, #00F5FF);
  font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 700;
  color: #fff; letter-spacing: 2px; cursor: pointer;
  box-shadow: var(--v12-glow-plasma);
  transition: all 0.2s;
}
.v12-lu-btn:active { transform: scale(0.95); }

/* ══ V12 JACKPOT FLASH ═══════════════════════════════════════ */
@keyframes v12JackpotFlash {
  0%,100%  { background: rgba(2,6,15,0.97); }
  10%,30%  { background: rgba(255,229,51,0.15); }
  20%,40%  { background: rgba(2,6,15,0.97); }
}

/* ══ V12 FLOATING REWARD ═════════════════════════════════════ */
.v12-float-reward {
  position: fixed; pointer-events: none; z-index: 9999;
  font-family: 'Orbitron', monospace; font-weight: 700;
  font-size: 15px;
  animation: v12FloatUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes v12FloatUp {
  0%   { opacity:1; transform:translateY(0) scale(1); }
  60%  { opacity:1; transform:translateY(-50px) scale(1.1); }
  100% { opacity:0; transform:translateY(-90px) scale(0.8); }
}

/* ══ V12 ENERGY EXPLOSION ════════════════════════════════════ */
@keyframes v12EnergyPop {
  0%   { transform:scale(1); }
  30%  { transform:scale(1.15); }
  60%  { transform:scale(0.95); }
  100% { transform:scale(1); }
}

/* ══ V12 TIKTOK-STYLE STREAK COUNTER ════════════════════════ */
#v12-tap-streak {
  position: absolute; top: -20px; right: -20px; z-index: 10;
  display: none;
  flex-direction: column; align-items: center;
  pointer-events: none;
}
#v12-tap-streak.show { display: flex; }
.v12-ts-num {
  font-family: 'Orbitron', monospace; font-size: 28px; font-weight: 700;
  color: #FFE533;
  text-shadow: var(--v12-glow-gold);
  animation: v12TSPulse 0.3s ease;
}
@keyframes v12TSPulse {
  0%   { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.v12-ts-label {
  font-family: 'Rajdhani', sans-serif; font-size: 11px; letter-spacing: 2px;
  color: rgba(255,255,255,0.6);
}

/* ══ V12 REWARD BADGE ════════════════════════════════════════ */
.v12-reward-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 100px;
  font-family: 'Rajdhani', sans-serif; font-size: 14px; letter-spacing: 1px;
  animation: v12BadgePop 0.5s cubic-bezier(0.34,1.8,0.64,1) both;
}
@keyframes v12BadgePop { from{transform:scale(0)} to{transform:scale(1)} }

/* ══ V12 CRYPTO TICKER ═══════════════════════════════════════ */
#v12-crypto-ticker {
  position: fixed; bottom: 76px; left: 0; right: 0;
  z-index: 7500; pointer-events: none;
  overflow: hidden; height: 30px;
  display: none; align-items: center;
  opacity: 0; transition: opacity 0.6s ease;
}
#v12-crypto-ticker.ticker-visible {
  display: flex;
  opacity: 1;
}
/* LIVE badge on the left */
#v12-ticker-live-badge {
  position: absolute; left: 0; top: 0; bottom: 0;
  z-index: 2; pointer-events: none;
  display: flex; align-items: center; gap: 5px;
  padding: 0 10px 0 8px;
  background: linear-gradient(90deg, rgba(2,6,15,0.98) 70%, transparent 100%);
  font-family: 'Orbitron', sans-serif; font-size: 8px; font-weight: 700;
  letter-spacing: 1.5px; color: #00ff88;
  white-space: nowrap;
}
#v12-ticker-live-badge .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
  animation: liveDotPulse 1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes liveDotPulse {
  0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px #00ff88; }
  50%      { opacity: 0.4; transform: scale(0.7); box-shadow: 0 0 2px #00ff88; }
}
.v12-ticker-track {
  display: flex; gap: 28px;
  white-space: nowrap;
  /* 50s for 13 coins — smooth constant speed */
  animation: v12TickerScroll 50s linear infinite;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.5px; color: rgba(0,245,255,0.7);
  background: rgba(2,6,15,0.88);
  padding: 4px 0 4px 72px;
  border-top: 1px solid rgba(0,245,255,0.1);
  border-bottom: 1px solid rgba(0,245,255,0.1);
  width: max-content; min-width: 200%;
  backdrop-filter: blur(4px);
}
@keyframes v12TickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.v12-ticker-item { display: inline-flex; align-items: center; gap: 5px; }
.v12-ticker-symbol { color: rgba(0,245,255,0.6); font-size: 10px; letter-spacing: 1.5px; font-weight: 700; }
.v12-ticker-price { color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600; }
.v12-ticker-up   { color: #00ff88; font-weight: 700; font-size: 11px; }
.v12-ticker-down { color: #ff4466; font-weight: 700; font-size: 11px; }
.v12-ticker-sep  { color: rgba(0,245,255,0.2); margin: 0 2px; }

/* ══ V12 XRAY SCAN LINE ══════════════════════════════════════ */
#v12-scan {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.v12-scan-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.12), transparent);
  animation: v12ScanMove 8s linear infinite;
}
@keyframes v12ScanMove { 0%{top:-1px} 100%{top:100vh} }

/* ══ V12 MINING ORBS ═════════════════════════════════════════ */
.v12-orb-plasma {
  background: radial-gradient(circle, rgba(0,245,255,0.18), transparent 70%) !important;
  animation: v12OrbPulse 10s ease-in-out infinite !important;
}
.v12-orb-royal {
  background: radial-gradient(circle, rgba(123,47,255,0.14), transparent 70%) !important;
  animation: v12OrbPulse 13s ease-in-out infinite reverse !important;
}
.v12-orb-gold {
  background: radial-gradient(circle, rgba(255,229,51,0.09), transparent 70%) !important;
}
@keyframes v12OrbPulse {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.8; }
  50%     { transform: translateY(-40px) scale(1.1); opacity: 1; }
}

/* ══ V12 FONT OVERRIDES — KEY UI ELEMENTS ════════════════════ */
.top-logo {
  font-family: 'Orbitron', monospace !important;
  font-size: 20px !important;
  background: linear-gradient(90deg, #00F5FF, #7B2FFF) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 12px rgba(0,245,255,0.4)) !important;
}
.mine-label {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 3px !important;
}
.sub-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 20px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* ══ V12 CARD ENTRY ANIMATIONS ═══════════════════════════════ */
.stat-card:nth-child(1) { animation: v12CardFadeIn 0.5s 0.1s ease both; }
.stat-card:nth-child(2) { animation: v12CardFadeIn 0.5s 0.2s ease both; }
.stat-card:nth-child(3) { animation: v12CardFadeIn 0.5s 0.3s ease both; }
.stat-card:nth-child(4) { animation: v12CardFadeIn 0.5s 0.4s ease both; }
@keyframes v12CardFadeIn {
  from { opacity:0; transform:translateY(20px) scale(0.95); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* ══ V12 CORNER BRACKET DECORATION ══════════════════════════ */
.hero-card > .v12-bracket-tl,
.hero-card > .v12-bracket-br {
  position: absolute; width: 20px; height: 20px;
  pointer-events: none;
}
.v12-bracket-tl {
  top: 10px; left: 10px;
  border-top: 2px solid rgba(0,245,255,0.4);
  border-left: 2px solid rgba(0,245,255,0.4);
  border-radius: 4px 0 0 0;
}
.v12-bracket-br {
  bottom: 10px; right: 10px;
  border-bottom: 2px solid rgba(123,47,255,0.4);
  border-right: 2px solid rgba(123,47,255,0.4);
  border-radius: 0 0 4px 0;
}

/* ══ V12 MINE BUTTON INNER TEXT ══════════════════════════════ */
.mine-icon {
  filter: drop-shadow(0 0 20px rgba(0,245,255,0.6)) !important;
  font-size: 52px !important;
}

/* ══ V12 PHASE PILL ══════════════════════════════════════════ */
.phase-pill {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  background: rgba(255,229,51,0.12) !important;
  border: 1px solid rgba(255,229,51,0.35) !important;
  box-shadow: 0 0 16px rgba(255,229,51,0.2) !important;
}

/* ══ V12 HERO STATS ROW ══════════════════════════════════════ */
.stat-mini-val {
  font-family: 'Orbitron', monospace !important;
  font-size: 14px !important;
}

/* ══ V12 BACK BUTTON ═════════════════════════════════════════ */
.back-btn {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 22px !important;
  background: rgba(0,245,255,0.08) !important;
  border: 1px solid rgba(0,245,255,0.2) !important;
}