/* ============================================================
           SISTEMA DE DISEÑO — estilo Age of Empires DE / Dragon Age
           ============================================================ */
        :root {
            --gold: #d9b451;
            --gold-bright: #f5dd8a;
            --gold-deep: #a67c2e;
            --gold-line: #c9a24a;
            --bronze: #7a5a2e;
            --bronze-dark: #4a3418;
            --stone-1: #201a12;
            --stone-2: #0e0b07;
            --leather: #17110b;
            --ink: #efe4cb;
            --ink-dim: #bcac8a;
            --crimson: #b5462f;
            --parchment: #e7d8b0;
            --parchment-ink: #3b2a12;
            --font-display: 'Cinzel Decorative', 'Cinzel', serif;
            --font-heading: 'Cinzel', serif;
            --font-body: 'EB Garamond', 'Georgia', serif;
            /* Grano sutil de pergamino/piedra para los paneles */
            --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
            /* Marco ornamentado dorado (border-image de 9 sectores) */
            --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect x='7' y='7' width='106' height='106' rx='3' fill='none' stroke='%23c9a24a' stroke-width='2'/%3E%3Crect x='13' y='13' width='94' height='94' rx='2' fill='none' stroke='%237a5a2e' stroke-width='1'/%3E%3Cg fill='%23d9b451' stroke='%236e4f22' stroke-width='1'%3E%3Cpath d='M13 4 l9 9 l-9 9 l-9 -9 z'/%3E%3Cpath d='M107 4 l9 9 l-9 9 l-9 -9 z'/%3E%3Cpath d='M13 98 l9 9 l-9 9 l-9 -9 z'/%3E%3Cpath d='M107 98 l9 9 l-9 9 l-9 -9 z'/%3E%3C/g%3E%3Cg fill='%23a67c2e'%3E%3Ccircle cx='13' cy='13' r='2.4'/%3E%3Ccircle cx='107' cy='13' r='2.4'/%3E%3Ccircle cx='13' cy='107' r='2.4'/%3E%3Ccircle cx='107' cy='107' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
        }

        /* === EFECTOS DE FONDO ÉPICOS === */
        @keyframes particleFloat {
            0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
            50% { transform: translateY(-20px) translateX(10px); opacity: 0.8; }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }
        
        @keyframes mysticalGlow {
            0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2), inset 0 0 60px rgba(0,0,0,0.9); }
            50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.4), inset 0 0 60px rgba(0,0,0,0.9), 0 0 80px rgba(139, 69, 19, 0.3); }
        }
        
        @keyframes titlePulse {
            0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.3)); }
            50% { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 50px rgba(255, 140, 0, 0.4)); }
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes shimmer {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
        }
        
        @keyframes borderGlow {
            0%, 100% { border-color: #554422; box-shadow: 0 0 15px rgba(255, 215, 0, 0.1), inset 0 0 50px rgba(0,0,0,0.8); }
            50% { border-color: #887744; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3), inset 0 0 50px rgba(0,0,0,0.8), 0 0 60px rgba(139, 69, 19, 0.2); }
        }
        
        body { 
            margin: 0; 
            overflow: hidden; 
            background: linear-gradient(135deg, #0a0a0f 0%, #1a0a0a 50%, #0a0a0f 100%);
            font-family: 'Cinzel', serif; 
            user-select: none; 
            color: #eee;
            position: relative;
        }
        
        /* Capa de partículas de fondo */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20% 30%, rgba(255, 215, 0, 0.3), transparent),
                radial-gradient(2px 2px at 60% 70%, rgba(139, 69, 19, 0.3), transparent),
                radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.2), transparent),
                radial-gradient(1px 1px at 80% 10%, rgba(255, 215, 0, 0.2), transparent),
                radial-gradient(2px 2px at 90% 60%, rgba(139, 69, 19, 0.2), transparent),
                radial-gradient(1px 1px at 33% 80%, rgba(255, 255, 255, 0.15), transparent);
            background-size: 200% 200%;
            background-position: 0% 0%;
            animation: particleFloat 20s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }
        
        /* Niebla mística */
        body::after {
            content: '';
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at center, transparent 0%, rgba(139, 69, 19, 0.05) 50%, transparent 100%);
            animation: particleFloat 30s ease-in-out infinite reverse;
            pointer-events: none;
            z-index: 1;
        }
        
        #game-container { position: relative; width: 100vw; height: 100vh; z-index: 2; }
        
        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; z-index: 10; }
        
        .fullscreen-bg { 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: radial-gradient(circle at center, rgba(26, 26, 46, 0.98) 0%, rgba(0, 0, 0, 1) 100%);
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            z-index: 100; 
            pointer-events: auto; 
            transition: opacity 0.8s;
            backdrop-filter: blur(5px);
            overflow-y: auto;
        }
        
        .magic-border {
            border: 15px solid transparent;
            border-image: var(--frame) 24 stretch;
            background:
                var(--grain),
                radial-gradient(120% 100% at 50% 0%, rgba(58,44,26,0.38) 0%, transparent 60%),
                linear-gradient(180deg, var(--stone-1) 0%, var(--stone-2) 100%);
            background-size: 180px 180px, 100% 100%, 100% 100%;
            background-repeat: repeat, no-repeat, no-repeat;
            background-blend-mode: overlay, normal, normal;
            box-shadow:
                0 12px 42px rgba(0,0,0,0.75),
                inset 0 0 70px rgba(0,0,0,0.65),
                inset 0 1px 0 rgba(255,220,140,0.10);
            position: relative;
        }
        /* Filete dorado interior */
        .magic-border::before {
            content: '';
            position: absolute;
            top: 2px; left: 2px; right: 2px; bottom: 2px;
            border: 1px solid rgba(201,162,74,0.30);
            border-radius: 3px;
            pointer-events: none;
            z-index: 0;
        }
        
        .game-logo {
            font-family: var(--font-display);
            font-size: 5.2rem;
            font-weight: 900;
            letter-spacing: 8px;
            margin: 0;
            background: linear-gradient(to bottom,
                #fff6da 0%,
                #f3d477 22%,
                #d9a441 46%,
                #8a5f24 62%,
                #e6c05a 82%,
                #fff6da 100%);
            background-size: 100% 200%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 2px 1px rgba(0,0,0,0.9)) drop-shadow(0 0 18px rgba(217,180,81,0.35));
            text-align: center;
            animation: titlePulse 4s ease-in-out infinite, shimmer 4s linear infinite;
        }

        .vasconia-subtitle {
            font-family: var(--font-heading);
            font-weight: 600;
            color: #d8b45a;
            font-size: 1.7rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            margin-top: 4px;
            margin-bottom: 34px;
            text-shadow:
                0 2px 4px rgba(0, 0, 0, 0.9),
                0 0 16px rgba(181, 70, 47, 0.35);
            animation: fadeInUp 1s ease-out 0.3s both;
            position: relative;
        }
        .dev-footer { 
            position: absolute; 
            bottom: 20px; 
            width: 100%; 
            text-align: center; 
            font-size: 0.9rem; 
            color: #888; 
            font-family: 'Segoe UI', sans-serif; 
            letter-spacing: 1px;
            animation: fadeInUp 1s ease-out 0.6s both;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .dev-footer img {
            height: 40px;
            width: auto;
            opacity: 0.8;
            transition: opacity 0.3s ease, transform 0.3s ease;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        }
        .dev-footer img:hover {
            opacity: 1;
            transform: scale(1.05);
        }
        .dev-footer a { 
            color: #ffd700; 
            text-decoration: none; 
            font-weight: bold; 
            transition: all 0.3s ease;
            text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
        }
        .dev-footer a:hover {
            color: #ffed4e;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
        }
        
        #menu-mute-btn { 
            position: absolute; 
            bottom: 20px; 
            left: 20px; 
            font-size: 2rem; 
            color: #888; 
            cursor: pointer; 
            transition: all 0.3s ease; 
            z-index: 101;
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
            animation: fadeInUp 1s ease-out 0.4s both;
        }
        #menu-mute-btn:hover { 
            color: #ffd700; 
            transform: scale(1.15) rotate(5deg);
            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
        }
        
        .btn-main {
            padding: 14px 34px;
            margin: 10px;
            font-family: var(--font-heading);
            font-weight: 600;
            font-size: 1.05rem;
            background:
                linear-gradient(180deg, rgba(70,53,30,0.96) 0%, rgba(42,31,17,0.96) 48%, rgba(28,20,11,0.96) 100%);
            border: 1px solid var(--bronze);
            border-top-color: var(--gold-deep);
            color: var(--gold);
            cursor: pointer;
            transition: all 0.22s ease;
            width: 300px;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            overflow: hidden;
            border-radius: 4px;
            box-shadow:
                0 3px 10px rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(255,225,150,0.18),
                inset 0 -2px 6px rgba(0,0,0,0.5);
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
            animation: fadeInUp 0.6s ease-out both;
        }

        .btn-main::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,235,170,0.22), transparent);
            transition: left 0.55s ease;
            transform: skewX(-18deg);
        }

        .btn-main:hover::before { left: 130%; }

        .btn-main:hover {
            color: var(--gold-bright);
            border-color: var(--gold);
            box-shadow:
                0 0 22px rgba(217,180,81,0.35),
                0 4px 14px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(255,235,170,0.30),
                inset 0 0 22px rgba(217,180,81,0.10);
            transform: translateY(-2px);
            background:
                linear-gradient(180deg, rgba(96,72,40,0.98) 0%, rgba(58,43,23,0.98) 48%, rgba(38,28,15,0.98) 100%);
        }

        .btn-main:active {
            transform: translateY(1px);
            box-shadow:
                inset 0 2px 8px rgba(0,0,0,0.6),
                0 1px 3px rgba(0,0,0,0.5);
        }
        
        /* Grid de botones del menú principal */
        .menu-buttons-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            max-width: 1000px;
            margin: 20px auto;
            padding: 0 20px;
        }
        
        .menu-buttons-grid .btn-main {
            width: 100%;
            margin: 0;
        }

        /* Panel enmarcado que contiene el menú principal (estilo AoE) */
        .menu-panel {
            padding: 20px 24px;
            margin: 6px auto 0;
            width: min(92%, 780px);
            box-sizing: border-box;
        }
        .menu-panel .menu-buttons-grid {
            margin: 0;
            max-width: none;
            padding: 0;
        }

        .btn-class {
            display: block; 
            width: 100%; 
            text-align: left; 
            margin: 5px 0; 
            padding: 12px; 
            background: linear-gradient(90deg, 
                rgba(10, 5, 0, 0.6) 0%, 
                rgba(30, 20, 10, 0.6) 50%, 
                rgba(10, 5, 0, 0.6) 100%);
            border: 2px solid #443322; 
            color: #bbb; 
            cursor: pointer; 
            box-sizing: border-box;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        .btn-class::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 215, 0, 0.1);
            transform: translate(-50%, -50%);
            transition: width 0.4s ease, height 0.4s ease;
        }
        
        .btn-class:hover::after {
            width: 300px;
            height: 300px;
        }
        
        .btn-class:hover { 
            background: linear-gradient(90deg, 
                rgba(30, 20, 10, 0.7) 0%, 
                rgba(60, 45, 25, 0.7) 50%, 
                rgba(30, 20, 10, 0.7) 100%);
            border-color: #887744; 
            color: #ffd700;
            transform: translateX(5px);
            box-shadow: 
                0 4px 15px rgba(255, 215, 0, 0.2),
                inset 0 0 20px rgba(255, 215, 0, 0.05);
        }
        
        .btn-class.selected { 
            border-color: #ffd700; 
            background: linear-gradient(90deg, 
                rgba(60, 45, 20, 0.8) 0%, 
                rgba(100, 75, 35, 0.8) 50%, 
                rgba(60, 45, 20, 0.8) 100%);
            color: #ffd700;
            box-shadow: 
                0 0 20px rgba(255, 215, 0, 0.4),
                inset 0 0 30px rgba(255, 215, 0, 0.1);
            animation: borderGlow 2s ease-in-out infinite;
        }
        .class-select-container { box-sizing: border-box; overflow: visible; }
        #class-select { overflow-y: auto; overflow-x: hidden; padding: 20px 10px; }
        @keyframes fadeInCenter {
            from { opacity: 0; transform: translate(-50%, -45%); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }
        
        #story-modal { 
            position: fixed; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            width: 90%; 
            max-width: 700px; 
            max-height: 90vh; 
            overflow-y: scroll; 
            overflow-x: hidden;
            padding: 5%; 
            color: #ddd; 
            z-index: 200; 
            display: none; 
            text-align: left; 
            box-sizing: border-box;
            animation: fadeInCenter 0.6s ease-out both;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            pointer-events: auto;
        }
        
        /* Mismos estilos para los nuevos modales */
        #instructions-modal,
        #mechanics-modal,
        #rules-modal {
            position: fixed; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            width: 90%; 
            max-width: 700px; 
            max-height: 90vh; 
            overflow-y: scroll; 
            overflow-x: hidden;
            padding: 5%; 
            color: #ddd; 
            z-index: 200; 
            display: none; 
            text-align: left; 
            box-sizing: border-box;
            animation: fadeInCenter 0.6s ease-out both;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
            pointer-events: auto;
        }
        
        /* Estilos de scrollbar para los modales */
        #story-modal::-webkit-scrollbar,
        #instructions-modal::-webkit-scrollbar,
        #mechanics-modal::-webkit-scrollbar,
        #rules-modal::-webkit-scrollbar {
            width: 8px;
        }
        
        #story-modal::-webkit-scrollbar-track,
        #instructions-modal::-webkit-scrollbar-track,
        #mechanics-modal::-webkit-scrollbar-track,
        #rules-modal::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
        }
        
        #story-modal::-webkit-scrollbar-thumb,
        #instructions-modal::-webkit-scrollbar-thumb,
        #mechanics-modal::-webkit-scrollbar-thumb,
        #rules-modal::-webkit-scrollbar-thumb {
            background: rgba(212, 175, 55, 0.5);
            border-radius: 4px;
        }
        
        #story-modal::-webkit-scrollbar-thumb:hover,
        #instructions-modal::-webkit-scrollbar-thumb:hover,
        #mechanics-modal::-webkit-scrollbar-thumb:hover,
        #rules-modal::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 215, 0, 0.7);
        }
        
        #story-modal h2 { 
            text-align: center;
            color: #ffd700;
            text-shadow: 
                0 0 15px rgba(255, 215, 0, 0.6),
                0 0 30px rgba(255, 140, 0, 0.3);
            animation: titlePulse 3s ease-in-out infinite;
        }
        
        .story-text {
            font-family: var(--font-body);
            font-size: 1.32rem;
            line-height: 1.75;
            color: var(--ink);
            margin-bottom: 20px;
            text-align: justify;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
        }
        .story-text p { margin: 0 0 0.9em; }
        .story-text h3 {
            font-family: var(--font-heading);
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--gold);
            border-bottom: 1px solid rgba(201,162,74,0.25);
            padding-bottom: 4px;
        }

        /* Títulos ornamentados de pantallas y modales */
        #start-screen > h2, #class-select > h2, #level-select > h2,
        #story-modal h2, #instructions-modal h2, #mechanics-modal h2,
        #rules-modal h2, #soundtrack-modal h2, .endgame-box h2,
        .game-menu-content h2, .duel-title {
            font-family: var(--font-display);
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--gold-bright);
            text-shadow: 0 2px 3px rgba(0,0,0,0.9), 0 0 18px rgba(217,180,81,0.30);
        }
        /* Encabezado con laureles ⚜ */
        .screen-title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 2.1rem;
            color: var(--gold-bright);
            letter-spacing: 2px;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 20px rgba(217,180,81,0.35);
            margin: 0 0 4px;
        }
        .screen-title::before, .screen-title::after {
            content: '⚜';
            color: var(--gold-deep);
            font-size: 0.7em;
            margin: 0 0.5em;
            vertical-align: 0.1em;
        }
        
        .story-text strong { 
            font-weight: bold;
            text-shadow: 0 0 8px currentColor;
        }
        
        .story-text em { 
            font-style: italic;
            text-shadow: 0 0 10px currentColor;
        }
        #player-card { 
            width: 300px; 
            padding: 15px; 
            pointer-events: auto;
            animation: fadeInUp 0.8s ease-out 0.2s both;
        }
        
        .char-name { 
            font-size: 1.4rem; 
            color: #ffd700; 
            border-bottom: 2px solid #665533; 
            margin-bottom: 5px;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            padding-bottom: 5px;
        }
        
        .char-class { 
            font-size: 0.9rem; 
            color: #bbb; 
            margin-bottom: 10px; 
            font-style: italic;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        }
        
        .level-badge { 
            float: right; 
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            padding: 3px 10px; 
            border-radius: 6px; 
            color: #ffd700; 
            font-size: 0.8rem; 
            border: 2px solid #665533;
            box-shadow: 
                0 0 10px rgba(255, 215, 0, 0.3),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            font-weight: bold;
        }
        
        #inventory-panel { 
            width: 260px; 
            padding: 20px; 
            pointer-events: auto; 
            color: #eee;
            animation: fadeInUp 0.8s ease-out 0.4s both;
        }
        
        .inv-title { 
            text-align: center; 
            color: #ffd700; 
            border-bottom: 2px solid #665533; 
            margin-bottom: 10px; 
            letter-spacing: 2px;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            padding-bottom: 8px;
            font-weight: bold;
        }
        #combat-ui { 
            position: absolute; 
            bottom: 180px; 
            left: 50%; 
            transform: translateX(-50%); 
            width: 500px; 
            max-width: 95%; 
            padding: 20px; 
            display: none; 
            pointer-events: auto; 
            z-index: 150; 
            text-align: center; 
            background: linear-gradient(135deg, 
                rgba(20, 5, 5, 0.98) 0%, 
                rgba(40, 10, 10, 0.98) 50%, 
                rgba(20, 5, 5, 0.98) 100%);
            border: 3px solid #a00; 
            box-sizing: border-box;
            border-radius: 8px;
            box-shadow: 
                0 0 40px rgba(170, 0, 0, 0.6),
                0 0 80px rgba(255, 0, 0, 0.3),
                inset 0 0 60px rgba(0, 0, 0, 0.8);
            animation: mysticalGlow 2s ease-in-out infinite;
        }
        
        #combat-ui::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            background: linear-gradient(45deg, 
                #8B0000 0%, transparent 10%, transparent 90%, #8B0000 100%);
            border-radius: 8px;
            z-index: -1;
            opacity: 0.5;
        }
        
        #combat-ui h2 { 
            margin: 0 0 15px 0; 
            word-wrap: break-word;
            color: #ff6666;
            text-shadow: 
                0 0 10px rgba(255, 0, 0, 0.8),
                0 0 20px rgba(255, 0, 0, 0.5);
        }
        
        #combat-ui { 
            word-wrap: break-word; 
            overflow-wrap: break-word;
        }
        #victory-screen { 
            display: none; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: linear-gradient(135deg, 
                rgba(10, 30, 60, 0.95) 0%, 
                rgba(0, 0, 0, 0.98) 100%);
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            z-index: 200; 
            pointer-events: auto;
            backdrop-filter: blur(5px);
        }
        
        @keyframes victoryPulse {
            0%, 100% { 
                transform: scale(1); 
                text-shadow: 
                    0 0 20px rgba(255, 215, 0, 0.8),
                    0 0 40px rgba(255, 140, 0, 0.6),
                    0 0 60px rgba(255, 215, 0, 0.4);
            }
            50% { 
                transform: scale(1.05); 
                text-shadow: 
                    0 0 30px rgba(255, 215, 0, 1),
                    0 0 60px rgba(255, 140, 0, 0.8),
                    0 0 90px rgba(255, 215, 0, 0.6);
            }
        }
        
        .victory-title { 
            font-size: 4rem; 
            background: linear-gradient(to bottom, 
                #fff9e6 0%, 
                #ffd700 30%, 
                #ffb347 50%, 
                #ffd700 70%, 
                #fff9e6 100%);
            background-clip: text; 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
            animation: victoryPulse 2s ease-in-out infinite;
            font-weight: 900;
            letter-spacing: 8px;
        }
        
        .victory-stats { 
            font-family: var(--font-body); 
            font-size: 1.2rem; 
            color: #ddd; 
            margin-bottom: 40px; 
            text-align: left;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
            line-height: 1.8;
        }
        #level-select { display: none; z-index: 110; }
        .level-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .level-select-container { box-sizing: border-box; overflow: visible; }
        .level-card { 
            padding: 18px; 
            border: 2px solid #554422; 
            background: linear-gradient(135deg, 
                rgba(15, 10, 5, 0.8) 0%, 
                rgba(30, 20, 10, 0.8) 100%);
            cursor: pointer; 
            transition: all 0.3s ease; 
            user-select: none; 
            -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 215, 0, 0.1);
        }
        
        .level-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 215, 0, 0.15), 
                transparent);
            transition: left 0.5s ease;
        }
        
        .level-card:hover::before {
            left: 100%;
        }
        
        .level-card:hover { 
            border-color: #ffd700; 
            background: linear-gradient(135deg, 
                rgba(40, 30, 15, 0.9) 0%, 
                rgba(60, 45, 25, 0.9) 100%);
            transform: translateY(-3px);
            box-shadow: 
                0 0 25px rgba(255, 215, 0, 0.4),
                0 8px 25px rgba(0, 0, 0, 0.6),
                inset 0 0 20px rgba(255, 215, 0, 0.05);
        }
        
        .level-card.locked { 
            opacity: 0.4; 
            pointer-events: none; 
            filter: grayscale(1);
            border-color: #333;
        }
        
        .level-card:active, .level-card.touch-active { 
            transform: scale(0.97) translateY(0); 
            border-color: #ffd700; 
            background: linear-gradient(135deg, 
                rgba(50, 40, 20, 0.95) 0%, 
                rgba(70, 55, 30, 0.95) 100%);
            box-shadow: 
                0 0 20px rgba(255, 215, 0, 0.5),
                inset 0 0 15px rgba(0, 0, 0, 0.5);
        }
        #log-panel { 
            position: absolute; 
            bottom: 20px; 
            left: 20px; 
            width: 33%; 
            max-width: 500px; 
            min-width: 280px; 
            height: 150px; 
            background: linear-gradient(135deg, 
                rgba(5, 5, 10, 0.95) 0%, 
                rgba(10, 10, 15, 0.95) 100%);
            border: 2px solid #443322; 
            padding: 10px; 
            overflow-y: auto; 
            overflow-x: hidden; 
            font-family: monospace; 
            font-size: 0.9rem; 
            pointer-events: auto; 
            box-sizing: border-box; 
            word-wrap: break-word;
            box-shadow: 
                0 4px 20px rgba(0, 0, 0, 0.7),
                inset 0 0 30px rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            animation: fadeInUp 0.8s ease-out 0.6s both;
        }
        
        .log-entry { 
            margin-bottom: 6px; 
            border-bottom: 1px solid #333; 
            word-wrap: break-word; 
            overflow-wrap: break-word;
            padding: 4px 0;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
            animation: fadeInUp 0.3s ease-out both;
        }
        #btn-menu { 
            transition: all 0.3s ease;
            background: linear-gradient(135deg, 
                rgba(30, 20, 10, 0.9) 0%, 
                rgba(50, 35, 20, 0.9) 100%);
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        #btn-menu::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 215, 0, 0.3), 
                transparent);
            transition: left 0.5s ease;
        }
        
        #btn-menu:hover::before {
            left: 100%;
        }
        
        #btn-menu:hover { 
            background: linear-gradient(135deg, 
                rgba(50, 35, 20, 0.95) 0%, 
                rgba(80, 60, 35, 0.95) 100%);
            transform: scale(1.08) translateY(-2px); 
            box-shadow: 
                0 0 25px rgba(255, 215, 0, 0.5),
                0 0 50px rgba(255, 140, 0, 0.3),
                inset 0 0 20px rgba(255, 215, 0, 0.1);
            color: #ffd700;
        }
        #game-menu-modal { pointer-events: none; }
        #game-menu-modal > div { pointer-events: auto; }
        @keyframes fadeInLabel {
            from { opacity: 0; transform: translate(-50%, -100%) scale(0.8); }
            to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
        }
        
        @keyframes fadeOutLabel {
            from { opacity: 1; transform: translate(-50%, -100%) scale(1); }
            to { opacity: 0; transform: translate(-50%, -100%) scale(0.8); }
        }
        
        @keyframes floatDamage {
            0% { 
                opacity: 1; 
                transform: translate(-50%, 0) scale(1);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -30px) scale(1.2);
            }
            100% { 
                opacity: 0; 
                transform: translate(-50%, -60px) scale(0.8);
            }
        }
        
        .floating-damage {
            font-family: 'Cinzel', serif;
            letter-spacing: 2px;
        }
        
        .floating-miss {
            position: absolute;
            font-size: 28px;
            font-weight: bold;
            color: #aaa;
            text-shadow: 0 0 8px #fff, 0 2px 4px rgba(0,0,0,0.9);
            pointer-events: none;
            z-index: 1000;
            animation: floatMiss 1.2s ease-out forwards;
            font-family: 'Cinzel', serif;
            letter-spacing: 3px;
        }
        
        @keyframes floatMiss {
            0% { 
                opacity: 1; 
                transform: translate(-50%, 0) scale(1) rotate(-10deg);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -25px) scale(1.3) rotate(5deg);
            }
            100% { 
                opacity: 0; 
                transform: translate(-50%, -50px) scale(0.8) rotate(10deg);
            }
        }
        
        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-20px); }
        }
        
        .world-label { 
            position: absolute; 
            background: linear-gradient(135deg, rgba(10, 5, 0, 0.9) 0%, rgba(20, 10, 5, 0.9) 100%);
            color: #eee; 
            padding: 3px 6px; 
            border-radius: 3px; 
            font-size: 9px; 
            pointer-events: none; 
            transform: translate(-50%, -100%); 
            border: 1px solid #554422;
            box-shadow: 
                0 2px 6px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 215, 0, 0.1);
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
            transition: opacity 0.3s ease, transform 0.3s ease;
            opacity: 0;
            min-width: 65px;
            /* Dentro del stacking context de #game-container: por encima del lienzo 3D,
               por debajo del HUD (z10) y de todos los menús/modales (z100+) */
            z-index: 8;
        }
        
        .world-label.visible {
            opacity: 1 !important;
        }

        .world-label.visible-nearby {
            opacity: 0.5 !important;
        }
        
        .world-label.hidden {
            opacity: 0 !important;
        }
        
        .world-label.hero { 
            border-color: #ffd700;
            background: linear-gradient(135deg, rgba(40, 30, 10, 0.95) 0%, rgba(60, 45, 20, 0.95) 100%);
            box-shadow: 
                0 0 10px rgba(255, 215, 0, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
        }
        
        .world-label.shadow { 
            border-color: #aa00ff;
            background: linear-gradient(135deg, rgba(30, 0, 40, 0.95) 0%, rgba(50, 0, 60, 0.95) 100%);
            color: #ffaaff;
            box-shadow: 
                0 0 10px rgba(170, 0, 255, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(170, 0, 255, 0.2);
        }
        
        .world-label.enemy { 
            border-color: #aa3333;
            background: linear-gradient(135deg, rgba(30, 10, 10, 0.95) 0%, rgba(40, 15, 15, 0.95) 100%);
        }
        
        .label-name {
            font-size: 8px;
            margin-bottom: 1px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100px;
        }
        
        .label-stats {
            display: flex;
            justify-content: space-between;
            font-size: 7px;
            margin-bottom: 2px;
            gap: 6px;
        }
        
        .stat-atk {
            color: #ff6666;
        }
        
        .stat-def {
            color: #66aaff;
        }
        
        .mini-hp { 
            width: 100%; 
            height: 4px; 
            background: rgba(20, 10, 10, 0.8); 
            margin-top: 2px;
            border-radius: 2px;
            overflow: hidden;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .mini-hp-fill { 
            height: 100%; 
            background: linear-gradient(90deg, #4c4 0%, #6e6 100%);
            transition: width 0.3s ease;
            box-shadow: 0 0 4px rgba(100, 255, 100, 0.6);
        }
        
        .mini-hp-fill.low { 
            background: linear-gradient(90deg, #c44 0%, #e66 100%);
            box-shadow: 0 0 4px rgba(255, 100, 100, 0.6);
        }
        
        .mini-hp-fill.medium { 
            background: linear-gradient(90deg, #cc4 0%, #ee6 100%);
            box-shadow: 0 0 4px rgba(255, 200, 100, 0.6);
        }
        @keyframes turnBlink {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.05); }
        }
        
        #turn-indicator { 
            position: absolute; 
            top: 10px; 
            width: 100%; 
            text-align: center; 
            font-size: 1.5rem; 
            color: #ffd700; 
            text-shadow: 
                0 0 15px rgba(255, 215, 0, 0.8),
                0 0 30px rgba(255, 140, 0, 0.5),
                0 0 45px rgba(0, 0, 0, 0.9);
            pointer-events: none; 
            z-index: 20; 
            display: none;
            font-weight: bold;
            letter-spacing: 3px;
            animation: turnBlink 2s ease-in-out infinite;
        }
        
        /* === CLASES AUXILIARES PARA REEMPLAZAR ESTILOS INLINE === */
        #auth-status { color: #888; margin-bottom: 20px; font-size: 0.8rem; }
        
        #btn-continue { display: none; }
        
        .victory-message { color: gold; font-size: 1.5rem; margin-bottom: 20px; }
        
        .victory-container { padding: 40px; text-align: center; }
        
        #story-modal h2 { 
            color: gold; 
            border-bottom: 2px solid #553311; 
            padding-bottom: 10px; 
            margin: 0 0 15px 0;
        }
        
        .story-highlight-vasconia { color: #ffd700; }
        .story-highlight-dragon { color: #aa00ff; }
        .story-highlight-hero { color: #ff8800; }
        .story-highlight-warning { color: #ff6666; }
        .story-highlight-gold { color: gold; }
        
        .story-actions { text-align: center; margin-top: 15px; }
        .story-actions .btn-main { max-width: 85%; }
        
        #class-select { display: none; background: rgba(0,0,0,0.95); }
        #class-select h2 { color: gold; }
        
        .class-select-container { 
            width: 500px; 
            max-width: 90%; 
            padding: 20px; 
            text-align: left; 
            box-sizing: border-box;
        }
        
        .btn-class strong.hero { color: #faa; }
        .btn-class strong.mage { color: #aaf; }
        .btn-class strong.rogue { color: #afa; }
        .btn-class strong.golem { color: #ccca; }
        .btn-class strong.rider { color: #ea5; }
        
        #char-name-input {
            padding: 10px; 
            width: 300px; 
            max-width: 85%; 
            background: #222; 
            border: 1px solid #555; 
            color: white; 
            text-align: center; 
            font-family: 'Cinzel'; 
            font-size: 1rem; 
            border-radius: 4px; 
            outline: none; 
            transition: 0.3s; 
            box-sizing: border-box;
        }
        
        #char-name-input:focus {
            border-color: gold;
            box-shadow: 0 0 10px rgba(255,215,0,0.3);
        }
        
        .btn-confirm { max-width: 85%; }
        .btn-cancel { font-size: 0.9rem; width: 150px; max-width: 40%; border-color: #555; }
        
        #level-select { 
            background: rgba(10,5,5,0.98); 
            overflow-y: auto; 
            overflow-x: hidden; 
            padding: 20px 10px;
        }
        
        #level-select h2 { color: gold; }
        
        .level-select-container { 
            width: 600px; 
            max-width: 90%; 
            padding: 30px; 
            box-sizing: border-box; 
            margin: 0 auto;
        }
        
        #game-menu-modal { 
            display: none; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            z-index: 300; 
            pointer-events: auto;
        }
        
        .game-menu-content { 
            padding: 30px; 
            background: rgba(10, 5, 5, 0.98); 
            min-width: 300px;
        }
        
        .game-menu-content h2 { 
            color: gold; 
            text-align: center; 
            margin: 0 0 20px 0; 
            border-bottom: 2px solid #553311; 
            padding-bottom: 10px;
        }
        
        .game-menu-content .btn-main { width: 100%; margin: 8px 0; }
        .game-menu-content .btn-close { border-color: #555; }
        
        #ui-layer { display: none; }
        
        /* Banner de AdSense - Solo en menús */
        #adsense-banner {
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            width: 728px;
            max-width: 90%;
            min-height: 90px;
            z-index: 45;
            pointer-events: auto;
            display: none; /* Oculto por defecto */
            background: linear-gradient(135deg, rgba(10, 5, 0, 0.85) 0%, rgba(20, 10, 5, 0.85) 100%);
            border: 2px solid #554422;
            border-radius: 6px;
            padding: 5px;
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 215, 0, 0.1);
            animation: fadeInUp 0.8s ease-out 0.3s both;
        }
        
        #adsense-banner ins {
            display: block;
            text-align: center;
        }
        
        /* Responsive para el banner */
        @media (max-width: 768px) {
            #adsense-banner {
                top: auto;
                bottom: 10px;
                width: 320px;
                min-height: 50px;
            }
        }
        
        @media (max-width: 480px) {
            #adsense-banner {
                top: auto;
                bottom: 10px;
                width: 300px;
                min-height: 50px;
            }
        }
        
        @media (max-height: 500px) and (orientation: landscape) {
            #adsense-banner {
                display: none !important; /* Ocultar en landscape móvil */
            }
        }
        
        #btn-menu { 
            position: absolute; 
            top: 20px; 
            left: 20px; 
            padding: 10px 20px; 
            border: 2px solid gold; 
            color: gold; 
            font-family: 'Cinzel', serif; 
            font-size: 1rem; 
            cursor: pointer; 
            z-index: 50; 
            pointer-events: auto; 
            border-radius: 4px; 
            font-weight: bold;
        }
        
        /* Controles de cámara */
        #camera-controls {
            position: absolute;
            bottom: 270px;
            right: 20px;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            z-index: 50;
            pointer-events: auto;
        }
        
        .camera-label {
            font-family: 'Cinzel', serif;
            font-size: 0.65rem;
            color: #d4af37;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
            margin-bottom: 2px;
        }
        
        .camera-buttons-row {
            display: flex;
            flex-direction: row;
            gap: 8px;
            align-items: center;
        }
        
        .camera-btn {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, rgba(20, 15, 10, 0.9) 0%, rgba(40, 30, 15, 0.9) 100%);
            border: 2px solid #665533;
            color: #d4af37;
            font-size: 1.2rem;
            cursor: pointer;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
            touch-action: manipulation;
            user-select: none;
        }
        
        .camera-btn:hover {
            border-color: #ffd700;
            color: #ffd700;
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
        }
        
        .camera-btn:active {
            transform: scale(0.95);
        }
        
        #player-card { 
            position: absolute; 
            top: 20px; 
            right: 20px; 
            z-index: 50; 
            pointer-events: auto;
        }
        
        .exp-info { font-size: 0.8rem; color: #8f8; }
        
        .exp-bar-container { 
            width: 100%; 
            height: 4px; 
            background: #333; 
            margin-top: 2px;
        }
        
        #exp-bar { 
            width: 0%; 
            height: 100%; 
            background: gold;
        }
        
        #inventory-panel { 
            position: absolute; 
            bottom: 20px; 
            right: 20px; 
            z-index: 50; 
            pointer-events: auto;
        }
        
        .inv-item { margin-bottom: 5px; }
        .inv-item span { color: #fff; float: right; }
        .inv-item[style*="cursor: pointer"]:hover {
            background: rgba(255, 215, 0, 0.1);
            color: #ffd700;
            border-radius: 3px;
            padding: 2px 4px;
            margin: -2px -4px 3px -4px;
        }
        
        #combat-ui h2 { color: #d44; }
        
        .combat-vs { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            font-size: 1rem; 
            margin-bottom: 15px; 
            flex-wrap: wrap; 
            gap: 5px;
        }
        
        #c-atk { 
            color: #f88; 
            flex: 1; 
            min-width: 80px; 
            text-align: left; 
            font-size: 0.9em; 
            overflow: hidden; 
            text-overflow: ellipsis;
        }
        
        .combat-vs-text { 
            flex-shrink: 0;
            color: #ffd700;
            font-weight: bold;
        }
        
        #c-def { 
            color: #88f; 
            flex: 1; 
            min-width: 80px; 
            text-align: right; 
            font-size: 0.9em; 
            overflow: hidden; 
            text-overflow: ellipsis;
        }
        
        #c-actions { 
            display: flex; 
            justify-content: center; 
            gap: 10px; 
        }
        
        #c-actions button {
            flex: 0 1 auto;
            min-width: 150px;
        }

        
        /* RESPONSIVE DESIGN - TABLETS Y MÓVILES */
        @media (max-width: 1024px) {
            .menu-buttons-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                max-width: 600px;
            }
            
            .game-logo { font-size: 3.5rem; letter-spacing: 5px; }
            .vasconia-subtitle { font-size: 1.5rem; margin-bottom: 30px; }
            .btn-main { width: 250px; font-size: 1rem; padding: 12px 30px; }
            #story-modal { width: 92%; max-width: 600px; padding: 25px 20px; max-height: 80vh; }
            #story-modal h2 { font-size: 1.4rem; }
            .story-text { font-size: 1rem; line-height: 1.6; }
            #player-card { top: 10px; right: 10px; width: 200px; padding: 10px; font-size: 0.85rem; }
            .char-name { font-size: 1.1rem; }
            #inventory-panel { bottom: 10px; right: 10px; width: 200px; padding: 15px; font-size: 0.85rem; }
            #btn-menu { top: 10px; left: 10px; padding: 8px 15px; font-size: 0.9rem; }
            #combat-ui { width: 90%; max-width: 450px; padding: 20px; }
            #log-panel { width: 33%; min-width: 160px; max-width: 300px; height: 90px; font-size: 0.75rem; left: 10px; bottom: 10px; padding: 8px; }
            #turn-indicator { top: 8px; font-size: 0.85rem; letter-spacing: 1px; }
            .victory-title { font-size: 3rem; }
            .victory-stats { font-size: 1rem; }
            #turn-indicator { font-size: 1.5rem; top: 80px; }
            .level-grid { gap: 10px; }
            .level-card { padding: 12px; font-size: 0.9rem; }
            #level-select .magic-border { 
                width: 90% !important; 
                max-width: 500px; 
                padding: 20px !important;
            }
            #level-select h2 { font-size: 1.6rem; margin-bottom: 15px; }
        }
        
        @media (max-width: 768px) {
            .menu-buttons-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
                max-width: 500px;
                padding: 0 10px;
            }
            
            .game-logo { font-size: 2.5rem; letter-spacing: 3px; }
            .vasconia-subtitle { font-size: 1.2rem; margin-bottom: 20px; }
            .btn-main { width: 220px; font-size: 0.9rem; padding: 10px 25px; margin: 8px; }
            .dev-footer { font-size: 0.7rem; bottom: 10px; }
            #menu-mute-btn { font-size: 1.5rem; bottom: 10px; left: 10px; }
            #story-modal { width: 95%; padding: 4%; max-height: 90vh; }
            #story-modal h2 { font-size: 1.3rem; margin-bottom: 12px !important; }
            .story-text { font-size: 0.95rem; line-height: 1.5; }
            
            /* Ajustes para modales de instrucciones, mecánicas y reglas */
            #instructions-modal .magic-border,
            #mechanics-modal .magic-border,
            #rules-modal .magic-border,
            #soundtrack-modal .magic-border {
                width: 95% !important;
                padding: 4% !important;
                max-height: 90vh !important;
            }
            
            #player-card { top: 10px; right: 5px; width: 160px; padding: 8px; font-size: 0.75rem; }
            .char-name { font-size: 0.95rem; }
            .level-badge { font-size: 0.7rem; padding: 1px 5px; }
            #inventory-panel { bottom: 10px; right: 5px; width: 160px; padding: 10px; font-size: 0.75rem; }
            .inv-title { font-size: 0.85rem; }
            #btn-menu { top: 10px; left: 5px; padding: 6px 12px; font-size: 0.85rem; }
            #game-menu-modal > div { padding: 20px; min-width: 250px; }
            #game-menu-modal h2 { font-size: 1.3rem; }
            #game-menu-modal button { font-size: 0.9rem; padding: 10px; }
            #combat-ui { width: 90%; max-width: 90%; padding: 12px; bottom: 100px; }
            #combat-ui h2 { font-size: 1rem; margin: 0 0 8px 0; }
            .combat-vs { font-size: 0.85rem; margin-bottom: 10px; }
            #c-actions { gap: 6px !important; }
            #c-actions button { font-size: 0.75rem !important; padding: 8px 12px !important; min-width: 120px; }
            #turn-indicator { top: 8px; font-size: 0.75rem; letter-spacing: 1px; }
            .victory-title { font-size: 2.5rem; }
            .victory-stats { font-size: 0.9rem; }
            #turn-indicator { font-size: 1.2rem; top: 60px; }
            .level-grid { grid-template-columns: 1fr; gap: 8px; }
            .level-card { padding: 10px; font-size: 0.85rem; }

            #level-select .magic-border { 
                width: 92% !important; 
                max-width: none !important;
                padding: 20px 15px !important;
            }
            #level-select h2 { font-size: 1.4rem; margin-bottom: 12px; }
            #level-select { padding: 15px 5px !important; }
            .world-label { font-size: 8px; }
            .mini-hp { width: 30px; }
            #class-select .magic-border { 
                width: 90% !important; 
                max-width: 400px; 
                padding: 15px !important;
                margin: 0 auto;
            }
            #class-select h2 { font-size: 1.4rem; margin-bottom: 15px; }
            #char-name-input { 
                width: 90% !important; 
                max-width: 250px; 
                font-size: 0.9rem; 
                padding: 12px !important;
                min-height: 44px;
                -webkit-appearance: none;
                appearance: none;
            }
        }
        
        @media (max-width: 480px) {
            .menu-buttons-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                max-width: 400px;
                padding: 0 8px;
            }
            
            /* Estilos para pantalla de bienvenida en móviles */
            #welcome-screen {
                padding: 20px 0 15px 0 !important;
            }
            
            #welcome-screen img[alt="RPCHESS: Crónicas de Vasconia"] {
                width: 100% !important;
                max-width: 100% !important;
                border-radius: 0 !important;
                border-left: none !important;
                border-right: none !important;
            }
            
            #start-game-btn {
                padding: 15px 40px !important;
                font-size: 1.1rem !important;
            }
            
            #loading-container {
                width: 85% !important;
            }
            
            #welcome-screen #debug-log {
                max-height: 60px !important;
                font-size: 0.6rem !important;
                padding: 6px !important;
            }
            
            #welcome-screen img[alt="Dorada Studios"] {
                height: 35px !important;
            }
            
            #welcome-screen > div:last-child {
                gap: 8px !important;
                padding-bottom: 5px !important;
            }
            
            #welcome-screen > div:last-child div {
                font-size: 0.7rem !important;
            }
            
            .game-logo { font-size: 2rem; letter-spacing: 2px; }
            .vasconia-subtitle { font-size: 1rem; margin-bottom: 15px; }
            .btn-main { width: 180px; font-size: 0.8rem; padding: 8px 20px; margin: 5px; letter-spacing: 1px; }
            .dev-footer { font-size: 0.6rem; }
            #menu-mute-btn { font-size: 1.3rem; }
            #story-modal { padding: 3%; max-height: 92vh; width: 96%; }
            #story-modal h2 { font-size: 1.1rem; margin-bottom: 10px !important; padding-bottom: 8px !important; }
            .story-text { font-size: 0.85rem; line-height: 1.45; }
            .story-text br { display: block; content: ""; margin: 8px 0; }
            
            /* Ajustes para modales en móviles pequeños */
            #instructions-modal .magic-border,
            #mechanics-modal .magic-border,
            #rules-modal .magic-border,
            #soundtrack-modal .magic-border {
                width: 96% !important;
                padding: 3% !important;
                max-height: 92vh !important;
            }
            
            #instructions-modal h2,
            #mechanics-modal h2,
            #rules-modal h2 {
                font-size: 1rem !important;
            }
            
            #player-card { top: 8px; right: 5px; width: 140px; padding: 6px; font-size: 0.7rem; }
            .char-name { font-size: 0.85rem; }
            .char-class { font-size: 0.65rem; }
            .level-badge { font-size: 0.65rem; }
            #inventory-panel { bottom: 8px; right: 5px; width: 140px; padding: 8px; font-size: 0.7rem; }
            .inv-title { font-size: 0.8rem; }
            #btn-menu { top: 8px; left: 5px; padding: 5px 10px; font-size: 0.75rem; }
            #camera-controls { bottom: 215px; right: 5px; }
            .camera-label { font-size: 0.6rem; }
            .camera-buttons-row { gap: 6px; }
            .camera-btn { width: 38px; height: 38px; font-size: 1rem; }
            #game-menu-modal > div { padding: 15px; min-width: 200px; }
            #game-menu-modal h2 { font-size: 1.1rem; margin-bottom: 15px !important; }
            #game-menu-modal button { font-size: 0.8rem; padding: 8px; margin: 5px 0 !important; }
            #combat-ui { padding: 8px; width: 96%; max-width: 96%; bottom: 85px; }
            #combat-ui h2 { font-size: 0.85rem; margin: 0 0 6px 0; }
            .combat-vs { font-size: 0.7rem; margin-bottom: 8px; gap: 3px; }
            #c-atk, #c-def { font-size: 1.3em; }
            #c-actions { gap: 5px !important; }
            #c-actions button { font-size: 0.7rem !important; padding: 10px 8px !important; min-width: 100px; }
            .btn-main { font-size: 0.7rem !important; }
            #log-panel { width: 43%; min-width: 140px; height: 105px; font-size: 0.6rem; padding: 5px; left: 5px; bottom: 5px; }
            #turn-indicator { top: 150px; font-size: 0.7rem; letter-spacing: 0.5px; }
            .victory-title { font-size: 2rem; }
            .victory-stats { font-size: 0.8rem; }
            #turn-indicator { top: 150px; font-size: 0.65rem; letter-spacing: 0.5px; }

            .world-label { font-size: 7px; padding: 1px 3px; }
            .mini-hp { width: 25px; height: 2px; }
            #class-select h2 { font-size: 1.2rem; margin-bottom: 10px; }
            #class-select .magic-border { 
                width: 92% !important; 
                max-width: none !important;
                padding: 12px !important;
                margin: 0 auto !important;
            }
            .btn-class { font-size: 0.8rem; padding: 10px 8px; }
            #class-select { padding: 15px 5px !important; }
            #level-select .magic-border { 
                width: 95% !important; 
                padding: 15px 10px !important;
            }
            #level-select h2 { font-size: 1.1rem; margin-bottom: 10px; }
            .level-card { padding: 12px 10px; font-size: 0.8rem; }
            #char-name-input { 
                padding: 10px !important; 
                font-size: 0.85rem; 
                min-height: 44px;
                width: 85% !important;
            }
        }
        
        /* Orientación horizontal en móviles */
        @media (max-height: 500px) and (orientation: landscape) {
            .game-logo { font-size: 1.8rem; }
            .vasconia-subtitle { font-size: 0.9rem; margin-bottom: 10px; }
            .btn-main { padding: 6px 15px; margin: 4px; font-size: 0.75rem; }
            .dev-footer { display: none; }
            #player-card, #inventory-panel { font-size: 0.6rem; padding: 5px; }
            #log-panel { width: 33%; min-width: 120px; height: 55px; font-size: 0.58rem; padding: 4px; left: 6px; bottom: 6px; }
            #turn-indicator { top: 70px; font-size: 0.9rem; }
            #player-card { top: 6px; right: 5px; width: 110px; padding: 5px; font-size: 0.6rem; }
            #inventory-panel { bottom: 6px; right: 5px; width: 110px; padding: 6px; font-size: 0.6rem; }
            #btn-menu { top: 6px; left: 5px; padding: 4px 8px; font-size: 0.7rem; }
            #camera-controls { bottom: 165px; right: 5px; gap: 4px; }
            .camera-label { font-size: 0.55rem; }
            .camera-buttons-row { gap: 5px; }
            .camera-btn { width: 36px; height: 36px; font-size: 0.9rem; }
            #game-menu-modal > div { padding: 12px; min-width: 180px; max-width: 90vw; }
            #game-menu-modal h2 { font-size: 1rem; margin-bottom: 12px !important; padding-bottom: 8px !important; }
            #game-menu-modal button { font-size: 0.7rem; padding: 6px; margin: 4px 0 !important; }
            #turn-indicator { top: 30px; font-size: 0.9rem; }
            .victory-title { font-size: 1.5rem; }
        }
        
        /* Touch-friendly: aumentar áreas táctiles */
        @media (hover: none) and (pointer: coarse) {
            .btn-main { padding: 15px 30px; min-height: 44px; }
            .btn-class { padding: 12px; min-height: 44px; }

            #menu-mute-btn { padding: 10px; }
        }
        
        /* Feedback visual para touch */
        .touch-active {
            transform: scale(0.95) !important;
            opacity: 0.8 !important;
            transition: all 0.1s ease !important;
        }
        
        button, .btn-main, .btn-class, #menu-mute-btn {
            -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
        }
        
        /* Input optimizado para móviles */
        #char-name-input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            touch-action: manipulation;
        }
        
        #char-name-input:focus {
            border-color: gold !important;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
            outline: none;
        }
        
        /* Prevenir zoom en iOS al enfocar inputs */
        @supports (-webkit-touch-callout: none) {
            input[type="text"] {
                font-size: 16px !important;
            }
        }

        /* ============================================================
           MEJORAS MEDIEVALES: ANTORCHAS, PARTÍCULAS, ORNAMENTOS
           ============================================================ */

        /* Antorcha/llama animada */
        @keyframes flameFlicker {
            0%   { transform: scaleX(1) scaleY(1) rotate(-2deg); opacity: 1; }
            15%  { transform: scaleX(0.85) scaleY(1.1) rotate(3deg); opacity: 0.9; }
            30%  { transform: scaleX(1.1) scaleY(0.95) rotate(-4deg); opacity: 1; }
            50%  { transform: scaleX(0.9) scaleY(1.15) rotate(2deg); opacity: 0.95; }
            70%  { transform: scaleX(1.05) scaleY(0.9) rotate(-3deg); opacity: 1; }
            85%  { transform: scaleX(0.88) scaleY(1.08) rotate(4deg); opacity: 0.92; }
            100% { transform: scaleX(1) scaleY(1) rotate(-2deg); opacity: 1; }
        }
        @keyframes flameCoreFlicker {
            0%,100% { opacity: 0.9; transform: scaleY(1); }
            33%     { opacity: 0.7; transform: scaleY(0.85); }
            66%     { opacity: 1; transform: scaleY(1.1); }
        }
        @keyframes smokeRise {
            0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.35; }
            50%  { transform: translateY(-18px) translateX(4px) scale(1.3); opacity: 0.15; }
            100% { transform: translateY(-36px) translateX(-3px) scale(1.7); opacity: 0; }
        }
        @keyframes torchGlow {
            0%,100% { box-shadow: 0 0 18px 6px rgba(255,140,30,0.45), 0 0 35px 10px rgba(200,80,0,0.25); }
            50%      { box-shadow: 0 0 28px 10px rgba(255,160,40,0.6), 0 0 55px 18px rgba(200,100,0,0.35); }
        }

        /* Partículas de fondo extra (estrellas/chispas medievales) */
        @keyframes sparkFloat {
            0%   { transform: translateY(0) translateX(0); opacity: 0; }
            10%  { opacity: 0.9; }
            90%  { opacity: 0.6; }
            100% { transform: translateY(-80px) translateX(20px); opacity: 0; }
        }
        @keyframes runeGlow {
            0%,100% { text-shadow: 0 0 6px rgba(255,215,0,0.3), 0 0 12px rgba(255,140,0,0.2); opacity: 0.4; }
            50%     { text-shadow: 0 0 14px rgba(255,215,0,0.7), 0 0 28px rgba(255,140,0,0.5); opacity: 0.75; }
        }
        @keyframes heraldDivide {
            0%,100% { opacity: 0.5; background-position: 0% 50%; }
            50%     { opacity: 0.9; background-position: 100% 50%; }
        }
        @keyframes scaleIn {
            from { transform: scale(0.88); opacity: 0; }
            to   { transform: scale(1); opacity: 1; }
        }
        @keyframes slideInLeft {
            from { transform: translateX(-40px); opacity: 0; }
            to   { transform: translateX(0); opacity: 1; }
        }

        /* Antorchas decorativas en esquinas de pantallas de menú */
        .torch-corner {
            position: fixed;
            width: 28px;
            height: 70px;
            pointer-events: none;
            z-index: 105;
        }
        .torch-corner.tl { top: 12px; left: 12px; }
        .torch-corner.tr { top: 12px; right: 12px; }
        .torch-corner.bl { bottom: 60px; left: 12px; }
        .torch-corner.br { bottom: 60px; right: 12px; }

        .torch-stick {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 46px;
            background: linear-gradient(to top, #3d1a05, #7a3a10, #5a2808);
            border-radius: 3px 3px 1px 1px;
        }
        .torch-head {
            position: absolute;
            bottom: 38px;
            left: 50%;
            transform: translateX(-50%);
            width: 14px;
            height: 18px;
            background: linear-gradient(to bottom, #8B4513, #5C2D00);
            border-radius: 3px;
        }
        .torch-flame {
            position: absolute;
            bottom: 52px;
            left: 50%;
            transform: translateX(-50%);
            width: 18px;
            height: 28px;
            background: radial-gradient(ellipse 60% 80% at 50% 90%,
                #ff9500 0%, #ff5500 35%, #ff2200 60%, rgba(180,0,0,0.4) 85%, transparent 100%);
            border-radius: 50% 50% 30% 30%;
            animation: flameFlicker 0.9s ease-in-out infinite;
            animation: torchGlow 1.2s ease-in-out infinite;
            filter: blur(1px);
        }
        .torch-flame::before {
            content: '';
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
            width: 10px;
            height: 18px;
            background: radial-gradient(ellipse 55% 70% at 50% 90%,
                #ffee00 0%, #ffaa00 40%, #ff6600 75%, transparent 100%);
            border-radius: 50% 50% 30% 30%;
            animation: flameCoreFlicker 0.7s ease-in-out infinite;
        }
        .torch-smoke {
            position: absolute;
            bottom: 76px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            background: radial-gradient(circle, rgba(200,200,200,0.5) 0%, transparent 70%);
            border-radius: 50%;
            animation: smokeRise 1.8s ease-out infinite;
        }
        .torch-smoke:nth-child(2) { animation-delay: 0.6s; left: calc(50% + 4px); }
        .torch-smoke:nth-child(3) { animation-delay: 1.2s; left: calc(50% - 4px); }

        /* Línea divisora medieval con gemas */
        .medieval-divider {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 8px 0 16px;
            width: 100%;
        }
        .medieval-divider::before,
        .medieval-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, #8B6914, #ffd700, #8B6914, transparent);
            background-size: 200% 100%;
            animation: heraldDivide 4s ease-in-out infinite;
        }
        .medieval-divider span {
            color: #ffd700;
            font-size: 1.1rem;
            animation: runeGlow 3s ease-in-out infinite;
            flex-shrink: 0;
        }

        /* Tarjetas de clase mejoradas */
        .class-card {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 12px;
            width: 100%;
            margin: 6px 0;
            padding: 14px 16px;
            background: linear-gradient(135deg,
                rgba(12,8,3,0.92) 0%,
                rgba(28,18,8,0.92) 50%,
                rgba(12,8,3,0.92) 100%);
            border: 2px solid #3d2a14;
            border-left: 4px solid #3d2a14;
            color: #bbb;
            cursor: pointer;
            box-sizing: border-box;
            transition: all 0.28s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            animation: slideInLeft 0.4s ease-out both;
        }
        .class-card:nth-child(1) { animation-delay: 0.05s; }
        .class-card:nth-child(2) { animation-delay: 0.10s; }
        .class-card:nth-child(3) { animation-delay: 0.15s; }
        .class-card:nth-child(4) { animation-delay: 0.20s; }
        .class-card:nth-child(5) { animation-delay: 0.25s; }
        .class-card::before {
            content: '';
            position: absolute;
            top: 0; left: -100%; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,215,0,0.08), transparent);
            transition: left 0.5s ease;
        }
        .class-card:hover::before { left: 100%; }
        .class-card:hover {
            border-color: #aa8833;
            border-left-color: #ffd700;
            background: linear-gradient(135deg,
                rgba(30,20,8,0.95) 0%,
                rgba(55,38,16,0.95) 50%,
                rgba(30,20,8,0.95) 100%);
            color: #f0d060;
            transform: translateX(4px);
            box-shadow: 0 4px 16px rgba(255,215,0,0.18), inset 0 0 20px rgba(255,215,0,0.04);
        }
        .class-card.selected {
            border-color: #ffd700;
            border-left-color: #ff9900;
            background: linear-gradient(135deg,
                rgba(50,35,12,0.98) 0%,
                rgba(85,60,20,0.98) 50%,
                rgba(50,35,12,0.98) 100%);
            color: #ffd700;
            box-shadow: 0 0 22px rgba(255,215,0,0.35), inset 0 0 30px rgba(255,215,0,0.08);
            animation: borderGlow 2.5s ease-in-out infinite;
        }
        .class-icon {
            font-size: 2rem;
            line-height: 1;
            filter: drop-shadow(0 0 6px rgba(255,200,80,0.4));
        }
        .class-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .class-name {
            font-size: 1.0rem;
            font-weight: bold;
            font-family: 'Cinzel', serif;
            letter-spacing: 1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .class-role {
            font-size: 0.72rem;
            opacity: 0.7;
            font-style: italic;
            font-family: var(--font-body);
        }
        .class-stats {
            display: flex;
            flex-direction: column;
            gap: 3px;
            font-size: 0.7rem;
            text-align: right;
            flex-shrink: 0;
        }
        .stat-hp  { color: #5dde5d; text-shadow: 0 0 6px rgba(80,220,80,0.5); }
        .stat-atk { color: #ff7060; text-shadow: 0 0 6px rgba(255,80,60,0.5); }
        .stat-def { color: #60b0ff; text-shadow: 0 0 6px rgba(60,140,255,0.5); }

        /* Ornamento de esquinas doradas para .magic-border mejorado */
        .magic-border::after {
            content: '';
            position: absolute;
            top: 6px; left: 6px; right: 6px; bottom: 6px;
            border: 1px solid rgba(212,175,55,0.12);
            border-radius: 5px;
            pointer-events: none;
        }

        /* Detalles de esquina para pantallas fullscreen */
        .fullscreen-bg::before {
            content: '';
            position: fixed;
            top: 0; left: 0;
            width: 80px; height: 80px;
            border-top: 3px solid rgba(212,175,55,0.4);
            border-left: 3px solid rgba(212,175,55,0.4);
            pointer-events: none;
            z-index: 106;
        }
        .fullscreen-bg::after {
            content: '';
            position: fixed;
            bottom: 0; right: 0;
            width: 80px; height: 80px;
            border-bottom: 3px solid rgba(212,175,55,0.4);
            border-right: 3px solid rgba(212,175,55,0.4);
            pointer-events: none;
            z-index: 106;
        }

        /* Mejor entrada del logo del menú principal */
        #start-screen .game-logo {
            animation: titlePulse 3s ease-in-out infinite, shimmer 3s linear infinite, scaleIn 0.8s ease-out both;
        }

        /* Resaltados de historia más vivos */
        .story-highlight-vasconia {
            text-shadow: 0 0 10px rgba(255,215,0,0.6);
        }
        .story-highlight-dragon {
            text-shadow: 0 0 10px rgba(170,0,255,0.7);
        }
        .story-highlight-hero {
            text-shadow: 0 0 10px rgba(255,136,0,0.7);
        }

        /* Mejor pantalla de victoria */
        #victory-screen {
            background: radial-gradient(circle at center,
                rgba(10,20,60,0.97) 0%,
                rgba(5,10,30,0.99) 60%,
                rgba(0,0,0,1) 100%) !important;
        }

        /* Input de nombre de héroe más elaborado */
        #char-name-input {
            background: linear-gradient(135deg, rgba(10,6,2,0.95) 0%, rgba(25,15,5,0.95) 100%) !important;
            border: 2px solid #554422 !important;
            box-shadow: 0 0 15px rgba(0,0,0,0.5), inset 0 2px 8px rgba(0,0,0,0.6) !important;
            letter-spacing: 1px;
        }

        /* Responsive para class-card */
        @media (max-width: 480px) {
            .class-card { padding: 10px 12px; gap: 8px; }
            .class-icon { font-size: 1.6rem; }
            .class-name { font-size: 0.85rem; }
            .class-role { font-size: 0.65rem; }
            .class-stats { font-size: 0.62rem; }
            .torch-corner { display: none; } /* Ocultar antorchas en móvil pequeño */
        }

        /* ============================================================
           DUELO POR TURNOS + DESENLACE + COLECCIÓN
           ============================================================ */
        #duel-screen {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            display: none; align-items: center; justify-content: center;
            z-index: 500; pointer-events: auto;
            background: radial-gradient(circle at center, rgba(20,5,5,0.78) 0%, rgba(5,0,0,0.92) 100%);
            backdrop-filter: blur(3px);
            animation: fadeInUp 0.4s ease-out;
        }
        .duel-panel {
            width: 560px; max-width: 94%; padding: 22px 22px 18px;
            text-align: center; box-sizing: border-box;
        }
        .duel-title {
            font-family: 'Cinzel', serif; font-size: 1.5rem; color: #ff6b6b; font-weight: bold;
            letter-spacing: 3px; margin-bottom: 14px;
            text-shadow: 0 0 14px rgba(255,40,40,0.6);
            position: relative;
        }
        .duel-round {
            position: absolute; right: 0; top: 4px;
            font-size: 0.7rem; color: #d4af37; letter-spacing: 1px;
            border: 1px solid #665533; border-radius: 4px; padding: 2px 8px;
            text-shadow: none;
        }
        /* Arena cinemática: ambas fichas enfrentadas */
        .duel-arena {
            position: relative;
            display: flex; align-items: center; justify-content: space-between;
            gap: 6px; margin: 4px 0 14px; padding: 6px 4px; min-height: 100px;
        }
        .duel-fighter {
            position: relative; flex-shrink: 0;
            width: 96px; height: 96px;
            display: flex; align-items: center; justify-content: center;
        }
        .fighter-icon {
            font-size: 4rem; line-height: 1; position: relative; z-index: 2;
            filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7));
            display: flex; align-items: center; justify-content: center;
        }
        .fighter-img {
            width: 90px; height: 90px; object-fit: contain; display: block;
        }
        .duel-fighter-foe .fighter-icon { transform: scaleX(-1); }
        .fighter-glow {
            position: absolute; inset: 10px; border-radius: 50%; z-index: 1;
        }
        .duel-fighter-player .fighter-glow { background: radial-gradient(circle, rgba(255,200,60,0.4), transparent 70%); }
        .duel-fighter-foe .fighter-glow { background: radial-gradient(circle, rgba(220,50,50,0.4), transparent 70%); }
        .duel-clash {
            font-size: 1.6rem; opacity: 0.3; flex-shrink: 0; filter: drop-shadow(0 0 4px #000);
        }
        .duel-clash.spark { animation: clashSpark 0.55s ease-out; }
        @keyframes clashSpark {
            0% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
            40% { opacity: 1; transform: scale(1.9) rotate(18deg); filter: drop-shadow(0 0 12px gold); }
            100% { opacity: 0.3; transform: scale(1) rotate(0deg); }
        }
        @keyframes lungeRight { 0% { transform: translateX(0); } 45% { transform: translateX(34px) scale(1.07); } 100% { transform: translateX(0); } }
        @keyframes lungeLeft  { 0% { transform: translateX(0); } 45% { transform: translateX(-34px) scale(1.07); } 100% { transform: translateX(0); } }
        .duel-fighter-player.lunge { animation: lungeRight 0.5s ease-out; }
        .duel-fighter-foe.lunge { animation: lungeLeft 0.5s ease-out; }
        @keyframes hitFlash {
            0%,100% { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7)); }
            30% { filter: drop-shadow(0 0 14px #ff3030) brightness(1.7); }
        }
        .duel-fighter.flash .fighter-icon { animation: hitFlash 0.45s ease-out; }
        .duel-pop {
            position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
            font-family: 'Cinzel', serif; font-weight: bold; font-size: 1.4rem;
            color: #ff5a5a; text-shadow: 0 0 8px #000, 0 2px 4px #000;
            z-index: 6; pointer-events: none; animation: duelPopRise 1.1s ease-out forwards;
        }
        .duel-pop.heal { color: #5dde5d; }
        @keyframes duelPopRise {
            0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
            25% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
            100% { opacity: 0; transform: translate(-50%, -46px) scale(0.9); }
        }

        .duel-combatants {
            display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
        }
        .duel-side { flex: 1; min-width: 0; }
        .duel-name {
            font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: bold;
            margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .duel-side-player .duel-name { color: #ffd700; }
        .duel-side-foe .duel-name { color: #ff8080; }
        .duel-vs {
            font-family: var(--font-body); color: #aa3333; font-size: 1.1rem;
            font-weight: bold; flex-shrink: 0; text-shadow: 0 0 10px rgba(170,0,0,0.6);
        }
        .duel-hpbar {
            width: 100%; height: 16px; background: rgba(0,0,0,0.6);
            border: 1px solid #554422; border-radius: 8px; overflow: hidden;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
        }
        .duel-hpfill {
            height: 100%; background: linear-gradient(90deg, #3a9d3a, #5ed65e);
            transition: width 0.4s ease; box-shadow: 0 0 8px rgba(100,255,100,0.4);
        }
        .duel-hpfill.medium { background: linear-gradient(90deg, #b8a32e, #e6d24e); }
        .duel-hpfill.low { background: linear-gradient(90deg, #b83030, #e65050); }
        .duel-hpnum { font-size: 0.7rem; color: #ccc; margin-top: 3px; font-family: monospace; }
        .duel-telegraph {
            font-family: 'Cinzel', serif; font-size: 1.05rem; color: #fff;
            padding: 10px; margin-bottom: 8px; border-radius: 6px;
            border: 2px solid #554422; background: rgba(0,0,0,0.4);
            transition: all 0.3s ease;
        }
        .duel-telegraph.tel-strike { border-color: #d4a017; box-shadow: 0 0 16px rgba(212,160,23,0.4); }
        .duel-telegraph.tel-guard  { border-color: #3a78c8; box-shadow: 0 0 16px rgba(58,120,200,0.4); }
        .duel-telegraph.tel-heavy  { border-color: #c83030; box-shadow: 0 0 16px rgba(200,48,48,0.5); animation: turnBlink 1s ease-in-out infinite; }
        .duel-hint {
            font-size: 0.72rem; color: #9a8866; margin-bottom: 14px;
            font-family: var(--font-body); letter-spacing: 0.5px;
        }
        .duel-actions {
            display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
        }
        .btn-duel {
            display: flex; flex-direction: column; align-items: center; gap: 2px;
            padding: 12px 6px; font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: bold;
            background: linear-gradient(135deg, rgba(30,20,10,0.95), rgba(60,45,25,0.95));
            border: 2px solid #665533; color: #f0d060; cursor: pointer;
            border-radius: 6px; transition: all 0.2s ease; min-height: 56px;
        }
        .btn-duel:hover {
            border-color: #ffd700; color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(255,215,0,0.3);
        }
        .btn-duel:active { transform: scale(0.97); }
        .btn-duel .duel-fc {
            font-size: 0.65rem; font-weight: normal; color: #9fd09f; font-family: monospace;
        }
        .btn-duel.skill { border-color: #b070d0; color: #e0b0ff; grid-column: span 1; }
        .btn-duel.skill .duel-fc { color: #d0a0ff; }
        .btn-duel.potion { border-color: #d05050; color: #ffb0b0; }
        .btn-duel.potion .duel-fc { color: #ffa0a0; }

        /* Desenlace y colección */
        #endgame-choice, #second-round-prompt, #collection-screen { display: none; z-index: 520; }
        .endgame-box { width: 520px; max-width: 92%; padding: 30px; text-align: center; box-sizing: border-box; }
        .endgame-sub { color: #ddd; font-size: 1rem; margin: 14px 0 24px; line-height: 1.5; font-family: var(--font-body); }
        .endgame-options { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
        .endgame-options .btn-main { width: 210px; max-width: 100%; padding: 16px; line-height: 1.4; }
        .endgame-options small { font-size: 0.68rem; opacity: 0.8; font-weight: normal; text-transform: none; letter-spacing: 0; }
        .endgame-exec { border-color: #c83030 !important; color: #ff9090 !important; }
        .endgame-exec:hover { border-color: #ff5050 !important; box-shadow: 0 0 26px rgba(200,48,48,0.45) !important; }
        .endgame-clem { border-color: #d4af37 !important; }
        .collection-list { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 24px; }
        .collect-item {
            display: flex; align-items: center; gap: 10px; justify-content: center;
            padding: 10px; border: 1px solid #554422; border-radius: 6px;
            background: rgba(0,0,0,0.35); color: #f0d060; font-family: 'Cinzel', serif;
            animation: slideInLeft 0.4s ease-out both;
        }
        .collect-item b { color: #fff; }

        .combat-forecast {
            font-size: 0.78rem; color: #cbb; margin-bottom: 10px;
            padding: 6px 8px; border-radius: 4px; background: rgba(0,0,0,0.35);
            border: 1px solid #443322; font-family: 'Segoe UI', sans-serif;
        }
        .combat-forecast b { color: #ffd700; }

        @media (max-width: 600px) {
            .duel-panel { padding: 16px 14px; }
            .duel-title { font-size: 1.2rem; }
            .duel-round { position: static; display: inline-block; margin-left: 8px; }
            .duel-actions { grid-template-columns: 1fr 1fr; }
            .btn-duel { font-size: 0.8rem; min-height: 50px; }
            .duel-telegraph { font-size: 0.9rem; }
            .endgame-options .btn-main { width: 100%; }
            .duel-arena { min-height: 78px; }
            .duel-fighter { width: 70px; height: 70px; }
            .fighter-icon { font-size: 3rem; }
            .fighter-img { width: 64px; height: 64px; }
            .duel-pop { font-size: 1.1rem; }
        }

        /* ===== Ajustes finos del HUD (marcos y tipografía) ===== */
        #player-card, #inventory-panel { border-width: 11px; }
        #log-panel {
            border: 1px solid var(--bronze-dark);
            border-top: 2px solid var(--gold-deep);
            font-family: var(--font-body);
            font-size: 0.95rem;
            color: var(--ink-dim);
        }
        #turn-indicator { font-family: var(--font-heading); font-weight: 700; letter-spacing: 4px; }
        .char-name, .inv-title { font-family: var(--font-heading); }
        #btn-menu { font-family: var(--font-heading); font-weight: 600; letter-spacing: 1px; }
        .level-card strong { font-family: var(--font-heading); }

        /* ===== Marcador de puntuación en el HUD ===== */
        .score-line {
            margin-top: 8px;
            padding-top: 6px;
            border-top: 1px solid rgba(201,162,74,0.25);
            font-family: var(--font-heading);
            font-size: 0.85rem;
            color: var(--gold);
            letter-spacing: 1px;
        }
        .score-line .ra { margin-right: 5px; color: var(--gold-deep); }
        @keyframes scorePop {
            0% { transform: scale(1); }
            40% { transform: scale(1.14); color: var(--gold-bright); }
            100% { transform: scale(1); }
        }
        .score-line.score-pop { animation: scorePop 0.4s ease-out; display: inline-block; }

        /* ===== Desglose de puntuación en victoria ===== */
        .score-breakdown { min-width: 300px; }
        .score-row {
            display: flex; justify-content: space-between; gap: 20px;
            padding: 5px 2px; font-size: 1.05rem;
        }
        .score-row .ra { margin-right: 6px; color: var(--gold-deep); }
        .score-row.score-total {
            margin-top: 8px; padding-top: 10px;
            border-top: 1px solid rgba(201,162,74,0.35);
            font-family: var(--font-heading); font-weight: 700;
            color: var(--gold-bright); font-size: 1.2rem;
        }
        .score-record {
            margin-top: 10px; text-align: center;
            font-family: var(--font-heading); font-weight: 800; letter-spacing: 2px;
            color: #ffe98a; text-shadow: 0 0 14px rgba(255,215,0,0.6);
            animation: turnBlink 1.2s ease-in-out infinite;
        }
        .score-prev { margin-top: 8px; text-align: center; font-size: 0.85rem; color: var(--ink-dim); }

        /* ===== Salón de Hazañas ===== */
        #records-screen, #inventory-modal { display: none; z-index: 520; }
        .records-box { width: 560px; }
        .records-title {
            font-family: var(--font-heading); font-weight: 700; letter-spacing: 2px;
            color: var(--gold); text-transform: uppercase; font-size: 0.95rem;
            margin: 4px 0 10px;
        }
        .record-row {
            display: flex; justify-content: space-between; align-items: center; gap: 12px;
            padding: 9px 12px; margin-bottom: 6px;
            border: 1px solid var(--bronze-dark); border-left: 3px solid var(--gold-deep);
            background: rgba(0,0,0,0.35); text-align: left;
        }
        .record-row.empty { opacity: 0.5; border-left-color: var(--bronze-dark); }
        .record-level { font-family: var(--font-heading); color: var(--ink); font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .record-level .ra { color: var(--gold-deep); margin-right: 6px; }
        .record-data { font-family: var(--font-body); color: var(--ink-dim); font-size: 0.9rem; flex-shrink: 0; }
        .record-data b { color: var(--gold-bright); }
        .records-empty { color: var(--ink-dim); font-family: var(--font-body); font-style: italic; padding: 8px 0 4px; }
        .totals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .total-chip {
            display: flex; flex-direction: column; align-items: center; gap: 3px;
            padding: 12px 6px; border: 1px solid var(--bronze-dark);
            background: rgba(0,0,0,0.35); border-radius: 4px;
        }
        .total-chip .ra { font-size: 1.4rem; color: var(--gold-deep); }
        .total-chip b { font-family: var(--font-heading); color: var(--gold-bright); font-size: 1.15rem; }
        .total-chip span { font-size: 0.68rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; }

        /* ===== Pantalla de gestión de inventario ===== */
        .inventory-box { width: 620px; }
        .inventory-grid { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 20px; }
        .item-card {
            display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
            padding: 12px 14px; text-align: left;
            border: 1px solid var(--bronze-dark); border-left: 3px solid var(--gold-deep);
            background: rgba(0,0,0,0.35);
        }
        .item-card.empty { opacity: 0.45; border-left-color: var(--bronze-dark); }
        .item-icon { position: relative; font-size: 2rem; line-height: 1; width: 44px; text-align: center; }
        .item-qty {
            position: absolute; bottom: -6px; right: -4px;
            font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
            background: var(--stone-1); color: var(--gold-bright);
            border: 1px solid var(--gold-deep); border-radius: 9px;
            padding: 1px 6px; min-width: 12px;
        }
        .item-name { font-family: var(--font-heading); font-weight: 600; color: var(--gold); font-size: 0.98rem; letter-spacing: 0.5px; }
        .item-desc { font-family: var(--font-body); color: var(--ink-dim); font-size: 0.88rem; line-height: 1.35; margin-top: 2px; }
        .item-use { width: auto; min-width: 88px; margin: 0; padding: 9px 18px; font-size: 0.85rem; }
        .item-use:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
        .inv-manage-btn {
            display: block; width: 100%; margin-top: 10px; padding: 8px 10px;
            font-family: var(--font-heading); font-weight: 600; font-size: 0.78rem;
            letter-spacing: 1px; text-transform: uppercase;
            background: linear-gradient(180deg, rgba(70,53,30,0.9), rgba(30,22,12,0.9));
            border: 1px solid var(--bronze); color: var(--gold);
            border-radius: 4px; cursor: pointer; transition: all 0.2s ease;
        }
        .inv-manage-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
        .inv-manage-btn .ra { margin-right: 5px; }

        @media (max-width: 600px) {
            .totals-grid { grid-template-columns: repeat(2, 1fr); }
            .item-card { grid-template-columns: auto 1fr; }
            .item-use { grid-column: 1 / -1; width: 100%; }
            .record-row { flex-direction: column; align-items: flex-start; gap: 3px; }
        }

        /* ===== TARJETAS DE LA CAMPAÑA DE VASCONIA ===== */
        .level-select-container { width: 880px; max-width: 94%; }
        .level-grid { grid-template-columns: repeat(3, 1fr); }
        @media (max-width: 1024px) { .level-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 640px) { .level-grid { grid-template-columns: 1fr; } }
        .lvl-head {
            display: flex; align-items: center; gap: 8px;
            font-family: var(--font-heading); color: var(--gold);
        }
        .lvl-head > .ra { font-size: 1.15rem; color: var(--gold-deep); flex-shrink: 0; }
        .lvl-head strong { font-size: 0.92rem; line-height: 1.2; flex: 1; min-width: 0; }
        .lvl-lock { color: #7a6a48 !important; }
        .lvl-meta {
            display: flex; justify-content: space-between; align-items: center;
            margin: 5px 0 4px;
        }
        .lvl-region {
            font-family: var(--font-body); font-style: italic;
            font-size: 0.78rem; color: var(--ink-dim);
        }
        .lvl-skulls .ra { font-size: 0.7rem; color: #4a3a28; margin-left: 2px; }
        .lvl-skulls .ra.on { color: #c05a48; text-shadow: 0 0 4px rgba(192,90,72,0.5); }
        .lvl-desc {
            font-family: var(--font-body); font-size: 0.82rem; line-height: 1.35;
            color: var(--ink-dim); min-height: 2.5em;
        }
        .lvl-record {
            margin-top: 6px; padding-top: 5px;
            border-top: 1px solid rgba(201,162,74,0.18);
            font-family: var(--font-heading); font-size: 0.72rem;
            color: var(--gold);
        }
        .lvl-record .ra { color: var(--gold-deep); margin-right: 3px; }
        .lvl-record.lvl-new { color: #7a6a48; font-style: italic; }
        .level-card.locked { opacity: 0.45; }

        /* ===== VISTA 2D DEL TABLERO ===== */
        #board2d {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            display: none; align-items: center; justify-content: center;
            z-index: 6; pointer-events: none;
            background: radial-gradient(circle at center, rgba(10,7,4,0.82) 0%, rgba(4,2,1,0.94) 100%);
        }
        .board2d-frame {
            position: relative;
            width: min(76vh, 90vw, 640px);
            height: min(76vh, 90vw, 640px);
            padding: 26px;
            box-sizing: border-box;
            pointer-events: auto;
        }
        .board2d-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(8, 1fr);
            width: 100%; height: 100%;
            border: 2px solid var(--bronze);
            box-shadow: inset 0 0 30px rgba(0,0,0,0.55);
        }
        .b2d-cell {
            position: relative;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            user-select: none;
            transition: box-shadow 0.15s ease;
        }
        .b2d-cell.light { background: #b98d5e; }
        .b2d-cell.dark { background: #6b4a2a; }
        .b2d-cell:hover { box-shadow: inset 0 0 0 2px rgba(245,221,138,0.55); }
        .b2d-cell.selected { box-shadow: inset 0 0 0 3px var(--gold-bright), inset 0 0 18px rgba(245,221,138,0.35); }
        .b2d-cell.move::after {
            content: ''; position: absolute; width: 26%; height: 26%;
            border-radius: 50%; background: rgba(90,200,90,0.85);
            box-shadow: 0 0 8px rgba(90,220,90,0.7);
        }
        .b2d-cell.attack { box-shadow: inset 0 0 0 3px rgba(220,60,50,0.9), inset 0 0 16px rgba(220,60,50,0.4); }
        .b2d-piece {
            font-size: clamp(20px, 5.6vmin, 46px);
            line-height: 1;
            font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', serif;
            pointer-events: none;
            filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
        }
        .b2d-piece .ra { font-size: 0.85em; }
        .b2d-piece.t-white { color: #f3e7cf; text-shadow: 0 0 3px #3a2408, 0 1px 1px #000; }
        .b2d-piece.t-black { color: #241505; text-shadow: 0 0 3px rgba(243,231,207,0.55), 0 1px 1px #000; }
        .b2d-piece.t-hero { color: #ffb340; text-shadow: 0 0 10px rgba(255,170,40,0.9), 0 1px 1px #000; }
        .b2d-piece.t-shadow { color: #a86bff; text-shadow: 0 0 10px rgba(150,60,255,0.9), 0 1px 1px #000; }
        .b2d-piece.t-vassal { color: #c8924a; text-shadow: 0 0 8px rgba(200,146,74,0.8), 0 1px 1px #000; }
        .b2d-hp {
            position: absolute; bottom: 7%; left: 12%; right: 12%; height: 4px;
            background: rgba(0,0,0,0.55); border-radius: 2px; overflow: hidden;
            pointer-events: none;
        }
        .b2d-hp > div { height: 100%; background: linear-gradient(90deg, #4c4, #6e6); }
        .b2d-hp.medium > div { background: linear-gradient(90deg, #cc4, #ee6); }
        .b2d-hp.low > div { background: linear-gradient(90deg, #c44, #e66); }
        .board2d-files, .board2d-ranks { position: absolute; pointer-events: none; }
        .board2d-files {
            left: 26px; right: 26px; bottom: 5px;
            display: flex; justify-content: space-around;
        }
        .board2d-ranks {
            top: 26px; bottom: 26px; left: 7px;
            display: flex; flex-direction: column-reverse; justify-content: space-around;
        }
        .board2d-files span, .board2d-ranks span {
            font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700;
            color: var(--gold-deep); letter-spacing: 1px;
        }

        #view-toggle-btn {
            margin-top: 8px;
            padding: 8px 14px;
            font-family: var(--font-heading); font-weight: 700; font-size: 0.7rem;
            letter-spacing: 1px;
            background: linear-gradient(180deg, rgba(70,53,30,0.95), rgba(30,22,12,0.95));
            border: 1px solid var(--bronze); color: var(--gold);
            border-radius: 4px; cursor: pointer; transition: all 0.2s ease;
        }
        #view-toggle-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
        #view-toggle-btn.active { border-color: var(--gold-bright); color: var(--gold-bright); box-shadow: 0 0 12px rgba(217,180,81,0.4); }
        #view-toggle-btn .ra { margin-right: 4px; }

        /* Glifos de respaldo para retratos del duelo (si no hay PNG) */
        .fighter-glyph {
            font-size: 4.4rem; line-height: 1;
            font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', serif;
            filter: drop-shadow(0 3px 6px rgba(0,0,0,0.8));
        }
        .fighter-glyph .ra { font-size: 0.88em; }
        .duel-fighter-player .fighter-glyph { color: #f5dd8a; text-shadow: 0 0 16px rgba(255,215,100,0.55); }
        .duel-fighter-foe .fighter-glyph { color: #ff9080; text-shadow: 0 0 16px rgba(255,80,60,0.55); }
        @media (max-width: 600px) {
            .fighter-glyph { font-size: 3.1rem; }
            .board2d-frame { padding: 18px; }
            .board2d-files { left: 18px; right: 18px; bottom: 2px; }
            .board2d-ranks { top: 18px; bottom: 18px; left: 4px; }
        }

        /* ===== Iconos RPG Awesome (reemplazan a los emoji) ===== */
        .ra { line-height: 1; display: inline-block; }
        .btn-main .ra { font-size: 1.25em; margin-right: 9px; vertical-align: -0.08em; color: var(--gold-deep); transition: color .22s ease; }
        .btn-main:hover .ra { color: var(--gold-bright); }
        .btn-cancel .ra, .btn-close .ra { color: #a88; }
        .class-icon .ra { font-size: 2rem; filter: drop-shadow(0 0 6px rgba(255,200,80,0.35)); }
        .class-stats .ra { font-size: 0.95em; margin-right: 3px; vertical-align: -0.06em; }
        .inv-item .ra { font-size: 1.2em; margin-right: 7px; vertical-align: -0.1em; }
        .inv-item .ra-potion { color: #e05555; }
        .inv-item .ra-crystals { color: #6bd0ff; }
        .btn-duel .ra { font-size: 1.15em; margin-right: 4px; vertical-align: -0.08em; }
        .btn-duel.skill .ra { color: #d0a0ff; }
        .btn-duel.potion .ra { color: #ffa0a0; }
        .duel-telegraph .ra { margin: 0 5px; vertical-align: -0.08em; }
        .duel-title .ra { color: var(--crimson); margin: 0 8px; vertical-align: -0.05em; font-size: 0.9em; }
        #menu-mute-btn .ra { color: inherit; }
        #menu-mute-btn.muted { color: #7a6a48; opacity: 0.75; }
        #menu-mute-btn.muted .ra { position: relative; }
        #menu-mute-btn.muted .ra::after {
            content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px;
            background: #c9563a; transform: rotate(-45deg); border-radius: 2px;
        }