/* ============================================================
   screens.css — boot, title, intro, night card, end screens
   ============================================================ */

/* ---------------- BOOT / PRELOAD ---------------- */
#boot-screen{ background:#000; }
.boot-inner{ width:min(340px, 74vw); text-align:center; }
.boot-brand{
  font-family:var(--font-mono);
  font-size:0.8rem; letter-spacing:0.42em;
  color:var(--paper-dim); margin:0 0 18px 0.42em;
}
.boot-bar{
  height:3px; width:100%;
  background:#1a1c16; overflow:hidden;
}
.boot-bar span{
  display:block; height:100%; width:0%;
  background:var(--amber);
  transition:width 0.25s ease;
}
.boot-status{
  margin:12px 0 0;
  font-size:0.72rem; letter-spacing:0.1em;
  color:#8a927e; min-height:1.2em;
}

/* ---------------- TITLE ---------------- */
#title-screen{ background:#000; }

/* The artwork is a fixed-ratio still. It is contained above a menu band
   rather than filling the screen: at full height the word "Gunners" runs
   straight through where the menu sits, and the original build had the
   same collision. */
#title-screen{
  --menu-band:clamp(116px, 20vh, 162px);
  justify-content:flex-start;
}

.title-stage{
  width:100%;
  height:calc(100% - var(--menu-band));
  min-height:0;
  display:flex; align-items:center; justify-content:center;
}

/* The frame shrink-wraps whatever the still renders at, so the glitch
   layers (inset:0 on top of it) line up with the picture rather than with
   the letterbox around it.
   The still is capped with *definite* lengths on purpose: a percentage
   max-height against a shrink-to-fit parent is indeterminate, and left as
   `max-height:100%` the 1000x750 art simply rendered at native size and
   ran straight through the menu band underneath it. */
.title-frame{
  position:relative;
  line-height:0;
}
.title-art{
  display:block;
  /* Whichever of the two limits binds, the width is a definite length and
     `height:auto` keeps the 4:3. Capping with max-width/max-height instead
     meant the 1000x750 asset never grew past native size and left 220px
     bars on a desktop display. */
  width:min(100vw, calc((100dvh - var(--menu-band)) * 4 / 3));
  height:auto;
  background:#000;
}
.title-glitch,
.title-glitch-red{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:fill;
}

/* The two glitch layers are the same still, clipped to the right-hand
   figure and jittered, so he flickers without a second asset. */
.title-glitch,
.title-glitch-red{ clip-path:inset(0 0 0 54%); pointer-events:none; }
.title-glitch{ animation:glitchJitter 3.4s infinite steps(1); }
.title-glitch-red{
  animation:glitchJitterRed 3.4s infinite steps(1);
  mix-blend-mode:screen;
  filter:sepia(1) saturate(6) hue-rotate(-40deg) brightness(0.9);
  opacity:0;
}
@keyframes glitchJitter{
  0%,100%{ transform:translate(0,0); opacity:0; clip-path:inset(0 0 0 54%); }
  34%{ opacity:0; }
  35%{ opacity:1; transform:translate(-5px,0); clip-path:inset(8% 0 46% 54%); }
  38%{ transform:translate(4px,-2px); clip-path:inset(58% 0 6% 57%); }
  41%{ transform:translate(-2px,1px); clip-path:inset(20% 0 30% 55%); }
  44%{ opacity:0; }
  68%{ opacity:0; }
  69%{ opacity:1; transform:translate(3px,0); clip-path:inset(35% 0 12% 56%); }
  72%{ transform:translate(-4px,2px); clip-path:inset(5% 0 55% 54%); }
  75%{ opacity:0; }
}
@keyframes glitchJitterRed{
  0%,100%{ opacity:0; transform:translate(0,0); }
  35%{ opacity:0.5; transform:translate(-9px,0); }
  38%{ opacity:0.35; transform:translate(7px,-2px); }
  41%{ opacity:0.4; transform:translate(-4px,1px); }
  44%{ opacity:0; }
  69%{ opacity:0.45; transform:translate(6px,0); }
  72%{ opacity:0.3; transform:translate(-7px,2px); }
  75%{ opacity:0; }
}

/* The menu band under the artwork.

   One flow-laid band rather than three separately-anchored boxes: the
   stars were pinned to `bottom: var(--menu-band)`, which lines up with the
   artwork's lower edge only when the artwork is height-constrained. On a
   phone in portrait the 4:3 still is width-constrained instead, so the
   stars ended up floating in the middle of a 260px black gap. */
.title-band{
  position:absolute; z-index:3;
  left:0; right:0; bottom:0;
  height:var(--menu-band);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  padding:0 14px calc(14px + var(--safe-b));
}

.title-stars{
  display:flex; gap:6px;
  font-size:1.05rem; color:var(--amber);
  text-shadow:0 0 10px rgba(255,176,32,0.55), 0 2px 6px #000;
  min-height:1.2em;
}

.title-menu{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:2px 22px;
}
.title-menu .menu-btn{ text-align:center; padding:5px 2px; }

.title-progress{
  margin:0;
  text-align:center;
  font-size:0.68rem; letter-spacing:0.06em;
  color:rgba(255,255,255,0.6);
  text-shadow:0 2px 6px rgba(0,0,0,0.9);
  min-height:1.1em;
}

@media (max-width:560px){
  #title-screen{ --menu-band:clamp(130px, 28vh, 180px); }
  .title-menu{ gap:2px 16px; }
  .title-menu .menu-btn{ font-size:0.86rem; letter-spacing:0.1em; }
}

/* ---------------- INTRO CINEMATIC ---------------- */
#intro-screen{ background:#000; overflow:hidden; cursor:pointer; }
.intro-zoom{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  background:#000; opacity:0;
  animation:introFade 0.5s ease forwards, introZoom 3.2s ease-out forwards;
}
@keyframes introFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes introZoom{ from{ transform:scale(1); } to{ transform:scale(1.14); } }
.intro-skip{
  position:absolute; right:16px; bottom:calc(14px + var(--safe-b));
  margin:0; font-size:0.66rem; letter-spacing:0.12em;
  color:rgba(255,255,255,0.62); text-shadow:0 1px 4px #000;
  animation:introFade 0.4s ease 1.2s backwards;
}

/* ---------------- NIGHT CARD ---------------- */
#nightcard-screen{ background:#000; }
.nightcard{
  font-family:var(--font-pixel);
  color:#fff; text-align:center; line-height:1.15;
  animation:cardIn 0.6s ease backwards;
}
@keyframes cardIn{ from{ opacity:0; } to{ opacity:1; } }
.nightcard .nc-time{
  display:block; letter-spacing:0.06em;
  font-size:clamp(2.2rem, 7vw, 3.4rem);
}
.nightcard .nc-night{
  display:block; letter-spacing:0.04em;
  font-size:clamp(1.9rem, 6vw, 3rem);
}

/* ---------------- GAME OVER ---------------- */
#gameover-screen{ background:#000; }
.jumpscare{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000; overflow:hidden;
}
.jumpscare-figure{
  /* Top-anchored, never taller than the frame. It used to be bottom-
     anchored at 112%, which cropped the top 12% — the face, i.e. the one
     part of a jumpscare that has to land. The lower legs disappearing
     behind the caption panel is fine; the head is not optional. */
  position:absolute; top:0; left:50%;
  height:100%; width:auto; max-width:none;
  transform:translateX(-50%);
  filter:brightness(1.15) contrast(1.15) saturate(1.1)
         drop-shadow(0 0 40px rgba(224,57,43,0.6));
  animation:lunge 0.35s ease-out;
}
@keyframes lunge{
  from{ transform:translateX(-50%) scale(0.72); opacity:0; }
  to{ transform:translateX(-50%) scale(1); opacity:1; }
}
.redflash{
  position:absolute; inset:0; pointer-events:none;
  background:var(--red); mix-blend-mode:screen;
  animation:flash 0.1s steps(2) 5;
}
@keyframes flash{ 0%,100%{ opacity:0; } 50%{ opacity:0.55; } }

.go-content{
  position:relative; z-index:4;
  margin-top:auto; width:100%;
  padding:22px 20px calc(30px + var(--safe-b));
  text-align:center;
  background:linear-gradient(to top, rgba(0,0,0,0.94) 45%, rgba(0,0,0,0));
}
.go-content h2{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 6vw, 3rem);
  color:#fff;
  text-shadow:0 0 20px rgba(255,0,0,0.8);
}
.go-content p{ margin:0 0 22px; color:var(--paper-dim); }
.go-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------------- VICTORY ---------------- */
#victory-screen{
  background:
    linear-gradient(to bottom, rgba(8,6,3,0.45) 0%, rgba(6,4,2,0.88) 100%),
    url('../../assets/img/victory-bg.jpg') center/cover no-repeat;
}
.win-content{
  text-align:center;
  padding:0 20px calc(24px + var(--safe-b));
  max-width:560px;
}
/* The background is a bright daytime photograph of the house; body copy
   laid straight onto it was close to unreadable. */
.win-plate{
  padding:26px 26px 24px;
  background:linear-gradient(to bottom, rgba(6,5,3,0.86), rgba(6,5,3,0.94));
  border:1px solid rgba(138,94,18,0.55);
  box-shadow:0 24px 70px rgba(0,0,0,0.65);
}
.win-content p{ color:#c3ccb4; }
.win-content h2{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 5.5vw, 3rem);
  color:var(--amber);
  text-shadow:0 0 18px rgba(255,176,32,0.5);
}
.win-content p{
  margin:0 auto 24px;
  max-width:440px; line-height:1.6;
  color:var(--paper-dim);
}
.paycheck{
  margin:0 auto 24px; max-width:300px;
  border:1px solid var(--amber-dim);
  background:rgba(10,8,4,0.7);
  padding:12px 16px;
  font-size:0.82rem;
  text-align:left;
}
.pc-row{
  display:flex; justify-content:space-between;
  padding:4px 0; color:var(--paper-dim);
}
.pc-row b{ color:var(--paper); }
.pc-row.total{
  border-top:1px solid var(--amber-dim);
  margin-top:6px; padding-top:8px;
  color:var(--amber); letter-spacing:0.06em;
}
.pc-row.total b{ color:var(--amber); }