/* ==========================================================================
   RPG: TORRE DE LA INSOLENCIA - ESTILOS PRINCIPALES (styles.css)
   ========================================================================== */

/* Variables de Diseño y Paleta de Colores (Fantasía Oscura) */
:root {
    --bg-darker: #08090c;
    --bg-dark: #0e1117;
    --bg-panel: rgba(18, 22, 33, 0.75);
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(226, 177, 60, 0.25);
    
    --color-gold: #dfb13c;
    --color-gold-glow: #ffd666;
    --color-red: #ff4d6d;
    --color-red-glow: rgba(255, 77, 109, 0.4);
    --color-blue: #00b4d8;
    --color-blue-glow: rgba(0, 180, 216, 0.4);
    --color-green: #38b000;
    --color-green-glow: rgba(56, 176, 0, 0.4);
    --color-purple: #9d4edd;
    --color-purple-glow: rgba(157, 78, 221, 0.4);
    
    --color-text-main: #f0f2f5;
    --color-text-muted: #9fa6b2;
    --font-heading: 'Cinzel', serif;
    --font-body: 'Outfit', sans-serif;
    
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Reset de Estilos Globales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-darker);
    background-image: url('Esenarios/Ciudadades/Talking Island/Talking Island.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text-main);
    font-family: var(--font-body);
    height: 100vh;
    overflow: hidden;
    user-select: none;
}

/* Efecto de Desenfoque del Panel */
.glass-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: var(--transition-smooth);
}

/* Controles de Audio */
#audio-controls {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1000;
}

.btn-audio {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    color: var(--color-text-muted);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.btn-audio:hover {
    color: var(--color-gold);
    background: rgba(226, 177, 60, 0.1);
    border-color: var(--color-gold);
    box-shadow: 0 0 10px rgba(226, 177, 60, 0.3);
}

/* Contenedor Principal del Juego (Tres Columnas) */
#game-container {
    display: grid;
    grid-template-columns: minmax(0, 280px) 1fr;
    gap: 15px;
    width: 100vw;
    height: 100vh;
    padding: 15px;
    transition: var(--transition-smooth);
}

/* Modo Selección: Ajusta las columnas para enfocar el selector */
#game-container.selection-mode {
    grid-template-columns: 1fr;
    gap: 15px;
}

#game-container.selection-mode #sidebar-character {
    opacity: 0;
    transform: translateX(-50px);
    pointer-events: none;
}

/* ==========================================================================
   COLUMNA IZQUIERDA: BARRA LATERAL DEL HÉROE (sidebar-character)
   ========================================================================== */
#sidebar-character {
    display: flex;
    flex-direction: column;
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 20px;
}

.hidden {
    display: none !important;
}

/* Retrato e Identidad */
.sidebar-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portrait-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 12px;
}

#char-portrait {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 0%;
    border-radius: 6px;
    border: 2.5px solid var(--color-gold);
    box-shadow: 0 0 20px rgba(226, 177, 60, 0.4);
    transition: var(--transition-smooth);
    animation: avatarFloat 4s ease-in-out infinite;
}

/* Grados - Variaciones de Borde de Retrato */
#char-portrait.border-no-grado {
    border-color: #5a657a;
    box-shadow: 0 0 10px rgba(90, 101, 122, 0.4);
}
#char-portrait.border-grado-d {
    border-color: #cd7f32;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.4);
}
#char-portrait.border-grado-c {
    border-color: #c0c0c0;
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.4);
}
#char-portrait.border-grado-b {
    border-color: #00b4d8;
    box-shadow: 0 0 20px rgba(0, 180, 216, 0.5);
}
#char-portrait.border-grado-a {
    border-color: #9d4edd;
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.6);
}
#char-portrait.border-grado-s {
    border-color: #dfb13c;
    box-shadow: 0 0 25px rgba(223, 177, 60, 0.8);
    animation: borderPulseS 2s infinite alternate;
}

/* Grados - Etiqueta de Grado */
#char-grade-badge {
    display: none;
    position: absolute;
    top: -5px;
    left: -5px;
    background: #08090c;
    border-radius: 12px;
    padding: 3px 8px;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    z-index: 10;
    transition: var(--transition-smooth);
}

#char-grade-badge.no-grado {
    border: 1px solid var(--color-text-muted);
    color: var(--color-text-muted);
    background: rgba(8, 9, 12, 0.85);
}
#char-grade-badge.grado-d {
    border: 1px solid #cd7f32;
    color: #e5a05d;
    background: rgba(205, 127, 50, 0.25);
    box-shadow: 0 0 5px rgba(205, 127, 50, 0.4);
}
#char-grade-badge.grado-c {
    border: 1px solid #c0c0c0;
    color: #f0f0f0;
    background: rgba(192, 192, 192, 0.25);
    box-shadow: 0 0 5px rgba(192, 192, 192, 0.4);
}
#char-grade-badge.grado-b {
    border: 1px solid #00b4d8;
    color: #90e0ef;
    background: rgba(0, 180, 216, 0.25);
    box-shadow: 0 0 8px rgba(0, 180, 216, 0.5);
}
#char-grade-badge.grado-a {
    border: 1px solid #9d4edd;
    color: #e0aaff;
    background: rgba(157, 78, 221, 0.25);
    box-shadow: 0 0 10px rgba(157, 78, 221, 0.6);
}
#char-grade-badge.grado-s {
    border: 1.5px solid #dfb13c;
    color: #ffd666;
    background: rgba(223, 177, 60, 0.3);
    box-shadow: 0 0 12px rgba(223, 177, 60, 0.8);
    text-shadow: 0 0 4px rgba(255, 214, 102, 0.8);
    animation: textPulseS 1.5s infinite alternate;
}

@keyframes borderPulseS {
    0% {
        box-shadow: 0 0 15px rgba(223, 177, 60, 0.5), inset 0 0 5px rgba(223, 177, 60, 0.3);
        border-color: #dfb13c;
    }
    100% {
        box-shadow: 0 0 30px rgba(223, 177, 60, 1), inset 0 0 15px rgba(223, 177, 60, 0.6);
        border-color: #ffd666;
    }
}

@keyframes textPulseS {
    0% {
        box-shadow: 0 0 8px rgba(223, 177, 60, 0.6);
    }
    100% {
        box-shadow: 0 0 16px rgba(255, 214, 102, 1);
    }
}

@keyframes avatarFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-4px) scale(1.03);
    }
}

#char-level-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #000;
    border: 2px solid var(--color-gold);
    color: var(--color-gold);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: var(--transition-smooth);
}

#char-name {
    font-family: var(--font-heading);
    color: var(--color-text-main);
    font-size: 1.4rem;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.subtitle {
    font-size: 0.85rem;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
}

#char-class-tag {
    display: none !important;
}

/* Lineage 2 Style HUD Styling */
.l2-hud-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    background: linear-gradient(135deg, rgba(20, 25, 35, 0.92) 0%, rgba(10, 12, 18, 0.85) 100%) !important;
    border: 1.5px solid rgba(223, 177, 60, 0.45) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-sizing: border-box !important;
}

.l2-hud-wrapper .portrait-container {
    width: 62px;
    height: 62px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.l2-hud-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 0;
}

.l2-hud-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    height: 28px;
}

/* Level square badge override */
.l2-hud-container #char-level-badge.l2-level-box {
    position: static;
    width: 26px;
    height: 26px;
    background: #0d0f14;
    border: 1.5px solid #a29367;
    border-radius: 4px;
    color: #dfb13c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 11px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

/* Character name text override */
.l2-hud-container #char-name.l2-name-text {
    font-family: 'Outfit', sans-serif;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 0 10px;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    align-self: center;
}

/* Barras de Estado */
.status-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #0f1219;
    padding: 6px;
    border: 2px solid #2e3542;
    border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9);
    width: 100%;
}

.bar-container {
    position: relative;
    background: #040508;
    height: 18px;
    border: 1.5px solid #1c202a;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.xp-container {
    height: 11px;
    border-radius: 5px;
}

.bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 8px;
    transition: width 0.4s ease-out;
}

.xp-container .bar-fill {
    border-radius: 5px;
}

.hp-fill {
    background: linear-gradient(to bottom, #721c1c 0%, #a82e2e 30%, #c53030 50%, #9b2c2c 70%, #5c1c1c 100%);
    box-shadow: none;
}

.mp-fill {
    background: linear-gradient(to bottom, #103460 0%, #1e4f8a 30%, #2b6cb0 50%, #1e4370 70%, #122844 100%);
    box-shadow: none;
}

.xp-fill {
    background: linear-gradient(to bottom, #441860 0%, #63268f 30%, #805ad5 50%, #553c9a 70%, #321c50 100%);
    box-shadow: none;
}

.bar-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;
    pointer-events: none;
    padding: 0 8px;
    letter-spacing: 0.5px;
}

.bar-text-label {
    margin-right: auto;
}

.bar-text-val {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.xp-container .bar-text {
    font-size: 7.5px;
    padding: 0 6px;
}

/* Sidebar Inventory Button styling matching mockup */
.sidebar-inventory-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid rgba(74, 222, 128, 0.25);
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.08) 0%, rgba(74, 222, 128, 0.03) 100%);
    color: var(--color-text-main);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
    margin: 15px 0;
    width: 100%;
}

.sidebar-inventory-btn i {
    font-size: 1.5rem;
    color: #4ade80;
    width: 30px;
    text-align: center;
}

.sidebar-inventory-btn div {
    display: flex;
    flex-direction: column;
}

.sidebar-inventory-btn div strong {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: #a7f3d0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.sidebar-inventory-btn div span {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.25;
}

.sidebar-inventory-btn:hover {
    background: rgba(74, 222, 128, 0.15);
    border-color: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
    transform: translateY(-1px);
}

/* Contenedor de Oro y SP en barra lateral */
.sidebar-currency-container {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
}

.currency-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.currency-box:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.currency-box i {
    font-size: 1.2rem;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
}

.currency-box img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}

.currency-box i.text-gold {
    color: #ffd700;
}

.currency-box i.text-blue {
    color: #00b4d8;
}

.currency-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.currency-label {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.currency-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-main);
    font-family: var(--font-heading);
}

/* Panel de Estadísticas */
.stats-panel, .equipment-panel, .gold-panel, .sp-panel {
    display: none !important;
}

.stats-panel h3, .equipment-panel h3, .gold-panel h3 {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.stats-panel ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-panel li {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.stats-panel li span {
    color: var(--color-text-muted);
}

.stats-panel li i {
    width: 20px;
}

.text-red { color: var(--color-red); }
.text-blue { color: var(--color-blue); }
.text-gold { color: var(--color-gold); }
.text-purple { color: var(--color-purple); }
.text-grey { color: #888; }

/* Panel de Equipamiento */
.equip-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.equip-slot i {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    width: 25px;
    text-align: center;
}

.equip-slot div {
    min-width: 0;
    flex-grow: 1;
}

.slot-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.slot-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-main);
    word-break: break-word;
    white-space: normal;
}

/* Panel de Oro */
.gold-panel {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(226, 177, 60, 0.06);
    border: 1px solid rgba(226, 177, 60, 0.2);
    padding: 12px 15px;
    border-radius: 8px;
}

/* Panel de Skill Points */
.sp-panel {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 180, 216, 0.06);
    border: 1px solid rgba(0, 180, 216, 0.2);
    padding: 12px 15px;
    border-radius: 8px;
}

.sp-panel i {
    font-size: 1.5rem;
    color: #00b4d8;
    width: 25px;
    text-align: center;
}

.sp-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: block;
}

.sp-panel h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
}

.gold-panel i {
    font-size: 1.8rem;
}

.gold-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

#char-gold {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 1.3rem;
    margin: 0;
}

/* ==========================================================================
   COLUMNA CENTRAL: PANTALLA PRINCIPAL (main-viewport)
   ========================================================================== */
#main-viewport {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Control de transiciones de pantallas del juego */
.game-screen {
    display: none;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding: 25px;
    animation: fadeIn 0.4s ease-out forwards;
}

.game-screen.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* --- PANTALLA 1: SELECCIÓN DE PERSONAJE & CIUDAD --- */
#screen-select, #screen-city {
    align-items: center;
    justify-content: flex-start;
    padding: 35px 20px;
    position: relative;
    overflow-y: auto;
}

.creator-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 25px;
    z-index: 2;
    background: rgba(8, 9, 12, 0.55);
    padding: 15px 30px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.fantasy-title-glow {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.8rem;
    color: var(--color-gold);
    text-shadow: 0 0 15px rgba(226, 177, 60, 0.4);
    text-align: center;
    margin-bottom: 8px;
}

.section-description {
    text-align: center;
    color: var(--color-text-muted);
    max-width: 600px;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 900px;
}

.character-card {
    background: rgba(14, 17, 23, 0.85);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
}

.character-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-gold);
    box-shadow: 0 10px 25px rgba(226, 177, 60, 0.2);
}

.card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.45);
    transition: var(--transition-smooth);
}

.character-card:hover .card-image img {
    transform: scale(1.08);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(14, 17, 23, 1) 0%, rgba(14, 17, 23, 0) 100%);
}

.card-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    background: rgba(14, 17, 23, 0.95);
}

.card-content h3 {
    font-family: var(--font-heading);
    color: var(--color-text-main);
    font-size: 1.25rem;
}

.role-desc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    height: 50px;
    overflow: hidden;
}

.base-stats-preview {
    display: flex;
    justify-content: space-around;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 0;
}

.base-stats-preview b {
    color: var(--color-text-main);
}

.btn-primary {
    background: linear-gradient(135deg, #bd8a20 0%, #dfb13c 100%);
    border: 1px solid #ffde8a;
    color: #121008;
    font-family: var(--font-heading);
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-transform: uppercase;
    font-size: 0.8rem;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #ffd666 0%, #e2b13c 100%);
    box-shadow: 0 0 15px rgba(226, 177, 60, 0.4);
    transform: scale(1.02);
}

/* --- PANTALLA 2: CIUDAD HUB --- */
.banner-area {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--border-glass);
    flex-shrink: 0;
}

.banner-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(8, 9, 12, 0.9) 0%, rgba(8, 9, 12, 0.2) 100%);
}

.banner-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.banner-title h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-gold);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: 4px;
}

.banner-title p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.city-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    width: 100%;
}

.city-message-panel {
    display: none; /* Ocultar para diseño limpio sobre mapa */
}

.city-actions-grid {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 550px;
    flex-grow: 1;
}

.btn-city-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid rgba(226, 177, 60, 0.25);
    background: rgba(8, 9, 12, 0.85);
    color: var(--color-text-main);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.btn-city-action i {
    font-size: 1.75rem;
    color: var(--color-gold);
    width: 35px;
    text-align: center;
}

.btn-city-action div {
    display: flex;
    flex-direction: column;
}

.btn-city-action div strong {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--color-text-main);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
}

.btn-city-action div span {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    line-height: 1.25;
}

.btn-city-action:hover {
    background: rgba(12, 14, 20, 0.95);
    border-color: var(--color-gold);
    box-shadow: 0 0 15px rgba(226, 177, 60, 0.35);
    transform: translateY(-2px);
}

.btn-city-action:hover div strong {
    color: var(--color-gold);
}

/* Posiciones absolutas para diseño de mapa point-and-click */
#btn-learn-skills {
    position: absolute;
    top: 5%;
    right: 2%;
    width: 310px;
}

#btn-visit-blacksmith {
    position: absolute;
    top: 15%;
    left: 2%;
    width: 310px;
}

#btn-visit-shop {
    position: absolute;
    top: 35%;
    left: 53%;
    width: 285px;
}

#btn-enter-tower {
    position: absolute;
    top: 55%;
    right: 2%;
    width: 350px;
}

#btn-rest-inn {
    position: absolute;
    bottom: 8%;
    left: 45%;
    width: 310px;
}

#btn-open-party-finder {
    position: absolute;
    top: 75%;
    left: 2%;
    width: 310px;
}

#btn-open-olympiad {
    position: absolute;
    top: 30%;
    right: 2%;
    width: 310px;
}

.upgrade-item-card:hover {
    border-color: rgba(226, 177, 60, 0.4) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 0 10px rgba(226, 177, 60, 0.15) !important;
}

.upgrade-item-card.active {
    border-color: var(--color-gold) !important;
    background: rgba(226, 177, 60, 0.1) !important;
    box-shadow: 0 0 12px rgba(226, 177, 60, 0.25) !important;
}


@media (max-width: 768px) {
    .city-actions-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-height: auto;
    }
    .btn-city-action {
        position: static !important;
        width: 100% !important;
        margin: 5px 0;
    }
}

/* --- PANTALLA 3: TIENDA --- */
.shop-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
    background: rgba(8, 9, 12, 0.75);
    border: 1px solid rgba(226, 177, 60, 0.15);
    border-radius: 10px;
    padding: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.shop-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.shop-tab {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.shop-tab.active {
    color: var(--color-gold);
    background: rgba(226, 177, 60, 0.1);
}

.shop-tab:hover:not(.active) {
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.03);
}

.shop-tab-back {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    padding: 6px 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition-smooth);
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-tab-back:hover {
    color: var(--color-gold);
    border-color: var(--color-gold);
    background: rgba(226, 177, 60, 0.08);
}

.shop-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px;
}

.shop-item-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    transition: var(--transition-smooth);
}

/* L2 Interlude - Contenido y Layout de la Tienda */
.shop-item-content {
    display: flex;
    gap: 12px;
    align-items: center;
}

.shop-item-icon {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    background: rgba(8, 9, 12, 0.5);
    transition: var(--transition-smooth);
}

.item-grade-tag {
    font-size: 0.65rem;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Colores de Grado para Etiquetas */
.item-grade-tag.grade-ng {
    background: rgba(159, 166, 178, 0.15);
    color: var(--color-text-muted);
    border: 1px solid rgba(159, 166, 178, 0.25);
}
.item-grade-tag.grade-d {
    background: rgba(205, 127, 50, 0.2);
    color: #e5a05d;
    border: 1px solid #cd7f32;
}
.item-grade-tag.grade-c {
    background: rgba(40, 167, 69, 0.2);
    color: #2ee560;
    border: 1px solid #28a745;
}
.item-grade-tag.grade-b {
    background: rgba(0, 180, 216, 0.2);
    color: #90e0ef;
    border: 1px solid #00b4d8;
}
.item-grade-tag.grade-a {
    background: rgba(157, 78, 221, 0.2);
    color: #e0aaff;
    border: 1px solid #9d4edd;
}
.item-grade-tag.grade-s {
    background: rgba(223, 177, 60, 0.25);
    color: #ffd666;
    border: 1px solid #dfb13c;
    text-shadow: 0 0 3px rgba(255, 214, 102, 0.5);
}

/* Diseños de Tarjetas por Grado */
.shop-item-card.card-grade-ng {
    border-color: rgba(255, 255, 255, 0.04);
}
.shop-item-card.card-grade-d {
    border-color: rgba(205, 127, 50, 0.15);
}
.shop-item-card.card-grade-d:hover {
    border-color: #cd7f32;
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.2);
    background: rgba(205, 127, 50, 0.02);
}
.shop-item-card.card-grade-c {
    border-color: rgba(40, 167, 69, 0.15);
}
.shop-item-card.card-grade-c:hover {
    border-color: #28a745;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.25);
    background: rgba(40, 167, 69, 0.02);
}
.shop-item-card.card-grade-b {
    border-color: rgba(0, 180, 216, 0.15);
}
.shop-item-card.card-grade-b:hover {
    border-color: #00b4d8;
    box-shadow: 0 0 12px rgba(0, 180, 216, 0.3);
    background: rgba(0, 180, 216, 0.02);
}
.shop-item-card.card-grade-a {
    border-color: rgba(157, 78, 221, 0.18);
}
.shop-item-card.card-grade-a:hover {
    border-color: #9d4edd;
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.35);
    background: rgba(157, 78, 221, 0.02);
}
.shop-item-card.card-grade-s {
    border-color: rgba(223, 177, 60, 0.25);
    position: relative;
}
.shop-item-card.card-grade-s::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 102, 0.15);
    pointer-events: none;
    animation: cardPulseS 2s infinite alternate;
}
.shop-item-card.card-grade-s:hover {
    border-color: #dfb13c;
    box-shadow: 0 0 18px rgba(223, 177, 60, 0.4);
    background: rgba(223, 177, 60, 0.03);
}

@keyframes cardPulseS {
    0% {
        box-shadow: inset 0 0 4px rgba(223, 177, 60, 0.1);
    }
    100% {
        box-shadow: inset 0 0 10px rgba(255, 214, 102, 0.25);
    }
}

/* --- PANTALLA 5: GREMIO DE HABILIDADES --- */
#screen-skills {
    background: transparent;
}

.skills-screen-header {
    margin-bottom: 25px;
    flex-shrink: 0;
}

.skills-screen-header h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-gold-glow);
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.skills-screen-header p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.skills-learn-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
}

.skills-learn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.sp-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.sp-display i {
    color: #00b4d8;
}

.skills-learn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px;
}

.skill-learn-card {
    background: linear-gradient(135deg, rgba(14, 16, 22, 0.82) 0%, rgba(6, 8, 12, 0.92) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.skill-learn-card:hover {
    border-color: rgba(226, 177, 60, 0.35) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(226, 177, 60, 0.12), 0 0 15px rgba(0, 0, 0, 0.5) !important;
}

.skill-learn-card.learned {
    border-color: rgba(74, 222, 128, 0.25) !important;
    background: linear-gradient(135deg, rgba(12, 32, 20, 0.82) 0%, rgba(6, 16, 10, 0.92) 100%) !important;
}

.skill-learn-card.learned:hover {
    border-color: rgba(74, 222, 128, 0.5) !important;
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.08), 0 0 15px rgba(0, 0, 0, 0.5) !important;
}

.skill-learn-top-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
}

.skill-learn-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.skill-learn-title-row img, .skill-learn-title-row i {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    font-size: 1.25rem !important;
    color: var(--color-gold) !important;
}

.skill-learn-name-box {
    display: flex !important;
    flex-direction: column !important;
}

.skill-learn-name-box .item-name {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 2px !important;
}

.skill-learn-req-lvl {
    font-size: 0.68rem !important;
    color: var(--color-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.skill-type-badge {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.skill-learn-desc {
    font-size: 0.78rem !important;
    color: var(--color-text-muted) !important;
    line-height: 1.4 !important;
    margin: 8px 0 0 0 !important;
}

.skill-learn-stats-row {
    display: flex !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.skill-stat-pill {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mp-pill {
    background: rgba(0, 180, 216, 0.08) !important;
    color: #00b4d8 !important;
    border-color: rgba(0, 180, 216, 0.15) !important;
}

.cd-pill {
    background: rgba(255, 214, 10, 0.06) !important;
    color: #ffd166 !important;
    border-color: rgba(255, 214, 10, 0.15) !important;
}

.skill-learned-badge {
    color: #4ade80 !important;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.skills-learn-footer {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.shop-item-card:hover {
    border-color: rgba(226, 177, 60, 0.2);
    background: rgba(255, 255, 255, 0.02);
}

.item-info {
    display: flex;
    flex-direction: column;
}

.item-name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.item-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.item-stat-bonus {
    font-size: 0.75rem;
    color: var(--color-green);
    margin-top: 4px;
    font-weight: 600;
}

.item-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding-top: 8px;
}

.item-price {
    font-size: 0.9rem;
    color: var(--color-gold);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.item-price i {
    font-size: 0.8rem;
}

.btn-buy {
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-main);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-buy:hover {
    background: var(--color-gold);
    color: #000;
    font-weight: bold;
    border-color: var(--color-gold);
}

.btn-buy.equipped {
    background: rgba(56, 176, 0, 0.1);
    border-color: var(--color-green);
    color: var(--color-green);
    cursor: default;
    pointer-events: none;
}

.btn-buy.equipped::after {
    content: " (Equipado)";
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-glass);
    color: var(--color-text-muted);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: var(--font-heading);
    font-size: 0.8rem;
}

.btn-secondary:hover {
    color: var(--color-text-main);
    border-color: var(--color-text-main);
}

.shop-footer {
    margin-top: auto;
}

/* --- PANTALLA 4: COMBATE --- */
#screen-tower {
    padding: 15px;
    gap: 15px;
}

.tower-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.floor-badge {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

#tower-floor-desc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.btn-flee {
    background: rgba(255, 77, 109, 0.1);
    border: 1px solid rgba(255, 77, 109, 0.3);
    color: var(--color-red);
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
}

.btn-flee:hover {
    background: var(--color-red);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 77, 109, 0.3);
}

.combat-arena {
    position: relative;
    width: 100%;
    flex-grow: 1;
    min-height: 250px;
    max-height: 350px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-glass);
}

.arena-background-container {
    width: 100%;
    height: 100%;
    position: relative;
}

#arena-bg {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.arena-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
}

/* Grid de combatientes en escena */
.combatants-wrapper {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 30px;
}

.combatant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 150px;
}

.sprite-container {
    position: relative;
    width: 110px;
    height: 110px;
}

.sprite-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    transition: var(--transition-smooth);
}

.hero-combatant img {
    border-color: var(--color-blue);
    transform: scaleX(1); /* Para que el héroe mire hacia el oponente */
    animation: heroIdle 3.5s ease-in-out infinite;
}

.enemy-combatant img {
    border-color: var(--color-red);
    animation: enemyIdle 3.8s ease-in-out infinite;
}

.vs-badge {
    align-self: center;
    margin-bottom: 45px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-glass);
    color: var(--color-gold);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Barras de vida miniatura en la arena */
.combatant-info {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-glass);
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
}

.combatant-name {
    font-size: 0.8rem;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-bar {
    background: #000;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2px;
}

.mini-fill {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mini-bar-txt {
    font-size: 0.65rem;
    color: var(--color-text-muted);
}

/* Badges de estados alterados */
.status-effect-badges {
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.status-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    animation: bounce 1s infinite alternate;
}

.badge-stun {
    background: #e2b13c;
    border: 1px solid #ffe893;
}

.badge-buff {
    background: #38b000;
    border: 1px solid #84e85d;
}

.badge-shield {
    background: #00b4d8;
    border: 1px solid #7be3ff;
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}

/* --- Panel de Controles de Habilidades (Abajo en Combate) --- */
.combat-controls {
    display: none !important;
}

.combat-controls.player-turn {
    border-color: var(--color-gold);
    box-shadow: 0 0 15px rgba(226, 177, 60, 0.25);
    animation: border-pulse 2s infinite alternate;
}

@keyframes border-pulse {
    from {
        border-color: var(--border-glass);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    to {
        border-color: var(--color-gold);
        box-shadow: 0 0 20px rgba(226, 177, 60, 0.45);
    }
}

.controls-title {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.skill-btn {
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 80px;
    transition: var(--transition-smooth);
}

.skill-btn:not(:disabled) {
    border-color: rgba(0, 180, 216, 0.35);
    background: rgba(0, 180, 216, 0.05);
    box-shadow: 0 0 8px rgba(0, 180, 216, 0.15);
    animation: skill-pulse 2s infinite ease-in-out;
}

.skill-btn:hover:not(:disabled) {
    border-color: var(--color-gold) !important;
    background: rgba(226, 177, 60, 0.15) !important;
    box-shadow: 0 0 15px rgba(226, 177, 60, 0.45) !important;
    animation: none;
}

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

@keyframes skill-pulse {
    0% {
        border-color: rgba(0, 180, 216, 0.35);
        box-shadow: 0 0 8px rgba(0, 180, 216, 0.15);
    }
    50% {
        border-color: var(--color-gold);
        box-shadow: 0 0 14px rgba(226, 177, 60, 0.35);
    }
    100% {
        border-color: rgba(0, 180, 216, 0.35);
        box-shadow: 0 0 8px rgba(0, 180, 216, 0.15);
    }
}

.skill-btn img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.skill-btn i {
    font-size: 1.6rem;
    color: var(--color-gold);
}

.skill-btn span {
    font-size: 0.85rem;
    text-align: center;
    font-weight: 600;
}

.skill-btn .mp-cost {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 180, 216, 0.8);
    font-size: 0.6rem;
    padding: 1px 4px;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
}

.skill-btn .skill-hotkey {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(226, 177, 60, 0.25);
    border: 1px solid var(--color-gold);
    font-size: 0.65rem;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-gold);
    font-weight: bold;
    font-family: var(--font-body);
}

/* Barra de recarga (cooldown) de habilidades */
.skill-cooldown-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.skill-cooldown-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #00b4d8, #0077b6);
    box-shadow: 0 0 4px rgba(0, 180, 216, 0.5);
    transition: width 0.05s linear;
}

.skill-cooldown-fill.ready {
    background: linear-gradient(90deg, #ffd166, #ffd60a);
    box-shadow: 0 0 6px rgba(255, 214, 10, 0.8);
}

/* Tooltip personalizado de habilidades */
.skill-btn .skill-tooltip,
.inv-grid-cell .skill-tooltip,
.inv-equip-slot .skill-tooltip,
.quickbar-cell .skill-tooltip {
    position: absolute;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 200px;
    background: rgba(8, 9, 12, 0.95);
    border: 1px solid var(--color-gold);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--color-text-main);
    font-size: 0.75rem;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.8);
    transition: var(--transition-smooth);
    z-index: 1000;
    text-align: left;
}

.skill-btn:hover .skill-tooltip,
.inv-grid-cell:hover .skill-tooltip,
.inv-equip-slot:hover .skill-tooltip,
.quickbar-cell:hover .skill-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.tooltip-title {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.tooltip-desc {
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* ==========================================================================
   COLUMNA DERECHA: REGISTRO DE AVENTURA (sidebar-log)
   ========================================================================== */
#sidebar-log {
    display: none !important;
}

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.log-header h3 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    text-transform: uppercase;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}

.btn-icon:hover {
    color: var(--color-red);
}

.log-content {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 5px;
}

.log-entry {
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.01);
    border-left: 2px solid #555;
    animation: logFadeIn 0.3s ease-out;
}

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

/* Tipos de Log coloreados */
.system-entry { border-left-color: #6c757d; color: var(--color-text-muted); }
.hero-entry { border-left-color: var(--color-blue); }
.enemy-entry { border-left-color: var(--color-red); }
.reward-entry { border-left-color: var(--color-gold); background: rgba(226, 177, 60, 0.03); color: var(--color-gold-glow); }
.level-entry { border-left-color: var(--color-green); background: rgba(56, 176, 0, 0.03); color: #84e85d; font-weight: 600; }
.danger-entry { border-left-color: #f77f00; color: #f77f00; font-weight: 600; }
.stun-entry { border-left-color: #fcbf49; color: #fcbf49; }

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   MODALES (GAME-MODAL: VICTORIA, DERROTA, LEVEL UP)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: var(--transition-smooth);
}

.modal-content {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    animation: modalScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalScale {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-gold);
    text-shadow: 0 0 10px rgba(226, 177, 60, 0.3);
}

.modal-body {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.modal-body strong {
    color: var(--color-text-main);
}

.modal-actions {
    width: 100%;
}

.modal-actions button {
    width: 100%;
}

/* ==========================================================================
   ANIMACIONES DE COMBATE E IMPACTOS EN LA ARENA
   ========================================================================== */

/* Sacudida de impacto (Daño recibido por enemigo) */
.shake-animation {
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* Parpadeo rojo (Daño recibido por el héroe) */
.damage-flash {
    animation: flash 0.3s ease-out;
}

@keyframes flash {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0)); }
    50% { filter: brightness(1.8) sepia(1) hue-rotate(-50deg) saturate(5); box-shadow: 0 0 25px var(--color-red); }
}

/* Efecto de CURACIÓN o buff (Brillo verde/dorado) */
.heal-flash {
    animation: healFlash 0.5s ease-out;
}

@keyframes healFlash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5) drop-shadow(0 0 15px var(--color-green)); }
}

/* Efecto de escudo (Brillo azul) */
.shield-flash {
    animation: shieldFlash 0.5s ease-out;
}

@keyframes shieldFlash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4) drop-shadow(0 0 15px var(--color-blue)); }
}

#damage-popup-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 200;
}

/* Daños Flotantes (Popups en arena) */
.damage-popup {
    position: absolute;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.8rem;
    color: #fff;
    pointer-events: none;
    text-shadow: 2px 2px 0px #000, 0 0 8px rgba(0, 0, 0, 0.8);
    z-index: 150;
    animation: floatDamage 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes floatDamage {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.6);
    }
    15% {
        opacity: 1;
        transform: translateY(-20px) scale(1.2);
    }
    30% {
        transform: translateY(-25px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.85);
    }
}

.popup-phys { color: #ff4d4d; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 0, 0, 0.65); }
.popup-magic { color: #e63946; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 0, 0, 0.65); }
.popup-heal { color: #52b788; text-shadow: 2px 2px 0 #000, 0 0 10px var(--color-green); }
.popup-shield { color: #7be3ff; text-shadow: 2px 2px 0 #000, 0 0 10px var(--color-blue); }
.popup-stun { color: #fcbf49; text-shadow: 2px 2px 0 #000, 0 0 10px #f77f00; }
.popup-crit { color: #d90429; text-shadow: 2px 2px 0 #000, 0 0 15px rgba(255, 0, 0, 0.9); font-size: 2.2rem; }

/* Responsive Media Queries para Dispositivos Móviles */
@media (max-width: 1024px) {
    #game-container {
        grid-template-columns: 240px 1fr;
        gap: 10px;
        padding: 10px;
    }
    #game-container.selection-mode {
        grid-template-columns: 1fr;
    }
    .character-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
    }
}

@media (max-width: 768px) {
    #game-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: 100vh;
        overflow-y: auto;
    }
    #game-container.selection-mode {
        grid-template-columns: 1fr;
    }
    #sidebar-character, #sidebar-log {
        height: auto;
        max-height: 300px;
    }
    .character-grid {
        grid-template-columns: 1fr;
    }
    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .shop-items-grid {
        grid-template-columns: 1fr;
    }
}

/* Estado Veneno (Poison) */
.badge-poison {
    background: #2b9348 !important;
    border: 1px solid #55a630 !important;
}

.popup-poison {
    color: #c77dff !important;
    font-weight: 900;
    text-shadow: 2px 2px 0 #000, 0 0 10px rgba(155, 93, 229, 0.8);
}

.popup-mana {
    color: #7be3ff !important;
    font-weight: 900;
    text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0, 180, 216, 0.8);
}

/* --- ESTILOS DE BARRAS DE TIEMPO DE COMBATE (ATB) --- */
.atb-mini {
    background: rgba(255, 255, 255, 0.1) !important;
    height: 6px !important;
    margin-top: 3px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.atb-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: linear-gradient(90deg, #d4a373, #ffd166);
    box-shadow: 0 0 4px rgba(255, 209, 102, 0.4);
    transition: width 0.05s linear;
}

.atb-fill.ready {
    background: linear-gradient(90deg, #ffd166, #ffd60a) !important;
    box-shadow: 0 0 12px rgba(255, 214, 10, 0.8) !important;
    animation: pulse-ready 1s infinite alternate;
}

.enemy-atb-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: linear-gradient(90deg, #e76f51, #f4a261);
    box-shadow: 0 0 4px rgba(244, 162, 97, 0.4);
    transition: width 0.05s linear;
}

.enemy-atb-fill.ready {
    background: linear-gradient(90deg, #f4a261, #e9c46a) !important;
    box-shadow: 0 0 12px rgba(233, 196, 106, 0.8) !important;
    animation: pulse-ready-enemy 1s infinite alternate;
}

.party-atb-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: linear-gradient(90deg, #818cf8, #a78bfa);
    box-shadow: 0 0 4px rgba(167, 139, 250, 0.4);
    transition: width 0.05s linear;
}

.party-atb-fill.ready {
    background: linear-gradient(90deg, #a78bfa, #c084fc) !important;
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.8) !important;
    animation: pulse-ready 1s infinite alternate;
}


@keyframes pulse-ready {
    from { filter: brightness(1); }
    to { filter: brightness(1.3); }
}

@keyframes pulse-ready-enemy {
    from { filter: brightness(1); }
    to { filter: brightness(1.3); }
}

/* --- ESTILOS DE CATEGORÍAS DE LA TIENDA --- */
.shop-type-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.shop-type-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.shop-type-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text);
}

.shop-type-btn.active {
    background: linear-gradient(135deg, rgba(224, 169, 4, 0.2), rgba(255, 214, 10, 0.1));
    border-color: #ffd60a;
    color: #ffd60a;
    box-shadow: 0 0 15px rgba(255, 214, 10, 0.2);
}

/* --- Catacumbas 7 Signos Screen --- */
.catacombs-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.catacombs-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(192, 132, 252, 0.05);
    border: 1px solid rgba(192, 132, 252, 0.15);
    border-radius: 8px;
    padding: 12px 20px;
    gap: 15px;
    flex-wrap: wrap;
}

.seal-stone-counts {
    display: flex;
    gap: 15px;
    font-size: 0.95rem;
}

.seal-stone-counts span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.aa-count-display {
    font-weight: bold;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.catacombs-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 600px) {
    .catacombs-menu-grid {
        grid-template-columns: 1fr;
    }
}

.btn-catacombs-enter {
    background: linear-gradient(135deg, rgba(239, 71, 111, 0.08) 0%, rgba(239, 71, 111, 0.03) 100%) !important;
    border-color: rgba(239, 71, 111, 0.25) !important;
}

.btn-catacombs-enter:hover {
    background: linear-gradient(135deg, rgba(239, 71, 111, 0.15) 0%, rgba(239, 71, 111, 0.06) 100%) !important;
    border-color: rgba(239, 71, 111, 0.45) !important;
    box-shadow: 0 0 10px rgba(239, 71, 111, 0.15);
}

.btn-catacombs-exchange {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.08) 0%, rgba(192, 132, 252, 0.03) 100%) !important;
    border-color: rgba(192, 132, 252, 0.25) !important;
}

.btn-catacombs-exchange:hover {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.15) 0%, rgba(192, 132, 252, 0.06) 100%) !important;
    border-color: rgba(192, 132, 252, 0.45) !important;
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.15);
}

.catacombs-subpanel {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(192, 132, 252, 0.2);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: fadeIn 0.3s ease-out;
}

.catacombs-subpanel.hidden {
    display: none !important;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.panel-header h3 {
    margin: 0;
    font-family: 'Cinzel', serif;
    color: #e9d5ff;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-close-panel {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-close-panel:hover {
    color: var(--color-red);
}

.exchange-action-box {
    background: rgba(192, 132, 252, 0.03);
    border: 1px solid rgba(192, 132, 252, 0.1);
    border-radius: 8px;
    padding: 15px;
}

.exchange-action-box h4 {
    margin: 0 0 4px 0;
    color: #e9d5ff;
}

.exchange-action-box .subtitle {
    margin: 0 0 12px 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.exchange-buttons-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-exchange-action {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-exchange-action:hover {
    background: rgba(192, 132, 252, 0.1);
    border-color: rgba(192, 132, 252, 0.3);
}

.btn-exchange-action.btn-all {
    background: rgba(192, 132, 252, 0.15);
    border-color: rgba(192, 132, 252, 0.4);
    color: #e9d5ff;
}

.btn-exchange-action.btn-all:hover {
    background: rgba(192, 132, 252, 0.25);
    border-color: rgba(192, 132, 252, 0.6);
}

.mammon-shop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 600px) {
    .mammon-shop-grid {
        grid-template-columns: 1fr;
    }
}

.btn-buy-mammon {
    background: linear-gradient(135deg, #7b2cbf, #9d4edd);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.btn-buy-mammon:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(157, 78, 221, 0.4);
}

.catacombs-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

/* ==========================================================================
   INTERFAZ DE CREACIÓN DE PERSONAJE PREMIUM
   ========================================================================== */
.char-creator-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 25px;
    width: 100%;
    max-width: 1000px;
    margin: 15px auto 0 auto;
    align-items: stretch;
}

.char-creator-options, .char-creator-preview {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 480px;
    background: rgba(10, 12, 18, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.creator-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.creator-section h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-gold);
    text-shadow: 0 0 5px rgba(223, 177, 60, 0.2);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.creator-input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-glass);
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition-smooth);
    width: 100%;
}

.creator-input:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 8px rgba(223, 177, 60, 0.25);
}

.creator-class-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.creator-class-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(8, 9, 12, 0.45);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.creator-class-option:hover {
    border-color: rgba(226, 177, 60, 0.4);
    background: rgba(8, 9, 12, 0.6);
}

.creator-class-option.active {
    border-color: var(--color-gold);
    background: rgba(226, 177, 60, 0.08);
    box-shadow: 0 0 12px rgba(226, 177, 60, 0.25);
}

.creator-class-option strong {
    font-family: var(--font-heading);
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.creator-class-option span {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.creator-avatar-selector {
    display: flex;
    gap: 15px;
}

.creator-avatar-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(8, 9, 12, 0.45);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.creator-avatar-option:hover {
    border-color: rgba(157, 78, 221, 0.4);
    background: rgba(8, 9, 12, 0.6);
}

.creator-avatar-option.active {
    border-color: var(--color-purple);
    background: rgba(157, 78, 221, 0.08);
    box-shadow: 0 0 12px rgba(157, 78, 221, 0.25);
}

.btn-start-adventure {
    padding: 14px 20px !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(226, 177, 60, 0.2) !important;
}

.btn-start-adventure:hover {
    box-shadow: 0 6px 20px rgba(226, 177, 60, 0.4) !important;
}

.creator-avatar-option img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: 40% 0%;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-smooth);
}

.creator-avatar-option.active img {
    border-color: var(--color-purple);
    box-shadow: 0 0 8px rgba(157, 78, 221, 0.3);
}

.creator-avatar-option span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.creator-avatar-option.active span {
    color: var(--color-text-main);
}

/* Vista Previa */
.char-creator-preview {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.preview-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.preview-header .portrait-container {
    width: 100px;
    height: 100px;
    position: relative;
}

.preview-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 0%;
    border-radius: 6px;
    border: 3px solid var(--color-gold);
    box-shadow: 0 0 15px rgba(226, 177, 60, 0.4);
    transition: var(--transition-smooth);
    animation: avatarFloat 4s ease-in-out infinite;
}

.preview-header h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-text-main);
    letter-spacing: 0.5px;
    margin-top: 8px;
}

.preview-stats {
    width: 100%;
    text-align: left;
}

.preview-stats h4, .preview-skills h4 {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: var(--color-gold);
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 4px;
    letter-spacing: 0.5px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    font-size: 0.8rem;
}

.stats-grid span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.preview-skills {
    width: 100%;
    text-align: left;
}

.preview-skills-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 6px !important;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.preview-skill-icon-wrapper {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.preview-skill-icon-wrapper:hover {
    border-color: var(--color-gold) !important;
    background: rgba(226, 177, 60, 0.1) !important;
    box-shadow: 0 0 8px rgba(226, 177, 60, 0.3) !important;
}

.preview-skill-icon-wrapper img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}

.preview-skill-icon-wrapper i {
    font-size: 1.1rem !important;
    color: var(--color-gold) !important;
}

.preview-skill-icon-wrapper .skill-tooltip {
    position: absolute !important;
    bottom: 50px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    width: 200px !important;
    background: rgba(8, 9, 12, 0.98) !important;
    border: 1px solid var(--color-gold) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: var(--color-text-main) !important;
    font-size: 0.72rem !important;
    pointer-events: none !important;
    opacity: 0 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.85) !important;
    transition: all 0.2s ease !important;
    z-index: 1000 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.preview-skill-icon-wrapper:hover .skill-tooltip {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 768px) {
    .char-creator-container {
        grid-template-columns: 1fr;
    }
    .char-creator-options, .char-creator-preview {
        min-height: auto;
    }
}

/* --- MODAL DE HOJA DE PERSONAJE (PERFIL) --- */
.profile-modal-content {
    background: rgba(14, 17, 23, 0.95);
    border: 1px solid var(--border-glass);
    box-shadow: 0 0 35px rgba(226, 177, 60, 0.25);
}

.profile-modal-body {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
    gap: 25px;
    margin-top: 15px;
    align-items: stretch;
}

.profile-full-portrait-container {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 480px;
    overflow: hidden;
}

.profile-full-portrait-container img {
    max-height: 460px;
    width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
    animation: floatingChar 3s ease-in-out infinite;
}

@keyframes floatingChar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.profile-details-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.profile-section-header {
    border-bottom: 2px solid rgba(226, 177, 60, 0.3);
    padding-bottom: 8px;
    margin-bottom: 5px;
}

.profile-section-header h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--color-gold);
    margin: 0;
}

.subtitle-purple {
    font-size: 0.9rem;
    color: #c8b1e4;
    font-weight: 600;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.profile-details-sub h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-text-main);
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 4px;
}

.profile-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-stats-list li {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.profile-stats-list li span {
    color: var(--color-text-muted);
}

.profile-stats-list li strong {
    color: var(--color-text-main);
}

.profile-equip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.profile-equip-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 6px;
}

.profile-equip-slot i {
    font-size: 1.4rem;
    width: 30px;
    text-align: center;
}

.profile-equip-slot .slot-label {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.profile-equip-slot .slot-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.modal-close-x {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.8rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.modal-close-x:hover {
    color: var(--color-gold);
}

@media (max-width: 600px) {
    .profile-modal-body {
        grid-template-columns: 1fr;
    }
    .profile-full-portrait-container {
        max-height: 250px;
    }
}

/* Tarjetas de Destinos de Aventura */
.destination-card {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--color-text-main);
    cursor: pointer;
    transition: all 0.3s ease;
}

.destination-card.enabled:hover {
    background: rgba(74, 222, 128, 0.08);
    border-color: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.15);
    transform: translateY(-1px);
}

.destination-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(239, 35, 60, 0.02);
    border-color: rgba(239, 35, 60, 0.15);
}

.dest-main-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.dest-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-gold);
}

.dest-range {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 3px;
}

.dest-lock {
    font-size: 0.75rem;
    color: var(--color-red);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 35, 60, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Animación de Respiración en Combate (Idle Movement) */
@keyframes heroIdle {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.01); }
}

@keyframes enemyIdle {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.01); }
}

/* Efectos visuales de impacto de ataque en el contenedor del sprite */
.attack-flash-physical {
    position: absolute;
    top: 50%;
    left: -50%;
    width: 200%;
    height: 10px;
    background: linear-gradient(90deg, transparent, #fff 50%, transparent);
    transform: translateY(-50%) rotate(-45deg) scaleX(0);
    box-shadow: 0 0 20px #fff, 0 0 45px #ffd700;
    pointer-events: none;
    z-index: 10;
    animation: physicalSlash 0.3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes physicalSlash {
    0% { transform: translateY(-50%) rotate(-45deg) scaleX(0); opacity: 0; }
    30% { transform: translateY(-50%) rotate(-45deg) scaleX(1); opacity: 1; }
    100% { transform: translateY(-50%) rotate(-45deg) scaleX(1.2); opacity: 0; }
}

.attack-flash-magic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: radial-gradient(circle, rgba(135, 206, 250, 0.75) 0%, transparent 70%);
    border: 3px solid #87cefa;
    box-shadow: 0 0 25px #00bfff, 0 0 50px #00bfff;
    pointer-events: none;
    z-index: 10;
    transform: scale(0.2);
    opacity: 0;
    animation: magicExplosion 0.4s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes magicExplosion {
    0% { transform: scale(0.2); opacity: 0; }
    40% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

.attack-flash-heal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(46, 204, 113, 0.35), transparent);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.45) inset;
    border-radius: 8px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    animation: healGlow 0.5s ease-out forwards;
}

@keyframes healGlow {
    0% { opacity: 0; transform: translateY(10px); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-15px); }
}

/* Proyectiles de combate dinámicos */
.combat-projectile {
    position: absolute;
    width: 35px;
    height: 35px;
    pointer-events: none;
    z-index: 150;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
}

.combat-projectile.proj-phys {
    background: radial-gradient(circle, #fff 20%, #ffd700 65%, transparent 100%);
    box-shadow: 0 0 20px #ffd700, 0 0 40px #ff8c00;
    border-radius: 50%;
    clip-path: polygon(0% 50%, 100% 15%, 70% 50%, 100% 85%);
}

.combat-projectile.proj-magic {
    background: radial-gradient(circle, #fff 15%, #00bfff 60%, #1e90ff 100%);
    box-shadow: 0 0 25px #00bfff, 0 0 45px #0000ff;
    border-radius: 50%;
}

.combat-projectile.flying {
    transform: translate(calc(var(--end-x) - var(--start-x) - 50%), calc(var(--end-y) - var(--start-y) - 50%)) scale(1.3) rotate(720deg);
}

/* ==========================================================================
   8. DUNGEON CRAWLER (WIZARDRY STYLE) SECTION
   ========================================================================== */

.dungeon-crawler-container {
    display: flex;
    gap: 20px;
    width: 100%;
    margin-top: 15px;
    font-family: var(--font-body);
}

.dungeon-main-view {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dungeon-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background: rgba(18, 22, 30, 0.95);
    border: 1px dashed rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    min-width: 180px;
    max-width: 500px;
    min-height: 250px;
    max-height: 600px;
    resize: both !important;
    overflow: auto !important;
}

.dungeon-sidebar-handle {
    user-select: none;
    transition: background 0.2s ease;
}

.dungeon-sidebar-handle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* 3D Perspective Viewport */
.dungeon-viewport-3d {
    position: relative;
    width: 100%;
    height: 380px;
    background: #040508;
    overflow: hidden;
    perspective: 350px;
    border: 3px solid var(--border-gold);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(0, 0, 0, 0.95);
}

/* Floor and Ceiling with perspective grids */
/* 3D Perspective Viewport Stage */
.dungeon-viewport-3d {
    position: relative;
    width: 100%;
    height: 380px;
    background: #020204;
    overflow: hidden;
    border: 3px solid var(--border-gold);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dungeon-3d-stage {
    position: relative;
    width: 600px;
    height: 380px;
    transform-style: preserve-3d;
    perspective: 400px;
    flex-shrink: 0;
    transition: transform 0.25s ease-out;
}

/* Floor and Ceiling with absolute perspective-correct transforms */
.dungeon-floor {
    position: absolute;
    width: 600px;
    height: 2400px;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -1200px;
    background-image: 
        linear-gradient(rgba(212, 175, 55, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.08) 1px, transparent 1px),
        url('Esenarios/Calabozo/Obelisk_Floor.png');
    background-size: 100px 100px, 100px 100px, 150px 150px;
    background-repeat: repeat;
    transform: translateX(-300px) translateY(-1010px) translateZ(-1200px) rotateX(-90deg);
    box-shadow: inset 0 0 100px rgba(0,0,0,0.95);
}

.dungeon-ceiling {
    position: absolute;
    width: 600px;
    height: 2400px;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -1200px;
    background-image: 
        linear-gradient(rgba(147, 51, 234, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(147, 51, 234, 0.04) 1px, transparent 1px),
        url('Esenarios/Calabozo/Obelisk_Ceiling.png');
    background-size: 100px 100px, 100px 100px, 150px 150px;
    background-repeat: repeat;
    transform: translateX(-300px) translateY(-1390px) translateZ(-1200px) rotateX(90deg);
    box-shadow: inset 0 0 100px rgba(0,0,0,0.95);
}

/* Dynamic Wall Blocks (Centered by default, transformed to edges) */
.dungeon-wall {
    position: absolute;
    width: 600px; /* Width equals cell depth */
    height: 380px;
    top: 0;
    left: 50%;
    margin-left: -300px;
    transition: all 0.25s ease-out;
    background-size: 100% 100%;
    box-sizing: border-box;
    image-rendering: auto;
}

/* Left Wall Segments (rotated 90deg, pushed to left edge, spaced by depth) */
.wall-left-0 {
    transform: translateX(-600px) translateZ(-300px) rotateY(90deg);
    border-right: 3px solid rgba(212, 175, 55, 0.85);
    box-shadow: inset -40px 0 50px rgba(0, 0, 0, 0.85);
}
.wall-left-1 {
    transform: translateX(-600px) translateZ(-900px) rotateY(90deg);
    border-right: 2px solid rgba(212, 175, 55, 0.5);
    box-shadow: inset -20px 0 40px rgba(0, 0, 0, 0.9);
}
.wall-left-2 {
    transform: translateX(-600px) translateZ(-1500px) rotateY(90deg);
    border-right: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: inset -10px 0 30px rgba(0, 0, 0, 0.95);
}
.wall-left-3 {
    transform: translateX(-600px) translateZ(-2100px) rotateY(90deg);
    border-right: 1px solid rgba(212, 175, 55, 0.1);
}

/* Right Wall Segments (rotated -90deg, pushed to right edge, spaced by depth) */
.wall-right-0 {
    transform: translateX(0px) translateZ(-300px) rotateY(-90deg);
    border-left: 3px solid rgba(212, 175, 55, 0.85);
    box-shadow: inset 40px 0 50px rgba(0, 0, 0, 0.85);
}
.wall-right-1 {
    transform: translateX(0px) translateZ(-900px) rotateY(-90deg);
    border-left: 2px solid rgba(212, 175, 55, 0.5);
    box-shadow: inset 20px 0 40px rgba(0, 0, 0, 0.9);
}
.wall-right-2 {
    transform: translateX(0px) translateZ(-1500px) rotateY(-90deg);
    border-left: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: inset 10px 0 30px rgba(0, 0, 0, 0.95);
}
.wall-right-3 {
    transform: translateX(0px) translateZ(-2100px) rotateY(-90deg);
    border-left: 1px solid rgba(212, 175, 55, 0.1);
}

/* Front Wall Segments (transverse blocks, width remains cell width, i.e., 600px) */
.wall-front-1 {
    width: 600px;
    transform: translateX(-300px) translateZ(-600px);
    border: 3px solid rgba(212, 175, 55, 0.9);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.95);
}
.wall-front-2 {
    width: 600px;
    transform: translateX(-300px) translateZ(-1200px);
    border: 2px solid rgba(212, 175, 55, 0.5);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.98);
}
.wall-front-3 {
    width: 600px;
    transform: translateX(-300px) translateZ(-1800px);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Overlay message */
#dungeon-overlay-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 24px;
    background: rgba(13, 15, 20, 0.95);
    border: 1px solid var(--border-gold);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 1px;
    border-radius: 4px;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
    animation: pulse-border 1.5s infinite;
}

/* Controls Panel (DPAD) */
.dungeon-controls-panel {
    display: flex;
    justify-content: center;
    padding: 15px;
    background: rgba(15, 18, 25, 0.85);
}

.dpad {
    display: grid;
    grid-template-columns: repeat(3, 75px);
    grid-template-rows: repeat(3, 60px);
    gap: 8px;
    justify-content: center;
}

.btn-dpad {
    background: linear-gradient(to bottom, #212836 0%, #151a24 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #c8cbd5;
    font-size: 1.25rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.btn-dpad:hover {
    background: linear-gradient(to bottom, #2d3647 0%, #1b2230 100%);
    color: #fff;
    border-color: var(--color-gold);
}

.btn-dpad:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.btn-dpad.btn-action {
    background: linear-gradient(to bottom, #3b2f15 0%, #201a0a 100%);
    color: var(--color-gold);
    border-color: var(--border-gold);
    font-size: 1.1rem;
}

.btn-dpad.btn-action:hover {
    background: linear-gradient(to bottom, #4f3f1b 0%, #2c240d 100%);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Sidebar and Compass */
.dungeon-compass {
    text-align: center;
    font-size: 1.05em;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.minimap-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.minimap-title {
    margin: 0;
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.minimap-grid {
    display: grid;
    gap: 1px;
    background: transparent;
    padding: 6px;
    border-radius: 4px;
    border: none;
    justify-content: center;
}

.minimap-cell {
    width: calc(18px * var(--cell-scale, 1));
    height: calc(18px * var(--cell-scale, 1));
    border-radius: 2px;
    background: var(--bg-darker);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(0.6rem * var(--cell-scale, 1));
    font-weight: bold;
}

/* Cell types */
.minimap-cell.cell-wall {
    background: #1b2029;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
}

.minimap-cell.cell-path {
    background: rgba(30, 41, 59, 0.45);
}

.minimap-cell.cell-unexplored {
    background: transparent;
}

.minimap-cell.cell-player {
    background: #9333ea;
    color: #fff;
    box-shadow: 0 0 8px #a855f7;
    animation: flash-player 1.5s infinite alternate;
}

.minimap-cell.cell-chest {
    background: #b45309;
    color: var(--color-gold);
}

.minimap-cell.cell-exit {
    background: #15803d;
    color: #fff;
    animation: pulse-exit 1.2s infinite;
}

.minimap-cell.cell-monster {
    background: #be123c;
    color: #fff;
}

.dungeon-instructions {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.4;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 10px;
}

.dungeon-instructions p {
    margin: 6px 0;
}

@keyframes flash-player {
    from { box-shadow: 0 0 2px #a855f7; }
    to { box-shadow: 0 0 10px #d8b4fe, 0 0 4px #a855f7; }
}

@keyframes pulse-exit {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); background: #166534; }
    100% { transform: scale(1); }
}

/* Dungeon Labyrinth Avatar & Animations */
.dungeon-avatar-container {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 130px;
    z-index: 100;
    pointer-events: none;
    transition: transform 0.25s ease-out;
    border-radius: 6px;
    border: 4px solid var(--border-gold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95), 0 0 25px rgba(212, 175, 55, 0.7);
    overflow: hidden;
    background: rgba(4, 5, 8, 0.6);
}

.dungeon-avatar-sprite {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 0%;
    transform-origin: bottom center;
}

@keyframes avatarBob {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-18px) scale(1.06); }
    100% { transform: translateY(0) scale(1); }
}

.avatar-bob {
    animation: avatarBob 0.3s ease-out;
}

@keyframes avatarTurnLeft {
    0% { transform: rotate(0) translateX(0); }
    50% { transform: rotate(-6deg) translateX(-18px); }
    100% { transform: rotate(0) translateX(0); }
}

.avatar-turn-left {
    animation: avatarTurnLeft 0.35s ease-out;
}

@keyframes avatarTurnRight {
    0% { transform: rotate(0) translateX(0); }
    50% { transform: rotate(6deg) translateX(18px); }
    100% { transform: rotate(0) translateX(0); }
}

.avatar-turn-right {
    animation: avatarTurnRight 0.35s ease-out;
}

/* D-pad Disabled State */
.btn-dpad:disabled {
    opacity: 0.15;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* --- ADVENTURE BACKGROUND TRANSITIONS & LAYOUT CENTERING --- */
body.adventure-active #arena-bg {
    display: none !important;
}

body.adventure-active .dungeon-viewport-3d {
    background: transparent !important;
}

body.adventure-active .dungeon-3d-stage {
    background: transparent !important;
}

@media (min-width: 1024px) {
    body.adventure-active #game-container {
        display: block !important;
        position: relative !important;
        width: 100vw !important;
        height: 100vh !important;
        padding: 15px !important;
    }

    body.adventure-active #sidebar-character {
        position: absolute !important;
        left: 15px !important;
        top: 15px !important;
        width: 280px !important;
        height: calc(100% - 30px) !important;
        z-index: 100 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        pointer-events: none !important; /* Allow clicking through empty space */
    }

    /* Volver a habilitar eventos de puntero en los elementos hijos del panel lateral */
    body.adventure-active #sidebar-character > * {
        pointer-events: auto !important;
    }

    /* Ocultar Estadísticas y equipamiento en el perfil flotante durante aventuras */
    body.adventure-active #sidebar-character .stats-panel,
    body.adventure-active #sidebar-character .equipment-panel {
        display: none !important;
    }

    /* Empujar el botón de inventario y los indicadores de oro/SP al final del panel lateral */
    body.adventure-active #sidebar-character #btn-visit-inventory {
        margin-top: auto !important;
    }

    body.adventure-active #main-viewport {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.adventure-active #screen-tower {
        max-width: 600px !important;
        margin: 0 auto !important;
    }

    body.adventure-active .tower-hud {
        max-width: 600px !important;
        margin: 0 auto 15px auto !important;
    }

    body.adventure-active .dungeon-crawler-container {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    body.adventure-active .dungeon-main-view {
        margin: 60px auto 0 auto !important;
        width: 100% !important;
        max-width: 600px !important;
    }

    body.adventure-active .dungeon-sidebar {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 280px !important;
        height: auto !important;
        z-index: 100 !important;
    }
}

/* --- BATTLE TRANSITION OVERLAY --- */
#battle-transition-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    background: transparent;
}

.combat-intro-anim {
    animation: combatIntro 1.8s ease-in-out forwards !important;
}

/* Contenedor central del choque */
.clash-container {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 300px !important;
    height: 300px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
}

/* Espadas vectoriales */
.clash-sword {
    position: absolute !important;
    width: 180px !important;
    height: 180px !important;
    transform-origin: 50% 80% !important;
    opacity: 0;
}

.sword-left {
    animation: swordLeftClash 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

.sword-right {
    animation: swordRightClash 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* Chispazo o destello de impacto */
.clash-spark {
    position: absolute !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #ffffff 10%, #ffd700 40%, rgba(255, 69, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%) !important;
    opacity: 0;
    transform: scale(0.1) !important;
    z-index: 10 !important;
    animation: sparkBurst 1.8s ease-out forwards !important;
}

/* Animación de la espada izquierda */
@keyframes swordLeftClash {
    0% {
        transform: translate(-250px, -200px) rotate(-60deg);
        opacity: 0;
    }
    10% {
        transform: translate(-200px, -160px) rotate(-60deg);
        opacity: 1;
    }
    22% {
        /* Momento del impacto en el centro */
        transform: translate(-15px, -15px) rotate(-25deg);
        opacity: 1;
    }
    28% {
        /* Rebote tras el impacto */
        transform: translate(-50px, -45px) rotate(-35deg);
        opacity: 1;
    }
    45% {
        transform: translate(-30px, -25px) rotate(-30deg);
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    75% {
        /* Fundido junto a la pantalla negra */
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Animación de la espada derecha */
@keyframes swordRightClash {
    0% {
        transform: translate(250px, -200px) rotate(60deg) scaleX(-1);
        opacity: 0;
    }
    10% {
        transform: translate(200px, -160px) rotate(60deg) scaleX(-1);
        opacity: 1;
    }
    22% {
        /* Momento del impacto en el centro */
        transform: translate(15px, -15px) rotate(25deg) scaleX(-1);
        opacity: 1;
    }
    28% {
        /* Rebote tras el impacto */
        transform: translate(50px, -45px) rotate(35deg) scaleX(-1);
        opacity: 1;
    }
    45% {
        transform: translate(30px, -25px) rotate(30deg) scaleX(-1);
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Animación del chispazo */
@keyframes sparkBurst {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    20% {
        transform: scale(0.1);
        opacity: 0;
    }
    22% {
        /* Impacto */
        transform: scale(1.2);
        opacity: 1;
    }
    28% {
        transform: scale(2);
        opacity: 0.8;
    }
    45% {
        transform: scale(3.5);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Animación de la pantalla de fondo */
@keyframes combatIntro {
    0% {
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
    }
    22% {
        /* Destello blanco de impacto */
        background: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(2px);
    }
    28% {
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(1px);
    }
    45% {
        /* Fundido a negro */
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(6px);
    }
    75% {
        background: rgba(0, 0, 0, 1);
        backdrop-filter: blur(8px);
    }
    100% {
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
    }
}


/* --- PANEL DE RECOMPENSAS DE VICTORIA ESTILO LINEAGE 2 --- */
.victory-rewards-overlay {
    position: fixed;
    z-index: 2500;
    width: 290px;
    height: auto;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.victory-rewards-overlay.active {
    opacity: 1;
    transform: scale(1);
}

.victory-rewards-panel {
    background: linear-gradient(135deg, rgba(38, 30, 22, 0.96) 0%, rgba(18, 14, 10, 0.98) 100%) !important;
    border: 2px solid #5a4b38 !important;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.95), 0 12px 36px rgba(0, 0, 0, 0.85) !important;
    border-radius: 8px !important;
    width: 100%;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    pointer-events: auto;
}

.vr-title {
    color: #e5c158 !important;
    font-family: 'Cinzel', serif, sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: bold !important;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.85);
    border-bottom: 1.5px solid rgba(229, 193, 88, 0.35);
    width: 100%;
    text-align: center;
    padding-bottom: 8px;
    box-sizing: border-box;
}

.vr-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-bottom: 20px;
}

.vr-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(90, 75, 56, 0.22);
    box-sizing: border-box;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
}

.vr-icon-box {
    width: 44px;
    height: 44px;
    border: 1.5px solid #5a4b38 !important;
    border-radius: 6px;
    background: rgba(10, 8, 6, 0.7) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    flex-shrink: 0;
}

.vr-icon-box img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.vr-value {
    margin-left: 14px;
    font-size: 1.25rem;
    color: #dcd6cd !important;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0,0,0,0.95);
    font-family: 'Cinzel', serif, sans-serif !important;
}

.vr-btn-close {
    background: linear-gradient(180deg, #705b41 0%, #443725 100%) !important;
    border: 1.5px solid #8e785b !important;
    border-radius: 4px !important;
    color: #f0e6d2 !important;
    padding: 8px 32px !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.45);
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vr-btn-close:hover {
    background: linear-gradient(180deg, #826b4e 0%, #51422d 100%) !important;
    border-color: #a48c6c !important;
    color: #ffffff !important;
}

.vr-btn-close:active {
    transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}

/* --- BRILLO DORADO DE SUBIDA DE NIVEL --- */
@keyframes levelUpGoldGlowAnim {
    0% {
        box-shadow: 0 0 0px 0px rgba(255, 215, 0, 0);
        filter: drop-shadow(0 0 0px rgba(255, 215, 0, 0)) brightness(1);
    }
    15% {
        box-shadow: 0 0 20px 6px rgba(255, 215, 0, 0.95);
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.95)) brightness(1.35);
    }
    35% {
        box-shadow: 0 0 35px 12px rgba(255, 215, 0, 0.85);
        filter: drop-shadow(0 0 22px rgba(255, 215, 0, 0.95)) brightness(1.5);
    }
    100% {
        box-shadow: 0 0 0px 0px rgba(255, 215, 0, 0);
        filter: drop-shadow(0 0 0px rgba(255, 215, 0, 0)) brightness(1);
    }
}

.level-up-gold-glow {
    animation: levelUpGoldGlowAnim 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* --- ANIMACIÓN DE TEMBLOR DE PANTALLA PARA JEFES --- */
.boss-shake-active {
    animation: bossScreenShake 0.7s cubic-bezier(.36,.07,.19,.97) both !important;
}

@keyframes bossScreenShake {
    10%, 90% {
        transform: translate3d(-4px, -3px, 0) scale(1.01);
    }
    20%, 80% {
        transform: translate3d(7px, 5px, 0) scale(1.02);
    }
    30%, 50%, 70% {
        transform: translate3d(-10px, -7px, 0) scale(0.99);
    }
    40%, 60% {
        transform: translate3d(10px, 7px, 0) scale(1.02);
    }
}

/* --- ESTILO DE FONDO DE HERRERÍA --- */
#screen-blacksmith {
    background: transparent !important;
}

body.screen-blacksmith-active {
    background-size: 135% 135% !important;
    background-position: 30% 40% !important;
}



.shop-mode-btn {
    padding: 6px 16px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.25);
    color: var(--color-text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.shop-mode-btn:hover {
    color: var(--color-text-main);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.shop-mode-btn.active {
    border-color: var(--color-gold) !important;
    background: rgba(226,177,60,0.15) !important;
    color: var(--color-gold) !important;
    box-shadow: 0 0 10px rgba(226, 177, 60, 0.15);
}

#screen-shop {
    background: transparent !important;
}

body.screen-shop-active {
    background-size: cover !important;
    background-position: center !important;
}

/* ==========================================================================
   WINDOW: FLOATING INVENTORY (LINEAGE II STYLE)
   ========================================================================== */
.inventory-window {
    position: absolute;
    top: 250px;
    left: 15px;
    width: 280px;
    background: rgba(22, 20, 18, 0.95);
    border: 3px solid #4a3e33;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    z-index: 9999;
    color: #dfd5c6;
    font-family: 'Outfit', sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inventory-window.hidden {
    display: none !important;
}

/* Header / Title bar */
.inventory-window-header {
    background: linear-gradient(180deg, #3d352b 0%, #25201a 100%);
    border-bottom: 2px solid #4a3e33;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
}

.inventory-window-title {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    font-weight: bold;
    color: #e2b13c;
    text-shadow: 1px 1px 2px #000;
    display: flex;
    align-items: center;
}

.inventory-window-controls {
    display: flex;
    gap: 6px;
}

.inv-control-btn {
    background: none;
    border: none;
    color: #a49682;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 5px;
    transition: color 0.2s, transform 0.1s;
}

.inv-control-btn:hover {
    color: #ef233c;
    transform: scale(1.1);
}

.inventory-window-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Equipment Grid Section */
.inventory-equipment-section {
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.inventory-equip-grid {
    display: grid;
    grid-template-columns: repeat(5, 36px);
    grid-template-rows: repeat(3, 36px);
    gap: 6px;
    justify-content: center;
    width: 100%;
}

/* Equip Slots */
.inv-equip-slot {
    width: 36px;
    height: 36px;
    border: 1.5px solid #3c342b;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.inv-equip-slot:hover {
    border-color: #e2b13c;
    background: rgba(226, 177, 60, 0.1);
}

.inv-equip-slot.active-equipped {
    border-color: #e2b13c;
    box-shadow: 0 0 8px rgba(226, 177, 60, 0.5);
    background: rgba(0, 0, 0, 0.4);
}

.slot-item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
    z-index: 2;
    position: relative;
    border-radius: 3px;
    box-sizing: border-box;
}

.slot-placeholder-icon {
    font-size: 0.95rem;
    color: rgba(223, 213, 198, 0.12);
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

/* Tabs row styles */
.inventory-tabs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #3c342b;
    padding-bottom: 4px;
}

.inventory-tabs {
    display: flex;
    gap: 4px;
}

.inv-tab {
    background: #1c1814;
    border: 1px solid #3c342b;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    color: #8c8070;
    padding: 4px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.inv-tab:hover {
    color: #e2b13c;
    background: #28221b;
}

.inv-tab.active {
    background: #2d261f;
    border-color: #e2b13c;
    color: #e2b13c;
    font-weight: 700;
}

.inventory-weight {
    font-size: 0.72rem;
    color: #a49682;
}

/* Items Grid Container */
.inventory-items-grid-container {
    height: 140px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #3c342b;
    border-radius: 4px;
    padding: 6px;
}

.inventory-items-grid-container::-webkit-scrollbar {
    width: 4px;
}
.inventory-items-grid-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.inventory-items-grid-container::-webkit-scrollbar-thumb {
    background: #4a3e33;
    border-radius: 2px;
}
.inventory-items-grid-container::-webkit-scrollbar-thumb:hover {
    background: #e2b13c;
}

.inventory-items-grid {
    display: grid;
    grid-template-columns: repeat(5, 36px);
    gap: 6px;
    justify-content: center;
}

/* Grid Slot Item cells */
.inv-grid-cell {
    width: 36px;
    height: 36px;
    border: 1.5px solid #2d2721;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background-color 0.2s;
    overflow: hidden;
}

.inv-grid-cell:hover {
    border-color: #9f8650;
    background: rgba(226, 177, 60, 0.08);
}

.inv-grid-cell.selected {
    border-color: #e2b13c !important;
    background: rgba(226, 177, 60, 0.15) !important;
    box-shadow: inset 0 0 6px rgba(226, 177, 60, 0.4);
}

.inv-cell-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
    border-radius: 3px;
    box-sizing: border-box;
}

.inv-cell-qty {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 0.65rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
}

.inv-cell-enchant {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 0.65rem;
    font-weight: bold;
    color: #4dfa32;
    text-shadow: 1px 1px 1px #000;
    z-index: 10;
}

/* Selection Detail Pane */
.inventory-detail-pane {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3c342b;
    border-radius: 4px;
    padding: 8px;
    min-height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inv-detail-empty {
    text-align: center;
    color: #7b7062;
    font-size: 0.78rem;
    font-style: italic;
}

.inv-detail-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inv-detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-detail-icon {
    width: 32px;
    height: 32px;
    border: 1px solid #4a3e33;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px;
}

.inv-detail-header-text {
    display: flex;
    flex-direction: column;
}

.inv-detail-name {
    font-weight: bold;
    font-size: 0.85rem;
    color: #e2b13c;
}

.inv-detail-stat {
    font-size: 0.72rem;
    color: #4dfa32;
}

.inv-detail-desc {
    font-size: 0.75rem;
    color: #b0a495;
    margin: 0;
    line-height: 1.25;
}

.inv-detail-actions {
    display: flex;
    justify-content: flex-end;
}

.inv-action-btn {
    padding: 4px 12px;
    font-size: 0.75rem;
    border-radius: 3px;
    font-family: 'Cinzel', serif;
}

/* --- PANTALLA 0: SELECCIÓN DE RANURAS DE PERSONAJE --- */
#screen-character-slots {
    background: linear-gradient(to bottom, rgba(8, 9, 12, 0.75) 0%, rgba(8, 9, 12, 0.9) 100%), 
                url('Esenarios/Creacion de Personaje/seleccion de personaje.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: flex-start;
    padding: 35px 20px;
}

.slots-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
    z-index: 2;
    background: rgba(8, 9, 12, 0.55);
    padding: 15px 30px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 800px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.slots-container {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    z-index: 2;
}

.slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

.character-slot-card {
    background: rgba(10, 12, 18, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    min-height: 240px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.character-slot-card:hover {
    border-color: rgba(226, 177, 60, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(226, 177, 60, 0.15);
}

.character-slot-card.active {
    border-color: var(--color-gold);
    background: rgba(226, 177, 60, 0.08);
    box-shadow: 0 0 20px rgba(226, 177, 60, 0.3);
}

.slot-number {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.slot-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 12px;
}

.slot-empty-text {
    font-style: italic;
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.slot-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    object-fit: cover;
    object-position: 40% 0%;
    box-shadow: 0 0 10px rgba(226, 177, 60, 0.2);
}

.slot-char-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text-main);
    font-weight: bold;
}

.slot-char-details {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.slots-actions-panel {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    min-height: 50px;
}

.btn-slot-action {
    min-width: 220px;
    padding: 14px 20px !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
}

/* --- BOTÓN FLOTANTE Y ARRASTRABLE DE INVENTARIO --- */
.floating-inventory-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    cursor: grab;
    user-select: none;
    transition: transform 0.2s ease, filter 0.2s ease;
    width: 60px;
    height: 60px;
}

.floating-inventory-container:hover {
    transform: scale(1.08);
    filter: brightness(1.15) drop-shadow(0 0 10px rgba(226, 177, 60, 0.5));
}

.floating-inventory-container:active {
    cursor: grabbing;
    transform: scale(0.96);
}

.floating-inventory-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- MMORPG CHAT PANEL STYLES --- */
.chat-window {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 420px;
    height: 320px;
    z-index: 9998;
    background: rgba(10, 12, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

.chat-window-header {
    background: rgba(22, 28, 38, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
}

.chat-window-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-gold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.chat-control-btn {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 6px;
    transition: var(--transition-smooth);
}

.chat-control-btn:hover {
    color: var(--color-text-main);
}

.chat-tabs {
    display: flex;
    background: rgba(8, 9, 12, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 10px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: var(--transition-smooth);
    text-transform: uppercase;
}

.chat-tab-btn:hover {
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.02);
}

.chat-tab-btn.active {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
    background: rgba(255, 255, 255, 0.03);
}

.chat-messages-container {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.chat-messages-log {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
    overflow-y: auto;
    font-size: 0.78rem;
    line-height: 1.35;
    max-height: 180px;
    padding-right: 4px;
}

.chat-message {
    word-break: break-word;
}

.chat-time {
    color: rgba(255, 255, 255, 0.35);
    margin-right: 6px;
    font-family: monospace;
}

.msg-prefix-all {
    color: var(--color-gold);
    font-weight: bold;
    margin-right: 4px;
}

.msg-prefix-party {
    color: #00b4d8;
    font-weight: bold;
    margin-right: 4px;
}

.msg-prefix-clan {
    color: #4dfa32;
    font-weight: bold;
    margin-right: 4px;
}

.chat-user {
    color: var(--color-text-main);
    font-weight: 600;
    margin-right: 4px;
}

.chat-user.is-me {
    color: #ffb703;
    font-weight: 700;
}

.msg-text-all {
    color: #e2e8f0;
}

.msg-text-party {
    color: #e0f2fe;
}

.msg-text-clan {
    color: #f0fdf4;
}

.chat-input-area {
    display: flex;
    align-items: center;
    background: rgba(8, 9, 12, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 10px;
    gap: 8px;
}

.chat-channel-label {
    font-size: 0.72rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    user-select: none;
    text-transform: uppercase;
}

.chat-channel-label.all {
    background: rgba(223, 177, 60, 0.15);
    color: var(--color-gold);
}

.chat-channel-label.party {
    background: rgba(0, 180, 216, 0.15);
    color: #00b4d8;
}

.chat-channel-label.clan {
    background: rgba(77, 250, 50, 0.15);
    color: #4dfa32;
}

#chat-text-input {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--color-text-main);
    font-size: 0.78rem;
    outline: none;
    transition: var(--transition-smooth);
}

#chat-text-input:focus {
    border-color: rgba(223, 177, 60, 0.5);
}

#btn-chat-send {
    background: linear-gradient(135deg, #bd8a20 0%, #dfb13c 100%);
    border: none;
    color: #121008;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: var(--transition-smooth);
}

#btn-chat-send:hover {
    box-shadow: 0 0 8px rgba(223, 177, 60, 0.4);
    transform: scale(1.02);
}

.chat-collapsed-bubble {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(10, 12, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-gold);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 9998;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(223, 177, 60, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.chat-collapsed-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(223, 177, 60, 0.35);
    color: var(--color-text-main);
}

.chat-collapsed-bubble:active {
    transform: scale(0.95);
}

.chat-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    border-radius: 10px;
    padding: 1px 5px;
    border: 1px solid #1e293b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* --- WIDGET DE GRUPO EN SIDEBAR Y LFG FINDER --- */
.party-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 15px;
    padding-top: 12px;
}

.party-panel h3 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.sidebar-party-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.party-member-row {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.party-member-row.is-hero {
    border-color: rgba(223, 177, 60, 0.25);
    background: rgba(223, 177, 60, 0.03);
}

.party-member-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
}

.party-member-name {
    font-weight: bold;
    color: var(--color-text-main);
}

.party-member-class {
    font-size: 0.65rem;
}

.party-member-hp-bar-bg {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}

.party-member-hp-bar {
    height: 100%;
    background: #10b981;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.party-finder-content {
    display: flex;
    flex-direction: column;
    padding: 15px;
    height: calc(100% - 37px);
    overflow: hidden;
    gap: 15px;
}

.party-finder-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.parties-list-container, .current-party-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.parties-list-scroll {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    padding-right: 5px;
}

.party-finder-card {
    background: rgba(22, 28, 38, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-smooth);
}

.party-finder-card:hover {
    border-color: rgba(223, 177, 60, 0.25);
    background: rgba(22, 28, 38, 0.7);
}

.party-finder-card-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.party-finder-card-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-text-main);
}

.party-finder-card-leader {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.party-finder-card-members {
    font-size: 0.7rem;
    color: #38bdf8;
    margin-top: 2px;
}

.party-finder-card-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.party-finder-card-size {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-gold);
}

.current-party-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
}

.party-members-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
    overflow-y: auto;
    flex-grow: 1;
}

/* --- PREMIUM PARTY LOBBY SLOT --- */
.party-lobby-slot {
    background: rgba(14, 18, 26, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 310px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: var(--transition-smooth);
}

.party-lobby-slot:hover {
    border-color: rgba(226, 177, 60, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.party-lobby-slot.is-hero {
    border-color: rgba(226, 177, 60, 0.35);
    box-shadow: 0 0 15px rgba(226, 177, 60, 0.12);
    background: rgba(226, 177, 60, 0.02);
}

.party-lobby-slot.empty-slot {
    border: 1px dashed rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.2);
    justify-content: center;
}

.party-lobby-avatar-container {
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.party-lobby-avatar-container img {
    height: 100%;
    max-height: 170px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
    animation: floatingChar 3s ease-in-out infinite;
}

.party-lobby-slot.empty-slot .party-lobby-avatar-container {
    background: transparent;
    border: none;
    height: auto;
    margin-bottom: 12px;
}

.party-lobby-placeholder-icon {
    font-size: 2.5rem;
    color: rgba(226, 177, 60, 0.2);
    animation: pulseLobbyGlow 2s ease-in-out infinite;
}

@keyframes pulseLobbyGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); filter: drop-shadow(0 0 0px rgba(226, 177, 60, 0)); }
    50% { opacity: 0.7; transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(226, 177, 60, 0.3)); }
}

.party-lobby-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}

.party-lobby-name {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.party-lobby-class-lvl {
    font-size: 0.7rem;
    font-weight: bold;
}

.party-lobby-hp {
    width: 100%;
    margin-top: 3px;
}

.party-lobby-hp-bar-bg {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
    margin-top: 2px;
}

.party-lobby-hp-bar {
    height: 100%;
    background: #10b981;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.btn-primary-sm {
    background: linear-gradient(135deg, #bd8a20 0%, #dfb13c 100%);
    border: none;
    color: #121008;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.btn-primary-sm:hover {
    box-shadow: 0 0 8px rgba(223, 177, 60, 0.3);
    transform: scale(1.02);
}

.btn-secondary-sm {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-main);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.btn-secondary-sm:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* --- INTEGRACIÓN DE GRUPO EN COMBATE (ESTILO PREMIUM TÁCTICO) --- */
#heroes-party-arena-container {
    display: flex;
    align-items: flex-end;
    position: relative;
    gap: 0 !important;
}

.hero-combatant {
    position: relative;
    z-index: 10;
    width: 115px !important;
}

.hero-combatant .sprite-container {
    width: 95px !important;
    height: 95px !important;
}

.party-combatant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 75px !important;
    position: relative;
    transition: var(--transition-smooth);
}

.party-combatant .sprite-container {
    width: 62px !important;
    height: 62px !important;
}

.party-combatant img {
    border-color: rgba(223, 177, 60, 0.45) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

.party-combatant .combatant-info {
    width: 100%;
    text-align: center;
}

.party-combatant .combatant-name {
    font-size: 0.6rem !important;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Formación escalonada (Staggered depth) */
/* Compañero 1 */
.party-combatant:nth-child(2) {
    transform: translateY(-8px) scale(0.9);
    z-index: 8;
    margin-right: -12px;
}
/* Compañero 2 */
.party-combatant:nth-child(3) {
    transform: translateY(-18px) scale(0.82);
    z-index: 6;
    margin-right: -12px;
}
/* Compañero 3 */
.party-combatant:nth-child(4) {
    transform: translateY(-3px) scale(0.95);
    z-index: 9;
    margin-right: -12px;
}
/* Compañero 4 */
.party-combatant:nth-child(5) {
    transform: translateY(-14px) scale(0.86);
    z-index: 7;
    margin-right: -12px;
}

/* --- ENEMIGOS EN COMBATE (ESTILO PREMIUM TÁCTICO) --- */
#enemies-arena-container {
    display: flex;
    align-items: flex-end;
    position: relative;
    gap: 0 !important;
}

.enemy-combatant {
    position: relative;
    width: 110px !important;
    transition: var(--transition-smooth);
}

.enemy-combatant .sprite-container {
    width: 90px !important;
    height: 90px !important;
}

/* Formación escalonada enemigos */
.enemy-combatant:nth-child(1) {
    z-index: 10;
    transform: scale(1.02);
}
.enemy-combatant:nth-child(2) {
    z-index: 8;
    transform: translateY(-12px) scale(0.9);
    margin-left: -18px;
}
.enemy-combatant:nth-child(3) {
    z-index: 9;
    transform: translateY(-4px) scale(0.96);
    margin-left: -18px;
}

/* --- TARGET SELECTION HIGHLIGHTS --- */
.enemy-combatant, .party-combatant, .hero-combatant {
    cursor: pointer;
}

.enemy-combatant:hover .sprite-container img, 
.party-combatant:hover .sprite-container img, 
.hero-combatant:hover .sprite-container img {
    filter: brightness(1.2);
}

.selected-target .sprite-container img {
    border-color: #ffd60a !important; /* Oro pulido */
    box-shadow: 0 0 15px rgba(255, 214, 10, 0.9), 0 5px 15px rgba(0, 0, 0, 0.6) !important;
    animation: targetPulse 1.5s infinite alternate !important;
}

.selected-support .sprite-container img {
    border-color: #c084fc !important; /* Púrpura Premium */
    box-shadow: 0 0 15px rgba(192, 132, 252, 0.9), 0 5px 15px rgba(0, 0, 0, 0.6) !important;
    animation: supportPulse 1.5s infinite alternate !important;
}

@keyframes targetPulse {
    from { box-shadow: 0 0 8px rgba(255, 214, 10, 0.4), 0 5px 15px rgba(0, 0, 0, 0.6); }
    to { box-shadow: 0 0 20px rgba(255, 214, 10, 1), 0 5px 15px rgba(0, 0, 0, 0.6); }
}

@keyframes supportPulse {
    from { box-shadow: 0 0 8px rgba(192, 132, 252, 0.4), 0 5px 15px rgba(0, 0, 0, 0.6); }
    to { box-shadow: 0 0 20px rgba(192, 132, 252, 1), 0 5px 15px rgba(0, 0, 0, 0.6); }
}

/* ==========================================================================
   PANTALLA DE INICIO DE SESIÓN / AUTENTICACIÓN
   ========================================================================== */
#screen-login {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 480px;
    padding: 30px;
    text-align: center;
}

#screen-login.active {
    display: flex;
}

.login-card {
    background: rgba(10, 11, 15, 0.9);
    border: 1px solid rgba(226, 177, 60, 0.25);
    border-radius: 12px;
    padding: 35px 30px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.95), 0 0 25px rgba(226, 177, 60, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.fantasy-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.fantasy-input-group label {
    font-size: 0.8rem;
    font-family: 'Cinzel', serif;
    color: var(--color-gold);
    letter-spacing: 1px;
    font-weight: bold;
}

.fantasy-input {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 12px 14px;
    color: #e2e8f0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.fantasy-input:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 10px rgba(226, 177, 60, 0.3);
    background: rgba(0, 0, 0, 0.75);
}

.login-logo {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.2rem;
    color: var(--color-gold);
    text-shadow: 0 0 10px rgba(226, 177, 60, 0.4);
    margin: 0 0 5px 0;
    letter-spacing: 2px;
}

.login-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

/* ==========================================================================
   SISTEMA DE OLIMPIADAS
   ========================================================================== */
#screen-olympiad {
    display: none;
    flex-direction: column;
    padding: 20px;
    height: 100%;
    overflow-y: auto;
}

#screen-olympiad.active {
    display: flex;
}

/* Tabla del Ranking */
.olympiad-ranking-table {
    margin-top: 10px;
}

.olympiad-ranking-table th {
    font-family: 'Cinzel', serif;
    color: var(--color-gold);
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 2px solid rgba(226, 177, 60, 0.3);
    padding: 10px 8px;
}

.olympiad-ranking-table td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.olympiad-ranking-table tr {
    transition: background-color 0.2s ease;
}

.olympiad-ranking-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.olympiad-ranking-table tr.my-ranking-row {
    background: rgba(226, 177, 60, 0.08) !important;
    border: 1px solid rgba(226, 177, 60, 0.3);
}

/* Medallas de Ranking */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.8rem;
    font-family: 'Cinzel', serif;
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #ffe066, #f5a623);
    color: #1a1d26;
    box-shadow: 0 0 8px #f5a623;
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #1a1d26;
    box-shadow: 0 0 8px #cbd5e1;
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #ddb37c, #b45309);
    color: #fff;
    box-shadow: 0 0 8px #b45309;
}

/* Badges de Estado */
.badge-status-offline {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid #ef4444 !important;
    color: #f87171 !important;
}

.badge-status-searching {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid #3b82f6 !important;
    color: #60a5fa !important;
    animation: searchPulse 1.5s infinite ease-in-out;
}

.badge-status-combat {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid #f59e0b !important;
    color: #fbbf24 !important;
}

/* Roster list elements */
.roster-player-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.roster-player-card:hover {
    border-color: rgba(226, 177, 60, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.roster-player-name {
    font-weight: bold;
    color: var(--color-text-main);
    font-size: 0.9rem;
}

.roster-player-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Animations */
@keyframes searchPulse {
    0% { opacity: 0.6; box-shadow: 0 0 2px rgba(59, 130, 246, 0.2); }
    50% { opacity: 1; box-shadow: 0 0 8px rgba(59, 130, 246, 0.6); }
    100% { opacity: 0.6; box-shadow: 0 0 2px rgba(59, 130, 246, 0.2); }
}

@keyframes matchPulse {
    0% { transform: scale(1); box-shadow: 0 0 30px rgba(226, 177, 60, 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 0 45px rgba(226, 177, 60, 0.7); }
    100% { transform: scale(1); box-shadow: 0 0 30px rgba(226, 177, 60, 0.4); }
}


/* Enchant Animations */
@keyframes enchantSuccessFlash {
    0% { filter: brightness(1); transform: scale(1); box-shadow: 0 0 0px rgba(0,0,0,0); }
    30% { filter: brightness(2) contrast(1.2); transform: scale(1.1); box-shadow: 0 0 30px #4ade80, inset 0 0 15px #4ade80; border-color: #4ade80; }
    70% { filter: brightness(2) contrast(1.2); transform: scale(1.1); box-shadow: 0 0 40px #4ade80, inset 0 0 25px #4ade80; border-color: #4ade80; }
    100% { filter: brightness(1); transform: scale(1); box-shadow: 0 0 0px rgba(0,0,0,0); border-color: #63503c; }
}

@keyframes enchantFailShatter {
    0% { filter: grayscale(0) brightness(1); transform: translate(0, 0); }
    10% { transform: translate(-3px, 3px); }
    20% { transform: translate(3px, -3px); }
    30% { transform: translate(-3px, -3px); }
    40% { filter: grayscale(1) brightness(0.5); transform: translate(3px, 3px); box-shadow: inset 0 0 20px #ef4444; border-color: #ef4444; }
    100% { filter: grayscale(1) brightness(0); transform: translate(0, 0); opacity: 0; }
}

.anim-enchant-success {
    animation: enchantSuccessFlash 1.5s ease-in-out forwards;
}

.anim-enchant-fail {
    animation: enchantFailShatter 1.5s ease-in forwards;
}

/* L2 Weapon Glow Animation */
@keyframes l2-weapon-glow {
    0% {
        filter: drop-shadow(0 0 2px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.8)) 
                drop-shadow(0 0 6px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.6))
                drop-shadow(0 0 var(--glow-blur-1, 10px) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.4));
    }
    100% {
        filter: drop-shadow(0 0 4px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 1)) 
                drop-shadow(0 0 10px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.9))
                drop-shadow(0 0 var(--glow-blur-1, 15px) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.7))
                drop-shadow(0 0 var(--glow-blur-2, 25px) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.5));
    }
}

.weapon-glow-anim {
    animation: l2-weapon-glow 1.2s infinite alternate ease-in-out;
}

@keyframes l2-weapon-lightning {
    0% { filter: drop-shadow(0 0 4px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.7)) drop-shadow(0 0 var(--glow-blur-1) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.5)); }
    40% { filter: drop-shadow(0 0 8px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 1)) drop-shadow(0 0 var(--glow-blur-2) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.8)); }
    70% { filter: drop-shadow(0 0 4px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.7)) drop-shadow(0 0 var(--glow-blur-1) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.5)); }
    72% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1)) drop-shadow(0 0 calc(var(--glow-blur-2) * 1.2) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 1)) brightness(1.4); }
    75% { filter: drop-shadow(0 0 4px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.7)) drop-shadow(0 0 var(--glow-blur-1) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.5)); }
    77% { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)) drop-shadow(0 0 calc(var(--glow-blur-2) * 1.5) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 1)) brightness(1.7); }
    80%, 100% { filter: drop-shadow(0 0 4px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.7)) drop-shadow(0 0 var(--glow-blur-1) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.5)); }
}

@keyframes l2-weapon-heavy-lightning {
    0% { filter: drop-shadow(0 0 6px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.8)) drop-shadow(0 0 var(--glow-blur-1) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.6)); }
    30% { filter: drop-shadow(0 0 12px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 1)) drop-shadow(0 0 var(--glow-blur-2) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.9)); }
    40% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) drop-shadow(0 0 calc(var(--glow-blur-2) * 1.5) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 1)) brightness(1.5); }
    45% { filter: drop-shadow(0 0 6px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.8)) drop-shadow(0 0 var(--glow-blur-1) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.6)); }
    70% { filter: drop-shadow(0 0 12px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 1)) drop-shadow(0 0 var(--glow-blur-2) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.9)); }
    72% { filter: drop-shadow(0 0 25px rgba(255, 255, 255, 1)) drop-shadow(0 0 calc(var(--glow-blur-2) * 1.8) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 1)) brightness(1.8); }
    74% { filter: drop-shadow(0 0 6px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.8)) drop-shadow(0 0 var(--glow-blur-1) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.6)); }
    77% { filter: drop-shadow(0 0 25px rgba(255, 255, 255, 1)) drop-shadow(0 0 calc(var(--glow-blur-2) * 2) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 1)) brightness(2); }
    80%, 100% { filter: drop-shadow(0 0 6px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.8)) drop-shadow(0 0 var(--glow-blur-1) rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.6)); }
}

.weapon-lightning-anim { animation: l2-weapon-lightning 2.5s infinite linear; }
.weapon-heavy-lightning-anim { animation: l2-weapon-heavy-lightning 1.8s infinite linear; }

.skill-cooldown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,1), 1px 1px 2px rgba(0,0,0,1);
    z-index: 10;
    border-radius: 8px;
    pointer-events: none;
}

/* ==========================================================================
   QUICKBAR (LINEAGE 2 STYLE)
   ========================================================================== */
.quickbar-l2 {
    transition: opacity 0.3s ease;
}
.quickbar-l2.hidden {
    display: none !important;
}
.quickbar-slot {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.quickbar-slot:hover {
    border-color: #e2b13c;
    box-shadow: inset 0 0 8px rgba(226, 177, 60, 0.4);
}
.quickbar-slot.drag-over {
    border-color: #4ade80 !important;
    box-shadow: inset 0 0 15px rgba(74, 222, 128, 0.5) !important;
}
.quickbar-slot img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    pointer-events: none;
}
.quickbar-slot .item-qty-badge {
    position: absolute;
    bottom: -2px;
    right: 2px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    pointer-events: none;
    z-index: 5;
}
.quickbar-slot .cooldown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    font-family: 'Outfit', sans-serif;
    pointer-events: none;
    z-index: 4;
}
.quickbar-slot .cooldown-pie {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: conic-gradient(rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 0%, transparent 0%, transparent 100%);
    pointer-events: none;
    z-index: 3;
}

.escape-cast-bar-container {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 12px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #2d2721;
    border-radius: 4px;
    overflow: hidden;
    z-index: 100;
}
.escape-cast-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #38bdf8, #7dd3fc);
    transition: width 0.1s linear;
}
.escape-cast-text {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: #fff;
    white-space: nowrap;
    text-shadow: 1px 1px 2px #000;
}

/* Quickbar Vertical Layout */
.quickbar-l2.quickbar-vertical { flex-direction: column !important; }
.quickbar-l2.quickbar-vertical #quickbar-handle { width: 100% !important; height: 16px !important; flex-direction: row !important; border-right: none !important; border-bottom: 1px solid #000 !important; background: linear-gradient(to bottom, #2a251d, #1a1611) !important; padding: 0 4px !important; }
.quickbar-l2.quickbar-vertical #quickbar-handle div { width: 100% !important; height: 4px !important; border-top: 1px dotted rgba(226, 177, 60, 0.3) !important; border-bottom: 1px dotted rgba(226, 177, 60, 0.3) !important; border-left: none !important; border-right: none !important; margin: 0 4px !important; }
.quickbar-l2.quickbar-vertical #quickbar-handle .fa-caret-up { transform: rotate(-90deg); }
.quickbar-l2.quickbar-vertical #quickbar-handle .fa-caret-down { transform: rotate(-90deg); }
.quickbar-l2.quickbar-vertical #quickbar-slots-wrapper { flex-direction: column !important; }
.quickbar-l2.quickbar-vertical #quickbar-controls { width: 100% !important; height: 20px !important; flex-direction: row !important; border-left: none !important; border-top: 1px solid #000 !important; background: linear-gradient(to bottom, #1a1611, #2a251d) !important; padding: 2px !important; }

.inv-grid-cell .cooldown-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 1.2rem; pointer-events: none; z-index: 10; text-shadow: 1px 1px 2px #000; }


/* --- Cast Bar --- */
.cast-bar-container {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 10;
}
.cast-bar-container.hidden {
    display: none;
}
.cast-bar {
    border-radius: 3px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.4);
}
@keyframes castBarFill {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* ==========================================
   QUICKBAR (BARRA DE HABILIDADES ESTILO L2)
   ========================================== */
#quickbar-container {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10005;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(14, 18, 26, 0.94);
    border: 1px solid rgba(226, 177, 60, 0.4);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), 0 0 15px rgba(226, 177, 60, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    user-select: none;
}

#quickbar-handle {
    cursor: move;
    color: var(--color-gold, #e2b13c);
    padding: 6px 6px;
    font-size: 1.1rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}
#quickbar-handle:hover {
    opacity: 1.0;
}

.quickbar-slots-wrapper {
    display: flex;
    gap: 6px;
}

.quickbar-vertical .quickbar-slots-wrapper {
    flex-direction: column;
}

.quickbar-slot {
    position: relative;
    width: 44px;
    height: 44px;
    background: rgba(8, 11, 16, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
}

.quickbar-slot:hover {
    border-color: var(--color-gold, #e2b13c);
    box-shadow: 0 0 10px rgba(226, 177, 60, 0.4);
}

.quickbar-slot.drag-over {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.slot-key {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.68rem;
    font-weight: bold;
    color: var(--color-gold, #e2b13c);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    z-index: 3;
    pointer-events: none;
    font-family: 'Cinzel', serif;
}

.slot-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slot-content img, .slot-content i {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.quickbar-slot .cooldown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    color: #ffd166;
    font-weight: bold;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    font-family: 'Outfit', sans-serif;
    pointer-events: none;
}

.quickbar-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 4px;
}

.quickbar-controls button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-muted, #a3a3a3);
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.quickbar-controls button:hover {
    color: var(--color-gold, #e2b13c);
    border-color: var(--color-gold, #e2b13c);
    background: rgba(226, 177, 60, 0.1);
}