:root{--bg:#0b0a12;--bg-soft:#15131f;--panel:#1c192bd9;--panel-line:#ffffff14;--text:#eef0f7;--muted:#9b98b3;--accent:#6c5ce7;--accent-2:#2ecfa0;--danger:#ff5f6d;--gold:#ffd447;--radius:14px;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(900px 500px at 15% -10%, #6c5ce747, transparent 60%), radial-gradient(700px 460px at 95% 0%, #2ecfa029, transparent 55%), var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer}kbd{font-family:var(--mono);background:#ffffff1f;border:1px solid #ffffff29;border-radius:4px;padding:1px 5px;font-size:11px}.app{flex-direction:column;gap:14px;min-height:100%;padding:16px clamp(12px,3vw,32px) 28px;display:flex}.topbar{justify-content:space-between;align-items:center;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand .logo{background:linear-gradient(160deg,#6c5ce7e6,#2ecfa099);border-radius:12px;place-items:center;width:40px;height:40px;font-size:20px;display:grid;box-shadow:0 8px 24px #6c5ce759}.brand strong{letter-spacing:.5px;font-size:16px;display:block}.brand em{color:var(--muted);font-size:12px;font-style:normal;font-family:var(--mono)}.mode-pill{border:1px solid var(--panel-line);background:var(--panel);border-radius:999px;padding:6px 14px;font-size:12px}.mode-pill.streamer{color:#cbb9ff;border-color:#6c5ce780}.mode-pill.viewer{color:#9df3d5;border-color:#2ecfa080}.layout{flex:1;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:18px;display:grid}.stage-col{flex-direction:column;align-items:center;gap:12px;display:flex}.stage{justify-content:center;width:100%;display:flex}.stage-inner{aspect-ratio:1;background:#0e0c17;border:1px solid #ffffff1a;border-radius:18px;width:min(100%,74vh,700px);position:relative;overflow:hidden;box-shadow:0 24px 60px #0000008c,inset 0 0 0 1px #ffffff0a}.game-canvas{width:100%;height:100%;image-rendering:pixelated;touch-action:none;display:block}.label-layer{pointer-events:none;position:absolute;inset:0}.ghost-label{white-space:nowrap;text-shadow:0 1px #0009;border:1px solid #00000080;border-radius:6px;padding:1px 6px;font-size:10px;font-weight:600;line-height:15px;position:absolute;transform:translate(-50%,-100%)}.ghost-label.is-ai{color:#b9c3d6;font-family:var(--mono);background:#181a268c}.ghost-label.is-viewer{color:#e6dbff;background:#23143c99}.ghost-label.is-self{color:#2b1d00;background:linear-gradient(#ffe066,#ffb302);border-color:#ffffff80;box-shadow:0 0 14px #ffc83c8c}.ghost-label.is-self:after{content:"";border-top:5px solid #ffc02b;border-left:4px solid #0000;border-right:4px solid #0000;position:absolute;bottom:-5px;left:50%;transform:translate(-50%)}.hud{pointer-events:none;font-size:12px;position:absolute}.hud-top{justify-content:space-between;gap:8px;display:flex;top:10px;left:10px;right:10px}.hud-left,.hud-right{flex-wrap:wrap;gap:6px;display:flex}.hud-right{justify-content:flex-end}.chip{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-shadow:0 1px 2px #000000d9;background:#0c0a1461;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:6px;padding:4px 8px;display:flex}.chip[data-tone=hot]{border-color:#ff5f6db3;box-shadow:0 0 12px #ff5f6d59}.chip-icon{font-size:12px}.chip-body{flex-direction:column;line-height:1.15;display:flex}.chip-body em{color:var(--muted);font-size:9px;font-style:normal}.chip-body strong{font-family:var(--mono);font-size:12px}.hud-live{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:var(--mono);letter-spacing:1px;text-shadow:0 1px 2px #000000d9;background:#0c0a1461;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:8px;padding:4px 10px;font-size:10px;display:flex;bottom:10px;left:10px}.live-dot{background:var(--danger);width:7px;height:7px;box-shadow:0 0 10px var(--danger);border-radius:50%;animation:1.6s infinite pulse}@keyframes pulse{50%{opacity:.35}}.live-count,.live-map{color:var(--muted)}.hud-tip{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#b8ffe8;white-space:nowrap;text-shadow:0 1px 2px #000000d9;background:#0c1e1a73;border:1px solid #2ecfa073;border-radius:10px;align-items:center;gap:8px;padding:6px 12px;display:flex;bottom:48px;left:50%;transform:translate(-50%)}.charge-bar{background:#8bffe033;border-radius:3px;width:54px;height:5px;overflow:hidden}.charge-bar i{background:#8bffe0;height:100%;display:block}.hud-rage{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#ffe066;white-space:nowrap;text-shadow:0 1px 2px #000000d9;background:#301e067a;border:1px solid #ffe066a6;border-radius:10px;align-items:center;gap:10px;padding:6px 14px;animation:.7s infinite ragePulse;display:flex;bottom:48px;left:50%;transform:translate(-50%)}.hud-rage em{color:#ffb648;font-style:normal}@keyframes ragePulse{50%{box-shadow:0 0 14px #ffe0668c}}.hud-viewer-bar{pointer-events:auto;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);text-shadow:0 1px 2px #000000d9;background:#0c0a1457;border:1px solid #ffffff1a;border-radius:12px;align-items:center;gap:8px;max-width:min(74%,320px);padding:4px 5px 4px 7px;display:flex;bottom:8px;right:10px}.hud-viewer-bar .btn{border-radius:9px;flex:none;padding:5px 10px;font-size:12px}.viewer-id{align-items:center;gap:7px;min-width:0;display:flex}.viewer-id>div{min-width:0}.viewer-id .avatar{background:linear-gradient(160deg,#6c5ce7,#b184f0);border-radius:8px;flex:none;place-items:center;width:24px;height:24px;font-size:12px;font-weight:700;display:grid}.viewer-id strong{font-size:12px;line-height:1.25;display:block}.viewer-id em{color:#b8b2cc;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-style:normal;line-height:1.3;display:block;overflow:hidden}.btn{background:#ffffff0f;border:1px solid #ffffff29;border-radius:10px;padding:7px 14px;font-size:13px;transition:transform 80ms,background .15s}.btn:hover{background:#ffffff1f}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(160deg,#7b6cf6,#5a45e0);border-color:#fff3;box-shadow:0 8px 20px #5a45e059}.btn-primary:hover{background:linear-gradient(160deg,#8a7cff,#6a55f0)}.btn-danger{background:linear-gradient(160deg,#ff6b76,#e0324a);border-color:#fff3}.btn-ghost{background:#ffffff0d;padding:5px 10px;font-size:12px}.btn-lg{border-radius:12px;padding:12px 40px;font-size:15px}.overlay{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#08060e61;place-items:center;display:grid;position:absolute;inset:0}.result-card{text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 1px 3px #000c;background:linear-gradient(#262238d1,#141220d6);border:1px solid #ffffff24;border-radius:16px;width:min(86%,340px);padding:20px}.result-card h2{margin:0 0 6px;font-size:22px}.result-card.win h2{color:var(--accent-2)}.result-card.lose h2{color:var(--danger)}.result-reason{color:var(--muted);margin:0 0 12px;font-size:13px}.result-stats{font-family:var(--mono);color:var(--muted);justify-content:center;gap:14px;margin-bottom:16px;font-size:12px;display:flex}.replay{margin:0 0 14px}.replay-head{color:var(--muted);justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:11px;display:flex}.replay-speed{font-family:var(--mono);color:#d8d3ea;background:#ffffff0f;border:1px solid #ffffff29;border-radius:6px;flex:none;padding:2px 8px;font-size:10px}.replay-speed:hover{background:#ffffff21}.replay-frame{aspect-ratio:1;background:#0b0914;border:1px solid #ffffff24;border-radius:10px;position:relative;overflow:hidden}.replay-canvas{width:100%;height:100%;image-rendering:pixelated;display:block;position:absolute;inset:0}.replay-empty{color:var(--muted);place-items:center;font-size:11px;display:grid;position:absolute;inset:0}.replay-bar{background:#00000073;height:3px;position:absolute;bottom:0;left:0;right:0}.replay-bar i{background:var(--danger);height:100%;display:block}.result-actions{justify-content:center;gap:10px;display:flex}.countdown{font-family:var(--mono);color:var(--gold);font-size:13px}.tutor-overlay{z-index:6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#06050c9e}.tutor-card{text-shadow:0 1px 3px #000c;background:linear-gradient(#28243cf0,#13111ef5);border:1px solid #ffffff24;border-radius:16px;width:min(90%,372px);max-height:94%;padding:16px 16px 14px;overflow:auto;box-shadow:0 20px 50px #00000080}.tutor-card h2{text-align:center;color:var(--gold);margin:0 0 12px;font-size:19px}.tutor-hero{flex-direction:column;align-items:center;gap:8px;display:flex}.tutor-hero p,.tutor-list span{color:#cfcbe0;margin:0;font-size:12px;line-height:1.65}.tutor-hero strong,.tutor-list strong{color:var(--text);font-size:13px;display:block}.tutor-list{flex-direction:column;gap:12px;margin:14px 0 16px;padding:0;list-style:none;display:flex}.tutor-list li{align-items:center;gap:12px;display:flex}.tutor-art{flex:none;width:92px;overflow:visible}.tutor-art-touch{width:100%;max-width:264px}.tutor-screen{fill:none;stroke:#ffffff38}.tutor-chevron{fill:none;stroke:var(--gold);stroke-width:2px;opacity:.85}.tutor-chevron-far{opacity:.4}.tutor-ring{fill:#0a08144d;stroke:#ffffff4d;stroke-width:2px;stroke-dasharray:4 4}.tutor-finger{fill:#ffd44729;stroke:#ffd4478c}.tutor-nub{fill:#fffc}.tutor-go{width:100%}.tutor-knob{animation:5.2s ease-in-out infinite tutor-drag}.tutor-walk{animation:5.2s ease-in-out infinite tutor-follow}@keyframes tutor-drag{0%,6%{transform:translate(0)}14%,27%{transform:translate(10px)}35%,48%{transform:translateY(10px)}56%,69%{transform:translate(-10px)}77%,90%{transform:translateY(-10px)}to{transform:translate(0)}}@keyframes tutor-follow{0%,6%{transform:translate(0)}14%,27%{transform:translate(11px)}35%,48%{transform:translate(11px,9px)}56%,69%{transform:translateY(9px)}77%,90%{transform:translate(0)}to{transform:translate(0)}}@media (prefers-reduced-motion:reduce){.tutor-knob,.tutor-walk{animation:none}}.lobby{flex-direction:column;gap:12px;padding:18px;display:flex;position:absolute;inset:0;overflow:hidden}.lobby-head .badge{color:#d3c9ff;background:#6c5ce73d;border:1px solid #6c5ce780;border-radius:999px;padding:3px 10px;font-size:11px;display:inline-block}.lobby-head h1{margin:8px 0 4px;font-size:20px}.lobby-head p{color:var(--muted);margin:0;font-size:12px;line-height:1.6}.map-list{scrollbar-width:thin;scrollbar-color:#ffffff2e transparent;flex-direction:column;flex:1;gap:8px;min-height:0;padding-right:4px;display:flex;overflow-y:auto}.map-list::-webkit-scrollbar{width:5px}.map-list::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:3px}.map-card{text-align:left;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:12px;align-items:center;gap:10px;padding:8px;transition:all .15s;display:flex}.map-card:hover{border-color:#ffffff40;transform:translateY(-1px)}.map-card.active{border-color:var(--accent);background:#6c5ce729;box-shadow:0 0 0 1px #6c5ce780}.map-thumb{border:1px solid #00000080;border-radius:8px;flex:none;width:62px;height:62px;position:relative;overflow:hidden}.map-thumb-canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.map-info{flex-direction:column;gap:4px;min-width:0;display:flex}.map-info strong{font-size:14px}.map-info em{color:var(--muted);font-size:12px;font-style:normal}.map-tags{flex-wrap:wrap;gap:5px;margin-top:2px;display:flex}.map-tags i{color:#cfcbe4;font-size:10px;font-style:normal;font-family:var(--mono);background:#ffffff12;border-radius:6px;padding:2px 7px}.lobby-help{color:var(--muted);flex-direction:column;flex:none;gap:5px;font-size:11px;line-height:1.45;display:flex}.lobby-help div{gap:10px;display:flex}.lobby-help strong{color:var(--text);flex:none;width:34px}.panel{flex-direction:column;gap:12px;display:flex;position:sticky;top:16px}.panel-block{border-radius:var(--radius);background:var(--panel);border:1px solid var(--panel-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:14px}.panel-block header{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;display:flex}.panel-block h3{letter-spacing:.5px;margin:0;font-size:13px}.panel-block h3 b{color:var(--accent-2);font-family:var(--mono)}.panel-block .hint{color:var(--muted);text-align:right;font-size:10px}.mode-switch{background:#0000004d;border-radius:10px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.mode-switch button{color:var(--muted);background:0 0;border:none;border-radius:8px;padding:7px 0;font-size:12px}.mode-switch button.active{color:#fff;background:linear-gradient(160deg,#7b6cf6,#5a45e0)}.mode-desc{color:var(--muted);margin:10px 0 0;font-size:11px;line-height:1.65}.identity{background:#ffffff0d;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;display:flex}.identity em{color:var(--muted);font-size:10px;font-style:normal;display:block}.identity strong{font-size:13px}.traffic{flex-direction:column;gap:8px;margin-top:12px;display:flex}.switch{color:var(--muted);cursor:pointer;align-items:center;gap:8px;font-size:12px;display:flex}.switch input{accent-color:var(--accent)}.slider{color:var(--muted);font-size:11px;font-family:var(--mono);align-items:center;gap:8px;display:flex}.slider input{accent-color:var(--accent-2);flex:1}.slider>span{flex-direction:column;flex:none;gap:2px;min-width:84px;display:flex}.slider-note{opacity:.7;font-size:10px;font-style:normal}.traffic-actions{gap:6px;display:flex}.traffic .hint{text-align:left;line-height:1.5}.traffic-actions .btn-ghost.active{color:#fff;background:#7c6cff47;border-color:#7c6cff99}.traffic+.traffic{border-top:1px dashed #ffffff17;padding-top:10px}.seat-grid{grid-template-columns:1fr 1fr;gap:5px;margin:0;padding:0;list-style:none;display:grid}.seat{background:#ffffff0d;border-radius:8px;align-items:center;gap:6px;min-width:0;padding:5px 7px;font-size:11px;display:flex}.seat-dot{background:#b184f0;border-radius:50%;flex:none;width:7px;height:7px}.seat-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.seat.empty{color:#6f6b86;background:#ffffff05;border:1px dashed #ffffff17}.seat.empty .seat-dot{background:#4b4860}.seat.self{color:#ffe9a8;background:#ffd44729;border:1px solid #ffd44773}.seat.self .seat-dot{background:var(--gold)}.queue{margin-top:10px}.queue em{color:var(--muted);font-size:10px;font-style:normal}.queue-list{flex-wrap:wrap;gap:4px;margin-top:5px;display:flex}.tag{color:#cfcbe4;background:#ffffff0f;border-radius:6px;padding:3px 7px;font-size:10px}.tag.dead{color:#ffb6bc;background:#ff5f6d24;text-decoration:line-through}.tag.self{outline:1px solid var(--gold);color:#ffe9a8}.feed-block{flex:1;min-height:0}.feed{flex-direction:column;gap:5px;max-height:210px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.feed li{background:#ffffff0a;border-radius:7px;align-items:flex-start;gap:7px;padding:4px 6px;font-size:11px;line-height:1.5;display:flex}.feed li em{color:#d5d2e6;font-style:normal}.feed-kill{background:#ff5f6d1f}.feed-join{background:#2ecfa01f}.feed-system{background:#6c5ce724}.feed-empty{color:var(--muted);justify-content:center}.touch-layer{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.touch-stick{opacity:0;width:0;height:0;transition:opacity .12s;position:absolute}.touch-stick.on{opacity:1}.touch-stick-ring,.touch-stick-knob{pointer-events:none;border-radius:50%;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.touch-stick-ring{background:#0a081447;border:2px solid #ffffff47;width:112px;height:112px;box-shadow:0 0 24px #00000059}.touch-stick-knob{background:radial-gradient(circle at 32% 30%,#ffffffd9,#8c82ff8c);border:1px solid #ffffff80;width:46px;height:46px;box-shadow:0 4px 14px #0006}.touchpad{justify-content:space-between;align-items:center;gap:20px;width:min(100%,700px);padding:6px 10px;display:none}.touch-actions{align-items:center;gap:12px;display:flex}.round-btn{touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 30% 30%,#fff3,#ffffff0a);border:1px solid #ffffff2e;border-radius:50%;width:66px;height:66px;font-size:22px}.round-btn.tp{width:56px;height:56px;font-size:13px}.touch-hint{color:var(--muted);font-size:12px}@media (pointer:coarse){.touchpad{display:flex}}@media (width<=1080px){.layout{grid-template-columns:minmax(0,1fr)}.panel{width:min(100%,700px);margin:0 auto;position:static}.stage-inner{width:min(100%,620px)}}