/* =========================================
   MOBILE RESPONSIVE STYLES - DESKTOP-LIKE EXPERIENCE
   ========================================= */

/* Mobile-First Base Styles */
:root {
    --mobile-header-height: 60px;
    --mobile-padding: 0.75rem;
    --tablet-padding: 1.25rem;
    --desktop-padding: 2rem;
}

/* =========================================
   RESPONSIVE HEADER - MAINTAINS DESKTOP FUNCTIONALITY
   ========================================= */

/* Adjust header for all screen sizes */
@media (max-width: 1200px) {
    .header-container {
        max-width: 100%;
        padding: 0 1.5rem !important;
    }
}

@media (max-width: 992px) {
    .header-container {
        padding: 0 1rem !important;
    }
    
    /* Adjust logo section */
    .logo-section h1 {
        font-size: 1.2rem !important;
    }
    
    .logo-section img {
        height: 50px !important;
    }
}

/* Force desktop toolbar visibility on narrow desktop viewports (split-screen) */
@media (max-width: 767px) and (pointer: fine) and (hover: hover) {
    /* Keep desktop toolbars visible on split-screen desktops */
    .strategy-tools-container,
    .strategy-top-controls,
    .strategy-map-tools {
        display: flex !important;
        flex-wrap: wrap !important; /* Allow wrapping on narrow screens */
        overflow-x: auto !important; /* Allow horizontal scroll if needed */
    }
}

/* Mobile Devices - Only trigger on actual touch devices, not split-screen desktops */
@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Global scrollbar hiding for all scrollable elements */
    * {
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE and Edge */
    }
    
    *::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, Opera */
    }
    
    /* Hide desktop toolbars on mobile */
    .strategy-tools-container,
    .strategy-top-controls,
    .strategy-map-tools {
        display: none !important;
    }
    
    /* Header Container - LESS TRANSPARENT ON MOBILE */
    .dashboard-header,
    header {
        padding: 0.5rem 0 !important;
        background: rgba(0, 10, 30, 0.85) !important; /* 85% opacity - still slightly transparent */
        backdrop-filter: blur(20px) !important;
        position: fixed !important;
    }
    
    .header-container {
        padding: 0 0.75rem !important;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }
    
    /* Logo Section - Compact but visible */
    .logo-section {
        gap: 0.5rem !important;
        flex: 0 0 auto;
    }
    
    .logo-section h1 {
        font-size: 1rem !important;
        display: block !important; /* Keep visible but smaller */
    }
    
    .logo-section img {
        height: 35px !important;
    }
    
    /* User Menu - Keep functional but responsive */
    .user-menu {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }
    
    /* Notification & Codes Icons */
    .notification-container,
    .codes-container {
        margin-right: 0.5rem !important;
    }
    
    .notification-icon,
    .codes-icon {
        padding: 0.35rem !important;
    }
    
    .notification-icon i,
    .codes-icon i {
        font-size: 1rem !important;
    }
    
    /* Notification Badge */
    .notification-badge,
    .codes-badge {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.65rem !important;
        top: -2px !important;
        right: -2px !important;
    }
    
    /* User Menu Toggle - Compact */
    .user-menu-toggle {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.6rem !important;
        gap: 0.3rem !important;
    }
    
    .user-menu-toggle i {
        font-size: 1rem !important;
    }
    
    #username-display {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block !important;
    }
    
    .dropdown-icon {
        font-size: 0.7rem !important;
    }
    
    /* Dropdowns - Full width on mobile with SEMI-TRANSPARENT BACKGROUND */
    .notification-dropdown,
    .codes-dropdown {
        position: fixed !important;
        top: var(--mobile-header-height) !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        background: rgba(0, 10, 30, 0.9) !important; /* 90% opacity - slightly transparent */
        backdrop-filter: blur(20px) !important;
        border: 2px solid var(--glass-border) !important;
    }
    
    .user-dropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        min-width: 200px !important;
        width: auto !important;
        margin-top: 0.5rem !important;
        background: rgba(0, 10, 30, 0.9) !important; /* 90% opacity - slightly transparent */
        backdrop-filter: blur(20px) !important;
    }
    
    /* Auth Buttons - Compact */
    .auth-buttons {
        display: flex;
        gap: 0.5rem !important;
        margin-left: auto;
    }
    
    .btn-login,
    .btn-subscribe {
        padding: 0.4rem 0.7rem !important;
        font-size: 0.85rem !important;
    }
    
    .btn-login i,
    .btn-subscribe i {
        display: none !important; /* Hide icons on mobile to save space */
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) and (pointer: coarse) and (hover: none) {
    .logo-section h1 {
        display: none !important; /* Hide on very small screens */
    }
    
    #username-display {
        max-width: 60px; /* Smaller but still visible */
        font-size: 0.8rem !important;
    }
    
    .user-menu-toggle {
        padding: 0.4rem !important;
    }
}

/* =========================================
   DASHBOARD CONTENT RESPONSIVE
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Default body styles for mobile - ALLOW NORMAL SCROLLING */
    html, body {
        height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Allow normal scrolling on all pages by default */
    }
    
    /* Only apply scroll blocking to profile page */
    body.profile-page {
        overflow: hidden !important; /* PREVENT body scrolling on profile page only */
        position: fixed !important; /* Lock the viewport on profile page only */
        touch-action: none !important; /* Disable scrolling on profile page only */
    }
    
    /* Hide scrollbars on profile page only */
    body.profile-page {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }
    
    /* Make main containers properly sized */
    .page-container {
        min-height: 100vh !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    .dashboard-content,
    main {
        overflow: visible !important;
        position: relative !important;
        min-height: calc(100vh - var(--mobile-header-height)) !important;
    }
    
    /* Main Content Area - RELATIVE POSITION ON MOBILE */
    main.dashboard-content,
    .dashboard-content {
        position: relative !important;
        margin-top: var(--mobile-header-height) !important;
        padding: var(--mobile-padding) !important;
        width: 100% !important;
        height: calc(100vh - var(--mobile-header-height)) !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* Prevent dashboard from scrolling */
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Welcome Section - Compact */
    .welcome-section {
        margin-bottom: 1rem !important;
        padding: 0.5rem 0 !important;
    }
    
    .welcome-title {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.2rem !important;
    }
    
    #welcome-username {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
    
    .welcome-subtitle {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }
    
    /* Navigation Bar - Horizontal Scroll Compact */
    .nav-bar {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0 0 0.75rem 0 !important;
        background: var(--glass-bg) !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .nav-bar::-webkit-scrollbar {
        height: 4px;
    }
    
    .nav-bar::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .nav-bar::-webkit-scrollbar-thumb {
        background: var(--cyber-blue);
        border-radius: 2px;
    }
    
    .nav-item {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
        gap: 0.5rem !important;
        min-height: 40px !important;
    }
    
    .nav-item i {
        font-size: 0.9rem !important;
    }
    
    /* Dashboard Grid - Compact for mobile viewport */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Dashboard Cards - Compact for viewport */
    .dashboard-card {
        min-height: auto !important;
        padding: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    .card-icon {
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto 0.25rem auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(147, 51, 234, 0.1)) !important;
        border-radius: 12px !important;
    }
    
    .card-icon i {
        font-size: 1.5rem !important;
    }
    
    .dashboard-card h3 {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .dashboard-card p {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
        width: 100% !important;
        text-align: center !important;
        color: var(--text-secondary) !important;
    }
    
    .card-action {
        font-size: 0.9rem !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-top: auto !important;
        color: var(--cyber-blue) !important;
    }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Header adjustments */
    .header-container {
        padding: 0 var(--tablet-padding) !important;
    }
    
    .logo-section h1 {
        font-size: 1.3rem !important;
    }
    
    /* Dashboard Content */
    .dashboard-content {
        padding: var(--tablet-padding) !important;
        margin-top: 80px !important;
    }
    
    /* Welcome Section */
    .welcome-title {
        font-size: 2.25rem !important;
    }
    
    /* Navigation Bar */
    .nav-bar {
        gap: 1rem !important;
        padding: 0.875rem 1.5rem !important;
    }
    
    /* Dashboard Grid - 2 columns */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }
    
    /* Dropdowns */
    .notification-dropdown {
        width: 320px !important;
    }
    
    .codes-dropdown {
        width: 420px !important;
    }
}

/* Small Laptops (1024px - 1399px) */
@media (min-width: 1024px) and (max-width: 1399px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* =========================================
   FEATURES SECTION RESPONSIVE
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    .features-section {
        margin-bottom: 2rem !important;
    }
    
    .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .feature-item {
        padding: 1rem !important;
        display: flex;
        align-items: center;
        gap: 1rem;
        text-align: left !important;
    }
    
    .feature-icon {
        width: 50px !important;
        height: 50px !important;
        flex: 0 0 auto;
    }
    
    .feature-icon i {
        font-size: 1.5rem !important;
    }
    
    .feature-item h4 {
        font-size: 1rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .feature-item p {
        font-size: 0.85rem !important;
    }
}

/* =========================================
   MODAL RESPONSIVE
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Auth Modals */
    .auth-modal-content,
    .modal-content {
        width: calc(100% - 2rem) !important;
        margin: 1rem !important;
        padding: 1.5rem !important;
        max-height: calc(100vh - 2rem) !important;
        overflow-y: auto !important;
    }
    
    .auth-modal-title,
    .modal-title {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    .auth-modal-subtitle {
        font-size: 0.85rem !important;
    }
    
    /* Form Elements */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: 0.6rem !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Buttons in modals */
    .btn-primary,
    .btn-secondary,
    .btn-auth {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Social login buttons */
    .social-login {
        gap: 0.5rem !important;
    }
    
    .btn-social {
        flex: 1 !important;
        padding: 0.6rem !important;
        font-size: 0.85rem !important;
    }
    
    .btn-social i {
        margin-right: 0.3rem !important;
    }
    
    /* Terms checkbox */
    .checkbox-group {
        font-size: 0.8rem !important;
    }
}

/* =========================================
   TABLE RESPONSIVE
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Wrap tables in scrollable container */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }
    
    table {
        min-width: 500px;
        font-size: 0.85rem !important;
    }
    
    th, td {
        padding: 0.5rem !important;
        white-space: nowrap;
    }
    
    /* Hide less important columns */
    .hide-mobile {
        display: none !important;
    }
}

/* =========================================
   STATS & INFO CARDS RESPONSIVE
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    .stat-card {
        padding: 0.75rem !important;
    }
    
    .stat-value {
        font-size: 1.25rem !important;
    }
    
    .stat-label {
        font-size: 0.75rem !important;
    }
    
    .info-card {
        padding: 1rem !important;
    }
    
    .info-card h3 {
        font-size: 1rem !important;
    }
    
    .info-card p {
        font-size: 0.85rem !important;
    }
}

/* =========================================
   UTILITY CLASSES
   ========================================= */

/* Text utilities for mobile */
@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    .truncate-mobile {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
    
    .text-mobile-center {
        text-align: center !important;
    }
    
    .text-mobile-small {
        font-size: 0.85rem !important;
    }
}

/* Spacing utilities for mobile */
@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    .mt-mobile-0 { margin-top: 0 !important; }
    .mt-mobile-1 { margin-top: 0.5rem !important; }
    .mt-mobile-2 { margin-top: 1rem !important; }
    .mb-mobile-0 { margin-bottom: 0 !important; }
    .mb-mobile-1 { margin-bottom: 0.5rem !important; }
    .mb-mobile-2 { margin-bottom: 1rem !important; }
    .p-mobile-0 { padding: 0 !important; }
    .p-mobile-1 { padding: 0.5rem !important; }
    .p-mobile-2 { padding: 1rem !important; }
    .px-mobile-1 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .py-mobile-1 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
}

/* Visibility utilities */
@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    .show-mobile { display: block !important; }
    .hide-mobile { display: none !important; }
    .show-mobile-flex { display: flex !important; }
    .show-mobile-inline { display: inline !important; }
}

@media (min-width: 768px) {
    .show-mobile { display: none !important; }
    .show-mobile-flex { display: none !important; }
    .show-mobile-inline { display: none !important; }
}

/* =========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Disable heavy animations on mobile */
    .animated-bg {
        animation: none !important;
        background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%) !important;
    }
    
    .particle-field,
    .gradient-layer {
        display: none !important;
    }
    
    /* Simpler transitions for better performance */
    *,
    *::before,
    *::after {
        transition-duration: 0.2s !important;
    }
    
    /* Reduce blur effects on mobile */
    .glass-card,
    .dashboard-card {
        backdrop-filter: blur(10px) !important;
    }
}

/* =========================================
   TOUCH OPTIMIZATIONS
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Larger touch targets */
    a,
    button,
    .clickable,
    .nav-item,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Better spacing for touch */
    .btn + .btn {
        margin-top: 0.5rem;
    }
    
    /* Disable hover effects on touch devices */
    @media (hover: none) and (pointer: coarse) {
        *:hover {
            transform: none !important;
            box-shadow: none !important;
        }
        
        .dashboard-card:hover {
            transform: none !important;
            border-color: var(--glass-border) !important;
        }
        
        .nav-item:hover {
            background: transparent !important;
        }
    }
}

/* =========================================
   Z-INDEX HIERARCHY FOR MOBILE
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    .dashboard-header {
        z-index: 1000 !important;
    }
    
    .user-dropdown {
        z-index: 1001 !important;
    }
    
    .notification-dropdown,
    .codes-dropdown {
        z-index: 1002 !important;
    }
    
    .modal,
    .auth-modal {
        z-index: 2000 !important;
    }
    
    .modal-backdrop {
        z-index: 1999 !important;
    }
}

/* =========================================
   TOP BAR OVERRIDE FOR PAGES WITH INLINE STYLES
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Override inline styles for top-bar - SEMI-TRANSPARENT */
    .top-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0.5rem 0.75rem !important;
        background: rgba(0, 10, 30, 0.85) !important; /* 85% opacity - balanced transparency */
        backdrop-filter: blur(20px) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        z-index: 999 !important;
        height: var(--mobile-header-height) !important;
    }
    
    .top-bar .logo-section {
        gap: 0.5rem !important;
        flex: 0 0 auto !important;
    }
    
    .top-bar .logo-section h1 {
        font-size: 1rem !important;
        display: block !important;
    }
    
    .top-bar .logo-section img {
        height: 35px !important;
    }
    
    .top-bar .user-menu {
        display: flex;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .top-bar .notification-container,
    .top-bar .codes-container {
        margin-right: 0.5rem !important;
    }
    
    .top-bar .notification-icon,
    .top-bar .codes-icon {
        padding: 0.35rem !important;
    }
    
    .top-bar .notification-icon i,
    .top-bar .codes-icon i {
        font-size: 1rem !important;
    }
    
    .top-bar .user-menu-toggle {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.6rem !important;
        gap: 0.3rem !important;
    }
    
    .top-bar #username-display {
        max-width: 100px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }
}

@media (max-width: 480px) and (pointer: coarse) and (hover: none) {
    .top-bar .logo-section h1 {
        display: none !important;
    }
    
    .top-bar #username-display {
        max-width: 60px !important;
        font-size: 0.8rem !important;
        display: inline-block !important;
    }
}

/* =========================================
   MY ARCHIVE PAGE MOBILE STYLES
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Page Container */
    .page-container {
        padding: 0.5rem !important;
    }
    
    /* Page Header */
    .page-header {
        margin-top: 60px !important;
        padding: 0.75rem !important;
        text-align: center;
    }
    
    .page-title {
        font-size: 1.5rem !important;
    }
    
    .page-subtitle {
        font-size: 0.85rem !important;
    }
    
    /* Archive Controls */
    .archive-controls {
        padding: 0.75rem !important;
    }
    
    /* Archive Source Toggle */
    .archive-source-toggle {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
        padding: 0.75rem !important;
    }
    
    .source-tab {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.6rem !important;
        font-size: 0.85rem !important;
    }
    
    .source-tab span {
        font-size: 0.85rem !important;
    }
    
    /* Content Type Toggle */
    .content-type-toggle {
        flex-direction: row !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    .content-tab {
        flex: 1 !important;
        justify-content: center !important;
        padding: 0.6rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Control Group */
    .control-group {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    /* Search Box */
    .search-box {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    .search-box input {
        padding: 0.6rem 1rem 0.6rem 2.5rem !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Filter Group */
    .filter-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    .filter-select {
        width: 100% !important;
        padding: 0.6rem !important;
        font-size: 0.85rem !important;
    }
    
    /* View Toggle */
    .view-toggle {
        justify-content: center !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    .view-btn {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
    
    /* Archive Stats */
    .archive-stats {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
        justify-content: center !important;
    }
    
    .stat-pill {
        flex: 0 0 auto !important;
        padding: 0.4rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Builds Container */
    .builds-container {
        padding: 0.5rem !important;
    }
    
    /* Builds Grid */
    .builds-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0 !important;
    }
    
    /* Build Card */
    .build-card {
        padding: 0.75rem !important;
    }
    
    .build-header {
        flex-direction: row !important;
        gap: 0.75rem !important;
        align-items: center !important;
        margin-bottom: 0.75rem !important;
    }
    
    .ship-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .ship-info h3 {
        font-size: 0.95rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .ship-info p {
        font-size: 0.75rem !important;
    }
    
    .ship-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .build-category {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* Build Content */
    .build-content {
        margin-bottom: 0.75rem !important;
    }
    
    .build-name {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .build-description {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .commander-info {
        font-size: 0.85rem !important;
        margin: 0.5rem 0 !important;
    }
    
    .commander-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Build Stats */
    .build-stats {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Build Actions */
    .build-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .action-btn {
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    .action-btn i {
        margin-right: 0.25rem !important;
    }
    
    /* List View */
    .build-list-item {
        flex-direction: column !important;
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    .list-ship-info {
        width: 100% !important;
    }
    
    .ship-icon-small {
        width: 30px !important;
        height: 30px !important;
    }
    
    .list-commander,
    .list-category,
    .list-stats,
    .list-date {
        width: 100% !important;
        font-size: 0.8rem !important;
    }
    
    .list-actions {
        width: 100% !important;
        display: flex !important;
        gap: 0.5rem !important;
        justify-content: space-between !important;
    }
    
    .action-icon {
        flex: 1 !important;
        padding: 0.5rem !important;
    }
    
    /* Strategies */
    .strategies-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .strategy-card {
        padding: 0.75rem !important;
    }
    
    /* Empty States */
    .empty-state,
    .strategies-empty-state {
        padding: 2rem 1rem !important;
    }
    
    .empty-icon {
        font-size: 3rem !important;
    }
    
    .empty-state h3,
    .strategies-empty-state h3 {
        font-size: 1.1rem !important;
    }
    
    .empty-state p,
    .strategies-empty-state p {
        font-size: 0.85rem !important;
    }
    
    /* Back Section */
    .back-section {
        padding: 1rem 0.5rem !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .back-link {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
        display: inline-block !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
}

/* =========================================
   USER PROFILE PAGE MOBILE STYLES
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Profile Info Bar */
    .profile-info-bar {
        flex-direction: column !important;
        padding: 1rem !important;
        gap: 1rem !important;
        text-align: center !important;
        margin-bottom: 0.75rem !important;
        overflow: visible !important; /* Fix for mobile stats visibility */
        max-height: none !important; /* Remove height restriction on mobile */
    }
    
    /* Specifically fix the verified stats card on mobile */
    #verified-stats-card {
        overflow: visible !important;
        max-height: none !important;
    }
    
    /* Ensure stats content is visible */
    #verified-stats-content,
    #detailed-stats-content {
        overflow: visible !important;
        max-height: none !important;
    }
    
    .profile-avatar-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    
    .profile-avatar {
        width: 70px !important;
        height: 70px !important;
    }
    
    .profile-details {
        text-align: center !important;
    }
    
    .profile-details h2 {
        font-size: 1.1rem !important;
    }
    
    .profile-details p {
        font-size: 0.8rem !important;
    }
    
    .profile-stats {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: space-around !important;
        gap: 0.5rem !important;
    }
    
    .stat-item {
        flex: 1 !important;
    }
    
    .stat-value {
        font-size: 1rem !important;
    }
    
    .stat-label {
        font-size: 0.65rem !important;
    }
    
    /* Profile Navigation Tabs - OVERRIDE ALL */
    .profile-tabs,
    #user-profile-page .nav-bar,
    .user-profile-page .nav-bar,
    .profile-section .nav-bar,
    #settings-section .nav-bar,
    #overview-section .nav-bar,
    #subscription-section .nav-bar,
    #security-section .nav-bar {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        margin: 0 0 1.5rem 0 !important;
        padding: 0.75rem !important;
        background: rgba(0, 0, 0, 0.9) !important;
        border-radius: 8px !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: 50px !important;
        position: sticky !important;
        top: calc(var(--mobile-header-height) + 10px) !important;
        z-index: 100 !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    .profile-tabs::-webkit-scrollbar,
    #user-profile-page .nav-bar::-webkit-scrollbar {
        display: none;
    }
    
    /* Profile Tab Items */
    #user-profile-page .nav-item,
    .user-profile-page .nav-item,
    .profile-section .nav-item,
    .tab-btn {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        min-width: fit-content !important;
        flex: 0 0 auto !important;
        background: rgba(30, 41, 59, 0.6) !important;
        border: 1px solid var(--glass-border) !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.4rem !important;
        transition: all 0.3s ease !important;
        height: auto !important;
        min-height: 36px !important;
    }
    
    #user-profile-page .nav-item i,
    .user-profile-page .nav-item i {
        font-size: 0.9rem !important;
    }
    
    #user-profile-page .nav-item.active,
    .user-profile-page .nav-item.active {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 51, 234, 0.3)) !important;
        border-color: var(--cyber-blue) !important;
        color: var(--cyber-blue) !important;
    }
    
    /* Profile Sections */
    .profile-sections-container {
        padding: 0.5rem !important;
        padding-top: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .profile-section {
        padding: 0.75rem !important;
        padding-top: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Fix for overview and settings sections */
    #overview-section,
    #settings-section,
    #subscription-section,
    #security-section {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    #overview-section .section-content,
    #settings-section .section-content,
    #subscription-section .section-content,
    #security-section .section-content {
        width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* All Profile Section Grids - Stack vertically on mobile */
    #stats-section div[style*="grid-template-columns: 1fr 1fr"],
    #subscription-section div[style*="grid-template-columns: 1fr 1fr"],
    #security-section div[style*="grid-template-columns: 1fr 1fr"],
    #settings-section div[style*="grid-template-columns: repeat(auto-fit"],
    #settings-section .section-content > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    /* Stack detailed stats grid on mobile */
    #detailed-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 !important;
    }
    
    #settings-section .profile-info-bar {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
        box-sizing: border-box !important;
    }
    
    /* Hide Profile Settings container on mobile - first profile-info-bar in settings */
    #settings-section .profile-info-bar:first-of-type,
    #settings-section .profile-info-bar:has(#profile-form) {
        display: none !important;
    }
    
    /* Content Grids & Overview Section */
    .content-grid,
    #overview-section .content-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0 !important;
    }
    
    .info-item,
    #overview-section .glass-card {
        padding: 1rem !important;
        background: rgba(30, 41, 59, 0.6) !important;
        border-radius: 12px !important;
        border: 1px solid var(--glass-border) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    .info-label {
        font-size: 0.85rem !important;
        color: var(--text-secondary) !important;
        font-weight: 500 !important;
    }
    
    .info-value {
        font-size: 0.95rem !important;
        color: var(--text-primary) !important;
        font-weight: 600 !important;
        text-align: right !important;
    }
    
    /* Overview Cards */
    #overview-section h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
        color: var(--cyber-blue) !important;
        text-align: center !important;
    }
    
    #overview-section .card-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Quick Actions Container */
    #overview-section .profile-info-bar div[style*="grid-template-columns: 1fr 1fr"],
    #overview-section .profile-info-bar > div:has(> .btn-primary) {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    #overview-section .profile-info-bar .btn-primary,
    #overview-section .profile-info-bar a.btn-primary {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        text-decoration: none !important;
    }
    
    #overview-section .profile-info-bar .btn-primary i {
        font-size: 1rem !important;
    }
    
    /* Subscription Card & Section */
    .subscription-card,
    #subscription-section .glass-card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .subscription-header,
    #current-plan-card {
        flex-direction: column !important;
        gap: 0.75rem !important;
        text-align: center !important;
        align-items: center !important;
        padding: 1rem !important;
    }
    
    .subscription-info {
        width: 100% !important;
        text-align: center !important;
    }
    
    .subscription-info h4,
    #current-plan {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #plan-price {
        font-size: 1.25rem !important;
        color: var(--cyber-blue) !important;
        margin-bottom: 0.5rem !important;
    }
    
    #billing-cycle,
    #next-billing-date {
        font-size: 0.8rem !important;
        color: var(--text-secondary) !important;
        margin-bottom: 0.3rem !important;
    }
    
    .tier-badge,
    #user-tier-badge {
        margin: 0 !important;
        padding: 0.4rem 0.8rem !important;
        font-size: 0.75rem !important;
        display: none !important; /* Hide tier badge on mobile header to save space */
    }
    
    #subscription-section .tier-badge {
        display: inline-block !important; /* Show in subscription section */
    }
    
    .subscription-features,
    .benefit-list {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
        padding: 0.5rem !important;
    }
    
    .feature-item,
    .benefit-item {
        padding: 0.5rem !important;
        font-size: 0.85rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .feature-item i,
    .benefit-item i {
        font-size: 0.9rem !important;
        flex: 0 0 auto !important;
    }
    
    /* Subscription Buttons */
    #manage-subscription-btn,
    #cancel-subscription {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        margin-top: 0.5rem !important;
    }
    
    /* Settings Form */
    .settings-form {
        padding: 0.75rem !important;
    }
    
    .form-group {
        margin-bottom: 0.75rem !important;
    }
    
    .form-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .form-row .form-group {
        width: 100% !important;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    select,
    textarea {
        width: 100% !important;
        padding: 0.6rem !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    label {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    /* Buttons */
    .btn-group {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success {
        width: 100% !important;
        padding: 0.6rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Activity Timeline */
    .activity-timeline {
        padding-left: 0.75rem !important;
    }
    
    .timeline-item {
        padding-left: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .timeline-item::before {
        width: 8px !important;
        height: 8px !important;
        left: -4px !important;
    }
    
    .timeline-content {
        padding: 0.6rem !important;
    }
    
    .timeline-time {
        font-size: 0.7rem !important;
    }
    
    .timeline-title {
        font-size: 0.85rem !important;
    }
    
    .timeline-description {
        font-size: 0.8rem !important;
    }
    
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .stat-card {
        padding: 0.6rem !important;
    }
    
    .stat-icon {
        width: 25px !important;
        height: 25px !important;
        font-size: 0.85rem !important;
    }
    
    .stat-number {
        font-size: 1.1rem !important;
    }
    
    /* Achievement Cards */
    .achievement-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .achievement-card {
        padding: 0.6rem !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
    }
    
    .achievement-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
    }
    
    .achievement-info {
        flex: 1 !important;
    }
    
    .achievement-name {
        font-size: 0.85rem !important;
    }
    
    .achievement-description {
        font-size: 0.75rem !important;
    }
    
    /* Preference Toggles */
    .preference-item {
        padding: 0.6rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .preference-label {
        font-size: 0.85rem !important;
    }
    
    .toggle-switch {
        width: 36px !important;
        height: 18px !important;
    }
    
    .toggle-slider {
        width: 14px !important;
        height: 14px !important;
    }
    
    input:checked + .toggle-slider {
        transform: translateX(18px) !important;
    }
    
    /* Password Requirements */
    .password-requirements {
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
    }
    
    .requirement {
        font-size: 0.7rem !important;
        padding: 0.2rem 0 !important;
    }
    
    /* Modals */
    .password-modal .modal-content,
    .delete-account-modal {
        padding: 1rem !important;
        width: calc(100% - 2rem) !important;
        margin: 1rem !important;
    }
    
    .warning-icon {
        font-size: 2.5rem !important;
    }
    
    /* Privacy Settings */
    .privacy-option {
        padding: 0.6rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .privacy-option label {
        font-size: 0.85rem !important;
    }
    
    .privacy-option small {
        font-size: 0.7rem !important;
    }
}

/* =========================================
   FOOTER & AUTH FOOTER MOBILE STYLES
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Auth Footer */
    .auth-footer {
        text-align: center !important;
        padding: 1rem !important;
        width: 100% !important;
        margin-top: 1rem !important;
    }
    
    .auth-footer a {
        display: inline-block !important;
        margin: 0.25rem !important;
        color: var(--cyber-blue) !important;
    }
    
    /* General Footer */
    footer {
        text-align: center !important;
        padding: 1.5rem 1rem !important;
        width: 100% !important;
    }
    
    footer p,
    footer .footer-content,
    footer .footer-text {
        text-align: center !important;
        width: 100% !important;
        margin: 0.5rem auto !important;
        font-size: 0.85rem !important;
    }
    
    footer .footer-links {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1rem !important;
        margin: 1rem 0 !important;
        flex-wrap: wrap !important;
    }
    
    footer .footer-links a {
        display: inline-block !important;
        padding: 0.25rem 0.5rem !important;
        text-align: center !important;
        white-space: nowrap !important;
        font-size: 0.85rem !important;
    }
    
    /* Copyright & Attribution */
    .footer-copyright,
    .footer-attribution {
        text-align: center !important;
        font-size: 0.75rem !important;
        margin-top: 1rem !important;
        color: var(--text-secondary) !important;
    }
}

/* =========================================
   MATCH PAGE MOBILE STYLES
   ========================================= */

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Featured Builds Section */
    .featured-section {
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .featured-section h3 {
        font-size: 1.3rem !important;
        margin-bottom: 1rem !important;
        flex-wrap: wrap !important;
    }
    
    .featured-section h3::before,
    .featured-section h3::after {
        display: none !important; /* Hide decorative lines on mobile */
    }
    
    .featured-section h3 span {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .featured-section h3 i {
        font-size: 1.2rem !important;
    }
    
    /* Featured Grid - Single column on mobile */
    .featured-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 !important;
        margin: 0 auto 1.5rem auto !important;
        max-width: 100% !important;
    }
    
    /* Featured Build Cards */
    .featured-grid .build-card,
    .featured-grid .fleet-card {
        width: 100% !important;
        padding: 1rem !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Build card adjustments for mobile */
    .featured-grid .build-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .featured-grid .ship-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .featured-grid .ship-name {
        font-size: 0.95rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .featured-grid .build-content {
        padding: 0.75rem 0 !important;
    }
    
    .featured-grid .build-name {
        font-size: 1rem !important;
    }
    
    .featured-grid .build-description {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .featured-grid .build-stats {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    .featured-grid .build-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .featured-grid .action-btn {
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Community Builds Grid - Also needs mobile adjustment */
    .builds-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Fleet Cards in match page */
    .fleets-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Ships Grid */
    .ships-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Events Grid */
    .events-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Match page featured builds */
    #fleet-match .featured-builds {
        padding: 0.75rem !important;
    }
    
    #fleet-match .featured-builds h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    #fleet-match .featured-builds-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    #fleet-match .build-card {
        padding: 0.75rem !important;
    }
    
    #fleet-match .build-card .build-header {
        margin-bottom: 0.5rem !important;
    }
    
    #fleet-match .build-card h4 {
        font-size: 0.95rem !important;
    }
    
    #fleet-match .build-card .author {
        font-size: 0.8rem !important;
    }
    
    #fleet-match .build-card .build-stats {
        gap: 0.75rem !important;
        margin: 0.5rem 0 !important;
    }
    
    #fleet-match .build-card .stat {
        font-size: 0.8rem !important;
    }
    
    #fleet-match .build-card .stat-value {
        font-size: 0.9rem !important;
        margin-top: 0.25rem !important;
    }
    
    #fleet-match .build-card .build-actions {
        margin-top: 0.5rem !important;
        gap: 0.5rem !important;
    }
    
    #fleet-match .build-card .action-btn {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
    }
    
    /* =========================================
       SHIP BUILDER PAGE MOBILE STYLES - COMPREHENSIVE
       ========================================= */
    
    /* EMERGENCY FIX: Override ALL body overflow with maximum force */
    html {
        overflow: visible !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
    }
    
    body {
        overflow: visible !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        position: relative !important;
        display: block !important;
        flex-direction: column !important;
        background: #0a0f1c !important;
    }
    
    /* Override ALL conflicting body styles */
    body[style*="overflow: hidden"] {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
    }
    
    /* Remove the flex and height restrictions */
    body[style*="height: 100vh"] {
        height: auto !important;
        min-height: 100vh !important;
    }
    
    body[style*="display: flex"] {
        display: block !important;
    }
    
    /* App container mobile override */
    .app-container {
        padding: 0.5rem !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
        display: block !important;
        flex-direction: column !important;
    }
    
    /* COMPLETELY DISABLE particles on mobile - they're too aggressive */
    .particles,
    .particle,
    canvas#particles-canvas,
    #particles-js,
    .particles-js-canvas-el {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        animation: none !important;
        pointer-events: none !important;
    }
    
    /* Stop ALL particle animations */
    @keyframes float {
        0%, 100% { transform: none !important; }
    }
    
    /* Header top mobile */
    .header-top {
        padding: 0.75rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: rgba(30, 60, 120, 0.95) !important;
    }
    
    .header-top h1 {
        font-size: 1.5rem !important;
        letter-spacing: 1px !important;
    }
    
    .header-top p {
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
    }
    
    /* Navigation header mobile */
    .nav-header {
        padding: 0.5rem !important;
        height: auto !important;
        margin-bottom: 1rem !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    /* =========================================
       SHIP BUILDER 3 TAB BUTTONS - MOBILE ONLY
       ========================================= */
    
    /* Header tabs slot positioning */
    #header-tabs-slot {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
        background: rgba(30, 60, 120, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        padding: 0.5rem !important;
        display: flex !important;
        justify-content: center !important;
        flex: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Override inline styles */
    #header-tabs-slot[style*="justify-content: center"] {
        justify-content: center !important;
    }
    
    /* Nav bar container inside header-tabs-slot */
    #header-tabs-slot .nav-bar {
        display: flex !important;
        gap: 0.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        animation: none !important;
        width: auto !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Style the 3 tab buttons */
    #header-tabs-slot .nav-item,
    #header-tabs-slot .tab-button {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px !important;
        color: var(--text-primary) !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        min-height: 40px !important;
        flex-shrink: 0 !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Hover state for buttons */
    #header-tabs-slot .nav-item:hover,
    #header-tabs-slot .tab-button:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        transform: translateY(-1px) !important;
    }
    
    /* Active tab style */
    #header-tabs-slot .nav-item.active,
    #header-tabs-slot .tab-button.active {
        background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(147, 51, 234, 0.3)) !important;
        border-color: var(--cyber-blue) !important;
        color: var(--cyber-blue) !important;
        font-weight: 600 !important;
    }
    
    /* Icons in buttons */
    #header-tabs-slot .nav-item i,
    #header-tabs-slot .tab-button i {
        font-size: 0.9rem !important;
    }
    
    /* Adjust sections below to account for fixed header - FULL HEIGHT */
    #ships-section,
    #commanders-section,
    #combined-section {
        padding-top: 70px !important; /* Space for fixed header tabs */
        width: 100vw !important;
        height: calc(100vh - 110px) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Override body and html on mobile - REMOVE ALL GAPS */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: 100% !important;
        width: 100% !important;
        position: relative !important;
    }
    
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Override inline styles */
    body[style*="overflow: hidden"] {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Arrow navigation container styles - FULL WIDTH AND HEIGHT NO GAPS */
    .arrow-nav-container {
        position: fixed !important;
        top: 116px !important; /* EXACT: header 60px + padding 8px + button 40px + padding 8px = 116px */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 116px) !important;
        overflow: hidden;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
    }
    
    /* Hide collapse button on mobile */
    .collapse-btn,
    .collapse-button,
    button[class*="collapse"],
    .btn-collapse {
        display: none !important;
    }
    
    /* Fix modal popups position for mobile */
    .panel-view .modal-module-popup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999 !important;
        max-width: 90vw !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        background: rgba(20, 30, 50, 0.98) !important;
        border: 2px solid var(--accent) !important;
        border-radius: 10px !important;
        padding: 15px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* Hide modal by default on mobile */
    .panel-view .modal-module-popup {
        display: none !important;
    }
    
    /* Show modal when wrapper has mobile-active class */
    .panel-view .modal-module-wrapper.mobile-active .modal-module-popup {
        display: block !important;
    }
    
    /* Also support hover for testing */
    @media (hover: hover) {
        .panel-view .modal-module-wrapper:hover .modal-module-popup {
            display: block !important;
        }
    }
    
    /* Compress rank selectors */
    .panel-view .rank-selectors {
        display: flex !important;
        gap: 10px !important;
        margin: 10px 0 !important;
    }
    
    .panel-view .rank-selectors label {
        flex: 1 !important;
    }
    
    .panel-view .rank-selectors select {
        width: 100% !important;
        padding: 5px !important;
    }
    
    /* Remove show more/less buttons from skills */
    .panel-view .skill-show-more,
    .panel-view .show-more-btn,
    .panel-view .show-less-btn,
    .panel-view [class*="show-more"],
    .panel-view [class*="show-less"] {
        display: none !important;
    }
    
    /* Ensure all skill descriptions are visible */
    .panel-view .skill-description {
        max-height: none !important;
        overflow: visible !important;
    }
    
    .panel-container {
        width: 100%;
        height: 100%;
    }
    
    /* Fix ship header for mobile - ensure it fits in view */
    .ship-header {
        margin-top: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Ensure ship header content fits */
    .ship-header .ship-name,
    .ship-header .ship-label {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 45% !important;
    }
    
    /* Fix combined tab ship header specifically */
    #combined-details-panel .ship-header {
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    #combined-details-panel .ship-header > div {
        flex-wrap: nowrap !important;  /* Keep on same line */
        gap: 0.5rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Ensure commander name stays on right */
    #combined-details-panel .ship-header .ship-label {
        text-align: right !important;
        flex-shrink: 1 !important;
    }
    
    /* Add spacing after section headers */
    h2 i.fas,
    h3 i.fas {
        margin-right: 8px !important;
    }
    
    .details-section h2,
    .modifications-section h2,
    .consumables-section h2,
    #combined-details-panel h2 {
        margin-bottom: 15px !important;
    }
    
    #combined-details-panel h3 {
        margin-bottom: 12px !important;
    }
    
    /* Center nation selection and headers in all tabs */
    .filter-step,
    .controls-container,
    #filter-container,
    #commanders-filter-container,
    #combined-filter-container {
        text-align: center !important;
        width: 100% !important;
    }
    
    .filter-step h3 {
        text-align: center !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }
    
    /* Center nation flags */
    .filter-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    .nation-flag {
        margin: 0 !important;
    }
    
    /* Center all selection headers */
    .left-panel h3,
    .controls-container h3 {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Fix tier selection buttons - spacing and size */
    .filter-buttons button,
    .tier-button,
    .filter-button {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        margin: 3px !important;
        min-width: 40px !important;
        height: 36px !important;
    }
    
    /* Tier buttons specific styling */
    .filter-step:has(.tier-button) .filter-buttons {
        gap: 5px !important;
        padding: 5px !important;
    }
    
    .tier-button {
        border-radius: 6px !important;
        font-weight: 600 !important;
    }
    
    /* Legendary tier button - COMPLETE OVERRIDE */
    .filter-btn[data-value="Legendary"] {
        position: relative !important;
        min-width: 50px !important;
        max-width: 60px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 3px !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        border: 2px solid #ffd700 !important;
        background: rgba(255, 215, 0, 0.1) !important;
        border-radius: 8px !important;
        display: inline-block !important;
    }
    
    /* Replace "Legendary" text with "L ⭐" - FORCE CENTER */
    .filter-btn[data-value="Legendary"]::before {
        content: "L ⭐" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        height: auto !important;
        font-weight: bold !important;
        color: #ffd700 !important;
        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-indent: 0 !important;
        display: block !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }
    
    /* Override any other ::before styles */
    .filter-btn[data-value="Legendary"]::after {
        display: none !important;
    }
    
    .filter-btn[data-value="Legendary"]:hover {
        background: rgba(255, 215, 0, 0.2) !important;
        border-color: #ffd700 !important;
    }
    
    /* MAKE SHIP AND COMMANDER SELECTION SUPER OBVIOUS ON MOBILE */
    /* Selected ship/commander cards - INCLUDING COMBINED TAB */
    .ship-card.selected,
    .commander-card.selected,
    .ship-item.selected,
    .commander-item.selected,
    .ship-card.active,
    .commander-card.active,
    .ship-item.active,
    .commander-item.active,
    [data-ship].selected,
    [data-commander].selected,
    .panel-view .ship-card.selected,
    .panel-view .commander-card.selected,
    .combined-ship-card.selected,
    .combined-commander-card.selected,
    .combined-ship-item.selected,
    .combined-commander-item.selected,
    #combined-section .ship-card.selected,
    #combined-section .commander-card.selected,
    #combined-section [data-ship].selected,
    #combined-section [data-commander].selected,
    .commander-grid-item.selected,
    .commander-grid-item.active,
    #combined-section .commander-grid-item.selected,
    #combined-section .commander-grid-item.active,
    .panel-view .commander-grid-item.selected,
    .panel-view .commander-grid-item.active,
    .panel-view #combined-section .ship-card.selected,
    .panel-view #combined-section .commander-grid-item.selected {
        border: 3px solid #00ff00 !important;
        background: rgba(0, 255, 0, 0.2) !important;
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.6), 
                    inset 0 0 20px rgba(0, 255, 0, 0.3) !important;
        transform: scale(1.05) !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Add checkmark to selected items - INCLUDING COMBINED TAB */
    .ship-card.selected::after,
    .commander-card.selected::after,
    .ship-item.selected::after,
    .commander-item.selected::after,
    .ship-card.active::after,
    .commander-card.active::after,
    [data-ship].selected::after,
    [data-commander].selected::after,
    .combined-ship-card.selected::after,
    .combined-commander-card.selected::after,
    .combined-ship-item.selected::after,
    .combined-commander-item.selected::after,
    #combined-section .ship-card.selected::after,
    #combined-section .commander-card.selected::after,
    #combined-section [data-ship].selected::after,
    #combined-section [data-commander].selected::after,
    .commander-grid-item.selected::after,
    .commander-grid-item.active::after,
    #combined-section .commander-grid-item.selected::after,
    #combined-section .commander-grid-item.active::after,
    .panel-view .commander-grid-item.selected::after,
    .panel-view .commander-grid-item.active::after,
    .panel-view #combined-section .ship-card.selected::after,
    .panel-view #combined-section .commander-grid-item.selected::after {
        content: "✓" !important;
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        background: #00ff00 !important;
        color: #000 !important;
        width: 25px !important;
        height: 25px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: bold !important;
        font-size: 16px !important;
        z-index: 20 !important;
        box-shadow: 0 0 10px rgba(0, 255, 0, 0.8) !important;
    }
    
    /* Make clickable ship/commander cards more obvious on hover */
    .ship-card:hover,
    .commander-card:hover,
    .ship-item:hover,
    .commander-item:hover,
    [data-ship]:hover,
    [data-commander]:hover,
    .commander-grid-item:hover {
        border: 2px solid var(--accent-blue) !important;
        background: rgba(126, 200, 227, 0.1) !important;
        cursor: pointer !important;
        transform: scale(1.02) !important;
        transition: all 0.2s ease !important;
    }
    
    /* Selected filter/tier buttons */
    .filter-btn.selected,
    .filter-btn.active,
    .tier-button.selected,
    .tier-button.active,
    .filter-button.selected,
    .filter-button.active {
        border: 3px solid #00ff00 !important;
        background: rgba(0, 255, 0, 0.3) !important;
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.7) !important;
        transform: scale(1.05) !important;
    }
    
    /* ADD PADDING TO CONTAINERS TO PREVENT OVERFLOW WHEN SELECTED */
    .ship-grid,
    .commander-grid,
    #ship-grid,
    #commander-grid,
    #combined-ship-grid,
    #combined-commander-grid,
    .panel-view .ship-grid,
    .panel-view .commander-grid {
        padding: 10px !important;
        overflow: visible !important;
        margin: 5px !important;
    }
    
    /* Ensure ship/commander cards have space for scaling */
    .ship-card,
    .commander-card,
    .ship-item,
    .commander-item,
    .commander-grid-item,
    [data-ship],
    [data-commander] {
        margin: 5px !important;
    }
    
    /* Hide "Save Build" text on mobile - show only icon */
    #nav-save-build-btn {
        font-size: 0 !important;
        padding: 0.75rem !important;
        min-width: 44px !important;
        justify-content: center !important;
    }
    
    #nav-save-build-btn i {
        font-size: 1.2rem !important;
        display: inline-block !important;
    }
    
    /* STRATEGY BUILDER MOBILE OPTIMIZATIONS */
    
    /* Remove all transitions on mobile to prevent size jumping */
    #strategy-map-canvas,
    #strategy-map-canvas *,
    #edit_window,
    #edit_window *,
    .strategy-map-canvas-container,
    .strategy-map-canvas-container * {
        transition: none !important;
        animation: none !important;
    }
    
    /* Prevent hover effects causing size changes */
    #strategy-map-canvas:hover,
    #edit_window:hover,
    .strategy-map-canvas-container:hover {
        transform: none !important;
    }
    
    /* Force proper canvas container sizing from start */
    .strategy-map-canvas-container {
        width: min(calc(100vw - 20px), 1024px) !important;
        height: min(calc(100vw - 20px), 1024px) !important;
        margin: 10px auto !important;
        overflow: hidden !important;
        position: relative !important;
        display: block !important;
    }
    
    /* Edit window should be flexible but not override fullscreen mode */
    #edit_window:not(.fullscreen-mode #edit_window) {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }
    
    /* Canvas should maintain aspect ratio but not in fullscreen mode */
    #strategy-map-canvas:not(.fullscreen-mode #strategy-map-canvas) {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
    
    /* Fullscreen mode canvas scaling for mobile */
    .fullscreen-mode #edit_window {
        width: 400px !important;
        height: 400px !important;
        position: relative !important;
        margin: 0 auto !important;
    }
    
    /* Apply transform directly to canvas ID to override any container issues */
    #strategy-map-canvas {
        width: 1024px !important;
        height: 1024px !important;
        /* REMOVED SCALING - Canvas stays at full 1024x1024 size on mobile */
        /* transform: scale(0.390625) !important; */
        /* -webkit-transform: scale(0.390625) !important; */
        /* transform-origin: 0 0 !important; */
        /* -webkit-transform-origin: 0 0 !important; */
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Even more specific for fullscreen */
    .fullscreen-mode #strategy-map-canvas,
    .fullscreen-mode .strategy-map-canvas-container #strategy-map-canvas,
    .fullscreen-mode .strategy-map-area #strategy-map-canvas,
    .fullscreen-mode * #strategy-map-canvas {
        /* REMOVED SCALING - Canvas stays at full 1024x1024 size */
        /* transform: scale(0.390625) !important; */
        /* -webkit-transform: scale(0.390625) !important; */
        /* transform-origin: left top !important; */
        /* -webkit-transform-origin: left top !important; */
    }
    
    /* Force Safari to apply transforms */
    @supports (-webkit-touch-callout: none) {
        #strategy-map-canvas {
            -webkit-transform: scale3d(0.390625, 0.390625, 1) !important;
            transform: scale3d(0.390625, 0.390625, 1) !important;
        }
    }
    
    /* Fullscreen mode for mobile strategy builder */
    .mobile-fullscreen-mode {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: #001833 !important;
        z-index: 99999 !important;
    }
    
    .mobile-fullscreen-mode .fullscreen-mode {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99999 !important;
        background-color: #001833 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Canvas container fills screen and centers the canvas */
    .mobile-fullscreen-mode .strategy-map-canvas-container {
        position: relative !important;
        width: min(100vw, 100vh) !important;
        height: min(100vw, 100vh) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Edit window matches container */
    .mobile-fullscreen-mode #edit_window {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }
    
    /* Canvas fills its container completely */
    .mobile-fullscreen-mode #strategy-map-canvas {
        width: 100% !important;
        height: 100% !important;
        touch-action: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
    
    /* Mobile toolbar button (floating action button style) */
    .mobile-toolbar-toggle {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        width: 56px !important;
        height: 56px !important;
        background: #00d4ff !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
        z-index: 100003 !important;
        cursor: pointer !important;
        color: white !important;
        font-size: 24px !important;
    }
    
    /* Expandable toolbar from bottom */
    .mobile-fullscreen-mode .strategy-map-tools,
    .mobile-fullscreen-mode .fullscreen-tools {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(100%) !important;
        width: 100vw !important;
        height: auto !important;
        max-height: 50vh !important;
        background: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 20px 20px 0 0 !important;
        border: 1px solid rgba(0, 212, 255, 0.3) !important;
        border-bottom: none !important;
        padding: 20px !important;
        z-index: 100002 !important;
        transition: transform 0.3s ease !important;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.7) !important;
        overflow-y: auto !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Toolbar expanded state (slides up from bottom) */
    .mobile-fullscreen-mode .strategy-map-tools.expanded,
    .mobile-fullscreen-mode .fullscreen-tools.expanded {
        transform: translateY(0) !important;
    }
    
    /* Drag handle for toolbar */
    .mobile-fullscreen-mode .strategy-map-tools::before,
    .mobile-fullscreen-mode .fullscreen-tools::before {
        content: "" !important;
        position: absolute !important;
        top: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 40px !important;
        height: 4px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border-radius: 2px !important;
        cursor: grab !important;
    }
    
    /* Tool groups vertical layout for mobile */
    .mobile-fullscreen-mode .tool-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
        background: rgba(15, 35, 55, 0.6) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(31, 75, 121, 0.5) !important;
    }
    
    /* Tool buttons for mobile */
    .mobile-fullscreen-mode .tool-btn,
    .mobile-fullscreen-mode .action-btn {
        width: 45px !important;
        height: 45px !important;
        font-size: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Color picker grid for mobile */
    .mobile-fullscreen-mode .color-picker {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
    }
    
    .mobile-fullscreen-mode .color-btn {
        width: 35px !important;
        height: 35px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    /* Width buttons for mobile */
    .mobile-fullscreen-mode .line-width {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    
    .mobile-fullscreen-mode .width-btn {
        width: 45px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Exit button for mobile */
    .mobile-fullscreen-mode .exit-fullscreen-btn {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(239, 68, 68, 0.9) !important;
        border: none !important;
        border-radius: 50% !important;
        color: white !important;
        font-size: 18px !important;
        z-index: 100001 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Hide desktop elements in mobile fullscreen */
    .mobile-fullscreen-mode .strategy-top-controls,
    .mobile-fullscreen-mode #fullscreen-active-users,
    .mobile-fullscreen-mode .top-bar,
    .mobile-fullscreen-mode .dashboard-header,
    .mobile-fullscreen-mode .strategy-controls,
    .mobile-fullscreen-mode .strategy-header,
    .mobile-fullscreen-mode .strategy-builder-page > .strategy-header,
    .mobile-fullscreen-mode .strategy-builder-page > .strategy-container > .strategy-controls,
    .mobile-fullscreen-mode .strategy-tools-container,
    .mobile-fullscreen-mode #active-users-panel,
    .mobile-fullscreen-mode .animated-bg {
        display: none !important;
    }
    
    /* Make containers fill screen in fullscreen */
    .mobile-fullscreen-mode .strategy-container,
    .mobile-fullscreen-mode .strategy-builder-page {
        background: #001833 !important;
        padding: 0 !important;
        margin: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
    }
    
    /* Ensure the map container fills screen and centers content */
    .mobile-fullscreen-mode #strategy-map-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #001833 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Strategy map area centers content */
    .mobile-fullscreen-mode .strategy-map-area {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    /* Fix inspiration modal positioning on mobile - MORE AGGRESSIVE */
    .inspiration-modal,
    .modal.inspiration-modal,
    .inspiration-modal-content {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 400px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        z-index: 10000 !important;
        margin: 0 !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    /* Override any state changes that cause shifting */
    .inspiration-modal.active,
    .inspiration-modal.selecting,
    .inspiration-modal:focus-within,
    .inspiration-modal-content.active,
    .inspiration-modal-content.selecting,
    .inspiration-modal-content:focus-within,
    .inspiration-item.selected ~ .inspiration-modal-content {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    /* Ensure modal content doesn't cause shifts */
    .inspiration-modal .modal-content,
    .inspiration-modal-content {
        position: fixed !important;
        transform: translate(-50%, -50%) !important;
        top: 50% !important;
        left: 50% !important;
    }
    
    /* Prevent any animation that might cause movement */
    @media (max-width: 767px) and (pointer: coarse) and (hover: none) {
        .inspiration-modal,
        .inspiration-modal-content {
            transition: none !important;
            animation: none !important;
        }
    }
    
    .panel-view {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .left-panel-view {
        background: rgba(10, 20, 40, 0.95);
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 110px) !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .right-panel-view {
        background: rgba(20, 30, 50, 0.95);
        bottom: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 110px) !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Navigation indicators */
    .nav-indicators {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        z-index: 100;
    }
    
    .nav-indicators .indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: background 0.3s;
    }
    
    .nav-indicators .indicator.active {
        background: var(--accent);
    }
    
    /* Reset panel widths inside container - FULL WIDTH */
    .panel-view .left-panel,
    .panel-view .right-panel,
    .panel-view #details-panel,
    .panel-view #commanders-details-panel,
    .panel-view #combined-details-panel {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 10px !important;
        display: block !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Center content in panels for mobile */
    .panel-view .left-panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .panel-view .right-panel,
    .panel-view #details-panel,
    .panel-view #commanders-details-panel,
    .panel-view #combined-details-panel {
        display: block !important;
        padding: 10px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: 100% !important;
        position: relative !important;
    }
    
    /* Center all direct children containers */
    .panel-view #details-panel > div,
    .panel-view #commanders-details-panel > div,
    .panel-view #combined-details-panel > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure details-content is properly contained */
    .panel-view .details-content {
        width: calc(100% - 10px) !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Center details columns without breaking layout */
    .panel-view .details-column {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Center all content in details panel */
    .panel-view #details-panel > *,
    .panel-view #details-panel .ship-header,
    .panel-view #details-panel .ship-info,
    .panel-view #details-panel .module-slots,
    .panel-view #details-panel .stats-container,
    .panel-view #details-panel .consumables-header,
    .panel-view #details-panel h2,
    .panel-view #details-panel h3,
    .panel-view #details-panel h4 {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    /* Force all section headers to center */
    .panel-view .details-section h2,
    .panel-view .details-section h3 {
        text-align: center !important;
        width: 100% !important;
        font-size: 0.95rem !important;
        margin: 8px 0 !important;
    }
    
    /* Ensure all sections fit */
    .panel-view .details-section {
        width: calc(100% - 10px) !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
        margin: 5px auto !important;
    }
    
    /* Center ship images */
    .panel-view #details-panel .ship-image,
    .panel-view #details-panel img {
        display: block !important;
        margin: 0 auto !important;
        max-width: 80% !important;
        height: auto !important;
    }
    
    /* Center module grid */
    .panel-view #details-panel .module-grid,
    .panel-view #details-panel .modules-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    /* Center stats */
    .panel-view #details-panel .stats-section,
    .panel-view #details-panel .ship-stats {
        width: 100% !important;
        text-align: left !important;
        padding: 0 10px !important;
    }
    
    /* Ensure consumables are centered */
    .panel-view #details-panel .consumables-section,
    .panel-view #details-panel .consumable-slots,
    .panel-view #details-panel #consumable-slots {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    /* Center everything in details content but don't break scrolling */
    .panel-view #details-panel .details-content {
        width: 100% !important;
    }
    
    /* Center everything in ships tab */
    .panel-view #details-panel {
        text-align: center !important;
    }
    
    /* Center and size ship header */
    .panel-view #details-panel .ship-header {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 5px !important;
    }
    
    .panel-view #details-panel .ship-header-left {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
    }
    
    .panel-view #details-panel .ship-name {
        font-size: 1.1rem !important;
        display: block !important;
    }
    
    .panel-view #details-panel .ship-label {
        font-size: 0.9rem !important;
        display: block !important;
    }
    
    /* Compact traits section */
    .panel-view #details-panel .traits-section {
        width: 95% !important;
        margin: 0 auto !important;
        padding: 5px !important;
    }
    
    .panel-view #details-panel .traits-list {
        list-style: none !important;
        padding: 0 5px !important;
        margin: 0 !important;
    }
    
    .panel-view #details-panel .traits-list li {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        margin: 3px 0 !important;
        padding: 3px !important;
    }
    
    /* Center modifications section */
    .panel-view #details-panel .modifications-section {
        width: 100% !important;
        text-align: center !important;
    }
    
    .panel-view #details-panel #ship-module-slots {
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    /* Center consumables section */  
    .panel-view #details-panel .consumables-section h2 {
        text-align: center !important;
        width: 100% !important;
    }
    
    .panel-view #details-panel #ship-consumable-slots {
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    /* HIDE OVERVIEW SECTION COMPLETELY ON MOBILE */
    .details-section:has(.info-table) {
        display: none !important;
    }
    
    /* TRANSFORM OVERVIEW TABLE TO LIST VIEW ON MOBILE */
    .panel-view #details-panel .info-table,
    #details-panel .info-table,
    .right-panel .info-table,
    .info-table {
        display: block !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 10px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* Transform tbody into list container */
    .panel-view #details-panel .info-table tbody,
    #details-panel .info-table tbody,
    .info-table tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        max-height: 120px !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Expanded state */
    .panel-view #details-panel .info-table.expanded tbody,
    #details-panel .info-table.expanded tbody,
    .info-table.expanded tbody {
        max-height: 2000px !important;
    }
    
    /* See More/Less button */
    .panel-view .info-table-expand,
    .info-table-expand {
        display: block !important;
        width: calc(100% - 20px) !important;
        text-align: center !important;
        padding: 8px !important;
        margin: 10px !important;
        background: transparent !important;
        border: none !important;
        border-top: 1px solid rgba(126, 200, 227, 0.3) !important;
        cursor: pointer !important;
        color: var(--accent-blue) !important;
        font-size: 0.85rem !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .info-table-expand:before {
        content: "See More" !important;
    }
    
    .info-table.expanded ~ .info-table-expand:before {
        content: "See Less" !important;
    }
    
    .info-table-expand i {
        margin-left: 5px !important;
        transition: transform 0.3s ease !important;
        font-size: 0.8rem !important;
    }
    
    .info-table.expanded ~ .info-table-expand i {
        transform: rotate(180deg) !important;
    }
    
    /* Each row becomes a list item */
    .panel-view #details-panel .info-table tr,
    #details-panel .info-table tr,
    .info-table tr {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 5px !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .info-table tr:last-child {
        border-bottom: none !important;
    }
    
    /* List view - Label on left */
    .panel-view #details-panel .info-table td:first-child,
    #details-panel .info-table td:first-child,
    .info-table td:first-child {
        display: block !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
        color: var(--accent-blue) !important;
        margin: 0 !important;
        padding: 0 5px 0 0 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-align: left !important;
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }
    
    /* List view - Value on right */
    .panel-view #details-panel .info-table td:last-child,
    #details-panel .info-table td:last-child,
    .info-table td:last-child {
        display: block !important;
        font-size: 0.75rem !important;
        color: var(--text-primary) !important;
        margin: 0 !important;
        padding: 0 0 0 5px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-align: right !important;
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }
    
    /* Ensure overview section container doesn't overflow - AGGRESSIVE FIX */
    .panel-view #details-panel .details-section:has(.info-table),
    #details-panel .details-section,
    .details-section {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* Force the right panel to contain all content */
    .panel-view .right-panel-view {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    #details-panel {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Specific fix for overview section */
    #details-panel .details-section h3,
    #details-panel .details-section h2 {
        font-size: 0.9rem !important;
        margin: 10px 5px !important;
        padding: 0 !important;
    }
    
    /* Force all content in details panel to respect boundaries */
    #details-panel *,
    .right-panel *,
    .panel-view * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
    
    /* Remove horizontal scrolling completely */
    #details-panel,
    .right-panel,
    .panel-view,
    .panel-view .right-panel-view {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    /* Center statistics */
    .panel-view #details-panel .combined-stats-category h4 {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Stats rows - keep readable but centered container */
    .panel-view #details-panel .stat-row,
    .panel-view .stat-row {
        display: flex !important;
        justify-content: space-between !important;
        width: 95% !important;
        margin: 2px auto !important;
        padding: 2px 5px !important;
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }
    
    .panel-view .stat-name {
        flex: 1 !important;
        text-align: left !important;
        font-size: 0.7rem !important;
        word-break: break-word !important;
    }
    
    .panel-view .stat-value {
        flex: 0 0 auto !important;
        text-align: right !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        margin-left: 5px !important;
    }
    
    /* Compact stats categories */
    .panel-view .combined-stats-category {
        margin: 10px 0 !important;
        padding: 5px !important;
        width: 100% !important;
    }
    
    .panel-view .combined-stats-category h4 {
        font-size: 0.85rem !important;
        margin: 5px 0 !important;
        text-align: center !important;
        padding: 5px !important;
        background: rgba(96, 165, 250, 0.1) !important;
        border-radius: 5px !important;
    }
    
    /* Center ship/commander grids */
    .panel-view .ship-grid,
    .panel-view .commander-grid,
    .panel-view .nation-grid,
    .panel-view .filter-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Size individual cards to fit viewport */
    .panel-view .ship-card,
    .panel-view .commander-card,
    .panel-view .nation-card,
    .panel-view .filter-card {
        width: 100% !important;
        max-width: 120px !important;
        height: auto !important;
        margin: 0 auto !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        padding: 5px !important;
    }
    
    /* Scale images to fit */
    .panel-view .ship-card img,
    .panel-view .commander-card img,
    .panel-view .nation-card img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* Adjust text elements for mobile */
    .panel-view h1 {
        font-size: 1.2rem !important;
        margin: 5px 0 !important;
    }
    
    .panel-view h2 {
        font-size: 1rem !important;
        margin: 5px 0 !important;
    }
    
    .panel-view h3, .panel-view h4 {
        font-size: 0.9rem !important;
        margin: 5px 0 !important;
    }
    
    .panel-view p,
    .panel-view label {
        font-size: 0.8rem !important;
    }
    
    /* Make form elements fit */
    .panel-view input,
    .panel-view select,
    .panel-view button {
        max-width: 100% !important;
        font-size: 0.8rem !important;
    }
    
    /* Compact details sections */
    .panel-view .details-section {
        margin: 5px 0 !important;
        padding: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .panel-view .details-section h2 {
        font-size: 1rem !important;
        margin: 5px 0 !important;
        text-align: center !important;
    }
    
    .panel-view .details-column {
        width: 100% !important;
        padding: 0 !important;
    }
    
    
    /* Fix module slots */
    .panel-view #combined-consumable-slots,
    .panel-view #combined-module-slots,
    .panel-view #ship-module-slots,
    .panel-view #ship-consumable-slots {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;  /* Max 4 per row */
        gap: 5px !important;
        width: calc(100% - 10px) !important;
        padding: 0 !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* If more than 4 items, they wrap to next row - INCLUDING MODULE SLOTS */
    .panel-view #combined-consumable-slots:has(.modal-module-wrapper:nth-child(5)),
    .panel-view #ship-consumable-slots:has(.modal-module-wrapper:nth-child(5)),
    .panel-view #combined-module-slots:has(.modal-module-wrapper:nth-child(5)),
    .panel-view #ship-module-slots:has(.modal-module-wrapper:nth-child(5)) {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
        max-width: 100% !important;
    }
    
    /* Make slots smaller when there are many - ALL TYPES */
    .panel-view #combined-consumable-slots:has(.modal-module-wrapper:nth-child(5)) .combined-module-slot,
    .panel-view #ship-consumable-slots:has(.modal-module-wrapper:nth-child(5)) .combined-module-slot,
    .panel-view #combined-module-slots:has(.modal-module-wrapper:nth-child(5)) .combined-module-slot,
    .panel-view #ship-module-slots:has(.modal-module-wrapper:nth-child(5)) .combined-module-slot {
        padding: 0.5rem !important;
        min-height: 70px !important;
    }
    
    .panel-view #combined-consumable-slots:has(.modal-module-wrapper:nth-child(5)) .modal-slot-icon,
    .panel-view #ship-consumable-slots:has(.modal-module-wrapper:nth-child(5)) .modal-slot-icon,
    .panel-view #combined-module-slots:has(.modal-module-wrapper:nth-child(5)) .modal-slot-icon,
    .panel-view #ship-module-slots:has(.modal-module-wrapper:nth-child(5)) .modal-slot-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .panel-view #combined-consumable-slots:has(.modal-module-wrapper:nth-child(5)) .modal-slot-label,
    .panel-view #ship-consumable-slots:has(.modal-module-wrapper:nth-child(5)) .modal-slot-label,
    .panel-view #combined-module-slots:has(.modal-module-wrapper:nth-child(5)) .modal-slot-label,
    .panel-view #ship-module-slots:has(.modal-module-wrapper:nth-child(5)) .modal-slot-label {
        font-size: 0.7rem !important;
    }
    
    .panel-view .modal-module-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .panel-view .combined-module-slot {
        width: 100% !important;
        font-size: 0.6rem !important;
        cursor: pointer !important;
        position: relative !important;
        padding: 5px !important;
        min-height: 70px !important;
    }
    
    .panel-view .modal-slot-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 1rem !important;
        margin: 0 auto !important;
    }
    
    .panel-view .modal-slot-icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    
    .panel-view .modal-slot-label {
        font-size: 0.6rem !important;
        margin-top: 2px !important;
        line-height: 1 !important;
    }
    
    /* Add tap indicator for mobile */
    .panel-view .combined-module-slot::after {
        content: "TAP" !important;
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        font-size: 0.4rem !important;
        color: var(--accent) !important;
        opacity: 0.5 !important;
        line-height: 1 !important;
    }
    
    
    
    /* Arrow navigation buttons - MORE VISIBLE AND REPOSITIONED */
    .nav-arrow {
        position: fixed;
        background: rgba(126, 200, 227, 0.95) !important;
        border: 2px solid #ffffff !important;
        color: white;
        width: 55px !important;
        height: 55px !important;
        border-radius: 50%;
        font-size: 24px !important;
        cursor: pointer;
        z-index: 1001 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        transition: all 0.3s;
        box-shadow: 0 4px 20px rgba(126, 200, 227, 0.6) !important;
        font-weight: bold !important;
    }
    
    .nav-arrow:hover {
        opacity: 1;
        background: var(--accent-blue) !important;
        transform: scale(1.15) !important;
        box-shadow: 0 6px 25px rgba(126, 200, 227, 0.8) !important;
    }
    
    /* Left arrow - at bottom left */
    .nav-arrow-left {
        left: 20px;
        bottom: 30px !important;
        top: auto !important;
    }
    
    /* Right arrow - BOTTOM RIGHT when on left panel, CENTERED when on right panel */
    .nav-arrow-right {
        right: 15px;
        bottom: 30px !important;
        top: auto !important;
        transform: none !important;
    }
    
    /* When viewing right panel, center the right arrow vertically */
    .right-panel-view ~ .nav-arrow-right {
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
    }
    
    .nav-arrow-right:hover {
        transform: scale(1.15) !important;
    }
    
    .right-panel-view ~ .nav-arrow-right:hover {
        transform: translateY(-50%) scale(1.15) !important;
    }
    
    /* Add "Continue" label to right arrow when on left panel */
    .left-panel-view:has(~ .nav-arrow-right) ~ .nav-arrow-right::before,
    .panel-view.left-panel-view ~ .nav-arrow-right::before {
        content: "Continue →" !important;
        position: absolute !important;
        left: -80px !important;
        white-space: nowrap !important;
        font-size: 0.85rem !important;
        color: var(--accent-blue) !important;
        font-weight: 600 !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }
    
}