/* ============================================================
   base.css — design tokens, reset, screen scaffolding
   ============================================================ */

:root{
  /* surfaces */
  --bg:#07080a;
  --panel:#12130f;
  --panel-2:#1a1b14;
  --panel-edge:#2a2b22;

  /* accents */
  --amber:#ffb020;
  --amber-dim:#8a5e12;
  --red:#e0392b;
  --red-dim:#6e1a12;
  --paper:#eef0e6;
  --paper-dim:#aab49c;
  --green-ok:#7fbf5f;

  /* night-vision feed */
  --nv:#5dff8f;
  --nv-dim:#1c5c34;

  /* entity identity colours */
  --ent-gunner:#5dff8f;
  --ent-shade:#b98cff;
  --ent-hollow:#ff8a3d;

  /* type */
  --font-mono:'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-pixel:'VT323', 'Share Tech Mono', monospace;
  --font-display:'Rye', Georgia, serif;

  /* layout */
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
  --controls-h:64px;
  --log-h:78px;
}

*, *::before, *::after{ box-sizing:border-box; }

/* The `hidden` attribute only carries UA-stylesheet weight, so any class
   rule that sets `display` silently defeats it. Several components here
   (dialogs, the overlay, menu buttons) are laid out with display:flex or
   display:block, so hidden has to be stated with authority or nothing
   marked hidden actually hides. */
[hidden]{ display:none !important; }

html, body{
  margin:0; padding:0;
  width:100%; height:100%;
  background:var(--bg);
  color:var(--paper);
  font-family:var(--font-mono);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}

body{ touch-action:manipulation; }

#app{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:100svh;
  overflow:hidden;
}

/* Screens are stacked; exactly one carries .active */
.screen{
  position:absolute; inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.screen.active{ display:flex; }

img{ max-width:100%; }

button{ font-family:inherit; color:inherit; }

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--nv);
  outline-offset:2px;
}

/* Screen-reader-only helper */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Film grain overlay used on several screens */
.grain{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background-image:repeating-linear-gradient(
    0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

.copyright{
  position:fixed;
  left:50%;
  bottom:calc(4px + var(--safe-b));
  transform:translateX(-50%);
  z-index:9999;
  margin:0;
  font:600 10px/1 var(--font-mono);
  letter-spacing:.08em;
  color:rgba(255,255,255,.68);
  text-shadow:0 1px 3px #000;
  pointer-events:none;
  white-space:nowrap;
}
/* the copyright would sit on top of the control bar during play */
body.playing .copyright{ display:none; }

.noscript{
  position:fixed; inset:0; display:grid; place-items:center;
  background:#07080a; color:#eef0e6; font-family:monospace; font-size:1rem;
  text-align:center; padding:24px; z-index:99999;
}

/* Landscape nudge for small phones held upright */
.rotate-hint{
  position:fixed; inset:0; z-index:9998;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; background:#05060a; text-align:center; color:var(--paper-dim);
}
.rotate-hint p{ margin:0; font-size:1rem; }
.rotate-hint p:first-child{
  font-size:3rem; color:var(--amber);
  animation:rotateNudge 2s ease-in-out infinite;
}
@keyframes rotateNudge{
  0%,100%{ transform:rotate(0deg); }
  50%{ transform:rotate(90deg); }
}

/* ---------- global motion opt-out ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.08s !important;
    scroll-behavior:auto !important;
  }
}
/* In-game "reduce flashing & shake". The first version only covered four
   selectors and missed most of what actually strobes: the death flash
   ran, the threat pulse throbbed, the power-out eyes blinked, the low
   battery number flashed, the failing light stuttered and the lost-signal
   static rolled. Everything that repeats fast is listed here. */
body.safe-mode .grain,
body.safe-mode .nv-noise,
body.safe-mode .title-glitch,
body.safe-mode .title-glitch-red{ animation:none !important; opacity:0 !important; }

body.safe-mode .redflash{ animation:none !important; opacity:0.2 !important; }
body.safe-mode .shake,
body.safe-mode .glitch,
body.safe-mode .jumpscare-figure,
body.safe-mode .light-beam.flicker,
body.safe-mode .cam-frame.dropout .cam-static,
body.safe-mode .power-out-eyes::before,
body.safe-mode .power-out-eyes::after,
body.safe-mode .hud-power.critical .pnum,
body.safe-mode .rotate-hint p:first-child{ animation:none !important; }
body.safe-mode .hud-power.critical .pnum{ opacity:1 !important; }
body.safe-mode .power-out-eyes::before,
body.safe-mode .power-out-eyes::after{ opacity:1 !important; }