/* Source: battle-base.css — split from consolidated CSS */

/* Bro Rogue - Battle: Layout, Bars & Core */

/* Split from battle.css */

/* Contains: container grid, panels, character positions, HP/MP bars, damage numbers */

/* BATTLE SCREEN */
.battleContainer {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas: 'left center right';
    padding: 0.5rem;
    gap: 0.5rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #2a2a2a;
    overflow: hidden;
    position: relative;
}

/* Left Panel: Player Info + Stage Info + Battle Menu */
.battleLeftPanel {
    grid-area: left;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
    min-width: 180px;
    max-width: 240px;
}

/* Player Info Card */
.playerInfoCard {
    background-color: rgb(0 0 0 / 70%);
    border-radius: 6px;
    border: 1px solid #6b9fff;
    border-left: 3px solid #6b9fff;
    padding: 0.4rem 0.6rem;
    z-index: 10;
    width: 100%;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.playerInfoCard .playerInfoLine {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0;
    background: none;
    border: none;
}

/* Stage Info Card */
.stageInfoCard {
    background-color: rgb(0 0 0 / 70%);
    border-radius: 6px;
    border: 1px solid var(--secondary-color);
    border-left: 3px solid var(--secondary-color);
    padding: 0.4rem 0.7rem;
    z-index: 10;
    color: #eee;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 80%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 100%;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

/* Battle Menu - vertical column on the left */
.battleMenu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem;
    background-color: rgb(0 0 0 / 50%);
    border-radius: 8px;
    width: 100%;
}

.battleMenuBtn {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    white-space: nowrap;
    text-align: left;
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color), #d94444);
    box-shadow:
        0 1px 4px rgb(0 0 0 / 25%),
        inset 0 1px 0 rgb(255 255 255 / 12%);
    border: none;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.battleMenuBtn:hover {
    background: linear-gradient(135deg, var(--secondary-color), #37a89f);
    transform: translateY(-1px);
    box-shadow:
        0 3px 10px rgb(0 0 0 / 35%),
        inset 0 1px 0 rgb(255 255 255 / 20%);
}

.battleMenuBtn:active {
    transform: translateY(1px) scale(0.97);
    box-shadow:
        0 1px 3px rgb(0 0 0 / 30%),
        inset 0 3px 6px rgb(0 0 0 / 30%);
    transition: all 0.05s ease;
}

.battleField {
    grid-area: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    padding: 0.5rem;
    min-height: 0;
    position: relative;
    overflow: visible;
}

/* Right Panel: Enemy Info + Music Controls */
.battleRightPanel {
    grid-area: right;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-end;
    min-width: 200px;
    max-width: 280px;
}

/* Music Info Box */
.musicInfoBox {
    background-color: rgb(0 0 0 / 70%);
    border-radius: 8px;
    border: 1px solid #6b9fff;
    border-left: 3px solid #6b9fff;
    padding: 0.5rem 0.7rem;
    z-index: 10;
    width: 100%;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.musicInfoHeader {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.musicIcon {
    font-size: 0.85rem;
    animation: musicPulse 1.5s ease-in-out infinite;
}

@keyframes musicPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.musicLabel {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    font-weight: bold;
}

.musicTrackName {
    font-size: 0.75rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.musicControls {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
}

.musicBtn {
    background: linear-gradient(135deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 5%));
    border: 1px solid rgb(255 255 255 / 20%);
    color: #fff;
    font-size: 0.9rem;
    width: 32px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
    box-shadow:
        0 1px 3px rgb(0 0 0 / 20%),
        inset 0 1px 0 rgb(255 255 255 / 10%);
}

.musicBtn:hover {
    background: linear-gradient(135deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 12%));
    border-color: var(--primary-color);
    transform: scale(1.12);
    box-shadow:
        0 3px 8px rgb(0 0 0 / 30%),
        inset 0 1px 0 rgb(255 255 255 / 18%);
}

.musicBtn:active {
    transform: scale(0.93);
    box-shadow:
        0 1px 2px rgb(0 0 0 / 25%),
        inset 0 2px 4px rgb(0 0 0 / 30%);
    transition: all 0.05s ease;
}

.musicBtn.paused {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.nextBtn:hover {
    background: rgb(78 205 196 / 30%);
    border-color: var(--secondary-color);
}

.prevBtn:hover {
    background: rgb(78 205 196 / 30%);
    border-color: var(--secondary-color);
}

.playPauseBtn:hover {
    background: rgb(255 107 107 / 30%);
    border-color: var(--primary-color);
}

.enemyInfo {
    color: #ff6b6b;
    font-weight: bold;
    font-size: 0.9rem;
}

.enemyInfoCard {
    background-color: rgb(0 0 0 / 70%);
    border-radius: 6px;
    border: 1px solid #ff6b6b;
    border-left: 3px solid #ff6b6b;
    padding: 0.4rem 0.6rem;
    z-index: 10;
    width: 100%;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.enemyInfoCard .enemyInfoLine {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0;
    background: none;
    border: none;
}

.characterPosition {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    min-height: 0;
}

/* Battle entry slide-in (applied to the wrapper via JS) */
@keyframes battleEntrySlideLeft {
    0% {
        transform: translateX(-160%);
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes battleEntrySlideRight {
    0% {
        transform: translateX(160%);
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.characterPosition.playerCharacter.entering {
    animation: battleEntrySlideLeft 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.characterPosition.enemyCharacter.entering {
    animation: battleEntrySlideRight 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

/* ── Enemy Thinking Indicator ───────────────────────────── */

.enemyThinking {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.enemyThinking.visible {
    opacity: 1;
}

.thoughtBubble {
    font-size: 2rem;
    animation: thoughtBounce 0.6s ease-in-out infinite alternate;
    filter: drop-shadow(0 2px 6px rgb(255 200 100 / 50%));
    line-height: 1;
}

@keyframes thoughtBounce {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-6px) scale(1.12);
    }
}

.thinkingText {
    font-size: 0.75rem;
    color: #ffd700;
    font-weight: bold;
    text-shadow:
        0 0 8px rgb(255 215 0 / 40%),
        1px 1px 3px rgb(0 0 0 / 80%);
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* Animated dots that cycle */
.thinkingText .dots {
    display: inline-block;
    min-width: 1.2em;
    text-align: left;
}

/* Enemy pulsing glow during thinking */
.enemyCharacter.thinking {
    filter: drop-shadow(0 0 12px rgb(255 200 100 / 40%));
    transition: filter 0.15s ease;
}

.enemyCharacter.thinking img {
    animation: enemyThinkPulse 0.8s ease-in-out infinite alternate;
}

@keyframes enemyThinkPulse {
    0% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }

    100% {
        transform: translateY(-4px) scale(1.02);
        filter: brightness(1.12);
    }
}

/* ── Idle Animation Variations ──────────────────────────── */

/* Float: applied to images */
@keyframes battleIdleFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

/* Breathe: applied to wrappers so it composes with float on the image */
@keyframes battleIdleBreathe {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.018);
    }
}

/* Player: float on img, breathe on wrapper */
.playerCharacter img {
    animation: battleIdleFloat 3.4s ease-in-out infinite;
}

.playerCharacter {
    animation: battleIdleBreathe 4.2s ease-in-out infinite;
}

/* Enemy: float on img, breathe on wrapper */
.enemyCharacter img {
    animation: battleIdleFloat 2.8s ease-in-out infinite;
}

.enemyCharacter {
    animation: battleIdleBreathe 3.6s ease-in-out infinite;
}

/* ── Character Image Sizing & Hover Zoom ───────────────── */

/* Base sizing: images preserve aspect ratio, zoom from bottom center */
.characterPosition img {
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: bottom center;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.3s ease,
        max-width 0.35s ease,
        max-height 0.35s ease;
    will-change: transform;
}

/* Small images: display at native size, capped only by viewport */
.characterPosition img.img-native {
    max-width: 85vw;
    max-height: 85vh;
}

/* Large images: capped at rest so they don't dominate the screen */
.characterPosition img.img-capped {
    max-width: min(600px, 42vw);
    max-height: min(700px, 68vh);
}

/* Hover: zoom toward native resolution (scale set via --hover-scale inline) */
.characterPosition:hover img.img-capped,
.characterPosition:hover img.img-native {
    animation: none;
    transform: scale(var(--hover-scale, 1.05));
    filter: drop-shadow(0 12px 24px rgb(0 0 0 / 45%));
}

.characterPosition img.evolving {
    animation: evolveGlow 1.5s ease-in-out;
    transition: box-shadow 0.3s ease;
}

@keyframes evolveGlow {
    0% {
        box-shadow: 0 0 0 rgb(255 215 0 / 0%);
        filter: brightness(1);
        transform: scale(1);
    }

    20% {
        box-shadow:
            0 0 60px rgb(255 215 0 / 80%),
            0 0 120px rgb(255 180 0 / 40%);
        filter: brightness(1.8);
        transform: scale(1.08);
    }

    40% {
        box-shadow: 0 0 30px rgb(255 215 0 / 40%);
        filter: brightness(1.2);
        transform: scale(1.02);
    }

    60% {
        box-shadow:
            0 0 80px rgb(255 215 0 / 90%),
            0 0 150px rgb(255 180 0 / 50%);
        filter: brightness(2);
        transform: scale(1.12);
    }

    80% {
        box-shadow: 0 0 40px rgb(255 215 0 / 50%);
        filter: brightness(1.3);
        transform: scale(1.03);
    }

    100% {
        box-shadow: 0 0 0 rgb(255 215 0 / 0%);
        filter: brightness(1);
        transform: scale(1);
    }
}

.playerCharacter {
    order: 1;
    position: relative;
}

.enemyCharacter {
    order: 2;
    position: relative;
    z-index: 5;
}

.playerInfo {
    color: #6b9fff;
    font-weight: bold;
}

.expBarContainer {
    display: flex;
    align-items: center;
    width: 100%;
}

.expBarThin {
    height: 4px;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 100%;
}

.expPercent {
    color: #8bc34a;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Enemy Info Card (matching playerInfoCard) */
.enemyInfoCard {
    background-color: rgb(0 0 0 / 70%);
    border-radius: 6px;
    border: 1px solid #ff6b6b;
    border-left: 3px solid #ff6b6b;
    padding: 0.4rem 0.6rem;
    z-index: 10;
    width: 100%;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.enemyInfoCard .enemyInfoLine {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0;
    background: none;
    border: none;
}

/* ── Turn Indicator Glow ────────────────────────────────── */
.playerInfoCard.turn-active {
    border-color: #6b9fff;
    box-shadow:
        0 0 10px rgb(107 159 255 / 35%),
        0 0 25px rgb(107 159 255 / 15%),
        inset 0 1px 0 rgb(255 255 255 / 8%);
    animation: turnGlowBlue 2.2s ease-in-out infinite;
}

.enemyInfoCard.turn-active {
    border-color: #ff6b6b;
    box-shadow:
        0 0 10px rgb(255 107 107 / 35%),
        0 0 25px rgb(255 107 107 / 15%),
        inset 0 1px 0 rgb(255 255 255 / 8%);
    animation: turnGlowRed 2.2s ease-in-out infinite;
}

@keyframes turnGlowBlue {
    0%,
    100% {
        box-shadow:
            0 0 8px rgb(107 159 255 / 25%),
            0 0 18px rgb(107 159 255 / 10%),
            inset 0 1px 0 rgb(255 255 255 / 6%);
    }

    50% {
        box-shadow:
            0 0 18px rgb(107 159 255 / 55%),
            0 0 35px rgb(107 159 255 / 25%),
            inset 0 1px 0 rgb(255 255 255 / 12%);
    }
}

@keyframes turnGlowRed {
    0%,
    100% {
        box-shadow:
            0 0 8px rgb(255 107 107 / 25%),
            0 0 18px rgb(255 107 107 / 10%),
            inset 0 1px 0 rgb(255 255 255 / 6%);
    }

    50% {
        box-shadow:
            0 0 18px rgb(255 107 107 / 55%),
            0 0 35px rgb(255 107 107 / 25%),
            inset 0 1px 0 rgb(255 255 255 / 12%);
    }
}

.playerInfoCard:not(.turn-active) {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
    border-color: #6b9fff;
    transition:
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.enemyInfoCard:not(.turn-active) {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
    border-color: #ff6b6b;
    transition:
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

/* ── HP/MP Number Prominence ────────────────────────────── */
#playerHpDisplay,
#playerMpDisplay,
#enemyHpDisplay,
#enemyMpDisplay {
    font-size: 0.95rem;
    font-weight: 900;
    text-shadow: 0 0 6px rgb(255 255 255 / 15%);
    letter-spacing: 0.3px;
}

/* DAMAGE NUMBERS */
@keyframes damageFloat {
    0% {
        transform: translateX(-50%) translateY(0) scale(0.5);
        opacity: 0;
    }

    20% {
        transform: translateX(-50%) translateY(-10px) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-60px) scale(1);
        opacity: 0;
    }
}

.damage-number {
    position: absolute;
    color: var(--damage-color, #f44);
    font-weight: bold;
    font-size: var(--damage-size, 24px);
    text-shadow: 2px 2px 4px rgb(0 0 0 / 80%);
    animation: damageFloat 1.5s ease-out forwards;
    pointer-events: none;
    z-index: 1000;
    transform: translateX(-50%);
}

.damage-number.healing {
    --damage-color: #4f4;
}

.damage-number.critical {
    --damage-color: #fa0;
    --damage-size: 32px;
}

.damage-number.super-effective {
    --damage-color: #f0f;
    --damage-size: 36px;

    animation: damageFloatSuper 1.5s ease-out forwards;
}

.damage-number.miss {
    --damage-color: #888;
    --damage-size: 18px;
}

@keyframes damageFloatSuper {
    0% {
        transform: translateX(-50%) translateY(0) scale(0.5);
        opacity: 0;
    }

    10% {
        transform: translateX(-50%) translateY(-10px) scale(1.5);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-80px) scale(1);
        opacity: 0;
    }
}

/* ENEMY SELECTION OVERLAY */