:root{font-family:'Trebuchet MS',Arial,sans-serif;background:#070b0b;color:#e9dfcf;color-scheme:dark}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(ellipse at center,#18301d 0%,#0a1010 64%,#050708 100%);overflow-x:hidden}.app{width:min(1400px,98vw);margin:auto;padding:10px 0 18px;position:relative}.topbar{height:47px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;color:#debd83}.topbar strong{font-size:22px;letter-spacing:.12em}.topbar span{font-size:11px;color:#b2a69b;letter-spacing:.15em}.topbar button,.gamecontrols button{background:#3c2920;border:1px solid #9d7345;color:#f8e6cf;border-radius:6px;cursor:pointer;font-weight:800;letter-spacing:.04em;min-height:38px;padding:0 20px}.topbar button:hover,.gamecontrols button:hover{background:#63432b}.scoreline{display:grid;grid-template-columns:1fr minmax(180px,1.1fr) 1fr;gap:14px;align-items:center;padding:6px 14px 9px}.player{border:1px solid #554737;border-radius:8px;background:linear-gradient(#2b231b,#1c1714);min-height:45px;padding:6px 12px;display:flex;gap:9px;align-items:center;font-weight:700;font-size:14px;opacity:.64}.player.active{opacity:1;border-color:#c8a66d;box-shadow:0 0 10px #81613733}.player .dot{width:9px;height:9px;border-radius:50%;background:#e4ae51;flex-shrink:0}.player small{margin-left:auto;font-size:10px;color:#cbb69b}.centerStatus{text-align:center;font-size:13px;color:#e6c99b;font-weight:bold;min-width:0}.canvas-holder{background:#030806;border-radius:6px;overflow:hidden;box-shadow:0 18px 44px #000a;position:relative}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.gamecontrols{display:flex;gap:14px;justify-content:center;align-items:center;margin:10px auto 0;max-width:1100px;flex-wrap:wrap}.gamecontrols .control{width:min(260px,30vw)}.control label{display:flex;justify-content:space-between;color:#e1c39b;font-size:11px;font-weight:bold;letter-spacing:.08em}.control input{width:100%;accent-color:#b88043;cursor:pointer}.gamecontrols .action{background:linear-gradient(#dfae69,#956336);color:#170f08;border-color:#efc78d;min-width:90px}.hint{text-align:center;font-size:12px;color:#8f9f90;margin:9px 10px}.menu-screen{position:absolute;inset:0;background:rgba(4,8,8,.94);display:grid;place-items:center;z-index:3;min-height:96vh}.menu-screen.hidden{display:none}.menu-panel{width:min(720px,95vw);min-height:520px;padding:22px 45px 31px;display:flex;flex-direction:column;align-items:center;gap:5px;border:3px solid #8a603b;border-radius:17px;box-shadow:0 0 0 5px #1c100a,0 15px 60px #000;background:linear-gradient(#35251bdf,#17130fe9),url('assets/img/panel2.png') center/100% 100%}.game-title{width:min(460px,80vw);max-height:190px;object-fit:contain}.menu-rack{width:min(360px,74vw);height:175px;object-fit:contain;object-position:center}.choices{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.mode-btn{border:1px solid #ac855e;border-radius:9px;cursor:pointer;color:#fce6cb;background:linear-gradient(#4f3020,#261915);min-width:192px;min-height:91px;padding:6px 10px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px}.mode-btn:hover{box-shadow:0 0 0 2px #81c33e;transform:translateY(-2px)}.mode-btn b{font-size:10px;letter-spacing:.04em}.sprite-btn{display:block;width:110px;height:47px;background-size:100% auto;background-repeat:no-repeat;background-position:center top}.mode-btn.simple{min-height:43px;background:linear-gradient(#387e28,#1e4716)}.menu-note{font-size:10px;color:#b4aa9d;text-align:center;line-height:1.5;max-width:520px;margin-top:18px}@media(max-width:700px){.app{width:100%}.topbar span{display:none}.scoreline{grid-template-columns:1fr 1fr}.centerStatus{grid-column:1 / -1;grid-row:2}.player{font-size:11px;padding:5px}.player small{display:none}.gamecontrols{padding:0 10px}.gamecontrols .control{width:100%}.gamecontrols button{flex:1}.menu-panel{padding:15px;min-height:460px}.game-title{max-height:130px}.menu-rack{height:125px}.choices{gap:7px}.mode-btn{min-width:140px;min-height:83px}.menu-note{margin-top:5px}}

/* 888 POOL · HUD stanza privata · Fase 1 (nessuna modifica al tavolo) */
.scoreline{grid-template-columns:minmax(260px,1fr) minmax(160px,.85fr) minmax(260px,1fr);gap:12px;padding:9px 12px 12px}
.player{min-height:81px;gap:12px;padding:9px 12px;border-radius:13px;border-color:#334b50;background:linear-gradient(145deg,#16232a,#0a1018);opacity:.75;box-shadow:inset 0 1px 0 #ffffff12}
.player.active{opacity:1;border-color:#75d29a;box-shadow:0 0 0 1px #5bd18a44,0 0 18px #39b97922,inset 0 1px 0 #ffffff22}
.player .dot{display:none}
.avatar{flex:none;display:grid;place-items:center;width:57px;height:57px;border:2px solid #678895;border-radius:12px;background:linear-gradient(145deg,#355263,#142634);font-size:19px;font-weight:900;color:#fff;box-shadow:inset 0 1px 6px #ffffff22}
.avatar-p0{border-color:#8ed1ac;background:linear-gradient(145deg,#327a6a,#17353c)}
.avatar-p1{border-color:#7d9fbf}
.player-data{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.player-head{display:flex;align-items:baseline;gap:10px;justify-content:space-between;min-width:0}
.player-head>span{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player small{margin:0;font-size:10px;white-space:nowrap;color:#d3d0b8}
.remaining-balls{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-height:25px}
.hud-ball{--ball-color:#888;position:relative;display:inline-grid;place-items:center;flex:none;width:29px;height:29px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff9 0%,transparent 38%),var(--ball-color);color:#fff;font:900 12px/1 Arial,sans-serif;text-shadow:0 1px 2px #000b;box-shadow:inset -3px -4px 5px #0006,inset 1px 1px 2px #fff7,0 2px 4px #0007}
.hud-ball.stripe{background:radial-gradient(circle at 35% 25%,#fff9 0%,transparent 35%),linear-gradient(to bottom,#f3f1e9 0 24%,var(--ball-color) 24% 76%,#f3f1e9 76% 100%);color:#111;text-shadow:0 1px 1px #fff8}
.hud-ball.mini{width:24px;height:24px;font-size:10px}
.hud-ball.pending{border:2px solid #4b5964;background:#0a1117;box-shadow:inset 0 2px 4px #0009}
.group-complete{font-size:11px;letter-spacing:.06em;color:#d9b96c;font-weight:800}
.centerStatus{font-size:12px;line-height:1.4;color:#e4d1a2}
.ball-collector{margin:10px 0 0;padding:10px 15px 14px;border:1px solid #44565b;border-radius:12px;background:linear-gradient(180deg,#19272c,#0b1519 65%,#080e12);box-shadow:inset 0 1px 0 #ffffff13,0 6px 14px #0005}
.collector-heading{display:flex;gap:8px;align-items:center;justify-content:center;margin-bottom:10px;color:#d9d4c6;font-size:11px;letter-spacing:.19em}
.collector-mark{color:#d1a86a;font-size:12px}
.collector-count{color:#b9c6c6;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.collector-track{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:40px;padding:7px 8px;border-radius:24px;background:linear-gradient(180deg,#03090c,#18232a 48%,#03090c);border:1px solid #2c434b;box-shadow:inset 0 3px 9px #000c}
.collector-slot{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid #2d3c42;background:radial-gradient(circle at 40% 35%,#243037,#060b0e 75%);box-shadow:inset 0 2px 5px #000c}
.collector-slot.filled{border-color:#536c74;animation:collector-arrive .24s ease-out}
@keyframes collector-arrive{from{transform:scale(.65);opacity:.5}to{transform:scale(1);opacity:1}}
@media(max-width:850px){.scoreline{grid-template-columns:1fr 1fr;gap:8px}.centerStatus{grid-column:1/-1;grid-row:2}.player{min-height:72px;padding:7px}.avatar{width:43px;height:43px;font-size:13px}.player-head>span{font-size:12px}.remaining-balls{gap:3px}.hud-ball.mini{width:20px;height:20px;font-size:9px}.collector-track{gap:4px}.collector-slot{width:29px;height:29px}.collector-slot .hud-ball{width:25px;height:25px;font-size:10px}}
@media(max-width:480px){.player-head{flex-wrap:wrap;gap:2px}.player small{font-size:9px}.avatar{width:35px;height:35px}.collector-heading{font-size:10px}.collector-slot{width:26px;height:26px}.collector-slot .hud-ball{width:23px;height:23px}}

/* 888 POOL - palline PNG numerate, nessuna sfera disegnata con CSS */
.hud-ball{display:block;flex:none;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 2px #0008);user-select:none;-webkit-user-drag:none;background:none;border:0;box-shadow:none;border-radius:0}
.hud-ball.mini{width:30px;height:30px}
.hud-ball.pending{width:22px;height:22px;border:2px solid #4b5964;border-radius:50%;background:#0a1117;box-shadow:inset 0 2px 4px #0009}
.remaining-balls{gap:3px}
.gamecontrols .control{width:min(330px,50vw)}
/* Selettore degli effetti: esattamente fra i due pannelli giocatore. */
.scoreline{grid-template-columns:minmax(260px,1fr) minmax(120px,170px) minmax(260px,1fr);overflow:visible;position:relative;z-index:2}
.spin-center{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}
.spin-toggle{display:flex;flex-direction:column;align-items:center;gap:1px;background:transparent;border:0;padding:0;cursor:pointer;color:#d8bc8d;touch-action:manipulation}
.spin-trigger-ball{position:relative;display:block;width:55px;height:55px;border-radius:50%;box-shadow:0 2px 12px #0009,0 0 0 2px #b89a6280}
.spin-trigger-ball img,.spin-surface img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none}
.spin-trigger-ball .spin-spot{width:8px;height:8px;border:1px solid white;box-shadow:0 0 2px #0009}
.spin-caption{font:800 9px/1.1 Arial,sans-serif;letter-spacing:.18em}
.spin-toggle:hover .spin-trigger-ball,.spin-toggle[aria-expanded="true"] .spin-trigger-ball{box-shadow:0 0 0 2px #d3b36e,0 0 18px #d6a64a77}
.spin-center .centerStatus{font-size:10px;line-height:1.25;max-width:180px;max-height:27px;overflow:hidden;color:#d5c6aa;min-height:12px}
.spin-panel[hidden]{display:none!important}
.spin-panel{position:absolute;z-index:20;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:252px;padding:13px 14px 14px;border:1px solid #b79a69;border-radius:15px;background:linear-gradient(145deg,#1c2b32,#091117);box-shadow:0 14px 40px #000e,0 0 0 2px #162d35;display:flex;flex-direction:column;align-items:center;gap:10px}
.spin-panel::before{content:"";position:absolute;top:-7px;width:12px;height:12px;transform:rotate(45deg);background:#1c2b32;border-left:1px solid #b79a69;border-top:1px solid #b79a69}
.spin-panel-title{width:100%;text-align:center;font-size:12px;font-weight:900;letter-spacing:.11em;color:#e8d5a9;position:relative}
.spin-close{position:absolute;right:0;top:-7px;background:transparent;border:0;color:#dfd1bd;font-size:22px;cursor:pointer;padding:2px 6px}
.spin-panel-help{margin:0;color:#b4c0bf;font-size:10px;text-align:center}
.spin-surface{position:relative;width:184px;height:184px;border-radius:50%;cursor:crosshair;touch-action:none;outline:none;box-shadow:0 2px 16px #000b}
.spin-surface:focus-visible{outline:2px solid #f2cf81;outline-offset:3px}
.spin-crosshair{position:absolute;pointer-events:none;background:#606d7399}
.spin-crosshair.horizontal{height:1px;left:13%;right:13%;top:50%}
.spin-crosshair.vertical{width:1px;top:13%;bottom:13%;left:50%}
.spin-spot{position:absolute;left:50%;top:50%;width:15px;height:15px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 27%,#ffaea7,#f22e2b 47%,#9a0e10);border:2px solid #fff;box-shadow:0 1px 4px #000b;pointer-events:none}
.spin-values{font-size:10px;color:#e2d4ae;text-align:center;min-height:15px;font-weight:bold}
.spin-actions{display:flex;width:100%;gap:8px}
.spin-actions button{flex:1;padding:9px;border:1px solid #7b8f95;border-radius:7px;background:#263941;color:#fff;font-size:11px;font-weight:bold;cursor:pointer}
.spin-actions #spinApply{background:#a77a39;border-color:#d6ad67;color:#171008}
@media(max-width:850px){.scoreline{grid-template-columns:1fr 100px 1fr}.spin-center .centerStatus{font-size:9px}.spin-trigger-ball{width:44px;height:44px}.hud-ball.mini{width:24px;height:24px}.spin-panel{top:calc(100% + 9px)}}
@media(max-width:550px){.scoreline{grid-template-columns:1fr 64px 1fr;gap:4px;padding:6px 4px}.spin-trigger-ball{width:38px;height:38px}.spin-caption{font-size:8px}.spin-center .centerStatus{font-size:8px}.spin-panel{left:50%;width:224px}.spin-surface{width:170px;height:170px}}

/* 888 POOL · HUD compatto e vicino alla cornice fisica (non modifica il canvas logico). */
.app{width:min(1200px,98vw);padding-top:4px}
.topbar{height:39px}
.topbar strong{font-size:18px}
.topbar button{min-height:29px;padding:0 13px}
.scoreline{width:80%;margin:0 auto;padding:3px 0 5px;gap:7px;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);z-index:5}
.player{min-height:57px;padding:5px 8px;gap:7px;border-radius:9px}
.avatar{width:40px;height:40px;font-size:13px;border-radius:8px}
.player-data{gap:3px}
.player-head>span{font-size:12px}
.player small{font-size:9px}
.remaining-balls{gap:1px;min-height:20px;flex-wrap:nowrap;overflow:hidden}
.hud-ball.mini{width:22px;height:22px}
.hud-ball.pending{width:19px;height:19px}
.spin-center{gap:0}
.spin-trigger-ball{width:43px;height:43px}
.spin-caption{font-size:8px;letter-spacing:.1em}
.spin-center .centerStatus{font-size:9px;max-width:110px;max-height:22px;line-height:1.1}
.spin-panel{top:calc(100% - 3px);width:222px;padding:9px 10px 10px;gap:6px;z-index:25}
.spin-panel-title{font-size:10px}
.spin-panel-help{font-size:9px}
.spin-surface{width:164px;height:164px}
.spin-values{font-size:9px}
.spin-toggle{cursor:crosshair}
/* L'immagine mantiene 1200x690 pixel logici: ritagliamo solo margini decorativi.
   Il rettangolo del canvas resta quello usato da eventPoint() per i tiri. */
.canvas-holder{aspect-ratio:1200/585;overflow:hidden}
.canvas-holder canvas{transform:translateY(-5.8%)}
.ball-collector{width:80%;margin:4px auto 0;padding:5px 8px 7px;border-radius:9px}
.collector-heading{margin-bottom:4px;font-size:9px;letter-spacing:.13em}
.collector-track{min-height:30px;gap:3px;padding:3px 5px}
.collector-slot{width:27px;height:27px}
.collector-slot .hud-ball{width:25px;height:25px}
.gamecontrols{margin:6px auto 0;gap:9px}
.gamecontrols button{min-height:31px;padding:0 13px;font-size:11px}
.hint{margin:5px 10px;font-size:10px}
@media(max-width:900px){
 .scoreline,.ball-collector{width:90%}
 .scoreline{grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);gap:4px}
 .player{min-height:49px;padding:4px;gap:4px}
 .avatar{width:32px;height:32px;font-size:11px}
 .player-head>span{font-size:10px}
 .player small{display:none}
 .hud-ball.mini{width:18px;height:18px}
 .collector-slot{width:23px;height:23px}
 .collector-slot .hud-ball{width:22px;height:22px}
 .spin-trigger-ball{width:38px;height:38px}
}
@media(max-width:560px){
 .scoreline,.ball-collector{width:96%}
 .scoreline{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr)}
 .avatar{width:25px;height:25px;font-size:9px}
 .spin-trigger-ball{width:33px;height:33px}
 .spin-center .centerStatus{font-size:8px;max-width:100px}
 .collector-track{gap:1px;padding:2px}
 .collector-slot{width:18px;height:18px}
 .collector-slot .hud-ball{width:18px;height:18px}
 .spin-panel{width:210px}
}

/* 888 POOL · HUD STANZE PRIVATE PREMIUM / 35-second shot clock.
   Solo interfaccia, nessuna modifica al canvas o alla fisica. */
.topbar{gap:16px}
.topbar .top-status{flex:1;max-width:none;min-width:0;max-height:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:11px;letter-spacing:.025em;color:#e5cba3;font-weight:700}
.scoreline{width:84%;grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr);gap:9px;padding:5px 7px;margin:0 auto 1px;min-height:91px;background:linear-gradient(180deg,#111c27 0%,#0b111a 100%);border:2px solid #334352;border-radius:15px;box-shadow:0 3px 18px #0009,inset 0 1px 0 #ffffff12}
.player{min-height:76px;opacity:.83;gap:10px;padding:6px 9px;border:3px solid #4c6071;border-radius:12px;background:linear-gradient(145deg,#1c2b3b 0%,#0d1623 72%);box-shadow:inset 0 1px 0 #ffffff1b,0 2px 6px #0008;transition:border-color .2s,box-shadow .2s,opacity .2s}
.player.active{opacity:1;border:4px solid #50fa75;padding:5px 8px;background:linear-gradient(145deg,#193b34,#0c1b27 72%);box-shadow:0 0 0 2px #155f37,0 0 15px #35ff6e6b,inset 0 0 10px #29e96720}
.avatar{width:59px;height:59px;min-width:59px;border:3px solid #8097ad;border-radius:11px;background:radial-gradient(circle at 35% 20%,#42627b,#162535 75%);box-shadow:inset 0 1px 6px #ffffff28,0 2px 8px #000b;overflow:hidden}
.player.active .avatar{border-color:#83ffad;box-shadow:0 0 0 2px #1e5e4b,0 0 12px #50ff9366}
.avatar svg{width:80%;height:80%;fill:#bdc9d5;opacity:.85;filter:drop-shadow(0 2px 2px #0006)}
.player.active .avatar svg{fill:#e4f3ee}
.player-data{gap:5px;min-width:0}
.player-head>span{font-size:15px;letter-spacing:.01em;color:#f4f3ec;text-shadow:0 1px 2px #000}
.player small{font-size:9px;color:#c8d3d9;letter-spacing:.04em}
.remaining-balls{min-height:26px;gap:3px;overflow:visible}
.remaining-balls .hud-ball.mini{width:27px;height:27px;filter:drop-shadow(0 2px 2px #000b)}
.remaining-balls .hud-ball.pending{width:23px;height:23px;border:2px solid #566477;border-radius:50%;background:#080e17;box-shadow:inset 0 2px 6px #000d,0 0 1px #a9b7c2}
.spin-center{gap:2px;justify-content:center;align-self:stretch}
.spin-trigger-ball{width:46px;height:46px;box-shadow:0 0 0 2px #c3a56e,0 3px 9px #000b}
.spin-caption{font-size:8px;color:#e2cba0;letter-spacing:.1em}
.shot-clock{width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;user-select:none}
.clock-line{display:flex;align-items:baseline;justify-content:center;gap:4px;height:23px;color:#e6d6b7}
.clock-caption,.clock-unit{font:800 8px/1 Arial,sans-serif;letter-spacing:.07em;color:#9faeb7}
.clock-number{font:900 23px/1 'Trebuchet MS',Arial,sans-serif;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#e8f8f0;text-shadow:0 0 7px #35eb7c4a}
.clock-track{width:90%;height:6px;border:1px solid #4c6673;border-radius:10px;overflow:hidden;background:#030a0f;box-shadow:inset 0 1px 2px #000a}
.clock-fill{height:100%;width:100%;background:linear-gradient(90deg,#168e4d,#4eff88);border-radius:9px;box-shadow:0 0 7px #45ff86;transition:width .08s linear}
.shot-clock.warning .clock-number{color:#ffbf4c;text-shadow:0 0 9px #ffa42c8a}
.shot-clock.warning .clock-fill{background:linear-gradient(90deg,#e65122,#ffc34a);box-shadow:0 0 8px #ffb337}
.shot-clock.urgent .clock-number{color:#ff6255;animation:clock-heartbeat 1s ease-in-out infinite;text-shadow:0 0 11px #ff3434}
.shot-clock.urgent .clock-fill{background:linear-gradient(90deg,#a71a20,#ff3c31);box-shadow:0 0 8px #ff3c31}
.shot-clock.paused .clock-number{color:#9baab4;text-shadow:none}
.shot-clock.paused .clock-fill{background:#5e7280;box-shadow:none}
@keyframes clock-heartbeat{0%,100%{transform:scale(1)}45%{transform:scale(1.12)}}
.ball-collector{width:84%}
@media(max-width:900px){.scoreline,.ball-collector{width:94%}.scoreline{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);gap:5px;padding:4px}.player{min-height:63px;padding:4px;gap:5px;border-width:2px}.player.active{border-width:3px;padding:3px}.avatar{width:45px;height:45px;min-width:45px;border-width:2px}.player-head>span{font-size:11px}.remaining-balls .hud-ball.mini{width:21px;height:21px}.remaining-balls .hud-ball.pending{width:19px;height:19px}.spin-trigger-ball{width:37px;height:37px}.clock-number{font-size:20px}.clock-line{height:20px}.clock-caption,.clock-unit{font-size:7px}}
@media(max-width:560px){.scoreline,.ball-collector{width:98%}.scoreline{grid-template-columns:minmax(0,1fr) 65px minmax(0,1fr);gap:3px}.player{min-height:53px;gap:3px}.avatar{width:30px;height:30px;min-width:30px;border-radius:7px}.player-head>span{font-size:9px}.player small{display:none}.remaining-balls{gap:0}.remaining-balls .hud-ball.mini{width:16px;height:16px}.remaining-balls .hud-ball.pending{width:13px;height:13px}.spin-trigger-ball{width:30px;height:30px}.spin-caption{font-size:7px}.clock-caption,.clock-unit{display:none}.clock-number{font-size:17px}.clock-line{height:17px}.clock-track{height:4px}.topbar .top-status{font-size:9px}}

/* HUD minimale: solo pallina effetti fissa e barra visiva dei 35 secondi. */
.spin-center{gap:6px;justify-content:center}
.spin-toggle{touch-action:none}
.spin-trigger-ball{width:54px;height:54px}
.spin-trigger-ball .spin-spot{width:9px;height:9px}
.shot-clock{width:100%;gap:0;margin:0}
.clock-track{width:90%;height:7px;border-radius:10px}
@media(max-width:900px){.spin-trigger-ball{width:46px;height:46px}}
@media(max-width:560px){.spin-trigger-ball{width:34px;height:34px}.clock-track{height:5px}}


/* 888 POOL · Raccoglitore verticale Premium #2, SOLO PRESENTAZIONE.
   Il canvas rimane 1200x690 e non si spostano le coordinate fisiche. */
.table-stage{position:relative;isolation:isolate;width:100%;}
.table-stage>.canvas-holder{width:100%;}
.table-stage>.ball-collector{
 position:absolute;z-index:2;left:17px;top:50%;transform:translateY(-50%);
 width:82px;height:calc(100% - 20px);max-height:550px;
 margin:0;padding:9px 7px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;
 border:2px solid #5cbaff;border-radius:19px;
 background:linear-gradient(90deg,#07101b 0%,#345477 9%,#0c1c2c 23%,#03080f 48%,#12253a 78%,#4d7191 93%,#0a1724 100%);
 box-shadow:0 0 0 3px #060c14,0 0 0 4px #355875,0 0 19px #148affaa,0 0 36px #0077ff33,
 inset 2px 0 2px #d4f6ff90,inset -2px 0 3px #02080e,inset 0 2px 6px #d6f3ff5e;
 overflow:hidden;
}
.table-stage>.ball-collector:before{
 content:"";position:absolute;inset:5px;border:1px solid #75c8ff7a;border-radius:13px;
 box-shadow:inset 0 0 11px #1e91ff4d;pointer-events:none;
}
.table-stage .collector-heading{
 position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;
 margin:0;padding:3px 0 5px;border-bottom:1px solid #48a6e475;
 color:#d4edff;text-align:center;
}
.table-stage .collector-heading strong{font:900 8px/1.2 'Trebuchet MS',Arial,sans-serif;letter-spacing:.025em;text-shadow:0 0 6px #5ac5ff}
.table-stage .collector-count{font:800 11px/1.2 'Trebuchet MS',Arial,sans-serif;color:#9bdfff;letter-spacing:.03em}
.table-stage .collector-track{
 position:relative;z-index:1;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(15,minmax(0,1fr));
 align-items:center;justify-items:center;gap:2px;flex:1;min-height:0;
 width:53px;padding:4px 2px;margin:0;
 border-radius:25px;border:1px solid #3e7598;
 background:linear-gradient(90deg,#02070c 0%,#081525 16%,#172d3d 50%,#091423 82%,#02070c 100%);
 box-shadow:inset 0 0 8px #000,inset 2px 0 7px #000c,0 0 8px #289fff45;
}
.table-stage .collector-slot{
 width:min(29px,100%);height:auto;aspect-ratio:1/1;
 border:1px solid #42637d;border-radius:50%;
 background:radial-gradient(circle at 40% 28%,#233b4d,#03070d 70%);
 box-shadow:inset 0 2px 5px #000d,0 0 0 1px #06121a;
 display:grid;place-items:center;min-width:0;min-height:0;
}
.table-stage .collector-slot.filled{border-color:#70c4ff;box-shadow:inset 0 0 3px #000b,0 0 5px #38b7ff99}
.table-stage .collector-slot .hud-ball{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px #000c)}
@media(max-width:950px){
 .table-stage>.ball-collector{left:5px;width:62px;padding:7px 4px;height:calc(100% - 12px);border-radius:14px}
 .table-stage .collector-heading strong{font-size:6px}
 .table-stage .collector-track{width:40px;gap:1px}
 .table-stage .collector-slot{width:min(23px,100%)}
}
@media(max-width:700px){
 .table-stage{display:grid;grid-template-columns:49px minmax(0,1fr);align-items:stretch;gap:3px}
 .table-stage>.ball-collector{grid-column:1;grid-row:1;position:relative;top:auto;left:auto;transform:none;
  width:47px;height:100%;max-height:none;padding:5px 2px;gap:3px;overflow:hidden}
 .table-stage>.canvas-holder{grid-column:2;grid-row:1;min-width:0}
 .table-stage .collector-heading{padding:2px 0}
 .table-stage .collector-heading strong{font-size:5px;letter-spacing:0}
 .table-stage .collector-count{font-size:9px}
 .table-stage .collector-track{width:35px;overflow-y:auto;overflow-x:hidden;grid-template-rows:repeat(15,22px);align-content:start;padding:3px 1px;scrollbar-width:thin}
 .table-stage .collector-slot{width:21px}
}


/* 888 POOL: tre palline decorative in cima al raccoglitore Premium. */
.table-stage .collector-ornament{
 position:relative;z-index:2;flex:0 0 43px;width:70px;height:43px;
 margin:-2px 0 -2px;pointer-events:none;
 filter:drop-shadow(0 3px 3px #000b);
}
.table-stage .collector-ornament::before{
 content:"";position:absolute;left:10px;right:10px;bottom:2px;height:5px;
 border-radius:50%;background:linear-gradient(90deg,#4c2d09,#ffdb78,#6d4210);
 box-shadow:0 0 6px #ffd27c8a;
}
.table-stage .ornament-ball{
 position:absolute;top:8px;width:31px;height:31px;object-fit:contain;
 filter:drop-shadow(0 2px 2px #000b);user-select:none;
}
.table-stage .ornament-left{left:5px;transform:rotate(-10deg);z-index:1}
.table-stage .ornament-right{right:5px;transform:rotate(10deg);z-index:1}
.table-stage .ornament-center{left:50%;top:0;transform:translateX(-50%);width:37px;height:37px;z-index:3}
/* Nessuna cornice marrone/dorata sulla pallina degli effetti, nemmeno in hover. */
.spin-trigger-ball,
.spin-toggle:hover .spin-trigger-ball,
.spin-toggle[aria-expanded="true"] .spin-trigger-ball{
 box-shadow:none!important;border:0!important;outline:0!important;
}
.spin-toggle{touch-action:none;cursor:grab}
.spin-toggle:active{cursor:grabbing}
.spin-trigger-ball img{pointer-events:none}
@media(max-width:950px){
 .table-stage .collector-ornament{width:51px;height:33px;flex-basis:33px}
 .table-stage .ornament-ball{width:24px;height:24px;top:7px}
 .table-stage .ornament-center{width:29px;height:29px;top:0}
 .table-stage .ornament-left{left:1px}
 .table-stage .ornament-right{right:1px}
}
@media(max-width:700px){
 .table-stage .collector-ornament{width:38px;height:28px;flex-basis:28px}
 .table-stage .ornament-ball{width:19px;height:19px;top:6px}
 .table-stage .ornament-center{width:24px;height:24px;top:0}
}

/* Solo pulsante e stato del primo test multiplayer. Nessun cambio al tavolo. */
#onlineBtn{min-height:52px;border-color:#6acb9c;background:linear-gradient(#216d4f,#133e31);width:100%}
.online-status{margin-top:10px;max-width:540px;text-align:center;color:#8de0b6;font-size:12px;line-height:1.45;min-height:34px}

/* 888Pool cinematic lobby: independent visual layer; no physics/rendering changes. */
.menu-screen{
 position:fixed;inset:0;z-index:100;min-height:0;
 display:flex;align-items:center;justify-content:center;
 background:#050608;overflow:hidden;padding:0;
}
.menu-screen.hidden{display:none}
.lobby-art{
 position:relative;width:min(100vw,calc(100dvh * 1672 / 941));
 aspect-ratio:1672/941;flex:none;
 background:#0b110d url('888pool_lobby.webp') center / 100% 100% no-repeat;
 box-shadow:0 0 80px #000a;
}
.lobby-hit{
 position:absolute;z-index:1;display:block;border:0;background:transparent;
 padding:0;margin:0;cursor:pointer;border-radius:14px;
 -webkit-tap-highlight-color:transparent;
}
.lobby-hit:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 25px rgba(255,255,255,.1),0 0 20px rgba(255,210,75,.3)}
.lobby-hit:active{background:rgba(255,255,255,.17);transform:scale(.995)}
.lobby-hit:focus-visible{outline:3px solid #ffe28c;outline-offset:2px;background:rgba(255,255,255,.10)}
.lobby-hit-online{left:26.7%;top:62.1%;width:45.3%;height:13.5%;}
.lobby-hit-guest{left:31.7%;top:77.8%;width:35.1%;height:13.6%;}
.lobby-hit-login{left:77.7%;top:2.0%;width:19.5%;height:11.2%;}
.lobby-hit-rules{left:77.6%;top:78.5%;width:19.5%;height:12.1%;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.lobby-status{position:absolute;z-index:5;left:50%;bottom:2.5%;transform:translateX(-50%);max-width:90vw;
 background:rgba(2,15,13,.92);border:1px solid #d4ad59;border-radius:10px;
 padding:11px 20px;color:#e5f7e7;text-align:center;font:600 14px/1.4 Arial,sans-serif;
 box-shadow:0 5px 24px #000b;
}
.lobby-status:empty{display:none}
.lobby-dialog{position:fixed;z-index:110;max-width:min(540px,92vw);width:100%;max-height:85dvh;overflow:auto;
 color:#f7edda;background:linear-gradient(145deg,#17262b,#070c12);border:2px solid #d7a847;
 border-radius:16px;padding:30px 30px 25px;box-shadow:0 20px 80px #000e;font-family:Arial,sans-serif}
.lobby-dialog::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(5px)}
.lobby-dialog h2{margin:0 35px 20px 0;color:#f7d67b;font-size:24px;letter-spacing:.04em}
.lobby-dialog p,.lobby-dialog li{font-size:15px;line-height:1.65;color:#e2e3df}
.lobby-dialog ul{padding-left:23px}
.lobby-dialog-close{position:absolute;top:12px;right:13px;border:1px solid #8c7348;border-radius:7px;
 width:38px;height:38px;color:#f9e2a4;background:#202632;font-size:28px;cursor:pointer}
.lobby-dialog .lobby-subtitle{color:#e9bc66;font-weight:bold}
.lobby-dialog .lobby-muted{font-size:13px;color:#acb5b8}
@media(max-width:650px){.lobby-hit{border-radius:5px}.lobby-dialog{padding:22px 18px}}


/* 888Pool premium lobby: fix exact transparent hitboxes.
   Override legacy #onlineBtn { width:100%; background:... }.
   The art already contains every visual button and its glow. */
.menu-screen .lobby-art #onlineBtn.lobby-hit-online {
  position:absolute;left:26.7%;top:62.1%;width:45.3%;height:13.5%;
  min-width:0;min-height:0;max-width:none;
  display:block;margin:0;padding:0;border:0;border-radius:14px;
  background:transparent;box-shadow:none;opacity:1;
}
.menu-screen .lobby-art .lobby-hit,
.menu-screen .lobby-art .lobby-hit:hover,
.menu-screen .lobby-art .lobby-hit:active,
.menu-screen .lobby-art .lobby-hit:focus-visible {
  background:transparent;box-shadow:none;filter:none;
  border:0;transform:none;
}
.menu-screen .lobby-art .lobby-hit:focus-visible {
  outline:2px solid #ffe18a;outline-offset:-3px;
}


/* 888Pool: compact lower-left leaderboard; does not obscure the table or buttons. */
.menu-screen .lobby-art .lobby-rankings {
 position:absolute;z-index:2;left:2%;bottom:6.6%;width:22.1%;height:12.4%;
 display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:5%;
 padding:1.1% 1.3%;margin:0;cursor:pointer;
 border:1px solid rgba(237,181,73,.9);border-radius:10px;
 background:linear-gradient(145deg,rgba(7,15,24,.94),rgba(12,26,31,.86));
 box-shadow:inset 0 1px 0 rgba(255,232,172,.12),0 2px 8px rgba(0,0,0,.38);
 color:#f5e6c2;font-family:Arial,sans-serif;text-align:left;
 -webkit-tap-highlight-color:transparent;
}
.menu-screen .lobby-art .lobby-rankings:hover {
 border-color:#ffe09a;background:linear-gradient(145deg,rgba(15,28,39,.97),rgba(15,34,38,.93));
}
.menu-screen .lobby-art .lobby-rankings:focus-visible {outline:2px solid #fff2c2;outline-offset:2px}
.lobby-rankings-head{display:block;color:#f8d47c;font-weight:900;letter-spacing:.05em;
 font-size:clamp(8px,1.0vw,14px);line-height:1.15;white-space:nowrap}
.lobby-rankings-body{display:flex;flex-direction:column;gap:2px;min-height:0;
 font-size:clamp(8px,.83vw,12px);line-height:1.15;color:#d9e5e6;overflow:hidden}
.lobby-rankings-row{display:flex;gap:6px;align-items:center;justify-content:space-between;white-space:nowrap}
.lobby-rankings-row .rank-name{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.lobby-rankings-row .rank-score{color:#e8c578;font-variant-numeric:tabular-nums}
@media(max-width:620px){.menu-screen .lobby-art .lobby-rankings{border-radius:5px;border-width:1px;gap:2px}}


/* 888Pool compact match layout: preserve the game canvas coordinates and physics. */
@media (min-width: 960px) {
  .app { width:min(1280px,98vw); padding-top:3px; }
  .arena {
    display:grid;
    grid-template-columns:minmax(0,1fr) 252px;
    grid-template-rows:auto auto;
    gap:5px 14px;
    position:relative;
    align-items:start;
  }
  .arena > .scoreline { grid-column:1;grid-row:1;width:92%;margin:0 auto; }
  .arena > .table-stage { grid-column:1;grid-row:2;min-width:0; }
  .arena > .match-chat { grid-column:2;grid-row:1 / 3;align-self:stretch; }
}
.match-chat {
 min-width:0;min-height:320px;display:flex;flex-direction:column;
 border:1px solid #39516a;border-radius:13px;overflow:hidden;
 background:linear-gradient(145deg,#101b28,#080d14 75%);
 box-shadow:inset 0 1px 0 #6d819355,0 6px 20px #0008;
 color:#dbe7ed;font-family:Arial,sans-serif;
}
.match-chat-head{display:flex;align-items:center;justify-content:space-between;
 padding:10px 12px;border-bottom:1px solid #37556b;
 color:#d8c393;font-size:13px;font-weight:900;letter-spacing:.13em;
 background:linear-gradient(#20334a,#101c2b)}
.game-tools-toggle{font:700 21px/1 Arial,sans-serif;width:34px;height:28px;padding:0;
 background:#101c2b;border:1px solid #637e93;border-radius:7px;color:#e9d5ac;cursor:pointer}
.game-tools-toggle:hover,.game-tools-toggle[aria-expanded="true"]{border-color:#dfbc74;background:#2b3440}
.match-chat-body{flex:1;min-height:200px;display:grid;place-items:center;padding:12px}
.match-chat-placeholder{text-align:center;font-weight:700;letter-spacing:.08em;color:#9aaebd;font-size:12px;line-height:2}
.match-chat-placeholder small{font-size:11px;letter-spacing:0;font-weight:400;color:#8295a5}
.match-chat-foot{border-top:1px solid #293e50;text-align:center;padding:12px 6px;
 color:#8ba3b2;font-size:10px;letter-spacing:.07em}
/* Hidden controls stay in the document: existing game.js handlers remain connected. */
.arena > .gamecontrols {position:absolute!important;top:auto;left:auto;right:0;bottom:0;
 width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);
 opacity:0;pointer-events:none;z-index:10;}
.arena > .gamecontrols.tools-open {width:min(300px,96%);height:auto;clip-path:none;opacity:1;
 overflow:visible;pointer-events:auto;right:0;bottom:43px;
 padding:12px;display:flex;flex-direction:column;align-items:stretch;gap:9px;
 background:#0b1624f5;border:1px solid #b99a5d;border-radius:12px;
 box-shadow:0 8px 30px #000c;}
.arena > .gamecontrols.tools-open .control {width:100%;}
.arena > .gamecontrols.tools-open button {width:100%;}
.arena > .hint {display:none!important;}
@media(max-width:959px){
 .app{width:min(920px,98vw)}
 .match-chat{margin:10px auto 0;width:min(100%,700px);min-height:180px}
 .match-chat-body{min-height:105px}
 .arena{position:relative}
}
@media(max-width:959px){.arena > .gamecontrols.tools-open{right:5px;bottom:48px;}}


/* 888Pool · STEP 1: LUXURY LOUNGE BACKGROUND ONLY.
   No screenshot UI, table, cue, balls or avatars in this background.
   The original 2D canvas is kept in normal document flow. */
html { background:#090807; }
body {
 background-color:#090807;
 background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),url("888pool_sala_sfondo.webp");
 background-repeat:no-repeat;
 background-position:center center;
 background-size:cover;
 background-attachment:fixed;
}
.app {background:transparent;}
.table-stage {position:relative; isolation:isolate;}
.table-stage>.canvas-holder {width:100%;}
.table-stage>.ball-collector {display:none!important;}
/* The lobby retains its own full-screen art and remains unaffected. */


/* 888Pool · STEP 1B: hide ONLY the opaque canvas margins around the table.
   The canvas keeps its full 1200x690 geometry for mouse aim and physics.
   This is a VISUAL crop, not a resize or a game logic change. */
.table-stage > .canvas-holder {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: hidden;
  clip-path: inset(4.5% 12.5% 5.5% 12.5% round 25px);
}
/* On smaller viewports the same proportional mask follows the table. */


/* ===============================================================
   888POOL ARENA · Independent layers. No photographic game table.
   Stadium edges are decorative only. The original canvas remains
   the only source of table, cue, balls, and pocket geometry.
   =============================================================== */
html { background:#050b17; }
body {
  background-color:#050b17;
  background-image:
    radial-gradient(ellipse at 50% 5%, rgba(13,76,130,.38),transparent 48%),
    radial-gradient(ellipse at 50% 70%, rgba(4,20,42,.76),rgba(3,7,15,.95) 78%),
    linear-gradient(90deg,#040911,#111b2a 20%,#08101c 80%,#040911);
  background-attachment:fixed;
  background-size:cover;
  position:relative;
  min-height:100dvh;
}
body::before,body::after {
  content:"";position:fixed;top:0;bottom:0;width:min(16vw,245px);
  z-index:0;pointer-events:none;opacity:.70;
  background-image:linear-gradient(90deg,transparent,rgba(3,10,22,.48)),url('888pool_arena_tribuna.webp');
  background-size:100% 100%,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
body::before{left:0;}
body::after{right:0;transform:scaleX(-1);}
.app {position:relative;z-index:1;width:min(1440px,98vw);padding:4px 0 8px;background:transparent;}
.topbar {
  position:relative;height:102px;display:flex;align-items:flex-end;justify-content:center;
  padding:0 14px 9px;gap:0;
  background:linear-gradient(180deg,rgba(2,8,20,.76),rgba(3,11,23,.90) 74%,rgba(3,11,23,0));
}
.topbar .arena-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1;pointer-events:none;}
.topbar .arena-brand strong{font:900 clamp(33px,4.0vw,61px)/.94 Arial,sans-serif;letter-spacing:.02em;
 background:linear-gradient(#fff2b9 5%,#eebd54 48%,#a46a26);background-clip:text;-webkit-background-clip:text;color:transparent;
 filter:drop-shadow(0 3px 4px #000);}
.topbar .arena-brand small{margin-top:5px;color:#e9c78c;font:700 10px/1.1 Arial,sans-serif;letter-spacing:.28em;}
.topbar .arena-brand .brand-crown{color:#f8c65c;font-size:26px;line-height:1;filter:drop-shadow(0 1px 5px #e8ac4b55);}
.topbar #status {position:absolute;left:16px;bottom:16px;max-width:23%;text-align:left;
 font-size:10px;letter-spacing:.03em;white-space:normal;line-height:1.2;}
.topbar #menuBtn {position:absolute;right:10px;top:24px;min-height:41px;padding:0 20px;
 border:1px solid #d5a448;border-radius:9px;color:#f6d887;background:linear-gradient(#111f33,#040a14);
 box-shadow:inset 0 1px #ffe6a322,0 0 13px #c7922933;}
.arena {display:grid;grid-template-columns:minmax(0,1fr) 255px;
 grid-template-rows:auto auto auto;gap:6px 14px;align-items:start;position:relative;}
.arena > .scoreline {grid-column:1;grid-row:1;width:96%;margin:0 auto;padding:4px 8px;
 background:transparent;border:0;box-shadow:none;min-height:80px;}
.arena > .arena-ad-strip {grid-column:1;grid-row:2;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 1px;}
.arena > .table-stage {grid-column:1;grid-row:3;min-width:0;margin:0;}
.arena > .match-chat {grid-column:2;grid-row:1 / 4;align-self:stretch;min-height:0;}
.scoreline .player{background:linear-gradient(170deg,rgba(16,30,46,.98),rgba(3,9,19,.98));
 border:1px solid #a98749;border-radius:13px;box-shadow:inset 0 1px #ffe2a822,0 6px 18px #0009;opacity:.78;}
.scoreline .player.active{opacity:1;border-color:#56ed81;
 box-shadow:0 0 0 2px #49e57544,0 0 14px #42f76c55,inset 0 1px #fff4;}
.scoreline .avatar{border-color:#d6ad62;background:linear-gradient(145deg,#243f5c,#111b2b);}
.scoreline .player-head>span{color:#fff0d4;}
.scoreline .remaining-balls{min-height:26px;}
.scoreline .spin-trigger-ball{box-shadow:0 0 0 3px #d4a849,0 0 0 7px #6d4b24,0 0 18px #d5a64a77;}
.ad-slot{display:flex;align-items:center;justify-content:center;min-width:0;
 background:linear-gradient(155deg,rgba(13,36,67,.94),rgba(4,16,33,.97));
 border:1px solid #c89a46;border-radius:7px;
 box-shadow:inset 0 1px 0 #fff4,0 4px 16px #0009;overflow:hidden;}
.ad-slot>span{font:800 13px/1 Arial,sans-serif;letter-spacing:.16em;color:#e9c67c;}
.ad-slot-top{height:51px;}
.table-stage>.canvas-holder{background:transparent!important;box-shadow:none!important;}
.table-stage>.ball-collector{display:none!important;}
.match-chat{border:1px solid #99723d;border-radius:12px;
 background:linear-gradient(180deg,#12253a,#07121f 50%,#07101c);
 box-shadow:inset 0 1px #ffffff22,0 8px 25px #000b;}
.match-chat-head{background:linear-gradient(#193149,#0c1a2c);border-bottom-color:#b18b4d;color:#f5d48d;}
.match-chat-placeholder{color:#bfd2e2;}
.arena-footer {margin-top:6px;min-height:57px;display:grid;grid-template-columns:1fr minmax(360px,2.2fr) 1fr;
 gap:15px;align-items:center;padding:3px 12px;
 background:linear-gradient(90deg,rgba(5,13,26,.90),rgba(9,23,40,.98),rgba(5,13,26,.90));
 border-top:1px solid #b18b4b77;border-bottom:1px solid #b18b4b55;}
.arena-footer-name{display:flex;flex-direction:column;gap:3px;}
.arena-footer-name strong{font-size:18px;letter-spacing:.09em;color:#f0c56e;}
.arena-footer-name small{font-size:9px;color:#aabed0;letter-spacing:.1em;}
.arena-footer-copy{text-align:right;color:#d6b97c;font-weight:700;font-size:11px;letter-spacing:.12em;}
.ad-slot-bottom{height:48px;}
/* Preserve the visual crop of the opaque canvas margin, not its geometry. */
.table-stage > .canvas-holder{clip-path:inset(4.5% 12.5% 5.5% 12.5% round 25px);}
@media(max-width:1050px){
 .app{width:min(100%,98vw)}
 .arena{grid-template-columns:minmax(0,1fr) 225px;gap:6px 8px;}
 .arena > .scoreline{width:100%;}
 .scoreline .player{padding:5px 6px;}
 .ad-slot>span{font-size:10px;}
 .arena-footer{grid-template-columns:1fr minmax(180px,2fr);}
 .arena-footer-copy{display:none;}
}
@media(max-width:760px){
 .topbar{height:92px;}
 .topbar #status{display:none;}
 .topbar #menuBtn{right:5px;top:5px;padding:0 9px;min-height:30px;font-size:11px;}
 .arena{display:flex;flex-direction:column;gap:7px;}
 .arena > .scoreline,.arena > .arena-ad-strip,.arena > .table-stage,.arena > .match-chat{width:100%;}
 .arena > .scoreline{order:0;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);}
 .arena > .arena-ad-strip{order:1;}
 .arena > .table-stage{order:2;}
 .arena > .match-chat{order:3;min-height:180px;}
 .ad-slot-top{height:42px;}
 .arena-footer{grid-template-columns:1fr;}
 .arena-footer-name{display:none;}
}

/* ==============================================================
   888POOL · VIEWPORT FIT v2
   Compact desktop arena: preserve canvas aspect ratio and all
   pointer/game coordinates. No clipping or stretching of canvas.
   Enabled only when the actual game is visible.
   ============================================================== */
@media (min-width: 761px) {
 body.arena-viewport-mode {overflow-x:hidden;overflow-y:hidden;}
 body.arena-viewport-mode .app {
   max-width:none;
   margin:0 auto;
   padding:3px 0 3px;
 }
 body.arena-viewport-mode .topbar {height:72px;padding-bottom:5px;}
 body.arena-viewport-mode .topbar .arena-brand strong {font-size:clamp(30px,3.1vw,47px);}
 body.arena-viewport-mode .topbar .arena-brand .brand-crown {font-size:18px;}
 body.arena-viewport-mode .topbar .arena-brand small {font-size:9px;margin-top:2px;}
 body.arena-viewport-mode .topbar #menuBtn {top:14px;min-height:34px;padding:0 13px;}
 body.arena-viewport-mode .topbar #status {bottom:9px;}
 body.arena-viewport-mode .arena {gap:4px 10px;}
 body.arena-viewport-mode .arena > .scoreline {min-height:65px;padding:2px 4px;width:100%;}
 body.arena-viewport-mode .scoreline .player {min-height:62px;padding:3px 8px;}
 body.arena-viewport-mode .scoreline .avatar {width:49px;height:49px;min-width:49px;}
 body.arena-viewport-mode .scoreline .spin-trigger-ball {width:43px;height:43px;}
 body.arena-viewport-mode .scoreline .remaining-balls .hud-ball.mini {width:23px;height:23px;}
 body.arena-viewport-mode .scoreline .remaining-balls .hud-ball.pending {width:20px;height:20px;}
 body.arena-viewport-mode .ad-slot-top {height:39px;}
 body.arena-viewport-mode .ad-slot>span {font-size:clamp(9px,1vw,12px);}
 body.arena-viewport-mode .arena-footer {min-height:45px;margin-top:4px;padding:2px 9px;gap:10px;}
 body.arena-viewport-mode .ad-slot-bottom {height:39px;}
 body.arena-viewport-mode .arena-footer-name strong {font-size:15px;}
 body.arena-viewport-mode .arena-footer-name small {font-size:8px;}
 body.arena-viewport-mode .match-chat {margin:0;min-height:0;width:auto;}
 body.arena-viewport-mode .match-chat-body {min-height:0;}
 body.arena-viewport-mode .arena > .table-stage {min-width:0;}
}


/* ================================================================
   888POOL · HUD CHAMPIONSHIP v4
   Strong visual redesign of player cards and spin selector only.
   Preserve viewport-fit, arena background, canvas and game controls.
   ================================================================ */
.scoreline .player {
 position:relative; isolation:isolate; overflow:hidden;
 border:2px solid #e5bd65;
 border-radius:12px;
 background:linear-gradient(105deg,#233e58 0%,#13283d 19%,#071421 62%,#101c2b 100%);
 box-shadow:0 0 0 1px #513e24, inset 0 2px 0 #ffe2a04d, inset 0 -3px 0 #02070dcc, 0 5px 14px #000b;
 opacity:.84;
}
.scoreline .player::before {
 content:""; position:absolute; left:0;top:0;bottom:0;width:6px;
 background:linear-gradient(180deg,#fff0b7,#bc842e 45%,#ffe6a0);
 box-shadow:2px 0 10px #f0bc5a77;pointer-events:none;
}
.scoreline .player::after {
 content:""; position:absolute; top:0;right:0;width:110px;height:100%;
 background:repeating-linear-gradient(120deg,transparent 0 13px,#eac17112 14px 16px,transparent 17px 30px);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000);
 pointer-events:none;
}
.scoreline .player.active {
 opacity:1;
 border-color:#67f5a5;
 background:linear-gradient(105deg,#184c45 0%,#0d3135 25%,#071e2a 70%,#0b2433 100%);
 box-shadow:0 0 0 1px #208f5b,0 0 18px #46ff9d88,inset 0 2px 0 #dcffe95e,inset 0 -3px 0 #020a0dcc;
}
.scoreline .player.active::before {
 background:linear-gradient(180deg,#d8ffe9,#28c774 48%,#8bffc2);
 box-shadow:2px 0 14px #36f998b0;
}
.scoreline .avatar {
 position:relative;z-index:1;flex-shrink:0;
 border:2px solid #ffdb85;
 border-radius:10px;
 background:radial-gradient(circle at 38% 18%,#496c87,#1a324a 53%,#071321 100%);
 box-shadow:0 0 0 2px #352b1b,0 0 0 3px #a37c3c,0 3px 8px #000b;
}
.scoreline .player.active .avatar {
 border-color:#a4ffca;
 box-shadow:0 0 0 2px #0d3f2c,0 0 0 3px #48e891,0 0 12px #58ffab99;
}
.scoreline .avatar svg{fill:#e7f3f8;opacity:1;filter:drop-shadow(0 2px 3px #000a)}
.scoreline .player-data{position:relative;z-index:1}
.scoreline .player-head>span{
 color:#ffe5a2;font-weight:900;letter-spacing:.08em;
 text-shadow:0 2px 3px #000,0 0 10px #c38a3744;
}
.scoreline .player.active .player-head>span{color:#e5fff1;text-shadow:0 0 8px #4aff9a70}
.scoreline .player-head small{color:#f5d58e;font-weight:900;letter-spacing:.04em}
.scoreline .player.active .player-head small{color:#93ffc1}
.scoreline .remaining-balls{
 padding-top:3px;border-top:1px solid #e9c77e55;
 filter:drop-shadow(0 1px 2px #0009);
}
.scoreline .player.active .remaining-balls{border-top-color:#66f5a455}
/* A clear golden instrument ring around the real, clickable spin ball. */
.scoreline .spin-toggle{
 position:relative;isolation:isolate;overflow:visible;outline-offset:9px;
}
.scoreline .spin-toggle::before{
 content:"";position:absolute;left:50%;top:50%;z-index:0;
 width:62px;height:62px;transform:translate(-50%,-50%);
 border-radius:50%;pointer-events:none;
 background:conic-gradient(from -45deg,#ffe9a9 0deg 8deg,#624822 8deg 85deg,#ffe9a9 85deg 98deg,#624822 98deg 175deg,#ffe9a9 175deg 188deg,#624822 188deg 265deg,#ffe9a9 265deg 278deg,#624822 278deg 355deg,#ffe9a9 355deg);
 -webkit-mask:radial-gradient(circle,transparent 0 68%,#000 71% 100%);
 mask:radial-gradient(circle,transparent 0 68%,#000 71% 100%);
 filter:drop-shadow(0 0 4px #e3b459);
}
.scoreline .spin-toggle::after{
 content:"";position:absolute;z-index:-1;left:50%;top:50%;
 width:69px;height:69px;transform:translate(-50%,-50%);
 border-radius:50%;border:1px solid #e9bf6a77;
 box-shadow:0 0 13px #dfaa4d55;pointer-events:none;
}
.scoreline .spin-trigger-ball{position:relative;z-index:1}
.scoreline .spin-center .clock-track{border-color:#d1aa63;background:#091725}
@media(max-width:760px){
 .scoreline .player::before{width:4px}
 .scoreline .spin-toggle::before{width:50px;height:50px}
 .scoreline .spin-toggle::after{width:56px;height:56px}
}


/* ====================================================================
   888POOL · ROYALE HUD v5 · REAL HTML/CSS, NOT A STATIC MOCKUP
   Only cosmetic: logo, player cards, avatars, spin selector, ad frames.
   All selectors bind to the existing live HUD and spin controls.
   Never changes canvas size, table geometry, hitboxes, multiplayer.
   ==================================================================== */

/* Crowned, bevelled, backlit championship logotype */
.topbar .arena-brand {
  position:relative; isolation:isolate; overflow:visible;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.9));
}
.topbar .arena-brand strong {
  position:relative;
  font-family:Impact,'Arial Black',Arial,sans-serif;
  font-weight:900; font-stretch:condensed;
  font-size:clamp(39px,4.3vw,64px);
  line-height:.88; letter-spacing:.065em;
  color:transparent;
  background:linear-gradient(180deg,#fffce3 0%,#fff2aa 17%,#ffd35c 38%,#c58b24 55%,#ffe18a 74%,#9e5e11 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:.65px #fff3b2;
  paint-order:stroke fill;
  text-shadow:0 2px 0 #573009,0 4px 0 #2b1705,0 8px 11px #000b,0 0 20px #f9b84c88;
  filter:drop-shadow(0 0 9px #f7bd5b6b);
}
.topbar .arena-brand .brand-crown {
  position:relative; z-index:2; font-size:25px; line-height:.75;
  color:#ffe39a; text-shadow:0 1px #a96b1d,0 0 13px #ffd55ca8;
  transform:translateY(2px);
}
.topbar .arena-brand small {
  color:#f6d48c;font-weight:900;letter-spacing:.32em;
  text-shadow:0 2px 3px #000,0 0 9px #e3a94b77;
}
.topbar .arena-brand::before,.topbar .arena-brand::after {
  content:'❧';position:absolute;top:27px;color:#e5b447;
  font:700 29px/1 Georgia,serif;opacity:.9;
  text-shadow:0 1px #422708,0 0 8px #f0b84266;
}
.topbar .arena-brand::before {left:-32px;transform:rotate(-30deg)}
.topbar .arena-brand::after {right:-32px;transform:scaleX(-1) rotate(-30deg)}

/* Player cards: polished glass, gold frame, luminous active side */
.scoreline .player {
  position:relative; isolation:isolate;overflow:hidden;
  border:2px solid #e4b753;border-radius:13px;
  background:linear-gradient(118deg,#193a59 0%,#071c33 29%,#061020 75%,#102b45 100%);
  box-shadow:0 0 0 1px #34240b,0 0 0 3px #e4ad2a26,
    inset 0 2px 0 #fff2ba88,inset 0 -4px 6px #01040dbd,
    0 7px 16px #000b,0 0 15px #dfa73e40;
  opacity:.95;
}
.scoreline .player::before {
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(125deg,#ffffff25 0%,transparent 25%,transparent 68%,#e6b75b10 80%,transparent 100%);
}
.scoreline .player::after {
  content:'★';position:absolute;right:7px;top:-5px;
  font-size:20px;color:#f4c7647a;pointer-events:none;
  text-shadow:0 0 8px #edc05b55;
}
.scoreline .player.active {
  border-color:#7bffad;
  background:linear-gradient(115deg,#164b44,#0b2934 30%,#071827 75%,#12384a);
  box-shadow:0 0 0 1px #174d30,0 0 0 3px #4af68c5b,
    inset 0 2px 0 #d6ffe6b8,inset 0 -3px 0 #02110c,
    0 0 22px #4dfca17f,0 8px 14px #000a;
  opacity:1;
}
.scoreline #p1.active {
  border-color:#73bdff;
  box-shadow:0 0 0 1px #16456a,0 0 0 3px #4ea9ff60,
    inset 0 2px 0 #e0f6ffb0,0 0 22px #329bff80,0 8px 14px #000a;
}
.scoreline .avatar {
  position:relative;z-index:1; flex-shrink:0;
  border:2px solid #ffe39b;border-radius:11px;
  background:radial-gradient(circle at 38% 20%,#53758c,#193a52 45%,#071324 90%);
  box-shadow:0 0 0 2px #37250e,0 0 0 3px #e3b65d,
    inset 0 1px 8px #ffffff38,0 0 10px #ffcd6480;
}
.scoreline #p0.active .avatar{box-shadow:0 0 0 2px #153b24,0 0 0 3px #79ffb0,0 0 13px #4afc9b}
.scoreline #p1.active .avatar{box-shadow:0 0 0 2px #123454,0 0 0 3px #77c8ff,0 0 13px #3a9bff}
.scoreline .avatar svg{width:75%;height:75%;fill:#dfeefa;filter:drop-shadow(0 2px 4px #0009)}
.scoreline .player-data{position:relative;z-index:1}
.scoreline .player-head>span {
  color:#fff3d1;font-weight:900;font-size:clamp(12px,1.25vw,17px);
  letter-spacing:.045em;text-shadow:0 1px 2px #000,0 0 8px #ffd45a4a;
}
.scoreline .player.active .player-head>span{color:#fffef2;text-shadow:0 0 9px #a2ffd6a0}
.scoreline .player-head small{font-weight:900;color:#f5d27c;text-transform:uppercase}
.scoreline .remaining-balls{border-top:1px solid #e8b95170;padding-top:3px;min-height:25px;filter:drop-shadow(0 2px 3px #000a)}
.scoreline .remaining-balls .hud-ball.mini{filter:drop-shadow(0 1px 3px #000c) drop-shadow(0 0 2px #fff3)}

/* Spin instrument: ornamental halo around the REAL button and red dot */
.scoreline .spin-center{position:relative;isolation:isolate;z-index:6;overflow:visible}
.scoreline .spin-center::before{
  content:'♛';position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  font-size:20px;line-height:1;color:#ffd976;text-shadow:0 0 8px #ffcb4a;
  pointer-events:none;
}
.scoreline .spin-toggle {position:relative;z-index:2;isolation:isolate;overflow:visible;outline-offset:12px}
.scoreline .spin-toggle::before {
  content:'';position:absolute;left:50%;top:50%;z-index:0;
  width:72px;height:72px;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from -4deg,#ffe5a0 0deg 4deg,#a86d1d 5deg 7deg,#061525 8deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 0 62%,#000 64% 100%);
  mask:radial-gradient(circle,transparent 0 62%,#000 64% 100%);
  filter:drop-shadow(0 0 7px #e6ad45);
}
.scoreline .spin-toggle::after {
  content:'';position:absolute;left:50%;top:50%;z-index:-1;
  width:82px;height:82px;transform:translate(-50%,-50%);
  border-radius:50%;border:2px solid #f6cb6caa;pointer-events:none;
  box-shadow:inset 0 0 10px #f9bd4670,0 0 13px #e8b35b70,0 0 0 4px #061627;
  background:radial-gradient(circle,#071522 48%,#0d3356 65%,#e5b04c 69%,#0a1725 72%);
}
.scoreline .spin-trigger-ball {
  position:relative;z-index:1;border-radius:50%;
  box-shadow:inset 0 0 5px #0004,0 0 0 2px #fbe7aa,0 0 11px #ffcf70b0!important;
}
.scoreline .spin-trigger-ball .spin-spot {
  width:10px;height:10px;border:1.5px solid #fff;
  background:radial-gradient(circle at 30% 20%,#ffd6c9,#f82419 50%,#a10000);
  box-shadow:0 0 0 1px #8c0000,0 0 6px #ff3737;
}
.scoreline .spin-toggle:hover::after,.scoreline .spin-toggle:focus-visible::after {
  box-shadow:0 0 20px #ffda83,0 0 0 4px #0a2440;
}

/* Premium frames, without introducing any additional ad slots */
.arena-ad-strip .ad-slot,.arena-footer .ad-slot {
  border:1.5px solid #e3b552;
  background:linear-gradient(100deg,#0c2341 0%,#0a3159 48%,#091b32 100%);
  box-shadow:inset 0 1px 0 #fff4,inset 0 -2px 0 #06101b,0 0 9px #e7ac3a65,0 3px 10px #0008;
}
.arena-ad-strip .ad-slot:nth-child(2){border-color:#f9d076;box-shadow:inset 0 1px 0 #fff6,0 0 11px #eeb44780}
.arena-ad-strip .ad-slot>span,.arena-footer .ad-slot>span{
  color:#ffdc89;text-shadow:0 1px 3px #000,0 0 8px #ffc55a44;
}

/* Preserve the established single-screen fit on desktop. */
@media (min-width:761px) {
 body.arena-viewport-mode .topbar .arena-brand strong{font-size:clamp(38px,3.65vw,54px)}
 body.arena-viewport-mode .topbar .arena-brand .brand-crown{font-size:21px}
 body.arena-viewport-mode .scoreline .player{min-height:62px}
 body.arena-viewport-mode .scoreline .avatar{width:49px;height:49px;min-width:49px}
 body.arena-viewport-mode .scoreline .spin-trigger-ball{width:43px;height:43px}
}
@media (max-width:760px) {
 .topbar .arena-brand::before,.topbar .arena-brand::after{display:none}
 .scoreline .spin-toggle::before{width:52px;height:52px}
 .scoreline .spin-toggle::after{width:59px;height:59px}
 .scoreline .spin-center::before{display:none}
 .scoreline .player::after{display:none}
}
@media (prefers-reduced-motion:reduce){.scoreline .player,.scoreline .spin-toggle{animation:none!important}}


/* ========================================================================
  888POOL · REFERENCE HUD v6 · UI CODE, NOT A SCREENSHOT BACKGROUND
  The two default avatars are individually cropped from the user's concept.
  No game physics, canvas geometry, online state, chat content or counters
  are replaced. Preserve the viewport-fit JS and original table assets.
  ======================================================================== */

/* Rich stadium header, with readable three-dimensional GOLD logo */
.topbar{isolation:isolate;overflow:visible;}
.topbar::before,.topbar::after{
  position:absolute;top:14px;white-space:pre-line;z-index:0;
  color:#eac373;font:800 clamp(9px,.95vw,14px)/1.18 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:.22em;text-shadow:0 2px 3px #000,0 0 10px #b17d2880;
  pointer-events:none;
}
.topbar::before{content:'PRECISION\A PEOPLE\A PASSION';white-space:pre;left:10%;}
.topbar::after{content:'MORE\A THAN\A A GAME';white-space:pre;right:11%;text-align:left;}
.topbar .arena-brand{position:relative;z-index:1;min-width:320px;}
.topbar .arena-brand strong{
  display:block;font-family:Impact,'Arial Black',Arial,sans-serif;
  font-size:clamp(44px,5vw,76px);font-weight:900;letter-spacing:.032em;
  line-height:.88;white-space:nowrap;
  background:linear-gradient(180deg,#fff9db 0%,#fff1a4 18%,#ffd85b 35%,#e9a62d 53%,#fff1a4 70%,#ae6a14 91%,#ffda74 100%);
  background-clip:text;-webkit-background-clip:text;color:transparent;
  -webkit-text-stroke:.45px #ffd980;
  text-shadow:none;filter:drop-shadow(0 2px 0 #8a4c08) drop-shadow(0 4px 1px #452404) drop-shadow(0 6px 7px #000c) drop-shadow(0 0 10px #eeb34266);
}
.topbar .arena-brand .brand-crown{
  font-size:clamp(22px,2.6vw,33px);color:#ffdf76;line-height:.84;
  text-shadow:0 2px 0 #8c4e09,0 0 16px #ffc247;
  transform:none;
}
.topbar .arena-brand small{
  font:900 clamp(9px,.9vw,13px)/1.15 Arial,sans-serif;
  letter-spacing:.16em;color:#fff0bf;margin-top:4px;
  text-shadow:0 2px 3px #000,0 0 8px #dca73d77;
}
.topbar .arena-brand::before,.topbar .arena-brand::after{display:none!important}
.brand-medallion{
  position:absolute;top:50%;width:clamp(46px,5.1vw,75px);height:clamp(46px,5.1vw,75px);
  display:grid;place-items:center;border-radius:50%;pointer-events:none;
  border:3px double #ffd678;
  background:radial-gradient(circle at 38% 25%,#ffffff77 0%,#475267 12%,#090f19 38%,#03070d 75%);
  box-shadow:0 0 0 3px #111b2b,0 0 0 5px #c68c27,inset 0 0 9px #000,0 0 19px #d99c38a8;
  transform:translateY(-36%);
}
.brand-medallion.left{right:calc(100% + 24px)}
.brand-medallion.right{left:calc(100% + 24px)}
.brand-medallion::before,.brand-medallion::after{content:'❧';position:absolute;top:50%;font:900 38px/1 Georgia,serif;color:#e7b44d;text-shadow:0 0 8px #c99439;}
.brand-medallion::before{right:calc(100% + 1px);transform:translateY(-50%) rotate(-30deg)}
.brand-medallion::after{left:calc(100% + 1px);transform:translateY(-50%) scaleX(-1) rotate(-30deg)}
.brand-medallion b{
  width:65%;height:65%;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#fff 0%,#e8ebef 62%,#9097a2 100%);
  color:#111;font:900 clamp(15px,1.6vw,23px)/1 Arial,sans-serif;
  box-shadow:inset -2px -4px 4px #0006,0 2px 5px #000;
}

/* The player panels are now illuminated broadcast scoreboards. */
.scoreline{isolation:isolate;overflow:visible!important;}
.scoreline .player{
  border:2px solid #f5c65d!important;border-radius:11px!important;
  background:linear-gradient(115deg,#0c2c48 0%,#06182e 24%,#030a18 75%,#071e35 100%)!important;
  box-shadow:inset 0 1px 0 #ffeeb99c,inset 0 -3px 0 #000c,0 0 0 1px #684514,0 5px 16px #000b,0 0 15px #d39b3177!important;
  opacity:1!important;overflow:hidden;position:relative;
  padding:5px 8px!important;gap:11px!important;
}
.scoreline .player::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,#3f95c21c,transparent 35%,transparent 70%,#ffffff12 80%,transparent 85%);
}
.scoreline .player::after{
  content:'✦';position:absolute;right:8px;top:2px;font-size:17px;
  color:#ffd978;filter:drop-shadow(0 0 4px #d99e43);
}
.scoreline #p0.active{
  border-color:#64ff91!important;
  box-shadow:inset 0 1px 0 #dcffe6,0 0 0 2px #138944,0 0 17px #28ff70d4,0 4px 13px #000b!important;
}
.scoreline #p1.active{
  border-color:#4daeff!important;
  box-shadow:inset 0 1px 0 #ecf8ff,0 0 0 2px #1262ba,0 0 17px #2b9affcf,0 4px 13px #000b!important;
}
.scoreline .avatar{
  width:60px;height:60px;min-width:60px;
  border:2px solid #f7c763;border-radius:10px;
  background:#101d2b;overflow:hidden;
  box-shadow:inset 0 0 4px #000,0 0 0 2px #513610,0 0 10px #ffcf6890;
}
.scoreline .avatar::before{
  content:'';position:absolute;inset:0;display:block;
  background-size:cover;background-position:center 35%;background-repeat:no-repeat;
  filter:saturate(1.12) contrast(1.08);
}
.scoreline #p0 .avatar::before{background-image:url('assets/hud/portrait_player1.webp')}
.scoreline #p1 .avatar::before{background-image:url('assets/hud/portrait_player2.webp')}
.scoreline .avatar svg{display:none!important}
.scoreline .player-data{min-width:0;z-index:1;gap:3px}
.scoreline .player-head{align-items:center;gap:6px}
.scoreline .player-head>span{
  font:900 clamp(14px,1.25vw,19px)/1.1 Arial,sans-serif;
  color:#fff!important;letter-spacing:.005em;text-shadow:0 2px 4px #000;
}
.scoreline .player-head small{
  color:#ffe1a1!important;font:800 clamp(8px,.7vw,10px)/1 Arial,sans-serif;
  background:linear-gradient(#192d43,#0a1729);border:1px solid #b88d43;
  padding:3px 5px;border-radius:4px;
}
.scoreline .remaining-balls{border:0!important;padding:1px 0 0;min-height:24px;gap:3px;flex-wrap:nowrap;overflow:hidden;}
.scoreline .remaining-balls .hud-ball.mini{
  width:clamp(20px,1.9vw,30px);height:clamp(20px,1.9vw,30px);
  filter:drop-shadow(0 2px 2px #000e) drop-shadow(0 0 2px #fff5);
}
.scoreline .remaining-balls .hud-ball.pending{width:22px;height:22px}

/* Spectacular, centered cue-ball spin control, but still the original button. */
.scoreline .spin-center{position:relative;isolation:isolate;z-index:5;overflow:visible;}
.scoreline .spin-center::before{
  content:'♛';position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  color:#ffe282;font:900 25px/1 Georgia,serif;text-shadow:0 1px #7d470a,0 0 9px #f9bd45;
  z-index:5;pointer-events:none;
}
.scoreline .spin-toggle{position:relative;z-index:3;overflow:visible;outline-offset:12px;}
.scoreline .spin-toggle::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:94px;height:94px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from -1deg,#f8d26d 0deg 4deg,#85500e 5deg 7deg,#061525 8deg 20deg);
  -webkit-mask:radial-gradient(circle,transparent 0 58%,#000 60% 100%);
  mask:radial-gradient(circle,transparent 0 58%,#000 60% 100%);
  filter:drop-shadow(0 0 6px #ffcd64);
}
.scoreline .spin-toggle::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:109px;height:109px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,transparent 0 48%,#061c38 50%,#135fbd 56%,#061e42 61%,#f6c55b 63%,#091c36 66%,transparent 70%);
  border:2px solid #d5a642;
  box-shadow:0 0 0 2px #061222,0 0 16px #d2a13e9a,inset 0 0 14px #174b95;
}
.scoreline .spin-trigger-ball{
  position:relative;z-index:1;width:65px;height:65px;
  box-shadow:0 0 0 2px #fff0b8,0 0 10px #ffd27f,inset -2px -3px 6px #0004!important;
}
.scoreline .spin-trigger-ball .spin-spot{
  width:10px;height:10px;background:radial-gradient(circle at 30% 20%,#ffcabd,#ff2720 45%,#b10000);
  border:1px solid #fff5d4;box-shadow:0 0 5px #ff3d3d;
}
.scoreline .spin-center .clock-track{border-color:#cda348;box-shadow:0 0 8px #d4a74e88;}

/* Four separate, REAL DOM advertising placements. */
.arena-ad-strip .ad-slot,.arena-footer .ad-slot{
  position:relative;border:2px solid #e6b957!important;border-radius:8px!important;
  background:linear-gradient(100deg,#081c36,#09345e 45%,#05162d)!important;
  box-shadow:inset 0 1px 0 #fff5,0 0 0 1px #6a4318,0 0 11px #c7903c8c!important;
}
.arena-ad-strip .ad-slot::before,.arena-footer .ad-slot::before{
  content:'♛';position:absolute;left:9%;top:50%;transform:translateY(-50%);
  font:900 clamp(18px,2.3vw,31px)/1 Georgia,serif;color:#277ed3;opacity:.7;
  text-shadow:0 0 8px #1c6bc4;
}
.arena-ad-strip .ad-slot::after,.arena-footer .ad-slot::after{
  content:'♛';position:absolute;right:9%;top:50%;transform:translateY(-50%);
  font:900 clamp(18px,2.3vw,31px)/1 Georgia,serif;color:#277ed3;opacity:.7;
  text-shadow:0 0 8px #1c6bc4;
}
.arena-ad-strip .ad-slot:nth-child(2){border-color:#ffd579!important;background:linear-gradient(110deg,#1c1a17,#4a3113 48%,#11131a)!important}
.arena-ad-strip .ad-slot:nth-child(2)::before,.arena-ad-strip .ad-slot:nth-child(2)::after{color:#f7c95c}
.arena-ad-strip .ad-slot>span,.arena-footer .ad-slot>span{
  color:#ffdf91!important;font:900 clamp(10px,1.0vw,14px)/1 Arial,sans-serif!important;
  letter-spacing:.06em!important;text-shadow:0 2px 3px #000,0 0 6px #ffc46b;
  z-index:1;
}

/* Chat is a polished shell. No invented participants or fake messages. */
.match-chat{border:1.5px solid #d4a750!important;background:linear-gradient(#081d34,#020b17 60%,#041326)!important;box-shadow:0 0 0 1px #4b3717,0 0 16px #000b!important}
.match-chat-head{background:linear-gradient(#0d3255,#061b32)!important;color:#fff0b7!important;border-bottom:1px solid #c69740!important;}
.match-chat-head::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:#d3a74c;box-shadow:0 0 7px #cfa342;margin-right:7px;vertical-align:middle}
.match-chat-placeholder{font-size:13px;color:#d9e6f2}
.match-chat-foot{border-top-color:#816338;color:#f1d29b}

/* Keep the already approved one-screen fit, even with the richer ornament. */
@media(min-width:761px){
  body.arena-viewport-mode .topbar{height:80px!important;}
  body.arena-viewport-mode .topbar .arena-brand strong{font-size:clamp(39px,4vw,59px)!important;}
  body.arena-viewport-mode .topbar .arena-brand .brand-crown{font-size:21px!important;}
  body.arena-viewport-mode .scoreline .player{min-height:65px!important;}
  body.arena-viewport-mode .scoreline .avatar{width:53px;height:53px;min-width:53px;}
  body.arena-viewport-mode .scoreline .spin-trigger-ball{width:48px;height:48px;}
  body.arena-viewport-mode .scoreline .spin-toggle::before{width:76px;height:76px;}
  body.arena-viewport-mode .scoreline .spin-toggle::after{width:88px;height:88px;}
  body.arena-viewport-mode .scoreline .spin-center::before{top:-11px;font-size:19px;}
  body.arena-viewport-mode .scoreline .remaining-balls .hud-ball.mini{width:clamp(20px,1.75vw,25px);height:clamp(20px,1.75vw,25px);}
  body.arena-viewport-mode .arena-ad-strip .ad-slot-top{height:41px;}
  body.arena-viewport-mode .arena-footer .ad-slot-bottom{height:40px;}
}
@media(max-width:1150px){
  .topbar::before,.topbar::after{display:none;}
  .brand-medallion{width:45px;height:45px;}
  .brand-medallion::before,.brand-medallion::after{display:none;}
}
@media(max-width:760px){
  .brand-medallion,.topbar::before,.topbar::after{display:none!important;}
  .topbar .arena-brand{min-width:0;}
  .topbar .arena-brand strong{font-size:37px;}
  .scoreline .avatar{width:38px;height:38px;min-width:38px;}
  .scoreline .player-head>span{font-size:12px;}
  .scoreline .spin-trigger-ball{width:37px;height:37px;}
  .scoreline .spin-toggle::before{width:55px;height:55px;}
  .scoreline .spin-toggle::after{width:62px;height:62px;}
  .scoreline .spin-center::before{display:none;}
  .arena-ad-strip .ad-slot::before,.arena-ad-strip .ad-slot::after{display:none;}
}
@media(prefers-reduced-motion:reduce){.brand-medallion{animation:none}}


/* ===================================================================
  888POOL ROYAL v7: chosen logo #1, compact player panels,
  a simple white spin ball and a LIVE perimeter shot timer.
  This block deliberately overrides older experimental HUD CSS.
  No gameplay or physics styles are changed.
  =================================================================== */
.topbar .arena-brand.royal-brand {
  position:absolute!important;
  left:50%!important;
  top:10px!important;
  transform:translateX(-50%)!important;
  display:block!important;
  width:clamp(300px,34vw,490px)!important;
  min-width:0!important;
  height:70px!important;
  margin:0!important;
  z-index:3!important;
  pointer-events:none!important;
  filter:drop-shadow(0 3px 5px #000c)!important;
}
.topbar .royal-brand-image {
  display:block;width:100%;height:100%;object-fit:contain;
  object-position:center center;
  filter:drop-shadow(0 1px 6px #f5b6445c);
}
.topbar .brand-medallion,.topbar .brand-crown,
.topbar .arena-brand.royal-brand::before,.topbar .arena-brand.royal-brand::after {
  display:none!important;
}
/* Make room for the lowered logo without overlapping player frames. */
body.arena-viewport-mode .topbar {height:91px!important;}
body.arena-viewport-mode .topbar .arena-brand.royal-brand {
  top:12px!important;height:76px!important;
}
body.arena-viewport-mode .topbar::before,
body.arena-viewport-mode .topbar::after {top:30px!important;}
/* Compact scorecards, gold detailing, green perimeter on current turn. */
.scoreline .player {
  position:relative!important;
  min-height:51px!important;
  height:56px!important;
  padding:3px 9px!important;
  gap:8px!important;
  border:1px solid #b9954e!important;
  border-radius:12px!important;
  background:linear-gradient(112deg,#123553 0%,#07192e 30%,#040d1d 73%,#10273d 100%)!important;
  box-shadow:inset 0 1px 0 #ffe2a133,0 3px 10px #000b!important;
  opacity:1!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.scoreline .player.active {
  border-color:#284b3c!important;
  box-shadow:inset 0 1px 0 #c8ffe82b,0 0 9px #3fff7560,0 3px 10px #000b!important;
}
.scoreline .player::before {
  content:''!important;
  position:absolute!important;
  inset:1px!important;
  width:auto!important;
  background:linear-gradient(115deg,#ffffff16,transparent 38%,#ffffff08 80%,transparent)!important;
  border-radius:11px!important;
  pointer-events:none!important;
}
.scoreline .player::after {display:none!important;}
.scoreline .avatar {
  width:43px!important;height:43px!important;min-width:43px!important;
  border-radius:8px!important;
  border:1.5px solid #dfb85c!important;
  box-shadow:0 0 0 1px #3a2b12,0 1px 5px #0009!important;
}
.scoreline .player.active .avatar {border-color:#bce9c9!important;box-shadow:0 0 0 1px #347c56,0 0 7px #52f99b8c!important;}
.scoreline .player-data {gap:2px!important;min-width:0!important;}
.scoreline .player-head>span {font-size:clamp(12px,1.15vw,15px)!important;line-height:1.05!important;}
.scoreline .player-head small {font-size:8px!important;padding:2px 4px!important;}
.scoreline .remaining-balls {min-height:19px!important;gap:2px!important;padding:0!important;}
.scoreline .remaining-balls .hud-ball.mini {width:21px!important;height:21px!important;}
.scoreline .remaining-balls .hud-ball.pending {width:18px!important;height:18px!important;}
/* The real, working cue-ball button stays simple and white. */
.scoreline .spin-center::before,.scoreline .spin-toggle::before,
.scoreline .spin-toggle::after {display:none!important;content:none!important;}
.scoreline .spin-toggle {background:transparent!important;border:0!important;padding:0!important;}
.scoreline .spin-trigger-ball {
  width:46px!important;height:46px!important;
  background:none!important;border:0!important;
  box-shadow:0 3px 9px #0009!important;
}
.scoreline .spin-trigger-ball .spin-spot {width:8px!important;height:8px!important;border:1px solid #ffefeb!important;box-shadow:0 0 3px #0008!important;}
/* The original timer remains in the DOM, driven by game.js. */
.scoreline .spin-center .shot-clock {display:none!important;}
/* Player perimeter SVG follows the exact current game.js clock percentage. */
.scoreline .player .turn-frame-svg {
  position:absolute!important;inset:-3px!important;
  width:calc(100% + 6px)!important;height:calc(100% + 6px)!important;
  pointer-events:none!important;overflow:visible!important;z-index:4!important;
}
.scoreline .player .turn-frame-track {
  fill:none;stroke:#b89a536e;stroke-width:7;
  vector-effect:non-scaling-stroke;
}
.scoreline .player .turn-frame-progress {
  fill:none;stroke:#4cff83;stroke-width:7;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:0 100;
  filter:drop-shadow(0 0 3px #3aff7b);
  transition:stroke-dasharray .09s linear,stroke .18s ease;
}
.scoreline .player:not(.active) .turn-frame-progress {stroke-dasharray:0 100!important;filter:none!important;}
.scoreline .player.timer-warning .turn-frame-progress {stroke:#ffb640;filter:drop-shadow(0 0 3px #ffb640);}
.scoreline .player.timer-urgent .turn-frame-progress {stroke:#ff4444;filter:drop-shadow(0 0 5px #ff4444);}
.scoreline .player .turn-time {
  position:absolute;z-index:5;right:8px;bottom:5px;
  font:800 10px/1 'Trebuchet MS',Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  color:#c7e9d1;text-shadow:0 0 4px #002b17;
  background:#061321d6;border-radius:4px;padding:2px 4px;
  pointer-events:none;display:none;
}
.scoreline .player.active .turn-time:not(:empty) {display:block;}
.scoreline .player.timer-warning .turn-time {color:#ffd08b;}
.scoreline .player.timer-urgent .turn-time {color:#ff9292;}
.scoreline .player.timer-free .turn-time {color:#9bb0c2;}
.scoreline .player.timer-free .turn-frame-progress {stroke-dasharray:0 100!important;}
@media (min-width:761px){
 body.arena-viewport-mode .scoreline .player {height:56px!important;min-height:56px!important;}
 body.arena-viewport-mode .scoreline .avatar {width:43px!important;height:43px!important;min-width:43px!important;}
 body.arena-viewport-mode .scoreline .spin-trigger-ball {width:46px!important;height:46px!important;}
 body.arena-viewport-mode .arena > .scoreline {min-height:60px!important;}
}
@media(max-width:760px){
 .topbar .arena-brand.royal-brand {top:8px!important;width:clamp(170px,43vw,320px)!important;height:54px!important;}
 .scoreline .player {height:48px!important;min-height:48px!important;padding:3px!important;gap:3px!important;}
 .scoreline .avatar {width:32px!important;height:32px!important;min-width:32px!important;}
 .scoreline .remaining-balls .hud-ball.mini {width:16px!important;height:16px!important;}
 .scoreline .spin-trigger-ball {width:35px!important;height:35px!important;}
 .scoreline .player .turn-time {right:3px;bottom:2px;font-size:8px;}
}
@media(prefers-reduced-motion:reduce){.scoreline .player .turn-frame-progress{transition:none!important}}


/* 888POOL - Logo centrato sul tavolo (colonna gioco), NON sulla chat.
   Desktop: colonna chat 255px e gap 14px (10px in viewport-fit).
   Fino a 1050px: colonna chat 225px e gap 8px (10px in viewport-fit).
   Su mobile la chat va sotto il tavolo e il logo resta centrato al 50%. */
@media (min-width:761px) {
  .topbar .arena-brand.royal-brand {
    left:calc((100% - 255px - 14px) / 2)!important;
  }
  body.arena-viewport-mode .topbar .arena-brand.royal-brand {
    left:calc((100% - 255px - 10px) / 2)!important;
  }
}
@media (min-width:761px) and (max-width:1050px) {
  .topbar .arena-brand.royal-brand {
    left:calc((100% - 225px - 8px) / 2)!important;
  }
  body.arena-viewport-mode .topbar .arena-brand.royal-brand {
    left:calc((100% - 225px - 10px) / 2)!important;
  }
}


/* ====================================================================
   888POOL - DUE PLAYER COMPATTI, CORNICE SPESSA
   Solo le due schede: NON cambia il logo, la palla effetti,
   la griglia, il tavolo, gli annunci, la chat o il timer SVG.
   ==================================================================== */
@media (min-width: 761px) {
  .scoreline .player {
    width: min(100%, 370px) !important;
    justify-self: center !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 3px 8px !important;
    gap: 8px !important;
    border: 4px solid #a6b0bf !important;
    border-radius: 14px !important;
    background: linear-gradient(110deg, #1b3047 0%, #0b1a2b 48%, #080f1d 100%) !important;
    box-shadow: 0 0 0 1px #485362, inset 0 1px 0 #e3ebf35c,
                0 4px 12px #000b !important;
  }
  .scoreline .player.active {
    border-color: #53f77e !important;
    background: linear-gradient(110deg, #183b37 0%, #0b2730 48%, #071827 100%) !important;
    box-shadow: 0 0 0 1px #167b3d, 0 0 0 2px #2ac85a50,
                inset 0 1px 0 #e6fff27a, 0 0 14px #43ff8270 !important;
  }
  .scoreline .avatar,
  body.arena-viewport-mode .scoreline .avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}

/* 888POOL | v8 - Cronometro nel bordo: la linea luminosa si ritira
   lungo tutto il perimetro per tutti i 35 secondi. Nessun numero
   stampato nel riquadro, nessun punto verde sul giocatore inattivo.
   Non tocca tavolo, logo, palla effetti, fisica o layout. */
.scoreline .player .turn-time {display:none!important;}
.scoreline .player .turn-frame-progress {
  stroke-linecap:butt!important; /* a 0% non lascia il puntino SVG */
  vector-effect:none!important; /* percentuale reale del perimetro SVG */
  stroke-width:16px!important; /* bordo luminoso spesso circa 5px */
}
.scoreline .player:not(.active) .turn-frame-svg {visibility:hidden!important;}
.scoreline .player:not(.active) .turn-frame-progress {
  stroke:none!important;stroke-dasharray:0 100!important;
  filter:none!important;visibility:hidden!important;
}
.scoreline .player.active .turn-frame-svg {visibility:visible!important;}
/* Niente cornice verde fissa: resta soltanto il tratto che si accorcia.
   La cornice fisica rimane spessa (4px), in tinta neutra. */
.scoreline #p0.active,.scoreline #p1.active {
  border-color:#455b61!important;
  box-shadow:0 0 0 1px #2b4850,inset 0 1px 0 #dceaf044,
             0 4px 12px #000b!important;
}



/* 888POOL | HUD v9: rimossi i tre annunci fra giocatori e tavolo.
   Resta invariato il singolo annuncio nel footer.
   L'area di gioco conserva le proprie coordinate e dimensioni native. */
@media (min-width:761px) {
  .arena {grid-template-rows:auto auto!important;}
  .arena > .scoreline {grid-column:1!important;grid-row:1!important;min-height:92px!important;}
  .arena > .table-stage {grid-column:1!important;grid-row:2!important;}
  .arena > .match-chat {grid-column:2!important;grid-row:1 / 3!important;}

  /* Palla per gli effetti piu' grande, nella stessa colonna centrale. */
  .scoreline .spin-trigger-ball,
  body.arena-viewport-mode .scoreline .spin-trigger-ball {
    width:82px!important;
    height:82px!important;
  }
}
@media (max-width:760px) {
  .arena > .scoreline {min-height:68px!important;}
  .scoreline .spin-trigger-ball {width:50px!important;height:50px!important;}
}
/* Puntino rosso proporzionato alla nuova palla; il trascinamento resta invariato. */
.scoreline .spin-trigger-ball .spin-spot {width:11px!important;height:11px!important;}


/* ================================================================
   888POOL | v10 · Players near spin ball + premium brand banner
   Presentation only. Keep the spin control centered, the turn-border
   countdown, the game canvas and all JS/physics exactly as they were.
   ================================================================ */
@media (min-width: 761px) {
  /* Previously both player cards were centered in wide grid cells.
     Bring their INNER edges toward the spin ball, leaving air between. */
  .arena > .scoreline #p0 { justify-self:end!important; }
  .arena > .scoreline #p1 { justify-self:start!important; }
}

/* The old single AD SPACE below the table becomes a fully editable
   HTML/CSS 888POOL brand banner. No full-page screenshot is used. */
.arena-footer.arena-footer-promo {
  position:relative;
  width:94%;
  margin:8px auto 0;
  padding:0;
  min-height:102px;
  height:102px;
  display:block;
  border:0;
  background:transparent;
  overflow:visible;
}
.arena-footer-promo .promo-banner.ad-slot-bottom {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:39% 30% 31%;
  align-items:center;
  width:100%;
  height:calc(100% - 20px);
  padding:0;
  border:2px solid #efc46a!important;
  border-radius:10px!important;
  background:
    radial-gradient(ellipse at 65% 10%,#ad7a2a38,transparent 42%),
    linear-gradient(95deg,#080b10 0%,#17100c 38%,#0a0d14 63%,#060b12 100%)!important;
  box-shadow:inset 0 0 0 1px #5c401b,inset 0 1px 0 #ffe5ab78,0 0 14px #b7823780,0 6px 15px #0009!important;
  overflow:hidden;
}
/* Cancel the old ad-slot blue crown ornaments. */
.arena-footer-promo .promo-banner::before,
.arena-footer-promo .promo-banner::after {content:none!important;display:none!important;}
.arena-footer-promo .promo-banner-brand {
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  height:100%;min-width:0;
  padding:4px 8px 4px 18px;
}
.arena-footer-promo .promo-banner-brand img {
  width:min(95%,275px);height:83%;object-fit:contain;
  filter:drop-shadow(0 2px 4px #000) drop-shadow(0 0 6px #f7b63d5c);
}
.arena-footer-promo .promo-banner-copy {
  position:relative;z-index:3;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:1px;
  white-space:nowrap;padding-left:4px;
}
.arena-footer-promo .promo-banner-copy strong {
  font:900 clamp(11px,1.25vw,16px)/1.08 'Trebuchet MS',Arial,sans-serif;
  letter-spacing:.09em;
  color:#ffdb7e;
  text-shadow:0 1px 3px #000,0 0 8px #a6712880;
}
.arena-footer-promo .promo-banner-balls {
  position:absolute;z-index:1;top:-15%;right:-1%;bottom:-15%;width:35%;
  overflow:hidden;
  background-image:url('assets/hud/888pool_banner_balls.webp');
  background-repeat:no-repeat;
  background-position:60% center;
  background-size:auto 112%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 27%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 100%);
}
.arena-footer-promo .arena-footer-copy {
  position:absolute;right:2px;bottom:2px;
  font-size:10px;letter-spacing:.11em;
  text-shadow:0 1px 3px #000;
}
@media (min-width:761px) {
  body.arena-viewport-mode .arena-footer.arena-footer-promo {
    min-height:102px;height:102px;
    margin-top:5px;padding:0;
  }
  body.arena-viewport-mode .arena-footer-promo .promo-banner.ad-slot-bottom {height:calc(100% - 20px);}
}
@media (max-width:760px) {
  .arena-footer.arena-footer-promo {width:98%;height:72px;min-height:72px;margin-top:6px;}
  .arena-footer-promo .promo-banner.ad-slot-bottom {height:100%;}
  .arena-footer-promo .promo-banner.ad-slot-bottom {grid-template-columns:41% 39% 20%;}
  .arena-footer-promo .promo-banner-brand {padding:4px 0 4px 6px;}
  .arena-footer-promo .promo-banner-copy strong {font-size:clamp(9px,2vw,13px);letter-spacing:.02em;}
  .arena-footer-promo .promo-banner-balls {width:27%;}
  .arena-footer-promo .arena-footer-copy {display:none;}
}


/* 888POOL | v11: requested HUD cleanup (27 Oct 2026).
   Keep the left spectator counter in the original arena image; the
   mirrored copy on the RIGHT is masked only near the bottom. */
body::after {
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 81%,transparent 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 81%,transparent 88%,transparent 100%);
}
/* Notifications sit just below the player cards: same left-side area,
   but long English messages cannot overlap the PRECISION / PEOPLE / PASSION slogan. */
.arena > .scoreline {position:relative!important;}
.arena > .scoreline #status {
  position:absolute!important;
  left:8px!important;
  bottom:-19px!important;
  width:auto!important;
  max-width:calc(100% - 16px)!important;
  padding:0!important;
  font-size:13px!important; /* original 10px + 3px */
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:.025em!important;
  color:#e5cba3!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  pointer-events:none!important;
  z-index:5!important;
}
@media(max-width:760px){
 .arena > .scoreline #status {font-size:12px!important;bottom:-17px!important;}
}

/* 888POOL v12 - Google account interface; no changes to game or table. */
.lobby-dialog .auth-account {display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #927744;
  border-radius:12px;background:#0c1821;margin:14px 0 18px;min-width:0}
.lobby-dialog .auth-avatar {width:55px;height:55px;min-width:55px;border-radius:50%;border:2px solid #e8bd62;
  object-fit:cover;background:#253342}
.lobby-dialog .auth-account-details {min-width:0;overflow-wrap:anywhere}
.lobby-dialog .auth-account-details strong {display:block;font-size:19px;color:#fff4d4}
.lobby-dialog .auth-account-details small {display:block;color:#94d9af;margin-top:5px;letter-spacing:.05em}
.lobby-dialog .auth-button {display:flex;justify-content:center;align-items:center;gap:12px;width:100%;
  padding:13px 16px;margin:14px 0 6px;border:2px solid #e1b962;border-radius:10px;cursor:pointer;
  color:#101822;background:linear-gradient(180deg,#fff4db,#e8d8b2);font:800 17px Arial,sans-serif}
.lobby-dialog .auth-button:hover:not(:disabled) {background:#fff;box-shadow:0 0 15px #cba34e70}
.lobby-dialog .auth-button:disabled {opacity:.55;cursor:not-allowed}
.lobby-dialog .auth-button.auth-signout {background:#202c36;color:#f3e4c6;font-size:15px}
.lobby-dialog .auth-google-mark {width:24px;height:24px;flex-shrink:0}
.lobby-dialog .auth-error {color:#ffb9aa;border-left:3px solid #f18b6c;padding:8px 12px;background:#552a282e}
.lobby-dialog .auth-help {font-size:13px;color:#b4c6cb;line-height:1.6}
.lobby-dialog .auth-help code {font-size:12px;color:#f5d587}
/* The lobby artwork contains LOGIN/SIGN UP. Once signed in, cover ONLY that
   original clickable rectangle with the live Google profile indicator. */
.menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in,
.menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in:hover {
  background:linear-gradient(145deg,#152e29f5,#07171cf7)!important;
  border:2px solid #d9ae57!important;
  border-radius:10px!important;
  box-shadow:inset 0 0 16px #4be89021,0 0 10px #d2ad5a6b!important;
  display:flex;align-items:center;justify-content:center;padding:6px!important;
}
.lobby-signed-in-content {display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:4px;max-width:100%;overflow:hidden;line-height:1.12}
.lobby-signed-in-content[hidden] {display:none!important}
.lobby-signed-in-content .auth-chip-label {color:#8bf0a8;font:900 clamp(9px,1.1vw,16px) Arial,sans-serif;
  letter-spacing:.07em;white-space:nowrap}
.lobby-signed-in-content .auth-chip-name {color:#f5dfad;font:800 clamp(9px,1.05vw,15px) Arial,sans-serif;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* 888POOL v13 - Clean authenticated lobby panels.
   The source lobby artwork contains both Guest Player (left) and
   LOGIN / SIGN UP (right) as pixels, not HTML text. The two signed-in
   overlays must cover their WHOLE original frames, not only their labels. */
.menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in,
.menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in:hover,
.menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in:active {
  position:absolute!important;
  left:78.65%!important;
  top:1.75%!important;
  width:20.10%!important;
  height:10.20%!important;
  min-width:0!important;
  min-height:0!important;
  padding:4px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:2px solid #e8bb65!important;
  border-radius:clamp(6px,.85vw,14px)!important;
  background:linear-gradient(155deg,#312313 0%,#17130f 55%,#0b1115 100%)!important;
  box-shadow:inset 0 0 0 1px #a16b315c,0 5px 14px #0008!important;
  opacity:1!important;
  z-index:4!important;
}
.menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in:hover {
  border-color:#ffe3a2!important;
  box-shadow:inset 0 0 0 1px #d3a05b77,0 0 16px #d5a34b88!important;
}
.menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in:focus-visible {
  outline:2px solid #fff5cc!important;
  outline-offset:2px!important;
}
.lobby-signed-in-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
  max-width:100%;
  overflow:hidden;
  text-align:center;
  line-height:1.1;
}
.lobby-signed-in-content .auth-chip-label {
  color:#f8d788;
  font:900 clamp(10px,1.3vw,21px) Arial,sans-serif;
  letter-spacing:.035em;
  white-space:nowrap;
}
.lobby-signed-in-content .auth-chip-name {
  color:#b9d9c9;
  font:700 clamp(8px,.79vw,12px) Arial,sans-serif;
  letter-spacing:.04em;
  white-space:nowrap;
}
.menu-screen .lobby-art .lobby-player-profile {
  position:absolute;
  z-index:4;
  left:1.20%;
  top:1.75%;
  width:23.00%;
  height:12.10%;
  display:flex;
  align-items:center;
  gap:3%;
  padding:0.5% 0.9%;
  border:2px solid #e8bb65;
  border-radius:clamp(6px,.85vw,14px);
  background:linear-gradient(115deg,#111b23 0%,#070c12 100%);
  box-shadow:inset 0 0 0 1px #bc8b414f,0 5px 14px #0009;
  overflow:hidden;
  pointer-events:none;
}
.menu-screen .lobby-art .lobby-player-profile[hidden],
.menu-screen .lobby-art .lobby-player-photo[hidden],
.menu-screen .lobby-art .lobby-player-photo-fallback[hidden] {
  display:none!important;
}
.menu-screen .lobby-art .lobby-player-photo,
.menu-screen .lobby-art .lobby-player-photo-fallback {
  height:80%;
  aspect-ratio:1;
  width:auto;
  max-width:28%;
  flex:0 0 auto;
  object-fit:cover;
  border:2px solid #dfba70;
  border-radius:9px;
  background:#1c2830;
}
.menu-screen .lobby-art .lobby-player-photo-fallback {
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f5d381;
  font:900 clamp(13px,2vw,31px) Arial,sans-serif;
}
.menu-screen .lobby-art .lobby-player-copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-width:0;
  flex:1;
  overflow:hidden;
  font-family:Arial,sans-serif;
}
.menu-screen .lobby-art .lobby-player-copy strong {
  color:#fff8e8;
  font-size:clamp(10px,1.45vw,23px);
  line-height:1.1;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.menu-screen .lobby-art .lobby-player-copy small {
  color:#95e6b2;
  font-size:clamp(7px,.84vw,13px);
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:700px){
  .menu-screen .lobby-art .lobby-player-profile {border-width:1px;gap:3%;padding:0.5% 0.8%;}
  .menu-screen .lobby-art .lobby-player-photo,
  .menu-screen .lobby-art .lobby-player-photo-fallback {border-width:1px;border-radius:4px;}
  .menu-screen .lobby-art .lobby-player-copy {gap:2px;}
  .menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in {border-width:1px!important;}
  .lobby-signed-in-content {gap:2px;}
}


/* 888POOL v14 - Smaller, discreet signed-in cards in the cinematic lobby.
   The original artwork contains the OLD Guest/Login boxes as pixels.
   Soft corner veils conceal those baked-in labels only while signed in;
   compact HTML cards sit on top. No gameplay or Firebase changes. */
/* The original Guest/Login frames are part of the JPG-like lobby artwork.
   A borderless matte only under those frames keeps them from showing. */
.menu-screen .lobby-art.google-authenticated::before,
.menu-screen .lobby-art.google-authenticated::after {
  content:"";position:absolute;z-index:3;pointer-events:none;
  background:linear-gradient(125deg,#0a1018 0%,#080d15 100%);
  border-radius:clamp(6px,.8vw,12px);
  box-shadow:0 0 12px 5px #080b12a6;
}
.menu-screen .lobby-art.google-authenticated::before {left:1.1%;top:1.65%;width:23.3%;height:12.3%;}
.menu-screen .lobby-art.google-authenticated::after {right:1.3%;top:1.65%;width:20.3%;height:11.4%;}

/* Left: modestly narrower and shorter than the previous panel. */
.menu-screen .lobby-art .lobby-player-profile {
  left:1.35%;top:1.95%;width:20.7%;height:10.2%;
  padding:.45% .7%;gap:3.5%;
  border:1px solid #bc9450;border-radius:clamp(5px,.6vw,9px);
  background:linear-gradient(115deg,#121c26f0,#080d14f5);
  box-shadow:0 2px 8px #0008,inset 0 1px 0 #ffffff13;
}
.menu-screen .lobby-art .lobby-player-photo,
.menu-screen .lobby-art .lobby-player-photo-fallback {
  height:77%;max-width:26%;border-width:1px;border-radius:clamp(3px,.35vw,6px);
}
.menu-screen .lobby-art .lobby-player-copy {gap:3px;}
.menu-screen .lobby-art .lobby-player-copy strong {font-size:clamp(9px,1.12vw,18px);}
.menu-screen .lobby-art .lobby-player-copy small {font-size:clamp(7px,.66vw,10px);letter-spacing:.025em;}

/* Right: a compact but comfortably clickable account button. */
.menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in,
.menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in:hover,
.menu-screen .lobby-art #lobbyLogin.lobby-hit-login.signed-in:active {
  left:80.65%!important;top:1.95%!important;
  width:17.35%!important;height:9.2%!important;
  padding:3px 6px!important;
  border:1px solid #c8a05b!important;
  border-radius:clamp(5px,.6vw,9px)!important;
  background:linear-gradient(155deg,#272017f5,#0b1117f8)!important;
  box-shadow:0 2px 8px #0008,inset 0 1px 0 #ffffff13!important;
}
.lobby-signed-in-content {gap:3px;}
.lobby-signed-in-content .auth-chip-label {font-size:clamp(9px,1.08vw,17px);letter-spacing:.02em;}
.lobby-signed-in-content .auth-chip-name {font-size:clamp(7px,.66vw,10px);letter-spacing:.025em;}
@media(max-width:700px){
  .menu-screen .lobby-art .lobby-player-profile{border-width:1px;gap:2%;}
  .menu-screen .lobby-art .lobby-player-copy{gap:1px;}
  .menu-screen .lobby-art .lobby-player-copy strong{font-size:clamp(7px,1.2vw,10px);}
  .menu-screen .lobby-art .lobby-player-copy small{font-size:clamp(5px,.83vw,8px);}
  .lobby-signed-in-content .auth-chip-label{font-size:clamp(7px,1.2vw,10px);}
  .lobby-signed-in-content .auth-chip-name{font-size:clamp(5px,.8vw,8px);}
}

/* ==============================================================
   888POOL | LOCAL BETA ARENA 2026
   Entirely additive: cinematic lobby, table physics and art intact.
   ============================================================== */
.online-hub[hidden],.hub-invitation[hidden],.match-end[hidden],
#discordContact[hidden],#discordOfflineText[hidden],.hub-button[hidden]{display:none!important}
.menu-screen.hub-open{overflow-x:hidden;overflow-y:auto;align-items:start;padding:25px 15px;min-height:100dvh;height:auto}
.menu-screen.hub-open .lobby-art{display:none!important}
.menu-screen.hub-open .lobby-status{display:none!important}
.online-hub{
 display:flex;flex-direction:column;gap:22px;position:relative;z-index:10;
 width:min(1180px,100%);min-height:650px;margin:15px auto;padding:clamp(18px,3vw,36px);
 border:1.5px solid #94723e;border-radius:22px;
 background:radial-gradient(ellipse at 50% -25%,#164737af,transparent 58%),
 linear-gradient(145deg,#12202b 0%,#0a111d 44%,#070a11 100%);
 color:#e9e9e8;box-shadow:0 22px 90px #000b,0 0 0 5px #0008;
 font:14px/1.5 'Trebuchet MS',Arial,sans-serif;
 isolation:isolate;
}
.online-hub::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(circle at 92% 18%,#f2bc4d11,transparent 37%),
 repeating-linear-gradient(0deg,transparent,transparent 36px,#ffffff05 37px),
 repeating-linear-gradient(90deg,transparent,transparent 36px,#ffffff05 37px)}
.hub-topline,.hub-main-title,.hub-panel-head,.hub-metrics,.hub-player,.hub-search,.hub-rank-row{
 display:flex;justify-content:space-between;align-items:center;gap:14px}
.hub-topline{border-bottom:1px solid #c1a16d47;padding-bottom:15px;font-size:11px;letter-spacing:.22em}
.hub-eyebrow{color:#d8ad58;font-weight:900}.hub-eyebrow b{color:#effaf4;margin-left:10px}
.hub-indicator{color:#d6ad7f}.hub-indicator.connected{color:#65e6a0}
.hub-main-title{gap:20px;align-items:end}
.hub-overline{font-size:12px;font-weight:900;letter-spacing:.23em;color:#e8ba64}
.hub-main-title h2{font:900 clamp(28px,4vw,49px)/1.05 Georgia,serif;color:#f9f1dd;letter-spacing:.018em;margin:8px 0 9px;text-shadow:0 4px 24px #0006}
.hub-main-title p{margin:0;font-size:15px;color:#b4c8c0}
.hub-metrics{background:#0b1822b0;border:1px solid #c2a56d52;border-radius:14px;padding:18px 20px;gap:10px}
.hub-metrics div{display:flex;align-items:start;justify-content:center;flex-direction:column;gap:0;flex:1;min-width:0}
.hub-metrics div+div{border-left:1px solid #e1bb6740;padding-left:clamp(12px,3vw,35px)}
.hub-metrics strong{font:800 clamp(22px,3.2vw,33px)/1.2 Georgia,serif;color:#f9dc91}
.hub-metrics span{font-size:10px;letter-spacing:.13em;color:#b1bbbe;font-weight:800}
.hub-beta-notice{font:700 12px/1.5 Arial,sans-serif;color:#e9be87;background:#8a65291b;
 border:1px solid #a17b3b52;border-radius:7px;padding:8px 12px;margin:-8px 0 -4px}
.hub-columns{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:stretch}
.hub-panel{padding:22px 19px;background:linear-gradient(155deg,#10242ca8,#0b1521d9);
 border:1px solid #55707372;border-radius:14px;min-width:0;box-shadow:inset 0 1px #ffffff13}
.hub-players-panel{grid-row:span 2}
.hub-panel-head{margin-bottom:16px;border-bottom:1px solid #68848a39;padding-bottom:12px}
.hub-panel-head h3{margin:0;color:#e5c276;font:900 16px/1.3 Arial,sans-serif;letter-spacing:.075em}
.hub-panel-head span{font-size:9px;font-weight:800;letter-spacing:.11em;color:#7faaa8;text-align:right}
.hub-players{display:flex;flex-direction:column;gap:9px;min-height:150px;max-height:340px;overflow:auto}
.hub-empty{margin:35px 15px;color:#b5c9c7;text-align:center;line-height:1.7}
.hub-player{background:#07151e8a;border:1px solid #40636355;border-radius:12px;padding:10px;min-width:0}
.hub-player-identity{display:flex;align-items:center;gap:10px;min-width:0}
.hub-avatar{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;
 background:linear-gradient(135deg,#255345,#12272f);border:1px solid #c5a365;color:#ffe9b3;font:900 18px Georgia,serif}
.hub-player-identity div{display:flex;flex-direction:column;min-width:0}
.hub-player-identity strong{font-size:13px;color:#fff2d7;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-player-identity small{font:800 9px Arial,sans-serif;letter-spacing:.11em;color:#7fdaae}
.hub-button{display:inline-flex;justify-content:center;align-items:center;gap:5px;min-height:37px;max-width:100%;
 padding:8px 13px;border:1px solid #b99a61;border-radius:8px;color:#faebd0;
 background:linear-gradient(#244047,#11202c);font:800 11px/1.25 Arial,sans-serif;letter-spacing:.055em;
 cursor:pointer;transition:box-shadow .12s,border-color .12s,transform .12s;text-decoration:none}
.hub-button:hover:not(:disabled){border-color:#f4d59b;box-shadow:0 0 0 1px #dabf7370;transform:translateY(-1px)}
.hub-button:focus-visible{outline:3px solid #8ceba8;outline-offset:2px}
.hub-button:disabled{opacity:.46;cursor:not-allowed}
.hub-button.primary{border-color:#b7e0ae;color:#052319;background:linear-gradient(#87dfa0,#3c9a73);font-weight:900}
.hub-challenge{font-size:10px}
.hub-search{justify-content:start;flex-wrap:wrap;margin-top:22px;gap:9px}
.hub-search .primary{flex:1;min-width:135px;min-height:43px}
.hub-message{color:#c6d5d4;min-height:21px;margin:14px 0 0;font-size:12px}
.hub-rank-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hub-rank-columns>div+div{border-left:1px solid #5d676c77;padding-left:14px}
.hub-rank-columns h4{font-size:12px;color:#9fe4c4;letter-spacing:.08em;margin:0 0 10px}
.hub-ranks{font-size:12px;color:#a5b3b6}
.hub-rank-row{gap:6px;margin:6px 0;padding:4px 0;border-bottom:1px solid #52676a27}
.hub-rank-row span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hub-rank-row strong{color:#f1d58f;white-space:nowrap;font-size:10px}
.hub-fine{display:block;font-size:11px;line-height:1.55;color:#90a5ac;margin-top:15px}
.hub-profile-panel label{display:block;color:#d4d8d4;font:900 11px/1.2 Arial,sans-serif;letter-spacing:.08em;margin:12px 0 7px}
.hub-profile-panel label span{color:#89969b;font-weight:400}
.hub-profile-panel input{display:block;width:100%;border:1px solid #806d52;background:#050d16;
 border-radius:8px;padding:10px 12px;color:#f7efdf;font:600 14px Arial,sans-serif}
.hub-profile-panel input:focus{outline:2px solid #79bba0;outline-offset:1px}
.hub-profile-panel .hub-button{margin-top:12px}
.hub-invitation{position:absolute;inset:0;z-index:25;display:grid;place-items:center;background:#01060bdc;border-radius:inherit;padding:20px}
.hub-invitation-card{padding:30px 35px;max-width:460px;width:100%;text-align:center;
 background:linear-gradient(145deg,#203c36,#0b1724);border:2px solid #dfb45f;border-radius:17px;box-shadow:0 20px 55px #000c}
.hub-invitation-card>span{color:#d9b265;font-weight:900;letter-spacing:.12em}
.hub-invitation-card h3{font:900 32px Georgia,serif;color:#fff1c4;margin:12px 0}
.hub-invitation-card>div{display:flex;justify-content:center;gap:12px;margin-top:20px}
.match-end{position:fixed;z-index:95;inset:0;background:#02080fcf;display:grid;place-items:center;padding:18px;backdrop-filter:blur(7px)}
.match-end-card{max-width:540px;width:100%;padding:clamp(25px,4vw,50px);text-align:center;
 background:radial-gradient(circle at 50% 0,#2b4b37,#0b1b25 67%);border:2px solid #d2ab5c;border-radius:23px;
 box-shadow:0 22px 75px #000e,0 0 38px #cb9d3b29}
.match-end-eyebrow{font-size:12px;color:#e5c886;letter-spacing:.18em;font-weight:900}
.match-end-card h2{font:900 clamp(35px,5vw,58px) Georgia,serif;color:#fff2be;margin:18px 0;text-shadow:0 4px 18px #000}
.match-end-card p{color:#c7d7d6;line-height:1.6}
.match-end-actions{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.match-end-actions .hub-button{min-height:45px;font-size:12px}
.match-chat-body .discord-heading{font-size:12px;color:#e6be69;font-weight:900}
.match-chat-body .discord-opponent{margin:10px auto 15px;max-width:210px;overflow-wrap:anywhere;color:#e9e8e2;font-size:15px}
.match-chat-body .discord-match-button{display:block;width:min(220px,90%);margin:9px auto;
 padding:10px;border:1px solid #e0b965;background:linear-gradient(#2e6c53,#194837);color:#fff0d0;
 border-radius:8px;cursor:pointer;font:800 11px Arial,sans-serif;letter-spacing:.02em}
.match-chat-body .discord-match-button.secondary{background:#19314a}
.match-chat-body .discord-match-button:disabled{opacity:.45;cursor:not-allowed}
.match-chat-body .match-chat-placeholder{max-width:100%;font-size:12px}
.match-chat-body .match-chat-placeholder small{display:block;max-width:235px;margin:12px auto;font-size:11px;line-height:1.55}
@media(max-width:850px){
 .hub-columns{grid-template-columns:1fr}.hub-players-panel{grid-row:auto}
 .menu-screen.hub-open{padding:9px}.online-hub{border-radius:12px;padding:18px;gap:18px}
 .hub-main-title{align-items:start}.hub-main-title h2{font-size:31px}
}
@media(max-width:550px){
 .hub-main-title{flex-direction:column;gap:12px}.hub-main-title h2{font-size:27px}
 .hub-metrics{padding:13px 8px}.hub-metrics strong{font-size:20px}.hub-metrics span{font-size:8px}
 .hub-metrics div+div{padding-left:8px}.hub-rank-columns{gap:8px}
 .hub-panel{padding:16px 13px}.hub-player{gap:6px}.hub-challenge{padding:8px 7px}
 .hub-panel-head h3{font-size:13px}.hub-panel-head span{font-size:8px}
}

/* ===========================================================
   888POOL WORLD ARENA · lightweight national presence navigator
   Scoped to the multiplayer hub: original home, game and physics untouched.
   =========================================================== */
.world-layout{display:grid;grid-template-columns:minmax(0,2.35fr) minmax(245px,.85fr);gap:14px;min-height:360px}
.world-map-card,.world-countries-card,.world-opponents-card{min-width:0;border:1px solid #597b8855;border-radius:15px;background:linear-gradient(150deg,#0c2331ed,#07141fe8);overflow:hidden}
.world-map-card,.world-countries-card{padding:14px;display:flex;flex-direction:column}
.world-panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid #6c8b8540}
.world-panel-title strong{font-size:13px;color:#f1ca79;letter-spacing:.08em}
.world-panel-title span{font-size:9px;color:#7cbaba;letter-spacing:.09em;font-weight:800;text-align:right}
.world-map{flex:1;display:grid;place-items:center;min-height:250px;background:#071522;border:1px solid #2c5b716b;border-radius:11px;overflow:hidden;color:#b9c9d0}
.world-map svg{width:100%;height:100%;max-height:540px;display:block}
.world-country{fill:#31536b;stroke:#6990a5;stroke-width:.65;stroke-linejoin:round;cursor:pointer;transition:fill .12s ease;outline:none;vector-effect:non-scaling-stroke}
.world-country:nth-of-type(4n){fill:#395a70}
.world-country:hover,.world-country:focus-visible{fill:#e7bd68;stroke:#ffeaad;stroke-width:1.7}
.world-country.with-players{fill:#367c82}
.world-country.with-available{fill:#458c7b}
.world-country.selected{fill:#ecc46f;stroke:#fff2bc;stroke-width:1.9;filter:drop-shadow(0 0 3px #e9ae61)}
.world-country.continent-dim:not(.selected){opacity:.24}
.world-map-help{font-size:11px;color:#95afb8;margin:10px 0 0;line-height:1.45}
.world-control{width:100%;border:1px solid #577b8b;border-radius:8px;background:#081722;color:#ecf5f4;padding:11px 12px;font:13px Arial,sans-serif;margin:0 0 9px}
.world-control:focus-visible{outline:2px solid #9be4bb;outline-offset:2px}
.world-country-list{height:330px;overflow:auto;scrollbar-width:thin;scrollbar-color:#446472 #0b1a24}
.world-country-line{cursor:pointer;color:#dbeae9;width:100%;display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;border:1px solid transparent;border-bottom-color:#2d485055;background:transparent;padding:8px 6px;border-radius:7px;font-size:12px;min-height:37px}
.world-country-line:hover,.world-country-line:focus-visible{background:#28485988;outline:none;border-color:#507e8c}
.world-country-line.current{background:#154b77b8;border-color:#368cd2;box-shadow:inset 3px 0 0 #f0cb7d}
.world-country-name{display:flex;align-items:center;min-width:0;gap:9px}
.world-country-name>span:last-child{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.world-flag{font-size:19px;flex-shrink:0}
.world-country-numbers{display:flex;align-items:center;gap:8px;color:#d8e7da;white-space:nowrap;font-size:11px;font-weight:800}
.world-country-dot{width:7px;height:7px;background:#53606a;border-radius:50%;display:inline-block}
.world-country-dot.active{background:#62dda0;box-shadow:0 0 8px #34bb75}
.world-opponents-card{padding:17px 18px}
.world-selected-heading{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid #72929b33;margin-bottom:15px}
.world-selected-flag{font-size:33px}
.world-selected-heading h3{font:900 24px/1.15 Georgia,serif;color:#f7d28c;margin:0 0 5px}
.world-selected-heading small{font-size:10px;color:#77dab0;letter-spacing:.06em}
.world-heading-tip{margin-left:auto;color:#b49d82;font-size:10px;text-align:right}
.world-opponents-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,.75fr);gap:22px}
.world-players{min-height:130px;max-height:270px;overflow:auto}
.world-players .hub-player{margin-bottom:7px}
.world-players .hub-player:last-child{margin-bottom:0}
.world-list-side{min-width:0}
.world-actions-side{border-left:1px solid #77929a35;padding-left:22px;min-width:0}
.world-actions-side p{color:#b6cad2;font-size:12px;line-height:1.6}
.world-actions-side .hub-search{margin-top:14px}
.world-actions-side .hub-search .hub-button{flex:1}
.world-pagination{margin-top:12px;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.world-pagination>span{color:#91aeb6;font-size:10px;white-space:nowrap}
.world-pagination .hub-button{min-height:31px;padding:6px 9px;font-size:10px}
.world-extras{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.world-extras .hub-panel{min-width:0;padding:0 16px 15px}
.world-extras details:not([open]){padding-bottom:0}
.world-extras summary{list-style:none;cursor:pointer;font-weight:900;color:#e9c47c;padding:17px 0;letter-spacing:.055em;font-size:13px}
.world-extras summary::-webkit-details-marker{display:none}
.world-extras summary:after{content:' ＋';float:right;color:#8dcbba}
.world-extras details[open] summary:after{content:' −'}
.world-extras summary small{color:#80b9a6;font-size:9px;margin-left:12px}
.world-extras .hub-profile-panel input{margin-bottom:7px}
.world-extras .hub-profile-panel select{margin:0 0 12px}
.world-first-profile[hidden]{display:none!important}
.world-first-profile{z-index:29;position:absolute;inset:0;display:grid;place-items:center;background:#02070bef;border-radius:inherit;padding:18px}
.world-first-card{width:min(430px,100%);display:flex;flex-direction:column;gap:10px;border:1px solid #c6a363;background:linear-gradient(145deg,#19343a,#07121c);box-shadow:0 26px 90px #000b;border-radius:15px;padding:30px}
.world-first-card>strong{color:#e6b96a;font-size:12px;letter-spacing:.1em}
.world-first-card h3{color:#fbeaca;font:900 25px Georgia,serif;margin:4px 0}
.world-first-card p{color:#b8cdd0;margin:0 0 12px;font-size:13px}
.world-first-card label{color:#eddab7;font-size:11px;letter-spacing:.08em;font-weight:800}
.world-first-card input,.world-first-card select{background:#07131c;color:#eaf5f0;border:1px solid #8a7b58;border-radius:8px;padding:11px;font:14px Arial}
.world-first-card small{font-size:11px;color:#9db2b8}
#worldFirstError:not(:empty){color:#ffbe99}
.online-hub{width:min(1450px,100%);gap:17px}
.online-hub .hub-metrics{padding:12px 16px}
@media(max-width:1000px){.world-layout{grid-template-columns:minmax(0,1.7fr) minmax(230px,.9fr)}.world-opponents-grid{grid-template-columns:1fr}.world-actions-side{border-left:0;border-top:1px solid #77929a35;padding:12px 0 0}.world-map{min-height:270px}}
@media(max-width:700px){.world-layout{grid-template-columns:1fr}.world-map{min-height:200px}.world-country-list{height:195px}.world-opponents-card{padding:12px}.world-extras{grid-template-columns:1fr}.world-selected-heading h3{font-size:20px}.world-heading-tip{font-size:9px;max-width:115px}.online-hub{padding:13px;gap:13px}.world-map-help{font-size:10px}}
@media(prefers-reduced-motion:reduce){.world-country{transition:none}}

/* Local profile save feedback, separate from country/player listing */
.hub-profile-status{min-height:1.3em;margin:8px 0;color:#7de5a8;font-size:12px;font-weight:700}.hub-profile-status.profile-error{color:#ffb88b}

/* 888Pool 2026: private match chat. Fits existing right-hand chat panel. */
.private-chat-body{display:flex!important;flex-direction:column;min-height:0!important;overflow:hidden;padding:10px!important}
.private-chat-ui{display:flex;flex-direction:column;flex:1;gap:8px;min-height:0;width:100%}
.private-chat-ui[hidden],.private-chat-form[hidden],#chatIdle[hidden]{display:none!important}
.private-chat-opponent{font:800 13px/1.2 Arial,sans-serif;color:#f4d68b;overflow:hidden;text-overflow:ellipsis}
.private-chat-state{font:11px/1.35 Arial,sans-serif;color:#a7ded4;min-height:28px}
.private-chat-safety{font:800 10px/1.3 monospace;color:#c9cfdd;padding:5px;border:1px solid #52677b;border-radius:5px;overflow-wrap:anywhere}
.private-chat-messages{flex:1;min-height:100px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:7px;padding:7px 4px;scrollbar-width:thin;background:#050f20;border:1px solid #354f64;border-radius:7px}
.private-chat-bubble{font:12px/1.35 Arial,sans-serif;max-width:95%;padding:7px 9px;border-radius:10px;overflow-wrap:anywhere;white-space:pre-wrap}
.private-chat-bubble.from-self{align-self:flex-end;background:#164e46;color:#eefcf2;border-bottom-right-radius:2px}
.private-chat-bubble.from-opponent{align-self:flex-start;background:#263d57;color:#fff1da;border-bottom-left-radius:2px}
.private-chat-form{display:flex;align-items:stretch;gap:4px}
.private-chat-form input{min-width:0;flex:1;width:50px;background:#091a2b;border:1px solid #7f8064;border-radius:6px;color:#fff;padding:7px 5px;font:12px Arial,sans-serif}
.private-chat-form button,.private-chat-actions button{border:1px solid #b99a59;border-radius:6px;background:#1b3445;color:#ffe4ac;padding:6px 7px;cursor:pointer;font:700 10px Arial,sans-serif}
.private-chat-form button:disabled,.private-chat-actions button:disabled{opacity:.38;cursor:not-allowed}
.private-chat-actions{display:flex;justify-content:space-between;gap:8px}
.private-chat-actions button{flex:1}


/* ===============================================================
   888POOL WEEKLY REWARDS · Homepage v1
   No canvas / shot timer / matchmaking modifications.
   Positioning relative to the original 1672×941 lobby artwork.
   =============================================================== */
.menu-screen .lobby-art .lobby-reward-card,
.menu-screen .lobby-art .lobby-community-card {
  position:absolute;z-index:3;top:40.5%;width:23.5%;height:22.3%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.2% 1.1%;text-align:center;line-height:1.14;
  border:1px solid rgba(251,211,116,.78);border-radius:12px;
  font-family:Arial,sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,234,165,.17),0 6px 30px #000d;
  backdrop-filter:blur(7px);
}
.menu-screen .lobby-art .lobby-reward-card {
  left:1.8%;background:linear-gradient(145deg,rgba(35,27,13,.96),rgba(11,18,17,.95));
  animation:reward-breath 5s ease-in-out infinite;
}
@keyframes reward-breath {
  0%,100%{border-color:#b99648;box-shadow:inset 0 1px 0 #eed5a02e,0 0 8px #c9931d24,0 6px 26px #000c}
  50%{border-color:#f9d57e;box-shadow:inset 0 1px 0 #eed5a055,0 0 23px #f3b84680,0 6px 26px #000c}
}
.lobby-reward-card .reward-kicker{font-size:clamp(6px,.68vw,11px);letter-spacing:.08em;color:#f6dda6;font-weight:800}
.lobby-reward-card .reward-main{margin-top:4%;font-size:clamp(12px,1.60vw,25px);font-weight:950;color:#ffe1a0;text-shadow:0 0 12px #efb7448a;line-height:1.03}
.lobby-reward-card .reward-prizes{display:flex;align-items:center;gap:.32em;margin:3% 0 4%;font-weight:950;color:#ffcd56;font-size:clamp(14px,1.9vw,29px);white-space:nowrap}
.lobby-reward-card .reward-prizes i{font-style:normal;color:#e9ddbd;font-weight:400}
/* 888Pool: show the finishing position next to each cash prize.
   The IDs stay on the amounts so the 1,000/5,000 milestones still update them. */
.lobby-reward-card .reward-prizes{gap:.18em;max-width:100%;}
.lobby-reward-card .reward-prizes .reward-place{display:inline-flex;align-items:baseline;justify-content:center;gap:.13em;white-space:nowrap;}
.lobby-reward-card .reward-prizes .reward-place small{font-size:clamp(8px,.77vw,12px);font-weight:900;letter-spacing:-.02em;color:#fff1cd;}
.lobby-reward-card .reward-prizes .reward-place>span{font-size:.91em;}
.lobby-reward-card .reward-prizes i{font-size:.55em;}

.lobby-reward-card .reward-condition{font-size:clamp(7px,.74vw,12px);font-weight:800;line-height:1.28;color:#fff1ce}
.lobby-reward-card .reward-condition b{color:#7cffb2}
.lobby-reward-card .reward-future{font-size:clamp(6px,.67vw,11px);font-weight:900;color:#8ee5c1;margin-top:4%}
.menu-screen .lobby-art .lobby-community-card {
  right:1.8%;border-color:#4baf8c;
  background:linear-gradient(148deg,rgba(13,42,35,.96),rgba(10,24,26,.96));
}
.community-kicker{color:#b9f7d9;font-weight:900;letter-spacing:.065em;font-size:clamp(6px,.75vw,12px)}
.community-amount{font-size:clamp(17px,2.35vw,37px);font-weight:950;color:#8dffc2;white-space:nowrap;margin:4% 0;text-shadow:0 0 15px #3ae99548;font-variant-numeric:tabular-nums}
.community-amount span{font-size:.53em;color:#b7d8c9}
.community-meter{width:90%;height:9px;border-radius:25px;border:1px solid #436454;background:#19312b;overflow:hidden}
.community-meter-fill{height:100%;width:0%;background:linear-gradient(90deg,#2ba56c,#83ffc5);transition:width .8s ease}
.community-status{font-size:clamp(7px,.76vw,12px);color:#e4f4e9;font-weight:800;margin-top:3%;min-height:1.3em;line-height:1.2}
.community-next{font-size:clamp(7px,.70vw,11px);color:#8ce5b8;margin-top:4%}
.community-milestones{background:transparent;border:0;border-bottom:1px solid #c7b878;color:#ffe6a0;cursor:pointer;font-weight:800;font-size:clamp(7px,.72vw,11px);margin-top:3%;padding:2px}
.community-milestones:hover,.community-milestones:focus-visible{color:white;outline:1px solid #d5bd81}
.menu-screen .lobby-art .lobby-weekly-note{
 position:absolute;z-index:3;left:28%;top:35.4%;width:44%;min-height:4.7%;
 display:flex;align-items:center;justify-content:center;padding:.45% .7%;
 border:1px solid #ab834d90;border-radius:8px;background:rgba(9,14,15,.85);
 color:#ffe1a2;font:900 clamp(7px,.83vw,13px)/1.25 Arial,sans-serif;text-align:center;letter-spacing:.055em;
}
.menu-screen .lobby-art .lobby-points{
 position:absolute;z-index:3;left:2%;top:66%;width:22%;height:6.7%;
 background:linear-gradient(145deg,#132f2b,#0c2026);color:#d2f5e6;
 border:1px solid #6fb89f;border-radius:8px;
 font:900 clamp(7px,.79vw,12px)/1.2 Arial,sans-serif;cursor:pointer;
 box-shadow:0 4px 15px #000a;
}
.menu-screen .lobby-art .lobby-points:hover,.menu-screen .lobby-art .lobby-points:focus-visible{background:#205344;outline:1px solid #e0ffda}
.menu-screen .lobby-art .lobby-weekly-clock{
 position:absolute;z-index:3;right:2%;top:66%;width:22%;height:9.4%;
 background:linear-gradient(145deg,#19272b,#091a1a);border:1px solid #7ebca1;
 border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:3%;box-shadow:0 4px 15px #000b;text-align:center;font-family:Arial,sans-serif;
}
.lobby-weekly-clock>span{font-size:clamp(6px,.70vw,11px);font-weight:900;color:#b9edcf;letter-spacing:.07em}
.lobby-weekly-clock>strong{font-size:clamp(11px,1.47vw,23px);font-weight:900;color:#fff0c6;font-variant-numeric:tabular-nums;white-space:nowrap}
.lobby-weekly-clock>small{font-size:clamp(6px,.62vw,10px);font-weight:800;color:#a9bfb5}
.lobby-weekly-clock.is-final-day{border-color:#f4c96b;box-shadow:0 0 16px #f6c35545}
.menu-screen .lobby-art .lobby-rankings{height:14.5%;bottom:3.8%;}
.lobby-rankings-body{font-variant-numeric:tabular-nums}
/* Reduced motion: no gentle promotional glow and no animated progress. */
@media(prefers-reduced-motion:reduce){.menu-screen .lobby-art .lobby-reward-card{animation:none}.community-meter-fill{transition:none}}
/* Keep artwork's playable button hitboxes clear even in compact viewports. */
@media(max-width:720px){
 .menu-screen .lobby-art .lobby-reward-card,.menu-screen .lobby-art .lobby-community-card{border-radius:6px;padding:.5%}
 .lobby-reward-card .reward-kicker,.community-kicker{letter-spacing:0}
 .lobby-reward-card .reward-main{font-size:clamp(7px,1.6vw,12px)}
 .lobby-reward-card .reward-prizes{font-size:clamp(9px,1.8vw,14px)}
 .lobby-reward-card .reward-condition,.lobby-reward-card .reward-future,.community-next,.community-status{font-size:clamp(5px,.75vw,8px)}
 .community-amount{font-size:clamp(11px,2.4vw,18px)}
 .community-meter{height:5px}
 .community-milestones{font-size:clamp(5px,.8vw,7px)}
 .menu-screen .lobby-art .lobby-rankings{border-radius:5px}
 .menu-screen .lobby-art .lobby-weekly-clock,.menu-screen .lobby-art .lobby-points{border-radius:5px}
}
/* On very narrow portrait screens, let the oversized cinematic menu scroll vertically
   rather than shrinking promo text down to illegibility. */
@media(max-aspect-ratio:3/4){
 .menu-screen:not(.hub-open){overflow-y:auto;align-items:flex-start}
 .menu-screen:not(.hub-open) .lobby-art{width:max(100vw,680px);margin:10px auto;}
}

.lobby-dialog .reward-scoring-table{width:100%;border-collapse:collapse;margin:14px 0 18px;font:13px/1.4 Arial,sans-serif}
.lobby-dialog .reward-scoring-table td{border-bottom:1px solid #4f5c5d;padding:9px 6px;vertical-align:top;color:#e4e9e4}
.lobby-dialog .reward-scoring-table td:last-child{text-align:right;color:#f4d180;font-weight:900;white-space:nowrap}

.mobile-lobby-actions{display:none}
@media (max-width:720px) and (orientation:portrait) {
  .menu-screen:not(.hub-open){display:block;overflow-x:hidden;overflow-y:auto;padding:0;min-height:100dvh}
  .menu-screen:not(.hub-open) .lobby-art{
    position:relative;width:100%;height:calc(100vw * 941 / 1672 + 660px);
    aspect-ratio:auto;flex:none;max-width:none;margin:0;
    background-size:100% auto;background-position:center top;background-repeat:no-repeat;
    box-shadow:none;background-color:#071815;
  }
  /* Artwork buttons are still clickable in their exact original positions. */
  .menu-screen .lobby-art #onlineBtn.lobby-hit-online {
    left:26.7%;top:calc(100vw * 941 / 1672 * .621);
    width:45.3%;height:calc(100vw * 941 / 1672 * .135);
  }
  .menu-screen .lobby-art .lobby-hit-guest {
    left:31.7%;top:calc(100vw * 941 / 1672 * .778);
    width:35.1%;height:calc(100vw * 941 / 1672 * .136);
  }
  .menu-screen .lobby-art .lobby-hit-login {
    left:77.7%;top:calc(100vw * 941 / 1672 * .02);
    width:19.5%;height:calc(100vw * 941 / 1672 * .112);
  }
  .menu-screen .lobby-art .lobby-hit-rules {
    left:77.6%;top:calc(100vw * 941 / 1672 * .785);
    width:19.5%;height:calc(100vw * 941 / 1672 * .121);
  }
  .menu-screen .lobby-art .lobby-player-profile{top:calc(100vw * 941 / 1672 * .02);height:calc(100vw * 941 / 1672 * .12)}
  .menu-screen .lobby-art .lobby-reward-card,.menu-screen .lobby-art .lobby-community-card{
    top:calc(100vw * 941 / 1672 + 18px);height:190px;width:44%;padding:8px;
    border-radius:9px;
  }
  .menu-screen .lobby-art .lobby-reward-card{left:4%}
  .menu-screen .lobby-art .lobby-community-card{right:4%}
  .lobby-reward-card .reward-kicker,.community-kicker{font-size:9px;letter-spacing:.015em}
  .lobby-reward-card .reward-main{font-size:18px;margin-top:7px}
  .lobby-reward-card .reward-prizes{font-size:21px;margin:8px 0}
  .lobby-reward-card .reward-condition{font-size:9px}
  .lobby-reward-card .reward-future{font-size:9px}
  .community-amount{font-size:23px;margin:10px 0}
  .community-meter{height:7px}
  .community-status,.community-next{font-size:9px;margin-top:8px}
  .community-milestones{font-size:9px;margin-top:8px}
  .menu-screen .lobby-art .lobby-weekly-clock{
    top:calc(100vw * 941 / 1672 + 220px);left:4%;right:auto;
    width:44%;height:79px;border-radius:9px;
  }
  .menu-screen .lobby-art .lobby-points{
    top:calc(100vw * 941 / 1672 + 220px);right:4%;left:auto;
    width:44%;height:79px;border-radius:9px;font-size:12px;
  }
  .lobby-weekly-clock>span{font-size:9px}
  .lobby-weekly-clock>strong{font-size:17px}
  .lobby-weekly-clock>small{font-size:9px}
  .menu-screen .lobby-art .lobby-rankings{
    top:calc(100vw * 941 / 1672 + 311px);bottom:auto;left:4%;
    width:92%;height:130px;border-radius:9px;padding:12px 17px;
  }
  .menu-screen .lobby-art .lobby-rankings-head,.lobby-rankings-head{font-size:14px}
  .lobby-rankings-body{font-size:12px;gap:7px}
  .menu-screen .lobby-art .lobby-weekly-note{
    top:calc(100vw * 941 / 1672 + 452px);left:4%;width:92%;height:34px;
    border-radius:7px;font-size:10px;
  }
  .menu-screen .lobby-art .mobile-lobby-actions{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;position:absolute;
    left:4%;right:4%;top:calc(100vw * 941 / 1672 + 499px);
  }
  .mobile-lobby-actions button{
    padding:16px 6px;font:900 12px/1.25 Arial,sans-serif;
    color:#fff1c5;border:1px solid #b5974e;border-radius:9px;
    background:linear-gradient(150deg,#1a3630,#0c1b20);cursor:pointer;
  }
  .mobile-lobby-actions button:first-child{border-color:#50d69a;color:#c5ffe0}
  .mobile-lobby-actions button:focus-visible{outline:2px solid white;outline-offset:2px}
  .lobby-status{bottom:7px;font-size:11px;padding:6px 10px}
}


/* 888POOL FIX 30/10/2026 | HOME PREMI PRESERVATA.
   Evidenzia SOLO il risultato finale. Nessun effetto su SHOT / FOUL / lobby. */
@keyframes gameOverBlink888 {
  0%,100% {opacity:1;filter:brightness(1);box-shadow:0 0 8px #ffd77840,0 0 18px #ffd77822;}
  50% {opacity:.62;filter:brightness(1.3);box-shadow:0 0 16px #ffe1a088,0 0 28px #ffd27855;}
}
@keyframes gameOverGlow888 {
  0%,100% {text-shadow:0 0 5px #fff3d059,0 0 12px #ffc85d37;transform:translateX(-50%) scale(1);}
  50% {text-shadow:0 0 10px #fff8e0dd,0 0 21px #ffd670aa,0 0 29px #ffa64366;transform:translateX(-50%) scale(1.018);}
}
.arena > .scoreline #status.match-end-notice {
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:-28px!important;
  width:max-content!important;
  max-width:min(92%,880px)!important;
  padding:8px 18px!important;
  border:1px solid #f2c86dbb!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#3d230cec,#170e07f0)!important;
  color:#fff1c9!important;
  font-size:clamp(12px,1.15vw,16px)!important;
  font-weight:900!important;
  line-height:1.3!important;
  letter-spacing:.055em!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  transform:translateX(-50%)!important;
  z-index:12!important;
  pointer-events:none!important;
  animation:gameOverBlink888 1.15s ease-in-out infinite,gameOverGlow888 1.8s ease-in-out infinite!important;
}
@media(max-width:760px){
 .arena > .scoreline #status.match-end-notice {
  bottom:-24px!important;
  max-width:95%!important;
  padding:6px 12px!important;
  font-size:11px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 .arena > .scoreline #status.match-end-notice {animation:none!important;transform:translateX(-50%)!important;}
}


/* Local beta: keep all three live numbers legible in the existing compact card. */
.community-beta{font-size:clamp(6px,.62vw,10px);font-weight:800;letter-spacing:.016em;color:#f8d994;margin-top:1.6%;line-height:1.15}
.lobby-community-card .community-status{margin-top:2%;font-size:clamp(7px,.72vw,11px)}
.lobby-community-card .community-next{margin-top:2%}
@media(max-width:760px){.community-beta{font-size:clamp(6px,.7vw,9px);margin-top:3px}.lobby-community-card .community-status{margin-top:4px}.lobby-community-card .community-next{margin-top:4px}}

/* 888POOL: live server statistics instead of fake spectator figures baked into
   the stadium decoration. Only mask the bottom edge of the LEFT background
   while a match is on screen. Do not modify game canvas or table geometry. */
body:has(#startMenu.hidden)::before {
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 79%,transparent 89%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 79%,transparent 89%,transparent 100%);
}
.arena-live-counts {
  display:none;
  position:fixed;
  left:8px;
  bottom:20px;
  width:clamp(112px,12.5vw,178px);
  box-sizing:border-box;
  z-index:5;
  padding:10px 9px 8px;
  background:linear-gradient(140deg,rgba(5,15,29,.96),rgba(11,29,38,.96));
  border:1px solid rgba(212,171,92,.55);
  border-radius:9px;
  box-shadow:0 5px 24px #0009;
  color:#e8f7f3;
  pointer-events:none;
  font-family:Arial,sans-serif;
}
body:has(#startMenu.hidden) .arena-live-counts:not([hidden]) {display:block;}
.arena-live-count {display:flex;align-items:baseline;justify-content:space-between;gap:5px;margin:3px 0;}
.arena-live-count strong {font-size:clamp(17px,1.7vw,24px);font-weight:900;color:#b7ffdb;font-variant-numeric:tabular-nums;}
.arena-live-count span {font-size:clamp(8px,.8vw,11px);font-weight:800;color:#e6c47d;letter-spacing:.025em;}
.arena-live-counts small {display:block;margin-top:7px;font-size:8px;color:#a2b4b8;line-height:1.2;}
@media(max-width:900px){.arena-live-counts{bottom:9px;left:4px;width:117px;padding:7px 6px}.arena-live-count strong{font-size:17px}.arena-live-count span{font-size:8px}}

/* 888Pool / 14-day cycle: FIVE real ranks, independent of the underlying artwork. */
.menu-screen .lobby-art .lobby-rankings{height:19.2%;bottom:2.8%;justify-content:flex-start;gap:2%;padding:1% 1.2%;}
.menu-screen .lobby-art .lobby-rankings-head{font-size:clamp(8px,.9vw,13px);flex-shrink:0;}
.menu-screen .lobby-art .lobby-rankings-body{font-size:clamp(7px,.72vw,11px);line-height:1.12;gap:3px;flex:1;justify-content:space-around;overflow:hidden;}
.rank-dialog-tabs{display:flex;gap:8px;margin:12px 0;}
.rank-dialog-tabs button,.rank-dialog-pager button{cursor:pointer;background:#14252b;color:#eee0bd;border:1px solid #806f4c;border-radius:8px;padding:9px 12px;font-weight:850;}
.rank-dialog-tabs button.active{background:#59441c;color:#ffe5a6;border-color:#f2c468;}
.rank-dialog-list{max-height:min(55vh,450px);overflow-y:auto;padding-right:4px;}
.rank-dialog-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 4px;border-bottom:1px solid #ffffff24;color:#f0ede3;font:13px/1.35 Arial,sans-serif;}
.rank-dialog-row span{flex:1;min-width:0;overflow-wrap:anywhere;}
.rank-dialog-row strong{flex-shrink:0;color:#f2cf7d;font-variant-numeric:tabular-nums;}
.rank-dialog-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:12px;}
.rank-dialog-pager[hidden]{display:none;}
.rank-dialog-pager button:disabled{opacity:.35;cursor:default;}
.my-rank-profile{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 14px;}
.my-rank-profile>div{display:flex;flex-direction:column;gap:5px;padding:11px;border:1px solid #c29c54;border-radius:8px;background:linear-gradient(130deg,#12272b,#091319);}
.my-rank-profile small{color:#b5d6c7;font:800 10px/1.3 Arial,sans-serif;}
.my-rank-profile strong{color:#ffe4a2;font:900 clamp(16px,2vw,26px)/1 Arial,sans-serif;}
.my-rank-profile span{color:#d4e6dd;font:11px/1.4 Arial,sans-serif;}
.menu-screen .lobby-art .lobby-player-copy small{line-height:1.2;white-space:normal;}
@media(max-width:720px){.menu-screen .lobby-art .lobby-rankings{height:20%;bottom:2.3%;}.menu-screen .lobby-art .lobby-rankings-body{gap:1px;font-size:clamp(6px,.7vw,9px)}.rank-dialog-row{font-size:12px;}}