* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --bg:#0d0918; --card:#1b1436; --line:#2e2453;
  --ink:#f1edff; --ink-soft:#a294c9;
  --gold:#f5c542; --gold-tint:rgba(245,197,66,.10); --gold-dark:#ffd977;
  --purple:#8b5cf6; --purple-deep:#5b2ee5; --purple-tint:rgba(139,92,246,.14);
  --navy:#241b47; --green:#34d399; --red:#f87171;
  --radius:14px;
}
body { font-family:-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif; color:var(--ink); min-height:100vh;
  background:radial-gradient(900px 500px at 85% -5%,rgba(139,92,246,.16),transparent 60%),radial-gradient(700px 420px at -10% 30%,rgba(91,46,229,.10),transparent 60%),var(--bg); }
#app { max-width:520px; margin:0 auto; padding-bottom:96px; }
#topbar { background:linear-gradient(135deg,#17102e 0%,#221643 100%); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; box-shadow:0 2px 14px rgba(0,0,0,.45); border-bottom:1px solid var(--line); }
#brand { display:flex; align-items:center; gap:9px; }
#brand-icon { font-size:22px; }
#brand-name { font-size:19px; font-weight:800; color:var(--gold); letter-spacing:.4px; }
#lang-switch { background:var(--navy); color:var(--ink); border:1px solid rgba(245,197,66,.45); border-radius:9px; padding:5px 8px; font-size:12.5px; }
#score-strip { background:var(--gold-tint); color:var(--gold-dark); font-size:12.5px; font-weight:600; padding:9px 14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border-bottom:1px solid rgba(245,197,66,.18); }
#views { padding:14px; }
.view { display:none; }
.view.active { display:block; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:14px; box-shadow:0 4px 18px rgba(0,0,0,.35); }
.card h2 { font-size:16px; color:var(--ink); margin-bottom:12px; font-weight:800; }
.card h3 { font-size:14.5px; color:var(--ink); margin-bottom:10px; font-weight:800; }
input { display:block; width:100%; padding:12px 14px; margin-bottom:10px; border-radius:11px; border:1.5px solid var(--line); background:var(--navy); color:var(--ink); font-size:16px; }
input::placeholder, textarea::placeholder { color:#6f639b; }
input:focus { outline:none; border-color:var(--purple); background:#291f52; box-shadow:0 0 0 3px rgba(139,92,246,.18); }
.btn { display:block; width:100%; padding:13px; border:none; border-radius:11px; font-size:15.5px; font-weight:800; cursor:pointer; }
.btn-gold { background:linear-gradient(135deg,var(--gold),#ffce54); color:#231a04; box-shadow:0 3px 12px rgba(245,197,66,.35); }
.btn-navy { background:linear-gradient(135deg,var(--purple),var(--purple-deep)); color:#fff; box-shadow:0 3px 12px rgba(139,92,246,.35); }
.btn-red { background:rgba(248,113,113,.08); color:var(--red); border:1.5px solid rgba(248,113,113,.35); }
.mini-btn { background:var(--gold-tint); border:1px solid rgba(245,197,66,.3); color:var(--gold-dark); font-weight:800; border-radius:7px; padding:3px 10px; font-size:12px; cursor:pointer; }
.error { color:var(--red); font-size:13.5px; margin-top:6px; min-height:18px; font-weight:600; }

/* match cards: VS layout */
.match-item { padding:14px; border-radius:14px; background:linear-gradient(160deg,#201845 0%,#191231 100%); border:1.5px solid var(--line); margin-bottom:10px; cursor:pointer; transition:box-shadow .15s, border-color .15s, transform .15s; }
.match-item:active { border-color:var(--purple); }
.match-item:hover { border-color:rgba(139,92,246,.55); box-shadow:0 6px 20px rgba(139,92,246,.18); transform:translateY(-2px); }
.match-item .mt { font-weight:800; font-size:14px; margin-bottom:4px; color:var(--ink); }
.match-item .ms { font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin-top:9px; }
.mt-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.mt-row .mt { flex:1; }
.vs-row { display:flex; align-items:center; gap:8px; }
.vs-team { flex:1; display:flex; align-items:center; gap:8px; min-width:0; }
.vs-team.right { flex-direction:row-reverse; text-align:right; }
.vs-av { flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
.vs-av.a { background:linear-gradient(135deg,var(--purple),var(--purple-deep)); color:#fff; box-shadow:0 3px 10px rgba(139,92,246,.4); }
.vs-av.b { background:linear-gradient(135deg,var(--gold),#d99e06); color:#231a04; box-shadow:0 3px 10px rgba(245,197,66,.35); }
.vs-name { font-weight:700; font-size:13.5px; line-height:1.3; color:var(--ink); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.vs-mid { flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; }
.vs-badge { background:rgba(139,92,246,.16); border:1px solid rgba(139,92,246,.5); color:#c4b5fd; font-size:10px; font-weight:800; letter-spacing:1px; border-radius:999px; padding:3px 9px; }
.vs-series { text-align:center; font-size:11px; color:var(--ink-soft); margin-top:7px; font-weight:600; }
.live-badge { color:var(--red); font-weight:800; font-size:11px; }
.live-badge::before { content:'●'; display:inline-block; margin-right:3px; animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.india-badge { font-size:11px; }
.pill-live { flex:none; background:rgba(248,113,113,.12); color:#ff9c9c; border:1px solid rgba(248,113,113,.4); font-size:10px; font-weight:800; letter-spacing:.6px; border-radius:999px; padding:3px 9px; }
.pill-live::before { content:'●'; display:inline-block; margin-right:4px; animation:pulse 1.2s infinite; }

.big-score { font-size:25px; font-weight:800; margin:8px 0 2px; letter-spacing:.3px;
  background:linear-gradient(120deg,#ffffff,#c4b5fd 55%,var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#game-sub-score { color:var(--ink-soft); font-size:12.5px; line-height:1.5; }
#game-lastball { margin-top:10px; font-size:13.5px; color:var(--gold-dark); background:var(--gold-tint); border:1px solid rgba(245,197,66,.2); border-radius:9px; padding:8px 10px; font-weight:700; min-height:20px; }
#game-room-line { font-size:13px; color:var(--ink-soft); font-weight:600; }
#game-room-line b { background:var(--gold-tint); border:1px solid rgba(245,197,66,.3); color:var(--gold-dark); border-radius:8px; padding:3px 10px; font-size:14px; letter-spacing:2px; }
#game-match-title { font-size:12.5px; color:var(--ink-soft); margin-top:5px; }
#game-header { border-top:4px solid var(--purple); }
#guess-area h3 { text-align:center; margin:4px 0 12px; color:var(--ink); font-size:15px; }
#tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tile { aspect-ratio:.92; border:none; border-radius:13px; color:#fff; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .1s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-weight:800; }
.tile b { font-size:23px; line-height:1; }
.tile small { font-size:10px; font-weight:700; opacity:.92; letter-spacing:.3px; }
.tile:active { transform:scale(.94); }
.tile.picked { outline:3.5px solid var(--gold); outline-offset:2px; }
.tile:disabled { opacity:.45; cursor:not-allowed; }
.t0 { background:linear-gradient(160deg,#78909c,#546e7a); } .t1 { background:linear-gradient(160deg,#34c26e,#1e8a4c); } .t2 { background:linear-gradient(160deg,#12b5c4,#0b7e89); }
.t3 { background:linear-gradient(160deg,#5b97ec,#2f5fb8); } .t4 { background:linear-gradient(160deg,#f5a83c,#d97e0a); } .t6 { background:linear-gradient(160deg,#a06bf0,#7c3aed); }
.tW { background:linear-gradient(160deg,#ef6b6b,#c43333); } .tE { background:linear-gradient(160deg,#c9a227,#96760a); }
#guess-status { text-align:center; margin-top:12px; font-size:13.5px; color:var(--gold-dark); min-height:20px; font-weight:700; }
#player-list, #board-list { list-style:none; margin:0 0 12px; padding:0; }
#player-list li, #board-list li { display:flex; justify-content:space-between; align-items:center; gap:9px; padding:10px 12px; border-radius:10px; background:var(--navy); border:1px solid var(--line); margin-bottom:7px; font-size:14px; font-weight:600; }
#player-list li .pts, #board-list li .pts { color:var(--gold-dark); font-weight:800; background:var(--gold-tint); border:1px solid rgba(245,197,66,.22); border-radius:7px; padding:2px 10px; }
#player-list li.me, #board-list li.me { border:1.5px solid var(--gold); }
.pl-rank { flex:none; width:23px; height:23px; border-radius:7px; background:#2c2254; color:var(--ink-soft); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pl-rank.r1 { background:linear-gradient(135deg,var(--gold),#d99e06); color:#231a04; }
.pl-rank.r2 { background:#3a2f66; color:#c9bfe8; }
.pl-rank.r3 { background:rgba(245,168,60,.18); color:#f5a83c; }
.pl-av { flex:none; width:29px; height:29px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--purple-deep)); color:#fff; font-weight:800; font-size:13.5px; display:flex; align-items:center; justify-content:center; }
.pl-name { flex:1; }
.you-tag { background:var(--gold-tint); color:var(--gold-dark); border:1px solid rgba(245,197,66,.3); font-size:9.5px; font-weight:800; border-radius:5px; padding:1px 6px; letter-spacing:.5px; }

#bottom-nav { position:fixed; bottom:10px; left:10px; right:10px; max-width:500px; margin:0 auto; background:rgba(26,18,52,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:flex; border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.5); overflow:hidden; }
.nav-btn { flex:1; background:none; border:none; color:var(--ink-soft); padding:9px 0 10px; font-size:17px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; transition:color .15s, transform .12s; }
.nav-btn span { font-size:11px; font-weight:700; }
.nav-btn:active { transform:scale(.93); }
.nav-btn.active { color:var(--gold); animation:popIn .25s ease; }
.nav-btn.active::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:34px; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,var(--purple),var(--gold)); }

.login-card { max-width:400px; margin:30px auto 0; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.4); border-radius:18px; }
.login-card input { text-align:left; }
.login-card h2 { margin-top:2px; }
.login-hero { font-size:44px; margin-bottom:8px; }
.login-note { color:var(--ink-soft); font-size:12.5px; margin-top:12px; }
.login-note a { color:var(--gold-dark); font-weight:700; text-decoration:none; }
.muted { color:var(--ink-soft); font-size:13px; margin-bottom:10px; }

.user-row { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:11px 12px; border-radius:10px; background:var(--navy); border:1px solid var(--line); margin-bottom:8px; font-size:13px; }
.user-row .ur-main b { font-size:14px; }
.user-row .ur-meta { color:var(--ink-soft); font-size:11.5px; text-align:right; line-height:1.5; white-space:nowrap; }
.ur-actions { display:flex; gap:6px; margin-top:2px; align-items:center; }
.ur-top { display:flex; align-items:center; gap:10px; width:100%; }
.ur-av { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--purple-deep)); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none; }
.act-del { background:rgba(248,113,113,.10); color:var(--red); border-color:rgba(248,113,113,.35); }
.owner-tag { background:#2c2254; color:var(--gold-dark); border:1px solid rgba(245,197,66,.3); font-size:9.5px; font-weight:800; border-radius:5px; padding:2px 6px; letter-spacing:.5px; }
.status-tag { background:rgba(248,113,113,.12); color:#ff9c9c; border:1px solid rgba(248,113,113,.4); font-size:9.5px; font-weight:800; border-radius:5px; padding:2px 7px; letter-spacing:.5px; }
textarea { display:block; width:100%; padding:12px 14px; margin-bottom:10px; border-radius:11px; border:1.5px solid var(--line); background:var(--navy); color:var(--ink); font-size:14px; font-family:inherit; resize:vertical; }
textarea:focus { outline:none; border-color:var(--purple); background:#291f52; box-shadow:0 0 0 3px rgba(139,92,246,.18); }
#brand-logo { width:28px; height:28px; border-radius:7px; object-fit:cover; }
#brand-name b { color:var(--gold); }

/* login split layout */
body.logged-out #app { max-width:none; padding-bottom:0; }
body.logged-out #topbar, body.logged-out #score-strip { display:none; }
body.logged-out #views { padding:0; }
.login-view.active { display:block; }
.lw { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; background:var(--bg); }
.lside { position:relative; overflow:hidden; background:linear-gradient(155deg,#1c1238 0%,#120c26 60%,#0d0918 100%); border-right:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:44px 40px; }
.lside::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 86% 8%,rgba(245,197,66,.14) 0 120px,transparent 121px),radial-gradient(circle at 6% 92%,rgba(139,92,246,.20) 0 190px,transparent 191px),radial-gradient(circle at 92% 82%,rgba(91,46,229,.14) 0 120px,transparent 121px); }
.lside-inner { position:relative; max-width:430px; width:100%; }
.brand { display:flex; gap:14px; align-items:center; margin-bottom:6px; }
.brand-logo { width:64px; height:64px; flex:none; border-radius:16px; }
.brand-logo.sm { width:52px; height:52px; border-radius:13px; }
.brand-name { font-size:32px; line-height:1.12; font-weight:800; color:var(--ink); letter-spacing:.2px; }
.brand-tag { font-size:.85rem; color:var(--ink-soft); margin-top:2px; }
.ls-tag { margin:16px 0 14px; font-size:15.5px; color:#d9d2f2; line-height:1.5; font-weight:600; }
.ls-sub { font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:22px; }
.ls-feats { display:flex; flex-direction:column; gap:13px; }
.ls-feat { display:flex; gap:12px; align-items:center; font-size:13.5px; color:#cfc6ea; line-height:1.5; }
.ls-ic { flex:0 0 26px; height:26px; border-radius:8px; background:var(--navy); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.ls-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.ls-chip { background:var(--navy); border:1px solid rgba(245,197,66,.3); color:var(--gold-dark); font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; transition:transform .15s; }
.ls-chip:hover { transform:translateY(-2px); }
.ls-dots { display:flex; gap:7px; margin-top:26px; }
.ls-dot { width:9px; height:9px; border-radius:50%; opacity:.9; }
.ls-art { margin-top:26px; background:var(--navy); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 8px 22px rgba(0,0,0,.35); }
.ls-art-ruler { display:flex; justify-content:space-between; font-size:10.5px; color:#6f639b; font-weight:700; margin-bottom:8px; }
.ls-art-track { display:flex; gap:7px; }
.lb { flex:1; font-style:normal; text-align:center; padding:8px 0; border-radius:8px; background:#33265f; color:#c4b5fd; font-weight:800; font-size:14px; }
.lb.f { background:var(--gold); color:#231a04; }
.lb.s { background:var(--purple); color:#fff; }
.lb.w { background:#e8452c; color:#fff; }
.ls-art-cap { font-size:11.5px; color:var(--ink-soft); margin-top:9px; text-align:center; }

.lmain { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 28px; gap:16px; position:relative; }
.lang-sw-login { position:absolute; top:22px; right:26px; display:flex; gap:6px; }
.lang-sw-login button { border:1.5px solid var(--line); background:var(--navy); color:var(--ink-soft); border-radius:999px; padding:5px 14px; font-size:12.5px; font-weight:700; cursor:pointer; }
.lang-sw-login button.on { background:var(--gold); border-color:var(--gold); color:#231a04; }
.lcard { background:var(--card); border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.5); padding:36px 40px; max-width:440px; width:100%; text-align:center; border:1px solid var(--line); animation:popIn .4s ease both; }
.lcard-logo { display:flex; justify-content:center; margin:2px 0 10px; }
.greet-h { font-size:26px; font-weight:800; color:var(--ink); margin:0 0 7px; }
.ltag { color:var(--ink-soft); margin-bottom:24px; font-size:14.5px; }
.lcard .linp { text-align:left; }
.lcard .btn-p { margin-top:4px; }
.linp { width:100%; box-sizing:border-box; padding:13px 14px; border-radius:12px; border:1.5px solid var(--line); font-size:15px; margin-bottom:10px; background:var(--navy); color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.linp:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,92,246,.18); }
.lpass-wrap { position:relative; }
.lpass-wrap .linp { padding-right:46px; }
.lshow { position:absolute; right:8px; top:50%; transform:translateY(calc(-50% - 5px)); background:none; border:none; cursor:pointer; color:#8d81b5; padding:6px; }
.lshow svg { width:19px; height:19px; }
.or-line { display:flex; align-items:center; gap:12px; color:#6f639b; font-size:13px; margin:14px 0; }
.or-line::before, .or-line::after { content:''; flex:1; height:1px; background:var(--line); }
.btn-google { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#3c4043; border:1.5px solid #dadce0; border-radius:12px; padding:12px; font-size:15px; font-weight:600; cursor:pointer; transition:box-shadow .15s, border-color .15s, transform .1s; }
.btn-google:hover { box-shadow:0 2px 8px rgba(60,64,67,.18); border-color:#c6c9cf; }
.btn-p { background:linear-gradient(135deg,#ffd977,var(--gold)); color:#1b2338; border:none; border-radius:12px; padding:13px 12px; font-size:16px; font-weight:700; width:100%; cursor:pointer; box-shadow:0 6px 16px rgba(245,197,66,.30); font-family:inherit; transition:filter .12s, transform .1s, box-shadow .2s; }
.btn-p:hover { filter:brightness(1.06); }
.lrm { display:flex; align-items:center; gap:8px; font-size:13.5px; margin:-4px 0 12px; color:#b6abda; cursor:pointer; text-align:left; }
.lrm input { width:16px; height:16px; accent-color:var(--gold); cursor:pointer; margin:0; padding:0; }
.login-msg { min-height:20px; font-size:.85rem; color:var(--red); margin-top:8px; text-align:center; font-weight:600; }
.linklike { background:none; border:none; color:var(--gold-dark); font-size:13px; font-weight:700; text-decoration:underline; padding:0; cursor:pointer; font-family:inherit; }
.lcard .login-note { margin-top:16px; }
.lcard .login-note a { color:var(--gold-dark); }

@media (max-width:880px) {
  .lw { grid-template-columns:1fr; }
  .lside { padding:26px 20px 20px; border-right:none; border-bottom:1px solid var(--line); }
  .lside-inner { max-width:100%; }
  .lside .brand-logo { width:46px; height:46px; }
  .lside .brand-name { font-size:24px; }
  .ls-tag { font-size:14.5px; margin:10px 0 0; }
  .ls-sub { display:none; }
  .ls-feats, .ls-dots, .ls-art, .ls-chips { display:none; }
  .lmain { padding:26px 14px 40px; }
  .lang-sw-login { position:static; margin-bottom:2px; }
  .lcard { padding:26px 18px; }
  .greet-h { font-size:23px; }
}

/* heroes */
.hero-home { position:relative; overflow:hidden; background:linear-gradient(150deg,#3b2280 0%,#241556 55%,#1a1038 100%); border:1px solid rgba(139,92,246,.35); border-radius:18px; padding:20px 18px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 10px 30px rgba(61,34,138,.40); }
.hero-home::after { content:''; position:absolute; right:-46px; top:-52px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(245,197,66,.20),transparent 70%); }
.hh-info { position:relative; z-index:1; }
.hh-greet { color:#c9bfe8; font-size:12.5px; font-weight:600; letter-spacing:.2px; }
.hh-namerow { display:flex; align-items:center; gap:9px; margin-top:7px; }
.hh-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#ffd977,var(--gold)); color:#231a04; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(245,197,66,.45); }
.hh-name { color:#fff; font-size:21px; font-weight:800; letter-spacing:.2px; }
.hh-points { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.08); border:1px solid rgba(245,197,66,.30); color:var(--gold-dark); font-size:13px; font-weight:700; border-radius:999px; padding:5px 12px; transition:transform .15s; }
.hh-points b { font-size:14px; }
.hh-points:hover { transform:translateY(-2px); }
.hh-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:9px; }
.hh-chips .hh-points { margin-top:0; }
.hh-logo { position:relative; z-index:1; width:74px; height:74px; border-radius:18px; box-shadow:0 6px 18px rgba(0,0,0,.5); flex:none; animation:floaty 3.5s ease-in-out infinite; }
.owner-hero { margin-bottom:14px; }

.action-card { text-align:center; padding-top:20px; }
.ac-ic { width:52px; height:52px; margin:0 auto 10px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:25px; }
.ac-ic.gold-ic { background:var(--gold-tint); border:1.5px solid rgba(245,197,66,.3); box-shadow:0 4px 12px rgba(245,197,66,.18); }
.ac-ic.navy-ic { background:var(--purple-tint); border:1.5px solid rgba(139,92,246,.35); box-shadow:0 4px 12px rgba(139,92,246,.18); }
.action-card h2 { margin-bottom:5px; }
.action-card .muted { margin-bottom:14px; }

.acc-head { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.acc-avatar { width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,#ffd977,var(--gold)); color:#231a04; font-weight:800; font-size:23px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(245,197,66,.30); flex:none; }
.acc-nm { font-size:17px; font-weight:800; }
.acc-em { font-size:12.5px; color:var(--ink-soft); margin-top:2px; word-break:break-all; }
.stat-row { display:flex; gap:10px; margin-bottom:14px; }
.stat { flex:1; background:var(--navy); border:1.5px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.stat b { display:block; font-size:21px; color:var(--gold-dark); }
.stat span { font-size:11.5px; color:var(--ink-soft); font-weight:700; }

/* solo mode + responsive */
body.solo #btn-copy-code { display:none; }
body.solo #game-room-line span[data-i18n="room"] { display:none; }
body.solo #players-card { display:none; }
body.solo #game-room-code b, body.solo #game-room-code { letter-spacing:.5px; }
body.solo #room-colon { display:none; }
#solo-score { text-align:center; margin-top:12px; background:linear-gradient(120deg,rgba(245,197,66,.14),rgba(245,197,66,.07)); border:1px solid rgba(245,197,66,.3); color:var(--gold-dark); border-radius:11px; padding:10px; font-size:14px; font-weight:700; box-shadow:0 3px 10px rgba(245,197,66,.12); }
#solo-score b { font-size:16px; }

@media (min-width:900px) {
  #app { max-width:1020px; padding-bottom:120px; }
  #topbar { padding:18px 28px; }
  #brand-name { font-size:22px; }
  #brand-logo { width:34px; height:34px; }
  #views { padding:22px 28px; }
  .hero-home { padding:30px 32px; }
  .hh-name { font-size:26px; }
  .hh-avatar { width:44px; height:44px; font-size:20px; }
  .hh-logo { width:96px; height:96px; }
  #view-home.active { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  #view-home.active .hero-home { grid-column:1 / -1; margin-bottom:0; }
  #view-home.active .hb-wrap { grid-column:1 / -1; }
  #view-home.active .card { margin-bottom:0; }
  #view-home.active #home-error { grid-column:1 / -1; }
  #view-live.active #match-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  #view-live.active #match-list .match-item { margin-bottom:0; }
  #view-game.active { display:grid; grid-template-columns:1.25fr 1fr; gap:16px; align-items:start; }
  #view-game.active #game-header, #view-game.active #guess-area { grid-column:1; }
  #view-game.active #players-card { grid-column:2; grid-row:1 / span 2; margin-bottom:0; }
  body.solo #view-game.active { grid-template-columns:1fr; }
  #tiles { gap:12px; }
  .tile b { font-size:26px; }
  #view-owner.active { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  #view-owner.active .card:first-of-type { grid-column:1 / -1; }
  #view-account.active { max-width:560px; margin:0 auto; }
  #bottom-nav { max-width:1020px; bottom:14px; }
  .card { padding:20px; }
  .big-score { font-size:30px; }
}

/* gamification */
.share-link { color:var(--ink); font-weight:700; text-decoration:none; border-bottom:1.5px dashed var(--gold); }
.badge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.badge-cell { background:var(--navy); border:1px solid var(--line); border-radius:12px; padding:12px 6px; text-align:center; position:relative; }
.badge-cell.locked { opacity:.75; }
.badge-cell.locked::after { content:'\1F512'; position:absolute; top:5px; right:7px; font-size:10px; opacity:.75; }
.badge-cell:not(.locked) { background:linear-gradient(160deg,rgba(245,197,66,.14),rgba(139,92,246,.10)); border-color:rgba(245,197,66,.4); box-shadow:0 2px 10px rgba(245,197,66,.15); }
.badge-ic { font-size:22px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 auto; border-radius:50%; background:linear-gradient(140deg,rgba(139,92,246,.30),rgba(91,46,229,.22)); border:1px solid rgba(139,92,246,.45); box-shadow:0 3px 10px rgba(139,92,246,.25); }
.badge-cell:not(.locked) .badge-ic { background:linear-gradient(140deg,rgba(245,197,66,.35),rgba(217,158,6,.22)); border-color:rgba(245,197,66,.55); box-shadow:0 3px 12px rgba(245,197,66,.35); }
.badge-nm { font-size:11px; font-weight:700; color:var(--ink-soft); display:block; margin-top:6px; }
.badge-cell:not(.locked) .badge-nm { color:var(--gold-dark); }
.bdg { font-size:13px; margin-left:2px; }
#board-list li .pl-name { flex:1; }

/* premium polish animations */
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes popIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
@keyframes riseIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes shineSweep { 0% { transform:translateX(-120%) skewX(-18deg); } 100% { transform:translateX(240%) skewX(-18deg); } }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes flashGood { 0% { color:var(--green); transform:scale(1.12); } 100% { transform:scale(1); } }
@keyframes flashBad { 0% { color:var(--red); transform:scale(1.12); } 100% { transform:scale(1); } }
@keyframes glowGold { 0%,100% { box-shadow:0 0 0 0 rgba(245,197,66,.45); } 50% { box-shadow:0 0 0 7px rgba(245,197,66,0); } }
@keyframes shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
@keyframes bobChip { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-4px) rotate(1deg); } }

.view.active { animation:fadeUp .32s ease both; }
.view.active .card { animation:popIn .35s ease both; }
.view.active .card:nth-child(2) { animation-delay:.05s; }
.view.active .card:nth-child(3) { animation-delay:.1s; }
.hero-home::before { content:''; position:absolute; top:-20%; bottom:-20%; width:60px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); animation:shineSweep 4.5s ease-in-out infinite; }
.match-item.rise-in { animation:riseIn .4s ease both; }
#guess-status.good { animation:flashGood .5s ease; }
#guess-status.bad { animation:flashBad .5s ease; }
.tile.picked { animation:glowGold 1.1s ease infinite; }
#board-list li.rise-in, #player-list li.rise-in { animation:riseIn .35s ease both; }
#board-list li:first-child { box-shadow:0 0 0 1.5px rgba(245,197,66,.6), 0 4px 14px rgba(245,197,66,.15); }
.btn, .btn-p, .btn-google { transition:filter .12s, transform .1s, box-shadow .2s; }
.btn:hover, .btn-p:hover, .btn-google:hover { transform:translateY(-1.5px); box-shadow:0 6px 18px rgba(0,0,0,.4); }
.btn:active, .btn-p:active, .btn-google:active { transform:scale(.985); box-shadow:none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2.5px solid var(--purple); outline-offset:2px; }
.ls-art-track .lb { animation:bobChip 2.8s ease-in-out infinite; }
.ls-art-track .lb:nth-child(2n) { animation-delay:.4s; }
.ls-art-track .lb:nth-child(3n) { animation-delay:.8s; }
.shimmer { color:transparent !important; border-radius:8px; background:linear-gradient(90deg,#241b47 25%,#2f2458 50%,#241b47 75%); background-size:400px 100%; animation:shimmer 1.2s infinite linear; min-height:16px; }

@media (prefers-reduced-motion: reduce) {
  .hero-home::before, .hh-logo, .ls-art-track .lb, .tile.picked { animation:none !important; }
  .view.active, .view.active .card, .match-item.rise-in, #board-list li.rise-in, #player-list li.rise-in, .lcard { animation-duration:.01s !important; }
}

@media (max-width:640px){ .ur-meta { display:none; } }

/* v3.8.0 rocket ride (free-coins crash game) */
.rk-card { overflow:hidden; }
.rk-topline { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.rk-topline h2 { margin-bottom:0; }
.rk-bal-chip { background:var(--gold-tint); border:1px solid rgba(245,197,66,.3); color:var(--gold-dark); font-weight:800; border-radius:999px; padding:5px 12px; font-size:14px; }
.rk-screen { position:relative; height:180px; border-radius:16px; margin:12px 0 8px; background:radial-gradient(circle at 50% 105%,rgba(139,92,246,.30),transparent 70%),linear-gradient(180deg,#120c26,#1d1440); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
#rk-rocket { position:absolute; bottom:16px; left:50%; margin-left:-19px; font-size:36px; transition:transform .1s linear; filter:drop-shadow(0 6px 14px rgba(139,92,246,.55)); }
.rk-mult { font-size:46px; font-weight:800; letter-spacing:.5px; background:linear-gradient(120deg,#fff,#c4b5fd 55%,var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#rk-stage.flying .rk-screen { border-color:rgba(139,92,246,.6); box-shadow:0 0 26px rgba(139,92,246,.28); }
#rk-stage.crashed .rk-screen { border-color:rgba(248,113,113,.6); box-shadow:0 0 26px rgba(248,113,113,.28); animation:rkShake .4s ease; }
#rk-stage.crashed .rk-mult { background:linear-gradient(120deg,#ffb4b4,#f87171); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes rkShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
.rk-msg { text-align:center; min-height:20px; font-weight:700; font-size:14px; color:var(--gold-dark); margin-bottom:8px; }
.rk-quicks { display:flex; gap:8px; margin-bottom:10px; }
.rk-quick { flex:1; background:var(--navy); border:1px solid var(--line); color:var(--ink); border-radius:9px; padding:8px 0; font-weight:800; cursor:pointer; font-size:13.5px; }
.rk-quick:active { border-color:var(--purple); }
.rk-cashout { animation:glowGold 1.1s ease infinite; font-size:16.5px; }
.rk-hist-wrap { margin-top:14px; }
.rk-history { display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; min-height:10px; }
.rk-chip { background:var(--purple-tint); border:1px solid rgba(139,92,246,.4); color:#c4b5fd; border-radius:999px; padding:4px 11px; font-size:12px; font-weight:800; }
.rk-chip.low { background:rgba(248,113,113,.10); border-color:rgba(248,113,113,.35); color:#ff9c9c; }
.rk-note { text-align:center; font-size:11.5px; color:var(--ink-soft); margin-top:12px; }
@media (min-width:900px) { #view-rocket.active { max-width:600px; margin:0 auto; } }

/* ---------- Spin & Win ---------- */
.sp-card { overflow:hidden; }
.sp-wheel-wrap { position:relative; width:264px; height:264px; margin:18px auto 12px; }
.sp-wheel { width:100%; height:100%; border-radius:50%; position:relative; border:9px solid #e5484d; box-shadow:0 0 0 3px rgba(255,255,255,.18),0 16px 36px rgba(0,0,0,.55); background:conic-gradient(#f9a8d4 0 60deg,#c4b5fd 60deg 120deg,#67e8f9 120deg 180deg,#86efac 180deg 240deg,#fde68a 240deg 300deg,#fdba74 300deg 360deg); transition:transform 4.2s cubic-bezier(.12,.75,.15,1); }
.sp-lab { position:absolute; top:50%; left:50%; width:92px; margin-left:-46px; height:123px; padding-top:55px; text-align:center; font-size:10px; font-weight:800; color:#3b2d5c; line-height:1.3; transform:rotate(calc(var(--i)*60deg - 150deg)); transform-origin:50% 0; pointer-events:none; }
.sp-dot { position:absolute; top:-8px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff6d8; box-shadow:0 0 6px rgba(255,236,170,.9); transform:rotate(calc(var(--i)*30deg)); transform-origin:4px 141px; animation:spChase 1.25s linear infinite; animation-delay:calc(var(--i)*-.104s); }
.sp-pointer { position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent; border-top:20px solid #fff; filter:drop-shadow(0 3px 3px rgba(0,0,0,.45)); z-index:3; }
.sp-hub { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:#fff; border:5px solid #e5484d; display:flex; align-items:center; justify-content:center; font-size:22px; z-index:2; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.sp-inforow { display:flex; justify-content:space-between; align-items:center; margin:6px 2px 12px; font-weight:800; }
.sp-cost { color:var(--gold); }
.sp-leftchip { color:var(--ink-soft); font-size:13px; }
.sp-leftchip b { color:var(--gold); }
.sp-btn { width:100%; }
.sp-btn:disabled { opacity:.45; cursor:not-allowed; }
#sp-msg.good { color:var(--green); }

/* spin lighting & adventure effects */
@keyframes spChase { 0%,100%{ background:#fff6d8; box-shadow:0 0 5px rgba(255,236,170,.7); } 50%{ background:#ffd54a; box-shadow:0 0 14px 4px rgba(255,197,66,.95); } }
.sp-wheel-wrap::before { content:''; position:absolute; inset:-26px; border-radius:50%; background:radial-gradient(circle,rgba(245,197,66,.20) 0%,rgba(139,92,246,.14) 45%,transparent 70%); animation:spAura 3.2s ease-in-out infinite; pointer-events:none; }
@keyframes spAura { 0%,100%{ opacity:.65; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } }
.sp-wheel-wrap.spinning::before { animation-duration:.8s; }
.sp-wheel-wrap.spinning .sp-dot { animation-duration:.32s; }
.sp-pointer { filter:drop-shadow(0 3px 3px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(255,213,74,.85)); border-top-color:#ffe58a; }
.sp-hub { animation:spHubPulse 2.4s ease-in-out infinite; }
@keyframes spHubPulse { 0%,100%{ box-shadow:0 4px 12px rgba(0,0,0,.35),0 0 0 0 rgba(255,213,74,.5); } 50%{ box-shadow:0 4px 12px rgba(0,0,0,.35),0 0 18px 5px rgba(255,213,74,.55); } }
.sp-btn { position:relative; overflow:hidden; animation:spBtnGlow 1.8s ease-in-out infinite; }
@keyframes spBtnGlow { 0%,100%{ box-shadow:0 0 12px rgba(245,197,66,.35); } 50%{ box-shadow:0 0 26px rgba(245,197,66,.75); } }
.sp-btn::after { content:''; position:absolute; top:0; left:-80%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); animation:spSheen 2.6s ease-in-out infinite; }
@keyframes spSheen { 0%{ left:-80%; } 55%,100%{ left:130%; } }
.sp-btn:disabled { animation:none; }
.sp-btn:disabled::after { display:none; }
.sp-spark { position:absolute; font-size:13px; color:#ffe58a; text-shadow:0 0 8px rgba(255,213,74,.95); pointer-events:none; animation:spTwinkle 1.7s ease-in-out infinite; z-index:4; }
@keyframes spTwinkle { 0%,100%{ opacity:.15; transform:scale(.6) rotate(0deg); } 50%{ opacity:1; transform:scale(1.15) rotate(25deg); } }
.sp-spark.s1{ top:-16px; left:8%; animation-delay:0s; } .sp-spark.s2{ top:-20px; right:12%; animation-delay:.3s; font-size:16px; }
.sp-spark.s3{ top:34%; left:-22px; animation-delay:.6s; } .sp-spark.s4{ top:30%; right:-20px; animation-delay:.9s; font-size:16px; }
.sp-spark.s5{ bottom:-14px; left:18%; animation-delay:1.2s; } .sp-spark.s6{ bottom:-18px; right:22%; animation-delay:.45s; }
.sp-spark.s7{ top:8%; left:-14px; animation-delay:1.4s; font-size:11px; } .sp-spark.s8{ bottom:20%; right:-24px; animation-delay:.75s; font-size:11px; }
.sp-conf { position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:2px; background:var(--cc,#ffd54a); pointer-events:none; z-index:6; animation:spConf .95s ease-out forwards; }
@keyframes spConf { 0%{ transform:translate(-50%,-50%) rotate(0deg) scale(1); opacity:1; } 100%{ transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--rr)) scale(.35); opacity:0; } }



/* ---------- adventure win/loss ---------- */
.adv-ov { position:fixed; left:50%; top:34%; transform:translate(-50%,-50%) scale(.4); z-index:60; pointer-events:none; font-size:30px; font-weight:900; letter-spacing:.4px; opacity:0; text-align:center; white-space:nowrap; }
.adv-ov.win { opacity:1; color:#ffd54a; text-shadow:0 0 22px rgba(255,197,66,.95),0 4px 14px rgba(0,0,0,.6); animation:advPop 1.35s cubic-bezier(.2,.9,.3,1.2) both; }
.adv-ov.loss { opacity:1; color:#ff6b6b; text-shadow:0 0 22px rgba(239,68,68,.85),0 4px 14px rgba(0,0,0,.6); animation:advPop 1.35s cubic-bezier(.2,.9,.3,1.2) both, advShake .4s ease .1s; }
.adv-ov .adv-sub { font-size:15px; margin-top:6px; color:#ffe9a8; }
@keyframes advPop { 0%{ transform:translate(-50%,-50%) scale(.35); opacity:0; } 18%{ transform:translate(-50%,-50%) scale(1.12); opacity:1; } 30%{ transform:translate(-50%,-50%) scale(1); } 75%{ opacity:1; } 100%{ transform:translate(-50%,-58%) scale(1); opacity:0; } }
@keyframes advShake { 0%,100%{ margin-left:0; } 20%{ margin-left:-9px; } 40%{ margin-left:8px; } 60%{ margin-left:-6px; } 80%{ margin-left:4px; } }
.adv-flash { position:fixed; inset:0; z-index:55; pointer-events:none; opacity:0; }
.adv-flash.win { animation:advFlashW .8s ease-out both; }
.adv-flash.loss { animation:advFlashL .8s ease-out both; }
@keyframes advFlashW { 0%{ opacity:0; background:radial-gradient(ellipse at center,transparent 52%,rgba(255,197,66,.34) 100%); } 15%{ opacity:1; } 100%{ opacity:0; background:radial-gradient(ellipse at center,transparent 52%,rgba(255,197,66,.34) 100%); } }
@keyframes advFlashL { 0%{ opacity:0; background:radial-gradient(ellipse at center,transparent 48%,rgba(239,68,68,.40) 100%); } 15%{ opacity:1; } 100%{ opacity:0; background:radial-gradient(ellipse at center,transparent 48%,rgba(239,68,68,.40) 100%); } }
.adv-coin { position:fixed; z-index:61; font-size:19px; pointer-events:none; opacity:0; }
.adv-coin.up { animation:advCoinUp .95s ease-out both; }
.adv-coin.down { animation:advCoinDown .95s ease-in both; }
@keyframes advCoinUp { 0%{ opacity:0; transform:translate(0,0) scale(.5); } 15%{ opacity:1; } 100%{ opacity:0; transform:translate(var(--dx),var(--dy)) scale(1.15); } }
@keyframes advCoinDown { 0%{ opacity:0; transform:translate(0,0) scale(.5); } 15%{ opacity:1; } 100%{ opacity:0; transform:translate(var(--dx),var(--dy)) scale(.85) rotate(160deg); } }
.hb-badge { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; color:#fff; font-size:9.5px; font-weight:900; letter-spacing:.4px; flex:none; box-shadow:0 0 8px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.35); }
.hb-flag { font-size:19px; }

/* ---------- owner dashboard polish ---------- */
.ow-stats { display:flex; gap:9px; margin-top:11px; flex-wrap:wrap; position:relative; z-index:1; }
.ow-stat { flex:1; min-width:96px; display:flex; align-items:center; gap:9px; border-radius:13px; padding:9px 11px; border:1px solid var(--line); background:rgba(255,255,255,.05); }
.ow-ic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; }
.ow-s-users .ow-ic { background:rgba(139,92,246,.25); }
.ow-s-susp .ow-ic { background:rgba(248,113,113,.2); }
.ow-s-new .ow-ic { background:rgba(74,222,128,.18); }
.ow-stat-tx b { font-size:18px; display:block; line-height:1.1; }
.ow-stat-tx span { font-size:10.5px; color:var(--ink-soft); font-weight:700; }
.ow-s-users b { color:#c4b5fd; }
.ow-s-susp b { color:#fca5a5; }
.ow-s-new b { color:#86efac; }
.card-h-ic { margin-right:2px; }
.ur-av.urc0 { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.ur-av.urc1 { background:linear-gradient(135deg,#f59e0b,#d97706); }
.ur-av.urc2 { background:linear-gradient(135deg,#10b981,#059669); }
.ur-av.urc3 { background:linear-gradient(135deg,#3b82f6,#2563eb); }
.ur-av.urc4 { background:linear-gradient(135deg,#ec4899,#db2777); }
.ur-av.urc5 { background:linear-gradient(135deg,#f43f5e,#e11d48); }
.ur-chips { display:flex; gap:6px; margin-top:4px; }
.ur-chip { font-size:10.5px; font-weight:800; color:var(--ink-soft); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:6px; padding:2px 7px; }
.user-row.susp { border-color:rgba(248,113,113,.45); background:rgba(248,113,113,.05); }
.mini-btn.act-susp { background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.4); color:#fbbf24; }
.mini-btn.act-restore { background:rgba(74,222,128,.13); border-color:rgba(74,222,128,.4); color:#4ade80; }
.mini-btn.act-del { background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.4); color:#f87171; }

/* ---------- 7-tab nav fit ---------- */
@media (max-width:640px){
  .nav-btn { font-size:14px; padding:8px 0 9px; }
  .nav-btn span { font-size:9px; }
  #app { padding-bottom:116px; }
  #views { padding:12px 10px; }
  .hero-home { padding:16px 14px; border-radius:16px; }
  .hh-name { font-size:19px; }
  .hh-logo { width:60px; height:60px; border-radius:15px; }
  .card { border-radius:16px; }
  .hp-bub { max-width:86%; }
  .hb-card { min-width:230px; }
  .stat-row { gap:7px; }
  .stat { padding:10px 6px; }
  .stat b { font-size:18px; }
}
@media (max-width:350px){
  .sp-wheel-wrap { transform:scale(.84); margin:6px auto 0; }
}

/* ---------- home live banners ---------- */
.hb-wrap { margin-bottom:14px; }
.hb-head { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--ink); margin:0 2px 8px; letter-spacing:.3px; }
.hb-dot { width:8px; height:8px; border-radius:50%; background:#ef4444; box-shadow:0 0 8px #ef4444; animation:hbBlink 1.4s ease-in-out infinite; }
@keyframes hbBlink { 0%,100%{opacity:1} 50%{opacity:.35} }
.hb-scroll { overflow:hidden; border-radius:14px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.hb-track { display:flex; gap:10px; width:max-content; animation:hbScroll 32s linear infinite; }
.hb-track:active { animation-play-state:paused; }
@keyframes hbScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.hb-card { position:relative; overflow:hidden; min-width:246px; max-width:246px; border-radius:16px; padding:12px 13px 11px; background:linear-gradient(135deg,#2b1a55 0%,#1c1138 60%,#241539 100%); border:1px solid rgba(139,92,246,.55); box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); cursor:pointer; transition:transform .12s, border-color .15s, box-shadow .2s; }
.hb-card::before { content:''; position:absolute; top:-40%; right:-30%; width:70%; height:120%; background:radial-gradient(circle,rgba(245,197,66,.14),transparent 65%); pointer-events:none; }
.hb-card::after { content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent); animation:hbShine 4.5s ease-in-out infinite; pointer-events:none; }
@keyframes hbShine { 0%,55%{left:-70%} 85%,100%{left:140%} }
.hb-card:hover { border-color:rgba(245,197,66,.6); box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 18px rgba(139,92,246,.35); }
.hb-card:active { transform:scale(.97); }
.hb-teams { display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding-right:36px; }
.hb-flag { font-size:19px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.hb-tn { font-size:12.5px; font-weight:800; color:#fff; max-width:62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.hb-vs { font-size:9px; font-weight:800; color:var(--gold-dark); background:var(--gold-tint); border:1px solid rgba(245,197,66,.3); border-radius:5px; padding:1px 5px; margin:0 2px; }
.hb-score { font-size:10.5px; font-weight:600; color:#d9d3ee; margin-top:7px; line-height:1.4; min-height:14px; }
.hb-card .pill-live { position:absolute; top:8px; right:8px; }

/* ---------- gift coins ---------- */
.gift-overlay { position:fixed; inset:0; background:rgba(8,5,20,.7); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:60; padding:20px; }
.gift-box { width:100%; max-width:330px; background:var(--card,#1a1234); border:1px solid var(--line); border-radius:18px; padding:20px 18px; box-shadow:0 20px 50px rgba(0,0,0,.6); animation:popIn .22s ease; }
.gift-box h3 { margin:0 0 4px; }
.gift-box .rk-quicks { margin:10px 0 12px; }
.mini-btn.act-gift { background:rgba(139,92,246,.16); border-color:rgba(139,92,246,.45); color:#c4b5fd; }

/* ---------- edit profile / photo avatars ---------- */
.acc-avatar.has-photo img, .hh-avatar.has-photo img, .ur-av.has-photo img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.ur-av.has-photo { background:none; }
.ep-avrow { display:flex; align-items:center; gap:12px; margin-top:10px; }
.mini-btn.act-reset { background:rgba(103,232,249,.12); border-color:rgba(103,232,249,.4); color:#67e8f9; }

/* ---------- rocket aviator chart ---------- */
#rk-chart { position:absolute; inset:0; width:100%; height:100%; }
#rk-rocket { bottom:auto; left:26px; top:auto; margin:0; transform:translate(-50%,-50%) rotate(-15deg); transition:none; z-index:2; }
#rk-rocket.boom { transition:all .7s ease-in !important; transform:translate(-50%,46px) rotate(115deg) !important; opacity:0; }
.rk-mult { position:absolute; top:10px; left:14px; font-size:34px; z-index:2; }


/* ---------- Aviator-style rocket ---------- */
.rk2 { background:#141417 !important; border:1px solid #26262c !important; }
.rk2 .rk-topline h2 { color:#ff5c7a; font-style:italic; letter-spacing:.3px; text-shadow:0 0 14px rgba(225,29,72,.5); }
.rk2 .rk-screen { background:radial-gradient(ellipse 130% 90% at 50% 108%,rgba(225,29,72,.28),transparent 62%),radial-gradient(circle at 50% -30%,rgba(80,20,60,.5),transparent 60%),linear-gradient(180deg,#0c0c10,#151017); border-color:#2a2a31; }
.rk2 .rk-mult { background:none; -webkit-text-fill-color:#fff; color:#fff; font-size:44px; font-weight:900; top:14px; left:50%; transform:translateX(-50%); text-shadow:0 3px 18px rgba(0,0,0,.65); }
#rk-stage.crashed .rk-mult { background:none; -webkit-text-fill-color:#ff5c6c; color:#ff5c6c; }
.rk2-hist { justify-content:center; margin:2px 0 10px; min-height:26px; }
.rk2-hist .rk-chip { border:none; background:transparent; padding:2px 7px; font-size:13.5px; }
.rk-chip.low { color:#5aa2f0; }
.rk-chip.mid { color:#c05ce0; }
.rk-chip.hi { color:#ff5c7a; }
.rk2-panel { display:flex; gap:12px; align-items:stretch; background:#1b1b20; border:1px solid #2a2a31; border-radius:16px; padding:12px; margin-top:4px; }
.rk2-leftcol { flex:1; display:flex; flex-direction:column; gap:9px; }
.rk2-stepper { display:flex; align-items:center; justify-content:space-between; background:#101014; border:1px solid #2c2c33; border-radius:999px; padding:4px; }
.rk2-step { width:34px; height:34px; border-radius:50%; border:1px solid #3a3a42; background:#222228; color:#fff; font-size:19px; font-weight:800; cursor:pointer; }
.rk2-step:active { background:#2e2e36; }
.rk2-amt { color:#fff; font-size:18px; font-weight:900; }
.rk2-quicks { margin-bottom:0; }
.rk2-quicks .rk-quick { background:#101014; border-color:#2c2c33; color:#c9c9d2; border-radius:999px; padding:6px 0; font-size:12.5px; }
.rk2-bet { flex:1.1; border:none; border-radius:16px; background:linear-gradient(180deg,#2fc25f,#1d9e4b); color:#fff; font-size:17px; font-weight:900; cursor:pointer; line-height:1.25; padding:10px; box-shadow:0 6px 18px rgba(31,158,75,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.rk2-bet b { font-size:15px; }
.rk2-bet:active { transform:scale(.98); }
.rk2-cash { background:linear-gradient(180deg,#f6b73c,#e8930c); box-shadow:0 6px 18px rgba(232,147,12,.45), inset 0 1px 0 rgba(255,255,255,.3); animation:glowGold 1.1s ease infinite; }
.rk2 .rk-note { color:#7a7a85; }

/* ---------- daily reward ---------- */
.dr-card { background:linear-gradient(135deg,rgba(245,197,66,.14),rgba(139,92,246,.1)); border-color:rgba(245,197,66,.4); }
.dr-msg { min-height:18px; font-weight:800; color:var(--green); font-size:13px; margin:8px 0 0; }
#dr-claim:disabled { opacity:.55; cursor:not-allowed; }

/* ---------- help desk ---------- */
.hp-live { font-size:11.5px; font-weight:800; color:var(--green); }
.hp-thread { max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin:12px 0 10px; padding:4px 2px; }
.hp-bub { max-width:85%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.45; animation:popIn .18s ease; white-space:pre-wrap; }
.hp-bub.bot { align-self:flex-start; background:rgba(139,92,246,.16); border:1px solid rgba(139,92,246,.4); color:var(--ink); border-bottom-left-radius:4px; }
.hp-bub.me { align-self:flex-end; background:var(--gold-tint); border:1px solid rgba(245,197,66,.4); color:var(--gold-dark); font-weight:600; border-bottom-right-radius:4px; }
.hp-chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px; }
.hp-chip { background:var(--navy); border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.hp-chip:active { border-color:var(--purple); }
.hp-inputrow { display:flex; gap:8px; }
.hp-inputrow input { flex:1; }
.hp-send { width:52px; flex:none; padding:0; font-size:17px; }

/* ---------- banner pause on hover too ---------- */
.hb-scroll:hover .hb-track { animation-play-state:paused; }
.rk2-tabs { display:flex; background:#101014; border:1px solid #2c2c33; border-radius:999px; padding:3px; gap:3px; }
.rk2-tab { flex:1; border:none; background:transparent; color:#9a9aa5; font-size:13px; font-weight:800; padding:6px 0; border-radius:999px; cursor:pointer; }
.rk2-tab.on { background:#2c2c36; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.rk2-autorow { display:flex; align-items:center; justify-content:space-between; color:#c9c9d2; font-size:13.5px; font-weight:700; }
.rk2-toggle { border:1px solid #3a3a42; background:#222228; color:#9a9aa5; border-radius:999px; min-width:62px; padding:7px 12px; font-size:12.5px; font-weight:900; cursor:pointer; }
.rk2-toggle.on { background:linear-gradient(180deg,#2fc25f,#1d9e4b); border-color:#2fc25f; color:#fff; box-shadow:0 4px 12px rgba(31,158,75,.35); }
#btn-back { display:none; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid rgba(245,197,66,.45); background:#241a45; color:var(--gold); font-size:18px; font-weight:900; cursor:pointer; margin-right:10px; flex:0 0 auto; padding:0 0 2px; }
#btn-back:active { transform:scale(.94); background:#2e2258; }
.rk2-live { background:#1b1b20; border:1px solid #2a2a31; border-radius:16px; padding:10px 12px; margin-top:10px; max-height:220px; overflow-y:auto; }
.rk2-live-h { display:flex; justify-content:space-between; color:#9a9aa5; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; }
.rk2-row { display:flex; align-items:center; gap:8px; padding:6px 4px; border-bottom:1px solid #232329; font-size:13px; }
.rk2-row:last-child { border-bottom:none; }
.rk2-ava { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#06b6d4); color:#fff; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.rk2-nm { flex:1; color:#e5e5ea; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk2-ramt { color:#9a9aa5; font-size:12px; font-weight:700; }
.rk2-rst { color:#9a9aa5; font-size:12px; font-weight:800; min-width:86px; text-align:right; }
.rk2-row.won .rk2-rst { color:#4ade80; }
.rk2-row.lost .rk2-rst { color:#f87171; }
.rk2-row.me { background:rgba(245,197,66,.08); border-radius:8px; }
.rk2-row.me .rk2-nm { color:#ffd166; }
#rk-start:disabled { cursor:not-allowed; }
.ad-banner { position:relative; border:1px dashed #4a4a55; border-radius:12px; background:#15151a; min-height:64px; display:flex; align-items:center; justify-content:center; margin:0 0 14px; }
.ad-tag { position:absolute; top:4px; left:8px; background:#3a3a42; color:#c9c9d2; font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.5px; }
.ad-ph { color:#7a7a85; font-size:14px; font-weight:700; padding:14px 0; }
.ad-watch-card h3 { margin-bottom:4px; }
#ad-modal { position:fixed; inset:0; background:rgba(5,5,8,.92); z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; }
.ad-box { position:relative; width:100%; max-width:340px; background:#141417; border:1px solid #2a2a31; border-radius:18px; padding:38px 18px 18px; text-align:center; }
.ad-box .ad-tag { top:10px; left:10px; }
.ad-creative { background:linear-gradient(135deg,#1e293b,#312e81); border-radius:14px; padding:44px 10px; color:#c7d2fe; font-size:20px; margin-bottom:14px; }
.ad-count { color:#c9c9d2; font-size:14px; font-weight:800; margin-bottom:12px; min-height:18px; }