:root{color-scheme:dark;--cyan:#69f6db;--blue:#58aaff;--ink:#07111d}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050a12;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
#game{display:block;width:100vw;height:100vh;touch-action:none;cursor:crosshair}
.hud{position:fixed;z-index:3;left:0;right:0;top:0;height:78px;padding:13px clamp(14px,4vw,48px);display:flex;align-items:center;gap:clamp(16px,4vw,58px);background:linear-gradient(#030812ed,transparent);pointer-events:none;text-shadow:0 2px 10px #000}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.brand strong{display:block;color:#ecffff;font-size:18px;letter-spacing:.1em}.brand small,.stat small,.health-stat small{display:block;color:#8fa5b6;font-size:9px;letter-spacing:.18em}.ball-mark{width:35px;height:35px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,#7affdf 25%,#178bd0 70%,#082d5a);border:2px solid #b8fff4;box-shadow:0 0 22px #5df6de77}.stat{text-align:right}.stat strong{font:800 19px/1.2 tabular-nums,system-ui;color:#fff}.health-stat{width:clamp(82px,12vw,138px);text-align:right}.health-stat strong{display:none}.health-meter{height:12px;margin-top:5px;padding:2px;border:1px solid #ffffff52;border-radius:8px;background:#02070dbd;box-shadow:inset 0 1px 4px #000,0 0 12px #62ffc533}.health-meter span{display:block;width:100%;height:100%;border-radius:5px;background:linear-gradient(90deg,#ff355d 0%,#ff8e3c 28%,#ffe45b 56%,#55efa0 82%,#55eaff 100%);box-shadow:0 0 10px #54efb0;transition:width .2s ease,filter .2s ease}
.card{position:fixed;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,510px);padding:31px 38px 28px;text-align:center;color:#eafaff;background:linear-gradient(145deg,#10283cef,#07121ef5);border:1px solid #8fffff35;border-radius:22px;box-shadow:0 30px 90px #000c,0 0 70px #38d9ff18;backdrop-filter:blur(12px)}
.big-ball{margin:-76px auto 15px;width:94px;height:94px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff 0,#79ffe1 20%,#1e91d0 58%,#071f48 100%);border:4px solid #bafff2;box-shadow:0 15px 35px #0009,0 0 38px #5fffe288}
.eyebrow{margin:7px 0;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.2em}.card h1,.card h2{margin:4px 0 12px;font-size:clamp(34px,8vw,53px);letter-spacing:.04em;line-height:1;color:#f1ffff}.card h2{font-size:38px}.card>p:not(.eyebrow){color:#aec4d1;line-height:1.55;font-size:14px;margin:10px auto 22px;max-width:420px}.card button{border:0;border-radius:9px;padding:14px 24px;min-width:190px;color:#05242a;background:linear-gradient(#9affeb,#42dbd4);font-weight:900;letter-spacing:.09em;cursor:pointer;box-shadow:0 7px 0 #147e89,0 13px 30px #0009}.card button:hover{filter:brightness(1.1);transform:translateY(-1px)}.start-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.card .secondary-btn{color:#e8ffff;background:linear-gradient(#24445a,#152b3a);box-shadow:0 7px 0 #071722,0 13px 30px #0009}.controls{display:flex;justify-content:center;gap:18px;margin-top:25px;color:#7f9aaa;font-size:11px}.compact{padding-top:29px}.score-submit-status{min-height:18px!important;margin:-10px 0 12px!important;color:#7fffdc!important;font-size:11px!important}.hall-entry{display:grid;gap:10px;max-width:340px;margin:0 auto 18px}.hall-entry label{text-align:left;color:#8fffea;font-size:9px;font-weight:900;letter-spacing:.15em}.hall-entry input{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid #6effd556;border-radius:9px;color:#fff;background:#020b14;font:800 15px system-ui;outline:none}.hall-entry input:focus{border-color:#74ffe2;box-shadow:0 0 15px #57ffd633}.card .hall-submit-btn{width:100%;min-width:0;padding:12px;font-size:10px}.hidden{display:none!important}
.tip{position:fixed;z-index:3;bottom:23px;left:50%;transform:translateX(-50%);padding:9px 16px;color:#dffff9;background:#04101bda;border:1px solid #77ffe044;border-radius:30px;font-size:12px;transition:opacity .35s;pointer-events:none;white-space:nowrap}
.restart-btn{position:fixed;z-index:4;right:67px;bottom:20px;height:38px;padding:0 15px;border:1px solid #ffffff2b;border-radius:20px;color:#dff;background:#071522dd;font-size:10px;font-weight:900;letter-spacing:.08em;cursor:pointer}.sound{position:fixed;z-index:4;right:20px;bottom:20px;width:38px;height:38px;border:1px solid #ffffff2b;border-radius:50%;color:var(--cyan);background:#071522dd;font-size:18px;cursor:pointer}
.hall-quick{position:fixed;z-index:4;right:172px;bottom:20px;width:38px;height:38px;border:1px solid #ffd86655;border-radius:50%;color:#ffe279;background:#071522dd;font-size:17px;cursor:pointer}
.zoom-controls{position:fixed;z-index:4;left:18px;bottom:20px;height:38px;display:flex;align-items:center;gap:4px;padding:3px;border:1px solid #ffffff2b;border-radius:21px;background:#071522dd}.zoom-controls button{width:31px;height:30px;padding:0;border:0;border-radius:50%;color:#bafff2;background:#173346;font-size:20px;font-weight:800;cursor:pointer}.zoom-controls output{min-width:42px;text-align:center;color:#dff;font:800 10px/1 tabular-nums,system-ui}
.shield-status{position:fixed;z-index:4;top:76px;right:18px;padding:7px 12px;border:1px solid #6dcfff99;border-radius:20px;color:#dff7ff;background:#06304edc;box-shadow:0 0 24px #36bfff88;font-size:10px;font-weight:900;letter-spacing:.08em;text-shadow:0 1px 4px #000}.shield-status span{color:#67d8ff}.shield-status strong{font:900 13px tabular-nums,system-ui;color:#fff}
.admin-panel{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:#01060cbb;backdrop-filter:blur(8px)}.admin-card{position:relative;width:min(92vw,400px);padding:27px 28px 24px;border:1px solid #65ffe071;border-radius:18px;color:#eafffb;background:linear-gradient(145deg,#102d3e,#07131f);box-shadow:0 24px 80px #000d,0 0 42px #41ffcc24}.admin-card h2{margin:2px 0 24px;font-size:29px;letter-spacing:.08em}.admin-card label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#aefeed;font-size:12px;font-weight:900;letter-spacing:.12em}.admin-card label output{color:#ffe168;font:900 20px/1 tabular-nums,system-ui}.admin-card input[type=range]{width:100%;accent-color:#5bf1c5}.admin-card input[type=number]{width:100%;margin:13px 0;padding:11px 12px;border:1px solid #75ffe064;border-radius:9px;color:#fff;background:#030c15;font:800 18px tabular-nums,system-ui}.admin-card .admin-mode{gap:14px;margin:3px 0 17px;padding:13px 14px;border:1px solid #65ffe042;border-radius:11px;background:#04111bcc;cursor:pointer}.admin-mode>span{text-align:left}.admin-mode strong{display:block;color:#eafff9;font-size:12px}.admin-mode small{display:block;margin-top:4px;color:#819da6;font-size:9px;font-weight:600;letter-spacing:.02em;line-height:1.35}.admin-mode input{width:24px;height:24px;flex:0 0 auto;accent-color:#ff416b}.admin-actions{display:flex;gap:10px}.admin-actions button{flex:1;padding:11px;border:1px solid #ffffff25;border-radius:8px;color:#062522;background:#65e7ca;font-weight:900;cursor:pointer}.admin-actions button:last-child{color:#d6e6eb;background:#233746}.admin-card>small{display:block;margin-top:15px;color:#8099a4;font-size:10px}.admin-close{position:absolute;right:13px;top:12px;width:34px;height:34px;border:1px solid #ffffff28;border-radius:50%;color:#dff;background:#172d3b;font-size:22px;cursor:pointer}
.hall-panel{position:fixed;z-index:21;inset:0;display:grid;place-items:center;padding:16px;background:#01060cce;backdrop-filter:blur(9px)}.hall-card{position:relative;width:min(94vw,470px);max-height:min(88vh,670px);overflow:auto;padding:26px 24px 22px;border:1px solid #ffd96670;border-radius:18px;color:#f5ffff;background:linear-gradient(145deg,#162b3b,#07121d);box-shadow:0 26px 90px #000e,0 0 50px #ffd45418}.hall-card h2{margin:2px 0 17px;text-align:center;font-size:28px;letter-spacing:.06em}.hall-card .eyebrow{text-align:center}.hall-tabs{display:flex;gap:8px}.hall-tabs button{flex:1;padding:10px;border:1px solid #ffffff28;border-radius:8px;color:#9fb1ba;background:#102532;font-weight:900;cursor:pointer}.hall-tabs button.active{color:#201600;border-color:#ffe376;background:linear-gradient(#ffe987,#d8a82e)}.hall-status{min-height:17px;margin:11px 0 4px;text-align:center;color:#7fa0ae;font-size:10px}.hall-list{list-style:none;margin:0;padding:0}.hall-list li{display:grid;grid-template-columns:34px 1fr auto auto;gap:8px;align-items:center;margin-top:7px;padding:9px 10px;border:1px solid #ffffff12;border-radius:9px;background:#ffffff08;font-size:12px}.hall-list li:nth-child(1){border-color:#ffe36c66;background:#ffe36c12}.hall-rank{color:#ffe276;font-weight:900}.hall-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eaffff;font-weight:800}.hall-meta{color:#718a96;font-size:9px}.hall-score{color:#72ffcf;font:900 15px tabular-nums,system-ui}
@media(max-width:620px){.hud{height:68px;gap:7px;padding:8px 8px}.brand{margin-right:auto}.brand strong{font-size:10px}.brand small{display:none}.ball-mark{width:25px;height:25px}.stat strong{font-size:12px}.stat small,.health-stat small{font-size:6px}.health-stat{width:58px}.health-meter{height:10px;margin-top:3px}.lives-display{gap:1px;font-size:17px}.score-stat strong{color:#70ffd2}.card{padding:27px 18px 23px;max-height:92vh;overflow:auto}.big-ball{width:74px;height:74px;margin-top:-59px}.start-actions{gap:9px}.card button{min-width:150px;padding:13px 15px;font-size:11px}.controls{gap:8px;flex-direction:column}.tip{bottom:58px;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}.shield-status{top:66px;right:8px}.restart-btn,.sound,.hall-quick,.zoom-controls{bottom:12px}.zoom-controls{left:12px}.zoom-controls output{display:none}.restart-btn{right:61px}.hall-quick{right:166px}.sound{right:12px}.hall-card{padding:24px 15px 18px}.hall-list li{grid-template-columns:28px 1fr auto;gap:6px}.hall-meta{display:none}}
.pause-card{z-index:19}.pause-card small{display:block;margin-top:18px;color:#718d9b;font-size:10px;letter-spacing:.08em}
.admin-sync-status{min-height:16px;margin:10px 0 6px;color:#7fffdc;font-size:10px;font-weight:800}
.player-setup{max-width:350px;margin:0 auto 15px}.player-setup label{display:block;text-align:left;color:#8fffea;font-size:9px;font-weight:900;letter-spacing:.15em}.player-setup input{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid #6effd556;border-radius:9px;color:#fff;background:#020b14;font:800 15px system-ui;outline:none}.player-setup input:focus{border-color:#74ffe2;box-shadow:0 0 15px #57ffd633}.player-setup p{min-height:14px;margin:5px 0 0;color:#ff7791;font-size:10px}.remembered-player{max-width:360px;margin:0 auto 15px;padding:11px 14px;border:1px solid #68ffe044;border-radius:10px;color:#9dffee;background:#071b28;font-size:10px;font-weight:800;letter-spacing:.09em}.remembered-player strong{color:#fff}.remembered-player small{display:block;margin-top:6px;color:#7fa1af;font-size:9px;letter-spacing:.04em}.bank-status{position:fixed;z-index:4;top:76px;left:50%;transform:translateX(-50%);padding:7px 12px;border:1px solid #ffd96899;border-radius:20px;color:#fff0b1;background:#42300de8;box-shadow:0 0 22px #ffc84b55;font-size:10px;font-weight:900;letter-spacing:.07em}.bank-status strong{color:#fff;font:900 13px tabular-nums,system-ui}.hall-quick{right:67px}
@media(max-width:620px){.bank-status{top:66px}.hall-quick{right:61px}}
.card .change-name-btn{min-width:0;margin-top:9px;padding:7px 11px;border:1px solid #ffffff24;color:#b9d6df;background:#132b39;box-shadow:none;font-size:8px}.change-name-panel{margin-top:11px;padding-top:10px;border-top:1px solid #ffffff18}.change-name-panel label{display:block;text-align:left;color:#8fffea;font-size:8px;letter-spacing:.12em}.change-name-panel input{display:block;width:100%;margin-top:5px;padding:10px 11px;border:1px solid #6effd556;border-radius:8px;color:#fff;background:#020b14;font:800 14px system-ui;outline:none}.change-name-panel p{min-height:13px;margin:5px 0;color:#ff7891;font-size:9px;letter-spacing:0}.change-name-panel>div{display:flex;gap:8px}.card .change-name-panel button{flex:1;min-width:0;padding:9px 7px;box-shadow:0 4px 0 #147e89;font-size:8px}.card .change-name-panel .secondary-btn{box-shadow:0 4px 0 #071722}
.message-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
@media(max-width:620px){.message-actions{gap:9px}}
@media(max-width:620px){.player-setup input,.change-name-panel input,.admin-card input[type=number]{font-size:16px}}
.shield-status.ending{color:#fff0f2;border-color:#ff496dcc;background:#4a0714ed;box-shadow:0 0 12px #ff214f,0 0 34px #ff214faa;animation:shieldDangerPulse .28s ease-in-out infinite alternate}.shield-status.ending span,.shield-status.ending strong{color:#ff8ba1}@keyframes shieldDangerPulse{from{transform:scale(1);filter:brightness(.85)}to{transform:scale(1.1);filter:brightness(1.45)}}
