/* ---------- Zoey's Drum Beat: a K-pop concert stage ---------- */
.zd-area { display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 110%, #ff4fd866, transparent 55%), linear-gradient(180deg, #12082e, #2a0f5c 50%, #4a1675); box-shadow: inset 0 0 0 4px #ffffff22; }
.zd-defs { position: absolute; width: 0; height: 0; }
/* A truss of coloured lights along the top. */
.zd-lights { position: absolute; left: 4%; right: 4%; top: 10px; height: 18px; display: flex; justify-content: space-between; pointer-events: none;
  border-top: 5px solid #5a4a8a; }
.zd-lights i { width: 18px; height: 18px; border-radius: 0 0 9px 9px; background: hsl(calc(var(--i) * 40deg) 95% 65%);
  box-shadow: 0 6px 22px 4px hsl(calc(var(--i) * 40deg) 95% 60%); animation: zd-blink 1.2s steps(1) calc(var(--i) * -.3s) infinite; }
.zd-beam { position: absolute; top: 18px; left: 20%; width: 160px; height: 110%; transform-origin: 50% 0; translate: -50% 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, #ff4fd877, transparent 80%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); animation: zd-sweep 5s ease-in-out infinite alternate; }
.zd-beam.two { left: 50%; background: linear-gradient(180deg, #2fd8ff66, transparent 80%); animation-duration: 6.5s; animation-direction: alternate-reverse; }
.zd-beam.three { left: 80%; background: linear-gradient(180deg, #ffe03a55, transparent 80%); animation-delay: -2.5s; }
/* Speaker stacks at the sides, cones thumping. */
.zd-speaker { position: absolute; z-index: 1; left: 1.5%; bottom: 21%; width: clamp(44px, 7vw, 80px); aspect-ratio: .62; border-radius: 10px; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, #555 0 18%, #222 19% 27%, transparent 28%), radial-gradient(circle at 50% 72%, #555 0 26%, #222 27% 36%, transparent 37%), linear-gradient(180deg, #2b2440, #17122a);
  box-shadow: 0 0 0 3px #4a3f6e, 0 10px 18px #0006; animation: zd-thump .5s ease-in-out infinite; }
.zd-speaker.zd-r { left: auto; right: 1.5%; animation-delay: -.25s; }
.zd-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none;
  background: repeating-linear-gradient(90deg, #ff4fd822 0 2px, transparent 2px 60px), linear-gradient(180deg, #3a1a6e, #1a0b33);
  box-shadow: inset 0 6px 30px #ff4fd888, 0 -3px 0 #ff9fe0; }
/* The crowd: heads with waving lightsticks. */
.zd-crowd { position: absolute; left: 0; right: 0; bottom: -6px; height: 13%; display: flex; justify-content: space-around; align-items: flex-end; pointer-events: none; z-index: 1; }
.zd-crowd span { position: relative; width: clamp(30px, 5vw, 56px); aspect-ratio: 1; border-radius: 50% 50% 30% 30%; background: #0e0624; translate: 0 var(--h); }
.zd-crowd span i { position: absolute; left: 70%; bottom: 60%; width: 7px; height: clamp(26px, 4vw, 44px); border-radius: 4px; background: var(--c);
  box-shadow: 0 0 12px 3px var(--c); transform-origin: 50% 100%; animation: zd-wave 1.4s ease-in-out calc(var(--i) * -.17s) infinite; }
.zd-crowd.wild span { animation: zd-jump .35s ease-in-out calc(var(--i) * -.05s) infinite alternate; }
.zd-crowd.wild span i { animation-duration: .35s; }

.zd-play { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 10px; padding: 34px 14px 13%; }
.zd-top { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px); flex-wrap: wrap; }
.zd-zoey { width: clamp(84px, 13vw, 150px); flex: none; filter: drop-shadow(0 0 16px #2fd8ff99); animation: zd-groove 1s ease-in-out infinite; }
.zd-zoey svg { width: 100%; display: block; }
.zd-zoey.jam { animation: zd-jam .25s ease-in-out infinite alternate; }
.zd-pic { width: clamp(96px, 14vw, 150px); height: clamp(96px, 14vw, 150px); animation: pop-in .45s cubic-bezier(.2, 1.5, .4, 1); }
.zd-pic span { font-size: clamp(60px, 9vw, 96px); }
.zd-word { display: flex; background: #fff; border-radius: 26px; padding: 6px clamp(14px, 2vw, 24px) 26px; box-shadow: 0 8px 0 #b98aff, 0 0 30px #ff4fd866; animation: pop-in .45s cubic-bezier(.2, 1.5, .4, 1); }
.zd-word.solved { box-shadow: 0 0 0 6px #2fcf7a, 0 8px 0 #b98aff, 0 0 40px #2fcf7a; }
.zd-g { position: relative; font-size: clamp(62px, 10vw, 110px); font-weight: 700; color: #2a1650; line-height: 1.1; padding: 0 1px; border-radius: 14px; cursor: pointer; transition: background .15s, translate .15s; }
.zd-g i { position: absolute; left: 50%; bottom: -16px; translate: -50% 0; background: #ff4fa3; opacity: 0; scale: 0; transition: opacity .2s, scale .3s cubic-bezier(.2, 1.8, .4, 1); }
.zd-g i.dot { width: 18px; height: 18px; border-radius: 50%; }
.zd-g i.dash { width: 72%; height: 9px; border-radius: 6px; }
.zd-g.on i { opacity: 1; scale: 1; }
.zd-g.lit { background: #ffe36a; translate: 0 -6px; }
.zd-g[data-n]::after { content: attr(data-n); position: absolute; left: 50%; top: -14px; translate: -50% 0; font: 400 26px 'Lilita One', sans-serif; color: #fff; background: #ff4fa3; border-radius: 50%; width: 34px; line-height: 34px; text-align: center; animation: pop-in .3s; }
.zd-g.zd-hop { animation: bounce .4s; }

.zd-drums { display: flex; gap: clamp(12px, 4vw, 48px); justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.zd-drum { position: relative; width: clamp(96px, min(24vw, 25vh), 230px); display: flex; flex-direction: column; align-items: center; transform-origin: 50% 90%;
  animation: zd-drum-in .5s cubic-bezier(.2, 1.6, .4, 1) calc(var(--i) * .1s) backwards; transition: opacity .3s; }
.zd-drum svg { width: 100%; display: block; filter: drop-shadow(0 10px 0 #0005) drop-shadow(0 0 14px #ffffff33); overflow: visible; }
.zd-num { position: absolute; top: 7%; left: 50%; translate: -50% 0; font: 400 clamp(38px, 6vw, 64px) 'Lilita One', sans-serif; color: #2a1650; line-height: 1; pointer-events: none; }
.zd-dots { display: flex; gap: 6px; margin-top: 6px; }
.zd-dots i { width: clamp(14px, 2vw, 20px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
.zd-drum:active:not(:disabled) { scale: .94; }
.zd-drum:disabled:not(.zd-right) { opacity: .3; }
.zd-drum.zd-right svg { filter: drop-shadow(0 10px 0 #0005) drop-shadow(0 0 22px #2fcf7a) drop-shadow(0 0 8px #fff); }
.zd-drum.hint { animation: pulse 1s ease-in-out infinite; }
.zd-drum.hint svg { filter: drop-shadow(0 0 18px var(--gold)) drop-shadow(0 0 6px #fff); }
.zd-drum.zd-wobble { animation: zd-wobble .5s; }
.zd-ring { position: absolute; left: 8%; right: 8%; top: 12%; height: 26%; border-radius: 50%; border: 5px solid #fff; pointer-events: none; }
.splash-word.zd-cheer { color: #fff; -webkit-text-stroke-color: #ff4fa3; z-index: 6; }
.splash-word.zd-bonk { color: #ffe03a; -webkit-text-stroke-color: #4a1a8a; z-index: 6; font-size: clamp(34px, 6vw, 56px); }

@keyframes zd-blink { 50% { filter: brightness(.45); box-shadow: none; } }
@keyframes zd-sweep { from { rotate: -26deg; } to { rotate: 26deg; } }
@keyframes zd-thump { 50% { scale: 1.03; } }
@keyframes zd-wave { 0%, 100% { rotate: -25deg; } 50% { rotate: 25deg; } }
@keyframes zd-jump { to { translate: 0 calc(var(--h) - 16px); } }
@keyframes zd-groove { 0%, 100% { rotate: -4deg; translate: 0 0; } 50% { rotate: 4deg; translate: 0 -6px; } }
@keyframes zd-jam { from { rotate: -10deg; scale: 1.04 .96; } to { rotate: 10deg; scale: .97 1.05; translate: 0 -10px; } }
@keyframes zd-drum-in { from { transform: translateY(120px) scale(.5); opacity: 0; } }
@keyframes zd-wobble { 20% { rotate: -9deg; scale: 1.05 .9; } 45% { rotate: 7deg; } 70% { rotate: -4deg; } 90% { rotate: 2deg; } }

@media (max-width: 600px) {
  .zd-play { padding-top: 30px; }
  .zd-speaker { display: none; }
  .zd-g { font-size: 54px; }
  .zd-drums { gap: 10px; }
  .zd-drum { width: 98px; }
}
/* Tall screens: a bigger word and drums, spread down the stage. */
@media (orientation: portrait) and (min-width: 601px) {
  .zd-play { justify-content: space-around; padding-bottom: 16%; }
  .zd-top { flex-direction: column; }
  .zd-top .zd-zoey { position: absolute; left: 4%; top: 40px; width: 170px; }
  .zd-speaker { display: none; }
  .zd-pic { width: 170px; height: 170px; }
  .zd-pic span { font-size: 110px; }
  .zd-g { font-size: 120px; }
  .zd-drum { width: min(27vw, 240px); }
}
@media (orientation: portrait) and (max-width: 600px) {
  .zd-play { justify-content: space-around; padding-bottom: 18%; }
}