/* Phonics Bubble Pop. Every rule is scoped under .pbp so it cannot disturb Memory Moves. */
@font-face{font-family:"Andika";src:url(assets/fonts/Andika-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
.pbp{--letter:"Andika","Comic Sans MS","Century Gothic",sans-serif;max-width:560px;margin-inline:auto;padding-block:8px 40px;display:flex;flex-direction:column;gap:18px}
.pbp .pad-head{align-items:center}
.pbp .pad-head h1{font-size:1.6rem}
.pbp .levels{display:flex;gap:6px;align-items:center}
.pbp .lv{font-family:var(--display);font-size:1rem;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:var(--night-3);color:var(--ink)}
.pbp .lv[aria-pressed="true"]{background:var(--sun);color:#2a1c00}
.pbp .dots{display:flex;gap:6px;flex-wrap:wrap;min-height:16px}
.pbp .dot{width:16px;height:16px;border-radius:50%;background:var(--night-3)}
.pbp .dot.on{background:var(--lime);box-shadow:0 0 10px var(--lime)}
.pbp .stage{display:block;height:400px;perspective:none;
  background:
    linear-gradient(to bottom, transparent 0 88%, var(--cyan) 88% 88.8%, #10244a 88.8% 100%),
    radial-gradient(22rem 16rem at 50% 25%, rgba(34,230,255,.26), transparent 70%),
    linear-gradient(#0c0628,#12305a)}
.pbp .field{position:absolute;inset:34px 10px auto 10px;height:42%;display:flex;justify-content:center;align-items:center;gap:3%}
.pbp .bub{position:relative;flex:0 1 92px;aspect-ratio:1;max-width:23%;border-radius:50%;border:0;cursor:pointer;padding:0;
  font-family:var(--letter);font-weight:700;font-size:clamp(2rem,9vw,3rem);line-height:1;color:#10082a;
  background:radial-gradient(circle at 32% 28%, #fff 0 9%, transparent 11%),radial-gradient(circle at 50% 50%, var(--c1) 0 58%, var(--c2) 100%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55), 0 0 22px var(--c2);
  animation:pbp-rise .8s cubic-bezier(.2,.9,.3,1.2) both, pbp-bob 2.6s ease-in-out .8s infinite}
.pbp .bub span{display:block;transform:translateY(-4%)}
.pbp .bub:nth-child(2){animation-delay:.1s,.9s}
.pbp .bub:nth-child(3){animation-delay:.2s,1.1s}
.pbp .bub:nth-child(4){animation-delay:.3s,1.3s}
.pbp .bub.twin{box-shadow:inset 0 0 0 3px #fff, 0 0 0 4px var(--sun), 0 0 26px var(--sun)}
.pbp .bub.hint{box-shadow:inset 0 0 0 3px #fff, 0 0 0 5px var(--lime), 0 0 30px var(--lime)}
.pbp .bub.nope{animation:pbp-nope .5s ease both;pointer-events:none}
.pbp .bub.charge{animation:pbp-charge .3s ease-in-out infinite alternate;pointer-events:none;box-shadow:inset 0 0 0 3px #fff, 0 0 0 5px var(--lime), 0 0 34px var(--lime)}
@keyframes pbp-charge{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.12) rotate(4deg)}}
.pbp .bub.pop{animation:pbp-pop .38s ease-out both;pointer-events:none}
.pbp .bub:disabled{cursor:default}
@keyframes pbp-rise{from{transform:translateY(260px) scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes pbp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pbp-nope{0%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}100%{transform:scale(.8);opacity:.22}}
@keyframes pbp-pop{0%{transform:scale(1)}45%{transform:scale(1.35);opacity:1}100%{transform:scale(1.7);opacity:0}}
.pbp .echo{position:absolute;left:4%;bottom:2.5%;height:50%;margin:0}
.pbp .echo.jump{animation:pbp-hop .7s ease-out}
@keyframes pbp-hop{0%,100%{transform:translateY(6%)}50%{transform:translateY(-12%)}}
.pbp .says{position:absolute;left:39%;right:4%;bottom:15%;background:var(--ink);color:#1b1038;border-radius:18px 18px 18px 4px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.pbp .says .what{font-family:var(--display);font-size:1.05rem;line-height:1.15}
.pbp .wave{display:flex;gap:5px;align-items:flex-end;height:26px;margin-top:6px}
.pbp .wave i{width:7px;border-radius:4px;background:var(--pink);height:30%;animation:pbp-wave .5s ease-in-out infinite alternate}
.pbp .wave i:nth-child(2){animation-delay:.12s}
.pbp .wave i:nth-child(3){animation-delay:.24s}
.pbp .wave i:nth-child(4){animation-delay:.36s}
@keyframes pbp-wave{from{height:25%}to{height:100%}}
.pbp .sound{z-index:2}
.pbp .card{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,6,40,.9);padding:18px;text-align:center}
.pbp .card > div{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:26ch}
.pbp .card h2{font-size:1.7rem;color:var(--sun)}
.pbp .card .pair{display:flex;gap:14px}
.pbp .card .pair .bub{flex:0 0 96px;max-width:none;animation:pbp-bob 2.2s ease-in-out infinite}
.pbp .pad-msg{flex:1 1 200px}
.pbp .note{border:2px dashed var(--night-3);border-radius:16px;padding:12px 14px;color:var(--ink-soft);font-size:.95rem}
.pbp .note b{color:var(--ink)}
@media (max-width:480px){
  .pbp .echo{height:42%;left:2%}
  .pbp .says{left:45%;right:3%;padding:8px 10px}
  .pbp .says .what{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .pbp .bub,.pbp .bub.charge,.pbp .echo.jump,.pbp .card .pair .bub,.pbp .wave i{animation:none}
  .pbp .bub.nope{opacity:.22}
  .pbp .bub.pop{opacity:0}
}