/* Spooky - GENERATED by Claude Code\castle-look\make-themes.ps1 (sync-lookmenu.cmd runs it). Edit the sources, not this:
   1. the Spooky kit: castle-look\themes\spooky\spooky-kit.css (make-castle-kit.ps1 -Theme spooky, from kit.src.css and art.txt);
   2. this site's Castle rules (its Castle look below the kit), rescoped from html[data-look="castle"] to html[data-look="spooky"],
      so Spooky lays out exactly as Castle does;
   3. castle-look\themes\spooky\sites\mucksalot.css: Spooky's own words and touches for this site. */
/* GENERATED by castle-look\make-castle-kit.ps1 -Theme spooky from themes\spooky\kit.src.css, font.txt and themes\spooky\art.txt - edit those, not this. */
/* ==== The Spooky kit: the top of every Frizzy G site's Spooky look ====
   Castle's 16-bit structure for Halloween: a violet night with a harvest moon, crooked crypt stone
   with pumpkin-glow rivets, a jack-o'-lantern on a stake either side of the title (instead of the
   torches), a graveyard and a crooked old house on the horizon, leaves falling, and now and then a
   swarm of bats or a ghost going over (spooky.js). Same --ck-* names as the Castle kit, so a site's
   Castle rules wear it unchanged (make-themes.ps1 rescopes them); same font, same pixel discipline:
   Castle Pixel at 10, 20, 30, 40px; art scaled by whole numbers; no radius, no blur. */

@font-face {
  font-family: "Castle Pixel";
  src: url(data:font/ttf;base64,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) format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

html[data-look="spooky"] {
  color-scheme: dark;
  font-synthesis: none;

  /* type */
  --ck-pixel: "Castle Pixel", "Lucida Console", "Courier New", monospace;
  --ck-serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;

  /* the violet night, top to horizon, and the pumpkin glow behind the graveyard */
  --ck-sky-1: #0b0616; --ck-sky-2: #170c2a; --ck-sky-3: #2c1240; --ck-glow: #5c2414;
  --ck-sky: linear-gradient(180deg, var(--ck-sky-1) 0%, var(--ck-sky-2) 45%, var(--ck-sky-3) 78%, var(--ck-glow) 100%);

  /* crypt stone: violet-grey, lit from the top left, outlined in black */
  --ck-stone: #4a3d5c; --ck-stone-lit: #7a6a90; --ck-stone-mid: #352a45; --ck-stone-dark: #1e1529; --ck-stone-deep: #120c1a;
  --ck-black: #000;
  --ck-panel: rgba(14, 8, 22, .92); --ck-well: #08050e;

  /* an old spell book's page for long reads, in violet-black ink, headings in burnt orange */
  --ck-parch: #e3d6b0; --ck-parch-lit: #f0e7cb; --ck-parch-edge: #a8875a; --ck-parch-ink: #24152e; --ck-parch-red: #8f2400;
  --ck-parchment: radial-gradient(120% 90% at 50% 40%, var(--ck-parch-lit) 0%, var(--ck-parch) 55%, var(--ck-parch-edge) 100%);

  /* text: candlelight for titles, ghostly lilac for labels, a pale ghost white for reading,
     ectoplasm mint for a hint, slime green for "yes", red for "no"; pumpkin for the shiny things */
  --ck-yellow: #ffcf5a; --ck-orange: #c49bff; --ck-white: #f6f2ff; --ck-dim: #c9bedb;
  --ck-cyan: #7dffd4; --ck-green: #8dff4a; --ck-red: #ff4d3d; --ck-gold: #ff9a1f; --ck-gold-dark: #8a3b06;
  /* pumpkin fire, hottest first */
  --ck-fire-1: #fff2c0; --ck-fire-2: #ffcf5a; --ck-fire-3: #ff8a1f; --ck-fire-4: #d9480f; --ck-fire-5: #6e1d05;

  --ck-shadow: .1em .1em 0 #000;
  --ck-outline: .1em 0 0 #000, -.1em 0 0 #000, 0 .1em 0 #000, 0 -.1em 0 #000, .1em .1em 0 #000, -.1em -.1em 0 #000, .1em -.1em 0 #000, -.1em .1em 0 #000, .2em .2em 0 #000;

  --ck-raise: inset 2px 2px 0 var(--ck-stone-lit), inset -2px -2px 0 var(--ck-stone-dark);
  --ck-press: inset 2px 2px 0 var(--ck-stone-dark), inset -2px -2px 0 var(--ck-stone-lit);
  --ck-sunk: inset 2px 2px 0 #000, inset -2px -2px 0 var(--ck-stone-mid);
  --ck-drop: 4px 4px 0 rgba(0, 0, 0, .55);
  --ck-notch: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);

  /* the pixel art (see art.txt), at 1x: scale by whole numbers. Same sizes as Castle's */
  --ck-art-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8' shape-rendering='crispEdges'%3E%3Cpath fill='%234a3d5c' d='M0 1h2v1h-2zM3 1h4v1h-4zM8 1h2v1h-2zM11 1h2v1h-2zM14 1h1v1h-1zM0 2h5v1h-5zM6 2h1v1h-1zM8 2h1v1h-1zM10 2h5v1h-5zM0 5h1v1h-1zM2 5h1v1h-1zM4 5h4v1h-4zM9 5h2v1h-2zM13 5h1v1h-1zM15 5h1v1h-1zM0 6h3v1h-3zM4 6h2v1h-2zM7 6h4v1h-4zM12 6h4v1h-4z'/%3E%3Cpath fill='%23352a45' d='M7 0h1v3h-1zM15 0h1v3h-1zM0 3h16v1h-16zM3 4h1v3h-1zM11 4h1v3h-1zM0 7h16v1h-16z'/%3E%3Cpath fill='%235a4c6e' d='M0 0h7v1h-7zM8 0h7v1h-7zM0 4h3v1h-3zM4 4h7v1h-7zM12 4h4v1h-4z'/%3E%3Cpath fill='%2342364f' d='M2 1h1v1h-1zM13 1h1v1h-1zM5 2h1v1h-1zM9 2h1v1h-1zM1 5h1v1h-1zM8 5h1v1h-1zM14 5h1v1h-1zM6 6h1v1h-1z'/%3E%3Cpath fill='%234d6b3c' d='M10 1h1v1h-1zM12 5h1v1h-1z'/%3E%3C/svg%3E");           /* 16 x 8 crypt wall tile */
  --ck-art-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h12v1h-12zM0 1h1v10h-1zM11 1h1v10h-1zM3 3h6v1h-6zM3 4h1v4h-1zM8 4h1v4h-1zM3 8h6v1h-6zM0 11h12v1h-12z'/%3E%3Cpath fill='%237a6a90' d='M1 1h9v1h-9zM1 2h1v8h-1z'/%3E%3Cpath fill='%234a3d5c' d='M10 1h1v1h-1zM3 2h6v1h-6zM2 3h1v6h-1zM9 3h1v6h-1zM3 9h6v1h-6zM1 10h1v1h-1z'/%3E%3Cpath fill='%231e1529' d='M10 2h1v8h-1zM2 10h9v1h-9z'/%3E%3Cpath fill='%23ff8a1f' d='M2 2h1v1h-1zM9 2h1v1h-1zM2 9h1v1h-1zM9 9h1v1h-1z'/%3E%3C/svg%3E");           /* 12 x 12 crypt-stone frame, pumpkin-glow rivets (border-image, slice 4) */
  --ck-art-frame-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h12v1h-12zM0 1h1v10h-1zM11 1h1v10h-1zM3 3h6v1h-6zM3 4h1v4h-1zM8 4h1v4h-1zM3 8h6v1h-6zM0 11h12v1h-12z'/%3E%3Cpath fill='%23ffc46b' d='M1 1h9v1h-9zM1 2h1v8h-1z'/%3E%3Cpath fill='%23e8741a' d='M10 1h1v1h-1zM3 2h6v1h-6zM2 3h1v6h-1zM9 3h1v6h-1zM3 9h6v1h-6zM1 10h1v1h-1z'/%3E%3Cpath fill='%237a2c04' d='M10 2h1v8h-1zM2 10h9v1h-9z'/%3E%3Cpath fill='%23fff2c0' d='M2 2h1v1h-1zM9 2h1v1h-1zM2 9h1v1h-1zM9 9h1v1h-1z'/%3E%3C/svg%3E"); /* the same as a glowing pumpkin, for the one that matters most */
  --ck-art-torch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30' viewBox='0 0 48 30' shape-rendering='crispEdges'%3E%3Cpath fill='%231b0d05' d='M5 0h2v1h-2zM17 0h2v1h-2zM29 0h2v1h-2zM41 0h2v1h-2zM4 1h1v1h-1zM7 1h1v1h-1zM16 1h1v1h-1zM19 1h1v1h-1zM28 1h1v1h-1zM31 1h1v1h-1zM40 1h1v1h-1zM43 1h1v1h-1zM2 2h3v1h-3zM7 2h3v1h-3zM14 2h3v1h-3zM19 2h3v1h-3zM26 2h3v1h-3zM31 2h3v1h-3zM38 2h3v1h-3zM43 2h3v1h-3zM1 3h1v1h-1zM10 3h1v1h-1zM13 3h1v1h-1zM22 3h1v1h-1zM25 3h1v1h-1zM34 3h1v1h-1zM37 3h1v1h-1zM46 3h1v1h-1zM0 4h1v7h-1zM11 4h2v7h-2zM23 4h2v7h-2zM35 4h2v7h-2zM47 4h1v7h-1zM1 11h1v1h-1zM10 11h1v1h-1zM13 11h1v1h-1zM22 11h1v1h-1zM25 11h1v1h-1zM34 11h1v1h-1zM37 11h1v1h-1zM46 11h1v1h-1zM2 12h8v1h-8zM14 12h8v1h-8zM26 12h8v1h-8zM38 12h8v1h-8zM4 13h1v16h-1zM7 13h1v16h-1zM16 13h1v16h-1zM19 13h1v16h-1zM28 13h1v16h-1zM31 13h1v16h-1zM40 13h1v16h-1zM43 13h1v16h-1zM5 29h2v1h-2zM17 29h2v1h-2zM29 29h2v1h-2zM41 29h2v1h-2z'/%3E%3Cpath fill='%23ff8a1f' d='M2 3h2v1h-2zM5 3h2v1h-2zM8 3h2v1h-2zM14 3h2v1h-2zM17 3h2v1h-2zM20 3h2v1h-2zM26 3h2v1h-2zM29 3h2v1h-2zM32 3h2v1h-2zM38 3h2v1h-2zM41 3h2v1h-2zM44 3h2v1h-2zM1 4h2v1h-2zM4 4h4v2h-4zM9 4h2v1h-2zM13 4h2v1h-2zM16 4h4v2h-4zM21 4h2v1h-2zM25 4h2v1h-2zM28 4h4v2h-4zM33 4h2v1h-2zM37 4h2v1h-2zM40 4h4v2h-4zM45 4h2v1h-2zM2 5h1v1h-1zM9 5h1v1h-1zM14 5h1v1h-1zM21 5h1v1h-1zM26 5h1v1h-1zM33 5h1v1h-1zM38 5h1v1h-1zM45 5h1v1h-1zM5 6h2v1h-2zM17 6h2v1h-2zM29 6h2v1h-2zM41 6h2v1h-2zM2 7h3v1h-3zM7 7h3v1h-3zM14 7h3v1h-3zM19 7h3v1h-3zM26 7h3v1h-3zM31 7h3v1h-3zM38 7h3v1h-3zM43 7h3v1h-3zM3 8h6v1h-6zM15 8h6v1h-6zM27 8h6v1h-6zM39 8h6v1h-6zM4 9h1v1h-1zM7 9h1v1h-1zM16 9h1v1h-1zM19 9h1v1h-1zM28 9h1v1h-1zM31 9h1v1h-1zM40 9h1v1h-1zM43 9h1v1h-1zM2 10h1v1h-1zM9 10h1v1h-1zM14 10h1v1h-1zM21 10h1v1h-1zM26 10h1v1h-1zM33 10h1v1h-1zM38 10h1v1h-1zM45 10h1v1h-1zM3 11h6v1h-6zM15 11h6v1h-6zM27 11h6v1h-6zM39 11h6v1h-6z'/%3E%3Cpath fill='%23c4560b' d='M4 3h1v1h-1zM7 3h1v1h-1zM16 3h1v1h-1zM19 3h1v1h-1zM28 3h1v1h-1zM31 3h1v1h-1zM40 3h1v1h-1zM43 3h1v1h-1zM3 4h1v1h-1zM8 4h1v1h-1zM15 4h1v1h-1zM20 4h1v1h-1zM27 4h1v1h-1zM32 4h1v1h-1zM39 4h1v1h-1zM44 4h1v1h-1zM1 5h1v6h-1zM10 5h1v6h-1zM13 5h1v6h-1zM22 5h1v6h-1zM25 5h1v6h-1zM34 5h1v6h-1zM37 5h1v6h-1zM46 5h1v6h-1zM2 11h1v1h-1zM9 11h1v1h-1zM14 11h1v1h-1zM21 11h1v1h-1zM26 11h1v1h-1zM33 11h1v1h-1zM38 11h1v1h-1zM45 11h1v1h-1z'/%3E%3Cpath fill='%234d7a2a' d='M6 1h1v2h-1zM18 1h1v2h-1zM30 1h1v2h-1zM42 1h1v2h-1z'/%3E%3Cpath fill='%232f5218' d='M5 1h1v2h-1zM17 1h1v2h-1zM29 1h1v2h-1zM41 1h1v2h-1z'/%3E%3Cpath fill='%23ffd84a' d='M3 5h1v1h-1zM8 5h1v1h-1zM27 5h1v1h-1zM32 5h1v1h-1zM2 6h3v1h-3zM7 6h3v1h-3zM26 6h3v1h-3zM31 6h3v1h-3zM5 7h2v1h-2zM29 7h2v1h-2zM2 8h1v1h-1zM9 8h1v1h-1zM26 8h1v1h-1zM33 8h1v1h-1zM2 9h2v1h-2zM5 9h2v1h-2zM8 9h2v1h-2zM26 9h2v1h-2zM29 9h2v1h-2zM32 9h2v1h-2zM3 10h6v1h-6zM27 10h6v1h-6z'/%3E%3Cpath fill='%23fff6c8' d='M15 5h1v1h-1zM20 5h1v1h-1zM14 6h3v1h-3zM19 6h3v1h-3zM17 7h2v1h-2zM14 8h1v1h-1zM21 8h1v1h-1zM14 9h2v1h-2zM17 9h2v1h-2zM20 9h2v1h-2zM15 10h6v1h-6z'/%3E%3Cpath fill='%23ffb238' d='M39 5h1v1h-1zM44 5h1v1h-1zM38 6h3v1h-3zM43 6h3v1h-3zM41 7h2v1h-2zM38 8h1v1h-1zM45 8h1v1h-1zM38 9h2v1h-2zM41 9h2v1h-2zM44 9h2v1h-2zM39 10h6v1h-6z'/%3E%3Cpath fill='%235b3a1d' d='M6 13h1v16h-1zM18 13h1v16h-1zM30 13h1v16h-1zM42 13h1v16h-1z'/%3E%3Cpath fill='%238a5a2e' d='M5 13h1v16h-1zM17 13h1v16h-1zM29 13h1v16h-1zM41 13h1v16h-1z'/%3E%3Cpath fill='%232d4a1e' d='M3 28h1v1h-1zM8 28h1v1h-1zM15 28h1v1h-1zM20 28h1v1h-1zM27 28h1v1h-1zM32 28h1v1h-1zM39 28h1v1h-1zM44 28h1v1h-1zM2 29h1v1h-1zM4 29h1v1h-1zM7 29h1v1h-1zM9 29h1v1h-1zM14 29h1v1h-1zM16 29h1v1h-1zM19 29h1v1h-1zM21 29h1v1h-1zM26 29h1v1h-1zM28 29h1v1h-1zM31 29h1v1h-1zM33 29h1v1h-1zM38 29h1v1h-1zM40 29h1v1h-1zM43 29h1v1h-1zM45 29h1v1h-1z'/%3E%3Cpath fill='%234d7a2a' d='M3 27h1v1h-1zM8 27h1v1h-1zM15 27h1v1h-1zM20 27h1v1h-1zM27 27h1v1h-1zM32 27h1v1h-1zM39 27h1v1h-1zM44 27h1v1h-1zM2 28h1v1h-1zM9 28h1v1h-1zM14 28h1v1h-1zM21 28h1v1h-1zM26 28h1v1h-1zM33 28h1v1h-1zM38 28h1v1h-1zM45 28h1v1h-1zM1 29h1v1h-1zM3 29h1v1h-1zM8 29h1v1h-1zM10 29h1v1h-1zM13 29h1v1h-1zM15 29h1v1h-1zM20 29h1v1h-1zM22 29h1v1h-1zM25 29h1v1h-1zM27 29h1v1h-1zM32 29h1v1h-1zM34 29h1v1h-1zM37 29h1v1h-1zM39 29h1v1h-1zM44 29h1v1h-1zM46 29h1v1h-1z'/%3E%3C/svg%3E");           /* 4 frames of 12 x 30: a jack-o'-lantern on a stake, flickering (ck-torch) */
  --ck-art-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd27a' d='M5 0h6v1h-6zM3 1h10v1h-10zM2 2h11v1h-11zM1 3h4v1h-4zM6 3h7v2h-7zM1 4h3v1h-3zM0 5h10v1h-10zM11 5h3v1h-3zM0 6h3v1h-3zM4 6h5v1h-5zM12 6h2v1h-2zM0 7h2v3h-2zM5 7h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM3 9h2v1h-2zM10 9h2v1h-2zM0 10h7v1h-7zM9 10h3v1h-3zM1 11h10v1h-10zM1 12h9v1h-9zM2 13h7v1h-7zM3 14h4v1h-4z'/%3E%3Cpath fill='%23e8a94a' d='M13 2h1v1h-1zM13 3h2v2h-2zM14 5h2v2h-2zM13 7h3v3h-3zM12 10h4v1h-4zM11 11h4v1h-4zM10 12h5v1h-5zM9 13h5v1h-5zM7 14h6v1h-6zM5 15h6v1h-6z'/%3E%3Cpath fill='%23d18a32' d='M5 3h1v1h-1zM4 4h2v1h-2zM10 5h1v1h-1zM9 6h2v1h-2zM8 10h1v1h-1z'/%3E%3Cpath fill='%23120a1c' d='M3 6h1v1h-1zM11 6h1v1h-1zM2 7h3v1h-3zM6 7h1v1h-1zM8 7h1v1h-1zM10 7h3v1h-3zM2 8h11v1h-11zM2 9h1v1h-1zM5 9h5v1h-5zM12 9h1v1h-1zM7 10h1v1h-1z'/%3E%3C/svg%3E");             /* 16 x 16 harvest moon, with a bat across it */
  --ck-art-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80' shape-rendering='crispEdges'%3E%3Crect x='14' y='13' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='1' y='25' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='8' y='62' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='36' y='29' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='7' y='31' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='22' y='52' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='28' y='54' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='12' y='59' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='93' y='70' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='80' y='68' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='60' y='21' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='104' y='68' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='83' y='14' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='90' y='49' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='50' y='74' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='96' y='45' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='94' y='6' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='78' y='55' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='62' y='4' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='102' y='40' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='16' y='62' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='91' y='48' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='83' y='26' width='1' height='1' fill='%236e5a9a'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%23efe6ff'/%3E%3Crect x='116' y='13' width='3' height='1' fill='%23a07ad8'/%3E%3Crect x='117' y='12' width='1' height='3' fill='%23a07ad8'/%3E%3Crect x='117' y='13' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='82' y='6' width='1' height='1' fill='%23efe6ff'/%3E%3C/svg%3E");               /* 120 x 80 tile of violet stars */
  --ck-art-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='64' viewBox='0 0 320 64' shape-rendering='crispEdges'%3E%3Cpolygon fill='%231d1030' points='0,50 30,46 60,49 100,44 150,47 200,43 250,47 290,45 320,50 320,64 0,64'/%3E%3Cg fill='%23150b22'%3E%3Crect x='20' y='40' width='16' height='18'/%3E%3Cpolygon points='23,40 28,23 33,40'/%3E%3Crect x='27' y='17' width='2' height='7'/%3E%3Crect x='25' y='19' width='6' height='2'/%3E%3Cpolygon points='272,58 272,36 276,34 280,37 283,33 286,36 286,58'/%3E%3C/g%3E%3Crect fill='%23ff8a1f' x='27' y='46' width='2' height='4'/%3E%3Crect fill='%23ff8a1f' x='278' y='42' width='2' height='3'/%3E%3Cg fill='%230c0716'%3E%3Cpolygon points='86,58 98,50 150,49 162,58'/%3E%3Cpolygon points='96,52 97,26 107,25 108,52'/%3E%3Cpolygon points='94,27 101,9 110,26'/%3E%3Crect x='100' y='3' width='1' height='7'/%3E%3Crect x='98' y='5' width='5' height='1'/%3E%3Cpolygon points='106,52 105,34 148,31 150,52'/%3E%3Cpolygon points='110,35 112,22 142,19 146,33'/%3E%3Cpolygon points='107,24 126,5 147,20'/%3E%3Cpolygon points='134,13 134,3 139,2 140,11'/%3E%3Cpolygon points='119,45 127,40 135,44'/%3E%3Crect x='122' y='44' width='10' height='8'/%3E%3C/g%3E%3Crect fill='%23c4560b' x='125' y='46' width='4' height='6'/%3E%3Cg fill='%23ffcf5a'%3E%3Crect x='100' y='32' width='3' height='4'/%3E%3Crect x='115' y='26' width='5' height='5'/%3E%3Crect x='131' y='25' width='5' height='5'/%3E%3C/g%3E%3Crect fill='%23ff8a1f' x='109' y='40' width='5' height='5'/%3E%3Crect fill='%232c1240' x='138' y='38' width='5' height='5'/%3E%3Cg fill='%230c0716'%3E%3Crect x='117' y='26' width='1' height='5'/%3E%3Crect x='133' y='25' width='1' height='5'/%3E%3Crect x='111' y='40' width='1' height='5'/%3E%3Crect x='109' y='42' width='5' height='1'/%3E%3C/g%3E%3Crect fill='%237dffd4' x='125' y='13' width='3' height='3'/%3E%3Crect fill='%230c0716' x='126' y='13' width='1' height='3'/%3E%3Cg fill='%23140b20'%3E%3Crect x='56' y='50' width='6' height='8'/%3E%3Crect x='57' y='49' width='4' height='1'/%3E%3Crect x='68' y='46' width='2' height='12'/%3E%3Crect x='66' y='48' width='6' height='2'/%3E%3Cpolygon points='76,58 77,51 82,52 81,58'/%3E%3Crect x='86' y='53' width='4' height='5'/%3E%3Crect x='87' y='52' width='2' height='1'/%3E%3Crect x='172' y='46' width='7' height='12'/%3E%3Crect x='173' y='45' width='5' height='1'/%3E%3Crect x='188' y='43' width='2' height='15'/%3E%3Crect x='185' y='46' width='8' height='2'/%3E%3Crect x='197' y='51' width='5' height='7'/%3E%3Crect x='198' y='50' width='3' height='1'/%3E%3C/g%3E%3Cg fill='%230a0612'%3E%3Crect x='158' y='52' width='48' height='1'/%3E%3Crect x='158' y='55' width='48' height='1'/%3E%3Crect x='158' y='49' width='1' height='9'/%3E%3Crect x='161' y='49' width='1' height='9'/%3E%3Crect x='164' y='49' width='1' height='9'/%3E%3Crect x='167' y='49' width='1' height='9'/%3E%3Crect x='170' y='49' width='1' height='9'/%3E%3Crect x='173' y='49' width='1' height='9'/%3E%3Crect x='176' y='49' width='1' height='9'/%3E%3Crect x='179' y='49' width='1' height='9'/%3E%3Crect x='182' y='49' width='1' height='9'/%3E%3Crect x='185' y='49' width='1' height='9'/%3E%3Crect x='188' y='49' width='1' height='9'/%3E%3Crect x='191' y='49' width='1' height='9'/%3E%3Crect x='194' y='49' width='1' height='9'/%3E%3Crect x='197' y='49' width='1' height='9'/%3E%3Crect x='200' y='49' width='1' height='9'/%3E%3Crect x='203' y='49' width='1' height='9'/%3E%3Cpolygon points='232,58 233,40 231,30 234,30 236,40 237,58'/%3E%3Cpolygon points='233,37 222,29 219,24 221,24 225,28 234,34'/%3E%3Cpolygon points='235,33 244,23 249,22 247,25 236,35'/%3E%3Cpolygon points='232,31 228,20 230,20 234,29'/%3E%3Crect x='219' y='21' width='1' height='3'/%3E%3Crect x='249' y='20' width='1' height='2'/%3E%3Crect x='227' y='17' width='1' height='3'/%3E%3Crect x='244' y='20' width='3' height='2'/%3E%3Crect x='245' y='19' width='1' height='1'/%3E%3Crect x='247' y='20' width='1' height='1'/%3E%3C/g%3E%3Cpolygon fill='%2307040c' points='0,57 20,56 45,58 80,57 110,58 150,56 190,55 214,57 240,54 268,56 300,55 320,57 320,64 0,64'/%3E%3Cg fill='%23ff8a1f'%3E%3Crect x='113' y='54' width='4' height='3'/%3E%3Crect x='141' y='55' width='3' height='2'/%3E%3Crect x='61' y='56' width='3' height='2'/%3E%3C/g%3E%3Cg fill='%234d7a2a'%3E%3Crect x='114' y='53' width='1' height='1'/%3E%3Crect x='142' y='54' width='1' height='1'/%3E%3Crect x='62' y='55' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23ffe27a'%3E%3Crect x='114' y='55' width='1' height='1'/%3E%3Crect x='116' y='55' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");       /* 320 x 64: the crooked house, a dead tree, the graveyard (repeats sideways) */
  --ck-art-dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath fill='%232a1838' fill-opacity='.09' d='M1 0h1v1h-1zM3 2h1v1h-1z'/%3E%3C/svg%3E");         /* 4 x 4 tile, over parchment */
}

@keyframes ck-torch { to { background-position-x: calc(var(--ck-torch-px, 3px) * -48); } }
@keyframes ck-twinkle { 50% { opacity: var(--ck-twinkle, .55); } }

/* ==== The sky through the day (George, 10 Nov 2026: "add a day and night cycle"), as in the Castle
   kit: <html data-sky> is night, dawn, day or dusk over London (castle-look\fx\sky.js). Night is the
   above. By day an overcast autumn afternoon (stormy violet-grey, deep enough that white reads 6:1
   on it), a pale sun with a crow across it, grey clouds, the house and graveyard in daylight; dawn
   and dusk a blood-orange glow under the harvest moon, the house black against it, windows lit. */
html[data-look="spooky"][data-sky="dawn"] {
  --ck-sky-1: #160c2a; --ck-sky-2: #33204a; --ck-sky-3: #7a3a5a; --ck-glow: #d8783a;
  --ck-art-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80' shape-rendering='crispEdges'%3E%3Crect x='14' y='13' width='1' height='1' fill='%23cdbfe8'/%3E%3Crect x='1' y='25' width='1' height='1' fill='%2354467a'/%3E%3Crect x='8' y='62' width='1' height='1' fill='%23cdbfe8'/%3E%3Crect x='36' y='29' width='1' height='1' fill='%2354467a'/%3E%3Crect x='7' y='31' width='1' height='1' fill='%2354467a'/%3E%3Crect x='22' y='52' width='1' height='1' fill='%2354467a'/%3E%3Crect x='28' y='54' width='1' height='1' fill='%2354467a'/%3E%3Crect x='12' y='59' width='1' height='1' fill='%23cdbfe8'/%3E%3Crect x='93' y='70' width='1' height='1' fill='%2354467a'/%3E%3C/svg%3E");
  --ck-art-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff9a4a' d='M5 0h6v1h-6zM3 1h10v1h-10zM2 2h11v1h-11zM1 3h4v1h-4zM6 3h7v2h-7zM1 4h3v1h-3zM0 5h10v1h-10zM11 5h3v1h-3zM0 6h3v1h-3zM4 6h5v1h-5zM12 6h2v1h-2zM0 7h2v3h-2zM5 7h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM3 9h2v1h-2zM10 9h2v1h-2zM0 10h7v1h-7zM9 10h3v1h-3zM1 11h10v1h-10zM1 12h9v1h-9zM2 13h7v1h-7zM3 14h4v1h-4z'/%3E%3Cpath fill='%23e0642a' d='M13 2h1v1h-1zM13 3h2v2h-2zM14 5h2v2h-2zM13 7h3v3h-3zM12 10h4v1h-4zM11 11h4v1h-4zM10 12h5v1h-5zM9 13h5v1h-5zM7 14h6v1h-6zM5 15h6v1h-6z'/%3E%3Cpath fill='%23c8501e' d='M5 3h1v1h-1zM4 4h2v1h-2zM10 5h1v1h-1zM9 6h2v1h-2zM8 10h1v1h-1z'/%3E%3Cpath fill='%231e0c18' d='M3 6h1v1h-1zM11 6h1v1h-1zM2 7h3v1h-3zM6 7h1v1h-1zM8 7h1v1h-1zM10 7h3v1h-3zM2 8h11v1h-11zM2 9h1v1h-1zM5 9h5v1h-5zM12 9h1v1h-1zM7 10h1v1h-1z'/%3E%3C/svg%3E");
}
html[data-look="spooky"][data-sky="day"] {
  --ck-sky-1: #2c2a4a; --ck-sky-2: #433d5c; --ck-sky-3: #605670; --ck-glow: #9a8682;
  --ck-art-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80' shape-rendering='crispEdges'%3E%3Cg fill='%23cfc6e0' fill-opacity='.16'%3E%3Crect x='4' y='15' width='28' height='3'/%3E%3Crect x='66' y='45' width='22' height='2'/%3E%3Crect x='34' y='70' width='16' height='2'/%3E%3Crect x='92' y='11' width='14' height='2'/%3E%3C/g%3E%3Cg fill='%23cfc6e0' fill-opacity='.3'%3E%3Crect x='7' y='13' width='22' height='2'/%3E%3Crect x='10' y='11' width='13' height='2'/%3E%3Crect x='13' y='10' width='6' height='1'/%3E%3Crect x='22' y='12' width='5' height='1'/%3E%3Crect x='69' y='43' width='16' height='2'/%3E%3Crect x='72' y='41' width='8' height='2'/%3E%3Crect x='37' y='68' width='11' height='2'/%3E%3Crect x='39' y='67' width='5' height='1'/%3E%3Crect x='94' y='10' width='10' height='1'/%3E%3C/g%3E%3C/svg%3E");
  --ck-art-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23f3eddc' d='M5 0h6v1h-6zM3 1h10v1h-10zM2 2h11v1h-11zM1 3h4v1h-4zM6 3h7v2h-7zM1 4h3v1h-3zM0 5h10v1h-10zM11 5h3v1h-3zM0 6h3v1h-3zM4 6h5v1h-5zM12 6h2v1h-2zM0 7h2v3h-2zM5 7h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM3 9h2v1h-2zM10 9h2v1h-2zM0 10h7v1h-7zM9 10h3v1h-3zM1 11h10v1h-10zM1 12h9v1h-9zM2 13h7v1h-7zM3 14h4v1h-4z'/%3E%3Cpath fill='%23d9cfb8' d='M13 2h1v1h-1zM13 3h2v2h-2zM14 5h2v2h-2zM13 7h3v3h-3zM12 10h4v1h-4zM11 11h4v1h-4zM10 12h5v1h-5zM9 13h5v1h-5zM7 14h6v1h-6zM5 15h6v1h-6z'/%3E%3Cpath fill='%23c9bea2' d='M5 3h1v1h-1zM4 4h2v1h-2zM10 5h1v1h-1zM9 6h2v1h-2zM8 10h1v1h-1z'/%3E%3Cpath fill='%232a2232' d='M3 6h1v1h-1zM11 6h1v1h-1zM2 7h3v1h-3zM6 7h1v1h-1zM8 7h1v1h-1zM10 7h3v1h-3zM2 8h11v1h-11zM2 9h1v1h-1zM5 9h5v1h-5zM12 9h1v1h-1zM7 10h1v1h-1z'/%3E%3C/svg%3E");
  --ck-art-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='64' viewBox='0 0 320 64' shape-rendering='crispEdges'%3E%3Cpolygon fill='%234a4262' points='0,50 30,46 60,49 100,44 150,47 200,43 250,47 290,45 320,50 320,64 0,64'/%3E%3Cg fill='%235c5464'%3E%3Crect x='20' y='40' width='16' height='18'/%3E%3Cpolygon points='23,40 28,23 33,40'/%3E%3Crect x='27' y='17' width='2' height='7'/%3E%3Crect x='25' y='19' width='6' height='2'/%3E%3Cpolygon points='272,58 272,36 276,34 280,37 283,33 286,36 286,58'/%3E%3C/g%3E%3Crect fill='%23ff8a1f' x='27' y='46' width='2' height='4'/%3E%3Crect fill='%23ff8a1f' x='278' y='42' width='2' height='3'/%3E%3Cg fill='%234f4559'%3E%3Cpolygon points='86,58 98,50 150,49 162,58'/%3E%3Cpolygon points='96,52 97,26 107,25 108,52'/%3E%3Cpolygon points='94,27 101,9 110,26'/%3E%3Crect x='100' y='3' width='1' height='7'/%3E%3Crect x='98' y='5' width='5' height='1'/%3E%3Cpolygon points='106,52 105,34 148,31 150,52'/%3E%3Cpolygon points='110,35 112,22 142,19 146,33'/%3E%3Cpolygon points='107,24 126,5 147,20'/%3E%3Cpolygon points='134,13 134,3 139,2 140,11'/%3E%3Cpolygon points='119,45 127,40 135,44'/%3E%3Crect x='122' y='44' width='10' height='8'/%3E%3C/g%3E%3Crect fill='%235a3a22' x='125' y='46' width='4' height='6'/%3E%3Cg fill='%231e1826'%3E%3Crect x='100' y='32' width='3' height='4'/%3E%3Crect x='115' y='26' width='5' height='5'/%3E%3Crect x='131' y='25' width='5' height='5'/%3E%3C/g%3E%3Crect fill='%23ff8a1f' x='109' y='40' width='5' height='5'/%3E%3Crect fill='%231e1826' x='138' y='38' width='5' height='5'/%3E%3Cg fill='%234f4559'%3E%3Crect x='117' y='26' width='1' height='5'/%3E%3Crect x='133' y='25' width='1' height='5'/%3E%3Crect x='111' y='40' width='1' height='5'/%3E%3Crect x='109' y='42' width='5' height='1'/%3E%3C/g%3E%3Crect fill='%237dffd4' x='125' y='13' width='3' height='3'/%3E%3Crect fill='%234f4559' x='126' y='13' width='1' height='3'/%3E%3Cg fill='%237c7688'%3E%3Crect x='56' y='50' width='6' height='8'/%3E%3Crect x='57' y='49' width='4' height='1'/%3E%3Crect x='68' y='46' width='2' height='12'/%3E%3Crect x='66' y='48' width='6' height='2'/%3E%3Cpolygon points='76,58 77,51 82,52 81,58'/%3E%3Crect x='86' y='53' width='4' height='5'/%3E%3Crect x='87' y='52' width='2' height='1'/%3E%3Crect x='172' y='46' width='7' height='12'/%3E%3Crect x='173' y='45' width='5' height='1'/%3E%3Crect x='188' y='43' width='2' height='15'/%3E%3Crect x='185' y='46' width='8' height='2'/%3E%3Crect x='197' y='51' width='5' height='7'/%3E%3Crect x='198' y='50' width='3' height='1'/%3E%3C/g%3E%3Cg fill='%233c3236'%3E%3Crect x='158' y='52' width='48' height='1'/%3E%3Crect x='158' y='55' width='48' height='1'/%3E%3Crect x='158' y='49' width='1' height='9'/%3E%3Crect x='161' y='49' width='1' height='9'/%3E%3Crect x='164' y='49' width='1' height='9'/%3E%3Crect x='167' y='49' width='1' height='9'/%3E%3Crect x='170' y='49' width='1' height='9'/%3E%3Crect x='173' y='49' width='1' height='9'/%3E%3Crect x='176' y='49' width='1' height='9'/%3E%3Crect x='179' y='49' width='1' height='9'/%3E%3Crect x='182' y='49' width='1' height='9'/%3E%3Crect x='185' y='49' width='1' height='9'/%3E%3Crect x='188' y='49' width='1' height='9'/%3E%3Crect x='191' y='49' width='1' height='9'/%3E%3Crect x='194' y='49' width='1' height='9'/%3E%3Crect x='197' y='49' width='1' height='9'/%3E%3Crect x='200' y='49' width='1' height='9'/%3E%3Crect x='203' y='49' width='1' height='9'/%3E%3Cpolygon points='232,58 233,40 231,30 234,30 236,40 237,58'/%3E%3Cpolygon points='233,37 222,29 219,24 221,24 225,28 234,34'/%3E%3Cpolygon points='235,33 244,23 249,22 247,25 236,35'/%3E%3Cpolygon points='232,31 228,20 230,20 234,29'/%3E%3Crect x='219' y='21' width='1' height='3'/%3E%3Crect x='249' y='20' width='1' height='2'/%3E%3Crect x='227' y='17' width='1' height='3'/%3E%3Crect x='244' y='20' width='3' height='2'/%3E%3Crect x='245' y='19' width='1' height='1'/%3E%3Crect x='247' y='20' width='1' height='1'/%3E%3C/g%3E%3Cpolygon fill='%233e3a28' points='0,57 20,56 45,58 80,57 110,58 150,56 190,55 214,57 240,54 268,56 300,55 320,57 320,64 0,64'/%3E%3Cg fill='%23ff8a1f'%3E%3Crect x='113' y='54' width='4' height='3'/%3E%3Crect x='141' y='55' width='3' height='2'/%3E%3Crect x='61' y='56' width='3' height='2'/%3E%3C/g%3E%3Cg fill='%234d7a2a'%3E%3Crect x='114' y='53' width='1' height='1'/%3E%3Crect x='142' y='54' width='1' height='1'/%3E%3Crect x='62' y='55' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23b8500a'%3E%3Crect x='114' y='55' width='1' height='1'/%3E%3Crect x='116' y='55' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%231e1826'%3E%3Crect x='27' y='46' width='2' height='4'/%3E%3Crect x='278' y='42' width='2' height='3'/%3E%3Crect x='109' y='40' width='5' height='5'/%3E%3C/g%3E%3Cg fill='%234f4559'%3E%3Crect x='111' y='40' width='1' height='5'/%3E%3Crect x='109' y='42' width='5' height='1'/%3E%3C/g%3E%3Cg fill='%238a8296'%3E%3Crect x='56' y='50' width='1' height='8'/%3E%3Crect x='172' y='46' width='1' height='12'/%3E%3Crect x='197' y='51' width='1' height='7'/%3E%3Crect x='86' y='53' width='1' height='5'/%3E%3C/g%3E%3Cg fill='%235a5a34'%3E%3Crect x='6' y='58' width='9' height='1'/%3E%3Crect x='48' y='59' width='7' height='1'/%3E%3Crect x='150' y='58' width='6' height='1'/%3E%3Crect x='210' y='59' width='8' height='1'/%3E%3Crect x='288' y='58' width='7' height='1'/%3E%3C/g%3E%3C/svg%3E");
  --ck-twinkle: 1;
}
html[data-look="spooky"][data-sky="dusk"] {
  --ck-sky-1: #120820; --ck-sky-2: #2e1440; --ck-sky-3: #6a2440; --ck-glow: #e0581a;
  --ck-art-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80' shape-rendering='crispEdges'%3E%3Crect x='14' y='13' width='1' height='1' fill='%23cdbfe8'/%3E%3Crect x='1' y='25' width='1' height='1' fill='%2354467a'/%3E%3Crect x='8' y='62' width='1' height='1' fill='%23cdbfe8'/%3E%3Crect x='36' y='29' width='1' height='1' fill='%2354467a'/%3E%3Crect x='7' y='31' width='1' height='1' fill='%2354467a'/%3E%3Crect x='22' y='52' width='1' height='1' fill='%2354467a'/%3E%3Crect x='28' y='54' width='1' height='1' fill='%2354467a'/%3E%3Crect x='12' y='59' width='1' height='1' fill='%23cdbfe8'/%3E%3Crect x='93' y='70' width='1' height='1' fill='%2354467a'/%3E%3C/svg%3E");
  --ck-art-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff9a4a' d='M5 0h6v1h-6zM3 1h10v1h-10zM2 2h11v1h-11zM1 3h4v1h-4zM6 3h7v2h-7zM1 4h3v1h-3zM0 5h10v1h-10zM11 5h3v1h-3zM0 6h3v1h-3zM4 6h5v1h-5zM12 6h2v1h-2zM0 7h2v3h-2zM5 7h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM3 9h2v1h-2zM10 9h2v1h-2zM0 10h7v1h-7zM9 10h3v1h-3zM1 11h10v1h-10zM1 12h9v1h-9zM2 13h7v1h-7zM3 14h4v1h-4z'/%3E%3Cpath fill='%23e0642a' d='M13 2h1v1h-1zM13 3h2v2h-2zM14 5h2v2h-2zM13 7h3v3h-3zM12 10h4v1h-4zM11 11h4v1h-4zM10 12h5v1h-5zM9 13h5v1h-5zM7 14h6v1h-6zM5 15h6v1h-6z'/%3E%3Cpath fill='%23c8501e' d='M5 3h1v1h-1zM4 4h2v1h-2zM10 5h1v1h-1zM9 6h2v1h-2zM8 10h1v1h-1z'/%3E%3Cpath fill='%231e0c18' d='M3 6h1v1h-1zM11 6h1v1h-1zM2 7h3v1h-3zM6 7h1v1h-1zM8 7h1v1h-1zM10 7h3v1h-3zM2 8h11v1h-11zM2 9h1v1h-1zM5 9h5v1h-5zM12 9h1v1h-1zM7 10h1v1h-1z'/%3E%3C/svg%3E");
}
/* When it changes, the old sky fades into the new (the effects script, a View Transition; none under
   reduced motion). Taps go straight through to the page while it does. */
html[data-look="spooky"][data-sky-fade]::view-transition { pointer-events: none; }
html[data-look="spooky"][data-sky-fade]::view-transition-group(root),
html[data-look="spooky"][data-sky-fade]::view-transition-old(root),
html[data-look="spooky"][data-sky-fade]::view-transition-new(root) { animation-duration: 1.6s; }
html[data-look="spooky"][data-sky-fade="quick"]::view-transition-group(root),
html[data-look="spooky"][data-sky-fade="quick"]::view-transition-old(root),
html[data-look="spooky"][data-sky-fade="quick"]::view-transition-new(root) { animation-duration: .4s; }

/* ==== This site's Castle rules, rescoped to Spooky (make-themes.ps1) ==== */
/* Sir Mucksalot in Castle: the look was born for this one. The title is an old MMO's login screen
   (the name in gold pixels between two torches, a stone-framed box, Begin as the big stone button,
   the ten fortunes as a hiscores table); a scene is a page of parchment with an illuminated capital
   and the choices as numbered stone buttons; an ending is a "You survived the night!" scroll, gilded and
   crowned for the crown, plastered in mud for the slop, graded in between.
   Nothing loops while you read a scene (castle.js stands still too); nothing moves under reduced motion. */

html[data-look="spooky"] {
  --mk-gutter: 16px;
  --mk-in: 30px;          /* how far a framed box's contents sit inside it (12px frame + padding) */
  --mk-mud: #c49a5c;      /* the slop, light enough to read on the dark */
  /* this site's own pixel art, drawn like the kit's (scale by whole numbers) */
  --mk-art-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M1 0h1v1h-1zM7 0h1v1h-1zM13 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM6 1h1v1h-1zM8 1h1v1h-1zM12 1h1v1h-1zM14 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM12 2h1v1h-1zM14 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM14 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM10 4h1v1h-1zM14 4h1v1h-1zM0 5h1v1h-1zM14 5h1v1h-1zM0 6h1v1h-1zM14 6h1v1h-1zM0 7h1v1h-1zM14 7h1v1h-1zM0 8h1v1h-1zM14 8h1v1h-1zM0 9h15v1h-15z'/%3E%3Cpath fill='%23fff6c8' d='M1 1h1v1h-1zM7 1h1v1h-1zM13 1h1v1h-1zM1 5h13v1h-13z'/%3E%3Cpath fill='%23ffcf3f' d='M1 2h1v1h-1zM7 2h1v1h-1zM13 2h1v1h-1zM1 3h2v1h-2zM6 3h3v1h-3zM12 3h2v1h-2zM1 4h3v1h-3zM5 4h5v1h-5zM11 4h3v1h-3zM1 6h2v1h-2zM4 6h3v1h-3zM8 6h3v1h-3zM12 6h2v1h-2zM1 7h13v1h-13z'/%3E%3Cpath fill='%23e0441c' d='M3 6h1v1h-1zM11 6h1v1h-1z'/%3E%3Cpath fill='%233fd0ff' d='M7 6h1v1h-1z'/%3E%3Cpath fill='%239a6a12' d='M1 8h13v1h-13z'/%3E%3C/svg%3E"); /* 15 x 10 */
  --mk-art-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='9' viewBox='0 0 7 9' shape-rendering='crispEdges'%3E%3Cpath fill='%238c7f6a' d='M2 0h3v1h-3zM1 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM5 2h1v1h-1z'/%3E%3Cpath fill='%23000000' d='M0 3h7v1h-7zM0 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM6 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM6 6h1v1h-1zM0 7h1v1h-1zM6 7h1v1h-1zM0 8h7v1h-7z'/%3E%3Cpath fill='%238c7f6a' d='M1 4h5v1h-5z'/%3E%3Cpath fill='%235d5447' d='M1 5h2v1h-2zM4 5h2v1h-2zM1 6h2v1h-2zM4 6h2v1h-2zM1 7h5v1h-5z'/%3E%3C/svg%3E"); /* 7 x 9 */
  --mk-art-pig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M1 0h2v1h-2zM9 0h2v1h-2zM0 1h1v1h-1zM3 1h1v1h-1zM8 1h1v1h-1zM11 1h1v1h-1zM0 2h1v1h-1zM4 2h4v1h-4zM11 2h1v1h-1zM0 3h1v1h-1zM11 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM9 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM3 6h6v1h-6zM11 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM9 7h1v1h-1zM11 7h1v1h-1zM0 8h1v1h-1zM2 8h1v1h-1zM4 8h1v1h-1zM7 8h1v1h-1zM9 8h1v1h-1zM11 8h1v1h-1zM0 9h1v1h-1zM2 9h1v1h-1zM9 9h1v1h-1zM11 9h1v1h-1zM0 10h1v1h-1zM3 10h6v1h-6zM11 10h1v1h-1zM1 11h1v1h-1zM10 11h1v1h-1zM2 12h8v1h-8z'/%3E%3Cpath fill='%23c4606f' d='M1 1h1v1h-1zM10 1h1v1h-1zM1 2h1v1h-1zM10 2h1v1h-1z'/%3E%3Cpath fill='%23f2a3ae' d='M2 1h1v1h-1zM9 1h1v1h-1zM2 2h2v1h-2zM8 2h2v1h-2zM1 3h10v1h-10zM1 4h1v1h-1zM3 4h6v1h-6zM10 4h1v1h-1zM1 5h3v1h-3zM5 5h6v1h-6zM1 6h2v1h-2zM9 6h2v1h-2zM1 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM10 8h1v1h-1zM1 9h1v1h-1zM1 10h2v1h-2zM3 11h3v1h-3z'/%3E%3Cpath fill='%235a3d1a' d='M4 5h1v1h-1zM8 9h1v1h-1zM10 9h1v1h-1zM9 10h2v1h-2zM2 11h1v1h-1zM6 11h4v1h-4z'/%3E%3Cpath fill='%23ffd0d4' d='M3 7h6v1h-6zM3 8h1v1h-1zM5 8h2v1h-2zM8 8h1v1h-1zM3 9h5v1h-5z'/%3E%3C/svg%3E"); /* 12 x 13 */
  --mk-art-mud-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h12v1h-12zM0 1h1v1h-1zM11 1h1v1h-1zM0 2h1v1h-1zM11 2h1v1h-1zM0 3h1v1h-1zM3 3h6v1h-6zM11 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM8 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM8 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM8 6h1v1h-1zM11 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM8 7h1v1h-1zM11 7h1v1h-1zM0 8h1v1h-1zM3 8h6v1h-6zM11 8h1v1h-1zM0 9h1v1h-1zM11 9h1v1h-1zM0 10h1v1h-1zM11 10h1v1h-1zM0 11h12v1h-12z'/%3E%3Cpath fill='%238a6b3c' d='M1 1h9v1h-9zM1 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1zM1 8h1v1h-1zM1 9h1v1h-1z'/%3E%3Cpath fill='%235e4524' d='M10 1h1v1h-1zM3 2h6v1h-6zM2 3h1v1h-1zM9 3h1v1h-1zM2 4h1v1h-1zM9 4h1v1h-1zM2 5h1v1h-1zM9 5h1v1h-1zM2 6h1v1h-1zM9 6h1v1h-1zM2 7h1v1h-1zM9 7h1v1h-1zM2 8h1v1h-1zM9 8h1v1h-1zM3 9h6v1h-6zM1 10h1v1h-1z'/%3E%3Cpath fill='%237d8f2c' d='M2 2h1v1h-1zM9 2h1v1h-1zM2 9h1v1h-1zM9 9h1v1h-1z'/%3E%3Cpath fill='%232e200d' d='M10 2h1v1h-1zM10 3h1v1h-1zM10 4h1v1h-1zM10 5h1v1h-1zM10 6h1v1h-1zM10 7h1v1h-1zM10 8h1v1h-1zM10 9h1v1h-1zM2 10h9v1h-9z'/%3E%3C/svg%3E"); /* 12 x 12 */
  --mk-art-drips: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7' viewBox='0 0 16 7' shape-rendering='crispEdges'%3E%3Cpath fill='%236b4c24' d='M0 0h16v1h-16z'/%3E%3Cpath fill='%234a3418' d='M0 1h16v1h-16zM0 2h16v1h-16zM1 3h3v1h-3zM6 3h4v1h-4zM13 3h2v1h-2zM2 4h1v1h-1zM7 4h2v1h-2zM8 5h1v1h-1z'/%3E%3Cpath fill='%231e1408' d='M0 3h1v1h-1zM4 3h1v1h-1zM10 3h1v1h-1zM12 3h1v1h-1zM15 3h1v1h-1zM1 4h1v1h-1zM3 4h1v1h-1zM6 4h1v1h-1zM9 4h1v1h-1zM13 4h2v1h-2zM2 5h1v1h-1zM7 5h1v1h-1zM9 5h1v1h-1zM8 6h1v1h-1z'/%3E%3C/svg%3E"); /* 16 x 7 */
  --mk-art-splat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' shape-rendering='crispEdges'%3E%3Cpath fill='%235a3d1a' fill-opacity='.18' d='M8 0h1v1h-1zM12 1h1v1h-1zM3 2h1v1h-1zM16 3h1v1h-1zM0 5h1v1h-1zM14 5h1v1h-1zM16 7h1v1h-1zM0 8h1v1h-1zM10 10h1v1h-1zM2 11h1v1h-1z'/%3E%3Cpath fill='%235a3d1a' fill-opacity='.30' d='M6 1h4v1h-4zM4 2h8v1h-8zM2 3h11v1h-11zM1 4h13v1h-13zM1 5h13v1h-13zM1 6h13v1h-13zM2 7h12v1h-12zM3 8h10v1h-10zM4 9h4v1h-4zM9 9h3v1h-3zM5 10h2v1h-2z'/%3E%3C/svg%3E"); /* 20 x 12 */
  --mk-art-roll-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='9' viewBox='0 0 1 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h1v1h-1zM0 8h1v1h-1z'/%3E%3Cpath fill='%23b8955c' d='M0 1h1v1h-1zM0 6h1v1h-1z'/%3E%3Cpath fill='%23e8d5a5' d='M0 2h1v1h-1zM0 5h1v1h-1z'/%3E%3Cpath fill='%23f3e6c2' d='M0 3h1v1h-1zM0 4h1v1h-1z'/%3E%3Cpath fill='%237a5a30' d='M0 7h1v1h-1z'/%3E%3C/svg%3E"); /* 1 x 9 */
  --mk-art-roll-end: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='9' viewBox='0 0 5 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M2 0h3v1h-3zM1 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM0 6h1v1h-1zM4 6h1v1h-1zM1 7h1v1h-1zM4 7h1v1h-1zM2 8h3v1h-3z'/%3E%3Cpath fill='%23a8743a' d='M2 1h1v1h-1zM1 2h2v1h-2zM1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1z'/%3E%3Cpath fill='%236b4320' d='M3 1h1v1h-1zM3 2h1v1h-1zM2 3h2v1h-2zM2 4h2v1h-2zM2 5h2v1h-2zM1 6h2v1h-2zM2 7h1v1h-1z'/%3E%3Cpath fill='%233a2410' d='M3 6h1v1h-1zM3 7h1v1h-1z'/%3E%3C/svg%3E"); /* 5 x 9 */
  --mk-art-roll-end-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='9' viewBox='0 0 5 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h3v1h-3zM0 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM0 6h1v1h-1zM4 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM0 8h3v1h-3z'/%3E%3Cpath fill='%236b4320' d='M1 1h1v1h-1zM1 2h1v1h-1zM1 3h2v1h-2zM1 4h2v1h-2zM1 5h2v1h-2zM2 6h2v1h-2zM2 7h1v1h-1z'/%3E%3Cpath fill='%23a8743a' d='M2 1h1v1h-1zM2 2h2v1h-2zM3 3h1v1h-1zM3 4h1v1h-1zM3 5h1v1h-1z'/%3E%3Cpath fill='%233a2410' d='M1 6h1v1h-1zM1 7h1v1h-1z'/%3E%3C/svg%3E"); /* 5 x 9 */
}

/* ---------------- the frame ---------------- */
html[data-look="spooky"] *, html[data-look="spooky"] *::before, html[data-look="spooky"] *::after { box-sizing: border-box; }
html[data-look="spooky"] [hidden] { display: none !important; } /* the screens set display: grid; hidden must still hide them */
html[data-look="spooky"] { background: var(--ck-sky-1); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-look="spooky"] body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  color: var(--ck-white); font: 400 18px/1.55 var(--ck-serif); background: none;
  -webkit-tap-highlight-color: transparent;
}
html[data-look="spooky"] a { color: var(--ck-orange); text-underline-offset: 3px; }
html[data-look="spooky"] button { font: inherit; color: inherit; margin: 0; border: 0; background: none; cursor: pointer; }
html[data-look="spooky"] :focus-visible { outline: 2px solid var(--ck-yellow); outline-offset: 2px; }
html[data-look="spooky"] ::selection { color: #000; background: var(--ck-gold); text-shadow: none; }

/* the sky (stars, moon), the castle on the horizon in front of the dragon, and a second, smaller
   field of stars that twinkles on a slow two-step (the only loop besides the torches) */
html[data-look="spooky"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: var(--ck-art-moon) right 80px top 10px / 48px 48px no-repeat, var(--ck-art-stars) 0 0 / 360px 240px, var(--ck-sky);
}
html[data-look="spooky"] body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 192px; z-index: -1; pointer-events: none;
  background: var(--ck-art-skyline) center bottom / 960px 192px repeat-x;
}
html[data-look="spooky"] .ambient { position: fixed; inset: 0 0 30% 0; z-index: -3; pointer-events: none; }
html[data-look="spooky"] .ambient i { display: none; }
html[data-look="spooky"] .ambient i:first-child {
  display: block; position: absolute; inset: 0; opacity: .7;
  background: var(--ck-art-stars) 70px 46px / 240px 160px;
  animation: ck-twinkle 6s steps(1) infinite;
}

html[data-look="spooky"] .top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 680px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) var(--mk-gutter) 4px;
}
html[data-look="spooky"] .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; color: var(--ck-yellow); text-decoration: none; }
html[data-look="spooky"] .brand-mark { flex: none; width: 30px; height: 20px; background: var(--mk-art-crown) 0 0 / 30px 20px no-repeat; filter: drop-shadow(2px 2px 0 #000); }
html[data-look="spooky"] .brand-name { font: 20px/1 var(--ck-pixel); text-shadow: var(--ck-shadow); }
@media (hover: hover) { html[data-look="spooky"] .brand:hover .brand-name { color: var(--ck-white); } }
/* on the title the big gold name says it already: the corner keeps just the crown (and its name for screen readers) */
html[data-look="spooky"] body[data-screen="title"] .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html[data-look="spooky"] main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 8px var(--mk-gutter) 36px; }
html[data-look="spooky"] .foot { width: 100%; max-width: 640px; margin: 0 auto; padding: 4px var(--mk-gutter) max(26px, env(safe-area-inset-bottom)); }
html[data-look="spooky"] .foot-line { margin: 0; text-align: center; font: 15px/1.5 var(--ck-serif); color: var(--ck-dim); text-shadow: 1px 1px 0 #000; }
@media (hover: hover) { html[data-look="spooky"] .foot-line a:hover { color: var(--ck-yellow); } }
/* by day (html[data-sky]: the 16-bit looks follow the real sky) the castle on the horizon is lit and
   the blue is paler than the night's, so the words straight on the sky get a hard black outline and
   the footer goes white */
html[data-look="spooky"][data-sky="day"] .kicker { text-shadow: var(--ck-outline); }
html[data-look="spooky"][data-sky="day"] .foot-line {
  color: var(--ck-white);
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 2px 0 #000;
}

/* every new screen comes in like an old game's: three hard steps, not a glide */
html[data-look="spooky"] .screen.enter { animation: mk-ck-in .27s steps(3, end) both; }
@keyframes mk-ck-in { from { opacity: 0; transform: translateY(9px); } }

/* ---- the shared pieces: stone buttons, framed boxes, pixel headings ---- */
html[data-look="spooky"] .btn-begin, html[data-look="spooky"] .choice, html[data-look="spooky"] .link-btn {
  color: var(--ck-white); text-shadow: var(--ck-shadow);
  background: var(--ck-stone); border: 2px solid #000; box-shadow: var(--ck-raise); clip-path: var(--ck-notch);
}
@media (hover: hover) { html[data-look="spooky"] .btn-begin:hover, html[data-look="spooky"] .choice:hover, html[data-look="spooky"] .link-btn:hover { color: var(--ck-yellow); } }
html[data-look="spooky"] .btn-begin:active, html[data-look="spooky"] .choice:active, html[data-look="spooky"] .link-btn:active { color: var(--ck-yellow); box-shadow: var(--ck-press); }
/* the notch would clip an outline outside the button, so the focus ring sits just inside the bevel */
html[data-look="spooky"] .btn-begin:focus-visible, html[data-look="spooky"] .choice:focus-visible, html[data-look="spooky"] .link-btn:focus-visible { color: var(--ck-yellow); outline-offset: -7px; }

html[data-look="spooky"] .btn-begin {
  display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 12px 24px;
  font: 30px/1 var(--ck-pixel); color: var(--ck-gold);
}

/* ---------------- the title: the login screen ---------------- */
html[data-look="spooky"] .title-screen { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-top: 6px; }
html[data-look="spooky"] .kicker { grid-row: 1; grid-column: 1; margin: 0 0 14px; font: 20px/1.2 var(--ck-pixel); color: var(--ck-orange); text-shadow: var(--ck-shadow); }
html[data-look="spooky"] .title {
  grid-row: 2; grid-column: 1; display: grid; grid-template-columns: 36px min-content 36px; align-items: center; column-gap: 18px;
  margin: 0 0 26px; font: 40px/1.1 var(--ck-pixel); color: var(--ck-gold); text-shadow: var(--ck-outline);
}
html[data-look="spooky"] .title::before, html[data-look="spooky"] .title::after {
  content: ""; width: 36px; height: 90px; background: var(--ck-art-torch) 0 0 / 144px 90px no-repeat;
  --ck-torch-px: 3px; animation: ck-torch .6s steps(4) infinite;
}
html[data-look="spooky"] .title::after { animation-delay: -.45s; } /* the two flames out of step */
/* the login box: a stone frame behind the welcome, the blurb and Begin (rows 3 to 5) */
html[data-look="spooky"] .title-screen::before {
  content: ""; grid-row: 3 / 6; grid-column: 1; justify-self: stretch;
  border: 12px solid transparent; border-image: var(--ck-art-frame) 4 / 12px; background: var(--ck-panel) padding-box;
  box-shadow: var(--ck-drop);
}
html[data-look="spooky"] .tagline { grid-row: 3; grid-column: 1; max-width: 30em; margin: var(--mk-in) var(--mk-in) 0; font: 18px/1.55 var(--ck-serif); color: var(--ck-white); text-wrap: pretty; }
html[data-look="spooky"] .tagline::before {
  content: "Muckle Wallop, after dark"; content: "Muckle Wallop, after dark" / "";
  display: block; margin: 0 0 12px; font: 20px/1.2 var(--ck-pixel); color: var(--ck-yellow); text-shadow: var(--ck-shadow);
}
html[data-look="spooky"] .meta { grid-row: 4; grid-column: 1; margin: 16px var(--mk-in) 0; font: 20px/1.3 var(--ck-pixel); color: var(--ck-orange); text-shadow: var(--ck-shadow); text-wrap: balance; }
html[data-look="spooky"] .title-screen .btn-begin { grid-row: 5; grid-column: 1; justify-self: stretch; margin: 22px var(--mk-in) var(--mk-in); }

/* the endings found so far: a hiscores table in its own frame */
html[data-look="spooky"] .found {
  grid-row: 6; grid-column: 1; width: 100%; margin: 26px 0 0; padding: 14px 6px 6px; text-align: left;
  border: 12px solid transparent; border-image: var(--ck-art-frame) 4 / 12px; background: var(--ck-panel) padding-box;
  box-shadow: var(--ck-drop);
}
html[data-look="spooky"] .found-label { margin: 0 0 12px; font: 20px/1.2 var(--ck-pixel); color: var(--ck-orange); text-shadow: var(--ck-shadow); text-align: center; }

html[data-look="spooky"] .ladder { position: relative; list-style: none; margin: 0; padding: 30px 0 0; display: grid; text-align: left; }
html[data-look="spooky"] .ladder::before, html[data-look="spooky"] .ladder::after { /* the column heads */
  position: absolute; top: 0; font: 20px/1.2 var(--ck-pixel); color: var(--ck-orange); text-shadow: var(--ck-shadow);
}
html[data-look="spooky"] .ladder::before { content: "#"; content: "#" / ""; left: 6px; width: 30px; text-align: right; }
html[data-look="spooky"] .ladder::after { content: "Fate"; content: "Fate" / ""; left: 46px; }
html[data-look="spooky"] .rung {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 10px;
  min-height: 40px; padding: 8px 6px; border-top: 2px solid var(--ck-stone-deep);
  font: 20px/1.2 var(--ck-pixel); color: #968b79; text-shadow: var(--ck-shadow); /* locked: dim, still 5:1 */
}
html[data-look="spooky"] .rung:nth-child(odd) { background: rgba(93, 84, 71, .18); }
html[data-look="spooky"] .rung-n { text-align: right; }
html[data-look="spooky"] .rung-name { overflow-wrap: anywhere; text-wrap: balance; }
html[data-look="spooky"] .rung:not(.is-found) .rung-name::after { /* still locked */
  content: ""; display: inline-block; width: 14px; height: 18px; margin-left: 10px; vertical-align: -1px;
  background: var(--mk-art-lock) 0 0 / 14px 18px no-repeat;
}
html[data-look="spooky"] .rung.is-found { color: var(--ck-white); }
html[data-look="spooky"] .rung.is-found .rung-n { color: var(--ck-yellow); }
html[data-look="spooky"] .rung.is-you { color: var(--ck-yellow); background: rgba(255, 207, 63, .13); border-top-color: transparent; box-shadow: inset 0 0 0 2px var(--ck-gold); }
html[data-look="spooky"] .rung.is-you + .rung { border-top-color: transparent; }
html[data-look="spooky"] .rung-you { grid-row: 1; grid-column: 3; padding: 4px 6px 2px; font: 20px/1 var(--ck-pixel); color: #000; background: var(--ck-gold); text-shadow: none; box-shadow: 2px 2px 0 #000; }

/* ---------------- a scene: a page of parchment ---------------- */
html[data-look="spooky"] .scene-screen { padding-top: 6px; }
html[data-look="spooky"] .scene {
  position: relative; margin: 0; padding: 22px 20px 26px; color: var(--ck-parch-ink);
  background: var(--ck-art-dither) 0 0 / 12px 12px, var(--ck-parchment);
  border: 2px solid #000; box-shadow: inset 0 0 0 3px var(--ck-parch-edge), var(--ck-drop);
}
html[data-look="spooky"] .scene-kicker { margin: 0 0 6px; font: 20px/1.2 var(--ck-pixel); color: var(--ck-parch-red); }
html[data-look="spooky"] .scene-title {
  margin: 0 0 18px; padding: 0 0 14px; outline: none; text-wrap: balance;
  font: 30px/1.15 var(--ck-pixel); color: var(--ck-parch-ink); text-shadow: .1em .1em 0 rgba(184, 149, 92, .75);
  background: linear-gradient(var(--ck-parch-edge), var(--ck-parch-edge)) left bottom / 100% 2px no-repeat;
}
html[data-look="spooky"] .scene-text p { margin: 0 0 .85em; font: 19px/1.6 var(--ck-serif); color: var(--ck-parch-ink); text-wrap: pretty; }
html[data-look="spooky"] .scene-text p:last-child { margin-bottom: 0; }
html[data-look="spooky"] .scene-text p:first-child { display: flow-root; } /* a short first paragraph still holds the whole capital */
html[data-look="spooky"] .scene-text p:first-child::first-letter { /* the illuminated capital, in pixels */
  float: left; margin: 5px 14px 0 0; padding: 10px 14px 10px 18px;
  font: 60px/1 var(--ck-pixel); color: var(--ck-gold); text-shadow: .1em .1em 0 #3a0905;
  background: linear-gradient(var(--ck-parch-red), var(--ck-parch-red)) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat, var(--ck-gold-dark);
  border: 2px solid #000;
}

html[data-look="spooky"] .choices { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
html[data-look="spooky"] .choices::before {
  content: "Dare you choose?"; content: "Dare you choose?" / "";
  font: 20px/1.2 var(--ck-pixel); color: var(--ck-yellow); text-shadow: var(--ck-shadow); text-align: center;
}
html[data-look="spooky"] .choice {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 9px 14px 9px 9px;
  font: 20px/1.25 var(--ck-pixel); text-align: left;
}
html[data-look="spooky"] .choice-n { /* the key that picks it */
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  color: var(--ck-yellow); background: var(--ck-well); box-shadow: var(--ck-sunk);
}
html[data-look="spooky"] .choice-text { flex: 1; min-width: 0; }

html[data-look="spooky"] .scene-nav { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 0; }
html[data-look="spooky"] .link-btn { min-height: 46px; padding: 12px 14px 10px; font: 20px/1 var(--ck-pixel); }
html[data-look="spooky"] .scene-nav .link-btn[hidden] + .link-btn { margin-left: auto; }

/* ---------------- an ending: a quest-complete scroll ---------------- */
html[data-look="spooky"] .end-screen {
  --mk-frame: var(--ck-art-frame); --mk-name: var(--ck-gold);
  display: grid; grid-template-columns: minmax(0, 1fr); text-align: center; padding-top: 6px;
}
/* the head: a framed box behind "You survived the night!", the ending's number and its name (rows 1 and 2) */
html[data-look="spooky"] .end-screen::before {
  content: ""; grid-row: 1 / 3; grid-column: 1;
  border: 12px solid transparent; border-image: var(--mk-frame) 4 / 12px; background: var(--ck-panel) padding-box;
  box-shadow: var(--ck-drop);
}
html[data-look="spooky"] .end-rank { grid-row: 1; grid-column: 1; margin: var(--mk-in) 24px 0; font: 20px/1.2 var(--ck-pixel); color: var(--ck-orange); text-shadow: var(--ck-shadow); }
html[data-look="spooky"] .end-rank::before {
  content: "You survived the night!"; content: "You survived the night!" / "";
  display: block; margin: 0 0 10px; font: 30px/1.15 var(--ck-pixel); color: var(--ck-yellow);
}
html[data-look="spooky"] .end-name {
  grid-row: 2; grid-column: 1; margin: 14px 24px var(--mk-in); outline: none; text-wrap: balance;
  font: 40px/1.1 var(--ck-pixel); color: var(--mk-name); text-shadow: var(--ck-outline);
}
/* the tale: a scroll, rolled at top and bottom */
html[data-look="spooky"] .end-scene { grid-row: 3; grid-column: 1; margin: 40px 0 0; padding: 30px 22px 30px; text-align: left; }
html[data-look="spooky"] .end-scene::before, html[data-look="spooky"] .end-scene::after {
  content: ""; position: absolute; left: -10px; right: -10px; height: 18px;
  background:
    var(--mk-art-roll-end) left top / 10px 18px no-repeat, var(--mk-art-roll-end-r) right top / 10px 18px no-repeat,
    linear-gradient(180deg, #000 0 2px, #b8955c 2px 4px, #e8d5a5 4px 6px, #f3e6c2 6px 10px, #e8d5a5 10px 12px, #b8955c 12px 14px, #7a5a30 14px 16px, #000 16px 18px) 10px 0 / calc(100% - 20px) 18px no-repeat;
}
html[data-look="spooky"] .end-scene::before { top: -12px; }
html[data-look="spooky"] .end-scene::after { bottom: -12px; }
html[data-look="spooky"] .end-title { margin: 0 0 16px; font: 30px/1.15 var(--ck-pixel); color: var(--ck-parch-red); }

/* your fortunes: the hiscores again, in a frame behind rows 4 to 6 (painted first, so it sits behind) */
html[data-look="spooky"] .end-screen::after {
  content: ""; order: -1; grid-row: 4 / 7; grid-column: 1; margin-top: 40px;
  border: 12px solid transparent; border-image: var(--ck-art-frame) 4 / 12px; background: var(--ck-panel) padding-box;
  box-shadow: var(--ck-drop);
}
html[data-look="spooky"] .ladder-head { grid-row: 4; grid-column: 1; margin: calc(40px + 26px) 24px 14px; font: 20px/1.2 var(--ck-pixel); color: var(--ck-yellow); text-shadow: var(--ck-shadow); }
html[data-look="spooky"] .end-screen .ladder { grid-row: 5; grid-column: 1; margin: 0 18px; }
html[data-look="spooky"] .end-screen .found-label { grid-row: 6; grid-column: 1; margin: 14px var(--mk-in) var(--mk-in); font: italic 17px/1.45 var(--ck-serif); color: var(--ck-dim); text-shadow: none; text-wrap: pretty; }
html[data-look="spooky"] .end-screen .btn-begin { grid-row: 7; grid-column: 1; margin: 28px 0 0; }
html[data-look="spooky"] .end-screen .scene-nav { grid-row: 8; grid-column: 1; justify-content: center; }

/* graded, from the crown down to the slop: the frame, the name's colour, and what the scroll says */
html[data-look="spooky"] body[data-rank="1"] .end-screen, html[data-look="spooky"] body[data-rank="2"] .end-screen, html[data-look="spooky"] body[data-rank="3"] .end-screen { --mk-frame: var(--ck-art-frame-gold); }
html[data-look="spooky"] body[data-rank="4"] .end-screen, html[data-look="spooky"] body[data-rank="5"] .end-screen { --mk-name: var(--ck-yellow); }
html[data-look="spooky"] body[data-rank="6"] .end-screen, html[data-look="spooky"] body[data-rank="7"] .end-screen { --mk-name: var(--ck-white); }
html[data-look="spooky"] body[data-rank="8"] .end-screen { --mk-name: var(--ck-green); }
html[data-look="spooky"] body[data-rank="9"] .end-screen { --mk-name: var(--ck-red); }
html[data-look="spooky"] body[data-rank="10"] .end-screen { --mk-name: var(--mk-mud); --mk-frame: var(--mk-art-mud-frame); }
html[data-look="spooky"] body[data-rank="5"] .end-rank::before { content: "You survived. Mostly."; content: "You survived. Mostly." / ""; }
html[data-look="spooky"] body[data-rank="6"] .end-rank::before { content: "Survived? Ish."; content: "Survived? Ish." / ""; color: var(--ck-white); }
html[data-look="spooky"] body[data-rank="7"] .end-rank::before { content: "Ran off screaming"; content: "Ran off screaming" / ""; color: var(--ck-white); }
html[data-look="spooky"] body[data-rank="8"] .end-rank::before { content: "Cursed. Ribbit."; content: "Cursed. Ribbit." / ""; color: var(--ck-red); }
html[data-look="spooky"] body[data-rank="9"] .end-rank::before { content: "Lost your head. Again."; content: "Lost your head. Again." / ""; color: var(--ck-red); }
html[data-look="spooky"] body[data-rank="10"] .end-rank::before { content: "Buried in slop. Boo!"; content: "Buried in slop. Boo!" / ""; color: var(--ck-red); }

/* the crown: a crown on top, torches either side of the name, and the scroll edged in gold */
html[data-look="spooky"] body[data-rank="1"] .end-rank { padding-top: 54px; background: var(--mk-art-crown) center top / 60px 40px no-repeat; }
html[data-look="spooky"] body[data-rank="1"] .end-name { display: grid; grid-template-columns: 36px minmax(0, max-content) 36px; justify-content: center; align-items: center; column-gap: 14px; }
html[data-look="spooky"] body[data-rank="1"] .end-name::before, html[data-look="spooky"] body[data-rank="1"] .end-name::after {
  content: ""; width: 36px; height: 90px; background: var(--ck-art-torch) 0 0 / 144px 90px no-repeat;
  --ck-torch-px: 3px; animation: ck-torch .6s steps(4) infinite;
}
html[data-look="spooky"] body[data-rank="1"] .end-name::after { animation-delay: -.45s; }
html[data-look="spooky"] body[data-rank="1"] .end-scene { box-shadow: inset 0 0 0 3px var(--ck-gold-dark), inset 0 0 0 5px var(--ck-gold), var(--ck-drop); }
/* the slop: a pig in it, mud dripping off the frame, and splattered all over the scroll */
html[data-look="spooky"] body[data-rank="10"] .end-rank { padding-top: 66px; background: var(--mk-art-pig) center top / 48px 52px no-repeat; }
html[data-look="spooky"] body[data-rank="10"] .end-screen::before {
  background: var(--mk-art-drips) 0 0 / 32px 14px repeat-x padding-box, var(--ck-panel) padding-box;
}
html[data-look="spooky"] body[data-rank="10"] .end-scene {
  background:
    var(--mk-art-splat) right -26px top 54px / 120px 72px no-repeat, var(--mk-art-splat) left -30px bottom 40px / 160px 96px no-repeat,
    var(--mk-art-drips) 0 4px / 32px 14px repeat-x, var(--ck-art-dither) 0 0 / 12px 12px, var(--ck-parchment);
  box-shadow: inset 0 0 0 3px #7a5a30, var(--ck-drop);
}

/* ---------------- the very narrowest phones: torches at 2x ---------------- */
@media (max-width: 349px) {
  html[data-look="spooky"] .title, html[data-look="spooky"] body[data-rank="1"] .end-name { grid-template-columns: 24px min-content 24px; column-gap: 10px; }
  html[data-look="spooky"] .title::before, html[data-look="spooky"] .title::after,
  html[data-look="spooky"] body[data-rank="1"] .end-name::before, html[data-look="spooky"] body[data-rank="1"] .end-name::after { width: 24px; height: 60px; background-size: 96px 60px; --ck-torch-px: 2px; }
}

/* ---------------- wider screens: the game in a framed window ---------------- */
@media (min-width: 720px) {
  html[data-look="spooky"] { --mk-gutter: 24px; }
  html[data-look="spooky"] .scene { padding: 30px 34px 32px; }
  html[data-look="spooky"] .scene-text p { font-size: 19.5px; }
}
@media (min-width: 960px) {
  html[data-look="spooky"] body::before { background-position: right 12% top 9%, 0 0, 0 0; }
  html[data-look="spooky"] .top, html[data-look="spooky"] .foot { max-width: 832px; }
  html[data-look="spooky"] main {
    flex: none; display: grid; align-content: center; max-width: 832px; min-height: 600px; margin: 6px auto 0; padding: 30px 48px 44px;
    border: 16px solid transparent; border-image: var(--ck-art-frame) 4 / 16px; background: rgba(7, 6, 26, .66) padding-box;
    box-shadow: var(--ck-drop);
  }
  html[data-look="spooky"] .foot { padding-top: 14px; }
  html[data-look="spooky"] .title-screen, html[data-look="spooky"] .end-screen { grid-template-columns: minmax(0, 560px); justify-content: center; }
  html[data-look="spooky"] .title-screen { padding-top: 18px; }
  html[data-look="spooky"] .scene-text p { font-size: 20px; }
}

/* ---------------- standing still ---------------- */
/* while a scene is being read nothing loops (castle.js stands still too) */
html[data-look="spooky"] body[data-screen="scene"] .ambient i,
html[data-look="spooky"] body[data-screen="scene"] .title::before, html[data-look="spooky"] body[data-screen="scene"] .title::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-look="spooky"] *, html[data-look="spooky"] *::before, html[data-look="spooky"] *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  html[data-look="spooky"] .btn-begin, html[data-look="spooky"] .choice, html[data-look="spooky"] .link-btn, html[data-look="spooky"] .scene,
  html[data-look="spooky"] .found, html[data-look="spooky"] .rung.is-you { border: 2px solid CanvasText; }
  html[data-look="spooky"] body::after, html[data-look="spooky"] .ambient, html[data-look="spooky"] .title::before, html[data-look="spooky"] .title::after,
  html[data-look="spooky"] .end-name::before, html[data-look="spooky"] .end-name::after, html[data-look="spooky"] .end-scene::before, html[data-look="spooky"] .end-scene::after { display: none; }
}

/* ==== Spooky's own touches for this site (castle-look\themes\spooky\sites\mucksalot.css) ==== */
/* the hiscores in crypt colours: a locked ending in violet-grey (6:1 on the panel), the stripes
   violet, and your own in pumpkin (after the stripes, which would cover it otherwise) */
html[data-look="spooky"] .rung { color: #a597bd; }
html[data-look="spooky"] .rung:nth-child(odd) { background: rgba(74, 61, 92, .22); }
html[data-look="spooky"] .rung.is-you { background: rgba(255, 154, 31, .14); }