/* Game player. Overworld palette; logical properties so /ar/ mirrors. */
.mobcliq-player {
	margin-block: 1rem 2rem;
}

.mobcliq-player__stage {
	position: relative;
	inline-size: 100%;
	max-inline-size: calc(80vh * (var(--mobcliq-ratio)));
	margin-inline: auto;
	aspect-ratio: var(--mobcliq-ratio);
	max-block-size: 80vh;
	background: #1b0f23;
	outline: 1px solid oklch(1 0 0 / 0.1);
	outline-offset: -1px;
	overflow: hidden;
}

.mobcliq-player__stage iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.mobcliq-player__start {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	background: #1b0f23;
	cursor: pointer;
}

/* display:grid above would otherwise override the hidden attribute and cover the running game. */
.mobcliq-player__start[hidden] {
	display: none;
}

.mobcliq-player__poster {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0.45;
	filter: blur(2px);
}

.mobcliq-player__play {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 3.5rem;
	padding-inline: 1.75rem 2rem;
	background: #6b54b6;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 8px 24px oklch(0 0 0 / 0.35);
	transition-property: transform, background-color;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

@media (hover: hover) {
	.mobcliq-player__start:hover .mobcliq-player__play {
		background: #7a63c8;
	}
}

.mobcliq-player__start:active .mobcliq-player__play {
	transform: scale(0.96);
}

.mobcliq-player__start:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

.mobcliq-player__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-block-start: 0.75rem;
}

.mobcliq-player__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.75rem;
	padding-inline: 1rem;
	border: 1px solid oklch(1 0 0 / 0.18);
	background: #22152c;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition-property: background-color, border-color;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

.mobcliq-player__btn[hidden] {
	display: none;
}

@media (hover: hover) {
	.mobcliq-player__btn:hover {
		background: #2d1d3a;
		border-color: oklch(1 0 0 / 0.35);
	}
}

.mobcliq-player__btn:active {
	transform: scale(0.96);
}

.mobcliq-player__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mobcliq-player__btn svg {
	flex: none;
}

/* The share/fullscreen arrows point the same way in both directions; nothing to mirror. */

.mobcliq-player__status {
	min-block-size: 1.5em;
	margin: 0.5rem 0 0;
	text-align: center;
	color: #bab9bb;
	font-size: 0.875rem;
}

/* Native full screen: the stage fills the screen, the game keeps its aspect ratio. */
.mobcliq-player__stage:fullscreen {
	max-inline-size: none;
	max-block-size: none;
	inline-size: 100vw;
	block-size: 100vh;
	aspect-ratio: auto;
	background: #000;
}

/* iPhone fallback: cover the viewport. */
.mobcliq-player.is-pseudo-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* above Overworld's fixed header */
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
	padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
	background: #000;
}

.mobcliq-player.is-pseudo-fullscreen .mobcliq-player__stage {
	flex: 1;
	max-inline-size: none;
	max-block-size: none;
	aspect-ratio: auto;
}

.mobcliq-player.is-pseudo-fullscreen .mobcliq-player__bar {
	margin-block: 0.5rem;
}

.mobcliq-player.is-pseudo-fullscreen [data-action="share"],
.mobcliq-player.is-pseudo-fullscreen .mobcliq-player__status {
	display: none;
}

.mobcliq-no-scroll,
.mobcliq-no-scroll body {
	overflow: hidden;
}

/* Overworld's content wrappers are stacking contexts (z-index 100/101) below its header (110),
   which would sit on top of the full-screen player. Lift them while it's open. */
.mobcliq-no-scroll .edgtf-content,
.mobcliq-no-scroll .edgtf-container {
	z-index: 2147482000;
}

@media (prefers-reduced-motion: reduce) {
	.mobcliq-player__play,
	.mobcliq-player__btn {
		transition: none;
	}
}