:root{
  --ground:#e7ecf1; --felt:#dbe3ea; --panel:#ffffff; --panel-2:#f2f5f9; --sunken:#d6dee7;
  --ink:#0f151c; --ink-2:#41505f; --ink-3:#71818f;
  --line:#c9d4de; --line-2:#aebecd;
  --accent:#0d6a86; --accent-soft:#d3e9f0;
  --safe:#2c7a4d; --warn:#a96612; --crit:#a32f2f;
  --safe-bg:#dcecdf; --warn-bg:#f6e8cf; --crit-bg:#f5dcda;
  --you:#0d6a86; --foe:#8a4a13;
  --you-soft:#dceaf0; --foe-soft:#f2e4d4;
  --shadow:0 1px 2px rgba(16,32,48,.10),0 4px 14px rgba(16,32,48,.07);
  --lift:0 6px 20px rgba(16,32,48,.18);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ground:#090e14; --felt:#0e151d; --panel:#141c26; --panel-2:#19232f; --sunken:#0b1119;
  --ink:#dee7ef; --ink-2:#9bacbc; --ink-3:#6d7f90;
  --line:#243141; --line-2:#33455a;
  --accent:#4fb4d0; --accent-soft:#12313d;
  --safe:#59b57e; --warn:#dda047; --crit:#e0685f;
  --safe-bg:#152a1e; --warn-bg:#2e2413; --crit-bg:#331a19;
  --you:#4fb4d0; --foe:#d99a4e;
  --you-soft:#102b36; --foe-soft:#2f2415;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.3);
  --lift:0 8px 26px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --ground:#090e14; --felt:#0e151d; --panel:#141c26; --panel-2:#19232f; --sunken:#0b1119;
  --ink:#dee7ef; --ink-2:#9bacbc; --ink-3:#6d7f90;
  --line:#243141; --line-2:#33455a;
  --accent:#4fb4d0; --accent-soft:#12313d;
  --safe:#59b57e; --warn:#dda047; --crit:#e0685f;
  --safe-bg:#152a1e; --warn-bg:#2e2413; --crit-bg:#331a19;
  --you:#4fb4d0; --foe:#d99a4e;
  --you-soft:#102b36; --foe-soft:#2f2415;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.3);
  --lift:0 8px 26px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink); overflow:hidden;
  font:13px/1.45 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
}
.ui,h1,h2,h3{font-family:Archivo,system-ui,-apple-system,sans-serif}
.lbl{font-family:Archivo,sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.11em;
     text-transform:uppercase; color:var(--ink-3)}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ══ shell ══ */
#app{display:grid; grid-template-rows:auto 1fr auto; height:100dvh}

.topbar{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  padding:7px 14px; background:var(--panel); border-bottom:1px solid var(--line); z-index:30;
}
.brand{font-family:Archivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:-.01em}
.brand span{color:var(--accent)}
.grow{flex:1}
select,input[type=number]{
  font:inherit; font-size:11.5px; background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line-2); border-radius:5px; padding:3px 6px;
}
input[type=number]{width:64px}
.btn{background:var(--panel-2); border:1px solid var(--line-2); border-radius:5px;
     padding:4px 10px; font-family:Archivo,sans-serif; font-size:11.5px; font-weight:600}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(1.12); color:#fff}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line-2); color:inherit}

/* ══ battlefield ══ */
.table{
  display:grid; grid-template-columns:1fr 276px; gap:10px;
  padding:10px 14px; background:var(--felt); min-height:0; overflow:hidden;
}
.field{display:grid; grid-template-rows:auto 1fr auto; gap:8px; min-height:0}
.rail{display:flex; flex-direction:column; gap:8px; min-height:0; overflow:hidden}

/* side strip: hardware/reserve on the left, hacker + crash site on the right */
.side{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:stretch;
}
.zone{
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:6px 8px; display:flex; flex-direction:column; gap:5px; min-width:0;
}
.zone.foe{border-top:2px solid var(--foe)}
.zone.you{border-bottom:2px solid var(--you)}
.zone-head{display:flex; align-items:center; gap:7px}
.slots{display:flex; gap:5px; flex-wrap:wrap; min-height:34px; align-items:center}

.hw{
  display:flex; flex-direction:column; gap:1px; justify-content:center;
  min-width:78px; padding:4px 7px; border-radius:6px; text-align:left;
  border:1px solid var(--line-2); background:var(--panel-2); font-size:10.5px;
}
.hw:hover{border-color:var(--accent)}
.hw b{font-family:Archivo,sans-serif; font-weight:600; font-size:10.5px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px}
.hw i{font-style:normal; color:var(--ink-3); font-size:9.5px}
.hw.empty{border-style:dashed; color:var(--ink-3); justify-content:center; align-items:center;
          min-width:56px; font-size:9.5px}
.hw.tapped{opacity:.5}

/* hacker + crash site */
.commander{display:flex; gap:7px; align-items:stretch}
.hacker{
  width:150px; border-radius:9px; padding:7px 9px; display:flex; flex-direction:column; gap:6px;
  background:var(--panel); border:1px solid var(--line);
}
.hacker.foe{box-shadow:inset 0 2px 0 var(--foe)}
.hacker.you{box-shadow:inset 0 -2px 0 var(--you)}
.hacker-name{font-family:Archivo,sans-serif; font-weight:700; font-size:11px; line-height:1.25}
.hacker-fac{font-size:9.5px; color:var(--ink-3)}
.vitals{display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
.vital{background:var(--panel-2); border:1px solid var(--line); border-radius:5px;
       padding:2px 4px; text-align:center}
.vital b{display:block; font-size:14px; font-weight:600; line-height:1.2}
.vital.alert b{color:var(--crit)}
.pips{display:flex; gap:3px; justify-content:center}
.pip{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--line-2)}
.pip.on{background:var(--crit); border-color:var(--crit)}

/* TRACE gauge — the one number */
.gauge{display:flex; flex-direction:column; gap:3px}
.gauge-head{display:flex; justify-content:space-between; align-items:baseline}
.gauge-val{font-size:15px; font-weight:600; line-height:1}
.gauge-val.safe{color:var(--safe)} .gauge-val.warn{color:var(--warn)} .gauge-val.crit{color:var(--crit)}
.track{position:relative; height:9px; background:var(--sunken); border:1px solid var(--line);
       border-radius:3px; overflow:hidden}
.fill{position:absolute; inset:0 auto 0 0; transition:width .18s ease}
.fill.safe{background:var(--safe)} .fill.warn{background:var(--warn)} .fill.crit{background:var(--crit)}
.tick{position:absolute; top:-1px; bottom:-1px; width:2px; background:var(--ink); opacity:.5}
.tick.max{opacity:.25}

.crash{
  width:60px; border-radius:9px; border:1px dashed var(--line-2); background:var(--panel-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--ink-3);
}
.crash b{font-family:Archivo,sans-serif; font-size:16px; font-weight:700; color:var(--ink-2)}
.crash:hover{border-color:var(--accent); color:var(--accent)}

/* ══ lanes: servers where both sides meet ══ */
.lanes{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; min-height:0}
.lane{
  display:grid; grid-template-rows:1fr auto 1fr; gap:5px; min-height:0;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:7px;
  box-shadow:var(--shadow);
}
.lane-half{display:flex; flex-direction:column; gap:4px; justify-content:flex-end; min-height:46px}
.lane-half.top{justify-content:flex-start}
.lane-half.empty{align-items:center; justify-content:center; color:var(--ink-3); font-size:9.5px; font-style:italic}

.bd{
  border-radius:7px; padding:6px 7px; text-align:left; width:100%;
  border:1px solid var(--line-2); background:var(--panel-2);
}
.bd.own{background:var(--you-soft); border-color:var(--you)}
.bd.foe{background:var(--foe-soft); border-color:var(--foe)}
.bd:hover{box-shadow:var(--lift)}
.bd-top{display:flex; justify-content:space-between; align-items:baseline; gap:5px}
.bd-name{font-family:Archivo,sans-serif; font-weight:700; font-size:11px; line-height:1.2}
.bd-df{font-weight:700; font-size:12px; color:var(--accent); white-space:nowrap}
.bd-owner{font-size:9px; color:var(--ink-3); margin-top:2px}
.tags{display:flex; flex-wrap:wrap; gap:3px; margin-top:4px}
.tag{font-size:9px; padding:0 4px; border:1px solid var(--line-2); border-radius:3px; color:var(--ink-2)}
.tag.hit{background:var(--safe-bg); border-color:var(--safe); color:var(--safe); font-weight:600}

.prog{
  display:flex; justify-content:space-between; align-items:center; gap:5px; width:100%;
  border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:5px;
  padding:3px 6px; background:var(--panel-2); font-size:10.5px; text-align:left;
}
.prog.you{border-left-color:var(--you)}
.prog.foe{border-left-color:var(--foe)}
.prog:hover{border-color:var(--accent); box-shadow:var(--shadow)}
.prog .nm{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.prog .sig{font-weight:700; white-space:nowrap}
.prog .sig .up{color:var(--safe)} .prog .sig .dn{color:var(--crit)}
.prog .vc{color:var(--warn); font-size:9px}

/* ══ hand: bottom centre ══ */
.handbar{
  background:var(--panel); border-top:1px solid var(--line);
  padding:8px 14px 10px; display:flex; flex-direction:column; gap:6px; z-index:10;
}
.hand-head{display:flex; align-items:center; gap:10px}
.turn{font-family:Archivo,sans-serif; font-weight:700; font-size:12px; padding:2px 9px;
      border-radius:99px; background:var(--you-soft); color:var(--you)}
.turn.foe{background:var(--foe-soft); color:var(--foe)}
.hand{display:flex; gap:6px; justify-content:center; overflow-x:auto; padding:4px 0 2px;
      min-height:126px; align-items:flex-end}
.hcard{
  flex:0 0 auto; width:96px; height:118px; border-radius:8px; padding:7px;
  border:1px solid var(--line-2); background:var(--panel-2); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:3px; text-align:left;
  transition:transform .13s ease, box-shadow .13s ease;
}
.hcard:hover{transform:translateY(-8px); box-shadow:var(--lift); border-color:var(--accent)}
.hcard.playable{border-color:var(--accent)}
.hcard.tooCostly{opacity:.62}
.hcard .cost{
  align-self:flex-end; font-family:Archivo,sans-serif; font-weight:700; font-size:11px;
  background:var(--sunken); border-radius:4px; padding:0 5px; color:var(--ink-2);
}
.hcard .cost.over{background:var(--crit-bg); color:var(--crit)}
.hcard .nm{font-family:Archivo,sans-serif; font-weight:700; font-size:10.5px; line-height:1.2}
.hcard .ty{font-size:9px; color:var(--ink-3)}
.hcard .st{margin-top:auto; font-size:9.5px; color:var(--ink-2)}
.hcard .at{font-size:8.5px; color:var(--ink-3); line-height:1.25}
.hand-empty{color:var(--ink-3); font-style:italic; font-size:11px; align-self:center}

/* ══ rail ══ */
.box{background:var(--panel); border:1px solid var(--line); border-radius:9px;
     display:flex; flex-direction:column; min-height:0; overflow:hidden}
.box>header{display:flex; align-items:center; justify-content:space-between; gap:6px;
            padding:6px 9px; border-bottom:1px solid var(--line); flex:0 0 auto}
.box>.inner{padding:7px 9px; overflow-y:auto; min-height:0}
.box.acts{flex:0 1 auto; max-height:38%}
.box.log{flex:1 1 auto; min-height:0}

.act{
  width:100%; text-align:left; border:1px solid var(--line); border-radius:6px;
  padding:5px 7px; background:var(--panel-2); font-size:10.5px; margin-bottom:4px;
  display:flex; justify-content:space-between; gap:6px; align-items:center;
}
.act:hover{border-color:var(--accent); background:var(--panel)}
.act.pass{border-style:dashed}
.act .dt{font-size:9.5px; white-space:nowrap}
.act .dt.free{color:var(--ink-3)}
.act .dt.cost{color:var(--warn)}
.act .dt.over{color:var(--crit); font-weight:700}

/* ── karta Server + zdolność Hackera ─────────────────────────────────────── */
.hw.srv-card{border-style:solid; border-color:var(--accent); background:var(--accent-soft)}
.hw.srv-card b{color:var(--accent)}

.ability{
  border-top:1px dashed var(--line); padding-top:5px; margin-top:1px;
  display:flex; flex-direction:column; gap:2px;
}
.ability.tapped{opacity:.5}
.ability-cost{
  align-self:flex-start; font-family:Archivo,sans-serif; font-weight:700; font-size:9.5px;
  background:var(--sunken); border-radius:3px; padding:0 5px; color:var(--ink-2);
}
.ability-txt{font-size:9.5px; line-height:1.4; color:var(--ink-2)}
.ability-st{font-size:8.5px; color:var(--ink-3); font-style:italic}

/* ── dziennik ────────────────────────────────────────────────────────────── */
.jround{border-bottom:1px solid var(--line); padding-bottom:4px; margin-bottom:5px}
.jround[open]{background:var(--panel-2); border-radius:6px; padding:4px 6px 6px}
.jround>summary{
  cursor:pointer; display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-family:Archivo,sans-serif; font-size:11px; padding:3px 0; list-style:none;
}
.jround>summary::-webkit-details-marker{display:none}
.jround>summary::before{content:"▸"; color:var(--ink-3); margin-right:5px; font-size:9px}
.jround[open]>summary::before{content:"▾"}
.jphase{margin:4px 0 0}
.jphase>.lbl{display:block; margin:5px 0 2px; padding-bottom:2px; border-bottom:1px solid var(--line)}
.jline{
  display:grid; grid-template-columns:34px 1fr; gap:6px; align-items:baseline;
  font-size:10.5px; line-height:1.45; padding:1px 0;
}
.jwho{font-size:8.5px; font-weight:600; color:var(--ink-3); text-align:right}
.jwho.p0{color:var(--you)} .jwho.p1{color:var(--foe)}
.jline.gain>span:last-child{color:var(--accent); font-weight:600}
.jline.harm>span:last-child{color:var(--crit)}
.jline.warn>span:last-child{color:var(--warn)}
.jline.end>span:last-child{color:var(--accent); font-weight:700}

.btn.tiny{padding:1px 7px; font-size:10px}
#journal{max-width:720px}
#journal .inner{max-height:74vh; overflow-y:auto}

.banner{
  padding:7px 11px; border-radius:8px; font-family:Archivo,sans-serif; font-weight:700;
  font-size:12px; background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent);
}
.hint{font-size:10px; color:var(--ink-3); line-height:1.5}

/* ══ inspector ══ */
dialog{border:1px solid var(--line-2); border-radius:11px; background:var(--panel); color:var(--ink);
       padding:0; max-width:440px; width:calc(100% - 32px); box-shadow:0 14px 50px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(6,12,18,.6)}
dialog header{display:flex; justify-content:space-between; align-items:center; gap:10px;
              padding:11px 14px; border-bottom:1px solid var(--line)}
dialog .inner{padding:14px; display:flex; flex-direction:column; gap:11px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:3px 14px; font-size:11.5px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0}
.eff{background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--accent);
     border-radius:6px; padding:9px 11px; font-size:11.5px; line-height:1.55}
.flag{display:inline-block; font-size:10px; padding:2px 8px; border-radius:99px;
      font-family:Archivo,sans-serif; font-weight:700; margin-right:4px}
.flag.ok{background:var(--safe-bg); color:var(--safe)}
.flag.no{background:var(--warn-bg); color:var(--warn)}
.flag.bad{background:var(--crit-bg); color:var(--crit)}

@media (max-width:1080px){
  body{overflow:auto}
  #app{height:auto}
  .table{grid-template-columns:1fr}
  .lanes{grid-template-columns:repeat(2,1fr)}
  .rail{max-height:none}
  .box>.inner{max-height:240px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }