.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.hud-top,.hud-bottom,.hud-right,.veil{pointer-events:auto}.hud-top,.hud-bottom,.hud-right{position:absolute}.hud-top{top:10px;left:20px;right:20px;min-height:88px;display:grid;grid-template-columns:minmax(140px,260px) 1fr minmax(140px,260px);align-items:center;gap:12px}.top-left{display:flex;align-items:center;min-width:0}.hud-center{display:flex;align-items:center;justify-content:center;min-width:0}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#555,#111 58%,#000);border:2px solid #d4b06a;position:relative;overflow:hidden}.brand-mark:before{content:"";position:absolute;left:8px;right:8px;top:14px;bottom:14px;background:#f4f1ea}.brand-mark span{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#111;z-index:1}.brand h1{font-family:Cormorant Garamond,serif;font-size:28px;font-weight:700;letter-spacing:.04em;line-height:1}.brand p{margin-top:4px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#8b9bb4}.stats{display:flex;gap:8px}.stat{min-width:68px;padding:8px 10px;border-radius:14px;background:#0c1220c7;border:1px solid rgba(212,176,106,.28);text-align:center}.stat .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8b9bb4}.stat .v{margin-top:2px;font-size:20px;font-weight:700;color:#f3d89a}.icon-btn{width:48px;height:48px;border-radius:14px;border:1px solid rgba(212,176,106,.3);background:#0c1220c7;color:#e8eef7;font-size:18px;cursor:pointer;flex-shrink:0}.icon-btn:hover,.btn:hover{border-color:#f3d89a}.hud-right{right:16px;top:108px;bottom:24px;width:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.power-label,.power-value{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8b9bb4}.power-value{color:#f3d89a;font-weight:700;font-size:16px;letter-spacing:.04em}.power-track{position:relative;width:36px;height:280px;border-radius:20px;padding:4px;background:linear-gradient(#e23b3b,#f0c400 52%,#2ecc71);border:1px solid rgba(212,176,106,.35);cursor:ns-resize;overflow:hidden}.power-fill{position:absolute;left:4px;right:4px;top:4px;border-radius:16px 16px 0 0;background:#080c14b8;height:58%}.power-thumb{position:absolute;left:-6px;width:42px;height:10px;border-radius:4px;background:#f3d89a;box-shadow:0 0 0 2px #3a2416;transform:translateY(50%);bottom:calc(-1px + 42%)}.mini{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#1a1a1a;box-shadow:inset 0 0 0 1px #ffffff40}.mini:not(.sunk){filter:brightness(.34) saturate(.18) sepia(.58) contrast(.86);opacity:.8}.mini.sunk{filter:none;opacity:1}.top-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-shrink:0;min-width:0}.hud.online .solo-stats,.hud.online .brand,.hud.online .solo-rack{display:none}.english{display:flex;flex-direction:column;align-items:center;gap:6px}.cue-face{position:relative;width:84px;height:84px;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.cue-ball{position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,#f4f0e8 38%,#d4cfc4 78%,#9a9488);box-shadow:inset 0 -4px 8px #14100a47,0 2px 6px #00000059}.cue-cross{position:absolute;top:18px;right:18px;bottom:18px;left:18px;pointer-events:none;background:linear-gradient(#8b9bb4,#8b9bb4) center / 1px 100% no-repeat,linear-gradient(#8b9bb4,#8b9bb4) center / 100% 1px no-repeat;opacity:.45}.cue-tip{position:absolute;width:12px;height:12px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#ff6b6b,#c41e3a 62%,#7a1212);border:1px solid #fff4f0;box-shadow:0 0 0 1px #00000059,0 1px 4px #c41e3a8c;pointer-events:none;z-index:2}.cue-mark{position:absolute;font-size:9px;letter-spacing:.08em;color:#8b9bb4;pointer-events:none}.cue-mark.n{top:-2px;left:50%;transform:translate(-50%)}.cue-mark.s{bottom:-2px;left:50%;transform:translate(-50%)}.cue-mark.w{left:-1px;top:50%;transform:translateY(-50%)}.cue-mark.e{right:-1px;top:50%;transform:translateY(-50%)}.english-caption{min-height:16px;font-size:11px;letter-spacing:.08em;color:#f3d89a;font-weight:600}.hud.online .hud-top{top:0;left:0;right:0;height:96px;min-height:96px;padding:0 16px;grid-template-columns:120px 1fr 120px;background:linear-gradient(180deg,rgba(6,10,18,.94) 0%,rgba(6,10,18,.72) 70%,transparent 100%)}.solo-rack{display:flex;justify-content:center;width:100%}.match-bar{display:none;align-items:center;justify-content:center;gap:22px;min-width:0;width:min(1220px,100%)}.hud.online .match-bar{display:flex}.player{display:flex;align-items:center;gap:12px;min-width:0}.player.opp{flex-direction:row}.player-meta{display:flex;flex-direction:column;gap:2px;min-width:44px}.player.opp .player-meta{align-items:flex-end;text-align:right}.player-name{font-size:13px;font-weight:700;color:#e8eef7;line-height:1.1}.player-group{font-size:11px;letter-spacing:.08em;color:#8b9bb4}.avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;font-weight:700;color:#f3d89a;background:radial-gradient(circle at 32% 28%,#5b6b86,#1b2434 62%,#0c111a);border:2px solid rgba(212,176,106,.55)}.avatar.opp{color:#c9d4e5;background:radial-gradient(circle at 32% 28%,#6a4a4a,#2a1c22 62%,#120c10);border-color:#b4969666}.player.active .avatar{box-shadow:0 0 0 2px #f3d89a,0 0 14px #f3d89a66}.ball-rail{display:flex;align-items:center;gap:7px;height:52px;padding:0 18px;border-radius:999px;background:linear-gradient(180deg,#05080e,#1a2436 46%,#0b1018);border:1px solid rgba(170,200,220,.2);box-shadow:inset 0 4px 8px #0000009e,0 1px #ffffff0f}.player.active .ball-rail{border-color:#f3d89a73;box-shadow:inset 0 4px 8px #0000009e,0 0 0 1px #f3d89a47}.ball-rail .mini{width:36px;height:36px;margin:0;font-size:13px;position:relative;box-shadow:inset 0 2px 2px #ffffff59,inset 0 -2px 3px #00000059,0 1px 2px #0006}.ball-rail .mini:not(.sunk){box-shadow:inset 0 6px 10px #140c048c,inset 0 -2px 4px #00000080,0 0 0 1px #5a462859}.ball-rail .mini.sunk{box-shadow:inset 0 3px 3px #ffffff73,inset 0 -2px 4px #00000059,0 0 10px #f3d89a47}.vs-block{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;min-width:96px}.vs-score{display:flex;align-items:baseline;gap:8px;color:#f3d89a;font-size:22px;font-weight:700;line-height:1}.vs-score span{font-size:11px;letter-spacing:.14em;color:#8b9bb4}.turn-pill{padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;background:#8b9bb429;color:#8b9bb4}.turn-pill.you{background:#f3d89a;color:#24180b}.turn-pill.wait{background:#8b9bb429;color:#8b9bb4}.mini.eight{width:38px;height:38px;background:radial-gradient(circle at 32% 28%,#444,#111 60%,#000);color:#f4f0e8}.mini.eight.live{filter:none;opacity:1;box-shadow:0 0 0 2px #f3d89a,0 0 12px #f3d89a73}.hud-right.locked{pointer-events:none;opacity:.55}.play-room{font-size:12px;letter-spacing:.12em;color:#f3d89a;white-space:nowrap}.room-code{margin:8px 0 18px;font-size:56px;font-weight:700;letter-spacing:.24em;color:#f3d89a}.code-input{width:100%;height:56px;margin:8px 0 12px;border:1px solid rgba(212,176,106,.35);border-radius:12px;background:#0a1220;color:#f3d89a;font-size:32px;letter-spacing:.28em;text-align:center}.form-error{min-height:22px;margin:0 0 8px;color:#e38a8a;font-size:14px}.hud-bottom{left:250px;right:150px;bottom:18px;display:flex;align-items:center;justify-content:center;gap:14px}.hint{position:absolute;left:50%;bottom:78px;top:auto;transform:translate(-50%);padding:8px 16px;border-radius:999px;background:#080c16b3;border:1px solid rgba(212,176,106,.2);color:#c9d4e5;font-size:14px;pointer-events:none;white-space:nowrap}.hint.you{border-color:#f3d89a73;color:#f3d89a}.hint.wait{color:#8b9bb4}.btn{height:46px;padding:0 22px;border-radius:12px;border:1px solid rgba(212,176,106,.32);background:#0c1220db;color:#e8eef7;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}.btn.primary{background:linear-gradient(#f3d89a,#c49a4c);color:#24180b;border-color:#f3d89a}.btn.strike{min-width:0;width:100%;height:44px;margin-top:6px}.btn:disabled,.btn.primary:disabled{background:#1c2434e0;color:#6d7a90;border-color:#8b9bb438;cursor:not-allowed;box-shadow:none}.btn:disabled:hover,.btn.primary:disabled:hover{border-color:#8b9bb438}.veil{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#04080e8c;z-index:5}.veil.hidden,.play-only.hidden,.hint.hidden,.btn.hidden{display:none}.menu-card{width:520px;padding:42px 46px 36px;border-radius:24px;background:#0c1422;border:1px solid rgba(212,176,106,.35);text-align:center;position:relative;z-index:1}.eyebrow{font-size:12px;letter-spacing:.22em;color:#d4b06a}.menu-card h2,.menu-card h1{font-family:Cormorant Garamond,serif;font-size:58px;margin:8px 0 6px}.menu-card .sub{color:#8b9bb4;margin-bottom:28px}.menu-card .btn{width:100%;margin-top:10px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0;color:#c9d4e5}.toggle{width:48px;min-width:48px;height:26px;flex-shrink:0;border-radius:999px;background:#2a3348;border:0;position:relative;cursor:pointer}.setting-row input[type=range]{width:180px}.toggle.on{background:#c49a4c}.toggle i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff}.toggle.on i{left:25px}.play-only.hidden{display:none}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#05070c;color:#e8eef7;font-family:"Source Sans 3",sans-serif;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}#app{width:100vw;height:100vh;width:100dvw;height:100dvh;display:flex;align-items:center;justify-content:center}#stage{position:relative;width:1920px;height:1080px;flex-shrink:0;transform-origin:center center;overflow:hidden}#stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:1920px!important;height:1080px!important;display:block;z-index:0}