/* Three original illustrated regions; ambient motion stays behind the combat. */
body[data-campaign="true"] {
  --world-accent: #d6dfbd;
  --world-shadow: #142b34;
  background: radial-gradient(ellipse 72% 36% at 50% 0, #29403e 0, transparent 78%), var(--bg);
}
body[data-campaign="true"][data-act="1"] {
  --world-accent: #c1e0db;
  --world-shadow: #1c3448;
  background: radial-gradient(ellipse 78% 42% at 50% 0, #244354 0, transparent 78%), var(--bg);
}
body[data-campaign="true"][data-act="2"] {
  --world-accent: #dfd0e6;
  --world-shadow: #282b48;
  background: radial-gradient(ellipse 78% 42% at 50% 0, #3a3355 0, transparent 78%), var(--bg);
}
body[data-campaign="true"] .arena-scenery > :not(.world-scenery):not(.world-particles) { display: none; }
.world-scenery {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .88;
}
.world-scenery > .world-illustration { width: 100%; height: 100%; display: block; }
.world-scenery::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0e1b28bb 0, #11213047 22%, #0c1b2730 44%, #0c1b2799 69%, #0c1b29ed 100%);
  pointer-events: none;
}
body[data-campaign="true"] .arena { background: var(--world-shadow); }
body[data-campaign="true"] .arena .arena-top { background: linear-gradient(180deg, #101e278c, #101e2700); }
body[data-campaign="true"] .arena .fighter-info { filter: drop-shadow(0 2px 3px #07111dc2); }
body[data-campaign="true"] .arena .fighter-meta { text-shadow: 0 1px 5px #07111d; }
body[data-campaign="true"] .arena .stage-member { background: linear-gradient(180deg, #13263100 26%, #101e29a3 100%); }
body[data-campaign="true"] .arena .stage-member.is-selected { background: linear-gradient(180deg, #14273000 20%, #899d703a 100%); }
body[data-campaign="true"] .arena .stage-member.is-acting { background: linear-gradient(180deg, #f5edbe09, #a6c29b48); }
body[data-campaign="true"] .arena[data-stage="2"] #enemy-art img,
body[data-campaign="true"] .arena[data-stage="3"] #enemy-art img { filter: drop-shadow(0 8px 4px #0003); }
body[data-campaign="true"] #enemy-art { isolation: isolate; }
body[data-campaign="true"] #enemy-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 92%;
  height: 77%;
  left: 4%;
  top: 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d7dabd17 0, #9dbac412 44%, transparent 71%);
  pointer-events: none;
}
body[data-campaign="true"][data-chapter="4"] #enemy-art::before { background: radial-gradient(ellipse, #f3a67b26, transparent 72%); }
body[data-campaign="true"][data-chapter="9"] #enemy-art::before { background: radial-gradient(ellipse, #e9d4a730, transparent 72%); }
body[data-campaign="true"][data-chapter="14"] #enemy-art::before { background: radial-gradient(ellipse, #d0b6e138, #ddc29a16 48%, transparent 75%); animation: fb-world-final-aura 5s ease-in-out infinite; }
.story-landscape, .chapter-scene { position: relative; isolation: isolate; overflow: hidden; }
.story-landscape { border-radius: 14px; border: 1px solid #acbbc23b; background: #1c3144; }
.story-landscape > .world-illustration, .story-art > .world-illustration { display: block; width: 100%; height: 100%; min-height: 170px; }
.story-landscape .world-landmark, .story-art .world-landmark { filter: drop-shadow(0 5px 7px #10233542); }
.story-landscape .world-illustration, .story-art .world-illustration { transform: scale(1.015); transform-origin: center; }
.world-motif { display: block; width: 24px; height: 24px; flex: none; }
.world-spark { animation: fb-world-star 6s ease-in-out infinite; }
.world-particle { animation: fb-world-drift 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.world-halo { animation: fb-world-glow 7s ease-in-out infinite; }
.world-cloud { animation: fb-world-cloud 28s ease-in-out infinite; }
.world-water { animation: fb-world-water 8s ease-in-out infinite; }
.world-lantern { animation: fb-world-lantern 7s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
.world-ripple { animation: fb-world-glow 4s ease-in-out infinite; }
.world-beacon { animation: fb-world-beacon 12s ease-in-out infinite; }
.world-lightning { animation: fb-world-lightning 13s ease-in-out infinite; }
.world-threads { animation: fb-world-glow 6s ease-in-out infinite; }
/* Keep only a few ambient elements moving on the interactive battlefield.
   The illustrated scene remains intact; foreground actions get the attention. */
.world-scenery .world-spark, .world-scenery .world-cloud,
.world-scenery .world-particle:nth-child(n+6) { animation: none; }
body[data-phase="playback"] .world-scenery *,
body:has(dialog[open]) .world-scenery * { animation-play-state: paused !important; }
@keyframes fb-world-star { 0%, 100% { opacity: .26; } 50% { opacity: .8; } }
@keyframes fb-world-drift { 0%, 100% { transform: translate(0, 0); opacity: .46; } 50% { transform: translate(var(--particle-drift, 8px), -9px); opacity: .9; } }
@keyframes fb-world-glow { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@keyframes fb-world-cloud { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(13px); } }
@keyframes fb-world-water { 0%, 100% { transform: translateX(0); opacity: .24; } 50% { transform: translateX(6px); opacity: .5; } }
@keyframes fb-world-lantern { 0%, 100% { transform: rotate(-1.2deg); opacity: .82; } 50% { transform: rotate(1.2deg); opacity: 1; } }
@keyframes fb-world-beacon { 0%, 100% { opacity: .07; } 50% { opacity: .17; } }
@keyframes fb-world-lightning { 0%, 70%, 100% { opacity: .12; } 78%, 86% { opacity: .55; } }
@keyframes fb-world-final-aura { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@media (max-width: 560px) {
  .world-scenery > .world-illustration { width: 118%; max-width: none; margin-left: -9%; }
  .world-scenery::after { background: linear-gradient(180deg, #0d1b29ca, #101f2b48 28%, #10202b50 50%, #0c1b29ed 100%); }
  .story-landscape > .world-illustration, .story-art > .world-illustration { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-illustration *, body[data-campaign="true"] #enemy-art::before { animation: none !important; }
}
html[data-motion="reduced"] .world-illustration *,
html[data-motion="reduced"] body[data-campaign="true"] #enemy-art::before { animation: none !important; }