:root{--gold: #d8b465;--gold-dim: #9c8350;--panel: rgba(10, 16, 13, .78);--panel-edge: rgba(216, 180, 101, .35);--ink: #f0ead8;--danger: #e4574f;--good: #6fd394;--sai-t: env(safe-area-inset-top, 0px);--sai-b: env(safe-area-inset-bottom, 0px);--sai-l: env(safe-area-inset-left, 0px);--sai-r: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0a0c0b;font-family:Oswald,Arial Narrow,Helvetica Neue,Arial,sans-serif}#app{position:fixed;inset:0}#app canvas{display:block}#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 50% 42%,transparent 58%,rgba(0,0,0,.42) 100%)}#hud{position:fixed;inset:0;pointer-events:none;z-index:10;color:var(--ink);user-select:none;-webkit-user-select:none}#hud button{pointer-events:auto;font-family:inherit;cursor:pointer;border:1px solid var(--panel-edge);background:#141c17d9;color:var(--ink);letter-spacing:.08em}#hud button:hover{border-color:var(--gold);color:#fff}#hud button:active{transform:translateY(1px)}.scorebar{position:absolute;top:calc(10px + var(--sai-t));left:50%;transform:translate(-50%);display:flex;align-items:stretch;background:linear-gradient(180deg,#0e1410eb,#080c0ad9);border:1px solid var(--panel-edge);border-radius:6px;overflow:hidden;box-shadow:0 4px 18px #00000080}.sb-player{display:flex;flex-direction:column;justify-content:center;padding:7px 18px;min-width:132px;gap:3px;border-left:3px solid transparent;border-right:3px solid transparent;opacity:.55;transition:opacity .3s,border-color .3s}.sb-player.left{align-items:flex-end;text-align:right}.sb-player.right{align-items:flex-start}.sb-player.active{opacity:1}.sb-player.left.active{border-right-color:var(--gold)}.sb-player.right.active{border-left-color:var(--gold)}.sb-name{font-size:15px;letter-spacing:.14em;font-weight:600}.sb-racks{display:flex;gap:4px}.sb-racks .dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold-dim);display:inline-block}.sb-racks .dot.won{background:var(--gold);border-color:var(--gold)}.sb-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 16px;gap:2px;background:#d8b46512;border-left:1px solid var(--panel-edge);border-right:1px solid var(--panel-edge);min-width:96px}.sb-rack{font-size:12px;letter-spacing:.22em;color:var(--gold);font-weight:600}.sb-target{display:flex;align-items:center;gap:7px}.sb-on{font-size:11px;letter-spacing:.2em;opacity:.75}.ballchip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);box-shadow:inset -2px -3px 5px #00000073,inset 2px 3px 4px #ffffff4d;position:relative}.ballchip.striped:after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,#f4efe2 0 22%,transparent 22% 78%,#f4efe2 78% 100%);z-index:-0;opacity:.9}.ballchip.striped{z-index:0}.ballchip.small{width:21px;height:21px;font-size:10.5px}.ballchip.potted{opacity:.22;filter:grayscale(.8)}.balltray{position:absolute;top:calc(66px + var(--sai-t));left:50%;transform:translate(-50%);display:flex;gap:5px;padding:5px 10px;background:#080c0a99;border:1px solid rgba(216,180,101,.18);border-radius:20px}.banner{position:absolute;top:calc(112px + var(--sai-t));left:50%;transform:translate(-50%);padding:8px 26px;font-size:17px;font-weight:600;letter-spacing:.16em;background:var(--panel);border-left:3px solid var(--gold);border-right:3px solid var(--gold);border-radius:4px;transition:opacity .4s,transform .4s;white-space:nowrap}.banner.hidden{opacity:0;transform:translate(-50%) translateY(-8px);pointer-events:none}.banner.foul{border-color:var(--danger);color:#ffb3ae}.banner.good{border-color:var(--good);color:#b9f0cd}.console{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:8px;backdrop-filter:blur(5px);pointer-events:auto}.console-label{font-size:10px;letter-spacing:.3em;color:var(--gold);font-weight:600}.spin-console{left:calc(14px + var(--sai-l));bottom:calc(16px + var(--sai-b))}.spin-face{width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#cfc9b8 70%,#9d9786);box-shadow:inset -4px -6px 12px #00000059,0 2px 8px #00000080;position:relative;touch-action:none;cursor:crosshair}.spin-face:before,.spin-face:after{content:"";position:absolute;background:#00000024}.spin-face:before{left:50%;top:6%;bottom:6%;width:1px}.spin-face:after{top:50%;left:6%;right:6%;height:1px}.spin-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#c23b32;border:2px solid #fff;transform:translate(-50%,-50%);left:50%;top:50%;box-shadow:0 1px 4px #0009;pointer-events:none}.spin-reset{font-size:9.5px;padding:4px 12px;border-radius:3px}.power-console{right:calc(14px + var(--sai-r));bottom:calc(16px + var(--sai-b))}.power-meter{width:26px;height:150px;border:1px solid var(--panel-edge);border-radius:4px;background:#00000080;position:relative;overflow:hidden;touch-action:none;cursor:ns-resize}.power-fill{position:absolute;bottom:0;left:0;right:0;height:35%;background:linear-gradient(180deg,#e4574f,#e8a13c 40%,#d8b465 75%,#6fd394);transition:height .05s linear}.power-pct{font-size:13px;font-weight:600;letter-spacing:.1em;min-width:42px;text-align:center}.strike-btn{font-size:13px;font-weight:700;letter-spacing:.18em;padding:10px 14px;border-radius:5px;background:linear-gradient(180deg,#8c2f24,#5e1d16);border-color:#c46a5a;min-width:86px;min-height:44px}.strike-btn:hover{background:linear-gradient(180deg,#a83a2c,#6e231a)}.action-rail{position:absolute;right:calc(12px + var(--sai-r));top:calc(96px + var(--sai-t));display:flex;flex-direction:column;gap:8px}.rail-btn{width:44px;height:44px;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative}.rail-btn svg{width:22px;height:22px}.rail-btn.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px #d8b46540}.rail-btn.off{opacity:.45}.rail-btn.disabled{opacity:.3;pointer-events:none}.rail-cam-label{position:absolute;bottom:-2px;left:0;right:0;font-size:7.5px;letter-spacing:.12em;color:var(--gold);text-align:center;pointer-events:none}.hint{position:absolute;bottom:calc(16px + var(--sai-b));left:50%;transform:translate(-50%);font-size:12px;letter-spacing:.08em;opacity:.66;background:#080c0a8c;padding:6px 14px;border-radius:14px;transition:opacity .6s;white-space:nowrap}.hint.faded{opacity:0}.hint b{color:var(--gold)}.bih-notice{position:absolute;top:calc(158px + var(--sai-t));left:50%;transform:translate(-50%);padding:8px 22px;font-size:14px;letter-spacing:.14em;font-weight:600;color:#b9f0cd;background:var(--panel);border:1px solid var(--good);border-radius:4px;animation:pulse 1.6s infinite}@keyframes pulse{50%{opacity:.65}}.replay-badge{position:absolute;top:calc(112px + var(--sai-t));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:7px 16px;font-size:13px;letter-spacing:.2em;font-weight:600;background:var(--panel);border:1px solid var(--panel-edge);border-radius:4px}.replay-badge .rec{width:9px;height:9px;border-radius:50%;background:var(--danger);animation:pulse 1s infinite}.replay-badge .skip{font-size:10px;padding:4px 10px;border-radius:3px}.hidden{display:none!important}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#040705b8;backdrop-filter:blur(6px);pointer-events:auto}.panel{display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 52px;background:linear-gradient(180deg,#101813f5,#090e0bf5);border:1px solid var(--panel-edge);border-radius:10px;box-shadow:0 12px 60px #000000b3;text-align:center;max-width:min(92vw,560px)}.panel-emblem img{width:92px;height:92px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-dim);box-shadow:0 4px 24px #d8b46540}.panel h1{margin:0;font-size:28px;letter-spacing:.18em;font-weight:600;color:var(--gold)}.panel-sub{font-size:13px;letter-spacing:.26em;opacity:.8}.panel-buttons{display:flex;gap:12px;margin-top:6px}.panel-buttons button{font-size:13px;font-weight:600;letter-spacing:.16em;padding:12px 26px;border-radius:5px;min-height:44px}.panel-buttons button.primary{background:linear-gradient(180deg,#9c8350,#6e5a33);color:#fff}.controls-list{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:10.5px;letter-spacing:.1em;opacity:.6;max-width:420px}@media(max-width:760px){.sb-player{min-width:92px;padding:5px 10px}.sb-name{font-size:12px}.sb-mid{min-width:76px;padding:4px 10px}.balltray{top:calc(58px + var(--sai-t));gap:4px;padding:4px 8px}.ballchip.small{width:18px;height:18px;font-size:9px}.hint{display:none}.spin-face{width:72px;height:72px}.power-meter{height:110px}.action-rail{top:calc(100px + var(--sai-t));flex-direction:column}.rail-btn{width:40px;height:40px}.panel{padding:24px 22px}.panel h1{font-size:20px}}@media(max-width:430px){.scorebar{transform:translate(-50%) scale(.92);transform-origin:top center}.banner,.bih-notice,.replay-badge{font-size:12px;white-space:normal;text-align:center;max-width:86vw}}