html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: #050505;
}

.gpo-attack-page {
    width: 100%;
    min-height: 100vh;
    background: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gpo-attack-scene {
    position: relative;
    width: 100vw;
    max-width: 1600px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
    isolation: isolate;
}

.gpo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    user-select: none;
    pointer-events: none;
}

/*
   Água corrigida:
   - antes parecia uma faixa atravessando a tela
   - agora fica presa apenas nas laterais da imagem
   - movimento bem sutil, sem invadir a vila
*/
.gpo-water-shimmer {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    opacity: .18;
    mix-blend-mode: screen;
    filter: blur(1.5px);
    background:
        radial-gradient(ellipse at center, rgba(255,255,255,.24), rgba(255,255,255,.06) 38%, transparent 70%);
    animation: gpoWaterPulse 5.5s ease-in-out infinite;
}

.water-left-a {
    left: 1.5%;
    top: 43%;
    width: 18%;
    height: 29%;
    border-radius: 48%;
    transform: rotate(-14deg);
}

.water-left-b {
    left: 2%;
    top: 67%;
    width: 16%;
    height: 24%;
    border-radius: 48%;
    transform: rotate(-18deg);
    animation-delay: 1.8s;
    opacity: .14;
}

.water-right-a {
    right: 1%;
    top: 40%;
    width: 8%;
    height: 39%;
    border-radius: 48%;
    transform: rotate(8deg);
    animation-delay: 1s;
    opacity: .12;
}

@keyframes gpoWaterPulse {
    0% {
        transform: translateY(0) scale(1);
        opacity: .08;
    }
    45% {
        transform: translateY(5px) scale(1.04);
        opacity: .22;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: .08;
    }
}

.gpo-smoke {
    position: absolute;
    z-index: 4;
    width: 70px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210,210,210,.30), rgba(80,80,80,.10) 45%, transparent 75%);
    filter: blur(10px);
    opacity: .32;
    animation: gpoSmokeRise 8s ease-in-out infinite;
    pointer-events: none;
}

.smoke-1 { left: 39%; top: 38%; animation-delay: 0s; }
.smoke-2 { left: 68%; top: 34%; animation-delay: 1.7s; }
.smoke-3 { left: 74%; top: 52%; animation-delay: 3s; }

@keyframes gpoSmokeRise {
    0% { transform: translateY(25px) scale(.65); opacity: .05; }
    40% { opacity: .32; }
    100% { transform: translateY(-70px) scale(1.15); opacity: 0; }
}

.gpo-bird {
    position: absolute;
    z-index: 6;
    width: 18px;
    height: 8px;
    border-top: 2px solid rgba(255,255,255,.70);
    border-radius: 50%;
    opacity: .70;
    animation: gpoBirdFly 17s linear infinite;
    pointer-events: none;
}

.gpo-bird::after {
    content: "";
    position: absolute;
    right: -8px;
    top: -2px;
    width: 14px;
    height: 8px;
    border-top: 2px solid rgba(255,255,255,.70);
    border-radius: 50%;
    transform: rotate(18deg);
}

.bird-1 { left: -5%; top: 18%; animation-duration: 18s; }
.bird-2 { left: -12%; top: 27%; animation-duration: 23s; animation-delay: 4s; transform: scale(.75); }
.bird-3 { left: -8%; top: 12%; animation-duration: 20s; animation-delay: 8s; transform: scale(.6); }
.bird-4 { left: -15%; top: 34%; animation-duration: 26s; animation-delay: 12s; transform: scale(.55); }

@keyframes gpoBirdFly {
    0% { translate: -10vw 0; opacity: 0; }
    8% { opacity: .70; }
    100% { translate: 120vw -8vh; opacity: 0; }
}

.gpo-person {
    position: absolute;
    z-index: 8;
    width: 7px;
    height: 12px;
    border-radius: 45% 45% 35% 35%;
    background: linear-gradient(to bottom, rgba(230,180,85,.95) 0 28%, rgba(55,34,18,.95) 28% 100%);
    box-shadow:
        0 0 4px rgba(255,210,120,.22),
        0 3px 5px rgba(0,0,0,.35);
    transform-origin: center bottom;
    animation: gpoPersonWalk var(--duration) linear infinite;
    pointer-events: none;
}

.gpo-person::before {
    content: "";
    position: absolute;
    left: 2px;
    top: -3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(230,190,130,.95);
}

@keyframes gpoPersonWalk {
    0% {
        transform: translate(0, 0) scale(var(--scale)) rotate(-2deg);
        opacity: .12;
    }
    8% {
        opacity: .95;
    }
    50% {
        transform: translate(var(--move-x), var(--move-y)) scale(var(--scale)) rotate(2deg);
        opacity: .95;
    }
    92% {
        opacity: .95;
    }
    100% {
        transform: translate(calc(var(--move-x) * 2), calc(var(--move-y) * 2)) scale(var(--scale)) rotate(-2deg);
        opacity: .12;
    }
}

.gpo-attack-ui {
    position: absolute;
    left: 22px;
    bottom: 20px;
    z-index: 20;
    padding: 12px 16px;
    border: 1px solid rgba(212,175,55,.45);
    background: rgba(0,0,0,.55);
    color: #f5e4b8;
    font-family: Georgia, serif;
    border-radius: 8px;
    backdrop-filter: blur(3px);
}

.gpo-ui-title {
    font-size: 20px;
    font-weight: 700;
}

.gpo-ui-subtitle {
    font-size: 13px;
    opacity: .85;
    margin-top: 3px;
}

@media (max-width: 768px) {
    .gpo-attack-scene {
        width: 100vw;
        height: 100vh;
        aspect-ratio: auto;
    }

    .gpo-bg {
        object-position: center;
    }

    .gpo-attack-ui {
        left: 10px;
        bottom: 10px;
        transform: scale(.86);
        transform-origin: left bottom;
    }
}