/* Global Mobile Responsiveness */
@media (max-width: 768px) {
    .container {
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
    }

    .nav-menu {
        display: none !important;
    }

    .mobile-menu {
        display: block !important;
    }

    /* Grid adjustments */
    .grid, .pathways-grid, .simulators-grid, .platform-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Typography scaling */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.3rem !important; }

    /* Button adjustments */
    .cta-button, .action-btn, .launch-btn {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 1rem !important;
    }

    /* Card adjustments */
    .card, .pathway-card, .simulator-card, .action-card {
        padding: 15px !important;
        margin: 10px 0 !important;
    }

    /* Dashboard adjustments */
    .dashboard-grid, .stats-grid, .social-grid {
        grid-template-columns: 1fr !important;
    }

    /* Fixed elements adjustments */
    .floating-nav-widget {
        bottom: 10px !important;
        right: 10px !important;
        scale: 0.8 !important;
    }

    .consciousness-meter {
        top: 10px !important;
        right: 10px !important;
        min-width: 150px !important;
        padding: 10px !important;
    }

    .oracle-damage-tracker {
        bottom: 10px !important;
        right: 10px !important;
        min-width: 180px !important;
        padding: 10px !important;
        font-size: 0.9rem !important;
    }

    /* Search bar adjustments */
    .search-input {
        width: 150px !important;
        font-size: 0.9rem !important;
    }

    /* Platform switcher adjustments */
    .platform-switcher {
        display: none !important;
    }

    /* Header adjustments */
    .header-content {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Simulator adjustments */
    .simulator-features {
        font-size: 0.9rem !important;
    }

    /* Course player adjustments */
    .sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 10px !important;
    }

    /* Modal adjustments */
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        margin: 20px auto !important;
    }

    /* Form adjustments */
    .form-container {
        padding: 15px !important;
    }

    .form-row {
        flex-direction: column !important;
    }

    .form-group {
        margin-bottom: 15px !important;
    }

    /* Table adjustments */
    .table-responsive {
        overflow-x: auto !important;
    }

    table {
        font-size: 0.9rem !important;
    }

    /* Navigation adjustments */
    .nav-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Quick actions adjustments */
    .quick-actions {
        bottom: 10px !important;
        right: 10px !important;
        scale: 0.8 !important;
    }

    /* Banner adjustments */
    .hero, .banner {
        padding: 40px 15px !important;
    }

    /* Stats adjustments */
    .stat-card {
        min-height: auto !important;
        padding: 15px !important;
    }

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

    /* Hide complex elements on mobile */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-specific elements */
    .mobile-only {
        display: block !important;
    }

    /* Chart adjustments */
    .chart-container {
        height: 250px !important;
    }

    /* Video adjustments */
    .video-container {
        height: 200px !important;
    }

    /* Image adjustments */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Padding adjustments */
    .section {
        padding: 20px 10px !important;
    }

    /* Margin adjustments */
    .mb-4 { margin-bottom: 1rem !important; }
    .mt-4 { margin-top: 1rem !important; }
    .mx-4 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }

    /* Animation adjustments - reduce on mobile */
    * {
        animation-duration: 0.5s !important;
        transition-duration: 0.3s !important;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .pathways-grid, .simulators-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

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

    .search-input {
        width: 200px !important;
    }
}

/* Large screen adjustments */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px !important;
        margin: 0 auto !important;
    }

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

/* Touch device optimizations */
@media (pointer: coarse) {
    button, .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    .action-btn, .cta-button {
        padding: 15px 25px !important;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo, .icon {
        image-rendering: crisp-edges !important;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .card, .modal {
        background: rgba(0,0,0,0.8) !important;
        border-color: rgba(255,255,255,0.2) !important;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}