/* ESL Game Show — viewports ≤1024px
 *
 * 1) Fullscreen chrome: exit button + first-run prompt (fixed viewport).
 * 2) Fullscreen setup — middle column scales as one canvas (JS). Minimal vertical padding + no
 *    internal scrollbars; landscape uses a single viewport-tall row (see game-show.css).
 */

@media (max-width: 1024px) {
	/* Setup only: in-panel ✕ on yellow column; hide floating FS control so they are not duplicated. */
	#esl-game-show.is-fullscreen[data-state="setup"] #esl-game-show-fullscreen.esl-game-show-fullscreen--stage-fs {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
		opacity: 0 !important;
	}
	/* Reparented to `body`: descendant selector above no longer matches — mirror hide via :has(). */
	body:has(#esl-game-show.is-fullscreen[data-state="setup"]) > #esl-game-show-fullscreen.esl-game-show-fullscreen--stage-fs {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
		opacity: 0 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--center .esl-game-show-fs-exit {
		display: inline-flex !important;
		top: max(6px, env(safe-area-inset-top, 0px)) !important;
		right: max(6px, env(safe-area-inset-right, 0px)) !important;
		z-index: 60 !important;
		width: 44px !important;
		height: 44px !important;
	}

	/*
	 * Fullscreen control: fixed to the viewport so it stays tappable while the page scrolls.
	 * Button may be reparented to `document.body` (game-show.js); keep both selectors aligned.
	 */
	#esl-game-show-fullscreen.esl-game-show-fullscreen,
	#esl-game-show .esl-game-show-fullscreen {
		position: fixed !important;
		top: auto !important;
		bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
		right: max(10px, env(safe-area-inset-right, 0px)) !important;
		z-index: 100006 !important;
	}
	#esl-game-show.is-fullscreen .esl-game-show-fullscreen,
	#esl-game-show-fullscreen.esl-game-show-fullscreen.esl-game-show-fullscreen--stage-fs {
		top: auto !important;
		bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
		right: max(14px, env(safe-area-inset-right, 0px)) !important;
	}

	/* First-run fullscreen prompt: see `.esl-gamzam-fs-prompt` in game-show.css (body-mounted, z-index 100010). */

	/* End screen: keep the stack inside the gold frame; JS scales `.esl-game-show-end-scale-inner` to fit. */
	#esl-game-show.is-fullscreen[data-state="end"] #esl-game-show-end.esl-game-show-screen--active {
		min-height: 0 !important;
		overflow: hidden !important;
	}
	#esl-game-show.is-fullscreen[data-state="end"] .esl-game-show-end-scale-wrap {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		max-height: 100% !important;
	}

	/*
	 * Fullscreen setup (≤1024): `.esl-game-show-setup__bottom-stack` is a 2-row grid (topics / START).
	 * Rows are `min-content` so the grid never assigns a fractional row height that forces an inner scroll.
	 * Embedded (not fullscreen): no grid here; base flex + document scroll (see game-show.css).
	 */
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__cluster--bottom {
		flex: 0 0 auto !important;
		min-height: min-content !important;
		min-width: 0 !important;
		max-height: none !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: visible !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__cluster--bottom .esl-game-show-setup__bottom-stack {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: repeat(2, min-content) !important;
		grid-template-areas: "esl-setup-topics" "esl-setup-start" !important;
		gap: var(--esl-dash-gap, clamp(6px, 1vh, 12px)) !important;
		justify-content: unset !important;
		align-content: start !important;
		flex: 0 0 auto !important;
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: none !important;
		height: auto !important;
		min-height: min-content !important;
		overflow: visible !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--topics {
		grid-area: esl-setup-topics !important;
		min-height: min-content !important;
		min-width: 0 !important;
		align-self: stretch !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: visible !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--start {
		grid-area: esl-setup-start !important;
		min-height: 0 !important;
		min-width: 0 !important;
		align-self: stretch !important;
	}

	/*
	 * Fullscreen setup — center column: no reliance on inner scroll; JS may scale the inner canvas to fit.
	 * #esl-game-show wins over theme; `!important` overrides base panel `overflow-y: auto`.
	 */
	#esl-game-show.is-fullscreen[data-state="setup"] {
		--esl-fs-dash: clamp(11px, 2.1vmin, 14px);
		--esl-fs-dash-h3: clamp(12px, 2vmin, 15px);
		--esl-fs-dash-banner: clamp(11px, 2.4vmin, 15px);
		--esl-fs-dash-btn: clamp(12px, 2.3vmin, 15px);
		--esl-dash-gap: clamp(2px, 0.55vh, 6px);
		--esl-dash-pad-inline: clamp(4px, 1.5vw, 10px);
		--esl-dash-touch-min: 44px;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel.esl-game-show-panel--center {
		box-sizing: border-box !important;
		overflow-x: hidden !important;
		overflow-y: hidden !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		display: flex !important;
		flex-direction: column !important;
		/* Fill the layout slot so the scale wrap can vertically center the banner + setup block. */
		flex: 1 1 auto !important;
		min-height: 0 !important;
		height: auto !important;
		max-height: none !important;
		padding-top: max(0px, env(safe-area-inset-top, 0px)) !important;
		padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel.esl-game-show-panel--center::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important;
		display: none !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--center .esl-game-show-center-scale-wrap {
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--center .esl-game-show-center-scale-inner {
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		flex: 0 1 auto !important;
		min-height: min-content !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		overflow: visible !important;
		padding-top: max(2px, env(safe-area-inset-top, 0px)) !important;
		padding-bottom: 0 !important;
		padding-left: var(--esl-dash-pad-inline, 8px) !important;
		padding-right: var(--esl-dash-pad-inline, 8px) !important;
		/* JS `updateFullscreenSetupCenterFit`: scale from center so growth does not pin the stack to the top edge. */
		transform-origin: center center !important;
		backface-visibility: hidden !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-banner {
		box-sizing: border-box !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		margin-top: 0 !important;
		margin-bottom: clamp(2px, 0.45vh, 5px) !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: clamp(3px, 0.65vh, 7px) clamp(6px, 2vw, 10px) !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-banner .esl-banner-title {
		font-size: var(--esl-fs-dash-banner) !important;
		line-height: 1.15 !important;
		font-weight: 700 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup {
		box-sizing: border-box !important;
		flex: 0 1 auto !important;
		min-height: min-content !important;
		height: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: none !important;
		overflow: visible !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: clamp(12px, 1.6vh, 15px) !important;
		padding: 0 !important;
		margin: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		touch-action: manipulation !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__cluster {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		gap: var(--esl-dash-gap) !important;
		min-height: min-content !important;
		overflow: visible !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__cluster--top {
		flex: 0 0 auto !important;
		/* Tighter than main dash gap: category/level row ↔ Generate — frees a little vertical for START row. */
		gap: clamp(1px, 0.28vh, 4px) !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--filters {
		margin: clamp(-2px, -0.2vh, 0) 0 clamp(-3px, -0.35vh, 0) !important;
		padding: 0 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--start {
		flex: 0 0 auto !important;
		min-height: 0 !important;
		gap: clamp(6px, 1.05vh, 11px) !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--topics > h3 {
		flex-shrink: 0 !important;
		margin: 0 0 clamp(2px, 0.5vh, 6px) !important;
		font-size: var(--esl-fs-dash-h3) !important;
		line-height: 1.2 !important;
		font-weight: 700 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-topics-grid {
		box-sizing: border-box !important;
		flex: 0 0 auto !important;
		flex-shrink: 0 !important;
		min-height: min-content !important;
		width: 100% !important;
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		grid-template-rows: repeat(2, min-content) !important;
		gap: clamp(3px, 0.7vmin, 6px) !important;
		align-content: start !important;
		max-height: none !important;
		overflow: visible !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--filters select.esl-game-show-select,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--filters .esl-custom-select__trigger,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--filters #esl-btn-reset {
		font-size: var(--esl-fs-dash) !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-topics-grid select.esl-game-show-topic,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-topics-grid .esl-custom-select__trigger {
		font-size: var(--esl-fs-dash) !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel__setup-hint {
		font-size: var(--esl-fs-dash-h3) !important;
		margin: 0 0 var(--esl-dash-gap) !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team1 .esl-game-show-player-row--panel .esl-game-show-input,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team2 .esl-game-show-player-row--panel .esl-game-show-input,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team1 .esl-game-show-player-row--panel .esl-pick-name,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team2 .esl-game-show-player-row--panel .esl-pick-name {
		font-size: var(--esl-fs-dash) !important;
	}
	/* Filters + RESET only — keep 44px tap; topic row triggers use grid cell rules below. */
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--filters select.esl-game-show-select,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--filters .esl-custom-select__trigger,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--filters #esl-btn-reset {
		box-sizing: border-box !important;
		min-height: var(--esl-dash-touch-min) !important;
		padding: clamp(3px, 0.55vh, 7px) clamp(6px, 1.5vw, 10px) !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-topics-grid .esl-custom-select,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-topics-grid .esl-game-show-topic {
		min-height: 0 !important;
		height: 100% !important;
		align-self: stretch !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-topics-grid .esl-custom-select__trigger {
		box-sizing: border-box !important;
		min-height: 36px !important;
		height: 100% !important;
		padding: clamp(4px, 0.8vh, 8px) clamp(6px, 1.5vw, 10px) !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-topics-grid select.esl-game-show-topic {
		box-sizing: border-box !important;
		min-height: 36px !important;
		height: 100% !important;
		width: 100% !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-row--gap {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: clamp(3px, 0.8vw, 6px) !important;
		align-items: stretch !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-row--gap .esl-custom-select,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-row--gap .esl-filter-select {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup__section--center .esl-game-show-btn--generate,
	#esl-game-show.is-fullscreen[data-state="setup"] #esl-btn-generate {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: clamp(1px, 0.25vh, 4px) 0 !important;
		padding: clamp(6px, 1.2vh, 10px) clamp(8px, 2vw, 12px) !important;
		min-height: var(--esl-dash-touch-min) !important;
		font-size: var(--esl-fs-dash-btn) !important;
		font-weight: 700 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-start-actions {
		box-sizing: border-box !important;
		--esl-start-actions-gap: clamp(6px, 1.2vw, 10px) !important;
		--esl-start-narrow-px: 36px !important;
		--esl-setup-settings-btn-w: 44px !important;
		margin-top: 20px !important;
		margin-bottom: 0 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-start-actions .esl-setup-settings-btn {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		margin-top: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] #esl-btn-start {
		box-sizing: border-box !important;
		min-height: var(--esl-dash-touch-min) !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding: clamp(6px, 1.2vh, 10px) clamp(8px, 2vw, 12px) !important;
		font-size: var(--esl-fs-dash-btn) !important;
		font-weight: 700 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team1 .esl-game-show-player-row--panel,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team2 .esl-game-show-player-row--panel {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--esl-dash-gap) !important;
		align-items: stretch !important;
		width: 100% !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team1 .esl-game-show-player-row--panel .esl-game-show-input,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team2 .esl-game-show-player-row--panel .esl-game-show-input,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team1 .esl-game-show-player-row--panel .esl-pick-name,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team2 .esl-game-show-player-row--panel .esl-pick-name {
		box-sizing: border-box !important;
		min-height: var(--esl-dash-touch-min) !important;
		width: 100% !important;
		text-align: center !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team1 .esl-game-show-player-row--panel .esl-game-show-input,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team2 .esl-game-show-player-row--panel .esl-game-show-input {
		height: var(--esl-dash-touch-min) !important;
		line-height: calc(var(--esl-dash-touch-min) - 4px) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team1 .esl-game-show-player-row--panel .esl-pick-name,
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel--team2 .esl-game-show-player-row--panel .esl-pick-name {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-setup .esl-mode-option {
		font-size: clamp(9px, 1.6vmin, 11px) !important;
	}

	/*
	 * Fullscreen game: entire board (banner + topic headers + card grid) is one scaled canvas (JS).
	 * Clip to the yellow panel; no inner scroll on the grid — fit handles overflow.
	 */
	#esl-game-show.is-fullscreen[data-state="game"] .esl-game-show-panel--game {
		box-sizing: border-box !important;
		overflow: hidden !important;
		min-height: 0 !important;
	}
	#esl-game-show.is-fullscreen[data-state="game"] .esl-game-show-panel--game .esl-game-show-board {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
		/* Reclaim horizontal space for the grid (JS may apply non-uniform scale X/Y). */
		padding: clamp(4px, 0.7vh, 8px) clamp(3px, 1vw, 6px) !important;
		transform-origin: top center !important;
		backface-visibility: hidden !important;
	}
	#esl-game-show.is-fullscreen[data-state="game"] .esl-game-show-board-banner {
		padding-left: clamp(8px, 2vw, 16px) !important;
		padding-right: clamp(8px, 2vw, 16px) !important;
	}
	#esl-game-show.is-fullscreen[data-state="game"] .esl-game-show-board-grid {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		gap: clamp(4px, 0.9vmin, 7px) !important;
		padding-right: 0 !important;
		overflow-x: hidden !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: auto !important;
	}

	/*
	 * Question modal (≤1024px): use generous width so 2×2 options get wider cells before JS scale.
	 * JS uses scale(sx, sy) — wider card + sx≈1 keeps body text readable when only height is tight.
	 */
	#esl-game-question-modal.esl-game-show-modal {
		padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px))
			max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)) !important;
	}
	#esl-game-question-modal .esl-game-show-modal__wrapper {
		width: calc(100% - 20px) !important;
		max-width: min(96vw, 880px) !important;
	}
	#esl-game-question-modal .esl-game-show-modal__front-inner,
	#esl-game-question-modal .esl-game-show-modal__back-inner {
		padding: clamp(18px, 2.8vw, 30px) clamp(14px, 2.5vw, 26px) !important;
		gap: clamp(12px, 2vh, 22px) !important;
	}
	#esl-game-question-modal .esl-modal-options-grid.esl-modal-options-2x2 {
		max-width: 100% !important;
	}
	#esl-game-question-modal .esl-modal-option {
		font-size: clamp(0.92rem, 2.1vw, 1.05rem) !important;
	}

	/* Setup ≤420px: never stack gear above START — one row + compact START (beats theme / editor CSS). */
	@media (max-width: 420px) {
		#esl-game-show[data-state="setup"] .esl-game-show-start-actions {
			flex-direction: row !important;
			flex-wrap: nowrap !important;
			align-items: center !important;
			justify-content: center !important;
			row-gap: 0 !important;
			--esl-start-actions-gap: clamp(6px, 2.5vw, 10px) !important;
			--esl-start-narrow-px: min(78px, 20vw) !important;
		}
		#esl-game-show[data-state="setup"] .esl-game-show-start-actions .esl-setup-settings-btn {
			flex-shrink: 0 !important;
		}
		#esl-game-show[data-state="setup"] .esl-game-show-start-actions .esl-game-show-btn--start,
		#esl-game-show[data-state="setup"] .esl-game-show-start-actions #esl-btn-start {
			flex: 1 1 auto !important;
			min-width: 0 !important;
			width: auto !important;
			max-width: calc(
				100% - var(--esl-setup-settings-btn-w, 42px) - var(--esl-start-actions-gap, 10px) - 5px -
					var(--esl-start-narrow-px, 50px)
			) !important;
			font-size: clamp(0.68rem, 3.4vw, 0.82rem) !important;
			padding-left: clamp(6px, 2vw, 12px) !important;
			padding-right: clamp(6px, 2vw, 12px) !important;
			line-height: 1.15 !important;
		}
	}
}

/* Landscape: slightly tighter vertical rhythm in the center slot (same fit + optional JS scale). */
@media (max-width: 1024px) and (orientation: landscape) {
	/* Fill the grid row so vertical centering (wrap justify-content) has a defined slot height. */
	#esl-game-show.is-fullscreen[data-state="setup"] .esl-game-show-panel.esl-game-show-panel--center {
		height: 100% !important;
		min-height: 0 !important;
	}
	#esl-game-show.is-fullscreen[data-state="setup"] {
		--esl-dash-gap: clamp(2px, 0.5vh, 5px);
	}
	#esl-game-question-modal .esl-game-show-modal__wrapper {
		width: calc(100% - 12px) !important;
		max-width: min(96vw, 980px) !important;
	}
}

/*
 * JS may append `#esl-game-show-fullscreen` to `body` on mobile / narrow viewports so it is not clipped
 * by transformed or overflow ancestors. Keep viewport-fixed chrome when width > 1024 (e.g. tablet
 * landscape) — rules above only apply inside `(max-width: 1024px)`.
 */
body > #esl-game-show-fullscreen.esl-game-show-fullscreen {
	position: fixed !important;
	top: auto !important;
	bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
	right: max(10px, env(safe-area-inset-right, 0px)) !important;
	z-index: 100006 !important;
}
body > #esl-game-show-fullscreen.esl-game-show-fullscreen.esl-game-show-fullscreen--stage-fs {
	top: auto !important;
	bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
	right: max(14px, env(safe-area-inset-right, 0px)) !important;
}

/* Wide PC: body-pinned control still uses fixed positioning from above — snap to top-right (≤1024 unchanged). */
@media (min-width: 1025px) {
	body > #esl-game-show-fullscreen.esl-game-show-fullscreen {
		top: max(12px, env(safe-area-inset-top, 0px)) !important;
		bottom: auto !important;
		right: max(12px, env(safe-area-inset-right, 0px)) !important;
		left: auto !important;
	}
	body > #esl-game-show-fullscreen.esl-game-show-fullscreen.esl-game-show-fullscreen--stage-fs {
		top: max(16px, env(safe-area-inset-top, 0px)) !important;
		bottom: auto !important;
		right: max(16px, env(safe-area-inset-right, 0px)) !important;
		left: auto !important;
	}
}