/* =========================================
   NYX PORTAL - STORIES CARD: CYBERPUNK JAPANESE EDIT
   Style Scope: .nyx-card--stories-cyberpunk
   ========================================= */

/* 1) Contenedor principal – cyberpunk premium */
.popular-tales-card.nyx-card--stories-cyberpunk {
    position: relative;
    border-radius: 20px;
    border: 1px solid rgba(255, 0, 180, .28);
    background:
        radial-gradient(120% 120% at 10% 0%, rgba(0, 255, 255, .10), transparent 55%),
        radial-gradient(120% 120% at 90% 10%, rgba(255, 0, 180, .10), transparent 55%),
        linear-gradient(180deg, rgba(8, 8, 14, .88), rgba(6, 6, 10, .94));
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(0, 255, 255, .08) inset;
    overflow: hidden;
    /* solo recorte estético, NO scroll interno en el contenedor principal */
}

/* 2) Glow sutil (NO exagerado) */
.popular-tales-card.nyx-card--stories-cyberpunk::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg,
            rgba(0, 255, 255, 0),
            rgba(0, 255, 255, .22),
            rgba(255, 0, 180, .22),
            rgba(255, 0, 180, 0));
    filter: blur(14px);
    opacity: .50;
    pointer-events: none;
    z-index: 0;
}

/* 3) Scanlines MUY sutiles */
.popular-tales-card.nyx-card--stories-cyberpunk::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg,
            rgba(255, 255, 255, .06) 0px,
            rgba(255, 255, 255, .06) 1px,
            rgba(0, 0, 0, 0) 3px,
            rgba(0, 0, 0, 0) 7px);
    opacity: .06;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

/* 4) Marca japonesa decorativa (NO tapa nada) */
.popular-tales-card.nyx-card--stories-cyberpunk .nyx-jp-mark {
    position: absolute;
    top: 18px;
    right: 16px;
    font-family: 'Cinzel', serif, sans-serif;
    /* Fallback added just in case */
    font-size: 46px;
    letter-spacing: .08em;
    opacity: .08;
    color: rgba(0, 255, 255, .95);
    text-shadow: 0 0 18px rgba(0, 255, 255, .25);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Ensure content stays above effects */
.popular-tales-card.nyx-card--stories-cyberpunk>div,
.popular-tales-card.nyx-card--stories-cyberpunk .pt-list {
    position: relative;
    z-index: 2;
}

/* 5) Tipografía del título SOLO dentro de esta card (sin tocar texto) */
.popular-tales-card.nyx-card--stories-cyberpunk h2,
.popular-tales-card.nyx-card--stories-cyberpunk .pt-title,
.popular-tales-card.nyx-card--stories-cyberpunk .card-title {
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: 0 0 22px rgba(255, 0, 180, .22);
}

/* 6) Items de historias: hover premium sin romper layout */
.popular-tales-card.nyx-card--stories-cyberpunk a,
.popular-tales-card.nyx-card--stories-cyberpunk .pt-item,
.popular-tales-card.nyx-card--stories-cyberpunk .tale-item {
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Ensure clean separators */
}

.popular-tales-card.nyx-card--stories-cyberpunk a:hover,
.popular-tales-card.nyx-card--stories-cyberpunk .pt-item:hover,
.popular-tales-card.nyx-card--stories-cyberpunk .tale-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .40), 0 0 0 1px rgba(0, 255, 255, .12) inset;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid #00ffff;
}

/* 7) Badges Locked/Open: solo skin, mismo estado */
.popular-tales-card.nyx-card--stories-cyberpunk .pt-status-badge,
.popular-tales-card.nyx-card--stories-cyberpunk .badge,
.popular-tales-card.nyx-card--stories-cyberpunk .locked,
.popular-tales-card.nyx-card--stories-cyberpunk .open {
    border: 1px solid rgba(0, 255, 255, .22);
    box-shadow: 0 0 18px rgba(0, 255, 255, .10);
}

.popular-tales-card.nyx-card--stories-cyberpunk .locked {
    color: #ff2e63;
    border-color: rgba(255, 46, 99, 0.4);
    background: rgba(20, 0, 5, 0.6);
}

.popular-tales-card.nyx-card--stories-cyberpunk .open {
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.4);
    background: rgba(0, 20, 10, 0.6);
}

/* Thumbnails Override */
.popular-tales-card.nyx-card--stories-cyberpunk .tale-thumb {
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
}

.popular-tales-card.nyx-card--stories-cyberpunk .tale-thumb img {
    filter: contrast(1.1) saturate(1.1);
}

/* 8) Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .popular-tales-card.nyx-card--stories-cyberpunk,
    .popular-tales-card.nyx-card--stories-cyberpunk::before,
    .popular-tales-card.nyx-card--stories-cyberpunk::after,
    .popular-tales-card.nyx-card--stories-cyberpunk a,
    .popular-tales-card.nyx-card--stories-cyberpunk .tale-item,
    .popular-tales-card.nyx-card--stories-cyberpunk .tale-thumb {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .popular-tales-card.nyx-card--stories-cyberpunk a:hover,
    .popular-tales-card.nyx-card--stories-cyberpunk .tale-item:hover {
        transform: none;
    }
}