:root{--red:#ff5a5f;--red-deep:#c9303a;--blue:#3f9bff;--blue-deep:#1f64c7;--ink:#f6f3ea;--ink-dim:#f6f3eaa8;--panel:#12161eb8;--panel-solid:#161b24;--panel-border:#ffffff1f;--accent:#ffc53d;--good:#57e08a;--font-display:"Russo One", "Segoe UI", system-ui, sans-serif;--font-ui:"Chakra Petch", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font-ui);-webkit-user-select:none;user-select:none;background:#9fc4d8;margin:0;overflow:hidden}#app{position:fixed;inset:0}#game-canvas{width:100%;height:100%;display:block}#app.aiming #game-canvas{cursor:none}#world-labels,#ui-root{pointer-events:none;position:absolute;inset:0}#ui-root>*{pointer-events:none}#ui-root .interactive,#ui-root .interactive *{pointer-events:auto}.hidden{display:none!important}.btn{font-family:var(--font-display);letter-spacing:.06em;color:#1b1405;cursor:pointer;background:linear-gradient(#ffd766,#ffb21e);border:none;border-radius:10px;padding:14px 28px;font-size:18px;transition:transform 80ms,filter .15s;box-shadow:0 4px #b77200,0 10px 24px #0000004d}.btn:hover{filter:brightness(1.07)}.btn:active{transform:translateY(3px);box-shadow:0 1px #b77200,0 6px 14px #0000004d}.btn:focus-visible{outline-offset:3px;outline:3px solid #fff}.btn.secondary{color:var(--ink);background:#ffffff1a;box-shadow:inset 0 0 0 2px #ffffff38}.btn.secondary:active{box-shadow:inset 0 0 0 2px #ffffff4d}.segmented{background:#0000004d;border-radius:10px;gap:4px;padding:4px;display:inline-flex}.segmented button{font-family:var(--font-ui);letter-spacing:.08em;color:var(--ink-dim);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:9px 18px;font-size:15px;font-weight:700}.segmented button[aria-pressed=true]{background:var(--ink);color:#1a1f29}.segmented button:focus-visible{outline:2px solid var(--accent)}.overlay{justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.overlay.dim{background:radial-gradient(#0a0e1659,#0a0e16bf)}.card{background:var(--panel);-webkit-backdrop-filter:blur(10px);border:1px solid var(--panel-border);text-align:center;border-radius:18px;width:100%;max-width:560px;padding:32px 36px;box-shadow:0 30px 80px #00000059}.title{font-family:var(--font-display);letter-spacing:.02em;background:linear-gradient(#fff 30%,#ffd36b);color:#0000;filter:drop-shadow(0 4px #00000059);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(44px,8vw,76px);line-height:.95}.subtitle{color:var(--ink-dim);letter-spacing:.04em;margin:10px 0 0;font-size:15px}.badge{letter-spacing:.12em;color:var(--accent);background:#ffc53d29;border:1px solid #ffc53d66;border-radius:999px;margin-top:14px;padding:5px 12px;font-size:12px;font-weight:700;display:inline-block}.menu-section{margin-top:26px}.menu-label{letter-spacing:.16em;color:var(--ink-dim);margin-bottom:10px;font-size:12px;font-weight:700}.menu-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px;display:flex}.controls-grid{text-align:left;color:var(--ink-dim);grid-template-columns:auto 1fr;gap:6px 14px;max-width:320px;margin:0 auto;font-size:14px;display:grid}kbd{font-family:var(--font-ui);color:var(--ink);white-space:nowrap;background:#ffffff1f;border:1px solid #fff3;border-bottom-width:3px;border-radius:6px;padding:1px 7px;font-size:12px;font-weight:700}.hud-top{font-family:var(--font-display);border-radius:12px;align-items:stretch;display:flex;position:absolute;top:14px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 8px 24px #0000004d}.hud-top .team{letter-spacing:.08em;align-items:center;gap:12px;padding:8px 16px;font-size:15px;display:flex}.hud-top .team.red{background:linear-gradient(90deg, var(--red-deep), var(--red))}.hud-top .team.blue{background:linear-gradient(90deg, var(--blue), var(--blue-deep))}.hud-top .score{text-align:center;min-width:26px;font-size:28px}.hud-top .timer{background:var(--panel-solid);justify-content:center;align-items:center;min-width:96px;padding:8px 18px;font-size:22px;display:flex}.hud-top .limit{font-family:var(--font-ui);color:var(--ink-dim);text-align:center;letter-spacing:.1em;font-size:11px;position:absolute;bottom:-18px;left:0;right:0}.hud-bottom{background:var(--panel);-webkit-backdrop-filter:blur(8px);border:1px solid var(--panel-border);border-radius:14px;flex-direction:column;gap:8px;width:min(320px,100vw - 40px);padding:12px 14px;display:flex;position:absolute;bottom:20px;left:20px}.hud-row{letter-spacing:.14em;color:var(--ink-dim);justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;display:flex}.hud-row .value{font-family:var(--font-display);color:var(--ink);letter-spacing:.02em;font-size:18px}.bar{background:#00000073;border-radius:6px;height:12px;position:relative;overflow:hidden}.bar>.fill{transform-origin:0;transition:transform .12s linear;position:absolute;inset:0}.bar.health>.fill{background:linear-gradient(90deg,#3ed17a,#8cf0a8)}.bar.health.mid>.fill{background:linear-gradient(90deg,#f2b632,#ffd76b)}.bar.health.low>.fill{background:linear-gradient(90deg,#e8413c,#ff7a6b);animation:.6s ease-in-out infinite alternate pulse}.bar.health>.ghost{transform-origin:0;background:#ffffff59;transition:transform .5s .15s;position:absolute;inset:0}.bar.reload{height:6px}.bar.reload>.fill{background:#c9d4e3;transition:none}.bar.reload.ready>.fill{background:var(--accent)}@keyframes pulse{0%{filter:brightness()}to{filter:brightness(1.5)}}.hud-hint{color:var(--ink-dim);letter-spacing:.06em;text-shadow:0 1px 2px #0009;font-size:12px;position:absolute;bottom:16px;right:18px}.center-message{font-family:var(--font-display);color:#fff;text-shadow:0 6px #0000004d,0 0 40px #0000004d;white-space:nowrap;font-size:96px;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)}.center-message.pop{animation:.7s cubic-bezier(.2,1.4,.4,1) both pop}.center-message.small{letter-spacing:.06em;font-size:28px}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%)scale(1.8)}30%{opacity:1}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.kill-feed{flex-direction:column;align-items:flex-end;gap:6px;display:flex;position:absolute;top:16px;right:16px}.kill-entry{background:var(--panel);letter-spacing:.04em;border-radius:8px;padding:6px 12px;font-size:14px;font-weight:700;transition:opacity .6s;animation:.25s ease-out both slideIn}.kill-entry .verb{color:var(--ink-dim);margin:0 6px;font-weight:500}.kill-entry.fade{opacity:0}.t0{color:var(--red)}.t1{color:var(--blue)}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:none}}.vignette{opacity:0;background:radial-gradient(#0000 55%,#dc1e1e8c 100%);transition:opacity .4s;position:absolute;inset:0}.crosshair{width:0;height:0;position:absolute;top:0;left:0}.crosshair svg{position:absolute;top:-26px;left:-26px;overflow:visible}.crosshair .ring{fill:none;stroke:#ffffff59;stroke-width:2px}.crosshair .reload{fill:none;stroke:#fff;stroke-width:3px;stroke-linecap:round;transform-origin:26px 26px;transform:rotate(-90deg)}.crosshair.ready .reload{stroke:var(--accent)}.crosshair .dot{fill:#fff}.crosshair .hit{stroke:#fff;stroke-width:3px;stroke-linecap:round;opacity:0}.crosshair.hit-flash .hit{animation:.28s ease-out hitmark}.crosshair.hit-rear .hit{stroke:var(--accent)}.crosshair.hit-kill .hit{stroke:var(--red)}@keyframes hitmark{0%{opacity:1}to{opacity:0}}.tank-label{will-change:transform;flex-direction:column;align-items:center;gap:3px;display:flex;position:absolute;top:0;left:0;transform:translate(-50%,-100%)}.tank-label .name{letter-spacing:.06em;text-shadow:0 1px 3px #000c;white-space:nowrap;font-size:13px;font-weight:700}.tank-label .hp{background:#0000008c;border-radius:3px;width:64px;height:6px;overflow:hidden}.tank-label .hp>div{transform-origin:0;height:100%}.tank-label.t0 .hp>div{background:var(--red)}.tank-label.t1 .hp>div{background:var(--blue)}.tank-label .state{color:var(--accent);letter-spacing:.1em;text-shadow:0 1px 2px #000;font-size:11px}.dmg-number{font-family:var(--font-display);color:#fff;text-shadow:0 2px #00000080,0 0 8px #0006;white-space:nowrap;will-change:transform, opacity;font-size:22px;position:absolute;top:0;left:0}.dmg-number.rear{color:var(--accent);font-size:26px}.dmg-number.front{color:#cfd6e0;font-size:18px}.dmg-number.taken{color:#ff8a80}.dmg-number small{font-family:var(--font-ui);letter-spacing:.14em;margin-left:4px;font-size:11px;font-weight:700}.result-title{font-family:var(--font-display);letter-spacing:.03em;margin:0;font-size:clamp(38px,7vw,64px)}.result-title.t0{color:var(--red)}.result-title.t1{color:var(--blue)}.result-score{font-family:var(--font-display);margin:6px 0 4px;font-size:40px}.result-sub{color:var(--ink-dim);letter-spacing:.08em;font-size:14px}.stats-table{border-collapse:collapse;width:100%;margin-top:22px;font-size:15px}.stats-table th{letter-spacing:.14em;color:var(--ink-dim);text-align:right;padding:6px 8px;font-size:11px;font-weight:700}.stats-table th:first-child,.stats-table td:first-child{text-align:left}.stats-table td{text-align:right;border-top:1px solid #ffffff14;padding:8px;font-weight:600}.stats-table tr.me td{background:#ffffff0f}.debug-panel{white-space:pre;background:#0009;border-radius:6px;padding:8px 10px;font:12px/1.5 ui-monospace,Consolas,monospace;position:absolute;top:16px;left:16px}@media (max-width:700px){.card{padding:24px 18px}.center-message{font-size:64px}.hud-top .team{padding:6px 10px;font-size:12px}.hud-top .score{font-size:22px}.hud-top .timer{min-width:76px;font-size:18px}.kill-feed{top:76px}}.overlay.scroll{align-items:flex-start;padding:32px 16px;overflow-y:auto}.card.wide{text-align:left;max-width:1080px}.card.menu-card{max-width:600px}.btn.small{border-radius:8px;padding:8px 14px;font-size:13px;box-shadow:0 3px #b77200}.btn.small.secondary{box-shadow:inset 0 0 0 2px #ffffff38}.btn.danger{color:#fff;background:linear-gradient(#ff6b6b,#d8363a);box-shadow:0 3px #8f1f22}.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6);transform:none}.btn.big{text-align:left;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:16px 22px;display:flex}.btn.big .big-label{font-size:22px}.btn.big .big-sub{font-family:var(--font-ui);letter-spacing:.02em;opacity:.75;font-size:13px;font-weight:600}.main-actions{flex-direction:column;gap:12px;margin-top:22px;display:flex}.menu-footnote{color:var(--ink-dim);letter-spacing:.04em;margin-top:22px;font-size:12px}.nick-field{text-align:left;flex-direction:column;gap:6px;max-width:320px;margin:24px auto 0;display:flex}.text-input,.select{font-family:var(--font-ui);color:var(--ink);background:#00000059;border:2px solid #ffffff29;border-radius:10px;outline:none;width:100%;padding:10px 12px;font-size:16px;font-weight:600}.select{width:auto;padding:7px 10px;font-size:14px}.select option{background:#1b2029}.text-input:focus,.select:focus{border-color:var(--accent)}.code-input{font-family:var(--font-display);letter-spacing:.35em;text-transform:uppercase;text-align:center;font-size:30px}.code-status{color:var(--ink-dim);min-height:18px;margin-top:8px;font-size:13px}.code-status.ok{color:var(--good)}.screen-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.screen-title{font-family:var(--font-display);letter-spacing:.03em;margin:0;font-size:34px}.screen-head .badge{margin-top:0}.screen-foot{flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px;display:flex}.foot-summary{text-align:center;min-width:200px;color:var(--ink-dim);flex:1;font-size:14px;font-weight:600}.field{margin-top:18px}.field-row{flex-wrap:wrap;align-items:flex-end;gap:22px;display:flex}.field-row .field{flex:0 auto}.field-row .field:first-child{flex:220px}.notice{color:var(--ink);text-align:left;background:#ffc53d1f;border:1px solid #ffc53d73;border-radius:12px;flex-direction:column;gap:4px;margin:14px 0 4px;padding:12px 16px;font-size:14px;display:flex}.notice strong{color:var(--accent);letter-spacing:.06em;font-size:13px}.card-grid{gap:10px;display:grid}.card-grid.maps{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.card-grid.tanks{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.card-grid.weapons{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.option-card{text-align:left;cursor:pointer;color:var(--ink);font-family:var(--font-ui);background:#00000047;border:2px solid #ffffff1a;border-radius:12px;flex-direction:column;align-items:stretch;gap:4px;padding:10px;transition:border-color .12s,transform .12s,background .12s;display:flex}.option-card:hover{border-color:#ffffff4d;transform:translateY(-1px)}.option-card[aria-pressed=true]{border-color:var(--accent);background:#ffc53d1f;box-shadow:0 0 0 3px #ffc53d2e}.option-card:focus-visible{outline:2px solid #fff}.option-title{font-family:var(--font-display);letter-spacing:.04em;font-size:15px}.option-subtitle{color:var(--ink-dim);font-size:12px;line-height:1.35}.option-detail{color:var(--accent);letter-spacing:.06em;font-size:12px;font-weight:700}.map-preview{aspect-ratio:1;border-radius:8px;width:100%;height:auto;margin-bottom:4px;display:block}.card-stats{margin-bottom:4px}.stat-bars{flex-direction:column;gap:4px;display:flex}.stat-row{letter-spacing:.1em;color:var(--ink-dim);grid-template-columns:58px 1fr;align-items:center;gap:6px;font-size:10px;font-weight:700;display:grid}.stat-bar{background:#ffffff1a;border-radius:3px;height:6px;overflow:hidden}.stat-bar>div{background:linear-gradient(90deg,#ffb21e,#ffd766);border-radius:3px;height:100%}.toggle-row{flex-wrap:wrap;gap:12px 26px;margin-top:18px;display:flex}.toggle{cursor:pointer;align-items:center;gap:10px;font-size:14px;font-weight:600;display:inline-flex;position:relative}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle .track{background:#ffffff2e;border-radius:11px;flex:none;width:40px;height:22px;transition:background .15s;position:relative}.toggle .track:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px}.toggle input:checked+.track{background:var(--good)}.toggle input:checked+.track:after{transform:translate(18px)}.toggle input:focus-visible+.track{outline:2px solid var(--accent)}.lobby-top{flex-wrap:wrap;gap:18px;margin-top:14px;display:flex}.room-code{background:#0000004d;border-radius:12px;flex-direction:column;gap:6px;min-width:240px;padding:12px 16px;display:flex}.room-code .code{font-family:var(--font-display);letter-spacing:.25em;font-size:30px}.room-code .code.offline{color:var(--ink-dim)}.room-code .hint{color:var(--ink-dim);font-size:12px}.lobby-side{flex-direction:column;flex:1;gap:10px;min-width:260px;display:flex}.settings-line{color:var(--ink-dim);font-size:13px;font-weight:600;line-height:1.5}.lobby-difficulty{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.lobby-difficulty .menu-label{margin:0}.lobby-buttons{flex-wrap:wrap;gap:8px;display:flex}.lobby-teams{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:18px;display:grid}.lobby-team{background:#00000040;border-top:4px solid;border-radius:14px;flex-direction:column;gap:8px;padding:12px;display:flex}.lobby-team.t0{border-color:var(--red)}.lobby-team.t1{border-color:var(--blue)}.team-header{font-family:var(--font-display);letter-spacing:.08em;justify-content:space-between;display:flex}.lobby-team.t0 .team-header{color:var(--red)}.lobby-team.t1 .team-header{color:var(--blue)}.team-header .count{color:var(--ink-dim);font-size:14px}.slot{background:#ffffff0d;border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;min-height:48px;padding:8px 10px;display:flex}.slot.empty{color:var(--ink-dim);background:0 0;border:2px dashed #ffffff24}.slot-name{flex-wrap:wrap;align-items:center;gap:6px;font-weight:700;display:flex}.slot-controls{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.slot .weapon-name{letter-spacing:.1em;color:var(--ink-dim);font-size:11px;font-weight:700}.slot .ready{letter-spacing:.12em;color:var(--good);font-size:11px;font-weight:700}.slot .ready.not{color:#ff8a80}.lobby-host{flex-direction:column;gap:10px;display:flex}.tag{letter-spacing:.1em;color:var(--ink-dim);text-transform:uppercase;background:#ffffff1f;border-radius:5px;padding:2px 6px;font-size:10px;font-weight:700}.tag.you{background:var(--accent);color:#1b1405}.tag.host{color:var(--good);background:#57e08a33}.lobby-error{color:#ff8a80;text-align:center;min-height:20px;margin-top:10px;font-size:14px;font-weight:700}.team-tables{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:18px;display:grid}.stats-table th:first-child.t0{color:var(--red)}.stats-table th:first-child.t1{color:var(--blue)}.stats-table td .nm{display:block}.stats-table td .sub{color:var(--ink-dim);letter-spacing:.04em;font-size:11px;font-weight:600;display:block}.result-title,.result-score,.result-sub{text-align:center}.scoreboard{background:var(--panel);-webkit-backdrop-filter:blur(10px);border:1px solid var(--panel-border);border-radius:16px;width:min(820px,100vw - 32px);padding:14px 18px;position:absolute;top:90px;left:50%;transform:translate(-50%)}.hud-bottom .weapon-row .weapon-name{color:var(--ink);font-family:var(--font-display);letter-spacing:.06em;font-size:14px}.bar.heat{height:6px}.bar.heat>.fill{background:linear-gradient(90deg,#ffb21e,#ff4a1a);transition:none}.bar.heat.overheated>.fill{animation:.25s ease-in-out infinite alternate pulse}.bar>.shield-fill{transform-origin:0;background:#5fd0ff8c;transition:transform .12s linear;position:absolute;inset:0;transform:scaleX(0)}.hud-ability{letter-spacing:.1em;color:var(--ink-dim);justify-content:space-between;padding-top:2px;font-size:11px;font-weight:700;display:flex}.hud-ability .soon{opacity:.6}.hud-effects{flex-wrap:wrap;gap:6px;display:flex}.hud-effects:empty{display:none}.effect-chip{letter-spacing:.08em;color:#10141b;background:var(--chip,#fff);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700}.effect-chip.bad{color:#fff;background:#ff6b5e}.hud-toast{font-family:var(--font-display);letter-spacing:.08em;color:#fff;text-shadow:0 3px #00000059,0 0 18px #00000059;white-space:nowrap;font-size:22px;position:absolute;top:24%;left:50%;transform:translate(-50%)}.hud-toast.pop{animation:.3s ease-out both toastIn}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.kill-entry .weapon-tag{letter-spacing:.12em;color:var(--ink-dim);border:1px solid #fff3;border-radius:4px;margin-left:8px;padding:1px 5px;font-size:10px}.tank-label .bot-tag{letter-spacing:.12em;color:#ffffffbf;vertical-align:1px;background:#00000073;border-radius:3px;margin-right:4px;padding:1px 4px;font-size:9px}@media (max-width:700px){.screen-title{font-size:26px}.card.wide{padding:20px 14px}.scoreboard{top:70px}}