:root{--brand: #16a34a;--brand-2: #22c55e;--brand-grad: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);--accent-gold: #f9b414;--accent-red: #ef4444;--accent-blue: #3a86ff;--accent-purple: #8338ec;--r-sm: 10px;--r-md: 16px;--r-lg: 24px;--r-pill: 999px;--gap: 14px;--pad: 16px;--shadow-sm: 0 2px 8px rgba(0,0,0,.08);--shadow-md: 0 8px 24px rgba(0,0,0,.12);--shadow-glow: 0 8px 24px rgba(34,197,94,.35);--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--tg-button: var(--brand);--tg-button-text: #ffffff}:root[data-theme=light]{--bg: #f4f7f6;--bg-2: #eaf0ee;--surface: #ffffff;--surface-2: #f6f8f8;--text: #10241c;--text-soft: #4b5d56;--hint: #8a9a93;--border: rgba(16,36,28,.08);--skeleton: #e6ecea;--skeleton-shine: #f3f7f6}:root[data-theme=dark]{--bg: #0e1512;--bg-2: #0a0f0d;--surface: #16201c;--surface-2: #1c2823;--text: #eafff5;--text-soft: #a9bcb4;--hint: #6f857c;--border: rgba(255,255,255,.08);--skeleton: #1c2823;--skeleton-shine: #25332d;--shadow-sm: 0 2px 8px rgba(0,0,0,.4);--shadow-md: 0 8px 24px rgba(0,0,0,.5)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.45;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}#app{max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative}.boot-splash{flex:1;display:grid;place-items:center;min-height:100dvh}.boot-ball{font-size:64px;animation:ball-bounce .9s ease-in-out infinite}.screen{flex:1;padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 96px;overflow-y:auto}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}img{display:block;max-width:100%}h1,h2,h3{line-height:1.2}.screen-title{font-size:26px;font-weight:800;margin-bottom:16px;letter-spacing:-.5px}.section-title{font-size:15px;font-weight:700;color:var(--text-soft);margin:18px 2px 10px;text-transform:uppercase;letter-spacing:.6px}.card{background:var(--surface);border-radius:var(--r-md);padding:var(--pad);box-shadow:var(--shadow-sm);border:1px solid var(--border)}.gradient-card{background:var(--brand-grad);color:#fff;border:none;box-shadow:var(--shadow-glow)}.btn{border-radius:var(--r-pill);padding:13px 20px;font-weight:700;font-size:16px;transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease}.btn:active{transform:scale(.96)}.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:var(--shadow-glow)}.btn-primary.loading{opacity:.7;pointer-events:none}.btn-block{display:block;width:100%}.btn[disabled]{opacity:.55;pointer-events:none}.error-state,.empty-state{text-align:center;padding:48px 20px;color:var(--text-soft)}.error-emoji,.empty-emoji{font-size:52px;margin-bottom:12px}.error-state .hint{font-size:13px;color:var(--hint);margin-top:8px}.error-inline{color:var(--accent-red)}.navbar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:520px;display:flex;justify-content:space-around;align-items:center;background:var(--surface);border-top:1px solid var(--border);padding:8px 8px calc(env(safe-area-inset-bottom) + 8px);z-index:50;backdrop-filter:blur(12px)}.navbar-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--hint);border-radius:14px;transition:color .2s ease,transform .15s ease}.navbar-icon{font-size:22px;transition:transform .2s ease}.navbar-label{font-size:11px;font-weight:600}.navbar-btn.active{color:var(--brand)}.navbar-btn.active .navbar-icon{transform:translateY(-2px) scale(1.18)}.navbar-btn:active{transform:scale(.9)}.home-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.home-user{display:flex;align-items:center;gap:12px}.home-hello{font-size:12px;color:var(--hint)}.home-name{font-size:18px;font-weight:800}.avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--brand)}.avatar-fallback{display:grid;place-items:center;background:var(--brand-grad);color:#fff;font-weight:800;font-size:18px}.avatar-lg{width:72px;height:72px;font-size:28px}.coin-balance{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);padding:8px 14px;border-radius:var(--r-pill);font-weight:800;box-shadow:var(--shadow-sm)}.coin-icon{font-size:18px}.coin-amount{font-size:17px}.home-hero{display:flex;align-items:center;gap:16px;margin-bottom:18px}.hero-text{flex:1}.hero-title{font-size:22px;font-weight:800}.hero-sub{opacity:.9;font-size:14px;margin-top:2px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-grid-2{grid-template-columns:repeat(2,1fr)}.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 8px;text-align:center;box-shadow:var(--shadow-sm)}.stat-value{font-size:22px;font-weight:800}.stat-label{font-size:11px;color:var(--hint);margin-top:2px}.accent-green .stat-value{color:var(--brand)}.accent-blue .stat-value{color:var(--accent-blue)}.accent-gold .stat-value{color:var(--accent-gold)}.daily-card{display:flex;align-items:center;gap:14px}.daily-emoji{font-size:34px}.daily-num{font-size:24px;font-weight:800}.daily-label{font-size:13px;color:var(--text-soft)}.cta-pulse{margin-top:20px}.match-list{display:flex;flex-direction:column;gap:14px}.match-section{display:flex;flex-direction:column;gap:12px}.match-card{display:flex;flex-direction:column;gap:12px;animation:card-in .35s ease both}.match-header{display:flex;align-items:center;justify-content:space-between}.match-stage{font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--hint);text-transform:uppercase}.pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill)}.pill-live{background:#ef444424;color:var(--accent-red);display:inline-flex;align-items:center;gap:5px}.pill-finished{background:var(--surface-2);color:var(--text-soft)}.pill-timed{background:#3a86ff1f;color:var(--accent-blue)}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-red);display:inline-block;animation:blink 1s steps(2) infinite}.match-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px}.team-col{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.team-flag{font-size:40px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}.team-crest{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}.team-name{font-size:14px;font-weight:700}.match-vs{display:grid;place-items:center;padding-top:12px}.vs-text{font-size:13px;font-weight:800;color:var(--hint)}.match-result{font-size:26px;font-weight:800}.stepper{display:flex;align-items:center;gap:10px;margin-top:4px}.stepper-btn{width:32px;height:32px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);font-size:20px;font-weight:800;color:var(--text);display:grid;place-items:center;transition:transform .12s ease,background .2s}.stepper-btn:active{transform:scale(.85);background:var(--brand);color:#fff}.stepper-value{font-size:22px;font-weight:800;min-width:24px;text-align:center}.outcome-chips{display:flex;gap:8px}.chip{flex:1;text-align:center;font-size:12px;font-weight:700;padding:8px 6px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);transition:all .2s ease}.chip-active{background:var(--brand-grad);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow);transform:translateY(-1px)}.confirm-btn{width:100%}.match-locked{text-align:center;font-size:13px;color:var(--hint);font-weight:600}.pred-badge{text-align:center;font-size:13px;font-weight:700;padding:8px;border-radius:var(--r-sm)}.pred-pending{background:var(--surface-2);color:var(--text-soft)}.pred-correct{background:#22c55e26;color:var(--brand)}.pred-exact{background:var(--accent-gold);color:#3a2c00}.pred-wrong{background:#ef44441f;color:var(--accent-red)}.lb-list{display:flex;flex-direction:column;gap:8px}.lb-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--shadow-sm);animation:card-in .3s ease both}.lb-top{box-shadow:var(--shadow-md)}.lb-row.lb-me{border:2px solid var(--brand)}.lb-rank{font-size:18px;font-weight:800;min-width:36px;text-align:center}.lb-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.lb-name{flex:1}.lb-username{font-weight:700;font-size:15px}.lb-meta{font-size:12px;color:var(--hint)}.lb-score{display:flex;align-items:center;gap:4px;font-weight:800;font-size:16px}.lb-sticky-me{position:sticky;bottom:84px;margin-top:10px}.profile-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}.profile-name{font-size:20px;font-weight:800}.profile-handle{font-size:13px;opacity:.85}.profile-rank{font-size:14px;font-weight:700;margin-top:4px}.profile-balance{display:flex;align-items:center;gap:14px;margin-bottom:14px}.coin-icon-lg{font-size:40px}.pb-amount{font-size:30px;font-weight:800}.pb-label{font-size:13px;color:var(--text-soft)}.history-list{display:flex;flex-direction:column;gap:8px}.history-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--shadow-sm);border-left:4px solid var(--hint)}.history-row.h-correct{border-left-color:var(--brand)}.history-row.h-exact{border-left-color:var(--accent-gold)}.history-row.h-wrong{border-left-color:var(--accent-red)}.h-teams{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;justify-content:space-between}.h-vs{color:var(--hint);font-size:12px}.h-detail{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;color:var(--text-soft)}.h-delta{font-weight:800;color:var(--text)}.skeleton-list{display:flex;flex-direction:column;gap:12px}.skeleton-card{height:96px;border-radius:var(--r-md);background:var(--skeleton)}.mascot{position:relative;width:var(--mascot-size);height:var(--mascot-size);display:grid;place-items:center}.mascot-ball{font-size:calc(var(--mascot-size) * .7);animation:ball-bounce 1.4s ease-in-out infinite}.mascot-shadow{position:absolute;bottom:2px;width:50%;height:8px;border-radius:50%;background:#0003;filter:blur(3px);animation:shadow-pulse 1.4s ease-in-out infinite}.screen-enter{animation:screen-in .32s cubic-bezier(.22,1,.36,1) both}@keyframes screen-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes card-in{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ball-bounce{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(18deg)}}@keyframes shadow-pulse{0%,to{transform:scale(1);opacity:.25}50%{transform:scale(.7);opacity:.15}}@keyframes blink{0%{opacity:1}to{opacity:.25}}.cta-pulse{animation:cta-glow 2.4s ease-in-out infinite}@keyframes cta-glow{0%,to{box-shadow:0 8px 24px #22c55e59}50%{box-shadow:0 8px 36px #22c55e99}}.coin-fly{position:fixed;left:50%;top:46%;transform:translate(-50%);font-size:34px;font-weight:800;z-index:999;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.25)}.coin-fly-up{color:#16a34a;animation:coin-up 1.4s ease-out forwards}.coin-fly-down{color:#ef4444;animation:coin-down 1.4s ease-out forwards}@keyframes coin-up{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%) scale(1.2)}to{opacity:0;transform:translate(-50%,-90px) scale(1)}}@keyframes coin-down{0%{opacity:0;transform:translate(-50%,-10px) scale(.6)}20%{opacity:1;transform:translate(-50%) scale(1.2)}to{opacity:0;transform:translate(-50%,80px) scale(1)}}.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:998;overflow:hidden}.confetti-piece{position:absolute;top:-16px;width:9px;height:14px;background:var(--c);border-radius:2px;opacity:.95;animation:confetti-fall var(--d) linear var(--delay) forwards}@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translate(var(--x),110vh) rotate(var(--r));opacity:.9}}.pulse{animation:pulse-pop .5s ease}@keyframes pulse-pop{0%{transform:scale(1)}40%{transform:scale(1.25)}to{transform:scale(1)}}.shimmer{position:relative;overflow:hidden}.shimmer:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--skeleton-shine),transparent);transform:translate(-100%);animation:shimmer 1.3s infinite}@keyframes shimmer{to{transform:translate(100%)}}@media (prefers-reduced-motion: reduce){*,*:after,*:before{animation-duration:1ms!important;animation-iteration-count:1!important}}