/* --- Power Over Rally (POR) Styles --- */

:root {
    --por-attack-color: #00ff88;
    /* Neon Green */
    --por-defense-color: #d500f9;
    /* Neon Purple */
    --por-cool-glow: 0 0 15px currentColor;
    --por-goofy-glow: 0 0 15px #ff9900;
    --por-incident-glow: 0 0 15px #ff0000;
}

/* --- Overlay Theme Overrides --- */

/* Base POR Mode: Generally Darker/Edgier */
#evolution-overlay.por-mode {
    background: radial-gradient(circle at center, rgba(20, 30, 20, 0.9) 0%, #000 100%);
}

/* ATTACK (Green) Theme */
#evolution-overlay.por-mode.por-attack {
    background: radial-gradient(circle at center, rgba(0, 50, 20, 0.9) 0%, #000 100%);
}

#evolution-overlay.por-mode.por-attack .evo-content {
    border-color: var(--por-attack-color);
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.3);
}

#evolution-overlay.por-mode.por-attack .evo-header {
    background: linear-gradient(to bottom, #fff 0%, var(--por-attack-color) 60%, #004422 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 10px var(--por-attack-color));
}

#evolution-overlay.por-mode.por-attack #btn-evo-shot {
    background: linear-gradient(90deg, var(--por-attack-color) 0%, #00cc6a 100%);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
}

/* DEFENSE (Purple) Theme */
#evolution-overlay.por-mode.por-defense {
    background: radial-gradient(circle at center, rgba(40, 0, 50, 0.9) 0%, #000 100%);
}

#evolution-overlay.por-mode.por-defense .evo-content {
    border-color: var(--por-defense-color);
    box-shadow: 0 0 40px rgba(213, 0, 249, 0.3);
}

#evolution-overlay.por-mode.por-defense .evo-header {
    background: linear-gradient(to bottom, #fff 0%, var(--por-defense-color) 60%, #4a0080 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 10px var(--por-defense-color));
}

#evolution-overlay.por-mode.por-defense #btn-evo-shot {
    background: linear-gradient(90deg, var(--por-defense-color) 0%, #aa00cc 100%);
    box-shadow: 0 0 20px rgba(213, 0, 249, 0.6);
}

/* --- Card Styles (In Result & Overlay) --- */

/* COOL */
.card.por-cool {
    border-color: #00ffff !important;
    background: linear-gradient(135deg, #004444 0%, #002222 100%) !important;
    color: #00ffff !important;
    box-shadow: 0 0 20px #00ffff !important;
    animation: pulseCool 2s infinite !important;
}

/* GOOFY */
.card.por-goofy {
    border-color: #ffaa00 !important;
    background: linear-gradient(135deg, #442200 0%, #221100 100%) !important;
    color: #ffaa00 !important;
    box-shadow: 0 0 20px #ffaa00 !important;
    animation: wobbleGoofy 1s infinite alternate !important;
}

/* INCIDENT */
.card.por-incident {
    border-color: #ff3333 !important;
    background: linear-gradient(135deg, #440000 0%, #220000 100%) !important;
    color: #ff3333 !important;
    box-shadow: 0 0 20px #ff3333 !important;
    animation: shakeIncident 0.2s infinite !important;
}

/* Animations */
@keyframes pulseCool {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.02);
        filter: brightness(1.3);
    }

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

@keyframes wobbleGoofy {
    0% {
        transform: rotate(-3deg) scale(0.95);
    }

    100% {
        transform: rotate(3deg) scale(1.05);
    }
}

@keyframes shakeIncident {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    25% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    50% {
        transform: translate(-2px, 0px) rotate(1deg);
    }

    75% {
        transform: translate(2px, 1px) rotate(-1deg);
    }

    100% {
        transform: translate(1px, -1px) rotate(0deg);
    }
}

/* Transform Animation (Flash Logic) */
/* Keyframes only handle Scale/Opacity */
@keyframes porScalePulse {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.15);
    }

    /* Peak at 100-200ms */
    100% {
        transform: scale(1);
    }
}

.por-transform-anim {
    animation: porScalePulse 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* Forced Whiteout Class (Toggled by JS) */
.por-flash-active {
    background: white !important;
    color: transparent !important;
    border-color: white !important;
    filter: brightness(10) drop-shadow(0 0 60px white) !important;
    z-index: 100 !important;
}

/* --- Description Border Colors by Type --- */

/* COOL (Cyan) */
#evolution-overlay.por-mode.por-cool .evo-description {
    border-left-color: #00ffff !important;
    background: rgba(0, 255, 255, 0.05);
}

/* GOOFY (Orange) */
#evolution-overlay.por-mode.por-goofy .evo-description {
    border-left-color: #ffaa00 !important;
    background: rgba(255, 170, 0, 0.05);
}

/* INCIDENT (Red) */
#evolution-overlay.por-mode.por-incident .evo-description {
    border-left-color: #ff3333 !important;
    background: rgba(255, 51, 51, 0.05);
}

/* --- POR Visual Effects (Flash & Slide) --- */

/* Fullscreen Effect Container */
#por-effect-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    /* Highest priority */
    display: none;
    /* Toggled */
    overflow: hidden;
}

#por-effect-container.active {
    display: block;
}

/* 1. Flash Layer */
#por-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    mix-blend-mode: overlay;
    /* or normal for harder flash */
}

/* Flash Animation */
.anim-flash-white {
    animation: flashWhite 0.8s ease-out forwards;
}

@keyframes flashWhite {
    0% {
        opacity: 1;
        background: white;
    }

    10% {
        opacity: 1;
        background: white;
    }

    100% {
        opacity: 0;
    }
}

/* 2. Sliding Text */
#por-scrolling-text {
    position: absolute;
    top: 50%;
    left: 100%;
    /* Start outside right */
    transform: translateY(-50%) skewX(-20deg);

    font-family: 'Inter', sans-serif;
    font-size: 12rem !important;
    font-weight: 900;
    font-style: italic;
    white-space: nowrap;
    padding-right: 30px;

    /* Gradient Energy Style */
    color: transparent;
    background: linear-gradient(135deg, #00ff88 0%, #ffffff 50%, #d500f9 100%);
    -webkit-background-clip: text;
    background-clip: text;

    /* Glow Effects */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 20px rgba(0, 255, 136, 0.4)) drop-shadow(0 0 30px rgba(213, 0, 249, 0.4));

    opacity: 1;
    will-change: transform, left;
}

/* Sliding Animation */
.anim-slide-text {
    animation: slideTextAcross 3.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes slideTextAcross {
    0% {
        left: 100%;
        opacity: 0;
        transform: translateY(-50%) scale(0.8) skewX(-30deg);
    }

    10% {
        opacity: 1;
        transform: translateY(-50%) scale(1.2) skewX(-25deg);
    }

    /* Shoot Through! */
    100% {
        left: -700%;
        /* Far Left Exit */
        transform: translateY(-50%) scale(1.5) skewX(-10deg);
        opacity: 1;
    }
}

/* Mobile responsive sizing */
@media (max-width: 600px) {
    #por-scrolling-text {
        font-size: 3rem;
    }
}