:root {
	--ui-bg: rgba(8, 10, 20, 0.72);
	--ui-panel: rgba(20, 24, 44, 0.62);
	--ui-accent: #7c5cff;
	--ui-accent2: #2ef2ff;
	--ui-text: rgba(255, 255, 255, 0.92);
	--ui-muted: rgba(255, 255, 255, 0.66);
	--ui-radius: 18px;

	--reel-max-width: 1100px;
	--reel-stage-aspect: 5 / 3;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100svh;
	color: var(--ui-text);
	background: #050611;
	font-family: var(--aps-font-family, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji");
}

button, input { font: inherit; }

.reel-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image:
		var(--reel-bg-image, none),
		radial-gradient(1200px 900px at 20% 15%, rgba(124, 92, 255, 0.18), transparent 60%),
		radial-gradient(1200px 900px at 80% 25%, rgba(46, 242, 255, 0.12), transparent 55%),
		linear-gradient(180deg, #050611 0%, #040414 50%, #06051a 100%);
	background-size: cover, cover, cover, cover;
	background-position: center, center, center, center;
	background-repeat: no-repeat;
}

.reel-bgVideo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

.reel-bgShade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0.68));
}

.reel-bgGrain {
	position: absolute;
	inset: 0;
	opacity: 0.08;
	background-image:
		linear-gradient(0deg, rgba(255,255,255,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 64px 64px;
}

.reel-snow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	mix-blend-mode: screen;
	overflow: hidden;
}

.reel-snowDrop {
	position: absolute;
	top: -24px;
	width: var(--size, 10px);
	height: var(--size, 10px);
	opacity: var(--alpha, 0.75);
	transform: translate3d(0, 0, 0);
	will-change: transform, margin-left;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.0) 70%);
	filter: blur(0.2px);

	animation:
		reelSnowFall var(--dur, 6.5s) linear forwards,
		reelSnowSway var(--swayDur, 2.8s) ease-in-out infinite;
}

.reel-sparkles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	mix-blend-mode: screen;
}

.reel-sparkle {
	position: absolute;
	width: var(--size, 12px);
	height: var(--size, 12px);
	opacity: var(--alpha, 0.6);
	transform: translate3d(0, 0, 0) rotate(45deg) scale(0.9);
	will-change: transform, opacity, filter;

	/* diamond shape */
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.0) 60%),
		radial-gradient(circle at 70% 70%, rgba(46, 242, 255, 0.28), rgba(255,255,255,0.0) 55%);

	filter:
		drop-shadow(0 0 10px rgba(46, 242, 255, 0.16))
		drop-shadow(0 0 18px rgba(124, 92, 255, 0.10));

	animation: reelSparkleTwinkle var(--twinkle, 2.6s) ease-in-out var(--delay, 0s) infinite;
}

.reel-sparkle::before {
	content: "";
	position: absolute;
	inset: -35%;
	background:
		linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.65) 50%, transparent 100%),
		linear-gradient(0deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
	opacity: 0.45;
	transform: rotate(-45deg);
}

@keyframes reelSparkleTwinkle {
	0% {
		opacity: calc(var(--alpha, 0.6) * 0.25);
		transform: translate3d(0, 0, 0) rotate(45deg) scale(0.65);
		filter:
			drop-shadow(0 0 8px rgba(46, 242, 255, 0.10))
			drop-shadow(0 0 14px rgba(124, 92, 255, 0.06));
	}
	45% {
		opacity: var(--alpha, 0.6);
		transform: translate3d(0, 0, 0) rotate(45deg) scale(1.12);
		filter:
			drop-shadow(0 0 14px rgba(46, 242, 255, 0.22))
			drop-shadow(0 0 26px rgba(124, 92, 255, 0.14));
	}
	100% {
		opacity: calc(var(--alpha, 0.6) * 0.18);
		transform: translate3d(0, 0, 0) rotate(45deg) scale(0.7);
		filter:
			drop-shadow(0 0 7px rgba(46, 242, 255, 0.08))
			drop-shadow(0 0 12px rgba(124, 92, 255, 0.06));
	}
}

@keyframes reelSnowFall {
	from { transform: translate3d(0, -10px, 0); }
	to { transform: translate3d(0, calc(100vh + 40px), 0); }
}

@keyframes reelSnowSway {
	0% { margin-left: calc(var(--sway, 14px) * -1); }
	50% { margin-left: var(--sway, 14px); }
	100% { margin-left: calc(var(--sway, 14px) * -1); }
}

.reel-app {
	min-height: 100svh;
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	gap: 14px;
	padding: 14px;
}

.reel-header {
	max-width: var(--reel-max-width);
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--ui-radius);
	background: var(--ui-bg);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.reel-back {
	justify-self: start;
	text-decoration: none;
	color: var(--ui-text);
	opacity: 0.9;
	font-weight: 700;
}

.reel-back:hover { opacity: 1; }

.reel-brand {
	justify-self: center;
	display: grid;
	place-items: center;
	gap: 6px;
}

.reel-logo {
	max-height: 40px;
	max-width: min(60vw, 320px);
	object-fit: contain;
	display: none;
}

.reel-title {
	font-weight: 800;
	letter-spacing: 0.6px;
	font-size: 14px;
	opacity: 0.95;
}

.reel-headerRight {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 10px;
}

.reel-stageWrap {
	max-width: var(--reel-max-width);
	width: 100%;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}

.reel-stage {
	border-radius: var(--ui-radius);
	background: rgba(10, 12, 26, 0.50);
	border: 1px solid rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(10px);
	padding: 10px;
}

.reel-stageInner {
	width: 100%;
	border-radius: calc(var(--ui-radius) - 8px);
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.08);
	aspect-ratio: var(--reel-stage-aspect);
	overflow: hidden;
	position: relative;
	min-height: 260px;
	display: grid;
	place-items: center;
	transition: opacity 220ms ease, transform 220ms ease;
}

/* ===== Paid action latency cover (Spin) ===== */
html[data-aps-paid-kind="spin"][data-aps-paid-running="1"] .reel-stageInner{
	transform: translate3d(0, 0, 0);
}

html[data-aps-paid-kind="spin"][data-aps-paid-running="1"][data-aps-paid-late="1"] .reel-stageInner{
	/* Soft loop: keep subtle motion while awaiting a late response. */
	animation: apsReelLatePulse 520ms ease-in-out infinite;
}

@keyframes apsReelLatePulse{
	0%, 100%{ opacity: 0.96; }
	50%{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
	html[data-aps-paid-kind="spin"][data-aps-paid-running="1"][data-aps-paid-late="1"] .reel-stageInner{
		animation: none;
	}
}

.reel-status {
	border-radius: var(--ui-radius);
	padding: 10px 12px;
	background: var(--ui-bg);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.reel-statusText {
	font-weight: 700;
	color: var(--ui-text);
	opacity: 0.95;
}

.reel-deck {
	max-width: var(--reel-max-width);
	width: 100%;
	margin: 0 auto;
}

.reel-deckGrid {
	display: grid;
	gap: 10px;
	grid-template-columns: 1.1fr 1.2fr 1.4fr;
	grid-template-areas:
		"balance bet spin"
		"toggles wins mult";
}

.reel-panel {
	border-radius: var(--ui-radius);
	background: var(--ui-panel);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.10);
	padding: 12px;
	min-height: 64px;
}

.reel-panel[data-area="balance"] { grid-area: balance; }
.reel-panel[data-area="bet"] { grid-area: bet; }
.reel-panel[data-area="spin"] { grid-area: spin; }
.reel-panel[data-area="toggles"] { grid-area: toggles; }
.reel-panel[data-area="wins"] { grid-area: wins; }
.reel-panel[data-area="mult"] { grid-area: mult; }

.reel-panel--tight { display: grid; align-content: center; }

.reel-panel--spin {
	display: grid;
	align-content: center;
	gap: 8px;
}

/* Bet picker (opened by +) */
.reel-betPicker{
	position: fixed;
	inset: 0;
	z-index: 95;
	display: none;
	place-items: end center;
	padding: 14px;
	pointer-events: none;
}

.reel-betPicker[aria-hidden="false"]{
	display: grid;
	pointer-events: auto;
}

.reel-betPicker__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.62);
}

.reel-betPicker__panel{
	position: relative;
	width: min(94vw, 560px);
	border-radius: var(--ui-radius);
	background: var(--ui-bg);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.10);
	padding: 12px;
	display: grid;
	gap: 10px;
	box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}

.reel-betPicker__title{
	font-weight: 900;
	letter-spacing: 0.02em;
	text-align: center;
}

.reel-betPicker__grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.reel-betPicker__opt{
	width: 100%;
	justify-content: center;
}

.reel-betPicker__opt[aria-pressed="true"]{
	border-color: rgba(46, 242, 255, 0.28);
	box-shadow: 0 0 0 2px rgba(46, 242, 255, 0.10) inset;
}

@media (max-width: 560px){
	.reel-betPicker{ padding: 10px; }
	.reel-betPicker__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.reel-spinHint {
	font-size: 12px;
	color: var(--ui-muted);
	text-align: center;
}

.reel-kv {
	display: grid;
	gap: 6px;
}

.reel-kv__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ui-muted);
}

.reel-kv__value {
	font-size: 18px;
	font-weight: 900;
}

.reel-bet {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: center;
}

.reel-bet__center {
	display: grid;
	place-items: center;
	gap: 6px;
	justify-self: center;
}

.reel-wins {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.reel-toggles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.reel-btn {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	padding: 10px 12px;
	color: var(--ui-text);
	background: rgba(0, 0, 0, 0.22);
	cursor: pointer;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.reel-btn:hover { border-color: rgba(255, 255, 255, 0.28); }
.reel-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.reel-btn--ghost {
	background: rgba(255, 255, 255, 0.06);
}

.reel-btn--primary {
	background:
		linear-gradient(90deg, rgba(124, 92, 255, 0.95), rgba(46, 242, 255, 0.80));
	border-color: rgba(255, 255, 255, 0.20);
	color: rgba(255, 255, 255, 0.96);
	padding: 14px 14px;
	font-size: 18px;
}

.reel-btn[aria-pressed="true"] {
	border-color: rgba(46, 242, 255, 0.55);
	box-shadow: 0 0 0 2px rgba(46, 242, 255, 0.18) inset;
}

.reel-footer {
	max-width: var(--reel-max-width);
	width: 100%;
	margin: 0 auto;
	border-radius: var(--ui-radius);
	background: rgba(0, 0, 0, 0.30);
	border: 1px solid rgba(255, 255, 255, 0.10);
	padding: 10px 12px;
	color: var(--ui-muted);
	font-size: 12px;
}

.reel-footer p { margin: 0; text-align: center; }

/* Default reels placeholders (if the game doesn't provide artHTML) */
.reelsGrid {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(var(--reel-cols, 5), 1fr);
	grid-template-rows: repeat(var(--reel-rows, 3), 1fr);
	gap: 8px;
	padding: 14px;
}

.reelCell {
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	background:
		radial-gradient(90% 70% at 30% 25%, rgba(124, 92, 255, 0.20), transparent 60%),
		radial-gradient(90% 70% at 70% 75%, rgba(46, 242, 255, 0.12), transparent 60%),
		rgba(0, 0, 0, 0.18);
}

/* Modal */
.reel-modal {
	position: fixed;
	inset: 0;
	/* Must sit above the mobile landscape side-controls overlay (z-index: 80). */
	z-index: 200;
	display: none;
}

.reel-modal[aria-hidden="false"] { display: grid; }

.reel-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.60);
}

.reel-modal__panel {
	position: relative;
	width: min(92vw, 720px);
	max-height: min(86svh, 820px);
	margin: auto;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 12px;
	padding: 14px;
	border-radius: var(--ui-radius);
	background: rgba(12, 14, 30, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(12px);
}

.reel-modal__top {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 10px;
}

.reel-modal__top h2 {
	margin: 0;
	font-size: 18px;
}

.reel-modal__close {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: var(--ui-text);
	border-radius: 12px;
	padding: 8px 10px;
	cursor: pointer;
}

.reel-modal__content {
	overflow: auto;
	padding: 2px 2px;
	color: var(--ui-text);
}

.reel-modal__content p { color: var(--ui-muted); }

.reel-modal__bottom {
	display: grid;
	justify-content: end;
}

/* Responsive adjustments */
@media (max-width: 920px) {
	.reel-deckGrid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"balance bet"
			"spin spin"
			"toggles wins"
			"mult mult";
	}
	.reel-panel--spin .reel-btn--primary { width: 100%; }
}

@media (max-width: 560px) {
	.reel-app { padding: 10px; gap: 10px; }
	.reel-header {
		grid-template-columns: auto 1fr auto;
		padding: 10px 12px;
	}
	.reel-back { font-size: 13px; }
	.reel-btn { padding: 10px 10px; }
	.reel-btn--primary { font-size: 18px; }
	.reel-stageInner { min-height: 220px; }
	.reel-wins { grid-template-columns: 1fr; }
}

@media (max-height: 520px) and (orientation: landscape) {
	.reel-app { grid-template-rows: auto 1fr auto; }
	.reel-footer { display: none; }
	.reel-stageInner { min-height: 180px; }
}

/* =============================
   DEV Reel Layout Editor Panel
   Enabled via ?editor=1 or localStorage.reelEditor=1
   ============================= */

.reel-editor {
	position: fixed;
	right: 12px;
	top: 12px;
	z-index: 80;
	width: min(92vw, 340px);
	max-height: min(88svh, 720px);
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(12, 14, 30, 0.92);
	backdrop-filter: blur(12px);
	color: rgba(255,255,255,0.92);
	box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}

.reel-editor * { box-sizing: border-box; }

.reel-editor__top {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 10px 10px;
	border-bottom: 1px solid rgba(255,255,255,0.10);
	cursor: grab;
}

.reel-editor__title {
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}

.reel-editor__toggle {
	appearance: none;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.92);
	border-radius: 12px;
	padding: 6px 10px;
	cursor: pointer;
}

.reel-editor__body {
	padding: 10px 10px;
	overflow: auto;
	max-height: calc(min(88svh, 720px) - 48px);
}

.reel-editor.is-collapsed .reel-editor__body { display: none; }

.reel-editor__hint {
	font-size: 12px;
	color: rgba(255,255,255,0.70);
	line-height: 1.35;
	margin: 8px 0 10px;
}

.reel-editor__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: center;
	margin: 8px 0;
}

.reel-editor__row label {
	font-size: 12px;
	color: rgba(255,255,255,0.86);
}

.reel-editor__field {
	display: grid;
	grid-template-columns: 1fr 78px;
	gap: 10px;
	align-items: center;
	min-width: 170px;
}

.reel-editor input[type="range"] { width: 100%; }

.reel-editor input[type="number"],
.reel-editor select {
	width: 100%;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(0,0,0,0.25);
	color: rgba(255,255,255,0.92);
	padding: 6px 8px;
}

.reel-editor__buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 10px;
}

.reel-editor__btn {
	appearance: none;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.92);
	padding: 9px 10px;
	cursor: pointer;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.reel-editor__btn--primary {
	background: linear-gradient(90deg, rgba(124, 92, 255, 0.95), rgba(46, 242, 255, 0.80));
	border-color: rgba(255,255,255,0.20);
}