/*==================================================
    PHONE FIXES (Oct 2026)
    Loaded last. Only small screens.
      - top bar: smaller round buttons, Sync as an
        icon, so the logo has room
      - level card: Hunt button full width, the four
        buy buttons in a 2 x 2 grid (no cut icons)
      - boss picture: no tap flash
==================================================*/

@media (max-width:820px){

    /* ---- top bar ---- */
    #top-header{ grid-template-columns:auto minmax(0,1fr) auto; }
    #game-logo{ height:34px; max-width:100%; object-fit:contain; justify-self:center; }
    .game-logo-link{ min-width:0; }

    .header-right{ gap:5px; }
    .header-right .top-btn,
    .header-right #walletBtn{
        width:38px; height:38px;
        min-width:38px;
        padding:0;
        border-radius:12px;
        display:inline-grid; place-items:center;
    }
    .header-right .top-btn img,
    .header-right #walletBtn img,
    .header-right .top-btn .ui-icon,
    .header-right #walletBtn .ui-icon{ width:22px; height:22px; margin:0; }

    /* "Sync" text -> a sync icon */
    .top-sync-btn .top-sync-icon{
        font-size:0;
        width:18px; height:18px;
        background:#fff;
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.4 6.4L3 16'/%3E%3Cpath d='M3 12a9 9 0 0 1 15.4-6.4L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E") center / contain no-repeat;
                mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.4 6.4L3 16'/%3E%3Cpath d='M3 12a9 9 0 0 1 15.4-6.4L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* ---- level card bottom ---- */
    .level-footer{ padding:14px 12px 16px; }
    .level-actions{ flex-direction:column; align-items:stretch; gap:8px; }
    .hunt-btn{ width:100%; height:46px; font-size:15px; }

    /* ---- level card: the bar and the "Next hunt in" timer side by side
       (the bar was 100% wide and pushed the timer out of sight) ---- */
    .level-progress{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
    .level-progress .progress-bar{ flex:1 1 auto; width:auto !important; min-width:0; }
    .level-progress .hunt-timer{ flex:0 0 auto; display:flex !important; }

    /* ---- boss: no grey tap flash ---- */
    .boss-clickable{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none; }
}

/* narrow phones: buy buttons 2 x 2, full text and icons */
@media (max-width:480px){
    .buy-buttons{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:8px !important; }
    .buy-btn{ height:40px !important; font-size:12.5px !important; gap:6px !important; padding:0 8px !important; }
    .buy-btn img, .buy-btn .ui-icon{ width:20px !important; height:20px !important; flex:0 0 auto; }
}

@media (max-width:420px){
    .hunt-timer-label{ display:none; }          /* clock icon + seconds is enough */
}

/*==================================================
    PHONE FIXES 2 (15 Oct 2026)
==================================================*/
@media (max-width:820px){

    /* ---- popups (16 Oct 2026): EVERY popup is a smaller box on phones,
       smaller text, and no scroll bars (it still scrolls with a finger) ---- */
    .game-popup{ padding:12px; }
    .game-popup-box{
        width:min(360px, calc(100vw - 24px)) !important;
        max-width:min(360px, calc(100vw - 24px)) !important;
        max-height:calc(100dvh - 150px) !important;
        padding:14px 12px !important;
        gap:9px;
        border-radius:16px;
        font-size:13px;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }
    .game-popup-box::-webkit-scrollbar,
    .game-popup-box *::-webkit-scrollbar{ width:0; height:0; display:none; }
    .game-popup-box *{ scrollbar-width:none; }
    .game-popup-box.is-simple{ width:min(320px, calc(100vw - 40px)) !important; }
    .game-popup-label{ font-size:16px; letter-spacing:1.2px; }
    .game-popup-box h3{ font-size:15px; line-height:1.3; }
    .game-popup-message, .game-popup-box p{ font-size:12.5px; line-height:1.45; }
    .game-popup-box small{ font-size:11px; }
    .game-popup-box input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), .game-popup-box select{ font-size:13px; padding:8px 10px; }
    .game-popup-actions{ gap:6px; }
    .game-popup-actions button{ min-height:38px; padding:8px 10px; font-size:12.5px; }
    .game-popup-box .game-popup-actions{ bottom:-14px; margin:2px -12px -14px; padding:10px 12px 14px; }
    .game-popup-images.single .game-popup-image img{ width:min(200px, 52vw); }
    .game-popup-image img{ width:30vw; }

    /* ---- Mailbox: in the bottom bar now (4 buttons), not in the top bar ---- */
    #mailBtn{ display:none !important; }
    .mobile-tabbar{ grid-template-columns:repeat(4, 1fr) !important; }
    .mobile-tabbar .tab-badge{
        position:absolute; top:2px; right:calc(50% - 22px);
        min-width:17px; height:17px; padding:0 4px;
        border-radius:999px; background:#ff3b5c; color:#fff;
        font-size:10px; font-weight:800; line-height:17px; text-align:center;
        box-shadow:0 0 0 2px rgba(14,8,30,.95);
    }
    .mobile-tabbar .tab-badge.hidden{ display:none; }

    /* ---- Battle Power box: tappable ---- */
    .stat-battle-power{ cursor:pointer; }

    /* ---- Equipment page: the level cards fill the width (no wide side gaps) ---- */
    #equipmentPage{ padding:16px 10px; }
    #gearRoot{ padding:4px 0 16px; }
    #gearRoot .gear-level-grid{ padding:0; gap:10px; }
    #gearRoot .gear-level-two{ padding:10px; }
    #gearRoot .gear-two-note{ margin-left:0; margin-right:0; }
    .gear-sock{ padding:8px 6px; }

    /* ---- Inventory: less side padding, tabs fill the row (no overlap) ---- */
    #inventoryPage{ padding:16px 10px; }
    .inventory-page-tabs{
        display:grid !important;
        grid-template-columns:1fr 1.35fr 1.2fr .9fr;
        gap:4px;
        padding:4px;
        overflow:visible;
    }
    .inventory-page-tabs > button{
        min-width:0 !important;
        width:100%;
        height:40px !important;
        padding:0 4px !important;
        font-size:12px !important;
        letter-spacing:0;
    }

    /* ---- Marketplace tabs: "Sell" narrow, "My listings" on one line ---- */
    #marketRoot .mk-tabs{ display:flex; flex-wrap:nowrap; gap:5px; }
    #marketRoot .mk-tabs .arena-shop-tab{
        flex:1 1 auto;
        min-width:0;
        padding:10px 7px;
        font-size:12.5px;
        white-space:nowrap;
    }
    #marketRoot .mk-tabs .arena-shop-tab:nth-child(3){ flex:0 1 auto; padding:10px 9px; }
    #marketRoot .mk-tabs .arena-shop-tab:nth-child(4){ flex:1.6 1 auto; }
}

/* small phones too: 2 NFTs / materials per row in the Inventory */
@media (max-width:380px){
    #inventoryPage .mock-nft-grid,
    #inventoryPage .materials-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
    #inventoryPage .mock-nft-card{ padding:7px; }
    #inventoryPage .mock-nft-card img{ max-height:100px; }
    #inventoryPage .mock-nft-info strong{ font-size:12px; }
    #inventoryPage .mock-nft-status,
    #inventoryPage .inv-tap-note,
    #inventoryPage .inv-feed-note{ font-size:10.5px; }
}

/*==================================================
    PHONE FIXES 3 (21 Oct 2026)
      - every page tab row fills the width: 2, 3 or 4
        tabs share one row in equal parts
      - filter chips (Weapon, Armor ...) in an even
        3-column grid
      - Blend card: both sides line up at the top
      - Duels: the 3 level tiles as full-width rows
      - Boss: Arrow / Poison Arrow / Fire Bomb rows
        line up under "Next attack"
==================================================*/
@media (max-width:820px){

    /* ---- page tabs: one row, equal parts (hidden tabs take no place) ---- */
    .inventory-page-tabs,
    .xc-pagetabs,
    .as-tabs,
    .as-subtabs,
    .rent-tabs.rent-kinds,
    #marketRoot .mk-tabs,
    .prof-cos-tabs{
        display:grid !important;
        grid-template-columns:none !important;
        grid-auto-flow:column;
        grid-auto-columns:minmax(0,1fr);
        gap:4px !important;
        width:100% !important;
        max-width:100%;
        overflow:visible !important;
    }
    .inventory-page-tabs{ padding:4px !important; }
    .inventory-page-tabs > button,
    .xc-pagetabs button,
    .as-tabs button,
    .as-subtabs button,
    .rent-tabs.rent-kinds > button,
    #marketRoot .mk-tabs .arena-shop-tab,
    .prof-cos-tabs > button{
        min-width:0 !important;
        width:100% !important;
        height:auto !important;
        min-height:40px;
        padding:4px 3px !important;
        font-size:12px !important;
        line-height:1.15 !important;
        letter-spacing:0 !important;
        white-space:normal !important;
        text-align:center;
        justify-content:center;
        flex:none !important;
    }
    .as-subtabs button{ min-height:34px; }
    .as-tabs button span,
    .prof-cos-tabs > button small,
    .rent-tabs.rent-kinds > button small{ font-size:10px; }

    /* ---- filter chips (Blend / Equipment / Rent slots): 3 even columns;
       7 chips = "All" on its own row, then 3 + 3 ---- */
    .blend-gear-tabs,
    .gear-inv-tabs,
    .rent-tabs:not(.rent-kinds):not(.rent-rarity){
        display:grid !important;
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:6px !important;
        overflow:visible !important;
    }
    .blend-gear-tabs > *:first-child:nth-last-child(7),
    .gear-inv-tabs > *:first-child:nth-last-child(7),
    .rent-tabs:not(.rent-kinds):not(.rent-rarity) > *:first-child:nth-last-child(7){ grid-column:1 / -1; }
    .blend-gear-tab,
    .gear-inv-tab,
    .rent-tabs:not(.rent-kinds):not(.rent-rarity) > button{
        width:100%; min-width:0;
        justify-content:center;
        padding:7px 4px !important;
        font-size:12px !important;
        height:auto !important;
        min-height:36px;
    }
    /* one theme colour for the picked chip */
    .blend-gear-tab.active{ background:linear-gradient(100deg, #7c2cff, #3b6dff 55%, #00d5ff); border-color:rgba(255,255,255,.2); color:#fff; }
    .blend-gear-tab.active small{ color:#fff; background:rgba(0,0,0,.25); }

    /* ---- Blend card: both NFTs line up at the top, the arrow sits between the pictures ---- */
    .blend-card-top{ align-items:flex-start !important; gap:6px !important; }
    .blend-card-side{ flex:1 1 0; min-width:0; }
    .blend-card-side img{ width:100% !important; max-width:150px; height:auto; }
    .blend-arrow{ align-self:flex-start; margin-top:min(26vw, 100px); flex:0 0 auto; }
    .blend-card .blend-inuse-note{ margin:10px 0 2px; text-align:center; }

    /* ---- Duels: the 3 level tiles as rows ---- */
    .dl-levels{ grid-template-columns:1fr !important; gap:8px; }
    .dl-level{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:
            "name fee"
            "win  dur"
            "ready ready"
            "soon soon";
        align-items:center;
        gap:6px 10px;
        padding:12px 14px;
        text-align:left;
    }
    .dl-level > .dl-level-name{ grid-area:name; font-size:15px; white-space:nowrap; }
    .dl-level > b{ grid-area:fee; text-align:right; font-size:20px !important; white-space:nowrap; }
    .dl-level > .dl-level-win{ grid-area:win; font-size:12.5px; }
    .dl-level > .dl-level-dur{ grid-area:dur; margin:0; justify-self:end; white-space:nowrap; }
    .dl-level > .dl-level-ready{ grid-area:ready; margin:0; text-align:center; border-radius:10px; padding:6px 8px; font-size:12px; }
    .dl-level > .dl-level-soon{ grid-area:soon; text-align:center; font-size:11px; }
    .dl-level > .dl-level-soon:empty{ display:none; }

    /* ---- Boss: "Next attack" items, one even row each ---- */
    .boss-workshop{
        display:grid !important;
        grid-template-columns:1fr;
        gap:8px !important;
        width:100%;
        margin:8px 0 12px;
    }
    .boss-workshop .boss-shot-label{ text-align:left; font-size:12px; letter-spacing:.6px; text-transform:uppercase; }
    .boss-workshop .boss-shot{
        display:grid !important;
        grid-template-columns:30px auto minmax(0,1fr);
        grid-template-rows:auto auto;
        align-items:center;
        column-gap:8px; row-gap:1px;
        width:100%;
        min-height:50px;
        padding:8px 14px !important;
        border-radius:14px !important;
        text-align:left;
        font-size:14px;
    }
    .boss-workshop .boss-shot .boss-shot-img{ grid-column:1; grid-row:1 / span 2; width:30px; height:30px; margin:0; }
    .boss-workshop .boss-shot small{ grid-column:3; grid-row:1; justify-self:start; font-size:12px; }
    .boss-workshop .boss-shot i{ grid-column:2 / -1; grid-row:2; font-size:11.5px; line-height:1.25; }
    .boss-workshop .boss-shot.on::before{ position:absolute; margin-left:-10px; }
    .boss-workshop .boss-shot{ position:relative; }
    .boss-workshop .boss-poison,
    .boss-workshop .boss-arrow-make{ justify-self:center; text-align:center; }
}
.blend-card .blend-inuse-note{ margin:10px 0 2px; text-align:center; }
@media (max-width:820px){
    .as-tabs button{ gap:4px !important; }
    .as-tabs button span{ padding:1px 5px; }
}
/* Blend: the picked Equipment type in the theme colour (all screens) */
.blend-gear-tab.active{ background:linear-gradient(100deg, #7c2cff, #3b6dff 55%, #00d5ff); border-color:rgba(255,255,255,.2); color:#fff; }
.blend-gear-tab.active small{ color:#fff; background:rgba(0,0,0,.25); }