/* ============================================================
   DUAL-VIDEO + SHOWCASE-BANNER LAYOUT  (v2, 20260628)
   Loaded LAST so it overrides selector.css / split-screen.css.

   Page body is a 3-row grid (header / main / dock) from selector.css.
   This file restyles the MAIN row (.selector-layout).

   LANDSCAPE:  [ all 15 tiles | paired videos (title | preview) | showcase ]
   PORTRAIT :  [ paired videos (title / preview, stacked) | showcase strip ]
               with the 15 tiles in a band below, then the dock.
   Both paired video panes are equal-sized and symmetric in both orientations.
   ============================================================ */

/* ===================== LANDSCAPE (default) ===================== */

/* 3 columns: promo | stage (two game videos) | showcase banner */
.selector-layout-v2 {
  grid-template-columns: minmax(200px, 19vw) minmax(320px, 1fr) minmax(150px, 16vw);
  gap: clamp(7px, 1vw, 14px);
  padding: clamp(7px, 1vw, 14px);
  align-items: stretch;
}

/* Promo image (promo_portrait.png) in the left column. */
.selector-layout-v2 .promo-banner {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 2px solid rgba(0, 183, 255, .65);
  background:
    radial-gradient(circle at 50% 40%, rgba(0, 183, 255, .16), transparent 46%),
    linear-gradient(135deg, #090a0e, #121525);
  box-shadow: 0 0 24px rgba(0, 183, 255, .24), inset 0 0 30px rgba(0, 183, 255, .08);
  z-index: 2;
}
.selector-layout-v2 .promo-picture,
.selector-layout-v2 .promo-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.selector-layout-v2 .promo-banner img {
  object-fit: fill;
  background: #07080d;
}

/* Center stage is just a positioning context for the dual screen. */
.selector-layout-v2 .active-stage {
  grid-column: 2;
  grid-row: 1;
  display: block;
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Two equal video panes, side by side in landscape. */
.dual-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: clamp(6px, 0.8vw, 12px);
  isolation: isolate;
}

.dual-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(216, 255, 55, .55);
  background: #10121a;
  box-shadow: 0 0 30px rgba(115, 86, 255, .18);
}
.dual-pane-preview { border-color: rgba(0, 183, 255, .55); }

/* "Game Preview Coming Soon" placeholder shown when the Xb video is missing.
   Fills the bottom pane; hidden via [hidden] when the Xb file is available. */
.coming-soon {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 183, 255, .14), transparent 55%),
    linear-gradient(135deg, #0a0c12, #121525);
}
.coming-soon[hidden] { display: none; }
.coming-soon p {
  margin: 0;
  color: rgba(0, 183, 255, .9);
  font-weight: 950;
  font-size: clamp(9px, 1.1vw, 12px);
  letter-spacing: .22em;
}
.coming-soon h2 {
  margin: 0;
  color: #eef2ff;
  font-weight: 950;
  font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing: -.02em;
  line-height: .95;
}

.dual-pane video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: transform .3s;
  background: #07080d;
}
.dual-pane video.switching { transform: scale(1.02); }

/* Shared overlays over the whole dual-screen. */
.dual-screen .stage-shade {
  display: none;
}
.dual-screen .active-copy {
  position: absolute; z-index: 4;
  left: clamp(14px, 2.4vw, 36px);
  right: clamp(14px, 2.4vw, 36px);
  bottom: clamp(12px, 2.6vh, 30px);
}
.dual-screen .active-copy p { margin: 0 0 5px; color: var(--acid); font-weight: 950; font-size: 10px; letter-spacing: .2em; text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.7); }
.dual-screen .active-copy h1 { margin: 0; font-size: clamp(26px, 3.4vw, 56px); line-height: .9; letter-spacing: -.05em; text-shadow: 0 2px 6px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.8); }
.dual-screen .active-copy span { display: block; margin-top: 8px; color: #e8e9ee; font-size: 12px; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.dual-screen .stage-number {
  position: absolute; z-index: 4; right: 14px; top: 14px;
  background: rgba(5,6,10,.85); border: 1px solid var(--line);
  padding: 8px 10px; font: 700 11px monospace; color: var(--acid);
}

/* East showcase banner (looping Video.mp4). Tall in landscape. */
.showcase-banner {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 2px solid var(--acid);
  background: #090a0e;
  box-shadow: 0 0 20px rgba(216, 255, 55, .3);
}
.showcase-banner .showcase-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Landscape, short screens. */
@media (max-height: 500px) and (orientation: landscape) {
  .selector-layout-v2 {
    grid-template-columns: minmax(170px, 18vw) minmax(0, 1fr) minmax(125px, 15vw);
    padding: 5px; gap: 5px;
  }
  .dual-screen { gap: 6px; }
  .dual-screen .active-copy { bottom: 10px; left: 14px; }
  .dual-screen .active-copy h1 { font-size: 30px; }
  .dual-screen .active-copy span { display: none; }
}

/* ===================== PORTRAIT ===================== */
@media (orientation: portrait) {
  /* SELF-CONTAINED portrait layout. !important on the load-bearing properties
     so legacy stylesheets (selector.css / split-screen.css / layout-fix.css,
     which still carry rules for an older HTML structure) cannot interfere.
     Layout: [ two SQUARE videos stacked | wider Video.mp4 strip ] on top,
     promo banner full-width below. */
  .selector-layout-v2 {
    grid-template-columns: minmax(0, 1fr) clamp(150px, 40vw, 240px) !important;
    grid-template-rows: minmax(0, 1fr) clamp(118px, 30dvh, 210px) !important;
    column-gap: 4px !important;
    row-gap: 5px !important;
    padding: 5px 4px max(12px, calc(env(safe-area-inset-bottom) + 6px)) !important;
  }

  .selector-layout-v2 .active-stage {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Wider vertical showcase strip (Video.mp4) on the right. */
  .selector-layout-v2 .showcase-banner {
    grid-column: 2 !important;
    grid-row: 1 !important;
    border-width: 1px;
  }
  /* Video.mp4 fills its container in portrait, even if proportions change. */
  .selector-layout-v2 .showcase-banner .showcase-video {
    object-fit: fill !important;
  }

  .selector-layout-v2 .promo-banner {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    border-width: 1px;
    min-height: 0;
  }
  .selector-layout-v2 .promo-picture { inset: clamp(4px, 1.3vw, 8px); }
  .selector-layout-v2 .promo-banner img { object-fit: contain; object-position: center center; }

  /* Two SQUARE video panes stacked vertically. The dual-screen is a flex
     column with a real height; each pane's height is derived from its width
     via aspect-ratio 1/1, then capped to half the column height so both fit. */
  .selector-layout-v2 .dual-screen {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  .selector-layout-v2 .dual-screen .dual-pane {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .selector-layout-v2 .dual-screen .dual-pane video { object-fit: cover; }

  .dual-screen .active-copy { left: 10px; right: 8px; bottom: 10px; }
  .dual-screen .active-copy h1 { font-size: clamp(18px, 5vw, 32px); }
  .dual-screen .active-copy span { display: none; }
  .dual-screen .stage-number { top: 6px; right: 6px; padding: 6px; font-size: 9px; }
}

/* ===================== SOUND TOGGLE BUTTON ===================== */
.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #151720;
  color: #fff;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1;
}
.sound-toggle:hover,
.sound-toggle:focus-visible { border-color: var(--acid); outline: none; }
/* Default = muted: show the muted icon, hide the on icon. */
.sound-toggle .sound-on { display: none; }
.sound-toggle .sound-off { display: inline; }
.sound-toggle[aria-pressed="true"] .sound-on { display: inline; }
.sound-toggle[aria-pressed="true"] .sound-off { display: none; }
.sound-toggle[aria-pressed="true"] { border-color: var(--acid); color: var(--acid); }
/* Keep the button and RANKINGS together at the top-right of the header. */
.top-actions { display: flex; align-items: center; gap: 8px; }

/* ===================== BOTTOM AD / MESSAGE BANNER ===================== */
/* Occupies the body's 3rd grid row (already reserved). Bottom-center text that
   swaps between up to 3 messages every 5s. Hidden entirely when no messages. */
.ad-banner {
  grid-row: 3;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px clamp(10px, 3vw, 40px);
  background: #0c0d13;
  border-top: 1px solid var(--line);
  overflow: hidden;
  z-index: 20;
}
.ad-banner:empty,
.ad-banner.is-empty { display: none; }
.ad-banner-track {
  max-width: 100%;
  text-align: center;
  color: var(--acid);
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .35s ease;
  /* font-size and display are set by JS (auto-fit). Fallback if JS doesn't run: */
  font-size: clamp(11px, 1.6vw, 18px);
}
.ad-banner-track.fade { opacity: 0; }

@media (orientation: portrait) {
  /* Sound button drops BELOW RANKINGS in portrait by stacking .top-actions
     vertically. The banner sits above the iPhone search bar by honoring the
     safe-area inset at the bottom of the body's 3rd row. */
  .top-actions {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 5px;
  }
  .ad-banner {
    padding: 5px clamp(8px, 3vw, 20px) max(5px, env(safe-area-inset-bottom));
  }
  .ad-banner-track { font-size: clamp(10px, 3.4vw, 15px); white-space: nowrap; }
}

/* Reduced motion: hide videos, show panels as solid panels. */
@media (prefers-reduced-motion: reduce) {
  .dual-pane video { display: none; }
  .dual-pane { background: linear-gradient(135deg, #252936, #11131a); }
}
.dual-screen .stage-shade,.dual-pane .stage-shade,.active-stage .stage-shade{display:none !important;background:none !important;opacity:0 !important}