/*
  Patch: definitive gameplay frame sizing.
  Scope: public game details only.
  This fixes flattened iframe games by restoring the dedicated .game-frame-wrap
  ratio box and by making fullscreen use the real viewport height.
*/

body.public-layout-body .game-detail-page {
  --ag-game-toolbar-height: 58px;
}

body.public-layout-body .game-detail-page .play-stage.mobile-game-shell {
  --ag-game-frame-ratio: 16 / 9;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.public-layout-body .game-detail-page .play-stage.mobile-ratio-16-9 { --ag-game-frame-ratio: 16 / 9; }
body.public-layout-body .game-detail-page .play-stage.mobile-ratio-4-3 { --ag-game-frame-ratio: 4 / 3; }
body.public-layout-body .game-detail-page .play-stage.mobile-ratio-1-1 { --ag-game-frame-ratio: 1 / 1; }
body.public-layout-body .game-detail-page .play-stage.mobile-ratio-9-16 { --ag-game-frame-ratio: 9 / 16; }

body.public-layout-body .game-detail-page .play-stage .game-frame-wrap {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  background: #020617 !important;
}

/* Normal window mode: the wrapper owns the ratio. This prevents the iframe from
   collapsing to a tiny height or stretching horizontally without vertical space. */
body.public-layout-body .game-detail-page .play-stage:not(.is-game-mode):not(.is-fullscreen):not(.is-mobile-expanded):not(:fullscreen) .game-frame-wrap {
  height: auto !important;
  min-height: 420px !important;
  max-height: none !important;
  aspect-ratio: var(--ag-game-frame-ratio) !important;
}

body.public-layout-body .game-detail-page .play-stage.mobile-ratio-1-1:not(.is-game-mode):not(.is-fullscreen):not(.is-mobile-expanded):not(:fullscreen) .game-frame-wrap {
  width: min(100%, 720px) !important;
  margin-inline: auto !important;
  min-height: min(640px, calc(100dvh - var(--ag-shell-topbar-height, 86px) - 140px)) !important;
}

body.public-layout-body .game-detail-page .play-stage.mobile-ratio-9-16:not(.is-game-mode):not(.is-fullscreen):not(.is-mobile-expanded):not(:fullscreen) .game-frame-wrap {
  width: min(100%, 520px, calc((100dvh - var(--ag-shell-topbar-height, 86px) - 140px) * 0.5625)) !important;
  margin-inline: auto !important;
  min-height: min(760px, calc(100dvh - var(--ag-shell-topbar-height, 86px) - 140px)) !important;
}

body.public-layout-body .game-detail-page .play-stage .game-frame-wrap > iframe,
body.public-layout-body .game-detail-page .play-stage .game-frame-wrap > .play-placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  background: #020617 !important;
}

/* Defensive fallback in case a future edit puts the iframe directly inside .play-stage again. */
body.public-layout-body .game-detail-page .play-stage:not(.is-game-mode):not(.is-fullscreen):not(.is-mobile-expanded):not(:fullscreen) > iframe {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 420px !important;
  aspect-ratio: var(--ag-game-frame-ratio) !important;
  border: 0 !important;
}

/* Fullscreen/native and fallback modes: fill the viewport instead of using the ratio box. */
body.public-layout-body .game-detail-page .play-stage.is-game-mode,
body.public-layout-body .game-detail-page .play-stage.is-fullscreen,
body.public-layout-body .game-detail-page .play-stage.is-mobile-expanded,
body.public-layout-body .game-detail-page .play-stage:fullscreen {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  justify-content: stretch !important;
  width: 100vw !important;
  width: var(--ag-viewport-width, 100vw) !important;
  height: 100vh !important;
  height: var(--ag-viewport-height, 100dvh) !important;
  min-height: 100vh !important;
  min-height: var(--ag-viewport-height, 100dvh) !important;
  max-height: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #020617 !important;
}

body.public-layout-body .game-detail-page .play-stage.is-mobile-expanded {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

body.public-layout-body .game-detail-page .play-stage.is-game-mode .mobile-game-toolbar,
body.public-layout-body .game-detail-page .play-stage.is-fullscreen .mobile-game-toolbar,
body.public-layout-body .game-detail-page .play-stage.is-mobile-expanded .mobile-game-toolbar,
body.public-layout-body .game-detail-page .play-stage:fullscreen .mobile-game-toolbar {
  min-height: var(--ag-game-toolbar-height) !important;
  flex-shrink: 0 !important;
}

body.public-layout-body .game-detail-page .play-stage.is-game-mode .mobile-game-warning,
body.public-layout-body .game-detail-page .play-stage.is-fullscreen .mobile-game-warning,
body.public-layout-body .game-detail-page .play-stage.is-mobile-expanded .mobile-game-warning,
body.public-layout-body .game-detail-page .play-stage:fullscreen .mobile-game-warning {
  flex-shrink: 0 !important;
}

body.public-layout-body .game-detail-page .play-stage.is-game-mode .mobile-game-warning[hidden],
body.public-layout-body .game-detail-page .play-stage.is-fullscreen .mobile-game-warning[hidden],
body.public-layout-body .game-detail-page .play-stage.is-mobile-expanded .mobile-game-warning[hidden],
body.public-layout-body .game-detail-page .play-stage:fullscreen .mobile-game-warning[hidden] {
  display: none !important;
}

body.public-layout-body .game-detail-page .play-stage.is-game-mode .game-frame-wrap,
body.public-layout-body .game-detail-page .play-stage.is-fullscreen .game-frame-wrap,
body.public-layout-body .game-detail-page .play-stage.is-mobile-expanded .game-frame-wrap,
body.public-layout-body .game-detail-page .play-stage:fullscreen .game-frame-wrap {
  grid-row: 3 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

body.public-layout-body .game-detail-page .game-detail-play-layout {
  align-items: start !important;
  min-width: 0 !important;
}

body.public-layout-body .game-detail-page .game-detail-side-ad {
  min-width: 0 !important;
}

@media (max-width: 980px) {
  body.public-layout-body .game-detail-page .play-stage:not(.is-game-mode):not(.is-fullscreen):not(.is-mobile-expanded):not(:fullscreen) .game-frame-wrap {
    min-height: 300px !important;
  }
}

@media (max-width: 640px) {
  body.public-layout-body .game-detail-page .play-stage:not(.is-game-mode):not(.is-fullscreen):not(.is-mobile-expanded):not(:fullscreen) .game-frame-wrap {
    min-height: 220px !important;
  }

  body.public-layout-body .game-detail-page .play-stage.mobile-ratio-9-16:not(.is-game-mode):not(.is-fullscreen):not(.is-mobile-expanded):not(:fullscreen) .game-frame-wrap {
    width: min(100%, 420px) !important;
    min-height: min(720px, calc(100dvh - var(--ag-shell-topbar-height, 134px) - 90px)) !important;
  }
}