/* ============================================================
   TAMA-DNA — creature rig
   One SVG per character, animated purely by classes on the root:
     x-*  expression      s-*  persistent state
     a-*  one-shot action  .blink  eyelid tick
   ============================================================ */

.chr { overflow: visible; }

/* transform-box ONLY on the groups an animation actually rotates or scales.
   A blanket `.chr g { transform-box: fill-box }` looks harmless but is not: an
   SVG `transform` attribute maps to the CSS transform property, so fill-box
   re-anchors it to the element's own bounding box. Pure translates survive;
   anything mirrored with scale(-1,1) flips about itself and lands in the wrong
   place. That is how both mirrored rigs ended up with one eye on top of the
   other. Everything listed here is positioned by CSS alone, so it is safe. */
.rig, .hair-l, .hair-r, .arm-l, .arm-r, .float-slow, .zzz,
.twintail, .p-aura, .p-wings, .p-steam, .cable, .gourd, .wisp {
  transform-box: fill-box;
}

/* ---------- swappable face parts ---------- */
.chr .eyes > g, .chr .mouth > g, .chr .brows > g { display: none; }
.chr .eyes > [data-x="open"],
.chr .mouth > [data-x="neutral"],
.chr .brows > [data-x="neutral"] { display: block; }

.chr.x-happy  .eyes > g { display: none } .chr.x-happy  .eyes > [data-x="happy"]  { display: block }
.chr.x-sad    .eyes > g { display: none } .chr.x-sad    .eyes > [data-x="sad"]    { display: block }
.chr.x-angry  .eyes > g { display: none } .chr.x-angry  .eyes > [data-x="angry"]  { display: block }
.chr.x-love   .eyes > g { display: none } .chr.x-love   .eyes > [data-x="love"]   { display: block }
.chr.x-sleep  .eyes > g { display: none } .chr.x-sleep  .eyes > [data-x="closed"] { display: block }
.chr.x-shock  .eyes > g { display: none } .chr.x-shock  .eyes > [data-x="shock"]  { display: block }
.chr.x-smug   .eyes > g { display: none } .chr.x-smug   .eyes > [data-x="smug"]   { display: block }
.chr.x-sick   .eyes > g { display: none } .chr.x-sick   .eyes > [data-x="sick"]   { display: block }
.chr.x-drunk  .eyes > g { display: none } .chr.x-drunk  .eyes > [data-x="drunk"]  { display: block }
.chr.blink:not(.x-sleep):not(.x-happy) .eyes > g { display: none }
.chr.blink:not(.x-sleep):not(.x-happy) .eyes > [data-x="closed"] { display: block }

.chr.x-happy  .mouth > g { display:none } .chr.x-happy  .mouth > [data-x="smile"]  { display:block }
.chr.x-sad    .mouth > g { display:none } .chr.x-sad    .mouth > [data-x="frown"]  { display:block }
.chr.x-angry  .mouth > g { display:none } .chr.x-angry  .mouth > [data-x="grit"]   { display:block }
.chr.x-love   .mouth > g { display:none } .chr.x-love   .mouth > [data-x="smile"]  { display:block }
.chr.x-sleep  .mouth > g { display:none } .chr.x-sleep  .mouth > [data-x="sleep"]  { display:block }
.chr.x-shock  .mouth > g { display:none } .chr.x-shock  .mouth > [data-x="open"]   { display:block }
.chr.x-smug   .mouth > g { display:none } .chr.x-smug   .mouth > [data-x="smug"]   { display:block }
.chr.x-sick   .mouth > g { display:none } .chr.x-sick   .mouth > [data-x="frown"]  { display:block }
.chr.x-drunk  .mouth > g { display:none } .chr.x-drunk  .mouth > [data-x="open"]   { display:block }

.chr.x-angry .brows > g { display:none } .chr.x-angry .brows > [data-x="angry"] { display:block }
.chr.x-sad   .brows > g { display:none } .chr.x-sad   .brows > [data-x="sad"]   { display:block }
.chr.x-smug  .brows > g { display:none } .chr.x-smug  .brows > [data-x="angry"] { display:block }

/* ---------- idle motion ---------- */
.rig { animation: idleBob 3.4s ease-in-out infinite; }
@keyframes idleBob { 0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-6px) scaleY(1.012)} }
.chr.x-sleep .rig { animation: sleepBreathe 4.6s ease-in-out infinite; }
@keyframes sleepBreathe { 0%,100%{transform:translateY(2px) scale(1,.985)} 50%{transform:translateY(6px) scale(1.015,1)} }
.hair-l { animation: hairSway 4.2s ease-in-out infinite; transform-origin: top center; }
.hair-r { animation: hairSway 4.2s ease-in-out -1.4s infinite; transform-origin: top center; }
@keyframes hairSway { 0%,100%{transform:rotate(-2.2deg)} 50%{transform:rotate(2.2deg)} }
.arm-l { transform-origin: 80% 12%; animation: armSway 3.9s ease-in-out infinite; }
.arm-r { transform-origin: 20% 12%; animation: armSway 3.9s ease-in-out -1.9s infinite; }
@keyframes armSway { 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} }
.float-slow { animation: floaty 5.5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.zzz { animation: zzzRise 3.2s ease-out infinite; opacity: 0; }
.zzz.z2 { animation-delay: 1.05s } .zzz.z3 { animation-delay: 2.1s }
@keyframes zzzRise {
  0% { opacity: 0; transform: translate(0,0) scale(.5) }
  22% { opacity: 1 }
  100% { opacity: 0; transform: translate(16px,-42px) scale(1.25) }
}
.chr:not(.x-sleep) .sleep-only { display: none; }
.chr.x-sleep .wake-only { display: none; }

/* ---------- one-shot action animations ---------- */
.chr.a-bounce .rig { animation: actBounce 620ms cubic-bezier(.2,1.6,.35,1); }
@keyframes actBounce { 0%{transform:translateY(0) scale(1)} 30%{transform:translateY(-30px) scale(1.06,.94)} 60%{transform:translateY(0) scale(.94,1.07)} 100%{transform:none} }
.chr.a-eat .rig { animation: actEat 700ms ease-in-out; }
@keyframes actEat { 0%,100%{transform:scale(1)} 25%{transform:scale(1.07,.94) translateY(4px)} 50%{transform:scale(.96,1.05)} 75%{transform:scale(1.05,.96)} }
.chr.a-shake .rig { animation: actShake 520ms ease-in-out; }
@keyframes actShake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-9px) rotate(-3deg)} 35%{transform:translateX(8px) rotate(3deg)} 55%{transform:translateX(-6px) rotate(-2deg)} 75%{transform:translateX(4px) rotate(1deg)} }
.chr.a-attack .rig { animation: actAttack 480ms cubic-bezier(.3,1.4,.4,1); }
@keyframes actAttack { 0%{transform:translateX(0) skewX(0)} 22%{transform:translateX(-16px) skewX(6deg) scale(.96,1.04)} 46%{transform:translateX(26px) skewX(-10deg) scale(1.1,.92)} 100%{transform:none} }
.chr.a-cheer .rig { animation: actCheer 900ms cubic-bezier(.2,1.3,.3,1); }
@keyframes actCheer { 0%{transform:translateY(0)} 25%{transform:translateY(-26px) rotate(-4deg)} 50%{transform:translateY(0) rotate(0)} 72%{transform:translateY(-14px) rotate(3deg)} 100%{transform:none} }
.chr.a-hurt .rig { animation: actHurt 640ms ease-out; }
@keyframes actHurt { 0%{transform:none; filter:none} 12%{transform:translateX(-10px) rotate(-7deg); filter:brightness(2.4) saturate(0)} 30%{transform:translateX(8px) rotate(5deg); filter:none} 55%{transform:translateX(-4px)} 100%{transform:none} }
.chr.a-pose .rig { animation: actPose 1100ms cubic-bezier(.2,1.1,.3,1); }
@keyframes actPose { 0%{transform:scale(1) rotate(0)} 30%{transform:scale(1.1) rotate(-7deg) translateY(-12px)} 55%{transform:scale(1.06) rotate(6deg) translateY(-6px)} 100%{transform:none} }
.chr.a-spin .rig { animation: actSpin 900ms cubic-bezier(.3,.9,.3,1); }
@keyframes actSpin { 0%{transform:rotateY(0) scale(1)} 50%{transform:rotateY(360deg) scale(1.06)} 100%{transform:rotateY(720deg) scale(1)} }
.chr.a-drink .rig { animation: actDrink 1000ms ease-in-out; }
@keyframes actDrink { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-13deg) translateY(-4px)} 60%{transform:rotate(-9deg)} 82%{transform:rotate(3deg) scale(1.04,.97)} }
.chr.a-nope .rig { animation: actNope 600ms ease-in-out; }
@keyframes actNope { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-4deg) translateX(-8px)} 50%{transform:rotate(4deg) translateX(8px)} 78%{transform:rotate(-2deg) translateX(-4px)} }
.chr.a-flex .rig { animation: actFlex 780ms cubic-bezier(.2,1.4,.3,1); }
@keyframes actFlex { 0%,100%{transform:scale(1)} 40%{transform:scale(1.11,1.05)} 60%{transform:scale(1.05,1.02)} }

/* ============================================================
   MOON PRINCESS specifics
   ============================================================ */
.chr-moon .p-super, .chr-moon .p-wings, .chr-moon .p-aura, .chr-moon .p-staff { display: none; }
.chr-moon.s-transformed .p-super, .chr-moon.s-transformed .p-wings,
.chr-moon.s-transformed .p-aura, .chr-moon.s-transformed .p-staff { display: block; }
.chr-moon.s-transformed .p-normal { display: none; }
.chr-moon.s-transformed .rig { animation: idleFloatHime 3.8s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(255,220,255,.75)); }
@keyframes idleFloatHime { 0%,100%{transform:translateY(-4px)} 50%{transform:translateY(-16px)} }
.chr-moon .p-aura { animation: auraSpin 9s linear infinite; transform-origin: center; opacity: .75; }
@keyframes auraSpin { to { transform: rotate(360deg) } }
.chr-moon .p-wings { animation: wingBeat 2.6s ease-in-out infinite; transform-origin: center bottom; }
@keyframes wingBeat { 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(1.09) translateY(-3px)} }
.chr-moon .gem { animation: gemTwinkle 2.4s ease-in-out infinite; }
@keyframes gemTwinkle { 0%,100%{opacity:.85} 50%{opacity:1; filter:brightness(1.6)} }
.chr-moon .cheek { opacity: .55; }
.chr-moon.x-love .cheek, .chr-moon.x-happy .cheek { opacity: .95; }
.chr-moon .twintail { animation: tailWag 3.6s ease-in-out infinite; transform-origin: top center; }
.chr-moon .twintail.tr { animation-delay: -1.8s; }
@keyframes tailWag { 0%,100%{transform:rotate(-3deg) scaleY(1)} 50%{transform:rotate(3deg) scaleY(1.03)} }

/* ============================================================
   BLOOD DRAGON-01 specifics — bloodlust tiers
   ============================================================ */
.chr-dragon .visor { fill: #ff2e3f; }
.chr-dragon .visor-glow { opacity: .35; }
.chr-dragon.s-tier1 .visor-glow { opacity: .6; }
.chr-dragon.s-tier2 .visor-glow { opacity: .85; }
.chr-dragon.s-tier3 .visor-glow { opacity: 1; animation: visorFlare .5s steps(2) infinite; }
@keyframes visorFlare { 0%{opacity:.6} 50%{opacity:1} }
.chr-dragon .p-steam { opacity: 0; }
.chr-dragon.s-tier2 .p-steam { opacity: .5; animation: steamUp 2.4s ease-out infinite; }
.chr-dragon.s-tier3 .p-steam { opacity: .85; animation: steamUp 1.4s ease-out infinite; }
@keyframes steamUp { 0%{transform:translateY(0) scale(.6); opacity:.75} 100%{transform:translateY(-34px) scale(1.5); opacity:0} }
.chr-dragon .p-blood { opacity: 0; transition: opacity 600ms; }
.chr-dragon.s-tier2 .p-blood { opacity: .55; }
.chr-dragon.s-tier3 .p-blood { opacity: 1; }
.chr-dragon.s-tier2 .rig { animation: idleTwitch 2.6s ease-in-out infinite; }
.chr-dragon.s-tier3 .rig { animation: idleFeral 1.15s ease-in-out infinite; }
@keyframes idleTwitch {
  0%,100%{transform:translateY(0)} 40%{transform:translateY(-4px)}
  52%{transform:translate(3px,-4px) rotate(1deg)} 56%{transform:translate(-2px,-3px) rotate(-1deg)} 62%{transform:translateY(-3px)}
}
@keyframes idleFeral {
  0%,100%{transform:translate(0,0) rotate(0)} 12%{transform:translate(-3px,-2px) rotate(-1.4deg) scale(1.02)}
  26%{transform:translate(3px,-5px) rotate(1.4deg)} 44%{transform:translate(-2px,-1px) rotate(-.8deg) scale(1.03,.98)}
  60%{transform:translate(4px,-3px) rotate(1.2deg)} 80%{transform:translate(-1px,-2px)}
}
.chr-dragon .cable { animation: cableSway 3.2s ease-in-out infinite; transform-origin: top center; }
.chr-dragon .cable.c2 { animation-delay: -1.6s; }
@keyframes cableSway { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(4deg)} }
.chr-dragon .spark-vent { animation: ventSpark 3.4s steps(1) infinite; }
@keyframes ventSpark { 0%,92%{opacity:0} 93%{opacity:1} 95%{opacity:0} 97%{opacity:.8} 99%{opacity:0} }
.chr-dragon.s-tier3 .visor { fill: #ff5a2e; }
.chr-dragon .p-scar { opacity: .7; }

/* ============================================================
   GORO specifics — ronin / yokai
   ============================================================ */
.chr-goro .p-yokai { display: none; }
.chr-goro.s-yokai .p-yokai { display: block; }
.chr-goro.s-yokai .p-ronin { display: none; }
.chr-goro.s-yokai .skin { fill: #cf3f2e; }
.chr-goro.s-yokai .p-crest { opacity: 0; }
.chr-goro.s-yokai .horn { fill: #ffe6a8; }
.chr-goro.s-yokai .rig { animation: yokaiFloat 4.2s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(120,255,190,.4)); }
@keyframes yokaiFloat { 0%,100%{transform:translateY(-6px) rotate(-1deg)} 50%{transform:translateY(-18px) rotate(1.5deg)} }
.chr-goro .wisp { animation: wispDrift 5.5s ease-in-out infinite; transform-origin: center; }
.chr-goro .wisp.w2 { animation-delay: -1.9s } .chr-goro .wisp.w3 { animation-delay: -3.6s }
@keyframes wispDrift {
  0%   { transform: translate(0,0) scale(.8); opacity: .2 }
  40%  { opacity: .95 }
  100% { transform: translate(14px,-30px) scale(1.25); opacity: 0 }
}
.chr-goro .horn-glow { opacity: 0; }
.chr-goro.s-yokai .horn-glow { opacity: 1; animation: pulse 1.9s ease-in-out infinite; }
.chr-goro .gourd { transform-origin: 50% 0; animation: gourdSway 3.8s ease-in-out infinite; }
@keyframes gourdSway { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
.chr-goro.x-drunk .rig { animation: drunkWobble 2.8s ease-in-out infinite; }
@keyframes drunkWobble { 0%,100%{transform:rotate(-4deg) translateX(-4px)} 50%{transform:rotate(4deg) translateX(4px)} }
.chr-goro .p-hangover { display: none; }
.chr-goro.x-sick .p-hangover { display: block; }

/* ============================================================
   SELECT-SCREEN preview sizing
   ============================================================ */
.pick .chr { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); }
.pick.is-picked .chr .rig { animation-duration: 2.6s; }

/* ============================================================
   TRANSFORMATION CINEMATIC
   ============================================================ */
.cine-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, #ffd9f4 0%, #b56bff 35%, #2a0d4a 75%, #08040f 100%); animation: cineBg 3600ms ease-in-out both; }
@keyframes cineBg { 0%{opacity:0} 12%{opacity:1} 82%{opacity:1} 100%{opacity:0} }
.cine-rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.55) 0deg 4deg, rgba(255,255,255,0) 4deg 12deg); animation: raySpin 3600ms linear both; mix-blend-mode: overlay; }
@keyframes raySpin { from{transform:rotate(0)} to{transform:rotate(220deg)} }
.cine-silhouette { position: absolute; left: 50%; top: 50%; width: 62%; transform: translate(-50%,-50%); animation: cineSil 3600ms cubic-bezier(.3,.9,.3,1) both; }
.cine-silhouette svg { filter: brightness(0) invert(1) drop-shadow(0 0 26px #fff); }
@keyframes cineSil {
  0% { opacity:0; transform: translate(-50%,-50%) scale(.5) rotate(-14deg) }
  18% { opacity:1; transform: translate(-50%,-50%) scale(1) rotate(0) }
  55% { transform: translate(-50%,-50%) scale(1.04) rotate(3deg) }
  78% { opacity:1; transform: translate(-50%,-52%) scale(1.1) }
  100% { opacity:0; transform: translate(-50%,-52%) scale(1.35) }
}
.cine-ribbon {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 190%;
  background: linear-gradient(180deg, transparent, #fff 20%, #ffd6f2 50%, #fff 80%, transparent);
  transform-origin: 50% 50%; border-radius: 8px; mix-blend-mode: screen;
  animation: ribbonSweep 1500ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes ribbonSweep { 0%{transform:translate(-50%,-50%) rotate(var(--a)) scaleY(0)} 40%{transform:translate(-50%,-50%) rotate(var(--a)) scaleY(1)} 100%{transform:translate(-50%,-50%) rotate(calc(var(--a) + 60deg)) scaleY(0)} }
.cine-word {
  position: absolute; left: 0; right: 0; top: 62%; text-align: center;
  font: 900 34px/1 'Zen Maru Gothic', sans-serif; letter-spacing: .18em; color: #fff;
  text-shadow: 0 0 20px #ff9ade, 0 4px 0 #b23a8f, 0 0 60px #fff;
  animation: wordPunch 1600ms cubic-bezier(.2,1.6,.3,1) 1500ms both;
}
@keyframes wordPunch { 0%{opacity:0; transform:scale(2.4) rotate(-8deg)} 30%{opacity:1; transform:scale(1) rotate(0)} 82%{opacity:1} 100%{opacity:0; transform:scale(1.1)} }
.cine-word small { display: block; font-size: 12px; letter-spacing: .5em; margin-top: 10px; text-shadow: none; color: #ffd9f4; }

/* generic cinematic for the other two */
.cine-slash {
  position: absolute; left: -20%; right: -20%; height: 5px; top: 50%; background: #fff;
  box-shadow: 0 0 24px #ff2e3f, 0 0 60px #ff2e3f;
  animation: slashGo 520ms cubic-bezier(.2,1,.3,1) both;
}
@keyframes slashGo { 0%{transform:translateY(-200px) rotate(-24deg) scaleX(0)} 40%{transform:translateY(0) rotate(-24deg) scaleX(1)} 100%{transform:translateY(120px) rotate(-24deg) scaleX(1); opacity:0} }
.cine-kanji {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 900 130px/1 'Shippori Mincho B1', serif; color: rgba(255,255,255,.14);
  animation: kanjiIn 1400ms cubic-bezier(.2,1,.3,1) both;
}
@keyframes kanjiIn { 0%{opacity:0; transform:scale(2.6)} 40%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(1.06)} }