/* ============================================================================
   FOOD CUTTING SWORD — IPAD STYLESHEET
   ============================================================================
   PURPOSE: Overrides for iPad landscape (1024-1366px, 4:3 to 16:10 aspect).
   Why a separate file? iPad's 4:3 landscape is awkward — too wide for
   phone layout, too narrow for desktop. These rules bridge the gap.
   Aspect range widened to 16/10 to include iPad Mini 6 (1.523).
   
   MAINTENANCE:
   - Only edits values from the base stylesheet, nothing new.
   - If you add a new component in base.css, check if it needs iPad tweaks here.
   - All sizes reference base Design Tokens where possible.
============================================================================ */

/* max-aspect-ratio widened to 16/10 so iPad Mini 6 (1.523) is
   still covered. iPad Pro 12.9" (1.333) and iPad Pro 11" (1.397)
   remain inside the range as well. */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/10) {

/* ============================================================================
   PART 1 — HEADER & LAYOUT
   Shrink the header bar to reclaim vertical space on iPad.
   ============================================================================ */

    /* Smaller header = more room for content below.
       If you change this, all sub-screens adjust automatically
       (they use margin-top: var(--header-total)). */
    :root {
        --header-total: 83px; /* Base: 93px */
    }

    /* Gold line and title follow the new header height */
    .store-screen::after {
        height: 80px;
    }

    .store-screen > h1 {
        top: 40px;
        font-size: clamp(1.8rem, 3vw, 2.5rem);
    }

    /* Back button & stats bar: smaller to match compact header */
    .store-screen .back-arrow-btn {
        top: 40px;
        width: 45px;
        height: 45px;
    }

    .store-screen .player-stats {
        top: 40px;
        padding: 6px 18px 6px 12px;
        border-radius: 25px;
    }

    .store-screen .stat-item { font-size: 18px; gap: 6px; }
    .store-screen .stat-icon { width: 22px; height: 22px; }
    .store-screen .add-coins-btn { width: 22px; height: 22px; font-size: 14px; }


/* ============================================================================
   PART 2 — STORE SYSTEM
   Reduce from 4 columns to 3, shrink sidebar and cards.
   ============================================================================ */

    /* Narrower sidebar frees width for the 3-column grid */
    .store-tabs {
        flex-direction: column;
        min-width: 200px;
        width: 200px;
        padding-right: 25px;
        padding-bottom: 0;
        border-right: 3px solid rgba(255, 255, 255, 0.4);
        border-bottom: none;
        gap: 15px;
        flex-shrink: 0;
    }

    .store-tab-btn {
        width: 100%;
        height: clamp(50px, 6vw, 70px);
        padding: 8px 10px;
        font-size: clamp(18px, 2.2vw, 24px);
        border-radius: var(--radius-sm);
        letter-spacing: 1.5px;
    }

    /* Both grids drop to 3 columns — 4 doesn't fit at this width */
    :is(.store-grid, #coinShopGrid) {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(15px, 2vw, 22px);
        padding: 10px 20px 80px 10px;
        overflow-y: auto;
    }

    /* Coin shop gets slightly more gap since cards are wider */
    #coinShopGrid {
        gap: clamp(18px, 3vw, 30px);
        padding: 15px 25px 80px 25px;
    }

    /* Prevent flex overflow (same fix as base, reiterated for specificity) */
    .store-content-area {
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    /* Cards: slightly tighter padding and gaps */
    .store-item { padding: 12px; gap: 8px; }

    /* Images and orbs get top margin for consistent spacing */
    .store-item :is(.item-image, .blade-color-preview) { margin-top: 15px; }
    .store-item .item-image { max-width: 80px; }
    .store-item .blade-color-preview { width: 75px; height: 75px; }
    .store-item .item-name { font-size: 16px; margin-top: 8px; }
    .store-item .item-quantity { font-size: 14px; }
    .store-item .item-price { font-size: 18px; }
    .store-item .item-price img { width: 20px; height: 20px; }

    /* All action buttons inside cards: smaller */
    .store-item :is(.buy-btn, .equip-blade-btn, .equipped-btn) {
        font-size: 15px;
        padding: 8px 15px;
        margin-top: 10px;
    }

    .store-item .info-icon { width: 20px; height: 20px; font-size: 13px; line-height: 18px; }


/* ============================================================================
   PART 3 — INVENTORY & COIN SHOP
   Minor spacing fixes for grid items in these contexts.
   ============================================================================ */

    /* Inventory cards: slightly more top padding */
    .inventory-section .store-grid .store-item { padding-top: 16px; }

    /* Less top margin on images inside inventory (cards already have padding-top) */
    .inventory-section .store-grid .store-item :is(.item-image, .blade-color-preview) {
        margin-top: 10px;
    }

    .inventory-section .store-grid .store-item .item-name { margin-top: 10px; }
    .inv-food-points { font-size: clamp(14px, 2.5vw, 20px); }

    /* Coin shop cards: narrower than base to fit 3 per row comfortably */
    #coinShopGrid .store-item { width: clamp(180px, 22vw, 220px); }

    /* Smaller badge text so it doesn't overflow the narrower card */
    #coinShopGrid .store-item .coin-badge { font-size: 0.75rem; padding: 4px 12px; }


/* ============================================================================
   PART 4 — SCROLLBARS
   Thinner than base (10px → 8px) for a less intrusive feel on iPad.
   ============================================================================ */

    :is(.store-grid, #coinShopGrid)::-webkit-scrollbar { width: 8px; display: block; }

    :is(.store-grid, #coinShopGrid)::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius-sm);
    }

    :is(.store-grid, #coinShopGrid)::-webkit-scrollbar-thumb {
        background: var(--orange);
        border-radius: var(--radius-sm);
        border: 1px solid var(--wood-2);
    }

} /* ─── END IPAD ─── */