:root{color-scheme:dark;--ink:#07110f;--panel:#101d1a;--panel2:#162722;--felt:#087a59;--felt2:#0ba878;--gold:#e8bd65;--cream:#f7f3e8;--muted:#9aaba6;--line:rgba(255,255,255,.11)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 50% 38%,#17332a 0,#081310 52%,#030706 100%);color:var(--cream);user-select:none}.hidden{display:none!important}button{font:inherit;color:inherit}.loading-screen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#07110f;transition:opacity .35s,visibility .35s}.loading-screen.is-ready{opacity:0;visibility:hidden;pointer-events:none}.loading-mark{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#0a0a0a;border:4px solid var(--gold);font:900 42px/1 Georgia,serif;box-shadow:0 0 60px rgba(232,189,101,.25)}
.game-shell{height:100svh;padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:grid;grid-template-rows:76px 1fr 34px;gap:12px}.match-hud{width:min(1040px,calc(100vw - 170px));margin:0 auto;display:grid;grid-template-columns:1fr 132px 1fr;align-items:stretch;gap:10px}.player-panel,.turn-core{background:linear-gradient(145deg,rgba(28,49,43,.96),rgba(11,22,19,.96));border:1px solid var(--line);box-shadow:0 12px 35px rgba(0,0,0,.28);border-radius:18px}.player-panel{display:flex;align-items:center;gap:11px;padding:9px 14px;min-width:0}.player-panel.active{border-color:rgba(232,189,101,.56);box-shadow:inset 0 -2px var(--gold),0 12px 35px rgba(0,0,0,.28)}.avatar{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#cf9b3f,#f1d58c);color:#152019;font-weight:900;border:2px solid rgba(255,255,255,.3)}.avatar.rival{background:linear-gradient(135deg,#576c67,#a6b5b1)}.player-copy{display:grid;min-width:80px}.player-name{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ball-group,.control-label,.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:800}.ball-rack{display:flex;gap:3px;flex:1;justify-content:flex-end;min-width:0}.rack-ball{width:13px;height:13px;border-radius:50%;background:#ddd;box-shadow:inset -2px -2px 3px rgba(0,0,0,.35)}.rack-ball.empty{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}.player-2 .ball-rack{justify-content:flex-start}.turn-core{display:grid;place-items:center;align-content:center}.turn-label{font-size:12px;font-weight:900;letter-spacing:.1em;color:var(--gold)}.timer{font:800 28px/1 ui-monospace,monospace;margin-top:4px}
.table-stage{position:relative;display:grid;place-items:center;min-height:0}.table-frame{position:relative;width:min(1180px,calc(100vw - 240px),calc((100svh - 154px)*2));aspect-ratio:2/1;padding:16px;border-radius:34px;background:linear-gradient(145deg,#8e5c2f,#4b2c17 50%,#a56f38);box-shadow:0 30px 75px rgba(0,0,0,.48),inset 0 0 0 2px rgba(255,228,183,.18),inset 0 -9px 15px rgba(26,10,3,.38)}.table-frame:before{content:"";position:absolute;inset:7px;border-radius:27px;border:1px solid rgba(255,255,255,.12);pointer-events:none}#pool-table{display:block;width:100%;height:100%;border-radius:20px;background:#087a59;box-shadow:inset 0 0 36px rgba(0,0,0,.3);touch-action:none}.spin-console,.power-console{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 12px;border-radius:20px;background:rgba(12,25,21,.88);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.3);backdrop-filter:blur(10px)}.spin-console{left:max(14px,calc(50% - min(590px,calc((100vw - 240px)/2),calc(100svh - 154px)) - 94px))}.power-console{right:max(14px,calc(50% - min(590px,calc((100vw - 240px)/2),calc(100svh - 154px)) - 94px))}.spin-ball{position:relative;width:62px;height:62px;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 33% 27%,#fff,#d8ddd9 55%,#8f9996);box-shadow:inset -8px -10px 15px rgba(0,0,0,.23),0 7px 16px rgba(0,0,0,.35)}#spin-indicator{position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:50%;background:#e74949;box-shadow:0 0 0 3px rgba(231,73,73,.18)}#reset-spin{border:0;background:transparent;color:var(--gold);font-size:10px;font-weight:900;cursor:pointer}#spin-info{font-size:9px;color:var(--muted)}#power-gauge{position:relative;width:22px;height:176px;border-radius:14px;background:#050807;border:1px solid rgba(255,255,255,.18);overflow:visible;touch-action:none}#power-fill{position:absolute;left:3px;right:3px;bottom:3px;height:0;border-radius:10px;background:linear-gradient(0deg,#42d992,#e9d268 62%,#e15b4f);box-shadow:0 0 15px rgba(66,217,146,.3)}#power-handle{position:absolute;left:50%;top:calc(100% - 10px);width:40px;height:10px;transform:translate(-50%,-50%);border-radius:8px;background:var(--cream);box-shadow:0 3px 8px rgba(0,0,0,.45)}#power-value{font-size:11px;color:var(--gold);font-weight:800}
.game-footer{display:flex;justify-content:center;gap:clamp(20px,7vw,90px);align-items:center;color:#7f918b;font-size:10px;letter-spacing:.12em;font-weight:800}.game-message{position:fixed;z-index:15;left:50%;bottom:58px;transform:translateX(-50%);display:grid;gap:2px;min-width:260px;padding:12px 22px;text-align:center;border-radius:14px;background:rgba(5,13,11,.92);border:1px solid rgba(232,189,101,.3);box-shadow:0 12px 32px rgba(0,0,0,.4)}.game-message strong{color:var(--gold);letter-spacing:.12em}.game-message span{font-size:12px;color:#b9c7c2}.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:rgba(2,7,6,.8);backdrop-filter:blur(12px)}.dialog{width:min(560px,100%);padding:32px;border-radius:26px;background:linear-gradient(145deg,#182a25,#0b1512);border:1px solid var(--line);box-shadow:0 35px 80px rgba(0,0,0,.55);text-align:center}.dialog h1,.dialog h2{margin:8px 0 24px}.pocket-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.dialog button{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#1c312a;font-weight:800;cursor:pointer}.dialog button:hover{border-color:var(--gold)}.winner-actions{display:flex;justify-content:center;gap:10px}.dialog .primary{background:var(--gold);color:#172019;border-color:var(--gold)}
@media(max-width:800px){.game-shell{grid-template-rows:62px 1fr 28px;padding:8px}.match-hud{width:calc(100vw - 78px);grid-template-columns:1fr 76px 1fr;gap:5px}.player-panel{padding:6px 8px;border-radius:13px}.avatar{width:34px;height:34px;flex-basis:34px}.ball-rack,.ball-group{display:none}.turn-core{border-radius:13px}.turn-label{font-size:9px}.timer{font-size:21px}.table-frame{width:min(calc(100vw - 104px),calc((100svh - 116px)*2));padding:9px;border-radius:22px}.table-frame:before{inset:4px;border-radius:18px}#pool-table{border-radius:14px}.spin-console,.power-console{padding:8px 6px;gap:5px;border-radius:14px}.spin-console{left:3px}.power-console{right:3px}.spin-ball{width:44px;height:44px}#power-gauge{height:120px;width:18px}.control-label{font-size:8px}.game-footer{gap:16px;font-size:8px}.game-footer span:nth-child(2){display:none}}
@media(max-height:480px){.game-shell{grid-template-rows:54px 1fr 20px;gap:5px}.match-hud{width:calc(100vw - 180px);height:54px}.player-panel,.turn-core{height:54px;min-height:0;overflow:hidden}.turn-label{font-size:0;white-space:nowrap}.turn-label:after{content:"TURN";font-size:8px}.timer{font-size:18px;margin-top:0}.player-name{font-size:13px}.table-frame{width:min(calc(100vw - 210px),calc((100svh - 88px)*2));padding:9px}.avatar{width:32px;height:32px;flex-basis:32px}.player-panel{padding:5px 8px}.spin-console{left:10px}.power-console{right:10px}#power-gauge{height:105px}.game-footer{font-size:8px}}