:root {
  color-scheme: dark;
  --bg: #171b17;
  --panel: #252a22;
  --line: #474d3d;
  --muted: #a6ab98;
  --white: #f2f0dc;
  --gold: #f6c55e;
  --mono: "IBM Plex Mono", Consolas, monospace;
  font-family: "Barlow", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}
* {box-sizing:border-box}
body {margin:0;min-height:100vh;color:var(--white);background:radial-gradient(ellipse at 38% 8%,#2c3026 0%,#1e231c 41%,var(--bg) 78%);}
button,input {font:inherit}
button {cursor:pointer;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible {outline:3px solid #f5d57d;outline-offset:4px}
button:disabled {cursor:default}
.console {max-width:1144px;margin:auto;padding:24px 36px 30px}
.mast,.brand,.top-actions,.telemetry,.readout,.aim-panel,.angle-adjust,.section-heading,.hints,.hints span {display:flex;align-items:center}
.mast {justify-content:space-between;margin:0 0 19px;gap:16px}
.languages {display:flex;justify-content:flex-end;gap:3px;margin:0 0 8px;font-size:12px}
.languages a {padding:4px 8px;color:var(--muted);border-radius:3px;text-decoration:none}
.languages a[aria-current] {color:var(--gold);background:var(--panel)}
.languages a:hover,.languages a:focus-visible {text-decoration:underline}
html[lang=en] .notice {width:max-content;min-width:0;max-width:95%;text-align:center}
.brand {gap:12px}
#insignia {width:49px;height:49px;image-rendering:pixelated;background:#e5b657;border:1px solid #f2cf80;box-shadow:3px 3px #0d100c}
.name-ko {font-size:12px;font-weight:800;letter-spacing:2px;color:#c0c4aa}
h1 {font-family:"Barlow Condensed",Impact,"Arial Black",sans-serif;font-size:clamp(29px,3.2vw,42px);font-style:italic;line-height:.92;letter-spacing:.5px;color:#f2ebd2;margin:3px 0 0}
.top-actions {gap:7px}
.quiet {height:37px;border:1px solid var(--line);background:#282d25;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:4px;padding:0 11px;font-size:12px;font-weight:700}
.quiet:hover:not(:disabled),.step:hover:not(:disabled) {border-color:#9a9d85;background:#373c30}
.quiet:disabled {opacity:.45}
.icon-only {width:37px;padding:0}
#music[aria-pressed="true"] .music-slash {display:none}
.quiet svg {width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.help-icon {width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;line-height:14px;text-align:center;font:700 12px / 14px var(--mono)}
@media(max-width:440px){.mast #guide{width:34px;padding:0}.mast #guide span:last-child{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}}
.arena {background:#22271f;overflow:hidden;border:1px solid #545943;border-radius:6px;box-shadow:0 12px 32px #10130e50}
.telemetry {padding:0 20px;height:45px;background:#292e25;border-bottom:1px solid #10140f;gap:22px}
.readout {gap:9px;white-space:nowrap}
.label,.angle-data label {color:#b9bda8;font-size:12px;font-weight:700}
.readout b,.angle-data output,.ticks,.ammo-key,.fire kbd {font-family:var(--mono);font-variant-numeric:tabular-nums}
.readout b {font-size:17px;color:#f1eddb}
.readout b span {color:#9a9e8e;font-size:12px}
.status-light {width:7px;height:7px;background:var(--gold);box-shadow:0 0 7px #e8b45655}
.wave-remaining {color:var(--muted);font-size:11px}
#waveClock {font:700 13px var(--mono);color:var(--white)}
.troop {border-left:1px solid var(--line);padding-left:22px}
#troops {display:inline-flex;gap:4px}
.pip {width:11px;height:14px;display:inline-block;background:#a7bfa1;clip-path:polygon(31% 0,69% 0,69% 13%,83% 13%,83% 44%,67% 44%,67% 53%,85% 53%,100% 66%,100% 99%,0 99%,0 66%,15% 53%,33% 53%,33% 44%,17% 44%,17% 13%,31% 13%)}
.pip.dead {background:#545b4e}
.kills {margin-left:auto}
.clock {padding-left:20px;border-left:1px solid var(--line)}
.clock b {color:var(--gold)}
.field {position:relative;background:#a58378;isolation:isolate;overflow:hidden;border-bottom:2px solid #11160f}
#field {width:100%;display:block;aspect-ratio:640/298;image-rendering:pixelated;touch-action:manipulation;cursor:crosshair}
.sector {position:absolute;left:13px;bottom:8px;display:flex;align-items:center;gap:6px;color:#f1e8cb;font:700 10px/1.2 "Malgun Gothic",sans-serif;letter-spacing:1px;background:#20251de6;padding:5px 8px;border:1px solid #69705a88;pointer-events:none}
.sector i {width:5px;height:5px;background:var(--gold)}
.fort-readout {padding-left:6px;border-left:1px solid #777b68}.fort-readout b {color:#d1d6a9;font-variant-numeric:tabular-nums}
.notice {position:absolute;top:14px;left:50%;transform:translateX(-50%);padding:7px 13px;min-width:max-content;background:#22271fed;border:1px solid #b9a170;color:#ffda86;font-size:13px;font-weight:bold;pointer-events:none}
.notice:empty {display:none}
.boss-hud {position:absolute;top:10px;left:50%;transform:translateX(-50%);width:min(75%,550px);padding:9px 13px 10px;border:1px solid #b07760;border-top:3px solid #ed9472;background:#322a27ef;color:#ffdfbe;pointer-events:none}
.boss-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:clamp(11px,1.4vw,16px)}
#bossNumbers {font:700 12px var(--mono);color:#ffd4c2}
#bossHp {display:block;width:100%;height:11px;appearance:none;border:0;background:#51413d;accent-color:#ed8064}
#bossHp::-webkit-progress-bar {background:#51413d}
#bossHp::-webkit-progress-value {background:linear-gradient(90deg,#b94e46,#faac7c)}
#bossHp::-moz-progress-bar {background:#ed8064}
#bossMeter {position:relative}
#bossMeter.escorts-ready::after {content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#ffdfad}
.boss-hud:not([hidden])~.notice {top:auto;bottom:9%}
.ammo-card.ultimate:not(.locked) {border-color:#bc85ad}
.ammo-card.ultimate[aria-pressed=true],.fire.ultimate {background:#56364a;color:#fce4e8;border-color:#f2a5ca}
.ammo-stock {display:flex;gap:3px;margin-top:4px}
.ammo-stock i {width:5px;height:7px;transform:skew(-12deg);background:#e0a2c6}
.ammo-stock i.empty {background:#665562}
@media(max-width:580px){.boss-hud{width:85%;top:4px;padding:3px 6px 5px}.boss-heading{margin-bottom:2px}#bossHp{height:7px}}
.aim-panel {gap:20px;padding:13px 18px;background:linear-gradient(#30352a,#292e24)}
.angle-data {min-width:73px;display:grid;gap:1px}
.angle-data output {color:var(--gold);font-size:26px;font-weight:bold;line-height:1.08}
.angle-adjust {flex:1;gap:10px;min-width:80px}
.step {width:34px;height:34px;flex-shrink:0;background:#343a2d;border:1px solid #525943;border-radius:3px;color:#dbdec8;font-size:19px;line-height:1}
.range {width:100%;min-width:0}
#angle {--progress:45%;width:100%;margin:6px 0 0;cursor:pointer;height:17px;appearance:none;background:transparent;display:block;touch-action:pan-y}
#angle::-webkit-slider-runnable-track {height:4px;background:linear-gradient(to right,#d3b764 0 var(--progress),#515845 var(--progress) 100%)}
#angle::-webkit-slider-thumb {appearance:none;width:12px;height:17px;margin-top:-7px;background:#f3ce78;border:2px solid #34382a;border-radius:2px;box-shadow:0 0 0 1px #bba260}
#angle::-moz-range-track {height:4px;background:#737a60}
#angle::-moz-range-thumb {width:10px;height:15px;background:var(--gold);border-radius:2px}
.ticks {color:#b2b7a1;font-size:10px;display:flex;justify-content:space-between}
.fire {position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffdb89;background:#f0ba50;color:#292516;min-width:195px;height:46px;border-radius:4px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 3px #8d6c2c}
.fire:hover:not(:disabled) {background:#ffcf70}
.fire:active:not(:disabled) {transform:translateY(2px);box-shadow:0 1px #8d6c2c}
.fire.cooling {background:#4a4834;color:#e8d9af;border-color:#7c7552;box-shadow:0 2px #333426}
#fireFill {position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:#79724466;z-index:-1}
.fire kbd {font-size:9px;border:1px solid #876f37;padding:2px 4px;border-radius:2px}
.fire-symbol {font-size:20px}
.combat-actions {display:flex;align-items:stretch;gap:8px}
.focus-fire {position:relative;overflow:hidden;min-width:132px;height:46px;border:1px solid #86a183;border-radius:4px;background:#384b38;color:#e1edcf;display:flex;align-items:center;justify-content:center;gap:10px;padding:3px 10px;box-shadow:0 2px #253023}
.focus-fire strong,.focus-fire small {display:block}
.focus-fire strong {font-size:13px}
.focus-fire small {font-size:10px;font-variant-numeric:tabular-nums;margin-top:2px}
.focus-fire kbd {font:700 10px var(--mono);border:1px solid #809375;border-radius:2px;padding:2px 4px}
.focus-fire:hover:enabled {background:#486346}
.focus-fire:disabled {color:#a7b19c;background:#30382e;border-color:#576150}
.focus-fire.engaged {background:#465737;color:#f3ebbe;border-color:#d4c47e}
.focus-fire.engaged::after {content:"";position:absolute;inset:auto 0 0;height:3px;transform-origin:left;transform:scaleX(var(--remaining));background:#ecce7e}
#troops.engaged .pip:not(.dead) {background:#f2cc76}
.combat-actions .fire {flex:1}
@media(max-width:580px){.combat-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}.combat-actions .fire{grid-column:auto;min-width:0}.focus-fire{min-width:0;height:41px}.focus-fire kbd{display:none}}
.armory {margin-top:20px}
.section-heading {justify-content:space-between;gap:8px;margin-bottom:9px}
.section-heading h2 {font-size:15px;letter-spacing:.7px;margin:0}
.section-heading>span {color:var(--muted);font-size:11px}
.ammo-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ammo-card {position:relative;text-align:left;display:flex;align-items:center;gap:8px;min-height:78px;padding:10px 12px;border:1px solid #464d3d;border-radius:4px;background:#272d23;color:#dce0ce}
.ammo-card[aria-pressed=true] {border:1px solid #d4b365;background:linear-gradient(110deg,#44412b,#343629);box-shadow:inset 3px 0 #efbe5d}
.ammo-card:hover:not(:disabled) {border-color:#d0bd7e}
.ammo-card.locked {background:#22271f}
.ammo-card.earning::after {content:"";position:absolute;left:1px;right:1px;bottom:1px;height:2px;background:#a99b63;transform:scaleX(var(--unlock-progress,0));transform-origin:left}
.ammo-card canvas {width:33px;height:51px;image-rendering:pixelated;flex-shrink:0}
.ammo-card.locked canvas {opacity:.63}
.ammo-card strong {font-size:15px;display:block}
.ammo-card.locked strong {color:#b5baa7}
.ammo-meta {display:block;margin-top:5px;font-size:11px;color:var(--muted)}
.ammo-card[aria-pressed=true] .ammo-meta {color:#e6c777}
.ammo-key {position:absolute;top:5px;right:6px;color:#9da68e;font-size:10px}
.hints {justify-content:center;flex-wrap:wrap;gap:18px;color:#a6ad9a;font-size:10px;margin-top:15px}
.hints span {gap:4px}
.hints kbd {font:10px var(--mono);padding:1px 4px;border:1px solid #515946;border-radius:3px;color:#c9ceba}
dialog {padding:0;border:1px solid #8a8868;border-radius:7px;background:#282d23;color:var(--white);max-width:min(420px,91vw);width:100%;box-shadow:0 14px 80px #080b08c9}
dialog::backdrop {background:#10150ed4}
.dialog-body {padding:24px}
.dialog-stripe {height:4px;width:30px;background:var(--gold);margin-bottom:19px}
.dialog-body h2 {margin:0 0 12px;font-size:25px}
#dialogText {font-size:14px;line-height:1.72;color:#d0d4be}
#dialogText p {margin:9px 0}
#dialogActions {display:flex;gap:9px;margin-top:23px}
#dialogActions button {border:1px solid var(--line);background:#363c30;border-radius:4px;padding:10px 16px;font-weight:bold;min-height:43px}
#dialogActions button:first-child {background:var(--gold);border-color:var(--gold);color:#272719}
@media(min-width:950px) and (max-height:820px){.console{max-width:min(1110px,calc(135vh + 50px));padding-top:14px}.mast{margin-bottom:12px}.armory{margin-top:14px}.hints{margin-top:10px}}
@media(max-width:770px){.console{padding:16px}.mast{margin-bottom:14px}.telemetry{gap:12px;padding:0 12px}.clock,.troop{padding-left:12px}.aim-panel{gap:12px}.fire{min-width:145px}.fire kbd{display:none}.ammo-card{gap:5px;padding:8px}.ammo-card strong{font-size:13px}.ammo-meta{font-size:10px}}
@media(max-width:580px){.console{padding:14px 8px 20px}.mast{padding:0 4px}.brand{gap:9px}#insignia{width:38px;height:38px}.name-ko{font-size:10px}.top-actions{gap:4px}.quiet{height:34px}.icon-only{width:34px}.telemetry{height:36px;padding:0 7px;gap:8px}.readout{gap:4px}.label{font-size:10px}.readout b{font-size:13px}.readout b span{font-size:10px}.status-light{display:none}.troop,.clock{padding-left:7px}#troops{gap:2px}.pip{width:7px;height:10px}.sector{font-size:8px;bottom:4px;left:5px;padding:2px 4px}.notice{font-size:10px;top:4px}.aim-panel{display:grid;grid-template-columns:56px 1fr;gap:8px;padding:10px}.angle-data{min-width:0}.angle-data output{font-size:22px}.fire{grid-column:1/-1;width:100%;height:41px}.step{width:35px;height:36px}.armory{margin:16px 3px 0}.ammo-grid{grid-template-columns:1fr 1fr;gap:6px}.ammo-card{min-height:63px;padding:6px 12px}.ammo-card canvas{width:28px;height:42px}.section-heading>span{font-size:10px}.hints{display:none}}
@media(max-width:360px){.telemetry{gap:4px}.troop,.clock{padding-left:4px}.top-actions .quiet{padding:0 7px}.brand h1{font-size:26px}}
@media(max-width:680px){.wave{display:grid;grid-template-columns:auto auto;column-gap:4px;row-gap:0}.wave .status-light{display:none}.wave-remaining{grid-column:1/-1;font-size:9px;line-height:1.2}.wave-remaining time{font-size:10px}.telemetry{height:43px}}