/* Mobile Optimizations for Breakaway Civilization Dashboard */

/* CRITICAL: Force page to be scrollable on mobile */
/* NOTE: Removed * { transform: translate3d } as it breaks position:fixed elements */
/* Apply GPU acceleration selectively instead */
.viz-section,
.viz-section canvas,
#visualization-container {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Fix iOS scrolling issues */
html {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto; /* Allow vertical scroll */
    width: 100%;
    height: 100%;
}

/* Prevent body scroll lock and horizontal scroll */
body {
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Allow proper scrolling */
    height: auto !important;
    min-height: 100vh;
    width: 100%;
    /* Fix iOS bounce scrolling */
    -webkit-overflow-scrolling: touch;
    /* Allow vertical scroll but prevent horizontal */
    touch-action: pan-y pinch-zoom;
}

/* Global mobile fix - ensure scrolling works */
@media screen and (max-width: 768px) {
    /* Force scrollable viewport */
    html, body {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    #visualization-container {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
}

/* Tablet styles (iPad) */
@media (min-width: 768px) and (max-width: 1024px) {
}

/* Base mobile styles */
@media (max-width: 768px) {
    /* Header adjustments */
    header {
        padding: 10px;
    }
    
    h1 {
        font-size: calc(var(--fs-display) * 0.7);
        margin-bottom: 5px;
    }
    
    .subtitle {
        font-size: var(--fs-base);
    }
    
    /* Status bar */
    .status-bar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        font-size: var(--fs-xs);
        padding: 5px 10px;
        max-width: 100%;
        overflow: hidden;
    }

    .status-item {
        padding: 3px 8px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Navigation menu */
    .visualization-menu {
        /* Prevent horizontal overflow */
        overflow-x: hidden;
        overflow-y: visible;
        white-space: normal;
        padding: 10px 5px;
        margin: 0;
        max-width: 100%;
        box-sizing: border-box;
        /* Allow only vertical scrolling */
        touch-action: pan-y;
        /* Grid layout for mobile */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 5px;
    }

    .nav-btn {
        font-size: var(--fs-xs);
        padding: 8px 6px;
        margin: 0;
        display: block;
        text-align: center;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }
    
    /* Visualization containers */
    .viz-section {
        padding: 15px 10px;
    }

    #electromagnetic {
        min-height: calc(var(--vh, 1vh) * 100);
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 0;
        padding-right: 0;
    }
    
    #world-map-container,
    #population-genetics-container,
    #earth-3d-container,
    #moon-control-container,
    #master-convergence-container,
    #evidence-container {
        height: 400px !important;
        margin: 10px 0;
    }
    
    /* Overview grid */
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .overview-card {
        padding: 15px;
    }
    
    /* Controls */
    .controls {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .controls label {
        font-size: var(--fs-xs);
        margin: 3px;
    }
    
    /* Zoom controls */
    .zoom-controls {
        top: 5px !important;
        right: 5px !important;
        transform: scale(0.8);
    }
    
    /* Legend */
    .map-legend {
        transform: scale(0.7);
        transform-origin: bottom left;
    }
    
    /* Info panels */
    .info-panel,
    .cycle-info,
    .bloodline-stats,
    .moon-anomalies,
    .tidal-effects,
    .discovery-timeline {
        padding: 10px;
        font-size: var(--fs-sm);
    }
    
    /* Genetics info grid */
    .genetics-info {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
    }
    
    /* Timeline controls */
    .timeline-controls {
        padding: 10px;
        flex-wrap: wrap;
    }
    
    #timeline-slider {
        width: 100%;
        margin: 10px 0;
    }
    
    /* Layer controls */
    .layer-controls,
    .ant-layer {
        font-size: 0.8em;
        padding: 5px 8px;
    }
    
    /* Evidence matrix */
    .matrix-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .matrix-filters {
        flex-wrap: wrap;
    }
    
    .matrix-filter {
        font-size: 0.75em;
        padding: 3px 6px;
        margin: 2px;
    }
    
    /* Footer */
    footer {
        padding: 15px 10px;
        font-size: 0.8em;
    }

    /* Mute button mobile positioning */
    .mute-btn,
    #global-mute-btn {
        padding: 6px 12px;
        font-size: var(--fs-xs);
        gap: 4px;
        flex-shrink: 0;
        margin: 5px auto;
    }

    .mute-label {
        font-size: 0.7rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    h1 {
        font-size: calc(var(--fs-display) * 0.6);
    }

    /* Very small screen navigation */
    .visualization-menu {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 4px;
        padding: 8px 4px;
    }

    .nav-btn {
        font-size: calc(var(--fs-xs) * 0.85);
        padding: 6px 4px;
        letter-spacing: 0;
    }

    /* Status bar for very small screens */
    .status-bar {
        gap: 6px;
        padding: 4px 8px;
    }

    .status-item {
        padding: 2px 6px;
        font-size: 0.7rem;
    }

    #world-map-container,
    #population-genetics-container,
    #earth-3d-container,
    #moon-control-container,
    #master-convergence-container,
    #evidence-container {
        height: 300px !important;
    }

    .stat-number {
        font-size: calc(var(--fs-2xl) * 0.8);
    }

    /* Hide less critical elements */
    .map-legend,
    .countdown {
        display: none;
    }

    /* Simplify monitors */
    .em-monitors {
        grid-template-columns: 1fr;
    }

    /* Mute button very small screens */
    .mute-btn,
    #global-mute-btn {
        padding: 4px 10px;
    }

    .mute-label {
        display: none;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-btn,
    .layer-toggle,
    .ant-layer,
    button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Increase spacing for touch */
    .controls label,
    .matrix-filter {
        margin: 5px;
        padding: 8px 12px;
    }
    
    /* Remove hover effects on touch devices */
    .clickable-element:hover {
        transform: none;
        filter: none;
    }
}

/* Landscape mobile */
@media (max-width: 812px) and (orientation: landscape) {
    header {
        padding: 5px 10px;
    }
    
    h1 {
        font-size: calc(var(--fs-display) * 0.65);
        margin: 0;
    }
    
    .subtitle {
        display: none;
    }
    
    .status-bar {
        flex-direction: row;
        font-size: calc(var(--fs-xs) * 0.9);
    }
    
    #world-map-container,
    #population-genetics-container,
    #earth-3d-container,
    #moon-control-container,
    #master-convergence-container,
    #evidence-container {
        height: 250px !important;
    }
}

/* Fix viewport issues on mobile */
@supports (-webkit-touch-callout: none) {
    /* iOS specific fixes */
    main {
        min-height: -webkit-fill-available;
    }
    
    /* Prevent fixed elements from causing scroll issues */
    #loading-screen {
        position: absolute;
        height: 100vh;
        height: -webkit-fill-available;
        pointer-events: none; /* Ensure it doesn't block scrolling */
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Ensure main content is scrollable */
    main, #visualization-container {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Fix visualization containers */
    .viz-section {
        overflow: visible;
        position: relative;
    }
    
    /* Reduce animation complexity — but preserve gateway scroll reveals */
    *:not(.reveal-on-scroll):not(.stagger):not(.gw-ring):not(.gw-title):not(.gw-subtitle):not(.gw-scroll-hint):not(.gw-hero-rings):not([class*="gw-"]) {
        animation-duration: 0s !important;
        transition-duration: 0.1s !important;
    }

    /* Disable complex effects */
    .glow-effect,
    .pulse-effect,
    .energy-flow-layer {
        display: none;
    }
    
    /* Reduce particle counts via CSS */
    .particle-system {
        opacity: 0.5;
    }
}

/* Prevent horizontal overflow — with exceptions for scrollable elements */
@media (max-width: 768px) {
    /* Ensure no horizontal overflow on any element EXCEPT scrollable containers */
    *:not(.unified-nav):not(.unified-nav-scroll):not(.unified-nav-btn):not(.techmap-svg-wrapper):not(.techmap-svg):not(.gw-doc-scroll):not(.gw-doc-card):not(.freq-sub-nav) {
        max-width: 100vw;
    }

    /* Keep unified nav visible for hamburger overlay mode */
    .unified-nav {
        overflow: visible !important;
        max-width: 100vw;
    }

    .unified-nav-scroll {
        overflow: visible !important;
        max-width: none !important;
    }

    .unified-nav-btn {
        overflow: visible !important;
        max-width: none !important;
    }

    /* Tech map SVG wrapper needs horizontal scroll */
    .techmap-svg-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100vw !important;
    }

    .techmap-svg {
        max-width: none !important;
    }

    /* Gateway doc scroll needs horizontal scroll */
    .gw-doc-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: none !important;
    }

    .gw-doc-card {
        max-width: none !important;
    }

    /* Frequency sub-nav needs horizontal scroll */
    .freq-sub-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100vw !important;
    }

    /* Fix any containers that might cause horizontal scroll — except scrollable wrappers */
    .viz-section > *:not(.techmap-svg-wrapper):not(.gw-doc-scroll):not(.freq-sub-nav) {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ═══════════════════════════════════════════════
   TIMELINE VIEW — MOBILE: MAXIMIZE VIEWPORT
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Kill ALL vertical scrollbars on mobile */
    ::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
    * { scrollbar-width: none !important; }

    /* Remove duplicate nav scrollbar */
    .unified-nav::-webkit-scrollbar { height: 0 !important; display: none !important; }
    .unified-nav { scrollbar-width: none !important; }

    /* Timeline section: zero padding, zero borders, full bleed */
    #timeline {
        padding: 0 !important;
        margin: 0 !important;
    }

    #timeline h2 {
        font-size: 0.85rem;
        margin: 0;
        padding: 6px 10px;
        text-align: center;
    }

    #spiral-timeline-container {
        border: none !important;
        box-shadow: none !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    .timeline-controls {
        padding: 6px 10px !important;
        margin: 0 !important;
        gap: 8px !important;
        background: rgba(5, 8, 16, 0.9) !important;
        border: none !important;
    }

    .cycle-info {
        padding: 8px 10px !important;
        margin: 0 !important;
        border: none !important;
        font-size: 0.8rem;
    }

    .cycle-info h4 {
        font-size: 0.8rem;
        margin-bottom: 4px !important;
    }

    .status-bar {
        display: none !important;
    }

    /* Tighten viz-section padding globally */
    .viz-section {
        padding: 0 !important;
    }

    /* #visualization-container no padding */
    #visualization-container {
        padding: 0 !important;
    }
}

@media (max-width: 480px) {
    #timeline h2 {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .timeline-controls {
        padding: 4px 8px !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    #timeline-slider {
        width: auto !important;
        flex: 1 !important;
        margin: 0 !important;
    }

    #play-timeline {
        padding: 4px 10px;
        font-size: 0.75rem;
    }

    .cycle-info {
        padding: 6px 8px !important;
    }

    .cycle-info .countdown {
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════
   TABLET (iPad) — 768px–1024px
   ═══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Dashboard overview */
    .dashboard-stats {
        gap: 12px;
    }

    .featured-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

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

    .insights-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    /* Codex controls — keep 2-col but tighter */
    .codex-controls {
        gap: 12px;
    }

    .codex-controls .control-group {
        padding: 12px;
    }

    /* Codex container — reduce height */
    #codex-container {
        height: 600px !important;
    }

    /* Electromagnetic sub-nav */
    .freq-sub-nav {
        gap: 6px;
    }

    /* Gateway — slightly narrower scroll */
    .gw-scroll {
        max-width: 640px;
    }
}

/* ═══════════════════════════════════════════════
   TECH MAP — MOBILE OPTIMIZATION
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    #tech-map {
        padding: 0 !important;
    }

    #tech-map h2 {
        font-size: 0.85rem;
        padding: 6px 10px;
        margin: 0;
        text-align: center;
    }

    #tech-map-container {
        min-height: 400px !important;
    }

    /* Controls: compact stacked layout */
    .techmap-controls {
        padding: 4px 8px !important;
    }

    .techmap-controls-row {
        flex-direction: column !important;
        gap: 4px !important;
        align-items: stretch !important;
    }

    .techmap-control-group {
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: flex-start;
    }

    /* Make sliders fill available space */
    .techmap-slider {
        flex: 1 !important;
        min-width: 60px !important;
        width: auto !important;
    }

    .techmap-year-label {
        min-width: auto !important;
        font-size: 10px !important;
    }

    /* Selects take full width */
    .techmap-select {
        flex: 1;
        min-width: 0;
        font-size: 12px !important;
        padding: 6px 8px !important;
    }

    /* Search bar full width */
    .techmap-search {
        width: 100% !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
    }

    /* Civilization toggles — 2-col grid */
    .techmap-civ-toggles {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px 4px !important;
        padding-top: 2px !important;
    }

    .techmap-civ-label {
        font-size: 9px !important;
        padding: 2px 2px;
    }

    /* SVG wrapper — allow horizontal scroll but reduce min-width */
    .techmap-svg-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .techmap-svg {
        min-width: 600px !important;
    }

    /* Detail panel — full-width bottom sheet on mobile */
    .techmap-detail-panel {
        width: 100% !important;
        right: -100% !important;
        max-height: 70vh;
        top: auto !important;
        bottom: 0 !important;
        height: auto !important;
        border-radius: 12px 12px 0 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(212,175,55,0.2) !important;
    }

    .techmap-detail-panel.open {
        right: 0 !important;
    }

    /* Tooltip — repositioned for touch */
    .techmap-tooltip {
        max-width: 250px !important;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    #tech-map-container {
        min-height: 350px !important;
    }

    .techmap-svg {
        min-width: 500px !important;
    }

    .techmap-civ-toggles {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .techmap-civ-label {
        font-size: 8px !important;
    }

    .techmap-controls {
        padding: 6px 8px !important;
    }

    .techmap-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
}

/* ═══════════════════════════════════════════════
   CODEX — MOBILE OPTIMIZATION
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    #codex {
        padding: 0 !important;
    }

    #codex > h2 {
        font-size: 0.85rem;
        padding: 6px 10px;
        margin: 0;
        text-align: center;
    }

    #codex > .section-description {
        font-size: 0.8rem;
        padding: 0 10px 8px;
        text-align: center;
    }

    /* Override the hardcoded 800px height */
    #codex-container {
        height: 60vh !important;
        min-height: 350px !important;
        max-height: 500px !important;
    }

    /* Controls — single column, compact */
    .codex-controls {
        gap: 8px !important;
        padding: 8px !important;
    }

    .codex-controls .control-group {
        padding: 8px !important;
    }

    .codex-controls h4 {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
    }

    .codex-stats {
        font-size: 0.75rem;
    }

    .codex-action-btn {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }

    .codex-mode-row {
        flex-direction: column;
        gap: 6px;
    }

    .codex-time-controls {
        flex-wrap: wrap;
        gap: 4px;
    }

    #codex-time {
        width: 100% !important;
    }

    .codex-note {
        font-size: 0.7rem !important;
    }

    /* Info columns — stack */
    .codex-info {
        padding: 8px !important;
    }

    .codex-info .info-column {
        min-width: 100% !important;
    }

    .codex-info h4 {
        font-size: 0.8rem;
    }

    .codex-info li {
        font-size: 0.8rem;
        padding: 6px 0;
    }

    /* Codex explorer — full screen bottom sheet */
    .codex-explorer {
        max-height: 60vh !important;
    }
}

@media (max-width: 480px) {
    #codex-container {
        height: 50vh !important;
        min-height: 300px !important;
        max-height: 400px !important;
    }

    .codex-controls .control-group {
        padding: 6px !important;
    }

    .codex-action-btn {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
    }
}

/* ═══════════════════════════════════════════════
   GATEWAY PROCESS — MOBILE OPTIMIZATION
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    #gateway-process {
        padding: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Tighter chapter padding */
    .gw-chapter {
        padding: 32px 16px !important;
    }

    .gw-hero {
        min-height: 80vh !important;
        min-height: 80dvh !important;
        padding: 32px 16px !important;
    }

    .gw-title {
        font-size: 1.6rem !important;
        letter-spacing: 0.1em !important;
    }

    .gw-heading {
        font-size: 1.3rem !important;
    }

    .gw-body {
        font-size: 0.88rem !important;
    }

    /* Method layout — stacks by default which is fine */
    .gw-focus-viz {
        margin-bottom: 16px !important;
    }

    .gw-focus-svg {
        width: 120px !important;
        height: 120px !important;
    }

    /* Level pills — compact */
    .gw-level-pill {
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .gw-pill-name {
        font-size: 0.82rem !important;
    }

    /* Document scroll cards — smaller */
    .gw-doc-card {
        flex: 0 0 240px !important;
        padding: 16px !important;
    }

    .gw-doc-title {
        font-size: 0.8rem !important;
    }

    /* Play button */
    .gw-play-btn {
        padding: 12px 20px !important;
        font-size: 0.8rem !important;
    }

    /* Chain nodes — compact */
    .gw-chain-node {
        padding: 14px !important;
    }

    .gw-chain-freq {
        font-size: 1.2rem !important;
    }

    /* Explore links */
    .gw-explore-btn {
        padding: 8px 12px !important;
        font-size: 0.68rem !important;
    }

    .gw-link-row {
        gap: 6px !important;
    }

    /* Legacy section */
    .gw-legacy {
        padding: 40px 16px !important;
    }
}

@media (max-width: 480px) {
    .gw-title {
        font-size: 1.3rem !important;
        letter-spacing: 0.08em !important;
    }

    .gw-heading {
        font-size: 1.1rem !important;
    }

    .gw-hero {
        min-height: 70vh !important;
        min-height: 70dvh !important;
    }

    .gw-hero-rings {
        width: 120px !important;
        height: 120px !important;
    }

    .gw-doc-card {
        flex: 0 0 200px !important;
        padding: 12px !important;
    }

    .gw-doc-title {
        font-size: 0.75rem !important;
        padding-right: 30px !important;
    }

    .gw-quote blockquote {
        font-size: 0.92rem !important;
    }

    .gw-insight-card {
        padding: 14px !important;
    }

    .gw-insight-card h3 {
        font-size: 0.82rem !important;
    }

    .gw-insight-card p {
        font-size: 0.8rem !important;
    }
}

/* ═══════════════════════════════════════════════
   ELECTROMAGNETIC / FREQUENCIES — MOBILE
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    #electromagnetic {
        padding: 0 !important;
        min-height: auto !important;
    }

    #electromagnetic h2 {
        font-size: 0.85rem;
        padding: 6px 10px;
        margin: 0;
        text-align: center;
    }

    /* Frequency sub-navigation — horizontal scroll */
    .freq-sub-nav {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        padding: 6px 8px !important;
        white-space: nowrap;
    }

    .freq-sub-btn {
        flex-shrink: 0;
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }

    /* Frequency panels — fill viewport */
    .freq-panel {
        padding: 0 !important;
    }

    /* Sound generator */
    #universal-sound-generator {
        min-height: 400px;
    }

    /* Levitation container */
    #levitation-container {
        min-height: 400px;
    }

    /* Sonic journeys */
    #sonic-journeys-container {
        min-height: 400px;
    }

    /* Quantum symphony iframe */
    #quantum-symphony-frame {
        height: calc(100vh - 100px) !important;
        min-height: 500px;
    }
}

@media (max-width: 480px) {
    .freq-sub-btn {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
    }

    #universal-sound-generator,
    #levitation-container,
    #sonic-journeys-container {
        min-height: 350px;
    }

    #quantum-symphony-frame {
        height: calc(100vh - 80px) !important;
    }
}

/* ═══════════════════════════════════════════════
   OVERVIEW / DASHBOARD — MOBILE OPTIMIZATION
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    #overview {
        padding: 8px !important;
    }

    /* Stats pills — horizontal scroll */
    .dashboard-stats {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px 0 8px !important;
    }

    .stat-pill {
        flex-shrink: 0;
        min-width: 120px;
    }

    /* Featured grid — 2-col on wider phones / narrow tablets */
    .featured-grid,
    .featured-grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .featured-card {
        min-height: auto !important;
    }

    .featured-preview {
        height: 120px !important;
    }

    .featured-info {
        padding: 12px !important;
    }

    .featured-info h3 {
        font-size: 0.9rem !important;
    }

    .featured-info p {
        font-size: 0.78rem !important;
    }

    .featured-launch {
        padding: 8px 16px !important;
        font-size: 0.75rem !important;
    }

    /* Viz card grid */
    .viz-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .viz-card {
        padding: 12px !important;
    }

    .viz-card-content h4 {
        font-size: 0.85rem;
    }

    .viz-card-content p {
        font-size: 0.75rem;
    }

    /* Insights grid */
    .insights-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .insight-card {
        padding: 12px !important;
    }

    .insight-number {
        font-size: 1.5rem !important;
    }

    .insight-text {
        font-size: 0.78rem !important;
    }

    /* Section headings — target actual h2 elements */
    .dashboard-featured > h2,
    .dashboard-grid > h2,
    .dashboard-insights > h2 {
        font-size: 0.85rem !important;
        padding: 0 4px;
    }

    /* Litho section title rules — full width on mobile */
    .litho-section-title {
        padding-bottom: 0.6rem !important;
    }

    /* Research metrics — tighter on mobile */
    .research-metrics {
        padding: 12px 8px !important;
        gap: 4px !important;
    }

    .metric-num {
        font-size: 1.8rem !important;
    }

    .metric-label {
        font-size: 0.55rem !important;
    }
}

/* ── Narrow phones (≤560px) — stack featured cards single column ── */
@media (max-width: 560px) {
    .featured-grid,
    .featured-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .viz-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Small phones (≤480px) ── */
@media (max-width: 480px) {
    #overview {
        padding: 4px !important;
    }

    .stat-pill {
        min-width: 100px;
        padding: 8px !important;
    }

    .stat-value {
        font-size: 1.1rem !important;
    }

    .stat-label {
        font-size: 0.65rem !important;
    }

    .featured-preview {
        height: 100px !important;
    }

    .featured-info h3 {
        font-size: 0.82rem !important;
    }

    .viz-card {
        padding: 10px !important;
    }

    .research-metrics {
        padding: 10px 4px !important;
    }

    .metric-num {
        font-size: 1.5rem !important;
    }

    .metric-label {
        font-size: 0.5rem !important;
        letter-spacing: 0.04em !important;
    }
}

/* ═══════════════════════════════════════════════
   HEADER — TABLET + MOBILE: hamburger + avatar layout
   ═══════════════════════════════════════════════ */
@media (max-width: 1280px) {
    /* Hide sound controls — not touch-friendly, eat header space */
    .header-actions {
        display: none !important;
    }

    /* Header: logo left, hamburger far right */
    .athenaeum-header {
        padding: 0 0.5rem !important;
        gap: 0 !important;
        min-height: 44px;
        /* Remove containment so fixed-position hamburger escapes to viewport */
        contain: none !important;
        will-change: auto !important;
    }

    /* Remove containment on nav inside header — lets hamburger position
       relative to viewport, not the narrow flex container */
    .athenaeum-header .unified-nav {
        contain: none !important;
    }

    /* Shrink title on tablet/mobile */
    .athenaeum-header h1 {
        font-size: 1rem !important;
    }

    /* Logo canvas — ensure no rectangular background bleeds through */
    .header-pyramid-logo {
        background: transparent !important;
        width: 36px !important;
        height: 36px !important;
    }

    /* Avatar: tuck left of hamburger, vertically centered in header */
    .magna-profile-avatar {
        top: 8px !important;
        right: calc(56px + env(safe-area-inset-right, 0px)) !important;
    }
}

@media (max-width: 420px) {
    .athenaeum-header h1 {
        font-size: 0.85rem !important;
    }

    .header-pyramid-logo {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ═══════════════════════════════════════════════
   GUARDIAN FAB — MOBILE
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .guardian-fab {
        bottom: 12px !important;
        right: 12px !important;
        width: 48px !important;
        height: 48px !important;
    }

    .guardian-fab-label {
        display: none;
    }

    .guardian-overlay-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: 70vh !important;
        bottom: 0 !important;
        right: 0 !important;
        border-radius: 12px 12px 0 0 !important;
    }
}

/* ═══════════════════════════════════════════════
   GLOBAL: TABLET (iPad) LANDSCAPE
   ═══════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    /* Slightly compact for iPad Pro landscape */
    .featured-grid {
        gap: 16px;
    }

    .codex-controls {
        gap: 12px;
    }

    #codex-container {
        height: 650px !important;
    }
}

/* Print styles */
@media print {
    .visualization-menu,
    .controls,
    .layer-toggle,
    .zoom-controls,
    #sound-toggle {
        display: none;
    }

    .viz-section {
        page-break-inside: avoid;
    }
}