:root {
	--jerm-wine: #94103d;
	--jerm-burgundy: #bf164a;
	--jerm-red: #df334c;
	--jerm-rose: #f06b82;
	--jerm-blush: #fff1f3;
	--jerm-cream: #fff8f2;
	--stone: #f3ded3;
	--ink: #431323;
	--shadow: rgba(98, 10, 46, 0.22);
}

* {
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	/* Kill the rubber-band / bounce when scrolling the menu with a finger. */
	overscroll-behavior: none;
	background: var(--jerm-blush);
	color: var(--ink);
	font-family:
		Inter,
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	letter-spacing: 0;
	user-select: none;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

button,
input {
	font: inherit;
}

button {
	border: 0;
	cursor: pointer;
	touch-action: manipulation;
}

.app-shell {
	position: fixed;
	inset: 0;
	min-width: 320px;
	min-height: 420px;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 48% 18%,
			rgba(255, 255, 255, 0.78),
			transparent 28%
		),
		linear-gradient(180deg, #fff6f7 0%, #ffe7eb 48%, #ffd6dc 100%);
}

#gameCanvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
}

#gameCanvas.is-start-hidden {
	visibility: hidden;
}

/* Start menu = natural document scroll. The game is normally a fixed
   full-viewport app-shell with absolutely-stacked screens (needed for the
   canvas + gameplay), which traps the tall landscape dashboard and stops it
   scrolling. While the menu is shown, main.js adds html.menu-scroll and we drop
   the fixed/absolute layout so the header (topbar), body (dashboard grid) and
   footer (rewards) flow as static blocks and the page scrolls on every device.
   Gameplay removes the class and the fixed full-screen layout returns. */
html.menu-scroll,
html.menu-scroll body {
	height: auto;
	min-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
html.menu-scroll .app-shell {
	position: static;
	height: auto;
	min-height: 100vh;
	overflow: visible;
}
html.menu-scroll #startScreen.screen--start {
	position: static;
	height: auto;
	min-height: 100vh;
	overflow: visible;
}

.rotate-hint {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 10;
	display: none;
	place-items: center;
	align-content: center;
	padding: 24px;
	text-align: center;
	background: #070910;
}

.rotate-hint__img {
	width: min(78vw, 340px);
	max-height: 42vh;
	margin-bottom: 22px;
	object-fit: contain;
}

.rotate-hint strong,
.rotate-hint span {
	display: block;
}

.rotate-hint strong {
	color: #ffffff;
	font-size: clamp(1.7rem, 7vw, 2.45rem);
	font-weight: 940;
}

.rotate-hint span {
	max-width: 320px;
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1rem;
	font-weight: 780;
}

/* The overlay itself is pointer-events:none; the exit button re-enables taps. */
.rotate-hint__exit {
	pointer-events: auto;
	margin-top: 22px;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #d5364e, #b2153f);
	color: #fff;
	font-size: 1rem;
	font-weight: 820;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(178, 21, 63, 0.35);
}

.screen {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: max(24px, env(safe-area-inset-top), var(--cg-inset-top, 0px))
		max(22px, var(--cg-inset-right, 0px))
		max(24px, env(safe-area-inset-bottom), var(--cg-inset-bottom, 0px));
	text-align: center;
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 260ms ease,
		transform 260ms ease,
		visibility 260ms ease;
}

.screen--start {
	justify-content: flex-start;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-top: max(
		74px,
		calc(env(safe-area-inset-top) + 54px),
		calc(var(--cg-inset-top, 0px) + 26px)
	);
	padding-bottom: max(
		34px,
		calc(env(safe-area-inset-bottom) + 28px),
		calc(var(--cg-inset-bottom, 0px) + 14px)
	);
	background:
		linear-gradient(
			180deg,
			rgba(255, 248, 249, 0.76),
			rgba(255, 232, 236, 0.18)
		),
		radial-gradient(
			circle at 50% 14%,
			rgba(255, 255, 255, 0.34),
			transparent 34%
		);
}

.screen--game-over {
	background: rgba(70, 9, 32, 0.18);
	backdrop-filter: blur(6px);
}

.brand-lockup {
	display: flex;
	width: min(100%, 420px);
	flex-direction: column;
	align-items: center;
	padding-top: 8vh;
}

.brand-logo {
	width: clamp(74px, 24vw, 124px);
	height: clamp(86px, 28vw, 148px);
	object-fit: contain;
	filter: drop-shadow(0 18px 22px rgba(154, 16, 61, 0.22));
	animation: logoFloat 3600ms ease-in-out infinite;
}

.kicker {
	margin: 18px 0 8px;
	color: var(--jerm-burgundy);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

h1,
h2 {
	margin: 0;
	color: var(--ink);
	font-weight: 900;
	letter-spacing: 0;
}

h1 {
	font-size: 4.7rem;
	line-height: 0.92;
	text-shadow: 0 13px 22px rgba(148, 16, 61, 0.16);
}

h2 {
	font-size: 3rem;
	line-height: 1;
}

.hint {
	max-width: 280px;
	margin: 18px auto 0;
	color: rgba(67, 19, 35, 0.72);
	font-size: 1.08rem;
	font-weight: 650;
}

.start-actions {
	display: flex;
	width: min(100%, 360px);
	flex-direction: column;
	align-items: stretch;
	gap: 15px;
}

.primary-button,
.ghost-button {
	min-height: 54px;
	border-radius: 999px;
	padding: 0 26px;
	font-weight: 850;
	letter-spacing: 0;
	transition:
		transform 160ms ease,
		box-shadow 160ms ease,
		opacity 160ms ease;
}

.primary-button {
	color: white;
	background: linear-gradient(135deg, var(--jerm-burgundy), var(--jerm-red));
	box-shadow:
		0 18px 30px rgba(191, 22, 74, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.ghost-button {
	color: var(--jerm-wine);
	background: rgba(255, 255, 255, 0.72);
	box-shadow:
		0 14px 26px rgba(94, 13, 44, 0.12),
		inset 0 0 0 1px rgba(191, 22, 74, 0.14);
}

.primary-button:active,
.ghost-button:active {
	transform: translateY(2px) scale(0.99);
	box-shadow: 0 10px 18px rgba(191, 22, 74, 0.2);
}

.best-line {
	color: rgba(67, 19, 35, 0.72);
	font-size: 0.98rem;
	font-weight: 760;
}

.settings-row {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.settings-row--compact {
	margin-top: 18px;
}

.settings-row--dashboard {
	flex-wrap: nowrap;
}

.toggle-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	border-radius: 999px;
	padding: 0 13px;
	color: rgba(67, 19, 35, 0.74);
	background: rgba(255, 255, 255, 0.58);
	box-shadow: inset 0 0 0 1px rgba(191, 22, 74, 0.12);
	font-size: 0.88rem;
	font-weight: 760;
}

.toggle-pill input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--jerm-burgundy);
}

/* Modern toggle switches (start-screen Sound / Vibration). The checkbox is
   visually hidden; the track+knob is driven by :checked, so the existing
   settings logic/persistence is untouched. */
.toggle-switch {
	gap: 10px;
	padding: 6px 4px;
	background: transparent;
	box-shadow: none;
}
.toggle-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.toggle-switch__track {
	position: relative;
	flex: 0 0 auto;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: rgba(67, 19, 35, 0.24);
	transition: background 180ms ease;
}
.toggle-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 2px 5px rgba(43, 7, 24, 0.3);
	transition: transform 180ms ease;
}
.toggle-switch input:checked ~ .toggle-switch__track {
	background: linear-gradient(135deg, #ff3d5e, #e7114a);
}
.toggle-switch input:checked ~ .toggle-switch__track::after {
	transform: translateX(18px);
}
.toggle-switch input:focus-visible ~ .toggle-switch__track {
	outline: 2px solid rgba(240, 29, 82, 0.6);
	outline-offset: 2px;
}

.hud {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 1;
	transition: opacity 180ms ease;
}

.bottom-game-hud {
	pointer-events: auto;
	position: absolute;
	left: 50%;
	bottom: max(
		16px,
		calc(env(safe-area-inset-bottom) + 16px),
		calc(var(--cg-inset-bottom, 0px) + 8px)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(13px, 1.55vw, 24px);
	width: clamp(680px, 76vw, 1320px);
	max-width: calc(100% - 24px);
	min-height: clamp(92px, 7.4vw, 118px);
	padding: clamp(10px, 0.95vw, 15px) clamp(20px, 1.8vw, 34px);
	border: 2px solid rgba(255, 101, 177, 0.74);
	border-radius: 999px;
	background:
		linear-gradient(
			180deg,
			rgba(255, 112, 181, 0.22),
			rgba(79, 18, 62, 0.84) 52%,
			rgba(54, 10, 44, 0.9)
		),
		radial-gradient(
			circle at 18% 16%,
			rgba(255, 194, 224, 0.42),
			transparent 34%
		),
		radial-gradient(circle at 78% 85%, rgba(122, 23, 99, 0.44), transparent 44%);
	box-shadow:
		0 18px 44px rgba(44, 9, 31, 0.36),
		0 0 28px rgba(255, 71, 149, 0.26),
		inset 0 2px 0 rgba(255, 201, 229, 0.56),
		inset 0 -14px 28px rgba(35, 6, 32, 0.3);
	backdrop-filter: blur(16px) saturate(1.25);
	transform: translateX(-50%);
	animation: bottomHudIn 250ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.pause-button {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 7px);
	place-content: center;
	gap: 5px;
	flex: 0 0 auto;
	width: clamp(58px, 5.2vw, 78px);
	height: clamp(58px, 5.2vw, 78px);
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 999px;
	background:
		linear-gradient(150deg, #ff5f91, #f5185f 58%, #bf164a), var(--jerm-red);
	box-shadow:
		0 12px 24px rgba(171, 20, 72, 0.34),
		0 0 18px rgba(255, 84, 145, 0.38),
		inset 0 2px 0 rgba(255, 255, 255, 0.46);
	cursor: pointer;
	transition:
		transform 130ms ease,
		filter 180ms ease,
		box-shadow 180ms ease;
}

.pause-button span {
	display: block;
	width: clamp(7px, 0.58vw, 9px);
	height: clamp(23px, 2.2vw, 32px);
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.62);
}

.pause-button:active {
	transform: scale(0.96);
}

.pause-button:hover {
	filter: brightness(1.04);
	box-shadow:
		0 14px 28px rgba(171, 20, 72, 0.38),
		0 0 24px rgba(255, 84, 145, 0.48),
		inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.hud-divider {
	flex: 0 0 1px;
	height: clamp(58px, 4.8vw, 78px);
	background: linear-gradient(
		180deg,
		transparent,
		rgba(255, 202, 229, 0.38),
		rgba(255, 89, 171, 0.28),
		transparent
	);
	box-shadow: 0 0 12px rgba(255, 139, 204, 0.28);
}

.collected-counter,
.arrow-timer,
.glow-timer {
	position: relative;
	flex: 0 1 auto;
	min-width: 0;
	height: clamp(52px, 4vw, 70px);
	transform-origin: center;
	transition:
		opacity 200ms ease,
		transform 200ms ease,
		filter 220ms ease;
}

.collected-counter {
	width: clamp(130px, 10vw, 175px);
	filter: drop-shadow(0 10px 18px rgba(89, 9, 37, 0.2))
		drop-shadow(0 0 14px rgba(255, 43, 114, 0.22));
}

.collected-counter.is-triple-active {
	filter: drop-shadow(0 10px 18px rgba(89, 9, 37, 0.2))
		drop-shadow(0 0 18px rgba(255, 206, 84, 0.5))
		drop-shadow(0 0 26px rgba(255, 161, 38, 0.28));
}

.collected-counter.is-triple-points {
	animation: tripleScorePulse 280ms ease-out both;
}

.collected-counter__asset,
.arrow-timer__asset,
.glow-timer__asset {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
}

.collected-counter__value {
	position: absolute;
	top: 50%;
	right: 10%;
	left: 58%;
	display: flex;
	height: 62%;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	color: #3b071c;
	font-size: clamp(1.75rem, 3vw, 3rem);
	font-weight: 950;
	line-height: 1;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
	text-shadow:
		0 2px 0 rgba(255, 255, 255, 0.44),
		0 6px 14px rgba(255, 43, 114, 0.24);
	font-variant-numeric: tabular-nums;
}

.collected-counter__value[data-digits="3"] {
	font-size: clamp(1.48rem, 2.55vw, 2.45rem);
}

.collected-counter__value[data-digits="4"],
.collected-counter__value[data-digits="5"] {
	font-size: clamp(1.22rem, 2.05vw, 1.95rem);
}

.collected-counter.is-pulsing {
	animation: collectedPulse 300ms ease-out both;
}

.collected-counter.is-pulsing::after {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: 999px;
	box-shadow: 0 0 28px rgba(255, 43, 114, 0.58);
	opacity: 0;
	animation: collectedGlow 300ms ease-out both;
}

.glow-timer {
	width: clamp(204px, 17vw, 300px);
	color: #ffe77a;
	filter: drop-shadow(0 10px 18px rgba(89, 49, 0, 0.2))
		drop-shadow(0 0 18px rgba(255, 215, 92, 0.28));
}

.arrow-timer {
	width: clamp(264px, 22vw, 410px);
	color: #ffe77a;
	filter: drop-shadow(0 10px 18px rgba(89, 49, 0, 0.2))
		drop-shadow(0 0 18px rgba(255, 215, 92, 0.24));
}

.arrow-timer.is-inactive {
	opacity: 0.56;
	filter: drop-shadow(0 8px 14px rgba(89, 49, 0, 0.12)) saturate(0.78);
}

.arrow-timer.is-active {
	opacity: 1;
	transform: scale(1);
	filter: drop-shadow(0 12px 22px rgba(89, 49, 0, 0.24))
		drop-shadow(0 0 24px rgba(255, 215, 92, 0.46));
}

.glow-timer.is-inactive {
	opacity: 0.56;
	filter: drop-shadow(0 8px 14px rgba(89, 49, 0, 0.12)) saturate(0.82);
}

.glow-timer.is-active {
	opacity: 1;
	transform: scale(1);
	filter: drop-shadow(0 12px 22px rgba(89, 49, 0, 0.24))
		drop-shadow(0 0 24px rgba(255, 215, 92, 0.44));
}

.arrow-timer__value {
	position: absolute;
	top: 50%;
	right: 8%;
	left: 60%;
	display: flex;
	box-sizing: border-box;
	height: 62%;
	align-items: center;
	justify-content: center;
	padding: 0 1%;
	border-radius: 999px;
	color: #ffe77a;
	font-size: clamp(1.55rem, 2.8vw, 3rem);
	font-weight: 950;
	line-height: 1;
	overflow: hidden;
	text-align: center;
	transform: translateY(-50%);
	white-space: nowrap;
	text-shadow:
		0 2px 0 rgba(84, 42, 0, 0.3),
		0 0 12px rgba(255, 232, 126, 0.62);
	font-variant-numeric: tabular-nums;
	transition: opacity 180ms ease;
}

.arrow-timer__value[data-digits="3"] {
	font-size: clamp(1.34rem, 2.35vw, 2.55rem);
}

.arrow-timer.is-inactive .arrow-timer__value {
	opacity: 0;
}

.arrow-timer.is-warning {
	animation: glowTimerBlink 360ms ease-in-out infinite alternate;
}

.glow-timer__value {
	position: absolute;
	top: 50%;
	right: 9%;
	left: 61%;
	display: flex;
	box-sizing: border-box;
	height: 62%;
	align-items: center;
	justify-content: center;
	padding: 0 1%;
	border-radius: 999px;
	color: #ffe77a;
	font-size: clamp(1.5rem, 2.7vw, 2.9rem);
	font-weight: 950;
	line-height: 1;
	overflow: hidden;
	text-align: center;
	transform: translateY(-50%);
	white-space: nowrap;
	text-shadow:
		0 2px 0 rgba(84, 42, 0, 0.28),
		0 0 12px rgba(255, 232, 126, 0.58);
	font-variant-numeric: tabular-nums;
	transition: opacity 180ms ease;
}

.glow-timer__value[data-digits="3"] {
	font-size: clamp(1.28rem, 2.25vw, 2.45rem);
}

.glow-timer.is-inactive .glow-timer__value {
	opacity: 0;
}

.glow-timer.is-warning {
	animation: glowTimerBlink 360ms ease-in-out infinite alternate;
}

.pause-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(
			circle at 50% 44%,
			rgba(255, 243, 247, 0.34),
			transparent 36%
		),
		rgba(40, 8, 28, 0.22);
	backdrop-filter: blur(7px);
	transition:
		opacity 180ms ease,
		visibility 180ms ease;
}

.pause-panel {
	width: min(100%, 360px);
	border: 1px solid rgba(255, 183, 213, 0.58);
	border-radius: 8px;
	padding: 26px 22px 22px;
	text-align: center;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.9),
			rgba(255, 236, 243, 0.84)
		),
		radial-gradient(circle at 50% 0%, rgba(255, 76, 134, 0.18), transparent 48%);
	box-shadow:
		0 28px 72px rgba(64, 8, 32, 0.3),
		inset 0 0 0 1px rgba(255, 255, 255, 0.54);
	animation: resultIn 260ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.pause-panel h2 {
	margin: 4px 0 22px;
	color: var(--jerm-ink);
	font-size: clamp(2.3rem, 5vw, 3.5rem);
	font-weight: 950;
	line-height: 0.95;
}

.rules-glow-icon {
	display: inline-block;
	width: 1.45em;
	height: 1.45em;
	margin: -0.2em 0.2em -0.35em 0;
	object-fit: contain;
	vertical-align: middle;
}

.tap-prompt {
	position: absolute;
	left: 50%;
	bottom: max(122px, calc(env(safe-area-inset-bottom) + 118px));
	width: min(calc(100% - 44px), 330px);
	transform: translateX(-50%);
	border-radius: 999px;
	padding: 12px 18px;
	color: rgba(67, 19, 35, 0.78);
	background: rgba(255, 255, 255, 0.58);
	box-shadow:
		0 16px 32px rgba(94, 13, 44, 0.1),
		inset 0 0 0 1px rgba(191, 22, 74, 0.1);
	font-size: 1rem;
	font-weight: 800;
	opacity: 1;
	transition:
		opacity 180ms ease,
		transform 180ms ease;
	animation: promptPulse 1500ms ease-in-out infinite;
}

.tap-prompt.is-hidden {
	opacity: 0;
	transform: translateX(-50%) translateY(8px);
}

.result-panel {
	width: min(100%, 540px);
	border-radius: 16px;
	padding: 24px 26px 20px;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.92),
			rgba(255, 243, 244, 0.9)
		),
		radial-gradient(circle at 50% 0%, rgba(240, 107, 130, 0.2), transparent 46%);
	box-shadow:
		0 26px 70px rgba(64, 8, 32, 0.28),
		inset 0 0 0 1px rgba(255, 255, 255, 0.7);
	animation: resultIn 320ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.result-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 24px 0 18px;
}

.result-grid div {
	border-radius: 8px;
	padding: 16px 10px 14px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: inset 0 0 0 1px rgba(191, 22, 74, 0.1);
}

.result-grid span {
	display: block;
	color: rgba(67, 19, 35, 0.62);
	font-size: 0.82rem;
	font-weight: 800;
}

.result-grid strong {
	display: block;
	margin-top: 3px;
	color: var(--jerm-burgundy);
	font-size: 2.5rem;
	font-weight: 950;
	line-height: 1;
}

.game-over-actions {
	display: grid;
	gap: 10px;
}

.is-hidden {
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

.screen.is-hidden {
	transform: translateY(12px);
}

@keyframes logoFloat {
	0%,
	100% {
		transform: translateY(0) rotate(-2deg);
	}
	50% {
		transform: translateY(-9px) rotate(2deg);
	}
}

@keyframes promptPulse {
	0%,
	100% {
		box-shadow:
			0 16px 32px rgba(94, 13, 44, 0.1),
			inset 0 0 0 1px rgba(191, 22, 74, 0.1);
	}
	50% {
		box-shadow:
			0 20px 36px rgba(94, 13, 44, 0.14),
			inset 0 0 0 1px rgba(191, 22, 74, 0.18);
	}
}

@keyframes resultIn {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes glowTimerBlink {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0.84;
		transform: scale(1.06);
	}
}

@keyframes bottomHudIn {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}
}

@keyframes collectedPulse {
	0% {
		transform: scale(1);
	}
	45% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes collectedGlow {
	0% {
		opacity: 0;
		transform: scale(0.96);
	}
	35% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1.08);
	}
}

@keyframes tripleScorePulse {
	0% {
		transform: scale(1);
		filter: drop-shadow(0 10px 18px rgba(89, 9, 37, 0.2))
			drop-shadow(0 0 14px rgba(255, 43, 114, 0.22));
	}
	45% {
		transform: scale(1.08);
		filter: drop-shadow(0 12px 20px rgba(89, 49, 0, 0.24))
			drop-shadow(0 0 22px rgba(255, 206, 84, 0.62));
	}
	100% {
		transform: scale(1);
	}
}

@media (max-height: 620px) {
	.brand-lockup {
		padding-top: 2vh;
	}

	.brand-logo {
		width: 70px;
		height: 82px;
	}

	h1 {
		font-size: 3.3rem;
	}

	.hint {
		margin-top: 12px;
	}

	.start-actions {
		gap: 10px;
	}

	.primary-button,
	.ghost-button {
		min-height: 48px;
	}
}

@media (max-width: 480px) {
	h1 {
		font-size: 3.45rem;
	}

	h2 {
		font-size: 2.35rem;
	}

	.score {
		font-size: 4.35rem;
	}

	.bottom-game-hud {
		gap: 3px;
		width: calc(100% - 8px);
		min-height: 76px;
		padding: 6px 4px;
	}

	.pause-button {
		width: 48px;
		height: 48px;
		grid-template-columns: repeat(2, 6px);
		gap: 4px;
	}

	.pause-button span {
		width: 6px;
		height: 20px;
	}

	.hud-divider {
		height: 40px;
	}

	.collected-counter,
	.arrow-timer,
	.glow-timer {
		height: 62px;
		max-width: none;
	}

	.collected-counter {
		width: clamp(72px, 21vw, 90px);
	}

	.arrow-timer {
		width: clamp(92px, 28vw, 118px);
	}

	.glow-timer {
		width: clamp(76px, 23vw, 98px);
	}

	.collected-counter__value {
		font-size: clamp(1.05rem, 5.2vw, 1.5rem);
		left: 58%;
		right: 10%;
	}

	.glow-timer__value {
		font-size: clamp(0.82rem, 4vw, 1.1rem);
		left: 61%;
		right: 8%;
	}

	.arrow-timer__value {
		font-size: clamp(0.84rem, 4.1vw, 1.14rem);
		left: 60%;
		right: 7%;
	}

	.collected-counter__value[data-digits="3"] {
		font-size: clamp(0.92rem, 4.5vw, 1.26rem);
	}

	.glow-timer__value[data-digits="3"] {
		font-size: clamp(0.72rem, 3.45vw, 0.94rem);
	}

	.arrow-timer__value[data-digits="3"] {
		font-size: clamp(0.72rem, 3.45vw, 0.96rem);
	}

	.collected-counter__value[data-digits="4"],
	.collected-counter__value[data-digits="5"] {
		font-size: clamp(0.78rem, 3.8vw, 1.06rem);
	}
}

@media (max-width: 350px) {
	h1 {
		font-size: 3rem;
	}

	.score {
		font-size: 3.85rem;
	}
}

@media (min-width: 760px) {
	h1 {
		font-size: 5.4rem;
	}

	h2 {
		font-size: 3.55rem;
	}

	.score {
		font-size: 6.6rem;
	}
}

/* Premium season dashboard for the Jerm Cupid start screen. */
.screen--start {
	align-items: stretch;
	justify-content: flex-start;
	/* Scroll at the base level so the dashboard is never clipped, on any device.
     Previously this was `overflow: hidden` and scrolling was re-enabled only via
     a stack of media queries — fragile and order-dependent. The dashboard uses
     min-height:100% so short content fills the viewport and tall content scrolls. */
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding: max(22px, env(safe-area-inset-top))
		max(8px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom))
		max(8px, env(safe-area-inset-left));
	text-align: left;
	background:
		linear-gradient(135deg, #fffefe 0%, #fff7f8 42%, #ffeef2 100%),
		linear-gradient(180deg, #ffffff 0%, #ffeef2 100%);
}

.screen--start::before,
.screen--start::after {
	pointer-events: none;
	position: absolute;
	content: "";
	opacity: 0.75;
}

.screen--start::before {
	right: 16px;
	top: 68px;
	width: 72px;
	height: 52px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle at 22px 26px,
			rgba(255, 255, 255, 0.82) 0 22px,
			transparent 23px
		),
		radial-gradient(
			circle at 50px 24px,
			rgba(255, 255, 255, 0.7) 0 24px,
			transparent 25px
		);
	filter: blur(0.2px);
}

.screen--start::after {
	right: 42px;
	bottom: 48px;
	width: 120px;
	height: 78px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle at 26px 45px,
			rgba(255, 255, 255, 0.7) 0 24px,
			transparent 25px
		),
		radial-gradient(
			circle at 70px 36px,
			rgba(255, 255, 255, 0.66) 0 34px,
			transparent 35px
		);
	filter: blur(0.4px);
}

.start-dashboard {
	position: relative;
	z-index: 1;
	display: grid;
	width: min(100%, 1500px);
	height: auto;
	min-height: 100%;
	align-content: start;
	margin: 0 auto;
	grid-template-rows: auto auto auto;
	gap: 20px;
}

.start-topbar {
	display: flex;
	min-height: 104px;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.start-brand {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 18px;
}

.start-brand__logo {
	width: 94px;
	height: 112px;
	flex: 0 0 auto;
	object-fit: contain;
	filter: drop-shadow(0 16px 22px rgba(193, 22, 74, 0.2));
}

.start-brand__copy {
	min-width: 0;
}

.start-brand__copy h1 {
	margin: 0;
	color: #2b0718;
	/* Always one line; scales down on small devices so it never wraps. */
	white-space: nowrap;
	font-size: clamp(1.5rem, 5.5vw, 3.4rem);
	font-weight: 950;
	line-height: 0.95;
	text-shadow: 0 12px 22px rgba(83, 11, 39, 0.08);
}

.start-brand__copy p {
	margin: 8px 0 0;
	color: #f01d52;
	font-size: 1.12rem;
	font-weight: 760;
}

.start-top-actions {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}

.season-pill,
.dashboard-nav-button,
.inline-link-button,
.wide-link-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #2b0718;
	letter-spacing: 0;
}

.season-pill,
.dashboard-nav-button {
	min-height: 68px;
	border-radius: 999px;
	padding: 0 30px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow:
		0 12px 28px rgba(67, 19, 35, 0.08),
		inset 0 0 0 1px rgba(148, 16, 61, 0.06);
	font-size: 1rem;
	font-weight: 840;
	white-space: nowrap;
}

.season-pill strong {
	color: #f01d52;
}

.dashboard-nav-button {
	transition:
		transform 160ms ease,
		box-shadow 160ms ease;
}

.dashboard-nav-button:active,
.wide-link-button:active,
.inline-link-button:active,
.new-game-button:active {
	transform: translateY(2px) scale(0.99);
}

.dashboard-grid {
	display: grid;
	min-height: 0;
	/* stretch: leaderboard and My Results cards share the same height (the taller
     one drives the row). Cards use min-height:min-content so the row is never
     shorter than their content — no clipping. */
	align-items: stretch;
	grid-template-columns: 1.44fr 0.72fr 0.9fr;
	gap: 22px;
}

.leaderboard-stack,
.dashboard-side {
	display: grid;
	min-width: 0;
	min-height: 0;
	gap: 20px;
}

.leaderboard-stack {
	/* 1fr so the leaderboard card fills the (stretched) stack and matches the
     My Results card height exactly. */
	grid-template-rows: 1fr;
}

.dashboard-side {
	position: relative;
	display: flex;
	overflow: visible;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.dashboard-card {
	min-width: 0;
	border: 1px solid rgba(232, 49, 88, 0.1);
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow:
		0 20px 48px rgba(67, 19, 35, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-card.is-attention {
	animation: startCardAttention 520ms ease;
}

.leaderboard-card {
	display: flex;
	/* min-content (not 0): the card is a grid item in a column the dashboard can
     squeeze on short screens. min-height:0 let that squeeze clamp the card below
     its rows so they spilled out; min-content forces the card to at least fit
     its header + rows, which grows the dashboard and lets the page scroll. */
	min-height: 0;
	flex-direction: column;
	padding: 14px 16px 16px;
}

.card-heading,
.card-title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.card-heading {
	justify-content: space-between;
}

.leaderboard-tabs {
	display: inline-flex;
	align-self: flex-start;
	gap: 4px;
	margin-top: 10px;
	border-radius: 999px;
	padding: 4px;
	background: rgba(255, 238, 242, 0.82);
	box-shadow: inset 0 0 0 1px rgba(240, 29, 82, 0.1);
}

.leaderboard-tab {
	min-height: 36px;
	border-radius: 999px;
	padding: 0 18px;
	color: rgba(43, 7, 24, 0.62);
	background: transparent;
	font-size: 0.92rem;
	font-weight: 860;
	transition:
		color 160ms ease,
		background 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.leaderboard-tab.is-active {
	color: #f01d52;
	background: #ffffff;
	box-shadow:
		0 8px 16px rgba(67, 19, 35, 0.08),
		inset 0 0 0 1px rgba(240, 29, 82, 0.12);
}

.leaderboard-tab:active {
	transform: translateY(1px);
}

.card-title h2,
.rewards-title h2 {
	margin: 0;
	color: #2b0718;
	font-size: 1.42rem;
	font-weight: 930;
	line-height: 1.06;
}

.card-title > span,
.rewards-title > span {
	color: #f01d52;
	font-size: 1.6rem;
	filter: drop-shadow(0 8px 12px rgba(240, 29, 82, 0.16));
}

.inline-link-button {
	padding: 0;
	color: #f01d52;
	background: transparent;
	font-size: 0.95rem;
	font-weight: 760;
}

/* Inline top-3 as a horizontal PODIUM: 3 side-by-side columns (rank 1,2,3),
   each stacking medal / avatar / name / score vertically. Compact vertically so
   the whole dashboard fits without scrolling. The full-list modal
   (.leaderboard-modal-list) keeps the row layout. */
.leaderboard-list {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 0;
	gap: 8px;
	margin-top: 8px;
}

.leaderboard-list .leaderboard-row {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	padding: 10px 4px;
	border-bottom: 0;
	border-radius: 16px;
	background: rgba(255, 244, 247, 0.7);
	text-align: center;
}

/* Rank-1 column gets a subtle lift (podium winner). */
.leaderboard-list .leaderboard-row--rank-1 {
	background: linear-gradient(
		180deg,
		rgba(255, 232, 179, 0.55),
		rgba(255, 244, 247, 0.7)
	);
	box-shadow: inset 0 0 0 1px rgba(249, 169, 15, 0.35);
}

.leaderboard-list .rank-medal {
	width: 26px;
	height: 26px;
	font-size: 0.82rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.leaderboard-list .leader-avatar {
	width: 46px;
	height: 46px;
	border-width: 3px;
	font-size: 1rem;
}

.leaderboard-list .leader-name {
	max-width: 100%;
	font-size: 0.9rem;
}

.leaderboard-list .leader-score {
	min-width: 0;
	justify-items: center;
}

.leaderboard-list .leader-score strong {
	font-size: 1.12rem;
	font-variant-numeric: tabular-nums;
}

.leaderboard-list .leader-score span {
	margin-top: 1px;
	font-size: 0.72rem;
}

.leaderboard-list .leaderboard-empty {
	flex: 1;
}

/* Empty / loading state for a leaderboard with no players. */
.leaderboard-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: 16px;
	color: rgba(43, 7, 24, 0.5);
	font-size: 0.98rem;
	font-weight: 720;
	text-align: center;
}

/* Structural hide: removes the element from layout (no leftover spacing),
   unlike .is-hidden which only makes it invisible. Used to collapse season-only
   blocks (season pill, prizes, unused prize slots, the season tab) when there is
   no active season. */
.is-collapsed {
	display: none !important;
}

.leaderboard-row {
	display: grid;
	min-width: 0;
	align-items: center;
	grid-template-columns: 64px 86px minmax(0, 1fr) auto;
	gap: 18px;
	border-bottom: 1px solid rgba(43, 7, 24, 0.09);
}

.leaderboard-row:last-child {
	border-bottom: 0;
}

.rank-medal {
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;
	border-radius: 50%;
	color: rgba(43, 7, 24, 0.78);
	font-size: 1.35rem;
	font-weight: 940;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.64),
		0 10px 20px rgba(67, 19, 35, 0.12);
}

.leaderboard-row--rank-1 .rank-medal {
	color: #9a4b00;
	background: linear-gradient(145deg, #ffe87a, #f9a90f);
}

.leaderboard-row--rank-2 .rank-medal {
	color: #5d5f66;
	background: linear-gradient(145deg, #f9fafb, #aeb4bd);
}

.leaderboard-row--rank-3 .rank-medal {
	color: #81360d;
	background: linear-gradient(145deg, #ffc082, #d7621b);
}

.leader-avatar {
	position: relative;
	display: grid;
	width: 74px;
	height: 74px;
	overflow: hidden;
	place-items: center;
	border: 4px solid #ffffff;
	border-radius: 50%;
	color: #ffffff;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%),
		linear-gradient(145deg, #d83a63, #61203d);
	box-shadow: 0 12px 22px rgba(43, 7, 24, 0.16);
	font-size: 1.4rem;
	font-weight: 920;
}

.leaderboard-row--rank-2 .leader-avatar {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 42%),
		linear-gradient(145deg, #2c2630, #0e0b10);
}

.leaderboard-row--rank-3 .leader-avatar {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 42%),
		linear-gradient(145deg, #e75b78, #7a2742);
}

.leader-avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: top center;
}

.leader-name {
	overflow: hidden;
	color: #2b0718;
	font-size: 1.45rem;
	font-weight: 900;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.leader-score {
	display: grid;
	min-width: 96px;
	justify-items: end;
}

.leader-score strong {
	color: #f01d52;
	font-size: 1.82rem;
	font-weight: 950;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.leader-score span {
	margin-top: 6px;
	color: rgba(43, 7, 24, 0.52);
	font-size: 0.94rem;
	font-weight: 820;
}

.wide-link-button {
	min-height: 66px;
	border: 1px solid rgba(240, 29, 82, 0.66);
	border-radius: 999px;
	color: #f01d52;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 12px 24px rgba(67, 19, 35, 0.06);
	font-size: 1.08rem;
	font-weight: 900;
}

.player-stat-card {
	display: flex;
	/* 0 min-height + align-items:stretch on the grid => this and the leaderboard
     card share the same height (the taller content drives the row). The page
     scrolls (menu-scroll), so the row is never squeezed below content. */
	min-height: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	text-align: center;
}

.player-logo-orbit {
	position: relative;
	display: grid;
	width: 88px;
	height: 88px;
	/* Keep it a perfect circle: as a flex item in the stat card column it would
     otherwise be squished vertically on short/landscape screens and render as
     a horizontally-stretched oval. */
	flex-shrink: 0;
	aspect-ratio: 1;
	place-items: center;
	overflow: hidden;
	border-radius: 50%;
	padding: 7px;
	background: #ffffff;
	box-shadow:
		0 14px 30px rgba(67, 19, 35, 0.13),
		inset 0 0 0 1px rgba(148, 16, 61, 0.08);
}

.player-logo-orbit .player-avatar-image {
	position: absolute;
	top: 7px;
	left: 7px;
	width: calc(100% - 14px);
	height: calc(100% - 14px);
	display: block;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
}

.stat-label {
	margin: 10px 0 2px;
	color: #2b0718;
	font-size: 0.9rem;
	font-weight: 800;
}

.stat-score,
.stat-rank {
	color: #f01d52;
	font-weight: 950;
	line-height: 0.95;
	font-variant-numeric: tabular-nums;
}

.stat-score {
	font-size: 2.3rem;
}

.stat-rank {
	font-size: 1.85rem;
}

.stat-unit {
	margin: 2px 0 0;
	color: rgba(43, 7, 24, 0.52);
	font-size: 0.86rem;
	font-weight: 830;
}

.stat-divider {
	width: 100%;
	height: 1px;
	margin: 10px 0 0;
	background: rgba(240, 29, 82, 0.14);
}

/* Season-only rank footer of the player-stat card. `display: contents` keeps its
   children flowing in the card's centered column exactly as before; the wrapper
   only exists so the whole section can be shown/hidden (.is-collapsed) as a unit
   when there is / isn't an active season. */
.player-stat-footer {
	display: contents;
}

.stat-tabs {
	width: 100%;
	margin: 8px 0 4px;
}

.new-game-button {
	display: flex;
	min-width: 150px;
	width: auto;
	max-width: 230px;
	align-self: center;
	margin-inline: auto;
	padding: 0 26px;
	min-height: 150px;
	flex: 0 0 auto;
	flex-direction: column;
	white-space: nowrap;
	align-items: center;
	justify-content: center;
	border-radius: 22px;
	color: #ffffff;
	background: linear-gradient(145deg, #ff3d5e 0%, #e7114a 54%, #cd0f45 100%);
	box-shadow:
		0 24px 42px rgba(209, 15, 69, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.34);
	font-size: 1.35rem;
	font-weight: 950;
	line-height: 1;
	transition:
		transform 160ms ease,
		box-shadow 160ms ease;
	animation: newGamePulse 3200ms ease-in-out infinite;
}

.gamepad-icon {
	display: inline-flex;
	margin-bottom: 8px;
	font-size: 2.4rem;
	line-height: 1;
	filter: drop-shadow(0 10px 18px rgba(43, 7, 24, 0.16));
}

.side-cupid-stage {
	display: grid;
	width: 100%;
	height: clamp(170px, 28vh, 260px);
	flex: 0 0 clamp(170px, 28vh, 260px);
	place-items: center;
	padding: 2.5%;
	overflow: hidden;
	background-image: url("./assets/cupid-player.webp?v=20260627-perfect3");
	background-origin: content-box;
	background-position: center 12%;
	background-repeat: no-repeat;
	background-size: auto 90%;
}

.side-cupid {
	display: none;
}

.rewards-card {
	position: relative;
	display: flex;
	min-height: 136px;
	align-items: center;
	gap: 36px;
	overflow: hidden;
	padding: 24px 36px;
}

.rewards-title {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 14px;
}

.reward-slots {
	display: grid;
	flex: 1;
	min-width: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reward-slot {
	display: grid;
	min-width: 0;
	align-items: center;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 16px;
	padding: 0 24px;
	border-left: 1px solid rgba(43, 7, 24, 0.11);
}

.reward-medal {
	font-size: 3.2rem;
	filter: drop-shadow(0 10px 16px rgba(43, 7, 24, 0.14));
}

.reward-slot p {
	margin: 0 0 8px;
	color: #2b0718;
	font-size: 1rem;
	font-weight: 850;
}

.reward-slot strong {
	display: block;
	overflow-wrap: anywhere;
	color: #f01d52;
	font-size: 1.35rem;
	font-weight: 940;
	line-height: 1.08;
}

.reward-slot--gold strong {
	font-size: 1.9rem;
}

.modal {
	/* fixed (not absolute): the menu uses natural document scroll, so an absolute
     overlay would sit at the top of the page instead of covering the current
     viewport. fixed pins it to the screen no matter the scroll position. */
	position: fixed;
	inset: 0;
	z-index: 7;
	display: grid;
	place-items: center;
	/* Keep the panel clear of the Telegram top chrome (close/collapse buttons):
     the top padding grows with the forwarded top inset, and the panel is capped
     to this padded cell (max-height: 100%) so it can never slide underneath it. */
	padding: max(
			20px,
			calc(env(safe-area-inset-top) + 12px),
			calc(var(--cg-inset-top, 0px) + 12px)
		)
		20px max(20px, env(safe-area-inset-bottom), var(--cg-inset-bottom, 0px));
	transition:
		opacity 180ms ease,
		visibility 180ms ease;
}

.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(43, 7, 24, 0.18);
	backdrop-filter: blur(8px);
}

.modal-panel {
	position: relative;
	width: min(100%, 520px);
	/* Never taller than the inset-padded cell (see .modal padding) → always fully
     visible between the Telegram top chrome and the bottom edge; content scrolls. */
	max-height: min(100%, 640px);
	overflow: auto;
	border: 1px solid rgba(240, 29, 82, 0.12);
	border-radius: 30px;
	padding: 24px;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.98),
		rgba(255, 244, 247, 0.96)
	);
	box-shadow:
		0 28px 72px rgba(43, 7, 24, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	animation: modalIn 220ms ease both;
}

.modal-panel--leaderboard {
	width: min(100%, 600px);
}

.modal-close-button {
	position: absolute;
	top: 18px;
	right: 18px;
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 50%;
	color: rgba(43, 7, 24, 0.62);
	background: rgba(255, 255, 255, 0.74);
	box-shadow: inset 0 0 0 1px rgba(240, 29, 82, 0.12);
	font-size: 1.45rem;
	font-weight: 780;
}

.modal-heading {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-right: 46px;
}

.modal-heading > span {
	color: #f01d52;
	font-size: 2rem;
}

.modal-heading h2 {
	margin: 0;
	color: #2b0718;
	font-size: 1.9rem;
	font-weight: 940;
	line-height: 1;
}

.modal-heading--leaderboard {
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.modal-kicker {
	display: block;
	margin-bottom: 8px;
	color: #f01d52;
	font-size: 0.76rem;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}

.modal-rules-list {
	display: grid;
	gap: 14px;
	margin: 24px 0 0;
	padding-left: 24px;
	color: #2b0718;
	font-size: 1.08rem;
	font-weight: 760;
	line-height: 1.42;
}

.leaderboard-tabs--modal {
	margin-top: 0;
	align-self: auto;
	flex: 0 0 auto;
}

.leaderboard-modal-list {
	display: grid;
	margin-top: 24px;
}

/* Landscape phones (the in-game orientation) have very little vertical room, so
   the pop-ups are made compact and kept centred within the safe area — no more
   sliding up under the Telegram top buttons. */
@media (orientation: landscape) and (max-height: 600px) {
	.modal-panel {
		padding: 16px 18px;
		border-radius: 22px;
	}
	.modal-panel--leaderboard {
		width: min(100%, 540px);
	}
	.modal-close-button {
		top: 12px;
		right: 12px;
		width: 34px;
		height: 34px;
		font-size: 1.25rem;
	}
	.modal-heading {
		padding-right: 40px;
	}
	.modal-heading h2 {
		font-size: 1.35rem;
	}
	.modal-heading > span {
		font-size: 1.4rem;
	}
	.modal-kicker {
		margin-bottom: 4px;
	}
	.leaderboard-modal-list {
		margin-top: 14px;
	}
	.modal-rules-list {
		margin-top: 14px;
		gap: 10px;
		font-size: 0.98rem;
	}
}

.leaderboard-row--modal {
	min-height: 82px;
	grid-template-columns: 62px 74px minmax(0, 1fr) auto;
}

.leaderboard-row--modal .leader-avatar {
	width: 62px;
	height: 62px;
}

@keyframes startCardAttention {
	0%,
	100% {
		box-shadow:
			0 20px 48px rgba(67, 19, 35, 0.1),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}
	45% {
		box-shadow:
			0 24px 58px rgba(240, 29, 82, 0.18),
			inset 0 0 0 2px rgba(240, 29, 82, 0.22);
	}
}

@keyframes modalIn {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes newGamePulse {
	0%,
	100% {
		box-shadow:
			0 24px 42px rgba(209, 15, 69, 0.24),
			inset 0 1px 0 rgba(255, 255, 255, 0.34);
	}
	50% {
		box-shadow:
			0 28px 54px rgba(209, 15, 69, 0.32),
			inset 0 1px 0 rgba(255, 255, 255, 0.42);
	}
}

@media (max-width: 1240px), (max-height: 760px) {
	.screen--start {
		padding: max(
				56px,
				calc(env(safe-area-inset-top) + 36px),
				calc(var(--cg-inset-top, 0px) + 18px)
			)
			18px 18px;
	}

	.start-dashboard {
		gap: 14px;
	}

	.start-topbar {
		min-height: 86px;
		gap: 14px;
	}

	.start-brand__logo {
		width: 76px;
		height: 92px;
	}

	.start-brand__copy h1 {
		font-size: 2.75rem;
	}

	.start-brand__copy p {
		font-size: 0.98rem;
	}

	.start-top-actions {
		gap: 10px;
	}

	.season-pill,
	.dashboard-nav-button {
		min-height: 54px;
		padding: 0 18px;
		font-size: 0.92rem;
	}

	.dashboard-grid {
		gap: 14px;
	}

	.leaderboard-stack,
	.dashboard-side {
		gap: 14px;
	}

	.leaderboard-card {
		padding: 20px;
	}

	.card-title h2,
	.rewards-title h2 {
		font-size: 1.16rem;
	}

	.leaderboard-row {
		grid-template-columns: 50px 66px minmax(0, 1fr) auto;
		gap: 12px;
	}

	.rank-medal {
		width: 44px;
		height: 44px;
		font-size: 1.12rem;
	}

	.leader-avatar {
		width: 60px;
		height: 60px;
	}

	.leader-name {
		font-size: 1.16rem;
	}

	.leader-score strong {
		font-size: 1.42rem;
	}

	.player-logo-orbit {
		width: 78px;
		height: 78px;
	}

	.stat-label {
		margin-top: 14px;
		font-size: 0.88rem;
	}

	.stat-score {
		font-size: 2.36rem;
	}

	.stat-rank {
		font-size: 1.95rem;
	}

	.new-game-button {
		min-height: 120px;
		font-size: 1.5rem;
	}

	.gamepad-icon {
		font-size: 2.1rem;
	}

	.side-cupid-stage {
		height: clamp(145px, 24vh, 210px);
		flex-basis: clamp(145px, 24vh, 210px);
	}

	.side-cupid {
		max-width: 270px;
	}

	.rewards-card {
		min-height: 128px;
		gap: 18px;
		padding: 18px 24px;
	}

	.reward-slot {
		grid-template-columns: 54px minmax(0, 1fr);
		gap: 10px;
		padding: 0 16px;
	}

	.reward-medal {
		font-size: 2.5rem;
	}

	.reward-slot strong {
		font-size: 1.08rem;
	}

	.reward-slot--gold strong {
		font-size: 1.48rem;
	}
}

@media (max-width: 980px) {
	.screen--start {
		overflow-y: auto;
	}

	.start-dashboard {
		height: auto;
		min-height: 100%;
		grid-template-rows: auto auto auto;
	}

	.start-topbar {
		align-items: flex-start;
	}

	.start-top-actions {
		flex-wrap: wrap;
	}

	.dashboard-grid {
		grid-template-columns: minmax(0, 1.08fr) minmax(190px, 0.62fr);
	}

	.dashboard-side {
		grid-column: 1 / -1;
		flex-direction: column;
		align-items: center;
	}

	.dashboard-side .new-game-button {
		min-height: 120px;
	}

	.side-cupid-stage {
		height: 180px;
		flex: 0 0 180px;
	}

	.side-cupid {
		max-width: 260px;
	}
}

@media (max-width: 760px) {
	.screen--start {
		justify-content: flex-start;
	}

	.start-dashboard {
		align-content: start;
		padding-bottom: 18px;
	}

	.start-topbar,
	.dashboard-grid,
	.reward-slots {
		grid-template-columns: 1fr;
	}

	.start-topbar {
		display: grid;
	}

	.start-top-actions {
		justify-content: flex-start;
	}

	.leaderboard-stack {
		grid-template-rows: 1fr;
	}

	.dashboard-side {
		position: relative;
		z-index: 2;
		flex-direction: column;
		margin-bottom: 16px;
	}

	.dashboard-side .new-game-button {
		min-height: 160px;
	}

	.side-cupid-stage {
		height: 178px;
		flex-basis: 178px;
	}

	.side-cupid {
		max-width: 260px;
	}

	.leaderboard-list {
		grid-template-rows: repeat(3, auto);
	}

	.leaderboard-row {
		min-height: 84px;
	}

	.leaderboard-card,
	.player-stat-card {
		min-height: auto;
	}

	.rewards-card {
		position: relative;
		z-index: 1;
		display: grid;
		padding-right: 24px;
	}

	.reward-slot {
		border-left: 0;
		border-top: 1px solid rgba(43, 7, 24, 0.11);
		padding: 14px 0 0;
	}
}

@media (orientation: portrait) and (max-width: 760px) {
	.rotate-hint {
		display: grid;
	}
}

@media (orientation: landscape) and (max-height: 540px) {
	.app-shell {
		min-height: 0;
	}

	.screen {
		padding: max(8px, env(safe-area-inset-top))
			max(10px, env(safe-area-inset-right))
			max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
	}

	.screen--start {
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.start-dashboard {
		width: min(100%, 1120px);
		height: auto;
		min-height: 100%;
		grid-template-rows: auto auto auto;
		gap: 8px;
	}

	.start-topbar {
		min-height: 48px;
		gap: 10px;
	}

	.start-brand {
		gap: 10px;
	}

	.start-brand__logo {
		width: 46px;
		height: 54px;
	}

	.start-brand__copy h1 {
		font-size: clamp(1.45rem, 4.6vw, 2.35rem);
		line-height: 0.92;
	}

	.start-brand__copy p {
		margin-top: 3px;
		font-size: clamp(0.62rem, 1.8vw, 0.82rem);
	}

	.start-top-actions {
		gap: 8px;
	}

	.settings-row--dashboard {
		gap: 5px;
	}

	.toggle-pill {
		min-height: 30px;
		gap: 5px;
		padding: 0 8px;
		font-size: 0.66rem;
	}

	.toggle-pill input {
		width: 13px;
		height: 13px;
	}

	.season-pill,
	.dashboard-nav-button {
		min-height: 38px;
		gap: 6px;
		padding: 0 12px;
		font-size: clamp(0.66rem, 1.7vw, 0.78rem);
	}

	.dashboard-grid {
		grid-template-columns: minmax(240px, 1.26fr) minmax(128px, 0.74fr) minmax(
				160px,
				0.8fr
			);
		gap: 8px;
	}

	.leaderboard-stack,
	.dashboard-side {
		gap: 8px;
	}

	.leaderboard-stack {
		grid-template-rows: 1fr;
	}

	.dashboard-card {
		border-radius: 18px;
	}

	.leaderboard-card {
		padding: 10px 12px;
	}

	.card-heading,
	.card-title {
		gap: 8px;
	}

	.card-title h2,
	.rewards-title h2 {
		font-size: clamp(0.82rem, 2vw, 1rem);
	}

	.card-title > span,
	.rewards-title > span {
		font-size: 1.12rem;
	}

	.inline-link-button {
		font-size: 0.68rem;
	}

	.leaderboard-tabs {
		margin-top: 8px;
		padding: 3px;
	}

	.leaderboard-tab {
		min-height: 26px;
		padding: 0 10px;
		font-size: 0.64rem;
	}

	.leaderboard-list {
		margin-top: 7px;
	}

	.leaderboard-row {
		min-height: 48px;
		grid-template-columns: 34px 42px minmax(0, 1fr) minmax(58px, auto);
		gap: 8px;
	}

	.rank-medal {
		width: 30px;
		height: 30px;
		font-size: 0.82rem;
	}

	.leader-avatar {
		width: 38px;
		height: 38px;
		border-width: 2px;
		font-size: 0.86rem;
	}

	.leader-name {
		font-size: 0.82rem;
	}

	.leader-score {
		min-width: 58px;
	}

	.leader-score strong {
		font-size: 0.98rem;
	}

	.leader-score span {
		margin-top: 2px;
		font-size: 0.62rem;
	}

	.wide-link-button {
		min-height: 42px;
		font-size: 0.76rem;
	}

	.player-stat-card {
		padding: 10px;
	}

	.player-logo-orbit {
		width: 62px;
		height: 62px;
		padding: 4px;
	}

	.stat-label {
		margin: 8px 0 4px;
		font-size: 0.64rem;
	}

	.stat-score {
		font-size: 1.55rem;
	}

	.stat-rank {
		font-size: 1.34rem;
	}

	.stat-unit {
		margin-top: 2px;
		font-size: 0.62rem;
	}

	.stat-divider {
		margin-top: 8px;
	}

	.dashboard-side {
		grid-column: auto;
		flex-direction: column;
		margin-bottom: 0;
	}

	.new-game-button,
	.dashboard-side .new-game-button {
		min-height: clamp(74px, 22vh, 100px);
		border-radius: 18px;
		font-size: clamp(1.05rem, 3.2vw, 1.45rem);
	}

	.gamepad-icon {
		margin-bottom: 3px;
		font-size: clamp(1.8rem, 5vw, 2.35rem);
	}

	.side-cupid-stage {
		height: clamp(78px, 26vh, 122px);
		flex: 0 0 clamp(78px, 26vh, 122px);
		background-position: center 4%;
		background-size: auto 88%;
	}

	.rewards-card {
		min-height: 64px;
		gap: 10px;
		padding: 9px 14px;
		border-radius: 18px;
	}

	.rewards-title {
		gap: 8px;
	}

	.reward-slots {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.reward-slot {
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 6px;
		padding: 0 8px;
		border-left: 1px solid rgba(43, 7, 24, 0.11);
		border-top: 0;
	}

	.reward-medal {
		font-size: 1.5rem;
	}

	.reward-slot p {
		margin-bottom: 2px;
		font-size: 0.62rem;
	}

	.reward-slot strong,
	.reward-slot--gold strong {
		font-size: clamp(0.68rem, 1.75vw, 0.88rem);
	}

	.bottom-game-hud {
		bottom: max(6px, calc(env(safe-area-inset-bottom) + 6px));
		gap: clamp(4px, 1vw, 8px);
		width: min(calc(100% - 10px), 760px);
		min-height: clamp(58px, 16vh, 72px);
		padding: 5px 8px;
		border-width: 1px;
	}

	.pause-button {
		width: clamp(44px, 11vh, 54px);
		height: clamp(44px, 11vh, 54px);
		grid-template-columns: repeat(2, 6px);
		gap: 4px;
	}

	.pause-button span {
		width: 6px;
		height: clamp(18px, 5vh, 23px);
	}

	.hud-divider {
		height: clamp(36px, 10vh, 46px);
	}

	.collected-counter,
	.arrow-timer,
	.glow-timer {
		height: clamp(46px, 13.5vh, 60px);
	}

	.collected-counter {
		width: clamp(86px, 18vw, 118px);
	}

	.arrow-timer {
		width: clamp(126px, 27vw, 170px);
	}

	.glow-timer {
		width: clamp(104px, 22vw, 142px);
	}

	.collected-counter__value {
		left: 58%;
		right: 10%;
		font-size: clamp(1rem, 4.2vh, 1.42rem);
	}

	.arrow-timer__value {
		left: 60%;
		right: 8%;
		font-size: clamp(0.88rem, 4vh, 1.28rem);
	}

	.glow-timer__value {
		left: 61%;
		right: 9%;
		font-size: clamp(0.84rem, 3.8vh, 1.18rem);
	}

	.collected-counter__value[data-digits="3"] {
		font-size: clamp(0.9rem, 3.8vh, 1.22rem);
	}

	.arrow-timer__value[data-digits="3"],
	.glow-timer__value[data-digits="3"] {
		font-size: clamp(0.72rem, 3.2vh, 0.98rem);
	}

	.collected-counter__value[data-digits="4"],
	.collected-counter__value[data-digits="5"] {
		font-size: clamp(0.72rem, 3.2vh, 1rem);
	}

	.tap-prompt {
		bottom: max(72px, calc(env(safe-area-inset-bottom) + 72px));
		width: min(calc(100% - 24px), 280px);
		padding: 8px 14px;
		font-size: 0.82rem;
	}

	.modal {
		padding: max(8px, env(safe-area-inset-top))
			max(10px, env(safe-area-inset-right))
			max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
	}

	.modal-panel {
		max-height: calc(100vh - 16px);
		border-radius: 18px;
		padding: 16px;
	}

	.modal-heading h2 {
		font-size: 1.2rem;
	}

	.modal-rules-list {
		gap: 8px;
		margin-top: 14px;
		font-size: 0.86rem;
	}

	.leaderboard-row--modal {
		min-height: 54px;
		grid-template-columns: 44px 46px minmax(0, 1fr) auto;
	}

	.leaderboard-row--modal .leader-avatar {
		width: 42px;
		height: 42px;
	}
}

/* Embedded landscape responsiveness */
.app-shell {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

@media (max-height: 460px) and (orientation: landscape) {
	.start-dashboard {
		gap: 8px;
	}
	.dashboard-grid {
		gap: 8px;
	}
	.dashboard-card {
		padding: 10px;
	}
	.stat-score {
		font-size: 28px;
	}
	.bottom-game-hud {
		transform: scale(0.9);
		transform-origin: bottom center;
	}
}

/* Landscape start screen: Telegram's close/menu buttons sit across the top in
   landscape, and the small fallback floor above let the top bar (logo / season
   pill / nav) slide underneath them. Add extra top clearance, keyed off the
   forwarded Telegram inset (--cg-inset-top) with a generous floor. */
@media (orientation: landscape) {
	.screen--start {
		padding-top: max(
			44px,
			calc(env(safe-area-inset-top) + 22px),
			calc(var(--cg-inset-top, 0px) + 10px)
		);
	}
}

@media (max-width: 820px) and (orientation: landscape) {
	/* Small landscape phones (e.g. iPhone SE 667×375): single column so the
     cards stack and scroll instead of overlapping. */
	.dashboard-grid,
	.start-topbar,
	.reward-slots {
		grid-template-columns: 1fr;
	}
}

/* Player avatar initials fallback (used when the user has no photo) */
.player-avatar-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(135deg, #b2153f, #e94857);
	color: #ffffff;
	font-weight: 800;
}

/* Game-over popup must stay fully visible on short landscape phones: let the
   screen scroll and shrink the panel so nothing is clipped. */
@media (orientation: landscape) and (max-height: 540px) {
	.screen--game-over {
		justify-content: flex-start;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-top: max(10px, env(safe-area-inset-top));
		padding-bottom: max(10px, env(safe-area-inset-bottom));
	}

	.result-panel {
		margin: auto;
		padding: 16px 18px;
	}

	.result-panel h2 {
		font-size: 1.4rem;
	}

	.game-over-actions {
		gap: 8px;
	}
}

/* Safety net: the start dashboard uses a fixed 3-row / 3-column landscape grid.
   On smaller or unusual screens let it scroll instead of clipping content. */
@media (max-height: 700px), (max-width: 1000px) {
	.screen--start {
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.start-dashboard {
		height: auto;
		min-height: 100%;
	}
}

/* Start-screen icons: emoji -> brand-colored inline SVG (2026-06-29) */
.start-dashboard .season-pill svg,
.start-dashboard .dashboard-nav-button svg,
.start-dashboard .card-title > span svg,
.start-dashboard .rewards-title > span svg,
.start-dashboard .wide-link-button svg,
.start-dashboard .gamepad-icon svg,
.start-dashboard .reward-medal svg {
	display: block;
}
.reward-slot--gold .reward-medal {
	color: #f0b32a;
}
.reward-slot--silver .reward-medal {
	color: #aab3c2;
}
.reward-slot--bronze .reward-medal {
	color: #cd7f3f;
}

/* Rules modal: full ruleset with Bonuses / Important sections (2026-06-30) */
.modal-panel--rules {
	max-height: 88vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.rules-subtitle {
	margin: 20px 0 0;
	color: #b2153f;
	font-size: 1.04rem;
	font-weight: 880;
	letter-spacing: 0.01em;
}
.modal-rules-list--bonus {
	list-style: none;
	padding-left: 0;
}
.rules-goal {
	margin: 22px 0 0;
	color: #2b0718;
	font-size: 1.08rem;
	font-weight: 850;
}
@media (orientation: landscape) and (max-height: 560px) {
	.rules-subtitle {
		font-size: 0.92rem;
		margin-top: 12px;
	}
	.rules-goal {
		font-size: 0.94rem;
		margin-top: 14px;
	}
}

/* ===== Compact landscape: fit the whole start dashboard on screen (no scroll).
   Placed last so it wins over the other landscape blocks. Shrinks the biggest
   vertical consumers: cupid image, New Game button, topbar, rewards, gaps and
   card paddings. ===== */
@media (orientation: landscape) and (max-height: 680px) {
	.screen--start {
		/* Reclaim the oversized default top padding (74px) — in compact landscape
       we only need to clear the Telegram top chrome inset. */
		padding-top: max(
			14px,
			calc(env(safe-area-inset-top) + 8px),
			calc(var(--cg-inset-top, 0px) + 8px)
		);
		padding-bottom: max(
			10px,
			env(safe-area-inset-bottom),
			var(--cg-inset-bottom, 0px)
		);
	}
	.start-dashboard {
		/* Fill the viewport height (flex child of the flex screen). The MIDDLE row
       (the cards) absorbs the slack via 1fr so the topbar hugs the top and the
       rewards card hugs the bottom — no empty strip below the rewards, no scroll
       when the content fits. Taller-than-viewport → 1fr collapses and scrolls. */
		gap: 8px;
		flex: 1;
		min-height: 0;
		grid-template-rows: auto 1fr auto;
		align-content: stretch;
	}
	/* Spread the side column's contents over the (now taller) middle row so the
     New Game button, cupid and toggles distribute top→middle→bottom instead of
     clustering at the top and leaving an ugly empty band beneath them. */
	.dashboard-side {
		justify-content: space-between;
	}
	.start-topbar {
		min-height: 0;
	}
	.start-brand__logo {
		width: 40px;
		height: 48px;
	}
	.start-brand__copy h1 {
		font-size: clamp(1.2rem, 4vw, 1.9rem);
	}
	.dashboard-card {
		border-radius: 18px;
	}
	.leaderboard-card {
		padding: 8px 12px 10px;
	}
	.player-stat-card {
		padding: 8px 12px;
	}
	.leaderboard-tabs {
		margin-top: 6px;
	}
	.player-logo-orbit {
		width: 46px;
		height: 46px;
	}
	.stat-label {
		margin: 6px 0 0;
		font-size: 0.8rem;
	}
	.stat-unit {
		font-size: 0.76rem;
	}
	.stat-divider {
		margin: 6px 0 0;
	}
	.stat-tabs {
		margin: 6px 0 4px;
	}
	.stat-score {
		font-size: 1.5rem;
	}
	.stat-rank {
		font-size: 1.3rem;
	}
	.leaderboard-list {
		margin-top: 6px;
	}
	.leaderboard-list .leaderboard-row {
		padding: 6px 4px;
		gap: 4px;
	}
	.leaderboard-list .leader-avatar {
		width: 38px;
		height: 38px;
	}
	.leaderboard-list .rank-medal {
		width: 22px;
		height: 22px;
	}
	.side-cupid-stage {
		height: clamp(78px, 13vh, 120px);
		flex: 0 0 clamp(78px, 13vh, 120px);
	}
	.new-game-button {
		min-height: 92px;
		font-size: 1.2rem;
	}
	.gamepad-icon {
		font-size: 1.6rem;
		margin-bottom: 4px;
	}
	.rewards-card {
		min-height: 0;
		gap: 6px;
		padding: 4px 12px;
	}
	.rewards-title h2 {
		font-size: 0.88rem;
	}
	.reward-slot {
		padding: 0 8px;
	}
	.reward-slot strong {
		font-size: 0.86rem;
	}
	.reward-slot p {
		font-size: 0.7rem;
	}
	.reward-medal {
		font-size: 1.1rem;
	}
}

.season-pill__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.season-name {
	font-weight: 700;
}
.season-name:empty {
	display: none;
}