/* ═══════════════════════════════════════════════════════════════════
   MOBILE APP MODULE — Native Experience v5.1
   L'Essence du Luxe · April 2026
   ───────────────────────────────────────────────────────────────────
   Loaded conditionally: <link media="(max-width:768px)">
   Desktop users pay ZERO bandwidth cost for this file.

   v5.1 — Full audit + repair. Fixes overflow, type scale, hero stats,
   arcana, vault, telemetry, and GPU performance.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   § 0  GLOBAL OVERFLOW CONTAINMENT — HARD WALL
   ═══════════════════════════════════════════════════
   CRITICAL: This stops the page from scrolling horizontal.
   EVERY child that's wider than 100vw gets clipped here.
   ═══════════════════════════════════════════════════ */

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

* {
    box-sizing: border-box;
}

/* Contain any static-width elements that spill out */
.financial-ticker,
.hero-stats-stack,
.stat-row,
[class*="ticker"],
[class*="Ticker"] {
    max-width: 100%;
    overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════
   § 1  APP SHELL — VISUAL ONLY
   ═══════════════════════════════════════════════════ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-tap-highlight-color: transparent;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    min-height: 100dvh;
}

/* Tap press feedback — buttons only */
a:active,
button:active,
[role="button"]:active,
.bnav-tab:active,
.btn:active {
    transform: scale(0.96) !important;
    transition: transform 80ms ease-out !important;
}

/* Disable stuck hover states on touch */
@media (hover: none) {
    .feature-card:hover,
    .pillar-card:hover,
    .perfume-card:hover,
    .pricing-card.featured:hover {
        transform: none;
        box-shadow: inherit;
    }
}


/* ═══════════════════════════════════════════════════
   § 2  BOTTOM NAV — FROSTED GLASS
   ═══════════════════════════════════════════════════ */

.bottom-nav {
    background: rgba(5, 5, 5, 0.82);
    backdrop-filter: blur(40px) saturate(220%);
    -webkit-backdrop-filter: blur(40px) saturate(220%);
    border-top: 1px solid rgba(201, 169, 110, 0.1);
    padding: 6px 0 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35),
        0 -1px 0 rgba(201, 169, 110, 0.06);
}

.bnav-tab {
    position: relative;
    padding: 6px 10px 4px;
    gap: 2px;
    transition: color 0.25s ease, transform 80ms ease-out;
}

/* Active gold dot */
.bnav-tab::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #E8D5A3;
    transform: translateX(-50%) scale(0);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 8px rgba(232, 213, 163, 0.5);
}

.bnav-tab.active::after {
    transform: translateX(-50%) scale(1);
}

.bnav-tab.active {
    color: #E8D5A3;
}

.bnav-tab.active svg {
    filter: drop-shadow(0 0 6px rgba(232, 213, 163, 0.35));
    transform: scale(1.1);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bnav-tab svg {
    width: 22px;
    height: 22px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bnav-tab span {
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    opacity: 0.7;
    transition: opacity 0.25s ease;
}

.bnav-tab.active span {
    opacity: 1;
}


/* ═══════════════════════════════════════════════════
   § 3  NAVBAR — COMPACT
   ═══════════════════════════════════════════════════ */

.navbar,
.portal-nav {
    padding: 8px 16px !important;
}

.navbar .logo-text,
.portal-nav .pn-logo {
    font-size: 0.85rem;
}

.navbar img[alt*="logo"],
.navbar .logo-container {
    width: 32px;
    height: 32px;
}

/* Hide desktop nav links — bottom nav replaces them */
.nav-links {
    display: none !important;
}

/* Nav actions — just icons */
.nav-actions {
    gap: 8px;
}

.nav-actions button,
.nav-actions a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ═══════════════════════════════════════════════════
   § 4  HERO — COMPACT + OVERFLOW FIX
   ═══════════════════════════════════════════════════ */

.hero {
    padding: 52px 20px 20px;
    min-height: auto;
    overflow: hidden;
}

/* hero-content width is fixed in index-sections.css @600px (contain:none + max-width:100%)
   DO NOT override transform here — it breaks the logo compositing layer */

.hero h1 {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    line-height: 1.1;
    margin-bottom: 0.4rem;
    word-break: break-word;
}

.hero .tagline {
    font-size: clamp(0.8rem, 3.5vw, 0.95rem);
    line-height: 1.5;
    padding: 0;
    max-width: 100%;
}

.hero-sub {
    font-size: clamp(0.78rem, 3vw, 0.88rem) !important;
    max-width: 100% !important;
    padding: 0 4px;
    margin-bottom: 1.2rem !important;
}

/* ── Logo: NO overrides — let desktop styles apply unchanged on mobile ──
   The 200px container with rings integrates correctly at mobile sizes.
   DO NOT resize. DO NOT hide ring elements. The logo is a protected HUD. */

/* CTA — full-width stacked */
.hero-actions,
.cta-group {
    flex-direction: column !important;
    gap: 10px;
    width: 100%;
    padding: 0 4px;
    align-items: stretch;
}

.hero-actions .btn,
.cta-group .btn {
    width: 100%;
    min-height: 50px;
    font-size: 0.85rem;
    justify-content: center;
    border-radius: 14px;
    padding: 14px 20px;
}

/* ── HERO STATS — Fix horizontal overflow ──────────── */
.hero-stats-stack {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.8rem 0 !important;
    overflow: hidden !important;
    margin: 0 auto 1rem !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
}

.stat-row,
.hero-stats-stack .stat-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 4px !important;
    background: rgba(201,169,110,0.04) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(201,169,110,0.08) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex: unset !important;
}

.stat-number {
    font-size: clamp(1rem, 5vw, 1.4rem) !important;
    font-weight: 700;
    line-height: 1;
    color: #C9A96E;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.stat-label {
    font-size: 0.48rem !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

.stat-row.grand .stat-number {
    font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
    color: #E8D5A3;
}

.stat-row.grand {
    grid-column: 1 / -1;
    background: rgba(201,169,110,0.06);
    border-color: rgba(201,169,110,0.15);
}

/* Financial ticker — no overflow */
.financial-ticker {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

#nimbus-live-ticker {
    will-change: auto !important;
}

/* Explorer strip — contained */
#explorerStrip {
    overflow: hidden !important;
    width: 100% !important;
}


/* ═══════════════════════════════════════════════════
   § 5  FEATURES — SINGLE COLUMN
   ═══════════════════════════════════════════════════ */

.features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 4px;
}

.feature-card {
    padding: 20px 18px;
    border-radius: 18px;
    transform-style: flat;
    transform: none !important;
}

.feature-card::after {
    display: none;
}

.feature-card h3 {
    font-size: 1rem;
}

.feature-card p {
    font-size: 0.82rem;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════
   § 6  CARDS — VISUAL ONLY
   ═══════════════════════════════════════════════════ */

.perfume-strip > *,
.enc-grid > *,
[class*="perfume-grid"] > * {
    min-width: 200px;
}

.pricing-card {
    padding: 24px 20px;
    border-radius: 20px;
}

.pricing-card.featured {
    transform: none;
}

.pillar-card {
    padding: 24px 20px;
}


/* ═══════════════════════════════════════════════════
   § 7  SCREENS SHOWCASE
   ═══════════════════════════════════════════════════ */

.phone {
    transform: none !important;
}

.phone-frame {
    height: 440px;
}


/* ═══════════════════════════════════════════════════
   § 8  ORACLE — COMPACT
   ═══════════════════════════════════════════════════ */

.oracle-panel,
[class*="oracle-panel"] {
    border-radius: 16px;
    margin: 0 8px;
    padding: 16px;
}

.oracle-tabs button {
    flex-shrink: 0;
    min-height: 44px;
    font-size: 0.72rem;
    padding: 8px 14px;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════
   § 9  MODALS — SLIDE-UP FROM BOTTOM
   ═══════════════════════════════════════════════════ */

.modal-card,
.comp-card {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 24px 24px 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.modal-close,
.comp-close {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.enc-panel {
    width: 100% !important;
    max-width: 100% !important;
    right: 0;
    border-radius: 24px 24px 0 0;
    max-height: 90vh;
}

.mob-pages-panel {
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.mob-pages-link {
    min-height: 52px;
    padding: 14px 20px;
}


/* ═══════════════════════════════════════════════════
   § 10  TYPOGRAPHY — FLUID
   ═══════════════════════════════════════════════════ */

input, select, textarea {
    font-size: 16px !important;
}

h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    line-height: 1.25;
}

h3 {
    font-size: clamp(1rem, 3.5vw, 1.3rem);
}

.section-desc,
.section-sub {
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    line-height: 1.6;
}

.section-badge {
    font-size: 0.55rem;
    padding: 4px 12px;
}

p {
    font-size: clamp(0.82rem, 2.5vw, 0.92rem);
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════
   § 11  SPACING
   ═══════════════════════════════════════════════════ */

section {
    padding: 2.5rem 16px;
}

section + section {
    margin-top: 0;
}

.tech-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

footer {
    padding: 2rem 16px calc(2rem + env(safe-area-inset-bottom));
    text-align: center;
}

footer p {
    font-size: 0.7rem;
    line-height: 1.6;
}

#instagram-community {
    padding: 2.5rem 16px;
}

#instagram-community div[style*="display:flex"] {
    gap: 0.8rem !important;
}


/* ═══════════════════════════════════════════════════
   § 12  TOUCH TARGETS — 44px MINIMUM
   ═══════════════════════════════════════════════════ */

.btn,
.plan-cta,
.cs-submit,
.checkout-close,
.gate-btn,
.enc-family-btn,
.enc-brand-btn,
.enc-az-btn,
.enc-tab {
    min-height: 44px;
    min-width: 44px;
}

.download-box .btn {
    min-height: 48px;
    font-size: 0.85rem;
}

.lang-selector-mobile select,
.lang-selector select {
    min-height: 36px;
    font-size: 14px;
    padding: 6px 28px 6px 10px;
}


/* ═══════════════════════════════════════════════════
   § 13  PERFORMANCE — SCROLL & GPU OPTIMIZATION
   ═══════════════════════════════════════════════════ */

/* Kill expensive animations */
#particles {
    display: none !important;
}

.cursor-spotlight {
    display: none !important;
}

/* Kill SVG logo rotation animations on mobile — pure GPU killer */
.logo-ring-svg animateTransform,
.logo-ring-svg animate {
    display: none;
}
.logo-ring-svg rect {
    animation: none !important;
}

/* Logo glow — simpler static version */
.logo-glow {
    animation: none !important;
    opacity: 0.4;
}
.logo-ring-outer {
    animation: none !important;
}
.logo-particles .lp {
    animation: none !important;
    display: none;
}

/* Content-visibility for below-fold sections */
#features,
#pricing,
#knowledge-pillars,
#instagram-community,
.seo-content,
footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Disable decorative animations */
.feature-card::after,
.pillar-card::after {
    animation: none !important;
}

/* Remove will-change to free GPU memory */
.reveal {
    will-change: auto;
}

/* Disable hover transforms on touch devices */
.feature-card:hover,
.pillar-card:hover,
.perfume-card:hover {
    transform: none;
}

/* FIX: Unificar scroll horizontal — evitar scroll打架 */
.carrusel-letal,
.perfume-strip,
.enc-grid,
[class*="perfume-grid"],
.boveda-carousel,
.eci-carousel,
.comas-carousel,
.adlan-carousel,
.random-grid {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carrusel-letal::-webkit-scrollbar,
.perfume-strip::-webkit-scrollbar,
.enc-grid::-webkit-scrollbar,
[class*="perfume-grid"]::-webkit-scrollbar,
.boveda-carousel::-webkit-scrollbar,
.eci-carousel::-webkit-scrollbar,
.comas-carousel::-webkit-scrollbar,
.adlan-carousel::-webkit-scrollbar,
.random-grid::-webkit-scrollbar {
    display: none;
}

/* FIX: Eliminar will-change excesivos que saturan la GPU */
.hero-content,
.stat-number,
.phone-frame,
.perfume-card,
.feature-card,
.pricing-card,
.pillar-card {
    will-change: auto !important;
}


/* ═══════════════════════════════════════════════════
   § 14  APP BANNER
   ═══════════════════════════════════════════════════ */

.app-float-banner {
    border-radius: 16px;
    margin: 0 12px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    padding: 12px 16px;
}


/* ═══════════════════════════════════════════════════
   § 15  WAITLIST / CTA
   ═══════════════════════════════════════════════════ */

.cs-content {
    padding: 2rem 16px;
}

.cs-title {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
}

.cs-input-wrap {
    flex-direction: column;
    border-radius: 14px;
    width: 100%;
}

.cs-input {
    text-align: center;
    min-height: 48px;
    font-size: 16px;
}

.cs-submit {
    border-radius: 0 0 14px 14px;
    min-height: 48px;
}


/* ═══════════════════════════════════════════════════
   § 16  AFFILIATE & DOWNLOAD
   ═══════════════════════════════════════════════════ */

.affiliate-box {
    padding: 20px 16px;
    border-radius: 16px;
}

.affiliate-box h3 {
    font-size: 1.2rem;
}

.download-box {
    flex-direction: column;
    padding: 20px 16px;
    border-radius: 16px;
    text-align: center;
    gap: 12px;
}

.download-content {
    flex-direction: column;
    gap: 10px;
}


/* ═══════════════════════════════════════════════════
   § 17  SMALL VIEWPORT (≤ 380px)
   ═══════════════════════════════════════════════════ */

@media (max-width: 380px) {
    .hero h1 {
        font-size: 1.4rem;
    }

    .pricing-card {
        width: 260px;
    }

    .bnav-tab svg {
        width: 20px;
        height: 20px;
    }

    .bnav-tab span {
        font-size: 0.52rem;
    }

    .hero-stats-stack {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ═══════════════════════════════════════════════════
   § 18  SCROLL PROGRESS BAR
   ═══════════════════════════════════════════════════ */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 99999;
    background: linear-gradient(90deg, #C9A96E 0%, #E8D5A3 50%, #C9A96E 100%);
    transform-origin: left;
    transform: scaleX(var(--scroll-progress, 0));
    transition: transform 60ms linear;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════
   § 19  SECTION REVEAL
   ═══════════════════════════════════════════════════ */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible,
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* ═══════════════════════════════════════════════════
   § 20  HAPTIC PRESS
   ═══════════════════════════════════════════════════ */

.feature-card:active,
.pillar-card:active,
.pricing-card:active,
.perfume-card:active,
.tech-card:active {
    transform: scale(0.97) !important;
    transition: transform 100ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    filter: brightness(0.95);
}

.feature-card,
.pillar-card,
.pricing-card,
.perfume-card,
.tech-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.3s ease !important;
}


/* ═══════════════════════════════════════════════════
   § 21  OLED BLACK + BACKDROP-FILTER OPTIMIZATION
   ═══════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000 !important;
    }

    .bottom-nav {
        background: rgba(0, 0, 0, 0.88);
    }

    .portal-drawer {
        background: rgba(0, 0, 0, 0.98) !important;
    }

    .mob-pages-overlay {
        background: rgba(0, 0, 0, 0.6);
    }

    .feature-card,
    .pillar-card,
    .pricing-card {
        background-color: rgba(8, 8, 8, 0.95) !important;
    }
}

/* FIX: Limitar backdrop-filter solo a elementos críticos */
.modal-card,
.comp-card,
.portal-drawer,
.desktop-view-toggle {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Disable backdrop-filter on cards that don't need it */
.feature-card,
.pillar-card,
.pricing-card,
.perfume-card,
.tech-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ═══════════════════════════════════════════════════
   § 22  PORTAL DRAWER — SPRING
   ═══════════════════════════════════════════════════ */

.portal-drawer {
    transition: right 0.45s cubic-bezier(0.32, 0.72, 0, 1) !important;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
}

.portal-drawer .pd-item {
    min-height: 52px;
    border-radius: 12px;
    margin: 2px 0;
    padding: 0.8rem 1rem !important;
}

.portal-drawer .pd-item:active {
    transform: scale(0.98);
    background: rgba(252, 246, 186, 0.06);
}


/* ═══════════════════════════════════════════════════
   § 23  SELECTION & FOCUS
   ═══════════════════════════════════════════════════ */

::selection {
    background: rgba(201, 169, 110, 0.25);
    color: #F0E6C8;
}

:focus-visible {
    outline: 2px solid rgba(201, 169, 110, 0.5);
    outline-offset: 2px;
    border-radius: 4px;
}


/* ═══════════════════════════════════════════════════
   § 24  SKELETON LOADING
   ═══════════════════════════════════════════════════ */

img[loading="lazy"] {
    background: linear-gradient(110deg,
        rgba(15, 15, 15, 1) 30%,
        rgba(30, 28, 22, 1) 50%,
        rgba(15, 15, 15, 1) 70%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}

img[loading="lazy"][src] {
    animation: none;
    background: none;
}

@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════
   § 25  COMPARATOR — MOBILE OVERLAY FIX
   ═══════════════════════════════════════════════════ */

.comp-overlay.show {
    z-index: 10003 !important;
}

.modal-overlay.show {
    z-index: 10001 !important;
}

/* Drag handle hint */
.comp-card::before,
.modal-card::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0 auto 12px;
}

/* Vendor rows — bigger tap targets for affiliate clicks */
.vendor-row {
    min-height: 60px;
    padding: 12px 10px !important;
    gap: 8px !important;
}

.vendor-cta {
    min-height: 44px;
    min-width: 88px;
    padding: 10px 14px !important;
    font-size: 0.7rem !important;
}

/* Comp close button — bigger touch target */
.comp-close,
.modal-close {
    width: 48px !important;
    height: 48px !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 10 !important;
}

.comp-header {
    padding-right: 50px;
}

@media (max-width: 380px) {
    .comp-perfume-info {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .vendor-name {
        font-size: 0.75rem;
    }

    .vendor-badge {
        display: none;
    }

    .vendor-price-val {
        font-size: 0.95rem;
    }
}


/* ═══════════════════════════════════════════════════
   § 26  COMPACT CARDS — VAULT / ENCYCLOPEDIA
   ═══════════════════════════════════════════════════ */

.pc-image-area {
    aspect-ratio: 3 / 4 !important;
}

.perfume-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
}

.random-grid > .perfume-card {
    flex: 0 0 140px !important;
    min-width: 140px !important;
}

.random-grid {
    gap: 0.5rem !important;
}

.pc-body {
    padding: 0.5rem 0.6rem 0.6rem !important;
}

.pc-name {
    font-size: 0.75rem !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.pc-brand {
    font-size: 0.52rem !important;
    margin-bottom: 1px;
}

.pc-family-badge {
    font-size: 0.5rem !important;
    padding: 2px 6px !important;
}

.pc-notes {
    display: none !important;
}

.random-section {
    padding: 1rem 0.8rem 0.8rem !important;
    border-radius: 14px !important;
    margin: 0 -8px;
}

.random-header h2 {
    font-size: 1rem !important;
}

.random-header p {
    font-size: 0.65rem !important;
}


/* ═══════════════════════════════════════════════════
   § 27  LANDSCAPE ORIENTATION SUPPORT
   ═══════════════════════════════════════════════════ */

@media (orientation: landscape) and (max-height: 500px) {
    .perfume-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem !important;
    }

    .pc-image-area {
        aspect-ratio: 1 / 1 !important;
    }

    .random-grid > .perfume-card {
        flex: 0 0 120px !important;
        min-width: 120px !important;
    }

    .hero {
        padding: 20px 20px 16px !important;
        min-height: auto !important;
    }

    .hero h1 {
        font-size: 1.2rem !important;
    }

    .hero-stats-stack {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .stat-row.grand {
        grid-column: auto !important;
    }

    .bottom-nav {
        padding: 2px 0 0 !important;
    }

    .bnav-tab svg {
        width: 18px;
        height: 18px;
    }

    .bnav-tab span {
        font-size: 0.5rem;
    }

    .modal-card,
    .comp-card {
        max-height: 98vh !important;
        border-radius: 16px 16px 0 0 !important;
    }

    section {
        padding: 1.5rem 16px !important;
    }

    .random-section {
        padding: 0.6rem 0.6rem 0.5rem !important;
    }
}


/* ═══════════════════════════════════════════════════
   § 28  DESKTOP VIEW TOGGLE
   ═══════════════════════════════════════════════════ */

.desktop-view-toggle {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom) + 8px);
    left: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(201, 169, 110, 0.15);
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.desktop-view-toggle:active {
    transform: scale(0.9);
}

.desktop-view-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.desktop-view-toggle.is-desktop {
    color: #C9A96E;
    border-color: rgba(201, 169, 110, 0.4);
    background: rgba(201, 169, 110, 0.1);
}

.desktop-view-toggle .dvt-label {
    position: absolute;
    left: 44px;
    white-space: nowrap;
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
}

.desktop-view-toggle:hover .dvt-label,
.desktop-view-toggle:active .dvt-label {
    opacity: 1;
    transform: translateX(0);
}


/* ═══════════════════════════════════════════════════
   § 29  ARCANA MUSEUM — MOBILE
   ═══════════════════════════════════════════════════ */

/* Hero — tight */
.arcana-hero {
    min-height: 60vh !important;
    padding-top: 0 !important;
}

.arcana-hero-content {
    padding: 1rem 1.2rem 1.5rem !important;
}

.arcana-hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    line-height: 1.1;
}

.arcana-hero-subtitle {
    font-size: clamp(0.78rem, 3vw, 0.9rem) !important;
    line-height: 1.5;
}

/* Videos — stack to single column */
.arcana-video-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
}

.arcana-video-wrap {
    max-width: 100% !important;
}

/* Card grid — single column */
.arcana-hallway {
    grid-template-columns: 1fr !important;
    padding: 0.8rem !important;
    gap: 1rem !important;
}

/* Card layout — horizontal strip more compact */
.arcana-card-relic-strip {
    padding: 0.7rem 0.8rem !important;
    gap: 0.6rem !important;
}

.arcana-relic-bottle {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
}

.arcana-relic-bottle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.arcana-relic-name {
    font-size: 0.78rem !important;
    line-height: 1.2;
}

.arcana-relic-chem {
    font-size: 0.55rem !important;
}

.arcana-relic-year {
    font-size: 0.6rem !important;
    flex-shrink: 0;
}

.arcana-strip-live-badge {
    font-size: 0.45rem !important;
    padding: 2px 4px !important;
    flex-shrink: 0;
}

/* Card content */
.arcana-card-content {
    padding: 0.8rem !important;
}

.arcana-card-figure {
    font-size: 1.1rem !important;
}

.arcana-card-tagline {
    font-size: 0.75rem !important;
}

.arcana-notes {
    gap: 4px !important;
}

.arcana-note {
    font-size: 0.58rem !important;
    padding: 2px 8px !important;
}

/* Card actions — full width stacked */
.arcana-card-actions {
    flex-direction: column !important;
    gap: 8px !important;
}

.arcana-card-actions .arcana-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px;
    font-size: 0.72rem !important;
}

/* Dossier panel — full screen on mobile */
.arcana-dossier-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    overflow-y: auto;
}

.arcana-dossier-header {
    flex-direction: row !important;
    gap: 0.8rem !important;
    padding: 1rem !important;
}

.arcana-dossier-portrait {
    width: 70px !important;
    height: 70px !important;
    flex-shrink: 0;
}

.arcana-dossier-title {
    font-size: 1.2rem !important;
}

.arcana-dossier-body {
    padding: 0 1rem !important;
}

.arcana-dossier-section {
    padding: 0.8rem 0 !important;
}

.arcana-dossier-text {
    font-size: 0.82rem !important;
    line-height: 1.6;
}

/* Buy popup — full width modal */
.arcana-buy-modal {
    width: 95% !important;
    max-width: 400px !important;
}

.arcana-buy-header {
    gap: 1rem !important;
    padding: 1.2rem 1.2rem 0.8rem !important;
}

.arcana-buy-bottle-img {
    width: 90px !important;
    height: 90px !important;
}

.arcana-buy-options {
    padding: 1rem 1.2rem !important;
    gap: 0.6rem !important;
}

.arcana-buy-btn {
    padding: 0.8rem !important;
    min-height: 56px;
}

/* Hero dots — smaller */
.hero-dots {
    gap: 6px !important;
}

.hero-dot {
    width: 6px !important;
    height: 6px !important;
}

/* Video section */
.arcana-video-section {
    padding: 0 1rem 2rem !important;
}

.arcana-video-title {
    font-size: clamp(1rem, 5vw, 1.4rem) !important;
}


/* ═══════════════════════════════════════════════════
   § 30  VAULT PAGE — MOBILE
   ═══════════════════════════════════════════════════ */

/* Filter buttons — wrap properly */
.vault-filters,
[class*="vault-filter"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.vault-filter-btn,
[class*="filter-btn"] {
    font-size: 0.72rem !important;
    padding: 8px 14px !important;
    min-height: 40px;
    border-radius: 20px;
}

/* Search bar — full width */
.vault-search,
[class*="vault-search"] {
    width: 100% !important;
}

/* Vault cards — 2 column grid */
.vault-grid,
[class*="vault-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0 !important;
}


/* ═══════════════════════════════════════════════════
   § 31  TELEMETRY & MODULE BETA PANEL — MOBILE
   ═══════════════════════════════════════════════════ */

/* MODULE BETA badge — hide on mobile or shrink */
[class*="telemetry"],
[class*="module-beta"],
.seele-status,
[id*="telemetry"] {
    font-size: 0.6rem !important;
    padding: 4px 8px !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Arbitrage terminal section */
.arbitrage-terminal,
[class*="arbitrage"] {
    margin: 0 8px !important;
    padding: 1rem !important;
    border-radius: 12px !important;
}

.arbitrage-terminal h2,
[class*="arbitrage"] h2 {
    font-size: 1rem !important;
    letter-spacing: 1px;
}

/* Bóveda section */
.boveda-inner {
    flex-direction: column !important;
    padding: 1.5rem 1rem !important;
}

.boveda-card {
    padding: 0 !important;
}

.boveda-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
}

.boveda-stats {
    gap: 1rem !important;
}

.boveda-stat-num {
    font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
}

/* HUD rows in hero — compact */
.arcana-hud-row {
    font-size: 0.62rem !important;
}


/* ═══════════════════════════════════════════════════
   § 32  ENCYCLOPEDIA — MOBILE
   ═══════════════════════════════════════════════════ */

.enc-header {
    padding: 1rem 1rem 0.5rem !important;
}

.enc-search-wrap {
    padding: 0 1rem 0.8rem !important;
}

.enc-search {
    font-size: 16px !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    min-height: 48px;
}

.enc-tabs {
    overflow-x: auto !important;
    scrollbar-width: none;
    padding: 0 1rem 0.5rem !important;
    gap: 6px !important;
}

.enc-tabs::-webkit-scrollbar {
    display: none;
}

.enc-tab {
    white-space: nowrap;
    font-size: 0.7rem !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    flex-shrink: 0;
}

/* Perfume grid — 2 col on mobile, tight */
.enc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.8rem !important;
}


/* ═══════════════════════════════════════════════════
   § 33  DARK POOL — MOBILE
   ═══════════════════════════════════════════════════ */

.dp-section {
    padding: 1rem !important;
}

.dp-header {
    flex-direction: column !important;
    gap: 0.8rem !important;
    text-align: center;
}

.dp-counter {
    font-size: clamp(2rem, 10vw, 3rem) !important;
}


/* ═══════════════════════════════════════════════════
   § 34  PORTAL NAV — MOBILE OVERRIDE
   ═══════════════════════════════════════════════════ */

.portal-nav {
    padding: 8px 16px !important;
}

.pn-logo {
    font-size: 0.8rem !important;
}

.pn-actions {
    gap: 6px !important;
}

.pn-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.7rem !important;
}