/* Illustrations partagées par les Mondes, l’arène et les tours d’épreuves. */
#screen-battle.scenic-battle, .screen[data-exploration-world], #screen-trials[data-trial-faction] { position: relative; isolation: isolate; }
.battle-scenery, .exploration-scenery {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, var(--battle-tint), #080b12 85%);
}
.battle-scenery-art, .exploration-scenery-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.battle-scenery::after, .exploration-scenery::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #050811b3, #05081112 20%, #05081124 65%, #050811d9),
    radial-gradient(ellipse at center, transparent 25%, #05081155 100%);
}
.scenic-battle .battle-header {
  flex: 0 0 auto;
  gap: 10px;
  min-height: 62px;
  padding: 10px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--battle-accent) 30%, transparent);
  color: #e6e0d6;
  text-shadow: 0 2px 5px #000;
}
.scenic-battle #battle-round, .scenic-battle #btn-speed { flex-shrink: 0; }
.scenic-battle #battle-vs {
  min-width: 0;
  max-width: 360px;
  color: var(--battle-accent);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.scenic-battle #btn-speed { background: #10141ce6; border-color: var(--battle-accent); }
.scenic-battle .battlefield {
  min-height: 0;
  gap: 10px;
  padding: 16px 5px 8px;
  justify-content: space-evenly;
}
.scenic-battle .battle-divider {
  flex: 0 0 auto;
  min-height: 24px;
  opacity: 0.85;
  color: var(--battle-accent);
  filter: drop-shadow(0 2px 4px #000);
}
.scenic-battle .battle-divider::before, .scenic-battle .battle-divider::after {
  background: linear-gradient(90deg, transparent, var(--battle-accent), transparent);
}
.scenic-battle .unit.card-unit .hero-card-compact { box-shadow: 0 5px 12px #000a; }
.scenic-battle .unit.card-unit .bars {
  padding: 3px 5px 4px;
  border-radius: 5px;
  background: #080c14dc;
  box-shadow: 0 2px 6px #0006;
}
.scenic-battle .battle-log {
  flex: 0 0 92px;
  color: #cdc7d7;
  background: #080c14e6;
  border: 1px solid color-mix(in srgb, var(--battle-accent) 25%, transparent);
}
.battle-atmosphere { position: absolute; inset: 0; overflow: hidden; }
.battle-atmosphere i {
  position: absolute;
  left: var(--x);
  top: -20px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--battle-accent);
  box-shadow: 0 0 7px currentColor;
  color: var(--battle-accent);
  opacity: 0;
  animation: battle-drift var(--duration) var(--delay) linear infinite paused;
}
.scenic-battle.active .battle-atmosphere i { animation-play-state: running; }
.battle-scenery[data-weather='embers'] i { animation-direction: reverse; background: #ffaf5c; }
.battle-scenery[data-weather='spores'] i { animation-direction: reverse; box-shadow: 0 0 10px #90efb8; }
.battle-scenery[data-weather='snow'] i { background: #e5f6ff; box-shadow: none; }
.battle-scenery[data-weather='rain'] i {
  width: 1px;
  height: 22px;
  border-radius: 0;
  background: linear-gradient(transparent, #c8d5ed99);
  box-shadow: none;
  animation-duration: 2.2s;
}
.battle-scenery[data-weather='crystal'] i { border-radius: 1px; box-shadow: 0 0 8px #e4d1ff; }
@keyframes battle-drift {
  0% { transform: translate3d(24px, 0, 0); opacity: 0; }
  12%, 80% { opacity: 0.45; }
  100% { transform: translate3d(-36px, 105dvh, 0); opacity: 0; }
}
@media (min-width: 700px) {
  .battle-scenery-art, .exploration-scenery-art {
    width: min(100%, 960px);
    left: 50%;
    transform: translateX(-50%);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  }
}
@media (max-height: 650px) {
  .scenic-battle .battle-header { min-height: 50px; padding: 5px 2px; }
  .scenic-battle #battle-vs { font-size: 0.75rem; }
  .scenic-battle .battlefield { padding: 6px 4px; gap: 3px; }
  .scenic-battle .battle-log { flex-basis: 70px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .scenic-battle.active .battle-atmosphere i { animation: none; }
}

/* Aperçu de chaque destination dans la liste des six Mondes. */
.world-destination {
  position: relative;
  isolation: isolate;
  background: var(--battle-tint);
  border-color: color-mix(in srgb, var(--battle-accent) 45%, #1a202b);
}
.world-destination-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  pointer-events: none;
}
.world-destination::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #070c14e0, #070c147a 65%, #070c1499),
    linear-gradient(0deg, #070c14cc, transparent 80%);
}
.world-destination .world-head { min-height: 130px; padding: 18px 12px; text-shadow: 0 2px 4px #000; }
.world-destination .world-copy b { color: var(--battle-accent); }
.world-destination .world-copy small { color: #d6d3dd; }
.world-destination.locked { opacity: 0.8; }
.world-destination.locked .world-destination-art { filter: saturate(0.65); }
.world-destination:has(.world-head:not(:disabled)):hover { border-color: var(--battle-accent); }
.world-destination .world-head:focus-visible { outline: 2px solid var(--battle-accent); outline-offset: -4px; border-radius: 12px; }

/* Dans un Monde : décor fixe, niveaux et sélection d'équipe défilants. */
.screen[data-exploration-world] { --muted: #bcb7c9; }
.screen[data-exploration-world] > .page-header {
  flex: 0 0 auto;
  background: linear-gradient(#080d17ed, #080d17a6);
  border-bottom: 1px solid color-mix(in srgb, var(--battle-accent) 30%, transparent);
}
.screen[data-exploration-world] > .page-header h2 { color: var(--battle-accent); text-shadow: 0 2px 5px #000; }
.screen[data-exploration-world] .worlds-list,
.screen[data-exploration-world] .worlds-select-body { min-height: 0; }
.screen[data-exploration-world] .worlds-back {
  padding: 8px 4px;
  color: var(--battle-accent);
  text-shadow: 0 2px 4px #000;
}
.screen[data-exploration-world] .world-detail { background: transparent; border: 0; box-shadow: none; }
.screen[data-exploration-world] .world-detail .world-head {
  min-height: 160px;
  align-items: end;
  padding: 28px 14px 14px;
  background: linear-gradient(180deg, #080d1710, #080d17cf);
  text-shadow: 0 2px 4px #000;
}
.screen[data-exploration-world] .world-detail .world-copy b { color: var(--battle-accent); }
.screen[data-exploration-world] .world-desc { padding: 12px 14px; margin-bottom: 12px; background: #080d17df; line-height: 1.55; }
.screen[data-exploration-world] .world-levels { gap: 8px; padding: 0 0 12px; }
.screen[data-exploration-world] .world-level { background: #0d1420e8; }
.screen[data-exploration-world] .world-level.done { opacity: 1; background: #10201fe8; }
.screen[data-exploration-world] .world-level.locked { opacity: 0.8; }
.screen[data-exploration-world] .world-next { display: block; padding: 12px; background: #080d17df; border-radius: 12px; }
.screen[data-exploration-world] .level-brief,
.screen[data-exploration-world] .formation {
  background: #0a111de6;
  border-color: color-mix(in srgb, var(--battle-accent) 35%, #1a202b);
}
.screen[data-exploration-world] .formation-row > small em { color: #a9a5b8; }
.screen[data-exploration-world] .formation-hint,
.screen[data-exploration-world] .hint { padding: 6px; border-radius: 6px; background: #080d17d9; }
.screen[data-exploration-world] > .select-footer { flex: 0 0 auto; background: #080d17ed; }

/* Accueil Exploration : le panorama reste visible avant de choisir un Monde. */
#screen-worlds[data-exploration-world='overview'] .exploration-scenery-art {
  width: 100%;
  left: 0;
  transform: none;
  mask-image: none;
  object-position: center 35%;
}
#screen-worlds[data-exploration-world='overview'] .exploration-scenery::after {
  background: linear-gradient(180deg, #06111970, #0611190a 18%, #06111940 55%, #061119ba),
    radial-gradient(ellipse at 50% 24%, transparent 18%, #06111950);
}
.worlds-overview-intro {
  min-height: clamp(104px, 22dvh, 190px);
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 5px;
  padding: 18px 14px;
  color: #fff0d5;
  text-shadow: 0 2px 5px #031018, 0 1px 14px #031018;
}
.worlds-overview-intro small { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.worlds-overview-intro p { font: 600 clamp(1.25rem, 5vw, 1.6rem) / 1.2 Georgia, serif; }
#screen-worlds[data-exploration-world='overview'] .worlds-hint {
  padding: 10px 12px;
  border-radius: 10px;
  background: #081321de;
  color: #d6d3dd;
  line-height: 1.5;
}
@media (max-height: 500px) {
  .worlds-overview-intro { min-height: 80px; padding-block: 12px; }
}

/* Les huit tours de faction partagent leur illustration avec le combat. */
.trial-destination {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100px;
  background: var(--battle-tint);
  border-color: color-mix(in srgb, var(--battle-accent) 45%, #1a202b);
}
.trial-destination-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  pointer-events: none;
}
.trial-destination::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #070c14db, #070c148c 65%, #070c14b3);
}
.trial-destination .tower-copy b { color: var(--battle-accent); text-shadow: 0 2px 4px #000; }
.trial-destination .tower-copy small { color: #d6d3dd; }
.trial-destination .tower-bonus { text-shadow: 0 2px 4px #000; }
.trial-destination:focus-visible { outline: 2px solid var(--battle-accent); outline-offset: -3px; }
#screen-trials[data-trial-faction] { --muted: #c0bccb; }
#screen-trials[data-trial-faction] > .page-header {
  flex: 0 0 auto;
  background: linear-gradient(#080d17ed, #080d17a6);
  border-bottom: 1px solid color-mix(in srgb, var(--battle-accent) 30%, transparent);
}
#screen-trials[data-trial-faction] > .page-header h2 { color: var(--battle-accent); text-shadow: 0 2px 5px #000; }
#screen-trials[data-trial-faction] > .event-body { min-height: 0; }
#screen-trials[data-trial-faction] > .event-body > * { flex-shrink: 0; }
#screen-trials[data-trial-faction] .event-panel { background: #0b111edb; box-shadow: 0 5px 18px #03060e40; }
#screen-trials[data-trial-faction] .hub-back {
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 8px;
  background: #090f1bdd;
  color: var(--battle-accent);
}
#screen-trials[data-trial-faction] .hub-back .btn,
#screen-trials[data-trial-faction] > .page-header .btn {
  background: #111724e8;
  border-color: color-mix(in srgb, var(--battle-accent) 65%, #17202f);
}