*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:#0b1220;color:#eef2ff;min-height:100vh}
#app{max-width:480px;margin:0 auto;min-height:100vh;padding-bottom:76px;position:relative}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(135deg,#16a34a,#065f46);position:sticky;top:0;z-index:5}
.logo{font-weight:900;font-size:22px;letter-spacing:.5px}.logo small{font-size:12px;opacity:.8;font-weight:500;margin-inline-start:6px}
.coins{background:#facc15;color:#422006;border-radius:20px;padding:5px 12px;font-weight:800;font-size:14px}
.lang{background:none;border:1px solid #fff6;color:#fff;border-radius:8px;padding:3px 7px;font-size:12px;margin-inline-start:8px}
.wrap{padding:14px}h2{font-size:18px;margin:14px 0 8px}h3{font-size:15px;margin:10px 0 6px}
.card{background:#131c31;border:1px solid #23304d;border-radius:16px;padding:14px;margin-bottom:12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.muted{color:#94a3b8;font-size:13px}
.teams{font-weight:700;font-size:16px}.badge{font-size:11px;border-radius:10px;padding:2px 8px;background:#1e3a8a}.live{background:#dc2626;animation:p 1.2s infinite}@keyframes p{50%{opacity:.5}}
.btn{display:block;width:100%;border:0;border-radius:12px;padding:12px;font-size:15px;font-weight:700;background:#22c55e;color:#052e16;margin-top:10px;cursor:pointer}
.btn.sec{background:#1e293b;color:#e2e8f0;border:1px solid #334155}.btn.gold{background:#facc15;color:#422006}.btn:disabled{opacity:.45}
.pot{color:#facc15;font-weight:800}.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}.chip{white-space:nowrap;border:1px solid #334155;border-radius:20px;padding:6px 12px;font-size:13px;background:#0f172a;color:#cbd5e1}.chip.on{background:#22c55e;color:#052e16;border-color:#22c55e}
input,select,textarea{width:100%;background:#0f172a;border:1px solid #334155;color:#fff;border-radius:10px;padding:10px;font-size:15px;margin-top:4px}
.score{display:flex;gap:8px;align-items:center;justify-content:center}.score input{width:64px;text-align:center;font-size:22px}
label{font-size:13px;color:#94a3b8;display:block;margin-top:10px}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:flex;background:#0f172a;border-top:1px solid #23304d;z-index:6}
.nav a{flex:1;text-align:center;padding:10px 0 12px;color:#94a3b8;text-decoration:none;font-size:11px}.nav a b{display:block;font-size:20px}.nav a.on{color:#22c55e}
.legal{font-size:11px;color:#64748b;text-align:center;padding:10px 14px}
.full{position:fixed;inset:0;background:radial-gradient(circle at top,#14532d,#020617 70%);z-index:20;overflow:auto;padding:14px;max-width:480px;margin:0 auto}
.big{font-size:56px;font-weight:900;text-align:center;letter-spacing:4px}.min{text-align:center;color:#f87171;font-weight:700}
.chat{max-height:150px;overflow:auto;font-size:13px}.chat p{padding:3px 0}.chat b{color:#86efac}
.x{position:absolute;top:12px;inset-inline-start:12px;background:#0008;border:0;color:#fff;border-radius:50%;width:34px;height:34px;font-size:18px}
.q{display:flex;gap:6px;margin-top:6px}.q button{flex:1}
.win{text-align:center;padding-top:30px}.ball{font-size:90px;animation:b 1s infinite alternate}@keyframes b{to{transform:translateY(-14px) rotate(20deg)}}
.share{background:linear-gradient(135deg,#facc15,#f97316);color:#1c1917;border-radius:18px;padding:18px;margin:16px 0;font-weight:700}
.medal{display:inline-block;width:30%;text-align:center;margin:4px 1%;padding:10px 4px;background:#0f172a;border-radius:12px;font-size:12px}.medal span{font-size:30px;display:block}.lock{opacity:.35;filter:grayscale(1)}
#toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:#22c55e;color:#052e16;padding:10px 16px;border-radius:12px;font-weight:700;display:none;z-index:50;max-width:90%}
.clap{font-size:40px;letter-spacing:6px}
table{width:100%;font-size:13px;border-collapse:collapse}td{padding:6px 2px;border-bottom:1px solid #23304d}

[data-s="0"]{margin-top:6px}
[data-s="1"]{margin:8px 0}
[data-s="2"]{margin-top:8px}
[data-s="3"]{font-size:20px;margin:8px 0}
[data-s="4"]{text-align:center}
[data-s="5"]{margin-top:14px;font-weight:700}
[data-s="6"]{margin-top:12px}
[data-s="7"]{flex:0 0 70px;margin-top:4px}
[data-s="8"]{font-size:28px;margin:8px 0}
[data-s="9"]{margin-top:10px}
[data-s="10"]{text-align:center;background:linear-gradient(135deg,#422006,#131c31)}
[data-s="11"]{font-size:50px}
[data-s="12"]{text-align:start;margin:12px 20px;line-height:1.9}
[data-s="13"]{text-align:center;margin-top:8px}
.meRow td{font-weight:bold;color:#ffd54a}.win table{width:100%;font-size:12px}

.lbt{width:100%;font-size:13px}.lbt td{padding:6px 4px}.lbt tr.top3 td:first-child{font-size:20px}.lbt tr.top3{background:#ffd54a14}.lbt .pin{background:#22c55e22;border-top:2px dashed #22c55e}.lbt .sep td{text-align:center;color:#64748b}.lbsel{width:100%;padding:8px;margin:6px 0;border-radius:8px;background:#0f172a;color:#fff;border:1px solid #23304d}
.champ{text-align:center;background:linear-gradient(135deg,#3b2f0a,#0f172a);border:1px solid #ffd54a55}.champ h2{margin:4px 0;color:#ffd54a}.ch1{font-size:18px;font-weight:bold}
.wt{color:#22c55e}.big2{font-size:30px;text-align:center;line-height:1.5;margin:10px 0}.big2 span{opacity:.8}
.lbt td.fl{width:28px;text-align:center;unicode-bidi:isolate}.lbt td bdi{unicode-bidi:isolate}

.helpq{position:fixed;top:64px;inset-inline-end:12px;z-index:40;width:32px;height:32px;border-radius:50%;border:1px solid #ffd54a;background:#0f172a;color:#ffd54a;font-weight:bold;font-size:17px}
.full .helpq,.helpq{}
.tip{display:inline-block;margin:0 4px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:#23304d;color:#ffd54a;font-size:13px;cursor:pointer;vertical-align:middle}
.ovl{position:fixed;inset:0;background:#000a;z-index:100;display:flex;align-items:center;justify-content:center}
.onbbox{position:relative;width:92%;max-width:420px;background:#0f172a;border:1px solid #ffd54a55;border-radius:18px;padding:18px 0 16px;text-align:center}
.onbbox .skip{position:absolute;top:10px;inset-inline-end:12px;background:none;border:0;color:#94a3b8;font-size:14px;z-index:2}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;padding:16px 22px;box-sizing:border-box}.slide .ic{font-size:56px}.slide h2{color:#ffd54a;margin:8px 0}.slide p{line-height:1.6;color:#cbd5e1}
.dots{margin:8px 0}.dots i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#334155;margin:0 4px}.dots i.on{background:#22c55e;width:20px;border-radius:4px}
.onbbox .btn{width:80%;margin:auto}
.sheet{width:92%;max-width:420px;background:#0f172a;border:1px solid #23304d;border-radius:16px;padding:18px;line-height:1.6}
.top .helpq{position:static;width:28px;height:28px;font-size:15px;margin-inline-start:6px;vertical-align:middle}.top>div:last-child{display:flex;align-items:center;gap:4px}
.score{align-items:flex-end}.sbx{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.sbx .tn{font-size:13px;font-weight:bold;text-align:center;min-height:2.4em;display:flex;align-items:flex-end}

/* calm redesign */
body{background:#0b1220}.wrap{padding:18px 18px 8px}
.card{border:0;background:#111a2e;border-radius:20px;padding:18px;margin-bottom:18px}
h2{font-size:20px;margin:18px 0 12px}h3{font-size:16px;margin:0 0 10px;font-weight:600}
.legal{opacity:.6;padding:24px 14px 8px}
.chips.flat .chip{border:0;background:transparent;color:#94a3b8;padding:6px 10px}.chips.flat .chip.on{background:#22c55e22;color:#4ade80}
.mc{display:block;text-decoration:none;color:inherit;background:#111a2e;border-radius:20px;padding:18px;margin:14px 0}
.mm{display:flex;justify-content:space-between;font-size:12px;color:#94a3b8}.mt{font-size:19px;font-weight:700;margin:12px 0;line-height:1.5}
.mb{display:flex;align-items:center;gap:12px}.mb .pill{margin-inline-start:auto;background:#22c55e;color:#052e16;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:700}.mb .pill.gold{background:#facc15;color:#422006}
.badge{background:#1e293b}.badge.live{background:#dc2626}
.calm .mhead{text-align:center;margin:10px 0 18px}.mtitle{font-weight:800}.potbig{font-size:34px;font-weight:900;color:#facc15;margin:6px 0}
.prog{display:flex;gap:6px;margin:0 0 18px}.prog i{flex:1;height:4px;border-radius:2px;background:#1e293b}.prog i.on{background:#22c55e}
.step{display:none;text-align:center;min-height:190px}.step.on{display:block}.sn{color:#64748b;font-size:12px}.sq{margin:6px 0 20px}
.score{gap:14px}.score input{width:84px;height:72px;font-size:34px;font-weight:800;border:0;background:#111a2e;border-radius:16px}.score>b{font-size:28px;color:#64748b}
.calm select,.calm #for{border:0;background:#111a2e;border-radius:14px;padding:14px;font-size:16px}
.chips.big{justify-content:center;flex-wrap:wrap;gap:10px}.chips.big .chip{font-size:17px;padding:12px 18px;border:0;background:#111a2e}.chips.big .chip.on{background:#22c55e;color:#052e16}
.calm #for{margin-top:16px}.btn.huge{font-size:19px;padding:18px;border-radius:16px;margin-top:20px}
.stepnav{display:flex;gap:10px}.stepnav>*{flex:1}.c{text-align:center}.who{margin-top:22px}
.livepot{text-align:center;margin:10px 0 20px}.big2{font-size:34px}.full .card{background:#ffffff0d}
.chat{max-height:120px}.btn.sec{border:0;background:#1e293b}
td{border-bottom:1px solid #ffffff0a}.win .card table{font-size:12px;color:#cbd5e1}
.mb{flex-wrap:nowrap;gap:10px}.mb>span{white-space:nowrap}.mb .muted{font-size:12px;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}.mb .pill{flex:none}.mb .pot{display:flex;gap:3px;align-items:center}

.pickbtn{width:100%;display:flex;justify-content:space-between;align-items:center;background:#111a2e;border:0;border-radius:14px;padding:16px;color:#fff;font-size:17px;font-weight:700}
.ovl.bot{align-items:flex-end}.bsheet{width:100%;max-width:480px;max-height:80vh;display:flex;flex-direction:column;background:#0f172a;border-radius:22px 22px 0 0;padding:10px 16px 16px}
.grab{width:40px;height:4px;border-radius:2px;background:#334155;margin:0 auto 10px}.bsheet input{margin:6px 0 10px;border:0;background:#111a2e}
.slist{overflow:auto}.sgh{position:sticky;top:0;background:#0f172a;color:#facc15;font-weight:800;font-size:14px;padding:12px 4px 6px}
.sp{display:flex;justify-content:space-between;width:100%;background:none;border:0;border-bottom:1px solid #ffffff0a;color:#e2e8f0;padding:12px 4px;font-size:15px;text-align:start}.sp span{color:#64748b;font-size:12px}.sp.on{color:#4ade80;font-weight:700}
.mb .muted{white-space:normal;overflow:visible;font-size:12px;line-height:1.3}
.cd{margin-top:8px;color:#4ade80;font-size:14px;font-weight:600}.cdh{font-size:12px;color:#4ade80;margin-top:4px}.lockbox{text-align:center;padding:30px 10px}.lockbox .lk{font-size:54px}.lockbox p{margin-top:10px;line-height:1.7}
.joined{text-align:center;margin:10px 0 18px}.jin{font-size:26px;font-weight:900;color:#4ade80;margin-bottom:8px}.pk{font-size:20px;font-weight:700;margin:6px 0}.jrow{display:flex;justify-content:space-around;text-align:center}.jrow div{display:flex;flex-direction:column;gap:4px}.jrow b{font-size:20px}
.plink{display:block;text-decoration:none;color:inherit}.pp{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid #ffffff0a}.pk2{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid #ffffff0a}.pkb{flex:1;line-height:1.6}.rk{width:26px;text-align:center;font-weight:800;color:#94a3b8}.pts{font-size:22px;font-weight:900;color:#facc15}.pts small{font-size:11px;color:#94a3b8}.meRow{color:#ffd54a}
.note{color:#facc15;font-size:13px;margin:4px 0 14px;line-height:1.6}.upd{margin-inline-start:8px;background:#facc1522;color:#facc15;font-size:11px;border-radius:10px;padding:2px 8px;font-weight:700}#chat2{max-height:45vh}
a.coins{text-decoration:none;display:inline-flex;align-items:center;gap:4px}.coins .plus{background:#422006;color:#facc15;border-radius:50%;width:18px;height:18px;line-height:18px;text-align:center;font-size:13px}.ern .eh,.ms .eh{display:flex;justify-content:space-between;align-items:center}.rw{color:#facc15;font-weight:900;font-size:18px}.ern p{margin:6px 0}.bar{flex:1;height:8px;border-radius:4px;background:#1e293b;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:#22c55e}.streak{display:flex;gap:6px;margin:10px 0}.streak i{flex:1;text-align:center;padding:8px 0;border-radius:10px;background:#1e293b;font-style:normal;font-size:13px;color:#94a3b8}.streak i.on{background:#22c55e;color:#052e16;font-weight:800}.invl{background:#0b1220;border-radius:10px;padding:10px;text-align:center;font-family:monospace;color:#4ade80;margin:8px 0}.ms{padding:10px 0;border-bottom:1px solid #ffffff0a}.msr{display:flex;align-items:center;gap:10px}

/* 2026-10-24: avatars, favorite team, chat, leaderboard */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;object-fit:cover;flex:none;vertical-align:middle;font-weight:800;color:#fff;overflow:hidden;line-height:1}
.av-s{width:28px;height:28px;font-size:15px}.av-m{width:40px;height:40px;font-size:22px}.av-l{width:64px;height:64px;font-size:36px;border:3px solid #22c55e}.av-xl{width:120px;height:120px;font-size:64px;border:5px solid #ffd54a;box-shadow:0 0 30px #ffd54a88}
.avh-0,.nmc-0{}.avh-0{background:#ef4444}.nmc-0{color:#ef4444}
.avh-1,.nmc-1{}.avh-1{background:#f97316}.nmc-1{color:#f97316}
.avh-2,.nmc-2{}.avh-2{background:#eab308}.nmc-2{color:#eab308}
.avh-3,.nmc-3{}.avh-3{background:#84cc16}.nmc-3{color:#84cc16}
.avh-4,.nmc-4{}.avh-4{background:#22c55e}.nmc-4{color:#22c55e}
.avh-5,.nmc-5{}.avh-5{background:#14b8a6}.nmc-5{color:#14b8a6}
.avh-6,.nmc-6{}.avh-6{background:#06b6d4}.nmc-6{color:#06b6d4}
.avh-7,.nmc-7{}.avh-7{background:#3b82f6}.nmc-7{color:#3b82f6}
.avh-8,.nmc-8{}.avh-8{background:#6366f1}.nmc-8{color:#6366f1}
.avh-9,.nmc-9{}.avh-9{background:#a855f7}.nmc-9{color:#a855f7}
.avh-10,.nmc-10{}.avh-10{background:#ec4899}.nmc-10{color:#ec4899}
.avh-11,.nmc-11{}.avh-11{background:#f43f5e}.nmc-11{color:#f43f5e}
.avc-m1{background:#2563eb}.avc-m2{background:#0d9488}.avc-m3{background:#7c3aed}.avc-m4{background:#475569}.avc-f1{background:#db2777}.avc-f2{background:#ea580c}.avc-f3{background:#ca8a04}.avc-f4{background:#16a34a}
.wav{display:flex;gap:12px;justify-content:center;margin:10px 0}.shav{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.mehead{display:flex;align-items:center;gap:12px}.avedit{position:relative;background:none;border:0;padding:0;cursor:pointer}.avedit>span:last-child{position:absolute;bottom:-2px;inset-inline-end:-2px;font-size:14px;background:#0f172a;border-radius:50%;padding:3px}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 12px}.avb{background:#111a2e;border:2px solid transparent;border-radius:14px;padding:8px 0;color:#e2e8f0;display:flex;flex-direction:column;align-items:center;gap:4px}.avb.on{border-color:#22c55e}.avnow{text-align:center;margin:4px 0 8px}.upl{display:block;text-align:center}.small{font-size:12px}.bsheet{overflow:auto}
.pk2 .av{margin-inline-end:10px}
.tpo{z-index:250;overflow:auto;align-items:flex-start}.tpbox{width:100%;max-width:480px;background:#0f172a;min-height:100%;padding:20px 16px;text-align:center}.tpbox h4{margin:14px 0 6px;color:#86efac}.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.tbtn{background:#111a2e;border:2px solid #1e293b;border-radius:16px;padding:10px;color:#f1f5f9;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}.tbtn.on{border-color:#22c55e}.tbtn .crest{width:38px;height:46px;flex:none}.tpbox>.btn{margin-top:16px;width:100%}
.myteam{display:flex;align-items:center;gap:10px;margin:6px 0 10px;font-size:18px}.myteam .crest{width:42px;height:50px}
.fpo{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;animation:fpin .35s ease-out;cursor:pointer}
.fpo .crest.big{width:46vw;max-width:220px;height:auto;filter:drop-shadow(0 10px 25px #0008);animation:fpb 1s ease-in-out infinite alternate}
.fpn{font-size:clamp(34px,11vw,64px);font-weight:900;margin:18px 12px 6px;line-height:1.1}.fps{font-size:24px;font-weight:800}.fans{font-size:34px;margin-top:14px;animation:fpj .4s ease-in-out infinite alternate}.fpt{position:absolute;bottom:28px;color:#000a;font-size:13px;background:#fff8;padding:4px 12px;border-radius:12px}
.fpm{position:absolute;top:16px;inset-inline-end:16px;font-size:24px;background:#0006;border:0;border-radius:50%;width:48px;height:48px;color:#fff}
@keyframes fpin{from{opacity:0;transform:scale(1.08)}}@keyframes fpb{to{transform:scale(1.06)}}@keyframes fpj{to{transform:translateY(-8px)}}
.chhead{display:flex;align-items:center;justify-content:space-between;gap:8px}.chx{background:#1e293b;color:#e2e8f0;border:0;border-radius:10px;padding:8px 12px;font-size:14px;font-weight:700}
.chat.cbig{max-height:none;height:42vh;font-size:16px;line-height:1.45;display:flex;flex-direction:column;gap:10px;padding:8px 2px;overflow:auto;background:#020617aa;border-radius:12px}
.msg{display:flex;align-items:flex-end;gap:8px;max-width:88%}.msg.mine{align-self:flex-end;flex-direction:row-reverse}
.bub{background:#1e293b;color:#f8fafc;border-radius:16px;padding:8px 12px;border-start-start-radius:4px}.msg.mine .bub{background:#166534;border-start-start-radius:16px;border-start-end-radius:4px}
.bh{display:flex;gap:10px;align-items:baseline;justify-content:space-between;font-size:13px}.bh .tm{color:#94a3b8;font-size:12px}.msg.mine .bh .nm{color:#bbf7d0}.bt{font-size:17px;word-break:break-word}
.cin{display:flex;gap:8px;margin-top:10px}.cin input{flex:1;font-size:17px;min-height:50px;padding:10px 14px;border-radius:14px;border:2px solid #334155;background:#0b1222;color:#fff;margin:0}.btn.csend{min-height:50px;min-width:84px;font-size:17px;width:auto;margin:0}
.chfull .bsheet{max-height:100vh;height:100vh;border-radius:0}.chfull #chat2{flex:1;height:auto;max-height:none}
.lbnote{font-size:12px;margin:4px 0 8px}.lbsub{display:block;color:#94a3b8;font-size:11px}.lbk{font-weight:800;color:#86efac;white-space:nowrap}.lbt tr.lbh td{color:#64748b;font-size:11px}.lbt td .av{margin-inline-end:6px}
.fpo .crowd{width:100%;max-width:480px;height:44vh;border-radius:0 0 28px 28px;box-shadow:0 12px 30px #0008}
.fpo .flag{transform-origin:0 16px;animation:flw 1.1s ease-in-out infinite alternate}.fpo .flag1{animation-delay:-.4s}.fpo .flag2{animation-delay:-.8s}
.fpo .arm0{animation:arm .5s ease-in-out infinite alternate}.fpo .arm1{animation:arm .5s ease-in-out -.25s infinite alternate}.fpo .scarf{animation:scf 1.2s ease-in-out infinite alternate}
@keyframes flw{from{transform:skewY(-6deg) scaleX(.92)}to{transform:skewY(6deg) scaleX(1.04)}}@keyframes arm{to{transform:translateY(-3px)}}@keyframes scf{to{transform:translateY(-4px)}}
.fpo{justify-content:flex-start}.fpo .fpn{margin-top:22px}
.fpo{justify-content:flex-end;overflow:hidden;background:#000}.fpo .rcrowd{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 3s ease-out forwards,shk .18s ease-in-out 6 alternate}
.fpo .fpg{position:absolute;inset:0;background:linear-gradient(180deg,#0000 35%,#000a 70%,#000d 100%)}.fpo .fpn,.fpo .fps,.fpo .fans,.fpo .fpm,.fpo .fpt{position:relative;z-index:2}.fpo .fpm{position:absolute}
.fpo .fpn{color:#fff;margin:0 12px 6px}.fpo .fps{color:#fff}.fpo .fans{margin:10px 0 90px}.fpo .fpt{position:absolute;color:#fff;background:#0007}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}@keyframes shk{to{translate:0 -3px}}