/* ============ Space Wars - console styles ============ */

/* ---- fonts ---- */
@font-face{font-family:'Big Shoulders Stencil Display';src:url('fonts/BigShouldersStencilDisplay-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Big Shoulders Stencil Display';src:url('fonts/BigShouldersStencilDisplay-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Condensed';src:url('fonts/IBMPlexSansCondensed-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Condensed';src:url('fonts/IBMPlexSansCondensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --void:#16130F;
  --cream:#E8DFC8;
  --cream-2:#EFE8D4;
  --putty:#CFC3A6;
  --putty-d:#B9AD8E;
  --ink:#24211C;
  --orange:#D45A2A;
  --orange-d:#B4461C;
  --mustard:#E3A82B;
  --olive:#5F6E3A;
  --red:#B3261E;
  --board:#121211;
  --amber:#F2B640;
  --dimamber:#7A5A20;
  --stencil:'Big Shoulders Stencil Display',system-ui,sans-serif;
  --sans:'IBM Plex Sans Condensed',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:500;
  overflow:hidden;
  /* faint warm grain so the console is a painted surface, not a void */
  background-image:radial-gradient(rgba(255,240,210,0.022) 1px, transparent 1px);
  background-size:3px 3px;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.stencil{font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
button{font-family:inherit;cursor:pointer}

/* ============ APP FRAME ============ */
.app{
  height:100dvh;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
}

/* ============ HULL STRIP ============ */
.hull{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  gap:8px;
  padding:8px 10px 14px;
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:5px;
  box-shadow:0 3px 0 rgba(0,0,0,.55);
}
.hull::after{ /* rivets */
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:4px;
  background:
    radial-gradient(circle at 5px 5px, var(--putty-d) 0 2.2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 5px) 5px, var(--putty-d) 0 2.2px, transparent 2.8px),
    radial-gradient(circle at 5px calc(100% - 5px), var(--putty-d) 0 2.2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), var(--putty-d) 0 2.2px, transparent 2.8px);
}
.plate{
  position:relative;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:6px 9px;
  background:var(--cream-2);
  border:2px solid var(--ink);
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(36,33,28,.18);
}
.plate-label{font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(11px,1.05vw,15px);color:var(--ink)}
.plate-inset{
  background:var(--ink);
  border-radius:3px;
  padding:2px 8px;
  display:flex;
  align-items:baseline;
  gap:5px;
  color:var(--amber);
  min-width:0;
  overflow:hidden;
}
.big-val{font-size:clamp(16px,1.7vw,26px);font-weight:600;color:var(--amber);line-height:1.05}
.day-val{font-size:clamp(15px,1.5vw,22px);font-weight:600;color:var(--amber);letter-spacing:.03em}
.unit{font-family:var(--mono);font-size:10px;color:var(--dimamber);letter-spacing:.06em}
.plate-sub{font-family:var(--sans);font-size:clamp(9px,.78vw,11px);letter-spacing:.06em;text-transform:uppercase;color:#6b6353;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate-sub .mono{color:#4d4638}

/* debt colouring */
.debt-plate .plate-inset{background:transparent;padding-left:2px}
.debt-plate .big-val{color:var(--mustard)}
.debt-plate.warn .big-val{color:var(--red)}
.debt-plate .plate-sub{color:#8a6d22}
.debt-plate.warn .plate-sub{color:#a2402f}

/* gauges */
.gauge{display:flex;gap:2px;height:16px;margin-top:1px}
.gauge i{flex:1 1 0;min-width:0;background:var(--putty);border:1px solid rgba(36,33,28,.35);border-radius:1px;transition:background .18s steps(1)}
.gauge.fuel i.on{background:var(--olive)}
.gauge.fuel i.low{background:var(--mustard)}
.gauge.fuel i.crit{background:var(--red)}
.gauge.hold i.on{background:var(--orange)}

/* hazard stripe + corner status */
.hazard{
  position:absolute;left:2px;right:2px;bottom:3px;height:6px;border-radius:2px;
  background:repeating-linear-gradient(45deg,var(--orange) 0 8px,var(--ink) 8px 16px);
  opacity:.92;
}
.hull-status{position:absolute;right:44px;bottom:11px;font-size:9px;letter-spacing:.12em;color:#6b6353;text-transform:uppercase}
.micro-key{
  width:24px;height:22px;border:2px solid var(--ink);
  background:var(--putty);color:var(--ink);border-radius:3px;font-family:var(--stencil);font-weight:800;
  font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 3px 0 var(--ink);
}
.micro-key:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.head-right{display:flex;align-items:center;gap:8px}
.like-key{
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;
  border:2px solid var(--ink);background:var(--putty);color:var(--ink);border-radius:3px;
  font-family:var(--stencil);font-weight:800;font-size:12px;line-height:1;
  box-shadow:0 3px 0 var(--ink);cursor:pointer;
}
.like-key:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.like-key .like-heart{font-size:13px;color:var(--red)}
.like-key .like-count{font-size:11px;letter-spacing:.02em}
.like-key.liked{background:var(--red)}
.like-key.liked .like-heart{color:var(--cream)}
.like-key.liked .like-count{color:var(--cream)}

/* ============ MAIN GRID ============ */
.main{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 396px;
  gap:10px;
}
.right-col{display:flex;flex-direction:column;gap:10px;min-height:0}
/* ============ PANELS ============ */
.panel{
  position:relative;
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:5px;
  box-shadow:0 3px 0 rgba(0,0,0,.5);
  padding:9px 11px;
  min-height:0;
}
.panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:4px;
  background:
    radial-gradient(circle at 6px 6px, var(--putty-d) 0 2.2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 6px) 6px, var(--putty-d) 0 2.2px, transparent 2.8px),
    radial-gradient(circle at 6px calc(100% - 6px), var(--putty-d) 0 2.2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), var(--putty-d) 0 2.2px, transparent 2.8px);
}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;border-bottom:2px solid var(--ink);padding-bottom:5px}
.panel-title{font-size:clamp(15px,1.35vw,20px);line-height:1;color:var(--ink)}
.panel-micro{font-size:9px;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:#7a7263;text-align:right}

/* ============ MARKET PANEL ============ */
.market-panel{display:flex;flex-direction:column;overflow:hidden}
.board{
  flex:1 1 auto;min-height:0;margin-top:6px;
  background:var(--board);border:2px solid var(--ink);border-radius:4px;
  padding:6px;display:flex;flex-direction:column;overflow:hidden;
}
.board-cols{
  display:grid;
  grid-template-columns:minmax(120px,1.5fr) auto 48px 42px auto;
  gap:6px;align-items:center;
  padding:0 6px 5px;color:var(--dimamber);font-size:9.5px;letter-spacing:.14em;
  border-bottom:1px solid #2c2a23;
}
.col-price{text-align:right}
.col-tick{text-align:center}
.col-hold{text-align:right}
.col-keys{width:118px}
#rows{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;display:flex;flex-direction:column}
.good-row{
  display:grid;
  grid-template-columns:minmax(120px,1.5fr) auto 48px 42px auto;
  gap:6px;align-items:center;
  padding:5px 6px;border-bottom:1px solid #221f19;
  flex:1 1 0;min-height:36px;
}
.good-row.unavail{opacity:.85}
.good-name{display:flex;align-items:center;gap:8px;min-width:0}
.good-badge{width:26px;height:26px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
.good-label{font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--cream);font-size:clamp(12px,1.05vw,15px);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flaps{display:flex;gap:2px;justify-content:flex-end;perspective:400px}
.flap{
  width:clamp(15px,1.35vw,20px);height:clamp(24px,2.3vw,30px);
  background:linear-gradient(#1d1c18,#121211);
  border:1px solid #34322a;border-radius:3px;position:relative;
  display:flex;align-items:center;justify-content:center;
  color:var(--amber);font-family:var(--mono);font-weight:600;
  font-size:clamp(13px,1.25vw,19px);font-variant-numeric:tabular-nums;
}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.75)}
.flap.dim{color:var(--dimamber);font-size:12px;letter-spacing:.02em;width:auto;padding:0 3px;background:transparent;border-color:transparent}
.flap.dim::after{display:none}
.flap .fg{display:block;transition:transform .06s}
.flap.busy .fg{animation:flapspin .26s steps(1) both}
@keyframes flapspin{
  0%{transform:rotateX(0)}
  49%{transform:rotateX(-88deg);opacity:.3}
  50%{transform:rotateX(88deg);opacity:.3}
  100%{transform:rotateX(0)}
}
.tick{
  font-family:var(--mono);text-align:center;line-height:1;
  font-size:clamp(19px,1.9vw,26px);font-weight:700;
  width:100%;display:flex;align-items:center;justify-content:center;
}
.tick.up{color:#a9cf5f;text-shadow:0 0 8px rgba(159,191,94,.55)}   /* olive lifted for the black board */
.tick.down{color:#e2695f;text-shadow:0 0 8px rgba(226,105,95,.55)}
.tick.flat{color:var(--dimamber);font-size:15px}
.tick.pop{animation:tickpop .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes tickpop{
  0%{transform:scale(.35);opacity:.15}
  55%{transform:scale(1.35);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.hold-cell{font-family:var(--mono);text-align:right;color:var(--cream);font-size:clamp(12px,1.05vw,15px);font-variant-numeric:tabular-nums}
.row-keys{display:flex;gap:5px}

/* ============ KEYS (buttons) ============ */
.key{
  border:2px solid var(--ink);border-radius:4px;
  background:var(--putty);color:var(--ink);
  font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(11px,1vw,14px);line-height:1;
  padding:7px 10px;
  box-shadow:0 3px 0 var(--ink);
  transition:transform .05s, box-shadow .05s;
  -webkit-tap-highlight-color:transparent;
}
.key:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.key:disabled{opacity:.42;cursor:not-allowed;box-shadow:0 3px 0 rgba(36,33,28,.5)}
.key-primary{background:var(--orange);color:var(--cream-2)}
.key-sec{background:var(--putty);color:var(--ink)}
.buy-key,.sell-key{min-width:52px;padding:7px 9px;font-size:clamp(11px,.95vw,13px)}

/* ============ STEPPER ============ */
.stepper{
  display:flex;align-items:center;gap:8px;margin-top:8px;
}
.stepper-label{font-size:12px;color:var(--ink)}
.step-btn{width:34px;padding:6px 0;text-align:center;font-size:16px}
.step-max{padding:7px 12px}
.step-inset{min-width:56px;justify-content:center;background:var(--ink);color:var(--amber);padding:5px 8px}
.step-inset .mono{font-size:16px;font-weight:600}

/* load-target toggle */
.mode-toggle{display:flex;gap:4px;margin-left:auto}
.mode-btn{padding:7px 9px;font-size:11px}
.mode-btn.active{background:var(--orange);color:var(--cream-2)}
.mode-btn:disabled{opacity:.4}
.stash-line{font-family:var(--mono);color:#8a6d22}
.stash-line.hot{color:var(--red)}

/* ============ OUTFITTER / UPGRADES ============ */
.upgrades-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:8px;border-top:2px solid var(--ink);padding-top:6px}
.upg-title{font-size:12px;color:var(--ink)}
.fitline{font-size:9px;color:#7a7263;letter-spacing:.06em;text-transform:uppercase;text-align:right}
.upgrades{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px}
.upg{border:2px solid var(--ink);border-radius:4px;padding:4px 5px;background:var(--cream-2);display:flex;flex-direction:column;gap:3px;min-width:0}
.upg.done{opacity:.72}
.upg-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.upg-name{font-size:10.5px;line-height:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upg-lv{font-size:9.5px;color:#7a7263;flex:0 0 auto;white-space:nowrap}
.upg-pips{display:flex;gap:3px}
.upg-pips i{flex:1 1 0;height:5px;background:var(--putty);border:1px solid rgba(36,33,28,.4);border-radius:1px}
.upg-pips i.on{background:var(--orange)}
.upg-row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.upg-desc{font-size:8.5px;color:#8a8265;text-transform:uppercase;letter-spacing:.03em}
.upg-btn{padding:4px 7px;font-size:10.5px;min-width:52px;text-align:center}

/* ============ NAV PANEL ============ */
.nav-panel{display:flex;flex-direction:column;flex:0 0 auto}
.nav-sub{font-size:11px;color:#7a7263;letter-spacing:.12em;margin:4px 0 4px}
.chart-wrap{position:relative;background:var(--cream-2);border:2px solid var(--ink);border-radius:4px;padding:4px;height:clamp(118px,22vh,232px);display:flex;margin-top:8px}
.chart{width:100%;height:100%;display:block;min-height:0}
.compass{position:absolute;top:8px;right:8px;width:34px;height:34px;opacity:.85}
.compass svg{width:100%;height:100%}
.chart-note{position:absolute;left:10px;bottom:6px;font-size:8.5px;letter-spacing:.1em;color:#8a8265;text-transform:uppercase}
.dest-card{margin-top:8px;background:var(--cream-2);border:2px solid var(--ink);border-radius:4px;padding:7px 9px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.dest-rows{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.dest-row{display:flex;gap:10px;align-items:baseline}
.dest-k{font-size:10px;letter-spacing:.1em;color:#7a7263;width:92px;flex:0 0 auto}
.dest-v{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jump-key{padding:14px 22px;font-size:18px;flex:0 0 auto}

/* chart svg bits */
.route-line{stroke:var(--orange);stroke-width:1.4;stroke-linecap:round}
.route-dash{stroke:var(--ink);stroke-width:.5;stroke-dasharray:1.4 1.6;opacity:.6}
.planet-dot{stroke:var(--ink);stroke-width:.6}
.planet-ring{fill:none;stroke:var(--orange);stroke-width:1.3}
.planet-name{font-family:var(--stencil);font-weight:800;font-size:4.1px;letter-spacing:.04em;fill:var(--ink)}
.planet-code{font-family:var(--mono);font-size:3.3px;fill:#6b6353}
.edge-label{font-family:var(--mono);font-size:3px;fill:#7a7263}
.edge-label.sel{fill:var(--orange);font-weight:600}
.hit{fill:transparent;cursor:pointer}
.planet-g.hatch .planet-dot{opacity:.35}
.hatch-fill{opacity:.5}

/* ============ SERVICES ============ */
.services-panel{flex:1 1 auto;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}
.svc{border:2px solid var(--ink);border-radius:4px;padding:6px 8px;background:var(--cream-2);display:flex;flex-direction:column;gap:5px}
.svc-head{display:flex;align-items:center;gap:6px}
.svc-mark{width:18px;height:18px;object-fit:contain;flex:0 0 auto}
.svc-title{font-size:12px;line-height:1;color:var(--ink);flex:0 0 auto}
.svc-note{margin-left:auto;font-size:9px;color:#7a7263;letter-spacing:.03em;text-transform:uppercase;text-align:right}
.svc-sub{font-size:9.5px;letter-spacing:.04em;color:#5d5648;line-height:1.3;text-transform:uppercase}
.svc-sub.dim{color:#8a8265}
.refuel-controls{display:flex;align-items:center;gap:5px}
.refuel-controls .step-inset{flex:1;min-width:0}
.refuel-btn{padding:6px 8px;font-size:11px;white-space:nowrap}
.shark-controls{display:flex;gap:6px}
.shark-controls .key{flex:1;padding:6px 0;font-size:10.5px}
.motto-svc{border-style:dashed;background:transparent;justify-content:center;align-items:center}
.motto{font-size:12px;line-height:1.25;color:#8a8265;text-align:center}
.motto-rule{width:26px;height:2px;background:#b0a68a;margin-top:4px}

.log-sec{margin-top:8px;border-top:2px solid var(--ink);padding-top:6px;display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.log-title{font-size:12px;color:var(--ink);margin-bottom:4px}
.log-list{flex:1 1 auto;min-height:32px;overflow-y:auto;scrollbar-width:thin;font-size:11px;line-height:1.65;color:#3d3830}
.log-list .lt{color:#8a8265;margin-right:6px}
.log-list .good{color:var(--olive)}
.log-list .bad{color:var(--red)}
.log-list .warnc{color:#9a6f13}

/* ============ EVENT / HELP LAYER ============ */
.event-layer{position:fixed;inset:0;z-index:50;display:flex;justify-content:center;align-items:flex-start}
.event-dim{position:absolute;inset:0;background:rgba(10,9,7,.62);backdrop-filter:blur(1px)}
.slip{
  position:relative;z-index:1;width:min(560px,94vw);margin-top:0;
  background:var(--cream);border:2px solid var(--ink);border-bottom-left-radius:6px;border-bottom-right-radius:6px;
  box-shadow:0 10px 0 rgba(0,0,0,.45);
  transform:translateY(-100%);animation:slipdrop .42s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes slipdrop{to{transform:translateY(0)}}
.slip-head{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:2px solid var(--ink);background:var(--putty);color:var(--ink)}
.slip-head.type-pirate{background:var(--red);color:var(--cream-2)}
.slip-head.type-police{background:var(--red);color:var(--cream-2)}
.slip-head.type-boom,.slip-head.type-crash{background:var(--mustard);color:var(--ink)}
.slip-head.type-lucky{background:var(--olive);color:var(--cream-2)}
.slip-head.type-info{background:var(--putty);color:var(--ink)}
.slip-title{font-size:17px;line-height:1}
.slip-left{display:flex;align-items:center;gap:8px}
.slip-mark{width:22px;height:22px;object-fit:contain}
.type-pirate .slip-mark,.type-police .slip-mark{filter:brightness(0) invert(1)}
.slip-code{font-size:10px;letter-spacing:.1em;opacity:.85}
.slip-body{padding:11px 13px 12px}
.slip-meta{font-size:10px;letter-spacing:.08em;color:#8a8265;margin-bottom:6px}
.slip-text{font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.45;color:var(--ink)}
.slip-delta{margin-top:9px;font-size:14px;font-weight:600;min-height:0}
.slip-delta .d-g{color:var(--olive)}
.slip-delta .d-b{color:var(--red)}
.slip-foot{display:flex;gap:8px;flex-wrap:wrap;padding:0 13px 13px}
.slip-foot .key{flex:1 1 auto;padding:11px 10px;font-size:15px}
.help-slip{width:min(620px,94vw)}
.help-grid{display:flex;flex-direction:column;gap:7px}
.help-row{display:flex;gap:10px;align-items:baseline}
.help-k{flex:0 0 110px;font-size:13px;color:var(--orange-d)}
.help-v{font-size:14px;line-height:1.35;color:var(--ink)}

/* ============ MANIFEST ============ */
.manifest-layer{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.manifest-dim{position:absolute;inset:0;background:rgba(10,9,7,.72)}
.manifest-sheet{
  position:relative;z-index:1;width:min(560px,96vw);max-height:94dvh;overflow-y:auto;
  background:var(--cream);border:2px solid var(--ink);border-radius:6px;
  box-shadow:0 12px 0 rgba(0,0,0,.5);
  padding:18px 20px 20px;
  background-image:radial-gradient(rgba(120,110,80,.05) 1px,transparent 1px);background-size:4px 4px;
}
.manifest-head{font-size:30px;text-align:center;color:var(--ink);line-height:1}
.manifest-sub{text-align:center;font-size:9.5px;letter-spacing:.14em;color:#8a8265;margin-top:4px}
.manifest-lines{margin:14px 0;border-top:2px dashed var(--ink);border-bottom:2px dashed var(--ink);padding:10px 0}
.mline{display:flex;justify-content:space-between;font-size:14px;line-height:1.85;color:#3d3830}
.mline .mv{font-variant-numeric:tabular-nums}
.mline.neg .mv{color:var(--red)}
.mline.pos .mv{color:var(--olive)}
.manifest-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.manifest-total .stencil{font-size:16px;color:var(--ink)}
.manifest-worth{font-size:34px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rank-stamp{
  align-self:flex-start;margin:14px 0 2px;padding:6px 14px;border:3px solid var(--red);color:var(--red);
  font-size:22px;line-height:1;transform:rotate(-6deg);border-radius:4px;letter-spacing:.06em;
}
.rank-stamp.good{border-color:var(--olive);color:var(--olive)}
.rank-stamp.great{border-color:var(--orange);color:var(--orange-d)}
.manifest-foot{margin-top:18px;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.manifest-board{font-size:12px;color:#5d5648;text-align:center;line-height:1.6;min-height:1em}
.manifest-board a{color:var(--orange-d)}

/* ============ START SCREEN ============ */
.start-layer{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:16px}
.start-dim{position:absolute;inset:0;background:rgba(10,9,7,.78)}
.start-sheet{
  position:relative;z-index:1;width:min(640px,96vw);max-height:94dvh;overflow-y:auto;
  background:var(--cream);border:2px solid var(--ink);border-radius:6px;
  box-shadow:0 12px 0 rgba(0,0,0,.5);
  padding:18px 20px 20px;
  background-image:radial-gradient(rgba(120,110,80,.05) 1px,transparent 1px);background-size:4px 4px;
}
.start-band{border-bottom:2px solid var(--ink);padding-bottom:9px}
.start-kicker{font-size:9px;letter-spacing:.18em;color:#8a8265;text-transform:uppercase;margin-bottom:5px}
.start-title{font-size:clamp(34px,7vw,54px);line-height:.88;color:var(--ink)}
.start-tag{font-size:9px;letter-spacing:.12em;color:#8a8265;text-transform:uppercase;margin-top:6px}
.start-prompt{font-size:13px;color:var(--orange-d);letter-spacing:.16em;margin:13px 0 9px}
.start-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}
.diff-card{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  border:2px solid var(--ink);border-radius:5px;background:var(--cream-2);
  padding:10px 11px;box-shadow:0 3px 0 var(--ink);color:var(--ink);
  transition:transform .05s,box-shadow .05s,background .12s;
  -webkit-tap-highlight-color:transparent;
}
.diff-card:hover{background:#fff7de}
.diff-card:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.diff-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.diff-name{font-size:21px;line-height:1}
.diff-card[data-diff="easy"] .diff-name{color:var(--olive)}
.diff-card[data-diff="medium"] .diff-name{color:#a97e12}
.diff-card[data-diff="hard"] .diff-name{color:var(--red)}
.diff-card[data-diff="unlimited"] .diff-name{color:var(--orange-d)}
.diff-tag{
  font-size:8.5px;letter-spacing:.08em;padding:2px 7px;border-radius:999px;
  border:1.5px solid currentColor;color:#8a8265;white-space:nowrap;flex:0 0 auto;
}
.diff-card[data-diff="easy"] .diff-tag{color:var(--olive)}
.diff-card[data-diff="medium"] .diff-tag{color:#a97e12}
.diff-card[data-diff="hard"] .diff-tag{color:var(--red)}
.diff-card[data-diff="unlimited"] .diff-tag{color:var(--orange-d)}
.diff-line{font-family:var(--sans);font-weight:500;font-size:12.5px;line-height:1.35;color:#5d5648}
.diff-stats{font-size:9.5px;letter-spacing:.04em;color:#8a8265;text-transform:uppercase}
.start-foot{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.start-resume{padding:11px 12px;font-size:14px}
.start-hint{font-size:8.5px;letter-spacing:.08em;color:#9a917a;text-align:center;text-transform:uppercase}

/* cash-out control (unlimited runs) */
.retire-btn{padding:4px 9px;font-size:10.5px;align-self:flex-start}


/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  body{overflow:auto}
  .app{height:auto;min-height:100dvh}
  .hull{flex-wrap:wrap;padding-bottom:16px}
  .hull .plate{flex:1 1 28%}
  .plate-label{font-size:11px}
  .hull-status{display:none}
  .main{grid-template-columns:minmax(0,1fr)}
  .market-panel{order:1}
  .right-col{order:2}
  #rows{max-height:none}
  .chart-wrap{height:340px}
  .gauge{height:18px}
}
@media (max-width:560px){
  .hull{gap:6px;padding:7px 8px 15px}
  .hull .plate{flex:1 1 28%;padding:5px 7px}
  .plate-label{font-size:9px;letter-spacing:.05em}
  .big-val{font-size:15px}
  .day-val{font-size:14px}
  .unit{font-size:9px}
  .plate-sub{font-size:8.5px}
  .panel{padding:8px}
  .board{padding:5px}
  .board-cols,#rows .good-row{grid-template-columns:minmax(74px,1.25fr) auto 32px 26px auto;gap:4px}
  .board-cols{font-size:8.5px;letter-spacing:.08em;padding:0 4px 4px}
  .good-row{padding:5px 4px}
  .good-badge{width:22px;height:22px}
  .good-label{font-size:11px}
  .buy-key,.sell-key{min-width:38px;padding:7px 5px;font-size:10px}
  .flap{width:14px;height:23px;font-size:12px}
  .hold-cell{font-size:11px}
  .tick{font-size:20px}
  .services-grid{gap:6px}
  .upgrades{grid-template-columns:1fr 1fr}
  .jump-key{padding:12px 16px}
  .dest-k{width:78px;font-size:9px}
  .step-max{padding:7px 10px}
  .mode-btn{padding:7px 7px;font-size:10px}
}

/* very narrow phones: the wider price arrows must not push SELL off the board */
@media (max-width:360px){
  .board-cols,#rows .good-row{grid-template-columns:minmax(54px,1fr) auto 26px 22px auto;gap:3px}
  .good-badge{display:none}
  .buy-key,.sell-key{min-width:30px;padding:7px 4px;font-size:9.5px}
  .row-keys{gap:3px}
  .tick{font-size:19px}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .flap.busy .fg{animation:none}
  .tick.pop{animation:none}
  .slip{animation:none;transform:none}
  .key{transition:none}
}

/* ============================================================
   SHORT VIEWPORTS: landscape phones and short windows.
   Keeps the whole console on one screen with three columns:
   market | nav | services.
   ============================================================ */
@media (max-height: 640px) and (orientation: landscape){
  html,body{overflow:hidden}
  .app{height:100dvh;min-height:0;padding:6px;gap:6px}
  .hull{flex-wrap:nowrap;padding:5px 8px 12px;gap:5px}
  .hull .plate{flex:1 1 0;padding:4px 6px;gap:2px}
  .plate-label{font-size:9px;letter-spacing:.07em}
  .big-val{font-size:15px}
  .day-val{font-size:13px}
  .unit{font-size:8px}
  .plate-sub{font-size:7.5px}
  .gauge{height:11px;margin-top:0}
  .hazard{height:5px;bottom:2px}
  .main{grid-template-columns:minmax(0,1.5fr) minmax(0,2fr);gap:6px}
  .right-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:6px;min-height:0}
  .nav-panel{min-height:0;padding:6px 8px;overflow:hidden}
  .services-panel{min-height:0;padding:5px 7px;overflow-y:auto;scrollbar-width:thin}
  .panel{padding:6px 8px}
  .panel-title{font-size:13px;white-space:nowrap}
  .panel-micro{font-size:7.5px}
  .board{margin-top:4px;padding:4px}
  .board-cols{font-size:7.5px;letter-spacing:.04em;padding:0 4px 3px;white-space:nowrap}
  .board-cols,#rows .good-row{grid-template-columns:minmax(0,1.2fr) auto 34px 30px auto;gap:4px}
  .good-row{padding:3px 4px;min-height:0}
  .good-name{min-width:0}
  .good-badge{width:20px;height:20px}
  .good-label{font-size:11px}
  .flap{width:13px;height:22px;font-size:11px}
  .hold-cell{font-size:11px}
  .tick{font-size:18px}
  .buy-key,.sell-key{min-width:28px;padding:6px 4px;font-size:9px}
  .stepper{margin-top:5px;gap:6px}
  .stepper-label{font-size:10px}
  .step-btn{width:28px;padding:4px 0;font-size:14px}
  .step-inset{min-width:44px;padding:4px 6px}
  .step-inset .mono{font-size:13px}
  .mode-btn{padding:5px 7px;font-size:9.5px}
  .chart-wrap{height:auto;flex:1 1 auto;min-height:64px;margin-top:5px}
  .nav-sub{font-size:9px;margin:2px 0}
  .compass{width:22px;height:22px}
  .chart-note{display:none}
  .dest-card{margin-top:5px;padding:5px 7px;gap:8px}
  .dest-k{width:64px;font-size:8px}
  .dest-v{font-size:11px}
  .jump-key{padding:9px 12px;font-size:14px}
  .services-grid{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:4px;margin-top:4px}
  .svc{padding:2px 5px;gap:2px}
  .svc-mark{width:13px;height:13px}
  .svc-title{font-size:10px}
  .svc-note{font-size:7px}
  .refuel-controls{gap:3px}
  .refuel-btn{padding:4px 6px;font-size:9.5px}
  .shark-controls{gap:4px}
  .shark-controls .key{padding:4px 0;font-size:9.5px}
  .upgrades-head{margin-top:3px;padding-top:3px}
  .upg-title{font-size:9.5px}
  .fitline{font-size:7px}
  .upgrades{grid-template-columns:repeat(2,1fr);gap:3px;margin-top:3px}
  .upg{padding:2px 4px;gap:1px}
  .upg-name{font-size:8px}
  .upg-lv{font-size:7.5px}
  .upg-pips i{height:3px}
  .upg-btn{padding:2px 3px;font-size:8.5px;min-width:0}
  .log-sec{margin-top:3px;padding-top:2px}
  .log-title{display:none}
  .log-list{flex:0 0 auto;min-height:0;max-height:20px;font-size:8.5px;line-height:1.25}
}