:root{
  --ink:#e7ecef; --dim:#96a3ac; --faint:#66747e;
  --hull:#0b1015; --plate:#121a21; --edge:#1f2a33; --raise:#182129;
  --amber:#d8a14a; --blue:#3f7fd0; --green:#5ec48f; --red:#c2452f; --gold:#e4c760;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--hull);color:var(--ink);font-family:var(--sans);overflow:hidden}
button{font-family:inherit;color:inherit}
button:disabled{opacity:.42;cursor:not-allowed}
h2{font:600 10px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
   margin:11px 0 5px;padding-bottom:3px;border-bottom:1px solid var(--edge)}
h2:first-child{margin-top:0}

/* ---------- title ---------- */
#title-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:flex-start;padding:16px 3vw}
#cover{position:absolute;inset:0;width:100%;height:100%}
#title-panel{position:relative;z-index:2;width:min(620px,100%);max-height:100%;overflow:auto;
  background:rgba(9,13,18,0.94);border:1px solid var(--edge);border-radius:6px;padding:20px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
#title-name{font:700 42px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0}
#title-sub{font:400 15px/1.4 var(--sans);color:var(--amber);margin:6px 0 2px;letter-spacing:.06em}
#title-version{font:400 11px/1.4 var(--mono);color:var(--faint)}
.disclosure{font:400 11px/1.5 var(--sans);color:var(--faint);margin:12px 0 0;max-width:64ch}
#tasking-list{display:grid;gap:6px;margin:10px 0}
.tasking{display:flex;flex-direction:column;gap:2px;text-align:left;padding:8px 10px;border-radius:4px;
  background:var(--plate);border:1px solid var(--edge);cursor:pointer}
.tasking b{font:600 13px/1.2 var(--sans)}
.tasking span{font:400 11px/1.2 var(--mono);color:var(--faint)}
.tasking.on{border-color:var(--amber);background:var(--raise)}
#tasking-brief{font:400 13px/1.55 var(--sans);color:var(--dim);margin:8px 0 0;max-width:70ch}
.rowline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.big{padding:9px 18px;border-radius:4px;background:var(--amber);color:#111;border:0;font:600 13px/1 var(--sans);cursor:pointer}
.ghost{padding:9px 14px;border-radius:4px;background:transparent;color:var(--ink);border:1px solid var(--edge);
  font:500 12px/1 var(--sans);cursor:pointer}

/* ---------- game ---------- */
#game{display:none;grid-template-columns:250px minmax(200px,1fr) 340px;grid-template-rows:auto 1fr auto;
  height:100%;gap:1px;background:var(--edge)}
#topbar{grid-column:1/4;display:flex;align-items:center;gap:10px;background:var(--plate);padding:6px 12px;flex-wrap:wrap}
#top-title{font:700 15px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
#top-version{font:400 10px/1 var(--mono);color:var(--faint)}
#top-tasking{font:600 12px/1 var(--sans);color:var(--amber)}
#top-turn{font:400 12px/1 var(--mono);color:var(--dim)}
#topbar .sp{flex:1}
#topbar button{padding:5px 10px;border-radius:3px;border:1px solid var(--edge);background:var(--raise);
  font:500 11px/1 var(--sans);cursor:pointer}
#topbar button#btn-end{background:var(--amber);color:#111;border-color:var(--amber);font-weight:700}

#situation{background:var(--plate);padding:10px;overflow:auto;display:flex;flex-direction:column}
#plan-plate{position:relative;background:#07090c;min-width:0;min-height:0;overflow:hidden}
#plan{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#rail{background:var(--plate);padding:10px;overflow:auto}
#statusbar{grid-column:1/4;display:flex;gap:14px;align-items:center;background:var(--plate);padding:5px 12px;
  font:400 11px/1.3 var(--mono);color:var(--dim)}
#say{color:var(--amber)}

.obj{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:center;padding:2px 0;
  font:400 12px/1.35 var(--sans)}
.obj .box{color:var(--amber)}
.obj .val{font:400 11px/1 var(--mono);color:var(--faint)}
.obj.done{color:var(--faint);text-decoration:line-through}
.grid2{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font:400 11px/1.5 var(--mono)}
.grid2 .k{color:var(--faint)}
.grid2 .v{text-align:right}
.meter{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;font:400 11px/1 var(--mono)}
.meter .k{color:var(--faint)}
.bar{height:4px;background:#0a1015;border-radius:3px;overflow:hidden;border:1px solid var(--edge)}
.bar i{display:block;height:100%;background:var(--green)}
.bar.air i{background:var(--blue)}
.bar.hot i{background:var(--red)}
.trooper{display:grid;grid-template-columns:1fr auto;gap:1px 6px;padding:4px 6px;margin:2px 0;border-radius:3px;
  background:var(--hull);border:1px solid transparent;cursor:pointer}
.trooper.on{border-color:var(--amber);background:var(--raise)}
.trooper.gone{opacity:.45}
.trooper .nm{font:600 12px/1.2 var(--sans)}
.trooper .ap{font:400 11px/1.2 var(--mono);color:var(--amber)}
.trooper .cond{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:2px 0 1px}
.trooper .flags{grid-column:1/3;font:400 10px/1.3 var(--mono);color:var(--faint)}

/* ---------- the orbit board ---------- */
.board{border:1px solid var(--edge);border-radius:5px;padding:10px;background:var(--hull);margin-bottom:10px}
.lane-track{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.lane{padding:5px 4px;border-radius:3px;background:var(--plate);border:1px solid var(--edge);text-align:center}
.lane b{display:block;font:600 10px/1.2 var(--sans)}
.lane span{font:400 9px/1.2 var(--mono);color:var(--faint)}
.lane.on{border-color:var(--amber);background:var(--raise);box-shadow:inset 0 0 0 1px rgba(216,161,74,.35)}
.lane.bad.on{border-color:var(--red);box-shadow:inset 0 0 0 1px rgba(194,69,47,.4)}
.lane-note{font:400 11px/1.45 var(--sans);color:var(--dim);margin:7px 0}
.credit{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;margin:6px 0 8px;
  font:400 11px/1 var(--mono)}
.credit .k{color:var(--faint)}
.pips{display:flex;gap:3px}
.pips i{width:9px;height:9px;border-radius:50%;border:1px solid var(--edge);background:var(--plate)}
.pips i.on{background:var(--amber);border-color:var(--amber)}
.request{display:grid;grid-template-columns:1fr auto;gap:1px 8px;width:100%;text-align:left;margin:3px 0;
  padding:6px 8px;border-radius:4px;background:var(--plate);border:1px solid var(--edge);cursor:pointer}
.request b{font:600 12px/1.2 var(--sans)}
.request em{font:600 11px/1.2 var(--mono);color:var(--amber);font-style:normal}
.request span{grid-column:1/3;font:400 10px/1.35 var(--sans);color:var(--faint)}
.request:hover:not(:disabled){border-color:var(--amber)}
.request.off{opacity:.42;cursor:not-allowed}
.request.armed{border-color:var(--amber);background:var(--raise)}

/* ---------- jacket ---------- */
.jacket{border:1px solid var(--edge);border-radius:5px;background:#efe9dc;color:#22282c;padding:10px;margin-bottom:10px;
  background-image:radial-gradient(circle at 10px 12px,#d6cfc0 3px,transparent 3px),
                   radial-gradient(circle at 10px 34px,#d6cfc0 3px,transparent 3px),
                   radial-gradient(circle at 10px 56px,#d6cfc0 3px,transparent 3px);
  padding-left:24px}
.jacket h2{color:#6b6455;border-color:#cfc7b6}
.jhead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.jhead b{font:600 13px/1.2 var(--mono)}
.stamp{font:700 10px/1 var(--mono);letter-spacing:.14em;border:2px solid #3d7a52;color:#3d7a52;
  padding:3px 5px;border-radius:2px;transform:rotate(-4deg)}
.stamp.bad{border-color:#a33a2c;color:#a33a2c}
.jrows{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;margin-top:7px;font:400 11px/1.55 var(--mono)}
.jrows .k{color:#6b6455}
.jrows .v{text-align:right}
.jrows .skill{font-weight:700}
.skills{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:7px}
.sk{display:flex;flex-direction:column;align-items:center;padding:3px 1px;border-radius:2px;background:#e2dbcb}
.sk b{font:600 8px/1.2 var(--mono);letter-spacing:.04em;color:#6b6455;text-transform:uppercase}
.sk i{font:700 12px/1.2 var(--mono);font-style:normal;color:#22282c}
.sk.up{background:#d9dfc4}
.orders{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px;padding-top:8px;border-top:1px solid #cfc7b6}
.chip{padding:4px 7px;border-radius:3px;background:#22282c;color:#e7ecef;border:1px solid #22282c;
  font:500 11px/1 var(--sans);cursor:pointer}
.chip em{font-style:normal;font-family:var(--mono);color:var(--amber);margin-left:4px}
.chip.off{opacity:.4;cursor:not-allowed}
.chip.on{background:var(--amber);color:#111}
#difficulty-list .chip{background:var(--plate);border-color:var(--edge)}
#difficulty-list .chip.on{background:var(--amber);color:#111;border-color:var(--amber)}

.fire-panel{flex:0 0 auto;border:1px solid var(--edge);border-radius:5px;padding:7px 8px;background:var(--hull)}
.frhead{display:flex;align-items:baseline;gap:5px;font:600 12px/1.3 var(--sans);flex-wrap:wrap}
.frhead .arrow{color:var(--faint)}
.frhead.ours b:first-child{color:var(--blue)}
.frhead.theirs b:first-child{color:var(--red)}
.verdict{margin:4px 0 6px;padding:3px 6px;border-radius:3px;font:700 11px/1.3 var(--mono);letter-spacing:.04em}
.verdict.hit{background:rgba(63,127,208,.18);color:#a8d0ff;border:1px solid rgba(63,127,208,.4)}
.verdict.down{background:rgba(228,199,96,.18);color:var(--gold);border:1px solid rgba(228,199,96,.45)}
.verdict.miss{background:rgba(150,163,172,.10);color:var(--dim);border:1px solid var(--edge)}
.rounds{display:flex;gap:3px;margin-top:6px;flex-wrap:wrap}
.rnd{display:flex;flex-direction:column;align-items:center;padding:2px 5px;border-radius:2px;
  background:var(--plate);border:1px solid var(--edge);min-width:30px}
.rnd b{font:400 8px/1.2 var(--mono);color:var(--faint)}
.rnd i{font:700 11px/1.2 var(--mono);font-style:normal;color:var(--dim)}
.rnd.hit{border-color:rgba(63,127,208,.5)}
.rnd.hit i{color:#a8d0ff}
.fire-panel .fine{font:400 10px/1.4 var(--mono);color:var(--faint);margin:6px 0 0}
.sheet-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:110px;margin-top:10px;
  border:1px solid var(--edge);border-radius:5px;padding:8px;background:var(--hull)}
.lines{flex:1 1 auto;min-height:60px;overflow:auto}
.line{display:grid;grid-template-columns:30px 1fr;gap:6px;padding:2px 0;font:400 11px/1.4 var(--sans);
  border-bottom:1px solid rgba(255,255,255,.03)}
.line .t{font-family:var(--mono);color:var(--faint)}
#schematic{position:absolute;right:8px;top:8px;display:flex;gap:6px;z-index:3}
.schem{background:rgba(9,13,18,.86);border:1px solid var(--edge);border-radius:4px;padding:3px;text-align:center}
.schem.on{border-color:var(--amber)}
.schem canvas{display:block;border-radius:2px}
.schem span{font:400 9px/1.4 var(--mono);color:var(--faint)}

/* ---------- paper ---------- */
/* ---------- the depot ---------- */
#depot{position:fixed;inset:0;display:none;background:var(--hull);overflow:auto;padding:18px;z-index:40}
#depot-inner{width:min(1280px,100%);margin:0 auto}
#depot-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
#depot-title{font:700 26px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
#depot-standing{display:flex;gap:16px;flex-wrap:wrap}
#depot-standing .stat{display:flex;flex-direction:column}
#depot-standing .k{font:600 9px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
#depot-standing .v{font:700 16px/1.2 var(--mono);color:var(--amber)}
#depot-brief{margin:14px 0 4px;max-width:80ch}
#depot-brief h3{font:700 13px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin:0 0 4px}
#depot-brief p{font:400 13px/1.6 var(--sans);color:var(--dim);margin:4px 0}
#depot-brief .fine{font:400 11px/1.5 var(--mono);color:var(--faint)}
#depot-cols{display:grid;grid-template-columns:1fr 380px;gap:14px;margin-top:10px;align-items:start}
#depot-left{min-width:0}
#depot-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px}
#depot-roster h2{grid-column:1/-1}
.rost{background:#efe9dc;color:#22282c;border-radius:5px;padding:9px 10px 9px 22px;cursor:pointer;
  border:2px solid transparent;
  background-image:radial-gradient(circle at 10px 13px,#d6cfc0 3px,transparent 3px),
                   radial-gradient(circle at 10px 35px,#d6cfc0 3px,transparent 3px),
                   radial-gradient(circle at 10px 57px,#d6cfc0 3px,transparent 3px)}
.rost.on{border-color:var(--amber)}
.rost.resting{opacity:.6}
.rtop{display:flex;justify-content:space-between;align-items:center;gap:6px}
.rtop b{font:600 12px/1.3 var(--mono)}
.going-mark{font:700 8px/1 var(--mono);letter-spacing:.12em;padding:3px 4px;border-radius:2px;
  border:2px solid #8a8474;color:#6b6455}
.rost.going .going-mark{border-color:#3d7a52;color:#3d7a52}
.rost.resting .going-mark{border-color:#a33a2c;color:#a33a2c}
.rkit{display:flex;flex-direction:column;font:400 10.5px/1.5 var(--mono);color:#4a4438;margin-top:4px}
.rost .skills{margin-top:6px}
.rfoot{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:7px}
.rfoot .fine{font:400 10px/1.3 var(--mono);color:#6b6455}
.carry{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}
.chip.small{font-size:10px;padding:2px 5px}
#depot-stock{background:var(--plate);border:1px solid var(--edge);border-radius:5px;padding:10px;
  position:sticky;top:0;max-height:82vh;overflow:auto}
#depot-stock h3{font:600 10px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin:12px 0 5px}
.stock{display:grid;grid-template-columns:1fr auto;gap:1px 8px;width:100%;text-align:left;margin:3px 0;
  padding:6px 8px;border-radius:4px;background:var(--hull);border:1px solid var(--edge);cursor:pointer}
.stock b{font:600 12px/1.2 var(--sans)}
.stock em{font:600 11px/1.2 var(--mono);color:var(--amber);font-style:normal}
.stock span{grid-column:1/3;font:400 10px/1.35 var(--sans);color:var(--faint)}
.stock:hover:not(:disabled){border-color:var(--amber)}
.stock:disabled{opacity:.42;cursor:not-allowed}
.stock.has{border-color:var(--green);opacity:.75}
#depot-record{margin-top:16px}
.carry .sell-label{font:600 9px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6b6455;margin-right:2px}
.recrow{display:grid;grid-template-columns:1fr 90px 90px 70px 50px;gap:8px;padding:4px 6px;
  font:400 11.5px/1.4 var(--mono);border-bottom:1px solid var(--edge);color:var(--dim)}
.recrow .nm{color:var(--ink)}
.recrow.good .sc{color:var(--green)}
.recrow .pd{text-align:right;color:var(--amber)}
#depot-say{margin-top:12px;font:400 12px/1.4 var(--mono);color:var(--amber);min-height:18px}
@media (max-width: 900px){
  #depot-cols{grid-template-columns:1fr}
  #depot-stock{position:static;max-height:none}
  .recrow{grid-template-columns:1fr 70px 70px}
  .recrow .ls,.recrow .pd{display:none}
}

#paper{position:fixed;inset:0;background:rgba(4,6,9,.86);display:none;align-items:flex-start;
  justify-content:center;padding:18px;z-index:50}
#paper-scroll{width:min(880px,100%);max-height:100%;overflow:auto}
.paper-inner{background:#efe9dc;color:#22282c;border-radius:5px;padding:22px 26px}
#paper-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
#paper-title{font:700 17px/1.2 var(--mono);letter-spacing:.06em}
#paper-body h3{font:700 13px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  margin:20px 0 6px;color:#6b6455;border-bottom:1px solid #cfc7b6;padding-bottom:3px}
#paper-body p{font:400 13px/1.6 var(--sans);margin:7px 0;max-width:74ch}
#paper-body .fine{font-size:11.5px;color:#6b6455}
#paper-body table{border-collapse:collapse;margin:8px 0;font:400 11.5px/1.4 var(--mono);width:100%}
#paper-body th{text-align:left;border-bottom:1.5px solid #6b6455;padding:3px 6px;color:#4a4438}
#paper-body td{border-bottom:1px solid #d8d1c2;padding:3px 6px}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media (max-width: 880px){
  /* the narrow layout is a single COLUMN: the topbar's three-column span has to
     be undone or the browser invents columns and the plan lands in one of them */
  #game{grid-template-columns:1fr;grid-template-rows:auto minmax(240px,40vh) auto minmax(180px,1fr) auto}
  #topbar,#statusbar{grid-column:1/2}
  #topbar{order:1}
  #plan-plate{order:2}
  #situation{order:3;max-height:110px}
  #rail{order:4;min-height:180px}
  #statusbar{order:5}
  #schematic{transform:scale(.68);transform-origin:top right}
  #title-screen{justify-content:center}
}