/* ============================================================================
   FOOD CUTTING SWORD — PHONE STYLESHEET (IMPROVED & CLEANED)
   ============================================================================
   PURPOSE: Overrides for phone landscape (≤920px).
   Strategy: aggressively shrink headers, switch grids to fewer columns,
   hide scrollbars (touch scroll instead), and respect safe-area insets
   for notched phones.

   MAINTENANCE NOTES:
   - Every rule here overrides base.css values for small screens
   - If you add a new component in base.css, check if it needs a rule here
   - Safe-area insets (env()) protect content behind notches/home indicators
   - Scrollbars are hidden on touch devices (native gesture is sufficient)
   ============================================================================ */

@media screen and (max-width: 920px) and (orientation: landscape) {

    /* ── Compact header: 63px vs 93px base ──
       Reclaims vertical space on short phone screens.
       All sub-screens use this automatically via var(--header-total). */
    :root {
        --header-total: 63px;
    }


    /* ====================================================================
       PART 1 — CORE UI (Containers, Navigation, Stats Bar)
       ==================================================================== */

    /* Full-bleed sub-screens: no padding leaks */
    :is(
        .main-menu,
        .mode-selection-screen,
        .difficulty-screen
    ) {
        padding: 15px;
    }

    :is(
        .settings-screen,
        .store-screen,
        .coin-shop-screen,
        .inventory-screen,
        .game-container
    ) {
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        max-width: 100vw;
    }

    /* Gold header line matches compact height */
    :is(
        .store-screen,
        .inventory-screen,
        .coin-shop-screen,
        .settings-screen
    )::after {
        height: 62px;
    }

    /* ── Horizontal overflow prevention ──
       These rules stop the store flex layout from leaking
       horizontally on narrow phone screens. */
    :is(
        .store-layout,
        .inventory-layout,
        .coin-shop-container
    ) {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        margin-right: 0;
        overflow: hidden;
    }

    .store-content-area {
        overflow: visible;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 0%;
        width: 100%;
        padding-right: 0;
        margin-right: 0;
    }

    .store-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 18px 80px 18px;
    }

    /* Hide scrollbars on mobile — touch scroll is sufficient */
    :is(
        .store-grid,
        #coinShopGrid,
        .inventory-section .store-grid
    )::-webkit-scrollbar {
        display: none;
    }

    :is(
        .store-grid,
        #coinShopGrid,
        .inventory-section .store-grid
    ) {
        scrollbar-width: none;
    }

    /* ── Back buttons: safe-area + minimum tap size ──
       env(safe-area-inset-left) prevents the button from hiding
       behind the notch on iPhones. min-width ensures the tap
       target is at least 40px (Apple's HIG minimum). */
    :is(.back-arrow-btn, .detail-back-btn) {
        z-index: var(--z-critical);
        opacity: 1;
        visibility: visible;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 40px;
        min-height: 40px;
        left: max(20px, env(safe-area-inset-left));
    }

    .detail-back-btn {
        top: 15px;
        left: 15px;
        width: clamp(30px, 5vw, 48px);
        height: clamp(30px, 5vw, 48px);
        border-width: 2px;
    }

    .detail-back-btn svg {
        width: 50%;
        height: 50%;
    }

    /* ── Titles: repositioned for compact header ── */
    :is(
        .settings-screen,
        .store-screen,
        .coin-shop-screen,
        .inventory-screen
    ) > h1 {
        top: 30px;
        font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    }

    :is(
        .settings-screen,
        .store-screen,
        .coin-shop-screen,
        .inventory-screen
    ) .back-arrow-btn {
        top: 30px;
        width: 28px;
        height: 28px;
    }

    /* ── Stats bar: safe-area right + compact sizing ── */
    :is(
        .store-screen,
        .coin-shop-screen
    ) .player-stats,
    .inventory-top-tabs {
        top: 30px;
        right: max(20px, env(safe-area-inset-right));
    }

    :is(
        .store-screen,
        .coin-shop-screen
    ) .player-stats {
        padding: 5px 14px 5px 8px;
        border-radius: var(--radius-lg);
        right: calc(20px - 5px);
    }

    :is(
        .store-screen,
        .coin-shop-screen
    ) .stat-item {
        font-size: 13px;
        gap: 4px;
    }

    :is(
        .store-screen,
        .coin-shop-screen
    ) .stat-icon {
        width: 16px;
        height: 16px;
    }

    /* ── "+" coin button: tiny but still tappable at 16-18px ── */
    :is(
        .store-screen,
        .coin-shop-screen,
        .main-menu
    ) .add-coins-btn {
        font-size: clamp(11px, 2vw, 13px);
        line-height: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        width: 16px;
        height: 16px;
        border-width: 1.5px;
    }

    .main-menu .add-coins-btn {
        width: 18px;
        height: 18px;
    }


    /* ====================================================================
       PART 2 — MAIN MENU & SELECTION SCREENS
       ==================================================================== */

    /* ── Main menu: tighter stats, smaller title, smaller play button ── */
    .main-menu-stats {
        top: 20px;
        left: 20px;
    }

    .main-menu .player-stats {
        padding: 4px 12px 4px 8px;
        border-radius: var(--radius-lg);
    }

    .main-menu .stat-item {
        font-size: 13px;
        gap: 4px;
    }

    .main-menu .stat-icon {
        width: 16px;
        height: 16px;
    }

    /* Title: shorter margin-bottom to fit more content vertically */
    .main-menu-title {
        font-size: clamp(2.6rem, 7vw, 4rem);
        margin-bottom: 4vh;
        margin-top: 4vh;
        letter-spacing: 1.5px;
    }

    /* Play button: smaller on phone, pushed down slightly */
    .play-btn {
        margin-top: 10vh;
        width: clamp(60px, 14vw, 90px);
        height: clamp(60px, 14vw, 90px);
    }

    .main-menu .nav-btn {
        width: 48px;
        height: 48px;
    }

    /* ── Mode selection: narrower box, shorter buttons ── */
    .mode-box {
        gap: 12px;
        width: 70%;
        max-width: 400px;
    }

    .mode-btn {
        height: clamp(50px, 10vw, 75px);
        font-size: clamp(16px, 3.5vw, 24px);
        letter-spacing: 1px;
    }

    /* Level badge: smaller to fit the compact mode button */
    .level-badge {
        font-size: clamp(10px, 2vw, 15px);
        padding: 2px 12px;
        top: -4px;
        right: -28px;
        border-width: 2px;
    }

    /* Mode screen nav: smaller icons, tighter spacing */
    .mode-selection-screen .back-arrow-btn {
        width: 32px;
        height: 32px;
        top: 10px;
        left: 10px;
    }

    .mode-selection-screen .top-nav {
        top: 10px;
        right: 10px;
        gap: 8px;
    }

    .mode-selection-screen .nav-btn {
        width: 30px;
        height: 31px;
    }

    /* ── Difficulty: smaller cards, tighter carousel offsets ──
       Less vertical offset (translateY -15px vs base -30px)
       to fit the shorter phone screen height. */
    .difficulty-box {
        height: clamp(170px, 32vw, 270px);
        margin-top: 5px;
    }

    .difficulty-btn {
        width: clamp(165px, 28vw, 240px);
        height: clamp(170px, 32vw, 270px);
    }

    .difficulty-name {
        font-size: clamp(1.7rem, 5vw, 2.8rem);
        letter-spacing: 2px;
        margin-top: -12px;
    }

    /* Carousel positions: reduced vertical travel for phone height */
    .pos-left {
        transform:
            translateX(-75%)
            translateY(-15px)
            scale(0.85)
            rotate(-5deg);
    }

    .pos-center {
        transform:
            translateX(0)
            translateY(10px)
            scale(1.1);
    }

    .pos-right {
        transform:
            translateX(75%)
            translateY(-15px)
            scale(0.85)
            rotate(5deg);
    }

    /* Start button: compact, bottom-right */
    .start-action-btn {
        padding: clamp(7px, 1.6vw, 11px) clamp(20px, 4vw, 32px);
        font-size: clamp(12px, 2.8vw, 17px);
        bottom: 10px;
        right: 10px;
        border-width: 2px;
        border-radius: var(--radius-sm);
        letter-spacing: 1px;
    }

    .difficulty-screen .back-arrow-btn {
        width: 32px;
        height: 32px;
        top: 10px;
        left: 10px;
    }


    /* ====================================================================
       PART 3 — STORE SYSTEM
       ==================================================================== */

    /* ── Inventory tabs: smaller pills ── */
    .inv-top-tab-btn {
        padding: 5px 10px;
        font-size: clamp(10px, 1.6vw, 13px);
        border-width: 2px;
        border-radius: var(--radius-sm);
    }

    /* ── Store sidebar: narrow vertical tabs ──
       min-width:145px + safe-area bottom padding for scroll. */
    .store-layout {
        flex-direction: row;
        gap: 12px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .store-tabs {
        flex-direction: column;
        min-width: 145px;
        width: 145px;
        padding-left: clamp(10px, 2vw, 20px);
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        margin-top: 20px;
        gap: 15px;
        padding-right: 4px;
        flex-shrink: 0;
        transform: translateY(10px);
        border-right: 3px solid rgba(255, 255, 255, 0.4);
        border-bottom: none;
    }

    .store-tabs .store-tab-btn {
        width: 95px;
        min-width: 95px;
        max-width: 95px;
        padding: 0 6px;
    }

    /* ── Store tab buttons: restyled inline for compact size ──
       Same visual design as base, just smaller dimensions.
       The base styles are too large for phone sidebar width. */
    .store-tab-btn {
        width: 100%;
        height: clamp(28px, 5vw, 42px);
        padding: 4px 8px;
        font-size: clamp(11px, 1.8vw, 16px);
        border-radius: 8px;
        border-width: 2px;
        letter-spacing: 1px;
        text-align: center;
        line-height: 1.2;
        color: var(--gold);
        background: linear-gradient(
            135deg,
            var(--wood-4),
            var(--wood-3)
        );
        border-color: #fff;
        text-shadow: 2px 2px 0 #000;
        box-shadow:
            inset 0 0 10px rgba(0, 0, 0, 0.8),
            0 5px 15px rgba(0, 0, 0, 0.5);
    }

    .store-tab-btn.active {
        background: linear-gradient(
            135deg,
            var(--wood-7),
            #5a3a1a
        );
        border-color: var(--gold);
        color: #fff;
        box-shadow:
            inset 0 0 15px rgba(255, 255, 255, 0.3),
            0 5px 20px rgba(0, 0, 0, 0.6);
        transform: scale(1.05);
    }

    /* ── Store grid: 3 columns, wide rectangle cards (4:3) ──
       Changed from square (1/1) to wide (4/3) because phone
       landscape width is limited — rectangles pack better. */
    .store-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .store-screen .store-grid {
        padding-top: 30px;
    }

    /* ── Store item cards: compact variant ──
       Tighter padding, gaps, and border-radius for phone.
       The wide aspect-ratio (4/3) replaces the base square. */
    .store-grid .store-item {
        aspect-ratio: 4 / 3;
        padding: clamp(4px, 0.7vw, 7px);
        gap: clamp(4px, 0.8vh, 7px);
        border-radius: var(--radius-sm);
        box-shadow:
            inset 0 0 10px rgba(0, 0, 0, 0.7),
            0 0 0 3px var(--wood-7),
            0 5px 10px rgba(0, 0, 0, 0.5);
    }

    /* Consistent top margin on images and orbs inside cards */
    .store-grid .store-item :is(.item-image, .blade-color-preview) {
        margin-top: clamp(8px, 1.5vh, 15px);
    }

    /* Smaller images to fit the narrow card width */
    .store-grid .store-item .item-image {
        max-width: clamp(42px, 7.5vw, 58px);
    }

    /* ── Blade orbs: smaller, no breathing animation ──
       Animation disabled for performance on low-end phones.
       The visual difference is minimal at this small size. */
    .store-grid .store-item .blade-color-preview {
        width: clamp(35px, 6.5vw, 48px);
        height: clamp(35px, 6.5vw, 48px);
        margin-bottom: 3px;
        border-width: 1px;
        margin-top: clamp(10px, 2vh, 20px);
        animation: none;
    }

    /* Item name: smaller font, tight letter-spacing */
    .store-grid .store-item .item-name {
        font-size: clamp(9px, 1.5vw, 12px);
        letter-spacing: 0.3px;
        margin-top: clamp(5px, 1vh, 10px);
    }

    /* Quantity display: compact */
    .store-grid .store-item .item-quantity {
        font-size: clamp(10px, 1.6vw, 13px);
        gap: 2px;
    }

    /* Quantity info icon: tiny circle */
    .store-grid .store-item .quantity-info-icon {
        width: 9px;
        height: 9px;
        font-size: 6px;
        line-height: 9px;
    }

    /* Info icon (top-right "i"): smaller but still tappable */
    .store-grid .store-item .info-icon {
        width: 11px;
        height: 11px;
        font-size: 7px;
        line-height: 9px;
        top: 6px;
        right: 6px;
    }

    /* Price row: compact coin icon + number */
    .store-grid .store-item .item-price {
        font-size: clamp(10px, 1.7vw, 14px);
        gap: 2px;
        margin-bottom: 2px;
    }

    .store-grid .store-item .item-price img {
        width: clamp(12px, 2vw, 16px);
        height: clamp(12px, 2vw, 16px);
    }

    /* ── Action buttons inside store cards: tiny but readable ──
       min-height:22px keeps the tap target above 20px minimum. */
    .store-grid .store-item :is(
        .buy-btn,
        .equip-blade-btn,
        .equipped-btn,
        button
    ) {
        font-size: clamp(8px, 1.4vw, 11px);
        padding: 3px 6px;
        border-radius: 6px;
        width: 85%;
        margin-top: 5px;
        margin-bottom: 8px;
    }

    /* ── Fallback: #storeGrid id selector ──
       Some store grids in the HTML use the id #storeGrid instead of
       the .store-grid class. To avoid duplicating every rule, we use
       a single combined :is() selector that targets both. The HTML
       itself is untouched — both selectors keep working.
       Note: these values intentionally differ slightly from the
       .store-grid rules above (slightly smaller clamp floors) to
       match the original behavior. */
    #storeGrid .store-item .item-image {
        max-width: clamp(42px, 7.5vw, 58px);
    }

    #storeGrid .store-item .item-name {
        font-size: clamp(8px, 1.3vw, 11px);
    }

    #storeGrid .store-item .item-quantity {
        font-size: clamp(8px, 1.3vw, 11px);
    }

    #storeGrid .store-item .item-price {
        font-size: clamp(9px, 1.5vw, 13px);
    }

    #storeGrid .store-item .buy-btn {
        font-size: clamp(7px, 1.2vw, 10px);
    }

    #storeGrid .store-item .info-icon {
        width: 10px;
        height: 10px;
        font-size: 6px;
    }

    #storeGrid .store-item .blade-color-preview {
        animation: none;
    }


    /* ====================================================================
       PART 4 — COIN SHOP
       ==================================================================== */

    /* ── Coin shop: 4-column grid, vertical strip cards ──
       Switched from flex-wrap to CSS grid for consistent sizing.
       Cards have no square aspect-ratio — fixed min-height instead. */
    .coin-shop-container {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .coin-shop-container::-webkit-scrollbar {
        display: none;
    }

    #coinShopGrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        gap: 10px;
        padding: 22px 18px 55px 18px;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
        /* ── Coin shop cards: vertical strips without square ratio ──
       space-between distributes remaining space evenly between
       content elements, eliminating the gap at the bottom. */
    #coinShopGrid .store-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        width: 100%;
        max-width: 100%;
        aspect-ratio: unset;
        min-height: 150px;
        max-height: none;
        padding: 6px 4px 4px 4px;
        border-radius: var(--radius-sm);
        position: relative;
        flex-shrink: 0;
    }

    /* Coin image: centered, fixed max-width */
    #coinShopGrid .store-item .item-image {
        width: auto;
        max-width: 50px;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        margin-top: 12px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    /* Item name: truncated with ellipsis if too long */
    #coinShopGrid .store-item .item-name {
        font-family: var(--font-display);
        font-size: 11px;
        font-weight: normal;
        color: var(--gold);
        text-shadow: 2px 2px 0 #000;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        max-width: 100%;
        line-height: 1.2;
        letter-spacing: 0.3px;
        margin: 7px 0 0 0;
        padding: 0;
        flex-grow: 0;
        flex-shrink: 0;
    }

    /* Quantity display */
    #coinShopGrid .store-item .item-quantity {
        display: flex;
        align-items: center;
        gap: 3px;
        font-weight: bold;
        font-size: 12px;
        color: #ddd;
        text-shadow: 1px 1px 2px #000;
        margin: 0;
        padding: 0;
        flex-grow: 0;
        flex-shrink: 0;
    }

    /* Quantity info icon */
    #coinShopGrid .store-item .quantity-info-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: var(--gold);
        color: #000;
        border-radius: var(--radius-full);
        text-align: center;
        line-height: 12px;
        font-size: 8px;
        font-weight: bold;
        flex-shrink: 0;
    }

    /* Price row */
    #coinShopGrid .store-item .item-price {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 15px;
        font-weight: bold;
        color: var(--gold);
        text-shadow: 1px 1px 2px #000;
        margin-top: 10px;
        padding: 0;
        flex-grow: 0;
        flex-shrink: 0;
    }

    #coinShopGrid .store-item .item-price img {
        width: 12px;
        height: 12px;
        filter: none;
        flex-shrink: 0;
    }

    /* ── Buy buttons: reapply base styles inline for specificity ──
       The base .buy-btn styles get overridden by the id selector
       in some cases, so we redeclare the important properties here. */
    #coinShopGrid .store-item :is(.buy-btn, button) {
        position: relative;
        padding: 4px 6px;
        font-size: 10px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 6px;
        border: none;
        color: #fff;
        font-family: var(--font-body);
        width: 88%;
        margin-bottom: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        text-shadow: 1px 1px 0 #000;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        letter-spacing: 0.3px;
        min-height: 22px;
        visibility: visible;
        opacity: 1;
        z-index: 5;
        flex-grow: 0;
        flex-shrink: 0;
        background: var(--grad-success-btn);
        --wood-1: #1d3a17;
        box-shadow: var(--shadow-3d-rest);
    }

    /* Info icon on coin shop cards */
    #coinShopGrid .store-item .info-icon {
        position: absolute;
        top: 3px;
        right: 3px;
        z-index: 2;
        width: 14px;
        height: 14px;
        background-color: #f0f0f0;
        color: #000;
        border-radius: var(--radius-full);
        border: 1.5px solid #333;
        text-align: center;
        line-height: 12px;
        font-weight: bold;
        font-family: 'Georgia', serif;
        font-style: italic;
        font-size: 9px;
        cursor: pointer;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* Coin badges: tiny color indicator on phone */
    #coinShopGrid .store-item .coin-badge {
        font-size: 0.4rem;
        padding: 1px 5px;
        top: -4px;
        right: -4px;
        color: white;
        font-family: var(--font-display);
        border-radius: 5px;
        transform: rotate(10deg);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        z-index: 8;
        text-transform: uppercase;
    }


    /* ====================================================================
       PART 5 — INVENTORY
       ==================================================================== */

    /* ── Inventory layout: scrollable with safe-area padding ── */
    .inventory-layout {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .inventory-layout::-webkit-scrollbar {
        display: none;
    }

    /* ── Inventory grid: 4 columns, tall rectangle cards ──
       No square aspect-ratio — uses min-height instead
       so cards can grow with their content naturally. */
    .inventory-section .store-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 12px 18px 55px 18px;
    }

    .inventory-section .store-grid .store-item {
        aspect-ratio: auto;
        min-height: 160px;
        padding: 6px 4px 4px 4px;
        gap: 4px;
        border-radius: var(--radius-sm);
        overflow: hidden;
        box-shadow:
            inset 0 0 10px rgba(0, 0, 0, 0.7),
            0 0 0 3px var(--wood-7),
            0 5px 10px rgba(0, 0, 0, 0.5);
    }

    /* Consistent top margin on images and orbs */
    .inventory-section .store-grid .store-item :is(
        .blade-color-preview,
        .item-image
    ) {
        margin-top: 6px;
    }

    /* Blade orbs: smaller, no animation on phone */
    .inventory-section .store-grid .store-item .blade-color-preview {
        width: 46px;
        height: 46px;
        margin-bottom: 6px;
        animation: none;
        border-width: 2px;
    }

    /* Food images */
    .inventory-section .store-grid .store-item .item-image {
        max-width: 55px;
    }

    /* Item names: truncated with ellipsis */
    .inventory-section .store-grid .store-item :is(
        .item-name,
        .locked-item .item-name
    ) {
        font-size: 11px;
        letter-spacing: 0.3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        flex-grow: 0;
        display: block;
        margin: 13px 0 0 0;
    }

    /* Quantity display */
    .inventory-section .store-grid .store-item .item-quantity {
        font-size: 10px;
        gap: 3px;
        margin-bottom: 0;
    }

    .inventory-section .store-grid .store-item .quantity-info-icon {
        width: 12px;
        height: 12px;
        font-size: 8px;
        line-height: 12px;
    }

    /* Info icon */
    .inventory-section .store-grid .store-item .info-icon {
        width: 14px;
        height: 14px;
        font-size: 9px;
        line-height: 12px;
        top: 3px;
        right: 3px;
    }

    /* Price row */
    .inventory-section .store-grid .store-item .item-price {
        font-size: 14px;
        gap: 3px;
    }

    .inventory-section .store-grid .store-item .item-price img {
        width: 14px;
        height: 14px;
    }

    /* ── Inventory action buttons: compact, truncated if too long ──
       min-height:22px keeps tap target above minimum.
       white-space:nowrap + text-overflow:ellipsis prevents overflow. */
    .inventory-section .store-grid .store-item :is(
        .buy-btn,
        .equipped-btn,
        .equip-blade-btn,
        .equip-btn,
        button
    ) {
        font-size: 10px;
        padding: 4px 6px;
        border-radius: 6px;
        min-height: 22px;
        width: 88%;
        margin-bottom: 8px;
        margin-top: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0.3px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 5;
        visibility: visible;
        opacity: 1;
    }

    /* Food points display in inventory */
    .inventory-section .store-grid .store-item .inv-food-points {
        font-size: clamp(8px, 2vw, 12px);
        padding-bottom: 15px;
    }


    /* ====================================================================
       PART 6 — SETTINGS
       ==================================================================== */

    /* ── Settings: scrollable with safe-area bottom padding ──
       Scrollbar hidden because touch scroll is the primary
       interaction method on phones. */
    .settings-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-top: 35px;
        padding-bottom: max(15px, env(safe-area-inset-bottom));
        padding-right: max(15px, env(safe-area-inset-right));
    }

    .settings-box::-webkit-scrollbar {
        display: none;
    }

    /* Setting rows: wider on phone for better tap targets */
    .setting-item {
        width: 90%;
        max-width: 500px;
        padding: 12px 14px;
        margin-bottom: 3px;
    }

    /* Slider: shorter but still usable */
    .settings-box .slider {
        width: 22vw;
        min-width: 65px;
        max-width: 140px;
    }

    .setting-label {
        font-size: clamp(13px, 2.5vw, 16px);
        margin-right: 6px;
        padding-right: 6px;
    }

    /* Value readout: compact */
    .sword-size-value {
        font-size: clamp(11px, 2vw, 14px);
        min-width: 55px;
        width: 55px;
    }

    /* Preview button: tiny but labeled */
    .sword-size-preview-btn {
        font-size: clamp(8px, 1.3vw, 10px);
        padding: 3px 8px;
    }

    .sword-size-control {
        gap: 4px;
    }


    /* ====================================================================
       PART 7 — DETAIL SCREENS
       ==================================================================== */

    /* ── Sword size preview: side-by-side but shrunk ── */
    .sword-size-preview-screen {
        gap: clamp(15px, 3vw, 30px);
        padding: 0 clamp(20px, 4vw, 40px);
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    /* Canvas wrapper: smaller but keeps 16:10 ratio */
    .sword-size-canvas-wrapper {
        width: clamp(280px, 42vw, 500px);
        max-width: clamp(280px, 42vw, 500px);
        aspect-ratio: 16 / 10;
        flex: 0 0 auto;
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-sm);
        border-width: 2px;
    }

    .sword-size-canvas-wrapper::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Canvas element: fills wrapper absolutely */
    .sword-size-preview-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 1;
        transform: none;
    }

    /* Hint overlay: no text overflow on narrow screens */
    .sword-size-preview-hint {
        z-index: 2;
        white-space: nowrap;
        overflow: visible;
        text-overflow: unset;
        width: auto;
        max-width: none;
        flex-wrap: nowrap;
    }

    /* Divider line: shorter to match compact panels */
    .ss-divider-line {
        height: clamp(150px, 28vh, 280px);
        width: 1px;
    }

    /* Controls panel: narrower */
    .ss-controls-panel {
        width: clamp(200px, 25vw, 320px);
        flex: 0 0 auto;
        gap: clamp(10px, 1.8vw, 18px);
    }

    .ss-center-title {
        font-size: clamp(12px, 2vw, 16px);
        letter-spacing: 4px;
    }

    /* Hero percentage number: smaller */
    .sword-size-number {
        font-size: clamp(40px, 7vw, 60px);
    }

    .ss-percentage-symbol {
        font-size: clamp(18px, 3vw, 26px);
    }

    /* Visual comparison lines */
    .ss-size-visual {
        gap: clamp(6px, 1vw, 10px);
    }

    .ss-visual-line {
        height: 4px;
    }

    .ss-visual-label {
        font-size: clamp(7px, 1vw, 9px);
    }

    .ss-visual-divider {
        width: 1px;
        height: 20px;
        background: rgba(255, 255, 255, 0.3);
    }

    /* Slider box */
    .ss-slider-box {
        padding: clamp(10px, 1.5vw, 16px) clamp(12px, 2vw, 20px);
        border-radius: 14px;
    }

    .ss-slider-left-label {
        font-size: clamp(7px, 1vw, 9px);
    }

    .ss-preview-slider-value {
        font-size: clamp(14px, 2.2vw, 20px);
    }

    /* Preview open button in settings */
    .sword-size-preview-btn {
        min-height: 26px;
        padding: 3px clamp(6px, 1.2vw, 14px);
        font-size: clamp(9px, 1.5vw, 12px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sword-size-preview-screen .back-arrow-btn {
        top: 10px;
        left: 10px;
        transform: none;
    }

    /* ── Food & Blade detail: full-bleed with 30px inset ── */
    :is(.food-detail-screen, .blade-detail-screen) {
        padding: 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    /* Inner container: 30px margin on all sides */
    :is(.food-detail-container, .blade-detail-container) {
        position: relative;
        flex-direction: row-reverse;
        border-width: clamp(2px, 0.4vw, 4px);
        border-radius: clamp(10px, 1.5vw, var(--radius-xl));
        overflow: hidden;
        width: calc(100% - 60px);
        height: calc(100% - 60px);
        margin: 30px;
    }

    .blade-detail-container {
        background: linear-gradient(
            135deg,
            rgba(60, 30, 10, 0.85) 0%,
            rgba(20, 10, 0, 0.95) 100%
        );
    }

    /* ── Sidebars: narrow (160px), scrollable ── */
    :is(.detail-sidebar, .blade-detail-sidebar) {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
        flex-basis: 160px;
        height: 100%;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        border-left: 2px solid rgba(var(--gold-rgb), 0.3);
        border-bottom: none;
        padding: clamp(8px, 1.5vw, 30px) clamp(6px, 1.2vw, 20px);
        gap: clamp(6px, 1.2vw, 20px);
        box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.5);
        flex-shrink: 0;
    }

    .blade-detail-sidebar {
        border: none;
        background: #0a0500;
        gap: clamp(6px, 1.2vw, 14px);
    }

    /* Thin scrollbar for sidebars */
    :is(.detail-sidebar, .blade-detail-sidebar)::-webkit-scrollbar {
        width: clamp(2px, 0.4vw, 6px);
    }

    :is(.detail-sidebar, .blade-detail-sidebar)::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: var(--radius-sm);
    }

    /* Sidebar titles */
    :is(.sidebar-title, .blade-sidebar-title) {
        display: block;
        font-size: clamp(11px, 2.2vw, 28px);
        margin-bottom: clamp(4px, 0.8vw, 15px);
    }

    .blade-sidebar-title {
        font-size: clamp(11px, 2.2vw, 26px);
        margin-bottom: clamp(4px, 0.8vw, 10px);
        text-shadow: 2px 2px 0 #000, 0 0 15px rgba(255, 255, 255, 0.3);
        letter-spacing: 2px;
    }

    /* ── Sidebar cards: compact but still tappable ── */
    :is(.variant-btn, .blade-sidebar-card) {
        width: 100%;
        min-width: unset;
        max-width: unset;
        flex-shrink: unset;
        padding: clamp(5px, 1vw, 12px);
        border-radius: clamp(6px, 1vw, var(--radius-md));
        border-width: clamp(1px, 0.3vw, 3px);
        gap: clamp(5px, 1vw, 15px);
    }

    .blade-sidebar-card {
        padding: clamp(5px, 1vw, 12px) clamp(6px, 1.2vw, 15px);
        min-height: 48px;
        align-items: center;
        justify-content: flex-start;
    }

    /* Variant thumbnail */
    .variant-thumb {
        width: clamp(24px, 4.5vw, 55px);
        height: clamp(24px, 4.5vw, 55px);
    }

    /* Card text */
    .variant-name {
        font-size: clamp(9px, 1.8vw, 18px);
    }

    .variant-status {
        font-size: clamp(7px, 1.2vw, 13px);
    }

    /* Blade orb in sidebar: smaller */
    .blade-card-preview {
        width: clamp(24px, 4.5vw, 45px);
        height: clamp(24px, 4.5vw, 45px);
        flex-shrink: 0;
        margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Text info area next to orb */
    .blade-card-info {
        width: calc(100% - clamp(34px, 6vw, 65px));
        overflow: hidden;
        min-width: 0;
    }

    .blade-card-name {
        font-size: clamp(9px, 1.8vw, 15px);
        white-space: nowrap;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .blade-card-status {
        font-size: clamp(7px, 1.2vw, 12px);
    }

    /* Lock icon: inline instead of absolute
       (simpler in the narrow sidebar) */
    .blade-lock-icon {
        position: relative;
        top: unset;
        transform: none;
        right: unset;
        font-size: clamp(12px, 2vw, 18px);
    }

    /* ── Main content area: tighter padding ── */
    :is(.detail-main-area, .blade-detail-main) {
        flex: 1;
        padding: clamp(6px, 1.2vw, 40px) clamp(6px, 1.2vw, 60px);
        gap: 0;
        overflow: visible;
        min-width: 0;
    }

    .blade-detail-main {
        padding: 20px 20px 0 20px;
        gap: 10px;
        justify-content: flex-start;
    }

    /* Hide the ambient glow on phone (saves rendering) */
    .blade-detail-main::before {
        display: none;
    }

    /* Food detail name */
    .detail-main-name {
        font-size: clamp(17px, 4.8vw, 68px);
        margin-bottom: clamp(3px, 0.8vh, 25px);
        margin-top: clamp(-5px, -1vh, -20px);
        letter-spacing: clamp(1px, 0.3vw, 4px);
    }

    /* Blade detail name */
    .blade-detail-name {
        font-size: clamp(16px, 4.5vw, 50px);
        order: 1;
        margin-bottom: 0;
    }

    /* Food image: smaller, keeps floating animation */
    .detail-main-img {
        width: clamp(48px, 13vw, 220px);
        margin-bottom: clamp(2px, 0.6vh, 15px);
        margin-top: clamp(15px, 3vh, 25px);
    }

    /* Blade preview: uses flex:1 to fill available space
       instead of a fixed aspect-ratio (better on short screens) */
    .blade-preview-area {
        order: 2;
        width: 95%;
        height: auto;
        aspect-ratio: auto;
        flex: 1 1 0%;
        min-height: 0;
        max-height: none;
    }

    .blade-equip-area {
        order: 3;
        margin-top: 0;
        margin-bottom: 15px;
        flex-shrink: 0;
    }

    /* ── Food action row: compact points + equip button ── */
    .food-action-row {
        margin-top: clamp(5px, 1.5vh, 60px);
        gap: clamp(4px, 1.2vw, 20px);
    }

    .food-action-row .detail-points {
        padding: 6px 14px;
        font-size: 13px;
        border-radius: var(--radius-sm);
        border-width: 2px;
        line-height: 1;
        height: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* Points badge: responsive sizing */
    .detail-points {
        padding: clamp(3px, 0.6vw, 8px) clamp(6px, 1.5vw, 28px);
        font-size: clamp(8px, 2vw, 26px);
        border-radius: clamp(16px, 2vw, 40px);
        border-width: clamp(1px, 0.3vw, 3px);
    }

    /* ── Equip button: compact on phone ── */
    .blade-equip-btn {
        padding: clamp(3px, 0.7vw, 16px) clamp(8px, 2vw, 70px);
        font-size: clamp(8px, 2vw, 24px);
        border-radius: clamp(6px, 1vw, var(--radius-md));
        border-width: clamp(1px, 0.3vw, 3px);
    }

    /* Equip buttons in food action row: very compact */
    .food-action-row .blade-equip-btn:is(
        .can-equip,
        .is-equipped,
        .is-locked
    ) {
        padding: 3px 14px;
        font-size: 9.5px;
        border-width: 2px;
        border-radius: 7px;
        letter-spacing: 0.5px;
        min-height: 25px;
        min-width: 80px;
        max-width: 150px;
        height: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        text-shadow: 2px 2px 0 #000;
        transform: translateY(-2px);
    }

    /* Equip button in blade detail: slightly taller for tap target */
    .blade-detail-main .blade-equip-btn:is(
        .can-equip,
        .is-equipped,
        .is-locked
    ) {
        padding: 4px 16px;
        font-size: 9px;
        border-width: 2px;
        border-radius: 7px;
        letter-spacing: 1px;
        min-height: 30px;
        min-width: 80px;
        text-shadow: none;
        color: #ffffff;
    }

    /* ── Navigation arrows: high z-index for compact layout ── */
    .food-nav-btn {
        z-index: 200;
        background: transparent;
        border: none;
        box-shadow: none;
        width: clamp(40px, 10vw, 60px);
        height: clamp(40px, 10vw, 60px);
    }

    .food-nav-btn svg {
        width: 100%;
        height: 100%;
        fill: var(--gold);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        transition: transform 0.2s ease, filter 0.2s ease;
    }

    /* Hover: scale up with gold glow */
    .food-nav-btn:hover {
        background: transparent;
        box-shadow: none;
        transform: translateY(-50%) scale(1.2);
    }

    .food-nav-btn:hover svg {
        fill: var(--gold-light);
        filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), 0.8));
    }

    /* Active: scale down for press feedback */
    .food-nav-btn:active {
        transform: translateY(-50%) scale(0.9);
    }

    /* Arrow positions: close to edges */
    .prev-btn {
        left: 5px;
    }

    .next-btn {
        right: 5px;
    }


    /* ====================================================================
       PART 8 — MODALS & OVERLAYS
       ==================================================================== */

    /* ── Info modals: smaller, scrollable if content is tall ── */
    .info-modal-content {
        padding: 14px 14px;
        padding-top: 18px;
        border-radius: 14px;
        width: 75%;
        max-width: 320px;
        max-height: 80vh;
        overflow: visible;
        box-shadow:
            inset 0 0 12px rgba(0, 0, 0, 0.8),
            0 0 0 3px var(--wood-7),
            0 6px 15px rgba(0, 0, 0, 0.8);
    }

    .info-modal-content p {
        font-size: clamp(9px, 1.8vw, 12px);
        line-height: 1.4;
    }

    .info-modal-content .highlight {
        font-size: clamp(9px, 1.8vw, 12px);
    }

    .close-modal-btn {
        top: 0;
        right: 0;
        transform: translate(40%, -40%);
        width: clamp(22px, 4vw, 32px);
        height: clamp(22px, 4vw, 32px);
    }

    /* X button: thinner bars on mobile (info modal only) */
    .close-modal-btn::before,
    .close-modal-btn::after {
        width: 12px;
        height: 2px;
    }

    /* "?" button: smaller on phone */
    .info-action-btn {
        width: clamp(28px, 5vw, 38px);
        height: clamp(28px, 5vw, 38px);
        font-size: clamp(14px, 2.5vw, 20px);
        border-width: 2px;
        top: 10px;
        right: 10px;
        box-shadow:
            0 3px 0 var(--orange-dark),
            0 5px 8px rgba(0, 0, 0, 0.4),
            inset 0 1px 3px rgba(255, 255, 255, 0.3);
        padding-top: 2px;
    }

    /* ── How-to-earn modal: compact scrollable panel ── */
    .how-to-earn-content {
        padding: clamp(10px, 2vw, 16px) clamp(10px, 2vw, 16px);
        border-radius: var(--radius-md);
        border-width: 2px;
        width: 80%;
        max-width: 340px;
        max-height: 90vh;
        overflow: visible;
    }

    .how-to-earn-content::-webkit-scrollbar {
        display: none;
    }

    .how-to-earn-title {
        font-size: clamp(0.85rem, 2vw, 1.2rem);
        margin: 0 0 clamp(6px, 1.2vw, 10px) 0;
        letter-spacing: 1px;
    }

    .earn-section {
        padding: clamp(5px, 1vw, 8px) clamp(6px, 1.2vw, 10px);
        margin-bottom: clamp(5px, 1vw, 8px);
        border-width: 1px;
        border-radius: var(--radius-sm);
    }

    .earn-section:last-of-type {
        margin-bottom: 0;
    }

    .earn-section-icon {
        font-size: clamp(12px, 2vw, 16px);
        margin-bottom: 1px;
    }

    .earn-section-title {
        font-size: clamp(0.6rem, 1.3vw, 0.8rem);
        margin: 0 0 4px 0;
        letter-spacing: 0.5px;
    }

    .earn-row {
        padding: 3px 1px;
    }

    .earn-row:last-child {
        padding-bottom: 0;
    }

    .earn-label {
        font-size: clamp(8px, 1.4vw, 11px);
        gap: 4px;
    }

    .earn-value {
        font-size: clamp(9px, 1.5vw, 12px);
        gap: 2px;
    }

    .earn-value img {
        width: 10px;
        height: 10px;
    }

    .difficulty-dot {
        width: 6px;
        height: 6px;
    }

    .earn-note {
        font-size: clamp(7px, 1.2vw, 9px);
        margin: 3px 0 0 0;
    }

    /* ── Pause menu: smaller padding and fonts ── */
    .pause-box {
        padding: clamp(15px, 3vw, 25px) clamp(15px, 3.5vw, 30px);
        width: 80%;
        max-width: 400px;
        gap: 16px;
        border-radius: var(--radius-md);
        box-shadow:
            inset 0 0 15px rgba(0, 0, 0, 0.8),
            0 0 0 4px var(--wood-7),
            0 12px 30px rgba(0, 0, 0, 0.8);
    }

    .pause-title {
        font-size: clamp(1.6rem, 4.5vw, 2.8rem);
        letter-spacing: 1.5px;
    }

    .pause-buttons {
        gap: 12px;
    }

    .pause-btn {
        padding: 7px 12px;
        font-size: clamp(0.85rem, 2.2vw, 1.2rem);
        border-radius: var(--radius-sm);
        gap: 6px;
    }

    .pause-btn svg {
        width: 16px;
        height: 16px;
    }

    /* ── Exit confirmation: compact ── */
    .exit-confirm-box {
        padding: clamp(12px, 2.5vw, 18px) clamp(12px, 3vw, 22px);
        width: 80%;
        max-width: 280px;
        gap: 12px;
        border-radius: var(--radius-md);
    }

    .confirm-text {
        font-size: clamp(0.85rem, 2.5vw, 1.2rem);
    }

    .confirm-buttons {
        gap: 8px;
    }

    .confirm-btn {
        padding: 6px 14px;
        font-size: clamp(0.8rem, 2vw, 1.05rem);
        border-radius: var(--radius-sm);
        min-width: 70px;
    }

    /* How to earn X button: slightly smaller on phone */
    .how-to-earn-close {
        width: clamp(22px, 4.5vw, 32px);
        height: clamp(22px, 4.5vw, 32px);
    }
	
    /* ====================================================================
       PART 9 — WIN & DEFEAT SCREENS
       ====================================================================
       IMPORTANT FIX: Replaced the old `scale: 0.75` hack with
       proper responsive clamp() values on all internal elements.
       
       The old approach:
         .defeat-panel { scale: 0.75; }
       Problem: visual size shrinks but click area stays full-size,
       causing misaligned taps and broken layouts.
       
       New approach:
         Each child element uses clamp() to shrink proportionally.
         No scale transform needed — everything is natively sized.
       ==================================================================== */

    /* ── Shared panel base: proper responsive sizing ──
       All values use clamp() to shrink naturally on phone
       instead of a blanket scale transform. */
    :is(.defeat-panel, .win-panel) {
        padding: clamp(18px, 3vw, 40px) clamp(22px, 4vw, 50px);
        border-radius: clamp(12px, 2vw, var(--radius-lg));
        border-width: clamp(2px, 0.4vw, 4px);
        gap: clamp(12px, 2vw, 20px);
        min-width: clamp(200px, 30vw, 380px);
        max-width: 90%;
    }

    /* ── Ribbons: smaller text and less negative margin ── */
    :is(.defeat-ribbon, .win-ribbon) {
        padding: 6px clamp(20px, 5vw, 60px);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        margin-bottom: -8px;
        margin-top: -60px;
    }

    :is(.defeat-ribbon, .win-ribbon) h2 {
        font-size: clamp(1.2rem, 3.5vw, 3rem);
        letter-spacing: 2px;
    }

    /* ── Defeat-specific: reason text ── */
    .defeat-header {
        margin-top: clamp(8px, 1.5vw, 15px);
    }

    .defeat-reason {
        font-size: clamp(0.8rem, 2vw, 1.4rem);
        letter-spacing: 1px;
    }

    /* ── Stats row: compact ── */
    .defeat-stats {
        gap: clamp(12px, 2vw, 25px);
        padding: clamp(8px, 1.5vw, 15px) clamp(15px, 2.5vw, 30px);
        border-radius: clamp(10px, 1.5vw, 18px);
        border-width: 2px;
    }

    .d-label {
        font-size: clamp(0.6rem, 1.2vw, 0.9rem);
        letter-spacing: 1.5px;
    }

    .d-value {
        font-size: clamp(1.2rem, 3vw, 2.8rem);
    }

    .d-divider {
        width: 2px;
        height: clamp(25px, 4vw, 40px);
    }

    .d-coin-val img {
        width: clamp(16px, 3vw, 24px);
        height: clamp(16px, 3vw, 24px);
    }

    .d-coin-val span {
        font-size: clamp(1.2rem, 3vw, 2.8rem);
    }

    /* ── Action buttons: smaller circles ── */
    :is(.defeat-actions, .win-actions) {
        gap: clamp(12px, 2vw, 20px);
        margin-top: 0;
    }

    :is(.defeat-btn-circle, .win-btn-circle) {
        width: clamp(42px, 7vw, 70px);
        height: clamp(42px, 7vw, 70px);
        border-width: 2px;
    }

    :is(.defeat-btn-circle, .win-btn-circle) svg {
        width: 50%;
        height: 50%;
    }

    /* ── Win-specific: stars and reward ── */
    .win-stars {
        gap: clamp(6px, 1.2vw, 10px);
        margin: 0;
    }

    .win-star {
        font-size: clamp(1.5rem, 4vw, 3.5rem);
    }

    .win-star-big {
        font-size: clamp(2rem, 5vw, 4.5rem);
    }

    .win-stats {
        width: 100%;
    }

    .win-stat-box {
        padding: clamp(8px, 1.5vw, 12px) clamp(15px, 2.5vw, 30px);
        border-radius: 40px;
        border-width: 2px;
        gap: clamp(8px, 1.5vw, 15px);
    }

    .win-stat-label {
        font-size: clamp(1rem, 2.5vw, 2rem);
        letter-spacing: 1.5px;
    }

    .win-stat-value {
        font-size: clamp(1rem, 2.5vw, 2rem);
    }

    /* Next level button: compact */
    .win-btn-primary {
        padding: clamp(8px, 1.5vw, 16px) clamp(20px, 4vw, 50px);
        font-size: clamp(0.85rem, 2.2vw, 1.5rem);
        border-width: 2px;
        border-radius: var(--radius-sm);
        gap: 8px;
        letter-spacing: 1.5px;
    }


    /* ====================================================================
       PART 10 — IN-GAME HUD
       ==================================================================== */

    /* Game settings gear: smaller */
    .game-settings-btn {
        width: clamp(28px, 5vw, 40px);
        height: clamp(28px, 5vw, 40px);
    }

    /* Score bar: tighter padding and smaller target circle */
    .modern-stats-bar {
        padding: 3px 12px 3px 5px;
        gap: clamp(4px, 0.8vw, 8px);
    }

    .target-icon-circle {
        width: clamp(22px, 4.5vw, 32px);
        height: clamp(22px, 4.5vw, 32px);
        font-size: clamp(11px, 2.5vw, 16px);
        border-width: 1.5px;
    }

    /* Extra specificity for .game-container context */
    .game-container .modern-stats-bar {
        padding: 4px 11px 4px 5px;
        border-radius: 30px;
        gap: 3px;
    }

    .game-container .target-icon-circle {
        width: 27px;
        height: 27px;
        font-size: 13px;
        border-width: 1px;
    }

    .modern-score-wrapper {
        min-width: 50px;
        gap: 2px;
    }

    .game-container .modern-score-wrapper {
        min-width: 43px;
        gap: 1px;
    }

    .modern-score-text span {
        font-size: clamp(16px, 3vw, 22px);
        letter-spacing: 1px;
    }

    .game-container .modern-score-text span {
        font-size: 16px;
        letter-spacing: 0.5px;
    }

    .modern-progress-bg {
        height: clamp(3px, 0.8vw, 5px);
        margin-top: 4px;
    }

    /* ── Toast notification: compact ── */
    #notification {
        padding: 6px 16px;
        font-size: 12px;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        border-width: 1.5px;
        box-shadow:
            0 3px 8px rgba(0, 0, 0, 0.5),
            inset 0 0 6px rgba(0, 0, 0, 0.8);
    }


} /* ─── END PHONE ─── */