:root{--bg:#061126;--panel:#0b1731;--panel2:#13284d;--line:#38537b;--text:#f7fbff;--muted:#92a8c8;--green:#36e56a;--gold:#ffd24b;--cyan:#42dbe7;--red:#ec334d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030712;color:var(--text);touch-action:none;user-select:none}button,input,select{font:inherit}button{color:inherit}#app,#game{position:fixed;inset:0;width:100%;height:100%}#game{display:block;cursor:crosshair;touch-action:none}.ai-turn #game,.shot-active #game{cursor:default}.ball-in-hand-human #game{cursor:grab}.ball-in-hand-human #game:active{cursor:grabbing}.hidden-text{display:none!important}
.matchbar{position:absolute;z-index:30;top:max(4px,env(safe-area-inset-top));left:6px;right:6px;height:58px;display:grid;grid-template-columns:52px minmax(270px,330px) 152px minmax(270px,330px) 52px;justify-content:center;align-items:center;gap:7px;pointer-events:none}.matchbar>*{pointer-events:auto}
.icon-btn{border:0;cursor:pointer}.menu-btn{width:49px;height:49px;border-radius:9px;display:grid;place-content:center;gap:4px;background:linear-gradient(#2feb62,#0f9b35);border:2px solid #a4ffbb;box-shadow:0 3px 0 #07551d,0 7px 15px #0008,inset 0 1px #fff8}.menu-btn i{display:block;width:26px;height:4px;border-radius:3px;background:#fff}
.player-card{height:54px;display:grid;grid-template-columns:48px 1fr 42px;align-items:center;gap:7px;padding:3px 6px;border-radius:9px;background:linear-gradient(180deg,#142849,#08142b);border:2px solid #35527c;box-shadow:0 4px 0 #020716,0 8px 18px #0008,inset 0 1px #fff1}.player-card.active{border-color:#32e76a;box-shadow:0 0 0 1px #32e76a33,0 4px 0 #020716,0 8px 18px #0009}.player-card.right{grid-template-columns:42px 1fr 48px}.avatar{width:46px;height:46px;border-radius:7px;background:linear-gradient(145deg,#6fd1ff,#1e5596 58%,#13294f);border:2px solid #82edff;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 12px #fff2,0 2px 5px #0008}.avatar.ai{background:linear-gradient(145deg,#ad88ff,#513094 58%,#221c52);border-color:#d2bbff}.avatar b{font-size:11px}.avatar span{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;display:grid;place-items:center;background:#16b850;border:2px solid #d4ffe0;font-size:8px;font-weight:900}.avatar.ai span{background:#704ad3}
.player-copy{min-width:0;display:grid;grid-template-rows:17px 12px 10px;align-items:center}.player-copy>b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-copy small{font-size:6px;color:#93a9c8;letter-spacing:.09em;text-transform:uppercase}.right-copy{text-align:right}.score{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:19px;background:radial-gradient(circle at 35% 28%,#354d6c,#0b1526 60%,#02050a);border:2px solid #7188a6;box-shadow:inset 0 0 0 3px #07111f,0 2px 5px #0009}.pot-rail{display:flex;gap:3px;align-items:center;min-height:10px}.right-copy .pot-rail{justify-content:flex-end}.pot-slot{width:10px;height:10px;border-radius:50%;background:#02060c;border:1px solid #31435e;box-shadow:inset 0 1px 2px #000}.pot-slot.filled{border-color:#d7e2f0}
.mode-center{height:54px;border-radius:10px;display:grid;grid-template-rows:12px 23px 12px;place-items:center;background:linear-gradient(180deg,#263e5b,#0c172a);border:2px solid #d4a62e;box-shadow:0 3px 0 #6a4810,0 7px 16px #0008,inset 0 1px #fff2}.mode-center small{font-size:6px;letter-spacing:.16em;color:#ffd75c;font-weight:1000}.mode-center b{font-size:17px;line-height:1}.mode-center span{font-size:7px;color:#cfddf0;font-weight:800}.spin-trigger{width:49px;height:49px;border:0;background:none;padding:0;cursor:pointer}.mini-ball{width:49px;height:49px;border-radius:50%;display:block;position:relative;background:radial-gradient(circle at 31% 26%,#fff 0 14%,#f7f7f2 28%,#d4d9d5 67%,#7a8582 100%);border:2px solid #dbe8f3;box-shadow:0 4px 0 #273247,0 7px 12px #0007,inset -7px -8px 12px #0002}.mini-ball i{position:absolute;width:8px;height:8px;border-radius:50%;background:#ed3049;border:1px solid #fff;left:20px;top:20px;box-shadow:0 1px 3px #0008}
.power-control{position:absolute;z-index:24;left:7px;top:112px;bottom:18px;width:42px;display:grid;grid-template-rows:28px 1fr;justify-items:center;transition:.2s opacity}.power-control.disabled{opacity:.35;pointer-events:none}.power-value{width:35px;height:22px;border-radius:6px;background:linear-gradient(#d8e2f1,#77869b);border:1px solid #e9f1fb;color:#13213b;display:grid;place-items:center;font-size:9px;font-weight:1000;box-shadow:0 2px 4px #0008}.power-track{width:24px;height:100%;min-height:220px;position:relative;border-radius:10px;background:#071326;border:2px solid #344b6c;box-shadow:inset 0 0 8px #000,0 4px 12px #0007;overflow:hidden;touch-action:none}.power-scale{position:absolute;inset:5px;background:repeating-linear-gradient(to bottom,transparent 0 18px,#48617c 19px 20px)}.power-fill{position:absolute;left:4px;right:4px;top:0;height:0;border-radius:6px;background:linear-gradient(to bottom,#ffe448 0 33%,#ff9a1e 49%,#ef313f 100%);box-shadow:0 0 8px #ffac32aa}.power-knob{position:absolute;left:50%;top:0;width:31px;height:12px;border-radius:5px;transform:translate(-50%,-4px);background:linear-gradient(#e4edf8,#7b899d 55%,#374357);border:1px solid #fff;box-shadow:0 2px 4px #0009}.power-right .power-control{left:auto;right:7px}.power-right .aim-wheel{right:auto;left:7px}.power-right .cue-card{right:auto;left:7px}
.aim-wheel{position:absolute;z-index:24;right:8px;bottom:12px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#2e415d 0 24%,#111a2a 27% 52%,#7a899e 54% 57%,#0a1020 60%);border:2px solid #91a2b8;box-shadow:0 4px 0 #03060c,0 8px 16px #0008,inset 0 0 9px #fff1}.aim-wheel.disabled{opacity:.35;pointer-events:none}.aim-wheel.hidden-control{display:none}.aim-wheel-disc{width:49px;height:49px;border-radius:50%;position:relative;cursor:ew-resize;touch-action:none}.aim-ticks{position:absolute;inset:1px;border-radius:50%;background:repeating-conic-gradient(#dfe9f7 0 1deg,transparent 1deg 12deg);mask:radial-gradient(circle,transparent 0 67%,#000 69%)}.aim-core{position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7f8ea2,#263247 54%,#0f1623);border:1px solid #7c899b}.aim-core i{position:absolute;left:50%;top:-7px;width:2px;height:11px;background:#fff;transform:translateX(-50%);transform-origin:50% 22px}.cue-card{position:absolute;z-index:24;right:8px;top:82px;width:45px;height:45px;border-radius:8px;border:2px solid #b6d5ff;background:linear-gradient(145deg,#1ebee9,#1166a5 58%,#12366d);box-shadow:0 3px 0 #061d45,0 6px 12px #0007;display:grid;place-items:center}.cue-card span{width:34px;height:5px;border-radius:4px;background:linear-gradient(90deg,#f3e4b4 0 42%,#42dbe7 43% 58%,#f5c844 59% 69%,#183376 70%);transform:rotate(-35deg);box-shadow:0 1px 2px #0008}
.toast{position:absolute;z-index:60;left:50%;top:64px;transform:translate(-50%,-6px);padding:7px 13px;border-radius:8px;background:#050b18ee;border:1px solid #506b93;font-size:9px;font-weight:900;letter-spacing:.04em;opacity:0;transition:.15s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.toast[data-type=foul]{border-color:#df3f58;color:#ffd9df}.toast[data-type=win]{border-color:#d3a635;color:#ffe8a2}.ball-in-hand{position:absolute;z-index:35;left:50%;top:65px;transform:translateX(-50%);padding:5px 10px;border-radius:9px;background:#0d7138;border:1px solid #65ed8d;font-size:8px;font-weight:1000;opacity:0}.ball-in-hand.show{opacity:1}.ball-in-hand.ai-owned{background:#5d3f10;border-color:#f0c85a;color:#fff0b0}.turn-dot{display:none}
.spin-panel{position:absolute;z-index:70;right:7px;top:64px;width:174px;padding:12px;border-radius:13px;background:linear-gradient(#1d3359,#091328 72%,#040811);border:2px solid #526f9d;box-shadow:0 18px 38px #000b;opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;transition:.15s}.spin-panel.open{opacity:1;transform:none;pointer-events:auto}.spin-panel>small{display:block;text-align:center;font-size:7px;font-weight:1000;letter-spacing:.14em;color:#b8cae4;margin-bottom:8px}.spin-pad{width:130px;height:130px;margin:auto;border-radius:50%;position:relative;background:radial-gradient(circle at 30% 25%,#fff 0 12%,#f8f8f4 30%,#d5dad6 66%,#7c8682 100%);border:2px solid #dce9f3;box-shadow:inset -9px -10px 15px #0002,0 8px 16px #0008;touch-action:none}.spin-pad .cross{position:absolute;background:#253a4350}.spin-pad .h{left:10%;right:10%;top:50%;height:1px}.spin-pad .v{top:10%;bottom:10%;left:50%;width:1px}.spin-pad i{position:absolute;width:15px;height:15px;margin:-7.5px;left:50%;top:50%;border-radius:50%;background:#ed3049;border:2px solid #fff;box-shadow:0 2px 4px #0008}.spin-panel>b{display:block;text-align:center;margin-top:7px;font-size:8px;color:#cad7e9}.spin-panel button{display:block;margin:7px auto 0;padding:6px 13px;border-radius:7px;border:1px solid #587199;background:#142847;font-size:7px;font-weight:1000}.power-right .spin-panel{right:7px}
.scrim{position:absolute;z-index:75;inset:0;background:#01040a99;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.15s}.scrim.show{opacity:1;pointer-events:auto}.menu-panel{position:absolute;z-index:80;left:8px;top:8px;bottom:8px;width:min(330px,calc(100vw - 16px));padding:16px;border-radius:13px;background:linear-gradient(#20385f,#0b1730 72%,#050b18);border:2px solid #536e9a;box-shadow:0 24px 60px #000c;display:flex;flex-direction:column;gap:10px;transform:translateX(calc(-100% - 24px));transition:.2s}.menu-panel.open{transform:none}.menu-head{display:flex;justify-content:space-between;align-items:center}.menu-head small{font-size:7px;letter-spacing:.14em;color:#93acd0}.menu-head h2{margin:2px 0 0}.close-btn{width:31px;height:31px;border-radius:7px;border:1px solid #5d759e;background:#142641;font-size:20px}.menu-panel label{display:grid;gap:4px;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#9eb2d2}.menu-panel select{appearance:none;border:1px solid #486189;border-radius:8px;background:#071225;color:#fff;padding:9px}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:8px 9px;border:1px solid #304b76;border-radius:8px;background:#0e203d;font-size:9px}.primary-btn,.secondary-btn{padding:10px;border-radius:8px;font-size:9px;font-weight:1000;letter-spacing:.08em;cursor:pointer}.primary-btn{margin-top:auto;background:linear-gradient(#30e45b,#118d2e);border:2px solid #8cf2a0;box-shadow:0 3px #07501a}.secondary-btn{background:#152d50;border:1px solid #536e98}
.mode-hub{position:absolute;z-index:120;inset:0;display:grid;grid-template-rows:auto 1fr auto;align-items:center;padding:42px clamp(28px,7vw,120px) 34px;background:radial-gradient(circle at 50% 18%,#243f70 0,#0d2145 34%,#050d1e 70%,#02050d 100%);opacity:0;pointer-events:none;transition:.2s}.mode-hub.show{opacity:1;pointer-events:auto}.hub-top{display:flex;align-items:center;gap:13px}.hub-mark{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#52e8f0,#137399 60%,#163e74);border:2px solid #a8fbff;box-shadow:0 5px 14px #0009;font-weight:1000}.hub-top small{font-size:7px;letter-spacing:.19em;color:#8fafd3}.hub-top h1{margin:1px 0 0;font-size:28px;letter-spacing:.06em}.mode-cards{width:min(100%,1080px);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mode-card{height:250px;border-radius:20px;border:2px solid #3e5d88;background:linear-gradient(160deg,#142b52,#08162f 62%,#030814);box-shadow:0 12px 30px #000a,inset 0 1px #fff1;display:grid;place-content:center;place-items:center;gap:13px;cursor:pointer;transition:.18s transform,.18s border-color,.18s box-shadow}.mode-card:hover{transform:translateY(-5px);border-color:#6ee6f0;box-shadow:0 18px 38px #000c,0 0 28px #42dbe722}.mode-card b{font-size:24px;letter-spacing:.08em}.mode-card small{color:#95acca;font-size:9px}.mode-balls{display:flex;align-items:end;gap:3px;height:76px}.mode-balls i{display:block;width:43px;height:43px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0 10%,#e8334c 22%,#b2182d 70%,#5b0713);box-shadow:0 8px 10px #0008}.mode-balls i:nth-child(2){width:56px;height:56px;background:radial-gradient(circle at 30% 25%,#fff 0 10%,#171b20 22%,#030507 72%,#000)}.mode-balls i:nth-child(3){width:48px;height:48px;background:radial-gradient(circle at 30% 25%,#fff 0 10%,#2477cc 22%,#124171 72%,#061523)}.mode-ball{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:1000;color:#111;background:radial-gradient(circle at 30% 24%,#fff 0 11%,#14181f 20%,#020408 75%);border:1px solid #888;box-shadow:0 10px 14px #0009;position:relative}.mode-ball::before{content:"";position:absolute;width:33px;height:33px;border-radius:50%;background:#f7f7f2;z-index:0}.mode-ball{color:#111}.mode-ball{isolation:isolate}.mode-ball::before{z-index:-0}.mode-ball{background-color:#111}.nine-ball{background:linear-gradient(#f5d326 0 31%,#f8f7f0 31% 69%,#f5d326 69%)}.hub-foot{display:flex;justify-content:space-between;align-items:center;color:#849bc0;font-size:8px;letter-spacing:.12em}.hub-foot label{display:flex;align-items:center;gap:7px;letter-spacing:0}.versus-intro{position:absolute;z-index:100;inset:0;display:grid;place-items:center;background:#02071455;backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.15s}.versus-intro.show{opacity:1}.vs-card{display:flex;align-items:center;gap:18px}.vs-card b{font-size:22px;color:#ffd24a}.vs-avatar{width:62px;height:62px;border-radius:10px;display:grid;place-items:center;background:#166e9a;border:3px solid #51e86d;font-weight:1000}.vs-avatar.ai{background:#56319a;border-color:#f6c84b}.versus-intro em{position:absolute;top:calc(50% + 55px);font-size:8px;letter-spacing:.13em;color:#c6d4e8;font-style:normal}.help-panel,.quick-help{display:none!important}.rotate-device{display:none}
body[data-mode="8ball"] .mode-center{border-color:#e7c33d}body[data-mode="9ball"] .mode-center{border-color:#f0d33b}body[data-mode="snooker"] .mode-center{border-color:#44db9d}
@media(max-width:1050px){.matchbar{grid-template-columns:44px minmax(210px,260px) 112px minmax(210px,260px) 44px;gap:4px}.menu-btn,.spin-trigger,.mini-ball{width:42px;height:42px}.player-card{height:47px;grid-template-columns:40px 1fr 32px}.player-card.right{grid-template-columns:32px 1fr 40px}.avatar{width:39px;height:39px}.score{width:30px;height:30px;font-size:15px}.mode-center{height:47px}.mode-center b{font-size:14px}.player-copy>b{font-size:10px}.pot-slot{width:8px;height:8px}.power-control{top:100px;width:38px}.cue-card{width:39px;height:39px}.mode-card{height:190px}.mode-card b{font-size:19px}}
@media(max-height:650px){.matchbar{height:48px;top:2px}.power-control{top:94px;bottom:9px}.mode-hub{padding-top:22px;padding-bottom:18px}.mode-card{height:175px}.hub-top h1{font-size:22px}.mode-ball{width:62px;height:62px}.aim-wheel{width:54px;height:54px}.aim-wheel-disc{width:43px;height:43px}}
@media(orientation:portrait) and (max-width:820px){.rotate-device{position:absolute;z-index:200;inset:0;display:grid;place-content:center;place-items:center;gap:12px;background:linear-gradient(#173260,#050b18)}.rotate-device div{width:55px;height:80px;border:3px solid #c7d7ee;border-radius:12px;display:grid;place-items:center;font-size:28px;animation:r 1.8s ease-in-out infinite}.rotate-device b{font-size:11px;letter-spacing:.15em}@keyframes r{50%{transform:rotate(90deg)}}}

/* v4.4 mode identity: one coherent shell, distinct premium accents per discipline. */
body{--mode-accent:#38e5a0;--mode-accent-soft:#174e42;--mode-glow:#38e5a044;--mode-hot:#5fffc0}
body[data-mode="8ball"]{--mode-accent:#b990ff;--mode-accent-soft:#32245e;--mode-glow:#9b6cff44;--mode-hot:#e0cbff}
body[data-mode="9ball"]{--mode-accent:#ffd84b;--mode-accent-soft:#5c4816;--mode-glow:#ffd84b44;--mode-hot:#fff0a6}
.player-card.active{border-color:var(--mode-accent);box-shadow:0 0 0 1px var(--mode-glow),0 4px 0 #020716,0 8px 18px #0009,inset 0 1px #fff1}
.mode-center{border-color:var(--mode-accent);box-shadow:0 3px 0 color-mix(in srgb,var(--mode-accent) 48%,#211500),0 7px 16px #0008,inset 0 1px #fff2}
.mode-center small{color:var(--mode-hot)}
body[data-mode="8ball"] .cue-card{background:linear-gradient(145deg,#8a65dc,#443087 58%,#1d164d);border-color:#d4c2ff}
body[data-mode="9ball"] .cue-card{background:linear-gradient(145deg,#f6d22e,#c78315 58%,#50320d);border-color:#fff0a8}
body[data-mode="8ball"] .power-fill{filter:hue-rotate(34deg) saturate(.9)}
body[data-mode="9ball"] .power-fill{filter:saturate(1.08) brightness(1.03)}
.pot-slot.filled{position:relative;display:grid;place-items:center;color:#10131a;font:900 5.5px/1 Arial;text-shadow:0 1px #fff9}
.pot-slot.filled[data-number]::after{content:attr(data-number);position:relative;z-index:2;width:6px;height:6px;border-radius:50%;display:grid;place-items:center;background:#f7f6ef;font-size:4.5px}
.pot-slot.filled.stripe{box-shadow:inset 0 3px #f7f6ef,inset 0 -3px #f7f6ef,0 0 4px #0008}
body[data-mode="8ball"] .mode-center b::before{content:"8 • ";color:#fff}
body[data-mode="9ball"] .mode-center b::before{content:"9 • ";color:#ffd84b}
.mode-card.snooker:hover{border-color:#48e3a5}.mode-card.eight:hover{border-color:#b990ff}.mode-card.nine:hover{border-color:#ffd84b}

/* Online Friends — v5 */
.network-badge{position:absolute;right:78px;top:11px;z-index:18;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(3,12,25,.82);font:800 9px/1 Arial;color:#8da0b3;letter-spacing:.08em;pointer-events:none}.network-badge.online{color:#79ffd2;border-color:rgba(68,255,190,.32);box-shadow:0 0 18px rgba(27,255,174,.1)}
.online-hub-btn{border:0;border-radius:12px;padding:10px 18px;background:linear-gradient(180deg,#23e9ab,#0cac83);box-shadow:0 7px 20px rgba(0,216,159,.23),inset 0 1px rgba(255,255,255,.35);color:#041f19;font:1000 11px Arial;letter-spacing:.08em;cursor:pointer}.online-hub-btn:hover{filter:brightness(1.08)}
.online-panel{position:fixed;inset:0;z-index:120;display:none;place-items:center;background:rgba(1,7,17,.77);backdrop-filter:blur(10px)}.online-panel.open{display:grid}.online-card{width:min(430px,calc(100vw - 28px));border-radius:22px;border:1px solid rgba(105,227,255,.24);background:linear-gradient(180deg,rgba(16,38,67,.98),rgba(5,17,33,.98));box-shadow:0 28px 80px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.08);padding:20px}.online-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}.online-head small{color:#55ebc7;font:900 9px Arial;letter-spacing:.13em}.online-head h2{margin:4px 0 0;color:#fff;font:1000 24px Arial}.online-note{margin:0 0 16px;color:#9eb0c6;font:600 12px/1.45 Arial}.online-card label{display:grid;gap:6px;color:#9fb3c8;font:900 9px Arial;letter-spacing:.09em;margin:10px 0}.online-card input,.online-card select{height:42px;border-radius:10px;border:1px solid rgba(126,171,210,.24);background:#07182b;color:#fff;padding:0 12px;font:800 13px Arial;outline:none}.online-card input:focus,.online-card select:focus{border-color:#42e7bd;box-shadow:0 0 0 3px rgba(66,231,189,.10)}.online-create{width:100%;height:44px;margin-top:4px}.online-divider{display:flex;align-items:center;gap:10px;color:#61768e;font:900 9px Arial;letter-spacing:.12em;margin:14px 0}.online-divider:before,.online-divider:after{content:"";height:1px;background:rgba(255,255,255,.09);flex:1}.join-row{display:grid;grid-template-columns:1fr 104px;gap:9px}.join-row button{height:42px;margin:0}.room-code-box{margin-top:14px;padding:12px;border-radius:14px;background:rgba(4,14,29,.72);border:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 10px}.room-code-box small{grid-column:1;color:#6f849a;font:900 8px Arial;letter-spacing:.12em}.room-code-box strong{font:1000 24px Arial;letter-spacing:.16em;color:#fff}.room-code-box button{grid-column:2;grid-row:1/3;margin:0;padding:8px 12px}.online-waiting{min-height:16px;margin-top:12px;text-align:center;color:#7ce8c9;font:900 9px Arial;letter-spacing:.11em}.online-leave{display:block;margin:12px auto 0;border:0;background:none;color:#728399;font:800 10px Arial;cursor:pointer}.online-leave:hover{color:#ff7f8f}
.online-match #restart{border-color:rgba(78,238,195,.28)}.online-match .mode-center{box-shadow:0 0 0 1px rgba(67,235,188,.16),0 5px 18px rgba(0,0,0,.25)}
@media(max-width:900px){.network-badge{right:64px;top:8px;font-size:7px;padding:5px 7px}.online-card{padding:15px}.online-head h2{font-size:19px}.room-code-box strong{font-size:20px}}

/* v5.1 premium match result / next-match navigation */
.result-panel{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(28,118,146,.22),rgba(2,8,20,.86) 48%,rgba(1,5,14,.96));backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.result-panel.show{opacity:1;visibility:visible;pointer-events:auto}
.result-card{position:relative;width:min(520px,88vw);padding:34px 34px 28px;border:1px solid rgba(115,232,255,.30);border-radius:28px;text-align:center;overflow:hidden;background:linear-gradient(180deg,rgba(14,41,67,.97),rgba(5,18,34,.98));box-shadow:0 28px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.result-glow{position:absolute;inset:-50% 15% auto;height:260px;background:radial-gradient(circle,rgba(55,225,211,.30),transparent 67%);pointer-events:none}
.result-card small{position:relative;display:block;color:#70e9df;font:800 11px/1.2 Arial;letter-spacing:.22em}
.result-card h2{position:relative;margin:8px 0 2px;color:#fff;font:1000 clamp(34px,6vw,62px)/1 Arial;letter-spacing:.04em;text-shadow:0 0 28px rgba(70,236,220,.20)}
.result-card p{position:relative;margin:9px 0 14px;color:#b9cad8;font:700 14px/1.4 Arial}
.result-card>strong{position:relative;display:block;margin:4px 0 24px;color:#f7fbff;font:900 25px/1 Arial;letter-spacing:.18em}
.result-actions{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:10px}
.result-actions .primary-btn,.result-actions .secondary-btn{min-height:48px;border-radius:14px}
.result-actions .primary-btn:disabled{opacity:.62;cursor:wait}
.result-view{grid-column:1/-1;border:0;background:transparent;color:#8ba2b5;font:800 11px Arial;letter-spacing:.14em;padding:9px;cursor:pointer}
.result-view:hover{color:#dff7ff}
body.online-match:not(.shot-active) .network-badge.online{box-shadow:0 0 0 1px rgba(75,255,204,.18),0 0 18px rgba(47,227,185,.14)}
@media(max-width:760px){.result-card{padding:24px 20px 20px;border-radius:22px}.result-actions{grid-template-columns:1fr}.result-view{grid-column:auto}.result-card h2{font-size:36px}}

/* v5.3 premium 2.5D presentation rebuild */
:root{
  --glass:rgba(10,25,46,.86);--glass2:rgba(19,46,78,.92);--chrome:#9edfff;--gold2:#ffd978;
  --deep:#020611;--cyan2:#29dfff;--green2:#4aff95;--violet2:#b98cff;
}
body{background:radial-gradient(circle at 50% 0,#173c66 0,#07172e 34%,#020712 75%,#010309 100%)}
#app:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:
  radial-gradient(circle at 50% 15%,rgba(111,220,255,.10),transparent 35%),
  linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px;mix-blend-mode:screen}
#game{filter:saturate(1.13) contrast(1.035)}

.matchbar{height:62px;grid-template-columns:54px minmax(278px,342px) 160px minmax(278px,342px) 54px;gap:8px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.48))}
.player-card,.mode-center,.menu-btn,.spin-trigger .mini-ball{position:relative;overflow:hidden}
.player-card:before,.mode-center:before,.menu-btn:before{content:"";position:absolute;left:-25%;top:-80%;width:45%;height:240%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);pointer-events:none;opacity:.65}
.player-card{height:57px;border-radius:13px;border:1px solid rgba(133,193,236,.42);background:
  linear-gradient(180deg,rgba(33,72,113,.96),rgba(8,24,47,.98) 58%,rgba(3,11,25,.99)),
  repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px);
  box-shadow:0 2px 0 rgba(173,227,255,.22),0 6px 0 rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.18),inset 0 -12px 24px rgba(0,0,0,.16)}
.player-card:after{content:"";position:absolute;inset:3px;border-radius:10px;border:1px solid rgba(255,255,255,.055);pointer-events:none}
.player-card.active{border-color:var(--mode-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--mode-accent) 55%,transparent),0 0 22px var(--mode-glow),0 6px 0 rgba(0,0,0,.50),0 12px 28px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.20)}
.player-card.active:before{animation:hudSweep 2.8s ease-in-out infinite}
@keyframes hudSweep{0%,58%{transform:translateX(-160%) rotate(24deg)}100%{transform:translateX(420%) rotate(24deg)}}
.avatar{border-radius:11px;border-width:1px;background:
  radial-gradient(circle at 35% 25%,rgba(255,255,255,.38),transparent 19%),
  linear-gradient(145deg,#4dd9ff,#1d74b8 54%,#142d65 75%,#07152d);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.10),inset 0 -10px 20px rgba(0,0,0,.24),0 4px 9px rgba(0,0,0,.45),0 0 15px rgba(71,207,255,.18)}
.avatar.ai{background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.42),transparent 19%),linear-gradient(145deg,#c59bff,#7650d8 55%,#382775 76%,#160d38)}
.avatar b{font-size:12px;text-shadow:0 2px 4px #0008}.avatar span{box-shadow:0 2px 5px #0009,inset 0 1px rgba(255,255,255,.5)}
.player-copy>b{font-size:12px;letter-spacing:.015em;text-shadow:0 2px 4px #0008}.player-copy small{color:#9fc2e5;font-weight:900}
.score{border:1px solid rgba(193,228,255,.58);background:radial-gradient(circle at 34% 25%,#6284a8 0,#1b314d 32%,#071426 65%,#01040a 100%);box-shadow:inset 0 0 0 3px rgba(3,13,27,.9),inset 0 2px 7px rgba(255,255,255,.16),0 4px 9px #0009,0 0 14px rgba(65,173,255,.13);text-shadow:0 2px 4px #000}
.pot-slot{border-color:#385978;background:radial-gradient(circle at 35% 30%,#112940,#020812 75%);box-shadow:inset 0 2px 3px #000b,0 1px rgba(255,255,255,.06)}
.pot-slot.filled{border-color:#dff7ff;box-shadow:0 0 5px rgba(124,221,255,.22),inset 0 1px rgba(255,255,255,.28)}
.mode-center{height:57px;border-radius:14px;background:linear-gradient(180deg,rgba(47,75,108,.97),rgba(13,29,52,.98) 58%,rgba(4,12,25,.99));border:1px solid var(--mode-accent);box-shadow:0 2px 0 color-mix(in srgb,var(--mode-accent) 32%,transparent),0 6px 0 rgba(0,0,0,.45),0 12px 28px #0008,inset 0 1px rgba(255,255,255,.17),inset 0 -12px 20px rgba(0,0,0,.18)}
.mode-center:after{content:"";position:absolute;left:12%;right:12%;bottom:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--mode-accent),transparent);box-shadow:0 0 10px var(--mode-accent)}
.mode-center small{font-size:6.5px}.mode-center b{font-size:18px;text-shadow:0 2px 5px #000}.mode-center span{color:#d9e9f6}
.menu-btn{border-radius:12px;background:linear-gradient(180deg,#54ff83 0,#20d558 45%,#0d8d35 100%);border:1px solid #b9ffc9;box-shadow:0 2px 0 rgba(255,255,255,.34),0 5px 0 #07571f,0 10px 20px #0008,inset 0 -8px 12px rgba(0,0,0,.15)}
.menu-btn i{height:3px;box-shadow:0 1px 2px #07511d}
.spin-trigger{filter:drop-shadow(0 8px 10px #0007)}
.mini-ball{border:1px solid #effbff;background:radial-gradient(circle at 29% 24%,#fff 0 9%,#fff 12%,#f5f8f6 30%,#cbd7d5 62%,#70817e 86%,#2b3636 100%);box-shadow:inset -8px -10px 15px #0004,inset 5px 5px 8px #fff5,0 3px 0 #273247,0 7px 12px #0008}
.mini-ball:after{content:"";position:absolute;left:10px;top:8px;width:16px;height:8px;border-radius:50%;background:rgba(255,255,255,.72);transform:rotate(-28deg);filter:blur(.4px)}

.power-control{width:48px;grid-template-rows:31px 1fr;filter:drop-shadow(0 8px 16px #0008)}
.power-value{width:40px;height:25px;border-radius:9px;border:1px solid rgba(221,244,255,.9);background:linear-gradient(180deg,#f8fdff,#aac1d4 42%,#60738a 100%);box-shadow:inset 0 1px #fff,0 3px 7px #0009;color:#081a2f;text-shadow:0 1px #fff8}
.power-track{width:30px;border-radius:14px;border:1px solid #6483a3;background:linear-gradient(90deg,#020712,#10233a 40%,#071526 62%,#02060d);box-shadow:inset 0 0 0 3px #020916,inset 0 0 15px #000,0 3px 0 #02101f,0 8px 18px #0009;overflow:visible}
.power-track:before{content:"";position:absolute;inset:4px 6px;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.10),transparent 34%,rgba(255,255,255,.04));border:1px solid rgba(139,196,229,.10)}
.power-scale{inset:7px 5px;background:repeating-linear-gradient(to bottom,transparent 0 16px,rgba(191,229,255,.34) 17px 18px)}
.power-fill{left:7px;right:7px;border-radius:8px;background:linear-gradient(to bottom,#fff66a 0 23%,#ffd52d 34%,#ff9d1f 58%,#ff542c 78%,#f41e42 100%);box-shadow:0 0 7px #ffe737,0 0 14px #ff9e29aa,inset 0 0 4px #fff6}
.power-knob{width:38px;height:14px;border-radius:6px;background:linear-gradient(#fff,#c6d8e5 32%,#71889c 67%,#2c3a49);border:1px solid #f8ffff;box-shadow:0 2px 0 #192432,0 5px 7px #0009,inset 0 1px #fff}
.power-knob:before,.power-knob:after{content:"";position:absolute;top:4px;width:8px;height:4px;border-radius:2px;background:#263c50}.power-knob:before{left:4px}.power-knob:after{right:4px}

.aim-wheel{width:70px;height:70px;border:1px solid #b4d7ef;background:conic-gradient(from 0deg,#273e55,#101b2a 18%,#809bb1 24%,#132131 31%,#41586d 50%,#101b2a 68%,#829db4 75%,#162435 83%,#273e55);box-shadow:0 4px 0 #02060d,0 10px 24px #0009,inset 0 0 0 3px #07111e,inset 0 0 12px #fff2}
.aim-wheel:after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(122,214,255,.30);box-shadow:inset 0 0 10px #000}
.aim-wheel-disc{width:55px;height:55px}.aim-ticks{background:repeating-conic-gradient(#f0f8ff 0 1deg,transparent 1deg 9deg)}
.aim-core{inset:11px;background:radial-gradient(circle at 34% 28%,#9eb2c6,#40536a 38%,#172435 68%,#060c15);border-color:#90a9be;box-shadow:inset 0 2px 5px #fff2,0 2px 6px #0009}
.aim-core i{background:#8ff0ff;box-shadow:0 0 6px #65e5ff}
.cue-card{width:49px;height:49px;border-radius:12px;border:1px solid #c9efff;background:linear-gradient(145deg,#39d9ff,#1386c3 46%,#154c89 68%,#071c3f);box-shadow:0 2px 0 #7de9ff55,0 4px 0 #061d45,0 9px 18px #0008,inset 0 1px #fff5}
.cue-card:before{content:"";position:absolute;inset:4px;border-radius:9px;border:1px solid rgba(255,255,255,.11)}
.cue-card span{height:6px;background:linear-gradient(90deg,#f8e8b4 0 34%,#fff4d7 35% 40%,#4dcce9 41% 48%,#b7dce9 49% 52%,#f6cb48 53% 59%,#8e3d26 60% 73%,#24172f 74%);box-shadow:0 2px 3px #0009,0 -1px rgba(255,255,255,.5)}

.spin-panel{width:190px;padding:14px;border-radius:18px;border:1px solid rgba(133,202,241,.58);background:linear-gradient(180deg,rgba(31,64,101,.98),rgba(8,23,44,.99) 60%,rgba(2,8,18,.99));box-shadow:0 3px 0 rgba(126,213,255,.16),0 22px 54px #000d,inset 0 1px #fff2}
.spin-panel:before{content:"";position:absolute;inset:5px;border-radius:13px;border:1px solid rgba(255,255,255,.05);pointer-events:none}
.spin-pad{width:142px;height:142px;border:1px solid #eff9ff;background:radial-gradient(circle at 27% 22%,#fff 0 8%,#fff 11%,#f7faf7 27%,#d1ddda 59%,#7c8c89 82%,#344240 100%);box-shadow:inset -13px -16px 21px #0004,inset 8px 8px 14px #fff5,0 7px 0 #263747,0 13px 22px #0009}
.spin-pad:after{content:"";position:absolute;left:25px;top:17px;width:44px;height:18px;border-radius:50%;background:rgba(255,255,255,.42);transform:rotate(-31deg);filter:blur(1px);pointer-events:none}
.spin-pad i{width:16px;height:16px;border:2px solid white;background:radial-gradient(circle at 32% 28%,#ff8b94,#ed3049 45%,#9d1026);box-shadow:0 0 0 2px rgba(255,57,84,.18),0 3px 6px #0009}

.toast{border-radius:12px;background:linear-gradient(180deg,rgba(17,42,70,.96),rgba(3,11,24,.98));border-color:rgba(105,185,230,.55);box-shadow:0 8px 26px #0009,inset 0 1px #fff2}
.ball-in-hand{border-radius:12px;box-shadow:0 4px 14px #0008,inset 0 1px #fff3}

.menu-panel{border-radius:20px;border:1px solid rgba(112,191,239,.55);background:linear-gradient(180deg,rgba(28,63,103,.99),rgba(7,22,43,.995) 55%,rgba(2,8,18,.998));box-shadow:0 3px 0 rgba(97,185,236,.15),0 28px 70px #000d,inset 0 1px #fff2}
.menu-panel:before{content:"";position:absolute;inset:5px;border-radius:15px;border:1px solid rgba(255,255,255,.05);pointer-events:none}
.menu-panel label,.toggle-row{position:relative}.menu-panel select,.menu-panel input[type=range]{filter:saturate(1.18)}
.primary-btn{border:1px solid #a8ffe0!important;background:linear-gradient(180deg,#52ffc0,#1ce5a1 45%,#0a9d72)!important;color:#031d18!important;box-shadow:0 2px 0 #afffe5aa,0 4px 0 #06654b,0 9px 18px #0007,inset 0 1px #fff9!important;text-shadow:0 1px #fff7}
.secondary-btn{border:1px solid rgba(143,202,239,.62)!important;background:linear-gradient(180deg,#294f75,#153453 55%,#0a1c33)!important;box-shadow:0 2px 0 rgba(170,224,255,.15),0 4px 0 #061322,0 8px 16px #0007,inset 0 1px #fff2!important}
.primary-btn:hover,.secondary-btn:hover,.online-hub-btn:hover{filter:brightness(1.12) saturate(1.08)}

.mode-hub{background:
 radial-gradient(circle at 50% 23%,rgba(50,179,255,.26),transparent 34%),
 linear-gradient(180deg,#102d50 0,#06162c 45%,#020712 100%)}
.mode-hub:before{content:"";position:absolute;inset:0;background:
 linear-gradient(90deg,transparent 49.9%,rgba(126,208,255,.045) 50%,transparent 50.1%),
 repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.018) 32px);pointer-events:none}
.hub-top{position:relative;z-index:1}.hub-mark{box-shadow:0 0 0 2px rgba(255,255,255,.08),0 8px 24px #0008,inset 0 1px #fff4}
.hub-top h1{text-shadow:0 3px 8px #000,0 0 28px rgba(70,201,255,.18)}
.mode-cards{position:relative;z-index:1;perspective:900px}
.mode-card{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(119,184,227,.34);background:linear-gradient(180deg,rgba(32,70,112,.94),rgba(7,24,48,.98) 56%,rgba(3,11,24,.99));box-shadow:0 3px 0 rgba(104,191,239,.10),0 12px 0 rgba(0,0,0,.20),0 24px 42px #0007,inset 0 1px rgba(255,255,255,.14);transform:translateZ(0);transition:.20s transform,.20s filter,.20s border-color}
.mode-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 10%,rgba(255,255,255,.16),transparent 37%),linear-gradient(120deg,transparent 30%,rgba(255,255,255,.06) 45%,transparent 60%);pointer-events:none}
.mode-card:after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--mode-accent),transparent);filter:blur(.2px);opacity:.75}
.mode-card:hover{transform:translateY(-7px) scale(1.018);filter:saturate(1.13) brightness(1.08);box-shadow:0 4px 0 rgba(104,191,239,.12),0 16px 0 rgba(0,0,0,.16),0 32px 54px #0008,inset 0 1px rgba(255,255,255,.17)}
.mode-card.snooker{background:radial-gradient(circle at 50% 28%,rgba(36,235,143,.20),transparent 35%),linear-gradient(180deg,#184d4a,#092d2f 55%,#04171d)}
.mode-card.eight{background:radial-gradient(circle at 50% 28%,rgba(180,124,255,.22),transparent 35%),linear-gradient(180deg,#3a386f,#1c2551 55%,#0b102a)}
.mode-card.nine{background:radial-gradient(circle at 50% 28%,rgba(255,219,73,.21),transparent 35%),linear-gradient(180deg,#604b24,#30331d 55%,#14170e)}
.mode-card b{font-size:25px;text-shadow:0 3px 8px #000}.mode-card small{color:#bcd2e6}
.mode-ball{box-shadow:inset -12px -14px 18px rgba(0,0,0,.28),inset 9px 8px 13px rgba(255,255,255,.20),0 10px 18px #0007,0 0 20px rgba(255,255,255,.08)}
.mode-ball:after{content:"";position:absolute;left:15px;top:11px;width:25px;height:11px;border-radius:50%;background:rgba(255,255,255,.45);transform:rotate(-30deg)}
.online-hub-btn{border:1px solid #a8ffe1;border-radius:14px;padding:11px 20px;background:linear-gradient(180deg,#58ffc4,#18dda0 52%,#0a9a72);box-shadow:0 2px 0 #c6ffec88,0 5px 0 #06634a,0 11px 24px #0008,inset 0 1px #fff8}

.online-panel{background:radial-gradient(circle at 50% 35%,rgba(37,155,220,.22),rgba(1,7,17,.88) 52%,rgba(0,2,8,.97));backdrop-filter:blur(13px)}
.online-card{position:relative;border-radius:26px;border:1px solid rgba(108,215,255,.47);background:linear-gradient(180deg,rgba(24,59,96,.985),rgba(6,22,44,.995) 58%,rgba(2,9,20,.998));box-shadow:0 3px 0 rgba(115,215,255,.14),0 32px 90px rgba(0,0,0,.68),inset 0 1px rgba(255,255,255,.14)}
.online-card:before{content:"";position:absolute;inset:6px;border-radius:20px;border:1px solid rgba(255,255,255,.05);pointer-events:none}
.online-head h2{text-shadow:0 3px 8px #000}.online-card input,.online-card select{border-radius:12px;border-color:rgba(128,204,245,.34);background:linear-gradient(180deg,#0a2039,#06162a);box-shadow:inset 0 2px 5px #0007,inset 0 1px rgba(255,255,255,.04)}
.room-code-box{border-radius:18px;background:radial-gradient(circle at 25% 20%,rgba(62,170,220,.10),transparent 45%),linear-gradient(180deg,rgba(8,29,52,.9),rgba(3,13,27,.94));border-color:rgba(104,194,238,.25);box-shadow:inset 0 1px rgba(255,255,255,.05),0 6px 16px #0005}
.room-code-box strong{text-shadow:0 0 18px rgba(81,222,255,.18)}

.result-panel{background:radial-gradient(circle at 50% 38%,rgba(48,201,229,.25),rgba(2,8,20,.88) 45%,rgba(0,2,8,.98));backdrop-filter:blur(12px)}
.result-card{border-radius:30px;border:1px solid rgba(127,226,255,.50);background:linear-gradient(180deg,rgba(27,65,101,.985),rgba(6,22,43,.995) 57%,rgba(2,9,20,.998));box-shadow:0 3px 0 rgba(113,221,255,.14),0 34px 100px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.15)}
.result-card:before{content:"★";position:absolute;left:50%;top:19px;transform:translateX(-50%);font-size:22px;color:#ffe58a;text-shadow:0 0 18px #ffc83f88}
.result-card h2{margin-top:30px;text-shadow:0 3px 8px #000,0 0 30px rgba(70,236,220,.28)}
.result-glow{height:310px;background:radial-gradient(circle,rgba(73,225,255,.34),transparent 66%)}

.versus-intro{background:radial-gradient(circle at 50% 50%,rgba(31,139,203,.22),rgba(2,7,20,.84) 55%,rgba(0,2,8,.96));backdrop-filter:blur(5px)}
.vs-avatar{border-radius:16px;box-shadow:0 8px 20px #0008,inset 0 1px #fff4}.vs-card b{text-shadow:0 0 16px #ffd24a77}

@media(max-width:1050px){.matchbar{grid-template-columns:44px minmax(210px,270px) 118px minmax(210px,270px) 44px}.player-card,.mode-center{height:49px}.aim-wheel{width:60px;height:60px}.aim-wheel-disc{width:47px;height:47px}.power-track{width:27px}.power-control{width:44px}}
@media(max-height:650px){.matchbar{height:50px}.player-card,.mode-center{height:47px}.mode-card{height:178px}.spin-panel{transform-origin:top right}.power-control{top:92px}.cue-card{top:74px}}

.pro-aim-dot{position:absolute;z-index:72;left:12px;bottom:10px;width:8px;height:8px;border-radius:50%;background:#27ff67;border:1px solid rgba(225,255,235,.9);box-shadow:0 0 5px #27ff67,0 0 11px rgba(39,255,103,.72),0 2px 4px #0009;opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .08s,transform .08s}.pro-aim-dot.show{opacity:1;transform:scale(1)}


/* v5.4 mobile performance + touch UX */
.mobile-aim-wheel{display:none}
body.mobile-ui #game{filter:none}
body.mobile-ui #app:before{display:none}
body.mobile-ui .matchbar{filter:none}
body.mobile-ui .player-card.active:before{animation:none}
body.mobile-ui .mode-card{transition:none}
body.mobile-ui .mode-card:hover{transform:none;filter:none}
body.mobile-ui .scrim,body.mobile-ui .online-panel,body.mobile-ui .result-panel,body.mobile-ui .versus-intro{backdrop-filter:none;-webkit-backdrop-filter:none}
body.mobile-ui .menu-panel,body.mobile-ui .online-card,body.mobile-ui .result-card{box-shadow:0 12px 32px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.10)}
body.mobile-ui .aim-wheel{display:none!important}
body.mobile-ui .mobile-aim-wheel{position:absolute;z-index:27;right:max(8px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:88px;height:88px;border-radius:50%;display:grid;place-items:center;touch-action:none;overscroll-behavior:none;filter:drop-shadow(0 7px 10px rgba(0,0,0,.62))}
body.mobile-ui .mobile-aim-wheel.hidden-control{display:none!important}
body.mobile-ui .mobile-aim-wheel.disabled{opacity:.34;pointer-events:none}
body.mobile-ui .mobile-aim-ring{position:relative;width:84px;height:84px;border-radius:50%;border:2px solid #9edfff;background:radial-gradient(circle,#203b56 0 25%,#081523 27% 51%,#49677f 53% 57%,#07111d 59% 72%,#172b3d 74%);box-shadow:inset 0 0 0 4px #030a13,inset 0 0 14px rgba(103,211,255,.22),0 3px 0 #02070d;overflow:hidden}
body.mobile-ui .mobile-aim-ring:before{content:"";position:absolute;inset:5px;border-radius:50%;background:repeating-conic-gradient(rgba(228,249,255,.9) 0 1deg,transparent 1deg 10deg);mask:radial-gradient(circle,transparent 0 71%,#000 72%);-webkit-mask:radial-gradient(circle,transparent 0 71%,#000 72%);opacity:.72}
body.mobile-ui .mobile-aim-ring:after{content:"";position:absolute;inset:20px;border-radius:50%;border:1px solid rgba(126,221,255,.42);background:radial-gradient(circle at 35% 30%,#597489,#1c3042 48%,#08131f 76%);box-shadow:inset 0 2px 6px rgba(255,255,255,.16),inset 0 -5px 9px rgba(0,0,0,.38)}
body.mobile-ui .mobile-aim-rotor{position:absolute;z-index:2;inset:0;border-radius:50%;transform-origin:50% 50%;will-change:transform;pointer-events:none}
body.mobile-ui .mobile-aim-rotor i{position:absolute;left:50%;top:5px;width:10px;height:18px;margin-left:-5px;border-radius:6px;background:linear-gradient(#eaffff,#5fe2ff 50%,#148cb2);border:1px solid #eaffff;box-shadow:0 0 9px rgba(64,223,255,.75),0 2px 4px #000}
body.mobile-ui .mobile-aim-center{position:absolute;z-index:3;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#bdefff;box-shadow:0 0 7px #5fe4ff;pointer-events:none}
body.mobile-ui .mobile-aim-ring b{position:absolute;z-index:4;left:50%;bottom:21px;transform:translateX(-50%);font:1000 7px/1 Arial;letter-spacing:.12em;color:#dff8ff;text-shadow:0 1px 3px #000;pointer-events:none}
body.mobile-ui.power-right .power-control{left:max(7px,env(safe-area-inset-left));right:auto}
body.mobile-ui.power-right .cue-card{right:8px;left:auto}
body.mobile-ui .power-control{left:max(7px,env(safe-area-inset-left));right:auto}
body.mobile-ui .online-panel.open{display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
body.mobile-ui .online-card{width:min(430px,100%);margin:0 auto;max-height:none;padding:15px}
body.mobile-ui .online-panel input,body.mobile-ui .online-panel select,body.mobile-ui .online-panel button{touch-action:manipulation;min-height:42px}
body.mobile-ui .online-leave{min-height:36px!important}
body.mobile-ui .menu-panel{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:max(16px,env(safe-area-inset-bottom))}
body.mobile-ui .menu-panel button,body.mobile-ui .menu-panel input,body.mobile-ui .menu-panel select{touch-action:manipulation}
body.mobile-ui .mode-hub.show{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
body.mobile-ui .mode-hub button,body.mobile-ui .mode-hub input{touch-action:manipulation}
body.mobile-ui .result-panel.show{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
body.mobile-ui .result-card{margin:auto}
body.mobile-ui .spin-pad,body.mobile-ui .power-control,body.mobile-ui .mobile-aim-wheel{touch-action:none}

@media (orientation:landscape) and (max-height:620px){
  body.mobile-ui .matchbar{top:max(2px,env(safe-area-inset-top));left:max(4px,env(safe-area-inset-left));right:max(4px,env(safe-area-inset-right));height:48px;grid-template-columns:42px minmax(0,1fr) 88px minmax(0,1fr) 42px;gap:4px}
  body.mobile-ui .menu-btn,body.mobile-ui .spin-trigger,body.mobile-ui .mini-ball{width:40px;height:40px}
  body.mobile-ui .mini-ball i{left:15px;top:15px}
  body.mobile-ui .player-card{height:45px;grid-template-columns:38px minmax(0,1fr) 30px;padding:2px 4px;gap:4px;border-radius:9px}
  body.mobile-ui .player-card.right{grid-template-columns:30px minmax(0,1fr) 38px}
  body.mobile-ui .avatar{width:36px;height:36px;border-radius:8px}
  body.mobile-ui .avatar span{display:none}
  body.mobile-ui .score{width:28px;height:28px;font-size:14px}
  body.mobile-ui .player-copy{grid-template-rows:18px 9px}
  body.mobile-ui .player-copy>b{font-size:9px}
  body.mobile-ui .player-copy small{font-size:5.5px}
  body.mobile-ui .pot-rail{display:none}
  body.mobile-ui .mode-center{height:45px;border-radius:9px;grid-template-rows:10px 19px 9px}
  body.mobile-ui .mode-center b{font-size:13px}
  body.mobile-ui .mode-center small{font-size:5.5px}
  body.mobile-ui .mode-center span{font-size:6px}
  body.mobile-ui .network-badge{top:49px;right:max(5px,env(safe-area-inset-right));font-size:6px;padding:4px 6px}
  body.mobile-ui .power-control{top:64px;bottom:max(8px,env(safe-area-inset-bottom));width:42px;grid-template-rows:26px 1fr}
  body.mobile-ui .power-value{height:22px;width:36px}
  body.mobile-ui .power-track{min-height:0;width:27px}
  body.mobile-ui .cue-card{top:56px;width:40px;height:40px;right:max(7px,env(safe-area-inset-right))}
  body.mobile-ui .mobile-aim-wheel{width:80px;height:80px;right:max(6px,env(safe-area-inset-right));bottom:max(6px,env(safe-area-inset-bottom))}
  body.mobile-ui .mobile-aim-ring{width:76px;height:76px}
  body.mobile-ui .spin-panel{top:51px;right:max(5px,env(safe-area-inset-right));width:166px;padding:9px;border-radius:14px}
  body.mobile-ui .spin-pad{width:116px;height:116px}
  body.mobile-ui .toast{top:51px}
  body.mobile-ui .ball-in-hand{top:52px}
  body.mobile-ui .mode-hub{padding:10px 14px 12px;grid-template-rows:auto auto auto;gap:9px}
  body.mobile-ui .hub-top{gap:8px}
  body.mobile-ui .hub-mark{width:38px;height:38px;border-radius:9px}
  body.mobile-ui .hub-top h1{font-size:18px}
  body.mobile-ui .hub-top small{font-size:5.8px}
  body.mobile-ui .mode-cards{gap:8px}
  body.mobile-ui .mode-card{height:126px;border-radius:14px;gap:6px}
  body.mobile-ui .mode-card b{font-size:15px}
  body.mobile-ui .mode-card small{font-size:6px}
  body.mobile-ui .mode-balls{height:45px}
  body.mobile-ui .mode-balls i{width:27px;height:27px}
  body.mobile-ui .mode-balls i:nth-child(2){width:37px;height:37px}
  body.mobile-ui .mode-balls i:nth-child(3){width:31px;height:31px}
  body.mobile-ui .mode-ball{width:48px;height:48px;font-size:18px}
  body.mobile-ui .hub-foot{gap:8px;flex-wrap:wrap;font-size:6px}
  body.mobile-ui .online-hub-btn{padding:8px 12px;font-size:8px}
  body.mobile-ui .online-card{margin:0 auto;padding:12px;border-radius:17px}
  body.mobile-ui .online-head{margin-bottom:5px}
  body.mobile-ui .online-head h2{font-size:18px}
  body.mobile-ui .online-note{font-size:10px;margin:0 0 8px;line-height:1.3}
  body.mobile-ui .online-card label{margin:6px 0;gap:4px}
  body.mobile-ui .online-card input,body.mobile-ui .online-card select{height:38px;min-height:38px}
  body.mobile-ui .online-create{height:39px;min-height:39px}
  body.mobile-ui .online-divider{margin:8px 0}
  body.mobile-ui .join-row button{height:38px;min-height:38px}
  body.mobile-ui .room-code-box{margin-top:8px;padding:8px}
  body.mobile-ui .online-waiting{margin-top:7px}
  body.mobile-ui .online-leave{margin-top:5px}
}

/* Mobile menus remain usable in portrait; only the live table requires landscape. */
@media (orientation:portrait) and (max-width:820px){
  body.mobile-ui:has(.mode-hub.show) .rotate-device,
  body.mobile-ui:has(.online-panel.open) .rotate-device,
  body.mobile-ui:has(.menu-panel.open) .rotate-device,
  body.mobile-ui:has(.result-panel.show) .rotate-device{display:none!important}
  body.mobile-ui .mode-hub{padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));gap:14px}
  body.mobile-ui .mode-cards{grid-template-columns:1fr;width:min(100%,380px);gap:10px;margin:14px auto}
  body.mobile-ui .mode-card{height:145px}
  body.mobile-ui .hub-foot{width:min(100%,380px);margin:auto;flex-direction:column;gap:10px;text-align:center}
  body.mobile-ui .online-card{width:min(100%,430px)}
  body.mobile-ui .result-card{width:min(100%,430px)}
}

/* v5.5 smooth-motion presentation pass */
.player-card{transition:border-color .18s ease,box-shadow .18s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
.player-card.turn-enter{animation:turnEnter .34s cubic-bezier(.2,.85,.25,1)}
.score{transition:transform .16s ease,filter .16s ease}
.score.score-pop{animation:scorePop .34s cubic-bezier(.16,.9,.25,1)}
.toast{will-change:transform,opacity;transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
.ball-in-hand{transform:translate(-50%,-5px) scale(.96);transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
.ball-in-hand.show{transform:translate(-50%,0) scale(1)}
.spin-panel{will-change:transform,opacity;transition:opacity .20s ease,transform .20s cubic-bezier(.2,.8,.2,1)}
.scrim{transition:opacity .20s ease}
.menu-panel{will-change:transform;transition:transform .26s cubic-bezier(.18,.82,.24,1)}
.mode-hub{transition:opacity .24s ease}
.online-panel.open .online-card{animation:panelIn .28s cubic-bezier(.18,.82,.24,1)}
.result-panel.show .result-card{animation:resultIn .42s cubic-bezier(.16,.9,.22,1)}
.versus-intro.show .vs-card{animation:versusIn .34s cubic-bezier(.18,.9,.25,1)}
.pot-slot.filled{animation:potIn .26s cubic-bezier(.16,.9,.25,1)}
.primary-btn,.secondary-btn,.online-hub-btn,.close-btn,.menu-btn,.spin-trigger,.cue-card{transition:transform .12s ease,filter .15s ease,box-shadow .15s ease}
.primary-btn:active,.secondary-btn:active,.online-hub-btn:active,.close-btn:active,.menu-btn:active,.spin-trigger:active,.cue-card:active{transform:translateY(1px) scale(.985)}
@keyframes turnEnter{0%{transform:scale(.985);filter:brightness(.9)}55%{transform:scale(1.018);filter:brightness(1.16)}100%{transform:scale(1);filter:none}}
@keyframes scorePop{0%{transform:scale(1)}48%{transform:scale(1.24);filter:brightness(1.45)}100%{transform:scale(1);filter:none}}
@keyframes panelIn{0%{opacity:0;transform:translateY(14px) scale(.975)}100%{opacity:1;transform:none}}
@keyframes resultIn{0%{opacity:0;transform:translateY(18px) scale(.94)}60%{opacity:1;transform:translateY(-3px) scale(1.012)}100%{transform:none}}
@keyframes versusIn{0%{opacity:0;transform:scale(.90)}58%{opacity:1;transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes potIn{0%{opacity:.2;transform:scale(.45)}70%{transform:scale(1.22)}100%{opacity:1;transform:scale(1)}}
body.mobile-ui .player-card.turn-enter{animation-duration:.26s}
body.mobile-ui .score.score-pop{animation-duration:.28s}
body.mobile-ui .online-panel.open .online-card{animation-duration:.22s}
body.mobile-ui .result-panel.show .result-card{animation-duration:.30s}
@media(prefers-reduced-motion:reduce){.player-card.turn-enter,.score.score-pop,.online-panel.open .online-card,.result-panel.show .result-card,.versus-intro.show .vs-card,.pot-slot.filled{animation:none!important}.menu-panel,.spin-panel,.toast,.ball-in-hand,.mode-hub{transition-duration:.01ms!important}}


/* v5.8.2 — 8 Ball Pool-inspired vertical precision roller.
   Table touch remains tap-to-aim; this dedicated control owns continuous rotation. */
.aim-wheel{right:10px;top:50%;bottom:auto;width:44px;height:clamp(190px,46vh,310px);min-height:0;max-height:none;border-radius:22px;display:grid;place-items:center;border:2px solid #9bb7ca;background:linear-gradient(90deg,#080d14 0 9%,#233748 12% 23%,#0a121c 28% 72%,#30495c 77% 88%,#080d14 91%);box-shadow:0 4px 0 #010306,0 10px 24px #000a,inset 0 0 0 2px #030810,inset 0 0 13px rgba(165,224,255,.16);transform:translateY(-50%);touch-action:none;overscroll-behavior:none}
.aim-wheel:before{content:"";position:absolute;inset:5px;border-radius:18px;border:1px solid rgba(208,239,255,.28);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05) 48%,transparent 52%);mask:none;-webkit-mask:none;opacity:1;pointer-events:none}
.aim-wheel:after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;transform:translateY(-50%);border:0;background:linear-gradient(90deg,transparent,#dff7ff 22% 78%,transparent);box-shadow:0 0 7px rgba(96,218,255,.75);pointer-events:none}
.aim-wheel-disc{position:relative;width:28px;height:calc(100% - 18px);border-radius:15px;overflow:hidden;cursor:ns-resize;touch-action:none;background:linear-gradient(90deg,#111a24,#526675 22%,#b5c2ca 47%,#425563 73%,#0c141d);border:1px solid #7e95a6;box-shadow:inset 4px 0 7px #0008,inset -4px 0 7px #0007,0 0 0 2px #050b12}
.aim-ticks{position:absolute;inset:-18px 3px;border-radius:10px;background:repeating-linear-gradient(to bottom,rgba(239,248,252,.78) 0 1px,rgba(31,47,59,.18) 1px 5px,rgba(5,12,18,.72) 5px 7px);background-position:center var(--aim-roll,0px);mask:none;-webkit-mask:none;opacity:.8;will-change:background-position;pointer-events:none}
.aim-core{position:absolute;z-index:3;left:3px;right:3px;top:50%;height:38px;margin-top:-19px;inset:auto 3px auto 3px;border-radius:10px;border:1px solid rgba(221,246,255,.58);background:linear-gradient(90deg,rgba(4,11,17,.88),rgba(91,127,149,.76) 48%,rgba(5,12,19,.9));box-shadow:inset 0 0 8px #0009,0 0 8px rgba(71,205,255,.16);pointer-events:none}
.aim-core:before,.aim-core:after{position:absolute;left:50%;transform:translateX(-50%);font:900 8px/1 Arial;color:#eafaff;text-shadow:0 0 5px #5fdfff;pointer-events:none}
.aim-core:before{content:"▲";top:3px}.aim-core:after{content:"▼";bottom:3px}
.aim-core i{position:absolute;left:50%;top:50%;width:18px;height:2px;border-radius:2px;background:#ecfbff;box-shadow:0 0 7px #6ee7ff;transform:translate(-50%,-50%);transform-origin:center;transition:none}
.aim-wheel-disc:active .aim-core,.aim-wheel-disc.dragging .aim-core{filter:brightness(1.16)}

body.mobile-ui .mobile-aim-wheel{position:absolute;z-index:27;right:max(7px,env(safe-area-inset-right));top:50%;bottom:auto;width:50px;height:clamp(180px,48vh,300px);min-height:0;max-height:none;border-radius:25px;display:grid;place-items:center;touch-action:none!important;overscroll-behavior:none;cursor:ns-resize;filter:drop-shadow(0 8px 12px rgba(0,0,0,.68));background:linear-gradient(90deg,#080d14,#274154 17%,#08121c 31% 69%,#2f4b60 83%,#080d14);border:2px solid #91b9d0;box-shadow:inset 0 0 0 2px #030910,inset 0 0 13px rgba(99,218,255,.18);transform:translateY(-50%)}
body.mobile-ui .mobile-aim-wheel:before{content:"";position:absolute;z-index:4;left:5px;right:5px;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,#e7fbff 22% 78%,transparent);box-shadow:0 0 8px rgba(88,224,255,.86);pointer-events:none}
body.mobile-ui .mobile-aim-wheel:after{content:"FINE";position:absolute;z-index:5;left:50%;bottom:7px;transform:translateX(-50%);font:900 6px/1 Arial;letter-spacing:.12em;color:#dff9ff;text-shadow:0 1px 3px #000;pointer-events:none}
body.mobile-ui .mobile-aim-wheel.dragging{filter:drop-shadow(0 8px 13px rgba(0,0,0,.72)) brightness(1.08)}
body.mobile-ui .mobile-aim-ring{position:relative;width:32px;height:calc(100% - 16px);border-radius:17px;border:1px solid #849dad;background:linear-gradient(90deg,#0d1720,#506777 24%,#c2cdd4 48%,#405765 75%,#09131c);box-shadow:inset 4px 0 7px #0008,inset -4px 0 7px #0008,0 0 0 2px #050b11;overflow:hidden;pointer-events:none}
body.mobile-ui .mobile-aim-ring:before{content:"";position:absolute;inset:-20px 4px;border-radius:11px;background:repeating-linear-gradient(to bottom,rgba(245,251,255,.85) 0 1px,rgba(35,51,62,.22) 1px 5px,rgba(3,10,15,.75) 5px 8px);background-position:center var(--aim-roll,0px);mask:none;-webkit-mask:none;opacity:.82}
body.mobile-ui .mobile-aim-ring:after{content:"";position:absolute;left:4px;right:4px;top:50%;height:34px;transform:translateY(-50%);border-radius:9px;border:1px solid rgba(221,246,255,.52);background:linear-gradient(90deg,rgba(4,11,17,.84),rgba(87,127,151,.70),rgba(4,11,17,.86));box-shadow:inset 0 0 7px #0008}
body.mobile-ui .mobile-aim-rotor{position:absolute;z-index:2;inset:-20px 4px;border-radius:10px;transform:none!important;transition:none;background:repeating-linear-gradient(to bottom,transparent 0 7px,rgba(129,229,255,.13) 7px 8px);background-position:center var(--aim-roll,0px);will-change:background-position;pointer-events:none}
body.mobile-ui .mobile-aim-rotor i{position:absolute;left:50%;top:50%;width:20px;height:2px;margin:0;transform:translate(-50%,-50%);border:0;border-radius:2px;background:#effcff;box-shadow:0 0 7px #65e6ff}
body.mobile-ui .mobile-aim-center{display:none}
body.mobile-ui .mobile-aim-ring b{display:none}
@media(max-height:650px){.aim-wheel{top:50%;bottom:auto;height:clamp(145px,45vh,220px);min-height:0}.aim-wheel-disc{width:26px}.aim-core{height:34px;margin-top:-17px}body.mobile-ui .mobile-aim-wheel{top:50%;bottom:auto;height:clamp(145px,47vh,215px);min-height:0;width:46px}body.mobile-ui .mobile-aim-ring{width:29px;height:calc(100% - 14px)}}
@media(max-height:520px){body.mobile-ui .mobile-aim-wheel{top:50%;bottom:auto;width:44px;height:clamp(125px,45vh,180px);min-height:0}body.mobile-ui .mobile-aim-ring{width:28px;height:calc(100% - 12px)}}