/* ===========================================================================
   game-frame.css
   Wraps each Twine game in the archive's decayed-document framing without
   touching the game's own interior styling. Linked from each game's
   index.html by scripts/sync-games.sh.

   NOTE: in these games tw-story is full-viewport width (Harlowe default);
   line length comes from tw-passage's own max-width. Do not constrain
   tw-story's width or padding here — frame it as a full-page document
   leaf on a black mat instead.
   =========================================================================== */

html, body {
  background: #060505;
  margin: 0;
  min-height: 100vh;
}

/* The mat: a thin band of black around the document leaf. */
body { padding: 10px; }

/* The leaf: stitched double edge, faint blood glow, darkened corners. */
tw-story {
  border: 1px solid #3a3020;
  box-shadow:
    0 0 0 3px #060505,                    /* mat gap */
    0 0 0 4px #22190d,                    /* second, fainter stitch line */
    0 0 40px rgba(132, 36, 36, 0.12),     /* blood-tinted lamp bleed */
    inset 0 0 90px rgba(0, 0, 0, 0.5);    /* corners sinking into dark */
  min-height: calc(100vh - 20px);
}

/* Dust over the whole viewport — warm grain, far subtler than the landing
   page. Replaces broadcast-tapes' scanlines. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.91   0 0 0 0 0.88   0 0 0 0 0.80   0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: screen;
}

/* Water damage pooling at the edges: two off-center blotches plus a soft
   vignette. Multiplied and faint so it never fights the cream text or the
   games' gold links; nothing here touches tw-passage or tw-link. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse 40% 30% at 8% 96%, rgba(40, 30, 15, 0.5), rgba(40, 30, 15, 0) 70%),
    radial-gradient(ellipse 35% 25% at 94% 5%, rgba(40, 30, 15, 0.4), rgba(40, 30, 15, 0) 70%),
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* Scrollbar in the archive palette (Firefox + WebKit). */
html { scrollbar-color: #6b5a34 #060505; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; background: #060505; }
::-webkit-scrollbar-thumb { background: #6b5a34; border: 2px solid #060505; }
::-webkit-scrollbar-thumb:hover { background: #d8b66c; }

/* Nothing here animates; flatten the shadow anyway for reduced-motion users
   so the page reads as calm as possible. */
@media (prefers-reduced-motion: reduce) {
  tw-story { box-shadow: 0 0 0 1px #3a3020; }
}