:root {
    --dmt-pure: #FF9F00;
    --premium-cyan: #00e5ff;
    --legend-gold: #FFD700;
}

.text-dmt { color: var(--dmt-pure); }
.bg-dmt-pure { background-color: var(--dmt-pure) !important; }
.neon-text { text-shadow: 0 0 15px rgba(255, 159, 0, 0.4); }

/* --- EFECTOS DE RANGO --- */
.rank-ghost { color: #ffffff; opacity: 0.8; }
.rank-hunter { color: #e0e0e0; text-shadow: 0 0 8px rgba(255,255,255,0.2); }
.rank-pupil { color: var(--dmt-pure); text-shadow: 0 0 15px rgba(255, 159, 0, 0.5); }

/* Funded Legend: Glow Cyan Pulsante */
.rank-legend { 
    color: var(--premium-cyan); 
    text-shadow: 0 0 20px var(--premium-cyan);
    animation: glow-pulse 2s infinite alternate;
}

/* Market Architect: Shimmer Dorado con compatibilidad total */
.rank-architect {
    background: linear-gradient(90deg, #ffd700, #fff, #ffd700);
    background-size: 200% auto;
    -webkit-background-clip: text; /* Para Safari y Chrome antiguos */
    background-clip: text;         /* Propiedad estándar */
    -webkit-text-fill-color: transparent;
    animation: shimmer-gold 3s linear infinite;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
}

@keyframes glow-pulse {
    from { opacity: 0.8; text-shadow: 0 0 10px var(--premium-cyan); }
    to { opacity: 1; text-shadow: 0 0 30px var(--premium-cyan), 0 0 50px rgba(0, 229, 255, 0.4); }
}

@keyframes shimmer-gold { to { background-position: 200% center; } }

#user-xp-current {
    text-shadow: 0 0 10px rgba(255, 152, 0, 0.3);
    letter-spacing: -1px;
}

/* Opcional: Un pequeño efecto por si quieres que parezca una terminal */
.font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Animación sutil de pulso para la barra cuando está cargando */
#xp-bar-fill {
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
    position: relative;
}

/* Efecto de brillo que recorre la barra */
#xp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine-bar 3s infinite;
}

@keyframes shine-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* UI */
.glass { background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.05); }
.nav-btn { width: 100%; text-align: left; padding: 12px; border-radius: 12px; font-size: 13px; color: #666; transition: 0.3s; text-transform: uppercase; }
.nav-btn:hover { background: rgba(255,255,255,0.05); color: white; }
.nav-btn.active { background-color: rgba(255, 255, 255, 0.08); color: white; font-weight: bold; }
.txt-tiny { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; }
.news-ping { animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; background-color: var(--dmt-pure); }

@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

.glow-card-container { position: relative; width: 380px; padding: 2px; background: rgba(255, 255, 255, 0.05); border-radius: 30px; overflow: hidden; }
.glow-card-container::before { content: ''; position: absolute; width: 200%; height: 200%; background: conic-gradient(transparent, transparent, transparent, var(--dmt-pure)); animation: rotateFlow 4s linear infinite; top: -50%; left: -50%; }
@keyframes rotateFlow { 100% { transform: rotate(360deg); } }
.glow-card-content { position: relative; z-index: 1; border-radius: 28px; }

.membership-tag { display: block !important; min-height: 18px; }
.badge-premium { color: var(--premium-cyan); background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.3); }
.badge-free { color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.05); }
.badge-admin { color: var(--legend-gold); background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); animation: glow-pulse 2s infinite alternate; }

/* --- SISTEMA DE NOTIFICACIONES --- */
#dmt-notifications-viewport {
    position: fixed;
    bottom: 24px;
    right: 24px;
    /* Un z-index de 9999 asegura que esté por encima de cualquier modal */
    z-index: 10000 !important; 
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; /* Para que puedas hacer clic a través del espacio vacío */
}

/* Y asegúrate de que cada notificación individual también sea interactiva */
.dmt-notification {
    pointer-events: auto; 
}
/* --- SISTEMA DE BOTONES DMT --- */

.btn-dmt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px; /* Más pequeño para que no se vea ordinario */
    border-radius: 10px;
    font-size: 10px; /* Tamaño reducido */
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    height: fit-content;
}

/* Variante Ghost: La que usaremos para Perfil */
.btn-dmt-ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.btn-dmt-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--dmt-pure); /* Tu variable naranja */
    color: #ffffff;
}

/* Variante Primary: Para botones de acción real (Guardar/Comprar) */
.btn-dmt-primary {
    background: var(--dmt-pure);
    color: #000;
}

.btn-dmt-primary:hover {
    box-shadow: 0 0 20px rgba(255, 159, 0, 0.3);
    transform: translateY(-1px);
}

/* --- SISTEMA RESPONSIVE UNIFICADO --- */

/* Transición suave para el Sidebar (siempre activa) */
#sidebar {
    transition: transform 0.3s ease-in-out;
}

/* Oculto en móvil, visible en desktop */
.sidebar-badge {
    display: none;
}

@media (max-width: 768px) {
    #sidebar nav {
        margin-top: 80px; /* Empuja los botones hacia abajo para que no los tape el borde superior */
    }
    .sidebar-badge {
        display: block;
    }
    main {
        padding-bottom: 80px !important; /* Espacio de seguridad para el final del scroll */
    }
    /* 1. Ajuste de espacios para que quepa en el iPhone */
    section {
        padding: 40px 20px 60px 20px !important; 
    }
    
    /* 2. Títulos ajustados (no se cortan) */
    h2 {
        font-size: 2.2rem !important; 
        line-height: 1.1;
    }

    /* 3. Comportamiento del Menú Lateral en móvil */
    .-translate-x-full {
        transform: translateX(-100%);
    }
    
    .translate-x-0 {
        transform: translateX(0);
    }

    /* Sombra para que el menú resalte sobre el contenido */
    aside {
        box-shadow: 20px 0 50px rgba(0,0,0,0.8);
    }

    /* 4. Dashboard: Tarjetas una debajo de otra */
    .grid {
        gap: 15px !important;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    #sidebar {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #sidebar nav {
        margin-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* --- ESTILOS DEL MODAL DMT --- */
.dmt-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.dmt-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.dmt-modal-content {
    position: relative;
    background: rgba(255, 255, 255, 0.03); /* Efecto Glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 1.25rem;
    max-width: 380px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Cuando el modal está activo */
.dmt-modal-overlay.active {
    opacity: 1;
}
.dmt-modal-overlay.active .dmt-modal-content {
    transform: scale(1);
}

.modal-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.modal-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
}

.modal-text {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* Botones Base */
.btn-modal {
    padding: 0.6rem 1.5rem;
    border-radius: 0.6rem;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

/* Botón Cancelar */
.btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Botón Aceptar (DMT Orange) */
.btn-confirm {
    background: #FF9800; /* Tu color naranja */
    color: #000000 !important; /* Texto negro para contraste */
}
.btn-confirm:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.4);
}

/* Utilidad para ocultar */
.hidden { display: none !important; }

/* --- ESTILO UNIFICADO PARA AMBOS BOTONES --- */
.btn-sidebar-login, 
.btn-sidebar-logout {
    width: 100%;
    height: 48px; /* Un poco más de altura ayuda a que el texto largo no se vea apretado */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.2rem; 
    border-radius: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.65rem; /* Bajamos a 0.65rem para dar más espacio al ícono */
    transition: all 0.3s ease;
    white-space: nowrap; 
    gap: 10px; /* <--- ESTO separa el texto del ícono automáticamente */
    cursor: pointer;
}

/* Si quieres que el texto específicamente tenga un margen a la derecha */
.btn-sidebar-login span, 
.btn-sidebar-logout span {
    margin-right: auto; /* Empuja el ícono al extremo derecho pero respetando el gap */
}

/* Colores Login */
.btn-sidebar-login {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    color: #FF9800;
}

.btn-sidebar-login:hover {
    background: #FF9800;
    color: #000;
}

/* Colores Logout */
.btn-sidebar-logout {
    background: rgba(255, 50, 50, 0.1);
    border: 1px solid rgba(255, 50, 50, 0.3);
    color: #ff5555;
    pointer-events: auto !important;
}

.btn-sidebar-logout:hover {
    background-color: #ff5252 !important;
    color: #ffffff !important;
    border-color: #ff5252 !important;
}

/* Evitar que los elementos internos bloqueen el mouse */
.btn-sidebar-login *, 
.btn-sidebar-logout * {
    pointer-events: none;
}

/* Estado Activo para las Killzones */
.zone-active {
    background: rgba(255, 152, 0, 0.05) !important;
    border-color: rgba(255, 152, 0, 0.2) !important;
    transform: translateY(-2px);
}

.zone-active .led-indicator {
    background-color: #FF9800 !important;
    box-shadow: 0 0 10px #FF9800, 0 0 20px rgba(255, 152, 0, 0.4);
}

.zone-active span {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* --- CALENDARIO DE CONSISTENCIA --- */
.day-square {
    aspect-ratio: 1/1;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative; 
    overflow: hidden;
}

/* 1. REGLA MAESTRA DE HERENCIA: 
   Hacemos que el número siempre herede el color del contenedor padre */
.day-square .day-number {
    color: inherit; 
}

/* SISTEMA: Ocultar activo en móvil por defecto */
.day-square span[id^="asset-tag-"] {
    display: none;
    pointer-events: none;
    color: inherit; /* También hereda el color negro cuando el padre lo sea */
}

/* Día Seleccionado */
.active-day {
    border: 2px solid var(--dmt-pure) !important;
    transform: scale(1.15);
    z-index: 10;
    box-shadow: 0 0 15px rgba(255, 159, 0, 0.4);
}

/* 2. COLORES Y ESTADOS: 
   Al poner 'color: #000 !important' aquí, gracias al 'inherit' de arriba, 
   el número se pondrá negro automáticamente sin usar JS. */
.day-lesson { background-color: var(--dmt-pure) !important; color: #000 !important; font-weight: 800; }
.day-win    { background-color: rgba(34, 197, 94, 0.6) !important; color: #000 !important; font-weight: 800; }
.day-loss   { background-color: rgba(239, 68, 68, 0.6) !important; color: #000 !important; font-weight: 800; } 
.day-be     { background-color: rgba(156, 163, 175, 0.6) !important; color: #000 !important; font-weight: 800; }

/* Efectos 45 Grados Mixtos */
.day-mixed-win  { background: linear-gradient(45deg, var(--dmt-pure) 50%, #22c55e 50%) !important; color: #000 !important; }
.day-mixed-loss { background: linear-gradient(45deg, var(--dmt-pure) 50%, #ef4444 50%) !important; color: #000 !important; }
.day-mixed-be   { background: linear-gradient(45deg, var(--dmt-pure) 50%, #9ca3af 50%) !important; color: #000 !important; }

.day-square:hover { transform: scale(1.1); border-color: rgba(255, 255, 255, 0.3); z-index: 10; }

/* SISTEMA: Responsividad para Escritorio */
@media (min-width: 768px) {
    .day-square span[id^="asset-tag-"] {
        display: block;
    }
    
    .day-square .day-number {
        transform: translateY(-4px);
    }
}

/* --- PREVIEW DE TRADE --- */
.trade-preview {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 15;
    pointer-events: none; /* El click lo maneja el botón expand */
    background-color: #0a0a0a; /* Fallback mientras carga */
}
 
/* El botón de expand (lupa) encima del preview */
.trade-expand-btn {
    border-radius: inherit;
    cursor: pointer;
    backdrop-filter: blur(2px);
}
 
/* Ícono de cámara en esquina */
.trade-camera-icon {
    transition: opacity 0.2s ease;
}
 
/* Cuando el día tiene preview, el número queda encima */
.has-preview .day-number {
    position: relative;
    z-index: 25;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
 
.has-preview .asset-tag {
    z-index: 25;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

/* ------------------------------------------
   LIGHTBOX - VISOR AMPLIADO DE TRADES
   ------------------------------------------ */
#dmt-lightbox {
    animation: lightbox-in 0.2s ease forwards;
}
 
#dmt-lightbox.hidden {
    display: none !important;
}
 
@keyframes lightbox-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
 
#lightbox-img {
    box-shadow: 0 0 80px rgba(255, 159, 0, 0.1);
}

/* Contenedor del Ticker */
.dmt-ticker {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px; /* Tailwind rounded-full */
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.dmt-ticker:hover {
    border-color: rgba(255, 159, 0, 0.3);
    background: rgba(255, 159, 0, 0.05);
}

/* Indicador de pulso con tu naranja */
.status-pulse {
    position: relative;
    display: flex;
    height: 8px;
    width: 8px;
}

.status-pulse .dot {
    position: relative;
    display: inline-flex;
    border-radius: 9999px;
    height: 8px;
    width: 8px;
    background-color: var(--dmt-pure);
}

.status-pulse .ping {
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background-color: var(--dmt-pure);
    opacity: 0.75;
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* =========================================
   DMT ACADEMY - LEADERBOARD SYSTEM
   ========================================= */

/* 1. Contenedor Principal */
#leaderboard_container {
    background: transparent !important;
    width: 100%;
}

/* 2. Estructura de la Tabla */
#leaderboard_body {
    display: table-row-group !important;
}

#leaderboard_body tr {
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
    z-index: 1;
}

/* Efecto de fila activa con el borde naranja DMT */
#leaderboard_body tr:hover {
    background: rgba(255, 152, 0, 0.05) !important;
    box-shadow: inset 4px 0 0 0 #FF9800;
    z-index: 50;
}

/* 3. Sistema de Tooltips (Ficha del Trader) */
.trader-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    display: flex !important;
    position: absolute;
    pointer-events: none;
    z-index: 9999 !important;
    
    /* CURVATURA Y CORTE DE LÍNEA */
    border-radius: 1rem; /* Equivalente a rounded-2xl */
    overflow: hidden; 
    
    transform: translateY(-40%) scale(0.9) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: #0c0c0c !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Activación del Tooltip al hacer Hover en la fila */
tr.group:hover .trader-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) scale(1) !important;
    pointer-events: auto !important;
}

/* 4. Detalles Visuales (Banderas e Imágenes) */
#leaderboard_body img {
    display: block;
}

/* 5. Scrollbar Personalizado Estilo Trading */
#leaderboard_container::-webkit-scrollbar {
    width: 4px;
}

#leaderboard_container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

#leaderboard_container::-webkit-scrollbar-thumb {
    background: #FF9800;
    border-radius: 10px;
}

#ranking .glass {
    overflow: visible !important; 
}

/* 6. Ajuste de textos para legibilidad */
.group:hover td {
    color: #fff !important;
}

.group:hover .text-gray-500 {
    color: #FF9800 !important; /* El Rank (#) se pone naranja */
}

#img_preview_tag, 
#leaderboard_body img,
.w-24 img {
    image-rendering: -webkit-optimize-contrast; /* Máxima nitidez en Chrome/Edge */
    image-rendering: high-quality;             /* Prioriza calidad sobre velocidad */
    transform: translateZ(0);                  /* Forza el uso de la tarjeta gráfica */
    -webkit-font-smoothing: antialiased;
}

/* =========================================
            GAME MODO CAMPAÑA
   ========================================= */

#game-container::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 150px 60px #000;
    pointer-events: none;
    z-index: 15;
}
/* =========================================
   SISTEMA DE BOTONES DEL JUEGO (TERMINAL UI v2)
   Curvas de aceleración premium para suavidad
   ========================================= */

.game-btn {
    flex: 1;
    padding: 11px;
    cursor: pointer;
    letter-spacing: 0.1em;
    border-radius: 4px;
    /* cubic-bezier le da ese efecto de "frenado suave" premium */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    position: relative;
    overflow: hidden; /* Por si queremos añadir un efecto de brillo que pase por encima después */
}

/* Botón de Acción Principal (Naranja) */
.game-btn-action {
    background: linear-gradient(135deg, rgba(255,152,0,0.15), rgba(255,107,53,0.05));
    border: 1px solid rgba(255, 152, 0, 0.7);
    color: #FF9800;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
}

.game-btn-action:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255,152,0,0.3), rgba(255,107,53,0.15));
    border-color: #FF9800;
    box-shadow: 0 0 25px rgba(255, 152, 0, 0.2), inset 0 0 20px rgba(255, 152, 0, 0.05);
    transform: translateY(-2px); /* Se levanta elegante */
}

.game-btn-action:active:not(:disabled) {
    /* Al hacer click, se hunde y el brillo se va (sensación de botón físico real) */
    transform: translateY(1px) scale(0.98); 
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.1);
    transition-duration: 0.1s; /* El click es rápido, el soltar es lento */
}

/* Botón Secundario (Ghost) */
.game-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
}

.game-btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-1px);
}

.game-btn-ghost:active {
    transform: translateY(1px) scale(0.98);
    transition-duration: 0.1s;
}

/* Estado deshabilitado (Magia CSS pura: difumina y bloquea sin JS) */
.game-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    filter: grayscale(100%); /* Se pone gris y sin vida */
    transform: none !important;
    box-shadow: none !important;
}

/* === GAME GLOW SYSTEM === */
/* Base aura: coincide con la foto (50x50 en top:2px left:2px dentro del wrap 54x54) */
.game-avatar-aura{position:absolute;inset:2px;border-radius:50%;z-index:1;pointer-events:none}

/* --- BREATHE (Default Premium & Admin) --- */
.game-avatar-aura.breathe {
    /* Animación neutral: solo escala y opacidad, sin tocar colores */
    animation: avatar-breathe 2.5s infinite ease-in-out alternate;
    border-radius: 50% !important;
    background: transparent !important;
}

.game-avatar-aura.breathe.premium {
    border: 2px solid var(--premium-cyan);
    box-shadow: 
        inset 0 0 10px rgba(0,229,255,0.2),
        0 0 12px rgba(0,229,255,0.4), 
        0 0 24px rgba(0,229,255,0.15);
}

.game-avatar-aura.breathe.admin {
    border: 2px solid var(--legend-gold);
    box-shadow: 
        inset 0 0 10px rgba(255,215,0,0.2),
        0 0 12px rgba(255,215,0,0.4), 
        0 0 24px rgba(255,215,0,0.15);
}

/* Keyframes limpios que respetan el color asignado por la clase superior */
@keyframes avatar-breathe {
    0% { 
        opacity: 0.65; 
        transform: scale(0.95); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1.08); 
    }
}

/* --- FIRE (Preparado para partículas JS) --- */
.game-avatar-aura.fire{
    /* inset:2px heredado del base — coincide con la foto exactamente */
    border-radius:50%!important;background:none!important;border:none!important;
    overflow:visible!important;
    box-shadow:0 0 12px rgba(255,80,0,0.35)!important;
}
.game-avatar-aura.fire.admin{box-shadow:0 0 12px rgba(255,215,0,0.35)!important}

/* Partículas de fuego (Mejoradas para verse como gas, no como canicas) */
.hud-fire-particle{
    position:absolute;
    bottom:35%; /* Nacen desde la mitad inferior del contenedor circular */
    width:10px;height:10px;border-radius:50%;
    /* Gradiente más suave */
    background:radial-gradient(circle, rgba(255,120,0,0.9) 0%, rgba(255,69,0,0.4) 30%, rgba(255,69,0,0) 70%);
    /* EL SECRETO: El blur difumina el punto duro y lo convierte en humo/gas */
    filter:blur(2px);
    mix-blend-mode:screen;opacity:0;pointer-events:none;
    animation:hud-rise 1.4s ease-out infinite;
}

/* Distribución aleatoria (Añadimos variación de tamaño para que se vea orgánico) */
.hud-fire-particle:nth-child(1){left:10%;animation-delay:0.0s}
.hud-fire-particle:nth-child(2){left:25%;animation-delay:0.2s}
.hud-fire-particle:nth-child(3){left:40%;animation-delay:0.5s}
.hud-fire-particle:nth-child(4){left:55%;animation-delay:0.15s}
.hud-fire-particle:nth-child(5){left:70%;animation-delay:0.9s}
.hud-fire-particle:nth-child(6){left:85%;animation-delay:0.6s}
.hud-fire-particle:nth-child(7){left:15%;animation-delay:0.4s;width:8px;height:8px}
.hud-fire-particle:nth-child(8){left:30%;animation-delay:0.8s;width:12px;height:12px}
.hud-fire-particle:nth-child(9){left:50%;animation-delay:1.1s}
.hud-fire-particle:nth-child(10){left:65%;animation-delay:0.1s;width:8px;height:8px}
.hud-fire-particle:nth-child(11){left:80%;animation-delay:0.7s;width:14px;height:14px}
.hud-fire-particle:nth-child(12){left:20%;animation-delay:1.2s;width:6px;height:6px}
.hud-fire-particle:nth-child(13){left:45%;animation-delay:0.3s}
.hud-fire-particle:nth-child(14){left:60%;animation-delay:0.95s;width:10px;height:10px}
.hud-fire-particle:nth-child(15){left:75%;animation-delay:0.05s}
.hud-fire-particle:nth-child(16){left:90%;animation-delay:0.55s;width:8px;height:8px}
.hud-fire-particle:nth-child(17){left:35%;animation-delay:1.05s;width:12px;height:12px}
.hud-fire-particle:nth-child(18){left:5%;animation-delay:0.35s}
.hud-fire-particle:nth-child(19){left:50%;animation-delay:0.75s;width:6px;height:6px}
.hud-fire-particle:nth-child(20){left:95%;animation-delay:0.45s;width:10px;height:10px}

@keyframes hud-rise{
    0%{opacity:0;transform:translateY(0) translateX(0) scale(0.5)} /* Nace pequeño */
    15%{opacity:0.8;transform:translateY(-10px) translateX(3px) scale(1)} /* Se expande y se mueve */
    50%{opacity:0.6;transform:translateY(-25px) translateX(-2px) scale(0.8)} /* Se va hacia un lado */
    100%{opacity:0;transform:translateY(-45px) translateX(2px) scale(0)} /* Muere y sube */
}

/* --- RAYOS ELÉCTRICOS PARA MAP PREVIEW --- */
@keyframes bolt-flicker{
    0%,100%{opacity:1}
    30%{opacity:0.15}
    60%{opacity:0.85}
}
.elec-bolt{stroke-dasharray:80;animation:bolt-flicker .45s steps(3) infinite;}
.elec-bolt.eb1{animation-delay:0s}
.elec-bolt.eb2{animation-delay:.15s}
.elec-bolt.eb3{animation-delay:.3s}
.elec-glow{stroke-dasharray:80;animation:bolt-flicker .45s steps(3) infinite;}
.elec-glow.eg1{animation-delay:0s}
.elec-glow.eg2{animation-delay:.15s}
.elec-glow.eg3{animation-delay:.3s}

/* --- PARTÍCULAS DE FUEGO PARA MAP PREVIEW --- */
.map-prev-fire-p{
    position:absolute;
    bottom:40%;
    width:13px;height:13px;border-radius:50%;
    background:radial-gradient(circle, rgba(255,140,0,0.95) 0%, rgba(255,60,0,0.5) 40%, rgba(255,40,0,0) 70%);
    filter:blur(2.5px);
    mix-blend-mode:screen;opacity:0;pointer-events:none;
    animation:hud-rise 1.4s ease-out infinite;
}
.map-prev-fire-p:nth-child(1){left:25%;animation-delay:0.0s}
.map-prev-fire-p:nth-child(2){left:35%;animation-delay:0.2s;width:11px;height:11px}
.map-prev-fire-p:nth-child(3){left:45%;animation-delay:0.5s;width:15px;height:15px}
.map-prev-fire-p:nth-child(4){left:55%;animation-delay:0.15s;width:13px;height:13px}
.map-prev-fire-p:nth-child(5){left:65%;animation-delay:0.9s;width:11px;height:11px}
.map-prev-fire-p:nth-child(6){left:30%;animation-delay:0.6s;width:14px;height:14px}
.map-prev-fire-p:nth-child(7){left:50%;animation-delay:0.4s;width:12px;height:12px}
.map-prev-fire-p:nth-child(8){left:60%;animation-delay:0.8s;width:10px;height:10px}
.map-prev-fire-p:nth-child(9){left:40%;animation-delay:1.1s;width:16px;height:16px}
.map-prev-fire-p:nth-child(10){left:52%;animation-delay:0.1s;width:13px;height:13px}
.map-prev-fire-p:nth-child(11){left:38%;animation-delay:0.7s;width:12px;height:12px}
.map-prev-fire-p:nth-child(12){left:48%;animation-delay:1.2s;width:11px;height:11px}
.map-prev-fire-p:nth-child(13){left:58%;animation-delay:0.3s;width:14px;height:14px}
.map-prev-fire-p:nth-child(14){left:43%;animation-delay:0.95s;width:10px;height:10px}
.map-prev-fire-p:nth-child(15){left:33%;animation-delay:0.05s;width:13px;height:13px}
.map-prev-fire-p:nth-child(16){left:62%;animation-delay:0.55s;width:11px;height:11px}

/* =========================================
   TESLA AURA ESCUDO (Market Preview)
   ========================================= */

/* Base compartida para ambos trazos */
.tesla-aura-svg path {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 45 15; /* Trazos largos, vacíos cortos (igual que el Canvas) */
    animation: tesla-flow 1s linear infinite;
}

/* Capa 1: Glow grueso */
.tesla-aura-svg .tesla-glow path {
    stroke: var(--premium-cyan, #00E5FF);
    stroke-width: 4.5px;
    opacity: 0.35;
    filter: drop-shadow(0 0 10px #00E5FF);
    /* El parpadeo solo afecta a la luz, no al núcleo */
    animation: tesla-flow 1s linear infinite, tesla-flicker 0.15s infinite alternate;
}

/* Capa 2: Núcleo blanco (Plasma puro) */
.tesla-aura-svg .tesla-core path {
    stroke: rgba(220, 255, 255, 0.95);
    stroke-width: 1.5px;
}

/* Desfasamos los 4 rayos para romper la simetría y darle caos */
.tesla-aura-svg .tp1 { animation-delay: 0s, 0s; }
.tesla-aura-svg .tp2 { animation-delay: -0.2s, -0.07s; }
.tesla-aura-svg .tp3 { animation-delay: -0.5s, -0.15s; }
.tesla-aura-svg .tp4 { animation-delay: -0.8s, -0.25s; }

/* Flujo constante de energía hacia arriba */
@keyframes tesla-flow {
    to { stroke-dashoffset: -120; }
}

/* Oscilación del voltaje en el Glow */
@keyframes tesla-flicker {
    from { opacity: 0.25; filter: drop-shadow(0 0 5px #00E5FF); }
    to { opacity: 0.55; filter: drop-shadow(0 0 15px #00E5FF); }
}

/* --- ELECTRIC (Inspirado en borders de alto nivel) --- */
.game-avatar-aura.electric{
    /* Borde principal */
    border:1px solid var(--premium-cyan);
    /* Segundo borde separado (simula la capa extra del ejemplo) */
    outline:1px solid rgba(0,229,255,0.5);
    outline-offset:2px;
    /* Múltiples capas de resplandor */
    box-shadow:0 0 5px var(--premium-cyan),0 0 15px rgba(0,229,255,0.5),0 0 30px rgba(0,229,255,0.2),inset 0 0 10px rgba(0,229,255,0.2);
    /* Animación de cortocircuito */
    animation:electric-spark-hud 0.15s steps(2) infinite, electric-flicker 0.08s linear infinite alternate;
}

@keyframes electric-spark-hud{
    0%{opacity:.8;transform:scale(1)}
    50%{opacity:1;transform:scale(1.02)}
    100%{opacity:.9;transform:scale(.99)}
}

/* =========================================
   PLASMA AURA (Quantum Bubble) - Market Preview
   ========================================= */
.plasma-bubble-shield {
    border-radius: 50%;
    border: 2px solid rgba(206, 147, 216, 0.4);
    /* Gradiente descentrado para simular volumen 3D */
    background: radial-gradient(circle at 30% 30%, rgba(213, 0, 255, 0.2) 0%, rgba(156, 39, 176, 0.05) 60%, transparent 100%);
    box-shadow: 
        inset 0 0 20px rgba(156, 39, 176, 0.6),
        0 0 25px rgba(156, 39, 176, 0.4);
    animation: plasma-breathe 2.5s infinite ease-in-out;
}

/* El escudo respira, aumentando de tamaño, brillo y opacidad */
@keyframes plasma-breathe {
    0% { 
        transform: scale(0.95); 
        box-shadow: inset 0 0 15px rgba(156, 39, 176, 0.5), 0 0 15px rgba(156, 39, 176, 0.3); 
        border-color: rgba(206, 147, 216, 0.3);
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: inset 0 0 35px rgba(213, 0, 255, 0.8), 0 0 45px rgba(213, 0, 255, 0.6); 
        border-color: rgba(206, 147, 216, 0.9);
    }
    100% { 
        transform: scale(0.95); 
        box-shadow: inset 0 0 15px rgba(156, 39, 176, 0.5), 0 0 15px rgba(156, 39, 176, 0.3); 
        border-color: rgba(206, 147, 216, 0.3);
    }
}

/* =========================================
   PLASMA HUD AURA (Quantum Bubble)
   ========================================= */
.game-avatar-aura.plasma {
    background: radial-gradient(circle at 30% 30%, rgba(213, 0, 255, 0.3) 0%, rgba(156, 39, 176, 0.1) 60%, transparent 100%) !important;
    border: 2px solid rgba(206, 147, 216, 0.5) !important;
    border-radius: 50% !important;
    animation: plasma-hud-breathe 2.5s infinite ease-in-out !important;
    /* Ajuste para que el aura sobresalga un poco de la foto */
    inset: -3px !important; 
}

/* El reflejo de luz que va POR ENCIMA de la foto */
.plasma-hud-highlight {
    position: absolute;
    inset: -3px; /* Debe coincidir con el inset del aura */
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
    box-shadow: inset 3px 5px 10px rgba(255, 255, 255, 0.4);
    animation: plasma-hud-highlight-breathe 2.5s infinite ease-in-out;
}

@keyframes plasma-hud-breathe {
    0% { 
        transform: scale(0.95); 
        box-shadow: inset 0 0 10px rgba(156, 39, 176, 0.5), 0 0 15px rgba(156, 39, 176, 0.3) !important; 
        border-color: rgba(206, 147, 216, 0.3) !important;
    }
    50% { 
        transform: scale(1.08); 
        box-shadow: inset 0 0 25px rgba(213, 0, 255, 0.9), 0 0 35px rgba(213, 0, 255, 0.7) !important; 
        border-color: rgba(206, 147, 216, 0.9) !important;
    }
    100% { 
        transform: scale(0.95); 
        box-shadow: inset 0 0 10px rgba(156, 39, 176, 0.5), 0 0 15px rgba(156, 39, 176, 0.3) !important; 
        border-color: rgba(206, 147, 216, 0.3) !important;
    }
}

@keyframes plasma-hud-highlight-breathe {
    0%, 100% { opacity: 0.3; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* =========================================
   GAME HUD v3 — DOCK PILL (Opción C)
   ========================================= */

/* Contenedor raíz — position:absolute para salir del overflow del section */
#game-hud {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    box-sizing: border-box;
}


/* ── TOP RIGHT cluster ─────────────────────────────────────── */
#hud-top-right {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.hud-action-btn {
    background: rgba(4,4,12,0.88) !important;
    border: 1px solid rgba(255,159,0,0.14) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 8px !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.08em !important;
    color: rgba(255,255,255,0.55) !important;
    padding: 6px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
.hud-action-btn:hover {
    background: rgba(255,159,0,0.1) !important;
    border-color: rgba(255,159,0,0.38) !important;
    color: var(--dmt-pure) !important;
    transform: translateY(-1px) !important;
}

/* FPS display inline en top-right */
#game-fps-display {
    position: relative !important;
    top: auto !important; right: auto !important;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.52rem;
    padding: 5px 8px;
    background: rgba(0,0,0,0.75);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: #4CAF50;
    min-width: 52px;
    text-align: center;
    pointer-events: none;
}

/* ── DOCK PILL ─────────────────────────────────────────────── */
#hud-dock {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(4,4,12,0.92);
    border: 1px solid rgba(255,159,0,0.16);
    border-radius: 32px;
    padding: 8px 18px;
    backdrop-filter: blur(18px);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,159,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.03);
    white-space: nowrap;
    transition: bottom 0.2s ease;
}

/* Avatar dentro del dock */
#hud-dock-avatar-wrap {
    width: 30px;
    height: 30px;
    position: relative;
    flex-shrink: 0;
    isolation: isolate;
    overflow: visible !important;
}
#hud-dock-avatar-wrap #game-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255,159,0,0.4);
    position: relative;
    z-index: 2;
    display: block;
}

/* Identity */
.hud-dock-identity {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
#game-username {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.68rem !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85px;
}
#game-rank {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.52rem !important;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
#game-badge {
    font-size: 7px !important;
    display: inline-block;
    padding: 1px 5px !important;
    min-height: auto !important;
}

/* Separator */
.hud-dock-sep {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.07);
    flex-shrink: 0;
}

/* Stat block genérico */
.hud-dock-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.hud-dock-stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.hud-dock-lbl {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.28);
    letter-spacing: 0.1em;
}
.hud-dock-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

/* XP bar */
.hud-dock-bar-wrap {
    width: 72px;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
#game-xp-bar {
    height: 100%;
    background: var(--dmt-pure);
    box-shadow: 0 0 6px rgba(255,159,0,0.4);
    border-radius: 2px;
    transition: width 0.6s ease;
    width: 0%;
}

/* Energy pips */
.hud-dock-pips,
#game-energy-pips {
    display: flex;
    gap: 2px;
    width: 72px;
    flex-wrap: nowrap;
}

/* Coins */
.hud-dock-coins {
    flex-direction: column !important;
    align-items: flex-start !important;
}
#game-coins-text,
.hud-dock-coins-val {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--dmt-pure);
    text-shadow: 0 0 8px rgba(255,159,0,0.3);
    white-space: nowrap;
}

/* ── INTERACT PROMPT ────────────────────────────────────────── */
#game-interact-prompt {
    position: absolute !important;
    bottom: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 31 !important;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.1em;
    font-family: 'Share Tech Mono', monospace !important;
    pointer-events: none;
    transition: opacity 0.4s ease;
    opacity: 0;
    background: rgba(4,4,12,0.88) !important;
    padding: 7px 18px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,159,0,0.14) !important;
    white-space: nowrap;
}

/* KBD key pill */
.hud-kbd {
    background: rgba(255,159,0,0.12);
    border: 1px solid rgba(255,159,0,0.28);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    margin: 0 3px;
}

/* ── MOBILE LANDSCAPE ─────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    #hud-dock {
        bottom: 10px;
        padding: 6px 12px;
        gap: 8px;
    }
    .hud-dock-identity #game-badge { display: none !important; }
    #game-username { max-width: 60px !important; }
    #game-interact-prompt { bottom: 62px !important; }
    #game-wasd-hint { display: none !important; }
    .hud-action-btn span { display: none !important; }
    .hud-action-btn { padding: 5px 7px !important; }
}

/* ── DESKTOP ────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    #hud-dock { bottom: 24px; }
    #game-interact-prompt { bottom: 88px !important; }
}

/* =========================================
   MOBILE JOYSTICK — ESTILOS COMPLETOS
   (faltaban completamente en style.css,
   el joystick existía en DOM pero invisible)
   ========================================= */
#mobile-joystick {
    position: fixed;
    bottom: 32px;
    left: 28px;
    z-index: 9999 !important;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.joystick-base {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(20, 20, 35, 0.85) 0%,
        rgba(5,  5,  15, 0.75) 100%);
    border: 1.5px solid rgba(255, 152, 0, 0.35);
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 0 20px rgba(255, 152, 0, 0.12),
        0 0 40px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 0, 0, 0.4);
}

/* Anillo interior decorativo */
.joystick-base::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 152, 0, 0.1);
    pointer-events: none;
}

/* Indicadores de dirección (puntos cardinales) */
.joystick-base::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(3px 3px at 50%  8px,  rgba(255,152,0,0.25) 50%, transparent 51%),
        radial-gradient(3px 3px at 50%  80px, rgba(255,152,0,0.25) 50%, transparent 51%),
        radial-gradient(3px 3px at 8px  50%,  rgba(255,152,0,0.25) 50%, transparent 51%),
        radial-gradient(3px 3px at 80px 50%,  rgba(255,152,0,0.25) 50%, transparent 51%);
    pointer-events: none;
}

.joystick-knob {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(255, 210, 80, 0.95),
        rgba(255, 140, 0,  0.85) 50%,
        rgba(200, 80,  0,  0.7) 100%);
    border: 1px solid rgba(255, 210, 100, 0.5);
    box-shadow:
        0 0 12px rgba(255, 152, 0, 0.6),
        0 3px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 200, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.04s linear; /* Respuesta muy rápida */
    pointer-events: none;
}

/* Botón de interacción (E) en móvil — al lado del joystick */
#mobile-interact-btn {
    position: fixed;
    bottom: 44px;
    right: 28px;
    z-index: 40;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 152, 0, 0.2),
        rgba(20, 20, 35, 0.85));
    border: 1.5px solid rgba(255, 152, 0, 0.4);
    color: rgba(255, 200, 50, 0.9);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: none;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 16px rgba(255, 152, 0, 0.15), 0 4px 12px rgba(0,0,0,0.5);
    transition: box-shadow 0.15s, transform 0.1s;
    cursor: pointer;
}

#mobile-interact-btn:active {
    transform: scale(0.92);
    box-shadow: 0 0 24px rgba(255, 152, 0, 0.4);
}
/* =========================================
   GAME SETTINGS PANEL
   ========================================= */
#game-settings-panel {
    position: fixed;
    top: 56px;
    right: 80px; /* A la izquierda del botón Dashboard */
    z-index: 200;
    width: 280px;
    background: linear-gradient(160deg, rgba(10,10,20,0.98), rgba(16,14,8,0.98));
    border: 1px solid rgba(255,152,0,0.2);
    font-family: 'Share Tech Mono', monospace;
    transform: translateY(-10px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    backdrop-filter: blur(20px);
}
#game-settings-panel.gsp-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.gsp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,152,0,0.1);
}
.gsp-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: #FF9800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.gsp-title i { margin-right: 6px; }
.gsp-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    transition: color 0.2s;
}
.gsp-close:hover { color: #fff; }

.gsp-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }

.gsp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Calidad: label arriba, botones abajo — evita overflow horizontal */
.gsp-row.gsp-row-quality {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.gsp-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.gsp-label i { color: rgba(255,152,0,0.6); width: 12px; text-align: center; }

.gsp-divider {
    height: 1px;
    background: rgba(255,255,255,0.04);
    margin: 2px 0;
}

/* Botones de calidad — full width cuando están en columna */
.gsp-quality-btns {
    display: flex;
    gap: 4px;
    width: 100%;
}
.gsp-qbtn {
    flex: 1;                       /* reparte el espacio por igual */
    padding: 5px 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.48rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
    letter-spacing: 0.03em;
    text-align: center;
}
.gsp-qbtn:hover {
    border-color: rgba(255,152,0,0.4);
    color: rgba(255,255,255,0.7);
}
.gsp-qbtn.active {
    background: rgba(255,152,0,0.15);
    border-color: rgba(255,152,0,0.6);
    color: #FF9800;
    font-weight: 700;
}

/* Toggle switch */
.gsp-toggle {
    width: 38px;
    height: 20px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    position: relative;
    transition: background 0.25s, border-color 0.25s;
    flex-shrink: 0;
}
.gsp-toggle.active {
    background: rgba(255,152,0,0.25);
    border-color: rgba(255,152,0,0.5);
}
.gsp-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: transform 0.25s, background 0.25s;
}
.gsp-toggle.active .gsp-toggle-knob {
    transform: translateX(18px);
    background: #FF9800;
    box-shadow: 0 0 6px rgba(255,152,0,0.5);
}

/* Slider de volumen */
.gsp-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}
.gsp-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 90px;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.gsp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FF9800;
    box-shadow: 0 0 6px rgba(255,152,0,0.5);
    cursor: pointer;
}
.gsp-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FF9800;
    border: none;
    cursor: pointer;
}
.gsp-slider-val {
    font-size: 0.55rem;
    color: rgba(255,152,0,0.7);
    min-width: 28px;
    text-align: right;
}

.gsp-hint {
    font-size: 0.48rem;
    color: rgba(255,255,255,0.2);
    line-height: 1.6;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 10px;
    letter-spacing: 0.03em;
}

/* Mobile: panel anclado arriba */
@media (max-width: 767px) {
    #game-settings-panel {
        right: 10px;
        top: 52px;
        width: min(260px, calc(100vw - 20px));
    }
}

/* =========================================
   FPS DISPLAY (en el HUD)
   ========================================= */
#game-fps-display {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    padding: 5px 10px;
    background: rgba(0,0,0,0.75);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: #4CAF50;
    min-width: 58px;
    text-align: center;
    pointer-events: none;
    position: absolute;
}

/* =========================================
   FIX: game-avatar-wrap necesita overflow:visible
   para que las llamas del fire aura salgan del círculo
   ========================================= */
#game-avatar-wrap {
    overflow: visible !important;
    /* El z-index asegura que las partículas de fuego queden sobre el fondo */
    isolation: isolate;
}

/* Partículas de fuego del HUD se posicionan relativas al aura */
.game-avatar-aura.fire .hud-fire-particle {
    position: absolute;
    pointer-events: none;
}


/* =========================================
   DMT MARKET v2
   ========================================= */
#dmt-market-overlay {
    display:none;position:fixed;inset:0;z-index:5000;
    background:rgba(0,0,0,0.9);backdrop-filter:blur(14px);
    align-items:center;justify-content:center;
    opacity:0;transition:opacity 0.25s ease;
}
#dmt-market-overlay.mkt-visible{opacity:1;}

#dmt-market-modal {
    width:min(940px,96vw);max-height:88vh;
    background:linear-gradient(160deg,#07070f 0%,#0b0906 100%);
    border:1px solid rgba(255,152,0,0.18);
    display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 0 100px rgba(255,152,0,0.06),0 40px 80px rgba(0,0,0,0.7);
}

/* HEADER */
.mkt-header{
    display:flex;align-items:center;gap:10px;
    padding:12px 18px;border-bottom:1px solid rgba(255,152,0,0.1);
    background:rgba(255,152,0,0.02);flex-shrink:0;flex-wrap:wrap;
}
.mkt-logo{
    font-family:'Orbitron',sans-serif;font-size:0.75rem;font-weight:900;
    color:var(--dmt-pure);letter-spacing:0.2em;
    text-shadow:0 0 20px rgba(255,152,0,0.4);
    display:flex;align-items:center;gap:8px;margin-right:4px;
}
.mkt-ctx-badge{
    font-family:'Share Tech Mono',monospace;font-size:0.42rem;
    padding:3px 8px;border:1px solid rgba(255,152,0,0.2);
    color:rgba(255,152,0,0.55);letter-spacing:0.1em;
}
.mkt-tabs{display:flex;gap:4px;margin-left:4px;}
.mkt-tab-btn{
    font-family:'Share Tech Mono',monospace;font-size:0.52rem;
    letter-spacing:0.08em;padding:7px 14px;
    border:1px solid rgba(255,255,255,0.07);background:transparent;
    color:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.2s;
    display:flex;align-items:center;gap:6px;
}
.mkt-tab-btn:hover{color:rgba(255,255,255,0.7);border-color:rgba(255,152,0,0.3);}
.mkt-tab-btn.active{color:var(--dmt-pure);border-color:rgba(255,152,0,0.5);background:rgba(255,152,0,0.08);}

.mkt-coins-display{
    display:flex;align-items:center;gap:6px;margin-left:auto;
    font-family:'Share Tech Mono',monospace;font-size:0.7rem;
    color:var(--dmt-pure);font-weight:bold;
    padding:5px 12px;background:rgba(255,152,0,0.07);
    border:1px solid rgba(255,152,0,0.2);
}
.mkt-close-btn{
    background:none;border:1px solid rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.35);cursor:pointer;
    padding:6px 10px;transition:all 0.2s;font-size:0.7rem;
}
.mkt-close-btn:hover{color:#fff;border-color:rgba(255,255,255,0.3);}

/* BODY */
.mkt-body{flex:1;overflow:hidden;position:relative;}
.mkt-tab-panel{display:none;height:100%;overflow:hidden;flex-direction:column;}
.mkt-tab-panel.active{display:flex;}

/* STORE layout */
.mkt-store-layout{
    display:grid;grid-template-columns:1fr 320px;
    height:100%;overflow:hidden;
}

/* Category tabs */
.mkt-items-col{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid rgba(255,255,255,0.04);}
.mkt-cat-tabs{
    display:flex;gap:2px;padding:12px 16px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);flex-shrink:0;
}
.mkt-cat-btn{
    font-family:'Share Tech Mono',monospace;font-size:0.5rem;
    letter-spacing:0.06em;padding:8px 16px;
    border:1px solid transparent;border-bottom:none;
    background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.3);
    cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:6px;
}
.mkt-cat-btn:hover{color:rgba(255,255,255,0.65);}
.mkt-cat-btn.active{
    background:rgba(255,152,0,0.07);
    border-color:rgba(255,152,0,0.3) rgba(255,152,0,0.3) rgba(7,7,15,1);
    color:var(--dmt-pure);
}
.mkt-items-grid{
    padding:12px 14px;overflow-y:auto;flex:1;
    display:flex;flex-direction:column;gap:5px;
}
.mkt-items-grid::-webkit-scrollbar{width:3px;}
.mkt-items-grid::-webkit-scrollbar-thumb{background:rgba(255,152,0,0.25);}

/* Item card */
.mkt-item-card{
    display:flex;align-items:center;gap:11px;
    padding:10px 13px;border:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.02);cursor:pointer;transition:all 0.18s;
}
.mkt-item-card:hover{
    border-color:rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);
    transform:translateX(2px);
}
.mkt-item-card.selected{
    border-color:var(--dmt-pure);background:rgba(255,152,0,0.07);
    box-shadow:-3px 0 0 0 var(--dmt-pure);
}
.mkt-ic-icon{font-size:1.15rem;flex-shrink:0;width:28px;text-align:center;}
.mkt-ic-info{flex:1;min-width:0;}
.mkt-ic-name{
    font-family:'Orbitron',sans-serif;font-size:0.58rem;
    font-weight:700;color:#ddd;letter-spacing:0.06em;
}
.mkt-ic-sub{
    font-family:'Share Tech Mono',monospace;font-size:0.48rem;
    color:rgba(255,255,255,0.28);margin-top:2px;
}
.mkt-ic-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.mkt-ic-price{
    font-family:'Share Tech Mono',monospace;font-size:0.55rem;
    color:var(--dmt-pure);display:flex;align-items:center;gap:4px;
}
.mkt-tag-owned{
    font-family:'Share Tech Mono',monospace;font-size:0.42rem;
    padding:2px 7px;background:rgba(76,175,80,0.1);
    border:1px solid rgba(76,175,80,0.3);color:#4CAF50;
}

/* Detail panel */
.mkt-detail-col{overflow-y:auto;display:flex;flex-direction:column;}
.mkt-detail-col::-webkit-scrollbar{width:3px;}
.mkt-detail-col::-webkit-scrollbar-thumb{background:rgba(255,152,0,0.25);}
.mkt-detail-empty{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:12px;
    color:rgba(255,255,255,0.15);font-family:'Share Tech Mono',monospace;
    font-size:0.52rem;text-align:center;line-height:1.7;padding:20px;
}
.mkt-detail-empty i{font-size:1.6rem;color:rgba(255,152,0,0.15);}

/* Preview area */
.mkt-det-preview{
    padding:22px 18px 16px;display:flex;flex-direction:column;
    align-items:center;gap:10px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    min-height:200px;justify-content:center;
    background:rgba(0,0,0,0.25);
}
.mkt-prev-lbl{
    font-family:'Share Tech Mono',monospace;font-size:0.42rem;
    color:rgba(255,255,255,0.18);letter-spacing:0.15em;align-self:flex-start;
    z-index: -1px !important;
}

/* HUD card preview */
.mkt-prev-hud-card{
    display:flex;align-items:center;gap:14px;
    background:rgba(255,255,255,0.025);
    border:1px solid rgba(255,255,255,0.06);
    padding:14px 16px;width:100%;max-width:250px;
}
.mkt-prev-hud-txt{flex:1;}
.mkt-prev-hud-name{
    font-family:'Orbitron',sans-serif;font-size:0.58rem;
    font-weight:700;color:#e0e0e0;
}
.mkt-prev-hud-rank{
    font-family:'Share Tech Mono',monospace;font-size:0.48rem;
    color:rgba(255,255,255,0.3);margin:3px 0 6px;
}
.mkt-prev-bar{
    height:3px;background:linear-gradient(90deg,var(--dmt-pure) 70%,rgba(255,255,255,0.06) 70%);
    border-radius:2px;
}

/* Detail info */
.mkt-det-info{padding:16px 18px 20px;flex:1;}
.mkt-det-rarity{
    font-family:'Share Tech Mono',monospace;font-size:0.48rem;
    letter-spacing:0.1em;margin-bottom:6px;
}
.mkt-det-name{
    font-family:'Orbitron',sans-serif;font-size:0.95rem;
    font-weight:700;color:#fff;letter-spacing:0.04em;margin:0 0 10px;
}
.mkt-det-desc{
    font-family:'Share Tech Mono',monospace;font-size:0.52rem;
    color:rgba(255,255,255,0.4);line-height:1.75;margin-bottom:16px;
}
.mkt-det-price-box{
    padding:11px 13px;background:rgba(255,152,0,0.04);
    border:1px solid rgba(255,152,0,0.1);margin-bottom:12px;
}
.mkt-det-cost{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.mkt-det-num{
    font-family:'Orbitron',sans-serif;font-size:1.1rem;
    font-weight:900;color:var(--dmt-pure);
}
.mkt-det-lbl{
    font-family:'Share Tech Mono',monospace;font-size:0.48rem;
    color:rgba(255,152,0,0.5);letter-spacing:0.1em;
}
.mkt-det-bal{
    font-family:'Share Tech Mono',monospace;font-size:0.5rem;
    color:rgba(255,255,255,0.3);
}
.mkt-det-bal.red{color:rgba(244,67,54,0.7);}

.mkt-det-buy{
    width:100%;padding:13px;font-family:'Orbitron',sans-serif;
    font-size:0.6rem;font-weight:700;letter-spacing:0.12em;cursor:pointer;
    background:rgba(255,152,0,0.14);border:1px solid rgba(255,152,0,0.6);
    color:var(--dmt-pure);transition:all 0.2s;
    display:flex;align-items:center;justify-content:center;gap:8px;
}
.mkt-det-buy:hover:not(.disabled){
    background:rgba(255,152,0,0.27);
    box-shadow:0 0 20px rgba(255,152,0,0.2);transform:translateY(-1px);
}
.mkt-det-buy.disabled{opacity:0.3;cursor:not-allowed;filter:grayscale(80%);}
.mkt-det-owned{
    display:flex;align-items:center;gap:8px;
    font-family:'Share Tech Mono',monospace;font-size:0.52rem;
    color:rgba(76,175,80,0.75);padding:10px 12px;
    background:rgba(76,175,80,0.05);border:1px solid rgba(76,175,80,0.12);
}

.mkt-inv-grid{
    padding:14px 18px;overflow-y:auto;flex:1;min-height:0;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    grid-auto-rows:minmax(180px,auto);
    gap:10px;align-content:start;
    -webkit-overflow-scrolling:touch;
}

/* Responsive */
@media(max-width:700px){
    .mkt-store-layout{grid-template-columns:1fr;grid-template-rows:1fr auto;}
    .mkt-detail-col{border-top:1px solid rgba(255,255,255,0.04);max-height:260px;border-right:none;}
    .mkt-inv-grid{grid-template-columns:1fr;}
}
/* =========================================
   GAME SYSTEMS HUD — Streak / Fatigue pills
   ========================================= */
.gsys-pill {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 4px 9px;
    background: rgba(5, 5, 15, 0.82);
    border: 1px solid rgba(255,255,255,0.06);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.05em;
    backdrop-filter: blur(8px);
    transition: border-color 0.3s;
}
.gsys-bar-wrap {
    width: 52px;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
.gsys-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s, background 0.5s;
}

/* ── Boss Cooldown Badge (on node) ────────── */
.node-cooldown-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: rgba(255,61,0,0.9);
    color: #fff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.42rem;
    padding: 2px 5px;
    border-radius: 3px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 30;
}

/* ── Reward Toast (streak/fatigue info) ──── */
.dmt-reward-toast {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dmt-reward-toast .mult-badge {
    padding: 1px 6px;
    background: rgba(255,152,0,0.15);
    border: 1px solid rgba(255,152,0,0.35);
    color: #FF9F00;
    border-radius: 3px;
    font-size: 0.52rem;
    letter-spacing: 0.05em;
}
.dmt-reward-toast .fatigue-badge {
    padding: 1px 6px;
    background: rgba(255,61,0,0.12);
    border: 1px solid rgba(255,61,0,0.3);
    color: #FF5555;
    border-radius: 3px;
    font-size: 0.48rem;
}

/* ── Node degradation tints ─────────────── */
.node-deg-yellow { filter: sepia(0.5) saturate(1.5) hue-rotate(-20deg); }
.node-deg-grey   { filter: grayscale(0.6) brightness(0.75); }
.node-deg-dim    { filter: grayscale(1) brightness(0.45); opacity: 0.6; }

/* ─────────────────────────────────────────────
   CAPAS DE UI — visibilidad por estado global
   Regla: cada elemento SOLO existe en su estado.
   Si no está en la lista, está oculto.
   ───────────────────────────────────────────── */

/* Elementos de juego: solo visibles en ui-game */
#mobile-joystick,
#game-hud,
#game-canvas {
  display: none;
}
body.ui-game #mobile-joystick,
body.ui-game #game-hud,
body.ui-game #game-canvas {
  display: block;
}

/* Dashboard */
#dashboard {
  display: none;
}
body.ui-dashboard #dashboard {
  display: block;
}

/* Shop */
#shop {
  display: none;
}
body.ui-shop #shop {
  display: block;
}

/* ====================================================
   DMT ACADEMY — VISUAL ENHANCEMENTS v2.0
   ==================================================== */

/* --- FONTS --- */
body {
    font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
}

h1, h2, h3, h4, h5, h6, .nav-btn, .btn-dmt, .btn-modal, .btn-sidebar-login, .btn-sidebar-logout {
    font-family: 'Orbitron', 'JetBrains Mono', monospace;
}

/* --- ENHANCED LOADER --- */
.loader-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
}

.loader-title {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    font-weight: 900;
    font-style: italic;
    color: var(--dmt-pure);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-shadow: 0 0 40px rgba(255,159,0,0.5), 0 0 80px rgba(255,159,0,0.2);
    animation: loader-pulse 2s ease-in-out infinite;
}

.loader-sub {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.2);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

@keyframes loader-pulse {
    0%, 100% { text-shadow: 0 0 30px rgba(255,159,0,0.4); }
    50%       { text-shadow: 0 0 60px rgba(255,159,0,0.8), 0 0 100px rgba(255,159,0,0.3); }
}

.loader-bar-wrap {
    height: 2px;
    width: 200px;
    background: rgba(255,255,255,0.05);
    overflow: hidden;
    position: relative;
    margin-bottom: 0.75rem;
    border-radius: 1px;
}

.loader-bar-fill {
    height: 100%;
    background: var(--dmt-pure);
    transition: width 0.3s ease;
    box-shadow: 0 0 20px #FF9F00, 0 0 40px rgba(255,159,0,0.4);
    position: relative;
}

.loader-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6));
}

.loader-pct {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.4em;
    text-transform: uppercase;
}

/* --- MAIN BACKGROUND: DOT GRID --- */
main.flex-1 {
    background: #080808;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,159,0,0.08) 1px, transparent 0);
    background-size: 32px 32px;
    position: relative;
}

main.flex-1::before {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255,159,0,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* --- SIDEBAR ENHANCEMENT --- */
aside {
    background: rgba(5,5,5,0.96) !important;
    border-right: 1px solid rgba(255,159,0,0.08) !important;
    backdrop-filter: blur(24px) !important;
}

aside .nav-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

aside .nav-btn::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--dmt-pure);
    transform: scaleY(0);
    transition: transform 0.2s ease;
    border-radius: 2px;
}

aside .nav-btn:hover::before,
aside .nav-btn.active::before {
    transform: scaleY(1);
}

aside .nav-btn:hover {
    background: rgba(255,159,0,0.06) !important;
    color: rgba(255,255,255,0.9) !important;
    padding-left: 18px;
}

aside .nav-btn.active {
    background: rgba(255,159,0,0.08) !important;
    color: var(--dmt-pure) !important;
    padding-left: 18px;
}

/* Sidebar title glow */
aside h1 {
    font-family: 'Orbitron', monospace !important;
}

/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    background: transparent;
    min-height: 100vh;
}

/* Dot grid background specific to hero */
.hero-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,159,0,0.1) 1px, transparent 0);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    pointer-events: none;
}

/* Orange radial glow orb */
.hero-glow-orb {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,159,0,0.07) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: orb-breathe 6s ease-in-out infinite;
}

@keyframes orb-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* Candlestick chart overlay */
.hero-chart-container {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    height: 200px;
    pointer-events: none;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.hero-chart-svg {
    width: 100%;
    height: 100%;
    opacity: 0.35;
}

/* Corner market data decorations */
.hero-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

.hero-corner-tl { top: 2rem; left: 2rem; align-items: flex-start; }
.hero-corner-tr { top: 2rem; right: 2rem; align-items: flex-end; }

.corner-label {
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
}

.corner-value {
    font-weight: 700;
}

/* Hero badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,159,0,0.7);
    border: 1px solid rgba(255,159,0,0.2);
    background: rgba(255,159,0,0.05);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dmt-pure);
    box-shadow: 0 0 8px var(--dmt-pure);
    animation: badge-blink 2s ease-in-out infinite;
}

@keyframes badge-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Hero title */
.hero-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.hero-title-accent {
    position: relative;
    display: inline-block;
}

.hero-title-accent::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--dmt-pure), transparent);
    border-radius: 2px;
    animation: underline-glow 3s ease-in-out infinite;
}

@keyframes underline-glow {
    0%, 100% { opacity: 0.5; box-shadow: none; }
    50% { opacity: 1; box-shadow: 0 0 20px var(--dmt-pure); }
}

/* Hero subtitle */
.hero-subtitle {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.8rem, 2vw, 1rem);
    color: rgba(255,255,255,0.4);
    margin-bottom: 2.5rem;
    max-width: 500px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
    letter-spacing: 0.03em;
}

/* Hero CTA button */
.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--dmt-pure);
    color: #000;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    box-shadow: 0 0 40px rgba(255,159,0,0.3), 0 0 80px rgba(255,159,0,0.1);
    margin-bottom: 3rem;
    overflow: hidden;
}

.hero-cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    border-radius: 999px;
}

.hero-cta-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 60px rgba(255,159,0,0.5), 0 0 120px rgba(255,159,0,0.2);
}

.hero-cta-btn:active {
    transform: scale(0.98);
}

.hero-cta-icon {
    transition: transform 0.3s ease;
}

.hero-cta-btn:hover .hero-cta-icon {
    transform: translateX(4px);
}

/* Hero stats row */
.hero-stats-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hero-stat-num {
    font-family: 'Orbitron', monospace;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--dmt-pure);
    letter-spacing: -0.02em;
    text-shadow: 0 0 20px rgba(255,159,0,0.4);
}

.hero-stat-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.hero-stat-divider {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.12), transparent);
}

/* --- TICKER TAPE --- */
.hero-ticker-tape {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.6);
    border-top: 1px solid rgba(255,159,0,0.1);
    padding: 8px 0;
    z-index: 2;
}

.ticker-track {
    display: flex;
    gap: 2rem;
    align-items: center;
    white-space: nowrap;
    animation: ticker-scroll 30s linear infinite;
    width: max-content;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Share Tech Mono', monospace;
}

.ticker-sym {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ticker-val {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.ticker-sep {
    color: rgba(255,255,255,0.1);
    font-size: 0.7rem;
}

/* --- ENHANCED GLASS CARDS --- */
.glass {
    background: rgba(255,255,255,0.02) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.glass:hover {
    border-color: rgba(255,159,0,0.12) !important;
    box-shadow: 0 0 40px rgba(255,159,0,0.04);
}

/* Card bottom accent line glow */
.border-b-4.border-dmt {
    border-bottom-color: var(--dmt-pure) !important;
    box-shadow: 0 4px 20px rgba(255,159,0,0.15);
}

/* --- GLOW CARD ENHANCEMENT (onboarding) --- */
.glow-card-container {
    width: 420px;
    background: rgba(255,255,255,0.03);
    box-shadow: 0 0 100px rgba(255,159,0,0.1);
}

.glow-card-content {
    background: #0a0a0a !important;
}

/* --- DASHBOARD SECTION --- */
#dashboard {
    position: relative;
    z-index: 1;
}

/* Coins card enhancement */
#dashboard .glass h4 {
    font-family: 'Orbitron', monospace;
}

/* --- RANK TEXT FONTS --- */
#user-rank {
    font-family: 'Orbitron', monospace !important;
}

/* --- MARKET KILLZONE LED enhancement --- */
.led-indicator {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.05);
}

.zone-active .led-indicator {
    animation: led-pulse 1.5s ease-in-out infinite;
}

@keyframes led-pulse {
    0%, 100% { box-shadow: 0 0 6px #FF9800, 0 0 12px rgba(255,152,0,0.4); }
    50%       { box-shadow: 0 0 14px #FF9800, 0 0 28px rgba(255,152,0,0.6); }
}

/* --- SECTION HEADINGS --- */
section h2 {
    font-family: 'Orbitron', monospace;
}

/* --- ENHANCED MODAL --- */
.dmt-modal-content {
    background: rgba(8,8,8,0.98) !important;
    border: 1px solid rgba(255,159,0,0.15) !important;
    box-shadow: 0 0 80px rgba(255,159,0,0.08), 0 25px 50px rgba(0,0,0,0.8) !important;
}

/* --- LEADERBOARD ROW FONT --- */
#leaderboard_body tr td {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
}

/* --- BUTTONS FONT --- */
.btn-confirm, .btn-cancel {
    font-family: 'Orbitron', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}

/* --- CTA IN OTHER SECTIONS --- */
button[class*="bg-dmt-pure"] {
    font-family: 'Orbitron', monospace;
    letter-spacing: 0.1em;
}

/* --- PROFILE MODAL ENHANCEMENT --- */
#profileModal > div {
    background: rgba(8,8,8,0.98) !important;
    border: 1px solid rgba(255,159,0,0.12) !important;
    box-shadow: 0 0 80px rgba(255,159,0,0.06) !important;
}

/* --- SCROLLBAR THEMING --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255,159,0,0.2);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255,159,0,0.4);
}

/* --- INPUT FOCUS STATES --- */
input:focus, select:focus, textarea:focus {
    border-color: rgba(255,159,0,0.4) !important;
    box-shadow: 0 0 0 2px rgba(255,159,0,0.08);
    outline: none;
}

/* --- MOBILE RESPONSIVE FIXES --- */
@media (max-width: 768px) {
    .hero-chart-container { display: none; }
    .hero-corner { display: none; }
    .hero-stats-row { gap: 1rem; }
    .hero-stat-num { font-size: 1.1rem; }
    .hero-badge { font-size: 0.5rem; letter-spacing: 0.1em; }
    .hero-title { font-size: clamp(2.5rem, 10vw, 4rem); }
    .glow-card-container { width: calc(100vw - 3rem); }
}


/* ====================================================
   PATCH v2.1 — Fix legibility + button + active nav
   ==================================================== */

/* --- FIX 1: Botón sidebar — Orbitron demasiado ancho → Share Tech Mono → cabe todo ---*/
.btn-sidebar-login,
.btn-sidebar-logout {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap;
    overflow: hidden;
}

/* --- FIX 2: Nav active = mismo look que hover --- */
aside .nav-btn.active {
    background: rgba(255,159,0,0.08) !important;
    color: var(--dmt-pure) !important;
    padding-left: 18px !important;
}
aside .nav-btn.active::before {
    transform: scaleY(1) !important;
}

/* --- FIX 3: Fuente pequeña — usar Share Tech Mono en elementos < 0.7rem --- */
/* Revertir Orbitron en botones pequeños del juego y market */
.btn-dmt {
    font-family: 'Share Tech Mono', monospace !important;
    letter-spacing: 0.1em;
}
.mkt-tab-btn,
.mkt-cat-btn,
.mkt-close-btn,
.mkt-det-buy {
    font-family: 'Share Tech Mono', monospace !important;
}
.mkt-logo,
.mkt-coins-display {
    font-family: 'Orbitron', monospace !important;
}

/* game HUD buttons */
#game-market-btn,
#game-settings-btn,
#game-back-btn {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em;
}

/* Zone label — Orbitron OK porque es solo 1 frase corta */
#game-zone-label {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.18em;
    padding: 6px 14px !important;  /* ← AÑADIR */
}

/* FPS display */
#game-fps-display {
    font-family: 'Share Tech Mono', monospace !important;
}

/* --- MARKET REDESIGN v2 --- */
#dmt-market-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
#dmt-market-overlay.mkt-visible { opacity: 1; }

#dmt-market-modal {
    width: min(960px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: rgba(6,6,10,0.98);
    border: 1px solid rgba(255,159,0,0.18);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,159,0,0.06),
        0 40px 100px rgba(0,0,0,0.9),
        0 0 60px rgba(255,159,0,0.06);
}

/* Header stripe */
.mkt-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(255,159,0,0.04);
    border-bottom: 1px solid rgba(255,159,0,0.1);
    flex-shrink: 0;
}

.mkt-logo {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--dmt-pure);
    text-shadow: 0 0 20px rgba(255,159,0,0.5);
    letter-spacing: 0.15em;
    margin-right: 4px;
}

.mkt-ctx-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,159,0,0.08);
    border: 1px solid rgba(255,159,0,0.2);
    color: rgba(255,159,0,0.6);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mkt-tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.mkt-tab-btn {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.1em;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}
.mkt-tab-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.mkt-tab-btn.active {
    background: rgba(255,159,0,0.12);
    border-color: rgba(255,159,0,0.35);
    color: var(--dmt-pure);
}

.mkt-coins-display {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Orbitron', monospace !important;
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--dmt-pure);
    padding: 6px 14px;
    background: rgba(255,159,0,0.06);
    border: 1px solid rgba(255,159,0,0.2);
    border-radius: 8px;
    text-shadow: 0 0 15px rgba(255,159,0,0.4);
}

.mkt-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
    flex-shrink: 0;
}
.mkt-close-btn:hover { background: rgba(255,60,60,0.15); border-color: rgba(255,60,60,0.3); color: #ff5555; }

/* Body / panels */
.mkt-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.mkt-tab-panel{display:none;height:100%;overflow:hidden;flex-direction:column;min-height:0;}
.mkt-tab-panel.active{display:flex;}

/* Store layout */
.mkt-store-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    height: 100%;
    overflow: hidden;
}

/* Category tabs */
.mkt-cat-tabs {
    display: flex;
    gap: 6px;
    padding: 14px 16px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mkt-cat-btn {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mkt-cat-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.mkt-cat-btn.active {
    background: rgba(255,159,0,0.1);
    border-color: rgba(255,159,0,0.3);
    color: var(--dmt-pure);
}

/* Items grid */
.mkt-items-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,0.04);
}

.mkt-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1;
    align-content: start;
}
.mkt-items-grid::-webkit-scrollbar { width: 3px; }
.mkt-items-grid::-webkit-scrollbar-thumb { background: rgba(255,159,0,0.25); border-radius: 2px; }

/* Item cards */
.mkt-item-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.22s ease;
    position: relative;
}
.mkt-item-card:hover {
    border-color: rgba(255,159,0,0.25);
    background: rgba(255,159,0,0.04);
    transform: translateY(-2px);
}
.mkt-item-card.selected {
    border-color: rgba(255,159,0,0.6);
    background: rgba(255,159,0,0.07);
    box-shadow: 0 0 20px rgba(255,159,0,0.12);
}
.mkt-item-card.owned-card { border-color: rgba(76,175,80,0.35); }

.mkt-card-preview {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
    overflow: visible;
}

.mkt-card-info { padding: 10px 12px; }

.mkt-card-rarity {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.48rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 700;
}

.mkt-card-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    color: #e8e8e8;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.mkt-card-price {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: var(--dmt-pure);
    font-weight: 700;
}

.mkt-card-owned-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(76,175,80,0.2);
    border: 1px solid rgba(76,175,80,0.4);
    color: #4CAF50;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.42rem;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}

/* Detail column */
.mkt-detail-col {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.3);
    border-left: 1px solid rgba(255,255,255,0.04);
    overflow-y: auto;
}

.mkt-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,0.12);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    text-align: center;
    padding: 20px;
}
.mkt-detail-empty i { font-size: 2rem; opacity: 0.5; }

/* Detail panel contents */
.mkt-det-preview {
    padding: 20px 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    min-height: 180px;
    justify-content: center;
    background: rgba(0,0,0,0.25);
}

.mkt-prev-lbl {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.45rem;
    color: rgba(255,255,255,0.2);
    letter-spacing: 0.18em;
    align-self: flex-start;
    text-transform: uppercase;
}

.mkt-det-info { padding: 14px 16px 18px; flex: 1; }

.mkt-det-rarity {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    margin-bottom: 5px;
    font-weight: 700;
    text-transform: uppercase;
}

.mkt-det-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}

.mkt-det-desc {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.8;
    margin-bottom: 14px;
}

.mkt-det-price-box {
    padding: 10px 12px;
    background: rgba(255,159,0,0.04);
    border: 1px solid rgba(255,159,0,0.12);
    border-radius: 8px;
    margin-bottom: 12px;
}

.mkt-det-cost { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

.mkt-det-num {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--dmt-pure);
}

.mkt-det-lbl {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.5rem;
    color: rgba(255,159,0,0.5);
    letter-spacing: 0.1em;
}

.mkt-det-bal {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.3);
}
.mkt-det-bal.red { color: rgba(244,67,54,0.7); }

.mkt-det-buy {
    width: 100%;
    padding: 12px;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.65rem !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
    background: rgba(255,159,0,0.14);
    border: 1px solid rgba(255,159,0,0.5);
    border-radius: 8px;
    color: var(--dmt-pure);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
}
.mkt-det-buy:hover:not(.disabled) {
    background: rgba(255,159,0,0.25);
    box-shadow: 0 0 20px rgba(255,159,0,0.2);
    transform: translateY(-1px);
}
.mkt-det-buy.disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(80%); }

.mkt-det-owned {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    color: rgba(76,175,80,0.75);
    padding: 10px 12px;
    background: rgba(76,175,80,0.05);
    border: 1px solid rgba(76,175,80,0.12);
    border-radius: 8px;
}

/* Inventory */
.mkt-inv-top {
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.mkt-equipped-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.mkt-eq-pill { display: flex; align-items: center; gap: 6px; font-family: 'Share Tech Mono', monospace; font-size: 0.52rem; }
.mkt-eq-lbl { color: rgba(255,255,255,0.25); }
.mkt-eq-pill span:last-child { color: var(--dmt-pure); font-weight: bold; }
.mkt-inv-hint { font-family: 'Share Tech Mono', monospace; font-size: 0.5rem; color: rgba(255,255,255,0.2); }

.mkt-inv-grid {
    padding: 14px 18px;
    overflow-y: auto;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    align-content: start;
}
.mkt-inv-grid::-webkit-scrollbar { width: 3px; }
.mkt-inv-grid::-webkit-scrollbar-thumb { background: rgba(255,159,0,0.25); }

.mkt-inv-info { padding: 12px 14px 10px; display: flex; flex-direction: column; flex: 1; }


.mkt-inv-card{
    background:rgba(255,255,255,0.025);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:10px;
    display:flex;flex-direction:column;overflow:hidden;
    box-sizing:border-box;
    min-height:180px;
    transition:border-color 0.2s;
    position: relative;
}
.mkt-inv-card:hover { border-color: rgba(255,255,255,0.14); }
.mkt-inv-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--ic);
    opacity: 0.5;
    box-shadow: 0 0 8px var(--ic);
}
.mkt-inv-card.mkt-inv-equipped {
    border-color: rgba(76,175,80,0.4);
    box-shadow: 0 0 14px rgba(76,175,80,0.08);
    position: relative;
    overflow: hidden;
}

/* UNCOMMON — sin shimmer, solo borde sutil */
.mkt-inv-card.mkt-inv-equipped[data-rarity="uncommon"]::before {
    display: none;
}

/* RARE — shimmer lento */
.mkt-inv-card.mkt-inv-equipped[data-rarity="rare"]::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        color-mix(in srgb, var(--ic) 18%, transparent) 50%,
        transparent 60%
    );
    animation: mkt-shimmer 4s ease-in-out infinite;
    z-index: 1; pointer-events: none;
}

/* EPIC — shimmer rápido + borde pulsante */
.mkt-inv-card.mkt-inv-equipped[data-rarity="epic"]::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 35%,
        color-mix(in srgb, var(--ic) 28%, transparent) 50%,
        transparent 65%
    );
    animation: mkt-shimmer 2s ease-in-out infinite;
    z-index: 1; pointer-events: none;
}
.mkt-inv-card.mkt-inv-equipped[data-rarity="epic"] {
    animation: mkt-epic-pulse 2s ease-in-out infinite;
}
@keyframes mkt-epic-pulse {
    0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--ic) 30%, transparent); }
    50%       { box-shadow: 0 0 20px color-mix(in srgb, var(--ic) 60%, transparent); }
}

/* LEGENDARY — partículas doradas + shimmer agresivo */
.mkt-inv-card.mkt-inv-equipped[data-rarity="legendary"]::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 80%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        color-mix(in srgb, var(--ic) 40%, transparent) 50%,
        transparent 70%
    );
    animation: mkt-shimmer 1.2s ease-in-out infinite;
    z-index: 1; pointer-events: none;
}
.mkt-inv-card.mkt-inv-equipped[data-rarity="legendary"] {
    animation: mkt-legendary-pulse 1.5s ease-in-out infinite;
}
@keyframes mkt-legendary-pulse {
    0%, 100% { box-shadow: 0 0 12px var(--ic), 0 0 30px color-mix(in srgb, var(--ic) 40%, transparent); }
    50%       { box-shadow: 0 0 25px var(--ic), 0 0 60px color-mix(in srgb, var(--ic) 60%, transparent); }
}

@keyframes mkt-shimmer {
    0%   { left: -100%; }
    50%  { left: 150%; }
    100% { left: 150%; }
}


.mkt-inv-preview {
    height: 80px;
    min-height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    overflow: visible;
    position: relative;
}

.mkt-inv-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.42rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ic);
    background: color-mix(in srgb, var(--ic) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--ic) 40%, transparent);
    border-radius: 4px;
    padding: 2px 6px;
    text-transform: uppercase;
    z-index: 2;
}

.mkt-inv-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    color: #ddd;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.mkt-inv-sub {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.5rem;
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex:1;
}

.mkt-inv-eq-btn {
    width: 100%;
    padding: 7px 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem !important;
    letter-spacing: 0.08em;
    cursor: pointer;
    background: rgba(76,175,80,0.1);
    border: 1px solid rgba(76,175,80,0.35);
    border-radius: 6px;
    color: #4CAF50;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-transform: uppercase;
}
.mkt-inv-eq-btn:hover { background: rgba(76,175,80,0.22); }
.mkt-inv-eq-btn.unequip { background: rgba(244,67,54,0.08); border-color: rgba(244,67,54,0.3); color: #F44336; }
.mkt-inv-eq-btn.unequip:hover { background: rgba(244,67,54,0.18); }

.mkt-inv-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,0.15);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    text-align: center;
    line-height: 1.7;
}
.mkt-inv-empty i { font-size: 2rem; color: rgba(255,255,255,0.08); }

/* ── UNBOXING OVERLAY ── */
#dmt-unbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
#dmt-unbox-overlay.dmt-unbox-visible {
    opacity: 1;
    pointer-events: all;
}
.dmt-unbox-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#dmt-unbox-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.dmt-unbox-card {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
    width: min(220px, 85vw);
    background: #0e0e1c;
    border-radius: 16px;
    overflow: hidden;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.09);
}
.dmt-unbox-preview {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}
.dmt-unbox-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
}
.dmt-unbox-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.dmt-unbox-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.48rem;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.28);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.dmt-unbox-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.06em;
}
.dmt-unbox-rarity {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.dmt-unbox-desc {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.48rem;
    color: rgba(255,255,255,0.3);
    line-height: 1.6;
    margin-bottom: 6px;
}
.dmt-unbox-btn {
    width: 100%;
    padding: 11px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 6px;
}
.dmt-unbox-btn:hover {
    background: rgba(255,255,255,0.11);
    color: #fff;
}

/* --- GAME HUD v3 — zona + botones top-right (estilos base, overrides en bloque HUD v3) --- */
#game-zone-label {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.18em !important;
    border-radius: 6px !important;
    background: rgba(4,4,12,0.9) !important;
    border: 1px solid rgba(255,159,0,0.12) !important;
    backdrop-filter: blur(12px) !important;
}

/* Settings panel fonts */
#game-settings-panel {
    font-family: 'Share Tech Mono', monospace !important;
}
.gsp-title {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.65rem !important;
}
.gsp-label {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.58rem !important;
}
.gsp-qbtn {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.55rem !important;
}
.gsp-hint {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.52rem !important;
}

/* --- HUD prev card --- */
.mkt-prev-hud-name {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.6rem !important;
}
.mkt-prev-hud-rank {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.5rem !important;
}


/* ====================================================
   PATCH v2.2 — Correcciones layout market + nav active
   ==================================================== */

/* Fix: restaurar layout correcto de items list (lista vertical, no grid) */
.mkt-items-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 4px !important;
    padding: 10px 12px !important;
    overflow-y: auto;
    flex: 1;
    align-content: unset !important;
}

/* Fix: item card horizontal con estilo mejorado */
.mkt-item-card {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 10px 13px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.025) !important;
    border-radius: 10px !important;
    overflow: visible !important;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
}
.mkt-item-card:hover {
    border-color: rgba(255,159,0,0.22) !important;
    background: rgba(255,159,0,0.05) !important;
    transform: translateX(3px) !important;
    box-shadow: none !important;
}
.mkt-item-card.selected {
    border-color: rgba(255,159,0,0.55) !important;
    background: rgba(255,159,0,0.08) !important;
    box-shadow: -3px 0 0 0 var(--dmt-pure) !important;
    transform: translateX(3px) !important;
}
.mkt-item-card.owned-card {
    border-color: rgba(76,175,80,0.3) !important;
}

/* Fix: mkt-card-preview no se aplica en lista horizontal — era de mi diseño grid erróneo */
.mkt-card-preview { display: none !important; }
.mkt-card-info { display: none !important; }
.mkt-card-rarity { display: none !important; }
.mkt-card-name { display: none !important; }
.mkt-card-price { display: none !important; }
.mkt-card-owned-badge { display: none !important; }

/* Icono emoji del item */
.mkt-ic-icon {
    font-size: 1.4rem !important;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
    filter: drop-shadow(0 0 8px rgba(255,159,0,0.3));
}

/* Info text */
.mkt-ic-name {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.6rem !important;
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.05em;
}
.mkt-ic-sub {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.5rem !important;
    color: rgba(255,255,255,0.28);
    margin-top: 2px;
}

/* Price / owned badge */
.mkt-ic-price {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.6rem !important;
    color: var(--dmt-pure);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}
.mkt-tag-owned {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.45rem !important;
    padding: 2px 7px;
    background: rgba(76,175,80,0.1);
    border: 1px solid rgba(76,175,80,0.3);
    color: #4CAF50;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

/* Fix: detail panel no usar display:none para mkt-det-preview */
.mkt-det-preview {
    display: flex !important;
}
/* Fix: inventario no recortado */
#mkt-tab-inventory {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
#mkt-tab-inventory.active {
    display: flex !important;
}

/* Fix: inventory grid correcto */
.mkt-inv-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    overflow-y: auto;
    flex: 1;
    align-content: start;
    min-height: 0;
}

/* Fix: overlay display */
#dmt-market-overlay {
    display: none;
    align-items: center;
    justify-content: center;
}
#dmt-market-overlay.mkt-visible {
    display: flex !important;
}

/* ── SIDEBAR BUTTON FIX — Orbitron too wide ── */
.btn-sidebar-login,
.btn-sidebar-logout {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* ── NAV ACTIVE STATE (mismo look que hover) ── */
aside .nav-btn.active {
    background: rgba(255,159,0,0.08) !important;
    color: var(--dmt-pure) !important;
    padding-left: 18px !important;
}
aside .nav-btn.active::before {
    transform: scaleY(1) !important;
}


/* ── HUD preview card enhancement ── */
.mkt-prev-hud-card {
    background: rgba(5,5,10,0.8) !important;
    border: 1px solid rgba(255,159,0,0.12) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    box-shadow: 0 0 40px rgba(255,159,0,0.06);
    width: 100%;
    max-width: 240px;
}

.mkt-prev-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--dmt-pure) 70%, rgba(255,255,255,0.05) 70%);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255,159,0,0.3);
}

/* ── Detail panel name bigger impact ── */
.mkt-det-name {
    font-family: 'Orbitron', monospace !important;
    font-size: 1rem !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 0 20px rgba(255,255,255,0.1);
}

/* ── buy button better glow ── */
.mkt-det-buy:not(.disabled):hover {
    box-shadow: 0 0 30px rgba(255,159,0,0.25) !important;
}

/* ── Modal header subtle glow line ── */
.mkt-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,159,0,0.2), transparent);
    pointer-events: none;
}
#dmt-market-modal {
    position: relative;
}

/* ====================================================
   GAME MODAL + BUTTONS ENHANCEMENT v2.2
   (HUD player card eliminado — ahora es el dock pill)
   ==================================================== */

#game-modal-box {
    background: linear-gradient(160deg, rgba(8,8,18,0.98), rgba(14,10,4,0.98)) !important;
    border: 1px solid rgba(255,159,0,0.15) !important;
    border-radius: 16px !important;
    box-shadow:
        0 0 0 1px rgba(255,159,0,0.06),
        0 30px 80px rgba(0,0,0,0.9),
        0 0 60px rgba(255,159,0,0.05) !important;
    max-height: 80dvh !important;
    overflow-y: auto !important;
}

/* Game modal overlay */
#game-modal-overlay {
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(8px) !important;
}

@media (max-width: 480px) {
    #game-modal-overlay > div {
        width: 96vw !important;
        max-height: 85dvh !important;
    }
}

/* game-btn fonts */
.game-btn-action {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    border-radius: 8px !important;
}
.game-btn-ghost {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
    border-radius: 8px !important;
}

/* Market + Settings + Back buttons (top-right cluster) */
#game-market-btn,
#game-settings-btn,
#game-back-btn {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    background: rgba(4,4,12,0.88) !important;
    border: 1px solid rgba(255,159,0,0.14) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}
#game-market-btn:hover,
#game-settings-btn:hover,
#game-back-btn:hover {
    background: rgba(255,159,0,0.1) !important;
    border-color: rgba(255,159,0,0.38) !important;
    color: var(--dmt-pure) !important;
    transform: translateY(-1px) !important;
}

/* Settings panel */
.gsp-title { font-family: 'Orbitron', monospace !important; }
.gsp-label { font-family: 'Share Tech Mono', monospace !important; }
.gsp-qbtn  { font-family: 'Share Tech Mono', monospace !important; font-size: 0.55rem !important; border-radius: 5px !important; }
.gsp-hint  { font-family: 'Share Tech Mono', monospace !important; }

/* Interact prompt font */
#game-interact-prompt {
    font-family: 'Share Tech Mono', monospace !important;
}


/* ── Ticker dinámico — estados de precio ── */
.ticker-val.ticker-up,
.hero-ticker-tape .ticker-val.ticker-up   { color: #4ade80 !important; }
.ticker-val.ticker-down,
.hero-ticker-tape .ticker-val.ticker-down { color: #f87171 !important; }
.ticker-val.ticker-loading,
.hero-ticker-tape .ticker-val.ticker-loading { color: rgba(255,255,255,0.2) !important; }

@keyframes ticker-flash-anim {
    0%   { background: rgba(255,255,255,0.08); }
    100% { background: transparent; }
}
.ticker-item.ticker-flash {
    animation: ticker-flash-anim 0.4s ease-out forwards;
    border-radius: 3px;
}

/* ====================================================
   DMT STORE — Web Store Section
   ==================================================== */

/* Hero */
.store-hero {
    background: linear-gradient(180deg, rgba(255,159,0,0.04) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,159,0,0.06);
    position: relative;
}
.store-hero-grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,159,0,0.07) 1px, transparent 0);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 40%, transparent 100%);
    pointer-events: none;
}
.store-hero-glow {
    position: absolute;
    width: 500px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,159,0,0.06) 0%, transparent 70%);
    top: 0; left: 50%; transform: translateX(-50%);
    pointer-events: none;
}
.store-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,159,0,0.6);
    border: 1px solid rgba(255,159,0,0.18);
    background: rgba(255,159,0,0.04);
    padding: 5px 14px; border-radius: 999px;
    position: relative; z-index: 1;
}
.store-badge-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--dmt-pure);
    box-shadow: 0 0 6px var(--dmt-pure);
    animation: badge-blink 2s ease-in-out infinite;
}
.store-hero-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900; font-style: italic;
    text-transform: uppercase; letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    position: relative; z-index: 1;
}
.store-hero-sub {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem; color: rgba(255,255,255,0.35);
    max-width: 480px; line-height: 1.7;
    position: relative; z-index: 1;
}

/* Category bar */
.store-cats-bar {
    display: flex; gap: 8px; padding: 16px 24px;
    overflow-x: auto; flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    scrollbar-width: none;
}
.store-cats-bar::-webkit-scrollbar { display: none; }
.store-cat-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 8px 18px; border-radius: 8px; white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent; color: rgba(255,255,255,0.3);
    cursor: pointer; transition: all 0.2s ease;
}
.store-cat-btn:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); }
.store-cat-btn.active {
    background: rgba(255,159,0,0.1);
    border-color: rgba(255,159,0,0.35);
    color: var(--dmt-pure);
}

/* Product grid */
.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding-top: 24px;
}

/* Card */
@keyframes store-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.store-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 12px;
    position: relative; overflow: hidden;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    animation: store-card-in 0.35s ease forwards;
}
.store-card:hover {
    border-color: rgba(255,159,0,0.2);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,159,0,0.06);
}
.store-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,159,0,0.15), transparent);
    opacity: 0; transition: opacity 0.25s;
}
.store-card:hover::before { opacity: 1; }

/* Premium card */
.store-premium-card {
    border-color: rgba(168,85,247,0.2) !important;
    background: linear-gradient(135deg, rgba(168,85,247,0.04) 0%, rgba(255,255,255,0.02) 100%) !important;
}
.store-premium-card:hover {
    border-color: rgba(168,85,247,0.4) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(168,85,247,0.1) !important;
}
.store-premium-card::before {
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.2), transparent) !important;
}
.store-premium-ribbon {
    position: absolute; top: 12px; right: -28px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    color: #fff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.48rem; font-weight: 700; letter-spacing: 0.12em;
    padding: 4px 40px; transform: rotate(35deg);
    box-shadow: 0 2px 12px rgba(168,85,247,0.4);
}

/* Card top */
.store-card-top { display: flex; align-items: center; justify-content: space-between; }
.store-card-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 0 20px color-mix(in srgb, var(--ic-color, #FF9F00) 20%, transparent);
}

/* Category tags */
.store-cat-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.46rem; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
}
.store-cat-tag.pdf         { background: rgba(255,159,0,0.08); border: 1px solid rgba(255,159,0,0.25); color: #FF9F00; }
.store-cat-tag.indicator   { background: rgba(0,229,255,0.06); border: 1px solid rgba(0,229,255,0.2);  color: #00E5FF; }
.store-cat-tag.coupon      { background: rgba(74,222,128,0.06);border: 1px solid rgba(74,222,128,0.2); color: #4ade80; }
.store-cat-tag.mentorship  { background: rgba(255,159,0,0.08); border: 1px solid rgba(255,159,0,0.2);  color: #FF9F00; }

/* Card body */
.store-card-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.82rem; font-weight: 700; color: #e8e8e8;
    letter-spacing: 0.02em; line-height: 1.3;
}
.store-card-desc {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem; color: rgba(255,255,255,0.35);
    line-height: 1.8; flex: 1;
}

/* Card footer */
.store-card-footer {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 12px;
}
.store-card-price {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem; font-weight: 900; color: var(--dmt-pure);
}
.store-price-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.48rem; color: rgba(255,159,0,0.5);
    font-weight: 400; letter-spacing: 0.1em;
    text-transform: uppercase; align-self: flex-end; margin-bottom: 1px;
}
.premium-price {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.58rem !important; font-weight: 700 !important;
    color: #a855f7 !important; gap: 5px;
    display: flex; align-items: center;
}

/* Buttons */
.store-buy-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 8px 16px; border-radius: 8px; cursor: pointer;
    background: rgba(255,159,0,0.1);
    border: 1px solid rgba(255,159,0,0.35);
    color: var(--dmt-pure);
    transition: all 0.2s; flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
}
.store-buy-btn:hover {
    background: rgba(255,159,0,0.22);
    box-shadow: 0 0 20px rgba(255,159,0,0.2);
    transform: translateY(-1px);
}
.store-buy-btn.premium-btn {
    background: rgba(168,85,247,0.1);
    border-color: rgba(168,85,247,0.35);
    color: #c084fc;
}
.store-buy-btn.premium-btn:hover {
    background: rgba(168,85,247,0.2);
    box-shadow: 0 0 20px rgba(168,85,247,0.2);
}

/* ── Battle Pass Teaser ── */
.store-bp-teaser { padding-top: 8px; }
.store-bp-card {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, rgba(15,5,30,0.98) 0%, rgba(8,8,16,0.98) 100%);
    border: 1px solid rgba(168,85,247,0.2);
    border-radius: 20px;
    box-shadow: 0 0 60px rgba(168,85,247,0.06), 0 0 0 1px rgba(168,85,247,0.04);
}
.store-bp-glow {
    position: absolute;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(168,85,247,0.08) 0%, transparent 70%);
    top: -150px; right: -80px; pointer-events: none;
}
.store-bp-content {
    display: flex; gap: 32px; padding: 28px 28px 20px;
    flex-wrap: wrap;
}
.store-bp-left { flex: 1; min-width: 240px; }
.store-bp-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: #a855f7; border: 1px solid rgba(168,85,247,0.3);
    background: rgba(168,85,247,0.06);
    padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
}
.store-bp-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.6rem; font-weight: 900; font-style: italic;
    color: #fff; letter-spacing: -0.02em; margin-bottom: 10px;
}
.store-bp-desc {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem; color: rgba(255,255,255,0.35);
    line-height: 1.9;
}
.store-bp-right { display: flex; align-items: center; }
.store-bp-tier-preview {
    display: flex; flex-direction: column; gap: 10px;
    min-width: 220px;
}
.store-bp-tier {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Share Tech Mono', monospace; font-size: 0.52rem;
}
.store-bp-tier-num {
    color: rgba(168,85,247,0.7); font-weight: 700;
    width: 24px; text-align: center; flex-shrink: 0;
}
.store-bp-tier-bar {
    height: 4px; background: linear-gradient(90deg, #7c3aed, #a855f7);
    border-radius: 2px; flex: 1; max-width: 140px;
    box-shadow: 0 0 8px rgba(168,85,247,0.3);
    transition: width 0.8s ease;
}
.store-bp-tier.locked .store-bp-tier-bar {
    background: rgba(255,255,255,0.08);
    box-shadow: none;
}
.store-bp-tier-reward {
    color: rgba(255,255,255,0.4); white-space: nowrap;
}
.store-bp-tier:not(.locked) .store-bp-tier-reward { color: rgba(255,255,255,0.7); }

/* CTA strip */
.store-bp-cta {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 28px;
    border-top: 1px solid rgba(168,85,247,0.1);
    background: rgba(168,85,247,0.03);
}
.store-bp-cta-txt {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem; color: rgba(255,255,255,0.3);
    letter-spacing: 0.08em;
}
.store-bp-notify-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 9px 20px; border-radius: 8px; cursor: pointer;
    background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(168,85,247,0.1));
    border: 1px solid rgba(168,85,247,0.4); color: #c084fc;
    transition: all 0.25s;
}
.store-bp-notify-btn:hover {
    background: linear-gradient(135deg, rgba(124,58,237,0.35), rgba(168,85,247,0.2));
    box-shadow: 0 0 24px rgba(168,85,247,0.25);
    transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 640px) {
    .store-grid { grid-template-columns: 1fr; }
    .store-bp-content { flex-direction: column; gap: 20px; }
    .store-bp-right { width: 100%; }
    .store-hero-title { font-size: 2rem; }
}


/* ====================================================
   MENTOR PANEL — Tabs + Store Manager + Toggles
   ==================================================== */

/* Tabs */
.mentor-tab {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    color: rgba(255,255,255,0.25);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mentor-tab:hover { color: rgba(255,255,255,0.6); }
.mentor-tab.active {
    color: var(--dmt-pure);
    background: rgba(255,159,0,0.06);
    border-color: rgba(255,159,0,0.15);
}

/* Scrollbar inside modal panels */
.mentor-tab-panel::-webkit-scrollbar { width: 3px; }
.mentor-tab-panel::-webkit-scrollbar-thumb { background: rgba(255,159,0,0.2); border-radius: 2px; }

/* Form labels */
.adm-label {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    margin-bottom: 5px;
}

/* Form inputs */
.adm-input {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    color: #fff;
    outline: none;
    transition: border-color 0.2s;
}
.adm-input:focus {
    border-color: rgba(255,159,0,0.35);
    box-shadow: 0 0 0 2px rgba(255,159,0,0.07);
}
select.adm-input { cursor: pointer; background-color: #0a0a0a; }
textarea.adm-input { line-height: 1.6; }

/* Icon buttons in list rows */
.adm-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.15s;
}
.adm-icon-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }

/* Small badge pills */
.adm-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.44rem;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Toggle switches */
.adm-toggle-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    cursor: pointer;
    user-select: none;
}
.adm-toggle-cb { display: none; }

.adm-track {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
    transition: background 0.25s, border-color 0.25s;
    flex-shrink: 0;
}
.adm-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: transform 0.25s, background 0.25s;
}
.adm-toggle-cb:checked + .adm-track {
    background: rgba(255,159,0,0.25);
    border-color: rgba(255,159,0,0.45);
}
.adm-toggle-cb:checked + .adm-track .adm-thumb {
    transform: translateX(16px);
    background: var(--dmt-pure);
    box-shadow: 0 0 8px rgba(255,159,0,0.5);
}

/* Store limited time badge on cards */
.store-limited-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.48rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.35);
    color: #f59e0b;
    text-transform: uppercase;
    z-index: 2;
    animation: limited-pulse 2s ease-in-out infinite;
}
@keyframes limited-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
    50%       { box-shadow: 0 0 10px 2px rgba(245,158,11,0.15); }
}

/* Firebase Rules hint en store section */
#store-product-grid:empty::after {
    content: '';
}

/* ── LOGO LOADER DMT ─────────────────────────────── */
.dmt-logo-loader {
    width: clamp(200px, 45vw, 340px);
    height: auto;
    display: block;
    margin: 0 auto;
    filter:
        drop-shadow(0 0 12px rgba(255, 159, 0, 0.55))
        drop-shadow(0 0 40px rgba(255, 120, 0, 0.25))
        drop-shadow(0 0 80px rgba(255, 80,  0, 0.10));
    animation: dmt-logo-pulse 3s ease-in-out infinite;
    transform-origin: center;
}

@keyframes dmt-logo-pulse {
    0%   { filter:
        drop-shadow(0 0 8px  rgba(255,159,0,0.4))
        drop-shadow(0 0 30px rgba(255,120,0,0.2))
        drop-shadow(0 0 60px rgba(255,80, 0,0.08)); }
    50%  { filter:
        drop-shadow(0 0 18px rgba(255,159,0,0.75))
        drop-shadow(0 0 55px rgba(255,120,0,0.40))
        drop-shadow(0 0 100px rgba(255,80, 0,0.18)); }
    100% { filter:
        drop-shadow(0 0 8px  rgba(255,159,0,0.4))
        drop-shadow(0 0 30px rgba(255,120,0,0.2))
        drop-shadow(0 0 60px rgba(255,80, 0,0.08)); }
}

@keyframes logo-entrance {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(16px);
        filter: drop-shadow(0 0 0px rgba(255,159,0,0)) blur(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter:
            drop-shadow(0 0 14px rgba(255,159,0,0.6))
            drop-shadow(0 0 45px rgba(255,120,0,0.3));
    }
}

/* ═══════════════════════════════════════════════════════════════
   DMT ACADEMY — FULLSCREEN & LANDSCAPE MODULE
   Agregar al FINAL del style.css existente
   ═══════════════════════════════════════════════════════════════ */

/* ── CONTENEDOR DEL BOTÓN "INICIAR TERMINAL" ────────────────── */
#dmt-start-container {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: #030308;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: fade-in-start 0.4s ease forwards;
}
 
@keyframes fade-in-start {
    from { opacity: 0; }
    to   { opacity: 1; }
}
 
.start-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(0.7rem, 2vw, 0.9rem);
    color: rgba(255,159,0,0.5);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
 
#dmt-start-button {
    font-family: 'Orbitron', monospace;
    font-size: clamp(0.75rem, 2.5vw, 1rem);
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000;
    background: var(--dmt-pure);
    border: none;
    padding: clamp(12px, 3vw, 18px) clamp(28px, 6vw, 48px);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 0 40px rgba(255,159,0,0.4), 0 0 80px rgba(255,159,0,0.15);
    transition: all 0.2s ease;
    animation: pulse-btn 2s ease-in-out infinite;
}
 
#dmt-start-button:not(:disabled):hover {
    transform: scale(1.05);
    box-shadow: 0 0 60px rgba(255,159,0,0.6);
}
 
#dmt-start-button:disabled {
    background: rgba(255,159,0,0.3);
    color: rgba(0,0,0,0.5);
    cursor: not-allowed;
    animation: none;
    box-shadow: none;
}
 
@keyframes pulse-btn {
    0%, 100% { box-shadow: 0 0 30px rgba(255,159,0,0.3); }
    50%       { box-shadow: 0 0 60px rgba(255,159,0,0.6), 0 0 100px rgba(255,159,0,0.2); }
}
 
.start-hint {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.55rem, 1.5vw, 0.7rem);
    color: rgba(255,255,255,0.25);
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.6;
}

/* ── PANTALLA DE BLOQUEO iOS (Fallback Visual) ─────────────────── */
.orientation-lock-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    font-family: 'Share Tech Mono', monospace;
    animation: fadeInLock 0.3s ease-out;
}

@keyframes fadeInLock {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Solo visible en móvil Y en portrait */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .orientation-lock-screen.active {
        display: flex !important;
    }
}

/* Icono del teléfono animado */
.orientation-lock-screen .lock-icon {
    width: 110px;
    height: 110px;
    margin-bottom: 28px;
    animation: rotatePhone 2.2s ease-in-out infinite;
}

@keyframes rotatePhone {
    0%   { transform: rotate(0deg); }
      25% { transform: rotate(-90deg); }
      75% { transform: rotate(-90deg); }
     100% { transform: rotate(0deg); }
}

/* Mensaje principal */
.orientation-lock-screen .lock-title {
    color: #00ff88;
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-align: center;
    margin-bottom: 14px;
    text-shadow: 0 0 25px rgba(0, 255, 136, 0.5);
}

/* Submensaje */
.orientation-lock-screen .lock-subtitle {
    color: #8892b0;
    font-size: clamp(0.75rem, 2vw, 0.95rem);
    text-align: center;
    max-width: 270px;
    line-height: 1.6;
}

/* Efecto scanlines cyberpunk */
.orientation-lock-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 136, 0.025) 2px,
        rgba(0, 255, 136, 0.025) 4px
    );
    pointer-events: none;
}

/* ── MEJORA AL OVERLAY EXISTENTE (#dmt-rotate-overlay) ──────── */
/* Nota: Esto mejora el estilo que YA existe en tu style.css */
#dmt-rotate-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: linear-gradient(135deg, #030308 0%, #0a0a14 50%, #030308 100%);
    display: none;
    align-items: center;
    justify-content: center;
}

#dmt-rotate-overlay .rotate-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

#dmt-rotate-overlay .rotate-icon {
    font-size: 3.5rem;
    color: var(--dmt-pure);
    animation: rotate-spin 1.8s linear infinite;
    filter: drop-shadow(0 0 20px rgba(255, 159, 0, 0.5));
}

@keyframes rotate-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#dmt-rotate-overlay .rotate-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    color: var(--dmt-pure);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(255, 159, 0, 0.4);
}

#dmt-rotate-overlay .rotate-sub {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.6rem, 1.8vw, 0.72rem);
    color: rgba(255, 255, 255, 0.28);
    letter-spacing: 0.12em;
}

/* ═══════════════════════════════════════════════════════════════
   STORE v2 — Image cards, EA badge, info popup, checkout modal
   ═══════════════════════════════════════════════════════════════ */

/* Imagen del card */
.store-card-image-wrap {
    position: relative;
    margin: -16px -16px 0 -16px;
    height: 120px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}
.store-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.store-card:hover .store-card-image {
    transform: scale(1.04);
}

/* Botón info "Ver más" */
.store-info-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,159,0,0.3);
    color: var(--dmt-pure, #FF9F00);
    font-size: 0.62rem;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
}
.store-info-btn:hover {
    background: rgba(255,159,0,0.18);
    border-color: rgba(255,159,0,0.6);
    transform: scale(1.08);
}

/* Indica al usuario que el card es clickeable */
.store-card { cursor: pointer; }

/* EA category badge color */
.store-cat-tag.ea {
    color: #c084fc;
    border-color: rgba(168,85,247,0.4);
    background: rgba(168,85,247,0.08);
}

/* ── Item Detail Popup ── */
.store-detail-content {
    max-width: 680px;
    padding: 0 !important;
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.store-detail-header {
    position: relative;
    background: linear-gradient(180deg, rgba(255,159,0,0.04), transparent);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.store-detail-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}
.store-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.store-detail-icon-large {
    font-size: 4rem;
    text-align: center;
    padding: 30px 0;
    filter: drop-shadow(0 0 24px var(--ic-color, #FF9F00));
}
.store-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: all 0.2s;
    z-index: 2;
}
.store-detail-close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.store-detail-body {
    padding: 24px 28px 28px;
    overflow-y: auto;
    flex: 1;
}
.store-detail-tags {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.store-detail-rarity {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid;
}
.store-detail-premium {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 9px;
    border-radius: 6px;
    color: #c084fc;
    background: rgba(168,85,247,0.1);
    border: 1px solid rgba(168,85,247,0.3);
}
.store-detail-name {
    font-family: 'Orbitron', monospace;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #fff;
    margin: 4px 0 6px;
    line-height: 1.2;
}
.store-detail-shortdesc {
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
    line-height: 1.55;
    margin-bottom: 14px;
}
.store-detail-longdesc {
    color: rgba(255,255,255,0.4);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    line-height: 1.85;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    margin-bottom: 16px;
}
.store-detail-meta {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.66rem;
}
.store-detail-meta td {
    padding: 7px 12px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.store-detail-meta td:first-child {
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: 38%;
}
.store-detail-meta td:last-child {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}
.store-detail-requirements {
    background: rgba(255,159,0,0.04);
    border: 1px solid rgba(255,159,0,0.12);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.store-detail-section-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--dmt-pure, #FF9F00);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.store-detail-requirements p {
    color: rgba(255,255,255,0.55);
    font-size: 0.72rem;
    line-height: 1.6;
    margin: 0;
}
.store-detail-footer {
    margin-top: 8px;
}
.store-detail-buy {
    width: 100%;
    padding: 14px 22px;
    background: linear-gradient(90deg, rgba(255,159,0,0.18), rgba(255,159,0,0.08));
    border: 1px solid rgba(255,159,0,0.4);
    color: var(--dmt-pure, #FF9F00);
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.25s;
}
.store-detail-buy:hover {
    background: linear-gradient(90deg, rgba(255,159,0,0.32), rgba(255,159,0,0.16));
    box-shadow: 0 0 25px rgba(255,159,0,0.2);
}
.store-detail-buy.premium-locked {
    background: rgba(168,85,247,0.08);
    border-color: rgba(168,85,247,0.3);
    color: #c084fc;
    cursor: not-allowed;
}

/* ── Checkout Modal (indicator, EA, mentorship) ── */
.store-checkout-modal-content {
    max-width: 480px;
    padding: 0 !important;
    overflow: hidden;
}
.store-checkout-content {
    padding: 28px 30px 24px;
}
.store-checkout-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.92rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.02em;
    margin: 0 0 10px;
}
.store-checkout-title i {
    color: var(--dmt-pure, #FF9F00);
    margin-right: 6px;
}
.store-checkout-desc {
    color: rgba(255,255,255,0.5);
    font-size: 0.74rem;
    line-height: 1.55;
    margin-bottom: 20px;
}
.store-checkout-field {
    margin-bottom: 16px;
}
.store-checkout-field label {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.store-checkout-field label .req {
    color: #FF5555;
    margin-left: 2px;
}
.store-checkout-field input[type="text"],
.store-checkout-field input[type="email"],
.store-checkout-field textarea {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #fff;
    padding: 11px 14px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    outline: none;
    transition: border-color 0.2s;
    resize: vertical;
}
.store-checkout-field input:focus,
.store-checkout-field textarea:focus {
    border-color: rgba(255,159,0,0.4);
}
.store-checkout-hint {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.3);
    margin-top: 4px;
    line-height: 1.4;
}
.store-radio-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 6px;
    transition: all 0.2s;
}
.store-radio-opt:hover {
    border-color: rgba(255,159,0,0.25);
}
.store-radio-opt input[type="radio"] {
    accent-color: var(--dmt-pure, #FF9F00);
}
.store-radio-opt span {
    color: rgba(255,255,255,0.7);
    font-size: 0.74rem;
}
.store-checkout-email-input {
    margin-top: 8px;
}
.store-checkout-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: rgba(168,85,247,0.04);
    border: 1px solid rgba(168,85,247,0.15);
    border-radius: 10px;
    margin-bottom: 16px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.66rem;
    color: rgba(255,255,255,0.65);
}
.store-checkout-meta i {
    color: #c084fc;
    margin-right: 5px;
}
.store-checkout-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255,159,0,0.05);
    border: 1px solid rgba(255,159,0,0.15);
    border-radius: 10px;
    margin-bottom: 16px;
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
}
.store-checkout-price {
    color: var(--dmt-pure, #FF9F00);
    font-family: 'Orbitron', monospace;
}
.store-checkout-actions {
    display: flex;
    gap: 10px;
}
.store-checkout-cancel,
.store-checkout-confirm {
    flex: 1;
    padding: 12px 18px;
    border-radius: 10px;
    font-family: 'Orbitron', monospace;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
}
.store-checkout-cancel {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
}
.store-checkout-cancel:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.store-checkout-confirm {
    background: linear-gradient(90deg, rgba(255,159,0,0.16), rgba(255,159,0,0.08));
    border-color: rgba(255,159,0,0.4);
    color: var(--dmt-pure, #FF9F00);
}
.store-checkout-confirm:hover {
    background: linear-gradient(90deg, rgba(255,159,0,0.32), rgba(255,159,0,0.16));
    box-shadow: 0 0 22px rgba(255,159,0,0.2);
}

/* ── Premium card adjustments for image cards ── */
.store-card.store-premium-card .store-card-image-wrap {
    background: linear-gradient(180deg, rgba(168,85,247,0.06), transparent);
}

/* ── Mobile adjustments for detail popup ── */
@media (max-width: 640px) {
    .store-detail-content,
    .store-checkout-modal-content {
        max-width: 95vw;
        max-height: 92vh;
    }
    .store-detail-body {
        padding: 18px 18px 22px;
    }
    .store-detail-name {
        font-size: 0.95rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MIS COMPRAS — sección dedicada
   ═══════════════════════════════════════════════════════════════ */

.purchases-hero {
    position: relative;
    padding: 64px 24px 40px;
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.purchases-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,159,0,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,159,0,0.06) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
    pointer-events: none;
}
.purchases-hero-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 280px;
    background: radial-gradient(ellipse, rgba(255,159,0,0.12), transparent 70%);
    pointer-events: none;
}
.purchases-hero-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: var(--dmt-pure, #FF9F00);
    background: rgba(255,159,0,0.08);
    border: 1px solid rgba(255,159,0,0.25);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.purchases-hero-title {
    position: relative;
    font-family: 'Orbitron', monospace;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 12px;
}
.purchases-hero-sub {
    position: relative;
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
    line-height: 1.55;
    max-width: 560px;
    margin: 0 auto;
}

.purchases-filters-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 24px;
    max-width: 900px;
    margin: 0 auto;
}
.purchases-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}
.purchases-filter-btn:hover {
    background: rgba(255,159,0,0.06);
    border-color: rgba(255,159,0,0.2);
    color: #fff;
}
.purchases-filter-btn.active {
    background: rgba(255,159,0,0.14);
    border-color: rgba(255,159,0,0.45);
    color: var(--dmt-pure, #FF9F00);
}
.purchases-count {
    font-size: 0.58rem;
    font-weight: 700;
    background: rgba(255,159,0,0.25);
    color: var(--dmt-pure, #FF9F00);
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}
.purchases-filter-btn.active .purchases-count {
    background: rgba(0,0,0,0.4);
}
.purchases-count:empty { display: none; }

.purchases-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}
.purchases-refresh-btn:hover {
    color: #fff;
    border-color: rgba(255,159,0,0.3);
    transform: rotate(180deg);
}

.purchases-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.purchases-loading,
.purchases-empty {
    text-align: center;
    padding: 60px 24px;
    color: rgba(255,255,255,0.4);
    font-size: 0.82rem;
}
.purchases-empty i { display: block; }
.purchases-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 22px;
    background: rgba(255,159,0,0.1);
    border: 1px solid rgba(255,159,0,0.3);
    color: var(--dmt-pure, #FF9F00);
    border-radius: 10px;
    font-family: 'Orbitron', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.purchases-empty-cta:hover {
    background: rgba(255,159,0,0.22);
    box-shadow: 0 0 20px rgba(255,159,0,0.2);
}

.purchase-card {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.2s;
    animation: purchase-card-in 0.4s ease forwards;
}
@keyframes purchase-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.purchase-card:hover {
    border-color: rgba(255,159,0,0.18);
    background: rgba(255,255,255,0.035);
}

.purchase-card-icon {
    flex-shrink: 0;
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
}

.purchase-card-body {
    flex: 1;
    min-width: 0;
}

.purchase-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.purchase-card-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.purchase-card-status {
    flex-shrink: 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid;
    white-space: nowrap;
}

.purchase-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 12px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.66rem;
    color: rgba(255,255,255,0.4);
}
.purchase-card-meta i {
    margin-right: 4px;
    color: rgba(255,159,0,0.6);
}
.purchase-card-category {
    margin-left: auto;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.15em;
}

.purchase-card-actions {
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.purchase-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,159,0,0.1);
    border: 1px solid rgba(255,159,0,0.3);
    color: var(--dmt-pure, #FF9F00);
    border-radius: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s;
}
.purchase-action-btn:hover {
    background: rgba(255,159,0,0.22);
    box-shadow: 0 0 16px rgba(255,159,0,0.15);
}

.purchase-detail {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}
.purchase-detail i {
    color: var(--dmt-pure, #FF9F00);
    margin-right: 6px;
}
.purchase-detail-success {
    color: rgba(76,175,80,0.85);
}
.purchase-detail-success i {
    color: #4CAF50;
}

.purchase-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 18px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
}
.purchase-detail-lbl {
    color: rgba(255,255,255,0.35);
    margin-right: 4px;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .purchase-card {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    .purchase-card-icon {
        width: 44px; height: 44px;
        font-size: 1.4rem;
    }
    .purchase-card-meta {
        gap: 10px;
        font-size: 0.6rem;
    }
    .purchase-card-category {
        margin-left: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   COIN SHOP — Compra de DMT Coins (Binance Pay)
   ═══════════════════════════════════════════════════════════════ */

/* Shortcut "+Comprar" en el card del balance del dashboard */
.coin-buy-shortcut {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dmt-pure, #FF9F00);
    background: rgba(255,159,0,0.1);
    border: 1px solid rgba(255,159,0,0.3);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}
.coin-buy-shortcut:hover {
    background: rgba(255,159,0,0.22);
    transform: scale(1.04);
    box-shadow: 0 0 16px rgba(255,159,0,0.18);
}

/* Modal */
.coin-shop-content {
    max-width: 880px !important;
    width: 95vw;
    padding: 0 !important;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.coin-shop-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(180deg, rgba(255,159,0,0.04), transparent);
}
.coin-shop-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
}
.coin-shop-title i { color: var(--dmt-pure, #FF9F00); margin-right: 8px; }
.coin-shop-sub {
    color: rgba(255,255,255,0.45);
    font-size: 0.72rem;
    margin: 0;
}
.coin-shop-close {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
}
.coin-shop-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.coin-shop-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 28px;
}

.coin-shop-loading,
.coin-shop-empty,
.coin-shop-error {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}
.coin-shop-error { color: #FF5555; }

/* Grid de packs */
.coin-packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.coin-pack-card {
    position: relative;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 22px 18px 18px;
    text-align: center;
    transition: all 0.25s;
    overflow: hidden;
}
.coin-pack-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(255,159,0,0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.coin-pack-card:hover {
    border-color: rgba(255,159,0,0.3);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,159,0,0.08);
}
.coin-pack-card:hover::before { opacity: 1; }

.coin-pack-card.has-badge {
    border-color: rgba(255,159,0,0.4);
    background: linear-gradient(180deg, rgba(255,159,0,0.04), rgba(255,255,255,0.025) 60%);
}

.coin-pack-badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #FF9F00, #FFB23F);
    color: #000;
    font-family: 'Orbitron', monospace;
    font-size: 0.55rem;
    font-weight: 900;
    padding: 4px 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(255,159,0,0.35);
    z-index: 2;
}

/* Empuja el icono cuando hay badge para que no se choquen */
.coin-pack-card.has-badge .coin-pack-icon {
    margin-top: 14px;
}

.coin-pack-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 16px rgba(255,159,0,0.4));
}

.coin-pack-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

.coin-pack-coins {
    margin-bottom: 4px;
}
.coin-pack-amount {
    font-family: 'Orbitron', monospace;
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--dmt-pure, #FF9F00);
    text-shadow: 0 0 18px rgba(255,159,0,0.35);
}
.coin-pack-lbl {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: -2px;
}

.coin-pack-bonus {
    display: inline-block;
    margin-top: 6px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem;
    color: #4CAF50;
    background: rgba(76,175,80,0.1);
    border: 1px solid rgba(76,175,80,0.3);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.08em;
}

.coin-pack-desc {
    color: rgba(255,255,255,0.4);
    font-size: 0.66rem;
    line-height: 1.4;
    margin: 10px 0;
}

.coin-pack-price {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 12px 0 14px;
}
.coin-pack-price span {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.1em;
    margin-left: 2px;
}

.coin-pack-buy-btn {
    width: 100%;
    padding: 11px;
    background: linear-gradient(90deg, rgba(255,159,0,0.18), rgba(255,159,0,0.08));
    border: 1px solid rgba(255,159,0,0.4);
    color: var(--dmt-pure, #FF9F00);
    border-radius: 10px;
    font-family: 'Orbitron', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.coin-pack-buy-btn:hover:not(:disabled) {
    background: linear-gradient(90deg, rgba(255,159,0,0.32), rgba(255,159,0,0.16));
    box-shadow: 0 0 22px rgba(255,159,0,0.2);
}
.coin-pack-buy-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.coin-shop-footer {
    padding: 14px 18px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.55;
    text-align: center;
}
.coin-shop-footer i { color: #F0B90B; margin-right: 5px; }

/* ── Pantalla de checkout (después de "Comprar") ── */
.coin-checkout {
    text-align: center;
    padding: 8px 0 16px;
}

.coin-checkout-status {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    padding: 18px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    margin-bottom: 20px;
}
.coin-checkout-status i { color: var(--dmt-pure, #FF9F00); margin-right: 8px; }

.coin-checkout-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

.coin-checkout-primary-btn,
.coin-checkout-deeplink-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    font-family: 'Orbitron', monospace;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}
.coin-checkout-primary-btn {
    background: linear-gradient(90deg, #F0B90B, #F8D33A);
    color: #000;
    box-shadow: 0 4px 16px rgba(240,185,11,0.25);
}
.coin-checkout-primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(240,185,11,0.4);
}
.coin-checkout-deeplink-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}
.coin-checkout-deeplink-btn:hover {
    background: rgba(255,255,255,0.1);
}

.coin-checkout-qr {
    padding: 16px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    margin-bottom: 20px;
}
.coin-checkout-qr p {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
}
.coin-checkout-qr-img {
    max-width: 180px;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
}

.coin-checkout-info {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 16px;
    line-height: 1.7;
}
.coin-checkout-info span { color: rgba(255,255,255,0.55); margin-right: 6px; }
.coin-checkout-info code {
    color: var(--dmt-pure, #FF9F00);
    background: rgba(255,159,0,0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
}

.coin-checkout-check-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border-radius: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.coin-checkout-check-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

@media (max-width: 640px) {
    .coin-buy-shortcut {
        top: 10px; right: 10px;
        font-size: 0.52rem;
        padding: 5px 9px;
    }
    .coin-packs-grid {
        grid-template-columns: 1fr 1fr;
    }
    .coin-shop-header {
        padding: 18px 20px 14px;
    }
    .coin-shop-body {
        padding: 18px 20px 22px;
    }
}