/*==================================================
    NEON BEAST IDLE
    MAIN CSS
    VERSION-MARKER: v-white-text-fix-001
==================================================*/

:root{

    --bg-dark:#070B14;

    --panel:#121B2F;

    --panel-light:#192542;

    --cyan:#00E5FF;

    --green:#00FF9D;

    --purple:#8A5CFF;

    --yellow:#FFC83D;

    --red:#FF4D73;

    --text:#FFFFFF;

    --text-light:#B8C6E3;

    --border:rgba(255,255,255,.08);

    --game-bg:url("../assets/background/scout-camp.webp");

}

/*==================================================
GENERAL
==================================================*/

body{

    color:var(--text);

    font-family:"Rajdhani","Orbitron",sans-serif;

    font-weight:600;

    background:#070B14;

    position:relative;

}

h1, h2, h3, h4, h5, h6,
.level-name,
.side-panel h2,
.hunt-btn,
.unlock-btn,
#walletBtn,
.top-header h1{

    font-family:"Orbitron","Rajdhani",sans-serif;

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:var(--game-bg);

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:-2;

    transition:0.5s;

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:rgba(7,11,20,.70);

    backdrop-filter:blur(2px);

    z-index:-1;

}

button{

    font-family:inherit;

}

img{

    display:block;

    max-width:100%;

}

/*==================================================
PANELS
==================================================*/

.side-panel{

    background:linear-gradient(160deg, rgba(50,20,90,.55), rgba(14,10,26,.88) 65%);

    border:1px solid rgba(139,63,255,.35);

    border-radius:22px;

    backdrop-filter:blur(14px);

    padding:18px;

    margin-bottom:18px;

    box-shadow:

        0 0 18px rgba(139,63,255,.14);

    transition:box-shadow .3s, border-color .3s;

}

.side-panel:hover{

    border-color:rgba(139,63,255,.55);

    box-shadow:0 0 28px rgba(139,63,255,.22);

}

.side-panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;

}

.side-panel-header h2{

    margin-bottom:0;

}

.view-link{

    color:#ff2bc2;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

    transition:.2s;

}

.view-link:hover{

    color:#fff;

}

.side-panel h2{

    font-size:14px;

    margin-bottom:0;

    color:#fff;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:800;

    text-shadow:0 0 1px #fff, 0 1px 4px rgba(0,0,0,.8);

}

/*==================================================
TEXT / LABEL POLISH
==================================================*/

.level-stat span,
.guardian-slot span,
.equipment-slot span,
.stat-item span{

    text-transform:uppercase;

    letter-spacing:.6px;

    font-size:11px;

    font-weight:600;

}

.slot-lock + span,
.equipment-slot small{

    text-transform:uppercase;

    letter-spacing:.5px;

}

.level-stat strong{

    letter-spacing:.5px;

}

/*==================================================
BUTTON POLISH
==================================================*/

.hunt-btn,
.buy-btn,
.unlock-btn,
#walletBtn{

    text-transform:uppercase;

    letter-spacing:1px;

    position:relative;

    overflow:hidden;

}

.hunt-btn::before,
.buy-btn::before,
.unlock-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.18),
        transparent 55%
    );

    pointer-events:none;

}

.hunt-btn:active,
.buy-btn:active,
.unlock-btn:active{

    filter:brightness(.92);

}

/*==================================================
HEADER BUTTONS
==================================================*/

.top-btn{

    width:56px;

    height:56px;

    border:none;

    border-radius:16px;

    background:rgba(22,32,55,.75);

    border:1px solid var(--border);

    cursor:pointer;

    transition:.25s;

}

.top-btn:hover{

    transform:translateY(-2px);

    border-color:var(--cyan);

}

.top-btn img{

    width:30px;

    height:30px;

    margin:auto;

}

/*==================================================
WALLET
==================================================*/

#walletBtn{

    height:42px;

    padding:0 18px;

    display:flex;

    align-items:center;

    gap:10px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:linear-gradient(100deg, #6B3BFF, #9333ff);

    box-shadow:0 0 16px rgba(139,44,255,.5);

    color:white;

    font-weight:700;

    font-size:13px;

}

#walletBtn img{

    width:20px;

    height:20px;

}

/*==================================================
GUARDIAN SLOTS
==================================================*/

.guardian-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.guardian-slot{

    aspect-ratio:1;

    border:none;

    border-radius:18px;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.04);

    border:2px dashed rgba(0,229,255,.25);

    color:#fff;

    transition:.25s;

}

.guardian-slot:hover{

    transform:translateY(-3px);

    border-color:#00E5FF;

    box-shadow:0 0 18px rgba(0,229,255,.25);

}

.guardian-slot.unlocked{

    border-color:#35ff96;

}

.slot-plus{

    font-size:42px;

    font-weight:700;

    color:#35ff96;

    line-height:1;

}

.slot-lock{

    font-size:34px;

    opacity:.65;

}

.guardian-slot span{

    margin-top:8px;

    font-size:13px;

    color:#B8C6E3;

}


/*==================================================
EQUIPMENT
==================================================*/

.equipment-list{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px;

    width:100%;

    box-sizing:border-box;

}

.equipment-slot{

    box-sizing:border-box;

    aspect-ratio:1;

    width:100%;

    height:auto;

    padding:8px 4px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    border:2px dashed rgba(0,229,255,.25);

    border-radius:14px;

    cursor:pointer;

    background:rgba(255,255,255,.04);

    color:#fff;

    transition:.25s;

    overflow:hidden;

}

.equipment-slot:hover{

    transform:translateY(-2px);

    border-color:#00E5FF;

    box-shadow:0 0 14px rgba(0,229,255,.25);

}

.equipment-slot img{

    width:24px;

    height:24px;

    object-fit:contain;

}

.equipment-slot span{

    flex:none;

    margin:0;

    text-align:center;

    font-size:10px;

    line-height:1.1;

}

.equipment-slot small{

    font-size:9px;

    color:#B8C6E3;

    font-weight:700;

}

.equipment-slot.unlocked{

    border-style:solid;

    border-color:#35ff96;

}

.equipment-slot.unlocked small{

    color:#35ff96;

}


/*==================================================
PLAYER STATS
==================================================*/

.player-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}

.stat-item{

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:8px 10px !important;

    min-height:52px !important;

    border-radius:12px;

    background:linear-gradient(145deg, rgba(124,44,255,.08), rgba(0,229,255,.05));

    border:1px solid rgba(255,255,255,.1);

    box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);

    transition:.25s;

}

.stat-item:hover{

    border-color:#00E5FF;

    transform:translateY(-2px);

    background:linear-gradient(145deg, rgba(124,44,255,.16), rgba(0,229,255,.12));

    box-shadow:0 0 18px rgba(0,229,255,.3), inset 0 1px 0 rgba(255,255,255,.08);

}

.player-stat-row{

    display:flex;

    align-items:center;

    gap:12px;

}

.stat-icon-box{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:rgba(0,229,255,.08);

    box-shadow:0 0 16px rgba(0,229,255,.25), inset 0 0 8px rgba(0,229,255,.15);

}

.stat-icon-box img{

    width:30px;

    height:30px;

    filter:drop-shadow(0 0 6px rgba(0,229,255,.45));

}

.stat-text{

    display:flex;

    flex-direction:column;

    gap:2px;

    min-width:0;

}

.stat-item span{

    color:#cdd6ea !important;

    font-size:11px !important;

}

.stat-item strong{

    color:#fff !important;

    font-size:13px !important;

    font-weight:700;

    white-space:nowrap;

    text-shadow:0 0 12px rgba(0,229,255,.35);

}

/*==================================================
COIN CARDS
==================================================*/

.coin-card{

    min-width:180px;

    height:64px;

    padding:0 16px;

    display:flex;

    align-items:center;

    gap:12px;

    background:rgba(18,27,47,.72);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    backdrop-filter:blur(12px);

    transition:.25s;

}

.coin-card:hover{

    transform:translateY(-2px);

    border-color:#00E5FF;

    box-shadow:0 0 20px rgba(0,229,255,.20);

}

.coin-card img{

    width:40px;

    height:40px;

    object-fit:contain;

}

.coin-card small{

    display:block;

    color:#B8C6E3;

    font-size:11px;

}

.coin-card strong{

    display:block;

    margin-top:3px;

    font-size:20px;

    color:#fff;

}


/*==================================================
BOTTOM NAVIGATION
==================================================*/

#bottom-nav{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    height:78px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    background:rgba(12,18,35,.82);

    backdrop-filter:blur(18px);

    border-top:1px solid rgba(255,255,255,.08);

    z-index:999;

}

.nav-btn{

    width:88px;

    height:62px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    background:transparent;

    color:#B8C6E3;

    transition:.25s;

}

.nav-btn img{

    width:28px;

    height:28px;

    object-fit:contain;

}

.nav-btn span{

    font-size:11px;

}

.nav-btn:hover{

    background:rgba(255,255,255,.05);

    color:#fff;

}

.nav-btn.active{

    background:rgba(0,229,255,.12);

    color:#00E5FF;

    border:1px solid rgba(0,229,255,.30);

}


/*==================================================
INVENTORY
==================================================*/

#inventoryList{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}

.inventory-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 14px;

    border-radius:14px;

    background:linear-gradient(160deg, rgba(50,20,90,.32), rgba(14,10,26,.85) 65%);

    border:1px solid rgba(139,63,255,.25);

    text-align:left;

    transition:.25s;

}

.inventory-item:hover{

    border-color:#00E5FF;

    transform:translateY(-2px);

}

.inventory-name{

    color:#fff;

    font-weight:600;

}

.inventory-qty{

    color:#fff;

    font-weight:700;

}

.inventory-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:16px;

    padding-top:14px;

    border-top:1px solid rgba(255,255,255,.08);

}

.inventory-footer span{

    color:#e8ecf5;

}

.inventory-footer strong{

    color:#fff;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:8px;

    height:8px;

}

::-webkit-scrollbar-track{

    background:#0E1527;

}

::-webkit-scrollbar-thumb{

    background:#00E5FF;

    border-radius:50px;

}

/*==================================================
POPUP
==================================================*/

.hidden{
    display:none !important;
}

.popup{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    backdrop-filter:blur(8px);

    opacity:1;

    transition:opacity .25s ease;

}

.popup.hidden{

    display:flex !important;
    opacity:0;
    pointer-events:none;

}

.popup .popup-window,
.popup .popup-box{

    transform:scale(1);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1);

}

.popup.hidden .popup-window,
.popup.hidden .popup-box{

    transform:scale(.92);

}

.popup-window{

    width:900px;

    max-width:90%;

    max-height:85vh;

    background:#111827;

    border:2px solid #00E5FF;

    border-radius:20px;

    box-shadow:0 0 40px rgba(0,229,255,.35);

    overflow:hidden;

    display:flex;

    flex-direction:column;

}

.popup-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 24px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.popup-header h2{

    color:#fff;

    margin:0;

}

#closeInventory{

    width:40px;

    height:40px;

    border:none;

    border-radius:10px;

    background:#ff3b5c;

    color:#fff;

    cursor:pointer;

    font-size:18px;

}

.popup-tabs{

    display:flex;

    gap:12px;

    padding:16px 24px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.popup-tab{

    padding:10px 18px;

    border:none;

    border-radius:12px;

    background:#1F2937;

    color:#fff;

    cursor:pointer;

}

.popup-tab.active{

    background:#00E5FF;

    color:#000;

    font-weight:700;

}

#popupContent{

    flex:1;

    overflow:auto;

    padding:24px;

}

/*==================================================
SMALL ANIMATIONS
==================================================*/

button{

    transition:.25s;

}

button:active{

    transform:scale(.96);

}

img{

    user-select:none;

    -webkit-user-drag:none;

}

/*==================================================
BACKGROUND
==================================================*/

#bg-image{

    position:fixed;
    inset:0;

    background-image:url("../assets/background/scout-camp.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:background-image .5s ease;

    z-index:0;

    pointer-events:none;
}

#bg-overlay{

    position:fixed;
    inset:0;

    background:
    linear-gradient(
        rgba(4,8,20,.12),
        rgba(4,8,20,.42)
    ),
    radial-gradient(
        circle at center,
        transparent 30%,
        rgba(0,0,0,.25)
    );

    z-index:1;

    pointer-events:none;
}

#bg-particles{

    position:fixed;
    inset:0;

    z-index:2;

    pointer-events:none;
}

.stat-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.stat-left img{

    width:24px;

    height:24px;

    object-fit:contain;

}

.nb-icon{

    width:24px;

    height:24px;

    display:block;

    flex-shrink:0;

    color:#00E5FF;

    transition:.25s;

}

.nb-icon use{

    pointer-events:none;

}

.popup-body{

    flex:1;

    display:flex;

    overflow:hidden;

}

.popup-sidebar{

    width:220px;

    background:#151F35;

    border-right:1px solid rgba(255,255,255,.08);

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.popup-menu{

    width:100%;

    height:52px;

    border:none;

    border-radius:12px;

    background:#1F2937;

    color:#fff;

    cursor:pointer;

    font-size:15px;

    transition:.25s;

}

.popup-menu:hover{

    background:#24324D;

}

.popup-menu.active{

    background:#00E5FF;

    color:#000;

    font-weight:700;

}

.popup-content{

    flex:1;

    padding:24px;

    overflow-y:auto;

}

/*==================================================
CRAFTING
==================================================*/

.craft-card{

    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);

    border:1px solid rgba(139,63,255,.30);

    border-radius:16px;

    padding:18px;

    margin-bottom:16px;

    box-shadow:0 0 16px rgba(139,63,255,.10);

    transition:.25s;

}

.craft-card:hover{

    border-color:rgba(139,63,255,.55);

    box-shadow:0 0 22px rgba(139,63,255,.20);

}

.craft-card h4{

    margin-bottom:14px;

    color:#00E5FF;

}

.craft-material{

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

}

.green{

    color:#35ff96;

}

.red{

    color:#ff5d5d;

}

.craft-btn{

    width:100%;

    margin-top:14px;

    height:40px;

    border:none;

    border-radius:10px;

    background:linear-gradient(100deg, #6B3BFF, #8b3fff);

    color:#fff;

    font-weight:700;

    font-size:13px;

    cursor:pointer;

    box-shadow:0 0 14px rgba(139,63,255,.4);

    transition:.2s;

}

.craft-btn:hover:not(:disabled){

    transform:translateY(-2px);

    box-shadow:0 0 22px rgba(139,63,255,.6);

    filter:brightness(1.1);

}

.craft-cost{

    margin-top:15px;

    margin-bottom:12px;

    color:#FFD54A;

    font-weight:700;

}

.craft-btn:disabled{

    background:#555;

    box-shadow:none;

    color:#bbb;

    cursor:not-allowed;

}

/*==================================================
EQUIP BUTTON
==================================================*/

.equip-btn{

    width:100%;

    margin-top:15px;

    height:44px;

    border:none;

    border-radius:10px;

    background:#00E5FF;

    color:#000;

    font-weight:700;

    cursor:pointer;

}

.equip-btn:hover{

    opacity:.9;

}

/*==================================================
DEV PANEL
==================================================*/

#devButton{

    position:fixed;

    right:20px;

    bottom:90px;

    width:70px;

    height:44px;

    border:none;

    border-radius:12px;

    background:#ff9800;

    color:#fff;

    font-weight:bold;

    cursor:pointer;

    z-index:999;

}

#devButton:hover{

    transform:scale(1.05);

}

.dev-window{

    width:700px;

    max-width:90%;

    max-height:80vh;

    display:flex;

    flex-direction:column;

}

#devContent{

    flex:1;

    overflow-y:auto;

    padding:25px;

}

/*==================================================
DEV BUTTONS
==================================================*/

.dev-section{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.dev-section h3{

    color:#00E5FF;

    margin-bottom:10px;

}

.dev-btn{

    height:50px;

    border:none;

    border-radius:12px;

    background:#1F2937;

    color:#fff;

    cursor:pointer;

    font-size:15px;

    transition:.25s;

}

.dev-btn:hover{

    background:#00E5FF;

    color:#000;

}

.player-stats-card{

    background:#161c2b;

    border:1px solid #2f3958;

    border-radius:12px;

    padding:15px;

    margin-bottom:18px;

}

.player-stats-card h3{

    margin:0 0 15px;

    color:#00f7ff;

}

.stat-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.stat-row:last-child{

    border-bottom:none;

}

.stat-row span{

    color:#ddd;

}

.stat-row strong{

    color:#00ff8c;

}

.weapon-stat{

    display:flex;

    justify-content:space-between;

    padding:6px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.weapon-stat strong{

    color:#00ff8c;

}

/*==============================
    HUNT TIMER
==============================*/

.hunt-timer{

    text-align:center;

    margin-bottom:0;

    order:2;

    flex-shrink:0;

    min-width:70px;

}

.hunt-timer span{

    font-size:18px;

    font-weight:700;

    color:#ffffff;

    letter-spacing:1px;

    text-shadow:0 0 12px #00e5ff;

}

/*==================================================
                GUARDIAN POPUP
==================================================*/

.guardian-option{

    padding:20px;

    margin:15px 0;

    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;

    background:#151515;

}

.guardian-option h3{

    margin-bottom:10px;

    color:#00e5ff;

}

.guardian-option p{

    margin-bottom:15px;

    color:#bbb;

}

.guardian-option button{

    width:100%;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#00e5ff;

    color:#000;

    font-weight:bold;

    cursor:pointer;

}

/*==================================
    GUARDIAN REQUIREMENTS
==================================*/

.guardian-requirements{

    margin:15px 0;

    padding:12px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:10px;

    background:#111;

}

.guardian-requirements h4{

    margin-bottom:10px;

    color:#00e5ff;

}

.req-item{

    display:flex;

    justify-content:space-between;

    margin:8px 0;

    font-size:14px;

}

.guardian-note{

    display:block;

    margin:12px 0;

    color:#999;

    font-size:12px;

    text-align:center;

}

/*==================================================
                ARENA FULLSCREEN
==================================================*/

#arenaPopup{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    background:rgba(5,8,18,.96);

    z-index:9999;

}

#arenaPopup.hidden{

    display:none;

}

#arenaPopup .popup-window{

    width:100%;

    height:100%;

    margin:0;

    border-radius:0;

    display:flex;

    flex-direction:column;

    background:#101522;

}

#arenaPopup .popup-header{

    height:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 25px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

#arenaPopup .popup-body{

    flex:1;

    display:flex;

    overflow:hidden;

}

#arenaPopup .popup-sidebar{

    width:240px;

    border-right:1px solid rgba(255,255,255,.08);

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

#arenaPopup .popup-content{

    flex:1;

    padding:30px;

    overflow-y:auto;

}

.inventory-page-tabs .arena-menu{

    flex:1;
    height:46px;
    padding:0 16px;
    border:none;
    border-radius:12px;
    background:#1F2937;
    color:#9fb3d6;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    transition:.2s;

}

.inventory-page-tabs .arena-menu.active{

    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;

}

/*==================================================
SIDEBAR NAV MENU
==================================================*/

.sidebar-nav{

    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:18px;
    padding-bottom:18px;
    border-bottom:1px solid var(--border);

}

.sidebar-nav-link{

    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    border-radius:12px;
    color:#e8ecf5 !important;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    transition:.2s;

}

.sidebar-nav-link .nav-icon{

    font-size:16px;
    width:26px;
    text-align:center;
    flex-shrink:0;

}

.sidebar-nav-link .nav-icon img{

    width:26px;
    height:26px;
    object-fit:contain;
    display:block;

}

.sidebar-nav-link:hover{

    background:linear-gradient(100deg, rgba(107,59,255,.16), rgba(139,63,255,.1));
    color:#fff;
    box-shadow:0 0 12px rgba(139,63,255,.15);

}

.sidebar-nav-link.active{

    background:linear-gradient(100deg, #6B3BFF, #8b3fff);
    border:1px solid rgba(139,63,255,.6);
    color:#fff;
    box-shadow:0 0 16px rgba(139,63,255,.4);

}

.sidebar-nav-link.active::before{

    content:"";
    position:absolute;
    left:-1px;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:60%;
    border-radius:4px;
    background:linear-gradient(180deg,#00E5FF,#7c2cff);
    box-shadow:0 0 10px #00E5FF;

}

/*==================================================
SIDEBAR PROMO CARD
==================================================*/

.sidebar-promo{

    margin-top:20px;
    padding:18px;
    border-radius:18px;
    text-align:center;
    background:linear-gradient(160deg, rgba(124,44,255,.18), rgba(0,229,255,.08));
    border:1px solid rgba(124,44,255,.35);

}

.sidebar-promo h3{

    font-family:var(--font-display,"Orbitron",sans-serif);
    font-size:15px;
    line-height:1.3;
    background:linear-gradient(90deg,#00E5FF,#7c2cff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom:6px;

}

.sidebar-promo p{

    font-size:12px;
    color:#B8C6E3;
    margin-bottom:14px;

}

.promo-play-btn{

    width:100%;
    padding:11px;
    border:none;
    border-radius:12px;
    background:linear-gradient(100deg,#7c2cff,#ff2bc2);
    color:#fff;
    font-weight:700;
    font-family:var(--font-display,"Orbitron",sans-serif);
    letter-spacing:.5px;
    cursor:pointer;
    transition:.2s;

}

.promo-play-btn:hover{

    transform:translateY(-2px);
    box-shadow:0 0 20px rgba(255,43,194,.4);

}

/*==================================================
SIDEBAR SOCIAL ICONS
==================================================*/

.sidebar-social{

    display:flex;
    justify-content:center;
    gap:16px;
    margin-top:16px;
    padding-top:16px;

}

.sidebar-social a{

    color:#B8C6E3;
    text-decoration:none;
    font-size:16px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    transition:.2s;

}

.sidebar-social a:hover{

    color:#00E5FF;
    background:rgba(0,229,255,.12);

}

/*==================================================
BOTTOM NAV TAGLINE
==================================================*/

.nav-tagline{

    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    gap:10px;
    color:#6d7a9c;
    font-family:var(--font-display,"Orbitron",sans-serif);
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;

}

/*==================================================
MY BEASTS POPUP (7 slots, currency-gated)
==================================================*/

.my-beasts-window{

    width:760px;

}

.popup-close{

    width:40px;
    height:40px;
    border:none;
    border-radius:10px;
    background:#ff3b5c;
    color:#fff;
    cursor:pointer;
    font-size:16px;

}

.my-beasts-sub{

    padding:14px 24px 0;
    color:#9fb3d6;
    font-size:13px;

}

.beast-slot-grid{

    padding:20px 24px 24px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    overflow-y:auto;

}

.beast-slot{

    padding:20px;
    border-radius:18px;
    background:linear-gradient(160deg, rgba(50,20,90,.40), rgba(14,10,26,.90) 65%);
    border:1px solid rgba(139,63,255,.30);
    box-shadow:0 0 0 1px rgba(0,0,0,.3) inset, 0 0 22px rgba(139,63,255,.12);
    min-height:230px;
    display:flex;
    flex-direction:column;
    transition:.25s;

}

.beast-slot:hover{

    border-color:rgba(139,63,255,.55);
    box-shadow:0 0 26px rgba(139,63,255,.22);
    transform:translateY(-2px);

}

.beast-slot-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;

}

.beast-slot-num{

    font-family:var(--font-display,"Orbitron",sans-serif);
    font-weight:800;
    color:#fff;
    font-size:17px;
    text-shadow:0 0 1px #fff, 0 1px 3px rgba(0,0,0,.8);

}

.beast-slot-tag{

    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
    padding:4px 10px;
    border-radius:20px;
    color:#00E5FF;
    background:rgba(0,229,255,.12);
    border:1px solid rgba(0,229,255,.30);

}

.beast-slot-tag.free{

    color:#35ff96;
    background:rgba(53,255,150,.14);
    border:1px solid rgba(53,255,150,.35);

}

.beast-slot-tag.neon{

    color:#00E5FF;
    background:rgba(0,229,255,.12);
    border:1px solid rgba(0,229,255,.30);

}

.beast-slot-tag.arena{

    color:#35ff96;
    background:rgba(53,255,150,.12);
    border:1px solid rgba(53,255,150,.32);

}

.beast-slot-tag.beast{

    color:#c58bff;
    background:rgba(139,63,255,.16);
    border:1px solid rgba(139,63,255,.40);

}

.beast-slot p{

    color:#dbe4f5;
    font-size:13px;
    margin-bottom:12px;
    text-align:center;

}

.beast-slot-empty-body{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 0 16px;
    flex:1;

}

.slot-empty-icon{

    font-size:26px;
    font-weight:800;
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#00E5FF;
    background:rgba(0,229,255,.08);
    border:2px solid rgba(0,229,255,.5);
    box-shadow:0 0 18px rgba(0,229,255,.25);

}

.beast-slot-empty-body p{

    margin-bottom:0;
    font-weight:700;
    color:#fff;

}

.beast-slot-hint{

    font-size:11px;
    color:#9fb3d6;
    text-align:center;

}

.beast-slot .craftGuardianBtn{

    width:100%;
    padding:12px;
    border:none;
    border-radius:12px;
    background:linear-gradient(100deg,#6B3BFF,#00C6FF);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
    margin-top:auto;

}

.beast-slot .craftGuardianBtn:hover{

    transform:translateY(-2px);
    box-shadow:0 0 18px rgba(0,229,255,.4);

}

.guardianAssign label{

    display:block;
    font-size:11px;
    color:#9fb3d6;
    margin-bottom:6px;
    margin-top:10px;

}

.guardianAssign select{

    width:100%;
    padding:8px;
    border-radius:8px;
    background:#0f1420;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);

}

.locked-slot{

    background:linear-gradient(160deg, rgba(50,20,90,.30), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.18);

}

.beast-slot-locked-body{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:14px 0;
    flex:1;

}

.slot-lock-icon{

    font-size:26px;
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,200,61,.10);
    border:2px solid rgba(255,200,61,.45);
    box-shadow:0 0 16px rgba(255,200,61,.20);
    opacity:.9;

}

.unlockSlotBtn{

    width:100%;
    padding:11px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
    margin-top:auto;

}

.unlockSlotBtn:hover{

    border-color:#00E5FF;
    background:rgba(0,229,255,.10);

}

/*==================================================
INVENTORY ICON
==================================================*/

.inventory-icon{

    width:46px;
    height:46px;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;
    background:rgba(0,229,255,.08);
    box-shadow:0 0 16px rgba(0,229,255,.25), inset 0 0 8px rgba(0,229,255,.15);

    font-size:24px;
    line-height:1;

}

.inventory-icon img{

    width:32px;
    height:32px;
    object-fit:contain;

}

.inventory-text{

    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;

}

.inventory-name{

    color:#fff;
    font-size:13px;
    font-weight:600;

}

.inventory-qty{

    color:#fff;
    font-size:13px;
    font-weight:700;

}

/*==================================================
UI ICON SYSTEM (inline SVG, neon glow)
==================================================*/

.ui-icon{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    flex-shrink:0;

}

.ui-icon svg,
.ui-icon img{

    width:100%;
    height:100%;
    display:block;
    object-fit:contain;

}

/* default muted gray, glows cyan on active/hover contexts */

.sidebar-nav-link .ui-icon{

    color:#7c8bab;
    filter:drop-shadow(0 0 0 transparent);
    transition:.2s;

}

.sidebar-nav-link:hover .ui-icon{

    color:#00E5FF;
    filter:drop-shadow(0 0 6px rgba(0,229,255,.55));

}

.sidebar-nav-link.active .ui-icon{

    color:#00E5FF;
    filter:drop-shadow(0 0 8px rgba(0,229,255,.7));

}

.buy-btn .ui-icon,
.hunt-btn .ui-icon{

    color:#fff;
    width:24px;
    height:24px;
    filter:drop-shadow(0 0 6px rgba(255,255,255,.5));

}

.top-btn .ui-icon{

    width:22px;
    height:22px;
    color:#00E5FF;

}

.auto-connect-status{

    font-size:12px;
    color:#35ff96;
    margin-top:8px;
    text-align:center;

}

/*==================================================
STAT MINI PROGRESS BAR (Level / XP boxes)
==================================================*/

.stat-mini-bar{

    width:100%;
    height:9px;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
    margin-top:6px;

}

.stat-mini-fill{

    height:100%;
    width:0%;
    border-radius:10px;
    transition:width .3s ease;

}

.stat-mini-fill.level-fill{

    background:linear-gradient(90deg,#35ff96,#00E5FF);
    box-shadow:0 0 10px rgba(0,229,255,.6);

}

.stat-mini-fill.xp-fill{

    background:linear-gradient(90deg,#7c2cff,#ff2bc2);
    box-shadow:0 0 10px rgba(255,43,194,.5);

}

/*==================================================
MY BEASTS — PAGE VIEW (was popup)
==================================================*/

#myBeastsPage,
#equipmentPage,
#craftingPage{

    background:linear-gradient(160deg, rgba(45,18,85,.55), rgba(8,10,20,.92) 60%);

    border-radius:24px;

    border:1px solid rgba(139,63,255,.28);

    box-shadow:0 0 26px rgba(139,63,255,.10);

    padding:24px;

    height:100%;

    overflow-y:auto;

}

#myBeastsPage.hidden{

    display:none;

}

#myBeastsPage .page-header{

    margin-bottom:20px;

}

#myBeastsPage .page-header h2{

    font-family:var(--font-display,"Orbitron",sans-serif);
    font-size:24px;
    color:#fff;
    margin-bottom:6px;

}

.assign-status{

    font-size:12px;
    color:#9fb3d6;
    text-align:center;
    margin-bottom:8px;

}

.equip-controls{

    display:flex;
    gap:8px;

}

.equip-controls select{

    flex:1;
    padding:8px;
    border-radius:8px;
    background:#0f1420;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    font-size:12px;

}

.equipGuardianBtn{

    padding:8px 14px;
    border:none;
    border-radius:8px;
    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
    white-space:nowrap;

}

.equipGuardianBtn:hover{

    transform:translateY(-1px);
    box-shadow:0 0 14px rgba(0,229,255,.35);

}

.unequipGuardianBtn{

    width:100%;
    padding:10px;
    border:none;
    border-radius:8px;
    background:rgba(255,59,92,.14);
    border:1px solid rgba(255,59,92,.4);
    color:#ff6b85;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
    transition:.2s;

}

.unequipGuardianBtn:hover{

    background:rgba(255,59,92,.24);

}

.wallet-guardians-section{

    margin-top:24px;
    padding:20px;
    border-radius:16px;
    background:linear-gradient(160deg, rgba(50,20,90,.30), rgba(14,10,26,.85) 65%);
    border:1px dashed rgba(139,63,255,.30);
    text-align:center;

}

.wallet-guardians-section h3{

    color:#fff;
    font-size:16px;
    margin-bottom:6px;

}

.wallet-guardians-note{

    color:#7f94ba;
    font-size:13px;

}

/*==================================================
YOUR GUARDIANS LIST (below the 7 slots)
==================================================*/

.guardians-list-section{

    margin-top:24px;
    padding:20px;
    border-radius:16px;
    background:linear-gradient(160deg, rgba(50,20,90,.32), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.28);

}

.guardians-list-section h3{

    color:#fff;
    font-size:16px;
    margin-bottom:14px;

}

#guardiansListContainer{

    display:flex;
    flex-direction:column;
    gap:10px;

}

.guardians-list-empty{

    color:#7f94ba;
    font-size:13px;
    text-align:center;
    padding:10px 0;

}

.guardian-list-item{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 16px;
    border-radius:12px;
    background:linear-gradient(160deg, rgba(50,20,90,.32), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.25);

}

.guardian-list-info{

    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
    min-width:0;

}

.guardian-list-info strong{

    color:#fff;
    font-size:14px;

}

.guardian-list-info span{

    color:#9fb3d6;
    font-size:12px;

}

.guardian-equip-btn{

    padding:9px 18px;
    border:none;
    border-radius:10px;
    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
    white-space:nowrap;

}

.guardian-equip-btn:hover{

    transform:translateY(-1px);
    box-shadow:0 0 14px rgba(0,229,255,.35);

}

.guardian-equip-btn:disabled{

    opacity:.4;
    cursor:not-allowed;

}

/*==========================================
SLOT-PICK MINI POPUP (choose empty slot)
==========================================*/

.slot-pick-row{

    display:flex;
    align-items:center;
    gap:8px;

}

.slot-pick-row select{

    padding:8px;
    border-radius:8px;
    background:#0f1420;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    font-size:12px;

}

.slot-pick-confirm-btn{

    padding:8px 14px;
    border:none;
    border-radius:8px;
    background:linear-gradient(100deg,#35ff96,#00E5FF);
    color:#04140c;
    font-weight:700;
    font-size:12px;
    cursor:pointer;

}

.slot-pick-cancel-btn{

    padding:8px 10px;
    border:none;
    border-radius:8px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:12px;
    cursor:pointer;

}

/*==================================================
TEST MODE — MOCK NFT GRID
==================================================*/

.test-mode-badge{

    display:inline-block;
    margin-left:10px;
    padding:2px 10px;
    border-radius:20px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
    color:#ffcc33;
    background:rgba(255,204,51,.14);
    border:1px solid rgba(255,204,51,.4);
    vertical-align:middle;

}

.mock-nft-grid{

    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:14px;

}

.mock-nft-card{

    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:12px;
    border-radius:14px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);
    border:2px solid rgba(139,63,255,.30);
    box-shadow:0 0 16px rgba(139,63,255,.10);
    text-align:center;
    transition:.25s;

}

.mock-nft-card:hover{

    border-color:rgba(139,63,255,.55);
    box-shadow:0 0 22px rgba(139,63,255,.20);
    transform:translateY(-2px);

}

.mock-nft-card img{

    width:100%;
    max-width:150px;
    border-radius:10px;

}

.mock-nft-info{

    display:flex;
    flex-direction:column;
    gap:2px;

}

.mock-nft-info strong{

    color:#fff;
    font-size:13px;

}

.mock-nft-rarity{

    font-size:11px;
    font-weight:700;

}

.mock-nft-status{

    font-size:11px;
    color:#9fb3d6;

}

.mock-equip-btn,
.mock-unequip-btn{

    width:100%;
    padding:8px;
    border:none;
    border-radius:8px;
    font-weight:700;
    font-size:12px;
    cursor:pointer;

}

.mock-equip-btn{

    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;

}

.mock-unequip-btn{

    background:rgba(255,59,92,.14);
    border:1px solid rgba(255,59,92,.4);
    color:#ff6b85;

}

/* rarity border + glow colors */

.rarity-common{ border-color:#B0B8C4; box-shadow:0 0 12px rgba(176,184,196,.25); }
.rarity-common .mock-nft-rarity{ color:#B0B8C4; }

.rarity-uncommon{ border-color:#35ff96; box-shadow:0 0 12px rgba(53,255,150,.3); }
.rarity-uncommon .mock-nft-rarity{ color:#35ff96; }

.rarity-rare{ border-color:#00c8ff; box-shadow:0 0 14px rgba(0,200,255,.35); }
.rarity-rare .mock-nft-rarity{ color:#00c8ff; }

.rarity-epic{ border-color:#a259ff; box-shadow:0 0 14px rgba(162,89,255,.4); }
.rarity-epic .mock-nft-rarity{ color:#a259ff; }

.rarity-legendary{ border-color:#ffcc33; box-shadow:0 0 16px rgba(255,204,51,.45); }
.rarity-legendary .mock-nft-rarity{ color:#ffcc33; }

.rarity-mythic{ border-color:#ff7a1a; box-shadow:0 0 18px rgba(255,122,26,.5); }
.rarity-mythic .mock-nft-rarity{ color:#ff7a1a; }

.rarity-ultimate{ border-color:#ff3b5c; box-shadow:0 0 20px rgba(255,59,92,.55); }
.rarity-ultimate .mock-nft-rarity{ color:#ff3b5c; }

/*==================================================
BEAST SLOT / GUARDIAN LIST — IMAGE DISPLAY
==================================================*/

.beast-slot-img{

    display:none;
    width:100%;
    max-width:110px;
    margin:0 auto 8px;
    border-radius:10px;

}

.guardian-list-img{

    width:44px;
    height:44px;
    border-radius:8px;
    object-fit:cover;
    flex-shrink:0;

}

.glist-rarity{

    font-size:10px;
    font-weight:700;
    color:#ffcc33;
    margin-left:4px;

}

/*==================================================
ADD GUARDIAN — CHOICE MENU (Craft or pick NFT)
==================================================*/

.add-guardian-menu{

    margin-top:10px;
    padding:12px;
    border-radius:10px;
    background:linear-gradient(160deg, rgba(50,20,90,.32), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.28);

}

.add-guardian-craft-btn{

    width:100%;
    padding:9px;
    border:none;
    border-radius:8px;
    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;
    font-weight:700;
    font-size:12px;
    cursor:pointer;

}

.add-guardian-nft-label{

    margin:10px 0 6px;
    font-size:11px;
    color:#9fb3d6;
    text-align:center;

}

.add-guardian-nft-row{

    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;

}

.add-guardian-nft-thumb{

    width:40px;
    height:52px;
    object-fit:cover;
    border-radius:6px;
    border:2px solid rgba(255,255,255,.2);
    cursor:pointer;
    transition:.2s;

}

.add-guardian-nft-thumb:hover{

    border-color:#00E5FF;
    transform:translateY(-2px);

}

/*==================================================
FREE BEAST CLAIM BANNER (Level 1, after 100 hunts)
==================================================*/

.free-beast-banner{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 16px;
    margin-bottom:12px;
    border-radius:12px;
    background:linear-gradient(100deg, rgba(53,255,150,.14), rgba(0,229,255,.10));
    border:1px solid rgba(53,255,150,.4);
    color:#fff;
    font-size:13px;

}

.claimFreeBeastBtn{

    padding:9px 16px;
    border:none;
    border-radius:10px;
    background:linear-gradient(100deg,#35ff96,#00E5FF);
    color:#04140c;
    font-weight:700;
    font-size:12px;
    white-space:nowrap;
    cursor:pointer;

}

.claimFreeBeastBtn:hover{

    transform:translateY(-1px);
    box-shadow:0 0 16px rgba(53,255,150,.45);

}

.onchain-only-note{

    font-size:11px;
    color:#ffcc33;
    text-align:center;
    padding:8px 4px;
    background:rgba(255,204,51,.08);
    border:1px dashed rgba(255,204,51,.3);
    border-radius:8px;

}

/*==================================================
INVENTORY PAGE
==================================================*/

#inventoryPage.hidden{

    display:none;

}

#inventoryPage{

    background:linear-gradient(160deg, rgba(45,18,85,.55), rgba(8,10,20,.92) 60%);
    border-radius:24px;
    border:1px solid rgba(139,63,255,.28);
    box-shadow:0 0 26px rgba(139,63,255,.10);
    padding:24px;
    height:100%;
    overflow-y:auto;

}

.inventory-page-body{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.inventory-page-tabs{

    display:flex;
    gap:10px;

}

.inventory-page-tabs .popup-menu{

    width:auto;
    flex:1;
    height:44px;

}

.inventory-page-content{

    min-height:200px;

}

.materials-tab-header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;

}

.materials-tab-header h3{

    color:#fff;
    font-size:18px;

}

.materials-capacity{

    color:#35ff96;
    font-weight:700;
    font-size:13px;

}

.materials-grid{

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:12px;

}

/*==================================================
CRAFTING GRID — 3 columns per row
==================================================*/

#craftingList{

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;

}

@media (max-width: 900px){

    #craftingList{

        grid-template-columns:repeat(2, 1fr);

    }

}

/*==================================================
MATERIALS — CAP CONTROLS / FULL STATE
==================================================*/

.materials-cap-controls{

    display:flex;
    align-items:center;
    gap:12px;

}

.upgrade-storage-btn{

    padding:6px 12px;
    border:none;
    border-radius:8px;
    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;
    font-weight:700;
    font-size:11px;
    cursor:pointer;
    white-space:nowrap;

}

.upgrade-storage-btn:hover{

    transform:translateY(-1px);
    box-shadow:0 0 12px rgba(0,229,255,.35);

}

.inventory-item.material-full{

    border-color:rgba(255,80,80,.5);
    background:rgba(255,80,80,.06);

}

.inventory-item.material-full .inventory-qty{

    color:#ff6b6b;

}

/*==================================================
INVENTORY PAGE — 3-TAB SYSTEM
==================================================*/

.inv-tab-btn{

    flex:1;
    height:46px;
    padding:0 20px;
    border:none;
    border-radius:12px;
    background:#1F2937;
    color:#9fb3d6;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition:.2s;

}

.inv-tab-btn.active{

    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;

}

.inv-tab-panel.hidden{

    display:none;

}

.inv-subheading{

    color:#9fb3d6;
    font-size:14px;
    margin:18px 0 10px;
    text-transform:uppercase;
    letter-spacing:.5px;

}

.inv-subheading:first-child{

    margin-top:16px;

}

.inv-nft-thumb{

    width:46px;
    height:46px;
    border-radius:8px;
    object-fit:cover;
    flex-shrink:0;

}

/*==================================================
BOSS BATTLE UI — Weekly / Monthly
==================================================*/

.boss-battle-card{

    max-width:420px;
    margin:20px auto 0;
    padding:28px;
    border-radius:20px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.88) 65%);
    border:1px solid rgba(139,63,255,.30);
    text-align:center;

}

.boss-portrait-wrap{

    position:relative;
    width:160px;
    height:160px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;

}

.boss-portrait{

    font-size:96px;
    line-height:1;
    filter:drop-shadow(0 0 24px rgba(255,80,80,.5));

}

.boss-portrait.monthly{

    filter:drop-shadow(0 0 24px rgba(124,44,255,.6));

}

.boss-hit-flash{

    position:absolute;
    inset:0;
    z-index:4;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.6), transparent 70%);
    opacity:0;
    pointer-events:none;

}

.boss-flash-active{

    animation:bossFlash .35s ease-out;

}

@keyframes bossFlash{

    0%{ opacity:.9; }
    100%{ opacity:0; }

}

.boss-shake{

    animation:bossImpactPulse .35s ease-out;

}

@keyframes bossImpactPulse{

    0%{ transform:scale(1); filter:brightness(1) saturate(1); }
    30%{ transform:scale(.94); filter:brightness(1.5) saturate(1.6) drop-shadow(0 0 30px rgba(255,60,60,.8)); }
    100%{ transform:scale(1); filter:brightness(1) saturate(1); }

}

.boss-damage-number{

    position:absolute;
    top:20%;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
    color:#ff5050;
    font-weight:800;
    font-size:26px;
    text-shadow:0 0 10px rgba(255,80,80,.8), 0 2px 4px rgba(0,0,0,.6);
    pointer-events:none;
    animation:bossDamageFloat 1s ease-out forwards;

}

@keyframes bossDamageFloat{

    0%{ opacity:0; transform:translate(-50%, 10px) scale(.8); }
    15%{ opacity:1; transform:translate(-50%, -10px) scale(1.15); }
    100%{ opacity:0; transform:translate(-50%, -70px) scale(1); }

}

.boss-name{

    color:#fff;
    font-size:22px;
    margin-bottom:4px;

}

.boss-tier{

    color:#9fb3d6;
    font-size:13px;
    margin-bottom:18px;

}

.boss-hp-bar-wrap{

    margin-bottom:20px;

}

.boss-hp-bar{

    width:100%;
    height:18px;
    border-radius:20px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    margin-bottom:8px;

}

.boss-hp-fill{

    height:100%;
    border-radius:20px;
    background:linear-gradient(90deg,#ff5050,#ff9a3d);
    transition:width .6s cubic-bezier(.3,.8,.4,1);

}

.boss-hp-fill.monthly{

    background:linear-gradient(90deg,#7c2cff,#00E5FF);

}

.boss-hp-text{

    font-size:13px;
    color:#dbe4f5;
    font-weight:700;

}

.boss-attack-btn{

    width:100%;
    font-size:15px;

}

.boss-defeated-msg{

    color:#35ff96;
    font-weight:700;
    font-size:14px;
    padding:12px;
    background:rgba(53,255,150,.1);
    border-radius:10px;
    border:1px solid rgba(53,255,150,.3);

}

#arenaPage.hidden{

    display:none;

}

#arenaPage{

    background:linear-gradient(160deg, rgba(45,18,85,.55), rgba(8,10,20,.92) 60%);
    border-radius:24px;
    border:1px solid rgba(139,63,255,.28);
    box-shadow:0 0 26px rgba(139,63,255,.10);
    padding:24px;
    height:100%;
    overflow-y:auto;

}

/*==================================================
BOSS BATTLE — COMPACT LAYOUT (Weekly / Monthly)
==================================================*/

.boss-card-compact{

    max-width:620px;
    margin:0 auto;
    padding:20px;
    text-align:center;

}

.boss-portrait-wrap{

    position:relative;
    width:260px;
    height:325px;
    margin:0 auto 4px;
    display:flex;
    align-items:center;
    justify-content:center;

}

.boss-clickable{

    cursor:pointer;
    transition:transform .15s;

}

.boss-clickable:hover{

    transform:scale(1.04);

}

.boss-clickable:active{

    transform:scale(.97);

}

.boss-portrait-img{

    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 0 26px rgba(255,140,30,.5));
    pointer-events:none;
    user-select:none;
    position:relative;
    z-index:2;

}

.boss-name-compact{

    color:#fff;
    font-size:18px;
    margin:4px 0 2px;

}

.boss-tier-inline{

    color:#9fb3d6;
    font-size:12px;
    font-weight:500;
    margin-left:6px;

}

.boss-stat-line{

    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    font-size:12px;
    color:#9fb3d6;
    margin:8px 0;

}

.boss-stat-line strong{

    color:#fff;

}

.boss-hp-bar{

    width:100%;
    height:14px;
    border-radius:20px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    margin:6px 0;

}

.boss-tap-hint{

    font-size:12px;
    color:#35ff96;
    font-weight:700;
    margin:6px 0 4px;

}

/* floating crystal particles — always animating */

.boss-float-crystals{

    position:absolute;
    inset:0;
    pointer-events:none;

}

.fc{

    position:absolute;
    color:#ffb545;
    text-shadow:0 0 10px rgba(255,150,30,.8);
    font-size:14px;
    opacity:.85;

}

.fc1{ top:6%; left:4%; animation:crystalFloat1 3.2s ease-in-out infinite; }
.fc2{ top:14%; right:2%; font-size:11px; animation:crystalFloat2 2.6s ease-in-out infinite; }
.fc3{ bottom:10%; left:0%; font-size:10px; animation:crystalFloat3 3.6s ease-in-out infinite; }
.fc4{ bottom:4%; right:6%; animation:crystalFloat1 2.9s ease-in-out infinite reverse; }

@keyframes crystalFloat1{

    0%,100%{ transform:translateY(0) rotate(0deg); opacity:.85; }
    50%{ transform:translateY(-10px) rotate(15deg); opacity:1; }

}

@keyframes crystalFloat2{

    0%,100%{ transform:translateY(0) rotate(0deg); opacity:.7; }
    50%{ transform:translateY(8px) rotate(-12deg); opacity:1; }

}

@keyframes crystalFloat3{

    0%,100%{ transform:translate(0,0) rotate(0deg); opacity:.6; }
    50%{ transform:translate(6px,-8px) rotate(20deg); opacity:1; }

}

/* milestone strip — compact horizontal pips */

.milestone-block{

    margin:14px 0;

}

.milestone-heading{

    color:#9fb3d6;
    font-size:13px;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:.5px;

}

.milestone-strip{

    display:flex;
    justify-content:space-between;
    gap:6px;

}

.milestone-pip{

    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:6px 2px;
    border-radius:8px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    font-size:10px;
    color:#7f94ba;

}

.milestone-pip.achieved{

    background:rgba(53,255,150,.1);
    border-color:rgba(53,255,150,.4);
    color:#35ff96;

}

.milestone-pip-icon{

    font-size:12px;

}

.milestone-pip-pct{

    font-weight:700;

}

.milestone-pip-reward{

    font-size:9px;
    opacity:.8;

}

/*==================================================
BOSS CRYSTAL ORBIT — real cropped crystal sprites,
independently floating around the boss
==================================================*/

.boss-crystal-orbit{

    position:absolute;
    left:-140px;
    right:-140px;
    top:-10px;
    bottom:-10px;
    z-index:3;
    pointer-events:none;

}

.orbit-crystal{

    position:absolute;
    filter:drop-shadow(0 0 8px currentColor);
    opacity:.92;

}

.oc1{ width:11%; left:12%; top:-4%;  animation:orbitFloatA 3.4s ease-in-out infinite; }
.oc2{ width:9%;  left:38%; top:-9%;  animation:orbitFloatB 2.9s ease-in-out infinite; }
.oc3{ width:9%;  left:62%; top:-9%;  animation:orbitFloatC 3.8s ease-in-out infinite; }
.oc4{ width:11%; left:82%; top:-4%;  animation:orbitFloatA 3.1s ease-in-out infinite reverse; }
.oc5{ width:12%; left:-4%; top:34%;  animation:orbitFloatB 2.6s ease-in-out infinite; }
.oc6{ width:12%; left:96%; top:34%;  animation:orbitFloatC 3.3s ease-in-out infinite reverse; }
.oc7{ width:8%;  left:4%;  top:80%;  animation:orbitFloatA 2.7s ease-in-out infinite; }
.oc8{ width:8%;  left:90%; top:80%;  animation:orbitFloatB 3.6s ease-in-out infinite reverse; }

@keyframes orbitFloatA{

    0%,100%{ transform:translateY(0) rotate(0deg); opacity:.85; }
    50%{ transform:translateY(-12px) rotate(10deg); opacity:1; }

}

@keyframes orbitFloatB{

    0%,100%{ transform:translateY(0) rotate(0deg); opacity:.8; }
    50%{ transform:translateY(9px) rotate(-9deg); opacity:1; }

}

@keyframes orbitFloatC{

    0%,100%{ transform:translate(0,0) rotate(0deg); opacity:.75; }
    50%{ transform:translate(5px,-8px) rotate(14deg); opacity:1; }

}

/*==================================================
FORGE PAGE
==================================================*/

#forgePage.hidden,
#blendPage.hidden,
#questsPage.hidden,
#boostsPage.hidden,
#referralsPage.hidden,
#rentPage.hidden{ display:none; }

#forgePage,
#blendPage,
#questsPage,
#boostsPage,
#referralsPage,
#rentPage{

    background:linear-gradient(160deg, rgba(45,18,85,.55), rgba(8,10,20,.92) 60%);
    border-radius:24px;
    border:1px solid rgba(139,63,255,.28);
    box-shadow:0 0 26px rgba(139,63,255,.10);
    padding:24px;
    height:100%;
    overflow-y:auto;

}

.forge-tab-btn,
.blend-tab-btn,
.rent-tab-btn{

    flex:1;
    height:46px;
    padding:0 20px;
    border:none;
    border-radius:12px;
    background:#1F2937;
    color:#9fb3d6;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition:.2s;

}

.forge-tab-btn.active,
.blend-tab-btn.active,
.rent-tab-btn.active{

    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;

}

.forge-body{

    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:16px;
    margin-top:16px;

}

.forge-item-list{

    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:520px;
    overflow-y:auto;

}

.forge-list-item{

    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:12px;
    background:linear-gradient(160deg, rgba(50,20,90,.30), rgba(14,10,26,.82) 65%);
    border:1px solid rgba(139,63,255,.25);
    cursor:pointer;
    transition:.15s;

}

.forge-list-item:hover{

    border-color:rgba(0,229,255,.4);

}

.forge-list-item.selected{

    background:rgba(124,44,255,.14);
    border-color:rgba(124,44,255,.6);

}

.forge-list-item img{

    width:40px;
    height:40px;
    border-radius:8px;
    object-fit:cover;

}

.forge-list-text{

    display:flex;
    flex-direction:column;
    gap:2px;

}

.forge-list-text strong{

    color:#fff;
    font-size:13px;

}

.forge-list-text span{

    color:#9fb3d6;
    font-size:11px;

}

.forge-detail-panel{

    padding:20px;
    border-radius:16px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.30);
    box-shadow:0 0 16px rgba(139,63,255,.10);

}

.forge-detail-header{

    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;

}

.forge-detail-img{

    width:64px;
    height:64px;
    border-radius:10px;
    object-fit:cover;

}

.forge-detail-header h3{

    color:#fff;
    font-size:17px;
    margin-bottom:2px;

}

.forge-detail-rarity{

    color:#ffcc33;
    font-size:12px;
    font-weight:700;

}

.forge-level-row{

    display:flex;
    justify-content:space-between;
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    font-size:13px;
    color:#9fb3d6;

}

.forge-level-row strong{

    color:#fff;

}

.forge-req-block{

    margin:14px 0;
    padding:12px;
    border-radius:10px;
    background:linear-gradient(160deg, rgba(50,20,90,.28), rgba(14,10,26,.80) 65%);

}

.forge-req-row{

    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:#35ff96;
    padding:4px 0;

}

.forge-req-row.insufficient{

    color:#ff6b6b;

}

.forge-risk-note{

    font-size:12px;
    color:#ffcc33;
    margin-bottom:12px;

}

.forge-success-msg{

    color:#35ff96;
    font-weight:700;
    margin-top:10px;
    text-align:center;

}

.forge-fail-msg{

    color:#ff6b6b;
    font-weight:700;
    margin-top:10px;
    text-align:center;

}

/*==================================================
SHOP PAGE
==================================================*/

#shopPage.hidden{ display:none; }

#shopPage{

    background:linear-gradient(160deg, rgba(45,18,85,.55), rgba(8,10,20,.92) 60%);
    border-radius:24px;
    border:1px solid rgba(139,63,255,.28);
    box-shadow:0 0 26px rgba(139,63,255,.10);
    padding:24px;
    height:100%;
    overflow-y:auto;

}

.shop-tab-btn{

    flex:1;
    height:46px;
    padding:0 20px;
    border:none;
    border-radius:12px;
    background:#1F2937;
    color:#9fb3d6;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition:.2s;

}

.shop-tab-btn.active{

    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;

}

.shop-tab-panel.hidden{ display:none; }

.shop-tab-panel{ margin-top:16px; }

.shop-pack-icon{

    font-size:48px;
    text-align:center;
    margin-bottom:6px;

}

/*==================================================
EXCHANGE PAGE
==================================================*/

#exchangePage.hidden{ display:none; }

#exchangePage{

    background:linear-gradient(160deg, rgba(45,18,85,.55), rgba(8,10,20,.92) 60%);
    border-radius:24px;
    border:1px solid rgba(139,63,255,.28);
    box-shadow:0 0 26px rgba(139,63,255,.10);
    padding:24px;
    height:100%;
    overflow-y:auto;

}

.exchange-grid{

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:16px;
    margin-top:16px;

}

.exchange-card{

    padding:20px;
    border-radius:16px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.30);
    box-shadow:0 0 16px rgba(139,63,255,.10);
    transition:.25s;

}

.exchange-card:hover{

    border-color:rgba(139,63,255,.55);
    box-shadow:0 0 22px rgba(139,63,255,.20);
    transform:translateY(-2px);

}

.exchange-card h3{

    color:#fff;
    font-size:15px;
    margin-bottom:8px;

}

.exchange-rate{

    color:#9fb3d6;
    font-size:12px;
    margin-bottom:14px;

}

.exchange-badge{

    display:inline-block;
    margin-left:6px;
    padding:2px 8px;
    border-radius:10px;
    background:rgba(255,80,80,.15);
    color:#ff6b6b;
    font-size:10px;
    font-weight:700;

}

.exchange-input{

    width:100%;
    padding:10px;
    border-radius:10px;
    background:#0f1420;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    font-size:13px;
    margin-bottom:10px;

}

.exchange-preview{

    color:#35ff96;
    font-size:12px;
    font-weight:700;
    margin-bottom:12px;

}

.exchange-note{

    font-size:11px;
    color:#ffcc33;
    margin-top:10px;
}

.exchange-onchain-card{

    border-color:rgba(124,44,255,.35);

}

.exchange-onchain-row{

    display:flex;
    gap:10px;
    margin-bottom:10px;

}

.exchange-onchain-row .craft-btn{

    flex:1;

}

/*==================================================
PRESTIGE BANNER (Level 7, once unlocked)
==================================================*/

.prestige-banner{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 16px;
    margin-bottom:12px;
    border-radius:12px;
    background:linear-gradient(100deg, rgba(255,204,51,.14), rgba(124,44,255,.14));
    border:1px solid rgba(255,204,51,.4);
    color:#fff;
    font-size:13px;

}

.openPrestigeBtn{

    padding:9px 16px;
    border:none;
    border-radius:10px;
    background:linear-gradient(100deg,#ffcc33,#7c2cff);
    color:#04140c;
    font-weight:700;
    font-size:12px;
    white-space:nowrap;
    cursor:pointer;

}

.openPrestigeBtn:hover{

    transform:translateY(-1px);
    box-shadow:0 0 16px rgba(255,204,51,.45);

}

/*==================================================
LEADERBOARDS PAGE
==================================================*/

#leaderboardsPage.hidden{ display:none; }

#leaderboardsPage{

    background:linear-gradient(160deg, rgba(45,18,85,.55), rgba(8,10,20,.92) 60%);
    border-radius:24px;
    border:1px solid rgba(139,63,255,.28);
    box-shadow:0 0 26px rgba(139,63,255,.10);
    padding:24px;
    height:100%;
    overflow-y:auto;

}

.lb-tab-btn{

    flex:1;
    height:46px;
    padding:0 16px;
    border:none;
    border-radius:12px;
    background:#1F2937;
    color:#9fb3d6;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    transition:.2s;

}

.lb-tab-btn.active{

    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;

}

.leaderboard-list{

    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:12px;

}

.leaderboard-row{

    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 16px;
    border-radius:12px;
    background:linear-gradient(160deg, rgba(50,20,90,.30), rgba(14,10,26,.82) 65%);
    border:1px solid rgba(139,63,255,.25);

}

.leaderboard-row.leaderboard-you{

    background:rgba(53,255,150,.1);
    border-color:rgba(53,255,150,.5);

}

.leaderboard-rank{

    width:36px;
    font-weight:800;
    color:#ffcc33;
    font-size:14px;

}

.leaderboard-name{

    flex:1;
    color:#fff;
    font-weight:700;
    font-size:13px;

}

.leaderboard-sub{

    color:#9fb3d6;
    font-size:11px;
    margin-right:10px;

}

.leaderboard-value{

    color:#35ff96;
    font-weight:700;
    font-size:13px;

}

.free-beast-progress{

    font-size:12px;
    color:#9fb3d6;
    margin-bottom:10px;

}

.shop-section-heading{

    color:#fff;
    font-size:15px;
    margin:18px 0 10px;

}

.shop-section-heading:first-of-type{

    margin-top:4px;

}

/*==================================================
    LOGIN GATE
==================================================*/

#loginGate{

    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    /* solid: nothing of the game shows through behind the gate */
    background:radial-gradient(circle at 50% 40%, #1e0c38 0%, #06080f 70%);
    overflow:hidden;
    overscroll-behavior:contain;

}

#loginGate.hidden{

    display:none;

}

/* page can't scroll while the gate is up */
html.gate-lock,
html.gate-lock body{

    overflow:hidden !important;
    height:100%;
    touch-action:none;

}

/* returning player: only "Loading..." while the wallet restores */
.login-gate-loading{

    display:none;
    flex-direction:column;
    align-items:center;
    gap:12px;
    color:#c9d3ea;
    font-size:14px;

}

#loginGate.checking .login-gate-loading{ display:flex; }
#loginGate.checking .login-gate-btn,
#loginGate.checking .login-gate-prompt,
#loginGate.checking .login-gate-note{ display:none; }

/* "NOT EQUIPPED" on a level card opens My Beasts */
.guardian-status-pill.unequipped{ cursor:pointer; }
.guardian-status-pill.unequipped:hover{ filter:brightness(1.25); }

.login-gate-box{

    text-align:center;
    padding:44px 40px;
    border-radius:26px;
    background:linear-gradient(160deg, rgba(55,22,100,.55), rgba(12,10,24,.92) 65%);
    border:1px solid rgba(139,63,255,.40);
    box-shadow:0 0 40px rgba(139,63,255,.25);
    max-width:380px;
    width:90%;

}

.login-gate-logo{

    width:72px;
    height:72px;
    object-fit:contain;
    margin-bottom:14px;
    filter:drop-shadow(0 0 14px rgba(139,63,255,.6));

}

.login-gate-box h1{

    font-family:var(--font-display,"Orbitron",sans-serif);
    font-size:26px;
    font-weight:800;
    color:#fff;
    letter-spacing:2px;
    text-shadow:0 0 1px #fff, 0 2px 10px rgba(0,0,0,.7);
    margin-bottom:10px;

}

.login-gate-box p{

    color:#c9d3ea;
    font-size:14px;
    margin-bottom:26px;

}

.login-gate-note{

    margin-top:14px;
    margin-bottom:0 !important;
    min-height:16px;
    font-size:12px;
    color:#ff8b8b !important;

}

.login-gate-btn{

    width:100%;
    padding:14px;
    border:none;
    border-radius:14px;
    background:linear-gradient(100deg,#6B3BFF,#00C6FF);
    color:#fff;
    font-weight:700;
    font-size:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    transition:.2s;

}

.login-gate-btn:hover{

    transform:translateY(-2px);
    box-shadow:0 0 22px rgba(0,229,255,.45);

}

.login-gate-btn:disabled{

    opacity:.6;
    cursor:default;
    transform:none;

}

/*==================================================
    WALLET ACCOUNT MENU (top bar)
==================================================*/

.wallet-account-menu{

    position:relative;

}

#walletBtn{

    display:flex;
    align-items:center;
    gap:8px;

}

.wallet-caret{

    font-size:10px;
    opacity:.7;
    margin-left:2px;

}

.wallet-dropdown{

    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:200px;
    padding:10px;
    border-radius:14px;
    background:linear-gradient(160deg, rgba(50,20,90,.65), rgba(12,10,24,.96) 65%);
    border:1px solid rgba(139,63,255,.35);
    box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 20px rgba(139,63,255,.15);
    display:none;
    flex-direction:column;
    gap:8px;
    z-index:2000;

}

.wallet-dropdown.open{

    display:flex;

}

.wallet-dropdown-address{

    font-size:12px;
    color:#c9d3ea;
    word-break:break-all;
    padding:6px 8px;
    border-bottom:1px solid rgba(255,255,255,.08);

}

#logoutBtn{

    padding:9px;
    border:none;
    border-radius:10px;
    background:rgba(255,80,80,.12);
    border:1px solid rgba(255,80,80,.35);
    color:#ff8b8b;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    transition:.2s;

}

#logoutBtn:hover{

    background:rgba(255,80,80,.22);

}

/*==================================================
PACK CARDS — Shop (Buy) + Inventory (Open)
==================================================*/

.pack-card{

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(160deg, rgba(50,20,90,.32), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.25);
    transition:.25s;

}

.pack-card:hover{

    border-color:#00E5FF;
    transform:translateY(-2px);

}

.pack-card-img-wrap{

    position:relative;
    width:160px;

}

.pack-card-img{

    width:160px;
    height:210px;
    object-fit:cover;
    border-radius:10px;
    background:rgba(0,0,0,.25);

}

.pack-qty-badge{

    position:absolute;
    top:6px;
    right:6px;
    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;
    font-weight:800;
    font-size:12px;
    padding:3px 9px;
    border-radius:20px;
    box-shadow:0 2px 6px rgba(0,0,0,.4);

}

.pack-card h4{

    margin:4px 0 0;
    font-size:15px;
    color:#fff;

}

.pack-card .pack-card-sub{

    margin:0;
    font-size:12px;
    color:rgba(255,255,255,.6);

}

.pack-card button{

    margin-top:6px;
    padding:8px 20px;
    border:none;
    border-radius:8px;
    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
    width:100%;

}

.pack-card button:hover{

    transform:translateY(-1px);
    box-shadow:0 0 12px rgba(0,229,255,.35);

}

.pack-card button:disabled{

    opacity:.5;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;

}

.pack-section-heading{

    margin:18px 0 10px;
    font-size:15px;
    color:#35ff96;

}

.pack-qty-row{

    display:flex;
    align-items:center;
    align-self:stretch;
    box-sizing:border-box;
    gap:6px;
    width:100%;

}

.pack-qty-input{

    flex:1 1 0%;
    min-width:0;
    box-sizing:border-box;
    padding:9px 8px;
    border-radius:8px;
    border:1px solid rgba(139,63,255,.4);
    background:rgba(0,0,0,.3);
    color:#fff;
    font-weight:700;
    text-align:center;
    font-size:14px;

}

.pack-qty-max-btn{

    flex:0 0 46px;
    box-sizing:border-box;
    padding:6px 2px;
    border:1px solid #00E5FF;
    border-radius:8px;
    background:transparent;
    color:#00E5FF;
    font-weight:700;
    font-size:10px;
    cursor:pointer;
    white-space:nowrap;

}

.pack-qty-max-btn:hover{

    background:rgba(0,229,255,.12);

}

/*==================================================
    TOP BAR SYNC BUTTON (next to wallet)
==================================================*/

.top-sync-btn .top-sync-icon{

    display:inline-block;
    font-size:18px;
    line-height:1;

}

.top-sync-btn:disabled{

    cursor:wait;
    opacity:.75;

}

.top-sync-btn.syncing .top-sync-icon{

    animation:topSyncSpin .9s linear infinite;

}

@keyframes topSyncSpin{

    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }

}

/*==================================================
    SLOT EMPTY "+" ICON STATES
==================================================*/

.slot-empty-icon.clickable{

    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;

}

.slot-empty-icon.clickable:hover{

    transform:scale(1.08);
    box-shadow:0 0 26px rgba(0,229,255,.45);

}

.slot-empty-icon.on-cooldown{

    cursor:not-allowed;
    font-size:15px;
    color:#9fb3d6;
    border-color:rgba(159,179,214,.4);
    background:rgba(159,179,214,.06);
    box-shadow:none;

}

/*==================================================
    SHOP — PACK NOT LIVE YET
==================================================*/

.pack-card button.pack-btn-soon{

    opacity:.55;
    cursor:not-allowed;

}

/*==================================================
    BLEND PAGE
==================================================*/

.blend-grid{

    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:14px;

}

.blend-card{

    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);
    border:2px solid rgba(139,63,255,.30);

}

.blend-card-top{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

}

.blend-card-side{

    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    text-align:center;
    min-width:0;

}

.blend-card-side img{

    width:100%;
    max-width:110px;
    height:auto;
    object-fit:contain;
    border-radius:10px;

}

.blend-card-side strong{

    color:#fff;
    font-size:14px;

}

.blend-card-side span{

    font-size:11px;
    color:#9fb3d6;

}

.blend-card-side span.insufficient{

    color:#ff6b6b;

}

.blend-arrow{

    font-size:22px;
    color:#00E5FF;
    flex-shrink:0;

}

.blend-result-icon{

    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:2px dashed rgba(0,229,255,.5);
    font-size:30px;
    font-weight:800;
    color:#00E5FF;
    background:rgba(0,229,255,.06);

}

.blend-go-btn:disabled{

    opacity:.5;
    cursor:not-allowed;

}

#blendRetryBox:not(:empty){

    margin-top:12px;

}


/*==================================================
    BLEND — extra bits + POPUP
==================================================*/

.blend-fail-note{

    margin:0;
    font-size:11px;
    color:#9fb3d6;
    text-align:center;

}

.blend-pending-banner{

    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(255,196,0,.5);
    background:rgba(255,196,0,.08);
    display:flex;
    flex-direction:column;
    gap:8px;

}

.blend-pending-banner p{

    margin:0;
    color:#ffd76a;
    font-size:13px;

}

/*==================================================
    GAME POPUP (popup.js) — used by the whole game
==================================================*/

.game-popup{

    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(4,6,14,.78);
    backdrop-filter:blur(4px);

}

.game-popup.hidden{

    display:none;

}

.game-popup-box{

    width:100%;
    max-width:460px;
    max-height:90vh;
    overflow-y:auto;
    padding:22px;
    border-radius:18px;
    background:linear-gradient(160deg, rgba(50,20,90,.96), rgba(14,10,26,.98) 70%);
    border:2px solid rgba(0,229,255,.35);
    box-shadow:0 0 40px rgba(124,44,255,.35);
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:12px;
    animation:gamePopupIn .22s ease-out;

}

.game-popup-box h3{

    margin:0;
    color:#fff;

}

.game-popup-message{

    margin:0;
    color:#cfd8ea;
    font-size:14px;
    line-height:1.5;

}

@keyframes gamePopupIn{

    from{ transform:scale(.86); opacity:0; }
    to{ transform:scale(1); opacity:1; }

}

.game-popup-label{

    margin:0;
    font-family:'Orbitron', sans-serif;
    font-weight:800;
    font-size:22px;
    letter-spacing:2px;
    color:#00E5FF;

}

.game-popup-box.variant-success{ border-color:rgba(53,255,150,.55); }
.game-popup-box.variant-success .game-popup-label{ color:#35ff96; text-shadow:0 0 14px rgba(53,255,150,.6); }
.game-popup-box.variant-success .game-popup-image img{ animation:gamePopupGlow 1.6s ease-in-out infinite; }

.game-popup-box.variant-fail{ border-color:rgba(255,107,107,.55); }
.game-popup-box.variant-fail .game-popup-label{ color:#ff6b6b; text-shadow:0 0 14px rgba(255,107,107,.5); }

@keyframes gamePopupGlow{

    0%,100%{ box-shadow:0 0 10px rgba(53,255,150,.35); }
    50%{ box-shadow:0 0 30px rgba(53,255,150,.75); }

}

.game-popup-images{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;

}

.game-popup-image{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:6px;
    border-radius:12px;
    border:2px solid rgba(139,63,255,.3);
    background:rgba(0,0,0,.2);

}

/* NFT artwork at its real shape (like AtomicHub cards) — never cropped */
.game-popup-image img{

    display:block;
    width:130px;
    max-width:100%;
    height:auto;
    object-fit:contain;
    border-radius:10px;

}

.game-popup-images.single .game-popup-image img{

    width:min(300px, 72vw);

}

/* wider popup when it shows several NFTs */
.game-popup-box:has(.game-popup-images:not(.single)){

    max-width:640px;

}

@media (max-width:480px){

    .game-popup-image img{ width:42vw; }
    .game-popup-images.single .game-popup-image img{ width:78vw; }

}

.game-popup-image span{

    font-size:11px;
    color:#cfd8ea;
    font-weight:700;

}

.game-popup-actions{

    display:flex;
    gap:10px;
    justify-content:center;

}

.game-popup-actions .craft-btn{

    flex:1;

}

.game-popup-btn-secondary{

    flex:1;
    padding:12px;
    border-radius:12px;
    border:1px solid rgba(159,179,214,.4);
    background:transparent;
    color:#9fb3d6;
    font-weight:700;
    cursor:pointer;

}

.game-popup-input{

    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(0,229,255,.4);
    background:rgba(0,0,0,.35);
    color:#fff;
    font-size:15px;
    box-sizing:border-box;

}

.game-popup-spinner{

    width:56px;
    height:56px;
    margin:6px auto;
    border-radius:50%;
    border:4px solid rgba(0,229,255,.15);
    border-top-color:#00E5FF;
    animation:topSyncSpin .9s linear infinite;

}

.game-popup-rows{

    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:left;

}

/*==================================================
    FORGE — 7 RARITY TABS + LEVEL BADGE
==================================================*/

.forge-rarity-tabs{

    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:6px;

}

.forge-rarity-tab{

    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:10px;
    border:1px solid rgba(139,63,255,.35);
    background:#1F2937;
    color:#cfd8ea;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
    transition:.2s;

}

.forge-rarity-tab span{

    min-width:20px;
    padding:1px 6px;
    border-radius:8px;
    background:rgba(255,255,255,.1);
    font-size:11px;

}

.forge-rarity-tab.active{

    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;
    border-color:transparent;

}

.forge-rarity-tab.empty{

    opacity:.4;
    cursor:not-allowed;

}

.forge-list-item{

    position:relative;

}

.forge-lv-badge{

    margin-left:auto;
    padding:3px 8px;
    border-radius:8px;
    background:rgba(0,229,255,.12);
    border:1px solid rgba(0,229,255,.45);
    color:#00E5FF;
    font-weight:800;
    font-size:12px;
    white-space:nowrap;

}

.blend-card-side img.blend-next-img{

    opacity:.55;
    filter:grayscale(.2);

}

.top-sync-btn .top-sync-icon{

    font-size:12px;
    font-weight:800;
    color:#fff;
    letter-spacing:.5px;

}

.top-sync-btn.syncing .top-sync-icon{

    animation:topSyncPulse 1s ease-in-out infinite;

}

@keyframes topSyncPulse{

    0%,100%{ opacity:1; }
    50%{ opacity:.35; }

}

/*==================================================
    EXCHANGE — conversions locked until Level 3
==================================================*/

.exchange-convert-card{

    position:relative;

}

.exchange-lock-note{

    display:none;

}

.exchange-convert-card.exchange-locked > *:not(.exchange-lock-note){

    opacity:.35;
    pointer-events:none;

}

.exchange-convert-card.exchange-locked .exchange-lock-note{

    display:block;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    margin:0;
    padding:8px 16px;
    border-radius:10px;
    background:rgba(14,10,26,.9);
    border:1px solid rgba(0,229,255,.5);
    color:#00E5FF;
    font-weight:800;
    white-space:nowrap;
    z-index:2;

}

.blend-pending-banner .blend-pending-error{

    color:#ff9d9d;
    font-size:12px;
    word-break:break-all;

}


/*==================================================
    QUESTS PAGE
==================================================*/

.quests-list{

    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;

}

.quest-section-title{

    margin:12px 0 2px;
    color:#00E5FF;
    font-size:15px;

}

.quest-card{

    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.3);

}

.quest-card.ready{

    border-color:rgba(53,255,150,.6);
    box-shadow:0 0 18px rgba(53,255,150,.18);

}

.quest-card.claimed{

    opacity:.5;

}

.quest-main{

    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;

}

.quest-main strong{ color:#fff; }

.quest-main span{

    color:#9fb3d6;
    font-size:12px;

}

.quest-main .quest-reward{

    color:#ffd76a;

}

.quest-progress{

    height:8px;
    border-radius:6px;
    background:rgba(255,255,255,.08);
    overflow:hidden;

}

.quest-progress-fill{

    height:100%;
    background:linear-gradient(90deg,#7c2cff,#00E5FF);

}

.quest-action{

    flex-shrink:0;

}

.quest-btn{

    min-width:110px;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(159,179,214,.35);
    background:transparent;
    color:#9fb3d6;
    font-weight:700;

}

.quest-btn.craft-btn{ border:none; color:#fff; }

.quest-btn:disabled{ cursor:not-allowed; }

.quest-badge{

    margin-left:auto;
    min-width:20px;
    padding:1px 7px;
    border-radius:10px;
    background:#35ff96;
    color:#0b0b14;
    font-size:11px;
    font-weight:800;
    text-align:center;

}

@media (max-width:600px){

    .quest-card{ flex-direction:column; align-items:stretch; }
    .quest-btn{ width:100%; }

}

/*==================================================
    LEVEL CARD — beast line, unlock progress,
    prestige banner below Level 7
==================================================*/

.level-beast-line{

    margin:4px 0 0;
    font-size:12px;
    font-weight:700;
    color:#35ff96;

}

.level-unlock-progress{

    margin:0 0 8px;
    font-size:12px;
    font-weight:700;
    color:#ffd76a;

}

.level-unlock-progress:empty{

    display:none;

}

#prestigeBannerSlot:not(:empty){

    margin-top:12px;

}

.level-beast-line.no-beast{

    color:#9fb3d6;
    font-weight:600;

}

/*==================================================
    TOAST (popup.js showGameToast)
==================================================*/

.game-toast-wrap{

    position:fixed;
    left:50%;
    bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%);
    z-index:9998;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    pointer-events:none;

}

.game-toast{

    padding:8px 16px;
    border-radius:12px;
    background:rgba(14,10,26,.95);
    border:1px solid rgba(53,255,150,.55);
    color:#35ff96;
    font-weight:800;
    font-size:13px;
    box-shadow:0 0 18px rgba(53,255,150,.25);
    transition:opacity .4s, transform .4s;
    animation:gamePopupIn .2s ease-out;

}

.game-toast.hide{

    opacity:0;
    transform:translateY(8px);

}

/*==================================================
    PLAYER STATS — small second line
==================================================*/

.stat-subtext{

    display:block;
    font-size:10px;
    color:#9fb3d6;
    font-weight:600;

}

/*==================================================
    BOOSTS TAB
==================================================*/

.boosts-content{

    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;

}

.boost-active{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(53,255,150,.55);
    background:rgba(53,255,150,.08);
    color:#35ff96;

}

.boost-active.none{

    border-color:rgba(159,179,214,.3);
    background:transparent;
    color:#9fb3d6;

}

.boost-card{

    padding:14px;
    border-radius:14px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.3);

}

.boost-card-head{

    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:10px;

}

.boost-card-head strong{ color:#fff; }

.boost-card-head span{ color:#9fb3d6; font-size:12px; }

.boost-durations{

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;

}

.boost-duration-btn{

    display:flex;
    flex-direction:column;
    gap:4px;
    padding:10px 6px;
    border-radius:10px;
    border:1px solid rgba(0,229,255,.4);
    background:rgba(0,229,255,.06);
    color:#fff;
    cursor:pointer;

}

.boost-duration-btn strong{ font-size:15px; }

.boost-duration-btn span{ font-size:10px; color:#9fb3d6; line-height:1.4; }

.boost-duration-btn.insufficient{

    border-color:rgba(255,107,107,.35);
    opacity:.6;

}

.boost-duration-btn:disabled{

    opacity:.4;
    cursor:not-allowed;

}

@media (max-width:600px){

    .boost-durations{ grid-template-columns:repeat(2, 1fr); }

}

/*==================================================
    BATCH A — quests button, slots, stats, storage
==================================================*/

.quest-btn.craft-btn{

    background:linear-gradient(100deg,#7c2cff,#b14dff);
    box-shadow:0 0 14px rgba(124,44,255,.35);

}

.quest-btn.craft-btn:disabled{

    background:linear-gradient(100deg,#3b2466,#4a2d78);
    box-shadow:none;
    color:#b9a9d9;

}

/* every slot lines up the same once a Beast is in it */
.beast-slot.has-beast .beast-slot-empty-body{

    justify-content:flex-start;
    flex:0 0 auto;
    padding:0;

}

.inv-materials-toolbar{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 10px;
    padding:10px 14px;
    border-radius:12px;
    background:rgba(0,229,255,.06);
    border:1px solid rgba(0,229,255,.3);

}

.inv-materials-toolbar.hidden{

    display:none;

}

.inv-materials-toolbar .materials-capacity{

    color:#cfd8ea;
    font-weight:700;
    font-size:13px;

}



/*==================================================
    PVP ARENA (pvpArena.js)
==================================================*/

.pvp-arena{ display:flex; flex-direction:column; gap:14px; }

.pvp-cards{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:12px;
}

.pvp-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:16px 14px;
    border-radius:16px;
    background:linear-gradient(160deg, rgba(50,20,90,.4), rgba(14,10,26,.9) 70%);
    border:2px solid rgba(0,229,255,.35);
    text-align:center;
}

.pvp-card.enemy{ border-color:rgba(255,82,82,.45); }

.pvp-card img{
    width:min(150px, 100%);
    height:auto;
    border-radius:12px;
    object-fit:contain;
}

.pvp-card.you img{ filter:drop-shadow(0 0 14px rgba(0,229,255,.35)); }
.pvp-card.enemy img{ filter:drop-shadow(0 0 14px rgba(255,82,82,.4)); }

.pvp-card > strong{ color:#fff; font-size:16px; }

.pvp-card-label{
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
    color:#9fb3d6;
}

.pvp-stat{
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:13px;
    color:#9fb3d6;
    border-top:1px solid rgba(255,255,255,.06);
    padding-top:6px;
}

.pvp-stat strong{ color:#fff; }

.pvp-vs-badge{
    font-family:'Orbitron', sans-serif;
    font-weight:900;
    font-size:26px;
    color:#ffd76a;
    text-shadow:0 0 16px rgba(255,215,106,.55);
}

.pvp-fights-line{ margin:0; text-align:center; color:#cfd8ea; }

.pvp-actions{ display:flex; gap:10px; }
.pvp-actions .craft-btn{ flex:2; }

.pvp-secondary-btn{
    flex:1;
    padding:12px;
    border-radius:12px;
    border:1px solid rgba(159,179,214,.4);
    background:transparent;
    color:#cfd8ea;
    font-weight:700;
    cursor:pointer;
}

@media (max-width:600px){
    .pvp-cards{ grid-template-columns:1fr; }
    .pvp-vs-badge{ text-align:center; }
}

/* ---- battle popup ---- */

.game-popup-box.pvp-battle-popup{ max-width:560px; }

.pvp-battle{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:10px;
}

.pvp-battle-side{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.pvp-battle-side img{
    width:min(140px, 100%);
    height:auto;
    border-radius:12px;
}

.pvp-battle-side strong{ color:#fff; }
.pvp-battle-side span{ color:#9fb3d6; font-size:12px; }

.pvp-battle-side.you{ animation:pvpSlideLeft .5s ease-out both, pvpClash 1.1s ease-in-out .9s both; }
.pvp-battle-side.enemy{ animation:pvpSlideRight .5s ease-out both, pvpClashR 1.1s ease-in-out .9s both; }

.pvp-battle-bar{
    width:100%;
    height:8px;
    border-radius:6px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
}

.pvp-battle-bar i{
    display:block;
    height:100%;
    width:0;
    animation:pvpBarFill 1s ease-out .4s forwards;
}

.pvp-battle-side.you .pvp-battle-bar i{ background:linear-gradient(90deg,#00E5FF,#7c2cff); }
.pvp-battle-side.enemy .pvp-battle-bar i{ background:linear-gradient(90deg,#ff5252,#ff9d4d); }

.pvp-battle-vs{
    font-family:'Orbitron', sans-serif;
    font-weight:900;
    font-size:30px;
    color:#ffd76a;
    animation:pvpVsPulse .6s ease-in-out infinite alternate;
}

.pvp-battle-status{
    margin:0;
    color:#cfd8ea;
    animation:pvpBlink 1s ease-in-out infinite;
}

@keyframes pvpSlideLeft{ from{ transform:translateX(-60px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes pvpSlideRight{ from{ transform:translateX(60px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes pvpBarFill{ to{ width:var(--w); } }
@keyframes pvpVsPulse{ from{ transform:scale(1); } to{ transform:scale(1.25); text-shadow:0 0 24px rgba(255,215,106,.9); } }
@keyframes pvpBlink{ 50%{ opacity:.45; } }
@keyframes pvpClash{
    0%,100%{ transform:none; }
    20%,60%{ transform:translateX(18px) rotate(3deg); }
    40%,80%{ transform:translateX(-6px); }
}
@keyframes pvpClashR{
    0%,100%{ transform:none; }
    20%,60%{ transform:translateX(-18px) rotate(-3deg); }
    40%,80%{ transform:translateX(6px); }
}

/*==================================================
    BOSS FOG + SPARKLES (replaces floating crystals)
==================================================*/

.boss-portrait-wrap{ position:relative; overflow:hidden; }

.boss-fog{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}

.boss-fog i{
    position:absolute;
    left:-50%;
    width:200%;
    height:45%;
    border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(190,170,255,.28), rgba(120,90,200,.1) 45%, transparent 70%);
    filter:blur(14px);
    animation:bossFogDrift 14s linear infinite;
}

.boss-fog i:nth-child(1){ bottom:-8%; animation-duration:16s; }
.boss-fog i:nth-child(2){ bottom:12%; opacity:.7; animation-duration:22s; animation-direction:reverse; }
.boss-fog i:nth-child(3){ top:-6%; opacity:.45; animation-duration:28s; }

@keyframes bossFogDrift{
    from{ transform:translateX(-10%); }
    50%{ transform:translateX(12%); }
    to{ transform:translateX(-10%); }
}

.boss-sparkles{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
}

.boss-sparkles span{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 8px 2px rgba(255,230,160,.9);
    opacity:0;
    animation:bossSparkle 3.2s ease-in-out infinite;
}

.boss-sparkles span:nth-child(1){ left:8%;  top:22%; animation-delay:0s; }
.boss-sparkles span:nth-child(2){ left:18%; top:70%; animation-delay:.6s; }
.boss-sparkles span:nth-child(3){ left:28%; top:40%; animation-delay:1.3s; }
.boss-sparkles span:nth-child(4){ left:38%; top:12%; animation-delay:2.1s; }
.boss-sparkles span:nth-child(5){ left:48%; top:82%; animation-delay:.3s; }
.boss-sparkles span:nth-child(6){ left:58%; top:30%; animation-delay:1.8s; }
.boss-sparkles span:nth-child(7){ left:68%; top:62%; animation-delay:.9s; }
.boss-sparkles span:nth-child(8){ left:78%; top:18%; animation-delay:2.6s; }
.boss-sparkles span:nth-child(9){ left:88%; top:48%; animation-delay:1.1s; }
.boss-sparkles span:nth-child(10){ left:14%; top:52%; animation-delay:2.9s; }
.boss-sparkles span:nth-child(11){ left:44%; top:58%; animation-delay:1.6s; }
.boss-sparkles span:nth-child(12){ left:72%; top:86%; animation-delay:.4s; }
.boss-sparkles span:nth-child(13){ left:92%; top:76%; animation-delay:2.3s; }
.boss-sparkles span:nth-child(14){ left:54%; top:6%;  animation-delay:1.4s; }

@keyframes bossSparkle{
    0%,100%{ opacity:0; transform:scale(.4) translateY(0); }
    40%{ opacity:1; transform:scale(1.2) translateY(-8px); }
    70%{ opacity:.3; transform:scale(.8) translateY(-16px); }
}

.boss-portrait-wrap .boss-portrait-img{ position:relative; z-index:1; }
.boss-portrait-wrap .boss-damage-number,
.boss-portrait-wrap .boss-hit-flash{ z-index:5; }

/*==================================================
    ARENA SHOP
==================================================*/

.arena-shop-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    border-radius:12px;
    background:rgba(255,215,106,.08);
    border:1px solid rgba(255,215,106,.35);
    margin-bottom:12px;
}

.arena-shop-head span{ color:#cfd8ea; font-weight:700; }
.arena-shop-head strong{ color:#ffd76a; font-size:20px; }

.arena-shop-tabs{ display:flex; gap:8px; margin-bottom:12px; }

.arena-shop-tab{
    flex:1;
    height:42px;
    border:none;
    border-radius:12px;
    background:#1F2937;
    color:#9fb3d6;
    font-weight:700;
    cursor:pointer;
}

.arena-shop-tab.active{
    background:linear-gradient(100deg,#7c2cff,#00E5FF);
    color:#fff;
}

.arena-shop-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:12px;
}

.arena-shop-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.3);
}

.arena-shop-card-main{ display:flex; flex-direction:column; gap:4px; }
.arena-shop-card-main strong{ color:#fff; }
.arena-shop-card-main span{ color:#9fb3d6; font-size:12px; }
.arena-shop-card-main .arena-shop-meta{ color:#00E5FF; font-weight:700; }

.arena-shop-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.arena-shop-price{ color:#ffd76a; font-weight:800; font-size:13px; }
.arena-shop-buy{ padding:8px 14px; }
.arena-shop-buy:disabled{ opacity:.5; cursor:not-allowed; }

/*==================================================
    LEADERBOARD
==================================================*/

.leaderboard-caption{ margin:10px 0 6px; color:#9fb3d6; font-size:12px; font-weight:700; }
.leaderboard-row.top-1 .leaderboard-rank{ color:#ffd76a; }
.leaderboard-row.top-2 .leaderboard-rank{ color:#d9e2f2; }
.leaderboard-row.top-3 .leaderboard-rank{ color:#e0a46a; }
.leaderboard-gap{ text-align:center; color:#9fb3d6; }

/*==================================================
    REFERRALS
==================================================*/

.ref-top{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px;
    margin-top:12px;
}

.ref-points, .ref-link{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.3);
}

.ref-points span, .ref-link span{ color:#9fb3d6; font-size:12px; font-weight:700; }
.ref-points strong{ color:#35ff96; font-size:26px; }

.ref-link-row{ display:flex; gap:8px; }

.ref-link-row input{
    flex:1;
    min-width:0;
    padding:10px;
    border-radius:10px;
    border:1px solid rgba(0,229,255,.35);
    background:rgba(0,0,0,.3);
    color:#fff;
}

.ref-rules{ color:#9fb3d6; font-size:12px; margin:10px 0; }

.ref-tiers{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:10px;
}

.ref-tier{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px;
    border-radius:14px;
    border:1px solid rgba(0,229,255,.3);
    background:rgba(0,229,255,.05);
}

.ref-tier strong{ color:#fff; }
.ref-tier span{ color:#ffd76a; font-weight:700; font-size:13px; }
.ref-tier .ref-stock{ color:#9fb3d6; font-weight:600; font-size:11px; }

.ref-list{ display:flex; flex-direction:column; gap:6px; }

.ref-row{
    display:flex;
    justify-content:space-between;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(255,255,255,.04);
    color:#cfd8ea;
    font-size:13px;
}

.ref-valid{ color:#35ff96; font-weight:700; }
.ref-pending{ color:#ffd76a; }

@media (max-width:600px){
    .ref-top{ grid-template-columns:1fr; }
}


/*==================================================
    RENT PAGE
==================================================*/

#rentContent{ margin-top:14px; }

.rent-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
    gap:12px;
}

.rent-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);
    border:2px solid rgba(139,63,255,.3);
    text-align:center;
}

.rent-card img{
    width:100%;
    max-width:140px;
    height:auto;
    border-radius:10px;
}

.rent-card strong{ color:#fff; }
.rent-card span{ color:#9fb3d6; font-size:12px; }
.rent-card .rent-price{ color:#ffd76a; font-weight:800; font-size:13px; }
.rent-card .rent-status{ color:#00E5FF; font-weight:700; }
.rent-card .rent-status.busy{ color:#35ff96; }
.rent-card .craft-btn, .rent-card .pvp-secondary-btn{ width:100%; }

/*==================================================
    BEAST COIN CHEST (tap to collect)
==================================================*/

.beast-chest{
    position:fixed;
    right:calc(18px + env(safe-area-inset-right, 0px));
    bottom:calc(86px + env(safe-area-inset-bottom, 0px));
    z-index:9990;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:12px 16px 12px 58px;
    border:2px solid rgba(255,215,106,.8);
    border-radius:16px;
    background:
        radial-gradient(circle at 28px 50%, rgba(255,215,106,.95) 0 12px, transparent 13px),
        linear-gradient(160deg, rgba(60,30,100,.96), rgba(20,12,36,.98));
    color:#fff;
    cursor:pointer;
    box-shadow:0 0 24px rgba(255,215,106,.45);
    animation:beastChestBob 1.4s ease-in-out infinite;
}

.beast-chest strong{ font-size:14px; color:#ffd76a; }
.beast-chest span{ font-size:11px; color:#cfd8ea; }

.beast-chest.expiring{ border-color:#ff7a59; box-shadow:0 0 24px rgba(255,122,89,.55); }
.beast-chest.expiring span{ color:#ffd0c2; }

@keyframes beastChestBob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); box-shadow:0 0 34px rgba(255,215,106,.7); }
}

.leaderboard-pool{
    margin:0 0 10px;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(255,215,106,.08);
    border:1px solid rgba(255,215,106,.35);
    color:#cfd8ea;
    font-size:12px;
}

.leaderboard-pool strong{ color:#ffd76a; }

.leaderboard-share{
    font-style:normal;
    color:#35ff96;
    font-size:11px;
    margin-left:6px;
}

/*==================================================
    FEATURE SWITCHES — locked sidebar links
==================================================*/

.sidebar-nav-link.nav-locked{
    position:relative;
    cursor:not-allowed;
}

/* locked: icon stays blurred, the name is replaced by "Coming soon" */
.sidebar-nav-link.nav-locked .nav-label{
    display:inline-block;
    color:rgba(207,216,234,.6) !important;
    font-style:italic;
    user-select:none;
    pointer-events:none;
}

/* maintenance: name visible, small amber tag */
.sidebar-nav-link.nav-maintenance{ position:relative; }
.sidebar-nav-link.nav-maintenance::after{
    content:"Maintenance";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    padding:2px 7px;
    border-radius:10px;
    font-size:10px;
    font-weight:700;
    color:#ffcf6b;
    background:rgba(255,176,32,.14);
    border:1px solid rgba(255,176,32,.4);
}

.sidebar-nav-link.nav-locked .nav-icon img{
    filter:blur(3px) grayscale(1);
    opacity:.5;
}

.sidebar-nav-link.nav-locked::after{
    content:"?";
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(124,44,255,.35);
    border:1px solid rgba(177,77,255,.7);
    color:#fff;
    font-weight:900;
    font-size:13px;
    text-shadow:none;
    box-shadow:0 0 12px rgba(124,44,255,.5);
}

/*==================================================
    ANNOUNCEMENT BANNER (from the admin dashboard)
==================================================*/

.game-announcement{
    position:relative;
    z-index:50;
    padding:8px 16px;
    text-align:center;
    font-weight:700;
    font-size:13px;
    color:#0b0b14;
    background:linear-gradient(100deg,#ffd76a,#00E5FF);
}

/*==================================================
    SHOP — packs: 3 equal cards per row
==================================================*/

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

@media (max-width:600px){
    .shop-packs-grid{ grid-template-columns:minmax(0, 1fr); }
}

/*==================================================
    MY BEASTS — pick which copy to add (several of one rarity)
==================================================*/

.add-guardian-nft-thumb.selected{ outline:2px solid #00E5FF; outline-offset:2px; }

.add-guardian-pick{ margin-top:10px; }

.add-guardian-pick-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(78px, 1fr));
    gap:8px;
    max-height:260px;
    overflow-y:auto;
}

.add-guardian-pick-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding:6px;
    border-radius:10px;
    border:1px solid rgba(139,63,255,.35);
    background:rgba(20,12,38,.7);
    color:#fff;
    font:inherit;
    font-size:11px;
    cursor:pointer;
}

.add-guardian-pick-btn:hover{ border-color:#00E5FF; }
.add-guardian-pick-btn img{ width:100%; max-width:64px; border-radius:6px; }
.add-guardian-pick-btn span{ color:#9fb3d6; }
.add-guardian-pick-btn strong{ color:#35ff96; font-size:12px; }

/* referral pack pictures */
.ref-tier-img{
    display:block;
    width:100%;
    max-width:120px;
    aspect-ratio:1 / 1;
    object-fit:contain;
    margin:0 auto 6px;
    border-radius:10px;
}

/*==================================================
    BOSS CARD — the boss's own scene fills the WHOLE
    card (portrait, name, stats, HP bar, milestones),
    not just the box behind the Beast
==================================================*/

.boss-card-compact{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.boss-card-compact::before,
.boss-card-compact::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
}

/* the boss picture, stretched and softened as the card background */
.boss-card-compact::before{
    background-size:cover;
    background-position:center 30%;
    filter:blur(18px) saturate(1.25);
    transform:scale(1.2);
    opacity:.85;
}

.boss-card-compact:has(#weeklyBossPortrait)::before{ background-image:url("../assets/bosses/weekly-boss.png"); }
.boss-card-compact:has(#monthlyBossPortrait)::before{ background-image:url("../assets/bosses/monthly-boss.png"); }

/* darker toward the bottom so the stats stay readable */
.boss-card-compact::after{
    background:
        radial-gradient(ellipse at 50% 28%, transparent 0%, rgba(8,6,18,.35) 55%),
        linear-gradient(180deg, rgba(8,6,18,.15) 0%, rgba(8,6,18,.55) 55%, rgba(8,6,18,.82) 100%);
}

/* the portrait box melts into the card instead of showing a hard square */
.boss-card-compact .boss-portrait-wrap{
    background:none;
    border:none;
    box-shadow:none;
}

.boss-card-compact .boss-portrait-img{
    -webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 48%, #000 62%, transparent 100%);
            mask-image:radial-gradient(ellipse 70% 72% at 50% 48%, #000 62%, transparent 100%);
}

/*==================================================
    BEAST COIN CHEST — gold glow + pulse so a drop is
    easy to notice (Neon drops stay quiet)
==================================================*/

.beast-chest{
    border:1px solid rgba(255,215,106,.75);
    animation:beastChestPulse 1.6s ease-in-out infinite;
}

.beast-chest strong{ color:#ffd76a; text-shadow:0 0 10px rgba(255,215,106,.7); }

@keyframes beastChestPulse{
    0%,100%{ box-shadow:0 0 12px rgba(255,200,61,.45), 0 0 0 0 rgba(255,215,106,.45); transform:scale(1); }
    50%{ box-shadow:0 0 28px rgba(255,200,61,.85), 0 0 0 8px rgba(255,215,106,0); transform:scale(1.04); }
}

.beast-chest.expiring{ animation-duration:.8s; }

@media (prefers-reduced-motion:reduce){
    .beast-chest{ animation:none; }
}

/* mailbox button + unread badge */
.mail-btn{ position:relative; color:#cfe6ff; display:inline-flex; align-items:center; justify-content:center; }
.mail-btn.has-mail{ color:#ffd76a; }
.mail-badge{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:9px;
    background:#ff3d71;
    color:#fff;
    font-size:11px;
    font-weight:800;
    line-height:18px;
    text-align:center;
    box-shadow:0 0 10px rgba(255,61,113,.7);
}
.mail-badge.hidden{ display:none; }

/* header: Beast Coin earned today (thin bar under the Beast Token card) */
.coin-card{ position:relative; }
.bc-today{
    position:absolute;
    left:10px;
    right:10px;
    bottom:5px;
    height:3px;
    border-radius:2px;
    background:rgba(255,255,255,.1);
    overflow:hidden;
}
.bc-today i{
    display:block;
    height:100%;
    width:0;
    background:linear-gradient(90deg, #35ff96, #ffd76a);
    transition:width .5s ease;
}

/* chest just got coins: a quick pop */
.beast-chest.just-dropped{ animation:beastChestPop .6s ease-out, beastChestPulse 1.6s ease-in-out .6s infinite; }
@keyframes beastChestPop{ 0%{ transform:scale(.7); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); } }

/*==================================================
    ARENA SHOP — active boost card + cosmetics
==================================================*/
.arena-shop-card.is-active{ border-color:rgba(53,255,150,.6); box-shadow:0 0 16px rgba(53,255,150,.2); }
.arena-shop-card.is-active .arena-shop-meta{ color:#35ff96; }

.pvp-card.cos-frameBronze{ border:2px solid #cd7f32; box-shadow:0 0 18px rgba(205,127,50,.45); }
.pvp-card.cos-frameSilver{ border:2px solid #d9e2ec; box-shadow:0 0 20px rgba(217,226,236,.5); }
.pvp-card.cos-frameGold{ border:2px solid #ffd76a; box-shadow:0 0 26px rgba(255,215,106,.6); }
.pvp-card.cos-nameCyan .pvp-card-name{ color:#00e5ff; text-shadow:0 0 10px rgba(0,229,255,.8); }
.pvp-card.cos-nameGold .pvp-card-name{ color:#ffd76a; text-shadow:0 0 10px rgba(255,215,106,.8); }
.pvp-card-title{ display:block; margin-top:-4px; font-size:11px; font-weight:700; letter-spacing:.5px; color:#c9a8ff; }

/* leaderboard: This week / Last week switch */
.lb-view-toggle{ display:inline-flex; gap:4px; padding:4px; margin:4px 0 10px; border-radius:12px; background:rgba(20,12,38,.7); border:1px solid rgba(139,63,255,.3); }
.lb-view-toggle button{ padding:7px 14px; border:none; border-radius:9px; background:none; color:#aeb8d6; font:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.lb-view-toggle button.active{ background:linear-gradient(90deg,#6b3bff,#00b8ff); color:#fff; }

/*==================================================
    EQUIPMENT PAGE — PvP card, hunting sockets, items
==================================================*/
#gearRoot{ padding:4px 24px 24px; }

.gear-card{
    display:grid;
    grid-template-columns:1fr 1.2fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:"weapon beast armor" "helmet beast .";
    gap:12px;
    align-items:stretch;
    margin:10px 0 14px;
}
.gear-card > .gear-socket:nth-child(1){ grid-area:weapon; }
.gear-card > .gear-card-beast{ grid-area:beast; }
.gear-card > .gear-socket:nth-child(3){ grid-area:armor; }
.gear-card > .gear-socket:nth-child(4){ grid-area:helmet; }

.gear-socket, .gear-card-beast, .gear-item{
    display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
    padding:12px; border-radius:16px;
    background:linear-gradient(160deg, rgba(50,20,90,.4), rgba(14,10,26,.9) 65%);
    border:1px solid rgba(139,63,255,.3);
}
.gear-card-beast{ border-color:rgba(0,229,255,.45); box-shadow:0 0 22px rgba(0,229,255,.15); justify-content:center; }
.gear-card-beast img{ width:100%; max-width:170px; border-radius:12px; }
.gear-socket img, .gear-item img{ width:72px; height:72px; object-fit:contain; border-radius:10px; }
.gear-socket-label{ font-size:11px; font-weight:800; letter-spacing:1px; color:#9fb3d6; text-transform:uppercase; }
.gear-socket small, .gear-item small{ color:#9fb3d6; font-size:12px; }
.gear-thumb-empty{ display:grid; place-items:center; width:72px; height:72px; border-radius:10px; border:1px dashed rgba(255,255,255,.2); color:#7f8bab; font-size:11px; padding:4px; }
.gear-card-beast .gear-thumb-empty{ width:150px; height:180px; }
.gear-beast-select{ width:100%; padding:7px; border-radius:8px; background:#0b0a1a; color:#fff; border:1px solid rgba(139,63,255,.4); }

.gear-card-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:22px; }
.gear-card-stats div{ padding:10px; border-radius:12px; background:rgba(14,10,26,.7); border:1px solid rgba(255,255,255,.07); text-align:center; }
.gear-card-stats span{ display:block; font-size:11px; color:#9fb3d6; }
.gear-card-stats strong{ font-size:16px; }
.gear-card-total{ border-color:rgba(255,215,106,.45) !important; }
.gear-card-total strong{ color:#ffd76a; }

.gear-hunt-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:22px; }
.gear-hunt-row{ display:grid; grid-template-columns:80px 1fr 1.6fr auto; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(14,10,26,.7); border:1px solid rgba(255,255,255,.06); font-size:13px; }
.gear-hunt-level{ font-weight:800; }
.gear-hunt-beast{ color:#9fb3d6; }
.gear-hunt-item.rarity-none{ color:#6f7a98; font-style:italic; }

.gear-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.gear-item-stat{ color:#35ff96; font-weight:700; font-size:13px; }

.rarity-uncommon.gear-item, .rarity-uncommon.gear-socket{ border-color:rgba(53,255,150,.45); }
.rarity-rare.gear-item, .rarity-rare.gear-socket{ border-color:rgba(0,170,255,.55); }
.rarity-epic.gear-item, .rarity-epic.gear-socket{ border-color:rgba(170,80,255,.65); }
.rarity-legendary.gear-item, .rarity-legendary.gear-socket{ border-color:rgba(255,190,60,.7); }
.rarity-mythic.gear-item, .rarity-mythic.gear-socket{ border-color:rgba(255,70,120,.75); }
.rarity-ultimate.gear-item, .rarity-ultimate.gear-socket{ border-color:rgba(255,255,255,.85); box-shadow:0 0 18px rgba(255,255,255,.25); }

@media (max-width:820px){
    #gearRoot{ padding:4px 10px 16px; }
    .gear-card{ grid-template-columns:1fr 1fr; grid-template-areas:"beast beast" "weapon armor" "helmet ."; }
    .gear-card-stats{ grid-template-columns:repeat(3,1fr); }
    .gear-hunt-row{ grid-template-columns:64px 1fr; }
    .gear-hunt-row .gear-hunt-item{ grid-column:1 / -1; }
    .gear-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}


/*==================================================
    BATCH 1 FIXES
==================================================*/

/* ---- Player Stats: boxes never spill out ---- */
.player-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }

.player-stats .stat-item{ min-width:0; overflow:hidden; }

.player-stats .player-stat-row{ gap:8px; min-width:0; }

.player-stats .stat-icon-box{ width:36px; height:36px; border-radius:9px; }
.player-stats .stat-icon-box img{ width:24px; height:24px; }

.player-stats .stat-text{ min-width:0; flex:1 1 auto; }

.player-stats .stat-item span,
.player-stats .stat-item strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ---- Beast Coin chest box (8th Player Stats box) ---- */
.stat-chest{ cursor:default; }

.stat-chest .stat-icon-box{
    background:rgba(255,215,106,.08);
    box-shadow:0 0 12px rgba(255,215,106,.18), inset 0 0 8px rgba(255,215,106,.1);
}

.stat-chest:not(.has-chest) strong{ color:#9aa6c0 !important; text-shadow:none; }

.stat-chest.has-chest{
    cursor:pointer;
    border-color:rgba(255,215,106,.75);
    background:linear-gradient(145deg, rgba(255,200,61,.18), rgba(124,44,255,.12));
    animation:statChestGlow 1.8s ease-in-out infinite;
}

.stat-chest.has-chest strong{ color:#ffd76a !important; text-shadow:0 0 10px rgba(255,215,106,.6); }
.stat-chest.has-chest span{ color:#ffe9b0 !important; }

.stat-chest.expiring{ border-color:#ff7a59; animation-duration:.8s; }
.stat-chest.expiring strong{ color:#ffb49e !important; }

.stat-chest.just-dropped{ animation:statChestPop .6s ease-out, statChestGlow 1.8s ease-in-out .6s infinite; }

.stat-chest:focus-visible{ outline:2px solid #ffd76a; outline-offset:2px; }

@keyframes statChestGlow{
    0%,100%{ box-shadow:0 0 8px rgba(255,200,61,.35); }
    50%{ box-shadow:0 0 22px rgba(255,200,61,.75); }
}

@keyframes statChestPop{
    0%{ transform:scale(.9); }
    60%{ transform:scale(1.06); }
    100%{ transform:scale(1); }
}

/* ---- Chest notice at the top of the screen ---- */
.chest-notice{
    position:fixed;
    top:calc(12px + env(safe-area-inset-top, 0px));
    left:50%;
    z-index:9995;
    display:flex;
    align-items:center;
    gap:10px;
    max-width:min(92vw, 380px);
    padding:10px 16px 10px 10px;
    border:1px solid rgba(255,215,106,.8);
    border-radius:14px;
    background:linear-gradient(160deg, rgba(60,30,100,.97), rgba(20,12,36,.98));
    box-shadow:0 0 24px rgba(255,215,106,.4);
    color:#fff;
    text-align:left;
    cursor:pointer;
    transform:translate(-50%, -140%);
    opacity:0;
    transition:transform .35s ease-out, opacity .35s ease-out;
}

.chest-notice.show{ transform:translate(-50%, 0); opacity:1; }
.chest-notice.hide{ transform:translate(-50%, -140%); opacity:0; pointer-events:none; }

.chest-notice img{ width:32px; height:32px; flex-shrink:0; filter:drop-shadow(0 0 6px rgba(255,215,106,.6)); }
.chest-notice span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.chest-notice strong{ font-size:14px; color:#ffd76a; }
.chest-notice small{ font-size:12px; color:#dfe6f5; }

/* phones: dot on the Stats tab while a chest waits */
.mobile-tabbar button{ position:relative; }
.mobile-tabbar button.has-chest::after{
    content:"";
    position:absolute;
    top:6px;
    right:calc(50% - 18px);
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ffd76a;
    box-shadow:0 0 8px rgba(255,215,106,.9);
}

@media (prefers-reduced-motion:reduce){
    .stat-chest.has-chest, .stat-chest.just-dropped{ animation:none; }
    .chest-notice{ transition:none; }
}

/* ---- Boss card: sparkles over the blurred background, not on the boss ---- */
.boss-card-compact > *:not(.boss-card-sparkles){ position:relative; z-index:1; }

.boss-card-sparkles{ z-index:0; }

.boss-card-sparkles span:nth-child(1){  left:4%;  top:6%;  animation-delay:0s; }
.boss-card-sparkles span:nth-child(2){  left:12%; top:24%; animation-delay:.7s; }
.boss-card-sparkles span:nth-child(3){  left:6%;  top:44%; animation-delay:1.4s; }
.boss-card-sparkles span:nth-child(4){  left:14%; top:62%; animation-delay:2.2s; }
.boss-card-sparkles span:nth-child(5){  left:5%;  top:80%; animation-delay:.4s; }
.boss-card-sparkles span:nth-child(6){  left:18%; top:92%; animation-delay:1.9s; }
.boss-card-sparkles span:nth-child(7){  left:88%; top:8%;  animation-delay:1.1s; }
.boss-card-sparkles span:nth-child(8){  left:94%; top:26%; animation-delay:2.6s; }
.boss-card-sparkles span:nth-child(9){  left:84%; top:42%; animation-delay:.2s; }
.boss-card-sparkles span:nth-child(10){ left:93%; top:58%; animation-delay:1.6s; }
.boss-card-sparkles span:nth-child(11){ left:86%; top:76%; animation-delay:2.9s; }
.boss-card-sparkles span:nth-child(12){ left:95%; top:90%; animation-delay:.9s; }
.boss-card-sparkles span:nth-child(13){ left:30%; top:3%;  animation-delay:2.4s; }
.boss-card-sparkles span:nth-child(14){ left:70%; top:4%;  animation-delay:1.2s; }
.boss-card-sparkles span:nth-child(15){ left:26%; top:70%; animation-delay:.5s; }
.boss-card-sparkles span:nth-child(16){ left:74%; top:68%; animation-delay:2s; }
.boss-card-sparkles span:nth-child(17){ left:38%; top:88%; animation-delay:1.5s; }
.boss-card-sparkles span:nth-child(18){ left:62%; top:94%; animation-delay:.8s; }

@media (prefers-reduced-motion:reduce){
    .boss-card-sparkles span{ animation:none; opacity:.5; }
}

/* ---- Boss timer (bottom of the boss card) ---- */
.boss-timer{
    display:flex;
    align-items:baseline;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin:10px auto 4px;
    padding:8px 14px;
    width:fit-content;
    max-width:100%;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(8,6,18,.55);
}

.boss-timer span{ font-size:12px; color:#b9c3da; }

.boss-timer strong{
    font-size:16px;
    font-weight:800;
    color:#fff;
    font-variant-numeric:tabular-nums;
    letter-spacing:.02em;
}

/*==================================================
    ARENA LOADOUT (Batch 3)
    [3 combat]  [ BEAST ]  [3 hunting]
==================================================*/
.al-wrap{ display:flex; flex-direction:column; gap:14px; padding:4px 2px 12px; }

.al-intro{ margin:0; color:#cdd6ea; font-size:13px; text-align:center; }

.al-board{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);
    gap:12px;
    align-items:stretch;
}

.al-side{ display:flex; flex-direction:column; gap:10px; }

.al-slot, .al-beast, .al-pick{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    min-width:0;
    padding:8px;
    border-radius:12px;
    border:1px dashed rgba(255,255,255,.22);
    background:rgba(12,10,26,.6);
    color:#fff;
    cursor:pointer;
    text-align:center;
    transition:border-color .2s, background .2s;
}

.al-slot{ flex:1 1 0; justify-content:center; }
.al-slot.filled, .al-beast:not(.rarity-none), .al-pick{ border-style:solid; }
.al-slot:hover, .al-beast:hover, .al-pick:hover{ background:rgba(124,44,255,.14); }
.al-slot:focus-visible, .al-beast:focus-visible, .al-pick:focus-visible{ outline:2px solid #00E5FF; outline-offset:2px; }

.al-slot-label{ font-size:11px; color:#9aa6c0; }
.al-slot img{ width:52px; height:52px; object-fit:contain; }
.al-slot small, .al-pick small{ font-size:11px; color:#dfe6f5; }
.al-slot-empty{ font-size:12px; color:#7d879e; padding:14px 0; }

.al-beast{ justify-content:center; padding:14px 10px; }
.al-beast img{ width:100%; max-width:190px; aspect-ratio:1; object-fit:contain; }
.al-beast strong{ font-size:15px; }
.al-beast small{ font-size:12px; color:#cdd6ea; }

.al-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px;
}

.al-stats div{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.al-stats span{ font-size:11px; color:#9aa6c0; }
.al-stats strong{ font-size:15px; color:#fff; font-variant-numeric:tabular-nums; }

.al-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

.al-pick-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
    gap:10px;
    max-height:55vh;
    overflow-y:auto;
    padding:2px;
}

.al-pick img{ width:72px; height:72px; object-fit:contain; }
.al-pick strong{ font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.al-pick.chosen{ box-shadow:0 0 0 2px #00E5FF inset; }
.al-pick-clear{ margin-top:10px; }

/* rarity borders */
.al-slot.rarity-common, .al-beast.rarity-common, .al-pick.rarity-common{ border-color:rgba(200,200,210,.55); }
.al-slot.rarity-uncommon, .al-beast.rarity-uncommon, .al-pick.rarity-uncommon{ border-color:rgba(80,220,120,.7); }
.al-slot.rarity-rare, .al-beast.rarity-rare, .al-pick.rarity-rare{ border-color:rgba(60,160,255,.75); }
.al-slot.rarity-epic, .al-beast.rarity-epic, .al-pick.rarity-epic{ border-color:rgba(170,90,255,.8); }
.al-slot.rarity-legendary, .al-beast.rarity-legendary, .al-pick.rarity-legendary{ border-color:rgba(255,190,60,.85); }
.al-slot.rarity-mythic, .al-beast.rarity-mythic, .al-pick.rarity-mythic{ border-color:rgba(255,70,120,.85); }
.al-slot.rarity-ultimate, .al-beast.rarity-ultimate, .al-pick.rarity-ultimate{ border-color:rgba(255,255,255,.9); box-shadow:0 0 16px rgba(255,255,255,.2); }

.gear-item-arena{
    display:inline-block;
    padding:6px 10px;
    border-radius:8px;
    font-size:12px;
    color:#9aa6c0;
    border:1px solid rgba(255,255,255,.12);
}

@media (max-width:820px){
    .al-board{ grid-template-columns:1fr; }
    .al-beast{ order:-1; }
    .al-side{ flex-direction:row; }
    .al-slot img{ width:44px; height:44px; }
    .al-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/*==================================================
    SERVER BOSSES (Batch 3B)
==================================================*/
.boss-note{ margin:6px 0 0; font-size:12px; color:#b9c3da; text-align:center; }

.boss-refill-btn{ display:block; margin:8px auto 0; }

.boss-claim-btn{ display:block; width:100%; margin-top:10px; }

.boss-pending{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin:10px 0 0;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(255,215,106,.45);
    background:rgba(255,200,61,.08);
}

.boss-pending span{ font-size:13px; color:#ffe9b0; }

/*==================================================
    MARKETPLACE (Batch 4)
==================================================*/
#marketRoot{ display:flex; flex-direction:column; gap:12px; }

.market-tabs{ display:flex; gap:8px; flex-wrap:wrap; }

.market-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}

.market-toolbar label, .market-sell label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:12px;
    color:#9aa6c0;
}

.market-toolbar select, .market-sell select, .market-sell input{
    min-width:180px;
    padding:9px 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(8,6,18,.7);
    color:#fff;
    font-size:14px;
}

.market-list{ display:flex; flex-direction:column; gap:8px; }

.market-row{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(12,10,26,.6);
}

.market-row.closed{ opacity:.6; }

.market-mat{ display:flex; align-items:center; gap:10px; min-width:0; }
.market-mat img{ width:34px; height:34px; object-fit:contain; flex-shrink:0; }
.market-mat span, .market-price{ display:flex; flex-direction:column; min-width:0; }
.market-mat strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.market-mat small, .market-price small{ font-size:12px; color:#9aa6c0; }
.market-price strong{ color:#ffd76a; font-variant-numeric:tabular-nums; }

.market-own{ font-size:12px; color:#9aa6c0; }

.market-sell{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:460px;
}

.market-preview{ margin:0; font-size:13px; color:#dfe6f5; }

.market-rules{ margin:0; padding-left:18px; font-size:12px; color:#b9c3da; display:flex; flex-direction:column; gap:4px; }

.market-sub{ margin:0; font-size:13px; color:#b9c3da; }

@media (max-width:600px){
    .market-row{ grid-template-columns:minmax(0,1fr) auto; }
    .market-row .market-price{ grid-column:1; }
    .market-row > button, .market-row > .market-own{ grid-column:2; grid-row:1 / span 2; }
    .market-toolbar select, .market-sell select, .market-sell input{ min-width:0; width:100%; }
}

/* Quest buttons: hover only glows (no jump), the press look only on click */
.quest-btn.craft-btn:hover:not(:disabled){
    transform:none;
    filter:brightness(1.12);
    box-shadow:0 0 18px rgba(177,77,255,.5);
}
.quest-btn.craft-btn:active:not(:disabled){
    transform:scale(.97);
    filter:brightness(.95);
}

/*==================================================
    BATCH B
==================================================*/
/* header: tap Game BC for today's history */
.coin-card-click{ cursor:pointer; }
.coin-card-click:hover{ filter:brightness(1.12); }
.coin-card.hidden{ display:none !important; }
.bc-in{ color:#34d399 !important; }
.bc-out{ color:#f87171 !important; }
.bc-history{ max-height:46vh; overflow-y:auto; margin-top:10px; }

@media (max-width:700px){
    .coin-card-wallet small, .coin-card-presale small{ font-size:10px; }
}

/* boss: your place in the pool */
.boss-position{
    display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px;
    margin:10px auto 0; padding:8px 14px; width:fit-content; max-width:100%;
    border-radius:10px; border:1px solid rgba(255,215,106,.35); background:rgba(255,200,61,.07);
    font-size:13px; color:#ffe9b0;
}
.boss-position strong{ color:#ffd76a; }

.leaderboard-you-box{
    margin:8px 0 10px; padding:10px 14px; border-radius:10px;
    border:1px solid rgba(255,215,106,.35); background:rgba(255,200,61,.07);
    font-size:13px; color:#ffe9b0;
}
.leaderboard-you-box strong{ color:#ffd76a; }

/* cosmetics other players can see on the leaderboard */
.leaderboard-row.lb-cos-frameBronze{ box-shadow:inset 3px 0 0 #cd7f32; }
.leaderboard-row.lb-cos-frameSilver{ box-shadow:inset 3px 0 0 #d9e2ec; }
.leaderboard-row.lb-cos-frameGold{ box-shadow:inset 3px 0 0 #ffd76a, 0 0 12px rgba(255,215,106,.25); }
.leaderboard-name.lb-cos-nameCyan{ color:#00e5ff; text-shadow:0 0 8px rgba(0,229,255,.7); }
.leaderboard-name.lb-cos-nameGold{ color:#ffd76a; text-shadow:0 0 8px rgba(255,215,106,.7); }
.lb-title{ display:inline-block; margin-left:8px; padding:1px 7px; border-radius:6px; font-style:normal; font-size:11px; background:rgba(139,92,255,.2); color:#c4b5fd; }

/* blend: pick your NFTs */
.blend-pick-slots{ display:flex; justify-content:center; gap:10px; margin:4px 0 6px; }
.blend-pick-slot{
    width:84px; height:96px; border-radius:12px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    border:2px dashed rgba(255,255,255,.2); background:rgba(8,6,18,.5); color:#fff; font:inherit;
}
.blend-pick-slot span{ font-size:28px; color:#7d879e; }
.blend-pick-slot.filled{ border-style:solid; border-color:#00e5ff; cursor:pointer; }
.blend-pick-slot img{ width:52px; height:52px; object-fit:contain; }
.blend-pick-slot small{ font-size:11px; }
.blend-pick-slot em{ font-style:normal; font-size:10px; color:#9aa6c0; }
.blend-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; max-height:44vh; overflow-y:auto; padding:2px; }
.blend-pick-card{
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 6px;
    border-radius:12px; border:1px solid rgba(255,255,255,.15); background:rgba(12,10,26,.6);
    color:#fff; font:inherit; cursor:pointer;
}
.blend-pick-card img{ width:60px; height:60px; object-fit:contain; }
.blend-pick-card strong{ font-size:12px; }
.blend-pick-card small{ font-size:11px; color:#9aa6c0; }
.blend-pick-card.chosen{ border-color:#00e5ff; box-shadow:0 0 0 2px rgba(0,229,255,.35) inset; }

/* equipment page: one card per hunting level (like My Beasts) */
.gear-level-grid{ margin-bottom:18px; }
.gear-level-slot.locked{ opacity:.55; }
.gear-level-item{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:6px 0; }
.gear-level-item img, .gear-level-item .gear-thumb-empty{ width:72px; height:72px; object-fit:contain; }
.gear-level-actions{ display:flex; gap:8px; margin-top:auto; }
.gear-level-actions > *{ flex:1; }
.gear-pick img{ width:56px; height:56px; }

/* marketplace: bigger Buy button that stays inside the row */
.market-row > .craft-btn{
    width:auto; min-width:92px; height:40px; padding:0 18px; font-size:14px; flex-shrink:0;
}
@media (max-width:600px){
    .market-row{ grid-template-columns:minmax(0,1fr) auto; }
    .market-row > .craft-btn{ grid-column:2; grid-row:1 / span 2; min-width:78px; }
}

/* ---------- PvP: both cards the same size, loadout around your Beast ---------- */
.pvp-cards{ align-items:stretch; }
.pvp-card{ height:100%; justify-content:flex-start; min-width:0; }
.pvp-card > strong.pvp-card-name{ font-size:16px; line-height:1.3; min-height:21px; }
.pvp-card .pvp-card-title{ min-height:18px; font-size:12px; color:#c4b5fd; }
.pvp-card .pvp-card-title-empty{ visibility:hidden; }

.pvp-card-art{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 34px;
    align-items:center;
    gap:8px;
    width:100%;
}
.pvp-card-art > img{ width:100%; max-width:150px; aspect-ratio:1; object-fit:contain; justify-self:center; }
.pvp-gear-col{ display:flex; flex-direction:column; gap:6px; }
.pvp-gear{
    width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.25); background:rgba(8,6,18,.6);
}
.pvp-gear img{ width:26px !important; height:26px; object-fit:contain; filter:none !important; }
.pvp-gear.empty{ border-style:dashed; border-color:rgba(255,255,255,.12); }
.pvp-gear.rarity-common{ border-color:rgba(200,200,210,.6); }
.pvp-gear.rarity-uncommon{ border-color:rgba(80,220,120,.7); }
.pvp-gear.rarity-rare{ border-color:rgba(60,160,255,.8); }
.pvp-gear.rarity-epic{ border-color:rgba(170,90,255,.85); }
.pvp-gear.rarity-legendary{ border-color:rgba(255,190,60,.9); }
.pvp-gear.rarity-mythic{ border-color:rgba(255,70,120,.9); }
.pvp-gear.rarity-ultimate{ border-color:#fff; }

.pvp-card .pvp-stat{ width:100%; }

.pvp-card-link{
    margin-top:auto;
    padding:7px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.55);
    background:transparent;
    color:#fff;
    font:inherit; font-size:12px; font-weight:700;
    cursor:pointer;
}
.pvp-card-link:hover{ background:rgba(255,255,255,.08); }
.pvp-card-link-empty{ visibility:hidden; }

/* reward + chance: their own row under the cards */
.pvp-odds{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    margin:12px 0 4px;
}
.pvp-odds > div{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:10px; border-radius:12px;
    border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
}
.pvp-odds span{ font-size:12px; color:#9aa6c0; }
.pvp-odds strong{ font-size:15px; color:#fff; text-align:center; }
#pvpWinChance{ color:#35ff96; }

/* "New Opponent": white outline instead of blue-grey */
#findOpponentBtn{ border-color:rgba(255,255,255,.6); color:#fff; }
#findOpponentBtn:hover{ background:rgba(255,255,255,.08); }

@media (max-width:600px){
    .pvp-cards{ grid-template-columns:1fr; }
    .pvp-odds{ grid-template-columns:1fr 1fr; }
}

/*==================================================
    MARKETPLACE — ACTIVITY TAB
==================================================*/
.market-scope{ display:flex; gap:6px; flex-wrap:wrap; }

.market-activity-who{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.market-activity-who small{ font-size:12px; color:#9aa6c0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.market-activity-row .market-price{ text-align:right; align-items:flex-end; }

.market-side{
    align-self:flex-start;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    padding:2px 8px;
    border-radius:999px;
}
.market-side-sold{ color:#7dffb0; background:rgba(40,200,120,.14); border:1px solid rgba(40,200,120,.35); }
.market-side-bought{ color:#7fd8ff; background:rgba(0,170,255,.14); border:1px solid rgba(0,170,255,.35); }

@media (max-width:600px){
    .market-activity-row{ grid-template-columns:minmax(0,1fr) auto; }
    .market-activity-row .market-activity-who{ grid-column:1; }
    .market-activity-row .market-price{ grid-column:2; grid-row:1 / span 2; }
}

/*==================================================
    DURABILITY (Beast + Equipment NFTs)
==================================================*/
.dur-wrap{ display:flex; flex-direction:column; gap:3px; width:100%; margin:4px 0; }
.dur-wrap small{ font-size:11px; color:#b9c3da; }
.dur-bar{ height:6px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.dur-bar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#20d38a,#7dffb0); transition:width .4s ease; }
.dur-warn .dur-bar span{ background:linear-gradient(90deg,#e0a91a,#ffd76a); }
.dur-warn small{ color:#ffd76a; }
.dur-low .dur-bar span{ background:linear-gradient(90deg,#e0521a,#ff9a5c); }
.dur-low small{ color:#ff9a5c; }
.dur-zero .dur-bar span{ background:#ff4d4d; }
.dur-zero small{ color:#ff6b6b; font-weight:700; }

.beast-slot-dur{ display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:6px 0; }
.beast-feed-btn, .gear-repair-btn{ align-self:center; padding:6px 14px; font-size:12px; }

.al-slot-dur{ font-size:10px; color:#9aa6c0; }
.al-slot-dur.low{ color:#ff9a5c; font-weight:700; }

.dur-food-list{ display:flex; flex-direction:column; gap:8px; margin:10px 0; text-align:left; }
.dur-food-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(12,10,26,.6);
}
.dur-food-row span{ display:flex; flex-direction:column; min-width:0; }
.dur-food-row small{ font-size:12px; color:#9aa6c0; }
.dur-food-row button{ padding:6px 10px; font-size:12px; white-space:nowrap; }

@media (max-width:480px){
    .dur-food-row{ grid-template-columns:minmax(0,1fr) auto; }
    .dur-food-row span{ grid-column:1 / span 2; }
}

/*==================================================
    BATCH F
==================================================*/

/* level card: hunting gear pill (next to EQUIPPED / NOT EQUIPPED) */
.level-badges{ flex-wrap:wrap; }
.gear-status-pill{
    display:inline-flex;
    padding:4px 12px;
    border-radius:20px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    cursor:pointer;
    color:#9fb3d6;
    background:rgba(255,255,255,.05);
    border:1px dashed rgba(255,255,255,.22);
    white-space:nowrap;
}
.gear-status-pill:hover{ filter:brightness(1.25); border-color:rgba(0,229,255,.5); }
.gear-status-pill.has-gear{
    color:#7fe9ff;
    background:rgba(0,229,255,.1);
    border:1px solid rgba(0,229,255,.4);
}

/* sidebar while /config loads */
.sidebar-nav-link.nav-loading .nav-label{ opacity:.6; font-style:italic; }

/* Level 1 slot: durability bar as wide as the others */
.beast-slot-dur{ width:100%; align-self:stretch; }
.beast-slot-empty-body .beast-slot-dur,
.beast-slot-unlocked-body .beast-slot-dur{ width:100%; }
.beast-slot-dur .dur-wrap{ width:100%; }

/* slot highlighted from the durability notice */
.beast-slot.dur-highlight{ animation:durHighlight 1.2s ease-in-out 3; }
@keyframes durHighlight{
    0%,100%{ box-shadow:0 0 0 rgba(255,154,92,0); }
    50%{ box-shadow:0 0 0 3px rgba(255,154,92,.8), 0 0 28px rgba(255,154,92,.45); }
}

/* durability notice: stays until closed, on every page */
.dur-notice-wrap{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:9000;
    display:flex;
    flex-direction:column;
    gap:10px;
    width:min(340px, calc(100vw - 32px));
}
.dur-notice{
    display:flex;
    align-items:stretch;
    gap:12px;
    padding:12px;
    border-radius:16px;
    background:linear-gradient(160deg, rgba(18,24,48,.97), rgba(10,12,28,.98));
    border:1px solid rgba(255,215,106,.45);
    box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 20px rgba(255,215,106,.12);
    animation:durNoticeIn .25s ease-out;
}
.dur-notice.dur-low{ border-color:rgba(255,154,92,.6); box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 20px rgba(255,154,92,.16); }
.dur-notice-zero{ border-color:rgba(255,77,77,.75); box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 22px rgba(255,77,77,.2); }
.dur-notice-img{
    flex:0 0 64px; height:64px; border-radius:12px; overflow:hidden;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center; align-self:center;
}
.dur-notice-img img{ width:100%; height:100%; object-fit:cover; }
.dur-notice-img span{ color:#9fb3d6; font-weight:700; font-size:20px; }
.dur-notice-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; text-align:left; }
.dur-notice-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dur-notice-tag{ font-size:10px; font-weight:800; letter-spacing:.08em; color:#ffd76a; }
.dur-notice.dur-low .dur-notice-tag{ color:#ff9a5c; }
.dur-notice-zero .dur-notice-tag{ color:#ff6b6b; }
.dur-notice-name{ color:#fff; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dur-notice-body small{ color:#b9c3da; font-size:11px; }
.dur-notice-body .dur-bar{ height:5px; }
.dur-notice-go{
    margin-top:2px; align-self:flex-start;
    padding:6px 14px; border-radius:999px; cursor:pointer;
    font-size:12px; font-weight:700; color:#0b1020;
    background:linear-gradient(90deg,#35ffd2,#7db8ff); border:none;
}
.dur-notice-go:hover{ filter:brightness(1.1); }
.dur-notice-x{
    background:none; border:none; color:#9fb3d6; font-size:18px; line-height:1;
    cursor:pointer; padding:0 2px;
}
.dur-notice-x:hover{ color:#fff; }
@keyframes durNoticeIn{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }

/* Feed popup */
.feed-buy, .feed-use{
    text-align:left;
    padding:12px;
    border-radius:14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
}
.feed-buy{ border-color:rgba(255,200,61,.35); background:rgba(255,200,61,.05); }
.feed-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.feed-head h4{ margin:0; font-size:15px; color:#fff; letter-spacing:.5px; }
.feed-head small{ color:#b9c3da; font-size:12px; }
.feed-head small b{ color:#ffd76a; }
.feed-buy-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.feed-buy-card{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:10px 8px; border-radius:12px; text-align:center;
    background:rgba(10,8,22,.6); border:1px solid rgba(255,255,255,.1);
}
.feed-buy-card strong{ font-size:13px; color:#fff; }
.feed-restore{ font-size:20px; font-weight:800; color:#35ff96; line-height:1; }
.feed-buy-card small{ color:#b9c3da; font-size:11px; }
.feed-buy-card .craft-btn{ width:100%; padding:7px 4px; font-size:12px; }
.feed-stepper{ display:inline-flex; align-items:center; gap:6px; }
.feed-stepper button{
    width:26px; height:26px; border-radius:8px; cursor:pointer;
    border:1px solid rgba(0,229,255,.4); background:rgba(0,229,255,.08); color:#fff; font-weight:800;
}
.feed-stepper button:disabled{ opacity:.35; cursor:default; }
.feed-stepper b{ min-width:22px; text-align:center; color:#fff; }
.feed-use-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto auto;
    align-items:center;
    gap:8px;
    padding:8px 0;
    border-top:1px solid rgba(255,255,255,.07);
}
.feed-use-row:first-of-type{ border-top:none; }
.feed-use-name{ display:flex; flex-direction:column; min-width:0; }
.feed-use-name strong{ color:#fff; font-size:13px; }
.feed-use-name small{ color:#b9c3da; font-size:11px; }
.feed-preview{ color:#7fffb0; font-size:12px; font-weight:700; white-space:nowrap; }
.feed-use-row .craft-btn{ padding:7px 12px; font-size:12px; }

/* Welcome back popup: Beast Coin row stands out */
.offline-bc-row strong{ color:#ffd76a; text-shadow:0 0 10px rgba(255,200,61,.5); }

@media (max-width:520px){
    .feed-buy-grid{ grid-template-columns:1fr; }
    .feed-buy-card{ flex-direction:row; flex-wrap:wrap; justify-content:space-between; }
    .feed-buy-card .craft-btn{ width:auto; flex:1 0 100%; }
    .feed-use-row{ grid-template-columns:minmax(0,1fr) auto; }
    .feed-preview{ grid-column:1; }
    .dur-notice-wrap{ right:10px; left:10px; bottom:10px; max-width:none; }
}

@media (prefers-reduced-motion:reduce){
    .beast-slot.dur-highlight, .dur-notice{ animation:none; }
}

/*==================================================
    BATCH G — Arena vs AI
==================================================*/

/* rank ladder box */
.pvp-ladder{
    --rk:205,127,50;
    margin-bottom:14px;
    padding:12px 14px;
    border-radius:14px;
    background:linear-gradient(160deg, rgba(var(--rk),.14), rgba(10,8,22,.7));
    border:1px solid rgba(var(--rk),.55);
    box-shadow:0 0 18px rgba(var(--rk),.15);
}
.pvp-ladder.rank-silver{ --rk:200,210,225; }
.pvp-ladder.rank-gold{ --rk:255,200,61; }
.pvp-ladder.rank-platinum{ --rk:0,229,255; }
.pvp-ladder.rank-diamond{ --rk:120,170,255; }
.pvp-ladder.rank-master{ --rk:180,90,255; }
.pvp-ladder.rank-champion{ --rk:255,90,120; }
.pvp-ladder-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.pvp-ladder-rank{ font-size:18px; letter-spacing:1px; color:rgb(var(--rk)); text-shadow:0 0 10px rgba(var(--rk),.5); text-transform:uppercase; }
.pvp-ladder-rating{ color:#b9c3da; font-size:13px; }
.pvp-ladder-bar{ height:9px; margin:8px 0 6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.pvp-ladder-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, rgba(var(--rk),.6), rgb(var(--rk))); box-shadow:0 0 10px rgba(var(--rk),.6); transition:width .6s ease; }
.pvp-ladder-foot{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:#d6dcef; }
.pvp-ladder-foot b{ color:rgb(var(--rk)); }
.pvp-ladder-loading{ color:#b9c3da; font-size:13px; }
.pvp-rules-note{ margin-top:10px; font-size:12px; color:#9fb3d6; text-align:center; }
.pvp-result-note{ font-size:12px; color:#b9c3da; margin-top:4px; }

/* battle popup: two fighters with HP bars */
.pvp-battle2{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.pvp-f{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.pvp-f-art{ position:relative; width:100%; max-width:130px; aspect-ratio:1; }
.pvp-f-art img{ width:100%; height:100%; object-fit:contain; border-radius:14px; }
.pvp-f strong{ font-size:13px; color:#fff; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pvp-hp{ width:100%; height:10px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; border:1px solid rgba(255,255,255,.15); }
.pvp-hp i{ display:block; height:100%; background:linear-gradient(90deg, #22c55e, #7fffb0); transition:width .35s ease; }
.pvp-f.enemy .pvp-hp i{ background:linear-gradient(90deg, #ef4444, #ff8a8a); }
.pvp-hp i.low{ animation:pvpLow .6s ease-in-out infinite; }
@keyframes pvpLow{ 50%{ opacity:.5; } }
.pvp-hp-num{ font-size:11px; color:#b9c3da; }
.pvp-f.hit .pvp-f-art{ animation:pvpLunge .32s ease-out; }
.pvp-f.enemy.hit .pvp-f-art{ animation:pvpLungeL .32s ease-out; }
.pvp-f.hurt .pvp-f-art img{ animation:pvpHurt .32s ease-out; }
@keyframes pvpLunge{ 40%{ transform:translateX(14px) scale(1.05); } }
@keyframes pvpLungeL{ 40%{ transform:translateX(-14px) scale(1.05); } }
@keyframes pvpHurt{ 30%{ filter:brightness(2) saturate(0); transform:translateX(-3px); } 60%{ transform:translateX(3px); } }
.pvp-f-pop{
    position:absolute; left:50%; top:30%; transform:translate(-50%,0);
    font-weight:900; font-size:18px; color:#fff; opacity:0; pointer-events:none;
    text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.pvp-f-pop.show{ animation:pvpPop .46s ease-out forwards; }
.pvp-f-pop.crit{ color:#ffd76a; font-size:22px; }
.pvp-f-pop.block{ color:#7fe9ff; }
@keyframes pvpPop{ 0%{ opacity:0; transform:translate(-50%,6px) scale(.8); } 25%{ opacity:1; transform:translate(-50%,-6px) scale(1.1); } 100%{ opacity:0; transform:translate(-50%,-26px) scale(1); } }

/* Beast Food: pay with Arena Coin or Beast Coin */
.feed-pay{ display:flex; gap:6px; width:100%; }
.feed-pay .craft-btn{ flex:1; padding:7px 4px; font-size:12px; }
.feed-pay .feed-pay-bc{ background:linear-gradient(135deg, #b8860b, #ffc83d); color:#1a1200; }

@media (max-width:520px){
    .pvp-f-art{ max-width:96px; }
    .feed-pay{ flex:1 0 100%; }
}
@media (prefers-reduced-motion:reduce){
    .pvp-f.hit .pvp-f-art, .pvp-f.hurt .pvp-f-art img, .pvp-hp i.low{ animation:none; }
}

/*==================================================
    BATCH H
==================================================*/

/* staking boost chip next to the Beast Coin balance */
.stake-boost-chip{
    display:inline-flex; align-items:center;
    margin-left:6px; padding:1px 7px; border-radius:99px;
    font-size:10px; font-weight:800; letter-spacing:.4px;
    color:#1a1200; background:linear-gradient(135deg, #ffc83d, #ffe89a);
    box-shadow:0 0 10px rgba(255,200,61,.45);
    white-space:nowrap; vertical-align:middle;
}

/* ---------- premium Arena cosmetics ---------- */

/* frames: a moving light runs around the card border */
@property --cosAngle{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
.pvp-card.cos-frameBronze,
.pvp-card.cos-frameSilver,
.pvp-card.cos-frameGold{
    position:relative;
    border:2px solid transparent !important;
    background:
        linear-gradient(160deg, rgba(40,20,70,.96), rgba(12,10,24,.98)) padding-box,
        conic-gradient(from var(--cosAngle), var(--c1), var(--c2), var(--c3), var(--c2), var(--c1)) border-box !important;
    animation:cosSpin 4s linear infinite;
}
.pvp-card.cos-frameBronze{ --c1:#5a3312; --c2:#cd7f32; --c3:#ffd1a1; box-shadow:0 0 18px rgba(205,127,50,.45); }
.pvp-card.cos-frameSilver{ --c1:#50586a; --c2:#c9d2e3; --c3:#ffffff; box-shadow:0 0 22px rgba(201,210,227,.5); }
.pvp-card.cos-frameGold{
    --c1:#7a5200; --c2:#ffc83d; --c3:#fff3b0;
    box-shadow:0 0 28px rgba(255,200,61,.6), 0 0 60px rgba(255,170,0,.25), inset 0 0 22px rgba(255,200,61,.18) !important;
}
/* gold frame: corner ornaments */
.pvp-card.cos-frameGold::before,
.pvp-card.cos-frameGold::after{
    content:""; position:absolute; width:26px; height:26px; pointer-events:none;
    border:3px solid #ffd76a; filter:drop-shadow(0 0 6px rgba(255,200,61,.9));
}
.pvp-card.cos-frameGold::before{ top:-3px; left:-3px; border-right:none; border-bottom:none; border-top-left-radius:12px; }
.pvp-card.cos-frameGold::after{ bottom:-3px; right:-3px; border-left:none; border-top:none; border-bottom-right-radius:12px; }
@keyframes cosSpin{ to{ --cosAngle:360deg; } }

/* names */
.pvp-card.cos-nameCyan .pvp-card-name{
    color:#7fe9ff;
    animation:cosCyanPulse 2.4s ease-in-out infinite;
}
@keyframes cosCyanPulse{
    0%,100%{ text-shadow:0 0 8px rgba(0,229,255,.7), 0 0 18px rgba(0,229,255,.35); }
    50%{ text-shadow:0 0 14px rgba(0,229,255,1), 0 0 32px rgba(0,229,255,.6); }
}
.pvp-card.cos-nameGold .pvp-card-name{
    background:linear-gradient(100deg, #b8860b 0%, #ffd76a 30%, #fff8d6 50%, #ffd76a 70%, #b8860b 100%);
    background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 8px rgba(255,200,61,.75));
    animation:cosShimmer 3s linear infinite;
}
@keyframes cosShimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

/* titles: badges */
.pvp-card-title.cos-title{
    display:inline-block; margin:2px auto 0; padding:3px 12px; border-radius:99px;
    font-size:11px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase;
    position:relative; overflow:hidden;
}
.pvp-card-title.cos-titleSlayer{
    color:#ffd0d0; background:linear-gradient(135deg, rgba(120,10,30,.9), rgba(220,40,60,.8));
    border:1px solid rgba(255,90,110,.8); box-shadow:0 0 14px rgba(255,60,90,.5);
}
.pvp-card-title.cos-titleChampion{
    color:#2a1a00; background:linear-gradient(135deg, #b8860b, #ffd76a 45%, #fff3b0 55%, #ffc83d);
    border:1px solid #fff3b0; box-shadow:0 0 18px rgba(255,200,61,.8), 0 0 36px rgba(255,170,0,.35);
}
.pvp-card-title.cos-titleChampion::before{ content:"\265B  "; }
.pvp-card-title.cos-title::after{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
    transform:skewX(-20deg); animation:cosSweep 2.8s ease-in-out infinite;
}
@keyframes cosSweep{ 0%,55%{ left:-60%; } 100%{ left:130%; } }

/* leaderboard rows get the same feel */
.leaderboard-row.lb-cos-frameGold{ box-shadow:inset 3px 0 0 #ffd76a, 0 0 16px rgba(255,215,106,.35); background:linear-gradient(90deg, rgba(255,200,61,.1), transparent 60%); }
.leaderboard-name.lb-cos-nameGold{
    background:linear-gradient(100deg, #b8860b, #ffd76a 40%, #fff8d6 50%, #ffd76a 60%, #b8860b);
    background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:cosShimmer 3s linear infinite;
}

/* equipment slots: locked look */
.gear-level-slot.locked{ opacity:.7; }
.gear-level-slot.locked .slot-empty-icon{ font-size:22px; }

@media (prefers-reduced-motion:reduce){
    .pvp-card.cos-frameBronze, .pvp-card.cos-frameSilver, .pvp-card.cos-frameGold,
    .pvp-card.cos-nameCyan .pvp-card-name, .pvp-card.cos-nameGold .pvp-card-name,
    .pvp-card-title.cos-title::after, .leaderboard-name.lb-cos-nameGold{ animation:none; }
}

/* ===== Level card: small durability bars (Beast + hunting gear) ===== */
.level-dur{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:4px 0 6px; }
.level-dur:empty{ display:none; }
.level-dur-row{ display:flex; align-items:center; gap:6px; font-size:11px; color:#b9c3da; min-width:120px; }
.level-dur-row > span{ min-width:44px; }
.level-dur-row .dur-bar{ flex:1; width:70px; max-width:90px; height:5px; }
.level-dur-row b{ font-weight:600; color:#e6ecf8; min-width:30px; text-align:right; }
.level-dur-row.dur-warn b{ color:#ffd76a; }
.level-dur-row.dur-low b, .level-dur-row.dur-zero b{ color:#ff8a5c; }


/* ===== Blend: one Equipment type per tab ===== */
.blend-gear-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.blend-gear-tab{
    display:flex; align-items:center; gap:6px;
    padding:7px 14px; border-radius:999px; cursor:pointer;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    color:#c9d3ea; font-size:13px; font-weight:600;
}
.blend-gear-tab small{ font-size:11px; color:#8fa0c4; background:rgba(255,255,255,.08); border-radius:999px; padding:1px 7px; }
.blend-gear-tab.active{ background:rgba(53,255,210,.12); border-color:rgba(53,255,210,.55); color:#fff; }
.blend-gear-tab.active small{ color:#35ffd2; }

/* ===== Equipment page: wallet by rarity ===== */
.gear-rarity-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.gear-rarity-card{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:12px; border-radius:14px; cursor:pointer;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
    color:#e6ecf8; text-align:center;
}
.gear-rarity-card:hover{ background:rgba(255,255,255,.07); }
.gear-rarity-card img{ width:72px; height:72px; object-fit:cover; border-radius:10px; }
.gear-rarity-card small{ color:#9fb3d6; }
.gear-rarity-worn{ font-size:11px; color:#ffb27d; }

.gear-list{ display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow-y:auto; text-align:left; }
.gear-list-row{
    display:flex; align-items:center; gap:10px; padding:10px;
    border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
}
.gear-list-row img, .gear-list-row .gear-thumb-empty{ width:56px; height:56px; flex:0 0 56px; border-radius:10px; object-fit:cover; }
.gear-list-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.gear-list-info small{ color:#9fb3d6; font-size:11px; }
.gear-list-where{ font-size:11px; color:#35ffd2; }
.gear-list-actions{ display:flex; flex-direction:column; gap:6px; }
.gear-list-actions button{ padding:6px 12px; font-size:12px; white-space:nowrap; }

/* ===== Repair popup ===== */
.repair-head{ display:flex; align-items:center; gap:12px; text-align:left; }
.repair-head img{ width:64px; height:64px; border-radius:12px; object-fit:cover; }
.repair-head-text{ flex:1; min-width:0; }
.repair-change{ margin:2px 0 0; color:#e6ecf8; font-weight:700; }
.repair-change b{ color:#35ffd2; }
.repair-cost-title{ margin:12px 0 6px; font-size:13px; color:#9fb3d6; text-align:left; }
.repair-cost{ display:flex; flex-direction:column; gap:4px; }
.repair-cost-row{
    display:flex; justify-content:space-between; padding:6px 10px; border-radius:8px;
    background:rgba(255,255,255,.04); font-size:13px; color:#d6dcef;
}
.repair-cost-row strong{ color:#fff; }
.repair-cost-row.insufficient strong{ color:#ff6b6b; }

/* ===== Arena loadout: feed / repair ===== */
.al-care{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0 4px; }

/* Arena: the bot's loadout under its rarity */
.pvp-opp-gear{ display:block; margin-top:2px; font-size:11px; color:#9fb3d6; line-height:1.35; }

/*==================================================
    UI POLISH (Oct 2026)
==================================================*/

/* ---------- header: one Beast Coin card ---------- */
.coin-card-bc{ min-width:230px; cursor:pointer; }
.coin-card-bc .bc-main{ display:flex; flex-direction:column; min-width:0; }
.coin-card-bc .bc-main strong{ display:flex; align-items:center; gap:6px; }
.coin-card-bc .bc-sub{
    margin-left:auto; padding-left:12px;
    display:flex; flex-direction:column; gap:3px;
    border-left:1px solid rgba(255,255,255,.1);
    font-size:11px; color:#9fb3d6; white-space:nowrap;
}
.coin-card-bc .bc-sub b{ color:#e6ecf8; font-weight:700; }
.coin-card-bc .bc-sub .hidden{ display:none; }
.coin-card-bc .stake-boost-chip{ margin-left:0; }

@media (max-width:820px){
    .coin-card-bc{ min-width:0; }
    .coin-card-bc .bc-sub{ display:none; }          /* the full split is one tap away */
    .coin-card-bc .stake-boost-chip{ display:none; }
}

/* Beast Coin popup */
.bc-split{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; margin-bottom:10px; }
.bc-split-tile{
    display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; text-align:left;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
}
.bc-split-tile span{ font-size:11px; color:#9fb3d6; }
.bc-split-tile strong{ font-size:20px; color:#fff; }
.bc-split-tile small{ font-size:10px; color:#7f8db0; }
.bc-split-main{ border-color:rgba(255,215,106,.45); background:linear-gradient(160deg, rgba(255,200,61,.10), rgba(255,255,255,.03)); }
.bc-split-main strong{ color:#ffd76a; }
.bc-today-box{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bc-today-box > div{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.04); font-size:12px; color:#b9c3da; }
.bc-hist-row{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-bottom:1px solid rgba(255,255,255,.06); font-size:12px; text-align:left; }
.bc-hist-time{ color:#7f8db0; width:44px; flex:0 0 44px; }
.bc-hist-label{ flex:1; color:#d6dcef; }

/* ---------- page header + tabs: more room, stronger buttons ---------- */
section > .page-header{ margin-bottom:6px; }
section > .page-header .my-beasts-sub{ padding:0; margin:6px 0 0; }

.inventory-page-tabs{
    margin:18px 0 22px;
    padding:6px;
    gap:6px;
    border-radius:16px;
    background:rgba(8,12,28,.65);
    border:1px solid rgba(255,255,255,.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    overflow-x:auto;
    scrollbar-width:none;
}
.inventory-page-tabs::-webkit-scrollbar{ display:none; }

.inventory-page-tabs > button{
    flex:1 1 0;
    min-width:max-content;
    height:44px !important;
    padding:0 18px !important;
    border-radius:12px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:#9fb0d4 !important;
    font-weight:700 !important;
    font-size:13px !important;
    letter-spacing:.3px;
    white-space:nowrap;
    cursor:pointer;
    transition:background .2s, color .2s, box-shadow .2s, border-color .2s;
}
.inventory-page-tabs > button:hover{
    color:#fff !important;
    background:rgba(255,255,255,.05) !important;
    border-color:rgba(255,255,255,.08) !important;
}
.inventory-page-tabs > button.active{
    color:#fff !important;
    background:linear-gradient(100deg, #7c2cff 0%, #3b6dff 55%, #00d5ff 100%) !important;
    border-color:rgba(255,255,255,.18) !important;
    box-shadow:0 6px 18px rgba(80,90,255,.35), inset 0 1px 0 rgba(255,255,255,.25);
    text-shadow:0 1px 6px rgba(0,0,0,.35);
}

@media (max-width:700px){
    .inventory-page-tabs{ margin:14px 0 18px; }
    .inventory-page-tabs > button{ flex:0 0 auto; height:40px !important; padding:0 14px !important; font-size:12px !important; }
}

/* ---------- Arena: opponent card ---------- */
.pvp-card-rankline{ display:block; margin-top:10px; font-size:12px; color:#9fb3d6; }
.pvp-card-rankline b{ color:#fff; }
.pvp-opp-gear{ display:none; }

/* ---------- leaderboard: premium title rows ---------- */
.leaderboard-row.lb-titled{ position:relative; overflow:hidden; isolation:isolate; padding:14px 16px; }
.leaderboard-row.lb-titled::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 60%);
    background-size:250% 100%;
    animation:lbSheen 4.5s linear infinite;
}
.leaderboard-row.lb-titled-titleChampion{
    background:linear-gradient(100deg, rgba(255,196,61,.22), rgba(120,70,10,.35) 45%, rgba(20,12,4,.85));
    border:1px solid rgba(255,215,106,.75);
    box-shadow:0 0 18px rgba(255,200,61,.25), inset 0 1px 0 rgba(255,240,200,.25);
}
.leaderboard-row.lb-titled-titleChampion .leaderboard-rank{ color:#ffe08a; }
.leaderboard-row.lb-titled-titleChampion .lb-name-text{ color:#fff3cf; text-shadow:0 0 10px rgba(255,215,106,.55); }
.leaderboard-row.lb-titled-titleChampion .leaderboard-value{ color:#ffd76a; }
.leaderboard-row.lb-titled-titleSlayer{
    background:linear-gradient(100deg, rgba(255,70,110,.20), rgba(90,20,60,.4) 45%, rgba(16,6,20,.85));
    border:1px solid rgba(255,105,140,.6);
    box-shadow:0 0 16px rgba(255,80,120,.2), inset 0 1px 0 rgba(255,200,215,.2);
}
.leaderboard-row.lb-titled-titleSlayer .lb-name-text{ color:#ffe1e8; text-shadow:0 0 10px rgba(255,105,140,.5); }
.lb-title-badge{
    display:inline-block; margin-left:10px; padding:2px 10px; border-radius:999px;
    font-style:normal; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
    vertical-align:middle;
}
.lb-badge-titleChampion{ color:#2a1a00; background:linear-gradient(135deg, #fff1b8, #ffc83d 50%, #e09a1a); box-shadow:0 0 10px rgba(255,200,61,.6); }
.lb-badge-titleSlayer{ color:#fff; background:linear-gradient(135deg, #ff7aa0, #d1265a); box-shadow:0 0 10px rgba(255,80,120,.5); }
@keyframes lbSheen{ from{ background-position:150% 0; } to{ background-position:-100% 0; } }
@media (prefers-reduced-motion:reduce){ .leaderboard-row.lb-titled::after{ animation:none; } }

/* ---------- boss screens ---------- */
.boss-screen{
    position:relative; max-width:680px; margin:0 auto; padding:18px 20px 22px;
    border-radius:22px; overflow:hidden; isolation:isolate; text-align:center;
    border:1px solid rgba(255,140,40,.35);
    background:
        radial-gradient(ellipse 80% 55% at 50% 28%, rgba(255,110,20,.22), transparent 70%),
        linear-gradient(180deg, rgba(28,14,8,.92), rgba(10,8,18,.96) 60%);
    box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 40px rgba(255,120,30,.08);
}
.boss-screen-monthly{
    border-color:rgba(150,90,255,.4);
    background:
        radial-gradient(ellipse 80% 55% at 50% 28%, rgba(130,70,255,.26), transparent 70%),
        linear-gradient(180deg, rgba(18,10,34,.94), rgba(8,8,20,.97) 60%);
    box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 40px rgba(130,70,255,.1);
}
.boss-screen-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.boss-kind-chip{
    padding:5px 12px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:1px;
    color:#ffcf9a; background:rgba(255,120,30,.14); border:1px solid rgba(255,140,40,.4);
}
.boss-screen-monthly .boss-kind-chip{ color:#d6c2ff; background:rgba(130,70,255,.16); border-color:rgba(150,90,255,.45); }
.boss-screen .boss-timer{ margin:0; padding:5px 12px; border-radius:999px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); font-size:12px; }

.boss-hero{ position:relative; height:330px; display:flex; align-items:center; justify-content:center; margin-top:4px; }
.boss-aura{
    position:absolute; width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,150,50,.45), rgba(255,90,20,.12) 45%, transparent 70%);
    filter:blur(6px); animation:bossAura 4s ease-in-out infinite;
}
.boss-screen-monthly .boss-aura{ background:radial-gradient(circle, rgba(160,100,255,.5), rgba(110,50,255,.14) 45%, transparent 70%); }
.boss-ground{
    position:absolute; bottom:8px; width:220px; height:26px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(0,0,0,.65), transparent 70%);
}
@keyframes bossAura{ 0%,100%{ transform:scale(.95); opacity:.85; } 50%{ transform:scale(1.06); opacity:1; } }
.boss-hero-sparkles{ z-index:0; }

/* no square: the picture has no box, and its dark edges melt into the screen */
.boss-screen .boss-portrait-wrap{
    width:280px; height:320px; margin:0; background:none !important; border:none !important; box-shadow:none !important;
    overflow:visible; z-index:auto;
}
.boss-screen .boss-portrait-img{
    mix-blend-mode:lighten;
    -webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 50%, #000 58%, transparent 100%);
            mask-image:radial-gradient(ellipse 62% 66% at 50% 50%, #000 58%, transparent 100%);
    filter:drop-shadow(0 10px 30px rgba(255,120,30,.35));
    animation:bossFloat 5s ease-in-out infinite;
}
.boss-screen-monthly .boss-portrait-img{ filter:drop-shadow(0 10px 30px rgba(140,80,255,.4)); }
.boss-screen .boss-resting .boss-portrait-img{ filter:grayscale(.35) brightness(.8); animation:none; }
@keyframes bossFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

.boss-title{ margin:6px 0 10px; font-size:24px; color:#fff; font-family:var(--font-display, "Orbitron", sans-serif); }
.boss-tier-chip{ display:inline-block; margin-left:6px; padding:2px 10px; border-radius:999px; font-size:12px; vertical-align:middle; color:#ffd2a8; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); font-family:inherit; }

.boss-hp{ position:relative; margin:0 auto; max-width:560px; }
.boss-hp-track{ height:18px; border-radius:999px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.1); overflow:hidden; }
.boss-hp-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, #ff3b3b, #ff7a3d); box-shadow:0 0 14px rgba(255,80,60,.5); transition:width .6s ease-out; }
.boss-screen-monthly .boss-hp-fill{ background:linear-gradient(90deg, #7c2cff, #c26bff); box-shadow:0 0 14px rgba(150,90,255,.5); }
.boss-hp-text{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); }

.boss-screen .boss-tap-hint{ margin:10px 0 12px; font-size:13px; color:#9fb3d6; }
.boss-screen .boss-tap-hint.ready{ color:#35ffb0; font-weight:700; animation:bossHintPulse 1.8s ease-in-out infinite; }
@keyframes bossHintPulse{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }

.boss-tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:12px; }
.boss-tile{ padding:10px 6px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.boss-tile span{ display:block; font-size:11px; color:#9fb3d6; }
.boss-tile strong{ display:block; margin-top:2px; font-size:16px; color:#fff; }
@media (max-width:560px){ .boss-tiles{ grid-template-columns:repeat(2, 1fr); } .boss-hero{ height:280px; } .boss-screen .boss-portrait-wrap{ width:230px; height:270px; } }

/* milestone track */
.milestone-track{ position:relative; display:flex; justify-content:space-between; gap:4px; padding:8px 4px 0; }
.milestone-line{ position:absolute; left:10%; right:10%; top:15px; height:4px; border-radius:4px; background:rgba(255,255,255,.1); }
.milestone-line-fill{ height:100%; border-radius:4px; background:linear-gradient(90deg, #35ffb0, #00d5ff); }
.milestone-node{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.milestone-dot{ width:16px; height:16px; border-radius:50%; background:#1b2238; border:2px solid rgba(255,255,255,.25); }
.milestone-node.achieved .milestone-dot{ background:#35ffb0; border-color:#b8ffe3; box-shadow:0 0 10px rgba(53,255,176,.7); }
.milestone-node .milestone-pip-pct{ font-size:12px; font-weight:800; color:#d6dcef; }
.milestone-node.achieved .milestone-pip-pct{ color:#35ffb0; }
.milestone-node .milestone-pip-reward{ font-size:10px; color:#8fa0c4; }
.boss-claim-wrap{ margin-top:14px; }
.boss-claim-wrap .boss-claim-btn{ width:100%; max-width:420px; }

/* ---------- reward popup (Welcome back) ---------- */
.reward-tiles{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:4px 0 10px; }
.reward-tile{
    display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px; border-radius:14px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
}
.reward-tile img{ width:34px; height:34px; object-fit:contain; }
.reward-tile .reward-tile-mark{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:800; color:#0b1020; background:linear-gradient(135deg, #35ffd2, #7db8ff);
}
.reward-tile strong{ font-size:18px; color:#fff; }
.reward-tile span{ font-size:11px; color:#9fb3d6; }
.reward-tile-gold{ border-color:rgba(255,215,106,.6); background:linear-gradient(160deg, rgba(255,200,61,.14), rgba(255,255,255,.03)); box-shadow:0 0 14px rgba(255,200,61,.18); }
.reward-tile-gold strong{ color:#ffd76a; }
.reward-note{ margin:6px 0; font-size:12px; color:#9fb3d6; }
.reward-note-gold{ color:#ffe3a0; }
.reward-today{ display:flex; justify-content:space-between; align-items:center; margin:8px 0; padding:8px 12px; border-radius:10px; background:rgba(255,200,61,.08); border:1px solid rgba(255,215,106,.25); font-size:12px; color:#e9dcb8; }
.reward-today strong{ color:#ffd76a; }
.reward-sub{ margin:12px 0 6px; font-size:12px; color:#9fb3d6; text-align:left; letter-spacing:.5px; }
.reward-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.reward-chip{ display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); font-size:12px; color:#d6dcef; }
.reward-chip img{ width:18px; height:18px; object-fit:contain; }
.reward-chip strong{ color:#35ffb0; }
@media (min-width:520px){ .reward-tiles{ grid-template-columns:repeat(4, 1fr); } }

/*==================================================
    UI POLISH 2 (Oct 2026)
==================================================*/

/* ---------- boss: sharp picture, no haze box ---------- */
/* the PNG is transparent; a drop-shadow on its faint edge pixels drew a smoky
   square, and mask/blend made it soft. The glow comes from .boss-aura only. */
.boss-screen .boss-portrait-img{
    mix-blend-mode:normal !important;
    -webkit-mask-image:none !important;
            mask-image:none !important;
    filter:none !important;
}
.boss-screen .boss-resting .boss-portrait-img{ filter:grayscale(.3) brightness(.85) !important; }
.boss-screen .boss-clickable:hover{ transform:none; }
.boss-screen .boss-clickable:hover .boss-portrait-img{ transform:scale(1.03); }
.boss-screen .boss-hit-flash{ display:none; }

/* damage number: big, outlined, crit in gold */
.boss-damage-number{
    top:30% !important; font-size:40px !important; font-weight:900 !important; letter-spacing:1px;
    color:#ff4d4d !important; -webkit-text-stroke:1.5px rgba(40,0,0,.85);
    text-shadow:0 0 18px rgba(255,60,60,.9), 0 4px 10px rgba(0,0,0,.8) !important;
    animation:bossDamagePop 1.1s ease-out forwards !important;
    white-space:nowrap;
}
.boss-damage-number.crit{ color:#ffd76a !important; -webkit-text-stroke:1.5px rgba(60,30,0,.9); text-shadow:0 0 22px rgba(255,200,61,1), 0 4px 10px rgba(0,0,0,.8) !important; font-size:48px !important; }
.boss-damage-number small{ display:block; font-size:14px; letter-spacing:3px; -webkit-text-stroke:0; }
@keyframes bossDamagePop{
    0%{ opacity:0; transform:translate(-50%, 10px) scale(.5); }
    18%{ opacity:1; transform:translate(-50%, -12px) scale(1.25); }
    35%{ transform:translate(-50%, -18px) scale(1); }
    100%{ opacity:0; transform:translate(-50%, -90px) scale(1); }
}

/* your last hit stays on screen */
.boss-lasthit{
    display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
    width:fit-content; max-width:100%; margin:10px auto 0; padding:8px 16px; border-radius:14px;
    background:rgba(255,77,77,.12); border:1px solid rgba(255,77,77,.45);
    animation:bossLastHitIn .35s ease-out;
}
.boss-lasthit-label{ font-size:10px; font-weight:800; letter-spacing:1.5px; color:#ff9a9a; }
.boss-lasthit strong{ font-size:22px; color:#ff6b6b; }
.boss-lasthit-total{ font-size:12px; color:#c9d3ea; }
.boss-lasthit.crit{ background:rgba(255,200,61,.14); border-color:rgba(255,215,106,.6); box-shadow:0 0 18px rgba(255,200,61,.2); }
.boss-lasthit.crit .boss-lasthit-label{ color:#ffd76a; }
.boss-lasthit.crit strong{ color:#ffd76a; }
@keyframes bossLastHitIn{ from{ opacity:0; transform:translateY(-6px) scale(.96); } to{ opacity:1; transform:none; } }

/* attacks today as pips */
.boss-attacks{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 12px; font-size:12px; color:#9fb3d6; flex-wrap:wrap; }
.boss-attacks strong{ color:#fff; }
.boss-attack-pips{ display:flex; gap:5px; }
.boss-attack-pips i{ width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg, #35ffb0, #00c2ff); box-shadow:0 0 8px rgba(53,255,176,.45); }
.boss-attack-pips i.used{ background:rgba(255,255,255,.12); box-shadow:none; }

/* claim button in the middle */
.boss-claim-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.boss-claim-wrap .boss-claim-btn{ display:block; margin:0 auto; width:100%; max-width:420px; }
.boss-claim-wrap .boss-pending{ width:100%; max-width:420px; }

/* ---------- Arena Shop boosts (are they working?) ---------- */
.arena-boosts{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:10px 0 12px; }
.arena-boosts-title{ font-size:11px; font-weight:800; letter-spacing:1px; color:#35ffb0; text-transform:uppercase; }
.arena-boost-chip{
    display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:12px; color:#d6ffef;
    background:rgba(53,255,176,.1); border:1px solid rgba(53,255,176,.4); box-shadow:0 0 10px rgba(53,255,176,.15);
}
.arena-boost-chip b{ color:#fff; }
.arena-boost-chip i{ font-style:normal; font-size:11px; color:#8fe8c4; }
.arena-boosts-empty span{ font-size:11px; color:#7f8db0; }

/* ---------- PvP: colours follow your rank ---------- */
.pvp-arena{ --rkc:#cd7f32; --rkc2:#8a4b1c; --rkg:rgba(205,127,50,.35); }
.pvp-theme-silver{ --rkc:#d9e2ec; --rkc2:#7b8794; --rkg:rgba(217,226,236,.3); }
.pvp-theme-gold{ --rkc:#ffd76a; --rkc2:#b07a12; --rkg:rgba(255,215,106,.35); }
.pvp-theme-platinum{ --rkc:#7ff5e0; --rkc2:#2d8f84; --rkg:rgba(127,245,224,.32); }
.pvp-theme-diamond{ --rkc:#7cc8ff; --rkc2:#2a5fd6; --rkg:rgba(124,200,255,.38); }
.pvp-theme-master{ --rkc:#c58bff; --rkc2:#6a2bd1; --rkg:rgba(197,139,255,.38); }
.pvp-theme-champion{ --rkc:#ff7a5c; --rkc2:#ffd76a; --rkg:rgba(255,122,92,.42); }

.pvp-arena .pvp-card.you{
    border:2px solid var(--rkc) !important;
    box-shadow:0 0 24px var(--rkg), inset 0 0 30px rgba(0,0,0,.25) !important;
    background:linear-gradient(170deg, color-mix(in srgb, var(--rkc2) 22%, transparent), rgba(12,10,24,.92) 55%) !important;
}
.pvp-arena .pvp-card.you::before, .pvp-arena .pvp-card.you::after{ display:none !important; }
.pvp-arena .pvp-card.you .pvp-card-name{ color:var(--rkc); }
.pvp-arena .pvp-vs-badge{ color:var(--rkc) !important; text-shadow:0 0 16px var(--rkg) !important; }

/* ---------- popups: never so tall you must scroll for the button ---------- */
.game-popup-images.single .game-popup-image img{ width:auto !important; max-width:min(200px, 55vw) !important; max-height:30vh; }
.game-popup-image img{ max-height:26vh; width:auto; }
.game-popup-box .game-popup-actions{
    position:sticky; bottom:-22px; margin:4px -22px -22px; padding:12px 22px 22px;
    background:linear-gradient(180deg, rgba(14,10,26,0), rgba(14,10,26,.96) 30%);
}
.pvp-result-thumb{ width:84px; height:auto; max-height:110px; object-fit:contain; margin:0 auto; border-radius:10px; }
.reward-tiles-3{ grid-template-columns:repeat(3, 1fr) !important; }
.reward-chips-center{ justify-content:center; }

/* ---------- My Beasts slots: like the Equipment slots ---------- */
#temporaryGuardianContainer .beast-slot-empty-body{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0; text-align:center; }
#temporaryGuardianContainer .slot-empty-icon{ width:64px; height:64px; font-size:26px; }
#temporaryGuardianContainer .slot-empty-icon.on-cooldown{ font-size:15px; font-weight:800; letter-spacing:.5px; color:#ffd76a; border-color:rgba(255,215,106,.5); }
.cd-timer{ font-variant-numeric:tabular-nums; }

/*==================================================
    UI POLISH 3 (Oct 2026)
==================================================*/

/* ---------- Battle: VS in the middle between the cards ---------- */
.pvp-cards{ align-items:stretch; }
.pvp-cards > .pvp-vs-badge{
    align-self:center; justify-self:center;
    display:flex; align-items:center; justify-content:center;
    width:58px; height:58px; border-radius:50%;
    background:radial-gradient(circle, rgba(0,0,0,.55), rgba(0,0,0,.2));
    border:2px solid var(--rkc, #ffd76a);
    box-shadow:0 0 18px var(--rkg, rgba(255,215,106,.35));
    font-size:20px !important; line-height:1;
}
@media (max-width:600px){ .pvp-cards > .pvp-vs-badge{ margin:4px auto; } }

/* ---------- buttons: one size, side by side ---------- */
.game-popup-actions{ display:flex !important; flex-wrap:wrap; gap:10px !important; }
.game-popup-actions > button{
    flex:1 1 0 !important; min-width:120px;
    min-height:46px; padding:12px 16px !important; margin:0 !important;
    font-size:14px !important; font-weight:700 !important; border-radius:12px !important;
    width:auto !important;
}
.game-popup-actions .game-popup-btn-secondary{
    background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.18) !important; color:#d6dcef !important;
}
.game-popup-actions .game-popup-btn-secondary:hover{ background:rgba(255,255,255,.1) !important; }

/* Unequip (My Beasts + Equipment): clear, full width, same look */
.unequipGuardianBtn{
    width:100%; min-height:42px; padding:10px 14px !important; border-radius:12px !important;
    background:linear-gradient(180deg, rgba(255,59,92,.18), rgba(255,59,92,.08)) !important;
    border:1px solid rgba(255,90,115,.55) !important; color:#ff8fa3 !important;
    font-size:13px !important; font-weight:800 !important; letter-spacing:.4px;
    transition:background .2s, box-shadow .2s, color .2s;
}
.unequipGuardianBtn:hover{ background:rgba(255,59,92,.28) !important; color:#fff !important; box-shadow:0 0 14px rgba(255,59,92,.3); }
.gear-level-actions{ display:flex; flex-direction:column; gap:8px; }
.gear-level-actions .gear-repair-btn{ min-height:40px; border-radius:12px; }

/* ---------- My Beasts: compact slots like Equipment, rarity border ---------- */
#temporaryGuardianContainer{ grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; }
#temporaryGuardianContainer .beast-slot{ min-height:0; padding:14px; border-width:2px; }
#temporaryGuardianContainer .beast-slot-header{ margin-bottom:10px; }
#temporaryGuardianContainer .beast-slot-tag{ display:none; }            /* the unlock button already says the price */
#temporaryGuardianContainer .beast-slot-img{ max-width:96px !important; max-height:130px; object-fit:contain; margin:0 auto 6px; }
#temporaryGuardianContainer .beast-slot p{ font-size:13px; margin:4px 0; }
#temporaryGuardianContainer .craftGuardianBtn{ min-height:42px; border-radius:12px; }
#temporaryGuardianContainer .beast-slot.has-beast[class*="rarity-"]{ border-width:2px; }

/* ---------- premium cosmetics (leaderboard + shop preview) ---------- */
.leaderboard-row.lb-cos-frameDiamond{
    border:1px solid rgba(124,200,255,.8) !important;
    box-shadow:0 0 16px rgba(124,200,255,.35), inset 0 0 14px rgba(124,200,255,.12) !important;
    background:linear-gradient(100deg, rgba(124,200,255,.16), rgba(10,18,40,.6) 50%, rgba(124,200,255,.1)) !important;
    background-size:200% 100% !important; animation:cosShine 5s linear infinite;
}
.leaderboard-row.lb-cos-frameInferno{
    border:1px solid rgba(255,110,40,.85) !important;
    background:linear-gradient(100deg, rgba(255,80,20,.22), rgba(40,8,4,.7) 55%) !important;
    animation:cosFlicker 1.6s ease-in-out infinite;
}
.leaderboard-row.lb-cos-frameCelestial{
    position:relative; border:2px solid transparent !important; isolation:isolate;
    background:linear-gradient(rgba(12,10,26,.95), rgba(12,10,26,.95)) padding-box,
               conic-gradient(from var(--cosA, 0deg), #ff4d6d, #ffd76a, #35ffb0, #00d5ff, #a259ff, #ff4d6d) border-box !important;
    box-shadow:0 0 22px rgba(162,89,255,.35) !important;
    animation:cosTurn 6s linear infinite;
}
@property --cosA{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes cosTurn{ to{ --cosA:360deg; } }
@keyframes cosShine{ from{ background-position:0 0; } to{ background-position:-200% 0; } }
@keyframes cosFlicker{ 0%,100%{ box-shadow:0 0 14px rgba(255,90,30,.4); } 50%{ box-shadow:0 0 24px rgba(255,140,40,.65); } }

.leaderboard-name.lb-cos-namePlasma .lb-name-text,
.leaderboard-name.lb-cos-nameRainbow .lb-name-text{
    background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent !important;
    animation:cosShine 3.5s linear infinite; font-weight:800;
}
.leaderboard-name.lb-cos-namePlasma .lb-name-text{ background-image:linear-gradient(90deg, #c26bff, #ff6bd5, #7c2cff, #c26bff); filter:drop-shadow(0 0 6px rgba(194,107,255,.5)); }
.leaderboard-name.lb-cos-nameRainbow .lb-name-text{ background-image:linear-gradient(90deg, #ff4d6d, #ffd76a, #35ffb0, #00d5ff, #a259ff, #ff4d6d); filter:drop-shadow(0 0 6px rgba(255,255,255,.25)); }

.leaderboard-row.lb-titled-titleLegend{
    background:linear-gradient(100deg, rgba(0,213,255,.2), rgba(124,44,255,.3) 50%, rgba(8,6,24,.9)) !important;
    border:1px solid rgba(0,213,255,.7) !important;
    animation:cosPulse 2.6s ease-in-out infinite;
}
.leaderboard-row.lb-titled-titleLegend .lb-name-text{ color:#e6fbff; text-shadow:0 0 10px rgba(0,213,255,.7); }
.lb-badge-titleLegend{ color:#fff; background:linear-gradient(135deg, #00d5ff, #7c2cff); box-shadow:0 0 12px rgba(0,213,255,.6); }
@keyframes cosPulse{ 0%,100%{ box-shadow:0 0 12px rgba(0,213,255,.3); } 50%{ box-shadow:0 0 26px rgba(124,44,255,.55); } }

.leaderboard-row.lb-titled-titleImmortal{
    border:2px solid transparent !important;
    background:linear-gradient(100deg, #050508, #14101f 60%, #050508) padding-box,
               conic-gradient(from var(--cosA, 0deg), #ff4d6d, #ffd76a, #35ffb0, #00d5ff, #a259ff, #ff4d6d) border-box !important;
    box-shadow:0 0 26px rgba(255,255,255,.12), 0 0 34px rgba(162,89,255,.3) !important;
    animation:cosTurn 5s linear infinite;
}
.leaderboard-row.lb-titled-titleImmortal .lb-name-text{ color:#fff; text-shadow:0 0 12px rgba(255,255,255,.6); letter-spacing:.5px; }
.leaderboard-row.lb-titled-titleImmortal .leaderboard-rank{ color:#ffd76a; }
.lb-badge-titleImmortal{
    color:#0b0b12; background:linear-gradient(90deg, #ff4d6d, #ffd76a, #35ffb0, #00d5ff, #a259ff);
    background-size:200% auto; animation:cosShine 3s linear infinite; box-shadow:0 0 14px rgba(255,255,255,.35);
}

/* shop: preview row inside the card */
.arena-shop-card .cos-preview{ margin-top:10px; padding:8px 12px; font-size:12px; pointer-events:none; }
.arena-shop-card .cos-preview .leaderboard-rank{ min-width:0; }

@media (prefers-reduced-motion:reduce){
    .leaderboard-row[class*="lb-cos-"], .leaderboard-row.lb-titled, .lb-title-badge, .lb-name-text{ animation:none !important; }
}

/*==================================================
    UI POLISH 4 (Oct 2026)
==================================================*/

/* My Beasts: 3 slots per row, like Equipment */
#temporaryGuardianContainer{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
@media (max-width:900px){ #temporaryGuardianContainer{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width:520px){ #temporaryGuardianContainer{ grid-template-columns:1fr !important; } }

/* Equipment wallet: bigger rarity cards */
.gear-rarity-grid{ grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)) !important; gap:14px !important; }
.gear-rarity-card{ padding:16px 14px !important; gap:8px !important; border-width:2px !important; min-height:200px; justify-content:center; }
.gear-rarity-card img{ width:120px !important; height:120px !important; }
.gear-rarity-card strong{ font-size:16px; }
.gear-rarity-card small{ font-size:13px; }
@media (max-width:520px){ .gear-rarity-grid{ grid-template-columns:repeat(2, 1fr) !important; } .gear-rarity-card img{ width:90px !important; height:90px !important; } }

/* equip confirm */
.gear-confirm{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:14px; border:2px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); text-align:left; }
.gear-confirm img, .gear-confirm .gear-thumb-empty{ width:84px; height:84px; flex:0 0 84px; object-fit:contain; border-radius:10px; }
.gear-confirm > div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.gear-confirm small{ color:#9fb3d6; }

/* where a boost works */
.arena-shop-where{ display:block; margin-top:6px; font-size:11px; color:#35ffb0; }
.dash-boost-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 14px; padding:10px 12px; border-radius:14px; background:rgba(53,255,176,.06); border:1px solid rgba(53,255,176,.25); }
.pvp-boost-used, .boss-lasthit-boosts{ color:#35ffb0 !important; font-size:11px; }
.boss-lasthit-boosts{ flex-basis:100%; text-align:center; }

/* real icons in the reward tiles */
.reward-tile img{ width:36px; height:36px; object-fit:contain; }

/*==================================================
    UI POLISH 5 (Oct 2026)
==================================================*/

/* Equipment > Your Equipment: type tabs + full NFT cards */
.gear-inv-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; }
.gear-inv-tab{
    display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; cursor:pointer;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#c9d3ea; font-size:13px; font-weight:700;
}
.gear-inv-tab small{ font-size:11px; color:#8fa0c4; background:rgba(255,255,255,.08); border-radius:999px; padding:1px 7px; }
.gear-inv-tab:hover{ background:rgba(255,255,255,.09); color:#fff; }
.gear-inv-tab.active{ background:linear-gradient(100deg, #7c2cff, #3b6dff 55%, #00d5ff); border-color:rgba(255,255,255,.2); color:#fff; box-shadow:0 4px 14px rgba(80,90,255,.35); }
.gear-inv-tab.active small{ color:#fff; background:rgba(0,0,0,.25); }

.gear-nft-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.gear-nft-card{
    display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:16px;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.92) 65%);
    border:2px solid rgba(139,63,255,.3);
}
.gear-nft-img{ border-radius:12px; overflow:hidden; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; }
.gear-nft-img img{ display:block; width:100%; height:auto; object-fit:contain; }     /* full NFT, never cropped */
.gear-nft-img .gear-thumb-empty{ width:100%; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; }
.gear-nft-info{ display:flex; flex-direction:column; gap:3px; text-align:left; min-width:0; }
.gear-nft-info strong{ color:#fff; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gear-nft-info small{ color:#9fb3d6; font-size:12px; }
.gear-nft-actions{ display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.gear-nft-actions button{ width:100%; min-height:40px; border-radius:12px; font-size:13px; }
@media (max-width:520px){ .gear-nft-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; } }

/* came from a level's gear pill: that slot flashes */
.gear-slot-focus{ animation:gearSlotFocus 1.6s ease-out; }
@keyframes gearSlotFocus{ 0%,60%{ box-shadow:0 0 0 3px #00d5ff, 0 0 26px rgba(0,213,255,.6); } 100%{ box-shadow:none; } }

/*==================================================
    MARKETPLACE (Oct 2026)
==================================================*/
.mk-tabs .arena-shop-tab{ position:relative; }
.mk-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:999px; font-size:11px; font-weight:800; color:#0b1020; background:#ffd76a; }

.mk-filters{
    display:grid; grid-template-columns:2fr 1.3fr 1fr 1fr 1.4fr 1.1fr auto; gap:8px; align-items:center;
    padding:12px; margin:12px 0 8px; border-radius:16px;
    background:rgba(8,12,28,.65); border:1px solid rgba(255,255,255,.08);
}
.mk-filters input, .mk-filters select{
    width:100%; min-width:0; height:40px; padding:0 12px; border-radius:10px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#e6ecf8; font-size:13px;
}
.mk-filters input:focus, .mk-filters select:focus{ outline:none; border-color:#00d5ff; box-shadow:0 0 0 2px rgba(0,213,255,.2); }
.mk-range{ display:flex; align-items:center; gap:4px; }
.mk-range span{ color:#7f8db0; }
.mk-filter-btns{ display:flex; gap:6px; }
.mk-filter-btns button{ height:40px; padding:0 14px; white-space:nowrap; }
@media (max-width:1100px){ .mk-filters{ grid-template-columns:1fr 1fr 1fr; } .mk-search{ grid-column:1 / -1; } }
@media (max-width:560px){ .mk-filters{ grid-template-columns:1fr 1fr; } }
.mk-count{ margin:4px 2px 10px; font-size:12px; color:#9fb3d6; }

.mk-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; }
.mk-card{
    display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:16px;
    background:linear-gradient(165deg, rgba(40,24,80,.45), rgba(12,10,24,.95) 60%);
    border:1px solid rgba(255,255,255,.1); transition:transform .15s, box-shadow .2s, border-color .2s;
}
.mk-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.4); }
.mk-card.rarity-common{ border-color:rgba(180,190,210,.35); }
.mk-card.rarity-rare{ border-color:rgba(70,150,255,.55); }
.mk-card.rarity-epic{ border-color:rgba(170,90,255,.6); }
.mk-card.rarity-legendary{ border-color:rgba(255,190,60,.7); box-shadow:0 0 16px rgba(255,190,60,.12); }
.mk-card.rarity-mythic{ border-color:rgba(255,70,110,.7); box-shadow:0 0 16px rgba(255,70,110,.14); }
.mk-card-top{ display:flex; justify-content:space-between; align-items:center; }
.mk-rarity{ padding:2px 9px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; background:rgba(255,255,255,.08); color:#c9d3ea; }
.mk-rarity-rare{ color:#8cc2ff; background:rgba(70,150,255,.15); }
.mk-rarity-epic{ color:#d2a8ff; background:rgba(170,90,255,.16); }
.mk-rarity-legendary{ color:#ffd76a; background:rgba(255,190,60,.16); }
.mk-rarity-mythic{ color:#ff8fa8; background:rgba(255,70,110,.16); }
.mk-age{ font-size:11px; color:#7f8db0; }
.mk-img{ position:relative; display:flex; align-items:center; justify-content:center; height:120px; border-radius:12px; background:radial-gradient(circle, rgba(255,255,255,.07), rgba(0,0,0,.2) 70%); }
.mk-img img{ max-width:96px; max-height:96px; object-fit:contain; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.mk-img-empty{ font-size:34px; font-weight:800; color:#9fb3d6; }
.mk-qty{ position:absolute; right:8px; bottom:8px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:800; color:#fff; background:rgba(0,0,0,.6); }
.mk-name{ font-size:15px; color:#fff; }
.mk-seller{ display:flex; align-items:center; gap:6px; padding:0; border:none; background:none; color:#9fb3d6; font-size:12px; cursor:pointer; text-align:left; }
.mk-seller:hover{ color:#00d5ff; }
.mk-avatar{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#0b1020; background:linear-gradient(135deg, #35ffd2, #7db8ff); }
.mk-price{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mk-price > div{ padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.04); }
.mk-price small{ display:block; font-size:10px; color:#7f8db0; }
.mk-price b{ font-size:14px; color:#ffd76a; }
.mk-actions{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:auto; }
.mk-actions button{ min-height:40px; border-radius:10px; font-size:13px; padding:8px; }
.mk-actions .market-own{ grid-column:1 / -1; text-align:center; font-size:12px; color:#35ffb0; padding:10px 0; }

/* offers */
.mk-offers-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 6px; }
.mk-locked{ margin-left:auto; font-size:12px; color:#ffe3a0; }
.mk-offers-head .pvp-secondary-btn{ flex:0 0 auto; }
.mk-offers{ display:flex; flex-direction:column; gap:10px; }
.mk-offer{
    display:grid; grid-template-columns:64px 1fr auto auto; align-items:center; gap:12px; padding:12px; border-radius:14px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
}
.mk-offer.closed{ opacity:.6; }
.mk-offer-img{ width:64px; height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); }
.mk-offer-img img{ max-width:52px; max-height:52px; object-fit:contain; }
.mk-offer-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mk-offer-info strong{ color:#fff; }
.mk-offer-info small{ color:#9fb3d6; font-size:12px; }
.mk-offer-price{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.mk-offer-price b{ font-size:16px; color:#ffd76a; }
.mk-offer-price small{ font-size:11px; color:#9fb3d6; }
.mk-status{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.08); color:#c9d3ea; }
.mk-status-pending{ color:#ffd76a; background:rgba(255,215,106,.12); }
.mk-status-accepted{ color:#35ffb0; background:rgba(53,255,176,.12); }
.mk-status-declined, .mk-status-cancelled, .mk-status-expired{ color:#ff9aa8; background:rgba(255,90,115,.1); }
.mk-offer-actions{ display:flex; flex-direction:column; gap:6px; }
.mk-offer-actions button{ min-height:38px; padding:8px 14px; border-radius:10px; font-size:13px; }
@media (max-width:640px){ .mk-offer{ grid-template-columns:56px 1fr; } .mk-offer-price{ align-items:flex-start; } .mk-offer-actions{ grid-column:1 / -1; flex-direction:row; } .mk-offer-actions button{ flex:1; } }

.mk-offer-form{ display:flex; align-items:center; gap:12px; margin-bottom:10px; text-align:left; }
.mk-offer-form-info{ display:flex; flex-direction:column; gap:3px; color:#9fb3d6; font-size:12px; }
.mk-offer-form-info b{ color:#fff; }
.mk-field{ display:flex; flex-direction:column; gap:4px; margin:8px 0; text-align:left; font-size:12px; color:#9fb3d6; }
.mk-field input{ height:42px; padding:0 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:14px; }
.mk-offer-total{ margin:8px 0 4px; font-size:13px; color:#e6ecf8; }
.mk-offer-total b{ color:#ffd76a; }

/* level card: Beast Coin found today */
.level-bc-today{ display:flex; align-items:center; gap:6px; margin:2px 0 6px; font-size:11px; color:#b9c3da; flex-wrap:wrap; }
.level-bc-today img{ width:16px; height:16px; }
.level-bc-today b{ color:#ffd76a; font-size:12px; }
.level-bc-today small{ color:#7f8db0; }

/* marketplace: filter bar wraps by its own width (the center panel is narrow) */
.mk-filters{ display:flex !important; flex-wrap:wrap; }
.mk-filters > *{ flex:1 1 150px; }
.mk-filters > .mk-search{ flex:1 1 100%; }
.mk-filters > .mk-range{ flex:1 1 200px; }
.mk-filters > .mk-filter-btns{ flex:0 0 auto; }
.mk-actions button{ margin:0 !important; height:42px; min-height:42px !important; width:100%; }
.mk-offers-head .market-scope{ display:flex; gap:6px; }
.mk-offers-head .market-scope .arena-shop-tab{ padding:9px 18px !important; min-width:96px; border-radius:10px; }

/*==================================================
    MARKETPLACE v2 (Oct 2026): stats bar, Sell grid +
    popup, My listings cards, offer state, dark dropdowns,
    mailbox Marketplace notes, Beast Coin "held" column
==================================================*/

/* dropdowns: dark list (the browser's grey list hid the text) */
#marketRoot select, .mk-filters select, .market-toolbar select, .game-popup select{ color-scheme:dark; background-color:#10162b; color:#e6ecf8; }
#marketRoot select option, .mk-filters select option, .market-toolbar select option, .game-popup select option{ background:#10162b; color:#e6ecf8; }
#marketRoot select option:checked{ background:#1d2a52; color:#fff; }

/* stats bar */
.mk-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:6px 0 14px; }
.mk-stat{
    display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; min-width:0;
    background:linear-gradient(160deg, rgba(0,213,255,.07), rgba(10,12,28,.9) 70%); border:1px solid rgba(0,213,255,.18);
}
.mk-stat span{ font-size:11px; letter-spacing:.4px; color:#8fa3c8; text-transform:uppercase; }
.mk-stat b{ font-size:19px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-stat small{ font-size:11px; color:#7f8db0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-stat-main{ border-color:rgba(255,215,106,.4); background:linear-gradient(160deg, rgba(255,200,61,.12), rgba(10,12,28,.9) 70%); }
.mk-stat-main b{ color:#ffd76a; }
.mk-stat-click{ cursor:pointer; transition:border-color .2s, transform .15s; }
.mk-stat-click:hover{ border-color:#00d5ff; transform:translateY(-1px); }

/* browse: offer already sent */
.mk-offer-sent{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; color:#ffe3a0 !important; border-color:rgba(255,215,106,.45) !important; background:rgba(255,215,106,.08) !important; }
.mk-offer-sent small{ font-size:10px; color:#c9b47a; }

/* sell: info strip */
.mk-sell-info{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; margin:12px 0 8px; }
.mk-sell-info > div{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.mk-sell-info span{ font-size:11px; color:#8fa3c8; }
.mk-sell-info b{ font-size:15px; color:#fff; }
.mk-sell-info small{ font-size:10px; color:#7f8db0; }
.mk-sell-info .ok{ border-color:rgba(53,255,176,.3); }
.mk-sell-info .ok b{ color:#35ffb0; }
.mk-sell-info .bad{ border-color:rgba(255,90,115,.4); }
.mk-sell-info .bad b{ color:#ff9aa8; }
.mk-sell-warn{ margin:4px 0 10px; padding:10px 12px; border-radius:10px; font-size:12px; color:#ffd1d8; background:rgba(255,90,115,.1); border:1px solid rgba(255,90,115,.3); }
.mk-sell-filters{ margin-top:6px; }

/* sell: material cards */
.mk-sell-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.mk-sell-card{
    position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 10px 10px;
    border-radius:16px; cursor:pointer; color:#e6ecf8; font:inherit; text-align:center;
    background:linear-gradient(170deg, rgba(40,24,80,.45), rgba(12,10,24,.95) 65%); border:1px solid rgba(255,255,255,.1);
    transition:transform .15s, box-shadow .2s, border-color .2s;
}
.mk-sell-card:hover:not(:disabled){ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.45); border-color:#00d5ff; }
.mk-sell-card:disabled{ opacity:.55; cursor:not-allowed; }
.mk-sell-card .mk-rarity{ align-self:flex-start; }
.mk-sell-card.rarity-rare{ border-color:rgba(70,150,255,.5); }
.mk-sell-card.rarity-epic{ border-color:rgba(170,90,255,.55); }
.mk-sell-card.rarity-legendary{ border-color:rgba(255,190,60,.65); box-shadow:0 0 14px rgba(255,190,60,.1); }
.mk-sell-card.rarity-mythic{ border-color:rgba(255,70,110,.65); box-shadow:0 0 14px rgba(255,70,110,.12); }
.mk-sell-img{ display:flex; align-items:center; justify-content:center; width:100%; height:92px; border-radius:12px; background:radial-gradient(circle, rgba(255,255,255,.08), rgba(0,0,0,.2) 70%); }
.mk-sell-img img{ max-width:76px; max-height:76px; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.mk-sell-card strong{ font-size:14px; color:#fff; }
.mk-sell-card small{ font-size:11px; color:#9fb3d6; }
.mk-sell-card small b{ color:#fff; }
.mk-sell-listed{ color:#ffd76a !important; }
.mk-sell-none{ color:#6f7c9c !important; }
.mk-sell-cta{ margin-top:6px; width:100%; padding:7px 0; border-radius:10px; font-size:12px; font-weight:800; letter-spacing:.6px; color:#0b1020; background:linear-gradient(90deg, #00e5ff, #7db8ff); }
.mk-sell-card:disabled .mk-sell-cta{ background:rgba(255,255,255,.12); color:#9fb3d6; }

/* sell popup */
.mk-sellpop-head{ display:flex; align-items:center; gap:12px; padding:10px; margin-bottom:10px; border-radius:14px; text-align:left; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); }
.mk-sellpop-head > div:last-child{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.mk-sellpop-head small{ font-size:12px; color:#9fb3d6; }
.mk-sellpop-head small b{ color:#fff; }
.mk-sellpop-img{ width:72px; height:72px; flex:0 0 72px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(0,0,0,.3); }
.mk-sellpop-img img{ max-width:60px; max-height:60px; object-fit:contain; }
.mk-hints{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:6px; margin-bottom:6px; }
.mk-hint{ display:flex; flex-direction:column; gap:1px; padding:7px 9px; border-radius:10px; text-align:left; font:inherit; cursor:pointer; color:#e6ecf8; background:rgba(0,213,255,.07); border:1px solid rgba(0,213,255,.25); }
.mk-hint:hover{ border-color:#00d5ff; background:rgba(0,213,255,.14); }
.mk-hint span{ font-size:10px; color:#8fa3c8; }
.mk-hint b{ font-size:13px; color:#ffd76a; }
.mk-hint-empty{ cursor:default; background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }
.mk-hint-empty b{ color:#6f7c9c; }
.mk-hint-note, .mk-hint-load{ grid-column:1 / -1; font-size:11px; color:#7f8db0; text-align:left; }
.mk-qty-row{ display:flex; gap:6px; }
.mk-qty-row input{ flex:1; min-width:0; }
.mk-qty-row button{ flex:0 0 auto; height:42px; padding:0 12px; margin:0 !important; border-radius:10px; }
.mk-range-input{ width:100%; margin-top:6px; accent-color:#00d5ff; }
.mk-sell-sum{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0 6px; }
.mk-sell-sum > div{ display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:10px; text-align:left; background:rgba(255,255,255,.04); }
.mk-sell-sum span{ font-size:10px; color:#8fa3c8; }
.mk-sell-sum b{ font-size:14px; color:#fff; }
.mk-sell-sum-main{ border:1px solid rgba(255,215,106,.4); background:rgba(255,215,106,.08) !important; }
.mk-sell-sum-main b{ color:#ffd76a; }
.mk-sell-err{ grid-column:1 / -1; margin:2px 0 0; font-size:12px; color:#ff9aa8; text-align:left; }

/* my listings */
.mk-mine-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 12px; }
.mk-mine-head .market-scope{ display:flex; gap:6px; flex-wrap:wrap; margin-right:auto; }
.mk-mine-head .market-scope .arena-shop-tab{ padding:8px 14px !important; border-radius:10px; }
.mk-mine-head .market-scope small{ opacity:.7; font-size:11px; }
.mk-mine-head > button{ height:40px; padding:0 16px; margin:0 !important; }
.mk-mine-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.mk-mine-card{ display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:16px; background:linear-gradient(165deg, rgba(40,24,80,.4), rgba(12,10,24,.95) 60%); border:1px solid rgba(255,255,255,.1); }
.mk-mine-card.closed{ opacity:.7; }
.mk-mine-card.rarity-rare{ border-color:rgba(70,150,255,.45); }
.mk-mine-card.rarity-epic{ border-color:rgba(170,90,255,.5); }
.mk-mine-card.rarity-legendary{ border-color:rgba(255,190,60,.6); }
.mk-mine-card.rarity-mythic{ border-color:rgba(255,70,110,.6); }
.mk-mine-top{ display:flex; justify-content:space-between; align-items:center; }
.mk-mine-st-active{ color:#35ffb0; background:rgba(53,255,176,.12); }
.mk-mine-st-sold{ color:#ffd76a; background:rgba(255,215,106,.14); }
.mk-mine-st-expired, .mk-mine-st-cancelled{ color:#ff9aa8; background:rgba(255,90,115,.1); }
.mk-mine-body{ display:flex; align-items:center; gap:10px; }
.mk-mine-img{ width:60px; height:60px; flex:0 0 60px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(0,0,0,.3); }
.mk-mine-img img{ max-width:50px; max-height:50px; object-fit:contain; }
.mk-mine-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mk-mine-info strong{ color:#fff; font-size:14px; }
.mk-mine-info small{ font-size:11px; color:#9fb3d6; }
.mk-bar-label{ display:flex; justify-content:space-between; font-size:11px; color:#8fa3c8; }
.mk-bar{ height:7px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.mk-bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, #ffd76a, #ffb23d); }
.mk-bar-time i{ background:linear-gradient(90deg, #00e5ff, #7db8ff); }
.mk-mine-actions{ display:flex; gap:6px; margin-top:auto; }
.mk-mine-actions button{ flex:1; height:38px; margin:0 !important; border-radius:10px; font-size:13px; }

/* Beast Coin popup: coin held in offers */
.bc-held{ color:#9fd6ff !important; }
.bc-split-locked{ border-color:rgba(125,184,255,.35); }
.bc-split-locked strong{ color:#9fd6ff; }
.bc-split-locked a{ color:#7db8ff; }
.bc-today-box{ grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)) !important; }
.bc-hist-held .bc-hist-label{ color:#9fb3d6; }

@media (max-width:560px){
    .mk-stats{ grid-template-columns:1fr 1fr; }
    .mk-stat-main{ grid-column:1 / -1; }
    .mk-sell-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
    .mk-sell-sum{ grid-template-columns:1fr 1fr; }
}


/*==================================================
    MARKETPLACE v3 (Oct 2026): activity table (OpenSea
    style), receipts, mailbox notes, cosmetic traders,
    sale tax
==================================================*/

/* ---------- activity ---------- */
.mk-act-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }
.mk-act-toolbar .market-scope{ display:flex; gap:6px; }
.mk-act-toolbar .market-scope .arena-shop-tab{ padding:8px 14px !important; border-radius:10px; }
.mk-act-toolbar select{ height:38px; padding:0 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12); min-width:150px; }
.mk-act-toolbar > .pvp-secondary-btn{ height:38px; padding:0 14px; margin:0 !important; margin-left:auto !important; }
.mk-chips{ display:flex; gap:4px; padding:3px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.mk-chip{ padding:6px 12px; border-radius:9px; border:none; background:none; color:#9fb3d6; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.mk-chip.active{ color:#0b1020; background:linear-gradient(90deg, #00e5ff, #7db8ff); }

.mk-act-table{ display:flex; flex-direction:column; gap:6px; }
.mk-act-head, .mk-act-row{
    display:grid; align-items:center; gap:10px;
    grid-template-columns:118px minmax(150px, 1.6fr) 110px 56px minmax(100px, 1fr) minmax(100px, 1fr) 74px;
}
.mk-act-head{ padding:0 14px 4px; font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:#6f7c9c; }
.mk-act-row{
    padding:10px 14px; border-radius:14px; cursor:pointer;
    background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07);
    transition:background .15s, border-color .15s, transform .12s;
}
.mk-act-row:hover{ background:rgba(0,213,255,.06); border-color:rgba(0,213,255,.35); transform:translateX(2px); }
.mk-act-event{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.mk-ev{ padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.4px; }
.mk-ev-sale{ color:#35ffb0; background:rgba(53,255,176,.12); }
.mk-ev-list{ color:#7db8ff; background:rgba(125,184,255,.14); }
.mk-ev-offer{ color:#ffd76a; background:rgba(255,215,106,.13); }
.mk-ev-ended{ color:#ff9aa8; background:rgba(255,90,115,.1); }
.mk-act-side{ font-size:10px; font-weight:700; color:#9fb3d6; }
.mk-act-side-out{ color:#ffb3c0; }
.mk-act-side-in{ color:#8dffcf; }
.mk-act-event .mk-status{ font-size:10px; padding:1px 7px; }
.mk-act-item{ display:flex; align-items:center; gap:10px; min-width:0; }
.mk-act-item > div:last-child{ display:flex; flex-direction:column; min-width:0; }
.mk-act-item strong{ color:#fff; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-rarity-text{ font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#9fb3d6; background:none !important; padding:0 !important; }
.mk-act-img{ width:42px; height:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.08); }
.mk-act-item.rarity-rare .mk-act-img{ border-color:rgba(70,150,255,.5); }
.mk-act-item.rarity-epic .mk-act-img{ border-color:rgba(170,90,255,.55); }
.mk-act-item.rarity-legendary .mk-act-img{ border-color:rgba(255,190,60,.65); }
.mk-act-item.rarity-mythic .mk-act-img{ border-color:rgba(255,70,110,.65); }
.mk-act-img img{ max-width:34px; max-height:34px; object-fit:contain; }
.mk-act-price{ display:flex; flex-direction:column; }
.mk-act-price b{ color:#ffd76a; font-size:14px; white-space:nowrap; }
.mk-act-price small{ font-size:10px; color:#7f8db0; }
.mk-act-qty{ color:#e6ecf8; font-weight:700; }
.mk-act-from, .mk-act-to{ min-width:0; overflow:hidden; }
.mk-act-time{ font-size:12px; color:#8fa3c8; text-align:right; white-space:nowrap; }
.mk-act-k{ display:none; }

@media (max-width:900px){
    .mk-act-head{ display:none; }
    .mk-act-row{ grid-template-columns:1fr auto; grid-template-areas:"item price" "event time" "from to"; row-gap:8px; }
    .mk-act-item{ grid-area:item; }
    .mk-act-price{ grid-area:price; align-items:flex-end; }
    .mk-act-event{ grid-area:event; flex-direction:row; flex-wrap:wrap; align-items:center; }
    .mk-act-time{ grid-area:time; }
    .mk-act-qty{ display:none; }
    .mk-act-from{ grid-area:from; }
    .mk-act-to{ grid-area:to; text-align:right; }
    .mk-act-k{ display:inline; margin-right:5px; font-size:10px; color:#6f7c9c; text-transform:uppercase; }
    .mk-act-toolbar > .pvp-secondary-btn{ margin-left:0 !important; }
}

/* ---------- receipt popup ---------- */
.mk-rc-head{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.mk-rc-img{ width:84px; height:84px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:radial-gradient(circle, rgba(255,255,255,.08), rgba(0,0,0,.3) 70%); border:1px solid rgba(255,255,255,.12); }
.mk-rc-img img{ max-width:70px; max-height:70px; object-fit:contain; }
.mk-receipt{ display:flex; flex-direction:column; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.1); text-align:left; }
.mk-rc-line{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; font-size:13px; }
.mk-rc-line:nth-child(odd){ background:rgba(255,255,255,.035); }
.mk-rc-line span{ color:#8fa3c8; }
.mk-rc-line b{ color:#fff; text-align:right; }

/* ---------- names / rows of players with cosmetics ---------- */
.mk-who{ display:inline-flex; align-items:center; gap:5px; max-width:100%; min-width:0; color:#c9d3ea; font-size:12px; }
.mk-who-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-who-none{ color:#6f7c9c; }
.mk-who-title{ font-size:9px !important; padding:1px 6px !important; white-space:nowrap; }
.mk-who.mk-cos-nameCyan .mk-who-text{ color:#00e5ff; text-shadow:0 0 8px rgba(0,229,255,.7); font-weight:700; }
.mk-who.mk-cos-nameGold .mk-who-text{ color:#ffd76a; text-shadow:0 0 8px rgba(255,215,106,.7); font-weight:700; }
.mk-who.mk-cos-namePlasma .mk-who-text, .mk-who.mk-cos-nameRainbow .mk-who-text{
    background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; animation:cosShine 3.5s linear infinite;
}
.mk-who.mk-cos-namePlasma .mk-who-text{ background-image:linear-gradient(90deg, #c26bff, #ff6bd5, #7c2cff, #c26bff); }
.mk-who.mk-cos-nameRainbow .mk-who-text{ background-image:linear-gradient(90deg, #ff4d6d, #ffd76a, #35ffb0, #00d5ff, #a259ff, #ff4d6d); }

.mk-premium{ position:relative; }
.mk-premium-soft{ border-color:rgba(255,215,106,.35) !important; box-shadow:0 0 12px rgba(255,215,106,.1); }
.mk-premium.mk-cos-frameBronze{ border-color:#cd7f32 !important; box-shadow:0 0 14px rgba(205,127,50,.3); }
.mk-premium.mk-cos-frameSilver{ border-color:#d9e2ec !important; box-shadow:0 0 14px rgba(217,226,236,.3); }
.mk-premium.mk-cos-frameGold{ border-color:#ffd76a !important; box-shadow:0 0 18px rgba(255,215,106,.35); background:linear-gradient(100deg, rgba(255,200,61,.1), rgba(255,255,255,.03) 60%); }
.mk-premium.mk-cos-frameDiamond{ border-color:rgba(124,200,255,.85) !important; box-shadow:0 0 18px rgba(124,200,255,.35); background:linear-gradient(100deg, rgba(124,200,255,.14), rgba(10,18,40,.6) 50%, rgba(124,200,255,.08)); background-size:200% 100%; animation:cosShine 5s linear infinite; }
.mk-premium.mk-cos-frameInferno{ border-color:rgba(255,110,40,.9) !important; background:linear-gradient(100deg, rgba(255,80,20,.18), rgba(40,8,4,.6) 55%); animation:cosFlicker 1.6s ease-in-out infinite; }
.mk-premium.mk-cos-frameCelestial{
    border:2px solid transparent !important; isolation:isolate;
    background:linear-gradient(rgba(12,10,26,.96), rgba(12,10,26,.96)) padding-box,
               conic-gradient(from var(--cosA, 0deg), #ff4d6d, #ffd76a, #35ffb0, #00d5ff, #a259ff, #ff4d6d) border-box;
    box-shadow:0 0 20px rgba(162,89,255,.35); animation:cosTurn 6s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .mk-premium, .mk-who .mk-who-text{ animation:none !important; } }

/* ---------- mailbox Marketplace notes ---------- */
.mail-notices{ display:flex; flex-direction:column; gap:10px; margin-top:2px; text-align:left; }
.mail-note{
    display:grid; grid-template-columns:52px minmax(0, 1fr); gap:10px 12px; align-items:start;
    padding:12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
}
.mail-note-img{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(0,0,0,.3); }
.mail-note-img img{ max-width:42px; max-height:42px; object-fit:contain; }
.mail-note-dot{ width:14px; height:14px; border-radius:50%; background:#00d5ff; box-shadow:0 0 10px #00d5ff; }
.mail-note-body{ min-width:0; }
.mail-note-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px; }
.mail-note-top small{ font-size:11px; color:#7f8db0; white-space:nowrap; }
.mail-note-tag{ font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; padding:2px 8px; border-radius:999px; color:#9fd6ff; background:rgba(125,184,255,.14); }
.mail-note-body p{ margin:0; font-size:13px; line-height:1.45; color:#e6ecf8; word-break:normal; overflow-wrap:anywhere; }
.mail-note-body p b{ color:#fff; }
.mail-note-btn{ grid-column:1 / -1; width:100% !important; height:38px !important; margin:0 !important; font-size:13px; }
.mail-note-offer_received{ border-color:rgba(255,215,106,.45); background:linear-gradient(160deg, rgba(255,200,61,.08), rgba(255,255,255,.03)); }
.mail-note-offer_received .mail-note-tag{ color:#ffd76a; background:rgba(255,215,106,.15); }
.mail-note-offer_accepted .mail-note-tag, .mail-note-sold .mail-note-tag{ color:#35ffb0; background:rgba(53,255,176,.12); }
.mail-note-offer_declined .mail-note-tag, .mail-note-offer_expired .mail-note-tag, .mail-note-offer_refunded .mail-note-tag{ color:#ff9aa8; background:rgba(255,90,115,.1); }

/* sale tax in the sell popup, history link */
.mk-tax{ color:#ff9aa8 !important; }
.bc-hist-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.bc-hist-link{ font-size:12px; color:#7db8ff; }


/*==================================================
    MARKETPLACE v3.1: small Refresh on the right, no
    image box in Activity, one-line scope buttons
==================================================*/
.mk-refresh{
    flex:0 0 auto; height:30px; padding:0 12px; margin:0 0 0 auto !important; border-radius:8px;
    font:inherit; font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer;
    color:#9fd6ff; background:rgba(0,213,255,.08); border:1px solid rgba(0,213,255,.3);
    transition:background .15s, border-color .15s;
}
.mk-refresh:hover{ background:rgba(0,213,255,.16); border-color:#00d5ff; }
.mk-small-cta{ margin-left:0 !important; color:#ffe3a0; background:rgba(255,215,106,.08); border-color:rgba(255,215,106,.35); }
.mk-small-cta:hover{ background:rgba(255,215,106,.16); border-color:#ffd76a; }
.mk-count-row{ display:flex; align-items:center; gap:10px; margin:4px 2px 10px; }
.mk-count-row .mk-count{ margin:0; }
.mk-spacer{ flex:1; }
.mk-offers-head .mk-locked{ margin-left:auto; }
.mk-offers-head .mk-locked + .mk-refresh{ margin-left:10px !important; }
.mk-mine-head .market-scope{ margin-right:auto; }
.mk-mine-head .mk-refresh{ margin-left:0 !important; }
.mk-mine-head > .mk-refresh, .mk-mine-head > .mk-small-cta{ height:30px; padding:0 12px; }

/* activity toolbar: filters left, Refresh right */
.mk-act-toolbar{ flex-wrap:wrap; }
.mk-act-toolbar .market-scope{ flex:0 0 auto; }
.mk-act-toolbar .market-scope .arena-shop-tab{ white-space:nowrap; min-width:0 !important; width:auto !important; flex:0 0 auto; }
.mk-act-toolbar .mk-refresh{ margin-left:auto !important; }
.mk-act-toolbar select{ height:34px; }

/* activity item: just the picture, no box around it */
.mk-act-img{ width:40px; height:40px; flex:0 0 40px; background:none !important; border:none !important; border-radius:0; }
.mk-act-img img{ max-width:40px; max-height:40px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.mk-act-item .mk-img-empty{ font-size:20px; }

/*==================================================
    MARKETPLACE v4 (Oct 2026): pictures without boxes +
    piece count everywhere, one-line filters, offers
    table, buy offers
==================================================*/

/* ---------- pictures: just the material, no box behind ---------- */
.mk-img, .mk-sell-img, .mk-mine-img, .mk-offer-img, .mk-sellpop-img, .mk-rc-img, .mail-note-img, .mk-act-img, .mk-bidpop-img, .mk-pic{
    background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important;
}
.mk-pic{ position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mk-pic img{ object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
.mk-pic .mk-qty, .mail-note-img .mk-qty{
    position:absolute; right:-4px; bottom:-4px; padding:1px 6px; border-radius:999px; font-size:10px; font-weight:800; line-height:1.4;
    color:#fff; background:rgba(6,8,18,.85); border:1px solid rgba(255,255,255,.18);
}
.mail-note-img{ position:relative; }
.mk-img{ height:110px; }
.mk-img .mk-qty{ background:rgba(6,8,18,.85); border:1px solid rgba(255,255,255,.18); }
.mk-sell-img{ width:100%; height:86px; }
.mk-sell-img img{ max-width:74px; max-height:74px; }
.mk-sell-img .mk-qty{ right:18%; bottom:2px; }
.mk-mine-img, .mk-offer-img{ width:56px; height:56px; flex:0 0 56px; }
.mk-mine-img img, .mk-offer-img img{ max-width:52px; max-height:52px; }
.mk-sellpop-img, .mk-bidpop-img{ width:68px; height:68px; flex:0 0 68px; }
.mk-sellpop-img img, .mk-bidpop-img img, .mk-bidpop-img .mk-pic img{ max-width:62px; max-height:62px; }
.mk-rc-img{ width:84px; height:84px; }
.mk-rc-img img{ max-width:80px; max-height:80px; }
.mk-act-img{ width:42px; height:42px; flex:0 0 42px; }
.mk-act-img img{ max-width:40px; max-height:40px; }

/* ---------- one-line filters / scope buttons ---------- */
.mk-sell-filters{ display:flex !important; flex-wrap:nowrap !important; gap:8px; padding:8px !important; }
.mk-sell-filters > .mk-search{ flex:1 1 auto !important; max-width:280px; height:36px !important; }
.mk-sell-filters > select{ flex:0 0 150px !important; height:36px !important; }
.mk-scope-line{ display:flex !important; flex-wrap:nowrap !important; gap:6px; overflow-x:auto; scrollbar-width:none; }
.mk-scope-line::-webkit-scrollbar{ display:none; }
.mk-scope-line .arena-shop-tab{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; white-space:nowrap; padding:8px 14px !important; border-radius:10px; }

/* ---------- offers table ---------- */
.mk-offers-head{ flex-wrap:wrap; }
.mk-offers-head .mk-locked{ margin-left:0; font-size:12px; white-space:nowrap; }
.mk-otable{ display:flex; flex-direction:column; gap:6px; }
.mk-ohead, .mk-orow{
    display:grid; align-items:center; gap:12px;
    grid-template-columns:minmax(170px, 1.5fr) minmax(110px, 1fr) minmax(100px, .9fr) minmax(100px, .9fr) minmax(110px, .9fr) 170px;
}
.mk-ohead{ padding:0 14px 4px; font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:#6f7c9c; }
.mk-orow{ padding:10px 14px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); transition:border-color .15s, background .15s; }
.mk-orow:hover{ border-color:rgba(0,213,255,.3); background:rgba(0,213,255,.04); }
.mk-orow.closed{ opacity:.6; }
.mk-o-item{ display:flex; align-items:center; gap:12px; min-width:0; }
.mk-o-item .mk-pic{ width:46px; height:46px; }
.mk-o-item .mk-pic img{ max-width:44px; max-height:44px; }
.mk-o-item > div:last-child{ display:flex; flex-direction:column; min-width:0; }
.mk-o-item strong{ color:#fff; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-o-who, .mk-o-price, .mk-o-ref, .mk-o-status{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mk-o-who small, .mk-o-price small, .mk-o-ref small, .mk-o-status small{ font-size:11px; color:#7f8db0; white-space:nowrap; }
.mk-o-price b{ color:#ffd76a; font-size:14px; white-space:nowrap; }
.mk-o-ref b{ color:#e6ecf8; font-size:13px; white-space:nowrap; }
.mk-o-ref .mk-bar{ height:5px; margin-top:3px; }
.mk-o-status .mk-status{ align-self:flex-start; }
.mk-o-actions{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; align-items:center; }
.mk-o-have{ width:100%; text-align:right; font-size:10px; color:#7f8db0; }
.mk-o-k{ display:none; }
.mk-bid-active{ color:#35ffb0; background:rgba(53,255,176,.12); }
.mk-bid-filled{ color:#ffd76a; background:rgba(255,215,106,.14); }
.mk-bid-cancelled, .mk-bid-expired{ color:#ff9aa8; background:rgba(255,90,115,.1); }
.mk-ev-bid{ color:#c9a6ff; background:rgba(170,90,255,.15); }

/* small action buttons */
.mk-btn{
    height:32px; padding:0 14px; border-radius:9px; font:inherit; font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer;
    color:#e6ecf8; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); transition:background .15s, border-color .15s;
}
.mk-btn:hover:not(:disabled){ border-color:#00d5ff; background:rgba(0,213,255,.1); }
.mk-btn:disabled{ opacity:.5; cursor:not-allowed; }
.mk-btn-go{ color:#fff; border:none; background:linear-gradient(100deg, #6B3BFF, #8b3fff); }
.mk-btn-go:hover:not(:disabled){ background:linear-gradient(100deg, #7d52ff, #a05bff); }

@media (max-width:900px){
    .mk-ohead{ display:none; }
    .mk-orow{ grid-template-columns:1fr 1fr; grid-template-areas:"item item" "who price" "ref status" "act act"; row-gap:10px; }
    .mk-o-item{ grid-area:item; }
    .mk-o-who{ grid-area:who; }
    .mk-o-price{ grid-area:price; align-items:flex-end; text-align:right; }
    .mk-o-ref{ grid-area:ref; }
    .mk-o-status{ grid-area:status; align-items:flex-end; }
    .mk-o-status .mk-status{ align-self:flex-end; }
    .mk-o-actions{ grid-area:act; justify-content:stretch; }
    .mk-o-actions .mk-btn{ flex:1; height:38px; }
    .mk-o-k{ display:block; font-size:10px; color:#6f7c9c; text-transform:uppercase; letter-spacing:.5px; }
}

/* ---------- buy offer popups ---------- */
.mk-bidpop-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; text-align:left; }
.mk-bidpop-head .mk-field{ flex:1; margin:0; }
.mk-bidpop-head select, .mk-field select{ height:42px; padding:0 10px; border-radius:10px; border:1px solid rgba(255,255,255,.14); }
.mk-two{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mk-two .mk-field{ margin:4px 0; }
.mk-fill-info{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:#9fb3d6; }
.mk-fill-info b{ color:#fff; }
.mk-bestbid{
    grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-top:4px; padding:9px 10px; border-radius:10px; text-align:left;
    font-size:12px; color:#e6ecf8; background:rgba(53,255,176,.07); border:1px solid rgba(53,255,176,.35);
}
.mk-bestbid b{ color:#35ffb0; }
.mk-bestbid span{ flex:1; }

/*==================================================
    EXCHANGE v2 (Oct 2026): DEX-style swap + Beast Coin
    wallet card (deposit / withdraw)
==================================================*/
.xc-page{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; align-items:start; max-width:1080px; }
.xc-col{ min-width:0; }
.xc-card{
    position:relative; display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:20px;
    background:linear-gradient(165deg, rgba(44,22,88,.55), rgba(10,9,24,.96) 55%); border:1px solid rgba(0,229,255,.22);
    box-shadow:0 14px 40px rgba(0,0,0,.4);
}
.xc-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.xc-card-head h3{ margin:0; font-size:18px; color:#fff; letter-spacing:.3px; }
.xc-chip{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; color:#35ffb0; background:rgba(53,255,176,.1); border:1px solid rgba(53,255,176,.3); }
.xc-locked .xc-chip{ color:#ffd76a; background:rgba(255,215,106,.1); border-color:rgba(255,215,106,.35); }
.xc-mini{ height:28px; padding:0 12px; border-radius:8px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; color:#9fd6ff; background:rgba(0,213,255,.08); border:1px solid rgba(0,213,255,.3); }
.xc-mini:hover{ border-color:#00d5ff; }

/* pay / receive boxes */
.xc-box{ padding:12px 14px; border-radius:16px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); transition:border-color .15s; }
.xc-box:focus-within{ border-color:rgba(0,229,255,.55); }
.xc-box-get{ background:rgba(255,255,255,.035); }
.xc-box-top{ display:flex; justify-content:space-between; font-size:12px; color:#8fa3c8; }
.xc-box-top b{ color:#e6ecf8; }
.xc-box-main{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.xc-amount{
    flex:1; min-width:0; height:46px; padding:0; border:none; outline:none; background:none;
    font:inherit; font-size:28px; font-weight:700; color:#fff;
}
.xc-amount::placeholder{ color:#4d5878; }
.xc-amount::-webkit-outer-spin-button, .xc-amount::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.xc-amount[type=number]{ -moz-appearance:textfield; }
.xc-pcts{ display:flex; gap:6px; margin-top:8px; }
.xc-pcts button{ flex:1; height:28px; border-radius:8px; font:inherit; font-size:11px; font-weight:700; cursor:pointer; color:#9fb3d6; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.xc-pcts button:hover:not(:disabled){ color:#fff; border-color:#00d5ff; }

/* token button + menu */
.xc-tok-wrap{ position:relative; flex:0 0 auto; }
.xc-token{
    display:flex; align-items:center; gap:8px; height:42px; padding:0 12px 0 6px; border-radius:999px; cursor:pointer;
    font:inherit; font-size:15px; font-weight:800; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.xc-token:hover{ border-color:#00d5ff; background:rgba(0,213,255,.1); }
.xc-ticon{ width:30px; height:30px; object-fit:contain; }
.xc-caret{ width:8px; height:8px; margin-left:2px; border-right:2px solid #9fb3d6; border-bottom:2px solid #9fb3d6; transform:rotate(45deg) translateY(-2px); }
.xc-menu{
    position:absolute; right:0; top:48px; z-index:20; width:240px; padding:6px; border-radius:14px;
    background:#121733; border:1px solid rgba(0,229,255,.35); box-shadow:0 16px 40px rgba(0,0,0,.6);
}
.xc-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:8px; border:none; border-radius:10px; background:none; cursor:pointer; color:#e6ecf8; font:inherit; text-align:left; }
.xc-menu button:hover, .xc-menu button.active{ background:rgba(0,213,255,.1); }
.xc-menu button span{ display:flex; flex-direction:column; }
.xc-menu button b{ font-size:13px; }
.xc-menu button small{ font-size:11px; color:#8fa3c8; }
.xc-menu p{ margin:4px 8px 4px; font-size:10px; color:#7f8db0; }

/* flip */
.xc-flip-wrap{ display:flex; justify-content:center; height:0; position:relative; z-index:2; }
.xc-flip{
    width:42px; height:42px; margin-top:-26px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:#00e5ff; background:#151a38; border:4px solid #0d0b1e; box-shadow:0 0 0 1px rgba(0,229,255,.35); transition:transform .2s, color .15s;
}
.xc-flip:hover:not(:disabled){ transform:rotate(180deg); color:#fff; }
.xc-flip:disabled{ color:#4d5878; cursor:not-allowed; box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.xc-box-get{ margin-top:-4px; }

/* info rows */
.xc-info{ display:flex; flex-direction:column; gap:2px; padding:4px 4px 0; }
.xc-info > div{ display:flex; justify-content:space-between; gap:12px; font-size:12px; padding:3px 0; }
.xc-info span{ color:#8fa3c8; white-space:nowrap; }
.xc-info b{ color:#e6ecf8; font-weight:600; text-align:right; }
.xc-info-main b{ color:#ffd76a; font-size:15px; font-weight:800; }

.xc-go{
    height:52px; border:none; border-radius:14px; cursor:pointer; font:inherit; font-size:16px; font-weight:800; letter-spacing:.3px; color:#fff;
    background:linear-gradient(100deg, #6B3BFF, #a03fff 55%, #00b8ff); box-shadow:0 8px 24px rgba(124,44,255,.35); transition:filter .15s, transform .1s;
}
.xc-go:hover:not(:disabled){ filter:brightness(1.12); }
.xc-go:active:not(:disabled){ transform:scale(.99); }
.xc-go:disabled{ cursor:not-allowed; color:#8fa3c8; background:rgba(255,255,255,.07); box-shadow:none; }

.xc-lock-cover{
    position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    border-radius:20px; background:rgba(8,8,20,.72); backdrop-filter:blur(3px); text-align:center;
}
.xc-lock-cover b{ color:#ffd76a; font-size:16px; }
.xc-lock-cover small{ color:#9fb3d6; }

/* review popup */
.xc-review{ display:flex; flex-direction:column; align-items:stretch; gap:4px; text-align:left; }
.xc-rv-line{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.05); }
.xc-rv-line span{ display:block; font-size:11px; color:#8fa3c8; }
.xc-rv-line b{ font-size:17px; color:#fff; }
.xc-rv-icon{ width:34px; height:34px; object-fit:contain; }
.xc-rv-arrow{ width:10px; height:10px; margin:0 auto; border-right:2px solid #00e5ff; border-bottom:2px solid #00e5ff; transform:rotate(45deg); }

/* wallet card */
.xc-bals{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.xc-bal{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); min-width:0; }
.xc-bal > div{ display:flex; flex-direction:column; min-width:0; }
.xc-bal span{ font-size:11px; color:#8fa3c8; }
.xc-bal b{ font-size:16px; color:#ffd76a; white-space:nowrap; }
.xc-bal small{ font-size:10px; color:#6f7c9c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xc-split-bar{ display:flex; height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); }
.xc-split-bar i{ display:block; height:100%; }
.xc-seg-earned, .xc-leg-earned i{ background:#35ffb0; }
.xc-seg-deposited, .xc-leg-deposited i{ background:#00d5ff; }
.xc-seg-presale, .xc-leg-presale i{ background:#a259ff; }
.xc-seg-locked, .xc-leg-locked i{ background:#7f8db0; }
.xc-legend{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11px; color:#8fa3c8; }
.xc-legend span{ display:flex; align-items:center; gap:5px; }
.xc-legend i{ width:8px; height:8px; border-radius:50%; }
.xc-legend b{ color:#e6ecf8; }
.xc-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:12px; background:rgba(0,0,0,.3); }
.xc-tabs button{ height:36px; border:none; border-radius:9px; cursor:pointer; font:inherit; font-size:13px; font-weight:800; color:#8fa3c8; background:none; }
.xc-tabs button.active{ color:#0b1020; background:linear-gradient(90deg, #00e5ff, #7db8ff); }
.xc-flow{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; font-weight:700; color:#c9d3ea; }
.xc-flow span{ display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.05); }
.xc-flow-icon{ width:18px; height:18px; object-fit:contain; }
.xc-flow-arrow{ width:26px; height:2px; background:linear-gradient(90deg, rgba(0,229,255,.2), #00e5ff); position:relative; }
.xc-flow-arrow::after{ content:""; position:absolute; right:-1px; top:-4px; width:8px; height:8px; border-right:2px solid #00e5ff; border-top:2px solid #00e5ff; transform:rotate(45deg); }
.xc-sym{ display:flex; align-items:center; gap:6px; flex:0 0 auto; font-weight:800; color:#fff; }
.xc-sym img{ width:26px; height:26px; object-fit:contain; }
.xc-wd-parts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.xc-wd-parts > div{ display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); min-width:0; }
.xc-wd-parts span{ font-size:10px; color:#8fa3c8; }
.xc-wd-parts b{ font-size:15px; color:#fff; }
.xc-wd-parts small{ font-size:10px; color:#6f7c9c; }
.xc-blocked{ margin:0; padding:10px 12px; border-radius:12px; font-size:13px; color:#ffd1d8; background:rgba(255,90,115,.1); border:1px solid rgba(255,90,115,.3); }
.xc-small{ margin:0; font-size:11px; line-height:1.45; color:#7f8db0; }
.xc-wait{ margin:8px 0; text-align:center; font-size:13px; color:#8fa3c8; }
.xc-sub{ margin:4px 0 0; font-size:12px; color:#9fb3d6; text-transform:uppercase; letter-spacing:.6px; }
.xc-hist{ display:flex; flex-direction:column; gap:4px; }
.xc-hist-row{ display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:8px; padding:7px 10px; border-radius:10px; font-size:12px; background:rgba(255,255,255,.035); }
.xc-hist-row span{ color:#6f7c9c; }
.xc-hist-row b{ color:#fff; }
.xc-st{ font-style:normal; font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; color:#9fd6ff; background:rgba(125,184,255,.12); }
.xc-st-sent{ color:#35ffb0; background:rgba(53,255,176,.12); }
.xc-st-failed, .xc-st-rejected{ color:#ff9aa8; background:rgba(255,90,115,.1); }
.xc-foot{ margin:2px 0 0; font-size:12px; color:#8fa3c8; text-align:center; }
.xc-foot b{ color:#ffd76a; }

@media (max-width:860px){
    .xc-page{ grid-template-columns:1fr; }
}
@media (max-width:420px){
    .xc-amount{ font-size:22px; }
    .xc-wd-parts{ grid-template-columns:1fr; }
    .xc-bals{ grid-template-columns:1fr; }
}

/*==================================================
    EXCHANGE v3: page tabs, centred swap, On-chain
    wallet + Activity, cooldown timer
==================================================*/
.xc-page{ display:block !important; max-width:1080px; }
.xc-pagetabs{ display:flex; gap:4px; width:max-content; margin:0 auto 18px; padding:4px; border-radius:14px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); }
.xc-pagetabs button{ min-width:130px; height:40px; border:none; border-radius:10px; cursor:pointer; font:inherit; font-size:14px; font-weight:800; color:#8fa3c8; background:none; }
.xc-pagetabs button.active{ color:#fff; background:linear-gradient(100deg, #6B3BFF, #a03fff 55%, #00b8ff); box-shadow:0 6px 18px rgba(124,44,255,.35); }
.xc-center{ max-width:480px; margin:0 auto; }
.xc-chain{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:18px; align-items:start; }
.xc-bal-game b{ color:#35ffb0 !important; }
.xc-extra{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; }
.xc-extra > div{ display:flex; flex-direction:column; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); }
.xc-extra span{ font-size:10px; color:#8fa3c8; }
.xc-extra b{ font-size:14px; color:#fff; }
.xc-extra small{ font-size:10px; color:#6f7c9c; }
.xc-wd-parts.xc-wd-one{ grid-template-columns:1fr; }
.xc-wd-parts{ grid-template-columns:repeat(2, 1fr); }
.xc-cooldown{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:16px; border-radius:16px; text-align:center; background:rgba(255,215,106,.06); border:1px solid rgba(255,215,106,.3); }
.xc-cooldown span{ font-size:12px; color:#c9b47a; }
.xc-cooldown b{ font-size:26px; color:#ffd76a; font-variant-numeric:tabular-nums; letter-spacing:.5px; }
.xc-cooldown small{ font-size:11px; color:#8fa3c8; }
.xc-chip-soft{ color:#9fd6ff; background:rgba(125,184,255,.1); border-color:rgba(125,184,255,.3); }
.xc-acts{ display:flex; flex-direction:column; gap:6px; max-height:520px; overflow-y:auto; padding-right:2px; }
.xc-act{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); }
.xc-act-dot{ width:10px; height:10px; flex:0 0 10px; border-radius:50%; }
.xc-act-dep .xc-act-dot{ background:#35ffb0; box-shadow:0 0 8px rgba(53,255,176,.6); }
.xc-act-wd .xc-act-dot{ background:#00d5ff; box-shadow:0 0 8px rgba(0,213,255,.6); }
.xc-act-main{ display:flex; flex-direction:column; flex:1; min-width:0; }
.xc-act-main b{ font-size:13px; color:#fff; }
.xc-act-main small{ font-size:11px; color:#7f8db0; }
.xc-act-amt{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.xc-act-amt b{ font-size:13px; white-space:nowrap; }
.xc-act-dep .xc-act-amt b{ color:#35ffb0; }
.xc-act-wd .xc-act-amt b{ color:#e6ecf8; }
@media (max-width:860px){
    .xc-chain{ grid-template-columns:1fr; }
    .xc-pagetabs button{ min-width:110px; }
}

/*==================================================
    MARKETPLACE: quantity slider reaches the end
    (the generic popup input style gave it padding,
    so the bar stopped short of Max)
==================================================*/
.mk-field input.mk-range-input, .mk-range-input{
    -webkit-appearance:none; appearance:none; display:block; width:100% !important;
    height:8px !important; padding:0 !important; margin:14px 0 6px !important; border:none !important; border-radius:999px !important;
    background:linear-gradient(90deg, #00d5ff 0%, #7db8ff var(--pct, 0%), rgba(255,255,255,.12) var(--pct, 0%)) !important;
    outline:none; cursor:pointer;
}
.mk-range-input::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid #00d5ff; box-shadow:0 0 10px rgba(0,213,255,.6); cursor:pointer; }
.mk-range-input::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid #00d5ff; box-shadow:0 0 10px rgba(0,213,255,.6); cursor:pointer; }
.mk-range-input::-moz-range-track{ background:transparent; border:none; }
.mk-range-ends{ display:flex; justify-content:space-between; font-size:10px; color:#6f7c9c; }

/*==================================================
    EXCHANGE v3.1: more room next to icons, full-width
    centred action buttons
==================================================*/
.xc-bal{ gap:14px !important; padding:12px 14px !important; }
.xc-bal .xc-ticon{ width:34px; height:34px; flex:0 0 34px; }
.xc-bal > div{ gap:2px; }
.xc-flow{ gap:18px !important; margin:4px 0; }
.xc-flow span{ gap:8px !important; padding:6px 14px !important; }
.xc-flow-arrow{ width:40px !important; }
.xc-sym{ gap:8px !important; padding-left:6px; }
.xc-box-main{ gap:14px !important; }
.xc-extra > div, .xc-wd-parts > div{ gap:3px !important; }
#xcWalletBody{ display:flex; flex-direction:column; gap:12px; }
.xc-go{ display:block; width:100% !important; min-height:52px; height:auto !important; padding:12px 16px !important; margin:2px auto 0 !important; text-align:center; white-space:normal; line-height:1.25; }
.xc-act{ gap:14px !important; }

/*==================================================
    SHOP (Packs on AtomicHub)
==================================================*/
.shop-section{ margin-bottom:22px; }
.shop-section-head{ display:flex; align-items:baseline; gap:12px; margin:6px 0 12px; }
.shop-section-head h3{ margin:0; font-size:18px; color:#fff; }
.shop-section-head span{ font-size:12px; color:#8fa3c8; }
.shop-packs-grid{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) !important; gap:14px !important; }
.shop-pack{
    display:flex !important; flex-direction:column; align-items:center; gap:6px; padding:16px !important; border-radius:18px !important; text-align:center;
    background:linear-gradient(170deg, rgba(60,28,120,.5), rgba(10,9,24,.96) 60%) !important; border:1px solid rgba(0,229,255,.2) !important;
    transition:transform .15s, border-color .2s, box-shadow .2s;
}
.shop-pack:hover{ transform:translateY(-3px); border-color:#00d5ff !important; box-shadow:0 14px 30px rgba(0,0,0,.45); }
.shop-pack-img{ width:100%; height:160px; display:flex; align-items:center; justify-content:center; }
.shop-pack-img img{ max-width:100%; max-height:160px; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)); }
.shop-pack h4{ margin:4px 0 0; font-size:17px; color:#fff; }
.shop-pack .pack-card-sub{ margin:0; font-size:13px; color:#9fb3d6; }
.shop-pack-price{ font-size:20px; font-weight:800; color:#ffd76a; }
.shop-pack button{
    width:100%; height:42px; margin-top:4px; border:none; border-radius:12px; cursor:pointer; font:inherit; font-size:14px; font-weight:800; color:#fff;
    background:linear-gradient(100deg, #6B3BFF, #a03fff 55%, #00b8ff);
}
.shop-pack button:hover{ filter:brightness(1.12); }
.shop-pack button.pack-btn-soon{ background:rgba(255,255,255,.08); color:#8fa3c8; }

/*==================================================
    ARENA SHOP v2
==================================================*/
.as-hero{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 18px; margin-bottom:14px; border-radius:18px;
    background:linear-gradient(110deg, rgba(124,44,255,.28), rgba(0,184,255,.12)); border:1px solid rgba(0,229,255,.25);
}
.as-hero-bal{ display:flex; align-items:center; gap:12px; }
.as-hero-bal img{ width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(162,89,255,.6)); }
.as-hero-bal span{ display:block; font-size:12px; color:#c9d3ea; }
.as-hero-bal strong{ font-size:26px; color:#ffd76a; }
.as-hero-txt{ flex:1; min-width:200px; font-size:13px; color:#c9d3ea; }
.as-hero-btn{ height:40px; padding:0 18px; border-radius:12px; border:1px solid rgba(255,215,106,.5); background:rgba(255,215,106,.1); color:#ffe3a0; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.as-hero-btn:hover{ background:rgba(255,215,106,.2); }
.as-tabs{ display:flex; gap:4px; width:max-content; max-width:100%; padding:4px; border-radius:14px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); overflow-x:auto; }
.as-tabs button{ display:flex; align-items:center; gap:8px; height:38px; padding:0 16px; border:none; border-radius:10px; cursor:pointer; white-space:nowrap; font:inherit; font-size:13px; font-weight:800; color:#8fa3c8; background:none; }
.as-tabs button span{ font-size:11px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.08); }
.as-tabs button.active{ color:#fff; background:linear-gradient(100deg, #6B3BFF, #a03fff); }
.as-tabs button.active span{ background:rgba(255,255,255,.2); }
.as-subtabs{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.as-subtabs button{ height:32px; padding:0 14px; border-radius:999px; cursor:pointer; font:inherit; font-size:12px; font-weight:700; color:#9fb3d6; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.as-subtabs button.active{ color:#0b1020; background:linear-gradient(90deg, #00e5ff, #7db8ff); border-color:transparent; }
.as-intro{ margin:10px 2px 12px; font-size:13px; color:#8fa3c8; }
.as-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
.as-card{
    position:relative; display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:18px; overflow:hidden;
    background:linear-gradient(170deg, rgba(40,24,80,.55), rgba(10,9,24,.97) 60%); border:1px solid rgba(255,255,255,.1);
    transition:transform .15s, border-color .2s;
}
.as-card:hover{ transform:translateY(-2px); border-color:rgba(0,229,255,.4); }
.as-card.is-active{ border-color:rgba(53,255,176,.6); box-shadow:0 0 18px rgba(53,255,176,.15); }
.as-ribbon{ position:absolute; top:10px; right:-30px; width:110px; padding:2px 0; transform:rotate(35deg); text-align:center; font-size:10px; font-weight:800; letter-spacing:1px; color:#0b1020; background:#35ffb0; }
.as-ribbon-owned{ background:#7db8ff; }
.as-badge{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:84px; border-radius:14px; }
.as-badge b{ font-size:30px; line-height:1; color:#fff; }
.as-badge small{ margin-top:4px; font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.75); }
.as-tone-red .as-badge{ background:linear-gradient(135deg, rgba(255,77,109,.35), rgba(255,77,109,.06)); border:1px solid rgba(255,77,109,.4); }
.as-tone-cyan .as-badge{ background:linear-gradient(135deg, rgba(0,213,255,.3), rgba(0,213,255,.05)); border:1px solid rgba(0,213,255,.4); }
.as-tone-purple .as-badge{ background:linear-gradient(135deg, rgba(162,89,255,.35), rgba(162,89,255,.06)); border:1px solid rgba(162,89,255,.45); }
.as-tone-gold .as-badge{ background:linear-gradient(135deg, rgba(255,200,61,.32), rgba(255,200,61,.05)); border:1px solid rgba(255,215,106,.45); }
.as-main{ display:flex; flex-direction:column; gap:5px; flex:1; }
.as-main strong{ font-size:15px; color:#fff; }
.as-main p{ margin:0; font-size:12px; line-height:1.45; color:#9fb3d6; }
.as-where{ font-size:11px; color:#35ffb0; }
.as-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.as-chips span{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; color:#9fd6ff; background:rgba(125,184,255,.12); }
.as-chips .as-chip-on{ color:#35ffb0; background:rgba(53,255,176,.12); }
.as-chips .as-chip-off{ color:#ff9aa8; background:rgba(255,90,115,.1); }
.as-card .cos-preview{ margin-top:6px; padding:8px 12px; font-size:12px; pointer-events:none; }
.as-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.07); }
.as-price{ display:flex; align-items:center; gap:6px; font-size:16px; font-weight:800; color:#ffd76a; }
.as-coin{ width:20px; height:20px; object-fit:contain; }
.as-owned-txt{ font-size:13px; color:#7db8ff; }
.as-buy{ min-width:96px; height:36px; padding:0 14px; border:none; border-radius:10px; cursor:pointer; font:inherit; font-size:13px; font-weight:800; color:#fff; background:linear-gradient(100deg, #6B3BFF, #a03fff); }
.as-buy:hover:not(:disabled){ filter:brightness(1.15); }
.as-buy:disabled{ cursor:not-allowed; color:#8fa3c8; background:rgba(255,255,255,.07); }

/* forge: equipment slot tabs + next value */
.forge-gear-tabs{ flex-wrap:wrap; }
.forge-next{ font-style:normal; color:#35ffb0; margin-left:4px; }

/* SHOP v1.1: the 3 packs of each section fill the whole row (no empty space
   on the right), bigger pack art; 2 per row on tablets, 1 on phones */
.shop-packs-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:16px !important; }
.shop-pack{ padding:20px 18px !important; }
.shop-pack-img{ height:200px !important; }
.shop-pack-img img{ max-height:200px !important; }
@media (max-width:900px){ .shop-packs-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width:520px){ .shop-packs-grid{ grid-template-columns:1fr !important; } .shop-pack-img{ height:170px !important; } .shop-pack-img img{ max-height:170px !important; } }

/*==================================================
    OCT 2026 — LISTS, TILES, ONE BUTTON COLOUR
==================================================*/

/* ---------- every popup: info rows as tidy cards (not a bare list) ---------- */
#gamePopupBox .game-popup-rows{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px !important; }
#gamePopupBox .game-popup-rows .forge-level-row{
    flex-direction:column; justify-content:center; align-items:flex-start; gap:2px;
    padding:9px 12px !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:12px;
    background:rgba(255,255,255,.04); font-size:11px; color:#8fa3c8; text-align:left;
}
#gamePopupBox .game-popup-rows .forge-level-row span{ font-size:11px; color:#8fa3c8; }
#gamePopupBox .game-popup-rows .forge-level-row strong{ font-size:15px; color:#fff; }

/* ---------- cost / material tiles (Forge, level materials) ---------- */
.pop-tiles{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.pop-tile{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.pop-tile-short{ border-color:rgba(255,90,115,.45); background:rgba(255,90,115,.06); }
.pop-tile-icon{ width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center; }
.pop-tile-icon img{ max-width:32px; max-height:32px; object-fit:contain; }
.pop-tile-txt{ display:flex; flex-direction:column; flex:1; min-width:0; }
.pop-tile-txt b{ font-size:13px; color:#fff; }
.pop-tile-txt small{ font-size:10px; color:#8fa3c8; }
.pop-tile-src{ color:#7db8ff !important; line-height:1.35; }
.pop-tile-val{ display:flex; flex-direction:column; align-items:flex-end; font-size:15px; font-weight:800; color:#ffd76a; white-space:nowrap; }
.pop-tile-val small{ font-size:10px; font-weight:600; color:#7f8db0; }
.pop-tile-short .pop-tile-val small{ color:#ff9aa8; }
.pop-chance{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:12px; background:rgba(53,255,150,.08); border:1px solid rgba(53,255,150,.3); }
.pop-chance span{ font-size:12px; color:#9fb3d6; }
.pop-chance b{ font-size:20px; color:#35ff96; }
.pop-chance.low{ background:rgba(255,107,107,.08); border-color:rgba(255,107,107,.35); }
.pop-chance.low b{ color:#ff6b6b; }
.forge-req-title{ margin:12px 0 6px; font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:#8fa3c8; }
.lvl-mat-common{ color:#c9d3ea; } .lvl-mat-rare{ color:#6fb2ff; } .lvl-mat-epic{ color:#c58bff; } .lvl-mat-legendary{ color:#ffc24d; } .lvl-mat-mythic{ color:#ff6b8b; }

/* level card: which materials drop here */
.level-mats{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0; padding:4px 10px; border-radius:999px; cursor:pointer; font:inherit; font-size:11px; color:#c9d3ea; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14); }
.level-mats > span:first-child{ font-weight:800; color:#fff; }
.level-mats:hover{ border-color:#00d5ff; }
.lvl-mat-r{ font-weight:700; }

/* ---------- Beast / Equipment list popups ---------- */
.nbl{ display:flex; flex-direction:column; gap:10px; text-align:left; }
.nbl-tabs, .inv-rarity-bar, .gear-rarity-tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.inv-rarity-bar, .gear-rarity-tabs{ margin:6px 0 12px; }
.nbl-tab{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; cursor:pointer; white-space:nowrap; font:inherit; font-size:12px; font-weight:700; color:#c9d3ea; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.nbl-tab span{ font-size:10px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.1); }
.nbl-tab:hover{ border-color:rgba(139,63,255,.7); }
.nbl-tab.active{ color:#fff; border-color:transparent; background:linear-gradient(100deg, #6B3BFF, #8b3fff); box-shadow:0 0 12px rgba(139,63,255,.35); }
.nbl-tab.active span{ background:rgba(255,255,255,.2); }
.nbl-tab-repair{ color:#ffb3c0; border-color:rgba(255,90,115,.4); }
.nbl-tab-list{ margin-left:auto; }
.nbl-r-common{ } .nbl-r-uncommon{ color:#8dffcf; } .nbl-r-rare{ color:#6fb2ff; } .nbl-r-epic{ color:#c58bff; } .nbl-r-legendary{ color:#ffc24d; } .nbl-r-mythic{ color:#ff6b8b; } .nbl-r-ultimate{ color:#ff9e3d; }
.nbl-tab.active.nbl-r-uncommon, .nbl-tab.active.nbl-r-rare, .nbl-tab.active.nbl-r-epic, .nbl-tab.active.nbl-r-legendary, .nbl-tab.active.nbl-r-mythic, .nbl-tab.active.nbl-r-ultimate{ color:#fff; }
.nbl-list{ display:flex; flex-direction:column; gap:6px; max-height:56vh; overflow-y:auto; padding-right:2px; }
.nbl-row{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); }
.nbl-row.nbl-needs{ border-color:rgba(255,190,60,.35); }
.nbl-pic{ position:relative; width:56px; height:56px; flex:0 0 56px; display:flex; align-items:center; justify-content:center; box-shadow:none !important; background:none !important; }
.nbl-pic img{ max-width:56px; max-height:56px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.nbl-lv{ position:absolute; right:-4px; bottom:-4px; padding:1px 6px; border-radius:999px; font-size:9px; font-weight:800; color:#fff; background:rgba(6,8,18,.9); border:1px solid rgba(255,255,255,.2); }
.nbl-info{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.nbl-info strong{ font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nbl-info small{ font-size:11px; color:#8fa3c8; }
.nbl-rar{ font-weight:800; }
.nbl-acts{ display:flex; flex-direction:column; gap:5px; align-items:stretch; flex:0 0 auto; }
.nbl-btn{ height:32px; padding:0 14px; border-radius:9px; cursor:pointer; white-space:nowrap; font:inherit; font-size:12px; font-weight:800; color:#fff; border:none; background:linear-gradient(100deg, #6B3BFF, #8b3fff); }
.nbl-btn:hover{ filter:brightness(1.12); }
.nbl-feed{ color:#ffe3a0; background:rgba(255,190,60,.12); border:1px solid rgba(255,190,60,.45); }
.nbl-ok{ font-size:11px; color:#35ffb0; }
.inv-click{ cursor:pointer; }
.inv-click:hover{ transform:translateY(-2px); }
.inv-feed-note{ display:block; font-size:11px; font-weight:700; color:#ffc24d; }
.inv-tap-note{ display:block; font-size:10px; color:#6f7c9c; }
@media (max-width:520px){ .nbl-row{ flex-wrap:wrap; } .nbl-acts{ flex-direction:row; width:100%; } .nbl-acts .nbl-btn{ flex:1; } .nbl-tab-list{ margin-left:0; } }

/* quests: daily hunts */
.quest-reset{ font-size:11px; font-weight:600; color:#8fa3c8; margin-left:8px; }
.quest-daily-count{ margin:0 0 8px; font-size:13px; color:#9fb3d6; }
.quest-daily-count b{ color:#ffd76a; }

/* boss hit breakdown */
.boss-lasthit-boosts{ display:block; margin-top:4px; font-size:11px; color:#9fd6ff; }

/* ---------- ONE BUTTON COLOUR: the game's purple (like .craft-btn) ---------- */
.xc-go, .shop-pack button, .as-buy, .mk-btn-go, .mk-sell-cta,
.xc-pagetabs button.active, .xc-tabs button.active, .as-tabs button.active, .as-subtabs button.active, .mk-chip.active{
    background:linear-gradient(100deg, #6B3BFF, #8b3fff) !important;
    color:#fff !important;
    box-shadow:0 0 14px rgba(139,63,255,.35) !important;
}
.xc-go:disabled, .as-buy:disabled{ background:rgba(255,255,255,.07) !important; color:#8fa3c8 !important; box-shadow:none !important; }
.shop-pack button.pack-btn-soon{ background:rgba(255,255,255,.08) !important; color:#8fa3c8 !important; box-shadow:none !important; }

/*==================================================
    OCT 2026 — MOBILE FIXES
==================================================*/

/* active boosts strip: one slim line (idle page only, see arenaShopLogic.js) */
.dash-boost-strip{ flex-wrap:nowrap !important; overflow-x:auto; gap:6px !important; padding:6px 10px !important; margin:0 0 10px !important; scrollbar-width:none; }
.dash-boost-strip::-webkit-scrollbar{ display:none; }
.dash-boost-strip .arena-boosts-title{ flex:0 0 auto; font-size:11px; }
.dash-boost-strip .arena-boost-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:3px 9px; font-size:11px; }
.dash-boost-strip .arena-boost-chip i{ font-style:normal; opacity:.75; }

/* forge equipment: rarity row */
.forge-gear-rarity{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px; }

@media (max-width:760px){

    /* Arena: the Fight button stays on screen while you scroll */
    .pvp-arena .pvp-actions{
        position:sticky; bottom:0; z-index:30; margin:0 -12px; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        display:grid !important; grid-template-columns:1.4fr 1fr; gap:8px;
        background:linear-gradient(180deg, rgba(10,8,24,0), rgba(10,8,24,.96) 35%);
    }
    .pvp-arena .pvp-actions button{ margin:0 !important; height:46px; }
    .pvp-arena .pvp-card-art img{ max-height:110px; }
    .pvp-arena .pvp-cards{ gap:6px; }
    .pvp-arena .pvp-rules-note{ font-size:11px; }

    /* Forge: tabs, then a short scrollable 2-column list, then the panel */
    .forge-body{ display:flex !important; flex-direction:column !important; gap:12px; }
    .forge-item-list{
        display:grid !important; grid-template-columns:1fr 1fr; gap:6px; align-content:start;
        max-height:44vh; overflow-y:auto; padding:2px; width:100% !important;
    }
    .forge-item-list > .forge-rarity-tabs, .forge-item-list > .forge-gear-rarity, .forge-item-list > p{ grid-column:1 / -1; }
    .forge-rarity-tabs{ flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; }
    .forge-rarity-tabs::-webkit-scrollbar{ display:none; }
    .forge-rarity-tab{ flex:0 0 auto !important; }
    .forge-list-item{ margin:0 !important; padding:8px !important; gap:8px !important; }
    .forge-list-item img{ width:38px !important; height:38px !important; }
    .forge-list-text strong{ font-size:12px !important; }
    .forge-list-text span{ font-size:10px !important; }
    .forge-detail-panel{ width:100% !important; padding:14px !important; }
    .forge-detail-img{ width:84px !important; height:84px !important; }
    .pop-tile{ padding:8px 10px; gap:10px; }
    .pop-tile-src{ font-size:9px !important; }

    /* Leaderboard: name + badge on one line, slimmer rows */
    .leaderboard-name{ font-size:11px !important; display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; overflow:hidden; }
    .leaderboard-name .lb-name-text{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
    .lb-title-badge{ margin-left:0 !important; padding:1px 6px !important; font-size:8px !important; letter-spacing:.4px !important; flex:0 0 auto; }
    .leaderboard-row{ padding-top:7px !important; padding-bottom:7px !important; min-height:0 !important; }
}

/*==================================================
    RENT v2 (vault + deposit)
==================================================*/
.rent-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.rent-note{ margin:0 0 14px; padding:10px 14px; border-radius:12px; font-size:12px; line-height:1.5; color:#c9d3ea; background:rgba(0,213,255,.06); border:1px solid rgba(0,213,255,.22); }
.rent-note b{ color:#fff; }
.rent-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; margin-bottom:18px; }
.rent-card2{ display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:16px; background:linear-gradient(170deg, rgba(40,24,80,.5), rgba(10,9,24,.96) 60%); border:1px solid rgba(255,255,255,.1); }
.rent-card2.rent-locked{ border-color:rgba(255,190,60,.45); }
.rent-card2-img{ height:120px; display:flex; align-items:center; justify-content:center; }
.rent-card2-img img{ max-height:116px; max-width:100%; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.rent-card2 strong{ font-size:15px; color:#fff; }
.rent-card2 > small{ font-size:11px; color:#8fa3c8; }
.rent-kv{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:#8fa3c8; }
.rent-kv b{ color:#fff; text-align:right; }
.rent-card2-acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px; }
.rent-card2-acts > button{ flex:1; height:38px; margin:0 !important; }
.rent-dur{ position:relative; height:16px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.rent-dur i{ position:absolute; inset:0 auto 0 0; background:#35ffb0; }
.rent-dur i.mid{ background:#ffc24d; } .rent-dur i.low{ background:#ff6b6b; }
.rent-dur span{ position:relative; display:block; text-align:center; font-size:10px; font-weight:800; line-height:16px; color:#0b1020; }
.rent-st{ align-self:flex-start; font-size:10px; font-weight:800; padding:2px 9px; border-radius:999px; color:#9fd6ff; background:rgba(125,184,255,.12); }
.rent-st-rented{ color:#ffc24d; background:rgba(255,190,60,.14); }
.rent-st-listed{ color:#c58bff; background:rgba(162,89,255,.15); }
.rent-st-free{ color:#35ffb0; background:rgba(53,255,176,.12); }
.rent-mine-tag{ font-size:12px; color:#7db8ff; }
.rent-warn{ color:#ffc24d !important; }
.rent-good{ color:#35ffb0 !important; }
.pop-tile-total{ border-color:rgba(255,215,106,.45); background:rgba(255,215,106,.07); }
.rent-hists{ display:flex; flex-direction:column; gap:6px; }
.rent-hist{ display:grid; grid-template-columns:1.6fr 1fr 1fr 0.8fr; gap:10px; align-items:center; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); }
.rent-hist > div{ display:flex; flex-direction:column; min-width:0; }
.rent-hist span, .rent-hist small{ font-size:10px; color:#8fa3c8; }
.rent-hist b{ font-size:13px; color:#fff; }
@media (max-width:600px){ .rent-hist{ grid-template-columns:1fr 1fr; } .rent-grid{ grid-template-columns:1fr 1fr; } .rent-card2-img{ height:90px; } }

/* RENT v2.1: select-many bar, picked cards, filters */
.rent-pickbar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; padding:8px 10px; border-radius:12px; background:rgba(12,10,28,.95); border:1px solid rgba(139,63,255,.35); }
.rent-pickbar > span{ font-size:12px; color:#9fb3d6; }
.rent-pick-go{ width:auto !important; margin:0 0 0 auto !important; padding:0 18px; height:36px; }
.rent-pick-go:disabled{ background:rgba(255,255,255,.08); box-shadow:none; color:#8fa3c8; cursor:not-allowed; }
.rent-card2.rent-picked{ border-color:rgba(139,63,255,.85); box-shadow:0 0 16px rgba(139,63,255,.35); }
.rent-rarity{ margin-bottom:6px; }
#rentStatsBox .mk-stats{ margin-top:0; }
@media (max-width:600px){ .rent-pick-go{ width:100% !important; margin-left:0 !important; } }

/* RENT v2.2: Beasts / Equipment chips + MOBILE (no text running out) */
.rent-kinds .mk-chip small{ margin-left:4px; opacity:.75; }
.rent-card2{ min-width:0; }
.rent-card2 strong, .rent-card2 > small{ overflow-wrap:anywhere; }
.rent-kv{ min-width:0; }
.rent-kv span{ flex:0 0 auto; }
.rent-kv b{ min-width:0; overflow-wrap:anywhere; }
.rent-st{ white-space:normal; line-height:1.35; }
.rent-card2-acts > button{ white-space:normal; line-height:1.2; height:auto !important; min-height:38px; padding:6px 10px !important; }
.rent-note{ overflow-wrap:anywhere; }
@media (max-width:600px){
    #rentStatsBox .mk-stats{ grid-template-columns:1fr 1fr; gap:6px; }
    #rentStatsBox .mk-stat{ padding:8px 10px; }
    #rentStatsBox .mk-stat b{ font-size:15px; }
    #rentStatsBox .mk-stat small{ white-space:normal; font-size:10px; }
    .rent-tabs{ flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
    .rent-tabs::-webkit-scrollbar{ display:none; }
    .rent-tabs .nbl-tab, .rent-tabs .mk-chip{ flex:0 0 auto; }
    .rent-grid{ grid-template-columns:1fr !important; }
    .rent-card2{ display:grid; grid-template-columns:76px minmax(0, 1fr); column-gap:12px; row-gap:5px; align-items:start; padding:12px; }
    .rent-card2 > *{ grid-column:2; }
    .rent-card2-img{ grid-column:1 !important; grid-row:1 / span 4; height:76px; }
    .rent-card2-img img{ max-height:72px; }
    .rent-card2-acts{ grid-column:1 / -1 !important; }
    .rent-note{ font-size:11px; padding:9px 11px; }
    .rent-pickbar > span{ flex:1; }
    .rent-hist{ grid-template-columns:1fr 1fr; row-gap:6px; }
}