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

:root {
  --bg0: #080A12;
  --bg1: #0C0E1A;
  --bg2: #10121E;
  --bg3: #181B2A;
  --bg4: #1E2134;
  --border0: rgba(255,255,255,0.04);
  --border1: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.14);
  --gold: #F5C542;
  --red: #FF2D54;
  --red2: #C0202F;
  --cyan: #00D4FF;
  --green: #00E676;
  --purple: #A855F7;
  --t1: #FFFFFF;
  --t2: #B8BDD5;
  --t3: #636785;
  --glow-gold: 0 0 24px rgba(245,197,66,0.35);
  --glow-red: 0 0 24px rgba(255,45,84,0.4);
  --r1:10px; --r2:16px; --r3:22px;
  --r-pill: 999px;
  --font-hud: 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Rajdhani', sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html { scroll-behavior:smooth; }
body {
  background: var(--bg0);
  font-family: var(--font-body);
  color: var(--t1);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.mesh-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 10% 10%, rgba(255,45,84,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(0,212,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(168,85,247,0.04) 0%, transparent 70%);
}
.noise-overlay {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grid-lines {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.03;
  background-image:
    linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size:50px 50px;
}

.page {
  max-width:480px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column;
  position:relative; z-index:2;
  padding-bottom:80px;
}

/* HEADER */
.hdr {
  width:100%; height:60px; padding:0 16px;
  background:rgba(8,10,18,0.92);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border1);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100; flex-shrink:0;
}
.hdr-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-mark {
  width:36px; height:36px;
  background:linear-gradient(135deg, var(--red), var(--gold));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-hud); font-weight:900; font-size:18px;
  color:#fff; box-shadow:var(--glow-red);
}
.logo-name {
  font-family:var(--font-hud); font-weight:800; font-size:22px; letter-spacing:1px;
  background:linear-gradient(90deg, #fff 40%, var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hdr-right-btn, .hdr-login-link {
  font-family:var(--font-hud); font-size:14px; font-weight:700;
  color:var(--t2); text-decoration:none; letter-spacing:0.3px;
  padding:6px 14px; border-radius:var(--r-pill);
  border:1px solid var(--border2); background:var(--bg3);
  transition:all 0.18s var(--ease); display:flex; align-items:center; gap:6px;
}
.hdr-right-btn:active, .hdr-login-link:active { border-color:var(--gold); color:var(--gold); }

.hero-wrap { padding:24px 20px 16px; text-align:center; }
.hero-icon {
  width:72px; height:72px; margin:0 auto 16px;
  background:linear-gradient(135deg, var(--red), var(--gold));
  border-radius:var(--r3);
  display:flex; align-items:center; justify-content:center;
  font-size:32px; box-shadow:var(--glow-red);
}
.hero-title {
  font-family:var(--font-hud); font-size:34px; font-weight:900;
  text-transform:uppercase; letter-spacing:1px; line-height:1;
  background:linear-gradient(90deg, #fff 40%, var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:8px;
}
.hero-sub { font-size:13px; color:var(--t3); line-height:1.5; }
.hero-sub b { color:var(--gold); }
.live-banner {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,45,84,0.08); border:1px solid rgba(255,45,84,0.2);
  padding:7px 16px; border-radius:var(--r-pill);
  font-family:var(--font-hud); font-size:13px; font-weight:700; color:var(--red);
  margin-top:14px;
}
.bonus-banner {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,230,118,0.08); border:1px solid rgba(0,230,118,0.2);
  padding:7px 16px; border-radius:var(--r-pill);
  font-family:var(--font-hud); font-size:13px; font-weight:700; color:var(--green);
  margin-top:14px;
}
.live-dot {
  width:7px; height:7px; border-radius:50%; background:var(--red);
  animation:blink 1.2s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* FORM CARD */
.form-card {
  margin:8px 16px 0;
  background:linear-gradient(145deg, var(--bg3) 0%, var(--bg2) 100%);
  border:1px solid var(--border2);
  border-radius:var(--r3); padding:24px 20px;
  position:relative; overflow:hidden;
}
.form-card::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:160px; height:160px;
  background:radial-gradient(circle, rgba(245,197,66,0.08) 0%, transparent 70%);
  pointer-events:none;
}
.form-card::after {
  content:''; position:absolute; bottom:-30px; left:-20px;
  width:120px; height:120px;
  background:radial-gradient(circle, rgba(255,45,84,0.06) 0%, transparent 70%);
  pointer-events:none;
}

/* Alert */
.alert {
  padding:12px 16px; border-radius:var(--r2); margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:14px; font-weight:600;
  position:relative; z-index:1;
  animation:shakeIn .3s var(--ease);
}
@keyframes shakeIn {
  0%{transform:translateX(-8px)} 30%{transform:translateX(6px)}
  60%{transform:translateX(-3px)} 100%{transform:translateX(0)}
}
.alert-err { background:rgba(255,45,84,0.1); border:1px solid rgba(255,45,84,0.25); color:var(--red); }
.alert-ok  { background:rgba(0,230,118,0.1); border:1px solid rgba(0,230,118,0.25); color:var(--green); }

/* Fields */
.f-label {
  display:block; font-size:10px; font-weight:700;
  color:var(--t3); text-transform:uppercase; letter-spacing:1px;
  margin-bottom:8px; position:relative; z-index:1;
}
.f-group {
  display:flex; align-items:center;
  background:var(--bg2); border:1.5px solid var(--border1);
  border-radius:var(--r2); margin-bottom:16px;
  transition:border-color .2s, box-shadow .2s;
  overflow:hidden; position:relative; z-index:1;
}
.f-group:focus-within {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(255,45,84,0.10);
}
.f-icon {
  width:48px; height:52px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:var(--t3);
}
.f-input {
  flex:1; height:52px;
  background:transparent; border:none; outline:none;
  font-family:var(--font-mono); font-size:17px; font-weight:600;
  color:var(--t1); padding:0 14px 0 0;
}
.f-input::placeholder { color:var(--t3); font-size:14px; font-weight:400; }
.f-divider { width:1px; height:24px; background:var(--border1); flex-shrink:0; }
.f-country {
  padding:0 12px; font-family:var(--font-mono); font-size:16px; font-weight:700;
  color:var(--t2); flex-shrink:0;
}
.f-eye {
  padding:0 14px; font-size:17px; color:var(--t3);
  cursor:pointer; transition:color .15s; flex-shrink:0;
}
.f-eye:active { color:var(--gold); }

.utils-row {
  display:flex; align-items:center; justify-content:space-between;
  margin:2px 0 22px; position:relative; z-index:1;
}
.remember {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--t2); cursor:pointer; user-select:none;
}
.remember input[type="checkbox"] {
  width:16px; height:16px; accent-color:var(--red); cursor:pointer;
}
.forgot-link {
  font-family:var(--font-hud); font-size:13px; font-weight:700;
  color:var(--gold); text-decoration:none;
  display:flex; align-items:center; gap:5px; transition:opacity .15s;
}
.forgot-link:active { opacity:.7; }

.terms-row {
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:22px; cursor:pointer; position:relative; z-index:1;
}
.terms-row input[type="checkbox"] {
  width:18px; height:18px; margin-top:1px; flex-shrink:0;
  accent-color:var(--red); cursor:pointer;
}
.terms-row span { font-size:12px; color:var(--t3); line-height:1.5; }
.terms-row a { color:var(--gold); text-decoration:none; font-weight:600; }

/* Buttons */
.btn-login, .btn-register, .btn-primary {
  width:100%; height:54px; border:none; border-radius:var(--r2);
  background:linear-gradient(135deg, var(--red), var(--red2));
  font-family:var(--font-hud); font-size:20px; font-weight:900;
  letter-spacing:1px; text-transform:uppercase; color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:var(--glow-red); transition:all .2s var(--ease);
  position:relative; z-index:1;
}
.btn-login { margin-bottom:12px; }
.btn-login:active, .btn-register:active, .btn-primary:active { transform:scale(.97); }
.btn-login:disabled, .btn-register:disabled, .btn-primary:disabled {
  background:var(--bg4); color:var(--t3); box-shadow:none; cursor:not-allowed; transform:none;
}

.btn-outline {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:50px;
  background:transparent; border:1px solid var(--border2); border-radius:var(--r2);
  font-family:var(--font-hud); font-size:16px; font-weight:700;
  color:var(--t2); letter-spacing:.5px; text-transform:uppercase;
  cursor:pointer; text-decoration:none;
  transition:all .2s var(--ease); position:relative; z-index:1;
}
.btn-outline:active { border-color:var(--gold); color:var(--gold); }

.or-divider {
  display:flex; align-items:center; gap:12px;
  margin:20px 0 0; color:var(--t3);
  font-size:11px; font-weight:600; letter-spacing:1px;
  position:relative; z-index:1;
}
.or-divider::before, .or-divider::after {
  content:''; flex:1; height:1px; background:var(--border1);
}

.btn-gen {
  background:var(--bg4); color:var(--t1);
  border:1px solid var(--border2); border-radius:8px;
  padding:8px 10px; font-size:11px; font-weight:700;
  cursor:pointer; flex-shrink:0; margin-left:8px;
}
.btn-gen:active { border-color:var(--gold); color:var(--gold); }

/* Toast */
.toast-box {
  position:fixed; bottom:40px;
  left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--bg4); border:1px solid var(--border2);
  padding:12px 22px; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-weight:700; font-size:14px;
  color:var(--t1); z-index:3000; opacity:0;
  transition:all .3s var(--ease); white-space:nowrap;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  pointer-events:none; display:flex; align-items:center; gap:8px;
}
.toast-box.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast-box.win  { border-color:rgba(0,230,118,0.35); }
.toast-box.loss { border-color:rgba(255,45,84,0.35); }

@keyframes spin { to { transform:rotate(360deg); } }
.spin-icon { animation:spin 1s linear infinite; display:inline-block; }

/* ═══ DASHBOARD SPECIFIC ═══ */

/* Balance Card */
.bal-card {
  margin:12px 16px;
  background:linear-gradient(135deg, var(--red) 0%, var(--red2) 50%, #8B1020 100%);
  border-radius:var(--r3); padding:20px;
  position:relative; overflow:hidden;
  box-shadow:0 8px 32px rgba(255,45,84,0.25);
}
.bal-card::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:120px; height:120px;
  background:radial-gradient(circle, rgba(245,197,66,0.2) 0%, transparent 70%);
}
.bal-card::after {
  content:''; position:absolute; bottom:-20px; left:-20px;
  width:100px; height:100px;
  background:radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
}
.bal-label {
  font-family:var(--font-hud); font-size:11px; font-weight:700;
  color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:1px;
}
.bal-amount {
  font-family:var(--font-hud); font-size:36px; font-weight:900;
  color:#fff; margin:4px 0 12px; text-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.bal-actions {
  display:flex; gap:10px;
}
.bal-btn {
  flex:1; height:40px; border:none; border-radius:var(--r2);
  font-family:var(--font-hud); font-size:14px; font-weight:800;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all .2s var(--ease); text-transform:uppercase;
}
.bal-btn-dep {
  background:var(--gold); color:#000;
}
.bal-btn-with {
  background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.2);
}
.bal-btn:active { transform:scale(.95); }

/* Quick Actions */
.quick-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding:0 16px; margin:16px 0;
}
.quick-item {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--bg3); border:1px solid var(--border1);
  border-radius:var(--r2); padding:14px 8px;
  text-decoration:none; transition:all .2s var(--ease);
  cursor:pointer;
}
.quick-item:active { border-color:var(--gold); transform:scale(.96); }
.quick-icon {
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.quick-icon.green { background:rgba(0,230,118,0.12); color:var(--green); }
.quick-icon.gold { background:rgba(245,197,66,0.12); color:var(--gold); }
.quick-icon.cyan { background:rgba(0,212,255,0.12); color:var(--cyan); }
.quick-icon.purple { background:rgba(168,85,247,0.12); color:var(--purple); }
.quick-label {
  font-family:var(--font-hud); font-size:11px; font-weight:700;
  color:var(--t2); text-transform:uppercase; letter-spacing:0.5px;
  text-align:center;
}

/* Section Title */
.sec-title {
  padding:0 16px; margin:20px 0 12px;
  display:flex; align-items:center; justify-content:space-between;
}
.sec-title h3 {
  font-family:var(--font-hud); font-size:18px; font-weight:800;
  color:var(--t1); text-transform:uppercase; letter-spacing:0.5px;
}
.sec-title a {
  font-family:var(--font-hud); font-size:12px; font-weight:700;
  color:var(--gold); text-decoration:none;
}

/* Game Cards */
.game-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  padding:0 16px; margin-bottom:16px;
}
.games-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  padding:0 16px;
}
.game-card {
  background:var(--bg3); border:1px solid var(--border1);
  border-radius:var(--r2); overflow:hidden;
  cursor:pointer; transition:all .2s var(--ease);
  text-decoration:none;
}
.game-card:active { transform:scale(.96); border-color:var(--gold); }
.game-thumb {
  width:100%; aspect-ratio:16/10;
  background:var(--bg4);
  display:flex; align-items:center; justify-content:center;
  font-size:36px; position:relative;
}
.game-thumb .live-badge {
  position:absolute; top:8px; right:8px;
  background:var(--red); color:#fff;
  font-family:var(--font-hud); font-size:9px; font-weight:800;
  padding:3px 8px; border-radius:var(--r-pill);
  text-transform:uppercase; letter-spacing:0.5px;
}
.game-thumb .hot-badge {
  position:absolute; top:8px; left:8px;
  background:var(--gold); color:#000;
  font-family:var(--font-hud); font-size:9px; font-weight:800;
  padding:3px 8px; border-radius:var(--r-pill);
}
.game-info { padding:10px 12px; }
.game-name {
  font-family:var(--font-hud); font-size:14px; font-weight:800;
  color:var(--t1); text-transform:uppercase;
}
.game-players {
  font-size:11px; color:var(--t3); margin-top:2px;
}

/* Bottom Nav */
.btm-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; height:64px;
  background:rgba(8,10,18,0.95);
  backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--border1);
  display:flex; align-items:center; justify-content:space-around;
  z-index:100; padding-bottom:env(safe-area-inset-bottom,0);
}
.nav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; padding:6px 12px;
  transition:all .15s var(--ease); position:relative;
}
.nav-item .nav-icon {
  font-size:20px; color:var(--t3); transition:color .15s;
}
.nav-item .nav-label {
  font-family:var(--font-hud); font-size:10px; font-weight:700;
  color:var(--t3); text-transform:uppercase; letter-spacing:0.5px;
}
.nav-item.active .nav-icon { color:var(--red); }
.nav-item.active .nav-label { color:var(--red); }
.nav-item.active::before {
  content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:24px; height:3px; background:var(--red); border-radius:0 0 3px 3px;
}
.nav-center {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--red), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff;
  box-shadow:0 4px 20px rgba(255,45,84,0.4);
  margin-top:-20px;
  text-decoration:none;
}

/* ═══ WALLET / PROFILE ═══ */

.wallet-tabs {
  display:flex; gap:8px; padding:0 16px; margin:16px 0 12px;
}
.wallet-tab {
  flex:1; height:42px; border:1px solid var(--border2); border-radius:var(--r2);
  background:transparent; color:var(--t2);
  font-family:var(--font-hud); font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px;
  cursor:pointer; transition:all .2s var(--ease);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.wallet-tab.active {
  background:var(--red); border-color:var(--red); color:#fff;
}
.wallet-tab:active { transform:scale(.96); }

.hist-item {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; margin:0 16px 8px;
  background:var(--bg3); border:1px solid var(--border1);
  border-radius:var(--r2);
}
.hist-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.hist-icon.dep { background:rgba(0,230,118,0.1); color:var(--green); }
.hist-icon.with { background:rgba(255,45,84,0.1); color:var(--red); }
.hist-icon.bet { background:rgba(245,197,66,0.1); color:var(--gold); }
.hist-icon.win { background:rgba(0,212,255,0.1); color:var(--cyan); }
.hist-info { flex:1; }
.hist-title {
  font-family:var(--font-hud); font-size:14px; font-weight:700; color:var(--t1);
}
.hist-date { font-size:11px; color:var(--t3); margin-top:2px; }
.hist-amount {
  font-family:var(--font-hud); font-size:16px; font-weight:800;
}
.hist-amount.plus { color:var(--green); }
.hist-amount.minus { color:var(--red); }

.profile-avatar {
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg, var(--red), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-size:32px; margin:0 auto 12px;
  box-shadow:var(--glow-red);
}
.profile-name {
  font-family:var(--font-hud); font-size:24px; font-weight:900;
  text-align:center; color:var(--t1);
}
.profile-mobile {
  text-align:center; font-size:13px; color:var(--t3); margin-top:4px;
}
.profile-id {
  text-align:center; font-family:var(--font-mono); font-size:12px;
  color:var(--gold); margin-top:4px;
}

.menu-item {
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; margin:0 16px 8px;
  background:var(--bg3); border:1px solid var(--border1);
  border-radius:var(--r2); cursor:pointer;
  text-decoration:none; transition:all .2s var(--ease);
}
.menu-item:active { border-color:var(--gold); transform:scale(.98); }
.menu-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.menu-icon.red { background:rgba(255,45,84,0.1); color:var(--red); }
.menu-icon.gold { background:rgba(245,197,66,0.1); color:var(--gold); }
.menu-icon.green { background:rgba(0,230,118,0.1); color:var(--green); }
.menu-icon.cyan { background:rgba(0,212,255,0.1); color:var(--cyan); }
.menu-icon.purple { background:rgba(168,85,247,0.1); color:var(--purple); }
.menu-icon.t3 { background:rgba(99,103,133,0.1); color:var(--t3); }
.menu-text { flex:1; }
.menu-label {
  font-family:var(--font-hud); font-size:15px; font-weight:700; color:var(--t1);
}
.menu-desc { font-size:11px; color:var(--t3); margin-top:1px; }
.menu-arrow { color:var(--t3); font-size:16px; }

.hidden { display:none !important; }

/* Settings */
.setting-section {
  padding:0 16px; margin-bottom:16px;
}
.setting-title {
  font-family:var(--font-hud); font-size:12px; font-weight:700;
  color:var(--t3); text-transform:uppercase; letter-spacing:1px;
  margin-bottom:8px;
}
.setting-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--bg3); border:1px solid var(--border1);
  border-radius:var(--r2); margin-bottom:8px;
}
.setting-label {
  font-family:var(--font-hud); font-size:14px; font-weight:700; color:var(--t1);
}
.toggle {
  width:44px; height:24px; border-radius:12px;
  background:var(--bg4); border:1px solid var(--border2);
  cursor:pointer; position:relative; transition:all .2s;
}
.toggle.on { background:var(--green); border-color:var(--green); }
.toggle::after {
  content:''; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; transition:all .2s;
}
.toggle.on::after { left:22px; }

/* Animations */
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation:fadeIn .3s var(--ease); }

/* Animated Game Cards */
.animated-card {
  position:relative; border-radius:var(--r3); overflow:hidden;
  aspect-ratio:4/3; cursor:pointer;
  background:var(--bg3); border:2px solid transparent;
  transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow:0 6px 15px rgba(0,0,0,0.6);
  transform-origin:center;
}
.animated-card:active { transform:scale(0.92); border-color:var(--gold); }
.animated-card:hover { transform:translateY(-5px) scale(1.03); border-color:var(--gold); box-shadow:var(--glow-gold); z-index:10; }
.animated-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.3) 45%,rgba(0,0,0,0) 100%);
  z-index:1; pointer-events:none;
}
.card-glare {
  position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-25deg); animation:glareAnim 4s infinite; z-index:3; pointer-events:none;
}
@keyframes glareAnim { 0%{left:-100%} 20%{left:200%} 100%{left:200%} }
.play-overlay {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.5);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:#fff; opacity:0; z-index:4; transition:all 0.3s var(--ease);
  font-family:var(--font-hud); font-size:14px; font-weight:900; letter-spacing:1px;
  text-shadow:0 2px 10px rgba(0,0,0,0.9); pointer-events:none;
}
.play-overlay i { font-size:32px; color:var(--gold); filter:drop-shadow(0 0 10px var(--gold)); }
.animated-card:hover .play-overlay { opacity:1; transform:translate(-50%,-50%) scale(1); }
.animated-card:hover .bounce-anim { opacity:0.5; filter:blur(2px) grayscale(30%); transform:scale(1.15); }
.bounce-anim {
  width:100%; height:100%; object-fit:cover;
  animation:overkillAnim 3s cubic-bezier(0.175,0.885,0.32,1.275) infinite;
  display:block; transition:all 0.3s ease;
  transform-origin:center;
}
@keyframes overkillAnim {
  0%{transform:scale(1) rotate(0deg);filter:brightness(1) saturate(100%)}
  30%{transform:scale(1.08) rotate(-3deg);filter:brightness(1.1) saturate(120%)}
  50%{transform:scale(1.2) rotate(4deg) translateY(-5px);filter:brightness(1.3) saturate(150%)}
  70%{transform:scale(1.08) rotate(-2deg);filter:brightness(1.1) saturate(120%)}
  100%{transform:scale(1) rotate(0deg);filter:brightness(1) saturate(100%)}
}
.glow-footer {
  position:absolute; bottom:0; left:0; right:0;
  padding:8px 10px; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.game-name {
  font-family:var(--font-hud); font-size:13px; font-weight:900;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.8);
}
.game-online {
  position:absolute; top:8px; left:8px; z-index:2;
  display:flex; align-items:center; gap:5px;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  padding:3px 8px; border-radius:var(--r-pill);
  font-family:var(--font-hud); font-size:10px; font-weight:700; color:var(--green);
}
.live-dot {
  width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:blink 1.2s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.badge-hot {
  position:absolute; top:8px; right:8px; z-index:2;
  background:var(--gold); color:#000;
  font-family:var(--font-hud); font-size:9px; font-weight:800;
  padding:3px 8px; border-radius:var(--r-pill);
  display:flex; align-items:center; gap:4px;
}
.badge-new {
  position:absolute; top:8px; right:8px; z-index:2;
  color:#fff; font-family:var(--font-hud); font-size:9px; font-weight:800;
  padding:3px 8px; border-radius:var(--r-pill);
  display:flex; align-items:center; gap:4px;
}
.badge-tag {
  position:absolute; top:8px; right:8px; z-index:2;
  color:#fff; font-family:var(--font-hud); font-size:8px; font-weight:800;
  padding:2px 6px; border-radius:var(--r-pill);
  display:flex; align-items:center; gap:3px;
}

/* Winners */
.winners-wrap { margin-bottom:16px; }
.winner-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:var(--bg3); border:1px solid var(--border1);
  border-radius:var(--r2); margin-bottom:8px;
}
.wr-game { display:flex; align-items:center; gap:8px; }
.wr-game-img { width:28px; height:28px; border-radius:6px; object-fit:cover; border:1px solid var(--border1); }
.wr-game-name { font-family:var(--font-hud); font-size:12px; font-weight:700; color:var(--t2); }
.wr-player { display:flex; align-items:center; gap:6px; }
.wr-avatar {
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-hud); font-size:11px; font-weight:800; color:#fff;
}
.wr-name { font-size:11px; color:var(--t3); }
.wr-win { font-family:var(--font-hud); font-size:13px; font-weight:800; color:var(--green); }

/* Section headers */
.sec-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 8px;
}
.sec-title {
  font-family:var(--font-hud); font-size:16px; font-weight:800;
  color:var(--t1); display:flex; align-items:center; gap:6px;
}
.sec-accent { width:3px; height:16px; background:var(--red); border-radius:2px; }
.sec-badge {
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-hud); font-size:10px; font-weight:700; color:var(--red);
}

/* Bottom Nav */
.bnav {
  position:fixed; bottom:0; left:0; right:0;
  height:60px; background:rgba(8,10,18,0.95);
  backdrop-filter:blur(20px); border-top:1px solid var(--border1);
  display:flex; align-items:center; justify-content:space-around;
  z-index:100; padding:0 8px;
}
.bnav-item {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-family:var(--font-hud); font-size:10px; font-weight:700;
  color:var(--t3); text-decoration:none; transition:color .2s;
}
.bnav-item.active { color:var(--gold); }
.bnav-item i { font-size:20px; }
.bnav-center {
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; margin-top:-20px;
  box-shadow:0 4px 15px rgba(255,45,84,0.4);
}