/* HAUL - industrial load-safety. Hazard yellow and high-vis orange stencilled on
   pitch black; crane load plates; depth gauges. Deliberately NOT the pons house
   style (near-black plus a grey UI mono) that makes every launchpad tenant on
   this chain look like the same spreadsheet. */

:root{
  --void:#07070a; --panel:#0e0e13; --line:#22222b; --line2:#33333f;
  --hazard:#ffb000; --hivis:#ff5a1f; --gold:#ffc53d;
  --danger:#ff3b30; --green:#39d353; --bone:#e8e4dc; --cool:#8a8f9c;
  --display:"Big Shoulders Display",Impact,"Haettenschweiler",sans-serif;
  --prose:"Barlow",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --stripe:repeating-linear-gradient(45deg,var(--hazard) 0 14px,#0a0a0d 14px 28px);
}

*,*::before,*::after{box-sizing:border-box}
/* 🔴 A class that sets `display` beats the UA's [hidden]{display:none}, so every
   element toggled with el.hidden stayed on screen: the PAUSE overlay never hid
   (and its scrim dimmed the entire game), and the DEAD WEIGHT warning showed at
   zero dead weight. Anything toggled by `hidden` needs this to actually obey it. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:var(--prose);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.screen{display:none}
/* Each screen names its OWN display value here. A blanket `display:block` on the
   shown screen outranks `#over{display:grid}` (body[attr] #id beats #id), which
   silently killed the result screen's centring. */
body[data-screen="menu"] #menu{display:block}
body[data-screen="play"] #play{display:block}
body[data-screen="over"] #over{display:grid}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
canvas{display:block}

/* ── menu ─────────────────────────────────────────────────────────────── */
#menu{max-width:1080px;margin:0 auto;padding:0 24px 96px;position:relative}
.stripe{height:14px;background:var(--stripe);margin:0 -24px 56px}

/* hero: control console beside a live shaft monitor. Framing the game rather than
   putting the console on top of it is what makes a very dark game legible here -
   the panel was covering the exact centre the camera keeps the player in. */
.hero{
  min-height:min(720px,calc(100vh - 14px));
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:44px;align-items:center;padding:26px 0 44px;
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:26px;min-height:0;padding-top:8px}
  .monitor{order:-1}
}
.hero-inner{min-width:0}
#brand{
  font-family:var(--display);font-weight:900;
  font-size:clamp(72px,11vw,146px);line-height:.8;letter-spacing:-.015em;
  margin:0;color:var(--hazard);
}
.tag{
  font-family:var(--mono);font-size:clamp(10px,1.35vw,12.5px);
  letter-spacing:.24em;text-transform:uppercase;color:#9d9a94;margin:12px 0 22px;
}

.monitor{margin:0;border:1px solid var(--line2);background:#0a0a0e;min-width:0}
.mon-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 12px;border-bottom:1px solid var(--line2);background:#0d0d12;
}
.mon-live{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--bone);
  display:flex;align-items:center;gap:8px;
}
.mon-live::before{
  content:"";width:6px;height:6px;background:var(--danger);border-radius:50%;
  animation:live 1.6s infinite;
}
@keyframes live{50%{opacity:.2}}
.mon-id{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#8f95a1;
  text-transform:uppercase;text-align:right}
.mon-screen{position:relative;aspect-ratio:16/10;background:#050508}
#attract{position:absolute;inset:0;width:100%;height:100%}
.mon-read{display:grid;grid-template-columns:auto auto 1fr;gap:18px;
  padding:9px 12px;border-top:1px solid var(--line2);background:#0d0d12}
.mon-read dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#8f95a1}
.mon-read dd{font-family:var(--mono);font-size:15px;margin:2px 0 0;color:var(--bone)}
.mon-read{margin:0}
.mon-read div:last-child{text-align:right}
.mon-read div:last-child dd{color:var(--gold)}

/* the hero: a load-rating placard, because that is literally the game's rule */
.placard{
  margin:8px 0 0;border:2px solid var(--hazard);background:#0b0b0f;
  padding:0 0 26px;position:relative;
}
.placard-head{
  display:flex;align-items:center;gap:16px;background:var(--hazard);
  padding:6px 18px;
}
.placard-head h2{
  font-family:var(--display);font-weight:900;font-size:34px;line-height:1;
  margin:0;color:#000;letter-spacing:.02em;
}
.chev{flex:1;height:14px;background:repeating-linear-gradient(45deg,#000 0 8px,transparent 8px 16px)}
.placard-lead{
  margin:22px 26px 18px;font-size:19px;max-width:62ch;color:#cfcbc3;
}
.placard-lead strong{color:var(--hazard)}
#curve{width:calc(100% - 52px);height:170px;margin:0 26px;display:block}
.curve-key{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:2px;margin:20px 26px 0;padding:0;
}
.curve-key li{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}
.curve-key b{font-family:var(--mono);font-size:20px;color:var(--hazard);min-width:46px}
.curve-key span{font-family:var(--mono);font-size:12.5px;color:var(--cool);letter-spacing:.04em}

/* control panel */
.panel{
  border:1px solid var(--line2);background:rgba(10,10,14,.86);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  padding:22px;text-align:left;
  box-shadow:0 24px 70px rgba(0,0,0,.75);
}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.fields{grid-template-columns:1fr}}
.field span{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cool);margin-bottom:8px;
}
.field em{font-style:normal;color:#7e8490}
.input{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:#08080b;padding:0 14px}
.input i{font-family:var(--mono);color:var(--cool);font-style:normal}
.input input{
  flex:1;background:none;border:0;outline:0;color:var(--bone);
  font-family:var(--mono);font-size:22px;padding:14px 0;width:100%;
}
.input:focus-within{border-color:var(--hazard)}

.go{
  display:block;width:100%;margin:22px 0 0;padding:20px;
  background:var(--hazard);color:#000;
  font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:.03em;
  transition:transform .08s ease,background .15s ease;
}
.go:hover{background:#ffc22e}
.go:active{transform:translateY(2px)}
.controls{
  font-family:var(--mono);font-size:12px;color:var(--cool);
  letter-spacing:.06em;margin:16px 0 0;text-align:center;
}
.controls b{color:var(--bone)}
.c-touch{display:none}
@media(pointer:coarse){.c-desk{display:none}.c-touch{display:inline}}

.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);margin:40px 0 0;border:1px solid var(--line)}
.rules div{background:var(--void);padding:24px}
.rules h3{
  font-family:var(--display);font-weight:900;font-size:24px;margin:0 0 10px;
  color:var(--hivis);letter-spacing:.02em;
}
.rules p{margin:0;font-size:15.5px;color:#a9a69f}
.rules b{color:var(--bone)}

.seam{margin:40px 0 0;border:1px solid var(--line);background:var(--panel)}
.seam-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;padding:18px 22px;
  border-bottom:1px solid var(--line)}
.seam-head h2{font-family:var(--display);font-weight:900;font-size:28px;margin:0;color:var(--gold)}
.seam-head p{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--cool)}
.seam-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);margin:0;border-bottom:1px solid var(--line)}
.seam-board div{background:var(--panel);padding:14px 16px}
.seam-board dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--cool);
  text-transform:uppercase}
.seam-board dd{font-family:var(--mono);font-size:21px;margin:5px 0 0;color:var(--bone)}
.seam-board div:first-child dd{color:var(--gold)}
.seam-fine{margin:0;padding:14px 22px;font-family:var(--mono);font-size:11.5px;line-height:1.7;
  color:var(--cool)}

.foot{margin:44px 0 0;border-top:1px solid var(--line);padding-top:20px}
.sim-note,.disclaim{font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--cool);margin:0 0 10px;max-width:80ch}
.sim-note b{color:var(--hazard)}

/* ── play ─────────────────────────────────────────────────────────────── */
#play{position:fixed;inset:0;background:#000}
#game{width:100%;height:100%;outline:0;cursor:crosshair}

.hud{position:absolute;inset:0;pointer-events:none;padding:18px;display:flex;flex-direction:column}
.hud-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}

.depth .lbl,.carry .lbl,.plate-lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--cool);
  text-transform:uppercase;display:block;
}
.depth .val{
  font-family:var(--display);font-weight:900;font-size:64px;line-height:.85;
  color:var(--hazard);display:block;
}
.carry{text-align:center;flex:1}
.carry .net{
  font-family:var(--display);font-weight:900;
  font-size:clamp(46px,7vw,86px);line-height:.9;color:var(--gold);
  display:block;text-shadow:0 0 34px rgba(255,197,61,.35);
  font-variant-numeric:tabular-nums;
}
.carry .sub{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--cool);text-transform:uppercase}

.vitals{text-align:right;min-width:210px}
.hearts{display:flex;gap:5px;justify-content:flex-end;margin-bottom:10px}
.hearts i{width:16px;height:16px;background:var(--danger);display:block;
  clip-path:polygon(50% 100%,0 45%,0 18%,25% 0,50% 18%,75% 0,100% 18%,100% 45%)}
.hearts i.e{background:#2a2a2f}

/* the crane load indicator: what the carry is costing you, right now */
.plate{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line2);
  background:#0b0b0f;padding:7px 11px}
.plate .bar{width:104px;height:9px;background:#17171d;position:relative;overflow:hidden}
.plate .bar i{position:absolute;inset:0;width:100%;display:block;
  background:var(--stripe);transform-origin:left center;
  transform:scaleX(var(--fill-scale,0));transition:transform .18s linear}
.plate-val{font-family:var(--mono);font-size:14px;font-weight:700;min-width:44px;text-align:right}
.plate[data-level="ok"]   .plate-val{color:var(--green)}
.plate[data-level="warn"] .plate-val{color:var(--hazard)}
.plate[data-level="over"] {border-color:var(--danger);animation:pulse 1s infinite}
.plate[data-level="over"] .plate-val{color:var(--danger)}
@keyframes pulse{50%{background:#1a0d0c}}
.dead{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:var(--hivis)}

.items{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;
  gap:3px;align-items:flex-end}
.items li{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--hazard);
  border:1px solid rgba(255,176,0,.32);padding:2px 7px;background:rgba(255,176,0,.06)}

.toasts{list-style:none;margin:26px 0 0;padding:0;flex:1}
.toasts li{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:5px}

.prompt{
  align-self:center;margin-bottom:16px;padding:13px 26px;
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.12em;
  border:1px solid var(--line2);background:rgba(8,8,11,.9);
}
.prompt b{display:inline-block;background:var(--bone);color:#000;padding:1px 7px;margin-right:8px}
.prompt.cash{border-color:var(--green);color:var(--green)}
.prompt.cash b{background:var(--green)}
.prompt.descend{border-color:var(--hazard);color:var(--hazard)}
.prompt.descend b{background:var(--hazard)}
.prompt.locked{border-color:var(--line2);color:var(--cool)}

.hud-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
#map{width:132px;height:96px;border:1px solid var(--line);background:rgba(8,8,11,.8)}
.hint{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--cool);margin:0}
.hint b{color:var(--bone)}

/* touch controls: only mounted on a coarse pointer, so a desktop never sees them */
.touch{position:absolute;inset:0;pointer-events:none;z-index:3}
#play:not([data-touch]) .touch{display:none}
.tstick{position:absolute;top:0;left:0;width:0;height:0;opacity:0;transition:opacity .12s}
.tstick::before{content:"";position:absolute;left:-46px;top:-46px;width:92px;height:92px;
  border:1px solid rgba(255,176,0,.34);border-radius:50%;background:rgba(10,10,14,.32)}
.tstick i{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,176,0,.5);display:block}
.tbtns{position:absolute;right:14px;bottom:78px;display:flex;flex-direction:column;gap:10px;
  pointer-events:auto}
.tbtns button{
  width:78px;height:52px;border:1px solid var(--line2);background:rgba(10,10,14,.82);
  color:var(--bone);font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  touch-action:none;
}
.tbtns button.on{background:var(--hazard);color:#000;border-color:var(--hazard)}
#play[data-touch] .hint{display:none}
#game{touch-action:none}

.pause{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  background:rgba(4,4,7,.86);pointer-events:none}
.pause p{font-family:var(--display);font-weight:900;font-size:76px;margin:0;color:var(--hazard)}
.pause span{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--cool)}

/* ── result ───────────────────────────────────────────────────────────── */
/* No `display` here: an #id rule outranks `.screen{display:none}`, so declaring it
   at the base made the result screen render underneath the menu at all times. The
   shown-state rule below supplies the grid. */
#over{min-height:100%;place-content:center;padding:40px 24px}
.result{max-width:680px;text-align:center}
.kicker{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:.24em;margin:0}
.kicker.win{color:var(--green)}
.kicker.lose{color:var(--danger)}
.result .net{
  font-family:var(--display);font-weight:900;font-size:clamp(72px,15vw,148px);
  line-height:.9;display:block;margin:6px 0 18px;font-variant-numeric:tabular-nums;
}
.line{font-size:18px;color:#b3afa8;margin:0 auto 30px;max-width:56ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:0 0 24px}
.stats div{background:var(--void);padding:14px 8px}
.stats dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cool)}
.stats dd{font-family:var(--mono);font-size:20px;margin:4px 0 0;color:var(--bone)}
.seedline{font-family:var(--mono);font-size:12px;color:var(--cool);letter-spacing:.1em}
.seedline code{color:var(--bone)}
.actions{display:flex;gap:12px;margin-top:22px;align-items:stretch}
.actions .go{flex:2;margin:0;font-size:24px;padding:16px}
.ghost{border:1px solid var(--line2);padding:10px 16px;font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;color:var(--cool)}
.ghost:hover{border-color:var(--hazard);color:var(--hazard)}
.actions .ghost{flex:1}

/* Mobile HUD. At 390px the desktop layout collided: the load plate ran off the
   right edge, the carry label wrapped into the figure, and the lift prompt sat
   underneath the touch buttons - i.e. the two things you read under the most
   pressure were the two that broke. */
.l-short{display:none}
@media(max-width:560px){
  .l-long{display:none}
  .l-short{display:inline}
  .hud{padding:10px}
  .hud-top{gap:8px;align-items:flex-start}
  .depth .val{font-size:36px}
  .depth .lbl,.carry .lbl,.plate-lbl{font-size:9px;letter-spacing:.16em}
  .carry .net{font-size:38px}
  .carry .sub{font-size:9.5px;letter-spacing:.08em}
  .vitals{min-width:0}
  .hearts i{width:13px;height:13px}
  .hearts{margin-bottom:6px}
  .plate{padding:4px 6px;gap:6px}
  .plate .bar{width:46px;height:7px}
  .plate-val{font-size:12px;min-width:34px}
  .dead{font-size:9.5px;letter-spacing:.08em}
  .items li{font-size:9.5px;padding:1px 5px}
  .toasts{margin-top:14px}
  .toasts li{font-size:11px}
  /* keep the prompt clear of the DROP/DODGE/USE column */
  .prompt{align-self:flex-start;margin:0 0 12px;font-size:11px;padding:9px 12px;
    max-width:calc(100% - 104px);line-height:1.4}
  #map{width:88px;height:64px}
  .tbtns{bottom:14px;gap:8px}
  .tbtns button{width:66px;height:44px;font-size:10px}
  .hud-bot{align-items:flex-end}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}