/* Configuración de fuente pixelada para la pantalla */
        /* Usamos 'VT323' para el estilo pixelado, pero 'Inter' para el resto del UI */
        @import url('https://fonts.googleapis.com/css2?family=VT323&family=Inter:wght@400;600;700&display=swap');
        
        body {
            background: #f3f4f6;
            font-family: 'Inter', sans-serif;
            color: var(--text-dark);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1.5rem;
        }

        .pixel-font {
            font-family: 'VT323', monospace;
            font-size: 2rem;
            white-space: nowrap;
        }

        /* ===== CARA DE PIXELITO ESTILO ROBOT ===== */
        .pixelito-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'VT323', monospace;
            font-size: 1.1rem;
            line-height: 1.0;
            color: #1f2937;
            /* Animación de respiración */
            animation: breathing 3s ease-in-out infinite;
        }

        .pixelito-row {
            display: flex;
            justify-content: center;
            white-space: pre;
        }

        /* Ojos con parpadeo */
        .pixelito-eyes {
            display: inline;
        }

        .pixelito-eyes.blinking .eye-open {
            display: none;
        }
        .pixelito-eyes.blinking .eye-closed {
            display: inline;
        }
        .pixelito-eyes .eye-closed {
            display: none;
        }

        /* Boca con animación al hablar */
        .pixelito-mouth {
            display: inline;
        }
        .pixelito-mouth .mouth-normal {
            display: inline;
        }
        .pixelito-mouth .mouth-talking {
            display: none;
        }
        .pixelito-mouth.talking .mouth-normal {
            display: none;
        }
        .pixelito-mouth.talking .mouth-talking {
            display: inline;
        }

        /* Animación de respiración suave */
        @keyframes breathing {
            0%, 100% { transform: scale(1) translateY(0); }
            50% { transform: scale(1.03) translateY(-2px); }
        }

        /* Animación de parpadeo */
        @keyframes blink {
            0%, 90%, 100% { opacity: 1; }
            95% { opacity: 0; }
        }

        /* Variables de color basadas en el boceto */
        :root {
            --lcd-green: #e1ffe0; /* Fondo de pantalla de la mascota */
            --device-bg: #ececec; /* Fondo exterior del dispositivo (gris muy claro/crema) */
            --border-dark: #333333; /* Borde oscuro */
            --text-dark: #1f2937; /* Texto principal */
        }

        /* 1. Estilo para el dispositivo exterior (Cuerpo Color Crema/Blanco Roto) */
        .pet-device {
            width: min(900px, 100%);
            max-width: 900px;
            background: var(--device-bg);
            border: 8px solid var(--border-dark);
            border-radius: 32px;
            padding: clamp(1.2rem, 2vw, 2rem);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            box-sizing: border-box;
            height: min(820px, 100%);
            max-height: 820px;
            padding: clamp(1rem, 1.5vw, 1.6rem);
        }

        /* Contenedor principal para la distribución interna del boceto */
        .main-layout {
            display: grid;
            grid-template-columns: 1.6fr 0.9fr;
            gap: 1.75rem;
            width: 100%;
            align-items: stretch;
        }

        .device-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.75rem;
            width: 100%;
        }

        .device-title {
            font-size: clamp(2.3rem, 4vw, 3rem);
            letter-spacing: 0.08em;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }

        .level-chip {
            background: #fef3c7;
            border: 3px solid var(--border-dark);
            border-radius: 999px;
            padding: 0.25rem 1.2rem;
            font-size: 1.05rem;
            letter-spacing: 0.05em;
            font-family: 'VT323', monospace;
        }

        /* Contenedor de la pantalla LCD */
        .lcd-screen-container {
            border: 4px solid var(--border-dark);
            background-color: var(--lcd-green);
            border-radius: 18px;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            position: relative;
            overflow: hidden;
            min-height: 460px;
        }

        /* ===== EFECTO DE TÚNEL / HIPERESPACIO ===== */
        /* Líneas radiales girando (opacidad reducida) con movimiento */
        .lcd-screen-container::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200%;
            height: 200%;
            transform: translate(-50%, -50%);
            background: 
                repeating-conic-gradient(
                    from 0deg,
                    transparent 0deg 8deg,
                    rgba(34, 80, 34, 0.06) 8deg 10deg,
                    transparent 10deg 18deg
                );
            animation: hyperspace-spin 25s linear infinite, vortex-drift 15s ease-in-out infinite;
            z-index: 0;
            pointer-events: none;
        }

        @keyframes hyperspace-spin {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* Movimiento del origen del vórtice */
        @keyframes vortex-drift {
            0%, 100% { left: 50%; top: 50%; }
            12.5% { left: 55%; top: 45%; }
            25% { left: 52%; top: 55%; }
            37.5% { left: 45%; top: 52%; }
            50% { left: 48%; top: 45%; }
            62.5% { left: 55%; top: 50%; }
            75% { left: 50%; top: 55%; }
            87.5% { left: 45%; top: 48%; }
        }

        /* Contenedor de partículas de luz - con movimiento de estrella */
        .starfield {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            overflow: hidden;
            animation: starfield-move 12s ease-in-out infinite;
        }

        /* Segunda capa - rotada 180° y con timing diferente */
        .starfield:nth-of-type(2) {
            transform: rotate(180deg);
            animation: starfield-move 12s ease-in-out infinite reverse;
            animation-delay: -6s;
        }

        /* Tercera capa - rotada 90° */
        .starfield:nth-of-type(3) {
            transform: rotate(90deg);
            animation: starfield-move 14s ease-in-out infinite;
            animation-delay: -3s;
        }

        /* Cuarta capa - rotada 270° */
        .starfield:nth-of-type(4) {
            transform: rotate(270deg);
            animation: starfield-move 14s ease-in-out infinite reverse;
            animation-delay: -9s;
        }

        /* Movimiento del vórtice en trayectoria de estrella pentagonal */
        @keyframes starfield-move {
            0% {
                transform: rotate(var(--rotation, 0deg)) translate(0%, 0%);
            }
            10% {
                transform: rotate(var(--rotation, 0deg)) translate(6%, -8%);
            }
            20% {
                transform: rotate(var(--rotation, 0deg)) translate(-4%, -6%);
            }
            30% {
                transform: rotate(var(--rotation, 0deg)) translate(-8%, 4%);
            }
            40% {
                transform: rotate(var(--rotation, 0deg)) translate(-2%, 7%);
            }
            50% {
                transform: rotate(var(--rotation, 0deg)) translate(7%, 5%);
            }
            60% {
                transform: rotate(var(--rotation, 0deg)) translate(8%, -2%);
            }
            70% {
                transform: rotate(var(--rotation, 0deg)) translate(2%, -7%);
            }
            80% {
                transform: rotate(var(--rotation, 0deg)) translate(-6%, -4%);
            }
            90% {
                transform: rotate(var(--rotation, 0deg)) translate(-5%, 6%);
            }
            100% {
                transform: rotate(var(--rotation, 0deg)) translate(0%, 0%);
            }
        }

        .starfield:nth-of-type(1) { --rotation: 0deg; }
        .starfield:nth-of-type(2) { --rotation: 180deg; }
        .starfield:nth-of-type(3) { --rotation: 90deg; }
        .starfield:nth-of-type(4) { --rotation: 270deg; }

        /* Partículas de luz individuales */
        .star-particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: rgba(60, 120, 60, 0.4);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: star-fly 2.5s linear infinite;
        }

        /* Diferentes trayectorias para cada partícula - 48 partículas */
        .star-particle:nth-child(1) { animation-delay: 0s; --angle: 0deg; --distance: 400px; }
        .star-particle:nth-child(2) { animation-delay: 0.052s; --angle: 7.5deg; --distance: 380px; }
        .star-particle:nth-child(3) { animation-delay: 0.104s; --angle: 15deg; --distance: 420px; }
        .star-particle:nth-child(4) { animation-delay: 0.156s; --angle: 22.5deg; --distance: 390px; }
        .star-particle:nth-child(5) { animation-delay: 0.208s; --angle: 30deg; --distance: 410px; }
        .star-particle:nth-child(6) { animation-delay: 0.26s; --angle: 37.5deg; --distance: 385px; }
        .star-particle:nth-child(7) { animation-delay: 0.312s; --angle: 45deg; --distance: 405px; }
        .star-particle:nth-child(8) { animation-delay: 0.364s; --angle: 52.5deg; --distance: 395px; }
        .star-particle:nth-child(9) { animation-delay: 0.416s; --angle: 60deg; --distance: 370px; }
        .star-particle:nth-child(10) { animation-delay: 0.468s; --angle: 67.5deg; --distance: 415px; }
        .star-particle:nth-child(11) { animation-delay: 0.52s; --angle: 75deg; --distance: 375px; }
        .star-particle:nth-child(12) { animation-delay: 0.572s; --angle: 82.5deg; --distance: 425px; }
        .star-particle:nth-child(13) { animation-delay: 0.624s; --angle: 90deg; --distance: 365px; }
        .star-particle:nth-child(14) { animation-delay: 0.676s; --angle: 97.5deg; --distance: 430px; }
        .star-particle:nth-child(15) { animation-delay: 0.728s; --angle: 105deg; --distance: 360px; }
        .star-particle:nth-child(16) { animation-delay: 0.78s; --angle: 112.5deg; --distance: 435px; }
        .star-particle:nth-child(17) { animation-delay: 0.832s; --angle: 120deg; --distance: 380px; }
        .star-particle:nth-child(18) { animation-delay: 0.884s; --angle: 127.5deg; --distance: 400px; }
        .star-particle:nth-child(19) { animation-delay: 0.936s; --angle: 135deg; --distance: 390px; }
        .star-particle:nth-child(20) { animation-delay: 0.988s; --angle: 142.5deg; --distance: 410px; }
        .star-particle:nth-child(21) { animation-delay: 1.04s; --angle: 150deg; --distance: 385px; }
        .star-particle:nth-child(22) { animation-delay: 1.092s; --angle: 157.5deg; --distance: 420px; }
        .star-particle:nth-child(23) { animation-delay: 1.144s; --angle: 165deg; --distance: 375px; }
        .star-particle:nth-child(24) { animation-delay: 1.196s; --angle: 172.5deg; --distance: 405px; }
        .star-particle:nth-child(25) { animation-delay: 1.248s; --angle: 180deg; --distance: 395px; }
        .star-particle:nth-child(26) { animation-delay: 1.3s; --angle: 187.5deg; --distance: 415px; }
        .star-particle:nth-child(27) { animation-delay: 1.352s; --angle: 195deg; --distance: 370px; }
        .star-particle:nth-child(28) { animation-delay: 1.404s; --angle: 202.5deg; --distance: 425px; }
        .star-particle:nth-child(29) { animation-delay: 1.456s; --angle: 210deg; --distance: 380px; }
        .star-particle:nth-child(30) { animation-delay: 1.508s; --angle: 217.5deg; --distance: 400px; }
        .star-particle:nth-child(31) { animation-delay: 1.56s; --angle: 225deg; --distance: 390px; }
        .star-particle:nth-child(32) { animation-delay: 1.612s; --angle: 232.5deg; --distance: 410px; }
        .star-particle:nth-child(33) { animation-delay: 1.664s; --angle: 240deg; --distance: 365px; }
        .star-particle:nth-child(34) { animation-delay: 1.716s; --angle: 247.5deg; --distance: 430px; }
        .star-particle:nth-child(35) { animation-delay: 1.768s; --angle: 255deg; --distance: 375px; }
        .star-particle:nth-child(36) { animation-delay: 1.82s; --angle: 262.5deg; --distance: 405px; }
        .star-particle:nth-child(37) { animation-delay: 1.872s; --angle: 270deg; --distance: 385px; }
        .star-particle:nth-child(38) { animation-delay: 1.924s; --angle: 277.5deg; --distance: 420px; }
        .star-particle:nth-child(39) { animation-delay: 1.976s; --angle: 285deg; --distance: 370px; }
        .star-particle:nth-child(40) { animation-delay: 2.028s; --angle: 292.5deg; --distance: 415px; }
        .star-particle:nth-child(41) { animation-delay: 2.08s; --angle: 300deg; --distance: 380px; }
        .star-particle:nth-child(42) { animation-delay: 2.132s; --angle: 307.5deg; --distance: 400px; }
        .star-particle:nth-child(43) { animation-delay: 2.184s; --angle: 315deg; --distance: 395px; }
        .star-particle:nth-child(44) { animation-delay: 2.236s; --angle: 322.5deg; --distance: 410px; }
        .star-particle:nth-child(45) { animation-delay: 2.288s; --angle: 330deg; --distance: 365px; }
        .star-particle:nth-child(46) { animation-delay: 2.34s; --angle: 337.5deg; --distance: 425px; }
        .star-particle:nth-child(47) { animation-delay: 2.392s; --angle: 345deg; --distance: 380px; }
        .star-particle:nth-child(48) { animation-delay: 2.444s; --angle: 352.5deg; --distance: 405px; }

        @keyframes star-fly {
            0% {
                transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(0.1);
                opacity: 0;
            }
            10% {
                opacity: 0.5;
            }
            80% {
                opacity: 0.5;
            }
            100% {
                transform: translate(-50%, -50%) rotate(var(--angle)) translateY(var(--distance)) scale(1);
                opacity: 0;
                width: 24px;
                height: 24px;
            }
        }

        /* Segunda capa de partículas más pequeñas y rápidas - 32 partículas */
        .star-particle-small {
            position: absolute;
            width: 1px;
            height: 1px;
            background: rgba(80, 140, 80, 0.35);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: star-fly-small 1.5s linear infinite;
        }

        .star-particle-small:nth-child(1) { animation-delay: 0s; --angle: 5deg; --distance: 350px; }
        .star-particle-small:nth-child(2) { animation-delay: 0.047s; --angle: 16deg; --distance: 340px; }
        .star-particle-small:nth-child(3) { animation-delay: 0.094s; --angle: 27deg; --distance: 360px; }
        .star-particle-small:nth-child(4) { animation-delay: 0.141s; --angle: 38deg; --distance: 345px; }
        .star-particle-small:nth-child(5) { animation-delay: 0.188s; --angle: 50deg; --distance: 355px; }
        .star-particle-small:nth-child(6) { animation-delay: 0.235s; --angle: 61deg; --distance: 335px; }
        .star-particle-small:nth-child(7) { animation-delay: 0.282s; --angle: 72deg; --distance: 365px; }
        .star-particle-small:nth-child(8) { animation-delay: 0.329s; --angle: 83deg; --distance: 330px; }
        .star-particle-small:nth-child(9) { animation-delay: 0.376s; --angle: 95deg; --distance: 355px; }
        .star-particle-small:nth-child(10) { animation-delay: 0.423s; --angle: 106deg; --distance: 345px; }
        .star-particle-small:nth-child(11) { animation-delay: 0.47s; --angle: 117deg; --distance: 360px; }
        .star-particle-small:nth-child(12) { animation-delay: 0.517s; --angle: 128deg; --distance: 340px; }
        .star-particle-small:nth-child(13) { animation-delay: 0.564s; --angle: 140deg; --distance: 350px; }
        .star-particle-small:nth-child(14) { animation-delay: 0.611s; --angle: 151deg; --distance: 335px; }
        .star-particle-small:nth-child(15) { animation-delay: 0.658s; --angle: 162deg; --distance: 365px; }
        .star-particle-small:nth-child(16) { animation-delay: 0.705s; --angle: 173deg; --distance: 345px; }
        .star-particle-small:nth-child(17) { animation-delay: 0.752s; --angle: 185deg; --distance: 355px; }
        .star-particle-small:nth-child(18) { animation-delay: 0.799s; --angle: 196deg; --distance: 340px; }
        .star-particle-small:nth-child(19) { animation-delay: 0.846s; --angle: 207deg; --distance: 360px; }
        .star-particle-small:nth-child(20) { animation-delay: 0.893s; --angle: 218deg; --distance: 330px; }
        .star-particle-small:nth-child(21) { animation-delay: 0.94s; --angle: 230deg; --distance: 350px; }
        .star-particle-small:nth-child(22) { animation-delay: 0.987s; --angle: 241deg; --distance: 345px; }
        .star-particle-small:nth-child(23) { animation-delay: 1.034s; --angle: 252deg; --distance: 365px; }
        .star-particle-small:nth-child(24) { animation-delay: 1.081s; --angle: 263deg; --distance: 335px; }
        .star-particle-small:nth-child(25) { animation-delay: 1.128s; --angle: 275deg; --distance: 355px; }
        .star-particle-small:nth-child(26) { animation-delay: 1.175s; --angle: 286deg; --distance: 340px; }
        .star-particle-small:nth-child(27) { animation-delay: 1.222s; --angle: 297deg; --distance: 360px; }
        .star-particle-small:nth-child(28) { animation-delay: 1.269s; --angle: 308deg; --distance: 345px; }
        .star-particle-small:nth-child(29) { animation-delay: 1.316s; --angle: 320deg; --distance: 350px; }
        .star-particle-small:nth-child(30) { animation-delay: 1.363s; --angle: 331deg; --distance: 335px; }
        .star-particle-small:nth-child(31) { animation-delay: 1.41s; --angle: 342deg; --distance: 365px; }
        .star-particle-small:nth-child(32) { animation-delay: 1.457s; --angle: 353deg; --distance: 345px; }

        @keyframes star-fly-small {
            0% {
                transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(0.1);
                opacity: 0;
            }
            15% {
                opacity: 0.4;
            }
            75% {
                opacity: 0.4;
            }
            100% {
                transform: translate(-50%, -50%) rotate(var(--angle)) translateY(var(--distance)) scale(1);
                opacity: 0;
                width: 12px;
                height: 12px;
            }
        }

        /* Asegurar que Pixelito esté encima del efecto */
        .pixelito-wrapper {
            z-index: 2;
        }

        #pixelito-face {
            z-index: 3;
        }

        /* ------------------------------------- */
        /* Animación de Pixelito: Ajuste de la zona de juego */
        /* ------------------------------------- */

        /* Contenedor que define la zona de movimiento */
        .pixelito-movement-area {
            /* Calcula el espacio disponible: altura total - altura de la caja de mensaje - padding/margin */
            /* Se mantiene para definir el espacio */
            height: calc(100% - 120px); 
            width: 100%; 
            position: relative; 
        }

        .pixelito-wrapper {
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%;
            height: 100%;
            /* Quitar flex/center aquí para que la animación controle la posición */
        }

        #pixelito-face {
            /* MODIFICADO: Solo se mueve el elemento de la cara */
            min-width: 10rem; 
            text-align: center;
            /* La animación se aplica dinámicamente según la evolución via clases evo-anim-X */
            position: absolute; /* Usamos absoluto dentro del wrapper */
            /* *** CAMBIO CRUCIAL: POSICIONAMIENTO INICIAL *** */
            /* Posición inicial ajustada para empezar en la esquina superior izquierda */
            top: 0; 
            left: 0;
            /* Usamos translate en la animación para moverlo desde este origen (0,0) */
        }

        /* ===== ANIMACIONES POR EVOLUCIÓN (Y máximo 500%) ===== */

        /* Etapa 0: Huevo - Vibración constante + rebote suave por el área */
        @keyframes evo-0 {
            0% { transform: translate(30%, 150%) rotate(-3deg); }
            5% { transform: translate(32%, 148%) rotate(3deg); }
            10% { transform: translate(28%, 152%) rotate(-2deg); }
            15% { transform: translate(70%, 280%) rotate(4deg); }
            20% { transform: translate(72%, 278%) rotate(-3deg); }
            25% { transform: translate(68%, 282%) rotate(2deg); }
            30% { transform: translate(100%, 450%) rotate(-4deg); }
            35% { transform: translate(102%, 448%) rotate(3deg); }
            40% { transform: translate(98%, 452%) rotate(-2deg); }
            45% { transform: translate(60%, 380%) rotate(4deg); }
            50% { transform: translate(62%, 378%) rotate(-3deg); }
            55% { transform: translate(58%, 382%) rotate(2deg); }
            60% { transform: translate(20%, 350%) rotate(-4deg); }
            65% { transform: translate(22%, 348%) rotate(3deg); }
            70% { transform: translate(18%, 352%) rotate(-2deg); }
            75% { transform: translate(80%, 100%) rotate(4deg); }
            80% { transform: translate(82%, 98%) rotate(-3deg); }
            85% { transform: translate(78%, 102%) rotate(2deg); }
            90% { transform: translate(50%, 280%) rotate(-4deg); }
            95% { transform: translate(52%, 278%) rotate(3deg); }
            100% { transform: translate(30%, 150%) rotate(-3deg); }
        }

        /* Etapa 1: Bebé - Rebote por toda el área, trayectoria clara */
        @keyframes evo-1 {
            0% { transform: translate(0%, 0%) rotate(0deg); }
            10% { transform: translate(120%, 80%) rotate(8deg); }
            20% { transform: translate(20%, 220%) rotate(-5deg); }
            30% { transform: translate(100%, 350%) rotate(6deg); }
            40% { transform: translate(40%, 480%) rotate(-8deg); }
            50% { transform: translate(110%, 400%) rotate(5deg); }
            60% { transform: translate(10%, 280%) rotate(-6deg); }
            70% { transform: translate(90%, 120%) rotate(8deg); }
            80% { transform: translate(50%, 320%) rotate(-5deg); }
            90% { transform: translate(80%, 160%) rotate(6deg); }
            100% { transform: translate(0%, 0%) rotate(0deg); }
        }

        /* Etapa 2: Infante - Zigzag horizontal con vibración */
        @keyframes evo-2 {
            0% { transform: translate(0%, 50%) rotate(-5deg); }
            8% { transform: translate(3%, 48%) rotate(5deg); }
            10% { transform: translate(120%, 50%) rotate(-3deg); }
            18% { transform: translate(117%, 52%) rotate(3deg); }
            20% { transform: translate(0%, 150%) rotate(-5deg); }
            28% { transform: translate(3%, 148%) rotate(5deg); }
            30% { transform: translate(120%, 150%) rotate(-3deg); }
            38% { transform: translate(117%, 152%) rotate(3deg); }
            40% { transform: translate(0%, 280%) rotate(-5deg); }
            48% { transform: translate(3%, 278%) rotate(5deg); }
            50% { transform: translate(120%, 280%) rotate(-3deg); }
            58% { transform: translate(117%, 282%) rotate(3deg); }
            60% { transform: translate(0%, 380%) rotate(-5deg); }
            68% { transform: translate(3%, 378%) rotate(5deg); }
            70% { transform: translate(120%, 380%) rotate(-3deg); }
            78% { transform: translate(117%, 382%) rotate(3deg); }
            80% { transform: translate(0%, 480%) rotate(-5deg); }
            88% { transform: translate(3%, 478%) rotate(5deg); }
            90% { transform: translate(60%, 300%) rotate(-3deg); }
            100% { transform: translate(0%, 50%) rotate(-5deg); }
        }

        /* Etapa 3: Niño - Saltos alegres por toda la pantalla */
        @keyframes evo-3 {
            0% { transform: translate(0%, 0%) rotate(0deg) scale(1); }
            10% { transform: translate(0%, 40%) rotate(5deg) scale(0.95); }
            15% { transform: translate(100%, 0%) rotate(-5deg) scale(1.05); }
            25% { transform: translate(100%, 40%) rotate(5deg) scale(0.95); }
            30% { transform: translate(50%, 220%) rotate(-8deg) scale(1.05); }
            40% { transform: translate(50%, 260%) rotate(8deg) scale(0.95); }
            45% { transform: translate(120%, 380%) rotate(-5deg) scale(1.05); }
            55% { transform: translate(120%, 420%) rotate(5deg) scale(0.95); }
            60% { transform: translate(20%, 460%) rotate(-8deg) scale(1.05); }
            70% { transform: translate(20%, 500%) rotate(8deg) scale(0.95); }
            75% { transform: translate(80%, 300%) rotate(-5deg) scale(1.05); }
            85% { transform: translate(80%, 260%) rotate(5deg) scale(0.95); }
            90% { transform: translate(40%, 80%) rotate(-8deg) scale(1.05); }
            100% { transform: translate(0%, 0%) rotate(0deg) scale(1); }
        }

        /* Etapa 4: Joven - Recorre todo el perímetro + centro */
        @keyframes evo-4 {
            0% { transform: translate(0%, 0%) rotate(0deg); }
            12% { transform: translate(60%, 0%) rotate(10deg); }
            24% { transform: translate(120%, 0%) rotate(0deg); }
            32% { transform: translate(120%, 250%) rotate(-10deg); }
            40% { transform: translate(120%, 500%) rotate(0deg); }
            52% { transform: translate(60%, 500%) rotate(10deg); }
            60% { transform: translate(0%, 500%) rotate(0deg); }
            68% { transform: translate(0%, 250%) rotate(-10deg); }
            76% { transform: translate(60%, 250%) rotate(15deg); }
            84% { transform: translate(30%, 140%) rotate(-15deg); }
            92% { transform: translate(90%, 380%) rotate(10deg); }
            100% { transform: translate(0%, 0%) rotate(0deg); }
        }

        /* Etapa 5: Adolescente - Movimiento errático, cambia velocidad */
        @keyframes evo-5 {
            0% { transform: translate(60%, 250%) rotate(0deg); }
            5% { transform: translate(0%, 0%) rotate(15deg); }
            15% { transform: translate(5%, 5%) rotate(-10deg); }
            20% { transform: translate(120%, 500%) rotate(15deg); }
            30% { transform: translate(115%, 495%) rotate(-10deg); }
            35% { transform: translate(0%, 250%) rotate(20deg); }
            40% { transform: translate(120%, 250%) rotate(-15deg); }
            45% { transform: translate(60%, 0%) rotate(10deg); }
            55% { transform: translate(60%, 40%) rotate(-5deg); }
            60% { transform: translate(60%, 500%) rotate(15deg); }
            70% { transform: translate(60%, 460%) rotate(-10deg); }
            75% { transform: translate(100%, 140%) rotate(20deg); }
            80% { transform: translate(20%, 380%) rotate(-15deg); }
            90% { transform: translate(80%, 300%) rotate(10deg); }
            100% { transform: translate(60%, 250%) rotate(0deg); }
        }

        /* Etapa 6: Adulto - Patrón en 8 fluido */
        @keyframes evo-6 {
            0% { transform: translate(60%, 250%) rotate(0deg); }
            12.5% { transform: translate(120%, 80%) rotate(15deg); }
            25% { transform: translate(60%, 0%) rotate(0deg); }
            37.5% { transform: translate(0%, 80%) rotate(-15deg); }
            50% { transform: translate(60%, 250%) rotate(0deg); }
            62.5% { transform: translate(120%, 400%) rotate(15deg); }
            75% { transform: translate(60%, 500%) rotate(0deg); }
            87.5% { transform: translate(0%, 400%) rotate(-15deg); }
            100% { transform: translate(60%, 250%) rotate(0deg); }
        }

        /* Etapa 7: Maduro - Espiral cuadrada */
        @keyframes evo-7 {
            0% { transform: translate(60%, 250%) rotate(0deg); }
            8% { transform: translate(30%, 140%) rotate(10deg); }
            16% { transform: translate(90%, 140%) rotate(-10deg); }
            24% { transform: translate(90%, 360%) rotate(10deg); }
            32% { transform: translate(30%, 360%) rotate(-10deg); }
            40% { transform: translate(0%, 70%) rotate(15deg); }
            48% { transform: translate(120%, 70%) rotate(-15deg); }
            56% { transform: translate(120%, 430%) rotate(15deg); }
            64% { transform: translate(0%, 430%) rotate(-15deg); }
            72% { transform: translate(0%, 0%) rotate(20deg); }
            80% { transform: translate(120%, 0%) rotate(-20deg); }
            88% { transform: translate(120%, 500%) rotate(20deg); }
            96% { transform: translate(0%, 500%) rotate(-20deg); }
            100% { transform: translate(60%, 250%) rotate(0deg); }
        }

        /* Etapa 8: Experto - Diagonales rápidas con pausas */
        @keyframes evo-8 {
            0%, 5% { transform: translate(0%, 0%) rotate(0deg); }
            15% { transform: translate(120%, 500%) rotate(20deg); }
            20%, 25% { transform: translate(120%, 500%) rotate(15deg); }
            35% { transform: translate(0%, 500%) rotate(-20deg); }
            40%, 45% { transform: translate(0%, 500%) rotate(-15deg); }
            55% { transform: translate(120%, 0%) rotate(20deg); }
            60%, 65% { transform: translate(120%, 0%) rotate(15deg); }
            75% { transform: translate(60%, 250%) rotate(-20deg); }
            80%, 85% { transform: translate(60%, 250%) rotate(-15deg); }
            95% { transform: translate(0%, 0%) rotate(10deg); }
            100% { transform: translate(0%, 0%) rotate(0deg); }
        }

        /* Etapa 9: Maestro - Patrón estrella con rotación */
        @keyframes evo-9 {
            0% { transform: translate(60%, 40%) rotate(0deg); }
            12.5% { transform: translate(120%, 300%) rotate(45deg); }
            25% { transform: translate(20%, 140%) rotate(90deg); }
            37.5% { transform: translate(100%, 140%) rotate(135deg); }
            50% { transform: translate(60%, 460%) rotate(180deg); }
            62.5% { transform: translate(0%, 300%) rotate(225deg); }
            75% { transform: translate(100%, 400%) rotate(270deg); }
            87.5% { transform: translate(20%, 400%) rotate(315deg); }
            100% { transform: translate(60%, 40%) rotate(360deg); }
        }

        /* Etapa 10: Sabio - Circular perfecto con escala */
        @keyframes evo-10 {
            0% { transform: translate(60%, 40%) rotate(0deg) scale(1); }
            25% { transform: translate(120%, 250%) rotate(90deg) scale(1.1); }
            50% { transform: translate(60%, 460%) rotate(180deg) scale(1); }
            75% { transform: translate(0%, 250%) rotate(270deg) scale(1.1); }
            100% { transform: translate(60%, 40%) rotate(360deg) scale(1); }
        }

        /* Etapa 11: Iluminado - Saltos (steps) */
        @keyframes evo-11 {
            0% { transform: translate(0%, 0%); }
            20% { transform: translate(120%, 250%); }
            40% { transform: translate(30%, 500%); }
            60% { transform: translate(100%, 140%); }
            80% { transform: translate(50%, 400%); }
            100% { transform: translate(0%, 0%); }
        }

        /* Etapa 12: Legendario - Teletransporte con parpadeo */
        @keyframes evo-12 {
            0%, 18% { transform: translate(0%, 0%); opacity: 1; }
            19% { opacity: 0; }
            20%, 38% { transform: translate(120%, 430%); opacity: 1; }
            39% { opacity: 0; }
            40%, 58% { transform: translate(50%, 220%); opacity: 1; }
            59% { opacity: 0; }
            60%, 78% { transform: translate(100%, 70%); opacity: 1; }
            79% { opacity: 0; }
            80%, 98% { transform: translate(20%, 360%); opacity: 1; }
            99% { opacity: 0; }
            100% { transform: translate(0%, 0%); opacity: 1; }
        }

        /* Etapa 13: Eterno - Flotar con pulso */
        @keyframes evo-13 {
            0% { transform: translate(60%, 220%) scale(1); }
            25% { transform: translate(100%, 70%) scale(1.1); }
            50% { transform: translate(60%, 360%) scale(1); }
            75% { transform: translate(20%, 140%) scale(1.1); }
            100% { transform: translate(60%, 220%) scale(1); }
        }

        /* Etapa 14: Ancestral - Movimiento ondulante */
        @keyframes evo-14 {
            0% { transform: translate(0%, 250%) rotate(0deg); }
            10% { transform: translate(24%, 140%) rotate(5deg); }
            20% { transform: translate(48%, 70%) rotate(0deg); }
            30% { transform: translate(72%, 140%) rotate(-5deg); }
            40% { transform: translate(96%, 250%) rotate(0deg); }
            50% { transform: translate(120%, 360%) rotate(5deg); }
            60% { transform: translate(96%, 460%) rotate(0deg); }
            70% { transform: translate(72%, 500%) rotate(-5deg); }
            80% { transform: translate(48%, 460%) rotate(0deg); }
            90% { transform: translate(24%, 360%) rotate(5deg); }
            100% { transform: translate(0%, 250%) rotate(0deg); }
        }

        /* Etapa 15: Primordial - Espiral */
        @keyframes evo-15 {
            0% { transform: translate(60%, 250%) rotate(0deg) scale(0.8); }
            25% { transform: translate(100%, 140%) rotate(90deg) scale(0.9); }
            50% { transform: translate(60%, 40%) rotate(180deg) scale(1); }
            75% { transform: translate(20%, 140%) rotate(270deg) scale(1.1); }
            100% { transform: translate(60%, 250%) rotate(360deg) scale(0.8); }
        }

        /* Etapa 16: Cósmico - Parpadeo rápido entre puntos */
        @keyframes evo-16 {
            0%, 12% { transform: translate(0%, 0%); opacity: 1; }
            12.5% { opacity: 0; }
            13%, 24% { transform: translate(120%, 500%); opacity: 1; }
            24.5% { opacity: 0; }
            25%, 37% { transform: translate(0%, 500%); opacity: 1; }
            37.5% { opacity: 0; }
            38%, 49% { transform: translate(120%, 0%); opacity: 1; }
            49.5% { opacity: 0; }
            50%, 62% { transform: translate(60%, 250%); opacity: 1; }
            62.5% { opacity: 0; }
            63%, 74% { transform: translate(30%, 110%); opacity: 1; }
            74.5% { opacity: 0; }
            75%, 87% { transform: translate(90%, 400%); opacity: 1; }
            87.5% { opacity: 0; }
            88%, 100% { transform: translate(0%, 0%); opacity: 1; }
        }

        /* Etapa 17: Celestial - Flotar suave con brillo */
        @keyframes evo-17 {
            0% { transform: translate(60%, 140%) scale(1); filter: brightness(1); }
            25% { transform: translate(80%, 290%) scale(1.05); filter: brightness(1.2); }
            50% { transform: translate(40%, 430%) scale(1); filter: brightness(1); }
            75% { transform: translate(60%, 220%) scale(1.05); filter: brightness(1.2); }
            100% { transform: translate(60%, 140%) scale(1); filter: brightness(1); }
        }

        /* Etapa 18: Divino - Multiposición con afterimage */
        @keyframes evo-18 {
            0%, 100% { transform: translate(60%, 250%); opacity: 1; }
            10% { transform: translate(60%, 250%); opacity: 0.3; }
            15% { transform: translate(0%, 70%); opacity: 1; }
            25% { transform: translate(0%, 70%); opacity: 0.3; }
            30% { transform: translate(120%, 430%); opacity: 1; }
            40% { transform: translate(120%, 430%); opacity: 0.3; }
            45% { transform: translate(30%, 360%); opacity: 1; }
            55% { transform: translate(30%, 360%); opacity: 0.3; }
            60% { transform: translate(100%, 140%); opacity: 1; }
            70% { transform: translate(100%, 140%); opacity: 0.3; }
            75% { transform: translate(60%, 500%); opacity: 1; }
            85% { transform: translate(60%, 500%); opacity: 0.3; }
            90% { transform: translate(60%, 250%); opacity: 1; }
        }

        /* Etapa 19: Supremo - Zigzag rápido */
        @keyframes evo-19 {
            0% { transform: translate(0%, 0%); }
            10% { transform: translate(120%, 100%); }
            20% { transform: translate(0%, 200%); }
            30% { transform: translate(120%, 300%); }
            40% { transform: translate(0%, 400%); }
            50% { transform: translate(120%, 500%); }
            60% { transform: translate(0%, 400%); }
            70% { transform: translate(120%, 300%); }
            80% { transform: translate(0%, 200%); }
            90% { transform: translate(120%, 100%); }
            100% { transform: translate(0%, 0%); }
        }

        /* Etapa 20: Trascendente - Desvanecimiento entre dimensiones */
        @keyframes evo-20 {
            0% { transform: translate(60%, 250%) scale(1); opacity: 1; }
            20% { transform: translate(60%, 250%) scale(0.5); opacity: 0; }
            25% { transform: translate(0%, 0%) scale(0.5); opacity: 0; }
            30% { transform: translate(0%, 0%) scale(1.2); opacity: 1; }
            45% { transform: translate(0%, 0%) scale(0.5); opacity: 0; }
            50% { transform: translate(120%, 500%) scale(0.5); opacity: 0; }
            55% { transform: translate(120%, 500%) scale(1.2); opacity: 1; }
            70% { transform: translate(120%, 500%) scale(0.5); opacity: 0; }
            75% { transform: translate(60%, 250%) scale(0.5); opacity: 0; }
            80%, 100% { transform: translate(60%, 250%) scale(1); opacity: 1; }
        }

        /* Etapa 21: Absoluto - Rotación con teletransporte */
        @keyframes evo-21 {
            0% { transform: translate(60%, 250%) rotate(0deg); opacity: 1; }
            24% { transform: translate(60%, 250%) rotate(180deg); opacity: 1; }
            25% { opacity: 0; }
            26% { transform: translate(0%, 70%) rotate(180deg); opacity: 1; }
            49% { transform: translate(0%, 70%) rotate(360deg); opacity: 1; }
            50% { opacity: 0; }
            51% { transform: translate(120%, 430%) rotate(0deg); opacity: 1; }
            74% { transform: translate(120%, 430%) rotate(180deg); opacity: 1; }
            75% { opacity: 0; }
            76% { transform: translate(60%, 250%) rotate(180deg); opacity: 1; }
            100% { transform: translate(60%, 250%) rotate(360deg); opacity: 1; }
        }

        /* Etapa 22: Omnisciente - Omnipresencia (múltiples posiciones) */
        @keyframes evo-22 {
            0%, 100% { transform: translate(60%, 250%); opacity: 1; filter: blur(0px); }
            5% { filter: blur(3px); opacity: 0.5; }
            10% { transform: translate(0%, 0%); filter: blur(0px); opacity: 1; }
            15% { filter: blur(3px); opacity: 0.5; }
            20% { transform: translate(120%, 0%); filter: blur(0px); opacity: 1; }
            25% { filter: blur(3px); opacity: 0.5; }
            30% { transform: translate(120%, 500%); filter: blur(0px); opacity: 1; }
            35% { filter: blur(3px); opacity: 0.5; }
            40% { transform: translate(0%, 500%); filter: blur(0px); opacity: 1; }
            45% { filter: blur(3px); opacity: 0.5; }
            50% { transform: translate(60%, 250%); filter: blur(0px); opacity: 1; }
            55% { filter: blur(3px); opacity: 0.5; }
            60% { transform: translate(30%, 125%); filter: blur(0px); opacity: 1; }
            65% { filter: blur(3px); opacity: 0.5; }
            70% { transform: translate(90%, 375%); filter: blur(0px); opacity: 1; }
            75% { filter: blur(3px); opacity: 0.5; }
            80% { transform: translate(90%, 125%); filter: blur(0px); opacity: 1; }
            85% { filter: blur(3px); opacity: 0.5; }
            90% { transform: translate(30%, 375%); filter: blur(0px); opacity: 1; }
            95% { filter: blur(3px); opacity: 0.5; }
        }

        /* Etapa 23: Infinito - Loop infinito con escala */
        @keyframes evo-23 {
            0% { transform: translate(60%, 250%) scale(1) rotate(0deg); opacity: 1; }
            12.5% { transform: translate(100%, 125%) scale(0.8) rotate(45deg); opacity: 0.8; }
            25% { transform: translate(60%, 40%) scale(0.6) rotate(90deg); opacity: 0.6; }
            37.5% { transform: translate(20%, 125%) scale(0.8) rotate(135deg); opacity: 0.8; }
            50% { transform: translate(60%, 250%) scale(1) rotate(180deg); opacity: 0; }
            50.1% { transform: translate(60%, 250%) scale(0.6) rotate(180deg); opacity: 0.6; }
            62.5% { transform: translate(100%, 375%) scale(0.8) rotate(225deg); opacity: 0.8; }
            75% { transform: translate(60%, 500%) scale(1) rotate(270deg); opacity: 1; }
            87.5% { transform: translate(20%, 375%) scale(0.8) rotate(315deg); opacity: 0.8; }
            100% { transform: translate(60%, 250%) scale(1) rotate(360deg); opacity: 1; }
        }

        /* Etapa 24: Omega - Colapso y expansión */
        @keyframes evo-24 {
            0% { transform: translate(60%, 250%) scale(1); opacity: 1; filter: brightness(1); }
            20% { transform: translate(60%, 250%) scale(0.1); opacity: 0; filter: brightness(2); }
            25% { transform: translate(0%, 0%) scale(0.1); opacity: 0; }
            30% { transform: translate(0%, 0%) scale(1.2); opacity: 1; filter: brightness(1.5); }
            45% { transform: translate(0%, 0%) scale(0.1); opacity: 0; filter: brightness(2); }
            50% { transform: translate(120%, 500%) scale(0.1); opacity: 0; }
            55% { transform: translate(120%, 500%) scale(1.2); opacity: 1; filter: brightness(1.5); }
            70% { transform: translate(120%, 500%) scale(0.1); opacity: 0; filter: brightness(2); }
            75% { transform: translate(60%, 250%) scale(0.1); opacity: 0; }
            80%, 100% { transform: translate(60%, 250%) scale(1); opacity: 1; filter: brightness(1); }
        }

        /* Etapa 25: ??? - Glitch dimensional */
        @keyframes evo-25 {
            0%, 100% { transform: translate(60%, 250%) skew(0deg); opacity: 1; filter: hue-rotate(0deg); }
            5% { transform: translate(62%, 248%) skew(5deg); filter: hue-rotate(90deg); }
            10% { transform: translate(58%, 252%) skew(-5deg); opacity: 0.5; }
            15% { transform: translate(0%, 0%) skew(0deg); opacity: 1; filter: hue-rotate(180deg); }
            20% { transform: translate(2%, 2%) skew(10deg); opacity: 0.3; }
            25% { transform: translate(120%, 500%) skew(-10deg); opacity: 1; filter: hue-rotate(270deg); }
            30% { transform: translate(118%, 498%) skew(5deg); opacity: 0.7; }
            35% { transform: translate(60%, 250%) skew(0deg); opacity: 0; filter: hue-rotate(0deg); }
            40% { transform: translate(30%, 70%) skew(-5deg); opacity: 1; filter: hue-rotate(45deg); }
            45% { transform: translate(90%, 430%) skew(5deg); opacity: 0.5; filter: hue-rotate(135deg); }
            50% { transform: translate(60%, 250%) skew(0deg); opacity: 1; filter: hue-rotate(180deg); }
            55% { transform: translate(61%, 249%) skew(-10deg); opacity: 0.8; }
            60% { transform: translate(100%, 140%) skew(10deg); opacity: 1; filter: hue-rotate(225deg); }
            65% { transform: translate(20%, 360%) skew(0deg); opacity: 0.4; filter: hue-rotate(270deg); }
            70% { transform: translate(60%, 250%) skew(-5deg); opacity: 1; filter: hue-rotate(315deg); }
            75% { transform: translate(59%, 251%) skew(5deg); opacity: 0.6; }
            80% { transform: translate(0%, 500%) skew(0deg); opacity: 1; filter: hue-rotate(360deg); }
            85% { transform: translate(120%, 0%) skew(-10deg); opacity: 0.3; filter: hue-rotate(45deg); }
            90% { transform: translate(60%, 250%) skew(10deg); opacity: 0.8; filter: hue-rotate(0deg); }
            95% { transform: translate(58%, 252%) skew(-5deg); opacity: 1; }
        }

        /* Clase para aplicar animación según evolución */
        /* Primeras etapas: rápidas y visibles para enganchar al jugador */
        .evo-anim-0 { animation: evo-0 8s linear infinite; }         /* Huevo: vibración constante */
        .evo-anim-1 { animation: evo-1 10s ease-in-out infinite; }   /* Bebé: rebota por todo */
        .evo-anim-2 { animation: evo-2 9s linear infinite; }         /* Infante: zigzag con vibración */
        .evo-anim-3 { animation: evo-3 8s ease-in-out infinite; }    /* Niño: saltos alegres */
        .evo-anim-4 { animation: evo-4 10s ease-in-out infinite; }   /* Joven: recorre perímetro */
        .evo-anim-5 { animation: evo-5 7s ease-in-out infinite; }    /* Adolescente: errático */
        .evo-anim-6 { animation: evo-6 8s ease-in-out infinite; }    /* Adulto: patrón en 8 */
        .evo-anim-7 { animation: evo-7 9s ease-in-out infinite; }    /* Maduro: espiral cuadrada */
        .evo-anim-8 { animation: evo-8 6s ease-in-out infinite; }    /* Experto: diagonales rápidas */
        .evo-anim-9 { animation: evo-9 7s linear infinite; }         /* Maestro: estrella rotando */
        .evo-anim-10 { animation: evo-10 6s ease-in-out infinite; }  /* Sabio: circular con escala */
        .evo-anim-11 { animation: evo-11 5s steps(5) infinite; }
        .evo-anim-12 { animation: evo-12 5s steps(1) infinite; }
        .evo-anim-13 { animation: evo-13 4.5s ease-in-out infinite; }
        .evo-anim-14 { animation: evo-14 5s ease-in-out infinite; }
        .evo-anim-15 { animation: evo-15 4s ease-in-out infinite; }
        .evo-anim-16 { animation: evo-16 4s steps(1) infinite; }
        .evo-anim-17 { animation: evo-17 5s ease-in-out infinite; }
        .evo-anim-18 { animation: evo-18 6s ease-in-out infinite; }
        .evo-anim-19 { animation: evo-19 3s linear infinite; }
        .evo-anim-20 { animation: evo-20 6s ease-in-out infinite; }
        .evo-anim-21 { animation: evo-21 5s ease-in-out infinite; }
        .evo-anim-22 { animation: evo-22 8s ease-in-out infinite; }
        .evo-anim-23 { animation: evo-23 6s ease-in-out infinite; }
        .evo-anim-24 { animation: evo-24 5s ease-in-out infinite; }
        .evo-anim-25 { animation: evo-25 4s linear infinite; }

        /* ------------------------------------- */

        /* Pantalla de texto inferior */
        .message-box {
            width: 100%;
            min-height: 90px;
            border: 3px solid var(--border-dark);
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0.9rem 1.2rem;
            box-sizing: border-box;
            z-index: 10;
            line-height: 1.2;
            font-size: 1.2rem;
            font-family: 'VT323', monospace;
            box-shadow: 0 4px 0 var(--border-dark);
            margin-top: 0.75rem;
            word-break: break-word;
            white-space: normal;
        }

        /* Contenedor del UI derecho */
        .ui-panel {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            width: 100%;
        }

        .ui-stats-info {
            display: grid;
            grid-template-columns: 1fr 0.9fr;
            gap: 1rem;
            align-items: stretch;
            width: 100%;
        }

        .stats-column {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            background: #fff;
            border: 3px solid var(--border-dark);
            border-radius: 16px;
            padding: 1.1rem 2px 0.95rem;
            box-shadow: 0 4px 0 var(--border-dark);
        }

        .stats-header {
            font-family: 'VT323', monospace;
            font-size: 0.9rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 0.55rem;
            padding-bottom: 0.2rem;
            border-bottom: 2px solid var(--border-dark);
        }

        .info-column {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }

        .info-blocks {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.65rem;
        }

        .info-block {
            border: 3px solid var(--border-dark);
            background-color: #fff;
            border-radius: 14px;
            text-align: center;
            font-family: 'VT323', monospace;
            box-shadow: 0 4px 0 var(--border-dark);
            padding: 0;
        }

        #status-display {
            display: block;
            font-size: clamp(1.2rem, 3vw, 1.6rem);
            line-height: 1.25;
            word-break: break-word;
            padding: 0 0.25rem;
        }

        .info-block.alert {
            background: #fff5d6;
        }

        .info-title {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--border-dark);
        }

        .info-value {
            font-size: 0.9rem;
            /* margin-top: 0.35rem; */
        }

        .info-note {
            font-size: 0.822rem;
            color: #374151;
        }

        .info-alert {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.35rem;
            margin-top: 0.35rem;
            width: 100%;
        }

        .info-alert .info-value {
            flex: 1;
            text-align: right;
        }

        .info-icon {
            font-size: 0.9rem;
        }

        /* Estilo para las barras de progreso */
        .stat-bar-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.35rem;
            width: 100%;
        }
        .stat-label {
            width: 80px;
            text-align: left;
            font-size: 0.85rem;
            font-weight: 700;
            font-family: 'VT323', monospace;
            letter-spacing: 0.05em;
        }
        .stat-bar-outline {
            flex-grow: 1;
            height: 10px;
            border: 2px solid var(--border-dark);
            background-color: #fefefa;
            border-radius: 999px;
            overflow: hidden;
        }

        /* Parpadeo rojo cuando la barra está en 0 */
        .stat-bar-outline.empty-critical {
            animation: critical-pulse 1s ease-in-out infinite;
        }

        @keyframes critical-pulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
            }
            50% {
                box-shadow: 0 0 4px 1px rgba(220, 38, 38, 0.6);
            }
        }

        .stat-bar-fill {
            height: 100%;
            transition: width 0.3s ease;
            border-radius: 999px;
        }

        .stat-work { background: linear-gradient(90deg, #45c260, #2f9e44); }
        .stat-hunger { background: linear-gradient(90deg, #f87171, #dc2626); }
        .stat-happiness { background: linear-gradient(90deg, #fcd34d, #f97316); }
        .stat-energy { background: linear-gradient(90deg, #60a5fa, #2563eb); }
        .stat-hygiene { background: linear-gradient(90deg, #9ae6b4, #16a34a); }
        .stat-discipline { background: linear-gradient(90deg, #c084fc, #9333ea); }

        /* Estilo para los botones circulares */
        .action-buttons-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(86px, 1fr));
            justify-items: center;
            gap: 0.85rem;
            padding: 0.5rem;
            background: #fff;
            border: 3px solid var(--border-dark);
            border-radius: 24px;
            box-shadow: 0 4px 0 var(--border-dark);
        }

        .pet-button {
            width: 92px;
            height: 92px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 0.75rem;
            font-family: 'VT323', monospace;
            color: var(--text-dark);
            border: 3px solid var(--border-dark);
            box-shadow: 0 4px 0 var(--border-dark);
            transition: transform 0.1s;
        }
        .pet-button:active {
            transform: translate(2px, 2px);
            box-shadow: none;
        }
        .button-label {
            margin-top: 0.15rem;
            font-size: 0.75rem;
        }

        .button-icon {
            font-size: 1.5rem; 
            line-height: 1;
        }

        /* Estilo para el botón de invitado/login */
        #guest-auth-container {
            width: 100%;
        }

        .save-state {
            background: #fff;
            border: 3px solid var(--border-dark);
            border-radius: 18px;
            padding: 1rem 1.25rem;
            text-align: center;
            box-shadow: 0 4px 0 var(--border-dark);
        }

        .save-label {
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 0.4rem;
        }

        .mode-switch {
            width: 100%;
            padding: 0.75rem 1rem;
            background: #ececec;
            border: 3px solid var(--border-dark);
            border-radius: 999px;
            font-weight: 700;
            font-size: 0.95rem;
            box-shadow: 0 4px 0 var(--border-dark);
            transition: transform 0.15s ease;
        }

        .mode-switch:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0 var(--border-dark);
        }

        .save-note {
            font-size: 0.75rem;
            color: #047857;
            margin-top: 0.4rem;
        }

        /* ===== VISUALIZADOR DE AUDIO (Ecualizador) ===== */
        .audio-visualizer {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 2px;
            min-width: 140px;
            max-width: 220px;
            height: 28px;
            padding: 4px 8px;
            background-color: #1a1a1a;
            border: 3px solid #333333;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .audio-bar {
            width: 4px;
            background: linear-gradient(to top, #22c55e, #4ade80);
            border-radius: 1px;
            height: 3px;
            transition: height 0.08s ease-out;
        }

        /* Animación activa cuando está hablando */
        .audio-visualizer.talking .audio-bar {
            animation: audio-bounce var(--bar-speed, 0.2s) ease-in-out infinite alternate;
        }

        /* Delays y alturas diferentes para cada barra */
        .audio-bar:nth-child(1)  { --bar-height: 8px;  --bar-speed: 0.15s; animation-delay: 0.00s; }
        .audio-bar:nth-child(2)  { --bar-height: 14px; --bar-speed: 0.18s; animation-delay: 0.03s; }
        .audio-bar:nth-child(3)  { --bar-height: 10px; --bar-speed: 0.12s; animation-delay: 0.06s; }
        .audio-bar:nth-child(4)  { --bar-height: 18px; --bar-speed: 0.20s; animation-delay: 0.02s; }
        .audio-bar:nth-child(5)  { --bar-height: 12px; --bar-speed: 0.14s; animation-delay: 0.05s; }
        .audio-bar:nth-child(6)  { --bar-height: 20px; --bar-speed: 0.22s; animation-delay: 0.01s; }
        .audio-bar:nth-child(7)  { --bar-height: 16px; --bar-speed: 0.16s; animation-delay: 0.04s; }
        .audio-bar:nth-child(8)  { --bar-height: 11px; --bar-speed: 0.19s; animation-delay: 0.07s; }
        .audio-bar:nth-child(9)  { --bar-height: 19px; --bar-speed: 0.13s; animation-delay: 0.02s; }
        .audio-bar:nth-child(10) { --bar-height: 13px; --bar-speed: 0.17s; animation-delay: 0.05s; }
        .audio-bar:nth-child(11) { --bar-height: 17px; --bar-speed: 0.21s; animation-delay: 0.03s; }
        .audio-bar:nth-child(12) { --bar-height: 9px;  --bar-speed: 0.15s; animation-delay: 0.06s; }
        .audio-bar:nth-child(13) { --bar-height: 15px; --bar-speed: 0.18s; animation-delay: 0.01s; }
        .audio-bar:nth-child(14) { --bar-height: 12px; --bar-speed: 0.14s; animation-delay: 0.04s; }
        .audio-bar:nth-child(15) { --bar-height: 18px; --bar-speed: 0.20s; animation-delay: 0.00s; }

        @keyframes audio-bounce {
            0% {
                height: 3px;
            }
            100% {
                height: var(--bar-height, 12px);
            }
        }

        /* Cuando NO está hablando, las barras quedan bajas */
        .audio-visualizer:not(.talking) .audio-bar {
            height: 3px;
        }

        /* ===== SISTEMA DE ANIMACIONES DE ACCIONES ===== */
        
        /* Cuando está en acción, pausar orbitación */
        #pixelito-face.action-mode {
            animation-play-state: paused !important;
            /* Centrar Pixelito durante la acción */
            transform: translate(60%, 200%) !important;
        }
        
        /* Contenedor de objetos de acción */
        .action-objects {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'VT323', monospace;
            font-size: 1.5rem;
            color: #1f2937;
            z-index: 5;
            pointer-events: none;
            display: none;
        }
        
        .action-objects.visible {
            display: block;
        }
        
        /* ===== ANIMACIÓN COMER - ZANAHORIA ===== */
        .carrot {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 0.9;
            position: relative;
            left: 40px;
            top: -20px;
        }
        
        .carrot-top {
            color: #22c55e;
        }
        
        .carrot-body {
            color: #f97316;
        }
        
        .carrot-bite {
            transition: opacity 0.1s;
        }
        
        .carrot-bite.eaten {
            opacity: 0;
        }
        
        /* Animación de masticar */
        @keyframes munch {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1) rotate(-5deg); }
        }
        
        #pixelito-face.eating-action {
            animation: munch 0.3s ease-in-out infinite !important;
            transform: translate(60%, 200%) !important;
        }
        
        /* ===== ANIMACIÓN ESTUDIAR - LIBRO ===== */
        .book {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 0.9;
            position: relative;
            left: 40px;
            top: -15px;
        }
        
        .book-page {
            transition: transform 0.3s ease;
        }
        
        @keyframes page-flip {
            0%, 100% { transform: rotateY(0deg); }
            50% { transform: rotateY(20deg); }
        }
        
        .book.flipping .book-page {
            animation: page-flip 0.5s ease-in-out;
        }
        
        #pixelito-face.studying-action {
            animation: none !important;
            transform: translate(60%, 200%) !important;
        }
        
        /* ===== ANIMACIÓN DORMIR - ZZZ ===== */
        .sleep-zzz {
            position: relative;
            left: 50px;
            top: -30px;
        }
        
        .zzz {
            font-size: 1.2rem;
            opacity: 0;
            position: absolute;
            color: #3b82f6;
        }
        
        .zzz:nth-child(1) { left: 0; top: 0; }
        .zzz:nth-child(2) { left: 15px; top: -15px; font-size: 1rem; }
        .zzz:nth-child(3) { left: 30px; top: -25px; font-size: 0.8rem; }
        
        @keyframes float-zzz {
            0% { opacity: 0; transform: translateY(0); }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { opacity: 0; transform: translateY(-20px); }
        }
        
        .sleep-zzz.active .zzz:nth-child(1) {
            animation: float-zzz 1.5s ease-in-out infinite;
        }
        .sleep-zzz.active .zzz:nth-child(2) {
            animation: float-zzz 1.5s ease-in-out infinite 0.3s;
        }
        .sleep-zzz.active .zzz:nth-child(3) {
            animation: float-zzz 1.5s ease-in-out infinite 0.6s;
        }
        
        #pixelito-face.sleeping-action {
            animation: none !important;
            transform: translate(60%, 200%) scale(0.95) !important;
        }
        
        /* ===== ANIMACIÓN JUGAR - PELOTA ===== */
        .play-ball {
            position: relative;
            left: 45px;
            top: 20px;
        }
        
        .ball {
            font-size: 1.5rem;
            display: inline-block;
        }
        
        @keyframes bounce-ball {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-30px); }
        }
        
        .play-ball.active .ball {
            animation: bounce-ball 0.5s ease-in-out infinite;
        }
        
        @keyframes play-jump {
            0%, 100% { transform: translate(60%, 200%); }
            50% { transform: translate(60%, 180%); }
        }
        
        #pixelito-face.playing-action {
            animation: play-jump 0.5s ease-in-out infinite !important;
        }
        
        /* ===== ANIMACIÓN GIMNASIO - PESAS ===== */
        .gym-weights {
            position: relative;
            left: 35px;
            top: -25px;
        }
        
        .weight {
            display: inline-block;
        }
        
        @keyframes lift-weight {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        
        .gym-weights.active .weight {
            animation: lift-weight 0.8s ease-in-out infinite;
        }
        
        @keyframes gym-strain {
            0%, 100% { transform: translate(60%, 200%) scale(1); }
            50% { transform: translate(60%, 200%) scale(1.05); }
        }
        
        #pixelito-face.gym-action {
            animation: gym-strain 0.8s ease-in-out infinite !important;
        }
        
        /* ===== ANIMACIÓN LIMPIAR - BURBUJAS ===== */
        .clean-bubbles {
            position: relative;
            left: 30px;
            top: -20px;
            width: 60px;
            height: 50px;
        }
        
        .bubble {
            position: absolute;
            opacity: 0;
            color: #67e8f9;
        }
        
        .bubble:nth-child(1) { left: 0; top: 30px; }
        .bubble:nth-child(2) { left: 20px; top: 35px; }
        .bubble:nth-child(3) { left: 40px; top: 25px; }
        .bubble:nth-child(4) { left: 10px; top: 40px; }
        .bubble:nth-child(5) { left: 30px; top: 45px; }
        
        @keyframes float-bubble {
            0% { opacity: 0; transform: translateY(0) scale(0.5); }
            20% { opacity: 1; transform: scale(1); }
            80% { opacity: 1; }
            100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
        }
        
        .clean-bubbles.active .bubble:nth-child(1) { animation: float-bubble 1.2s ease-out infinite 0.0s; }
        .clean-bubbles.active .bubble:nth-child(2) { animation: float-bubble 1.2s ease-out infinite 0.2s; }
        .clean-bubbles.active .bubble:nth-child(3) { animation: float-bubble 1.2s ease-out infinite 0.4s; }
        .clean-bubbles.active .bubble:nth-child(4) { animation: float-bubble 1.2s ease-out infinite 0.6s; }
        .clean-bubbles.active .bubble:nth-child(5) { animation: float-bubble 1.2s ease-out infinite 0.8s; }
        
        @keyframes clean-wobble {
            0%, 100% { transform: translate(60%, 200%) rotate(-3deg); }
            50% { transform: translate(60%, 200%) rotate(3deg); }
        }
        
        #pixelito-face.cleaning-action {
            animation: clean-wobble 0.4s ease-in-out infinite !important;
        }
        
        /* ===== ANIMACIÓN TRABAJAR - MARTILLO ===== */
        .work-hammer {
            position: relative;
            left: 45px;
            top: -20px;
        }
        
        .hammer {
            display: inline-block;
            transform-origin: bottom center;
        }
        
        @keyframes hammer-swing {
            0%, 100% { transform: rotate(-20deg); }
            50% { transform: rotate(20deg); }
        }
        
        .work-hammer.active .hammer {
            animation: hammer-swing 0.4s ease-in-out infinite;
        }
        
        @keyframes work-focus {
            0%, 100% { transform: translate(60%, 200%); }
            50% { transform: translate(60%, 205%); }
        }
        
        #pixelito-face.working-action {
            animation: work-focus 0.5s ease-in-out infinite !important;
        }
        
        /* ===== ANIMACIÓN EVOLUCIONAR - DESTELLOS ===== */
        .evolve-sparkles {
            position: relative;
            left: 20px;
            top: -30px;
            width: 80px;
            height: 80px;
        }
        
        .sparkle {
            position: absolute;
            font-size: 1.2rem;
            opacity: 0;
            color: #fbbf24;
        }
        
        .sparkle:nth-child(1) { left: 0; top: 40px; }
        .sparkle:nth-child(2) { left: 60px; top: 10px; }
        .sparkle:nth-child(3) { left: 30px; top: 0; }
        .sparkle:nth-child(4) { left: 70px; top: 50px; }
        .sparkle:nth-child(5) { left: 10px; top: 70px; }
        .sparkle:nth-child(6) { left: 50px; top: 65px; }
        .sparkle:nth-child(7) { left: 40px; top: 35px; color: #f472b6; }
        
        @keyframes sparkle-burst {
            0% { opacity: 0; transform: scale(0) rotate(0deg); }
            30% { opacity: 1; transform: scale(1.2) rotate(180deg); }
            60% { opacity: 1; transform: scale(1) rotate(360deg); }
            100% { opacity: 0; transform: scale(0.5) rotate(540deg); }
        }
        
        .evolve-sparkles.active .sparkle:nth-child(1) { animation: sparkle-burst 1s ease-out infinite 0.0s; }
        .evolve-sparkles.active .sparkle:nth-child(2) { animation: sparkle-burst 1s ease-out infinite 0.15s; }
        .evolve-sparkles.active .sparkle:nth-child(3) { animation: sparkle-burst 1s ease-out infinite 0.3s; }
        .evolve-sparkles.active .sparkle:nth-child(4) { animation: sparkle-burst 1s ease-out infinite 0.45s; }
        .evolve-sparkles.active .sparkle:nth-child(5) { animation: sparkle-burst 1s ease-out infinite 0.6s; }
        .evolve-sparkles.active .sparkle:nth-child(6) { animation: sparkle-burst 1s ease-out infinite 0.75s; }
        .evolve-sparkles.active .sparkle:nth-child(7) { animation: sparkle-burst 1s ease-out infinite 0.4s; }
        
        @keyframes evolve-glow {
            0%, 100% { transform: translate(60%, 200%) scale(1); filter: brightness(1); }
            25% { transform: translate(60%, 200%) scale(1.1); filter: brightness(1.3); }
            50% { transform: translate(60%, 200%) scale(1.15); filter: brightness(1.5); }
            75% { transform: translate(60%, 200%) scale(1.1); filter: brightness(1.3); }
        }
        
        #pixelito-face.evolving-action {
            animation: evolve-glow 0.8s ease-in-out infinite !important;
        }
        
        /* Botón deshabilitado durante acción */
        .pet-button.action-disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
        
        /* ===== BOTONES DE CONTROL DE SONIDO ===== */
        .sound-toggle-btn {
            width: 32px;
            height: 32px;
            border: 2px solid var(--border-dark);
            border-radius: 6px;
            background-color: #e8e8e8;
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            box-shadow: 1px 1px 0px var(--border-dark);
        }
        
        .sound-toggle-btn:hover {
            background-color: #d0d0d0;
        }
        
        .sound-toggle-btn:active {
            transform: translate(1px, 1px);
            box-shadow: none;
        }
        
        .sound-toggle-btn.muted {
            background-color: #fecaca;
            opacity: 0.7;
        }
        
        .sound-toggle-btn.muted::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 2px;
            background-color: #dc2626;
            transform: rotate(-45deg);
        }

        /* ===== RESPONSIVE ADJUSTMENTS ===== */
        @media (max-width: 1024px) {
            body {
                padding: 1rem;
                align-items: flex-start;
            }
            .pet-device {
                width: 100%;
                max-width: 760px;
                border-radius: 28px;
                padding: 1.25rem;
            }
            .main-layout {
                grid-template-columns: 1fr;
                gap: 1.25rem;
            }
            .device-header {
                flex-direction: row;
                align-items: center;
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            .device-header .device-title {
                flex: 0 0 auto;
            }
            .header-right {
                width: auto;
                flex: 0 1 auto;
                justify-content: flex-end;
                gap: 0.5rem;
                flex-wrap: nowrap;
            }
            .audio-visualizer {
                flex: 0 1 clamp(140px, 28vw, 220px);
            }
            .ui-stats-info {
                grid-template-columns: repeat(2, minmax(240px, 1fr));
                gap: 0.9rem;
            }
            .action-buttons-strip {
                width: 100%;
            }
        }

        @media (min-width: 1200px) and (min-height: 900px) {
            .pet-device {
                max-height: 900px;
                overflow: visible;
            }
            .pet-device > .device-header,
            .pet-device > .main-layout,
            .pet-device > #guest-auth-container {
                transform-origin: top center;
            }
            .main-layout {
                gap: 1.25rem;
            }
            .lcd-screen-container {
                min-height: 420px;
                padding: 1rem;
            }
            .message-box {
                min-height: 70px;
                font-size: 1.05rem;
            }
            .stats-column {
                padding: 1rem 2px 0.85rem;
                gap: 0.45rem;
            }
            .info-column {
                gap: 0.55rem;
            }
            .action-buttons-strip {
                padding: 0.35rem;
                gap: 0.65rem;
            }
            .pet-button {
                width: 86px;
                height: 86px;
            }
        }

        @media (max-width: 1199px) {
            .pet-device {
                max-height: none;
                overflow: visible;
            }
        }

        @media (max-width: 768px) {
            body {
                padding: 0.85rem;
            }
            .pet-device {
                border-radius: 24px;
                padding: clamp(1rem, 1.5vw, 1.5rem);
                padding-top: 4px;
                padding-left: 8px;
                padding-right: 8px;
            }
            .main-layout {
                gap: 0.3rem;
            }
            .lcd-screen-container {
                min-height: 420px;
            }
            .ui-stats-info {
                grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
                gap: 0.45rem;
            }
            .stats-column {
                padding: 0.85rem 2px 0.75rem;
                gap: 0.35rem;
                background: #fff;
                border-radius: 14px;
                border: 3px solid var(--border-dark);
                box-shadow: 0 3px 0 var(--border-dark);
            }
            .info-column {
                padding: 0;
                background: transparent;
                border-radius: 0;
                border: none;
                box-shadow: none;
                gap: 0.45rem;
            }
            .stat-bar-container {
                gap: 0.2rem;
            }
            .info-block {
                padding: 0;
                border-radius: 12px;
            }
            .info-title {
                font-size: 0.65rem;
                letter-spacing: 0.05em;
            }
            .info-value {
                font-size: 1rem;
            }
            #status-display {
                font-size: 1.05rem;
            }
            .info-note {
                font-size: 0.75rem;
            }
            .info-alert {
                justify-content: flex-end;
            }
            .info-alert .info-value {
                text-align: right;
            }
            .action-buttons-strip {
                display: grid;
                grid-template-columns: repeat(5, minmax(0, 1fr));
                grid-auto-rows: max-content;
                column-gap: 0.45rem;
                row-gap: 0.35rem;
                padding: 0.25rem 0;
                background: transparent;
                border: none;
                box-shadow: none;
                justify-items: center;
            }
            .pet-button {
                width: clamp(64px, 20vw, 82px);
                height: clamp(64px, 20vw, 82px);
            }
            .action-buttons-strip .pet-button:nth-child(6) { grid-column: 1; }
            .action-buttons-strip .pet-button:nth-child(7) { grid-column: 2; }
            .action-buttons-strip .pet-button:nth-child(8) { grid-column: 3; }
            .action-buttons-strip .pet-button:nth-child(9) { grid-column: 4; }
            .save-state {
                border-radius: 20px;
            }
            .mode-switch {
                font-size: 0.85rem;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 0.65rem;
            }
            .device-header {
                align-items: flex-start;
                gap: 0.4rem;
            }
            .device-title {
                font-size: 1.1rem;
            }
            .header-right {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 0.35rem;
                flex-wrap: nowrap;
            }
            .audio-visualizer {
                flex: 1 1 auto;
                min-width: 90px;
                justify-content: flex-start;
            }
            .level-chip {
                padding: 0.15rem 0.7rem;
                font-size: 0.9rem;
                flex: 0 0 auto;
            }
            .sound-toggle-btn {
                flex: 0 0 auto;
            }
            .message-box {
                font-size: 1rem;
                text-align: left;
            }
            .stats-column {
                border: 3px solid var(--border-dark);
            }
            .info-block {
                padding: 0;
            }
            .stat-label {
                width: 64px;
                font-size: 0.75rem;
                text-align: left;
            }
        }

        @media (max-height: 550px) and (orientation: landscape) {
            body {
                padding: 0.5rem;
                align-items: flex-start;
            }
            .pet-device {
                max-height: 100vh;
                overflow-y: auto;
            }
        }