@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-Thin.ttf") format("truetype");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

:root {
	--aia-safe-area-top: env(safe-area-inset-top, 0px);
	--aia-safe-area-right: env(safe-area-inset-right, 0px);
	--aia-safe-area-bottom: var(--android-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
	--aia-safe-area-left: env(safe-area-inset-left, 0px);
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-ThinItalic.ttf") format("truetype");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-ExtraLight.ttf") format("truetype");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-ExtraLightItalic.ttf") format("truetype");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-LightItalic.ttf") format("truetype");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-MediumItalic.ttf") format("truetype");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-SemiBoldItalic.ttf") format("truetype");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-BoldItalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-ExtraBold.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-ExtraBoldItalic.ttf") format("truetype");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Prompt";
	src: url("fonts/Prompt-BlackItalic.ttf") format("truetype");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	width: var(--app-width, 100vw);
	min-width: 100%;
	height: 100%;
	min-height: 100%;
	min-height: var(--app-height, 100dvh);
	overflow: hidden;
	position: fixed;
	inset: 0;
	overscroll-behavior: none;
	-webkit-overflow-scrolling: auto;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	
	background: #ffffff;
	color: white;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-weight: 600;
	font-synthesis: none;
}

*,
*::before,
*::after {
	font-family: inherit;
}

body {
	background: #ffffff var(--aia-page-background-url, url("images/aia-start-background-poster-perf-v1.webp")) center center / cover no-repeat;
}

body.aia-selection-open,
body.aia-leaderboard-open {
	background: #ffffff;
}

html.aia-gameplay-locked,
body.aia-gameplay-locked {
	overflow: hidden !important;
	overscroll-behavior: none !important;
	touch-action: none !important;
}

body.aia-gameplay-locked canvas {
	touch-action: none !important;
}

.aia-playgame-prompt {
	position: fixed;
	inset: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, var(--aia-safe-area-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	opacity: 0;
	visibility: hidden;
	pointer-events: auto;
	transition: opacity 120ms ease, visibility 120ms ease;
}

.aia-playgame-prompt[hidden] {
	display: none;
}

body.aia-gameplay-locked.aia-game-awaiting-start .aia-playgame-prompt {
	opacity: 1;
	visibility: visible;
}

.aia-playgame-instruction-card {
	width: 520px;
	padding: 34px 42px 30px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 36px;
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 14px 34px rgba(21, 53, 90, 0.2), inset 0 1px rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: #3e4651;
	font-family: "Prompt", "Noto Sans Thai", Tahoma, sans-serif;
	text-align: center;
	transform: scale(var(--aia-playgame-instruction-scale, 1));
	transform-origin: center;
}

.aia-playgame-instruction-card h1 {
	margin: 0 0 17px;
	color: #970b3d;
	font-size: 58px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	text-shadow: 0 2px 0 rgba(255, 255, 255, 0.72);
}

.aia-playgame-instruction-rule {
	display: grid;
	grid-template-columns: 45px 1fr;
	align-items: center;
	gap: 8px;
	padding: 20px 0;
	border-top: 2px solid rgba(84, 92, 100, 0.14);
	text-align: left;
}

.aia-playgame-instruction-rule p,
.aia-playgame-instruction-ready {
	margin: 0;
}

.aia-playgame-instruction-rule strong,
.aia-playgame-instruction-rule span:not(.aia-playgame-instruction-icon) {
	display: block;
	white-space: nowrap;
}

.aia-playgame-instruction-rule strong {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.15;
}

.aia-playgame-instruction-rule p > span {
	margin-top: 6px;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.15;
}

.aia-playgame-instruction-rule em {
	color: #d60a43;
	font-style: normal;
	font-weight: 900;
}

.aia-playgame-instruction-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 58px;
	font-weight: 900;
	line-height: 1;
}

.aia-playgame-instruction-rule--protect .aia-playgame-instruction-icon,
.aia-playgame-instruction-rule--protect strong {
	color: #e3134f;
}

.aia-playgame-instruction-rule--slice .aia-playgame-instruction-icon,
.aia-playgame-instruction-rule--slice strong {
	color: #582796;
}

.aia-playgame-instruction-ready {
	padding: 22px 0 19px;
	border-top: 2px solid rgba(84, 92, 100, 0.14);
	color: #970b3d;
	font-size: 27px;
	font-weight: 900;
	line-height: 1.12;
}

.aia-playgame-start-button {
	width: 100%;
	min-height: 93px;
	border: 4px solid #fff;
	border-radius: 30px;
	background: linear-gradient(180deg, #fa6b94 0%, #ee225f 45%, #ce0844 100%);
	box-shadow: 0 7px 0 #a90537, 0 0 0 3px rgba(236, 28, 89, 0.72), 0 10px 17px rgba(154, 7, 53, 0.4);
	color: #fff;
	cursor: pointer;
	font-size: 43px;
	font-weight: 900;
	line-height: 1;
	text-shadow: 0 4px 0 #9d0738, 0 2px 8px rgba(67, 0, 23, 0.55);
	animation: aia-playgame-start-pulse 1.8s ease-in-out infinite;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

@keyframes aia-playgame-start-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.045);
	}
}

.aia-playgame-start-button:focus-visible {
	outline: 3px solid #ec1c59;
	outline-offset: 3px;
}

.aia-playgame-start-button:active {
	animation-play-state: paused;
	transform: translateY(4px) scale(1);
	box-shadow: 0 3px 0 #a90537, 0 0 0 3px rgba(236, 28, 89, 0.72), 0 7px 12px rgba(154, 7, 53, 0.35);
}


.aia-start-shell {
	position: fixed;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	background: #ffffff url("images/aia-start-background-poster-perf-v1.webp") center center / cover no-repeat;
	transition: opacity 180ms ease, visibility 180ms ease;
}

body.aia-selection-open .aia-start-shell,
body.aia-leaderboard-open .aia-start-shell,
body.aia-start-shell-dismissed .aia-start-shell {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.aia-start-shell-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 180ms ease;
}

.aia-start-shell.is-video-ready .aia-start-shell-video {
	opacity: 1;
}

.aia-start-shell-logo,
.aia-start-shell-button {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.aia-start-shell-logo {
	top: clamp(56px, calc(21vh - 72px), 162px);
	width: min(98.4vw, 480px);
	height: auto;
}

.aia-start-shell-button {
	bottom: clamp(46px, 9vh, 96px);
	width: min(68vw, 320px);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
}

.aia-start-shell-button img {
	display: block;
	width: 100%;
	height: auto;
	animation: aia-start-shell-button-pulse 1.35s ease-in-out infinite;
	transform-origin: center center;
}

.aia-start-shell-button.is-busy {
	cursor: progress;
}

.aia-start-shell-button.is-busy img {
	animation: none;
	filter: saturate(0.65) brightness(0.78);
}

.aia-start-shell-busy-label {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #ffffff;
	font-family: "Prompt", "Noto Sans Thai", Tahoma, sans-serif;
	font-size: clamp(17px, 4.8vw, 24px);
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 2px 5px rgba(77, 0, 34, 0.7);
	pointer-events: none;
}

.aia-start-shell-button.is-busy .aia-start-shell-busy-label {
	display: flex;
}

.aia-start-shell-spinner {
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border: 3px solid rgba(255, 255, 255, 0.4);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: aia-connection-spin 700ms linear infinite;
}

.aia-start-shell-status {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	width: max-content;
	max-width: 92vw;
	transform: translateX(-50%);
	color: #ffffff;
	font-family: "Prompt", "Noto Sans Thai", Tahoma, sans-serif;
	font-size: clamp(12px, 3.2vw, 15px);
	font-weight: 700;
	line-height: 1.35;
	text-shadow: 0 2px 5px rgba(55, 0, 29, 0.85);
	pointer-events: none;
}

.aia-start-shell-status[hidden] {
	display: none;
}

@keyframes aia-start-shell-button-pulse {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}
	45% {
		transform: translateY(-8px) scale(1.055);
	}
	70% {
		transform: translateY(2px) scale(0.99);
	}
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-weight: 600;
}

html, body, canvas {
	touch-action: none;
	touch-action-delay: none;
}

canvas {
	position: fixed;
	display: block;
	z-index: 1;
	width: var(--app-width, 100vw);
	height: var(--app-height, 100dvh);
	max-width: var(--app-width, 100vw);
	max-height: var(--app-height, 100dvh);
	box-sizing: border-box;
	background: transparent;
}

body.aia-selection-open canvas,
body.aia-leaderboard-open canvas {
	pointer-events: none;
	visibility: hidden;
}

body.aia-selection-modal-open canvas {
	pointer-events: none;
}

body.aia-screen-shake {
	animation: aia-screen-shake 320ms cubic-bezier(0.25, 0.7, 0.2, 1) both;
	transform-origin: 50% 50%;
}

@keyframes aia-screen-shake {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	12% {
		transform: translate3d(-10px, 7px, 0) rotate(-0.55deg);
	}
	24% {
		transform: translate3d(9px, -8px, 0) rotate(0.5deg);
	}
	36% {
		transform: translate3d(-8px, -5px, 0) rotate(-0.38deg);
	}
	48% {
		transform: translate3d(7px, 6px, 0) rotate(0.32deg);
	}
	62% {
		transform: translate3d(-5px, 3px, 0) rotate(-0.22deg);
	}
	76% {
		transform: translate3d(4px, -3px, 0) rotate(0.16deg);
	}
	90% {
		transform: translate3d(-2px, 1px, 0) rotate(-0.08deg);
	}
}

#aiaCornerMark {
	position: fixed;
	z-index: 6;
	top: calc(var(--aia-visual-viewport-top, 0px) + env(safe-area-inset-top, 0px) + 34px);
	right: auto;
	left: calc(var(--aia-visual-viewport-left, 0px) + var(--app-width, 100vw) - env(safe-area-inset-right, 0px) - 30px);
	transform: translateX(-100%);
	width: 50px;
	height: auto;
	display: block;
	pointer-events: none;
	transition: opacity 180ms ease;
}

#aiaCornerMark.is-hidden {
	opacity: 0;
}

#notSupportedWrap {
	margin: 2em auto 1em auto;
	width: 75%;
	max-width: 45em;
	border: 2px solid #aaa;
	border-radius: 1em;
	padding: 2em;
	background-color: #f0f0f0;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	color: black;
}

#notSupportedTitle {
	font-size: 1.8em;
}

.notSupportedMessage {
	font-size: 1.2em;
}

.notSupportedMessage em {
	color: #888;
}

@media (orientation: landscape) and (max-height: 640px) {
	#aiaCornerMark {
		top: calc(var(--aia-visual-viewport-top, 0px) + env(safe-area-inset-top, 0px) + 18px);
		left: calc(var(--aia-visual-viewport-left, 0px) + var(--app-width, 100vw) - env(safe-area-inset-right, 0px) - 22px);
		width: clamp(40px, 7vmin, 54px);
	}
}

/* Keep question and selected value as one vertically centered group. The fixed
   gap prevents browser-default paragraph margins from making top/bottom space
   inside a selection card look uneven. */
.aia-card-copy {
	display: flex;
	align-self: stretch;
	flex-direction: column;
	justify-content: center;
}

.aia-card-copy .aia-card-question {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.5;
	white-space: normal;
}

.aia-card-copy strong[data-aia-selected="lifestyle-preference"],
.aia-card-copy strong[data-aia-selected="interest"] {
	margin-bottom: 0;
}

.aia-selection-gate,
.aia-selection-modal,
.aia-leaderboard,
.aia-score-burst {
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-synthesis-weight: none;
}

.aia-selection-gate[hidden],
.aia-selection-modal[hidden],
.aia-leaderboard[hidden],
.aia-score-burst[hidden] {
	display: none !important;
}

.aia-selection-gate {
	position: fixed;
	z-index: 30;
	inset: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	overflow: hidden;
	color: #111111;
	background: #ffffff url("images/aia-selection-bg-v2-perf-v1.webp") center top / cover no-repeat;
	opacity: 0;
	pointer-events: none;
	touch-action: pan-y;
	transition: opacity 180ms ease;
}

.aia-selection-gate.is-ready {
	opacity: 1;
}

.aia-selection-gate.is-ready:not(.is-transitioning) {
	pointer-events: auto;
}

.aia-selection-screen {
	position: relative;
	width: min(var(--app-width, 100vw), 768px);
	height: var(--app-height, 100dvh);
	min-height: var(--app-height, 100dvh);
	overflow: hidden;
	background: transparent;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.aia-selection-screen::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0) 36%),
		radial-gradient(circle at 82% 64%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 28%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0));
	z-index: 0;
}

.aia-selection-screen::after {
	content: none;
}

@media (max-width: 767px) and (orientation: portrait) {
	.aia-selection-gate {
		background-size: 100% 100%;
	}
}

.aia-selection-content {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	height: var(--app-height, 100dvh);
	min-height: var(--app-height, 100dvh);
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	padding: calc(env(safe-area-inset-top, 0px) + clamp(18px, 4.6vh, 46px)) 6.4% calc(var(--aia-safe-area-bottom, 0px) + clamp(72px, 10vh, 120px));
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	/* ADR-0001: container query reference for in-page scale (checkbox, buttons); scoped
	   here (post-padding content box) so cqw already reflects usable width, no double
	   compensation needed. Falls back to the clamp(vw)/px rules below on engines that
	   don't support container queries — see @supports blocks further down this file. */
	container-type: inline-size;
	container-name: aia-selection-page;
}

.aia-selection-mark {
	position: absolute;
	z-index: 2;
	top: calc(env(safe-area-inset-top, 0px) + 34px);
	right: calc(env(safe-area-inset-right, 0px) + 30px);
	width: 50px;
	height: auto;
}

.aia-selection-logo {
	width: min(58%, 370px);
	aspect-ratio: 233 / 216;
	height: auto;
	margin: clamp(34px, 5.8vh, 58px) 0 clamp(14px, 2.6vh, 26px);
	filter: drop-shadow(0 12px 12px rgba(125, 0, 62, 0.25));
}

/* Outside the Figma reference viewport, keep the original direct-child flex
   layout and its responsive media-query rules. */
.aia-selection-form {
	display: contents;
}

.aia-selection-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.aia-select-card {
	position: relative;
	display: grid;
	grid-template-columns: 82px 1fr 2px 72px;
	align-items: center;
	width: min(100%, 562px);
	min-height: clamp(128px, 15.2vh, 168px);
	flex-shrink: 0;
	margin: 0 0 clamp(12px, 1.9vh, 18px);
	box-sizing: border-box;
	padding: 24px 18px 24px 28px;
	border: 2px solid #f36f9d;
	border-radius: 34px;
	background: linear-gradient(0deg, #FFE0E8 0%, #FFFFFF 100%);
	box-shadow: inset 0 18px 28px rgba(255, 255, 255, 0.86), 0 5px 0 #c90059, 0 9px 13px rgba(157, 0, 77, 0.13);
	cursor: pointer;
	box-shadow: 0px 4px 0px 0px var(--AIAPurple);
}

.aia-select-card:nth-of-type(2) {
	margin-bottom: clamp(8px, 1.4vh, 14px);
}

.aia-card-icon {
	position: relative;
	width: 66px;
	height: 66px;
	border: 1.5px solid #ffa4c5;
	border-radius: 50%;
	background: rgba(255, 232, 241, 0.75);
}

.aia-card-icon::before {
	content: "";
	position: absolute;
	inset: 13px;
	background: #c80055;
	-webkit-mask: var(--aia-card-icon-mask) center / contain no-repeat;
	mask: var(--aia-card-icon-mask) center / contain no-repeat;
}

.aia-card-icon-user::before {
	inset: 9px 8px 8px;
	--aia-card-icon-mask: url("images/aia-selection-icon-person.svg");
}

.aia-card-icon-heart::before {
	inset: 8px;
	--aia-card-icon-mask: url("images/aia-selection-icon-heartbeat.svg");
}

.aia-card-icon::after {
	content: none;
}

.aia-card-copy {
	padding: 0 22px;
}

.aia-card-copy p {
	/* margin: 0 0 12px; */
	color: #090909;
	font-size: clamp(18px, min(3.5vw, 2.45vh), 26px);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.045em;
}

.aia-card-copy .aia-card-question {
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	vertical-align: middle;
}

.aia-card-copy strong {
	display: block;
	color: #d80a4f;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: 24px;
	font-weight: 600;
	font-style: normal;
	line-height: 32px;
	letter-spacing: 0;
	vertical-align: middle;
}

.aia-card-copy strong[data-aia-selected="lifestyle-preference"] {
	display: inline-block;
	padding-top: 4px;
    padding-bottom: 4px;
	margin-bottom: 4px;
	color: var(--AIARed, #D31145);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.aia-card-copy strong[data-aia-selected="interest"] {
	display: inline-block;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-bottom: 4px;
	color: var(--AIARed, #D31145);
	font-weight: 700;
	letter-spacing: 0.02em;
	/* Longest option strings (e.g. "ไม่มีเงินจ่ายหากต้องเข้าโรงพยาบาล") wrap to
	   3 lines at the base 24px/32px size. Rather than shrinking the font, the
	   card itself grows (min-height, not height) to fit the wrapped content;
	   overflow-wrap/word-break stay only as a safety net against horizontal
	   spill from unusually long unbroken strings. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.aia-card-divider {
	align-self: stretch;
	width: 2px;
	margin: 8px 0;
	background: #ef6f9d;
}

.aia-card-arrow {
	justify-self: center;
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 20px solid #c80055;
}

.aia-select-label {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.aia-select-label span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.aia-select-label select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.aia-option-menu {
	position: absolute;
	z-index: 5;
	left: 84px;
	right: 18px;
	top: calc(100% - 8px);
	display: grid;
	gap: 6px;
	max-height: min(46vh, 360px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 10px;
	border: 2px solid #f36f9d;
	border-radius: 20px;
	background: rgba(255, 250, 253, 0.98);
	box-shadow: 0 13px 24px rgba(123, 0, 62, 0.22), 0 4px 0 #c90059;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}

.aia-option-menu[hidden] {
	display: none !important;
}

.aia-option-menu-interest {
	box-sizing: border-box;
	max-height: min(34dvh, 286px);
}

.aia-option-item {
	appearance: none;
	border: 0;
	border-radius: 13px;
	padding: 10px 16px;
	background: transparent;
	color: #111111;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: clamp(18px, min(3.6vw, 2.5vh), 24px);
	font-weight: 700;
	line-height: 1.1;
	text-align: left;
	cursor: pointer;
	touch-action: pan-y;
}

.aia-option-item.is-selected,
.aia-option-item:hover,
.aia-option-item:focus-visible {
	background: linear-gradient(180deg, #ffecf4, #ffd6e7);
	color: #c80055;
	outline: none;
}

.aia-consent-row {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 12px;
	align-items: start;
	width: min(100%, 562px);
	margin: 0 0 clamp(6px, 1.1vh, 10px);
	color: #050505;
	font-size: clamp(16px, min(3.15vw, 2.05vh), 20px);
	font-weight: 400;
	line-height: 1.32;
	letter-spacing: -0.035em;
	cursor: pointer;
	/* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); */
}

.aia-consent-row input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.aia-consent-box {
	position: relative;
	width: 24px;
	height: 24px;
	border: 1px solid var(--AIAPurple, #BA0361);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.28);
	opacity: 0.58;
	transition: background-color 160ms ease, opacity 160ms ease;
}

.aia-consent-row input:checked + .aia-consent-box {
	background: var(--AIAPurple, #BA0361);
	opacity: 1;
}

.aia-consent-row input:checked + .aia-consent-box::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 7px;
	height: 14px;
	border: solid #ffffff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* ADR-0001: on engines that support container queries, scale the checkbox and its
   checkmark continuously with the content area instead of jumping between the fixed
   px values above at each breakpoint. The block above stays untouched as the fallback
   for engines where container queries are unsupported (the whole block below is then
   skipped entirely, so the original px rules keep applying as-is). */
@supports (container-type: inline-size) {
	.aia-consent-row {
		grid-template-columns: clamp(26px, 7.3cqw, 30px) 1fr;
	}

	.aia-consent-box {
		width: clamp(22px, 6.2cqw, 26px);
		height: clamp(22px, 6.2cqw, 26px);
	}

	/* Percentages on an absolutely positioned element resolve against its containing
	   block's padding box (.aia-consent-box, which is position: relative) — so the
	   checkmark tracks the box's actual rendered size exactly, whatever that size is. */
	.aia-consent-row input:checked + .aia-consent-box::after {
		left: 29%;
		top: 12%;
		width: 29%;
		height: 58%;
		border-width: 0 clamp(2px, 0.85cqw, 3.4px) clamp(2px, 0.85cqw, 3.4px) 0;
	}
}

.aia-consent-text {
	display: block;
}

.aia-consent-copy {
	display: block;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: 11px;
	font-weight: 600;
	font-style: normal;
	line-height: 16px;
	letter-spacing: 0;
	vertical-align: middle;
	color: #ffffff;
}

.aia-link-button,
.aia-rules-link {
	appearance: none;
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: 11px;
	font-weight: 500;
	font-style: normal;
	line-height: 16px;
	letter-spacing: 0;
	vertical-align: middle;
	color: #ffffff;
	text-decoration: underline;
	cursor: pointer;
}

.aia-selection-next {
  width: 154px;
  min-height: 44px;
  margin: 2px 0 clamp(10px, 2.2vh, 22px);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 42px;
  background: linear-gradient(180deg, #FF7A85 0%, #D31145 100%);
  box-shadow: 0 4px 0 #BA0361;

  color: #fff;
  font-family: "Prompt", "Noto Sans Thai", Tahoma, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;

  cursor: pointer;
  user-select: none;
  touch-action: manipulation;

  transition:
    transform 300ms ease-out,
    filter 300ms ease-out,
    opacity 300ms ease-out;
}

.aia-selection-next:disabled {
	background: linear-gradient(180deg, #dedede, #b9b9b9);
	box-shadow: none;
	color: #ffffff;
	opacity: 0.92;
	cursor: not-allowed;
	filter: grayscale(0.3);
}

.aia-selection-next:not(:disabled):active {
	transform: none;
	box-shadow: none;
}

.aia-connection-status {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	padding:
		max(24px, calc(env(safe-area-inset-top, 0px) + 16px))
		max(24px, calc(env(safe-area-inset-right, 0px) + 16px))
		max(24px, calc(var(--aia-safe-area-bottom, 0px) + 16px))
		max(24px, calc(env(safe-area-inset-left, 0px) + 16px));
	overflow: auto;
	background: rgba(10, 7, 22, 0.42);
	pointer-events: auto;
}

.aia-connection-status[hidden] {
	display: none;
}

.aia-connection-panel {
	width: min(86vw, 360px);
	max-width: 100%;
	max-height: 100%;
	box-sizing: border-box;
	overflow: auto;
	padding: 22px 20px 20px;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 12px 32px rgba(92, 13, 68, 0.28);
	color: #7e1763;
	text-align: center;
}

.aia-connection-spinner {
	display: none;
	width: 28px;
	height: 28px;
	margin: 0 auto 12px;
	border: 3px solid rgba(216, 10, 79, 0.22);
	border-top-color: #d80a4f;
	border-radius: 50%;
	animation: aia-connection-spin 700ms linear infinite;
}

.aia-connection-status.is-loading .aia-connection-spinner {
	display: block;
}

@keyframes aia-connection-spin {
	to {
		transform: rotate(360deg);
	}
}

.aia-connection-panel strong {
	display: block;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
}

.aia-connection-panel p {
	margin: 10px 0 0;
	color: #4f2445;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.aia-connection-retry {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 132px;
	min-height: 42px;
	margin-top: 18px;
	border: 0;
	border-radius: 42px;
	background: linear-gradient(180deg, #ff7a85 0%, #d31145 100%);
	box-shadow: 0 4px 0 #ba0361;
	color: #ffffff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.aia-connection-retry[hidden] {
	display: none;
}

/* ADR-0001: same rationale as the checkbox block above — scale the button
   continuously with the content area instead of the three-value jump
   (154px/184px/154px across breakpoints) the px rules produce on their own.
   Fallback: the base rule and the two @media overrides further down stay
   unchanged and apply as-is on engines without container query support. */
@supports (container-type: inline-size) {
	.aia-selection-next {
		width: clamp(154px, 43.2cqw, 184px);
		min-height: clamp(44px, 12.3cqw, 54px);
		font-size: clamp(18px, 5cqw, 21px);
	}
}

.aia-prize-row {
	display: grid;
	grid-template-columns: minmax(94px, 170px) 1fr;
	gap: clamp(8px, 1.8vw, 12px);
	align-items: center;
	width: min(95%, 520px);
	margin-top: 0;
	color: #ffffff;
	filter: drop-shadow(0 4px 5px rgba(117, 0, 58, 0.25));
}

.aia-prize-image {
	width: 299.52%;
	height: auto;
	margin-left: -19px;
	transform-origin: 50% 55%;
	animation: aia-prize-float 3.8s ease-in-out infinite alternate;
	will-change: transform;
}

@media (min-width: 768px) {
	.aia-prize-row {
		grid-template-columns: minmax(175px, 318px) minmax(0, 1fr);
	}

	.aia-prize-image {
		width: 100%;
	}
}

@keyframes aia-prize-float {
	0% {
		transform: translate3d(-2px, 5px, 0) rotate(-2deg);
	}
	50% {
		transform: translate3d(4px, -6px, 0) rotate(2deg);
	}
	100% {
		transform: translate3d(-1px, 3px, 0) rotate(-1deg);
	}
}

.aia-prize-copy img {
	width: 70px;
	height: auto;
	margin-bottom: 8px;
}

.aia-prize-copy p {
	margin: 0;
	color: #BA0361;
	font-size: clamp(21px, min(4.8vw, 3.6vh), 36px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0.01em;
}

.aia-prize-title {
	font-size: 20px;
	font-weight: 700;
}

.aia-prize-copy strong {
	font-size: 1.12em;
}

.aia-prize-value {
	font-size: 20px !important;
	font-weight: 700 !important;
}

.aia-prize-value span {
	font-size: 24px;
	font-weight: 600;
}

.aia-prize-copy small {
	display: block;
	margin-top: 8px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.025em;
}

.aia-prize-copy .aia-prize-note {
	display: block;
	margin-top: 20px;
	line-height: 1.3 !important;
	color: #BA0361;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	vertical-align: middle;
}

.aia-rules-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: clamp(8px, 1.4vh, 14px);
	color: #ffffff;
	font-size: clamp(18px, min(4vw, 3vh), 28px);
	font-weight: 900;
	letter-spacing: 0.01em;
	text-shadow: none;
}

.aia-rules-link span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
}

.aia-selection-modal {
	position: fixed;
	z-index: 40;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px calc(var(--aia-safe-area-bottom, 0px) + 18px);
	box-sizing: border-box;
	color: #d80a4f;
}

.aia-selection-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(83, 0, 43, 0.58);
	backdrop-filter: blur(7px);
}

.aia-selection-modal-panel {
	position: relative;
	z-index: 1;
	width: min(94vw, 720px);
	max-height: min(88vh, 1120px);
	overflow: auto;
	overscroll-behavior: contain;
	border-radius: 34px;
	box-shadow: 0 22px 50px rgba(77, 0, 39, 0.35);
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}

.aia-selection-modal-panel.is-rules {
	width: min(94vw, 620px);
	padding: 0;
	border: 3px solid #d31145;
	border-radius: 28px;
	background: linear-gradient(180deg, #ffffff 0%, #fff4f8 100%);
}

.aia-selection-modal-panel.is-rules .aia-selection-modal-close {
	position: sticky;
	top: 8px;
	margin: 10px 10px -54px 0;
	border: 2px solid #d31145;
	background: #ffffff;
	box-shadow: 0 3px 0 #ba0361;
	color: #d31145;
}

.aia-selection-rules {
	box-sizing: border-box;
	padding: 34px clamp(20px, 6vw, 46px) 36px;
	color: #3f2037;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: clamp(14px, 2.2vw, 18px);
	font-weight: 500;
	line-height: 1.5;
}

.aia-selection-rules[hidden] {
	display: none !important;
}

.aia-selection-rules h2 {
	margin: 0 48px 20px 0;
	color: #d31145;
	font-size: clamp(22px, 5.4vw, 32px);
	font-weight: 900;
	line-height: 1.25;
	text-align: center;
}

.aia-selection-rules ol {
	margin: 0;
	padding-left: 1.5em;
}

.aia-selection-rules li {
	margin-bottom: 10px;
	padding-left: 4px;
}

.aia-selection-rules li::marker {
	font-weight: 800;
}

.aia-selection-rules ul {
	margin: 8px 0 0;
	padding-left: 1.25em;
	list-style: disc;
}

.aia-selection-rules ul li {
	margin-bottom: 4px;
}

.aia-selection-rules li.is-emphasis {
	padding: 8px 10px;
	border-radius: 10px;
	background: #ffe1ec;
	color: #d31145;
	font-weight: 900;
}

.aia-selection-modal-close {
	position: sticky;
	z-index: 2;
	top: 8px;
	float: right;
	width: 56px;
	height: 56px;
	margin: 18px 44px -74px 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: transparent;
	font-size: 46px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 520px) {
	.aia-selection-content {
		padding-left: 4.2%;
		padding-right: 4.2%;
	}

	.aia-selection-logo {
		width: 58%;
		margin-top: 52px;
		margin-bottom: 10px;
	}

	.aia-select-card {
		grid-template-columns: 42px 1fr 1px 38px;
		width: min(340px, calc(100vw - 48px));
		min-height: 110px;
		margin-bottom: 20px;
		padding: 10px 10px 10px 12px;
		border-radius: 24px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 246, 250, 0.97) 42%, rgba(255, 228, 238, 0.97) 100%);
		box-shadow: 0 4px 0 #c90059, 0 7px 10px rgba(157, 0, 77, 0.12);
	}

	.aia-select-card:nth-of-type(2) {
		margin-bottom: 20px;
	}

		.aia-card-icon {
			width: 34px;
			height: 34px;
		}

		.aia-card-icon-user::before {
			inset: 5px 4px 4px;
		}

		.aia-card-icon-heart::before {
			inset: 4px;
		}

	.aia-card-copy {
		padding: 0 8px;
	}

	.aia-card-copy p {
		margin-bottom: 5px;
		font-size: clamp(11px, 3.35vw, 14px);
		line-height: 1.28;
		letter-spacing: -0.045em;
		white-space: nowrap;
	}

	.aia-card-copy strong {
		font-size: 20px;
		letter-spacing: -0.055em;
	}

	.aia-card-divider {
		margin: 5px 0;
	}

	.aia-card-arrow {
		border-left-width: 10px;
		border-right-width: 10px;
		border-top-width: 12px;
	}

	.aia-consent-row {
		width: min(340px, calc(100vw - 48px));
		grid-template-columns: 26px 1fr;
		gap: 8px;
		margin-bottom: 20px;
		font-size: clamp(9px, 2.65vw, 11px);
		line-height: 1.28;
		letter-spacing: -0.035em;
	}

	.aia-consent-box {
		width: 22px;
		height: 22px;
		border-radius: 6px;
	}

	.aia-selection-next {
		width: 184px;
		min-height: 54px;
		margin-bottom: 0;
		font-size: 21px;
		letter-spacing: -0.06em;
	}
}

@media (max-width: 520px) and (min-height: 821px) and (orientation: portrait) {
	.aia-selection-content {
		padding-top: calc(env(safe-area-inset-top, 0px) + 38px);
	}

	.aia-selection-logo {
		margin-top: 46px;
		/* margin-bottom: 14px; */
	}
}

@media (max-height: 820px) and (orientation: portrait) {
	.aia-selection-content {
		padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
		padding-bottom: calc(var(--aia-safe-area-bottom, 0px) + 14px);
	}

	.aia-selection-mark {
		top: calc(env(safe-area-inset-top, 0px) + 34px);
		right: calc(env(safe-area-inset-right, 0px) + 30px);
		width: 50px;
	}

	.aia-selection-logo {
		width: min(50%, 310px);
		margin-top: 10px;
		margin-bottom: 5px;
	}

	.aia-select-card {
		grid-template-columns: 42px 1fr 1px 38px;
		width: min(340px, calc(100vw - 48px));
		min-height: 92px;
		margin-bottom: 12px;
		padding: 10px 10px 10px 12px;
		border-radius: 24px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 246, 250, 0.97) 42%, rgba(255, 228, 238, 0.97) 100%);
		box-shadow: 0 4px 0 #c90059, 0 7px 10px rgba(157, 0, 77, 0.12);
	}

	.aia-select-card:nth-of-type(2) {
		margin-bottom: 20px;
	}

		.aia-card-icon {
			width: 34px;
			height: 34px;
		}

		.aia-card-icon-user::before {
			inset: 5px 4px 4px;
		}

		.aia-card-icon-heart::before {
			inset: 4px;
		}

	.aia-card-copy p {
		margin-bottom: 5px;
		font-size: clamp(11px, 1.72vh, 14px);
		line-height: 1.28;
		letter-spacing: -0.045em;
		white-space: nowrap;
	}

	.aia-card-copy strong {
		font-size: 20px;
		letter-spacing: -0.055em;
	}

	.aia-consent-row {
		width: min(340px, calc(100vw - 48px));
		grid-template-columns: 26px 1fr;
		gap: 8px;
		margin-bottom: 12px;
		font-size: clamp(9px, 1.45vh, 11px);
		letter-spacing: -0.035em;
	}

	.aia-consent-box {
		width: 22px;
		height: 22px;
		border-radius: 6px;
	}

	.aia-selection-next {
		width: 154px;
		min-height: 44px;
		margin-bottom: 0;
		font-size: 18px;
		letter-spacing: -0.06em;
		box-shadow: 0 6px 0 #c80055, 0 10px 18px rgba(157, 0, 77, 0.18);
	}

	.aia-prize-row {
		grid-template-columns: minmax(86px, 138px) 1fr;
		width: min(88%, 460px);
	}

	.aia-prize-copy img {
		width: 70px;
		margin-bottom: 2px;
	}

	.aia-prize-copy p {
		font-size: clamp(18px, 3vh, 28px);
	}

	.aia-prize-copy small {
		margin-top: 3px;
		font-size: 10px;
	}

	.aia-rules-link {
		margin-top: 7px;
		font-size: clamp(16px, 2.5vh, 23px);
	}
}

@media (orientation: landscape) and (max-height: 640px) {
	.aia-selection-screen {
		width: 100vw;
	}

	.aia-selection-content {
		display: grid;
		/* Keep the two-column layout, but let the form column shrink on narrow
		   landscape phones instead of forcing a 630px minimum width. */
		grid-template-columns: minmax(150px, 0.65fr) minmax(0, 1.35fr);
		grid-auto-rows: min-content;
		column-gap: clamp(10px, 2.5vw, 22px);
		align-items: center;
		padding:
			calc(env(safe-area-inset-top, 0px) + 16px)
			clamp(12px, 3vw, 30px)
			calc(var(--aia-safe-area-bottom, 0px) + 16px);
	}

	.aia-selection-logo {
		grid-row: 1 / span 3;
		width: min(100%, 260px);
		margin: 0;
	}

	.aia-select-card {
		width: min(100%, 562px);
		min-height: clamp(84px, 26vh, 104px);
		margin-bottom: clamp(8px, 2vh, 14px);
	}

	.aia-consent-row,
	.aia-selection-next,
	.aia-prize-row,
	.aia-rules-link {
		grid-column: 2;
		max-width: 100%;
	}

}

.aia-selection-next,
button.aia-selection-next,
#aiaSelectionNext {
	font-family: "Prompt", "Noto Sans Thai", sans-serif !important;
	font-weight: 600 !important;
	font-size: 21px !important;
	letter-spacing: -0.03em !important;
}

.aia-prize-row {
	gap: 6px !important;
}

.aia-prize-copy img {
	margin-bottom: 0 !important;
}

.aia-prize-copy p {
	margin: 0 !important;
	line-height: 1.02 !important;
}

.aia-prize-copy small {
	margin-top: 8px !important;
	line-height: 1.08 !important;
}

.aia-rules-link {
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 500 !important;
}

.aia-score-burst {
	position: fixed;
	z-index: 3;
	inset: 0;
	width: var(--app-width, 100vw);
	height: var(--app-height, 100dvh);
	pointer-events: none;
	overflow: hidden;
}

.aia-score-burst-fruit {
	position: absolute;
	background: center / contain no-repeat;
	filter: drop-shadow(0 8px 8px rgba(126, 0, 58, 0.18));
	transform: translate(-50%, -50%) scale(1) rotate(0deg);
	transform-origin: 50% 50%;
	animation: aia-score-gameplay-pop 2s cubic-bezier(0.18, 0.78, 0.2, 1) infinite both;
}

.aia-score-burst-fruit::before,
.aia-score-burst-fruit::after {
	content: "";
	position: absolute;
	opacity: 0;
	pointer-events: none;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

.aia-score-burst-fruit::before {
	left: 50%;
	top: 50%;
	width: 52%;
	height: 52%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 18%, currentColor 19% 38%, rgba(255, 255, 255, 0) 39%);
	filter: blur(0.2px);
	transform: translate(-50%, -50%) scale(0.2);
	animation-name: aia-score-gameplay-flash;
}

.aia-score-burst-fruit::after {
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
	transform: translate(-50%, -50%) scale(0.2);
	animation-name: aia-score-gameplay-particles;
}

.aia-score-burst-pink {
	left: 20%;
	top: 33%;
	width: clamp(86px, 23vw, 178px);
	aspect-ratio: 250 / 192;
	color: #e70087;
	background-image: url("images/aia-result-virus-pink.png");
	animation-delay: 0s;
}

.aia-score-burst-orange {
	left: 85%;
	top: 36%;
	width: clamp(48px, 11vw, 96px);
	aspect-ratio: 1;
	color: #ff7b12;
	background-image: url("images/aia-result-virus-orange.png");
	animation-delay: 0.22s;
}

.aia-score-burst-yellow {
	left: 14.6%;
	top: 58%;
	width: clamp(58px, 14vw, 112px);
	aspect-ratio: 160 / 184;
	color: #ffd51a;
	background-image: url("images/aia-result-virus-yellow.png");
	animation-delay: 0.44s;
}

.aia-score-burst-green {
	left: 88%;
	top: 59%;
	width: clamp(58px, 14vw, 112px);
	aspect-ratio: 158 / 184;
	color: #64c322;
	background-image: url("images/aia-result-virus-green.png");
	animation-delay: 0.66s;
}

.aia-score-burst-pink::before,
.aia-score-burst-pink::after {
	animation-delay: 0s;
}

.aia-score-burst-pink::after {
	box-shadow:
		-12px -8px 0 #ffffff,
		12px 8px 0 #ff5ea5,
		-34px -20px 0 #ff9ed8,
		34px -18px 0 #ffffff,
		-30px 24px 0 #d30055,
		30px 24px 0 #ff6fbf,
		-50px 2px 0 #ff5ea5,
		50px -2px 0 #ffffff,
		-8px 42px 0 #ff9ed8,
		10px -42px 0 #d30055;
}

.aia-score-burst-orange::before,
.aia-score-burst-orange::after {
	animation-delay: 0.22s;
}

.aia-score-burst-orange::after {
	box-shadow:
		-10px -8px 0 #ffffff,
		12px 8px 0 #ff7b12,
		-26px -18px 0 #ffb14a,
		28px -18px 0 #ffffff,
		-24px 22px 0 #ff7b12,
		26px 21px 0 #ffcb66,
		-38px 2px 0 #ff9a24,
		38px -2px 0 #ffffff,
		-6px 34px 0 #ffcb66,
		8px -34px 0 #ff7b12;
}

.aia-score-burst-yellow::before,
.aia-score-burst-yellow::after {
	animation-delay: 0.44s;
}

.aia-score-burst-yellow::after {
	box-shadow:
		-10px -8px 0 #ffffff,
		12px 8px 0 #ffd51a,
		-28px -20px 0 #fff2a5,
		30px -18px 0 #ffffff,
		-24px 24px 0 #ffd51a,
		28px 22px 0 #ffb400,
		-42px 2px 0 #fff06b,
		42px -2px 0 #ffffff,
		-7px 36px 0 #fff2a5,
		8px -36px 0 #ffd51a;
}

.aia-score-burst-green::before,
.aia-score-burst-green::after {
	animation-delay: 0.66s;
}

.aia-score-burst-green::after {
	box-shadow:
		-10px -8px 0 #ffffff,
		12px 8px 0 #64c322,
		-28px -20px 0 #b7f071,
		30px -18px 0 #ffffff,
		-24px 24px 0 #64c322,
		28px 22px 0 #8cdc34,
		-42px 2px 0 #a4e848,
		42px -2px 0 #ffffff,
		-7px 36px 0 #b7f071,
		8px -36px 0 #64c322;
}

@keyframes aia-score-gameplay-pop {
	0%, 12%, 56%, 100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
	}
	17% {
		opacity: 1;
		filter: drop-shadow(0 8px 8px rgba(126, 0, 58, 0.18));
		transform: translate(-50%, -50%) scale(0.86) rotate(-5deg);
	}
	24% {
		opacity: 1;
		filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.82));
		transform: translate(-50%, -50%) scale(1.24) rotate(7deg);
	}
	31% {
		opacity: 0;
		filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.95));
		transform: translate(-50%, -50%) scale(1.7) rotate(14deg);
	}
	43% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.72) rotate(0deg);
	}
}

@keyframes aia-score-gameplay-flash {
	0%, 14%, 45%, 100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.2);
	}
	22% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.05);
	}
	38% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(2.2);
	}
}

@keyframes aia-score-gameplay-particles {
	0%, 16%, 58%, 100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.2);
	}
	24% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(0.85);
	}
	34% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.55);
	}
	52% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(2.35);
	}
}

.aia-leaderboard {
	position: fixed;
	z-index: 35;
	inset: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	overflow: hidden;
	color: var(--AIARed, #D31145);
	background: url("images/aia-leaderboard-background-perf-v1.webp") center center / cover no-repeat;
	pointer-events: auto;
}

.aia-selection-gate,
.aia-leaderboard {
	inset: auto;
	top: var(--aia-visual-viewport-top, 0px);
	left: var(--aia-visual-viewport-left, 0px);
	width: var(--app-width, 100vw);
	height: var(--app-height, 100dvh);
}

.aia-leaderboard-screen {
	position: relative;
	width: min(var(--app-width, 100vw), 768px);
	height: var(--app-height, 100dvh);
	min-height: var(--app-height, 100dvh);
	/* LINE/Android WebView may inflate only DOM text while leaving the
	   390px design plane unchanged. Keep authored leaderboard sizes stable. */
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: transparent;
}

.aia-leaderboard-screen::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 50% 17%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 31%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0));
}

.aia-leaderboard-screen::after {
	content: none;
}

.aia-leaderboard-content {
	position: relative;
	z-index: 1;
	display: flex;
	height: var(--app-height, 100dvh);
	min-height: 0;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: calc(env(safe-area-inset-top, 0px) + clamp(42px, 8vh, 82px)) 8% calc(var(--aia-safe-area-bottom, 0px) + 26px);
	/* ADR-0001: same container-query foundation as .aia-selection-content. */
	container-type: inline-size;
	container-name: aia-leaderboard-page;
}

.aia-leaderboard-brand {
	position: relative;
	z-index: 1;
	display: block;
	width: 50px;
	height: auto;
	margin: 0;
}

.aia-leaderboard h1 {
	position: relative;
	z-index: 1;
	margin: 8px 0 12px;
	text-align: center;
}

.aia-leaderboard-table {
	text-shadow: 0 4px 0 var(--AIAPurple);
	font-family: "Prompt", sans-serif;
	font-size: clamp(44px, min(10.5vw, 7.6vh), 68px);
	font-weight: 700;
	font-style: normal;
	font-size: 32px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	vertical-align: middle;
	margin: 6px 0 4px;
	color: var(--AIARed, #D31145);
	text-shadow:
		-2px -2px 0 #fff,
		 2px -2px 0 #fff,
		-2px  2px 0 #fff,
		 2px  2px 0 #fff,
		 0px  3px 0 var(--AIAPurple, #7E1763);
}

.aia-leaderboard-period,
.aia-leaderboard-as-of {
	position: relative;
	z-index: 1;
	margin: 3px 0 0;
	color: var(--AIARed, #D31145);
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.aia-leaderboard-period {
	font-size: 15px;
}

.aia-leaderboard-as-of {
	font-size: 11px;
	font-weight: 500;
}

.aia-leaderboard-period[hidden],
.aia-leaderboard-as-of[hidden] {
	display: none !important;
}

#aiaLeaderboardTitle {
    margin: 10px 0 10px;
    font-family: "Prompt", sans-serif;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    text-align: center;

    background: linear-gradient(180deg, #FF7A85 0%, #D31145 100%);
	background-clip: text;
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */

	 /* White Stroke */
    /* -webkit-text-stroke: 4px #FFFFFF;	 */

    text-shadow:
        -2px -2px 0 #fff,
         2px -2px 0 #fff,
        -2px  2px 0 #fff,
         2px  2px 0 #fff,
         0px  4px 0 var(--AIAPurple, #7E1763);
}

.aia-leaderboard-title-cloud {
	position: absolute;
	z-index: 0;
	top: calc(env(safe-area-inset-top, 0px) + clamp(48px, 6.4vh, 64px));
	left: 50%;
	width: min(92vw, 520px);
	height: clamp(176px, 22vh, 220px);
	max-width: none;
	transform: translateX(-50%);
	object-fit: fill;
	pointer-events: none;
	user-select: none;
}

.aia-leaderboard-title-cloud-top {
	position: absolute;
	z-index: 0;
	top: calc(env(safe-area-inset-top, 0px) + clamp(64px, 8.4vh, 86px));
	left: 50%;
	width: min(73.6vw, 416px);
	height: clamp(141px, 17.6vh, 176px);
	max-width: none;
	transform: translateX(-50%);
	object-fit: fill;
	pointer-events: none;
	user-select: none;
}

.aia-leaderboard-subtitle {
	position: relative;
	z-index: 1;
	margin: 0 0 clamp(20px, 3.2vh, 34px);
	color: var(--AIARed, #D31145);
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: center;
}

.aia-leaderboard-subtitle span {
	display: block;
	font-size: 0.82em;
	font-weight: 600;
}

.aia-leaderboard-list {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(14px, 2.3vh, 22px);
	width: min(100%, 590px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aia-leaderboard-row {
    width: 100%;
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 16px 24px 16px 16px;

    border-radius: 16px;
    border: 2px solid var(--AIARed, #D31145);

    background: linear-gradient(180deg, #FFFFFF 0%, #FFCAD8 100%);
    /* --AIAPurple is not defined anywhere; without the fallback this whole
       declaration is invalid and the row renders with no shadow at all. */
    box-shadow: 0 3px 0 var(--AIAPurple, #7E1763);

    box-sizing: border-box;
}

.aia-leaderboard-row.is-you {
	min-height: clamp(86px, 11vh, 116px);
	background: linear-gradient(180deg, #FF7A85 0%, #D31145 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.26), 0 7px 0 var(--AIAPurple, #7E1763);
	color: #ffffff;
	text-shadow: 0 3px 0 rgba(117, 0, 46, 0.42);
}

.aia-leaderboard-separator {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 14px;
	color: var(--AIARed, #D31145);
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	user-select: none;
}

.aia-leaderboard-row:hover,
.aia-leaderboard-row.is-row-popping {
	filter: brightness(1.06) drop-shadow(0 10px 9px rgba(126, 0, 58, 0.18));
	z-index: 2;
}

.aia-leaderboard-row.is-row-popping {
	animation: aia-leaderboard-row-pop 420ms cubic-bezier(0.17, 0.86, 0.24, 1.24) both;
}

.aia-rank-name {
	/* fill the middle of the flex row so the name hugs the rank mark on the
	   left and the score stays right, instead of floating centered */
	flex: 1;
	text-align: left;
	overflow: hidden;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
	cursor: pointer;
}

.aia-rank-score {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-left: 12px;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	color: inherit;
}

.aia-rank-name.is-you,
.aia-rank-score.is-you {
	font-size: 32px;
	font-weight: 700;
	-webkit-text-stroke: 0.5px #C1272D;
	paint-order: stroke fill;
}

.aia-rank-score small {
	font-size: 0.58em;
}

.aia-rank-mark {
	display: block;
	justify-self: center;
}

.aia-rank-up {
	width: 0;
	height: 0;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-bottom: 18px solid #ffffff;
	filter: drop-shadow(0 2px 0 rgba(117, 0, 46, 0.42));
}

.aia-rank-down {
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 20px solid var(--AIARed, #D31145);
}

.aia-leaderboard-replay {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 190px;
	height: 44px;
	margin-top: 26px;
	margin-bottom: 16px;
	padding: 4px 36px;
	gap: 10px;

	border: none;
	border-radius: 100px;

	background: linear-gradient(180deg, #FF7A85 0%, #D31145 100%);
	box-shadow: 0 4px 0 #BA0361;

	font-family: "Prompt", sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;

	cursor: pointer;
	user-select: none;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.aia-leaderboard-replay:hover {
	filter: brightness(1.05);
}

.aia-replay-text {
	font-family: "Prompt", sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0;

	color: #F9FFF2;
	-webkit-text-stroke: 1px #BC004D;
	text-shadow:
		0 2px 0 #BC004D;
}


.aia-leaderboard-replay:active {
	transform: translateY(4px);
	box-shadow: 0 5px 0 var(--AIAPurple, #7E1763);
}

.aia-leaderboard-rules {
	margin: auto 0 0;
}

.aia-leaderboard-content {
	padding-bottom: calc(var(--aia-safe-area-bottom, 0px) + 26px) !important;
}

@media (max-width: 767px) {
	.aia-leaderboard-rules {
		position: absolute;
		left: 8%;
		right: 8%;
		bottom: calc(var(--aia-safe-area-bottom, 0px) + 30px);
		width: auto;
		margin: 0;
	}

}

/* Short landscape screens use a two-column composition: campaign context on
   the left, compact ranks on the right, and the eligibility footer below. */
@media (orientation: landscape) and (max-height: 800px) {
	html .aia-leaderboard-content {
		position: relative;
		height: var(--app-height, 100dvh);
		padding: 18px 16px 104px;
	}

	html .aia-leaderboard-brand-flow-space,
	html .aia-leaderboard-title-cloud,
	html .aia-leaderboard-title-cloud-top,
	html .aia-leaderboard-star {
		display: none;
	}

	html .aia-leaderboard-heading {
		position: absolute;
		top: 18px;
		left: 16px;
		width: 42%;
	}

	html .aia-leaderboard-heading .aia-leaderboard-table {
		font-size: 20px;
	}

	html .aia-leaderboard-heading #aiaLeaderboardTitle {
		margin-top: 0;
		font-size: 42px;
		line-height: 1;
	}

	html .aia-leaderboard-period {
		position: absolute;
		top: 91px;
		left: 16px;
		width: 42%;
		margin: 0;
		font-size: 12px;
	}

	html .aia-leaderboard-as-of {
		position: absolute;
		top: 120px;
		left: 16px;
		width: 42%;
		margin: 0;
		font-size: 10px;
	}

	html .aia-leaderboard-subtitle {
		position: absolute;
		top: 140px;
		left: 16px;
		width: 42%;
		margin: 0;
		font-size: 11px;
		line-height: 1.1;
	}

	html .aia-leaderboard-subtitle .aia-leaderboard-subtitle-primary-text {
		white-space: normal;
	}

	html .aia-leaderboard-subtitle .aia-leaderboard-subtitle-note {
		display: none;
	}

	html body .aia-leaderboard-list {
		position: absolute;
		top: 50px;
		right: 16px;
		width: 48%;
		margin: 0;
		gap: 4px;
	}

	html body .aia-leaderboard-row {
		min-height: 28px;
		padding: 2px 8px;
		gap: 5px;
		border-radius: 10px;
		box-shadow: 0 2px 0 var(--AIAPurple, #7e1763);
	}

	html body .aia-leaderboard-row.is-you {
		min-height: 34px;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 3px 0 var(--AIAPurple, #7e1763);
	}

	html body .aia-rank-name,
	html body .aia-rank-score {
		font-size: 15px;
	}

	html body .aia-rank-name.is-you,
	html body .aia-rank-score.is-you {
		font-size: 18px;
	}

	html body .aia-rank-up {
		border-left-width: 8px;
		border-right-width: 8px;
		border-bottom-width: 9px;
	}

	html body .aia-rank-down {
		border-left-width: 9px;
		border-right-width: 9px;
		border-top-width: 10px;
	}

	html body .aia-leaderboard-replay {
		position: absolute;
		top: 174px;
		left: calc(21% - 70px);
		width: 140px;
		height: 34px;
		min-height: 34px;
		margin: 0;
		padding: 3px 20px;
	}

	html body .aia-replay-text {
		font-size: 18px;
	}
}

.aia-leaderboard-fruit-pop {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.aia-leaderboard-fruit-pop-item {
	position: absolute;
	transform: translate(-50%, -50%);
	color: var(--aia-fruit-juice, #ff8a1f);
}

.aia-leaderboard-fruit-pop-body {
	position: absolute;
	inset: 0;
	background: center / contain no-repeat;
	filter: drop-shadow(0 6px 6px rgba(117, 0, 46, 0.16));
	transform: scale(0) rotate(0deg);
	transform-origin: 50% 50%;
	opacity: 0;
	will-change: transform, opacity;
	animation: aia-leaderboard-fruit-pop-in 420ms cubic-bezier(0.18, 0.78, 0.2, 1.3) forwards;
}

.aia-leaderboard-fruit-pop-slashed .aia-leaderboard-fruit-pop-body {
	animation: aia-leaderboard-fruit-collapse var(--aia-fruit-collapse-ms, 150ms) cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

/* juice splat: radial burst of glossy teardrop droplets, tip pointing inward */
.aia-leaderboard-fruit-pop-splat {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.aia-leaderboard-fruit-pop-drop {
	position: absolute;
	left: 50%;
	top: 50%;
	/* teardrop: rounded bulb with one sharp pointed corner (bottom-left before rotation) */
	border-radius: 50% 50% 50% 0;
	background:
		radial-gradient(circle at 68% 32%, rgba(255, 255, 255, 0.9) 0 12%, rgba(255, 255, 255, 0.32) 22%, rgba(255, 255, 255, 0) 44%),
		currentColor;
	filter: drop-shadow(0 1px 1px rgba(117, 0, 46, 0.22));
	opacity: 0;
	/*
	 * Rotate the whole drop to its ring angle, translate outward along that angle,
	 * then spin the teardrop 45deg extra so its pointed corner faces the burst center.
	 */
	transform:
		rotate(var(--aia-drop-angle, 0deg))
		translateY(calc(var(--aia-drop-spread, 60%) * 0.2))
		rotate(45deg)
		scale(0.3);
	transform-origin: 0 0;
	will-change: transform, opacity;
}

.aia-leaderboard-fruit-pop-slashed .aia-leaderboard-fruit-pop-drop {
	/* burst begins as the fruit finishes collapsing */
	animation: aia-leaderboard-splat-drop 460ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--aia-fruit-collapse-ms, 150ms) forwards;
}

@keyframes aia-leaderboard-fruit-collapse {
	0% {
		opacity: 1;
		transform: scale(1) rotate(var(--aia-fruit-pop-rotate, 0deg));
	}
	35% {
		opacity: 1;
		transform: scale(1.1, 0.9) rotate(var(--aia-fruit-pop-rotate, 0deg));
	}
	100% {
		opacity: 0;
		transform: scale(0) rotate(var(--aia-fruit-pop-rotate, 0deg));
	}
}

@keyframes aia-leaderboard-fruit-pop-in {
	0% {
		opacity: 0;
		transform: scale(0) rotate(0deg);
	}
	70% {
		opacity: 1;
		transform: scale(1.14) rotate(var(--aia-fruit-pop-rotate, 0deg));
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(var(--aia-fruit-pop-rotate, 0deg));
	}
}

@keyframes aia-leaderboard-splat-drop {
	0% {
		opacity: 0;
		transform:
			rotate(var(--aia-drop-angle, 0deg))
			translateY(calc(var(--aia-drop-spread, 60%) * 0.2))
			rotate(45deg)
			scale(0.3);
	}
	25% {
		opacity: 1;
		transform:
			rotate(var(--aia-drop-angle, 0deg))
			translateY(calc(var(--aia-drop-spread, 60%) * 0.62))
			rotate(45deg)
			scale(1);
	}
	100% {
		opacity: 0;
		transform:
			rotate(var(--aia-drop-angle, 0deg))
			translateY(var(--aia-drop-spread, 60%))
			rotate(45deg)
			scale(0.72);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aia-playgame-start-button {
		animation: none;
	}

	.aia-leaderboard-fruit-pop-body,
	.aia-leaderboard-fruit-pop-drop {
		animation: none;
		opacity: 0;
	}
}

@keyframes aia-leaderboard-row-pop {
	0% {
		transform: translateY(0) scale(1);
	}
	42% {
		transform: translateY(-10px) scale(1.055);
	}
	70% {
		transform: translateY(3px) scale(0.99);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 520px) {
	.aia-leaderboard-content {
		padding-top: calc(env(safe-area-inset-top, 0px) + 34px);
		padding-bottom: calc(var(--aia-safe-area-bottom, 0px) + 16px);
		padding-left: 8%;
		padding-right: 8%;
	}

	.aia-leaderboard-list {
		gap: 14px;
	}

	.aia-leaderboard-row {
		grid-template-columns: 31px minmax(0, 1fr) auto;
		min-height: 64px;
		padding: 10px 16px;
		box-shadow: 0 5px 0 var(--AIAPurple, #7E1763);
	}

	.aia-leaderboard-row.is-you {
		min-height: 82px;
	}

	.aia-rank-name,
	.aia-rank-score {
		font-size: 24px;
	}

	.aia-rank-name.is-you,
	.aia-rank-score.is-you {
		font-size: 32px;
	}

	.aia-rank-score {
		gap: 5px;
		margin-left: 8px;
	}

	.aia-rank-up {
		border-left-width: 13px;
		border-right-width: 13px;
		border-bottom-width: 15px;
	}

	.aia-rank-down {
		border-left-width: 14px;
		border-right-width: 14px;
		border-top-width: 16px;
	}

	.aia-leaderboard-replay {
		min-height: 58px;
		margin-top: 26px;
		margin-bottom: 16px;
		box-shadow: 0 6px 0 var(--AIAPurple, #7E1763);
	}

}

@media (max-height: 760px) and (orientation: portrait) {
	.aia-leaderboard-content {
		padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
		padding-bottom: calc(var(--aia-safe-area-bottom, 0px) + 12px);
	}

	.aia-leaderboard h1 {
		margin-bottom: 8px;
	}

	.aia-leaderboard-subtitle {
		margin-bottom: 14px;
	}

	.aia-leaderboard-list {
		gap: 10px;
	}

	.aia-leaderboard-row {
		min-height: 52px;
	}

	.aia-leaderboard-row.is-you {
		min-height: 64px;
	}

	.aia-rank-name,
	.aia-rank-score {
		font-size: 21px;
	}

	.aia-rank-name.is-you,
	.aia-rank-score.is-you {
		font-size: 32px;
	}

	.aia-leaderboard-replay {
		min-height: 48px;
		margin-top: 16px;
		margin-bottom: 10px;
		font-size: 23px;
	}

}

@media (max-height: 600px) and (orientation: portrait) {
	.aia-leaderboard-content {
		padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
		padding-bottom: calc(var(--aia-safe-area-bottom, 0px) + 8px);
	}

	.aia-leaderboard-brand {
		width: 50px;
	}

	.aia-leaderboard h1 {
		margin: 4px 0 6px;
	}

	.aia-leaderboard-subtitle {
		margin-bottom: 8px;
		font-size: 14px;
		line-height: 1.18;
	}

	.aia-leaderboard-list {
		gap: 7px;
	}

	.aia-leaderboard-row {
		grid-template-columns: 25px minmax(0, 1fr) auto;
		min-height: 46px;
		padding: 7px 12px;
		box-shadow: 0 4px 0 var(--AIAPurple, #7E1763);
	}

	.aia-leaderboard-row.is-you {
		min-height: 56px;
	}

	.aia-rank-name,
	.aia-rank-score {
		font-size: 19px;
	}

	.aia-rank-name.is-you,
	.aia-rank-score.is-you {
		font-size: 32px;
	}

	.aia-rank-score {
		gap: 4px;
		margin-left: 6px;
	}

	.aia-rank-up {
		border-left-width: 10px;
		border-right-width: 10px;
		border-bottom-width: 12px;
	}

	.aia-rank-down {
		border-left-width: 11px;
		border-right-width: 11px;
		border-top-width: 12px;
	}

	.aia-leaderboard-replay {
		width: min(210px, 58%);
		min-height: 42px;
		margin-top: 12px;
		margin-bottom: 8px;
		font-size: 21px;
		box-shadow: 0 6px 0 var(--AIAPurple, #7E1763);
	}

}

/* ============================================================================
   ADR-0001 migration: container-query scale for the selection and leaderboard
   pages. Appended last on purpose — on engines that support container queries
   these rules win the cascade over the px/media-query rules above (same
   specificity, later in file); on engines that don't, this whole block is
   skipped and the original rules keep working as the fallback.

   Slope convention:
   - selection page: container ≈ 340px on a 390px phone (6.4% padding each
     side), card caps at 562px → cqw slope picked so the clamp max is reached
     near the 562px container; clamp min = old mobile breakpoint value,
     clamp max = old desktop value.
   - leaderboard page: container ≈ 327px on a 390px phone (8% padding each
     side) → slope anchored so the old fixed mobile value holds at ~327px and
     grows gently up to the clamp max on wider screens; clamp min = old
     smallest media-query value (max-height 600 block).
   ========================================================================= */
@supports (container-type: inline-size) {
	/* ---------- selection page ---------- */
	.aia-select-card {
		grid-template-columns: clamp(42px, 14.6cqw, 82px) 1fr 2px clamp(38px, 12.8cqw, 72px);
		min-height: clamp(110px, 29.9cqw, 168px);
		padding: clamp(10px, 4.3cqw, 24px) clamp(10px, 3.2cqw, 18px) clamp(10px, 4.3cqw, 24px) clamp(12px, 5cqw, 28px);
		border-radius: clamp(24px, 6cqw, 34px);
	}

	.aia-card-icon {
		width: clamp(34px, 11.7cqw, 66px);
		height: clamp(34px, 11.7cqw, 66px);
	}

	/* insets as % of the icon box: 8/66 ≈ 12% desktop and 4/34 ≈ 12% mobile —
	   the ratio is identical, so percentages replace both px variants at once */
	.aia-card-icon-user::before {
		inset: 13.5% 12% 12%;
	}

	.aia-card-icon-heart::before {
		inset: 12%;
	}

	.aia-card-copy {
		padding: 0 clamp(8px, 3.9cqw, 22px);
	}

	.aia-card-copy p {
		font-size: clamp(11px, 4.2cqw, 26px);
	}

	.aia-card-copy .aia-card-question {
		font-size: 14px;
	}

	.aia-card-copy strong {
		font-size: clamp(20px, 4.3cqw, 24px);
		line-height: 1.33;
	}

	.aia-card-arrow {
		border-left-width: clamp(10px, 3.2cqw, 18px);
		border-right-width: clamp(10px, 3.2cqw, 18px);
		border-top-width: clamp(12px, 3.6cqw, 20px);
	}

	.aia-prize-copy p {
		font-size: clamp(18px, 6.4cqw, 36px);
	}

	.aia-prize-title,
	.aia-prize-value {
		font-size: 20px !important;
	}

	.aia-prize-value span {
		font-size: 24px;
	}

	.aia-prize-copy .aia-prize-note {
		font-size: clamp(10px, 2.15cqw, 12px);
	}

	/* the base rules for these two use !important, so the overrides here need
	   !important too (equal specificity+importance → later in file wins) */
	.aia-rules-link {
		font-size: clamp(13px, 2.85cqw, 16px) !important;
		line-height: 1.5 !important;
	}

	.aia-selection-next,
	button.aia-selection-next,
	#aiaSelectionNext {
		font-size: clamp(18px, 5cqw, 21px) !important;
	}

	/* ---------- leaderboard page ---------- */
	.aia-leaderboard-table {
		font-size: clamp(28px, 9.8cqw, 36px);
	}

	#aiaLeaderboardTitle {
		font-size: 64px;
	}

	.aia-leaderboard-subtitle {
		font-size: clamp(14px, 4.9cqw, 18px);
	}

	.aia-leaderboard-list {
		gap: clamp(7px, 4.3cqw, 22px);
	}

	.aia-leaderboard-row {
		min-height: clamp(46px, 20.8cqw, 76px);
		padding: clamp(7px, 4.9cqw, 16px) clamp(12px, 7.3cqw, 24px) clamp(7px, 4.9cqw, 16px) clamp(12px, 4.9cqw, 16px);
	}

	.aia-leaderboard-row.is-you {
		min-height: clamp(56px, 26.3cqw, 116px);
	}

	.aia-rank-name,
	.aia-rank-score {
		font-size: clamp(19px, 7.3cqw, 27px);
	}

	.aia-rank-name.is-you,
	.aia-rank-score.is-you {
		font-size: clamp(26px, 9.8cqw, 36px);
	}

	.aia-rank-up {
		border-left-width: clamp(10px, 4.9cqw, 16px);
		border-right-width: clamp(10px, 4.9cqw, 16px);
		border-bottom-width: clamp(12px, 5.5cqw, 18px);
	}

	.aia-rank-down {
		border-left-width: clamp(11px, 5.5cqw, 18px);
		border-right-width: clamp(11px, 5.5cqw, 18px);
		border-top-width: clamp(12px, 6.1cqw, 20px);
	}

	.aia-leaderboard-replay {
		width: clamp(160px, 58cqw, 210px);
		min-height: clamp(42px, 13.5cqw, 58px);
		font-size: clamp(21px, 7.3cqw, 26px);
	}

	.aia-replay-text {
		font-size: clamp(21px, 7.3cqw, 26px);
	}

}

/* ADR-0001 leftovers: modal close button scales with its panel (panel becomes
   its own container), corner marks scale with the viewport (fixed elements
   have no container parent — vw is the correct reference for them). Same
   fallback story as the block above: old px rules stay untouched. */
@supports (container-type: inline-size) {
	.aia-selection-modal-panel {
		container-type: inline-size;
	}

	.aia-selection-modal-close {
		top: clamp(6px, 1.2cqw, 8px);
		width: clamp(44px, 7.8cqw, 56px);
		height: clamp(44px, 7.8cqw, 56px);
		margin: clamp(10px, 2.5cqw, 18px) clamp(16px, 6.1cqw, 44px) clamp(-74px, -10.3cqw, -54px) 0;
		font-size: clamp(36px, 6.4cqw, 46px);
	}

	#aiaCornerMark,
	.aia-selection-mark {
		width: clamp(40px, 12.8vw, 56px);
	}
}

/* Mobile portrait fit profile: keep the complete selection journey inside the
   viewport from 360x640 upward. Height-driven values matter here because the
   existing container-query scale only reacts to width. Vertical scrolling stays
   enabled as an accessibility/content-growth fallback. */
@media (max-width: 767px) and (min-height: 640px) and (orientation: portrait) {
	.aia-selection-content {
		/* padding-top: calc(env(safe-area-inset-top, 0px) + clamp(8px, 1.4dvh, 13px)); */
		padding-bottom: calc(var(--aia-safe-area-bottom, 0px) + clamp(0px, 0.5dvh, 20px));
	}

	.aia-selection-mark {
		top: calc(env(safe-area-inset-top, 0px) + clamp(10px, 1.8dvh, 17px));
		right: calc(env(safe-area-inset-right, 0px) + clamp(14px, 4vw, 18px));
		width: clamp(40px, 11vw, 48px);
	}

	.aia-selection-logo {
		/* margin: clamp(8px, 2.4dvh, 18px) 0 clamp(4px, 1dvh, 8px); */
	}

	.aia-select-card,
	.aia-select-card:nth-of-type(2) {
		grid-template-columns: clamp(36px, 6.2dvh, 52px) minmax(0, 1fr) 1px clamp(34px, 5.8dvh, 48px);
		min-height: clamp(96px, 16dvh, 120px);
		padding: clamp(7px, 1.3dvh, 11px) clamp(8px, 2.4vw, 10px);
		border-radius: clamp(22px, 3.8dvh, 28px);
	}

	.aia-select-card {
		margin-bottom: clamp(10px, 1.8dvh, 14px);
	}

	.aia-select-card:nth-of-type(2) {
		margin-bottom: clamp(4px, 0.9dvh, 8px);
	}

	/* Four visual groups keep compact dvh-based gaps on short mobile screens:
	   logo → cards → consent/action → reward/rules. */
	.aia-spacing-group-start {
		/* margin-top: clamp(6px, 1.5dvh, 15px); */
	}

	.aia-card-icon {
		width: clamp(32px, 5.5dvh, 44px);
		height: clamp(32px, 5.5dvh, 44px);
	}

	.aia-card-copy {
		padding: 0 clamp(7px, 2.3vw, 10px);
	}

.aia-card-copy p,
.aia-card-copy .aia-card-question {
	margin-bottom: 4px;
	font-size: 14px;
		line-height: 1.5;
		white-space: normal;
	}

	.aia-card-copy strong {
		font-size: clamp(18px, 3dvh, 22px);
		line-height: 1.25;
	}

	.aia-card-copy strong[data-aia-selected="lifestyle-preference"],
	.aia-card-copy strong[data-aia-selected="interest"] {
		padding-top: 1px;
		padding-bottom: 1px;
		margin-bottom: 0;
	}

	.aia-card-divider {
		margin: 4px 0;
	}

	.aia-card-arrow {
		border-left-width: clamp(9px, 1.7dvh, 12px);
		border-right-width: clamp(9px, 1.7dvh, 12px);
		border-top-width: clamp(11px, 2dvh, 14px);
	}

	.aia-consent-row {
		grid-template-columns: 24px minmax(0, 1fr);
		gap: 7px;
		margin-bottom: clamp(2px, 0.7dvh, 6px);
	}

	.aia-consent-box {
		width: 22px;
		height: 22px;
	}

	.aia-consent-copy,
	.aia-link-button {
		font-size: 10px;
		line-height: 14px;
	}

	.aia-selection-next,
	button.aia-selection-next,
	#aiaSelectionNext {
		width: clamp(148px, 42vw, 176px);
		min-height: clamp(40px, 6.8dvh, 48px);
		/* margin: 0 0 clamp(3px, 0.7dvh, 6px); */
		font-size: clamp(18px, 3.1dvh, 20px) !important;
	}

	.aia-prize-row {
		grid-template-columns: clamp(78px, 13dvh, 108px) minmax(0, 1fr);
		margin-top: clamp(12px, 2dvh, 18px);
		width: min(88%, 360px);
	}

	.aia-prize-copy img {
		width: clamp(54px, 9dvh, 70px);
	}

	.aia-prize-title,
	.aia-prize-value {
		font-size: clamp(16px, 2.8dvh, 20px) !important;
	}

	.aia-prize-value span {
		font-size: clamp(20px, 3.3dvh, 24px);
	}

.aia-prize-copy .aia-prize-note {
	line-height: 1.3 !important;

	margin-top: clamp(3px, 0.6dvh, 6px) !important;
	font-size: clamp(9px, 1.5dvh, 11px);
}

	.aia-rules-link {
		gap: 6px;
		margin-top: clamp(2px, 1.2dvh, 18px);
		margin-bottom: 0;
		font-size: clamp(13px, 2.2dvh, 16px) !important;
		/* line-height: 1.35 !important; */
	}
}

@media (max-width: 767px) and (min-height: 700px) and (orientation: portrait) {
	.aia-selection-logo {
		margin-bottom: clamp(8px, 1.2dvh, 12px);
	}

	.aia-select-card {
		margin-bottom: clamp(16px, 2.1dvh, 20px);
	}

	.aia-select-card:nth-of-type(2) {
		margin-bottom: clamp(8px, 1.2dvh, 12px);
	}

	.aia-spacing-group-start {
		/* margin-top: clamp(14px, 2.2dvh, 24px); */
	}

	.aia-consent-row {
		margin-bottom: clamp(6px, 1dvh, 10px);
	}

	.aia-rules-link {
		margin-top: clamp(10px, 1.8dvh, 18px);
	}
}

@media (max-width: 767px) and (min-height: 900px) and (orientation: portrait) {
	.aia-selection-logo {
		/* margin-bottom: clamp(10px, 1.6dvh, 16px); */
	}

	.aia-select-card {
		margin-bottom: clamp(22px, 2.8dvh, 28px);
	}

	.aia-select-card:nth-of-type(2) {
		margin-bottom: clamp(10px, 1.8dvh, 18px);
	}

	.aia-spacing-group-start {
		/* margin-top: clamp(15px, 4dvh, 38px); */
	}

	.aia-consent-row {
		margin-bottom: clamp(8px, 1.4dvh, 14px);
	}

	.aia-prize-row {
		margin-top: clamp(24px, 4dvh, 38px);
	}

	.aia-rules-link {
		margin-top: clamp(18px, 3dvh, 30px);
	}
}

/* Mobile selection uses one flex flow. This avoids device-specific offsets:
   long answers expand their card and push all following content downward. */
@media (max-width: 767px) and (orientation: portrait) {
	.aia-selection-content {
		align-items: center;
		justify-content: flex-start;
		gap: clamp(4px, 0.8dvh, 8px);
		padding: clamp(4px, 0.8dvh, 8px) 4.2vw clamp(8px, 1.2dvh, 14px);
	}

	.aia-selection-logo {
		position: static;
		align-self: center;
		width: clamp(150px, 42vw, 185px);
		max-height: 24dvh;
		height: auto;
		flex: 0 0 auto;
		margin: 0;
		transform: none;
	}

	.aia-selection-form {
		display: flex;
		width: min(100%, 340px);
		min-height: 0;
		flex: 0 0 auto;
		flex-direction: column;
		gap: clamp(8px, 1.6dvh, 16px);
	}

	.aia-selection-form .aia-select-card,
	.aia-selection-form .aia-select-card:nth-of-type(2) {
		width: 100%;
		min-height: clamp(76px, 12dvh, 106px);
		margin: 0;
		box-sizing: border-box;
	}

	.aia-selection-form .aia-consent-row {
		width: 100%;
		min-height: 28px;
		margin: 0;
	}

	.aia-selection-form #aiaSelectionNext,
	.aia-selection-form #aiaSelectionNext:disabled {
		width: clamp(148px, 42vw, 176px) !important;
		min-height: clamp(40px, 6.8dvh, 48px) !important;
		margin: 0 auto;
	}

	.aia-prize-row {
		position: static;
		display: flex;
		width: min(100%, 340px);
		height: auto;
		align-items: center;
		justify-content: space-between;
		gap: clamp(8px, 2vw, 12px) !important;
		margin: 0;
		padding: 0 clamp(4px, 1.5vw, 8px);
		box-sizing: border-box;
		filter: none;
		transform: none;
	}

	.aia-prize-image {
		position: static;
		width: clamp(154px, 26.208dvh, 202px);
		height: clamp(154px, 26.208dvh, 202px);
		flex: 0 0 clamp(154px, 26.208dvh, 202px);
		object-fit: contain;
	}

	.aia-prize-copy {
		position: static;
		display: flex;
		width: auto;
		height: auto;
		margin-left: -8px;
		min-width: 0;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 4px;
	}

	.aia-rules-link {
		width: auto;
		height: auto;
		flex: 0 0 auto;
		margin: 0;
		gap: 4px;
		font-size: clamp(12px, 2dvh, 16px) !important;
		line-height: 1.2 !important;
		max-width: 100%;
		justify-content: center;
		text-align: center;
		white-space: normal;
		transform: none;
	}

	.aia-rules-link span {
		width: 16px;
		height: 16px;
		flex: 0 0 16px;
		box-sizing: border-box;
		line-height: 12px;
	}
}

@media (max-width: 359px) and (orientation: portrait) {
	.aia-selection-content {
		padding-right: 3.5vw;
		padding-left: 3.5vw;
	}

	.aia-selection-logo {
		width: clamp(120px, 42vw, 150px);
	}

	.aia-prize-image {
		width: clamp(131px, 41.184vw, 154px);
		height: clamp(131px, 41.184vw, 154px);
		flex-basis: clamp(131px, 41.184vw, 154px);
	}
}

/* Landscape phones have enough width but little height. Override the width-led
   container-query scale with a height-led compact profile so long answers do
   not make a card consume most of the viewport. */
@media (orientation: landscape) and (max-height: 640px) {
	.aia-select-card,
	.aia-select-card:nth-of-type(2) {
		grid-template-columns: clamp(36px, 13dvh, 52px) minmax(0, 1fr) 1px clamp(34px, 12dvh, 48px);
		min-height: clamp(76px, 25dvh, 104px);
		padding: clamp(7px, 2dvh, 10px) clamp(8px, 2vw, 12px);
		border-radius: clamp(20px, 7dvh, 28px);
	}

	.aia-card-icon {
		width: clamp(32px, 11dvh, 44px);
		height: clamp(32px, 11dvh, 44px);
	}

	.aia-card-copy {
		padding: 0 clamp(7px, 1.8vw, 10px);
	}

	.aia-card-copy p,
	.aia-card-copy .aia-card-question {
		font-size: 12px;
		line-height: 1.15;
	}

	.aia-card-copy strong {
		font-size: clamp(16px, 5.2dvh, 20px);
		line-height: 1.2;
	}

	.aia-card-arrow {
		border-left-width: clamp(8px, 2.8dvh, 11px);
		border-right-width: clamp(8px, 2.8dvh, 11px);
		border-top-width: clamp(10px, 3.4dvh, 13px);
	}
}

.aia-prize-title,
.aia-prize-value {
	font-size: 16px !important;
}

.aia-prize-value span {
	font-size: 20px !important;
}

.aia-prize-row {
	gap: 0 !important;
}

.aia-prize-row.aia-spacing-group-start {
	transform: translateX(calc(-4px - clamp(4px, 2vw, 8px)));
}

.aia-rules-link:not(.aia-leaderboard-rules) {
	margin-bottom: 10px !important;
}

.aia-selection-next,
button.aia-selection-next,
#aiaSelectionNext {
	font-size: 24px !important;
}

@media (max-width: 390px) and (max-height: 700px) and (orientation: portrait) {
	.aia-selection-content {
		gap: 4px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.aia-selection-logo {
		width: clamp(120px, 40vw, 150px);
		max-height: 22dvh;
	}

	.aia-selection-form {
		gap: 6px;
	}

	.aia-selection-form .aia-select-card,
	.aia-selection-form .aia-select-card:nth-of-type(2) {
		min-height: clamp(68px, 10.5dvh, 76px);
	}

	.aia-selection-form #aiaSelectionNext,
	.aia-selection-form #aiaSelectionNext:disabled {
		width: 140px !important;
		min-height: 38px !important;
		font-size: 20px !important;
	}

	.aia-prize-row {
		width: min(100%, 320px);
	}

	.aia-prize-image {
		width: clamp(108px, 18dvh, 126px);
		height: clamp(108px, 18dvh, 126px);
		flex-basis: clamp(108px, 18dvh, 126px);
	}

	.aia-prize-title,
	.aia-prize-value {
		font-size: 14px !important;
	}

	.aia-prize-value span {
		font-size: 18px !important;
	}

	.aia-prize-copy .aia-prize-note {
		font-size: 9px;
	}

	.aia-rules-link:not(.aia-leaderboard-rules) {
		font-size: 12px !important;
	}
}

/* iOS/Android browser chrome can make the visual viewport much shorter than
   the CSS layout viewport. These profiles are selected from visualViewport in
	index.html, so a 430x932 phone with only 740px visible uses the short rules. */
@media (max-width: 767px) and (orientation: portrait) {
	.aia-selection-content {
		justify-content: space-between;
	}

	html[data-aia-selection-density="regular"] .aia-selection-form .aia-select-card:first-child {
		margin-bottom: 10px;
	}

	html[data-aia-selection-density="short"] .aia-selection-content {
		padding-top: 4px;
		padding-bottom: max(var(--aia-safe-area-bottom, 0px), 2px);
	}

	html[data-aia-selection-density="short"] .aia-selection-logo {
		width: 185px;
		max-height: none;
	}

	html[data-aia-selection-density="short"] .aia-selection-form {
		gap: 12px;
	}

	html[data-aia-selection-density="short"] .aia-selection-form .aia-select-card,
	html[data-aia-selection-density="short"] .aia-selection-form .aia-select-card:nth-of-type(2) {
		grid-template-columns: 44px minmax(0, 1fr) 1px 44px;
		min-height: 102px;
		padding: 9px 10px;
	}

	html[data-aia-selection-density="short"] .aia-selection-form .aia-select-card:first-child {
		margin-bottom: 10px;
	}

	html[data-aia-selection-density="short"] .aia-card-icon {
		width: 40px;
		height: 40px;
	}

	html[data-aia-selection-density="short"] .aia-card-copy p,
	html[data-aia-selection-density="short"] .aia-card-copy .aia-card-question {
		font-size: 14px;
		line-height: 1.5;
	}

	html[data-aia-selection-density="short"] .aia-card-copy strong {
		font-size: 22px;
		line-height: 1.25;
	}

	html[data-aia-selection-density="short"] .aia-selection-form #aiaSelectionNext,
	html[data-aia-selection-density="short"] .aia-selection-form #aiaSelectionNext:disabled {
		width: 176px !important;
		min-height: 48px !important;
		font-size: 24px !important;
	}

	html[data-aia-selection-density="short"] .aia-prize-image {
		width: clamp(145px, calc(20vw + 77px), 163px);
		height: clamp(145px, calc(20vw + 77px), 163px);
		flex-basis: clamp(145px, calc(20vw + 77px), 163px);
	}

	html[data-aia-selection-density="short"] .aia-rules-link:not(.aia-leaderboard-rules) {
		margin-bottom: 4px !important;
	}

	html[data-aia-selection-density="compact"] .aia-selection-content {
		padding-top: 4px;
		padding-bottom: calc(var(--aia-safe-area-bottom, 0px) + 4px);
	}

	html[data-aia-selection-density="compact"] .aia-selection-logo {
		width: clamp(112px, 37vw, 142px);
		max-height: none;
	}

	html[data-aia-selection-density="compact"] .aia-selection-form {
		gap: 7px;
	}

	html[data-aia-selection-density="compact"] .aia-selection-form .aia-select-card,
	html[data-aia-selection-density="compact"] .aia-selection-form .aia-select-card:nth-of-type(2) {
		min-height: 72px;
	}

	html[data-aia-selection-density="compact"] .aia-selection-form .aia-select-card:first-child {
		margin-bottom: 8px;
	}

	html[data-aia-selection-density="compact"] .aia-selection-form #aiaSelectionNext,
	html[data-aia-selection-density="compact"] .aia-selection-form #aiaSelectionNext:disabled {
		width: 136px !important;
		min-height: 36px !important;
		font-size: 19px !important;
	}

	html[data-aia-selection-density="compact"] .aia-prize-row {
		width: min(100%, 310px);
	}

	html[data-aia-selection-density="compact"] .aia-prize-image {
		width: clamp(96px, 30vw, 118px);
		height: clamp(96px, 30vw, 118px);
		flex-basis: clamp(96px, 30vw, 118px);
	}

	html[data-aia-selection-density="compact"] .aia-rules-link:not(.aia-leaderboard-rules) {
		font-size: 11px !important;
	}
}

/* On full-height mobile viewports, anchor reward/rules as one bottom group so
   the reward stays centered in the background's white band. */
@media (max-width: 767px) and (min-height: 800px) and (orientation: portrait) {
	html[data-aia-selection-density="regular"] .aia-selection-content {
		justify-content: flex-start;
		gap: 0;
		padding-top: clamp(32px, 4.2dvh, 38px);
	}

	html[data-aia-selection-density="regular"] .aia-selection-form {
		margin-top: auto;
	}

	html[data-aia-selection-density="regular"] .aia-prize-row {
		margin-top: auto;
	}

	html[data-aia-selection-density="regular"] .aia-rules-link:not(.aia-leaderboard-rules) {
		margin-top: 8px !important;
	}
}

@media (max-width: 340px) and (orientation: portrait) {
	html[data-aia-selection-density="compact"] .aia-card-copy p,
	html[data-aia-selection-density="compact"] .aia-card-copy .aia-card-question {
		font-size: 12px;
		line-height: 1.3;
	}

	html[data-aia-selection-density="compact"] .aia-card-copy strong {
		font-size: 18px;
		line-height: 1.2;
	}

	html[data-aia-selection-density="compact"] .aia-consent-row {
		grid-template-columns: 20px minmax(0, 1fr);
		gap: 5px;
	}

	html[data-aia-selection-density="compact"] .aia-consent-box {
		width: 18px;
		height: 18px;
	}

	html[data-aia-selection-density="compact"] .aia-consent-copy,
	html[data-aia-selection-density="compact"] .aia-link-button {
		font-size: 8px;
		line-height: 10px;
	}
}

@media (min-width: 480px) and (max-width: 767px) and (orientation: portrait) {
	html[data-aia-selection-density="short"] .aia-selection-logo {
		width: 172px;
	}

	html[data-aia-selection-density="short"] .aia-selection-form .aia-select-card,
	html[data-aia-selection-density="short"] .aia-selection-form .aia-select-card:nth-of-type(2) {
		grid-template-columns: 40px minmax(0, 1fr) 1px 40px;
		min-height: 96px;
		padding: 8px 9px;
	}

	html[data-aia-selection-density="short"] .aia-card-icon {
		width: 36px;
		height: 36px;
	}

	html[data-aia-selection-density="short"] .aia-card-copy p,
	html[data-aia-selection-density="short"] .aia-card-copy .aia-card-question {
		font-size: 13px;
		line-height: 1.4;
	}

	html[data-aia-selection-density="short"] .aia-card-copy strong {
		font-size: 20px;
		line-height: 1.22;
	}

	html[data-aia-selection-density="short"] .aia-selection-form #aiaSelectionNext,
	html[data-aia-selection-density="short"] .aia-selection-form #aiaSelectionNext:disabled {
		width: 160px !important;
		min-height: 42px !important;
		font-size: 23px !important;
	}
}

/* Keep leaderboard rules anchored like selection rules. Header stays grouped
   with its cloud art; the two auto margins evenly distribute remaining space. */
@media (max-width: 767px) and (orientation: portrait) {
	.aia-leaderboard-content {
		justify-content: flex-start;
		padding: calc(var(--aia-safe-area-top, 0px) + clamp(10px, 2dvh, 22px)) clamp(18px, 6vw, 32px) calc(var(--aia-safe-area-bottom, 0px) + 55px) !important;
	}

	.aia-leaderboard-brand {
		width: clamp(40px, 11vw, 48px);
		flex: 0 0 auto;
	}

	.aia-leaderboard-table {
		margin: 4px 0 0;
		font-size: clamp(24px, 7.5vw, 30px);
	}

	#aiaLeaderboardTitle {
		margin: 4px 0;
		font-size: clamp(44px, 13vw, 56px);
	}

	.aia-leaderboard-subtitle {
		margin: 0;
		font-size: clamp(12px, 3.8vw, 15px);
		line-height: 1.35;
	}

	.aia-leaderboard-list {
		display: flex;
		flex-direction: column;
		width: min(100%, 480px);
		margin-top: auto;
		gap: clamp(5px, 1dvh, 9px);
	}

	.aia-leaderboard-row {
		min-height: clamp(42px, 7.2dvh, 58px);
		padding: clamp(7px, 1.4dvh, 11px) clamp(12px, 4vw, 18px);
		gap: 8px;
		border-radius: 14px;
	}

	.aia-leaderboard-row.is-you {
		min-height: clamp(50px, 8.4dvh, 68px);
	}

	.aia-rank-name,
	.aia-rank-score {
		font-size: clamp(18px, 5.6vw, 22px);
	}

	.aia-rank-name.is-you,
	.aia-rank-score.is-you {
		font-size: clamp(24px, 7.2vw, 28px);
	}

	.aia-leaderboard-replay {
		width: clamp(156px, 46vw, 184px);
		min-height: clamp(40px, 6.4dvh, 46px);
		margin: auto 0 0;
		padding: 4px 28px;
		font-size: clamp(20px, 5.8vw, 23px);
	}

	.aia-replay-text {
		font-size: clamp(20px, 5.8vw, 23px);
	}

	.aia-leaderboard-rules {
		bottom: calc(var(--aia-safe-area-bottom, 0px) + 30px);
		margin: 0;
		font-size: 14px !important;
		line-height: 1.2 !important;
	}

	html[data-aia-selection-density="regular"] .aia-leaderboard-content {
		padding-top: calc(var(--aia-safe-area-top, 0px) + clamp(52px, 7.2dvh, 64px)) !important;
		padding-bottom: calc(var(--aia-safe-area-bottom, 0px) + 57px) !important;
	}
}

/* Browser chrome can reduce the visual viewport while CSS media queries still
   report the taller layout viewport. Density follows visualViewport, so use it
   to keep the short leaderboard proportional to the reference without auto gaps. */
@media (max-width: 767px) and (orientation: portrait) {
	html[data-aia-selection-density="short"] .aia-leaderboard-content {
		padding-top: calc(var(--aia-safe-area-top, 0px) + clamp(48px, 7dvh, 52px)) !important;
	}

	html[data-aia-selection-density="short"] .aia-leaderboard-brand {
		width: 43px;
	}

	html[data-aia-selection-density="short"] .aia-leaderboard-table {
		margin: 17px 0 0;
		font-size: 27px;
	}

	html[data-aia-selection-density="short"] #aiaLeaderboardTitle {
		margin: 14px 0 0;
		font-size: 54px;
	}

	html[data-aia-selection-density="short"] .aia-leaderboard-subtitle {
		margin: 15px 0 0;
		font-size: 14px;
		line-height: 1.35;
	}

	html[data-aia-selection-density="short"] .aia-leaderboard-list {
		width: min(100%, 296px);
		margin-top: 22px;
		gap: 10px;
	}

	html[data-aia-selection-density="short"] .aia-leaderboard-row {
		min-height: clamp(52px, 7.5dvh, 58px);
		padding: 8px 14px;
	}

	html[data-aia-selection-density="short"] .aia-leaderboard-row.is-you {
		min-height: clamp(63px, 8.7dvh, 68px);
	}

	html[data-aia-selection-density="short"] .aia-rank-name,
	html[data-aia-selection-density="short"] .aia-rank-score {
		font-size: 20px;
	}

	html[data-aia-selection-density="short"] .aia-rank-name.is-you,
	html[data-aia-selection-density="short"] .aia-rank-score.is-you {
		font-size: 27px;
	}

	html[data-aia-selection-density="short"] .aia-leaderboard-replay {
		width: 162px;
		min-height: 40px;
		margin: 32px 0 0;
		padding: 4px 28px;
		font-size: 21px;
	}

	html[data-aia-selection-density="short"] .aia-replay-text {
		font-size: 21px;
	}
}

/* Small leaderboard screens use one 390px-wide design plane. Its 844px
   reference height may contract to the safe row-count budget, moving only the
   bottom-anchored footer through the intentional middle gap before the plane
   is scaled. setViewportHeight() derives both values from visualViewport. */
@media (max-width: 767px) and (orientation: portrait) {
	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-screen {
		overflow: hidden;
	}

	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-content {
		position: absolute;
		top: var(--aia-safe-area-top, 0px);
		left: var(--aia-leaderboard-center-x, 50%);
		width: 390px;
		height: var(--aia-leaderboard-design-height, 844px);
		min-height: var(--aia-leaderboard-design-height, 844px);
		margin-left: -195px;
		padding: 60.768px 23.4px 57px !important;
		transform: scale(var(--aia-leaderboard-scale, 1));
		transform-origin: top center;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-brand {
		width: 50px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-table {
		margin: 20px 0 0;
		font-size: 32px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) #aiaLeaderboardTitle {
		margin: 16px 0 0;
		font-size: 64px;
	}

	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-title-cloud {
		top: 54.016px;
		width: 358.8px;
		height: 185.68px;
	}

	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-title-cloud-top {
		top: 70.896px;
		width: 287.04px;
		height: 148.544px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-subtitle {
		margin: 18px 0 0;
		font-size: 16px;
		line-height: 1.35;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-list {
		width: 336px;
		margin-top: 26px;
		gap: 12px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-row {
		min-height: 68px;
		padding: 10px 16px;
		gap: 12px;
		border-radius: 16px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-row.is-you {
		min-height: 80px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-name,
	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-score {
		font-size: 24px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-name.is-you,
	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-score.is-you {
		font-size: 32px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-replay {
		width: 190px;
		height: 44px;
		min-height: 44px;
		margin: 38px 0 0;
		padding: 4px 36px;
		font-size: 24px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-replay-text {
		font-size: 24px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-rules {
		left: 8%;
		right: 8%;
		font-size: 16px !important;
		line-height: 1.2 !important;
	}

	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-rules {
		bottom: 30px;
	}
}

/* Campaign 2026 reward typography. The 390x844 reference uses the large end
   of each clamp; compact browser viewports step down to preserve the layout. */
.aia-prize-title,
.aia-prize-value {
	font-size: clamp(18px, 2.61dvh, 22px) !important;
}

.aia-prize-value span {
	font-size: clamp(22px, 3.08dvh, 26px) !important;
}

.aia-prize-copy .aia-prize-note {
	font-size: clamp(12px, 1.9dvh, 16px) !important;
	line-height: 1.3 !important;
}

@media (max-width: 767px) and (max-height: 700px) and (orientation: portrait) {
	.aia-prize-title,
	.aia-prize-value {
		font-size: clamp(14px, 2.4dvh, 17px) !important;
	}

	.aia-prize-value span {
		font-size: clamp(18px, 2.8dvh, 21px) !important;
	}

	.aia-prize-copy .aia-prize-note {
		font-size: clamp(9px, 1.65dvh, 11px) !important;
	}
}

@media (max-width: 374px) and (min-height: 701px) and (max-height: 820px) and (orientation: portrait) {
	.aia-prize-title,
	.aia-prize-value {
		font-size: 18px !important;
	}

	.aia-prize-value span {
		font-size: 22px !important;
	}

	.aia-prize-copy .aia-prize-note {
		font-size: 12px !important;
	}
}

html[data-aia-selection-density="short"] .aia-prize-title,
html[data-aia-selection-density="short"] .aia-prize-value {
	font-size: 17px !important;
}

html[data-aia-selection-density="short"] .aia-prize-value span {
	font-size: 21px !important;
}

html[data-aia-selection-density="short"] .aia-prize-copy .aia-prize-note {
	font-size: 11px !important;
}

html[data-aia-selection-density="regular"] .aia-prize-copy .aia-prize-note {
	--aia-prize-condition-font-size: 22px;
	--aia-prize-condition-line-height: 1.03;
	font-size: 20px !important;
	line-height: 1.15 !important;
	translate: 0 4px;
}

html[data-aia-selection-density="short"] .aia-prize-copy .aia-prize-note {
	--aia-prize-condition-font-size: 18px;
	font-size: 16px !important;
	line-height: 1.15 !important;
}

html[data-aia-selection-density="compact"] .aia-prize-copy .aia-prize-note {
	--aia-prize-condition-font-size: 16px;
	--aia-prize-condition-line-height: 1.03;
	font-size: 14px !important;
	line-height: 1.03 !important;
}

.aia-prize-note li:not(.aia-prize-note-title) {
	font-size: var(--aia-prize-condition-font-size, inherit);
	line-height: var(--aia-prize-condition-line-height, inherit);
}

/* Leaderboard campaign round metadata and three-line guidance. */
@media (max-width: 767px) and (orientation: portrait) {
	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-table {
		margin-top: 0;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-period {
		margin-top: 3px;
		font-size: 14px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-as-of {
		margin-top: 1px;
		font-size: 10px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) #aiaLeaderboardTitle {
		margin-top: 6px;
		font-size: 64px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-subtitle {
		margin-top: 8px;
		font-size: 14px;
		line-height: 1.25;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-list {
		margin-top: 12px;
		gap: 4px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-row {
		min-height: 58px;
		padding: 8px 16px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-row.is-you {
		min-height: 68px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-name,
	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-score {
		font-size: 21px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-name.is-you,
	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-score.is-you {
		font-size: 28px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-replay {
		margin-top: 20px;
	}
}

/* Leaderboard main-content enlargement. Keep the rules link out of this
   group so its typography and bottom anchor stay unchanged. Small viewports
   still scale the same 390x844 design plane as one unit. */
@media (max-width: 767px) and (orientation: portrait) {
	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-brand {
		width: 55px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-table {
		font-size: 35px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-period {
		font-size: 15.5px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-as-of {
		font-size: 11px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) #aiaLeaderboardTitle {
		font-size: 70px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-title-cloud {
		top: 44.732px;
		width: 390px;
		height: 204.248px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-title-cloud-top {
		top: 63.469px;
		width: 315.744px;
		height: 163.398px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-subtitle {
		font-size: 15.5px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-list {
		width: 370px;
		margin-top: 11px;
		gap: 8px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-row {
		min-height: 64px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-row.is-you {
		min-height: 75px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-name,
	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-score {
		font-size: 23px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-name.is-you,
	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-score.is-you {
		font-size: 31px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-up {
		border-left-width: 18px;
		border-right-width: 18px;
		border-bottom-width: 20px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-rank-down {
		border-left-width: 20px;
		border-right-width: 20px;
		border-top-width: 22px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-replay {
		width: 209px;
		height: 48px;
		min-height: 48px;
		margin-top: 6px;
		font-size: 26px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-replay-text {
		font-size: 26px;
	}
}

/* AIA review 2026-07-24: show every active concern without scrolling. */
.aia-option-menu-interest {
	left: 12px;
	right: 12px;
	gap: 4px;
	max-height: none;
	overflow-y: visible;
	padding: 8px;
	touch-action: manipulation;
}

.aia-option-menu-interest .aia-option-item {
	padding: 7px 12px;
	font-size: 18px;
	line-height: 1.2;
}

/* Reward copy becomes a compact checklist; badge belongs to the prize art. */
.aia-prize-visual {
	position: relative;
	min-width: 0;
}

.aia-prize-visual .aia-prize-image {
	position: relative;
	top: clamp(36px, 4.7dvh, 40px);
	left: 0;
	display: block;
	width: 100%;
	height: auto;
	margin-left: 22px;
	translate: -22% -11.25%;
	scale: 1.15;
}

html[data-aia-selection-density="short"] .aia-prize-visual .aia-prize-image {
	top: 24px;
}

html[data-aia-selection-density="compact"] .aia-prize-visual .aia-prize-image {
	top: 23px;
}

.aia-prize-badge {
	position: absolute;
	z-index: 2;
	top: 9%;
	left: 50%;
	width: clamp(88px, 66%, 128px);
	height: auto;
	transform: translate(-50%, calc(-50% - 14px));
	filter: drop-shadow(0 3px 2px rgba(117, 0, 58, 0.2));
}

html[data-aia-selection-density="short"] .aia-prize-badge {
	top: 33%;
	transform: translate(-50%, calc(-50% - 44px));
}

html[data-aia-selection-density="compact"] .aia-prize-badge {
	top: 34%;
	left: 44%;
	transform: translate(-50%, calc(-50% - 27px));
}

@media (max-width: 340px) and (orientation: portrait) {
	html[data-aia-selection-density="compact"] .aia-prize-badge {
		top: 32%;
	}
}

.aia-prize-copy .aia-prize-note {
	display: grid;
	row-gap: 0.4em;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

.aia-prize-note li {
	position: relative;
	margin: 0;
	padding-left: 1.6em;
}

.aia-prize-note li::before {
	content: "✓";
	position: absolute;
	top: 0.66em;
	left: 0;
	display: inline-flex;
	width: 1.25em;
	height: 1.25em;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(211, 17, 69, 0.35);
	border-radius: 50%;
	background: #ffffff;
	color: #d31145;
	font-size: 1em;
	font-weight: 900;
	line-height: 1;
	transform: translateY(-50%);
	box-shadow: 0 2px 5px rgba(117, 0, 58, 0.24);
}

.aia-prize-note strong {
	font-size: 1.2em;
	font-weight: 800;
}

.aia-prize-title-label,
.aia-prize-title-value {
	display: inline-block;
	white-space: nowrap;
}

.aia-prize-note li.aia-prize-note-title {
	padding-left: 0;
}

.aia-prize-note li.aia-prize-note-title::before {
	display: none;
	content: none;
}

html[data-aia-selection-density="compact"] .aia-prize-copy .aia-prize-note {
	row-gap: 0;
	line-height: 1.08 !important;
	translate: 0;
}

html[data-aia-selection-density="compact"] .aia-prize-note li:not(.aia-prize-note-title) {
	margin-top: -4px;
}

html[data-aia-selection-density="short"] .aia-prize-copy .aia-prize-note {
	translate: 0 calc(-12px + min(var(--aia-safe-area-bottom, 0px), 12px));
}

@media (max-width: 767px) and (orientation: portrait) {
	.aia-prize-row {
		--aia-prize-visual-size: clamp(138px, 20dvh, 160px);
	}

	.aia-prize-visual {
		width: var(--aia-prize-visual-size);
		flex: 0 0 var(--aia-prize-visual-size);
	}

	.aia-prize-visual .aia-prize-image {
		width: 100% !important;
		height: auto !important;
		flex-basis: auto !important;
	}

	html[data-aia-selection-density="short"] .aia-prize-row {
		--aia-prize-visual-size: clamp(126px, 18dvh, 142px);
	}

	html[data-aia-selection-density="compact"] .aia-prize-row {
		--aia-prize-visual-size: clamp(96px, 30vw, 118px);
	}
}

@media (max-width: 390px) and (max-height: 700px) and (orientation: portrait) {
	.aia-prize-row {
		--aia-prize-visual-size: clamp(108px, 18dvh, 126px);
	}
}

/* Narrow full-height phones need a little more copy width for the unbroken
   “Central E-voucher” title. Keep its enlarged type; make only the gift art
   column responsive. */
@media (max-width: 375px) and (min-height: 800px) and (orientation: portrait) {
	html[data-aia-selection-density="regular"] .aia-prize-row {
		--aia-prize-visual-size: clamp(120px, 36vw, 132px);
	}

	html[data-aia-selection-density="regular"] .aia-prize-badge {
		transform: translate(-50%, calc(-50% - 16px));
	}
}

/* Committee copy: only the two requested rule lines receive emphasis. */
.aia-selection-rules li.is-emphasis {
	padding: 0 0 0 4px;
	border-radius: 0;
	background: transparent;
	color: #d31145;
	font-weight: 900;
}

/* Keep weekly-score goal and play guidance in one highlighted group. */
.aia-leaderboard-subtitle .aia-leaderboard-subtitle-primary {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	margin-top: 4px;
	padding: 4px 1px;
	border: 0;
	border-radius: 10px;
	background: none;
	box-shadow: none;
	font: inherit;
	letter-spacing: inherit;
	text-align: center;
}

.aia-leaderboard-subtitle .aia-leaderboard-subtitle-primary::before {
	position: absolute;
	z-index: -1;
	inset: -12px -22px;
	content: "";
	border: 0;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
	box-shadow: 0 0 18px 8px rgba(255, 255, 255, 0.34);
	filter: blur(8px);
	pointer-events: none;
}

.aia-leaderboard-as-of {
	position: relative;
	z-index: 2;
}

.aia-leaderboard-subtitle .aia-leaderboard-subtitle-primary-text {
	display: block;
	font: inherit;
	letter-spacing: inherit;
	text-align: center;
	white-space: nowrap;
}

.aia-leaderboard-subtitle .aia-leaderboard-subtitle-note {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 0.85em;
	font-weight: 800;
	line-height: 1.05;
	white-space: nowrap;
}

.aia-leaderboard-subtitle .aia-leaderboard-subtitle-note-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: inherit;
	font-weight: inherit;
	white-space: nowrap;
}

.aia-leaderboard-subtitle .aia-leaderboard-subtitle-check {
	display: inline-grid;
	place-items: center;
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 1.15em;
	border-radius: 50%;
	background: #d31145;
	color: #ffffff;
	font-size: 0.8em;
	font-weight: 900;
	line-height: 1;
}

@media (max-width: 767px) and (orientation: portrait) {
	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) #aiaLeaderboardTitle {
		margin-top: 0;
		margin-bottom: 1px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-period {
		margin-top: 0;
		font-size: 22px;
		line-height: 1.05;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-as-of {
		margin-top: 0;
		font-size: 15px;
		line-height: 1.05;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-subtitle {
		margin-top: 0;
		font-size: 19px;
		line-height: 1.1;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-replay {
		margin-top: 10px;
	}
}

/* Match leaderboard AIA mark to the fixed corner mark on the start screen.
   Flow spacer preserves the existing title/content positions. */
html .aia-leaderboard-brand {
	position: absolute;
	z-index: 3;
	top: calc(env(safe-area-inset-top, 0px) + 34px);
	right: calc(env(safe-area-inset-right, 0px) + 30px);
	width: clamp(40px, 12.8vw, 56px) !important;
	height: auto;
	margin: 0;
	pointer-events: none;
}

.aia-leaderboard-brand-flow-space {
	display: block;
	width: 50px;
	height: 18.75px;
	flex: 0 0 18.75px;
}

@media (max-width: 767px) and (orientation: portrait) {
	.aia-leaderboard-brand-flow-space {
		width: 55px;
		height: 0;
		flex-basis: 0;
	}
}

@media (orientation: landscape) and (max-height: 640px) {
	html .aia-leaderboard-brand {
		top: calc(env(safe-area-inset-top, 0px) + 18px);
		right: calc(env(safe-area-inset-right, 0px) + 22px);
		width: clamp(40px, 7vmin, 54px) !important;
	}
}

/* Reference header: navy kicker, glossy lifestyle title, dynamic date metadata,
   trophy guidance and a compact white rules pill. Decorative stars only; the
   reference virus is intentionally omitted. */
.aia-leaderboard-heading {
	position: relative;
	z-index: 1;
	width: min(100%, 390px);
	margin: 0 auto;
}

.aia-leaderboard-heading .aia-leaderboard-table {
	margin: 0;
	color: #7e1763;
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -0.025em;
	text-shadow:
		-1px -1px 0 rgba(255, 255, 255, 0.96),
		 1px -1px 0 rgba(255, 255, 255, 0.96),
		-1px  1px 0 rgba(255, 255, 255, 0.96),
		 1px  1px 0 rgba(255, 255, 255, 0.96),
		 0 3px 10px rgba(255, 255, 255, 0.72);
}

.aia-leaderboard-heading #aiaLeaderboardTitle {
	margin: 2px 0 0;
	color: #d31145;
	font-size: 70px;
	font-weight: 900;
	letter-spacing: -0.04em;
	-webkit-text-fill-color: #d31145;
	text-shadow:
		-3px -3px 0 #ffffff,
		 3px -3px 0 #ffffff,
		-3px  3px 0 #ffffff,
		 3px  3px 0 #ffffff,
		 0 6px 0 rgba(126, 23, 99, 0.48),
		 0 10px 16px rgba(211, 17, 69, 0.2);
}

.aia-leaderboard-star {
	position: absolute;
	z-index: 2;
	display: block;
	width: 18px;
	aspect-ratio: 1;
	background: linear-gradient(145deg, #fff47a 0%, #ffd834 58%, #ffbd21 100%);
	clip-path: polygon(50% 0%, 62% 35%, 98% 38%, 69% 59%, 79% 96%, 50% 74%, 21% 96%, 31% 59%, 2% 38%, 38% 35%);
	filter: drop-shadow(0 2px 2px rgba(255, 181, 24, 0.28));
	pointer-events: none;
}

.aia-leaderboard-star-one {
	top: 1px;
	left: 28px;
	width: 25px;
	transform: rotate(-12deg);
}

.aia-leaderboard-star-two {
	top: 27px;
	left: 14px;
	width: 10px;
	transform: rotate(9deg);
}

.aia-leaderboard-star-three {
	right: 11px;
	bottom: 3px;
	width: 21px;
	transform: rotate(14deg);
}

.aia-leaderboard-star-four {
	right: 35px;
	bottom: 23px;
	width: 9px;
	transform: rotate(-7deg);
}

.aia-leaderboard-period,
.aia-leaderboard-as-of {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	max-width: 100%;
}

.aia-leaderboard-period {
	gap: 8px;
	align-self: center;
	width: 310px;
	max-width: 310px;
	margin: 5px 0 0;
	padding: 5px 14px 6px;
	box-sizing: border-box;
	border: 1px solid rgba(211, 17, 69, 0.3);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 2px 8px rgba(183, 26, 81, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	font-size: 19px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.aia-leaderboard-period-copy {
	display: inline-block;
	flex: 0 0 auto;
	min-width: 0;
	white-space: nowrap;
	transform: scaleX(var(--aia-leaderboard-period-fit-x, 1));
	transform-origin: center;
}

.aia-leaderboard-as-of {
	gap: 6px;
	margin: 5px auto 0;
	color: #1e2b53;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.aia-leaderboard-period::before,
.aia-leaderboard-as-of::before,
.aia-leaderboard-guidance-icon {
	display: block;
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 1.15em;
	background: currentColor;
	content: "";
	-webkit-mask: var(--aia-leaderboard-icon) center / contain no-repeat;
	mask: var(--aia-leaderboard-icon) center / contain no-repeat;
}

.aia-leaderboard-period::before {
	--aia-leaderboard-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5C3.89 4 3 4.9 3 6v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z'/%3E%3C/svg%3E");
	font-size: 1.05em;
}

.aia-leaderboard-as-of::before {
	--aia-leaderboard-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E");
	color: #d31145;
	font-size: 1.08em;
}

.aia-leaderboard-subtitle .aia-leaderboard-subtitle-primary {
	margin-top: 8px;
	padding: 0;
	border-radius: 0;
}

.aia-leaderboard-subtitle .aia-leaderboard-subtitle-primary::before {
	display: none;
	content: none;
}

.aia-leaderboard-subtitle .aia-leaderboard-subtitle-primary-text {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	gap: 7px;
	color: #c82148;
	font-size: 1em;
	font-weight: 900;
	font-style: italic;
	line-height: 1.1;
	transform: scaleX(var(--aia-leaderboard-primary-fit-x, 1));
	transform-origin: center;
	text-shadow: 0 2px 7px rgba(255, 255, 255, 0.92);
}

.aia-leaderboard-guidance-icon-trophy {
	--aia-leaderboard-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4v2H2v5c0 2.21 1.79 4 4 4h.18A6.01 6.01 0 0 0 11 16.91V19H7v3h10v-3h-4v-2.09A6.01 6.01 0 0 0 17.82 13H18c2.21 0 4-1.79 4-4V4h-2V2zM6 11c-1.1 0-2-.9-2-2V6h2v3c0 .7.12 1.37.35 2H6zm10-1a4 4 0 1 1-8 0V4h8v6zm4-1c0 1.1-.9 2-2 2h-.35c.23-.63.35-1.3.35-2V6h2v3z'/%3E%3C/svg%3E");
	width: 1.35em;
	height: 1.35em;
	flex-basis: 1.35em;
	align-self: flex-start;
}

.aia-leaderboard-subtitle .aia-leaderboard-subtitle-note {
	gap: 10px;
	margin-top: 7px;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.86);
	box-shadow: 0 3px 10px rgba(87, 38, 92, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.94);
	color: #273052;
	font-size: 0.82em;
	font-weight: 800;
	line-height: 1;
}

.aia-leaderboard-subtitle .aia-leaderboard-subtitle-note-item {
	gap: 6px;
}

.aia-leaderboard-guidance-icon-gamepad {
	--aia-leaderboard-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m21.58 16.09-1.09-7.66A4 4 0 0 0 16.53 5H7.47a4 4 0 0 0-3.96 3.43l-1.09 7.66A2.5 2.5 0 0 0 4.9 19c.75 0 1.46-.34 1.93-.92L8.5 16h7l1.67 2.08c.47.58 1.18.92 1.93.92a2.5 2.5 0 0 0 2.48-2.91zM10 12H8v2H6v-2H4v-2h2V8h2v2h2v2zm6.5 1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm3-3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E");
	width: 1.45em;
	flex-basis: 1.45em;
}

.aia-leaderboard-guidance-icon-target {
	--aia-leaderboard-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2zm0 4a6 6 0 1 0 6 6h-2a4 4 0 1 1-4-4V6zm7-4v3.17l-7.71 7.71 1.42 1.41L20.41 6H24V4h-3V2h-2z'/%3E%3C/svg%3E");
	width: 1.35em;
	flex-basis: 1.35em;
}

.aia-leaderboard-subtitle-divider {
	display: block;
	width: 1px;
	height: 1.15em;
	flex: 0 0 1px;
	background: rgba(39, 48, 82, 0.45);
}

@media (max-width: 767px) and (orientation: portrait) {
	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-heading .aia-leaderboard-table {
		margin: 0;
		font-size: 34px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-heading #aiaLeaderboardTitle {
		margin: 2px 0 0;
		font-size: 70px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-period {
		margin-top: 5px;
		font-size: 19px;
		line-height: 1;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-as-of {
		margin-top: 5px;
		font-size: 14px;
		line-height: 1;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-subtitle {
		margin-top: 0;
		font-size: 18px;
		line-height: 1.1;
	}
}

/* Campaign prize eligibility: keep the one-prize cap visible immediately
   above the full rules link instead of hiding it inside the modal. */
.aia-leaderboard-prize-limit {
	position: relative;
	z-index: 3;
	display: block;
	width: min(100%, 370px);
	margin: 10px 0 8px;
	padding: 4px 6px;
	box-sizing: border-box;
	border: 2px solid rgba(211, 17, 69, 0.58);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 4px 0 rgba(126, 23, 99, 0.65), 0 8px 18px rgba(126, 23, 99, 0.14);
	/* A long Thai phrase must stay contained even when Android substitutes a
	   wider system font before Prompt finishes loading. */
	overflow: hidden;
	min-width: 0;
	color: #273052;
	font-family: "Prompt", "Noto Sans Thai", "Tahoma", sans-serif;
	font-size: var(--aia-leaderboard-prize-limit-font-size, 14px);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	pointer-events: none;
}

.aia-leaderboard-prize-limit-copy,
.aia-leaderboard-prize-limit-copy > span {
	display: block;
	width: 100%;
	min-width: 0;
	text-align: center;
}

.aia-leaderboard-prize-limit-copy > span {
	display: flex;
	justify-content: center;
	font-size: 1.08em;
	max-width: 100%;
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
	letter-spacing: -0.055em;
}

.aia-leaderboard-prize-limit-copy > span:first-child {
	color: #273052;
	font-weight: 800;
}

@media (max-width: 767px) {
	.aia-leaderboard-prize-limit-copy > span {
		width: 100%;
		max-width: 100%;
		font-size: var(--aia-leaderboard-prize-limit-line-font-size, 13px);
	}
}

.aia-leaderboard-prize-limit-line-copy {
	display: inline-block;
	flex: 0 0 auto;
	white-space: nowrap;
	transform: scaleX(var(
		--aia-leaderboard-prize-limit-line-fit-x,
		var(--aia-leaderboard-prize-limit-line-scale-x, 1)
	));
	transform-origin: center;
}

.aia-leaderboard-prize-limit-copy > span:last-child {
	margin-top: 3px;
	color: #d31145;
	font-size: 1.2em;
	font-weight: 900;
}

@media (max-width: 767px) {
	.aia-leaderboard-prize-limit-copy > span:last-child {
		font-size: calc(var(--aia-leaderboard-prize-limit-line-font-size, 13px) * 1.2 / 1.08);
	}
}

/* The rules link is absolute below 768px; anchor the notice to the same footer
   in both portrait and landscape so the relationship stays explicit. */
@media (max-width: 767px) {
	.aia-leaderboard-prize-limit {
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: calc(var(--aia-safe-area-bottom, 0px) + 38px);
		width: auto;
		margin: 0;
	}

	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-prize-limit {
		bottom: var(--aia-leaderboard-prize-limit-bottom, 38px);
	}

	.aia-leaderboard-rules {
		bottom: calc(var(--aia-safe-area-bottom, 0px) + 12px);
	}

	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-rules {
		bottom: 12px;
	}
}

@media (max-width: 767px) and (orientation: landscape) {
	.aia-leaderboard-prize-limit {
		bottom: calc(var(--aia-safe-area-bottom, 0px) + 42px);
	}
}

@media (max-width: 767px) and (orientation: portrait) {
	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-as-of {
		font-size: max(var(--aia-leaderboard-min-source-font-size, 11.5px), 14px) !important;
	}

	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-subtitle {
		font-size: max(var(--aia-leaderboard-min-source-font-size, 11.5px), 18px) !important;
	}

	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-subtitle-note {
		font-size: max(var(--aia-leaderboard-min-source-font-size, 11.5px), 14.76px) !important;
	}

	html[data-aia-leaderboard-scaled="true"] .aia-rank-score small {
		font-size: max(var(--aia-leaderboard-min-source-font-size, 11.5px), 13.34px) !important;
	}

	html[data-aia-leaderboard-scaled="true"] .aia-leaderboard-rules {
		font-size: max(var(--aia-leaderboard-min-source-font-size, 11.5px), 16px) !important;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-row {
		min-height: 49px;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-row.is-you {
		min-height: 58px;
	}

	html[data-aia-selection-density="regular"]:not([data-aia-leaderboard-scaled="true"]) .aia-leaderboard-row {
		min-height: 51px;
	}

	html[data-aia-selection-density="regular"]:not([data-aia-leaderboard-scaled="true"]) .aia-leaderboard-row.is-you {
		min-height: 60px;
	}

	:is(html[data-aia-selection-density="regular"], html[data-aia-leaderboard-scaled="true"]) .aia-leaderboard-replay {
		margin-top: 16px;
	}
}

/* Samsung/Android browsers can render Prompt slightly wider than desktop
   Chromium. Preserve the CTA as one line and let the eligibility copy wrap
   inside its card instead of overflowing the right edge. */
.aia-leaderboard-replay {
	/* Keep the CTA label on one line with Android's wider Thai fallback font. */
	box-sizing: border-box;
	min-width: 232px;
	padding-inline: 12px;
}

.aia-replay-text {
	margin: 0;
	white-space: nowrap;
}

.aia-leaderboard-rules {
	white-space: nowrap;
	transform: scaleX(var(--aia-leaderboard-rules-fit-x, 1));
	transform-origin: center;
}

/* A 240×320 viewport cannot show five leaderboard rows at a legible scale.
   Preserve the width-based layout and let the player scroll the overlay. */
@media (max-width: 279px) and (max-height: 400px) and (orientation: portrait) {
	html[data-aia-leaderboard-scrollable="true"] .aia-leaderboard-screen {
		overflow-y: auto;
	}
}

@media (min-width: 768px) {
	.aia-leaderboard-prize-limit {
		position: absolute;
		left: 50%;
		bottom: calc(var(--aia-safe-area-bottom, 0px) + 48px);
		width: min(calc(100% - 32px), 640px);
		margin: 0;
		transform: translateX(-50%);
	}

	.aia-leaderboard-rules {
		position: absolute;
		left: 8%;
		right: 8%;
		bottom: calc(var(--aia-safe-area-bottom, 0px) + 12px);
		width: auto;
		margin: 0;
	}

	html .aia-leaderboard-list {
		width: 370px;
		gap: 8px;
	}

	html .aia-leaderboard-row {
		min-height: 47px;
		padding: 4px 16px;
	}

	html .aia-leaderboard-row.is-you {
		min-height: 56px;
	}

	html .aia-rank-name,
	html .aia-rank-score {
		font-size: 23px;
	}

	html .aia-rank-name.is-you,
	html .aia-rank-score.is-you {
		font-size: 31px;
	}

	html .aia-leaderboard-replay {
		width: 209px;
		height: 48px;
		min-height: 48px;
		margin-top: 16px;
		margin-bottom: 0;
	}
}