/* The landing page (site/, served at /; the game is at /play/). landing.js
   draws the scene, the signs and the lettering with the game's own art code;
   everything here also stands on its own, with plain wood and gold type, for
   the moment before that script runs or if it cannot. */

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/play/fonts/press-start-2p-latin.woff2") format("woff2");
}

:root {
  /* CSS px per art pixel: one art pixel is 4 of the game's logical px, and
     the game on a phone shows about 2 CSS px per art pixel. landing.js reads it. */
  --art: 2px;
  --gutter: 12px;

  /* the game's palette (web/src/palette.js) */
  --night: #1c1834;
  --night-deep: #1e193e;
  --dusk: #27283e;
  --teal-dark: #1c4a5b;
  --scene: #1e3c3f;
  --forest: #11262a;
  --plank: #b9875a;
  --plank-hi: #dbb083;
  --plank-dark: #7a5235;
  --bark: #625243;
  --bark-dark: #4c3637;
  --bark-shadow: #302820;
  --ink: #3b2a1e;            /* sign.js INK, the painted text */
  --ink-deep: #2a1b10;       /* a shade darker for running text */
  --gold: #f7d35b;
  --gold-hi: #fff1a8;
  --gold-dark: #a87a1c;
  --outline: #102024;
  --pink: #e85d8a;
  --pink-hi: #ff9ab8;
  --pink-dark: #a83a62;
  --pink-edge: #73213f;
  --grass: #4ada62;

  --pixel: "Press Start 2P", "Courier New", monospace;
  --round: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

@media (min-width: 760px) {
  :root { --art: 3px; --gutter: 24px; }
}

html {
  background: var(--night);
  overflow-x: hidden;            /* older browsers; body clips below */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  font: 600 16px/1.55 var(--round);
  color: var(--ink-deep);
  background: var(--night);
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 760px) {
  body { font-size: 17px; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nowrap { white-space: nowrap; }

/* Pixel art stays pixel art at any size. */
canvas { image-rendering: pixelated; }

/* ------------------------------------------------------------------ scene */
/* The page is the tower, top to bottom: the night sky, the tower with
   Rapunzel's braid all the way down, the forest closing in, the lawn.
   Three planes like in the game: the far one (sky, stars, moon, lanterns,
   forest), the middle one (tower, braid, the prince, the creatures) and
   the page itself in front (signs, text, buttons). Without parallax both
   scene planes simply span the page; with it (html.parallax, landing.js)
   the scene is fixed to the window and its planes are moved by the
   scroll, the far one at 0.3, the middle one at 0.7 of it. */
.scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.layer { position: absolute; inset: 0; }
.layer > * { position: absolute; }
.layer--far {
  background: linear-gradient(to bottom,
    var(--night) 0, var(--night-deep) 16%, var(--dusk) 30%,
    var(--teal-dark) 48%, var(--scene) 66%, var(--forest) 100%);
}

html.parallax .scene { position: fixed; }
html.parallax .layer { bottom: auto; }          /* landing.js sets the height */
html.parallax .scene__tower,
html.parallax .scene__braid { bottom: 0; }      /* on down behind the lawn */

.scene__stars {
  inset: 0 0 auto 0;
  height: min(60%, 240vh);
  background-image: var(--stars, none);
  background-size: calc(var(--art) * 160);
  image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}

.scene__sky { inset: 0 0 auto 0; height: 200vh; }

.scene__forest {
  inset: 42% 0 0 0;
  background-image: var(--forest, none);
  background-size: calc(var(--art) * 192) auto;
  background-position: center top;
  image-rendering: pixelated;
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(transparent, #000 22%);
  mask-image: linear-gradient(transparent, #000 22%);
}

.scene__tower,
.scene__braid {
  top: calc(var(--art) * 92);       /* the tower's bricks start under the eaves (landing.js SUMMIT) */
  bottom: calc(var(--art) * 32 + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  image-rendering: pixelated;
}

.scene__tower {
  width: calc(var(--art) * 95);
  background: var(--tower, linear-gradient(90deg, #465e66, #79a1ae 20%, #79a1ae 80%, #465e66));
  background-size: 100% auto;
}
/* night at the top, the forest's shade below, haze along the edges */
.scene__tower::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 32, 36, 0.55), transparent 18%, transparent 82%, rgba(16, 32, 36, 0.55)),
    linear-gradient(rgba(28, 24, 52, 0.62), rgba(28, 24, 52, 0.3) 30%, rgba(20, 50, 52, 0.2) 60%, rgba(10, 30, 28, 0.45));
}

.scene__braid {
  top: calc(var(--art) * 146);      /* the braid starts at Rapunzel's window sill */
  width: calc(var(--art) * 44);
  background: var(--braid, none) repeat-y center top;
  background-size: 100% auto;
}

/* Stars that twinkle in the star field (landing.js places them): a small
   plus that flickers like a real star, now and then a cross that flashes. */
.twinkle {
  position: absolute;
  width: calc(var(--art) * 3);
  height: calc(var(--art) * 3);
  background: var(--twinkle) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  opacity: 0.5;
  animation: twinkle var(--d) ease-in-out var(--delay) infinite;
}
.twinkle--big {
  width: calc(var(--art) * 7);
  height: calc(var(--art) * 7);
  margin: calc(var(--art) * -2) 0 0 calc(var(--art) * -2);
  background-image: var(--sparkle);
  animation-name: sparkle;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.35; }
  18% { opacity: 0.9; }
  32% { opacity: 0.5; }
  50% { opacity: 1; }
  64% { opacity: 0.45; }
  82% { opacity: 0.8; }
}
@keyframes sparkle {
  0%, 70%, 100% { opacity: 0.25; transform: scale(0.45); }
  78% { opacity: 1; transform: scale(1); }
  84% { opacity: 0.7; transform: scale(0.8); }
  90% { opacity: 0.9; transform: scale(1.15); }
}

/* the moon, drifting clouds and lanterns rising into the night (landing.js) */
.sprite {
  display: block;
  width: calc(var(--w) * var(--art) * var(--z, 1));
  height: calc(var(--h) * var(--art) * var(--z, 1));
}
.scene__sky .sprite { position: absolute; }

.moon {
  top: calc(env(safe-area-inset-top) + var(--art) * 14);
  right: max(6%, calc(50% - 560px));
  --z: 1.5;
  filter: drop-shadow(0 0 calc(var(--art) * 6) rgba(255, 244, 207, 0.35));
}

.cloud {
  top: var(--y);
  left: 0;
  opacity: 0.22;
  --z: 1;
  animation: drift var(--d) linear var(--delay) infinite;
}
@keyframes drift {
  from { transform: translateX(-30vw); }
  to   { transform: translateX(130vw); }
}

.lantern {
  bottom: 0;
  left: var(--x);
  width: calc(var(--w) * var(--art) * var(--z) * 0.5);
  height: calc(var(--h) * var(--art) * var(--z) * 0.5);
  opacity: 0;
  filter: drop-shadow(0 0 calc(var(--art) * 5) rgba(255, 179, 71, 0.8));
  animation: rise var(--d) linear var(--delay) infinite;
}
/* Creatures on the tower's plane (landing.js flaps their wings): the witch
   crosses the night sky, a stork and a crow cross further down, and a
   spider hangs on her thread beside the braid; those three sit in the gaps
   between the signs, where the tower shows. */
.flyer {
  top: var(--y);
  left: 0;
  transform: translateX(-40vw);
  animation: fly var(--d) linear var(--delay) infinite;
}
.witch { --y: calc(var(--art) * 210 + 38vh); --d: 30s; --delay: 6s; }   /* under the summit */
.stork { --d: 26s; --delay: 2s; }          /* top: landing.js, in a gap between signs */
.crow  { --d: 18s; --delay: 5s; }
.spider { left: calc(50% + var(--art) * 16); }
@keyframes fly {
  0%   { transform: translate(-25vw, 0); }
  20%  { transform: translate(30vw, -3vh); }
  45%  { transform: translate(115vw, -9vh); }
  100% { transform: translate(115vw, -9vh); }
}

@keyframes rise {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 0.9; }
  50%  { transform: translate(calc(var(--art) * 10), -100vh); }
  85%  { opacity: 0.85; }
  100% { transform: translate(calc(var(--art) * -6), -190vh); opacity: 0; }
}

/* ------------------------------------------------------------------ signs */
/* A section on the game's wooden sign. landing.js draws the sign behind it
   (adding .drawn) and grows it to whole boards; until then, plain wood. */
.sign {
  --w: 720px;
  position: relative;
  z-index: 1;
  isolation: isolate;
  box-sizing: border-box;
  width: min(100% - 2 * var(--gutter), var(--w));
  margin: calc(var(--art) * 30) auto 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sign:not(.drawn) {
  background:
    repeating-linear-gradient(transparent 0 calc(var(--art) * 14), var(--plank-dark) 0 calc(var(--art) * 16), var(--plank-hi) 0 calc(var(--art) * 17)),
    var(--plank);
  border: calc(var(--art) * 4) solid var(--bark);
  box-shadow: inset 0 0 0 var(--art) var(--bark-shadow), calc(var(--art) * 3) calc(var(--art) * 3) 0 rgba(0, 0, 0, 0.25);
}
.sign__body {
  padding: calc(var(--art) * 14) calc(var(--art) * 12);
}
.sign__body > :first-child { margin-top: 0; }
.sign__body > :last-child { margin-bottom: 0; }

.backdrop {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.sign--wide { --w: 940px; }
.sign--controls { --w: 900px; }
.sign--narrow { --w: 600px; }

.sign p { margin: 0 0 0.9em; }
.sign p:last-child { margin-bottom: 0; }

/* Running text sits on a light board nailed onto the sign (sign.js
   drawPlankTag), so the seams between the boards never cross a line. */
.panel {
  position: relative;
  isolation: isolate;
  padding: calc(var(--art) * 7) calc(var(--art) * 9) calc(var(--art) * 9);
}
.panel:not(.drawn) {
  background: var(--plank-hi);
  border: var(--art) solid var(--bark-shadow);
}

/* Headings in the game's gold letters (drawn), gold type until then. */
.letters {
  margin: 0 0 calc(var(--art) * 8);
  font: 400 calc(var(--art) * 8)/1.3 var(--pixel);
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  text-shadow:
    -2px 0 var(--outline), 2px 0 var(--outline), 0 -2px var(--outline), 0 2px var(--outline),
    4px 4px rgba(8, 16, 20, 0.55);
}
.letters.drawn { text-shadow: none; line-height: 0; }
.letters__art { display: block; margin: 0 auto; }

/* ----------------------------------------------------------------- summit */
/* The top of the tower, above where the page opens (an inline script in
   index.html scrolls past it on load). landing.js draws the roof, the
   window and Rapunzel on the tower's plane; this keeps their place and
   holds her speech bubble, which pops up whenever the summit is in view. */
.summit {
  position: relative;
  z-index: 1;
  height: calc(var(--art) * 210);
}
.layer--mid .summit-art {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--art) * 150);
  height: calc(var(--art) * 210);
  filter: brightness(0.92);
}
.bubble {
  position: absolute;
  left: calc(50% + var(--art) * 26);
  top: calc(var(--art) * 100);
  max-width: min(calc(50% - var(--art) * 26 - 12px), 230px);
  margin: 0;
  padding: calc(var(--art) * 4) calc(var(--art) * 5);
  font: 400 9px/1.7 var(--pixel);
  color: var(--ink);
  background: #fff8ec;
  border: 2px solid var(--outline);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  transform-origin: 0 100%;
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.6, 1);
}
.bubble::after {                     /* the tail, toward her window */
  content: "";
  position: absolute;
  left: -10px;
  bottom: 8px;
  width: 8px;
  height: 8px;
  background: #fff8ec;
  border: 2px solid var(--outline);
  border-right: 0;
}
.bubble__hi { display: block; color: var(--pink-dark); margin-bottom: 0.3em; }
html.art .summit:not(.seen) .bubble { transform: scale(0); }
@media (min-width: 760px) {
  .bubble { font-size: 11px; }
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  z-index: 1;
  padding-top: calc(env(safe-area-inset-top) + var(--art) * 24);
}
.hero .sign { margin-top: 0; }
.sign--hero .sign__body {
  text-align: center;
  padding-top: calc(var(--art) * 9);
  padding-bottom: calc(var(--art) * 8);
}

.wordmark {
  margin: 0 auto;
  font: 400 calc(var(--art) * 12)/1.15 var(--pixel);
  text-transform: uppercase;
}
.wordmark__sir,
.wordmark__word { display: block; }
.wordmark__sir { color: var(--pink-hi); font-size: 0.6em; }
.wordmark__word {
  color: var(--gold);
  text-shadow: -2px 0 var(--outline), 2px 0 var(--outline), 0 -2px var(--outline), 0 2px var(--outline);
}
.wordmark.drawn { line-height: 0; }
.wordmark.drawn > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.wordmark__art {
  display: block;
  width: min(100%, calc(var(--art) * 180));
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 calc(var(--art) * 4) rgba(255, 220, 120, 0.25));
}

.tagline {
  margin: calc(var(--art) * 4) 0 0 !important;
  font: 400 calc(var(--art) * 4.5)/1.6 var(--pixel);
  color: var(--pink-dark);
  text-shadow: 0 0 2px rgba(245, 222, 190, 0.85), 0 0 1px rgba(245, 222, 190, 0.85) !important;
}

.best {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  margin: calc(var(--art) * 7) auto 0 !important;
  padding: calc(var(--art) * 4) calc(var(--art) * 6) calc(var(--art) * 4) calc(var(--art) * 13);
  font: 400 calc(var(--art) * 4.5)/1 var(--pixel);
  color: var(--ink);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 238, 158, 0.6) !important;
}
.best[hidden] { display: none; }
.best:not(.drawn) { background: #c9a84a; border: var(--art) solid #7d5c1a; }
.best__m { margin-left: 0.6em; }

.free {
  margin: 0 !important;
  font: 400 calc(var(--art) * 4)/1.7 var(--pixel);
  color: var(--ink);
  text-shadow: 0 0 2px rgba(245, 222, 190, 0.9), 0 0 1px rgba(245, 222, 190, 0.9) !important;
}

/* PLAY on the game's ribbon banner */
.play {
  position: relative;
  isolation: isolate;
  display: block;
  width: calc(var(--art) * 124);
  height: calc(var(--art) * 24);
  margin: calc(var(--art) * 8) auto calc(var(--art) * 6);
  text-decoration: none;
  transition: transform 0.12s ease-out;
}
.play:not(.drawn) .play__label {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0 calc(var(--art) * 12);
  box-sizing: border-box;
  background: var(--pink);
  border: var(--art) solid var(--pink-edge);
  box-shadow: inset 0 calc(var(--art) * 2) 0 var(--pink-hi), inset 0 calc(var(--art) * -2) 0 var(--pink-dark);
  font: 400 calc(var(--art) * 8)/1 var(--pixel);
  color: var(--gold);
  text-transform: uppercase;
  text-shadow: -2px 0 var(--outline), 2px 0 var(--outline), 0 -2px var(--outline), 0 2px var(--outline);
}
.play.drawn .play__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.play:hover { transform: translateY(calc(var(--art) * -1)) scale(1.03); }
.play:active { transform: translateY(var(--art)) scale(0.99); }
.play:focus-visible {
  outline: calc(var(--art) * 1.5) dashed var(--gold-hi);
  outline-offset: calc(var(--art) * 3);
}

/* Sir Bouncealot on his cloud under the first sign: this keeps his place
   in the page, landing.js puts him on the tower's plane right there. */
.stage {
  width: min(100%, calc(var(--art) * 192));
  aspect-ratio: 192 / 154;
  margin: calc(var(--art) * -24) auto 0;
  pointer-events: none;
}
html:not(.art) .stage { display: none; }

/* ------------------------------------------------------------------ story */
.climb {
  list-style: none;
  margin: calc(var(--art) * 8) 0;
  padding: 0;
}
.climb li {
  display: flex;
  gap: 0.8em;
  align-items: baseline;
  padding: 0.3em 0 0.3em 0.9em;
  border-left: calc(var(--art) * 2) solid var(--plank-dark);
  text-shadow: 0 1px 0 rgba(255, 236, 205, 0.4);
}
.climb__m {
  flex: none;
  min-width: 5.5em;
  font: 400 11px/1 var(--pixel);
  color: var(--pink-dark);
}
/* The drawings from back then, taped onto the letter with pink tape,
   a little crooked; beside the text on a wide screen, between the
   paragraphs on a phone. A tap opens the big picture. */
.photo {
  --tilt: 1.6deg;
  margin: calc(var(--art) * 9) auto calc(var(--art) * 8);
  width: min(86%, 340px);
}
.photo a {
  position: relative;
  display: block;
  transform: rotate(var(--tilt));
  transition: transform 0.2s ease-out;
}
.photo a:hover { transform: rotate(0deg) scale(1.02); }
.photo a:focus-visible { outline: 3px dashed var(--pink-dark); outline-offset: 6px; }
.photo img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 6px;
  background: #f6f1e7;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 4px 6px 0 rgba(48, 40, 32, 0.35);
}
.photo a::before,
.photo a::after {                          /* the tape */
  content: "";
  position: absolute;
  z-index: 1;
  top: -9px;
  width: 30%;
  height: 18px;
  background: rgba(255, 154, 184, 0.8);
  box-shadow: 0 1px 0 rgba(115, 33, 63, 0.25);
}
.photo a::before { left: 6%; transform: rotate(-9deg); }
.photo a::after { right: 6%; transform: rotate(8deg); }
.photo figcaption {
  margin-top: 1em;
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
  color: var(--ink);
}
.photo--left { --tilt: -1.8deg; }
@media (min-width: 760px) {
  .photo { float: right; width: 44%; margin: 1.2em 0 1.2em 1.8em; }   /* room above for the tape */
  .photo--left { float: left; clear: both; margin: 1.2em 1.8em 1.2em 0; }
}

/* the story is a letter: a bow before the dedication, the signature right */
.letter { display: flow-root; }            /* the photos' floats stay on the board */
.letter p { margin-bottom: 0.8em; }
.letter strong { font-weight: 800; }
.letter__bow {
  clear: both;
  display: flex;
  justify-content: center;
  margin: calc(var(--art) * 8) 0 calc(var(--art) * 5);
}
.letter__close { text-align: center; }
.letter__close em { font-style: italic; }
.letter__sign {
  margin-top: 1.2em !important;
  text-align: right;
  font-size: 1.1em;
}
.pixel-heart canvas {
  display: inline-block;
  width: 20px;                 /* two CSS px per art pixel, crisp at any size */
  height: 20px;
  vertical-align: -0.2em;
}

.ask {
  font: 400 calc(var(--art) * 4.5)/1.6 var(--pixel);
  color: var(--pink-dark);
  text-align: center;
  margin-top: 1.4em !important;
}

/* ------------------------------------------------------------------- cast */
#cast { --w: 940px; }
.cast__group { margin: calc(var(--art) * 10) 0 calc(var(--art) * 5); }
.letters--pink { color: var(--pink-hi); font-size: calc(var(--art) * 6); }
.cast {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* four friends, six foes: no card left alone */
  gap: calc(var(--art) * 5);
}
@media (min-width: 900px) {
  .cast--friends { grid-template-columns: repeat(4, 1fr); }
  .cast--foes { grid-template-columns: repeat(3, 1fr); }
}
.card,
.way {
  position: relative;
  isolation: isolate;
  padding: calc(var(--art) * 6) calc(var(--art) * 7) calc(var(--art) * 8);
}
.card:not(.drawn),
.way:not(.drawn) {
  background: var(--plank-hi);
  border: var(--art) solid var(--bark-shadow);
}
.card { text-align: center; }
.card__art {
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.card__sprite { display: block; }
.card h4,
.way h3 {
  margin: 0.8em 0 0.5em;
  font: 400 11px/1.4 var(--pixel);
  color: var(--ink);
}
.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  text-shadow: none;
}

/* on a phone a card is a row: picture left, words right */
@media (max-width: 559px) {
  .cast { grid-template-columns: 1fr; }
  .card {
    display: grid;
    grid-template-columns: 104px 1fr;
    column-gap: 12px;
    align-items: center;
    text-align: left;
  }
  .card__art { grid-row: 1 / span 2; height: 136px; width: 104px; }
  .card h4 { margin: 0 0 0.4em; align-self: end; }
  .card p { align-self: start; }
}

/* --------------------------------------------------------------- controls */
#controls { --w: 900px; }
.ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: calc(var(--art) * 5);
  margin-top: calc(var(--art) * 8);
}
.way h3 { margin-top: 0.2em; }
.way ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
}
.way li { padding: 0.25em 0; }
kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0.35em 0.45em 0.3em;
  font: 400 10px/1 "Press Start 2P", ui-rounded, system-ui, sans-serif;  /* the arrows come from the system font */
  text-align: center;
  color: var(--ink);
  background: #f1d3a8;
  border: 2px solid var(--bark-shadow);
  border-radius: 2px;
  box-shadow: 0 2px 0 var(--bark-shadow);
  vertical-align: 0.1em;
}

/* ----------------------------------------------------------------- iphone */
.app-icon {
  display: block;
  width: calc(var(--art) * 32);
  height: calc(var(--art) * 32);
  margin: 0 auto calc(var(--art) * 6);
  border-radius: 22%;
  image-rendering: pixelated;
  box-shadow: 0 0 0 var(--art) var(--bark-shadow), calc(var(--art) * 2) calc(var(--art) * 2) 0 rgba(0, 0, 0, 0.3);
}
#iphone .sign__body { text-align: center; }
#iphone p { max-width: 34em; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------- lawn */
.lawn {
  position: relative;
  z-index: 1;
  padding-bottom: 0;
}
.lawn .sign__body { text-align: center; }
.lawn .play { margin-bottom: calc(var(--art) * 2); }
.lawn__ground {
  position: relative;
  box-sizing: border-box;
  min-height: calc(var(--art) * 36 + env(safe-area-inset-bottom));
  margin-top: calc(var(--art) * 40);
  padding: calc(var(--art) * 15) var(--gutter) calc(env(safe-area-inset-bottom) + var(--art) * 6);
  background: var(--ground, linear-gradient(var(--grass) 0 12%, #1c8730 12% 34%, #25581f 34%)) repeat-x center top;
  background-size: calc(var(--art) * 192) calc(var(--art) * 36);
  background-color: #25581f;
  image-rendering: pixelated;
}
.braid-end {
  position: absolute;
  left: calc(50% - var(--art) * 7);
  top: calc(var(--art) * -10);
}
/* the footer's links and credits, on the soil under the grass */
.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.8em;
  margin: 0 0 calc(var(--art) * 3);
  font: 400 10px/1.8 var(--pixel);
}
.links a {
  color: var(--gold-hi);
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  border-bottom: 2px solid rgba(255, 241, 168, 0.35);
}
.links a:hover { color: #fff; border-bottom-color: currentColor; }
.links a:focus-visible { outline: 2px dashed var(--gold-hi); outline-offset: 4px; }
.credits {
  position: relative;
  margin: 0;
  font: 400 9px/1.8 var(--pixel);
  text-align: center;
  color: #d8f0cf;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------- sub pages */
/* A page with little on it (the Impressum): the lawn stays at the bottom. */
.subpage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.subpage main { padding-top: calc(env(safe-area-inset-top) + var(--art) * 6); }
.subpage .lawn { margin-top: auto; }
.legal h2 {
  margin: 1.4em 0 0.5em;
  font: 400 10px/1.6 var(--pixel);
  color: var(--ink);
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 0.6em; }
.legal a { color: var(--ink-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal__en { font-size: 14px; font-weight: 500; opacity: 0.85; }

/* ----------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .cloud, .lantern, .flyer, .twinkle { animation: none; }
  .bubble { transition: none; }
  .flyer { display: none; }
  .lantern { opacity: 0.8; transform: translateY(-40vh); }
  .play { transition: none; }
  .photo a { transition: none; }
}