@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800;900&display=swap");
/* ═══════════════════════════════════════════════════
   UNITED BINGO — PREMIUM v4
   Stake/Duelbits-style dark gaming UI
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --bg0: #07111F;
  --bg1: #0E1A2B;
  --bg2: #152433;
  --card: rgba(255,255,255,0.04);
  --card2: rgba(255,255,255,0.07);
  --card-border: rgba(255,255,255,0.07);

  /* ── Text ── */
  --text: #FFFFFF;
  --text-secondary: #B0B7C3;
  --text-muted: #6B7280;
  --text-highlight: #C7FF00;

  /* ── Accents ── */
  --lime: #C7FF00;
  --lime-dim: rgba(199,255,0,0.10);
  --lime-border: rgba(199,255,0,0.25);
  --purple: #A855F7;
  --purple-dim: rgba(168,85,247,0.12);
  --purple-border: rgba(168,85,247,0.25);
  --green: #22C55E;
  --green-dim: rgba(34,197,94,0.12);
  --green-border: rgba(34,197,94,0.25);
  --amber: #F59E0B;
  --amber-dim: rgba(245,158,11,0.12);
  --amber-border: rgba(245,158,11,0.25);
  --danger: #EF4444;
  --danger-dim: rgba(239,68,68,0.12);
  --danger-border: rgba(239,68,68,0.25);

  /* ── Legacy aliases ── */
  --accent: #22C55E;
  --accent2: #C7FF00;
  --gold: #F59E0B;
  --gold2: #F59E0B;
  --line: rgba(255,255,255,0.08);
  --muted: #6B7280;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.40);
  --shadow: 0 4px 20px rgba(0,0,0,0.50);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.60);
  --shadow-lime: 0 4px 20px rgba(199,255,0,0.15);
  --shadow-purple: 0 4px 20px rgba(168,85,247,0.20);
  --shadow-green: 0 4px 16px rgba(34,197,94,0.18);

  /* ── Gradients ── */
  --grad-lime: linear-gradient(135deg,#C7FF00,#A8D900);
  --grad-purple: linear-gradient(135deg,#9333EA,#C084FC);
  --grad-green: linear-gradient(135deg,#16A34A,#22C55E);

  /* ── Radius ── */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ── Nav ── */
  --bottom-nav-h: 64px;
  --bottom-nav-space: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}

:root[data-theme="light"] {
  --bg0: #F0F4F8;
  --bg1: #FFFFFF;
  --bg2: #E8EDF2;
  --card: rgba(0,0,0,0.04);
  --card2: rgba(0,0,0,0.06);
  --card-border: rgba(0,0,0,0.08);
  --text: #0D1117;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;
  --line: rgba(0,0,0,0.08);
  --muted: #9CA3AF;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: "Inter", "Noto Sans Ethiopic", "Noto Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  padding: 12px 14px calc(20px + var(--bottom-nav-space));
  max-width: 520px;
  margin: 0 auto;
}
@keyframes fadeIn   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn  { from{transform:scale(0.94);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:0.55} }
@keyframes timerPulse { 0%,100%{opacity:1} 50%{opacity:0.65} }
@keyframes calls-flash { 0%{color:var(--lime);transform:scale(1.25)} 100%{color:var(--text);transform:scale(1)} }
@keyframes dot-pulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.5);opacity:1} }
@keyframes robot-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes eye-blink { 0%,90%,100%{transform:scaleY(1)} 95%{transform:scaleY(0.1)} }
@keyframes card-wave { 0%,100%{transform:rotate(-10deg) translateY(0)} 50%{transform:rotate(10deg) translateY(-4px)} }
@keyframes text-glow { 0%,100%{opacity:1} 50%{opacity:0.75} }
@keyframes scan-line { 0%{top:-40%} 100%{top:120%} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
/* ── Bottom Navigation ── */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:900;height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--bg1);border-top:1px solid var(--card-border);box-shadow:0 -4px 24px rgba(0,0,0,0.40);}
:root[data-theme="light"] .bottom-nav{background:#fff;border-top:1px solid rgba(0,0,0,0.08);}
.bottom-nav-inner{height:var(--bottom-nav-h);max-width:520px;margin:0 auto;padding:0 8px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;}
.bn-item{appearance:none;border:none;background:transparent;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;border-radius:var(--r-md);cursor:pointer;user-select:none;transition:color 0.2s,background 0.2s,transform 0.15s;font-family:inherit;}
.bn-item:active{transform:scale(0.90);}
.bn-ic{width:24px;height:24px;display:grid;place-items:center;transition:transform 0.2s;}
.bn-tx{font-weight:600;font-size:10px;letter-spacing:0.2px;}
.bn-item.bn-active{color:var(--lime);}
.bn-item.bn-active .bn-ic{transform:translateY(-2px);}
@media(min-width:520px){.bottom-nav-inner{padding:0 16px;}}

/* ── Top Bar ── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-radius:var(--r-lg);background:var(--bg1);border:1px solid var(--card-border);}
.brand{display:flex;align-items:center;gap:10px;}
.logo{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-md);font-weight:900;font-size:12px;background:var(--grad-lime);color:#071018;box-shadow:var(--shadow-lime);}
.title{font-weight:800;font-size:15px;color:var(--text);}
.subtitle{color:var(--text-muted);font-size:11px;margin-top:1px;}
.chips{display:flex;gap:6px;flex-wrap:nowrap;align-items:center;}
.chip{padding:6px 10px;border-radius:var(--r-pill);border:1px solid var(--card-border);background:var(--bg2);font-size:11px;font-weight:600;color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.chip-live{border-color:var(--green-border);background:var(--green-dim);color:var(--green);font-weight:700;}
.chip-good{border-color:var(--amber-border);background:var(--amber-dim);color:var(--amber);font-weight:700;}
.chip-accent{border-color:var(--lime-border);background:var(--lime-dim);color:var(--lime);font-weight:700;}
.chip-num-bonus{color:var(--amber);font-weight:800;}
.chip-num-balance{color:var(--lime);font-weight:800;}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;}
.icon-btn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--card-border);background:var(--bg2);color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;transition:background 0.15s,transform 0.12s;flex-shrink:0;}
.icon-btn.icon-btn-mini{width:28px;height:28px;border-radius:var(--r-pill);}
.icon-btn:active{transform:scale(0.92);background:var(--card2);}
:root[data-theme="light"] .icon-btn{border-color:rgba(0,0,0,0.10);background:rgba(0,0,0,0.04);color:rgba(0,0,0,0.65);}

/* ── View & Layout ── */
.view{margin-top:14px;}
.notice{margin-top:10px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--danger-border);background:var(--danger-dim);color:var(--text);font-size:13px;font-weight:600;}
.h{font-weight:800;font-size:15px;color:var(--text);}
.p{color:var(--text-secondary);font-size:13px;margin-top:4px;}
.small{color:var(--text-muted);font-size:12px;}
.page-title{font-weight:800;font-size:17px;color:var(--text);}
.page-sub{margin-top:4px;color:var(--text-secondary);font-size:12px;}
.page-note{margin-top:10px;display:inline-block;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--card-border);background:var(--bg2);color:var(--text-secondary);font-weight:600;font-size:12px;}
.page-actions{margin-top:12px;display:flex;justify-content:flex-end;}
.page-card{border:1px solid var(--card-border);border-radius:var(--r-lg);background:var(--bg1);padding:16px;}
.kv-list{margin-top:12px;display:grid;gap:8px;}
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--bg2);font-weight:600;}
.kv span:first-child{color:var(--text-muted);font-size:12px;}

/* ── Buttons ── */
.btn{border:1px solid var(--card-border);background:var(--bg2);color:var(--text);padding:11px 16px;border-radius:var(--r-md);cursor:pointer;font-weight:700;font-size:13px;transition:background 0.15s,transform 0.12s;font-family:inherit;}
.btn:active{transform:scale(0.96);}
.btn-sm{padding:7px 12px;font-size:12px;}
.btn-primary{border-color:var(--lime-border);background:var(--lime-dim);color:var(--lime);}
.btn-primary:active{background:rgba(199,255,0,0.18);}
.btn-lg{padding:15px 22px;font-size:15px;font-weight:800;border-radius:var(--r-lg);}

/* ── Lobby ── */
.lobby-title{text-align:center;font-weight:800;font-size:16px;letter-spacing:1px;color:var(--text-secondary);text-transform:uppercase;margin-bottom:12px;padding:0 4px;}

/* ── Room Cards ── */
.room-table-wrap{margin-top:4px;}
.room-table{display:grid;gap:8px;background:transparent;border:none;box-shadow:none;}
.room-table-header{display:none;}
.room-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:16px;background:var(--bg1);border:1px solid var(--card-border);}
.room-row:last-child{border-bottom:1px solid rgba(168,85,247,0.30);}

/* Fee section */
.room-fee-section{display:flex;flex-direction:column;align-items:center;min-width:40px;}
.room-fee-number{font-size:24px;font-weight:900;color:#fff;line-height:1;}
.room-fee-label{font-size:11px;color:rgba(255,255,255,0.6);font-weight:600;margin-top:2px;}

/* Prize section */
.room-prize-section{display:flex;flex-direction:column;align-items:center;flex:1;gap:3px;}
.room-prize-amount{font-size:20px;font-weight:900;color:#F59E0B;line-height:1;}
.room-prize-players{font-size:11px;color:rgba(255,255,255,0.7);font-weight:600;}

/* Status section */
.room-status-section{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:72px;}
.room-no-players{font-size:11px;font-weight:800;letter-spacing:0.8px;text-transform:uppercase;}
.room-ready{color:#4FFFB0;text-shadow:0 0 8px rgba(79,255,176,0.7);}
.room-playing{color:#EF4444;text-shadow:0 0 8px rgba(239,68,68,0.7);}
.room-starts-label{font-size:10px;color:rgba(255,255,255,0.6);font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.room-countdown{font-size:18px;font-weight:900;color:#fff;line-height:1;}

/* Join section */
.room-join-section{display:flex;align-items:center;}

/* Legacy compat */
.room-bet{font-weight:800;font-size:14px;color:var(--text);min-width:55px;}
.room-bet-demo{color:var(--green);font-size:12px;font-weight:800;}
.room-win{display:flex;flex-direction:column;gap:1px;flex:1;}
.room-win-amount{font-weight:600;font-size:11px;color:var(--text-secondary);}
.room-player-count{font-weight:600;font-size:10px;color:var(--amber);}
.room-status-join{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.room-empty{text-align:center;color:var(--text-muted);font-size:13px;padding:20px 0;}

/* Status badges */
.status-badge{font-size:10px;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;font-weight:800;letter-spacing:0.5px;}
.status-badge.status-running,.status-badge.status-running{background:rgba(34,197,94,0.20);border:1px solid rgba(34,197,94,0.45);color:#22C55E;}
.status-badge.status-active{background:rgba(59,130,246,0.20);border:1px solid rgba(59,130,246,0.45);color:#60A5FA;}
.status-badge.status-waiting{background:rgba(107,114,128,0.25);border:1px solid rgba(107,114,128,0.40);color:rgba(255,255,255,0.65);}
/* legacy badge variants */
.status-badge.status-waiting-players{border-color:var(--purple-border);background:var(--purple-dim);color:var(--purple);}

/* JOIN button */
.btn-join{border:none;background:#16A34A;color:#fff;padding:10px 20px;border-radius:12px;cursor:pointer;font-weight:900;font-size:15px;min-width:70px;transition:opacity 0.15s,transform 0.12s;font-family:inherit;white-space:nowrap;}
.btn-join:active{transform:scale(0.94);opacity:0.9;}
.btn-join:disabled{background:rgba(34,197,94,0.25);opacity:0.5;cursor:not-allowed;}
.btn-join-demo{background:#16A34A;}
.btn-join-demo:disabled{background:rgba(34,197,94,0.15);}
.lobby-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:0 4px;}
.lobby-footer-text{color:var(--text-muted);font-size:11px;}

/* ── Coming Soon Banner ── */
.coming-soon-banner{margin-top:16px;padding:18px 14px 14px;border-radius:var(--r-lg);border:1px solid var(--green-border);background:var(--bg1);display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden;position:relative;}
.coming-soon-banner::before{content:'';position:absolute;top:-100%;left:0;right:0;height:40%;background:linear-gradient(180deg,transparent,rgba(34,197,94,0.05),transparent);animation:scan-line 3s linear infinite;}
.csb-robots{display:flex;gap:20px;align-items:flex-end;}
.csb-robot{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;}
.csb-robot-1{animation:robot-bounce 1.8s ease-in-out infinite;}
.csb-robot-2{animation:robot-bounce 1.8s ease-in-out infinite 0.3s;}
.csb-robot-3{animation:robot-bounce 1.8s ease-in-out infinite 0.6s;}
.csb-head{width:22px;height:18px;border-radius:6px 6px 3px 3px;background:var(--lime);border:2px solid #fff;position:relative;}
.csb-head::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:4px;height:5px;background:#fff;border-radius:2px;}
.csb-body{width:26px;height:22px;border-radius:4px;background:#A3D900;border:2px solid #fff;display:flex;align-items:center;justify-content:center;gap:4px;}
.csb-eye{width:5px;height:5px;border-radius:50%;background:#fff;animation:eye-blink 3s ease-in-out infinite;}
.csb-robot-2 .csb-eye{animation-delay:1s;}
.csb-robot-3 .csb-eye{animation-delay:2s;}
.csb-card{font-size:18px;animation:card-wave 1.8s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(198,255,0,0.7));}
.csb-robot-1 .csb-card{animation-delay:0s;}
.csb-robot-2 .csb-card{animation-delay:0.3s;}
.csb-robot-3 .csb-card{animation-delay:0.6s;}
.csb-text{display:flex;flex-direction:column;align-items:center;gap:2px;}
.csb-more{font-size:12px;font-weight:900;color:var(--lime);letter-spacing:3px;text-transform:uppercase;animation:text-glow 2s ease-in-out infinite;}
.csb-soon{font-size:20px;font-weight:900;color:#fff;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 20px rgba(198,255,0,0.5);animation:text-glow 2s ease-in-out infinite 0.5s;}
.csb-dots{display:flex;gap:6px;}
.csb-dots span{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:dot-pulse 1.4s ease-in-out infinite;}
.csb-dots span:nth-child(2){animation-delay:0.2s;background:#fff;}
.csb-dots span:nth-child(3){animation-delay:0.4s;}

/* ── Segment Controls ── */
.seg{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:var(--r-lg);border:1px solid var(--card-border);background:var(--bg2);}
.seg.seg-2{grid-template-columns:repeat(2,1fr);}
.seg-btn{border:1px solid transparent;background:transparent;color:var(--text-muted);padding:9px 8px;border-radius:var(--r-md);font-weight:600;font-size:12px;cursor:pointer;transition:all 0.18s;font-family:inherit;}
.seg-btn:active{transform:scale(0.96);}
.seg-btn.seg-active{border-color:var(--card-border);background:var(--bg1);color:var(--text);font-weight:700;}

/* ── Score Board ── */
.score-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.score-bubbles{margin-top:14px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;}
.sb{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.20),transparent 45%),linear-gradient(135deg,var(--av,#8b5cf6),rgba(0,0,0,0.20));}
.score-caption{margin-top:10px;text-align:center;font-weight:600;color:var(--text-secondary);font-size:13px;}
.score-empty{margin-top:12px;padding:20px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--bg2);color:var(--text-muted);font-weight:600;font-size:13px;text-align:center;}
.lb-list{margin-top:12px;display:grid;gap:8px;}
.lb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--bg1);}
.lb-row.me{border-color:var(--lime-border);background:var(--lime-dim);}
.lb-left{display:flex;align-items:center;gap:10px;min-width:0;}
.lb-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.20),transparent 45%),linear-gradient(135deg,var(--av,#6366f1),rgba(0,0,0,0.20));flex-shrink:0;}
.lb-names{display:grid;gap:2px;min-width:0;}
.lb-name{font-weight:700;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-sub{font-weight:500;font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-score{font-weight:800;font-size:16px;color:var(--lime);flex-shrink:0;}

/* ── History ── */
.history-empty{margin-top:12px;padding:20px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--bg2);color:var(--text-muted);font-weight:600;font-size:13px;text-align:center;}
.history-list{margin-top:12px;display:grid;gap:8px;}
.history-list.history-list2{margin-top:12px;}
.h2-item{border:1px solid var(--card-border);border-radius:var(--r-lg);background:var(--bg1);padding:14px;display:grid;grid-template-columns:42px 1fr;gap:12px;}
.h2-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;border:2px solid rgba(255,255,255,0.08);}
.h2-ic.win{border-color:var(--green-border);color:var(--green);background:var(--green-dim);}
.h2-ic.loss{border-color:var(--danger-border);color:var(--danger);background:var(--danger-dim);}
.h2-ic.no{border-color:var(--amber-border);color:var(--amber);background:var(--amber-dim);}
.h2-main{min-width:0;}
.h2-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.h2-status{font-weight:700;font-size:14px;color:var(--text);}
.h2-ref{margin-top:3px;color:var(--text-muted);font-weight:500;font-size:11px;}
.h2-right{display:grid;justify-items:end;gap:5px;flex-shrink:0;}
.h2-meta{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-weight:500;font-size:11px;}
.h2-amt{font-weight:800;font-size:13px;}
.h2-amt.win{color:var(--green);}
.h2-amt.loss{color:var(--danger);}
.h2-amt.no{color:var(--amber);}
.h-item{border:1px solid var(--card-border);border-radius:var(--r-md);background:var(--bg1);padding:14px;}
.h-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.h-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,0.08);background:var(--bg2);font-weight:700;font-size:10px;letter-spacing:0.4px;text-transform:uppercase;}
.h-badge.win{border-color:var(--green-border);background:var(--green-dim);color:var(--green);}
.h-badge.loss{border-color:var(--danger-border);background:var(--danger-dim);color:var(--danger);}
.h-badge.no{border-color:var(--amber-border);background:var(--amber-dim);color:var(--amber);}
.h-amt{font-weight:800;font-size:14px;}
.h-amt.win{color:var(--green);}
.h-amt.loss{color:var(--danger);}
.h-amt.no{color:var(--amber);}
.h-meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;font-size:12px;font-weight:500;}
.h-chip{padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--card-border);background:var(--bg2);color:var(--text-secondary);}
.h-sub{margin-top:8px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--text-muted);font-size:12px;font-weight:500;}
.h-sub .right{color:var(--text-secondary);font-weight:600;}

/* ── Wallet ── */
.wallet-page{border:1px solid var(--card-border);border-radius:var(--r-xl);background:var(--bg1);padding:16px;}
.wallet-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.wallet-title{font-weight:800;font-size:20px;color:var(--text);}
.wallet-user{margin-top:14px;display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-lg);border:1px solid var(--card-border);background:var(--bg2);}
.wallet-user-ic{width:36px;height:36px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--lime-dim);border:1px solid var(--lime-border);font-size:18px;}
.wallet-user-main{min-width:0;flex:1;}
.wallet-user-id{font-weight:700;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wallet-user-badge{font-weight:700;font-size:11px;padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--amber-border);background:var(--amber-dim);color:var(--amber);white-space:nowrap;}
.wallet-user-badge.ok{border-color:var(--green-border);background:var(--green-dim);color:var(--green);}
.wallet-tabs{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:var(--r-lg);border:1px solid var(--card-border);background:var(--bg2);}
.wt-btn{border:1px solid transparent;background:transparent;color:var(--text-muted);padding:10px 8px;border-radius:var(--r-md);font-weight:600;font-size:13px;cursor:pointer;transition:all 0.18s;font-family:inherit;}
.wt-btn:active{transform:scale(0.96);}
.wt-btn.wt-active{border-color:var(--card-border);background:var(--bg1);color:var(--text);font-weight:700;}
.wallet-card{margin-top:12px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--card-border);background:var(--bg2);}
.wallet-card.wallet-card-mini{padding:14px 16px;}
.wallet-card-k{display:flex;align-items:center;gap:7px;color:var(--text-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;}
.wallet-card-ic{opacity:0.75;}
.wallet-card-v{margin-top:8px;font-weight:800;font-size:26px;color:var(--text);}
.wallet-card-v.wallet-card-v-good{color:var(--lime);}
.wallet-empty{margin-top:12px;padding:20px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--bg2);color:var(--text-muted);font-weight:600;font-size:13px;text-align:center;}
.wallet-tx{margin-top:12px;display:grid;gap:8px;}
.tx-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--bg2);}
.tx-left{min-width:0;}
.tx-title{font-weight:700;font-size:13px;color:var(--text);}
.tx-sub{margin-top:3px;font-weight:500;font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tx-amt{font-weight:800;font-size:14px;}
.tx-amt.pos{color:var(--green);}
.tx-amt.neg{color:var(--amber);}
.wallet-bar{display:flex;align-items:center;gap:8px;padding:14px;border:1px solid var(--card-border);border-radius:var(--r-md);background:var(--bg2);font-size:14px;font-weight:600;}
.wallet-bar-icon{font-size:18px;}
.wallet-bar-amount{margin-left:auto;font-weight:800;font-size:16px;display:inline-flex;align-items:baseline;gap:6px;}
.wb-k{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.4px;}
.wb-v{font-size:15px;font-weight:800;color:var(--text);}
.wb-sep{opacity:0.25;font-weight:600;}

/* ── Profile ── */
.profile-card{border:1px solid var(--card-border);border-radius:var(--r-xl);background:var(--bg1);padding:16px;}
.profile-hero{position:relative;border-radius:var(--r-lg);padding:22px 16px 20px;border:1px solid var(--card-border);background:var(--bg2);}
:root[data-theme="light"] .profile-hero{background:rgba(0,0,0,0.03);}
.profile-refresh{position:absolute;top:12px;right:12px;}
.profile-avatar{width:84px;height:84px;margin:0 auto;border-radius:50%;border:2px solid var(--lime-border);background:var(--bg1);overflow:hidden;display:grid;place-items:center;}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:none;}
.profile-avatar-fallback{font-weight:800;font-size:22px;color:var(--lime);}
.profile-handle{margin-top:12px;text-align:center;font-weight:800;font-size:18px;color:var(--text);}
.profile-sub{margin-top:4px;text-align:center;color:var(--text-muted);font-weight:500;font-size:12px;}
.profile-stats{margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.pstat{border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--bg2);padding:14px;min-height:72px;display:grid;align-content:center;gap:5px;}
:root[data-theme="light"] .pstat{background:rgba(0,0,0,0.03);}
.pstat-k{color:var(--text-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.4px;}
.pstat-v{font-weight:800;font-size:18px;color:var(--text);}
.profile-settings-title{margin-top:18px;font-weight:700;font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;}
.profile-settings{margin-top:8px;display:grid;gap:8px;}
.ps-row{border:1px solid var(--card-border);background:var(--bg2);border-radius:var(--r-md);padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
:root[data-theme="light"] .ps-row{background:rgba(0,0,0,0.03);}
.ps-action{appearance:none;width:100%;text-align:left;cursor:pointer;font-family:inherit;transition:transform 0.12s;}
.ps-action:active{transform:scale(0.98);}
.ps-left{display:inline-flex;align-items:center;gap:10px;min-width:0;}
.ps-ic{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;border:1px solid var(--card-border);background:var(--bg1);flex-shrink:0;}
.ps-tx{font-weight:600;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ps-right{display:inline-flex;align-items:center;gap:7px;color:var(--text-muted);font-weight:600;font-size:12px;}
.ps-arrow{font-size:18px;line-height:1;color:var(--text-muted);}
.switch{position:relative;width:46px;height:28px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch-ui{position:absolute;inset:0;border-radius:var(--r-pill);background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.12);transition:background 160ms,border-color 160ms;}
.switch-ui::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.25);transition:transform 160ms;}
.switch input:checked + .switch-ui{background:rgba(199,255,0,0.20);border-color:var(--lime-border);}
.switch input:checked + .switch-ui::after{transform:translateX(18px);background:var(--lime);}

/* ── Game Top Bar ── */
.game-topbar{display:flex;align-items:center;gap:4px;padding:6px 8px;border:1px solid var(--card-border);border-radius:var(--r-lg);background:var(--bg1);box-shadow:var(--shadow);flex-wrap:nowrap;overflow:hidden;}
.game-topbar-btn{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.06);color:var(--text);font-size:15px;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background 0.15s,transform 0.12s;}
.game-topbar-btn:active{transform:scale(0.92);}
.game-topbar-btn .voice-slash{display:none;}
.game-topbar-btn.voice-off .voice-slash{display:block;}
.game-topbar-btn.voice-off{opacity:0.60;}
.game-topbar-chip{display:flex;flex-direction:column;align-items:center;padding:3px 5px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.04);flex:1;min-width:0;}
.game-topbar-label{font-size:8px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.3px;white-space:nowrap;}
.game-topbar-value{font-weight:800;font-size:12px;color:var(--text);white-space:nowrap;}
.game-topbar-chip-status{border-color:var(--amber-border);}
.calls-updated{animation:calls-flash 0.6s ease-out forwards;}

/* ── Game Timer ── */
.game-timer{margin-top:10px;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--amber-border);background:var(--amber-dim);text-align:center;font-weight:800;font-size:14px;color:var(--amber);animation:timerPulse 1.5s infinite;}

/* ── Game Layout ── */
.game-layout{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;align-items:stretch;}
.drawn-panel{border:1px solid var(--card-border);border-radius:var(--r-md);background:var(--bg1);padding:8px;overflow:hidden;display:flex;flex-direction:column;}
.bingo-col-headers{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:6px;}
.col-hdr{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:12px;color:#fff;justify-self:center;}
.col-b{background:#3B82F6;}
.col-i{background:#EF4444;}
.col-n{background:var(--lime);color:#07130F;}
.col-g{background:var(--purple);}
.col-o{background:#F97316;}
.drawn-grid{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;align-content:stretch;}
.drawn-num{padding:5px 0;text-align:center;font-weight:700;font-size:12px;color:var(--text-muted);border-radius:6px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);}
/* Called numbers (not current): bright red box, white text */
.drawn-num.called{background:#EF4444;border-color:#DC2626;color:#FFFFFF;font-weight:800;}
/* Latest call: bright green box, white text (overrides .called when both apply) */
.drawn-num.current-num{background:#22C55E;border-color:#16A34A;color:#FFFFFF;font-weight:800;box-shadow:0 0 0 1px rgba(34,197,94,0.35);}
.info-panel{display:flex;flex-direction:column;gap:8px;}
.countdown-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--card-border);background:var(--card);font-size:13px;font-weight:700;}
.countdown-status{color:var(--lime);font-weight:900;font-size:14px;}
.current-call-box{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--card-border);background:var(--card);font-size:13px;font-weight:600;}
.current-call-bubble{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:36px;border-radius:var(--r-pill);background:var(--grad-lime);color:#07130F;font-weight:900;font-size:15px;padding:0 12px;box-shadow:var(--shadow-lime);}
.recent-calls{display:flex;gap:5px;flex-wrap:wrap;}
.recent-chip{padding:4px 9px;border-radius:var(--r-sm);font-weight:800;font-size:12px;color:#fff;}
.recent-chip.rc-b{background:#3B82F6;}
.recent-chip.rc-i{background:#EF4444;}
.recent-chip.rc-n{background:#65A30D;color:#fff;}
.recent-chip.rc-g{background:var(--purple);}
.recent-chip.rc-o{background:#F97316;}
.my-card-section{border:1px solid var(--card-border);border-radius:var(--r-md);background:var(--bg1);padding:8px;position:relative;}
.bingo-card-headers{margin-bottom:4px;}
.bingo-card-headers .col-hdr{width:100%;height:auto;padding:4px 0;border-radius:6px;font-size:11px;}
.bingo-card{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.my-cards-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.my-card-panel{border:1px solid var(--card-border);border-radius:var(--r-md);padding:10px;background:var(--bg1);}
.my-card-panel-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-weight:900;margin-bottom:8px;}
.my-card-panel-title .label{font-size:12px;color:var(--text);}
.my-card-panel-title .hint{font-size:11px;color:var(--text-muted);}
@media(min-width:840px){.my-cards-grid{grid-template-columns:repeat(2,1fr);}}
.bc-cell{padding:8px 0;text-align:center;font-weight:800;font-size:13px;border-radius:8px;background:rgba(255,255,255,0.05);color:var(--text);border:1px solid rgba(255,255,255,0.08);}
/* Marked numbers on player card: bright green box, white text */
.bc-cell.bc-marked{background:#22C55E;border-color:#16A34A;color:#FFFFFF;font-weight:800;}
.bc-cell.bc-free{background:rgba(255,255,255,0.04);border-color:var(--lime-border);color:var(--lime);font-size:16px;}
.bc-cell.bc-free.bc-marked{background:#22C55E;border-color:#16A34A;color:#FFFFFF;}
.bc-cell.bc-callable{cursor:pointer;border-color:rgba(255,255,255,0.20);}
.bc-cell.bc-callable:hover{border-color:#22C55E;background:rgba(34,197,94,0.22);color:#FFFFFF;}
.btn-bingo{width:100%;padding:14px;border:none;border-radius:var(--r-lg);background:var(--grad-lime);color:#07130F;font-weight:900;font-size:18px;cursor:pointer;letter-spacing:1px;box-shadow:var(--shadow-lime);transition:opacity 0.15s,transform 0.12s;font-family:inherit;}
.btn-bingo:active{transform:scale(0.96);opacity:0.9;}
.btn-add-boards{width:100%;margin-top:8px;padding:11px;border:2px solid var(--lime-border);border-radius:var(--r-lg);background:transparent;color:var(--lime);font-weight:900;font-size:14px;cursor:pointer;letter-spacing:0.5px;transition:background 0.15s,transform 0.12s;font-family:inherit;}
.btn-add-boards:active{transform:scale(0.96);}
.btn-bingo-per-card{margin-top:8px;font-size:14px;padding:10px;background:var(--grad-purple);letter-spacing:0.5px;box-shadow:var(--shadow-purple);}
.game-bottom-bar{display:flex;gap:10px;margin-top:10px;}
.btn-leave{flex:1;padding:12px;border:2px solid var(--danger-border);border-radius:var(--r-md);background:transparent;color:var(--danger);font-weight:800;font-size:14px;cursor:pointer;transition:background 0.15s,transform 0.12s;font-family:inherit;}
.btn-leave:active{transform:scale(0.96);}
.btn-refresh{flex:1;padding:12px;border:none;border-radius:var(--r-md);background:var(--grad-green);color:#fff;font-weight:800;font-size:14px;cursor:pointer;transition:opacity 0.15s,transform 0.12s;font-family:inherit;}
.btn-refresh:active{transform:scale(0.96);opacity:0.9;}
.poll-status{text-align:center;margin-top:4px;}

/* ── Cartela Selection ── */
.cartela-header{margin:6px 0;font-size:14px;display:flex;align-items:center;justify-content:space-between;}
.cartela-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);}
.cl-taken,.cl-free{display:inline-block;width:12px;height:12px;border-radius:3px;}
.cl-taken{background:var(--danger);}
.cl-free{background:rgba(255,255,255,0.85);border:1px solid rgba(0,0,0,0.15);}
.btn-preview-cancel{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;border:2px solid var(--danger);background:var(--danger);color:#fff;font-size:12px;font-weight:900;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,0.40);transition:background 0.12s;}
.btn-preview-cancel:hover{background:#B91C1C;}
.btn-preview-cancel:active{transform:scale(0.90);}
.cartela-preview,.my-card-section{position:relative;}
.cartela-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;}
.cartela-cell{aspect-ratio:1;border-radius:6px;border:1px solid rgba(0,0,0,0.10);background:rgba(255,255,255,0.88);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:rgba(0,0,0,0.85);cursor:pointer;transition:background 0.10s,border-color 0.10s;user-select:none;}
.cartela-cell:hover:not(.taken):not(.selected){background:rgba(198,255,0,0.20);border-color:var(--lime-border);}
.cartela-cell.selected{background:var(--lime);border-color:#A3D900;color:#07130F;font-weight:900;}
.cartela-cell.taken{background:var(--danger);border-color:var(--danger);color:#fff;cursor:not-allowed;}
.cartela-bottom-area{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.cartela-preview{position:relative;background:var(--bg1);border:1px solid var(--card-border);border-radius:var(--r-md);padding:8px;}
.cartela-preview-sub{color:var(--text-secondary);font-weight:700;font-size:12px;margin-bottom:6px;text-align:center;}
.cartela-preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.cp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:800;border-radius:8px;border:1px solid rgba(0,0,0,0.12);background:#fff;color:#000;font-size:11px;}
.cp-cell.cp-free{background:#fff;border-color:rgba(198,255,0,0.40);}
.my-boards-bar{border:1px solid var(--card-border);border-radius:var(--r-sm);background:rgba(255,255,255,0.04);padding:8px;}
.my-boards-title{font-weight:700;font-size:11px;margin-bottom:6px;color:var(--text-secondary);}
.my-boards-chips{display:flex;flex-wrap:wrap;gap:6px;}
.btn-cartela-join{width:100%;padding:14px;border-radius:var(--r-md);border:none;background:var(--grad-lime);color:#07130F;font-weight:900;font-size:15px;cursor:pointer;transition:opacity 0.15s,transform 0.12s;box-shadow:var(--shadow-lime);font-family:inherit;}
.btn-cartela-join:disabled{background:rgba(255,255,255,0.10);color:rgba(255,255,255,0.30);cursor:not-allowed;box-shadow:none;}
.btn-cartela-join.amber{background:var(--grad-lime);color:#07130F;opacity:1;}
.btn-cartela-join.amber:disabled{opacity:0.55;}
.btn-cartela-join:not(:disabled):hover{opacity:0.90;}
.btn-cartela-join:not(:disabled):active{transform:scale(0.97);}
.cartela-layout{display:contents;}
.cartela-bottom,.cartela-footer,.cartela-side,.cartela-grid-wrap,.cartela-side-hint{display:none;}
.board-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:var(--r-md);border:1px solid var(--card-border);background:rgba(255,255,255,0.05);color:var(--text);font-weight:800;font-size:12px;cursor:pointer;user-select:none;transition:background 0.15s,border-color 0.15s;}
.board-chip.active{border-color:var(--lime-border);background:var(--lime-dim);}
.board-chip .x{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.20);font-size:12px;line-height:1;opacity:0.80;}
.board-chip .x:hover{opacity:1;border-color:var(--danger-border);}
.my-cards-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.card-tab{padding:6px 10px;border-radius:var(--r-md);border:1px solid var(--card-border);background:rgba(255,255,255,0.05);color:var(--text);font-weight:800;font-size:12px;cursor:pointer;transition:all 0.15s;font-family:inherit;}
.card-tab.active{border-color:var(--lime-border);background:var(--lime-dim);color:var(--lime);}
#btnCartelaConfirm.btn-join{background:var(--grad-lime);border-color:transparent;color:#07130F;font-weight:900;box-shadow:var(--shadow-lime);}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.80);backdrop-filter:blur(6px);animation:fadeIn 0.25s ease;}
.modal-overlay.active{display:flex;}
.modal-overlay.active.disqualified .modal-box{border-color:var(--danger-border);}
.modal-overlay.active.disqualified .modal-title{color:var(--danger);}
.modal-box{background:var(--bg1);border:1px solid var(--card-border);border-radius:var(--r-xl);padding:28px 24px 22px;max-width:340px;width:90%;text-align:center;animation:scaleIn 0.25s ease;}
.modal-icon{font-size:48px;margin-bottom:8px;}
.modal-title{font-weight:800;font-size:22px;margin-bottom:6px;color:var(--text);}
.modal-subtitle{color:var(--text-secondary);font-size:14px;margin-bottom:18px;}
.modal-meta{margin:-8px auto 12px;display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--card-border);background:var(--bg2);color:var(--text-muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.4px;}
.modal-meta .tag{padding:4px 8px;border-radius:var(--r-pill);border:1px solid var(--amber-border);background:var(--amber-dim);color:var(--amber);}
.modal-meta .tag.win-h{border-color:var(--green-border);background:var(--green-dim);color:var(--green);}
.modal-meta .tag.win-v{border-color:rgba(6,182,212,0.30);background:rgba(6,182,212,0.08);color:#06B6D4;}
.modal-meta .tag.win-d{border-color:var(--lime-border);background:var(--lime-dim);color:var(--lime);}
.modal-meta .tag.win-c{border-color:var(--purple-border);background:var(--purple-dim);color:var(--purple);}
.modal-meta .tag.win-f{border-color:var(--amber-border);background:var(--amber-dim);color:var(--amber);}
.modal-board{margin:10px auto 18px;width:100%;max-width:300px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.mb-cell{height:40px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--bg2);display:grid;place-items:center;font-weight:800;color:var(--text);font-size:13px;}
.mb-cell.free{border-color:var(--lime-border);color:var(--lime);}
.mb-cell.marked{border-color:var(--amber-border);background:var(--amber-dim);color:var(--text);}
.mb-cell.win,.mb-cell.win.win-v,.mb-cell.win.win-d,.mb-cell.win.win-c,.mb-cell.win.win-f{border-color:var(--lime-border);background:var(--lime-dim);color:var(--lime);}
.modal-btn{width:100%;}

/* ── Responsive ── */
@media(min-width:520px){
  #app{padding:18px 18px 26px;}
  .game-layout{grid-template-columns:1.2fr 0.8fr;}
  .cartela-grid{grid-template-columns:repeat(13,minmax(0,1fr));}
}
@media(max-width:400px){
  .game-layout{gap:6px;}
  .drawn-panel{padding:5px;}
  .drawn-grid{gap:2px;}
  .drawn-num{font-size:10px;padding:3px 0;}
  .col-hdr{width:22px;height:22px;font-size:10px;}
  .bc-cell{padding:5px 0;font-size:11px;}
  .info-panel{gap:5px;}
  .countdown-bar{padding:6px 8px;font-size:12px;}
  .current-call-box{padding:6px 8px;font-size:12px;}
  .current-call-bubble{min-width:40px;height:30px;font-size:13px;padding:0 8px;}
  .recent-chip{padding:3px 6px;font-size:10px;}
  .my-card-section{padding:5px;}
  .btn-bingo{padding:10px;font-size:15px;}
  .cartela-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
  .game-topbar{gap:3px;padding:5px;}
  .game-topbar-chip{padding:3px 4px;}
  .room-bet{font-size:15px;}
}

/* --- Live Lobby Modern Refresh (spacing only; text colors use theme tokens above) --- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
}

#app {
  padding: 10px 14px calc(14px + var(--bottom-nav-space));
}

.topbar {
  padding: 8px 10px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(180deg, rgba(14, 26, 43, 0.95), rgba(10, 20, 34, 0.95));
  box-shadow: 0 12px 28px rgba(2, 8, 23, 0.45);
}

.icon-btn.icon-btn-mini {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(15, 28, 45, 0.8);
  color: #a8b6c9;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.icon-btn.icon-btn-mini:hover {
  background: rgba(20, 35, 55, 0.95);
  color: #d0deed;
}

.icon-btn.icon-btn-mini:active {
  transform: scale(0.94) rotate(-10deg);
}

.icon-btn.icon-btn-mini .eye-slash {
  display: none;
}

.icon-btn.icon-btn-mini.is-hidden .eye-slash {
  display: block;
}

.icon-btn.icon-btn-mini.is-hidden {
  color: #c7d2e0;
  background: rgba(28, 40, 58, 0.95);
}

.chips {
  width: 100%;
  gap: 6px;
}

.chip {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(14, 26, 43, 0.8);
  font-family: "Inter", sans-serif;
}

.chip-live {
  color: #86efac;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.3);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.chip-good {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.28);
}

.chip-accent {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
}

.chip-num-bonus,
.chip-num-balance {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  transition: opacity 180ms ease, filter 180ms ease, letter-spacing 180ms ease;
}

.chip.is-masked .chip-num-bonus,
.chip.is-masked .chip-num-balance {
  opacity: 0.95;
  filter: blur(0.2px);
  letter-spacing: 0.8px;
}

.live-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  animation: livePulse 1.8s ease-in-out infinite;
}

@keyframes livePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.lobby-title {
  margin: 8px 2px 6px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.2px;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #e2e8f0;
}

.room-table-wrap {
  margin-top: 0;
}

.room-table {
  gap: 8px;
}

.room-row {
  min-height: 50px;
  padding: 5px 7px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(160deg, rgba(14, 26, 43, 0.96), rgba(8, 18, 32, 0.96));
  box-shadow: 0 10px 20px rgba(2, 8, 23, 0.35);
  gap: 8px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  animation: none;
}

.room-row:hover {
  transform: none;
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 12px 22px rgba(2, 8, 23, 0.42);
}

@keyframes roomIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.room-fee-section {
  min-width: 40px;
  align-items: flex-start;
}

.room-fee-number-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.room-fee-number {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}

.room-fee-label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 0;
}

.room-main-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  min-width: 0;
  text-align: center;
}

.room-prize-line {
  color: #cbd5e1;
  font-size: 10px;
  font-family: "Inter", sans-serif;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  max-width: 100%;
}

.room-prize-amount {
  font-family: "Poppins", sans-serif;
  color: #f59e0b;
  font-weight: 600;
  font-size: 11px;
}

.room-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.room-row--with-jackpot {
  position: relative;
  padding-bottom: 15px;
}

.room-jackpot-bar-wrap {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 2px;
  height: 11px;
  border-radius: 2px;
  border-top: 2px solid rgba(251, 191, 36, 0.95);
  border-left: 1px solid rgba(147, 197, 253, 0.45);
  border-right: 1px solid rgba(147, 197, 253, 0.45);
  border-bottom: 1px solid rgba(147, 197, 253, 0.35);
  background: linear-gradient(90deg, rgba(118, 76, 173, 0.88), rgba(135, 92, 192, 0.85));
  overflow: hidden;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.32), inset 0 0 8px rgba(15, 23, 42, 0.28);
  /* Own compositing layer: avoids filter/blend/layout thrash bleeding into the room card */
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.room-jackpot-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  min-width: 1px;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.2) 0 6px,
      rgba(255, 255, 255, 0.05) 6px 12px
    ),
    linear-gradient(90deg, #1d4ed8, #0ea5e9 55%, #38bdf8);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.72);
}

.room-jackpot-bar-gloss {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  opacity: 0.85;
  transform: translate3d(-100%, 0, 0);
  will-change: transform;
  animation: jackpotLoadSweep 2.2s linear infinite;
}

.room-jackpot-bar-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #f8fbff;
  text-shadow: 0 1px 3px rgba(2, 8, 23, 0.9);
  white-space: nowrap;
  pointer-events: none;
}

@keyframes jackpotLoadSweep {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    /* Sweep fully past the bar using % of the gloss width (compositor-friendly) */
    transform: translate3d(320%, 0, 0);
  }
}

.room-join-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 76px;
}

.room-status-stack {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  line-height: 1;
}

.room-active-pill {
  display: inline-flex;
  align-items: center;
  height: 13px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #cfe3ff;
  background: rgba(59, 130, 246, 0.22);
  border: 1px solid rgba(59, 130, 246, 0.28);
  white-space: nowrap;
}

.room-state-badge {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 9px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.room-state-ready {
  color: #86efac;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.26);
}

.room-state-playing {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.26);
}

.room-state-starts {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.28);
}

.room-prize-players {
  font-size: 8px;
  font-weight: 400;
  color: #94A3B8;
}

.room-meta-sep {
  color: #64748b;
  font-size: 12px;
}

.status-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  letter-spacing: 0.2px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-badge.status-ready {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #86efac;
}

.status-badge.status-active {
  background: rgba(59, 130, 246, 0.16);
  border: 1px solid rgba(59, 130, 246, 0.28);
  color: #93c5fd;
}

.status-badge.status-running {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #fcd34d;
}

.room-countdown {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  display: inline-block;
  min-width: 3.2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.btn-join {
  height: 5px;
  min-height: 5px;
  width: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: #19c25b;
  box-shadow: none;
  transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-join:hover {
  filter: brightness(1.03);
}

.btn-join:active {
  transform: scale(0.96);
}

.btn-join:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(7, 17, 31, 1), 0 0 0 4px rgba(34, 197, 94, 0.5);
}

.bottom-nav {
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(14, 26, 43, 0.96);
  backdrop-filter: blur(10px);
}

.bottom-nav-inner {
  padding: 0 8px;
}

.bn-item {
  gap: 6px;
  padding: 8px 6px 7px;
  min-height: 54px;
}

.bn-ic {
  width: 24px;
  height: 24px;
}

.bn-tx {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #7f8ea3;
}

.bn-ic svg {
  width: 22px;
  height: 22px;
}

.bn-item.bn-active {
  color: #22C55E;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
}

.bn-item.bn-active .bn-tx {
  color: #b7f7ce;
  font-weight: 600;
}

.bn-item {
  transition: transform 150ms ease, color 180ms ease, background 180ms ease;
}

.bn-item:hover {
  transform: translateY(-1px);
}

/* --- Cross-tab Premium Consistency --- */
.page-card,
.wallet-page,
.profile-card {
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(165deg, rgba(14, 26, 43, 0.96), rgba(9, 19, 33, 0.96));
  box-shadow: 0 16px 30px rgba(2, 8, 23, 0.42);
  padding: 16px;
}

.page-title,
.wallet-title,
.profile-handle {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #e2e8f0;
}

.page-sub,
.profile-sub,
.lb-sub,
.tx-sub,
.h2-ref,
.score-caption,
.wallet-card-k,
.pstat-k {
  font-family: "Inter", sans-serif;
  color: #94A3B8;
}

.score-head {
  align-items: center;
}

.seg,
.wallet-tabs {
  margin-top: 14px;
  padding: 4px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(7, 17, 31, 0.45);
}

.seg-btn,
.wt-btn {
  min-height: 38px;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.seg-btn.seg-active,
.wt-btn.wt-active {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(14, 26, 43, 0.9);
  color: #e2e8f0;
  font-weight: 600;
}

.lb-row,
.h2-item,
.tx-row,
.wallet-user,
.wallet-card,
.pstat,
.ps-row {
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(14, 26, 43, 0.82);
}

.lb-name,
.tx-title,
.h2-status,
.wallet-user-id,
.pstat-v,
.ps-tx {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.lb-score {
  color: #22c55e;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.h2-amt.win,
.tx-amt.pos {
  color: #22c55e;
}

.h2-amt.loss,
.tx-amt.neg {
  color: #f59e0b;
}

.wallet-card-v {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.wallet-user-badge {
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.profile-hero {
  border-radius: 18px;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(14, 26, 43, 0.7);
}

.profile-avatar {
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: 0 10px 20px rgba(2, 8, 23, 0.35);
}

/* --- Accessibility & Interaction Hardening --- */
button,
.bn-item,
.seg-btn,
.wt-btn,
.icon-btn,
.btn-join,
.btn,
.ps-action {
  min-height: 42px;
}

.bn-item,
.seg-btn,
.wt-btn,
.btn-join,
.btn,
.icon-btn,
.ps-action,
.card-tab,
.board-chip {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
.bn-item:focus-visible,
.seg-btn:focus-visible,
.wt-btn:focus-visible,
.icon-btn:focus-visible,
.btn:focus-visible,
.btn-join:focus-visible,
.ps-action:focus-visible,
.card-tab:focus-visible,
.board-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(7, 17, 31, 1), 0 0 0 4px rgba(34, 197, 94, 0.45);
}

.chip,
.page-sub,
.score-caption,
.wallet-card-k,
.h2-ref,
.tx-sub,
.profile-sub {
  color: #9fb0c5;
}

.room-prize-players,
.room-meta-sep,
.bn-tx,
.small {
  color: #8fa1b8;
}

.status-badge.status-running,
.status-badge.status-active,
.status-badge.status-ready {
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .live-dot {
    animation: none !important;
  }
}

@media (max-width: 380px) {
  #app {
    padding-left: 12px;
    padding-right: 12px;
  }

  .bn-item {
    min-height: 54px;
    padding: 8px 4px 8px;
  }

  .bn-tx {
    font-size: 11px;
  }

  .room-row {
    padding: 12px;
  }

  .btn-join {
    min-width: 86px;
    font-size: 13px;
  }
}

/* --- Lobby-specific override: allow tiny JOIN button (requested) --- */
#viewLobby .btn-join {
  min-height: 25px !important;
  height: 25px !important;
  width: 50px !important;
  min-width: 50px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.room-join-section {
  align-self: center;
}

@media (max-width: 460px) {
  .topbar {
    padding: 9px 10px;
    border-radius: 18px;
  }

  .chips {
    gap: 6px;
  }

  .chip {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .room-row {
    min-height: 70px;
    padding: 7px 9px;
    gap: 8px;
    border-radius: 18px;
  }

  .room-fee-section {
    min-width: 46px;
  }

  .room-fee-number {
    font-size: 20px;
  }

  .room-prize-line {
    font-size: 10px;
  }

  .room-prize-amount {
    font-size: 12px;
  }

  .btn-join {
    min-width: 72px;
    height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* ── Premium motion: shell, header, lobby, nav (transform/opacity biased) ── */

@keyframes easeDriftBg {
  0% {
    opacity: 0.55;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.72;
    transform: translate3d(-2%, 1%, 0) scale(1.03);
  }
  100% {
    opacity: 0.55;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes neonLineDrift {
  0% {
    transform: translate3d(-20%, 40%, 0) rotate(-18deg);
  }
  100% {
    transform: translate3d(120%, -30%, 0) rotate(-18deg);
  }
}

@keyframes chipLiveBreath {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35), inset 0 0 12px rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.32);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 14px 2px rgba(34, 197, 94, 0.22), inset 0 0 16px rgba(134, 239, 172, 0.08);
    border-color: rgba(52, 211, 153, 0.45);
  }
}

@keyframes liveShimmer {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  12% {
    opacity: 0.55;
  }
  35% {
    transform: translateX(120%);
    opacity: 0;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes chipValuePop {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  40% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.22));
  }
}

@keyframes lobbyTitleIn {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes roomCardEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes roomGlowBorder {
  /* Keep outer shadow constant to avoid “breathing” / jitter on the whole row (Telegram WebView). */
  0%, 100% {
    box-shadow: 0 10px 22px rgba(2, 8, 23, 0.38), inset 0 0 0 1px rgba(34, 197, 94, 0.2);
  }
  50% {
    box-shadow: 0 10px 22px rgba(2, 8, 23, 0.38), inset 0 0 0 1px rgba(34, 197, 94, 0.5);
  }
}

@keyframes roomNewSweep {
  0% {
    opacity: 0;
    transform: translateX(-100%) skewX(-12deg);
  }
  35% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
    transform: translateX(100%) skewX(-12deg);
  }
}

@keyframes jackpotSparkle {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes readyGradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes metaPlayerPop {
  0% {
    transform: scale(1);
    color: #94a3b8;
  }
  45% {
    transform: scale(1.06);
    color: #bbf7d0;
  }
  100% {
    transform: scale(1);
    color: #94a3b8;
  }
}

@keyframes joinPulseGlow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  50% {
    box-shadow:
      0 0 6px rgba(52, 211, 153, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

@keyframes rippleExpand {
  to {
    transform: translate(-50%, -50%) scale(28);
    opacity: 0;
  }
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translate3d(12px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes skelShine {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

.app-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(34, 197, 94, 0.07), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 80%, rgba(168, 85, 247, 0.05), transparent 50%),
    linear-gradient(165deg, #07111f 0%, #0a1628 45%, #07111f 100%);
  animation: easeDriftBg 22s ease-in-out infinite;
}

:root[data-theme="light"] .app-shell::before {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(34, 197, 94, 0.06), transparent 52%),
    linear-gradient(165deg, var(--bg1) 0%, var(--bg0) 100%);
  animation-duration: 38s;
}

:root[data-theme="light"] .app-shell::after {
  opacity: 0.22;
}

.app-shell::after {
  content: '';
  position: fixed;
  top: 0;
  left: -40%;
  width: 45%;
  height: 160%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(34, 197, 94, 0.04) 45%,
    transparent 70%
  );
  animation: neonLineDrift 48s linear infinite;
}

.chip-leading {
  font-weight: 500;
  opacity: 0.88;
}

.chip-suffix {
  font-weight: 500;
  opacity: 0.75;
}

.chip.is-masked .chip-suffix {
  display: none;
}

.chip-live {
  position: relative;
  overflow: hidden;
  animation: chipLiveBreath 1.5s ease-in-out infinite;
}

.chip-live::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  animation: liveShimmer 8s ease-in-out infinite 1.2s;
  pointer-events: none;
}

.chip-live-label {
  position: relative;
  z-index: 1;
}

.chip--value-hit .chip-num-bonus,
.chip--value-hit .chip-num-balance {
  animation: chipValuePop 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chip-num-bonus,
.chip-num-balance {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(34, 197, 94, 0.12);
}

.chip-good .chip-num-bonus {
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.18);
}

.view--lobby {
  position: relative;
}

.view--lobby .room-row {
  position: relative;
}

.lobby-ambient {
  pointer-events: none;
  position: absolute;
  inset: -8px -12px 0;
  overflow: hidden;
  z-index: 0;
  opacity: 0.45;
}

.lobby-ambient span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
  animation: floatDot 18s ease-in-out infinite;
}

.lobby-ambient span:nth-child(1) {
  top: 12%;
  left: 8%;
  animation-delay: 0s;
}

.lobby-ambient span:nth-child(2) {
  top: 28%;
  left: 88%;
  animation-delay: 2.5s;
  background: rgba(134, 239, 172, 0.35);
}

.lobby-ambient span:nth-child(3) {
  top: 62%;
  left: 18%;
  animation-delay: 5s;
}

.lobby-ambient span:nth-child(4) {
  top: 78%;
  left: 72%;
  animation-delay: 1.2s;
}

.lobby-ambient span:nth-child(5) {
  top: 44%;
  left: 48%;
  animation-delay: 7s;
  width: 2px;
  height: 2px;
  opacity: 0.7;
}

.lobby-ambient span:nth-child(6) {
  top: 8%;
  left: 52%;
  animation-delay: 3.8s;
  background: rgba(199, 255, 0, 0.2);
}

@keyframes floatDot {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(6px, -14px, 0);
    opacity: 0.75;
  }
}

.lobby-title-intro {
  position: relative;
  z-index: 1;
  animation: lobbyTitleIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.room-table-wrap {
  position: relative;
  z-index: 1;
}

.spin-promo {
  margin-top: 14px;
  border-radius: 20px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  background: linear-gradient(155deg, rgba(14, 26, 43, 0.96), rgba(8, 19, 33, 0.98));
  box-shadow: 0 14px 30px rgba(2, 8, 23, 0.45), inset 0 0 0 1px rgba(34, 197, 94, 0.08);
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}

.spin-promo::before {
  content: '';
  position: absolute;
  inset: -40% auto auto -25%;
  width: 58%;
  height: 160%;
  background: linear-gradient(120deg, transparent, rgba(34, 197, 94, 0.14), transparent);
  transform: rotate(14deg);
  animation: spinPromoSweep 7.5s ease-in-out infinite;
  pointer-events: none;
}

.spin-promo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.spin-promo-title {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #e8f1ff;
  letter-spacing: 0.2px;
}

.spin-promo-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.16);
}

.spin-promo-body {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.spin-wheel {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      #22c55e 0deg 45deg,
      #0ea5e9 45deg 90deg,
      #84cc16 90deg 135deg,
      #a855f7 135deg 180deg,
      #22c55e 180deg 225deg,
      #f59e0b 225deg 270deg,
      #06b6d4 270deg 315deg,
      #16a34a 315deg 360deg
    );
  border: 3px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 20px rgba(2, 8, 23, 0.45), 0 0 20px rgba(34, 197, 94, 0.28);
  position: relative;
  flex-shrink: 0;
  animation: spinWheelRotate 3.8s linear infinite;
}

.spin-wheel-center {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: rgba(7, 17, 31, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.18);
}

.spin-wheel-pointer {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #f8fafc;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 4px rgba(2, 8, 23, 0.55));
}

.spin-wheel-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(34, 197, 94, 0.35);
  animation: spinWheelPulse 1.8s ease-in-out infinite;
}

.spin-promo-text {
  margin: 0;
  color: #b8c7da;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

@keyframes spinWheelRotate {
  to { transform: rotate(360deg); }
}

@keyframes spinWheelPulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.08); opacity: 0.25; }
}

@keyframes spinPromoSweep {
  0%, 100% { transform: translateX(0) rotate(14deg); opacity: 0; }
  30% { opacity: 0.8; }
  65% { transform: translateX(165%) rotate(14deg); opacity: 0; }
}

.room-row-enter {
  animation: roomCardEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--room-enter-delay, 0ms);
}

.room-row:active {
  transform: scale(0.98);
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.room-row--live {
  border-color: rgba(34, 197, 94, 0.35);
  animation: roomGlowBorder 2.8s ease-in-out infinite;
}

.room-row--new {
  position: relative;
}

.room-row--new::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(34, 197, 94, 0.35),
    transparent
  );
  animation: roomNewSweep 0.85s ease-out both;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

.room-row--jackpot::after {
  content: '';
  position: absolute;
  right: 10px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef08a 0%, transparent 68%);
  box-shadow:
    -12px 4px 0 -1px rgba(254, 240, 138, 0.7),
    8px 6px 0 -1px rgba(34, 197, 94, 0.45);
  animation: jackpotSparkle 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.room-ready-shine {
  display: inline-block;
  padding: 0 1px;
  background: linear-gradient(
    90deg,
    #86efac,
    #bbf7d0,
    #4ade80,
    #bbf7d0,
    #86efac
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: readyGradient 3.5s ease-in-out infinite;
}

.room-player-count-num {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

.room-players-pop {
  animation: metaPlayerPop 520ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.room-row-skel {
  min-height: 52px;
  pointer-events: none;
  border-color: rgba(148, 163, 184, 0.12);
}

.room-row-skel > div {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.09) 42%,
    rgba(255, 255, 255, 0.04) 85%
  );
  background-size: 220% 100%;
  animation: skelShine 1.4s ease-in-out infinite;
}

.room-row-skel > div:nth-child(1) {
  width: 28%;
}

.room-row-skel > div:nth-child(2) {
  flex: 1;
  margin: 0 8px;
}

.room-row-skel > div:nth-child(3) {
  width: 22%;
}

.room-row-skel {
  display: flex;
  align-items: center;
  gap: 8px;
}

#viewLobby .btn-join {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  background: linear-gradient(180deg, #22c55e, #16a34a);
  animation: joinPulseGlow 3.6s ease-in-out infinite;
  transition:
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 160ms ease;
}

#viewLobby .btn-join:active {
  transform: scale(0.93);
}

#viewLobby .btn-join .btn-ripple {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 65%);
  animation: rippleExpand 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.bottom-nav-inner {
  position: relative;
}

.bn-item {
  position: relative;
  z-index: 0;
}

.bn-item::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  top: auto;
  height: 36px;
  border-radius: 14px;
  background: transparent;
  opacity: 0;
  transform: translateY(4px) scale(0.92);
  transition:
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background 240ms ease;
  z-index: -1;
  pointer-events: none;
}

.bn-item.bn-active::before {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.16),
    rgba(34, 197, 94, 0.06)
  );
  box-shadow: 0 -2px 16px rgba(34, 197, 94, 0.12);
}

.bn-item.bn-active .bn-ic {
  transform: translateY(-3px);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bn-item:not(.bn-active) .bn-ic {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#viewScores.page-view-enter,
#viewHistory.page-view-enter,
#viewWallet.page-view-enter,
#viewProfile.page-view-enter {
  animation: pageEnter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell::before,
  .app-shell::after,
  .chip-live::after {
    animation: none !important;
  }

  .chip-live {
    animation: none !important;
  }

  #viewLobby .btn-join {
    animation: none !important;
  }

  .lobby-ambient span {
    animation: none !important;
    opacity: 0.25;
  }

  .room-row--live {
    animation: none !important;
  }

  .room-row--new::before,
  .room-row--jackpot::after {
    animation: none !important;
    opacity: 0;
  }

  .room-ready-shine {
    animation: none !important;
    color: #86efac;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
  }

  .room-row-enter,
  .lobby-title-intro,
  .page-view-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .spin-wheel,
  .spin-wheel-glow,
  .spin-promo::before {
    animation: none !important;
  }

  .room-jackpot-bar-gloss {
    animation: none !important;
    transform: none !important;
    will-change: auto;
    opacity: 0.35;
  }
}

@media (max-width: 460px) {
  .spin-promo {
    padding: 12px;
  }

  .spin-promo-title {
    font-size: 15px;
  }

  .spin-promo-body {
    gap: 10px;
  }

  .spin-wheel {
    width: 62px;
    height: 62px;
  }

  .spin-wheel-center {
    inset: 20px;
  }

  .spin-promo-text {
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════
   Light theme — overrides for hardcoded dark-ui colors
   (placed last so it wins the cascade)
   ═══════════════════════════════════════════════════ */

:root[data-theme="light"] .lobby-title {
  color: var(--text);
}

:root[data-theme="light"] .topbar {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  border-color: var(--card-border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

:root[data-theme="light"] .icon-btn.icon-btn-mini {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
}

:root[data-theme="light"] .icon-btn.icon-btn-mini:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}

:root[data-theme="light"] .icon-btn.icon-btn-mini.is-hidden {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
}

:root[data-theme="light"] .chip {
  color: var(--text-secondary);
  border-color: var(--card-border);
  background: var(--bg2);
}

:root[data-theme="light"] .chip-live {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.28);
}

:root[data-theme="light"] .chip-good {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

:root[data-theme="light"] .chip-accent {
  color: #14532d;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.28);
}

/* Spans use .chip-num-* which defaults to neon lime/amber — too faint on light chips */
:root[data-theme="light"] .chip-num-balance {
  color: #14532d;
  text-shadow: none;
}

:root[data-theme="light"] .chip-num-bonus {
  color: #9a3412;
  text-shadow: none;
}

:root[data-theme="light"] .chip-leading,
:root[data-theme="light"] .chip-suffix {
  color: inherit;
  opacity: 0.92;
}

:root[data-theme="light"] .room-row {
  background: linear-gradient(165deg, #ffffff 0%, #f1f5f9 100%);
  border-color: var(--card-border);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

:root[data-theme="light"] .room-row:hover {
  border-color: rgba(100, 116, 139, 0.35);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

:root[data-theme="light"] .room-fee-number {
  color: var(--text);
}

:root[data-theme="light"] .room-prize-line {
  color: var(--text-secondary);
}

:root[data-theme="light"] .room-prize-amount {
  color: #b45309;
}

:root[data-theme="light"] .room-state-ready {
  color: #14532d;
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.32);
}

:root[data-theme="light"] .room-ready-shine {
  background: none;
  background-size: auto;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #14532d;
  animation: none;
  text-shadow: none;
}

:root[data-theme="light"] .room-state-starts {
  color: #1e3a8a;
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.3);
}

:root[data-theme="light"] .room-state-starts .room-countdown {
  color: #1d4ed8;
}

:root[data-theme="light"] .room-state-playing {
  color: #9a3412;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.3);
}

:root[data-theme="light"] .room-active-pill {
  color: #1e40af;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.28);
}

:root[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.96);
  border-top-color: var(--card-border);
}

:root[data-theme="light"] .bn-tx {
  color: #475569;
  font-weight: 600;
}

:root[data-theme="light"] .bn-item.bn-active {
  color: #16a34a;
  text-shadow: none;
  background: rgba(34, 197, 94, 0.1);
}

:root[data-theme="light"] .bn-item.bn-active .bn-tx {
  color: #15803d;
}

:root[data-theme="light"] .page-card,
:root[data-theme="light"] .wallet-page,
:root[data-theme="light"] .profile-card {
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
  border-color: var(--card-border);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

:root[data-theme="light"] .page-title,
:root[data-theme="light"] .wallet-title,
:root[data-theme="light"] .profile-handle {
  color: var(--text);
}

:root[data-theme="light"] .seg,
:root[data-theme="light"] .wallet-tabs {
  background: var(--bg2);
  border-color: var(--card-border);
}

:root[data-theme="light"] .seg-btn.seg-active,
:root[data-theme="light"] .wt-btn.wt-active {
  background: var(--bg1);
  color: var(--text);
  border-color: var(--card-border);
}

:root[data-theme="light"] .lb-row,
:root[data-theme="light"] .h2-item,
:root[data-theme="light"] .tx-row,
:root[data-theme="light"] .wallet-user,
:root[data-theme="light"] .wallet-card,
:root[data-theme="light"] .pstat,
:root[data-theme="light"] .ps-row {
  background: var(--bg1);
  border-color: var(--card-border);
}

:root[data-theme="light"] .profile-hero {
  background: var(--bg2);
  border-color: var(--card-border);
}

/* Note: do not include `.chip` here — it would override `.chip-live` / `.chip-good` / `.chip-accent` (same specificity, later rule). */
:root[data-theme="light"] .page-sub,
:root[data-theme="light"] .score-caption,
:root[data-theme="light"] .wallet-card-k,
:root[data-theme="light"] .h2-ref,
:root[data-theme="light"] .tx-sub,
:root[data-theme="light"] .profile-sub {
  color: var(--text-secondary);
}

:root[data-theme="light"] .room-prize-players,
:root[data-theme="light"] .room-meta-sep {
  color: #64748b;
}

:root[data-theme="light"] .small {
  color: #64748b;
}

:root[data-theme="light"] .spin-promo {
  background: linear-gradient(155deg, #ffffff 0%, #f1f5f9 100%);
  border-color: rgba(34, 197, 94, 0.22);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(34, 197, 94, 0.06);
}

:root[data-theme="light"] .spin-promo-title {
  color: var(--text);
}

:root[data-theme="light"] .spin-promo-chip {
  color: #14532d;
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.18);
}

:root[data-theme="light"] .spin-promo-text {
  color: var(--text-secondary);
}

:root[data-theme="light"] .spin-wheel {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12), 0 0 16px rgba(34, 197, 94, 0.2);
}

:root[data-theme="light"] .spin-wheel-center {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .game-topbar-btn {
  border-color: var(--card-border);
  background: var(--bg2);
  color: var(--text);
}

:root[data-theme="light"] .game-topbar-chip {
  border-color: var(--card-border);
  background: var(--card);
}

:root[data-theme="light"] .drawn-num {
  background: var(--bg2);
  border-color: var(--card-border);
}

:root[data-theme="light"] .bc-cell {
  background: var(--bg2);
  border-color: var(--card-border);
}

:root[data-theme="light"] .bc-cell.bc-callable:hover {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  color: var(--text);
}

:root[data-theme="light"] .my-boards-bar {
  background: var(--card);
}

:root[data-theme="light"] .card-tab,
:root[data-theme="light"] .board-chip {
  background: var(--card);
}

:root[data-theme="light"] .board-chip .x {
  border-color: var(--card-border);
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}

:root[data-theme="light"] .h2-ic {
  border-color: var(--card-border);
}

:root[data-theme="light"] .h-badge {
  border-color: var(--card-border);
}

:root[data-theme="light"] .status-badge.status-waiting {
  color: #4b5563;
  background: rgba(107, 114, 128, 0.14);
  border-color: rgba(107, 114, 128, 0.28);
}

:root[data-theme="light"] .switch-ui {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .switch-ui::after {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .room-row-skel {
  border-color: var(--card-border);
}

:root[data-theme="light"] .room-row-skel > div {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.07) 42%,
    rgba(0, 0, 0, 0.04) 85%
  );
}

:root[data-theme="light"] .btn-cartela-join:disabled {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.38);
  box-shadow: none;
}

:root[data-theme="light"] .btn-join:focus-visible,
:root[data-theme="light"] button:focus-visible,
:root[data-theme="light"] .bn-item:focus-visible,
:root[data-theme="light"] .seg-btn:focus-visible,
:root[data-theme="light"] .wt-btn:focus-visible,
:root[data-theme="light"] .icon-btn:focus-visible,
:root[data-theme="light"] .btn:focus-visible,
:root[data-theme="light"] .ps-action:focus-visible,
:root[data-theme="light"] .card-tab:focus-visible,
:root[data-theme="light"] .board-chip:focus-visible {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(34, 197, 94, 0.45);
}