/*CASTLE_KIT_START*/
/* GENERATED by castle-look\make-castle-kit.ps1 from kit.src.css, font.txt and art.txt - edit those, not this. */
/* ==== The Castle kit: the top of every Frizzy G site's Castle look ====
   A 16-bit castle at night, after the old fantasy-MMO login screens: flaming torches either side of
   a title in yellow pixel letters, hard black drop shadows, bevelled grey-brown stone frames with a
   black outline, a castle on the horizon and a dragon going over now and then (castle.js). Long
   reads go on parchment in a book face, so the pixels never get in the way of reading.
   Everything here is scoped to html[data-look="castle"] and named --ck-*; a site's own Castle rules
   come after this block and use these, so the five sites share one palette, one font, one set of art.

   Pixel discipline (what makes it look 16-bit rather than blurry):
   - Castle Pixel is 10 pixels to the em: use font sizes of 10, 20, 30, 40px (or 15 / 25 at a push)
     and every letter pixel lands on whole screen pixels. One letter pixel = .1em, so a one-pixel
     drop shadow is --ck-shadow (.1em .1em 0 #000) at any size.
   - Art is drawn one SVG pixel per art pixel: scale by whole numbers (background-size 2x, 3x, 4x).
   - No border-radius, no blur, no soft gradients on chrome: bevels are hard inset shadows, corners
     are square (or notched with --ck-notch). Soft light belongs only to the sky and the fire.
   - Body text stays readable: --ck-serif on parchment or the dark panel, never the pixel font for
     paragraphs. The pixel font is for titles, labels, buttons, numbers. */

@font-face {
  font-family: "Castle Pixel";
  src: url(data:font/ttf;base64,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) format("truetype");
  font-weight: 100 900; /* one weight: asking for bold gets this, not a smeared fake bold */
  font-style: normal;
  font-display: block;
}

html[data-look="castle"] {
  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 night sky, top to horizon, and the warm glow behind the castle */
  --ck-sky-1: #07061a; --ck-sky-2: #121030; --ck-sky-3: #241a3c; --ck-glow: #57283a;
  --ck-sky: linear-gradient(180deg, var(--ck-sky-1) 0%, var(--ck-sky-2) 45%, var(--ck-sky-3) 78%, var(--ck-glow) 100%);

  /* stone: grey-brown, lit from the top left, outlined in black */
  --ck-stone: #5d5447; --ck-stone-lit: #8c7f6a; --ck-stone-mid: #463e33; --ck-stone-dark: #2b241b; --ck-stone-deep: #1a1611;
  --ck-black: #000;
  /* the inside of a frame (dark, a little see-through), and an inset well for fields */
  --ck-panel: rgba(18, 14, 10, .92); --ck-well: #0d0b08;

  /* parchment for long reads */
  --ck-parch: #e8d5a5; --ck-parch-lit: #f3e6c2; --ck-parch-edge: #b8955c; --ck-parch-ink: #2b1a0c; --ck-parch-red: #8e1b12;
  --ck-parchment: radial-gradient(120% 90% at 50% 40%, var(--ck-parch-lit) 0%, var(--ck-parch) 55%, var(--ck-parch-edge) 100%);

  /* text: login-screen yellow for titles, menu orange for labels, white for what you read,
     cyan for a hint, green for "yes", red for "no"; gold for the shiny things */
  --ck-yellow: #ffff00; --ck-orange: #ff981f; --ck-white: #ffffff; --ck-dim: #c8bfae;
  --ck-cyan: #00ffff; --ck-green: #00ff00; --ck-red: #ff3a2a; --ck-gold: #ffcf3f; --ck-gold-dark: #9a6a12;
  /* fire, hottest first */
  --ck-fire-1: #fff6c8; --ck-fire-2: #ffd84a; --ck-fire-3: #ff9124; --ck-fire-4: #e0441c; --ck-fire-5: #8a1f12;

  /* hard shadows: one letter pixel down-right, or an outline all round plus the drop (for titles) */
  --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;

  /* bevels, for box-shadow: a raised stone button, the same pressed in, and an inset well */
  --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); /* a hard drop shadow under a raised thing */
  /* square corners with one pixel knocked off (2px): clip-path, for buttons with a 2px black border */
  --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 */
  --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='%235d5447' d='M0 1h2v1h-2zM3 1h4v1h-4zM8 1h5v1h-5zM14 1h1v1h-1zM0 2h5v1h-5zM6 2h1v1h-1zM8 2h1v1h-1zM10 2h5v1h-5zM0 5h1v1h-1zM2 5h1v1h-1zM4 5h4v1h-4zM9 5h2v1h-2zM12 5h2v1h-2zM15 5h1v1h-1zM0 6h3v1h-3zM4 6h2v1h-2zM7 6h4v1h-4zM12 6h4v1h-4z'/%3E%3Cpath fill='%23463e33' d='M7 0h1v3h-1zM15 0h1v3h-1zM0 3h16v1h-16zM3 4h1v3h-1zM11 4h1v3h-1zM0 7h16v1h-16z'/%3E%3Cpath fill='%236e6454' d='M0 0h7v1h-7zM8 0h7v1h-7zM0 4h3v1h-3zM4 4h7v1h-7zM12 4h4v1h-4z'/%3E%3Cpath fill='%23544b3f' d='M2 1h1v1h-1zM13 1h1v1h-1zM5 2h1v1h-1zM9 2h1v1h-1zM1 5h1v1h-1zM8 5h1v1h-1zM14 5h1v1h-1zM6 6h1v1h-1z'/%3E%3C/svg%3E");           /* 16 x 8 wall tile: background-size 48px 24px at 3x */
  --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='%238c7f6a' d='M1 1h9v1h-9zM1 2h1v8h-1z'/%3E%3Cpath fill='%235d5447' d='M10 1h1v1h-1zM3 2h6v1h-6zM2 3h1v6h-1zM9 3h1v6h-1zM3 9h6v1h-6zM1 10h1v1h-1z'/%3E%3Cpath fill='%232b241b' d='M10 2h1v8h-1zM2 10h9v1h-9z'/%3E%3Cpath fill='%23e2b64a' d='M2 2h1v1h-1zM9 2h1v1h-1zM2 9h1v1h-1zM9 9h1v1h-1z'/%3E%3C/svg%3E");           /* 12 x 12 stone frame for border-image (see below) */
  --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='%23ffe58a' d='M1 1h9v1h-9zM1 2h1v8h-1z'/%3E%3Cpath fill='%23d19a2a' d='M10 1h1v1h-1zM3 2h6v1h-6zM2 3h1v6h-1zM9 3h1v6h-1zM3 9h6v1h-6zM1 10h1v1h-1z'/%3E%3Cpath fill='%236e4a0c' d='M10 2h1v8h-1zM2 10h9v1h-9z'/%3E%3Cpath fill='%23fff6c8' d='M2 2h1v1h-1zM9 2h1v1h-1zM2 9h1v1h-1zM9 9h1v1h-1z'/%3E%3C/svg%3E"); /* the same in gold, for the one thing 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='%23fff6c8' d='M5 9h2v3h-2zM17 9h2v3h-2zM29 9h2v3h-2zM41 9h2v3h-2z'/%3E%3Cpath fill='%23ffd84a' d='M6 6h1v1h-1zM18 6h1v1h-1zM29 6h2v2h-2zM41 6h1v1h-1zM5 7h2v1h-2zM17 7h2v1h-2zM41 7h2v1h-2zM4 8h4v1h-4zM16 8h4v1h-4zM28 8h4v1h-4zM40 8h4v1h-4zM4 9h1v2h-1zM7 9h1v2h-1zM16 9h1v2h-1zM19 9h1v2h-1zM27 9h2v3h-2zM31 9h2v3h-2zM40 9h1v2h-1zM43 9h1v2h-1zM3 11h2v1h-2zM7 11h2v1h-2zM15 11h2v1h-2zM19 11h2v1h-2zM39 11h2v1h-2zM43 11h2v1h-2zM4 12h4v1h-4zM16 12h4v1h-4zM28 12h4v1h-4zM40 12h4v1h-4zM5 13h2v1h-2zM17 13h2v1h-2zM29 13h2v1h-2zM41 13h2v1h-2z'/%3E%3Cpath fill='%23ff9124' d='M5 3h1v1h-1zM18 3h1v1h-1zM31 3h1v1h-1zM41 3h1v1h-1zM5 4h2v1h-2zM17 4h2v1h-2zM28 4h1v1h-1zM31 4h2v1h-2zM41 4h2v1h-2zM4 5h3v1h-3zM16 5h3v1h-3zM28 5h4v1h-4zM40 5h3v1h-3zM4 6h2v1h-2zM7 6h1v1h-1zM16 6h2v1h-2zM19 6h1v1h-1zM27 6h2v2h-2zM31 6h2v2h-2zM40 6h1v1h-1zM42 6h2v1h-2zM3 7h2v1h-2zM7 7h2v1h-2zM15 7h2v1h-2zM19 7h2v1h-2zM39 7h2v1h-2zM43 7h2v1h-2zM3 8h1v2h-1zM8 8h1v2h-1zM15 8h1v2h-1zM20 8h1v2h-1zM26 8h2v1h-2zM32 8h2v1h-2zM39 8h1v2h-1zM44 8h1v2h-1zM26 9h1v3h-1zM33 9h1v3h-1zM2 10h2v1h-2zM8 10h2v1h-2zM14 10h2v1h-2zM20 10h2v1h-2zM38 10h2v1h-2zM44 10h2v1h-2zM2 11h1v1h-1zM9 11h1v1h-1zM14 11h1v1h-1zM21 11h1v1h-1zM38 11h1v1h-1zM45 11h1v1h-1zM3 12h1v1h-1zM8 12h1v1h-1zM15 12h1v1h-1zM20 12h1v1h-1zM27 12h1v1h-1zM32 12h1v1h-1zM39 12h1v1h-1zM44 12h1v1h-1zM3 13h2v1h-2zM7 13h2v1h-2zM15 13h2v1h-2zM19 13h2v1h-2zM27 13h2v1h-2zM31 13h2v1h-2zM39 13h2v1h-2zM43 13h2v1h-2zM4 14h5v1h-5zM16 14h5v1h-5zM28 14h5v1h-5zM40 14h5v1h-5z'/%3E%3Cpath fill='%23e0441c' d='M5 1h1v1h-1zM18 1h1v1h-1zM40 1h1v1h-1zM4 2h2v1h-2zM17 2h2v1h-2zM28 2h1v1h-1zM31 2h1v1h-1zM40 2h2v1h-2zM4 3h1v1h-1zM6 3h1v1h-1zM17 3h1v1h-1zM19 3h1v2h-1zM27 3h2v1h-2zM30 3h1v1h-1zM32 3h1v1h-1zM40 3h1v1h-1zM42 3h1v1h-1zM3 4h2v1h-2zM7 4h1v1h-1zM9 4h1v1h-1zM14 4h1v1h-1zM16 4h1v1h-1zM27 4h1v1h-1zM29 4h2v1h-2zM33 4h1v1h-1zM39 4h2v1h-2zM43 4h1v1h-1zM3 5h1v1h-1zM7 5h2v1h-2zM15 5h1v2h-1zM19 5h2v1h-2zM26 5h2v1h-2zM32 5h2v1h-2zM39 5h1v1h-1zM43 5h3v1h-3zM2 6h2v1h-2zM8 6h1v1h-1zM20 6h2v1h-2zM26 6h1v1h-1zM33 6h1v1h-1zM38 6h2v1h-2zM44 6h1v1h-1zM2 7h1v2h-1zM9 7h1v2h-1zM14 7h1v2h-1zM21 7h1v2h-1zM25 7h2v1h-2zM33 7h2v1h-2zM38 7h1v2h-1zM45 7h1v2h-1zM25 8h1v4h-1zM34 8h1v4h-1zM1 9h2v1h-2zM9 9h2v1h-2zM13 9h2v1h-2zM21 9h2v1h-2zM37 9h2v1h-2zM45 9h2v1h-2zM1 10h1v2h-1zM10 10h1v2h-1zM13 10h1v2h-1zM22 10h1v2h-1zM37 10h1v2h-1zM46 10h1v2h-1zM2 12h1v2h-1zM9 12h1v3h-1zM14 12h1v2h-1zM21 12h1v3h-1zM26 12h1v2h-1zM33 12h1v3h-1zM38 12h1v2h-1zM45 12h1v3h-1zM3 14h1v1h-1zM15 14h1v1h-1zM27 14h1v1h-1zM39 14h1v1h-1z'/%3E%3Cpath fill='%238a1f12' d='M5 0h1v1h-1zM18 0h1v1h-1zM40 0h1v1h-1zM6 1h1v1h-1zM19 1h1v1h-1zM28 1h1v1h-1zM32 1h1v2h-1zM39 1h1v1h-1zM9 3h1v1h-1zM14 3h1v1h-1zM45 4h1v1h-1z'/%3E%3Cpath fill='%232a2a32' d='M2 15h1v1h-1zM9 15h1v1h-1zM14 15h1v1h-1zM21 15h1v1h-1zM26 15h1v1h-1zM33 15h1v1h-1zM38 15h1v1h-1zM45 15h1v1h-1zM3 16h1v1h-1zM8 16h1v1h-1zM15 16h1v1h-1zM20 16h1v1h-1zM27 16h1v1h-1zM32 16h1v1h-1zM39 16h1v1h-1zM44 16h1v1h-1zM3 18h1v1h-1zM8 18h1v1h-1zM15 18h1v1h-1zM20 18h1v1h-1zM27 18h1v1h-1zM32 18h1v1h-1zM39 18h1v1h-1zM44 18h1v1h-1zM3 23h1v1h-1zM8 23h1v1h-1zM15 23h1v1h-1zM20 23h1v1h-1zM27 23h1v1h-1zM32 23h1v1h-1zM39 23h1v1h-1zM44 23h1v1h-1z'/%3E%3Cpath fill='%235f5f6b' d='M3 15h6v1h-6zM15 15h6v1h-6zM27 15h6v1h-6zM39 15h6v1h-6zM4 16h4v1h-4zM16 16h4v1h-4zM28 16h4v1h-4zM40 16h4v1h-4zM4 18h4v1h-4zM16 18h4v1h-4zM28 18h4v1h-4zM40 18h4v1h-4zM4 23h4v1h-4zM16 23h4v1h-4zM28 23h4v1h-4zM40 23h4v1h-4z'/%3E%3Cpath fill='%235b3a1d' d='M6 17h1v1h-1zM18 17h1v1h-1zM30 17h1v1h-1zM42 17h1v1h-1zM6 19h1v4h-1zM18 19h1v4h-1zM30 19h1v4h-1zM42 19h1v4h-1zM6 24h1v4h-1zM18 24h1v4h-1zM30 24h1v4h-1zM42 24h1v4h-1z'/%3E%3Cpath fill='%238a5a2e' d='M5 17h1v1h-1zM17 17h1v1h-1zM29 17h1v1h-1zM41 17h1v1h-1zM5 19h1v4h-1zM17 19h1v4h-1zM29 19h1v4h-1zM41 19h1v4h-1zM5 24h1v4h-1zM17 24h1v4h-1zM29 24h1v4h-1zM41 24h1v4h-1z'/%3E%3Cpath fill='%231b120b' d='M4 17h1v1h-1zM7 17h1v1h-1zM16 17h1v1h-1zM19 17h1v1h-1zM28 17h1v1h-1zM31 17h1v1h-1zM40 17h1v1h-1zM43 17h1v1h-1zM4 19h1v4h-1zM7 19h1v4h-1zM16 19h1v4h-1zM19 19h1v4h-1zM28 19h1v4h-1zM31 19h1v4h-1zM40 19h1v4h-1zM43 19h1v4h-1zM4 24h1v4h-1zM7 24h1v4h-1zM16 24h1v4h-1zM19 24h1v4h-1zM28 24h1v4h-1zM31 24h1v4h-1zM40 24h1v4h-1zM43 24h1v4h-1zM5 28h2v1h-2zM17 28h2v1h-2zM29 28h2v1h-2zM41 28h2v1h-2z'/%3E%3C/svg%3E");           /* 4 frames of 12 x 30 side by side: animation 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='%23f4ead0' d='M5 0h6v1h-6zM3 1h10v1h-10zM2 2h11v1h-11zM1 3h4v1h-4zM6 3h7v2h-7zM1 4h3v1h-3zM0 5h10v1h-10zM11 5h3v2h-3zM0 6h9v1h-9zM0 7h13v1h-13zM0 8h3v1h-3zM4 8h9v1h-9zM0 9h12v1h-12zM0 10h8v1h-8zM9 10h3v1h-3zM1 11h10v1h-10zM1 12h9v1h-9zM2 13h7v1h-7zM3 14h4v1h-4z'/%3E%3Cpath fill='%23d4c9a6' d='M13 2h1v1h-1zM13 3h2v2h-2zM14 5h2v2h-2zM13 7h3v2h-3zM12 9h4v2h-4zM11 11h4v1h-4zM10 12h5v1h-5zM9 13h5v1h-5zM7 14h6v1h-6zM5 15h6v1h-6z'/%3E%3Cpath fill='%23b9ae8c' d='M5 3h1v1h-1zM4 4h2v1h-2zM10 5h1v1h-1zM9 6h2v1h-2zM3 8h1v1h-1zM8 10h1v1h-1z'/%3E%3C/svg%3E");             /* 16 x 16 */
  --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='58' y='38' width='1' height='1' fill='%23e8e6ff'/%3E%3Crect x='32' y='59' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='19' y='14' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='58' y='77' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='14' y='60' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='56' y='52' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='60' y='41' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='116' y='36' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='57' y='47' width='1' height='1' fill='%23e8e6ff'/%3E%3Crect x='51' y='6' width='3' height='1' fill='%238f8ac8'/%3E%3Crect x='52' y='5' width='1' height='3' fill='%238f8ac8'/%3E%3Crect x='52' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='31' y='38' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='22' y='20' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='99' y='44' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='16' y='27' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='42' y='25' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='62' y='6' width='1' height='1' fill='%23e8e6ff'/%3E%3Crect x='85' y='43' width='1' height='1' fill='%23e8e6ff'/%3E%3Crect x='116' y='26' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='57' y='10' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='35' y='76' width='1' height='1' fill='%23e8e6ff'/%3E%3Crect x='46' y='17' width='1' height='1' fill='%237d78b8'/%3E%3Crect x='56' y='45' width='1' height='1' fill='%23e8e6ff'/%3E%3Crect x='76' y='46' width='1' height='1' fill='%23e8e6ff'/%3E%3Crect x='56' y='4' width='1' height='1' fill='%237d78b8'/%3E%3C/svg%3E");               /* 120 x 80 tile of pixel 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='%2316122b' points='0,52 24,48 52,50 120,47 180,49 230,44 262,47 300,45 320,52 320,64 0,64'/%3E%3Cg fill='%230d0b17'%3E%3Crect x='14' y='44' width='50' height='14'/%3E%3Crect x='14' y='41' width='3' height='3'/%3E%3Crect x='20' y='41' width='3' height='3'/%3E%3Crect x='44' y='41' width='3' height='3'/%3E%3Crect x='50' y='41' width='3' height='3'/%3E%3Crect x='56' y='41' width='3' height='3'/%3E%3Crect x='24' y='22' width='15' height='36'/%3E%3Crect x='24' y='18' width='3' height='4'/%3E%3Crect x='30' y='18' width='3' height='4'/%3E%3Crect x='36' y='18' width='3' height='4'/%3E%3Crect x='64' y='14' width='33' height='44'/%3E%3Crect x='64' y='10' width='3' height='4'/%3E%3Crect x='70' y='10' width='3' height='4'/%3E%3Crect x='76' y='10' width='3' height='4'/%3E%3Crect x='82' y='10' width='3' height='4'/%3E%3Crect x='88' y='10' width='3' height='4'/%3E%3Crect x='94' y='10' width='3' height='4'/%3E%3Crect x='80' y='0' width='1' height='10'/%3E%3Crect x='100' y='12' width='12' height='46'/%3E%3Crect x='99' y='10' width='14' height='2'/%3E%3Crect x='101' y='8' width='10' height='2'/%3E%3Crect x='102' y='6' width='8' height='2'/%3E%3Crect x='103' y='4' width='6' height='2'/%3E%3Crect x='104' y='2' width='4' height='2'/%3E%3Crect x='105' y='0' width='2' height='2'/%3E%3Crect x='112' y='46' width='56' height='12'/%3E%3Crect x='112' y='43' width='3' height='3'/%3E%3Crect x='118' y='43' width='3' height='3'/%3E%3Crect x='124' y='43' width='3' height='3'/%3E%3Crect x='130' y='43' width='3' height='3'/%3E%3Crect x='136' y='43' width='3' height='3'/%3E%3Crect x='142' y='43' width='3' height='3'/%3E%3Crect x='148' y='43' width='3' height='3'/%3E%3Crect x='154' y='43' width='3' height='3'/%3E%3Crect x='160' y='43' width='3' height='3'/%3E%3Crect x='168' y='28' width='13' height='30'/%3E%3Crect x='168' y='24' width='3' height='4'/%3E%3Crect x='173' y='24' width='3' height='4'/%3E%3Crect x='178' y='24' width='3' height='4'/%3E%3C/g%3E%3Crect fill='%2305040a' x='74' y='46' width='9' height='12'/%3E%3Crect fill='%2305040a' x='75' y='45' width='7' height='1'/%3E%3Crect fill='%23b3302a' x='81' y='1' width='6' height='2'/%3E%3Crect fill='%23b3302a' x='81' y='3' width='3' height='1'/%3E%3Crect fill='%237a1d18' x='81' y='3' width='1' height='1'/%3E%3Cg fill='%23ffb547'%3E%3Crect x='30' y='28' width='3' height='4'/%3E%3Crect x='70' y='22' width='3' height='5'/%3E%3Crect x='84' y='22' width='3' height='5'/%3E%3Crect x='105' y='20' width='2' height='4'/%3E%3Crect x='173' y='34' width='3' height='4'/%3E%3C/g%3E%3Cg fill='%23ff7a1f'%3E%3Crect x='31' y='38' width='1' height='4'/%3E%3Crect x='77' y='30' width='3' height='4'/%3E%3Crect x='105' y='34' width='2' height='4'/%3E%3Crect x='249' y='42' width='2' height='3'/%3E%3C/g%3E%3Cg fill='%23110e20'%3E%3Crect x='246' y='38' width='9' height='20'/%3E%3Crect x='245' y='36' width='11' height='2'/%3E%3Crect x='247' y='34' width='7' height='2'/%3E%3Crect x='248' y='32' width='5' height='2'/%3E%3Crect x='249' y='30' width='3' height='2'/%3E%3C/g%3E%3Crect fill='%23ffb547' x='249' y='42' width='2' height='3'/%3E%3Cg fill='%2308070f'%3E%3Crect x='212' y='50' width='2' height='8'/%3E%3Crect x='209' y='48' width='8' height='3'/%3E%3Crect x='210' y='45' width='6' height='3'/%3E%3Crect x='211' y='42' width='4' height='3'/%3E%3Crect x='212' y='39' width='2' height='3'/%3E%3Crect x='225' y='51' width='2' height='7'/%3E%3Crect x='223' y='49' width='6' height='3'/%3E%3Crect x='224' y='46' width='4' height='3'/%3E%3Crect x='225' y='43' width='2' height='3'/%3E%3Crect x='291' y='50' width='2' height='8'/%3E%3Crect x='288' y='48' width='8' height='3'/%3E%3Crect x='289' y='45' width='6' height='3'/%3E%3Crect x='290' y='42' width='4' height='3'/%3E%3Crect x='291' y='39' width='2' height='3'/%3E%3Cpolygon points='0,56 18,55 40,57 70,56 110,57 150,55 190,54 214,56 240,53 268,55 300,54 320,56 320,64 0,64'/%3E%3C/g%3E%3C/svg%3E");       /* 320 x 64, repeats sideways: background-size 960px 192px at 3x */
  --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='%233a2410' fill-opacity='.09' d='M1 0h1v1h-1zM3 2h1v1h-1z'/%3E%3C/svg%3E");         /* 4 x 4 tile, over parchment: background-size 8px or 12px */
}

/* A framed panel, 3x: border: 12px solid transparent; border-image: var(--ck-art-frame) 4 / 12px;
   background: var(--ck-panel) padding-box. (2x: 8px. Gold: --ck-art-frame-gold.)
   A torch, 3x: 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. (Freeze it when the page is busy,
   and under prefers-reduced-motion: it simply shows its first frame.) */
@keyframes ck-torch { to { background-position-x: calc(var(--ck-torch-px, 3px) * -48); } }
/* The moon and the stars twinkle on a slow two-step, if a site wants them to (by day the clouds in
   their place hold still: --ck-twinkle 1) */
@keyframes ck-twinkle { 50% { opacity: var(--ck-twinkle, .55); } }

/* ==== The sky through the day (George, 10 Nov 2026: "add a day and night cycle") ====
   <html data-sky> is night, dawn, day or dusk over London (castle-look\fx\sky.js: the look scripts
   set it before anything is drawn, and castle.js keeps it right while the look is on; ?sky=day in the
   address fixes it). Night is everything above, exactly as it always was. The others change the sky
   and what's in it (the sun where the moon was, clouds or a few faint stars where the stars were)
   and, by day, the skyline (the castle in daylight, its windows dark); at dawn and dusk the castle
   stays a black shape against the glow with its windows lit. The frames, panels and buttons don't
   change, so the words on them read the same at any hour, and the sky stays deep at the top, where
   a site puts words straight on it (white is 6:1 there by day). */
html[data-look="castle"][data-sky="dawn"] {
  --ck-sky-1: #141a46; --ck-sky-2: #3a2f6a; --ck-sky-3: #8a4f7a; --ck-glow: #f0a060;
  --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='58' y='38' width='1' height='1' fill='%23c8c4e8'/%3E%3Crect x='32' y='59' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='19' y='14' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='58' y='77' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='14' y='60' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='56' y='52' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='60' y='41' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='116' y='36' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='57' y='47' width='1' height='1' fill='%23c8c4e8'/%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='%23fff0c8' d='M7 6h2v1h-2zM6 7h4v2h-4zM7 9h2v1h-2z'/%3E%3Cpath fill='%23ffc070' d='M7 5h2v1h-2zM6 6h1v1h-1zM9 6h1v1h-1zM5 7h1v2h-1zM10 7h1v2h-1zM6 9h1v1h-1zM9 9h1v1h-1zM7 10h2v1h-2z'/%3E%3Cpath fill='%23ff9a40' d='M6 4h4v1h-4zM5 5h2v1h-2zM9 5h2v1h-2zM4 6h2v1h-2zM10 6h2v1h-2zM4 7h1v2h-1zM11 7h1v2h-1zM4 9h2v1h-2zM10 9h2v1h-2zM5 10h2v1h-2zM9 10h2v1h-2zM6 11h4v1h-4z'/%3E%3Cpath fill='%23e0582a' d='M6 3h4v1h-4zM4 4h2v1h-2zM10 4h2v1h-2zM4 5h1v1h-1zM11 5h1v1h-1zM3 6h1v4h-1zM12 6h1v4h-1zM4 10h1v1h-1zM11 10h1v1h-1zM4 11h2v1h-2zM10 11h2v1h-2zM6 12h4v1h-4z'/%3E%3Cpath fill='%23ffa050' fill-opacity='.5' d='M7 0h2v2h-2zM2 2h1v1h-1zM13 2h1v1h-1zM0 7h2v2h-2zM14 7h2v2h-2zM2 13h1v1h-1zM13 13h1v1h-1zM7 14h2v2h-2z'/%3E%3C/svg%3E");
}
html[data-look="castle"][data-sky="day"] {
  --ck-sky-1: #1a55b0; --ck-sky-2: #2563bc; --ck-sky-3: #3d7ccc; --ck-glow: #9fcdee;
  --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='%23ffffff' fill-opacity='.22'%3E%3Crect x='5' y='15' width='24' height='2'/%3E%3Crect x='70' y='45' width='15' height='2'/%3E%3Crect x='36' y='70' width='12' height='1'/%3E%3Crect x='94' y='11' width='10' height='1'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.4'%3E%3Crect x='7' y='13' width='20' height='2'/%3E%3Crect x='10' y='11' width='11' height='2'/%3E%3Crect x='12' y='10' width='6' height='1'/%3E%3Crect x='21' y='12' width='4' height='1'/%3E%3Crect x='71' y='43' width='13' height='2'/%3E%3Crect x='74' y='41' width='6' height='2'/%3E%3Crect x='38' y='68' width='9' height='2'/%3E%3Crect x='40' y='67' width='4' height='1'/%3E%3Crect x='95' y='10' width='8' 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='%23fffbe6' d='M7 6h2v1h-2zM6 7h4v2h-4zM7 9h2v1h-2z'/%3E%3Cpath fill='%23fff09a' d='M7 5h2v1h-2zM6 6h1v1h-1zM9 6h1v1h-1zM5 7h1v2h-1zM10 7h1v2h-1zM6 9h1v1h-1zM9 9h1v1h-1zM7 10h2v1h-2z'/%3E%3Cpath fill='%23ffd84a' d='M6 4h4v1h-4zM5 5h2v1h-2zM9 5h2v1h-2zM4 6h2v1h-2zM10 6h2v1h-2zM4 7h1v2h-1zM11 7h1v2h-1zM4 9h2v1h-2zM10 9h2v1h-2zM5 10h2v1h-2zM9 10h2v1h-2zM6 11h4v1h-4z'/%3E%3Cpath fill='%23ffae2a' d='M6 3h4v1h-4zM4 4h2v1h-2zM10 4h2v1h-2zM4 5h1v1h-1zM11 5h1v1h-1zM3 6h1v4h-1zM12 6h1v4h-1zM4 10h1v1h-1zM11 10h1v1h-1zM4 11h2v1h-2zM10 11h2v1h-2zM6 12h4v1h-4z'/%3E%3Cpath fill='%23ffd84a' d='M7 0h2v2h-2zM2 2h1v1h-1zM13 2h1v1h-1zM0 7h2v2h-2zM14 7h2v2h-2zM2 13h1v1h-1zM13 13h1v1h-1zM7 14h2v2h-2z'/%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='%235b7ca6' points='0,52 24,48 52,50 120,47 180,49 230,44 262,47 300,45 320,52 320,64 0,64'/%3E%3Cg fill='%237a7266'%3E%3Crect x='14' y='44' width='50' height='14'/%3E%3Crect x='14' y='41' width='3' height='3'/%3E%3Crect x='20' y='41' width='3' height='3'/%3E%3Crect x='44' y='41' width='3' height='3'/%3E%3Crect x='50' y='41' width='3' height='3'/%3E%3Crect x='56' y='41' width='3' height='3'/%3E%3Crect x='24' y='22' width='15' height='36'/%3E%3Crect x='24' y='18' width='3' height='4'/%3E%3Crect x='30' y='18' width='3' height='4'/%3E%3Crect x='36' y='18' width='3' height='4'/%3E%3Crect x='64' y='14' width='33' height='44'/%3E%3Crect x='64' y='10' width='3' height='4'/%3E%3Crect x='70' y='10' width='3' height='4'/%3E%3Crect x='76' y='10' width='3' height='4'/%3E%3Crect x='82' y='10' width='3' height='4'/%3E%3Crect x='88' y='10' width='3' height='4'/%3E%3Crect x='94' y='10' width='3' height='4'/%3E%3Crect x='80' y='0' width='1' height='10'/%3E%3Crect x='100' y='12' width='12' height='46'/%3E%3Crect x='99' y='10' width='14' height='2'/%3E%3Crect x='101' y='8' width='10' height='2'/%3E%3Crect x='102' y='6' width='8' height='2'/%3E%3Crect x='103' y='4' width='6' height='2'/%3E%3Crect x='104' y='2' width='4' height='2'/%3E%3Crect x='105' y='0' width='2' height='2'/%3E%3Crect x='112' y='46' width='56' height='12'/%3E%3Crect x='112' y='43' width='3' height='3'/%3E%3Crect x='118' y='43' width='3' height='3'/%3E%3Crect x='124' y='43' width='3' height='3'/%3E%3Crect x='130' y='43' width='3' height='3'/%3E%3Crect x='136' y='43' width='3' height='3'/%3E%3Crect x='142' y='43' width='3' height='3'/%3E%3Crect x='148' y='43' width='3' height='3'/%3E%3Crect x='154' y='43' width='3' height='3'/%3E%3Crect x='160' y='43' width='3' height='3'/%3E%3Crect x='168' y='28' width='13' height='30'/%3E%3Crect x='168' y='24' width='3' height='4'/%3E%3Crect x='173' y='24' width='3' height='4'/%3E%3Crect x='178' y='24' width='3' height='4'/%3E%3C/g%3E%3Crect fill='%233a2a1c' x='74' y='46' width='9' height='12'/%3E%3Crect fill='%233a2a1c' x='75' y='45' width='7' height='1'/%3E%3Crect fill='%23b3302a' x='81' y='1' width='6' height='2'/%3E%3Crect fill='%23b3302a' x='81' y='3' width='3' height='1'/%3E%3Crect fill='%237a1d18' x='81' y='3' width='1' height='1'/%3E%3Cg fill='%232a2630'%3E%3Crect x='30' y='28' width='3' height='4'/%3E%3Crect x='70' y='22' width='3' height='5'/%3E%3Crect x='84' y='22' width='3' height='5'/%3E%3Crect x='105' y='20' width='2' height='4'/%3E%3Crect x='173' y='34' width='3' height='4'/%3E%3C/g%3E%3Cg fill='%232a2630'%3E%3Crect x='31' y='38' width='1' height='4'/%3E%3Crect x='77' y='30' width='3' height='4'/%3E%3Crect x='105' y='34' width='2' height='4'/%3E%3Crect x='249' y='42' width='2' height='3'/%3E%3C/g%3E%3Cg fill='%236d6762'%3E%3Crect x='246' y='38' width='9' height='20'/%3E%3Crect x='245' y='36' width='11' height='2'/%3E%3Crect x='247' y='34' width='7' height='2'/%3E%3Crect x='248' y='32' width='5' height='2'/%3E%3Crect x='249' y='30' width='3' height='2'/%3E%3C/g%3E%3Crect fill='%232a2630' x='249' y='42' width='2' height='3'/%3E%3Cg fill='%23245a2c'%3E%3Crect x='212' y='50' width='2' height='8'/%3E%3Crect x='209' y='48' width='8' height='3'/%3E%3Crect x='210' y='45' width='6' height='3'/%3E%3Crect x='211' y='42' width='4' height='3'/%3E%3Crect x='212' y='39' width='2' height='3'/%3E%3Crect x='225' y='51' width='2' height='7'/%3E%3Crect x='223' y='49' width='6' height='3'/%3E%3Crect x='224' y='46' width='4' height='3'/%3E%3Crect x='225' y='43' width='2' height='3'/%3E%3Crect x='291' y='50' width='2' height='8'/%3E%3Crect x='288' y='48' width='8' height='3'/%3E%3Crect x='289' y='45' width='6' height='3'/%3E%3Crect x='290' y='42' width='4' height='3'/%3E%3Crect x='291' y='39' width='2' height='3'/%3E%3Cpolygon points='0,56 18,55 40,57 70,56 110,57 150,55 190,54 214,56 240,53 268,55 300,54 320,56 320,64 0,64'/%3E%3C/g%3E%3Cg fill='%239d9584'%3E%3Crect x='14' y='44' width='50' height='1'/%3E%3Crect x='112' y='46' width='56' height='1'/%3E%3Crect x='24' y='22' width='2' height='36'/%3E%3Crect x='64' y='14' width='2' height='44'/%3E%3Crect x='100' y='12' width='1' height='46'/%3E%3Crect x='168' y='28' width='2' height='30'/%3E%3Crect x='246' y='38' width='1' height='20'/%3E%3C/g%3E%3Cg fill='%2356504a'%3E%3Crect x='37' y='22' width='2' height='36'/%3E%3Crect x='95' y='14' width='2' height='44'/%3E%3Crect x='111' y='12' width='1' height='46'/%3E%3Crect x='179' y='28' width='2' height='30'/%3E%3Crect x='254' y='38' width='1' height='20'/%3E%3C/g%3E%3Cg fill='%234a5a7c'%3E%3Crect x='99' y='10' width='14' height='2'/%3E%3Crect x='101' y='8' width='10' height='2'/%3E%3Crect x='102' y='6' width='8' height='2'/%3E%3Crect x='103' y='4' width='6' height='2'/%3E%3Crect x='104' y='2' width='4' height='2'/%3E%3Crect x='105' y='0' width='2' height='2'/%3E%3Crect x='245' y='36' width='11' height='2'/%3E%3Crect x='247' y='34' width='7' height='2'/%3E%3Crect x='248' y='32' width='5' height='2'/%3E%3Crect x='249' y='30' width='3' height='2'/%3E%3C/g%3E%3Cg fill='%236b84ae'%3E%3Crect x='99' y='10' width='3' height='2'/%3E%3Crect x='101' y='8' width='2' height='2'/%3E%3Crect x='102' y='6' width='2' height='2'/%3E%3Crect x='103' y='4' width='2' height='2'/%3E%3C/g%3E%3Cpolygon fill='%233f8a3c' points='0,57 18,56 40,58 70,57 110,58 150,56 190,55 214,57 240,54 268,56 300,55 320,57 320,64 0,64'/%3E%3Cg fill='%235aa84a'%3E%3Crect x='8' y='58' width='6' height='1'/%3E%3Crect x='52' y='59' width='8' height='1'/%3E%3Crect x='130' y='58' width='5' height='1'/%3E%3Crect x='196' y='57' width='7' height='1'/%3E%3Crect x='276' y='57' width='6' height='1'/%3E%3C/g%3E%3C/svg%3E");
  --ck-twinkle: 1;
}
html[data-look="castle"][data-sky="dusk"] {
  --ck-sky-1: #12123a; --ck-sky-2: #2e2058; --ck-sky-3: #7a3050; --ck-glow: #e0602a;
  --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='58' y='38' width='1' height='1' fill='%23c8c4e8'/%3E%3Crect x='32' y='59' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='19' y='14' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='58' y='77' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='14' y='60' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='56' y='52' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='60' y='41' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='116' y='36' width='1' height='1' fill='%235e5a8c'/%3E%3Crect x='57' y='47' width='1' height='1' fill='%23c8c4e8'/%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='%23fff0c8' d='M7 6h2v1h-2zM6 7h4v2h-4zM7 9h2v1h-2z'/%3E%3Cpath fill='%23ffc070' d='M7 5h2v1h-2zM6 6h1v1h-1zM9 6h1v1h-1zM5 7h1v2h-1zM10 7h1v2h-1zM6 9h1v1h-1zM9 9h1v1h-1zM7 10h2v1h-2z'/%3E%3Cpath fill='%23ff9a40' d='M6 4h4v1h-4zM5 5h2v1h-2zM9 5h2v1h-2zM4 6h2v1h-2zM10 6h2v1h-2zM4 7h1v2h-1zM11 7h1v2h-1zM4 9h2v1h-2zM10 9h2v1h-2zM5 10h2v1h-2zM9 10h2v1h-2zM6 11h4v1h-4z'/%3E%3Cpath fill='%23e0582a' d='M6 3h4v1h-4zM4 4h2v1h-2zM10 4h2v1h-2zM4 5h1v1h-1zM11 5h1v1h-1zM3 6h1v4h-1zM12 6h1v4h-1zM4 10h1v1h-1zM11 10h1v1h-1zM4 11h2v1h-2zM10 11h2v1h-2zM6 12h4v1h-4z'/%3E%3Cpath fill='%23ffa050' fill-opacity='.5' d='M7 0h2v2h-2zM2 2h1v1h-1zM13 2h1v1h-1zM0 7h2v2h-2zM14 7h2v2h-2zM2 13h1v1h-1zM13 13h1v1h-1zM7 14h2v2h-2z'/%3E%3C/svg%3E");
}
/* When it changes, the old sky fades into the new (castle.js, a View Transition: slow for a change of
   light, quick for the first one on a site that couldn't set it before drawing; none under reduced
   motion). Taps go straight through to the page while it does. */
html[data-look="castle"][data-sky-fade]::view-transition { pointer-events: none; }
html[data-look="castle"][data-sky-fade]::view-transition-group(root),
html[data-look="castle"][data-sky-fade]::view-transition-old(root),
html[data-look="castle"][data-sky-fade]::view-transition-new(root) { animation-duration: 1.6s; }
html[data-look="castle"][data-sky-fade="quick"]::view-transition-group(root),
html[data-look="castle"][data-sky-fade="quick"]::view-transition-old(root),
html[data-look="castle"][data-sky-fade="quick"]::view-transition-new(root) { animation-duration: .4s; }
/*CASTLE_KIT_END*/

/* ==== This site's Castle look (the kit above is pasted in by sync-lookmenu.cmd) ==== */
/* 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 "Quest complete!" 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="castle"] {
  --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="castle"] *, html[data-look="castle"] *::before, html[data-look="castle"] *::after { box-sizing: border-box; }
html[data-look="castle"] [hidden] { display: none !important; } /* the screens set display: grid; hidden must still hide them */
html[data-look="castle"] { background: var(--ck-sky-1); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-look="castle"] 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="castle"] a { color: var(--ck-orange); text-underline-offset: 3px; }
html[data-look="castle"] button { font: inherit; color: inherit; margin: 0; border: 0; background: none; cursor: pointer; }
html[data-look="castle"] :focus-visible { outline: 2px solid var(--ck-yellow); outline-offset: 2px; }
html[data-look="castle"] ::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="castle"] 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="castle"] 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="castle"] .ambient { position: fixed; inset: 0 0 30% 0; z-index: -3; pointer-events: none; }
html[data-look="castle"] .ambient i { display: none; }
html[data-look="castle"] .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="castle"] .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="castle"] .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="castle"] .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="castle"] .brand-name { font: 20px/1 var(--ck-pixel); text-shadow: var(--ck-shadow); }
@media (hover: hover) { html[data-look="castle"] .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="castle"] 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="castle"] main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 8px var(--mk-gutter) 36px; }
html[data-look="castle"] .foot { width: 100%; max-width: 640px; margin: 0 auto; padding: 4px var(--mk-gutter) max(26px, env(safe-area-inset-bottom)); }
html[data-look="castle"] .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="castle"] .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="castle"][data-sky="day"] .kicker { text-shadow: var(--ck-outline); }
html[data-look="castle"][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="castle"] .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="castle"] .btn-begin, html[data-look="castle"] .choice, html[data-look="castle"] .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="castle"] .btn-begin:hover, html[data-look="castle"] .choice:hover, html[data-look="castle"] .link-btn:hover { color: var(--ck-yellow); } }
html[data-look="castle"] .btn-begin:active, html[data-look="castle"] .choice:active, html[data-look="castle"] .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="castle"] .btn-begin:focus-visible, html[data-look="castle"] .choice:focus-visible, html[data-look="castle"] .link-btn:focus-visible { color: var(--ck-yellow); outline-offset: -7px; }

html[data-look="castle"] .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="castle"] .title-screen { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-top: 6px; }
html[data-look="castle"] .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="castle"] .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="castle"] .title::before, html[data-look="castle"] .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="castle"] .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="castle"] .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="castle"] .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="castle"] .tagline::before {
  content: "Welcome to Muckle Wallop"; content: "Welcome to Muckle Wallop" / "";
  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="castle"] .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="castle"] .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="castle"] .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="castle"] .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="castle"] .ladder { position: relative; list-style: none; margin: 0; padding: 30px 0 0; display: grid; text-align: left; }
html[data-look="castle"] .ladder::before, html[data-look="castle"] .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="castle"] .ladder::before { content: "#"; content: "#" / ""; left: 6px; width: 30px; text-align: right; }
html[data-look="castle"] .ladder::after { content: "Fortune"; content: "Fortune" / ""; left: 46px; }
html[data-look="castle"] .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="castle"] .rung:nth-child(odd) { background: rgba(93, 84, 71, .18); }
html[data-look="castle"] .rung-n { text-align: right; }
html[data-look="castle"] .rung-name { overflow-wrap: anywhere; text-wrap: balance; }
html[data-look="castle"] .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="castle"] .rung.is-found { color: var(--ck-white); }
html[data-look="castle"] .rung.is-found .rung-n { color: var(--ck-yellow); }
html[data-look="castle"] .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="castle"] .rung.is-you + .rung { border-top-color: transparent; }
html[data-look="castle"] .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="castle"] .scene-screen { padding-top: 6px; }
html[data-look="castle"] .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="castle"] .scene-kicker { margin: 0 0 6px; font: 20px/1.2 var(--ck-pixel); color: var(--ck-parch-red); }
html[data-look="castle"] .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="castle"] .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="castle"] .scene-text p:last-child { margin-bottom: 0; }
html[data-look="castle"] .scene-text p:first-child { display: flow-root; } /* a short first paragraph still holds the whole capital */
html[data-look="castle"] .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="castle"] .choices { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
html[data-look="castle"] .choices::before {
  content: "What do you do?"; content: "What do you do?" / "";
  font: 20px/1.2 var(--ck-pixel); color: var(--ck-yellow); text-shadow: var(--ck-shadow); text-align: center;
}
html[data-look="castle"] .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="castle"] .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="castle"] .choice-text { flex: 1; min-width: 0; }

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

/* ---------------- an ending: a quest-complete scroll ---------------- */
html[data-look="castle"] .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 "Quest complete!", the ending's number and its name (rows 1 and 2) */
html[data-look="castle"] .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="castle"] .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="castle"] .end-rank::before {
  content: "Quest complete!"; content: "Quest complete!" / "";
  display: block; margin: 0 0 10px; font: 30px/1.15 var(--ck-pixel); color: var(--ck-yellow);
}
html[data-look="castle"] .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="castle"] .end-scene { grid-row: 3; grid-column: 1; margin: 40px 0 0; padding: 30px 22px 30px; text-align: left; }
html[data-look="castle"] .end-scene::before, html[data-look="castle"] .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="castle"] .end-scene::before { top: -12px; }
html[data-look="castle"] .end-scene::after { bottom: -12px; }
html[data-look="castle"] .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="castle"] .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="castle"] .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="castle"] .end-screen .ladder { grid-row: 5; grid-column: 1; margin: 0 18px; }
html[data-look="castle"] .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="castle"] .end-screen .btn-begin { grid-row: 7; grid-column: 1; margin: 28px 0 0; }
html[data-look="castle"] .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="castle"] body[data-rank="1"] .end-screen, html[data-look="castle"] body[data-rank="2"] .end-screen, html[data-look="castle"] body[data-rank="3"] .end-screen { --mk-frame: var(--ck-art-frame-gold); }
html[data-look="castle"] body[data-rank="4"] .end-screen, html[data-look="castle"] body[data-rank="5"] .end-screen { --mk-name: var(--ck-yellow); }
html[data-look="castle"] body[data-rank="6"] .end-screen, html[data-look="castle"] body[data-rank="7"] .end-screen { --mk-name: var(--ck-white); }
html[data-look="castle"] body[data-rank="8"] .end-screen { --mk-name: var(--ck-green); }
html[data-look="castle"] body[data-rank="9"] .end-screen { --mk-name: var(--ck-red); }
html[data-look="castle"] body[data-rank="10"] .end-screen { --mk-name: var(--mk-mud); --mk-frame: var(--mk-art-mud-frame); }
html[data-look="castle"] body[data-rank="5"] .end-rank::before { content: "Quest complete! Ish."; content: "Quest complete! Ish." / ""; }
html[data-look="castle"] body[data-rank="6"] .end-rank::before { content: "Quest complete?"; content: "Quest complete?" / ""; color: var(--ck-white); }
html[data-look="castle"] body[data-rank="7"] .end-rank::before { content: "Quest abandoned"; content: "Quest abandoned" / ""; color: var(--ck-white); }
html[data-look="castle"] body[data-rank="8"] .end-rank::before { content: "Quest failed. Ribbit."; content: "Quest failed. Ribbit." / ""; color: var(--ck-red); }
html[data-look="castle"] body[data-rank="9"] .end-rank::before { content: "Quest failed. Mind your head."; content: "Quest failed. Mind your head." / ""; color: var(--ck-red); }
html[data-look="castle"] body[data-rank="10"] .end-rank::before { content: "Quest failed. Splat."; content: "Quest failed. Splat." / ""; 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="castle"] body[data-rank="1"] .end-rank { padding-top: 54px; background: var(--mk-art-crown) center top / 60px 40px no-repeat; }
html[data-look="castle"] 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="castle"] body[data-rank="1"] .end-name::before, html[data-look="castle"] 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="castle"] body[data-rank="1"] .end-name::after { animation-delay: -.45s; }
html[data-look="castle"] 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="castle"] body[data-rank="10"] .end-rank { padding-top: 66px; background: var(--mk-art-pig) center top / 48px 52px no-repeat; }
html[data-look="castle"] 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="castle"] 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="castle"] .title, html[data-look="castle"] body[data-rank="1"] .end-name { grid-template-columns: 24px min-content 24px; column-gap: 10px; }
  html[data-look="castle"] .title::before, html[data-look="castle"] .title::after,
  html[data-look="castle"] body[data-rank="1"] .end-name::before, html[data-look="castle"] 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="castle"] { --mk-gutter: 24px; }
  html[data-look="castle"] .scene { padding: 30px 34px 32px; }
  html[data-look="castle"] .scene-text p { font-size: 19.5px; }
}
@media (min-width: 960px) {
  html[data-look="castle"] body::before { background-position: right 12% top 9%, 0 0, 0 0; }
  html[data-look="castle"] .top, html[data-look="castle"] .foot { max-width: 832px; }
  html[data-look="castle"] 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="castle"] .foot { padding-top: 14px; }
  html[data-look="castle"] .title-screen, html[data-look="castle"] .end-screen { grid-template-columns: minmax(0, 560px); justify-content: center; }
  html[data-look="castle"] .title-screen { padding-top: 18px; }
  html[data-look="castle"] .scene-text p { font-size: 20px; }
}

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