/* ===== UPay look for the whole site: indigo/violet/fuchsia header, white cards, 480px phone column, bottom menu, light + dark ===== */
:root{
  --bg:#e0e7ff; --ink:#0f172a; --mute:#64748b; --line:rgba(99,102,241,.22); --glass:#ffffff; --glass2:#eef2ff;
  --shadow:0 10px 24px -14px rgba(79,70,229,.45); --y:#f59e0b; --p2:#7c3aed;
  --grad:linear-gradient(100deg,#4f46e5 0%,#7c3aed 55%,#c026d3 100%);
}
html.dark{--bg:#020617;--ink:#f1f5f9;--mute:#94a3b8;--line:rgba(99,102,241,.3);--glass:rgba(15,23,42,.92);--glass2:rgba(30,41,59,.95);--shadow:0 10px 24px -14px rgba(0,0,0,.8)}
html{background:var(--bg)}
body{background:var(--bg);animation:none;color:var(--ink)}
.bg{display:none}
/* phone-width column, centred (same as UPay) */
body::before{content:"";position:fixed;z-index:0;top:0;bottom:0;left:50%;width:min(100%,480px);transform:translateX(-50%);background:linear-gradient(180deg,#eef2ff,#f8fafc 40%,#f8fafc);box-shadow:0 0 40px rgba(79,70,229,.18);pointer-events:none}
html.dark body::before{background:#020617;box-shadow:0 0 40px rgba(0,0,0,.6)}
main{max-width:480px;padding:16px 16px calc(110px + env(safe-area-inset-bottom))}
#view-lobby{max-width:480px}
/* header */
.top{max-width:480px;margin:0 auto;background:linear-gradient(90deg,#4f46e5,#7c3aed,#c026d3);backdrop-filter:none;box-shadow:0 8px 20px -8px rgba(79,70,229,.6)}
html.dark .top{background:linear-gradient(90deg,#312e81,#4c1d95,#701a75)}
.top-in{max-width:480px;padding:10px 12px;gap:6px}
.logo-tile{display:none}
.logo-txt{background:none;-webkit-text-fill-color:#fff;color:#fff;font-size:19px;font-weight:800;letter-spacing:-.02em}
.coin-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 12px;font-weight:800;font-size:14px;text-decoration:none;color:#451a03;background:linear-gradient(90deg,#fde68a,#fcd34d);box-shadow:0 3px 10px rgba(251,191,36,.45)}
.conn{color:#e0e7ff}.conn.on .dot{box-shadow:0 0 8px #34d399}
.chip{background:rgba(255,255,255,.18);color:#fff;box-shadow:none;padding:6px 10px;max-width:92px;font-size:13px}
.iconbtn{width:34px;height:34px;border-radius:999px;border:0;background:transparent;color:#fff;font-size:18px}
.iconbtn:hover{background:rgba(255,255,255,.22)}
.annbar{max-width:480px;margin:0 auto}
/* buttons */
.btn.primary{background:var(--grad);box-shadow:0 12px 22px -10px rgba(79,70,229,.8)}
.btn.soft{background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe}
html.dark .btn.soft{background:rgba(30,27,75,.7);color:#c7d2fe;border-color:#3730a3}
.back{color:#4338ca}.back:hover{color:#312e81}html.dark .back{color:#a5b4fc}
/* home */
.greet b{color:var(--ink)}
.hero{border-radius:26px;background:linear-gradient(125deg,#4338ca,#7c3aed,#c026d3,#4f46e5);background-size:300% 300%;box-shadow:0 18px 40px -14px rgba(79,70,229,.6)}
.hero h1{font-size:clamp(26px,7vw,34px)}
.ticker{margin:16px -16px 0;background:linear-gradient(90deg,#4f46e5,#7c3aed);border-color:transparent}
.ticker-in span{color:#fde68a}
.sec{font-size:19px}.sec i{background:linear-gradient(180deg,#4f46e5,#c026d3)}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.gcard{min-height:170px;border-radius:22px;box-shadow:0 12px 24px -12px rgba(79,70,229,.55)}
.ad{background:#fff;border:1px dashed #a5b4fc}html.dark .ad{background:var(--glass)}
.pill{background:#fef3c7;color:#b45309}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.tcard{background:var(--glass);border:1px solid var(--line);border-radius:22px;backdrop-filter:none;box-shadow:var(--shadow)}
.t-pink{color:#db2777}.t-blue{color:#0284c7}.t-green{color:#059669}
html.dark .t-pink{color:#ff8cc6}html.dark .t-blue{color:#7fd8ff}html.dark .t-green{color:#7ef2c4}
.tag18{background:#fde68a;color:#78350f}
/* cards / lobby */
.card{background:var(--glass);border:1px solid var(--line);border-radius:22px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow)}
.lobby-head{border-radius:24px;box-shadow:0 16px 30px -14px rgba(79,70,229,.6)}
.howto{background:#eef2ff;color:#334155;border-color:#c7d2fe;border-left-color:#7c3aed}
html.dark .howto{background:rgba(30,27,75,.5);color:#cbd5e1}
.codeinput{background:#fff;color:#0f172a;border-color:#c7d2fe}.codeinput::placeholder{color:#94a3b8}.codeinput:focus{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.18)}
html.dark .codeinput{background:#0f172a;color:#e2e8f0;border-color:#334155}
.offer{background:#eef2ff}html.dark .offer{background:rgba(30,27,75,.5)}
.notice{background:#fffbeb;border-color:#fcd34d;color:#92400e}
/* game stage + side panels stay "table dark" like UPay's game tables (indigo felt) */
#gameArea,.side-col,#view-video{--ink:#fff;--mute:#c7d2fe;--line:rgba(255,255,255,.16);--glass:rgba(255,255,255,.09);--glass2:rgba(255,255,255,.16);--shadow:none;color:#fff}
#gameArea{border-radius:24px;padding:10px;background:radial-gradient(120% 120% at 20% 0%,#4338ca 0%,#1e1b4b 55%,#0f0a2e 100%);box-shadow:0 18px 34px -16px rgba(30,27,75,.8)}
.side-col{border-radius:24px;padding:10px;background:linear-gradient(180deg,#1e1b4b,#17123f);margin-top:14px;box-shadow:0 18px 34px -16px rgba(30,27,75,.8)}
.side-col .card{box-shadow:none}.side-col .btn.soft{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.2)}
.wait .muted,#waitBox{color:var(--ink)}
.room-grid{display:block}
/* bottom menu (5 items) */
.nav{width:min(100%,480px);bottom:0;border-radius:24px 24px 0 0;grid-template-columns:repeat(5,1fr);gap:0;padding:0 0 env(safe-area-inset-bottom);background:rgba(255,255,255,.96);border:0;border-top:1px solid #e0e7ff;box-shadow:0 -4px 20px rgba(79,70,229,.15);backdrop-filter:blur(10px)}
html.dark .nav{background:rgba(15,23,42,.96);border-top-color:#1e293b}
.nav-i{border-radius:0;padding:10px 2px;color:#475569}
html.dark .nav-i{color:#94a3b8}
.nav-i.on{background:none;box-shadow:none;color:#4338ca}html.dark .nav-i.on{color:#a5b4fc}
.nav-i svg{width:22px;height:22px}
.toast{bottom:calc(84px + env(safe-area-inset-bottom));background:#1e1b4b;color:#fff}
/* dialogs */
dialog{background:#fff;color:#0f172a;border:1px solid #c7d2fe;border-radius:22px;box-shadow:0 24px 60px rgba(30,27,75,.35)}
dialog::backdrop{background:rgba(15,23,42,.55)}
html.dark dialog{background:#0f172a;color:#e2e8f0;border-color:#3730a3}
dialog .field{background:#fff;color:#0f172a;border-color:#c7d2fe}dialog .field:focus{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.18)}
html.dark dialog .field{background:#020617;color:#e2e8f0;border-color:#334155}
.tabs2 button{background:#eef2ff;color:#4338ca}
dialog .err{color:#e11d48}
.rec{background:#eef2ff;color:#312e81;border-color:#6366f1}
footer,footer a{color:var(--mute)}
.me-av{background:#eef2ff}.stats div{background:#eef2ff}html.dark .stats div,html.dark .me-av{background:rgba(30,41,59,.8)}
.xpbar{background:#e0e7ff}
.brow{border-color:#e0e7ff}html.dark .brow{border-color:#1e293b}
.annbar{color:#451a03}
.doc{max-width:480px!important}.doc p,.doc li{color:#334155!important}html.dark .doc p,html.dark .doc li{color:#cbd5e1!important}.doc h2{color:#4338ca}html.dark .doc h2{color:#a5b4fc}
/* compact header so everything fits on a 360px phone */
.top-in{gap:4px;padding:9px 8px}.logo{margin-right:auto;min-width:0}.logo-txt{font-size:17px}
.conn b{display:none}.chip{max-width:74px;padding:5px 8px;font-size:12px}.coin-pill{padding:4px 9px;font-size:13px}
.iconbtn{width:30px;height:30px;font-size:16px}.iconbtn svg{width:18px;height:18px}
.codechip{background:#fff;color:#4338ca;border:1.5px solid #c7d2fe;box-shadow:0 6px 14px -8px rgba(79,70,229,.5)}
html.dark .codechip{background:rgba(30,27,75,.7);color:#c7d2fe;border-color:#3730a3}
.room-bar h1{color:#4338ca;-webkit-text-fill-color:#4338ca;background:none}html.dark .room-bar h1{color:#a5b4fc;-webkit-text-fill-color:#a5b4fc}
.bigcode{background:linear-gradient(90deg,#4f46e5,#c026d3);-webkit-background-clip:text;background-clip:text}