:root{--bg: #0d1117;--panel: rgba(17, 22, 30, .86);--line: rgba(255, 255, 255, .09);--btn: rgba(255, 255, 255, .07);--btn-hover: rgba(255, 255, 255, .13);--text: #e9edf2;--muted: #8d97a5;--accent: #ffcf5a;--accent-hover: #ffd97a;--accent-text: #1d1604;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;color:var(--text);-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#stage,#ui{position:fixed;inset:0}#stage canvas{display:block;touch-action:none}#ui{pointer-events:none}#ui button,#ui .menu,#ui .dialog-backdrop{pointer-events:auto}.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--btn);color:var(--text);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background .15s,transform .05s}.btn:hover{background:var(--btn-hover)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:default;transform:none}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--accent);border-color:transparent;color:var(--accent-text)}.btn-primary:hover{background:var(--accent-hover)}.btn-icon{width:40px;padding:0;font-size:18px}.btn.is-on{border-color:var(--accent);color:var(--accent)}.hud{position:absolute;left:0;right:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-top{top:0;padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid var(--line)}.hud-bottom{bottom:0;justify-content:center;gap:10px 22px;padding-bottom:max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}.hud-title{display:flex;flex-direction:column;flex:1 1 160px;min-width:0}.hud-mode{font-size:16px;font-weight:700}.hud-sub{overflow:hidden;color:var(--muted);font-size:12px;white-space:nowrap;text-overflow:ellipsis}.group{display:inline-flex;align-items:center;gap:6px}.stepper-value{min-width:78px;color:var(--muted);font-size:13px;text-align:center}.stepper-value b{color:var(--text);font-size:15px}.readout{display:flex;flex-direction:column;align-items:center;min-width:92px}.readout label{color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.readout span{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}.meter{width:100%;height:5px;margin:3px 0 2px;overflow:hidden;border-radius:3px;background:#ffffff1a}.meter-fill{width:0;height:100%;border-radius:3px}.shoot{min-width:128px;height:48px;font-size:16px}.clock{min-width:52px;font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;transition:color .2s}.clock.is-urgent{color:#ff5d6c}.clock-bar{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);transform-origin:left;transform:scaleX(0)}.clock-bar.is-urgent{background:#ff5d6c}.chips{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:var(--btn);font-size:12px;white-space:nowrap}.chip.is-you{border-color:#ffcf5a99}.chip.is-out{opacity:.45}.chip.is-out .chip-name{text-decoration:line-through}.chip.is-waiting{opacity:.7}.chip-dot{display:inline-block;flex:none;width:9px;height:9px;margin-right:6px;border-radius:50%;vertical-align:1px}.chip .chip-dot{margin-right:0}.chip-name{font-weight:700}.chip-status{color:var(--muted);font-variant-numeric:tabular-nums}.banner{position:absolute;top:120px;left:50%;padding:10px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 10px 30px #00000059;text-align:center;transform:translate(-50%);animation:banner-in .2s ease-out;transition:opacity .25s}.banner[hidden]{display:none}.banner.is-leaving{opacity:0}.banner-title{font-size:22px;font-weight:800}.banner-detail{margin-top:2px;color:var(--muted);font-size:13px}@keyframes banner-in{0%{opacity:0;transform:translate(-50%,-8px)}}.dialog-backdrop{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:#05080c8c;animation:fade-in .2s ease-out}.dialog{width:min(440px,100%);max-height:100%;overflow:auto;padding:20px;border:1px solid var(--line);border-radius:16px;background:#151b24;box-shadow:0 20px 50px #00000080}.dialog h2{margin:0 0 6px;font-size:22px}.dialog-body{color:var(--muted)}.dialog-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}@keyframes fade-in{0%{opacity:0}}.standings{width:100%;margin-top:12px;border-collapse:collapse;color:var(--text);font-size:14px}.standings th{padding:0 6px 6px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-align:left;text-transform:uppercase}.standings td{padding:7px 6px;border-top:1px solid var(--line)}.standings .place{width:3em;font-weight:800}.standings .num{font-variant-numeric:tabular-nums;text-align:right}.standings tr.is-you td{color:var(--accent)}.badge{margin-left:6px;padding:1px 5px;border-radius:5px;background:#ffffff14;color:var(--muted);font-size:10px;font-weight:600;text-transform:uppercase}.menu{position:absolute;inset:0;display:grid;place-items:center;overflow-y:auto;padding:24px;background:radial-gradient(ellipse at center,#0d111759,#0d1117e0)}.menu-card{display:flex;flex-direction:column;gap:10px;width:min(360px,100%);text-align:center}.logo{margin:0;background:linear-gradient(180deg,#fff,#ffd98a);background-clip:text;-webkit-background-clip:text;color:transparent;font-size:clamp(34px,10.5vw,46px);font-weight:900;letter-spacing:.02em;line-height:1.15;white-space:nowrap}.tagline{margin:0 0 18px;color:var(--muted);text-wrap:balance}.menu .btn{width:100%;height:52px;font-size:17px}.menu-heading{margin:0;font-size:30px;font-weight:800}.btn-hint{font-size:12px;font-weight:500;opacity:.7}.btn-ghost{border-color:transparent;background:transparent;color:var(--muted)}.field-label{margin-top:4px;color:var(--muted);font-size:13px;text-align:left}.text-input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#00000059;color:var(--text);font:inherit;font-size:16px}.text-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.lobby{padding:22px 20px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 16px 40px #0006}.lobby-status{margin:0;color:var(--accent);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}.seats{display:flex;flex-direction:column;gap:6px;margin:4px 0;padding:0;list-style:none;text-align:left}.seat{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#ffffff0a}.seat .chip-dot{flex:none}.seat-name{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.seat.is-empty{border-style:dashed;background:none}.seat.is-empty .seat-name{color:var(--muted);font-weight:400}.seat.is-empty .chip-dot{opacity:.3}.notice{position:absolute;bottom:140px;left:50%;padding:8px 16px;border:1px solid rgba(255,93,108,.5);border-radius:999px;background:var(--panel);color:#ffb3bb;font-size:14px;font-weight:600;white-space:nowrap;transform:translate(-50%)}.notice[hidden]{display:none}.menu-foot{margin-top:14px;color:var(--muted);font-size:12px}@media(max-width:560px){.btn{height:38px;padding:0 10px;font-size:13px}.btn-icon{width:38px}.hud{gap:6px 8px}.hud-bottom{gap:8px 14px}.readout{min-width:78px}.stepper-value{min-width:64px}.shoot{flex:1 1 100%;height:46px}.clock{min-width:40px;font-size:24px}.chips{gap:4px}.chip{gap:4px;padding:3px 7px;font-size:11px}.banner-title{font-size:18px}}@media(max-height:480px){.menu{padding:12px 24px}.menu-card{gap:8px}.logo{font-size:34px}.tagline{margin-bottom:6px}.menu .btn{height:44px}.menu-foot{margin-top:4px}}
