/* Operation Harmattan — base: palette, fonts, layout. The "declassified file"
   look lives in screens.css; HUD in hud.css. */

@font-face {
  font-family: 'Special Elite';
  src: url('../vendor/fonts/SpecialElite.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Black Ops One';
  src: url('../vendor/fonts/BlackOpsOne.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* Harmattan palette — desaturated, warm, dusty (Bible §8.1).
     SOURCE OF TRUTH IS src/ui/theme.js: installTheme() republishes these at
     boot and wins. This block is only the first-paint copy for the frame
     before modules run — change a colour there, then mirror it here.
     --accent is UI chrome ONLY (never a person's status); --warn-amber,
     --hostile-red and --civilian-blue are the reticle's PID states. */
  --base: #14110c;
  --base-rgb: 20, 17, 12;
  --haze: #c8a96a;
  --dust: #b89a5e;
  --sand: #d8c39a;
  --ink: #1c1913;
  --paper: #e8e0cc;
  --paper-dim: #d6cdb4;
  --accent: #e8b43c;
  --accent-rgb: 232, 180, 60;
  --stamp-red: #8d2f23;
  --ok-green: #4c5c3c;
  --warn-ink: #8a5a12;
  --warn-amber: #b5822e;
  --hostile-red: #a03328;
  --civilian-blue: #3d5a72;
  --type: 'Special Elite', 'Courier New', monospace;
  --display: 'Black Ops One', 'Arial Black', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--ink); }
body { font-family: var(--type); color: var(--paper); -webkit-user-select: none; user-select: none; touch-action: none; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* `safe center`: when a screen's content is taller than the viewport (200%
     text, a landscape phone), plain `center` overflows EQUALLY top and bottom
     and the top half is unreachable by any scroll. Browsers without `safe`
     keep the plain value above. */
  justify-content: safe center;
  background-color: rgba(var(--base-rgb), 0.86);
  /* the notch/home-indicator insets on phones; 24px everywhere else */
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px))
           max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
}
/* dark tarp weave behind modal screens (skipped when a screen is transparent
   or carries a photo backdrop) */
.screen:not(.transparent):not(.has-photo):not(.catastrophe) {
  background-image: var(--tex-dark);
}
.screen.transparent { background: transparent; pointer-events: none; }
.screen.transparent button, .screen.transparent .btn { pointer-events: auto; }

/* Machined steel, not a bordered rectangle. A 1px outline on transparent is
   the one thing in this UI that read as "web page" rather than as equipment;
   the ops-room plate language already used by .mcard/.menu-box is the house
   idiom, so buttons speak it too. The lit top edge + dark bottom is what sells
   a physical key — it must invert on :active or the press has no weight. */
button, .btn {
  font-family: var(--type); font-size: 16px; letter-spacing: 0.06em;
  color: var(--sand);
  background-color: #43403a;
  background-image: linear-gradient(rgba(255, 250, 235, 0.10), rgba(0, 0, 0, 0.20)), var(--tex-metal);
  border: 1px solid #22201b;
  border-top-color: rgba(255, 250, 235, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.22),
    inset 0 -3px 9px rgba(0, 0, 0, 0.42),
    0 3px 9px rgba(0, 0, 0, 0.45);
  padding: 10px 22px; margin: 6px;
  cursor: pointer; text-transform: uppercase;
  transition: transform .07s, filter .12s;
}
button:hover, .btn:hover { filter: brightness(1.14); }
button:active, .btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 250, 235, 0.10);
}
button:disabled { opacity: 0.35; cursor: default; }
/* The primary key's legend is the amber — yellow stencil on black steel, the
   one place per plate the eye should land first. 5.4:1 on the #43403a key. */
button.primary {
  color: var(--accent);
  border-top-color: rgba(255, 244, 214, 0.42);
  background-image: linear-gradient(rgba(255, 246, 220, 0.16), rgba(0, 0, 0, 0.22)), var(--tex-metal);
}

h1 { font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; }
/* rem, not px: fine print on the paper sheets scales with the TEXT SIZE
   setting (css/a11y.css sets the root size). 12px at the default root. */
.small { font-size: .75rem; opacity: 0.75; line-height: 1.5; }