/*==========================================
LEVELS
==========================================*/

#levelsSection{

    width:100%;
    display:flex;
    flex-direction:column;
    gap:18px;

}

/*==========================================
LEVEL CARD
==========================================*/

.level-card{

    --accent:#00E5FF;

    position:relative;
    width:100%;

    border-radius:24px;
    overflow:hidden;

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

    box-shadow:0 0 20px rgba(139,63,255,.18), 0 10px 30px rgba(0,0,0,.4);

    transition:transform .25s, box-shadow .25s, border-color .25s;

    display:flex;
    flex-direction:column;

}

.level-card:hover{

    transform:translateY(-3px);
    border-color:var(--accent);
    box-shadow:0 0 30px rgba(0,229,255,.35), 0 10px 30px rgba(0,0,0,.4);

}

/*==========================================
HERO (image) SECTION
==========================================*/

.level-hero{

    position:relative;

    min-height:210px;

    background-size:cover;
    background-position:left center;

    padding:20px 24px 18px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:16px;

}

.level-card-overlay{

    position:absolute;
    inset:0;
    z-index:0;

    background:
        linear-gradient(180deg, rgba(6,9,18,.10) 0%, rgba(6,9,18,.55) 100%),
        linear-gradient(90deg, rgba(6,9,18,.15) 0%, rgba(6,9,18,.62) 38%, rgba(6,9,18,.62) 58%, rgba(6,9,18,.15) 100%);

}

/*==========================================
TOP ROW — badge / title / tagline / stats
==========================================*/

.level-top{

    position:relative;
    z-index:1;

    width:100%;
    display:flex;
    align-items:flex-start;
    gap:20px;

}

.level-info{

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

    margin-left:220px;

}

.level-badges{

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

}

.level-number{

    display:inline-flex;
    align-self:flex-start;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    color:#35ff96;
    background:rgba(53,255,150,.14);
    border:1px solid rgba(53,255,150,.35);

}

.guardian-status-pill{

    display:inline-flex;
    padding:4px 12px;
    border-radius:20px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;

}

.guardian-status-pill.equipped{

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

}

.guardian-status-pill.unequipped{

    color:#9fb3d6;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);

}

.level-info h2{

    font-family:"Orbitron",var(--font-body,"Rajdhani",sans-serif);
    font-size:26px;
    font-weight:800;
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.7);

}

.level-tagline{

    color:#dbe4f5;
    font-size:14px;
    max-width:440px;
    text-shadow:0 1px 8px rgba(0,0,0,.7);

}

.level-income{

    display:flex;
    align-items:center;
    gap:8px;
    color:#c8d7ff;
    font-size:14px;
    margin-top:2px;

}

.level-income strong{

    font-family:var(--font-display,"Orbitron",sans-serif);
    font-size:16px;
    color:#fff;

}

/*==========================================
STATS (top-right)
==========================================*/

.level-stats{

    display:flex;
    align-items:flex-start;
    gap:28px;
    flex-shrink:0;

}

.level-stat{

    text-align:right;

}

.level-stat span{

    display:block;
    color:#9fb3d6;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:6px;
    white-space:nowrap;

}

.level-stat strong{

    font-family:var(--font-display,"Orbitron",sans-serif);
    font-size:24px;
    color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.7);

}

/*==========================================
PROGRESS / TIMER ROW
==========================================*/

.level-progress{

    position:relative;
    z-index:1;

    width:calc(100% - 220px);
    margin-left:220px;

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

}

.progress-bar{

    flex:0 0 auto;
    width:55%;
    order:1;

    height:12px;
    border-radius:50px;

    background:rgba(255,255,255,.10);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);

}

.progress-fill{

    width:25%;
    height:100%;
    border-radius:50px;

    background:linear-gradient(90deg, var(--accent), #4d7dff);
    box-shadow:0 0 20px var(--accent), 0 0 8px var(--accent) inset;

}

.hunt-timer{

    order:2;
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:6px;
    color:#dbe4f5;
    font-size:13px;

}

.hunt-timer-label{

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

}

.hunt-timer span:last-child{

    font-family:var(--font-display,"Orbitron",sans-serif);
    font-weight:700;
    color:#fff;
    font-size:14px;

    display:inline-block;
    min-width:52px;
    text-align:right;
    font-variant-numeric:tabular-nums;

}

.progress-text{

    margin-top:8px;
    text-align:center;
    font-size:13px;
    color:#9fb8da;

}

/*==========================================
ACTION ROW — Hunt / Buy buttons
==========================================*/

.level-footer{

    background:#0a0d16;
    padding:18px 24px 22px;

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

}

.level-actions{

    position:relative;
    z-index:1;

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

}

.hunt-btn{

    width:200px;
    height:44px;

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

    border:none;
    border-radius:10px;
    cursor:pointer;

    color:white;
    font-size:14px;
    font-weight:700;
    font-family:var(--font-display,"Orbitron",sans-serif);
    letter-spacing:1px;

    background:linear-gradient(100deg, #8b3fff, #6B3BFF);
    box-shadow:0 0 16px rgba(139,44,255,.5);

    transition:.2s;

}

.hunt-btn:hover{

    transform:translateY(-2px);
    box-shadow:0 0 24px rgba(139,44,255,.7);

}

.buy-buttons{

    flex:1;
    display:flex;
    gap:10px;

}

.buy-btn{

    flex:1;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border-radius:10px;
    cursor:pointer;

    border:1px solid rgba(255,255,255,.1);
    background:rgba(10,14,22,.55);
    backdrop-filter:blur(6px);
    color:#ffffff !important;
    font-family:var(--font-display,"Orbitron",sans-serif);
    font-weight:700;
    text-shadow:0 1px 5px rgba(0,0,0,.7);

    transition:.2s;

}

.buy-btn:hover{

    border-color:var(--accent);
    background:rgba(0,229,255,.10);
    transform:translateY(-2px);
    color:#fff;

}

.buy-btn span{

    display:block;
    font-size:13px;
    font-weight:700;

}

.buy-btn small{

    display:block;
    margin-top:4px;
    color:#ffd94b;
    font-family:var(--font-body,"Rajdhani",sans-serif);
    font-size:11px;

}

.buy-btn.max{

    border-color:#ffcc33;
    color:#ffcc33;

}

/*======================================================
UNLOCK BUTTON (reused inside My Beasts popup)
======================================================*/

.unlock-btn{

    min-width:160px;
    height:48px;

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

    border:none;
    border-radius:12px;
    cursor:pointer;

    color:white;
    font-weight:700;
    font-size:14px;
    font-family:var(--font-display,"Orbitron",sans-serif);

    background:linear-gradient(135deg, #7d35ff, #00d9ff);

    transition:.2s;

}

.unlock-btn:hover{

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

}

/*======================================================
LOCKED LEVEL CARD
======================================================*/

.level-card.locked{

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

}

.level-card.locked .hunt-btn,
.level-card.locked .buy-btn,
.level-card.locked .unlock-btn{

    pointer-events:none;

}

/*======================================================
ACTIVE LEVEL
======================================================*/

.level-card.active{

    border-color:var(--accent);
    box-shadow:0 0 26px rgba(0,229,255,.20);

}

/*======================================================
BUTTON PRESS
======================================================*/

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

    transform:scale(.97);

}

/*======================================================
LOCKED PLACEHOLDER CARD
======================================================*/

.locked-level{

    background:rgba(18,27,47,.75);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:20px;

}

.locked-level h3{

    color:#fff;
    margin-bottom:8px;

}

.locked-level p{

    color:#B8C6E3;
    margin-bottom:6px;

}

.locked-level small{

    color:#7f94ba;

}