/* estilos.css — Aspecto visual de Vida RPG.
 *
 * Pensado para iPhone: respeta el "notch" y la barra de abajo con
 * env(safe-area-inset-...), usa botones de al menos 44px para el dedo
 * y textos de 16px en los campos (si son más pequeños, el iPhone hace zoom).
 */

/* Fuente de videojuego incluida en la app (funciona sin internet).
   Un archivo por grosor: 700 (negrita) y 800 (extra negrita). */
/* (v91) DotGothic16 (licencia OFL, fuentes/OFL-dotgothic16.txt): la letra de los títulos y los números,
   hecha de cuadritos como en los RPG clásicos. El archivo trae solo las letras latinas (con ñ y tildes). */
@font-face {
    font-family: "DotGothic16";
    src: url("fuentes/dotgothic16.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Orbitron";
    src: url("fuentes/orbitron-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Orbitron";
    src: url("fuentes/orbitron-800.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

/* ===== Colores y medidas (variables CSS) ===== */
:root {
    color-scheme: dark;

    --fondo: #0b0816;
    --panel: #15102a;
    --panel-claro: #1c1536;
    --hundido: #0d0a1c;
    --borde: #2c2352;
    --texto: #ece9fb;
    --texto-suave: #9c95c0;

    --violeta: #8b5cf6;
    --cian: #22d3ee;
    --oro: #fbbf24;
    --verde: #34d399;
    --rojo: #fb7185;

    --radio: 6px;            /* (v91) esquinas casi rectas, como en pixel art */
    --esquina: 4px;          /* (v91) la de casi todo lo demás (antes 10–22 px y las píldoras 999 px) */
    --letra-titulo: "DotGothic16", "Orbitron", sans-serif;   /* (v91) letra de pixel para títulos y números */
    --celda: 15px;           /* tamaño de cada cuadrito del calendario */
    --alto-pestanas: 64px;
}

/* Cada dificultad tiene su color; los elementos usan var(--color-dificultad). */
.dificultad-facil   { --color-dificultad: var(--verde); }
.dificultad-normal  { --color-dificultad: var(--cian); }
.dificultad-dificil { --color-dificultad: var(--rojo); }


/* ===== Base ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    background:
        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.08), transparent 40%),
        var(--fondo);
    background-attachment: fixed;
    -webkit-tap-highlight-color: transparent; /* sin flash gris al tocar */
    overscroll-behavior-y: none;
    overflow-x: clip;                 /* (v52) la pantalla no se mueve de lado */
}

/* (v52) Pantalla fija: un dedo solo hace scroll (sin zoom con doble toque); con dos dedos sí se puede hacer zoom. */
html {
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, dl, dd {
    margin: 0;
}

button {
    font: inherit;
    color: inherit;
    touch-action: manipulation;       /* toques rápidos sin zoom */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

[hidden] {
    display: none !important;
}

.panel {
    background: linear-gradient(180deg, var(--panel-claro), var(--panel));
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.etiqueta {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.titulo-juego {
    font-family: var(--letra-titulo);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.titulo-grande {
    margin: 6px 0 10px;
    font-size: 1.5rem;
}

.texto-suave { color: var(--texto-suave); }
.oro { color: var(--oro); }
.mini { font-size: 0.8rem; }

.nota {
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.vacio {
    padding: 22px;
    text-align: center;
    color: var(--texto-suave);
    border: 1px dashed var(--borde);
    border-radius: var(--esquina);
}

.titulo-seccion {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.titulo-seccion .etiqueta::first-letter {
    text-transform: uppercase;
}


/* ===== Crear personaje ===== */
.crear-personaje {
    max-width: 440px;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + 12vh) 16px 32px;
}


.separador-o {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 12px;
    font-size: 0.8rem;
    color: var(--texto-suave);
}

.separador-o::before,
.separador-o::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borde);
}


/* ===== Pantalla de bloqueo (PIN) ===== */
.bloqueo {
    position: fixed;
    inset: 0;
    z-index: 30; /* por encima de todo, incluidas las celebraciones */
    display: grid;
    place-items: center;
    padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
    overflow-y: auto;
    background:
        radial-gradient(circle at 50% 10%, rgba(139, 92, 246, 0.25), transparent 50%),
        var(--fondo);
}

.bloqueo-caja {
    width: min(320px, 100%);
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.bloqueo-icono {
    border-radius: var(--esquina);
    box-shadow: 0 0 26px rgba(139, 92, 246, 0.5);
}

.bloqueo-mensaje {
    min-height: 1.5em;
    color: var(--texto-suave);
}

.bloqueo-mensaje.error {
    color: var(--rojo);
}

.puntos {
    display: flex;
    gap: 18px;
    margin: 6px 0 16px;
}

.puntos span {
    width: 15px;
    height: 15px;
    border: 2px solid var(--texto-suave);
    border-radius: 50%;
    transition: background 0.15s, border-color 0.15s;
}

.puntos span.lleno {
    background: var(--cian);
    border-color: var(--cian);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
}

.puntos.error {
    animation: sacudir 0.4s ease-in-out;
}

.teclado {
    display: grid;
    grid-template-columns: repeat(3, 72px);
    gap: 16px 26px;
}

.teclado button {
    width: 72px;
    height: 72px;
    padding: 0;
    font-family: var(--letra-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--borde);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.1s;
}

.teclado button:active {
    background: rgba(139, 92, 246, 0.4);
}

.bloqueo .enlace {
    justify-self: center;
    margin-top: 8px;
}


/* ===== Cabecera fija ===== */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 640px;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + 10px) 16px 12px;
    background: rgba(11, 8, 22, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(44, 35, 82, 0.6);
}

.avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: none;
    cursor: pointer;
    border-radius: var(--esquina);
    font-family: var(--letra-titulo);
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--violeta), var(--cian));
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.45);
}

.cabecera-info {
    flex: 1;
    min-width: 0;
}

.cabecera-linea {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.cab-nombre {
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cab-nivel {
    flex-shrink: 0;
    font-family: var(--letra-titulo);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--texto-suave);
}

#cab-nivel {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--cian);
}

#cab-nivel.pulso {
    animation: pulso 0.7s ease-out;
}

.cab-xp {
    min-width: 0;             /* si no cabe (vida + armadura al lado), se recorta con «…» */
    overflow: hidden;
    font-size: 0.72rem;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cab-monedas {
    display: grid;
    justify-items: end;
    flex-shrink: 0;
    font-family: var(--letra-titulo);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--oro);
    font-variant-numeric: tabular-nums;
}

/* Las gemas (v31): la moneda del arcade, más pequeña debajo de las monedas. */
.cab-gemas {
    font-size: 0.74rem;
    color: #a5f3fc;
}


/* ===== Barras de progreso ===== */
.barra {
    height: 12px;
    margin-top: 8px;
    overflow: hidden;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.barra-relleno {
    position: relative;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--violeta), var(--cian));
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Brillo que recorre la barra */
.barra-relleno::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: translateX(-100%);
    animation: brillo 2.8s ease-in-out infinite;
}

.barra-xp {
    height: 8px;
    margin: 4px 0 2px;
}

.barra-mini {
    height: 7px;
    margin: 6px 0 2px;
}

.barra-atributo .barra-relleno {
    background: var(--color-atributo);
    box-shadow: 0 0 8px var(--color-atributo);
}

.barra-oro .barra-relleno {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

/* Reto del día del arcade (v40) */
.reto-dia {
    display: grid;
    gap: 6px;
    border-color: rgba(34, 211, 238, 0.4);
}

.reto-dia.cumplido {
    border-color: rgba(251, 191, 36, 0.55);
}

.reto-texto {
    margin: 0;
    font-size: 1rem;
}

.barra-vida {
    height: 14px;
}

.barra-vida .barra-relleno {
    background: linear-gradient(90deg, #e11d48, var(--rojo), #fb923c);
    box-shadow: 0 0 12px rgba(251, 113, 133, 0.55);
}


/* ===== Contenido y pestañas ===== */
.contenido {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 24px);
}

.pantalla {
    display: grid;
    /* minmax(0, 1fr): la columna nunca se estira más que la pantalla.
       Sin esto, el calendario (que es ancho) empujaría toda la página. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

/* Al cambiar de pantalla, la nueva entra subiendo un poco (v23). La animación vuelve a
   empezar cada vez que la pantalla deja de estar oculta; al redibujar la misma, no. */
.pantalla:not([hidden]) {
    animation: entrar-pantalla 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes entrar-pantalla {
    from { opacity: 0; transform: translateY(10px); }
}

.pestanas {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(5, 1fr);   /* (v112) 5 pestañas: Hoy, Progreso, Aventuras, Héroe, Tienda (Running se abre desde Hoy) */
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(11, 8, 22, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(44, 35, 82, 0.8);
}

.pestana {
    height: var(--alto-pestanas);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 0;
    border: none;
    background: none;
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}

.pestana svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.pestana[aria-current="page"] svg {
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.7));
}


/* ===== Botones ===== */
.boton {
    min-height: 44px;
    padding: 12px 18px;
    border: none;
    border-radius: var(--esquina);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}

.boton:active {
    transform: scale(0.97);
}

.boton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.boton-principal {
    color: #fff;
    background: linear-gradient(90deg, var(--violeta), #6d5cf6 50%, #3b82f6);
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.4);
}

.boton-secundario {
    color: var(--texto);
    background: var(--hundido);
    border: 1px solid var(--borde);
}

.boton-chico {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 0.85rem;
    color: var(--texto);
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.45);
}

.boton-ancho {
    width: 100%;
}

.boton-oro {
    color: #2a1d00;
    background: linear-gradient(180deg, #fde68a, var(--oro));
    border-color: var(--oro);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.35);
}

.boton-peligro {
    color: #fff;
    background: linear-gradient(90deg, #e11d48, #f43f5e);
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.35);
}

.boton-icono {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: var(--esquina);
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
}

.boton-icono svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.boton-icono:active {
    color: var(--rojo);
    background: rgba(251, 113, 133, 0.1);
}

.boton-icono.chico {
    width: 32px;
    height: 32px;
}

.boton-icono.chico svg {
    width: 15px;
    height: 15px;
}

.enlace {
    justify-self: start;
    padding: 6px 0;
    border: none;
    background: none;
    color: var(--texto-suave);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}


/* ===== Chips (etiquetas pequeñas) ===== */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    padding: 5px 11px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.chip-racha {
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.45);
}

.chip-oro {
    color: var(--oro);
    border-color: rgba(251, 191, 36, 0.5);
}

.chip-atributo {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-atributo);
    border: 1px solid var(--color-atributo);
    border-radius: var(--esquina);
}

.contador {
    font-family: var(--letra-titulo);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cian);
    font-variant-numeric: tabular-nums;
}

.contador.completo {
    color: var(--oro);
    text-shadow: 0 0 14px rgba(251, 191, 36, 0.6);
}


/* ===== Listas y misiones diarias ===== */
.lista {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mision {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 6px 12px 14px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--color-dificultad);
    border-radius: var(--esquina);
    transition: background 0.3s, border-color 0.3s, transform 0.2s;
}

.mision.hecha {
    background: rgba(52, 211, 153, 0.06);
    border-color: rgba(52, 211, 153, 0.4);
    border-left-color: var(--color-dificultad);
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.1);
}

.mision.recien-hecha {
    animation: destello 0.7s ease-out;
}

/* Misión que no se puede marcar ahora (toca otro día o está archivada) */
.mision.apagada {
    padding-left: 14px;
    opacity: 0.75;
}

.boton-check {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid var(--color-dificultad);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    color: #06281c;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, transform 0.15s;
}

.boton-check:active {
    transform: scale(0.88);
}

/* El check está dibujado pero "sin tinta"; al completar se dibuja. */
.boton-check svg,
.check-chico svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
}

.mision.hecha .boton-check {
    background: var(--verde);
    border-color: var(--verde);
}

.mision.hecha .boton-check svg {
    stroke-dashoffset: 0;
}

.mision.recien-hecha .boton-check {
    animation: rebote 0.45s ease-out;
}

.mision.recien-hecha .boton-check svg {
    animation: dibujar-check 0.4s ease-out 0.05s backwards;
}

.mision-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mision-nombre {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mision.hecha .mision-nombre {
    color: var(--texto-suave);
    text-decoration: line-through;
}

.mision-detalle {
    font-size: 0.78rem;
    color: var(--texto-suave);
}

/* Misiones con cantidad: el botón redondo dice "+1" hasta llegar a la meta */
.boton-check b {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--color-dificultad);
}

.cantidad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 6px;
}

.cantidad .barra {
    flex: 1 0 100%;
}

.cantidad-valor,
.cantidad-menos {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    cursor: pointer;
}

.cantidad-menos {
    width: 32px;
    padding: 0;
}

.mision.hecha .cantidad-valor {
    color: var(--verde);
    border-color: rgba(52, 211, 153, 0.4);
}

/* Misiones semanales: cuántas veces llevas esta semana */
.semana-progreso {
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #c4b5fd;
}

.semana-progreso.cumplida {
    color: var(--verde);
}

/* Tareas sueltas que ya vencieron */
.atrasada {
    font-weight: 600;
    color: var(--rojo);
}

.aviso-respaldo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 0.85rem;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: var(--esquina);
}

/* Texto "+25 XP" que sube y desaparece */
.flotante {
    position: absolute;
    top: 50%;
    right: 50px;
    z-index: 2;
    font-family: var(--letra-titulo);
    font-weight: 800;
    color: var(--oro);
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
    white-space: nowrap;
    pointer-events: none;
    animation: flotar 1.1s ease-out forwards;
}

.flotante.negativo {
    color: var(--rojo);
    text-shadow: 0 0 10px rgba(251, 113, 133, 0.6);
}

.tarjeta .flotante {
    top: 70px;
    right: 70px; /* lejos del botón ✕ de la esquina */
}


/* ===== Progreso: racha ===== */
.racha-datos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 12px 0 10px;
    text-align: center;
}

.racha-datos > div {
    display: grid;
    gap: 2px;
    padding: 12px 4px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.racha-numero {
    font-family: var(--letra-titulo);
    font-size: 1.25rem;
    font-weight: 800;
}

.escudo {
    font-size: 1rem;
    filter: grayscale(1) brightness(0.5);
}

.escudo.lleno {
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.8));
}


/* ===== Progreso: calendario (mapa de calor) ===== */
.calendario-scroll {
    margin-top: 12px;
    padding-bottom: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.calendario {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 6px;
    width: max-content;
}

.cal-meses,
.cal-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--celda);
    gap: 3px;
}

.cal-meses {
    height: 14px;
    font-size: 0.62rem;
    color: var(--texto-suave);
    white-space: nowrap;
}

/* Las letras de los días se quedan fijas a la izquierda al deslizar */
.cal-dias {
    position: sticky;
    left: 0;
    z-index: 1;
    display: grid;
    grid-template-rows: repeat(7, var(--celda));
    gap: 3px;
    padding-right: 4px;
    font-size: 0.62rem;
    line-height: var(--celda);
    color: var(--texto-suave);
    background: #19132f; /* mismo tono que el panel a esa altura */
}

.cal-grid {
    grid-template-rows: repeat(7, var(--celda));
}

.celda {
    display: inline-block;
    width: var(--celda);
    height: var(--celda);
    padding: 0;
    border: none;
    border-radius: 4px;
    background: #1d1738;
}

button.celda {
    cursor: pointer;
}

.celda.n1 { background: rgba(139, 92, 246, 0.35); }
.celda.n2 { background: rgba(139, 92, 246, 0.6); }
.celda.n3 { background: var(--violeta); }
.celda.n4 { background: var(--cian); box-shadow: 0 0 6px rgba(34, 211, 238, 0.7); }
.celda.protegido { box-shadow: inset 0 0 0 2px var(--oro); }
.celda.hoy { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 1px; }
.celda.elegido { outline: 2px solid #fff; outline-offset: 1px; }
.celda.antes { background: rgba(44, 35, 82, 0.35); } /* días antes de empezar a jugar */
.celda.futuro { background: transparent; }

.cal-leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--texto-suave);
}

.cal-leyenda .celda {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.cal-leyenda .celda.protegido {
    margin-left: 10px;
}

.cal-detalle {
    min-height: 44px;
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 0.85rem;
    background: var(--hundido);
    border-radius: var(--esquina);
}

.cal-detalle strong::first-letter {
    text-transform: uppercase;
}


/* ===== Progreso: atributos y estadísticas ===== */
.atributos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.atributo {
    padding: 12px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-top: 3px solid var(--color-atributo);
    border-radius: var(--esquina);
}

.atributo-cabecera {
    display: flex;
    align-items: center;
    gap: 6px;
}

.atributo-icono {
    font-size: 1.2rem;
}

.atributo-nombre {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
}

.atributo-nivel {
    font-family: var(--letra-titulo);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-atributo);
}

.estadisticas {
    display: grid;
    margin-top: 8px;
}

.estadisticas > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(44, 35, 82, 0.6);
}

.estadisticas > div:last-child {
    border-bottom: none;
}

.estadisticas dt {
    color: var(--texto-suave);
}

.estadisticas dd {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* ===== Aventuras: tarjetas, submisiones y jefes ===== */
.tarjeta {
    position: relative;
    display: grid;
    gap: 2px;
}

.tarjeta.completada {
    border-color: rgba(251, 191, 36, 0.45);
}

.tarjeta-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tarjeta-titulo {
    flex: 1;
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 4px;
}

.tarjeta h3,
.logro h3,
.recompensa h3 {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

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

.submision {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

.check-chico {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid var(--borde);
    border-radius: 8px;
    background: var(--hundido);
    color: #06281c;
    cursor: pointer;
}

.check-chico svg {
    width: 17px;
    height: 17px;
}

.submision.hecha .check-chico {
    background: var(--verde);
    border-color: var(--verde);
}

.submision.hecha .check-chico svg {
    stroke-dashoffset: 0;
}

.submision-nombre {
    flex: 1;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.submision.hecha .submision-nombre {
    color: var(--texto-suave);
    text-decoration: line-through;
}

.sello {
    margin-top: 6px;
    font-family: var(--letra-titulo);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--texto-suave);
}

.sello-oro {
    color: var(--oro);
}

/* ===== Campaña de jefes ===== */
.campana {
    position: relative;
    display: grid;
    gap: 4px;
    border-top: 3px solid var(--color-atributo);
}

.campana-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
}

.campana-numero {
    margin-left: auto;
    font-family: var(--letra-titulo);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-atributo);
}

.jefe-nombre {
    margin-top: 8px;
    font-family: var(--letra-titulo);
    font-size: 1.05rem;
    font-weight: 700;
}

.jefe-nombre span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--oro);
}

.campana-victoria {
    margin: 8px 0 2px;
    font-family: var(--letra-titulo);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--oro);
}

/* Escena de batalla: tu avatar contra el retrato del jefe */
.escena {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin: 10px 0 4px;
    padding: 12px 10px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(251, 113, 133, 0.22), transparent 60%),
        linear-gradient(180deg, #1b1033, #120a24);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.escena-heroe {
    justify-self: center;
    align-self: end;
    width: 100%;
    max-width: 132px;
}

.escena-jefe {
    justify-self: center;
    width: 100%;
    max-width: 136px;
}

.escena-vs {
    padding: 0 4px;
    font-family: var(--letra-titulo);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--rojo);
    text-shadow: 0 0 10px rgba(251, 113, 133, 0.7);
}

/* Retrato del jefe: una pintura clásica enmarcada como un cuadro */
.retrato {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #000;
    border: 2px solid #6b5326;       /* marco de oro viejo */
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.retrato img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.6s;
}

/* Sombra en los bordes (viñeta), como un cuadro antiguo */
.retrato::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6));
    pointer-events: none;
    transition: background 0.6s;
}

/* Según la vida que le queda */
.retrato.furioso {
    animation: amenaza 2.6s ease-in-out infinite;
}

/* El retrato «vive» (v23): la pintura se acerca y se aleja muy despacio, como si respirara,
   y una luz de vela tiembla encima. Los vencidos se quedan quietos. */
.retrato:not(.derrotado):not(.mini) img {
    animation: respirar-retrato 16s ease-in-out infinite alternate;
}

.retrato:not(.derrotado):not(.mini)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 30% 20%, rgba(255, 196, 120, 0.16), transparent 60%);
    animation: vela 3.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes respirar-retrato {
    from { transform: scale(1); }
    to { transform: scale(1.07) translateY(-1.5%); }
}

@keyframes vela {
    0%, 100% { opacity: 0.6; }
    30% { opacity: 1; }
    45% { opacity: 0.75; }
    70% { opacity: 0.95; }
}

.retrato.herido::after {
    background:
        radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.6)),
        linear-gradient(180deg, rgba(190, 18, 60, 0.12), rgba(190, 18, 60, 0.38));
}

.retrato.agotado img {
    filter: grayscale(0.65) brightness(0.75);
}

.retrato.agotado {
    animation: temblor 3s ease-in-out infinite;
}

.retrato.derrotado img {
    filter: grayscale(1) brightness(0.45);
}

.retrato.mini {
    border-width: 1px;
    border-radius: 6px;
    box-shadow: none;
}

.jefe .flotante {
    top: 110px;
    right: 24%;
}

/* Cuando le pegas: tu avatar embiste y el retrato recibe el golpe */
.jefe.golpeado .escena-heroe {
    animation: embestir 0.64s ease-out;
}

.jefe.golpeado .escena-jefe,
.combate.golpeado .combate-jefe {
    animation: recibir-golpe 0.55s ease-out 0.3s;
}

.jefe.golpeado .barra-vida,
.combate.golpeado .barra-vida {
    animation: destello-rojo 0.45s ease-out;
}

/* Ruta de los 5 jefes: vencidos, actual y los que vienen */
.ruta-jefes {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.ruta-jefes li {
    position: relative;
    width: 44px;
    height: 44px;
    overflow: hidden;
    background: #000;
    border: 2px solid var(--borde);
    border-radius: 50%;
}

.ruta-jefes img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ruta-jefes span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--letra-titulo);
    font-weight: 800;
}

.ruta-jefes .vencido {
    border-color: rgba(52, 211, 153, 0.6);
}

.ruta-jefes .vencido img {
    filter: grayscale(1) brightness(0.4);
}

.ruta-jefes .vencido span {
    color: var(--verde);
}

.ruta-jefes .actual {
    border-color: var(--color-atributo);
    box-shadow: 0 0 12px var(--color-atributo);
}

/* Los jefes que aún no enfrentas: una sombra misteriosa */
.ruta-jefes .futuro img {
    filter: grayscale(1) brightness(0.16) blur(2px);
}

/* En Partida+ ya los conoces: se ven, pero apagados */
.ruta-jefes .futuro.visto img {
    filter: grayscale(0.7) brightness(0.45);
}

/* Aviso de Partida+ en la tarjeta de la campaña */
.ronda {
    margin-top: 4px;
    font-family: var(--letra-titulo);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--oro);
}

.ronda span {
    margin-left: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    color: var(--texto-suave);
}

.ruta-jefes .futuro span {
    color: var(--texto-suave);
}

/* "En combate" (en la pantalla Hoy) */
.combate {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 14px 8px 8px;
    text-align: left;
    background: var(--hundido);
    border: 1px solid rgba(251, 113, 133, 0.35);
    border-radius: var(--esquina);
    cursor: pointer;
}

.combate-jefe {
    flex: 0 0 46px;
    display: block;
}

.combate-info {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.combate-info .barra {
    margin: 2px 0;
}

/* Retrato del jefe en la celebración de victoria */
.cel-jefe {
    width: 150px;
    margin: 0 auto 6px;
}

#creditos a {
    color: var(--cian);
}

@keyframes amenaza {
    50% { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 18px rgba(244, 63, 94, 0.55); }
}

@keyframes temblor {
    0%, 86%, 100% { transform: translateX(0); }
    89% { transform: translateX(-2px); }
    92% { transform: translateX(2px); }
    95% { transform: translateX(-1px); }
}

@keyframes embestir {
    30% { transform: translateX(-6px); }
    56% { transform: translateX(26px); }
}

@keyframes recibir-golpe {
    0% { transform: translateX(0); filter: brightness(3); }
    25% { transform: translateX(10px); }
    50% { transform: translateX(-8px); filter: brightness(1.6); }
    75% { transform: translateX(5px); }
    100% { transform: translateX(0); filter: brightness(1); }
}

.plegable summary {
    padding: 8px 2px;
    font-weight: 600;
    color: var(--texto-suave);
    cursor: pointer;
}

.plegable[open] > summary {
    margin-bottom: 10px;
}

.plegable > .tarjeta + .tarjeta {
    margin-top: 12px;
}


/* ===== Logros ===== */
.subtitulo {
    margin-top: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--texto-suave);
}

.logro-descripcion {
    margin: 4px 0 6px;
    font-size: 0.82rem;
    color: var(--texto-suave);
    white-space: pre-line; /* respeta los saltos de línea */
}

.logro .boton-oro {
    margin-top: 6px;
}

.dos-columnas.columnas-icono {
    grid-template-columns: 70px 1fr;
}

.columnas-icono input[name="icono"] {
    text-align: center;
}

.logro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 6px 12px 12px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.logro.desbloqueado {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.12);
}

.logro-icono {
    flex-shrink: 0;
    font-size: 1.6rem;
}

.logro:not(.desbloqueado) .logro-icono {
    opacity: 0.55;
}

.logro-info {
    flex: 1;
    min-width: 0;
}

.logro-premio {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--oro);
}


/* ===== Tienda ===== */
.saldo {
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
    border-color: rgba(251, 191, 36, 0.4);
}

.saldo-numero {
    font-family: var(--letra-titulo);
    font-size: 2rem;
    font-weight: 800;
    color: var(--oro);
    text-shadow: 0 0 16px rgba(251, 191, 36, 0.5);
}

.recompensa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 6px 12px 14px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.recompensa.alcanzable {
    border-color: rgba(251, 191, 36, 0.4);
}

.recompensa-info {
    flex: 1;
    min-width: 0;
}

.historial {
    display: grid;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.historial li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(44, 35, 82, 0.6);
}

.historial li:last-child {
    border-bottom: none;
}


/* ===== Formularios ===== */
.formulario {
    display: grid;
    gap: 14px;
    margin-top: 12px;
}

.formulario label {
    display: grid;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px; /* 16px o más: el iPhone no hace zoom al escribir */
    color: var(--texto);
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    -webkit-appearance: none;
    appearance: none;
}

select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c95c0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

textarea {
    resize: vertical;
}

/* Fecha y hora: en el iPhone el campo vacío se encoge y el texto se centra; lo evitamos. */
input[type="date"],
input[type="time"] {
    display: block;
    min-height: 48px;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--violeta);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

::placeholder {
    color: #6b6490;
}

.form-linea {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.form-linea input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
}

.form-linea input[type="number"] {
    flex: 0 0 90px;
}

.dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Píldoras: el radio real está invisible y el <span> es lo que se ve. */
.opciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
}

.opciones-4 {
    grid-template-columns: repeat(4, 1fr);
}

.opciones legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.pildora {
    position: relative;
    cursor: pointer;
}

.formulario .pildora {
    display: block;
}

.pildora input {
    position: absolute;
    opacity: 0;
}

.pildora span {
    display: block;
    padding: 9px 4px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    transition: border-color 0.2s, background 0.2s;
}

.pildora small {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--texto-suave);
}

.pildora-icono {
    display: block;
    font-size: 1.3rem;
    font-weight: normal;
}

.pildora input:checked + span {
    border-color: var(--color-dificultad, var(--violeta));
    background: rgba(139, 92, 246, 0.14);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
}

.pildora input:focus-visible + span {
    outline: 2px solid var(--cian);
    outline-offset: 2px;
}

.botones-dialogo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Días de la semana: 7 casillas en una fila */
.opciones-7 {
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.opciones-7 .pildora span {
    padding: 10px 0;
}

.opciones-2 {
    grid-template-columns: 1fr 1fr;
}

/* Los 31 días del mes: 7 por fila, más bajitos que los de la semana. */
.campo-mes .pildora span {
    padding: 8px 0;
    font-size: 0.86rem;
}

/* Veces por semana: 6 números en una fila */
.opciones-6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.opciones-6 .pildora span {
    padding: 10px 0;
}

/* Botones que solo aparecen al editar (mover, archivar, borrar) */
.solo-editar {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}

/* Selector de dos opciones (Ayer / Hoy, 7 días / 30 días) */
.selector {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.selector button {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--texto-suave);
    background: transparent;
    border: none;
    border-radius: var(--esquina);
    cursor: pointer;
}

.selector button[aria-pressed="true"] {
    color: #fff;
    background: rgba(139, 92, 246, 0.35);
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.7);
}

/* Interruptor (encendido / apagado). ".formulario .interruptor" le gana a ".formulario label",
   que si no lo convierte en rejilla y el botón queda debajo del texto. */
.interruptor,
.formulario .interruptor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.interruptor input {
    flex-shrink: 0;
    width: 52px;
    height: 30px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    cursor: pointer;
    transition: background 0.2s;
}

.interruptor input::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: 3px;
    background: var(--texto-suave);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.interruptor input:checked {
    background: rgba(52, 211, 153, 0.3);
    border-color: var(--verde);
}

.interruptor input:checked::before {
    background: var(--verde);
    transform: translateX(22px);
}


/* ===== Progreso: resumen con gráficas ===== */
.resumen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.resumen .subtitulo {
    margin: 8px 0 -4px;
}

/* Fichas con los números principales */
.fichas-dato {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ficha-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.ficha-etiqueta {
    font-size: 0.78rem;
    color: var(--texto-suave);
}

.ficha-valor {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ficha-valor::first-letter {
    text-transform: uppercase;
}

.ficha-valor small {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--texto-suave);
}

.ficha-nota {
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--texto-suave);
}

/* Gráfica de columnas */
.grafica {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.grafica line {
    stroke: var(--borde);
    stroke-width: 1;
}

.grafica text {
    font-size: 9px;
    fill: var(--texto-suave);
}

.grafica .columna {
    cursor: pointer;
}

.grafica .franja {
    fill: transparent;
}

.grafica .columna.elegida .franja {
    fill: rgba(255, 255, 255, 0.07);
}

.grafica .columna.elegida text {
    fill: var(--texto);
    font-weight: 700;
}

.tabla-datos {
    width: 100%;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
}

.tabla-datos th,
.tabla-datos td {
    padding: 6px 4px;
    text-align: right;
    border-bottom: 1px solid var(--borde);
}

.tabla-datos th {
    font-weight: 600;
    color: var(--texto-suave);
}

.tabla-datos th:first-child,
.tabla-datos td:first-child {
    text-align: left;
}

/* Medidores: una barra por misión (cuánto la cumpliste) */
.medidores,
.barras-atributo {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.medidor-fila {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
    font-size: 0.88rem;
}

.medidor-fila .texto-suave {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.medidor {
    height: 8px;
    background: rgba(139, 92, 246, 0.2);   /* el mismo violeta, más apagado */
    border-radius: 4px;
    overflow: hidden;
}

.medidor > div {
    height: 100%;
    background: var(--violeta);
    border-radius: 4px;
}

/* Barras por atributo */
.barras-atributo li {
    display: grid;
    grid-template-columns: 96px 1fr 26px;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
}

.ba-pista {
    display: block;
    height: 14px;
}

.ba-pista i {
    display: block;
    min-width: 2px;
    height: 100%;
    border-radius: 0 4px 4px 0;   /* base recta, punta redondeada */
}

.ba-valor {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ===== Personaje: apariencia ===== */
.apariencia-grupo {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.apariencia-titulo {
    font-size: 0.9rem;
    font-weight: 600;
}

.apariencia-titulo small {
    margin-left: 6px;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--texto-suave);
}

.apariencia .selector button {
    padding: 6px 2px;
    font-size: 0.82rem;
}

/* Con muchas opciones (peinados), los botones van en filas de 4. */
.apariencia .selector-rejilla {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
}

/* Vista previa: una franja que se queda pegada bajo la cabecera mientras bajas por
   las opciones (app.js mide la cabecera y guarda su alto en --alto-cabecera). */
.apariencia-previa {
    position: sticky;
    top: var(--alto-cabecera, 86px);
    z-index: 3;
    display: grid;
    justify-items: center;
    margin: 8px -8px 0;
    padding: 6px 0 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(139, 92, 246, 0.3), transparent 70%), var(--panel-claro);
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 10px 14px -8px rgba(0, 0, 0, 0.7);
}

.apariencia-previa .avatar-svg {
    width: 92px;
}

/* Círculos de color (piel y pelo) */
.muestras {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.muestra {
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--color-muestra);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
}

.muestra[aria-pressed="true"] {
    border-color: #fff;
    box-shadow: 0 0 0 3px var(--violeta);
}

/* "El de tu clase": se elige solo; lleva una A de automático. */
.muestra.auto {
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px #000;
}


/* ===== Ventanas (dialog) ===== */
/* Se abren arriba para que el teclado del iPhone no las tape. */
.dialogo {
    width: min(560px, calc(100% - 24px));
    max-width: none;
    max-height: calc(100vh - env(safe-area-inset-top) - 24px);
    margin: calc(env(safe-area-inset-top) + 12px) auto auto;
    padding: 0;
    color: var(--texto);
    background: linear-gradient(180deg, var(--panel-claro), var(--panel));
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* El relleno va adentro: así tocar el fondo oscuro (y no la ventana) la cierra. */
.dialogo > * {
    margin: 0;
    padding: 20px;
}

.dialogo[open] {
    animation: bajar 0.25s ease-out;
}

.dialogo::backdrop {
    background: rgba(5, 3, 12, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ajustes-bloque {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}

/* Notificaciones: los recordatorios y el formulario para agregar uno */
.ajustes-bloque-contenido,
.horario-nuevo {
    display: grid;
    gap: 10px;
}

.horarios {
    margin: 0;
    padding: 0;
    list-style: none;
}

.horarios li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0 4px 12px;
    border-bottom: 1px solid var(--borde);
}

.horarios b {
    font-family: var(--letra-titulo);
    font-variant-numeric: tabular-nums;
}

.ajustes-bloque h3 {
    font-size: 1rem;
}

.ajustes-bloque.peligro .boton {
    width: 100%;
}

/* Volumen de la música: una barra que se arrastra, alta para tocarla fácil.
   ".formulario .volumen" le gana a ".formulario label" (que la volvería rejilla). */
.volumen,
.formulario .volumen {
    display: flex;
    align-items: center;
    gap: 10px;
}

.volumen input[type="range"] {
    flex: 1;
    height: 44px;
    margin: 0;
    accent-color: var(--violeta);
}

.reglas {
    display: grid;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--texto-suave);
}


/* ===== Avatar ===== */
.avatar svg,
.avatar-svg {
    display: block;
    width: 100%;
    height: auto;
}

.avatar svg {
    height: 100%;
}

/* Tarjeta del héroe (arriba de "Hoy") */
.heroe {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px;
    text-align: left;
    background: linear-gradient(180deg, var(--panel-claro), var(--panel));
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.heroe-avatar {
    flex: 0 0 112px;
    display: block;
    overflow: hidden;
    border-radius: var(--esquina);
}

.heroe-info {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.heroe-animo {
    font-size: 0.92rem;
    font-weight: 600;
}

.heroe-ver {
    color: var(--cian);
    font-weight: 600;
}

/* Pantalla Personaje */
.ficha {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

.ficha-avatar {
    width: min(240px, 70vw);
    margin-bottom: 6px;
    overflow: hidden;
    border-radius: var(--esquina);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.35);
}

.etapas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.etapas li {
    display: grid;
    padding: 8px 2px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--texto-suave);
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.etapas small {
    font-size: 0.68rem;
    font-weight: 500;
}

.etapas .pasada {
    color: var(--texto);
    border-color: rgba(52, 211, 153, 0.45);
}

.etapas .actual {
    color: var(--oro);
    border-color: var(--oro);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

.rasgos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.rasgo {
    padding: 10px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-top: 3px solid var(--color-atributo);
    border-radius: var(--esquina);
}

.rasgo-titulo {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
}

.rasgo-titulo b {
    font-family: var(--letra-titulo);
    font-size: 0.78rem;
    color: var(--color-atributo);
}

.rasgo ul {
    display: grid;
    gap: 3px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    color: var(--texto-suave);
}

.rasgo .tiene {
    color: var(--texto);
}

.espacios {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* (v100) 7 casillas: cabeza, pecho, piernas, pies, mano, espalda y fondo */
    gap: 6px;
    margin: 12px 0 4px;
}

.espacio {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 4px;
    text-align: center;
    background: var(--hundido);
    border: 1px dashed var(--borde);
    border-radius: var(--esquina);
}

.objeto {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.objeto.puesto {
    border-color: rgba(251, 191, 36, 0.45);
}

.objeto-info {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 1px;
    font-size: 0.92rem;
}

/* La habilidad de la Torre de un objeto épico o legendario, o la de una mascota (v26). */
.habilidad-objeto {
    margin-top: 2px;
    font-size: 0.76rem;
    line-height: 1.35;
    color: #e9d5ff;
}

.habilidad-objeto i {
    font-style: normal;
    color: var(--texto-suave);
}

/* El retrato de una mascota en la Tienda: un poco más ancho que el de un objeto. */
.objeto-icono.retrato-mascota {
    flex-basis: 64px;
    width: 64px;
    padding: 2px;
}

.mascota-ficha {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0;
}

.mascota-dibujo {
    flex: 0 0 110px;
    padding: 6px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 70%);
    border-radius: var(--esquina);
}

.cel-avatar {
    width: 150px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--esquina);
}

/* --- Animaciones del avatar --- */
/* Los "pivotes" (brazo, arma, capa) giran alrededor del punto donde dibujo.js los
   colocó: el hombro, la mano o el cuello. Por eso aquí basta con decir rotate(). */

/* Para saltar y celebrar, el personaje entero se mueve desde sus pies. */
.avatar-svg .pj {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

/* Respira: el torso sube y baja apenas (los pies se quedan quietos). */
.avatar-svg .pj-torso {
    animation: respirar 3.6s ease-in-out infinite;
}

.avatar-svg.animo-dormido .pj-torso {
    animation-duration: 5.5s;
}

/* Parpadea cada 5 segundos. */
.avatar-svg .ojos {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: parpadear 5s infinite;
}

.avatar-svg.animo-dormido .ojos {
    animation: none;
}

/* La capa ondea y el arma se mece un poco. */
.avatar-svg .capa {
    animation: ondear 4.4s ease-in-out infinite;
}

.avatar-svg .arma-giro {
    animation: mecer 3.6s ease-in-out infinite;
}

.avatar-svg .alas {
    transform-box: fill-box;
    transform-origin: 50% 85%;
    animation: aletear 3.2s ease-in-out infinite;
}

/* Salta al celebrar (subir de nivel o evolucionar). */
.celebrando .avatar-svg .pj {
    animation: celebrar-pj 1.1s ease-in-out 2;
}

/* El retrato pequeño de la cabecera no se anima (ahorra batería). */
.avatar-mini * {
    animation: none !important;
}

/* --- Ataque: al completar una misión el héroe da un tajo --- */
/* 1) levanta el brazo  2) baja el arma de golpe  3) queda un arco de luz (la "estela"). */
.atacar .avatar-svg .brazo-arma {
    animation: tajo-brazo 0.64s cubic-bezier(0.3, 0.1, 0.3, 1);
}

.atacar .avatar-svg .arma-giro {
    animation: tajo-arma 0.64s cubic-bezier(0.3, 0.1, 0.3, 1);
}

.atacar .avatar-svg .estela {
    animation: tajo-estela 0.64s ease-out;
}

.atacar .avatar-svg .pj {
    animation: tajo-cuerpo 0.64s ease-out;
}

.avatar-svg .aura {
    transform-box: fill-box;
    transform-origin: center;
    animation: palpitar 2.6s ease-in-out infinite;
}

.avatar-svg .llama {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: llamear 0.5s ease-in-out infinite alternate;
}

.avatar-svg .llama:nth-of-type(2n) {
    animation-duration: 0.65s;
}

.avatar-svg .chispa,
.avatar-svg .orbe,
.escena-svg .chispa,
.escena-svg .orbe {
    transform-box: fill-box;
    transform-origin: center;
    animation: titilar 1.8s ease-in-out infinite;
}

.avatar-svg .chispa:nth-of-type(2n),
.escena-svg .chispa:nth-of-type(2n),
.escena-svg .orbe:nth-of-type(2n) {
    animation-delay: 0.6s;
}

.avatar-svg .zzz {
    animation: zzz 2.6s ease-in-out infinite;
}

/* Mascota: respira y mueve las alas. */
.avatar-svg .mascota-cuerpo {
    animation: respirar 2.4s ease-in-out infinite;
}

.avatar-svg .mascota.triste .mascota-cuerpo {
    animation-duration: 4.4s;
}

.avatar-svg .ala-mascota {
    transform-box: fill-box;
    transform-origin: 10% 90%;
    animation: aletear-mascota 2.4s ease-in-out infinite;
}

.avatar-svg .mascota.triste .ala-mascota {
    animation: none;
}

.avatar-svg .huevo {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: tambalear 2.4s ease-in-out infinite;
}

@keyframes respirar {
    50% { transform: translateY(-0.9px); }
}

@keyframes parpadear {
    0%, 93%, 100% { transform: scaleY(1); }
    96% { transform: scaleY(0.08); }
}

@keyframes ondear {
    0%, 100% { transform: skewX(-1.4deg); }
    50% { transform: skewX(1.6deg); }
}

@keyframes mecer {
    0%, 100% { transform: rotate(-1.4deg); }
    50% { transform: rotate(1.6deg); }
}

@keyframes aletear {
    50% { transform: scale(1.04, 1.07); }
}

@keyframes aletear-mascota {
    50% { transform: rotate(-7deg); }
}

@keyframes celebrar-pj {
    0%, 50%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-14px) rotate(-6deg); }
    75% { transform: translateY(-14px) rotate(6deg); }
}

@keyframes tajo-brazo {
    0%, 100% { transform: rotate(0); }
    32% { transform: rotate(-58deg); }
    56% { transform: rotate(16deg); }
    78% { transform: rotate(8deg); }
}

@keyframes tajo-arma {
    0%, 100% { transform: rotate(0); }
    32% { transform: rotate(-34deg); }
    56% { transform: rotate(92deg); }
    78% { transform: rotate(70deg); }
}

@keyframes tajo-estela {
    0%, 36% { opacity: 0; transform: rotate(-28deg); }
    54% { opacity: 0.95; transform: rotate(0); }
    100% { opacity: 0; transform: rotate(8deg); }
}

@keyframes tajo-cuerpo {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-3px); }
    56% { transform: translateX(5px); }
}

/* El aire del fondo (v23): partículas que flotan y rayos de luz que respiran.
   Cada partícula trae su duración y su retraso en el atributo style (ver ambiente() en dibujo-escenas.js). */
.avatar-svg .particula {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.avatar-svg .p-luciernagas { animation-name: flotar-luz; }
.avatar-svg .p-polvo       { animation-name: polvo; }
.avatar-svg .p-brasas      { animation-name: subir-brasa; animation-timing-function: ease-out; }
.avatar-svg .p-nieve       { animation-name: caer-nieve; animation-timing-function: linear; }
.avatar-svg .p-estrellas   { animation-name: estrella; }

.avatar-svg .rayos-luz {
    animation: rayos 9s ease-in-out infinite;
}

/* Las runas del Báculo arcano giran alrededor del orbe. */
.avatar-svg .runas-giro,
.objeto-svg .runas-giro {
    animation: girar 10s linear infinite;
}

@keyframes flotar-luz {
    0%   { transform: translate(0, 0); opacity: 0; }
    20%  { opacity: 1; }
    50%  { transform: translate(7px, -7px); opacity: 0.4; }
    70%  { opacity: 1; }
    100% { transform: translate(-3px, -16px); opacity: 0; }
}

@keyframes polvo {
    0%   { transform: translate(0, 0); opacity: 0; }
    30%, 70% { opacity: 0.75; }
    100% { transform: translate(12px, -8px); opacity: 0; }
}

@keyframes subir-brasa {
    0%   { transform: translate(0, 0); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(9px, -62px); opacity: 0; }
}

@keyframes caer-nieve {
    0%   { transform: translate(0, -12px); opacity: 0; }
    12%  { opacity: 0.9; }
    50%  { transform: translate(-6px, 34px); }
    88%  { opacity: 0.8; }
    100% { transform: translate(3px, 76px); opacity: 0; }
}

@keyframes estrella {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 1; }
}

@keyframes rayos {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

@keyframes palpitar {
    50% { transform: scale(1.08); opacity: 0.75; }
}

@keyframes llamear {
    from { transform: scaleY(1) skewX(0deg); }
    to { transform: scaleY(1.15) skewX(4deg); }
}

@keyframes titilar {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.6); }
}

@keyframes zzz {
    0% { transform: translate(0, 0); opacity: 0.3; }
    50% { opacity: 1; }
    100% { transform: translate(6px, -8px); opacity: 0.3; }
}

@keyframes tambalear {
    0%, 60%, 100% { transform: rotate(0); }
    70% { transform: rotate(-8deg); }
    80% { transform: rotate(8deg); }
    90% { transform: rotate(-4deg); }
}


/* ===== Objetos: miniatura dibujada y marco según su rareza ===== */
.rareza-comun      { --rareza: #9ca3af; }
.rareza-raro       { --rareza: #38bdf8; }
.rareza-epico      { --rareza: #c084fc; }
.rareza-legendario { --rareza: #fbbf24; }

.objeto-icono {
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 5px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.1), transparent 70%), var(--panel);
    border: 1.5px solid var(--rareza, var(--borde));
    border-radius: var(--esquina);
    box-shadow: inset 0 0 14px -6px var(--rareza, transparent);
}

.objeto-icono svg,
.espacio-icono svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Los legendarios tienen un brillo que palpita. */
.objeto-icono.rareza-legendario {
    animation: brillo-legendario 2.8s ease-in-out infinite;
}

/* Épicos y legendarios: un reflejo de luz cruza el marco de vez en cuando. */
.objeto-icono.rareza-epico,
.objeto-icono.rareza-legendario {
    position: relative;
}

.objeto-icono.rareza-epico::after,
.objeto-icono.rareza-legendario::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%);
    transform: translateX(-120%);
    animation: reflejo 4.5s ease-in-out infinite;
    pointer-events: none;
}

.objeto-icono.rareza-legendario::after {
    background: linear-gradient(115deg, transparent 40%, rgba(255, 236, 170, 0.4) 50%, transparent 60%);
    animation-duration: 3.2s;
}

.objeto-icono.bloqueado {
    filter: grayscale(1) brightness(0.55);
    animation: none;
}

.objeto-icono.bloqueado::after {
    display: none;
}

@keyframes reflejo {
    0%, 55% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

.rareza-texto {
    font-weight: 600;
}

.espacio-icono {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 3px;
    font-size: 1.2rem;
    color: var(--texto-suave);
}

.espacio.lleno {
    border-style: solid;
    border-color: var(--rareza, rgba(251, 191, 36, 0.45));
}

@keyframes brillo-legendario {
    0%, 100% { box-shadow: inset 0 0 14px -6px var(--rareza), 0 0 0 0 transparent; }
    50% { box-shadow: inset 0 0 16px -4px var(--rareza), 0 0 12px -2px var(--rareza); }
}


/* ===== Batalla: escenario, golpe y número de daño ===== */
/* El escenario de la campaña va detrás del héroe y del jefe. */
.escena-fondo {
    position: absolute;
    inset: 0;
}

.escena-fondo svg {
    display: block;
    width: 100%;
    height: 100%;
}

.escena-heroe,
.escena-vs,
.escena-jefe {
    position: relative;
}

/* La estela del tajo puede salirse del recuadro del héroe, hacia el jefe. */
.escena-heroe .avatar-svg {
    overflow: visible;
}

/* Destello del golpe sobre el retrato: un fogonazo y dos cortes cruzados. */
.impacto {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 196, 120, 0.55) 32%, transparent 62%);
    opacity: 0;
    pointer-events: none;
    animation: fogonazo 0.5s ease-out 0.3s;
}

.impacto::before,
.impacto::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -25%;
    width: 150%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent);
    transform: rotate(-38deg);
}

.impacto::after {
    transform: rotate(-58deg) translateY(10px);
    height: 2px;
}

/* Número de daño que sube y se desvanece. */
.dano {
    position: absolute;
    top: 14%;
    left: 50%;
    z-index: 3;
    font-family: var(--letra-titulo);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 8px #e11d48, 0 2px 0 #7f1d1d;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    animation: subir-dano 1s ease-out 0.34s;
}

.combate .dano {
    top: -6px;
    font-size: 0.95rem;
}

.combate-jefe {
    position: relative;
}

@keyframes fogonazo {
    0% { opacity: 0; transform: scale(0.5); }
    25% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.25); }
}

@keyframes subir-dano {
    0% { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
    18% { opacity: 1; transform: translate(-50%, -4px) scale(1.15); }
    70% { opacity: 1; transform: translate(-50%, -22px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}


/* ===== Arcade (minijuegos) ===== */
.chip-arcade {
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.55);
    cursor: pointer;
}

.acceso-arcade {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    border-color: rgba(139, 92, 246, 0.55);
    cursor: pointer;
}

.acceso-arcade > span:nth-child(2) {
    flex: 1;
    display: grid;
    gap: 2px;
}

.acceso-arcade-icono {
    font-size: 2rem;
}

.arcade-cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
}

.arcade-heroe {
    flex: 0 0 84px;
}

.fichas {
    margin: 4px 0;
    font-family: var(--letra-titulo);
    font-size: 1.3rem;
    font-weight: 800;
    color: #c4b5fd;
}

.minijuego-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.minijuego-cabecera h3 {
    margin-bottom: 4px;
    font-size: 1.05rem;
}

.minijuego-icono {
    font-size: 2.2rem;
}

.minijuego-tarjeta .boton {
    margin-top: 10px;
}

/* Ventana del minijuego: ocupa toda la pantalla */
.minijuego {
    position: fixed;
    inset: 0;
    z-index: 12;   /* debajo de celebraciones (20) y del PIN (30) */
    display: grid;
    place-items: center;
    padding: calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 8px);
    background:
        radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.2), transparent 50%),
        var(--fondo);
}

.minijuego-caja {
    position: relative;
    width: min(520px, 100%);
    display: grid;
    gap: 8px;
}

.minijuego-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.minijuego-marcador {
    font-family: var(--letra-titulo);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--oro);
    font-variant-numeric: tabular-nums;
}

.minijuego-lienzo {
    display: block;
    width: 100%;
    height: min(58vh, 430px);
    background: #120a24;
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    touch-action: none;   /* el dedo mueve el juego, no la página */
    -webkit-user-select: none;
    user-select: none;
}

.minijuego-final {
    position: absolute;
    inset: 40px 0 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 20px;
    text-align: center;
    background: rgba(18, 10, 36, 0.94);
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: var(--esquina);
    animation: entrar-celebracion 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.minijuego-final .etiqueta {
    color: var(--oro);
}

.minijuego-puntos {
    font-family: var(--letra-titulo);
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
}

.minijuego-premio {
    font-weight: 700;
    color: var(--oro);
}

.minijuego-final .botones-dialogo {
    width: 100%;
    margin-top: 8px;
}


/* ===== Más profesional (v15) ===== */

/* Grupos de campos dentro de un formulario (se ocultan juntos) */
.formulario-grupo {
    display: grid;
    gap: 14px;
}

.botones-hoy {
    margin-top: 2px;
}

.nota-gesto {
    margin-top: -6px;
    text-align: center;
}

.subtitulo-momento {
    margin-bottom: -4px;
}

/* Deslizar una misión para completarla: la tarjeta sigue al dedo y deja ver qué pasará. */
.lista {
    overflow-x: clip;          /* la tarjeta que se desliza no crea scroll horizontal */
}

.lista > .mision {
    touch-action: pan-y;       /* el dedo en vertical sigue haciendo scroll */
}

.mision.deslizando {
    transition: none;
    -webkit-user-select: none;
    user-select: none;
}

.mision.deslizando::before {
    content: "✓ Completar";
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    transform: translateY(-50%);
    font-weight: 800;
    white-space: nowrap;
    color: var(--texto-suave);
}

.mision.hecha.deslizando::before {
    content: "↺ Desmarcar";
}

.mision.gesto-listo::before {
    color: var(--verde);
}

.mision-info[data-accion] {
    cursor: pointer;
}

/* «Deshacer»: barra abajo, unos segundos */
.deshacer {
    position: fixed;
    right: 12px;
    bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 12px);
    left: 12px;
    z-index: 16;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
    padding: 8px 8px 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--panel-claro);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.deshacer span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deshacer.entrar {
    animation: subir-aviso 0.3s ease-out;
}

/* Si está «Deshacer», el aviso pequeño sube para no taparlo */
body:has(#deshacer:not([hidden])) .aviso {
    bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 74px);
}

/* Ordenar arrastrando */
.fila-ordenar {
    padding-left: 4px;
}

.mango {
    padding: 10px 12px;
    font-size: 1.2rem;
    color: var(--texto-suave);
    cursor: grab;
    touch-action: none;        /* el dedo en ☰ arrastra, no hace scroll */
    -webkit-user-select: none;
    user-select: none;
}

.fila-ordenar.arrastrando {
    z-index: 2;
    border-color: var(--violeta);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    transition: none;
}

/* Ficha de un hábito: calendario de 12 semanas */
.ficha-calendario {
    display: grid;
    grid-template-rows: repeat(7, 13px);
    grid-auto-flow: column;
    grid-auto-columns: 13px;
    gap: 3px;
    overflow-x: auto;
}

.celda-ficha {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: rgba(44, 35, 82, 0.55);
}

.celda-ficha.hecha { background: var(--verde); }
.celda-ficha.fallo { background: rgba(251, 113, 133, 0.5); }
.celda-ficha.pendiente { outline: 1px solid var(--cian); outline-offset: -1px; }
.celda-ficha.antes { background: rgba(44, 35, 82, 0.2); }   /* antes de crear la misión: la cuadrícula se ve igual */
.celda-ficha.futuro { background: transparent; }

/* Novedades */
.novedad {
    padding-top: 12px;
    border-top: 1px solid var(--borde);
}

.novedad h3 {
    margin: 2px 0 6px;
    font-size: 1rem;
}

.novedad ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
    font-size: 0.9rem;
}

/* Bienvenida */
.bienvenida-caja {
    display: grid;
    gap: 12px;
    max-height: 100%;
    padding: 4px 2px 24px;
    overflow-y: auto;
}

.pasos {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.pasos i {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: var(--borde);
}

.pasos i.actual { background: var(--violeta); }
.pasos i.hecho { background: var(--verde); }

.bienvenida-lista {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bienvenida-lista li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.bienvenida-lista span {
    font-size: 1.6rem;
}

.bienvenida-lista small,
.opcion-plantilla small {
    display: block;
    font-size: 0.82rem;
    color: var(--texto-suave);
}

.opciones-plantilla {
    display: grid;
    gap: 8px;
}

.opcion-plantilla {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    text-align: left;
    color: var(--texto);
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    cursor: pointer;
}

.opcion-plantilla[aria-pressed="true"] {
    background: rgba(52, 211, 153, 0.12);
    border-color: var(--verde);
    box-shadow: inset 0 0 0 1px var(--verde);
}

.opcion-plantilla[aria-pressed="true"] b::before {
    content: "✓ ";
    color: var(--verde);
}

/* Face ID en la pantalla de bloqueo y botones extra al crear el personaje */
#bloqueo-faceid {
    margin-top: 10px;
}

.crear-personaje .boton-ancho + .boton-ancho {
    margin-top: 8px;
}


/* ===== Hoy: desafío, diario y «Tu semana» ===== */
.desafio {
    display: flex;
    align-items: center;
    gap: 14px;
    border-color: rgba(139, 92, 246, 0.55);
}

.desafio.cumplido {
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 0 22px rgba(251, 191, 36, 0.15);
}

.desafio-icono {
    font-size: 2rem;
}

.desafio-info {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.diario .formulario {
    margin-top: 10px;
    gap: 10px;
}

.semana {
    display: grid;
    gap: 12px;
    border-color: rgba(251, 191, 36, 0.5);
    animation: bajar 0.35s ease-out;
}

.semana-lista {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 0.88rem;
    list-style: none;
}

/* Revisión semanal (v39): «⭐ Foco de la semana» en Hoy y la lista de misiones a elegir */
.foco {
    display: grid;
    gap: 8px;
    border-color: rgba(251, 191, 36, 0.35);
}

.opciones-1 {
    grid-template-columns: 1fr;
}

.opciones-1 .pildora span {
    padding: 11px 12px;
    text-align: left;
}


/* ===== Modo enfoque ===== */
.chip-enfoque {
    color: #a5f3fc;
    border-color: rgba(34, 211, 238, 0.5);
    cursor: pointer;
}

.chip-enfoque.activo {
    font-variant-numeric: tabular-nums;
    background: rgba(34, 211, 238, 0.12);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
}

.acceso-enfoque {
    border-color: rgba(34, 211, 238, 0.45);
}

.enfoque-activo {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

/* El reloj: un anillo que se va vaciando, con el tiempo en el centro */
.reloj {
    position: relative;
    width: min(240px, 70vw);
    aspect-ratio: 1;
}

.reloj svg {
    display: block;
    width: 100%;
    height: 100%;
}

.reloj-pista {
    fill: none;
    stroke: var(--hundido);
    stroke-width: 8;
}

.reloj-arco {
    fill: none;
    stroke: var(--color-atributo);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.reloj-tiempo {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--letra-titulo);
    font-size: 2.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}


/* ===== Torre del héroe ===== */
/* La tarjeta en la pantalla Arcade */
.torre-tarjeta {
    display: grid;
    gap: 10px;
    border-color: rgba(251, 191, 36, 0.45);
}

.torre-portada {
    position: relative;
    height: 150px;
    margin: -18px -18px 0;
    border-radius: var(--radio) var(--radio) 0 0;
    background-size: cover;
    background-position: center 30%;
}

/* Un velo cálido sobre el grabado (es en blanco y negro): como luz de antorchas. */
.torre-portada::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 70%, rgba(255, 150, 60, 0.28), transparent 65%),
        linear-gradient(180deg, rgba(11, 8, 22, 0.25), rgba(11, 8, 22, 0.8));
}

.torre-portada-titulo {
    position: absolute;
    left: 16px;
    bottom: 12px;
    font-family: var(--letra-titulo);
    font-size: 1.3rem;
    font-weight: 800;
    text-shadow: 0 2px 10px #000;
}

/* La batalla (v25): se ve como un juego de rol clásico de consola.
   - Las imágenes son "pixel art": dibujos muy pequeños que se agrandan SIN suavizar
     (image-rendering: pixelated), así cada punto queda como un cuadrito.
   - Las ventanas son azules con borde blanco (.ff-ventana).
   - Las animaciones van "a saltos" (steps), como los sprites de antes. */
.torre-caja {
    max-height: 100%;
    overflow-y: auto;
    /* Las filas miden lo que mide su contenido: si la pantalla es baja, la caja se desliza en vez de
       aplastar la escena encima de los comandos (pasaba en iPhone chicos y con «Habilidades» abiertas). */
    grid-auto-rows: max-content;
    align-content: start;
    overscroll-behavior: contain;
}

.torre-caja > * {
    min-width: 0;
}

/* Teléfonos angostos: comandos y fichas un poco más compactos para que quepan sin cortarse. */
@media (max-width: 420px) {
    .ff-comando {
        grid-template-columns: 20px minmax(0, 1fr) auto;
        padding-right: 2px;
    }

    .ff-comando small {
        font-size: 0.62rem;
    }

    .ff-comando-nombre {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.torre-rendirse {
    justify-self: center;
}

.ff-zona {
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--texto-suave);
}

/* --- Las ventanas azules --- */
.ff-ventana {
    margin: 0;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 20, 0.85);
    background: linear-gradient(180deg, #3350c8 0%, #1c2e96 38%, #0a1258 100%);
    border: 2px solid #f1f3ff;
    border-radius: var(--esquina);
    /* una línea oscura por dentro y otra por fuera del borde blanco */
    box-shadow: inset 0 0 0 1px #060a3a, 0 0 0 1px #060a3a, 0 3px 10px rgba(0, 0, 0, 0.45);
}

.ff-ventana small {
    font-size: 0.72rem;
    font-weight: 500;
    color: #b9c6ff;
}

.ff-mensaje {
    min-height: 3.5em;
    font-size: 0.86rem;
}

.ff-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 4px;
    padding-bottom: 4px;
    font-weight: 700;
    border-bottom: 1px solid rgba(241, 243, 255, 0.35);
}

.ff-renglon {
    margin: 2px 0;
}

.ff-oro {
    color: #ffe58a;
}

.ff-puntos {
    margin: 4px 0;
    font-family: var(--letra-titulo);
    font-size: 1.7rem;
    font-weight: 800;
    text-align: center;
}

/* --- La escena --- */
.ff-escena {
    /* --px = cuánto mide en pantalla un punto del pixel art. La sala mide 192 puntos de ancho,
       así que es el ancho de la escena dividido entre 192 (cqw = 1 % del ancho de la caja). */
    --px: 1.9px;
    position: relative;
    width: 100%;
    aspect-ratio: 192 / 128;
    overflow: hidden;
    container-type: inline-size;
    background: #0b0816;
    border: 2px solid #f1f3ff;
    border-radius: var(--esquina);
    box-shadow: 0 0 0 1px #060a3a;
}

@supports (width: 1cqw) {
    .ff-escena {
        --px: calc(100cqw / 192);
    }
}

/* La sala llena toda la escena. */
.ff-sala {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    image-rendering: pixelated;
    -webkit-user-select: none;
    user-select: none;
}

/* Cada bando (la criatura y tu héroe) se coloca por el centro de sus pies. */
.ff-bando {
    position: absolute;
    bottom: calc(var(--px) * 10);
    transform: translateX(-50%);
}

.ff-enemigo {
    left: calc(var(--px) * 62);
}

.ff-enemigo.vuela {
    bottom: calc(var(--px) * 22);
}

.ff-heroe {
    left: calc(var(--px) * 160);
    bottom: calc(var(--px) * 12);
}

.ff-figura,
.ff-paso {
    display: block;
}

.ff-sprite {
    display: block;
    width: calc(var(--px) * var(--talla));
    height: auto;
    image-rendering: pixelated;
    -webkit-user-select: none;
    user-select: none;
}

.ff-sombra {
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: calc(var(--px) * -3);
    height: calc(var(--px) * 8);
    background: rgba(5, 3, 12, 0.5);
    border-radius: 50%;
}

.ff-enemigo.vuela .ff-sombra {
    left: 26%;
    right: 26%;
    bottom: calc(var(--px) * -15);
}

/* En reposo se mecen un punto arriba y abajo; las que vuelan, un poco más. */
.ff-figura {
    animation: ff-reposo 1.3s steps(1) infinite;
}

.ff-heroe .ff-figura {
    animation-delay: -0.5s;
}

.ff-enemigo.vuela .ff-figura {
    animation: ff-flotar 1.6s steps(4) infinite alternate;
}

@keyframes ff-reposo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(var(--px) * -1)); }
}

@keyframes ff-flotar {
    from { transform: translateY(0); }
    to { transform: translateY(calc(var(--px) * -5)); }
}

/* --- Lo que pasa en un turno ---
   Tu acción empieza enseguida; la respuesta de la criatura, a los 0,65 s. */

/* Tu héroe da un paso hacia la criatura y vuelve. */
.ff-heroe.ataca .ff-paso {
    animation: ff-avanzar 0.5s steps(5);
}

@keyframes ff-avanzar {
    0%, 100% { transform: translateX(0); }
    35%, 65% { transform: translateX(calc(var(--px) * -18)); }
}

/* Al lanzar un hechizo o beber una poción, se ilumina. */
.ff-heroe.lanza .ff-paso,
.ff-heroe.bebe .ff-paso {
    animation: ff-brillar 0.45s steps(4);
}

@keyframes ff-brillar {
    0%, 100% { filter: none; transform: translateY(0); }
    40% { filter: brightness(1.9); transform: translateY(calc(var(--px) * -2)); }
}

/* Quien recibe un golpe parpadea (así se marcaba el daño en los juegos de antes). */
.ff-enemigo.golpeado .ff-sprite {
    animation: ff-parpadeo 0.42s steps(1) 0.28s;
}

.ff-heroe.herido .ff-sprite {
    animation: ff-parpadeo 0.42s steps(1) 0.9s;
}

@keyframes ff-parpadeo {
    0% { opacity: 1; filter: brightness(4); }
    17%, 50%, 83% { opacity: 0; }
    33%, 66%, 100% { opacity: 1; filter: none; }
}

/* La criatura se enciende un instante y embiste. */
.ff-enemigo.ataca .ff-paso {
    animation: ff-embestir 0.42s steps(4) 0.65s;
}

@keyframes ff-embestir {
    0% { filter: brightness(2.6); transform: translateX(0); }
    30% { filter: none; transform: translateX(calc(var(--px) * 14)); }
    100% { transform: translateX(0); }
}

.ff-enemigo.furia .ff-paso {
    animation: ff-furia 0.6s steps(6) 0.65s;
}

@keyframes ff-furia {
    0%, 100% { filter: none; transform: scale(1); }
    50% { filter: sepia(1) saturate(6) hue-rotate(-35deg); transform: scale(1.06); }
}

/* Vencida: parpadea por el último golpe y se deshace. */
.ff-enemigo.cae .ff-sprite {
    animation: ff-parpadeo 0.42s steps(1) 0.28s, ff-deshacer 0.9s steps(9) 0.75s forwards;
}

.ff-enemigo.cae .ff-sombra {
    animation: ff-desaparecer 0.3s steps(3) 1.3s forwards;
}

.ff-enemigo.vencido .ff-sprite,
.ff-enemigo.vencido .ff-sombra {
    opacity: 0;
}

@keyframes ff-deshacer {
    0% { opacity: 1; filter: brightness(3) saturate(0); transform: translateY(0); }
    30% { opacity: 0.9; filter: sepia(1) saturate(5) hue-rotate(230deg) brightness(1.2); }
    100% { opacity: 0; filter: sepia(1) saturate(5) hue-rotate(230deg) brightness(0.5); transform: translateY(calc(var(--px) * 6)); }
}

@keyframes ff-desaparecer {
    to { opacity: 0; }
}

/* Tu héroe festeja con dos saltos… */
.ff-heroe.victoria .ff-paso {
    animation: ff-festejo 0.5s steps(4) 2;
}

.ff-heroe.victoria.tras-golpe .ff-paso {
    animation-delay: 1.1s;
}

@keyframes ff-festejo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(var(--px) * -8)); }
}

/* …o cae al suelo. */
.ff-heroe.ko .ff-paso {
    filter: grayscale(0.8) brightness(0.7);
    transform: translateY(calc(var(--px) * 22)) rotate(90deg);
}

.ff-heroe.ko.tras-golpe .ff-paso {
    animation: ff-caer 0.4s steps(4) 1.3s backwards;
}

@keyframes ff-caer {
    from { filter: none; transform: none; }
}

/* El escudo al defenderte. */
.ff-escudo {
    position: absolute;
    top: 8%;
    bottom: 4%;
    left: calc(var(--px) * -9);
    width: calc(var(--px) * 16);
    background: linear-gradient(90deg, rgba(190, 235, 255, 0.95), rgba(90, 170, 255, 0.35));
    clip-path: polygon(40% 0, 100% 12%, 100% 88%, 40% 100%, 0 78%, 0 22%);
    animation: ff-escudo 1.5s steps(8) forwards;
}

@keyframes ff-escudo {
    0% { opacity: 0; transform: scaleY(0.3); }
    15%, 80% { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0.35; }
}

/* --- Tu mascota (v26): delante de tu héroe, un poco más abajo --- */
.ff-mascota {
    left: calc(var(--px) * 124);
    bottom: calc(var(--px) * 4);
    z-index: 1;
}

/* Un huevo o una mascota triste no pelean: se quedan quietos y apagados. */
.ff-mascota.quieta .ff-figura {
    animation: none;
    filter: saturate(0.4) brightness(0.8);
}

.ff-mascota .ff-figura {
    animation-delay: -0.9s;
}

/* Salta hacia la criatura a los 0,4 s (después de tu acción). */
.ff-mascota.ataca .ff-paso {
    animation: ff-avanzar-mascota 0.45s steps(5) 0.4s;
}

@keyframes ff-avanzar-mascota {
    0%, 100% { transform: translateX(0); }
    35%, 65% { transform: translate(calc(var(--px) * -26), calc(var(--px) * -4)); }
}

/* Te devuelve un hechizo o te cura: brilla. */
.ff-mascota.brilla .ff-paso {
    animation: ff-brillar 0.45s steps(4) 0.4s;
}

/* El fénix te levanta: arde. */
.ff-mascota.renace .ff-paso {
    animation: ff-arder 0.8s steps(6) 1.1s;
}

@keyframes ff-arder {
    0%, 100% { filter: none; transform: scale(1); }
    50% { filter: brightness(2.2) saturate(2); transform: scale(1.2); }
}

/* Lo que le pega tu mascota a la criatura: parpadea otra vez. */
.ff-enemigo.golpeado-mascota .ff-sprite {
    animation: ff-parpadeo 0.42s steps(1) 0.48s;
}

.ff-enemigo.golpeado.golpeado-mascota .ff-sprite {
    animation: ff-parpadeo 0.42s steps(1) 0.28s, ff-parpadeo 0.42s steps(1) 0.72s;
}

/* La mirada del basilisco: la criatura se vuelve de piedra un momento. */
.ff-enemigo.piedra .ff-sprite {
    animation: ff-piedra 1.3s steps(4) 0.45s both;
}

@keyframes ff-piedra {
    0%, 100% { filter: none; }
    15%, 85% { filter: grayscale(1) brightness(0.75) contrast(1.2); }
}

/* Si la derriban tus escamas, cae después de su golpe. */
.ff-enemigo.cae.tarde .ff-sprite {
    animation: ff-parpadeo 0.42s steps(1) 0.28s, ff-deshacer 0.9s steps(9) 1.25s forwards;
}

.ff-enemigo.cae.tarde .ff-sombra {
    animation-delay: 1.8s;
}

/* Tu héroe esquiva («Sombra»): un paso atrás. */
.ff-heroe.esquiva .ff-paso {
    animation: ff-esquivar 0.4s steps(4) 0.75s;
}

@keyframes ff-esquivar {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(calc(var(--px) * 10)); opacity: 0.5; }
}

/* «Gracia» o el fénix te salvan de caer: un destello de luz. */
.ff-heroe.salvado .ff-sprite {
    animation: ff-parpadeo 0.42s steps(1) 0.9s, ff-salvado 0.7s steps(5) 1.35s;
}

@keyframes ff-salvado {
    0%, 100% { filter: none; }
    50% { filter: brightness(2.6) sepia(1) hue-rotate(10deg); }
}

/* --- Los efectos sobre la criatura --- */
.ff-efecto {
    position: absolute;
    inset: 6% 8%;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}

/* Un tajo: dos cortes blancos en diagonal. */
.ff-tajo {
    background:
        linear-gradient(135deg, transparent 46%, #fff 47% 51%, transparent 52%),
        linear-gradient(135deg, transparent 56%, #dfe8ff 57% 59%, transparent 60%);
    animation: ff-tajo 0.3s steps(4) 0.22s;
}

@keyframes ff-tajo {
    0% { opacity: 1; clip-path: inset(0 100% 100% 0); }
    60% { opacity: 1; clip-path: inset(0 0 0 0); }
    100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

/* Fuego: lenguas que suben desde el suelo (rojas por fuera, amarillas por dentro). */
.ff-fuego {
    inset: -4% 4% 0;
    background: linear-gradient(180deg, #ff9a1f 0%, #f0500f 45%, #a81808 100%);
    clip-path: polygon(0 100%, 6% 55%, 14% 72%, 22% 22%, 32% 60%, 40% 34%, 50% 0, 58% 40%, 66% 58%, 76% 16%, 86% 66%, 94% 46%, 100% 100%);
    transform-origin: 50% 100%;
    animation: ff-fuego 0.6s steps(6) 0.12s;
}

.ff-fuego::before {
    content: "";
    position: absolute;
    inset: 30% 14% 0;
    background: linear-gradient(180deg, #fff9c4, #ffd23c);
    clip-path: polygon(0 100%, 10% 50%, 22% 70%, 34% 24%, 44% 56%, 52% 0, 62% 50%, 74% 30%, 86% 64%, 100% 100%);
}

@keyframes ff-fuego {
    0% { opacity: 1; transform: scaleY(0.15); }
    30% { opacity: 1; transform: scaleY(1); }
    45% { transform: scaleY(0.82) scaleX(-1); }
    60% { transform: scaleY(1); }
    80% { opacity: 1; transform: scaleY(0.9) scaleX(-1); }
    100% { opacity: 0; transform: scaleY(1.1); }
}

/* Hielo: cristales que brotan. Cada uno tiene un lado claro y otro oscuro. */
.ff-hielo {
    background: linear-gradient(90deg, #fff 0 12%, #bfeaff 12% 18%, #5fb4f4 18% 28%, transparent 28% 34%,
                                #fff 34% 44%, #bfeaff 44% 50%, #5fb4f4 50% 66%, transparent 66% 72%,
                                #fff 72% 80%, #bfeaff 80% 84%, #5fb4f4 84% 94%);
    clip-path: polygon(8% 100%, 18% 40%, 28% 100%, 34% 100%, 50% 4%, 66% 100%, 72% 100%, 84% 30%, 94% 100%);
    transform-origin: 50% 100%;
    animation: ff-hielo 0.62s steps(5) 0.12s;
}

@keyframes ff-hielo {
    0% { opacity: 1; transform: scaleY(0.1); }
    30%, 75% { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1); }
}

/* Garras (la mascota): tres zarpazos. */
.ff-garra {
    background:
        linear-gradient(120deg, transparent 38%, #fff 39% 41%, transparent 42%),
        linear-gradient(120deg, transparent 48%, #fff 49% 51%, transparent 52%),
        linear-gradient(120deg, transparent 58%, #fff 59% 61%, transparent 62%);
    animation: ff-tajo 0.3s steps(4) 0.48s;
}

/* Los efectos de la mascota empiezan cuando ella salta. */
.ff-efecto.ff-de-mascota {
    animation-delay: 0.48s;
}

/* Rayo: cae desde arriba y toda la sala destella. */
.ff-rayo {
    inset: -60% 20% 20%;
    background: linear-gradient(180deg, #fff, #fff7a0 60%, #ffd23c);
    clip-path: polygon(52% 0, 68% 0, 46% 40%, 66% 40%, 30% 100%, 44% 52%, 26% 52%);
    animation: ff-rayo 0.5s steps(1) 0.12s;
}

@keyframes ff-rayo {
    0%, 30%, 60% { opacity: 1; }
    15%, 45% { opacity: 0.15; }
    100% { opacity: 0; }
}

.ff-escena.relampago::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    animation: ff-destello 0.45s steps(1) 0.12s;
}

@keyframes ff-destello {
    0%, 30% { opacity: 0.55; }
    15%, 45%, 100% { opacity: 0; }
}

/* --- Números y carteles --- */
.ff-numero {
    position: absolute;
    top: 28%;
    left: 50%;
    z-index: 4;
    font-family: var(--letra-titulo);
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    /* borde negro: la misma sombra corrida hacia los cuatro lados */
    text-shadow: -2px 0 #05030c, 2px 0 #05030c, 0 -2px #05030c, 0 2px #05030c, 0 4px 0 rgba(5, 3, 12, 0.6);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    animation: ff-saltar 1s steps(14) both;
}

.ff-numero.critico {
    font-size: 1.7rem;
    color: #ffe45a;
}

.ff-numero.cura {
    top: 6%;
    color: #86ffb0;
}

/* El número de lo que hace tu mascota (o tus escamas) va más abajo, para no taparse con el tuyo. */
.ff-numero.de-mascota {
    top: 56%;
    font-size: 1.05rem;
    color: #ffe2a8;
}

.ff-numero.pm {
    top: 6%;
    font-size: 0.95rem;
    color: #a8d8ff;
}

@keyframes ff-saltar {
    0% { opacity: 0; transform: translate(-50%, 0); }
    8% { opacity: 1; transform: translate(-50%, -16px); }
    22% { transform: translate(-50%, 0); }
    30% { transform: translate(-50%, -6px); }
    38%, 82% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); }
}

.ff-aviso {
    position: absolute;
    top: 6%;
    left: 50%;
    z-index: 4;
    padding: 1px 6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #1a1200;
    white-space: nowrap;
    background: #ffe45a;
    border: 1px solid #05030c;
    border-radius: 4px;
    opacity: 0;
    transform: translateX(-50%);
    animation: ff-anunciar 1.1s steps(1) 0.3s;
}

.ff-aviso.ff-resiste {
    color: #e8ecff;
    background: #4a5578;
}

/* Si el teléfono pide menos movimiento, los números no saltan: se quedan a la vista. */
@media (prefers-reduced-motion: reduce) {
    .ff-numero,
    .ff-aviso {
        opacity: 1;
        animation: none !important;
    }
}

/* El cartel de arriba: el nombre de lo que se usa. */
.ff-anuncio {
    position: absolute;
    top: 4%;
    left: 50%;
    z-index: 5;
    min-width: 48%;
    padding: 3px 12px;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
    animation: ff-anunciar 0.6s steps(1) both;
}

@keyframes ff-anunciar {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* --- Abajo: comandos a la izquierda, fichas a la derecha --- */
.ff-tablero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    align-items: stretch;
}

.ff-fichas {
    display: grid;
    gap: 6px;
}

.ff-comandos {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 6px 6px 6px 4px;
}

.ff-comando {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 4px;
    width: 100%;
    min-height: 44px;
    padding: 4px 6px 4px 2px;
    font-weight: 700;
    text-align: left;
    text-shadow: inherit;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.ff-comando:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
}

.ff-comando:disabled {
    color: #7c88c4;
    cursor: default;
}

.ff-comando-nombre {
    white-space: nowrap;
}

.ff-comando small {
    font-size: 0.68rem;
    text-align: right;
    white-space: nowrap;
}

/* Los hechizos van en dos renglones: el nombre y, debajo, lo que sabes de él. */
.ff-comando.ff-hechizo {
    grid-template-columns: 22px minmax(0, 1fr);
}

.ff-comando.ff-hechizo .ff-cursor {
    grid-row: 1 / 3;
}

.ff-comando.ff-hechizo small {
    grid-column: 2;
    text-align: left;
}

.ff-comando.ff-debil small {
    font-weight: 800;
    color: #ffe45a;
}

.ff-comando.ff-resiste small {
    color: #8c96c4;
}

/* La manito que señala: un dibujo de 16 × 11 puntos hecho con rectángulos. */
.ff-cursor {
    width: 22px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' shape-rendering='crispEdges'%3E%3Cpath fill='%2305030c' d='M3 0h6v2h6v1h1v3h-1v1h-5v1h-1v1h-1v2H2v-1H1V9H0V2h1V1h2z'/%3E%3Cpath fill='%23fff' d='M3 1h5v2h7v3h-6v1H8v1H7v2H3V9H2V2h1z'/%3E%3Cpath fill='%235b8cff' d='M1 3h2v5H1z'/%3E%3Cpath fill='%23b9c6ee' d='M4 8h3v1H4zM9 5h6v1H9z'/%3E%3C/svg%3E") center / contain no-repeat;
    image-rendering: pixelated;
    visibility: hidden;
}

.ff-comando.elegido:not(:disabled) .ff-cursor,
.ff-comando:active:not(:disabled) .ff-cursor {
    visibility: visible;
    animation: ff-senalar 0.8s steps(2) infinite;
}

@keyframes ff-senalar {
    50% { transform: translateX(-3px); }
}

/* Las fichas: nombre, barra de vida y datos. */
.ff-ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 8px;
    padding: 6px 9px;
    font-size: 0.82rem;
}

.ff-nombre {
    grid-column: 1 / -1;
    font-size: 0.9rem;
    overflow-wrap: anywhere;   /* un nombre largo pasa al renglón siguiente */
}

.ff-vida {
    height: 7px;
    overflow: hidden;
    background: #05072a;
    border: 1px solid #060a3a;
    border-radius: 3px;
}

.ff-vida i {
    display: block;
    height: 100%;
    background: linear-gradient(180deg, #ff9aa8, #e11d48);
    transition: width 0.3s steps(6) 0.3s;
}

.ff-ficha-heroe .ff-vida {
    grid-column: 1 / -1;
}

.ff-ficha-heroe .ff-vida i {
    background: linear-gradient(180deg, #a8ffd0, #10b981);
    transition-delay: 0.9s;
}

.ff-cifras {
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: #d7deff;
}

.ff-intencion,
.ff-sabes {
    grid-column: 1 / -1;
    font-size: 0.76rem;
}

.ff-intencion {
    color: #ffd9b0;
}

.ff-sabes {
    color: #b9c6ff;
}

.ff-datos {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 10px;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.ff-datos dt {
    font-size: 0.74rem;
    color: #8fd0ff;
}

.ff-datos dd {
    text-align: right;
}

/* Con poca vida, tu nombre y tu vida se ponen amarillos; sin vida, rojos. */
.ff-ficha-heroe.grave .ff-nombre,
.ff-ficha-heroe.grave dd {
    color: #ffe45a;
}

.ff-ficha-heroe.ko .ff-nombre,
.ff-ficha-heroe.ko dd {
    color: #ff7a8a;
}

/* La ventana del botín (al vencer) y la del final. */
.ff-botin {
    display: grid;
    gap: 2px;
}

.ff-botin.tras-golpe {
    animation: ff-aparecer 0.25s steps(3) 1.5s backwards;
}

@keyframes ff-aparecer {
    from { opacity: 0; transform: translateY(8px); }
}

.ff-botin .ff-comando {
    grid-template-columns: 22px minmax(0, 1fr) auto;
}

.ff-botin .ff-comando small {
    white-space: normal;
}

.ff-escena-final {
    aspect-ratio: 192 / 96;
}

.ff-escena-final .ff-heroe {
    left: 50%;
}

/* --- El bestiario --- */
.ff-bestiario {
    display: grid;
    gap: 6px;
}

.ff-zona-titulo {
    margin: 10px 0 0;
    font-family: var(--letra-titulo);
    font-size: 0.95rem;
}

.ff-zona-titulo small,
.ff-zona-texto {
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--texto-suave);
}

.ff-zona-texto {
    margin: 0 0 2px;
}

.ff-criatura {
    --px: 1px;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.ff-criatura p {
    margin: 3px 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #dfe5ff;
}

.ff-criatura small {
    display: block;
}

.ff-retrato {
    display: grid;
    place-items: center;
    height: 84px;
}

.ff-retrato .ff-sprite {
    width: auto;
    max-width: 84px;
    max-height: 84px;
}

/* Las que todavía no te cruzaste: solo su sombra. */
.ff-criatura.desconocida .ff-sprite {
    filter: brightness(0);
    opacity: 0.55;
}

.ff-elementos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ff-elemento {
    padding: 1px 6px;
    font-size: 0.72rem;
    color: #b9c6ff;
    background: rgba(5, 7, 42, 0.6);
    border-radius: var(--esquina);
}

.ff-elemento.ff-debil {
    font-weight: 800;
    color: #ffe45a;
}

.ff-elemento.ff-resiste {
    color: #8c96c4;
}


/* ===== Celebraciones y avisos ===== */
.celebracion {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5, 3, 12, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    animation: aparecer 0.3s ease-out;
}

.celebracion-caja {
    width: min(340px, 100%);
    padding: 28px 24px;
    text-align: center;
    background: linear-gradient(180deg, var(--panel-claro), var(--panel));
    border: 1px solid rgba(251, 191, 36, 0.5);
    border-radius: var(--esquina);
    box-shadow: 0 0 50px rgba(251, 191, 36, 0.3);
    animation: entrar-celebracion 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.celebracion-caja.entrar {
    animation: entrar-celebracion 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.celebracion-icono {
    font-size: 3rem;
    line-height: 1.2;
    animation: flotar-icono 2s ease-in-out infinite;
}

.celebracion .etiqueta {
    margin-top: 6px;
    color: var(--oro);
}

.celebracion-titulo {
    margin-top: 6px;
    font-family: var(--letra-titulo);
    font-size: 1.6rem;
    font-weight: 800;
    overflow-wrap: anywhere;
    background: linear-gradient(180deg, #fff3c4, var(--oro));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.celebracion-detalle {
    margin-top: 6px;
    color: var(--texto-suave);
}

.aviso {
    position: fixed;
    right: 16px;
    bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 14px);
    left: 16px;
    z-index: 15;
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 10px 18px;
    font-weight: 600;
    background: var(--panel-claro);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.aviso.entrar {
    animation: subir-aviso 0.3s ease-out;
}

/* Aviso de versión nueva: se queda hasta que tocas "Actualizar" */
.actualizacion {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 10px);
    right: 12px;
    left: 12px;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
    padding: 10px 10px 10px 16px;
    font-weight: 600;
    background: var(--panel-claro);
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-radius: var(--esquina);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    animation: bajar 0.3s ease-out;
}


/* ===== Animaciones ===== */
@keyframes pulso {
    40% { transform: scale(1.4); }
}

@keyframes brillo {
    0% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
}

@keyframes destello {
    from { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
    to { box-shadow: 0 0 0 14px rgba(52, 211, 153, 0); }
}

@keyframes destello-rojo {
    0% { filter: brightness(2.2); }
    100% { filter: brightness(1); }
}

@keyframes rebote {
    40% { transform: scale(1.18); }
}

@keyframes dibujar-check {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

@keyframes flotar {
    0% { opacity: 0; transform: translateY(-50%) scale(0.8); }
    15% { opacity: 1; transform: translateY(-60%) scale(1.1); }
    100% { opacity: 0; transform: translateY(-230%) scale(1); }
}

@keyframes sacudir {
    15% { transform: translateX(-6px) rotate(-6deg); }
    35% { transform: translateX(6px) rotate(5deg); }
    55% { transform: translateX(-4px) rotate(-3deg); }
    75% { transform: translateX(3px) rotate(2deg); }
}

@keyframes aparecer {
    from { opacity: 0; }
}

@keyframes bajar {
    from { opacity: 0; transform: translateY(-16px); }
}

@keyframes subir-aviso {
    from { opacity: 0; transform: translateY(12px); }
}

@keyframes entrar-celebracion {
    from { opacity: 0; transform: scale(0.5); }
}

@keyframes flotar-icono {
    50% { transform: translateY(-6px); }
}

/* ===== Vida del héroe (v16) ===== */
/* El color de la barra dice cómo estás: verde en plena forma, ámbar bien, rojo herido, gris caído. */
.salud-forma  { --color-salud: var(--verde); }
.salud-bien   { --color-salud: var(--oro); }
.salud-herido { --color-salud: var(--rojo); }
.salud-caido  { --color-salud: #6b6488; }

.barra-salud {
    display: block;   /* también se usa con <span> dentro de botones */
    height: 8px;
    margin: 4px 0 2px;
}

.barra-salud .barra-relleno {
    display: block;
    background: var(--color-salud, var(--rojo));
    box-shadow: 0 0 8px var(--color-salud, var(--rojo));
}

/* En la cabecera las dos barras (XP y vida) van juntas y más finas. */
.cabecera .barra-xp {
    height: 7px;
    margin: 4px 0 0;
}

.cabecera .barra-salud {
    height: 5px;
    margin: 3px 0 2px;
}

.cabecera .barra-armadura {
    height: 4px;
    margin: 2px 0;
}

.cab-datos {
    position: relative;   /* para el "+4 ❤️" que flota */
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.cab-vida {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cab-datos .flotante {
    top: -16px;
    right: 0;
    font-size: 0.8rem;
}

.heroe-vida,
.ficha-vida {
    display: grid;
    gap: 2px;
}

.ficha-vida {
    width: min(320px, 100%);
    text-align: left;
}

.vida-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 8px;
}

.vida-numero {
    font-family: var(--letra-titulo);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.vida-estado {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-salud);
}

.vida-menos {
    color: var(--rojo);
}

.aviso-descanso {
    margin-top: 12px;
    background: rgba(34, 211, 238, 0.08);
    border-color: rgba(34, 211, 238, 0.35);
}

.aviso-caido {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 12px 14px;
    font-size: 0.85rem;
    background: rgba(107, 100, 136, 0.16);
    border: 1px solid rgba(251, 113, 133, 0.45);
    border-radius: var(--esquina);
}

.aviso-caido > b {
    color: var(--rojo);
}

.pocion-icono {
    flex-shrink: 0;
    width: 48px;
    font-size: 1.8rem;
    text-align: center;
}

.celda.descanso {
    box-shadow: inset 0 0 0 2px rgba(34, 211, 238, 0.6);
}

.campo-fecha {
    display: grid;
    flex: 1;
    gap: 4px;
}


/* ===== Atributos propios (v17) ===== */
.titulo-propios {
    margin-top: 18px;
}

.atributo-propio {
    display: grid;
    gap: 2px;
    cursor: pointer;
}

/* Los nombres propios pueden ser largos: que bajen de línea dentro de su píldora,
   cortando con guion («Programa-ción») donde el navegador sabe hacerlo. */
.pildora small {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Elegir color: círculos de muestra (el primero, «Auto», usa el color de su atributo base). */
.opciones-colores {
    grid-template-columns: repeat(9, 1fr);
    gap: 6px;
}

.pildora-color span {
    display: grid;
    place-items: center;
    height: 34px;
    padding: 0;
    font-size: 0.66rem;
    background: var(--muestra, var(--hundido));
    border-radius: var(--esquina);
}

.pildora-color input:checked + span {
    border: 2px solid #fff;
    background: var(--muestra, rgba(139, 92, 246, 0.14));
}


/* ===== Diario (v18) ===== */
/* 5 ánimos en una fila. */
.opciones-5 {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.diario textarea {
    min-height: 84px;
}

/* El mes de ánimo: 7 columnas (L a D); cada día con el color de cómo te fue. */
.mes-navegar {
    justify-content: space-between;
}

.mes-navegar .titulo-juego {
    text-transform: capitalize;
}

.mes-navegar .boton-icono {
    font-size: 1.7rem;
    line-height: 1;
    color: var(--texto);
}

.mes-navegar .boton-icono:disabled {
    opacity: 0.25;
}

.mes-animo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.mes-letra {
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    color: var(--texto-suave);
}

.dia-animo {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-height: 36px;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--texto-suave);
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    cursor: pointer;
}

.dia-animo.hueco {
    visibility: hidden;
}

.dia-animo.futuro {
    opacity: 0.35;
    cursor: default;
}

.dia-animo.escrito {
    color: var(--texto);
    border-color: rgba(139, 92, 246, 0.6);
}

.dia-animo.con-animo {
    color: #120d22;
    background: var(--color-animo);
    border-color: var(--color-animo);
}

.dia-animo.hoy {
    outline: 1px solid rgba(255, 255, 255, 0.6);
    outline-offset: 1px;
}

.dia-animo.elegido {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

#diario-detalle {
    margin-top: 12px;
}

/* Una entrada del diario, con una franja del color de su ánimo. */
.entrada {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--color-animo, var(--borde));
    border-radius: var(--esquina);
}

.entrada-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
}

.entrada-animo {
    font-size: 1.3rem;
}

.entrada-pregunta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--texto-suave);
}

.entrada-texto {
    margin: 0;
    white-space: pre-wrap;   /* respeta los saltos de línea que escribiste */
    overflow-wrap: anywhere;
}

.entrada-gratitud {
    margin: 0;
    font-size: 0.9rem;
    color: #fde68a;
}

.recuerdo-titulo {
    margin: 14px 0 0;
}

.diario-buscar {
    margin-top: 10px;
}

.filtros-animo {
    margin: 10px 0 4px;
}

.filtros-animo .chip {
    min-width: 44px;
    min-height: 36px;
    cursor: pointer;
}

.chip-activo {
    color: var(--texto);
    background: rgba(139, 92, 246, 0.25);
    border-color: var(--violeta);
}


/* ===== El Tratado de la Voluntad (v19) ===== */
/* En Hoy: el día de tu pacto (o la invitación a sellarlo). */
.pacto-linea {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    font: inherit;
    text-align: left;
    color: var(--texto);
    background: linear-gradient(135deg, rgba(122, 20, 20, 0.22), rgba(21, 16, 42, 0.9));
    border: 1px solid rgba(200, 50, 58, 0.45);
    border-radius: var(--esquina);
    cursor: pointer;
}

.pacto-linea > span:last-child {
    display: grid;
    gap: 2px;
}

.pacto-linea-icono {
    font-size: 1.6rem;
}

.pacto-cita {
    font-style: italic;
    color: #e9d8b4;
}

.pacto-autor {
    font-style: normal;
    color: var(--texto-suave);
}

.pacto-linea.alerta {
    border-color: var(--rojo);
    box-shadow: 0 0 14px rgba(251, 113, 133, 0.35);
}

.pacto-linea.alerta .pacto-cita {
    font-style: normal;
    color: #fecdd3;
}

.alerta-pacto {
    color: #fecdd3;
}

/* El pergamino: papel viejo, tinta oscura y letra con serifa (las del iPhone, sin descargar nada). */
.pergamino {
    color-scheme: light;   /* la casilla y los campos, en claro (combinan con el papel) */
    --tinta: #2b1d14;
    --tinta-suave: #5f4a38;
    --sangre: #7a1414;
    position: relative;
    margin-top: 12px;
    padding: 30px 22px 26px;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--tinta);
    background:
        radial-gradient(ellipse at 50% 20%, rgba(255, 252, 240, 0.55), transparent 60%),
        radial-gradient(ellipse at 50% 50%, #efe2c4 0%, #e3cfa6 65%, #cdb486 100%);
    border: 1px solid #b89b6a;
    border-radius: 6px;
    box-shadow: inset 0 0 50px rgba(110, 72, 28, 0.35), 0 14px 34px rgba(0, 0, 0, 0.5);
}

.pergamino p {
    margin: 0 0 12px;
}

.pergamino-cabecera {
    text-align: center;
}

.pergamino-sobre {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--sangre);
}

.pergamino h2 {
    margin: 4px 0;
    font-family: inherit;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta);
}

.pergamino-entre {
    font-style: italic;
    color: var(--tinta-suave);
}

.pergamino .epigrafe,
.pergamino .cita-final {
    margin: 18px 0;
    font-style: italic;
    text-align: center;
    color: var(--tinta-suave);
}

.pergamino .epigrafe span,
.pergamino .cita-final span,
.cita-pacto span {
    font-style: normal;
    font-size: 0.85rem;
}

/* La primera letra del preámbulo, grande y roja, como en los libros antiguos. */
.preambulo p:first-child::first-letter {
    float: left;
    margin: 4px 8px 0 0;
    font-size: 3.2em;
    line-height: 0.8;
    font-weight: 700;
    color: var(--sangre);
}

.articulo {
    margin-top: 18px;
}

.articulo h3 {
    margin: 0 0 6px;
    font-family: inherit;
    font-size: 1.05rem;
    font-variant: small-caps;
    letter-spacing: 0.04em;
    color: var(--tinta);
}

.articulo h3 span {
    display: block;
    font-size: 0.75rem;
    font-variant: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sangre);
}

.cita-pacto {
    padding-left: 12px;
    font-style: italic;
    color: var(--tinta-suave);
    border-left: 2px solid rgba(122, 20, 20, 0.45);
}

.pergamino .razon {
    color: var(--sangre);
    overflow-wrap: anywhere;
}

.pergamino .cierre {
    margin-top: 22px;
    font-style: italic;
}

/* La firma ya sellada. */
.firma-y-sello {
    display: flex;
    align-items: center;
    gap: 14px;
}

.firma-bloque {
    flex: 1;
    min-width: 0;
}

.firma-dibujo {
    display: block;
    width: 100%;
    height: auto;
}

.linea-firma {
    margin: 0;
    padding-top: 4px;
    font-style: italic;
    text-align: center;
    border-top: 1px solid var(--tinta-suave);
}

.sello-lacre {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    filter: drop-shadow(0 3px 4px rgba(60, 20, 10, 0.45));
}

.fecha-pacto {
    margin-top: 10px;
    font-size: 0.85rem;
    text-align: center;
    color: var(--tinta-suave);
}

/* Firmar: los campos se ven como escritos sobre el papel. */
.firmar-pacto {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(95, 74, 56, 0.5);
}

.firmar-pacto label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.firmar-pacto .opcional {
    font-weight: 400;
    font-style: italic;
    color: var(--tinta-suave);
}

.firmar-pacto input[type="text"],
.firmar-pacto textarea {
    font-family: inherit;
    color: var(--tinta);
    background: rgba(255, 250, 235, 0.55);
    border-color: rgba(95, 74, 56, 0.5);
}

.firmar-pacto ::placeholder {
    color: #8c7660;
}

.firmar-instruccion {
    margin: 0 !important;
    font-weight: 700;
}

.lienzo-firma {
    display: block;
    width: 100%;
    height: 150px;
    background: rgba(255, 250, 235, 0.45);
    border: 1px dashed var(--tinta-suave);
    border-radius: 8px;
    touch-action: none;   /* que el dedo firme en vez de mover la pantalla */
    cursor: crosshair;
}

.boton-texto {
    justify-self: center;
    min-height: 44px;
    padding: 0 12px;
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    color: var(--tinta-suave);
    background: none;
    border: none;
    cursor: pointer;
}

.jurar {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400 !important;
    font-style: italic;
}

.jurar input {
    width: 22px;
    height: 22px;
    margin-top: 3px;
    accent-color: var(--sangre);
}

.boton-sangre {
    color: #fff5f5;
    background: linear-gradient(180deg, #a3242b, #6e0f14);
    border: 1px solid #4a080c;
    box-shadow: 0 6px 18px rgba(110, 15, 20, 0.45);
}


/* ===== «Fallé» (v20) ===== */
.boton-fallar {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f19aa8;
}

.mision.fallada {
    background: rgba(251, 113, 133, 0.06);
    border-color: rgba(251, 113, 133, 0.4);
    border-left-color: var(--color-dificultad);
}

.mision.fallada .mision-nombre {
    color: var(--texto-suave);
}

.boton-check.boton-fallada {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    background: #be4b5c;
    border-color: #be4b5c;
}

.falla-motivo {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #f19aa8;
}

.ficha-fallas {
    color: #f19aa8;
}

.falla-pacto {
    font-style: italic;
}


/* ===== Tu libro (v20) ===== */
.boton-libro {
    margin: 12px 0;
}

.boton-libro:disabled {
    opacity: 0.5;
    cursor: default;
}

.libro-pagina {
    min-height: 60vh;
    touch-action: pan-y;   /* deslizar de lado pasa la página; de arriba abajo, el scroll normal */
}

.portada {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding-top: 8vh;
    text-align: center;
}

.portada h2 {
    font-size: 1.7rem;
    line-height: 1.25;
}

.portada-datos {
    color: var(--tinta-suave);
}

.portada-botones {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
}

.capitulo-titulo {
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}

.capitulo-texto {
    margin-top: 18px;
}

.capitulo-texto > p:first-child::first-letter {
    float: left;
    margin: 4px 8px 0 0;
    font-size: 3.2em;
    line-height: 0.8;
    font-weight: 700;
    color: var(--sangre);
}

.capitulo-cita {
    margin: 0 0 14px;
    padding: 6px 0 6px 14px;
    font-style: italic;
    white-space: pre-wrap;   /* respeta los saltos de línea de tu diario */
    overflow-wrap: anywhere;
    color: var(--sangre);
    border-left: 2px solid rgba(122, 20, 20, 0.45);
}

.numero-pagina {
    margin-top: 22px !important;
    font-size: 0.85rem;
    text-align: center;
    color: var(--tinta-suave);
}

.libro-navegar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.libro-fin {
    font-style: italic;
    text-align: center;
    color: var(--texto-suave);
}

.indice-mes {
    margin: 18px 0 6px;
    font-family: inherit;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sangre);
}

.indice {
    margin: 0;
    padding: 0;
    list-style: none;
}

.indice button {
    display: grid;
    grid-template-columns: 3.2em 1fr auto;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 2px;
    font: inherit;
    text-align: left;
    color: var(--tinta);
    background: none;
    border: none;
    border-bottom: 1px dotted rgba(95, 74, 56, 0.45);
    cursor: pointer;
}

.indice-numero {
    font-weight: 700;
    color: var(--sangre);
}

.indice-fecha {
    font-size: 0.85rem;
    color: var(--tinta-suave);
}


/* ===== Notificaciones (v21) ===== */
.aviso-alerta {
    margin-top: 12px;
    background: rgba(251, 113, 133, 0.08);
    border-color: rgba(251, 113, 133, 0.45);
}

.guia-avisos ol {
    display: grid;
    gap: 8px;
    margin: 10px 0;
    padding-left: 20px;
    font-size: 0.88rem;
}


/* ===== Más interactiva (v22) ===== */

/* El Maestro en Hoy */
.maestro-tarjeta {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.18), rgba(21, 16, 42, 0.95));
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: var(--radio);
}

.maestro-retrato {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 2px solid rgba(192, 132, 252, 0.6);
    border-radius: 50%;
}

.maestro-retrato svg {
    width: 100%;
    height: 100%;
}

.maestro-habla {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.maestro-texto {
    margin: 0;
    font-style: italic;
    line-height: 1.45;
}

.maestro-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Las ventanas a pantalla completa (Maestro, ritual, golpe) */
.capa-oscura {
    position: fixed;
    inset: 0;
    z-index: 14;   /* debajo de las celebraciones (20) y del PIN (30) */
    display: grid;
    place-items: center;
    padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
    overflow-y: auto;
    background: rgba(6, 4, 14, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.capa-oscura[hidden] {
    display: none;
}

.maestro-dialogo,
.ritual-caja {
    display: grid;
    gap: 10px;
    width: min(460px, 100%);
    padding: 18px;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.maestro-dialogo-retrato {
    justify-self: center;
    width: 130px;
}

.maestro-burbuja {
    margin: 0;
    padding: 14px;
    font-size: 1.02rem;
    font-style: italic;
    line-height: 1.5;
    background: var(--hundido);
    border: 1px solid rgba(192, 132, 252, 0.4);
    border-radius: var(--esquina);
}

.maestro-opciones {
    display: grid;
    gap: 8px;
}

.maestro-opcion {
    text-align: left;
}

.maestro-cerrar {
    justify-self: center;
    color: var(--texto-suave);
}

/* Evento del día */
.evento-dia {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 0.88rem;
    background: rgba(251, 191, 36, 0.07);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: var(--esquina);
}

.evento-dia .etiqueta {
    display: block;
}

.evento-icono {
    font-size: 1.6rem;
}

/* El cofre del día */
.cofre-linea {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 0.88rem;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.cofre-cerrado {
    color: var(--texto-suave);
}

.cofre-tarjeta {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    font: inherit;
    text-align: left;
    color: var(--texto);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(21, 16, 42, 0.95));
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-radius: var(--radio);
    cursor: pointer;
}

.cofre-tarjeta > span {
    display: grid;
    gap: 2px;
}

.cofre-svg {
    flex: 0 0 76px;
    width: 76px;
    overflow: visible;
}

.cofre-brillo {
    opacity: 0;
}

.cofre-tapa {
    transform-origin: 14px 50px;
    transform-box: view-box;
    transition: transform 0.4s ease-out 0.55s;
}

.cofre-tarjeta:not(.abriendo) .cofre-svg {
    animation: cofre-espera 2.4s ease-in-out infinite;
}

.cofre-tarjeta.abriendo .cofre-svg {
    animation: cofre-tiembla 0.55s ease-in-out;
}

.cofre-tarjeta.abriendo .cofre-tapa {
    transform: rotate(-38deg);
}

.cofre-tarjeta.abriendo .cofre-brillo {
    opacity: 1;
    transition: opacity 0.3s 0.6s;
}

@keyframes cofre-espera {
    0%, 85%, 100% { transform: none; }
    90% { transform: rotate(-4deg); }
    95% { transform: rotate(4deg); }
}

@keyframes cofre-tiembla {
    20% { transform: translateX(-4px) rotate(-3deg); }
    40% { transform: translateX(4px) rotate(3deg); }
    60% { transform: translateX(-3px) rotate(-2deg); }
    80% { transform: translateX(3px) rotate(2deg); }
}

/* Desafío relámpago */
.relampago {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    font-size: 0.9rem;
    background: rgba(34, 211, 238, 0.07);
    border: 1px solid rgba(34, 211, 238, 0.45);
    border-radius: var(--radio);
}

.relampago p {
    margin: 0;
}

.relampago-reloj {
    font-family: var(--letra-titulo);
    font-weight: 700;
    color: var(--cian);
    font-variant-numeric: tabular-nums;
}

/* La misión clave */
.mision.clave {
    border-color: rgba(251, 191, 36, 0.65);
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.18);
}

.clave-insignia {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--oro);
}

/* El ritual de la noche */
.ritual-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ritual-contador {
    margin: 0;
    font-size: 0.85rem;
    color: var(--texto-suave);
    text-align: center;
}

.ritual-carta {
    display: grid;
    gap: 6px;
    min-height: 150px;
    align-content: center;
    padding: 20px;
    text-align: center;
    background: linear-gradient(180deg, var(--panel-claro), var(--hundido));
    border: 1px solid var(--borde);
    border-top: 4px solid var(--color-dificultad);
    border-radius: var(--esquina);
    touch-action: pan-y;
    transition: transform 0.2s, border-color 0.2s;
    cursor: grab;
}

.ritual-carta h3 {
    margin: 0;
    font-size: 1.35rem;
}

.ritual-carta.hacia-si {
    border-color: var(--verde);
}

.ritual-carta.hacia-no {
    border-color: var(--rojo);
}

.ritual-botones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ritual-motivos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ritual-nota {
    text-align: center;
}

.ritual-resumen {
    margin: 0;
    text-align: center;
}

.ritual-capitulo {
    max-height: 46vh;
    overflow-y: auto;
    padding: 18px 16px;
}

/* El golpe con timing */
.golpe-caja {
    display: grid;
    gap: 10px;
    justify-items: center;
    width: min(380px, 100%);
    text-align: center;
}

.golpe-retrato {
    width: 150px;
    margin: 0;
}

.golpe-barra {
    position: relative;
    width: 100%;
    height: 22px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.golpe-zona {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 42%;
    width: 16%;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.7), rgba(251, 191, 36, 0.2));
    border-radius: 6px;
}

.golpe-marca {
    position: absolute;
    top: -5px;
    left: 0;
    width: 6px;
    height: 30px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 10px #fff;
    animation: golpe-vaiven 1.3s ease-in-out infinite alternate;
}

.golpe-barra.detenida .golpe-marca {
    animation-play-state: paused;
}

@keyframes golpe-vaiven {
    from { left: 0; }
    to { left: calc(100% - 6px); }
}

.golpe-resultado {
    margin: 0;
    font-family: var(--letra-titulo);
    font-weight: 800;
    color: var(--texto-suave);
}

.golpe-resultado.critico {
    font-size: 1.15rem;
    color: var(--oro);
    text-shadow: 0 0 14px rgba(251, 191, 36, 0.7);
}

/* El mapa del reino (v26) */
.mapa-navegar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: center;
}

.mapa-navegar .boton-icono {
    font-size: 1.7rem;
    color: var(--texto);
}

.mapa-navegar .boton-icono:disabled {
    opacity: 0.25;
}

.mapa-region {
    margin: 2px 0 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 1.2rem;
}

.mapa-lema {
    margin-top: 2px;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 0.86rem;
    font-style: italic;
    color: var(--texto-suave);
}

/* La franja con las 6 regiones: ✓ libre, el número de señores vencidos o 🔒. */
.reino-franja {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 10px;
}

.reino-region {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1px;
    min-height: 54px;
    padding: 6px 2px 4px;
    font-size: 1.15rem;
    line-height: 1.1;
    background: var(--hundido);
    border: 1.5px solid var(--borde);
    border-radius: var(--esquina);
    cursor: pointer;
}

.reino-region small {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 0.72rem;
    color: var(--texto-suave);
}

.reino-region i {
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
    color: var(--texto-suave);
}

.reino-region:disabled {
    opacity: 0.4;
    cursor: default;
}

.reino-region.libre {
    border-color: rgba(251, 191, 36, 0.7);
}

.reino-region.libre i {
    color: var(--oro);
}

.reino-region.actual {
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.8), 0 0 14px rgba(139, 92, 246, 0.45);
}

.reino-region.vista {
    background: var(--panel-claro);
    border-color: var(--violeta);
}

/* El mapa en pixel art, con tu héroe, tu mascota y las guaridas encima. */
.mapa-pixel {
    position: relative;
    margin: 12px 0;
    aspect-ratio: 192 / 416;
    overflow: hidden;
    background: #14101e;
    border: 2px solid #f1f3ff;
    border-radius: var(--esquina);
    box-shadow: 0 0 0 1px #060a3a, 0 8px 24px rgba(0, 0, 0, 0.4);
}

.mapa-imagen {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 0.25s steps(3);
}

.mapa-pixel.listo .mapa-imagen {
    opacity: 1;
}

.mapa-heroe,
.mapa-mascota {
    position: absolute;
    z-index: 2;
    image-rendering: pixelated;
    pointer-events: none;
    transform: translate(-50%, -92%);
    animation: mapa-paso 0.9s steps(1) infinite;
}

.mapa-heroe {
    width: calc(100% * 21 / 192);
}

.mapa-mascota {
    width: calc(100% * 20 / 192);
    animation-delay: -0.45s;
}

/* Sin imagen todavía: que no se vea el ícono de imagen rota. */
.mapa-heroe:not([src]),
.mapa-mascota:not([src]) {
    visibility: hidden;
}

@keyframes mapa-paso {
    50% { transform: translate(-50%, calc(-92% - 2px)); }
}

/* Un botón invisible sobre cada guarida: al tocarlo, se ve la ficha de su señor. */
.mapa-guarida {
    position: absolute;
    z-index: 3;
    width: 14%;
    aspect-ratio: 1;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    transform: translate(-50%, -70%);
    cursor: pointer;
}

.mapa-guarida:active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

/* Las fichas de los señores de la región. */
.senor {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    scroll-margin-top: calc(var(--alto-cabecera, 0px) + 12px);
}

.senor.actual {
    border-color: rgba(251, 113, 133, 0.6);
}

.senor.libre {
    border-color: rgba(251, 191, 36, 0.45);
}

.senor.resaltado {
    animation: senor-resaltado 1.2s ease-out;
}

@keyframes senor-resaltado {
    0%, 40% { box-shadow: 0 0 0 2px var(--oro), 0 0 18px rgba(251, 191, 36, 0.5); }
    100% { box-shadow: none; }
}

.senor-retrato.retrato.mini {
    flex: 0 0 52px;
    width: 52px;
}

.senor.lejano .senor-retrato img {
    filter: brightness(0.55) saturate(0.6);
}

.senor-memorial {
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    height: 52px;
    font-size: 1.8rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

/* La Crónica: un pergamino con letra de libro. */
.cronica {
    margin: 14px 0;
    padding: 18px 16px 10px;
    color: #2b1d10;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(255, 252, 240, 0.55), transparent 60%),
        linear-gradient(180deg, #efe2c4, #e2cda2);
    border: 1px solid #b89b6a;
    border-radius: var(--esquina);
    box-shadow: inset 0 0 40px rgba(110, 72, 28, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
    color-scheme: light;
}

.cronica-titulo {
    margin: 0;
    font-size: 1.35rem;
    text-align: center;
    letter-spacing: 0.04em;
    color: #6a1a14;
}

.cronica-sub {
    margin: 2px 0 10px;
    font-size: 0.82rem;
    font-style: italic;
    text-align: center;
    color: #6b5236;
}

.capitulo {
    padding: 8px 0;
    border-top: 1px solid rgba(107, 79, 46, 0.35);
}

.capitulo summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-height: 44px;
    padding: 6px 0;
    cursor: pointer;
    list-style: none;
}

.capitulo summary::-webkit-details-marker {
    display: none;
}

.capitulo summary::after {
    content: "▾";
    margin-left: auto;
    color: #8f1d1d;
}

.capitulo[open] summary::after {
    content: "▴";
}

.capitulo-numero {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8f1d1d;
}

.capitulo b {
    font-size: 1.02rem;
}

.capitulo p {
    margin: 0 0 9px;
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: justify;
    hyphens: auto;
}

/* El párrafo de cada señor que cae, y el de los que todavía gobiernan. */
.capitulo .parrafo-caida {
    padding-left: 10px;
    border-left: 3px solid #8f1d1d;
}

.capitulo .parrafo-pendiente {
    font-size: 0.86rem;
    font-style: italic;
    color: #6b5236;
}

.capitulo.bloqueado {
    display: grid;
    gap: 1px;
    padding: 10px 0;
    opacity: 0.6;
}

.capitulo.bloqueado small {
    font-size: 0.8rem;
    font-style: italic;
}

/* El dragón */
.mascota-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.mascota-frase {
    min-height: 2.6em;
    font-style: italic;
}

.mascota-dibujo.acariciado {
    animation: acariciado 0.7s ease-out;
}

@keyframes acariciado {
    30% { transform: scale(1.08) rotate(-3deg); }
    60% { transform: scale(0.97) rotate(2deg); }
}


/* Si el iPhone tiene activado "Reducir movimiento", apagamos animaciones */
/* ===== Armadura y poder del equipo (v24) ===== */
/* La barra entera son 100 puntos: en gris, tu máximo (tus objetos de protección); en azul acero, lo que te queda. */
.barra-armadura {
    position: relative;
    display: block;
    height: 6px;
    margin: 3px 0 2px;
}

.barra-armadura .barra-capacidad {
    position: absolute;
    inset: 0 auto 0 0;
    background: rgba(148, 163, 184, 0.28);
    border-radius: inherit;
}

.barra-armadura .barra-relleno {
    display: block;
    background: linear-gradient(90deg, #64748b, #a5b4fc);
    box-shadow: 0 0 8px rgba(165, 180, 252, 0.55);
}

.armadura-numero {
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: #c7d2fe;
}

.armadura-efecto {
    font-size: 0.74rem;
    font-weight: 600;
}

.armadura-efecto.mejor { color: var(--verde); }
.armadura-efecto.peor  { color: var(--rojo); }

/* Personaje → Equipamiento: los 4 números de tu equipo */
.poder-equipo {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
}

.poder-equipo span {
    display: grid;
    gap: 2px;
    padding: 8px 4px;
    text-align: center;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.poder-equipo small {
    font-size: 0.66rem;
    line-height: 1.25;
    color: var(--texto-suave);
}

.poder-objeto {
    font-weight: 700;
    color: #c7d2fe;
    white-space: nowrap;
}

.equipo-ventaja {
    color: #c7d2fe;
}

.robado {
    color: var(--rojo);
}

/* ===== El robo de vida: el jefe te golpea y se cura con lo que te quita ===== */
.robo-caja {
    display: grid;
    gap: 8px;
    justify-items: center;
    width: min(380px, 100%);
    padding: 16px;
    text-align: center;
    background: linear-gradient(180deg, rgba(76, 5, 25, 0.55), var(--panel) 55%);
    border: 1px solid rgba(251, 113, 133, 0.45);
    border-radius: var(--radio);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px -10px rgba(225, 29, 72, 0.5);
    animation: aparecer 0.25s ease-out;
}

.robo-escena {
    --robo-distancia: 150px;   /* lo que suben las gotas: del pecho del héroe al retrato del jefe */
    position: relative;
    display: grid;
    justify-items: center;
    gap: 26px;
    width: 100%;
    padding: 4px 0;
}

.robo-jefes {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.robo-jefe {
    position: relative;
    display: grid;
    gap: 4px;
    justify-items: center;
    width: 118px;
}

.robo-de-2 .robo-jefe { width: 104px; }
.robo-de-3 .robo-jefe { width: 92px; }
.robo-de-4 .robo-jefe { width: 76px; }

.robo-jefe .retrato {
    width: 100%;
    /* Embiste hacia abajo (hacia tu héroe) y, cuando le llega tu vida, brilla. */
    animation: robo-embestir 0.7s cubic-bezier(0.3, 0, 0.3, 1) 0.15s, robo-brillar 0.9s ease-out 1.6s;
}

.robo-jefe .barra {
    width: 100%;
    margin-top: 2px;
}

/* La vida del jefe sube de lo que tenía a lo que tiene ahora. */
.robo-vida {
    width: var(--despues);
    transition: none;
    animation: robo-llenar 0.9s ease-out 1.6s backwards;
}

.robo-heroe {
    position: relative;
    width: 124px;
}

.robo-avatar {
    animation: robo-herida 0.6s ease-out 0.45s;
}

.robo-avatar svg {
    display: block;
    width: 100%;
    height: auto;
}

/* El zarpazo: una línea de luz que cruza al héroe. */
.robo-tajo {
    position: absolute;
    top: 42%;
    left: -12%;
    width: 124%;
    height: 5px;
    background: linear-gradient(90deg, transparent, #fff 35%, #fb7185 65%, transparent);
    border-radius: var(--esquina);
    box-shadow: 0 0 14px #e11d48;
    transform: rotate(-28deg) scaleX(0);
    opacity: 0;
    animation: robo-zarpazo 0.4s ease-out 0.4s;
}

/* Las gotas de vida: nacen en el pecho del héroe y suben hasta el jefe. */
.robo-rio {
    position: absolute;
    bottom: 84px;
    left: 50%;
    width: 0;
    height: 0;
}

.robo-gota {
    position: absolute;
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 35% 35%, #fff, #fb7185 45%, #9f1239);
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(244, 63, 94, 0.8);
    opacity: 0;
    animation: robo-subir 1s cubic-bezier(0.4, 0, 0.6, 1) both;
}

.robo-numero {
    position: absolute;
    left: 50%;
    z-index: 3;
    font-family: var(--letra-titulo);
    font-size: 1.3rem;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.robo-menos {
    top: 6%;
    color: #fff;
    text-shadow: 0 0 8px #e11d48, 0 2px 0 #7f1d1d;
    animation: subir-dano 1.3s ease-out 0.5s;
}

.robo-mas {
    top: 22%;
    color: #bbf7d0;
    text-shadow: 0 0 8px #16a34a, 0 2px 0 #14532d;
    animation: subir-dano 1.4s ease-out 1.6s;
}

.robo-titulo {
    font-size: 1.05rem;
    line-height: 1.3;
}

.robo-armadura {
    display: grid;
    gap: 2px;
    width: min(260px, 100%);
    text-align: left;
}

@keyframes robo-embestir {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(26px) scale(1.07); }
}

@keyframes robo-brillar {
    0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 0 0 rgba(74, 222, 128, 0); }
    35% { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 26px 6px rgba(74, 222, 128, 0.75); }
}

@keyframes robo-llenar {
    from { width: var(--antes); }
}

@keyframes robo-herida {
    0%, 100% { transform: translateX(0); opacity: 1; }
    15% { transform: translateX(-8px); opacity: 0.45; }
    35% { transform: translateX(7px); opacity: 1; }
    55% { transform: translateX(-5px); opacity: 0.6; }
    75% { transform: translateX(3px); opacity: 1; }
}

@keyframes robo-zarpazo {
    0% { transform: rotate(-28deg) scaleX(0); opacity: 1; }
    60% { transform: rotate(-28deg) scaleX(1); opacity: 1; }
    100% { transform: rotate(-28deg) scaleX(1); opacity: 0; }
}

@keyframes robo-subir {
    0% { transform: translate(var(--x0), 0) scale(0.4); opacity: 0; }
    15% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(var(--x1), calc(-1 * var(--robo-distancia))) scale(1.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    /* (v88) La pantalla de carga se queda fuera: dura 4 s y su escena es lo que se quiere ver (ver «.carga» más abajo).
       (v89) Y las cinemáticas del reino (#cine): sin movimiento serían fotos fijas (el héroe no camina, la cámara no se mueve). */
    :not(.carga):not(.carga *):not(#cine):not(#cine *), :not(.carga):not(.carga *):not(#cine):not(#cine *)::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* La marca del golpe con timing es parte del juego: se mueve aunque se reduzca el movimiento.
   (v89) También tu héroe y tu mascota paseando por el mapa del reino. */
@media (prefers-reduced-motion: reduce) {
    .mapa-heroe,
    .mapa-mascota {
        animation-duration: 0.9s !important;
        animation-iteration-count: infinite !important;
    }

    .golpe-marca {
        animation-duration: 1.3s !important;
        animation-iteration-count: infinite !important;
    }
}


/* =====================================================================
   Orden y aspecto (v27): la app reorganizada.
   Va al final del archivo para que le gane a lo de antes cuando hace falta.
   ===================================================================== */

/* --- Más aire y un ritmo parejo entre las partes de cada pantalla --- */
.pantalla {
    gap: 18px;
}

/* Un grupo de cosas que van juntas (las misiones, las tareas…), sin marco propio. */
.bloque {
    display: grid;
    gap: 10px;
    min-width: 0;
}

/* Los paneles: un borde más suave y una línea de luz arriba, como un cristal. */
.panel {
    border-color: rgba(60, 48, 112, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.32);
}

.panel > .titulo-juego:first-child,
.panel > .titulo-seccion:first-child {
    margin-bottom: 8px;
}

.nota {
    line-height: 1.5;
}

/* --- La barra de pestañas: la elegida, con una pastilla de luz detrás del icono --- */
.pestana svg {
    box-sizing: content-box;
    padding: 3px 14px;
    border-radius: var(--esquina);
    transition: background 0.2s;
}

.pestana[aria-current="page"] svg {
    background: rgba(34, 211, 238, 0.14);
}

/* --- Las secciones de una pantalla larga: pegadas bajo la cabecera al bajar --- */
.selector-secciones {
    position: sticky;
    top: calc(var(--alto-cabecera, 72px) - 1px);
    z-index: 4;
    background: rgba(13, 10, 28, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(60, 48, 112, 0.9);
    border-radius: var(--esquina);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.selector-secciones button {
    min-height: 40px;
    padding: 6px 4px;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* El encabezado de las pantallas sin pestaña (con «‹ volver»). */
.encabezado .titulo-juego {
    font-size: 1.2rem;
}

.enlace-en-linea {
    display: inline;
    padding: 0;
    font-size: inherit;
    color: var(--cian);
}

/* --- Hoy: tu héroe en pequeño, con sus rivales --- */
.heroe-hoy {
    display: grid;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.heroe-hoy .heroe {
    padding: 12px 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.heroe-hoy .heroe-avatar {
    flex-basis: 92px;
    background: radial-gradient(circle at 50% 40%, rgba(139, 92, 246, 0.22), transparent 70%);
}

.chips-heroe {
    gap: 6px;
    margin: 2px 0;
}

.chips-heroe .chip {
    padding: 3px 9px;
    font-size: 0.78rem;
}

/* Los 4 rivales: el jefe de cada campaña con su vida. */
.rivales {
    display: grid;
    grid-template-columns: auto repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px 12px;
    font: inherit;
    color: var(--texto);
    text-align: left;
    background: rgba(13, 10, 28, 0.55);
    border: 0;
    border-top: 1px solid rgba(60, 48, 112, 0.7);
    cursor: pointer;
}

.rivales-titulo {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--texto-suave);
    writing-mode: horizontal-tb;
}

.rival {
    position: relative;
    display: grid;
    min-width: 0;
}

.rival-retrato {
    position: relative;
    display: block;
}

.rival-retrato .retrato {
    aspect-ratio: 4 / 3;
}

.rival-retrato .retrato img {
    object-position: center 25%;
}

.rival .barra {
    height: 5px;
    margin: 4px 0 0;
}

.rival-icono {
    position: absolute;
    top: -6px;
    left: -6px;
    font-size: 0.78rem;
    filter: drop-shadow(0 1px 2px #000);
}

.rival .dano {
    top: -10px;
    font-size: 0.9rem;
}

.rival.golpeado .rival-retrato {
    animation: recibir-golpe 0.55s ease-out 0.3s;
}

.rival.golpeado .barra-vida {
    animation: destello-rojo 0.45s ease-out;
}

/* «Tu día»: el Maestro arriba y, debajo, una fila por cada cosa del día. */
.panel-dia {
    display: grid;
    gap: 0;
    padding: 14px;
    background:
        radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.16), transparent 55%),
        linear-gradient(180deg, var(--panel-claro), var(--panel));
}

.panel-dia .maestro-tarjeta {
    margin: 0 0 4px;
    padding: 0;
    background: none;
    border: 0;
}

.dia-fila {
    padding: 10px 0 0;
    margin-top: 10px;
    border-top: 1px solid rgba(60, 48, 112, 0.6);
}

/* Lo de adentro deja de ser una tarjeta suelta: es una fila del panel. */
.dia-fila > .evento-dia,
.dia-fila > .cofre-linea,
.dia-fila > .relampago,
.dia-fila > .pacto-linea,
.dia-fila > .panel {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.dia-fila > .cofre-tarjeta {
    margin: 0;
}

.dia-fila .desafio-icono,
.dia-fila .pacto-linea-icono,
.dia-fila .evento-icono {
    flex: 0 0 36px;
    font-size: 1.5rem;
    text-align: center;
}

.dia-fila > .cofre-linea > span:first-child {
    flex: 0 0 36px;
    font-size: 1.3rem;
    text-align: center;
}

/* Las herramientas sobre la lista de misiones: el día (ayer / hoy) y el modo enfoque. */
.hoy-herramientas {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hoy-herramientas .selector {
    flex: 1;
}

.hoy-herramientas .chip-enfoque {
    min-height: 44px;
    padding: 0 14px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    color: #a5f3fc;
}

/* El diario: las caritas a la vista y lo escrito plegado. */
.diario-escribir {
    display: grid;
    gap: 10px;
}

.diario-escribir > summary {
    min-height: 44px;
    padding: 10px 12px;
    overflow: hidden;
    font-size: 0.88rem;
    color: var(--texto-suave);
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    cursor: pointer;
    list-style: none;
}

.diario-escribir > summary::-webkit-details-marker {
    display: none;
}

.diario-escribir[open] > summary {
    display: none;
}

/* --- Aventuras: dos accesos grandes (el reino y el arcade) --- */
.accesos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.acceso {
    position: relative;
    display: grid;
    align-content: start;
    gap: 2px;
    min-height: 118px;
    padding: 14px;
    overflow: hidden;
    font: inherit;
    color: var(--texto);
    text-align: left;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.acceso:active {
    transform: scale(0.98);
}

.acceso b {
    font-family: var(--letra-titulo);
    font-size: 0.95rem;
}

.acceso small {
    font-size: 0.76rem;
    color: var(--texto-suave);
}

.acceso-icono {
    font-size: 1.8rem;
    line-height: 1.2;
}

.acceso-reino {
    background:
        radial-gradient(circle at 100% 0%, rgba(52, 211, 153, 0.22), transparent 60%),
        linear-gradient(180deg, var(--panel-claro), var(--panel));
    border-color: rgba(52, 211, 153, 0.4);
}

.acceso-arcade {
    background:
        radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.28), transparent 60%),
        linear-gradient(180deg, var(--panel-claro), var(--panel));
    border-color: rgba(139, 92, 246, 0.5);
}

/* Las 4 campañas: se elige una y se ve su tarjeta. */
.selector-campanas button {
    display: grid;
    justify-items: center;
    gap: 1px;
    min-height: 58px;
    padding: 6px 6px 4px;
}

.selector-campanas button[aria-pressed="true"] {
    background: color-mix(in srgb, var(--color-atributo) 22%, transparent);
    box-shadow: inset 0 0 0 1px var(--color-atributo);
}

.campana-pestana-icono {
    font-size: 1.15rem;
}

.selector-campanas small {
    font-size: 0.7rem;
    color: var(--texto-suave);
}

.selector-campanas .barra {
    width: 100%;
    height: 4px;
    margin: 2px 0 0;
}

/* --- Progreso: los totales en una rejilla --- */
.numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.numeros > div {
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 10px 4px;
    text-align: center;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.numeros b {
    font-family: var(--letra-titulo);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.numeros span {
    font-size: 0.7rem;
    color: var(--texto-suave);
}

/* Los rasgos de cada atributo (lo que cambia en tu avatar). */
.atributo-rasgos {
    display: grid;
    gap: 2px;
    margin: 6px 0 0;
    padding: 6px 0 0;
    font-size: 0.74rem;
    color: var(--texto-suave);
    list-style: none;
    border-top: 1px solid rgba(60, 48, 112, 0.6);
}

.atributo-rasgos .tiene {
    color: var(--texto);
}

.atributo-rasgos small {
    color: var(--texto-suave);
}

/* --- Héroe: «Tu historia», una fila por cada cosa --- */
.filas-enlace {
    display: grid;
    gap: 8px;
}

.fila-enlace {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 12px;
    font: inherit;
    color: var(--texto);
    text-align: left;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    cursor: pointer;
}

.fila-enlace:active {
    background: rgba(139, 92, 246, 0.12);
}

.fila-enlace > span:nth-child(2) {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 1px;
}

.fila-enlace small {
    font-size: 0.78rem;
    color: var(--texto-suave);
}

.fila-enlace-icono {
    flex: 0 0 36px;
    font-size: 1.5rem;
    text-align: center;
}

.fila-enlace-flecha {
    font-size: 1.4rem;
    color: var(--texto-suave);
}

/* --- Tienda: la poción va dentro del panel de tus monedas --- */
.saldo .lista {
    width: 100%;
    margin-top: 8px;
    text-align: left;
}

/* --- Héroe: la ficha en horizontal (el avatar a la izquierda), así las secciones quedan a la vista --- */
.ficha {
    grid-template-columns: 168px minmax(0, 1fr);   /* (v113) el héroe más grande para verlo mejor */
    align-items: center;
    justify-items: start;
    column-gap: 14px;
    row-gap: 4px;
    text-align: left;
}

.ficha .ficha-avatar {
    grid-row: span 3;
    width: 168px;
    margin: 0;
    border-radius: var(--esquina);
}

.ficha > .ficha-vida,
.ficha > p.mini,
.ficha > .etapas {
    grid-column: 1 / -1;
    width: 100%;
}

.ficha > .titulo-juego {
    align-self: end;
    font-size: 1.2rem;
}

.ficha > .heroe-animo {
    align-self: start;
}

.ficha .etapas li {
    text-align: center;
}


/* ===== Pantalla de carga (v28) =====
   Tapa todo mientras la app se carga. El ícono brilla, un aro de luz gira a su alrededor
   y la barra se llena; al terminar, todo se desvanece y el ícono crece un poco. */
.carga {
    position: fixed;
    inset: 0;
    z-index: 50;   /* por encima de todo, incluido el PIN */
    display: grid;
    place-items: center;
    padding: calc(env(safe-area-inset-top) + 16px) 24px calc(env(safe-area-inset-bottom) + 24px);
    background:
        radial-gradient(circle at 50% 38%, rgba(139, 92, 246, 0.32), transparent 52%),
        radial-gradient(circle at 50% 110%, rgba(34, 211, 238, 0.18), transparent 50%),
        var(--fondo);
    transition: opacity 0.55s ease, visibility 0.55s;
}

/* Puntos de luz que suben despacio, como chispas. */
.carga::before,
.carga::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(196, 181, 253, 0.8) 0 1.5px, transparent 2.5px),
        radial-gradient(circle, rgba(165, 243, 252, 0.7) 0 1px, transparent 2px);
    background-size: 110px 140px, 170px 190px;
    background-position: 10px 30px, 60px 90px;
    opacity: 0.5;
    /* En el centro (donde van el ícono y el texto) no hay chispas: así no se cuelan entre las letras. */
    -webkit-mask-image: radial-gradient(ellipse 62% 26% at 50% 50%, transparent 70%, #000 100%);
    mask-image: radial-gradient(ellipse 62% 26% at 50% 50%, transparent 70%, #000 100%);
    animation: carga-chispas 9s linear infinite;
}

.carga::after {
    background-size: 140px 120px, 90px 160px;
    background-position: 40px 10px, 20px 70px;
    opacity: 0.3;
    animation-duration: 14s;
}

@keyframes carga-chispas {
    from { transform: translateY(0); }
    to { transform: translateY(-140px); }
}

.carga.saliendo {
    opacity: 0;
    visibility: hidden;
}

.carga.saliendo .carga-emblema {
    transform: scale(1.12);
}

.carga-caja {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.carga-emblema {
    position: relative;
    display: grid;
    place-items: center;
    width: 156px;
    height: 156px;
    margin-bottom: 8px;
    transition: transform 0.55s ease;
}

/* El aro: un degradado que gira alrededor del ícono. */
.carga-aro {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 55%, rgba(34, 211, 238, 0.9) 75%, rgba(139, 92, 246, 0.95) 92%, transparent);
    -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%, #000 70%, transparent 72%);
    mask: radial-gradient(circle, transparent 64%, #000 66%, #000 70%, transparent 72%);
    animation: carga-girar 1.6s linear infinite;
}

@keyframes carga-girar {
    to { transform: rotate(360deg); }
}

.carga-icono {
    width: 112px;
    height: 112px;
    border-radius: 26px;
    box-shadow: 0 0 34px rgba(139, 92, 246, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: carga-latido 2s ease-in-out infinite;
}

@keyframes carga-latido {
    50% { transform: scale(1.04); box-shadow: 0 0 46px rgba(34, 211, 238, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12); }
}

.carga-titulo {
    margin: 0;
    font-family: var(--letra-titulo);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #fff;
    background: linear-gradient(90deg, #c4b5fd, #ffffff 45%, #a5f3fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.5));
}

.carga-lema {
    margin-top: -4px;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 0.95rem;
    font-style: italic;
    color: var(--texto-suave);
}

.carga-barra {
    width: 200px;
    height: 6px;
    margin-top: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(60, 48, 112, 0.9);
    border-radius: var(--esquina);
}

.carga-barra span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--violeta), var(--cian));
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);
    transform-origin: left;
    animation: carga-llenar 1.1s cubic-bezier(0.3, 0.7, 0.3, 1) both;
}

@keyframes carga-llenar {
    from { transform: scaleX(0.04); }
    to { transform: scaleX(1); }
}

.carga-texto {
    min-height: 1.3em;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #c4b5fd;
}

.carga-consejo {
    position: absolute;
    right: 24px;
    bottom: calc(env(safe-area-inset-bottom) + 28px);
    left: 24px;
    z-index: 1;
    margin: 0 auto;
    max-width: 360px;
    font-size: 0.82rem;
    text-align: center;
    color: var(--texto-suave);
}

@media (prefers-reduced-motion: reduce) {
    /* (v88) Solo las chispas que suben; el aro y el ícono siguen: son lo que dice «está cargando». */
    .carga::before,
    .carga::after {
        animation: none;
    }
}


/* =====================================================================
   La Mazmorra del Abismo y las historias (v29)
   ===================================================================== */

/* Los dos botones de abajo en las tarjetas de la Torre y la Mazmorra (Historia y Bestiario). */
.torre-botones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.torre-botones .boton {
    min-width: 0;
    padding-inline: 8px;
}

/* La Mazmorra cerrada: un candado y lo que falta para abrirla. */
.mazmorra-cerrada {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    background: linear-gradient(160deg, rgba(20, 8, 32, 0.9), rgba(8, 4, 14, 0.95));
    border-style: dashed;
}

.mazmorra-cerrada h3 {
    margin: 0 0 4px;
}

.mazmorra-cerrada .barra {
    margin: 6px 0 4px;
}

.mazmorra-candado {
    font-size: 2.2rem;
    filter: grayscale(0.4);
}

/* La Mazmorra abierta: borde violeta y su sala más honda de portada (en pixel art). */
.mazmorra-tarjeta {
    border-color: rgba(192, 90, 255, 0.5);
}

.mazmorra-portada {
    overflow: hidden;
    background: #08040e;
}

.mazmorra-portada-sala {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    image-rendering: pixelated;
    border-radius: inherit;
}

.mazmorra-portada::before {
    z-index: 1;
    background:
        radial-gradient(circle at 50% 40%, rgba(192, 90, 255, 0.22), transparent 60%),
        linear-gradient(180deg, rgba(8, 4, 14, 0.1), rgba(8, 4, 14, 0.85));
}

.mazmorra-portada .torre-portada-titulo {
    z-index: 2;
}

/* --- En la batalla: lo nuevo de la Mazmorra --- */
.ff-numero.veneno {
    top: 70%;
    font-size: 1rem;
    color: #a8ff6a;
}

.ff-aviso.ff-furia {
    top: 18%;
    color: #fff;
    background: #c8283a;
}

.ff-sabes.ff-envenenado {
    color: #b8ff8a;
}

/* Tu héroe envenenado: un borde verde que late. */
.ff-heroe.envenenado .ff-sprite {
    animation: ff-envenenado 1.2s steps(2) infinite;
}

@keyframes ff-envenenado {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 2px #7dff6a); }
}

/* La criatura se cubre con su coraza: un destello blanco. */
.ff-enemigo.coraza .ff-sprite {
    animation: ff-coraza 0.8s steps(4) 0.65s;
}

@keyframes ff-coraza {
    0%, 100% { filter: none; }
    25%, 75% { filter: brightness(1.8) saturate(0.4); }
    50% { filter: brightness(1.2); }
}

/* --- Una página de la historia --- */
.ff-escena-relato {
    aspect-ratio: 192 / 90;
}

/* El fondo más oscuro, para que el título se lea. */
.ff-escena-relato .ff-sala {
    filter: brightness(0.6);
}

.ff-relato-titulo {
    position: absolute;
    right: 12px;
    bottom: 10px;
    left: 12px;
    z-index: 2;
    margin: 0;
    font-family: var(--letra-titulo);
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 0 #05030c, 0 0 12px #05030c;
}

.ff-relato-titulo small {
    display: block;
    margin-bottom: 2px;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #c8d2ff;
    text-transform: uppercase;
}

.ff-relato,
.ff-capitulo {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
}

.ff-relato p,
.ff-capitulo p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.5;
}

.ff-relato .ff-oro,
.ff-capitulo .ff-oro {
    font-weight: 700;
}

/* --- La historia completa, para releer --- */
.ff-historia {
    display: grid;
    gap: 8px;
}

.ff-capitulo.cerrado {
    opacity: 0.65;
}

.ff-capitulo .ff-titulo {
    margin: 0;
}

/* --- El bestiario con los dos lugares --- */
.ff-lugar-titulo {
    margin: 14px 0 0;
    padding-bottom: 4px;
    font-family: var(--letra-titulo);
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(241, 243, 255, 0.25);
}

.ff-criatura .ff-especial {
    font-weight: 700;
    color: #ffb8d0;
}


/* =====================================================================
   El Maestro Aurelio en todo el juego (v30)
   ===================================================================== */

/* Lo que dice en medio de otra pantalla (el diario, el ritual de la noche). */
.maestro-dice {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(192, 132, 252, 0.08);
    border: 1px solid rgba(192, 132, 252, 0.3);
    border-radius: var(--esquina);
}

.maestro-dice-retrato {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 2px solid rgba(192, 132, 252, 0.6);
    border-radius: 50%;
}

.maestro-dice-retrato svg {
    display: block;
    width: 100%;
    height: 100%;
}

.maestro-dice p {
    margin: 0;
    font-style: italic;
    line-height: 1.45;
}

.maestro-dice b {
    display: block;
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.06em;
    color: #c4b5fd;
    text-transform: uppercase;
}

/* En la batalla: su cara en pixel art y la pista (o el consuelo). */
.ff-maestro {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.ff-maestro.tras-golpe {
    animation: ff-aparecer 0.25s steps(3) 1.5s backwards;
}

.ff-maestro-retrato {
    width: 44px;
    height: 44px;
    image-rendering: pixelated;
    background: #0a1258;
    border: 2px solid #f1f3ff;
    border-radius: 6px;
}

.ff-maestro p {
    margin: 0;
    font-size: 0.86rem;
    font-style: italic;
    font-weight: 500;
}

.ff-maestro b {
    display: block;
    font-style: normal;
    font-weight: 800;
    color: #ffe58a;
}

/* En las celebraciones. */
.celebracion-maestro {
    margin: 10px 0 0;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.4;
    color: #ddd6fe;
}

/* Las memorias: el pergamino de la Crónica con su retrato arriba. */
.memorias-retrato {
    width: 96px;
    margin: -6px auto 4px;
}

.memorias-retrato svg {
    display: block;
    width: 100%;
    height: auto;
}

.memoria-nueva {
    padding: 1px 8px;
    font-family: system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: #8f1d1d;
    border-radius: var(--esquina);
}

.memoria-leccion {
    margin: 4px 0 10px;
    padding: 8px 12px;
    font-size: 1rem;
    font-style: italic;
    text-align: center;
    color: #6a1a14;
    border-top: 1px solid rgba(107, 79, 46, 0.35);
    border-bottom: 1px solid rgba(107, 79, 46, 0.35);
}


/* =====================================================================
   Las gemas y el bazar del arcade (v31)
   ===================================================================== */

.saldo-gemas {
    font-family: var(--letra-titulo);
    font-size: 0.95rem;
    font-weight: 700;
    color: #a5f3fc;
    font-variant-numeric: tabular-nums;
}

.bazar {
    display: grid;
    gap: 10px;
    border-color: rgba(165, 243, 252, 0.35);
}

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

.provision {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.provision.llevada {
    border-color: rgba(251, 191, 36, 0.45);
}

.provision-icono {
    font-size: 1.5rem;
    text-align: center;
}

.provision small {
    display: block;
    color: var(--texto-suave);
}


/* =====================================================================
   «La primera piedra»: el pergamino que se desenrolla (v33)
   ===================================================================== */

.rollo {
    color-scheme: light;
    --tinta: #2b1d14;
    --tinta-suave: #5f4a38;
    --sangre: #7a1414;
    margin: 12px 0 18px;
}

/* Las varas de madera de arriba y de abajo, con sus perillas. */
.rollo-vara {
    position: relative;
    z-index: 1;
    height: 18px;
    margin: 0 -6px;
    background: linear-gradient(180deg, #a06a35 0%, #6b3f1c 45%, #3d220c 100%);
    border-radius: var(--esquina);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
}

.rollo-vara::before,
.rollo-vara::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 26px;
    height: 26px;
    background: radial-gradient(circle at 35% 30%, #d9a45c, #7a4a1f 60%, #3d220c);
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

.rollo-vara::before {
    left: -10px;
}

.rollo-vara::after {
    right: -10px;
}

/* El papel: viejo, con las orillas más oscuras y letra de libro. */
.rollo-papel {
    margin: -6px 6px;
    padding: 30px 22px 28px;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--tinta);
    background:
        linear-gradient(90deg, rgba(110, 72, 28, 0.28), transparent 8%, transparent 92%, rgba(110, 72, 28, 0.28)),
        radial-gradient(ellipse at 50% 10%, rgba(255, 252, 240, 0.6), transparent 55%),
        linear-gradient(180deg, #efe2c4, #e6d3ab 50%, #e9d8b4);
    box-shadow: inset 0 0 40px rgba(110, 72, 28, 0.3), 0 10px 30px rgba(0, 0, 0, 0.45);
    animation: desenrollar 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes desenrollar {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    .rollo-papel {
        animation: none;
    }
}

.rollo-papel p {
    margin: 0 0 14px;
    text-align: justify;
    hyphens: auto;
}

.rollo-cabecera {
    text-align: center;
}

.rollo-cabecera h2 {
    margin: 6px 0;
    font-family: inherit;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta);
}

.rollo-papel .rollo-sobre {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.24em;
    text-align: center;
    text-transform: uppercase;
    color: var(--sangre);
}

.rollo-papel .rollo-subtitulo {
    font-size: 0.88rem;
    font-style: italic;
    text-align: center;
    color: var(--tinta-suave);
}

.rollo-prologo p {
    font-style: italic;
    color: var(--tinta-suave);
}

.rollo-papel .rollo-adorno {
    margin: 10px 0 16px;
    font-size: 1.4rem;
    text-align: center;
    color: var(--sangre);
}

.rollo-papel .rollo-numero {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-align: center;
    color: var(--sangre);
}

.rollo-titulo-capitulo {
    margin: 2px 0 12px;
    font-family: inherit;
    font-size: 1.2rem;
    text-align: center;
    color: var(--tinta);
}

/* La primera letra de cada capítulo, grande y roja. */
.rollo-capitulo > h3 + p::first-letter {
    float: left;
    margin: 6px 8px 0 0;
    font-size: 3.2em;
    line-height: 0.8;
    font-weight: 700;
    color: var(--sangre);
}

.rollo-ensenanzas {
    margin: 8px 0;
    padding: 14px 12px 6px;
    border-top: 1px solid rgba(107, 79, 46, 0.4);
    border-bottom: 1px solid rgba(107, 79, 46, 0.4);
}

.rollo-ensenanzas h3 {
    margin: 0 0 10px;
    font-family: inherit;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: var(--sangre);
}

.rollo-ensenanzas ol {
    margin: 0;
    padding-left: 1.6em;
}

.rollo-ensenanzas li {
    margin-bottom: 10px;
    font-style: italic;
}

.rollo-ensenanzas li::marker {
    font-style: normal;
    font-weight: 700;
    color: var(--sangre);
}

.rollo-dedicatoria p {
    font-size: 1.1rem;
    text-align: center;
}

.rollo-papel .rollo-firma {
    margin-top: 8px;
    font-style: italic;
    text-align: right;
    color: var(--tinta-suave);
}


/* =====================================================================
   La Saga de la Llama (v35)
   ===================================================================== */

.saga {
    display: grid;
    gap: 12px;
    border-color: rgba(251, 191, 36, 0.4);
    background:
        radial-gradient(circle at 85% 0%, rgba(255, 179, 71, 0.14), transparent 55%),
        var(--panel);
}

.saga .etiqueta {
    margin: 0;
}

.saga-final {
    margin: 0;
    font-size: 0.92rem;
    font-style: italic;
    color: var(--texto-suave);
}

/* El acto de ahora: tu objetivo. */
.saga-acto {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: var(--esquina);
}

.saga-acto h3 {
    margin: 0;
    font-family: var(--letra-titulo);
    font-size: 1.1rem;
}

.saga-numero {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fbbf24;
}

.saga-relato {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--texto-suave);
}

.saga-objetivo {
    margin: 2px 0 0;
    font-weight: 700;
}

.saga-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.saga-vigia {
    border-color: rgba(255, 179, 71, 0.8);
    box-shadow: 0 0 24px rgba(255, 179, 71, 0.18);
}

/* Los siete actos. */
.saga-actos {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.saga-actos li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.saga-actos small {
    display: block;
    color: var(--texto-suave);
}

.saga-marca {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--texto-suave);
    border: 1px solid var(--borde);
    border-radius: 50%;
}

.saga-actos .hecho .saga-marca {
    color: #0b0816;
    background: #fbbf24;
    border-color: #fbbf24;
}

.saga-actos .actual .saga-marca {
    color: #fbbf24;
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.saga-actos .futuro {
    opacity: 0.6;
}

/* En Hoy: la fila del objetivo. */
.saga-linea .barra {
    margin: 4px 0 2px;
}


/* ===== La Torre despierta (v38): Voluntad, técnicas y efectos nuevos ===== */

/* La barra de Voluntad, bajo la vida de tu héroe: dorada; llena, brilla. */
.ff-voluntad-barra {
    grid-column: 1 / -1;
    height: 5px;
    overflow: hidden;
    background: #05072a;
    border: 1px solid #060a3a;
    border-radius: 3px;
}

.ff-voluntad-barra i {
    display: block;
    height: 100%;
    background: linear-gradient(180deg, #fff3a0, #e6a800);
    transition: width 0.3s steps(6) 0.9s;
}

.ff-voluntad-barra.llena {
    box-shadow: 0 0 6px #ffd23c;
    animation: ff-voluntad-lista 1s steps(2) infinite;
}

@keyframes ff-voluntad-lista {
    50% { box-shadow: 0 0 2px #ffd23c; }
}

/* Las técnicas explican qué hacen: ese texto puede ocupar dos renglones. */
.ff-comando.ff-tecnica small {
    line-height: 1.25;
    white-space: normal;
}

/* El comando de Voluntad, cuando está lista: en dorado. */
.ff-comando.ff-voluntad {
    color: #ffe45a;
    font-weight: 800;
}

.ff-comando.ff-voluntad small {
    color: #fff3a0;
}

/* El Golpe de Voluntad: un destello dorado que cruza a la criatura. */
.ff-voluntad {
    inset: -6% 0;
}

.ff-efecto.ff-voluntad {
    background: radial-gradient(circle at 50% 55%, #fffbe0 0 9%, #ffd23c 10% 22%, rgba(255, 170, 0, 0.45) 23% 40%, transparent 41%);
    animation: ff-golpe-voluntad 0.6s steps(5) 0.15s;
}

@keyframes ff-golpe-voluntad {
    0% { opacity: 1; transform: scale(0.2); }
    60% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.3); }
}

/* Tu héroe al soltar la Voluntad: brilla un instante. */
.ff-heroe.voluntad .ff-figura {
    filter: drop-shadow(0 0 4px #ffd23c);
}

@media (prefers-reduced-motion: reduce) {
    .ff-voluntad-barra.llena,
    .ff-efecto.ff-voluntad {
        animation: none;
    }
}


/* ===== Cinemáticas de la Torre (v43) =====
   cine.js arma cada toma dentro de #cine-escena. Las cámaras (camara-…) mueven .cine-mundo (el fondo y los actores
   juntos); los efectos (efecto-…) y los destellos van por encima. --px es cuánto mide en pantalla un punto del pixel art. */
.cine {
    position: fixed;
    inset: 0;
    z-index: 18;   /* encima de la Torre (12), debajo de las celebraciones (20) y del PIN (30) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cine[hidden] {
    display: none;
}

/* La escena es cuadrada (en el iPhone ocupa todo el ancho): el fondo se recorta por los lados con object-fit: cover. */
.cine-escena,
.cine-barra {
    width: min(100vw, calc(100dvh - 9rem));
}

.cine-escena {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    container-type: inline-size;
    background: #0b0816;
}

.cine-barra {
    min-height: 6.5rem;
    padding: 16px 20px 0;
    box-sizing: border-box;
    text-align: center;
}

.cine-texto {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #f1f3ff;
    text-shadow: 0 1px 0 #000;
}

.cine-saltar {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 14px;
    min-height: 44px;
    padding: 0 16px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--esquina);
    cursor: pointer;
}

.cine-toma {
    --px: calc(100cqw / 160);   /* los sprites, un poco más chicos que el fondo para que quepan los dos */
    position: absolute;
    inset: 0;
    animation: cine-aparece 0.45s ease-out;
}

@keyframes cine-aparece {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cine-mundo {
    position: absolute;
    inset: 0;
    transform-origin: var(--foco, 50% 60%);
}

.cine-fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    image-rendering: pixelated;
    -webkit-user-select: none;
    user-select: none;
}

.cine-actor {
    position: absolute;
    left: var(--x);
    bottom: 12%;
    transform: translateX(-50%);
}

.cine-sprite {
    display: block;
    width: calc(var(--px) * var(--talla));
    height: auto;
    image-rendering: pixelated;
    -webkit-user-select: none;
    user-select: none;
}

.cine-sombra {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: calc(var(--px) * -2);
    height: calc(var(--px) * 5);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

/* --- Las cámaras --- */
/* Sube desde el suelo hasta lo más alto de la sala. */
.camara-arriba .cine-mundo {
    transform-origin: 50% 100%;
    animation: cine-sube var(--ms) ease-in-out forwards;
}

@keyframes cine-sube {
    from { transform: translateY(0) scale(1.5); }
    to { transform: translateY(50%) scale(1.5); }
}

/* Se acerca despacio hacia --foco. */
.camara-zoom .cine-mundo {
    animation: cine-acerca var(--ms) ease-in forwards;
}

@keyframes cine-acerca {
    from { transform: scale(1); }
    to { transform: scale(1.7); }
}

.camara-izquierda .cine-mundo {
    transform-origin: 70% 70%;
    animation: cine-izquierda var(--ms) ease-in-out forwards;
}

@keyframes cine-izquierda {
    from { transform: scale(1.35) translateX(5%); }
    to { transform: scale(1.35) translateX(-5%); }
}

.camara-derecha .cine-mundo {
    transform-origin: 70% 70%;
    animation: cine-derecha var(--ms) ease-in-out forwards;
}

@keyframes cine-derecha {
    from { transform: scale(1.35) translateX(-5%); }
    to { transform: scale(1.35) translateX(5%); }
}

/* Casi quieta: respira un poco. */
.camara-quieto .cine-mundo {
    animation: cine-respira var(--ms) ease-in-out forwards;
}

@keyframes cine-respira {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

/* --- Los efectos --- */
.cine-destello {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.efecto-destello .cine-destello {
    animation: cine-flash 1s ease-out;
}

@keyframes cine-flash {
    0% { opacity: 0; }
    10% { opacity: 0.95; }
    100% { opacity: 0; }
}

.efecto-oscuro .cine-mundo {
    filter: brightness(0.62) saturate(0.85);
}

.efecto-oscuro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 55%, transparent 32%, rgba(0, 0, 0, 0.78));
    pointer-events: none;
}

.cine-toma.efecto-temblor {
    animation: cine-aparece 0.45s ease-out, cine-tiembla 0.4s steps(8) 0.5s 4;
}

@keyframes cine-tiembla {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(calc(var(--px) * -2), calc(var(--px) * 1)); }
    50% { transform: translate(calc(var(--px) * 2), calc(var(--px) * -1)); }
    75% { transform: translate(calc(var(--px) * -1), calc(var(--px) * 2)); }
}

/* --- Los actores --- */
.cine-late .cine-sprite {
    transform-origin: 50% 100%;
    animation: cine-late 1.5s ease-in-out infinite;
}

@keyframes cine-late {
    0%, 100% { transform: scale(1); filter: none; }
    50% { transform: scale(1.04); filter: brightness(1.25); }
}

/* Cae: parpadea por el golpe y se deshace (los mismos pasos que en la batalla). */
.cine-cae .cine-sprite {
    animation: ff-parpadeo 0.42s steps(1) 0.5s, ff-deshacer 1.1s steps(11) 1.1s forwards;
}

.cine-cae .cine-sombra {
    animation: ff-desaparecer 0.3s steps(3) 2.1s forwards;
}

/* Tu héroe entra caminando por la izquierda. */
.cine-camina .cine-sprite {
    animation: cine-camina 1.8s steps(9) both;
}

@keyframes cine-camina {
    from { transform: translateX(calc(var(--px) * -40)); opacity: 0; }
    15% { opacity: 1; }
    to { transform: translateX(0); }
}

/* --- El cartel (nombre del guardián o de la zona) --- */
.cine-titulo {
    position: absolute;
    left: 0;
    right: 0;
    top: 8%;
    margin: 0;
    padding: 0 6%;
    font-family: var(--letra-titulo);
    font-size: clamp(1rem, 5.2cqw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 14px rgba(251, 191, 36, 0.75), 0 2px 0 #000;
    animation: cine-titulo var(--ms) ease-out both;
}

@keyframes cine-titulo {
    0% { opacity: 0; letter-spacing: 0.3em; }
    18% { opacity: 1; letter-spacing: 0.08em; }
    86% { opacity: 1; }
    100% { opacity: 0; }
}

/* (v89) Quien prefiere menos movimiento: antes se apagaban la cámara, el temblor y el caminar del héroe, y la escena quedaba
   como una foto fija. Ahora solo se apaga el destello de pantalla completa; lo demás se mueve. */
@media (prefers-reduced-motion: reduce) {
    .cine-destello {
        display: none;
    }
}


/* ===== Las Voces del Valle (v44) =====
   La aldea es una pantalla normal; cada conversación se juega en la capa #voces, a pantalla completa (como la Torre).
   --pintura es el fondo de cada lugar (una pintura de fondos/). */
.acceso-voces {
    grid-column: 1 / -1;
    min-height: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(244, 114, 182, 0.26), transparent 60%),
        linear-gradient(180deg, var(--panel-claro), var(--panel));
    border-color: rgba(244, 114, 182, 0.45);
}

.voces-intro,
.voces-poder,
.voces-encurso {
    display: grid;
    gap: 8px;
}

.voces-tecnicas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.voces-tecnica {
    padding: 5px 10px;
    font-size: 0.84rem;
    color: var(--texto-suave);
    border: 1px dashed var(--borde);
    border-radius: var(--esquina);
}

.voces-tecnica small {
    font-size: 0.7rem;
}

.voces-tecnica.sabida {
    color: var(--texto);
    background: rgba(244, 114, 182, 0.1);
    border: 1px solid rgba(244, 114, 182, 0.55);
}

.voces-valor {
    display: grid;
    gap: 4px;
}

.voces-valor small {
    font-size: 0.78rem;
    color: var(--texto-suave);
}

.voces-pips {
    display: inline-flex;
    gap: 5px;
    margin-left: 8px;
    vertical-align: middle;
}

.voces-pip {
    width: 14px;
    height: 14px;
    border: 1px solid var(--oro);
    border-radius: 50%;
}

.voces-pip.lleno {
    background: var(--oro);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.voces-lugar {
    display: grid;
    gap: 10px;
    overflow: hidden;
    background-image: linear-gradient(rgba(10, 6, 22, 0.78), rgba(10, 6, 22, 0.92)), var(--pintura);
    background-position: center;
    background-size: cover;
}

.voces-lugar-nombre {
    margin: 0;
    font-size: 1rem;
}

.voces-persona {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.voces-busto {
    flex: none;
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--esquina);
    image-rendering: pixelated;
}

.voces-persona-datos {
    display: grid;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.voces-persona-datos .nota {
    margin: 0;
}

.voces-persona-datos .boton {
    margin-top: 4px;
}

.voces-vacio {
    margin: 0;
}

.voces-vividas {
    gap: 0;
}

.voces-vivida {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borde);
}

.voces-vivida > span:nth-child(2) {
    flex: 1;
}

.voces-final-icono {
    font-size: 1.5rem;
}

/* --- La conversación --- */
.voces {
    overflow-y: auto;
    place-items: start center;
}

.voces-caja {
    width: min(560px, 100%);
}

.voces-escena {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: calc(100dvh - 16px);
    padding: 12px;
    background-image: linear-gradient(rgba(10, 6, 22, 0.72), rgba(10, 6, 22, 0.94)), var(--pintura);
    background-position: center;
    background-size: cover;
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.voces-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.voces-donde {
    font-size: 0.86rem;
    color: var(--texto-suave);
}

.voces-donde b {
    color: var(--texto);
}

.voces-retrato-caja {
    position: relative;
    display: grid;
    place-items: center;
    padding-top: 6px;
}

.voces-retrato {
    width: 162px;   /* el sprite mide 54 puntos de ancho: 3 pantalla por punto */
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
    animation: voces-aparece 0.4s ease-out;
}

.voces-reaccion {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 4px 10px;
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.62);
    border-radius: var(--esquina);
    animation: voces-aparece 0.4s ease-out;
}

.voces-reaccion.sube {
    color: #f9a8d4;
    border: 1px solid rgba(244, 114, 182, 0.5);
}

.voces-reaccion.baja {
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.5);
}

.voces-dialogo {
    display: grid;
    gap: 8px;
}

.voces-antes,
.voces-yo {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    opacity: 0.78;
}

.voces-antes {
    color: var(--texto-suave);
}

.voces-yo {
    font-style: italic;
    text-align: right;
    color: #a5f3fc;
}

.voces-ahora {
    padding: 14px 16px;
    background: rgba(15, 10, 40, 0.92);
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--esquina);
    animation: voces-aparece 0.35s ease-out;
}

.voces-nombre {
    margin: 0 0 4px;
    font-family: var(--letra-titulo);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--oro);
}

.voces-texto {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
}

.voces-gesto {
    font-style: italic;
    color: #a5f3fc;
}

.voces-opciones {
    display: grid;
    gap: 8px;
}

.voces-opcion {
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font: inherit;
    color: var(--texto);
    text-align: left;
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.55);
    border-radius: var(--esquina);
    cursor: pointer;
}

.voces-opcion:active {
    transform: scale(0.99);
}

.voces-opcion.bloqueada {
    cursor: default;
    border-style: dashed;
    opacity: 0.55;
}

.voces-etiqueta {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #f9a8d4;
}

.voces-bloqueo {
    font-size: 0.74rem;
    color: var(--texto-suave);
}

.voces-abandonar {
    justify-self: center;
    margin-top: 6px;
    font-size: 0.8rem;
}

.voces-final-titulo {
    margin: 0;
    font-family: var(--letra-titulo);
    font-size: 1.1rem;
    text-align: center;
}

.voces-leccion {
    margin: 0;
    padding: 10px 12px;
    font-size: 0.92rem;
    line-height: 1.5;
    background: rgba(251, 191, 36, 0.08);
    border-left: 3px solid var(--oro);
    border-radius: 6px;
}

.voces-premio {
    margin: 0;
    font-weight: 700;
    text-align: center;
    color: var(--oro);
}

.voces-volver {
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--borde);
}

@keyframes voces-aparece {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .voces-retrato,
    .voces-ahora,
    .voces-reaccion {
        animation: none;
    }
}


/* ===== Modo esencial (v46, v48) =====
   dibujarPantalla() pone la clase «modo-esencial» en <body>. Quedan 2 pestañas (Hoy y Tienda); Hoy se arma sin héroe ni
   «Tu día» y con tres grupos de colores distintos (ver vistas.pantallaHoy): diarias (cian), tareas (oro) e importantes (violeta). */
.modo-esencial .pestanas {
    grid-template-columns: repeat(2, 1fr);
}

.modo-esencial .pestana[data-pantalla="aventuras"],
.modo-esencial .pestana[data-pantalla="personaje"],
.modo-esencial .pestana[data-pantalla="progreso"] {
    display: none;
}

/* (v49) Ánimo «normal»: sin Aventuras (quedan Hoy, Progreso, Héroe y Tienda). */
.modo-normal:not(.modo-esencial) .pestanas {
    grid-template-columns: repeat(4, 1fr);   /* (v112) sin Aventuras: Hoy, Progreso, Héroe y Tienda */
}

.modo-normal:not(.modo-esencial) .pestana[data-pantalla="aventuras"] {
    display: none;
}

/* Las gemas 💎 son del arcade y del equipo: en el modo esencial solo se ven las monedas 🪙. */
.modo-esencial .cab-gemas {
    display: none;
}

.esencial-diarias { --acento: #22d3ee; }
.esencial-tareas { --acento: #fbbf24; }
.esencial-importantes { --acento: #a78bfa; }

/* Los tres números de arriba (y atajos a cada grupo). */
.esencial-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}

.esencial-dato {
    display: grid;
    gap: 2px;
    padding: 10px 6px;
    font: inherit;
    color: var(--texto);
    text-align: center;
    background: color-mix(in srgb, var(--acento) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--acento) 55%, transparent);
    border-radius: var(--esquina);
    cursor: pointer;
}

.esencial-dato b {
    font-family: var(--letra-titulo);
    font-size: 1.05rem;
    color: var(--acento);
}

.esencial-dato small {
    font-size: 0.74rem;
    color: var(--texto-suave);
}

/* Cada grupo, con su color en el borde y en el título. */
.esencial-grupo {
    padding: 14px 14px 16px;
    scroll-margin-top: calc(var(--alto-cabecera, 72px) + 8px);
    background: color-mix(in srgb, var(--acento) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
    border-left: 5px solid var(--acento);
    border-radius: var(--esquina);
}

.esencial-grupo .titulo-juego {
    color: var(--acento);
}

.chip-esencial {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.45);
    cursor: pointer;
}

.chip-esencial.activo {
    background: rgba(251, 191, 36, 0.14);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}


/* ===== (v49) «¿Cómo te sientes hoy?»: portada a pantalla completa ===== */
.dialogo-animo {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow-y: auto;
    background: var(--fondo);
}

.dialogo-animo > * {
    padding: 0;
}

.animo-fondo {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(0.9);
}

/* Un velo oscuro para que se lea el texto sobre la pintura. */
.animo-fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(139, 92, 246, 0.25), transparent 55%),
        linear-gradient(180deg, rgba(8, 5, 18, 0.25), rgba(8, 5, 18, 0.85) 75%);
}

.animo-caja {
    position: relative;
    display: grid;
    gap: 16px;
    min-height: 100%;
    align-content: center;
    box-sizing: border-box;
    max-width: 520px;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 24px);
}

.animo-marca {
    margin: 0;
    text-align: center;
    font-family: var(--letra-titulo);
    font-weight: 800;
    letter-spacing: 0.3em;
    color: #e9d5ff;
    text-shadow: 0 0 18px rgba(167, 139, 250, 0.8);
}

.animo-maestro {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.animo-retrato {
    width: 120px;
}

.animo-burbuja {
    padding: 14px 16px;
    text-align: center;
    background: rgba(15, 10, 30, 0.7);
    border: 1px solid rgba(192, 132, 252, 0.45);
    border-radius: var(--esquina);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.animo-burbuja p { margin: 0; }
.animo-saludo { font-weight: 700; color: #f5f3ff; }
.animo-cita { margin-top: 6px; font-style: italic; line-height: 1.5; }
.animo-autor { margin-top: 6px; font-size: 0.8rem; color: var(--texto-suave, #a8a3c4); }

.animo-pregunta {
    margin: 4px 0 0;
    text-align: center;
    font-size: 1.35rem;
}

.animo-opciones {
    display: grid;
    gap: 10px;
}

.animo-opcion {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 12px 16px;
    text-align: left;
    color: var(--texto);
    font: inherit;
    background: rgba(15, 10, 30, 0.75);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    cursor: pointer;
}

.animo-opcion:focus { outline: none; }
.animo-opcion:active { transform: scale(0.98); }
.animo-opcion .animo-icono { font-size: 2rem; }
.animo-opcion .animo-texto { display: grid; gap: 2px; }
.animo-opcion small { color: var(--texto-suave, #a8a3c4); }
.animo-mal { border-color: rgba(96, 165, 250, 0.6); }
.animo-normal { border-color: rgba(251, 191, 36, 0.6); }
.animo-bien { border-color: rgba(74, 222, 128, 0.6); }


/* (v50) El botón grande de Hoy para cambiar cómo te sientes (reemplaza al chip pequeño). */
.boton-animo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    text-align: left;
    color: var(--texto);
    font: inherit;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(15, 10, 30, 0.85));
    border: 1.5px solid rgba(167, 139, 250, 0.7);
    border-radius: var(--esquina);
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.3);
    cursor: pointer;
}

.boton-animo:active { transform: scale(0.98); }
.boton-animo-icono { font-size: 1.8rem; }
.boton-animo-texto { display: grid; flex: 1; gap: 1px; min-width: 0; }
.boton-animo-texto small { color: var(--texto-suave, #a8a3c4); }
.boton-animo-cambiar {
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e1033;
    background: #c4b5fd;
    border-radius: var(--esquina);
}


/* ===== (v51) Hoy en secciones: una a la vez, con colores propios; las listas se agrupan por atributo ===== */
.esencial-metas { --acento: #4ade80; }
.esencial-diario { --acento: #f472b6; }

.hoy-tabs {
    position: sticky;
    top: calc(var(--alto-cabecera, 72px) + 6px);
    z-index: 4;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    padding: 6px;
    background: rgba(13, 10, 28, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(60, 48, 112, 0.9);
    border-radius: var(--esquina);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.hoy-tab {
    display: grid;
    gap: 1px;
    min-height: 52px;
    padding: 6px 2px;
    font: inherit;
    text-align: center;
    color: var(--texto-suave);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--esquina);
    cursor: pointer;
}

.hoy-tab b { font-size: 0.92rem; color: var(--texto); white-space: nowrap; }
.hoy-tab small { font-size: 0.68rem; }
.hoy-tab[aria-pressed="true"] {
    color: var(--texto);
    background: color-mix(in srgb, var(--acento) 18%, transparent);
    border-color: var(--acento);
}
.hoy-tab-diarias { --acento: #22d3ee; }
.hoy-tab-metas { --acento: #4ade80; }
.hoy-tab-tareas { --acento: #fbbf24; }
.hoy-tab-importantes { --acento: #a78bfa; }
.hoy-tab-diario { --acento: #f472b6; }

/* Título de cada atributo dentro de una lista. */
.subtitulo-atributo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 14px 0 6px;
    padding-bottom: 4px;
    color: var(--color-attr);
    border-bottom: 1px solid color-mix(in srgb, var(--color-attr) 45%, transparent);
}
.subtitulo-atributo small { color: var(--texto-suave); }
.lista-atributo .mision { border-left: 4px solid var(--color-attr); }

.selector-chico button { min-height: 34px; font-size: 0.8rem; }


/* ===== (v52) Pestaña Aurelio en Hoy y jefes que esperan en otra región del mapa ===== */
.hoy-tab-aurelio { --acento: #c084fc; }

.rivales-lista {
    display: grid;
    gap: 8px;
}

.rival-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    list-style: none;
    background: var(--hundido, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--borde);
    border-left: 4px solid var(--color-attr);
    border-radius: var(--esquina);
}

.rival-fila .rival-retrato {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--esquina);
}

.rival-fila .rival-retrato img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rival-datos {
    display: grid;
    flex: 1;
    gap: 3px;
    min-width: 0;
}

.jefe-esperando {
    display: block;
    color: #c4b5fd;
}


/* ===== (v55) Misiones principales siempre a la vista arriba de Hoy ===== */
.destacadas {
    border-color: rgba(167, 139, 250, 0.6);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), var(--panel));
}

.destacadas .lista { display: grid; gap: 10px; margin-top: 8px; }

.destacada {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    list-style: none;
    background: var(--hundido, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--borde);
    border-left: 4px solid var(--color-attr);
    border-radius: var(--esquina);
}

.destacada-titulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-height: 32px;
    padding: 0;
    text-align: left;
    font: inherit;
    font-weight: 700;
    color: var(--texto);
    background: none;
    border: 0;
    cursor: pointer;
}

.destacada-titulo small { color: var(--texto-suave); font-weight: 600; white-space: nowrap; }

.destacada-paso { display: flex; align-items: center; gap: 10px; }
.destacada-paso .check-chico { flex: 0 0 auto; }


/* ===== (v56) Más animaciones: pantallas, listas, botones, mapa e historia ===== */

/* Al cambiar de pantalla, la nueva sube y aparece (la clase «entra» la pone app.js solo en ese momento). */
.entra {
    animation: pantalla-entra 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pantalla-entra {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* Las primeras tarjetas de cada lista entran una tras otra. */
.entra .lista > li,
.entra .panel,
.entra .bloque {
    animation: tarjeta-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.entra .lista > li:nth-child(2) { animation-delay: 0.05s; }
.entra .lista > li:nth-child(3) { animation-delay: 0.1s; }
.entra .lista > li:nth-child(4) { animation-delay: 0.15s; }
.entra .lista > li:nth-child(5) { animation-delay: 0.2s; }
.entra .lista > li:nth-child(n + 6) { animation-delay: 0.25s; }

@keyframes tarjeta-entra {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

/* Las barras se llenan al entrar. */
.entra .barra-relleno {
    transform-origin: left center;
    animation: barra-crece 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes barra-crece {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Botones y tarjetas que se tocan: se hunden un poco y vuelven con rebote. */
.boton,
.hoy-tab,
.pestana,
.boton-icono,
.destacada,
.rival-fila {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.boton:active,
.hoy-tab:active,
.pestana:active,
.boton-icono:active {
    transform: scale(0.94);
}

/* El ícono de la pestaña activa da un saltito al elegirla. */
.pestana[aria-current="page"] svg {
    animation: pestana-salta 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pestana-salta {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-5px) scale(1.18); }
    100% { transform: translateY(0) scale(1); }
}

/* La pestaña elegida de Hoy brilla suave. */
.hoy-tab[aria-pressed="true"] {
    box-shadow: 0 0 14px color-mix(in srgb, var(--acento) 35%, transparent);
}

/* Las ventanas se abren con un fundido del fondo y un pequeño rebote. */
.dialogo[open] {
    animation: ventana-abre 0.32s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.dialogo[open]::backdrop {
    animation: fondo-abre 0.3s ease-out;
}

@keyframes ventana-abre {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes fondo-abre {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== El mapa: los señores vencidos se ven en su guarida ===== */
.mapa-guarida.libre {
    animation: trofeo-aparece 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mapa-trofeo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fbbf24;
    box-shadow: 0 0 0 1px #3a2a08, 0 0 12px rgba(251, 191, 36, 0.85);
    filter: grayscale(0.35) brightness(0.9);
    animation: trofeo-flota 3.2s ease-in-out infinite;
    pointer-events: none;
}

.mapa-guarida.libre::after {
    content: "✓";
    position: absolute;
    right: -4%;
    bottom: -2%;
    width: 38%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: #052e16;
    background: #4ade80;
    border: 1px solid #052e16;
    border-radius: 50%;
}

@keyframes trofeo-aparece {
    from { opacity: 0; transform: translate(-50%, -70%) scale(0.2) rotate(-25deg); }
    to { opacity: 1; transform: translate(-50%, -70%) scale(1) rotate(0); }
}

@keyframes trofeo-flota {
    50% { transform: translateY(-3px); box-shadow: 0 0 0 1px #3a2a08, 0 0 18px rgba(251, 191, 36, 1); }
}

/* ===== La historia: capítulos que se abren y escenas ===== */
details.ff-capitulo > summary {
    list-style: none;
    cursor: pointer;
}

details.ff-capitulo > summary::-webkit-details-marker {
    display: none;
}

details.ff-capitulo > summary::after {
    content: "▾";
    float: right;
    transition: transform 0.25s ease;
}

details.ff-capitulo[open] > summary::after {
    transform: rotate(180deg);
}

details.ff-capitulo[open] > p,
details.ff-capitulo[open] > .ff-ver-escena {
    animation: tarjeta-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

details.ff-capitulo[open] > p:nth-of-type(2) { animation-delay: 0.1s; }
details.ff-capitulo[open] > p:nth-of-type(3) { animation-delay: 0.2s; }
details.ff-capitulo[open] > p:nth-of-type(n + 4) { animation-delay: 0.3s; }

.ff-ver-escena {
    justify-self: start;
}

/* ===== Las cinemáticas nuevas: pinturas de fondo, retratos de jefes y ambiente ===== */
.cine-fondo.cine-pintura {
    image-rendering: auto;
    object-position: center;
}

/* Una pintura enmarcada (el jefe de una guarida). */
.cine-retrato {
    bottom: 16%;
    width: 34%;
}

.cine-cuadro {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 4px solid #d4a340;
    border-radius: 6px;
    box-shadow: 0 0 0 2px #3a2a08, 0 10px 24px rgba(0, 0, 0, 0.7), 0 0 26px rgba(251, 191, 36, 0.35);
    -webkit-user-select: none;
    user-select: none;
}

/* Flota despacio (un cuadro encantado, Aurelio hablando). */
.cine-flota .cine-sprite,
.cine-flota .cine-cuadro {
    animation: cine-flota 3.4s ease-in-out infinite;
}

@keyframes cine-flota {
    50% { transform: translateY(calc(var(--px, 3px) * -2)); }
}

/* El cuadro cae: parpadea, se sacude y se apaga. */
.cine-retrato.cine-cae .cine-cuadro {
    animation: cuadro-cae 2.2s ease-in 0.5s forwards;
}

@keyframes cuadro-cae {
    0% { filter: none; transform: none; }
    20% { filter: brightness(2) contrast(1.4); transform: translateX(-3px) rotate(-2deg); }
    40% { filter: brightness(1.3); transform: translateX(3px) rotate(2deg); }
    100% { filter: grayscale(1) brightness(0.3); transform: translateY(18%) scale(0.85) rotate(6deg); opacity: 0; }
}

/* El ambiente: una capa que se mueve encima de toda la escena. */
.cine-ambiente {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ambiente-niebla::before,
.ambiente-niebla::after {
    content: "";
    position: absolute;
    inset: -10% -60%;
    background:
        radial-gradient(ellipse 30% 14% at 20% 60%, rgba(220, 225, 255, 0.28), transparent 70%),
        radial-gradient(ellipse 36% 12% at 70% 40%, rgba(220, 225, 255, 0.22), transparent 70%),
        radial-gradient(ellipse 28% 10% at 45% 82%, rgba(220, 225, 255, 0.25), transparent 70%);
    animation: niebla-pasa 16s linear infinite;
}

.ambiente-niebla::after {
    animation-duration: 24s;
    animation-direction: reverse;
    opacity: 0.7;
}

@keyframes niebla-pasa {
    from { transform: translateX(-12%); }
    to { transform: translateX(12%); }
}

.ambiente-chispas {
    background-image:
        radial-gradient(circle, rgba(255, 224, 150, 0.95) 0 1.5px, transparent 2.5px),
        radial-gradient(circle, rgba(255, 190, 90, 0.8) 0 1px, transparent 2px);
    background-size: 70px 90px, 110px 130px;
    background-position: 10px 20px, 50px 60px;
    opacity: 0.7;
    animation: chispas-suben 7s linear infinite;
}

@keyframes chispas-suben {
    from { background-position: 10px 20px, 50px 60px; }
    to { background-position: 10px -70px, 50px -70px; }
}

.ambiente-lluvia {
    background-image: linear-gradient(105deg, transparent 0 46%, rgba(190, 215, 255, 0.55) 47% 50%, transparent 51%);
    background-size: 22px 38px;
    opacity: 0.55;
    animation: lluvia-cae 0.6s linear infinite;
}

@keyframes lluvia-cae {
    from { background-position: 0 0; }
    to { background-position: -10px 38px; }
}

/* Quien prefiere menos movimiento: todo queda quieto (el texto y los cambios de pantalla siguen). */
@media (prefers-reduced-motion: reduce) {
    .entra,
    .entra .lista > li,
    .entra .panel,
    .entra .bloque,
    .entra .barra-relleno,
    .pestana[aria-current="page"] svg,
    .dialogo[open],
    .dialogo[open]::backdrop,
    .mapa-guarida.libre,
    .mapa-trofeo,
    details.ff-capitulo[open] > p,
    details.ff-capitulo[open] > .ff-ver-escena,
    .cine-flota .cine-sprite,
    .cine-flota .cine-cuadro,
    .cine-ambiente,
    .cine-ambiente::before,
    .cine-ambiente::after {
        animation: none;
    }
}


/* ===== (v57) La Biblioteca prohibida: moraleja, lista de pergaminos y sagas que vendrán ===== */
.rollo-moraleja {
    position: relative;
    margin: 18px 0 6px;
    padding: 16px 18px 14px;
    font-size: 1.12rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    color: #4a2c0a;
    background: rgba(212, 163, 64, 0.2);
    border: 1px solid rgba(139, 94, 20, 0.55);
    border-radius: var(--esquina);
}

.rollo-moraleja span {
    display: block;
    margin-bottom: 6px;
    font-family: var(--letra-titulo);
    font-size: 0.7rem;
    font-style: normal;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #8b5e14;
}

.pergamino-fila.siguiente {
    border-color: rgba(251, 191, 36, 0.8);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.3);
}

.pergamino-fila.cerrado {
    opacity: 0.6;
    cursor: default;
}

.pergamino-fila.leido small {
    color: #86efac;
}

.sagas-futuras {
    display: grid;
    gap: 10px;
}

.saga-futura {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    list-style: none;
    background: var(--hundido, rgba(0, 0, 0, 0.25));
    border: 1px dashed var(--borde);
    border-radius: var(--esquina);
    opacity: 0.7;
}

.saga-futura.insinuada {
    opacity: 1;
    border-style: solid;
    border-color: rgba(167, 139, 250, 0.6);
}

.saga-futura-icono {
    font-size: 1.6rem;
}

.saga-futura span:last-child {
    display: grid;
    gap: 2px;
}

.saga-futura small {
    color: var(--texto-suave);
    line-height: 1.4;
}


/* ===== (v58) La Torre y la Mazmorra: la secuencia del turno y los ataques especiales ===== */

/* La secuencia: 1 Tú → 2 tu mascota → 3 la criatura → 4 el fin del turno. Después de actuar, cada paso se enciende cuando le toca. */
.ff-turnos {
    display: grid;
    gap: 10px;
    margin: 4px 0 2px;
    padding: 0;
    list-style: none;
}

.ff-turno {
    position: relative;
    display: grid;
    grid-template-columns: 22px 26px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 20, 0.85);
    background: linear-gradient(180deg, #2a42b0 0%, #17267e 60%, #0a1258 100%);
    border: 2px solid #8fa0ff;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #060a3a, 0 0 0 1px #060a3a;
}

/* La flechita que une un paso con el siguiente. */
.ff-turno:not(:last-child)::after {
    content: "▾";
    position: absolute;
    left: 15px;
    bottom: -12px;
    z-index: 2;
    font-size: 0.8rem;
    line-height: 1;
    color: #cfd8ff;
    text-shadow: 0 0 3px #060a3a;
}

.ff-turno-numero {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-family: var(--letra-titulo);
    font-size: 0.7rem;
    font-weight: 800;
    color: #0a1258;
    text-shadow: none;
    background: #cfd8ff;
    border-radius: 50%;
}

.ff-turno-icono {
    font-size: 1.15rem;
    text-align: center;
}

.ff-turno-texto {
    display: grid;
    min-width: 0;
}

.ff-turno-texto b {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: #cfd8ff;
}

.ff-turno-texto small {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.ff-turno-tuyo { border-color: #7dd3fc; }
.ff-turno-mascota { border-color: #86efac; }
.ff-turno-criatura { border-color: #fda4af; }
.ff-turno-fin { border-color: #c4b5fd; }
.ff-turno-cae { border-color: #fde68a; }

/* El ataque especial de la criatura: dorado y que se note. */
.ff-turno-especial {
    border-color: #ffd84a;
    background: linear-gradient(180deg, #6a3a0a 0%, #4a2406 55%, #2a1203 100%);
    box-shadow: inset 0 0 0 1px #2a1203, 0 0 0 1px #2a1203, 0 0 10px rgba(255, 216, 74, 0.55);
}

.ff-turno-especial .ff-turno-texto b { color: #ffe9a0; }

/* Lo que va a pasar: en el paso que te toca (el tuyo) la manito late. */
.ff-turnos.plan .ff-turno.ahora {
    animation: turno-late 1.1s ease-in-out infinite;
}

@keyframes turno-late {
    50% { box-shadow: inset 0 0 0 1px #060a3a, 0 0 0 1px #060a3a, 0 0 12px rgba(125, 211, 252, 0.8); }
}

/* Lo que acaba de pasar: cada paso entra en su momento (el mismo orden que las animaciones de la escena). */
.ff-turnos.jugado .ff-turno {
    animation: turno-enciende 0.35s steps(4) both;
}

@keyframes turno-enciende {
    from { opacity: 0.18; transform: translateX(-10px); filter: grayscale(1); }
    to { opacity: 1; transform: none; filter: none; }
}

/* --- El banner del ataque especial: nombre grande y lo que hace --- */
.ff-especial {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 3%;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    background: rgba(8, 6, 24, 0.9);
    border: 2px solid var(--esp, #ffd84a);
    border-radius: 8px;
    box-shadow: 0 0 12px var(--esp, #ffd84a);
    opacity: 0;
    animation: ff-especial-sale 2.3s steps(1) both;
}

.ff-especial-icono { font-size: 1.7rem; }
.ff-especial-texto { display: grid; min-width: 0; }
.ff-especial-texto b { font-family: var(--letra-titulo); font-size: 0.82rem; color: var(--esp, #ffd84a); }
.ff-especial-texto small { font-size: 0.72rem; font-weight: 600; line-height: 1.25; }

.ff-especial-veneno { --esp: #7dff6a; }
.ff-especial-drenar { --esp: #ff4d6d; }
.ff-especial-sellar { --esp: #c4b5fd; }
.ff-especial-coraza { --esp: #cbd5e1; }
.ff-especial-barrera { --esp: #7dd3fc; }
.ff-especial-carga { --esp: #ffb020; }
.ff-especial-reflejo { --esp: #e0f2fe; }
.ff-especial-descarga { --esp: #ff5a36; }

@keyframes ff-especial-sale {
    0% { opacity: 0; transform: translateY(10px); }
    8%, 88% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

/* --- El efecto de cada ataque especial sobre la escena --- */
.ff-sp {
    position: absolute;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
}

/* Carga: anillos de energía que se juntan sobre la criatura. */
.ff-sp-carga {
    inset: -18%;
    border-radius: 50%;
    border: 3px solid #ffd84a;
    box-shadow: 0 0 14px #ffb020, inset 0 0 14px #ffb020;
    animation: sp-carga 1.3s steps(8) both;
}

@keyframes sp-carga {
    0% { opacity: 0; transform: scale(1.9); }
    20% { opacity: 1; }
    60% { opacity: 1; transform: scale(0.95); }
    80% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(0.9); }
}

/* Descarga: una onda de choque que cruza la escena. */
.ff-sp-descarga {
    inset: -60%;
    border-radius: 50%;
    border: 5px solid #ff5a36;
    box-shadow: 0 0 18px #ff9a1f, inset 0 0 18px #ff5a36;
    animation: sp-descarga 0.8s steps(8) both;
}

@keyframes sp-descarga {
    0% { opacity: 1; transform: scale(0.1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: scale(2.4); }
}

.ff-escena.ff-sacude {
    animation: ff-sacude 0.5s steps(8) 0.8s;
}

@keyframes ff-sacude {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-4px, 2px); }
    50% { transform: translate(4px, -2px); }
    75% { transform: translate(-3px, -2px); }
}

/* Barrera: un hexágono de cristal azul. */
.ff-sp-barrera {
    inset: -12%;
    background: radial-gradient(circle, rgba(170, 230, 255, 0.5), rgba(70, 140, 255, 0.35));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    animation: sp-barrera 1.3s steps(6) both;
}

@keyframes sp-barrera {
    0% { opacity: 0; transform: scale(0.3); }
    25%, 70% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.1); }
}

/* Coraza: placas de metal que aparecen en franjas. */
.ff-sp-coraza {
    inset: 4%;
    background: repeating-linear-gradient(45deg, rgba(220, 226, 240, 0.7) 0 4px, rgba(90, 100, 130, 0.5) 4px 8px);
    clip-path: ellipse(48% 50% at 50% 50%);
    animation: sp-coraza 1.1s steps(5) both;
}

@keyframes sp-coraza {
    0% { opacity: 0; }
    30%, 60% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* Espejo: un brillo que cruza de lado a lado. */
.ff-sp-reflejo {
    inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.95) 48%, rgba(180, 225, 255, 0.8) 52%, transparent 62%);
    background-size: 260% 100%;
    animation: sp-reflejo 1.1s steps(8) both;
}

@keyframes sp-reflejo {
    0% { opacity: 1; background-position: 130% 0; }
    100% { opacity: 0; background-position: -30% 0; }
}

/* Veneno (sobre tu héroe): burbujas verdes que suben. */
.ff-sp-veneno {
    inset: -10% 0;
    background:
        radial-gradient(circle at 25% 80%, #a8ff6a 0 3px, transparent 4px),
        radial-gradient(circle at 60% 90%, #7dff6a 0 4px, transparent 5px),
        radial-gradient(circle at 80% 70%, #c8ff8a 0 3px, transparent 4px),
        radial-gradient(circle at 45% 60%, #7dff6a 0 2px, transparent 3px);
    animation: sp-veneno 1.2s steps(8) both;
}

@keyframes sp-veneno {
    0% { opacity: 0; transform: translateY(24%); }
    25% { opacity: 1; }
    80% { opacity: 1; transform: translateY(-18%); }
    100% { opacity: 0; transform: translateY(-30%); }
}

/* Sello (sobre tu héroe): cadenas que lo atan y un candado. */
.ff-sp-sellar {
    inset: 10% -6%;
    background: repeating-linear-gradient(0deg, transparent 0 14%, #cfd6ff 14% 18%, #6a5ab8 18% 22%, transparent 22% 34%);
    animation: sp-sellar 1.2s steps(6) both;
}

.ff-sp-sellar::after {
    content: "🔒";
    position: absolute;
    left: 50%;
    top: 22%;
    font-size: 1.5rem;
    transform: translateX(-50%);
}

@keyframes sp-sellar {
    0% { opacity: 0; transform: scaleX(0.2); }
    30%, 70% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1.1); }
}

/* Drenar (sobre tu héroe): chispas rojas que se le escapan hacia arriba (hacia la criatura). */
.ff-sp-drenar {
    inset: -20% 0;
    background:
        radial-gradient(circle, #ff4d6d 0 2px, transparent 3px) 0 0 / 14px 18px,
        radial-gradient(circle, #ff9aa8 0 1.5px, transparent 2.5px) 7px 9px / 14px 18px;
    animation: sp-drenar 1.2s steps(8) both;
}

@keyframes sp-drenar {
    0% { opacity: 0; background-position: 0 24px, 7px 33px; }
    25%, 75% { opacity: 1; }
    100% { opacity: 0; background-position: 0 -24px, 7px -15px; }
}

/* Quien prefiere menos movimiento: el banner y los pasos se quedan quietos y a la vista. */
@media (prefers-reduced-motion: reduce) {
    .ff-turnos.jugado .ff-turno,
    .ff-turnos.plan .ff-turno.ahora,
    .ff-escena.ff-sacude {
        animation: none;
    }

    .ff-sp {
        display: none;
    }

    .ff-especial {
        opacity: 1;
        animation: none;
    }
}


/* ===== (v60) La batalla, más clara: vida a la vista, orden del turno, intención, golpes con impacto y tarjetas ===== */

/* El héroe un poco más al centro, para que los dos se vean bien. */
.ff-heroe {
    left: calc(var(--px) * 150);
}

.ff-mascota {
    left: calc(var(--px) * 118);
}

/* --- Las barras de vida en la escena --- */
.ff-hp {
    position: relative;
    display: block;
    width: 100%;
    height: 12px;
    overflow: hidden;
    background: #1a0d22;
    border: 1px solid #05030c;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.ff-hp i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
}

.ff-hp-relleno {
    background: linear-gradient(180deg, #7dff9a, #22a34a);
}

.ff-hp.de-enemigo .ff-hp-relleno {
    background: linear-gradient(180deg, #ff8a8a, #d0283a);
}

.ff-hp.grave .ff-hp-relleno {
    background: linear-gradient(180deg, #ffd27a, #e07a10);
}

/* Lo que se perdió: un trozo claro que se encoge hasta la vida de ahora. */
.ff-hp-fantasma {
    width: var(--ahora);
    background: #fff6c8;
    animation: hp-fantasma 0.7s ease-out both;
}

@keyframes hp-fantasma {
    from { width: var(--antes); }
    to { width: var(--ahora); }
}

.ff-hp b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: -1px 0 #05030c, 1px 0 #05030c, 0 -1px #05030c, 0 1px #05030c;
}

/* La de la criatura, arriba a la izquierda, con su nombre y sus estados. */
.ff-hud {
    position: absolute;
    z-index: 5;
    display: grid;
    gap: 2px;
    pointer-events: none;
}

.ff-hud-enemigo {
    top: 4%;
    left: 3%;
    width: 46%;
}

.ff-hud b {
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: -1px 0 #05030c, 1px 0 #05030c, 0 -1px #05030c, 0 1px #05030c;
}

.ff-estados {
    min-height: 1em;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 2px #05030c;
}

/* La del héroe, encima de su cabeza. */
.ff-encima {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 5;
    display: grid;
    gap: 1px;
    width: calc(var(--px) * 34);
    margin-bottom: 2px;
    transform: translateX(-50%);
    pointer-events: none;
}

/* --- El orden del turno: las caras arriba a la derecha --- */
.ff-orden {
    position: absolute;
    top: 3%;
    right: 2%;
    z-index: 5;
    display: flex;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.ff-orden-cara {
    display: grid;
    justify-items: center;
    gap: 1px;
}

.ff-orden-marco {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    background: #0a1258;
    border: 2px solid #8fa0ff;
    border-radius: 6px;
    transform: rotate(45deg);
    box-shadow: 0 0 0 1px #05030c;
}

.ff-orden-marco img {
    width: 150%;
    height: auto;
    image-rendering: pixelated;
    transform: rotate(-45deg) translateY(8%);
}

.ff-orden-cara small {
    margin-top: 2px;
    font-size: 0.56rem;
    font-weight: 800;
    color: #cfd8ff;
    text-shadow: -1px 0 #05030c, 1px 0 #05030c, 0 -1px #05030c, 0 1px #05030c;
}

.ff-orden-tuyo .ff-orden-marco { border-color: #7dd3fc; }
.ff-orden-mascota .ff-orden-marco { border-color: #86efac; }
.ff-orden-criatura .ff-orden-marco { border-color: #fda4af; }

/* Antes de actuar: tu cara brilla (te toca), las demás esperan apagadas. */
.ff-orden.plan .ff-orden-cara:not(.ahora) {
    opacity: 0.6;
}

.ff-orden.plan .ahora .ff-orden-marco {
    border-color: #ffe45a;
    animation: orden-ahora 1.1s ease-in-out infinite;
}

.ff-orden.plan .ahora small {
    color: #ffe45a;
}

@keyframes orden-ahora {
    50% { box-shadow: 0 0 0 1px #05030c, 0 0 10px #ffe45a; }
}

/* Después de actuar: cada cara se enciende cuando le toca y queda marcada. */
.ff-orden.jugado .ff-orden-cara {
    animation: orden-turno 0.5s steps(4) both;
}

@keyframes orden-turno {
    0% { opacity: 0.35; transform: scale(1); }
    40% { opacity: 1; transform: scale(1.25); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- Lo que va a hacer la criatura: un globo bajo su nombre --- */
.ff-globo {
    position: absolute;
    top: 22%;
    left: 3%;
    z-index: 5;
    max-width: 58%;
    margin: 0;
    padding: 4px 7px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    background: rgba(10, 18, 88, 0.88);
    border: 2px solid #f1f3ff;
    border-radius: 7px;
    box-shadow: 0 0 0 1px #060a3a;
}

.ff-globo.aviso {
    border-color: #ffe45a;
}

.ff-globo.peligro {
    border-color: #ff5a5a;
    background: rgba(70, 8, 16, 0.92);
    animation: globo-peligro 1s ease-in-out infinite;
}

@keyframes globo-peligro {
    50% { box-shadow: 0 0 0 1px #060a3a, 0 0 12px rgba(255, 90, 90, 0.85); }
}

/* --- Golpes con impacto --- */
/* El tajo: un arco grande que cruza a la criatura (blanco, dorado si es crítico; enorme con la Voluntad). */
.ff-arco {
    position: absolute;
    top: -18%;
    left: -22%;
    z-index: 4;
    width: 144%;
    aspect-ratio: 1;
    border-radius: 50%;
    border-right: 10px solid #fff;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    filter: drop-shadow(0 0 4px #dfe8ff);
    opacity: 0;
    pointer-events: none;
    animation: ff-arco 0.38s steps(5) 0.2s;
}

.ff-arco.critico {
    border-right-color: #ffe45a;
    border-right-width: 16px;
    filter: drop-shadow(0 0 8px #ffb020);
}

.ff-arco.voluntad {
    top: -45%;
    left: -50%;
    width: 200%;
    border-right-color: #ffe45a;
    border-right-width: 24px;
    filter: drop-shadow(0 0 12px #ffd23c);
    animation-duration: 0.55s;
}

@keyframes ff-arco {
    0% { opacity: 1; transform: rotate(-70deg) scale(0.6); }
    60% { opacity: 1; transform: rotate(20deg) scale(1); }
    100% { opacity: 0; transform: rotate(40deg) scale(1.05); }
}

.ff-aviso.ff-critico {
    top: 30%;
    z-index: 6;
    font-size: 0.85rem;
    color: #1a1200;
    background: #ffe45a;
    animation: ff-anunciar 1.1s steps(1) 0.3s, ff-critico-salta 0.3s steps(3) 0.3s;
}

@keyframes ff-critico-salta {
    50% { transform: translateX(-50%) scale(1.3); }
}

/* El Golpe de Voluntad: toda la escena destella en dorado. */
.ff-escena.ff-destella::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(circle at 35% 55%, rgba(255, 228, 90, 0.85), rgba(255, 176, 32, 0.2) 60%, transparent);
    opacity: 0;
    pointer-events: none;
    animation: ff-destella 0.6s steps(4) 0.2s;
}

@keyframes ff-destella {
    0%, 100% { opacity: 0; }
    30% { opacity: 1; }
}

/* ¡Victoria!: un cartel grande, después de ver caer a la criatura. */
.ff-victoria {
    position: absolute;
    top: 42%;
    left: 50%;
    z-index: 7;
    margin: 0;
    font-family: var(--letra-titulo);
    font-size: clamp(1.4rem, 9cqw, 2.4rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #ffe45a;
    text-shadow: -2px 0 #3a1a00, 2px 0 #3a1a00, 0 -2px #3a1a00, 0 2px #3a1a00, 0 0 16px rgba(255, 176, 32, 0.9);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: ff-victoria 1.6s steps(8) 1s both;
}

@keyframes ff-victoria {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* La criatura de élite: un aura dorada. */
.ff-enemigo.elite .ff-sprite {
    filter: drop-shadow(0 0 3px #ffd23c) drop-shadow(0 0 1px #fff3);
}

/* El botín espera a que termine la victoria. */
.ff-botin.tras-victoria {
    animation: ff-aparecer 0.25s steps(3) 2.2s backwards;
}

/* --- Las tarjetas: el botín y las rutas --- */
.ff-cartas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.ff-cartas-dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ff-carta {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
    min-height: 150px;
    padding: 12px 8px 10px;
    font: inherit;
    text-align: center;
    color: #3a2508;
    text-shadow: none;
    background: linear-gradient(180deg, #f6e3b4 0%, #e9c983 100%);
    border: 3px solid #8b5e14;
    border-radius: var(--esquina);
    box-shadow: inset 0 0 0 2px #fff3c8, 0 0 0 2px #2a1a06, 0 6px 14px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    animation: carta-entra 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ff-carta:active {
    transform: scale(0.96);
}

@keyframes carta-entra {
    from { opacity: 0; transform: translateY(16px) scale(0.9); }
    to { opacity: 1; transform: none; }
}

.ff-carta-icono {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    font-size: 1.9rem;
    background: radial-gradient(circle, #fff8dc, #d8b46a);
    border: 2px solid #8b5e14;
    border-radius: 8px;
}

.ff-carta-nombre {
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.15;
    color: #2a1a06;
}

.ff-carta-texto {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
}

.ff-carta-tipo {
    margin-top: auto;
    padding: 2px 8px;
    font-size: 0.66rem;
    font-weight: 800;
    color: #fff;
    background: #6b4a14;
    border-radius: var(--esquina);
}

.ff-carta.tipo-ofensiva .ff-carta-tipo { background: #b8323c; }
.ff-carta.tipo-defensiva .ff-carta-tipo { background: #2f6fb8; }
.ff-carta.tipo-magica .ff-carta-tipo { background: #7a3cc0; }
.ff-carta.tipo-tactica .ff-carta-tipo { background: #2f8a5a; }

/* Un don raro: borde dorado brillante y su cinta. */
.ff-carta.don {
    border-color: #ffb020;
    box-shadow: inset 0 0 0 2px #fff3c8, 0 0 0 2px #2a1a06, 0 0 16px rgba(255, 176, 32, 0.7);
}

.ff-carta-cinta {
    position: absolute;
    top: -9px;
    left: 50%;
    padding: 1px 8px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #2a1a06;
    white-space: nowrap;
    background: #ffd23c;
    border: 1px solid #8b5e14;
    border-radius: 4px;
    transform: translateX(-50%);
}

/* Las rutas: el desafío en rojo, el sendero en verde. */
.ff-ruta.ruta-desafio {
    background: linear-gradient(180deg, #f8d0c8 0%, #e79a8a 100%);
    border-color: #8b2a1a;
}

.ff-ruta.ruta-calma {
    background: linear-gradient(180deg, #d6f5d0 0%, #9fd79a 100%);
    border-color: #2a6b2a;
}

.ff-ruta.ruta-desafio .ff-carta-tipo { background: #b8323c; }
.ff-ruta.ruta-calma .ff-carta-tipo { background: #2f8a5a; }

/* La secuencia del turno jugado, más compacta (las caras de arriba ya dicen el orden). */
.ff-turnos.jugado {
    gap: 6px;
}

.ff-turnos.jugado .ff-turno {
    padding: 3px 8px;
}

.ff-turnos.jugado .ff-turno-texto {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 6px;
}

.ff-turnos.jugado .ff-turno:not(:last-child)::after {
    bottom: -9px;
}

@media (prefers-reduced-motion: reduce) {
    .ff-hp-fantasma,
    .ff-orden.jugado .ff-orden-cara,
    .ff-orden.plan .ahora .ff-orden-marco,
    .ff-globo.peligro,
    .ff-carta {
        animation: none;
    }

    .ff-arco,
    .ff-escena.ff-destella::after {
        display: none;
    }

    .ff-victoria {
        opacity: 1;
        animation: none;
    }
}

/* (v60) El nombre de lo que se usa va un poco más abajo, para no tapar la vida de la criatura ni el orden del turno. */
.ff-escena .ff-anuncio {
    top: auto;
    bottom: 5%;
}


/* ===== (v61) En horizontal (el teléfono girado): la batalla, las cinemáticas, el mapa y los minijuegos aprovechan el ancho =====
   Un iPhone no deja bloquear la orientación a una app instalada: el juego sigue igual en vertical y, si giras el teléfono,
   estas pantallas se reacomodan. «max-height: 540px» deja fuera a las tabletas y a las ventanas de la compu. */
@media (orientation: landscape) and (max-height: 540px) {

    /* --- La Torre y la Mazmorra: la escena grande a la izquierda; el orden, el mensaje y los comandos a la derecha --- */
    .minijuego.torre {
        padding-left: calc(env(safe-area-inset-left) + 12px);
        padding-right: calc(env(safe-area-inset-right) + 12px);
        align-items: start;
    }

    .torre-caja {
        width: min(1000px, 100%);
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        column-gap: 10px;
        align-items: start;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    }

    .torre-caja > * {
        grid-column: 2;
    }

    .torre-caja > .minijuego-barra {
        grid-column: 1 / -1;
    }

    .torre-caja > .ff-escena {
        grid-column: 1;
        grid-row: 2 / span 10;
        position: sticky;
        top: 0;
    }

    .torre-caja .ff-mensaje {
        min-height: 0;
        font-size: 0.78rem;
    }

    .torre-caja .ff-comando {
        min-height: 31px;
    }

    .torre-caja .ff-comandos {
        gap: 0;
        padding: 4px 6px 4px 4px;
    }

    .torre-caja .ff-ficha {
        padding: 5px 8px;
    }

    .torre-caja .ff-turnos.jugado .ff-turno {
        padding: 2px 8px;
    }

    /* El botín y las rutas: la escena se encoge y las tarjetas ocupan casi todo el ancho, en una fila. */
    .torre-caja:has(.ff-cartas) {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 2.4fr);
    }

    .torre-caja .ff-cartas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .torre-caja .ff-cartas.ff-cartas-dos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .torre-caja .ff-carta {
        min-height: 0;
        padding: 8px 6px;
    }

    .torre-caja .ff-carta-icono {
        width: 38px;
        height: 38px;
        font-size: 1.4rem;
    }

    .torre-caja .ff-carta-texto {
        font-size: 0.68rem;
    }

    /* --- Las cinemáticas: una escena ancha (16:9) que ocupa toda la pantalla, con el texto debajo --- */
    .cine {
        --alto-escena: min(calc(100dvh - 4.2rem), 56.25vw);
    }

    .cine-escena {
        width: calc(var(--alto-escena) * 16 / 9);
        height: var(--alto-escena);
        aspect-ratio: auto;
    }

    .cine-barra {
        width: min(100vw, calc(var(--alto-escena) * 16 / 9));
        min-height: 4.2rem;
        padding: 8px 16px 0;
    }

    .cine-texto {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .cine-toma {
        --px: calc(var(--alto-escena) / 160);
    }

    /* --- Los minijuegos del arcade: el lienzo ancho --- */
    .minijuego:not(.torre):not(.voces) .minijuego-caja {
        width: min(900px, 100%);
    }

    .minijuego-lienzo {
        height: calc(100dvh - 8rem);
        min-height: 200px;
    }

    /* --- El mapa del reino: el mapa a la izquierda y todo lo demás a la derecha --- */
    body:has(#pantalla-mapa:not([hidden])) .contenido,
    body:has(#pantalla-mapa:not([hidden])) .cabecera,
    body:has(#pantalla-mapa:not([hidden])) .pestanas {
        max-width: 980px;
    }

    #pantalla-mapa:not([hidden]) {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
        column-gap: 14px;
        align-items: start;
    }

    #pantalla-mapa > * {
        grid-column: 2;
    }

    #pantalla-mapa > .mapa-pixel {
        grid-column: 1;
        grid-row: 1 / span 14;
    }
}

/* ===== (v62) «El Centinela», el libro largo de Historia ===== */
.novela-texto p {
    text-indent: 1.4em;
}

.novela-texto p:first-child {
    text-indent: 0;
}

.novela-texto p:first-child::first-letter {
    float: left;
    margin: 0.05em 0.1em 0 0;
    font-family: var(--letra-titulo);
    font-size: 2.6em;
    line-height: 0.85;
    color: #8b2a1a;
}

.novela-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    margin: 12px 0;
}

.novela-libro {
    margin: 14px 0 4px;
    padding-bottom: 4px;
    font-family: var(--letra-titulo);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--oro, #fbbf24);
    border-bottom: 1px solid rgba(251, 191, 36, 0.35);
}

.novela-indice .filas-enlace,
.novela-indice {
    display: grid;
    gap: 6px;
}

.novela-fila.cerrado {
    opacity: 0.55;
    cursor: default;
}

.novela-fila.leido small,
.novela-fila.leido b {
    color: #86efac;
}

.novela-fila.aqui {
    border-color: rgba(251, 191, 36, 0.8);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}

.novela-fila small {
    display: block;
    font-weight: 500;
}


/* ===== (v63) Habilidades a la vista y un efecto propio para cada técnica ===== */

/* Las habilidades y dones que se notan en un golpe: etiquetas doradas que suben junto a tu héroe, una tras otra. */
.ff-habs {
    position: absolute;
    right: calc(100% - 6px);
    bottom: 38%;
    z-index: 6;
    display: grid;
    justify-items: end;
    gap: 3px;
    pointer-events: none;
}

.ff-hab {
    display: block;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    color: #2a1a00;
    white-space: nowrap;
    text-shadow: none;
    background: linear-gradient(180deg, #fff3a8, #ffd23c);
    border: 1px solid #6a4a00;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(255, 210, 60, 0.75);
    opacity: 0;
    animation: ff-hab-sale 1.9s ease-out both;
}

@keyframes ff-hab-sale {
    0% { opacity: 0; transform: translateY(8px) scale(0.8); }
    12% { opacity: 1; transform: translateY(0) scale(1.12); }
    22% { transform: scale(1); }
    78% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* El panel con todo lo que sabes hacer. */
.ff-habilidades {
    padding: 6px 10px;
}

.ff-habilidades > summary {
    cursor: pointer;
    list-style: none;
    font-weight: 800;
}

.ff-habilidades > summary::-webkit-details-marker {
    display: none;
}

.ff-habilidades > summary::after {
    content: "▾";
    float: right;
}

.ff-habilidades[open] > summary::after {
    content: "▴";
}

.ff-habilidades summary small {
    font-weight: 600;
    color: #cfd8ff;
}

.ff-habilidades ul {
    display: grid;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 0;
    list-style: none;
}

.ff-hab-fila {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.ff-hab-icono {
    font-size: 1.3rem;
    text-align: center;
}

.ff-hab-fila b {
    font-size: 0.82rem;
}

.ff-hab-fila em {
    margin-left: 6px;
    padding: 0 6px;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 800;
    color: #0a1258;
    background: #cfd8ff;
    border-radius: var(--esquina);
}

.ff-hab-fila small {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: #dfe6ff;
}

/* --- Un efecto para cada técnica --- */

/* Quebrar: el suelo se agrieta bajo la criatura con una onda de choque. */
.ff-quebrar {
    inset: 20% -10% -4%;
    background:
        radial-gradient(ellipse at 50% 90%, transparent 22%, rgba(255, 255, 255, 0.9) 24% 28%, transparent 30%),
        conic-gradient(from 200deg at 50% 100%, transparent 0 8%, #fff 8.5% 9.5%, transparent 10% 22%, #ffd9a0 22.5% 23.5%, transparent 24% 40%, #fff 40.5% 41.5%, transparent 42%);
    animation: ff-quebrar 0.55s steps(6) 0.15s;
}

@keyframes ff-quebrar {
    0% { opacity: 1; transform: scale(0.3); }
    60% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.25); }
}

/* Analizar: una línea de luz recorre a la criatura de arriba abajo y aparece una lupa. */
.ff-analizar {
    inset: 0 6%;
    background: linear-gradient(180deg, transparent 0 46%, rgba(125, 255, 200, 0.95) 48% 52%, transparent 54%);
    background-size: 100% 220%;
    animation: ff-analizar 0.9s steps(9) 0.12s;
}

.ff-analizar::after {
    content: "🔍";
    position: absolute;
    top: -8%;
    right: -4%;
    font-size: 1.5rem;
    animation: ff-lupa 0.9s steps(6) both;
}

@keyframes ff-analizar {
    0% { opacity: 1; background-position: 0 100%; }
    100% { opacity: 0.2; background-position: 0 -20%; }
}

@keyframes ff-lupa {
    0% { opacity: 0; transform: scale(0.4); }
    40%, 80% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}

/* Intimidar: tres ondas oscuras salen de ti hacia la criatura. */
.ff-intimidar {
    inset: -10%;
    border-radius: 50%;
    border: 4px solid rgba(180, 90, 255, 0.95);
    box-shadow: 0 0 16px rgba(160, 60, 255, 0.9), inset 0 0 18px rgba(80, 0, 140, 0.9);
    animation: ff-intimidar 0.9s steps(7) 0.12s;
}

@keyframes ff-intimidar {
    0% { opacity: 0; transform: scale(2.2); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: scale(0.6); }
}

/* Golpe certero: una mira dorada se cierra sobre la criatura. */
.ff-certero {
    inset: 8% 14%;
    border-radius: 50%;
    border: 3px solid #ffd23c;
    background:
        linear-gradient(#ffd23c, #ffd23c) 50% 0 / 3px 100% no-repeat,
        linear-gradient(#ffd23c, #ffd23c) 0 50% / 100% 3px no-repeat;
    box-shadow: 0 0 12px rgba(255, 210, 60, 0.9);
    animation: ff-certero 0.6s steps(6) 0.12s;
}

@keyframes ff-certero {
    0% { opacity: 0; transform: scale(2.4) rotate(45deg); }
    50% { opacity: 1; transform: scale(1) rotate(0); }
    100% { opacity: 0; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
    .ff-hab {
        opacity: 1;
        animation: none;
    }

    .ff-quebrar,
    .ff-analizar,
    .ff-intimidar,
    .ff-certero {
        display: none;
    }
}

/* ===== v65: modos de juego ===== */
.modos .pildora span { text-align: left; align-items: flex-start; }
.modos .pildora small { display: block; opacity: .8; font-size: .78rem; line-height: 1.35; margin-top: .15rem; }
.pildora.apagada { opacity: .5; }
.pildora.apagada input { pointer-events: none; }
.plegable-reglas { margin: .4rem 0 .8rem; }
.plegable-reglas > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* ===== v66: el gimnasio ===== */
:root { --gym: #f59e0b; --gym-2: #fcd34d; }   /* v84: el gym es dorado (como el nivel), no rosa */

/* La fila de Hoy */
.gym-hoy {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 12px; padding: 10px 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(251, 191, 36, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.45); border-radius: var(--esquina);
}
.gym-hoy-icono { font-size: 1.7rem; line-height: 1; }
.gym-hoy-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gym-hoy-texto small { color: var(--texto-suave); font-size: 0.78rem; }
.gym-hoy-hecho { border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.08); }
.gym-hoy-activo { border-color: var(--gym-2); animation: pulso-gym 2.4s ease-in-out infinite; }
@keyframes pulso-gym { 50% { box-shadow: 0 0 14px rgba(251, 191, 36, 0.45); } }

/* Nivel de gym */
.gym-heroe { display: flex; gap: 14px; align-items: center; }
.gym-avatar { flex: 0 0 104px; width: 104px; }
.gym-avatar svg { width: 100%; height: auto; display: block; }
.gym-nivel { flex: 1; min-width: 0; }
.gym-nivel-numero { margin: 2px 0 0; font-size: 1.15rem; }
.gym-nivel-numero b { font-family: var(--letra-titulo); color: var(--gym-2); font-size: 1.5rem; }
.barra-gym .barra-relleno { background: linear-gradient(90deg, var(--gym), var(--gym-2)); box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
.gym-bono { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--esquina); border: 1px solid rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.07); font-size: 0.85rem; line-height: 1.45; }

/* La semana */
.gym-semana { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.gym-dia { display: grid; gap: 2px; justify-items: center; padding: 6px 0; border: 1px solid var(--borde); border-radius: var(--esquina); background: var(--hundido); }
.gym-dia small { color: var(--texto-suave); font-size: 0.7rem; }
.gym-dia span { min-height: 1.4em; font-size: 1.1rem; color: var(--texto-suave); }
.gym-dia.hecho { border-color: var(--gym); background: rgba(245, 158, 11, 0.14); }
.gym-dia.hoy { outline: 2px solid var(--gym-2); outline-offset: 1px; }
.gym-dia.futuro { opacity: 0.55; }

/* Elegir rutina */
.gym-rutinas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.gym-rutina { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--borde); border-radius: var(--esquina); background: var(--hundido); }
.gym-rutina.toca { border-color: var(--gym); background: rgba(245, 158, 11, 0.1); }
.gym-rutina.hecha { opacity: 0.6; }
.gym-rutina-chica { justify-content: space-between; padding: 6px 10px; }
.gym-rutina-icono { font-size: 1.6rem; }
.gym-rutina-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gym-rutina-texto small { color: var(--texto-suave); font-size: 0.76rem; }
.gym-toca { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: var(--esquina); background: var(--gym); color: #1b0b10; vertical-align: middle; }

/* El entrenamiento en curso */
.gym-sesion { display: grid; gap: 12px; }
.gym-descanso {
    position: sticky; top: calc(var(--alto-cabecera, 72px) + 6px); z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; border-radius: var(--esquina); font-size: 1.05rem;
    background: rgba(13, 10, 28, 0.96); border: 1px solid var(--gym-2); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.gym-descanso b { font-family: var(--letra-titulo); color: var(--gym-2); font-size: 1.3rem; }
.gym-ejercicio { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--borde); border-radius: var(--esquina); background: var(--hundido); }
.gym-ejercicio.completo { border-color: var(--verde); }
.gym-ejercicio h3 { margin: 0; font-size: 1rem; }
.gym-ejercicio p { margin: 0; }
.gym-pista { color: var(--gym-2); }
.gym-pista-peso { color: var(--verde); font-weight: 600; }
.gym-serie { display: grid; grid-template-columns: 24px 1fr 1fr 52px; gap: 8px; align-items: end; }
.gym-n { align-self: center; text-align: center; color: var(--texto-suave); font-weight: 700; }
.gym-serie label { display: grid; gap: 2px; }
.gym-serie label span { font-size: 0.7rem; color: var(--texto-suave); }
.gym-serie input { width: 100%; min-height: 44px; font-size: 16px; text-align: center; border-radius: var(--esquina); border: 1px solid var(--borde); background: var(--panel); color: var(--texto); }
.gym-ok { min-height: 44px; border-radius: var(--esquina); font-size: 1.3rem; border: 2px solid var(--borde); background: var(--panel); color: var(--texto-suave); cursor: pointer; }
.gym-ok[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #062b1c; }
.gym-serie.hecha input { opacity: 0.65; }
.gym-mas { display: flex; gap: 8px; }

/* Músculos */
.gym-musculos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.gym-musculo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; }
.gym-musculo .barra { grid-column: 1 / -1; margin-top: 2px; height: 9px; }
.gym-musculo-nivel { font-family: var(--letra-titulo); font-size: 0.8rem; color: var(--gym-2); }

/* Hitos e historial */
.gym-hitos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.gym-hito { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--esquina); border: 1px solid var(--borde); background: var(--hundido); opacity: 0.65; }
.gym-hito.logrado { opacity: 1; border-color: var(--gym-2); background: rgba(251, 191, 36, 0.08); }
.gym-hito > span:nth-child(2) { flex: 1; display: grid; }
.gym-hito small { color: var(--texto-suave); font-size: 0.76rem; }
.gym-hito-icono { font-size: 1.5rem; }
.gym-hito-premio { font-size: 0.8rem; color: var(--gym-2); white-space: nowrap; }
.gym-historial { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gym-historial > span { display: grid; min-width: 0; }

/* ===== v67: los ataques de las criaturas se ven ===== */
/* Cada ataque es una capa que cubre la escena; sus piezas (<i class="a"> y <i class="b">) se colocan en «puntos» (--px).
   Variables: --x0/--y0 (de dónde sale), --x1/--y1 (adónde llega), --largo/--ang (para el rayo), --tam (1,25 normal, 1,8 si es fuerte).
   Tiempos: sale a los 0,68 s (cuando la criatura embiste) y llega a los 0,9 s (cuando tu héroe parpadea). */
.ff-atq {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    --salida: 0.68s;
    --llegada: 0.88s;
}

.ff-atq i {
    position: absolute;
    display: block;
    opacity: 0;
}

/* --- Lo que pasa en el héroe (el impacto, la pieza «b») --- */
.ff-atq .b {
    left: calc(var(--px) * 150);
    bottom: calc(var(--px) * 30);
    width: calc(var(--px) * 24 * var(--tam));
    height: calc(var(--px) * 24 * var(--tam));
    margin: calc(var(--px) * -12 * var(--tam)) 0 0 calc(var(--px) * -12 * var(--tam));
}

/* --- Proyectiles: viajan de la criatura al héroe --- */
.ff-atq-escupitajo .a,
.ff-atq-aguijon .a,
.ff-atq-espectral .a,
.ff-atq-fuego .a,
.ff-atq-esquirlas .a,
.ff-atq-rafaga .a {
    left: calc(var(--px) * var(--x0));
    bottom: calc(var(--px) * (var(--y0) + var(--dy, 0)));
    animation: atq-vuelo 0.22s steps(5) var(--salida) forwards;
}

.ff-atq.falla .a { animation-duration: 0.34s; }

@keyframes atq-vuelo {
    0% { opacity: 1; left: calc(var(--px) * var(--x0)); bottom: calc(var(--px) * (var(--y0) + var(--dy, 0))); }
    99% { opacity: 1; left: calc(var(--px) * var(--x1)); bottom: calc(var(--px) * (var(--y1) + var(--dy, 0) * 0.4)); }
    100% { opacity: 0; left: calc(var(--px) * var(--x1)); bottom: calc(var(--px) * (var(--y1) + var(--dy, 0) * 0.4)); }
}

@keyframes atq-impacto {
    0% { opacity: 1; transform: scale(0.25); }
    35% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.25); }
}

/* Escupitajo: una bola verde con su rastro; al llegar, se aplasta. */
.ff-atq-escupitajo .a {
    width: calc(var(--px) * 10 * var(--tam));
    height: calc(var(--px) * 9 * var(--tam));
    border-radius: 50% 50% 45% 55%;
    background: radial-gradient(circle at 35% 30%, #e4ff95, #72c41c 55%, #2f7a0a);
    box-shadow: calc(var(--px) * -6) calc(var(--px) * 1) 0 calc(var(--px) * -2) #5da614, calc(var(--px) * -11) calc(var(--px) * 2) 0 calc(var(--px) * -3) #3f8a10;
}
.ff-atq-escupitajo .b {
    background: radial-gradient(circle, #b6ee4b 0 38%, #5da614 40% 55%, transparent 58%);
    clip-path: polygon(50% 0, 62% 28%, 96% 18%, 74% 46%, 100% 62%, 66% 66%, 72% 100%, 50% 74%, 28% 100%, 34% 66%, 0 62%, 26% 46%, 4% 18%, 38% 28%);
    animation: atq-impacto 0.36s steps(5) var(--llegada) forwards;
}

/* Aguijón: un dardo fino y rápido; al clavarse, un destello venenoso. */
.ff-atq-aguijon .a {
    width: calc(var(--px) * 13 * var(--tam));
    height: calc(var(--px) * 2.6 * var(--tam));
    background: linear-gradient(90deg, transparent, #b9e63a 45%, #fff);
    rotate: var(--ang);
    transform-origin: 100% 50%;
}
.ff-atq-aguijon .b {
    background: radial-gradient(circle, #fff 0 14%, #cdf24a 16% 34%, rgba(150, 90, 220, 0.7) 36% 52%, transparent 55%);
    clip-path: polygon(50% 0, 58% 36%, 100% 50%, 58% 64%, 50% 100%, 42% 64%, 0 50%, 42% 36%);
    animation: atq-impacto 0.3s steps(4) var(--llegada) forwards;
}

/* Espectro: una voluta violeta que ondea; al llegar, un anillo helado. */
.ff-atq-espectral .a {
    width: calc(var(--px) * 14 * var(--tam));
    height: calc(var(--px) * 14 * var(--tam));
    border-radius: 50% 50% 50% 8%;
    background: radial-gradient(circle at 40% 40%, rgba(240, 228, 255, 0.95), rgba(160, 100, 255, 0.65) 55%, transparent 72%);
    filter: drop-shadow(0 0 calc(var(--px) * 3) #a070ff);
    animation: atq-vuelo 0.22s steps(5) var(--salida) forwards, atq-ondea 0.22s steps(4) var(--salida);
}
@keyframes atq-ondea {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(calc(var(--px) * -5)); }
    75% { transform: translateY(calc(var(--px) * 5)); }
}
.ff-atq-espectral .b {
    border: calc(var(--px) * 2) solid #cdb4ff;
    border-radius: 50%;
    box-shadow: 0 0 calc(var(--px) * 4) #a070ff, inset 0 0 calc(var(--px) * 4) #a070ff;
    animation: atq-impacto 0.5s steps(6) var(--llegada) forwards;
}

/* Bola de fuego: núcleo amarillo y cola de brasas; al llegar, estalla. */
.ff-atq-fuego .a {
    width: calc(var(--px) * 13 * var(--tam));
    height: calc(var(--px) * 13 * var(--tam));
    border-radius: 50%;
    background: radial-gradient(circle at 42% 42%, #fff7b0, #ffb020 38%, #f0500f 68%, transparent 72%);
    box-shadow: calc(var(--px) * -7) 0 0 calc(var(--px) * -1) rgba(240, 80, 15, 0.85), calc(var(--px) * -13) calc(var(--px) * 1) 0 calc(var(--px) * -3) rgba(255, 150, 30, 0.6);
}
.ff-atq-fuego .b {
    width: calc(var(--px) * 40 * var(--tam));
    height: calc(var(--px) * 40 * var(--tam));
    margin: calc(var(--px) * -20 * var(--tam)) 0 0 calc(var(--px) * -20 * var(--tam));
    background: radial-gradient(circle, #fff 0 14%, #ffd23c 16% 38%, #f0500f 40% 62%, transparent 66%);
    clip-path: polygon(50% 0, 60% 24%, 86% 8%, 76% 36%, 100% 42%, 78% 58%, 96% 86%, 66% 74%, 50% 100%, 36% 76%, 6% 90%, 24% 60%, 0 42%, 26% 34%, 14% 8%, 40% 24%);
    animation: atq-impacto 0.5s steps(6) var(--llegada) forwards;
}

/* Rayo del ojo: una línea que va de su ojo a tu héroe, y un destello. */
.ff-atq-rayo .a {
    left: calc(var(--px) * var(--x0));
    bottom: calc(var(--px) * var(--y0));
    width: calc(var(--px) * var(--largo));
    height: calc(var(--px) * 3 * var(--tam));
    background: linear-gradient(90deg, #fff, #ff7af0 35%, #8a6aff);
    box-shadow: 0 0 calc(var(--px) * 5) #ff4ae0;
    rotate: var(--ang);
    transform-origin: 0 50%;
    animation: atq-rayo 0.34s steps(5) 0.7s forwards;
}
@keyframes atq-rayo {
    0% { opacity: 1; clip-path: inset(0 100% 0 0); }
    45% { opacity: 1; clip-path: inset(0 0 0 0); }
    75% { opacity: 1; clip-path: inset(0 0 0 0); transform: scaleY(0.4); }
    100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
.ff-atq-rayo .b {
    background: radial-gradient(circle, #fff 0 16%, #ff7af0 18% 42%, rgba(138, 106, 255, 0.5) 44% 60%, transparent 64%);
    animation: atq-impacto 0.34s steps(5) 0.86s forwards;
}

/* Esquirlas de cristal: tres a la vez, en abanico. */
.ff-atq-esquirlas .a {
    width: calc(var(--px) * 13 * var(--tam));
    height: calc(var(--px) * 5 * var(--tam));
    background: linear-gradient(180deg, #fff 0 45%, #7ac8ff 45% 100%);
    clip-path: polygon(100% 50%, 14% 0, 0 50%, 14% 100%);
    animation-delay: calc(var(--salida) + var(--n, 0) * 0.04s);
}
.ff-atq-esquirlas .b {
    background: radial-gradient(circle, #fff 0 16%, #aee0ff 18% 40%, transparent 44%);
    clip-path: polygon(50% 0, 58% 38%, 100% 50%, 58% 62%, 50% 100%, 42% 62%, 0 50%, 42% 38%);
    animation: atq-impacto 0.36s steps(5) calc(var(--llegada) + 0.04s) forwards;
}

/* Ráfaga: tres medias lunas de viento. */
.ff-atq-rafaga .a {
    width: calc(var(--px) * 9 * var(--tam));
    height: calc(var(--px) * 16 * var(--tam));
    border-radius: 50%;
    border-right: calc(var(--px) * 3 * var(--tam)) solid rgba(214, 255, 238, 0.95);
    filter: drop-shadow(0 0 calc(var(--px) * 2) #9fe8cc);
    animation-delay: calc(var(--salida) + var(--n, 0) * 0.05s);
}
.ff-atq-rafaga .b {
    border: calc(var(--px) * 2) dashed rgba(214, 255, 238, 0.9);
    border-radius: 50%;
    animation: atq-impacto 0.5s steps(6) var(--llegada) forwards, atq-gira 0.5s steps(6) var(--llegada);
}
@keyframes atq-gira {
    to { rotate: 270deg; }
}

/* --- Cuerpo a cuerpo: el golpe cae sobre tu héroe --- */
.ff-atq-garras .a,
.ff-atq-tajo .a,
.ff-atq-golpe .a {
    left: calc(var(--px) * 150);
    translate: -50% 0;
}

/* Zarpazo: tres arañazos rojos. */
.ff-atq-garras .a {
    bottom: calc(var(--px) * 12);
    width: calc(var(--px) * 36 * var(--tam));
    height: calc(var(--px) * 40 * var(--tam));
    background:
        linear-gradient(120deg, transparent 36%, #ff6464 37% 40%, #fff 40% 42%, transparent 43%),
        linear-gradient(120deg, transparent 47%, #ff6464 48% 51%, #fff 51% 53%, transparent 54%),
        linear-gradient(120deg, transparent 58%, #ff6464 59% 62%, #fff 62% 64%, transparent 65%);
    animation: ff-tajo 0.32s steps(4) 0.82s forwards;
}
.ff-atq-garras .b {
    background: radial-gradient(circle, rgba(255, 70, 70, 0.8), transparent 66%);
    animation: atq-impacto 0.3s steps(4) 0.9s forwards;
}

/* Tajo: un arco de acero. */
.ff-atq-tajo .a {
    bottom: calc(var(--px) * 4);
    width: calc(var(--px) * 46 * var(--tam));
    aspect-ratio: 1;
    border-radius: 50%;
    border-left: calc(var(--px) * 5 * var(--tam)) solid #e8f0ff;
    border-top: calc(var(--px) * 2) solid transparent;
    border-bottom: calc(var(--px) * 2) solid transparent;
    filter: drop-shadow(0 0 calc(var(--px) * 2) #9fc0ff);
    rotate: -18deg;
    animation: atq-arco 0.34s steps(5) 0.8s forwards;
}
@keyframes atq-arco {
    0% { opacity: 1; clip-path: inset(0 0 100% 0); }
    60% { opacity: 1; clip-path: inset(0 0 0 0); }
    100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
.ff-atq-tajo .b {
    background: radial-gradient(circle, #fff 0 18%, #cfe0ff 20% 40%, transparent 44%);
    clip-path: polygon(50% 0, 58% 38%, 100% 50%, 58% 62%, 50% 100%, 42% 62%, 0 50%, 42% 38%);
    animation: atq-impacto 0.3s steps(4) 0.9s forwards;
}

/* Mordida: dos mandíbulas que se cierran sobre tu héroe. */
.ff-atq-mordida .a,
.ff-atq-mordida .b {
    left: calc(var(--px) * 150);
    translate: -50% 0;
    width: calc(var(--px) * 32 * var(--tam));
    height: calc(var(--px) * 14 * var(--tam));
    margin: 0;
    background: linear-gradient(180deg, #fff, #d9d9d9);
}
.ff-atq-mordida .a {
    bottom: calc(var(--px) * 34);
    clip-path: polygon(0 0, 100% 0, 100% 36%, 90% 100%, 80% 36%, 70% 100%, 60% 36%, 50% 100%, 40% 36%, 30% 100%, 20% 36%, 10% 100%, 0 36%);
    animation: atq-mandibula-arriba 0.34s steps(4) 0.78s forwards;
}
.ff-atq-mordida .b {
    bottom: calc(var(--px) * 18);
    clip-path: polygon(0 100%, 100% 100%, 100% 64%, 90% 0, 80% 64%, 70% 0, 60% 64%, 50% 0, 40% 64%, 30% 0, 20% 64%, 10% 0, 0 64%);
    animation: atq-mandibula-abajo 0.34s steps(4) 0.78s forwards;
}
@keyframes atq-mandibula-arriba {
    0% { opacity: 1; transform: translateY(calc(var(--px) * -26)); }
    55% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}
@keyframes atq-mandibula-abajo {
    0% { opacity: 1; transform: translateY(calc(var(--px) * 26)); }
    55% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

/* Golpe pesado: un bloque cae sobre tu héroe y la onda de choque corre por el suelo. */
.ff-atq-golpe .a {
    bottom: calc(var(--px) * 30);
    width: calc(var(--px) * 24 * var(--tam));
    height: calc(var(--px) * 18 * var(--tam));
    border-radius: calc(var(--px) * 4);
    background: linear-gradient(180deg, #a3a8bf, #565b73);
    border: calc(var(--px) * 1.5) solid #1c1e2c;
    animation: atq-cae 0.34s steps(4) 0.66s forwards;
}
@keyframes atq-cae {
    0% { opacity: 1; transform: translateY(calc(var(--px) * -80)); }
    70% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}
.ff-atq-golpe .b {
    bottom: calc(var(--px) * 10);
    width: calc(var(--px) * 60 * var(--tam));
    height: calc(var(--px) * 12 * var(--tam));
    margin: 0 0 0 calc(var(--px) * -30 * var(--tam));
    border: calc(var(--px) * 2) solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    box-shadow: 0 0 calc(var(--px) * 4) rgba(255, 255, 255, 0.6);
    animation: atq-onda 0.5s steps(6) 0.98s forwards;
}
@keyframes atq-onda {
    0% { opacity: 1; transform: scale(0.2); }
    100% { opacity: 0; transform: scale(1.6); }
}

/* Si esquivas, los golpes cuerpo a cuerpo caen al lado y sin impacto. */
.ff-atq.falla.ff-atq-garras .a,
.ff-atq.falla.ff-atq-tajo .a,
.ff-atq.falla.ff-atq-golpe .a { margin-left: calc(var(--px) * -30); }
.ff-atq.falla.ff-atq-mordida .a,
.ff-atq.falla.ff-atq-mordida .b { margin-left: calc(var(--px) * -26); }
.ff-atq.falla:not(.ff-atq-mordida) .b { display: none; }

@media (prefers-reduced-motion: reduce) {
    .ff-atq { display: none; }
}

/* v66b: gráficas del gimnasio */
.gym-spark { flex: 0 0 auto; display: block; }
.gym-record { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gym-record > span { display: grid; min-width: 0; }
.gym-meta-ej { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
.gym-peso-actual { margin: 4px 0; font-size: 1.1rem; }
.gym-peso-actual b { font-family: var(--letra-titulo); color: var(--verde); font-size: 1.4rem; }

.campo-gym { display: grid; gap: 6px; margin: 10px 0; }
.campo-gym select { min-height: 44px; font-size: 16px; border-radius: var(--esquina); border: 1px solid var(--borde); background: var(--panel); color: var(--texto); padding: 0 10px; }

.gym-extras { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }

/* Lecturas de la Fragua */
.gym-lecturas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.gym-lectura { border: 1px solid var(--borde); border-radius: var(--esquina); background: var(--hundido); padding: 10px 12px; }
.gym-lectura.cerrada { display: flex; gap: 10px; align-items: center; opacity: 0.6; }
.gym-lectura.cerrada span:last-child { display: grid; }
.gym-lectura small { font-size: 0.76rem; color: var(--texto-suave); }
.gym-lectura summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gym-lectura-texto { margin-top: 8px; }
.gym-lectura-texto p { margin: 0 0 10px; line-height: 1.6; }
.gym-moraleja { color: var(--gym-2); font-style: italic; border-left: 3px solid var(--gym-2); padding-left: 10px; }

/* El botón de gym en la ficha del héroe */
.ficha-gym {
    grid-column: 1 / -1;   /* v85: la ficha del héroe es una cuadrícula de 2 columnas; sin esto el botón se quedaba en la del avatar */
    display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 10px 12px; min-height: 52px;
    text-align: left; color: var(--texto); cursor: pointer;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(251, 191, 36, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.45); border-radius: var(--esquina); font: inherit;
}
.ficha-gym-icono { font-size: 1.6rem; }
.ficha-gym-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ficha-gym-texto small { color: var(--texto-suave); font-size: 0.76rem; }

/* v71: reacciones elementales */
.ff-aviso.ff-reaccion {
    top: 52%;
    z-index: 6;
    font-size: 0.85rem;
    color: #fff;
    background: linear-gradient(90deg, #c8283a, #e8741c);
    box-shadow: 0 0 10px rgba(255, 140, 40, 0.8);
}
.ff-hechizo small { display: block; }

/* v72: el calendario del gym */
.gym-calendario {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 4px;
    margin: 10px 0 6px; justify-content: center;
}
.gym-cuadro { width: 18px; height: 18px; border-radius: 4px; background: var(--hundido); border: 1px solid var(--borde); display: block; }
.gym-cuadro.n1 { background: rgba(245, 158, 11, 0.55); border-color: rgba(245, 158, 11, 0.8); }
.gym-cuadro.n2 { background: var(--gym); border-color: var(--gym-2); box-shadow: 0 0 6px rgba(251, 191, 36, 0.6); }
.gym-cuadro.futuro { opacity: 0.35; }
.gym-cuadro.hoy { outline: 2px solid var(--gym-2); outline-offset: 1px; }

/* ===== v74: la meta que se marca, el cuerpo sin ropa, el IMC y la armadura por constancia ===== */
.gym-avatar { flex: 0 0 132px; width: 132px; border-radius: var(--esquina); overflow: hidden; border: 1px solid var(--borde); background: #150f2a; }
.gym-avatar svg { width: 100%; height: auto; display: block; }
.gym-fisico { margin: 0 0 4px; }
.gym-marcar { margin: 10px 0 6px; min-height: 48px; }
.gym-hoy-botones { display: grid; gap: 6px; }
.gym-rutina-botones { display: flex; gap: 6px; }

.gym-imc { margin: 8px 0 10px; }
.gym-imc-numero { margin: 0 0 6px; font-size: 1rem; }
.gym-imc-numero b { font-family: var(--letra-titulo); font-size: 1.6rem; }
.gym-imc-numero span { color: var(--texto-suave); }
.gym-imc-escala { position: relative; display: flex; height: 12px; border-radius: var(--esquina); overflow: visible; margin: 8px 0 10px; }
.gym-imc-escala i { display: block; height: 100%; }
.gym-imc-escala i:first-child { border-radius: 999px 0 0 999px; }
.gym-imc-escala i:nth-child(4) { border-radius: 0 999px 999px 0; }
.gym-imc-escala b { position: absolute; top: -4px; width: 4px; height: 20px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(255, 255, 255, 0.9); transform: translateX(-50%); }
.form-linea + .form-linea { margin-top: 8px; }

.gym-piezas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.gym-pieza { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--esquina); border: 1px solid var(--borde); background: var(--hundido); opacity: 0.7; }
.gym-pieza.ganada { opacity: 1; border-color: var(--gym-2); background: rgba(251, 191, 36, 0.08); }
.gym-pieza > span:last-child { display: grid; }
.gym-pieza small { color: var(--texto-suave); font-size: 0.76rem; }
.gym-pieza-icono { font-size: 1.5rem; }

/* v75: vista previa del cuerpo en el gimnasio */
.gym-heroe-grande .gym-avatar { flex: 0 0 150px; width: 150px; }
.gym-vista { margin: 0 0 10px; }
.gym-vista-botones { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.gym-vista-aviso { margin: 0 0 4px; font-size: 0.78rem; font-weight: 700; color: var(--gym-2); }

/* v76: el avatar del gimnasio, grande y con el gimnasio de fondo */
.gym-heroe-grande { display: grid; grid-template-columns: 1fr; gap: 10px; justify-items: center; text-align: center; padding-top: 14px; }
.gym-heroe-grande .gym-avatar { flex: none; width: min(100%, 340px); border-radius: var(--esquina); border-color: rgba(251, 191, 36, 0.35); box-shadow: 0 0 24px rgba(122, 98, 200, 0.35); }
.gym-heroe-grande .gym-nivel { width: 100%; }
.gym-heroe-grande .gym-nivel-numero { font-size: 1.3rem; }
.gym-heroe-grande .barra { margin-left: auto; margin-right: auto; }

/* v76: el entrenamiento se siente como estar en el gym */
.gym-chips { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gym-chips li { padding: 6px 12px; border-radius: var(--esquina); background: var(--hundido); border: 1px solid var(--borde); font-size: 0.9rem; }
.gym-chips b { font-family: var(--letra-titulo); color: var(--gym-2); }
.gym-calentar { margin: 2px 0 6px; }
.gym-tecnica { color: #a5f3fc; }
.gym-aurelio {
    display: flex; gap: 10px; align-items: center; margin: 8px 0; padding: 10px 12px; border-radius: var(--esquina);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.08)); border: 1px solid rgba(167, 139, 250, 0.5);
    animation: gym-aurelio-entra 0.4s ease-out;
}
.gym-aurelio p { margin: 0; line-height: 1.4; }
.gym-aurelio p b { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #c4b5fd; }
.gym-aurelio-retrato { flex: 0 0 54px; width: 54px; border-radius: 50%; overflow: hidden; border: 2px solid #8b5cf6; background: #1c1536; }
.gym-aurelio-retrato svg { width: 100%; height: auto; display: block; }
@keyframes gym-aurelio-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gym-resumen { border-color: var(--gym-2); background: linear-gradient(180deg, rgba(251, 191, 36, 0.1), var(--panel)); }
.gym-sesion .gym-heroe { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .gym-aurelio { animation: none; } }

.gym-heroe:not(.gym-heroe-grande) .gym-avatar { flex: 0 0 96px; width: 96px; }

/* v77: las figuras que hacen cada ejercicio */
.gym-demo { float: right; width: 108px; margin: 0 0 6px 10px; border-radius: var(--esquina); overflow: hidden; }
.gym-demo-svg { display: block; width: 100%; height: auto; }
.gym-ejercicio.actual { border-color: var(--gym-2); box-shadow: 0 0 14px rgba(251, 191, 36, 0.25); }
.gym-ejercicio::after { content: ""; display: block; clear: both; }
.gym-ejercicio .gym-serie { clear: both; }

/* v77 (arreglo): la figura va a la derecha del encabezado del ejercicio, en una rejilla de dos columnas */
.gym-ejercicio { grid-template-columns: 1fr 108px; }
.gym-ejercicio > * { grid-column: 1 / -1; }
.gym-ejercicio > h3, .gym-ejercicio > .gym-meta-ej, .gym-ejercicio > .gym-antes, .gym-ejercicio > .gym-pista, .gym-ejercicio > .gym-tecnica { grid-column: 1; }
.gym-ejercicio > .gym-demo { grid-column: 2; grid-row: 1 / span 5; float: none; margin: 0; align-self: start; }

/* v78: el modo foco */
.gym-foco { text-align: center; }
.gym-foco .titulo-seccion { text-align: left; }
.gym-foco .gym-chips { justify-content: center; }
.gym-foco-demo { width: min(78%, 280px); margin: 8px auto 4px; border-radius: var(--esquina); overflow: hidden; }
.gym-foco-nombre { margin: 4px 0 0; font-size: 1.25rem; }
.gym-foco-serie { margin: 2px 0 4px; font-size: 1.05rem; }
.gym-foco-serie b { font-family: var(--letra-titulo); color: var(--gym-2); font-size: 1.5rem; }
.gym-foco .gym-pista, .gym-foco .gym-tecnica { margin: 2px 0; text-align: left; font-size: 0.82rem; }
.gym-stepper { display: grid; grid-template-columns: 1fr 60px auto 60px; align-items: center; gap: 10px; margin: 10px 0; }
.gym-stepper-nombre { text-align: left; color: var(--texto-suave); font-size: 0.9rem; }
.gym-mas-menos {
    min-height: 56px; border-radius: var(--esquina); font-size: 2rem; font-weight: 700; line-height: 1; cursor: pointer;
    color: var(--texto); background: var(--panel-claro); border: 2px solid var(--borde);
}
.gym-mas-menos:active { background: var(--gym); color: #1b0b10; border-color: var(--gym); }
.gym-stepper-valor { min-width: 96px; font-family: var(--letra-titulo); font-size: 2.1rem; color: var(--gym-2); }
.gym-stepper-valor small { font-size: 0.9rem; color: var(--texto-suave); margin-left: 3px; }
.gym-foco-grande { min-height: 64px; font-size: 1.25rem; margin: 8px 0; }
.gym-foco-listo { font-size: 1.6rem; margin: 18px 0; font-family: var(--letra-titulo); color: var(--gym-2); }
.gym-foco-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.gym-foco-descanso { position: relative; width: 200px; margin: 6px auto; }
.gym-foco-descanso svg { display: block; width: 100%; height: auto; }
.gym-anillo-pista { fill: none; stroke: var(--hundido); stroke-width: 9; }
.gym-anillo { fill: none; stroke: var(--gym-2); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6)); }
.gym-foco-descanso-texto { position: absolute; inset: 0; display: grid; place-content: center; }
.gym-foco-descanso-texto small { color: var(--texto-suave); }
.gym-foco-descanso-texto b { font-family: var(--letra-titulo); font-size: 2.6rem; color: var(--gym-2); }
.gym-foco-siguiente { margin: 2px 0 6px; }

/* v79: consejo del día, reto de la semana y evolución */
.gym-consejo { margin: 0 0 12px; }
.gym-reto { margin: 12px 0 4px; padding: 10px 12px; border-radius: var(--esquina); border: 1px solid rgba(167, 139, 250, 0.5); background: rgba(139, 92, 246, 0.1); }
.gym-reto.cobrado { border-color: var(--verde); background: rgba(52, 211, 153, 0.08); }
.gym-reto-texto { margin: 2px 0 4px; font-weight: 600; }
.gym-evolucion { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; }
.gym-foto { flex: 0 0 150px; margin: 0; scroll-snap-align: start; text-align: center; }
.gym-foto-cuerpo { border-radius: var(--esquina); overflow: hidden; border: 1px solid var(--borde); background: #150f2a; }
.gym-foto.ahora .gym-foto-cuerpo { border-color: var(--gym-2); box-shadow: 0 0 14px rgba(251, 191, 36, 0.35); }
.gym-foto-cuerpo svg { display: block; width: 100%; height: auto; }
.gym-foto figcaption { margin-top: 4px; display: grid; }
.gym-foto small { color: var(--texto-suave); font-size: 0.74rem; }

/* v80: contar repeticiones tocando */
.gym-contar { min-height: 52px; margin: 4px 0; font-size: 1.05rem; }

/* v82: tu cuerpo cambió (antes y ahora), peso objetivo y medidas */
.cel-cuerpos { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cel-cuerpos figure { margin: 0; width: 132px; }
.cel-cuerpos figure svg { display: block; width: 100%; height: auto; border-radius: var(--esquina); border: 1px solid rgba(251, 191, 36, 0.4); }
.cel-cuerpos figure:last-child svg { box-shadow: 0 0 16px rgba(251, 191, 36, 0.55); }
.cel-cuerpos figcaption { font-size: 0.8rem; margin-top: 3px; opacity: 0.85; }
.cel-cuerpos > span { font-size: 1.6rem; color: var(--gym-2); }
.gym-metapeso { margin: 8px 0; }
.gym-medidas { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.gym-medida { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--esquina); background: var(--hundido); border: 1px solid var(--borde); }
.gym-medida > span:nth-child(2) { flex: 1; text-align: right; }
.gym-campos-medida { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.gym-campo-medida { display: grid; gap: 3px; font-size: 0.8rem; color: var(--texto-suave); }
.gym-campo-medida input { min-height: 44px; font-size: 16px; text-align: center; border-radius: var(--esquina); border: 1px solid var(--borde); background: var(--panel); color: var(--texto); }

/* v84: el contador de la meta del gym en dorado (como el resto del gym), y el «Toca hoy» sin estirarse */
#pantalla-gym .contador { color: var(--gym-2); }
#pantalla-gym .contador.completo { color: var(--verde); text-shadow: 0 0 14px rgba(52, 211, 153, 0.5); }
.gym-rutina-texto b .gym-toca { margin-left: 4px; }


/* ===== (v85) Pantalla de carga de 4 segundos, con escena animada =====
   Línea de tiempo (todo en 4 s; la salida empieza a los 3,45 s): franjas de cine → estrellas y estrella fugaz →
   el emblema aparece con una onda → el título se revela → el héroe camina hacia la Torre mientras sus ventanas
   se encienden de abajo hacia arriba → arde la Llama → destello y desvanecido. */
.carga.espera { display: none; }   /* con PIN: primero va la clave; app.js la muestra después */

.carga-estrellas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.carga-estrellas i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(196, 181, 253, 0.9);
    animation: carga-brilla 1.8s ease-in-out infinite;
}

@keyframes carga-brilla {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* La estrella fugaz cruza el cielo a 1,1 s. */
.carga-fugaz {
    position: absolute;
    top: 14%;
    left: 70%;
    width: 70px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fff 80%);
    border-radius: 2px;
    opacity: 0;
    transform: rotate(28deg);
    animation: carga-fugaz 0.9s ease-in 1.1s both;
}

@keyframes carga-fugaz {
    0% { opacity: 0; transform: translate(0, 0) rotate(28deg); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(-150px, 80px) rotate(28deg); }
}

/* Las franjas negras del cine. */
.carga-cine {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    height: calc(env(safe-area-inset-top) + 7vh);
    background: #000;
    pointer-events: none;
}

.carga-cine-arriba { top: 0; animation: carga-franja-arriba 4s ease-in-out both; }
.carga-cine-abajo { bottom: 0; height: calc(env(safe-area-inset-bottom) + 7vh); animation: carga-franja-abajo 4s ease-in-out both; }

@keyframes carga-franja-arriba {
    0% { transform: translateY(-100%); }
    14%, 82% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

@keyframes carga-franja-abajo {
    0% { transform: translateY(100%); }
    14%, 82% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* El emblema aparece con un golpe de luz: onda, rebote y el aro girando. */
.carga-icono {
    animation: carga-aparece 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both, carga-latido 2s ease-in-out 1.2s infinite;
}

@keyframes carga-aparece {
    from { opacity: 0; transform: scale(0.3) rotate(-14deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

.carga-onda {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px solid rgba(165, 243, 252, 0.9);
    opacity: 0;
    animation: carga-onda 1.1s ease-out 0.35s 2 both;
}

@keyframes carga-onda {
    from { opacity: 0.9; transform: scale(0.7); }
    to { opacity: 0; transform: scale(2.4); }
}

/* El título se revela: las letras se juntan y una luz lo recorre. */
.carga-titulo {
    background-size: 220% 100%;
    animation: carga-titulo 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s both, carga-luz 1.6s linear 2s both;
}

@keyframes carga-titulo {
    from { opacity: 0; letter-spacing: 0.7em; filter: blur(6px) drop-shadow(0 0 14px rgba(139, 92, 246, 0.5)); }
    to { opacity: 1; letter-spacing: 0.14em; filter: blur(0) drop-shadow(0 0 14px rgba(139, 92, 246, 0.5)); }
}

@keyframes carga-luz {
    from { background-position: 120% 0; }
    to { background-position: -40% 0; }
}

.carga-lema { animation: carga-sube 0.8s ease-out 1.3s both; }

@keyframes carga-sube {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* La barra se llena durante todo el rato (3,6 s) y su punta brilla. */
.carga-barra { animation: carga-sube 0.6s ease-out 1.5s both; }

.carga-barra span {
    position: relative;
    animation: carga-llenar-4 3.45s cubic-bezier(0.25, 0.6, 0.3, 1) 0.2s both;
}

.carga-barra span::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -2px;
    width: 10px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    filter: blur(3px);
    opacity: 0.9;
}

@keyframes carga-llenar-4 {
    from { transform: scaleX(0.02); }
    to { transform: scaleX(1); }
}

.carga-texto { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.carga-texto b { min-width: 3.2em; text-align: left; font-family: var(--letra-titulo); font-size: 0.78rem; color: var(--cian); font-variant-numeric: tabular-nums; }

/* La escena de abajo: montañas que se deslizan, la Torre que se enciende y el héroe que camina hacia ella. */
.carga-escena {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(7vh + env(safe-area-inset-bottom));   /* justo encima de la franja negra de abajo */
    z-index: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 220;
    pointer-events: none;
}

/* Bajo la escena, el mismo color de las lomas: cuando la franja negra se va, no queda un hueco. */
.carga {
    background:
        linear-gradient(to top, #0a0716 0 calc(7vh + env(safe-area-inset-bottom) + 1px), transparent 0),
        radial-gradient(circle at 50% 38%, rgba(139, 92, 246, 0.32), transparent 52%),
        radial-gradient(circle at 50% 110%, rgba(34, 211, 238, 0.18), transparent 50%),
        var(--fondo);
}

.carga-capa { animation-duration: 4s; animation-timing-function: linear; animation-fill-mode: both; }
.carga-lejos { animation-name: carga-deriva-1; }
.carga-medio { animation-name: carga-deriva-2; }
.carga-cerca { animation-name: carga-deriva-3; }

@keyframes carga-deriva-1 { from { transform: translateX(0); } to { transform: translateX(-14px); } }
@keyframes carga-deriva-2 { from { transform: translateX(0); } to { transform: translateX(-30px); } }
@keyframes carga-deriva-3 { from { transform: translateX(0); } to { transform: translateX(-52px); } }

.carga-torre { animation: carga-sube 1s ease-out 0.5s both; }

.carga-ventana {
    fill: #2a2230;
    animation: carga-enciende 0.4s ease-out both;
}

@keyframes carga-enciende {
    from { fill: #2a2230; }
    to { fill: #ffd27a; }
}

.carga-llama {
    transform-box: fill-box;
    transform-origin: 50% 90%;
    animation: carga-arde 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 2.9s both, carga-parpadea 0.3s ease-in-out 3.6s infinite alternate;
}

@keyframes carga-arde {
    from { opacity: 0; transform: scale(0.1); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes carga-parpadea {
    from { transform: scale(1); }
    to { transform: scale(1.12); }
}

/* El héroe cruza la escena de izquierda a derecha, con su pasito. */
.carga-heroe {
    transform: translate(-30px, 188px);
    animation: carga-camina 3.1s cubic-bezier(0.3, 0.1, 0.5, 1) 0.4s both;
}

@keyframes carga-camina {
    from { transform: translate(-30px, 188px); }
    to { transform: translate(300px, 188px); }
}

.carga-paso { animation: carga-bota 0.36s steps(1) infinite; }

@keyframes carga-bota {
    50% { transform: translateY(-1.6px); }
}

/* Al final, un destello cubre la pantalla un instante. */
.carga-destello {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.9), rgba(196, 181, 253, 0.5) 40%, transparent 70%);
    opacity: 0;
    animation: carga-destello 4s ease-out both;
}

@keyframes carga-destello {
    0%, 70% { opacity: 0; }
    82% { opacity: 0.75; }
    100% { opacity: 0; }
}

/* (v88) Con «Reducir movimiento» (muy común en iPhone) la escena SIGUE animándose: dura solo 4 s y es lo que se quiere ver.
   Solo se apagan los efectos bruscos: el destello de pantalla completa y la estrella fugaz. */
@media (prefers-reduced-motion: reduce) {
    .carga-fugaz,
    .carga-destello { animation: none; opacity: 0; }
}
}


/* ===== (v86) El reino: franja de regiones, números de la región, rótulos y leyenda ===== */
.reino-franja { gap: 5px; margin-bottom: 6px; }

.reino-region {
    min-height: 92px;
    padding: 8px 2px 6px;
    align-content: start;
    gap: 2px;
}

.reino-icono { font-size: 1.35rem; line-height: 1; }

.reino-region .reino-nombre {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--texto);
}

.reino-region em {
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 700;
    color: var(--texto-suave);
    white-space: nowrap;
}

.reino-region.libre em { color: var(--oro); }

.reino-barra {
    display: block;
    width: 78%;
    height: 4px;
    margin-top: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--esquina);
}

.reino-barra i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--violeta), var(--cian));
    border-radius: inherit;
}

.reino-region.libre .reino-barra i { background: linear-gradient(90deg, #f59e0b, var(--oro)); }

.reino-aqui {
    position: absolute;
    top: -9px;
    left: 50%;
    font-size: 0.85rem;
    transform: translateX(-50%);
    animation: reino-aqui 1.4s ease-in-out infinite;
}

@keyframes reino-aqui { 50% { transform: translate(-50%, -3px); } }

.reino-total {
    margin: 0 0 10px;
    font-size: 0.74rem;
    text-align: center;
    color: var(--texto-suave);
}

/* Cuatro números de la región, en casillas. */
.mapa-datos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 10px 0 8px;
}

.mapa-datos > div {
    display: grid;
    gap: 1px;
    padding: 7px 2px;
    text-align: center;
    background: var(--hundido);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.mapa-datos b {
    font-family: var(--letra-titulo);
    font-size: 0.95rem;
    color: var(--oro);
    font-variant-numeric: tabular-nums;
}

.mapa-datos span {
    font-size: 0.6rem;
    color: var(--texto-suave);
}

/* Rótulos sobre el mapa (no se tocan: solo informan). */
.mapa-rotulo {
    position: absolute;
    z-index: 2;
    max-width: 44%;
    padding: 1px 6px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    color: #f1f3ff;
    background: rgba(10, 7, 22, 0.78);
    border: 1px solid rgba(241, 243, 255, 0.45);
    border-radius: var(--esquina);
    transform: translate(-50%, 0);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mapa-rotulo.libre { color: #fcd34d; border-color: rgba(252, 211, 77, 0.8); }
.mapa-rotulo.lejos { opacity: 0.7; }
.mapa-rotulo.mayor { font-size: 0.64rem; color: #fff; border-color: rgba(196, 181, 253, 0.9); background: rgba(58, 36, 110, 0.85); }

/* La leyenda */
.mapa-leyenda { margin: 0 0 12px; }

.mapa-leyenda-lista {
    display: grid;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--texto-suave);
}

.mapa-leyenda-lista li { display: flex; gap: 10px; align-items: baseline; }
.mapa-leyenda-lista li > span { flex: 0 0 1.6em; text-align: center; }

/* ===== El running (v109): la pestaña Running (js/vistas-running.js) ===== */
.run-vivo.pausada .run-tiempo { opacity: 0.55; }

.run-tiempo {
    margin: 4px 0;
    font-family: var(--letra-titulo, inherit);
    font-size: 3.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.run-tiempo-chico { font-size: 1.05rem; margin: 6px 0; }

.run-datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0;
}

.run-datos > div {
    padding: 10px;
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
    background: var(--hundido);
}

.run-datos small,
.run-fila-texto small,
.run-lista small { display: block; color: var(--texto-suave); }

.run-datos b {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

.run-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 10px 0;
}

.run-botones .boton { flex: 1 1 140px; }

.run-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.run-tipo {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--hundido);
    color: var(--texto);
    font: inherit;
    cursor: pointer;
}

.run-tipo[aria-pressed="true"] {
    border-color: var(--cian);
    background: rgba(34, 211, 238, 0.14);
}

.run-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Las barras de las 12 semanas: cada columna tiene la barra y el número del día; la línea punteada es la meta. */
.run-barras {
    position: relative;
    display: flex;
    gap: 6px;
    margin: 12px 0 4px;
}

.run-barras::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(18px + 100px * var(--meta, 0));
    border-top: 2px dashed rgba(251, 191, 36, 0.7);
    pointer-events: none;
}

.run-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.run-barra {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: flex-end;
}

.run-barra i {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: var(--violeta);
}

.run-col.actual .run-barra i { background: var(--cian); }

.run-col small {
    height: 18px;
    line-height: 18px;
    font-size: 0.7rem;
    color: var(--texto-suave);
}

.run-ritmos {
    width: 100%;
    height: auto;
    margin-top: 8px;
}

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

.run-lista li {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: 8px;
}

.run-valor { font-variant-numeric: tabular-nums; }

.run-hito:not(.cobrado) { opacity: 0.6; }

.run-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
}

.run-meta-botones {
    display: flex;
    gap: 8px;
}

.run-historial {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.run-fila {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde);
}


/* ===== (v116) Running: recorrido, parciales por kilómetro y predicciones ===== */
.run-detalle {
    margin-top: 6px;
}

.run-detalle summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--cian);
}

.run-trazo {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 8px 0 2px;
    background: rgba(8, 6, 20, 0.7);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.run-parciales {
    display: grid;
    gap: 3px;
    margin: 8px 0 4px;
    padding: 0;
    list-style: none;
}

.run-parcial {
    display: grid;
    grid-template-columns: 3.2rem 1fr 3rem;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}

.run-parcial b {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.run-parcial-barra {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.run-parcial-barra i {
    display: block;
    height: 100%;
    background: var(--cian);
}

.run-parcial.mejor .run-parcial-barra i { background: #4ade80; }
.run-parcial.peor .run-parcial-barra i { background: #fbbf24; }

.run-parciales-vivo:empty {
    display: none;
}

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

.run-prediccion li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 10px;
}

.run-prediccion small {
    min-width: 4.2rem;
    text-align: right;
    color: var(--texto-suave);
}


/* ===== (v117) La barra de la carrera en curso (visible en todas las pantallas) ===== */
.run-flotante {
    position: fixed;
    right: 12px;
    bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 8px);
    left: 12px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 616px;
    margin: 0 auto;
    padding: 8px 12px;
    font-size: 0.95rem;
    color: #fff;
    background: linear-gradient(180deg, #3350c8, #1c2e96);
    border: 2px solid #f1f3ff;
    border-radius: var(--esquina);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    font-variant-numeric: tabular-nums;
}

.run-flotante[hidden] {
    display: none;
}


/* ===== (v118) El mapa de tu carrera en tiempo real ===== */
.run-mapa-vivo {
    position: relative;
    margin: 10px 0 4px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #2a6a38;
    border: 2px solid #f1f3ff;
    border-radius: var(--esquina);
    box-shadow: 0 0 0 1px #060a3a;
}

.run-mapa-svg {
    display: block;
    width: 100%;
    height: 100%;
    font-family: var(--letra-titulo);
}

.run-mapa-heroe {
    position: absolute;
    width: 9%;
    image-rendering: pixelated;
    transform: translate(-50%, -88%);
    pointer-events: none;
    animation: mapa-paso 0.9s steps(1) infinite;
}

.run-mapa-heroe:not([src]) {
    visibility: hidden;
}


/* ===== (v119) Criaturas en la carrera y el mapa por zonas ===== */
.run-mapa-zona {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    color: #fff;
    background: rgba(11, 8, 22, 0.75);
    border: 1px solid rgba(241, 243, 255, 0.6);
    border-radius: var(--esquina);
    pointer-events: none;
}

.run-mapa-criatura {
    position: absolute;
    width: 11%;
    image-rendering: pixelated;
    transform: translate(-50%, -88%);
    pointer-events: none;
    animation: mapa-paso 0.7s steps(1) infinite;
    filter: drop-shadow(0 0 3px rgba(248, 113, 113, 0.8));
}

.run-mapa-criatura.jefe {
    width: 15%;
    filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.95));
}

.run-mapa-criatura:not([src]) {
    visibility: hidden;
}

.run-pelea {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 8px 0;
    padding: 8px;
    background: linear-gradient(180deg, #3350c8 0%, #1c2e96 38%, #0a1258 100%);
    border: 2px solid #f1f3ff;
    border-radius: var(--esquina);
}

.run-pelea-sprite {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

.run-pelea-sprite:not([src]) {
    visibility: hidden;
}

.run-pelea-texto {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.run-pelea-texto b small {
    font-weight: 500;
    color: #b9c6ff;
}

.run-pelea-texto small {
    font-size: 0.72rem;
    color: #dfe5ff;
}

.run-pelea-vida .barra-relleno { background: #f87171; }
.run-pelea-vida.bien .barra-relleno { background: #4ade80; }
.run-pelea-vida.justo .barra-relleno { background: #fbbf24; }

.run-pelea-aviso {
    color: #fbbf24 !important;
}

.run-criaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 8px;
    padding: 0;
    list-style: none;
}

.run-criaturas li {
    padding: 2px 6px;
    font-size: 0.7rem;
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.run-criaturas li.vencida { color: #4ade80; border-color: rgba(74, 222, 128, 0.5); }
.run-criaturas li.escapo { color: var(--texto-suave); }


/* ===== (v127) Diagnóstico de voces ===== */
.run-voces-lista {
    max-height: 220px;
    margin: 6px 0;
    padding: 6px 10px;
    overflow-y: auto;
    list-style: none;
    font-size: 0.78rem;
    background: rgba(8, 6, 20, 0.6);
    border: 1px solid var(--borde);
    border-radius: var(--esquina);
}

.run-voces-lista small {
    color: var(--texto-suave);
}

/* ===== (v120) Modo concentración: la carrera sin distracciones ===== */
.run-concentracion .cabecera,
.run-concentracion .pestanas,
.run-concentracion .run-flotante,
.run-concentracion #pantalla-running .encabezado,
.run-concentracion #pantalla-running .run-vivo > .etiqueta,
.run-concentracion #pantalla-running [data-run-ruta],
.run-concentracion #pantalla-running .run-pelea + .mini {
    display: none;
}

.run-concentracion .contenido {
    padding-top: calc(env(safe-area-inset-top) + 12px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}

.run-concentracion .run-tiempo {
    font-size: clamp(4rem, 22vw, 6.5rem);
    text-align: center;
}

.run-concentracion .run-datos b {
    font-size: 1.9rem;
}

.run-concentracion .run-botones .boton {
    min-height: 56px;
    font-size: 1.05rem;
}

.run-concentracion-boton {
    margin-top: 8px;
    opacity: 0.8;
}


/* ===== (v128) Frases de ánimo ===== */
.run-frase {
    font-style: italic;
    color: #ffe58a !important;
}


/* ===== (v129) Modo concentración en UNA pantalla: todo cabe sin deslizar ===== */
.run-concentracion:not(.run-terminando) {
    overflow: hidden;
    overscroll-behavior: none;
}

.run-concentracion:not(.run-terminando) .contenido {
    padding: calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px);
}

.run-concentracion:not(.run-terminando) #pantalla-running .run-vivo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
    margin: 0;
    padding: 10px 12px;
    overflow: hidden;
}

.run-concentracion:not(.run-terminando) .run-tiempo {
    margin: 0;
    font-size: clamp(2.6rem, 15vw, 4.4rem);
    line-height: 1;
}

.run-concentracion:not(.run-terminando) .run-datos {
    gap: 8px;
    margin: 0;
}

.run-concentracion:not(.run-terminando) .run-datos > div {
    padding: 6px 10px;
}

.run-concentracion:not(.run-terminando) .run-datos b {
    font-size: 1.3rem;
}

.run-concentracion:not(.run-terminando) .run-mapa-vivo {
    flex: 1 1 auto;   /* se queda con el espacio que sobra (el dibujo se estira un poco, nunca más de ~90 % del ancho de alto) */
    min-height: 110px;
    max-height: calc((100vw - 24px) * 0.9);
    margin: 0;
    aspect-ratio: auto;
}

.run-concentracion:not(.run-terminando) .run-pelea {
    grid-template-columns: 52px minmax(0, 1fr);
    margin: 0;
    padding: 6px 8px;
}

.run-concentracion:not(.run-terminando) .run-pelea-sprite {
    width: 52px;
    height: 52px;
}

.run-concentracion:not(.run-terminando) .run-pelea-texto small {
    font-size: 0.66rem;
}

.run-concentracion .run-objetivo,
.run-concentracion .run-parciales-vivo {
    display: none;
}

.run-concentracion:not(.run-terminando) [data-run-gps] {
    margin: 0;
    font-size: 0.7rem;
}

.run-botones-chicos {
    margin-top: 6px;
}

.run-concentracion:not(.run-terminando) .run-botones {
    margin-top: auto;   /* los botones se pegan al fondo y el mapa se queda con lo que sobra */
}

.run-concentracion:not(.run-terminando) .run-botones .boton {
    min-height: 50px;
}

.run-concentracion:not(.run-terminando) .run-botones-chicos {
    margin-top: 0;
}

.run-concentracion:not(.run-terminando) .run-botones-chicos .boton {
    min-height: 40px;
    font-size: 0.8rem;
}

.run-terminar .run-datos {
    margin-bottom: 8px;
}


/* ===== (v131) Botón de la vista del mapa ===== */
.run-mapa-vista {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    min-height: 32px;
    padding: 2px 10px;
    font-size: 0.72rem;
    color: #fff;
    background: rgba(11, 8, 22, 0.8);
    border: 1px solid rgba(241, 243, 255, 0.7);
    border-radius: var(--esquina);
}

/* ===== (v135–v136) Finanzas: resumen, plan 50/30/20, anotar, historial, metas y fuentes ===== */
/* Colores de cada sobre: necesidades celeste, gustos violeta, ahorro verde. Lo que entra en verde y lo que sale en rojo. */
.fin-entra { color: #34d399; }
.fin-sale { color: #fb7185; }
.fin-monto { white-space: nowrap; }

/* Lo grande de arriba: cuánto puedes gastar hoy. */
.fin-heroe {
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
    border-color: rgba(52, 211, 153, 0.55);
    background-image: linear-gradient(180deg, rgba(52, 211, 153, 0.16), transparent 75%);
}

.fin-heroe-cifra {
    font-family: var(--letra-titulo);
    font-size: 2.1rem;
    line-height: 1.1;
    color: #34d399;
}

.fin-heroe small { opacity: 0.8; }

/* Lo demás que ve Aurelio (debajo de su globo). */
.fin-aurelio.fin-alerta { border-color: rgba(251, 113, 133, 0.6); }
.fin-aurelio.fin-bien { border-color: rgba(52, 211, 153, 0.6); }

.fin-notas {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.fin-notas li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #fbbf24;
    border-radius: var(--esquina, 4px);
}

.fin-notas li.fin-alerta { border-left-color: #fb7185; }
.fin-notas li.fin-bien { border-left-color: #34d399; }

/* Entró · Gastaste · Te queda */
.fin-cifras {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 8px 0;
    text-align: center;
}

.fin-cifras small { display: block; opacity: 0.75; }
.fin-cifras b { font-size: 1.05rem; }

/* La barra con los tres sobres y su leyenda. */
.fin-barra-plan {
    display: flex;
    height: 12px;
    margin-top: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--esquina, 4px);
}

.fin-barra-plan .fin-tramo-necesidad, .fin-punto.fin-tramo-necesidad { background: #22d3ee; }
.fin-barra-plan .fin-tramo-gusto, .fin-punto.fin-tramo-gusto { background: #c084fc; }
.fin-barra-plan .fin-tramo-ahorro, .fin-punto.fin-tramo-ahorro { background: #34d399; }

.fin-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    font-size: 0.75rem;
    opacity: 0.85;
}

.fin-punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 2px;
}

/* Cada sobre del plan */
.fin-sobre {
    display: grid;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fin-sobre-cab {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

.fin-barra-necesidad .barra-relleno { background: #22d3ee; }
.fin-barra-gusto .barra-relleno { background: #c084fc; }
.fin-barra-ahorro .barra-relleno { background: #34d399; }
.fin-barra-mala .barra-relleno { background: #fb7185; }

/* Cómo repartir el último ingreso */
.fin-reparto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    text-align: center;
}

.fin-reparto > div {
    display: grid;
    gap: 2px;
    padding: 8px 4px;
    border-top: 3px solid;
    border-radius: var(--esquina, 4px);
}

.fin-reparto small { font-size: 0.7rem; opacity: 0.85; }
.fin-reparto .fin-tramo-necesidad { border-color: #22d3ee; background: rgba(34, 211, 238, 0.1); }
.fin-reparto .fin-tramo-gusto { border-color: #c084fc; background: rgba(192, 132, 252, 0.1); }
.fin-reparto .fin-tramo-ahorro { border-color: #34d399; background: rgba(52, 211, 153, 0.1); }

/* Listas: historial, mayores gastos, metas, deudas y fuentes */
.fin-lista {
    display: grid;
    gap: 6px;
    margin: 8px 0;
    padding: 0;
    list-style: none;
}

.fin-dia {
    padding-top: 8px;
    opacity: 0.7;
}

.fin-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fin-fila-texto {
    display: grid;
    flex: 1;
    min-width: 0;
}

.fin-fila-texto b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-fila-texto small { opacity: 0.7; }
.fin-borrar { min-width: 44px; }

.fin-mayor {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 8px;
}

.fin-mayor .barra { grid-column: 1 / -1; }

.fin-mes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fin-mes .titulo-juego { margin: 0; }

.fin-tarjeta {
    display: grid;
    gap: 6px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--esquina, 4px);
}

.fin-tarjeta-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fin-lista-cumplida { border-color: rgba(52, 211, 153, 0.6); }
.fin-valor { font-size: 1.2rem; color: #fbbf24; }

.fin-patrimonio {
    display: grid;
    margin: 4px 0 10px;
    text-align: center;
}

.fin-patrimonio b { font-size: 1.6rem; color: #fbbf24; }

/* Formularios: el monto grande, los sobres como fichas y dos campos lado a lado */
.fin-modo { margin-bottom: 12px; }

.fin-grande input {
    font-size: 1.4rem;
    text-align: center;
}

.fin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.fin-chips legend {
    margin-bottom: 6px;
    padding: 0;
    font-size: 0.85rem;
}

.fin-chip { position: relative; }

.fin-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fin-chip span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--esquina, 4px);
}

.fin-chip input:checked + span {
    background: rgba(251, 191, 36, 0.15);
    border-color: #fbbf24;
}

.fin-chip input:focus-visible + span { outline: 2px solid #fbbf24; }

.fin-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.fin-par input { min-width: 0; }
.fin-neutro { color: #c4bfe0; }

/* ===== (v138) Finanzas: meses, medios, fijos, límites, próximos ingresos y corrección de movimientos ===== */
.fin-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 0.7rem;
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.6);
    border-radius: var(--esquina, 4px);
    vertical-align: middle;
}

.fin-ok { color: #34d399; }
.fin-atrasado { border-color: rgba(251, 113, 133, 0.6); }
.fin-atrasado .fin-ok, .fin-atrasado small.fin-sale { color: #fb7185; }

/* Los últimos 6 meses: dos barras por mes (entró y gastaste) */
.fin-meses {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    align-items: end;
    height: 120px;
    margin-top: 8px;
}

.fin-mes-col {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    height: 100%;
    min-width: 0;
    text-align: center;
}

.fin-mes-barras {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
}

.fin-mes-barras span {
    width: 40%;
    max-width: 16px;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
}

.fin-mes-ing, .fin-punto.fin-mes-ing { background: #34d399; }
.fin-mes-gas, .fin-punto.fin-mes-gas { background: #fb7185; }
.fin-mes-col small { font-size: 0.7rem; opacity: 0.75; }

/* Medios de pago */
.fin-medios {
    display: grid;
    gap: 6px;
    margin: 8px 0;
    padding: 0;
    list-style: none;
}

.fin-medio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--esquina, 4px);
}

.fin-medio-malo { border-left: 3px solid #fb7185; }

/* Corregir un movimiento: el formulario ocupa la fila */
.fin-editando { padding: 8px 0; }
.fin-editar {
    padding: 10px;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: var(--esquina, 4px);
}

.fin-editar .fin-par button { flex: 1; }

/* Tarjetas de fijos, límites y pagos esperados: el botón de acción ocupa el ancho */
.fin-tarjeta > .boton-chico:not(.fin-borrar) {
    justify-self: start;
    margin-top: 4px;
}