/* ============================================
   OVERLAY STYLES
   Twitch RPG Bot - Visual styling for overlay
   ============================================ */

/* ============================================
   SECTION 1: BASE STYLES
   ============================================ */

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    font-family: Arial, sans-serif;
}

#game-canvas {
    /* Now positioned inside world-wrapper, no need for width/height/position here */
    filter: contrast(1.06) saturate(1.05);
}

#debug {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.8);
    color: #0f0;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 12px;
    max-width: 400px;
}

/* ============================================
   SECTION 2: PARTY & CHARACTER STYLES
   ============================================ */

.party {
    position: absolute;
    bottom: 150px;  /* Match camp character height (camp-area 50px + camp-characters 100px) */
    display: flex;
    gap: 0px;
    align-items: flex-end;
    padding-left: 40px;  /* Compensate for negative margins */
}

/* Consistent negative margin on ALL characters */
.character {
    margin-left: -40px;
}

/* Party animation states */
.party.entering {
    left: -200px;
    animation: party-walk-in 2s ease-out forwards;
}

.party.ready {
    left: 120px;  /* 15% of 800px adventure zone */
    transition: left 0.5s ease-out;
}

.party.in-combat {
    left: 160px;  /* 20% of 800px adventure zone */
    transition: left 0.5s ease-out;
}

@keyframes party-walk-in {
    from { left: -200px; }
    to { left: 120px; }  /* Match ready position */
}

/* Character container */
.character {
    position: relative;  /* ADDED - needed for absolute positioned children */
    width: auto;
    height: 128px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Hide gradient when sprite is present */
.character:has(.sprite-container) {
    background: transparent;
    box-shadow: none;
}

/* ============================================
   SECTION 3: MONSTER STYLES
   ============================================ */

.monster {
    position: absolute;
    width: auto;
    height: 128px;
    bottom: 150px;  /* Match camp and party height */
    background: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 32px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Hide gradient when sprite is present */
.monster:has(.sprite-container) {
    background: transparent;
    box-shadow: none;
}

/* Monster sprite flip wrapper */
.sprite-flip-wrapper {
    transform: scaleX(-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   SECTION 4: SPRITE SYSTEM
   ============================================ */

.sprite-wrapper {
    position: relative;
}

.sprite-container {
    overflow: hidden;
    /* Width/height set by JavaScript */
}

/* ============================================
   SECTION 5: UI ELEMENTS (labels, health bars)
   ============================================ */

.username-label {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(0,0,0,0.7);
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 10px;
    color: #fff;
    z-index: 10;
}

/* Camp labels — positioned by JS sync, not relative to a character div */
.camp-name-label {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(0,0,0,0.7);
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 10px;
    color: #fff;
    z-index: 20;
    pointer-events: none;
}

.health-bar-container {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 5px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: visible; /* Changed from hidden to show HP text */
    z-index: 10;
}

.hp-text {
    position: absolute;
    top: -18px;
    left: 0;
    font-size: 10px;
    color: white;
    text-shadow: 1px 1px 2px black;
    font-weight: bold;
    white-space: nowrap;
    z-index: 11;
}

.health-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #4ade80, #22c55e);
    transition: width 0.3s ease;
}

.health-bar.low {
    background: linear-gradient(to bottom, #facc15, #eab308);
}

.health-bar.critical {
    background: linear-gradient(to bottom, #f87171, #ef4444);
}

.rage-bar-container {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 156, 56, 0.35);
    border-radius: 2px;
    overflow: visible;
    z-index: 10;
}

.shield-bar-container {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(88, 180, 255, 0.38);
    border-radius: 2px;
    overflow: visible;
    opacity: 0.68;
    z-index: 10;
}

.shield-bar-container.stacked {
    top: 4px;
}

.shield-bar {
    width: 0%;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(to right, #177ddc, #54c8ff, #d1f4ff);
    box-shadow: 0 0 5px rgba(84, 200, 255, 0.38);
    transition: width 0.25s ease;
}

.shield-text {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    color: #8edcff;
    font-size: 7px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 1px 1px 2px black;
    white-space: nowrap;
    opacity: 0.88;
}

.shield-bar-container.active {
    opacity: 1;
}

.shield-bar-container.active .shield-bar {
    box-shadow: 0 0 8px rgba(84, 200, 255, 0.75);
}

.shield-bar-container.pulse {
    animation: shield-bar-pulse 0.7s ease-out;
}

@keyframes shield-bar-pulse {
    0% { filter: brightness(1); transform: translateX(-50%) scaleX(1); }
    35% { filter: brightness(1.75); transform: translateX(-50%) scaleX(1.08); }
    100% { filter: brightness(1); transform: translateX(-50%) scaleX(1); }
}

.rage-bar {
    width: 0%;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(to right, #9f2d13, #f47c1f, #ffd166);
    box-shadow: 0 0 5px rgba(244, 124, 31, 0.35);
    transition: width 0.25s ease;
}

.rage-text {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffb45f;
    font-size: 7px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 1px 1px 2px black;
    white-space: nowrap;
    opacity: 0.9;
}

.rage-bar-container.ready .rage-bar {
    box-shadow: 0 0 8px rgba(255, 209, 102, 0.75);
}

.rage-bar-container.pulse {
    animation: rage-bar-pulse 0.7s ease-out;
}

@keyframes rage-bar-pulse {
    0% { filter: brightness(1); transform: translateX(-50%) scaleX(1); }
    35% { filter: brightness(1.8); transform: translateX(-50%) scaleX(1.08); }
    100% { filter: brightness(1); transform: translateX(-50%) scaleX(1); }
}

.damage-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    animation: float-up 1.8s ease-out forwards;
    pointer-events: none;
    z-index: 20;
}

/* Pop in quickly, HOLD at full opacity for readability, fade in final third.
   Less vertical travel (40px) so it doesn't race off the top. Tuned for
   smaller Twitch stream viewports where text needs time to be read. */
@keyframes float-up {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0.85);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(-6px) scale(1);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(-26px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px) scale(0.95);
    }
}

/* ============================================
   SECTION 6: CELEBRATION EFFECTS
   ============================================ */

.character.level-up-glow {
    animation: levelUpGlow 2s ease-out;
}

@keyframes levelUpGlow {
    0% { filter: drop-shadow(0 0 0px rgba(255, 215, 0, 0)); }
    30% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)); }
    100% { filter: drop-shadow(0 0 0px rgba(255, 215, 0, 0)); }
}

.character.boss-kill-glow {
    animation: bossKillGlow 3s ease-out;
}

@keyframes bossKillGlow {
    0% { filter: drop-shadow(0 0 0px rgba(255, 50, 50, 0)); }
    20% { filter: drop-shadow(0 0 20px rgba(255, 50, 50, 0.9)); }
    100% { filter: drop-shadow(0 0 0px rgba(255, 50, 50, 0)); }
}

.celebration-text {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    pointer-events: none;
    z-index: 100;
    animation: celebrationFloat 2.5s ease-out forwards;
    white-space: nowrap;
}

.celebration-text.level-up {
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(255, 215, 0, 0.8);
}

.celebration-text.boss-kill {
    color: #ff4444;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(255, 50, 50, 0.8);
}

@keyframes celebrationFloat {
    0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.5); }
    20% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.2); }
    80% { opacity: 1; transform: translateX(-50%) translateY(-18px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.8); }
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99;
}

.particle.level-up {
    background: radial-gradient(circle, #ffd700 0%, #ffed4e 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

.particle.boss-kill {
    background: radial-gradient(circle, #ff4444 0%, #ff8888 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(255, 50, 50, 0.8);
}

@keyframes particleBurst {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: var(--particle-trajectory) scale(0.3); }
}

/* Loot rolling animations */
.loot-roll-container {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.particle.loot-win {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, gold, orange);
    border-radius: 50%;
    position: absolute;
}

/* ============================================
   SECTION 7: DEATH ANIMATIONS
   ============================================ */

.character.dying,
.monster.dying,
.dying {
    animation: fade-out 1.5s ease-out forwards;
}

@keyframes fade-out {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* ============================================
   SECTION 8: CAMP ANIMATIONS
   ============================================ */

@keyframes flicker {
    from { 
        opacity: 0.8; 
        transform: translateX(-50%) scale(1); 
        filter: brightness(0.9);
    }
    to { 
        opacity: 1; 
        transform: translateX(-50%) scale(1.05); 
        filter: brightness(1.1);
    }
}

@keyframes campfire-burn {
    0% { background-position: 0px 0px; }
    2.5% { background-position: -32px 0px; }
    5% { background-position: -64px 0px; }
    7.5% { background-position: -96px 0px; }
    10% { background-position: -128px 0px; }
    12.5% { background-position: 0px -32px; }
    15% { background-position: -32px -32px; }
    17.5% { background-position: -64px -32px; }
    20% { background-position: -96px -32px; }
    22.5% { background-position: -128px -32px; }
    25% { background-position: 0px -64px; }
    27.5% { background-position: -32px -64px; }
    30% { background-position: -64px -64px; }
    32.5% { background-position: -96px -64px; }
    35% { background-position: -128px -64px; }
    37.5% { background-position: 0px -96px; }
    40% { background-position: -32px -96px; }
    42.5% { background-position: -64px -96px; }
    45% { background-position: -96px -96px; }
    47.5% { background-position: -128px -96px; }
    50% { background-position: 0px -128px; }
    52.5% { background-position: -32px -128px; }
    55% { background-position: -64px -128px; }
    57.5% { background-position: -96px -128px; }
    60% { background-position: -128px -128px; }
    62.5% { background-position: 0px -160px; }
    65% { background-position: -32px -160px; }
    67.5% { background-position: -64px -160px; }
    70% { background-position: -96px -160px; }
    72.5% { background-position: -128px -160px; }
    75% { background-position: 0px -192px; }
    77.5% { background-position: -32px -192px; }
    80% { background-position: -64px -192px; }
    82.5% { background-position: -96px -192px; }
    85% { background-position: -128px -192px; }
    87.5% { background-position: 0px -224px; }
    90% { background-position: -32px -224px; }
    92.5% { background-position: -64px -224px; }
    95% { background-position: -96px -224px; }
    97.5% { background-position: -128px -224px; }
    100% { background-position: 0px 0px; }
}

/* Loot icon floating animation */
@keyframes loot-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-8px); }
}

/* ============================================
   SECTION 9: RING EFFECTS
   ============================================ */

/* RGB Aura - Prismatic Band (sprite cycles through rainbow hues) */
.character.rgb-aura .sprite-container {
    animation: rgb-cycle 2s linear infinite;
}

@keyframes rgb-cycle {
    0%   { filter: hue-rotate(0deg) saturate(3) brightness(1.3); }
    100% { filter: hue-rotate(360deg) saturate(3) brightness(1.3); }
}

/* Haste visual indicator (optional - adds slight speed lines) */
.character.haste-active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid rgba(255, 255, 0, 0.6);
    animation: haste-pulse 0.5s ease-in-out infinite;
}

@keyframes haste-pulse {
    0%, 100% { opacity: 0.3; transform: translateY(-50%) translateX(0); }
    50% { opacity: 1; transform: translateY(-50%) translateX(3px); }
}
}


/* ============================================
   SECTION 10: STATUS EFFECT VISUALS
   ============================================ */

/* Healing numbers (green, float up) */
.damage-number.healing {
    color: #4f8;
    text-shadow: 0 0 4px #0f0, 1px 1px 0 #000;
}

/* Critical hit damage (larger with glow) */
.damage-number.crit {
    font-size: 1.5em;
    color: #ff4444;
    text-shadow: 0 0 10px #ff0000;
}

/* Haste double-attack flash */
.damage-number.haste {
    animation: haste-flash 0.2s ease-out;
}

/* ========== FLOATING STATUS TEXT ========== */
/* Base class for combat status text (THORNS!, DODGE!, etc.)
   Created by showFloatingText() in overlay.html */

.floating-text {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
    animation: float-up 1.8s ease-out forwards;
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
}

/* --- Status text variants --- */

.floating-text.dodge {
    color: #88ccff;
    font-style: italic;
}

.floating-text.thorns {
    color: #88ff88;
}

.floating-text.shield {
    color: #8888ff;
}

.floating-text.sturdy {
    color: #ffdd00;
    font-weight: bold;
    text-shadow: 0 0 10px #ffaa00;
}

.floating-text.buff {
    color: #ffaa00;
}

.floating-text.revive {
    color: #00ff88;
    font-size: 1.3em;
}

.floating-text.smite {
    color: #ff88ff;
    font-size: 1.3em;
}

.floating-text.active-cue {
    color: #ffd36a;
    font-weight: 700;
    text-shadow: 0 0 7px #f0a020, 1px 1px 0 #000;
}

.floating-text.shield-regen {
    color: #92e6ff;
    font-weight: 700;
    text-shadow: 0 0 8px #338cff, 1px 1px 0 #000;
}

.floating-text.bulwark {
    color: #dce9ff;
    font-weight: 700;
    text-shadow: 0 0 8px #668cff, 1px 1px 0 #000;
}

.floating-text.taunt {
    color: #ffdf70;
    font-weight: 700;
    text-shadow: 0 0 7px #ff7a00, 1px 1px 0 #000;
}

.floating-text.marked {
    color: #ff6060;
    font-weight: 700;
    text-shadow: 0 0 5px #ff2020, 1px 1px 0 #000;
}

.floating-text.rage {
    color: #ff5050;
    font-weight: 800;
    text-shadow: 0 0 8px #cc1010, 1px 1px 0 #000;
}

.floating-text.status-effect {
    color: #b8d8ff;
    font-size: 13px;
    font-weight: 700;
}

.floating-text.overkill {
    color: #ff7a30;
    font-weight: 800;
    text-shadow: 0 0 8px #ff3000, 1px 1px 0 #000;
}

/* --- Retaliation + control variants (2026-04) --- */

.floating-text.retaliation {
    color: #ffb020;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 0 6px #ff7a00, 1px 1px 0 #000;
}

.floating-text.retaliation-avoided {
    color: #9aa;
    font-style: italic;
    font-weight: 600;
    opacity: 0.85;
}

.floating-text.counter {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 0 8px #77ddff, 1px 1px 0 #000;
}

.floating-text.marked-consumed {
    color: #ff6060;
    font-weight: 700;
    text-shadow: 0 0 5px #ff2020, 1px 1px 0 #000;
}

.floating-text.stun {
    color: #ffe866;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 0 8px #ffaa00, 1px 1px 0 #000;
}

.floating-text.pacify {
    color: #d4a6ff;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 0 6px #9050cc, 1px 1px 0 #000;
}

.floating-text.status-apply {
    color: #88e0ff;
    font-size: 13px;
}

.floating-text.status-expire {
    color: #888888;
    font-size: 12px;
    opacity: 0.75;
}

.floating-text.status-resist {
    color: #cccccc;
    font-style: italic;
    font-weight: 600;
    text-shadow: 0 0 4px #666666;
}

.floating-text.dot-poison {
    color: #6fe66f;
    font-size: 13px;
    text-shadow: 1px 1px 0 #000;
}

.floating-text.dot-burn {
    color: #ff9040;
    font-size: 13px;
    text-shadow: 1px 1px 0 #000;
}

.floating-text.dot-bleed {
    color: #e0404a;
    font-size: 13px;
    text-shadow: 1px 1px 0 #000;
}

.floating-text.dot-generic {
    color: #cccccc;
    font-size: 13px;
}

/* --- Sprite flashes for retaliation/control events --- */

@keyframes sprite-flash-retaliation {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 8px #ffb020) brightness(1.3); }
}
@keyframes sprite-flash-counter {
    0% { filter: none; }
    30% { filter: drop-shadow(0 0 10px #77ddff) brightness(1.5); }
    100% { filter: none; }
}
@keyframes sprite-flash-marked-consumed {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 10px #ff3030); }
}
@keyframes sprite-flash-stun {
    0%, 100% { filter: none; }
    50% { filter: saturate(0) brightness(1.2); }
}
@keyframes sprite-flash-pacify {
    0%, 100% { filter: none; }
    50% { filter: hue-rotate(60deg) saturate(0.5); }
}
@keyframes sprite-flash-retaliate-source {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 6px #ff7a00); }
}
@keyframes sprite-flash-active-cue {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 8px #ffd36a) brightness(1.25); }
}
@keyframes sprite-flash-shield-regen {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 9px #338cff) brightness(1.2); }
}
@keyframes sprite-flash-bulwark {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 10px #8eb0ff) brightness(1.25); }
}
@keyframes sprite-flash-taunt {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 8px #ff9a00) brightness(1.25); }
}
@keyframes sprite-flash-rage {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 10px #ff3030) brightness(1.3); }
}
@keyframes sprite-flash-overkill {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 10px #ff5a00) brightness(1.35); }
}

.sprite-flash-retaliation { animation: sprite-flash-retaliation 0.4s ease-out; }
.sprite-flash-counter { animation: sprite-flash-counter 0.5s ease-out; }
.sprite-flash-marked-consumed { animation: sprite-flash-marked-consumed 0.4s ease-out; }
.sprite-flash-stun { animation: sprite-flash-stun 0.6s ease-in-out; }
.sprite-flash-pacify { animation: sprite-flash-pacify 0.6s ease-in-out; }
.sprite-flash-retaliate-source { animation: sprite-flash-retaliate-source 0.3s ease-out; }
.sprite-flash-active-cue { animation: sprite-flash-active-cue 0.4s ease-out; }
.sprite-flash-shield-regen { animation: sprite-flash-shield-regen 0.45s ease-out; }
.sprite-flash-bulwark { animation: sprite-flash-bulwark 0.5s ease-out; }
.sprite-flash-taunt { animation: sprite-flash-taunt 0.5s ease-out; }
.sprite-flash-rage { animation: sprite-flash-rage 0.6s ease-out; }
.sprite-flash-overkill { animation: sprite-flash-overkill 0.45s ease-out; }

/* ========== STATUS PIPS ========== */

.status-pip-row {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 18;
    width: max-content;
}

.status-pip {
    position: relative;
    width: 18px;
    height: 18px;
    border: 1.5px solid #888;
    border-radius: 3px;
    background: rgba(22, 22, 28, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.pip-glyph {
    line-height: 1;
}

.pip-stacks {
    position: absolute;
    top: -5px;
    left: -5px;
    font-size: 9px;
    color: #fff;
    background: #222;
    border: 1px solid #666;
    border-radius: 2px;
    padding: 0 2px;
    line-height: 1;
}

.pip-rounds {
    position: absolute;
    bottom: -5px;
    right: -5px;
    font-size: 9px;
    color: #ffdd66;
    background: #222;
    border: 1px solid #666;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Category-based default pip coloring (overridden inline by status.color) */
.status-pip.pip-dot { border-color: #6fe66f; }
.status-pip.pip-control { border-color: #ffe866; }
.status-pip.pip-modifier { border-color: #88ccff; }
.status-pip.pip-consumable { border-color: #ff6060; }
.status-pip.pip-protection { border-color: #88ff88; }
.status-pip.pip-generic { border-color: #aaaaaa; }

.status-pip.pip-overflow {
    border-color: #666;
    font-size: 10px;
    color: #ccc;
}

/* ========== DEBUFF EFFECTS ========== */

/* Poison - green tint + subtle pulse */
.effect-poison {
    animation: poison-pulse 1s ease-in-out infinite;
}

@keyframes poison-pulse {
    0%, 100% { filter: hue-rotate(80deg) saturate(1.2); }
    50% { filter: hue-rotate(80deg) saturate(1.5) brightness(0.9); }
}

/* Burn - orange flicker */
.effect-burn {
    animation: burn-flicker 0.3s steps(2) infinite;
}

@keyframes burn-flicker {
    0%, 100% { filter: sepia(0.3) saturate(1.5) brightness(1.1); }
    50% { filter: sepia(0.5) saturate(2) brightness(1.2); }
}

/* Bleed - red tint */
.effect-bleed {
    filter: saturate(1.5) brightness(0.95);
    animation: bleed-drip 1.5s ease-in-out infinite;
}

@keyframes bleed-drip {
    0%, 100% { filter: saturate(1.5) brightness(0.95); }
    50% { filter: saturate(2) brightness(0.85) sepia(0.2); }
}

/* Slow - desaturated, darker */
.effect-slow {
    filter: saturate(0.5) brightness(0.8);
}

/* Weaken - faded look */
.effect-weaken {
    filter: brightness(0.7) contrast(0.9);
}

/* Vulnerable - red outline glow */
.effect-vulnerable {
    filter: drop-shadow(0 0 3px #f00) drop-shadow(0 0 6px #f00);
}

/* ========== BUFF EFFECTS ========== */

/* Regen - green glow pulse */
.effect-regen {
    animation: regen-glow 1.5s ease-in-out infinite;
}

@keyframes regen-glow {
    0%, 100% { filter: drop-shadow(0 0 4px #4f8); }
    50% { filter: drop-shadow(0 0 8px #4f8) brightness(1.1); }
}

/* Rage - red tint + shake */
.effect-rage {
    animation: rage-shake 0.15s steps(2) infinite;
    filter: saturate(1.5) sepia(0.2);
}

@keyframes rage-shake {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

/* Berserk - intense red + faster shake */
.effect-berserk {
    animation: berserk-shake 0.1s steps(2) infinite;
    filter: saturate(2) sepia(0.4) brightness(1.1);
}

@keyframes berserk-shake {
    0%, 100% { transform: translateX(0) scale(1.02); }
    50% { transform: translateX(-2px) scale(1.02); }
}

/* Fortify - blue tint */
.effect-fortify {
    filter: hue-rotate(180deg) saturate(0.8) brightness(1.1);
}

/* Haste - motion blur / afterimage */
.effect-haste {
    animation: haste-blur 0.2s linear infinite;
}

@keyframes haste-blur {
    0%, 100% { filter: blur(0); }
    50% { filter: blur(1px); }
}

/* Vampiric - purple glow */
.effect-vampiric {
    filter: hue-rotate(-30deg) saturate(1.3);
    animation: vampiric-pulse 2s ease-in-out infinite;
}

@keyframes vampiric-pulse {
    0%, 100% { filter: hue-rotate(-30deg) saturate(1.3) drop-shadow(0 0 4px #808); }
    50% { filter: hue-rotate(-30deg) saturate(1.5) drop-shadow(0 0 8px #a0a); }
}

/* ========== SHIELD EFFECTS ========== */

/* Shield - blue bubble */
.effect-shield {
    position: relative;
}

.effect-shield::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(100, 180, 255, 0.6);
    border-radius: 50%;
    animation: shield-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shield-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* Barrier - larger purple shield */
.effect-barrier::before {
    content: '';
    position: absolute;
    inset: -12px;
    border: 3px solid rgba(180, 100, 255, 0.5);
    border-radius: 50%;
    animation: barrier-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes barrier-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.08); opacity: 0.7; }
}

/* ========== SPECIAL EFFECTS ========== */

/* Thorns - spiky aura */
.effect-thorns {
    filter: drop-shadow(0 0 3px #4a4) drop-shadow(0 0 6px #282);
}

/* Execute - menacing red glow on low HP targets */
.effect-execute {
    filter: drop-shadow(0 0 4px #f44) brightness(1.1);
}

.enemy-barrier-host .summoned-barrier-placeholder {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 58px;
    height: 86px;
    transform: translateX(-50%);
    border: 3px solid rgba(219, 224, 231, 0.88);
    border-radius: 6px 6px 3px 3px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.18) 0 3px, transparent 3px 12px),
        linear-gradient(180deg, #6d7482 0%, #444a55 48%, #2f343d 100%);
    box-shadow:
        inset 0 0 0 2px rgba(20, 22, 28, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 10px 16px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 3;
}

.enemy-barrier-host .summoned-barrier-placeholder::before,
.enemy-barrier-host .summoned-barrier-placeholder::after {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    height: 4px;
    background: rgba(235, 238, 242, 0.8);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.enemy-barrier-host .summoned-barrier-placeholder::before {
    top: 23px;
}

.enemy-barrier-host .summoned-barrier-placeholder::after {
    top: 55px;
}


/* ============================================
   SECTION 11: COMBAT ENTITY STATES
   (moved from combat_processor.js COMBAT_STYLES)
   ============================================ */

.reviving {
    animation: revive-glow 1s ease-out;
}

.sturdy-proc {
    animation: sturdy-flash 0.5s ease-out;
}

.buffed {
    filter: brightness(1.2);
}

@keyframes haste-flash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5) hue-rotate(20deg); }
}

@keyframes revive-glow {
    0% { filter: brightness(2) saturate(0); }
    50% { filter: brightness(1.5) saturate(1.5); }
    100% { filter: brightness(1) saturate(1); }
}

@keyframes sturdy-flash {
    0%, 100% { filter: brightness(1); }
    25%, 75% { filter: brightness(2) sepia(1); }
}

/* ============================================
   SECTION 12: INTERVENTION FANFARE
   (moved from combat_processor.js COMBAT_STYLES)
   ============================================ */

.intervention-fanfare {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: linear-gradient(135deg, #4a0080, #800040);
    padding: 15px 30px;
    border-radius: 10px;
    border: 2px solid #ffaa00;
    color: white;
    font-size: 1.5em;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease-out;
    z-index: 1000;
    box-shadow: 0 0 30px rgba(255, 170, 0, 0.5);
}

.intervention-fanfare.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.intervention-fanfare .viewer-name {
    color: #ffdd00;
    font-weight: bold;
}

.intervention-fanfare .action-text {
    display: block;
    font-size: 0.8em;
    margin-top: 5px;
}