/* Classboard mascots (js/widgets/mascot.js draws them from js/mascots/). The widget is see-through, so the creature
   stands on the board's own background. The script sets data-mood (awake, sleep, loud) and short classes on .mc:
   is-blink, is-hop, is-cheer (time is up), is-trick (its own trick), is-alert (last ten seconds), is-watch (the dice),
   is-peek (one eye opens in its sleep), is-shake, is-saying (the speech bubble). Only transforms, opacity and colours
   move here; nothing animates a shadow or a blur. */

/* ---------- the widget ---------- */
.w-mascot { background: transparent; box-shadow: none; }
.w-mascot:hover, .w-mascot:focus-within { outline: 2px dashed var(--border-strong); outline-offset: -2px; }
body.presenting .w-mascot { outline: 0; }
.w-mascot .w-body { padding: 0 8px 8px; }
body:is([data-bg="ocean"], [data-bg="forest"], [data-bg="chalk"], [data-bg="sunset"], [data-bg="night"]) .w-mascot :is(.w-head h2, .w-ico, .w-close) { color: var(--on-dark-2); }
.mc { display: flex; flex-direction: column; gap: 6px; height: 100%; --range: 3px; --top: 20%; --sx: 50%; }
.mc-stage { position: relative; flex: 1; min-height: 0; container-type: size; }
.mc-box { position: absolute; left: 50%; bottom: 0; width: min(100cqw, 120cqh); aspect-ratio: 6 / 5; translate: -50% 0; }
.mc-poke { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 24px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mc-art { display: block; width: 100%; height: 100%; overflow: visible; }
.mc-ground { fill: rgba(20,48,44,.15); transform-box: fill-box; transform-origin: center; }
body:is([data-bg="ocean"], [data-bg="forest"], [data-bg="chalk"], [data-bg="sunset"], [data-bg="night"]) .mc-ground { fill: rgba(0,0,0,.24); }

/* the speech bubble, just above the head (each mascot says where its head is: --top, --sx) */
.mc-say { position: absolute; left: var(--sx); bottom: calc(100% - var(--top) + 3%); z-index: 3; width: max-content; max-width: min(94cqw, 280px); margin: 0; padding: .38em .85em .44em; border-radius: 1.1em;
  background: #FFFCF4; color: #143E38; box-shadow: 0 3px 0 rgba(20,62,56,.16), 0 0 0 2px rgba(20,62,56,.1);
  font-size: clamp(13px, min(7.5cqw, 9cqh), 34px); font-weight: 900; line-height: 1.15; text-align: center; text-wrap: balance;
  translate: -50% 0; opacity: 0; scale: .5; transform-origin: 50% 130%; transition: opacity .18s, scale .4s cubic-bezier(.3,1.7,.5,1); pointer-events: none; }
.mc-say::after { content: ""; position: absolute; left: 50%; top: calc(100% - 1px); width: 16px; height: 10px; margin-left: -8px; background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.mc.is-saying .mc-say { opacity: 1; scale: 1; }
.mc-say.is-long { max-width: min(100cqw, 360px); padding: .5em .9em .55em; font-size: clamp(13px, min(6.2cqw, 8cqh), 30px); line-height: 1.22; }

/* the row of mascots (and the button for its lines) under the stage */
.mc-pick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; transition: opacity .25s; }
.mc-opt { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--surface); color: var(--muted); box-shadow: var(--shadow); cursor: pointer; transition: transform .15s; }
.mc-opt svg { width: 24px; height: 24px; }
.mc-opt:hover { transform: translateY(-2px); }
.mc-opt[aria-pressed="true"] { border-color: var(--mc, var(--fg)); }
.mc-lines { margin-left: 6px; color: var(--fg); }
.mc-lines svg { width: 19px; height: 19px; }
.mc-lines[data-n]::after { content: attr(data-n); position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--fox); color: var(--on-fox); font-size: 11px; font-weight: 900; line-height: 1; }

/* the dialog for its lines (built on the kit's class editor look) */
.mc-note { margin: 0 0 6px; color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.45; }
.mc-often-lbl { margin: 10px 0 0; }
.mc-often { align-self: flex-start; }
.mc-talk-sw { margin-top: 10px; font-size: 15px; }
body.presenting .widget:not(:hover):not(:focus-within) .mc-pick { opacity: 0; }
@container (max-height: 175px) { .mc-pick { display: none; } }

/* ---------- life every mascot shares ---------- */
.mc-art :is(.mc-all, .mc-breathe, .mc-head, .mc-lid, .mc-pupil) { transform-box: fill-box; }
.mc-all { transform-origin: 50% 100%; }
.mc-breathe { transform-origin: 50% 100%; animation: mcBreathe 4.4s ease-in-out infinite; }
@keyframes mcBreathe { 50% { transform: scale(1.012, 1.028); } }
.mc-head { transform-origin: 50% 90%; transition: rotate .9s ease-in-out, translate .9s ease-in-out; }
.mc-ol { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* eyes: the pupils look where the script says, the lids blink */
.mc-white { fill: #FFFFFF; }
.mc-pupil { fill: #2A1C14; stroke: none; transform-origin: center; transition: scale .3s; }
.mc-shine { fill: #FFFFFF; stroke: none; }
.mc-look { translate: calc(var(--lx, 0) * var(--range)) calc(var(--ly, 0) * var(--range)); transition: translate .5s cubic-bezier(.3,.8,.3,1); }
.mc-lid { stroke: none; transform: scaleY(0); transform-origin: 50% 0; transition: transform .1s ease-in; }
.mc-shut, .mc-happy { fill: none; stroke-width: 3; opacity: 0; transition: opacity .15s; }

/* mouths */
.mc-m-smile, .mc-m-open, .mc-m-o, .mc-m-sleep { transition: opacity .15s; }
.mc-m-open, .mc-m-o, .mc-m-sleep { opacity: 0; }

/* the paws that cover the ears */
.mc-cover { opacity: 0; translate: 0 26px; transition: opacity .2s, translate .35s cubic-bezier(.3,1.4,.5,1); }

/* asleep: the traffic light is red or the class works in silence */
.mc[data-mood="sleep"] .mc-breathe { animation-duration: 6.5s; }
.mc[data-mood="sleep"]:not(.is-cheer):not(.is-peek) .mc-head { rotate: 3deg; translate: 0 3px; }
.mc[data-mood="sleep"] .mc-lid { transform: scaleY(1); }
.mc[data-mood="sleep"] .mc-shut { opacity: 1; }
.mc[data-mood="sleep"] .mc-m-smile { opacity: 0; }
.mc[data-mood="sleep"] .mc-m-sleep { opacity: 1; }
.mc.is-peek .mc-eye.r .mc-lid { transform: scaleY(0); }
.mc.is-peek .mc-eye.r .mc-shut { opacity: 0; }
.mc-zzz text { font-size: 15px; font-weight: 900; fill: #6C7BEA; stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mc-zzz text:last-child { font-size: 19px; }
body:is([data-bg="ocean"], [data-bg="forest"], [data-bg="chalk"], [data-bg="sunset"], [data-bg="night"]) .mc-zzz text { fill: #C3CBFF; }
.mc[data-mood="sleep"]:not(.is-cheer):not(.is-peek) .mc-zzz text { animation: mcZ 3.6s ease-out infinite; animation-delay: calc(var(--k) * 1.2s); }
@keyframes mcZ { 0% { opacity: 0; transform: translate(-6px, 8px) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(10px, -26px) scale(1.15); } }

/* too loud: squint, shiver and cover the ears */
.mc[data-mood="loud"] .mc-lid { transform: scaleY(.58); }
.mc[data-mood="loud"] .mc-m-smile { opacity: 0; }
.mc[data-mood="loud"] .mc-m-o { opacity: 1; }
.mc[data-mood="loud"] .mc-cover { opacity: 1; translate: 0 0; }
.mc[data-mood="loud"] .mc-all { animation: mcShiver .3s linear infinite; }
@keyframes mcShiver { 25% { transform: translateX(-1.2px); } 75% { transform: translateX(1.2px); } }

/* a blink, a hop, eager in the last seconds, watching the dice, a shake of the head */
.mc.is-blink .mc-lid { transform: scaleY(1); }
.mc.is-hop .mc-all { animation: mcHop .65s cubic-bezier(.3,1.4,.5,1) 2; }
.mc.is-hop .mc-ground { animation: mcShadow .65s cubic-bezier(.3,1.4,.5,1) 2; }
@keyframes mcHop { 0%, 100% { transform: none; } 22% { transform: scale(1.06, .92); } 55% { transform: translateY(-16px) scale(.97, 1.04); } 80% { transform: scale(1.03, .97); } }
@keyframes mcShadow { 55% { transform: scale(.75); opacity: .55; } }
.mc.is-alert .mc-all { animation: mcEager .5s ease-in-out infinite; }
.mc.is-alert .mc-pupil { scale: .8; }
@keyframes mcEager { 50% { transform: translateY(-3px); } }
.mc.is-watch .mc-look { animation: mcDart .28s ease-in-out infinite alternate; }
@keyframes mcDart { from { translate: calc(-1 * var(--range)) 0; } to { translate: var(--range) 0; } }
.mc.is-shake .mc-all { animation: mcNo .5s ease-in-out; }
@keyframes mcNo { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* time is up: happy eyes, an open smile, three hops and a burst of stars */
.mc:is(.is-cheer, .is-hop) .mc-m-open { opacity: 1; }
.mc:is(.is-cheer, .is-hop) :is(.mc-m-smile, .mc-m-sleep, .mc-m-o) { opacity: 0; }
.mc.is-cheer .mc-lid { transform: scaleY(1); }
.mc.is-cheer .mc-shut { opacity: 0; }
.mc.is-cheer .mc-happy { opacity: 1; }
.mc.is-cheer .mc-all { animation: mcHop .7s cubic-bezier(.3,1.4,.5,1) 3; }
.mc.is-cheer .mc-ground { animation: mcShadow .7s cubic-bezier(.3,1.4,.5,1) 3; }
.mc-burst path { opacity: 0; transform-box: fill-box; transform-origin: center; }
.mc-burst .s0 { fill: #FFC93C; } .mc-burst .s1 { fill: #FF7AA8; } .mc-burst .s2 { fill: #4CC9F0; }
.mc.is-cheer .mc-burst path { animation: mcBurst 1.3s cubic-bezier(.2,.8,.3,1) 2 both; animation-delay: calc(.15s + var(--d)); }
@keyframes mcBurst { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(90deg); } }

/* ---------- the frog: throat puffs; trick: catches a fly ---------- */
.mc[data-kind="frog"] { --range: 3.5px; --top: 24%; }
.fr-sac { transform-box: fill-box; transform-origin: 50% 20%; animation: frSac 11s ease-in-out infinite; }
@keyframes frSac { 0%, 84%, 90%, 96%, 100% { transform: none; } 87% { transform: scale(1.3, 1.45); } 93% { transform: scale(1.25, 1.4); } }
.fr-arms { transition: opacity .2s; }
.mc[data-kind="frog"][data-mood="loud"] .fr-arms { opacity: 0; }
.fr-tongue { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; }
.fr-fly { opacity: 0; }
.fr-wing { transform-box: fill-box; transform-origin: 50% 100%; }
.mc[data-kind="frog"].is-trick .fr-fly { animation: frFly 2.6s linear both; }
.mc[data-kind="frog"].is-trick .fr-wing { animation: frBuzz .07s linear infinite alternate; }
.mc[data-kind="frog"].is-trick .fr-tongue { animation: frTongue 2.6s both; }
.mc[data-kind="frog"].is-trick .mc-look { translate: 3px -2.6px; }
.mc[data-kind="frog"].is-trick .mc-m-smile { animation: frSmile 2.6s both; }
.mc[data-kind="frog"].is-trick .mc-m-o { animation: frGape 2.6s both; }
.mc[data-kind="frog"].is-trick .fr-sac { animation: frGulp 2.6s both; }
.mc[data-kind="frog"].is-trick .mc-lid { animation: frContent 2.6s both; }
.mc[data-kind="frog"].is-trick .mc-happy { animation: frHappy 2.6s both; }
@keyframes frFly {
  0% { opacity: 0; transform: translate(238px, 26px); }
  8% { opacity: 1; transform: translate(216px, 16px); }
  18% { transform: translate(194px, 42px); }
  28% { transform: translate(216px, 60px); }
  38% { transform: translate(200px, 34px); }
  46% { transform: translate(190px, 66px); }
  51%, 55% { opacity: 1; transform: translate(185px, 78px); }
  61% { opacity: 1; transform: translate(124px, 107px) scale(.6); }
  62%, 100% { opacity: 0; transform: translate(124px, 107px) scale(.6); }
}
@keyframes frBuzz { to { transform: scaleY(.35); } }
@keyframes frTongue { 0%, 50% { transform: scaleX(0); } 53%, 55% { transform: scaleX(1); } 61%, 100% { transform: scaleX(0); } }
@keyframes frSmile { 0%, 47%, 66%, 100% { opacity: 1; } 49%, 64% { opacity: 0; } }
@keyframes frGape { 0%, 47%, 66%, 100% { opacity: 0; } 49%, 64% { opacity: 1; } }
@keyframes frGulp { 0%, 63%, 80%, 100% { transform: none; } 68% { transform: scale(1.5, 1.7); } 74% { transform: scale(1.15, 1.2); } }
@keyframes frContent { 0%, 76%, 98%, 100% { transform: scaleY(0); } 80%, 94% { transform: scaleY(1); } }
@keyframes frHappy { 0%, 78%, 96%, 100% { opacity: 0; } 82%, 92% { opacity: 1; } }

/* ---------- the penguin: sways and flaps; trick: a belly slide ---------- */
.mc[data-kind="penguin"] { --range: 2.6px; --top: 19%; }
.mc-art :is(.pg-all, .pg-sway, .pg-fl, .pg-swoosh) { transform-box: view-box; }
.pg-all { transform-origin: 120px 118px; }
.pg-sway { transform-origin: 120px 188px; animation: pgSway 6s ease-in-out infinite; }
@keyframes pgSway { 25% { transform: rotate(-1.6deg); } 75% { transform: rotate(1.6deg); } }
.mc[data-kind="penguin"][data-mood="sleep"] .pg-sway { animation-duration: 10s; }
.pg-fl { transition: opacity .2s; }
.pg-fl.l { transform-origin: 76px 104px; animation: pgFlapL 10s ease-in-out infinite; }
.pg-fl.r { transform-origin: 164px 104px; animation: pgFlapR 10s ease-in-out infinite; animation-delay: -5s; }
@keyframes pgFlapL { 0%, 86%, 100% { transform: none; } 89%, 95% { transform: rotate(22deg); } 92% { transform: rotate(6deg); } }
@keyframes pgFlapR { 0%, 86%, 100% { transform: none; } 89%, 95% { transform: rotate(-22deg); } 92% { transform: rotate(-6deg); } }
.mc[data-kind="penguin"][data-mood="loud"] .pg-fl { opacity: 0; }
.pg-beak-low { transition: translate .2s; }
.mc[data-kind="penguin"]:is(.is-cheer, .is-hop, .is-trick, [data-mood="loud"]) .pg-beak-low { translate: 0 3.5px; }
.mc[data-kind="penguin"].is-cheer .pg-fl.l { animation: pgFlutterL .2s ease-in-out 12 alternate; }
.mc[data-kind="penguin"].is-cheer .pg-fl.r { animation: pgFlutterR .2s ease-in-out 12 alternate; }
@keyframes pgFlutterL { to { transform: rotate(32deg); } }
@keyframes pgFlutterR { to { transform: rotate(-32deg); } }
.pg-swoosh { opacity: 0; }
.mc[data-kind="penguin"].is-trick .pg-all { animation: pgSlide 3.2s cubic-bezier(.4,0,.3,1) both; }
.mc[data-kind="penguin"].is-trick .pg-swoosh { animation: pgSwoosh 3.2s linear both; }
.mc[data-kind="penguin"].is-trick .mc-lid { animation: pgEyes 3.2s both; }
.mc[data-kind="penguin"].is-trick .mc-happy { animation: pgHappy 3.2s both; }
@keyframes pgSlide {
  0% { transform: none; }
  9% { transform: translate(0, 6px) scale(1.06, .9); }
  18% { transform: translate(-6px, 16px) rotate(-90deg); }
  46% { transform: translate(-48px, 16px) rotate(-90deg); }
  52% { transform: translate(-50px, 16px) rotate(-90deg); }
  60% { transform: translate(-48px, -6px) rotate(0); }
  64% { transform: translate(-48px, 2px) scale(1.04, .95); }
  72% { transform: translate(-36px, 0) rotate(7deg); }
  80% { transform: translate(-24px, 0) rotate(-7deg); }
  88% { transform: translate(-12px, 0) rotate(7deg); }
  95% { transform: translate(-3px, 0) rotate(-3deg); }
  100% { transform: none; }
}
@keyframes pgSwoosh { 0%, 18% { opacity: 0; transform: translate(-8px, 0); } 24%, 44% { opacity: 1; } 46% { transform: translate(-50px, 0); } 54%, 100% { opacity: 0; transform: translate(-54px, 0); } }
@keyframes pgEyes { 0%, 14%, 58%, 100% { transform: scaleY(0); } 18%, 54% { transform: scaleY(1); } }
@keyframes pgHappy { 0%, 15%, 56%, 100% { opacity: 0; } 19%, 53% { opacity: 1; } }

/* ---------- the dragon: wings flutter, tail sways; trick: smoke rings; time's up: sparks ---------- */
.mc[data-kind="dragon"] { --range: 3px; --top: 9%; }
.mc-art :is(.dr-wing, .dr-tail) { transform-box: view-box; }
.dr-wing.l { transform-origin: 92px 110px; animation: drWingL 8s ease-in-out infinite; }
.dr-wing.r { transform-origin: 148px 110px; animation: drWingR 8s ease-in-out infinite; }
@keyframes drWingL { 0%, 84%, 100% { transform: none; } 87%, 93% { transform: rotate(-14deg); } 90%, 96% { transform: rotate(5deg); } }
@keyframes drWingR { 0%, 84%, 100% { transform: none; } 87%, 93% { transform: rotate(14deg); } 90%, 96% { transform: rotate(-5deg); } }
.dr-tail { transform-origin: 150px 172px; animation: drTail 5s ease-in-out infinite; }
@keyframes drTail { 50% { transform: rotate(-7deg); } }
.dr-arms { transition: opacity .2s; }
.mc[data-kind="dragon"][data-mood="loud"] .dr-arms { opacity: 0; }
.mc[data-kind="dragon"][data-mood="loud"] .dr-wing { animation: none; }
.dr-cheeks ellipse { transform-box: fill-box; transform-origin: center; }
.dr-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.dr-ring ellipse { vector-effect: non-scaling-stroke; }
.mc[data-kind="dragon"].is-trick .mc-breathe { animation: drInhale 2.8s ease-in-out both; }
.mc[data-kind="dragon"].is-trick .dr-cheeks ellipse { animation: drPuff 2.8s ease-in-out both; }
.mc[data-kind="dragon"].is-trick .mc-m-smile { animation: drSmile 2.8s both; }
.mc[data-kind="dragon"].is-trick .mc-m-o { animation: drO 2.8s both; }
.mc[data-kind="dragon"].is-trick .mc-look { translate: 2.4px -2.4px; }
.mc[data-kind="dragon"].is-trick .mc-head { animation: drTilt 2.8s ease-in-out both; }
.mc[data-kind="dragon"].is-trick .dr-ring { animation: drRing 1.5s cubic-bezier(.2,.7,.4,1) both; animation-delay: calc(.72s + var(--k) * .38s); }
.mc[data-kind="dragon"].is-trick .mc-lid { animation: drContent 2.8s both; }
.mc[data-kind="dragon"].is-trick .mc-happy { animation: drHappy 2.8s both; }
@keyframes drInhale { 0%, 100% { transform: none; } 20% { transform: scale(1.05, 1.07); } 30% { transform: scale(.98, .97); } 60% { transform: scale(1.01); } }
@keyframes drPuff { 0%, 30%, 100% { transform: none; } 10%, 22% { transform: scale(1.5); } }
@keyframes drSmile { 0%, 22%, 78%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes drO { 0%, 22%, 78%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } }
@keyframes drRing { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(72px, -66px) scale(3); } }
@keyframes drTilt { 0%, 18%, 82%, 100% { rotate: 0deg; } 26%, 74% { rotate: 7deg; } }
@keyframes drContent { 0%, 80%, 98%, 100% { transform: scaleY(0); } 84%, 94% { transform: scaleY(1); } }
@keyframes drHappy { 0%, 82%, 96%, 100% { opacity: 0; } 86%, 92% { opacity: 1; } }
.mc[data-kind="dragon"].is-cheer .dr-wing.l { animation: drFlapL .24s ease-in-out 10 alternate; }
.mc[data-kind="dragon"].is-cheer .dr-wing.r { animation: drFlapR .24s ease-in-out 10 alternate; }
@keyframes drFlapL { from { transform: rotate(6deg); } to { transform: rotate(-18deg); } }
@keyframes drFlapR { from { transform: rotate(-6deg); } to { transform: rotate(18deg); } }
.dr-sparks circle { opacity: 0; }
.mc[data-kind="dragon"].is-cheer .dr-sparks circle { animation: drSpark 1.2s cubic-bezier(.2,.8,.3,1) 2 both; animation-delay: var(--d); }
@keyframes drSpark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); } }

/* ---------- the turtle: bobs its head; too loud: hides in its shell; trick: spins like a top ---------- */
.mc[data-kind="turtle"] { --range: 2.2px; --top: 42%; --sx: 74%; }
.mc-art :is(.tt-all, .tt-spin, .tt-legs, .tt-tail, .tt-head) { transform-box: view-box; }
.tt-spin { transform-origin: 110px 130px; }
.tt-head { transform-origin: 186px 112px; transition: transform .35s cubic-bezier(.4,0,.6,1), rotate .9s ease-in-out, translate .9s ease-in-out; }
.tt-all { transition: translate .35s ease-in; }
.tt-legs, .tt-tail { transition: transform .3s ease-in; }
.tt-bob { transform-box: fill-box; transform-origin: 30% 90%; animation: ttBob 7s ease-in-out infinite; }
@keyframes ttBob { 50% { transform: translate(1.5px, -2.5px) rotate(-3deg); } }
.mc[data-kind="turtle"][data-mood="loud"] .tt-head { transform: translate(-52px, 14px) scale(.8); }
.mc[data-kind="turtle"][data-mood="loud"] .tt-legs { transform: translateY(-22px); }
.mc[data-kind="turtle"][data-mood="loud"] .tt-tail { transform: translate(14px, -4px); }
.mc[data-kind="turtle"][data-mood="loud"] .tt-all { translate: 0 12px; }
.mc[data-kind="turtle"][data-mood="loud"] .mc-all { animation: ttTremble .2s linear infinite; }
@keyframes ttTremble { 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } }
.mc[data-kind="turtle"].is-trick .tt-head { animation: ttHead 2.8s both; }
.mc[data-kind="turtle"].is-trick .tt-legs { animation: ttLegs 2.8s both; }
.mc[data-kind="turtle"].is-trick .tt-tail { animation: ttTail 2.8s both; }
.mc[data-kind="turtle"].is-trick .tt-all { animation: ttDrop 2.8s both; }
.mc[data-kind="turtle"].is-trick .tt-spin { animation: ttSpin 2.8s ease-in-out both; }
.mc[data-kind="turtle"].is-trick .mc-lid { animation: ttContent 2.8s both; }
.mc[data-kind="turtle"].is-trick .mc-happy { animation: ttHappy 2.8s both; }
@keyframes ttHead { 0% { transform: none; } 10%, 72% { transform: translate(-52px, 14px) scale(.8); } 79% { transform: translate(5px, -5px) scale(1.08); } 85%, 100% { transform: none; } }
@keyframes ttLegs { 0% { transform: none; } 10%, 72% { transform: translateY(-22px); } 80%, 100% { transform: none; } }
@keyframes ttTail { 0% { transform: none; } 10%, 72% { transform: translate(14px, -4px); } 80%, 100% { transform: none; } }
@keyframes ttDrop { 0% { transform: none; } 10%, 72% { transform: translateY(12px); } 80%, 100% { transform: none; } }
@keyframes ttSpin { 0%, 14% { transform: none; } 26% { transform: scaleX(-1); } 38% { transform: none; } 50% { transform: scaleX(-1); } 62%, 100% { transform: none; } }
@keyframes ttContent { 0%, 80%, 98%, 100% { transform: scaleY(0); } 84%, 94% { transform: scaleY(1); } }
@keyframes ttHappy { 0%, 82%, 96%, 100% { opacity: 0; } 86%, 92% { opacity: 1; } }
.mc[data-kind="turtle"].is-cheer .tt-leg { animation: ttPaddle .22s ease-in-out 12 alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes ttPaddle { to { transform: rotate(14deg); } }

/* ---------- the octopus: arms wave; trick: juggles; time's up: rainbow colours ---------- */
.mc[data-kind="octopus"] { --range: 3.4px; --top: 17%; }
.oc-t { transform-box: view-box; animation: ocWave 5.4s ease-in-out infinite; animation-delay: calc(var(--k) * -.9s); transition: opacity .2s; }
@keyframes ocWave { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.mc[data-kind="octopus"][data-mood="sleep"] .oc-t { animation-duration: 9s; }
.mc[data-kind="octopus"][data-mood="loud"] :is(.t1, .t6) { opacity: 0; }
.oc-balls { opacity: 0; }
.mc[data-kind="octopus"].is-trick .oc-balls { animation: ocShow 3.6s both; }
.mc[data-kind="octopus"].is-trick .oc-bx { animation: ocX 1.5s linear infinite; animation-delay: calc(var(--k) * -.5s); }
.mc[data-kind="octopus"].is-trick .oc-by { animation: ocY 1.5s infinite; animation-delay: calc(var(--k) * -.5s); }
.mc[data-kind="octopus"].is-trick .t1 { animation: ocLiftL 3.6s ease-in-out both; }
.mc[data-kind="octopus"].is-trick .t6 { animation: ocLiftR 3.6s ease-in-out both; }
.mc[data-kind="octopus"].is-trick .mc-look { translate: 0 -3.4px; }
@keyframes ocShow { 0%, 3% { opacity: 0; } 8%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ocX { 0%, 100% { transform: translateX(36px); } 50% { transform: translateX(204px); } }
@keyframes ocY { 0%, 50%, 100% { transform: translateY(130px); animation-timing-function: cubic-bezier(.33,.66,.66,1); } 25%, 75% { transform: translateY(8px); animation-timing-function: cubic-bezier(.33,0,.66,.33); } }
@keyframes ocLiftL { 0%, 100% { transform: none; } 8%, 92% { transform: rotate(50deg); } }
@keyframes ocLiftR { 0%, 100% { transform: none; } 8%, 92% { transform: rotate(-50deg); } }
.mc[data-kind="octopus"].is-cheer :is(.oc-skin, .mc-lid) { animation: ocHue 2.8s linear both; }
.mc[data-kind="octopus"].is-cheer :is(.oc-t, .mc-cover) path:last-child { animation: ocHueS 2.8s linear both; }
@keyframes ocHue { 0%, 100% { fill: #F2789A; } 20% { fill: #FFB347; } 40% { fill: #8FD16B; } 60% { fill: #4CC9F0; } 80% { fill: #B38CFF; } }
@keyframes ocHueS { 0%, 100% { stroke: #F2789A; } 20% { stroke: #FFB347; } 40% { stroke: #8FD16B; } 60% { stroke: #4CC9F0; } 80% { stroke: #B38CFF; } }

/* ---------- the robot: a face of light; trick: heart eyes and a wave; time's up: star eyes ---------- */
.mc[data-kind="robot"] { --range: 3px; --top: 6%; }
.rb-arm { transform-box: view-box; transition: transform .45s cubic-bezier(.3,1.3,.5,1); }
.rb-arm.l { transform-origin: 84px 128px; }
.rb-arm.r { transform-origin: 156px 128px; }
.rb-look { translate: calc(var(--lx, 0) * var(--range)) calc(var(--ly, 0) * var(--range)); transition: translate .5s cubic-bezier(.3,.8,.3,1); }
.rb-eyes { transform-box: fill-box; transform-origin: center; transition: transform .08s, opacity .15s; }
.rb-smile, .rb-zz, .rb-squint, .rb-wavy, .rb-open, .rb-hearts, .rb-stars { transition: opacity .15s; }
.rb-zz, .rb-squint, .rb-wavy, .rb-open, .rb-hearts, .rb-stars { opacity: 0; }
.rb-hearts path, .rb-stars path { transform-box: fill-box; transform-origin: center; }
.rb-screen { transition: fill .6s; }
.rb-glow { opacity: .22; transform-box: fill-box; transform-origin: center; animation: rbGlow 3s ease-in-out infinite; }
@keyframes rbGlow { 50% { opacity: .05; transform: scale(.7); } }
.rb-btn { animation: rbBtn 6s steps(1) infinite; animation-delay: calc(var(--k) * .4s); }
@keyframes rbBtn { 0%, 88%, 100% { opacity: 1; } 90%, 94% { opacity: .35; } }
.mc[data-kind="robot"].is-blink .rb-eyes { transform: scaleY(.12); }
.mc[data-kind="robot"].is-alert .rb-eyes { transform: scale(1.15); }
.mc[data-kind="robot"][data-mood="sleep"]:not(.is-cheer):not(.is-peek) :is(.rb-eyes, .rb-smile) { opacity: 0; }
.mc[data-kind="robot"][data-mood="sleep"]:not(.is-cheer):not(.is-peek) .rb-zz { opacity: 1; }
.mc[data-kind="robot"][data-mood="sleep"] .rb-screen { fill: #141D28; }
.mc[data-kind="robot"][data-mood="sleep"] .rb-glow { animation-duration: 6s; }
.mc[data-kind="robot"][data-mood="loud"] .rb-arm.l { transform: rotate(133deg); }
.mc[data-kind="robot"][data-mood="loud"] .rb-arm.r { transform: rotate(-133deg); }
.mc[data-kind="robot"][data-mood="loud"] :is(.rb-eyes, .rb-smile) { opacity: 0; }
.mc[data-kind="robot"][data-mood="loud"] :is(.rb-squint, .rb-wavy) { opacity: 1; }
.mc[data-kind="robot"][data-mood="loud"] .rb-glow { animation-duration: .6s; }
.mc[data-kind="robot"]:is(.is-cheer, .is-hop) .rb-smile { opacity: 0; }
.mc[data-kind="robot"]:is(.is-cheer, .is-hop) .rb-open { opacity: 1; }
.mc[data-kind="robot"].is-cheer :is(.rb-eyes, .rb-zz) { opacity: 0; }
.mc[data-kind="robot"].is-cheer .rb-stars { opacity: 1; }
.mc[data-kind="robot"].is-cheer .rb-stars path { animation: rbPulse .35s ease-in-out infinite alternate; }
.mc[data-kind="robot"].is-cheer .rb-arm.l { animation: rbCheerL .3s ease-in-out 9 alternate; }
.mc[data-kind="robot"].is-cheer .rb-arm.r { animation: rbCheerR .3s ease-in-out 9 alternate; }
.mc[data-kind="robot"]:is(.is-cheer, .is-trick) .rb-bulb { animation: rbRainbow .8s steps(1) infinite; }
@keyframes rbPulse { to { transform: scale(1.2) rotate(12deg); } }
@keyframes rbCheerL { from { transform: rotate(112deg); } to { transform: rotate(140deg); } }
@keyframes rbCheerR { from { transform: rotate(-112deg); } to { transform: rotate(-140deg); } }
@keyframes rbRainbow { 0% { fill: #FF6B6B; } 25% { fill: #FFC93C; } 50% { fill: #7BD389; } 75% { fill: #5EC8F0; } }
.mc[data-kind="robot"].is-trick .rb-eyes { animation: rbHide 2.6s both; }
.mc[data-kind="robot"].is-trick .rb-hearts { animation: rbShow 2.6s both; }
.mc[data-kind="robot"].is-trick .rb-hearts path { animation: rbBeat .36s ease-in-out infinite alternate; }
.mc[data-kind="robot"].is-trick .rb-arm.r { animation: rbWave 2.6s ease-in-out both; }
.mc[data-kind="robot"].is-trick .rb-btn { animation: rbBtn .45s steps(1) infinite; animation-delay: calc(var(--k) * .15s); }
@keyframes rbHide { 0%, 8%, 88%, 100% { opacity: 1; } 12%, 84% { opacity: 0; } }
@keyframes rbShow { 0%, 8%, 88%, 100% { opacity: 0; } 12%, 84% { opacity: 1; } }
@keyframes rbBeat { to { transform: scale(1.22); } }
@keyframes rbWave { 0%, 100% { transform: none; } 12% { transform: rotate(-125deg); } 22%, 42% { transform: rotate(-105deg); } 32%, 52% { transform: rotate(-142deg); } 62% { transform: rotate(-110deg); } 72% { transform: rotate(-125deg); } 86% { transform: none; } }

/* ---------- still for those who asked for less motion: the moods still show ---------- */
@media (prefers-reduced-motion: reduce) {
  .mc-art, .mc-art * { animation: none !important; }
  .mc[data-mood="sleep"] .mc-zzz text { opacity: .85; }
  .mc-say { transition: opacity .2s; }
}