.mon-area.vq-battle-stage {
    position: relative;
    width: 100%;
    min-height: 310px;
    display: grid;
    place-items: end center;
    overflow: hidden;
    isolation: isolate;
    padding: 18px 0 12px;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(239, 246, 241, .08), rgba(17, 48, 46, .12)),
        url('./assets/story/sun-engine-map.jpg') center 58% / cover no-repeat;
    box-shadow: 0 18px 42px rgba(23, 43, 48, .16);
}

.mon-area.vq-battle-stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(21, 49, 42, .5) 100%);
    pointer-events: none;
}

.mon-area.vq-battle-stage::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 9px;
    width: min(280px, 60%);
    height: 32px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(18, 42, 37, .35);
    filter: blur(7px);
    pointer-events: none;
}

.vq-monster {
    --monster-accent: #3e8a69;
    position: relative;
    z-index: 2;
    width: clamp(224px, 40vw, 300px);
    aspect-ratio: 1;
    transform-origin: 50% 88%;
    animation: vqMonsterIdle 3.4s ease-in-out infinite;
    filter: drop-shadow(0 18px 12px rgba(11, 31, 29, .34));
    will-change: transform, filter;
}

.vq-monster-sprite {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('./assets/rpg/monster-atlas.png');
    background-size: 300% 200%;
    background-position: var(--atlas-x) var(--atlas-y);
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    filter: brightness(1.16) saturate(1.08) contrast(1.04);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 54%, rgba(0,0,0,.9) 66%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000 54%, rgba(0,0,0,.9) 66%, transparent 78%);
}

.vq-monster.is-hurt { animation: vqMonsterHurt .5s ease both; }
.vq-monster.is-attacking { animation: vqMonsterAttack .7s cubic-bezier(.18,.72,.24,1) both; }
.vq-monster.is-enraged { filter: drop-shadow(0 18px 12px rgba(11,31,29,.34)) drop-shadow(0 0 18px color-mix(in srgb, var(--monster-accent) 70%, transparent)); }
.vq-monster.is-defeated { animation: vqMonsterDefeat .82s cubic-bezier(.4,0,.7,1) both; }

.vq-battle-impact {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 98px;
    width: 100px;
    height: 100px;
    transform: translateX(-50%);
    border: 4px solid rgba(255, 246, 189, .9);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(255, 220, 102, .8);
    pointer-events: none;
    animation: vqBattleImpact .55s ease-out both;
}

.vq-battle-impact.is-monster-attack { border-color: color-mix(in srgb, var(--primary) 75%, #fff); }

@keyframes vqMonsterIdle {
    0%, 100% { transform: translateY(0) rotate(-.35deg); }
    50% { transform: translateY(-7px) rotate(.35deg); }
}
@keyframes vqMonsterHurt {
    0% { transform: translateX(0); filter: brightness(1); }
    22% { transform: translateX(-18px) rotate(-4deg); filter: brightness(1.7) saturate(.5); }
    48% { transform: translateX(12px) rotate(3deg); }
    72% { transform: translateX(-5px); }
    100% { transform: translateX(0); filter: brightness(1); }
}
@keyframes vqMonsterAttack {
    0% { transform: translate(0, 0) scale(1); }
    40% { transform: translateY(-9px) scale(.94, 1.05); }
    68% { transform: translate(-20px, 14px) scale(1.09, .95); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes vqMonsterDefeat {
    0% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
    45% { opacity: 1; transform: translateY(-12px) rotate(-4deg) scale(1.03); }
    100% { opacity: 0; transform: translateY(48px) rotate(8deg) scale(.72); filter: grayscale(1); }
}
@keyframes vqBattleImpact {
    0% { opacity: 0; transform: translateX(-50%) scale(.3); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) scale(1.55); }
}

html[data-theme="light"] .mon-area.vq-battle-stage {
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(231,245,237,.08)),
        url('./assets/story/sun-engine-map.jpg') center 58% / cover no-repeat;
}

@media (max-width: 600px) {
    .mon-area.vq-battle-stage { min-height: 260px; }
    .vq-monster { width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
    .vq-monster { animation: none !important; }
}