/* ============================================
   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 */
}

#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;
}

.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);
}

.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 1s ease-out forwards;
    pointer-events: none;
    z-index: 20;
}

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

/* ============================================
   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 {
    animation: fade-out 1.5s ease-out forwards;
}

.monster.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;
}

/* ========== 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);
}