:root{--panel-bg:#101620ad;--panel-border:#ffffff1f;--text:#f3f5f8;--muted:#a9b4c4;--accent:#ffd34d;--danger:#ff5a4f;--move:#59c3ff;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{background:#9fcbed;width:100%;height:100%;margin:0;overflow:hidden}#renderCanvas{touch-action:none;outline:none;width:100%;height:100%;display:block;position:fixed;inset:0}#loading{background:#0f1620;place-items:center;font-size:18px;display:grid;position:fixed;inset:0}#hud{pointer-events:none;-webkit-user-select:none;user-select:none;font-size:13px;position:fixed;inset:0}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:10px;padding:10px 12px;position:absolute}.turn-card{width:230px;top:12px;left:12px}.tc-head{align-items:center;gap:8px;font-size:16px;font-weight:700;display:flex}.tc-head .dot{border-radius:50%;width:12px;height:12px}.tc-head .turn-no{color:var(--muted);margin-left:auto;font-size:12px;font-weight:500}.owner{color:var(--muted);align-items:center;gap:6px;margin-top:4px;font-size:12px;display:flex}.team-dot{border-radius:2px;width:8px;height:8px}.weapon{color:var(--accent);margin-top:4px;font-weight:600}.weapon-desc{color:var(--muted);margin-bottom:8px;font-size:12px}.bar{background:#ffffff1f;border-radius:6px;height:12px;position:relative;overflow:hidden}.bar .fill{border-radius:6px;width:0;height:100%}.bar.hp{height:16px}.bar.hp .fill{background:linear-gradient(90deg,#3ecf6e,#8be36b)}.bar.hp span{place-items:center;font-size:11px;font-weight:600;display:grid;position:absolute;inset:0}.bar.power{height:16px}.bar.power .fill{background:linear-gradient(90deg,#ffd34d,#ff8a3d 60%,#ff4b3d)}.bar.power.charging{box-shadow:0 0 0 2px #ffd34d99}.bar.power .marker{background:#fff;width:3px;margin-left:-1px;display:none;position:absolute;top:-2px;bottom:-2px}.bar.move .fill{background:var(--move)}.bar-label{color:var(--muted);justify-content:space-between;margin:8px 0 4px;display:flex}.bar-label b{color:var(--text)}.top-center{text-align:center;min-width:150px;top:12px;left:50%;transform:translate(-50%)}.timer{font-size:30px;font-weight:800;line-height:1}.timer.urgent{color:var(--danger)}.phase{min-height:16px;color:var(--muted);margin-top:2px;font-size:12px}.wind{justify-content:center;align-items:center;gap:8px;margin-top:4px;display:flex}.wind-label{color:var(--muted)}.wind-arrow{color:var(--move);font-size:20px;font-weight:900;transition:transform .15s linear;display:inline-block}.debug{min-width:240px;font-size:12px;top:12px;right:12px}.debug div{justify-content:space-between;gap:12px;display:flex}.debug span{color:var(--muted)}.demo-panel{width:260px;font-size:12px;top:150px;left:12px}.demo-panel h3{color:var(--accent);margin:0 0 6px;font-size:14px}.demo-row{justify-content:space-between;gap:12px;display:flex}.demo-row span{color:var(--muted)}.demo-panel dl{grid-template-columns:auto 1fr;gap:3px 10px;margin:8px 0 0;display:grid}.demo-panel dt{color:var(--accent);font-weight:700}.demo-panel dd{margin:0}.demo-note{color:var(--muted);margin:8px 0 0}.aim{width:min(420px,100vw - 24px);bottom:12px;left:50%;transform:translate(-50%)}.aim-row{align-items:center;gap:12px;display:flex}.readouts{flex:1}.readout{justify-content:space-between;font-size:14px;display:flex}.readout span{color:var(--muted)}.readout b{font-variant-numeric:tabular-nums}.range{color:var(--muted);text-align:right;font-size:11px}.gauge{flex:none;width:92px;height:96px}.gauge-axis{stroke:#ffffff59;stroke-width:1px;stroke-dasharray:2 2}.gauge-arc{fill:#ffd34d2e;stroke:#ffd34d99;stroke-width:1px}.gauge-needle{stroke:var(--accent);stroke-width:3px;stroke-linecap:round}.gauge-hub{fill:var(--accent)}.help{width:300px;bottom:12px;right:12px}.help.hidden{display:none}.help h3{margin:0 0 6px;font-size:14px}.help h3 small{color:var(--muted);font-weight:400}.help dl{grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:12px;display:grid}.help dt{color:var(--accent);white-space:nowrap;font-weight:700}.help dd{color:var(--text);margin:0}.nameplates,.floaters{position:absolute;inset:0}.plate{text-align:center;text-shadow:0 1px 2px #000;font-size:11px;font-weight:700;position:absolute;top:0;left:0}.plate-hp{background:#00000080;border-radius:3px;width:54px;height:6px;margin:2px auto 0;overflow:hidden}.plate-fill{height:100%}.plate.active:before{content:"▼";color:var(--accent);font-size:12px;display:block}.plate-tag{color:var(--muted);font-weight:500}.plate.dead{opacity:.45}.floater{text-shadow:0 2px 4px #000;font-size:22px;font-weight:900;animation:1.2s ease-out forwards float-up;position:absolute;transform:translate(-50%,-50%)}@keyframes float-up{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-160%)}}.banner{text-shadow:0 3px 8px #0009;opacity:0;white-space:nowrap;font-size:30px;font-weight:900;position:absolute;top:28%;left:50%;transform:translate(-50%)}.banner.show{animation:1.8s ease-out forwards banner}@keyframes banner{0%{opacity:0;transform:translate(-50%,10px)}15%{opacity:1;transform:translate(-50%)}75%{opacity:1}to{opacity:0}}.battle-ui{position:absolute;inset:0}.boost{color:var(--accent);margin-top:6px;font-size:12px;font-weight:700}.boost:empty,.geyser:empty{display:none}.geyser{color:#6fc2b4;margin-top:4px;font-size:12px;font-weight:700}.turn-order{gap:6px;max-width:calc(100vw - 24px);display:flex;position:absolute;top:118px;left:50%;overflow:hidden;transform:translate(-50%)}.turn-order .chip{background:var(--panel-bg);white-space:nowrap;opacity:.8;border:2px solid;border-radius:999px;padding:3px 8px;font-size:12px}.turn-order .chip.current{opacity:1;font-weight:800;box-shadow:0 0 0 2px #ffd34d8c}.turn-order .chip.mine{text-decoration:underline}.items{width:230px;bottom:12px;left:12px}.items h3{color:var(--muted);margin:0 0 6px;font-size:13px}.item-slot{grid-template-columns:auto 1fr auto;align-items:center;gap:2px 8px;padding:3px 0;display:grid}.item-slot.disabled{opacity:.45}.item-slot kbd{border:1px solid var(--panel-border);text-align:center;min-width:20px;font:inherit;background:#ffffff14;border-radius:4px;padding:1px 5px;font-weight:700}.item-slot small{color:var(--muted);grid-column:2/-1}.lobby-root,.results{pointer-events:auto}button,select,input{font:inherit;color:var(--text);border:1px solid var(--panel-border);background:#ffffff1a;border-radius:8px;padding:6px 12px}button{cursor:pointer}button:hover:not(:disabled){background:#ffffff2e}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#1b1f27;font-weight:700}button.primary:hover:not(:disabled){background:#ffdf73}select option{color:#1b1f27}.lobby{width:min(640px,100vw - 32px);max-height:calc(100vh - 32px);padding:16px;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)}.lobby header{justify-content:space-between;align-items:baseline;margin-bottom:12px;display:flex}.lobby h2{margin:0;font-size:20px}.lobby .count{color:var(--muted)}.lobby .teams{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.team{border-top:3px solid var(--team);background:#ffffff0a;border-radius:8px;padding:8px 10px}.team h3{color:var(--team);margin:0 0 6px;font-size:14px}.team ul{margin:0 0 8px;padding:0;list-style:none}.seat{border-bottom:1px solid #ffffff0f;grid-template-columns:1fr auto 16px;gap:8px;padding:4px 0;display:grid}.seat small{color:var(--muted);font-weight:400}.seat.mine .seat-name{font-weight:700}.seat.empty,.seat.offline,.seat-char{color:var(--muted)}.seat.ready .seat-ready{color:#5fd068;font-weight:900}.my-seats{gap:8px;margin-top:12px;display:grid}.my-seat{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.my-seat .my-name{min-width:90px;font-weight:700}.my-seat label{color:var(--muted);align-items:center;gap:6px;display:flex}.lobby footer{justify-content:space-between;align-items:center;gap:12px;margin-top:14px;display:flex}.lobby .status{color:var(--muted)}.results{text-align:center;padding:18px 28px;top:40%;left:50%;transform:translate(-50%,-50%)}.results-title{font-size:32px;font-weight:900}.results-sub{color:var(--muted);margin-top:6px}.full-screen{background:radial-gradient(circle at 50% 20%,#1d3a52,#0f1620 70%);padding:16px;position:fixed;inset:0;overflow:auto}.full-screen:not(.home){place-items:center;display:grid}.card{align-content:start;gap:10px;padding:18px;display:grid;position:static}.card h1,.card h2{margin:0}.card h2{font-size:16px}.card h2 small,.muted{color:var(--muted);font-weight:400}.auth{width:min(380px,100%)}.auth label,.create label{color:var(--muted);gap:4px;display:grid}.auth small,.create small{font-size:11px}.auth .error:empty{display:none}.error{color:var(--danger);margin:0}.tabs{gap:6px;display:flex}.tabs button{flex:1}.tabs button.active{border-color:var(--accent);color:var(--accent)}label.check{align-items:center;gap:8px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}button.small{padding:2px 8px;font-size:12px}.home-bar{flex-wrap:wrap;align-items:center;gap:12px;max-width:1100px;margin:0 auto 8px;display:flex}.home-bar h1{margin:0 auto 0 0;font-size:22px}.home-bar .stats{color:var(--muted)}.home-status{max-width:1100px;min-height:18px;color:var(--accent);margin:0 auto 8px}.home-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;max-width:1100px;margin:0 auto;display:grid}.room-list,.history{gap:4px;max-height:320px;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.room-list li{border-bottom:1px solid #ffffff0f;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:6px 0;display:grid}.room-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.room-players,.tag{color:var(--muted)}.history li{justify-content:space-between;gap:8px;padding:4px 0;display:flex}.history small{color:var(--muted);white-space:nowrap}.history .result-win span{color:#5fd068}.history .result-loss span,.history .result-left span{color:var(--danger)}.create{gap:10px;display:grid}.chat-box{border:1px dashed var(--panel-border);border-radius:8px;min-height:120px}.room-bar{border:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;-webkit-user-select:text;user-select:text;border-radius:10px;align-items:center;gap:10px;padding:5px 6px 5px 12px;font-size:12px;display:flex;position:absolute;top:12px;right:12px}.room-bar button.armed{border-color:var(--danger);color:var(--danger)}.debug{top:60px}.room-settings{color:var(--muted);flex-wrap:wrap;gap:16px;margin-bottom:10px;display:flex}.room-settings b{color:var(--text)}.seat{grid-template-columns:1fr auto 16px auto}.my-seat{gap:6px;display:grid}.loadout{color:var(--muted);gap:4px;display:grid}.loadout ul{flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;display:flex}.loadout li{color:var(--text);align-items:center;gap:6px;display:flex}.loadout b{text-align:center;min-width:14px}.results-table{border-collapse:collapse;margin:10px auto 4px;font-size:13px}.results-table th,.results-table td{text-align:right;padding:3px 10px}.results-table th:first-child,.results-table td:first-child{text-align:left}.results-table th{color:var(--muted);font-weight:500}.results-table tr.mine td{font-weight:800}@media (max-width:760px){.debug,.help{display:none}.turn-card{width:180px}.items{width:180px;top:160px;bottom:auto}.turn-order{top:104px}}.settings-backdrop{z-index:50;background:#0810188c;place-items:center;display:grid;position:fixed;inset:0}.settings-dialog{width:min(440px,100vw - 32px);position:relative}.settings-dialog h2{margin:0 0 10px;font-size:18px}.settings-dialog fieldset{border:0;gap:8px;margin:0;padding:0;display:grid}.settings-dialog legend{color:var(--muted);margin-bottom:6px}.settings-option{cursor:pointer;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 8px;display:grid}.settings-option span{color:var(--muted);grid-column:2;font-size:12px}.settings-dialog fieldset+fieldset{margin-top:14px}.settings-choices{flex-wrap:wrap;gap:6px 16px;display:flex}.settings-choices label{cursor:pointer;align-items:center;gap:6px;display:flex}.settings-note{color:var(--muted);margin:0;font-size:12px}.settings-hint{color:var(--muted);margin:12px 0;font-size:12px}