/* ============================================
   WRLDS Mobile Stylesheet
   Breakpoint: 768px (tablet/mobile)
   Goal: Match desktop XP look as closely as possible
   ============================================ */

@media (max-width: 768px) {

    /* ==========================================
       GLOBAL: Container & Grid
       ========================================== */
    .xp-container {
        padding: 8px;
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
        height: auto;
        min-height: calc(var(--vh, 1vh) * 100);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .xp-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    /* ==========================================
       GLOBAL: Windows - Keep desktop XP styling
       ========================================== */
    .xp-window {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        margin-bottom: 10px;
        /* Keep borders, radius, shadow from desktop */
    }

    .xp-window-content {
        padding: 12px;
        box-sizing: border-box;
    }

    /* Disable window dragging visual cue on mobile */
    body.is-mobile .xp-window-title {
        cursor: default;
    }

    /* ==========================================
       GLOBAL: Forms
       ========================================== */
    .xp-input, .xp-form-group, form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Prevent iOS zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ==========================================
       GLOBAL: Touch-action (prevent double-tap zoom)
       ========================================== */
    .xp-btn,
    .xp-control-btn,
    .xp-task-item,
    .asset-item,
    .editor-section-header,
    .shop-tab,
    .tab-btn,
    .pricing-card,
    .pricing-card-inline {
        touch-action: manipulation;
    }

    /* ==========================================
       TASKBAR: Match desktop look
       ========================================== */
    .xp-taskbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(44px + env(safe-area-inset-bottom, 0px));
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 1000;
    }

    .xp-taskbar-start {
        margin-right: 8px;
        flex-shrink: 0;
    }

    /* Start button: match desktop styling */
    .xp-btn-start {
        font-size: 14px;
        padding: 6px 18px 6px 10px;
        border-radius: 0 16px 16px 0;
    }

    .xp-btn-start img {
        height: 20px !important;
    }

    .xp-taskbar-items {
        display: flex;
        flex: 1;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-left: 6px;
        gap: 6px;
        scrollbar-width: none;
    }

    .xp-taskbar-items::-webkit-scrollbar {
        display: none;
    }

    /* Task items: show text names on mobile (not emojis) */
    .xp-task-item {
        min-width: auto;
        max-width: 180px;
        padding: 4px 10px;
        font-size: 11px !important;
        white-space: nowrap;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Remove any emoji pseudo-elements */
    .xp-task-item::before {
        content: none !important;
    }

    .xp-task-item img {
        display: none;
    }

    .xp-tray {
        padding: 0 10px;
        min-width: auto;
        flex-shrink: 0;
    }

    #clock {
        font-size: 12px;
        white-space: nowrap;
    }

    /* ==========================================
       GLOBAL: Force-hide modal overlays on mobile
       JS uses style.setProperty('display','flex','important') to show
       ========================================== */
    #coins-modal, #missions-modal, #upgrade-modal, #unlock-choice-modal,
    #spin-wheel-modal, #stats-modal, #system-modal, #share-modal,
    #promo-modal, #delete-modal, #bid-modal, #minigame-modal, #character-modal,
    #admin-showcase-modal {
        display: none !important;
    }
    #coins-modal[style*="display: flex"],
    #missions-modal[style*="display: flex"],
    #upgrade-modal[style*="display: flex"],
    #unlock-choice-modal[style*="display: flex"],
    #spin-wheel-modal[style*="display: flex"],
    #stats-modal[style*="display: flex"],
    #system-modal[style*="display: flex"],
    #share-modal[style*="display: flex"],
    #promo-modal[style*="display: flex"],
    #delete-modal[style*="display: flex"],
    #bid-modal[style*="display: flex"],
    #minigame-modal[style*="display: flex"],
    #character-modal[style*="display: flex"] {
        display: flex !important;
    }

    /* ==========================================
       GLOBAL: Modals - Desktop-like popup windows
       ========================================== */
    div[style*="position: fixed"][style*="z-index: 9999"] .xp-window,
    .modal .xp-window,
    #privacy-window,
    #terms-window,
    #upgrade-modal .xp-window,
    #character-modal .xp-window,
    #coins-modal .xp-window,
    #missions-modal .xp-window,
    #stats-modal .xp-window,
    #system-modal .xp-window,
    #bid-modal .xp-window,
    #delete-modal .xp-window,
    #promo-modal .xp-window,
    #minigame-modal .xp-window {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: calc(var(--vh, 1vh) * 85) !important;
        /* Keep XP window borders and radius */
    }

    div[style*="position: fixed"][style*="z-index: 9999"] .xp-window-content,
    .modal .xp-window-content,
    #upgrade-modal .xp-window-content,
    #character-modal .xp-window-content,
    #coins-modal .xp-window-content,
    #missions-modal .xp-window-content,
    #stats-modal .xp-window-content,
    #system-modal .xp-window-content,
    #bid-modal .xp-window-content,
    #minigame-modal .xp-window-content {
        max-height: calc(var(--vh, 1vh) * 70) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Share modal: bottom sheet so globe is visible and rotatable above */
    #share-modal {
        align-items: flex-end !important;
        justify-content: flex-end !important;
        pointer-events: none !important;
    }
    #share-modal .xp-window {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 50vh !important;
        border-radius: 12px 12px 0 0 !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }
    #share-modal .xp-window-content {
        max-height: 40vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Hide preview canvas on mobile - user sees actual globe above bottom sheet */
    #share-modal #share-preview-canvas,
    #share-modal div[style*="background: #000"][style*="border: 2px inset"] {
        display: none !important;
    }

    /* Window title bar: ensure text doesn't get pushed out by buttons */
    .xp-window-title {
        min-height: 28px;
        overflow: hidden;
    }

    .xp-window-title > span,
    .xp-window-title > div:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .xp-window-controls {
        flex-shrink: 0;
    }

    /* Window control buttons: larger touch targets on mobile */
    .xp-control-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 16px !important;
        padding: 0 !important;
    }

    /* ==========================================
       EDITOR: Sidebar sections collapse by default
       ========================================== */
    .editor-section-content {
        display: none !important;
    }

    .editor-section-content.mobile-expanded {
        display: block !important;
    }

    /* ==========================================
       MOBILE PLACEMENT CONTROLS (shown by JS)
       ========================================== */
    #mobile-placement-controls[style*="display: flex"] {
        bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 8px 12px !important;
        gap: 10px !important;
    }

    #mobile-placement-controls button {
        min-width: 36px;
        min-height: 36px;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        background: rgba(255,255,255,0.15);
        color: #fff;
        cursor: pointer;
        touch-action: manipulation;
    }

    #mobile-placement-controls button:active {
        background: rgba(255,255,255,0.3);
    }

    /* ==========================================
       CHARACTER MODAL on mobile
       ========================================== */
    #character-modal .xp-window {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: calc(var(--vh, 1vh) * 90) !important;
    }

    #character-modal .xp-window-content {
        padding: 0 !important;
        max-height: calc(var(--vh, 1vh) * 78) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Tab bar: horizontal scrollable, compact */
    #char-tab-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 2px !important;
        padding: 2px 4px 0 !important;
        scrollbar-width: none !important;
    }
    #char-tab-bar::-webkit-scrollbar { display: none !important; }

    #char-tab-bar .char-tab {
        font-size: 10px !important;
        padding: 5px 8px !important;
        white-space: nowrap;
        flex-shrink: 0 !important;
    }

    /* Main body: preview beside name/info, content below */
    #char-modal-body {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        min-height: auto !important;
    }

    /* Preview panel: compact side row */
    #char-preview-panel {
        width: auto !important;
        min-width: auto !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        padding: 6px !important;
        border-right: 1px solid #ccc !important;
        border-bottom: none !important;
        gap: 4px !important;
        align-items: center !important;
    }

    #char-preview-3d {
        width: 110px !important;
        height: 150px !important;
        flex-shrink: 0 !important;
    }

    #char-preview-3d canvas {
        width: 110px !important;
        height: 150px !important;
    }

    /* Tab content: takes remaining space beside preview */
    #char-tab-content {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-height: calc(var(--vh, 1vh) * 45) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 8px !important;
    }

    #character-modal [onclick*="switchCharTab"] {
        font-size: 10px !important;
        padding: 5px 8px !important;
        white-space: nowrap;
    }

    /* Pose sliders */
    #character-modal input[type="range"] {
        height: 28px !important;
        -webkit-appearance: none;
    }

    /* Name input under preview */
    #char-name {
        font-size: 10px !important;
        padding: 3px !important;
        margin-top: 4px !important;
    }

    /* Mobile character placement controls bar */
    #mobile-char-controls[style*="display: flex"] {
        bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 8px 12px !important;
        gap: 10px !important;
    }

    #mobile-char-controls button {
        min-width: 36px;
        min-height: 36px;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        background: rgba(255,255,255,0.15);
        color: #fff;
        cursor: pointer;
        touch-action: manipulation;
    }

    #mobile-char-controls button:active {
        background: rgba(255,255,255,0.3);
    }
}

/* ============================================
   HOME PAGE Mobile
   ============================================ */
@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: 5px;
    }

    .hero-buttons .xp-btn {
        flex: 1;
        white-space: nowrap;
        text-align: center;
    }

    #globe-container {
        height: 40vh !important;
        min-height: 250px;
    }

    /* Override inline fixed widths on showcase window */
    #showcase-window,
    #showcase-window .xp-window-content,
    #showcase-globe {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #showcase-window .xp-window-content {
        height: 250px !important;
        min-height: 200px !important;
        max-height: 250px !important;
    }

    #showcase-globe {
        height: 250px !important;
    }

    #showcase-globe canvas {
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================
   SYSTEM MINIMAP - expand/collapse (all widths)
   ============================================ */
#system-minimap {
    transition: all 0.3s ease;
}

#system-minimap.minimap-expanded {
    width: 250px !important;
    height: 250px !important;
    bottom: 50% !important;
    right: 50% !important;
    transform: translate(50%, 50%);
    z-index: 100 !important;
    border: 2px solid #0055EA !important;
    border-radius: 8px !important;
}

#system-minimap.minimap-expanded #minimap-canvas {
    width: 250px !important;
    height: 250px !important;
}

/* ============================================
   VISITOR PAGE (World Browser) - Desktop-like
   ============================================ */
@media (max-width: 768px) {
    /* Container fills viewport but keeps taskbar space */
    .browser-container {
        height: calc(var(--vh, 1vh) * 100 - 44px) !important;
        padding: 4px !important;
        padding-bottom: 0 !important;
    }

    .browser-window {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        /* Keep XP window borders and shadow */
    }

    /* Keep browser chrome but compact */
    .browser-toolbar {
        padding: 2px 6px !important;
    }

    .browser-btn {
        padding: 2px 6px !important;
        font-size: 11px;
    }

    .browser-address {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }

    /* Status bar compact */
    .status-bar {
        padding: 2px 6px !important;
        font-size: 10px;
    }

    /* Globe area takes all remaining space */
    .browser-content {
        flex: 1 !important;
        touch-action: none;
    }

    #globe {
        flex: 1 !important;
        height: 100% !important;
        touch-action: none;
    }

    #canvas {
        height: 100% !important;
    }

    /* Minimap smaller on mobile */
    #system-minimap,
    #minimap-canvas {
        width: 90px !important;
        height: 90px !important;
    }

    /* Click tooltip */
    .click-tooltip {
        font-size: 10px !important;
    }
}

/* ============================================
   LOGIN/SIGNUP Mobile
   ============================================ */
@media (max-width: 768px) {
    .xp-container[style*="align-items: center"] {
        justify-content: center !important;
        padding: 15px !important;
        display: flex !important;
    }

    /* Login/signup window - centered, desktop-like */
    #login-window,
    .xp-window[style*="width: 350px"] {
        width: 95% !important;
        max-width: 400px !important;
    }
}

/* ============================================
   EDITOR Mobile - Split Screen with XP styling
   ============================================ */
@media (max-width: 768px) {
    #editor {
        height: calc(var(--vh, 1vh) * 100) !important;
        padding: 0 !important;
        padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box;
    }

    #editor .xp-window {
        height: 100% !important;
        width: 100% !important;
        /* Keep border and radius from desktop */
    }

    .editor-layout {
        flex-direction: column-reverse !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* Bottom Part (Sidebar/Assets) - 35% height */
    .editor-sidebar {
        height: 35% !important;
        width: 100% !important;
        border-right: none;
        border-top: 3px solid #245EDC;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 8px;
        padding-bottom: 10px;
    }

    /* Top Part (Globe Viewport) - 65% height */
    .editor-viewport {
        height: 65% !important;
        flex: 1;
        min-height: 0;
        touch-action: none;
    }

    /* Editor header: single scrollable row */
    .editor-header {
        display: flex;
        flex-wrap: nowrap !important;
        height: auto !important;
        padding: 2px 4px;
        gap: 3px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .editor-header::-webkit-scrollbar {
        display: none;
    }

    /* Show full text names on all toolbar buttons */
    .editor-header-left, .editor-header-right {
        width: auto;
        flex-wrap: nowrap;
        flex-shrink: 0;
        gap: 3px;
    }

    /* Header buttons: match desktop sizing */
    .editor-header .xp-btn {
        padding: 2px 6px;
        font-size: 12px;
    }

    /* Section headers */
    .editor-section-header {
        padding: 5px 8px;
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    /* Asset grid: 3 columns matching desktop */
    .asset-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        max-height: none;
        padding: 5px;
    }

    .asset-item {
        padding: 6px 4px;
    }

    .asset-item img {
        width: 32px;
        height: 32px;
    }

    .asset-name {
        font-size: 9px;
        -webkit-line-clamp: 3;
        line-height: 1.3;
    }

    /* Tool buttons */
    .tool-row {
        flex-wrap: wrap;
    }

    .tool-row input[type="color"] {
        width: 50px;
        height: 28px;
    }

    /* Connections section inputs */
    .editor-sidebar input[type="text"],
    .editor-sidebar input[type="url"] {
        font-size: 14px !important;
        padding: 6px !important;
    }
}

/* ============================================
   SHOP / PREMIUM Page Mobile
   ============================================ */
@media (max-width: 768px) {
    /* Shop window: desktop-like with XP borders */
    .premium-window,
    #shop-window {
        height: calc(100vh - 48px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100vh - 48px) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0;
        display: flex !important;
        flex-direction: column !important;
        /* Keep border and radius from desktop */
    }

    #shop-window .xp-window-content {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        min-height: 0 !important;
    }

    /* Tab bar: horizontal scrollable */
    .shop-tabs,
    div[style*="display: flex"][style*="gap: 2px"][style*="background: #ECE9D8"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }

    .shop-tab,
    .tab-btn {
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 12px;
        flex-shrink: 0;
    }

    /* Content area: scrollable */
    .premium-content {
        padding: 12px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Pricing grid: single column */
    .pricing-grid {
        flex-direction: column !important;
        align-items: center;
    }

    .pricing-card {
        width: 100% !important;
        max-width: 320px;
        min-height: auto !important;
    }

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

    /* Inline pricing cards (2-column grid) */
    .pricing-grid-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 5px;
    }

    .pricing-card-inline {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
    }

    .pricing-card-inline div[style*="font-size: 28px"] { font-size: 22px !important; }
    .pricing-card-inline div[style*="font-size: 20px"] { font-size: 16px !important; }
    .pricing-card-inline ul { padding-left: 10px !important; }
    .pricing-card-inline li { font-size: 10px !important; }

    /* Comparison table: horizontally scrollable */
    .comparison-table,
    .comparison-section {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Coin cards: stack vertically */
    #tab-coins > div > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: center;
        gap: 10px;
    }

    #tab-coins div[style*="width: 160px"] {
        width: 100% !important;
        max-width: 300px;
    }

    /* Pack grid: 2 columns on mobile */
    #packs-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Cart sidebar: hidden on mobile */
    #cart-sidebar {
        display: none !important;
    }

    /* Pack detail modal: popup window */
    #pack-modal .xp-window,
    div[style*="width: 420px"] {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Checkout modal: popup window with XP styling */
    #checkout-modal .xp-window {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: calc(var(--vh, 1vh) * 90) !important;
        /* Keep border-radius from desktop */
    }
}

/* ============================================
   ACCOUNT Page Mobile
   ============================================ */
@media (max-width: 768px) {
    .account-window {
        width: 100% !important;
        max-width: 100% !important;
        /* Keep border and radius from desktop */
    }

    /* Tab buttons */
    .account-window .tab-btn {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Account form inputs */
    .account-window .xp-input {
        font-size: 16px !important;
        padding: 8px !important;
    }

    /* Subscription info box */
    .account-window div[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column;
        gap: 4px;
    }
}