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

/* Bro Rogue - Battle: Stats & Bars Overlays */

/* Split from battle-overlays-actions.css */

/* Contains: Stat Allocation screen (7) + HP/MP Color States (8) + HP/MP Bar styles (9) + Sex Move Video Overlay (10) */

/* ── STAT ALLOCATION SCREEN ──────────────────────────────── */
.statAllocationContainer {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 15px;
    padding: 30px;
    width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgb(0 0 0 / 50%);
    border: 2px solid var(--primary-color);
}

.statAllocationContainer h2 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--primary-color);
    font-size: 28px;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 50%);
}

.statAllocationCharacter {
    text-align: center;
    margin-bottom: 25px;
    padding: 15px;
    background: rgb(255 255 255 / 10%);
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 20%);
}

.statCharName {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--secondary-color);
}

.statCharLevel {
    font-size: 14px;
    color: #b0b0b0;
    margin-bottom: 5px;
}

.playerStatPoints {
    font-size: 14px;
    color: #ffeb3b;
    margin-bottom: 5px;
    font-weight: bold;
}

.playerStatPoints span {
    color: #51cf66;
}

.availablePoints {
    font-size: 18px;
    font-weight: bold;
    color: var(--success-color);
}

.availablePoints span {
    color: #ffeb3b;
    font-size: 22px;
}

.statAllocationGrid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.statRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: rgb(255 255 255 / 5%);
    border-radius: 8px;
    border: 1px solid rgb(255 255 255 / 10%);
    transition: all 0.3s ease;
}

.statRow:hover {
    background: rgb(255 255 255 / 10%);
    transform: translateY(-2px);
}

.statName {
    width: 120px;
    font-weight: bold;
    color: var(--text-color);
    font-size: 14px;
}

.statControls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.statBtn {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.statPlus {
    background: var(--success-color);
    color: white;
}

.statPlus:hover:not(:disabled) {
    background: #40c057;
    transform: scale(1.1);
}

.statMinus {
    background: var(--danger-color);
    color: white;
}

.statMinus:hover:not(:disabled) {
    background: #ff6b6b;
    transform: scale(1.1);
}

.statBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

.statValue {
    min-width: 60px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    background: rgb(0 0 0 / 30%);
    padding: 5px 10px;
    border-radius: 5px;
}

.statChange {
    min-width: 40px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: var(--success-color);
}

.statAllocationButtons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.statAllocationBtn {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#confirmStatAllocation {
    background: var(--success-color);
    color: white;
}

#confirmStatAllocation:hover:not(:disabled) {
    background: #40c057;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgb(81 207 102 / 30%);
}

#resetStatAllocation {
    background: var(--secondary-color);
    color: white;
}

#resetStatAllocation:hover {
    background: #45b7b0;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgb(78 205 196 / 30%);
}

.statAllocationBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ── HP/MP COLOR STATES ──────────────────────────────────── */
.hp-normal,
.mp-normal {
    color: #fff;
    font-weight: normal;
}

.hp-critical,
.mp-critical {
    color: #ff0;
    font-weight: bold;
    animation: hpMpCriticalPulse 1.2s ease-in-out infinite;
}

@keyframes hpMpCriticalPulse {
    0%,
    100% {
        opacity: 1;
        text-shadow: 0 0 4px rgb(255 255 0 / 30%);
    }

    50% {
        opacity: 0.85;
        text-shadow: 0 0 12px rgb(255 255 0 / 60%);
    }
}

.hp-danger,
.mp-danger {
    color: #f44;
    font-weight: bold;
    animation: hpMpDangerPulse 0.8s ease-in-out infinite;
}

@keyframes hpMpDangerPulse {
    0%,
    100% {
        opacity: 1;
        text-shadow: 0 0 6px rgb(255 68 68 / 40%);
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        text-shadow: 0 0 18px rgb(255 68 68 / 80%);
        transform: scale(1.05);
    }
}

/* ── BATTLE SCREEN HP/MP BAR STYLES ──────────────────────── */
.playerHpBarContainer,
.playerMpBarContainer,
.enemyHpBarContainer,
.enemyMpBarContainer {
    width: 100%;
    height: 6px;
    background-color: rgb(255 255 255 / 15%);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}

.battleHpBar {
    height: 100%;
    background: linear-gradient(90deg, #51cf66, #69db7c);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

/* Enemy HP bar uses red to visually distinguish from player green */
#battleEnemyHpBar {
    background: linear-gradient(90deg, #e74c3c, #ff6b6b);
}

.battleHpBar.low {
    background: linear-gradient(90deg, #e74c3c, #ff6b6b);
    animation: battleHpLowPulse 0.9s ease-in-out infinite;
}

@keyframes battleHpLowPulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 4px rgb(255 68 68 / 30%);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 12px rgb(255 68 68 / 70%);
    }
}

.battleHpBar.damage-flash {
    animation: battleHpDamageFlash 0.4s ease-out;
}

@keyframes battleHpDamageFlash {
    0% {
        filter: brightness(2.5);
        background: #fff;
    }

    25% {
        filter: brightness(1.8);
        background: #faa;
    }

    100% {
        filter: brightness(1);
    }
}

.battleHpBar.heal-flash {
    animation: battleHpHealFlash 0.45s ease-out;
}

/* Killing-blow flash: bright pulse when enemy HP hits 0,
   drawing the player's eye before the bar drains to zero. */
.battleHpBar.killing-blow {
    animation: hpKillingBlowFlash 0.4s ease-out;
}

@keyframes hpKillingBlowFlash {
    0% {
        filter: brightness(3);
        background: #fff;
        box-shadow:
            0 0 20px rgb(255 0 0 / 90%),
            0 0 40px rgb(255 0 0 / 40%);
    }

    30% {
        filter: brightness(1.8);
        background: #f44;
        box-shadow: 0 0 12px rgb(255 0 0 / 60%);
    }

    100% {
        filter: brightness(1);
        box-shadow: none;
    }
}

@keyframes battleHpHealFlash {
    0% {
        filter: brightness(2);
        background: #afa;
    }

    50% {
        filter: brightness(1.5);
    }

    100% {
        filter: brightness(1);
    }
}

.battleMpBar {
    height: 100%;
    background: linear-gradient(90deg, #4ecdc4, #64d8d0);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.battleMpBar.damage-flash {
    animation: battleMpDamageFlash 0.4s ease-out;
}

@keyframes battleMpDamageFlash {
    0% {
        filter: brightness(2.5);
        background: #fff;
    }

    25% {
        filter: brightness(1.8);
        background: #acf;
    }

    100% {
        filter: brightness(1);
    }
}

.battleMpBar.heal-flash {
    animation: battleMpHealFlash 0.45s ease-out;
}

@keyframes battleMpHealFlash {
    0% {
        filter: brightness(2);
        background: #aff;
    }

    50% {
        filter: brightness(1.5);
    }

    100% {
        filter: brightness(1);
    }
}

/* ── SEX MOVE VIDEO OVERLAY ──────────────────────────────── */

/* Base styles only - animation styles are in battle-effects-animations.css */

/* ═══════════════════════════════════════════════════════════
   FIGHT OVERLAY BARS (hpBarFill / mpBarFill system)
   Used by fight-capture.html fight overlay panels.
   Consolidated from battle-base.css — kept separate from the
   battle-screen .battleHpBar / .battleMpBar system above.
   ═══════════════════════════════════════════════════════════ */

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

.barLabel {
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
    min-width: 30px;
    text-align: right;
}

.barContainer .enemyHPBar,
.barContainer .playerHPBar,
.barContainer .enemyMPBar,
.barContainer .playerMPBar,
.barContainer .playerFullReleaseBar,
.barContainer .playerExpBar {
    flex: 1;
    min-width: 80px;
}

.enemyName,
.playerName {
    font-weight: bold;
    font-size: 0.8rem;
}

.enemyLevel,
.playerLevel {
    font-size: 0.65rem;
    color: #aaa;
}

.hpBarFill {
    background-color: var(--success-color);
    height: 12px;
    border-radius: 3px;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.hpBarFill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 20%) 50%, transparent 100%);
    animation: hpBarShimmer 2s ease-in-out infinite;
}

@keyframes hpBarShimmer {
    0% {
        transform: translateX(-100%);
    }

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

.hpBarFill.low {
    background-color: var(--danger-color);
}

.hpBarFill.low::after {
    animation: hpBarShimmer 1s ease-in-out infinite;
}

/* Damage flash - applies briefly when HP decreases */
.hpBarFill.damage-flash {
    animation: hpDamageFlash 0.45s ease-out;
}

@keyframes hpDamageFlash {
    0% {
        filter: brightness(2);
        background-color: #fff;
    }

    30% {
        filter: brightness(1.8);
        background-color: #faa;
    }

    100% {
        filter: brightness(1);
    }
}

/* Heal flash - applies briefly when HP increases */
.hpBarFill.heal-flash {
    animation: hpHealFlash 0.5s ease-out;
}

@keyframes hpHealFlash {
    0% {
        filter: brightness(2);
        background-color: #afa;
    }

    50% {
        filter: brightness(1.5);
        background-color: #8f8;
    }

    100% {
        filter: brightness(1);
    }
}

.mpBarFill {
    background-color: var(--secondary-color);
    height: 10px;
    border-radius: 3px;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.mpBarFill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 15%) 50%, transparent 100%);
    animation: mpBarShimmer 2.5s ease-in-out infinite;
}

@keyframes mpBarShimmer {
    0% {
        transform: translateX(-100%);
    }

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

.mpBarFill.low {
    background-color: var(--primary-color);
}

/* Damage flash for MP bars */
.mpBarFill.damage-flash {
    animation: mpDamageFlash 0.45s ease-out;
}

@keyframes mpDamageFlash {
    0% {
        filter: brightness(2);
        background-color: #fff;
    }

    30% {
        filter: brightness(1.8);
        background-color: #acf;
    }

    100% {
        filter: brightness(1);
    }
}

/* Heal flash for MP bars */
.mpBarFill.heal-flash {
    animation: mpHealFlash 0.5s ease-out;
}

@keyframes mpHealFlash {
    0% {
        filter: brightness(2);
        background-color: #aff;
    }

    50% {
        filter: brightness(1.5);
    }

    100% {
        filter: brightness(1);
    }
}

.fullReleaseBarFill {
    background: linear-gradient(45deg, #f0f, #f0a);
    height: 10px;
    border-radius: 3px;
    transition: width 0.3s;
    box-shadow: 0 0 10px rgb(255 0 255 / 50%);
}

.fullReleaseBarFill.full {
    background: linear-gradient(45deg, #f0f, #f0a, #fff);
    animation: fullReleasePulse 1s infinite;
}

@keyframes fullReleasePulse {
    0% {
        box-shadow: 0 0 10px rgb(255 0 255 / 50%);
    }

    50% {
        box-shadow: 0 0 20px rgb(255 0 255 / 80%);
    }

    100% {
        box-shadow: 0 0 10px rgb(255 0 255 / 50%);
    }
}

.enemyHPBar,
.playerHPBar {
    background-color: rgb(255 255 255 / 20%);
    height: 12px;
    border-radius: 3px;
    overflow: hidden;
}

.enemyMPBar,
.playerMPBar {
    background-color: rgb(255 255 255 / 20%);
    height: 10px;
    border-radius: 3px;
    overflow: hidden;
}

.playerFullReleaseBar {
    background-color: rgb(255 0 255 / 20%);
    height: 10px;
    border-radius: 3px;
    overflow: hidden;
}

.expBarFill {
    background-color: var(--secondary-color);
    height: 10px;
    border-radius: 4px;
    transition: width 0.3s;
}

.playerExpBar {
    background-color: rgb(255 255 255 / 20%);
    height: 10px;
    border-radius: 4px;
    overflow: hidden;
}

.enemyHPText,
.playerHPText {
    font-size: 0.6rem;
    text-align: right;
}