:root{--panel: rgba(16, 22, 28, .82);--border: rgba(255, 255, 255, .1);--text: #e7edf3;--muted: #93a1b0;--accent: #57d982;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:#0b1015;color:var(--text);font:14px/1.5 -apple-system,PingFang SC,Microsoft YaHei,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}.app{position:relative;height:100%;width:100%}.stage{position:absolute;top:0;right:0;bottom:0;left:0;cursor:crosshair}canvas{display:block}.hud{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.players{display:flex;gap:10px}.player{min-width:148px;padding:8px 14px;background:var(--panel);border:1px solid var(--border);border-radius:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.player.active{border-color:var(--accent);box-shadow:0 0 0 1px #57d98259}.pname{font-weight:600;display:flex;align-items:center;gap:6px}.pname-btn,.pname-input{pointer-events:auto;font:inherit;color:inherit;max-width:140px}.pname-btn{padding:0;border:0;background:none;cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pname-btn:hover{text-decoration:underline dotted;text-underline-offset:3px}.pname-input{width:110px;padding:0 4px;border:1px solid var(--accent);border-radius:5px;background:#00000059;outline:none}.turn-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}.pgroup{color:var(--muted);font-size:12px}.premain{font-size:12px;color:var(--muted)}.status{font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:3px 12px}.foul{font-size:12px;color:#ff8a8a;background:#3c1014d9;border:1px solid rgba(255,90,90,.35);border-radius:999px;padding:3px 12px}.left-dock{position:absolute;left:18px;bottom:18px}.right-dock{position:absolute;right:18px;bottom:18px}.spin-panel,.power-panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center}.panel-title{font-size:11px;color:var(--muted);margin-bottom:8px}.spin-ball{position:relative;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,#cfd4d8 72%,#a9b0b6);border:1px solid rgba(0,0,0,.35);cursor:pointer}.spin-cross-h,.spin-cross-v{position:absolute;background:#00000029}.spin-cross-h{left:8%;right:8%;top:50%;height:1px}.spin-cross-v{top:8%;bottom:8%;left:50%;width:1px}.spin-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 1px #0000004d}.spin-readout,.power-readout{margin-top:8px;font-size:12px;color:var(--muted)}.power-track{position:relative;width:34px;height:260px;border-radius:8px;background:#ffffff12;border:1px solid var(--border);overflow:hidden;cursor:ns-resize}.power-fill{position:absolute;left:0;right:0;bottom:0;transition:height 40ms linear}.tuner{position:absolute;top:56px;right:18px;width:232px;max-height:calc(100vh - 90px);overflow-y:auto;padding:10px 12px 12px;background:var(--panel);border:1px solid var(--border);border-radius:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tune-row{margin-bottom:9px}.tune-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px}.tune-val{font-variant-numeric:tabular-nums;color:var(--muted)}.tune-val.changed{color:var(--accent)}.tuner input[type=range]{width:100%;margin:2px 0 0;accent-color:var(--accent)}.tune-actions{display:flex;gap:8px;margin-top:10px}.tune-actions button{flex:1;padding:5px 0;font-size:12px}.tune-hint{margin-top:8px;font-size:11px;color:var(--muted)}.toolbar{position:absolute;top:14px;right:18px;display:flex;gap:8px}button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:6px 12px;cursor:pointer}button:hover{border-color:var(--accent)}.hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%);font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:4px 14px;pointer-events:none;white-space:nowrap}.music-panel{position:absolute;top:58px;right:18px;display:flex;align-items:center;gap:4px;padding:4px 6px;background:var(--panel);border:1px solid var(--border);border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.music-panel button{padding:2px 8px;border-radius:999px;line-height:1.2}.music-toggle{width:28px;color:var(--muted)}.music-toggle.on{color:var(--accent);border-color:#57d98266}.music-title{min-width:116px;text-align:center;line-height:1.15}.mt-name{display:block;font-size:12px}.mt-artist{display:block;font-size:10px;color:var(--muted)}.celebration{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 42%,#0c16128c,#04070adb);animation:celebration-in .35s ease-out both}@keyframes celebration-in{0%{opacity:0}to{opacity:1}}.confetti-layer{position:absolute;top:0;right:0;bottom:0;left:0}.confetti{position:absolute;top:-14vh;border-radius:2px;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}.confetti.round{border-radius:50%}@keyframes confetti-fall{0%{transform:translateZ(0) rotate(0);opacity:1}to{transform:translate3d(var(--drift),128vh,0) rotate(var(--spin));opacity:.85}}.celebration-glow{position:absolute;left:50%;top:44%;width:min(78vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(87,217,130,.22),transparent 62%);animation:glow-pulse 2.4s ease-in-out infinite}@keyframes glow-pulse{0%,to{opacity:.55;transform:translate(-50%,-50%) scale(.95)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}.celebration-card{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);pointer-events:auto;text-align:center;padding:26px 46px 30px;border-radius:18px;background:#0d1319db;border:1px solid rgba(87,217,130,.32);box-shadow:0 24px 70px #0000008c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:card-pop .5s cubic-bezier(.2,1.5,.4,1) both}@keyframes card-pop{0%{opacity:0;transform:translate(-50%,-46%) scale(.86)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.trophy{font-size:54px;line-height:1;animation:trophy-bob 1.8s ease-in-out infinite}@keyframes trophy-bob{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}.celebration-title{margin-top:12px;font-size:32px;font-weight:700;letter-spacing:1px;background:linear-gradient(92deg,#ffd166,#57d982 55%,#7fd4ff);-webkit-background-clip:text;background-clip:text;color:transparent}.celebration-sub{margin-top:4px;font-size:13px;color:var(--muted)}.celebration-btn{margin-top:20px;padding:9px 26px;font-size:15px;border-color:#57d98273;background:#57d98224}.celebration-btn:hover{background:#57d9823d}@media (prefers-reduced-motion: reduce){.confetti,.trophy,.celebration-glow{animation:none}}@media (max-height: 760px){.spin-ball{width:84px;height:84px}.power-track{height:190px}}