/*==================================================
NEON BEAST IDLE
ANIMATIONS
==================================================*/

/*==========================================
PROGRESS BAR SHINE (idle hunt bar)
==========================================*/

.progress-fill{

    position:relative;

    overflow:hidden;

}

.progress-fill::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:40%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    animation:progressShine 1.6s linear infinite;

}

@keyframes progressShine{

    0%{
        transform:translateX(-120%);
    }

    100%{
        transform:translateX(280%);
    }

}

/*==========================================
LIVE NEON BACKGROUND
==========================================*/

#bg-overlay{

    animation:bgPulse 8s ease-in-out infinite;

}

@keyframes bgPulse{

    0%,100%{
        opacity:.85;
    }

    50%{
        opacity:1;
    }

}

#bg-particles{

    background-image:

        radial-gradient(2px 2px at 20% 30%, rgba(0,229,255,.55), transparent),
        radial-gradient(2px 2px at 65% 70%, rgba(255,43,194,.45), transparent),
        radial-gradient(2px 2px at 85% 20%, rgba(53,255,150,.45), transparent),
        radial-gradient(1.5px 1.5px at 40% 85%, rgba(0,229,255,.4), transparent),
        radial-gradient(1.5px 1.5px at 10% 60%, rgba(255,43,194,.35), transparent);

    background-repeat:repeat;

    background-size:400px 400px;

    animation:particleDrift 40s linear infinite;

    opacity:.6;

}

@keyframes particleDrift{

    0%{
        background-position:0 0;
    }

    100%{
        background-position:-400px -400px;
    }

}

/*==========================================
GUARDIAN / EQUIPMENT UNLOCKED GLOW PULSE
==========================================*/

.guardian-slot.unlocked,
.equipment-slot.unlocked{

    animation:unlockedPulse 3s ease-in-out infinite;

}

@keyframes unlockedPulse{

    0%,100%{
        box-shadow:0 0 8px rgba(53,255,150,.15);
    }

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

}


/*======================================================
EARLY SUPPORTER title (Oct 2026): a gift for the first
50 Discord members. Leaderboard row + badge + Arena card.
======================================================*/
.leaderboard-row.lb-titled-titleEarly{
    background:linear-gradient(100deg, rgba(0,229,255,.18), rgba(10,60,80,.35) 45%, rgba(6,14,22,.85));
    border:1px solid rgba(0,229,255,.6);
    box-shadow:0 0 16px rgba(0,229,255,.2), inset 0 1px 0 rgba(200,250,255,.2);
}
.leaderboard-row.lb-titled-titleEarly .lb-name-text{ color:#e6fdff; text-shadow:0 0 10px rgba(0,229,255,.5); }
.lb-badge-titleEarly{ color:#002a33; background:linear-gradient(135deg, #b8f6ff, #00e5ff 55%, #00a6c7); box-shadow:0 0 10px rgba(0,229,255,.55); }
.lb-badge-titleEarly::before{ content:"\1F3C5  "; }
.pvp-card-title.cos-titleEarly{
    color:#002a33; background:linear-gradient(135deg, #b8f6ff, #00e5ff 55%, #00a6c7);
    border:1px solid #c9f9ff; box-shadow:0 0 14px rgba(0,229,255,.55);
}


/*======================================================
PROFILE: My Cosmetics (Oct 2026)
======================================================*/
.prof-cos{
    padding:14px; border-radius:14px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.prof-cos .cos-preview{ margin:6px 0 12px; }
.prof-cos-note{ margin:0; font-size:12px; color:#9fb3d6; }
.prof-cos-row{ display:flex; align-items:flex-start; gap:12px; padding:8px 0; border-top:1px solid rgba(255,255,255,.06); }
.prof-cos-label{ flex:0 0 96px; padding-top:7px; font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#9fb3d6; }
.prof-cos-chips{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.prof-cos-chip{
    padding:6px 12px; border-radius:99px; cursor:pointer;
    font-size:12px; font-weight:700; color:#dfe6ff;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
}
.prof-cos-chip.on{ color:#fff; background:var(--nb-theme); border-color:transparent; box-shadow:0 0 12px rgba(120,80,255,.35); }
.prof-cos-chip:disabled{ opacity:.5; cursor:wait; }
.prof-cos-empty{ padding-top:7px; font-size:12px; font-style:normal; color:#7f8db0; }
.prof-cos-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); font-size:12px; color:#9fb3d6; }
.prof-cos-foot b{ color:#fff; }
.prof-cos-more{
    padding:8px 14px; border-radius:10px; cursor:pointer; border:none;
    font-size:12px; font-weight:800; color:#fff; background:var(--nb-theme);
}
@media (max-width:520px){
    .prof-cos-row{ flex-direction:column; gap:6px; }
    .prof-cos-label{ flex:none; padding-top:0; }
}


/*======================================================
YOUR RANK pinned above #1 (Oct 2026): leaderboards,
Bugs & testers, Invite board. Your name shows "(you)".
======================================================*/
.lb-you-pin,
.bug-you-pin{
    margin:4px 0 14px;
    padding-bottom:12px;
    border-bottom:1px dashed rgba(255,255,255,.14);
}
.lb-you-pin-label{
    display:block;
    margin:0 0 6px 4px;
    font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
    color:#9fb3d6;
}
.lb-you-tag{
    font-style:normal; font-weight:700; font-size:.85em;
    color:#00e5ff; margin-left:4px;
}

/* PROFILE Cosmetics v2 (Oct 2026): 3 tabs + a card per owned item */
.prof-cos-tabs{ display:flex; gap:8px; margin:6px 0 12px; }
.prof-cos-tab{
    flex:1; height:42px; padding:0 10px; border:none; border-radius:12px; cursor:pointer;
    background:#1F2937; color:#9fb3d6; font-weight:700; font-size:13px; transition:.2s;
}
.prof-cos-tab small{ margin-left:4px; font-size:11px; opacity:.8; }
.prof-cos-tab.active{ background:linear-gradient(100deg,#7c2cff,#00E5FF); color:#fff; }
.prof-cos-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.prof-cos-card{
    display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:12px;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
}
.prof-cos-card.on{ border-color:rgba(53,255,176,.6); box-shadow:0 0 14px rgba(53,255,176,.15); }
.prof-cos-look{ margin:0 !important; padding:10px 12px !important; min-height:0; }
.prof-cos-card-info{ display:flex; flex-direction:column; }
.prof-cos-card-info b{ color:#fff; font-size:14px; }
.prof-cos-card-info span{ color:#9fb3d6; font-size:11px; }
.prof-cos-btn{
    height:36px; border:none; border-radius:10px; cursor:pointer;
    font-size:13px; font-weight:800; color:#fff; background:var(--nb-theme);
}
.prof-cos-btn:disabled{ opacity:.5; cursor:wait; }
.prof-cos-card .prof-cos-btn{ margin-top:auto; }
@media (max-width:520px){
    .prof-cos-tab{ font-size:12px; padding:0 6px; }
    .prof-cos-cards{ grid-template-columns:1fr; }
}


/* Bugs popup (beta #42): Send report + Close side by side, always in view */
.bug-actions{
    position:sticky; bottom:-1px; z-index:2;
    display:flex; gap:10px; margin-top:12px; padding:10px 0 2px;
    background:linear-gradient(180deg, rgba(14,10,30,0), rgba(14,10,30,.96) 30%);
}
.bug-actions .bug-send{ flex:2; width:auto; margin:0 !important; }
.bug-actions .bug-close{ flex:1; }
.game-popup-actions.bug-acts-hidden{ display:none !important; }

/* Material shop (beta #43): why the buy buttons are grey */
.mshop-why{ margin:6px 0 0; font-size:12px; color:#ffd76a; line-height:1.4; }

/* frame + title together (beta #41): the title row look used to hide a Bronze/Silver/Gold frame */
.leaderboard-row.lb-titled.lb-cos-frameBronze{ border-color:rgba(205,127,50,.85) !important; box-shadow:inset 4px 0 0 #cd7f32, 0 0 14px rgba(205,127,50,.35) !important; }
.leaderboard-row.lb-titled.lb-cos-frameSilver{ border-color:rgba(217,226,236,.85) !important; box-shadow:inset 4px 0 0 #d9e2ec, 0 0 14px rgba(217,226,236,.3) !important; }
.leaderboard-row.lb-titled.lb-cos-frameGold{ border-color:rgba(255,215,106,.9) !important; box-shadow:inset 4px 0 0 #ffd76a, 0 0 16px rgba(255,215,106,.4) !important; }

/* Bugs popup (beta): the report form fits on the screen without scrolling.
   PC / tablet: wider popup, 2 columns, smaller text boxes */
.bug-form{ display:block; }
@media (min-width:760px){
    .game-popup-box:has(.bug-panel){ width:min(920px, 94vw) !important; max-width:min(920px, 94vw) !important; padding:18px 22px !important; }
    .bug-body{ max-height:calc(92vh - 150px) !important; }
    .bug-form{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; align-items:start; }
    .bug-col{ min-width:0; }
    .bug-panel .bug-ta{ min-height:96px; height:96px; }
    .bug-panel .bug-ta.small{ min-height:72px; height:72px; }
    .bug-panel .bug-note{ margin:0 0 8px; }
    .bug-panel .bug-lbl{ margin-top:6px; }
    .bug-shot-preview img{ max-height:90px; }
}
/* phones: a bit tighter + the popup may use almost the whole screen */
@media (max-width:759px){
    .game-popup-box:has(.bug-panel){ max-height:96vh !important; padding:14px 14px !important; }
    .bug-body{ max-height:calc(96vh - 150px) !important; }
    .bug-panel .bug-note{ font-size:12px; margin:0 0 6px; }
    .bug-panel .bug-shot{ margin-bottom:4px; }
    .bug-panel .bug-ta{ min-height:76px; height:76px; }
    .bug-panel .bug-ta.small{ min-height:56px; height:56px; }
    .bug-panel .bug-lbl{ margin-top:6px; }
}

/* Oct 2026: Marketplace shows the trader's title badge next to the name */
.mk-who .lb-title-badge{ margin-left:0; flex:0 0 auto; }
.mk-who .mk-who-text{ min-width:0; }
/* phones (bug #50): the badge goes under the name instead of being hidden */
@media (max-width:600px){ .mk-act-row .mk-who{ flex-wrap:wrap; row-gap:3px; } .mk-act-row .mk-who .lb-title-badge{ font-size:8px; padding:1px 6px; letter-spacing:.4px; } }


/*======================================================
Oct 2026 (20 Oct): REFINE + WORKSHOP, BEAST DEN, PVP DUELS,
SERVER BOOSTER, boss Arrows (refine.js, den.js, duels.js)
======================================================*/
.nb-sub{ color:#a9b3d1; font-size:13px; margin:6px 0 12px; line-height:1.5; }
.nb-dim{ color:#a9b3d1; font-size:13px; line-height:1.5; }
.nb-tabs{ margin:8px 0 12px; }
.nb-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:12px; margin-bottom:16px; }
.nb-card{
    display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px; min-width:0;
    background:linear-gradient(160deg, rgba(50,20,90,.35), rgba(14,10,26,.85) 65%);
    border:1px solid rgba(139,63,255,.3);
}
.nb-card.nb-tier-uncommon{ border-color:rgba(53,255,150,.35); }
.nb-card.nb-tier-rare{ border-color:rgba(70,150,255,.5); }
.nb-card.nb-tier-epic{ border-color:rgba(170,90,255,.55); }
.nb-card.nb-tier-legendary{ border-color:rgba(255,190,60,.6); }
.nb-card.nb-tier-mythic, .nb-card.nb-tier-ultimate{ border-color:rgba(255,70,110,.6); }
.nb-card.nb-warn{ border-color:rgba(255,190,60,.7); background:rgba(255,190,60,.08); }
.nb-card-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.nb-card-head strong{ font-family:Orbitron, sans-serif; font-size:14px; letter-spacing:.5px; }
.nb-chip{ font-size:11px; padding:3px 9px; border-radius:999px; background:rgba(139,63,255,.18); border:1px solid rgba(139,63,255,.4); color:#d8ccff; white-space:nowrap; }
.nb-chip.nb-win{ background:rgba(53,255,150,.15); border-color:rgba(53,255,150,.5); color:#8dffc6; }
.nb-chip.nb-lose{ background:rgba(255,77,109,.15); border-color:rgba(255,77,109,.5); color:#ff9db0; }
.nb-line{ font-size:13px; color:#d7dcef; line-height:1.45; }
.nb-label{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#8c96b8; margin-top:2px; }
.nb-why{ font-size:12px; color:#ffcf7a; }
.nb-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.nb-btns .craft-btn{ width:auto; flex:1 1 0; min-width:70px; margin-top:0; padding:0 12px; }
.nb-btns .craft-btn.nb-small{ height:34px; font-size:12px; display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.nb-mat{ display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; flex:0 0 auto; }
.nb-mat img{ width:22px; height:22px; object-fit:contain; }
.nb-srcs, .nb-tgts{ display:flex; gap:6px; flex-wrap:wrap; }
.nb-src, .nb-tgt{
    display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; cursor:pointer; font-size:12px; color:#d7dcef;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); font-family:inherit;
}
.nb-src input{ accent-color:#8b3fff; margin:0; }
.nb-src b{ color:#fff; }
.nb-src:not(.on){ opacity:.55; }
.nb-tgt small{ color:#8c96b8; }
.nb-tgt.on, .nb-src.on{ border-color:rgba(139,63,255,.75); background:rgba(139,63,255,.18); }

/* Beast Den */
.nb-den-top{ display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px; margin-bottom:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); }
.nb-den-top .craft-btn{ margin-top:4px; }
.nb-beast{ display:flex; gap:10px; align-items:center; min-width:0; }
.nb-beast-img{ width:52px; height:52px; border-radius:10px; overflow:hidden; flex:0 0 auto; background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; font-size:22px; }
.nb-beast-img img{ width:100%; height:100%; object-fit:cover; }
.nb-beast-name{ display:flex; flex-direction:column; min-width:0; }
.nb-beast-name strong{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nb-beast-name small{ color:#8c96b8; font-size:12px; }
.nb-bar{ position:relative; height:10px; border-radius:6px; background:rgba(255,255,255,.08); overflow:visible; }
.nb-bar-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,#20d38a,#7dffb0); }
.nb-bar-cap{ position:absolute; top:-3px; width:2px; height:16px; background:#fff; opacity:.6; }
.nb-den-empty{ align-items:center; justify-content:center; min-height:120px; border-style:dashed; color:#8c96b8; }
.nb-den-empty span{ font-size:28px; }

/* PvP Duels */
.nb-thumbs{ display:flex; gap:6px; flex-wrap:wrap; }
.nb-thumb{ position:relative; width:46px; height:46px; border-radius:9px; overflow:hidden; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.nb-thumb img{ width:100%; height:100%; object-fit:cover; }
.nb-thumb small{ position:absolute; bottom:0; left:0; right:0; font-size:9px; text-align:center; background:rgba(0,0,0,.65); color:#fff; }
.nb-picks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; margin-bottom:12px; }
.nb-pick{
    position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px; border-radius:12px; cursor:pointer;
    background:rgba(255,255,255,.04); border:2px solid rgba(255,255,255,.1); color:#d7dcef; font-family:inherit; font-size:12px;
}
.nb-pick img{ width:72px; height:72px; object-fit:cover; border-radius:8px; }
.nb-pick small{ color:#8c96b8; }
.nb-pick i{ position:absolute; top:6px; right:6px; font-style:normal; font-size:10px; padding:1px 5px; border-radius:6px; background:rgba(0,0,0,.6); }
.nb-pick.on{ border-color:#8b3fff; background:rgba(139,63,255,.2); box-shadow:0 0 12px rgba(139,63,255,.4); }
.nb-sticky{ position:sticky; bottom:8px; z-index:2; padding:8px; border-radius:12px; background:rgba(10,8,20,.92); }
.nb-hists{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.nb-hist{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); font-size:13px; flex-wrap:wrap; }
.nb-hist a{ color:#c9b8ff; font-weight:700; }
.nb-rounds{ display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.nb-round{ display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:10px; font-size:13px; background:rgba(255,255,255,.04); border-left:3px solid #ff4d6d; }
.nb-round.win{ border-left-color:#35ffb0; }
.nb-round b{ white-space:nowrap; }

/* boss screen: Arrows + poison */
.boss-workshop{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 14px; margin:6px 0 10px; font-size:13px; }
.boss-arrow{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; cursor:pointer; background:rgba(255,190,60,.1); border:1px solid rgba(255,190,60,.45); color:#ffe1a0; }
.boss-arrow input{ accent-color:#ffbe3c; margin:0; }
.boss-arrow.off{ opacity:.5; cursor:default; }
.boss-arrow small, .boss-poison small{ color:#a9b3d1; }
.boss-poison{ padding:6px 12px; border-radius:999px; background:rgba(110,255,80,.06); border:1px solid rgba(110,255,80,.25); color:#c8ffb0; }
.boss-poison.on{ background:rgba(110,255,80,.14); border-color:rgba(110,255,80,.6); }
.boss-arrow-make{ color:#c9b8ff; font-size:12px; }

/* SERVER BOOSTER: title + Booster Pink name */
.leaderboard-row.lb-titled-titleBooster{
    background:linear-gradient(100deg, rgba(255,115,250,.2), rgba(90,30,110,.35) 45%, rgba(14,8,22,.85));
    border:1px solid rgba(255,115,250,.6);
    box-shadow:0 0 16px rgba(255,115,250,.22), inset 0 1px 0 rgba(255,220,255,.2);
}
.leaderboard-row.lb-titled-titleBooster .lb-name-text{ color:#ffe6fe; text-shadow:0 0 10px rgba(255,115,250,.5); }
.lb-badge-titleBooster{ color:#3a0038; background:linear-gradient(135deg, #ffd6fd, #ff73fa 55%, #b84dff); box-shadow:0 0 10px rgba(255,115,250,.55); }
.lb-badge-titleBooster::before{ content:"\1F48E  "; }
.pvp-card-title.cos-titleBooster{
    color:#3a0038; background:linear-gradient(135deg, #ffd6fd, #ff73fa 55%, #b84dff);
    border:1px solid #ffd6fd; box-shadow:0 0 14px rgba(255,115,250,.55);
}
.leaderboard-name.lb-cos-nameBooster, .leaderboard-name.lb-cos-nameBooster .lb-name-text,
.mk-who.mk-cos-nameBooster .mk-who-text,
.pvp-card.cos-nameBooster .pvp-card-name{
    color:#ff8dfb; text-shadow:0 0 9px rgba(255,115,250,.75); font-weight:700;
}

@media (max-width:600px){
    .nb-grid{ grid-template-columns:1fr; }
    .nb-picks{ grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); }
    .nb-pick img{ width:60px; height:60px; }
}

/* ---------- Oct 2026 (20 Oct, v2): Refine panel, Workshop, Den, Duels ---------- */
.nb-steps{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.nb-step{
    display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; cursor:pointer; font-family:inherit; font-size:12px;
    color:#d7dcef; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
}
.nb-step i{ font-style:normal; color:#8c96b8; }
.nb-step.on{ border-color:rgba(139,63,255,.8); background:rgba(139,63,255,.2); color:#fff; }
.nb-panel{
    display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:16px; margin-bottom:16px; min-width:0;
    background:linear-gradient(160deg, rgba(50,20,90,.4), rgba(14,10,26,.9) 65%);
    border:1px solid rgba(139,63,255,.35);
}
.nb-panel.nb-tier-uncommon{ border-color:rgba(53,255,150,.4); }
.nb-panel.nb-tier-rare{ border-color:rgba(70,150,255,.55); }
.nb-panel.nb-tier-epic{ border-color:rgba(170,90,255,.6); }
.nb-panel.nb-tier-legendary{ border-color:rgba(255,190,60,.65); }
.nb-panel.nb-tier-mythic{ border-color:rgba(255,70,110,.65); }
.nb-panel-row{ display:flex; flex-direction:column; gap:6px; }
.nb-haves{ display:flex; gap:8px; flex-wrap:wrap; }
.nb-have{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; font-size:13px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); }
.nb-have b{ color:#fff; }
.nb-tgt{ flex-direction:column; align-items:center; min-width:110px; padding:10px 12px; }
.nb-mat-big, .nb-mat-big img{ width:34px; height:34px; }
.nb-qty{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nb-qty input{
    width:90px; height:40px; text-align:center; font-size:18px; font-weight:700; border-radius:10px; color:#fff;
    background:rgba(0,0,0,.35); border:1px solid rgba(139,63,255,.5); font-family:inherit;
}
.nb-qty input::-webkit-inner-spin-button{ opacity:.4; }
.nb-qbtn{
    min-width:40px; height:40px; padding:0 10px; border-radius:10px; cursor:pointer; font-size:18px; font-weight:700; font-family:inherit; color:#fff;
    background:linear-gradient(100deg, #6B3BFF, #8b3fff); border:none;
}
.nb-qbtn.nb-qmax{ font-size:12px; letter-spacing:1px; }
.nb-summary{ display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:12px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); font-size:13px; }
.nb-summary > div{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.nb-summary span{ color:#8c96b8; }
.nb-summary strong{ font-weight:500; color:#d7dcef; text-align:right; }
.nb-summary b{ color:#fff; }
.nb-summary small{ color:#8c96b8; }
.craft-btn.nb-go{ margin-top:0; height:46px; font-size:15px; }
.nb-center{ text-align:center; }
.nb-stock{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.nb-stock > div{ display:flex; flex-direction:column; padding:10px 16px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); min-width:120px; }
.nb-stock span{ font-size:12px; color:#8c96b8; }
.nb-stock b{ font-size:22px; font-family:Orbitron, sans-serif; }
.nb-grid-2{ grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); align-items:start; }
.nb-grid-2 .nb-panel{ margin-bottom:0; }

/* Den: same size cards in one grid */
#denRoot .nb-grid{ align-items:stretch; }
#denRoot .nb-card{ justify-content:space-between; }
.nb-den-empty{ gap:8px; }
.nb-den-icon{ width:64px; height:64px; object-fit:contain; opacity:.85; }
.nb-den-emoji{ font-size:34px; }
.quest-section-title small{ font-size:12px; font-weight:400; margin-left:6px; }

/* boss screen: pick Arrow or Poison Arrow for the next attack */
.boss-shot-label{ color:#a9b3d1; font-size:12px; letter-spacing:.5px; }
.boss-shot{
    display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; cursor:pointer; font-family:inherit; font-size:13px;
    color:#ffe1a0; background:rgba(255,190,60,.08); border:1px solid rgba(255,190,60,.35);
}
.boss-shot i{ font-style:normal; font-size:11px; color:#a9b3d1; }
.boss-shot small{ color:#a9b3d1; }
.boss-shot.on{ background:rgba(255,190,60,.25); border-color:#ffbe3c; box-shadow:0 0 12px rgba(255,190,60,.35); }
.boss-shot.off{ opacity:.45; cursor:default; }

/* Duels */
.nb-duel-hero{
    display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:16px; margin-bottom:14px;
    background:linear-gradient(135deg, rgba(255,77,109,.14), rgba(139,63,255,.18) 55%, rgba(14,10,26,.9));
    border:1px solid rgba(255,77,109,.35);
}
.nb-duel-steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.nb-duel-steps > div{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:rgba(0,0,0,.25); font-size:13px; }
.nb-duel-steps b{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #ff4d6d, #8b3fff); font-family:Orbitron, sans-serif; }
.nb-duel-steps span b{ width:auto; height:auto; background:none; display:inline; font-family:inherit; color:#ffd76a; }
.nb-duel-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.nb-duel-stats > div{ display:flex; flex-direction:column; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.nb-duel-stats span{ font-size:11px; color:#8c96b8; }
.nb-duel-stats b{ font-size:18px; font-family:Orbitron, sans-serif; }
.nb-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.nb-rar-common{ background:rgba(180,190,210,.15); border-color:rgba(180,190,210,.4); color:#dde3f0; }
.nb-rar-uncommon{ background:rgba(53,255,150,.12); border-color:rgba(53,255,150,.45); color:#9dffcc; }
.nb-rar-rare{ background:rgba(70,150,255,.15); border-color:rgba(70,150,255,.55); color:#a9ccff; }
.nb-rar-epic{ background:rgba(170,90,255,.18); border-color:rgba(170,90,255,.6); color:#d6b8ff; }
.nb-rar-legendary{ background:rgba(255,190,60,.15); border-color:rgba(255,190,60,.6); color:#ffe0a0; }
.nb-rar-mythic, .nb-rar-ultimate{ background:rgba(255,70,110,.15); border-color:rgba(255,70,110,.6); color:#ffb0c2; }
.nb-vs{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.nb-vs-side{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px; border-radius:10px; background:rgba(0,0,0,.25); min-width:0; }
.nb-vs-side b{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nb-vs-side small{ color:#8c96b8; font-size:11px; }
.nb-vs-empty{ border:1px dashed rgba(255,255,255,.2); }
.nb-vs-mid{ font-family:Orbitron, sans-serif; font-weight:900; font-size:18px; color:#ff4d6d; text-shadow:0 0 10px rgba(255,77,109,.6); }

@media (max-width:600px){
    .nb-duel-steps, .nb-duel-stats{ grid-template-columns:1fr; }
    .nb-grid-2{ grid-template-columns:1fr; }
    .nb-tgt{ min-width:0; flex:1 1 40%; }
}

/* ---------- Oct 2026 (20 Oct, v3): centred swap layout, workshop tabs, duels v2 ---------- */
.nb-wrap{ max-width:880px; margin:0 auto; }
#refineRoot .nb-tabs, #refineRoot .nb-wrap{ max-width:560px; margin-left:auto; margin-right:auto; }
.nb-center-row{ justify-content:center; }
.nb-swap{
    display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:18px;
    background:linear-gradient(160deg, rgba(50,20,90,.45), rgba(14,10,26,.92) 65%);
    border:1px solid rgba(139,63,255,.4); box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.nb-swap.nb-tier-uncommon{ border-color:rgba(53,255,150,.45); }
.nb-swap.nb-tier-rare{ border-color:rgba(70,150,255,.6); }
.nb-swap.nb-tier-epic{ border-color:rgba(170,90,255,.65); }
.nb-swap.nb-tier-legendary{ border-color:rgba(255,190,60,.7); }
.nb-swap.nb-tier-mythic{ border-color:rgba(255,70,110,.7); }
.nb-swap-box{ display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:14px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.08); }
.nb-swap-head{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:#8c96b8; letter-spacing:.3px; }
.nb-swap-head span:last-child{ color:#d8ccff; font-weight:700; }
.nb-swap-mats{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.nb-swap-mat{
    display:flex; flex-direction:column; align-items:center; gap:4px; min-width:112px; padding:12px 10px; border-radius:14px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:#d7dcef; font-family:inherit; font-size:13px;
}
.nb-swap-mat b{ font-size:18px; color:#fff; font-family:Orbitron, sans-serif; }
.nb-swap-mat small{ color:#8c96b8; font-size:11px; }
.nb-swap-mat .nb-mat-big, .nb-swap-mat .nb-mat-big img{ width:44px; height:44px; }
.nb-swap-pick{ cursor:pointer; }
.nb-swap-pick.on{ border-color:#8b3fff; background:rgba(139,63,255,.22); box-shadow:0 0 14px rgba(139,63,255,.35); }
.nb-big-emoji{ font-size:34px; line-height:44px; }
.nb-swap-arrow{
    align-self:center; width:40px; height:40px; margin:-18px 0; z-index:1; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:#fff;
    background:linear-gradient(135deg, #6B3BFF, #00c6ff); border:3px solid #0e0a1a;
}
.nb-swap-qty{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.nb-swap-qty > span{ font-size:13px; color:#a9b3d1; }
.nb-subtabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.nb-subtabs button{
    display:flex; justify-content:center; align-items:center; gap:8px; height:46px; border-radius:12px; cursor:pointer; font-family:inherit; font-size:14px;
    color:#d7dcef; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
}
.nb-subtabs button b{ padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.35); font-size:12px; }
.nb-subtabs button.on{ color:#fff; border-color:#8b3fff; background:linear-gradient(100deg, rgba(107,59,255,.45), rgba(0,198,255,.25)); }

/* Den: centred, even cards */
#denRoot{ max-width:880px; margin:0 auto; }
#denRoot .nb-grid{ grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
#denRoot .nb-den-empty, #denRoot .nb-den-card, #denRoot .nb-den-pick{ min-height:210px; }
.nb-den-icon{ width:96px; height:96px; }

/* Duels v2 */
.nb-rules{ display:flex; flex-wrap:wrap; gap:6px; }
.nb-rules span{ font-size:12px; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1); color:#d7dcef; }
.nb-filter{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:10px 0; }
.nb-pick-top{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px; border-radius:14px; margin-bottom:4px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); text-align:center; }
.nb-pick-meter{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.nb-pick-meter > div{ display:flex; flex-direction:column; min-width:110px; padding:8px 12px; border-radius:12px; background:rgba(0,0,0,.28); }
.nb-pick-meter span{ font-size:11px; color:#8c96b8; }
.nb-pick-meter b{ font-size:18px; font-family:Orbitron, sans-serif; }
.nb-shield{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; padding:10px 14px; border-radius:12px; cursor:pointer; font-size:13px; background:rgba(70,150,255,.08); border:1px solid rgba(70,150,255,.4); }
.nb-shield input{ accent-color:#46a0ff; }
.nb-shield.on{ background:rgba(70,150,255,.2); border-color:#46a0ff; box-shadow:0 0 12px rgba(70,150,255,.3); }
.nb-shield small{ color:#8c96b8; }
.nb-pick-ph{ font-size:40px; line-height:72px; }
.nb-pick.nb-rb-uncommon, .nb-thumb.nb-rb-uncommon{ border-color:rgba(53,255,150,.45); }
.nb-pick.nb-rb-rare, .nb-thumb.nb-rb-rare{ border-color:rgba(70,150,255,.6); }
.nb-pick.nb-rb-epic, .nb-thumb.nb-rb-epic{ border-color:rgba(170,90,255,.65); }
.nb-pick.nb-rb-legendary, .nb-thumb.nb-rb-legendary{ border-color:rgba(255,190,60,.7); }
.nb-pick.nb-rb-mythic, .nb-thumb.nb-rb-mythic{ border-color:rgba(255,70,110,.7); }
.nb-thumb{ border:2px solid rgba(255,255,255,.12); }
.nb-pick.on{ border-color:#8b3fff !important; }
.nb-duel-card .nb-btns .craft-btn{ flex:1 1 100%; }

@media (max-width:600px){
    .nb-swap{ padding:12px; }
    .nb-swap-mat{ min-width:0; flex:1 1 40%; }
    .nb-swap-qty{ justify-content:center; }
    .nb-qty input{ width:70px; }
    .nb-subtabs button{ font-size:13px; }
    #denRoot .nb-grid{ grid-template-columns:1fr; }
    #denRoot .nb-den-empty{ min-height:150px; }
    .nb-steps{ justify-content:center; }
}
/* v3b: centred Beast picks, compact duel stats on phones */
.nb-picks{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.nb-pick{ width:112px; }
@media (max-width:600px){
    .nb-duel-stats{ grid-template-columns:repeat(3, 1fr); }
    .nb-duel-stats > div{ padding:6px 8px; }
    .nb-duel-stats b{ font-size:15px; }
    .nb-pick{ width:96px; }
}

/* ---------- v4: whole pictures inside their boxes, bigger Den bed, no number arrows ---------- */
.nb-beast-img img, .nb-thumb img, .nb-pick img{ object-fit:contain; background:rgba(0,0,0,.25); }
.forge-list-item img, .forge-detail-img{ object-fit:contain !important; background:rgba(0,0,0,.25); }
.nb-den-empty .nb-den-icon{ width:100%; max-width:170px; height:auto; aspect-ratio:1/1; object-fit:contain; }
#denRoot .nb-den-empty{ justify-content:center; }
.nb-den-locked{ border-style:solid; }
.nb-den-locked .nb-den-icon{ filter:grayscale(.7) brightness(.55); }
.nb-den-locked .craft-btn{ margin-top:6px; }
.nb-qty input::-webkit-outer-spin-button, .nb-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.nb-qty input{ -moz-appearance:textfield; appearance:textfield; width:110px; }
.nb-swap-rule{ text-align:center; font-size:15px; padding:10px; border-radius:12px; background:rgba(139,63,255,.12); border:1px solid rgba(139,63,255,.35); }
.nb-swap-rule b{ color:#fff; }
.nb-item-img{ width:56px; height:56px; object-fit:contain; }
.boss-shot-img{ width:24px; height:24px; object-fit:contain; margin-right:2px; }

/* ---------- Oct 2026 (20 Oct): PvP Duels v3 — fight sets ---------- */
.dl-levels{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.dl-level{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px; border-radius:14px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1); text-align:center; }
.dl-level-name{ font-family:Orbitron, sans-serif; font-size:13px; letter-spacing:.5px; }
.dl-level b{ font-size:22px; font-family:Orbitron, sans-serif; }
.dl-level b small{ font-size:11px; font-family:inherit; color:#a9b3d1; }
.dl-level-win{ font-size:12px; color:#8dffc6; }
.dl-easy{ border-color:rgba(53,255,150,.45); }
.dl-medium{ border-color:rgba(255,170,60,.55); }
.dl-hard{ border-color:rgba(255,77,109,.6); }
.dl-sets{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; margin-bottom:16px; }
.dl-set{
    display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:16px; min-width:0;
    background:linear-gradient(160deg, rgba(50,20,90,.4), rgba(14,10,26,.92) 65%); border:1px solid rgba(139,63,255,.35);
}
.dl-set-empty{ align-items:center; justify-content:space-between; border-style:dashed; min-height:250px; }
.dl-set-plus{ font-size:46px; color:rgba(255,255,255,.25); }
.dl-set-head{ display:flex; justify-content:space-between; align-items:center; gap:6px; width:100%; }
.dl-set-head strong{ font-family:Orbitron, sans-serif; font-size:14px; }
.dl-set-beast{ display:flex; gap:12px; align-items:center; }
.dl-set-img{ width:84px; height:84px; flex:0 0 84px; border-radius:12px; overflow:hidden; background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; font-size:30px; }
.dl-set-img img{ width:100%; height:100%; object-fit:contain; }
.dl-set-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dl-set-info span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; }
.dl-set-info small{ color:#8c96b8; font-size:12px; }
.dl-set-info b{ font-family:Orbitron, sans-serif; font-size:20px; color:#ffd76a; }
.dl-gears{ display:grid; grid-template-columns:repeat(6, 1fr); gap:5px; }
.dl-gear{ aspect-ratio:1/1; border-radius:8px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:11px; color:#6f7c9c; }
.dl-gear img{ width:100%; height:100%; object-fit:contain; }
.dl-set-btns{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.dl-set-btns .craft-btn{ margin-top:0; height:38px; font-size:13px; padding:0 6px; }
.dl-set-btns .craft-btn:last-child{ grid-column:1 / -1; }
.dl-set.nb-rb-rare{ border-color:rgba(70,150,255,.55); }
.dl-set.nb-rb-epic{ border-color:rgba(170,90,255,.6); }
.dl-set.nb-rb-legendary{ border-color:rgba(255,190,60,.65); }
.dl-set.nb-rb-mythic, .dl-set.nb-rb-ultimate{ border-color:rgba(255,70,110,.65); }
.dl-hist-right{ display:flex; align-items:center; gap:10px; }
.dl-edit{ display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:12px; align-items:center; margin:12px 0; }
.dl-edit-col{ display:flex; flex-direction:column; gap:10px; }
.dl-edit-mid .al-slot{ width:100%; min-height:240px; }
.dl-edit .al-slot img{ object-fit:contain; }
.dl-fight-levels{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:8px; }
.dl-fight-level{
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 8px; border-radius:14px; cursor:pointer; font-family:inherit; color:#fff;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
}
.dl-fight-level span{ font-family:Orbitron, sans-serif; font-size:13px; }
.dl-fight-level b{ font-size:15px; }
.dl-fight-level small{ color:#8dffc6; }
.dl-fight-level i{ font-style:normal; font-size:12px; color:#d8ccff; }
.dl-fight-level:hover:not(:disabled){ background:rgba(139,63,255,.2); }
.dl-fight-level:disabled{ opacity:.45; cursor:default; }
@media (max-width:600px){
    .dl-levels{ grid-template-columns:repeat(3, 1fr); }
    .dl-level b{ font-size:17px; }
    .dl-sets{ grid-template-columns:1fr; }
    .dl-edit{ grid-template-columns:1fr 1fr; }
    .dl-edit-mid{ grid-column:1 / -1; order:-1; }
    .dl-edit-mid .al-slot{ min-height:180px; }
    .dl-fight-levels{ grid-template-columns:1fr; }
}
.dl-edit-beast img{ width:150px !important; height:150px !important; }
@media (max-width:600px){ .dl-edit-beast img{ width:120px !important; height:120px !important; } }
.dl-set-empty{ min-height:180px; }
@media (max-width:600px){ .dl-set-empty{ min-height:130px; } .dl-set-plus{ font-size:34px; } }

/* ---------- 20 Oct (later): page backgrounds like Forge / Blend / Quests ---------- */
#refinePage, #denPage, #duelsPage{
    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;
}
#refinePage.hidden, #denPage.hidden, #duelsPage.hidden{ display:none; }
@media (max-width:600px){ #refinePage, #denPage, #duelsPage{ padding:14px; border-radius:18px; } }

/* Den slot price */
.nb-den-cost{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.nb-den-cost > span{ display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; font-size:12px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); }
.nb-den-cost .nb-mat, .nb-den-cost .nb-mat img, .nb-neon-ic{ width:18px; height:18px; }
.nb-den-cost .nb-short{ border-color:rgba(255,77,109,.6); color:#ff9db0; }

/* Duels: locked set, VS intro + countdown */
.dl-set-locked{ opacity:.85; }
.dl-intro-popup{ max-width:760px !important; width:calc(100vw - 24px) !important; }
.dl-intro{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:start; }
.dl-intro-side{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; min-width:0; }
.dl-intro-side > strong{ font-family:Orbitron, sans-serif; font-size:14px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-intro-side > span{ font-size:12px; color:#a9b3d1; }
.dl-intro-beast{ width:120px; height:120px; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:40px; background:rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.15); }
.dl-intro-beast img{ width:100%; height:100%; object-fit:contain; }
.dl-intro-power{ font-family:Orbitron, sans-serif; font-size:24px; color:#ffd76a; text-shadow:0 0 12px rgba(255,215,106,.4); }
.dl-intro-gears{ display:grid; grid-template-columns:1fr 1fr; gap:5px; width:100%; }
.dl-intro-gear{ display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:8px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); min-width:0; }
.dl-intro-gear img, .dl-intro-gear > span{ width:26px; height:26px; flex:0 0 26px; object-fit:contain; font-size:11px; color:#6f7c9c; display:flex; align-items:center; justify-content:center; }
.dl-intro-gear small{ font-size:10px; color:#d7dcef; text-align:left; line-height:1.2; }
.dl-intro-mid{ display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:40px; }
.dl-intro-mid > span{ font-family:Orbitron, sans-serif; font-weight:900; font-size:22px; color:#ff4d6d; text-shadow:0 0 12px rgba(255,77,109,.6); }
.dl-intro-mid > b{ font-family:Orbitron, sans-serif; font-size:56px; line-height:1; color:#fff; text-shadow:0 0 22px rgba(139,63,255,.9); }
.dl-intro-mid > b.tick{ animation:dlTick 1s ease-out; }
.dl-intro-mid > small{ font-size:11px; color:#a9b3d1; white-space:nowrap; }
@keyframes dlTick{ 0%{ transform:scale(1.8); opacity:0; } 25%{ transform:scale(1); opacity:1; } 100%{ transform:scale(.9); opacity:.85; } }
.dl-intro-gear.nb-rb-rare{ border-color:rgba(70,150,255,.55); } .dl-intro-gear.nb-rb-epic{ border-color:rgba(170,90,255,.6); }
.dl-intro-gear.nb-rb-legendary{ border-color:rgba(255,190,60,.65); } .dl-intro-gear.nb-rb-mythic, .dl-intro-gear.nb-rb-ultimate{ border-color:rgba(255,70,110,.65); }
@media (max-width:600px){
    .dl-intro{ grid-template-columns:1fr 1fr; }
    .dl-intro-mid{ grid-column:1 / -1; order:-1; padding-top:0; flex-direction:row; gap:12px; }
    .dl-intro-mid > b{ font-size:40px; }
    .dl-intro-beast{ width:90px; height:90px; }
    .dl-intro-gears{ grid-template-columns:1fr; }
    .dl-intro-power{ font-size:18px; }
}

/* ---------- 20 Oct (later): Workshop with 5 items, duel stats 4 tiles ---------- */
.nb-subtabs-5{ display:flex; flex-wrap:wrap; gap:6px; }
.nb-subtabs-5 button{ flex:1 1 30%; min-width:140px; height:42px; font-size:13px; }
.nb-use-card{ gap:8px; }
.nb-use-card .craft-btn{ margin-top:0; width:100%; height:36px; }
#duelsRoot .nb-duel-stats{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:600px){
    #duelsRoot .nb-duel-stats{ grid-template-columns:1fr 1fr; }
    .nb-subtabs-5 button{ min-width:0; flex:1 1 45%; font-size:12px; }
}

/* Workshop: Beast Treat / Repair Kit list — full width, 4 x 3 a page */
.nb-use-wide{ width:100%; margin-top:18px; }
.nb-fbtn{ font-size:12px; padding:6px 12px; border-radius:999px; cursor:pointer; color:#c9d0ea; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); }
.nb-fbtn b{ margin-left:4px; font-size:11px; color:#8c96b8; }
.nb-fbtn.on{ color:#fff; border-color:#8b3fff; background:linear-gradient(100deg, rgba(107,59,255,.45), rgba(0,198,255,.25)); }
.nb-fbtn.on b{ color:#fff; }
.nb-use-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin:8px 0 12px; }
.nb-use-grid > .nb-sub{ grid-column:1 / -1; text-align:center; }
.nb-use-grid .nb-use-card{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:12px; margin:0; }
.nb-use-img{ width:100%; aspect-ratio:1; border-radius:12px; overflow:hidden; background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; font-size:40px; }
.nb-use-img img{ width:100%; height:100%; object-fit:contain; }
.nb-use-card strong{ font-size:13px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.nb-use-card small{ font-size:11px; color:#8c96b8; }
.nb-use-dur{ position:relative; width:100%; height:16px; border-radius:999px; background:rgba(0,0,0,.4); overflow:hidden; }
.nb-use-dur i{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#20d38a,#7dffb0); }
.nb-use-dur span{ position:relative; font-size:11px; font-weight:700; line-height:16px; text-shadow:0 1px 2px #000; }
.nb-use-card .craft-btn{ width:100%; }
.nb-pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin:6px 0 4px; font-size:13px; color:#c9d0ea; }
@media (max-width:900px){ .nb-use-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:640px){ .nb-use-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.dl-level-dur{ margin-top:4px; font-size:11px; padding:3px 8px; border-radius:999px; color:#ffb3c1; background:rgba(255,77,109,.12); border:1px solid rgba(255,77,109,.35); }
.boss-shot{ transition:background .15s, border-color .15s, box-shadow .15s; }
.boss-shot.on::before{ content:"✓"; font-weight:700; color:#ffbe3c; }
.nb-tab-img{ width:22px; height:22px; object-fit:contain; vertical-align:middle; margin-right:2px; }
.nb-pager .craft-btn{ width:auto; min-width:96px; flex:0 0 auto; padding:8px 16px; }
.nb-pager span{ white-space:nowrap; }

/* Marketplace: Materials | Crafted Items (two full-width buttons) */
.mk-kind{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 12px; }
.mk-kind button{ display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 10px; border-radius:14px; cursor:pointer; font-family:Orbitron, sans-serif; font-size:14px; letter-spacing:.5px; color:#c9d0ea; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); transition:background .15s, border-color .15s; }
.mk-kind button img{ width:28px; height:28px; object-fit:contain; }
.mk-kind button.on{ color:#fff; border-color:#8b3fff; background:linear-gradient(100deg, rgba(107,59,255,.5), rgba(0,198,255,.25)); box-shadow:0 0 14px rgba(139,63,255,.35); }
.mk-ws-filter{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 10px; }
.mk-ws-filter button{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; cursor:pointer; font-size:13px; color:#c9d0ea; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); }
.mk-ws-filter button img{ width:22px; height:22px; object-fit:contain; }
.mk-ws-filter button.on{ color:#fff; border-color:#8b3fff; background:linear-gradient(100deg, rgba(107,59,255,.45), rgba(0,198,255,.25)); }
@media (max-width:480px){ .mk-kind button{ font-size:12px; padding:12px 6px; } .mk-kind button img{ width:22px; height:22px; } }

/* durability colours (same as the rest of the game): green > 50%, yellow 26-50%, orange <= 25%, red 0% */
.nb-bar.dur-warn .nb-bar-fill, .nb-use-dur.dur-warn i{ background:linear-gradient(90deg,#e0a91a,#ffd76a); }
.nb-bar.dur-low .nb-bar-fill, .nb-use-dur.dur-low i{ background:linear-gradient(90deg,#e0521a,#ff9a5c); }
.nb-bar.dur-zero .nb-bar-fill, .nb-use-dur.dur-zero i{ background:#ff4d4d; }

/* Beast Den: a free slot opens the pick popup */
button.nb-den-free{ cursor:pointer; font:inherit; color:inherit; width:100%; transition:border-color .15s, box-shadow .15s; }
button.nb-den-free:hover{ border-color:#8b3fff; box-shadow:0 0 14px rgba(139,63,255,.35); }
.nb-den-add{ margin-top:6px; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; color:#fff; background:linear-gradient(100deg, rgba(107,59,255,.55), rgba(0,198,255,.3)); }
#gamePopupBox.nb-den-popbox{ width:min(760px, calc(100vw - 32px)); max-width:760px; }
.nb-den-popup .nb-filter{ margin:6px 0; }
.nb-den-pgrid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:10px 0; }
.nb-den-pgrid > .nb-sub{ grid-column:1 / -1; text-align:center; }
.nb-den-pcard{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px; border-radius:14px; cursor:pointer; font:inherit; color:inherit; text-align:center; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); transition:border-color .15s, transform .15s; }
.nb-den-pcard:hover{ border-color:#8b3fff; transform:translateY(-2px); }
.nb-den-pimg{ width:100%; aspect-ratio:1; border-radius:10px; overflow:hidden; background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; font-size:34px; }
.nb-den-pimg img{ width:100%; height:100%; object-fit:contain; }
.nb-den-pcard strong{ font-size:12px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nb-den-pcard small{ font-size:10px; color:#8c96b8; }
.nb-den-pgo{ width:100%; font-size:12px; font-weight:700; padding:6px; border-radius:10px; color:#fff; background:linear-gradient(100deg, #6b3bff, #00c6ff); }
@media (max-width:640px){ .nb-den-pgrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
#denRoot .nb-den-free .nb-den-add{ font-size:12px; line-height:1.2; font-family:inherit; width:auto; height:auto; }

/* Duels: every set card the same size (like the Arena boxes) */
.dl-sets{ grid-auto-rows:1fr; }
.dl-set{ height:100%; min-height:372px; }
.dl-set-empty{ justify-content:flex-start; min-height:372px; }
.dl-set-empty .dl-set-plus{ flex:1; display:flex; align-items:center; justify-content:center; }
.dl-set-note{ min-height:34px; display:block; width:100%; text-align:center; font-size:12px; line-height:1.35; color:#8c96b8; }
.dl-set-note.nb-why{ color:#ffd76a; }
.dl-set-btns{ margin-top:auto; }
.dl-set-one{ width:100%; height:38px; margin-top:auto; }
@media (max-width:640px){ .dl-set, .dl-set-empty{ min-height:0; } .dl-sets{ grid-auto-rows:auto; } }

/* Duels: the result screen */
#gamePopupBox.dl-res-popup{ width:min(520px, calc(100vw - 24px)); }
.dl-res{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.dl-res-banner{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.dl-res-icon{ font-size:52px; line-height:1; animation:dlResPop .5s ease-out; }
.dl-res-banner h2{ margin:0; font-family:Orbitron, sans-serif; font-size:34px; letter-spacing:4px; }
.dl-res-win .dl-res-banner h2{ color:#ffd76a; text-shadow:0 0 18px rgba(255,215,106,.6); }
.dl-res-lose .dl-res-banner h2{ color:#ff6b81; text-shadow:0 0 18px rgba(255,77,109,.5); }
.dl-res-banner small{ color:#a9b3d1; font-size:12px; }
.dl-res-money{ display:flex; align-items:baseline; gap:8px; padding:8px 22px; border-radius:999px; }
.dl-res-money span{ font-family:Orbitron, sans-serif; font-size:30px; font-weight:800; }
.dl-res-money small{ font-size:13px; color:#c9d0ea; }
.dl-res-money.plus{ background:rgba(53,255,150,.12); border:1px solid rgba(53,255,150,.45); }
.dl-res-money.plus span{ color:#5dffb0; }
.dl-res-money.minus{ background:rgba(255,77,109,.12); border:1px solid rgba(255,77,109,.45); }
.dl-res-money.minus span{ color:#ff8197; }
.dl-res-vs{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; width:100%; }
.dl-res-vs-mid{ font-family:Orbitron, sans-serif; font-weight:800; color:#8c96b8; }
.dl-res-side{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; border-radius:14px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); min-width:0; }
.dl-res-side.win{ border-color:#ffd76a; box-shadow:0 0 18px rgba(255,215,106,.25); }
.dl-res-side.lose{ opacity:.75; filter:grayscale(.5); }
.dl-res-crown{ position:absolute; top:-14px; font-size:24px; }
.dl-res-img{ width:90px; height:90px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.dl-res-img img{ width:100%; height:100%; object-fit:contain; }
.dl-res-side strong{ font-size:13px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-res-pow{ font-family:Orbitron, sans-serif; font-size:14px; color:#ffd76a; }
.dl-res-tag{ font-size:10px; letter-spacing:1.5px; font-weight:800; padding:2px 8px; border-radius:999px; }
.dl-res-side.win .dl-res-tag{ color:#1a1300; background:#ffd76a; }
.dl-res-side.lose .dl-res-tag{ color:#ffb3c1; background:rgba(255,77,109,.2); }
.dl-res-table{ width:100%; display:flex; flex-direction:column; gap:4px; }
.dl-res-row{ display:grid; grid-template-columns:1fr 1.4fr 1fr; align-items:center; padding:7px 12px; border-radius:10px; background:rgba(255,255,255,.04); }
.dl-res-row b{ font-family:Orbitron, sans-serif; font-size:14px; }
.dl-res-row b:first-child{ text-align:left; color:#7dd3ff; }
.dl-res-row b:last-child{ text-align:right; color:#ff9db0; }
.dl-res-row span{ text-align:center; font-size:12px; color:#a9b3d1; }
.dl-res-foot{ margin:0; font-size:11px; color:#8c96b8; }
@keyframes dlResPop{ 0%{ transform:scale(.3); opacity:0; } 70%{ transform:scale(1.15); } 100%{ transform:scale(1); opacity:1; } }
.mail-note-body a{ color:#7dd3ff; font-weight:700; white-space:nowrap; }

/* Duels intro v2: card-game style, your card top-left, theirs bottom-right, then they clash */
.dl-intro2{ position:relative; display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto; gap:8px 14px; padding:6px 4px 10px; overflow:hidden; }
.dl-intro2 .dl-card-a{ grid-column:1; grid-row:1; justify-self:start; transform:rotate(-4deg); }
.dl-intro2 .dl-card-b{ grid-column:3; grid-row:2; justify-self:end; transform:rotate(4deg); }
.dl-intro2-mid{ grid-column:2; grid-row:1 / span 2; align-self:center; display:flex; flex-direction:column; align-items:center; gap:4px; z-index:2; }
.dl-intro2-mid > span{ font-family:Orbitron, sans-serif; font-weight:900; font-size:24px; color:#ff4d6d; text-shadow:0 0 12px rgba(255,77,109,.6); }
.dl-intro2-mid > b{ font-family:Orbitron, sans-serif; font-size:58px; line-height:1; color:#fff; text-shadow:0 0 22px rgba(139,63,255,.9); white-space:nowrap; }
.dl-intro2-mid > b.tick{ animation:dlTick 1s ease-out; }
.dl-intro2-mid > small{ font-size:11px; color:#a9b3d1; white-space:nowrap; }
.dl-card{ width:210px; display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:16px; background:linear-gradient(160deg, rgba(60,25,110,.85), rgba(12,8,24,.95) 70%); border:2px solid rgba(139,63,255,.55); box-shadow:0 10px 30px rgba(0,0,0,.5); transition:transform .45s cubic-bezier(.5,-0.3,.7,1.4); }
.dl-card-a{ animation:dlCardInA .5s ease-out; }
.dl-card-b{ animation:dlCardInB .5s ease-out; }
.dl-card-top{ display:flex; justify-content:space-between; align-items:center; gap:6px; }
.dl-card-top strong{ font-family:Orbitron, sans-serif; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-card-top span{ font-size:10px; color:#a9b3d1; text-transform:uppercase; letter-spacing:1px; }
.dl-card-art{ aspect-ratio:1; border-radius:12px; overflow:hidden; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; font-size:40px; }
.dl-card-art img{ width:100%; height:100%; object-fit:contain; }
.dl-card-power{ text-align:center; font-family:Orbitron, sans-serif; font-size:20px; color:#ffd76a; text-shadow:0 0 10px rgba(255,215,106,.4); }
.dl-card-gears{ display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; }
.dl-card-gear{ aspect-ratio:1; border-radius:6px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:10px; color:#6f7c9c; }
.dl-card-gear img{ width:100%; height:100%; object-fit:contain; }
.dl-card.nb-rb-rare{ border-color:rgba(70,150,255,.7); } .dl-card.nb-rb-epic{ border-color:rgba(170,90,255,.8); }
.dl-card.nb-rb-legendary{ border-color:rgba(255,190,60,.8); } .dl-card.nb-rb-mythic, .dl-card.nb-rb-ultimate{ border-color:rgba(255,70,110,.8); }
.dl-clash-flash{ position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(255,190,60,.5) 25%, transparent 60%); }
.dl-intro2.clash .dl-card-a{ transform:translate(38%, 32%) rotate(8deg) scale(1.03); }
.dl-intro2.clash .dl-card-b{ transform:translate(-38%, -32%) rotate(-8deg) scale(1.03); }
.dl-intro2.clash .dl-clash-flash{ animation:dlFlash .7s .4s ease-out; }
.dl-intro2.clash{ animation:dlShake .45s .4s; }
.dl-intro2.clash .dl-intro2-mid > b{ font-size:40px; color:#ffd76a; text-shadow:0 0 22px rgba(255,190,60,.9); }
@keyframes dlCardInA{ from{ transform:translate(-60px, -40px) rotate(-14deg); opacity:0; } to{ transform:rotate(-4deg); opacity:1; } }
@keyframes dlCardInB{ from{ transform:translate(60px, 40px) rotate(14deg); opacity:0; } to{ transform:rotate(4deg); opacity:1; } }
@keyframes dlFlash{ 0%{ opacity:0; } 25%{ opacity:1; } 100%{ opacity:0; } }
@keyframes dlShake{ 0%,100%{ transform:translate(0,0); } 20%{ transform:translate(-8px,4px); } 40%{ transform:translate(7px,-5px); } 60%{ transform:translate(-5px,3px); } 80%{ transform:translate(4px,-2px); } }
@media (max-width:600px){
    .dl-card{ width:150px; padding:8px; }
    .dl-card-power{ font-size:16px; }
    .dl-intro2{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; }
    .dl-intro2 .dl-card-a{ grid-column:1; grid-row:1; }
    .dl-intro2-mid{ grid-column:1 / -1; grid-row:2; flex-direction:row; justify-content:center; gap:10px; }
    .dl-intro2-mid > b{ font-size:40px; }
    .dl-intro2 .dl-card-b{ grid-column:2; grid-row:3; }
    .dl-intro2.clash .dl-card-a{ transform:translate(30%, 40%) rotate(8deg); }
    .dl-intro2.clash .dl-card-b{ transform:translate(-30%, -40%) rotate(-8deg); }
}
.dl-res-dur{ font-size:13px; padding:6px 14px; border-radius:999px; color:#ffd0d8; background:rgba(255,77,109,.12); border:1px solid rgba(255,77,109,.4); } .dl-res-dur b{ color:#ff8197; font-family:Orbitron, sans-serif; } .dl-res-dur small{ color:#a9b3d1; }

/* Duels: players ready per level (top tiles) */
.dl-level-ready{ margin-top:4px; font-size:11px; padding:3px 8px; border-radius:999px; color:#a9b3d1; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); }
.dl-level-ready.on{ color:#8dffc6; background:rgba(53,255,150,.1); border-color:rgba(53,255,150,.45); }

/* Duels: the level picker (Fight) as cards */
#gamePopupBox.dl-pick-popup{ width:min(640px, calc(100vw - 24px)); }
.dl-pick-head{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:10px; }
.dl-pick-head span{ font-size:12px; padding:5px 12px; border-radius:999px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); color:#c9d0ea; }
.dl-pick-head b{ color:#fff; }
.dl-pick-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.dl-pick-card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border-radius:16px; cursor:pointer; font:inherit; color:inherit; text-align:center;
    background:linear-gradient(160deg, rgba(50,20,90,.55), rgba(14,10,26,.95) 70%); border:2px solid rgba(139,63,255,.4); transition:transform .15s, box-shadow .15s; }
.dl-pick-card.dl-easy{ border-color:rgba(53,255,150,.55); } .dl-pick-card.dl-medium{ border-color:rgba(255,170,60,.6); } .dl-pick-card.dl-hard{ border-color:rgba(255,77,109,.65); }
.dl-pick-card:hover:not(:disabled){ transform:translateY(-3px); box-shadow:0 8px 24px rgba(139,63,255,.35); }
.dl-pick-card.off{ opacity:.5; cursor:default; filter:grayscale(.4); }
.dl-pick-name{ font-family:Orbitron, sans-serif; font-size:14px; letter-spacing:.5px; }
.dl-pick-fee{ font-size:11px; color:#a9b3d1; } .dl-pick-fee b{ display:block; font-family:Orbitron, sans-serif; font-size:24px; color:#fff; }
.dl-pick-win{ font-size:12px; color:#8dffc6; } .dl-pick-win b{ font-family:Orbitron, sans-serif; font-size:15px; }
.dl-pick-ready{ font-size:11px; color:#a9b3d1; } .dl-pick-ready.on{ color:#8dffc6; font-weight:700; }
.dl-pick-go{ width:100%; margin-top:2px; padding:8px; border-radius:10px; font-weight:800; font-size:13px; color:#fff; background:linear-gradient(100deg, #6b3bff, #00c6ff); }
.dl-pick-card.off .dl-pick-go{ background:rgba(255,255,255,.1); color:#a9b3d1; }
.dl-pick-note{ margin:10px 0 0; font-size:11px; color:#8c96b8; text-align:center; }
@media (max-width:560px){ .dl-pick-grid{ grid-template-columns:1fr; } .dl-pick-card{ display:grid; grid-template-columns:1fr 1fr; text-align:left; } .dl-pick-go{ grid-column:1 / -1; text-align:center; } }

/* Duels: rules as small tiles + live "ready" numbers */
.dl-rules{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:12px 0; }
.dl-rules > div{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); }
.dl-rules i{ grid-row:1 / span 2; font-style:normal; font-size:22px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(139,63,255,.18); }
.dl-rules b{ font-size:13px; color:#fff; }
.dl-rules small{ font-size:11px; color:#a9b3d1; line-height:1.3; }
@media (max-width:760px){ .dl-rules{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .dl-rules{ grid-template-columns:1fr; } }
.dl-level-ready b{ font-family:Orbitron, sans-serif; color:#fff; }
.dl-level-ready.pop{ animation:dlReadyPop .7s ease-out; }
.dl-level-soon{ font-size:10px; color:#a9b3d1; min-height:13px; }
@keyframes dlReadyPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.15); box-shadow:0 0 14px rgba(53,255,150,.6); } 100%{ transform:scale(1); } }
.dl-level-ready b{ font-size:12px; }
.prof-wallet{ display:block; font-size:11px; color:#8c96b8; }
.prof-name-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.prof-name-row h3{ margin:0; }
.prof-name-btn{ width:auto !important; min-width:0; margin:0 !important; padding:4px 10px !important; height:auto !important; font-size:11px !important; border-radius:999px !important; line-height:1.4; }

/* Duels: the fight confirm card */
.dl-confirm{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.dl-confirm-set{ font-size:12px; color:#a9b3d1; padding:5px 12px; border-radius:999px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); }
.dl-confirm-set b{ color:#ffd76a; }
.dl-confirm-tiles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; width:100%; }
.dl-confirm-tiles > div{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; border-radius:14px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); }
.dl-confirm-tiles span{ font-size:11px; color:#a9b3d1; }
.dl-confirm-tiles b{ font-family:Orbitron, sans-serif; font-size:24px; }
.dl-confirm-tiles small{ font-size:10px; color:#8c96b8; }
.dl-confirm-tiles .pay b{ color:#fff; }
.dl-confirm-tiles .win{ border-color:rgba(53,255,150,.45); background:rgba(53,255,150,.08); } .dl-confirm-tiles .win b{ color:#5dffb0; }
.dl-confirm-tiles .lose{ border-color:rgba(255,77,109,.4); background:rgba(255,77,109,.07); } .dl-confirm-tiles .lose b{ color:#ff8197; }
@media (max-width:420px){ .dl-confirm-tiles b{ font-size:18px; } }
.blend-inuse-note{ display:block; margin-top:4px; font-size:11px; line-height:1.35; color:#ffd76a; }

/* ===== Level card loadout picture (20 Oct, player idea) ===== */
/* above .level-top (it spans the full card width), so the whole box takes the mouse */
.level-loadout{ position:absolute; z-index:3; left:24px; top:20px; width:184px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.ll-slot{ --rc:rgba(180,139,255,.45); position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:0; margin:0; cursor:pointer; font:inherit; color:#fff; background:none; border:0; }
/* NFT cards are tall: the box keeps the card shape and the whole card fits (nothing cut off) */
.ll-pic{ position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:12px; border:2px solid var(--rc);
  background:rgba(8,6,20,.7); box-shadow:0 0 14px color-mix(in srgb, var(--rc) 45%, transparent); transition:transform .15s ease, box-shadow .15s ease; }
.ll-slot:hover .ll-pic{ transform:translateY(-2px); box-shadow:0 0 22px color-mix(in srgb, var(--rc) 70%, transparent); }
.ll-pic img{ width:100%; height:100%; object-fit:contain; display:block; }
.ll-beast .ll-pic{ width:120px; height:160px; }
.ll-gears{ display:flex; gap:12px; }
.ll-gear .ll-pic{ width:62px; height:82px; border-radius:10px; }
.ll-slot small{ font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#e8e2ff; text-shadow:0 1px 3px #000; line-height:1.1; }
.ll-tag{ font-size:12px; font-weight:800; color:var(--rc); text-shadow:0 1px 4px #000; text-transform:capitalize; line-height:1.1; white-space:nowrap; }
.ll-free .ll-tag{ color:#d8ceff; }
.ll-dur{ width:100%; }
.ll-dur .dur-bar{ height:5px; margin:0; background:rgba(0,0,0,.6); border-radius:999px; overflow:hidden; }
.ll-empty{ font-size:34px; font-weight:300; color:rgba(220,210,255,.8); line-height:1; }
.ll-gear .ll-empty{ font-size:22px; }
.ll-empty.ll-txt{ font-size:12px; font-weight:800; text-transform:capitalize; text-align:center; padding:0 6px; }
.ll-free .ll-pic{ border-style:dashed; background:rgba(8,6,20,.45); box-shadow:none; }
.ll-locked{ opacity:.6; } .ll-locked .ll-pic{ border-color:rgba(160,160,180,.35); box-shadow:none; }
.ll-r-common{ --rc:#B0B8C4; } .ll-r-uncommon{ --rc:#c5fb62; } .ll-r-rare{ --rc:#00c8ff; } .ll-r-epic{ --rc:#a259ff; }
.ll-r-legendary{ --rc:#ffcc33; } .ll-r-mythic{ --rc:#ff7a1a; } .ll-r-ultimate{ --rc:#ff3b5c; }
/* Equipment page: the slot tapped on the level card lights up for 3 s */
#equipmentPage[data-ll-flash="1-0"] #gearLevelSlot1 .gear-sock:nth-child(1),
#equipmentPage[data-ll-flash="1-1"] #gearLevelSlot1 .gear-sock:nth-child(2),
#equipmentPage[data-ll-flash="2-0"] #gearLevelSlot2 .gear-sock:nth-child(1),
#equipmentPage[data-ll-flash="2-1"] #gearLevelSlot2 .gear-sock:nth-child(2),
#equipmentPage[data-ll-flash="3-0"] #gearLevelSlot3 .gear-sock:nth-child(1),
#equipmentPage[data-ll-flash="3-1"] #gearLevelSlot3 .gear-sock:nth-child(2),
#equipmentPage[data-ll-flash="4-0"] #gearLevelSlot4 .gear-sock:nth-child(1),
#equipmentPage[data-ll-flash="4-1"] #gearLevelSlot4 .gear-sock:nth-child(2),
#equipmentPage[data-ll-flash="5-0"] #gearLevelSlot5 .gear-sock:nth-child(1),
#equipmentPage[data-ll-flash="5-1"] #gearLevelSlot5 .gear-sock:nth-child(2),
#equipmentPage[data-ll-flash="6-0"] #gearLevelSlot6 .gear-sock:nth-child(1),
#equipmentPage[data-ll-flash="6-1"] #gearLevelSlot6 .gear-sock:nth-child(2),
#equipmentPage[data-ll-flash="7-0"] #gearLevelSlot7 .gear-sock:nth-child(1),
#equipmentPage[data-ll-flash="7-1"] #gearLevelSlot7 .gear-sock:nth-child(2)
{ box-shadow:0 0 0 3px #b48bff, 0 0 26px rgba(180,139,255,.85) !important; border-color:#b48bff !important; transition:box-shadow .3s ease; }
@media (max-width:1024px){
  .level-loadout{ width:124px; left:16px; gap:10px; }
  .ll-beast .ll-pic{ width:90px; height:120px; }
  .ll-gears{ gap:8px; } .ll-gear .ll-pic{ width:46px; height:62px; }
  .ll-slot small{ font-size:9px; } .ll-tag{ font-size:10px; }
}
@media (max-width:820px){
  .level-loadout{ position:relative; left:auto; top:auto; width:100%; max-width:100%; flex-direction:row; align-items:flex-start; justify-content:flex-start; gap:10px; }
  .ll-beast .ll-pic{ width:66px; height:88px; border-radius:10px; }
  .ll-tag{ font-size:10px; }
  .ll-gears{ gap:10px; }
  .ll-gear .ll-pic{ width:50px; height:67px; }
}

/* ===== Back button (phones, 20 Oct, player idea): its own row at the top of the page, right side ===== */
.nb-back-row{ display:none; }
@media (max-width:820px){
  .nb-back-row{ display:flex; justify-content:flex-end; margin:0 0 10px; }
  .nb-back-row.hidden{ display:none; }
  .nb-back-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px 8px 12px; border-radius:999px; cursor:pointer;
    font:inherit; font-size:14px; font-weight:800; color:#fff; letter-spacing:.3px;
    background:linear-gradient(135deg,#7c3aed,#a855f7); border:1px solid rgba(214,190,255,.55);
    box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 12px rgba(168,85,247,.35); }
  .nb-back-btn span{ font-size:18px; line-height:1; }
  .nb-back-btn:active{ transform:scale(.96); }
}

/* ================= PvP Duels: Fights | History (21 Oct 2026) ================= */
.dl-tabs{ margin:0 0 14px !important; }
.dl-tabs > button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.dl-badge, .dl-nav-badge{
    display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
    background:#ff3b5c; color:#fff; font-size:10.5px; font-weight:800; line-height:18px;
    box-shadow:0 0 0 2px rgba(14,8,30,.9);
}
.dl-nav-badge{ margin-left:auto; }
.dl-hist-hint{ text-align:center; }
.dl-hist-hint a{ color:#c9b8ff; font-weight:700; }
.dl-good{ color:#8dffc6 !important; }
.dl-bad{ color:#ff9db0 !important; }

.dl-totals{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; margin:0 0 14px; }
.dl-totals > div{
    display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px; border-radius:14px; text-align:center;
    background:linear-gradient(160deg, rgba(107,59,255,.16), rgba(0,0,0,.28)); border:1px solid rgba(139,63,255,.3);
}
.dl-totals span{ font-size:11px; color:#a9b3d1; letter-spacing:.3px; }
.dl-totals b{ font-family:Orbitron, sans-serif; font-size:20px; color:#fff; }
.dl-totals small{ font-size:10.5px; color:#8c96b8; }

.dl-away{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
    padding:12px 14px; margin:0 0 14px; border-radius:14px;
    background:linear-gradient(100deg, rgba(53,255,150,.10), rgba(107,59,255,.16)); border:1px solid rgba(53,255,150,.35);
}
.dl-away > i{ font-style:normal; font-size:24px; }
.dl-away b{ display:block; color:#fff; }
.dl-away small{ color:#a9b3d1; font-size:11px; }
.dl-away > span{ font-size:13px; color:#d8deef; text-align:right; }

.dl-subtabs{ margin:0 0 10px !important; }
.dl-hrows{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.dl-hrow{
    display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:12px;
    background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-left:3px solid rgba(255,77,109,.6);
}
.dl-hrow.won{ border-left-color:rgba(53,255,150,.7); }
.dl-hrow-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.dl-hrow-kind{ font-weight:700; font-size:13px; color:#fff; }
.dl-hrow-time{ font-size:11px; color:#8c96b8; white-space:nowrap; }
.dl-hrow-mid{ font-size:13px; color:#d8deef; }
.dl-hrow-mid .nb-dim{ font-size:12px; }
.dl-hrow-bot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dl-hrow-dur{ font-size:11px; padding:3px 8px; border-radius:999px; color:#ffb3c1; background:rgba(255,77,109,.12); border:1px solid rgba(255,77,109,.35); }
.dl-replay-btn{ margin-left:auto; width:auto !important; height:auto !important; min-height:0 !important; line-height:1.2 !important; padding:6px 14px !important; font-size:12px !important; border-radius:10px !important; }
.dl-replay-old{ margin-left:auto; font-size:11px !important; }
.dl-more{ display:block; width:100%; max-width:320px; margin:0 auto 16px; }
.dl-more-note{ text-align:center; font-size:12px; }

.dl-acts{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.dl-act{
    display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; border-radius:12px;
    background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.07); font-size:13px; color:#d8deef;
}
.dl-act b{ color:#fff; }
.dl-act-right{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.dl-act-right small{ color:#8c96b8; font-size:11px; }

@media (max-width:820px){
    .dl-totals{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .dl-totals > div:first-child{ grid-column:1 / -1; }
    .dl-totals b{ font-size:18px; }
    .dl-away{ grid-template-columns:auto minmax(0,1fr); }
    .dl-away > span{ grid-column:1 / -1; text-align:left; }
    .dl-act{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* Duels History: My fights | Latest duels, pages, replay controls (21 Oct 2026, later) */
.dl-htabs{ margin:4px 0 10px !important; }
.dl-latest-note{ text-align:center; margin:0 0 10px; }
.dl-loading{ text-align:center; padding:18px 0; }
.dl-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:4px 0 16px; }
.dl-pg{
    min-width:36px; height:36px; padding:0 10px; border-radius:10px; cursor:pointer; font:inherit; font-size:13px; font-weight:800;
    color:#c9d3ea; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.dl-pg:hover:not(:disabled){ border-color:rgba(139,63,255,.7); color:#fff; }
.dl-pg.on{ color:#fff; background:linear-gradient(100deg, #7c2cff, #3b6dff 55%, #00d5ff); border-color:rgba(255,255,255,.2); }
.dl-pg:disabled:not(.on){ opacity:.4; cursor:default; }
#gamePopupBox .dl-replay-ctrl{
    position:absolute; top:10px; right:10px; z-index:20; display:flex; gap:6px;
}
#gamePopupBox .dl-replay-ctrl button{
    height:34px; padding:0 12px; border-radius:10px; cursor:pointer; font:inherit; font-size:12.5px; font-weight:800; color:#fff;
    background:rgba(14,10,30,.85); border:1px solid rgba(255,255,255,.22); box-shadow:0 4px 12px rgba(0,0,0,.4);
}
#gamePopupBox .dl-replay-ctrl .dl-rc-close{ width:34px; padding:0; font-size:15px; }
#gamePopupBox .dl-replay-ctrl button:hover{ border-color:rgba(139,63,255,.8); background:rgba(107,59,255,.45); }
@media (max-width:820px){
    .dl-pg{ min-width:32px; height:32px; padding:0 8px; font-size:12px; }
    #gamePopupBox .dl-replay-ctrl{ top:6px; right:6px; }
    #gamePopupBox .dl-replay-ctrl button{ height:30px; font-size:12px; }
    #gamePopupBox .dl-replay-ctrl .dl-rc-close{ width:30px; }
}
#gamePopupBox.pvp-battle-popup{ position:relative; }
#gamePopupBox.dl-has-ctrl{ padding-top:52px !important; }
@media (max-width:820px){ #gamePopupBox.dl-has-ctrl{ padding-top:46px !important; } }

/* 22 Oct 2026: "updates every ..." notes */
.lb-i-note{ font-size:12px; color:#a9b3d1; white-space:nowrap; }
.dl-upd{ margin:6px 0 0; text-align:center; font-size:11.5px; color:#8c96b8; }

/* 22 Oct 2026: "Updated hh:mm UTC · next m:ss" pill */
.nb-upd{ display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 9px; border-radius:999px; white-space:nowrap;
  font-size:11.5px; font-weight:600; line-height:1.2; color:#d8ceff; background:rgba(107,59,255,.14);
  border:1px solid rgba(139,63,255,.45); box-shadow:0 0 10px rgba(139,63,255,.18); font-variant-numeric:tabular-nums; cursor:help; }
.nb-upd-next{ font-weight:800; color:#fff; padding-left:7px; border-left:1px solid rgba(139,63,255,.45); min-width:62px; }
.nb-upd-dot{ width:7px; height:7px; border-radius:50%; background:#35ff96; box-shadow:0 0 6px #35ff96; flex:none; animation:nbUpdPulse 2s ease-in-out infinite; }
.nb-upd-dot.wait{ background:#ffd76a; box-shadow:0 0 6px #ffd76a; animation-duration:.8s; }
@keyframes nbUpdPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.dl-upd .nb-upd{ font-size:11px; }
.level-bc-today .nb-upd{ margin:4px 0 2px; font-size:10.5px; padding:3px 9px 3px 8px; }
@media (max-width:420px){ .nb-upd{ font-size:10.5px; gap:5px; padding:3px 8px; } .nb-upd-next{ min-width:54px; padding-left:5px; } }

/* 22 Oct 2026: Unequip all (My Beasts / Equipment) + level card "Take off" */
.ua-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; height:36px; padding:0 14px; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(100deg, #6B3BFF, #8b3fff); color:#fff; font:inherit; font-size:13px; font-weight:700;
  box-shadow:0 0 14px rgba(139,63,255,.4); transition:.2s; }
.ua-btn:hover{ transform:translateY(-2px); box-shadow:0 0 22px rgba(139,63,255,.6); filter:brightness(1.1); }
.ua-btn[hidden]{ display:none; }
.ua-btn b{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:rgba(0,0,0,.3); font-size:11.5px; display:inline-flex; align-items:center; justify-content:center; }
.ua-free-tag{ font-size:10.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; padding:2px 7px; border-radius:6px; background:rgba(53,255,150,.18); color:#7dffbf; }
.ua-free-tag[hidden]{ display:none; }
.ll-off{ align-self:center; height:26px; padding:0 12px; border:none; border-radius:8px; cursor:pointer; font:inherit; font-size:11.5px; font-weight:700; color:#fff;
  background:linear-gradient(100deg, #6B3BFF, #8b3fff); box-shadow:0 0 10px rgba(139,63,255,.35); transition:.2s; white-space:nowrap; }
.ll-off:hover{ filter:brightness(1.12); box-shadow:0 0 16px rgba(139,63,255,.55); }
@media (max-width:820px){ .ll-off{ align-self:center; height:28px; margin-left:auto; } }
.level-bc-today .nb-upd-next{ color:#fff; font-size:inherit; }
span.nb-upd b.nb-upd-next{ color:#fff; }
/* level card "Take off": sits on the Beast card's top corner, so the loadout never grows down over Hunt (Level 1 card is short) */
.level-loadout .ll-off{ position:absolute; top:-10px; right:14px; z-index:4; height:24px; padding:0 10px; font-size:10.5px; border-radius:999px; }
@media (max-width:1024px){ .level-loadout .ll-off{ right:-4px; top:-10px; height:22px; padding:0 8px; font-size:10px; } }
@media (max-width:820px){ .level-loadout .ll-off{ position:static; align-self:center; margin-left:auto; height:28px; padding:0 12px; font-size:11.5px; border-radius:8px; } }

/* 22 Oct 2026 (sadisty): Blend picker with 2-3 blends (6-9 slots): small chips, the NFT list keeps its room */
.blend-pick-slots.compact{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; grid-template-columns:none; }
.blend-pick-slots.compact .blend-pick-slot{ width:auto; min-width:58px; height:34px; padding:0 8px; border-radius:9px; flex-direction:row; gap:5px; }
.blend-pick-slots.compact .blend-pick-slot img{ width:22px; height:22px; }
.blend-pick-slots.compact .blend-pick-slot span{ font-size:18px; }
.blend-pick-slots.compact .blend-pick-slot em{ display:none; }
.blend-pick-slots.compact .blend-pick-slot small{ font-size:11px; font-weight:700; }
.blend-pick-grid{ min-height:min(240px, 34vh); }

/* Bug #68 (22 Oct 2026): PvP cards: Attack / Crit / Block / Dmg cut (better side green) */
.pvp-fstats{ display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%; margin:6px 0 2px; }
.pvp-fstat{ display:flex; justify-content:space-between; align-items:center; gap:6px; padding:6px 9px; border-radius:9px;
  background:rgba(8,6,20,.55); border:1px solid rgba(160,110,255,.22); font-size:12px; cursor:help; }
.pvp-fstat span{ color:#a9b3d1; }
.pvp-fstat b{ color:#fff; font-variant-numeric:tabular-nums; }
.pvp-fstat.up{ border-color:rgba(53,255,150,.45); } .pvp-fstat.up b{ color:#5dffb0; }
.pvp-fstat.down b{ color:#ff9aab; }
@media (max-width:420px){ .pvp-fstats{ gap:5px; } .pvp-fstat{ padding:5px 7px; font-size:11px; } }

/* ===== 22 Oct 2026: shorter level card ===== */
/* the NFT cards on the left already say what is equipped: no pills, no separate bar list */
.level-card .guardian-status-pill, .level-card .gear-status-pill, .level-card .level-dur{ display:none !important; }
.ll-dur{ display:flex; align-items:center; gap:5px; }
.ll-dur .dur-bar{ flex:1; }
.ll-dur-pct{ font-size:10.5px; font-weight:800; color:#e8e2ff; text-shadow:0 1px 3px #000; min-width:28px; text-align:right; font-variant-numeric:tabular-nums; }
.ll-dur.dur-warn .ll-dur-pct{ color:#ffd76a; } .ll-dur.dur-low .ll-dur-pct, .ll-dur.dur-zero .ll-dur-pct{ color:#ff8197; }

/* Beast Token today: a stat on the right like Owned / Total Cost */
.level-stats{ flex-wrap:wrap; justify-content:flex-end; }
.level-stat-bt{ flex-basis:100%; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.level-stat-bt .lvl-bt-amt{ color:#ffd76a; text-shadow:0 0 14px rgba(255,204,51,.35), 0 2px 10px rgba(0,0,0,.7); }
.lvl-bt-more{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-top:2px; }
.lvl-bt-more small{ font-size:11px; color:#b9c3da; white-space:nowrap; text-shadow:0 1px 3px #000; }
.lvl-bt-more small b{ color:#35ff96; }
.lvl-bt-pool b{ color:#ffd76a !important; }
.lvl-bt-reset{ color:#7f8db0 !important; }
.level-stat-bt .nb-upd{ font-size:10.5px; padding:3px 9px 3px 8px; }

/* phones: the info on the left, Owned / Total Cost on the right, Beast Token as one full-width strip under them */
@media (max-width:820px){
  .level-top{ display:grid !important; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"info owned" "info cost" "bt bt"; column-gap:10px; row-gap:6px; }
  .level-top > .level-info{ grid-area:info; }
  .level-top > .level-stats{ display:contents; }
  .level-stats > .level-stat:nth-child(1){ grid-area:owned; }
  .level-stats > .level-stat:nth-child(2){ grid-area:cost; }
  .level-stat-bt{ grid-area:bt; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; column-gap:10px; row-gap:4px;
    padding:7px 10px; border-radius:12px; background:rgba(8,6,20,.55); border:1px solid rgba(255,204,51,.28); text-align:left; }
  .level-stat-bt > span{ margin:0 !important; font-size:10px; }
  .level-stat-bt .lvl-bt-amt{ font-size:18px; }
  .lvl-bt-more{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; flex-basis:100%; }
  .lvl-bt-more small{ font-size:10.5px; }
  /* Neon per hunt + Hunt time side by side */
  .level-info{ flex-direction:row !important; flex-wrap:wrap; }
  .level-info > *{ flex-basis:100%; }
  .level-info > .level-income, .level-info > .level-hunttime{ flex:1 1 44%; min-width:0; }
}
/* the right column never takes more than this, its small lines wrap (middle keeps its room) */
.level-stats{ max-width:250px; }
.lvl-bt-more small{ white-space:normal; text-align:right; }
@media (max-width:1400px){ .level-stats{ max-width:200px; } .level-stat-bt .nb-upd{ font-size:10px; gap:5px; padding:3px 7px; } .level-stat-bt .nb-upd-next{ min-width:50px; padding-left:5px; } }
@media (max-width:820px){
  .level-stats{ max-width:none; }
  .lvl-bt-more small{ text-align:left; }
  /* side by side: the per-second note under Neon per hunt is not needed here (Hunt time sits right next to it) */
  .level-info > .level-income .income-sec{ display:none; }
  .level-info > .level-income, .level-info > .level-hunttime{ white-space:nowrap; }
}
.li-short{ display:none; }
@media (max-width:820px){
  .li-long{ display:none; } .li-short{ display:inline; }
  .level-info > .level-income{ flex:0 1 auto; gap:6px; }
  .level-info > .level-hunttime{ flex:1 1 auto; justify-content:flex-end; gap:5px; }
  .level-hunttime .hunt-cut:not(.is-cut){ display:none; }
  .level-info > .level-income .income-weapon{ display:none; }
}
/* a narrow card on a computer (3 columns): same layout as phones, Beast Token as a strip under the title */
.level-card{ container-type:inline-size; container-name:lvcard; }
@container lvcard (max-width:700px){
  .level-top{ display:grid !important; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"info owned" "info cost" "bt bt"; column-gap:10px; row-gap:6px; }
  .level-top > .level-info{ grid-area:info; }
  .level-top > .level-stats{ display:contents; }
  .level-stats > .level-stat:nth-child(1){ grid-area:owned; }
  .level-stats > .level-stat:nth-child(2){ grid-area:cost; }
  .level-stat-bt{ grid-area:bt; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; column-gap:10px; row-gap:4px;
    padding:7px 10px; border-radius:12px; background:rgba(8,6,20,.55); border:1px solid rgba(255,204,51,.28); text-align:left; }
  .level-stat-bt > span{ margin:0 !important; font-size:10px; }
  .level-stat-bt .lvl-bt-amt{ font-size:18px; }
  .lvl-bt-more{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; flex-basis:100%; }
  .lvl-bt-more small{ font-size:10.5px; text-align:left; }
}

/* phones + narrow cards: one grid (Owned / Total Cost on the right of the title, the rest full width, Neon/hunt + Hunt time on one row) */
@media (max-width:820px){
  .level-top{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; grid-template-areas:none; column-gap:10px; row-gap:5px; align-items:start; }
  .level-top > .level-info, .level-top > .level-stats{ display:contents !important; }
  .level-info > *{ grid-column:1 / 3; grid-area:auto / 1 / auto / 3; margin-top:0; }
  .level-stats > .level-stat:nth-child(1){ grid-area:1 / 3 / span 2 / 4; }
  .level-stats > .level-stat:nth-child(2){ grid-area:3 / 3 / span 2 / 4; }
  .level-info > .level-mats{ grid-column:1 / -1; justify-self:start; }
  .level-info > .level-income{ grid-column:1 / 2; align-self:center; }
  .level-info > .level-hunttime{ grid-column:2 / -1; align-self:center; justify-content:flex-end; }
  .level-stat-bt{ grid-column:1 / -1 !important; grid-row:auto !important; }
}
@container lvcard (max-width:700px){
  .level-top{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; grid-template-areas:none; column-gap:10px; row-gap:5px; align-items:start; }
  .level-top > .level-info, .level-top > .level-stats{ display:contents !important; }
  .level-info > *{ grid-column:1 / 3; grid-area:auto / 1 / auto / 3; margin-top:0; }
  .level-stats > .level-stat:nth-child(1){ grid-area:1 / 3 / span 2 / 4; }
  .level-stats > .level-stat:nth-child(2){ grid-area:3 / 3 / span 2 / 4; }
  .level-info > .level-mats{ grid-column:1 / -1; justify-self:start; }
  .level-info > .level-income{ grid-column:1 / 2; align-self:center; }
  .level-info > .level-hunttime{ grid-column:2 / -1; align-self:center; justify-content:flex-end; }
  .level-stat-bt{ grid-column:1 / -1 !important; grid-row:auto !important; }
  .level-info > .level-income .income-sec{ display:none; } .li-long{ display:none; } .li-short{ display:inline; } .level-hunttime .hunt-cut:not(.is-cut){ display:none; }
}
/* the Beast + gear pictures stand on the left (absolute): the card must stay at least that tall */
@media (min-width:1025px){ .level-hero{ min-height:360px; } }
@media (min-width:821px) and (max-width:1024px){ .level-hero{ min-height:280px; } }
/* narrow card on a computer: the Beast + gear pictures stay on the left (the info had this margin before) */
@container lvcard (max-width:700px){ .level-top{ padding-left:220px; } }
@media (max-width:1024px){ @container lvcard (max-width:700px){ .level-top{ padding-left:150px; } } }
@media (max-width:820px){ .level-top{ padding-left:0 !important; } }
@container lvcard (max-width:700px){ .level-info > .level-income{ white-space:nowrap; } }

/* 22 Oct 2026: phone popups blinked twice
   1) the dark backdrop came at once and the box faded in after it -> both fade in together now
   2) the NFT pictures in a result popup pulsed bright/dim forever -> one glow, then still */
.game-popup:not(.hidden){ animation:gpBackIn .22s ease-out; }
@keyframes gpBackIn{ from{ opacity:0; } to{ opacity:1; } }
.game-popup-box.variant-success .game-popup-image img{ animation:gamePopupGlow 1.6s ease-in-out 1 forwards !important; }
@media (max-width:820px){
  .game-popup{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(4,6,14,.86) !important; }
  .game-popup-box{ animation-duration:.18s; }
}

/* 22 Oct 2026: leaderboard pages */
.lb-pager{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; margin:14px 0 4px; }
.lb-pg-btn{ min-width:36px; height:34px; padding:0 10px; border-radius:9px; border:1px solid rgba(139,63,255,.45); background:rgba(107,59,255,.12);
  color:#d8ceff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.15s; }
.lb-pg-btn:hover:not(:disabled){ background:rgba(107,59,255,.28); color:#fff; }
.lb-pg-btn.active{ background:linear-gradient(100deg, #6B3BFF, #8b3fff); color:#fff; border-color:transparent; box-shadow:0 0 12px rgba(139,63,255,.45); }
.lb-pg-btn:disabled{ opacity:.35; cursor:default; }
.lb-pg-gap{ color:#7f8db0; padding:0 2px; }
.lb-pg-me{ height:34px; padding:0 12px; border:none; border-radius:9px; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:#fff;
  background:linear-gradient(100deg, #6B3BFF, #8b3fff); box-shadow:0 0 12px rgba(139,63,255,.4); }
.lb-pg-info{ text-align:center; font-size:12px; color:#8c96b8; margin:4px 0 0; }

/* quests: Limited on top, missed X posts */
.quest-limited-title{ color:#ffd76a !important; }
.quest-missed{ display:block; font-size:12px; font-weight:600; color:#ff9aab; margin-top:2px; }

/* 22 Oct 2026: music (js/music.js) */
.music-btn{ display:inline-flex; align-items:center; justify-content:center; color:#9aa6c0; }
.music-btn svg{ width:26px; height:26px; }
.music-btn.on{ color:#00e5ff; box-shadow:0 0 12px rgba(0,229,255,.35); }
@media (max-width:820px){ .music-btn svg{ width:20px; height:20px; } }
.nbm-panel{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.nbm-toggle{ height:46px; border:none; border-radius:12px; cursor:pointer; font:inherit; font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(100deg, #6B3BFF, #8b3fff); box-shadow:0 0 14px rgba(139,63,255,.4); }
.nbm-toggle.on{ background:linear-gradient(100deg, #0e7c86, #00b8cc); box-shadow:0 0 14px rgba(0,229,255,.35); }
.nbm-row{ display:flex; align-items:center; gap:10px; font-size:13px; color:#c8d0ea; }
.nbm-row input{ flex:1; accent-color:#8b3fff; }
/* 24 Oct 2026: phones gave every popup input padding (mobile.css), so the Volume
   bar stopped short of 100%. A range slider never gets padding (all popups). */
.game-popup-box input[type="range"], .nbm-row input[type="range"]{ padding:0 !important; margin:0; min-width:0; width:auto; height:24px; box-sizing:border-box; }
.nbm-row b{ min-width:40px; text-align:right; color:#fff; }
.nbm-h{ margin:2px 0 -4px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#9aa6c0; }
.nbm-vibes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.nbm-vibes button{ height:38px; border-radius:10px; border:1px solid rgba(139,63,255,.45); background:rgba(107,59,255,.12); color:#e8e2ff; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.nbm-vibes button.on{ background:linear-gradient(100deg, #6B3BFF, #8b3fff); border-color:transparent; color:#fff; }
.nbm-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:#c8d0ea; cursor:pointer; }
.nbm-check input{ width:18px; height:18px; accent-color:#8b3fff; }
.nbm-viz{ width:100%; height:60px; border-radius:10px; background:rgba(0,0,0,.35); }
.nbm-note{ margin:0; font-size:11.5px; color:#8c96b8; text-align:center; }
/* phones: Music in the bottom bar (5 tabs), not at the top */
@media (max-width:820px){
  #musicBtn{ display:none !important; }
  .mobile-tabbar.has-music{ grid-template-columns:repeat(5, 1fr) !important; }
  .mobile-tabbar .tab-music svg{ width:22px; height:22px; color:#9aa6c0; }
  .mobile-tabbar .tab-music.on svg{ color:#00e5ff; filter:drop-shadow(0 0 6px rgba(0,229,255,.6)); }
}

/* Bug #71: a few NFTs in the Blend picker stretched to the bottom */
.blend-pick-grid{ align-content:start; grid-auto-rows:max-content; }
/* Bug #72: Continue with too few picked */
.blend-pick-warn{ color:#ff9aab !important; font-weight:700; animation:bpWarn .4s ease; }
@keyframes bpWarn{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
/* hunts done under Owned */
.lvl-hunts{ display:block; margin-top:2px; font-size:11px; font-weight:600; color:#9fb3d6; text-shadow:0 1px 3px #000; white-space:nowrap; }
.lvl-hunts:empty{ display:none; }

/* 22 Oct 2026: MODERATOR (emerald shield) + CONTENT CREATOR (red-orange) gift cosmetics */
.leaderboard-row.lb-titled-titleModerator{
    background:linear-gradient(100deg, rgba(40,230,160,.2), rgba(10,70,60,.38) 45%, rgba(6,16,18,.85));
    border:1px solid rgba(60,240,170,.6);
    box-shadow:0 0 16px rgba(40,230,160,.22), inset 0 1px 0 rgba(200,255,235,.2);
}
.leaderboard-row.lb-titled-titleModerator .lb-name-text{ color:#e6fff6; text-shadow:0 0 10px rgba(40,230,160,.5); }
.lb-badge-titleModerator{ color:#00321f; background:linear-gradient(135deg, #c9ffe9, #35f0a8 55%, #0fb57c); box-shadow:0 0 10px rgba(40,230,160,.55); }
.lb-badge-titleModerator::before{ content:"\1F6E1\FE0F  "; }
.pvp-card-title.cos-titleModerator{ color:#00321f; background:linear-gradient(135deg, #c9ffe9, #35f0a8 55%, #0fb57c); border:1px solid #c9ffe9; box-shadow:0 0 14px rgba(40,230,160,.55); }
.leaderboard-name.lb-cos-nameModerator, .leaderboard-name.lb-cos-nameModerator .lb-name-text,
.mk-who.mk-cos-nameModerator .mk-who-text,
.pvp-card.cos-nameModerator .pvp-card-name{ color:#4dffb8; text-shadow:0 0 9px rgba(40,230,160,.75); font-weight:700; }

.leaderboard-row.lb-titled-titleCreator{
    background:linear-gradient(100deg, rgba(255,80,60,.22), rgba(90,25,20,.38) 45%, rgba(20,8,8,.85));
    border:1px solid rgba(255,110,70,.6);
    box-shadow:0 0 16px rgba(255,90,60,.22), inset 0 1px 0 rgba(255,220,200,.2);
}
.leaderboard-row.lb-titled-titleCreator .lb-name-text{ color:#fff0e8; text-shadow:0 0 10px rgba(255,90,60,.5); }
.lb-badge-titleCreator{ color:#3a0a00; background:linear-gradient(135deg, #ffe0c2, #ff8a3c 50%, #ff3b3b); box-shadow:0 0 10px rgba(255,90,60,.55); }
.lb-badge-titleCreator::before{ content:"\1F3AC  "; }
.pvp-card-title.cos-titleCreator{ color:#3a0a00; background:linear-gradient(135deg, #ffe0c2, #ff8a3c 50%, #ff3b3b); border:1px solid #ffe0c2; box-shadow:0 0 14px rgba(255,90,60,.55); }
.leaderboard-name.lb-cos-nameCreator, .leaderboard-name.lb-cos-nameCreator .lb-name-text,
.mk-who.mk-cos-nameCreator .mk-who-text,
.pvp-card.cos-nameCreator .pvp-card-name{
    background:linear-gradient(90deg, #ffd27a, #ff7a3c, #ff3b5c); -webkit-background-clip:text; background-clip:text; color:transparent !important;
    filter:drop-shadow(0 0 6px rgba(255,90,60,.6)); font-weight:700;
}

/* 22 Oct 2026: Prestige popup explains each number */
.forge-level-row.has-note{ align-items:center; }
.forge-level-row.has-note > span{ display:flex; flex-direction:column; gap:2px; text-align:left; }
.prest-note{ font-size:11px; font-weight:500; color:#8c96b8; line-height:1.3; }
.prest-status{ margin:0 0 8px; padding:9px 12px; border-radius:10px; font-size:13px; line-height:1.45; color:#ffe1a0;
  background:rgba(255,190,60,.08); border:1px solid rgba(255,190,60,.35); text-align:left; }
.prest-status b{ color:#fff; }
.prest-status.ready{ color:#bfffe0; background:rgba(53,255,150,.08); border-color:rgba(53,255,150,.4); }

/* 22 Oct 2026 (Jas): phones: "Neon / hunt 935.2K" ran into "Hunt time" on every level.
   Both now sit in one row box (.level-ih): side by side when they fit, Hunt time drops
   to its own line (right side) when they don't, so they never overlap. PC: no change. */
.level-ih{ display:contents; }
@media (max-width:820px){
  .level-info > .level-ih{ grid-area:auto / 1 / auto / -1 !important; grid-column:1 / -1 !important; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; min-width:0; margin:0; }
  .level-ih > .level-income{ flex:0 0 auto; min-width:0; white-space:nowrap; gap:6px; margin:0; }
  .level-ih > .level-hunttime{ flex:0 0 auto; min-width:0; margin:0 0 0 auto; white-space:nowrap; flex-wrap:nowrap; justify-content:flex-end; gap:5px; }
  .level-ih .income-sec, .level-ih .income-weapon{ display:none !important; }
}
@container lvcard (max-width:700px){
  .level-info > .level-ih{ grid-area:auto / 1 / auto / -1 !important; grid-column:1 / -1 !important; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; min-width:0; margin:0; }
  .level-ih > .level-income{ flex:0 0 auto; min-width:0; white-space:nowrap; gap:6px; margin:0; }
  .level-ih > .level-hunttime{ flex:0 0 auto; min-width:0; margin:0 0 0 auto; white-space:nowrap; flex-wrap:nowrap; justify-content:flex-end; gap:5px; }
  .level-ih .income-sec, .level-ih .income-weapon{ display:none !important; }
}

/* 22 Oct 2026 (iPhone + Android scroll report): phones
   (the "no pull-to-refresh" line was taken out again: on Android it stopped the page from scrolling)
   - no see-through blur behind the header, coins, buttons and bottom bar: the phone had
     to blur the screen again on every scroll frame (blank patches while scrolling) */
@media (max-width:820px){
  body::after{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(7,11,20,.74); }
  #top-header{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:linear-gradient(90deg, rgba(60,20,110,.98), rgba(20,12,38,.98), rgba(45,15,100,.98)); }
  .coin-card, .buy-btn, .side-panel, .mobile-tabbar{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .mobile-tabbar{ background:linear-gradient(180deg, #220e44, #0e081e) !important; }
}

/* Bug #77 (22 Oct 2026, PC half window): every minute the pill said "updating…" (wider than
   "next 0:45"), "resets in" jumped to the next line and the whole page moved.
   Both words now sit in the same spot (one hidden): the pill keeps one width. */
.nb-upd-next{ display:inline-grid !important; justify-items:center; white-space:nowrap; }
.nb-upd-next > span{ grid-area:1 / 1; }
.nb-upd-next > .nb-upd-ghost{ visibility:hidden; }

/* 22 Oct 2026: profile picture (js/avatars.js): rounded square, rarity colour border */
.nb-av{ --av:#7f8db0; display:inline-grid; place-items:center; flex:none; overflow:hidden; vertical-align:middle;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), rgba(0,0,0,.45)); border:2px solid var(--av);
  box-shadow:0 0 10px color-mix(in srgb, var(--av) 45%, transparent); }
.nb-av img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.nb-av img.nb-av-def{ width:70%; height:70%; object-fit:contain; }
.nb-av-xl{ width:84px; height:84px; border-radius:18px; border-width:3px; }
.nb-av-md{ width:64px; height:64px; border-radius:14px; }
.nb-av-sm{ width:28px; height:28px; border-radius:8px; border-width:1.5px; margin-right:8px; box-shadow:none; }
.nb-av-r-common{ --av:#9aa6c0; } .nb-av-r-uncommon{ --av:#35ff96; } .nb-av-r-rare{ --av:#3b9dff; } .nb-av-r-epic{ --av:#b45cff; }
.nb-av-r-legendary{ --av:#ffc83d; } .nb-av-r-mythic{ --av:#ff4d6d; } .nb-av-r-ultimate{ --av:#ff7a3c; }
.nb-av-r-ultimate{ border-image:none; box-shadow:0 0 14px rgba(255,122,60,.6), 0 0 4px rgba(255,210,122,.8) inset; }
.leaderboard-name{ display:flex; align-items:center; min-width:0; }
.prof-avatar-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.prof-av-btn{ height:26px; padding:0 10px; border:none; border-radius:8px; cursor:pointer; font:inherit; font-size:11px; font-weight:700; color:#fff;
  background:linear-gradient(100deg, #6B3BFF, #8b3fff); box-shadow:0 0 10px rgba(139,63,255,.35); white-space:nowrap; }
.prof-av-btn:hover{ filter:brightness(1.12); }
.prof-card-av{ display:flex; justify-content:center; margin:0 0 10px; }
.nb-av-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:10px; max-height:min(52vh, 460px); overflow:auto; padding:4px; margin-top:8px; }
.nb-av-pick{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border-radius:14px; cursor:pointer; font:inherit; color:#fff;
  background:rgba(8,6,20,.55); border:1px solid rgba(139,63,255,.3); transition:.15s; text-align:center; min-width:0; }
.nb-av-pick:hover{ border-color:rgba(139,63,255,.75); }
.nb-av-pick.on{ background:linear-gradient(160deg, rgba(107,59,255,.55), rgba(139,63,255,.3)); border-color:#8b3fff; box-shadow:0 0 14px rgba(139,63,255,.5); }
.nb-av-pick b{ font-size:12px; line-height:1.2; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nb-av-pick small{ font-size:10.5px; color:#a9b3d1; }
@media (max-width:820px){ .nb-av-xl{ width:64px; height:64px; border-radius:14px; } .nb-av-sm{ width:24px; height:24px; margin-right:6px; } .nb-av-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; } .nb-av-md{ width:56px; height:56px; } }

/* 22 Oct 2026: Ultimate Race (js/ultimateRace.js) */
.ur-box{ margin:0 0 16px; padding:16px; border-radius:18px; background:linear-gradient(135deg, rgba(255,122,60,.12), rgba(107,59,255,.14));
  border:1px solid rgba(255,170,80,.45); box-shadow:0 0 22px rgba(255,122,60,.15); }
.ur-head h3{ margin:4px 0 6px; font-family:var(--font-display,"Orbitron",sans-serif); font-size:20px; color:#fff;
  background:linear-gradient(90deg, #ffd27a, #ff7a3c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ur-head p{ margin:0 0 12px; font-size:13px; color:#c8d0ea; line-height:1.45; }
.ur-tag{ display:inline-block; padding:2px 8px; border-radius:6px; font-size:10.5px; font-weight:800; letter-spacing:.6px; color:#ffe1a0; background:rgba(255,190,60,.14); border:1px solid rgba(255,190,60,.4); }
.ur-sides{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ur-side{ padding:12px; border-radius:14px; background:rgba(8,6,20,.55); border:1px solid rgba(255,255,255,.08); min-width:0; }
.ur-side-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ur-side-head img{ width:26px; height:26px; object-fit:contain; }
.ur-side-head h4{ margin:0; font-size:14px; letter-spacing:.4px; color:#fff; }
.ur-place{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 10px; margin-top:6px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.ur-place.taken{ border-color:rgba(255,200,90,.45); background:rgba(255,190,60,.08); }
.ur-medal{ font-size:20px; text-align:center; }
.ur-who{ display:flex; flex-direction:column; min-width:0; }
.ur-who b{ font-size:13.5px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ur-who b.ur-open{ color:#9fb3d6; font-weight:600; }
.ur-who em{ font-style:normal; font-size:11px; color:#ffd27a; }
.ur-who small{ font-size:10.5px; color:#8c96b8; }
.ur-prize{ display:flex; align-items:center; gap:4px; font-weight:800; font-size:13px; color:#ffd76a; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ur-prize img{ width:16px; height:16px; }
.ur-made{ margin:10px 0 0; font-size:12px; color:#a9b3d1; text-align:center; }
.ur-made b{ color:#fff; }
.ur-slim{ display:flex; align-items:center; gap:10px; width:100%; margin:0 0 12px; padding:10px 14px; border:none; border-radius:12px; cursor:pointer; font:inherit; color:#fff; text-align:left;
  background:linear-gradient(100deg, #6B3BFF, #8b3fff); box-shadow:0 0 16px rgba(139,63,255,.4); }
.ur-slim[hidden]{ display:none; }
.ur-slim:hover{ filter:brightness(1.1); }
.ur-slim-ico{ font-size:20px; }
.ur-slim-txt{ flex:1; min-width:0; font-size:13px; line-height:1.35; }
.ur-slim-txt small{ display:block; font-size:11px; color:#ffe1a0; }
.ur-slim-go{ font-weight:800; font-size:12.5px; white-space:nowrap; }
@media (max-width:820px){
  .ur-sides{ grid-template-columns:1fr; }
  .ur-box{ padding:12px; }
  .ur-head h3{ font-size:17px; }
  .ur-slim{ padding:9px 12px; }
  .ur-slim-txt{ font-size:12px; }
}
/* leaderboard on phones: picture on the left, name + title badge stacked next to it */
@media (max-width:640px){
  #leaderboardContent .leaderboard-name{ display:grid !important; grid-template-columns:auto minmax(0,1fr); column-gap:6px; row-gap:2px; align-items:center !important; justify-items:start; }
  #leaderboardContent .leaderboard-name > .nb-av{ grid-row:1; grid-column:1; margin:0; }
  #leaderboardContent .leaderboard-name > .lb-name-text, #leaderboardContent .leaderboard-name > .lb-title-badge{ grid-column:2; }
}
/* profile head: the picture column fits the picture + its button */
.prof-head{ grid-template-columns:auto minmax(0, 1fr) minmax(180px, 260px) !important; }
@media (max-width:820px){
  .prof-head{ grid-template-columns:auto minmax(0, 1fr) !important; }
  .prof-av-btn{ height:24px; padding:0 8px; font-size:10.5px; }
}
/* 22 Oct 2026 (Jas): bigger picture on Profile and the player card, the whole Beast card shows (not cut) */
.nb-av-xl, .nb-av-md{ aspect-ratio:5 / 7; height:auto; padding:3px; }
.nb-av-xl img, .nb-av-md img{ object-fit:contain; object-position:50% 50%; border-radius:10px; }
.nb-av-xl{ width:120px; border-radius:16px; }
.nb-av-md{ width:120px; border-radius:16px; }
.nb-av-pick .nb-av-md{ width:84px; border-radius:12px; }
@media (max-width:820px){
  .nb-av-xl{ width:96px; border-radius:14px; }
  .nb-av-md{ width:110px; }
  .nb-av-pick .nb-av-md{ width:72px; }
}

/* 22 Oct 2026: X CREATOR gift cosmetic (X Creator contest winners): black and white, like the X logo */
.leaderboard-row.lb-titled-titleXCreator{
    background:linear-gradient(100deg, rgba(231,233,234,.16), rgba(30,32,36,.6) 45%, rgba(4,4,6,.92));
    border:1px solid rgba(231,233,234,.55);
    box-shadow:0 0 16px rgba(231,233,234,.14), inset 0 1px 0 rgba(255,255,255,.18);
}
.leaderboard-row.lb-titled-titleXCreator .lb-name-text{ color:#ffffff; text-shadow:0 0 1px #000, 0 0 10px rgba(231,233,234,.45); }
.lb-badge-titleXCreator{ color:#ffffff; background:#000000; border:1px solid #e7e9ea; box-shadow:0 0 10px rgba(231,233,234,.35); }
.lb-badge-titleXCreator::before{ content:"\1D54F  "; font-weight:900; }
.pvp-card-title.cos-titleXCreator{ color:#ffffff; background:#000000; border:1px solid #e7e9ea; box-shadow:0 0 14px rgba(231,233,234,.4); }
.leaderboard-name.lb-cos-nameXCreator, .leaderboard-name.lb-cos-nameXCreator .lb-name-text,
.mk-who.mk-cos-nameXCreator .mk-who-text,
.pvp-card.cos-nameXCreator .pvp-card-name,
.prof-who h3.lb-cos-nameXCreator{
    color:#ffffff !important; -webkit-text-fill-color:#ffffff; background:none; font-weight:800;
    text-shadow:1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 10px rgba(231,233,234,.65) !important;
}

/* 22 Oct 2026 (Jas): phones: the Beast Token popup did not scroll. Its list was squeezed to
   3 rows (the box is a flex column) and the box itself had nothing left to scroll.
   The lists keep their full height now and the whole popup scrolls with the finger. */
.game-popup-box .bc-history{ flex-shrink:0; }
@media (max-width:820px){
  .game-popup-box .bc-history, .game-popup-box .coin-history{ max-height:none !important; overflow:visible !important; flex-shrink:0; }
}

/* 22 Oct 2026: Mail history (features.js) */
.mail-hist{ display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow-y:auto; text-align:left; flex-shrink:0; }
.mail-hist-row{ padding:10px 12px; border-radius:12px; background:rgba(8,6,20,.55); border:1px solid rgba(139,63,255,.25); }
.mail-hist-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px; }
.mail-hist-top small{ font-size:11px; color:#8c96b8; }
.mail-hist-tag{ font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:2px 7px; border-radius:6px; color:#c8b8ff; background:rgba(107,59,255,.18); }
.mail-hist-row p{ margin:0; font-size:12.5px; color:#e3e7f5; line-height:1.4; }
.mail-hist-row strong{ display:block; margin-top:4px; font-size:12.5px; color:#ffd76a; }
@media (max-width:820px){ .game-popup-box .mail-hist{ max-height:none; overflow:visible; } }

/* 22 Oct 2026: Invites: remove a friend who doesn't play (bugReport.js) */
.inv-release{ flex:none; width:28px; height:28px; margin-left:8px; border:none; border-radius:8px; cursor:pointer; font:inherit; font-size:13px; font-weight:800; color:#fff;
  background:linear-gradient(100deg, #6B3BFF, #8b3fff); box-shadow:0 0 10px rgba(139,63,255,.35); display:inline-grid; place-items:center; }
.inv-release:hover{ filter:brightness(1.15); }

/* 22 Oct 2026: Unlucky board (leaderboards.js) */
/* 23 Oct 2026: Beast / Equipment / Both filter on the Unlucky board */
.lb-unlucky-cats{ display:flex; gap:8px; margin:0 0 10px; }
.lb-unlucky-cat-btn{ flex:1; height:36px; padding:0 10px; border:none; border-radius:10px; background:#1F2937; color:#9fb3d6; font-weight:700; font-size:12px; cursor:pointer; transition:.2s; }
.lb-unlucky-cat-btn.active{ background:linear-gradient(100deg,#7c2cff,#00E5FF); color:#fff; }
.lb-unlucky-note{ margin:2px 0 10px; font-size:12px; color:#8c96b8; text-align:center; }
.lb-unlucky-fails small, .lb-unlucky-lost small{ display:block; font-size:10.5px; font-weight:600; color:#8c96b8; }
.lb-unlucky-lost{ display:flex; flex-direction:column; align-items:flex-end; color:#ff8197 !important; }
.lb-unlucky-lost img{ width:14px; height:14px; vertical-align:-2px; margin-right:3px; display:inline; }
.lb-unlucky-row .leaderboard-value{ color:#ff8197; }
.lb-unlucky-tot{ margin:0 0 6px; padding:8px 14px; border-radius:12px; text-align:center; font-size:13px; line-height:1.45; color:#e3e7f5;
  background:rgba(107,59,255,.12); border:1px solid rgba(139,63,255,.4); }
.lb-unlucky-tot b{ color:#ffd76a; }

/* ---------- 24 Oct 2026: PvP Duels fight styles (duels.js) ---------- */
.dl-style-chip{
    align-self:flex-start; margin-top:4px; padding:3px 10px; border-radius:999px; cursor:pointer; font-family:inherit; font-size:11px; font-weight:700;
    color:#fff; background:linear-gradient(135deg, #6B3BFF, #8b3fff); border:1px solid rgba(139,63,255,.8);
}
.dl-style-chip.none{ background:rgba(139,63,255,.15); color:#c9b8ff; }
.dl-style-chip:disabled{ opacity:.5; cursor:not-allowed; }
.dl-style-q{ margin:10px 0 6px; font-weight:700; }
.dl-style-row{ justify-content:center; margin-bottom:6px; }
.dl-style-rule{ margin:0 0 8px; font-size:11px; color:#8c96b8; text-align:center; }
.dl-style-won{ margin:8px 0 0; padding:6px 12px; border-radius:10px; font-size:12px; text-align:center; color:#d7dcef; background:rgba(139,63,255,.15); border:1px solid rgba(139,63,255,.35); }
.dl-style-won.good{ color:#7dffb0; border-color:rgba(125,255,176,.4); }
.dl-style-won.bad{ color:#ff9db0; border-color:rgba(255,157,176,.4); }
.dl-hrow-style{ white-space:nowrap; }

/* ---------- 24 Oct 2026 (later): style of every paid-in fight (duels.js duelStylePick) ---------- */
.dl-q-tools{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:4px 0 10px; }
.dl-q-tools > span{ width:100%; text-align:center; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#9aa6c0; }
.dl-q-tools .nb-step{ padding:6px 10px; font-size:12px; }
.dl-q-tools .dl-q-rand{ color:#fff; background:linear-gradient(135deg, #6B3BFF, #8b3fff); border-color:transparent; }
.dl-q-list{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; margin-bottom:8px; }
.dl-q-row{ padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(139,63,255,.25); }
.dl-q-top{ display:flex; align-items:center; gap:8px; }
.dl-q-no{ min-width:70px; font-size:12px; color:#a9b3d1; }
.dl-q-no i{ font-style:normal; font-size:10px; margin-left:4px; padding:1px 6px; border-radius:999px; background:rgba(125,255,176,.15); color:#7dffb0; }
.dl-q-top b{ flex:1; font-size:13px; color:#fff; }
.dl-q-edit{ padding:5px 12px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700; color:#fff; border:none;
    background:linear-gradient(135deg, #6B3BFF, #8b3fff); }
.dl-q-row .dl-style-row{ margin:8px 0 0; }
.dl-q-row .nb-step{ padding:6px 10px; font-size:12px; }

/* ---------- 24 Oct 2026: "next update" pills on My Beasts, Quests, Mailbox ---------- */
.nb-upd-line{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 14px; margin:8px 0 4px; }
.nb-upd-item{ display:inline-flex; align-items:center; gap:6px; }
.nb-upd-lbl{ font-size:11px; font-weight:700; color:#a9b3d1; white-space:nowrap; }
.nb-upd-line .nb-upd{ font-size:11px; }
@media (max-width:600px){ .nb-upd-line{ gap:6px; } .nb-upd-item{ flex-direction:column; gap:3px; } }

/* ===== PvP Duels v4 (25 Oct 2026): league card, league tiles, season tab, rating chips ===== */
.dl-league{ display:grid; grid-template-columns:1.4fr 1fr; gap:10px; margin-bottom:10px; }
.dl-lg-main{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 12px; border-radius:16px; text-align:center;
  background:linear-gradient(160deg, rgba(107,59,255,.22), rgba(0,0,0,.3)); border:1px solid rgba(139,63,255,.45); }
.dl-league.dl-easy .dl-lg-main{ border-color:rgba(53,255,150,.45); }
.dl-league.dl-medium .dl-lg-main{ border-color:rgba(255,170,60,.55); }
.dl-league.dl-hard .dl-lg-main{ border-color:rgba(255,77,109,.6); box-shadow:0 0 18px rgba(255,77,109,.18); }
.dl-lg-tag{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#a9b3d1; }
.dl-lg-name{ font-family:Orbitron, sans-serif; font-size:24px; color:#fff; }
.dl-lg-rating{ font-size:13px; color:#c9d0ea; } .dl-lg-rating b{ font-family:Orbitron, sans-serif; font-size:18px; color:#ffd76a; }
.dl-lg-bar{ width:100%; max-width:320px; height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); margin-top:4px; }
.dl-lg-bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, #6B3BFF, #8b3fff); transition:width .4s ease; }
.dl-lg-bar.top i{ background:linear-gradient(90deg, #ff4d6d, #ffb347); }
.dl-lg-next, .dl-lg-down, .dl-lg-rec{ font-size:11px; color:#a9b3d1; }
.dl-lg-down{ color:#8c96b8; }
.dl-lg-season{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:14px 10px; border-radius:16px; cursor:pointer; font-family:inherit; color:#fff; text-align:center;
  background:linear-gradient(160deg, rgba(255,215,106,.14), rgba(0,0,0,.3)); border:1px solid rgba(255,215,106,.45); }
.dl-lg-season:hover{ border-color:#ffd76a; }
.dl-lg-season span{ font-size:12px; font-weight:700; letter-spacing:.5px; color:#ffd76a; }
.dl-lg-season b{ font-family:Orbitron, sans-serif; font-size:22px; } .dl-lg-season b small{ display:block; font-family:inherit; font-size:10px; color:#a9b3d1; }
.dl-lg-season > small{ font-size:11px; color:#c9d0ea; }
@media (max-width:600px){ .dl-league{ grid-template-columns:1fr; } .dl-lg-name{ font-size:20px; } }
.dl-level.mine{ border-color:rgba(139,63,255,.8); box-shadow:0 0 0 1px rgba(139,63,255,.5), 0 0 16px rgba(139,63,255,.25); background:rgba(107,59,255,.14); }
.dl-level-range{ font-size:10px; color:#8c96b8; }
.dl-level-you{ margin-top:4px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:2px 8px; border-radius:999px; color:#fff; background:linear-gradient(135deg, #6B3BFF, #8b3fff); }
.dl-sp-note{ margin-top:6px; font-size:11px; }
.dl-hrow-rate{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; }
.dl-hrow-rate.up{ color:#7dffb0; background:rgba(53,255,150,.1); border:1px solid rgba(53,255,150,.35); }
.dl-hrow-rate.down{ color:#ff9db0; background:rgba(255,77,109,.1); border:1px solid rgba(255,77,109,.35); }
.dl-res-rate{ font-size:14px; padding:6px 14px; border-radius:999px; color:#d7dcef; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); }
.dl-res-rate b{ font-family:Orbitron, sans-serif; color:#fff; }
.dl-res-rate span{ margin-left:6px; font-weight:800; }
.dl-res-rate.up span{ color:#5dffb0; } .dl-res-rate.down span{ color:#ff8197; }
.dl-res-league{ font-size:13px; font-weight:700; padding:6px 14px; border-radius:12px; text-align:center; max-width:100%; box-sizing:border-box; }
.dl-res-league.up{ color:#fff; background:linear-gradient(135deg, #6B3BFF, #8b3fff); animation:dlReadyPop .7s ease-out; }
.dl-res-league.down{ color:#ffd0d8; background:rgba(255,77,109,.12); border:1px solid rgba(255,77,109,.4); }
/* season tab */
.dl-season-top{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:4px 0 10px; }
.dl-season-top > div{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px; border-radius:14px; text-align:center; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1); }
.dl-season-top > div:first-child{ border-color:rgba(255,215,106,.5); background:linear-gradient(160deg, rgba(255,215,106,.12), rgba(0,0,0,.28)); }
.dl-season-top span{ font-size:11px; color:#a9b3d1; }
.dl-season-top b{ font-family:Orbitron, sans-serif; font-size:20px; color:#fff; }
.dl-season-top > div:first-child b{ color:#ffd76a; }
.dl-season-top small{ font-size:10px; color:#8c96b8; }
@media (max-width:640px){ .dl-season-top{ grid-template-columns:1fr 1fr; } }
.dl-season-status{ margin:0 0 6px; text-align:center; font-size:14px; color:#d7dcef; } .dl-season-status b{ color:#ffd76a; }
.dl-season-rule{ text-align:center; font-size:11px; margin:0 0 10px; }
.dl-srows{ display:flex; flex-direction:column; gap:6px; }
.dl-srow{ display:grid; grid-template-columns:44px 1fr auto auto; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); }
.dl-srow.p1{ border-color:rgba(255,215,106,.6); } .dl-srow.p2{ border-color:rgba(200,210,230,.5); } .dl-srow.p3{ border-color:rgba(205,127,50,.55); }
.dl-srow.me{ background:rgba(107,59,255,.18); border-color:rgba(139,63,255,.7); }
.dl-srow.open{ opacity:.6; }
.dl-s-place{ font-family:Orbitron, sans-serif; font-size:15px; text-align:center; }
.dl-s-name{ display:flex; flex-direction:column; min-width:0; } .dl-s-name b{ color:#fff; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dl-s-name small{ font-size:10px; color:#8c96b8; }
.dl-s-rating{ font-family:Orbitron, sans-serif; font-size:14px; color:#ffd76a; }
.dl-s-prize{ font-family:Orbitron, sans-serif; font-size:14px; color:#5dffb0; white-space:nowrap; } .dl-s-prize small{ font-family:inherit; font-size:10px; color:#8c96b8; }
@media (max-width:420px){ .dl-srow{ grid-template-columns:34px 1fr auto; } .dl-s-rating{ display:none; } }
.dl-chase, .dl-last{ display:flex; flex-wrap:wrap; gap:6px; }
.dl-chase span, .dl-last span{ font-size:12px; padding:5px 10px; border-radius:999px; color:#c9d0ea; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1); }
.dl-chase span.me{ border-color:rgba(139,63,255,.7); background:rgba(107,59,255,.18); }
.dl-chase small{ color:#8c96b8; font-size:10px; } .dl-chase b, .dl-last b{ color:#fff; }
/* 25 Oct (later): season board with names, not-qualified rows, Beast durability line */
.dl-srow.notyet{ opacity:.78; }
.dl-s-prize em{ display:block; font-style:normal; font-family:inherit; font-size:11px; font-weight:700; color:#ffb3c1; text-align:right; }
.dl-s-prize em + small{ display:block; font-size:10px; color:#8c96b8; text-align:right; white-space:normal; max-width:150px; }
.dl-prize-list{ text-align:center; font-size:11px; margin:8px 0 12px; }
.dl-res-bdur{ font-size:12px; padding:5px 12px; border-radius:999px; color:#d7dcef; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); }
.dl-res-bdur b{ font-family:Orbitron, sans-serif; color:#fff; }

/* Bug #100 (25 Oct 2026): phones hid every <small> in the coin cards, also the green
   "+45K on the way" under Neon, so the Neon from hunts looked like it came only every 10-15 s */
@media (max-width:820px){
  .coin-card small.neon-onway{ display:block; font-size:10px; line-height:1.1; }
  .coin-card small.neon-onway:empty{ display:none; }
}
/* Bug #102 (25 Oct 2026): phones hid "≈ X/sec" under Neon / hunt; now its own small line */
@media (max-width:820px){
  .level-ih > .level-income{ flex-wrap:wrap; row-gap:0; }
  .level-ih .level-income .income-sec{ display:block !important; flex-basis:100%; font-size:10px; opacity:.75; white-space:nowrap; }
  .level-ih .level-income .income-sec:empty{ display:none !important; }
  .level-info > .level-income .income-sec{ display:block; }
}
@container lvcard (max-width:700px){
  .level-ih > .level-income{ flex-wrap:wrap; row-gap:0; }
  .level-ih .level-income .income-sec{ display:block !important; flex-basis:100%; font-size:10px; opacity:.75; white-space:nowrap; }
  .level-ih .level-income .income-sec:empty{ display:none !important; }
}