/* Gedeeld voor alle oefenapps: maatje, keuze, geluidsknop, confetti (stijl van voorzetsels.html, Ivetta 8-9/11). */
:root{ --hsm-yellow:#E9ED1A; --hsm-ink:#17241D; --hsm-green:#307359; --hsm-dark:#133F2C; --hsm-mint:#E3EFE6; --hsm-line:#DCD6C8; --hsm-soft:#4E5B53; }
  .buddy{ display:flex; flex-direction:column; align-items:flex-start; flex:none; }
  .buddy__fig{ position:relative; order:2; height:130px; flex:none; }
  .buddy__fig img{ display:block; height:100%; width:auto; transform-origin:50% 100%; animation:breathe 3.2s ease-in-out infinite; filter:drop-shadow(0 6px 5px rgba(19,63,44,.18)); }
  @keyframes breathe{ 50%{ transform:translateY(-2px) scale(1.012); } }
  /* Ballon boven het hoofd, klein t.o.v. het mannetje, fluo zoals de site (Ivetta 9/11) */
  .buddy__say{ position:relative; order:1; max-width:140px; margin:0 0 8px 22px; padding:7px 11px; border-radius:14px; background:var(--hsm-yellow); color:var(--hsm-ink); box-shadow:0 2px 0 rgba(19,63,44,.18);
    font-size:15px; line-height:1.25; text-align:center; text-wrap:balance; opacity:0; transform:scale(.5); transform-origin:10% 100%; transition:opacity .2s ease, transform .35s cubic-bezier(.3,1.6,.5,1); }
  .buddy__say::after{ content:""; position:absolute; left:16px; bottom:-5px; width:11px; height:11px; background:var(--hsm-yellow); transform:rotate(45deg); }
  .buddy__say.on{ opacity:1; transform:none; }
  .buddy__say b{ font-weight:800; color:var(--hsm-dark); }
  .buddy__flash{ position:absolute; inset:-20% -40%; border-radius:50%; background:radial-gradient(closest-side, #fff 30%, rgba(255,255,255,0)); opacity:0; pointer-events:none; }
  /* Eigen beweging per personage */
  .buddy[data-act="dj"] img{ animation:dj .45s ease-in-out 4; }
  @keyframes dj{ 0%,100%{ transform:none; } 25%{ transform:translateY(-9px) rotate(-7deg); } 50%{ transform:none; } 75%{ transform:translateY(-9px) rotate(7deg); } }
  .buddy[data-act="flex"] img{ animation:flex 1.5s ease-in-out; }
  @keyframes flex{ 0%,100%{ transform:none; } 15%,45%,75%{ transform:scale(1.15) rotate(-3deg); } 30%,60%{ transform:scale(1.02); } }
  .buddy[data-act="jump"] img{ animation:jump 1.1s cubic-bezier(.3,.7,.4,1); }
  @keyframes jump{ 0%,100%{ transform:none; } 12%{ transform:scale(1.1,.85); } 40%{ transform:translateY(-44px) scale(.95,1.08) rotate(-5deg); } 62%{ transform:translateY(-44px) rotate(5deg); } 84%{ transform:scale(1.1,.88); } }
  .buddy[data-act="floss"] img{ animation:floss .24s ease-in-out 7 alternate; }
  @keyframes floss{ from{ transform:translateX(-8px) skewX(7deg); } to{ transform:translateX(8px) skewX(-7deg); } }
  .buddy[data-act="photo"] img{ animation:hop .45s ease 2; }
  .buddy[data-act="photo"] .buddy__flash{ animation:flash .6s .3s ease-out; }
  @keyframes hop{ 50%{ transform:translateY(-12px); } }
  @keyframes flash{ 0%{ opacity:0; } 15%{ opacity:1; } 100%{ opacity:0; } }
  .buddy[data-act="oops"] img{ animation:oops .8s ease; }
  @keyframes oops{ 0%,100%{ transform:none; } 15%{ transform:translateX(-7px) rotate(-5deg); } 30%{ transform:translateX(7px) rotate(5deg); } 45%{ transform:translateX(-5px) rotate(-3deg); } 60%{ transform:translateX(3px) rotate(1deg); } }
  .buddy--end{ align-self:center; margin:-4px 0 4px; }
  .buddy-pick__label{ margin:14px 0 6px; text-align:center; font-size:14px; font-weight:700; color:var(--hsm-soft); }
  .buddy-pick{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
  .bp{ display:flex; flex-direction:column; align-items:center; gap:4px; border:0; background:none; cursor:pointer; padding:2px; font-family:'Hanken Grotesk','Segoe UI',sans-serif; font-size:13px; font-weight:700; color:var(--hsm-soft); }
  .bp__img{ width:58px; height:58px; border-radius:50%; background:var(--hsm-mint) no-repeat 50% 4% / 210% auto; box-shadow:inset 0 0 0 2px var(--hsm-line); transition:transform .15s ease; }
  .bp[aria-pressed="true"]{ color:var(--hsm-dark); }
  .bp[aria-pressed="true"] .bp__img{ box-shadow:0 0 0 3px var(--hsm-yellow), inset 0 0 0 2px var(--hsm-dark); transform:scale(1.08); }
  @media (hover:hover){ .bp:hover .bp__img{ transform:scale(1.08); } }

  .fx{ position:fixed; inset:0; pointer-events:none; z-index:80; overflow:hidden; }
  .fx i{ position:absolute; display:block; }
  .fx .plus{ position:absolute; z-index:2; font-weight:800; font-size:28px; font-family:'Hanken Grotesk','Segoe UI',sans-serif; color:var(--hsm-dark); background:var(--hsm-yellow); border-radius:999px; padding:2px 12px; box-shadow:0 3px 0 #B9BC12; }
.buddy__fig{ height:130px; } /* basis; app mag kleiner */
@keyframes breathe{ 50%{ transform:translateY(-2px) scale(1.012); } }
.hsm-sound{ width:44px; height:44px; border:0; background:none; border-radius:50%; display:inline-grid; place-items:center; cursor:pointer; color:var(--hsm-ink); }
.hsm-sound:hover{ background:var(--hsm-mint); }
.hsm-sound svg{ width:26px; height:26px; }
@media (max-width:560px){ .buddy__fig{ height:104px; } .buddy__say{ max-width:116px; font-size:14px; } .bp__img{ width:50px; height:50px; } }
@media (prefers-reduced-motion: reduce){ .buddy__fig img{ animation:none; } }