/* Lucky Runner เซียมซีนักวิ่ง — scoped under .lrs-wrap so themes don't clash */
.lrs-wrap {
	--lrs-red: #e31e24;
	--lrs-red-dark: #b3141a;
	--lrs-cream: #efe6d4;
	width: 100%;
	max-width: min(var(--lrs-max, 480px), calc(92svh * 9 / 16));
	margin: 0 auto 1.5em;
	font-family: "Kanit", system-ui, sans-serif;
}
@supports not (height: 1svh) {
	.lrs-wrap { max-width: min(var(--lrs-max, 480px), calc(92vh * 9 / 16)); }
}

.lrs-wrap *,
.lrs-wrap *::before,
.lrs-wrap *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 9:16 stage matching the 1080x1920 design; 1cqw = 1% of stage width */
.lrs-wrap .lrs-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: var(--lrs-cream);
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
	container-type: inline-size;
	user-select: none;
	-webkit-user-select: none;
	line-height: 1;
}

.lrs-wrap .lrs-screen {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility .6s;
}
.lrs-wrap .lrs-screen.is-active { opacity: 1; visibility: visible; }
.lrs-wrap .lrs-home    { background-image: var(--lrs-home); }
.lrs-wrap .lrs-loading { background-image: var(--lrs-loading); }
.lrs-wrap .lrs-result  { background-image: var(--lrs-result); }

/* reset theme button styles */
.lrs-wrap button,
.lrs-wrap a.lrs-pill {
	margin: 0;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
	background-image: none;
	text-shadow: none;
	font-family: inherit;
}

/* ---------- Home ---------- */
.lrs-wrap .lrs-draw-btn {
	position: absolute;
	left: 16.7%;
	top: 24.5%;
	width: 66.6%;
	height: auto;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	animation: lrs-pulse 1.8s ease-in-out infinite;
}
.lrs-wrap .lrs-draw-btn:hover,
.lrs-wrap .lrs-draw-btn:focus { background: transparent; }
.lrs-wrap .lrs-draw-btn:focus-visible { outline: 3px solid #ffd43b; outline-offset: 4px; }
.lrs-wrap .lrs-draw-btn:active { transform: scale(.97); }
@keyframes lrs-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(227, 30, 36, .55); }
	50%      { box-shadow: 0 0 0 3cqw rgba(227, 30, 36, 0); }
}

/* ---------- Loading video ---------- */
.lrs-wrap .lrs-video-wrap {
	position: absolute;
	left: 22.4%;
	top: 27.8%;
	width: 55.2%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: #000;
}
.lrs-wrap .lrs-video-wrap video {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* ---------- Result ---------- */
.lrs-wrap .lrs-card {
	position: absolute;
	left: 10%;
	top: 11.4%;
	width: 80%;
	max-width: none;
	height: auto;
	margin: 0;
	display: block;
	border-radius: 0;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
	-webkit-touch-callout: default; /* long-press to save on mobile */
	user-select: auto;
	-webkit-user-select: auto;
}
.lrs-wrap .lrs-result.is-active .lrs-card { animation: lrs-reveal .9s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes lrs-reveal {
	0%   { opacity: 0; transform: translateY(8%) scale(.85) rotate(-4deg); }
	100% { opacity: 1; transform: none; }
}

.lrs-wrap .lrs-actions {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	top: 76.6%;
	display: flex;
	justify-content: center;
	gap: 2.5cqw;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s .8s;
}
.lrs-wrap .lrs-result.is-active .lrs-actions { opacity: 1; pointer-events: auto; }

.lrs-wrap .lrs-pill {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: 1.6cqw 4cqw;
	font-size: 3.4cqw;
	font-weight: 600;
	line-height: 1;
	border-radius: 999px;
	border: 2px solid var(--lrs-red);
	background: #fff;
	color: var(--lrs-red);
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}
.lrs-wrap .lrs-pill:hover,
.lrs-wrap .lrs-pill:focus { background: #fff5f5; color: var(--lrs-red); text-decoration: none; }
.lrs-wrap .lrs-pill.lrs-primary { background: var(--lrs-red); color: #fff; border-color: #fff; }
.lrs-wrap .lrs-pill.lrs-primary:hover,
.lrs-wrap .lrs-pill.lrs-primary:focus { background: var(--lrs-red-dark); color: #fff; }
.lrs-wrap .lrs-pill:active { transform: scale(.95); }
.lrs-wrap .lrs-pill svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Music toggle ---------- */
.lrs-wrap .lrs-music {
	position: absolute;
	z-index: 10;
	top: 2.5cqw;
	right: 2.5cqw;
	width: 10cqw;
	height: 10cqw;
	min-width: 36px;
	min-height: 36px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--lrs-red);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
	transition: transform .15s, background .2s;
}
.lrs-wrap .lrs-music:hover,
.lrs-wrap .lrs-music:focus { background: var(--lrs-red-dark); color: #fff; }
.lrs-wrap .lrs-music:active { transform: scale(.92); }
.lrs-wrap .lrs-music svg { width: 55%; height: 55%; }
.lrs-wrap .lrs-music .lrs-icon-off { display: none; }
.lrs-wrap .lrs-music.is-off { background: #6b6b6b; }
.lrs-wrap .lrs-music.is-off .lrs-icon-on { display: none; }
.lrs-wrap .lrs-music.is-off .lrs-icon-off { display: block; }

@media (prefers-reduced-motion: reduce) {
	.lrs-wrap .lrs-draw-btn { animation: none; }
	.lrs-wrap .lrs-result.is-active .lrs-card { animation: none; }
}