/* =================================================================
   MASCOTA (mascot.css)
   Animaciones de la mascota (la dibuja JS/mascot.js) y su panel «Mi mascota».
   Las coordenadas de transform-origin están en unidades del dibujo (viewBox 160 × 170).
   Nada brilla hacia afuera: profundidad con relieve interior.
   ================================================================= */

.mx { display: block; width: 100%; height: auto; overflow: visible; }
.mx-wrap { display: block; }
.mx-shadow { fill: rgba(0, 0, 0, 0.22); transform-origin: 80px 149px; animation: mxShadow 3.2s ease-in-out infinite; }

/* Respiración y cabeza */
.mx-body { transform-origin: 80px 145px; animation: mxBreathe 3.2s ease-in-out infinite; }
.mx-head { transform-origin: 80px 92px; animation: mxTilt 6.4s ease-in-out infinite; }
.mx-eyes { transform-box: fill-box; transform-origin: center; animation: mxBlink 5s infinite; }
.mx-ear-l { transform-origin: 66px 44px; animation: mxEarL 4s ease-in-out infinite; }
.mx-ear-r { transform-origin: 94px 44px; animation: mxEarR 4s ease-in-out infinite; }
.mx-tail { transform-origin: 108px 132px; animation: mxTail 2.6s ease-in-out infinite; }

@keyframes mxBreathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-3px) scale(1.015, 0.985); } }
@keyframes mxShadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.88); opacity: 0.7; } }
@keyframes mxTilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }
@keyframes mxBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes mxEarL { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-10deg); } }
@keyframes mxEarR { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(10deg); } }
@keyframes mxTail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }

/* Ahorrando: abraza la moneda */
.mx-coin { transform-origin: 80px 112px; animation: mxHug 3.2s ease-in-out infinite; }
.mx-shine { animation: mxCoinShine 4s ease-in-out infinite; }
.mx-spark { fill: #fff6c8; transform-box: fill-box; transform-origin: center; opacity: 0; animation: mxSpark 2.8s ease-in-out infinite; }
.mx-spark-2 { animation-delay: 0.9s; }
.mx-spark-3 { animation-delay: 1.8s; }
@keyframes mxHug { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes mxCoinShine { 0%, 50% { transform: translateX(-30px); } 100% { transform: translateX(80px); } }
@keyframes mxSpark { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* Desayunando: sorbo de café, vapor y tostada */
.mx-sip { transform-origin: 112px 100px; animation: mxSip 4s ease-in-out infinite; }
.mx-act-breakfast .mx-arm-r { transform-origin: 112px 112px; animation: mxSip 4s ease-in-out infinite; }
.mx-steam path { animation: mxSteam 2.4s ease-in-out infinite; }
.mx-steam path:nth-child(2) { animation-delay: 1.2s; }
.mx-toast { transform-origin: 63px 116px; animation: mxNibble 4s ease-in-out infinite; }
@keyframes mxSip { 0%, 55%, 100% { transform: rotate(0); } 70%, 85% { transform: rotate(-12deg) translate(-2px, -2px); } }
@keyframes mxSteam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes mxNibble { 0%, 20%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 40% { transform: rotate(0); } }

/* Leyendo: pasa las páginas y asiente */
.mx-act-reading .mx-head { animation: mxNod 3.6s ease-in-out infinite; }
.mx-page { transform-origin: 80px 116px; animation: mxPage 4.2s ease-in-out infinite; }
@keyframes mxNod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2deg) translateY(1.5px); } }
@keyframes mxPage { 0%, 55% { transform: scaleX(1); } 75% { transform: scaleX(0); } 76%, 100% { transform: scaleX(-1); } }

/* En bici: ruedas que giran, rebote y carretera que corre */
.mx-wheel { transform-box: fill-box; transform-origin: center; animation: mxSpin 0.7s linear infinite; }
.mx-act-bike .mx-char { animation: mxPedal 0.45s ease-in-out infinite alternate; }
.mx-act-bike .mx-body { animation-duration: 1.6s; }
.mx-road { animation: mxRoad 0.6s linear infinite; }
@keyframes mxSpin { to { transform: rotate(360deg); } }
@keyframes mxPedal { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes mxRoad { to { stroke-dashoffset: 21; } }

/* Patinando: va y viene sobre la patineta */
.mx-ride { transform-origin: 80px 158px; animation: mxSkate 2.6s ease-in-out infinite; }
.mx-wind path { animation: mxWind 1.3s linear infinite; }
.mx-wind path:nth-child(2) { animation-delay: 0.4s; }
.mx-wind path:nth-child(3) { animation-delay: 0.8s; }
.mx-act-skate .mx-arm-l { transform-origin: 54px 104px; animation: mxBalanceL 2.6s ease-in-out infinite; }
.mx-act-skate .mx-arm-r { transform-origin: 106px 104px; animation: mxBalanceR 2.6s ease-in-out infinite; }
@keyframes mxSkate { 0%, 100% { transform: translateX(-8px) rotate(-3deg); } 50% { transform: translateX(8px) rotate(3deg); } }
@keyframes mxWind { 0% { opacity: 0; transform: translateX(10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(-14px); } }
@keyframes mxBalanceL { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes mxBalanceR { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } }

/* Bailando: se balancea, mueve los brazos y salen notas */
.mx-act-dance .mx-char { transform-origin: 80px 150px; animation: mxDance 1s ease-in-out infinite alternate; }
.mx-act-dance .mx-arm-l, .mx-act-celebrate .mx-arm-l { transform-origin: 52px 100px; animation: mxWaveL 0.5s ease-in-out infinite alternate; }
.mx-act-dance .mx-arm-r, .mx-act-celebrate .mx-arm-r { transform-origin: 108px 100px; animation: mxWaveR 0.5s ease-in-out infinite alternate; }
.mx-note { fill: #fff; opacity: 0; animation: mxNote 2.4s ease-in-out infinite; }
.mx-note-2 { animation-delay: 0.8s; }
.mx-note-3 { animation-delay: 1.6s; }
@keyframes mxDance { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(6deg) translateY(-3px); } }
@keyframes mxWaveL { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
@keyframes mxWaveR { from { transform: rotate(10deg); } to { transform: rotate(-14deg); } }
@keyframes mxNote { 0% { opacity: 0; transform: translateY(8px) rotate(-8deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) rotate(10deg); } }

/* Con sueño: cabecea y bosteza */
.mx-act-sleepy .mx-head { animation: mxDroop 4.5s ease-in-out infinite; }
.mx-yawn { transform-box: fill-box; transform-origin: center; animation: mxYawn 4.5s ease-in-out infinite; }
@keyframes mxDroop { 0%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(-7deg) translateY(3px); } }
@keyframes mxYawn { 0%, 30%, 75%, 100% { transform: scale(0.4); } 45%, 60% { transform: scale(1.15); } }

/* Durmiendo: respiración lenta y zzz */
.mx-act-sleep .mx-body { animation-duration: 4.6s; }
.mx-act-sleep .mx-head { animation: none; }
.mx-z { fill: #fff; opacity: 0; animation: mxZ 3s ease-in-out infinite; }
.mx-z2 { animation-delay: 1.2s; }
@keyframes mxZ { 0% { opacity: 0; transform: translate(0, 6px); } 40% { opacity: 0.9; } 100% { opacity: 0; transform: translate(6px, -10px); } }

/* Celebrando: salta con confeti */
.mx-act-celebrate .mx-char { transform-origin: 80px 150px; animation: mxJump 0.9s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
.mx-confetti { opacity: 0; animation: mxFall 2.2s linear infinite; }
.mx-cf-1 { animation-delay: 0.35s; } .mx-cf-2 { animation-delay: 0.8s; } .mx-cf-3 { animation-delay: 1.2s; }
.mx-cf-4 { animation-delay: 0.55s; } .mx-cf-5 { animation-delay: 1.5s; }
@keyframes mxJump { 0%, 100% { transform: translateY(0) scale(1.03, 0.97); } 45% { transform: translateY(-10px) scale(0.98, 1.02); } }
@keyframes mxFall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(150px) rotate(320deg); } }

/* Reacciones: caricia (corazones), snack (galleta) y jugar (pirueta) */
.mx-heart, .mx-cookie { opacity: 0; }
.react-pet .mx-heart { transform-box: fill-box; transform-origin: center; animation: mxHeart 1.4s ease-out both; }
.react-pet .mx-heart-1 { animation-delay: 0.15s; }
.react-pet .mx-heart-2 { animation-delay: 0.3s; }
.react-pet .mx-char { animation: mxSquish 0.6s ease-in-out 2; transform-origin: 80px 150px; }
.react-snack .mx-cookie { transform-box: view-box; animation: mxCookie 1.1s ease-in both; }
.react-snack .mx-head { animation: mxMunch 0.25s ease-in-out 4 0.8s; }
.react-play .mx-char { transform-origin: 80px 110px; animation: mxFlip 1.1s cubic-bezier(0.4, 0, 0.3, 1); }
@keyframes mxHeart { 0% { opacity: 0; transform: translateY(6px) scale(0.4); } 25% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: translateY(-24px) scale(0.9); } }
@keyframes mxSquish { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.06, 0.93); } }
@keyframes mxCookie { 0% { opacity: 1; transform: translate(0, 0); } 80% { opacity: 1; transform: translate(-66px, 14px) scale(0.6); } 100% { opacity: 0; transform: translate(-66px, 14px) scale(0); } }
@keyframes mxMunch { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px) scaleY(0.98); } }
@keyframes mxFlip { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-22px) rotate(180deg); } 80% { transform: translateY(0) rotate(360deg); } 90% { transform: scale(1.05, 0.95); } 100% { transform: none; } }

/* ---------------------------------------------------------------
   PANEL «MI MASCOTA»
   --------------------------------------------------------------- */
.mx-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(6, 5, 12, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.mx-overlay[hidden] { display: none; }
body.mx-open { overflow: hidden; }
.mx-sheet {
    position: relative;
    width: min(480px, 100%);
    max-height: 94dvh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: mxUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.dark-mode .mx-sheet { background: linear-gradient(180deg, #232031, #1b1928); }
@keyframes mxUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 769px) {
    .mx-overlay { align-items: center; }
    .mx-sheet { border-radius: 26px; }
}
.mx-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--input-bg);
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -2px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.mx-close svg { width: 18px; height: 18px; }
.mx-close:focus:not(:focus-visible) { outline: none; }
.mx-eyebrow { margin: 2px 0 10px; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }

/* Escenario: cielo según la hora, piso y burbuja de diálogo */
.mx-stage {
    --sky-a: #5547ad; --sky-b: #3c8cc4;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 12px 14px;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 40% at 50% 100%, rgba(0, 0, 0, 0.28), transparent 70%),
        linear-gradient(180deg, var(--sky-a), var(--sky-b));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -10px 24px rgba(0, 0, 0, 0.2);
}
.mx-stage[data-sky="morning"] { --sky-a: #ec9466; --sky-b: #9a7ddc; }
.mx-stage[data-sky="evening"] { --sky-a: #e27c54; --sky-b: #4f3aa8; }
.mx-stage[data-sky="night"]   { --sky-a: #1c1442; --sky-b: #2e1e66; }
.mx-stage-slot { display: flex; justify-content: center; width: 100%; }
.mx-bubble-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.mx-stage-pet { width: 230px; max-width: 72%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mx-stage-pet:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 20px; }
.mx-bubble {
    position: relative;
    margin-top: 6px;
    max-width: 92%;
    padding: 9px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    color: #2a2540;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.1);
    border: 0;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mx-bubble:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mx-bubble::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: inherit;
    transform: rotate(45deg);
    border-radius: 2px;
}

.mx-name-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.mx-name-row span { flex-shrink: 0; font-size: 0.8rem; font-weight: 800; color: var(--text-secondary); }
.mx-name-row input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--input-border, var(--card-border));
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-weight: 700;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25);
}
.mx-title { margin: 12px 0 0; font-size: 1.25rem; font-weight: 900; overflow-wrap: anywhere; }
.mx-title small { font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); }

.mx-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mx-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 10px 4px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -3px 6px rgba(0, 0, 0, 0.22);
    -webkit-tap-highlight-color: transparent;
}
.mx-act span { font-size: 1.45rem; line-height: 1; }
.mx-act:active { transform: scale(0.95); }

.mx-stats { margin-top: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; gap: 9px; }
body.light-mode .mx-stats { background: rgba(0, 0, 0, 0.03); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08); }
.mx-stat-top { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 700; margin-bottom: 4px; }
.mx-groove { display: block; height: 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5); overflow: hidden; }
body.light-mode .mx-groove { background: rgba(0, 0, 0, 0.08); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15); }
.mx-groove > span { display: block; height: 100%; min-width: 5px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 2px rgba(0, 0, 0, 0.25); transition: width 0.6s ease; }
.is-happy .mx-groove > span { background: linear-gradient(90deg, #f2b14c, #ffd84d); }
.is-energy .mx-groove > span { background: linear-gradient(90deg, #34d3a6, #8ff0cf); }
.is-love .mx-groove > span { background: linear-gradient(90deg, #e5484d, #ff8a8a); }
.mx-hint { margin: 2px 0 0; font-size: 0.74rem; line-height: 1.4; color: var(--text-secondary); }

.mx-sec { margin-top: 16px; }
.mx-sec h4 { margin: 0 0 8px; font-size: 0.92rem; font-weight: 800; }
.mx-sec h4 small { display: block; margin-top: 2px; font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); }
.mx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-chip {
    padding: 7px 12px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.18);
}
.mx-chip.is-on, .mx-sp.is-on, .mx-acc.is-on {
    border-color: transparent;
    background: var(--au-btn, linear-gradient(135deg, #6f64c4, #4c79bd));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -3px 4px rgba(0, 0, 0, 0.22);
}

.mx-species { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mx-sp { padding-bottom: 6px; }
.mx-sp, .mx-acc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 8px 2px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -3px 6px rgba(0, 0, 0, 0.2);
    overflow-wrap: anywhere;
}
.mx-sp-art { width: 100%; max-width: 64px; }
.mx-sp-art .mx * { animation: none !important; }
.mx-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.mx-acc-ico { font-size: 1.4rem; line-height: 1.1; }
.mx-acc.is-locked, .mx-sp.is-locked { opacity: 0.55; }
.mx-sp.is-locked .mx-sp-art { filter: grayscale(0.85) brightness(0.9); }
.mx-sp em { font-style: normal; font-size: 0.6rem; font-weight: 800; color: var(--text-secondary); }
.mx-acc.is-locked .mx-acc-ico { filter: grayscale(1); }
.mx-acc em { font-style: normal; font-size: 0.62rem; font-weight: 800; color: var(--text-secondary); }

@media (max-width: 400px) {
    .mx-species { gap: 4px; }
    .mx-sp { font-size: 0.6rem; padding-left: 1px; padding-right: 1px; }
}

.mx-sheet:focus, .ha-sheet:focus { outline: none; }

/* ---------------------------------------------------------------
   ACCESORIOS DEL VÍNCULO Y HAMBRE
   --------------------------------------------------------------- */
.mx-cape { transform-origin: 80px 92px; animation: mxCape 3.2s ease-in-out infinite; }
.mx-act-bike .mx-cape, .mx-act-skate .mx-cape { animation-duration: 0.9s; }
@keyframes mxCape { 0%, 100% { transform: skewX(0) scaleY(1); } 50% { transform: skewX(-4deg) scaleY(1.02); } }
.mx-think { animation: mxThink 2.6s ease-in-out infinite; }
@keyframes mxThink { 0%, 100% { transform: translateY(0); opacity: 0.95; } 50% { transform: translateY(-3px); opacity: 1; } }

/* «No» con la cabeza (no hay croquetas) */
.react-nope .mx-head { animation: mxNope 0.5s ease-in-out 2; }
@keyframes mxNope { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

/* ---------------------------------------------------------------
   INICIO: aviso de la mascota (hambre, premio listo, racha)
   --------------------------------------------------------------- */
.hm-mascot { isolation: isolate; }
.hm-mascot .hm-mascot-btn { position: relative; }
.hm-mascot.has-alert .hm-mascot-btn::after {
    content: '';
    position: absolute;
    top: 8%;
    right: 12%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffd8a0, #f59a3c 55%, #b8601a);
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 0 2px rgba(20, 16, 34, 0.55);
    animation: mxPing 1.8s ease-in-out infinite;
}
.hm-mascot.has-alert .hm-mascot-tag {
    background: linear-gradient(180deg, #f2b14c, #d9801f);
    color: #2a1606;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.25);
    animation: mxNudge 3.2s ease-in-out infinite;
}
@keyframes mxPing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes mxNudge { 0%, 85%, 100% { transform: rotate(0); } 89% { transform: rotate(-4deg); } 93% { transform: rotate(4deg); } 97% { transform: rotate(-2deg); } }

/* Texto que sube (+XP, récords) */
.mx-float {
    position: absolute;
    left: 50%;
    top: 34%;
    z-index: 6;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
    color: #2a1d00;
    background: linear-gradient(180deg, #ffe08a, #f2b14c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    animation: mxFloat 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mx-float.is-streak { background: linear-gradient(180deg, #ffb27a, #f0772b); color: #2a0f00; }
.mx-float.is-level { background: linear-gradient(180deg, #c7bdff, #8b7cf6); color: #160f3a; font-size: 0.95rem; }
@keyframes mxFloat { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }

/* ---------------------------------------------------------------
   PANEL: cabecera, burbuja con acción, vínculo y pestañas
   --------------------------------------------------------------- */
.mx-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 44px; margin-bottom: 10px; }
.mx-top .mx-eyebrow { margin: 0; }
.mx-pills { display: flex; gap: 6px; flex-shrink: 0; }
.mx-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    background: var(--input-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}
.mx-pill b { font-weight: 900; }
.mx-pill.is-streak b { color: var(--au-orange, #f59a3c); }
.mx-pill.is-streak.is-off { opacity: 0.6; filter: grayscale(0.7); }
.mx-pill.is-treat b { color: var(--au-amber, #f2b14c); }

.mx-cta {
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(180deg, #5d95e8, #3d6fc4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -3px 4px rgba(0, 0, 0, 0.25), 0 4px 10px -6px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mx-cta:active, .mx-claim:active, .mx-go:active, .mx-tab:active { transform: scale(0.96); }

.mx-bond {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(139, 124, 246, 0.12), rgba(139, 124, 246, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -3px 8px rgba(0, 0, 0, 0.18);
}
.mx-bond-emblem {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    background: conic-gradient(from 210deg, #b3a8ff, #6d5ce6, #4f8ff7, #b3a8ff);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.45), inset 0 -4px 6px rgba(0, 0, 0, 0.35);
}
.mx-bond-emblem span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 40% 30%, #2d2848, #17142a);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
body.light-mode .mx-bond-emblem span { background: radial-gradient(circle at 40% 30%, #ffffff, #e7e3fb); }
.mx-bond-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mx-bond-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mx-bond-top strong { font-size: 1.15rem; font-weight: 900; overflow-wrap: anywhere; }
.mx-bond-top small { flex-shrink: 0; font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); }
.mx-bond-name { font-size: 0.78rem; font-weight: 800; color: var(--au-violet-hi, #b3a8ff); }
body.light-mode .mx-bond-name { color: #6d5ce6; }
.mx-bond-next { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }
.is-bond.mx-groove > span { background: linear-gradient(90deg, #6d5ce6, #8b7cf6 60%, #8cc4ff); }

.mx-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: 12px;
    padding: 4px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
body.light-mode .mx-tabs { background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }
.mx-tab {
    position: relative;
    min-width: 0;
    padding: 9px 4px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
}
.mx-tab.is-on {
    color: #fff;
    background: var(--au-btn, linear-gradient(135deg, #6f64c4, #4c79bd));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -3px 4px rgba(0, 0, 0, 0.22);
}
.mx-dot {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 900;
    color: #2a1606;
    background: linear-gradient(180deg, #ffd08a, #f59a3c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.25);
    vertical-align: 1px;
}
.mx-tabpanel { margin-top: 12px; }
.mx-tabpanel .mx-actions, .mx-tabpanel .mx-stats { margin-top: 0; }
.mx-tabpanel .mx-stats { margin-top: 12px; }
.mx-tabpanel > .mx-name-row { margin-top: 0; }

/* Acciones: contador de croquetas y botón del juego */
.mx-act { position: relative; }
.mx-count {
    position: absolute;
    top: 5px;
    right: 6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 900;
    color: #2a1d00;
    background: linear-gradient(180deg, #ffe08a, #f2b14c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}
.mx-act.is-empty .mx-count { color: var(--text-secondary); background: var(--card-bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.mx-act.is-empty > span { filter: grayscale(0.8); opacity: 0.7; }
.mx-act.is-game { background: linear-gradient(180deg, rgba(242, 177, 76, 0.2), rgba(242, 177, 76, 0.06)), var(--input-bg); }

.is-food .mx-groove > span { background: linear-gradient(90deg, #f59a3c, #ffc970); }
.is-food.is-low .mx-stat-top strong { color: #f59a3c; }
.is-food.is-low .mx-groove > span { animation: mxLow 1.2s ease-in-out infinite; }
@keyframes mxLow { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.mx-records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.mx-records > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 10px 4px;
    border-radius: 14px;
    text-align: center;
    background: var(--input-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -3px 6px rgba(0, 0, 0, 0.2);
}
.mx-records em { font-style: normal; font-size: 1.2rem; line-height: 1; }
.mx-records strong { margin-top: 4px; font-size: 1.05rem; font-weight: 900; }
.mx-records small { font-size: 0.66rem; font-weight: 700; color: var(--text-secondary); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------
   MISIONES: racha, lista y cofre
   --------------------------------------------------------------- */
.mx-streak {
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(245, 154, 60, 0.16), rgba(245, 154, 60, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -3px 8px rgba(0, 0, 0, 0.18);
}
.mx-streak-top { display: flex; align-items: center; gap: 10px; }
.mx-streak-top strong { display: block; font-size: 1.05rem; font-weight: 900; }
.mx-streak-top small { display: block; font-size: 0.76rem; font-weight: 600; color: var(--text-secondary); line-height: 1.35; }
.mx-flame { font-size: 2rem; line-height: 1; animation: mxFlame 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.mx-flame.is-off { filter: grayscale(1); opacity: 0.5; animation: none; }
@keyframes mxFlame { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08, 1.12) rotate(2deg); } }
.mx-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.mx-day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.mx-day i {
    width: 100%;
    max-width: 36px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 0.95rem;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
body.light-mode .mx-day i { background: rgba(0, 0, 0, 0.06); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.12); }
.mx-day.is-done i { background: radial-gradient(circle at 35% 30%, #ffd08a, #f59a3c 60%, #c4641c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 4px rgba(0, 0, 0, 0.3); }
.mx-day.is-today small { color: var(--text-primary); font-weight: 900; }
.mx-day small { font-size: 0.66rem; font-weight: 700; color: var(--text-secondary); }
.mx-streak-goal { display: block; margin-top: 8px; font-size: 0.74rem; color: var(--text-secondary); }

.mx-missions { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mx-mission {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--input-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -3px 6px rgba(0, 0, 0, 0.2);
}
.mx-mission-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
body.light-mode .mx-mission-ico { background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1); }
.mx-mission-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mx-mission-text strong { font-size: 0.84rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.mx-mission-text small { font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); }
.mx-groove.is-mission { height: 7px; }
.is-mission.mx-groove > span { background: linear-gradient(90deg, #4f8ff7, #8cc4ff); }
.mx-mission.is-done { background: linear-gradient(180deg, rgba(52, 211, 166, 0.16), rgba(52, 211, 166, 0.05)), var(--input-bg); }
.mx-mission.is-done .is-mission.mx-groove > span, .mx-mission.is-claimed .is-mission.mx-groove > span { background: linear-gradient(90deg, #22b68c, #6fe6c2); }
.mx-mission.is-claimed { opacity: 0.7; }
.mx-mission.is-claimed strong { text-decoration: line-through; text-decoration-thickness: 1.5px; }

.mx-claim, .mx-go {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mx-claim {
    color: #06281e;
    background: linear-gradient(180deg, #6fe6c2, #22b68c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 4px rgba(0, 0, 0, 0.22), 0 4px 10px -6px rgba(0, 0, 0, 0.6);
    animation: mxPing 1.6s ease-in-out infinite;
}
.mx-go {
    color: var(--text-primary);
    background: var(--card-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}
.mx-check {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #06281e;
    background: radial-gradient(circle at 35% 30%, #a6f3dc, #22b68c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.25);
}

.mx-chest {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px dashed var(--card-border);
    background: rgba(255, 255, 255, 0.02);
}
.mx-chest-ico { font-size: 2rem; line-height: 1; filter: grayscale(0.6); opacity: 0.75; }
.mx-chest-text { flex: 1; min-width: 0; }
.mx-chest-text strong { display: block; font-size: 0.92rem; font-weight: 900; }
.mx-chest-text small { display: block; font-size: 0.74rem; color: var(--text-secondary); line-height: 1.35; }
.mx-chest.is-ready {
    border-style: solid;
    border-color: transparent;
    background: linear-gradient(180deg, rgba(242, 177, 76, 0.22), rgba(242, 177, 76, 0.06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -3px 8px rgba(0, 0, 0, 0.2);
}
.mx-chest.is-ready .mx-chest-ico { filter: none; opacity: 1; animation: mxChest 1.4s ease-in-out infinite; }
.mx-chest.is-open .mx-chest-ico { filter: none; opacity: 1; }
@keyframes mxChest { 0%, 70%, 100% { transform: rotate(0) scale(1); } 76% { transform: rotate(-10deg) scale(1.1); } 84% { transform: rotate(10deg) scale(1.1); } 92% { transform: rotate(-5deg); } }

/* ---------------------------------------------------------------
   MINIJUEGO «LLUVIA DE MONEDAS» (sobre el escenario)
   --------------------------------------------------------------- */
.mx-stage { min-height: 300px; }
.mx-stage.is-playing .mx-stage-slot, .mx-stage.is-playing .mx-bubble-wrap { visibility: hidden; }
.mx-game {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: rgba(10, 8, 24, 0.28);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
.mx-game-hud { display: flex; justify-content: space-between; gap: 8px; color: #fff; font-weight: 900; font-size: 0.95rem; }
.mx-game-hud > span {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
.mx-game-score.is-up { animation: mxScoreUp 0.35s ease-out; }
.mx-game-score.is-down { animation: mxScoreDown 0.4s ease-out; background: rgba(229, 72, 77, 0.55); }
@keyframes mxScoreUp { 50% { transform: scale(1.18); } }
@keyframes mxScoreDown { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mx-game-field { position: relative; flex: 1; margin: 6px 0; }
.mx-game-hint { margin: 0; text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 0.74rem; font-weight: 700; }
.mx-drop {
    position: absolute;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.9rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: mxDrop var(--life, 1200ms) ease-in both;
}
.mx-drop.is-gem { background: rgba(140, 196, 255, 0.28); }
.mx-drop.is-ant { background: rgba(229, 72, 77, 0.25); }
.mx-drop.is-hit {
    pointer-events: none;
    font-size: 1.1rem;
    font-weight: 900;
    color: #2a1d00;
    background: linear-gradient(180deg, #ffe08a, #f2b14c);
    animation: mxHit 0.45s ease-out both;
}
.mx-drop.is-ant.is-hit { color: #fff; background: linear-gradient(180deg, #f06b6f, #c8323a); }
@keyframes mxDrop { 0% { opacity: 0; transform: scale(0.3) translateY(-10px); } 15% { opacity: 1; transform: scale(1.05); } 80% { opacity: 1; transform: scale(1) translateY(6px); } 100% { opacity: 0; transform: scale(0.6) translateY(16px); } }
@keyframes mxHit { 0% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1) translateY(-22px); opacity: 0; } }
.mx-game-end {
    margin: auto;
    width: min(280px, 100%);
    padding: 18px 16px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    color: #2a2540;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.12);
    animation: mxUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mx-game-big { font-size: 3rem; font-weight: 900; line-height: 1; color: #c07a00; }
.mx-game-end strong { font-size: 1.05rem; font-weight: 900; }
.mx-game-end small { font-size: 0.78rem; font-weight: 700; color: #5d5878; }
.mx-game-btns { display: flex; gap: 8px; margin-top: 10px; }
.mx-game-end .mx-go { color: #2a2540; background: #ece9f7; }

@media (max-width: 400px) {
    .mx-top { padding-right: 40px; }
    .mx-pill { padding: 4px 8px; }
    .mx-tab { font-size: 0.76rem; }
    .mx-drop { width: 48px; height: 48px; font-size: 1.7rem; }
}

/* ---------------------------------------------------------------
   JUEGOS CON LA MASCOTA: bañar, cosquillas, chócala, hablar y mareo (muchas caricias seguidas).
   Las piezas (caras alternas, brazo levantado, burbujas, estrellitas…) ya están en el dibujo, ocultas;
   la clase de la reacción en .mx-wrap las muestra.
   --------------------------------------------------------------- */
.mx-look { transition: transform 0.18s ease-out; }
.mx-raise, .mx-eyes-alt, .mx-talkmouth, .mx-bubbles, .mx-foam, .mx-dstars, .mx-burst, .mx-giggle { opacity: 0; }

/* Caras alternas: ojitos felices y ojos en espiral */
.react-tickle .mx-eyeset, .react-high5 .mx-eyeset, .react-bath .mx-eyeset, .idle-stretch .mx-eyeset, .react-dizzy .mx-eyeset { opacity: 0; }
.react-tickle .mx-eyes-joy, .react-high5 .mx-eyes-joy, .react-bath .mx-eyes-joy, .idle-stretch .mx-eyes-joy { opacity: 1; }
.react-dizzy .mx-eyes-dizzy { opacity: 1; }

/* Cosquillas: se retuerce de risa y salen «ji ji» */
.react-tickle .mx-char { transform-origin: 80px 150px; animation: mxWiggle 0.14s ease-in-out 10 alternate; }
.react-tickle .mx-giggle { transform-box: fill-box; transform-origin: center; animation: mxGiggle 1.3s ease-out both; }
.react-tickle .mx-giggle-2 { animation-delay: 0.3s; }
@keyframes mxWiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translateY(-1.5px); } }
@keyframes mxGiggle { 0% { opacity: 0; transform: translateY(6px) scale(0.6); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-16px) rotate(-10deg); } }

/* Bañar: espuma en la cabeza, burbujas que suben y se sacude al final */
.react-bath .mx-bubbles { opacity: 1; }
.react-bath .mx-bub { transform-box: fill-box; transform-origin: center; animation: mxBubble 1.7s ease-out both; }
.react-bath .mx-bub-1 { animation-delay: 0.15s; } .react-bath .mx-bub-2 { animation-delay: 0.3s; } .react-bath .mx-bub-3 { animation-delay: 0.45s; }
.react-bath .mx-bub-4 { animation-delay: 0.2s; } .react-bath .mx-bub-5 { animation-delay: 0.55s; } .react-bath .mx-bub-6 { animation-delay: 0.7s; }
.react-bath .mx-bub-7 { animation-delay: 0.38s; }
.react-bath .mx-foam { transform-box: fill-box; transform-origin: 50% 100%; animation: mxFoam 2.1s ease-out both; }
.react-bath .mx-char { transform-origin: 80px 150px; animation: mxShake 0.09s ease-in-out 1.55s 6 alternate; }
@keyframes mxBubble { 0% { opacity: 0; transform: translateY(0) scale(0.4); } 15% { opacity: 1; } 85% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-110px) scale(1.15); } }
@keyframes mxFoam { 0% { opacity: 0; transform: scale(0.3); } 15%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1) translateY(-4px); } }
@keyframes mxShake { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* Saludar (en reposo) y chocar los cinco: el brazo derecho se levanta */
.react-high5 .mx-arm-r, .idle-wave .mx-arm-r { opacity: 0; }
.react-high5 .mx-raise, .idle-wave .mx-raise { opacity: 1; transform-origin: 108px 96px; }
.idle-wave .mx-raise { animation: mxWave 0.3s ease-in-out 6 alternate; }
.react-high5 .mx-raise { animation: mxHigh5 0.9s cubic-bezier(0.3, 0, 0.3, 1) both; }
.react-high5 .mx-burst { transform-box: fill-box; transform-origin: center; animation: mxBurst 0.7s ease-out 0.28s both; }
.react-high5 .mx-char { transform-origin: 80px 150px; animation: mxJump 0.9s cubic-bezier(0.3, 0, 0.4, 1) 1; }
@keyframes mxWave { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
@keyframes mxHigh5 { 0% { transform: rotate(50deg) scale(0.9); } 30% { transform: rotate(-8deg) scale(1.05); } 40% { transform: rotate(-2deg) scale(1.12); } 100% { transform: rotate(0); } }
@keyframes mxBurst { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.4); } }

/* Hablar: la boca se abre y se cierra y mueve la cabeza */
.react-talk .mx-mouth { opacity: 0; }
.react-talk .mx-talkmouth { opacity: 1; }
.react-talk .mx-tm { transform-box: fill-box; transform-origin: 50% 0; animation: mxTalk 0.15s ease-in-out infinite alternate; }
.react-talk .mx-head { animation: mxChat 0.3s ease-in-out infinite alternate; }
@keyframes mxTalk { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes mxChat { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg) translateY(-1px); } }

/* Mareo: da una vuelta, se tambalea y ve estrellitas */
.react-dizzy .mx-char { transform-origin: 80px 110px; animation: mxDizzy 2.1s ease-in-out both; }
.react-dizzy .mx-dstars { opacity: 1; }
.react-dizzy .mx-dstar { transform-box: fill-box; transform-origin: center; animation: mxOrbit 0.9s linear infinite; }
.react-dizzy .mx-dstar-2 { animation-delay: -0.3s; }
.react-dizzy .mx-dstar-3 { animation-delay: -0.6s; }
@keyframes mxDizzy { 0% { transform: rotate(0); } 30% { transform: rotate(360deg); } 45% { transform: rotate(350deg); } 60% { transform: rotate(368deg); } 78% { transform: rotate(355deg); } 100% { transform: rotate(360deg); } }
@keyframes mxOrbit { 0% { transform: translate(-24px, 2px) scale(0.85); } 25% { transform: translate(0, 7px) scale(1.15); } 50% { transform: translate(24px, 2px) scale(0.85); } 75% { transform: translate(0, -3px) scale(0.6); } 100% { transform: translate(-24px, 2px) scale(0.85); } }

/* Gestos en reposo: mirar a los lados, saltito y estirarse */
.idle-look .mx-head { animation: mxLook 1.8s ease-in-out both; }
.idle-hop .mx-char { transform-origin: 80px 150px; animation: mxHop 0.45s cubic-bezier(0.3, 0, 0.4, 1) 2; }
.idle-hop .mx-shadow { animation: mxHopShadow 0.45s ease-in-out 2; }
.idle-stretch .mx-body { animation: mxStretch 1.8s ease-in-out both; }
@keyframes mxLook { 0%, 100% { transform: none; } 20%, 40% { transform: rotate(-6deg) translateX(-2px); } 60%, 80% { transform: rotate(6deg) translateX(2px); } }
@keyframes mxHop { 0%, 100% { transform: translateY(0) scale(1.04, 0.96); } 45% { transform: translateY(-9px) scale(0.97, 1.03); } }
@keyframes mxHopShadow { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(0.75); opacity: 0.6; } }
@keyframes mxStretch { 0%, 100% { transform: none; } 35%, 55% { transform: translateY(-3px) scale(0.96, 1.07); } 72% { transform: scale(1.04, 0.95); } }

/* Especies nuevas: orejas caídas del perrito que se mecen, cola que mueve rápido */
.mx-flop-l { transform-origin: 50px 32px; animation: mxFlopL 3.2s ease-in-out infinite; }
.mx-flop-r { transform-origin: 110px 32px; animation: mxFlopR 3.2s ease-in-out infinite; }
.mx-sp-dog .mx-tail { animation-duration: 0.55s; }
.mx-sp-pig .mx-tail { animation-duration: 1.4s; }
.mx-sp-lion .mx-mane { transform-origin: 80px 60px; animation: mxMane 3.2s ease-in-out infinite; }
@keyframes mxFlopL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes mxFlopR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
@keyframes mxMane { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* Accesorios por zona (se combina uno de cada una) */
.mx-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mx-sec-head .mx-chip { flex-shrink: 0; }
.mx-slot { margin-top: 10px; }
.mx-slot:first-of-type { margin-top: 0; }
.mx-slot-name { display: block; margin-bottom: 5px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }

/* Botón de sonidos en la cabecera del panel */
.mx-sound { border: 0; font: inherit; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
.mx-sound[aria-pressed="false"] { opacity: 0.7; }
.mx-sound:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
    .mx-raise, .mx-bubbles, .mx-foam, .mx-dstars, .mx-burst, .mx-giggle { display: none; }
    .mx-look { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mx *, .mx-sheet, .mx-float, .mx-flame, .mx-claim, .mx-chest-ico, .mx-drop, .mx-game-end,
    .hm-mascot.has-alert .hm-mascot-btn::after, .hm-mascot.has-alert .hm-mascot-tag,
    .is-food.is-low .mx-groove > span { animation: none !important; }
    .mx-heart, .mx-cookie, .mx-confetti, .mx-note, .mx-z { display: none; }
}