/* ===================================================================
   MARIO ADVENTURE — Personajes (sprites reutilizables, 100% CSS)
   Usado tanto por la galería (personajes.html) como por el juego (index.html)
   =================================================================== */

.char { position: relative; image-rendering: pixelated; }

/* ===================================================================
   1) BOWSER — El Lagarto Rey  (verde, corona, caparazón con pinchos)
   =================================================================== */
.bowser { width: 110px; height: 150px; animation: bwRoar 2.4s ease-in-out infinite; }
@keyframes bwRoar {
    0%,100% { transform: translateY(0) scale(1); }
    45%     { transform: translateY(-2px) scale(1.03,0.98); }
    55%     { transform: translateY(-2px) scale(1.05,0.96); }
}
.bowser div { position: absolute; }

.bw-crown {
    top: -6px; left: 38px; width: 34px; height: 16px; z-index: 6;
    background: #ffd11a;
    clip-path: polygon(0 100%,0 35%,18% 70%,50% 0,82% 70%,100% 35%,100% 100%);
    box-shadow: inset 0 -3px 0 #c79700;
}
.bw-crown::after { content:''; position:absolute; top:2px; left:13px; width:8px; height:8px; background:#e52521; border-radius:50%; }

.bw-hair {
    top: 6px; left: 30px; width: 50px; height: 26px; z-index: 2;
    background: #f08010; border-radius: 24px 24px 0 0;
    box-shadow: inset 0 -6px 0 #c25e06;
}
.bw-horn { top: 22px; width: 12px; height: 22px; background: #fff7e0; z-index: 4;
    box-shadow: inset -2px -2px 0 #cdbf9a; }
.bw-horn.left  { left: 24px; border-radius: 8px 2px 8px 8px; transform: rotate(-18deg); }
.bw-horn.right { left: 74px; border-radius: 2px 8px 8px 8px; transform: rotate(18deg); }

.bw-head {
    top: 24px; left: 30px; width: 50px; height: 44px; z-index: 5;
    background: #57b83a; border-radius: 16px 16px 20px 20px;
    box-shadow: inset -4px -4px 0 #3d8a26, inset 4px 4px 0 #79d65a;
}
.bw-brow { top: 6px; width: 16px; height: 6px; background: #2f6b1c; z-index: 6; }
.bw-brow.left  { left: 4px;  transform: rotate(14deg);  border-radius: 4px; }
.bw-brow.right { left: 30px; transform: rotate(-14deg); border-radius: 4px; }
.bw-eye { top: 12px; width: 9px; height: 11px; background: #fff; border-radius: 50%; z-index: 6; }
.bw-eye::after { content:''; position:absolute; bottom:1px; left:3px; width:4px; height:5px; background:#000; border-radius:50%; }
.bw-eye.left  { left: 8px; }
.bw-eye.right { left: 33px; }
.bw-snout {
    top: 26px; left: 13px; width: 24px; height: 14px; background: #79d65a;
    border-radius: 10px; box-shadow: inset 0 -3px 0 #4e9b32; z-index: 6;
}
.bw-snout::before { content:''; position:absolute; top:3px; left:4px; width:3px; height:3px; background:#1d3b12; border-radius:50%; box-shadow:12px 0 0 #1d3b12; }
.bw-snout::after { content:''; position:absolute; bottom:-3px; left:4px; width:4px; height:5px; background:#fff; box-shadow:14px 0 0 #fff; clip-path: polygon(0 0,100% 0,50% 100%); }

.bw-shell {
    top: 60px; left: 24px; width: 62px; height: 56px; z-index: 3;
    background: radial-gradient(circle at 50% 40%, #2f8f3f, #1d5d28);
    border-radius: 50% 50% 44% 44%;
    border: 4px solid #d9b24a;
    box-shadow: inset 0 -6px 0 rgba(0,0,0,.25);
}
.bw-spike { position:absolute; width:0; height:0; }
.bw-spike.s1 { top:-12px; left:8px;  border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:14px solid #f2f2f2; }
.bw-spike.s2 { top:-16px; left:25px; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:18px solid #f2f2f2; }
.bw-spike.s3 { top:-12px; left:43px; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:14px solid #f2f2f2; }

.bw-belly {
    top: 70px; left: 34px; width: 42px; height: 46px; z-index: 4;
    background: #f2d49b; border-radius: 18px 18px 14px 14px;
    box-shadow: inset 0 -4px 0 #d3ad6a, inset 0 6px 0 rgba(255,255,255,.3);
}
.bw-arm { top: 74px; width: 18px; height: 30px; background: #57b83a; z-index: 5; border-radius: 10px;
    box-shadow: inset -3px -3px 0 #3d8a26; }
.bw-arm.left  { left: 18px; transform: rotate(8deg);  transform-origin: top center; animation: bwArmL 2.4s ease-in-out infinite; }
.bw-arm.right { left: 74px; transform: rotate(-8deg); transform-origin: top center; animation: bwArmR 2.4s ease-in-out infinite; }
@keyframes bwArmL { 0%,100%{ transform: rotate(8deg) } 50%{ transform: rotate(-12deg) } }
@keyframes bwArmR { 0%,100%{ transform: rotate(-8deg) } 50%{ transform: rotate(12deg) } }

.bw-leg { top: 112px; width: 22px; height: 26px; background: #4ca233; z-index: 4; border-radius: 8px 8px 10px 10px;
    box-shadow: inset -3px -3px 0 #357a22; }
.bw-leg.left  { left: 28px; }
.bw-leg.right { left: 60px; }
.bw-leg::after { content:''; position:absolute; bottom:0; left:-3px; width:10px; height:8px; background:#fff7e0; border-radius:4px; box-shadow:14px 0 0 #fff7e0; clip-path: polygon(0 0,100% 0,80% 100%,20% 100%); }

.bw-tail { top: 104px; left: 86px; width: 26px; height: 14px; background: #4ca233; z-index: 2;
    border-radius: 0 12px 12px 0; box-shadow: inset 0 -3px 0 #357a22; transform: rotate(8deg); }

/* ===================================================================
   2) COMANDANTE KOOPA  (amarillo, casco azul alado, caparazón)
   =================================================================== */
.commander { width: 96px; height: 140px; animation: floatBob 2.2s ease-in-out infinite; }
@keyframes floatBob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
.commander div { position: absolute; }

.cm-wing { top: 16px; width: 30px; height: 40px; background: #eef4ff; z-index: 1;
    box-shadow: inset 0 0 0 2px #b9c9e8; }
.cm-wing.left  { left: -8px;  border-radius: 60% 20% 60% 20%; transform-origin: right center; animation: wingL 0.6s ease-in-out infinite; }
.cm-wing.right { left: 74px;  border-radius: 20% 60% 20% 60%; transform-origin: left center;  animation: wingR 0.6s ease-in-out infinite; }
@keyframes wingL { 0%,100%{ transform: rotate(-12deg) scaleX(1) } 50%{ transform: rotate(12deg) scaleX(.85) } }
@keyframes wingR { 0%,100%{ transform: rotate(12deg) scaleX(1) } 50%{ transform: rotate(-12deg) scaleX(.85) } }

.cm-helmet {
    top: 6px; left: 26px; width: 44px; height: 24px; z-index: 6;
    background: linear-gradient(180deg,#3a6fe0,#1d44b0);
    border-radius: 22px 22px 6px 6px;
    box-shadow: inset 0 4px 0 rgba(255,255,255,.4), inset 0 -4px 0 #122e80;
}
.cm-helmet::after { content:''; position:absolute; top:-7px; left:18px; width:8px; height:10px; background:#ffd11a; border-radius:3px; box-shadow:0 0 6px #ffd11a; }

.cm-head {
    top: 26px; left: 28px; width: 40px; height: 34px; z-index: 5;
    background: #ffd23b; border-radius: 14px 14px 18px 18px;
    box-shadow: inset -3px -3px 0 #d9a911, inset 3px 3px 0 #ffe27a;
}
.cm-eye { top: 4px; width: 8px; height: 10px; background:#fff; border-radius:50%; z-index:6; }
.cm-eye::after { content:''; position:absolute; bottom:1px; left:2px; width:4px; height:5px; background:#000; border-radius:50%; }
.cm-eye.left { left: 7px; }
.cm-eye.right { left: 25px; }
.cm-beak { top: 18px; left: 12px; width: 16px; height: 9px; background:#f0961e; border-radius: 8px;
    box-shadow: inset 0 -2px 0 #c4720c; z-index:6; }

.cm-shell {
    top: 56px; left: 24px; width: 48px; height: 48px; z-index: 3;
    background: radial-gradient(circle at 50% 40%, #3a6fe0, #1d44b0);
    border-radius: 50%; border: 4px solid #ffd23b;
    box-shadow: inset 0 -6px 0 rgba(0,0,0,.25);
}
.cm-shell::after { content:''; position:absolute; inset:8px; border-radius:50%; border:3px dashed rgba(255,255,255,.35); }

.cm-arm { top: 60px; width: 14px; height: 24px; background:#ffd23b; border-radius:8px; z-index:4;
    box-shadow: inset -2px -2px 0 #d9a911; }
.cm-arm.left  { left: 16px; transform: rotate(18deg); }
.cm-arm.right { left: 66px; transform: rotate(-18deg); }
.cm-foot { top: 100px; width: 20px; height: 14px; background:#f0961e; border-radius:8px 8px 6px 6px; z-index:4;
    box-shadow: inset 0 -3px 0 #c4720c; }
.cm-foot.left { left: 26px; }
.cm-foot.right { left: 50px; }

/* ===================================================================
   3) HAMMER BRO — Koopa Lanza-Martillos (casco negro, martillo rojo)
   =================================================================== */
.hammerbro { width: 96px; height: 140px; animation: floatBob 2.6s ease-in-out infinite; }
.hammerbro div { position: absolute; }

.hb-helmet {
    top: 8px; left: 26px; width: 44px; height: 22px; z-index: 6;
    background: linear-gradient(180deg,#3a3a3a,#111);
    border-radius: 22px 22px 4px 4px;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.25), inset 0 -3px 0 #000;
}
.hb-helmet::after { content:''; position:absolute; bottom:-4px; left:-3px; right:-3px; height:6px; background:#000; border-radius:0 0 4px 4px; }

.hb-head {
    top: 24px; left: 28px; width: 40px; height: 32px; z-index: 5;
    background: #ffd23b; border-radius: 12px 12px 18px 18px;
    box-shadow: inset -3px -3px 0 #d9a911, inset 3px 3px 0 #ffe27a;
}
.hb-eye { top: 4px; width: 7px; height: 9px; background:#fff; border-radius:50%; z-index:6; }
.hb-eye::after { content:''; position:absolute; bottom:1px; left:2px; width:3px; height:4px; background:#000; border-radius:50%; }
.hb-eye.left { left: 7px; }
.hb-eye.right { left: 24px; }
.hb-beak { top: 17px; left: 12px; width: 15px; height: 8px; background:#f0961e; border-radius:7px; z-index:6;
    box-shadow: inset 0 -2px 0 #c4720c; }

.hb-shell {
    top: 52px; left: 22px; width: 52px; height: 44px; z-index: 3;
    background: radial-gradient(circle at 50% 40%, #3aa83f, #1d6b28);
    border-radius: 50% 50% 46% 46%; border: 4px solid #d9b24a;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,.25);
}
.hb-belly {
    top: 58px; left: 32px; width: 32px; height: 38px; z-index: 4;
    background: #f2d49b; border-radius: 12px;
    box-shadow: inset 0 -3px 0 #d3ad6a;
}
.hb-foot { top: 92px; width: 20px; height: 14px; background:#f0961e; border-radius:8px 8px 6px 6px; z-index:4;
    box-shadow: inset 0 -3px 0 #c4720c; }
.hb-foot.left { left: 24px; }
.hb-foot.right { left: 50px; }

.hb-arm-front {
    top: 48px; left: 60px; width: 14px; height: 26px; background:#ffd23b; z-index: 7;
    border-radius: 8px; box-shadow: inset -2px -2px 0 #d9a911;
    transform-origin: top center;
    animation: hbThrow 1.4s ease-in-out infinite;
}
@keyframes hbThrow {
    0%,55% { transform: rotate(40deg); }
    70%    { transform: rotate(-50deg); }
    100%   { transform: rotate(40deg); }
}
.hb-hammer {
    position: absolute; top: -16px; left: -4px; width: 22px; height: 22px;
    animation: hammerSpin 1.4s linear infinite;
}
.hb-hammer::before { content:''; position:absolute; top:6px; left:9px; width:5px; height:18px; background:#7a4a1c; border-radius:3px; }
.hb-hammer::after { content:''; position:absolute; top:0; left:2px; width:18px; height:11px; background:#e52521; border-radius:4px;
    box-shadow: inset 0 -3px 0 #9c1414, inset 0 3px 0 #ff7a6a; }
@keyframes hammerSpin { from{ transform: rotate(0) } to{ transform: rotate(360deg) } }

/* ===================================================================
   4) KOOPA HOSTIGADOR GIGANTE  (grande, amarillo, pesado)
   =================================================================== */
.giant { width: 130px; height: 168px; animation: gkStomp 1.6s ease-in-out infinite; transform-origin: bottom center; }
@keyframes gkStomp {
    0%,100% { transform: translateY(0) scaleY(1); }
    50%     { transform: translateY(-4px) scaleY(1.02); }
    50.01%  { transform: translateY(-4px); }
    70%     { transform: translateY(0) scaleY(.96); }
}
.giant div { position: absolute; }

.gk-head {
    top: 4px; left: 36px; width: 58px; height: 48px; z-index: 5;
    background: #f6c41f; border-radius: 18px 18px 22px 22px;
    box-shadow: inset -5px -5px 0 #c89205, inset 5px 5px 0 #ffe066;
}
.gk-brow { top: 8px; width: 20px; height: 7px; background:#8a6400; z-index:6; border-radius:3px; }
.gk-brow.left { left: 6px; transform: rotate(12deg); }
.gk-brow.right { left: 32px; transform: rotate(-12deg); }
.gk-eye { top: 14px; width: 12px; height: 14px; background:#fff; border-radius:50%; z-index:6; }
.gk-eye::after { content:''; position:absolute; bottom:2px; left:4px; width:5px; height:6px; background:#a00; border-radius:50%; }
.gk-eye.left { left: 10px; }
.gk-eye.right { left: 36px; }
.gk-beak { top: 30px; left: 16px; width: 26px; height: 14px; background:#f0961e; border-radius:10px; z-index:6;
    box-shadow: inset 0 -3px 0 #c4720c; }
.gk-beak::after { content:''; position:absolute; bottom:-2px; left:4px; width:5px; height:6px; background:#fff; box-shadow:14px 0 0 #fff; clip-path: polygon(0 0,100% 0,50% 100%); }

.gk-shell {
    top: 46px; left: 26px; width: 78px; height: 66px; z-index: 3;
    background: radial-gradient(circle at 50% 40%, #3aa83f, #145220);
    border-radius: 50% 50% 44% 44%; border: 5px solid #d9b24a;
    box-shadow: inset 0 -8px 0 rgba(0,0,0,.3);
}
.gk-spike { position:absolute; width:0; height:0; }
.gk-spike.s1 { top:-14px; left:16px; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:18px solid #f2f2f2; }
.gk-spike.s2 { top:-14px; left:44px; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:18px solid #f2f2f2; }

.gk-belly {
    top: 56px; left: 40px; width: 50px; height: 52px; z-index: 4;
    background: #f2d49b; border-radius: 16px;
    box-shadow: inset 0 -5px 0 #d3ad6a;
}
.gk-arm { top: 60px; width: 22px; height: 34px; background:#f6c41f; border-radius:11px; z-index:4;
    box-shadow: inset -4px -4px 0 #c89205; }
.gk-arm.left  { left: 14px; transform: rotate(16deg); transform-origin: top center; animation: bwArmL 1.6s ease-in-out infinite; }
.gk-arm.right { left: 94px; transform: rotate(-16deg); transform-origin: top center; animation: bwArmR 1.6s ease-in-out infinite; }
.gk-foot { top: 124px; width: 30px; height: 20px; background:#f0961e; border-radius:10px 10px 8px 8px; z-index:4;
    box-shadow: inset 0 -4px 0 #c4720c; }
.gk-foot.left { left: 30px; }
.gk-foot.right { left: 68px; }

/* ===================================================================
   5) AYUDANTE ROJO  (pequeño, rojo, ojos negros, saltarín)
   =================================================================== */
.redhelper { width: 70px; height: 96px; animation: rhHop 1s ease-in-out infinite; transform-origin: bottom center; }
@keyframes rhHop {
    0%,100% { transform: translateY(0) scaleY(1); }
    40%     { transform: translateY(0) scaleY(.9) scaleX(1.1); }
    60%     { transform: translateY(-18px) scaleY(1.08) scaleX(.94); }
    80%     { transform: translateY(0) scaleY(.95); }
}
.redhelper div { position: absolute; }

.rh-body {
    top: 0; left: 8px; width: 54px; height: 64px; z-index: 3;
    background: radial-gradient(circle at 40% 30%, #ff4b3e, #c81b14);
    border-radius: 50% 50% 46% 46%;
    box-shadow: inset -5px -5px 0 rgba(0,0,0,.18), inset 5px 5px 0 rgba(255,255,255,.25);
}
.rh-brow { top: 12px; width: 16px; height: 6px; background:#5e0b08; z-index:4; border-radius:3px; }
.rh-brow.left { left: 8px; transform: rotate(18deg); }
.rh-brow.right { left: 30px; transform: rotate(-18deg); }
.rh-eye { top: 16px; width: 12px; height: 16px; background:#1a1a1a; border-radius:50%; z-index:4; }
.rh-eye::after { content:''; position:absolute; top:3px; left:3px; width:4px; height:4px; background:#fff; border-radius:50%; }
.rh-eye.left { left: 10px; }
.rh-eye.right { left: 32px; }
.rh-mouth { top: 40px; left: 17px; width: 20px; height: 12px; background:#3a0604; border-radius: 0 0 12px 12px; z-index:4; }
.rh-mouth::after { content:''; position:absolute; top:0; left:3px; width:4px; height:5px; background:#fff; box-shadow:9px 0 0 #fff; clip-path: polygon(0 0,100% 0,50% 100%); }

.rh-foot { top: 60px; width: 18px; height: 14px; background:#8a1009; border-radius:8px 8px 6px 6px; z-index:2; }
.rh-foot.left { left: 8px; }
.rh-foot.right { left: 44px; }

/* ===================================================================
   6) PLANTA CARNÍVORA — Piranha Plant (cabeza roja, dientes, tubería)
   =================================================================== */
.piranha { width: 90px; height: 178px; }
.piranha div { position: absolute; }

.pp-pipe {
    bottom: 0; left: 14px; width: 62px; height: 56px; z-index: 5;
    background: linear-gradient(90deg,#1f9b3a 0 18%,#34c155 18% 55%,#1f9b3a 55% 100%);
    border-radius: 4px;
}
.pp-pipe::before {
    content:''; position:absolute; top:-12px; left:-8px; width:78px; height:18px;
    background: linear-gradient(90deg,#1f9b3a 0 14%,#34c155 14% 58%,#147a2a 58% 100%);
    border-radius: 5px; box-shadow: inset 0 3px 0 rgba(255,255,255,.35);
}

.pp-stem {
    bottom: 44px; left: 38px; width: 16px; height: 70px; z-index: 3;
    background: linear-gradient(90deg,#2fae44,#1c7a2e);
    border-radius: 8px;
    transform-origin: bottom center;
    animation: ppEmerge 3s ease-in-out infinite;
}
@keyframes ppEmerge {
    0%,100% { transform: translateY(40px) scaleY(.4); opacity: .85; }
    35%,70% { transform: translateY(0) scaleY(1); opacity: 1; }
}
.pp-leaf { position:absolute; width:18px; height:12px; background:#3ec457; z-index:2; }
.pp-leaf.left  { top:18px; left:-15px; border-radius: 12px 0 12px 0; transform: rotate(-18deg); }
.pp-leaf.right { top:30px; left:14px;  border-radius: 0 12px 0 12px; transform: rotate(18deg); }

.pp-head {
    bottom: 104px; left: 18px; width: 56px; height: 56px; z-index: 4;
    background: radial-gradient(circle at 40% 35%, #ff5a4d, #cc1f17);
    border-radius: 50%;
    box-shadow: inset -5px -5px 0 rgba(0,0,0,.18);
    animation: ppEmerge 3s ease-in-out infinite;
}
.pp-spot { width: 10px; height: 10px; background:#fff; border-radius:50%; z-index:5; }
.pp-spot.s1 { top: 8px;  left: 10px; }
.pp-spot.s2 { top: 6px;  left: 34px; }
.pp-spot.s3 { top: 30px; left: 8px; }

.pp-mouth {
    top: 24px; left: 12px; width: 32px; height: 18px; background:#3a0604; z-index:5;
    border-radius: 6px;
    transform-origin: center;
    animation: ppChomp 0.8s ease-in-out infinite;
}
@keyframes ppChomp { 0%,100%{ transform: scaleY(1) } 50%{ transform: scaleY(.25) } }
.pp-teeth { position:absolute; left:0; width:100%; height:6px; background:transparent; }
.pp-teeth.top { top:0;
    background: repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px);
    clip-path: polygon(0 0,100% 0,100% 60%,90% 100%,75% 60%,60% 100%,45% 60%,30% 100%,15% 60%,0 100%);
}
.pp-teeth.bottom { bottom:0;
    background: repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px);
    clip-path: polygon(0 100%,100% 100%,100% 40%,88% 0,72% 40%,56% 0,40% 40%,24% 0,10% 40%,0 0);
}

/* ===================================================================
   7) TRONQUI — tronco viviente con núcleo de lava
   =================================================================== */
.tronqui { width: 110px; height: 150px; animation: floatBob 2.8s ease-in-out infinite; }
.tronqui div { position: absolute; }

.tq-body {
    top: 18px; left: 18px; width: 74px; height: 90px; z-index: 4;
    background: repeating-linear-gradient(15deg, #5a3618 0 6px, #6e431f 6px 12px);
    border: 4px solid #3f2410;
    border-radius: 40% 40% 38% 38%;
    box-shadow: inset 0 -8px 0 rgba(0,0,0,.3);
}
.tq-core {
    position:absolute; top: 30px; left: 18px; width: 38px; height: 40px; z-index: 5;
    background: radial-gradient(circle at 50% 45%, #fff3b0 0%, #ffb31a 30%, #ff6a00 65%, #d83a00 100%);
    border-radius: 50%;
    box-shadow: 0 0 18px 6px rgba(255,120,0,.65);
    animation: tqGlow 0.9s ease-in-out infinite;
}
@keyframes tqGlow {
    0%,100% { transform: scale(1);   box-shadow: 0 0 16px 5px rgba(255,120,0,.55); }
    50%     { transform: scale(1.12); box-shadow: 0 0 26px 10px rgba(255,150,0,.85); }
}
.tq-eye { width: 12px; height: 12px; background:#1a0d04; border-radius:50%; z-index:6; top: 18px; }
.tq-eye::after { content:''; position:absolute; top:2px; left:2px; width:4px; height:4px; background:#ffcf66; border-radius:50%; }
.tq-eye.left  { left: 14px; }
.tq-eye.right { left: 46px; }
.tq-bark { background:#3f2410; z-index:5; border-radius:3px; }
.tq-bark.b1 { top: 8px; left: 30px; width: 16px; height: 5px; transform: rotate(-12deg); }
.tq-bark.b2 { top: 74px; left: 22px; width: 30px; height: 5px; transform: rotate(8deg); }

.tq-leg { width: 6px; height: 26px; background:#4a2c14; z-index:3; border-radius:3px; transform-origin: top center; }
.tq-leg.l1 { top: 100px; left: 30px; animation: tqLeg 0.5s ease-in-out infinite; }
.tq-leg.l2 { top: 100px; left: 44px; animation: tqLeg 0.5s ease-in-out infinite .25s; }
.tq-leg.r1 { top: 100px; left: 62px; animation: tqLeg 0.5s ease-in-out infinite .12s; }
.tq-leg.r2 { top: 100px; left: 76px; animation: tqLeg 0.5s ease-in-out infinite .37s; }
@keyframes tqLeg { 0%,100%{ transform: rotate(-12deg) } 50%{ transform: rotate(12deg) } }

/* ===================================================================
   HÉROES — Mario y Luigi comparten estructura (.hero)
   Color de gorra/camisa = var(--theme), overol = var(--ov)
   =================================================================== */
.hero { width: 44px; height: 60px; --theme:#e52521; --theme-d:#a3160f; --ov:#2b56c4; --ov-d:#163a96; }
.hero div { position: absolute; }
.hero.mario { --theme:#e52521; --theme-d:#a3160f; }
.hero.luigi { --theme:#36b04a; --theme-d:#1c7a30; }

/* Gorra (con visera hacia adelante) */
.h-cap {
    top: 0; left: 5px; width: 34px; height: 14px; z-index: 6;
    background: var(--theme); border-radius: 16px 16px 5px 5px;
    box-shadow: inset 0 -3px 0 var(--theme-d), inset 0 3px 0 rgba(255,255,255,.28);
}
.h-cap::after { /* visera que sobresale al frente (derecha) */
    content:''; position:absolute; bottom:-2px; right:-7px; width:24px; height:7px;
    background: var(--theme); border-radius: 4px 9px 9px 4px; box-shadow: inset 0 -2px 0 var(--theme-d);
}
.h-emblem { top: 1px; left: 16px; width: 13px; height: 13px; background:#fff; border-radius:50%; z-index:7;
    box-shadow: inset -1px -1px 0 #d9d9d9; }
.h-emblem::after { content:''; position:absolute; top:3px; left:4px; width:5px; height:7px;
    border-left:2px solid var(--theme); border-right:2px solid var(--theme); }

/* Pelo / patillas (asoma bajo la gorra) */
.h-hair { top: 11px; left: 5px; width: 34px; height: 6px; background:#5a3210; z-index:4; border-radius:5px;
    box-shadow: inset 0 -2px 0 #3f2208; }

/* Cara */
.h-face {
    top: 13px; left: 8px; width: 28px; height: 21px; z-index: 5;
    background: #ffc59e; border-radius: 9px 9px 11px 11px;
    box-shadow: inset -3px -3px 0 #e7a074;
}
.h-ear { top: 21px; width: 6px; height: 8px; background:#ffc59e; border-radius:50%; z-index:5; box-shadow: inset -1px 0 0 #e7a074; }
.h-ear.left { left: 5px; }
.h-ear.right { left: 33px; }
/* Ojos — sobre la cara */
.h-eye { top: 18px; width: 6px; height: 8px; background:#fff; border-radius:50%; z-index:7; }
.h-eye::after { content:''; position:absolute; top:2px; left:1px; width:4px; height:5px; background:#1b3a8a; border-radius:50%; }
.h-eye.left { left: 11px; }
.h-eye.right { left: 26px; }
/* Nariz redonda en el centro */
.h-nose { top: 21px; left: 16px; width: 12px; height: 8px; background:#ffb487; border-radius:50%; z-index:8;
    box-shadow: inset -2px -2px 0 #e79f70; }
/* Bigote justo bajo la nariz */
.h-stache { top: 26px; left: 7px; width: 26px; height: 6px; background:#5a3210; z-index:8; border-radius:4px 4px 9px 9px; }
.h-stache::before { content:''; position:absolute; bottom:-3px; left:1px; width:10px; height:5px; background:#5a3210; border-radius:0 0 7px 7px; }
.h-stache::after  { content:''; position:absolute; bottom:-3px; right:1px; width:10px; height:5px; background:#5a3210; border-radius:0 0 7px 7px; }

/* Cuerpo: camisa + overol */
.h-shirt { top: 31px; left: 6px; width: 32px; height: 16px; z-index: 4; background: var(--theme); border-radius: 8px 8px 4px 4px;
    box-shadow: inset 0 -3px 0 var(--theme-d); }
.h-overall { top: 38px; left: 8px; width: 28px; height: 16px; z-index: 5; background: var(--ov); border-radius: 4px 4px 6px 6px;
    box-shadow: inset 0 -3px 0 var(--ov-d); }
.h-strap { top: 31px; width: 6px; height: 10px; background: var(--ov); z-index: 6; }
.h-strap.left { left: 11px; transform: rotate(6deg); }
.h-strap.right { left: 27px; transform: rotate(-6deg); }
.h-button { top: 41px; width: 4px; height: 4px; background:#ffd11a; border-radius:50%; z-index:7; box-shadow: inset -1px -1px 0 #c79700; }
.h-button.left { left: 13px; }
.h-button.right { left: 27px; }

/* Brazos con guante blanco */
.h-arm { top: 32px; width: 9px; height: 13px; background: var(--theme); z-index: 6; border-radius: 5px;
    box-shadow: inset 0 -2px 0 var(--theme-d); transform-origin: top center; }
.h-arm.left  { left: 0px; }
.h-arm.right { left: 35px; }
.h-arm::after { content:''; position:absolute; bottom:-6px; left:-1px; width:11px; height:9px; background:#fff; border-radius:50%;
    box-shadow: inset -1px -1px 0 #d9d9d9; }

/* Piernas con zapatos marrones */
.h-leg { top: 50px; width: 12px; height: 8px; background: var(--ov); z-index: 4; transform-origin: top center; }
.h-leg.left  { left: 9px; }
.h-leg.right { left: 23px; }
.h-leg::after { content:''; position:absolute; bottom:-5px; left:-2px; width:16px; height:7px; background:#6e3a14; border-radius:6px 8px 5px 5px;
    box-shadow: inset 0 -2px 0 #4d260c; }

/* Mirar a la izquierda */
.hero.face-left { transform: scaleX(-1); }

/* Correr: balanceo de piernas y brazos */
.hero.run .h-leg.left  { animation: legSwingA .26s ease-in-out infinite; }
.hero.run .h-leg.right { animation: legSwingB .26s ease-in-out infinite; }
.hero.run .h-arm.left  { animation: legSwingB .26s ease-in-out infinite; }
.hero.run .h-arm.right { animation: legSwingA .26s ease-in-out infinite; }
@keyframes legSwingA { 0%,100%{ transform: rotate(20deg) } 50%{ transform: rotate(-20deg) } }
@keyframes legSwingB { 0%,100%{ transform: rotate(-20deg) } 50%{ transform: rotate(20deg) } }

/* Saltar: piernas recogidas, brazos arriba */
.hero.jump .h-leg.left  { transform: rotate(-22deg); }
.hero.jump .h-leg.right { transform: rotate(22deg); }
.hero.jump .h-arm.left  { transform: rotate(-40deg); }
.hero.jump .h-arm.right { transform: rotate(40deg); }

/* Invulnerable: parpadeo */
.hero.invuln { animation: heroBlink .18s steps(2,start) infinite; }
@keyframes heroBlink { 0%{ opacity:1 } 50%{ opacity:.25 } 100%{ opacity:1 } }

/* ===================================================================
   PRINCESA PEACH
   =================================================================== */
.peach { width: 64px; height: 116px; animation: floatBob 3s ease-in-out infinite; }
.peach div { position: absolute; }

.pc-crown { top: -2px; left: 22px; width: 22px; height: 12px; z-index: 7; background:#ffd11a;
    clip-path: polygon(0 100%,0 40%,25% 75%,50% 0,75% 75%,100% 40%,100% 100%); box-shadow: inset 0 -2px 0 #c79700; }
.pc-crown::after { content:''; position:absolute; top:3px; left:8px; width:6px; height:6px; background:#3aa3ff; border-radius:50%; }

.pc-hair-top { top: 8px; left: 14px; width: 38px; height: 18px; z-index: 4; background:#ffdf6b; border-radius:16px 16px 0 0;
    box-shadow: inset 0 -3px 0 #e6c34d; }
.pc-hair { top: 18px; width: 14px; height: 56px; z-index: 3; background:#ffdf6b; border-radius:8px;
    box-shadow: inset -2px 0 0 #e6c34d; }
.pc-hair.left  { left: 6px; }
.pc-hair.right { left: 46px; }
.pc-hair.left::after, .pc-hair.right::after { content:''; position:absolute; bottom:-8px; left:0; width:14px; height:14px; background:#ffdf6b; border-radius:50%; }

.pc-face { top: 18px; left: 18px; width: 30px; height: 26px; z-index: 5; background:#ffd9b8; border-radius:12px;
    box-shadow: inset -3px -3px 0 #ecbf98; }
.pc-eye { top: 27px; width: 6px; height: 9px; background:#fff; border-radius:50%; z-index:6; }
.pc-eye::after { content:''; position:absolute; top:2px; left:1px; width:4px; height:5px; background:#3a7ad9; border-radius:50%; }
.pc-eye.left  { left: 25px; }
.pc-eye.right { left: 38px; }
.pc-lashes { top: 25px; width: 7px; height: 3px; background:#7a5a1a; z-index:7; border-radius:3px; }
.pc-lashes.left  { left: 24px; }
.pc-lashes.right { left: 38px; }
.pc-cheek { top: 34px; width: 5px; height: 4px; background:#ff9ec2; border-radius:50%; z-index:6; opacity:.8; }
.pc-cheek.left  { left: 21px; }
.pc-cheek.right { left: 42px; }
.pc-mouth { top: 38px; left: 29px; width: 8px; height: 4px; background:#d24b6a; border-radius:0 0 6px 6px; z-index:6; }

/* Vestido rosa */
.pc-dress { bottom: 0; left: 4px; width: 56px; height: 56px; z-index: 4;
    background: linear-gradient(180deg,#ff7bb0,#f2519a);
    clip-path: polygon(34% 0,66% 0,100% 100%,0 100%);
    box-shadow: inset 0 -6px 0 rgba(0,0,0,.12);
}
.pc-bodice { top: 40px; left: 22px; width: 20px; height: 26px; z-index: 5; background:#ff7bb0; border-radius:8px 8px 4px 4px;
    box-shadow: inset 0 -3px 0 #e85f9a; }
.pc-collar { top: 38px; left: 20px; width: 24px; height: 8px; z-index: 6; background:#7ad0ff; border-radius:8px; }
.pc-gem { top: 44px; left: 29px; width: 6px; height: 8px; background:#3aa3ff; border-radius:50%; z-index:7; box-shadow:0 0 4px #7ad0ff; }
.pc-arm { top: 44px; width: 8px; height: 20px; background:#ffd9b8; z-index:4; border-radius:5px; }
.pc-arm.left { left: 14px; transform: rotate(10deg); }
.pc-arm.right { left: 42px; transform: rotate(-10deg); animation: peachWave 1.6s ease-in-out infinite; transform-origin: top center; }
.pc-arm::after { content:''; position:absolute; bottom:-3px; left:-1px; width:10px; height:8px; background:#fff; border-radius:50%; }
@keyframes peachWave { 0%,100%{ transform: rotate(-10deg) } 50%{ transform: rotate(-46deg) } }

/* ===================================================================
   8) GOOMBA — hongo marrón enojado con patitas
   =================================================================== */
.goomba { width: 60px; height: 58px; animation: gmWalk .5s ease-in-out infinite; transform-origin: bottom center; }
.goomba div { position: absolute; }
@keyframes gmWalk { 0%,100%{ transform: rotate(-4deg) } 50%{ transform: rotate(4deg) } }

.gm-head {
    top: 2px; left: 4px; width: 52px; height: 40px; z-index: 3;
    background: radial-gradient(circle at 50% 32%, #b9803f, #8a5a28);
    border-radius: 50% 50% 42% 42%;
    box-shadow: inset -4px -4px 0 #6e4519, inset 4px 4px 0 #c98f4f;
}
.gm-brow { top: 11px; width: 18px; height: 7px; background:#3a230c; z-index:5; border-radius:3px; }
.gm-brow.left  { left: 9px;  transform: rotate(22deg); }
.gm-brow.right { left: 33px; transform: rotate(-22deg); }
.gm-eye { top: 15px; width: 11px; height: 14px; background:#fff; border-radius:50%; z-index:4; }
.gm-eye::after { content:''; position:absolute; bottom:2px; left:3px; width:5px; height:6px; background:#000; border-radius:50%; }
.gm-eye.left  { left: 12px; }
.gm-eye.right { left: 31px; }
.gm-mouth { top: 31px; left: 17px; width: 26px; height: 7px; background:#3a230c; border-radius:0 0 9px 9px; z-index:5; }
.gm-mouth::before { content:''; position:absolute; top:0; left:1px; width:5px; height:5px; background:#fff; }
.gm-mouth::after  { content:''; position:absolute; top:0; right:1px; width:5px; height:5px; background:#fff; }
.gm-foot { top: 42px; width: 22px; height: 15px; background:#7a3f12; z-index:2; box-shadow: inset 0 -3px 0 #5a2d0c; }
.gm-foot.left  { left: 6px;  border-radius: 8px 6px 6px 10px; }
.gm-foot.right { left: 32px; border-radius: 6px 8px 10px 6px; }

/* ===================================================================
   9) SPINY — caparazón rojo con púas blancas, cuerpo naranja
   =================================================================== */
.spiny { width: 66px; height: 56px; animation: spWalk .42s ease-in-out infinite; }
.spiny div { position: absolute; }
@keyframes spWalk { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-3px) } }

.sp-spike { position:absolute; width:0; height:0; z-index:2;
    border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:14px solid #fff3d6; }
.sp-spike.s1 { top: 8px;  left: 0px;  transform: rotate(-72deg); }
.sp-spike.s2 { top: -5px; left: 12px; transform: rotate(-30deg); }
.sp-spike.s3 { top: -9px; left: 26px; }
.sp-spike.s4 { top: -5px; left: 40px; transform: rotate(30deg); }
.sp-spike.s5 { top: 8px;  left: 52px; transform: rotate(72deg); }
.sp-shell {
    top: 6px; left: 9px; width: 48px; height: 30px; z-index: 3;
    background: radial-gradient(circle at 50% 38%, #ff5b4a, #c81f17);
    border-radius: 50% 50% 32% 32%;
    box-shadow: inset -4px -3px 0 #9c1410, inset 4px 3px 0 #ff8a7a;
}
.sp-shell::after { content:''; position:absolute; top:8px; left:10px; width:8px; height:8px; background:rgba(255,255,255,.5); border-radius:50%; box-shadow:16px 4px 0 rgba(255,255,255,.35); }
.sp-body {
    top: 28px; left: 12px; width: 42px; height: 24px; z-index: 4;
    background:#f0961e; border-radius: 38% 38% 46% 46%;
    box-shadow: inset 0 -3px 0 #c4720c, inset 0 3px 0 #ffb45a;
}
.sp-eye { top: 31px; width: 12px; height: 11px; background:#fff; border-radius:50%; z-index:5; }
.sp-eye::after { content:''; position:absolute; bottom:1px; left:3px; width:5px; height:6px; background:#000; border-radius:50%; }
.sp-eye.left  { left: 16px; }
.sp-eye.right { left: 36px; }
.sp-mouth { top: 44px; left: 26px; width: 14px; height: 6px; background:#7a3a06; border-radius:0 0 8px 8px; z-index:5; }
.sp-foot { top: 48px; width: 16px; height: 10px; background:#d97d12; border-radius:6px 6px 5px 5px; z-index:3; box-shadow: inset 0 -2px 0 #a85e08; }
.sp-foot.left  { left: 13px; }
.sp-foot.right { left: 37px; }

/* ===================================================================
   10) DRY BONES — Koopa esqueleto (huesos y calavera)
   =================================================================== */
.drybones { width: 56px; height: 64px; animation: dbRattle .28s ease-in-out infinite; transform-origin: bottom center; }
.drybones div { position: absolute; }
@keyframes dbRattle { 0%,100%{ transform: translateX(0) } 25%{ transform: translateX(-1.5px) } 75%{ transform: translateX(1.5px) } }

.db-skull {
    top: 0; left: 12px; width: 32px; height: 28px; z-index: 6;
    background:#f1efe2; border-radius: 13px 13px 14px 14px;
    box-shadow: inset -3px -3px 0 #cfccba, inset 3px 3px 0 #ffffff;
}
.db-eye { top: 7px; width: 9px; height: 11px; background:#1c1a12; border-radius:50%; z-index:7; }
.db-eye::after { content:''; position:absolute; top:2px; left:2px; width:4px; height:4px; background:#ff5a3c; border-radius:50%; box-shadow:0 0 4px #ff5a3c; }
.db-eye.left  { left: 5px; }
.db-eye.right { left: 18px; }
.db-snout { top: 18px; left: 9px; width: 14px; height: 8px; background:#e7e4d4; border-radius:5px; z-index:7; }
.db-snout::after { content:''; position:absolute; top:0; left:3px; width:2px; height:8px; background:#bdb9a4; box-shadow:4px 0 0 #bdb9a4, 8px 0 0 #bdb9a4; }
.db-shell {
    top: 24px; left: 7px; width: 42px; height: 30px; z-index: 3;
    background: radial-gradient(circle at 50% 38%, #eceadb, #b9b6a3);
    border-radius: 50% 50% 44% 44%; border: 3px solid #8f8c79;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,.12);
}
.db-shell::after { content:''; position:absolute; top:8px; left:18px; width:3px; height:14px; background:#8f8c79; transform: rotate(12deg); box-shadow:-9px 3px 0 #8f8c79; }
.db-arm { top: 30px; width: 8px; height: 16px; background:#e9e7da; z-index:2; border-radius:4px; box-shadow: inset -2px 0 0 #c9c6b5; }
.db-arm.left  { left: 2px;  transform: rotate(12deg); }
.db-arm.right { left: 46px; transform: rotate(-12deg); }
.db-leg { top: 50px; width: 9px; height: 14px; background:#e9e7da; z-index:2; border-radius:4px; box-shadow: inset -2px 0 0 #c9c6b5; }
.db-leg.left  { left: 14px; }
.db-leg.right { left: 33px; }
.db-leg::after { content:''; position:absolute; bottom:-2px; left:-2px; width:13px; height:5px; background:#e9e7da; border-radius:4px; }

/* ===================================================================
   Animación de derrota de enemigo (poof) — usada por el juego
   =================================================================== */
@keyframes enemyPoof {
    0%   { transform: scale(1) rotate(0); opacity: 1; }
    100% { transform: scale(.2) rotate(40deg) translateY(20px); opacity: 0; }
}