/* Shared mobile landscape-only UI for all Reel games.
   - Portrait: block play + prompt to rotate.
   - Landscape (touch): keep stage scale, add side controls so no scrolling.
*/

/* Portrait: block play + prompt to rotate */
@media (max-width: 920px) and (orientation: portrait) {
	.reel-app { display: none; }
	body { overflow: hidden; }

	#reelUIContainer::before {
		content: "Rotate your device to landscape to play.";
		position: fixed;
		inset: 0;
		z-index: 999;
		display: grid;
		place-items: center;
		padding: 22px;
		text-align: center;
		font-weight: 900;
		letter-spacing: 0.02em;
		color: var(--ui-text);
		background: rgba(0, 0, 0, 0.72);
		backdrop-filter: blur(10px);
	}
}

/* Landscape: put controls beside the stage so buttons are always visible */
@media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
	.reel-app {
		padding: 10px;
		gap: 10px;
		height: 100svh;
		overflow: hidden;
	}

	/* Make the header smaller so the stage isn't clipped */
	.reel-app .reel-header{
		padding: 8px 10px;
		gap: 10px;
	}
	.reel-app .reel-title{ display: none; }
	.reel-app .reel-logo{ max-height: 28px; }
	.reel-app .reel-btn{ padding: 9px 10px; }

	/* Fit stage width to available height to avoid cropping */
	.reel-app .reel-stageWrap{
		max-width: min(var(--reel-max-width), calc((100svh - 86px) * var(--reel-stage-aspect)));
	}
	.reel-app .reel-stage{ padding: 8px; }
	.reel-app .reel-stageInner{ min-height: 0; }

	/* Only lock scrolling + hide the old deck once JS has enabled side controls.
	   If JS hasn't loaded (cache), we keep the original UI visible. */
	body.reel-landscape-ui { overflow: hidden; }

	.reel-app[data-reel-side-controls-enabled="1"] .reel-deck,
	.reel-app[data-reel-side-controls-enabled="1"] .reel-footer,
	.reel-app[data-reel-side-controls-enabled="1"] .reel-status {
		display: none !important;
	}

	.reel-app[data-reel-side-controls-enabled="1"] .reel-sideControls { display: block; }

	.reel-app .reel-sideControls__col{
		--reel-side-top: 65px;
		--reel-side-bottom: 10px;
		/* Horizontal positioning: smaller inset = closer to screen edge */
		--reel-side-left-inset: 60px;
		--reel-side-right-inset: 90px;
		--reel-side-left-nudge: 18px;
		--reel-side-right-nudge: 10px;

		/* Must override the base (non-media) positioning rules defined later in this file */
		top: var(--reel-side-top) !important;
		bottom: var(--reel-side-bottom) !important;
		transform: none !important;
		align-content: center;
	}

	.reel-app .reel-sideControls__col--left{ transform: translateY(var(--reel-side-left-nudge)) !important; }
	.reel-app .reel-sideControls__col--right{ transform: translateY(var(--reel-side-right-nudge)) !important; }

	/* Mobile landscape: left panel felt a bit bulky; shrink AUTO/TURBO text slightly */
	.reel-app .reel-sideControls__col--left .reel-btn[data-action="auto"],
	.reel-app .reel-sideControls__col--left .reel-btn[data-action="turbo"]{
		font-size: 14px;
	}

	/* Mobile landscape: right panel can be a bit tall; tighten vertical rhythm */
	.reel-app .reel-sideControls__col--right{ gap: 8px; }
	.reel-app .reel-sideControls__col--right .reel-sideControls__panel{ gap: 8px; padding: 8px; }
	.reel-app .reel-sideControls__col--right .reel-sideControls__spin{ padding: 12px 12px; font-size: 15px; }
	.reel-app .reel-sideControls__col--right .reel-sideControls__bet,
	.reel-app .reel-sideControls__col--right .reel-sideControls__win,
	.reel-app .reel-sideControls__col--right .reel-sideControls__lastWin,
	.reel-app .reel-sideControls__col--right .reel-sideControls__mult,
	.reel-app .reel-sideControls__col--right .reel-sideControls__balance{
		gap: 3px;
		min-width: 78px;
		padding: 7px 8px;
	}
	.reel-app .reel-sideControls__col--right .reel-sideControls__betLabel,
	.reel-app .reel-sideControls__col--right .reel-sideControls__winLabel,
	.reel-app .reel-sideControls__col--right .reel-sideControls__lastWinLabel,
	.reel-app .reel-sideControls__col--right .reel-sideControls__multLabel,
	.reel-app .reel-sideControls__col--right .reel-sideControls__balanceLabel{
		font-size: 10px;
	}
	.reel-app .reel-sideControls__col--right .reel-sideControls__betValue,
	.reel-app .reel-sideControls__col--right .reel-sideControls__winValue,
	.reel-app .reel-sideControls__col--right .reel-sideControls__lastWinValue,
	.reel-app .reel-sideControls__col--right .reel-sideControls__multValue,
	.reel-app .reel-sideControls__col--right .reel-sideControls__balanceValue{
		font-size: 13px;
	}
	.reel-app .reel-sideControls__col--right .reel-sideControls__winState{ font-size: 11px; }
}

/* Side controls (injected by shared/js/reelLandscapeUI.js) */
.reel-app[data-reel-side-controls-enabled="1"] .reel-deck{
	display: none;
}

/* Desktop/tablet: inline side-controls beside the stage */
@media (min-width: 921px) {
	.reel-app[data-reel-side-controls-enabled="1"]{
		/* Give the stage enough room plus side-controls on desktop */
		--reel-max-width: 1360px;
	}

	.reel-app[data-reel-side-controls-enabled="1"] .reel-stageWrap{
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: 12px;
	}

	.reel-app[data-reel-side-controls-enabled="1"] .reel-stage{ grid-column: 2; grid-row: 1; }
	.reel-app[data-reel-side-controls-enabled="1"] .reel-status{ grid-column: 1 / -1; grid-row: 2; }

	.reel-app[data-reel-side-controls-enabled="1"] .reel-sideControls{
		display: contents;
		position: static;
		inset: auto;
		z-index: auto;
		pointer-events: none;
	}

	.reel-app[data-reel-side-controls-enabled="1"] .reel-sideControls__col{
		position: static;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		transform: none;
		align-content: center;
		pointer-events: auto;
	}

	.reel-app[data-reel-side-controls-enabled="1"] .reel-sideControls__col--left{ grid-column: 1; grid-row: 1; }
	.reel-app[data-reel-side-controls-enabled="1"] .reel-sideControls__col--right{ grid-column: 3; grid-row: 1; }
}

.reel-app .reel-sideControls{
	display: none;
	position: fixed;
	inset: 0;
	z-index: 80;
	pointer-events: none;
}

.reel-app .reel-sideControls__col{
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	gap: 10px;
	pointer-events: auto;
}

.reel-app .reel-sideControls__col--left{
	left: calc(var(--reel-side-left-inset, 100px) + env(safe-area-inset-left, 0px));
}

.reel-app .reel-sideControls__col--right{
	right: calc(var(--reel-side-right-inset, 100px) + env(safe-area-inset-right, 0px));
}

.reel-app .reel-sideControls__panel{
	display: grid;
	gap: 10px;
	padding: 10px;
	border-radius: var(--ui-radius);
	background: var(--ui-bg);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.reel-app .reel-sideControls__panel .reel-btn{
	min-width: 54px;
	padding: 10px 10px;
}

.reel-app .reel-sideControls__spin{
	min-width: 84px;
	padding: 14px 12px;
	font-size: 16px;
}

.reel-app .reel-sideControls__bet,
.reel-app .reel-sideControls__win,
.reel-app .reel-sideControls__lastWin,
.reel-app .reel-sideControls__mult,
.reel-app .reel-sideControls__balance{
	display: grid;
	place-items: center;
	gap: 4px;
	min-width: 84px;
	padding: 8px 8px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: rgba(0, 0, 0, 0.22);
	text-align: center;
}

.reel-app .reel-sideControls__bet{ padding: 6px 8px; }

.reel-app .reel-sideControls__betLabel,
.reel-app .reel-sideControls__winLabel,
.reel-app .reel-sideControls__lastWinLabel,
.reel-app .reel-sideControls__multLabel,
.reel-app .reel-sideControls__balanceLabel{
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ui-muted);
}

.reel-app .reel-sideControls__betValue,
.reel-app .reel-sideControls__winValue,
.reel-app .reel-sideControls__lastWinValue,
.reel-app .reel-sideControls__multValue,
.reel-app .reel-sideControls__balanceValue{
	font-weight: 900;
	font-size: 14px;
	color: var(--ui-text);
}

.reel-app .reel-sideControls__winState{
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.06em;
}

/* Bonus overlay (shared reel bonus): mobile landscape layout */
@media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
	.reel-bonus{ padding: 0; }

	.reel-bonus__panel{ width: 100%; height: 100%; }

	.reel-bonus__wheelWrap{
		width: min(92vmin, 520px, calc(100svh - 90px));
	}

	.reel-bonus__centerBtn{ width: min(30%, 150px); }
}