:root{--bg:#07100b;--ink:#f3efe2;--muted:#f3efe29e;--felt:#127a54;--gold:#e7c15a;--accent:#4fd1a6;--danger:#ff6b5e;--panel:#0a120dbd;--panel-border:#f3efe229;color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:geometricprecision;-webkit-font-smoothing:antialiased;font-family:Avenir Next,Avenir,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px}#app{background:radial-gradient(circle at 50% 18%,#50785f2e,#0000 60%),#050b07;position:relative}#game-canvas{touch-action:none;cursor:crosshair;outline:none;width:100vw;height:100dvh;display:block}#hud{pointer-events:none;z-index:5;position:absolute;inset:0}.hud-top{top:max(14px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left));right:max(14px, env(safe-area-inset-right));align-items:flex-start;gap:10px;display:flex;position:absolute}.panel{border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;padding:9px 13px;box-shadow:0 10px 30px #0006}.label{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:.62rem;display:block}.turn-row{align-items:center;gap:8px;margin-top:3px;display:flex}#player-name{min-width:5.5ch;font-size:1.05rem;font-weight:700}.chip{letter-spacing:.08em;text-transform:uppercase;color:#06120c;background:var(--accent);border-radius:999px;padding:3px 7px;font-size:.6rem;font-weight:800}.chip.danger{background:var(--danger);color:#1a0606}#rack-strip{flex-direction:column;align-items:center;margin:0 auto;display:flex}.ball-strip{gap:5px;margin-top:5px;display:flex}.strip-ball{color:#1a1a1c;border-radius:50%;place-items:center;width:26px;height:26px;font-size:.74rem;font-weight:800;transition:filter .3s,opacity .3s,transform .2s;display:grid;position:relative;box-shadow:inset -2px -3px 5px #0006,0 1px 3px #00000080}.strip-ball .num{background:#ffffffeb;border-radius:50%;place-items:center;width:62%;height:62%;line-height:1;display:grid}.strip-ball.stripe{color:#1a1a1c}.strip-ball.made{filter:grayscale()brightness(.4);opacity:.35}.strip-ball.target{box-shadow:0 0 0 2px var(--gold), inset -2px -3px 5px #0006, 0 2px 8px #0009;transform:translateY(-3px)scale(1.12)}.hud-buttons{pointer-events:auto;gap:8px;margin-left:auto;display:flex}.icon-btn{border:1px solid var(--panel-border);background:var(--panel);width:42px;height:42px;color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;font-size:1.15rem;line-height:1;transition:transform .12s,background .12s,border-color .12s}.icon-btn:hover{border-color:var(--gold)}.icon-btn:active{transform:scale(.92)}.icon-btn.off{color:var(--muted);text-decoration:line-through}.banner{top:max(96px, calc(env(safe-area-inset-top) + 90px));background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);letter-spacing:.02em;white-space:nowrap;opacity:0;border-radius:999px;padding:10px 22px;font-size:.98rem;font-weight:700;transition:opacity .25s,transform .25s;position:absolute;left:50%;transform:translate(-50%)translateY(-8px);box-shadow:0 12px 36px #00000073}.banner.show{opacity:1;transform:translate(-50%)translateY(0)}.banner.foul{border-color:var(--danger);color:var(--danger)}.banner.good{border-color:var(--accent);color:var(--accent)}.place-banner{top:max(58px, calc(env(safe-area-inset-top) + 52px));border:1px solid var(--accent);color:var(--accent);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;background:#08140ed1;border-radius:999px;padding:10px 22px;font-size:.9rem;font-weight:700;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000073}.spin-card{left:max(16px, env(safe-area-inset-left));bottom:max(18px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto;background:linear-gradient(#121e16eb,#08100bf0);border:1px solid #e7c15a8c;border-radius:18px;flex-direction:column;align-items:center;gap:12px;width:168px;padding:14px 16px 16px;display:flex;position:absolute;box-shadow:0 14px 36px #00000080}.spin-title{letter-spacing:.28em;color:var(--gold);font-size:.74rem;font-weight:800}.spin-disc{cursor:pointer;touch-action:none;background:radial-gradient(circle at 38% 32%,#fff,#dcdcd2 72%,#c4c4ba 100%);border-radius:50%;width:120px;height:120px;position:relative;box-shadow:inset -6px -8px 16px #00000047,inset 4px 5px 10px #ffffff80}.spin-cross{background:#3c3c3c73;position:absolute}.spin-cross-h{height:1px;top:50%;left:8%;right:8%;transform:translateY(-50%)}.spin-cross-v{width:1px;top:8%;bottom:8%;left:50%;transform:translate(-50%)}.spin-dot{background:radial-gradient(circle at 38% 35%,#ff6258,#c0231b 75%);border:1px solid #78120ce6;border-radius:50%;width:20px;height:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 3px #00000080}.spin-center{width:100%;color:var(--gold);letter-spacing:.16em;cursor:pointer;background:0 0;border:1px solid #e7c15a99;border-radius:10px;padding:8px 0;font-size:.74rem;font-weight:800}.spin-center:active{transform:scale(.96)}.hud-bottom{bottom:max(18px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:10px;width:min(440px,86vw);display:flex;position:absolute;left:50%;transform:translate(-50%)}.hint{color:var(--muted);letter-spacing:.03em;text-align:center;font-size:.74rem}.shoot-row{align-items:stretch;gap:10px;width:100%;display:flex}.power-wrap{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:.6;border-radius:14px;flex:1;align-items:center;gap:10px;padding:8px 12px;transition:opacity .18s;display:flex}.power-wrap.active{opacity:1}.power-pct{text-align:right;font-variant-numeric:tabular-nums;min-width:3.4ch;font-size:.82rem;font-weight:800}.strike-btn{background:linear-gradient(180deg, var(--accent), #2fae87);color:#042016;letter-spacing:.08em;cursor:pointer;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:14px;flex:none;padding:0 22px;font-size:.9rem;font-weight:800;transition:transform .1s,filter .1s}.strike-btn:active{filter:brightness(1.1);transform:scale(.95)}.power-label{letter-spacing:.16em;color:var(--muted);font-size:.6rem}.power-track{background:#00000073;border-radius:999px;flex:1;height:12px;position:relative;overflow:hidden}.power-fill{background:linear-gradient(90deg, var(--accent), var(--gold) 60%, var(--danger));border-radius:999px;width:0%;height:100%;transition:width 40ms linear}.overlay{z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(circle at 50% 35%,#0a1e148c,#020604eb);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.menu-card{border:1px solid var(--panel-border);background:linear-gradient(#101c14e6,#08100beb);border-radius:24px;flex-direction:column;align-items:center;gap:16px;max-width:min(440px,90vw);padding:38px 44px;display:flex;box-shadow:0 30px 80px #0009}.title{letter-spacing:.02em;margin:0;font-size:clamp(2.6rem,9vw,4rem);font-weight:800;line-height:.95}.title .nine{color:var(--gold);text-shadow:0 0 30px #e7c15a8c}.subtitle{color:var(--muted);margin:0;font-size:.95rem}.menu-group{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.btn{appearance:none;border:1px solid var(--panel-border);color:var(--ink);cursor:pointer;background:#ffffff0d;border-radius:14px;min-width:140px;padding:13px 26px;font-size:1rem;font-weight:700;transition:transform .12s,background .12s,border-color .12s}.btn:hover{border-color:var(--gold)}.btn:active{transform:scale(.96)}.btn.primary{background:linear-gradient(180deg, var(--accent), #2fae87);color:#042016;border-color:#0000}.difficulty{align-items:center}.diff-label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:.7rem}.diff-btn{appearance:none;border:1px solid var(--panel-border);color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;padding:8px 14px;font-size:.82rem;font-weight:700}.diff-btn.active{color:#06120c;background:var(--gold);border-color:var(--gold)}.rules-note{color:var(--muted);max-width:30ch;margin:4px 0 0;font-size:.78rem}.spinner{border:3px solid #ffffff2e;border-top-color:var(--gold);border-radius:50%;width:44px;height:44px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}@media (width<=720px),(pointer:coarse){.hud-top{gap:7px}.panel{padding:7px 10px}#player-name{font-size:.92rem}.target-ball{width:32px;height:32px;font-size:.95rem}.icon-btn{width:44px;height:44px}.hint{font-size:.68rem}}@media (width<=420px){.hud-buttons{gap:6px}.menu-card{padding:28px 22px}}@media (width<=720px),(pointer:coarse){.spin-card{gap:8px;width:116px;padding:9px 10px 11px}.spin-disc{width:84px;height:84px}.spin-dot{width:16px;height:16px}.spin-title{letter-spacing:.2em;font-size:.64rem}.hud-bottom{left:auto;right:max(12px, env(safe-area-inset-right));align-items:flex-end;width:min(300px,58vw);transform:none}.place-banner{white-space:normal;text-align:center;max-width:80vw;font-size:.74rem}}