:root{--bg:#05070a;--panel:#0e151c;--panel2:#142029;--line:#2a3b48;--line2:#3d5566;--text:#dde7ef;--dim:#8399a8;--accent:#f2b33d;--accent2:#ffd270;--cyan:#7ee8ff;--red:#ff5a4a;--green:#58e07a;--font:"Chakra Petch","Segoe UI",system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden;user-select:none;-webkit-user-select:none;height:100%;margin:0}button,input,select{font-family:inherit}#app{position:fixed;inset:0}.game{position:absolute;display:flex;inset:0}.viewport{position:relative;overflow:hidden;flex:1}canvas.view{display:block;cursor:none;outline:none}.topbar{position:absolute;display:flex;color:#c5d4df;text-shadow:0 1px 2px #000;pointer-events:none;gap:14px;font-size:12px;top:8px;left:10px}.topbar .paused{color:var(--accent);font-weight:700}.topbar .desync{color:var(--red);font-weight:700}.topbar .speed{color:#8fd8ff;font-weight:700}.sw-timers{position:absolute;pointer-events:none;text-shadow:0 1px 2px #000;font-size:12px;top:28px;left:10px}.swt{margin:2px 0}.swt b{color:var(--accent2);margin-left:6px}.sw-dot{display:inline-block;vertical-align:-1px;border-radius:2px;width:9px;height:9px;margin-right:6px;box-shadow:0 0 0 1px #0008}.messages{position:absolute;pointer-events:none;display:flex;flex-direction:column;gap:3px;max-width:60%;font-size:14px;bottom:44px;left:12px}.msg{text-shadow:0 1px 2px #000,0 0 6px #000;transition:opacity 1s}.msg.fade{opacity:0}.start-hint{position:absolute;color:#ffe3a8;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #000;animation:2s ease-in-out infinite hint-pulse;background:#0b141dd0;border:1px solid #ffcf7088;border-radius:6px;max-width:calc(100% - 32px);padding:8px 16px;transition:opacity .5s;font-size:15px;top:48px;left:50%;transform:translate(-50%)}.start-hint span{color:#9fb3c8;font-size:13px}.start-hint.fade{opacity:0}@keyframes hint-pulse{50%{border-color:#ffcf70;box-shadow:0 0 12px #ffcf7055}}.chat-input{display:none;position:absolute;color:var(--text);border:1px solid var(--line2);outline:none;background:#0b1218e8;width:min(520px,70%);padding:7px 10px;font-size:14px;bottom:12px;left:12px}.sidebar{display:flex;position:relative;background:linear-gradient(#17222b,#0d141a 40%,#0b1116);border-left:1px solid #000;flex-direction:column;flex:none;gap:6px;width:256px;padding:8px 8px 6px;box-shadow:inset 1px 0 #2c3e4b}.sb-radar{position:relative;box-shadow:0 0 0 1px var(--line2),inset 0 0 20px #000;background:#05080a;border:1px solid #000;height:140px}.minimap{display:block;cursor:crosshair}.radar-off{position:absolute;display:flex;color:#5e7381;letter-spacing:3px;pointer-events:none;justify-content:center;align-items: center;font-size:12px;font-weight:700;inset:0}.sb-credits{text-align:center;color:var(--accent2);letter-spacing:1px;border:1px solid var(--line);text-shadow:0 0 10px #f2b33d55;font-variant-numeric:tabular-nums;background:#070b0e;padding:2px 0;font-size:24px;font-weight:700}.sb-cr-sym{color:var(--accent);margin-right:6px}.sb-buttons{display:flex;gap:5px}.sb-btn{border:1px solid var(--line2);color:#c6d6e2;cursor:pointer;display:flex;background:linear-gradient(#22313c,#172129);flex:1;justify-content:center;align-items: center;height:30px;font-size:17px;font-weight:700}.sb-btn:hover{background:linear-gradient(#2b3d4b,#1c2832)}.sb-btn.active{border-color:var(--accent);color:var(--accent2);background:linear-gradient(#5a4316,#3a2b0d)}.sb-sw{display:flex;flex-direction:column;gap:4px}.sw-btn{position:relative;display:flex;color:#e9d29a;cursor:pointer;background:#12100b;border:1px solid #5a4316;justify-content:space-between;align-items: center;padding:4px 8px 7px;font-size:12px}.sw-btn.ready{border-color:var(--accent);animation:1s infinite alternate pulse;box-shadow:0 0 12px #f2b33d66}.sw-bar{position:absolute;background:#000;height:3px;bottom:0;left:0;right:0}.sw-bar div{background:var(--accent);height:100%}@keyframes pulse{0%{box-shadow:0 0 4px #f2b33d44}to{box-shadow:0 0 16px #f2b33daa}}.sb-main{display:flex;flex:1;gap:6px;min-height:0}.sb-power{position:relative;border:1px solid var(--line);overflow:hidden;background:#050708;width:12px}.sb-power-fill{position:absolute;background:repeating-linear-gradient(0deg,#3ce35a 0 3px,#1f8a36 3px 4px);transition:height .4s;bottom:0;left:0;right:0}.sb-power-fill.warn{background:repeating-linear-gradient(0deg,#f1d23a 0 3px,#8a7a1f 3px 4px)}.sb-power-fill.low{animation:.6s infinite alternate blink;background:repeating-linear-gradient(0deg,#f0453a 0 3px,#8a2420 3px 4px)}@keyframes blink{to{opacity:.55}}.sb-power-drain{position:absolute;background:#fff;height:2px;transition:bottom .4s;left:-2px;right:-2px;box-shadow:0 0 4px #fff}.sb-power-text{color:var(--dim);text-align:center;font-size:11px}.sb-col{display:flex;flex-direction:column;flex:1;gap:5px;min-height:0}.sb-tabs{display:flex;gap:3px}.sb-tab{border:1px solid var(--line);color:#7f97a8;cursor:pointer;position:relative;background:linear-gradient(#1c2933,#121b22);flex:1;height:30px;padding:4px}.sb-tab svg{width:18px;height:18px}.sb-tab.active{color:var(--accent2);border-color:var(--accent);background:linear-gradient(#3a2e14,#1f1a0e)}.sb-tab.empty{opacity:.4}.sb-tab.busy:after{content:"";position:absolute;background:var(--cyan);border-radius:50%;width:5px;height:5px;top:3px;right:3px}.sb-tab.ready:after{background:var(--accent);animation:.4s infinite alternate blink}.sb-cameos{overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:78px;scrollbar-width:thin;scrollbar-color:#2a3b48 transparent;flex:1;align-content: start;gap:4px}.sb-empty{grid-column:1/3;color:var(--dim);text-align:center;padding:18px 6px;font-size:12px}.cameo{position:relative;cursor:pointer;overflow:hidden;background:radial-gradient(at 50% 40%,#2a3d4c,#101920 75%);border:1px solid #000;box-shadow:inset 0 0 0 1px #314552}.cameo:hover{box-shadow:inset 0 0 0 1px var(--accent2)}.cameo.dim{filter:grayscale(.7)brightness(.6)}.cameo-icon{position:absolute;object-fit:contain;width:100%;height:calc(100% - 14px);inset:0 0 14px}.cameo-wipe{position:absolute;pointer-events:none;inset:0}.cameo-name{position:absolute;text-align:center;color:#dbe6ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#000a;padding:0 2px;font-size:10.5px;line-height:14px;bottom:0;left:0;right:0}.cameo-cost{position:absolute;color:var(--accent2);text-shadow:0 1px 1px #000;font-size:10px;top:2px;right:3px}.cameo-count{position:absolute;color:#fff;text-shadow:0 1px 2px #000;font-size:14px;font-weight:700;top:1px;left:4px}.cameo-state{position:absolute;text-align:center;letter-spacing:1px;color:#fff;text-shadow:0 0 4px #000,0 1px 1px #000;pointer-events:none;font-size:13px;font-weight:700;top:26px;left:0;right:0}.cameo.is-ready{box-shadow:inset 0 0 0 2px var(--accent)}.cameo.is-ready .cameo-state{color:var(--accent2);animation:.5s infinite alternate blink}.cameo.is-hold .cameo-state{color:#ff9a6a}.tooltip{display:none;position:fixed;z-index:50;border:1px solid var(--line2);pointer-events:none;background:#0a1015f2;width:230px;padding:8px 10px;font-size:12px;box-shadow:0 6px 20px #000a}.tooltip b{color:var(--accent2);font-size:13px}.tt-row{display:flex;color:#c9d6e0;gap:12px;margin:4px 0}.tt-row .pos{color:var(--green)}.tt-row .neg{color:#ff8a6a}.tt-desc{color:#b2c2ce;line-height:1.35}.tt-hint{color:#6c8394;margin-top:6px;font-size:10.5px}.overlay{position:fixed;display:flex;z-index:40;background:#000a;justify-content:center;align-items: center;inset:0}.panel{border:1px solid var(--line2);overflow:auto;background:linear-gradient(#111b23,#0b1217);min-width:340px;max-width:min(980px,94vw);max-height:92vh;padding:22px 26px;box-shadow:0 20px 60px #000c,inset 0 1px #2f4554}.panel h1,.panel h2{letter-spacing:2px;text-transform:uppercase;margin:0 0 14px;font-weight:700}.panel h2{color:var(--accent2);font-size:22px}.panel h3{color:var(--cyan);margin:14px 0 6px;font-size:15px}.panel p{line-height:1.45}.go-panel h1{text-align:center;font-size:56px}.go-panel h1.win{color:var(--accent2);text-shadow:0 0 30px #f2b33d88}.go-panel h1.lose{color:var(--red);text-shadow:0 0 30px #ff5a4a66}.go-panel p{text-align:center;color:var(--dim)}button{border:1px solid var(--line2);color:var(--text);cursor:pointer;letter-spacing:.5px;background:linear-gradient(#22313c,#161f27);padding:8px 16px;font-size:14px}button:hover{background:linear-gradient(#2a3c49,#1b262f);border-color:#6f8ea3}button.primary{border-color:var(--accent);color:#fff7e2;background:linear-gradient(#a8741b,#6e4a0d);font-weight:700}button.primary:hover{background:linear-gradient(#c58a22,#835811)}button.danger{color:#ffb3a8;border-color:#8a3a32}button.small{padding:3px 9px;font-size:12px}button.ghost{background:0 0}button.big{display:block;text-transform:uppercase;letter-spacing:2px;width:100%;margin:8px 0;padding:13px;font-size:17px}.btns{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}select,input{color:var(--text);border:1px solid var(--line2);background:#070c10;padding:5px 7px;font-size:13px}input[type=range]{padding:0}label.row{display:flex;justify-content:space-between;align-items: center;gap:20px;margin:8px 0}.menu-panel{width:520px}.help{color:var(--dim);border-top:1px solid var(--line);margin-top:14px;padding-top:10px;font-size:12px;line-height:1.6}.stats{border-collapse:collapse;width:100%;margin-top:10px;font-size:14px}.stats th,.stats td,.slots th,.slots td,.rooms th,.rooms td{text-align:left;border-bottom:1px solid var(--line);padding:6px 10px}.stats th,.slots th,.rooms th{color:var(--dim);text-transform:uppercase;font-size:12px;font-weight:600}#menu{position:fixed;z-index:30;inset:0}.menu-bg{position:absolute;background:radial-gradient(at 30% 20%,#2a3a2a55,#0000 60%),radial-gradient(at 80% 90%,#4a1e1455,#0000 60%),repeating-linear-gradient(60deg,#0b1116 0 22px,#0d141a 22px 44px),#070a0d;inset:0}.menu-bg:after{content:"";position:absolute;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0003 2px 3px);inset:0}.menu-wrap{position:relative;display:flex;flex-direction:column;justify-content:center;align-items: center;gap:24px;height:100%;padding:20px}.title-block{text-align:center}.title{letter-spacing:10px;color:#e9eef2;text-shadow:0 4px #000,0 0 40px #ff5a2a44;font-size:clamp(54px,9vw,112px);font-weight:700;line-height:1}.title span{color:var(--accent);text-shadow:0 4px #000,0 0 40px #f2b33d88}.subtitle{color:var(--dim);letter-spacing:4px;text-transform:uppercase;margin-top:8px;font-size:14px}.main-panel{width:380px}.name-row{display:flex;color:var(--dim);flex-direction:column;gap:6px;margin-bottom:10px;font-size:13px}.name-row input{padding:9px;font-size:16px}.credits-line{color:#5d7282;text-align:center;margin-top:14px;font-size:11px}.lobby-panel{width:820px}.slots,.rooms{border-collapse:collapse;width:100%;margin-bottom:10px}.slots tr.me td{background:#f2b33d10}.tag{color:var(--accent);border:1px solid var(--accent);margin-left:6px;padding:0 4px;font-size:10px}.ready{color:var(--green);font-weight:700}.dim{color:var(--dim)}.code{color:var(--cyan);margin-left:8px;font-size:16px}.room-head{display:flex;justify-content:space-between;align-items: center;gap:12px;margin-bottom:14px}.room-head h2{margin:0}.settings{display:flex;border:1px solid var(--line);background:#0007;flex-wrap:wrap;gap:12px 18px;margin:14px 0 4px;padding:12px}.settings label{display:flex;color:var(--dim);flex-direction:column;gap:4px;font-size:12px}.settings label.chk{color:var(--text);flex-direction:row;align-items: center;gap:6px;font-size:13px}.settings input[type=number]{width:100px}.settings label.wide{flex-basis:100%}.settings .map-desc{color:var(--dim);flex-basis:100%;margin:0;font-size:13px}.row-inline{display:flex;gap:8px;margin:8px 0}.row-inline input{flex:1}.err{color:#ff8a7a;min-height:18px;margin-top:6px;font-size:13px}.chat{margin-top:12px}.chat-log{overflow-y:auto;border:1px solid var(--line);user-select:text;background:#0007;height:110px;padding:6px 8px;font-size:13px;line-height:1.4}.chat-in{width:100%;margin-top:4px}.help-panel{width:900px}.help-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}.help-cols ol{padding-left:18px;line-height:1.5}.keys{border-collapse:collapse;font-size:13px}.keys td{border-bottom:1px solid #1d2a33;padding:3px 10px 3px 0}.keys td:first-child{color:var(--accent2);white-space:nowrap}kbd{border:1px solid var(--line2);background:#1d2a33;border-radius:3px;padding:0 5px}.loading{position:fixed;z-index:60;background:var(--bg);display:flex;letter-spacing:3px;color:var(--dim);text-transform:uppercase;flex-direction:column;justify-content:center;align-items: center;gap:18px;inset:0}.spinner{border:3px solid #2a3b48;border-top-color:var(--accent);animation:.8s linear infinite spin;border-radius:50%;width:46px;height:46px}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:900px){.help-cols{grid-template-columns:1fr}}