:root {
  --paper: #f1ead8;
  --paper-deep: #ddd3bb;
  --ink: #1c2b2b;
  --ink-2: #344542;
  --ink-3: #65726a;
  --graphite: #252a27;
  --graphite-2: #323832;
  --foam: #3c4b35;
  --foam-deep: #263023;
  --orange: #ee6b2f;
  --orange-deep: #a93d1e;
  --cobalt: #287f9c;
  --moss: #73854b;
  --steel: #a7ada7;
  --cream: #fff8e8;
  --line: rgba(28,43,43,.2);
  --line-soft: rgba(28,43,43,.1);
  --display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(28,43,43,.035) 80px),
    var(--paper);
  font-family: var(--mono);
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; }

.topbar {
  height: 72px;
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  padding: 0 clamp(18px,5vw,78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: var(--cream);
  background: rgba(28,43,43,.91);
  backdrop-filter: blur(14px);
}
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; font:700 14px/1 var(--display); letter-spacing:.1em; }
.brand strong { color:var(--orange); }
.case-mark { width:31px; height:24px; position:relative; border:2px solid var(--orange); border-radius:4px; }
.case-mark::before { content:""; position:absolute; width:13px; height:5px; left:7px; top:-8px; border:2px solid var(--orange); border-bottom:0; border-radius:3px 3px 0 0; }
.case-mark i { position:absolute; inset:5px; border:1px solid rgba(255,255,255,.5); }
.topbar nav { display:flex; align-items:center; gap:28px; font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.topbar nav a { color:#d9dccf; text-decoration:none; }
.topbar nav a:hover { color:var(--orange); }
.unit-code { color:#a9bd99; }

.hero {
  min-height:min(900px,100vh);
  padding:140px clamp(22px,6vw,96px) 80px;
  display:flex;
  align-items:center;
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(241,234,216,.97),rgba(241,234,216,.87) 33%,rgba(241,234,216,.12) 67%),
    linear-gradient(0deg,var(--paper),transparent 23%),
    url("../assets/images/packout-case.png") 70% center/cover no-repeat;
}
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(28,43,43,.025) 5px); }
.hero-copy { width:100%; max-width:680px; }
.eyebrow { margin:0; color:var(--orange-deep); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3 { margin:0; font-family:var(--display); text-transform:uppercase; }
h1 { margin:18px 0 26px; font-size:clamp(64px,8vw,126px); line-height:.78; letter-spacing:-.04em; }
h1 em { color:transparent; font-style:normal; -webkit-text-stroke:2px var(--orange); }
.hero-copy > p:not(.eyebrow) { max-width:570px; color:var(--ink-2); font-size:clamp(13px,1.3vw,16px); line-height:1.8; }
.hero-button { display:inline-flex; align-items:center; gap:44px; margin-top:28px; padding:16px 18px; border:1px solid var(--orange); color:var(--cream); background:var(--orange); text-decoration:none; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hero-button:hover { color:var(--orange); background:transparent; }
.hero-tag { position:absolute; right:4vw; bottom:70px; width:124px; aspect-ratio:1; display:grid; place-content:center; text-align:center; border:2px dashed rgba(28,43,43,.4); border-radius:50%; color:rgba(28,43,43,.65); transform:rotate(-8deg); }
.hero-tag span,.hero-tag small { font-size:8px; letter-spacing:.15em; }
.hero-tag strong { font:55px/.8 var(--display); }

.game-section { max-width:1500px; margin:auto; padding:110px clamp(8px,4vw,60px); }
.section-heading { max-width:1320px; margin:0 auto 38px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; }
.section-heading h2,.briefing h2 { margin-top:10px; font-size:clamp(44px,6vw,82px); line-height:.88; }
.section-heading > p { max-width:600px; color:var(--ink-3); font-size:11px; line-height:1.8; }

.station {
  max-width:1320px;
  margin:auto;
  position:relative;
  padding:18px;
  border:2px solid #151b19;
  border-radius:14px;
  color:var(--cream);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 6px),
    var(--graphite);
  box-shadow:inset 0 0 0 4px #151a17,inset 0 0 0 6px #555d55,0 35px 70px rgba(28,43,43,.24);
  overflow:hidden;
}
.station-header { min-height:70px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:30px; padding:8px 12px 20px; }
.station-id span,.station-id strong { display:block; }
.station-id span { color:var(--orange); font:700 11px var(--display); letter-spacing:.12em; }
.station-id strong { color:#7f8980; font-size:8px; letter-spacing:.1em; }
.mission-strip { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:12px; color:#7f8980; font-size:8px; letter-spacing:.12em; }
.mission-strip > strong { color:#bcc5b5; text-align:right; }
.mission-dots { display:flex; gap:5px; }
.mission-dots i { width:20px; height:6px; border:1px solid #667067; }
.mission-dots i.is-complete { background:var(--orange); border-color:var(--orange); }
.mission-dots i.is-current { background:var(--cobalt); border-color:var(--cobalt); }
.seal-button { min-width:112px; height:42px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid #0d100e; border-radius:4px; color:#d7ddd1; background:#343b35; box-shadow:inset 0 0 0 2px #4d554d,0 3px #101411; cursor:pointer; font-size:8px; letter-spacing:.1em; }
.seal-button i { width:9px; height:9px; border-radius:50%; background:#592d23; }
.station.is-running .seal-button i { background:var(--orange); box-shadow:0 0 9px var(--orange); }

.station-grid { display:grid; grid-template-columns:230px minmax(420px,1fr) 260px; gap:14px; align-items:start; }
.manifest-panel,.tray-panel { min-width:0; padding:16px; border-radius:6px; color:var(--ink); background:linear-gradient(145deg,var(--paper),var(--paper-deep)); box-shadow:inset 0 0 0 1px #fff9e9,inset 0 0 18px rgba(28,43,43,.15); }
.panel-title { display:flex; align-items:end; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--line); }
.panel-title span { color:var(--orange-deep); font-size:8px; letter-spacing:.12em; }
.panel-title strong { font:28px/.9 var(--display); }
.readouts { margin:14px 0 0; }
.readouts div { display:flex; align-items:end; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.readouts dt { color:var(--ink-3); font-size:8px; letter-spacing:.12em; }
.readouts dd { margin:0; font:24px/.9 var(--display); }
.port-readout { padding:17px 0; border-bottom:1px solid var(--line); }
.port-readout > span { font-size:8px; letter-spacing:.12em; }
.port-readout strong { display:block; margin:5px 0 10px; font:40px/.9 var(--display); }
.port-readout strong b { color:var(--cobalt); }
.port-readout strong i { font-style:normal; color:var(--ink-3); }
.port-meter { height:7px; border:1px solid var(--line); background:#c7c0aa; }
.port-meter i { display:block; width:0; height:100%; background:var(--cobalt); transition:width .2s; }
.move-log { min-height:100px; padding:16px 0; }
.move-log span,.selection-note span { color:var(--ink-3); font-size:8px; letter-spacing:.12em; }
.move-log p { margin:8px 0 0; font-size:9px; line-height:1.6; }
.case-controls { display:grid; gap:7px; }
.case-controls button { min-height:42px; display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.24); cursor:pointer; font-size:9px; }
.case-controls button:hover { border-color:var(--orange); }
.case-controls button span { color:var(--orange-deep); font-size:18px; }
kbd { margin-left:auto; padding:3px 6px; border:1px solid var(--line); border-radius:2px; background:rgba(255,255,255,.35); font:8px var(--mono); }

.case-wrap { min-width:0; }
.case-lid,.case-base { position:relative; border:10px solid #171c19; border-radius:12px; background:var(--graphite-2); box-shadow:inset 0 0 0 3px #555e56,0 0 0 1px #0a0d0b; }
.case-lid { min-height:190px; margin-bottom:11px; padding:14px; transform-origin:bottom; }
.lid-map { min-height:132px; position:relative; overflow:hidden; border:1px solid #4f5950; background:
  radial-gradient(circle at center,rgba(40,127,156,.12),transparent 58%),
  #202822;
}
.lid-map svg { position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); }
.lid-map path,.lid-map circle { fill:none; stroke:#65746a; stroke-width:2; }
.lid-map path:first-child { fill:rgba(115,133,75,var(--ready,.08)); transition:fill .3s; }
.lid-grid { position:absolute; inset:0; opacity:.12; background:linear-gradient(90deg,transparent 49.5%,#b7c4b8 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,#b7c4b8 50%,transparent 50.5%); background-size:28px 28px; }
.lid-copy { display:flex; justify-content:space-between; margin-top:8px; color:#7a887d; font-size:7px; letter-spacing:.13em; }
.lid-copy strong { color:var(--orange); }
.case-base { padding:18px; }
.foam-grid { width:min(100%,640px); aspect-ratio:1; margin:auto; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); gap:4px; padding:7px; border-radius:6px; background:
  radial-gradient(circle at 30% 30%,rgba(255,255,255,.03),transparent 30%),
  var(--foam-deep);
  box-shadow:inset 0 0 24px rgba(0,0,0,.5);
}
.foam-cell { min-width:0; min-height:0; position:relative; display:grid; place-items:center; border:1px solid rgba(255,255,255,.04); background:rgba(115,133,75,.26); cursor:pointer; transition:transform .1s,background .15s,border-color .15s; }
.foam-cell:hover { border-color:rgba(255,255,255,.22); }
.foam-cell.is-port::before { content:""; width:28%; aspect-ratio:1; border:2px solid var(--cobalt); border-radius:50%; background:rgba(40,127,156,.24); box-shadow:0 0 0 3px rgba(40,127,156,.1); }
.foam-cell.is-obstacle { cursor:not-allowed; background:repeating-linear-gradient(45deg,#202721 0 5px,#303930 5px 10px); }
.foam-cell.is-preview-valid { background:rgba(238,107,47,.42); border-color:rgba(255,255,255,.5); }
.foam-cell.is-preview-invalid { background:rgba(169,61,30,.62); }
.foam-cell.is-filled { color:#fff; border-color:rgba(255,255,255,.2); box-shadow:inset 0 0 0 2px rgba(0,0,0,.15); }
.foam-cell.is-filled::after { content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.15); }
.foam-cell.is-filled.is-port::before { position:absolute; z-index:2; width:18%; right:5px; top:5px; border-color:#c4efff; background:var(--cobalt); box-shadow:0 0 8px var(--cobalt); }
.cell-label { position:relative; z-index:3; font:700 clamp(7px,1vw,11px) var(--mono); letter-spacing:.05em; pointer-events:none; }
.case-hardware { position:absolute; inset:6px; pointer-events:none; }
.case-hardware i { position:absolute; width:8px;height:8px;border-radius:50%;background:#111613;box-shadow:inset 1px 1px #879087; }
.case-hardware i:nth-child(1){left:0;top:0}.case-hardware i:nth-child(2){right:0;top:0}.case-hardware i:nth-child(3){left:0;bottom:0}.case-hardware i:nth-child(4){right:0;bottom:0}

.piece-tray { display:grid; gap:8px; margin-top:14px; }
.piece-card { min-height:68px; display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:9px; padding:8px; border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.23); cursor:pointer; text-align:left; }
.piece-card:hover { border-color:var(--orange); }
.piece-card.is-selected { border-color:var(--orange); box-shadow:inset 4px 0 var(--orange); }
.piece-card.is-packed { opacity:.35; pointer-events:none; }
.mini-shape { width:68px; height:48px; display:grid; gap:2px; }
.mini-shape i { background:var(--piece-color); border:1px solid rgba(0,0,0,.13); }
.piece-card strong { display:block; font:17px/.9 var(--display); }
.piece-card small { display:block; margin-top:4px; color:var(--ink-3); font-size:7px; }
.piece-card > b { color:var(--orange-deep); font-size:8px; }
.selection-note { margin-top:15px; padding-top:14px; border-top:1px solid var(--line); }
.selection-note strong { display:block; margin-top:7px; font:21px var(--display); }
.selection-note p { margin:5px 0 0; color:var(--ink-3); font-size:8px; line-height:1.5; }
.station-footer { display:flex; justify-content:space-between; gap:20px; padding:17px 10px 0; color:#6f7971; font-size:7px; letter-spacing:.1em; }
.station-footer p { margin:0; color:#a6afa3; text-align:center; }
.station.is-shaking { animation:caseShake .24s linear; }

.game-overlay { position:absolute; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(27,39,37,.76); backdrop-filter:blur(7px); opacity:0; visibility:hidden; transition:.28s; }
.game-overlay.is-visible { opacity:1; visibility:visible; }
.brief-card { width:min(100%,560px); padding:clamp(28px,5vw,54px); border:1px solid rgba(28,43,43,.25); color:var(--ink); background:
  linear-gradient(90deg,transparent 0 47%,rgba(40,127,156,.06) 47% 53%,transparent 53%),
  var(--paper);
  box-shadow:12px 12px 0 rgba(0,0,0,.2);
  text-align:center;
}
.brief-card h3 { margin:13px 0 18px; font-size:clamp(40px,5vw,64px); line-height:.86; }
.brief-card > p:not(.eyebrow) { color:var(--ink-3); font-size:10px; line-height:1.7; }
.brief-card button { margin:12px 0 8px; padding:15px 22px; border:1px solid var(--orange); color:#fff; background:var(--orange); cursor:pointer; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.brief-card button:hover { color:var(--orange); background:transparent; }
.brief-card small { display:block; color:#98927f; font-size:7px; }

.briefing { max-width:1240px; margin:auto; padding:65px clamp(22px,5vw,70px) 130px; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(50px,8vw,120px); }
.briefing ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.briefing li { display:grid; grid-template-columns:48px 1fr; gap:12px; padding:24px 0; border-bottom:1px solid var(--line); }
.briefing li > span { color:var(--orange); font-size:9px; }
.briefing h3 { font-size:24px; }
.briefing li p { margin:8px 0 0; color:var(--ink-3); font-size:9px; line-height:1.7; }
.dispatch-note { max-width:1080px; margin:0 auto 130px; padding:54px clamp(28px,6vw,72px); position:relative; overflow:hidden; border:1px solid rgba(28,43,43,.2); background:var(--paper-deep); }
.dispatch-note .stamp { position:absolute; right:20px; top:20px; padding:8px 10px; border:2px solid rgba(169,61,30,.26); color:rgba(169,61,30,.32); font:700 22px var(--display); transform:rotate(9deg); }
.dispatch-note blockquote { max-width:760px; margin:0; font:clamp(28px,4vw,48px)/1.1 var(--display); text-transform:uppercase; }
.dispatch-note p { margin:22px 0 0; color:var(--orange-deep); font-size:8px; }

footer { padding:38px clamp(20px,5vw,76px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; border-top:1px solid var(--line); }
footer .case-mark { border-color:var(--ink); } footer .case-mark::before { border-color:var(--ink); } footer .case-mark i { border-color:var(--ink-3); }
footer > p { color:var(--ink-3); font-size:7px; text-align:center; }
footer nav { justify-self:end; display:flex; gap:18px; }
footer nav a { color:var(--ink-3); font-size:8px; text-decoration:none; text-transform:uppercase; }

.legal-main { min-height:100vh; padding:150px 22px 90px; }
.legal-copy { max-width:760px; margin:auto; }
.legal-copy h1 { font-size:clamp(54px,8vw,96px); }
.legal-copy h2 { margin-top:38px; font-size:28px; }
.legal-copy p,.legal-copy li { color:var(--ink-3); font-size:11px; line-height:1.8; }
.back-link { display:inline-block; margin-bottom:34px; color:var(--orange-deep); font-size:9px; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }

@keyframes caseShake { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-2px)} }
@media (max-width:1050px) {
  .station-grid { grid-template-columns:210px minmax(390px,1fr); }
  .tray-panel { grid-column:1/-1; }
  .piece-tray { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px) {
  .topbar nav a { display:none; }
  .hero { min-height:760px; background-position:61% center; }
  .section-heading,.briefing { grid-template-columns:1fr; }
  .station-grid { grid-template-columns:1fr; }
  .manifest-panel { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
  .manifest-panel .panel-title { grid-column:1/-1; }
  .case-wrap { grid-row:2; }
  .tray-panel { grid-column:auto; }
  .piece-tray { grid-template-columns:repeat(2,1fr); }
  .station-header { grid-template-columns:1fr auto; }
  .mission-strip { grid-column:1/-1; grid-row:2; }
  .readouts,.port-readout { grid-column:auto; }
  .move-log,.case-controls { grid-column:1/-1; }
  footer { grid-template-columns:1fr; text-align:center; }
  footer nav { justify-self:center; }
}
@media (max-width:520px) {
  .topbar { height:62px; padding-inline:15px; }
  .unit-code { display:none; }
  .hero { min-height:700px; padding:112px 20px 58px; background-position:66% center; }
  .hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(241,234,216,.9),rgba(241,234,216,.35)); }
  h1 { font-size:60px; }
  .hero-tag { display:none; }
  .game-section { width:100%; max-width:100vw; padding:74px 6px; overflow:hidden; }
  .section-heading { padding-inline:14px; }
  .station { width:100%; min-width:0; padding:11px; border-radius:10px; }
  .station-id span { font-size:9px; }
  .seal-button { min-width:98px; }
  .manifest-panel { grid-template-columns:1fr 1fr; padding:12px; }
  .readouts dd { font-size:20px; }
  .case-lid,.case-base { border-width:7px; }
  .case-lid { min-height:150px; }
  .case-base { padding:10px; }
  .foam-grid { gap:3px; padding:5px; }
  .piece-tray { grid-template-columns:1fr; }
  .piece-card { grid-template-columns:72px 1fr auto; }
  .station-footer span { display:none; }
  .station-footer { justify-content:center; }
  .game-overlay { padding:10px; }
  .brief-card { width:calc(100vw - 44px); padding:28px 16px; }
  .brief-card h3 { font-size:34px; }
  .briefing { padding-bottom:90px; }
  .dispatch-note { margin:0 14px 90px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; }
}