/* Phonics Pop */
.pp-ask { display: flex; align-items: center; gap: 10px; }
.pp-q { margin: 0; font: 700 1.2rem/1.35 var(--round); text-wrap: balance; }
.pp-pic {
  border: 0; background: var(--card); border-radius: 28px; box-shadow: 0 4px 0 var(--line);
  width: 130px; height: 130px; font-size: 80px; line-height: 130px; padding: 0;
}
.pp-word { min-height: 1.4em; font: 800 1.6rem var(--round); color: var(--green); letter-spacing: 2px; }

.pp-sky { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 360px; padding-top: 10px; }
/* A balloon: round body, a knot made by ::before and a string by ::after. */
.pp-balloon {
  position: relative; justify-self: center; width: 72px; height: 86px; border: 0; padding: 0; margin-bottom: 40px;
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%; color: #fff; font: 800 1.6rem var(--round);
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .12), inset 8px 8px 0 rgba(255, 255, 255, .25);
  animation: pp-bob 2.4s ease-in-out var(--d, 0s) infinite;
}
.pp-balloon::before { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top: 8px solid; border-top-color: inherit; }
.pp-balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 38px; margin-top: 1px; background: #B9A58E; }
.pp-balloon.c1 { background: #E5483E; border-top-color: #E5483E; }
.pp-balloon.c2 { background: #2F8CF0; border-top-color: #2F8CF0; }
.pp-balloon.c3 { background: #F28C28; border-top-color: #F28C28; }
.pp-balloon.c4 { background: #9B5DE5; border-top-color: #9B5DE5; }
.pp-balloon:disabled { opacity: 0.3; animation: none; transform: scale(.8); }
.pp-balloon.pop { animation: pp-pop .35s forwards; }
.pp-balloon.lb-hint { animation: lb-pulse 1s 3; }
@keyframes pp-bob { 50% { transform: translateY(-8px); } }
@keyframes pp-pop { 40% { transform: scale(1.3); } to { transform: scale(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-balloon, .pp-balloon.pop { animation: none; } .pp-balloon.pop { opacity: 0; } }