/* ==========================================================================
   PLAY CURTAIN — cover art above PLAY NOW, over a classic black gradient
   --------------------------------------------------------------------------
   Loaded only on a single game page, after frontend.css, which it overrides.

   Why its own file rather than more lines in frontend.css: LiteSpeed builds a
   minified sheet's hashed URL from the *source path*, not its contents, and the
   vhost serves those with max-age=31536000. Editing frontend.css therefore
   reaches returning visitors whenever their year is up — fine for a tweak, not
   fine for CSS that new markup depends on. A new path is fetched by everyone.

   No calc() with + or - anywhere in here: LSCache's minifier strips the spaces
   the spec requires around those operators and the declaration is discarded.
   ========================================================================== */

/* The curtain's contents, stacked. Also re-declares the z-index that lifts
   these above the blurred cover layers, so the file stands on its own. */
.ra-start-stack {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	max-width: 100%;
}

/* Fixed frame, image contained inside it: the box is the same size before and
   after the picture decodes, so nothing on the curtain moves. aspect-ratio
   derives the width from the height for the same reason. */
.ra-start-cover {
	display: block;
	box-sizing: border-box;
	aspect-ratio: 4 / 3;
	height: clamp(84px, 22vh, 168px);
	max-width: 88%;
	padding: 0;
	background: #000;
	/* Beveled cabinet frame, light top-left / dark bottom-right, no radius —
	   the same language as .ra-start-game-btn and .ra-tips-bar. */
	border: 3px solid;
	border-color: #e8e8f0 #62626f #62626f #e8e8f0;
	border-radius: 0;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.55), 0 0 0 3px #14161f;
	overflow: hidden;
}

.ra-start-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* The classic filter: a dark top and a darker floor, with the corners rolled
   off into a vignette — the way an attract screen looked through the glass.
   This replaces the flat radial dim that frontend.css puts over the blurred
   cover; the blurred layer itself (::before) is left alone. */
.ra-player-has-cover .ra-loading-overlay::after {
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.86) 0%,
			rgba(0, 0, 0, 0.44) 26%,
			rgba(0, 0, 0, 0.52) 58%,
			rgba(0, 0, 0, 0.94) 100%
		),
		radial-gradient(
			118% 118% at 50% 44%,
			rgba(0, 0, 0, 0) 38%,
			rgba(0, 0, 0, 0.55) 74%,
			rgba(0, 0, 0, 0.88) 100%
		);
}

/* A game with no cover keeps the plain black curtain, but gets the same
   gradient so the button sits in the middle of a lit area rather than on a
   flat rectangle. */
.ra-loading-overlay {
	background-image: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(24, 24, 32, 0.15) 42%,
		rgba(0, 0, 0, 0.65) 100%
	);
}

/* Tight player frames (phones in portrait, short windows): the cover would
   crowd the button, so drop it and leave the curtain as it was. */
@media (max-height: 430px) {
	.ra-start-cover {
		display: none;
	}
}