/* ================================================
   RESPONSIVE.CSS - RuneClicker Responsive Styles
   Complete mobile-first rewrite with proper stacking
   ================================================ */

/* ==============================================
   BASE RESPONSIVE FIXES
   ============================================== */

/* Ensure proper box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Allow scrolling on mobile */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* ==============================================
   MOBILE FIRST (< 768px)
   ============================================== */
@media screen and (max-width: 767px) {
    body {
        height: auto;
        min-height: 100vh;
        overflow: auto;
        align-items: flex-start;
        padding: 5px;
    }

    /* Game container: full width, auto height */
    .game-container {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 100vh;
        padding: 8px;
        border-radius: 0;
        border-width: 2px;
    }

    /* MOBILE TOUCH FIX: Ensure navigation is clickable */
    .main-nav {
        position: relative;
        z-index: 50;  /* Above other elements */
    }

    .nav-btn {
        cursor: pointer;
        touch-action: manipulation;  /* Removes 300ms delay */
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
        position: relative;
        z-index: 51;
    }

    /* Ensure header doesn't block nav */
    header {
        position: relative;
        z-index: 40;
        overflow: visible;
    }

    /* Header adjustments */
    header {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    header h1 {
        font-size: 14px;
        margin-bottom: 8px;
    }

    /* Kingdom banner: smaller, repositioned */
    .kingdom-banner {
        font-size: 8px;
        padding: 6px 15px 8px 15px;
        right: 10px;
        min-width: 120px;
        letter-spacing: 1px;
    }

    /* Merchant timer */
    .merchant-timer-bar {
        font-size: 7px;
        padding: 4px 8px;
        min-width: auto;
    }

    /* Stats grid: 3 columns, compact */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    .stat-box {
        padding: 4px 5px;
        min-width: auto;
        flex-direction: column;
    }

    .stat-box .label {
        font-size: 5px;
        letter-spacing: 0;
    }

    .stat-box .value {
        font-size: 8px;
    }

    .stat-box .rate {
        font-size: 6px;
    }

    .res-icon {
        width: 14px;
        height: 14px;
    }

    .production-bar {
        height: 2px;
        margin-top: 2px;
    }

    /* Navigation: horizontal scroll */
    .main-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding-bottom: 5px;
        justify-content: flex-start;
        margin-bottom: 5px;
    }

    .main-nav::-webkit-scrollbar {
        height: 2px;
    }

    .nav-btn {
        padding: 6px 10px;
        font-size: 7px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* MAIN FIX: Production layout stacking */
    /* MAIN FIX: Production layout stacking */
    /* REMOVED: #view-production { display: block !important; } - This broke view switching! */
    #view-production.active-view {
        display: block !important;
    }

    .click-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Mining rock column: compact, centered */
    .coin-column {
        width: 100% !important;
        display: flex;
        justify-content: center;
        margin-bottom: 5px;
    }

    .coin-container {
        height: 120px !important;
        width: 100%;
        max-height: 120px;
    }

    .mining-target {
        transform: scale(0.8);
    }

    .rock-img {
        width: 70px !important;
        height: 70px !important;
    }

    .click-hint {
        font-size: 7px;
    }

    /* Shop column: full width */
    .shop-column {
        width: 100% !important;
        max-height: none !important;
        flex: 1;
    }

    /* Shop tabs: grid layout for better fit */
    .shop-tabs {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3px !important;
    }

    .shop-tab {
        padding: 6px 4px;
        font-size: 7px;
        min-width: auto;
        text-align: center;
    }

    /* Nested nav */
    .nested-nav-area {
        margin: 5px 0;
    }

    .nav-row {
        gap: 3px;
        flex-wrap: wrap;
    }

    .nav-row button {
        padding: 4px 8px;
        font-size: 7px;
    }

    /* Shop list: scrollable */
    .shop-list {
        max-height: 400px;
        overflow-y: auto;
    }

    /* Upgrade items */
    .upgrade-item {
        padding: 8px;
        gap: 8px;
    }

    .upgrade-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .upgrade-name {
        font-size: 9px;
    }

    .upgrade-owned {
        font-size: 7px;
    }

    .upgrade-cost {
        font-size: 8px;
    }

    .upgrade-coins-mini {
        font-size: 6px;
    }

    .level-progress-container {
        height: 3px;
    }

    /* Production separator */
    .production-separator {
        font-size: 8px;
        padding: 4px 8px;
    }

    /* Craft settings grid */
    .craft-settings-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .craft-select-card {
        padding: 8px;
    }

    .craft-select-icon {
        width: 16px;
        height: 16px;
    }

    .craft-name {
        font-size: 8px;
    }

    .craft-owned,
    .craft-status {
        font-size: 6px;
    }

    /* ========================================
       MERCHANT TAB
       ======================================== */
    .merchant-layout {
        padding: 10px;
    }

    .merchant-header h2 {
        font-size: 12px;
    }

    .preferred-notice {
        font-size: 8px;
    }

    .sell-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .sell-item {
        padding: 10px;
    }

    .sell-icon-container {
        width: 48px;
        height: 48px;
    }

    .sell-icon {
        width: 36px;
        height: 36px;
    }

    .sell-name {
        font-size: 9px;
    }

    .sell-price-tag {
        font-size: 8px;
        padding: 3px 8px;
    }

    .sell-actions {
        gap: 4px;
    }

    .sell-btn {
        padding: 6px 3px;
        font-size: 6px;
    }

    /* ========================================
       ACCOUNT TAB
       ======================================== */
    .account-container {
        padding: 10px;
    }

    .account-header h2 {
        font-size: 12px;
    }

    .account-sub {
        font-size: 8px;
    }

    .account-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
    }

    .account-left,
    .account-right {
        width: 100% !important;
    }

    /* Equipment grid */
    .equipped-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px;
    }

    .equipped-slot {
        width: 36px;
        height: 36px;
    }

    /* Inventory grid */
    .inventory-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px;
    }

    .inventory-slot {
        width: 36px;
        height: 36px;
    }

    /* Effects list */
    .effects-section h3,
    .equipment-section h3,
    .loot-section h3 {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .effects-list {
        font-size: 7px;
    }

    /* ========================================
       STATS TAB
       ======================================== */
    .stats-panel {
        padding: 10px;
    }

    .stats-panel h2 {
        font-size: 12px;
    }

    .detailed-stats {
        font-size: 8px;
    }

    /* ========================================
       COLLECTION TAB
       ======================================== */
    .collection-scroll-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    /* ========================================
       WORLD MAP TAB
       ======================================== */
    .world-view-container {
        padding: 10px;
    }

    .town-header h2 {
        font-size: 12px;
    }

    .town-header p {
        font-size: 9px;
    }

    .quest-list {
        max-height: 300px;
    }

    .quest-item {
        padding: 8px;
    }

    .quest-title {
        font-size: 9px;
    }

    .quest-progress-text {
        font-size: 7px;
    }

    .move-town-btn {
        font-size: 8px;
        padding: 8px 16px;
    }

    /* ========================================
       FOOTER
       ======================================== */
    footer {
        padding: 8px;
        margin-top: auto;
    }

    .reset-btn {
        font-size: 7px;
        padding: 6px 12px;
    }

    /* ========================================
       TOOLTIPS & OVERLAYS
       ======================================== */
    #tooltip {
        max-width: 85vw;
        font-size: 8px;
        padding: 6px;
    }

    #toast-container {
        bottom: 60px;
    }

    .toast {
        font-size: 8px;
        padding: 8px 12px;
    }
}


/* ==============================================
   VERY SMALL MOBILE (< 400px)
   ============================================== */
@media screen and (max-width: 399px) {
    .game-container {
        padding: 5px;
    }

    header h1 {
        font-size: 11px;
    }

    /* Stats: 2 columns */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stat-box .label {
        font-size: 4px;
    }

    .stat-box .value {
        font-size: 7px;
    }

    /* Hide rates on tiny screens */
    .stat-box .rate,
    .production-bar {
        display: none;
    }

    .nav-btn {
        font-size: 6px;
        padding: 5px 6px;
    }

    /* Shop tabs: 2 columns */
    .shop-tabs {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .shop-tab {
        font-size: 6px;
    }

    /* Mining rock even smaller */
    .coin-container {
        height: 100px !important;
    }

    .rock-img {
        width: 60px !important;
        height: 60px !important;
    }

    /* Crafting grid: keep 2 columns but smaller */
    .craft-settings-grid {
        gap: 4px !important;
    }

    .craft-select-card {
        padding: 6px;
    }

    /* Inventory: 3 columns */
    .inventory-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .inventory-slot,
    .equipped-slot {
        width: 32px;
        height: 32px;
    }
}


/* ==============================================
   TABLET (768px - 991px)
   ============================================== */
@media screen and (min-width: 768px) and (max-width: 991px) {
    body {
        height: auto;
        min-height: 100vh;
        overflow: auto;
        padding: 10px;
    }

    .game-container {
        width: 100%;
        max-width: 750px;
        height: auto;
        min-height: 90vh;
    }

    header h1 {
        font-size: 18px;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    /* Production layout: stack */
    .click-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
    }

    .coin-column {
        width: 100%;
    }

    .coin-container {
        height: 150px;
    }

    .shop-column {
        width: 100%;
    }

    .shop-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .shop-tab {
        flex: 1 1 auto;
        min-width: 80px;
    }

    .account-grid {
        flex-direction: column;
    }

    .account-left,
    .account-right {
        width: 100%;
    }

    .inventory-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .equipped-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ==============================================
   LAPTOP (992px - 1199px)
   ============================================== */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .game-container {
        width: 850px;
        height: 750px;
    }

    header h1 {
        font-size: 20px;
    }

    .stats-grid {
        gap: 8px;
    }

    .stat-box {
        padding: 8px 10px;
    }

    .nav-btn {
        padding: 8px 14px;
        font-size: 9px;
    }
}


/* ==============================================
   TOUCH DEVICE ENHANCEMENTS
   ============================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-btn,
    .shop-tab,
    .upgrade-item,
    .craft-select-card,
    .sell-item,
    .inventory-slot,
    .equipped-slot,
    .quest-item {
        min-height: 44px;
    }

    /* Active states for touch feedback */
    .nav-btn:active,
    .shop-tab:active,
    .upgrade-item:active,
    .craft-select-card:active {
        transform: scale(0.97);
        opacity: 0.85;
    }

    /* Disable hover transforms */
    .upgrade-item:hover,
    .craft-select-card:hover,
    .sell-item:hover {
        transform: none;
    }
}


/* ==============================================
   LANDSCAPE MOBILE
   ============================================== */
@media screen and (max-height: 450px) and (orientation: landscape) {
    body {
        align-items: flex-start;
    }

    .game-container {
        height: auto;
        min-height: 100vh;
    }

    /* Side by side in landscape */
    .click-layout {
        flex-direction: row !important;
        gap: 10px;
    }

    .coin-column {
        width: 25% !important;
    }

    .shop-column {
        width: 75% !important;
    }

    .coin-container {
        height: 120px !important;
    }

    .shop-list {
        max-height: 180px;
    }
}


/* ==============================================
   RETINA / HIGH DPI
   ============================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .rock-img,
    .upgrade-icon,
    .res-icon,
    .craft-select-icon {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
    }
}