:root {
  --cream: #f4edff;
  --paper: #fff8ee;
  --ink: #262039;
  --coral: #ed334c;
  --coral-dark: #ad233f;
  --teal: #354bd5;
  --teal-dark: #2435a2;
  --yellow: #ffcf45;
  --pink: #f7a1b5;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 280px;
  background: var(--cream);
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgb(255 255 255 / 70%) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgb(200 63 76 / 5%) 0 1px, transparent 2px),
    var(--cream);
  background-size: 31px 31px, 23px 23px, auto;
  color: var(--ink);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  display: block;
  width: 22rem;
  aspect-ratio: 1;
  border-radius: 46% 54% 66% 34% / 42% 38% 62% 58%;
  opacity: .2;
}

.blob-one {
  top: -9rem;
  left: -7rem;
  background: var(--pink);
  transform: rotate(22deg);
}

.blob-two {
  right: -8rem;
  bottom: -9rem;
  background: var(--teal);
  transform: rotate(-18deg);
}

.doodle {
  position: absolute;
  color: var(--coral);
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1;
  opacity: .32;
  animation: doodle-float 5s ease-in-out infinite;
}

.doodle-one {
  top: 19%;
  left: 5%;
  transform: rotate(-15deg);
}

.doodle-two {
  top: 12%;
  right: 8%;
  color: var(--teal);
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  animation-delay: -1.8s;
}

.doodle-three {
  right: 4%;
  bottom: 16%;
  color: #e7a83d;
  animation-delay: -3.2s;
}

.carnival {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: 12px;
  place-items: center;
  isolation: isolate;
}

.scene-wrap {
  position: relative;
  width: min(96vw, 1020px, calc((100svh - 24px) * 1.1842));
  min-width: 0;
}

.scene-wrap::before {
  position: absolute;
  inset: 10% 7% 8%;
  z-index: -1;
  border: 2px solid rgb(52 49 79 / 7%);
  border-radius: 48% 52% 45% 55% / 54% 44% 56% 46%;
  content: "";
  transform: rotate(-3deg);
}

#scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: manipulation;
  user-select: none;
}

.scene-stars {
  transform-box: fill-box;
  transform-origin: center;
  animation: star-breathe 4s ease-in-out infinite;
}

.marquee-lights circle {
  animation: bulb-glow 1.8s ease-in-out infinite alternate;
}

.marquee-lights circle:nth-child(2n) {
  animation-delay: -.9s;
}

.stage {
  transform-box: fill-box;
  transform-origin: center bottom;
}

#clown {
  cursor: pointer;
  outline: none;
  transform-box: fill-box;
  transform-origin: center 80%;
  -webkit-tap-highlight-color: transparent;
}

#clown:hover .focus-ring {
  stroke: rgb(52 49 79 / 18%);
}

#clown:focus-visible .focus-ring {
  stroke: var(--ink);
  stroke-width: 4;
}

#left-arm,
#right-arm {
  transition: transform 140ms ease-out;
}

#left-pupil,
#right-pupil {
  transition: transform 90ms ease-out;
}

#clown.is-spinning {
  animation: clown-spin .85s cubic-bezier(.34, .02, .2, 1);
}

.juggling-ball {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.juggling-ball > .fruit-body {
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke-width 120ms ease, filter 120ms ease;
}

.juggling-ball:hover > .fruit-body {
  filter: brightness(1.08);
  stroke-width: 6;
}

.juggling-ball:focus-visible > .fruit-body {
  stroke: var(--paper);
  stroke-width: 7;
  filter: drop-shadow(0 0 3px var(--ink));
}

.juggling-ball.is-boosted > .fruit-body {
  animation: ball-squish .38s ease-out;
}

.controls {
  position: fixed;
  z-index: 10;
  top: max(1.25rem, env(safe-area-inset-top));
  right: max(1.25rem, env(safe-area-inset-right));
  display: flex;
  gap: .7rem;
}

.round-control {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  place-items: center;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.round-control svg {
  width: 1.55rem;
  height: 1.55rem;
  overflow: visible;
  fill: currentColor;
}

.round-control:hover {
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(2px, 2px) rotate(-4deg);
}

.round-control:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(4px, 4px) scale(.96);
}

.round-control:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}

.tiktok-link {
  background: var(--coral);
  color: var(--paper);
}

#motion-toggle {
  background: var(--yellow);
}

#play-icon {
  display: none;
}

.is-paused #play-icon {
  display: block;
}

.is-paused #pause-icon {
  display: none;
}

.is-paused .scene-stars,
.is-paused .marquee-lights circle,
.is-paused .play-hint,
.is-paused .doodle {
  animation-play-state: paused;
}

.play-hint {
  position: fixed;
  z-index: 4;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  width: 4.7rem;
  height: 2.9rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgb(255 249 236 / 88%);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--coral);
  pointer-events: none;
  transform: translateX(-50%) rotate(-3deg);
  animation: hint-bob 2.2s ease-in-out infinite;
}

.play-hint svg {
  width: 1.65rem;
  height: 1.65rem;
  fill: var(--ink);
}

.play-hint span {
  margin: -.8rem 0 0 -.15rem;
  color: var(--coral);
  font-size: 1.3rem;
}

.confetti,
.star-pop {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  display: block;
  width: var(--size, 10px);
  height: calc(var(--size, 10px) * 1.45);
  border-radius: 3px;
  background: var(--particle-color);
  pointer-events: none;
  animation: confetti-pop var(--duration, 900ms) cubic-bezier(.1, .65, .35, 1) forwards;
  will-change: transform, opacity;
}

.star-pop {
  height: var(--size, 10px);
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 64% 62%, 50% 100%, 36% 64%, 0 50%, 35% 37%);
  border-radius: 0;
}

@keyframes clown-spin {
  0% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-8deg) scale(.96, 1.04); }
  58% { transform: rotate(365deg) scale(1.04, .97); }
  82% { transform: rotate(355deg) scale(.98, 1.02); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes ball-squish {
  0% { transform: scale(1); }
  35% { transform: scale(1.22, .8); }
  68% { transform: scale(.9, 1.12); }
  100% { transform: scale(1); }
}

@keyframes bulb-glow {
  from { fill: #fff9d9; filter: drop-shadow(0 0 0 rgb(255 209 102 / 0%)); }
  to { fill: #fff; filter: drop-shadow(0 0 5px rgb(255 209 102 / 85%)); }
}

@keyframes star-breathe {
  0%, 100% { opacity: .75; transform: scale(.98) rotate(-1deg); }
  50% { opacity: 1; transform: scale(1.02) rotate(1deg); }
}

@keyframes doodle-float {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  50% { translate: 0 -12px; rotate: 5deg; }
}

@keyframes hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  50% { transform: translateX(-50%) translateY(-6px) rotate(2deg); }
}

@keyframes confetti-pop {
  0% {
    opacity: 1;
    transform: translate(calc(var(--particle-x) - 50%), calc(var(--particle-y) - 50%)) scale(.35) rotate(0);
  }
  65% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(var(--particle-x) + var(--move-x)), calc(var(--particle-y) + var(--move-y))) scale(1) rotate(var(--rotation));
  }
}

@media (max-width: 600px) {
  .carnival { padding: 8px; }
  .scene-wrap { width: min(100%, calc((100svh - 16px) * 1.1842)); }
  .controls {
    top: max(.8rem, env(safe-area-inset-top));
    right: max(.8rem, env(safe-area-inset-right));
    gap: .55rem;
  }
  .round-control { width: 3rem; height: 3rem; box-shadow: 3px 3px 0 var(--ink); }
  .round-control svg { width: 1.35rem; height: 1.35rem; }
  .play-hint { bottom: max(.85rem, env(safe-area-inset-bottom)); }
  .blob { width: 15rem; }
  .doodle-one { left: 2%; }
  .doodle-two { right: 3%; top: 20%; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .play-hint { left: auto; right: 1rem; transform: none; }
  .play-hint { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .confetti,
  .star-pop { display: none; }
}

/* Digital circus palette and checkerboard dream stage. */
body {
  background: radial-gradient(ellipse at 50% 42%, #fff8ee 0%, #f1e9ff 54%, #d8d5f5 100%);
}
.scene-wrap::before { border-color: rgb(53 75 213 / 12%); }
.backdrop { z-index: 0; }
.blob { opacity: .12; }
.blob-one { background: #ed334c; }
.blob-two { background: #354bd5; }
.red-sleeve path:first-child { fill: #ed334c; }
.blue-shoe { fill: #354bd5; }
.hair { filter: drop-shadow(0 3px 0 #211b30); }
#clown > ellipse:nth-child(2) { opacity: .12; }
.play-hint { background: #fff8ee; }

:root { --ink:#302b49; --coral:#7560a8; --teal:#86cbb8; --yellow:#f4d6a0; --paper:#fff8ee; }
body { background: radial-gradient(ellipse at 50% 42%, #fffaf2, #eee7f6 60%, #e0d8ed); }
.blob-one { background:#b6a0d4; } .blob-two { background:#86cbb8; }
.red-sleeve path:first-child { fill:#7560a8; }
.hair { filter:none; }
#scene path, #scene ellipse, #scene circle { stroke-linejoin:round; }