.topbar{z-index:100;background:var(--color-card);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;height:52px;padding:0 20px;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 1px 12px #00000026}.topbar-title{letter-spacing:.03em;background:var(--gradient-hero);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.1rem;font-weight:900}.theme-toggle{border:1px solid var(--color-border);background:var(--color-card2);color:var(--color-text);cursor:pointer;white-space:nowrap;border-radius:99px;align-items:center;gap:6px;padding:6px 14px;font-family:inherit;font-size:.82rem;font-weight:600;transition:border-color .15s,background .15s;display:flex}.theme-toggle:hover{border-color:var(--color-primary)}@media (width<=380px){.theme-toggle-label{display:none}}[data-theme=dunkel]{--color-bg:#0d0d1a;--color-card:#16162e;--color-card2:#1e1e3c;--color-border:#2e2e56;--color-primary:#a855f7;--color-primary-hover:#9333ea;--color-secondary:#06b6d4;--color-success:#4ade80;--color-danger:#f87171;--color-accent:#c084fc;--color-text:#f0eeff;--color-muted:#7c7ca8;--color-gold:#fbbf24;--shadow-card:0 4px 28px #0000008c;--gradient-primary:linear-gradient(135deg, #a855f7, #06b6d4);--gradient-progress:linear-gradient(90deg, #a855f7, #06b6d4);--gradient-hero:linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #06b6d4 100%)}[data-theme=hell]{--color-bg:#f4f3ff;--color-card:#fff;--color-card2:#ece9ff;--color-border:#d0cbf5;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-secondary:#0891b2;--color-success:#16a34a;--color-danger:#dc2626;--color-accent:#9333ea;--color-text:#1a1730;--color-muted:#6b6b99;--color-gold:#d97706;--shadow-card:0 2px 16px #7c3aed1a;--gradient-primary:linear-gradient(135deg, #7c3aed, #0891b2);--gradient-progress:linear-gradient(90deg, #7c3aed, #0891b2);--gradient-hero:linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #0891b2 100%)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:Segoe UI,system-ui,-apple-system,sans-serif}#root{min-height:100dvh}.page-center{flex-direction:column;align-items:center;min-height:calc(100dvh - 52px);padding:20px 16px 60px;display:flex}.page-wide{max-width:960px;margin:0 auto;padding:16px 16px 48px}.page-narrow{width:100%;max-width:480px}.logo-wrap{flex-direction:column;align-items:center;margin:16px 0 24px;display:flex}.sspl-badge{filter:drop-shadow(0 4px 24px #7c3aed66);width:min(280px,90%);height:auto}.card{background:var(--color-card);border:1px solid var(--color-border);box-shadow:var(--shadow-card);border-radius:16px;padding:22px}.card-sm{background:var(--color-card);border:1px solid var(--color-border);box-shadow:var(--shadow-card);border-radius:12px;padding:18px}.card-title{text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent);margin-bottom:14px;font-size:.73rem;font-weight:700}.input{background:var(--color-bg);border:1px solid var(--color-border);width:100%;color:var(--color-text);border-radius:10px;outline:none;padding:13px 16px;font-size:1rem;transition:border-color .2s}.input:focus{border-color:var(--color-accent)}.input::placeholder{color:var(--color-muted);opacity:.5}.input-code{text-transform:uppercase;letter-spacing:.15em;text-align:center;font-size:1.4rem;font-weight:700}.btn{cursor:pointer;border:none;border-radius:12px;width:100%;padding:14px;font-family:inherit;font-size:1rem;font-weight:700;transition:opacity .15s,transform .1s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.32;cursor:not-allowed;transform:none}.btn-primary{background:var(--gradient-primary);color:#fff}.btn-primary:hover:not(:disabled){opacity:.88}.btn-success{color:#fff;background:linear-gradient(135deg,#059669,#0284c7)}.btn-success:hover:not(:disabled){opacity:.88}.btn-ghost{background:var(--color-card2);border:1px solid var(--color-border);color:var(--color-muted);font-weight:600}.btn-ghost:hover:not(:disabled){color:var(--color-text);border-color:var(--color-accent)}.btn-danger{color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c)}.btn-danger:hover:not(:disabled){opacity:.88}.btn-danger-ghost{color:var(--color-danger);background:0 0;border:1px solid #7f1d1d;border-radius:8px;width:auto;padding:6px 12px;font-size:.82rem}.btn-danger-ghost:hover:not(:disabled){background:#7f1d1d40}.btn-sm{border-radius:8px;width:auto;padding:8px 14px;font-size:.82rem}.divider{color:var(--color-muted);align-items:center;gap:12px;font-size:.8rem;display:flex}.divider:before,.divider:after{content:"";background:var(--color-border);flex:1;height:1px}.error-msg{color:var(--color-danger);background:#dc26261a;border:1px solid #dc262666;border-radius:8px;padding:10px 14px;font-size:.88rem}.info-badge{background:var(--color-card2);border:1px solid var(--color-border);color:var(--color-muted);text-align:center;border-radius:8px;padding:10px 14px;font-size:.85rem}.info-badge strong{color:var(--color-text)}.player-list-chips{flex-wrap:wrap;gap:8px;min-height:28px;list-style:none;display:flex}.player-chip{background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;padding:5px 12px;font-size:.88rem}.player-chip.me{border-color:var(--color-accent);color:var(--color-accent)}.player-count-label{color:var(--color-muted);margin-bottom:10px;font-size:.82rem}.room-code-display{background:var(--color-bg);border:2px solid var(--color-primary);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.room-code-big{letter-spacing:.18em;background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.4rem;font-weight:900}.progress-wrap{background:var(--color-card2);border-radius:99px;height:5px;margin-bottom:16px}.progress-fill{background:var(--gradient-progress);border-radius:99px;height:100%;transition:width .5s}.badge{border-radius:20px;align-items:center;gap:5px;padding:5px 13px;font-size:.82rem;font-weight:700;display:inline-flex}.badge-code{background:var(--gradient-primary);color:#fff}.badge-round{background:var(--color-card);border:1px solid var(--color-border);color:var(--color-muted)}.badge-live{color:#22c55e;background:#15803d26;border:1px solid #15803d}.live-dot{background:#22c55e;border-radius:50%;flex-shrink:0;width:7px;height:7px;animation:1.4s infinite livepulse}@keyframes livepulse{0%,to{opacity:1}50%{opacity:.25}}.admin-badge{color:#ef4444;letter-spacing:2px;text-transform:uppercase;background:#7f1d1d40;border:1px solid #ef4444;border-radius:6px;padding:3px 9px;font-size:.68rem;font-weight:700}.toast{background:var(--color-card2);border:1px solid var(--color-border);white-space:nowrap;z-index:300;pointer-events:none;box-shadow:var(--shadow-card);border-radius:10px;padding:10px 20px;font-size:.9rem;transition:transform .3s;position:fixed;top:14px;left:50%;transform:translate(-50%)translateY(-80px)}.toast.show{transform:translate(-50%)translateY(0)}.rank-badge{background:var(--color-card2);width:24px;height:24px;color:var(--color-muted);border-radius:6px;justify-content:center;align-items:center;margin-right:6px;font-size:.78rem;font-weight:800;display:inline-flex}.rank-badge.r1{color:#f59e0b;background:#f59e0b33}.rank-badge.r2{color:#94a3b8;background:#94a3b826}.rank-badge.r3{color:#cd7c3a;background:#cd7c3a33}.lb-wrap{background:var(--color-card);border:1px solid var(--color-border);border-radius:12px;overflow:hidden}table.lb{border-collapse:collapse;width:100%}table.lb th{text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);border-bottom:1px solid var(--color-border);text-align:left;padding:10px 12px;font-size:.7rem}table.lb th.num{text-align:center}table.lb td{border-bottom:1px solid var(--color-border);padding:11px 12px;font-size:.92rem}table.lb tr:last-child td{border-bottom:none}table.lb td.num{text-align:center;color:var(--color-muted);font-size:.88rem}table.lb tbody tr:hover{background:#ffffff0a}.pts{color:var(--color-primary);font-size:1.05rem;font-weight:700}.sw{color:var(--color-success);font-weight:700}.sd{color:var(--color-secondary)}.sl{color:var(--color-danger)}.match-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:24px;display:grid}.match-card{background:var(--color-card);border:1px solid var(--color-border);border-radius:12px;padding:14px 16px}.match-card.done{opacity:.65}.match-card.active{border-color:#6d28d966}.match-players{align-items:center;gap:6px;margin-bottom:10px;display:flex}.match-player{flex:1;min-width:0}.mp-name{white-space:nowrap;text-overflow:ellipsis;margin-bottom:5px;font-size:.88rem;font-weight:600;overflow:hidden}.mp-dots{gap:4px;display:flex}.mp-dot{background:var(--color-border);border-radius:50%;width:11px;height:11px}.mp-dot.filled{background:var(--color-primary)}.mp-dot.winner{background:var(--color-gold)}.match-vs{color:var(--color-muted);flex-shrink:0;font-size:.78rem;font-weight:700}.match-footer{border-top:1px solid var(--color-border);justify-content:space-between;align-items:center;padding-top:8px;font-size:.73rem;display:flex}.match-state-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.match-state-dot.live{background:#22c55e;animation:1.4s infinite livepulse}.match-state-dot.done{background:var(--color-muted)}.chosen-tag{color:var(--color-accent)}.unchosen-tag{color:var(--color-border)}.dash-topbar{border-bottom:1px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:14px;display:flex}.topbar-left{align-items:center;gap:10px;display:flex}.topbar-title{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.15rem;font-weight:900}.topbar-right{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.sec-label{color:var(--color-muted);text-transform:uppercase;letter-spacing:2.5px;margin-bottom:12px;font-size:.7rem;font-weight:700}.countdown-hint{text-align:center;color:var(--color-muted);min-height:20px;margin-top:-8px;margin-bottom:16px;font-size:.82rem}.flex-col{flex-direction:column;display:flex}.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.outcome-banner{text-align:center;border-radius:12px;margin-bottom:14px;padding:13px;font-size:1.35rem;font-weight:900}.outcome-banner.win{color:var(--color-success);background:#16a34a26}.outcome-banner.loss{color:var(--color-danger);background:#dc26261a}.outcome-banner.draw{color:var(--color-secondary);background:#2563eb1a}.rlabel.win{color:var(--color-success)}.rlabel.loss{color:var(--color-danger)}.rlabel.draw{color:var(--color-secondary)}.game-timer{text-align:center;color:var(--color-muted);margin-bottom:12px;font-size:.82rem}.game-timer .timer-val{color:var(--color-text);font-size:1.05rem;font-weight:700}.game-timer.urgent .timer-val{color:var(--color-danger)}.choice-btn{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}@media (width<=480px){.choice-btn{min-height:80px;font-size:3.2rem!important}.card{padding:16px}.card-sm{padding:14px}.btn{padding:13px}.room-code-big{font-size:2rem}.match-grid{grid-template-columns:1fr}}@media (width<=768px){.two-col{grid-template-columns:1fr!important}}