/* Paintings establish the region; the native chapter stage carries the battle. */
.page-intro.opening-vista[data-world-region] {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(160px, .7fr);
  gap: 14px 24px;
  min-height: 180px;
  padding: 22px 28px;
}
.opening-vista[data-world-region] .arrival-copy { grid-column: 1; grid-row: 1 / span 2; max-width: none; }
.opening-vista[data-world-region] .opening-key-art { object-position: center 48%; opacity: 1; }
.opening-vista[data-world-region]::before {
  background: linear-gradient(90deg, #10262cf5, #10262ce8 35%, #10262c5c 62%, #10262c08 88%), linear-gradient(0deg, #0b202c9c, transparent 72%);
}
.opening-vista[data-world-region] .expedition-summary {
  grid-column: 2; grid-row: 1; position: static; justify-self: end; align-self: start; margin: 0;
  padding: 8px 12px; background: #10282bdd; border: 1px solid #c5cba34d;
}
.world-header-fallback { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.world-header-fallback > svg { display: block; width: 100%; height: 100%; }
.world-view-button {
  grid-column: 2; grid-row: 2; align-self: end; justify-self: end;
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 10px 16px; border: 1px solid #dfc58b9c; border-radius: 9px;
  background: #10282de8; color: #f7e8bf; font: 600 13px/1.4 system-ui, sans-serif;
  box-shadow: 0 5px 15px #07141b40;
}
.world-view-button:hover { background: #304339; border-color: #edce8b; }
.world-view-button:focus-visible, .world-landscape-close:focus-visible { outline: 3px solid #f7df9d; outline-offset: 4px; }
body[data-phase="camp"] .opening-vista[data-world-region] { min-height: 220px; }

/* Measure only the unchanged actor/camp surface. Receipts, enemy plans and
   playback controls below it no longer stretch the 960×440 chapter scene. */
body[data-campaign="true"] .arena > .arena-scenery {
  inset: 0 0 auto; height: var(--world-stage-height, 510px); opacity: 1;
}
body[data-campaign="true"] .arena .world-scenery > .world-illustration { width: 100%; height: 100%; margin-left: 0; }
body[data-campaign="true"] .arena .world-scenery::after {
  background: linear-gradient(180deg, #0d223b82 0, #10293412 20%, #10293408 46%, #1028306b 76%, #10262e 100%);
}
body[data-campaign="true"] .arena .world-landmark { opacity: .94; }
body[data-campaign="true"] .arena .world-landmark > .world-halo { opacity: .7; }
body[data-campaign="true"] .arena .combatants::before {
  background: radial-gradient(ellipse at 24% 86%, #d3dba214, transparent 48%), linear-gradient(0deg, #0d26308a, transparent 72%);
}
body[data-campaign="true"][data-phase="camp"] .arena .world-scenery::after {
  background: linear-gradient(180deg, #112c3d8a, #193b3c0a 30%, #102e3826 72%, #132d32 100%);
}
.arena .camp-vista-copy { padding-bottom: 14px; background: linear-gradient(180deg, #122b31ed, #122b31d9 78%, #122b3100); }
.arena .camp-illustrated-ground { height: 286px; }
.arena .camp-supplies, .arena .camp-vista-foot { background: #132d32; }

/* The full composition stays separate from game controls and never crops. */
.world-landscape-dialog {
  width: min(1120px, calc(100% - 40px)); max-width: none; max-height: calc(100dvh - 40px);
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  color: #f3ecd6; background: #0c2027; border: 1px solid #bca77599; border-radius: 18px;
  box-shadow: 0 28px 90px #020a12a6;
}
.world-landscape-dialog::backdrop { background: #04121ce6; }
.world-landscape-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-bottom: 1px solid #d2bb7c40; }
.world-landscape-heading h2 { font: 400 clamp(23px, 3vw, 32px)/1.3 Georgia, serif; color: #f7e6be; }
.world-landscape-close { flex: none; min-height: 48px; min-width: 72px; padding: 10px 15px; border: 1px solid #a8b5a766; border-radius: 9px; background: #1c353a; color: #f4e5bf; font: 600 14px/1.4 system-ui, sans-serif; }
.world-landscape-close:hover { border-color: #ead08d; background: #30483f; }
.world-landscape-figure { margin: 0; }
.world-landscape-stage { position: relative; width: 100%; aspect-ratio: 3 / 2; max-height: calc(100dvh - 200px); overflow: hidden; background: #07171e; }
.world-landscape-native, .world-landscape-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-landscape-native > svg { display: block; width: 100%; height: 100%; }
.world-landscape-native * { animation: none; }
.world-landscape-image { display: block; object-fit: contain; object-position: center; background: #07171e; }
.world-landscape-caption { padding: 17px 22px 20px; border-top: 1px solid #b7bda53b; color: #c7d5cf; font-size: 14px; line-height: 1.7; }
.world-header-fallback[hidden], .opening-key-art[hidden], .world-landscape-image[hidden] { display: none; }

@media (max-width: 640px) {
  .page-intro.opening-vista[data-world-region] { grid-template-columns: minmax(0, 1fr) auto; min-height: 168px; gap: 12px; padding: 18px; }
  .opening-vista[data-world-region] .arrival-copy { grid-column: 1 / -1; grid-row: 1; padding: 0; }
  .opening-vista[data-world-region] .arrival-copy h1 { max-width: 100%; }
  .opening-vista[data-world-region] .arrival-checkpoint { max-width: 100%; }
  .opening-vista[data-world-region] .expedition-summary { display: none; }
  .opening-vista[data-world-region] .opening-key-art { object-position: 63% center; }
  .opening-vista[data-world-region]::before { background: linear-gradient(90deg, #10262ceb, #10262cc9 48%, #10262c28), linear-gradient(0deg, #0b202c9c, transparent 72%); }
  .world-view-button { min-height: 44px; padding: 9px 13px; font-size: 12px; }
  body[data-phase="camp"] .opening-vista[data-world-region] { min-height: 220px; }
  .arena .camp-illustrated-ground { height: 260px; }
  .world-landscape-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 14px; }
  .world-landscape-heading { gap: 12px; padding: 13px 15px; }
  .world-landscape-caption { padding: 14px 16px 18px; font-size: 13px; }
  .world-landscape-stage { max-height: calc(100dvh - 190px); }
}
@media (prefers-reduced-motion: reduce) { .world-view-button, .world-landscape-close { transition: none; } }
html[data-motion="reduced"] .world-view-button, html[data-motion="reduced"] .world-landscape-close { transition: none; }