/*==================================================
    NEON BEAST IDLE — RESPONSIVE (tablet + phone)
    Loaded after layout.css / main.css / level-card.css.

    > 1200px   desktop (3 columns, unchanged)
    <= 1200px  narrower side columns
    <= 1024px  page scrolls as one document, right
               panel moves under the game
    <= 820px   phone: menu becomes a slide-in drawer
               (button top-left, js/mobileNav.js),
               coins get their own row, cards stack
==================================================*/

/* the background picture + its tint always sit BEHIND the page
   (the tint had z-index 1 and covered the cards, making them look dull) */
#bg-image{ z-index:-3; }
#bg-overlay{ z-index:-2; }
#bg-particles{ z-index:-1; }

.mobile-menu-btn,
.mobile-nav-backdrop,
.mobile-nav-close,
.mobile-tabbar{ display:none; }

/*------------------ 4 coin cards need a bit less room ------------------*/
@media (max-width:1500px){
    .header-center{ gap:10px; }
    .coin-card{ min-width:150px; }
}

/*------------------ narrower desktop ------------------*/
@media (max-width:1200px){

    #game-layout{
        grid-template-columns:240px minmax(0,1fr) 300px;
        gap:16px;
        padding:16px;
    }

    .coin-card{ min-width:130px; padding:0 12px; }

}

/*------------------ tablet ------------------*/
@media (max-width:1024px){

    html, body{ height:auto; overflow-x:hidden; }

    #app{
        width:100%;
        height:auto;
        min-height:100vh;
        overflow:visible;
    }

    #game-layout{
        position:relative;
        top:auto; bottom:auto; left:auto; right:auto;
        margin-top:84px;
        display:grid;
        grid-template-columns:230px minmax(0,1fr);
        align-items:start;
    }

    #left-sidebar{
        position:sticky;
        top:100px;
        height:calc(100vh - 116px);
    }

    #center-panel,
    #right-sidebar{
        height:auto;
        overflow:visible;
    }

    #right-sidebar{ grid-column:2; }

    #top-header{ grid-template-columns:auto minmax(0,1fr) auto; gap:12px; padding:0 16px; }
    .header-left{ width:auto; }
    .header-center{ justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
    .header-center::-webkit-scrollbar{ display:none; }
    .coin-card{ min-width:0; flex-shrink:0; }

    /* level card: the art column shrinks */
    .level-info{ margin-left:150px; }
    .level-progress{ width:calc(100% - 150px); margin-left:150px; }

}

/*------------------ phone ------------------*/
@media (max-width:820px){

    body{ -webkit-text-size-adjust:100%; }

    /* ---- header: row 1 menu | logo (center) | buttons, row 2 coins ---- */
    #top-header{
        height:auto;
        padding:8px 10px;
        padding-top:calc(8px + env(safe-area-inset-top, 0px));
        grid-template-columns:1fr auto 1fr;
        grid-template-areas:
            "menu logo right"
            "coins coins coins";
        row-gap:8px;
        column-gap:8px;
    }

    .header-left{ display:contents; }
    #mobileMenuBtn{ grid-area:menu; justify-self:start; }
    #game-logo{ grid-area:logo; justify-self:center; height:38px; }
    .header-right{ grid-area:right; justify-content:flex-end; gap:6px; min-width:0; }
    .header-center{ grid-area:coins; gap:6px; justify-content:space-between; }

    .mobile-menu-btn{
        display:inline-flex;
        flex-direction:column;
        justify-content:center;
        gap:4px;
        width:42px;
        height:42px;
        padding:0 11px;
        border-radius:12px;
        border:1px solid rgba(139,63,255,.5);
        background:rgba(20,12,38,.8);
        cursor:pointer;
    }

    .mobile-menu-btn span{
        display:block;
        height:2px;
        border-radius:2px;
        background:#fff;
        transition:transform .2s, opacity .2s;
    }

    body.mobile-nav-open .mobile-menu-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
    body.mobile-nav-open .mobile-menu-btn span:nth-child(2){ opacity:0; }
    body.mobile-nav-open .mobile-menu-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

    .coin-card{
        flex:1 1 0;
        min-width:0;
        height:40px;
        padding:0 7px;
        gap:6px;
        border-radius:10px;
    }

    .coin-card img{ width:20px; height:20px; flex-shrink:0; }
    .coin-card small{ display:none; }
    .coin-card strong{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .coin-card > div{ min-width:0; }

    .top-btn{ width:38px; height:38px; padding:0; }
    #topSyncBtn .top-sync-icon{ font-size:11px; }

    /* wallet: icon only — the name + Logout are in its dropdown */
    #walletBtn{ width:38px; height:38px; min-width:0; padding:0; justify-content:center; }
    #walletBtnText, #walletBtn .wallet-caret{ display:none; }
    .wallet-dropdown{ right:0; left:auto; min-width:190px; }
    .wallet-dropdown-address{ font-size:13px; word-break:break-all; }

    /* ---- only the picture behind the pages gets a purple tint (cards stay as they are) ---- */
    #bg-overlay{
        background:
            radial-gradient(circle at 50% 0%, rgba(110,40,220,.28), transparent 60%),
            linear-gradient(180deg, rgba(14,6,32,.62) 0%, rgba(8,4,20,.78) 100%);
    }

    /* ---- layout: one column ---- */
    #game-layout{
        display:block;
        margin-top:var(--mobile-header-h, 128px);
        padding:12px 10px calc(90px + env(safe-area-inset-bottom, 0px));
    }

    #center-panel{ padding:0; }

    #right-sidebar{
        margin-top:16px;
        padding:14px;
        border-radius:18px;
    }

    /* ---- menu drawer ---- */
    #left-sidebar{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        z-index:1200;
        width:min(290px, 84vw);
        height:100%;
        border-radius:0 20px 20px 0;
        padding:calc(18px + env(safe-area-inset-top, 0px)) 14px 18px;
        transform:translateX(-105%);
        transition:transform .25s ease;
        overflow-y:auto;
    }

    body.mobile-nav-open #left-sidebar{
        transform:none;
        box-shadow:0 0 40px rgba(0,0,0,.6);
    }

    .mobile-nav-backdrop{
        display:block;
        position:fixed;
        inset:0;
        z-index:1150;
        background:rgba(3,4,10,.6);
        backdrop-filter:blur(2px);
        opacity:0;
        pointer-events:none;
        transition:opacity .25s;
    }

    .mobile-nav-close{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        margin:0 0 12px;
        padding:10px 12px;
        border-radius:12px;
        border:1px solid rgba(139,63,255,.4);
        background:rgba(20,12,38,.85);
        color:#fff;
        font:inherit;
        font-weight:700;
        font-size:15px;
        cursor:pointer;
    }

    .mobile-nav-close b{ font-size:22px; line-height:1; font-weight:400; }

    body.mobile-nav-open .mobile-nav-backdrop{ opacity:1; pointer-events:auto; }
    body.mobile-nav-open{ overflow:hidden; }

    /* ---- level cards ---- */
    .level-card{ border-radius:18px; }
    .level-card:hover{ transform:none; }

    .level-hero{
        min-height:0;
        padding:14px 14px 14px;
        background-position:center top;
        gap:12px;
    }

    .level-card-overlay{
        background:linear-gradient(180deg, rgba(6,9,18,.35) 0%, rgba(6,9,18,.82) 55%, rgba(6,9,18,.9) 100%);
    }

    .level-top{ flex-direction:row; align-items:flex-start; gap:10px; }
    .level-info{ margin-left:0; gap:5px; }
    .level-info h2{ font-size:18px; }
    .level-tagline{ font-size:12px; max-width:none; }
    .level-income{ font-size:12px; }
    .level-income strong{ font-size:14px; }

    /* Owned / Total cost: a small column on the right */
    .level-stats{
        flex-direction:column;
        align-items:flex-end;
        gap:6px;
        flex-shrink:0;
    }

    .level-stat{ text-align:right; }
    .level-stat span{ font-size:10px; }
    .level-stat strong{ font-size:17px; }

    .level-progress{ width:100%; margin-left:0; }
    .progress-bar{ width:100%; }

    .level-actions{ flex-wrap:wrap; gap:6px; }
    .hunt-btn{ width:100%; height:38px; font-size:14px; }

    .buy-buttons{
        width:100%;
        display:grid;
        grid-template-columns:repeat(4, minmax(0,1fr));
        gap:5px;
    }

    .buy-btn{ min-width:0; height:34px; padding:0 2px; font-size:11px; gap:3px; }
    .buy-btn img, .buy-btn .ui-icon{ width:14px; height:14px; }
    .unlock-btn{ min-width:0; width:100%; height:36px; font-size:13px; }
    .level-footer{ gap:8px; }

    /* Player Stats + Materials live behind the bottom tab bar (like an app) */
    #right-sidebar{ display:none; }

    body[data-mobile-view="stats"] #center-panel,
    body[data-mobile-view="materials"] #center-panel{ display:none; }

    body[data-mobile-view="stats"] #right-sidebar,
    body[data-mobile-view="materials"] #right-sidebar{ display:block; margin-top:0; }

    body[data-mobile-view="stats"] #right-sidebar > .side-panel:not(:first-of-type){ display:none; }
    body[data-mobile-view="materials"] #right-sidebar > .side-panel:first-of-type{ display:none; }

    .mobile-tabbar{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:1100;
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        background:linear-gradient(180deg, rgba(34,14,68,.94), rgba(14,8,30,.98));
        border-top:1px solid rgba(139,63,255,.45);
        box-shadow:0 -6px 24px rgba(0,0,0,.45);
        backdrop-filter:blur(12px);
    }

    .mobile-tabbar button{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:3px;
        padding:6px 2px;
        border:none;
        border-radius:12px;
        background:none;
        color:#aeb8d6;
        font:inherit;
        font-size:11px;
        font-weight:700;
        cursor:pointer;
    }

    .mobile-tabbar img{ width:22px; height:22px; object-fit:contain; opacity:.75; }

    .tb-burger{ display:flex; flex-direction:column; justify-content:center; gap:4px; width:22px; height:22px; }
    .tb-burger b{ display:block; height:2px; border-radius:2px; background:currentColor; }

    .mobile-tabbar button.active{ color:#fff; background:rgba(124,58,237,.28); }
    .mobile-tabbar button.active img{ opacity:1; }

    .beast-chest{ bottom:calc(78px + env(safe-area-inset-bottom, 0px)) !important; }

    /* NFT pictures in popups (Blend, pack opening): side by side, not one per screen */
    .game-popup-images{ flex-wrap:wrap; gap:6px; }
    .game-popup-image{ padding:4px; border-radius:10px; }
    .game-popup-image img{ width:min(26vw, 100px); }
    .game-popup-images.single .game-popup-image img{ width:min(200px, 56vw); }
    .game-popup-image small, .game-popup-image span{ font-size:10px; }

    /* ---- pages ---- */
    .page-header h2{ font-size:22px; }

    .beast-slot-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:10px;
        padding:12px;
    }

    .beast-slot{ padding:10px 8px; min-width:0; border-radius:14px; font-size:12px; }
    .beast-slot-header{ gap:4px; flex-wrap:wrap; }
    .beast-slot-num{ font-size:14px; }
    .beast-slot-tag{ font-size:9px; padding:2px 6px; }
    .beast-slot-img{ max-width:78px; }
    .beast-slot p, .beast-slot span, .beast-slot small{ font-size:11px; }
    .beast-slot button{ font-size:11px; padding:6px 8px; min-height:0; }

    .mock-nft-card{ padding:8px; font-size:12px; }
    .mock-nft-card img{ max-height:120px; object-fit:contain; }
    .mock-nft-info strong{ font-size:13px; }
    .mock-nft-status{ font-size:11px; }

    /* page tabs: all fit in one row */
    .inventory-page-tabs,
    .rent-tabs,
    .arena-tabs{
        display:flex;
        flex-wrap:nowrap;
        gap:5px;
    }

    .inventory-page-tabs button,
    .rent-tabs button,
    .arena-tabs button{
        flex:1 1 0;
        min-width:0;
        padding:9px 4px;
        font-size:12px;
        line-height:1.2;
        white-space:normal;
        text-align:center;
    }

    .materials-grid,
    .mock-nft-grid,
    .rent-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:10px;
    }

    .shop-packs-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
    .shop-packs-grid .pack-card{ padding:10px 6px; }
    .shop-packs-grid .pack-card h4{ font-size:14px; }
    .shop-packs-grid .pack-card-sub{ font-size:11px; }
    .shop-packs-grid .pack-card button{ width:100%; padding-left:4px; padding-right:4px; }

    table{ display:block; max-width:100%; overflow-x:auto; }

    img, video, canvas{ max-width:100%; }

    /* ---- popups ---- */
    .game-popup{ padding:12px; }
    .game-popup-box{
        width:100%;
        max-width:100%;
        max-height:calc(100vh - 24px);
        overflow-y:auto;
        padding:20px 16px;
    }
    .game-popup-actions{ flex-wrap:wrap; }
    .game-popup-actions button{ flex:1 1 auto; }

    /* ---- floating things above the phone's bottom edge ---- */
    .beast-chest{
        right:calc(10px + env(safe-area-inset-right, 0px));
        bottom:calc(16px + env(safe-area-inset-bottom, 0px));
        padding:10px 12px 10px 48px;
        background:
            radial-gradient(circle at 24px 50%, rgba(255,215,106,.95) 0 10px, transparent 11px),
            linear-gradient(160deg, rgba(60,30,100,.96), rgba(20,12,36,.98));
    }

    .game-announcement{ font-size:12px; padding:6px 10px; }

}

/*------------------ small phones ------------------*/
@media (max-width:380px){

    .materials-grid,
    .mock-nft-grid,
    .rent-grid{ grid-template-columns:minmax(0,1fr); }

    .shop-packs-grid{ grid-template-columns:minmax(0,1fr); }

    #walletBtn{ max-width:112px; }
    #topSyncBtn .top-sync-icon{ font-size:11px; }

}

@media (prefers-reduced-motion:reduce){
    #left-sidebar, .mobile-nav-backdrop, .mobile-menu-btn span{ transition:none; }
}

/* presale balance card: same coin art, marked so it isn't mixed up with Beast Token */
.coin-card-presale{ border-color:rgba(255,215,106,.45) !important; }

@media (max-width:820px){
    .coin-card-presale strong::before{
        content:"Pre ";
        font-size:9px;
        font-weight:700;
        color:#ffd76a;
        letter-spacing:.3px;
    }
}