/* ==========================================================
   NOIRNARRATIVES - PIRATE PRESS
   Visual identity layer. Loads AFTER each page's own <style>
   so it overrides presentation without touching structure.

   Direction: the site is a wall of bootleg flyposters for shows
   that may not exist. Xerox degradation, spot-ink misregistration,
   halftone screens, tape and torn edges. Horror comes from analog
   decay, not from neon.

   RULES OBEYED
   - No class or id is renamed or removed. This file only restyles.
   - No JavaScript touched, no external requests, no webfonts.
   - Reading surfaces stay calm. Only chrome gets the treatment.
   - Reduced motion respected at the bottom of the file.
   ========================================================== */

:root{
  /* condensed poster type, system stacks only */
  --press: "Haettenschweiler","Arial Narrow Bold","Franklin Gothic Heavy",
           "Impact","Arial Narrow",var(--impact,sans-serif);
  --press-body: var(--serif, Georgia, serif);

  /* offset registration ghosts */
  --ink-c: rgba(0,225,255,.50);
  --ink-m: rgba(255,0,92,.45);

  /* paper */
  --paper: #14131a;
  --paper-2: #100f15;
  --fold: rgba(255,255,255,.07);
}

/* ---------- 1. HALFTONE + TONER GRAIN ------------------- */
/* A dot screen over the whole page. This is the single biggest
   change: gradients read as digital, halftone reads as printed. */
/* Dots only on the top layer. Anything heavier than this sits over
   body copy and eats contrast, so the toner streaking is pushed down
   to .grain, which renders beneath .wrap. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  opacity:.6;
}

/* toner streaking, the vertical drag a tired photocopier leaves.
   .grain is z-index 1, under .wrap, so this never crosses body copy. */
.grain{
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 37px,
      rgba(255,255,255,.05) 37px 38px,
      transparent 38px 91px,
      rgba(0,0,0,.16) 91px 93px) !important;
  opacity:.7 !important;
  mix-blend-mode:normal !important;
}

/* ---------- 2. POSTER TYPE ------------------------------ */
.sectorbar h2,
.card .title, .card h3,
.series .logo,
h3.grouphead,
.wing h2,
.hero h1, .hero h2,
.ct-hero h1,
.haunt h3,
.id h1,
.arc h3,
.s2 h3{
  font-family: var(--press) !important;
  letter-spacing:.005em !important;
  text-transform: uppercase;
  font-weight:400;
}

/* misregistration: the plate did not line up on the second pass */
.sectorbar h2,
.series .logo,
.hero h1,
.haunt h3{
  text-shadow:
    1.6px 0 0 var(--ink-c),
   -1.6px 0 0 var(--ink-m),
    0 0 22px rgba(0,0,0,.6) !important;
}

/* Kill the neon. A glow says "screen"; this site says "printed".
   Card titles get the same offset ghost as the mastheads instead. */
.card .title, .card h3, .wing h2, .arc h3, .s2 h3, .id h1, .storyhead h2{
  text-shadow:
    1.2px 0 0 var(--ink-c),
   -1.2px 0 0 var(--ink-m),
    1px 2px 0 rgba(0,0,0,.7) !important;
}
.card .ico, .series .emblem, .storyhead .ic, .id .mask, .crest img{
  filter:none !important;
}
.card .fill, .row .fill{ box-shadow:none !important; }
.sectorbar, .storyhead, .card.feature{ box-shadow:5px 6px 0 rgba(0,0,0,.5) !important; }

/* the eyebrow line above a section, set like a print run code */
.sectorbar p,
h3.grouphead span,
.card .tg,
.card .kind{
  font-family: var(--mono) !important;
  letter-spacing:.22em !important;
  text-transform: uppercase;
}

/* ---------- 3. CARDS AS TAPED PAPER --------------------- */
/* Kill the glow. Replace with flat stock, a hard offset shadow,
   a torn lower edge and a strip of tape. */
.card,
.series,
.haunt,
.wing,
.stat,
.thesis,
.arc,
.ep-card{
  border-radius:2px !important;
  /* the sheet has to overflow its own box or the tape and the torn
     edge get clipped away. Nothing inside a card relies on clipping. */
  overflow:visible !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
    var(--paper) !important;
  box-shadow:
    5px 6px 0 rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;
  position:relative;
}

/* spot ink hairline, the only place the wing colour is pure */
.card, .series, .haunt{
  border:1px solid var(--c, var(--accent, #888)) !important;
}

/* torn bottom edge */
.card::after,
.series::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:7px;
  pointer-events:none;
  background:
    repeating-linear-gradient(135deg,
      var(--paper) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(45deg,
      var(--paper) 0 3px, transparent 3px 6px);
  opacity:.9;
}

/* tape strip across the top corner */
.card::before,
.haunt::before{
  content:"";
  position:absolute; top:-8px; left:14%;
  width:86px; height:19px;
  transform: rotate(-2.4deg);
  background:
    linear-gradient(180deg, rgba(232,226,205,.14), rgba(232,226,205,.09));
  border-left:1px dashed rgba(0,0,0,.35);
  border-right:1px dashed rgba(0,0,0,.35);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  pointer-events:none;
  z-index:3;
}
/* the feature card gets two strips, it is a bigger sheet */
.card.feature::before{ left:8%; }

/* stack the wall slightly off true, then straighten on hover */
.grid > .card:nth-child(3n+1){ transform: rotate(-.5deg); }
.grid > .card:nth-child(3n+2){ transform: rotate(.35deg); }
.grid > .card:nth-child(3n+3){ transform: rotate(-.2deg); }
.card{ transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important; }
.card:hover{
  transform: rotate(0deg) translate(-2px,-3px) !important;
  box-shadow: 9px 11px 0 rgba(0,0,0,.6),
              inset 0 0 0 1px rgba(255,255,255,.07) !important;
  filter:none !important;
}
.card.locked:hover{ transform: rotate(0deg) !important; }

/* ---------- 4. OVERPRINT STAMPS ------------------------- */
/* Locked cards get a rubber stamp rather than a padlock emoji. */
.card.locked{ opacity:.72 !important; filter:grayscale(.5) contrast(.95) !important; }
.card.locked .lockbadge{
  position:absolute !important;
  right:auto !important; left:50% !important; bottom:34% !important;
  transform: translateX(-50%) rotate(-11deg) !important;
  border:3px double rgba(255,255,255,.30) !important;
  border-radius:3px !important;
  color:rgba(255,255,255,.34) !important;
  font-family: var(--press) !important;
  font-size:20px !important;
  letter-spacing:.14em !important;
  padding:5px 16px !important;
  background:none !important;
  white-space:nowrap;
}

/* the graffiti tag stays, but reads as a stencil not a neon sign */
.tag{
  font-family: var(--press) !important;
  text-shadow:
    1.4px 0 0 var(--ink-c),
   -1.4px 0 0 var(--ink-m),
    2px 3px 0 rgba(0,0,0,.75) !important;
  filter:none !important;
  opacity:.92;
}

/* ---------- 5. SECTOR BAR AS A PRESS MASTHEAD ----------- */
.sectorbar{
  border-radius:2px !important;
  border-width:0 0 3px 0 !important;
  border-bottom-style:double !important;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent) !important;
  box-shadow:none !important;
  padding-bottom:14px !important;
}

/* ---------- 6. BUTTONS AS STAMPED TICKETS --------------- */
.btn, .play, .ct-btn, .nn-uat-go, .nn-go, .enter, .back, .tool{
  border-radius:2px !important;
  box-shadow:3px 4px 0 rgba(0,0,0,.5) !important;
  font-family: var(--mono) !important;
  letter-spacing:.14em !important;
  text-transform: uppercase;
}
.btn:hover, .play:hover, .ct-btn:hover, .enter:hover{
  transform: translate(-1px,-2px) !important;
  box-shadow:5px 7px 0 rgba(0,0,0,.6) !important;
}
.btn.ghost, .back, .tool{ box-shadow:2px 3px 0 rgba(0,0,0,.4) !important; }

/* choice buttons in the readers: torn ticket stubs */
.choice, .choice-btn, .opt{
  border-radius:2px !important;
  box-shadow:3px 4px 0 rgba(0,0,0,.45) !important;
  border-left-width:5px !important;
}
.choice:hover, .choice-btn:not(:disabled):hover, .opt:hover:not(:disabled){
  transform: translate(2px,-2px) !important;
  box-shadow:5px 6px 0 rgba(0,0,0,.55) !important;
}

/* ---------- 7. READING SURFACES STAY CALM --------------- */
/* The whole point of the site is the prose. No halftone, no
   rotation, no misregistration over body copy. */
.scene, .book, .ct-term{
  border-radius:3px !important;
  background: linear-gradient(178deg, rgba(255,255,255,.028), transparent 30%), var(--paper-2) !important;
  box-shadow: 6px 7px 0 rgba(0,0,0,.5), inset 0 0 70px rgba(0,0,0,.55) !important;
  transform:none !important;
}
.scene::after, .book::after{ display:none !important; }
.blk.sc, .scene-text, .ct-narrative, .ending p, .thesis p, .card .desc{
  font-family: var(--press-body) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-shadow:none !important;
}
/* a printed drop cap on the opening line of a scene */
.scene .blk.sc:first-child::first-letter{
  font-family: var(--press);
  font-size:2.9em; line-height:.82;
  float:left; margin:.04em .1em 0 0;
  color: var(--accent, #d9c089);
}

/* ---------- 8. CREST / MASTHEAD ------------------------- */
.crest, .topbar, .term, .clear{
  border-radius:2px !important;
  box-shadow:3px 4px 0 rgba(0,0,0,.45) !important;
}
.crest h1, .brand span{
  font-family: var(--press) !important;
  letter-spacing:.02em !important;
  text-shadow:1.3px 0 0 var(--ink-c), -1.3px 0 0 var(--ink-m) !important;
}

/* ---------- 9. MINI GAME PANELS ------------------------- */
.nn-game{
  border-radius:2px !important;
  box-shadow:6px 7px 0 rgba(0,0,0,.55) !important;
}
.nn-game-title{ font-family: var(--press) !important; letter-spacing:.06em !important; }

/* ---------- 10. PROFILE CHIP ---------------------------- */
.nn-chip{
  border-radius:2px !important;
  box-shadow:3px 4px 0 rgba(0,0,0,.5) !important;
  font-family: var(--mono) !important;
  letter-spacing:.12em !important;
}

/* ---------- 11. MOBILE ---------------------------------- */
@media (max-width:640px){
  /* rotation plus a hard offset shadow can push past the viewport */
  .grid > .card:nth-child(n){ transform:none !important; }
  .card::before, .haunt::before{ left:10%; width:64px; }
  .card, .series, .haunt, .wing, .stat, .thesis, .arc{
    box-shadow:3px 4px 0 rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  }
  .card.locked .lockbadge{ font-size:16px !important; }
}

/* ---------- 12. MOTION ---------------------------------- */
@media (prefers-reduced-motion: reduce){
  .card, .btn, .choice, .choice-btn, .opt, .play, .ct-btn{
    transition:none !important;
  }
  .grid > .card:nth-child(n){ transform:none !important; }
  .card:hover, .btn:hover, .choice:hover{ transform:none !important; }
  body::after{ opacity:.5; }
}