:root {
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --sky: #66c9ee;
  --ink: #332861;
  --cream: #fff9e9;
  --yellow: #ffc928;
  --green: #38a631;
  --blue: #188bd1;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button { font: inherit; }

.party {
  position: relative;
  min-width: 1100px;
  width: 100%;
  height: 100%;
  min-height: 650px;
  overflow: hidden;
  background: linear-gradient(#63c8ed 0 68%, #9bd52d 68% 100%);
  isolation: isolate;
}

.sky-shine {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% -30%, rgba(255,255,255,.5), transparent 44%);
}

.cloud { position: absolute; top: 45px; width: 205px; height: 66px; border-radius: 50px; background: white; opacity: .96; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 12px; border-radius: 50%; background: white; }
.cloud::before { width: 88px; height: 88px; left: 48px; }
.cloud::after { width: 64px; height: 64px; right: 21px; }
.cloud-a { left: -28px; transform: scale(.85); }
.cloud-b { right: -35px; top: 60px; transform: scale(.7); }

.sound-button {
  position: absolute; z-index: 12; top: 24px; right: 28px;
  width: 64px; height: 64px; padding: 14px;
  color: var(--ink); background: rgba(255,255,255,.94);
  border: 4px solid rgba(51,40,97,.18); border-radius: 50%;
  box-shadow: 0 7px 0 rgba(41,89,120,.16);
  cursor: pointer; transition: transform 150ms ease-out;
}
.sound-button:hover { transform: translateY(-2px); }
.sound-button:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(41,89,120,.16); }
.sound-button svg { width: 100%; height: 100%; fill: currentColor; }
.sound-button .sound-off { display: none; }
.sound-button[aria-pressed="true"] .sound-on { display: none; }
.sound-button[aria-pressed="true"] .sound-off { display: block; }

.game-card {
  position: absolute; z-index: 4; left: 50%; top: 48%;
  width: min(1240px, calc(100% - 120px));
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}

.level-token {
  position: absolute; left: -6px; top: -32px; z-index: 5;
  display: grid; place-items: center; width: 70px; height: 70px;
  border-radius: 50%; background: #7b48cf; color: white;
  border: 6px solid white; box-shadow: 0 6px 0 #5833a0;
  font-size: 38px; line-height: 1;
}

.rhythm-dots { display: flex; gap: 16px; height: 34px; margin-bottom: 10px; align-items: center; }
.rhythm-dots i { width: 13px; height: 13px; border-radius: 50%; background: white; opacity: .65; box-shadow: 0 2px 0 rgba(0,0,0,.1); }
.rhythm-dots i:nth-child(2n) { background: #ffe95d; }

.pattern-tray {
  display: flex; align-items: stretch; justify-content: center;
  width: 100%; height: 286px; padding: 16px;
  border: 9px solid var(--yellow); border-radius: 46px;
  background: var(--cream); box-shadow: 0 10px 0 rgba(174,124,0,.2), inset 0 3px 0 white;
}

.slot {
  position: relative; flex: 1 1 0; min-width: 0;
  display: grid; place-items: center;
  border: 4px solid #eadfbd; border-width: 4px 4px 4px 0;
  background: rgba(255,255,255,.22);
}
.slot:first-child { border-left-width: 4px; border-radius: 30px 0 0 30px; }
.slot:last-child { border-radius: 0 30px 30px 0; }
.slot.empty { background: white; }
.slot.target { border: 6px solid #ffd32c; border-radius: 28px; box-shadow: 0 0 0 6px rgba(255,222,54,.23), 0 0 30px #ffe76a; animation: targetGlow 1.2s ease-in-out infinite; }
.slot.target::after { content: "?"; color: #7b48cf; font-size: clamp(72px, 8vw, 118px); line-height: 1; }
.slot.drop-ready { background: #fff9b6; transform: scale(1.035); }
.slot .piece { width: 84%; height: 84%; }

.piece { display: block; filter: drop-shadow(0 7px 0 rgba(80,63,25,.10)); transform-origin: 50% 78%; }
.piece svg { width: 100%; height: 100%; overflow: visible; }
.piece.dance { animation: dance .48s ease-out both; animation-delay: calc(var(--i, 0) * 90ms); }
.piece.pulse { animation: focusPulse .8s ease-in-out 2; }

.choice-dock { display: flex; align-items: center; justify-content: center; gap: 110px; min-height: 242px; padding-top: 32px; }
.choice {
  position: relative; display: grid; place-items: center;
  width: 220px; height: 220px; padding: 20px;
  border-radius: 50%; background: white; border: 9px solid var(--choice, var(--green));
  box-shadow: 0 10px 0 color-mix(in srgb, var(--choice, var(--green)) 72%, #163f34), 0 17px 26px rgba(41,89,120,.2);
  cursor: grab; touch-action: none; transition: transform 150ms ease-out, filter 150ms ease-out;
}
.choice:nth-child(2) { --choice: var(--blue); }
.choice:nth-child(3) { --choice: #f064ad; }
.choice:hover { transform: translateY(-5px) scale(1.02); }
.choice:active, .choice.dragging { cursor: grabbing; transform: scale(.92); filter: brightness(1.04); }
.choice .piece { width: 100%; height: 100%; pointer-events: none; }
.choice.gentle-no { animation: gentleNo .5s ease-out; }

.hand-guide {
  position: fixed; z-index: 20; display: none;
  font-size: 66px; filter: drop-shadow(0 5px 2px rgba(35,45,56,.25));
  transform: translate(-50%, -15%); pointer-events: none;
}
.hand-guide.show { display: block; animation: guideMove 1.8s ease-in-out 2 both; }

.celebration { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.celebration.show { opacity: 1; }
.party-sun {
  display: grid; place-items: center; width: 170px; height: 170px;
  border-radius: 50%; color: white; background: #ffd52e; border: 10px solid white;
  font-size: 92px; box-shadow: 0 0 0 18px rgba(255,222,60,.35), 0 12px 40px rgba(90,69,0,.25);
  transform: scale(0); opacity: 0;
}
.celebration.show .party-sun { animation: partyPop .8s cubic-bezier(.2,.9,.25,1.3) both; }
.confetti span { position: absolute; left: 50%; top: 50%; width: 18px; height: 28px; border-radius: 6px; background: var(--c); transform: rotate(var(--r)) translateY(-40px); opacity: 0; }
.celebration.show .confetti span { animation: confetti 1.05s ease-out both; animation-delay: var(--d); }

.hills { position: absolute; z-index: 1; inset: auto 0 0; height: 32%; overflow: hidden; pointer-events: none; }
.hills::before { content: ""; position: absolute; width: 120%; height: 110%; left: -10%; top: 25%; border-radius: 50% 50% 0 0; background: #82c826; }
.bush { position: absolute; bottom: 40%; width: 270px; height: 145px; background: #3aa329; border-radius: 60% 60% 20% 20%; }
.bush::after { content: ""; position: absolute; width: 130px; height: 130px; right: -45px; bottom: 0; background: inherit; border-radius: 50%; }
.bush-a { left: -45px; }.bush-b { right: -30px; transform: scale(.9); }
.flower { position: absolute; z-index: 2; bottom: 45px; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #ffd92e; background: #ff5f9f; font-size: 28px; border: 14px dotted white; }
.flower::after { content: ""; position: absolute; width: 8px; height: 70px; top: 55px; background: #338c29; z-index: -1; }
.flower-a { left: 65px; }.flower-b { right: 95px; transform: scale(.72); }.flower-c { left: 205px; bottom: 22px; transform: scale(.5); background: #ff9f2f; }

@keyframes targetGlow { 50% { box-shadow: 0 0 0 11px rgba(255,226,53,.16), 0 0 42px #fff071; } }
@keyframes dance { 45% { transform: translateY(-30px) rotate(-8deg) scale(1.07); } 75% { transform: rotate(6deg); } }
@keyframes focusPulse { 50% { transform: scale(1.15); filter: drop-shadow(0 0 14px #fff065); } }
@keyframes gentleNo { 25% { transform: rotate(-7deg) scale(.94); } 55% { transform: rotate(7deg) scale(.98); } }
@keyframes guideMove { 0%, 15% { left: var(--from-x); top: var(--from-y); transform: translate(-50%, 0) scale(.95); } 65%, 100% { left: var(--to-x); top: var(--to-y); transform: translate(-50%, -15%) scale(1.08); } }
@keyframes partyPop { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 55% { transform: scale(1.15) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes confetti { 10% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--r) + 210deg)) translateY(var(--fly)) translateX(var(--side)); } }

:focus-visible { outline: 7px solid #4f278e; outline-offset: 6px; }

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