/* ── ESTILOS PREMIUM PERSONALIZADOS PARA MDDORMA ── */

/* Contención global y scroll móvil fluido 120Hz sin rotura de inercia */
html {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Fondo base y suavizado de renderizado */
body {
    background-color: #050505 !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, iframe {
    max-width: 100%;
}

/* 🛡️ Carga local ultrarrápida de Material Symbols Outlined (Sin depender de CDN externo ni mostrar texto plano) */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: local('Material Symbols Outlined'),
         url('/assets/fonts/material-symbols-outlined.woff2?v=4') format('woff2');
}

/* Material Symbols Outlined Estricto (Evita que se muestre el texto de la ligadura si la fuente tarda en cargar) */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/* ── ESTILOS VIBRANTES STITCH (PLANES, SOPORTE, BADGES Y BOTONES) ── */
.btn-planes-stitch {
    background-color: #facc15 !important;
    color: #000000 !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 14px rgba(250, 204, 21, 0.45) !important;
}
.btn-planes-stitch:hover {
    background-color: #fde047 !important;
    transform: scale(1.05);
}
.btn-soporte-stitch {
    background-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
}
.btn-soporte-stitch:hover {
    background-color: #3b82f6 !important;
    transform: scale(1.05);
}
.badge-destacado-stitch {
    background-color: rgba(59, 7, 100, 0.9) !important;
    border: 1px solid rgba(168, 85, 247, 0.7) !important;
    color: #e9d5ff !important;
    font-weight: 900 !important;
}
.font-fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}
.badge-nuevo-ep-stitch {
    background: linear-gradient(135deg, #d946ef 0%, #ec4899 50%, #f43f5e 100%) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    letter-spacing: 0.04em !important;
}
.badge-rating-stitch {
    background-color: rgba(0, 0, 0, 0.75) !important;
    border: 1px solid rgba(234, 179, 8, 0.5) !important;
    color: #facc15 !important;
    font-weight: 900 !important;
}
.btn-ver-dorama-stitch {
    background: linear-gradient(135deg, #c026d3 0%, #db2777 50%, #c026d3 100%) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 25px rgba(192, 38, 211, 0.55), 0 2px 10px rgba(219, 39, 119, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.btn-ver-dorama-stitch:hover {
    filter: brightness(1.15);
    box-shadow: 0 10px 30px rgba(192, 38, 211, 0.75) !important;
}
.btn-glass-stitch {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.btn-glass-stitch:hover {
    background-color: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Ocultar barra de scroll global por defecto en elementos horizontales */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* ── CUADRÍCULA DE SERIES STITCH ADAPTABLE ── */
#seriesGridContainer, .series-grid-stitch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}
@media (min-width: 520px) {
    #seriesGridContainer, .series-grid-stitch {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
    }
}
@media (min-width: 768px) {
    #seriesGridContainer, .series-grid-stitch {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }
}
@media (min-width: 1024px) {
    #seriesGridContainer, .series-grid-stitch {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
    }
}
@media (min-width: 1280px) {
    #seriesGridContainer, .series-grid-stitch {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
}

/* Arrastre suave horizontal para sliders */
.cursor-grab {
    cursor: grab !important;
}
.cursor-grabbing {
    cursor: grabbing !important;
    user-select: none !important;
}
.cursor-grabbing * {
    user-select: none !important;
}

/* Scrollbar premium para el chat y carruseles */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(201, 130, 246, 0.25); /* purpleNeon sutil */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 130, 246, 0.5);
}

/* Animación Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Glassmorphism e iluminación neón */
.glass-border {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(13, 13, 13, 0.7);
    backdrop-filter: blur(12px);
}

/* Glow Neón Morado */
.glow-purple {
    box-shadow: 0 0 30px rgba(201, 130, 246, 0.18);
}

/* ── GLOBAL CHAT DRAWER & FLOATING BUTTON ── */
.chat-drawer-container {
    position: fixed;
    z-index: 99999;
    background: rgba(12, 13, 17, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

@media (min-width: 640px) {
    .chat-drawer-container {
        top: auto;
        left: auto;
        right: 24px;
        bottom: 85px;
        width: 390px;
        max-width: calc(100vw - 48px);
        height: 580px;
        max-height: calc(100vh - 110px);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 35px rgba(168, 85, 247, 0.2);
    }
}

@media (max-width: 639px) {
    .chat-drawer-container {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100dvh;
        height: 100vh;
        border-radius: 0;
        border: none;
        padding-top: env(safe-area-inset-top, 0px);
    }
}

.chat-drawer-container.chat-closed {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(20px) scale(0.96);
    display: none !important;
}

.chat-drawer-container.chat-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1);
    display: flex !important;
}

.chat-drawer-header {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

.chat-drawer-tabs {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-shrink: 0;
}

.chat-tab-btn {
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.025em;
    color: #9ca3af;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-tab-btn:hover {
    color: #ffffff;
}

.chat-tab-btn.active {
    background: linear-gradient(to right, #9333ea, #db2777);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

.chat-drawer-input-area {
    padding: 10px 12px;
    background: #0c0d10;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    position: relative;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    z-index: 30;
}

.chat-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99990;
    background: linear-gradient(135deg, #9333ea, #db2777);
    color: white;
    padding: 14px;
    border-radius: 9999px;
    box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.5), 0 0 25px rgba(236, 72, 153, 0.35);
    border: 1px solid rgba(216, 180, 254, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-toggle-btn:hover {
    transform: scale(1.08);
}

.chat-toggle-btn:active {
    transform: scale(0.95);
}

@media (max-width: 639px) {
    .chat-toggle-btn {
        bottom: 76px;
        right: 16px;
        padding: 12px;
    }
}

/* Contenedores de carrusel con snap horizontal fluido */
.snap-x {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.snap-start {
    scroll-snap-align: start;
}

/* Mejoras de usabilidad táctil */
a, button, input {
    touch-action: manipulation;
}

/* ── ULTRA-FLUIDEZ Y RENDIMIENTO EXTREMO (60 FPS) ── */
html {
    -webkit-tap-highlight-color: transparent;
}

/* Aceleración por Hardware GPU para transiciones suaves de 60fps */
.hero-slide,
.group,
button,
a,
.transition-transform,
.transition-all {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Respuesta táctil instantánea sin lag en botones e íconos */
a:active, button:active {
    transition: transform 0.08s ease-out !important;
}

/* Optimización de carga visual de imágenes */
img {
    content-visibility: auto;
}

/* Decodificación Asíncrona por defecto para evitar bloqueos del hilo principal */
img:not([decoding]) {
    decoding: async;
}

/* Scroll táctil nativo hiper-fluido en móviles */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Desplazamiento horizontal con Scroll-Snap estilo streaming (Netflix/Disney+) con soporte vertical fluido */
.scroll-snap-x {
    scroll-snap-type: x proximity !important;
    scroll-padding-left: 0.75rem !important;
    scroll-padding-right: 0.75rem !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
}
.scroll-snap-item {
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
}

.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
}

/* Soporte para iPhone Notch y Gestos Inferiores de Android */
nav.fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
header.fixed.top-0 {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
}

/* ── STITCH PLAYER RESPONSIVE LAYOUT ── */
.stitch-player-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}
@media (min-width: 1024px) {
    .stitch-player-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
    }
}
.stitch-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    width: 100%;
}
.stitch-btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 0.6rem;
    border-radius: 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    background-color: #13121f;
    border: 1px solid #23213a;
    color: #e2e8f0;
    user-select: none;
}
.stitch-btn-action:hover {
    background-color: #1c1a2e;
    border-color: rgba(168, 85, 247, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}
.stitch-btn-action:active {
    transform: scale(0.96);
}
.stitch-card {
    background-color: #0b0b14;
    border: 1px solid #1b1b2a;
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}
.stitch-ep-card {
    background-color: #0b0b14;
    border: 1px solid #1b1b2a;
    border-radius: 1.15rem;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}
.stitch-ep-card:hover {
    background-color: #121124;
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateX(2px);
}
.stitch-ep-card.is-active {
    background-color: #121024;
    border: 2px solid #a855f7;
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.3);
}

/* ── TOP 10 RANKING NETFLIX STYLE ── */
.top10-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    user-select: none;
    cursor: pointer;
    text-decoration: none;
    width: 145px;
}
@media (min-width: 640px) {
    .top10-item {
        width: 165px;
    }
}
.top10-visual {
    display: flex;
    align-items: flex-end;
    position: relative;
    width: 100%;
    height: 155px;
}
@media (min-width: 640px) {
    .top10-visual {
        height: 175px;
    }
}
.top10-num {
    font-size: 86px;
    font-weight: 900;
    line-height: 0.74;
    font-family: 'Impact', 'Outfit', sans-serif;
    color: #050508;
    -webkit-text-stroke: 3px #8b35ea;
    text-shadow: 0 0 16px rgba(139, 53, 234, 0.5), 0 4px 10px rgba(0, 0, 0, 0.9);
    letter-spacing: -6px;
    margin-right: -16px;
    margin-bottom: 0px;
    z-index: 1;
    position: relative;
    pointer-events: none;
    flex-shrink: 0;
    transition: all 0.25s ease;
}
.top10-item:hover .top10-num {
    -webkit-text-stroke-color: #c084fc;
    text-shadow: 0 0 22px rgba(192, 132, 252, 0.8), 0 4px 12px rgba(0, 0, 0, 0.95);
    transform: translateY(-2px);
}
.top10-num.is-double {
    font-size: 72px;
    letter-spacing: -12px;
    margin-right: -22px;
}
.top10-poster-wrap {
    width: 105px;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.85);
    background-color: #121318;
    flex-shrink: 0;
    transition: all 0.25s ease;
}
@media (min-width: 640px) {
    .top10-poster-wrap {
        width: 118px;
    }
}
.top10-item:hover .top10-poster-wrap {
    border-color: rgba(168, 85, 247, 0.7);
    box-shadow: 0 10px 25px rgba(139, 53, 234, 0.35);
    transform: translateY(-2px);
}
.top10-title-wrap {
    width: 100%;
    padding: 0 4px;
    text-align: center;
}
.top10-title {
    font-size: 11px;
    font-weight: 700;
    color: #d1d5db;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    transition: color 0.2s ease;
}
.top10-item:hover .top10-title {
    color: #e9d5ff;
}

/* ── CENTRO DE NOTIFICACIONES MDDORMA (FONDO SÓLIDO OPACO) ── */
.notif-dropdown-solid {
    background-color: #0d0818 !important;
    background-image: linear-gradient(180deg, #160d2e 0%, #0d0818 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.98), 0 0 30px rgba(147, 51, 234, 0.25) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.notif-header-solid {
    background-color: #1a0e36 !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.3) !important;
}
.notif-banner-solid {
    background: linear-gradient(90deg, #26114a 0%, #170d2f 100%) !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.2) !important;
}
.notif-feed-solid {
    background-color: #0d0818 !important;
}
.notif-item-solid {
    background-color: #0d0818 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.notif-item-solid:hover {
    background-color: #1f123b !important;
}
.notif-empty-state {
    background-color: #0d0818 !important;
}

/* ── MARCOS Y HALOS DE PRESTIGIO PARA AVATARES (ADMIN, VIP Y COMUNIDAD) ── */
.avatar-neon-ring {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(12, 13, 20, 0.8) 70%);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.35), inset 0 0 15px rgba(168, 85, 247, 0.3);
}
.avatar-frame-admin {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, rgba(236, 72, 153, 0.3) 50%, rgba(12, 13, 20, 0.9) 85%) !important;
    border: 2.5px solid #fbbf24 !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.6), 0 0 45px rgba(236, 72, 153, 0.35), inset 0 0 15px rgba(251, 191, 36, 0.45) !important;
    animation: pulseAdminFrame 3s infinite alternate ease-in-out;
}
@keyframes pulseAdminFrame {
    0% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.5), inset 0 0 10px rgba(251, 191, 36, 0.35); }
    100% { box-shadow: 0 0 40px rgba(245, 158, 11, 0.85), 0 0 60px rgba(236, 72, 153, 0.5), inset 0 0 20px rgba(251, 191, 36, 0.65); }
}
.avatar-frame-vip {
    background: radial-gradient(circle, rgba(234, 179, 8, 0.35) 0%, rgba(20, 16, 32, 0.85) 75%) !important;
    border: 2px solid #eab308 !important;
    box-shadow: 0 0 25px rgba(234, 179, 8, 0.55), inset 0 0 12px rgba(234, 179, 8, 0.35) !important;
    animation: pulseVipFrame 3.5s infinite alternate ease-in-out;
}
@keyframes pulseVipFrame {
    0% { box-shadow: 0 0 16px rgba(234, 179, 8, 0.4); }
    100% { box-shadow: 0 0 35px rgba(234, 179, 8, 0.75), inset 0 0 16px rgba(234, 179, 8, 0.5); }
}
.badge-admin-elite {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.25) 0%, rgba(236, 72, 153, 0.3) 100%);
    border: 1px solid rgba(244, 63, 94, 0.5);
    color: #fecdd3;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.3);
}
.badge-vip-plus {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(234, 179, 8, 0.3) 100%);
    border: 1px solid rgba(245, 158, 11, 0.55);
    color: #fde68a;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

/* ── AJUSTE UNIVERSAL Y NITIDEZ DE PORTADAS DE DORAMAS (2:3 TOP-CENTER) ── */
.aspect-\[2\/3\],
.poster-container-2-3 {
    aspect-ratio: 2 / 3 !important;
    position: relative;
    overflow: hidden;
    background-color: #0f0d18;
}

.aspect-\[2\/3\] img,
.poster-container-2-3 img,
.dorama-cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Backdrop ambiental cuando la portada se usa como fondo de banner */
.hero-ambient-poster-bg {
    filter: blur(28px) brightness(0.45);
    transform: scale(1.18);
    transform-origin: center center;
}

/* ── OPTIMIZACIÓN TÁCTIL MÓVIL (Instant Tap & Zero Delay) ── */
.top10-item,
.dorama-catalog-card,
.estreno-card,
.touch-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

@media (pointer: coarse) {
    #tendenciasTrack,
    #proximosEstrenosTrack {
        touch-action: manipulation !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        overscroll-behavior-y: auto !important;
        user-select: auto !important;
    }
}

/* ── 3. ESQUELETOS PULSANTES CON BRILLO SHIMMER PÚRPURA (Skeleton Screens 120 FPS) ── */
@keyframes mddormaShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, #131420 0%, #291b3e 35%, #3c2460 50%, #291b3e 65%, #131420 100%) !important;
    background-size: 250% 100% !important;
    animation: mddormaShimmer 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(168, 85, 247, 0.12) !important;
}

.skeleton-card {
    border-radius: 1rem;
    aspect-ratio: 2/3;
    width: 100%;
    position: relative;
    overflow: hidden;
    will-change: background-position;
}

.skeleton-text {
    height: 12px;
    border-radius: 6px;
    margin-top: 8px;
    width: 80%;
}
.skeleton-text-sm {
    height: 10px;
    border-radius: 5px;
    margin-top: 6px;
    width: 55%;
}

/* Aceleración por hardware forzada para 90Hz / 120Hz */
.hardware-accel,
.skeleton-shimmer,
.dorama-card,
.top10-item {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}