/* estilos-pixel.css — El tema pixel art de Vida RPG (v91).
 *
 * Va DESPUÉS de estilos.css: cuando dos reglas pesan lo mismo, gana la que se lee al final.
 * Así este archivo cambia el aspecto sin reescribir los otros 10 000 renglones.
 *
 * Las ideas del pixel art que se repiten aquí:
 *   - Bordes duros: sombras SIN desenfoque ("0 4px 0" en vez de "0 10px 30px").
 *   - Contorno oscuro de 2 px alrededor de todo, como los sprites (box-shadow "0 0 0 2px").
 *   - Luz de arriba: una franja clara arriba (inset 0 2px) y una oscura abajo (inset 0 -3px).
 *   - Letra de cuadritos (DotGothic16) para títulos, números y botones.
 *   - Íconos dibujados punto por punto (js/iconos.js), con la clase .pxi.
 */

:root {
    --tinta: #06040d;                  /* el contorno de todo: violeta casi negro */
    --borde: #3a2e68;                  /* el borde de los paneles, un poco más claro que antes */
    --luz-arriba: rgba(255, 255, 255, 0.07);
    --sombra-abajo: rgba(0, 0, 0, 0.38);

    /* Un remache dorado de 3 × 3 puntos para las esquinas de los paneles. */
    --remache: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' shape-rendering='crispEdges'%3E%3Cpath fill='%239a5212' d='M0 1h3v1H0zM1 0h1v3H1z'/%3E%3Cpath fill='%23ffcb3d' d='M1 0h1v1H1zM0 1h1v1H0z'/%3E%3Cpath fill='%23fff3a6' d='M1 1h1v1H1z'/%3E%3C/svg%3E");
}

/* ===== Los íconos ===== */
/* Miden un poco más que una letra y bajan un poco para quedar alineados con el texto.
   width/height con !important: algunas reglas viejas ponen "svg { width: 100% }" en sus cajas. */
svg.pxi {
    display: inline-block;
    width: 1.25em !important;
    height: 1.25em !important;
    max-width: none;
    vertical-align: -0.26em;
    flex: none;
    stroke: none;
    overflow: visible;
}

/* ===== Fondo: cielo de noche con estrellas de un punto ===== */
body {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff'%3E%3Crect x='7' y='11' width='1' height='1' opacity='.55'/%3E%3Crect x='61' y='5' width='1' height='1' opacity='.35'/%3E%3Crect x='38' y='40' width='1' height='1' opacity='.45'/%3E%3Crect x='83' y='31' width='1' height='1' opacity='.3'/%3E%3Crect x='20' y='70' width='1' height='1' opacity='.4'/%3E%3Crect x='70' y='78' width='1' height='1' opacity='.5'/%3E%3Crect x='52' y='60' width='1' height='1' opacity='.25'/%3E%3Crect x='90' y='88' width='1' height='1' opacity='.3'/%3E%3C/g%3E%3Cg fill='%23c4b5fd' opacity='.5'%3E%3Crect x='29' y='19' width='1' height='1'/%3E%3Crect x='77' y='52' width='1' height='1'/%3E%3Crect x='12' y='45' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 192px 192px,
        radial-gradient(circle at 15% 0%, rgba(139, 92, 246, 0.2), transparent 45%),
        radial-gradient(circle at 100% 40%, rgba(34, 211, 238, 0.07), transparent 40%),
        var(--fondo);
    background-attachment: fixed;
}

/* ===== Paneles: marco con contorno, luz arriba y remaches dorados ===== */
.panel {
    border: 2px solid var(--borde);
    border-radius: var(--esquina);
    background:
        var(--remache) top 5px left 5px / 6px 6px no-repeat,
        var(--remache) top 5px right 5px / 6px 6px no-repeat,
        var(--remache) bottom 5px left 5px / 6px 6px no-repeat,
        var(--remache) bottom 5px right 5px / 6px 6px no-repeat,
        linear-gradient(180deg, var(--panel-claro), var(--panel));
    box-shadow:
        inset 0 2px 0 var(--luz-arriba),
        inset 0 -3px 0 var(--sombra-abajo),
        0 0 0 2px var(--tinta),
        0 6px 0 rgba(0, 0, 0, 0.35);
}

/* Las ventanas (diálogos): el mismo marco, más marcado. */
.dialogo {
    border: 2px solid var(--borde);
    border-radius: var(--esquina);
    background:
        var(--remache) top 6px left 6px / 6px 6px no-repeat,
        var(--remache) top 6px right 6px / 6px 6px no-repeat,
        var(--remache) bottom 6px left 6px / 6px 6px no-repeat,
        var(--remache) bottom 6px right 6px / 6px 6px no-repeat,
        linear-gradient(180deg, var(--panel-claro), var(--panel));
    box-shadow:
        inset 0 2px 0 var(--luz-arriba),
        inset 0 -3px 0 var(--sombra-abajo),
        0 0 0 2px var(--tinta),
        0 0 0 4px rgba(139, 92, 246, 0.25),
        0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ===== Títulos y números con letra de pixel ===== */
.titulo-juego {
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 0 var(--tinta);
}

/* ===== Botones: dos tonos (la mitad de arriba iluminada), contorno y un escalón abajo ===== */
.boton {
    border-radius: var(--esquina);
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
}

.boton:active {
    transform: translateY(2px);
}

.boton-principal {
    color: #fff;
    text-shadow: 0 2px 0 rgba(30, 8, 70, 0.6);
    background: linear-gradient(180deg, #a383ff 0 50%, #8b5cf6 50% 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        inset 0 -3px 0 rgba(40, 10, 90, 0.55),
        0 0 0 2px var(--tinta),
        0 4px 0 var(--tinta);
}

.boton-principal:active {
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        inset 0 -3px 0 rgba(40, 10, 90, 0.55),
        0 0 0 2px var(--tinta),
        0 2px 0 var(--tinta);
}

.boton-secundario {
    background: linear-gradient(180deg, #221a3d 0 50%, #1b1432 50% 100%);
    border: 2px solid var(--borde);
    box-shadow: inset 0 2px 0 var(--luz-arriba), 0 0 0 2px var(--tinta), 0 3px 0 var(--tinta);
}

.boton-chico {
    border-width: 2px;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.3) 0 50%, rgba(139, 92, 246, 0.2) 50% 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--tinta), 0 3px 0 var(--tinta);
}

.boton-oro {
    color: #2a1600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    background: linear-gradient(180deg, #ffe17a 0 50%, #fbbf24 50% 100%);
    border-color: #9a5212;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -3px 0 rgba(154, 82, 18, 0.55),
        0 0 0 2px var(--tinta),
        0 4px 0 var(--tinta);
}

.boton-peligro {
    text-shadow: 0 2px 0 rgba(80, 0, 20, 0.5);
    background: linear-gradient(180deg, #fb5c78 0 50%, #e11d48 50% 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -3px 0 rgba(90, 0, 20, 0.5),
        0 0 0 2px var(--tinta),
        0 4px 0 var(--tinta);
}

/* El botón de las misiones: un cuadro (casilla de juego), no un círculo. */
.boton-check {
    border-radius: var(--esquina);
    box-shadow: inset 0 2px 0 var(--luz-arriba), 0 0 0 2px var(--tinta);
}

/* ===== Barras: borde de tinta, franja de luz y cortes cada pocos puntos (como un medidor de juego) ===== */
.barra {
    border-color: var(--tinta);
    border-radius: 2px;
    background: #120d22;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45);
}

.barra-relleno {
    border-radius: 0;
}

.barra-relleno::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0 2px, transparent 2px calc(100% - 2px), rgba(0, 0, 0, 0.25) calc(100% - 2px)),
        repeating-linear-gradient(90deg, transparent 0 7px, rgba(6, 4, 13, 0.32) 7px 9px);
    pointer-events: none;
}

/* ===== Cabecera ===== */
.cabecera {
    background: rgba(9, 6, 19, 0.92);
    border-bottom: 2px solid var(--borde);
    box-shadow: 0 2px 0 var(--tinta);
}

.avatar {
    border-radius: var(--esquina);
    box-shadow: 0 0 0 2px var(--tinta), 0 0 0 4px #9a5212, 0 0 0 6px var(--tinta);
}

.cab-monedas {
    text-shadow: 0 2px 0 var(--tinta);
}

/* El botón de Ajustes con su engranaje. */
.boton-icono-pixel {
    font-size: 20px;
    line-height: 1;
}

/* ===== Barra de pestañas ===== */
.pestanas {
    background: rgba(9, 6, 19, 0.96);
    border-top: 2px solid var(--borde);
    box-shadow: 0 -2px 0 var(--tinta);
}

.pestana {
    font-family: var(--letra-titulo);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}

/* Los íconos de las pestañas: en gris las que no están elegidas, a todo color la elegida. */
.pestana-icono {
    display: grid;
    place-items: center;
    width: 52px;
    height: 32px;
    font-size: 24px;
    line-height: 1;
    border-radius: var(--esquina);
    transition: background 0.2s, box-shadow 0.2s;
}

.pestana-icono svg.pxi {
    filter: grayscale(1) brightness(0.72);
    transition: filter 0.2s;
    vertical-align: 0;
}

.pestana[aria-current="page"] {
    color: var(--oro);
}

.pestana[aria-current="page"] .pestana-icono {
    background: linear-gradient(180deg, #2d2350 0 50%, #251c44 50% 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 0 0 2px var(--tinta), 0 0 0 4px rgba(251, 191, 36, 0.35);
}

.pestana[aria-current="page"] .pestana-icono svg.pxi {
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.45));
    animation: pestana-salta 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    .pestana[aria-current="page"] .pestana-icono svg.pxi {
        animation: none;
    }
}


/* =====================================================================
   Batallas de la Torre (v92): ambiente, chispas, retroceso y críticos
   ===================================================================== */

/* --- El ambiente de cada zona ---
   .ff-ambiente va DETRÁS de los personajes (las partículas) y .ff-frente DELANTE (bruma, luz y esquinas
   oscuras). Cada zona elige un tipo (vistas.js › AMBIENTES) y el tipo pone sus colores con variables:
   --amb (color de las partículas), --brillo (su resplandor), --luz (la luz de arriba), --bruma (la del suelo). */
.ff-ambiente,
.ff-frente {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ff-frente {
    z-index: 2;   /* encima de los personajes; debajo de los efectos (3), los números (4) y las barras (5) */
    background:
        radial-gradient(ellipse 75% 70% at 50% 45%, transparent 60%, rgba(4, 2, 10, 0.5) 100%),
        linear-gradient(to top, var(--bruma, rgba(150, 140, 210, 0.16)) 0, transparent 26%);
}

/* La luz de arriba, que parpadea como una antorcha. */
.ff-frente::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--luz-x, 50%) var(--luz-y, 8%), var(--luz, rgba(255, 196, 120, 0.13)), transparent 48%);
    animation: amb-antorcha 2.6s steps(5) infinite;
}

/* Bancos de bruma que se arrastran por el suelo. */
.ff-frente::after {
    content: "";
    position: absolute;
    left: -30%;
    width: 160%;
    bottom: -4%;
    height: 24%;
    background:
        radial-gradient(ellipse 18% 60% at 20% 70%, var(--bruma, rgba(150, 140, 210, 0.16)), transparent),
        radial-gradient(ellipse 22% 55% at 55% 80%, var(--bruma, rgba(150, 140, 210, 0.16)), transparent),
        radial-gradient(ellipse 16% 50% at 85% 75%, var(--bruma, rgba(150, 140, 210, 0.16)), transparent);
    animation: amb-bruma 18s linear infinite alternate;
}

/* Una partícula: un cuadrito de 1 o 2 puntos de pixel art. */
.ff-ambiente i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: calc(var(--px) * var(--s));
    height: calc(var(--px) * var(--s));
    background: var(--amb, rgba(255, 236, 200, 0.75));
    box-shadow: 0 0 calc(var(--px) * 2) var(--brillo, transparent);
    opacity: 0;
    animation: amb-flotar var(--t) steps(30) var(--d) infinite;
}

@keyframes amb-antorcha {
    0%, 100% { opacity: 1; }
    20% { opacity: 0.75; }
    45% { opacity: 0.95; }
    70% { opacity: 0.7; }
}

@keyframes amb-bruma {
    from { transform: translateX(0); }
    to { transform: translateX(18%); }
}

/* Polvo y esporas: suben despacio, meciéndose. */
@keyframes amb-flotar {
    0% { opacity: 0; transform: translate(0, 0); }
    15%, 80% { opacity: 0.85; }
    50% { transform: translate(calc(var(--px) * 5), calc(var(--px) * -12)); }
    100% { opacity: 0; transform: translate(calc(var(--px) * -2), calc(var(--px) * -26)); }
}

/* Brasas, burbujas y llama azul: nacen abajo y suben toda la escena. */
@keyframes amb-subir {
    0% { opacity: 0; transform: translate(0, 0); }
    10% { opacity: 1; }
    40% { transform: translate(calc(var(--px) * 4), calc(var(--px) * -55)); }
    70% { transform: translate(calc(var(--px) * -3), calc(var(--px) * -95)); opacity: 0.8; }
    100% { opacity: 0; transform: translate(calc(var(--px) * 2), calc(var(--px) * -140)); }
}

/* Lluvia: cae en diagonal, rápido. */
@keyframes amb-caer {
    from { opacity: 0.8; transform: translate(0, 0); }
    to { opacity: 0.8; transform: translate(calc(var(--px) * -28), calc(var(--px) * 150)); }
}

/* Ceniza: cae despacio, de lado a lado. */
@keyframes amb-ceniza {
    0% { opacity: 0; transform: translate(0, 0); }
    15%, 85% { opacity: 0.7; }
    50% { transform: translate(calc(var(--px) * 6), calc(var(--px) * 40)); }
    100% { opacity: 0; transform: translate(calc(var(--px) * -4), calc(var(--px) * 80)); }
}

/* Viento: rayas que cruzan de izquierda a derecha. */
@keyframes amb-viento {
    from { opacity: 0.55; transform: translateX(0); }
    to { opacity: 0.55; transform: translateX(calc(var(--px) * 260)); }
}

/* Oro y reflejos: brillan en su lugar, como destellos. */
@keyframes amb-titilar {
    0%, 70%, 100% { opacity: 0; transform: scale(0.6); }
    80% { opacity: 1; transform: scale(1.4); }
    90% { opacity: 0.6; transform: scale(1); }
}

/* Relámpago lejano (Cima de la tormenta). */
@keyframes amb-relampago {
    0%, 91%, 93%, 100% { opacity: 0; }
    92%, 94% { opacity: 1; }
}

/* Latido (Corazón del Abismo): las esquinas oscuras laten. */
@keyframes amb-latido {
    0%, 60%, 100% { opacity: 1; }
    10%, 30% { opacity: 0.55; }
}

/* Los tipos de ambiente */
.ff-amb-polvo { --amb: rgba(255, 236, 200, 0.7); }

.ff-amb-brasas { --amb: #ffc061; --brillo: rgba(255, 110, 20, 0.9); --luz: rgba(255, 120, 40, 0.2); --luz-y: 100%; --bruma: rgba(255, 96, 24, 0.22); }
.ff-amb-brasas i,
.ff-amb-llama-azul i,
.ff-amb-burbujas i { top: auto; bottom: -3%; animation-name: amb-subir; }

.ff-amb-llama-azul { --amb: #8fe3ff; --brillo: rgba(40, 140, 255, 0.9); --luz: rgba(80, 160, 255, 0.2); --luz-y: 70%; --bruma: rgba(60, 130, 255, 0.2); }

.ff-amb-burbujas { --amb: transparent; --luz: rgba(80, 220, 230, 0.12); --bruma: rgba(40, 180, 190, 0.22); }
.ff-amb-burbujas i { box-shadow: inset 0 0 0 calc(var(--px) * 0.6) rgba(180, 245, 255, 0.75); width: calc(var(--px) * (var(--s) + 2)); height: calc(var(--px) * (var(--s) + 2)); }

.ff-amb-lluvia { --amb: rgba(200, 220, 255, 0.85); --luz: transparent; --bruma: rgba(120, 140, 200, 0.2); }
.ff-amb-lluvia i { top: -12%; width: var(--px); height: calc(var(--px) * 9); animation-name: amb-caer; animation-duration: calc(var(--t) / 6); animation-timing-function: linear; }
.ff-amb-lluvia.ff-frente::before { background: rgba(225, 235, 255, 0.35); animation: amb-relampago 7s steps(1) infinite; }

.ff-amb-viento { --amb: rgba(255, 255, 255, 0.4); --luz: rgba(255, 255, 255, 0.08); --bruma: rgba(230, 236, 255, 0.24); }
.ff-amb-viento i { left: -25%; width: calc(var(--px) * (6 + var(--s) * 4)); height: var(--px); animation-name: amb-viento; animation-duration: calc(var(--t) / 2.5); animation-timing-function: linear; }

.ff-amb-oro { --amb: #ffe27a; --brillo: rgba(255, 200, 60, 0.8); --luz: rgba(255, 210, 90, 0.16); --bruma: rgba(255, 190, 60, 0.12); }
.ff-amb-oro i,
.ff-amb-reflejos i { animation-name: amb-titilar; }

.ff-amb-reflejos { --amb: #e6fbff; --brillo: rgba(160, 230, 255, 0.8); --luz: rgba(190, 230, 255, 0.12); --bruma: rgba(170, 220, 255, 0.12); }

.ff-amb-esporas { --amb: #b4ff86; --brillo: rgba(100, 255, 120, 0.7); --luz: rgba(120, 255, 140, 0.08); --bruma: rgba(60, 200, 90, 0.2); }

.ff-amb-ceniza { --amb: rgba(200, 180, 230, 0.65); --luz: rgba(180, 110, 255, 0.14); --bruma: rgba(120, 60, 180, 0.2); }
.ff-amb-ceniza i { top: -6%; animation-name: amb-ceniza; }

.ff-amb-latido { --amb: #ff4d6d; --brillo: rgba(255, 40, 80, 0.7); --luz: rgba(255, 40, 80, 0.1); --bruma: rgba(160, 20, 60, 0.26); }
.ff-amb-latido.ff-frente { animation: amb-latido 1.6s steps(4) infinite; }

/* (v92, arreglo) El globo de intención con la clase "aviso" (la criatura se enfurece o se cura) heredaba
   right, bottom y width de los mensajes .aviso de la app, y se estiraba hasta tapar a la criatura. */
.ff-globo {
    right: auto;
    bottom: auto;
    width: auto;
}

/* --- Chispas al recibir un golpe --- */
.ff-chispas {
    position: absolute;
    left: 50%;
    top: 45%;
    z-index: 4;
    width: 0;
    height: 0;
    pointer-events: none;
    --chispa: #fffbe6;
    --chispa-luz: rgba(255, 220, 120, 0.8);
    --lejos: 20;
}

.ff-chispas i {
    position: absolute;
    left: calc(var(--px) * -1);
    top: calc(var(--px) * -1);
    width: calc(var(--px) * 2);
    height: calc(var(--px) * 2);
    background: var(--chispa);
    box-shadow: 0 0 calc(var(--px) * 2) var(--chispa-luz);
    opacity: 0;
    animation: ff-chispa 0.45s steps(6) var(--cuando) forwards;   /* forwards (no both): durante la espera no se ven */
}

@keyframes ff-chispa {
    0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.6); }
    60% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--px) * var(--lejos) * var(--l))) scale(0.5); }
}

.ff-chispas.critico { --chispa: #ffe45a; --chispa-luz: rgba(255, 180, 0, 0.95); --lejos: 32; }
.ff-chispas.critico i { width: calc(var(--px) * 3); height: calc(var(--px) * 3); }
.ff-chispas.fuego { --chispa: #ffb347; --chispa-luz: rgba(255, 80, 0, 0.9); }
.ff-chispas.hielo { --chispa: #d6f6ff; --chispa-luz: rgba(80, 200, 255, 0.9); }
.ff-chispas.rayo { --chispa: #fff6a0; --chispa-luz: rgba(255, 240, 80, 0.95); --lejos: 26; }
.ff-chispas.garra { --chispa: #ffe2a8; --chispa-luz: rgba(255, 190, 90, 0.7); top: 60%; }
.ff-chispas.herida { --chispa: #ff8a8a; --chispa-luz: rgba(255, 40, 60, 0.8); top: 40%; }
.ff-chispas.herida.fuerte { --lejos: 30; }

/* Al caer, la criatura estalla en cuadritos violetas que suben un poco (más lentos y más lejos). */
.ff-chispas.muerte { --chispa: #c9a2ff; --chispa-luz: rgba(140, 70, 255, 0.9); --lejos: 34; top: 55%; }
.ff-chispas.muerte i { width: calc(var(--px) * 3); height: calc(var(--px) * 3); animation-duration: 0.9s; animation-timing-function: steps(9); }

/* «¡Victoria!» en oro de tres tonos con contorno de pixel. (Con background-clip: text, text-shadow taparía el
   degradado: por eso el contorno va con filter: drop-shadow, que se dibuja alrededor de las letras ya pintadas.) */
.ff-victoria {
    color: transparent;
    background: linear-gradient(180deg, #fffbe0 0 32%, #ffe45a 32% 62%, #f5a524 62% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    filter:
        drop-shadow(2px 0 0 #2a1200) drop-shadow(-2px 0 0 #2a1200)
        drop-shadow(0 2px 0 #2a1200) drop-shadow(0 -2px 0 #2a1200)
        drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(255, 170, 30, 0.7));
}

/* --- Retroceso: quien recibe el golpe se va un poco para atrás --- */
.ff-retro {
    display: block;
}

.ff-enemigo.golpeado .ff-retro {
    animation: ff-retroceso 0.36s steps(4) 0.3s;
}

.ff-enemigo.golpeado-mascota .ff-retro {
    animation: ff-retroceso 0.36s steps(4) 0.52s;
}

.ff-enemigo.golpeado.golpeado-mascota .ff-retro {
    animation: ff-retroceso 0.36s steps(4) 0.3s, ff-retroceso 0.36s steps(4) 0.52s;
}

.ff-heroe.herido .ff-retro {
    animation: ff-retroceso-heroe 0.36s steps(4) 0.9s;
}

@keyframes ff-retroceso {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(calc(var(--px) * -7)); }
    60% { transform: translateX(calc(var(--px) * -3)); }
}

@keyframes ff-retroceso-heroe {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(calc(var(--px) * 6)); }
    60% { transform: translateX(calc(var(--px) * 2)); }
}

/* --- Golpe crítico: un destello y la sala se acerca un instante --- */
.ff-golpe-critico .ff-frente {
    animation: ff-flash-critico 0.4s steps(3) 0.28s;
}

.ff-golpe-critico .ff-sala {
    animation: ff-acercar 0.4s steps(3) 0.28s;
}

@keyframes ff-flash-critico {
    0% { background-color: rgba(255, 240, 190, 0.45); }
    100% { background-color: transparent; }
}

@keyframes ff-acercar {
    0%, 100% { transform: scale(1); }
    35% { transform: scale(1.04); }
}

/* Quien prefiere menos movimiento: sin partículas, sin chispas y sin sacudidas (la bruma y la luz quedan quietas). */
@media (prefers-reduced-motion: reduce) {
    .ff-ambiente,
    .ff-chispas {
        display: none;
    }

    .ff-frente,
    .ff-frente::before,
    .ff-frente::after,
    .ff-retro,
    .ff-golpe-critico .ff-sala {
        animation: none !important;
    }
}


/* =====================================================================
   El héroe y Aurelio en pixel art (v93): retratos, figuras y diorama
   ===================================================================== */

/* Toda imagen hecha con pixel.js se agranda sin suavizar: cada punto queda como un cuadrito. */
img.pixel {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    -webkit-user-select: none;
    user-select: none;
}

/* Mientras se hace la imagen (un instante) el <img> está vacío, pero guarda su lugar: el navegador saca
   la proporción de sus atributos width y height. */
img.retrato-pixel { aspect-ratio: 1; }
img.figura-pixel { aspect-ratio: 54 / 72; }

/* El diorama: cuatro capas del mismo tamaño, una encima de otra. */
.diorama {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.diorama > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.diorama-detras svg,
.diorama-encima svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* El héroe respira: sube un punto y vuelve (un punto = el ancho entre los puntos del diorama). */
.diorama-figura {
    animation: diorama-respira 2.4s steps(1) infinite;
}

@keyframes diorama-respira {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(-150% / var(--lado))); }
}

/* Al celebrar, el héroe salta dos veces. */
.celebrando .diorama-figura {
    animation: diorama-salta 0.6s steps(4) 2;
}

@keyframes diorama-salta {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(-900% / var(--lado))); }
}

/* La figura con sus llamas o su aura detrás (la campaña). */
.figura-con-efectos {
    position: relative;
}

.figura-efectos {
    position: absolute;
    inset: 0;
}

.figura-efectos svg {
    display: block;
    width: 100%;
    height: 100%;
}

.figura-con-efectos .figura-pixel {
    position: relative;
}

/* La figura de cuerpo entero (campaña, arcade, Aurelio de pie) también respira. */
.figura-pixel {
    animation: figura-respira 2.2s steps(1) infinite;
}

@keyframes figura-respira {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(-100% / 72)); }
}

/* En la campaña, cuando el héroe golpea al jefe: un paso adelante y vuelve. */
.atacar .figura-pixel {
    animation: figura-ataca 0.5s steps(5);
}

@keyframes figura-ataca {
    0%, 100% { transform: translateX(0); }
    40%, 60% { transform: translateX(calc(1800% / 54)); }
}

@media (prefers-reduced-motion: reduce) {
    .diorama-figura,
    .figura-pixel {
        animation: none;
    }
}


/* =====================================================================
   Recompensas (v94): monedas que vuelan, saltitos y celebraciones épicas
   ===================================================================== */

/* La capa donde vuelan las monedas, las gemas y las chispas de XP (efectos.js › volar). */
#vuelos {
    position: fixed;
    inset: 0;
    z-index: 25;   /* encima de las celebraciones (20) */
    overflow: hidden;
    pointer-events: none;
}

.vuelo {
    position: fixed;
    font-size: 24px;
    line-height: 1;
    filter: drop-shadow(0 2px 0 var(--tinta));
    will-change: transform, opacity;
}

.vuelo.chispa-xp {
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(255, 228, 90, 0.9));
}

/* Lo que recibe una moneda da un saltito; la barra de XP, un destello. */
.cab-monedas > span {
    display: inline-block;
}

.recibe {
    animation: recibe 0.24s steps(3);
}

.barra-relleno.recibe {
    animation: barra-recibe 0.3s steps(3);
}

@keyframes recibe {
    50% { transform: scale(1.28); }
}

@keyframes barra-recibe {
    50% { filter: brightness(1.9); }
}

/* Celebración épica (subir de nivel, vencer a un jefe): rayos que giran, un destello y confeti. */
.celebracion {
    overflow: hidden;
}

.celebracion-caja {
    position: relative;
    z-index: 1;
}

.celebracion.epica::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160vmax;
    height: 160vmax;
    margin: -80vmax 0 0 -80vmax;
    background: repeating-conic-gradient(rgba(255, 214, 90, 0.17) 0 9deg, transparent 9deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 46%);
    mask: radial-gradient(circle, #000 0 18%, transparent 46%);
    animation: rayos-giran 14s steps(56) infinite;
    pointer-events: none;
}

.celebracion.epica::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff8d6;
    opacity: 0;
    animation: destello-epico 0.55s steps(4);
    pointer-events: none;
}

.celebracion.epica .celebracion-caja {
    border: 2px solid var(--oro);
    box-shadow: 0 0 0 2px var(--tinta), 0 0 0 4px rgba(251, 191, 36, 0.35), 0 0 60px rgba(251, 191, 36, 0.45);
}

@keyframes rayos-giran {
    to { transform: rotate(360deg); }
}

@keyframes destello-epico {
    0% { opacity: 0.85; }
    100% { opacity: 0; }
}

/* El confeti: cuadritos que caen girando (efectos.js › confeti pone sus variables). */
.confeti {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.confeti i {
    position: absolute;
    top: -14px;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    background: var(--c);
    box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.25);
    animation: confeti-cae var(--t) steps(26) var(--d) forwards;
}

@keyframes confeti-cae {
    to { transform: translate(var(--v), 108vh) rotate(var(--g)); }
}

@media (prefers-reduced-motion: reduce) {
    .celebracion.epica::before,
    .celebracion.epica::after,
    .recibe,
    .barra-relleno.recibe {
        animation: none;
    }
}


/* (v95) Las pinturas en pixel art (pixel-pintura.js) y cualquier imagen hecha en el teléfono (data:image/png)
   se agrandan sin suavizar; también los fondos pintados con CSS (la Torre, el ánimo, la aldea). */
img[src^="data:image/png"],
.torre-portada,
.animo-fondo,
.voces-lugar,
.voces-escena {
    image-rendering: pixelated;
}


/* =====================================================================
   Todo en pixel art (v96): casillas, gráficas, minijuegos y letra
   ===================================================================== */

/* La ✓ de las misiones era un trazo que se "dibujaba". Ahora es un ícono: aparece con un saltito al cumplir. */
.boton-check svg.pxi,
.check-chico svg.pxi {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.15s steps(2), transform 0.25s steps(3);
}

.mision.hecha .boton-check svg.pxi,
.submision.hecha .check-chico svg.pxi {
    opacity: 1;
    transform: scale(1);
}

/* La gráfica de Progreso y la del gimnasio: líneas duras (sin suavizar) y letra de pixel. */
.grafica,
.gym-spark {
    shape-rendering: crispEdges;
}

.grafica text,
.gym-spark text {
    font-family: var(--letra-titulo);
}

/* Los minijuegos: el mundo pintado a media resolución se agranda sin suavizar; el texto va en una capa encima. */
.minijuego-lienzo {
    image-rendering: pixelated;
}

.minijuego-caja {
    position: relative;
}

.minijuego-texto {
    position: absolute;
    pointer-events: none;
}

/* (v96) La letra de pixel en TODO el texto, no solo en los títulos. DotGothic16 está hecha para leerse
   a 16 px (la medida del texto de la app), y tiene tildes y ñ. Los campos de escribir también. */
body,
input,
textarea,
select,
button {
    font-family: var(--letra-titulo);
}

body {
    letter-spacing: 0.01em;
}

/* (v96) La negrita. DotGothic16 tiene un solo grosor y el navegador "inventa" la negrita engrosando cada
   letra hacia todos lados: el punto de la i se pega y «Misiones» parece «Mlslones». Se apaga esa negrita
   inventada (font-synthesis: none) y se hace como en el pixel art: la letra otra vez, 1 px a la derecha
   (text-shadow). Así engorda solo de lado y el punto de la i queda separado. */
* {
    font-synthesis: none;
}

:where(b, strong, h1, h2, h3, h4, th, .boton, .pestana, .cab-nombre, .etiqueta, .mision-nombre, .ff-comando-nombre) {
    text-shadow: 1px 0 0 currentColor;
}

.titulo-juego {
    text-shadow: 1px 0 0 currentColor, 0 2px 0 var(--tinta);
}

/* (v97) La vista previa de «Aspecto» también en pixel art, al doble exacto (54 → 108 px): cada punto, 2 × 2. */
.apariencia-previa .figura-pixel {
    width: 108px;
}

/* (v113) Primer plano del rostro (160 × 160 puntos) al lado del cuerpo, para ver bien lo que cambias. */
.apariencia-previa {
    grid-auto-flow: column;
    justify-content: center;
    align-items: end;
    gap: 14px;
}

.apariencia-previa .primer-plano {
    width: 176px;
    margin-bottom: 4px;
}


/* =====================================================================
   (v99) Arreglo: nada se sale de su caja, aunque la letra sea más grande
   ===================================================================== */
/* En flex y grid, un elemento no se encoge por debajo de su "contenido mínimo" (la palabra más larga +
   el botón) salvo que tenga min-width: 0. Con la letra de pixel —o el texto agrandado en el teléfono—
   las tarjetas de objetos quedaban más anchas que la lista y el botón «Equipar» se cortaba. */
.lista > *,
.panel > *,
.bloque > *,
.pantalla > *,
.objeto-info,
.objeto-info > * {
    min-width: 0;
}

.objeto-info b,
.objeto-info .mini,
.habilidad-objeto {
    overflow-wrap: anywhere;
}

.objeto > .boton {
    flex-shrink: 0;
    padding-inline: 12px;
}

/* Las pestañas de una pantalla (Equipo · Mascotas · Aspecto · Historia): si no caben en una línea,
   el ícono y la palabra se acomodan en dos (nunca se cortan con «…»). */
.selector button {
    min-width: 0;
    white-space: normal;
    padding-inline: 4px;
    line-height: 1.15;
}


/* (v100) El submenú de la Tienda › Equipo: botones en rejilla de 4 (no caben 8 en una fila). */
.selector.selector-rejilla {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 10px 0 12px;
}

.selector-rejilla button {
    display: grid;
    justify-items: center;
    gap: 1px;
    min-height: 52px;
    padding: 6px 2px;
    font-size: 0.78rem;
    white-space: normal;
}

.selector-rejilla button small {
    font-size: 0.68rem;
    color: var(--texto-suave);
}

.selector-rejilla button[aria-pressed="true"] small {
    color: var(--oro);
}


/* =====================================================================
   Insignias (v101)
   ===================================================================== */
.insignias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin: 6px 0 12px;
    padding: 0;
    list-style: none;
}

.insignia {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 3px;
    padding: 8px 6px;
    text-align: center;
    background: var(--hundido);
    border: 2px solid var(--borde);
    border-radius: var(--esquina);
}

.insignia b {
    font-size: 0.82rem;
    line-height: 1.15;
}

.insignia small {
    font-size: 0.68rem;
    line-height: 1.2;
    color: var(--texto-suave);
}

.insignia-dibujo svg,
.insignia-llevas svg,
.ficha-insignia svg,
.cel-insignia svg {
    display: block;
    image-rendering: pixelated;
}

.insignia-dibujo svg {
    width: 48px;
    height: 56px;
}

.insignia.bloqueada b {
    color: var(--texto-suave);
}

.insignia.puesta {
    border-color: var(--oro);
    box-shadow: 0 0 0 2px var(--tinta), 0 0 14px rgba(251, 191, 36, 0.35);
}

.insignia .boton {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.78rem;
}

.insignia-avance {
    display: grid;
    width: 100%;
    gap: 2px;
}

.insignia-llevas {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
    padding: 8px 10px;
    background: rgba(251, 191, 36, 0.08);
    border: 2px solid rgba(251, 191, 36, 0.45);
    border-radius: var(--esquina);
}

.insignia-llevas svg {
    flex: 0 0 36px;
    width: 36px;
    height: 42px;
}

.insignia-llevas span {
    display: grid;
}

.ficha-insignia {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

.ficha-insignia svg {
    width: 22px;
    height: 26px;
}

.cel-insignia svg {
    width: 96px;
    height: 112px;
    margin: 0 auto;
}


/* =====================================================================
   El vínculo con tu mascota (v103)
   ===================================================================== */
.vinculo {
    display: grid;
    gap: 6px;
    margin: 10px 0;
    padding: 10px 12px;
    background: rgba(236, 72, 153, 0.07);
    border: 2px solid rgba(236, 72, 153, 0.35);
    border-radius: var(--esquina);
}

.vinculo-titulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
}

.barra-vinculo .barra-relleno {
    background: linear-gradient(90deg, #db2777, #f472b6);
}

.cuidados {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.cuidado {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 62px;
    padding: 6px 2px;
    font-size: 0.8rem;
    color: var(--texto);
    background: linear-gradient(180deg, #221a3d 0 50%, #1b1432 50% 100%);
    border: 2px solid var(--borde);
    border-radius: var(--esquina);
    box-shadow: 0 0 0 1px var(--tinta), 0 3px 0 var(--tinta);
    cursor: pointer;
}

.cuidado > span {
    font-size: 1.25rem;
    line-height: 1;
}

.cuidado small {
    font-size: 0.68rem;
    color: #f9a8d4;
}

.cuidado.hecho {
    border-color: rgba(52, 211, 153, 0.5);
}

.cuidado.hecho small {
    color: var(--verde);
}

.cuidado:disabled {
    opacity: 0.55;
    cursor: default;
}

.cuidado:active:not(:disabled) {
    transform: translateY(2px);
}

/* Lo que hace al cuidarla o al pedirle un truco (la animación va en el marco del dibujo). */
.mascota-dibujo.juega { animation: mascota-juega 0.7s steps(6); }
.mascota-dibujo.cepillado { animation: mascota-cepillado 0.8s steps(8); }
.mascota-dibujo.entrena { animation: mascota-entrena 0.6s steps(6); }
.mascota-dibujo.truco-sentarse { animation: truco-sentarse 0.9s steps(6); }
.mascota-dibujo.truco-saludar { animation: truco-saludar 0.9s steps(8); }
.mascota-dibujo.truco-rugir { animation: truco-rugir 0.8s steps(10); }
.mascota-dibujo.truco-vuelta { animation: truco-vuelta 0.9s steps(12); }

@keyframes mascota-juega {
    25% { transform: translateY(-14px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-7px); }
}

@keyframes mascota-cepillado {
    0%, 100% { filter: none; }
    50% { filter: brightness(1.5) drop-shadow(0 0 6px #fff7c2); }
}

@keyframes mascota-entrena {
    30% { transform: translateX(-8px) scale(1.04); }
    60% { transform: translateX(10px); }
}

@keyframes truco-sentarse {
    40%, 70% { transform: scaleY(0.85) translateY(6px); }
}

@keyframes truco-saludar {
    25%, 75% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}

@keyframes truco-rugir {
    0%, 100% { transform: none; filter: none; }
    20%, 60% { transform: scale(1.12) translateX(-3px); filter: brightness(1.3); }
    40%, 80% { transform: scale(1.12) translateX(3px); }
}

@keyframes truco-vuelta {
    0% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-24px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mascota-dibujo[class*="truco-"],
    .mascota-dibujo.juega,
    .mascota-dibujo.entrena {
        animation: none;
    }
}


/* =====================================================================
   Diario interactivo (v106)
   ===================================================================== */
.energia,
.etiquetas-diario {
    margin: 4px 0 0;
    padding: 0;
    border: none;
}

.energia legend,
.etiquetas-diario legend {
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.energia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.energia-paso,
.etiqueta-diario {
    position: relative;
    cursor: pointer;
}

.energia-paso input,
.etiqueta-diario input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.energia-paso span {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 4px;
    display: flex;
    gap: 2px;
    font-size: 0.9rem;
    white-space: nowrap;
    background: var(--hundido);
    border: 2px solid var(--borde);
    border-radius: var(--esquina);
    filter: grayscale(1) brightness(0.8);
}

.energia-paso input:checked + span {
    border-color: var(--oro);
    filter: none;
    box-shadow: 0 0 0 1px var(--tinta), 0 0 10px rgba(251, 191, 36, 0.35);
}

.energia small {
    margin-left: 4px;
}

.etiquetas-diario {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.etiqueta-diario span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 4px 10px;
    font-size: 0.82rem;
    background: var(--hundido);
    border: 2px solid var(--borde);
    border-radius: var(--esquina);
}

.etiqueta-diario input:checked + span {
    color: #fff;
    background: rgba(52, 211, 153, 0.18);
    border-color: var(--verde);
}

.etiqueta-diario input:focus-visible + span,
.energia-paso input:focus-visible + span {
    outline: 2px solid var(--cian);
}

.pregunta-diario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 8px 0 4px;
}

/* Texto solo para los lectores de pantalla (no se ve, pero se lee en voz alta). */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.bien-lista {
    display: grid;
    gap: 6px;
    margin: 8px 0;
    padding: 0;
    list-style: none;
}

.bien-fila {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.bien-barra {
    height: 10px;
    background: var(--hundido);
    border: 1px solid var(--tinta);
}

.bien-barra i {
    display: block;
    height: 100%;
    background: var(--verde);
}

.bien-fila.baja .bien-barra i {
    background: var(--rojo);
}

.carta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--hundido);
    border: 2px solid var(--borde);
    border-radius: var(--esquina);
}

.carta span {
    display: grid;
}

.carta.lista {
    border-color: var(--oro);
}

.carta.abierta {
    display: block;
    background: linear-gradient(180deg, #2b2340, #221a35);
}

.carta-texto {
    white-space: pre-wrap;
}


/* =====================================================================
   Ilustraciones (v108): pergaminos, libros, memorias e Historia
   ===================================================================== */
.ilustracion {
    position: relative;
    margin: 10px 0 14px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #0b0816;
    border: 3px solid #6b4a1c;
    box-shadow: 0 0 0 2px var(--tinta), inset 0 0 0 2px rgba(255, 220, 140, 0.25);
}

.ilustracion-fondo {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    image-rendering: pixelated;
}

/* Viñeta: las esquinas oscuras, como un grabado. */
.ilustracion::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 55%, rgba(6, 4, 13, 0.6));
    pointer-events: none;
}

.ilustracion-actor {
    position: absolute;
    bottom: 4%;
    width: 22%;
    transform: translateX(-50%);
    z-index: 1;
}

.ilustracion figcaption {
    position: absolute;
    left: 50%;
    bottom: 6px;
    z-index: 2;
    transform: translateX(-50%);
    padding: 2px 10px;
    font-family: var(--letra-titulo);
    font-size: 0.82rem;
    white-space: nowrap;
    color: #fff3c4;
    background: rgba(20, 12, 34, 0.82);
    border: 2px solid #9a5212;
}

/* La miniatura de la lista de Historia (en lugar del emoji). */
.ilustracion.miniatura {
    width: 72px;
    margin: 0;
    flex: 0 0 72px;
    border-width: 2px;
}

.fila-enlace-icono:has(.ilustracion) {
    width: auto;
    font-size: 1rem;
}

/* La letra capitular. */
.con-capitular::first-line {
    letter-spacing: 0.01em;
}

.capitular {
    float: left;
    display: grid;
    place-items: center;
    width: 2.1em;
    height: 2.1em;
    margin: 0.15em 0.4em 0 0;
    font-family: var(--letra-titulo);
    font-size: 1.6em;
    line-height: 1;
    color: #ffe9a6;
    background: linear-gradient(180deg, #5a1a2a, #3a0f1c);
    border: 2px solid #c8a040;
    box-shadow: 0 0 0 2px var(--tinta), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
    text-shadow: 0 2px 0 var(--tinta);
}

/* (v108) Donde va la letra capitular en pixel art, se apaga la letra grande roja de antes (si no, salían dos). */
.rollo-capitulo > h3 + p.con-capitular::first-letter,
.novela-texto p.con-capitular:first-child::first-letter,
.rollo-prologo p.con-capitular::first-letter {
    float: none;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-shadow: none;
}