/* 1940s survival-horror presentation pass — grain, vignette, paper, type. */

/* ---------- 1940s survival-horror presentation pass ---------- */
/* Shared UI tokens (paper/ink brand). Space is a 4px ladder; ease-out matches
   opening.css cinematic bars; durations keep press feedback snappy and page
   enters deliberate. Last :root writer for these names — other sheets may seed. */
:root{
  --space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --dur-fast:.12s;--dur-med:.28s;
  /* Do not self-assign a custom property to var() of the same name — that
     cycle is guaranteed-invalid and blanks every downstream rule that uses
     the name. Canonical values live in tokens.css. --paper is a cream alias,
     not a cycle. */
  --paper:var(--cream-700);
  --ash:var(--tone-827d72);--soot:var(--tone-070706);--ink:var(--ink-panel);
  --edge:rgba(190,170,135,.28);--edge-hot:rgba(212,91,80,.72);
  --focus-ring:var(--amber);
}
body{font-family:var(--font-ui);background:var(--steel-850)}
/* canvas grade is applied by Quality.apply(), not here — a canvas-wide CSS
   filter costs a full-framebuffer pass every frame */
body:before{content:"";position:fixed;inset:0;z-index:39;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.13) 4px),
    linear-gradient(102deg,transparent 0 46%,rgba(98,67,35,.1) 48%,transparent 52%),
    radial-gradient(ellipse at 50% 48%,transparent 48%,rgba(43,23,8,.34) 100%)}
#vignette{background:
  radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.42) 70%,rgba(0,0,0,.94) 100%),
  linear-gradient(90deg,rgba(42,19,7,.18),transparent 28%,transparent 72%,rgba(31,16,5,.22))}
#chroma{opacity:.025}
#grain{opacity:.09}

/* Centred. The layout this used to serve was a left-aligned title column;
   the front end is now a set of centred pages. */
.screen{align-items:center;justify-content:center}
#title-screen{background:var(--steel-850)}
/* The wash used to lean hard left — a 90deg ramp from .9 black to clear at 63%
   and a light pool at 25% — because the title once sat in the left third of the
   screen. It is centred now, and an off-centre pool of light under centred
   content is precisely what reads as "not quite centred", whatever the boxes
   measure. Both stops are symmetric about 50%. */
#title-screen:before,.screen:not(#title-screen):before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.46) 18%,rgba(0,0,0,.06) 44%,rgba(0,0,0,.06) 56%,rgba(0,0,0,.46) 82%,rgba(0,0,0,.82) 100%),
    radial-gradient(ellipse at 50% 46%,transparent 0 22%,rgba(0,0,0,.46) 70%)}
/* The "ELLIS STATION // NO SIGNAL" corner ticker used to live here on every
   screen. Cut at the user's request — it read as clutter, not atmosphere. */
#title-bg{opacity:.88;filter:saturate(.72) sepia(.08) contrast(1.08);background:url('../assets/img/menu_bg.jpg') center/cover no-repeat}
#title-grad{background:
  linear-gradient(180deg,rgba(0,0,0,.22),transparent 45%,rgba(0,0,0,.72)),
  linear-gradient(90deg,rgba(1,2,2,.82),rgba(3,4,4,.34) 26%,transparent 46%,transparent 54%,rgba(3,4,4,.34) 74%,rgba(1,2,2,.82))}
/* THE DOSSIER STAMP — see the markup for why the old wordmark went.
   Type: a humanist display face for the title rather than the genre's
   condensed horror slab, oxidised copper for the accent word, and a stamped
   file designation above it. The blood smear is replaced by a rule and a
   lantern glyph. */
h1.game-title{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.14em;
  width:max-content;max-width:92vw;
  font-family:var(--font-display);
  filter:contrast(1.05)}
.gt-main{
  display:block;font-size:clamp(44px,6.6vw,96px);font-weight:800;line-height:.9;
  letter-spacing:.02em;text-transform:uppercase;color:var(--cream-700);
  text-shadow:2px 3px 0 var(--ink-panel),5px 7px 8px rgba(0,0,0,.85)}
.gt-rot{color:var(--copper);text-shadow:0 0 18px rgba(184,115,69,.28),2px 3px 0 var(--tone-1b0a06)}
/* The lantern: a small ring on a hook, drawn rather than shipped, and the one
   piece of brand furniture the title carries. */
.subtitle{margin-top:27px;color:var(--paper-mute);font:italic 12px/1 var(--font-ui);letter-spacing:.37em;text-shadow:1px 2px var(--ink)}
/* U01: do NOT restyle .mbtn here — theme loads after menu/screens and used to
   force a transparent skew label that killed the paper slab. Width clamps only.
   Primary red lives on #btn-deploy / .mbtn.go in menu.css. */
.menu-col{align-items:center;gap:var(--space-2, 8px);margin-top:var(--space-4, 24px)}
.diff-row{gap:var(--space-2, 8px);margin:9px 0 0 19px}
.diff-btn{padding:6px 11px;min-height:44px;border:1px solid rgba(148,140,120,.2);border-radius:0;color:var(--tone-6e6c64);background:rgba(0,0,0,.25);
  font:700 10px/1 var(--font-mono);letter-spacing:.1em;
  transition:color var(--dur-fast, .12s),border-color var(--dur-fast, .12s),background var(--dur-fast, .12s)}
.diff-btn:hover{color:var(--cream-900);border-color:rgba(180,160,130,.42)}
.diff-btn:focus-visible{outline:1px solid var(--focus-ring, var(--amber));outline-offset:2px;color:var(--cream-900)}
.diff-btn:active{filter:brightness(.9)}
.diff-btn.sel{color:var(--tone-d4c8ae);background:rgba(104,18,12,.45);border-color:var(--tone-6e241c);box-shadow:inset 3px 0 var(--tone-9e1b12)}
.best-line{margin-top:18px;color:var(--paper-faint);font:700 10px/1 var(--font-mono);letter-spacing:.12em}
.best-line b{color:var(--tone-b8ad96);font-size:11px}

.screen:not(#title-screen){align-items:center;background:rgba(2,3,3,.66);backdrop-filter:blur(2px) saturate(.6)}
.screen:not(#title-screen):before{background:radial-gradient(ellipse at center,rgba(17,17,14,.4),rgba(0,0,0,.82))}
.panel{position:relative;width:min(570px,90vw);padding:clamp(28px,5vw,42px) clamp(22px,6vw,54px) clamp(24px,4vw,38px);border:0;border-radius:0;text-align:left;
  background:linear-gradient(108deg,rgba(19,19,16,.94),rgba(7,8,7,.96));box-shadow:0 24px 90px var(--ink),inset 0 1px rgba(219,202,165,.12);
  clip-path:polygon(1% 0,99% 1%,100% 96%,97% 100%,2% 99%,0 4%)}
.panel:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--blood, var(--tone-71120d));box-shadow:2px 0 15px rgba(115,18,13,.3)}
.panel h2{color:var(--paper, var(--tone-cfc7b4));font-size:clamp(36px,5vw,58px);letter-spacing:.05em;text-shadow:2px 3px var(--ink);transform:scaleX(.9);transform-origin:center}
.panel h2.red{color:var(--blood-hot, var(--tone-94170f));text-shadow:0 0 18px rgba(110,13,8,.55),2px 3px var(--ink)}
.panel .subtitle{text-align:center;color:var(--paper-dim, var(--paper-mute))}
.panel .stats{margin:var(--space-4, 24px) 0 var(--space-2, 8px);gap:9px 30px;border-top:1px solid rgba(200,184,151,.13);border-bottom:1px solid rgba(200,184,151,.1);padding:var(--space-3, 15px) 0}
.panel .stats span{color:var(--tone-6a6660);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em}
.panel .stats b{color:var(--tone-d0c6ad);font-family:var(--font-mono)}
.panel .menu-col{margin-top:var(--space-3, 20px);gap:var(--space-2, 8px)}
.slider-row{justify-content:center;color:var(--paper-faint);font-family:var(--font-mono)}
.slider-row input{accent-color:var(--tone-81150f)}

/* The field HUD used to be themed from here, in a block that also set its
   positions — and hud-cod.css, hud-waw.css and hud-responsive.css each set
   them again. It has one owner now: hud-layout.css for geometry, hud-theme.css
   for appearance. Nothing about the HUD belongs in this file. */

/* Narrow windows (phone-width browser, small desktop window). The is-touch
   rules in touch.css cover phones, but a narrow NON-touch window got the same
   desktop dialog: 54px side padding ate a third of a 360px window and the
   310px menu buttons overflowed. Same reflow, keyed on width, not on touch. */
@media (max-width:560px){
  .panel{padding:22px 18px;width:min(570px,94vw)}
  .panel h2{font-size:clamp(24px,7vw,36px)}
  /* Width only — never reintroduce a theme mbtn skin (U01). */
  .mbtn{min-width:0;width:min(310px,100%);max-width:100%}
  .mbtn.small{width:min(250px,100%);min-width:0}
  #btn-deploy{min-width:0;width:100%}
  .slider-row input{width:100%;max-width:170px}
  /* the fixed floating card cannot fit a window this narrow — put it in flow */
  }