@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plexmono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plexmono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plexmono-600.woff2) format('woff2')}

:root{
  --void:#070D18; --deck:#0F1B2E; --plate:#16263F; --plate-hi:#22385A; --edge:#34507A;
  --ink:#04080F; --lamp:#FFC25A; --hazard:#C9761A; --rust:#5A3310;
  --cyan:#3DF2FF; --cyan-core:#C8FDFF; --cyan-dark:#0E6F80;
  --red:#FF4433; --red-dark:#8A1A14;
  --ui:#EDE5D3; --muted:#8C93A3;
  --cond:'Barlow Condensed',Impact,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--void);}
body{font-family:var(--cond);color:var(--ui);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;}
#stage{position:fixed;inset:0;background:#04080F;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#space{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;}
.gone #crosshair{display:none}
body.hide-cursor{cursor:none}
#game-holder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
#game-holder canvas{display:block;image-rendering:auto;}

/* ---------- HUD placards ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:20;}
.placard{
  position:absolute;pointer-events:auto;
  background:
    linear-gradient(160deg,#1b2c48 0%,#132138 42%,#0e1a2d 100%);
  border:2px solid var(--ink);
  box-shadow:inset 0 1px 0 rgba(120,160,220,.10), inset 0 -6px 12px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.55);
  border-radius:4px;
}
.rivet{position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5b6b86,#1a2740 70%,#04080F);
  box-shadow:0 1px 1px rgba(0,0,0,.6);}
.rv-tl{top:5px;left:5px}.rv-tr{top:5px;right:5px}.rv-bl{bottom:5px;left:5px}.rv-br{bottom:5px;right:5px}
.placard-label{
  font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.2em;
  color:var(--lamp);text-transform:uppercase;text-shadow:0 1px 0 #000;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

#hull-placard{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));padding:9px 13px 11px;min-width:196px;}
.hull-seg{display:flex;gap:3px;margin-top:7px;}
.hull-seg i{display:block;height:20px;flex:1;background:linear-gradient(180deg,#f3ecdc,#b9b3a4);border:1px solid var(--ink);border-radius:1px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22);}
.hull-seg i.off{background:#101b2c;}
.hull-seg i.low{background:linear-gradient(180deg,#ff6a5a,#b82a20);}
.hull-seg i.pulse{filter:brightness(1.9);}

#timer-placard{top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:6px 24px 10px;text-align:center;min-width:164px;}
#timer-val{font-size:46px;line-height:.95;font-weight:600;letter-spacing:.02em;color:var(--ui);text-shadow:0 2px 0 #000;}
#wave-label{margin-top:3px;}
#wave-label.danger{color:var(--red);animation:flick .45s steps(2,end) infinite;}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- level / XP ---------- */
#level-placard{top:calc(96px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  padding:6px 14px 8px;min-width:186px;pointer-events:none;}
.level-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
#level-val{font-size:22px;font-weight:600;color:var(--cyan-core);text-shadow:0 0 10px rgba(61,242,255,.45);}
#level-placard.maxed #level-val{color:var(--lamp);text-shadow:0 0 12px rgba(255,194,90,.5);}
.xp-bar{height:8px;margin-top:6px;border:1px solid var(--ink);border-radius:2px;background:#0c1728;overflow:hidden;}
.xp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan-dark),var(--cyan),var(--cyan-core));
  box-shadow:0 0 8px rgba(61,242,255,.55);transition:width .12s linear;}
#level-placard.maxed .xp-bar i{background:linear-gradient(90deg,var(--hazard),var(--lamp));}
.xp-text{margin-top:4px;font-size:11px;letter-spacing:.1em;color:var(--muted);text-align:right;}

/* ---------- upgrade selection ---------- */
#upgrade-overlay{position:absolute;inset:0;z-index:44;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(ellipse at 50% 48%,rgba(4,8,15,.62),rgba(4,8,15,.9));padding:16px;
  opacity:1;transition:opacity .2s ease;}
#upgrade-overlay.hidden{opacity:0;pointer-events:none;}
.up-head{display:flex;align-items:center;gap:14px;}
.up-tag{font-family:var(--cond);font-weight:700;font-size:clamp(20px,4.4vw,30px);letter-spacing:.24em;color:var(--lamp);text-transform:uppercase;text-shadow:0 2px 0 #000;}
.up-lv{font-size:13px;letter-spacing:.16em;color:var(--cyan);border:1px solid var(--edge);border-radius:3px;padding:4px 9px;background:#0c1728;text-transform:uppercase;}
.up-cards{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:stretch;width:100%;max-width:1000px;}
.up-card{position:relative;flex:1 1 240px;max-width:300px;min-width:210px;text-align:left;cursor:pointer;
  font-family:var(--cond);color:var(--ui);padding:14px 15px 16px;border:2px solid var(--ink);border-radius:6px;
  background:linear-gradient(165deg,#182944,#0f1c31 60%,#0c1728);
  box-shadow:inset 0 1px 0 rgba(120,160,220,.10),0 16px 40px rgba(0,0,0,.6);
  transition:transform .08s ease, filter .12s ease, box-shadow .12s ease;overflow:hidden;}
.up-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--edge);}
.up-card:hover{transform:translateY(-3px);filter:brightness(1.08);}
.up-card:active{transform:translateY(1px);}
.up-card.human:before{background:linear-gradient(180deg,#ffcf6e,#e08a1e);}
.up-card.alien:before{background:linear-gradient(180deg,#d3a6ff,#8a4fd8);}
.up-card.robot:before{background:linear-gradient(180deg,#8cf4ff,#1ea7bc);}
.up-card.human:hover{box-shadow:inset 0 1px 0 rgba(120,160,220,.1),0 18px 44px rgba(224,138,30,.32);}
.up-card.alien:hover{box-shadow:inset 0 1px 0 rgba(120,160,220,.1),0 18px 44px rgba(138,79,216,.36);}
.up-card.robot:hover{box-shadow:inset 0 1px 0 rgba(120,160,220,.1),0 18px 44px rgba(61,242,255,.32);}
.up-cat{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;}
.up-cat.human{color:var(--lamp);}
.up-cat.alien{color:#cfa6ff;}
.up-cat.robot{color:var(--cyan);}
.up-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  font-family:var(--mono);font-weight:600;font-size:13px;border:1.5px solid currentColor;line-height:1;}
.up-name{font-weight:700;font-size:clamp(20px,3vw,25px);letter-spacing:.04em;margin:9px 0 3px;text-transform:uppercase;color:var(--ui);text-shadow:0 2px 0 #000;}
.up-rank{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted);margin-bottom:9px;text-transform:uppercase;}
.up-rank b{color:var(--cyan-core);font-weight:600;}
.up-effect{font-size:15px;letter-spacing:.03em;line-height:1.3;color:var(--ui);margin-bottom:4px;}
.up-total{font-size:13px;letter-spacing:.04em;line-height:1.3;color:var(--muted);margin-bottom:9px;}
.up-total b{color:var(--cyan);font-family:var(--mono);}
.up-benefit{font-size:13px;letter-spacing:.04em;line-height:1.35;color:var(--muted);border-top:1px solid #22385a;padding-top:9px;}
.up-key{position:absolute;top:10px;right:12px;font-family:var(--mono);font-weight:600;font-size:13px;
  color:var(--ui);border:1px solid var(--edge);border-bottom-width:3px;border-radius:4px;padding:2px 8px;background:linear-gradient(180deg,#22385a,#14213a);}
.up-foot{font-family:var(--cond);font-size:13px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;text-align:center;}

@media (max-width:560px){
  #level-placard{min-width:150px;padding:5px 10px 7px;top:calc(78px + env(safe-area-inset-top));}
  #level-val{font-size:18px;}
  .up-cards{gap:10px;}
  .up-card{flex:1 1 200px;min-width:0;padding:11px 12px 13px;}
  .up-name{font-size:19px;}
  .up-effect{font-size:14px;}
}
@media (orientation:portrait) and (max-width:560px){
  #level-placard{left:calc(9px + env(safe-area-inset-left));right:auto;transform:none;top:calc(150px + env(safe-area-inset-top));}
}
@media (orientation:portrait){
  #level-placard{left:calc(9px + env(safe-area-inset-left));right:auto;transform:none;top:calc(150px + env(safe-area-inset-top));min-width:120px;padding:5px 10px 7px;}
  #level-val{font-size:17px;}
  .xp-text{font-size:10px;}
}
@media (max-height:460px){
  #level-placard{top:calc(62px + env(safe-area-inset-top));}
}

#mute-placard{
  top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));
  width:58px;height:54px;display:flex;align-items:center;justify-content:center;color:var(--muted);
  cursor:pointer;padding:0;
}
#mute-placard.on{color:var(--lamp);}
#mute-placard svg{display:block;width:30px;height:30px;}
#mute-placard:hover{filter:brightness(1.15)}

#ammo-placard{
  bottom:calc(10px + env(safe-area-inset-bottom));right:calc(10px + env(safe-area-inset-right));
  padding:9px 13px 11px;min-width:224px;
}
.ammo-row{display:flex;align-items:center;gap:10px;margin-top:7px;}
.ammo-cells{display:flex;gap:3px;}
.ammo-cells i{display:block;width:12px;height:22px;border:1px solid var(--ink);border-radius:1px;
  background:linear-gradient(180deg,var(--cyan-core),var(--cyan) 45%,#1ea7bc);
  box-shadow:0 0 5px rgba(61,242,255,.55), inset 0 -3px 0 rgba(0,0,0,.25);}
.ammo-cells i.spent{background:#0c1728;box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);}
.ammo-count{font-size:17px;color:var(--ui);min-width:56px;text-align:right;}
.reload-stencil{
  display:none;position:absolute;top:6px;right:12px;
  font-family:var(--cond);font-weight:700;letter-spacing:.18em;font-size:12px;color:var(--hazard);
  text-shadow:0 1px 0 #000;pointer-events:none;
}
.reload-stencil.show{display:block;animation:flick .5s steps(2,end) infinite;}

/* ---------- loot ---------- */
#loot-placard{top:calc(92px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));padding:8px 13px 10px;min-width:196px;}
.loot-val{font-size:38px;line-height:1;font-weight:600;color:var(--lamp);text-shadow:0 2px 0 #000;margin-top:3px;}
.loot-meta{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-family:var(--cond);
  font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;}
#dmg-readout.up{color:var(--cyan);text-shadow:0 0 8px rgba(61,242,255,.5);}

/* ---------- extraction ---------- */
#extract-placard{top:calc(196px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));
  padding:7px 14px 9px;min-width:196px;max-width:calc(100vw - 28px);text-align:left;border-color:#26364f;pointer-events:none;}
#extract-placard.open{border-color:var(--hazard);box-shadow:inset 0 1px 0 rgba(255,194,90,.16),0 0 18px rgba(224,138,30,.35),0 6px 16px rgba(0,0,0,.55);}
#extract-status{font-size:17px;letter-spacing:.06em;color:var(--muted);margin-top:3px;}
#extract-placard.open #extract-status{color:var(--lamp);}
#extract-placard.holding #extract-status{color:var(--cyan);}
.extract-bar{height:9px;margin-top:7px;border:1px solid var(--ink);border-radius:2px;background:#0c1728;overflow:hidden;}
.extract-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--cyan-core));box-shadow:0 0 8px rgba(61,242,255,.6);transition:width .08s linear;}

/* ---------- collect prompt ---------- */
#collect-prompt{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:26;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:5px;
  background:linear-gradient(180deg,#1b2c48,#0e1a2d);border:2px solid var(--hazard);color:var(--ui);
  font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 6px 16px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .14s ease;}
#collect-prompt.show{opacity:1;}
#collect-prompt b{color:var(--lamp);font-family:var(--mono);}
.keycap.pkey{border-color:var(--hazard);color:var(--lamp);}

/* ---------- banner ---------- */
#banner{position:absolute;top:22%;left:0;right:0;display:flex;justify-content:center;pointer-events:none;z-index:25;}
.banner-strip{
  background:repeating-linear-gradient(45deg,#C9761A 0 14px,#04080F 14px 28px);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:4px 0;width:min(560px,86vw);box-shadow:0 8px 24px rgba(0,0,0,.6);
  opacity:0;transform:translateY(-14px) scale(.98);
}
.banner-strip span{
  display:block;background:linear-gradient(180deg,#12203a,#0b1526);
  font-family:var(--cond);font-weight:700;font-size:clamp(20px,4.6vw,30px);letter-spacing:.2em;
  text-align:center;color:var(--ui);padding:6px 10px;text-transform:uppercase;
  text-shadow:0 2px 0 #000;
}
.banner-strip.in{animation:bannerIn 2.2s ease forwards;}
@keyframes bannerIn{0%{opacity:0;transform:translateY(-14px) scale(.98)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* ---------- screens ---------- */
#overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(7,13,24,.42),rgba(7,13,24,.76));padding:18px;
  opacity:1;transition:opacity .28s ease;}
#overlay.hidden{opacity:0;pointer-events:none;}
.workorder{
  width:min(460px,94vw);max-height:94vh;overflow:auto;
  background:linear-gradient(170deg,#182944,#0f1c31 60%,#0c1728);
  border:2px solid var(--ink);border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(120,160,220,.10), 0 24px 60px rgba(0,0,0,.7);
}
.wo-header{
  display:flex;justify-content:space-between;align-items:center;
  background:repeating-linear-gradient(45deg,#C9761A 0 12px,#04080F 12px 24px);
  border-bottom:2px solid var(--ink);padding:3px 6px;
}
.wo-tag,.wo-no{background:#0d1728;font-family:var(--cond);font-weight:700;letter-spacing:.18em;
  font-size:11px;padding:5px 9px;color:var(--lamp);text-transform:uppercase;}
.wo-no{color:var(--muted);}
.wo-body{padding:22px 26px 24px;text-align:center;position:relative;}
.wo-body:before,.wo-body:after,.wo-body .corner{content:"";position:absolute;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5b6b86,#1a2740 70%,#04080F);}
.wo-body:before{top:10px;left:10px}.wo-body:after{top:10px;right:10px}
#ov-title{font-family:var(--cond);font-weight:700;font-size:clamp(40px,11vw,58px);line-height:1;letter-spacing:.06em;
  margin:2px 0 8px;color:var(--ui);text-shadow:0 3px 0 #000;text-transform:uppercase;}
#ov-title.win{color:var(--cyan-core);text-shadow:0 0 18px rgba(61,242,255,.5),0 3px 0 #000;}
#ov-title.lose{color:var(--red);text-shadow:0 0 18px rgba(255,68,51,.4),0 3px 0 #000;}
#ov-title.cyan-line{ }
.title-rule{height:4px;width:88px;margin:0 auto 14px;border-radius:2px;background:var(--cyan);
  box-shadow:0 0 12px rgba(61,242,255,.6);}
.title-rule.red{background:var(--red);box-shadow:0 0 12px rgba(255,68,51,.5);}
.title-rule.amber{background:var(--hazard);box-shadow:none;}
.wo-brief{font-family:var(--cond);font-size:17px;letter-spacing:.04em;color:var(--ui);margin:0 0 16px;line-height:1.35;}
.controls{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:7px;}
.keycap{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--ui);
  padding:4px 9px;border:1px solid var(--edge);border-bottom-width:3px;border-radius:4px;
  background:linear-gradient(180deg,#22385a,#14213a);text-transform:uppercase;}
.controls-note{font-size:12px;letter-spacing:.14em;color:var(--muted);margin-bottom:16px;text-transform:uppercase;}
.stats{display:flex;flex-direction:column;gap:9px;margin:4px 0 18px;border-top:1px solid #22385a;border-bottom:1px solid #22385a;padding:14px 0;}
.stats:empty{display:none;}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--cond);
  letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--muted);}
.stat-row b{font-family:var(--mono);font-weight:600;font-size:21px;color:var(--ui);font-variant-numeric:tabular-nums;}
.stat-row.gain b{color:var(--cyan);}
.stat-row.loss b{color:var(--red);}
.wo-actions{display:flex;flex-direction:column;gap:10px;align-items:center;}
.btn{
  font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.16em;text-transform:uppercase;
  padding:12px 30px;border-radius:5px;border:2px solid var(--ink);cursor:pointer;min-width:210px;
  transition:transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.btn.amber{background:linear-gradient(180deg,#ffcf6e,#e08a1e);color:#1a1000;box-shadow:inset 0 -4px 0 rgba(90,51,16,.55),0 6px 16px rgba(224,138,30,.28);}
.btn.amber:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:inset 0 -4px 0 rgba(90,51,16,.55),0 10px 22px rgba(224,138,30,.4);}
.btn.amber:active{transform:translateY(1px);box-shadow:inset 0 -2px 0 rgba(90,51,16,.55);}
.btn.ghost{background:linear-gradient(180deg,#22385a,#14213a);color:var(--ui);box-shadow:inset 0 -4px 0 rgba(0,0,0,.35);}
.btn.ghost:hover{filter:brightness(1.15);transform:translateY(-2px);}
.btn.ghost:active{transform:translateY(1px);}
.wo-foot{margin-top:14px;font-size:12px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}

/* ---------- crosshair ---------- */
#crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  pointer-events:none;z-index:30;display:none;}
body.playing #crosshair{display:block;}
.ch-dot{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:var(--cyan-core);box-shadow:0 0 6px var(--cyan);}
.ch-t{position:absolute;background:var(--cyan);box-shadow:0 0 5px rgba(61,242,255,.7);}
.ch-up,.ch-dn{left:50%;width:2px;height:8px;margin-left:-1px;}
.ch-up{top:0}.ch-dn{bottom:0}
.ch-lf,.ch-rt{top:50%;height:2px;width:8px;margin-top:-1px;}
.ch-lf{left:0}.ch-rt{right:0}

/* ---------- damage vignette ---------- */
#damage-vignette{position:absolute;inset:0;pointer-events:none;z-index:28;opacity:0;
  box-shadow:inset 0 0 120px 30px rgba(255,68,51,.62);transition:opacity .28s ease;}
#damage-vignette.flash{opacity:1;transition:opacity .04s ease;}

/* ---------- touch ---------- */
#touch-ui{position:absolute;inset:0;z-index:22;pointer-events:none;display:none;}
body.touch #touch-ui{display:block;}
.stick-base{position:absolute;width:118px;height:118px;border-radius:50%;
  border:2px solid rgba(61,242,255,.28);background:radial-gradient(circle,rgba(20,33,58,.5),rgba(10,18,32,.25));
  pointer-events:none;opacity:0;transition:opacity .15s;}
.stick-base.active{opacity:1;}
.stick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(200,253,255,.9),rgba(61,242,255,.45));
  box-shadow:0 0 14px rgba(61,242,255,.5);}
#aim-base .stick-knob{background:radial-gradient(circle at 40% 35%,#ffd9b0,rgba(224,138,30,.5));box-shadow:0 0 14px rgba(224,138,30,.5);}
#aim-base{border-color:rgba(224,138,30,.3);}
#move-zone,#aim-zone{position:absolute;top:0;bottom:0;width:50%;pointer-events:auto;}
#move-zone{left:0}#aim-zone{right:0}
#touch-reload{position:absolute;right:calc(16px + env(safe-area-inset-right));bottom:calc(96px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;border:2px solid var(--ink);pointer-events:auto;
  background:linear-gradient(180deg,#22385a,#14213a);color:var(--lamp);font-family:var(--cond);
  font-weight:700;font-size:20px;letter-spacing:.1em;box-shadow:0 4px 12px rgba(0,0,0,.5);}
#touch-collect{position:absolute;right:calc(16px + env(safe-area-inset-right));bottom:calc(168px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;border:2px solid var(--ink);pointer-events:auto;
  background:linear-gradient(180deg,#3a2c14,#241a0a);color:var(--lamp);font-family:var(--cond);
  font-weight:700;font-size:20px;letter-spacing:.1em;box-shadow:0 4px 12px rgba(0,0,0,.5);border-color:var(--hazard);}

@media (max-width:560px){
  #hull-placard{min-width:126px;padding:6px 9px 8px;}
  .hull-seg i{height:16px;}
  #timer-val{font-size:34px;}
  #timer-placard{min-width:134px;padding:5px 13px 8px;}
  #mute-placard{width:48px;height:48px;}
  #mute-placard svg{width:26px;height:26px;}
  #ammo-placard{min-width:168px;padding:6px 10px 8px;}
  .ammo-cells i{width:9px;height:17px;}
  .ammo-count{font-size:15px;min-width:48px;}
  .placard-label{font-size:11px;letter-spacing:.16em;}
  #loot-placard{min-width:126px;padding:6px 9px 8px;top:calc(82px + env(safe-area-inset-top));}
  .loot-val{font-size:30px;}
  .loot-meta{font-size:10px;gap:6px;}
  #extract-placard{min-width:186px;padding:6px 10px 8px;}
  #extract-status{font-size:15px;}
  #collect-prompt{font-size:14px;padding:6px 11px;bottom:calc(76px + env(safe-area-inset-bottom));}
}
@media (orientation:portrait) and (max-width:560px){
  #overlay{align-items:flex-end;padding:12px 12px calc(18px + env(safe-area-inset-bottom));}
  .workorder{max-height:47vh;}
  .wo-body{padding:16px 18px 18px;}
  #ov-title{font-size:clamp(34px,10vw,46px);margin:0 0 6px;}
  .wo-brief{font-size:15px;margin:0 0 12px;}
  .controls-note{margin-bottom:12px;}
  .stats{gap:6px;padding:10px 0;margin:2px 0 12px;}
  .wo-foot{margin-top:10px;}
}
@media (orientation:portrait) and (max-width:400px){
  .workorder{max-height:54vh;}
  .wo-body{padding:12px 14px 14px;}
  #ov-title{font-size:30px;margin:0 0 4px;}
  .title-rule{margin:0 auto 8px;}
  .wo-brief{font-size:14px;margin:0 0 8px;}
  .controls{gap:5px;margin-bottom:5px;}
  .keycap{font-size:11px;padding:3px 6px;}
  .controls-note{display:none;}
  .wo-foot{margin-top:8px;font-size:11px;letter-spacing:.1em;}
  .stats{gap:4px;padding:8px 0;margin:0 0 8px;}
  .stat-row b{font-size:18px;}
  .btn{font-size:17px;padding:10px 22px;min-width:0;width:100%;}
}
@media (max-width:400px){
  #timer-placard{top:calc(70px + env(safe-area-inset-top));min-width:118px;padding:4px 11px 7px;}
  #timer-val{font-size:29px;}
  #hull-placard{min-width:112px;}
  #mute-placard{width:44px;height:44px;}
  #ammo-placard{min-width:156px;}
  .ammo-cells i{width:8px;height:15px;}
  #loot-placard{min-width:112px;top:calc(76px + env(safe-area-inset-top));}
  .loot-val{font-size:26px;}
  #extract-placard{min-width:166px;}
  #extract-status{font-size:13px;}
}
@media (max-height:460px){
  #timer-placard{top:calc(8px + env(safe-area-inset-top));}
  #timer-val{font-size:28px;}
  #hull-placard,#ammo-placard{padding:5px 9px 7px;}
  .hull-seg i{height:13px;}
  .ammo-cells i{width:9px;height:15px;}
}

/* ---------- portrait: HUD lives in the void bands, clear of the play field ---------- */
@media (orientation:portrait){
  #hull-placard{top:calc(9px + env(safe-area-inset-top));left:calc(9px + env(safe-area-inset-left));min-width:112px;padding:6px 9px 8px;}
  .hull-seg i{height:15px;}
  #timer-placard{top:calc(9px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);min-width:118px;padding:5px 12px 8px;}
  #timer-val{font-size:32px;}
  #mute-placard{top:calc(9px + env(safe-area-inset-top));right:calc(9px + env(safe-area-inset-right));width:46px;height:46px;}
  #mute-placard svg{width:26px;height:26px;}
  #loot-placard{top:calc(72px + env(safe-area-inset-top));left:calc(9px + env(safe-area-inset-left));min-width:112px;padding:6px 9px 8px;}
  .loot-val{font-size:28px;}
  .loot-meta{font-size:10px;gap:6px;}
  #extract-placard{top:calc(72px + env(safe-area-inset-top));left:auto;right:calc(9px + env(safe-area-inset-right));min-width:0;max-width:56vw;padding:6px 10px 8px;text-align:right;}
  #extract-status{font-size:14px;}
  #ammo-placard{bottom:calc(9px + env(safe-area-inset-bottom));right:calc(9px + env(safe-area-inset-right));min-width:150px;padding:6px 10px 8px;}
  .ammo-cells i{width:8px;height:15px;}
  .ammo-count{font-size:14px;min-width:44px;}
  .placard-label{font-size:10.5px;letter-spacing:.14em;}
}

/* ---------- landscape: keep the middle-left of the play field clear ---------- */
@media (orientation:landscape){
  #loot-placard{top:auto;bottom:calc(10px + env(safe-area-inset-bottom));left:calc(10px + env(safe-area-inset-left));
    min-width:150px;padding:5px 10px 7px;}
  .loot-val{font-size:24px;margin-top:1px;}
  .loot-meta{font-size:10px;gap:8px;margin-top:3px;}
  #extract-placard{top:auto;bottom:calc(10px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
    text-align:center;min-width:0;max-width:36vw;padding:6px 12px 8px;}
  /* level readout tucks under the hull gauge so the arena centre stays open */
  #level-placard{left:calc(10px + env(safe-area-inset-left));right:auto;transform:none;
    top:calc(76px + env(safe-area-inset-top));min-width:150px;padding:5px 10px 7px;}
  #level-val{font-size:18px;}
  .xp-text{font-size:10px;}
}
@media (orientation:landscape) and (max-height:460px){
  #level-placard{top:calc(64px + env(safe-area-inset-top));}
}

/* ---------- run readout: floor / round / packages / loadout ---------- */
#run-placard{
  top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));
  padding:7px 12px 9px;min-width:176px;border-color:#26364f;
}
.run-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:4px;}
.run-row:first-of-type{margin-top:2px;}
.run-row .mono{font-size:16px;font-weight:600;color:var(--ui);}
.run-loadout{margin-top:7px;font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.12em;
  color:var(--lamp);text-transform:uppercase;border-top:1px solid #22385a;padding-top:6px;}
#run-placard.alien .run-loadout{color:#8ff0c0;}
#run-placard.robot .run-loadout{color:var(--cyan);}
.run-quirk{margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}

/* ---------- dash indicator ---------- */
.dash-row{display:flex;align-items:center;gap:9px;margin-top:7px;}
.dash-bar{flex:1;height:8px;border:1px solid var(--ink);border-radius:2px;background:#0c1728;overflow:hidden;}
.dash-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan-dark),var(--cyan),var(--cyan-core));transition:width .06s linear;}
#ammo-placard.dash-ready .dash-bar i{box-shadow:0 0 8px rgba(61,242,255,.7);}

/* ---------- salvage round choice ---------- */
#choice-overlay{position:absolute;inset:0;z-index:46;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(7,13,24,.55),rgba(7,13,24,.85));padding:16px;
  opacity:1;transition:opacity .24s ease;}
#choice-overlay.hidden{opacity:0;pointer-events:none;}
.choice-panel{width:min(820px,96vw);max-height:94vh;overflow:auto;text-align:center;}
.choice-head{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:12px;}
.choice-tag{font-family:var(--cond);font-weight:700;font-size:clamp(22px,5vw,34px);letter-spacing:.2em;
  color:var(--lamp);text-transform:uppercase;text-shadow:0 3px 0 #000;}
.choice-sub{font-size:13px;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase;}
.choice-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:0 auto 16px;
  border-top:1px solid #22385a;border-bottom:1px solid #22385a;padding:12px 0;max-width:620px;}
.choice-stats .stat-row{flex:1 1 150px;min-width:140px;}
.choice-cards{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:stretch;}
.choice-card{flex:1 1 280px;max-width:360px;min-width:230px;text-align:left;cursor:pointer;
  background:linear-gradient(170deg,#182944,#0f1c31 65%,#0c1728);border:2px solid var(--ink);border-radius:6px;
  padding:16px 18px;color:var(--ui);font-family:var(--cond);
  box-shadow:inset 0 1px 0 rgba(120,160,220,.1),0 12px 30px rgba(0,0,0,.5);
  transition:transform .08s ease,filter .12s ease,box-shadow .12s ease;}
.choice-card:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(120,160,220,.1),0 18px 40px rgba(224,138,30,.32);}
.choice-card:active{transform:translateY(1px);}
.choice-card.disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.5);}
.choice-card.disabled:hover{transform:none;filter:grayscale(.5);}
.cc-title{font-weight:700;font-size:clamp(19px,3.2vw,24px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--lamp);text-shadow:0 2px 0 #000;margin-bottom:7px;}
.cc-body{font-size:14.5px;letter-spacing:.03em;line-height:1.35;color:var(--muted);}
.choice-note{margin-top:14px;font-family:var(--cond);font-size:12px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}

/* ---------- merchant ---------- */
#merchant-overlay{position:absolute;inset:0;z-index:47;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(7,13,24,.62),rgba(7,13,24,.9));padding:14px;
  opacity:1;transition:opacity .24s ease;}
#merchant-overlay.hidden{opacity:0;pointer-events:none;}
.merchant-panel{width:min(1040px,97vw);max-height:96vh;overflow:auto;
  background:linear-gradient(170deg,#182944,#0f1c31 60%,#0c1728);border:2px solid var(--ink);border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(120,160,220,.1),0 24px 60px rgba(0,0,0,.7);padding:14px 16px 16px;}
.merchant-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:repeating-linear-gradient(45deg,#C9761A 0 12px,#04080F 12px 24px);
  border:2px solid var(--ink);border-radius:4px;padding:3px 6px;margin-bottom:12px;}
.merchant-head>*{background:#0d1728;padding:6px 10px;font-family:var(--cond);font-weight:700;
  letter-spacing:.16em;font-size:12px;text-transform:uppercase;color:var(--lamp);}
.merchant-head .mt-tier{color:var(--cyan);}
.merchant-head .mt-wallet{margin-left:auto;color:var(--ui);}
.merchant-head .mt-wallet b{color:var(--lamp);font-family:var(--mono);font-size:15px;}
.merchant-offers{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:stretch;}
.offer-card{flex:1 1 280px;max-width:340px;min-width:230px;text-align:left;position:relative;
  background:linear-gradient(170deg,#14213a,#0c1728);border:2px solid var(--ink);border-radius:6px;padding:14px 15px 15px;
  box-shadow:inset 0 1px 0 rgba(120,160,220,.08),0 10px 26px rgba(0,0,0,.45);}
.offer-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--edge);}
.offer-card.human:before{background:linear-gradient(180deg,#ffcf6e,#e08a1e);}
.offer-card.alien:before{background:linear-gradient(180deg,#d3a6ff,#8a4fd8);}
.offer-card.robot:before{background:linear-gradient(180deg,#8cf4ff,#1ea7bc);}
.offer-card.owned{box-shadow:inset 0 0 0 2px rgba(61,242,255,.35),0 10px 26px rgba(0,0,0,.45);}
.offer-card.unaffordable{opacity:.72;}
.oc-cat{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;}
.oc-cat.human{color:var(--lamp);} .oc-cat.alien{color:#cfa6ff;} .oc-cat.robot{color:var(--cyan);}
.oc-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  font-family:var(--cond);font-size:13px;color:#0b1526;background:var(--edge);}
.oc-cat.human .oc-mark{background:var(--lamp);} .oc-cat.alien .oc-mark{background:#cfa6ff;} .oc-cat.robot .oc-mark{background:var(--cyan);}
.oc-name{font-weight:700;font-size:clamp(20px,3vw,25px);letter-spacing:.04em;margin:8px 0 2px;text-transform:uppercase;
  color:var(--ui);text-shadow:0 2px 0 #000;}
.oc-theme{font-size:12px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:8px;}
.oc-quirk{font-size:13.5px;line-height:1.35;color:var(--ui);margin-bottom:8px;border-left:3px solid var(--hazard);padding-left:9px;}
.oc-quirk b{color:var(--lamp);text-transform:uppercase;letter-spacing:.06em;}
.oc-stats{font-size:13px;line-height:1.5;color:var(--muted);margin-bottom:9px;}
.oc-stats .oc-stat{color:var(--cyan);font-family:var(--mono);}
.oc-cmp{font-size:12px;color:var(--muted);border-top:1px solid #22385a;padding-top:8px;margin-bottom:10px;min-height:30px;}
.oc-cmp b{color:var(--ui);}
.oc-actions{display:flex;gap:8px;align-items:center;}
.oc-price{font-family:var(--mono);font-weight:600;font-size:17px;color:var(--lamp);margin-right:auto;}
.oc-btn{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 16px;border-radius:4px;border:2px solid var(--ink);cursor:pointer;
  background:linear-gradient(180deg,#ffcf6e,#e08a1e);color:#1a1000;box-shadow:inset 0 -3px 0 rgba(90,51,16,.5);}
.oc-btn:hover{filter:brightness(1.08);}
.oc-btn:active{transform:translateY(1px);}
.oc-btn.ghost{background:linear-gradient(180deg,#22385a,#14213a);color:var(--ui);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);}
.oc-btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4);}
.oc-tagline{font-family:var(--cond);font-size:11px;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase;}
.mo-label{margin:14px 0 7px;font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;}
.merchant-owned{display:flex;flex-wrap:wrap;gap:8px;}
.own-chip{display:flex;align-items:center;gap:9px;padding:7px 11px;border:2px solid var(--ink);border-radius:4px;
  background:#0d1728;font-family:var(--cond);font-size:13px;letter-spacing:.08em;color:var(--ui);text-transform:uppercase;}
.own-chip.equipped{border-color:var(--cyan);box-shadow:0 0 12px rgba(61,242,255,.3);}
.own-chip .oc-btn{padding:5px 10px;font-size:12px;}
.merchant-foot{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px;}
.merchant-note{font-family:var(--cond);font-size:12px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;text-align:center;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

@media (max-width:560px){
  #run-placard{min-width:132px;padding:6px 9px 8px;top:calc(72px + env(safe-area-inset-top));}
  .run-row .mono{font-size:14px;}
  .run-loadout{font-size:10px;}
  .choice-card{flex:1 1 100%;max-width:none;}
}
@media (orientation:portrait){
  #run-placard{top:calc(72px + env(safe-area-inset-top));right:calc(9px + env(safe-area-inset-right));min-width:126px;}
  #extract-placard{top:auto;bottom:calc(9px + env(safe-area-inset-bottom));left:calc(9px + env(safe-area-inset-left));right:auto;
    transform:none;text-align:left;max-width:58vw;}
}
@media (max-width:400px){
  #run-placard{min-width:114px;padding:5px 8px 7px;}
  .run-row .mono{font-size:13px;}
}
@media (max-height:460px){
  #run-placard{top:calc(60px + env(safe-area-inset-top));}
}

/* keep the run readout clear of the touch E/R buttons */
body.touch #run-placard{right:calc(78px + env(safe-area-inset-right));}

/* ---------- railcaster charge readout ---------- */
.charge-row{display:none;align-items:center;gap:9px;margin-top:7px;}
#ammo-placard.charge-mode .ammo-row{display:none;}
#ammo-placard.charge-mode .charge-row{display:flex;}
.charge-bar{flex:1;height:14px;border:1px solid var(--ink);border-radius:2px;background:#0c1728;overflow:hidden;}
.charge-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#1ea7bc,var(--cyan),var(--cyan-core));box-shadow:0 0 8px rgba(61,242,255,.6);transition:width .05s linear;}
#ammo-placard.charge-mode.recharging .charge-bar i{background:linear-gradient(90deg,#0e6f80,#1ea7bc);}
.charge-pct{font-size:15px;min-width:44px;text-align:right;color:var(--cyan-core);}
.oc-name{word-break:break-word;}

/* loadout signature: keep the run readout compact */
.run-quirk{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* portrait: keep the run readout from sprawling into the level placard */
@media (orientation:portrait){
  #run-placard{max-width:46vw;}
}
@media (max-width:560px){
  #run-placard{max-width:52vw;}
}