/* ═══════════════════════════════════════════════════════════════
   MARINE CITIZEN — RESPONSIVE LAYOUT SYSTEM
   Three-tier responsive design: Phone / Tablet / Desktop
   
   Breakpoints:
     Phone:   max-width: 480px
     Tablet:  481px – 1024px
     Desktop: ≥ 1025px (base styles, no media query needed)
   ═══════════════════════════════════════════════════════════════ */

/* ── Base: touch-friendly defaults for all sizes ── */
*, *::before, *::after {
    box-sizing: border-box;
}

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

/* Safe area support for notched devices */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Touch interaction improvement */
a, button, input, select, textarea, [role="button"] {
    touch-action: manipulation;
}

/* Prevent text selection on interactive elements during touch */
button, [role="button"] {
    -webkit-user-select: none;
    user-select: none;
}


/* ═══════════════════════════════════════════════════════════════
   TABLET BREAKPOINT (481px – 1024px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* ── 2. Header Component ── */
    .header-container {
        padding: 4px 8px;
    }

    .user-info {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .user-info::-webkit-scrollbar {
        display: none;
    }

    .user-section {
        min-width: auto;
        flex-shrink: 0;
    }

    .user-section .label {
        font-size: 0.58rem;
    }

    .user-section .value {
        font-size: 0.78rem;
    }

    .header-buy-btn {
        padding: 5px 12px !important;
        font-size: 0.75rem !important;
    }

    .mining-status {
        padding-left: 6px;
        margin-left: 6px;
    }

    /* ── 4. Index.html Central Control Panel ── */
    #central-control-panel {
        width: min(680px, 90vw);
    }

    #central-control-panel h2::before {
        width: 80px;
        height: 80px;
    }

    .button-grid {
        gap: 8px;
    }

    .control-panel-button {
        min-height: 48px;
        font-size: 0.82rem;
        padding: 12px 14px;
    }

    /* ── 4.2 Info Panel ── */
    #info-panel {
        width: 220px;
    }

    /* ── 9. Wallet ── */
    .wallet-container {
        max-width: 480px;
    }

    .wallet-actions {
        grid-template-columns: 1fr 1fr;
    }

    .wallet-actions button {
        flex: none;
        min-width: 0;
    }

    /* ── 10. User Preferences ── */
    .preferences-panel {
        width: 90vw !important;
        max-width: 600px !important;
        max-height: 85vh !important;
    }

    .preferences-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }

    .preferences-tabs .tab-btn {
        min-width: 72px;
        height: 40px;
        font-size: 0.72rem;
        padding: 6px 10px;
    }

    .setting-group select,
    .setting-group input[type="number"] {
        height: 44px;
        font-size: 14px;
    }

    .setting-group input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    /* ── 11. Blob Controls - Tablet Optimized ── */
    #blob-controls-sidebar,
    #unified-blob-ui {
        max-height: 60vh;
        width: 280px;
    }

    #blob-controls-sidebar .toggle-btn {
        min-height: 40px;
        padding: 8px 14px;
    }

    #blob-controls-sidebar .blob-content {
        padding: 55px 12px 16px 12px;
    }

    #blob-controls-sidebar .blob-header h3 {
        font-size: 15px;
    }

    #blob-controls-sidebar .blob-stats-bar {
        gap: 6px;
    }

    #blob-controls-sidebar .stat-item {
        font-size: 11px;
        padding: 3px 6px;
    }

    #blob-controls-sidebar .blob-action-btn {
        padding: 10px 12px;
        font-size: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TABLET — WORLD MAP PAGE (inline styles override)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Top Header Bar — keep single row but compact */
    .top-header {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .top-header .stats {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .top-header .stat .value {
        font-size: 1rem;
    }

    .top-header .stat .label {
        font-size: 0.55rem;
    }

    .top-header .logo h1 {
        font-size: 1.1rem;
    }

    /* View Switcher — compact */
    .view-switcher {
        order: 3;
    }

    .view-btn {
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    /* Vote badge */
    .vote-badge {
        order: 4;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TABLET — LAND PROPERTY VIEW
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 701px) {
    .lp-sidebar {
        width: 220px;
    }

    .lp-mission-panel {
        width: 240px;
    }

    .lp-header .nav-btn {
        padding: 4px 8px;
        font-size: 0.65rem;
    }

    .lp-sel-bar {
        flex-wrap: wrap;
        max-width: 90vw;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TABLET — MISSIONS PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 481px) {
    .mission-page {
        max-width: 100%;
        padding: 16px 16px 120px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PHONE BREAKPOINT (≤ 480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── 2. Header Component — compact single row ── */
    .header-container {
        padding: 2px 4px;
    }

    .user-info {
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        padding: 2px 0;
    }

    .user-info::-webkit-scrollbar {
        display: none;
    }

    .user-section {
        min-width: auto;
        flex-shrink: 0;
    }

    .user-section .label {
        font-size: 0.5rem;
    }

    .user-section .value {
        font-size: 0.72rem;
    }

    /* Hide secondary info on phone */
    .mining-status {
        display: none !important;
    }

    .header-buy-btn {
        padding: 4px 10px !important;
        font-size: 0.7rem !important;
        gap: 4px !important;
    }

    /* ── 3. Footer ── */
    footer, .footer {
        height: 32px;
        font-size: 10px;
        padding: 4px 8px;
    }

    /* ── 4. Index.html — Central Control Panel → Bottom Sheet ── */
    #central-control-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 70vh;
        transform: none !important;
        border-radius: 16px 16px 0 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 2000;
        padding-top: 12px;
    }

    /* Drag handle visual cue for bottom sheet */
    #central-control-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        margin: 0 auto 12px;
        flex-shrink: 0;
    }

    #central-control-panel h2 {
        min-height: 80px !important;
        padding: 8px 0 8px 0 !important;
    }

    /* Logo smaller on phone */
    #central-control-panel h2::before {
        width: 64px !important;
        height: 64px !important;
    }

    /* User status panel — compact */
    #user-status-panel {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    .control-section {
        padding: 10px 12px;
    }

    .control-panel-button {
        min-height: 48px;
        font-size: 0.82rem;
    }

    .button-grid {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    /* ── 4.2 Info Panel — hide by default on phone ── */
    #info-panel {
        display: none;
    }

    /* ── 4.3 Loading Spinner ── */
    #loading-spinner {
        font-size: 14px;
    }

    /* ── 9. Wallet — full screen overlay ── */
    .wallet-container {
        max-width: 100% !important;
    }

    #wallet-expanded {
        max-height: 60vh;
        overflow-y: auto;
    }

    .wallet-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .wallet-actions button {
        font-size: 0.72rem;
        padding: 10px 8px;
        min-height: 44px;
    }

    .balance-details {
        flex-direction: column;
    }

    .withdrawal-options {
        justify-content: center;
    }

    .crypto-image {
        width: 36px !important;
        height: 36px !important;
    }

    #transactions-list {
        max-height: 150px;
        overflow-y: auto;
    }

    /* ── 10. User Preferences — full screen on phone ── */
    .preferences-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        z-index: 3000;
    }

    .preferences-header .close-btn {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }

    .preferences-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
        padding-bottom: 4px;
    }

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

    .preferences-tabs .tab-btn {
        min-width: 64px;
        height: 38px;
        font-size: 0.65rem;
        padding: 6px 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .setting-group select,
    .setting-group input[type="number"],
    .setting-group input[type="text"] {
        height: 48px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    .setting-group label {
        font-size: 0.8rem;
        margin-bottom: 6px;
    }

    .setting-group input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    /* ── 11. Plot Status — bottom sheet on phone ── */
    #plot-status {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 70vh !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 1800;
    }

    #plot-status.left {
        left: 0 !important;
        right: 0 !important;
    }

    #plot-status.minimized {
        max-height: none !important;
        width: auto !important;
        bottom: 16px !important;
        right: 16px !important;
        left: auto !important;
        border-radius: 12px !important;
    }

    /* Side switch hidden on phone — not applicable */
    #plot-status .side-switch-btn,
    .side-switch-btn {
        display: none !important;
    }

    /* Properties table horizontal scroll */
    #plot-status table,
    .properties-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Navigation inputs */
    #plot-status input[type="text"],
    #plot-status input[type="number"] {
        height: 44px;
        font-size: 16px;
    }

    #plot-status button {
        min-height: 44px;
    }

    /* Nearby list compact */
    .nearby-list,
    #nearby-list {
        max-height: 150px;
    }

    /* ── 11b. Blob Controls — Enhanced Mobile Bottom Sheet ── */
    #blob-controls-sidebar,
    #unified-blob-ui {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 65vh !important;
        border-radius: 20px 20px 0 0 !important;
        z-index: 1700;
        background: rgba(26, 32, 44, 0.98) !important;
        backdrop-filter: blur(12px);
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4) !important;
    }

    #blob-controls-sidebar.minimized,
    #unified-blob-ui.minimized {
        max-height: none !important;
        width: 60px !important;
        height: 60px !important;
        bottom: 80px !important;
        left: 12px !important;
        right: auto !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #38b2ac, #2c7a7b) !important;
        box-shadow: 0 4px 20px rgba(56, 178, 172, 0.4) !important;
        overflow: hidden !important;
    }

    #blob-controls-sidebar.minimized .toggle-btn {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        background: transparent !important;
        font-size: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #blob-controls-sidebar .toggle-btn {
        position: absolute !important;
        top: 8px !important;
        right: 12px !important;
        left: auto !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        font-size: 20px !important;
        background: rgba(74, 85, 104, 0.6) !important;
        border-radius: 50% !important;
        border: none !important;
    }

    /* Mobile Blob Content */
    #blob-controls-sidebar .blob-content {
        padding: 50px 16px 24px 16px !important;
        overflow-y: auto;
        max-height: calc(65vh - 20px);
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile Header */
    #blob-controls-sidebar .blob-header h3 {
        font-size: 15px !important;
    }

    #blob-controls-sidebar .blob-stats-bar {
        gap: 6px;
    }

    #blob-controls-sidebar .stat-item {
        font-size: 11px;
        padding: 3px 6px;
    }

    /* Mobile Quick Actions */
    #blob-controls-sidebar .blob-quick-actions {
        gap: 6px;
    }

    #blob-controls-sidebar .blob-action-btn {
        padding: 12px 14px;
        font-size: 12px;
        min-height: 44px;
    }

    #blob-controls-sidebar .blob-action-btn.refresh {
        width: 48px;
        min-width: 48px;
    }

    /* Mobile Section Headers */
    #blob-controls-sidebar .blob-section-header {
        padding: 12px;
        font-size: 12px;
    }

    #blob-controls-sidebar .blob-fleet-badge {
        font-size: 9px;
        padding: 2px 6px;
    }

    /* Mobile Shop */
    #blob-controls-sidebar .blob-shop-info {
        flex-direction: row;
        font-size: 11px;
        padding: 6px 8px;
    }

    #blob-controls-sidebar .shop-hint {
        font-size: 10px;
        padding: 5px;
    }

    /* Drag handle for bottom sheet */
    #blob-controls-sidebar::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        margin: 8px auto 0;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    #blob-controls-sidebar.minimized::before {
        display: none;
    }

    /* ── 12. User Guide — full width ── */
    .guide-container {
        max-width: 100% !important;
        padding: 8px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .guide-container h1,
    .guide-header h1 {
        font-size: 18px !important;
    }

    .guide-container h2 {
        font-size: 16px !important;
    }

    .guide-container .nav-bar,
    .guide-nav {
        flex-direction: column;
        gap: 6px;
    }

    .guide-container .nav-bar a,
    .guide-nav a {
        display: block;
        text-align: center;
        padding: 10px;
        min-height: 44px;
    }

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


/* ═══════════════════════════════════════════════════════════════
   PHONE — WORLD MAP PAGE
   Overrides for the inline <style> in world-map.html
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Top Header → stacked layout */
    .top-header {
        flex-direction: column !important;
        padding: 8px !important;
        gap: 6px;
        align-items: stretch !important;
    }

    .top-header .logo h1 {
        font-size: 1rem !important;
        text-align: center;
    }

    /* Nav buttons — horizontal scroll */
    .top-header > div:first-child {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .top-header > div:first-child > div {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        width: 100%;
        justify-content: center;
        scrollbar-width: none;
    }

    .top-header > div:first-child > div::-webkit-scrollbar {
        display: none;
    }

    /* Stats row — horizontal scroll */
    .top-header .stats {
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .top-header .stats::-webkit-scrollbar {
        display: none;
    }

    .top-header .stat {
        flex-shrink: 0;
        min-width: 60px;
    }

    .top-header .stat .value {
        font-size: 0.9rem;
    }

    .top-header .stat .label {
        font-size: 0.5rem;
    }

    /* View Switcher — compact */
    .view-switcher,
    #view-switcher-map {
        justify-content: center;
    }

    .view-btn {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
    }

    /* Buy button */
    .header-buy-btn,
    #header-purchase-btn {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        align-self: center;
    }

    /* Vote badge compact */
    .vote-badge {
        padding: 4px 8px;
    }

    .vote-badge .vote-title {
        font-size: 0.6rem;
    }

    .vote-badge .vote-countdown {
        font-size: 0.7rem;
    }

    /* Left sidebar — full screen overlay (already display:none at 900px) */
    .control-panel {
        display: none !important;
    }

    /* When opened via JS toggle, make it full screen overlay */
    .control-panel.mobile-open {
        display: block !important;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh;
        z-index: 2000;
        padding: 16px;
        overflow-y: auto;
    }

    .control-panel.mobile-open .panel-toggle {
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 2001;
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    /* Main layout → single column */
    .main-layout {
        flex-direction: column !important;
        height: auto !important;
    }

    /* Map canvas → full width square */
    .map-container {
        width: 100vw;
        height: 100vw; /* Square */
        max-height: 100vh;
        flex: none;
    }

    /* Selection info overlay — bottom positioned */
    .selection-info {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 2500;
        transform: none !important;
        max-height: 65vh;
        overflow-y: auto;
    }

    /* Claim button full width */
    .claim-parcel-btn {
        padding: 14px !important;
        font-size: 1rem !important;
        min-height: 48px;
    }

    /* Zone buttons grid */
    .zone-btn {
        padding: 10px;
        min-height: 48px;
    }

    .zone-btn .zone-name {
        font-size: 0.78rem;
    }

    .zone-btn .zone-stats {
        font-size: 0.6rem;
    }

    /* Map controls */
    .map-ctrl-btn {
        min-width: 40px;
        min-height: 44px;
        padding: 8px;
    }

    /* Right sidebar content → below map */
    .right-sidebar,
    .sidebar-right {
        width: 100% !important;
        max-height: 40vh;
        overflow-y: auto;
    }

    /* Zoom buttons — floating cluster */
    .zoom-buttons,
    .lp-zoom-controls {
        position: fixed !important;
        bottom: 80px;
        right: 12px;
        z-index: 100;
    }

    /* Community marker popups */
    .community-marker-popup {
        max-width: calc(100vw - 32px) !important;
        width: calc(100vw - 32px) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PHONE — MISSIONS PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .mission-page {
        padding: 12px 8px 120px !important;
        max-width: 100% !important;
    }

    .page-header {
        padding: 16px 0 12px !important;
    }

    .page-header h1 {
        font-size: 20px !important;
    }

    .page-header .subtitle {
        font-size: 11px !important;
    }

    /* Zone banner */
    .zone-banner {
        font-size: 11px;
        padding: 8px 10px;
    }

    /* Balance bar */
    .balance-bar {
        gap: 8px;
        flex-wrap: wrap;
        font-size: 13px;
    }

    /* Properties navigation — horizontal scroll */
    .properties-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 6px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

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

    .properties-nav a,
    .properties-nav button {
        flex-shrink: 0;
        min-height: 44px;
    }

    /* Tab bar */
    .tab-bar .tab-btn,
    .mission-tabs .tab {
        font-size: 12px;
        min-height: 44px;
    }

    /* Create mission form */
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS auto-zoom */
    }

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

    .primary-btn,
    .submit-btn,
    .btn-create {
        min-height: 52px;
        font-size: 1rem;
    }

    /* Back button — larger touch target */
    .back-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 14px !important;
    }

    /* Filter select */
    #filter-category {
        min-height: 44px;
        font-size: 14px;
    }

    /* Mission cards — larger touch targets */
    .mission-card {
        min-height: 60px;
        padding: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PHONE — LAND PROPERTY VIEW
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    /* Already handled by inline: flex-direction: column */

    .lp-header {
        height: auto;
        min-height: 44px;
        padding: 8px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .lp-header .logo h1 {
        font-size: 0.85rem;
    }

    .lp-header .nav-btns {
        flex-wrap: wrap;
        gap: 4px;
    }

    .lp-header .nav-btn {
        padding: 6px 10px;
        font-size: 0.65rem;
        min-height: 36px;
    }

    /* Sidebar — horizontal strip at top */
    .lp-sidebar {
        max-height: 160px !important;
        overflow-y: auto;
    }

    .lp-info-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }

    /* Canvas area */
    .lp-canvas-container {
        min-height: 50vh;
    }

    /* HUD elements — compact */
    .lp-coords-hud {
        bottom: 8px;
        left: 8px;
        padding: 4px 8px;
        gap: 8px;
    }

    .lp-coords-hud .coord-val {
        font-size: 0.6rem;
    }

    .lp-compass {
        top: 8px;
        right: 8px;
        font-size: 1.2rem;
    }

    .lp-zoom-controls {
        bottom: 8px;
        right: 8px;
    }

    .lp-zoom-btn {
        width: 40px;
        height: 40px;
    }

    .lp-view-indicator {
        top: 8px;
        left: 8px;
        font-size: 0.6rem;
        padding: 4px 8px;
    }

    /* Mission panel — below canvas */
    .lp-mission-panel {
        max-height: 200px !important;
        overflow-y: auto;
    }

    .lp-mission-tab {
        min-height: 40px;
        font-size: 0.65rem;
    }

    .lp-mission-card {
        min-height: 48px;
        padding: 10px;
    }

    /* Selection bar — bottom */
    .lp-sel-bar {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        top: auto !important;
        transform: none !important;
        max-width: none !important;
        border-radius: 10px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .lp-sel-bar .sb-btn {
        min-height: 40px;
        padding: 8px 14px;
    }

    /* Form inputs */
    .lp-form-group input,
    .lp-form-group textarea,
    .lp-form-group select {
        min-height: 44px;
        font-size: 16px;
    }

    .lp-btn-create {
        min-height: 48px;
    }

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


/* ═══════════════════════════════════════════════════════════════
   PHONE — ALLOCATION VISUAL
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Time-of-Day HUD — compact */
    .time-hud,
    #time-of-day-hud {
        font-size: 10px;
        padding: 4px 8px;
    }

    /* Collapsible sections — all closed by default */
    .collapsible-content {
        /* JS should manage this, but ensure scrollability */
        max-height: 200px;
        overflow-y: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════
   COMMON: MODAL / OVERLAY RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .modal-content,
    .modal .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        border-radius: 12px !important;
        padding: 16px !important;
        overflow-y: auto;
    }

    /* KYC Passport modal */
    .modal.kyc-enhanced .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh;
        border-radius: 0 !important;
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    .modal-content,
    .modal .modal-content {
        max-width: 560px !important;
        max-height: 80vh !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   COMMON: TOAST NOTIFICATIONS RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .toast,
    .toast-notification {
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   COMMON: FORM INPUT RESPONSIVE
   Prevents iOS auto-zoom on input focus (requires 16px minimum)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   COMMON: BUTTON TOUCH TARGETS
   Ensure minimum 44×44px for all interactive elements
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    button,
    [role="button"],
    a.btn,
    .btn {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    button,
    [role="button"],
    a.btn,
    .btn {
        min-height: 48px;
    }

    /* Replace hover effects with active states on touch */
    .btn:hover,
    button:hover {
        transform: none;
        filter: none;
    }

    .btn:active,
    button:active {
        transform: scale(0.97);
        filter: brightness(0.9);
    }
}


/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE: REDUCE ANIMATIONS ON MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Reduce backdrop blur for performance */
    [style*="backdrop-filter"],
    .wallet-container,
    .preferences-panel,
    #central-control-panel {
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    /* Disable non-essential animations */
    .progress-fill::after {
        animation: none !important;
    }

    /* Reduce transition durations */
    * {
        transition-duration: 0.15s !important;
    }

    /* Exception: keep essential animations */
    .ripple,
    #loading-spinner,
    .spinner,
    [class*="pulse"] {
        transition-duration: unset !important;
    }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ripple {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE PHONE (short + wide)
   ═══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    /* Central panel — side panel instead of bottom sheet */
    #central-control-panel {
        bottom: auto !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 280px !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    /* World map — use full height */
    .map-container {
        height: 100vh !important;
    }

    /* Reduce header height in landscape */
    .top-header {
        padding: 4px 8px !important;
    }

    .top-header .stat .value {
        font-size: 0.8rem;
    }

    /* Land property — horizontal layout even on small screens */
    .lp-main {
        flex-direction: row !important;
    }

    .lp-sidebar {
        width: 180px !important;
        max-height: none !important;
        height: calc(100vh - 44px) !important;
    }

    .lp-mission-panel {
        width: 200px !important;
        max-height: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR STYLING (tablet + phone)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Thin scrollbars for sidebars and panels */
    .control-panel::-webkit-scrollbar,
    .lp-sidebar::-webkit-scrollbar,
    .lp-mission-panel::-webkit-scrollbar,
    #plot-status::-webkit-scrollbar,
    #blob-controls-sidebar::-webkit-scrollbar,
    #wallet-expanded::-webkit-scrollbar,
    .preferences-content::-webkit-scrollbar {
        width: 4px;
    }

    .control-panel::-webkit-scrollbar-thumb,
    .lp-sidebar::-webkit-scrollbar-thumb,
    .lp-mission-panel::-webkit-scrollbar-thumb,
    #plot-status::-webkit-scrollbar-thumb,
    #blob-controls-sidebar::-webkit-scrollbar-thumb,
    #wallet-expanded::-webkit-scrollbar-thumb,
    .preferences-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 2px;
    }

    .control-panel::-webkit-scrollbar-track,
    .lp-sidebar::-webkit-scrollbar-track,
    .lp-mission-panel::-webkit-scrollbar-track,
    #plot-status::-webkit-scrollbar-track,
    #blob-controls-sidebar::-webkit-scrollbar-track,
    #wallet-expanded::-webkit-scrollbar-track,
    .preferences-content::-webkit-scrollbar-track {
        background: transparent;
    }
}