:root{--bg-primary: #0b0f19;--bg-surface: #131b2e;--bg-card: rgba(26, 36, 61, .65);--border-color: rgba(255, 255, 255, .08);--border-glow: rgba(99, 102, 241, .35);--accent-primary: #6366f1;--accent-primary-hover: #4f46e5;--accent-emerald: #10b981;--accent-rose: #f43f5e;--accent-amber: #f59e0b;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 18px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-display);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}.glass-panel{background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:0 8px 32px #0000005e}.navbar{display:flex;justify-content:space-between;align-items:center;padding:.85rem 2rem;border-bottom:1px solid var(--border-color);background:#0b0f19d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50}.brand-logo{display:flex;align-items:center;gap:.75rem;font-size:1.35rem;font-weight:800;background:linear-gradient(135deg,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.app-container{max-width:1440px;margin:0 auto;padding:1.75rem 2rem;display:grid;grid-template-columns:1fr 380px;gap:1.75rem}@media (max-width: 1024px){.app-container{grid-template-columns:1fr}}.arena-card{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.25rem}.board-container{width:100%;max-width:540px;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 16px 40px #0009;border:2px solid rgba(255,255,255,.1)}.player-bar{width:100%;max-width:580px;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-color)}.player-bar-active{box-shadow:0 0 16px #6366f133}.player-details{display:flex;align-items:center;gap:.75rem}.player-name{font-weight:600;font-size:.95rem}.player-elo{font-size:.75rem;color:var(--text-secondary);background:#ffffff0d;padding:.15rem .45rem;border-radius:var(--radius-sm)}.timer-box{font-family:var(--font-mono);font-size:1.15rem;font-weight:700;background:#0f172a;padding:.35rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--border-color);min-width:85px;text-align:center;transition:all .2s ease}.timer-active{color:#38bdf8;border-color:#38bdf880;box-shadow:0 0 12px #38bdf840}.timer-low{color:var(--accent-rose);border-color:#f43f5e80;animation:pulse 1s infinite}.timer-critical{color:#ef4444;border-color:#ef4444;animation:pulse .5s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.98)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sidebar-panel{display:flex;flex-direction:column;gap:1rem}.btn-primary{background:linear-gradient(135deg,var(--accent-primary) 0%,#4f46e5 100%);color:#fff;border:none;padding:.7rem 1.2rem;border-radius:var(--radius-md);font-weight:600;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s ease}.btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}.btn-secondary{background:#ffffff0f;color:var(--text-primary);border:1px solid var(--border-color);padding:.65rem 1rem;border-radius:var(--radius-md);font-weight:500;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;transition:background .2s ease}.btn-secondary:hover{background:#ffffff1f}