:root {
  --font: "Baloo 2", "Baloo", "Fredoka One", "Fredoka", "Nunito", "Varela Round", "Arial Rounded MT Bold",
    ui-rounded, "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  --ink: #6a3f7a;
  --bounce: cubic-bezier(.34, 1.7, .5, 1);
  --btn: min(28vw, 20vh, 200px);
  --top: max(54px, 11vmin);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  touch-action: none; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    url(../assets/bg.svg) center / cover no-repeat,
    radial-gradient(120% 60% at 50% 100%, #c6efb0 0 40%, transparent 41%),
    linear-gradient(#bfe9ff 0%, #e6f6ff 50%, #fdf0f7 100%);
}

img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: none; }

/* ---------- layout ---------- */
#app {
  position: fixed; inset: 0; height: 100dvh;
  display: grid;
  grid-template-rows: var(--top) 1fr auto;
  grid-template-areas: "top" "stage" "answers";
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#top { grid-area: top; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 0; gap: 8px; position: relative; z-index: 5; }
#stage { grid-area: stage; position: relative; min-height: 0; }
#answers {
  grid-area: answers; display: flex; justify-content: center; align-items: center;
  gap: calc(var(--btn) * .14);
  padding: 6px 10px calc(var(--btn) * .22);
}

/* short landscape (phone sideways): buttons in a column on the right */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --btn: min(25vh, 18vw, 150px); --top: max(46px, 12vh); }
  #app { grid-template-columns: 1fr auto; grid-template-rows: var(--top) 1fr; grid-template-areas: "top top" "stage answers"; }
  #answers { flex-direction: column; gap: calc(var(--btn) * .1); padding: 0 calc(var(--btn) * .35) calc(var(--btn) * .15) 0; }
}
@media (orientation: landscape) and (min-height: 561px) {
  :root { --btn: min(20vw, 19vh, 190px); }
}

/* ---------- mini buttons ---------- */
.mini {
  width: calc(var(--top) * .72); height: calc(var(--top) * .72); border-radius: 50%;
  background: rgba(255, 255, 255, .55); color: #9a7aa8; opacity: .8;
  box-shadow: 0 3px 0 rgba(150, 110, 170, .25);
  display: grid; place-items: center; transition: transform .15s;
}
.mini:active { transform: scale(.9); }
.mini svg { width: 58%; height: 58%; }
#mute .off { display: none; }
#mute.muted .on { display: none; }
#mute.muted .off { display: inline; }

/* ---------- score ---------- */
#score {
  display: flex; gap: calc(var(--top) * .1); padding: calc(var(--top) * .08) calc(var(--top) * .2);
  border-radius: 999px; background: rgba(255, 255, 255, .6);
  box-shadow: 0 4px 0 rgba(150, 110, 170, .2), 0 6px 18px rgba(120, 80, 150, .12);
}
.slot { position: relative; width: calc(var(--top) * .68); height: calc(var(--top) * .68); }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot .ghost { opacity: .22; filter: grayscale(1) brightness(1.3); }
.slot .full { transform: scale(0); transition: transform .45s var(--bounce); }
.slot.on .full { transform: scale(1); animation: twinkle 2.6s ease-in-out .5s infinite; }
#score.party .slot.on .full { animation: partyStar .5s ease-in-out infinite alternate; }
.slot:nth-child(2) .full { animation-delay: .3s; }
.slot:nth-child(3) .full { animation-delay: .6s; }
.slot:nth-child(4) .full { animation-delay: .9s; }
.slot:nth-child(5) .full { animation-delay: 1.2s; }
@keyframes twinkle { 0%, 80%, 100% { transform: scale(1) rotate(0); } 90% { transform: scale(1.15) rotate(12deg); } }
@keyframes partyStar { from { transform: scale(1) rotate(-12deg); } to { transform: scale(1.3) rotate(12deg); } }

/* ---------- items ---------- */
.item {
  position: absolute; left: 0; top: 0; width: var(--s); height: var(--s);
  transform: translate(-50%, -50%) rotate(var(--r));
  transition: left .4s ease, top .4s ease;
}
.item .pop { position: absolute; inset: 0; transform: scale(0); }
.item.in .pop { animation: popIn .6s var(--bounce) both; }
.item.out .pop { animation: popOut .45s cubic-bezier(.5, -0.6, .8, .5) both; }
.item .shadow {
  position: absolute; left: 16%; right: 16%; bottom: -3%; height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 40, 90, .3), transparent);
  animation: shadowBreathe 2.4s ease-in-out infinite; animation-delay: var(--d);
}
.item .bob { position: absolute; inset: 0; transform-origin: 50% 90%; animation: breathe 2.4s ease-in-out infinite; animation-delay: var(--d); }
.item img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 calc(var(--s) * .03) calc(var(--s) * .03) rgba(80, 40, 100, .2)); }
.item.lit .bob { animation: hop .65s var(--bounce) both; }
.item.lit img { filter: drop-shadow(0 0 calc(var(--s) * .05) #fff) drop-shadow(0 0 calc(var(--s) * .08) rgba(255, 230, 120, .9)); }
.item.jiggle .bob { animation: jiggle .55s ease-in-out; }
.item.dance .bob { animation: dance .6s ease-in-out infinite alternate; }
.item.dance:nth-child(2) .bob { animation-delay: -.3s; }
.item .num {
  position: absolute; left: 50%; top: -4%; z-index: 2;
  font-size: calc(var(--s) * .36); font-weight: 900; line-height: 1;
  color: #fff; -webkit-text-stroke: calc(var(--s) * .012) #c25a96;
  text-shadow: 0 calc(var(--s) * .025) 0 #c25a96, 0 calc(var(--s) * .04) calc(var(--s) * .05) rgba(0, 0, 0, .2);
  transform: translate(-50%, -50%) rotate(calc(var(--r) * -1)) scale(0); opacity: 0;
  transition: transform .4s var(--bounce), opacity .2s;
}
.item.lit .num, .item.shownum .num { transform: translate(-50%, -50%) rotate(calc(var(--r) * -1)) scale(1); opacity: 1; }

@keyframes popIn { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.15) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes popOut { 0% { transform: scale(1); } 30% { transform: scale(1.12) translateY(-6%); } 100% { transform: scale(0) translateY(-30%) rotate(25deg); } }
@keyframes breathe {
  0%, 100% { transform: scale(1, 1) rotate(-2deg); }
  50% { transform: scale(1.04, .97) rotate(2deg); }
}
@keyframes shadowBreathe { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.06); } }
@keyframes hop {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-22%) scale(1.22, 1.18); }
  70% { transform: translateY(0) scale(1.24, 1.1); }
  100% { transform: translateY(-4%) scale(1.15); }
}
@keyframes jiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-12deg) scale(1.1, .92); }
  45% { transform: rotate(10deg) scale(.95, 1.08); }
  70% { transform: rotate(-5deg) scale(1.04); }
}
@keyframes dance {
  0% { transform: translateY(0) rotate(-12deg) scale(1.05, .95); }
  100% { transform: translateY(-20%) rotate(12deg) scale(.96, 1.06); }
}

/* ---------- answer buttons ---------- */
.ans { width: var(--btn); height: var(--btn); border-radius: 50%; transform: scale(0); position: relative; }
.ans.shown, .ans.in { transform: scale(1); }
.ans.in { animation: btnIn .6s var(--bounce) both; animation-delay: calc(var(--i) * 90ms); }
.ans.out { animation: btnOut .35s ease-in both; animation-delay: calc(var(--i) * 50ms); }
.ans .face {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(38% 26% at 36% 22%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 50% 38%, var(--l) 0%, var(--c) 72%);
  box-shadow:
    0 calc(var(--btn) * .075) 0 var(--d),
    0 calc(var(--btn) * .12) calc(var(--btn) * .1) rgba(80, 40, 100, .25),
    inset 0 calc(var(--btn) * -.05) calc(var(--btn) * .08) rgba(0, 0, 0, .08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .09s ease-out, box-shadow .09s ease-out;
}
.ans.pressed .face, .ans:active .face {
  transform: translateY(calc(var(--btn) * .06));
  box-shadow: 0 calc(var(--btn) * .015) 0 var(--d), 0 calc(var(--btn) * .03) calc(var(--btn) * .05) rgba(80, 40, 100, .25),
    inset 0 calc(var(--btn) * -.05) calc(var(--btn) * .08) rgba(0, 0, 0, .08);
}
.ans .digit {
  font-size: calc(var(--btn) * .54); font-weight: 900; line-height: .9; color: #fff;
  -webkit-text-stroke: calc(var(--btn) * .012) var(--d);
  text-shadow: 0 calc(var(--btn) * .03) 0 var(--d);
  margin-top: calc(var(--btn) * .02);
}
.ans .dots { display: flex; gap: calc(var(--btn) * .045); margin-top: calc(var(--btn) * .04); }
.ans .dots i { width: calc(var(--btn) * .1); height: calc(var(--btn) * .1); border-radius: 50%; background: #fff; box-shadow: 0 calc(var(--btn) * .015) 0 var(--d); }
.ans.glow .face { animation: glow .8s ease-in-out infinite alternate; }
.ans.dim { filter: saturate(.5) opacity(.55); transition: filter .3s; }
.ans.shake { animation: shake .6s ease-in-out both; }
.ans.hint { animation: hint 1.1s ease-in-out infinite; }
#answers.locked .ans { pointer-events: none; }

@keyframes btnIn { 0% { transform: scale(0) translateY(40%); } 65% { transform: scale(1.12) translateY(-6%); } 100% { transform: scale(1); } }
@keyframes btnOut { from { transform: scale(1); } to { transform: scale(0) translateY(30%); } }
@keyframes shake {
  0%, 100% { transform: scale(1) translateX(0) rotate(0); }
  15% { transform: translateX(-9%) rotate(-8deg); } 35% { transform: translateX(8%) rotate(7deg); }
  55% { transform: translateX(-5%) rotate(-4deg); } 75% { transform: translateX(3%) rotate(2deg); }
}
@keyframes hint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes glow {
  from { filter: brightness(1.05) drop-shadow(0 0 calc(var(--btn) * .06) #fff); }
  to { filter: brightness(1.15) drop-shadow(0 0 calc(var(--btn) * .16) var(--l)) drop-shadow(0 0 calc(var(--btn) * .08) #fff); }
}

/* ---------- start screen ---------- */
#start {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: min(7vh, 8vw);
  background: rgba(255, 255, 255, .25);
  transition: opacity .5s, transform .6s cubic-bezier(.6, -0.3, .7, .4);
}
#start.hide { opacity: 0; transform: scale(1.2); pointer-events: none; }
#title { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .35em; font-size: min(17vw, 15vh); font-weight: 900; line-height: 1.05; padding: 0 4vw; position: relative; z-index: 1; }
#title .word { display: inline-flex; }
#title .ch {
  display: inline-block; color: var(--c);
  -webkit-text-stroke: .025em #fff; paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--d), 0 .1em .12em rgba(80, 40, 100, .25);
  animation: letter 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.13s);
}
@keyframes letter { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-.12em) rotate(4deg); } }
#play {
  width: min(38vw, 30vh, 240px); height: min(38vw, 30vh, 240px); border-radius: 50%; position: relative; z-index: 1;
  background: radial-gradient(38% 26% at 36% 24%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(circle at 50% 40%, #a5f0b0, #4cc96a 75%);
  box-shadow: 0 min(2.6vw, 2vh, 16px) 0 #2f9a4c, 0 0 0 min(2vw, 1.6vh, 12px) rgba(255, 255, 255, .7), 0 min(5vw, 4vh, 30px) min(6vw, 5vh, 36px) rgba(60, 120, 70, .35);
  animation: pulse 1.3s ease-in-out infinite;
}
#play:active, #play.pressed { transform: translateY(8px) scale(.95); animation: none; }
#play .tri {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-36%, -50%);
  border-style: solid; border-color: transparent transparent transparent #fff; border-radius: 4px;
  border-width: calc(min(38vw, 30vh, 240px) * .2) 0 calc(min(38vw, 30vh, 240px) * .2) calc(min(38vw, 30vh, 240px) * .32);
  filter: drop-shadow(0 4px 0 #2f9a4c);
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
#floaties { position: absolute; inset: 0; overflow: hidden; }
.floaty { position: absolute; width: var(--s); height: var(--s); animation: floaty var(--t) ease-in-out infinite alternate; animation-delay: var(--dl); opacity: .95; }
.floaty img { width: 100%; height: 100%; filter: drop-shadow(0 6px 6px rgba(80, 40, 100, .18)); }
@keyframes floaty { from { transform: translateY(-4vmin) rotate(-10deg); } to { transform: translateY(4vmin) rotate(10deg); } }

/* ---------- fx ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
#fx > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.fx-dot { border-radius: 50%; }
.fx-star { display: block; }
.rainbow {
  position: fixed; pointer-events: none; left: 50%; bottom: -55vmin; width: 130vmin; height: 130vmin; margin-left: -65vmin; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 46%, #b9a3ff 46% 50%, #8fd3ff 50% 54%, #9be89b 54% 58%, #ffe36e 58% 62%, #ffb36b 62% 66%, #ff8fb1 66% 70%, transparent 70%);
  opacity: .85;
}
.balloon { width: 11vmin; height: 13.5vmin; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; }
.balloon::before { content: ""; position: absolute; left: 22%; top: 14%; width: 22%; height: 26%; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 10vmin; background: rgba(110, 80, 130, .45); }