*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{width:100%;height:100%}body{width:100%;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(ellipse 140% 90% at 50% 50%,#0d2a1a,#071520 45%,#050c14)}canvas{display:block;touch-action:none;-webkit-user-select:none;user-select:none;image-rendering:auto}.room-teams{display:flex;gap:clamp(8px,3vw,14px);padding:14px 5%;flex:1;min-height:0}.room-team{flex:1;display:flex;flex-direction:column;align-items:center;padding-bottom:14px;position:relative}.room-team-accent{width:100%;height:3px;border-radius:14px 14px 0 0}.room-team-accent--a{background:var(--team-a);opacity:.55}.room-team-accent--b{background:var(--team-b);opacity:.55}.room-team-name{font-size:clamp(11px,2vw,14px);font-weight:700;letter-spacing:2px;margin-top:14px}.room-team-name--a{color:var(--team-a)}.room-team-name--b{color:var(--team-b)}.room-team-players{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;width:100%;min-height:60px}.room-player{font-size:clamp(11px,1.8vw,14px);color:var(--dim);text-align:center}.room-player--me{color:var(--white);font-weight:600}.room-player-arrow{font-size:.7em;margin-right:4px}.room-team-empty{color:var(--muted);font-size:13px}.room-team-btn{margin-top:auto;min-width:80px}.room-team-btn--joined{opacity:.45}.room-status{text-align:center;padding:10px 6% calc(16px + var(--safe-bottom));flex-shrink:0}.room-status-text{font-size:clamp(13px,2.4vw,16px);font-weight:700;color:var(--dim)}.room-status--live{color:var(--success)}.room-status-sub{font-size:clamp(11px,1.8vw,14px);color:var(--muted);margin-top:4px}.room-status-count{font-size:clamp(24px,7vw,44px);font-weight:700;color:var(--accent);margin-top:6px}.room-status-note{font-size:clamp(9px,1.4vw,12px);color:var(--vmuted);margin-top:6px}@media (orientation: landscape) and (max-height: 500px){.room-teams{padding:8px 4%}.room-team-name{margin-top:8px;font-size:11px}.room-team-players{padding:6px;gap:4px;min-height:40px}.room-status{padding:6px 6% calc(10px + var(--safe-bottom))}.room-status-count{font-size:26px;margin-top:2px}}.hud-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;font-family:var(--font);user-select:none;-webkit-user-select:none}.hud-scorebar{position:absolute;top:max(8px,calc(env(safe-area-inset-top,0px) + 4px));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;background:#0a0a1ad1;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.hud-score-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.hud-score-value{font-size:clamp(18px,4vw,28px);font-weight:800;color:#fff;min-width:24px;text-align:center;line-height:1}.hud-timer{font-size:clamp(12px,2.4vw,16px);font-weight:600;color:#fff9;letter-spacing:1px;min-width:40px;text-align:center}.hud-timer--low{color:var(--danger, #ef4444);animation:hud-timer-pulse 1s ease-in-out infinite}@keyframes hud-timer-pulse{0%,to{opacity:1}50%{opacity:.4}}.hud-events{position:absolute;top:max(54px,calc(env(safe-area-inset-top,0px) + 48px));right:max(8px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:4px;max-width:160px}.hud-event{font-size:clamp(10px,1.8vw,13px);font-weight:600;padding:3px 10px;border-radius:6px;background:#0a0a1abf;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;animation:hud-event-in .25s ease-out}.hud-event--a{color:var(--team-a, #14b8a6)}.hud-event--b{color:var(--team-b, #ef4444)}@keyframes hud-event-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.hud-countdown{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a0a1a80}.hud-countdown-number{font-size:clamp(48px,14vw,96px);font-weight:900;color:#fff;text-shadow:0 0 30px rgba(77,127,255,.5);animation:hud-countdown-pop .4s ease-out}@keyframes hud-countdown-pop{0%{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}@media (orientation: landscape) and (max-height: 500px){.hud-scorebar{padding:4px 14px;gap:8px}.hud-events{top:max(42px,calc(env(safe-area-inset-top,0px) + 38px))}}:root{--bg: #0a0a1a;--bg-glow1: #162255;--bg-glow2: #0c1a33;--surface: rgba(17, 17, 40, .92);--surface-hi: rgba(24, 24, 64, .95);--border: #22224a;--border-hi: #2f2f66;--accent: #4d7fff;--accent-dark: #3358cc;--success: #34d399;--danger: #ef4444;--warning: #fbbf24;--gold: #ffd700;--team-a: #14b8a6;--team-a-bg: #0c2220;--team-b: #ef4444;--team-b-bg: #220c0c;--white: #f0f4f8;--bright: #e2e8f0;--dim: #94a3b8;--muted: #64748b;--vmuted: #334155;--faint: #1e293b;--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}.page{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;font-family:var(--font);color:var(--white);overflow:hidden;background:var(--bg);background-image:radial-gradient(ellipse 50% 50% at 85% 0%,rgba(22,34,85,.35),transparent),radial-gradient(ellipse 35% 40% at 10% 92%,rgba(12,26,51,.3),transparent),radial-gradient(ellipse 60% 50% at 50% 48%,rgba(22,34,85,.1),transparent)}.page-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;flex:1;padding-bottom:calc(24px + var(--safe-bottom))}.safe-top{padding-top:max(12px,var(--safe-top))}.page-header{display:flex;align-items:center;justify-content:center;padding:14px 6%;padding-top:max(14px,calc(var(--safe-top) + 10px));position:relative;flex-shrink:0}.page-header .back-btn{position:absolute;left:6%;background:none;border:none;color:var(--muted);font:14px var(--font);cursor:pointer;padding:6px 0;transition:color .15s}.page-header .back-btn:hover{color:var(--dim)}.page-header h1{font-size:16px;font-weight:700;letter-spacing:2px;margin:0}.page-header .header-right{position:absolute;right:6%}.page-subtitle{text-align:center;font-size:12px;color:var(--muted);padding-bottom:10px}.page-divider{height:1px;background:var(--border);opacity:.45;margin:0 6%;flex-shrink:0}.card{background:var(--surface);border:1px solid rgba(34,34,74,.5);border-radius:14px;position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0 0 auto 0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.025) 0%,transparent 100%);border-radius:14px 14px 0 0;pointer-events:none}.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;font-family:var(--font);font-weight:700;cursor:pointer;transition:transform .12s,opacity .12s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;inset:2px 3px auto 3px;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.13),transparent);border-radius:999px 999px 0 0;pointer-events:none}.btn:active{transform:scale(.93)}.btn:disabled{opacity:.4;pointer-events:none}.btn-primary{background:var(--accent);color:var(--white)}.btn-secondary{background:var(--surface-hi);color:var(--dim)}.btn-lg{padding:14px 36px;font-size:16px;letter-spacing:3px;min-width:180px}.btn-md{padding:10px 24px;font-size:13px;letter-spacing:1px}.btn-sm{padding:8px 18px;font-size:12px;letter-spacing:1px}.btn-team-a{background:var(--team-a);color:var(--white)}.btn-team-b{background:var(--team-b);color:var(--white)}.btn-glow{box-shadow:0 0 20px #4d7fff40,0 0 40px #4d7fff1a;animation:glow-pulse 2.8s ease-in-out infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px #4d7fff2e,0 0 40px #4d7fff0f}50%{box-shadow:0 0 30px #4d7fff59,0 0 60px #4d7fff1f}}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.stat-cell{text-align:center;padding:10px 0;border-left:1px solid rgba(34,34,74,.35)}.stat-cell:first-child{border-left:none}.stat-cell .stat-value{font-size:clamp(22px,4vh,30px);font-weight:700;line-height:1.2}.stat-cell .stat-label{font-size:clamp(8px,1.3vh,10px);color:var(--muted);letter-spacing:1px;margin-top:4px}.text-accent{color:var(--accent)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.text-dim{color:var(--dim)}.text-muted{color:var(--muted)}.text-faint{color:var(--faint)}.text-center{text-align:center}.fade-in{animation:fadeIn .28s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (orientation: landscape) and (max-height: 500px){.page-header{padding-top:max(6px,var(--safe-top));padding-bottom:8px}.page-subtitle{padding-bottom:6px;font-size:11px}}