/* game_tgn_0003 — keep hero player height stable after Play (in-page only) */ /* Detail inline embed: don't inherit modal/page height:100% chain (collapses when parent is auto) */ #gameDetails .game-hero-card[data-play-inline-visible] .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-player.game-hero-card .play-tgn-0001-embed.is-detail-shell { height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; } #gameDetails .game-hero-card[data-play-inline-visible]:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).playing .hero-card-main, #gameDetails .game-hero-card[data-play-inline-visible]:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).is-game-started .hero-card-main, #gameDetails .game-player.game-hero-card:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).playing .hero-card-main, #gameDetails .game-player.game-hero-card:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).is-game-started .hero-card-main { flex: none !important; align-items: stretch !important; justify-content: stretch !important; min-height: 0 !important; } #gameDetails .game-hero-card[data-play-inline-visible]:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).playing .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-hero-card[data-play-inline-visible]:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).is-game-started .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-player.game-hero-card:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).playing .play-tgn-0001-embed, #gameDetails .game-player.game-hero-card:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).is-game-started .play-tgn-0001-embed { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; } #gameDetails .game-hero-card[data-play-inline-visible]:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).playing .play-tgn-0001-embed__frame, #gameDetails .game-hero-card[data-play-inline-visible]:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).is-game-started .play-tgn-0001-embed__frame, #gameDetails .game-player.game-hero-card:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).playing .play-tgn-0001-embed__frame, #gameDetails .game-player.game-hero-card:not(.play-tgn-0001-inline-shell):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen).is-game-started .play-tgn-0001-embed__frame { flex: 0 0 auto !important; width: 100% !important; aspect-ratio: 16 / 9 !important; min-height: 240px !important; height: auto !important; position: relative !important; background: #000; } /* ── Fullscreen / immersive: fill viewport ── */ #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen), #gameDetails .game-hero-card.is-browser-fs:not(.is-immersive-play):not(.is-mobile-play) { display: flex !important; flex-direction: column !important; grid-template-rows: unset !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 100% !important; max-height: none !important; --hero-card-height: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; background: #000 !important; } #gameDetails .game-hero-card.is-immersive-play, #gameDetails .game-hero-card.is-mobile-play { position: fixed !important; inset: 0 !important; z-index: 10000 !important; display: flex !important; flex-direction: column !important; grid-template-rows: unset !important; width: 100% !important; max-width: none !important; height: 100dvh !important; min-height: 100dvh !important; max-height: none !important; --hero-card-height: 100dvh !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; background: #000 !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen)::before, #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen)::after, #gameDetails .game-hero-card.is-immersive-play::before, #gameDetails .game-hero-card.is-immersive-play::after, #gameDetails .game-hero-card.is-mobile-play::before, #gameDetails .game-hero-card.is-mobile-play::after, #gameDetails .game-hero-card.is-browser-fs::before, #gameDetails .game-hero-card.is-browser-fs::after { display: none !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-frame--top, #gameDetails .game-hero-card.is-immersive-play .hero-mask-frame--top, #gameDetails .game-hero-card.is-mobile-play .hero-mask-frame--top, #gameDetails .game-hero-card.is-browser-fs .hero-mask-frame--top { flex-shrink: 0 !important; grid-row: unset !important; width: 100% !important; height: auto !important; min-height: calc(52px + env(safe-area-inset-top, 0px)) !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-frame--bottom, #gameDetails .game-hero-card.is-immersive-play .hero-mask-frame--bottom, #gameDetails .game-hero-card.is-mobile-play .hero-mask-frame--bottom, #gameDetails .game-hero-card.is-browser-fs .hero-mask-frame--bottom { flex-shrink: 0 !important; grid-row: unset !important; width: 100% !important; height: auto !important; min-height: calc(72px + env(safe-area-inset-bottom, 0px)) !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-frame--top .hero-mask-frame__bar, #gameDetails .game-hero-card.is-immersive-play .hero-mask-frame--top .hero-mask-frame__bar, #gameDetails .game-hero-card.is-mobile-play .hero-mask-frame--top .hero-mask-frame__bar, #gameDetails .game-hero-card.is-browser-fs .hero-mask-frame--top .hero-mask-frame__bar { min-height: 52px !important; height: 100% !important; padding: max(10px, env(safe-area-inset-top, 0px)) 16px 10px !important; box-sizing: border-box !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-frame--bottom .hero-mask-frame__bar, #gameDetails .game-hero-card.is-immersive-play .hero-mask-frame--bottom .hero-mask-frame__bar, #gameDetails .game-hero-card.is-mobile-play .hero-mask-frame--bottom .hero-mask-frame__bar, #gameDetails .game-hero-card.is-browser-fs .hero-mask-frame--bottom .hero-mask-frame__bar { min-height: 72px !important; height: 100% !important; padding: 14px 16px max(12px, env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; align-items: center !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-close, #gameDetails .game-hero-card.is-immersive-play .hero-mask-close, #gameDetails .game-hero-card.is-mobile-play .hero-mask-close, #gameDetails .game-hero-card.is-browser-fs .hero-mask-close { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__pill, #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__btn, #gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__pill, #gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__btn, #gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__pill, #gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__btn, #gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__pill, #gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__btn { min-width: 44px !important; min-height: 44px !important; height: 44px !important; padding: 0 12px !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__btn, #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__pill--fav, #gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__btn, #gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__pill--fav, #gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__btn, #gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__pill--fav, #gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__btn, #gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__pill--fav { width: 44px !important; max-width: 44px !important; padding: 0 !important; gap: 0 !important; justify-content: center !important; border-radius: 50% !important; overflow: hidden !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__btn span, #gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__btn span, #gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__btn span, #gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__btn span { display: none !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__pill--like, #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__pill--dislike, #gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__pill--like, #gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__pill--dislike, #gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__pill--like, #gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__pill--dislike, #gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__pill--like, #gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__pill--dislike { min-width: 52px !important; border-radius: 9999px !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__pill svg, #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__btn svg, #gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__pill svg, #gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__btn svg, #gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__pill svg, #gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__btn svg, #gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__pill svg, #gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__btn svg { width: 20px !important; height: 20px !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-login, #gameDetails .game-hero-card.is-immersive-play .hero-mask-login, #gameDetails .game-hero-card.is-mobile-play .hero-mask-login, #gameDetails .game-hero-card.is-browser-fs .hero-mask-login { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; justify-content: center !important; border-radius: 50% !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-login svg, #gameDetails .game-hero-card.is-immersive-play .hero-mask-login svg, #gameDetails .game-hero-card.is-mobile-play .hero-mask-login svg, #gameDetails .game-hero-card.is-browser-fs .hero-mask-login svg { width: 20px !important; height: 20px !important; } #gameDetails .game-hero-card.is-immersive-play .hero-card-main, #gameDetails .game-hero-card.is-mobile-play .hero-card-main, #gameDetails .game-hero-card.is-browser-fs .hero-card-main { flex: 1 1 auto !important; grid-row: unset !important; min-height: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; overflow: hidden !important; } #gameDetails .play-tgn-0001-embed.is-detail-shell[hidden] { display: none !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen):not(.playing):not(.is-game-started) .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-hero-card.is-immersive-play:not(.playing):not(.is-game-started) .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-hero-card.is-browser-fs:not(.playing):not(.is-game-started) .play-tgn-0001-embed.is-detail-shell { display: none !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen).playing .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen).is-game-started .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-hero-card.is-immersive-play.playing .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-hero-card.is-immersive-play.is-game-started .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-hero-card.is-mobile-play.playing .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-hero-card.is-mobile-play.is-game-started .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-hero-card.is-browser-fs.playing .play-tgn-0001-embed.is-detail-shell, #gameDetails .game-hero-card.is-browser-fs.is-game-started .play-tgn-0001-embed.is-detail-shell { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen).playing .play-tgn-0001-embed__frame, #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen).is-game-started .play-tgn-0001-embed__frame, #gameDetails .game-hero-card.is-immersive-play.playing .play-tgn-0001-embed__frame, #gameDetails .game-hero-card.is-immersive-play.is-game-started .play-tgn-0001-embed__frame, #gameDetails .game-hero-card.is-mobile-play.playing .play-tgn-0001-embed__frame, #gameDetails .game-hero-card.is-mobile-play.is-game-started .play-tgn-0001-embed__frame, #gameDetails .game-hero-card.is-browser-fs.playing .play-tgn-0001-embed__frame, #gameDetails .game-hero-card.is-browser-fs.is-game-started .play-tgn-0001-embed__frame { flex: 1 1 auto !important; aspect-ratio: unset !important; min-height: 0 !important; height: auto !important; width: 100% !important; position: relative !important; overflow: hidden !important; background: #000 !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .play-tgn-0001__iframe.is-active, #gameDetails .game-hero-card.is-immersive-play .play-tgn-0001__iframe.is-active, #gameDetails .game-hero-card.is-mobile-play .play-tgn-0001__iframe.is-active, #gameDetails .game-hero-card.is-browser-fs .play-tgn-0001__iframe.is-active { display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: none !important; } #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen):not(.playing):not(.is-game-started) .game-launch-container, #gameDetails .game-hero-card.is-immersive-play:not(.playing):not(.is-game-started) .game-launch-container, #gameDetails .game-hero-card.is-mobile-play:not(.playing):not(.is-game-started) .game-launch-container, #gameDetails .game-hero-card.is-browser-fs:not(.playing):not(.is-game-started) .game-launch-container { flex: 1 1 auto !important; width: 100% !important; aspect-ratio: unset !important; min-height: 0 !important; height: auto !important; max-width: none !important; background-size: cover !important; background-position: center !important; } #gameDetails .game-hero-card.is-immersive-play:not(.playing):not(.is-game-started) .hero-mask-frame--top, #gameDetails .game-hero-card.is-mobile-play:not(.playing):not(.is-game-started) .hero-mask-frame--top, #gameDetails .game-hero-card.is-browser-fs:not(.playing):not(.is-game-started) .hero-mask-frame--top, #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen):not(.playing):not(.is-game-started) .hero-mask-frame--top { order: 1 !important; } #gameDetails .game-hero-card.is-immersive-play:not(.playing):not(.is-game-started) .hero-card-main, #gameDetails .game-hero-card.is-mobile-play:not(.playing):not(.is-game-started) .hero-card-main, #gameDetails .game-hero-card.is-browser-fs:not(.playing):not(.is-game-started) .hero-card-main, #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen):not(.playing):not(.is-game-started) .hero-card-main { order: 2 !important; flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; z-index: auto !important; } #gameDetails .game-hero-card.is-immersive-play:not(.playing):not(.is-game-started) .hero-mask-frame--bottom, #gameDetails .game-hero-card.is-mobile-play:not(.playing):not(.is-game-started) .hero-mask-frame--bottom, #gameDetails .game-hero-card.is-browser-fs:not(.playing):not(.is-game-started) .hero-mask-frame--bottom, #gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen):not(.playing):not(.is-game-started) .hero-mask-frame--bottom { order: 3 !important; }