@font-face{
  font-family:Defense;
  src:url('/fonts/OpenSans-Regular.woff2') format('woff2');
font-display:swap}
:root{
  color-scheme:dark;
  --ink:#e6efec;
  --muted:#8ba8a6;
  --dim:#526e72;
  --bg:#091416;
  --panel:#101f22;
  --line:#294043;
  --teal:#9ce5cd;
  --gold:#eac28a;
  --red:#ef8c7d;
--font:Defense,'Arial',sans-serif}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(ellipse at 75% 0%,#193435 0,transparent 42%),var(--bg);
  color:var(--ink);
  font:15px/1.6 var(--font);
-webkit-font-smoothing:antialiased}
button,select{
font:inherit}
button,a,select{
-webkit-tap-highlight-color:transparent}
button{
  cursor:pointer;
color:inherit}
button:disabled{
  cursor:default;
opacity:.4}
a{
color:inherit}
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{
  outline:2px solid var(--gold);
outline-offset:4px}
button{
touch-action:manipulation}
button[aria-disabled=true]{
opacity:.55}
svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
stroke-width:2}
button:active{
transform:translateY(1px)}
[hidden]{
display:none!important}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
border:0}
.skip-link{
  position:absolute;
  top:-60px;
  left:20px;
  z-index:20;
  background:var(--teal);
  color:var(--bg);
padding:12px}
.skip-link:focus{
top:10px}
.site-header{
  max-width:1440px;
  margin:auto;
  min-height:84px;
  padding:18px 42px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
border-bottom:1px solid #ffffff0c}
.home-link{
  font-size:12px;
  letter-spacing:1.8px;
  text-decoration:none;
  font-weight:700;
  display:flex;
  align-items:center;
gap:9px}
.brand-mark{
  color:var(--teal);
  font-size:31px;
line-height:1}
.brand-games{
  font-weight:400;
color:var(--muted)}
.header-caption{
  font:10px monospace;
  letter-spacing:2px;
color:var(--muted)}
.online-dot,.signal-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 10px #9ce5cd70;
margin-left:10px}
.header-actions{
  display:flex;
gap:9px}
.header-actions button{
  border:1px solid var(--line);
  background:transparent;
  padding:8px 13px;
  color:#c2d4d0;
  font-size:12px;
border-radius:3px}
.header-actions button:hover{
background:#ffffff08}
main{
  max-width:1320px;
  margin:auto;
padding:0 42px}
.game-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:35px 0 27px;
gap:20px}
.eyebrow{
  font:10px/1.6 monospace;
  letter-spacing:2.5px;
  color:var(--teal);
margin:0 0 10px}
.game-heading .eyebrow span{
  display:inline-block;
  width:17px;
  height:2px;
  vertical-align:middle;
  background:var(--teal);
margin-right:8px}
h1{
  font-size:clamp(30px,4.2vw,57px);
  line-height:1.1;
  font-weight:600;
  letter-spacing:-2px;
margin:0}
h1 em{
  color:var(--teal);
  font-style:normal;
font-weight:400}
.title-colon{
  color:var(--dim);
margin-right:5px}
.game-tagline{
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
margin:0 0 3px}
.game-tagline strong{
  color:#cad7d2;
font-weight:400}
.theater{
  border:1px solid #395353;
  border-radius:6px;
  box-shadow:0 25px 85px #0005;
  overflow:hidden;
background:var(--panel)}
.hud{
  height:77px;
  background:#102023;
  display:flex;
  align-items:center;
  gap:27px;
  padding:12px 24px;
border-bottom:1px solid var(--line)}
.hud-label{
  font:9px monospace;
  letter-spacing:1.7px;
color:var(--muted)}
.hud-wave{
  display:grid;
  grid-template-columns:auto auto;
  column-gap:12px;
min-width:170px}
.hud-wave .hud-label{
grid-column:1/3}
.hud-wave>strong{
  font-size:25px;
  line-height:1.2;
color:var(--gold)}
.phase{
  font:8px monospace;
  color:var(--teal);
  align-self:center;
letter-spacing:1px}
.resource{
  max-width:270px;
flex:1}
.resource>div:first-child{
  display:flex;
  justify-content:space-between;
  align-items:center;
gap:12px}
.resource strong{
font:14px monospace}
.meter{
  height:4px;
  background:#243b3d;
  margin-top:8px;
  overflow:hidden;
border-radius:2px}
.meter i{
  height:100%;
  display:block;
  transition:width .2s;
  background:var(--teal);
width:100%}
.supply-meter i{
  background:var(--gold);
width:0}
.supplies strong{
color:var(--gold)}
.hud-score{
  display:flex;
  flex-direction:column;
margin-left:auto}
.hud-score strong{
  font:20px/1.4 monospace;
letter-spacing:1px}
.pause-button{
  width:39px;
  height:39px;
  border:1px solid var(--line);
  background:#193035;
  border-radius:3px;
  display:grid;
  place-items:center;
  padding:0;
flex-shrink:0}
.field-wrap{
  position:relative;
  isolation:isolate;
background:#152b32}
.field-wrap canvas{
  display:block;
  width:100%;
  height:clamp(330px,43vw,505px);
  touch-action:pan-y;
cursor:crosshair}
.field-topline{
  position:absolute;
  inset:16px 20px auto;
  display:flex;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
  font:8px monospace;
  color:#b4c6c0;
  letter-spacing:1.8px;
text-shadow:0 1px 3px #000}
.launch-panel{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#07191aee 0%,#0b2023bb 43%,#081c2344 100%),url('./assets/key-art.webp') center/cover;
  display:flex;
  align-items:center;
  padding:30px 6%;
overflow:auto}
.launch-inner{
  max-width:425px;
padding-top:8px}
.launch-inner h2{
  font-size:clamp(28px,4.1vw,54px);
  line-height:1.03;
  font-weight:500;
  letter-spacing:-1.9px;
margin:10px 0 18px}
.launch-inner>p:not(.eyebrow){
  font-size:13px;
  line-height:1.7;
color:#b7ceca}
.difficulty-label{
  font:8px monospace;
  letter-spacing:1.5px;
  color:var(--muted);
  display:block;
margin-top:18px}
select{
  background:#0e2327e6;
  color:var(--ink);
  border:1px solid #57706c;
  border-radius:3px;
  font-size:12px;
  padding:8px 10px;
  min-width:270px;
  margin:5px 0 12px;
max-width:100%}
.primary-button{
  border:1px solid #adddc5;
  background:var(--teal);
  color:#0b2723;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.3px;
  padding:14px 20px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  width:100%;
  border-radius:3px;
text-decoration:none}
.primary-button:hover{
background:#c0f7e1}
.primary-button span{
  font-size:22px;
  font-weight:400;
line-height:1}
.launch-inner .launch-tip{
  font:10px var(--font);
margin:9px 0}
.launch-inner .personal-best{
  font:9px monospace;
  color:var(--gold)!important;
margin-bottom:0}
.battle-caption{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  max-width:80%;
  padding:6px 12px;
  border:1px solid #9ce5cd30;
  background:#0a1d20d9;
  border-radius:2px;
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:none;
  font:10px monospace;
  color:#c8dfd6;
white-space:nowrap}
.battle-caption .signal-dot{
  margin:0;
flex-shrink:0}
.intel-strip{
  min-height:43px;
  padding:9px 20px;
  display:flex;
  align-items:center;
  gap:15px;
  background:#0b191c;
  border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.intel-label{
  font:8px monospace;
  letter-spacing:1.5px;
  color:var(--gold);
white-space:nowrap}
.intel-strip p{
  font-size:11px;
  color:#a6bfbb;
  margin:0;
  line-height:1.4;
flex:1}
.intel-strip button{
  padding:6px 10px;
  border:1px solid #6b7460;
  background:#303b2d;
  color:var(--gold);
  font-size:10px;
  white-space:nowrap;
border-radius:2px}
.command{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  padding:20px;
  gap:22px;
background:linear-gradient(120deg,#172c2d,#102023)}
.section-label{
  display:flex;
  justify-content:space-between;
  color:#bdcfca;
  font:8px monospace;
  letter-spacing:1.5px;
  margin-bottom:11px;
gap:10px}
.section-label span+span{
  color:#6f9691;
  font-size:7px;
letter-spacing:1px}
.roster{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px}
.unit-card{
  text-align:left;
  position:relative;
  min-width:0;
  border:1px solid #35504f;
  border-radius:3px;
  background:#112326;
  padding:10px 12px 9px;
transition:border-color .15s,background .15s}
.unit-card:hover{
  border-color:#8ab5a8;
background:#1b3535}
.unit-card.selected{
  background:linear-gradient(145deg,#27483f,#16312e);
  border-color:var(--teal);
box-shadow:inset 0 2px var(--teal)}
.unit-top{
  display:flex;
  justify-content:space-between;
align-items:center}
kbd{
  font:9px monospace;
  border:1px solid #68867d55;
  border-radius:2px;
  padding:1px 4px;
  color:#9ebdb5;
white-space:nowrap}
.unit-cost{
  font:13px monospace;
color:var(--gold)}
.unit-cost:before{
  content:'◇ ';
font-size:11px}
.unit-card>svg{
  display:block;
  width:75px;
  height:39px;
  margin:4px 0;
  color:#9fc2b6;
  stroke-width:2.8;
  stroke-linecap:square;
stroke-linejoin:round}
.unit-card.selected>svg{
color:var(--teal)}
.unit-card strong{
  display:block;
  font-size:9px;
  letter-spacing:.8px;
white-space:nowrap}
.unit-role{
  display:block;
  font-size:9px;
  color:#92afa6;
margin:3px 0 7px}
.unit-state{
  font:7px monospace;
  color:#7da396;
letter-spacing:1px}
.lane-controls{
  display:flex;
  gap:6px;
  align-items:center;
margin-top:13px}
.lane-controls>span{
  font:7px monospace;
  letter-spacing:1px;
  color:var(--muted);
  margin-right:2px;
white-space:nowrap}
.lane-controls button{
  background:transparent;
  border:1px solid #3a5652;
  color:#a4c1b6;
  padding:7px 9px;
  min-height:35px;
  border-radius:2px;
  font-size:8px;
  letter-spacing:.5px;
white-space:nowrap}
.lane-controls button.selected{
  color:var(--teal);
  border-color:#8db9a6;
background:#26463b}
.lane-controls .deploy-button{
  margin-left:auto;
  color:#10291f;
  background:var(--teal);
  font-weight:700;
border-color:var(--teal)}
.deploy-button kbd{
  color:#244b3c;
  border-color:#36534455;
font-size:7px}
.support{
  border-left:1px solid var(--line);
  padding-left:21px;
  display:flex;
  flex-direction:column;
gap:9px}
.support .section-label{
margin-bottom:2px}
.ability{
  display:flex;
  text-align:left;
  align-items:center;
  gap:10px;
  border:1px solid #3d514b;
  background:#16282a;
  border-radius:3px;
  min-height:62px;
  padding:8px 11px;
width:100%}
.ability:hover{
border-color:var(--gold)}
.ability-symbol{
  color:var(--gold);
  font-size:29px;
  line-height:1;
  width:30px;
text-align:center}
.ability strong{
  display:block;
  font-size:9px;
letter-spacing:.7px}
.ability kbd{
margin-left:4px}
.ability small{
  display:block;
  color:#9db3a8;
  font-size:9px;
margin-top:4px}
.upgrades{
  padding:17px 20px;
  border-top:1px solid #a7975650;
background:linear-gradient(90deg,#323326,#182c2a)}
.upgrade-heading{
  display:flex;
  align-items:baseline;
  gap:20px;
margin-bottom:10px}
.upgrade-heading .eyebrow{
  color:var(--gold);
  margin:0;
  font-size:8px;
letter-spacing:1.7px}
.upgrade-heading p{
  margin:0;
  font-size:10px;
color:#aabbac}
.upgrade-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
gap:9px}
.upgrade-options button{
  background:#102625;
  border:1px solid #7d8960;
  border-radius:3px;
  padding:11px 13px;
text-align:left}
.upgrade-options button:hover{
  background:#314b38;
border-color:var(--gold)}
.upgrade-options strong{
  display:block;
  color:var(--gold);
font-size:11px}
.upgrade-options small{
  display:block;
  font-size:10px;
  color:#b2c4b5;
  margin-top:4px;
line-height:1.5}
.command-footer{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:9px 20px;
  background:#0b1b1d;
  border-top:1px solid var(--line);
  align-items:center;
min-height:36px}
.command-footer p{
  margin:0;
  font-size:10px;
color:#adc5bc}
.command-footer>span{
  font:8px monospace;
  color:#638d80;
white-space:nowrap}
.command-footer>span span{
color:#b6d7c8}
.field-guide{
  margin-top:55px;
  border-top:1px solid var(--line);
  padding-top:30px;
color:#9db5ad}
.field-guide h2{
  color:var(--ink);
  font-size:26px;
  font-weight:500;
letter-spacing:-.6px}
.field-guide h3{
  color:#d0e1d8;
  font-size:15px;
font-weight:500}
.field-guide p,.field-guide li{
  font-size:13px;
max-width:780px}
.field-guide a{
  color:var(--teal);
text-underline-offset:4px}
.field-guide .guide-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
gap:35px}
.field-guide details{
  border-bottom:1px solid var(--line);
padding:12px 0}
.field-guide summary{
  cursor:pointer;
  color:#d0e1d8;
font-size:13px}
.field-guide table{
  border-collapse:collapse;
  font-size:12px;
  width:100%;
max-width:850px}
.field-guide td,.field-guide th{
  border-bottom:1px solid var(--line);
  padding:9px;
text-align:left}
.site-footer{
  max-width:1320px;
  padding:35px 42px;
  margin:40px auto 0;
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ffffff0c;
gap:20px}
.site-footer a{
  font-size:11px;
  text-decoration:none;
color:var(--muted)}
.site-footer>span{
  font:8px monospace;
  letter-spacing:1.5px;
color:#5b8275}
dialog{
  background:#102729;
  color:var(--ink);
  border:1px solid #5f8b78;
  border-radius:6px;
  width:min(560px,calc(100% - 28px));
  max-height:calc(100dvh - 40px);
  padding:0;
box-shadow:0 30px 100px #0009}
dialog::backdrop{
  background:#020d10c9;
backdrop-filter:blur(5px)}
.dialog-body{
padding:35px}
.dialog-body h2{
  font-size:36px;
  line-height:1.1;
  letter-spacing:-1px;
  font-weight:500;
margin:10px 0 20px}
.dialog-body p,.dialog-body li{
  font-size:13px;
color:#aac9ba}
.dialog-body ul{
padding-left:18px}
.dialog-body li{
margin:10px 0}
.dialog-body strong{
color:#d8e9df}
.dialog-body .key-guide{
font-size:11px}
.secondary-button{
  display:block;
  text-align:center;
  background:transparent;
  border:1px solid #547668;
  color:var(--ink);
  padding:12px;
  margin-top:12px;
  width:100%;
  font-size:12px;
  border-radius:3px;
text-decoration:none}
.text-button{
  background:transparent;
  border:0;
  color:var(--muted);
  font-size:12px;
  padding:12px;
width:100%}
.result-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding:15px 0;
  margin-bottom:12px;
border-block:1px solid var(--line)}
.result-stats span{
  display:block;
  font:8px monospace;
color:var(--muted)}
.result-stats strong{
  font:27px monospace!important;
color:var(--gold)!important}
.noscript{
  background:#4c2f26;
  padding:20px;
text-align:center}
.low-hq .hq-meter i{
background:var(--red)}
@media(min-width:1500px){
  main{
  padding-inline:30px}
  .site-header{
  padding-inline:70px}
}
@media(max-width:1000px){
  main{
  padding:0 22px}
  .site-header{
  padding:15px 22px}
  .header-caption{
  display:none}
  .hud{
    gap:16px;
  padding:12px 17px}
  .hud-wave{
  min-width:145px}
  .command{
    grid-template-columns:minmax(0,1fr) 178px;
    gap:15px;
  padding:16px}
  .support{
  padding-left:14px}
  .unit-card{
  padding:9px}
  .unit-card strong{
    font-size:8px;
  letter-spacing:.2px}
  .lane-controls button{
  padding:8px 7px}
  .lane-controls>span{
  display:none}
  .section-label span+span{
  display:none}
  .ability{
    padding:8px;
  gap:6px}
  .ability-symbol{
  width:24px}
  .ability strong{
  font-size:8px}
  .ability small{
  font-size:8px}
  .site-footer{
  padding-inline:22px}
}
@media(max-width:720px){
  .game-heading{
  padding:25px 0 22px}
  .game-tagline{
  display:none}
  h1{
  font-size:38px}
  .eyebrow{
    font-size:8px;
  letter-spacing:1.7px}
  .hud{
    height:71px;
    gap:14px;
  padding:10px 13px}
  .hud-wave{
    min-width:87px;
  column-gap:6px}
  .hud-wave>strong{
  font-size:23px}
  .phase{
    font-size:6px;
    letter-spacing:0;
  max-width:55px}
  .hud-label{
    font-size:7px;
  letter-spacing:.8px}
  .hud-score{
  display:none}
  .resource strong{
  font-size:12px}
  .pause-button{
    width:32px;
  height:35px}
  .command{
    display:flex;
    flex-direction:column;
    gap:16px;
  padding:14px}
  .support{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-left:0;
    border-top:1px solid var(--line);
    padding:12px 0 0;
  gap:8px}
  .support .section-label{
    grid-column:1/3;
  margin-bottom:0}
  .ability{
    min-height:49px;
  gap:9px}
  .ability strong{
  font-size:9px}
  .ability small{
  font-size:9px}
  .field-wrap canvas{
  height:340px}
  .field-topline{
    inset:12px 12px auto;
    font-size:7px;
  letter-spacing:.8px}
  .launch-panel{
    padding:35px 24px 15px;
    align-items:flex-start;
  min-height:340px}
  .launch-inner{
    padding:0;
  width:min(325px,100%)}
  .launch-inner h2{
    font-size:33px;
  margin:5px 0 11px}
  .launch-inner>p:not(.eyebrow){
    font-size:11px;
    line-height:1.5;
  margin:5px 0}
  .launch-inner>p:not(.eyebrow) br:nth-child(2){
  display:none}
  .difficulty-label{
  margin-top:10px}
  select{
    min-width:0;
    width:100%;
    padding:7px;
    font-size:11px;
  margin:3px 0 9px}
  .launch-inner .primary-button{
    min-height:43px;
    padding:10px 14px;
  font-size:11px}
  .launch-inner .launch-tip{
  font-size:9px}
  .launch-inner .personal-best{
  font-size:8px}
  .intel-strip{
    padding:10px 13px;
    gap:10px;
  flex-wrap:wrap}
  .intel-label{
  font-size:7px}
  .intel-strip p{
    font-size:10px;
  min-width:150px}
  .intel-strip button{
    padding:6px 8px;
  min-height:33px}
  .unit-card>svg{
    width:60px;
  height:33px}
  .unit-card strong{
    font-size:8px;
  letter-spacing:0}
  .unit-role{
    font-size:8px;
    min-height:24px;
    line-height:1.4;
  margin-bottom:4px}
  .unit-state{
    font-size:6px;
  letter-spacing:.2px}
  .unit-cost{
  font-size:11px}
  .roster{
  gap:7px}
  .lane-controls{
    gap:6px;
    margin-top:12px;
  flex-wrap:wrap}
  .lane-controls button{
    min-height:39px;
    font-size:8px;
  flex:1}
  .lane-controls .deploy-button{
  flex:1.2}
  .lane-controls kbd{
    font-size:8px;
  padding:1px 3px}
  .lane-controls .deploy-button kbd{
  display:none}
  .command-footer{
    padding:9px 13px;
    align-items:flex-start;
    flex-direction:column;
  gap:5px}
  .command-footer p{
  font-size:10px}
  .command-footer>span{
  font-size:7px}
  .upgrades{
  padding:14px}
  .upgrade-heading{
    gap:7px;
  display:block}
  .upgrade-heading .eyebrow{
    font-size:7px;
  letter-spacing:1px}
  .upgrade-heading p{
  font-size:9px}
  .upgrade-options{
  gap:6px}
  .upgrade-options button{
  padding:9px 8px}
  .upgrade-options strong{
  font-size:10px}
  .upgrade-options small{
  font-size:9px}
  .battle-caption{
    font-size:8px;
    max-width:90%;
    white-space:normal;
    width:max-content;
    bottom:6px;
  padding:4px 7px}
  .field-guide{
    margin-top:35px;
  padding-top:20px}
  .field-guide .guide-grid{
    grid-template-columns:1fr;
  gap:15px}
  .site-footer{
    margin-top:25px;
    padding-block:24px;
    flex-direction:column;
  gap:12px}
  .dialog-body{
  padding:25px}
  .dialog-body h2{
  font-size:30px}
  .dialog-body p,.dialog-body li{
  font-size:12px}
  .result-stats strong{
  font-size:24px!important}
}
@media(max-width:390px){
  main{
  padding:0 10px}
  .site-header{
    padding:13px 12px;
    min-height:67px;
  gap:8px}
  .home-link{
    font-size:9px;
    letter-spacing:.7px;
  gap:5px}
  .brand-mark{
  font-size:24px}
  .brand-games{
  display:none}
  .header-actions{
  gap:6px}
  .header-actions button{
    font-size:10px;
  padding:7px 9px}
  .game-heading{
  padding:22px 3px 17px}
  h1{
    font-size:31px;
  letter-spacing:-1.2px}
  .hud{
    gap:9px;
  padding-inline:10px}
  .hud-wave{
  min-width:77px}
  .hud-label{
  font-size:6px}
  .phase{
  font-size:6px}
  .command{
  padding:11px}
  .roster{
  gap:5px}
  .unit-card{
  padding:7px 6px}
  .unit-card>svg{
  width:53px}
  .unit-card strong{
  font-size:7px}
  .unit-role{
  font-size:7px}
  .lane-controls{
  gap:4px}
  .lane-controls button{
    padding:7px 4px;
  font-size:7px}
  .lane-controls kbd{
  font-size:7px}
  .field-wrap canvas{
  height:325px}
  .field-topline span+span{
  display:none}
  .launch-panel{
    min-height:325px;
  padding:32px 18px 12px}
  .launch-inner h2{
  font-size:30px}
  .support{
  gap:6px}
  .ability strong{
  font-size:8px}
  .ability small{
  font-size:8px}
  .section-label{
  font-size:7px}
}
.unit-card,.ability,.header-actions button,.primary-button,.secondary-button{
line-height:1.3}
.unit-state{
display:block}
.resource strong{
white-space:nowrap}
.field-wrap:has(.launch-panel:not([hidden])) canvas{
height:clamp(340px,43vw,505px)}
.field-topline{
display:none}
.field-guide .controls-list{
  font-size:12px;
margin:14px 0}
.controls-list>div{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:12px;
  padding:7px 0;
border-bottom:1px solid var(--line)}
.controls-list dt{
  font-family:monospace;
color:var(--teal)}
.controls-list dd{
margin:0}
.related-games{
margin-top:35px}
.related-games>a{
  display:block;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
font-size:14px}
.related-games>a:hover{
color:var(--gold)}
.related-games>a>span{
  display:block;
  font-size:11px;
  color:var(--muted);
margin-top:4px}
#load-error p{
color:var(--gold)}
#load-error{
font-size:11px}
.field-wrap canvas{
height:clamp(280px,calc(100svh - 435px),505px)}
@media(max-width:720px){
  .field-wrap canvas{
  height:clamp(250px,calc(100svh - 440px),340px)}
  .unit-role{
  min-height:23px}
  .support .ability{
  min-height:49px}
  .site-header{
    min-height:65px;
  padding:12px 16px}
  .home-link{
    font-size:10px;
    letter-spacing:1px;
    white-space:nowrap;
  gap:6px}
  .brand-games{
  display:none}
  .header-actions button{
    font-size:10px;
    padding:8px 10px;
  min-height:36px}
  .header-actions{
  gap:6px}
  .brand-mark{
  font-size:26px}
  .game-heading{
  padding:22px 0 20px}
  .command{
  gap:12px}
  .support{
  padding-top:10px}
  .roster .unit-card{
  padding:8px}
  .controls-list>div{
  grid-template-columns:95px 1fr}
  .field-guide table{
  font-size:11px}
}
@media(max-width:430px){
  main{
  padding:0 10px}
  .roster{
  gap:5px}
  .unit-card strong{
    font-size:7px;
    white-space:normal;
  min-height:18px}
  .unit-card .unit-role{
  font-size:8px}
  .unit-card .unit-state{
    font-size:6px;
  letter-spacing:0}
  .unit-card>svg{
    width:55px;
  height:31px}
  .game-heading h1{
    font-size:32px;
  letter-spacing:-1.2px}
  .command{
  padding:11px}
  .lane-controls{
  gap:4px}
  .lane-controls button{
    padding:7px 5px;
  font-size:7px}
  .lane-controls kbd{
  font-size:7px}
  .ability strong{
  font-size:8px}
  .ability small{
  font-size:8px}
  .command-footer{
  min-height:49px}
  .site-header{
  padding-inline:12px}
  .header-actions button{
  padding:8px}
  .field-wrap canvas{
  height:clamp(240px,calc(100svh - 440px),325px)}
}
.tactical-intel,.tech-strip{border-bottom:1px solid var(--line);background:#0d1f21;padding:0 20px}
.tactical-intel summary,.tech-strip summary{cursor:pointer;padding:9px 0;font:8px/1.6 monospace;letter-spacing:1.2px;color:var(--teal);min-height:34px}
.tactical-intel summary span,.tech-strip summary span{margin-left:14px;color:#9db8ad;letter-spacing:.2px;font-size:9px}
.intel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:3px 0 14px}
.intel-card{background:#142a2b;border:1px solid #35544b;padding:11px;border-radius:3px;min-width:0}
.intel-card strong{display:flex;justify-content:space-between;gap:6px;font:9px/1.5 monospace;color:#c5ddd0;letter-spacing:1px}
.intel-card strong span{color:var(--gold);font-size:8px;letter-spacing:0;text-align:right}
.intel-card p{font-size:10px;line-height:1.5;color:#bed0bf;margin:7px 0}
.intel-card small{font-size:9px;color:#8fb2a1;line-height:1.4}
.intel-card.danger{border-color:var(--red)}.intel-card.danger strong span{color:var(--red)}.intel-card.jammed{border-color:var(--teal)}
#tech-build{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;color:var(--muted);padding:5px 0 13px}
#tech-build>span{background:#20382e;border:1px solid #42614d;padding:5px 9px;color:#c2d9b8;border-radius:3px;font-size:10px;line-height:1.5}
.upgrade-options button.specialization{background:linear-gradient(125deg,#3a3922,#163c36);border-color:var(--gold)}
.contact-report{position:absolute;left:14px;top:46px;display:flex;gap:10px;max-width:min(355px,calc(100% - 28px));padding:10px 12px;background:#0a2027ef;border:1px solid #8cbd9b;border-radius:3px;pointer-events:none;box-shadow:0 7px 22px #0004}
#contact-symbol{font-size:29px;color:#c0ef83;line-height:1.1}#contact-name{font:9px/1.5 monospace;letter-spacing:1px;color:#cef0c2}#contact-tip{font-size:10px;line-height:1.5;margin:4px 0 0;color:#b3cec0}
.command-alert{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 20px);background:#312923f2;border:1px solid #eac28a;padding:7px 12px;font:10px/1.5 monospace;color:#ffe0ad;text-align:center;border-radius:3px;pointer-events:none}
.debrief{border:1px solid #506854;background:#142d28;padding:14px;margin-bottom:14px;border-radius:3px}.debrief h3{font-size:14px;margin:0 0 9px;font-weight:500}.debrief p{font-size:11px;margin:7px 0;line-height:1.6}.debrief #debrief-cause{color:#d2e5c6}.debrief #debrief-lanes p{border-top:1px solid #3b5745;padding-top:8px;color:#9bbbaf}
@media(max-width:720px){.tactical-intel,.tech-strip{padding-inline:13px}.tactical-intel summary,.tech-strip summary{font-size:7px;letter-spacing:.6px}.tactical-intel summary span,.tech-strip summary span{font-size:8px;margin-left:7px}.intel-grid{grid-template-columns:1fr;gap:6px}.intel-card{padding:9px}.intel-card p{margin:5px 0}.contact-report{top:38px;padding:8px;max-width:calc(100% - 24px);left:12px;gap:7px}#contact-symbol{font-size:23px}#contact-name{font-size:8px;letter-spacing:.4px}#contact-tip{font-size:9px}.command-alert{font-size:8px;max-width:calc(100% - 16px);padding:6px 8px;top:8px}#tech-build>span{font-size:9px}.field-wrap canvas{height:clamp(240px,calc(100svh - 500px),325px)}.debrief{padding:11px}}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
  *,*:before,*:after{
    transition:none!important;
  animation:none!important}
}