/**
 * Game stage fullscreen behavior + shared control-button styling.
 * ----------------------------------------------------------------------
 * .game-stage wraps .game-root (see tkge_render_game_embed()). The
 * regular (non-fullscreen) Back/Title/Expand controls live as standalone
 * blocks (trikdang/game-back-button, trikdang/game-title,
 * trikdang/game-expand-button — tk-game-embed.php) wherever they're
 * placed, typically the site's main navigation — nothing is rendered
 * inside .game-stage for that. The one exception is the thin
 * logo + expand/collapse bar further down, which exists only for
 * fullscreen (see the big comment there for why).
 *
 * .game-stage__back / .game-stage__toggle / .game-stage__title are kept
 * here (rather than living only where they're used) so every nav
 * control — the standalone blocks and the fullscreen bar's own button —
 * share one definition of what they look like.
 */
.game-stage {
	position: relative;
}

/* WordPress applies its default "constrained" layout max-width
   (theme.json's contentSize) to any direct child block that doesn't
   carry an alignwide/alignfull class — including this one, since the
   dynamic trikdang/game-embed block has no alignment set. That silently
   centered .game-stage as a narrower column inside the (wider)
   .game-frame, keeping the game from ever reaching the frame's full
   width. This opts the stage back out of that constraint specifically
   inside .game-frame. */
.game-frame .game-stage {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ----------------------------------------------------------------------
 * Fullscreen thin bar (game icon + Game Info + expand/collapse)
 * ----------------------------------------------------------------------
 * Back/Expand normally live in the site's main navigation — which the
 * browser hides entirely once real Fullscreen is active (same as any
 * other fullscreen video/content on the web). Without this, there'd be
 * no way to exit fullscreen, or get back to the site, while a game is
 * expanded. tkge_render_game_embed() always renders this bar as part of
 * .game-stage; it's just hidden until fullscreen is actually on, so it
 * adds nothing to the normal (non-fullscreen) view.
 *
 * Deliberately part of the flex column (not floating over the game) and
 * always visible rather than auto-hiding — a slim, permanent strip
 * rather than an overlay that comes and goes, so it reads as part of
 * the game's own frame instead of a control that pops up over it.
 */
.game-stage--fullscreen {
	position: fixed;
	inset: 0;
	/* Comfortably above the WP admin bar (z-index: 99999) and any
	   sticky/fixed theme header, which is what "fullscreen covers the
	   site nav, not the other way round" actually depends on for the
	   CSS-only fallback path (real requestFullscreen() doesn't need
	   this — see game-fullscreen.js). */
	z-index: 999999;
	display: flex;
	flex-direction: column;
	background: #000;
}

.game-stage__fs-bar {
	display: none;
}

/* `order: 0` pins this to the *top* of the fullscreen flex column, above
   the canvas (`order: 1` on .game-root below) — a single unified frame
   where the canvas and its control bar scale together, rather than the
   bar floating disconnected above or over the game. */
.game-stage--fullscreen .game-stage__fs-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex: 0 0 auto;
	order: 0;
	padding: 0.4rem 0.6rem;
	background: var( --wp--preset--color--night-flight, #121316 );
}

.game-stage--fullscreen .game-root,
.game-stage--fullscreen .game-root.game-root--fill {
	order: 1;
	flex: 1 1 auto;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-height: 0 !important;
	aspect-ratio: unset !important;
}

/* ----------------------------------------------------------------------
 * Fullscreen bar: game icon + "Game Info" (left) + slide-out panel
 * ----------------------------------------------------------------------
 * The "Game Info" button toggles `.game-stage__menu-panel` open/closed
 * (class driven by game-fullscreen.js, not the `hidden` attribute alone
 * — see there for why). The panel's content (tkge_render_fs_menu_panel_
 * content() in tk-game-embed.php) is the game's full Info content shown
 * directly, plus a per-game custom CTA pinned to the bottom if one is
 * configured — see that function's own docblock for why.
 */
/* The game's own icon (its featured image, or a generic joystick glyph
   if it has none) in the bar's far-left corner — otherwise, with only
   the two control buttons in the bar, that corner reads as bare empty
   space. */
.game-stage__game-icon {
	order: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 7px;
	background: color-mix( in srgb, var( --wp--preset--color--paper, #f3efe4 ) 8%, transparent );
	color: var( --wp--preset--color--paper, #f3efe4 );
}

.game-stage__menu-toggle {
	order: 1;
}

.game-stage__toggle {
	/* Keeps the Expand/Minimize button pinned to the far right edge of
	   the bar even though the (hidden-until-open) backdrop/panel are
	   later siblings in the DOM. */
	order: 2;
	margin-left: auto;
}

.game-stage__game-icon-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.game-stage__menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	background: rgba( 0, 0, 0, 0.55 );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.game-stage__menu-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.game-stage__menu-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1000001;
	width: min( 320px, 86vw );
	overflow-y: auto;
	/* Without border-box, the panel's rendered width was
	   width + left/right padding (1.1rem each side) — wider than the
	   min(320px, 86vw) it was supposed to be — which is what let inner
	   content push past the visible edge and force a horizontal
	   scrollbar. box-sizing below folds that padding back inside the
	   stated width, and overflow-x clips anything that still tries to
	   escape (e.g. a stray wide image or long unbroken text). */
	overflow-x: hidden;
	box-sizing: border-box;
	background: var( --wp--preset--color--night-flight, #121316 );
	box-shadow: 2px 0 24px rgba( 0, 0, 0, 0.4 );
	padding: 3rem 1.1rem 1.5rem;
	transform: translateX( -100% );
	transition: transform 0.25s ease;
}

/* Same border-box fix, applied to every element inside the drawer
   (the Info content's own hero/carousel/zones included) — some of
   that markup was built for the wider ~640px lightbox layout
   (game-info-modal.css) and can otherwise carry its own content-box
   sizing/padding into this much narrower column. max-width keeps any
   individually-sized element (an image, a long unbroken URL/tag, etc.)
   from ever rendering wider than the column that contains it. */
.game-stage__menu-panel,
.game-stage__menu-panel *,
.game-stage__menu-panel *::before,
.game-stage__menu-panel *::after {
	box-sizing: border-box;
}

.game-stage__menu-panel-inner,
.game-stage__menu-panel-inner * {
	max-width: 100%;
}

/* NOTE — light-mode surface color:
   This panel currently reuses --wp--preset--color--night-flight for its
   background, and the theme's own light-mode style variation (motif.css
   — lives in the theme, not this plugin, so it isn't in this bundle)
   re-points that same token to pure #ffffff for light mode, which reads
   as too stark/flat next to the rest of the light UI. The override below
   targets the OS-level light color scheme; if this site actually toggles
   light/dark with its own class or data attribute instead of relying on
   prefers-color-scheme, swap the selector below for that (e.g.
   `body.is-light-theme .game-stage__menu-panel`) so it fires at the
   right time. */
@media ( prefers-color-scheme: light ) {
	.game-stage__menu-panel {
		background: #f4f4f5;
	}
}

/* Kept in the DOM (via `hidden`) until opened, then animated in via
   this class — see game-fullscreen.js's bindMenuToggle() for why the
   class (not just removing `hidden`) is what actually drives the
   slide-in/out transition. */
.game-stage__menu-panel.is-open {
	transform: translateX( 0 );
}

.game-stage__menu-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 999px;
	background: color-mix( in srgb, var( --wp--preset--color--paper, #f3efe4 ) 6%, transparent );
	color: var( --wp--preset--color--paper, #f3efe4 );
	cursor: pointer;
}

.game-stage__menu-close:hover {
	background: color-mix( in srgb, var( --wp--preset--color--paper, #f3efe4 ) 14%, transparent );
}

/* The Info content's own hero CTA row ("Play now" + "Share") and the
   panel's per-game custom CTA group (.tkge-fs-cta-group, printed by
   tkge_render_fs_menu_panel_content() when one is configured) were both
   built for a horizontal in-page layout — stack them full-width for the
   narrow drawer instead, same reasoning as the CTA overlay's own
   override in game-fullpage.css. */
.game-stage__menu-panel-inner .tkge-info-modal__cta-row,
.game-stage__menu-panel-inner .tkge-cta-group {
	flex-direction: column;
	align-items: stretch;
}

/* Shared "control button" look — used by the Game Back Button and Game
   Expand Button blocks wherever they're placed. Colors come from the
   theme's own tokens (re-pointed for light mode by motif.css), so these
   automatically match whatever surface they're dropped onto — e.g. the
   site header's night-flight/paper colors. */
.game-stage__back,
.game-stage__toggle,
.game-stage__menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 999px;
	/* Was a hardcoded rgba(243, 239, 228, 0.06) — a fixed approximation of
	   "paper" tinted onto the button. Since these buttons live in the
	   site's own header/nav (not a permanently-dark surface), a frozen
	   value doesn't follow when the page is in light mode, even though
	   the icon color right below already does (via the paper token).
	   color-mix() keeps the tint's opacity locked to the token itself so
	   it re-points along with everything else motif.css swaps for light
	   mode. */
	background: color-mix( in srgb, var( --wp--preset--color--paper, #f3efe4 ) 6%, transparent );
	color: var( --wp--preset--color--paper, #f3efe4 );
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.game-stage__back:hover,
.game-stage__toggle:hover,
.game-stage__menu-toggle:hover {
	background: color-mix( in srgb, var( --wp--preset--color--paper, #f3efe4 ) 14%, transparent );
}

.game-stage__menu-toggle[aria-expanded="true"] {
	color: var( --wp--preset--color--signature-red, #e4002b );
}

.game-stage__toggle:hover {
	color: var( --wp--preset--color--signature-red, #e4002b );
}

.game-stage__title {
	font-family: var( --wp--preset--font-family--display, "Space Grotesk", sans-serif );
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.game-stage__icon {
	display: inline-flex;
}

.game-stage__icon--collapse {
	display: none;
}

/* The expand/collapse icon swap is driven by .is-fullscreen, toggled
   directly on the button by game-fullscreen.js — these buttons live
   outside .game-stage now (e.g. in the site header), so there's no
   .game-stage--fullscreen ancestor to key off of instead. */
.game-stage__toggle.is-fullscreen .game-stage__icon--expand {
	display: none;
}

.game-stage__toggle.is-fullscreen .game-stage__icon--collapse {
	display: inline-flex;
}

/* Drop the game title on narrow phones if it's sitting in a tight nav
   bar alongside other controls — same idea as hiding secondary labels
   in a mobile header. */
@media ( max-width: 480px ) {
	.game-stage__title {
		display: none;
	}
}

/* ----------------------------------------------------------------------
 * Fullscreen bar buttons: visible text labels
 * ----------------------------------------------------------------------
 * Hidden by default (and so a no-op for the standalone Back/Expand
 * blocks wherever else they're placed, e.g. the site's main nav, which
 * never print this markup anyway) — only actually shown, and only
 * needs showing, inside the fullscreen bar itself. Without a label, two
 * small round icon buttons at opposite ends of a wide bar read as
 * accidental/broken; the label gives each one enough width to look
 * intentional.
 */
.game-stage__btn-label {
	display: none;
}

.game-stage__fs-bar .game-stage__menu-toggle,
.game-stage__fs-bar .game-stage__toggle {
	width: auto;
	height: 32px;
	padding: 0 12px;
	gap: 6px;
	border-radius: 999px;
}

.game-stage__fs-bar .game-stage__btn-label {
	display: inline;
	font-family: var( --wp--preset--font-family--spec-mono, monospace );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Expand/Minimize label swap — same is-fullscreen-class pattern as the
   icon swap just above (and as .tkge-expand-label--collapse in
   game-actions.css for the in-page Expand button). */
.game-stage__btn-label--collapse {
	display: none;
}

.game-stage__toggle.is-fullscreen .game-stage__btn-label--expand {
	display: none;
}

.game-stage__toggle.is-fullscreen .game-stage__btn-label--collapse {
	display: inline;
}

/* Below ~360px there isn't room for icon + label on both buttons without
   wrapping — drop back to icon-only, same tradeoff .game-stage__title
   already makes on narrow phones above. */
@media ( max-width: 360px ) {
	.game-stage__fs-bar .game-stage__btn-label {
		display: none;
	}

	.game-stage__fs-bar .game-stage__menu-toggle,
	.game-stage__fs-bar .game-stage__toggle {
		width: 32px;
		padding: 0;
	}
}

/* ----------------------------------------------------------------------
 * Fullscreen panel: Info content shown directly
 * ----------------------------------------------------------------------
 * tkge_render_fs_menu_panel_content() prints tkge_render_game_info_
 * modal_markup()'s output straight into the panel (rather than behind a
 * click-to-expand accordion, and rather than the global Info lightbox —
 * that lightbox overlay is appended to document.body, which sits
 * outside whatever element real Fullscreen promotes to the browser's
 * own top layer, so it never becomes visible while true fullscreen is
 * active; see game-fullscreen.js's own docblock for the same top-layer
 * constraint). Everything here lives inside .game-stage__menu-panel —
 * itself inside the fullscreen element — so it renders normally, and
 * opening the panel is the only click needed to see it.
 *
 * The info content was designed for a centered ~640px-wide lightbox —
 * trim its own outer spacing down to fit the narrow drawer instead of
 * inheriting that wider layout's margins verbatim.
 */
.game-stage__menu-panel-inner .tkge-info-modal__hero {
	margin-bottom: 16px;
}

.game-stage__menu-panel-inner .tkge-info-modal__carousel-wrap {
	margin-bottom: 18px;
}

/* ----------------------------------------------------------------------
 * Fullscreen panel: per-game custom CTA pinned to the bottom
 * ----------------------------------------------------------------------
 * .game-stage__menu-panel-inner becomes the flex column that lets
 * `margin-top: auto` on the CTA group push it down to the end of the
 * drawer — `position: sticky` on top of that keeps it in view once the
 * Info content above is tall enough to make the panel scroll, rather
 * than the CTA scrolling out of sight along with everything else. Only
 * printed at all when tkge_get_game_cta() resolves to a real CTA for
 * this game — see tkge_render_fs_menu_panel_content()'s own docblock.
 */
.game-stage__menu-panel-inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.tkge-fs-cta-group {
	margin-top: auto;
	position: sticky;
	bottom: 0;
	padding-top: 14px;
	background: linear-gradient(
		to top,
		var( --wp--preset--color--night-flight, #121316 ) 65%,
		transparent
	);
}