/* ==========================================================
   characters.css — Dad & Daughter: idle / happy / lose / win / surprise
   ========================================================== */
.char { --c1: #3d8bff; --skin: #ffcf9f; position: relative; display: inline-block; flex: none; width: var(--cw, 160px); aspect-ratio: 240 / 320; }
.char[data-who="kid"] { --skin: #ffd9b8; }
.char .fig { position: absolute; inset: 0; transform-origin: 50% 94%; animation: idleBob 2.4s ease-in-out infinite; }
.char svg { width: 100%; height: 100%; display: block; overflow: visible; }
.char .c1 { fill: var(--c1); }
.char .skin { fill: var(--skin); }
.char .hair { fill: #3a2418; }
.char[data-who="kid"] .hair { fill: #2f1b2e; }
.char .o { stroke: #2a1a5e; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.char .shadow { fill: rgba(20, 8, 60, 0.28); }
.char .arm, .char .head, .char .eyes, .char .body, .char .tuft, .char .brows, .char .pig, .char .legs { transform-box: fill-box; }
.char .arm { transform-origin: 50% 9%; transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.char .arm-l { animation: armL 2.6s ease-in-out infinite; }
.char .arm-r { animation: armR 2.6s ease-in-out infinite; }
.char .head { transform-origin: 50% 96%; animation: headTilt 3.6s ease-in-out infinite; }
.char .eyes { transform-origin: 50% 50%; animation: blink 4.4s infinite; transition: transform 0.15s; }
.char .brows { transform-origin: 50% 50%; transition: transform 0.15s; }
.char .tuft { transform-origin: 50% 100%; animation: tuft 1.6s ease-in-out infinite; }
.char .pig-l { transform-origin: 90% 10%; animation: pigL 2s ease-in-out infinite; }
.char .pig-r { transform-origin: 10% 10%; animation: pigR 2s ease-in-out infinite; }
.char .pupil { transition: transform 0.2s; }
.char .mouths > * { display: none; }
.char .mouths[data-m="smile"] .m-smile, .char .mouths[data-m="grin"] .m-grin, .char .mouths[data-m="o"] .m-o, .char .mouths[data-m="sad"] .m-sad { display: inline; }

@keyframes idleBob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-4px) scale(1.012, 0.99); } }
@keyframes armL { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-6deg); } }
@keyframes armR { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } }
@keyframes headTilt { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
@keyframes tuft { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes pigL { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-6deg); } }
@keyframes pigR { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } }

/* ---- happy ---- */
.char[data-mood="happy"] .fig { animation: happyHop 0.6s ease-in-out 3; }
.char[data-mood="happy"] .arm-l { animation: none; transform: rotate(125deg); }
.char[data-mood="happy"] .arm-r { animation: none; transform: rotate(-125deg); }
@keyframes happyHop { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: scale(1.12, 0.86); } 50% { transform: translateY(-34px) scale(0.92, 1.1); } 85% { transform: scale(1.1, 0.88); } }

/* ---- win / dance ---- */
.char[data-mood="win"] .fig, .char[data-mood="dance"] .fig { animation: winDance 0.62s ease-in-out infinite alternate; }
.char[data-mood="win"] .arm-l, .char[data-mood="dance"] .arm-l { animation: wave 0.32s ease-in-out infinite alternate; }
.char[data-mood="win"] .arm-r, .char[data-mood="dance"] .arm-r { animation: waveR 0.32s ease-in-out infinite alternate; }
.char[data-mood="win"] .head, .char[data-mood="dance"] .head { animation: headBop 0.31s ease-in-out infinite alternate; }
@keyframes winDance { from { transform: rotate(-7deg) translateY(0) scale(1.04, 0.96); } to { transform: rotate(7deg) translateY(-26px) scale(0.96, 1.05); } }
@keyframes wave { from { transform: rotate(110deg); } to { transform: rotate(160deg); } }
@keyframes waveR { from { transform: rotate(-110deg); } to { transform: rotate(-160deg); } }
@keyframes headBop { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* ---- lose: Dad slips, spins, falls off-screen, pops back ---- */
.char[data-mood="lose"] .eyes { animation: none; transform: scale(1.38); }
.char[data-mood="lose"] .brows { transform: translateY(-9px); }
.char[data-mood="lose"] .arm-l { animation: none; transform: rotate(150deg); }
.char[data-mood="lose"] .arm-r { animation: none; transform: rotate(-150deg); }
.char[data-who="dad"][data-mood="lose"] .fig { animation: dadSlip 1.5s cubic-bezier(0.5, 0, 0.8, 0.6) forwards, popBack 0.75s 1.95s cubic-bezier(0.3, 1.7, 0.5, 1) forwards; }
.char[data-who="kid"][data-mood="lose"] .fig { animation: kidFaint 2.2s ease-in-out forwards; }
@keyframes dadSlip {
  0% { transform: none; }
  14% { transform: translateY(-34px) rotate(-18deg); }
  34% { transform: translateY(-8px) rotate(-210deg); }
  58% { transform: translateY(60px) rotate(-430deg); }
  100% { transform: translateY(520px) rotate(-760deg); }
}
@keyframes popBack { 0% { transform: translateY(520px) scale(0.6) rotate(0); } 70% { transform: translateY(-26px) scale(1.12, 1.2); } 100% { transform: none; } }
@keyframes kidFaint {
  0% { transform: none; } 12% { transform: translateX(-8px); } 24% { transform: translateX(8px); } 36% { transform: translateX(-5px); }
  52%, 78% { transform: translateY(26px) rotate(-82deg); } 92% { transform: translateY(-12px) rotate(6deg); } 100% { transform: none; }
}

/* ---- surprise ---- */
.char[data-mood="surprise"] .fig { animation: jolt 0.5s ease-out; }
.char[data-mood="surprise"] .eyes { animation: none; transform: scale(1.5); }
.char[data-mood="surprise"] .brows { transform: translateY(-12px); }
.char[data-mood="surprise"] .arm-l { animation: none; transform: rotate(70deg); }
.char[data-mood="surprise"] .arm-r { animation: none; transform: rotate(-70deg); }
@keyframes jolt { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(-30px) scale(0.9, 1.15) rotate(-4deg); } 55% { transform: translateY(0) scale(1.12, 0.88); } 100% { transform: none; } }

/* ---- sad ---- */
.char[data-mood="sad"] .fig { animation: sadSlump 1.4s ease-in-out infinite; }
.char[data-mood="sad"] .brows { transform: rotate(-8deg) translateY(2px); }
@keyframes sadSlump { 0%, 100% { transform: translateY(6px) scale(1.02, 0.96); } 50% { transform: translateY(8px) scale(1.03, 0.95); } }

/* ---- poses used by Copy Dad ---- */
.char[data-pose="robot"] .fig { animation: robotBob 1s steps(2) infinite; }
.char[data-pose="robot"] .arm-l { animation: robotL 1s steps(1) infinite; }
.char[data-pose="robot"] .arm-r { animation: robotR 1s steps(1) infinite; }
.char[data-pose="robot"] .head { animation: robotHead 1s steps(1) infinite; }
@keyframes robotBob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes robotL { 0% { transform: rotate(95deg); } 50% { transform: rotate(20deg); } }
@keyframes robotR { 0% { transform: rotate(-20deg); } 50% { transform: rotate(-95deg); } }
@keyframes robotHead { 0% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.char[data-pose="chicken"] .fig { animation: chickenBob 0.3s ease-in-out infinite alternate; }
.char[data-pose="chicken"] .arm-l { animation: flapL 0.2s ease-in-out infinite alternate; }
.char[data-pose="chicken"] .arm-r { animation: flapR 0.2s ease-in-out infinite alternate; }
.char[data-pose="chicken"] .head { animation: peck 0.4s ease-in-out infinite; }
@keyframes chickenBob { from { transform: translateY(0) scale(1, 1); } to { transform: translateY(-12px) scale(0.97, 1.04); } }
@keyframes flapL { from { transform: rotate(70deg); } to { transform: rotate(125deg); } }
@keyframes flapR { from { transform: rotate(-70deg); } to { transform: rotate(-125deg); } }
@keyframes peck { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(14deg) translateY(6px); } }
.char[data-pose="freeze"] .fig { animation: shiver 0.09s linear infinite alternate; filter: hue-rotate(150deg) saturate(0.8) brightness(1.1); }
.char[data-pose="freeze"] .arm-l, .char[data-pose="freeze"] .arm-r, .char[data-pose="freeze"] .head, .char[data-pose="freeze"] .eyes { animation: none; }
.char[data-pose="freeze"] .arm-l { transform: rotate(40deg); } .char[data-pose="freeze"] .arm-r { transform: rotate(-40deg); }
@keyframes shiver { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
.char[data-pose="surprise"] .fig { animation: jolt 0.9s ease-out infinite; }
.char[data-pose="surprise"] .eyes { animation: none; transform: scale(1.5); }
.char[data-pose="surprise"] .brows { transform: translateY(-12px); }
.char[data-pose="surprise"] .mouths { filter: none; }
.char[data-pose="wiggle"] .fig { animation: winDance 0.5s ease-in-out infinite alternate; }
.char[data-pose="million"] .fig { animation: winDance 0.4s ease-in-out infinite alternate; }
.char[data-pose="million"] .arm-l { animation: wave 0.25s infinite alternate; } .char[data-pose="million"] .arm-r { animation: waveR 0.25s infinite alternate; }

/* ---- bust (HUD avatar): head & shoulders in a round frame ---- */
.char.bust { --cw: 64px; width: var(--cw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--ink); background: radial-gradient(circle at 50% 30%, #fff9d8, #bfe6ff); box-shadow: 0 4px 0 var(--ink-2); }
.char.bust .fig { inset: auto; left: -32%; top: -2%; width: 164%; aspect-ratio: 240 / 320; }
.char.bust[data-who="kid"] .fig { top: -17%; }
.char.bust .shadow { display: none; }

/* ---- tiny speech bubble that sits above a character ---- */
.char-bubble { position: absolute; left: 50%; bottom: 102%; transform: translateX(-50%); z-index: 5; width: max-content; max-width: min(46vw, 230px); text-align: center; line-height: 1.1; background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 20px; padding: 6px 14px; font-family: var(--f-display); font-weight: 800; font-size: clamp(1rem, 3vmin, 1.5rem); box-shadow: 0 5px 0 var(--ink-2); animation: bubblePop 0.5s cubic-bezier(0.2, 1.8, 0.4, 1) both; }
.char[data-who="dad"] .char-bubble { left: 22%; } .char[data-who="kid"] .char-bubble { left: 78%; }
.char-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; width: 16px; height: 16px; background: #fff; border-right: 4px solid var(--ink); border-bottom: 4px solid var(--ink); transform: translate(-50%, -9px) rotate(45deg); }
@keyframes bubblePop { from { transform: translateX(-50%) scale(0.2); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ---- reduced motion: characters just pulse a little ---- */
:root[data-rm="1"] .char .fig, :root[data-rm="1"] .char .arm, :root[data-rm="1"] .char .head, :root[data-rm="1"] .char .tuft, :root[data-rm="1"] .char .pig, :root[data-rm="1"] .char .eyes { animation: none !important; }
:root[data-rm="1"] .char[data-mood="lose"] .fig, :root[data-rm="1"] .char[data-mood="win"] .fig, :root[data-rm="1"] .char[data-mood="happy"] .fig { animation: rmPulse 0.6s ease-in-out 2 !important; }
@keyframes rmPulse { 50% { transform: scale(1.06); } }