/*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 */
@keyframes ck-twinkle { 50% { opacity: .55; } }
/*CASTLE_KIT_END*/

/* ==== This site's Castle look (the kit above is pasted in by sync-lookmenu.cmd) ==== */

/* frizzy-g.com in Castle: this page is the login screen. The game has just loaded: "Frizzy G" in
   gold pixel letters between two burning torches, the moon up in the corner, more stars twinkling on
   a slow two-step, the castle on the horizon (the dragon goes over behind it, castle.js), and a
   stone-framed welcome box whose menu is the three apps, each a bevelled stone entry with its own
   crest (a little shield in the app's colour with its mark on it: two balls, a stretch, a voice)
   and its name, nothing else, and an iron PIN plaque on Mbao, behind George's PIN. Phones first
   (everything on one screen at 360 x 740); on a desktop the three entries stand side by side.
   Nothing moves but the torches and the twinkle, and under reduced motion nothing moves at all. */

html[data-look="castle"] {
  background: var(--ck-sky-1);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* the crests (14 x 17 pixel art, one SVG pixel per art pixel: scale by 2 or 3) */
  --crest-mbao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h14v1h-14zM0 1h1v9h-1zM13 1h1v9h-1zM1 10h1v2h-1zM12 10h1v2h-1zM2 12h1v1h-1zM11 12h1v1h-1zM3 13h1v1h-1zM10 13h1v1h-1zM4 14h1v1h-1zM9 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM6 16h2v1h-2z'/%3E%3Cpath fill='%23ff9fd0' d='M1 1h12v1h-12zM1 2h1v8h-1zM2 10h1v2h-1zM3 12h1v1h-1zM4 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%23a8125c' d='M12 2h1v8h-1zM11 10h1v2h-1zM10 12h1v1h-1zM9 13h1v1h-1zM8 14h1v1h-1zM6 15h2v1h-2z'/%3E%3Cpath fill='%2336091f' d='M2 2h10v3h-10zM2 5h2v1h-2zM6 5h2v1h-2zM10 5h2v1h-2zM2 6h1v2h-1zM11 6h1v2h-1zM2 8h2v1h-2zM6 8h2v1h-2zM10 8h2v1h-2zM2 9h10v1h-10zM3 10h8v2h-8zM4 12h6v1h-6zM5 13h4v1h-4zM6 14h2v1h-2z'/%3E%3Cpath fill='%23ff4fa3' d='M4 5h2v1h-2zM3 6h1v1h-1zM5 6h2v1h-2zM3 7h3v1h-3z'/%3E%3Cpath fill='%23ffd2ea' d='M4 6h1v1h-1z'/%3E%3Cpath fill='%23b0175e' d='M6 7h1v1h-1zM4 8h2v1h-2z'/%3E%3Cpath fill='%232fe5ef' d='M8 5h2v1h-2zM7 6h1v1h-1zM9 6h2v1h-2zM7 7h3v1h-3z'/%3E%3Cpath fill='%23d2fdff' d='M8 6h1v1h-1z'/%3E%3Cpath fill='%230b7894' d='M10 7h1v1h-1zM8 8h2v1h-2z'/%3E%3C/svg%3E");  /* 14 x 17 */
  --crest-stretcher: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h14v1h-14zM0 1h1v9h-1zM13 1h1v9h-1zM1 10h1v2h-1zM12 10h1v2h-1zM2 12h1v1h-1zM11 12h1v1h-1zM3 13h1v1h-1zM10 13h1v1h-1zM4 14h1v1h-1zM9 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM6 16h2v1h-2z'/%3E%3Cpath fill='%23d9ceff' d='M1 1h12v1h-12zM1 2h1v8h-1zM2 10h1v2h-1zM3 12h1v1h-1zM4 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%235a3fd0' d='M12 2h1v8h-1zM11 10h1v2h-1zM10 12h1v1h-1zM9 13h1v1h-1zM8 14h1v1h-1zM6 15h2v1h-2z'/%3E%3Cpath fill='%231d1450' d='M2 2h10v1h-10zM2 3h1v1h-1zM4 3h2v1h-2zM8 3h2v1h-2zM11 3h1v1h-1zM2 4h2v1h-2zM5 4h1v1h-1zM8 4h1v1h-1zM10 4h2v1h-2zM2 5h3v1h-3zM9 5h3v1h-3zM2 6h4v2h-4zM8 6h4v2h-4zM2 8h3v2h-3zM6 8h2v2h-2zM9 8h3v2h-3zM3 10h1v1h-1zM5 10h4v1h-4zM10 10h1v1h-1zM3 11h8v1h-8zM4 12h6v1h-6zM5 13h4v1h-4zM6 14h2v1h-2z'/%3E%3Cpath fill='%23e6ddff' d='M3 3h1v1h-1zM6 3h2v2h-2zM10 3h1v1h-1zM4 4h1v1h-1zM9 4h1v1h-1zM5 5h4v1h-4zM6 6h2v2h-2zM5 8h1v2h-1zM8 8h1v2h-1zM4 10h1v1h-1zM9 10h1v1h-1z'/%3E%3C/svg%3E");  /* 14 x 17 */
  --crest-earshot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h14v1h-14zM0 1h1v9h-1zM13 1h1v9h-1zM1 10h1v2h-1zM12 10h1v2h-1zM2 12h1v1h-1zM11 12h1v1h-1zM3 13h1v1h-1zM10 13h1v1h-1zM4 14h1v1h-1zM9 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM6 16h2v1h-2z'/%3E%3Cpath fill='%2398f3f8' d='M1 1h12v1h-12zM1 2h1v8h-1zM2 10h1v2h-1zM3 12h1v1h-1zM4 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%230b7a8c' d='M12 2h1v8h-1zM11 10h1v2h-1zM10 12h1v1h-1zM9 13h1v1h-1zM8 14h1v1h-1zM6 15h2v1h-2z'/%3E%3Cpath fill='%23062c34' d='M2 2h10v1h-10zM2 3h8v1h-8zM11 3h1v7h-1zM2 4h4v1h-4zM7 4h3v1h-3zM2 5h5v1h-5zM8 5h2v4h-2zM2 6h1v2h-1zM5 6h2v2h-2zM2 8h5v1h-5zM2 9h4v1h-4zM7 9h3v1h-3zM3 10h6v1h-6zM10 10h1v1h-1zM3 11h8v1h-8zM4 12h6v1h-6zM5 13h4v1h-4zM6 14h2v1h-2z'/%3E%3Cpath fill='%232fe5ef' d='M10 3h1v7h-1zM6 4h1v1h-1zM7 5h1v4h-1zM6 9h1v1h-1zM9 10h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 6h2v2h-2z'/%3E%3C/svg%3E");  /* 14 x 17 */
  --crest-mucksalot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h14v1h-14zM0 1h1v9h-1zM13 1h1v9h-1zM1 10h1v2h-1zM12 10h1v2h-1zM2 12h1v1h-1zM11 12h1v1h-1zM3 13h1v1h-1zM10 13h1v1h-1zM4 14h1v1h-1zM9 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM6 16h2v1h-2z'/%3E%3Cpath fill='%23ffe2b0' d='M1 1h12v1h-12zM1 2h1v8h-1zM2 10h1v2h-1zM3 12h1v1h-1zM4 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%23a5600c' d='M12 2h1v8h-1zM11 10h1v2h-1zM10 12h1v1h-1zM9 13h1v1h-1zM8 14h1v1h-1zM6 15h2v1h-2z'/%3E%3Cpath fill='%23381c03' d='M2 2h10v2h-10zM2 4h1v6h-1zM4 4h2v2h-2zM8 4h2v2h-2zM11 4h1v6h-1zM5 6h1v1h-1zM8 6h1v1h-1zM3 10h8v2h-8zM4 12h6v1h-6zM5 13h4v1h-4zM6 14h2v1h-2z'/%3E%3Cpath fill='%23ffcf3f' d='M3 5h1v1h-1zM6 5h2v2h-2zM10 5h1v1h-1zM3 6h2v1h-2zM9 6h2v1h-2zM3 7h8v1h-8zM3 8h3v1h-3zM8 8h3v1h-3z'/%3E%3Cpath fill='%23b8790f' d='M3 9h8v1h-8z'/%3E%3Cpath fill='%23e0441c' d='M6 8h2v1h-2z'/%3E%3Cpath fill='%23fff6c8' d='M3 4h1v1h-1zM6 4h2v1h-2zM10 4h1v1h-1z'/%3E%3C/svg%3E");  /* 14 x 17 */
  /* the padlock on the PIN plaque: 7 x 8, at 2x */
  --lock-px: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='8' viewBox='0 0 7 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23c8bfae' d='M2 0h3v1h-3zM1 1h1v2h-1zM5 1h1v2h-1z'/%3E%3Cpath fill='%23ffcf3f' d='M0 3h7v2h-7zM0 5h3v2h-3zM4 5h3v2h-3z'/%3E%3Cpath fill='%233a2410' d='M3 5h1v2h-1z'/%3E%3Cpath fill='%239a6a12' d='M0 7h7v1h-7z'/%3E%3C/svg%3E");
  /* a few bright stars, sparse, for the twinkling layers (200 x 150: scale by 2) */
  --twinkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150' shape-rendering='crispEdges'%3E%3Cg fill='%23fff'%3E%3Crect x='24' y='29' width='1' height='3'/%3E%3Crect x='23' y='30' width='3' height='1'/%3E%3Crect x='52' y='118' width='1' height='1'/%3E%3Crect x='8' y='84' width='1' height='1'/%3E%3Crect x='167' y='9' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23dfe6ff'%3E%3Crect x='118' y='95' width='1' height='3'/%3E%3Crect x='117' y='96' width='3' height='1'/%3E%3Crect x='88' y='12' width='1' height='1'/%3E%3Crect x='182' y='132' width='1' height='1'/%3E%3C/g%3E%3Crect fill='%23ffe9b0' x='150' y='48' width='1' height='1'/%3E%3Crect fill='%23ffe9b0' x='71' y='63' width='1' height='1'/%3E%3C/svg%3E");
}
html[data-look="castle"] [hidden] { display: none !important; }
html[data-look="castle"] *, html[data-look="castle"] *::before, html[data-look="castle"] *::after { box-sizing: border-box; }
html[data-look="castle"] body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  color: var(--ck-white); font: 18px/1.5 var(--ck-serif);
  overflow-x: clip;
}
html[data-look="castle"] ::selection { background: var(--ck-yellow); color: #000; text-shadow: none; }
html[data-look="castle"] :focus-visible { outline: 2px solid var(--ck-yellow); outline-offset: 2px; }
html[data-look="castle"] .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- the scene: sky, moon, stars, the castle ---------- */

/* the sky, fading down to the glow behind the castle, with the near stars in it */
html[data-look="castle"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: var(--ck-art-stars) 0 0 / 360px 240px, var(--ck-sky);
}
/* the castle on the horizon, in front of the dragon (on a phone the tile starts where the keep and
   its banner come into view) */
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) -174px bottom / 960px 192px repeat-x;
}
/* .ambient (three <i>): two scatterings of brighter stars that twinkle out of step on a slow
   two-step, and the moon with its light on the sky. Over the sky, under castle.js's canvas */
html[data-look="castle"] .ambient { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
html[data-look="castle"] .ambient i { position: absolute; display: block; }
html[data-look="castle"] .ambient i:nth-child(1),
html[data-look="castle"] .ambient i:nth-child(2) {
  left: 0; right: 0; top: 0; bottom: 140px;
  background: var(--twinkle) 0 0 / 400px 300px;
  animation: ck-twinkle 5s steps(1) infinite;
}
html[data-look="castle"] .ambient i:nth-child(2) { background-position: 214px 158px; animation-duration: 7s; animation-delay: -3s; }
html[data-look="castle"] .ambient i:nth-child(3) {
  left: 4px; top: 4px; width: 112px; height: 112px;
  background:
    var(--ck-art-moon) center / 32px 32px no-repeat,
    radial-gradient(closest-side, rgba(244, 234, 208, .2), rgba(244, 234, 208, .07) 50%, rgba(244, 234, 208, 0));
}

/* ---------- the page: the title over the welcome box ---------- */

html[data-look="castle"] .home {
  width: 100%; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: max(70px, calc(env(safe-area-inset-top) + 60px)) max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* the title: the site's name in gold, a torch either side (the right one mirrored and a beat
   behind, so they don't flicker in step) */
html[data-look="castle"] .logo {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: normal;
}
html[data-look="castle"] .logo::before,
html[data-look="castle"] .logo::after {
  content: ""; flex: none; width: 24px; height: 60px;
  background: var(--ck-art-torch) 0 0 / 96px 60px no-repeat;
  --ck-torch-px: 2px; animation: ck-torch .6s steps(4) infinite;
}
html[data-look="castle"] .logo::after { transform: scaleX(-1); animation-delay: -.3s; }
html[data-look="castle"] .logo-img { display: none; }
html[data-look="castle"] .logo-text {
  display: block; padding: 0 .2em .1em 0; white-space: nowrap;
  font: 60px/1 var(--ck-pixel); color: var(--ck-gold); text-shadow: var(--ck-outline);
}

/* the welcome box: a stone frame, a heading, a word from the gatekeeper, then the menu */
html[data-look="castle"] .apps {
  display: grid; gap: 10px;
  padding: 12px 8px 10px;
  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"] .apps::before {
  content: "Welcome to Frizzy G"; content: "Welcome to Frizzy G" / "";
  order: -2; text-align: center;
  font: 20px/1.2 var(--ck-pixel); color: var(--ck-yellow); text-shadow: var(--ck-shadow);
}
html[data-look="castle"] .apps::after {
  content: "Where to, your lordship?"; content: "Where to, your lordship?" / "";
  order: -1; margin: -6px 0 4px; text-align: center;
  font: italic 17px/1.3 var(--ck-serif); color: var(--ck-dim);
}

/* the menu: a bevelled stone entry per app (the whole entry is the link), its crest on the left
   and its name in the pixel font, big (the names are all the entries say) */
html[data-look="castle"] .app {
  --crest: var(--crest-mbao);
  display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center;
  min-height: 80px; padding: 12px 12px 12px 12px;
  color: var(--ck-white); text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: var(--ck-stone-mid); border: 2px solid #000;
  box-shadow: var(--ck-raise), var(--ck-drop);
}
html[data-look="castle"] .app-mbao { --crest: var(--crest-mbao); }
html[data-look="castle"] .app-stretcher { --crest: var(--crest-stretcher); }
html[data-look="castle"] .app-earshot { --crest: var(--crest-earshot); }
/* behind George's PIN (pin\README.md): the entry gets a third column, and in it, beside the name, a
   little iron plaque: a gold padlock and "PIN" in menu orange. Real text, so a screen reader says it */
html[data-look="castle"] .app-locked { grid-template-columns: 42px minmax(0, 1fr) auto; }
html[data-look="castle"] .app-lock {
  grid-column: 3; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 5px 3px 5px; white-space: nowrap;
  font: 20px/1 var(--ck-pixel); color: var(--ck-orange); text-shadow: var(--ck-shadow);
  background: var(--ck-well); border: 2px solid #000; box-shadow: var(--ck-sunk);
}
html[data-look="castle"] .app-lock::before {
  content: ""; flex: none; width: 14px; height: 16px; margin-top: -2px;
  background: var(--lock-px) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
html[data-look="castle"] .app::before { /* the crest, 3x */
  content: ""; grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 42px; height: 51px;
  background: var(--crest) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
html[data-look="castle"] .app-name {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font: 28px/1.2 var(--ck-pixel); color: var(--ck-white); text-shadow: var(--ck-shadow);
}
html[data-look="castle"] .app-what {
  grid-column: 2 / -1; grid-row: 2; align-self: start;
  font: 17px/1.3 var(--ck-serif); color: var(--ck-dim); text-wrap: pretty;
}
/* pointed at or tabbed to: a gold edge and the name in yellow; pressed: the stone goes in */
@media (hover: hover) {
  html[data-look="castle"] .app:hover { border-color: var(--ck-gold); }
  html[data-look="castle"] .app:hover .app-name { color: var(--ck-yellow); }
}
html[data-look="castle"] .app:focus-visible { border-color: var(--ck-gold); outline: 2px solid var(--ck-yellow); outline-offset: 2px; }
html[data-look="castle"] .app:focus-visible .app-name { color: var(--ck-yellow); }
html[data-look="castle"] .app:active { box-shadow: var(--ck-press); transform: translate(2px, 2px); }
html[data-look="castle"] .app:active .app-name { color: var(--ck-yellow); }

/* the look menu: lookmenu.css draws it for every look (.top-end, .corner, .look-menu, .look-burger,
   .look-panel, .look-panel-label, .lm-opts, .lm-opt, .lm-night, .lm-frizzy, .lm-tom, .lm-castle, and
   the Tom mode PIN form: .lm-pin, .lm-pin-label, .lm-pin-row, .lm-pin-input, .lm-pin-go, .lm-pin-wrong);
   here it only takes the castle's yellow focus ring */
html[data-look="castle"] .look-burger:focus-visible,
html[data-look="castle"] .lm-opt:focus-visible { outline: 2px solid var(--ck-yellow); outline-offset: 2px; }

/* ---------- sizes ---------- */

/* a short phone: a little less air */
@media (max-height: 760px) and (max-width: 599px) {
  html[data-look="castle"] .home { gap: 14px; padding-top: max(66px, calc(env(safe-area-inset-top) + 58px)); }
  html[data-look="castle"] .apps { gap: 8px; }
}

/* a tablet: a bigger title, the torches at 4x and bigger entries */
@media (min-width: 600px) {
  html[data-look="castle"] .home { max-width: 600px; gap: 26px; }
  html[data-look="castle"] .logo { gap: 22px; }
  html[data-look="castle"] .logo::before,
  html[data-look="castle"] .logo::after { width: 48px; height: 120px; background-size: 192px 120px; --ck-torch-px: 4px; }
  html[data-look="castle"] .logo-text { font-size: 80px; }
  html[data-look="castle"] .apps { gap: 12px; padding: 18px; }
  html[data-look="castle"] .apps::before { font-size: 30px; }
  html[data-look="castle"] .apps::after { margin: -4px 0 6px; font-size: 19px; }
  html[data-look="castle"] .app { column-gap: 18px; min-height: 96px; padding: 14px 18px 15px 16px; }
  html[data-look="castle"] .app-name { font-size: 34px; }
  html[data-look="castle"] .app-what { font-size: 18px; }
  html[data-look="castle"] .ambient i:nth-child(3) { left: auto; right: 5%; top: 1%; width: 160px; height: 160px; background-size: 48px 48px, auto; }
  html[data-look="castle"] body::after { background-position: center bottom; }
}

/* a desktop: the full login screen. A bigger title, and the box opens out into three entries side
   by side, like the login screen's buttons: the crest at 4x over the name, the PIN plaque in the
   corner. It sits high enough that the castle shows under it */
@media (min-width: 900px) {
  html[data-look="castle"] body { padding-bottom: 110px; }
  html[data-look="castle"] .ambient i:nth-child(3) { right: 9%; top: 6%; }
  html[data-look="castle"] .home { max-width: 860px; gap: 30px; padding-top: 56px; padding-bottom: 40px; }
  html[data-look="castle"] .logo { gap: 30px; }
  html[data-look="castle"] .logo::before,
  html[data-look="castle"] .logo::after { width: 60px; height: 150px; background-size: 240px 150px; --ck-torch-px: 5px; }
  html[data-look="castle"] .logo-text { font-size: 100px; }
  html[data-look="castle"] .apps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 22px 24px; }
  html[data-look="castle"] .apps::before,
  html[data-look="castle"] .apps::after { grid-column: 1 / -1; }
  html[data-look="castle"] .apps::after { margin-bottom: 8px; }
  html[data-look="castle"] .app,
  html[data-look="castle"] .app-locked {
    position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 14px;
    justify-items: center; align-content: center; min-height: 176px; padding: 22px 16px 20px; text-align: center;
  }
  html[data-look="castle"] .app::before { grid-column: 1; grid-row: 1; width: 56px; height: 68px; }
  html[data-look="castle"] .app-name { grid-column: 1; grid-row: 2; font-size: 32px; }
  html[data-look="castle"] .app-lock { position: absolute; grid-column: auto; grid-row: auto; top: 10px; right: 10px; }
}
/* a laptop that isn't very tall: the title back to 80px and less air, so it still fits */
@media (min-width: 900px) and (max-height: 820px) {
  html[data-look="castle"] body { padding-bottom: 50px; }
  html[data-look="castle"] .home { gap: 22px; padding-top: 36px; padding-bottom: 24px; }
  html[data-look="castle"] .logo { gap: 22px; }
  html[data-look="castle"] .logo::before,
  html[data-look="castle"] .logo::after { width: 48px; height: 120px; background-size: 192px 120px; --ck-torch-px: 4px; }
  html[data-look="castle"] .logo-text { font-size: 80px; }
}
@media (min-width: 900px) and (max-height: 690px) {
  html[data-look="castle"] body { padding-bottom: 0; }
  html[data-look="castle"] .home { gap: 16px; padding-top: 24px; padding-bottom: 20px; }
}
/* a phone on its side: the title needn't clear the menu button, which is off to the right */
@media (min-width: 600px) and (max-height: 520px) {
  html[data-look="castle"] .home { padding-top: 20px; gap: 18px; }
}

/* ---------- motion ---------- */

/* nothing moves: the torches show their first frame, the stars hold still */
@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; }
}

/* more contrast asked for: the secondary words go white */
@media (prefers-contrast: more) {
  html[data-look="castle"] .app-what, html[data-look="castle"] .apps::after { color: var(--ck-white); }
}

/* Windows high contrast: keep every edge visible */
@media (forced-colors: active) {
  html[data-look="castle"] .apps { border: 2px solid CanvasText; border-image: none; }
  html[data-look="castle"] .app, html[data-look="castle"] .app-lock { border: 2px solid CanvasText; }
  html[data-look="castle"] .app:focus-visible { outline: 3px solid Highlight; }
  html[data-look="castle"] .ambient, html[data-look="castle"] body::before, html[data-look="castle"] body::after { display: none; }
}