:root{--bg: #14110f;--panel: rgba(22, 17, 14, .82);--line: rgba(255, 226, 184, .16);--text: #f2e9d8;--muted: #b3a48c;--gold: #d9b36c;--green: #7ddf8a;--red: #e0574a;--font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden}#app{position:fixed;top:0;right:0;bottom:0;left:0}canvas.view{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;outline:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}button:disabled{cursor:default;opacity:.45}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.hud[hidden]{display:none}.hud-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px}.player{pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;display:grid;grid-template-columns:auto auto;gap:2px 10px;align-items:center;justify-content:start;min-width:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .3s,box-shadow .3s}.player.right{justify-content:end;text-align:right}.player.active{border-color:var(--gold);box-shadow:0 0 0 1px #d9b36c59,0 6px 24px #00000059}.player .name{font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .group{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.player .tray{grid-column:1 / -1;display:flex;gap:4px;flex-wrap:wrap;min-height:18px}.player.right .tray{justify-content:flex-end}.tray .ball{width:18px;height:18px;border-radius:50%;background:var(--c);display:inline-grid;place-items:center;position:relative;box-shadow:inset -2px -2px 3px #00000059,inset 2px 2px 3px #ffffff40}.tray .ball.stripe{background:linear-gradient(#f6f1e4 0 22%,var(--c) 22% 78%,#f6f1e4 78%)}.tray .ball i{font-style:normal;font-size:8px;font-weight:700;color:#1a1714;background:#f6f1e4;border-radius:50%;width:11px;height:11px;display:grid;place-items:center;line-height:1}.tray .ball.down{opacity:.22;filter:grayscale(.6)}.turn{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 16px;pointer-events:auto}.turn-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.turn-name{font-family:var(--serif);font-size:18px}.toast{position:absolute;left:50%;top:22%;transform:translate(-50%,-8px);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:15px;opacity:0;transition:opacity .25s,transform .25s;max-width:min(90vw,560px);text-align:center}.toast.show{opacity:1;transform:translate(-50%)}.toast.foul{border-color:#e0574a99}.toast.good{border-color:#7ddf8a99}.hint{position:absolute;left:50%;bottom:128px;transform:translate(-50%);font-size:13px;color:var(--muted);opacity:0;transition:opacity .3s;width:max-content;max-width:88vw;text-align:center}.hint.show{opacity:1}.hud-bottom{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:12px}.spin-box{pointer-events:auto;display:grid;justify-items:center;gap:4px}.spin-box canvas{width:96px;height:96px;cursor:crosshair;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}.mini{background:var(--panel);border:1px solid var(--line);border-radius:999px;font-size:11px;padding:3px 10px;color:var(--muted)}.mini[hidden]{visibility:hidden;display:inline-block!important}.shoot-box{pointer-events:auto;display:grid;gap:8px;justify-items:center;max-width:520px;width:100%;margin:0 auto}.aim-row{display:flex;gap:8px;align-items:center;width:100%}.aim-btn{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:14px}.aim-btn:active{background:#d9b36c59}@media(pointer:fine){.aim-btn{display:none}}.power{position:relative;flex:1;min-width:0;height:20px;border-radius:999px;background:#00000080;border:1px solid var(--line);overflow:hidden}.power-fill{height:100%;width:0;background:linear-gradient(90deg,#6fb77a,#d9b36c 60%,#e0574a);transition:width .04s linear}.power-fill.hot{box-shadow:0 0 12px #e0574ab3}.power-label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.8)}.shoot{width:100%;max-width:280px;padding:12px 20px;border-radius:999px;border:1px solid var(--gold);background:linear-gradient(180deg,#d9b36c59,#d9b36c1f);color:var(--text);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;user-select:none;-webkit-user-select:none;touch-action:none}.shoot:active{background:#d9b36c8c}.shoot:disabled{opacity:.35;cursor:default}.tools{pointer-events:auto;display:grid;gap:6px;justify-items:end}.tool{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12px;color:var(--text);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap}.tool:hover{border-color:var(--gold)}.dialog{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;align-items:safe center;background:radial-gradient(ellipse at center,#14110f8c,#0a0807e6);padding:16px;overflow:auto;z-index:10}.dialog[hidden]{display:none}.panel{width:min(100%,440px);background:#181310f0;border:1px solid var(--line);border-radius:18px;padding:28px 28px 24px;box-shadow:0 30px 80px #0009;text-align:center;display:grid;gap:12px}.panel.wide{width:min(100%,620px);text-align:left}.eyebrow{margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(40px,8vw,64px);letter-spacing:.02em;line-height:1}h2{margin:0;font-family:var(--serif);font-weight:400;font-size:30px}.lede{margin:0 0 6px;color:var(--muted);line-height:1.5;font-size:15px}.field{display:grid;gap:6px}.field.dim{opacity:.4;pointer-events:none}.label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.choices{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.choices button{background:#ffffff0a;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px}.choices button.selected{border-color:var(--gold);background:#d9b36c33;color:#fff}.primary{margin-top:6px;padding:14px 24px;border-radius:999px;border:1px solid var(--gold);background:linear-gradient(180deg,#e2bf78,#b98d43);color:#1c1510;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:14px}.primary:hover{filter:brightness(1.08)}.secondary{padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:#ffffff0a}.secondary:hover{border-color:var(--gold)}.link{background:none;border:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:14px;padding:4px}.controls{width:100%;border-collapse:collapse;font-size:14px}.controls td{padding:7px 6px;border-top:1px solid var(--line);vertical-align:top}.controls td:first-child{color:var(--gold);white-space:nowrap;width:46%}.menu-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}input{min-width:0;width:100%;font:inherit;color:var(--text);background:#0000004d;border:1px solid var(--line);border-radius:9px;padding:10px 12px}input::placeholder{color:var(--muted)}.online-fields{display:grid;gap:12px}.join-row{display:grid;grid-template-columns:1fr auto;gap:8px}#room-code-input{text-transform:uppercase;letter-spacing:.15em}.online-message{margin:0;color:var(--gold);font-size:13px;line-height:1.5;overflow-wrap:anywhere}.online-message:empty{display:none}.room-code{font-size:clamp(28px,8vw,42px);color:var(--gold);letter-spacing:.2em;font-variant-numeric:tabular-nums}#invite-link{font-size:12px}.network-status{position:absolute;left:50%;top:88px;transform:translate(-50%);max-width:90vw;border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--panel);color:var(--muted);font-size:12px;text-align:center}.network-status.waiting{color:var(--gold);border-color:var(--gold)}.now-playing{display:grid;gap:8px;padding:18px 8px;background:#d9b36c0d;border:1px solid var(--line);border-radius:12px}#track-name{font-family:var(--serif);font-size:22px;font-weight:400}.audio-channel{display:grid;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.channel-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.channel-title .mini{padding:5px 10px}.volume-row{display:grid;grid-template-columns:1fr 42px;align-items:center;gap:12px}.volume-row input{accent-color:var(--gold);padding:0;cursor:pointer;height:24px}.volume-row output{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;text-align:right}@media(max-width:720px){.hud-top{grid-template-columns:1fr 1fr}.turn{display:none}.player{padding:6px 10px;font-size:13px}.hud-bottom{grid-template-columns:auto 1fr;grid-template-areas:"spin shoot" "tools tools";gap:8px}.spin-box{grid-area:spin}.shoot-box{grid-area:shoot}.tools{grid-area:tools;grid-auto-flow:column;justify-content:center;justify-items:center}.spin-box canvas{width:72px;height:72px}.hint{bottom:150px;font-size:12px}.toast{top:18%;font-size:13px}.panel{padding:24px 20px 20px}.controls td:first-child{white-space:normal}.network-status{top:78px;font-size:11px}}@media(prefers-reduced-motion:reduce){.toast,.hint,.player,.power-fill{transition:none}}