/* Word Expedition AAA Combat Polish Pass 2.
   Presentation only: no scoring, question, retry, mastery, or progression rules live here. */

.battle-stage[data-environment="forest"] {
  background:
    radial-gradient(circle at 18% 92%,rgba(93,151,93,.48),transparent 31%),
    radial-gradient(circle at 82% 14%,rgba(171,215,182,.12),transparent 18%),
    linear-gradient(165deg,#162d46,#274d59 62%,#315f59);
}
.battle-stage[data-environment="ruins"] {
  background:
    linear-gradient(90deg,transparent 0 7%,rgba(191,204,188,.10) 7% 9%,transparent 9% 28%,rgba(191,204,188,.08) 28% 31%,transparent 31%),
    radial-gradient(circle at 52% 110%,rgba(74,125,96,.55),transparent 42%),
    linear-gradient(165deg,#202d43,#3b4a52 62%,#44564e);
}
.battle-stage[data-environment="crystal"] {
  background:
    radial-gradient(ellipse at 76% 78%,rgba(124,216,235,.24),transparent 22%),
    radial-gradient(ellipse at 18% 88%,rgba(180,146,239,.18),transparent 25%),
    linear-gradient(165deg,#172845,#273d67 57%,#324b6f);
}
.battle-stage[data-environment="castle"] {
  background:
    radial-gradient(circle at 50% 15%,rgba(226,185,96,.16),transparent 25%),
    linear-gradient(90deg,rgba(214,189,134,.07) 1px,transparent 1px),
    linear-gradient(165deg,#1a233b,#352c4d 62%,#4b3655);
  background-size:auto,38px 38px,auto;
}

.battle-stage[data-environment="ruins"]::after,
.battle-stage[data-environment="crystal"]::after,
.battle-stage[data-environment="castle"]::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:auto 0 27px;
  height:58px;
  pointer-events:none;
  opacity:.45;
}
.battle-stage[data-environment="ruins"]::after {
  background:
    linear-gradient(100deg,transparent 0 12%,#132536 12% 16%,transparent 16% 33%,#182a39 33% 42%,transparent 42% 78%,#132536 78% 83%,transparent 83%),
    linear-gradient(0deg,#142735 0 7px,transparent 7px);
  clip-path:polygon(0 100%,0 70%,8% 72%,15% 20%,20% 70%,33% 69%,38% 36%,44% 68%,72% 70%,79% 13%,85% 69%,100% 70%,100% 100%);
}
.battle-stage[data-environment="crystal"]::after {
  background:linear-gradient(135deg,transparent 15%,rgba(129,225,238,.7) 16% 18%,transparent 19% 35%,rgba(186,154,243,.55) 36% 39%,transparent 40% 60%,rgba(123,210,236,.58) 61% 64%,transparent 65%);
  clip-path:polygon(0 100%,8% 58%,14% 100%,21% 35%,28% 100%,65% 100%,72% 42%,79% 100%,88% 22%,94% 100%,100% 67%,100% 100%);
}
.battle-stage[data-environment="castle"]::after {
  background:#151d31;
  clip-path:polygon(0 100%,0 68%,8% 68%,8% 31%,18% 31%,18% 68%,31% 68%,31% 44%,41% 44%,41% 68%,58% 68%,58% 35%,71% 35%,71% 68%,82% 68%,82% 25%,92% 25%,92% 68%,100% 68%,100% 100%);
}

/* Subtle scene parallax. The question card never moves. */
.battle-stage[data-state="ready"] .battle-scene { animation:aaa-scene-breathe 4.8s ease-in-out infinite; }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"]) .battle-scene { animation:aaa-camera-hit .24s cubic-bezier(.2,.75,.25,1) var(--contact) both; }
.battle-stage[data-state="counter"] .battle-scene { animation:aaa-camera-counter .32s ease-out .16s both; }
.battle-stage[data-state="victory"] .battle-scene { animation:aaa-camera-victory .62s ease-out var(--contact) both; }

/* Existing monsters gain a restrained idle personality pass. */
.battle-stage[data-state="ready"] .enemy-fighter { animation:aaa-monster-idle 3.2s ease-in-out infinite; }
.battle-stage[data-enemy="wisp"][data-state="ready"] .enemy-fighter { animation-name:aaa-wisp-idle; animation-duration:2.6s; }
.battle-stage[data-enemy="sentinel"][data-state="ready"] .enemy-fighter { animation-name:aaa-golem-idle; animation-duration:4.1s; }
.battle-stage[data-enemy="boss"][data-state="ready"] .enemy-fighter { animation-name:aaa-owl-idle; animation-duration:3.8s; }

/* Four deterministic new trail encounters. */
.monster-aaa { overflow:visible; filter:drop-shadow(0 8px 7px rgba(3,12,24,.28)); }
.monster-aaa .aaa-shadow { fill:rgba(2,10,18,.28); }
.monster-aaa .aaa-eye { fill:#10233a; }
.monster-aaa .aaa-mouth { fill:none; stroke:#10233a; stroke-width:2.5; stroke-linecap:round; }
.monster-aaa .damage-mark { fill:none; stroke:#fff2a3; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; filter:drop-shadow(0 0 4px rgba(255,240,139,.8)); }
.battle-stage[data-wear="1"] .monster-aaa .damage-1,
.battle-stage[data-wear="2"] .monster-aaa :is(.damage-1,.damage-2),
.battle-stage[data-wear="3"] .monster-aaa .damage-mark { opacity:.72; }
.battle-stage[data-wear="3"] .monster-aaa { filter:drop-shadow(0 7px 7px rgba(3,12,24,.25)) brightness(.92); }

.monster-mushroom .mush-cap { fill:#c96757; stroke:#3b2635; stroke-width:3; }
.monster-mushroom .mush-dot { fill:#f8e2bb; }
.monster-mushroom .mush-face { fill:#ecd7ae; stroke:#3b2635; stroke-width:3; }
.monster-mushroom .mush-shield { fill:#6f8e57; stroke:#293d37; stroke-width:3; }
.monster-mushroom .mush-sword { fill:#d8e2e0; stroke:#293d37; stroke-width:2; }

.monster-ink .ink-blob,.monster-ink .ink-drip { fill:#474375; stroke:#1c2446; stroke-width:3; }
.monster-ink .ink-eye { fill:#d8d8ff; stroke:#1c2446; stroke-width:2; }
.monster-ink .ink-smile { stroke:#d8d8ff; }

.monster-beetle .beetle-leg,.monster-beetle .beetle-antenna { fill:none; stroke:#432f2b; stroke-width:4; stroke-linecap:round; }
.monster-beetle .beetle-shell { fill:#a66c3e; stroke:#432f2b; stroke-width:3; }
.monster-beetle .beetle-plate { fill:none; stroke:#d8a55c; stroke-width:2.5; }
.monster-beetle .gear-ring { fill:#4f7280; stroke:#243c49; stroke-width:4; stroke-dasharray:4 3; }
.monster-beetle .gear-core { fill:#d5b66b; stroke:#432f2b; stroke-width:3; }
.monster-beetle .beetle-head { fill:#7a5136; stroke:#432f2b; stroke-width:3; }
.monster-beetle .beetle-eye { fill:#8fe6d5; stroke:#243c49; stroke-width:2; }

.monster-drake .drake-wing { fill:#7aa7d1; stroke:#27385e; stroke-width:3; }
.monster-drake .drake-body { fill:#5c8ab8; stroke:#27385e; stroke-width:3; }
.monster-drake .drake-head { fill:#78b5d0; stroke:#27385e; stroke-width:3; }
.monster-drake .drake-snout { fill:#8cc6d6; stroke:#27385e; stroke-width:3; }
.monster-drake .drake-eye { fill:#fff1a1; stroke:#27385e; stroke-width:2; }
.monster-drake .drake-tail { fill:none; stroke:#5c8ab8; stroke-width:8; stroke-linecap:round; }

.battle-stage[data-aaa-monster="mushroom"][data-state="ready"] .enemy-fighter { animation:aaa-mushroom-idle 2.7s ease-in-out infinite; }
.battle-stage[data-aaa-monster="ink"][data-state="ready"] .enemy-fighter { animation:aaa-ink-idle 2.2s ease-in-out infinite; }
.battle-stage[data-aaa-monster="beetle"][data-state="ready"] .enemy-fighter { animation:aaa-beetle-idle 2.8s steps(2,end) infinite; }
.battle-stage[data-aaa-monster="drake"][data-state="ready"] .enemy-fighter { animation:aaa-drake-idle 3.1s ease-in-out infinite; }

.battle-stage[data-aaa-monster="mushroom"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"]) .enemy-fighter { animation:aaa-mushroom-hit .28s ease-out var(--contact) forwards; }
.battle-stage[data-aaa-monster="ink"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"]) .enemy-fighter { animation:aaa-ink-hit .32s cubic-bezier(.2,.8,.2,1) var(--contact) forwards; }
.battle-stage[data-aaa-monster="beetle"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"]) .enemy-fighter { animation:aaa-beetle-hit .30s ease-out var(--contact) forwards; }
.battle-stage[data-aaa-monster="drake"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"]) .enemy-fighter { animation:aaa-drake-hit .30s ease-out var(--contact) forwards; }

.battle-stage[data-aaa-monster="mushroom"][data-state="counter"] .enemy-fighter { animation:aaa-mushroom-counter .48s ease; }
.battle-stage[data-aaa-monster="ink"][data-state="counter"] .enemy-fighter { animation:aaa-ink-counter .48s ease; }
.battle-stage[data-aaa-monster="beetle"][data-state="counter"] .enemy-fighter { animation:aaa-beetle-counter .48s cubic-bezier(.2,.7,.2,1); }
.battle-stage[data-aaa-monster="drake"][data-state="counter"] .enemy-fighter { animation:aaa-drake-counter .48s ease; }

/* Attack-family contact accents reinforce anticipation -> action -> impact -> recovery. */
.battle-stage .battle-scene::before { content:""; position:absolute; z-index:3; left:47%; top:44%; width:52%; height:34%; opacity:0; pointer-events:none; transform-origin:left center; }
.battle-stage[data-attack="slash"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .battle-scene::before { border-top:2px solid var(--effect); border-radius:50%; animation:aaa-contact-sweep .22s ease-out var(--contact) both; }
.battle-stage:is([data-attack="chop"],[data-attack="smash"]):is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .battle-scene::before { left:70%; top:21%; width:3px; height:62%; background:linear-gradient(var(--effect),transparent); animation:aaa-contact-drop .22s ease-out var(--contact) both; }
.battle-stage[data-attack="thrust"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .battle-scene::before { left:56%; top:56%; width:40%; height:2px; background:linear-gradient(90deg,transparent,var(--effect)); animation:aaa-contact-thrust .18s ease-out var(--contact) both; }
.battle-stage:is([data-attack="shoot"],[data-attack="cast"]):is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .battle-scene::before { left:78%; top:42%; width:24px; height:24px; border:2px solid var(--effect); border-radius:50%; animation:aaa-contact-ring .24s ease-out var(--contact) both; }

/* Boss framing: first entrance only; victory retains immediate learning completion. */
.battle-stage[data-boss-intro="true"] .enemy-fighter { animation:aaa-boss-intro .72s cubic-bezier(.16,.8,.28,1) both; }
.battle-stage[data-boss-intro="true"] .enemy-name { animation:aaa-boss-title .72s ease-out both; }
.battle-stage[data-enemy="boss"][data-state="victory"] { animation:aaa-boss-victory-stage .75s ease-out var(--contact) both; }

@keyframes aaa-scene-breathe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)} }
@keyframes aaa-camera-hit { 0%,100%{transform:none} 32%{transform:translateX(1.5px) scale(1.004)} 58%{transform:translateX(-1px)} }
@keyframes aaa-camera-counter { 0%,100%{transform:none} 40%{transform:translateX(-1.5px) scale(1.003)} }
@keyframes aaa-camera-victory { 0%{transform:none} 100%{transform:scale(.985) translateY(1px)} }
@keyframes aaa-monster-idle { 0%,100%{transform:none} 50%{transform:translateY(-2px) rotate(-1deg)} }
@keyframes aaa-wisp-idle { 0%,100%{transform:translateY(1px)} 50%{transform:translateY(-5px) translateX(2px)} }
@keyframes aaa-golem-idle { 0%,82%,100%{transform:none} 86%{transform:translateY(-1px)} 90%{transform:translateY(1px)} }
@keyframes aaa-owl-idle { 0%,100%{transform:none} 48%{transform:translateY(-2px)} 52%{transform:translateY(-2px) rotate(1deg)} }
@keyframes aaa-mushroom-idle { 0%,100%{transform:none} 50%{transform:translateY(-2px) rotate(1deg)} }
@keyframes aaa-ink-idle { 0%,100%{transform:scale(1,1)} 50%{transform:translateY(2px) scale(1.035,.965)} }
@keyframes aaa-beetle-idle { 0%,100%{transform:none} 50%{transform:translateX(1px) rotate(.7deg)} }
@keyframes aaa-drake-idle { 0%,100%{transform:translateY(1px)} 50%{transform:translateY(-3px) scale(1.01)} }
@keyframes aaa-mushroom-hit { 0%,100%{transform:none} 32%{transform:translateX(9px) rotate(8deg)} 60%{transform:translateX(2px) rotate(-3deg)} }
@keyframes aaa-ink-hit { 0%,100%{transform:none} 30%{transform:translateX(7px) scale(1.14,.78)} 62%{transform:translateX(-2px) scale(.94,1.08)} }
@keyframes aaa-beetle-hit { 0%,100%{transform:none} 20%{transform:translateX(6px) rotate(4deg)} 38%{transform:translateX(-4px) rotate(-3deg)} 56%{transform:translateX(3px) rotate(2deg)} }
@keyframes aaa-drake-hit { 0%,100%{transform:none} 32%{transform:translate(6px,-3px) rotate(6deg)} 68%{transform:translate(-2px,1px) rotate(-2deg)} }
@keyframes aaa-mushroom-counter { 0%,100%{transform:none} 28%{transform:translateX(-9px) rotate(-5deg)} 55%{transform:translateX(-27px) rotate(-9deg)} }
@keyframes aaa-ink-counter { 0%,100%{transform:none} 30%{transform:scale(.86,1.12)} 60%{transform:translateX(-20px) scale(1.15,.82)} }
@keyframes aaa-beetle-counter { 0%,100%{transform:none} 26%{transform:translateX(5px)} 64%{transform:translateX(-31px) rotate(-4deg)} }
@keyframes aaa-drake-counter { 0%,100%{transform:none} 30%{transform:translateY(-8px) rotate(4deg)} 62%{transform:translate(-20px,-3px) rotate(-5deg)} }
@keyframes aaa-contact-sweep { 0%{opacity:0;transform:rotate(-18deg) scaleX(.55)} 35%{opacity:.85} 100%{opacity:0;transform:rotate(18deg) scaleX(1.08)} }
@keyframes aaa-contact-drop { 0%{opacity:0;transform:translateY(-10px) scaleY(.5)} 35%{opacity:.85} 100%{opacity:0;transform:translateY(8px) scaleY(1.08)} }
@keyframes aaa-contact-thrust { 0%{opacity:0;transform:scaleX(.3)} 35%{opacity:.9} 100%{opacity:0;transform:scaleX(1.18)} }
@keyframes aaa-contact-ring { 0%{opacity:.8;transform:scale(.25)} 100%{opacity:0;transform:scale(1.45)} }
@keyframes aaa-boss-intro { 0%{opacity:0;transform:translateY(-13px) scale(.88)} 65%{opacity:1;transform:translateY(2px) scale(1.025)} 100%{transform:none} }
@keyframes aaa-boss-title { 0%{opacity:.35;letter-spacing:.16em} 100%{opacity:1;letter-spacing:.035em} }
@keyframes aaa-boss-victory-stage { 0%,100%{box-shadow:0 13px 30px rgba(18,36,58,.18)} 45%{box-shadow:0 0 0 2px rgba(244,189,85,.25),0 15px 34px rgba(18,36,58,.25)} }

@media (prefers-reduced-motion:reduce) {
  .battle-stage[data-state] .battle-scene,
  .battle-stage[data-state] .enemy-fighter,
  .battle-stage[data-state] .battle-scene::before,
  .battle-stage[data-boss-intro="true"] .enemy-name,
  .battle-stage[data-enemy="boss"][data-state="victory"] {
    animation:none!important;
    transform:none!important;
  }
}

@media (forced-colors:active) {
  .monster-aaa .aaa-body * { forced-color-adjust:auto; }
  .monster-aaa .damage-mark { stroke:CanvasText; filter:none; }
}