:root {
  --pink: #ff6fb5; --pink-d: #e04b95;
  --purple: #8f5bff; --purple-d: #6c3be0;
  --sky: #6ec6ff; --sky-d: #3a9be0;
  --yellow: #ffd166; --yellow-d: #e9aa2b;
  --mint: #7be0a3; --mint-d: #3fb873;
  --ink: #4a2a6a; --ink-soft: #7a5a99;
  --card: #fffafd;
  --bg1: #ffd9ec; --bg2: #e7d9ff; --bg3: #d4efff;
  --game: var(--pink);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Fredoka", "Baloo 2", "Nunito", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%) fixed;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
[hidden] { display: none !important; }

/* Floating background */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cloud, .float { position: absolute; opacity: .55; }
.cloud { font-size: 9vmin; animation: drift 38s linear infinite; }
.c1 { top: 6%; left: -15%; } .c2 { top: 30%; left: -25%; animation-duration: 52s; animation-delay: -20s; font-size: 12vmin; } .c3 { top: 70%; left: -20%; animation-duration: 45s; animation-delay: -8s; }
.float { font-size: 4.5vmin; animation: bob 7s ease-in-out infinite; }
.f1 { top: 12%; left: 82%; } .f2 { top: 78%; left: 8%; animation-delay: -2s; } .f3 { top: 55%; left: 92%; animation-delay: -4s; } .f4 { top: 20%; left: 6%; animation-delay: -1s; } .f5 { top: 88%; left: 60%; animation-delay: -3s; }
@keyframes drift { to { transform: translateX(140vw); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3vmin) rotate(6deg); } }

/* Logo */
.logo {
  font-weight: 700; margin: 0; letter-spacing: .02em; line-height: 1;
  background: linear-gradient(90deg, #ff5fa8, #a45cff 45%, #3b9cff 75%, #ff9a3d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(255, 255, 255, .9)) drop-shadow(0 8px 12px rgba(120, 60, 160, .25));
}

/* Mascot: Princess Pup */
.mascot { position: relative; display: inline-block; font-size: 64px; line-height: 1; }
.mascot .m-dog { display: block; animation: wag 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.mascot .m-crown { position: absolute; left: 50%; top: -.42em; font-size: .55em; transform: translateX(-50%) rotate(-8deg); }
.mascot.big { font-size: 120px; }
.mascot.happy .m-dog { animation: jump .5s ease-in-out 3; }
.mascot.think .m-dog { animation: tilt 1s ease-in-out 1; }
@keyframes wag { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes jump { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-30%) scale(1.08, .95); } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-15deg); } 70% { transform: rotate(10deg); } }

/* Toy buttons */
.toy-btn {
  --c: var(--pink); --d: var(--pink-d);
  background: var(--c); color: #fff; font-weight: 700;
  border-radius: 999px; padding: .55em 1.3em; font-size: 1.3rem;
  box-shadow: 0 .3em 0 var(--d), 0 .5em 1em rgba(80, 30, 120, .2);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .12);
  transition: transform .08s, box-shadow .08s;
}
.toy-btn:active { transform: translateY(.22em); box-shadow: 0 .08em 0 var(--d); }
.toy-btn.purple { --c: var(--purple); --d: var(--purple-d); }
.toy-btn.yellow { --c: var(--yellow); --d: var(--yellow-d); color: var(--ink); text-shadow: none; }
.toy-btn.sky { --c: var(--sky); --d: var(--sky-d); }
.toy-btn.sm { font-size: 1rem; }
.toy-btn.huge { font-size: 2.4rem; padding: .5em 1.4em; }
.toy-btn.wide { width: 100%; }
.icon-btn {
  width: 56px; height: 56px; border-radius: 50%; background: #fff; font-size: 28px;
  box-shadow: 0 4px 0 #e2cdee, 0 6px 14px rgba(80, 30, 120, .15);
  display: inline-grid; place-items: center; flex: none;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #e2cdee; }

/* Avatars */
.avatar {
  --av-size: 80px;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--av-size); height: var(--av-size); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8 0 20%, transparent 21%), var(--av-bg);
  box-shadow: 0 calc(var(--av-size) * .06) 0 rgba(0, 0, 0, .12), inset 0 0 0 calc(var(--av-size) * .05) #fff;
}
.avatar-main { font-size: calc(var(--av-size) * .62); line-height: 1; }
.avatar-acc { position: absolute; top: calc(var(--av-size) * -.2); right: calc(var(--av-size) * -.06); font-size: calc(var(--av-size) * .42); transform: rotate(14deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }

/* Answer buttons (TV and phone) */
.choice {
  position: relative; display: grid; place-items: center; align-content: center; gap: .1em;
  background: #fff; border-radius: 28px;
  box-shadow: 0 8px 0 #e6d4f2, 0 12px 24px rgba(80, 30, 120, .14);
  transition: transform .12s, opacity .3s, filter .3s, box-shadow .12s;
  animation: pop-in .35s cubic-bezier(.3, 1.6, .5, 1) both;
}
.choice .ch-letter, .choice .ch-number { font-weight: 700; line-height: 1; color: var(--ink); }
.choice:nth-child(4n+1) .ch-letter, .choice:nth-child(4n+1) .ch-number { color: #ff4f9e; }
.choice:nth-child(4n+2) .ch-letter, .choice:nth-child(4n+2) .ch-number { color: #8f5bff; }
.choice:nth-child(4n+3) .ch-letter, .choice:nth-child(4n+3) .ch-number { color: #2d8cff; }
.choice:nth-child(4n+4) .ch-letter, .choice:nth-child(4n+4) .ch-number { color: #ff8a1f; }
.choice .ch-emoji { line-height: 1; }
.choice .ch-color { display: block; border-radius: 50%; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12), 0 0 0 4px #fff, 0 0 0 6px #eadcf5; }
.choice .ch-label { font-weight: 600; color: var(--ink-soft); }
.choice .shape-svg { width: 70%; height: 70%; }
.choice.off { opacity: .28; filter: grayscale(1); transform: scale(.92); pointer-events: none; }
.choice.fade { opacity: .25; transform: scale(.9); }
.choice.right { box-shadow: 0 8px 0 var(--mint-d), 0 0 0 8px var(--mint), 0 12px 30px rgba(60, 180, 110, .5); animation: win .7s ease-in-out 2; z-index: 2; }
.choice.right::after { content: "⭐"; position: absolute; top: -.35em; right: -.25em; font-size: 2.6rem; animation: pop-in .4s both; }
.choice.shake, .choice.chosen.off { animation: shake .45s; }
@keyframes win { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1) rotate(-3deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0) scale(.92); } 20% { transform: translateX(-12px) scale(.92); } 40% { transform: translateX(12px) scale(.92); } 60% { transform: translateX(-8px) scale(.92); } 80% { transform: translateX(8px) scale(.92); } }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pop-in { animation: pop-in .4s cubic-bezier(.3, 1.6, .5, 1) both; }

/* Progress pips */
.pip { width: 34px; height: 34px; border-radius: 50%; background: #fff8; border: 3px dashed #d9c2ec; display: inline-grid; place-items: center; font-size: 22px; }
.pip.now { border-style: solid; border-color: var(--game); background: #fff; animation: pulse 1.2s ease-in-out infinite; }
.pip.done { border: 0; background: transparent; animation: pop-in .4s both; }
@keyframes pulse { 50% { transform: scale(1.15); } }

/* Confetti */
.confetti { position: fixed; top: -5vh; width: 12px; height: 18px; border-radius: 3px; z-index: 50; pointer-events: none; animation: fall linear forwards; }
.confetti-emoji { width: auto; height: auto; font-size: 28px; background: none !important; }
@keyframes fall { to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); } }

.status { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 18px; border-radius: 999px; z-index: 60; font-weight: 600; }
.small-note { color: var(--ink-soft); font-size: .95rem; }
.error { color: #d6336c; font-weight: 600; min-height: 1.4em; }

.sticker { font-size: 160px; line-height: 1; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 0 #fff) drop-shadow(0 10px 18px rgba(120, 60, 160, .35)); animation: sticker-in 1s cubic-bezier(.3, 1.6, .5, 1) both, float-y 3s ease-in-out 1s infinite; }
@keyframes sticker-in { from { transform: scale(0) rotate(-200deg); } to { transform: scale(1) rotate(0); } }
@keyframes float-y { 50% { transform: translateY(-12px) rotate(4deg); } }
.yay { font-size: 4rem; font-weight: 700; margin: 0; color: var(--pink); text-shadow: 0 5px 0 #fff, 0 10px 20px rgba(200, 60, 140, .3); animation: pop-in .5s both; }

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