/* ==========================================================================
   SEA YOU NEXT SUMMER — token game stylesheet (The Marq)
   Primary canvas: 3840 × 2160. Everything is sized in --u, a unit equal to
   1/100 of the largest 16:9 box that fits the viewport (38.4px at 4K,
   19.2px at 1080p). Portrait and small screens redefine --u and reflow.
   ========================================================================== */

.mcr {
	--u: min(1vw, 1.7778vh);
	--fit: 1;

	/* Palette — Sea You Next Summer: teal #044153, sun #FAF188, cream #FAF6C1 */
	--teal: #044153;
	--teal-2: #0D5D73;
	--teal-3: #17758C;
	--teal-deep: #022B37;
	--sun: #FAF188;
	--sun-hi: #FFF9C9;
	--sun-lo: #E3D35E;
	--sun-deep: #C2B235;
	--cream: #FAF6C1;
	--paper: #FFFDF0;
	--text: var(--teal);
	/* legacy names, remapped onto the palette */
	--ink: var(--teal);
	--royal: var(--teal);
	--royal-night: var(--teal-deep);
	--gold: var(--sun);
	--gold-hi: var(--sun-hi);
	--gold-lo: var(--sun-lo);
	--shadow: rgba(2, 43, 55, .28);
	--extrude: 0 calc(var(--u) * .28) 0 var(--sun), 0 calc(var(--u) * .56) 0 var(--sun-lo);

	/* Type */
	--f-display: "MCR Display", "Bagel Fat One", "Arial Rounded MT Bold", "Arial Black", system-ui, sans-serif;
	--f-num: var(--f-display);
	--f-text: "MCR Text", "Fredoka", "Segoe UI", system-ui, sans-serif;
	--f-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;

	--pad-y: calc(var(--u) * 2.2);
	--pad-x: calc(var(--u) * 3.4);
	--ease-pop: cubic-bezier(.2, 1.4, .35, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);

	position: fixed;
	inset: 0;
	z-index: 1;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	overflow: clip;
	background: var(--cream);
	color: var(--text);
	font-family: var(--f-text), var(--f-emoji);
	font-synthesis: none;
	font-size: max(15px, calc(var(--u) * 1.5));
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	overscroll-behavior: none;
	text-rendering: optimizeLegibility;
}
.mcr *, .mcr *::before, .mcr *::after { box-sizing: border-box; }
/* Resets use :where() so they never out-rank component classes. */
:where(.mcr) :where(h1, h2, h3, p, ol, ul, li, figure, dl, dd) { margin: 0; padding: 0; }
:where(.mcr) :where(ol, ul) { list-style: none; }
:where(.mcr) :where(button) { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; margin: 0; }
:where(.mcr) :where(input) { margin: 0; }
.mcr [hidden] { display: none !important; }
.mcr .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mcr :focus { outline: none; }
.mcr :focus-visible { outline: calc(var(--u) * .3) solid var(--teal); outline-offset: calc(var(--u) * .35); }
.mcr.is-booting .mcr-screens { opacity: 0; }

/* --------------------------------------------------------------------------
   Background: cream with the summer art; it drifts a little between screens
   -------------------------------------------------------------------------- */
.mcr-bg, .mcr-bg > div { position: absolute; inset: 0; pointer-events: none; }
.mcr-bg { z-index: 0; overflow: hidden; overflow: clip; background: var(--cream); }
.mcr-bg-art {
	inset: -4%;
	background: var(--art) center / cover no-repeat;
	transform: translate3d(var(--ax, 0), var(--ay, 0), 0) scale(var(--as, 1));
	transition: transform 1.4s var(--ease-out);
	will-change: transform;
}
.mcr[data-screen="email"] .mcr-bg-art { --ax: -1.5%; --ay: .8%; --as: 1.03; }
.mcr[data-screen="granted"] .mcr-bg-art, .mcr[data-screen="gameon"] .mcr-bg-art { --as: 1.06; }
.mcr[data-screen="question"] .mcr-bg-art { --ax: 1.5%; --ay: -1%; --as: 1.04; }
.mcr[data-screen="suspense"] .mcr-bg-art { --as: 1.08; }
.mcr[data-screen="result"] .mcr-bg-art { --ax: -2%; --ay: 1%; --as: 1.05; }
.mcr.is-hidden *, .mcr.is-hidden *::before, .mcr.is-hidden *::after { animation-play-state: paused !important; }

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

/* Ambient drifting coins (DOM, transform-only) */
.mcr-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; overflow: clip; transition: opacity .6s; }
.mcr[data-screen="question"] .mcr-ambient { opacity: .3; }
.amb-coin {
	position: absolute;
	bottom: -10%;
	left: var(--x);
	width: var(--s);
	height: var(--s);
	opacity: var(--o);
	animation: mcr-rise var(--d) linear var(--delay) infinite;
	will-change: transform;
}
.amb-coin svg { width: 100%; height: 100%; animation: mcr-flip var(--f) linear infinite; }
@keyframes mcr-rise {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--sway), -120vh, 0); }
}
@keyframes mcr-flip {
	0% { transform: scaleX(1); } 25% { transform: scaleX(.4); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(.4); } 100% { transform: scaleX(1); }
}

.mcr-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }

/* --------------------------------------------------------------------------
   HUD
   -------------------------------------------------------------------------- */
.mcr-hud {
	position: relative;
	z-index: 20;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: calc(var(--u) * 2);
	padding: var(--pad-y) var(--pad-x) 0;
	min-height: calc(var(--u) * 7);
}
.mcr-logo { justify-self: start; display: flex; align-items: center; min-height: calc(var(--u) * 3.6); }
.mcr-logo-img { display: block; height: max(28px, calc(var(--u) * 3.6)); width: auto; max-width: calc(var(--u) * 24); object-fit: contain; }
.mcr-logo-tint { display: block; line-height: 0; background: var(--teal); -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; }
.mcr-logo-tint .mcr-logo-img { opacity: 0; }
.mcr-logo-text {
	font-family: var(--f-display);
	font-weight: 700;
	letter-spacing: .14em;
	font-size: max(13px, calc(var(--u) * 1.35));
	padding: calc(var(--u) * .7) calc(var(--u) * 1.3);
	border: max(2px, calc(var(--u) * .18)) solid var(--teal);
	border-radius: calc(var(--u) * .6);
}
.mcr-hud-mid { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); opacity: 0; transform: translateY(-40%); transition: opacity .4s, transform .5s var(--ease-out); pointer-events: none; }
.mcr[data-screen="question"] .mcr-hud-mid { opacity: 1; transform: none; }
.hud-round { font-family: var(--f-display); font-weight: 700; letter-spacing: .06em; font-size: max(14px, calc(var(--u) * 1.5)); white-space: nowrap; }
.hud-round-n { font-weight: 900; color: var(--teal); font-size: 1.35em; text-shadow: 0 .08em 0 var(--sun); }
.hud-round-of { opacity: .75; }
.hud-pips { display: flex; gap: calc(var(--u) * .7); }
.hud-pips li {
	position: relative;
	width: max(16px, calc(var(--u) * 2.2));
	height: max(16px, calc(var(--u) * 2.2));
	border-radius: 50%;
	border: max(2px, calc(var(--u) * .2)) dashed rgba(4, 65, 83, .45);
	transition: transform .35s var(--ease-pop), border-color .3s;
}
.hud-pips li.is-current { border-style: solid; border-color: var(--teal); background: var(--sun); animation: mcr-pulse-ring 1.4s ease-in-out infinite; }
.hud-pips li.is-won { border: 0; background: var(--coin-img, none) center/contain no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='54' r='44' fill='%23B86A00'/%3E%3Ccircle cx='50' cy='50' r='44' fill='%23FFC42E'/%3E%3Ccircle cx='50' cy='50' r='32' fill='%23FFDD55' stroke='%23FFF0A6' stroke-width='5'/%3E%3C/svg%3E") center/contain no-repeat; transform: scale(1.12); }
.hud-pips li.is-lost { border: max(2px, calc(var(--u) * .2)) solid rgba(4, 65, 83, .55); background: var(--paper); }
.hud-pips li.is-lost::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: calc(var(--u) * 1.2); color: var(--teal); line-height: 1; }
@keyframes mcr-pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(4, 65, 83, .45); } 50% { box-shadow: 0 0 0 calc(var(--u) * .55) rgba(4, 65, 83, 0); } }

.mcr-hud-end { justify-self: end; display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.hud-coins {
	display: none;
	align-items: center;
	gap: calc(var(--u) * .5);
	padding: calc(var(--u) * .45) calc(var(--u) * 1.2) calc(var(--u) * .45) calc(var(--u) * .5);
	background: var(--ink);
	border-radius: 999px;
	box-shadow: inset 0 0 0 max(2px, calc(var(--u) * .18)) var(--sun);
}
.hud-coin { width: max(24px, calc(var(--u) * 2.6)); height: max(24px, calc(var(--u) * 2.6)); }
.hud-coins-n { font-family: var(--f-num); font-weight: 900; color: var(--gold); font-size: max(18px, calc(var(--u) * 2)); line-height: 1; min-width: 1ch; text-align: center; }
.hud-coins-l { font-family: var(--f-display); font-weight: 700; font-size: max(10px, calc(var(--u) * .85)); letter-spacing: .08em; opacity: .8; }
.hud-coins.is-bump { animation: mcr-bump .5s var(--ease-pop); }

.mcr-sound {
	display: grid;
	place-items: center;
	width: max(44px, calc(var(--u) * 4.2));
	height: max(44px, calc(var(--u) * 4.2));
	border-radius: 50%;
	background: var(--paper);
	color: var(--teal);
	box-shadow: inset 0 0 0 max(2px, calc(var(--u) * .18)) var(--teal), 0 calc(var(--u) * .3) 0 var(--teal);
	transition: transform .2s var(--ease-pop), background .2s;
}
.mcr-sound svg { width: 52%; height: 52%; }
.mcr-sound:active { transform: scale(.9); }
.mcr-sound .ico-off { display: none; }
.mcr-sound[aria-pressed="false"] .ico-on { display: none; }
.mcr-sound[aria-pressed="false"] .ico-off { display: block; }
.mcr-sound[aria-pressed="false"] { background: var(--cream); opacity: .75; }

/* --------------------------------------------------------------------------
   Screens & transitions
   -------------------------------------------------------------------------- */
.mcr-screens { position: relative; z-index: 10; min-height: 0; transition: opacity .4s; }
.fit-box { position: relative; }
.mcr-screen {
	position: absolute;
	inset: 0;
	display: none;
	padding: calc(var(--u) * 1.4) var(--pad-x) var(--pad-y);
	overflow: hidden;
	overflow: clip; /* clip, not hidden: focus/scroll-into-view can never shift the stage */
}
.mcr-screen.is-active { display: flex; animation: mcr-screen-in .6s var(--ease-out) both; }
.mcr-screen.is-leaving { display: flex; animation: mcr-screen-out .38s ease-in both; pointer-events: none; z-index: 1; }
@keyframes mcr-screen-in { from { opacity: 0; transform: scale(.965) translateY(calc(var(--u) * 1.5)); } to { opacity: 1; transform: none; } }
@keyframes mcr-screen-out { to { opacity: 0; transform: scale(1.04); } }

/* --------------------------------------------------------------------------
   Buttons — candy-press physics
   -------------------------------------------------------------------------- */
.btn {
	--bg: var(--teal); --lo: var(--teal-deep); --fg: var(--sun);
	--lift: calc(var(--u) * .75);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 48px;
	padding: .78em 1.6em .72em;
	border-radius: 999px;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--f-display), var(--f-emoji);
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 var(--lift) 0 var(--lo), 0 calc(var(--lift) + var(--u) * 1.2) calc(var(--u) * 2.2) var(--shadow);
	transform: translateY(0);
	transition: transform .14s ease, box-shadow .14s ease, filter .2s;
}
@media (hover: hover) and (pointer: fine) {
	.btn:hover { transform: translateY(calc(var(--u) * -.2)); filter: brightness(1.06); }
}
.btn:active, .btn.is-pressed { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--lo), 0 calc(var(--u) * .6) calc(var(--u) * 1) var(--shadow); }
.btn[disabled] { filter: saturate(.6) brightness(.9); cursor: progress; }
.btn-emoji { font-family: var(--f-emoji); font-weight: 400; }
.btn-ico { width: .9em; height: .9em; flex: 0 0 auto; }
.mcr-coin.inline-coin { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; margin: 0 .08em; filter: drop-shadow(0 .06em .08em rgba(2, 43, 55, .3)); }
.mission-list li .inline-coin { width: .95em; height: .95em; vertical-align: -.12em; flex: 0 0 auto; align-self: center; }
.btn-sun { --bg: var(--sun); --lo: var(--sun-deep); --fg: var(--teal); }
.btn-xl { font-size: max(18px, calc(var(--u) * 2.5)); }
.btn-lg { font-size: max(16px, calc(var(--u) * 1.8)); }
.btn-primary.btn-xl { animation: mcr-glow-btn 2.2s ease-in-out infinite; } /* solid sun ring breathes around the button */
.btn-text {
	min-height: 44px;
	padding: .4em .8em;
	font-weight: 600;
	font-size: max(14px, calc(var(--u) * 1.3));
	opacity: .8;
	text-decoration: underline;
	text-underline-offset: .25em;
}
.btn-text:active { opacity: 1; }

/* --------------------------------------------------------------------------
   Coins & mascot
   -------------------------------------------------------------------------- */
.mcr-coin { display: block; overflow: visible; }
.coiny { display: block; overflow: visible; }
.coiny .face { display: none; }
.coiny[data-face="idle"] .face-idle,
.coiny[data-face="happy"] .face-happy,
.coiny[data-face="shock"] .face-shock,
.coiny[data-face="sad"] .face-sad,
.coiny[data-face="cool"] .face-cool,
.coiny[data-face="shy"] .face-shy { display: inline; }
.coiny .coiny-legs { display: none; }
.coiny.has-legs .coiny-legs { display: inline; }
.coiny .coiny-eyes { transform-box: fill-box; transform-origin: center; animation: mcr-blink 4.6s infinite; }
@keyframes mcr-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.coiny[data-face="shy"] .coiny-cheeks { opacity: 1; transform: scale(1.3); transform-box: fill-box; transform-origin: center; }
.coiny-tear { animation: mcr-tear 1.6s ease-in infinite; }
@keyframes mcr-tear { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
.coiny.has-legs .coiny-leg-l { animation: mcr-leg .22s ease-in-out infinite alternate; transform-origin: 82px 172px; }
.coiny.has-legs .coiny-leg-r { animation: mcr-leg .22s ease-in-out infinite alternate-reverse; transform-origin: 118px 172px; }
@keyframes mcr-leg { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }

@keyframes mcr-bump { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes mcr-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(calc(var(--u) * -1.4)) rotate(2deg); } }
@keyframes mcr-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(calc(var(--u) * -2.6)) scale(.96, 1.05); } 55% { transform: translateY(0) scale(1.08, .9); } 70% { transform: translateY(0) scale(1, 1); } }
@keyframes mcr-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(calc(var(--u) * -1.1)) rotate(-2deg); } 30% { transform: translateX(calc(var(--u) * 1)) rotate(2deg); } 45% { transform: translateX(calc(var(--u) * -.8)); } 60% { transform: translateX(calc(var(--u) * .6)); } 75% { transform: translateX(calc(var(--u) * -.3)); } }

/* Floating sprites created by JS (coin flights, escapes) */
.mcr-sprite { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; will-change: transform; }
.mcr-sprite .mcr-coin, .mcr-sprite .coiny { width: 100%; height: 100%; }
.mcr-sprite .spin { width: 100%; height: 100%; animation: mcr-flip .45s linear infinite; }
.mcr-sprite .puff { position: absolute; font-family: var(--f-emoji); font-size: 70%; right: 88%; top: 30%; line-height: 1; }

/* ==========================================================================
   INTRO
   ========================================================================== */
.s-intro { align-items: center; gap: calc(var(--u) * 4); }
.intro-copy { flex: 1 1 56%; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 2 * var(--fit)); min-width: 0; }
.intro-kicker {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .55em 1.05em .5em;
	background: var(--teal);
	color: var(--sun);
	border-radius: 999px;
	font-family: var(--f-display), var(--f-emoji);
	font-weight: 700;
	font-size: max(14px, calc(var(--u) * 1.6));
	letter-spacing: .04em;
	box-shadow: 0 calc(var(--u) * .3) 0 var(--teal-deep);
	animation: mcr-drop-in .7s var(--ease-pop) .15s both;
}
.intro-title { margin: 0; line-height: 0; width: calc(var(--u) * 38 * var(--fit)); max-width: 100%; }
.intro-wordmark {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1800 / 1312;
	filter: drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1.4) rgba(2, 43, 55, .16));
	transform-origin: 30% 60%;
	animation: mcr-slam .9s var(--ease-pop) .3s both;
}
@keyframes mcr-slam { 0% { opacity: 0; transform: scale(2.4) rotate(-6deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes mcr-drop-in { from { opacity: 0; transform: translateY(calc(var(--u) * -3)); } to { opacity: 1; transform: none; } }
.intro-lede { max-width: min(24em, 100%); text-wrap: pretty; font-size: max(17px, calc(var(--u) * 2 * var(--fit))); font-weight: 500; line-height: 1.35; animation: mcr-drop-in .7s var(--ease-out) .7s both; }
.intro-lede strong { display: inline-block; font-family: var(--f-display); font-weight: 400; font-size: 1.18em; color: var(--teal); margin-bottom: .25em; background: linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%); }
.s-intro .btn-xl { margin-top: calc(var(--u) * 1); font-size: max(18px, calc(var(--u) * 2.2 * var(--fit))); animation: mcr-drop-in .7s var(--ease-pop) .9s both, mcr-nudge 2.6s ease-in-out 2.2s infinite, mcr-glow-btn 2.2s ease-in-out 1.6s infinite; }
@keyframes mcr-nudge { 0%, 86%, 100% { transform: translateY(0) rotate(0); } 90% { transform: translateY(calc(var(--u) * -.4)) rotate(-1.5deg); } 94% { transform: translateY(0) rotate(1.5deg); } }

.intro-art { position: relative; flex: 1 1 44%; align-self: stretch; min-width: 0; display: grid; place-items: center; }
.intro-halo { position: absolute; width: calc(var(--u) * 40); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 253, 240, .9), rgba(250, 241, 136, .35) 55%, transparent); }
.coiny-hero { position: relative; z-index: 2; width: calc(var(--u) * 23); height: auto; margin-bottom: calc(var(--u) * 7); animation: mcr-hero-in 1s var(--ease-pop) .4s both; }
.coiny-hero > * { animation: mcr-hop 2.4s ease-in-out 1.6s infinite; transform-origin: 100px 200px; }
@keyframes mcr-hero-in { from { opacity: 0; transform: translateY(calc(var(--u) * -30)) rotate(-30deg); } to { opacity: 1; transform: none; } }
.intro-pile { position: absolute; left: 50%; bottom: 8%; width: calc(var(--u) * 34); height: calc(var(--u) * 12); transform: translateX(-50%); z-index: 1; }
.pile-coin { position: absolute; width: calc(var(--u) * 8); height: calc(var(--u) * 8); animation: mcr-drop-in .6s var(--ease-pop) both; }
.pile-0 { left: 0; bottom: 0; transform: rotate(-18deg); animation-delay: .5s; }
.pile-1 { left: 12%; bottom: 2%; animation-delay: .55s; }
.pile-2 { left: 26%; bottom: -4%; transform: rotate(12deg); animation-delay: .6s; }
.pile-3 { left: 40%; bottom: 3%; animation-delay: .65s; }
.pile-4 { left: 54%; bottom: -3%; transform: rotate(-8deg); animation-delay: .7s; }
.pile-5 { left: 68%; bottom: 1%; animation-delay: .75s; }
.pile-6 { right: 0; bottom: 0; transform: rotate(20deg); animation-delay: .8s; }
.pile-7 { left: 20%; bottom: 28%; transform: rotate(-10deg); animation-delay: .85s; }
.pile-8 { left: 58%; bottom: 30%; transform: rotate(14deg); animation-delay: .9s; }
.intro-orbit { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.orbit-coin { position: absolute; width: calc(var(--u) * 5); height: calc(var(--u) * 5); animation: mcr-bob 3.4s ease-in-out infinite; }
.orbit-0 { left: 6%; top: 14%; }
.orbit-1 { right: 4%; top: 30%; width: calc(var(--u) * 6.5); height: calc(var(--u) * 6.5); animation-delay: -1.2s; }
.orbit-2 { left: 14%; bottom: 34%; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); animation-delay: -2.1s; }

/* ==========================================================================
   EMAIL — buddy on the left, pass + keyboard on the right
   ========================================================================== */
.s-email { align-items: center; justify-content: center; }
.email-wrap {
	display: grid;
	grid-template-columns: calc(var(--u) * 17 * var(--fit)) minmax(0, 1fr);
	align-items: center;
	gap: calc(var(--u) * 3.2);
	width: min(100%, calc(var(--u) * 96));
	max-height: 100%;
}
.email-main { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5 * var(--fit)); min-width: 0; container-type: inline-size; }

/* Buddy: the coin mascot watches you type */
.email-buddy { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); }
.coiny-email { width: 100%; height: auto; animation: mcr-bob 3.2s ease-in-out infinite; filter: drop-shadow(0 calc(var(--u) * 1.2) calc(var(--u) * 1.6) var(--shadow)); }
.coiny-email .coiny-eyes { translate: var(--look, 0px) 0; transition: translate .18s ease; }
.buddy-bubble {
	position: relative;
	max-width: 100%;
	padding: calc(var(--u) * .9) calc(var(--u) * 1.3) calc(var(--u) * .85);
	background: var(--teal);
	color: var(--cream);
	border-radius: calc(var(--u) * 1.4);
	font-family: var(--f-display), var(--f-emoji);
	font-weight: 800;
	font-size: max(13px, calc(var(--u) * 1.35 * var(--fit)));
	line-height: 1.15;
	text-align: center;
	box-shadow: 0 calc(var(--u) * .4) 0 var(--teal-deep);
	animation: mcr-drop-in .6s var(--ease-pop) .35s both;
}
.buddy-bubble::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -1); width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); background: var(--teal); transform: translateX(-50%) rotate(45deg); border-radius: 0 0 calc(var(--u) * .3) 0; box-shadow: calc(var(--u) * .3) calc(var(--u) * .3) 0 var(--teal-deep); z-index: -1; }

/* Heading */
.email-head { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.email-back {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: max(44px, calc(var(--u) * 4.4));
	height: max(44px, calc(var(--u) * 4.4));
	border-radius: 50%;
	background: var(--paper);
	color: var(--teal);
	box-shadow: inset 0 0 0 max(2px, calc(var(--u) * .18)) var(--teal), 0 calc(var(--u) * .3) 0 var(--teal);
	transition: transform .15s var(--ease-pop), background .2s;
}
.email-back svg { width: 50%; height: 50%; }
.email-back:active { transform: scale(.9); background: var(--sun); }
.email-titles { min-width: 0; }
.screen-title { font-family: var(--f-display), var(--f-emoji); font-weight: 400; font-size: max(24px, calc(var(--u) * 4.4 * var(--fit))); line-height: 1.02; letter-spacing: 0; text-wrap: balance; color: var(--teal); text-shadow: var(--extrude); }
.s-email .screen-title { font-size: max(22px, calc(var(--u) * 3.1 * var(--fit))); }
.screen-sub { margin-top: calc(var(--u) * .5); font-size: max(15px, calc(var(--u) * 1.6 * var(--fit))); opacity: .92; }
.screen-sub b { color: var(--teal); white-space: nowrap; background: linear-gradient(transparent 55%, var(--sun) 55%, var(--sun) 92%, transparent 92%); }

/* The pass: field + go button */
.email-form { display: flex; flex-direction: column; gap: calc(var(--u) * .9 * var(--fit)); }
.email-row { display: flex; align-items: stretch; gap: calc(var(--u) * 1.4); }
.email-field {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 1);
	min-width: 0;
	height: max(58px, calc(var(--u) * 6.6 * var(--fit)));
	padding: 0 calc(var(--u) * 1) 0 calc(var(--u) * 1.4);
	background: var(--paper);
	color: var(--ink);
	border-radius: calc(var(--u) * 1.8);
	box-shadow: 0 calc(var(--u) * .6) 0 var(--teal), inset 0 0 0 max(3px, calc(var(--u) * .26)) var(--teal);
	transition: box-shadow .25s, transform .2s;
	overflow: hidden;
}
.email-field:focus-within { box-shadow: 0 calc(var(--u) * .6) 0 var(--teal), inset 0 0 0 max(4px, calc(var(--u) * .36)) var(--teal), 0 0 0 calc(var(--u) * .5) rgba(250, 241, 136, .9); }
.email-form.is-valid .email-field { background: #FFFBD9; box-shadow: 0 calc(var(--u) * .6) 0 var(--teal), inset 0 0 0 max(4px, calc(var(--u) * .36)) var(--teal), 0 0 0 calc(var(--u) * .5) var(--sun); }
.email-form.is-bad .email-field { background: var(--paper); box-shadow: 0 calc(var(--u) * .6) 0 var(--teal), inset 0 0 0 max(3px, calc(var(--u) * .26)) var(--teal); outline: max(3px, calc(var(--u) * .22)) dashed var(--teal); outline-offset: calc(var(--u) * .35); }
.email-field.is-typed { animation: mcr-typed .18s ease; }
@keyframes mcr-typed { 50% { transform: scale(1.012); } }
.email-icon { flex: 0 0 auto; display: grid; place-items: center; width: max(30px, calc(var(--u) * 3.6 * var(--fit))); height: max(30px, calc(var(--u) * 3.6 * var(--fit))); border-radius: 50%; background: var(--teal); color: var(--sun); transition: background .25s, color .25s; }
.email-icon svg { width: 58%; height: 58%; }
.email-form.is-valid .email-icon { background: var(--sun); color: var(--teal); box-shadow: inset 0 0 0 max(2px, calc(var(--u) * .2)) var(--teal); }
.email-field input {
	flex: 1 1 0;
	min-width: 3ch;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: max(18px, calc(var(--u) * 2.4 * var(--fit)));
	letter-spacing: -.01em;
	text-align: right;
	user-select: text;
	-webkit-user-select: text;
	outline: none;
	caret-color: var(--teal);
}
.email-field input::placeholder { color: rgba(4, 65, 83, .3); }
.email-domain {
	flex: 0 1 auto;
	max-width: 62%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: calc(var(--u) * .5) calc(var(--u) * 1.1) calc(var(--u) * .45);
	border-radius: 999px;
	background: var(--sun);
	color: var(--teal);
	font-family: var(--f-text);
	font-weight: 700;
	font-size: max(13px, calc(var(--u) * 1.6 * var(--fit)));
	box-shadow: inset 0 calc(var(--u) * -.25) 0 var(--sun-lo);
}
.email-at { opacity: .55; margin-right: .05em; }
.email-clear { flex: 0 0 auto; display: grid; place-items: center; width: max(36px, calc(var(--u) * 3.6)); height: max(36px, calc(var(--u) * 3.6)); border-radius: 50%; color: rgba(4, 65, 83, .5); transition: background .15s, color .15s; }
.email-clear svg { width: 46%; height: 46%; }
.email-clear:active { background: var(--sun); color: var(--ink); }
.email-row .btn { flex: 0 0 auto; align-self: center; }
.email-form.is-empty .js-email-go { filter: saturate(.55) brightness(.92); }
.email-form.is-valid .js-email-go { animation: mcr-glow-btn 1.6s ease-in-out infinite; }
@keyframes mcr-glow-btn { 50% { box-shadow: 0 var(--lift) 0 var(--lo), 0 0 0 calc(var(--u) * .6) var(--sun), 0 calc(var(--u) * 1.2) calc(var(--u) * 2.2) var(--shadow); } }

.email-hint { display: flex; align-items: center; gap: .4em; min-height: 1.5em; padding-left: calc(var(--u) * .4); font-weight: 500; font-size: max(14px, calc(var(--u) * 1.5 * var(--fit))); color: rgba(4, 65, 83, .8); overflow-wrap: anywhere; }
.email-hint b { color: var(--teal); font-weight: 700; }
.email-hint.is-ok { color: var(--teal); }
.email-hint.is-ok b { background: linear-gradient(transparent 55%, var(--sun) 55%, var(--sun) 92%, transparent 92%); }
.email-hint.is-bad { color: var(--teal); font-weight: 600; }
.email-hint.is-bad .hint-txt::before { content: "✕ "; font-weight: 700; }
.email-hint.is-bad b { color: var(--teal-deep); }

.email-form.is-shake .email-field { animation: mcr-shake .5s ease; }
.email-form.is-checking .email-field::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: -30%;
	width: 30%;
	background: linear-gradient(90deg, transparent, rgba(250, 241, 136, .9), transparent);
	animation: mcr-scan 1s linear infinite;
	pointer-events: none;
}
.email-form.is-checking .btn, .key-go[disabled] { animation: mcr-checking 1s ease-in-out infinite; }
@keyframes mcr-checking { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }
@keyframes mcr-scan { to { transform: translateX(440%); } }

/* Narrow panel (laptops, tablets, phones): button under the field so the name has room */
@container (max-width: 1150px) {
	.email-main .email-row { flex-direction: column; gap: calc(var(--u) * 1.4); }
	.email-main .email-row .btn { align-self: stretch; }
	.email-main .email-domain { max-width: 55%; }
}

/* Kiosk keyboard — arcade keys; the GO key replaces the side button */
.s-email.has-osk .email-row .js-email-go { display: none; }
.osk { display: flex; flex-direction: column; gap: calc(var(--u) * .6); width: 100%; margin-top: calc(var(--u) * .3); }
.osk-row { display: flex; justify-content: center; gap: calc(var(--u) * .6); }
.key {
	flex: 1 1 0;
	max-width: calc(var(--u) * 7);
	height: calc(var(--u) * 4.5 * var(--fit));
	min-width: 28px;
	min-height: 40px;
	border-radius: calc(var(--u) * 1);
	background: var(--teal);
	box-shadow: inset 0 0 0 max(1px, calc(var(--u) * .12)) rgba(250, 246, 193, .2), 0 calc(var(--u) * .45) 0 var(--teal-deep);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: max(16px, calc(var(--u) * 1.9 * var(--fit)));
	color: var(--cream);
	transition: transform .07s, background .12s, box-shadow .07s;
}
.osk-row:nth-child(3) .key { flex-grow: 0; flex-basis: calc((100% - 9 * var(--u) * .6) / 10); }
.key:active, .key.is-down { transform: translateY(calc(var(--u) * .4)); background: var(--sun); color: var(--ink); box-shadow: 0 0 0 var(--teal-deep); }
.key-wide { flex: 1.6 1 0; max-width: none; font-size: max(12px, calc(var(--u) * 1.25 * var(--fit))); letter-spacing: .04em; }
.key-del { background: var(--teal-3); }
.key-go { flex: 3 1 0; max-width: none; background: var(--sun); color: var(--ink); box-shadow: inset 0 0 0 max(2px, calc(var(--u) * .2)) var(--teal), 0 calc(var(--u) * .45) 0 var(--teal); font-weight: 800; font-size: max(14px, calc(var(--u) * 1.7 * var(--fit))); letter-spacing: .02em; }
.key-go:active, .key-go.is-down { background: var(--sun-hi); }
.email-form.is-valid ~ .osk .key-go { animation: mcr-glow-btn 1.6s ease-in-out infinite; --lift: calc(var(--u) * .45); --lo: var(--teal); }
.email-form.is-empty ~ .osk .key-go { filter: saturate(.55) brightness(.92); }

/* ==========================================================================
   GRANTED / DENIED / PLAYED / CLOSED
   ========================================================================== */
.s-granted, .s-denied, .s-closed, .s-gameon, .s-suspense { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.granted-lock { position: relative; width: calc(var(--u) * 15); aspect-ratio: 120 / 140; }
.granted-lock::before { content: ""; position: absolute; left: 50%; top: 62%; width: calc(var(--u) * 15); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.3); background: radial-gradient(closest-side, rgba(250, 241, 136, 1), rgba(250, 241, 136, 0)); opacity: 0; }
.granted-lock svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.granted-lock .lock-shackle { transform-box: fill-box; transform-origin: 85% 100%; }
.s-granted.is-active .granted-lock { animation: mcr-bump .6s var(--ease-pop) .1s both; }
.s-granted.is-active .granted-lock .lock-shackle { animation: mcr-unlock .6s var(--ease-pop) .45s both; }
.s-granted.is-active .granted-lock::before { animation: mcr-burst-glow 1.2s ease-out .5s both; }
@keyframes mcr-unlock { to { transform: translateY(-22%) rotate(28deg); } }
@keyframes mcr-burst-glow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4); } }
.granted-title { margin-top: calc(var(--u) * 2.4); font-family: var(--f-display), var(--f-emoji); font-weight: 900; font-size: max(26px, calc(var(--u) * 6 * var(--fit))); line-height: 1; color: var(--teal); text-shadow: var(--extrude); }
.s-granted.is-active .granted-title { animation: mcr-slam .7s var(--ease-pop) .55s both; }
.granted-go { margin-top: calc(var(--u) * 1.6); font-family: var(--f-display); font-weight: 900; font-size: max(28px, calc(var(--u) * 8 * var(--fit))); line-height: 1; color: var(--teal); text-shadow: var(--extrude); }
.s-granted.is-active .granted-go { animation: mcr-slam .6s var(--ease-pop) 1.05s both; }
.s-granted .granted-sub { margin-top: calc(var(--u) * 1); font-size: max(16px, calc(var(--u) * 2)); }

.denied-card, .closed-card { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.3); max-width: calc(var(--u) * 80); }
.coiny-denied, .coiny-closed { width: calc(var(--u) * 15); height: auto; }
.s-denied.is-active .coiny-denied { animation: mcr-shake .7s ease .2s both; }
.denied-title, .closed-title { font-family: var(--f-display), var(--f-emoji); font-weight: 900; font-size: max(28px, calc(var(--u) * 7 * var(--fit))); line-height: 1; color: var(--teal); text-shadow: var(--extrude); }
.closed-title { font-size: max(24px, calc(var(--u) * 5)); }
.denied-line, .closed-msg { font-family: var(--f-display); font-weight: 700; font-size: max(18px, calc(var(--u) * 2.6)); line-height: 1.2; text-wrap: balance; }
.denied-sub { font-size: max(16px, calc(var(--u) * 2)); opacity: .9; margin-bottom: calc(var(--u) * 1.2); }
.closed-msg { margin-bottom: calc(var(--u) * 1.2); }

.s-played { align-items: center; justify-content: center; }
.played-wrap { display: flex; align-items: center; gap: calc(var(--u) * 5); max-width: calc(var(--u) * 100); }
.played-wrap > div { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1.4); }
.coiny-played { flex: 0 0 auto; width: calc(var(--u) * 22); height: auto; animation: mcr-bob 3s ease-in-out infinite; }
.played-title { font-family: var(--f-display), var(--f-emoji); font-weight: 900; font-size: max(24px, calc(var(--u) * 5.2 * var(--fit))); line-height: 1; }
.played-sub { font-size: max(16px, calc(var(--u) * 2.2)); }
.played-wrap .btn { margin-top: calc(var(--u) * 1); }

/* Ticket (used on result and already-played) */
.ticket {
	--hole: calc(var(--u) * 1.2);
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: calc(var(--u) * 1.1) calc(var(--u) * 1.6);
	width: 100%;
	padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2);
	background: var(--t-bg, var(--teal));
	color: var(--t-fg, var(--cream));
	border-radius: calc(var(--u) * 1.2);
	-webkit-mask: radial-gradient(circle var(--hole) at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--hole) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
	mask: radial-gradient(circle var(--hole) at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--hole) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.ticket-cell { min-width: 0; }
.ticket-cell:first-child { grid-column: 1 / -1; padding-bottom: calc(var(--u) * 1); border-bottom: max(1px, calc(var(--u) * .12)) dashed var(--t-line, rgba(250, 246, 193, .35)); }
.ticket-cell:nth-child(3) { border-left: max(1px, calc(var(--u) * .12)) dashed var(--t-line, rgba(250, 246, 193, .35)); padding-left: calc(var(--u) * 1.6); }
.ticket-cell:first-child .ticket-v { font-family: var(--f-text); font-weight: 700; overflow-wrap: anywhere; }
.ticket-k { display: block; font-family: var(--f-display); font-weight: 700; font-size: max(10px, calc(var(--u) * .95 * var(--fit))); letter-spacing: .12em; opacity: .65; margin-bottom: .35em; }
.ticket-v { display: block; font-family: var(--f-display), var(--f-emoji); font-weight: 800; font-size: max(14px, calc(var(--u) * 1.9 * var(--fit))); line-height: 1.1; overflow-wrap: anywhere; }
.ticket-coins { display: flex; align-items: center; gap: .3em; font-family: var(--f-num); }
.ticket-coins .mcr-coin { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.ticket-v.is-code { color: var(--t-code, var(--sun)); letter-spacing: .06em; font-family: var(--f-num); white-space: nowrap; }
.ticket-time { grid-column: 1 / -1; font-size: max(11px, calc(var(--u) * 1 * var(--fit))); opacity: .65; margin-top: calc(var(--u) * -.3); }

/* ==========================================================================
   GAME ON
   ========================================================================== */
.s-gameon { gap: calc(var(--u) * 2.6); }
.gameon-title { font-family: var(--f-display), var(--f-emoji); font-weight: 400; font-size: max(30px, calc(var(--u) * 9 * var(--fit))); line-height: 1; color: var(--teal); text-shadow: 0 calc(var(--u) * .35) 0 var(--sun), 0 calc(var(--u) * .7) 0 var(--sun-lo), 0 calc(var(--u) * 1.6) calc(var(--u) * 2) var(--shadow); }
.s-gameon.is-active .gameon-title { animation: mcr-slam .7s var(--ease-pop) .05s both; }
.mission {
	padding: calc(var(--u) * 2) calc(var(--u) * 3.4);
	background: var(--teal);
	color: var(--cream);
	border-radius: calc(var(--u) * 2);
	transform: rotate(-2deg);
	box-shadow: 0 calc(var(--u) * .8) 0 var(--teal-deep), 0 calc(var(--u) * 2) calc(var(--u) * 3) var(--shadow);
	text-align: left;
}
.s-gameon.is-active .mission { animation: mcr-card-in .7s var(--ease-pop) .5s both; }
@keyframes mcr-card-in { from { opacity: 0; transform: rotate(-12deg) scale(.6) translateY(calc(var(--u) * 6)); } to { opacity: 1; transform: rotate(-2deg); } }
.mission-head { font-family: var(--f-display); font-weight: 900; font-size: max(13px, calc(var(--u) * 1.4)); letter-spacing: .1em; color: var(--sun); margin-bottom: calc(var(--u) * .9); }
.mission-list { display: grid; gap: calc(var(--u) * .5); font-family: var(--f-display), var(--f-emoji); font-weight: 800; font-size: max(17px, calc(var(--u) * 2.6)); line-height: 1.15; }
.mission-list li { display: flex; gap: .55em; align-items: baseline; }
.mission-list span { font-family: var(--f-emoji); font-size: .9em; }
.gameon-bank { display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-family: var(--f-num); font-weight: 900; font-size: max(28px, calc(var(--u) * 6)); color: var(--teal); text-shadow: var(--extrude); line-height: 1; }
.gameon-coin { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.s-gameon.is-active .gameon-bank { animation: mcr-drop-in .6s var(--ease-pop) 1s both; }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 5; }
.countdown span { font-family: var(--f-num); font-weight: 900; font-size: calc(var(--u) * 26); line-height: 1; color: var(--sun); -webkit-text-stroke: calc(var(--u) * .45) var(--teal); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * .9) 0 var(--teal), 0 calc(var(--u) * 2) calc(var(--u) * 2) var(--shadow); opacity: 0; }
.countdown span.is-go { color: var(--paper); }
.countdown span.is-tick { animation: mcr-count .7s var(--ease-out) both; }
@keyframes mcr-count { 0% { opacity: 0; transform: scale(2.2); } 25% { opacity: 1; transform: scale(1); } 75% { opacity: 1; transform: scale(.95); } 100% { opacity: 0; transform: scale(.6); } }
.s-gameon.is-counting > :not(.countdown) { opacity: .12; transition: opacity .3s; }

/* ==========================================================================
   QUESTION
   ========================================================================== */
.s-question { padding-top: calc(var(--u) * 1.2); }
.q-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 19); gap: calc(var(--u) * 3.2); width: 100%; height: 100%; min-height: 0; }
.q-stage { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(var(--u) * 2.4 * var(--fit)); min-height: 0; overflow: hidden; overflow: clip; overflow-clip-margin: calc(var(--u) * 2); }
.q-head { display: flex; flex-direction: column; gap: calc(var(--u) * .9 * var(--fit)); padding-top: calc(var(--u) * .6); }
.q-cat {
	align-self: flex-start;
	padding: .45em .95em .4em;
	border-radius: 999px;
	background: var(--teal);
	color: var(--sun);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: max(12px, calc(var(--u) * 1.15 * var(--fit)));
	letter-spacing: .04em;
}
.q-text {
	font-family: var(--f-display), var(--f-emoji);
	font-weight: 800;
	font-size: max(22px, calc(var(--u) * 3.6 * var(--fit)));
	line-height: 1.08;
	letter-spacing: -.02em;
	text-wrap: balance;
	max-width: 22em;
	color: var(--teal);
}
.q-hint { font-family: var(--f-display), var(--f-emoji); font-weight: 700; font-size: max(13px, calc(var(--u) * 1.35 * var(--fit))); letter-spacing: .05em; color: var(--teal-3); }
.q-body { display: flex; gap: calc(var(--u) * 2.4); min-height: 0; }
.q-media { flex: 0 0 34%; min-height: 0; display: flex; align-items: center; }
.q-media img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; border-radius: calc(var(--u) * 1.4); background: var(--paper); box-shadow: 0 0 0 max(3px, calc(var(--u) * .25)) var(--teal); }
.q-answers {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(calc(var(--u) * 9 * var(--fit)), 1fr);
	gap: calc(var(--u) * 2.2 * var(--fit)) calc(var(--u) * 2.4);
	align-content: stretch;
	min-height: 0;
	max-height: calc(var(--u) * 34);
	padding-bottom: calc(var(--u) * 1);
}
.q-answers[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(calc(var(--u) * 12), 1fr); max-height: calc(var(--u) * 22); }
.q-answers[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: calc(var(--u) * 22); }
.q-answers[data-count="5"], .q-answers[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ans {
	--c: var(--teal); --lo: var(--teal-deep);
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: calc(var(--u) * 1.6);
	min-height: 64px;
	padding: calc(var(--u) * 1.2 * var(--fit)) calc(var(--u) * 2) calc(var(--u) * 1.2 * var(--fit)) calc(var(--u) * 1.3);
	border-radius: calc(var(--u) * 1.8);
	background: var(--c);
	color: var(--cream);
	text-align: left;
	box-shadow: 0 calc(var(--u) * .85) 0 var(--lo), 0 calc(var(--u) * 2) calc(var(--u) * 2.6) var(--shadow);
	transform: translateY(0);
	transition: transform .14s ease, box-shadow .14s ease, background-color .25s, opacity .3s, filter .3s;
	animation: mcr-ans-in .6s var(--ease-pop) calc(var(--i) * 80ms + 160ms) both;
}
.ans:nth-child(4n + 2) { --c: var(--teal-2); }
.ans:nth-child(4n + 3) { --c: var(--teal-3); }
.ans:nth-child(4n + 4) { --c: #0A4F63; }
.ans:nth-child(5) { --c: #126A80; }
.ans:nth-child(6) { --c: #08485A; }
@keyframes mcr-ans-in { from { opacity: 0; transform: translateY(calc(var(--u) * 4)) scale(.9); } to { opacity: 1; transform: none; } }
.ans-key {
	display: grid;
	place-items: center;
	width: calc(var(--u) * 4.6 * var(--fit));
	height: calc(var(--u) * 4.6 * var(--fit));
	min-width: 36px;
	min-height: 36px;
	border-radius: 50%;
	background: var(--sun);
	color: var(--teal);
	font-family: var(--f-display);
	font-weight: 400;
	font-size: max(15px, calc(var(--u) * 2.1 * var(--fit)));
	box-shadow: inset 0 calc(var(--u) * -.35) 0 var(--sun-lo);
}
.ans-text { font-family: var(--f-text); font-weight: 700; font-size: max(17px, calc(var(--u) * 2.35 * var(--fit))); line-height: 1.15; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.ans-mark { display: none; place-items: center; width: calc(var(--u) * 4); height: calc(var(--u) * 4); min-width: 30px; min-height: 30px; border-radius: 50%; font-weight: 900; font-size: max(16px, calc(var(--u) * 2.2)); line-height: 1; background: var(--teal); color: var(--sun); }
@media (hover: hover) and (pointer: fine) {
	.q-answers:not(.is-locked) .ans:hover { transform: translateY(calc(var(--u) * -.35)); box-shadow: 0 calc(var(--u) * 1.2) 0 var(--lo), 0 calc(var(--u) * 2.6) calc(var(--u) * 3) var(--shadow); }
}
.q-answers:not(.is-locked) .ans:active { transform: translateY(calc(var(--u) * .7)) scale(.985); box-shadow: 0 calc(var(--u) * .15) 0 var(--lo), 0 calc(var(--u) * .8) calc(var(--u) * 1.2) var(--shadow); }
.q-answers.is-locked .ans { cursor: default; }
.ans.is-picked { transform: translateY(calc(var(--u) * .5)); box-shadow: 0 calc(var(--u) * .35) 0 var(--lo), 0 0 0 calc(var(--u) * .5) var(--sun), 0 0 calc(var(--u) * 4) rgba(250, 241, 136, .9); animation: mcr-picked 1s ease-in-out infinite; }
@keyframes mcr-picked { 50% { filter: brightness(1.12); } }
.ans.is-dim { opacity: .3; filter: saturate(.5); transform: scale(.97); }
.ans.is-correct { --c: var(--sun); --lo: var(--sun-deep); color: var(--teal); animation: mcr-bump .55s var(--ease-pop); box-shadow: 0 calc(var(--u) * .85) 0 var(--lo), 0 0 0 calc(var(--u) * .45) var(--teal), 0 0 calc(var(--u) * 5) rgba(250, 241, 136, .95); }
.ans.is-correct .ans-key { background: var(--teal); color: var(--sun); box-shadow: none; }
.ans.is-correct .ans-mark { display: grid; color: var(--sun); }
.ans.is-correct .ans-mark::before { content: "✓"; }
.ans.is-wrong { --c: var(--paper); --lo: rgba(4, 65, 83, .35); color: var(--teal); animation: mcr-shake .55s ease; outline: max(3px, calc(var(--u) * .28)) dashed var(--teal); outline-offset: calc(var(--u) * -.6); }
.ans.is-wrong .ans-key { background: var(--cream); }
.ans.is-wrong .ans-mark { display: grid; color: var(--sun); }
.ans.is-wrong .ans-mark::before { content: "✕"; }
.ans.is-answer { opacity: 1; filter: none; transform: none; box-shadow: 0 calc(var(--u) * .85) 0 var(--lo), 0 0 0 calc(var(--u) * .45) var(--sun); }
.ans.is-answer .ans-mark { display: grid; color: var(--sun); }
.ans.is-answer .ans-mark::before { content: "✓"; }
.ans.is-waiting::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%) -100% 0 / 200% 100% no-repeat; animation: mcr-shimmer 1s linear infinite; }
@keyframes mcr-shimmer { to { background-position: 200% 0; } }

/* Rail: coin counter + mascot standing on a growing stack */
.q-rail { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; padding-bottom: calc(var(--u) * 1.6); }
.vault { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; min-height: 0; }
.vault::before { /* glass column */
	content: "";
	position: absolute;
	inset: calc(var(--u) * 9.2) 6% 0;
	border-radius: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 2);
	background: linear-gradient(180deg, rgba(255, 253, 240, .35), rgba(255, 253, 240, .8));
	box-shadow: inset 0 0 0 max(2px, calc(var(--u) * .18)) rgba(4, 65, 83, .35);
}
.vault-count {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--u) * .2);
	padding: calc(var(--u) * 1) calc(var(--u) * 2.2) calc(var(--u) * .9);
	background: var(--ink);
	border-radius: calc(var(--u) * 2);
	color: var(--cream);
	box-shadow: inset 0 0 0 max(2px, calc(var(--u) * .22)) var(--sun), 0 calc(var(--u) * .5) 0 var(--teal-deep), 0 calc(var(--u) * 1) calc(var(--u) * 2) var(--shadow);
}
.vault-n { font-family: var(--f-num); font-weight: 900; font-size: calc(var(--u) * 5.6); line-height: 1; color: var(--sun); }
.vault-count span { font-family: var(--f-display); font-weight: 700; font-size: calc(var(--u) * 1.1); letter-spacing: .16em; }
.vault-count.is-bump { animation: mcr-bump .5s var(--ease-pop); }
.vault-tube { position: relative; z-index: 1; margin-top: auto; display: flex; flex-direction: column-reverse; align-items: center; width: 100%; padding-bottom: calc(var(--u) * 1); }
.vault-tube li { width: calc(var(--u) * 12); height: calc(var(--u) * 2.1); margin-top: calc(var(--u) * -.55); border-radius: 50%; border: max(1px, calc(var(--u) * .14)) dashed rgba(4, 65, 83, .3); }
.vault-tube li.is-full {
	border: 0;
	background: radial-gradient(ellipse at 40% 35%, #1C7E97 0%, var(--teal) 55%, #033342 100%);
	box-shadow: 0 calc(var(--u) * .65) 0 var(--teal-deep), inset 0 0 0 calc(var(--u) * .25) var(--sun);
	animation: mcr-stack-in .45s var(--ease-pop) both;
}
.vault-tube li.is-full:nth-child(even) { transform: translateX(calc(var(--u) * .6)); }
.vault-tube li.is-full:nth-child(3n) { transform: translateX(calc(var(--u) * -.5)); }
@keyframes mcr-stack-in { from { opacity: 0; translate: 0 calc(var(--u) * -6); } to { opacity: 1; translate: 0 0; } }
.rail-buddy { position: absolute; left: 50%; bottom: calc(var(--u) * 1.6 + var(--stack, 0) * var(--u) * 1.55 + var(--u) * 2); width: calc(var(--u) * 12); transform: translateX(-50%); z-index: 2; transition: bottom .45s var(--ease-pop); }
.coiny-rail { width: 100%; height: auto; }
.rail-buddy.is-happy .coiny-rail { animation: mcr-hop .9s ease-in-out 2; }
.rail-buddy.is-sad .coiny-rail { animation: mcr-shake .6s ease; }

/* Feedback sticker */
.q-feedback { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; pointer-events: none; }
.fb-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--u) * .7);
	max-width: min(92%, calc(var(--u) * 70));
	padding: calc(var(--u) * 2.4) calc(var(--u) * 4);
	border-radius: calc(var(--u) * 2.4);
	background: var(--sun);
	color: var(--teal);
	text-align: center;
	box-shadow: 0 0 0 calc(var(--u) * .45) var(--teal), 0 calc(var(--u) * 1.2) 0 calc(var(--u) * .45) var(--teal), 0 calc(var(--u) * 3) calc(var(--u) * 5) var(--shadow);
	opacity: 0;
	transform: scale(.4) rotate(-12deg);
}
.q-feedback.is-wrong .fb-card { background: var(--teal); color: var(--cream); box-shadow: 0 0 0 calc(var(--u) * .45) var(--sun), 0 calc(var(--u) * 1.2) 0 calc(var(--u) * .45) var(--teal-deep), 0 calc(var(--u) * 3) calc(var(--u) * 5) var(--shadow); }
.q-feedback.is-wrong .fb-big { color: var(--sun); }
.q-feedback.is-show .fb-card { animation: mcr-sticker-in .55s var(--ease-pop) both; }
.q-feedback.is-hide .fb-card { animation: mcr-sticker-out .3s ease-in both; }
@keyframes mcr-sticker-in { from { opacity: 0; transform: scale(.4) rotate(-14deg); } to { opacity: 1; transform: scale(1) rotate(var(--tilt, -3deg)); } }
@keyframes mcr-sticker-out { from { opacity: 1; transform: scale(1) rotate(var(--tilt, -3deg)); } to { opacity: 0; transform: scale(1.15) rotate(0deg) translateY(calc(var(--u) * -3)); } }
.fb-big { font-family: var(--f-display), var(--f-emoji); font-weight: 900; font-size: max(26px, calc(var(--u) * 5.4)); line-height: 1; letter-spacing: -.02em; }
.fb-sub { font-family: var(--f-display), var(--f-emoji); font-weight: 800; font-size: max(17px, calc(var(--u) * 2.6)); line-height: 1.1; }
.fb-note { font-weight: 600; font-size: max(14px, calc(var(--u) * 1.5)); max-width: 34em; opacity: .85; }
.fb-note:empty { display: none; }

/* Round sweep between questions */
.q-sweep { visibility: hidden; position: absolute; left: -10%; right: -10%; top: 50%; z-index: 26; height: calc(var(--u) * 11); margin-top: calc(var(--u) * -5.5); display: grid; place-items: center; background: var(--teal); color: var(--sun); transform: translateX(110%) skewY(-4deg); pointer-events: none; box-shadow: 0 calc(var(--u) * .8) 0 var(--sun); }
.q-sweep span { font-family: var(--f-display); font-weight: 900; font-size: calc(var(--u) * 5.4); letter-spacing: .02em; }
.q-sweep.is-run { visibility: visible; animation: mcr-sweep .95s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes mcr-sweep { 0% { transform: translateX(110%) skewY(-4deg); } 40%, 60% { transform: translateX(0) skewY(-4deg); } 100% { transform: translateX(-110%) skewY(-4deg); } }

/* ==========================================================================
   SUSPENSE
   ========================================================================== */
.s-suspense { gap: calc(var(--u) * 2.4); }
.sus-title { font-family: var(--f-display); font-weight: 400; font-size: max(28px, calc(var(--u) * 8 * var(--fit))); line-height: 1; color: var(--teal); text-shadow: 0 calc(var(--u) * .35) 0 var(--sun), 0 calc(var(--u) * .7) 0 var(--sun-lo); }
.s-suspense.is-active .sus-title { animation: mcr-slam .7s var(--ease-pop) both; }
.sus-sub { font-family: var(--f-display), var(--f-emoji); font-weight: 800; font-size: max(18px, calc(var(--u) * 3)); opacity: 0; }
.sus-sub.is-in { animation: mcr-drop-in .6s var(--ease-pop) both; }
.sus-row { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1.4); }
.sus-row li { position: relative; display: grid; place-items: center; width: max(36px, calc(var(--u) * 7.5)); height: max(36px, calc(var(--u) * 7.5)); border-radius: 50%; border: max(2px, calc(var(--u) * .22)) dashed rgba(4, 65, 83, .45); font-weight: 700; font-size: max(16px, calc(var(--u) * 3)); color: var(--teal); }
.sus-row li .mcr-coin { width: 112%; height: 112%; }
.sus-row li.is-won { border-color: transparent; animation: mcr-bump .45s var(--ease-pop); }
.sus-row li.is-lost { border: max(2px, calc(var(--u) * .22)) solid rgba(4, 65, 83, .6); background: var(--paper); animation: mcr-shake .4s ease; }
.sus-row li.is-lost::after { content: "✕"; }
.sus-count { display: flex; align-items: center; gap: calc(var(--u) * 1.4); font-family: var(--f-num); font-weight: 900; font-size: max(40px, calc(var(--u) * 10)); line-height: 1; color: var(--teal); text-shadow: 0 calc(var(--u) * .4) 0 var(--sun), 0 calc(var(--u) * .8) 0 var(--sun-lo); }
.sus-coin { width: calc(var(--u) * 10); height: calc(var(--u) * 10); animation: mcr-flip 1.4s linear infinite; }
.sus-count.is-bump b { display: inline-block; animation: mcr-bump .35s var(--ease-pop); }

/* ==========================================================================
   RESULT + REDEMPTION
   ========================================================================== */
.s-result { padding-top: calc(var(--u) * .6); }
.res-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "score card" "actions card"; column-gap: calc(var(--u) * 3.4); row-gap: calc(var(--u) * 1.6); align-items: center; width: 100%; height: 100%; min-height: 0; }
.res-score { grid-area: score; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.res-earned { font-family: var(--f-display); font-weight: 800; font-size: max(18px, calc(var(--u) * 3 * var(--fit))); letter-spacing: .04em; }
.res-big { display: flex; align-items: center; gap: calc(var(--u) * 1.6); margin: calc(var(--u) * .4) 0; }
.res-coin { width: calc(var(--u) * 14 * var(--fit)); height: calc(var(--u) * 14 * var(--fit)); filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 2) var(--shadow)); }
.s-result.is-active .res-coin { animation: mcr-flip 1.2s linear 2, mcr-bump .6s var(--ease-pop) 2.4s; }
.res-n { font-family: var(--f-num); font-weight: 900; font-size: calc(var(--u) * 19 * var(--fit)); line-height: .85; color: var(--teal); letter-spacing: -.02em; text-shadow: 0 calc(var(--u) * .4) 0 var(--sun), 0 calc(var(--u) * .8) 0 var(--sun), 0 calc(var(--u) * 1.2) 0 var(--sun-lo), 0 calc(var(--u) * 2.4) calc(var(--u) * 2.4) var(--shadow); font-variant-numeric: tabular-nums; }
.res-n.is-pop { animation: mcr-bump .4s var(--ease-pop); }
.res-unit { font-family: var(--f-display); font-weight: 800; font-size: max(18px, calc(var(--u) * 3 * var(--fit))); letter-spacing: .14em; margin-top: calc(var(--u) * .4); }
.res-tier { margin-top: calc(var(--u) * 2 * var(--fit)); font-family: var(--f-display), var(--f-emoji); font-weight: 900; font-size: max(24px, calc(var(--u) * 5 * var(--fit))); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; opacity: 0; }
.res-tier.is-long { font-size: max(22px, calc(var(--u) * 4.2 * var(--fit))); }
.res-line { margin-top: calc(var(--u) * .7); font-size: max(16px, calc(var(--u) * 2.2 * var(--fit))); font-weight: 600; opacity: 0; }
.res-tier.is-in { animation: mcr-slam .7s var(--ease-pop) both; }
.res-line.is-in { animation: mcr-drop-in .6s var(--ease-out) .25s both; }
.coiny-result { position: absolute; left: calc(var(--u) * -1); bottom: calc(var(--u) * 16 * var(--fit)); width: calc(var(--u) * 11 * var(--fit)); height: auto; opacity: 0; transform: rotate(-12deg); }
.coiny-result.is-in { animation: mcr-peek .7s var(--ease-pop) both; }
@keyframes mcr-peek { from { opacity: 0; transform: translateX(calc(var(--u) * -6)) rotate(-40deg); } to { opacity: 1; transform: rotate(-12deg); } }

.res-redeem {
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 1.15 * var(--fit));
	min-width: 0;
	max-height: 100%;
	padding: calc(var(--u) * 2 * var(--fit)) calc(var(--u) * 2.6);
	background: var(--teal);
	color: var(--cream);
	border-radius: calc(var(--u) * 2.4);
	box-shadow: 0 calc(var(--u) * .9) 0 var(--teal-deep), 0 calc(var(--u) * 3) calc(var(--u) * 4) var(--shadow);
	opacity: 0;
}
.res-redeem.is-in { animation: mcr-card-in2 .7s var(--ease-pop) both; }
@keyframes mcr-card-in2 { from { opacity: 0; transform: translateX(calc(var(--u) * 10)) rotate(6deg); } to { opacity: 1; transform: none; } }
.redeem-h { font-family: var(--f-display), var(--f-emoji); font-weight: 900; font-size: max(17px, calc(var(--u) * 2.2 * var(--fit))); line-height: 1.05; letter-spacing: -.01em; }
.redeem-step p { margin-top: .3em; font-size: max(14px, calc(var(--u) * 1.6 * var(--fit))); font-weight: 500; line-height: 1.3; }
.redeem-h { color: var(--cream); }
.redeem-snap .redeem-h { color: var(--sun); }
.redeem-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1); counter-reset: step; }
.redeem-flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .35); }
.redeem-flow li span {
	display: grid;
	place-items: center;
	width: calc(var(--u) * 4.6 * var(--fit));
	height: calc(var(--u) * 4.6 * var(--fit));
	min-width: 40px;
	min-height: 40px;
	border-radius: 50%;
	background: var(--paper);
	font-family: var(--f-emoji);
	font-size: max(18px, calc(var(--u) * 2.6 * var(--fit)));
	box-shadow: 0 calc(var(--u) * .4) 0 var(--teal-deep);
}
.redeem-flow li:nth-child(even) span { background: var(--sun); }
.redeem-flow li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--u) * 2.3 * var(--fit)); left: calc(50% + var(--u) * 2.9 * var(--fit)); right: calc(-50% + var(--u) * 2.9 * var(--fit) - var(--u) * 1); border-top: max(2px, calc(var(--u) * .22)) dashed rgba(250, 246, 193, .45); }
.redeem-flow em { font-style: normal; font-family: var(--f-display); font-weight: 700; font-size: max(11px, calc(var(--u) * 1.05 * var(--fit))); letter-spacing: .06em; }
.res-redeem .ticket { margin-top: calc(var(--u) * .2); padding-top: calc(var(--u) * 1.3); padding-bottom: calc(var(--u) * 1.3); }
.res-redeem { grid-area: card; }
.res-actions { grid-area: actions; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); padding-bottom: calc(var(--u) * .8); }
.res-actions .res-reset { color: var(--teal); }
.res-actions .js-next { animation: mcr-fade .5s ease 1.2s both; }
.res-reset { font-size: max(13px, calc(var(--u) * 1.2)); font-weight: 600; opacity: .7; }
.res-redeem.is-in .redeem-flow li { animation: mcr-drop-in .5s var(--ease-pop) both; }
.res-redeem.is-in .redeem-flow li:nth-child(1) { animation-delay: .45s; }
.res-redeem.is-in .redeem-flow li:nth-child(2) { animation-delay: .6s; }
.res-redeem.is-in .redeem-flow li:nth-child(3) { animation-delay: .75s; }
.res-redeem.is-in .redeem-flow li:nth-child(4) { animation-delay: .9s; }
.res-redeem .ticket { --t-bg: var(--paper); --t-fg: var(--teal); --t-line: rgba(4, 65, 83, .3); --t-code: var(--teal); }
.res-redeem .ticket .ticket-v.is-code { background: linear-gradient(transparent 55%, var(--sun) 55%, var(--sun) 92%, transparent 92%); justify-self: start; }

/* ==========================================================================
   Overlays
   ========================================================================== */
.mcr-overlay { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--pad-x); background: rgba(4, 65, 83, .55); animation: mcr-fade .3s ease both; }
@keyframes mcr-fade { from { opacity: 0; } }
.ov-card { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.3); max-width: min(100%, calc(var(--u) * 70)); padding: calc(var(--u) * 3.4) calc(var(--u) * 5); text-align: center; background: var(--paper); color: var(--ink); border-radius: calc(var(--u) * 2.4); box-shadow: inset 0 0 0 max(3px, calc(var(--u) * .3)) var(--teal), 0 calc(var(--u) * .9) 0 var(--teal), 0 calc(var(--u) * 3) calc(var(--u) * 5) var(--shadow); animation: mcr-card-in2 .5s var(--ease-pop) both; }
.ov-card h2 { font-family: var(--f-display), var(--f-emoji); font-weight: 900; font-size: max(24px, calc(var(--u) * 4.4)); line-height: 1; }
.ov-card p { font-size: max(15px, calc(var(--u) * 1.8)); font-weight: 500; }
.ov-card .ov-coin { width: max(70px, calc(var(--u) * 9)); height: auto; animation: mcr-bob 3s ease-in-out infinite; }
.ov-next .ov-card { max-width: min(100%, calc(var(--u) * 64)); }
.ov-next .ov-card p b { font-family: var(--f-num); font-weight: 400; color: var(--teal); white-space: nowrap; background: linear-gradient(transparent 55%, var(--sun) 55%, var(--sun) 92%, transparent 92%); }
.ov-actions { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); margin-top: calc(var(--u) * .8); }
.ov-actions .btn-text { color: var(--ink); }
.ov-emoji { font-family: var(--f-emoji); font-size: max(40px, calc(var(--u) * 7)) !important; line-height: 1; }
.idle-ring { position: relative; width: max(80px, calc(var(--u) * 11)); aspect-ratio: 1; }
.idle-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.idle-ring circle { fill: none; stroke: var(--sun); stroke-width: 10; }
.idle-ring .idle-ring-bar { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.idle-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-num); font-weight: 900; font-size: max(26px, calc(var(--u) * 3.6)); }
.mcr-noscript { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; background: var(--cream); z-index: 99; }

/* ==========================================================================
   Minted coin shine — one slow specular sweep on the hero coins
   ========================================================================== */
.coin-shine { position: relative; display: inline-block; flex: 0 0 auto; line-height: 0; }
.coin-shine::after {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: circle(43.5% at 50% 50%);
	background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 245, .75) 48%, rgba(255, 255, 245, .15) 54%, transparent 62%) 160% 0 / 260% 100% no-repeat;
	mix-blend-mode: soft-light;
	animation: mcr-shine 4.2s ease-in-out 1.2s infinite;
	pointer-events: none;
}
.mcr:not(.is-minted) .coin-shine::after { display: none; }
@keyframes mcr-shine { 0%, 50% { background-position: 160% 0; } 80%, 100% { background-position: -70% 0; } }

/* ==========================================================================
   Kiosk-only details
   ========================================================================== */
.mcr:not(.is-kiosk) .res-reset { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Narrower landscape (4:3 → 16:10): give the stage more room */
@media (max-aspect-ratio: 16/10) and (min-aspect-ratio: 5/4) {
	.mcr { --u: min(1.08vw, 1.62vh); }
	.q-layout { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 16); gap: calc(var(--u) * 2.4); }
	.intro-title { width: calc(var(--u) * 44 * var(--fit)); }
}

/* Portrait & near-square: tablets and phones */
@media (max-aspect-ratio: 5/4) {
	.mcr { --u: min(2.15vw, 1.25vh); --pad-x: max(16px, calc(var(--u) * 3)); --pad-y: max(14px, calc(var(--u) * 2.2)); }
	.mcr-hud { grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 1.4); min-height: 0; }
	.mcr-hud-mid { display: none; }
	.mcr[data-screen="question"] .hud-coins,
	.mcr[data-screen="result"] .hud-coins { display: inline-flex; }
	.mcr[data-screen="result"] .hud-coins { visibility: hidden; }

	.s-intro { flex-direction: column-reverse; justify-content: center; gap: calc(var(--u) * 1); text-align: center; }
	.intro-copy { flex: 0 0 auto; align-items: center; gap: calc(var(--u) * 2.2); }
	.intro-title { width: min(calc(var(--u) * 58 * var(--fit)), 30vh * 1.372); margin-inline: auto; }
	.intro-wordmark { transform-origin: 50% 60%; }
	.intro-lede { font-size: max(17px, calc(var(--u) * 2.6 * var(--fit))); }
	.intro-kicker { font-size: max(14px, calc(var(--u) * 2)); }
	.intro-art { flex: 1 1 auto; align-self: stretch; min-height: 0; max-height: 34vh; overflow: clip; overflow-clip-margin: 4vh; }
	.coiny-hero { width: min(calc(var(--u) * 24), 21vh); margin-bottom: 8vh; }
	.intro-pile { height: 10vh; }
	.pile-coin { width: min(calc(var(--u) * 8), 8.5vh); height: min(calc(var(--u) * 8), 8.5vh); }
	.intro-pile { bottom: 4%; width: calc(var(--u) * 32); }
	.s-intro .btn-xl { font-size: max(17px, calc(var(--u) * 2.8)); }

	.screen-title { font-size: max(24px, calc(var(--u) * 5.4 * var(--fit))); }
	.screen-sub { font-size: max(15px, calc(var(--u) * 2.2)); }
	.s-email { align-items: flex-start; }
	.email-wrap { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 2.4 * var(--fit)); margin: auto 0; }
	.email-buddy { flex-direction: row; justify-content: center; gap: calc(var(--u) * 2); }
	.coiny-email { width: min(calc(var(--u) * 15 * var(--fit)), 15vh); order: -1; }
	.buddy-bubble { font-size: max(14px, calc(var(--u) * 2.1)); }
	.buddy-bubble::after { left: calc(var(--u) * -.6); top: 50%; bottom: auto; transform: translateY(-50%) rotate(135deg); }
	.s-email .screen-title { font-size: max(22px, calc(var(--u) * 4.6 * var(--fit))); }
	.screen-sub { font-size: max(15px, calc(var(--u) * 2.1)); }
	.email-head { align-items: flex-start; }
	.screen-sub b { white-space: normal; overflow-wrap: break-word; }
	.email-field { flex-wrap: wrap; height: auto; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.4); row-gap: calc(var(--u) * .9); }
	.email-field input { flex: 1 1 0; height: calc(var(--u) * 5); text-align: left; font-size: max(20px, calc(var(--u) * 3.4 * var(--fit))); }
	.email-main .email-domain { order: 4; flex: 1 0 100%; max-width: 100%; text-align: center; font-size: max(14px, calc(var(--u) * 2.2 * var(--fit))); }
	.email-hint { font-size: max(14px, calc(var(--u) * 2)); }
	.key { height: calc(var(--u) * 6.6 * var(--fit)); font-size: max(16px, calc(var(--u) * 2.6)); }
	.key-wide { font-size: max(12px, calc(var(--u) * 1.8)); }
	.key-go { font-size: max(14px, calc(var(--u) * 2.2)); }
	.mcr.kb-open .s-email .email-buddy, .mcr.kb-open .s-email .screen-sub { display: none; }

	.played-wrap { flex-direction: column; text-align: center; gap: calc(var(--u) * 2); }
	.played-wrap > div { align-items: center; }
	.coiny-played { width: calc(var(--u) * 20); }

	.q-layout { grid-template-columns: minmax(0, 1fr); }
	.q-rail { display: none; }
	.q-stage { gap: calc(var(--u) * 2.8 * var(--fit)); }
	.q-text { font-size: max(22px, calc(var(--u) * 4.4 * var(--fit))); }
	.q-hint { font-size: max(13px, calc(var(--u) * 1.8 * var(--fit))); }
	.q-body { flex-direction: column; }
	.q-media { flex: 0 1 auto; max-height: 26%; justify-content: center; }
	.q-answers,
	.q-answers[data-count="2"],
	.q-answers[data-count="3"],
	.q-answers[data-count="5"],
	.q-answers[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(calc(var(--u) * 12 * var(--fit)), calc(var(--u) * 17)); max-height: none; gap: calc(var(--u) * 2.4 * var(--fit)); align-content: start; }
	.q-answers[data-count="3"] .ans:last-child,
	.q-answers[data-count="5"] .ans:last-child { grid-column: 1 / -1; }
	.ans { padding: calc(var(--u) * 1.8 * var(--fit)) calc(var(--u) * 2.2); gap: calc(var(--u) * 1.8); }
	.ans-key { width: calc(var(--u) * 5.6 * var(--fit)); height: calc(var(--u) * 5.6 * var(--fit)); font-size: max(15px, calc(var(--u) * 2.6 * var(--fit))); }
	.ans { container-type: inline-size; }
	.ans-text { font-size: max(15px, min(calc(var(--u) * 3 * var(--fit)), 9.5cqi)); }

	.fb-big { font-size: max(26px, min(calc(var(--u) * 6), 8vw)); }
	.fb-sub { font-size: max(16px, min(calc(var(--u) * 3), 4.4vw)); }
	.fb-card { max-width: 86%; }

	.mission-list { font-size: max(17px, calc(var(--u) * 3.4)); }
	.gameon-title { font-size: max(34px, calc(var(--u) * 10)); }
	.countdown span { font-size: calc(var(--u) * 34); }

	.sus-title { font-size: max(32px, calc(var(--u) * 9)); }
	.sus-row li { width: max(36px, calc(var(--u) * 9)); height: max(36px, calc(var(--u) * 9)); }

	.s-result { overflow-y: auto; }
	.res-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "score" "card" "actions"; align-content: center; gap: calc(var(--u) * 2.2 * var(--fit)); height: auto; min-height: 100%; }
	/* Portrait result: drop the decorative step row, keep everything that matters */
	.s-result .redeem-flow { display: none; }
	.res-tier { margin-top: calc(var(--u) * 1.2 * var(--fit)); }
	.res-big { margin: 0; }
	.res-n { font-size: calc(var(--u) * 20 * var(--fit)); }
	.res-coin { width: calc(var(--u) * 14 * var(--fit)); height: calc(var(--u) * 14 * var(--fit)); }
	.res-tier { font-size: max(24px, calc(var(--u) * 6 * var(--fit))); }
	.res-line { font-size: max(16px, calc(var(--u) * 2.6)); }
	.coiny-result { display: none; }
	.redeem-h { font-size: max(17px, calc(var(--u) * 3 * var(--fit))); }
	.redeem-step p { font-size: max(15px, calc(var(--u) * 2.1 * var(--fit))); }
	.redeem-flow em { font-size: max(11px, calc(var(--u) * 1.5)); }
	.ticket-v { font-size: max(14px, calc(var(--u) * 2.4 * var(--fit))); }
	.ticket-cell:first-child .ticket-v { font-size: max(13px, min(calc(var(--u) * 2.2 * var(--fit)), 4.1vw)); }
	.ticket-k { font-size: max(10px, calc(var(--u) * 1.3)); }
	.res-actions .btn { width: 100%; }

}

/* Phones: one answer per row */
@media (max-aspect-ratio: 5/4) and (max-width: 599px) {
	.mcr { --u: min(2.6vw, 1.22vh); }
	.mcr-logo-img { height: 30px; }
	.q-answers,
	.q-answers[data-count="2"],
	.q-answers[data-count="3"],
	.q-answers[data-count="5"],
	.q-answers[data-count="6"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(max(58px, calc(var(--u) * 9 * var(--fit))), auto); align-content: start; gap: max(12px, calc(var(--u) * 1.8 * var(--fit))); }
	.q-answers[data-count="3"] .ans:last-child,
	.q-answers[data-count="5"] .ans:last-child { grid-column: auto; }
	.ans { padding: max(10px, calc(var(--u) * 1.4 * var(--fit))) max(14px, calc(var(--u) * 2)); border-radius: max(14px, calc(var(--u) * 2)); }
	.ans-key { width: max(36px, calc(var(--u) * 5 * var(--fit))); height: max(36px, calc(var(--u) * 5 * var(--fit))); }
	.ans-text { font-size: max(16px, min(calc(var(--u) * 2.9 * var(--fit)), 8cqi)); }
	.q-text { font-size: max(22px, calc(var(--u) * 4.6 * var(--fit))); }
	.intro-art { max-height: 34vh; }
	.orbit-1, .orbit-2 { display: none; }
	.hud-coins-l { display: none; }
	.res-n { font-size: calc(var(--u) * 18 * var(--fit)); }
	.redeem-flow li span { font-size: 20px; }
	.res-redeem { padding: 20px 18px; border-radius: 22px; }

				
	/* Long single words must never run off a narrow screen */
	.intro-title { width: min(calc(var(--u) * 58 * var(--fit)), 84vw, 26vh * 1.372); }
	.intro-art { max-height: 30vh; }
	.coiny-hero { width: min(calc(var(--u) * 22), 20vh); margin-bottom: 7vh; }
	.intro-pile { width: min(calc(var(--u) * 30), 74vw); height: 9vh; }
	.pile-coin { width: min(calc(var(--u) * 7), 8vh); height: min(calc(var(--u) * 7), 8vh); }
	.s-intro .btn-xl { white-space: normal; text-align: center; padding: .8em 1.1em .75em; font-size: max(15px, min(calc(var(--u) * 2.6), 4.3vw)); }
	.intro-lede { font-size: max(16px, min(calc(var(--u) * 2.4), 4.6vw)); }
	.screen-title { font-size: max(22px, min(calc(var(--u) * 4.4 * var(--fit)), 8.4vw)); }
	.s-email .screen-title { font-size: max(21px, min(calc(var(--u) * 4.4 * var(--fit)), 6.6vw)); }
	.email-field input { font-size: max(20px, 5.6vw); }
	.email-main .email-domain { font-size: max(13px, 3.7vw); }
	.coiny-email { width: min(26vw, 13vh); }
	.granted-title { font-size: max(24px, min(calc(var(--u) * 6), 10vw)); }
	.granted-go { font-size: max(26px, min(calc(var(--u) * 8), 13vw)); }
	.denied-title, .closed-title { font-size: max(24px, min(calc(var(--u) * 7 * var(--fit)), 12.5vw)); }
	.denied-line, .closed-msg { font-size: max(17px, 5.4vw); }
	.played-title { font-size: max(24px, min(calc(var(--u) * 5.2 * var(--fit)), 9.5vw)); }
	.coiny-played { width: min(calc(var(--u) * 20), 22vh); }
	.gameon-title { font-size: max(28px, min(calc(var(--u) * 10), 12vw)); }
	.mission { padding: 18px 22px; }
	.mission-list { font-size: max(16px, min(calc(var(--u) * 3.4), 5.6vw)); }
	.countdown span { font-size: 40vw; }
	.sus-title { font-size: max(26px, min(calc(var(--u) * 9 * var(--fit)), 11vw)); }
	.sus-sub { font-size: max(16px, 5vw); text-align: center; }
	.sus-row { flex-wrap: nowrap; gap: 1.5vw; }
	.sus-row li { width: 11vw; height: 11vw; min-width: 0; min-height: 0; font-size: 5vw; }
	.sus-count { font-size: 18vw; }
	.sus-coin { width: 16vw; height: 16vw; }
	.fb-card { max-width: 88%; padding: 18px 20px; }
	.fb-big { font-size: max(26px, 10vw); }
	.fb-sub { font-size: max(16px, 5.4vw); }
	.coiny-result { display: none; }
	.res-coin { width: min(calc(var(--u) * 13 * var(--fit)), 22vw); height: min(calc(var(--u) * 13 * var(--fit)), 22vw); }
	.res-n { font-size: min(calc(var(--u) * 18 * var(--fit)), 34vw); }
	.res-tier { font-size: max(22px, min(calc(var(--u) * 6 * var(--fit)), 9vw)); }
	.redeem-flow em { font-size: 11px; }

	.res-earned, .res-unit { font-size: max(15px, 4.2vw); }
	.res-redeem { gap: 10px; padding: 18px 16px; }
	.redeem-h { font-size: max(16px, 4.6vw); }
	.redeem-step p { font-size: max(14px, 3.7vw); margin-top: .2em; }
	.ov-card { padding: 24px 20px; }
	.ov-card h2 { font-size: max(22px, 6.4vw); }
	.ov-card p { font-size: max(15px, 4vw); }
	.ov-next .ov-actions .btn { white-space: normal; }
}

/* Short landscape (phones held sideways, tiny windows) */
@media (min-aspect-ratio: 5/4) and (max-height: 520px) {
	.mcr { --pad-y: 10px; }
	.mcr-hud { min-height: 0; padding-top: 8px; }
	.q-rail { display: none; }
	.q-layout { grid-template-columns: minmax(0, 1fr); }
	.mcr[data-screen="question"] .hud-coins { display: inline-flex; }
	.hud-pips { display: none; }
	.ans { min-height: 48px; }
	.intro-art { display: none; }
	.coiny-result { display: none; }
	.email-wrap { grid-template-columns: minmax(0, 1fr); }
	.email-buddy { display: none; }
	.q-answers { max-height: none; }
}

/* Large touch screens get extra-generous targets */
@media (min-width: 2400px) {
	.ans { min-height: calc(var(--u) * 9.5); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.mcr *, .mcr *::before, .mcr *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.mcr-ambient { display: none; }
	.mcr-bg-art { transition: none; }
}