/* =========================================================================================
   Sir Mucksalot: "Frizzy G", hand-made in the original brand language (23 Oct 2026), the same
   language as frizzy-g.com's and Mbao's sticker looks. No Night left in it.

   Grey #808080, lime #55FF00, black, and white only for small highlights. Everything that
   matters is a sticker: cut out with a 3px black outline and slapped down on a hard black offset
   shadow. The big lettering is the logo's: heavy italic lime with a fat black stroke and a hard
   black shadow, often over a lime rule in a black bar. Body text is bold system sans in black.

   The comedy: the tale is told on sticker cards and every choice is a sticker of its own, a bit
   crooked, as if slapped on by hand (the sticker is tilted, never the words: tilted paragraphs
   print jagged on a plain 1x screen, so anything you read lies level). Each of the ten endings
   gets its own card and its own emblem sticker (a crown, the Grail, a knight's shield, a
   wizard's hat, a manor, a jester's cap, a hermit's lantern, a toad, an axe, a sad pig). Ending 1
   is a full sticker-bomb (stars, HUZZAH!, a 10/10 seal, and frizzy.js throws confetti); ending 10
   is a sad grey sticker: grey dripping lettering, flies, a tag hanging off by one end, and the
   card's corner curling away.

   The rules the palette forces (as on every Frizzy G site):
     - black is the only text colour on the greys (#808080 gives black 5.3:1) and on lime (15:1);
     - lime is a fill, or sits on black, or is lettering with a fat black stroke: never plain
       lime text on grey (3:1);
     - nothing behind text is darker than the ground (the dots, the swells and the live ink only
       ever lighten it).

   Calm where it matters: on a scene (body[data-screen="scene"]) nothing loops. Stickers slap
   down once as a page arrives (transform only, so text is readable from the first frame) and
   hover lifts one off its shadow; the only loops (the swells breathing, the Begin button's
   shine) run on the title. Nothing moves under prefers-reduced-motion. System fonts only (the
   CSP allows no web fonts); art is data: SVGs. frizzy.js only adds the ffx- classes at the end
   of this file: the page above them is complete without it. The burger is lookmenu.css.
   ========================================================================================= */

:root {
  color-scheme: light;

  /* the greys: the ground, and the steps up from it (all lighter, so black text only gains) */
  --grey: #808080;            /* the ground: black on it 5.3:1 */
  --dot: #8a8a8a;             /* the dot screen printed on the ground */
  --dot-2: #969696;           /* the halftone swells */
  --grey-2: #9b9b9b;          /* raised: cards and choices (black on it 7.6:1) */
  --grey-3: #b4b4b4;          /* lighter: hovers, the sad sticker's lettering (black on it 10:1) */
  --lime: #55ff00;
  --ink: #000000;
  --paper: #ffffff;           /* small highlights only */

  /* the sticker language */
  --line: 3px;
  --sh: 5px 5px 0 var(--ink);
  --sh-s: 3px 3px 0 var(--ink);
  --sh-l: 7px 7px 0 var(--ink);
  --r-l: 22px;
  --r-m: 14px;
  --gutter: 16px;

  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);
  --slap: cubic-bezier(.25, 1.6, .45, 1);   /* a sticker slapped down: overshoots, then sits */

  /* the dot screen: a 45-degree lattice, 9.9px apart (two square grids, one offset half a tile);
     frizzy.js prints its live ink on exactly this lattice */
  --screen: 14px 14px;

  /* the cartoon shine: two hard white bars, slid across a lime button with background-position */
  --glint: linear-gradient(105deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .77) 45% 47.2%, rgba(255, 255, 255, 0) 47.2% 48.6%, rgba(255, 255, 255, .77) 48.6% 49.3%, rgba(255, 255, 255, 0) 49.3%);
  /* the go arrow, in black (it sits on lime) */
  --i-go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8h9.6M8.4 3.6 12.8 8l-4.4 4.4' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* the emblems: one sticker per ending, lime (or grey) art cut out in black on a hard shadow */
  --e-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='a' d='M10 50 7 19 20 31 32 10 44 31 57 19 54 50Z'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%2355ff00'/%3E%3Cpath d='M9.5 42H54.5' fill='none'/%3E%3Ccircle cx='7' cy='19' r='3.6' fill='%23fff'/%3E%3Ccircle cx='32' cy='10' r='4' fill='%23fff'/%3E%3Ccircle cx='57' cy='19' r='3.6' fill='%23fff'/%3E%3Cpath d='M32 31.5 35.5 35 32 38.5 28.5 35Z' fill='%23000' stroke-width='2'/%3E%3Cpath d='M14 24.5 15.5 38' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --e-grail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='a' d='M14 9H50C50 27 43 36 35.5 37.5V46C41 46.5 46 49 46 54H18C18 49 23 46.5 28.5 46V37.5C21 36 14 27 14 9Z'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%2355ff00'/%3E%3Cpath d='M14.5 15H49.5' fill='none'/%3E%3Cpath d='M20 20C20.5 25 22.5 29 25.5 31.5' fill='none' stroke='%23fff' stroke-width='2.6'/%3E%3Cpath d='M55 2 57 8 63 10 57 12 55 18 53 12 47 10 53 8Z' fill='%23fff' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  --e-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='a' d='M11 7H53V28C53 43 44 52 32 58C20 52 11 43 11 28Z'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%2355ff00'/%3E%3Cpath d='M32 8.5V56M12.5 26H51.5' fill='none' stroke-width='5.5'/%3E%3Cpath d='M16.5 12V20' fill='none' stroke='%23fff' stroke-width='2.6'/%3E%3C/g%3E%3C/svg%3E");
  --e-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='a' d='M4 49C4 44.5 18 41.5 32 41.5S60 44.5 60 49 46 56 32 56 4 53.5 4 49Z'/%3E%3Cpath id='b' d='M17 47 31 5C35 9 41 10 46 9L43 13 47 47C38 50.5 26 50.5 17 47Z'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%2355ff00'/%3E%3Cuse href='%23b' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23b' fill='%2355ff00'/%3E%3Cpath d='M19 40.5C27 43.5 37 43.5 45.5 40.5L46.5 46.5C37.5 49.5 26.5 49.5 17.5 46.5Z' fill='%23000'/%3E%3Cpath d='M33 22 34.6 26.4 39 28 34.6 29.6 33 34 31.4 29.6 27 28 31.4 26.4Z' fill='%23fff' stroke-width='1.8'/%3E%3Ccircle cx='38' cy='17' r='1.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='26' cy='36' r='1.9' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --e-manor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='a' d='M10 29 32 10 54 29V56H10Z'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M43 23V9H50V29' fill='%23000' transform='translate(3 3)'/%3E%3Cpath d='M43 23V9H50V29' fill='%23b4b4b4'/%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%2355ff00'/%3E%3Cpath d='M6 31.5 32 8 58 31.5' fill='none' stroke-width='5.5'/%3E%3Cpath d='M26.5 56V45A5.5 5.5 0 0 1 37.5 45V56Z' fill='%23000'/%3E%3Cpath d='M15.5 34H23.5V42H15.5ZM40.5 34H48.5V42H40.5Z' fill='%23fff' stroke-width='2.6'/%3E%3Cpath d='M32 2V9M32 2.5H40.5L38 5 40.5 7.5H32' fill='%2355ff00' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E");
  --e-jester: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='a' d='M13 46C13 33 11 25 7 20C16 19.5 22.5 25 26 32C26 22 28 14 32 8C36 14 38 22 38 32C41.5 25 48 19.5 57 20C53 25 51 33 51 46Z'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%2355ff00'/%3E%3Cpath d='M26 32C28 36 30 41 30 46M38 32C36 36 34 41 34 46' fill='none' stroke-width='2.4'/%3E%3Cpath d='M10 45H54V54H10Z' fill='%23000' transform='translate(2 2)'/%3E%3Cpath d='M10 45H54V54H10Z' fill='%23000'/%3E%3Cpath d='M19 49.5 21.5 47 24 49.5 21.5 52ZM29.5 49.5 32 47 34.5 49.5 32 52ZM40 49.5 42.5 47 45 49.5 42.5 52Z' fill='%2355ff00' stroke='none'/%3E%3Ccircle cx='7' cy='20' r='4.2' fill='%23fff'/%3E%3Ccircle cx='32' cy='7.5' r='4.2' fill='%23fff'/%3E%3Ccircle cx='57' cy='20' r='4.2' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  --e-lantern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Crect id='a' x='19' y='15' width='26' height='32' rx='3'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='32' cy='7' r='4' fill='none'/%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%2355ff00'/%3E%3Cpath d='M24 10.5H40L45 15H19Z' fill='%23000'/%3E%3Cpath d='M16.5 46H47.5V53H16.5Z' fill='%23000'/%3E%3Cpath d='M25.5 15V46M38.5 15V46' fill='none' stroke-width='2.4'/%3E%3Cpath d='M32 22C36.5 27 37.5 31.5 35.5 35C34.2 37.2 29.8 37.2 28.5 35C26.5 31.5 27.5 27 32 22Z' fill='%23fff' stroke-width='2.2'/%3E%3Cpath d='M51 26 55 24M52 33H57M51 40 55 42' fill='none' stroke-width='2.6'/%3E%3C/g%3E%3C/svg%3E");
  --e-toad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='a' d='M5 41C5 29 17 25 32 25S59 29 59 41 47 57 32 57 5 53 5 41Z'/%3E%3Ccircle id='b' cx='18.5' cy='22' r='9'/%3E%3Ccircle id='c' cx='45.5' cy='22' r='9'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23b' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23c' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%2355ff00'/%3E%3Cuse href='%23b' fill='%2355ff00'/%3E%3Cuse href='%23c' fill='%2355ff00'/%3E%3Ccircle cx='19.5' cy='23' r='4.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='46.5' cy='23' r='4.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='18' cy='21.3' r='1.5' fill='%23fff' stroke='none'/%3E%3Ccircle cx='45' cy='21.3' r='1.5' fill='%23fff' stroke='none'/%3E%3Cpath d='M14 41C23 48.5 41 48.5 50 41' fill='none'/%3E%3Cpath d='M28.5 34h.1M35.5 34h.1' stroke-width='3.4'/%3E%3C/g%3E%3C/svg%3E");
  --e-axe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='a' d='M33 8C46 1 61 9 60 25C54 20.5 46 20 40 23.5Z'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M44 7 15 58' fill='none' stroke-width='10' transform='translate(3 3)'/%3E%3Cpath d='M44 7 15 58' fill='none' stroke-width='10'/%3E%3Cpath d='M44 7 15 58' fill='none' stroke='%23b4b4b4' stroke-width='4'/%3E%3Cg stroke-width='3'%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%2355ff00'/%3E%3Cpath d='M50.5 6.5C55.5 9 58.5 14 58.5 19.5' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3Cpath d='M38.5 10.5 43 13 41 17.5 36.5 15Z' fill='%23000' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --e-pig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='a' d='M15 22 10 5 27 14Z'/%3E%3Cpath id='b' d='M49 22 54 5 37 14Z'/%3E%3Ccircle id='c' cx='32' cy='34' r='21'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23b' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23c' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%23b4b4b4'/%3E%3Cuse href='%23b' fill='%23b4b4b4'/%3E%3Cuse href='%23c' fill='%23b4b4b4'/%3E%3Cellipse cx='32' cy='40' rx='10' ry='7' fill='%239b9b9b'/%3E%3Cpath d='M28.5 40h.1M35.5 40h.1' stroke-width='4'/%3E%3Cpath d='M23.5 29.5h.1M40.5 29.5h.1' stroke-width='5'/%3E%3Cpath d='M18 25.5 26 22M46 25.5 38 22' fill='none' stroke-width='2.6'/%3E%3Cpath d='M27 52.5C30 49.5 34 49.5 37 52.5' fill='none' stroke-width='2.6'/%3E%3Cpath d='M20 33.5C22.4 36.6 23.2 38.6 21.8 40.2 20.6 41.4 18.6 41 18.3 39.2 18 37.4 19 35.6 20 33.5Z' fill='%23fff' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E");
  /* the brand mark: a little crown */
  --e-mark: var(--e-crown);

  /* the sticker-bomb's bits: stars, sparkles, glossy balls */
  --s-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3Cpath id='a' d='M20 2 25.3 13.9 38 15.2 28.5 23.8 31.1 36.6 20 30.1 8.9 36.6 11.5 23.8 2 15.2 14.7 13.9Z'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round'%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%2355ff00'/%3E%3C/g%3E%3C/svg%3E");
  --s-star-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3Cpath id='a' d='M20 2 25.3 13.9 38 15.2 28.5 23.8 31.1 36.6 20 30.1 8.9 36.6 11.5 23.8 2 15.2 14.7 13.9Z'/%3E%3C/defs%3E%3Cg stroke='%23000' stroke-width='3' stroke-linejoin='round'%3E%3Cuse href='%23a' x='3' y='3' fill='%23000'/%3E%3Cuse href='%23a' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  --s-star-k: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M20 3.5 25.3 13.9 37 15.2 28.5 23.8 31.1 35.5 20 30.1 8.9 35.5 11.5 23.8 3 15.2 14.7 13.9Z' fill='%23000' stroke='%2355ff00' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --s-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M20 2 24.5 15.5 38 20 24.5 24.5 20 38 15.5 24.5 2 20 15.5 15.5Z' fill='%23fff' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --s-ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='23' cy='23' r='16' fill='%23000'/%3E%3Ccircle cx='20' cy='20' r='16' fill='%2355ff00' stroke='%23000' stroke-width='3'/%3E%3Ccircle cx='14.5' cy='14' r='4' fill='%23fff'/%3E%3C/svg%3E");
  /* the sad sticker's bits: its peeled corner (the back of the sticker), a fly, a drippy rule */
  --s-flap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100 0C76 7 40 6 12 12 6 40 7 76 0 100Z' transform='translate(5 5)' fill='%23000'/%3E%3Cpath d='M100 0C76 7 40 6 12 12 6 40 7 76 0 100Z' fill='%23b4b4b4' stroke='%23000' stroke-width='3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M27 19C45 15.5 62 13.5 79 9.5M19 27C16 37 15 46 14 55' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --s-fly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cg stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cellipse cx='14' cy='11' rx='7' ry='4.5' fill='%23fff' transform='rotate(-28 14 11)'/%3E%3Cellipse cx='25' cy='11' rx='7' ry='4.5' fill='%23fff' transform='rotate(28 25 11)'/%3E%3Cellipse cx='19.5' cy='19' rx='5' ry='7' fill='%23000'/%3E%3Cpath d='M3 21H8M2 26H7M32 24H37M33 29H38' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  --s-drip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 30' preserveAspectRatio='none'%3E%3Cpath d='M7 3H313A4.5 4.5 0 0 1 313 12H236V19A3.5 3.5 0 0 1 229 19V12H118V24A4 4 0 0 1 110 24V12H7A4.5 4.5 0 0 1 7 3Z' fill='%23000'/%3E%3Cpath d='M10 7.5H310' stroke='%23b4b4b4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* a real spring where the browser can do one */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .12 4%, .44 10%, .79 17%, .98 23%, 1.05 28%, 1.06 32%, 1.04 38%, 1.01 46%, .995 56%, 1);
    --slap: linear(0, .3 6%, .8 13%, 1.08 19%, 1.12 24%, 1.06 32%, .985 42%, .995 56%, 1);
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* the screens set display: flex; hidden must still hide them */
html { background: var(--grey); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  color: var(--ink); font: 600 16px/1.5 var(--font);
  overflow-x: clip; -webkit-tap-highlight-color: transparent;
}
a { color: var(--ink); }
button { font: inherit; color: inherit; margin: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* the ground: grey, with a fine dot screen printed on it (lighter than the grey, never darker) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle, var(--dot) 1.15px, rgba(138, 138, 138, 0) 1.75px) 0 0 / var(--screen),
    radial-gradient(circle, var(--dot) 1.15px, rgba(138, 138, 138, 0) 1.75px) 7px 7px / var(--screen),
    var(--grey);
}

/* the halftone swells (.ambient, three <i>): three big soft "lights" printed in the same dot screen
   with bigger dots, stepping down in size towards their edge. Each <i> is a whole-screen layer (so
   its dots sit exactly on the ground's screen) with three rings: big dots inside, then medium,
   then small. --x/--y is the centre, --s the radius. Lighter than the ground */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient i, .ambient i::before, .ambient i::after {
  position: absolute; inset: 0; display: block;
  --swell: radial-gradient(circle, var(--dot-2) var(--d), rgba(150, 150, 150, 0) calc(var(--d) + .6px));
  background: var(--swell) 0 0 / var(--screen), var(--swell) 7px 7px / var(--screen);
}
.ambient i::before, .ambient i::after { content: ""; }
.ambient i { --d: 3.5px; -webkit-mask: radial-gradient(circle at var(--x) var(--y), #000 calc(var(--s) * .3), transparent calc(var(--s) * .5)); mask: radial-gradient(circle at var(--x) var(--y), #000 calc(var(--s) * .3), transparent calc(var(--s) * .5)); }
.ambient i::before { --d: 2.6px; -webkit-mask: radial-gradient(circle at var(--x) var(--y), #000 calc(var(--s) * .5), transparent calc(var(--s) * .75)); mask: radial-gradient(circle at var(--x) var(--y), #000 calc(var(--s) * .5), transparent calc(var(--s) * .75)); }
.ambient i::after { --d: 1.8px; -webkit-mask: radial-gradient(circle at var(--x) var(--y), #000 calc(var(--s) * .7), transparent var(--s)); mask: radial-gradient(circle at var(--x) var(--y), #000 calc(var(--s) * .7), transparent var(--s)); }
.ambient i:nth-child(1) { --x: 0vw; --y: 0vh; --s: 58vw; }    /* overhead, on the left */
.ambient i:nth-child(2) { --x: 104vw; --y: 46vh; --s: 50vw; }  /* coming in from the right */
.ambient i:nth-child(3) { --x: -6vw; --y: 96vh; --s: 56vw; }   /* low down */
/* on the title only, they breathe (opacity only); never while a scene is being read */
body[data-screen="title"] .ambient i:nth-child(1) { animation: ffx-breathe 9s ease-in-out infinite alternate; }
body[data-screen="title"] .ambient i:nth-child(2) { animation: ffx-breathe 11s ease-in-out -4s infinite alternate; }
body[data-screen="title"] .ambient i:nth-child(3) { animation: ffx-breathe 13s ease-in-out -7s infinite alternate; }

/* the logo's lettering: lime, a fat black stroke round it (painted under the fill), a hard black
   shadow. --k is the stroke, --d the shadow */
.title, .scene-title, .end-name, .brand-name, .scene-text p:first-child::first-letter {
  color: var(--lime); -webkit-text-stroke: var(--k) var(--ink); paint-order: stroke fill;
  text-shadow: var(--d) var(--d) 0 var(--ink);
}

/* ---------- the frame ---------- */

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 680px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) var(--gutter) 4px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; color: var(--ink); text-decoration: none; }
.brand-mark { flex: none; width: 36px; height: 36px; background: var(--e-mark) center / contain no-repeat; rotate: -10deg; transition: rotate .5s var(--spring); }
@media (hover: hover) { .brand:hover .brand-mark { rotate: 8deg; } }
.brand-name { --k: 5px; --d: 2px; padding: 0 4px 3px 1px; font: italic 900 21px/1.1 var(--font); letter-spacing: -.005em; }
/* on the title the big lettering says it: the corner keeps just the crown */
body[data-screen="title"] .brand-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand:focus-visible { outline-offset: 2px; border-radius: 12px; }

main:not(.pin-gate) { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 8px var(--gutter) 36px; } /* (the PIN page's main is lookmenu.css's) */
.foot { width: 100%; max-width: 640px; margin: 0 auto; padding: 6px var(--gutter) max(24px, env(safe-area-inset-bottom)); }
.foot-line { margin: 0; text-align: center; font: 700 13px/1.45 var(--font); color: var(--ink); text-wrap: balance; }
.foot-line a { font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (hover: hover) { .foot-line a:hover { background: var(--lime); box-shadow: 0 0 0 2px var(--lime); border-radius: 3px; } }

/* ---------- buttons ---------- */

/* the big one (Begin, Play again): a lime pill sticker with a black arrow */
.btn-begin {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 220px; min-height: 62px; margin: 30px 0 0; padding: 0 26px 0 32px;
  border: var(--line) solid var(--ink); border-radius: 999px;
  background: var(--glint) 160% 0 / 250% 100% no-repeat, var(--lime);
  box-shadow: var(--sh); color: var(--ink); font: italic 900 23px/1 var(--font); letter-spacing: .005em;
  transition: translate .45s var(--spring), box-shadow .2s var(--ease);
}
.btn-begin::after { content: ""; flex: none; width: 22px; height: 22px; background: var(--i-go) center / contain no-repeat; transition: translate .45s var(--spring); }
@media (hover: hover) {
  .btn-begin:hover { translate: -2px -2px; box-shadow: var(--sh-l); }
  .btn-begin:hover::after { translate: 4px 0; }
}
/* pressed: the sticker goes down into its shadow */
.btn-begin:active { translate: 4px 4px; box-shadow: 1px 1px 0 var(--ink); transition-duration: .06s; }
.btn-begin:focus-visible { outline-offset: 5px; border-radius: 999px; }

/* the small ones (Back, Start again, Title): grey pills */
.link-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 2.5px solid var(--ink); border-radius: 999px; background: var(--grey-2); box-shadow: var(--sh-s);
  font: 800 14.5px/1 var(--font); color: var(--ink);
  transition: translate .45s var(--spring), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
@media (hover: hover) { .link-btn:hover { translate: -1px -1px; box-shadow: 4px 4px 0 var(--ink); background-color: var(--grey-3); } }
.link-btn:active { translate: 3px 3px; box-shadow: 0 0 0 var(--ink); transition-duration: .06s; }
.link-btn:focus-visible { border-radius: 999px; }
.link-btn[hidden] { display: none; }

/* ---------- the title ---------- */

.screen { min-width: 0; }
.title-screen { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 2vh; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 4px;
  font: 900 12px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.kicker::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--ink); }
/* the name, stacked like the logo: a small "Sir" over a huge MUCKSALOT (every word gets a line of
   its own; the first line is the small one), on a lime rule in a black bar */
.title {
  --k: .12em; --d: .055em;
  margin: 0; padding: 0 .12em .02em .04em;
  font: italic 900 clamp(56px, 17vw, 112px)/.96 var(--font); letter-spacing: -.015em;
  word-spacing: 100vw;
}
.title::first-line { font-size: .5em; letter-spacing: .02em; }
.title::after {
  content: ""; display: block; width: 94%; height: .16em; margin: .1em auto 0; border-radius: 99px;
  background: linear-gradient(var(--lime), var(--lime)) center / calc(100% - .12em) .05em no-repeat, var(--ink);
  rotate: -2.5deg;
}
/* slapped on crooked: the sticker is its own layer, tilted, and the words stay level on it (tilted
   paragraphs print jagged on a plain 1x screen) */
.tagline {
  position: relative; isolation: isolate; max-width: 25em; margin: 26px 0 0; padding: 17px 21px 18px;
  font: 650 17px/1.45 var(--font); color: var(--ink); text-wrap: pretty;
}
.tagline::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: var(--line) solid var(--ink); border-radius: var(--r-l); background: var(--grey-2); box-shadow: var(--sh); rotate: -1.2deg;
}
.meta {
  margin: 20px 0 0; padding: 7px 15px 8px; border-radius: 999px; background: var(--ink); color: var(--lime);
  font: italic 800 13.5px/1.3 var(--font); letter-spacing: .01em; rotate: 1.5deg;
}
.found { width: 100%; max-width: 420px; margin: 44px 0 0; }
.found-label { margin: 0 0 12px; font: 900 12px/1.3 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-align: center; }

/* the ladder of fortunes: one grey sticker, the crown at the top, the slop at the bottom. A
   fortune you've found has a black disc with a lime number; one you haven't is dashed, "???";
   yours is a lime sticker of its own, slapped on crooked, with a YOU tag */
.ladder {
  list-style: none; margin: 0; padding: 8px; display: grid; gap: 3px; text-align: left;
  border: var(--line) solid var(--ink); border-radius: var(--r-l); background: var(--grey-2); box-shadow: var(--sh);
}
.rung { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 5px 10px 5px 5px; border-radius: 14px; font: 700 15px/1.25 var(--font); color: var(--ink); }
.rung-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2.5px dashed var(--ink); font: italic 900 14px/1 var(--font); }
.rung-name { flex: 1; min-width: 0; }
.rung:not(.is-found) .rung-name { letter-spacing: .3em; }
.rung.is-found .rung-n { border-style: solid; background: var(--ink); color: var(--lime); }
.rung.is-you {
  margin: 3px -2px; background: var(--lime); box-shadow: inset 0 0 0 3px var(--ink), 3px 3px 0 var(--ink);
  font-style: italic; font-weight: 900; rotate: -1.2deg;
}
.rung-you { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--lime); font: italic 900 11px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- a scene: the tale on a grey sticker, a lime chapter tab stuck on its edge ---------- */

.scene-screen { padding-top: 16px; }
.scene {
  position: relative; isolation: isolate; padding: 30px 20px 24px;
  border: var(--line) solid var(--ink); border-radius: var(--r-l); box-shadow: var(--sh-l);
  /* lime ink printed in the top corner, three sizes of dot, shrinking as they leave it */
  background:
    radial-gradient(circle at 100% 0, rgba(155, 155, 155, 0) 70px, var(--grey-2) 130px),
    radial-gradient(circle, var(--lime) 0 1.2px, rgba(85, 255, 0, 0) 1.7px) 0 0 / 9px 9px,
    radial-gradient(circle at 100% 0, rgba(155, 155, 155, 0) 40px, var(--grey-2) 90px),
    radial-gradient(circle, var(--lime) 0 2.4px, rgba(85, 255, 0, 0) 2.9px) 0 0 / 9px 9px,
    radial-gradient(circle at 100% 0, rgba(155, 155, 155, 0) 0, var(--grey-2) 50px),
    radial-gradient(circle, var(--lime) 0 3.6px, rgba(85, 255, 0, 0) 4.1px) 0 0 / 9px 9px,
    var(--grey-2);
}
.scene-kicker {
  position: absolute; top: -18px; left: 16px; margin: 0; padding: 6px 13px;
  border: var(--line) solid var(--ink); border-radius: 999px; background: var(--lime); box-shadow: var(--sh-s);
  font: 900 12px/1.2 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); rotate: -3deg;
}
.scene-title {
  --k: 6px; --d: 3px;
  margin: 0 0 16px; padding: 0 .1em .04em 0; outline: none;
  font: italic 900 clamp(30px, 8.6vw, 40px)/1.06 var(--font); letter-spacing: -.005em; text-wrap: balance;
}
.scene-text p { margin: 0 0 .85em; font: 600 17.5px/1.56 var(--font); color: var(--ink); text-wrap: pretty; }
.scene-text p:last-child { margin-bottom: 0; }
.scene-text p:first-child { display: flow-root; } /* a one-line opening still clears its drop capital */
/* the drop capital, in the logo's lettering */
.scene-text p:first-child::first-letter {
  --k: 7px; --d: 3px;
  float: left; margin: .1em .1em 0 -.02em; padding: 0 .08em 0 0;
  font: italic 900 3.15em/.82 var(--font);
}

/* the choices: stickers of their own, each slapped on a little crooked (the sticker is a layer of
   its own, tilted; the words stay level on it) */
.choices { list-style: none; margin: 28px 0 0; padding: 0 5px 0 0; display: grid; gap: 14px; }
.choice {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 11px 16px 11px 11px;
  border: var(--line) solid transparent; border-radius: 18px; background: none;
  color: var(--ink); text-align: left;
  transition: translate .45s var(--spring);
}
.choice::before {
  content: ""; position: absolute; inset: calc(var(--line) * -1); z-index: -1; pointer-events: none;
  border: var(--line) solid var(--ink); border-radius: 18px; background: var(--grey-2); box-shadow: var(--sh); rotate: var(--crook, 0deg);
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.choices li:nth-child(odd) .choice { --crook: -.7deg; }
.choices li:nth-child(even) .choice { --crook: .6deg; }
@media (hover: hover) {
  .choice:hover { translate: -2px -2px; }
  .choice:hover::before { box-shadow: var(--sh-l); background-color: var(--grey-3); }
}
.choice:active { translate: 4px 4px; transition-duration: .06s; }
.choice:active::before { box-shadow: 1px 1px 0 var(--ink); transition-duration: .06s; }
.choice:focus-visible { outline-offset: 4px; border-radius: 18px; }
.choice-n {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: var(--line) solid var(--ink); background: var(--lime); box-shadow: 2px 2px 0 var(--ink);
  font: italic 900 18px/1 var(--font); color: var(--ink);
}
.choices li:nth-child(even) .choice-n { background: var(--ink); color: var(--lime); }
.choice-text { font: 700 16.5px/1.35 var(--font); text-wrap: pretty; }

.scene-nav { display: flex; justify-content: space-between; gap: 12px; margin: 26px 0 0; }
.scene-nav .link-btn:only-child, .scene-nav .link-btn[hidden] + .link-btn { margin-left: auto; }

/* ---------- an ending: its name in big lettering, then its own card ---------- */

.end-screen { position: relative; isolation: isolate; text-align: center; padding-top: 6px; }
.end-rank {
  position: relative; display: inline-block; margin: 6px 0 14px; padding: 7px 14px; border-radius: 999px;
  background: var(--ink); color: var(--lime); font: 900 12px/1.2 var(--font); letter-spacing: .18em; text-transform: uppercase; rotate: var(--tilt, -2deg);
}
.end-name {
  --k: .13em; --d: .06em;
  position: relative; margin: 0 0 34px; padding: 0 .08em .02em; outline: none;
  font: italic 900 clamp(38px, 11.4vw, 64px)/1.02 var(--font); letter-spacing: -.01em; text-wrap: balance;
}
.end-name::after {
  content: ""; display: block; width: min(82%, 360px); height: .2em; margin: .16em auto 0; border-radius: 99px;
  background: linear-gradient(var(--lime), var(--lime)) center / calc(100% - .14em) .06em no-repeat, var(--ink);
  rotate: -2deg;
}
/* the card: a sticker with the ending's emblem stuck on its corner. It lies straight: the tale is read
   here, and tilted paragraphs print jagged; the crookedness is in its tag and its emblem */
.end-scene { text-align: left; padding-top: 26px; }
.end-title { margin: 0 50px 14px 0; font: italic 900 25px/1.15 var(--font); color: var(--ink); text-wrap: balance; }
.end-title::after {
  content: ""; position: absolute; top: -30px; right: -6px; width: 72px; height: 72px; pointer-events: none;
  background: var(--emblem, var(--e-crown)) center / contain no-repeat; rotate: var(--etilt, 10deg);
}
.ladder-head { margin: 46px 0 14px; font: 900 12px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.end-screen .ladder { max-width: 460px; margin: 0 auto; }
.end-screen .found-label { max-width: 30em; margin: 22px auto 0; font: 700 14.5px/1.45 var(--font); letter-spacing: 0; text-transform: none; text-wrap: balance; }
.end-screen .btn-begin { margin-top: 24px; }
.end-screen .scene-nav { justify-content: center; gap: 14px; flex-wrap: wrap; }

/* each fortune: its emblem, how crooked its tag is slapped on, and its card */
body[data-rank="1"] { --emblem: var(--e-crown); --tilt: -2deg; --etilt: 14deg; }
body[data-rank="2"] { --emblem: var(--e-grail); --tilt: 1.6deg; --etilt: 9deg; }
body[data-rank="3"] { --emblem: var(--e-shield); --tilt: -1.4deg; --etilt: 12deg; }
body[data-rank="4"] { --emblem: var(--e-hat); --tilt: 1.2deg; --etilt: 16deg; }
body[data-rank="5"] { --emblem: var(--e-manor); --tilt: -1deg; --etilt: 7deg; }
body[data-rank="6"] { --emblem: var(--e-jester); --tilt: 2.6deg; --etilt: -12deg; }
body[data-rank="7"] { --emblem: var(--e-lantern); --tilt: -1.2deg; --etilt: 8deg; }
body[data-rank="8"] { --emblem: var(--e-toad); --tilt: 1.8deg; --etilt: -8deg; }
body[data-rank="9"] { --emblem: var(--e-axe); --tilt: -2.6deg; --etilt: 4deg; }
body[data-rank="10"] { --emblem: var(--e-pig); --tilt: 3deg; --etilt: -22deg; }
/* the top three are printed on lime, with darker lime ink in the corner */
body[data-rank="1"] .end-scene, body[data-rank="2"] .end-scene, body[data-rank="3"] .end-scene {
  background:
    radial-gradient(circle at 100% 0, rgba(85, 255, 0, 0) 40px, var(--lime) 150px),
    radial-gradient(circle, rgba(0, 0, 0, .17) 2.3px, rgba(0, 0, 0, 0) 2.9px) 0 0 / 11px 11px,
    radial-gradient(circle, rgba(0, 0, 0, .17) 2.3px, rgba(0, 0, 0, 0) 2.9px) 5.5px 5.5px / 11px 11px,
    var(--lime);
}
/* on lime, the drop capital is printed inside out: black, with a white sheen for a shadow */
body[data-rank="1"] .end-scene .scene-text p:first-child::first-letter, body[data-rank="2"] .end-scene .scene-text p:first-child::first-letter,
body[data-rank="3"] .end-scene .scene-text p:first-child::first-letter { color: var(--ink); -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--paper); }
/* the bottom three: plain grey, no ink */
body[data-rank="8"] .end-scene, body[data-rank="9"] .end-scene { background: var(--grey-2); }

/* ---- ending 1, Crowned King: the full sticker-bomb ---- */
/* stars, sparkles and balls slapped all round the heading (behind it) */
body[data-rank="1"] .end-screen::before {
  content: ""; position: absolute; z-index: -1; left: -12px; right: -12px; top: -6px; height: 250px; pointer-events: none;
  background:
    var(--s-star) 1% 34% / 40px 40px no-repeat,
    var(--s-spark) 9% 2% / 26px 26px no-repeat,
    var(--s-ball) 3% 82% / 24px 24px no-repeat,
    var(--s-star-k) 15% 96% / 26px 26px no-repeat,
    var(--s-star-w) 99% 26% / 34px 34px no-repeat,
    var(--s-ball) 88% 4% / 22px 22px no-repeat,
    var(--s-star) 97% 78% / 30px 30px no-repeat,
    var(--s-spark) 84% 98% / 22px 22px no-repeat;
}
/* the rank tag goes lime, with a star on one side and HUZZAH! on the other */
body[data-rank="1"] .end-rank { background: var(--lime); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), var(--sh-s); padding: 8px 15px; }
body[data-rank="1"] .end-rank::before {
  content: ""; position: absolute; right: calc(100% + 6px); top: 50%; width: 38px; height: 38px; margin-top: -21px;
  background: var(--s-star) center / contain no-repeat; rotate: -18deg;
}
body[data-rank="1"] .end-rank::after {
  content: "Huzzah!"; content: "Huzzah!" / "";
  position: absolute; left: calc(100% + 8px); top: -4px; padding: 6px 11px; border-radius: 10px;
  background: var(--ink); color: var(--lime); box-shadow: 0 0 0 2.5px var(--lime), 0 0 0 5px var(--ink);
  font: italic 900 13px/1 var(--font); letter-spacing: .04em; white-space: nowrap; rotate: 10deg;
}
/* a bigger crown, and a 10/10 seal slapped on the card's other corner */
body[data-rank="1"] .end-title::after { width: 92px; height: 92px; top: -44px; right: -4px; }
body[data-rank="1"] .end-scene::before {
  content: "10/10"; content: "10/10" / "";
  position: absolute; z-index: 1; right: -10px; bottom: -22px; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%;
  background: var(--ink); color: var(--lime); box-shadow: 0 0 0 3px var(--lime), 0 0 0 6px var(--ink), 5px 5px 0 4px var(--ink);
  font: italic 900 19px/1 var(--font); letter-spacing: -.02em; rotate: -12deg; pointer-events: none;
}
body[data-rank="1"] .end-scene .scene-text { padding-bottom: 22px; }
body[data-rank="1"] .ladder-head::before, body[data-rank="1"] .ladder-head::after {
  content: ""; display: inline-block; width: 22px; height: 22px; margin: -6px 10px 0; vertical-align: middle;
  background: var(--s-star) center / contain no-repeat;
}
body[data-rank="1"] .ladder-head::after { rotate: 20deg; }

/* ---- ending 10, Face Down in the Slop: a sad grey sticker, peeling off ---- */
body[data-rank="10"] { --peel: 80px; }
/* its tag has come unstuck at one end and hangs off the other */
body[data-rank="10"] .end-rank {
  --tilt: 7deg; transform-origin: 9px 50%; margin-bottom: 24px;
  background: var(--grey-3); color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink);
}
/* the lettering has gone grey, and sags */
body[data-rank="10"] .end-name { color: var(--grey-3); rotate: 1.5deg; }
body[data-rank="10"] .end-name::after { height: .34em; margin-top: .1em; border-radius: 0; background: var(--s-drip) center / 100% 100% no-repeat; rotate: 3deg; }
/* two flies have found it */
body[data-rank="10"] .end-screen::before {
  content: ""; position: absolute; z-index: -1; left: -6px; right: -6px; top: 0; height: 230px; pointer-events: none;
  background: var(--s-fly) 4% 58% / 34px 27px no-repeat, var(--s-fly) 95% 18% / 28px 22px no-repeat;
}
/* the card: its face is a layer with its corner cut off along the fold (--peel from the corner),
   and the peeled corner (the sticker's paler back, curling, on a hard shadow) lies folded over it.
   The words stop short of the fold */
body[data-rank="10"] .end-scene { background: none; border-color: transparent; box-shadow: none; }
body[data-rank="10"] .end-scene::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; pointer-events: none;
  border: var(--line) solid var(--ink); border-radius: var(--r-l); background: var(--grey-2); box-shadow: var(--sh);
  clip-path: polygon(-12px -12px, calc(100% + 12px) -12px, calc(100% + 12px) calc(100% - var(--peel) - 12px), calc(100% - var(--peel) - 12px) calc(100% + 12px), -12px calc(100% + 12px));
}
body[data-rank="10"] .end-scene::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: var(--peel); height: var(--peel); pointer-events: none;
  background: var(--s-flap) center / 100% 100% no-repeat; transform-origin: 100% 100%;
}
body[data-rank="10"] .end-scene .scene-text { padding-right: 12px; padding-bottom: calc(var(--peel) - 22px); }
body[data-rank="10"] .end-title::after { width: 64px; height: 64px; top: -26px; right: -4px; }

/* ---------- motion: stickers slap down as each page arrives (once; transform only) ---------- */

.title-screen.enter .title { animation: ffx-stamp .7s var(--slap) .05s backwards; }
.title-screen.enter .tagline { animation: ffx-slap .6s var(--slap) .2s backwards; }
.title-screen.enter .meta { animation: ffx-slap .5s var(--slap) .3s backwards; }
.title-screen.enter .btn-begin { animation: ffx-slap .6s var(--slap) .38s backwards, ffx-shine 6s ease-in-out 1.8s infinite; }
.title-screen.enter .found { animation: ffx-rise .55s var(--ease) .45s backwards; }
.scene-screen.enter .scene { animation: ffx-slap .5s var(--slap) backwards; }
.scene-screen.enter .scene-kicker { animation: ffx-tab .5s var(--slap) .16s backwards; }
.scene-screen.enter .choices li:nth-child(1) .choice { animation: ffx-slap .5s var(--slap) .14s backwards; }
.scene-screen.enter .choices li:nth-child(2) .choice { animation: ffx-slap .5s var(--slap) .2s backwards; }
.scene-screen.enter .choices li:nth-child(3) .choice { animation: ffx-slap .5s var(--slap) .26s backwards; }
.scene-screen.enter .choices li:nth-child(4) .choice { animation: ffx-slap .5s var(--slap) .32s backwards; }
.end-screen.enter .end-rank { animation: ffx-slap .5s var(--slap) .05s backwards; }
.end-screen.enter .end-name { animation: ffx-stamp .7s var(--slap) .1s backwards; }
.end-screen.enter .end-scene { animation: ffx-slap .6s var(--slap) .22s backwards; }
.end-screen.enter .end-title::after { animation: ffx-pop .55s var(--slap) .55s backwards; }
.end-screen.enter .ladder { animation: ffx-rise .55s var(--ease) .35s backwards; }
body[data-rank="1"] .end-screen.enter::before { animation: ffx-bomb .7s var(--slap) .4s backwards; }
body[data-rank="1"] .end-screen.enter .end-rank::before, body[data-rank="1"] .end-screen.enter .end-rank::after { animation: ffx-pop .5s var(--slap) .6s backwards; }
body[data-rank="1"] .end-screen.enter .end-scene::before { animation: ffx-pop .55s var(--slap) .75s backwards; }
/* the sad one lands, slumps, its corner comes away and its tag drops off one end */
body[data-rank="10"] .end-screen.enter .end-scene { animation: ffx-slump 1s var(--ease) .2s backwards; }
body[data-rank="10"] .end-screen.enter .end-scene::before { animation: ffx-cut .9s var(--ease) 1s backwards; }
body[data-rank="10"] .end-screen.enter .end-scene::after { animation: ffx-peel .9s var(--ease) 1s backwards; }
body[data-rank="10"] .end-screen.enter .end-name { animation: ffx-sag 1.1s var(--ease) .1s backwards; }
body[data-rank="10"] .end-screen.enter .end-rank { animation: ffx-slap .5s var(--slap) .05s backwards, ffx-dangle 1.1s var(--ease) 1.5s backwards; }

@keyframes ffx-stamp { from { transform: scale(1.14) rotate(-2.5deg); } }
@keyframes ffx-slap { from { transform: translate(-6px, -10px) rotate(-1.4deg) scale(1.035); } }
@keyframes ffx-tab { from { transform: translateY(-12px) rotate(-8deg); } }
@keyframes ffx-rise { from { transform: translateY(14px); } }
@keyframes ffx-pop { from { transform: scale(.2) rotate(-40deg); } }
@keyframes ffx-bomb { from { transform: scale(.82); } }
@keyframes ffx-slump { from { transform: translateY(-22px) rotate(-2.5deg); } 55% { transform: translateY(4px) rotate(.6deg); } }
@keyframes ffx-sag { from { transform: translateY(-10px) rotate(-3deg); } }
@keyframes ffx-peel { from { transform: scale(0); } }
@keyframes ffx-dangle { from { transform: rotate(-7deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-1.5deg); } }
@keyframes ffx-cut { from { clip-path: polygon(-12px -12px, calc(100% + 12px) -12px, calc(100% + 12px) calc(100% + 12px), calc(100% + 12px) calc(100% + 12px), -12px calc(100% + 12px)); } }
@keyframes ffx-breathe { from { opacity: .72; } to { opacity: 1; } }
@keyframes ffx-shine { 0% { background-position: 160% 0, 0 0; } 22%, 100% { background-position: -60% 0, 0 0; } }

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

@media (max-width: 374px) {
  :root { --gutter: 12px; }
  .scene { padding: 28px 16px 22px; }
  .scene-text p { font-size: 17px; }
  .choice { gap: 12px; padding-right: 13px; }
  .choice-text { font-size: 16px; }
  .end-title { font-size: 23px; }
}
/* a phone: the crown's tag moves over a little so HUZZAH! fits beside it, clear of the burger */
@media (max-width: 459px) {
  body[data-rank="1"] .end-rank { translate: -20px 0; }
}
/* a phone: the page is the screen's width, so nothing slapped on at an angle may widen it */
@media (max-width: 719px) {
  main:not(.pin-gate) { overflow-x: clip; }
}

@media (min-width: 720px) {
  :root { --gutter: 24px; }
  .title-screen { padding-top: 6vh; }
  .scene { padding: 36px 34px 32px; }
  .scene-kicker { left: 26px; }
  .scene-text p { font-size: 18.5px; }
  .choice-text { font-size: 17.5px; }
  .end-title { font-size: 28px; }
  .end-title::after { width: 84px; height: 84px; top: -38px; right: -14px; }
  body[data-rank="1"] .end-title::after { width: 108px; height: 108px; top: -54px; right: -20px; }
  body[data-rank="10"] { --peel: 108px; }
}

/* a desktop: the swells spread into the margins, and two big stickers are slapped either side of
   the title (a crown, and the pig who's just as likely) */
@media (min-width: 1100px) {
  .ambient i:nth-child(1) { --x: 12vw; --y: 4vh; --s: 30vw; }
  .ambient i:nth-child(2) { --x: 94vw; --y: 44vh; --s: 27vw; }
  .ambient i:nth-child(3) { --x: 14vw; --y: 100vh; --s: 30vw; }
  .title-screen { position: relative; }
  .title-screen::before, .title-screen::after {
    content: ""; position: absolute; width: 170px; height: 170px; pointer-events: none; background: center / contain no-repeat;
  }
  .title-screen::before { right: calc(100% + 40px); top: 70px; background-image: var(--e-crown); rotate: -14deg; }
  .title-screen::after { left: calc(100% + 40px); top: 250px; background-image: var(--e-pig); rotate: 12deg; }
  .title-screen.enter::before { animation: ffx-pop .6s var(--slap) .5s backwards; }
  .title-screen.enter::after { animation: ffx-pop .6s var(--slap) .65s backwards; }
}

/* more contrast asked for: solid edges, no texture */
@media (prefers-contrast: more) {
  :root { --dot: #808080; --dot-2: #808080; }
  .ambient { display: none; }
  .scene, body[data-rank] .end-scene { background: var(--grey-2); }
  body[data-rank="1"] .end-scene, body[data-rank="2"] .end-scene, body[data-rank="3"] .end-scene { background: var(--lime); }
}

/* everything stops, and the page still looks finished */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn-begin:active, .choice:active, .link-btn:active { translate: none; }
}

/* Windows high contrast: keep every edge and state visible; the decoration goes */
@media (forced-colors: active) {
  .title, .scene-title, .end-name, .brand-name, .scene-text p:first-child::first-letter { -webkit-text-stroke: 0; text-shadow: none; color: CanvasText; }
  .scene, .choice, .ladder, .tagline, .link-btn, .btn-begin, .rung.is-you, .scene-kicker { border: 2px solid CanvasText; }
  body[data-rank="10"] .end-scene { border-color: CanvasText; }
  .ambient, body::before, .end-screen::before, .end-scene::before, .end-scene::after, .end-title::after, .end-rank::before, .end-rank::after,
  .title::after, .end-name::after, .brand-mark, .title-screen::before, .title-screen::after, .tagline::before, .choice::before { display: none; }
  .rung.is-you { outline: 2px solid Highlight; }
}

/* =========================================================================================
   Effects. The look's script (frizzy.js) adds the ffx- classes below while it runs: only on
   Frizzy G, only when motion is allowed, and it takes every one of them away again when the
   look changes. Without it none of them exist and everything above is the whole look.
   ========================================================================================= */

:root { --mk-fx-frizzy: on; } /* tells frizzy.js this sheet is live (the switch can load sheets late) */

/* the live ground: lime ink a finger stirs into the dot screen (in .ambient, behind everything) */
.ffx-ground { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* confetti, stars and balls: one canvas over everything, only while something flies */
.ffx-burst { position: fixed; inset: 0; z-index: 30; display: block; width: 100%; height: 100%; pointer-events: none; }

@media (forced-colors: active) { .ffx-ground, .ffx-burst { display: none; } }