/* ============================================================================
   $FLOOR — shared design system.
   The site is a construction site: asphalt panels with rivets, signal-orange
   controls, hazard tape, blueprint sheets, a posted permit. Three pixel faces:
   Jersey 10 for signage, Silkscreen for labels and buttons, Pixelify Sans for
   reading. No radii anywhere — steel and plywood do not have rounded corners.
   ========================================================================== */
:root {
  --asphalt: #1B1E22; --asphalt-2: #23272C; --asphalt-3: #2E3339; --asphalt-4: #3A4047;
  --steel-line: #444C55; --steel-hi: #5E6873; --rivet: #7A848F;
  --concrete: #CFCAC0; --concrete-2: #A9A499; --concrete-3: #8A857C;
  --paper: #F2EBDB; --paper-2: #E5DAC2; --paper-line: #C9BB9C; --ink: #1E2024; --ink-2: #4A4740;
  --signal: #FF6A1A; --signal-2: #D9530C; --signal-3: #A93E07;
  --hazard: #FFC21F; --hazard-2: #D99A0B;
  --sky: #7FB3DC; --sky-2: #D3E8F4;
  --bp: #1D4E89; --bp-2: #173F70; --bp-3: #12325A; --bp-line: rgba(214, 233, 255, .62); --bp-faint: rgba(214, 233, 255, .14);
  --ok: #5BC24C; --bad: #FF5040; --gold: #FFD23F;
  --text: #EEE8DA; --text-dim: #B3AC9F; --text-mute: #8C867B;
  --r0: #E9E4D8; --r1: #58C04A; --r2: #3C8FE6; --r3: #A464E8; --r4: #FFC21F; --r5: #FF5E1A;
  --f-sign: "Jersey 10", "Silkscreen", monospace;
  --f-ui: "Silkscreen", monospace;
  --f-body: "Pixelify Sans", system-ui, sans-serif;
  /* figures: Jersey 10 and Pixelify draw 5 like S ("975" reads "97S") — numbers
     are the game, so every figure that matters is set in Silkscreen */
  --f-num: "Silkscreen", monospace;
  --shadow: 0 4px 0 #0B0C0E;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--asphalt); color: var(--text);
  font-family: var(--f-body); font-size: 17px; line-height: 1.5;
  -webkit-text-size-adjust: 100%; text-rendering: optimizeSpeed;
}
img, canvas { max-width: 100%; }
canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
[hidden] { display: none !important; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* a figure inside running text: Silkscreen, sized down to sit on the line */
.n { font-family: var(--f-num); font-size: .8em; letter-spacing: 0; white-space: nowrap; }
a { color: var(--hazard); }
::selection { background: var(--hazard); color: var(--ink); }
:focus-visible { outline: 3px solid var(--hazard); outline-offset: 2px; }

/* ------------------------------------------------------------ typography */
.sign { font-family: var(--f-sign); font-weight: 400; letter-spacing: .01em; line-height: .95; }
.label { font-family: var(--f-ui); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.label.lg { font-size: 16px; }
.dim { color: var(--text-dim); } .mute { color: var(--text-mute); }
.r0 { color: var(--r0); } .r1 { color: var(--r1); } .r2 { color: var(--r2); } .r3 { color: var(--r3); } .r4 { color: var(--r4); } .r5 { color: var(--r5); }

/* --------------------------------------------------------------- controls */
.btn {
  --b: var(--signal); --b2: var(--signal-2); --b3: var(--signal-3); --t: var(--ink);
  font-family: var(--f-ui); font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--t); background: var(--b); border: 0; border-radius: 0; cursor: pointer;
  padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: inset 0 -4px 0 var(--b2), inset 0 2px 0 rgba(255,255,255,.28), 0 4px 0 var(--b3), 0 4px 0 2px #0B0C0E;
  text-decoration: none; position: relative; transform: translateY(0);
  transition: transform .08s ease-out, filter .15s; touch-action: manipulation; user-select: none;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--b2), 0 1px 0 var(--b3), 0 1px 0 2px #0B0C0E; }
.btn[disabled], .btn[aria-disabled="true"] { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn.hz { --b: var(--hazard); --b2: var(--hazard-2); --b3: #8E6405; }
.btn.steel { --b: var(--asphalt-4); --b2: #2A2F35; --b3: #15181B; --t: var(--text); box-shadow: inset 0 -4px 0 var(--b2), inset 0 2px 0 rgba(255,255,255,.08), 0 4px 0 var(--b3), 0 4px 0 2px #0B0C0E; }
.btn.ok { --b: var(--ok); --b2: #3D9632; --b3: #23631B; }
.btn.sm { font-size: 12px; padding: 8px 11px; min-height: 36px; }
.btn.lg { font-size: 18px; padding: 16px 22px; min-height: 56px; }
.btn.block { width: 100%; }
.btn .ic { width: 16px; height: 16px; flex: none; }

/* -------------------------------------------------------------- surfaces */
.panel {
  background: var(--asphalt-2); border: 2px solid var(--steel-line); position: relative;
  box-shadow: inset 0 0 0 2px #15181B, var(--shadow);
}
.panel.rivets::before, .panel.rivets::after {
  content: ""; position: absolute; width: 4px; height: 4px; background: var(--rivet); top: 6px; box-shadow: 0 1px 0 #0B0C0E;
}
.panel.rivets::before { left: 6px; } .panel.rivets::after { right: 6px; }
.phead {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 14px; background: var(--asphalt-3); border-bottom: 2px solid var(--steel-line);
}
.hazard-tape {
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 12px, var(--ink) 12px 24px);
  border-top: 2px solid #0B0C0E; border-bottom: 2px solid #0B0C0E;
}
.chip {
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; line-height: 1.2;
  background: var(--asphalt-4); color: var(--text); border: 2px solid var(--steel-line);
}
.chip.hz { background: var(--hazard); color: var(--ink); border-color: var(--hazard-2); }
.chip.sig { background: var(--signal); color: var(--ink); border-color: var(--signal-2); }
.chip.ok { background: #20361C; color: #9BE58E; border-color: #3D6B34; }
.dot { width: 8px; height: 8px; display: inline-block; background: var(--ok); box-shadow: 0 0 0 2px #0B0C0E; }
.dot.pulse { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

.meter { height: 12px; background: #101215; border: 2px solid var(--steel-line); position: relative; overflow: hidden; }
.meter > i { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--signal);
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 6px, transparent 6px 12px); transition: width .25s linear; }
.meter.ready > i { background-color: var(--gold); }

/* -------------------------------------------------------------- toasts */
.toasts { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 1000; display: grid; gap: 8px; width: min(440px, calc(100% - 24px)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--asphalt-3); border: 2px solid var(--steel-hi); padding: 11px 14px; font-size: 15px;
  box-shadow: 0 4px 0 #0B0C0E; display: flex; gap: 10px; align-items: center; animation: tin .22s ease-out; }
.toast.good { border-color: #3D6B34; } .toast.bad { border-color: #8A2A20; } .toast.gold { border-color: var(--hazard-2); }
.toast b { font-family: var(--f-ui); font-weight: 400; font-size: 12px; letter-spacing: .04em; }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- modal */
.scrim { position: fixed; inset: 0; z-index: 900; background: rgba(8, 9, 11, .74); display: grid; place-items: center; padding: 16px; animation: fade .18s ease-out; }
.modal { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}