/* Parade: a sunset street in flat pixel bands (vermilion → lantern → indigo) with a low sun and lit houses, bunting, and a
   marching line that crosses the 960×540 stage left to right in about 12 s, twice, then stops in a line-up (.is-over).
   Calm motion: the line-up at once. */
.parade { position: absolute; inset: 0; isolation: isolate; overflow: hidden; background: var(--letterbox); }
.parade-street { position: absolute; left: 0; top: 0; width: 960px; height: 388px; overflow: hidden; }
.parade-sky, .parade-glow, .parade-town, .parade-road { position: absolute; left: 0; width: 960px; }
.parade-sky { top: 0; height: 140px; background: var(--vermilion); }
.parade-glow { top: 140px; height: 80px; background: var(--lantern); }
.parade-town { top: 220px; height: 80px; background: var(--letterbox); }
.parade-road { top: 300px; height: 88px; background: var(--path); border-top: 4px solid var(--wood);
  box-shadow: inset 0 1px var(--ink), inset 0 4px var(--paper-shade), inset 0 -1px var(--ink), inset 0 -8px #d5b47c; }
.parade-road::before { content: ''; position: absolute; left: 12px; top: 12px; width: 24px; height: 2px; background: #d5b47c;
  box-shadow: 2px -2px var(--paper), 112px 20px #d5b47c, 114px 18px var(--paper), 212px 0 #d5b47c, 214px -2px var(--paper),
    328px 28px #d5b47c, 330px 26px var(--paper), 440px 4px #d5b47c, 442px 2px var(--paper),
    564px 24px #d5b47c, 566px 22px var(--paper), 676px 0 #d5b47c, 678px -2px var(--paper),
    792px 26px #d5b47c, 794px 24px var(--paper), 904px 4px #d5b47c, 906px 2px var(--paper); }
.parade-road::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; height: 1px; background: var(--ink); }
.parade-sun, .parade-houses, .parade-flags { position: absolute; left: 0; display: block; pointer-events: none; }
.parade-sun { top: 0; fill: var(--paper); }
.parade-houses { top: 180px; }
.parade-window { fill: var(--ink); }

/* Bunting: an ink string with triangle flags and square pixel lanterns. Decoration only, never behind text. */
.parade-flags { top: 66px; }
.parade-string { position: absolute; left: 0; top: 64px; width: 960px; height: 2px; background: var(--ink); box-shadow: 0 -1px #dda475; }
.parade-lantern { position: absolute; top: 66px; width: 16px; height: 20px; --lantern-light: #ffe8a3; --lantern-shade: #ca9231;
  background: var(--lantern); border: 1px solid var(--ink); box-shadow: inset 2px 2px var(--lantern-light), inset -2px -3px var(--lantern-shade); }
.parade-lantern::before { content: ''; position: absolute; left: 2px; right: 2px; top: 0; height: 2px; background: var(--vermilion);
  border-bottom: 1px solid var(--ink); box-shadow: 0 14px var(--ink); }
.parade-lantern::after { content: ''; position: absolute; left: 3px; top: 4px; width: 1px; height: 9px; background: var(--lantern-light);
  box-shadow: 6px 0 var(--lantern-shade); }
.parade-lantern:nth-of-type(odd) { background: var(--paper); --lantern-light: var(--white); --lantern-shade: var(--paper-shade); }

.parade-title { position: absolute; left: 16px; top: 16px; margin: 0; z-index: 2; font-size: var(--text-name); }

/* The line: the leader is rightmost, the neighbors follow in subject order. The full laps cross the whole stage;
   the last lap (half the distance at the same speed, so half the time) walks in from the left and halts where
   the line-up stands, so the marchers stop in place instead of popping in. */
.parade-line { position: absolute; left: 0; top: 0; height: 388px; transform: translateX(var(--line-x)); }
.parade-line.is-marching { animation: parade-march 12s linear infinite; }
.parade-line.is-last-lap { animation: parade-last-lap 6s linear 1 forwards; }
@keyframes parade-march {
  from { transform: translateX(calc(var(--line-w) * -1)); }
  to { transform: translateX(960px); }
}
@keyframes parade-last-lap {
  from { transform: translateX(calc(var(--line-w) * -1)); }
  to { transform: translateX(var(--line-x)); }
}
.parade-marcher { position: absolute; top: 0; width: 112px; height: 388px; }
.parade-figure { position: absolute; width: 64px; height: 64px; }
.parade-figure .figure { position: absolute; left: 0; top: 0; }
.parade-figure::before {   /* the same ground shadow as the village */
  content: ''; position: absolute; left: 20px; top: 53px; width: 24px; height: 6px; background: rgba(31, 33, 71, .22);
  clip-path: polygon(4px 0, 20px 0, 24px 2px, 24px 4px, 20px 6px, 4px 6px, 0 4px, 0 2px);
}
.parade-line.is-marching .parade-marcher--leader .parade-figure,
.parade-line.is-last-lap .parade-marcher--leader .parade-figure { animation: parade-hop 640ms steps(2) infinite; }
@keyframes parade-hop { 50% { transform: translateY(-4px); } }

/* Each neighbor carries what you made overhead on a wooden pole. */
.parade-float { position: absolute; left: 6px; top: 215px; width: 100px; height: 72px; box-sizing: border-box; padding: 2px;
  background: var(--paper); border: 4px solid var(--float, var(--ink)); outline: 1px solid var(--ink);
  box-shadow: inset 1px 1px var(--ink), inset -1px -1px var(--ink), inset 3px 3px var(--white), inset -3px -3px var(--paper-shade), 0 2px var(--ink); }
.parade-float::before { content: ''; position: absolute; left: -3px; top: -3px; width: 2px; height: 2px; background: var(--paper);
  box-shadow: 93px 0 var(--ink), 0 65px var(--ink), 93px 65px var(--ink); pointer-events: none; }
.parade-float__art { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  color: var(--ink); font-family: var(--font-read); font-size: var(--text-small); line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.parade-float__art > * { max-width: 100%; max-height: 100%; }
.parade-float__art svg { width: 100%; height: 100%; }
/* The full sign scales into the 88×60 float interior, including with Bigger words. */
.parade-float__art > .world-sign { position: absolute; left: 50%; top: 50%; width: 240px; max-width: none; max-height: none; overflow: visible; transform: translate(-50%, -50%) scale(var(--sign-scale, .1)); }
.parade-pole { position: absolute; left: 52px; top: 289px; width: 8px; height: 16px; background: var(--wood); border: 1px solid var(--ink); box-sizing: border-box;
  box-shadow: inset 1px 1px #dda475, inset -2px -2px #855034; }
.parade-pole::after { content: ''; position: absolute; left: 3px; top: 4px; width: 1px; height: 5px; background: #855034; }

/* Calm motion (the setting or the system preference) or the parade over: everyone stands still in a line-up. */
.parade.is-still .parade-line, .parade.is-still .parade-figure,
.parade.is-over .parade-line, .parade.is-over .parade-figure { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .parade-line.is-marching, .parade-line.is-marching .parade-figure,
  .parade-line.is-last-lap, .parade-line.is-last-lap .parade-figure { animation: none; }
}

.parade-dialogue { position: absolute; left: 16px; top: 388px; width: 472px; height: 136px; z-index: 2; }
.parade-menu { position: absolute; left: 504px; top: 388px; width: 440px; height: 136px; z-index: 2; }

/* The same small props travel from the stall to the float and the reward card. These overrides
   keep the shared wrapper classes, text fitting and saved beat heights intact. */
.creation { position: relative; image-rendering: pixelated; }
.creation.world-sign { border-width: 1px; padding: 3px 5px;
  box-shadow: inset 1px 1px #dda475, inset -1px -1px #855034, inset 2px 2px var(--wood), inset -2px -2px var(--wood); }
.creation.world-sign::before, .creation.world-sign::after { content: ''; position: absolute; top: 2px; width: 2px; height: 2px; background: var(--ink); pointer-events: none; }
.creation.world-sign::before { left: 2px; box-shadow: 0 3px var(--paper); }
.creation.world-sign::after { right: 2px; box-shadow: 0 3px #d5bc89; }
.creation.world-book { border: 1px solid var(--ink); padding: 3px 5px 3px 9px;
  box-shadow: inset 1px 1px var(--white), inset -1px -1px #d5bc89, inset 0 -3px var(--paper-shade); }
.creation.world-book::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--reading);
  box-shadow: inset 1px 1px var(--sky), inset -1px -2px #367394; }
.creation.world-book::after { content: ''; position: absolute; bottom: 1px; left: 1px; right: 1px; height: 1px; background: #d5bc89; box-shadow: 0 -2px var(--paper-shade); }
.creation.world-ices i { position: relative; border: 1px solid var(--ink); --ice-light: #a0efe2; --ice-shade: #26998d;
  box-shadow: inset 2px 2px var(--ice-light), inset -2px -3px var(--ice-shade); }
.creation.world-ices i:nth-child(2) { --ice-light: #ffc2dd; --ice-shade: #c75c90; }
.creation.world-ices i[style] { outline: 1px solid var(--ink); outline-offset: -1px; }
.creation.world-ices i::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-top: 1px solid var(--ink);
  background: var(--paper-shade); box-shadow: inset 1px 1px var(--paper), inset -1px -1px #d5bc89; }
.creation.world-ices i::after { content: ''; position: absolute; left: 3px; top: 2px; width: 2px; height: 2px; background: var(--paper);
  box-shadow: 1px 2px var(--ice-light), 6px 4px var(--ice-light); }
.creation.world-score { width: 64px; gap: 2px; border-width: 1px; isolation: isolate; overflow: hidden;
  box-shadow: inset 1px 1px var(--white), inset -1px -2px var(--paper-shade); }
.creation.world-score::before { content: ''; position: absolute; left: 3px; right: 3px; bottom: 7px; height: 1px;
  background: var(--paper-shade); box-shadow: 0 -6px var(--paper-shade), 0 -12px var(--paper-shade); pointer-events: none; }
.creation.world-score i { position: relative; flex: 0 0 5px; width: 5px; border: 1px solid var(--ink);
  box-shadow: inset 1px 1px #7278a3, inset -1px -1px var(--letterbox); }
.creation.world-score i.world-note-on { box-shadow: inset 1px 1px #ffe8a3, inset -1px -1px #ca9231; }