/* game_tgn_0003 — play_tgn_0001 inline shell theme */

:root {
  --play-tgn-primary: var(--color-primary, #6C5DD3);
  --play-tgn-overlay: rgba(17, 20, 45, 0.55);
  --play-hero-radius: var(--radius-xl, 20px);
}

/* Modal open — above fixed header / mobile bar */
.play-tgn-0001 {
  z-index: 20050 !important;
}

body.play-tgn-0001-open {
  overflow: hidden;
}

body.play-tgn-0001-open .header,
body.play-tgn-0001-open .g03-mobile-bar {
  visibility: hidden;
  pointer-events: none;
}

body.play-tgn-0001-open .back-to-top {
  display: none !important;
}

#gameDetails .game-hero-card[data-play-inline-visible] {
  border-radius: var(--play-hero-radius, 20px);
  overflow: hidden;
}

#gameDetails .game-hero-card .hero-mask-frame,
#gameDetails #playTgn0001InlineShell .hero-mask-frame {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(108, 93, 211, 0.12);
}

#gameDetails .hero-mask-login,
#gameDetails .play-tgn-0001__login.hero-mask-login {
  border-color: var(--color-primary, #6C5DD3);
  color: var(--color-primary, #6C5DD3);
}

#gameDetails .hero-mask-close,
#gameDetails .play-tgn-0001__close.hero-mask-close {
  border-color: var(--color-primary, #6C5DD3);
  color: var(--color-primary, #6C5DD3);
}

#gameDetails .play-tgn-0001__pill,
#gameDetails .play-tgn-0001__btn,
#gameDetails .hero-game-actions .play-tgn-0001__pill,
#gameDetails .hero-game-actions .play-tgn-0001__btn {
  border-color: rgba(108, 93, 211, 0.22);
  color: var(--color-text-primary, #11142D);
  background: var(--color-bg-secondary, #fff);
}

#gameDetails .play-tgn-0001__pill:hover,
#gameDetails .play-tgn-0001__btn:hover,
#gameDetails .hero-game-actions .play-tgn-0001__pill:hover,
#gameDetails .hero-game-actions .play-tgn-0001__btn:hover {
  border-color: var(--color-primary, #6C5DD3);
  color: var(--color-primary, #6C5DD3);
}

#gameDetails .play-tgn-0001__pill--like.is-active {
  color: var(--color-success, #28a745);
  border-color: var(--color-success, #28a745);
}

#gameDetails .play-tgn-0001__pill--dislike.is-active {
  color: var(--color-error, #dc3545);
  border-color: var(--color-error, #dc3545);
}

#gameDetails .play-tgn-0001__pill--fav.is-active {
  color: var(--color-warning, #ffc107);
  border-color: var(--color-warning, #ffc107);
}

#gameDetails .play-tgn-0001__dialog {
  background: var(--color-bg-secondary, #ffffff);
  border-color: rgba(108, 93, 211, 0.22);
}

#gameDetails .play-tgn-0001__topbar,
#gameDetails .play-tgn-0001__bottombar {
  background: #fff;
  border-color: rgba(108, 93, 211, 0.12);
}

#gameDetails .play-tgn-0001__title {
  color: var(--color-primary, #6C5DD3);
}

#gameDetails .play-tgn-0001__splash {
  background: var(--play-tgn-overlay);
}

#gameDetails .play-tgn-0001__splash-play {
  background: var(--color-primary, #6C5DD3);
}

/* Detail toast — top of player; stays visible in fullscreen */
#gameDetails .game-hero-card .play-tgn-0001__toast,
#gameDetails #playTgn0001Toast {
  position: absolute;
  top: calc(var(--hero-top-mask-height, 52px) + 12px);
  bottom: auto !important;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-8px);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
}

#gameDetails .game-hero-card .play-tgn-0001__toast.is-visible,
#gameDetails #playTgn0001Toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) > .play-tgn-0001__toast,
#gameDetails .game-hero-card.is-mobile-play > .play-tgn-0001__toast,
#gameDetails .game-hero-card.is-immersive-play > .play-tgn-0001__toast,
#gameDetails .game-hero-card.is-browser-fs > .play-tgn-0001__toast {
  position: fixed !important;
  top: max(16px, env(safe-area-inset-top, 0px)) !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 2147483646 !important;
  background: rgba(17, 20, 45, 0.94) !important;
  border-color: rgba(108, 93, 211, 0.35) !important;
  color: #fff !important;
}

#gameDetails .play-tgn-0001__toast,
.play-tgn-0001__toast {
  background: #fff;
  border-color: rgba(108, 93, 211, 0.18);
}

/* No top login bar — collapse top row when idle; show close only while playing / fullscreen */
#gameDetails.play-tgn-hide-login .game-hero-card[data-play-inline-visible]:not(.playing):not(.is-game-started):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen) {
  --hero-top-mask-height: 0;
  grid-template-rows: 0 auto var(--hero-bottom-mask-height);
}

#gameDetails.play-tgn-hide-login .game-hero-card[data-play-inline-visible]:not(.playing):not(.is-game-started):not(.is-immersive-play):not(.is-mobile-play):not(.is-browser-fs):not(:fullscreen):not(:-webkit-full-screen) .hero-mask-frame--top {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  border: none !important;
}

/* Logged-in: hide hero login; keep top bar when playing / fullscreen for close */
#gameDetails.play-tgn-hide-login .game-hero-card:not(.playing):not(.is-game-started) .hero-mask-frame--top {
  display: none !important;
}

#gameDetails.play-tgn-hide-login .game-hero-card .hero-mask-login,
#gameDetails.play-tgn-hide-login .game-hero-card .play-tgn-0001__login {
  display: none !important;
}

#gameDetails.play-tgn-hide-login .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-frame--top,
#gameDetails.play-tgn-hide-login .game-hero-card.is-immersive-play .hero-mask-frame--top,
#gameDetails.play-tgn-hide-login .game-hero-card.is-mobile-play .hero-mask-frame--top {
  display: block !important;
}

#gameDetails.play-tgn-hide-login .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-frame--top .hero-mask-frame__bar,
#gameDetails.play-tgn-hide-login .game-hero-card.is-immersive-play .hero-mask-frame--top .hero-mask-frame__bar,
#gameDetails.play-tgn-hide-login .game-hero-card.is-mobile-play .hero-mask-frame--top .hero-mask-frame__bar {
  justify-content: flex-end;
}

@media (max-width: 768px) {
  #gameDetails .hero-mask-login span,
  #gameDetails .play-tgn-0001__btn span {
    display: none;
  }

  #gameDetails .hero-mask-login {
    padding: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    max-height: 36px;
    justify-content: center;
    border-radius: 50%;
  }
}

/* ── Mobile fullscreen / immersive chrome (align with common play_tgn_0001 inline-shell) ── */
#gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-frame,
#gameDetails .game-hero-card.is-immersive-play .hero-mask-frame,
#gameDetails .game-hero-card.is-mobile-play .hero-mask-frame,
#gameDetails .game-hero-card.is-browser-fs .hero-mask-frame {
  background: rgba(17, 20, 45, 0.96) !important;
  border: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#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 {
  border-bottom: 1px solid rgba(108, 93, 211, 0.22) !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 {
  border-top: 1px solid rgba(108, 93, 211, 0.22) !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 {
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-login:hover,
#gameDetails .game-hero-card.is-immersive-play .hero-mask-login:hover,
#gameDetails .game-hero-card.is-mobile-play .hero-mask-login:hover,
#gameDetails .game-hero-card.is-browser-fs .hero-mask-login:hover {
  background: var(--color-primary, #6C5DD3) !important;
  border-color: var(--color-primary, #6C5DD3) !important;
  color: #fff !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 {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

#gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-mask-close:hover,
#gameDetails .game-hero-card.is-immersive-play .hero-mask-close:hover,
#gameDetails .game-hero-card.is-mobile-play .hero-mask-close:hover,
#gameDetails .game-hero-card.is-browser-fs .hero-mask-close:hover {
  background: var(--color-primary, #6C5DD3) !important;
  border-color: var(--color-primary, #6C5DD3) !important;
  color: #fff !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 {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

#gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__pill:hover,
#gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__btn:hover,
#gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__pill:hover,
#gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__btn:hover,
#gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__pill:hover,
#gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__btn:hover,
#gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__pill:hover,
#gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__btn:hover {
  background: rgba(108, 93, 211, 0.35) !important;
  border-color: rgba(108, 93, 211, 0.55) !important;
  color: #fff !important;
}

#gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__pill--like.is-active,
#gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__pill--like.is-active,
#gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__pill--like.is-active,
#gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__pill--like.is-active {
  color: #5ee08a !important;
  border-color: rgba(94, 224, 138, 0.55) !important;
  background: rgba(94, 224, 138, 0.12) !important;
}

#gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__pill--dislike.is-active,
#gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__pill--dislike.is-active,
#gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__pill--dislike.is-active,
#gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__pill--dislike.is-active {
  color: #ff8a8a !important;
  border-color: rgba(255, 138, 138, 0.55) !important;
  background: rgba(255, 138, 138, 0.12) !important;
}

#gameDetails .game-hero-card:is(:fullscreen, :-webkit-full-screen) .hero-game-actions .play-tgn-0001__pill--fav.is-active,
#gameDetails .game-hero-card.is-immersive-play .hero-game-actions .play-tgn-0001__pill--fav.is-active,
#gameDetails .game-hero-card.is-mobile-play .hero-game-actions .play-tgn-0001__pill--fav.is-active,
#gameDetails .game-hero-card.is-browser-fs .hero-game-actions .play-tgn-0001__pill--fav.is-active {
  color: #ffd54f !important;
  border-color: rgba(255, 213, 79, 0.55) !important;
  background: rgba(255, 213, 79, 0.12) !important;
}

/* —— play page (play_url route) — iframe topbar fix —— */
html.play-tgn-0001-page-active.play-tgn-0001-in-iframe,
html.play-tgn-0001-page-active.play-tgn-0001-in-iframe body {
  background: var(--color-bg-secondary, #ffffff);
}

html.play-tgn-0001-page-active.play-tgn-0001-in-iframe .play-tgn-0001-page {
  background: var(--color-bg-secondary, #ffffff);
}

html.play-tgn-0001-page-active.play-tgn-0001-in-iframe .play-tgn-0001-page__dialog,
html.play-tgn-0001-page-active.play-tgn-0001-in-iframe .play-tgn-0001-page__dialog.play-tgn-0001__dialog {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

#playTgn0001PageDialog:not(:fullscreen):not(:-webkit-full-screen) .play-tgn-0001__topbar {
  display: none;
}

html.play-tgn-0001-page-active.play-tgn-0001-in-iframe #playTgn0001PageDialog .play-tgn-0001__topbar {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
}

html.play-tgn-0001-page-active.play-tgn-0001-in-iframe #playTgn0001PageDialog .play-tgn-0001__topbar .play-tgn-0001__login {
  display: none !important;
}

#playTgn0001PageDialog:is(:fullscreen, :-webkit-full-screen) .play-tgn-0001__topbar {
  display: flex !important;
  justify-content: flex-end;
}