/* THE GOD TERMINAL — comedy-command shows (js/shows-commands.js).
 * Every show renders inside its own .cmd root on #stage. Colours come from palette tokens; the only
 * literal colours are food (pizza), mirror-ball chrome and the black of a powered-off tube. */

/* ───────── shared ───────── */
.cmd {
  --hero: clamp(3.5rem, 9.5vw, 9rem);
  --font-emoji: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-display);
  color: var(--text-bright);
}
/* The show manager dims the stage behind every show (.show::before). Busy keeps the typing in view
 * and exit brings its own black; the pizza lifts the dim as the slice dives into the terminal. */
.show-busy::before, .show-exit::before { content: none; }
.show.cmd-undim::before { opacity: 0; transition: opacity 320ms ease-out; }

@media (max-width: 599px) {
  /* Phones stack the words, so each one can be much bigger. */
  .cmd { --hero: clamp(3.5rem, 16vw, 9rem); }
}

.cmd-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 72% 62% at 50% 50%,
    color-mix(in srgb, var(--bg) 86%, transparent),
    color-mix(in srgb, var(--bg) 58%, transparent) 72%,
    color-mix(in srgb, var(--bg) 46%, transparent));
  animation: cmd-fade 260ms ease-out both;
}
.cmd-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2.4vh, 1.75rem);
  max-width: 100%;
  padding: 0 1rem;
}

/* Oversized glowing display text, split into letters for staggered motion. */
.cmd-text {
  position: relative;
  max-width: min(94vw, 78rem);
  font-family: var(--font-display);
  font-size: var(--hero);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.035em;
  text-align: center;
  color: var(--text-bright);
  text-shadow:
    0 0 calc(3px + 8px * var(--glow-k)) var(--glow),
    0 0 calc(34px * var(--glow-k)) var(--glow),
    0 0 calc(90px * var(--glow-k)) color-mix(in srgb, var(--accent) 45%, transparent);
}
.cmd-word { position: relative; display: inline-block; white-space: nowrap; }
.cmd-ch { display: inline-block; }
.cmd-pop .cmd-ch {
  animation: cmd-pop 560ms cubic-bezier(.2, 1.5, .45, 1) both;
  animation-delay: calc(var(--i) * var(--stagger, 34ms));
}
.cmd-hero { font-size: var(--hero); }

/* Secondary line: mono, never small. */
.cmd-sub {
  min-height: 1.5em;
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--text);
  text-shadow: var(--text-glow);
}
.cmd-ghost { visibility: hidden; }
.cmd-caret { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: baseline; }
.cmd-caret::before {
  content: '';
  position: absolute;
  left: 0.08em;
  bottom: 0.08em;
  width: 0.5em;
  height: 0.09em;
  background: currentColor;
  animation: cmd-blink 1s steps(1) infinite;
}

/* Celebration backdrop: slow sunburst + one white bloom. */
.cmd-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130vmax;
  height: 130vmax;
  margin: -65vmax 0 0 -65vmax;
  background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 24%, transparent) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.55) 18%, transparent 50%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.55) 18%, transparent 50%);
  animation: cmd-fade 600ms ease-out both, cmd-spin 28s linear infinite;
}
.cmd-flare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84vmin;
  height: 84vmin;
  margin: -42vmin 0 0 -42vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6), color-mix(in srgb, var(--accent) 32%, transparent) 30%, transparent 68%);
  animation: cmd-flare 1100ms cubic-bezier(.2, .8, .3, 1) both;
}

/* Paper confetti shower (DOM). */
.cmd-paper { position: absolute; inset: 0; perspective: 700px; }
.cmd-paper i { position: absolute; top: 0; aspect-ratio: 1.9; border-radius: 1px; opacity: 0.95; }

/* ───────── pizza ───────── */
.cmd-pizza { --pz: clamp(14rem, 46vmin, 27rem); gap: clamp(0.5rem, 2.5vh, 1.75rem); }
.cmd-pz {
  position: relative;
  flex: none;
  width: var(--pz);
  height: var(--pz);
  animation: cmd-pz-in 560ms cubic-bezier(.2, 1.35, .4, 1) both;
}
.cmd-pz > div { position: absolute; inset: 0; }
.cmd-pz svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cmd-pz-dial { filter: drop-shadow(0 0 calc(2px + 8px * var(--glow-k)) var(--glow)); }
.cmd-pz-track { fill: color-mix(in srgb, var(--panel-strong) 75%, transparent); stroke: var(--line); stroke-width: 3; }
.cmd-pz-ring { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.cmd-tick { stroke: var(--line-bright); stroke-width: 1.5; opacity: 0.55; }
.cmd-tick--major { stroke-width: 3; opacity: 1; }
.cmd-pz-pulse { animation: cmd-pulse 1s ease-in-out infinite; }
.cmd-pz-spin { animation: cmd-spin 1s linear infinite; }
/* Glow only (no offset), so the halo stays put while the slice spins. */
.cmd-pz-spin svg { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(255, 176, 64, 0.45)); }
.cmd-pz-orbit { animation: cmd-spin 2.8s linear infinite reverse; }
.cmd-pz-orbit i {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -0.6em 0 0 -0.4em;
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2.4vmin, 1.6rem);
  font-style: normal;
  line-height: 1.2;
  color: var(--accent-3);
  text-shadow: 0 0 8px var(--accent-3), 0 0 18px var(--accent);
  transform: rotate(var(--a)) translateY(calc(var(--pz) * -0.53));
}
.cmd-pz-orbit i:nth-child(1) { --a: 20deg; }
.cmd-pz-orbit i:nth-child(2) { --a: 140deg; font-size: clamp(0.9rem, 1.8vmin, 1.2rem); }
.cmd-pz-orbit i:nth-child(3) { --a: 260deg; }
.cmd-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
/* Small enough on phones that the hanging ellipsis still fits beside the centred title. */
.cmd-pz-title { font-size: clamp(3rem, 7.5vw, 6.5rem); }
.cmd-dots { position: absolute; left: 100%; bottom: 0; }
.cmd-dots i { display: inline-block; font-style: normal; animation: cmd-dot 900ms ease-in-out infinite; }
.cmd-dots i:nth-child(2) { animation-delay: 150ms; }
.cmd-dots i:nth-child(3) { animation-delay: 300ms; }

/* The delivered ASCII pizza (appended to the terminal with this class) prints a size up from
 * ordinary art; the typer's fit-to-width rule still applies, so it never overflows the panel. */
#main .ty-art.cmd-pizza-art {
  font-size: min(1.45em, calc((100cqw - var(--ty-gutter) - 2.5rem) / (var(--cols, 40) * 0.6)));
  line-height: 1.08;
}

/* ───────── confetti: film-leader countdown ───────── */
.cmd-cd {
  --cd: var(--text-bright);
  --cd-size: min(80vmin, 34rem);
  position: absolute;
  inset: 0;
  width: var(--cd-size);
  height: var(--cd-size);
  margin: auto;
}
.cmd-cd[data-n="3"] { --cd: var(--accent); }
.cmd-cd[data-n="2"] { --cd: var(--accent-3); }
.cmd-cd[data-n="1"] { --cd: var(--warn); }
.cmd-cd-shake { position: absolute; inset: 0; }
.cmd-cd svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cmd-cd-face { fill: color-mix(in srgb, var(--panel-strong) 72%, transparent); }
.cmd-cd-sweep {
  fill: none;
  stroke: color-mix(in srgb, var(--cd) 24%, transparent);
  stroke-width: 92;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke 200ms;
}
.cmd-cd-cross { stroke: var(--line); stroke-width: 0.8; }
.cmd-cd-ring { fill: none; stroke: var(--cd); stroke-width: 1.6; transition: stroke 200ms; }
.cmd-cd-ring--inner { stroke: var(--line-bright); stroke-width: 0.9; opacity: 0.7; }
.cmd-cd .cmd-tick { stroke: var(--cd); stroke-width: 0.9; }
.cmd-cd .cmd-tick--major { stroke-width: 1.8; }
.cmd-cd-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 0.04em;
  font-size: calc(var(--cd-size) * 0.84);
  line-height: 1;
  color: var(--text-bright);
  text-shadow: 0 0 calc(4px + 10px * var(--glow-k)) var(--cd), 0 0 calc(60px * var(--glow-k)) var(--cd);
}
/* The last three counts tear into red/cyan, like the retro wobble. */
.cmd-cd.is-split .cmd-cd-num {
  text-shadow: -0.035em 0 rgba(255, 36, 84, 0.8), 0.035em 0 rgba(30, 230, 255, 0.8), 0 0 calc(60px * var(--glow-k)) var(--cd);
}

/* ───────── busy: task cards ─────────
 * The cards stack like notifications at the side (the bottom on phones), so the code pouring into
 * the terminal stays in view; a soft shade behind them keeps the cards crisp. */
.cmd-busy { align-items: flex-end; padding: 0 clamp(1rem, 3.5vw, 4rem); }
.cmd-busy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, color-mix(in srgb, var(--bg) 78%, transparent), transparent 52%);
  animation: cmd-fade 300ms ease-out both;
}
.cmd-busy-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(92vw, 34rem);
  animation: cmd-slide 340ms cubic-bezier(.2, 1.3, .4, 1) both;
}
@media (max-width: 599px) {
  .cmd-busy { align-items: center; justify-content: flex-end; padding-bottom: 4.25rem; }
  .cmd-busy::before { background: linear-gradient(to top, color-mix(in srgb, var(--bg) 82%, transparent), transparent 58%); }
}
.cmd-busy-hud { display: flex; flex-direction: column; gap: 0.45rem; }
.cmd-busy-row { display: flex; align-items: baseline; justify-content: space-between; }
.cmd-busy-row .label { font-size: 0.85rem; color: var(--text); }
.cmd-busy-count {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}
.cmd-meter { width: 100%; min-height: 0.75rem; }
.cmd-cards { position: relative; height: 16rem; }
.cmd-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.1rem);
  padding: clamp(0.7rem, 1.6vh, 1rem) clamp(0.8rem, 2vw, 1.2rem);
  /* Opaque, so whatever sits behind never bleeds through; older cards recede by dimming. */
  background: linear-gradient(var(--panel-strong), var(--panel-strong)), var(--bg);
  transform: translateY(calc(var(--depth, 0) * (100% + 0.6rem))) scale(calc(1 - var(--depth, 0) * 0.045));
  filter: brightness(calc(1 - var(--depth, 0) * 0.28));
  transition: transform 300ms cubic-bezier(.2, 1.3, .4, 1), filter 300ms ease-out, opacity 300ms ease-out, border-color 200ms;
}
.cmd-card.is-gone { opacity: 0; transform: translateY(calc(300% + 1.8rem)) scale(0.85); }
.cmd-card.is-done { border-color: var(--line-bright); animation: cmd-card-done 460ms ease-out; }
.cmd-card-icon { flex: none; font-family: var(--font-emoji); font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; }
.cmd-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cmd-card-title {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}
.cmd-card-bar { height: 0.5rem; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--line) 70%, transparent); }
.cmd-card-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
}
.cmd-card-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: transparent;
  transition: background-color 120ms, border-color 120ms, color 120ms, box-shadow 200ms;
}
.cmd-card.is-done .cmd-card-check {
  border-color: var(--good);
  background: var(--good);
  color: var(--bg);
  box-shadow: 0 0 18px var(--good);
}

/* ───────── dance: disco ───────── */
.cmd-dance { --ball: clamp(5.5rem, 14vmin, 9rem); --ball-y: calc(5vh + var(--ball) / 2); }
.cmd-beams {
  position: absolute;
  left: 50%;
  top: var(--ball-y);
  animation: cmd-fade 700ms ease-out both;
}
.cmd-spots { position: absolute; left: 50%; top: var(--ball-y); animation: cmd-fade 900ms 250ms ease-out both; }
.cmd-spots i {
  position: absolute;
  left: calc(var(--sz) / -2);
  top: calc(var(--sz) / -2);
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 22%, color-mix(in srgb, var(--c) 70%, transparent) 42%, transparent 70%);
  opacity: 0.7;
  transform: rotate(var(--a)) translateX(var(--r));
  animation: cmd-orbit 9s linear infinite;
}
.cmd-beams i {
  position: absolute;
  left: -12vmin;
  top: 0;
  width: 24vmin;
  height: 160vh;
  background: linear-gradient(to bottom, var(--c), transparent 82%);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  opacity: 0.2;
  transform-origin: 50% 0;
  animation: cmd-beam 2.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--b) * -0.43s);
  transition: opacity 300ms;
}
.cmd-dance.is-drop .cmd-beams i { opacity: 0.32; }
.cmd-ball {
  position: absolute;
  left: 50%;
  top: 5vh;
  width: var(--ball);
  height: var(--ball);
  margin-left: calc(var(--ball) / -2);
  filter: drop-shadow(0 0 calc(6px + 14px * var(--glow-k)) color-mix(in srgb, var(--accent) 55%, transparent));
}
.cmd-ball::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 97%;
  width: 2px;
  height: 60vh;
  margin-left: -1px;
  background: linear-gradient(to top, var(--line-bright), transparent);
}
.cmd-ball canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* Rainbow phrase: letters bounce in a wave (squash at the bottom) while hues cycle along it. */
/* Taller lines than other titles: the bounce must never let a wrapped line hit the one above. */
.cmd-rainbow { --rb-s: 100%; --rb-l: 70%; line-height: 1.12; text-shadow: none; }
html[data-palette="lavender"] .cmd-rainbow { --rb-s: 78%; --rb-l: 76%; }
html[data-palette="midnight"] .cmd-rainbow { --rb-s: 52%; --rb-l: 72%; }
.cmd-rainbow .cmd-ch {
  transform-origin: 50% 100%;
  text-shadow: 0 0 calc(4px + 10px * var(--glow-k)) currentColor, 0 0 calc(40px * var(--glow-k)) currentColor;
  animation:
    cmd-pop 560ms cubic-bezier(.2, 1.5, .45, 1) both,
    cmd-bounce 400ms ease-in-out infinite,
    cmd-hue 1.4s linear infinite;
  animation-delay: calc(var(--i) * 34ms), calc(var(--i) * 34ms + 560ms), calc(var(--i) * -80ms);
}

/* ───────── oops ───────── */
.cmd-oops .cmd-text { max-width: min(94vw, 60rem); }
.cmd-oops-title .cmd-ch {
  text-shadow:
    -0.045em 0 rgba(255, 36, 84, 0.75),
    0.045em 0 rgba(30, 230, 255, 0.7),
    0 0 calc(6px + 14px * var(--glow-k)) var(--glow),
    0 0 calc(60px * var(--glow-k)) color-mix(in srgb, var(--accent) 55%, transparent);
  animation: cmd-jiggle var(--jd, 0.3s) ease-in-out var(--jdel, 0s) infinite alternate;
}
.cmd-oops .cmd-sub { letter-spacing: 0.08em; font-size: clamp(1.15rem, 2vw, 1.6rem); }

/* ───────── ducks ───────── */
.cmd-ducks { justify-content: flex-start; }
.cmd-pond { position: absolute; inset: 0; }
.cmd-pond::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: radial-gradient(ellipse 80% 75% at 50% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%);
}
.cmd-duck { position: absolute; left: 0; margin: -1em 0 0 -0.5em; line-height: 1; font-family: var(--font-emoji); }
.cmd-duck-bob {
  display: inline-block;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 0.08em 0.06em rgba(0, 0, 0, 0.55));
  animation: cmd-hatch 380ms cubic-bezier(.2, 1.6, .4, 1) both, cmd-waddle var(--wd, 0.4s) ease-in-out 380ms infinite alternate;
}
.cmd-ducks.is-stopped .cmd-duck-bob { animation: cmd-hop 380ms cubic-bezier(.2, 1.4, .4, 1) both; }
.cmd-duck-head {
  position: relative;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: min(90vw, 40rem);
  margin-top: clamp(3.75rem, 11vh, 7rem);
  animation: cmd-rise 360ms cubic-bezier(.2, 1.3, .4, 1) both;
}
.cmd-duck-head .label { font-size: 0.9rem; color: var(--text); }
.cmd-duck-count {
  display: inline-block;
  font-size: clamp(4.25rem, 14vw, 10.5rem);
  line-height: 0.9;
  color: var(--text-bright);
  text-shadow: 0 0 calc(3px + 8px * var(--glow-k)) var(--glow), 0 0 calc(40px * var(--glow-k)) var(--glow);
  transition: color 200ms;
}
.cmd-duck-count.is-max { color: var(--warn); text-shadow: 0 0 0.08em var(--warn), 0 0 calc(50px * var(--glow-k)) var(--warn); }
.cmd-duck-head .cmd-meter { margin-top: 0.4rem; }
.cmd-center--low { position: absolute; left: 0; right: 0; top: 64%; z-index: 300; }
.cmd-stamp {
  padding: 0.06em 0.32em 0;
  border: 0.07em solid var(--bad);
  border-radius: 0.12em;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 10vw, 8rem);
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--bad);
  text-shadow: 0 0 calc(4px + 20px * var(--glow-k)) var(--bad);
  box-shadow: 0 0 calc(10px + 24px * var(--glow-k)) color-mix(in srgb, var(--bad) 55%, transparent),
    inset 0 0 calc(8px + 18px * var(--glow-k)) color-mix(in srgb, var(--bad) 40%, transparent);
}

/* ───────── ta-da ───────── */
.cmd-tada-row { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(0.25rem, 3vw, 3rem); }
.cmd-tada-title { --stagger: 70ms; font-size: clamp(5.5rem, 21vw, 16rem); line-height: 0.85; }
/* Each letter lit in its own palette accent (lifted toward white so it stays bright in every
 * palette); a white shine runs along the letters twice once they've landed. */
.cmd-tada-title .cmd-ch {
  --c: var(--accent);
  color: color-mix(in srgb, var(--c) 45%, #fff);
  text-shadow:
    0 0 0.03em #fff,
    0 0 calc(0.08em + 0.1em * var(--glow-k)) var(--c),
    0 0 calc(0.45em * var(--glow-k)) color-mix(in srgb, var(--c) 55%, transparent);
  animation:
    cmd-pop 560ms cubic-bezier(.2, 1.5, .45, 1) both,
    cmd-shine 520ms ease-in-out 2;
  animation-delay: calc(var(--i) * 70ms), calc(700ms + var(--i) * 55ms);
}
.cmd-tada-title .cmd-ch:nth-child(3n + 2) { --c: var(--accent-2); }
.cmd-tada-title .cmd-ch:nth-child(3n) { --c: var(--accent-3); }
.cmd-hand { display: inline-block; font-family: var(--font-emoji); font-size: clamp(3rem, 10vw, 8rem); line-height: 1; }
.cmd-hand--left { scale: -1 1; }
.cmd-hand-shake {
  display: inline-block;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 0 calc(6px + 10px * var(--glow-k)) var(--glow));
  animation: cmd-jazz 110ms ease-in-out infinite alternate;
}
.cmd-twinkles { position: absolute; inset: 6% 4%; }
.cmd-twinkles i {
  position: absolute;
  font-family: var(--font-mono);
  font-style: normal;
  line-height: 1;
  color: var(--accent-3);
  text-shadow: 0 0 8px var(--accent-3), 0 0 22px var(--accent);
  animation: cmd-twinkle var(--td, 1s) ease-in-out var(--tdel, 0s) infinite;
}

/* ───────── exit: CRT power-off ───────── */
.cmd-black { position: absolute; inset: 0; background: #000; opacity: 0; }
.cmd-exit.is-black .cmd-black { opacity: 1; transition: opacity 50ms linear; }
.cmd-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 18px var(--text-bright), 0 0 42px var(--glow);
  opacity: 0;
}
.cmd-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 34%, color-mix(in srgb, var(--text-bright) 80%, transparent) 52%, transparent 74%);
  box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.55), 0 0 60px 18px color-mix(in srgb, var(--text) 45%, transparent);
  opacity: 0;
}
.cmd-bye {
  position: relative;
  max-width: 94vw;
  padding: 0 1rem;
  font-size: clamp(3rem, 3.6vw, 4.25rem);
  line-height: 1.1;
  text-align: center;
  color: var(--warn);
  text-shadow: 0 0 calc(4px + 10px * var(--glow-k)) color-mix(in srgb, var(--warn) 70%, transparent);
  opacity: 0;
}
.cmd-bye.is-on { opacity: 1; }
.cmd-bye-2 { display: inline-block; margin-top: 0.35em; color: var(--text-bright); text-shadow: 0 0 calc(4px + 10px * var(--glow-k)) var(--glow); }

/* ───────── keyframes ───────── */
@keyframes cmd-fade { from { opacity: 0; } }
@keyframes cmd-spin { to { transform: rotate(360deg); } }
@keyframes cmd-blink { 50% { opacity: 0; } }
@keyframes cmd-pop {
  from { opacity: 0; transform: translateY(0.4em) scale(0.25); }
  45% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes cmd-rise { from { opacity: 0; transform: translateY(-1.5rem) scale(0.94); } }
@keyframes cmd-slide { from { opacity: 0; transform: translateX(3rem) scale(0.96); } }
@keyframes cmd-flare {
  from { opacity: 0; transform: scale(0.25); }
  18% { opacity: 1; }
  to { opacity: 0.32; transform: scale(1.15); }
}
@keyframes cmd-pz-in { from { opacity: 0; transform: scale(0.4) rotate(-50deg); } }
@keyframes cmd-pulse { 0%, 100% { transform: scale(0.95); } 50% { transform: scale(1.05); } }
@keyframes cmd-dot { 0%, 100% { opacity: 0.2; transform: none; } 40% { opacity: 1; transform: translateY(-0.12em); } }
@keyframes cmd-card-done {
  from {
    background-color: color-mix(in srgb, #fff 35%, var(--panel-strong));
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 44px var(--glow);
  }
}
@keyframes cmd-orbit {
  from { transform: rotate(var(--a)) translateX(var(--r)); }
  to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)); }
}
@keyframes cmd-beam { from { transform: rotate(var(--from)); } to { transform: rotate(var(--to)); } }
@keyframes cmd-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.1) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(90deg); }
}
@keyframes cmd-bounce {
  0%, 100% { transform: translateY(0) scale(1.08, 0.9); }
  30% { transform: translateY(-0.2em) scale(0.95, 1.07); }
  50% { transform: translateY(-0.27em) scale(1, 1); }
  75% { transform: translateY(-0.1em) scale(0.97, 1.04); }
}
@keyframes cmd-hue {
  0% { color: hsl(0 var(--rb-s) var(--rb-l)); }
  16.66% { color: hsl(60 var(--rb-s) var(--rb-l)); }
  33.33% { color: hsl(120 var(--rb-s) var(--rb-l)); }
  50% { color: hsl(180 var(--rb-s) var(--rb-l)); }
  66.66% { color: hsl(240 var(--rb-s) var(--rb-l)); }
  83.33% { color: hsl(300 var(--rb-s) var(--rb-l)); }
  100% { color: hsl(360 var(--rb-s) var(--rb-l)); }
}
@keyframes cmd-jiggle {
  from { transform: rotate(calc(var(--jr, 5deg) * -1)) translateY(-0.03em); }
  to { transform: rotate(var(--jr, 5deg)) translateY(0.04em); }
}
@keyframes cmd-hatch { from { transform: scale(0); } 60% { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes cmd-waddle {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg) translateY(-0.08em); }
}
@keyframes cmd-hop {
  from { transform: none; }
  40% { transform: translateY(-0.5em) scale(0.92, 1.1); }
  to { transform: none; }
}
@keyframes cmd-shine {
  45% {
    color: #fff;
    text-shadow: 0 0 0.04em #fff, 0 0 0.16em var(--text-bright), 0 0 0.45em var(--accent);
  }
}
@keyframes cmd-jazz { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }

/* ───────── reduced motion: no shakes, bounces, jiggles or strobes; fades and colour stay ───────── */
html[data-reduced-motion="on"] .cmd-pop .cmd-ch { animation: cmd-fade 360ms ease-out both; animation-delay: calc(var(--i) * 12ms); }
html[data-reduced-motion="on"] .cmd-rainbow .cmd-ch { animation: cmd-fade 360ms ease-out both, cmd-hue 2.8s linear infinite; }
html[data-reduced-motion="on"] .cmd-oops-title .cmd-ch,
html[data-reduced-motion="on"] .cmd-hand-shake,
html[data-reduced-motion="on"] .cmd-pz-pulse,
html[data-reduced-motion="on"] .cmd-ducks.is-stopped .cmd-duck-bob { animation: none; }
html[data-reduced-motion="on"] .cmd-duck-bob { animation: cmd-fade 300ms both; }
html[data-reduced-motion="on"] .cmd-rays { animation: cmd-fade 600ms ease-out both; }
html[data-reduced-motion="on"] .cmd-flare { animation: cmd-fade 600ms ease-out both; opacity: 0.3; }
html[data-reduced-motion="on"] .cmd-beams i { animation: none; transform: rotate(calc((var(--b) - 3) * 14deg)); }
html[data-reduced-motion="on"] .cmd-spots i { animation: none; }
html[data-reduced-motion="on"] .cmd-twinkles i { animation-duration: 2.4s; }
html[data-reduced-motion="on"] .cmd-pz,
html[data-reduced-motion="on"] .cmd-busy-col,
html[data-reduced-motion="on"] .cmd-duck-head { animation: cmd-fade 300ms ease-out both; }