/* --- 8. COMBAT LAYOUT EXPANSION FIXES --- */
#combatConsole {
    width: 100% !important;
    max-width: min(90vw, 720px) !important;
    margin: 20px auto !important;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 107, 157, 0.2);
    border-radius: 12px;
    padding: 15px 20px;
    font-size: clamp(0.6rem, 1.4vw, 0.8rem);
    line-height: 1.6;
    box-sizing: border-box;
    max-height: clamp(140px, 24vh, 200px);
    overflow-y: auto;
    backdrop-filter: blur(10px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#combatConsole::-webkit-scrollbar {
    display: none;
}

#character-grid,
.enemy {
    width: 100% !important;
    max-width: min(90vw, 720px) !important;
    margin: 0 auto !important;
}

/* ⭐ PLAYER CARD SPACING — NORMAL MODE ⭐ */
#character-grid + button,
#character-grid + div,
#character-grid + a {
    margin-top: clamp(10px, 2vh, 20px) !important;
    margin-bottom: 0 !important;
}

/* --- 9. COSMIC COMBAT EFFECTS & ANIMATIONS --- */
/* SHAKE REMOVED */
/* @keyframes cosmicShake { ... } */
/* .shake-active { animation: cosmicShake ... } */

@keyframes flashEnemyHit {
    0% { background: radial-gradient(circle at 50% 20%, #da4a6c, #000000 75%); }
    100% { background: radial-gradient(circle at 50% 20%, #020224, #000000 60%); }
}
.flash-enemy {
    animation: flashEnemyHit 0.4s ease-out forwards;
}

@keyframes flashPlayerHit {
    0% { background: radial-gradient(circle at 50% 20%, #57cf61, #000000 75%); }
    100% { background: radial-gradient(circle at 50% 20%, #020224, #000000 60%); }
}
.flash-player {
    animation: flashPlayerHit 0.4s ease-out forwards;
}

/* --- 10. COSMIC VITALITY & MANA BARS --- */
.stat-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin: 6px 0 12px 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.stat-bar-fill {
    height: 100%;
    width: 100%;
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bg-player-health {
    background: #ff6b9d;
    box-shadow: 0 0 8px rgba(255, 107, 157, 0.8);
}

.bg-enemy-health {
    background: #da4a6c;
    box-shadow: 0 0 8px rgba(218, 74, 108, 0.8);
}

.bg-mana {
    background: #ffc048;
    box-shadow: 0 0 8px rgba(255, 192, 72, 0.8);
}

.damage-popup {
    position: absolute;
    animation: floatUp 0.8s ease-out forwards;
    font-family: 'Acme', sans-serif;
    color: #ff6b9d;
    font-size: clamp(1.4rem, 3vw, 2rem);
    pointer-events: none;
    z-index: 1000;
}

@keyframes floatUp {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-50px); opacity: 0; }
}

/* --- 13. COMBAT SCREEN EDGE LAYOUT --- */
body:has(.enemy .card) {
    padding-top: clamp(10px, 2vh, 20px) !important;
    padding-bottom: clamp(10px, 2vh, 20px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
}

.container:has(.enemy .card) {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.container:has(.enemy .card) .title {
    display: none !important;
}

.container:has(.enemy .card) .enemy {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ⭐ ACTION CARDS — COMBAT MODE (fluid movement) ⭐ */
.container:has(.enemy .card) .actions {
    position: relative;
    top: clamp(24px, 4vw, 60px) !important;
}

/* ⭐ PLAYER CARD — COMBAT MODE (fluid movement) ⭐ */
.container:has(.enemy .card) #character-grid {
    margin-top: clamp(30px, 5vw, 90px) !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* CONSOLES FIXED AT BOTTOM (fluid size) */
.container:has(.enemy .card) #combatConsole,
.container:has(.enemy .card) #realmConsole {
    position: fixed !important;
    bottom: clamp(10px, 2vh, 20px) !important;
    width: min(40vw, 360px) !important;
    max-width: min(40vw, 360px) !important;
    height: clamp(160px, 26vh, 240px) !important;
    max-height: clamp(180px, 30vh, 260px) !important;
    margin: 0 !important;
    z-index: 1000 !important;
}

.container:has(.enemy .card) #combatConsole {
    right: clamp(10px, 2vw, 20px) !important;
}

.container:has(.enemy .card) #realmConsole {
    left: clamp(10px, 2vw, 20px) !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

body:has(.enemy .card) .container {
    max-width: 100% !important;
    width: 100% !important;
}

/* ENEMY SHOWCASE FLUID */
#enemyShowcase {
    width: 100%;
    height: clamp(220px, 32vh, 320px);
    margin: 20px auto;
    display: none;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

body:has(.enemy .card) #enemyShowcase {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: url("./images/combatbackground.png")
                center center / cover no-repeat !important;
}

#realmConsole::-webkit-scrollbar {
    display: none;
}

#realmConsole {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* --- ULTRAWIDE / LARGE DISPLAY SCALING (optional fine-tune) --- */
@media (min-width: 1600px) {

    body:has(.enemy .card) .container {
        max-width: min(70vw, 1100px) !important;
    }

    body:has(.enemy .card) #character-grid,
    body:has(.enemy .card) .enemy {
        max-width: min(70vw, 1100px) !important;
    }

    body:has(.enemy .card) #enemyShowcase {
        height: clamp(280px, 36vh, 360px) !important;
        max-width: min(70vw, 1100px) !important;
    }

    body:has(.enemy .card) #combatConsole,
    body:has(.enemy .card) #realmConsole {
        width: min(32vw, 380px) !important;
        max-width: min(32vw, 380px) !important;
        height: clamp(200px, 28vh, 280px) !important;
    }

    .container:has(.enemy .card) .actions {
        top: clamp(40px, 4vw, 80px) !important;
    }

    .container:has(.enemy .card) #character-grid {
        margin-top: clamp(50px, 5vw, 110px) !important;
    }
}

/* ============================================================
   14. RESPONSIVE COMBAT LAYOUT — PHONE THROUGH TABLET/LAPTOP
   Covers every width up to 1499px with fluid clamp()-based
   sizing (no snapping at a single breakpoint). At 1500px+,
   the original floating-sidebar console design (section 13 +
   the ultrawide block) takes over untouched — that's roughly
   the minimum width needed for those consoles to sit beside
   the center content without overlapping it.
   ============================================================ */
@media (max-width: 1499px) {

    /* Let the page scroll naturally instead of hard-clipping at 100vh */
    body:has(.enemy .card) {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: clamp(10px, 3vw, 20px) !important;
    }

    .container:has(.enemy .card) {
        height: auto !important;
    }

    /* Cap combat elements to a comfortable centered column */
    .container:has(.enemy .card) .enemy,
    .container:has(.enemy .card) #character-grid,
    .container:has(.enemy .card) .actions,
    body:has(.enemy .card) #enemyShowcase {
        width: 100% !important;
        max-width: min(94vw, 720px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Cards scale fluidly with viewport width — no snapping */
    .container:has(.enemy .card) #character-grid .card {
        padding: clamp(10px, 2vw, 20px) clamp(14px, 3vw, 40px) !important;
        gap: clamp(14px, 3vw, 40px) !important;
        min-height: unset !important;
    }

    .container:has(.enemy .card) #character-grid .img-avatar {
        width: clamp(45px, 10vw, 70px) !important;
        height: clamp(45px, 10vw, 70px) !important;
    }

    .container:has(.enemy .card) #character-grid .card h3 {
        font-size: clamp(0.85rem, 2.2vw, 1.1rem) !important;
    }

    .container:has(.enemy .card) #character-grid .card p {
        font-size: clamp(0.65rem, 1.6vw, 0.8rem) !important;
    }

    /* Enemy art scales instead of jumping at a breakpoint */
    body:has(.enemy .card) #enemyShowcase {
        height: clamp(140px, 28vw, 260px) !important;
        margin: clamp(8px, 2vw, 20px) auto !important;
    }

    /* Action buttons: auto-fit as many as the row allows,
       wrap to a new row when there isn't room — no media
       query needed for this part, it just flows */
    .container:has(.enemy .card) .actions {
        top: 0 !important;
        margin-top: clamp(8px, 2vw, 20px) !important;
    }

    .actions-row {
        flex-wrap: wrap !important;
        gap: clamp(6px, 1.5vw, 12px) !important;
    }

    .actions-row button {
        flex: 1 1 140px;
        font-size: clamp(0.65rem, 1.8vw, 0.85rem) !important;
        padding: clamp(6px, 1.5vw, 10px) !important;
    }

    /* Log boxes: normal stacked flow, pushed below everything
       else, instead of floating fixed sidebars (which need
       real desktop width to not overlap content) */
    .container:has(.enemy .card) #combatConsole,
    .container:has(.enemy .card) #realmConsole {
        position: static !important;
        width: 100% !important;
        max-width: min(94vw, 720px) !important;
        height: auto !important;
        max-height: clamp(110px, 20vw, 160px) !important;
        margin: clamp(6px, 1.5vw, 10px) auto !important;
        right: auto !important;
        left: auto !important;
        order: 10 !important;
    }
}