/* Variables CSS para Temas */
:root {
    --bg-color: #0b0c10;
    --text-color: #c5c6c7;
    --primary-color: #66fcf1;
    --primary-dark: #45a29e;
    --danger-color: #e23e57;
    --glass-bg: rgba(31, 40, 51, 0.6);
    --glass-border: rgba(102, 252, 241, 0.2);
    --transition-speed: 0.4s;
    --font-family: 'Roboto', sans-serif;
}

body.retro-mode {
    --font-family: 'Courier New', Courier, monospace;
    --bg-color: #000;
    --text-color: #0f0;
    --glass-bg: rgba(0, 0, 0, 0.8);
    --glass-border: #0f0;
    --primary-color: #0f0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-speed), color var(--transition-speed);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Efectos Glassmorphism (Panel Cristal) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
}

.controls {
    display: flex;
    gap: 30px;
    align-items: center;
}

.lives .heart {
    font-size: 24px;
    margin: 0 2px;
}

/* Toggle Switch (Interruptor) */
.theme-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.theme-switch input {
    display: none;
}

.slider {
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #2a2a2a;
    border-radius: 30px;
    transition: .4s;
}

.slider:before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    border-radius: 50%;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(30px);
    background-color: var(--bg-color);
}

/* Botones */
.btn {
    padding: 10px 20px;
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    transition: all 0.3s;
}

.btn:hover {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 0 15px var(--primary-color);
}

.btn.primary {
    background: var(--primary-color);
    color: #000;
}

.btn.primary:hover {
    background: var(--primary-dark);
}

/* Contenedor Principal (Screens) */
#game-board {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Pantallas y Layout */
.screen {
    display: none;
    flex: 1;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.screen.active {
    display: flex;
}

/* Fondos y Estética de Pantalla (Welcome, Game Over, Victory) */
/* ── HOME: CAPA DE FONDO ANIMADA (KEN BURNS) ─────────────────── */
/* El fondo ya no está en #screen-welcome sino en #home-bg,
   un div absolute que se anima con transform para el efecto de cámara.
   Usamos inset:-15% para que el zoom nunca muestre bordes. */
#screen-welcome {
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 40px 40px 5vw;
    background: #050810; /* Fallback mientras carga la imagen */
}

#home-bg {
    position: absolute;
    inset: -15%;          /* Margen extra para que el zoom no muestre bordes */
    background-image: url('../img/bg_home.png');
    background-size: cover;
    background-position: center center;
    z-index: 0;
    will-change: transform;
    animation: home-ken-burns 90s ease-in-out infinite;
}

/* ─── El viaje de la cámara ─────────────────────────────────────
   - Frame  0%: Vista panorámica del castillo completo
   - Frame 16%: Zoom al genio (abajo-derecha): translate(-12%, -8%)
   - Frame 32%: Portón del castillo (centro-abajo): translate(-2%, -6%)
   - Frame 48%: Zona del hada (centro-izquierda): translate(10%, -5%)
   - Frame 62%: Torres altas (arriba centro): translate(0%, 4%)
   - Frame 78%: Close-up genio con niebla verde: translate(-14%, -11%)
   - Frame 92%: Hada + entrada: translate(8%, -4%)
   - Frame 100%: Vuelta al inicio
   Nota: translate() mueve el recuadro, translate(-X%) da más margen derecho
   ─────────────────────────────────────────────────────────────── */
@keyframes home-ken-burns {
    0%   { transform: scale(1.0)  translate(   0%,    0%); }   /* Panorámica */
    8%   { transform: scale(1.08) translate(  -2%,   -1%); }   /* Pequeño avance */
    16%  { transform: scale(1.35) translate( -13%,   -9%); }   /* → Genio */
    24%  { transform: scale(1.28) translate(  -8%,   -6%); }   /* Pull-back suave */
    32%  { transform: scale(1.15) translate(  -1%,   -7%); }   /* Portón */
    42%  { transform: scale(1.30) translate(  11%,   -4%); }   /* → Hada */
    52%  { transform: scale(1.22) translate(   7%,   -2%); }   /* Hada medio */
    60%  { transform: scale(1.10) translate(   1%,    5%); }   /* ↑ Torres */
    70%  { transform: scale(1.40) translate( -15%,  -12%); }   /* → Genio close */
    80%  { transform: scale(1.32) translate( -10%,   -8%); }   /* Genio medio */
    88%  { transform: scale(1.25) translate(   9%,   -5%); }   /* Hada final */
    94%  { transform: scale(1.08) translate(   2%,   -1%); }   /* Pull-back total */
    100% { transform: scale(1.0)  translate(   0%,    0%); }   /* Inicio */
}

/* El glass panel y su contenido por encima del fondo animado */
#screen-welcome > *:not(#home-bg) {
    position: relative;
    z-index: 2;
}

/* Asegurar que el glass-panel en el home tenga position:relative para el btn de música */
#screen-welcome .glass-panel {
    position: relative;
}

#screen-game-over {
    background-image: url('../img/bg_home.png'); /* Usa el background hasta tener uno de Game Over dedicado */
    background-size: cover;
    background-position: center;
    filter: sepia(0.8) hue-rotate(-50deg) brightness(0.6);
    padding: 40px;
}

#screen-victory {
    background-image: url('../img/bg_home.png');
    background-size: cover;
    background-position: center;
    filter: saturate(1.5) brightness(1.2);
    padding: 40px;
}

.victory-panel {
    border-color: #ffd700;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
    max-width: 760px;
    width: min(92vw, 760px);
    padding: 24px;
}

.victory-art {
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
    margin-bottom: 16px;
}

.victory-title {
    color: #ffd700;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    margin-bottom: 10px;
}

.victory-subtitle {
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 18px;
}

.victory-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto 18px;
}

.victory-credits {
    text-align: left;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 14px 16px;
}

.victory-credits h3 {
    color: #ffd700;
    margin-bottom: 8px;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.victory-credits p {
    margin: 0 0 6px;
    color: #f0f0f0;
    font-size: 0.94rem;
    line-height: 1.45;
}

.victory-credits .credits-thanks {
    margin-top: 8px;
    color: #ffd700;
    font-weight: 600;
}

@media (max-width: 700px) {
    #screen-victory {
        padding: 18px;
    }

    .victory-panel {
        padding: 16px;
    }

    .victory-art {
        max-height: 38vh;
    }
}

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

.glass-panel {
    background: rgba(10, 10, 15, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    z-index: 10;
}

/* Panel exclusivo del Home: más estrecho y con borde izquierdo luminoso */
#screen-welcome .glass-panel {
    max-width: 420px !important;
    width: 100%;
    border-left: 3px solid rgba(102, 252, 241, 0.5);
    box-shadow: 0 15px 50px rgba(0,0,0,0.7), -2px 0 30px rgba(102,252,241,0.1);
}

#hud-indicator {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px;
    border: 1px solid var(--primary-color);
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(102, 252, 241, 0.3);
    margin: 5px 0;
}

.hud-separator {
    color: var(--primary-color);
    margin: 0 10px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Contenedor de Imagen y Overlay Interactivo */
.image-container {
    position: relative;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    background: #111;
}

#level-bg {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

#level-bg.fading {
    opacity: 0;
}

/* ─── Título del acertijo ───────────────────────────────────────────── */
.puzzle-title-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 800px;
    margin-bottom: 12px;
    padding: 10px 24px;
    background: linear-gradient(
        135deg,
        rgba(20, 10, 40, 0.85) 0%,
        rgba(40, 15, 60, 0.9) 50%,
        rgba(20, 10, 40, 0.85) 100%
    );
    border: 1px solid rgba(102, 252, 241, 0.35);
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(102, 252, 241, 0.18), inset 0 0 20px rgba(102, 252, 241, 0.06);
    backdrop-filter: blur(6px);
    animation: titleReveal 0.5s ease both;
}

.puzzle-title-banner h2 {
    margin: 0;
    font-size: clamp(1.05rem, 2.5vw, 1.55rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    color: #f0e8ff;
    text-shadow:
        0 0 8px rgba(102, 252, 241, 0.6),
        0 0 20px rgba(180, 100, 255, 0.35);
}

.puzzle-title-ornament {
    font-size: 1.1rem;
    color: rgba(102, 252, 241, 0.7);
    text-shadow: 0 0 10px rgba(102, 252, 241, 0.8);
    flex-shrink: 0;
}

@keyframes titleReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.puzzle-title-banner.hidden {
    display: none;
}

/* ── Barra de Progreso del Castillo + Vidas ────────────────────────────── */
.level-progress-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 6px 0 4px;
    width: 100%;
    max-width: 620px;
    padding: 0 8px;
    box-sizing: border-box;
}

.castle-progress {
    flex: 1;
    max-width: 480px;
    min-width: 220px;
}

.progress-bar-track {
    position: relative;
    width: 100%;
    height: 16px;
    background: linear-gradient(180deg, rgba(16, 22, 44, 0.95), rgba(7, 10, 24, 0.95));
    border: 1px solid rgba(102, 252, 241, 0.45);
    border-radius: 999px;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 12px rgba(102, 252, 241, 0.28);
}

.progress-bar-fill {
    width: 8.3333%;
    height: 100%;
    background: linear-gradient(90deg, #ff3a5f 0%, #ff6464 45%, #ffc46b 100%);
    border-radius: inherit;
    box-shadow: 0 0 14px rgba(255, 90, 90, 0.5);
    transition: width 0.35s ease, filter 0.35s ease;
}

.progress-bar-track::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc((100% / 12) - 1px),
            rgba(255, 255, 255, 0.12) calc((100% / 12) - 1px),
            rgba(255, 255, 255, 0.12) calc(100% / 12)
        );
}

.progress-bar-label {
    margin-top: 5px;
    font-size: 0.72rem;
    text-align: center;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(200, 245, 255, 0.9);
    text-shadow: 0 0 8px rgba(102, 252, 241, 0.35);
}

.hud-lives {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.vida-icon {
    height: 36px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 5px rgba(255, 80, 80, 0.55));
}

.retro-mode .vida-icon {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: none;
    height: 30px;
}

/* Retro 1997: aspecto plano gris/rojo similar al original */
.retro-mode .progress-bar-track {
    height: 14px;
    border-radius: 0;
    border: 1px solid #5a5a5a;
    background: #d9d9d9;
    box-shadow:
        inset 1px 1px 0 #f0f0f0,
        inset -1px -1px 0 #8a8a8a;
}

.retro-mode .progress-bar-fill {
    border-radius: 0;
    background: #ff1f1f;
    box-shadow: none;
    filter: none;
    transition: width 0.2s steps(12, end);
}

.retro-mode .progress-bar-track::after {
    display: none;
}

.retro-mode .progress-bar-label {
    color: #e6e6e6;
    text-shadow: none;
    letter-spacing: 0.8px;
}


#interactive-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Dejamos que los hijos tengan pointer-events: auto */
}

/* Botones "Fantasma" del Overlay */
.overlay-btn {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    background: rgba(102, 252, 241, 0.2); /* Fondo sutil para debug/visualización */
    border: 2px dashed rgba(102, 252, 241, 0.6); /* Borde visible para ver donde están configurados */
    border-radius: 8px;
    transition: border-color 0.3s, background 0.3s;
}

.overlay-btn:hover {
    border-color: var(--primary-color);
    background: rgba(102, 252, 241, 0.3);
    box-shadow: 0 0 15px var(--primary-color);
}

/* Modos Especiales (Level 7 y Level 12) */
.selected-neon {
    border: 3px solid #0f0 !important;
    background: rgba(0, 255, 0, 0.3) !important;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.8) !important;
}

/* Nivel 12: Marcadores de resultado individual por carta */
.card-wrong-badge,
.card-ok-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    line-height: 1;
    pointer-events: none;
    z-index: 20;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
    animation: badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.card-ok-badge {
    font-size: 1.8rem;
    color: #00ff44;
    text-shadow: 0 0 10px #00ff44;
}

.card-missed-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    line-height: 1;
    pointer-events: none;
    z-index: 20;
    color: #ffd54a;
    text-shadow: 0 0 10px #ffd54a;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
    animation: badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.card-fail {
    border-color: rgba(255, 0, 0, 0.8) !important;
    background: rgba(255, 0, 0, 0.25) !important;
}

.card-solution {
    border-color: rgba(0, 255, 68, 0.85) !important;
    background: rgba(0, 255, 68, 0.16) !important;
}

.card-missed {
    border-color: rgba(255, 213, 74, 0.85) !important;
    background: rgba(255, 213, 74, 0.16) !important;
}

@keyframes badge-pop {
    from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.cycle-badge {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 10, 0.85);
    color: #66fcf1;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #66fcf1;
    font-size: 0.85rem;
    font-weight: bold;
    white-space: nowrap;
    text-shadow: 0 0 5px #66fcf1;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    pointer-events: none; /* No roba clics de la caja */
}

.cycle-badge-ok {
    color: #7dffae;
    border-color: #7dffae;
    text-shadow: 0 0 6px #7dffae;
}

.cycle-badge-wrong {
    color: #ff9b9b;
    border-color: #ff7575;
    text-shadow: 0 0 6px #ff7575;
}

.cycle-result-badge {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

.cycle-result-ok {
    background: rgba(0, 255, 68, 0.18);
    border: 1px solid rgba(0, 255, 68, 0.8);
    color: #7dffae;
}

.cycle-result-wrong {
    background: rgba(255, 82, 82, 0.18);
    border: 1px solid rgba(255, 82, 82, 0.85);
    color: #ffb0b0;
}

.cycle-slot-ok {
    border-color: rgba(0, 255, 68, 0.85) !important;
    background: rgba(0, 255, 68, 0.15) !important;
    box-shadow: 0 0 16px rgba(0, 255, 68, 0.35) !important;
}

.cycle-slot-wrong {
    border-color: rgba(255, 82, 82, 0.85) !important;
    background: rgba(255, 82, 82, 0.15) !important;
    box-shadow: 0 0 16px rgba(255, 82, 82, 0.35) !important;
}

.float-maestro {
    position: relative;  /* Elemento hijo normal del flex-column de level-wrapper */
    display: block;
    margin: 16px auto 0 auto;
    font-size: 1.2rem;
    padding: 15px 40px;
    border-radius: 50px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(102, 252, 241, 0.4);
    z-index: 100;
    pointer-events: none; /* Invisible = no clicable */
    cursor: pointer;
}

.float-maestro.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Al hacerse visible, activar clics */
}

/* Story Panel */
.story-panel {
    width: 100%;
    text-align: center;
}

.story-panel h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

/* Helpers */
.hidden {
    display: none !important;
}

/* ==============================
   Animaciones del Pergamino (Fallo)
   ============================== */
.image-container {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    transform-origin: top center;
}

#pergamino-container {
    z-index: 1;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    
    /* Diseño moderno Panel de Cristal Oscuro ("Pergamino Holográfico") */
    background: rgba(30, 5, 5, 0.85); /* Tono muy oscuro con ligero toque rojo */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #e0e0e0;
    border-radius: 0 0 20px 20px;
    width: 85%;
    margin-top: -40px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    border: 1px solid rgba(255, 60, 60, 0.3);
    border-top: none;
}

#level-wrapper.failed .image-container {
    transform: scale(0.85);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    border: 2px solid rgba(255,0,0,0.6);
}

#level-wrapper.failed #pergamino-container {
    max-height: 600px;
    opacity: 1;
}

.pergamino-inner {
    padding: 60px 40px 30px 40px;
    font-size: 1.15rem;
    line-height: 1.6;
    text-align: left;
    font-weight: 300;
}

#failure-text p {
    margin-bottom: 15px;
}

#failure-text b {
    display: block;
    font-size: 1.3rem;
    color: #ff5555;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#failure-cross {
    position: absolute;
    pointer-events: none;
    font-size: 8vw; /* responsive size */
    color: #ff1a1a;
    font-weight: bold;
    text-shadow: 0 0 15px black, 0 0 5px darkred;
    transform: translate(-50%, -50%); /* para que left/top sea el centro exacto */
    z-index: 10;
}

.failure-marker {
    position: absolute;
    pointer-events: none;
    font-size: 8vw;
    color: #ff1a1a;
    font-weight: bold;
    text-shadow: 0 0 15px black, 0 0 5px darkred;
    transform: translate(-50%, -50%);
    z-index: 10;
}


/* Alt 1: Cyberpunk */
#pergamino-container.theme-cyber { background: rgba(10, 5, 25, 0.9); border: 2px solid #0ff; box-shadow: 0 0 20px #0ff, inset 0 0 30px rgba(0,255,255,0.2); }
#pergamino-container.theme-cyber #failure-text b { color: #f0f; text-shadow: 0 0 5px #f0f; }
#pergamino-container.theme-cyber .btn.primary { background: transparent; border: 1px solid #f0f; color: #f0f; box-shadow: 0 0 10px #f0f; }

/* Alt 2: Minimalist Light */
#pergamino-container.theme-minimal { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 25px 50px rgba(0,0,0,0.1); color: #333; }
#pergamino-container.theme-minimal #failure-text b { color: #d13232; font-weight: 800; }
#pergamino-container.theme-minimal .btn.primary { background: #000; color: #fff; border: none; border-radius: 5px; }

/* Alt 3: Fantasy / Magic */
#pergamino-container.theme-fantasy { background: radial-gradient(circle at center, rgba(30,10,20,0.95) 0%, rgba(10,0,5,0.95) 100%); border: 2px solid #c5a059; box-shadow: 0 0 40px rgba(197, 160, 89, 0.3); color: #ebd197; border-radius: 0 0 30px 30px; }
#pergamino-container.theme-fantasy #failure-text b { color: #ff4747; font-family: serif; letter-spacing: 3px; border-bottom: 1px solid #c5a059; padding-bottom: 5px; }
#pergamino-container.theme-fantasy .btn.primary { background: #c5a059; color: #000; border: none; border-radius: 2px; }

/* Retro failure: mostrar el GIF original casi limpio, sin superposiciones modernas */
body.retro-failure-active #failure-cross,
body.retro-failure-active .puzzle-title-banner,
body.retro-failure-active .level-progress-row,
body.retro-failure-active .story-panel,
body.retro-failure-active #muro-caidos-container {
    display: none !important;
}

body.retro-failure-active #level-wrapper.failed .image-container {
    transform: none;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    border: none;
}

body.retro-failure-active #level-wrapper.failed #pergamino-container {
    max-height: 520px;
    opacity: 1;
    width: 85%;
    min-width: 240px;
    max-width: 760px;
    margin-top: 10px;
    border-radius: 10px;
    border: 1px solid #7e7e7e;
    background: rgba(25, 25, 25, 0.92);
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}

body.retro-failure-active .pergamino-inner {
    padding: 20px 22px 18px;
    text-align: left;
}

body.retro-failure-active #failure-text {
    display: block !important;
    color: #ece7da;
    font-size: 1rem;
    line-height: 1.5;
}

body.retro-failure-active #failure-text b,
body.retro-failure-active #failure-text strong {
    color: #ffdf8a;
    text-shadow: none;
    border-bottom: 1px solid rgba(255, 223, 138, 0.45);
}