:root{--bg: #0b0f0c;--panel: rgba(16, 22, 18, .92);--panel-2: rgba(28, 38, 31, .95);--line: rgba(255, 255, 255, .1);--text: #eef2ea;--muted: #9aa89d;--accent: #f2c01e;--felt: #23864a;--danger: #ef5350;--good: #52d273;--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}html,body{margin:0;height:100%;background:radial-gradient(ellipse at 50% 40%,#16241a,#0b0f0c 70%);overflow:hidden}body{font-family:var(--font);color:var(--text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}canvas{display:block;touch-action:none}#ui{position:fixed;inset:0;pointer-events:none}#ui>*{pointer-events:auto}.hidden{display:none!important}#hud{position:absolute;top:8px;left:64px;right:64px;height:52px;display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none}.pcard{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 300px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 12px;transition:box-shadow .2s,border-color .2s,opacity .2s;opacity:.72}.pcard.p1{flex-direction:row-reverse;text-align:right}.pcard.turn{opacity:1;border-color:#f2c01ecc;box-shadow:0 0 0 2px #f2c01e40,0 0 18px #f2c01e40}.avatar{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;background:#2b3a30;color:var(--text);position:relative}.avatar .ring{position:absolute;inset:-3px;border-radius:50%;pointer-events:none}.pinfo{min-width:0;display:flex;flex-direction:column;gap:4px}.pname{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pname small{color:var(--muted);font-weight:500}.rack{display:flex;gap:3px}.pcard.p1 .rack{justify-content:flex-end}.bi{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset -2px -2px 3px #00000059,inset 1px 1px 2px #ffffff59}.bi.gone{opacity:.18}.bi.empty{background:#33413a;box-shadow:none}.vs{color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.1em;flex:none}#msg{position:absolute;top:66px;left:50%;transform:translate(-50%);font-size:13px;color:var(--muted);white-space:nowrap;pointer-events:none}#banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.9);padding:12px 26px;border-radius:14px;background:#080c09cc;border:1px solid var(--line);font-size:24px;font-weight:800;letter-spacing:.02em;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;text-align:center;white-space:nowrap;z-index:10}#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}#banner.foul{color:#ffb4b0;border-color:#ef535080}#banner.good{color:#c9f7d4}#hint{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:12px;color:var(--muted);white-space:nowrap;pointer-events:none;opacity:.85}.iconbtn{position:absolute;top:12px;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:20px;cursor:pointer;display:grid;place-items:center}#pauseBtn{left:12px}#power{position:absolute;left:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;touch-action:none}#power .track{position:relative;width:38px;height:min(52vh,340px);border-radius:19px;overflow:hidden;cursor:ns-resize;background:linear-gradient(#1a231d,#0f1511);border:1px solid var(--line);box-shadow:inset 0 2px 8px #0009}#power .fill{position:absolute;left:0;right:0;top:0;height:0%;background:linear-gradient(#52d273,#f2c01e 60%,#ef5350)}#power .cue{position:absolute;left:50%;width:8px;margin-left:-4px;top:6px;bottom:6px;border-radius:4px;background:linear-gradient(#3a7bd5 0 3%,#f3efe4 3% 7%,#e3c48e 7% 62%,#6b2d1a 62% 82%,#1b1b1b 82%);transition:transform .05s;opacity:.95}.label{font-size:10px;letter-spacing:.14em;color:var(--muted);font-weight:700}#spin{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;touch-action:none}#spin .ball{position:relative;width:76px;height:76px;border-radius:50%;cursor:crosshair;background:radial-gradient(circle at 35% 30%,#fff,#eeeadf 45%,#b9b4a6);box-shadow:0 4px 14px #00000080}#spin .ball:before{content:"";position:absolute;inset:50% 8px auto;height:1px;background:#0000001f}#spin .ball:after{content:"";position:absolute;inset:8px auto 8px 50%;width:1px;background:#0000001f}#spin .limit{position:absolute;inset:12%;border-radius:50%;border:1px dashed rgba(0,0,0,.18)}#spin .dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#d62828;box-shadow:0 0 0 2px #fffc;left:50%;top:50%}.sidebar-narrow #power .track{width:30px}.sidebar-narrow #spin .ball{width:60px;height:60px}.sidebar-narrow #power{left:10px}.sidebar-narrow #spin{right:10px}.stacked #power{left:16px;right:104px;top:auto;bottom:calc(22px + env(safe-area-inset-bottom));transform:none;flex-direction:column-reverse;align-items:stretch}.stacked #power .track{width:auto;height:40px;cursor:ew-resize}.stacked #power .fill{inset:0 auto 0 0;height:100%!important;width:var(--p, 0%);background:linear-gradient(90deg,#52d273,#f2c01e 60%,#ef5350)}.stacked #power .cue{inset:50% 6px auto;width:auto;height:8px;margin:-4px 0 0;transform:translate(var(--pull, 0%))!important;background:linear-gradient(90deg,#1b1b1b 0 18%,#6b2d1a 18% 38%,#e3c48e 38% 93%,#f3efe4 93% 97%,#3a7bd5 97%)}.stacked #power .label{text-align:left}.stacked #spin{right:16px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:none}.stacked #spin .ball{width:68px;height:68px}.stacked #hint{bottom:calc(108px + env(safe-area-inset-bottom));white-space:normal;width:calc(100vw - 32px);text-align:center}.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#0508068c;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.screen.show{display:flex}.card{width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 20px 60px #0000008c;display:flex;flex-direction:column;gap:10px}.card h1{margin:0 0 4px;font-size:30px;letter-spacing:.02em;text-align:center}.card h2{margin:0 0 6px;font-size:22px;text-align:center}.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45;text-align:center}.logo{display:flex;justify-content:center;margin-bottom:2px}.logo .eight{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#555,#161616 45%,#000);box-shadow:0 8px 24px #0009}.logo .eight span{width:34px;height:34px;border-radius:50%;background:#f6f3ea;color:#111;font-weight:900;font-size:22px;display:grid;place-items:center}.btn{appearance:none;border:1px solid var(--line);border-radius:12px;padding:13px 16px;font:inherit;font-weight:700;font-size:16px;background:var(--panel-2);color:var(--text);cursor:pointer;transition:background .15s,transform .05s,border-color .15s}.btn:hover,.btn:focus-visible{background:#2c3d31;border-color:#ffffff38;outline:none}.btn:active{transform:translateY(1px)}.btn.primary{background:linear-gradient(#2fa85c,#21874a);border-color:#78ffaa4d}.btn.primary:hover{background:linear-gradient(#36b865,#249350)}.btn.ghost{background:transparent}.btn small{display:block;font-weight:500;color:var(--muted);font-size:12px;margin-top:2px}.btn[disabled]{opacity:.45;cursor:default}.row{display:flex;gap:10px}.row>*{flex:1}.toggles{display:flex;justify-content:center;gap:8px;margin-top:4px}.chip{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}.chip.on{color:var(--text);border-color:#ffffff40}.status{text-align:center;font-size:13px;color:var(--muted)}.status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#777;vertical-align:1px}.status.online .dot{background:var(--good)}.status.connecting .dot{background:var(--accent)}.status.offline .dot{background:var(--danger)}.tables{display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow:auto}.table-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid var(--line)}.table-row .tn{flex:1;min-width:0}.table-row .tn b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-row .tn span{color:var(--muted);font-size:12px}.table-row .btn{padding:8px 14px;font-size:14px}.empty-list{text-align:center;color:var(--muted);font-size:14px;padding:18px 0}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{background:#ffffff0a;border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}.stat b{display:block;font-size:22px}.stat span{color:var(--muted);font-size:12px}.help{font-size:13px;color:var(--muted);line-height:1.5;text-align:left}.help h3{color:var(--text);font-size:14px;margin:10px 0 4px}.help ul{margin:0;padding-left:18px}.help kbd{background:#26332b;border:1px solid var(--line);border-radius:5px;padding:0 5px;font-size:12px;color:var(--text)}.spinner{width:34px;height:34px;margin:6px auto;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.gameover-title.win{color:#ffe27a}.gameover-title.lose{color:#ffb4b0}@media(max-width:640px),(max-height:420px){#hud{left:58px;right:58px;top:6px;gap:6px}.pcard{padding:5px 8px;gap:6px}.avatar{width:26px;height:26px;font-size:12px}.pname{font-size:12px}.bi{width:9px;height:9px}.rack{gap:2px}.vs{display:none}#banner{font-size:18px}.iconbtn{width:36px;height:36px;top:8px;font-size:17px}#msg{top:54px}}