/**
 * GCX Upload Manager — Version 6.0 Responsive Game Engine.
 *
 * Styles the `[gcxum_game_player]` shortcode: an aspect-ratio
 * preserving, auto-scaling, auto-centering embedded player that works
 * the same way on Desktop, Laptop, Tablet, Phone Portrait and Phone
 * Landscape without an administrator ever configuring a screen size —
 * every rule below is either a fluid percentage or a breakpoint keyed
 * off the *viewport*, never a fixed pixel box.
 *
 * Scoped entirely under .gcxum- classes so it never fights with the
 * visitor's own theme.
 */

.gcxum-player {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 1.5em 0;
	background: #0f172a;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.15);
	/* Smooth Resize Animation: the box itself is always fluid (%, never
	   fixed px), so a browser-window resize or an orientation change
	   already reflows it instantly — this transition only softens the
	   visual jump on the couple of properties (border-radius, margin)
	   that genuinely DO change value at a breakpoint below, so a resize
	   never feels like a hard layout jump. Disabled entirely under
	   prefers-reduced-motion (see below). */
	transition: border-radius 0.2s ease, margin 0.2s ease;
}

/* -- Auto scale / auto center / keep aspect ratio ---------------------- */

.gcxum-player-frame {
	position: relative;
	width: 100%;
	/* aspect-ratio is also set inline per-game (see Shortcodes::render_game_player)
	   so the correct shape survives even where this stylesheet fails to load. */
	aspect-ratio: 16 / 9;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.gcxum-player-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.gcxum-player-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	background: #000;
	opacity: 1;
	transition: opacity 0.25s ease;
}

.gcxum-player-loading::before {
	content: '';
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #ffffff;
	animation: gcxum-spin 0.8s linear infinite;
}

.gcxum-player-loading.gcxum-is-hidden {
	opacity: 0;
	pointer-events: none;
}

@keyframes gcxum-spin {
	to {
		transform: rotate(360deg);
	}
}

/* -- Controls ------------------------------------------------------------ */

.gcxum-player-controls {
	display: flex;
	justify-content: flex-end;
	padding: 0.6em 0.75em;
	background: #1e293b;
}

.gcxum-player-fullscreen {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	padding: 0.5em 0.9em;
	font-size: 0.9em;
	cursor: pointer;
	/* Large-enough hit target for touch, per the brief's "large touch buttons". */
	min-height: 44px;
	min-width: 44px;
	transition: background-color 0.15s ease;
}

.gcxum-player-fullscreen:hover,
.gcxum-player-fullscreen:focus-visible {
	background: rgba(255, 255, 255, 0.2);
}

.gcxum-player-fullscreen-icon {
	font-size: 1.1em;
	line-height: 1;
}

/* -- Fullscreen mode (native Fullscreen API OR the pseudo-fullscreen
      fallback game-player.js applies on browsers without it, e.g. iOS
      Safari, which never exposes element.requestFullscreen()). ------- */

.gcxum-player.gcxum-is-fullscreen,
.gcxum-player:fullscreen,
.gcxum-player:-webkit-full-screen {
	position: fixed;
	inset: 0;
	z-index: 999999;
	width: 100vw;
	height: 100vh;
	max-width: none;
	margin: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	/* Respect iPhone Dynamic Island / Android notch safe areas per the
	   brief's Mobile Compatibility Check. */
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.gcxum-player.gcxum-is-fullscreen .gcxum-player-frame,
.gcxum-player:fullscreen .gcxum-player-frame,
.gcxum-player:-webkit-full-screen .gcxum-player-frame {
	aspect-ratio: unset !important;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
}

.gcxum-player.gcxum-is-fullscreen .gcxum-player-controls,
.gcxum-player:fullscreen .gcxum-player-controls,
.gcxum-player:-webkit-full-screen .gcxum-player-controls {
	position: absolute;
	top: env(safe-area-inset-top);
	right: env(safe-area-inset-right);
	background: transparent;
	padding: 0.75em;
	z-index: 2;
}

/* -- Device breakpoints (Desktop/Laptop implicit as the default;
      Tablet and Phone below) — used only for the light layout tweaks
      that genuinely differ by viewport, never for arbitrary fixed
      sizing the brief says an admin should never have to configure. */

/* Tablet */
@media (max-width: 1023px) {
	.gcxum-player {
		border-radius: 10px;
	}
}

/* Phone (portrait or landscape) */
@media (max-width: 767px) {
	.gcxum-player {
		margin: 1em 0;
		border-radius: 8px;
	}

	.gcxum-player-fullscreen-label {
		display: none;
	}

	.gcxum-player-fullscreen {
		padding: 0.6em;
	}
}

/* Phone landscape specifically: the frame is already wide, so let it
   fill more of the viewport height instead of being letterboxed thin. */
@media (max-width: 926px) and (orientation: landscape) {
	.gcxum-player-frame {
		max-height: 88vh;
	}
}

@media (prefers-color-scheme: dark) {
	.gcxum-player {
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gcxum-player-loading::before {
		animation-duration: 1.6s;
	}

	.gcxum-player-fullscreen,
	.gcxum-player {
		transition: none;
	}
}