/* ═══════════════════════════════════════════════════════════════
   CODEX VESTIGIA - MOBILE ENHANCEMENTS
   Este archivo contiene SOLO estilos para móvil.
   No afecta en absoluto la versión de escritorio.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MOBILE-ONLY MEDIA QUERY (max-width: 768px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ───────────────────────────────────────────────────────────
       VARIABLES MÓVIL - Espaciados más compactos
       ─────────────────────────────────────────────────────────── */
    :root {
        --space-xs: 0.375rem;
        --space-sm: 0.75rem;
        --space-md: 1.25rem;
        --space-lg: 2rem;
        --space-xl: 3rem;
    }

    /* ───────────────────────────────────────────────────────────
       HERO SECTION - Más compacto e impactante
       ─────────────────────────────────────────────────────────── */
    .hero {
        min-height: 28vh;
        padding: var(--space-lg) var(--space-sm);
        padding-top: calc(var(--space-lg) + env(safe-area-inset-top));
    }

    .hero::before {
        width: 300px;
        height: 300px;
    }

    .hero-title {
        font-size: clamp(2.2rem, 14vw, 3.5rem);
        letter-spacing: 0.08em;
        line-height: 1.1;
    }

    /* Logo header móvil */
    .hero-logo-container {
        gap: 0.3rem;
    }

    .hero-logo-book {
        width: 60px;
    }

    .hero-logo-text {
        width: min(600px, 92vw);
    }

    .hero-subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.3em;
        margin-top: var(--space-xs);
        padding: 0 var(--space-sm);
    }

    .hero-line {
        width: 80px;
        margin-top: var(--space-sm);
    }

    /* ───────────────────────────────────────────────────────────
       SMART NAVBAR MOBILE - Hamburger + Overlay
       ─────────────────────────────────────────────────────────── */

    /* Ocultar enlaces de navegación en móvil */
    .smart-navbar__links {
        display: none !important;
    }

    /* Mostrar botón hamburguesa en móvil */
    .smart-navbar__hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        margin-left: auto;
        -webkit-tap-highlight-color: transparent;
    }

    .hamburger-icon {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
        width: 26px;
    }

    .hamburger-icon__line {
        display: block;
        height: 2px;
        border-radius: 1px;
        background: linear-gradient(90deg, rgba(34, 211, 238, 0.6), #fff);
        box-shadow: 0 0 6px rgba(34, 211, 238, 0.4);
        transition: all 0.3s ease;
    }

    .hamburger-icon__line--short {
        width: 55%;
    }

    .hamburger-icon__line--long {
        width: 100%;
    }

    .hamburger-icon__line--mid {
        width: 75%;
    }

    .smart-navbar__hamburger:active .hamburger-icon__line {
        box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
    }

    /* Overlay links — tamaño móvil */
    .mobile-nav-overlay__link {
        font-size: 2rem;
    }

    /* ───────────────────────────────────────────────────────────
       NAVIGATION - Scroll horizontal suave
       ─────────────────────────────────────────────────────────── */
    .navigation {
        padding: var(--space-xs) 0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .nav-container {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-xs);
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--space-xs) var(--space-sm);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--space-sm);
    }

    .nav-container::-webkit-scrollbar {
        display: none;
    }

    .nav-btn {
        flex-shrink: 0;
        padding: 0.5rem 0.9rem;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        border-radius: 20px;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .nav-btn:hover {
        transform: none;
    }

    .nav-btn:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }

    /* ───────────────────────────────────────────────────────────
       SHOWCASE SECTIONS - Diferenciación clara entre secciones
       ─────────────────────────────────────────────────────────── */
    .archivista-showcase {
        margin: 0 var(--space-xs);
        margin-top: var(--space-xl);
        padding: var(--space-md) var(--space-sm);
        padding-top: 0;
        border-radius: 12px;
        position: relative;
    }

    /* Primera sección sin margen superior extra */
    .archivista-showcase:first-of-type {
        margin-top: var(--space-md);
    }

    .showcase-corner {
        width: 24px;
        height: 24px;
    }

    .showcase-corner::before {
        width: 20px;
        height: 2px;
    }

    .showcase-corner::after {
        height: 20px;
        width: 2px;
    }

    /* Reduce animation intensity on mobile for performance */
    .archivista-showcase::before {
        animation: none;
        opacity: 0.5;
    }

    /* Floating particles - reduce on mobile */
    .floating-particles-container {
        opacity: 0.6;
    }

    .floating-particle {
        /* Reduce glow intensity on mobile */
        box-shadow: none !important;
    }

    /* Subtle adjustments for section variants */
    .ultimas-entradas-showcase {
        border-color: rgba(6, 182, 212, 0.3);
    }

    .work-in-progress-showcase {
        border-style: dashed;
    }

    .work-in-progress-showcase .showcase-corner::before,
    .work-in-progress-showcase .showcase-corner::after {
        animation: none;
        opacity: 0.5;
    }

    /* Ecos de la Periferia - Tonos turquesa en móvil */
    .ecos-periferia-showcase {
        border-color: rgba(45, 212, 191, 0.3);
    }

    .ecos-periferia-showcase .showcase-header {
        background: linear-gradient(
            180deg,
            rgba(45, 212, 191, 0.15) 0%,
            rgba(45, 212, 191, 0.05) 60%,
            transparent 100%
        );
        border-top-color: rgba(45, 212, 191, 0.5);
    }

    /* Selección del Cronista - Tonos dorados en móvil */
    .seleccion-cronista-showcase {
        border-color: rgba(212, 175, 55, 0.3);
    }

    .seleccion-cronista-showcase .showcase-header {
        background: linear-gradient(
            180deg,
            rgba(212, 175, 55, 0.15) 0%,
            rgba(212, 175, 55, 0.05) 60%,
            transparent 100%
        );
        border-top-color: rgba(212, 175, 55, 0.5);
    }

    .seleccion-cronista-showcase .showcase-header::before {
        background: linear-gradient(90deg, transparent, var(--gold-metallic), transparent);
    }

    .seleccion-cronista-showcase .showcase-emblem {
        background: rgba(212, 175, 55, 0.15);
        border-color: rgba(212, 175, 55, 0.3);
    }

    /* Home Codex Score móvil */
    .home-codex-score {
        padding: var(--space-sm);
        margin: var(--space-md) 0;
    }

    .home-codex-score .score-ring-container {
        width: 80px;
        height: 80px;
    }

    .home-codex-score .codex-score-label {
        font-size: 0.55rem;
        top: -15px;
    }

    .home-codex-score .score-number {
        font-size: 1.2rem;
    }

    .home-amazon-btn {
        padding: 8px 16px;
        font-size: 0.75rem;
    }

    .home-amazon-btn .amazon-icon {
        width: 16px;
        height: 16px;
    }

    /* Header de sección - MUY visible en móvil */
    .showcase-header {
        margin-bottom: var(--space-md);
        margin-left: calc(-1 * var(--space-sm));
        margin-right: calc(-1 * var(--space-sm));
        padding: var(--space-md) var(--space-sm);
        flex-direction: column;
        gap: var(--space-xs);
        background: linear-gradient(
            180deg,
            rgba(212, 175, 55, 0.12) 0%,
            rgba(212, 175, 55, 0.04) 60%,
            transparent 100%
        );
        border-top: 2px solid rgba(212, 175, 55, 0.4);
        position: relative;
    }

    /* Línea decorativa superior del header */
    .showcase-header::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--gold-metallic), transparent);
        border-radius: 2px;
    }

    .showcase-header-line {
        display: none;
    }

    .showcase-header-content {
        padding: 0;
    }

    .showcase-emblem {
        width: 42px;
        height: 42px;
        padding: 8px;
        margin-bottom: var(--space-xs);
        background: rgba(212, 175, 55, 0.15);
        border: 1px solid rgba(212, 175, 55, 0.3);
    }

    .showcase-title {
        font-size: 1.25rem;
        letter-spacing: 0.15em;
    }

    .showcase-subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        opacity: 0.8;
    }

    /* ───────────────────────────────────────────────────────────
       BOOKS GRID - Grid 2 columnas con espacio vertical generoso
       ─────────────────────────────────────────────────────────── */
    .books-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem 1.75rem !important;
    }

    .showcase-content .books-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem 1.75rem !important;
    }

    /* ───────────────────────────────────────────────────────────
       Layout asimétrico 1-2-2-1 (todas las secciones)
       ─────────────────────────────────────────────────────────── */
    .books-grid {
        gap: 1.5rem 1.75rem !important;
    }

    .books-grid .book-card:nth-child(6n+1),
    .books-grid .book-card:nth-child(6n) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 55%;
        max-width: 180px;
    }

    /* Nuevos Vestigios: grid uniforme de 2 columnas */
    .ultimas-entradas-showcase .books-grid .book-card:nth-child(6n+1),
    .ultimas-entradas-showcase .books-grid .book-card:nth-child(6n) {
        grid-column: auto;
        justify-self: auto;
        width: 100%;
        max-width: none;
    }

    /* Selección del Cronista: grid uniforme de 2 columnas */
    .seleccion-cronista-showcase .books-grid .book-card:nth-child(6n+1),
    .seleccion-cronista-showcase .books-grid .book-card:nth-child(6n) {
        grid-column: auto;
        justify-self: auto;
        width: 100%;
        max-width: none;
    }

    /* Ecos de la Periferia: grid uniforme de 2 columnas */
    .ecos-periferia-showcase .books-grid .book-card:nth-child(6n+1),
    .ecos-periferia-showcase .books-grid .book-card:nth-child(6n) {
        grid-column: auto;
        justify-self: auto;
        width: 100%;
        max-width: none;
    }

    .library {
        padding: var(--space-md) var(--space-sm);
    }

    /* ───────────────────────────────────────────────────────────
       BOOK CARD - Tomo Arcano Móvil
       ─────────────────────────────────────────────────────────── */
    .book-card {
        border-radius: 4px;
        max-width: none !important;
        /* Reducir efecto 3D en móvil para mejor rendimiento */
        perspective: none;
        transform-style: flat;
    }

    /* Marco más sutil en móvil */
    .book-card::before {
        inset: -2px;
        opacity: 0.5;
    }

    .book-card:hover {
        transform: none;
    }

    .book-card:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    /* Upcoming card - no active press effect */
    .upcoming-book-card:active {
        transform: none;
    }

    .upcoming-date-badge {
        font-size: 0.65rem;
        padding: 5px 8px;
        gap: 4px;
    }
    .upcoming-date-icon {
        width: 11px;
        height: 11px;
    }

    .book-cover-container {
        border-radius: 3px 3px 0 0;
        overflow: hidden;
    }

    /* Lomo más delgado en móvil */
    .book-cover-container::before {
        width: 8px;
    }

    .book-cover {
        border-radius: 3px 3px 0 0;
    }

    .book-info {
        padding: var(--space-xs) 0.25rem 0;
    }

    .codex-tag-num {
        font-size: 0.6rem;
    }
    .codex-tag-dot {
        width: 4px;
        height: 4px;
    }
    .codex-tag {
        padding: 1px 5px 1px 4px;
        gap: 3px;
    }

    .book-title {
        font-size: 0.85rem;
        line-height: 1.25;
        margin-bottom: 0.2rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .book-author {
        font-size: 0.65rem;
        margin-bottom: 0.3rem;
    }

    .book-quote-preview {
        display: none;
    }

    .book-card-footer {
        display: flex;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        align-items: center;
        padding: 0 var(--space-sm);
        margin: 0;
        border: none;
    }

    .book-card-footer .card-genre-label {
        display: none;
    }

    .book-card-footer .card-score-value {
        font-size: 1.4rem;
    }

    .book-info {
        padding-right: 48px;
    }

    .codex-seal {
        width: 90px;
        height: 90px;
        top: var(--space-sm, 8px);
        right: var(--space-sm, 8px);
    }

    .codex-seal-gold .cseal-text { fill: rgba(240, 208, 96, 0.9); }
    .codex-seal-legendary .cseal-text { fill: rgba(103, 232, 249, 0.9); }
    .codex-seal-stable .cseal-text { fill: rgba(196, 181, 253, 0.9); }
    .codex-seal-neutral .cseal-text { fill: rgba(203, 213, 225, 0.8); }
    .codex-seal-critical .cseal-text { fill: rgba(252, 165, 165, 0.9); }

    /* ───────────────────────────────────────────────────────────
       MODAL - Experiencia fullscreen mejorada
       ─────────────────────────────────────────────────────────── */
    .modal-backdrop {
        padding: 0;
        align-items: stretch;
    }

    .modal-content {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        background: var(--slate-950);
    }

    .modal-content-cronista-full {
        max-width: 100%;
    }

    /* Botón cerrar - posición fija fuera del contenido del modal */
    .modal-close {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        width: 44px;
        height: 44px;
        background: rgba(2, 6, 23, 0.95);
        border: 1px solid var(--slate-600);
        border-radius: 50%;
        z-index: 1002;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    }

    .modal-close:active {
        transform: scale(0.92);
        background: rgba(2, 6, 23, 1);
    }

    /* Grid a una columna con mejor flujo */
    .cronista-full-grid {
        grid-template-columns: 1fr;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Contenido principal con mejor padding */
    .cronista-full-content {
        padding: var(--space-md) var(--space-sm);
        padding-top: calc(60px + env(safe-area-inset-top));
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }

    .cronista-full-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-sm);
    }

    /* Portada más grande y centrada */
    .cronista-full-cover {
        width: 45%;
        max-width: 180px;
        margin-bottom: var(--space-sm);
    }

    .cronista-full-cover-inner {
        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.7),
            0 0 40px rgba(212, 175, 55, 0.1);
    }

    /* Texto centrado con mejor legibilidad */
    .cronista-full-texto {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .cronista-full-texto .modal-divider {
        margin-left: auto;
        margin-right: auto;
        max-width: 180px;
    }

    /* Título del libro */
    .modal-title {
        font-size: 1.5rem;
        line-height: 1.2;
        margin-bottom: var(--space-xs);
    }

    .modal-author-label {
        font-size: 0.75rem;
        margin-bottom: var(--space-xs);
    }

    .modal-divider {
        margin: var(--space-sm) auto;
    }

    /* Sinopsis con mejor tipografía */
    .modal-synopsis {
        font-size: 0.95rem;
        line-height: 1.75;
        margin-bottom: var(--space-sm);
        text-align: left;
        padding: 0 var(--space-xs);
    }

    /* Cita destacada */
    .modal-quote {
        padding: var(--space-sm);
        margin: var(--space-sm) 0;
        border-radius: 8px;
        background: rgba(212, 175, 55, 0.05);
        border-left: 3px solid var(--gold-metallic);
    }

    .modal-quote p {
        font-size: 0.9rem;
        line-height: 1.6;
        font-style: italic;
    }

    /* ADN Narrativo compacto */
    .cronista-full-dna {
        margin-top: var(--space-sm);
        padding-top: var(--space-sm);
    }

    .neon-label {
        font-size: 0.6rem;
        margin-bottom: var(--space-xs);
        letter-spacing: 0.15em;
        text-align: left;
    }

    .neon-bar-container {
        height: 14px;
        border-radius: 7px;
    }

    .neon-legend {
        margin-top: var(--space-sm);
        gap: var(--space-sm);
        flex-wrap: wrap;
        justify-content: center;
        display: flex;
    }

    .neon-legend-item,
    .featured-book-spectrum .neon-legend-item {
        flex-direction: column;
        gap: 0.15rem;
        align-items: center;
        text-align: center;
        min-width: 55px;
    }

    .neon-value,
    .featured-book-spectrum .neon-value {
        font-size: 1.1rem;
        font-weight: 600;
        order: 1;
    }

    .cronista-full-dna .neon-value {
        font-size: 1.1rem;
    }

    .neon-name,
    .featured-book-spectrum .neon-label-text {
        font-size: 0.6rem;
        order: 2;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.85;
    }

    /* Ocultar badge "VESTIGIO ESENCIAL" en móvil */
    .featured-book-badge-mobile {
        display: none !important;
    }

    /* Ocultar video de columna derecha en móvil */
    .cronista-full-video {
        display: none !important;
    }

    /* Ocultar también el panel de review (exégesis) de desktop en móvil */
    .cronista-full-video.cronista-review-panel {
        display: none !important;
    }

    /* Video móvil integrado */
    .cronista-video-mobile {
        display: block;
        position: relative;
        margin: var(--space-md) calc(-1 * var(--space-sm));
        width: calc(100% + 2 * var(--space-sm));
        overflow: hidden;
        aspect-ratio: 4/3;
        background: var(--slate-900);
    }

    /* Review móvil (sin video) - mismos estilos que video dual */
    .cronista-video-mobile.cronista-review-mobile {
        background: transparent;
    }

    .cronista-video-mobile.cronista-review-mobile .cronista-review-wrapper {
        aspect-ratio: 4/3;
        width: 100%;
        height: 100%;
    }

    .cronista-video-mobile .cronista-full-video-element,
    .modal-content .cronista-video-mobile .cronista-full-video-element,
    video.cronista-full-video-element {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 30% !important;
    }

    /* Móvil: ocultar botón desktop, mostrar botón móvil */
    .amazon-desktop {
        display: none !important;
    }

    .amazon-mobile {
        display: flex !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       BOTÓN AMAZON - STICKY EN MÓVIL (768px)
       ═══════════════════════════════════════════════════════════════ */
    .cronista-full-amazon.amazon-mobile {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 1rem var(--space-sm) !important;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10000 !important;
        background: linear-gradient(
            135deg,
            var(--gold-metallic) 0%,
            var(--gold-dark) 100%
        ) !important;
        box-shadow:
            0 -4px 20px rgba(0, 0, 0, 0.5),
            0 -2px 10px rgba(212, 175, 55, 0.25) !important;
        will-change: transform, opacity;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .amazon-link.cronista-full-amazon {
        width: 100% !important;
        text-align: center !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

    .cronista-full-amazon:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease;
    }
}

/* Sobreescribir específicamente la media query de 640px de styles.css */
@media (max-width: 640px) {
    .cronista-video-mobile .cronista-full-video-element,
    .modal-content .cronista-video-mobile .cronista-full-video-element,
    video.cronista-full-video-element {
        object-position: center 30% !important;
    }

    .cronista-full-video-wrapper {
        height: 100%;
    }

    .video-play-btn {
        width: 56px;
        height: 56px;
        background: rgba(212, 175, 55, 0.9);
        backdrop-filter: blur(8px);
    }

    .video-play-btn svg {
        width: 22px;
        height: 22px;
    }

    /* ───────────────────────────────────────────────────────────
       FOOTER - Más compacto
       ─────────────────────────────────────────────────────────── */
    .footer {
        padding: var(--space-md) var(--space-sm);
        padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    }

    .footer-title {
        font-size: 0.8rem;
        letter-spacing: 0.15em;
    }

    .footer-line {
        width: 60px;
    }

    .footer-tagline {
        font-size: 0.65rem;
    }

    .footer-symbols {
        font-size: 0.8rem;
        gap: var(--space-xs);
    }

    /* ───────────────────────────────────────────────────────────
       SCROLLBAR - Oculta en móvil
       ─────────────────────────────────────────────────────────── */
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* ───────────────────────────────────────────────────────────
       TOUCH IMPROVEMENTS
       ─────────────────────────────────────────────────────────── */

    /* Eliminar delay de tap en iOS */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Mejor feedback táctil para tarjetas */
    .book-card:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    /* Prevenir zoom accidental en inputs */
    input, select, textarea {
        font-size: 16px;
    }

    /* ───────────────────────────────────────────────────────────
       AUTH BUTTON - Móvil
       ─────────────────────────────────────────────────────────── */
    .auth-button {
        font-size: 0.65rem;
    }

    .auth-signin {
        padding: 0.4rem 0.7rem;
    }

    .auth-signin .google-icon {
        width: 14px;
        height: 14px;
    }

    .auth-avatar {
        width: 24px;
        height: 24px;
    }

    .auth-name {
        display: none;
    }

    .auth-signout {
        padding: 0.3rem 0.5rem;
        font-size: 0.6rem;
    }

    /* ───────────────────────────────────────────────────────────
       VOTING PANEL - Móvil
       ─────────────────────────────────────────────────────────── */

    /* Reset cover wrapper on mobile - don't interfere with layout */
    .cronista-full-cover-wrapper {
        display: contents;
        width: auto;
    }

    /* Desktop panel hidden on mobile */
    .cronista-full-cover-wrapper > .voting-panel:not(.voting-panel-mobile) {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       MOBILE HUD UNIFICADO - Barra inferior (Score + Amazon)
       ═══════════════════════════════════════════════════════════════ */

    .mobile-hud {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 72px;
        padding: 0 0.8rem !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        /* Fondo unificado cristal oscuro */
        background: rgba(10, 10, 15, 0.92) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        /* Borde superior degradado cyan → dorado */
        border-top: 1px solid transparent !important;
        background-image:
            linear-gradient(rgba(10, 10, 15, 0.92), rgba(10, 10, 15, 0.92)),
            linear-gradient(90deg, rgba(34, 211, 238, 0.6) 0%, rgba(212, 175, 55, 0.7) 100%) !important;
        background-origin: border-box !important;
        background-clip: padding-box, border-box !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 10000 !important;
        box-shadow:
            0 -2px 12px rgba(0, 0, 0, 0.4) !important;
        align-items: center !important;
        gap: 0.8rem;
    }

    /* Zona Izquierda: Score - tap to expand */
    .hud-score-zone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        flex: 1;
        padding: 0 0.5rem;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Dial container con label encima */
    .hud-score-dial {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* Label CODEX SCORE encima del dial */
    .hud-score-label {
        font-family: var(--font-mono);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        color: rgba(148, 163, 184, 0.7);
        text-transform: uppercase;
    }

    /* Label hereda color del dial */
    .hud-score-dial.gold .hud-score-label {
        color: rgba(212, 175, 55, 0.7);
    }

    .hud-score-dial.legendary .hud-score-label {
        color: rgba(34, 211, 238, 0.6);
    }

    .hud-score-dial.stable .hud-score-label {
        color: rgba(167, 139, 250, 0.6);
    }

    .hud-score-dial.neutral .hud-score-label {
        color: rgba(148, 163, 184, 0.5);
    }

    .hud-score-dial.critical .hud-score-label {
        color: rgba(220, 38, 38, 0.6);
    }

    /* Vote CTA pill next to score dial */
    .hud-vote-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.15rem;
        transition: all 0.25s ease;
    }

    .hud-cta-text {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        color: var(--slate-400);
        display: flex;
        align-items: center;
        gap: 0.2rem;
        white-space: nowrap;
    }

    .hud-cta-chevron {
        width: 6px;
        height: 10px;
        flex-shrink: 0;
    }

    /* Not voted: golden accent with subtle pulse */
    .hud-vote-cta.not-voted .hud-cta-text {
        color: rgba(212, 175, 55, 0.85);
        animation: hud-cta-glow 3s ease-in-out infinite;
    }

    @keyframes hud-cta-glow {
        0%, 100% { opacity: 0.7; }
        50% { opacity: 1; }
    }

    /* Already voted: show score as mini badge */
    .hud-vote-cta.voted .hud-cta-text {
        flex-direction: column;
        align-items: center;
        gap: 0;
        line-height: 1;
    }

    .hud-cta-score {
        font-size: 0.85rem;
        font-weight: 700;
        color: #D4AF37;
        text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
        letter-spacing: -0.02em;
    }

    .hud-cta-sub {
        font-size: 0.42rem;
        font-weight: 400;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--slate-500);
    }

    /* Voted indicator dot */
    .hud-voted-dot {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 6px;
        height: 6px;
        background: #D4AF37;
        border-radius: 50%;
        box-shadow: 0 0 6px rgba(212, 175, 55, 0.8);
        z-index: 3;
    }

    /* ═══ BOTTOM SHEET ═══ */
    .bottom-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(2, 6, 23, 0.82);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 10001;
    }

    .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(
            180deg,
            rgba(15, 23, 42, 0.98) 0%,
            rgba(8, 12, 24, 0.99) 100%
        );
        border-top: 1px solid rgba(100, 116, 139, 0.3);
        border-radius: 20px 20px 0 0;
        padding: 0.8rem 1.5rem 2rem;
        z-index: 10002;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .bottom-sheet-handle {
        width: 36px;
        height: 4px;
        background: rgba(100, 116, 139, 0.4);
        border-radius: 2px;
        margin-bottom: 0.3rem;
    }

    .bottom-sheet-close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(100, 116, 139, 0.1);
        border: 1px solid rgba(100, 116, 139, 0.2);
        border-radius: 50%;
        cursor: pointer;
        color: var(--slate-400);
        transition: all 0.2s ease;
        padding: 0;
    }

    .bottom-sheet-close svg {
        width: 10px;
        height: 10px;
    }

    .bottom-sheet-close:active {
        background: rgba(100, 116, 139, 0.25);
        color: var(--slate-200);
    }

    /* Bottom sheet ring */
    .bottom-sheet-ring-container {
        position: relative;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bottom-sheet-ring-label {
        position: absolute;
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-mono);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.15em;
        color: var(--slate-400);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .bottom-sheet-ring {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .bottom-sheet-ring-container .ring-bg {
        stroke: rgba(100, 116, 139, 0.2);
        stroke-linecap: butt;
    }

    .bottom-sheet-ring-container .ring-progress {
        stroke-linecap: butt;
        transition: stroke-dashoffset 0.6s ease;
    }

    /* Ring colors for bottom sheet */
    .bottom-sheet-ring-container.gold .ring-progress { stroke: #D4AF37; filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8)); }
    .bottom-sheet-ring-container.legendary .ring-progress { stroke: #22D3EE; filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.7)); }
    .bottom-sheet-ring-container.stable .ring-progress { stroke: #a78bfa; filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.7)); }
    .bottom-sheet-ring-container.neutral .ring-progress { stroke: #94a3b8; filter: drop-shadow(0 0 6px rgba(148, 163, 184, 0.5)); }
    .bottom-sheet-ring-container.critical .ring-progress { stroke: #991B1B; filter: drop-shadow(0 0 6px rgba(153, 27, 27, 0.6)); }

    .bottom-sheet-ring-label {
        color: var(--slate-400);
    }
    .bottom-sheet-ring-container.gold .bottom-sheet-ring-label { color: rgba(212, 175, 55, 0.7); }
    .bottom-sheet-ring-container.legendary .bottom-sheet-ring-label { color: rgba(34, 211, 238, 0.6); }
    .bottom-sheet-ring-container.stable .bottom-sheet-ring-label { color: rgba(167, 139, 250, 0.6); }
    .bottom-sheet-ring-container.neutral .bottom-sheet-ring-label { color: rgba(148, 163, 184, 0.5); }
    .bottom-sheet-ring-container.critical .bottom-sheet-ring-label { color: rgba(220, 38, 38, 0.6); }

    .bottom-sheet-score-number {
        position: relative;
        z-index: 2;
        font-family: var(--font-mono);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.03em;
    }

    .bottom-sheet-ring-container.gold .bottom-sheet-score-number { color: #D4AF37; text-shadow: 0 0 15px rgba(212, 175, 55, 0.6); }
    .bottom-sheet-ring-container.legendary .bottom-sheet-score-number { color: #22D3EE; text-shadow: 0 0 15px rgba(34, 211, 238, 0.6); }
    .bottom-sheet-ring-container.stable .bottom-sheet-score-number { color: #a78bfa; text-shadow: 0 0 15px rgba(167, 139, 250, 0.6); }
    .bottom-sheet-ring-container.neutral .bottom-sheet-score-number { color: #94a3b8; text-shadow: 0 0 12px rgba(148, 163, 184, 0.4); }
    .bottom-sheet-ring-container.critical .bottom-sheet-score-number { color: #DC2626; text-shadow: 0 0 12px rgba(220, 38, 38, 0.5); }

    /* Bottom sheet slider */
    .bottom-sheet .vote-slider-container {
        width: 100%;
        max-width: 280px;
        padding: 0.4rem 0;
    }

    .bottom-sheet .vote-slider {
        height: 4px;
    }

    .bottom-sheet .vote-slider::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
        margin-top: -9px;
    }

    .bottom-sheet .vote-slider::-moz-range-thumb {
        width: 22px;
        height: 22px;
    }

    .bottom-sheet .vote-slider-nota,
    .bottom-sheet .vote-slider-hint {
        font-size: 0.7rem;
    }

    .bottom-sheet .vote-slider-nota strong {
        font-size: 0.85rem;
    }

    /* Bottom sheet actions */
    .bottom-sheet-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        max-width: 280px;
    }

    .bottom-sheet-confirm {
        width: 100%;
        padding: 0.75rem;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        background: rgba(148, 163, 184, 0.15);
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 8px;
        color: var(--slate-200);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .bottom-sheet-confirm:active {
        transform: scale(0.97);
    }

    /* Tier-colored confirm button */
    .bottom-sheet-confirm.gold {
        background: rgba(212, 175, 55, 0.15);
        border-color: rgba(212, 175, 55, 0.4);
        color: #D4AF37;
        box-shadow: 0 0 12px rgba(212, 175, 55, 0.15);
    }

    .bottom-sheet-confirm.legendary {
        background: rgba(34, 211, 238, 0.15);
        border-color: rgba(34, 211, 238, 0.4);
        color: #22D3EE;
        box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
    }

    .bottom-sheet-confirm.stable {
        background: rgba(167, 139, 250, 0.15);
        border-color: rgba(167, 139, 250, 0.4);
        color: #a78bfa;
        box-shadow: 0 0 12px rgba(167, 139, 250, 0.15);
    }

    .bottom-sheet-confirm.critical {
        background: rgba(220, 38, 38, 0.15);
        border-color: rgba(220, 38, 38, 0.4);
        color: #DC2626;
    }

    .bottom-sheet-remove {
        background: none;
        border: none;
        font-family: var(--font-mono);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(239, 68, 68, 0.6);
        cursor: pointer;
        padding: 0.4rem 0.8rem;
        transition: color 0.2s ease;
    }

    .bottom-sheet-remove:active {
        color: #EF4444;
    }

    /* Score Ring HUD */
    .hud-score-ring {
        position: relative;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hud-score-ring svg {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .hud-ring-bg {
        stroke: rgba(100, 116, 139, 0.3);
    }

    .hud-ring-progress {
        stroke-linecap: butt;
        transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
    }

    /* Colores del ring - ahora en .hud-score-dial */
    .hud-score-dial.gold .hud-ring-progress {
        stroke: #D4AF37;
        filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.7));
    }

    .hud-score-dial.legendary .hud-ring-progress {
        stroke: #22D3EE;
        filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.6));
    }

    .hud-score-dial.stable .hud-ring-progress {
        stroke: #a78bfa;
        filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.6));
    }

    .hud-score-dial.neutral .hud-ring-progress {
        stroke: #94a3b8;
        filter: drop-shadow(0 0 4px rgba(148, 163, 184, 0.5));
    }

    .hud-score-dial.critical .hud-ring-progress {
        stroke: #991B1B;
        filter: drop-shadow(0 0 4px rgba(153, 27, 27, 0.5));
    }

    /* Score Number */
    .hud-score-number {
        position: relative;
        z-index: 2;
        font-family: var(--font-mono);
        font-size: 1.3rem;
        font-weight: 700;
        transition: color 0.3s ease;
    }

    .hud-score-dial.gold .hud-score-number {
        color: #D4AF37;
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    }

    .hud-score-dial.legendary .hud-score-number {
        color: #22D3EE;
        text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
    }

    .hud-score-dial.stable .hud-score-number {
        color: #a78bfa;
        text-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
    }

    .hud-score-dial.neutral .hud-score-number {
        color: #94a3b8;
        text-shadow: 0 0 8px rgba(148, 163, 184, 0.4);
    }

    .hud-score-dial.critical .hud-score-number {
        color: #DC2626;
        text-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
    }

    /* Separador vertical - sutil */
    .hud-separator {
        width: 1px;
        height: 32px;
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(100, 116, 139, 0.2) 30%,
            rgba(100, 116, 139, 0.2) 70%,
            transparent 100%
        );
    }

    /* Zona Derecha: Amazon - Botón Pill flotante */
    .hud-amazon-zone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        flex: 1;
        height: 48px;
        padding: 0 1.2rem;
        background: linear-gradient(
            135deg,
            #BBA284 0%,
            #AF915E 50%,
            #927546 100%
        );
        color: #0A0A0F;
        text-decoration: none;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition: all 0.2s ease;
        border-radius: 24px;
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(212, 175, 55, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    .hud-amazon-zone:active {
        background: linear-gradient(
            135deg,
            #B1946E 0%,
            #A2824F 50%,
            #84673D 100%
        );
        transform: scale(0.97);
        box-shadow:
            0 1px 4px rgba(0, 0, 0, 0.3),
            0 0 12px rgba(212, 175, 55, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .hud-amazon-icon {
        width: 18px;
        height: 18px;
        fill: #0A0A0F;
    }

    .hud-amazon-text {
        color: #0A0A0F;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    /* Ocultar elementos antiguos */
    .voting-panel-mobile {
        display: none !important;
    }

    .amazon-mobile {
        display: none !important;
    }

    /* Espacio extra en el contenido del modal para el HUD */
    .cronista-full-texto {
        padding-bottom: 30px !important;
    }

    /* Auth Modal - Fix para móvil */
    .auth-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 999999 !important;
        padding: 1rem !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .auth-modal {
        max-width: 90vw !important;
        max-height: 85vh !important;
        margin: auto !important;
        padding: 1.5rem !important;
    }

    .auth-modal-title {
        font-size: 0.8rem !important;
    }

    .auth-modal-body {
        font-size: 0.9rem !important;
    }

    .auth-modal-btn {
        padding: 0.9rem 1rem !important;
        font-size: 0.7rem !important;
    }

}

/* ═══════════════════════════════════════════════════════════════
   MÓVIL PEQUEÑO (max-width: 380px) - iPhone SE, etc.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {

    .hero-title {
        font-size: 2rem;
    }

    /* Logo header móvil pequeño */
    .hero-logo-book {
        width: 50px;
    }

    .hero-logo-text {
        width: min(380px, 95vw);
    }

    .hero-subtitle {
        font-size: 0.6rem;
        letter-spacing: 0.2em;
    }

    /* Mensaje del Cronista - pantallas pequeñas */
    .cronista-message-text {
        font-size: 0.55rem;
        letter-spacing: 0.08em;
    }

    .cronista-waveform-btn {
        padding: 0.5rem 1rem;
    }

    .waveform-label {
        font-size: 0.65rem;
    }

    .subtitle-text {
        font-size: 0.7rem;
    }

    .showcase-title {
        font-size: 1.1rem;
        letter-spacing: 0.12em;
    }

    .showcase-subtitle {
        font-size: 0.65rem;
    }

    .showcase-emblem {
        width: 38px;
        height: 38px;
    }

    .nav-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.65rem;
    }

    .book-title {
        font-size: 0.75rem;
    }

    .book-author {
        font-size: 0.6rem;
    }

    .modal-title {
        font-size: 1.3rem;
    }

    .modal-synopsis {
        font-size: 0.9rem;
    }

    .cronista-full-cover {
        width: 50%;
        max-width: 150px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE MODE - Móvil horizontal
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: landscape) {

    .hero {
        min-height: 50vh;
        padding: var(--space-sm);
    }

    .hero-title {
        font-size: 2rem;
    }

    .cronista-full-layout {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }

    .cronista-full-cover {
        width: 30%;
        max-width: 140px;
    }

    .cronista-full-texto {
        text-align: left;
        align-items: flex-start;
    }

    .modal-synopsis {
        text-align: left;
    }

    .books-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .showcase-content .books-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   VIDEO CRONISTA - ESTILOS MÓVIL
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* ───────────────────────────────────────────────────────────
       MENSAJE ENTRANTE DEL CRONISTA - Mobile styles
       ─────────────────────────────────────────────────────────── */
    .cronista-message-container {
        gap: var(--space-xs);
        margin-top: var(--space-sm);
        padding: 0 var(--space-sm);
    }

    .cronista-message-text {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        text-align: center;
    }

    .cronista-waveform-btn {
        padding: 0.6rem 1.2rem;
        gap: 0.5rem;
    }

    .waveform-container {
        height: 16px;
        gap: 2px;
    }

    .waveform-bar {
        width: 2.5px;
    }

    .waveform-label {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    /* ═══════════════════════════════════════════════════════════════
       ACCORDION MÓVIL - ALTURA FIJA, ANCHO EXPANDIDO
       ═══════════════════════════════════════════════════════════════ */

    .cronista-accordion {
        max-width: calc(100% - 24px);
        margin: var(--space-sm) auto 0;
        width: 100%;
        border-radius: 12px;
    }

    .cronista-accordion-inner {
        border-radius: 12px;
        border: 1px solid rgba(125, 211, 232, 0.3);
    }

    .cronista-accordion-video-wrapper {
        height: 420px;
        aspect-ratio: auto;
        border-radius: 12px 12px 0 0;
        overflow: hidden;
    }

    .cronista-accordion-video {
        object-fit: cover;
        object-position: center center;
    }

    /* Subtítulos con altura fija para evitar saltos */
    .cronista-subtitle-display {
        padding: var(--space-xs) var(--space-sm);
        min-height: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .subtitle-prefix {
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .subtitle-text {
        font-size: 0.75rem;
        line-height: 1.4;
        text-align: center;
    }

    .subtitle-cursor {
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    /* Mute button en móvil */
    .cronista-accordion .cronista-mute-btn {
        bottom: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .cronista-accordion .cronista-mute-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Mute button móvil */
    .cronista-mute-btn {
        width: 36px;
        height: 36px;
        bottom: 10px;
        right: 10px;
    }

    .cronista-mute-btn svg {
        width: 18px;
        height: 18px;
    }

    .cronista-video-mobile video,
    .cronista-video-mobile .cronista-full-video-element {
        object-position: center 30% !important;
    }

    /* Zoom ligero en el video de standby para ocultar marca de agua */
    .cronista-video-mobile .cronista-full-video-element:not(.cronista-main-video) {
        transform: scale(1.05);
        transform-origin: center center;
    }

    /* Header del video dual en móvil */
    .cronista-video-mobile {
        position: relative;
    }

    .cronista-video-mobile .cronista-video-header {
        top: 1rem;
    }

    .cronista-video-mobile .cronista-video-header .cronista-review-icon {
        width: 18px;
        height: 18px;
    }

    .cronista-video-mobile .cronista-video-header .cronista-review-title {
        font-size: 0.65rem;
        letter-spacing: 0.12em;
    }

    /* ───────────────────────────────────────────────────────────
       CENTRO DE MANDOS — Panel móvil
       ─────────────────────────────────────────────────────────── */
    .panel-container {
        padding: var(--space-sm);
        padding-top: 70px;
    }

    .panel-title {
        font-size: 1.1rem;
        letter-spacing: 0.15em;
    }

    .panel-profile-card {
        padding: 1.5rem 1rem !important;
    }

    .panel-profile-name {
        font-size: 1.4rem;
    }

    .panel-profile-avatar {
        width: 90px;
        height: 90px;
    }

    .panel-profile-silhouette {
        width: 90px;
        height: 90px;
    }

    .panel-stats-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .panel-gauges-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .panel-gauge-ring {
        width: 72px;
        height: 72px;
    }

    .panel-gauge-number {
        font-size: 1.2rem;
    }

    .panel-gauge {
        padding: 0.8rem 0.3rem;
    }

    .panel-gauge-tooltip {
        white-space: normal;
        max-width: 180px;
        font-size: 0.55rem;
    }

    .panel-vote-verdict {
        font-size: 0.48rem;
        padding: 0.2rem 0.15rem;
    }

    .panel-showcase-seal {
        padding: 0.25rem 0.35rem;
        gap: 0.25rem;
    }

    .panel-seal-score {
        font-size: 0.65rem;
    }

    .panel-votes-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Codex Personal — Mobile */
    .codex-personal {
        padding: 1.25rem;
    }

    .codex-personal-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .codex-personal-title {
        font-size: 0.85rem;
    }

    .codex-add-section-btn {
        font-size: 0.65rem;
        padding: 0.4rem 0.75rem;
    }

    .codex-section-header {
        padding: 0.85rem 1rem;
    }

    .codex-section-name {
        font-size: 0.75rem;
    }

    .codex-section-content .panel-showcase-grid {
        padding: 0 1rem 1rem;
    }

    .panel-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .panel-showcase-card {
        padding: 0.5rem;
    }

    .panel-showcase-title {
        font-size: 0.78rem;
    }

    .panel-showcase-remove {
        display: none;
    }

    .create-section-modal {
        width: 92%;
        padding: 1.5rem;
    }

    .book-list-btn-container {
        margin-top: 0.5rem;
    }

    .book-list-dropdown {
        min-width: 260px;
        left: 50%;
        right: auto;
        margin-left: -130px;
    }

    /* ───────────────────────────────────────────────────────────
       BOOK SEARCH MODAL — Mobile
       ─────────────────────────────────────────────────────────── */
    .book-search-overlay {
        padding: 0;
        align-items: stretch;
    }

    .book-search-modal {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
    }

    .book-search-header {
        padding: 1rem;
    }

    .book-search-title {
        font-size: 0.75rem;
    }

    .book-search-section-selector {
        padding: 0.6rem 1rem;
    }

    .book-search-input-wrapper {
        padding: 0.5rem 1rem;
    }

    .book-search-input {
        font-size: 16px; /* prevent iOS zoom */
    }

    .book-search-results {
        max-height: calc(100vh - 200px);
        padding: 0.5rem 0.75rem;
    }

    .book-search-result-title {
        font-size: 0.82rem;
    }

    .book-search-manual-input {
        font-size: 16px; /* prevent iOS zoom */
    }

    .codex-search-books-btn {
        font-size: 0.6rem;
        padding: 0.35rem 0.65rem;
    }

    .codex-section-empty-cta {
        font-size: 0.6rem;
    }

    /* ── External Book Modal mobile ── */
    .external-book-modal {
        padding: 1.5rem;
        max-height: 95vh;
    }

    .external-book-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .external-book-cover-col {
        align-items: center;
    }

    .external-book-cover-col .cronista-full-cover {
        max-width: 180px;
    }

    /* Hide desktop-only elements in cover col on mobile */
    .external-book-cover-col .voting-panel,
    .external-book-cover-col .amazon-link,
    .external-book-cover-col .book-list-btn-container {
        display: none;
    }

    /* Padding bottom for fixed MobileHUD bar */
    .external-book-modal {
        padding-bottom: 5rem;
    }

    .inclusion-btn {
        font-size: 0.6rem;
        padding: 0.75rem 1rem;
    }
}