/* ---------- Living pets: articulated SVG + idle/eating motion ---------- */
      .pet-face { position: relative; isolation: isolate; }
      .pet-face::after {
        content: ""; position: absolute; z-index: 0; left: 7%; right: 7%; bottom: 1%; height: 17%;
        border-radius: 50%; background: radial-gradient(ellipse at center, rgba(35,50,70,.16), transparent 68%);
      }
      .pet-svg { display: block; overflow: visible; position: relative; z-index: 1; transform-origin: 50% 88%; }
      .pet-svg .head, .pet-svg .body, .pet-svg .ear, .pet-svg .tail, .pet-svg .eyes,
      .pet-svg .mouth, .pet-svg .paw-front, .pet-svg .wing, .pet-svg .tongue,
      .pet-svg .nose, .pet-svg .beak, .pet-svg .legs {
        transform-box: fill-box;
      }
      .pet-svg .body { transform-origin: 50% 92%; animation: petBreathe 2.7s ease-in-out infinite alternate; }
      .pet-svg .head { transform-origin: 50% 88%; animation: petHeadSway 4.2s ease-in-out infinite alternate; }
      .pet-svg .eyes { transform-origin: 50% 50%; animation: petBlink 4.8s ease-in-out infinite; }
      .pet-svg .tail { transform-origin: 12% 88%; animation: petTailSway 1.5s ease-in-out infinite alternate; }
      .pet-svg .ear-l { transform-origin: 70% 90%; }
      .pet-svg .ear-r { transform-origin: 30% 90%; animation: petEarTwitch 6.5s ease-in-out infinite; }
      .pet-cat .tail { animation-duration: 1.15s; }
      .pet-dog .tail { transform-origin: 8% 92%; animation: dogTailWag .26s ease-in-out infinite alternate; }
      .pet-dog .ear-l, .pet-dog .ear-r { animation: dogEarFlop 1.7s ease-in-out infinite alternate; }
      .pet-dog .tongue { transform-origin: 50% 0%; animation: dogPant .48s ease-in-out infinite alternate; }
      .pet-rabbit .nose { transform-origin: 50% 50%; animation: rabbitNose .34s ease-in-out infinite alternate; }
      .pet-rabbit .ear-r { animation-duration: 7.5s; }
      .pet-hen .wing { transform-origin: 20% 15%; animation: henWingIdle 5.2s ease-in-out infinite; }
      .pet-hen .tail { transform-origin: 88% 55%; animation-duration: 2.2s; }
      @keyframes petBreathe { from { transform: scale(1, 1); } to { transform: scale(1.018, 1.035); } }
      @keyframes petHeadSway { from { transform: rotate(-.7deg) translateY(0); } to { transform: rotate(.9deg) translateY(1.5px); } }
      @keyframes petBlink { 0%, 43%, 55%, 100% { transform: scaleY(1); } 47%, 51% { transform: scaleY(.1); } }
      @keyframes petTailSway { from { transform: rotate(-4deg); } to { transform: rotate(7deg); } }
      @keyframes dogTailWag { from { transform: rotate(-11deg); } to { transform: rotate(13deg); } }
      @keyframes dogEarFlop { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(3deg) translateY(2px); } }
      @keyframes dogPant { from { transform: translateY(0) scaleY(.88); } to { transform: translateY(2px) scaleY(1.1); } }
      @keyframes rabbitNose { from { transform: translateX(-1.4px) scale(1); } to { transform: translateX(1.4px) scale(1.08); } }
      @keyframes petEarTwitch { 0%, 68%, 82%, 100% { transform: rotate(0); } 72%, 78% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } }
      @keyframes henWingIdle { 0%, 76%, 100% { transform: rotate(0); } 82%, 92% { transform: rotate(-8deg); } 87% { transform: rotate(3deg); } }

      /* Eating: head dips to the arriving food and the mouth chews. */
      .pet-face.is-eating .head { animation: petEatHead .21s ease-in-out 7 alternate; }
      .pet-face.is-eating .mouth { transform-origin: 50% 35%; animation: petChew .16s ease-in-out 9 alternate; }
      .pet-face.is-eating .tail { animation-duration: .22s; }
      .pet-face.is-eating .pet-dog .tongue, .pet-face.is-eating .tongue { animation-duration: .2s; }
      @keyframes petEatHead { from { transform: rotate(1deg) translateY(0); } to { transform: rotate(4deg) translateY(7px); } }
      @keyframes petChew { from { transform: scale(.92, .55); } to { transform: scale(1.08, 1.38) translateY(1px); } }
      .pet-face.is-swallowing .head { animation: petSwallow .55s ease-in-out 1; }
      .pet-face.is-swallowing .mouth { transform-origin: 50% 50%; animation: petLick .55s ease-in-out 1; }
      @keyframes petSwallow { 0%,100% { transform: translateY(5px) rotate(2deg); } 45% { transform: translateY(-3px) rotate(-1deg); } }
      @keyframes petLick { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22, .72) translateX(3px); } }

      /* Random idle behaviours, added one at a time by JS. */
      .pet-face.idle-groom .head { animation: catGroomHead 2.35s ease-in-out 1; }
      .pet-face.idle-groom .paw-front { transform-origin: 75% 85%; animation: catGroomPaw 2.35s ease-in-out 1; }
      @keyframes catGroomHead { 0%,100% { transform: rotate(0) translate(0,0); } 22%,78% { transform: rotate(-7deg) translate(-13px, 15px); } 38%,62% { transform: rotate(-9deg) translate(-15px, 19px); } 50% { transform: rotate(-6deg) translate(-11px, 13px); } }
      @keyframes catGroomPaw { 0%,100% { transform: rotate(0) translate(0,0); } 22%,78% { transform: rotate(-24deg) translate(7px,-29px); } 50% { transform: rotate(-19deg) translate(5px,-25px); } }
      .pet-face.idle-yawn .mouth { transform-origin: 50% 40%; animation: petYawn 1.65s ease-in-out 1; }
      .pet-face.idle-yawn .head { animation: petYawnHead 1.65s ease-in-out 1; }
      @keyframes petYawn { 0%,100% { transform: scale(1); } 42%,68% { transform: scale(1.35, 2.15) translateY(3px); } }
      @keyframes petYawnHead { 0%,100% { transform: rotate(0); } 45%,65% { transform: rotate(-3deg) translateY(-2px); } }
      .pet-face.idle-ear .ear-r { animation: petEarBigTwitch .75s ease-in-out 2; }
      @keyframes petEarBigTwitch { 0%,100% { transform: rotate(0); } 35% { transform: rotate(13deg); } 65% { transform: rotate(-7deg); } }
      .pet-face.idle-look .head { animation: petLookAround 1.9s ease-in-out 1; }
      @keyframes petLookAround { 0%,100% { transform: translateX(0) rotate(0); } 28% { transform: translateX(-5px) rotate(-3deg); } 62% { transform: translateX(5px) rotate(3deg); } }
      .pet-face.idle-step .pet-svg { animation: petSmallSteps 1.55s ease-in-out 1; }
      .pet-face.idle-walk .pet-svg { animation: petWalkSteps 2s ease-in-out 1; }
      @keyframes petSmallSteps { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px) rotate(-1deg); } 55% { transform: translateX(6px) rotate(1deg); } 78% { transform: translateX(2px); } }
      @keyframes petWalkSteps { 0%,100% { transform: translateX(0) translateY(0); } 18% { transform: translateX(-11px) translateY(-2px); } 38% { transform: translateX(-5px); } 58% { transform: translateX(10px) translateY(-2px); } 78% { transform: translateX(13px); } }
      .pet-face.idle-sniff .head { animation: dogSniff 2.1s ease-in-out 1; }
      .pet-face.idle-sniff .ear-l, .pet-face.idle-sniff .ear-r { animation: dogSniffEars 2.1s ease-in-out 1; }
      @keyframes dogSniff { 0%,100% { transform: rotate(0) translateY(0); } 30%,72% { transform: rotate(7deg) translateY(17px); } 45%,58% { transform: rotate(8deg) translateY(19px) translateX(2px); } }
      @keyframes dogSniffEars { 0%,100% { transform: rotate(0); } 35%,70% { transform: rotate(8deg) translateY(5px); } }
      .pet-face.idle-hop .pet-svg { animation: rabbitHop 0.78s cubic-bezier(.28,.84,.42,1) 1; }
      @keyframes rabbitHop { 0%,100% { transform: translateY(0) scale(1); } 42% { transform: translateY(-25px) scale(1.02,.98); } 68% { transform: translateY(1px) scale(.99,1.02); } }
      .pet-face.idle-earflop .ear-r { animation: rabbitEarFlop 1.5s ease-in-out 1; }
      @keyframes rabbitEarFlop { 0%,100% { transform: rotate(0); } 35%,68% { transform: rotate(24deg) translateY(7px); } }
      .pet-face.idle-peck .head { animation: henPeck 0.38s ease-in-out 5 alternate; }
      .pet-face.idle-peck .beak { transform-origin: 50% 0%; animation: henBeak 0.38s ease-in-out 5 alternate; }
      @keyframes henPeck { from { transform: rotate(1deg) translateY(0); } to { transform: rotate(9deg) translateY(13px); } }
      @keyframes henBeak { from { transform: scaleY(1); } to { transform: scaleY(1.22); } }
      .pet-face.idle-flap .wing { animation: henFlap .2s ease-in-out 8 alternate; }
      @keyframes henFlap { from { transform: rotate(2deg); } to { transform: rotate(-24deg) translateY(-3px); } }
      .pet-face.idle-walk .legs { transform-origin: 50% 0%; animation: henLegs .24s ease-in-out 8 alternate; }
      @keyframes henLegs { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

      /* Full / celebration states differ per animal. */
      .pet-face.is-full .pet-svg { animation: petCelebrate .55s ease-in-out 3; }
      .pet-face.is-full[data-pet="cat"] .pet-svg, .pet-face.is-full[data-pet="rabbit"] .pet-svg { animation: petCurlSleep 2.6s ease-in-out 1 forwards; }
      .pet-face.is-full .tail { animation-duration: .2s; }
      @keyframes petCelebrate { 0%,100% { transform: translateY(0); } 38% { transform: translateY(-17px) rotate(1.5deg); } 70% { transform: translateY(1px); } }
      @keyframes petCurlSleep { 0% { transform: translateY(0) scale(1); } 22% { transform: translateY(-12px); } 48%,100% { transform: translateY(9px) scale(.96,.92) rotate(-2deg); } }

      .pet-particle {
        position: absolute; z-index: 3; left: 52%; top: 55%; pointer-events: none;
        font-size: 17px; font-weight: 900; color: var(--coral);
        animation: petParticleFloat .85s ease-out forwards;
      }
      .pet-particle.crumb { color: var(--sun-dark); font-size: 13px; }
      @keyframes petParticleFloat { to { transform: translate(var(--tx), var(--ty)) scale(.45) rotate(50deg); opacity: 0; } }
      .flying-food {
        position: fixed; z-index: 44; pointer-events: none; margin: 0;
        display: flex; align-items: center; justify-content: center;
        transform-origin: 50% 50%; filter: drop-shadow(0 5px 5px rgba(35,50,70,.2));
        will-change: transform, opacity;
      }
      .flying-food svg { width: 100%; height: auto; max-height: 100%; }
      .flying-food .num-badge {
        position: absolute; top: 2px; right: 2px; width: 42px; height: 42px; border-radius: 50%;
        background: var(--sky); border: 3px solid #fff; color: #fff; font-size: 25px; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
      }
      /* v75: flights (z 44) pass UNDER the speech bubble (z 46) —
         food must never cover the question text. Confetti (50),
         the bedtime lock (60) and the language popover (90) still
         paint above the bubble. The v72/v73 carrying HAND is gone
         (owner: it looked scary) — food flies itself, see
         startFoodFlight in anim.js. */
      .flight-trail-star {
        position: fixed; z-index: 43; pointer-events: none; margin: 0;
        font-size: 15px; line-height: 1; will-change: transform, opacity;
      }
      /* v72: the flying/held cookie is the same drawn SVG cookie as
         the choice buttons (cookieFaceHTML) — golden disc, dotted
         baked edge, choc chips, the letter/number centred on top. */
      .flying-cookie { position: relative; color: #5b3a12; font-weight: 800; line-height: 1; }
      .flying-cookie .cookie-art { width: 100%; height: 100%; display: block; }
      .flying-cookie .cookie-ch {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        font-weight: 800; color: #5b3a12; line-height: 1;
      }

      /* v56: the shared PET CORNER (sentence builder + chart / abc /
         shop overlays) — the pet is present in every game (user
         decision 2026-10-26). The face hosts the same live mini as
         the pill (pet-mini-host fills it); the SVG art underneath is
         the fallback and hides once the mini is live, exactly like
         .pill-face. A gentle bob keeps even the fallback alive;
         under the daily limit's last minutes the corner dozes
         (body.limit-sleepy): slower bob + a floating 💤 — a friendly
         signal only, never a countdown (user decision 11:18). */
      .pet-corner { position: relative; width: 72px; height: 72px; flex: 0 0 auto; pointer-events: none; }
      .pet-corner .pc-face { position: absolute; inset: 0; animation: petCornerBob 2.6s ease-in-out infinite; }
      .pet-corner .pc-face > svg { width: 100%; height: 100%; display: block; }
      .pet-corner .pc-face.has-live > svg { display: none; }
      .pet-corner .pc-face .acc-overlay { position: absolute; inset: 0; }
      .pet-corner .pc-z {
        position: absolute; top: -6px; right: -4px; font-size: 16px; line-height: 1;
        opacity: 0; transition: opacity .5s;
      }
      body.limit-sleepy .pet-corner .pc-face { animation-duration: 4.4s; }
      body.limit-sleepy .pet-corner .pc-z { opacity: 1; animation: petCornerZ 2.4s ease-in-out infinite; }
      @keyframes petCornerBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
      @keyframes petCornerZ { 0% { transform: translateY(3px) scale(.8); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-7px) scale(1.05); opacity: 0; } }
      @media (prefers-reduced-motion: reduce) { .pet-corner .pc-face { animation: none; } body.limit-sleepy .pet-corner .pc-z { animation: none; } }
      /* v75: the sentence header row (back pill + private bubble +
         pet corner) is GONE with the separate sentence screen —
         Ghép câu now lives in the shared pet frame as #mode-sentence
         and speaks through the stage bubble (css in layout.css). */
      /* Overlay heads: the smaller corner sits inline in the flex
         head, before the close button (chart title flexes, shop
         balance auto-margins — the corner simply takes a slot in
         the row). */
      .pet-corner.corner-sm { width: 52px; height: 52px; }