/* wizard.css: «Die Schwurbel-Initiation». Mobile first, one-handed, logical properties only.
   Without JS (.wizard without .is-enhanced) every panel is shown as a normal form section. */

:root {
  --foil: linear-gradient(135deg, #f7f8fa 0%, #c9cfd6 22%, #f1f3f5 40%, #9aa3ad 62%, #e8ebee 80%, #b7bec6 100%);
  --foil-dark: linear-gradient(135deg, #3b4047 0%, #23262b 30%, #4a5058 55%, #1f2226 80%, #3a3f46 100%);
  --crinkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --panel-bg: color-mix(in srgb, var(--color-surface) 88%, transparent);
  --gold: #d4a017;
  --silber: #a8b0b8;
  --bronze: #b0703c;
  --blech: #7c858d;
  --staniol: #c6ccd2;
}

/* ---------- frame ---------- */
.wizard { display: grid; gap: var(--space-3); }
.wizard__nojs { color: var(--color-muted); font-size: 0.9375rem; }
.wizard.is-enhanced .wizard__nojs { display: none; }

/* Fold meter as a comic panel: the hat folds facet by facet, a speech bubble with
   halftone dots names the degree, a starburst shouts the number, a ruler fills up.
   At 100 % the hat starts transmitting (radio waves as in the logo). */
.wizard__progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 6rem;
  padding-inline-end: 2.2rem; /* room for the starburst */
  padding-block-start: 1.2rem;
  margin-block-start: var(--space-4);
}
.foil-hat { inline-size: clamp(6.5rem, 30vw, 9rem); block-size: auto; flex-shrink: 0; overflow: visible; filter: drop-shadow(var(--sx) 3px 0 color-mix(in srgb, var(--shadow-ink) 35%, transparent)); }
/* Outline of the finished hat: the goal the steps work towards. */
.foil-hat__goal { fill: color-mix(in srgb, var(--color-marker) 30%, transparent); stroke: var(--color-ink); stroke-width: 2; stroke-dasharray: 3 3; stroke-linejoin: round; opacity: 0.75; }
.foil-hat__sparkles path { fill: var(--color-marker); stroke: var(--color-ink); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.wizard__progress.is-popping .foil-hat__sparkles path { animation: sparkle 700ms ease-out; }
.wizard__progress.is-popping .foil-hat__sparkles path:nth-child(2) { animation-delay: 120ms; }
.wizard__progress.is-popping .foil-hat__sparkles path:nth-child(3) { animation-delay: 240ms; }
.wizard__progress[data-done] .foil-hat__sparkles path { opacity: 1; }
@keyframes sparkle { 0% { opacity: 0; transform: scale(0.2) rotate(0); } 40% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(0.6) rotate(90deg); } }
.facet {
  fill: transparent;
  stroke: var(--color-ink);
  stroke-width: 1.6;
  stroke-dasharray: 3 3;
  stroke-linejoin: round;
  opacity: 0.45;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.85) rotate(-10deg);
  transition: opacity 400ms ease, transform 500ms cubic-bezier(.2, 1.6, .4, 1), fill 300ms ease;
}
.facet.is-folded { fill: url(#foil); stroke-dasharray: none; stroke-width: 2.4; opacity: 1; transform: none; }
.foil-hat__waves path { fill: none; stroke: var(--color-done); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.wizard__progress[data-done] .foil-hat__waves path { opacity: 1; animation: transmit 1.4s ease-in-out infinite; }
.wizard__progress[data-done] .foil-hat__waves path:nth-child(2) { animation-delay: 0.2s; }
.wizard__progress[data-done] .foil-hat__waves path:nth-child(3) { animation-delay: 0.4s; }
@keyframes transmit { 50% { opacity: 0.2; } }
.foil-hat__body { transform-box: fill-box; transform-origin: 50% 100%; }
.wizard__progress.is-popping .foil-hat__body { animation: hat-wobble 600ms ease; }
@keyframes hat-wobble { 25% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } }

.fold-bubble {
  position: relative;
  display: grid;
  gap: var(--space-1);
  flex: 0 1 24rem;
  min-inline-size: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-3) var(--space-5);
  border: 2.5px solid var(--color-ink);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--color-ink) 16%, transparent) 1px, transparent 1.6px) 0 0 / 7px 7px,
    var(--color-surface);
  box-shadow: var(--shadow-hard);
  transform: rotate(-1.5deg);
}
[dir="rtl"] .fold-bubble { transform: rotate(1.5deg); }
/* Speech bubble tail pointing at the hat (ink outline + paper fill). */
.fold-bubble::before, .fold-bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 55%;
  inset-inline-start: -1rem;
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--color-ink);
  clip-path: polygon(100% 0, 0 60%, 100% 100%);
}
.fold-bubble::after { inset-inline-start: calc(-1rem + 4px); inline-size: calc(1rem - 1px); background: var(--color-surface); transform: scale(0.72); transform-origin: 100% 50%; }
[dir="rtl"] .fold-bubble::before, [dir="rtl"] .fold-bubble::after { transform: scaleX(-1); }
[dir="rtl"] .fold-bubble::after { transform: scaleX(-1) scale(0.72); transform-origin: 0 50%; }
.fold-bubble__hint { font-size: 0.875rem; line-height: 1.35; color: var(--color-muted); }
.fold-bubble__text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}
/* Ruler with a strip of foil filling up. */
.fold-meter {
  position: relative;
  block-size: 0.75rem;
  border: 2px solid var(--color-ink);
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--color-ink) calc(10% - 1px) 10%) var(--color-surface);
  overflow: hidden;
}
.fold-meter__fill {
  background: linear-gradient(90deg, #c9d4ff, #f6d3ee, #d2f4e6);
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--fold, 0) * 1%);
  border-inline-end: 2px solid var(--color-ink);
  transition: inline-size 600ms cubic-bezier(.2, 1.3, .4, 1);
}
.wizard__progress[data-done] .fold-meter__fill { background: var(--color-done); }
/* «POW!» starburst with the number. */
.fold-burst {
  position: absolute;
  inset-block-start: -1.6rem;
  inset-inline-end: -1.9rem;
  display: grid;
  place-items: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  background: var(--color-marker);
  color: var(--color-marker-text);
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1;
  clip-path: polygon(50% 0, 59% 18%, 79% 7%, 75% 29%, 98% 27%, 83% 45%, 100% 59%, 78% 64%, 87% 85%, 66% 79%, 59% 100%, 47% 83%, 30% 97%, 29% 76%, 7% 80%, 18% 61%, 0 47%, 19% 39%, 9% 18%, 31% 21%, 34% 0, 44% 15%);
  filter: drop-shadow(2px 0 0 var(--color-ink)) drop-shadow(-2px 0 0 var(--color-ink)) drop-shadow(0 2px 0 var(--color-ink)) drop-shadow(0 -2px 0 var(--color-ink));
  transform: rotate(10deg);
}
/* The burst heats up with progress: yellow, orange, coral, then green «done» at 100 %. */
.wizard__progress[data-stage="mid"] .fold-burst { background: #ffb347; color: #151412; }
.wizard__progress[data-stage="high"] .fold-burst { background: #ff8a65; color: #151412; }
.wizard__progress[data-done] .fold-burst { background: var(--color-done); color: var(--color-done-contrast); }
.wizard__progress[data-stage="mid"] .fold-meter__fill { background: linear-gradient(90deg, #c9d4ff, #f6d3ee, #ffb347); }
.wizard__progress[data-stage="high"] .fold-meter__fill { background: linear-gradient(90deg, #c9d4ff, #f6d3ee, #ffb347, #ff8a65); }
.wizard__progress.is-popping .fold-burst { animation: burst-pop 520ms cubic-bezier(.2, 1.8, .4, 1); }
@keyframes burst-pop { 0% { transform: rotate(-20deg) scale(0.3); } 100% { transform: rotate(10deg) scale(1); } }
@media (prefers-color-scheme: dark) {
  .facet { opacity: 0.6; }
}
.wizard:not(.is-enhanced) .wizard__progress { display: none; }

/* ---------- panels ---------- */
/* A sheet of paper on the copy-shop counter. Foil is reserved for the hat, the
   ingredient cards and the award badges: where it means something. */
.panel {
  margin: 0;
  min-inline-size: 0;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  box-shadow: var(--shadow-hard-lg);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
/* Chapter label as embossed label-maker tape. */
.panel__title {
  float: none;
  justify-self: start;
  margin-block-end: var(--space-1);
  padding: 0.2rem 0.6rem;
  background: var(--tape-bg);
  color: var(--tape-text);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}
[dir="rtl"] .panel__title { transform: rotate(1deg); }
.panel__title[data-chapter]::before { content: attr(data-chapter) " · "; color: var(--tape-accent); }
.panel__headline {
  margin: 0;
  font-size: clamp(2.4rem, 6vw + 1rem, 4.75rem);
  line-height: 0.98;
  text-transform: uppercase;
}
:is(:lang(ar), :lang(fa), :lang(he), :lang(hi), :lang(ja), :lang(ko), :lang(zh-Hans)) .panel__headline { line-height: 1.3; font-size: clamp(2rem, 5vw + 1rem, 3.5rem); }
/* Highlighter stroke behind the lower half of each line. */
.hl {
  background: linear-gradient(transparent 58%, var(--color-marker) 58%, var(--color-marker) 92%, transparent 92%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) { .hl { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--color-accent) 55%, transparent) 62%, color-mix(in srgb, var(--color-accent) 55%, transparent) 94%, transparent 94%); } }

.wizard.is-enhanced .wizard__panels { position: relative; overflow: hidden; touch-action: pan-y; padding-inline-end: 8px; padding-block-end: 8px; }
.wizard.is-enhanced .panel {
  min-block-size: calc(100svh - 11rem);
  animation: panel-in 320ms ease both;
}
.wizard.is-enhanced .panel:not(.is-active) { display: none; }
.wizard.is-enhanced .panel.is-back { animation-name: panel-in-back; }
@keyframes panel-in { from { opacity: 0; transform: translateX(calc(2.5rem * var(--dir, 1))); } }
@keyframes panel-in-back { from { opacity: 0; transform: translateX(calc(-2.5rem * var(--dir, 1))); } }
[dir="rtl"] .wizard { --dir: -1; }

/* Intro: a flyer, not a landing-page hero: flush to the start edge, stamp beside. */
.panel--intro { justify-items: start; align-content: center; gap: var(--space-4); }
.panel--intro .lead { max-inline-size: 36rem; color: var(--color-text); font-size: 1.1875rem; }
.panel--intro .notice { margin-block-start: var(--space-2); }
@media (min-width: 900px) {
  .panel--intro { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: var(--space-5); }
  .panel--intro > :not(.notice, legend) { grid-column: 1; }
  .panel--intro .notice { grid-column: 2; grid-row: 3 / span 2; align-self: start; justify-self: center; font-size: 1.5rem; padding: var(--space-3); }
  .panel--intro .intro-art { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: center; }
}

/* ---------- navigation (thumb zone) ---------- */
.wizard__nav {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
  background: var(--color-bg);
}
.wizard:not(.is-enhanced) .wizard__nav { display: none; }
.wizard__dots { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.wizard__dots { gap: 0; }
/* The link is the 24 × 24 px target (WCAG 2.2 target size); the dot is drawn inside. */
.wizard__dots a {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
}
.wizard__dots a::before {
  content: "";
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border: 2px solid var(--color-ink);
  background: var(--color-surface);
}
.wizard__dots a[aria-current="step"]::before { background: var(--color-accent); border-color: var(--color-accent); inline-size: 1.1rem; block-size: 1.1rem; }
.wizard__dots a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 0; }


.button--xl { font-size: 1.25rem; padding-inline: var(--space-5); min-block-size: 3.5rem; }
.button--small { min-block-size: 2.75rem; padding-inline: var(--space-3); font-size: 0.9375rem; }
.button[disabled] { opacity: 0.5; cursor: not-allowed; }
button.button { cursor: pointer; line-height: inherit; }
button.button--primary { background: var(--color-accent); }

/* ---------- fields ---------- */
.field { display: grid; gap: var(--space-1); }
.field__label, .field label { font-weight: 700; }
.field__hint { color: var(--color-muted); font-size: 0.9375rem; margin: 0; }
.field input[type="text"], .field select {
  min-block-size: var(--tap);
  padding-inline: var(--space-3);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.check { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap); }
.check input { inline-size: 1.5rem; block-size: 1.5rem; flex-shrink: 0; }
.visually-hidden, .avatar-choice input, .segmented__option input, .radio-card input, .ladder input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.segmented { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.segmented__option span {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-inline: var(--space-3);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}
.segmented__option input:checked + span { background: var(--color-marker); color: var(--color-marker-text); box-shadow: var(--shadow-hard); font-weight: 700; }
.segmented__option input:focus-visible + span,
.avatar-choice input:focus-visible ~ span,
.radio-card input:focus-visible ~ .radio-card__title,
.ladder input:focus-visible ~ .ladder__text { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------- avatars ---------- */
.avatar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.avatar-choice { display: grid; justify-items: center; gap: var(--space-1); text-align: center; font-size: 0.875rem; cursor: pointer; }
.avatar { inline-size: min(5.5rem, 26vw); block-size: auto; border-radius: 50%; border: 3px solid transparent; transition: transform var(--duration); }
.avatar-choice input:checked + .avatar { border-color: var(--color-accent); transform: scale(1.06) rotate(-3deg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ---------- spectrum wheel ---------- */
.wheel { display: none; justify-self: center; inline-size: min(19rem, 80vw); touch-action: none; user-select: none; }
.wizard.is-enhanced .wheel { display: block; }
.wheel__svg { inline-size: 100%; block-size: auto; cursor: grab; }
.wheel.is-dragging .wheel__svg { cursor: grabbing; }
.wheel__rotor { transform-box: view-box; transform-origin: 150px 150px; transform: rotate(var(--rot, 0deg)); transition: transform 380ms cubic-bezier(.2, 1.2, .3, 1); }
.wheel.is-dragging .wheel__rotor { transition: none; }
.wheel__segment { stroke: var(--color-surface); stroke-width: 3; }
.wheel__segment.is-selected { stroke: var(--color-text); stroke-width: 5; }
.wheel__hub { fill: var(--color-surface); stroke: #9aa3ad; stroke-width: 4; }
.wheel__pointer { fill: var(--color-text); }

.radio-list { display: grid; gap: var(--space-2); }
.wizard.is-enhanced .radio-list--spectrum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.radio-card { display: grid; gap: 0.15rem; padding: var(--space-2) var(--space-3); border: 2px solid var(--color-ink); border-radius: var(--radius); cursor: pointer; background: var(--color-surface); }
.radio-card:has(input:checked) { background: var(--color-marker); color: var(--color-marker-text); box-shadow: var(--shadow-hard); }
.radio-card:has(input:checked) .radio-card__text { color: var(--color-marker-text); }
.radio-card__title { font-weight: 700; }
.radio-card__text { font-size: 0.875rem; color: var(--color-muted); }
.wizard.is-enhanced .radio-card__text { display: none; }
.wizard.is-enhanced .radio-card:has(input:checked) .radio-card__text { display: block; }
/* Sample line: no accent stripe; an info badge in the colour of the chosen spectrum
   and a light tint of it. Tone text colours are complements with AA contrast. */
.example {
  --tone: #b0bec5; --tone-text: #151412;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--tone) 16%, var(--color-surface));
  border-radius: var(--radius);
}
.example[data-example-tone="braun"] { --tone: #8d6e63; --tone-text: #fffdf7; }
.example[data-example-tone="rot"] { --tone: #e53935; --tone-text: #151412; }
.example[data-example-tone="weiss"] { --tone: #cfd8dc; --tone-text: #151412; }
.example[data-example-tone="gruen"] { --tone: #2e7d32; --tone-text: #fffdf7; }
.example[data-example-tone="blau"] { --tone: #1565c0; --tone-text: #fffdf7; }
.example__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  margin-block-start: 0.1rem;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--tone);
  color: var(--tone-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}
.example[data-example-tone="regenbogen"] .example__icon { background: conic-gradient(#e53935, #f5c542, #43a047, #1e88e5, #8e24aa, #e53935); color: #151412; text-shadow: 0 0 2px #fffdf7, 0 0 2px #fffdf7; }

/* ---------- level ladder into the rabbit hole ---------- */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.ladder__rung label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  padding: var(--space-2) var(--space-3);
  border-block-end: 4px solid #8d6e63;
  border-inline: 4px solid #6d4c41;
  background: var(--color-surface);
  cursor: pointer;
  transition: transform var(--duration);
}
.ladder__rung[data-depth="2"] { margin-inline-start: 0.4rem; }
.ladder__rung[data-depth="3"] { margin-inline-start: 0.8rem; }
.ladder__rung[data-depth="4"] { margin-inline-start: 1.2rem; }
.ladder__rung[data-depth="5"] { margin-inline-start: 1.6rem; }
.ladder__rung[data-depth="6"] { margin-inline-start: 2rem; }
.ladder__rung[data-depth="7"] { margin-inline-start: 2.4rem; }
.ladder__rung[data-depth="5"] label, .ladder__rung[data-depth="6"] label { background: color-mix(in srgb, var(--color-surface) 75%, #3e2723); }
.ladder__rung[data-depth="7"] label { background: color-mix(in srgb, var(--gold) 35%, var(--color-surface)); }
.ladder__number { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--color-border); font-weight: 800; flex-shrink: 0; }
.ladder__text { display: grid; }
.ladder__text small { color: var(--color-muted); }
.ladder__rung:has(input:checked) label { transform: translateX(calc(0.4rem * var(--dir, 1))); border-color: var(--color-accent); }
.ladder__rung:has(input:checked) .ladder__number { background: var(--color-accent); color: var(--color-accent-contrast); }
.rabbit-hole { block-size: 3rem; border-radius: 50% / 100% 100% 0 0; background: radial-gradient(ellipse at 50% 0, #1b1b1f 30%, transparent 72%); }

/* ---------- ingredient lab ---------- */
.ingredient-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ingredient { display: grid; gap: var(--space-1); }
.ingredient__label { font-weight: 700; font-size: 0.875rem; }
.ingredient__select { min-block-size: var(--tap); max-inline-size: 100%; }
.wizard.is-enhanced .ingredient__select { display: none; }
.ingredient__card {
  min-block-size: 7.5rem;
  display: grid;
  align-content: space-between;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 2px solid #9aa3ad;
  background-image: var(--crinkle), var(--foil);
  color: #1b1b1f;
  text-align: start;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 3px 0 #7d8790;
  transition: transform var(--duration);
}
.ingredient__card:active { transform: translateY(2px); box-shadow: none; }
.ingredient__card.is-flipping { animation: card-flip 420ms ease; }
@keyframes card-flip { 50% { transform: rotateY(90deg); } }
.ingredient__value { font-weight: 700; }
.button--dice { justify-self: start; }
.daily { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: color-mix(in srgb, var(--gold) 22%, var(--color-surface)); }
.daily p { margin: 0; }

.picker {
  inline-size: min(34rem, 100vw - 2rem);
  max-block-size: 80vh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
}
.picker::backdrop { background: rgb(0 0 0 / 0.45); }
.picker__list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-1); max-block-size: 55vh; overflow-y: auto; }
.picker__list button {
  inline-size: 100%;
  min-block-size: var(--tap);
  text-align: start;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) / 2);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.picker__list button[aria-pressed="true"] { border-color: var(--color-accent); font-weight: 700; }
.picker__list button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- mixer ---------- */
.mixer { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fader { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2); border-radius: var(--radius); background: #23262b; color: #f1f3f5; }
.fader label { grid-column: 1 / -1; font-size: 0.8125rem; font-weight: 700; }
.fader input[type="range"] { inline-size: 100%; min-block-size: var(--tap); accent-color: #e9b949; }
.fader output { font-variant-numeric: tabular-nums; font-weight: 700; color: #e9b949; }
.preview { padding: var(--space-3); border-radius: var(--radius); border: 2px dashed var(--color-accent); background: var(--color-surface); }
.preview__label { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.preview__line { margin: 0; font-size: 1.05rem; min-block-size: 3em; }
@media (min-width: 900px) { .mixer { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- ritual ---------- */
.panel--ritual { justify-items: center; text-align: center; }
.cauldron { inline-size: min(17rem, 75vw); touch-action: none; user-select: none; cursor: grab; }
.cauldron svg { inline-size: 100%; block-size: auto; }
.cauldron__rim { fill: #4a4f57; }
.cauldron__pot { fill: #2b2e33; stroke: #15171a; stroke-width: 3; }
.cauldron__brew { fill: #7cb342; }
.cauldron__spoon { stroke: #a1887f; stroke-width: 8; stroke-linecap: round; transform-box: view-box; transform-origin: 100px 58px; transform: rotate(var(--spoon, 0deg)); }
.cauldron__bubble { fill: #c5e1a5; animation: bubble 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cauldron__bubble--b { animation-delay: 0.6s; }
@keyframes bubble { 50% { transform: translateY(-6px) scale(1.3); opacity: 0.6; } }
.cauldron.is-done .cauldron__brew { fill: #e9b949; }
.ritual-progress { inline-size: min(17rem, 75vw); block-size: 0.75rem; accent-color: var(--color-accent); }
.ritual-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.button--hold { position: relative; overflow: hidden; touch-action: none; user-select: none; }
.button--hold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-accent) 35%, transparent);
  transform-origin: left center;
  transform: scaleX(var(--hold, 0));
}
[dir="rtl"] .button--hold::after { transform-origin: right center; }
.loading { font-weight: 700; min-block-size: 3.2em; }
/* Badge + gauge keep their space until they appear (no layout shift after typing). */
.award:not(.is-shown) { visibility: hidden; }
.is-revealing .site-footer { visibility: hidden; }
.loading.is-active { animation: pulse 900ms ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.wizard.is-enhanced .wizard__submit { display: none; }

/* ---------- reveal ---------- */
.reveal-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.result { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); background: var(--color-surface); border: 2px solid var(--color-ink); }
.result__headline { margin: 0; font-size: 1.35rem; }
.result__body { display: grid; gap: var(--space-2); }
.result__part {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: calc(var(--radius) / 2);
  cursor: pointer;
  white-space: pre-line;
}
.result__part:hover, .result__part:focus-visible { background: color-mix(in srgb, var(--color-text) 9%, transparent); }
.result__part:has(.tw-ghost) { position: relative; }
.tw-ghost { visibility: hidden; }
.tw-live { position: absolute; inset: 0; }
/* The wizard fills at least the viewport: switching to the (taller) result panel
   does not visibly move the footer (layout shift after the async generation). */
.wizard.is-enhanced { min-block-size: 100svh; }
.wizard.is-enhanced .panel { min-block-size: calc(100svh - 9rem); }
.result__part.is-remixed { animation: remix 900ms ease; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes remix { 0% { background: color-mix(in srgb, var(--gold) 45%, transparent); } }
.result__footer { margin: 0; font-size: 0.875rem; color: var(--color-muted); }

.award { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); }
.badge {
  display: grid;
  place-items: center;
  inline-size: 8rem;
  block-size: 8rem;
  padding: var(--space-2);
  border-radius: 50%;
  text-align: center;
  font-weight: 800;
  color: #1b1b1f;
  background-image: var(--crinkle), radial-gradient(circle at 30% 30%, #fff8 0, transparent 40%), var(--badge, var(--foil));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--badge-ring, #9aa3ad) 60%, transparent), 0 10px 24px rgb(0 0 0 / 0.25);
  animation: badge-in 700ms cubic-bezier(.2, 1.6, .4, 1) both;
}
.badge--gold { --badge: linear-gradient(135deg, #fff1a8, var(--gold), #fff3c4, #a87a00); --badge-ring: var(--gold); }
.badge--silber { --badge: linear-gradient(135deg, #ffffff, var(--silber), #f4f6f8, #7d8790); --badge-ring: var(--silber); }
.badge--bronze { --badge: linear-gradient(135deg, #ffd7b0, var(--bronze), #f3c39a, #7a4a22); --badge-ring: var(--bronze); }
.badge--blech { --badge: linear-gradient(135deg, #d5dade, var(--blech), #c4cacf, #4d555c); --badge-ring: var(--blech); }
.badge--staniol { --badge: var(--foil); --badge-ring: var(--staniol); }
@keyframes badge-in { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } }

.gauge { inline-size: min(14rem, 60vw); block-size: auto; }
.gauge__track { fill: none; stroke: var(--color-border); stroke-width: 14; stroke-linecap: round; }
.gauge__value { fill: none; stroke: var(--gold); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--score, 0)); transition: stroke-dashoffset 1.2s ease; }
.gauge__needle { stroke: var(--color-text); stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 100px 100px; transform: rotate(calc(-90deg + var(--score, 0) * 1.8deg)); transition: transform 1.2s cubic-bezier(.2, 1.3, .4, 1); }
.gauge__hub { fill: var(--color-text); }
.gauge__score { text-anchor: middle; font-size: 1.6rem; font-weight: 800; fill: var(--color-text); }

.flip { perspective: 60rem; }
.flip__inner { display: grid; transition: transform 600ms ease; transform-style: preserve-3d; }
.flip__front, .flip__back { grid-area: 1 / 1; backface-visibility: hidden; padding: var(--space-3); border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-border); }
.flip__front { display: grid; place-items: center; min-block-size: 6rem; background-image: var(--crinkle), var(--foil); }
.flip__back { transform: rotateY(180deg); }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__back h3 { margin-block-end: var(--space-1); }

.bingo h3 { margin-block-end: var(--space-2); }
.bingo__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.bingo__row { display: contents; }
.bingo__cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 2px;
  border-radius: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: clamp(0.55rem, 2.4vw, 0.8rem);
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.bingo__cell.is-marked { background-image: var(--crinkle), var(--foil); border-color: var(--gold); font-weight: 800; animation: stamp 400ms ease both; }
.bingo__cell.is-free { background: var(--color-accent); color: var(--color-accent-contrast); font-weight: 800; }
@keyframes stamp { from { transform: scale(1.6) rotate(-10deg); opacity: 0; } }
.bingo__win { font-size: 1.6rem; font-weight: 900; color: var(--gold); text-align: center; margin: var(--space-2) 0 0; }

.reveal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.achievements__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.achievements__list li { padding: var(--space-2); border-radius: var(--radius); border: 1px dashed var(--color-border); font-size: 0.875rem; color: var(--color-muted); }
.achievements__list li.is-unlocked { border-style: solid; border-color: var(--gold); color: var(--color-text); background-image: var(--crinkle), linear-gradient(135deg, color-mix(in srgb, var(--gold) 25%, transparent), transparent); }
.achievements__list strong { display: block; }
.leaderboard__list { margin: 0; padding-inline-start: var(--space-4); }

/* ---------- toast + foil confetti ---------- */
.toast {
  position: fixed;
  inset-inline: var(--space-3);
  inset-block-end: 5rem;
  z-index: 30;
  max-inline-size: 28rem;
  margin-inline: auto;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: #1b1b1f;
  color: #fff;
  text-align: center;
  animation: toast-in 300ms ease both;
}
@keyframes toast-in { from { transform: translateY(1rem); opacity: 0; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confetti__piece {
  position: absolute;
  inset-block-start: -2rem;
  inline-size: 0.7rem;
  block-size: 1rem;
  background-image: var(--foil);
  border-radius: 2px;
  animation: confetti-fall var(--fall, 2.4s) cubic-bezier(.3, .6, .5, 1) forwards;
}
@keyframes confetti-fall {
  to { transform: translate(var(--drift, 0), 110vh) rotate(var(--spin, 540deg)); }
}

@media (min-width: 600px) {
  .panel { padding: var(--space-5) var(--space-4); }
  .avatar-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ingredient-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

}

/* Instant mode: no motion (system setting or the site's motion switch). */
@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .flip__inner { transition: none; }
}
:root[data-motion="off"] .confetti { display: none; }

/* Honeypot: invisible for people and assistive tech, filled by bots. */
.hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* Focused elements scroll above the sticky bottom bar (WCAG 2.4.11 focus not obscured). */
html:has(.wizard.is-enhanced) { scroll-padding-block-end: 6rem; }

/* ---------- intro button as a slot machine (wizard/intro-slot.js) ---------- */
.intro-slot { overflow: hidden; min-inline-size: min(100%, 24rem); min-block-size: 3.5rem; }
@media (max-width: 599px) { .intro-slot { inline-size: 100%; min-block-size: 4.75rem; } }
.intro-slot__reel { display: inline-block; }
.intro-slot__reel.is-rolling { animation: reel-roll 120ms ease-out; }
@keyframes reel-roll { from { transform: translateY(-70%); } }
.intro-slot.is-shudder { animation: shudder 450ms linear; }
@keyframes shudder {
  10%, 50%, 90% { transform: translate(-2px, 1px) rotate(-1deg); }
  30%, 70% { transform: translate(2px, -1px) rotate(1deg); }
}
.intro-slot.is-hammer { animation: jackhammer 60ms linear 17; }
@keyframes jackhammer {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3px, -4px) rotate(-1.5deg); }
  50% { transform: translate(3px, 2px) rotate(1deg); }
  75% { transform: translate(-2px, 4px) rotate(-0.5deg); }
}
.intro-slot.is-wobble { animation: wobble 700ms ease-in-out; transform-origin: 50% 100%; }
@keyframes wobble { 20% { transform: rotate(-4deg); } 45% { transform: rotate(3deg); } 70% { transform: rotate(-1.5deg); } }

/* Dark mode: dark-on-dark graphics get light ink outlines / lighter wood (contrast audit). */
@media (prefers-color-scheme: dark) {
  .cauldron__rim { fill: #8a9099; }
  .cauldron__pot { fill: #4a4f57; stroke: var(--color-ink); stroke-width: 3; }
  .ladder__rung label { border-inline-color: #b08d7e; border-block-end-color: #c8a597; }
}
@media (prefers-color-scheme: dark) {
  .foil-hat__goal { fill: color-mix(in srgb, var(--color-marker) 55%, transparent); opacity: 0.9; }
}

/* Intro illustration (wide screens): the finished holographic tinfoil hat, transmitting. */
.intro-art { display: none; inline-size: min(16rem, 100%); cursor: pointer; }
.intro-art svg { inline-size: 100%; block-size: auto; overflow: visible; filter: drop-shadow(calc(var(--sx) * 2) 6px 0 color-mix(in srgb, var(--shadow-ink) 30%, transparent)); }
.intro-art__hat polygon { fill: url(#holo); stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; }
.intro-art__waves path { fill: none; stroke: var(--color-accent); stroke-width: 4.5; stroke-linecap: round; animation: transmit 1.8s ease-in-out infinite; }
.intro-art__waves path:nth-child(2) { animation-delay: 0.25s; }
.intro-art__waves path:nth-child(3) { animation-delay: 0.5s; }
.intro-art svg { animation: hat-float 4s ease-in-out infinite; }
@keyframes hat-float { 50% { transform: translateY(-6px) rotate(-2deg); } }
/* Ridiculous on purpose: the hat is Emmentaler, jiggles like jelly, worms crawl
   out of one hole and dive into the next, and every slot-machine slam makes it
   jump (.is-boing, set by intro-slot.js). Off with reduced motion (base.css). */
.intro-art__hat { transform-box: fill-box; transform-origin: 50% 100%; animation: hat-jelly 6s ease-in-out infinite; }
@keyframes hat-jelly {
  0%, 70%, 100% { transform: none; }
  76% { transform: scale(1.04, 0.95); }
  83% { transform: scale(0.97, 1.04) rotate(-1deg); }
  90% { transform: scale(1.01, 0.99) rotate(0.6deg); }
}
.intro-art__holes ellipse { fill: #8a6a2a; stroke: var(--color-ink); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: hole-gulp 4s ease-in-out infinite; }
.intro-art__holes ellipse:nth-child(2n) { animation-delay: 0.7s; }
.intro-art__holes ellipse:nth-child(3n) { animation-delay: 1.4s; }
@keyframes hole-gulp { 50% { transform: scale(1.12, 0.9); } }
.intro-art__worm path { fill: none; stroke-linecap: round; stroke-dasharray: 34 300; stroke-dashoffset: 36; animation: worm-crawl 8s linear infinite; }
.intro-art__worm .worm__edge { stroke: var(--color-ink); stroke-width: 7; }
.intro-art__worm .worm__body { stroke: #ff8fb1; stroke-width: 4.2; }
/* ring lines across the body: same 334 unit period as the body dash, so they crawl along */
.intro-art__worm .worm__rings { stroke: var(--color-ink); stroke-width: 4.2; stroke-linecap: butt; opacity: 0.55; stroke-dasharray: 0 4 0.8 3.2 0.8 3.2 0.8 3.2 0.8 3.2 0.8 3.2 0.8 3.2 0.8 3.2 0 302; }
.intro-art__worm--late path { animation-delay: 4s; }
/* crawl out, pause halfway to look around, dive in; the rest of the cycle stays hidden */
@keyframes worm-crawl {
  0% { stroke-dashoffset: 36; }
  18% { stroke-dashoffset: -30; }
  26% { stroke-dashoffset: -30; }
  46%, 100% { stroke-dashoffset: -136; }
}
/* Critters: fly, bee, ladybird (all decorative, aria-hidden). */
.critter__eye { fill: #151412; }
.critter__wing { fill: color-mix(in srgb, #ffffff 70%, transparent); stroke: var(--color-ink); stroke-width: 0.6; transform-box: fill-box; transform-origin: 50% 100%; animation: wing-flap 90ms linear infinite alternate; }
.critter__wing--b { animation-delay: 45ms; }
@keyframes wing-flap { to { transform: scaleY(0.35); } }
.critter-fly__body { fill: #2b2e33; stroke: var(--color-ink); stroke-width: 0.6; }
.critter-fly__eye { fill: #b3121b; }
.critter-fly { transform: translate(20px, 20px); animation: fly-buzz 7s linear infinite; }
@keyframes fly-buzz {
  0%, 100% { transform: translate(20px, 20px); }
  6% { transform: translate(28px, 8px); }
  11% { transform: translate(38px, 14px); }
  16% { transform: translate(46px, 0); }
  21% { transform: translate(56px, -8px); }
  26% { transform: translate(66px, 2px); }
  31% { transform: translate(74px, -6px); }
  36% { transform: translate(86px, 8px); }
  41% { transform: translate(96px, 16px); }
  46% { transform: translate(104px, 30px); }
  51% { transform: translate(98px, 44px); }
  55% { transform: translate(108px, 52px); }
  59% { transform: translate(100px, 62px); }
  63% { transform: translate(90px, 50px); }
  68% { transform: translate(96px, 36px); }
  73% { transform: translate(84px, 24px); }
  78% { transform: translate(78px, 6px); }
  83% { transform: translate(64px, -14px); }
  88% { transform: translate(48px, -18px); }
  92% { transform: translate(34px, -6px); }
  96% { transform: translate(16px, 10px); }
}
.critter-bee__body { fill: #f5c542; stroke: #151412; stroke-width: 0.7; }
.critter-bee__stripes { stroke: #151412; stroke-width: 1.3; }
.critter-bee__sting { fill: #151412; }

.critter-bee { transform: translate(104px, 30px); animation: bee-eight 6s ease-in-out infinite; }
@keyframes bee-eight {
  0%, 100% { transform: translate(104px, 30px); }
  12.5% { transform: translate(110px, 23px) rotate(-8deg); }
  25% { transform: translate(114px, 30px); }
  37.5% { transform: translate(110px, 37px) rotate(8deg); }
  50% { transform: translate(104px, 30px); }
  62.5% { transform: translate(98px, 23px) rotate(8deg); }
  75% { transform: translate(94px, 30px); }
  87.5% { transform: translate(98px, 37px) rotate(-8deg); }
}
.bee-face { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }
/* Hit by the commando's confetti (.is-hit from intro-slot.js): tumbles down, sits dizzy, flies back up. */
.bee-tumble.is-hit { transform-box: fill-box; transform-origin: center; animation: bee-tumble 3.6s ease-in both; }
@keyframes bee-tumble {
  0% { transform: none; }
  6% { transform: rotate(-25deg); }
  36% { transform: translateY(58px) rotate(-560deg); }
  40%, 78% { transform: translateY(60px) rotate(-540deg) scaleY(0.9); }
  100% { transform: none; }
}
.bee-stars { opacity: 0; }
.bee-stars path { fill: #f5c542; stroke: #151412; stroke-width: 0.4; }
.bee-tumble.is-hit .bee-stars { animation: bee-stars 3.6s step-end both; }
@keyframes bee-stars { 0% { opacity: 0; } 40% { opacity: 1; } 78% { opacity: 0; } }
.bee-stars > g { transform-box: fill-box; transform-origin: center; animation: dizzy-spin 1.2s linear infinite; }
@keyframes dizzy-spin { to { transform: rotate(360deg); } }
.critter-ladybird__shell { fill: #d62828; stroke: #151412; stroke-width: 0.7; }
.critter-ladybird__head, .critter__spot { fill: #151412; }
.critter-ladybird__line { stroke: #151412; stroke-width: 0.6; }
.critter-ladybird__legs { fill: none; stroke: #151412; stroke-width: 0.7; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 0; animation: legs 260ms linear infinite alternate; }
@keyframes legs { to { transform: skewX(18deg); } }
.critter-ladybird { transform: translate(20px, 78px); animation: ladybird-walk 16s linear infinite; }
.critter-ladybird > g { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ladybird-walk {
  0% { transform: translate(20px, 78px) scale(0); }
  3% { transform: translate(20px, 78px) scale(1); }
  45%, 50% { transform: translate(98px, 78px) scale(1); }
  50.5%, 100% { transform: translate(98px, 78px) scale(0); }
}
/* Holographic foil hat: silvery base with a soft rainbow sheen that wanders slowly. */
#holo stop { animation: rainbow-shift 20s linear infinite; }
#holo stop:nth-child(2) { animation-delay: -3.33s; }
#holo stop:nth-child(3) { animation-delay: -6.67s; }
#holo stop:nth-child(4) { animation-delay: -10s; }
#holo stop:nth-child(5) { animation-delay: -13.33s; }
#holo stop:nth-child(6) { animation-delay: -16.67s; }
@keyframes rainbow-shift {
  0%, 100% { stop-color: #f6f3ff; }
  16.7% { stop-color: #e4efff; }
  33.3% { stop-color: #e3f8ee; }
  50% { stop-color: #fdf5dc; }
  66.7% { stop-color: #fde6ee; }
  83.3% { stop-color: #ece4fb; }
}
/* a touch of depth: the left facets and the brim front sit in the shade */
.intro-art__hat polygon:nth-child(odd) { filter: brightness(0.93) saturate(1.15); }
/* Knight Rider scanner on the brim, its light flowing from red to green and back. */
.kitt__bar { fill: color-mix(in srgb, #151412 75%, transparent); }
.kitt__light { fill: #ff4a3d; filter: drop-shadow(0 0 1px #ff4a3d); animation: kitt-sweep 2.2s ease-in-out infinite alternate, kitt-colour 2.2s ease-in-out infinite alternate; transform: translateX(23px); }
.kitt__light--trail { opacity: 0.5; animation-delay: -0.08s, -0.08s; filter: none; }
.kitt__light--trail2 { opacity: 0.25; animation-delay: -0.16s, -0.16s; filter: none; }
@keyframes kitt-sweep { from { transform: translateX(23px); } to { transform: translateX(88px); } }
/* red at the left end, green at the right end, flowing in between */
@keyframes kitt-colour {
  from { fill: #ff4a3d; filter: drop-shadow(0 0 1.2px #ff4a3d); }
  50% { fill: #ffc23d; filter: drop-shadow(0 0 1.2px #ffc23d); }
  to { fill: #5cff7a; filter: drop-shadow(0 0 1.2px #5cff7a); }
}
/* Ground: van chased by the chomper, crumbs vanish when eaten and grow back. */
.ground__line { stroke: var(--color-ink); stroke-width: 0.8; stroke-dasharray: 2 3; stroke-linecap: round; opacity: 0.35; }
.ground__crumbs rect { fill: #f5c542; stroke: #151412; stroke-width: 0.5; animation: crumb-eaten 10s step-end infinite; }
@keyframes crumb-eaten { 0% { opacity: 0; } 70% { opacity: 1; } }
.ground__crumbs rect:nth-child(1) { animation-delay: 1.91s; }
.ground__crumbs rect:nth-child(2) { animation-delay: 2.33s; }
.ground__crumbs rect:nth-child(3) { animation-delay: 2.75s; }
.ground__crumbs rect:nth-child(4) { animation-delay: 3.18s; }
.ground__crumbs rect:nth-child(5) { animation-delay: 3.60s; }
.ground__crumbs rect:nth-child(6) { animation-delay: 4.02s; }
.ground__crumbs rect:nth-child(7) { animation-delay: 4.45s; }
.ground__crumbs rect:nth-child(8) { animation-delay: 4.87s; }
.ground__crumbs rect:nth-child(9) { animation-delay: 5.29s; }
.van { transform: translate(-10px, 101px); animation: van-flee 10s linear infinite; }
@keyframes van-flee { 0% { transform: translate(-10px, 101px); } 60%, 100% { transform: translate(160px, 101px); } }
.van > g { animation: van-bump 240ms ease-in-out infinite alternate; }
@keyframes van-bump { to { transform: translateY(-0.6px); } }
.van__lower { fill: #8a8f96; stroke: #151412; stroke-width: 0.7; }
.van__upper { fill: #151412; stroke: #151412; stroke-width: 0.7; }
.van__stripe { stroke: #e53935; stroke-width: 1.5; }
.van__window { fill: #b8d8ff; }
.van__wheel { fill: #151412; stroke: #c9ced4; stroke-width: 0.8; }
.chomper { transform: translate(-40px, 97px); animation: chomper-run 10s linear infinite; }
@keyframes chomper-run { 0% { transform: translate(-40px, 97px); } 60%, 100% { transform: translate(130px, 97px); } }
.chomper__jaw { fill: #ffd400; stroke: #151412; stroke-width: 0.7; stroke-linejoin: round; transform-origin: 0 0; animation: chomp 220ms ease-in-out infinite alternate; }
.chomper__jaw--top { --open: -35deg; }
.chomper__jaw--bottom { --open: 35deg; }
@keyframes chomp { from { transform: rotate(var(--open)); } to { transform: none; } }
.chomper__eye { fill: #151412; }
/* Speedy bird (teal, coral crest): runs from right to left after the chase, in a cloud of dust. */
.runner { transform: translate(150px, 101px); animation: runner-dash 10s linear infinite; }
@keyframes runner-dash { 0%, 62% { transform: translate(150px, 101px); } 96%, 100% { transform: translate(-30px, 101px); } }
.runner__body, .runner__head { fill: #2a9d8f; stroke: #151412; stroke-width: 0.6; }
.runner__tail { fill: #1f6f66; stroke: #151412; stroke-width: 0.5; }
.runner__neck { stroke: #2a9d8f; stroke-width: 1.6; stroke-linecap: round; }
.runner__crest { stroke: #e76f51; stroke-width: 1; stroke-linecap: round; }
.runner__beak { fill: #ffd400; stroke: #151412; stroke-width: 0.4; }
.runner__legs { fill: none; stroke: #f4a261; stroke-width: 1; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 0; animation: runner-legs 140ms linear infinite alternate; }
@keyframes runner-legs { to { transform: scaleX(-1); } }
.runner__speed { stroke: var(--color-ink); stroke-width: 0.7; stroke-linecap: round; opacity: 0.6; }
.runner__dust circle { fill: color-mix(in srgb, #b9b2a3 80%, transparent); animation: dust 300ms ease-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes dust { to { transform: scale(1.3); opacity: 0.5; } }
.intro-art.is-boing svg { animation: hat-boing 700ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hat-boing {
  0% { transform: none; }
  30% { transform: translateY(-22px) rotate(-8deg) scale(1.06, 0.94); }
  60% { transform: translateY(0) scale(1.12, 0.86); }
  80% { transform: translateY(-6px) rotate(3deg); }
  100% { transform: none; }
}

/* ---------- polish round (0.4): colour where it carries meaning ---------- */
/* Spectrum cards: a colour dot per spectrum (the wheel's colours). */
.radio-card--braun { --tone: #8d6e63; }
.radio-card--rot { --tone: #e53935; }
.radio-card--weiss { --tone: #e8edf0; }
.radio-card--gruen { --tone: #43a047; }
.radio-card--blau { --tone: #1e88e5; }
.radio-card--regenbogen { --tone: conic-gradient(#e53935, #f5c542, #43a047, #1e88e5, #8e24aa, #e53935); }
.radio-list--spectrum .radio-card__title::before {
  content: "";
  display: inline-block;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin-inline-end: 0.5rem;
  vertical-align: -0.12rem;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--tone, var(--color-border));
}

/* Rabbit-hole ladder: the number discs get darker the deeper the rung. */
.ladder__rung[data-depth="1"] .ladder__number { background: #f3e7d3; color: #151412; }
.ladder__rung[data-depth="2"] .ladder__number { background: #e2cba8; color: #151412; }
.ladder__rung[data-depth="3"] .ladder__number { background: #c9a57a; color: #151412; }
.ladder__rung[data-depth="4"] .ladder__number { background: #a07850; color: #fffdf7; }
.ladder__rung[data-depth="5"] .ladder__number { background: #6d4c41; color: #fffdf7; }
.ladder__rung[data-depth="6"] .ladder__number { background: #3e2723; color: #fffdf7; }
.ladder__rung[data-depth="7"] .ladder__number { background: linear-gradient(135deg, #fff1a8, #d4a017 55%, #a87a00); color: #151412; }
.ladder__number { border: 2px solid var(--color-ink); }

/* Result: the post as a pinned flyer. */
.result { box-shadow: var(--shadow-hard-lg); padding: var(--space-4) var(--space-3); }
.result__headline { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); line-height: 1.08; text-transform: uppercase; }

/* Fact check card front: a sealed package insert instead of a foil gradient. */
.flip__front {
  position: relative;
  border: 2px solid var(--color-ink);
  background-color: color-mix(in srgb, var(--color-marker) 28%, var(--color-surface));
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-ink) 14%, transparent) 1px, transparent 1.6px);
  background-size: 8px 8px;
  box-shadow: var(--shadow-hard);
  min-block-size: 8rem;
  overflow: hidden;
}
.flip__front::before {
  content: "?";
  position: absolute;
  inset-inline-end: 0.6rem;
  inset-block-start: -0.6rem;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-ink) 12%, transparent);
  transform: rotate(12deg);
  pointer-events: none;
}
.flip__back { border: 2px solid var(--color-ink); box-shadow: var(--shadow-hard); }

/* Bingo: a compact card, marked fields as highlighter stamps. */
.bingo { max-inline-size: 36rem; }
.bingo__cell { border: 2px solid var(--color-ink); border-radius: var(--radius); background: var(--color-surface); font-size: clamp(0.6rem, 2.2vw, 0.78rem); font-weight: 600; }
.bingo__cell.is-marked { background: var(--color-marker); background-image: none; color: var(--color-marker-text); border-color: var(--color-ink); transform: rotate(-2deg); box-shadow: var(--shadow-hard); }
.bingo__cell.is-free { background: var(--color-accent); color: var(--color-accent-contrast); }
.bingo__win { font-family: var(--font-display); text-transform: uppercase; color: var(--color-accent); }

/* Achievements: unlocked ones as yellow stickers. */
.achievements__list li { border: 2px dashed var(--color-border); border-radius: var(--radius); }
.achievements__list li.is-unlocked { border: 2px solid var(--color-ink); background-image: none; background-color: color-mix(in srgb, var(--color-marker) 45%, var(--color-surface)); box-shadow: var(--shadow-hard); }

/* Spectrum cards: three columns only where the labels fit without breaking words. */
@media (min-width: 900px) { .wizard.is-enhanced .radio-list--spectrum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.radio-card__title { overflow-wrap: normal; hyphens: auto; }
/* Bingo: smaller type so long words fit; hyphenate where the browser can. */
.bingo__cell { font-size: clamp(0.56rem, 1.8vw, 0.72rem); hyphens: auto; overflow-wrap: break-word; padding: 3px; }

/* Wizard navigation: labels never wrap; smaller on phones, dots only where there is room. */
.wizard__nav .button { white-space: nowrap; flex-shrink: 0; }
.wizard__dots { min-inline-size: 0; flex-shrink: 1; overflow: hidden; }
@media (max-width: 480px) {
  .wizard__dots { display: none; }
  .wizard__nav .button { padding-inline: var(--space-3); font-size: 0.9375rem; gap: var(--space-1); }
}

/* Re-roll a paragraph: every paragraph carries a small «roll again» badge
   (always visible, also on touch screens); hover/focus tints it and spins the badge. */
.remix-icon, .result__part::after {
  --remix-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151412' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E");
}
.remix-hint {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-2);
  margin: 0;
  padding-inline: var(--space-1) var(--space-3);
  border: 2px solid var(--color-ink);
  background: var(--color-marker);
  color: var(--color-marker-text);
  box-shadow: var(--shadow-hard);
  font-weight: 700;
  transform: rotate(-1deg);
}
.remix-hint[hidden] { display: none; }
.remix-icon {
  inline-size: 1.75rem; block-size: 1.75rem; flex-shrink: 0;
  border: 2px solid var(--color-ink); border-radius: 50%;
  background: var(--remix-svg) center / 70% no-repeat, #fffdf7;
}
.result__part {
  position: relative;
  max-inline-size: none;
  padding-inline-end: 2.75rem;
  transition: background-color var(--duration);
}
.result__part::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.35rem;
  inset-block-start: 0.35rem;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--remix-svg) center / 70% no-repeat, var(--color-marker);
  box-shadow: var(--shadow-hard);
  transition: transform 300ms ease, background-color var(--duration);
}
.result__part:hover, .result__part:focus-visible { background: color-mix(in srgb, var(--color-marker) 22%, transparent); }
.result__part:hover::after, .result__part:focus-visible::after { transform: rotate(200deg) scale(1.12); background-color: #ff8a65; }
.result__part:active::after { transform: rotate(360deg) scale(0.95); }

/* ---------- sound switch for the intro effects (wizard/intro-slot.js) ---------- */
.sound-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-block-size: var(--tap); padding-block: 0.25rem; padding-inline: 0.75rem;
  border: 2px solid var(--color-ink); border-radius: 999px;
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: 0.95rem; cursor: pointer;
}
.sound-toggle[hidden] { display: none; }
.sound-toggle__icon { inline-size: 1.4rem; block-size: 1.4rem; flex: none; }
.sound-toggle__speaker { fill: currentColor; }
.sound-toggle__waves, .sound-toggle__mute { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sound-toggle__mute { display: none; }
.sound-toggle[aria-checked="false"] .sound-toggle__waves { display: none; }
.sound-toggle[aria-checked="false"] .sound-toggle__mute { display: inline; }
[dir="rtl"] .sound-toggle__icon { transform: scaleX(-1); }
.sound-toggle__state {
  padding-block: 0.1rem; padding-inline: 0.5rem; border-radius: 999px;
  background: var(--color-marker); color: var(--color-marker-text);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em;
}
.sound-toggle[aria-checked="false"] .sound-toggle__state { background: var(--color-ink); color: var(--color-surface); }
.sound-toggle:hover { box-shadow: var(--shadow-hard); }
.sound-toggle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Caterpillar: inches along the seam between the middle and lower band, turns at the ends. */
.caterpillar circle { fill: #8bc34a; stroke: #151412; stroke-width: 0.5; }
.caterpillar circle:nth-child(even) { fill: #aed581; }
.caterpillar .caterpillar__head { fill: #558b2f; }
.caterpillar .critter__eye { fill: #151412; stroke: none; }
.caterpillar__feelers { stroke: #151412; stroke-width: 0.5; stroke-linecap: round; }
.caterpillar { transform: translate(36px, 64px); animation: caterpillar-walk 22s linear infinite; }
@keyframes caterpillar-walk {
  0%, 100% { transform: translate(36px, 64px); }
  46%, 50% { transform: translate(88px, 64px); }
  96% { transform: translate(36px, 64px); }
}
.caterpillar > g { transform-box: fill-box; transform-origin: 100% 100%; animation: caterpillar-inch 700ms ease-in-out infinite alternate, caterpillar-turn 22s step-end infinite; }
@keyframes caterpillar-inch { to { scale: 0.78 1.12; } }
@keyframes caterpillar-turn { 0%, 100% { transform: none; } 48% { transform: scaleX(-1); } 98% { transform: none; } }
/* Cockroach: out of the lower left hole, scurries in jerks, freezes and gets eaten by the chomper. */
.roach__body { fill: #6d4c41; stroke: #151412; stroke-width: 0.5; }
.roach__wing { stroke: #3e2723; stroke-width: 0.5; }
.roach__legs, .roach__feelers { fill: none; stroke: #3e2723; stroke-width: 0.45; stroke-linecap: round; }
.roach__legs { animation: legs 90ms linear infinite alternate; transform-box: fill-box; transform-origin: center; }
.roach { transform: translate(30px, 71.5px) scale(0); animation: roach-run 16s linear infinite; }
@keyframes roach-run {
  0%, 66% { transform: translate(30px, 71.5px) scale(0); }
  67% { transform: translate(33px, 71px) scale(1); }
  71%, 73% { transform: translate(46px, 70px) rotate(-6deg) scale(1); }
  77%, 84% { transform: translate(60px, 71px) scale(1); }
  84.5%, 100% { transform: translate(60px, 71px) scale(0); }
}

/* UFOs: a green and a red one circle above the hat (half a lap apart) and scan
   it with their light cones; the cone always points at the hat and sweeps a little. */
.ufo { animation: ufo-orbit 16s linear infinite; }
.ufo--red { animation-delay: -8s; }
@keyframes ufo-orbit {
  0% { transform: translate(108.0px, -27.0px) scale(1.00); }
  8.33% { transform: translate(101.6px, -21.0px) scale(1.06); }
  16.67% { transform: translate(84.0px, -16.6px) scale(1.10); }
  25% { transform: translate(60.0px, -15.0px) scale(1.12); }
  33.33% { transform: translate(36.0px, -16.6px) scale(1.10); }
  41.67% { transform: translate(18.4px, -21.0px) scale(1.06); }
  50% { transform: translate(12.0px, -27.0px) scale(1.00); }
  58.33% { transform: translate(18.4px, -33.0px) scale(0.94); }
  66.67% { transform: translate(36.0px, -37.4px) scale(0.90); }
  75% { transform: translate(60.0px, -39.0px) scale(0.88); }
  83.33% { transform: translate(84.0px, -37.4px) scale(0.90); }
  91.67% { transform: translate(101.6px, -33.0px) scale(0.94); }
  100% { transform: translate(108.0px, -27.0px) scale(1.00); }
}
.ufo__aim { animation: ufo-aim 16s linear infinite; }
.ufo--red .ufo__aim { animation-delay: -8s; }
@keyframes ufo-aim {
  0% { transform: rotate(34.1deg) scale(1.00, 1.43); }
  8.33% { transform: rotate(32.6deg) scale(0.94, 1.21); }
  16.67% { transform: rotate(21.6deg) scale(0.91, 0.98); }
  25% { transform: rotate(-0.0deg) scale(0.89, 0.88); }
  33.33% { transform: rotate(-21.6deg) scale(0.91, 0.98); }
  41.67% { transform: rotate(-32.6deg) scale(0.94, 1.21); }
  50% { transform: rotate(-34.1deg) scale(1.00, 1.43); }
  58.33% { transform: rotate(-28.4deg) scale(1.06, 1.55); }
  66.67% { transform: rotate(-16.4deg) scale(1.12, 1.58); }
  75% { transform: rotate(-0.0deg) scale(1.14, 1.57); }
  83.33% { transform: rotate(16.4deg) scale(1.12, 1.58); }
  91.67% { transform: rotate(28.4deg) scale(1.06, 1.55); }
  100% { transform: rotate(34.1deg) scale(1.00, 1.43); }
}
.ufo__beam { transform-box: fill-box; transform-origin: 50% 0; mix-blend-mode: screen; animation: beam-scan 2.6s ease-in-out infinite alternate, beam-pulse 1.8s ease-in-out infinite alternate; }
.ufo--green .ufo__beam { fill: url(#beam-green); }
.ufo--red .ufo__beam { fill: url(#beam-red); animation-delay: -1.3s, -0.9s; }
@keyframes beam-scan { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes beam-pulse { from { opacity: 0.45; } to { opacity: 0.9; } }
.ufo__saucer { stroke: #151412; stroke-width: 0.7; }
.ufo--green .ufo__saucer { fill: #8fe39a; }
.ufo--red .ufo__saucer { fill: #ff9a8f; }
.ufo__dome { fill: color-mix(in srgb, #d6e8ff 85%, transparent); stroke: #151412; stroke-width: 0.6; }
.ufo__alien { fill: #7ed957; }
.ufo--red .ufo__alien { fill: #c79bff; }
.ufo__alien-eye { fill: #151412; }
.ufo__light { fill: #fff6c7; animation: ufo-blink 900ms steps(1) infinite; }
.ufo__light:nth-of-type(2) { animation-delay: -300ms; }
.ufo__light:nth-of-type(3) { animation-delay: -600ms; }
@keyframes ufo-blink { 33% { fill: #ff8fb1; } 66% { fill: #7ed957; } }
.ufo__bob { animation: ufo-bob 1.6s ease-in-out infinite alternate; }
.ufo--red .ufo__bob { animation-delay: -0.8s; }
@keyframes ufo-bob { from { transform: rotate(-4deg); } to { transform: translateY(-1.5px) rotate(4deg); } }

/* Hole poppers: intro-slot.js clones one of the cast into a random free hole;
   it rises (with a little overshoot), does its thing and dives back. */
.pop { transform: translateY(var(--down, 16px)); animation: pop-up 4.2s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pop-up {
  0% { transform: translateY(var(--down, 16px)); }
  14%, 84% { transform: translateY(0); }
  100% { transform: translateY(var(--down, 16px)); }
}
.pop-spot--left .pop__flip { transform: scaleX(-1); }
.pop--rabbit { --down: 22px; }
.pop--bunny { --down: 26px; }
.pop--commando, .pop--alien, .pop--alien-she { --down: 17px; }
/* white rabbit: twitches its ears, looks left and right */
.rabbit__head, .rabbit__ears ellipse { fill: #fffdf7; stroke: #151412; stroke-width: 0.8; }
.rabbit__inner { stroke: #ff8fb1; stroke-width: 1.1; stroke-linecap: round; }
.rabbit__nose { fill: #ff8fb1; }
.rabbit__ears { transform-box: fill-box; transform-origin: 50% 100%; animation: ear-twitch 1.3s ease-in-out infinite; }
@keyframes ear-twitch { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-9deg); } 80% { transform: rotate(5deg); } 90% { transform: scaleY(0.85); } }
.rabbit__face { animation: look-around 2s ease-in-out infinite; }
@keyframes look-around { 0%, 100% { transform: none; } 30% { transform: translateX(-1px); } 70% { transform: translateX(1px); } }
/* grey bunny: munches its carrot, ears flop */
.bunny__head, .bunny__ears ellipse { fill: #a9adb3; stroke: #151412; stroke-width: 0.8; }
.bunny__muzzle { fill: #fffdf7; }
.bunny__teeth { fill: #fffdf7; stroke: #151412; stroke-width: 0.4; }
.bunny__carrot path:first-child { fill: #f28c28; stroke: #151412; stroke-width: 0.5; }
.bunny__leaf { fill: none; stroke: #43a047; stroke-width: 0.9; stroke-linecap: round; }
.bunny__carrot { transform-box: fill-box; transform-origin: 0 100%; animation: carrot-munch 300ms ease-in-out infinite alternate; }
@keyframes carrot-munch { to { transform: rotate(-12deg); } }
.bunny__ears { transform-box: fill-box; transform-origin: 50% 100%; animation: ear-flop 1.6s ease-in-out infinite alternate; }
@keyframes ear-flop { to { transform: rotate(6deg) scaleY(0.92); } }
/* commando: confetti machine gun, while up */
.commando__body { fill: #556b2f; stroke: #151412; stroke-width: 0.7; }
.commando__head { fill: #e0a878; stroke: #151412; stroke-width: 0.7; }
.commando__hair { fill: #151412; }
.commando__band { fill: none; stroke: #e53935; stroke-width: 1.2; stroke-linecap: round; }
.commando__gun { fill: #2b2e33; stroke: #151412; stroke-width: 0.5; }
.commando__fire { opacity: 0; animation: commando-fire 4.2s step-end both; }
@keyframes commando-fire { 0% { opacity: 0; } 22% { opacity: 1; } 76% { opacity: 0; } }
.commando__flash { fill: #ffd400; stroke: #e53935; stroke-width: 0.4; animation: flash 110ms steps(2) infinite; }
@keyframes flash { 50% { opacity: 0; } }
.confetti-shot { animation: confetti-shot 440ms linear infinite; }
.confetti-shot:nth-child(2) { fill: #e53935; animation-delay: -110ms; }
.confetti-shot:nth-child(3) { fill: #f5c542; animation-delay: -220ms; }
.confetti-shot:nth-child(4) { fill: #1e88e5; animation-delay: -330ms; }
.confetti-shot:nth-child(5) { fill: #43a047; }
@keyframes confetti-shot { from { transform: translate(0, 0); } 85% { opacity: 1; } to { transform: translate(var(--reach, 24px), 0); opacity: 0; } }
/* aliens: he wobbles with boinging antennae, she blows hearts */
.alien__head { fill: #7ed957; stroke: #151412; stroke-width: 0.7; }
.pop--alien-she .alien__head { fill: #c79bff; }
.alien__antenna { fill: none; stroke: #151412; stroke-width: 0.6; stroke-linecap: round; }
.alien__knob { fill: #fff3a3; stroke: #151412; stroke-width: 0.5; transform-box: fill-box; transform-origin: center; animation: knob-boing 500ms ease-in-out infinite alternate; }
@keyframes knob-boing { to { transform: scale(1.5); } }
.alien__eye { fill: #151412; }
.alien__shine { fill: #ffffff; }
.alien__lash { stroke: #151412; stroke-width: 0.45; stroke-linecap: round; }
.alien__bow { fill: #ff8fb1; stroke: #151412; stroke-width: 0.4; }
.alien__mouth { fill: none; stroke: #151412; stroke-width: 0.5; stroke-linecap: round; }
.alien__lips { fill: none; stroke: #e53935; stroke-width: 0.7; stroke-linecap: round; }
.alien__wobble { transform-box: fill-box; transform-origin: 50% 100%; animation: alien-wobble 1.4s ease-in-out infinite alternate; }
@keyframes alien-wobble { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.alien__heart { fill: #ff4f7b; stroke: #151412; stroke-width: 0.3; opacity: 0; animation: heart-float 1.4s ease-out 0.7s infinite; }
.alien__heart--b { animation-delay: 1.4s; }
@keyframes heart-float { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -12px) scale(1.4); } }

/* Brim chomper (same 16 s timeline as ladybird and cockroach): sneaks after the
   ladybird and gulps it, then hunts the cockroach from the right and dives into a hole. */
.chomper-hunt { transform: translate(8px, 74.6px) scale(0); animation: chomper-hunt 16s linear infinite; }
@keyframes chomper-hunt {
  0%, 26% { transform: translate(8px, 74.6px) scale(0); }
  28% { transform: translate(8px, 74.6px) scale(1); }
  50% { transform: translate(95px, 74.6px) scale(1); }
  58% { transform: translate(112px, 74.6px) scale(1); }
  60%, 64% { transform: translate(112px, 74.6px) scale(0); }
  66% { transform: translate(108px, 71px) scale(1); }
  84% { transform: translate(63px, 71px) scale(1); }
  92% { transform: translate(34px, 71.5px) scale(1); }
  94%, 100% { transform: translate(30px, 71.5px) scale(0); }
}
.chomper-hunt__face { animation: chomper-face 16s step-end infinite; }
@keyframes chomper-face { 0% { transform: none; } 62% { transform: scaleX(-1); } 96% { transform: none; } }
.chomper-hunt__gulp { animation: chomper-gulp 16s ease-out infinite; }
@keyframes chomper-gulp {
  0%, 50%, 54%, 84%, 88%, 100% { transform: none; }
  51% { transform: scale(1.35); }
  85% { transform: scale(1.35); }
}

/* Chomper shows (one at a time, data-pac set by intro-slot.js for 6 s). Hidden
   otherwise; display none also restarts the animations for the next show. */
.pac-seq, .show { display: none; }
.intro-art[data-pac="waves"] .pac-seq--waves,
.intro-art[data-pac="holes"] .pac-seq--holes,
.intro-art[data-pac="parade"] .pac-seq--parade,
.intro-art[data-pac="cat"] .show--cat,
.intro-art[data-pac="jetcar"] .show--jetcar,
.intro-art[data-pac="roadster"] .show--roadster { display: inline; }
/* 1. wave muncher: climbs the left edge, eats the three radio waves, burps, slides down the right edge spinning */
.pac-seq--waves { animation: pac-waves 6s linear both; }
@keyframes pac-waves {
  0% { transform: translate(12px, 75px) scale(0); }
  4% { transform: translate(12px, 75px) rotate(-40deg) scale(1); }
  12% { transform: translate(27px, 61px) rotate(-55deg); }
  22% { transform: translate(38px, 37px) rotate(-60deg); }
  34% { transform: translate(57px, 3px) rotate(-62deg); }
  40% { transform: translate(60px, -4px) rotate(-90deg); }
  48% { transform: translate(60px, -14px) rotate(-90deg); }
  56% { transform: translate(60px, -24px) rotate(-90deg); }
  60% { transform: translate(60px, -30px) rotate(0deg) scale(1.35); }
  64% { transform: translate(60px, -30px) scale(1); }
  70% { transform: translate(62px, 3px) rotate(180deg); }
  80% { transform: translate(82px, 37px) rotate(540deg); }
  90% { transform: translate(95px, 61px) rotate(900deg); }
  96% { transform: translate(110px, 75px) rotate(1080deg) scale(1); }
  100% { transform: translate(112px, 76px) rotate(1080deg) scale(0); }
}
.intro-art[data-pac="waves"] .intro-art__waves path { animation: wave-eaten-1 6s step-end both; }
.intro-art[data-pac="waves"] .intro-art__waves path:nth-child(2) { animation-name: wave-eaten-2; }
.intro-art[data-pac="waves"] .intro-art__waves path:nth-child(3) { animation-name: wave-eaten-3; }
@keyframes wave-eaten-1 { 0% { opacity: 1; } 40% { opacity: 0; } 92% { opacity: 1; } }
@keyframes wave-eaten-2 { 0% { opacity: 1; } 48% { opacity: 0; } 95% { opacity: 1; } }
@keyframes wave-eaten-3 { 0% { opacity: 1; } 56% { opacity: 0; } 98% { opacity: 1; } }
/* 2. hole hopper: out of one hole, an arc, down into the next */
.pac-seq--holes { animation: pac-holes 6s ease-in-out both; }
@keyframes pac-holes {
  0% { transform: translate(30px, 71.5px) scale(0); }
  5% { transform: translate(30px, 68px) scale(0.9); }
  10% { transform: translate(35px, 52px) rotate(-30deg) scale(0.9); }
  15% { transform: translate(42px, 55px) rotate(40deg) scale(0); }
  20% { transform: translate(42px, 51px) scale(0.9); }
  25% { transform: translate(46px, 34px) rotate(-40deg) scale(0.9); }
  30% { transform: translate(51px, 30px) rotate(40deg) scale(0); }
  35% { transform: translate(51px, 27px) scale(0.8); }
  40% { transform: translate(58px, 14px) rotate(-20deg) scale(0.8); }
  45% { transform: translate(65.5px, 24px) rotate(60deg) scale(0); }
  50% { transform: translate(65.5px, 21px) scale(0.7); }
  55% { transform: translate(71px, 32px) rotate(30deg) scale(0.9); }
  60% { transform: translate(73px, 52px) rotate(80deg) scale(0); }
  65% { transform: translate(73px, 48px) scale(0.9); }
  70% { transform: translate(80px, 54px) rotate(20deg) scale(0.9); }
  75% { transform: translate(86px, 71px) rotate(70deg) scale(0); }
  80% { transform: translate(86px, 66px) scale(1); }
  85% { transform: translate(86px, 64px) scale(1.25); }
  90% { transform: translate(86px, 66px) scale(1); }
  96%, 100% { transform: translate(86px, 71px) scale(0); }
}
/* 3. parade: mum and two babies march right to left, the babies hop */
.pac-parade { animation: pac-parade 6s linear both; }
.pac-parade--mum > g, .pac-parade__hop > g { transform: scaleX(-1); }
.pac-parade--mum { --y: 96.6px; }
.pac-parade--baby { --y: 98.4px; animation-delay: 0.45s; }
.pac-parade--baby2 { --y: 99px; animation-delay: 0.8s; }
@keyframes pac-parade { from { transform: translate(132px, var(--y)); } to { transform: translate(-20px, var(--y)); } }
.pac-parade__hop { animation: pac-hop 360ms ease-in-out infinite alternate; }
@keyframes pac-hop { to { translate: 0 -2.4px; } }

/* Shooters aim at a UFO (.aims-up; --aim and --reach tracked by intro-slot.js). */
.pop.aims-up .commando__arm { transform: translate(2px, -4px) rotate(var(--aim, -55deg)) translate(-2px, 4px); }
/* UFO hit: wobbles, beam off, falls smoking, lies crashed, fades back onto its orbit. */
.ufo__crash.is-hit { animation: ufo-crash 5.2s ease-in both; }
@keyframes ufo-crash {
  0% { transform: none; opacity: 1; }
  8% { transform: rotate(-18deg); }
  16% { transform: translateY(-3px) rotate(14deg); }
  58% { transform: translateY(116px) rotate(-200deg); }
  62%, 76% { transform: translateY(120px) rotate(-180deg) scale(1.1, 0.8); opacity: 1; }
  84% { transform: translateY(120px) rotate(-180deg); opacity: 0; }
  90% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.ufo__crash.is-hit .ufo__aim { opacity: 0; transition: opacity 0.2s; }
.ufo__smoke { opacity: 0; }
.ufo__smoke circle { fill: color-mix(in srgb, #8a8f96 70%, transparent); }
.ufo__crash.is-hit .ufo__smoke { animation: ufo-smoke 5.2s linear both; }
@keyframes ufo-smoke { 0%, 10% { opacity: 0; } 14%, 76% { opacity: 1; } 84%, 100% { opacity: 0; } }
.ufo__smoke circle { animation: smoke-puff 700ms ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ufo__smoke circle:nth-child(2) { animation-delay: -230ms; }
.ufo__smoke circle:nth-child(3) { animation-delay: -460ms; }
@keyframes smoke-puff { from { transform: scale(0.4); opacity: 1; } to { transform: translateY(-6px) scale(1.4); opacity: 0; } }
/* The mohawk guy with gold chains (A-Team homage): fires gold confetti at the bee. */
.pop--mohawk { --down: 18px; }
.mohawk__body { fill: #3b3f45; stroke: #151412; stroke-width: 0.7; }
.mohawk__head { fill: #8d5a3b; stroke: #151412; stroke-width: 0.7; }
.mohawk__hair { fill: #151412; }
.mohawk__chain { fill: none; stroke: #f2c94c; stroke-width: 0.9; stroke-linecap: round; }
.mohawk__brow { stroke: #151412; stroke-width: 0.6; stroke-linecap: round; }
.pop--mohawk .confetti-shot { fill: #f2c94c; }
.pop--mohawk .confetti-shot:nth-child(odd) { fill: #ffe9a8; }

/* Pink sprinkled donut (a nod to a famous yellow family): spins and bounces. */
.pop--donut { --down: 14px; }
.donut__dough { fill: #e2a95f; stroke: #151412; stroke-width: 0.7; }
.donut__icing { fill: #ff8fb1; stroke: #151412; stroke-width: 0.5; }
.donut__hole { fill: #f6f3ff; stroke: #151412; stroke-width: 0.6; }
.donut__sprinkle--a { fill: #1e88e5; }
.donut__sprinkle--b { fill: #fff3a3; }
.donut__sprinkle--c { fill: #43a047; }
.donut__spin { transform-box: fill-box; transform-origin: center; animation: donut-spin 1.4s cubic-bezier(.34, 1.56, .64, 1) 0.5s infinite; }
@keyframes donut-spin { 0% { transform: none; } 40% { transform: translateY(-3px) rotate(180deg); } 60%, 100% { transform: rotate(360deg); } }

/* Show «moonwalk» (chained after every chomper show): a solo. Glides in from the
   left (moonwalk: toes point left, he slides right), two quick spins, toe stand
   with a lean, hat tip, glides out to the right. */
.intro-art[data-pac="moonwalk"] .show--moonwalk { display: inline; }
.moonwalker { animation: moonwalk-solo 6s linear both; }
@keyframes moonwalk-solo {
  0% { transform: translate(-16px, 101.2px); }
  35%, 70% { transform: translate(60px, 101.2px); }
  100% { transform: translate(136px, 101.2px); }
}
.moonwalker__body { animation: moonwalk-moves 6s linear both; }
@keyframes moonwalk-moves {
  0%, 35% { transform: none; }
  37% { transform: scaleX(-1); }
  39% { transform: none; }
  41% { transform: scaleX(-1); }
  43%, 48% { transform: none; }
  52%, 60% { transform: translateY(-1.2px) skewX(-10deg) scaleY(1.06); }
  64%, 100% { transform: none; }
}
.moonwalker__leg { fill: none; stroke: #151412; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.moonwalker__leg--a { animation: moon-slide 520ms ease-in-out infinite alternate; }
.moonwalker__leg--b { animation: moon-slide 520ms ease-in-out -520ms infinite alternate; }
@keyframes moon-slide { from { transform: translateX(1.4px); } to { transform: translateX(-1.4px) skewX(-8deg); } }
.moonwalker__sock { stroke: #fffdf7; stroke-width: 1.3; }
.moonwalker__jacket { fill: #151412; stroke: #151412; stroke-width: 0.5; }
.moonwalker__arm { stroke: #151412; stroke-width: 1.3; stroke-linecap: round; }
.moonwalker__glove { fill: #fffdf7; stroke: #151412; stroke-width: 0.4; animation: glove-glint 400ms steps(2) infinite; }
@keyframes glove-glint { 50% { fill: #d6e8ff; } }
.moonwalker__face { fill: #c99a74; stroke: #151412; stroke-width: 0.4; }
.moonwalker__hat { fill: #151412; transform-box: fill-box; transform-origin: 50% 100%; animation: hat-tip 6s ease-in-out both; }
@keyframes hat-tip { 0%, 60%, 70%, 100% { transform: rotate(-8deg); } 65% { transform: rotate(-24deg) translateY(-1px); } }

/* Show «cat»: the mouse flits from the lower left hole to the lower right one; the
   cat chasing it smacks flat into the hole, sees stars and peels off. */
.mouse { animation: mouse-run 6s linear both; }
@keyframes mouse-run {
  0% { transform: translate(30px, 71.5px) scale(0); }
  6% { transform: translate(32px, 70.4px) scale(1); }
  40% { transform: translate(82px, 70.4px) scale(1); }
  45%, 100% { transform: translate(86px, 71px) scale(0); }
}
.mouse__body { fill: #a1745a; stroke: #151412; stroke-width: 0.4; }
.mouse__ear { fill: #f2b8a0; stroke: #151412; stroke-width: 0.4; }
.mouse__tail { fill: none; stroke: #151412; stroke-width: 0.5; stroke-linecap: round; }
.mouse > g { animation: pac-hop 160ms ease-in-out infinite alternate; }
.cat { animation: cat-chase 6s linear both; }
@keyframes cat-chase {
  0%, 10% { transform: translate(18px, 72.6px) scale(0); }
  14% { transform: translate(20px, 72.6px) scale(1); }
  50% { transform: translate(80px, 72.6px) scale(1); }
  80% { transform: translate(80px, 72.6px) scale(1); opacity: 1; }
  90%, 100% { transform: translate(72px, 80px) scale(1); opacity: 0; }
}
.cat__body { fill: #8e9bb0; stroke: #151412; stroke-width: 0.5; stroke-linejoin: round; }
.cat__eye-white { fill: #fffdf7; }
.cat__tail, .cat__legs, .cat__whiskers { fill: none; stroke: #151412; stroke-width: 0.6; stroke-linecap: round; }
.cat__legs { animation: legs 120ms linear infinite alternate; }
.cat__squash { transform-box: fill-box; transform-origin: 100% 100%; animation: cat-squash 6s ease-out both; }
@keyframes cat-squash { 0%, 50% { transform: none; } 52%, 72% { transform: scale(0.6, 1.25) rotate(-6deg); } 78%, 100% { transform: none; } }
.cat__stars { opacity: 0; }
.cat__stars path { fill: #f5c542; stroke: #151412; stroke-width: 0.3; }
.cat__stars { animation: cat-stars 6s step-end both; }
@keyframes cat-stars { 0% { opacity: 0; } 53% { opacity: 1; } 78% { opacity: 0; } }

/* Show «jetcar»: a red roadster with a jet engine flies an arc across the sky. */
.jetcar { animation: jetcar-fly 6s ease-in-out both; }
@keyframes jetcar-fly {
  0% { transform: translate(-24px, 0px); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translate(52px, -42px); }
  92% { opacity: 1; }
  100% { transform: translate(146px, -18px); opacity: 0; }
}
.jetcar__tilt { animation: jetcar-tilt 6s ease-in-out both; }
@keyframes jetcar-tilt { 0% { transform: rotate(-22deg); } 45% { transform: rotate(-2deg); } 100% { transform: rotate(14deg); } }
.jetcar__body { fill: #d62828; stroke: #151412; stroke-width: 0.6; stroke-linejoin: round; }
.jetcar__window { fill: #b8d8ff; stroke: #151412; stroke-width: 0.4; }
.jetcar__wheel { fill: #151412; stroke: #c9ced4; stroke-width: 0.6; }
.jetcar__nozzle { fill: #8a8f96; stroke: #151412; stroke-width: 0.4; }
.jetcar__flame { fill: #ffb703; stroke: #e53935; stroke-width: 0.5; transform-box: fill-box; transform-origin: 100% 50%; animation: jet-flame 70ms linear infinite alternate; }
@keyframes jet-flame { from { transform: scaleX(0.7); } to { transform: scaleX(1.3) scaleY(1.1); fill: #fff3a3; } }
.jetcar__smoke circle { fill: color-mix(in srgb, #b9b2a3 70%, transparent); animation: dust 400ms ease-out infinite alternate; transform-box: fill-box; transform-origin: center; }

/* Show «roadster»: a white roadster with a spacesuit dummy drifts weightless from right to left, tumbling slowly. */
.roadster { animation: roadster-drift 6s linear both; }
@keyframes roadster-drift {
  0% { transform: translate(134px, -20px); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(62px, -38px); }
  90% { opacity: 1; }
  100% { transform: translate(-16px, -26px); opacity: 0; }
}
.roadster__spin { animation: roadster-spin 6s linear both; }
@keyframes roadster-spin { from { transform: rotate(14deg); } to { transform: rotate(-56deg); } }
.roadster__body { fill: #f4f5f7; stroke: #151412; stroke-width: 0.6; stroke-linejoin: round; }
.roadster__screen { fill: none; stroke: #6fa8dc; stroke-width: 0.7; stroke-linecap: round; }
.roadster__suit, .roadster__helmet { fill: #ffffff; stroke: #151412; stroke-width: 0.4; }
.roadster__visor { fill: #d9a520; stroke: #151412; stroke-width: 0.3; }
.roadster__wheel { fill: #151412; stroke: #c9ced4; stroke-width: 0.6; }
.roadster__head-lamp { fill: #fff3a3; }
.roadster__tail-lamp { fill: #e53935; }
.roadster__stars path { fill: #fff6c7; stroke: #151412; stroke-width: 0.25; transform-box: fill-box; transform-origin: center; animation: star-twinkle 1.4s ease-in-out infinite alternate; }
.roadster__stars path:nth-child(2) { animation-delay: -0.5s; }
.roadster__stars path:nth-child(3) { animation-delay: -0.9s; }
.roadster__stars path:nth-child(4) { animation-delay: -1.2s; }
@keyframes star-twinkle { from { opacity: 0.2; transform: scale(0.5); } to { opacity: 1; transform: scale(1.1); } }

/* The solo has the stage to itself: the ground chase fades out, a spotlight follows him. */
.van, .chomper, .runner, .ground__crumbs { transition: opacity 0.5s; }
.intro-art[data-pac="moonwalk"] :is(.van, .chomper, .runner, .ground__crumbs) { opacity: 0; }
.moonwalker__spot { fill: #fff6c7; opacity: 0.45; }

/* Clumsy dog with floppy ears, buck teeth and a propeller cap: flaps its ears, wobbles, trips over backwards. */
.pop--dog { --down: 20px; }
.dog__head, .dog__ear { fill: #151412; stroke: #151412; stroke-width: 0.5; }
.dog__muzzle { fill: #e8c9a0; stroke: #151412; stroke-width: 0.5; }
.dog__nose { fill: #151412; }
.dog__tooth { fill: #fffdf7; stroke: #151412; stroke-width: 0.3; }
.dog__eye { fill: #fffdf7; stroke: #151412; stroke-width: 0.4; }
.dog__cap { fill: #43a047; stroke: #151412; stroke-width: 0.5; }
.dog__stick { stroke: #151412; stroke-width: 0.5; }
.dog__propeller { stroke: #e53935; stroke-width: 0.9; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: propeller 260ms linear infinite; }
@keyframes propeller { 50% { transform: scaleX(0.15); } }
.dog__ear { transform-box: fill-box; transform-origin: 50% 0; animation: ear-flap 300ms ease-in-out infinite alternate; }
.dog__ear--r { animation-delay: -150ms; }
@keyframes ear-flap { from { rotate: -12deg; } to { rotate: 14deg; } }
.dog__trip { transform-box: fill-box; transform-origin: 30% 100%; animation: dog-trip 4.2s ease-in-out both; }
@keyframes dog-trip {
  0%, 20% { transform: none; }
  28% { transform: rotate(8deg); }
  36% { transform: rotate(-8deg); }
  44% { transform: rotate(6deg); }
  56%, 76% { transform: rotate(-70deg) translateY(1px); }
  84%, 100% { transform: none; }
}

/* UFO laser at a popping alien; the hit alien flashes, shakes and ducks away. */
.laser { stroke: #5cff7a; stroke-width: 1.2; stroke-linecap: round; opacity: 0; pointer-events: none; }
.laser.is-red { stroke: #ff4a3d; }
.laser.is-firing { animation: laser-fire 600ms steps(6) both; filter: drop-shadow(0 0 1.5px currentColor); }
@keyframes laser-fire { 0%, 34%, 68% { opacity: 1; } 17%, 51%, 85%, 100% { opacity: 0; } }
.pop.is-zapped { animation: pop-zapped 900ms ease-in both; }
@keyframes pop-zapped {
  0% { transform: translateY(0); filter: brightness(2.2); }
  15% { transform: translate(-1px, 0); }
  30% { transform: translate(1px, 0); filter: brightness(1); }
  45% { transform: translate(-1px, 0); }
  100% { transform: translateY(var(--down, 16px)); }
}