/* ==================================================================
   Casino Lucky Roulette — public/css/roulette.css
   All selectors are namespaced with "clr-" to avoid colliding with
   the active theme or other plugins (Elementor included).
   ================================================================== */

.clr-root {
	--clr-color-primary: #0a0a0a;
	--clr-color-secondary: #141210;
	--clr-color-accent: #c9a24b;
	--clr-color-background: #0a0a0a;
	--clr-gold-light: #e4c877;
	--clr-white: #f5f3ef;
	--clr-muted: rgba(245, 243, 239, 0.7);
	--clr-red: #8a1f1f;
	--clr-black: #141210;
	--clr-green: #0f6b3c;
	--clr-radius: 14px;
	--clr-font: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--clr-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	/* Referenced by .clr-screen--landing to bleed its background video out
	   to the true edge of .clr-root regardless of breakpoint — keep these
	   in sync with the padding shorthand below and in the media queries. */
	--clr-pad-y: 56px;
	--clr-pad-x: 24px;

	position: relative;
	box-sizing: border-box;
	/* Full-bleed breakout: width:100% alone only fills whatever container
	   the shortcode happens to sit in (e.g. a centered content column), not
	   the actual browser viewport. left/right 50% + matching negative
	   margins re-centers a 100vw box on the viewport regardless of how
	   narrow or off-center the parent container is. Needs the page to not
	   already be clipping horizontal overflow oddly — 100vw can exceed the
	   visible width by the scrollbar's own width on some browsers. */
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	color: var(--clr-white);
	font-family: var(--clr-font-ui);
	overflow: hidden;
	padding: var(--clr-pad-y) var(--clr-pad-x);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	isolation: isolate;
}

.clr-root *,
.clr-root *::before,
.clr-root *::after {
	box-sizing: border-box;
}

/* Fullscreen mode. inset:0 overrides the base rule's left/right:50% (same
   specificity, this rule wins on source order), but margin-left/-right
   and width:100vw from the breakout are untouched by `inset` — left as
   -50vw/100vw they'd shove this fixed, already-full-viewport box 50vw off
   to the left, so they're reset explicitly here. */
.clr-root.is-fullscreen {
	position: fixed;
	inset: 0;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	z-index: 100000;
	border-radius: 0;
	min-height: 100vh;
	animation: clr-fade-in 0.4s ease both;
}

.clr-close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(201, 162, 75, 0.35);
	background: rgba(0, 0, 0, 0.4);
	color: var(--clr-white);
	font-size: 16px;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.clr-root.is-fullscreen .clr-close-btn {
	display: flex;
}

.clr-close-btn:hover {
	background: var(--clr-color-accent);
	color: #0a0a0a;
	border-color: var(--clr-color-accent);
}

/* ---------------- Screens & cinematic transitions ---------------- */

.clr-screen {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 980px;
	display: none;
	opacity: 0;
	filter: blur(6px);
}

.clr-screen.is-active {
	display: block;
	animation: clr-screen-in 0.7s ease forwards;
}

.clr-screen.is-leaving {
	display: block;
	animation: clr-screen-out 0.4s ease forwards;
}

/* No transform/scale/translate here on purpose — a transform animation on
   this element visually moves EVERY descendant with it, including
   .clr-wheel-stage, which is what made the wheel appear to slide in/out on
   every screen switch. Fade + blur only, so nothing ever changes position. */
@keyframes clr-screen-in {
	from {
		opacity: 0;
		filter: blur(6px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes clr-screen-out {
	from {
		opacity: 1;
		filter: blur(0);
	}
	to {
		opacity: 0;
		filter: blur(6px);
	}
}

@keyframes clr-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---------------- Landing (cinematic intro) ---------------- */

/* The intro/start screen is its own self-contained cinematic "stage": a
   looping, silent background video (public/js does not touch this — it is
   pure <video autoplay muted loop playsinline>), shown with no
   overlay/filter over it (removed by design), plus staggered fades on
   the copy so the reveal feels directed rather than instant.
   It bleeds out to the true edge of .clr-root — negative margins matching
   .clr-root's own padding (via --clr-pad-x/--clr-pad-y) cancel that
   padding out exactly, and .clr-root's own overflow:hidden clips the
   result at its border, so the video reads as the section's actual full
   background rather than a framed card floating inside it. max-width is
   dropped for the same reason: .clr-screen caps every other screen at
   980px, which would otherwise leave the video letterboxed. */
.clr-screen--landing {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	max-width: none;
	width: calc(100% + (2 * var(--clr-pad-x)));
	margin: calc(-1 * var(--clr-pad-y)) calc(-1 * var(--clr-pad-x));
	padding: 64px 32px;
	background: radial-gradient(ellipse at center, #1a1611 0%, #0a0a0a 75%);
}

/* .clr-screen.is-active (two classes) would otherwise beat this on
   specificity and force display:block, killing the flex centering — this
   selector matches that specificity and wins on source order instead.
   align-self: stretch makes the screen fill .clr-root's full cross-axis
   height instead of shrinking to its content's height, which is what lets
   the video cover the section top-to-bottom instead of just around the
   copy. */
.clr-screen--landing.is-active,
.clr-screen--landing.is-leaving {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
}

.clr-landing__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.clr-landing__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 640px;
}

.clr-landing__content > * {
	opacity: 0;
	transform: translateY(14px);
	animation: clr-landing-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.clr-landing__content > .clr-landing__logo { animation-delay: 0.05s; }
.clr-landing__content > .clr-eyebrow { animation-delay: 0.15s; }
.clr-landing__content > .clr-landing__title { animation-delay: 0.28s; }
.clr-landing__content > .clr-landing__subtitle { animation-delay: 0.42s; }
/* .clr-landing__cta's delay is set in its own rule below, not here — it
   needs the full animation shorthand for its second (looping glow)
   animation, which would reset a delay set only here back to 0. */

@keyframes clr-landing-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

.clr-landing__logo {
	max-height: 64px;
	margin: 0 auto 20px;
	filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.5));
}

.clr-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 10px;
	font-family: var(--clr-font-ui);
	font-size: 12px;
	letter-spacing: 4px;
	color: var(--clr-gold-light);
	text-transform: uppercase;
}

.clr-eyebrow__line {
	width: 30px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--clr-color-accent));
}

.clr-eyebrow__line:last-child {
	background: linear-gradient(90deg, var(--clr-color-accent), transparent);
}

.clr-landing__title {
	margin: 0;
	font-family: var(--clr-font);
	font-weight: 600;
	font-size: clamp(36px, 6.5vw, 68px);
	letter-spacing: 2px;
	color: var(--clr-white);
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 0 60px rgba(201, 162, 75, 0.3);
}

.clr-landing__subtitle {
	margin: 14px 0 40px;
	font-size: clamp(15px, 2vw, 19px);
	color: var(--clr-muted);
	letter-spacing: 0.5px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* CTA gets its own shimmer sweep on hover and a slow idle glow so it reads
   as the obvious next move on an otherwise cinematic, low-motion screen. */
/* Full shorthand here (not animation-delay alone) because this rule needs
   a second, looping animation the shared .clr-landing__content > * rule
   doesn't have — so the 0.58s stagger delay is repeated inline rather than
   inherited, since the shorthand would otherwise reset it to 0. */
.clr-landing__cta {
	position: relative;
	overflow: hidden;
	animation:
		clr-landing-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.58s forwards,
		clr-cta-glow 2.6s ease-in-out 1.4s infinite;
}

.clr-landing__cta span {
	position: relative;
	z-index: 1;
}

.clr-landing__cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
	transform: translateX(-120%);
	transition: transform 0.7s ease;
}

.clr-landing__cta:hover::before {
	transform: translateX(120%);
}

@keyframes clr-cta-glow {
	0%, 100% { box-shadow: 0 0 0 rgba(201, 162, 75, 0); }
	50% { box-shadow: 0 0 26px rgba(201, 162, 75, 0.45); }
}

@media (max-width: 600px) {
	.clr-screen--landing {
		padding: 48px 20px;
	}
}

/* Follows the site's light/dark toggle (arena-casino theme sets
   data-theme on <html>) — the rest of .clr-root stays on its own fixed
   dark palette by design. This covers every label/heading/button text that
   needs to flip to dark ink to stay legible on the light page background.
   .clr-screen__text is deliberately split: the LOSER screen's version
   stays the light, muted off-white it already renders in (var(--clr-muted),
   never tied to site theme) — but the WINNER screen's ("You've won free
   casino entry.") goes dark here instead, along with the claim form's
   labels and consent text right below it.
   .clr-landing__title / .clr-landing__subtitle are deliberately excluded —
   they sit directly over the landing video (no scrim/overlay/filter on
   it, by design — see .clr-landing__video), so their own text-shadow is
   what keeps them legible, and they stay light regardless of the site's
   theme. */
html[data-theme="light"] .clr-step__title,
html[data-theme="light"] .clr-color-chip,
html[data-theme="light"] .clr-lose-winning-label,
html[data-theme="light"] .clr-win-number-color,
html[data-theme="light"] .clr-result-banner__label,
html[data-theme="light"] .clr-screen__headline {
	color: var(--clr-color-secondary);
}

html[data-theme="light"] .clr-screen--winner .clr-screen__text,
html[data-theme="light"] .clr-form__row label,
html[data-theme="light"] .clr-form__row--checkbox label {
	color: rgba(28, 24, 21, 0.65);
}

/* The typed value inside First Name / Last Name / Email — the input
   background stays transparent (so the page's own light background shows
   through), so the text itself needs to switch to dark ink or it's
   invisible against it. */
html[data-theme="light"] .clr-form__row input[type="text"],
html[data-theme="light"] .clr-form__row input[type="email"] {
	color: #1c1815;
}

/* ---------------- Buttons ---------------- */

.clr-btn {
	font-family: var(--clr-font-ui);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: var(--radius-md, 10px);
	padding: 16px 40px;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--clr-color-accent);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.clr-btn--gold,
.clr-btn--outline {
	background: transparent;
	color: var(--clr-gold-light);
}

.clr-btn--gold:hover:not(:disabled),
.clr-btn--outline:hover:not(:disabled) {
	background: var(--clr-color-accent);
	color: #0a0a0a;
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(201, 162, 75, 0.35);
}

.clr-btn--lg {
	padding: 18px 52px;
	font-size: 15px;
}

.clr-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---------------- Status screens (coming soon / ended / limit) ---------------- */

.clr-screen--status {
	padding: 80px 20px;
}

.clr-screen__headline {
	font-family: var(--clr-font);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: 1.5px;
	color: var(--clr-gold-light);
	margin: 0 0 14px;
}

.clr-screen__text {
	color: var(--clr-muted);
	font-size: 16px;
	max-width: 480px;
	margin: 0 auto;
	line-height: 1.7;
}

/* ---------------- Game layout ---------------- */

.clr-game-layout {
	display: grid;
	grid-template-columns: minmax(300px, 460px) 1fr;
	gap: 40px;
	align-items: center;
	text-align: left;
}

/* Buttons and text stay visible during the spin — nothing fades/blurs out. */

/* Wheel — stays exactly where it is and only rotates in place, no
   resizing or layout shift while spinning, so it never "jumps". */
.clr-wheel-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Single, clean circular mask — nothing painted inside this box (the
   rotating slices, the ball) can ever escape the circle, at any angle.
   The drop-shadow lives here as a box-shadow (not a CSS `filter`) —
   `filter` forces the browser to rasterize/recomposite this entire
   subtree every frame, which is what made the static sheen circle
   underneath appear to drift while the wheel span. box-shadow has no
   such effect on child rendering, and this element is already a
   perfect circle (border-radius: 50%), so the shadow follows the same
   shape either way. */
.clr-wheel-wrap {
	position: relative;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
}

/* Mount point for the Three.js canvas (see public/js/roulette-3d.js).
   CLRRoulette3D sizes the <canvas> itself on init/resize; this container
   just needs to fill the circular frame it sits in. */
.clr-wheel-3d {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.clr-wheel-3d canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.clr-wheel-pointer {
	position: absolute;
	top: -6px;
	left: 50%;
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 16px solid var(--clr-color-accent);
	z-index: 2;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.clr-result-banner {
	margin-top: 24px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	text-align: center;
}

.clr-result-banner.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.clr-result-banner__label {
	display: block;
	font-size: 12px;
	letter-spacing: 3px;
	color: var(--clr-muted);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.clr-result-banner__number {
	font-family: var(--clr-font);
	font-size: 36px;
	font-weight: 600;
	color: var(--clr-gold-light);
}

/* Steps */

.clr-controls {
	display: flex;
	flex-direction: column;
	gap: 28px;
	transition: opacity 0.4s ease, filter 0.4s ease;
}

.clr-step--number {
	display: none;
}

.clr-step--number.is-active {
	display: block;
	animation: clr-step-reveal 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes clr-step-reveal {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.clr-step__label {
	margin: 0 0 4px;
	font-size: 11px;
	letter-spacing: 3px;
	color: var(--clr-color-accent);
	text-transform: uppercase;
}

.clr-step__title {
	margin: 0 0 18px;
	font-family: var(--clr-font);
	font-size: 24px;
	font-weight: 600;
	color: var(--clr-white);
}

.clr-color-choices {
	display: flex;
	gap: 16px;
}

.clr-color-chip {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 20px;
	border-radius: 12px;
	border: 1px solid rgba(201, 162, 75, 0.25);
	background: rgba(255, 255, 255, 0.03);
	color: var(--clr-white);
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.clr-color-chip__dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-block;
}

.clr-color-chip--red .clr-color-chip__dot {
	background: var(--clr-red);
}

.clr-color-chip--black .clr-color-chip__dot {
	background: #2b2825;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.clr-color-chip:hover {
	transform: translateY(-2px);
	border-color: var(--clr-color-accent);
}

.clr-color-chip[aria-pressed="true"] {
	border-color: var(--clr-color-accent);
	background: rgba(201, 162, 75, 0.12);
	box-shadow: 0 0 0 1px var(--clr-color-accent), 0 10px 24px rgba(201, 162, 75, 0.25);
	transform: scale(1.03);
}

.clr-number-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}

.clr-number {
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--clr-white);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.clr-number--red {
	background: var(--clr-red);
}

.clr-number--black {
	background: #201d1a;
}

.clr-number--green {
	background: var(--clr-green);
}

.clr-number.is-filtered-out {
	display: none;
}

.clr-number:hover {
	transform: translateY(-2px);
}

.clr-number[aria-pressed="true"] {
	border-color: var(--clr-color-accent);
	box-shadow: 0 0 0 2px var(--clr-color-accent);
	transform: scale(1.08);
}

.clr-try-luck-btn {
	align-self: flex-start;
}

/* ---------------- Winner screen ---------------- */

.clr-screen--winner,
.clr-screen--loser {
	padding: 20px 12px;
}

.clr-win-fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.clr-win-fx__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 600px;
	height: 600px;
	margin: -300px 0 0 -300px;
	background: radial-gradient(circle, rgba(201, 162, 75, 0.35), transparent 65%);
	opacity: 0;
}

.clr-root .clr-screen--winner.is-active .clr-win-fx__glow {
	animation: clr-glow-pulse 1.8s ease-out forwards;
}

@keyframes clr-glow-pulse {
	0% { opacity: 0; transform: scale(0.6); }
	40% { opacity: 1; }
	100% { opacity: 0.15; transform: scale(1); }
}

.clr-win-fx__particle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--clr-color-accent);
	opacity: 0;
}

.clr-root .clr-screen--winner.is-active .clr-win-fx__particle {
	animation: clr-particle-rise 1.6s ease-out forwards;
}

.clr-win-fx__particle:nth-child(2) { left: 30%; animation-delay: 0.05s; }
.clr-win-fx__particle:nth-child(3) { left: 42%; animation-delay: 0.15s; }
.clr-win-fx__particle:nth-child(4) { left: 58%; animation-delay: 0.1s; }
.clr-win-fx__particle:nth-child(5) { left: 68%; animation-delay: 0.22s; }
.clr-win-fx__particle:nth-child(6) { left: 50%; animation-delay: 0.3s; }
.clr-win-fx__particle:nth-child(7) { left: 62%; animation-delay: 0.35s; }

@keyframes clr-particle-rise {
	0% { opacity: 0; transform: translateY(0) scale(0.6); }
	20% { opacity: 1; }
	100% { opacity: 0; transform: translateY(-180px) scale(1); }
}

.clr-win-result,
.clr-lose-result {
	position: relative;
	z-index: 1;
	margin: 0 auto 18px;
}

.clr-win-number {
	font-family: var(--clr-font);
	font-size: clamp(64px, 10vw, 96px);
	font-weight: 700;
	color: var(--clr-gold-light);
	display: block;
	line-height: 1;
	text-shadow: 0 0 50px rgba(201, 162, 75, 0.5);
}

.clr-win-number-color {
	display: block;
	margin-top: 6px;
	letter-spacing: 4px;
	font-size: 13px;
	color: var(--clr-muted);
	text-transform: uppercase;
}

.clr-lose-winning-label {
	position: relative;
	z-index: 1;
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 3px;
	color: var(--clr-muted);
	text-transform: uppercase;
}

.clr-screen--winner .clr-screen__headline,
.clr-screen--loser .clr-screen__headline {
	position: relative;
	z-index: 1;
}

.clr-screen--winner .clr-screen__text,
.clr-screen--loser .clr-screen__text {
	position: relative;
	z-index: 1;
	margin-bottom: 28px;
}

.clr-screen--loser .clr-btn {
	position: relative;
	z-index: 1;
}

/* ---------------- Winner form ---------------- */

.clr-winner-form-wrap {
	position: relative;
	z-index: 1;
	max-width: 420px;
	margin: 0 auto;
	text-align: left;
}

.clr-hp-field {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.clr-form__row {
	margin-bottom: 16px;
}

.clr-form__row label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: var(--clr-muted);
}

.clr-form__row input[type="text"],
.clr-form__row input[type="email"] {
	width: 100%;
	padding: 13px 16px;
	border-radius: var(--radius-md, 10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: transparent;
	color: var(--clr-white);
	font-size: 15px;
	font-family: var(--clr-font-ui);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.clr-form__row input:hover,
.clr-form__row input:focus {
	background: rgba(255, 255, 255, 0.04);
}

.clr-form__row input:focus {
	outline: none;
	border-color: var(--clr-color-accent);
}

.clr-form__row--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--clr-muted);
	font-size: 13px;
	line-height: 1.6;
}

.clr-form__row--checkbox a {
	color: var(--clr-gold-light);
}

.clr-form__row--checkbox input {
	margin-top: 3px;
}

.clr-form__error {
	display: block;
	color: #e07a7a;
	font-size: 12px;
	margin-top: 4px;
	min-height: 14px;
}

.clr-form__general-error {
	color: #e07a7a;
	font-size: 13px;
	min-height: 16px;
}

.clr-claim-btn {
	width: 100%;
	margin-top: 8px;
}

.clr-google-form iframe {
	width: 100%;
	min-height: 520px;
	border: none;
	border-radius: 12px;
	background: #fff;
}

.clr-thankyou-badge {
	display: inline-block;
	margin-top: 18px;
	padding: 10px 22px;
	border: 1px solid var(--clr-color-accent);
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--clr-gold-light);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
	.clr-game-layout {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.clr-controls {
		align-items: center;
	}

	.clr-step__title {
		text-align: center;
	}

	.clr-try-luck-btn {
		align-self: center;
	}
}

@media (max-width: 600px) {
	.clr-root {
		--clr-pad-y: 40px;
		--clr-pad-x: 16px;
		min-height: 100vh;
	}

	.clr-number-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.clr-color-choices {
		flex-direction: column;
	}

	.clr-btn--lg {
		width: 100%;
	}
}

@media (max-width: 430px) {
	.clr-number-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 6px;
	}

	.clr-number {
		font-size: 12px;
	}
}

/* ---------------- Accessibility ---------------- */

@media (prefers-reduced-motion: reduce) {
	.clr-screen,
	.clr-screen.is-active,
	.clr-screen.is-leaving,
	.clr-win-fx__glow,
	.clr-win-fx__particle,
	.clr-landing__content > *,
	.clr-landing__cta,
	.clr-landing__cta::before {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}

	.clr-screen.is-active {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.clr-landing__content > * {
		opacity: 1;
		transform: none;
	}

	.clr-landing__video {
		display: none;
	}
}

.clr-root :focus-visible {
	outline: 2px solid var(--clr-color-accent);
	outline-offset: 2px;
}