/* Opponent Action Indicators CSS */

/* --- Opponent Card Play Indicator --- */
.opponent-card-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.opponent-card-play-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.6) 0%, rgba(255, 165, 0, 0) 70%);
    border-radius: 8px;
    animation: opponent-card-play-pulse 1s ease-out forwards;
    z-index: 1001;
}

@keyframes opponent-card-play-pulse {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

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

    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

/* --- Opponent Targeting Indicator --- */
.opponent-targeting-arrow {
    position: absolute;
    height: 6px;
    /* Thicker than regular arrows */
    background-color: #ff7700;
    /* Distinct orange color for opponent */
    border-radius: 3px;
    transform-origin: center left;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(255, 119, 0, 0.7);
    /* Glow effect */
    animation: opponent-targeting-pulse 1.5s infinite;
}

.opponent-targeting-arrow::after {
    content: '';
    position: absolute;
    right: -8px;
    top: -7px;
    width: 0;
    height: 0;
    border-left: 12px solid #ff7700;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

@keyframes opponent-targeting-pulse {

    0%,
    100% {
        opacity: 0.8;
        box-shadow: 0 0 8px rgba(255, 119, 0, 0.7);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(255, 119, 0, 0.9);
    }
}

/* --- Opponent Attack Indicator --- */
.opponent-attack-effect {
    position: absolute;
    width: 25px;
    /* Larger than regular attack effects */
    height: 6px;
    /* Thicker than regular attack effects */
    background-color: #ff3300;
    /* Bright red for opponent attacks */
    border-radius: 3px;
    transform-origin: center left;
    opacity: 0;
    animation: opponent-attack-travel 0.5s linear forwards;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(255, 51, 0, 0.8);
    /* Stronger glow */
}

@keyframes opponent-attack-travel {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--angle, 0deg)) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translate(var(--end-x, 0px), var(--end-y, 0px)) rotate(var(--angle, 0deg)) scale(1.2);
    }
}

/* --- Opponent Phase Change Indicator --- */
/* Uses compound selector for sufficient specificity over base .phase-announcement */
#screen-battle .phase-announcement.opponent-phase {
    background-color: rgba(255, 119, 0, 0.85);
    border: 2px solid #ffcc00;
    color: white;
    font-size: 1.5em;
    padding: 15px 30px;
    box-shadow: 0 0 20px rgba(255, 119, 0, 0.6);
}

/* Add a distinct icon for opponent phase changes */
.phase-announcement.opponent-phase::before {
    content: '';
    /* Eye SVG icon to indicate "opponent's turn" */
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z' fill='none' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='3.5' fill='%23c9a84c' opacity='0.3' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23c9a84c'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 8px;
}

/* --- Opponent Action Notification --- */
.opponent-action-notification {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    border-left: 4px solid #ff7700;
    font-size: 1.2em;
    z-index: 2000;
    pointer-events: none;
    animation: notification-fade 2.5s ease-in-out forwards;
    max-width: 80%;
    text-align: center;
}

@keyframes notification-fade {
    0% {
        opacity: 0;
        transform: translate(-50%, -20px);
    }

    15% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    85% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
}

/* --- Opponent Card Highlight --- */
/* Uses compound selector for sufficient specificity over base card styles */
#screen-battle .opponent-card-highlight {
    box-shadow: 0 0 15px 5px rgba(255, 119, 0, 0.7);
    animation: opponent-card-highlight 2s infinite;
}

@keyframes opponent-card-highlight {

    0%,
    100% {
        box-shadow: 0 0 15px 5px rgba(255, 119, 0, 0.7);
    }

    50% {
        box-shadow: 0 0 20px 8px rgba(255, 119, 0, 0.9);
    }
}

/* --- Opponent Action Text Notification --- */
.opponent-text-notification {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9em;
    z-index: 1000;
    pointer-events: none;
    animation: text-notification-fade 2s ease-out forwards;
    white-space: nowrap;
    border-left: 3px solid #ff7700;
}

@keyframes text-notification-fade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    15% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-5px);
    }
}