/* J-1006-9: one 1920×1080 scene, transform-scaled as a single picture.
   Width scale, except screens wider than 16:9 use height and black side bars.
   A short window does not shrink the 1920 picture; it scrolls.
   Header and scoreboard stay outside the scene. No will-change. */

#screen-title.land .land-fit,
#screen-title.land .land-scale,
#screen-title.land .land-scene {
  display: contents;
}

@media (min-width: 1101px) {
  html:has(#screen-title.land.active),
  body:has(#screen-title.land.active) {
    background: #000 !important;
    height: auto;
    min-height: 100%;
  }
  body:has(#screen-title.land.active)::before { content: none; }
  html:has(#screen-title.land.active),
  body:has(#screen-title.land.active) {
    overflow-x: clip;
  }
  .app:has(> #screen-title.land.active) {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 2rem;
  }
  /* Header is a full-width sibling of the scene. Live font sizes stay in
     landing-showdown.css. Absolute, so it scrolls away with the page. */
  .app:has(> #screen-title.land.active) > .topbar {
    position: absolute;
    top: 0.75rem;
    left: 0.625rem;
    right: 0.625rem;
    width: auto;
    max-width: none;
    margin: 0;
    transform: none;
    align-items: center;
    overflow: visible;
    z-index: 30;
  }
  .app:has(> #screen-title.land.active) > .topbar .topbar-actions { display: flex; }
  .app:has(> #screen-title.land.active) > .topbar .player-panel,
  .app:has(> #screen-title.land.active) > .topbar .developer-panel {
    z-index: 40;
  }
}
@media (min-width: 1101px) {
  /* J-1006-8: top-aligned. Do not center this in a locked viewport.
     Wide screens fill the height, so the only bars are on the sides.
     Taller screens stay full width and the page scrolls. */
  #screen-title.land .land-fit {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: var(--land-push, 0px);
    background: transparent;
    overflow: hidden;
  }
  #screen-title.land .land-scale {
    display: block;
    position: relative;
    flex: none;
    overflow: hidden;
  }
  #screen-title.land .land-scene {
    display: block;
    width: 1920px;
    height: 1080px;
    position: relative;
    transform-origin: 0 0;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(6,5,4,.80) 0%, rgba(6,5,4,.30) 26%, rgba(6,5,4,0) 44%, rgba(6,5,4,.12) 70%, rgba(10,8,7,.94) 96%, #0a0807 100%) center / 100% 100% no-repeat,
      radial-gradient(ellipse 85% 75% at 50% 50%, transparent 55%, rgba(0,0,0,.6) 100%) center / 100% 100% no-repeat,
      url("../assets/landing/hero-showdown-corridor-1280.webp?v=memfix3") center / 100% 100% no-repeat,
      #0a0807;
  }
  #screen-title.land .land-scene .mfx-light,
  #screen-title.land .land-scene .mfx-corridor {
    position: absolute !important;
    z-index: 1;
  }

  /* Same cast geometry as a real 1920×1080 window (warrior top 228,
     bottom 883). Do not pin the cards to the frame bottom. */
  #screen-title.land .land-scene .card.hero {
    display: grid;
    position: relative;
    z-index: 2;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 1560px;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    margin: 79px auto 0;
    padding: 10px 16px 40px;
    column-gap: 24px;
    --sd-art-h: 470px;
    --pp-drop: calc(var(--sd-art-h) * .03);
    grid-template-columns: minmax(0, 390px) minmax(0, 1fr) minmax(0, 390px);
    grid-template-areas:
      "title  title  title"
      "warr   intro  mage"
      "warr   theme  mage"
      "warr   bard   mage";
    grid-template-rows: auto auto auto auto;
    align-items: start;
    align-content: start;
  }
  #screen-title.land .land-scene .class-card {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: auto;
    margin: 0;
    /* J-81683: let the hall breathe above the cast, like the live landing. */
    transform: translateY(48px);
  }
  /* J-81707: lower only the bottom gilt/blue-dot corners with the two
     description plates; the top scene corners remain in their original spot. */
  #screen-title.land .land-scene > .card.hero.land-panel::after {
    background-position: top left, top right, left bottom -48px, right bottom -48px;
  }
  #screen-title.land .land-scene .land-title-main { font-size: 5.4rem; }
  #screen-title.land .land-scene .land-title-sub { font-size: 1.55rem; }
  /* The fixed 16:9 scene made this grid row inherit the tall cast track,
     unlike live. Keep the same centred pill directly under the blurb. */
  #screen-title.land .land-scene .theme-row { transform: translateY(-88px); }
  #screen-title.land .land-scene .bard-stage {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    align-self: end;
    justify-self: center;
    width: 540px;
    max-width: 100%;
    height: 230px;
    min-height: 230px;
    margin: 12px 0 16px;
    /* J-81710: extra 16px cancels the stage's bottom margin so the Bard
       and scroll meet the gold plate. Plates and corner flourishes stay at 48px. */
    transform: translateY(64px);
  }

  #screen-title.land .scoreboard-shell,
  #screen-title.land #tt-museum,
  #screen-title.land #btn-howto,
  #screen-title.land .foot-note {
    position: relative;
    z-index: 3;
    width: min(1200px, calc(100% - 2rem));
    margin-left: auto;
    margin-right: auto;
  }
  /* The first view is the 16:9 hall only. How to play sits above the boards. */
  #screen-title.land #btn-howto { display: block; margin-top: calc(32px * var(--land-scale, 1)); }
  #screen-title.land .scoreboard-shell { margin-top: 16px; }
  #screen-title.land .foot-note { text-align: center; }
}

/* Phones and tablets: the scene wrappers are display:contents, but child
   selectors in the live sheet still look for a direct .card.hero. Repeat the
   stacked grid here so the hero art keeps its height. */
@media (max-width: 1100px) {
  #screen-title.land .card.hero {
    display: grid;
    --sd-art-h: clamp(168px, 28vw, 250px);
    --pp-drop: calc(var(--sd-art-h) * .03);
  }
}
@media (min-width: 701px) and (max-width: 1100px) {
  #screen-title.land .card.hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "title title"
      "intro intro"
      "theme theme"
      "warr mage"
      "bard bard";
    grid-template-rows: auto;
    column-gap: 12px;
  }
}
@media (max-width: 700px) {
  #screen-title.land .card.hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 8px;
    grid-template-areas:
      "title title"
      "intro intro"
      "theme theme"
      "warr mage"
      "bard bard";
    grid-template-rows: auto;
    padding: 4px 0 30px;
    --sd-art-h: 168px;
    --pp-drop: calc(var(--sd-art-h) * .03);
  }
}