/* IRONVOID - Tactical Starship Combat
   Tronsoft Games . stylesheet extracted per Package Specification v1.4 s7
   No remote font, image or stylesheet references. */

:root{
  --void:#0a111b;
  --plot:#111d2b;
  --panel:#16243444;
  --grid:#1f3347;
  --edge:#2b4460;
  --ink:#c9d7e5;
  --dim:#6f8299;
  --amber:#e8a33d;
  --amber-dk:#8a5f1c;
  --signal:#df5340;
  --phos:#54cfc0;
  --violet:#9b7fd4;
  --ok:#6fbf73;
  --disp:'Saira Condensed','Oswald','Roboto Condensed','Arial Narrow',
        'DejaVu Sans Condensed',Impact,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,
        'DejaVu Sans Mono','Liberation Mono',monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,
        'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #16273b 0%, transparent 60%),
    var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  overflow:hidden;
}
button{font-family:var(--disp);cursor:pointer}
button:focus-visible,.hexbtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- shell ---------- */
#shell{display:flex;flex-direction:column;height:100%}
header{
  display:flex;align-items:baseline;gap:18px;
  padding:8px 16px;border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg,#132135,#0d1725);
  flex:0 0 auto;
}
h1{
  font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.22em;
  margin:0;color:var(--amber);text-transform:uppercase;
}
h1 span{color:var(--dim);letter-spacing:.14em;font-weight:500}
#hdrstat{font-family:var(--mono);font-size:12px;color:var(--dim);margin-left:auto;display:flex;gap:16px}
#hdrstat b{color:var(--phos);font-weight:600}

#main{flex:1 1 auto;display:flex;min-height:0}
.col{display:flex;flex-direction:column;min-height:0}
#left,#right{flex:0 0 268px;overflow-y:auto;padding:10px;gap:10px;border-color:var(--edge)}
#left{border-right:1px solid var(--edge)}
#right{border-left:1px solid var(--edge)}
#center{flex:1 1 auto;position:relative;display:flex;flex-direction:column;min-width:0}
#plotwrap{flex:1 1 auto;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
canvas{display:block;max-width:100%;max-height:100%}

/* ---------- panels ---------- */
.card{
  border:1px solid var(--edge);background:linear-gradient(180deg,#14212f,#101a26);
  border-radius:2px;padding:8px 9px;margin-bottom:9px;
}
.card.foe{border-color:#5a2a26;background:linear-gradient(180deg,#221419,#160f14)}
.eyebrow{
  font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 6px;display:flex;justify-content:space-between;align-items:center;
}
.eyebrow b{color:var(--amber);font-weight:600;letter-spacing:.1em}
.foe .eyebrow b{color:var(--signal)}
.shipname{font-family:var(--disp);font-size:17px;letter-spacing:.06em;margin:0 0 1px;color:var(--ink)}
.shipsub{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-bottom:8px;letter-spacing:.04em}

/* ---------- shield rosette (signature) ---------- */
.rosette{display:block;width:100%;height:auto;margin:2px 0 8px}
.rosette text{font-family:var(--mono);font-size:9.5px;font-weight:600}

/* ---------- readouts ---------- */
.bar{margin:4px 0}
.bar .lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.05em}
.bar .lab u{text-decoration:none;color:var(--ink)}
.track{height:5px;background:#0a1420;border:1px solid #1d2f42;margin-top:2px;position:relative}
.fill{height:100%;transition:width .25s}
.f-hull{background:linear-gradient(90deg,#8a5f1c,var(--amber))}
.f-pwr{background:linear-gradient(90deg,#1c6b64,var(--phos))}
.f-sys{background:linear-gradient(90deg,#4a3a70,var(--violet))}
.f-bad{background:linear-gradient(90deg,#6b241c,var(--signal))}

table.wp{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:10.5px}
table.wp th{
  font-family:var(--disp);font-size:10px;letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase;text-align:left;font-weight:500;padding:2px 3px;border-bottom:1px solid var(--grid)
}
table.wp td{padding:3px;border-bottom:1px solid #172533;vertical-align:middle}
table.wp tr.dead td{color:#4b5a6b;text-decoration:line-through}
.pip{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;background:#33475c}
.pip.rdy{background:var(--phos);box-shadow:0 0 6px var(--phos)}
.pip.ovl{background:var(--signal);box-shadow:0 0 6px var(--signal)}
.pip.arm{background:var(--amber)}
.fire{
  font-family:var(--disp);font-size:10px;letter-spacing:.12em;padding:2px 7px;
  background:#1c3247;color:var(--phos);border:1px solid #2d4a66;border-radius:2px;
}
.fire:hover:not(:disabled){background:#27455f;color:#fff}
.fire:disabled{opacity:.3;cursor:not-allowed}
.fire.ovl{color:var(--signal);border-color:#5c2a24;background:#2a1614}
.fire.ovl:hover:not(:disabled){background:#3d1e1a}

/* ---------- command bar ---------- */
#cmd{
  flex:0 0 auto;border-top:1px solid var(--edge);padding:8px 12px;
  background:linear-gradient(180deg,#0f1a27,#0c141f);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.btn{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;
  background:#1a2b3d;color:var(--ink);border:1px solid var(--edge);border-radius:2px;
}
.btn:hover:not(:disabled){background:#24384d;border-color:#3d5f82}
.btn:disabled{opacity:.32;cursor:not-allowed}
.btn.key{background:linear-gradient(180deg,#3b2a10,#291d0b);border-color:var(--amber-dk);color:var(--amber)}
.btn.key:hover:not(:disabled){background:#4d370f;color:#ffd68a}
.btn.warn{border-color:#5c2a24;color:var(--signal);background:#221312}
#impbar{display:flex;gap:3px;margin-right:6px}
.imp{width:15px;height:15px;border:1px solid #2b4460;background:#0c1622;font-family:var(--mono);
     font-size:9px;color:#3f556c;display:flex;align-items:center;justify-content:center}
.imp.past{background:#1b2c3d;color:#6f8299}
.imp.now{background:var(--amber);color:#121a24;border-color:#ffd68a;font-weight:700}
.imp.mv{border-bottom:2px solid var(--phos)}
#hint{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:auto;text-align:right;max-width:44%}

/* ---------- log ---------- */
#log{
  flex:1 1 auto;min-height:120px;overflow-y:auto;font-family:var(--mono);font-size:11px;
  line-height:1.5;padding-right:2px;
}
#log div{padding:1px 0;border-bottom:1px solid #131f2b}
#log .t{color:var(--dim)}
#log .you{color:var(--phos)}
#log .foe{color:var(--signal)}
#log .big{color:var(--amber);font-weight:600}
#log .sys{color:var(--violet)}
#log .turnmark{color:var(--amber);letter-spacing:.18em;font-family:var(--disp);
  border-top:1px solid var(--amber-dk);border-bottom:none;margin-top:6px;padding-top:4px}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(6,11,18,.9);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:40;padding:20px;
}
.overlay[hidden]{display:none}
.sheet{
  background:linear-gradient(180deg,#14212f,#0e1926);border:1px solid var(--edge);
  max-width:940px;width:100%;max-height:92vh;overflow-y:auto;padding:20px 24px;border-radius:3px;
  box-shadow:0 0 0 1px #000a, 0 30px 80px #0008;
}
.sheet h2{
  font-family:var(--disp);font-size:20px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin:0 0 3px;
}
.sheet h3{font-family:var(--disp);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--phos);margin:18px 0 6px;border-bottom:1px solid var(--grid);padding-bottom:3px}
.sheet p{margin:6px 0;line-height:1.6;color:#a9bacb}
.lede{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.05em;margin-bottom:14px}

/* energy allocation */
.eatop{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.bigpwr{font-family:var(--mono);font-size:40px;font-weight:600;line-height:1;color:var(--phos)}
.bigpwr.over{color:var(--signal)}
.bigpwr small{font-size:12px;color:var(--dim);letter-spacing:.1em;display:block;font-weight:400}
.ealloc{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.ealloc{grid-template-columns:1fr}}
.erow{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #16232f}
.erow .en{flex:1 1 auto;min-width:0}
.erow .en b{display:block;font-family:var(--disp);font-size:13px;letter-spacing:.08em;font-weight:500}
.erow .en i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--dim)}
.step{width:24px;height:24px;background:#1a2b3d;border:1px solid var(--edge);color:var(--ink);
  font-size:14px;line-height:1;border-radius:2px;padding:0}
.step:hover:not(:disabled){background:#27455f}
.step:disabled{opacity:.25;cursor:not-allowed}
.eval{font-family:var(--mono);font-size:15px;min-width:52px;text-align:center;color:var(--amber)}
.eval small{color:var(--dim);font-size:10px}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.chip{font-family:var(--disp);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;background:#152435;border:1px solid var(--edge);color:var(--dim);border-radius:12px}
.chip:hover{color:var(--amber);border-color:var(--amber-dk)}

/* ship select */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
@media(max-width:760px){.picks{grid-template-columns:1fr}}
.pick{
  text-align:left;background:linear-gradient(180deg,#14212f,#101a26);border:1px solid var(--edge);
  padding:12px;border-radius:2px;color:var(--ink);font-family:var(--sans);font-size:12px;line-height:1.5;
}
.pick:hover{border-color:var(--amber);background:#1a2b3d}
.pick.sel{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber-dk)}
.pick h4{font-family:var(--disp);font-size:16px;letter-spacing:.08em;margin:0 0 1px;color:var(--amber)}
.pick .fac{font-family:var(--mono);font-size:10px;color:var(--phos);letter-spacing:.08em;margin-bottom:7px}
.pick ul{margin:6px 0 0;padding-left:15px;color:#9aabbd;font-size:11.5px}
.pick .stats{font-family:var(--mono);font-size:10.5px;color:var(--dim);border-top:1px solid var(--grid);
  margin-top:8px;padding-top:6px;display:grid;grid-template-columns:1fr 1fr;gap:1px 8px}
.pick .stats b{color:var(--ink);font-weight:500}
.rowbtns{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--edge);border-radius:2px;overflow:hidden}
.seg button{background:#111d29;color:var(--dim);border:0;padding:6px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.seg button.on{background:var(--amber);color:#121a24;font-weight:600}
kbd{font-family:var(--mono);font-size:10px;background:#1a2b3d;border:1px solid var(--edge);
  border-bottom-width:2px;border-radius:3px;padding:1px 5px;color:var(--ink)}
.manual{columns:2;column-gap:26px}
@media(max-width:760px){.manual{columns:1}}
.manual h3{column-span:all}