:root{--bg:#0c3b2e;--bg2:#1c7355;--bg3:#072a20;--gold:#f2b632;--cream:#fff8e7;--ink:#10231c;--line:#d8cfb8;
 --good:#17a34a;--bad:#d62828;--wa:#25d366;--muted:#6d705f}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{background:radial-gradient(circle at 50% 22%,var(--bg2) 0,var(--bg) 60%,var(--bg3) 100%) fixed var(--bg);color:var(--cream);
 font-family:'Cairo','Segoe UI',Tahoma,sans-serif;-webkit-tap-highlight-color:transparent}
#app{max-width:480px;min-height:100dvh;margin:0 auto;padding:20px 16px 24px;display:flex;flex-direction:column;gap:16px}
.loading{margin:auto;font-size:22px;font-weight:800}
button{font:inherit;cursor:pointer;border:0;color:inherit}
button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.title{font-size:clamp(46px,14vw,64px);font-weight:900;line-height:1.15;text-align:center}
.title b{display:block;color:var(--gold)}
.sub{text-align:center;font-size:21px;font-weight:800}
.hero{margin:auto 0;display:flex;flex-direction:column;gap:18px}
.btn{width:100%;min-height:62px;border-radius:18px;background:var(--gold);color:var(--ink);font-size:24px;font-weight:900;box-shadow:0 8px 0 #b98718;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(5px);box-shadow:0 3px 0 #b98718}
.btn.wa{background:var(--wa);color:#06281a;box-shadow:0 8px 0 #179a4a}
.btn.wa:active{box-shadow:0 3px 0 #179a4a}
.link{background:none;font-size:18px;font-weight:600;text-decoration:underline;align-self:center;padding:8px}
.cities{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.city{min-height:56px;border-radius:14px;background:var(--cream);color:var(--ink);font-size:20px;font-weight:800}
.city.wide{grid-column:1/-1}
.card{background:var(--cream);color:var(--ink);border-radius:26px;padding:20px 16px;box-shadow:0 14px 36px #0007;display:flex;flex-direction:column;gap:14px}
.dots{display:flex;justify-content:center;gap:10px}
.dot{width:30px;height:30px;border-radius:50%;background:#e4dcc6}
.dot.now{background:var(--gold)}
.dot.ok{background:var(--good)}
.dot.no{background:var(--bad)}
.topic{align-self:center;background:#0c3b2e14;color:var(--bg);font-size:17px;font-weight:800;border-radius:99px;padding:2px 14px}
.q{min-height:128px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(26px,7.5vw,33px);font-weight:900;line-height:1.35}
.opt{min-height:68px;padding:8px 14px;border-radius:18px;background:#fff;border:3px solid var(--line);color:var(--ink);font-size:clamp(20px,5.6vw,24px);font-weight:800;line-height:1.3;transition:background .15s,color .15s}
.opt:disabled{cursor:default}
.opt.right{background:var(--good);border-color:var(--good);color:#fff}
.opt.wrong{background:var(--bad);border-color:var(--bad);color:#fff}
.opt.wait{opacity:.6}
.score{text-align:center}
.score .num{font-size:88px;font-weight:900;line-height:1;color:var(--gold)}
.score .word{font-size:24px;font-weight:800;margin-top:6px}
.squares{font-size:30px;letter-spacing:3px;text-align:center;direction:ltr}
.streak{text-align:center;font-size:20px;font-weight:800}
.hd{font-size:22px;font-weight:900;text-align:center}
.row{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 14px;border-radius:14px;background:#fff;font-size:20px;font-weight:800}
.row .rk{width:30px;color:var(--muted);flex:none}
.row .nm{flex:1;min-width:0;overflow-wrap:anywhere}
.row.me{background:var(--gold)}
.row.me .rk{color:var(--ink)}
.next{text-align:center;font-size:19px;font-weight:800}
.next b{display:block;font-size:34px;font-weight:900;color:var(--gold);direction:ltr;font-variant-numeric:tabular-nums}
.sponsor{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:600}
.sponsor img{height:56px;width:auto;background:#fff;border-radius:10px;padding:3px}
.title.small{font-size:36px}
.prize{align-self:center;display:flex;flex-direction:column;align-items:center;padding:8px 26px;border-radius:18px;background:#0007;border:2px solid var(--gold)}
.prize small{font-size:16px;font-weight:600}
.prize b{font-size:28px;font-weight:900;color:var(--gold)}
.btn.final{background:var(--bad);color:#fff;box-shadow:0 8px 0 #8f1a1a}
.btn.ghost{background:#fff2;color:var(--cream);box-shadow:none;border:2px solid #fff6;min-height:54px;font-size:20px}
a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
.links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
a.link{color:inherit;text-align:center}
.note{text-align:center;font-size:18px;font-weight:800;color:var(--gold)}
.note.dark{color:var(--muted)}
.toprow{display:flex;justify-content:space-between;align-items:center}
.secs{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums}
.bar{height:12px;border-radius:99px;background:#e4dcc6;overflow:hidden}
.fill{height:100%;background:var(--good);transition:width .1s linear}
.fill.low{background:var(--bad)}
.q{min-height:96px}
.by{text-align:center;font-size:15px;color:var(--muted);font-weight:600}
.gain,.miss{text-align:center;font-size:22px;font-weight:900}
.gain{color:var(--good)}
.miss{color:var(--bad)}
.score .num.small{font-size:44px}
.nm small{display:block;font-size:14px;font-weight:600;color:var(--muted)}
.row.fin{border:2px solid var(--gold)}
.empty{text-align:center;color:var(--muted);font-weight:600}
.regform input:not([type=checkbox]){width:100%;min-height:54px;padding:8px 14px;border-radius:14px;border:2px solid var(--line);font:inherit;font-size:19px;font-weight:600;background:#fff;color:var(--ink)}
.check{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600}
.check input{width:24px;height:24px;flex:none}
.check a{color:var(--bg)}
.rules .card h2{font-size:21px}
.rules ul{margin:0;padding-inline-start:20px;font-size:17px;font-weight:600;line-height:1.7}
.sponsor b{font-size:18px;font-weight:900}
a.sponsor{color:inherit;text-decoration:none}
.titlechip{align-self:center;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.titlechip b{font-size:24px;font-weight:900;background:#fff2;border-radius:99px;padding:2px 18px}
.titlechip small{font-size:15px;font-weight:600;opacity:.9}
.kocard{background:var(--cream);color:var(--ink);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:8px;text-align:center;border:3px solid var(--gold)}
.kocard b{font-size:21px;font-weight:900}
.kocard small{font-size:16px;font-weight:600;color:var(--muted)}
.link.dark{color:var(--ink)}
.note.good{color:#7ee081}
.promo{text-align:center}
.promo .emoji{font-size:110px;line-height:1.2}
.promo .word{font-size:26px;font-weight:800}
.promo .num{color:var(--gold);font-size:64px;font-weight:900}
.tabs{display:flex;gap:6px}
.tab{flex:1;min-height:46px;border-radius:12px;background:#fff2;font-size:17px;font-weight:800;padding:4px}
.tab.on{background:var(--gold);color:var(--ink)}
.match{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line)}
.match:last-child{border-bottom:0}
.match .side{flex:1;min-width:0;font-size:17px;font-weight:700;text-align:center;overflow-wrap:anywhere}
.match .side small{display:block;font-size:15px;color:var(--muted)}
.match .side.won{color:var(--good);font-weight:900}
.match .vs{flex:none;font-size:14px;color:var(--muted)}
.btn.duel{background:#f07c2a;color:#fff;box-shadow:0 8px 0 #a94f12}
.btn.duel:active{box-shadow:0 3px 0 #a94f12}
.chip-soon{align-self:center;background:var(--bad);color:#fff;font-size:26px;font-weight:900;border-radius:99px;padding:2px 26px}
.national{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;padding:10px;border-radius:18px;background:#fff1;border:2px solid #fff3}
.national small{font-size:16px;font-weight:600}
.national b{font-size:40px;font-weight:900;color:var(--gold);line-height:1.3}
#toast{position:fixed;inset:auto 16px 22px;max-width:448px;margin:auto;background:#111;color:#fff;border-radius:14px;padding:12px 16px;text-align:center;font-size:18px;font-weight:800}
.pop{animation:pop .35s cubic-bezier(.2,1.6,.5,1)}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pop{animation:none}.btn,.opt{transition:none}}