/* =============================================================================
   Nibble Verse — Variant D · "Cozy Bento"
   Variant C's bento layout, dressed in variant A's cozy palette: cream paper, ink brown,
   logo red, carrot and leaf. The playable uses the real Block Blast UI art.
   ========================================================================== */

:root {
	/* Colour — variant A's palette mapped onto variant C's token names */
	--sky-1: #FFDDB8;
	--sky-2: #FFF0DD;
	--sky-3: #FFF6E8;
	--bg: #FFF6E8;
	--tile: #FFFFFF;
	--ink: #3B2416;
	--ink-soft: #7A5642;
	--pink: #E8432E;
	--pink-ink: #C73621;
	--pink-soft: #FDE3D9;
	--grape: #FF8A3D;
	--grape-ink: #A84B12;
	--grape-btn: #D2381F;
	--grape-soft: #FCEBD3;
	--green: #6FAE4E;
	--green-face: #4E9A38;
	--green-edge: #356E25;
	--sunny: #FFC93C;
	--sunny-edge: #D99A12;
	--sky: #6FAE4E;
	--night-1: #3B2416;
	--night-2: #24160D;
	--dots: radial-gradient(rgba(59, 36, 22, .065) 1.2px, transparent 1.6px) 0 0 / 22px 22px;

	/* Shape + depth */
	--r-xl: 28px;
	--r-lg: 22px;
	--r-md: 16px;
	--r-pill: 999px;
	--sh-1: 0 1px 2px rgba(59, 36, 22, .06), 0 4px 14px rgba(59, 36, 22, .07);
	--sh-2: 0 2px 6px rgba(59, 36, 22, .06), 0 14px 34px rgba(59, 36, 22, .11);
	--sh-3: 0 6px 12px rgba(59, 36, 22, .08), 0 28px 64px rgba(59, 36, 22, .19);

	/* Motion */
	--spring: cubic-bezier(.34, 1.56, .64, 1);
	--ease: cubic-bezier(.22, .61, .36, 1);

	/* Type + layout */
	--font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
	--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--wrap: 1200px;
	--gutter: clamp(20px, 4vw, 40px);
	--header-h: 92px;
}
@media (max-width: 599px) {
	:root { --header-h: 80px; }
}

/* ----------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
	margin: 0;
	/* App feel: dragging the mouse or long-pressing never highlights the page. Form fields stay selectable. */
	-webkit-user-select: none;
	user-select: none;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input { font: inherit; color: inherit; }
input, textarea { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; -webkit-touch-callout: none; }
a { color: var(--grape-ink); text-underline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--grape-btn); outline-offset: 3px; }
::selection { background: var(--sunny); color: var(--ink); }

[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: fixed; left: 16px; top: -80px; z-index: 300;
	padding: 12px 18px; border-radius: 14px;
	background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
	transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ----------------------------------------------------------------------------- type */
.display {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.012em;
}

.section { position: relative; padding-block: clamp(76px, 10vw, 128px); }

.section-head {
	max-width: 780px;
	margin: 0 auto clamp(36px, 5vw, 56px);
	text-align: center;
}
.section-head--left { margin-inline: 0; text-align: left; }

.section-title {
	font-size: clamp(36px, 5vw, 58px);
	margin: 16px 0 14px;
	text-wrap: balance;
}
.section-title--light { color: #fff; }

.lead {
	font-size: clamp(17px, 1.5vw, 19.5px);
	color: var(--ink-soft);
	text-wrap: pretty;
}
.lead--light { color: rgba(255, 255, 255, .84); }

.hl { color: var(--pink-ink); }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--grape-ink);
	font: 800 12.5px/1.1 var(--font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: var(--sh-1);
}
.pill--pink { background: var(--pink-soft); color: #A3301F; box-shadow: none; }
.pill--sunny { background: var(--sunny); color: var(--ink); box-shadow: 0 3px 0 var(--sunny-edge); }

/* ----------------------------------------------------------------------------- buttons */
.btn {
	--face: #fff;
	--edge: #EAD2B4;
	--txt: var(--ink);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 13px 24px 11px;
	border: 0;
	border-radius: 16px;
	background: var(--face);
	color: var(--txt);
	font: 800 18px/1 var(--font-display);
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 5px 0 var(--edge), 0 12px 22px rgba(59, 36, 22, .14);
	transition: translate .22s var(--spring), box-shadow .22s var(--ease), filter .2s;
	-webkit-tap-highlight-color: transparent;
}
.btn::before {
	content: '';
	position: absolute;
	inset: 3px 10px auto;
	height: 34%;
	border-radius: 12px 12px 8px 8px;
	background: linear-gradient(rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.btn:hover { translate: 0 -2px; box-shadow: 0 7px 0 var(--edge), 0 16px 28px rgba(59, 36, 22, .18); }
.btn:active { translate: 0 4px; box-shadow: 0 1px 0 var(--edge), 0 4px 10px rgba(59, 36, 22, .14); }
.btn svg { width: 22px; height: 22px; flex: none; }

.btn--green { --face: var(--green-face); --edge: var(--green-edge); --txt: #fff; font-size: 20px; text-shadow: 0 2px 0 rgba(0, 70, 30, .35); }
.btn--sunny { --face: var(--sunny); --edge: var(--sunny-edge); --txt: var(--ink); }
.btn--grape { --face: var(--grape-btn); --edge: #A3301F; --txt: #fff; }
.btn--ghost { --face: #fff; --edge: #EAD2B4; --txt: var(--ink); }
.btn--lg { min-height: 60px; padding: 15px 30px 13px; font-size: 21px; border-radius: 18px; }
.btn--sm { min-height: 44px; padding: 11px 18px 9px; font-size: 16px; border-radius: 14px; box-shadow: 0 4px 0 var(--edge), 0 8px 16px rgba(59, 36, 22, .12); }
.btn--sm:hover { box-shadow: 0 6px 0 var(--edge), 0 12px 20px rgba(59, 36, 22, .16); }

.round-btn {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	box-shadow: 0 4px 0 #EAD2B4, var(--sh-1);
	transition: translate .2s var(--spring), box-shadow .2s;
}
.round-btn:hover { translate: 0 -2px; }
.round-btn:active { translate: 0 3px; box-shadow: 0 1px 0 #EAD2B4; }
.round-btn svg { width: 22px; height: 22px; }
.flip { rotate: 180deg; }

/* ----------------------------------------------------------------------------- header */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled {
	background: rgba(255, 249, 240, .86);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	backdrop-filter: blur(16px) saturate(1.5);
	box-shadow: 0 1px 0 rgba(59, 36, 22, .06), 0 10px 30px rgba(59, 36, 22, .08);
}
.header-inner { display: flex; align-items: center; gap: 14px; height: var(--header-h); }
.brand { flex: none; border-radius: 12px; }
.brand img { width: auto; height: 76px; transition: height .3s var(--ease); filter: drop-shadow(0 4px 8px rgba(59, 36, 22, .15)); }
.scrolled .brand img { height: 60px; }

.nav { margin-left: auto; }
.nav-list { display: flex; gap: 2px; }
.nav-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 15px;
	border-radius: var(--r-pill);
	color: var(--ink);
	font-weight: 700;
	font-size: 15.5px;
	text-decoration: none;
	transition: background-color .2s;
}
.nav-list a:hover { background: rgba(232, 67, 46, .14); }
.nav-toggle {
	display: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 14px;
	background: rgba(255, 255, 255, .85);
	box-shadow: var(--sh-1);
	cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 959px) {
	.nav-toggle { display: grid; }
	.nav-list {
		position: absolute;
		top: calc(var(--header-h) - 6px);
		right: var(--gutter);
		display: grid;
		gap: 2px;
		min-width: 220px;
		padding: 10px;
		border-radius: 22px;
		background: #fff;
		box-shadow: var(--sh-3);
		opacity: 0;
		visibility: hidden;
		translate: 0 -8px;
		transition: opacity .2s var(--ease), translate .3s var(--spring), visibility 0s linear .3s;
	}
	.nav-open .nav-list { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .2s var(--ease), translate .3s var(--spring); }
	.nav-list a { width: 100%; padding: 10px 16px; font-size: 17px; }
}
@media (max-width: 599px) {
	.header-cta { display: none; }
	.brand img { height: 62px; }
	.scrolled .brand img { height: 52px; }
}

/* ----------------------------------------------------------------------------- sky decor */
.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.cloud {
	--w: 200px;
	position: absolute;
	width: var(--w);
	height: calc(var(--w) * .3);
	border-radius: var(--r-pill);
	background: #fff;
	opacity: var(--o, .92);
	box-shadow: 0 14px 34px rgba(176, 110, 60, .14);
	animation: drift var(--d, 28s) ease-in-out infinite alternate;
}
.cloud::before,
.cloud::after { content: ''; position: absolute; border-radius: 50%; background: #fff; }
.cloud::before { width: 44%; height: 150%; left: 16%; bottom: 22%; }
.cloud::after { width: 32%; height: 110%; left: 50%; bottom: 28%; }

@keyframes drift { from { translate: 0 0; } to { translate: var(--dx, 46px) 0; } }

.spark {
	position: absolute;
	width: var(--s, 22px);
	height: var(--s, 22px);
	color: var(--c, #fff);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85));
	animation: twinkle var(--t, 2.8s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes twinkle {
	0%, 100% { transform: scale(.55) rotate(0deg); opacity: .45; }
	50% { transform: scale(1.08) rotate(25deg); opacity: 1; }
}

/* ----------------------------------------------------------------------------- hero */
.hero {
	position: relative;
	overflow: hidden;
	padding: calc(var(--header-h) + clamp(22px, 4vw, 48px)) 0 clamp(64px, 8vw, 104px);
	background: var(--dots), linear-gradient(180deg, var(--sky-1) 0%, #FFE4C4 30%, var(--sky-2) 64%, var(--sky-3) 100%);
}
.hero .cl-1 { --w: 260px; top: 16%; left: -70px; --d: 30s; }
.hero .cl-3 { --w: 230px; top: 9%; right: 4%; --d: 34s; --dx: -50px; }
.hero .cl-4 { --w: 320px; bottom: -36px; left: 6%; --o: .8; --d: 38s; }
.hero .cl-5 { --w: 250px; top: 46%; right: -90px; --o: .85; --d: 27s; --dx: -30px; }
.hero .sp-1 { top: 22%; left: 6%; --s: 26px; --t: 3.2s; }
.hero .sp-2 { top: 13%; left: 46%; --s: 18px; --t: 2.4s; --dl: -.8s; }
.hero .sp-3 { top: 70%; left: 3%; --s: 16px; --t: 2.9s; --dl: -1.4s; }
.hero .sp-4 { top: 20%; right: 9%; --s: 30px; --c: #FFE38A; --t: 3.6s; --dl: -.4s; }
.hero .sp-5 { top: 78%; right: 7%; --s: 20px; --t: 2.6s; --dl: -2s; }
.hero .sp-6 { top: 52%; left: 52%; --s: 14px; --c: #FFE38A; --t: 2.2s; --dl: -1s; }

.hero-grid { position: relative; display: grid; gap: 44px; align-items: center; }
.hero-copy { position: relative; z-index: 2; text-align: center; }

.pill--eyebrow { gap: 10px; padding: 9px 16px; font-size: 12px; }
.pill--eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--pink); }

.hero-title {
	font-size: clamp(52px, 7.6vw, 98px);
	margin: 20px 0 6px;
	color: var(--ink);
	text-shadow: 0 3px 0 #fff, 0 18px 40px rgba(176, 84, 40, .22);
}
.hero-title .hl {
	position: relative;
	display: inline-block;
	transform: rotate(-3deg);
	color: var(--pink-ink);
}
.hero-title .hl::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 2%;
	right: -2%;
	bottom: .1em;
	height: .2em;
	border-radius: var(--r-pill);
	background: var(--sunny);
	transform: rotate(2deg);
}

.hero-rotator {
	margin-bottom: 14px;
	font: 800 clamp(23px, 2.5vw, 32px)/1.25 var(--font-display);
	color: var(--ink);
}
.rot { position: relative; display: inline-block; isolation: isolate; color: var(--grape-ink); }
.rot::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: -3px;
	right: -3px;
	bottom: .16em;
	height: .34em;
	border-radius: 6px;
	background: rgba(255, 201, 60, .75);
}
.rot-word { display: inline-block; transition: transform .45s var(--spring), opacity .25s var(--ease); }
.rot-word.out { transform: translateY(-55%) rotate(-8deg); opacity: 0; }
.rot-word.in { transform: translateY(55%) rotate(8deg); opacity: 0; transition: none; }

.hero-sub {
	max-width: 540px;
	margin: 0 auto 28px;
	font-size: clamp(17px, 1.45vw, 19px);
	color: var(--ink-soft);
}

.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.hero-ctas .nv-badges { justify-content: center; }
.btn--trailer { padding-left: 12px; }
.play-dot {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pink-ink);
	color: #fff;
}
.play-dot svg { width: 14px; height: 14px; margin-left: 2px; }
.btn-meta { font: 700 13.5px/1 var(--font-body); color: var(--ink-soft); }

.facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 0;
	margin-top: 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-soft);
}
.facts li { display: inline-flex; align-items: baseline; gap: 5px; }
.facts li + li::before { content: ''; align-self: center; width: 5px; height: 5px; margin: 0 14px; border-radius: 50%; background: var(--grape); }
.facts b { font: 800 19px/1 var(--font-display); color: var(--ink); }

.qr-card { display: none; }
.qr { width: 80px; height: 80px; padding: 6px; border-radius: 12px; background: #fff; color: var(--ink); }
.qr svg { width: 100%; height: 100%; }

.hero-visual { position: relative; display: flex; justify-content: center; }
.phones {
	--rx: 0deg;
	--ry: 0deg;
	position: relative;
	width: 100%;
	max-width: 580px;
	height: clamp(450px, 56vw, 650px);
	transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform .7s var(--ease);
}

/* Phone frame (shared) */
.phone {
	--pw: 200px;
	position: relative;
	display: block;
	width: var(--pw);
	margin: 0;
	padding: calc(var(--pw) * .04);
	border: 0;
	border-radius: calc(var(--pw) * .15);
	background: linear-gradient(155deg, #6B4630 0%, #2E1C12 60%);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 30px 60px rgba(59, 36, 22, .28), 0 8px 18px rgba(59, 36, 22, .16);
}
.phone > img,
.phone > video {
	width: 100%;
	aspect-ratio: 1260 / 2736;
	object-fit: cover;
	border-radius: calc(var(--pw) * .115);
	background: #2E1C12;
}
.phone::before {
	content: '';
	position: absolute;
	z-index: 2;
	top: calc(var(--pw) * .07);
	left: 50%;
	width: 28%;
	height: calc(var(--pw) * .055);
	border-radius: var(--r-pill);
	background: #1E120B;
	translate: -50% 0;
}

.phones .phone { position: absolute; top: 0; left: 50%; }
.phone--center { --pw: clamp(196px, 19.5vw, 272px); z-index: 3; translate: -50% 0; animation: float 6.5s ease-in-out infinite; }
.phone--left { --pw: clamp(148px, 16vw, 226px); z-index: 1; top: 10% !important; translate: -114% 0; rotate: -9deg; animation: float 7.5s ease-in-out -2.4s infinite; }
.phone--right { --pw: clamp(148px, 16vw, 226px); z-index: 2; top: 10% !important; translate: 14% 0; rotate: 9deg; animation: float 7s ease-in-out -4.1s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero-mascot {
	position: absolute;
	z-index: 4;
	left: 50%;
	bottom: 2%;
	width: clamp(84px, 9vw, 122px);
	translate: -205% 0;
	rotate: -6deg;
	filter: drop-shadow(0 10px 16px rgba(59, 36, 22, .25));
	animation: peek 5s ease-in-out infinite;
}
@keyframes peek { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(3deg); } }

.hero-sticker {
	position: absolute;
	z-index: 5;
	right: 2%;
	top: 1%;
	padding: 12px 16px 10px;
	border-radius: 18px;
	background: #fff;
	color: var(--pink-ink);
	font: 800 clamp(16px, 1.6vw, 20px)/1.05 var(--font-display);
	text-align: center;
	box-shadow: var(--sh-2);
	rotate: 7deg;
}
.hero-sticker::after {
	content: '';
	position: absolute;
	left: 24px;
	bottom: -8px;
	width: 18px;
	height: 18px;
	background: #fff;
	rotate: 45deg;
	border-radius: 3px;
}

@media (min-width: 1100px) {
	.hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 24px; }
	.hero-copy { text-align: left; }
	.hero-sub { margin-left: 0; }
	.hero-ctas,
	.hero-ctas .nv-badges,
	.facts { justify-content: flex-start; }
}
@media (min-width: 1100px) and (hover: hover) {
	.qr-card--hero {
		display: inline-flex;
		align-items: center;
		gap: 14px;
		max-width: 360px;
		margin-top: 24px;
		padding: 10px 18px 10px 10px;
		border-radius: 20px;
		background: rgba(255, 255, 255, .7);
		box-shadow: var(--sh-1);
		font-size: 14px;
		line-height: 1.45;
		color: var(--ink-soft);
		text-align: left;
	}
	.qr-card--hero b { display: block; color: var(--ink); font-size: 15px; }
}
@media (max-width: 419px) {
	.facts li:last-child { display: none; }
}
@media (max-width: 599px) {
	.hero-title { margin-top: 16px; }
	.facts { font-size: 14px; }
	.facts li + li::before { margin: 0 10px; }
	.hero-sticker { right: 0; top: 0; }
	.phone--left { translate: -108% 0; }
	.phone--right { translate: 8% 0; }
}

/* ----------------------------------------------------------------------------- bento */
.bento-section { background: var(--dots), var(--bg); }

.bento { display: grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: minmax(0, 1fr); }

.tile {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(22px, 2.4vw, 32px);
	border-radius: var(--r-xl);
	background: var(--tile);
	box-shadow: var(--sh-2);
	transition: translate .45s var(--spring), box-shadow .35s var(--ease);
}
.tile:not(.tile--cookie):hover { translate: 0 -5px; box-shadow: var(--sh-3); }
.tile p { font-size: 16px; color: var(--ink-soft); }
.tile-title { font-size: clamp(25px, 2.2vw, 30px); margin-bottom: 8px; color: var(--ink); }
.tile-title--xl { font-size: clamp(34px, 3.5vw, 48px); margin: 16px 0 12px; }
.tile-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-weight: 800;
	color: var(--grape-ink);
	text-decoration: none;
}
.tile-link svg { width: 18px; height: 18px; transition: translate .25s var(--spring); }
.tile-link:hover svg,
.tile:hover .tile-link svg { translate: 4px 0; }
.tile-link--light { color: #fff; margin: 0 0 0 6px; }

/* Cookie tile */
.tile--cookie {
	display: grid;
	gap: 26px;
	background:
		radial-gradient(110% 90% at 92% 10%, #FFF4D1 0%, rgba(255, 244, 209, 0) 55%),
		linear-gradient(160deg, #FFFFFF 0%, #FFF1DE 100%);
}
.hint {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 400px;
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--grape-soft);
	text-align: left;
	font-size: 14.5px !important;
	line-height: 1.5;
}
.hint svg { flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--grape-ink); }
.hint b { color: var(--ink); }

.cookie-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cookie-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 400px;
	padding: 18px 20px 24px;
	border-radius: 26px;
	background: linear-gradient(180deg, #A99BF5 0%, #8C7BEA 100%);
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .22), 0 18px 40px rgba(176, 84, 40, .32);
	color: #fff;
	text-align: center;
}
.cookie-label {
	padding: 6px 16px 4px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .95);
	color: var(--ink);
	font: 800 18px/1.1 var(--font-display);
	box-shadow: 0 3px 0 rgba(59, 36, 22, .18);
}
.cookie-art { position: relative; display: grid; place-items: center; width: 100%; max-width: 280px; height: 190px; }
.cookie-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(59, 36, 22, .35)); }
.cookie-art.wobble { animation: wobble .5s var(--ease); }
@keyframes wobble {
	0% { rotate: 0deg; scale: 1; }
	20% { rotate: -10deg; scale: 1.07; }
	40% { rotate: 9deg; }
	60% { rotate: -6deg; }
	80% { rotate: 3deg; }
	100% { rotate: 0deg; scale: 1; }
}
.fx-layer { position: absolute; inset: 0; pointer-events: none; }
.burst {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--bs, 18px);
	height: var(--bs, 18px);
	color: var(--bc, #FFE38A);
	animation: burst .9s var(--ease) forwards;
}
@keyframes burst {
	from { transform: translate(-50%, -50%) scale(.2); opacity: 1; }
	to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(160deg); opacity: 0; }
}
.fortune {
	width: 100%;
	padding: 14px 16px 12px;
	border-radius: 14px;
	background: #FFFDF6;
	color: var(--ink);
	box-shadow: 0 10px 22px rgba(59, 36, 22, .22);
	transform-origin: 50% 0;
	animation: unfurl .55s var(--spring);
}
.fortune[hidden] { display: none; }
.fortune-text { font: 700 16px/1.4 var(--font-body); }
.reward-chip {
	display: inline-flex;
	margin-top: 10px;
	padding: 6px 12px 4px;
	border-radius: var(--r-pill);
	background: var(--sunny);
	color: var(--ink);
	font: 800 15px/1.1 var(--font-display);
	box-shadow: 0 3px 0 var(--sunny-edge);
}
@keyframes unfurl { from { opacity: 0; transform: scaleY(.3) translateY(-12px); } to { opacity: 1; transform: none; } }

.shake-dots { display: flex; gap: 10px; }
.shake-dots i {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .3);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18);
	transition: background-color .25s, scale .35s var(--spring);
}
.shake-dots i.on { background: var(--sunny); scale: 1.25; box-shadow: 0 0 12px rgba(255, 201, 60, .8); }
.tile--cookie.cracked .shake-dots { display: none; }
.shake-btn { min-width: 210px; }
.shake-btn.nudge { animation: nudge .45s var(--ease); }
@keyframes nudge { 30% { rotate: -4deg; } 60% { rotate: 4deg; } }

/* Strip tile */
.tile--strip {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 24px;
	background: linear-gradient(135deg, #FFFFFF 0%, #FCEBD3 100%);
}
.marquee {
	margin-inline: calc(-1 * clamp(22px, 2.4vw, 32px));
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; padding: 6px 0 10px; animation: marquee 80s linear infinite; }
.marquee-track img {
	width: 100px;
	height: 125px;
	margin-right: 12px;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 6px 14px rgba(59, 36, 22, .14);
}
.marquee-track img:nth-child(odd) { translate: 0 6px; }
.tile--strip:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Zero tile */
.tile--zero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(160deg, #FDE6DC 0%, #FAD2C2 100%);
}
.zero-row { display: flex; align-items: baseline; gap: 10px; }
.zero-num { font: 800 clamp(70px, 6.6vw, 92px)/.86 var(--font-display); color: var(--pink-ink); text-shadow: 0 4px 0 #fff; }
.zero-label { font: 800 26px/1 var(--font-display); color: var(--ink); }
.tile--zero .tile-note { margin-top: 12px; font-size: 14.5px; }

/* Guest tile */
.tile--guest { background: linear-gradient(160deg, #EEF5E4 0%, #DCEBC9 100%); }
.tile .guest-pass {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 10px 16px 8px 12px;
	border-radius: 14px;
	background: var(--sunny);
	color: var(--ink);
	font: 800 16px/1 var(--font-display);
	box-shadow: 0 4px 0 var(--sunny-edge), 0 10px 18px rgba(59, 36, 22, .12);
	rotate: -3deg;
	transition: rotate .4s var(--spring);
}
.tile--guest:hover .guest-pass { rotate: 2deg; }
.guest-pass svg { width: 20px; height: 20px; }
.tile--guest p { font-size: 15px; }

/* Media tiles */
.tile--media {
	display: flex;
	align-items: flex-end;
	min-height: 440px;
	padding: 0;
	color: #fff;
	text-decoration: none;
	background: var(--night-2);
}
.tile-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale .9s var(--ease);
}
.tile--media:hover .tile-media { scale: 1.05; }
.tile--friends .tile-media { object-position: 50% 28%; }
.tile--community .tile-media { object-position: 50% 32%; }
.tile-overlay {
	width: 100%;
	padding: 96px 22px 22px;
	background: linear-gradient(180deg, rgba(46, 28, 18, 0) 0%, rgba(46, 28, 18, .74) 42%, rgba(46, 28, 18, .94) 100%);
}
.tile-overlay .tile-title { color: #fff; margin-bottom: 6px; }
.tile-overlay p { font-size: 15px; color: rgba(255, 255, 255, .9); }
.tile--community:focus-visible { outline-offset: 4px; }

@media (min-width: 700px) {
	.bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"cookie cookie"
			"strip strip"
			"zero guest"
			"friends seamless"
			"multi community";
	}
	.tile--cookie { grid-area: cookie; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
	.tile--strip { grid-area: strip; }
	.tile--zero { grid-area: zero; }
	.tile--guest { grid-area: guest; }
	.tile--friends { grid-area: friends; }
	.tile--seamless { grid-area: seamless; }
	.tile--multi { grid-area: multi; }
	.tile--community { grid-area: community; }
}
@media (min-width: 1100px) {
	.bento {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-areas:
			"cookie cookie strip strip"
			"cookie cookie zero guest"
			"friends seamless multi community";
	}
	.tile--media { min-height: 470px; }
	.tile--cookie { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 22px; text-align: center; }
	.tile--cookie .tile-title--xl { font-size: 42px; margin: 14px 0 10px; }
	.tile--cookie .cookie-copy p { max-width: 480px; margin-inline: auto; }
}

/* ----------------------------------------------------------------------------- playable demo */
.play {
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(70% 55% at 85% 0%, rgba(255, 201, 60, .18), transparent 62%),
		radial-gradient(60% 55% at 0% 100%, rgba(232, 67, 46, .2), transparent 60%),
		linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 100%);
}
.stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.play .st-1 { top: 12%; left: 6%; --s: 20px; }
.play .st-2 { top: 24%; right: 8%; --s: 14px; --c: #FFE38A; --dl: -1s; }
.play .st-3 { bottom: 12%; left: 42%; --s: 16px; --dl: -2s; }
.play .st-4 { top: 60%; left: 3%; --s: 12px; --c: #FFE38A; --dl: -.5s; }
.play .st-5 { bottom: 20%; right: 4%; --s: 24px; --dl: -1.6s; }

.play-grid {
	position: relative;
	display: grid;
	gap: 34px;
	align-items: center;
	grid-template-areas: "copy" "bp" "extra";
}
.play-copy { grid-area: copy; }
.play-extra { grid-area: extra; }
.bb { grid-area: bp; }
.play-copy .section-title { margin-top: 18px; }
.play-tips { display: grid; gap: 10px; }
.play-tips li { position: relative; padding-left: 28px; font-size: 15.5px; color: rgba(255, 255, 255, .85); }
.play-tips li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: .5em;
	width: 11px;
	height: 11px;
	border-radius: 3px;
	background: var(--sunny);
	rotate: 45deg;
}
.play-tips b { color: #fff; }
.play-more {
	margin-top: 22px;
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .07);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
	font-size: 15px;
	color: rgba(255, 255, 255, .85);
}
.skip-demo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 14px;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	opacity: .85;
}
.skip-demo:hover { opacity: 1; text-decoration: underline; }
.skip-demo svg { width: 18px; height: 18px; }

@media (min-width: 1000px) {
	/* The phone is taller than the copy: the 1fr rows above and below centre the copy beside it. */
	.play-grid {
		grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas: ". bp" "copy bp" "extra bp" ". bp";
		column-gap: 72px;
		row-gap: 26px;
	}
	.play-copy { align-self: end; }
	.play-extra { align-self: start; }
}
@media (max-width: 999px) {
	.play-copy,
	.play-extra { max-width: 560px; margin-inline: auto; text-align: center; }
	.play-tips { justify-items: center; }
	.play-tips li { text-align: left; }
}
@media (pointer: coarse) {
	.kbd-tip { display: none; }
}

/* Block Blast UI — the game's own art (client/res/blockblast, theme 5 "brown"), basic flavour */
.bb {
	--bb-cream: #E8E3C6;
	--bb-gold: #FFF380;
	--bb-ink: #6B5A4B;
	position: relative;
	width: 100%;
	max-width: 430px;
	margin-inline: auto;
}
.bb-phone {
	padding: 10px;
	border-radius: 42px;
	background: linear-gradient(155deg, #6B4630 0%, #2E1C12 62%);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), 0 34px 80px rgba(10, 5, 2, .5), 0 10px 22px rgba(10, 5, 2, .3);
}
.bb-screen {
	position: relative;
	overflow: hidden;
	padding: 12px clamp(12px, 3.6vw, 18px) 14px;
	border-radius: 33px;
	background: #6C5040 url(assets/blockblast/bg.webp) center / cover;
	color: var(--bb-cream);
	font-family: 'Balsamiq Sans', var(--font-display);
	-webkit-user-select: none;
	user-select: none;
}
.bb-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.bb-best {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 clamp(22px, 6vw, 28px)/1 'Balsamiq Sans', var(--font-display);
	color: var(--bb-gold);
	text-shadow: 0 3px 0 rgba(0, 0, 0, .2);
	font-variant-numeric: tabular-nums;
}
.bb-best img { width: clamp(30px, 8vw, 36px); height: auto; }
.bb-gear {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 6px;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: rotate .5s var(--spring);
}
.bb-gear:hover { rotate: 45deg; }
.bb-gear:focus-visible { outline: 3px solid var(--bb-gold); outline-offset: 0; }
.bb-gear img { width: 100%; height: auto; }
.bb-score {
	margin: 0 0 10px;
	text-align: center;
	font: 700 clamp(46px, 13vw, 62px)/1.05 'Balsamiq Sans', var(--font-display);
	color: var(--bb-cream);
	text-shadow: 0 3px 0 rgba(0, 0, 0, .2);
	font-variant-numeric: tabular-nums;
}
#bp-score,
#bp-best { display: inline-block; }
#bp-score.bump,
#bp-best.bump { animation: bump .45s var(--spring); }
@keyframes bump { 40% { scale: 1.25; } }

.bb-board-wrap { position: relative; }
.bb-board {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	aspect-ratio: 1;
	padding: .6%;
	border-radius: 12px;
	background: url(assets/blockblast/board.webp) center / 100% 100% no-repeat;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
	outline: none;
}
.bb-board:focus-visible { box-shadow: 0 0 0 3px var(--bb-gold), 0 8px 18px rgba(0, 0, 0, .28); }
.bb-board.selecting { cursor: crosshair; }
.bp-cell { position: relative; aspect-ratio: 1; }

/* Block sprites carry a ~5.6% transparent margin: at 112.5% the visible square lands exactly on the cell. */
.g1 { --blk: url(assets/blockblast/block-1.webp); }
.g2 { --blk: url(assets/blockblast/block-2.webp); }
.g3 { --blk: url(assets/blockblast/block-3.webp); }
.g4 { --blk: url(assets/blockblast/block-4.webp); }
.g5 { --blk: url(assets/blockblast/block-5.webp); }
.g6 { --blk: url(assets/blockblast/block-6.webp); }
.g7 { --blk: url(assets/blockblast/block-7.webp); }
.g8 { --blk: url(assets/blockblast/block-8.webp); }
.gem,
.bp-cell.filled,
.bp-cell.ghost { background: var(--blk) center / 112.5% 112.5% no-repeat; }
.bp-cell.ghost { opacity: .5; }
.bp-cell.hint { animation: hintGlow .8s ease-in-out infinite alternate; }
@keyframes hintGlow { to { filter: brightness(1.2) drop-shadow(0 0 5px rgba(255, 243, 128, .9)); } }
.bp-cell.bad { border-radius: 14%; background: rgba(255, 82, 60, .22); box-shadow: inset 0 0 0 2px rgba(255, 140, 120, .85); }
.bp-cell.land { animation: land .32s var(--spring); }
@keyframes land { from { scale: .72; } to { scale: 1; } }

/* Effects: popped blocks, "+N", combo, new best */
.bp-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.bp-pop { position: absolute; background: var(--blk) center / 112.5% 112.5% no-repeat; animation: pop .55s var(--ease) forwards; }
@keyframes pop {
	0% { transform: scale(1); opacity: 1; }
	35% { transform: scale(1.18); opacity: 1; filter: brightness(1.8); }
	100% { transform: scale(.1) rotate(35deg); opacity: 0; }
}
.bb-plus {
	position: absolute;
	display: flex;
	width: max-content;
	align-items: center;
	height: clamp(34px, 9vw, 46px);
	translate: -50% -50%;
	filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25));
	animation: plusUp 1.3s var(--ease) forwards;
}
.bb-plus img { flex: none; width: auto; height: 100%; margin-inline: -2px; }
.bb-plus img:first-child { height: 62%; margin-right: 2px; }
@keyframes plusUp {
	0% { transform: translateY(8px) scale(.5); opacity: 0; }
	18% { transform: translateY(0) scale(1.1); opacity: 1; }
	70% { transform: translateY(-14px) scale(1); opacity: 1; }
	100% { transform: translateY(-44px) scale(1); opacity: 0; }
}
.bb-combo {
	position: absolute;
	left: 50%;
	top: 40%;
	isolation: isolate;
	display: flex;
	width: max-content;
	align-items: center;
	gap: 4px;
	translate: -50% -50%;
	animation: comboIn 1.5s var(--ease) forwards;
}
.bb-combo .bb-burst {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: 300px;
	max-width: none;
	translate: -50% -50%;
	opacity: .9;
	animation: burstSpin 1.5s linear forwards;
}
.bb-combo-word { flex: none; width: auto; height: clamp(34px, 9vw, 44px); }
.bb-combo--blue .bb-combo-word { height: clamp(40px, 10.5vw, 52px); }
.bb-combo-num { display: flex; height: clamp(40px, 11vw, 54px); }
.bb-combo-num img { flex: none; width: auto; height: 100%; }
@keyframes comboIn {
	0% { transform: scale(.3); opacity: 0; }
	16% { transform: scale(1.15); opacity: 1; }
	26% { transform: scale(1); }
	78% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.05) translateY(-20px); opacity: 0; }
}
@keyframes burstSpin { from { rotate: 0deg; scale: .6; } to { rotate: 40deg; scale: 1.1; } }
.bb-newbest {
	position: absolute;
	left: 50%;
	top: 10%;
	width: 84%;
	translate: -50% 0;
	filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25));
	animation: newBest 2.2s var(--ease) forwards;
}
.bb-newbest img { width: 100%; height: auto; }
@keyframes newBest {
	0% { transform: translateY(-20px) scale(.6); opacity: 0; }
	14% { transform: translateY(0) scale(1.08); opacity: 1; }
	24% { transform: scale(1); }
	82% { opacity: 1; }
	100% { transform: translateY(-12px); opacity: 0; }
}

/* Tray: pieces sit at roughly half size, with the game's drop shadow */
.bp-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.bp-piece {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(92px, 25vw, 116px);
	padding: 6px;
	border: 0;
	border-radius: 18px;
	background: transparent;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s, box-shadow .2s, scale .3s var(--spring);
}
.bp-piece:hover:not(:disabled) { background: rgba(255, 255, 255, .07); }
.bp-piece:active:not(:disabled) { cursor: grabbing; }
.bp-piece:focus-visible { outline: 3px solid var(--bb-gold); outline-offset: -2px; }
.bp-piece.selected { background: rgba(255, 243, 128, .12); box-shadow: inset 0 0 0 3px var(--bb-gold); scale: 1.03; }
.bp-piece.dragging .bp-mini { opacity: .2; }
.bp-piece.nofit .bp-mini { opacity: .38; filter: grayscale(.85) drop-shadow(2px 4px 0 rgba(20, 10, 4, .3)); }
.bp-piece:disabled { cursor: default; }
.bp-piece.fresh .bp-mini { animation: trayIn .45s var(--spring) both; animation-delay: var(--d, 0ms); }
@keyframes trayIn { from { opacity: 0; transform: translateY(16px) scale(.6); } }
.bp-mini {
	--m: clamp(16px, 4.6vw, 23px);
	display: grid;
	grid-template-columns: repeat(var(--w), var(--m));
	grid-auto-rows: var(--m);
	pointer-events: none;
	filter: drop-shadow(2px 4px 0 rgba(20, 10, 4, .32));
}

/* Drag ghost (appended to <body>) */
.bp-ghost { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; will-change: transform; filter: drop-shadow(4px 9px 0 rgba(20, 10, 4, .3)); }
.bp-ghost i { position: absolute; }
.bp-ghost.back { transition: transform .26s var(--ease), opacity .26s var(--ease); opacity: 0; }
body.bp-dragging, body.bp-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* Tutorial hand — the fingertip sits at the top centre of the art */
.bb-hand {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
	width: 56px;
	height: auto;
	margin: -4px 0 0 -26px;
	pointer-events: none;
	opacity: 0;
	translate: var(--x0, 0) var(--y0, 0);
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35));
}
.bb-hand.go { animation: handMove 2.6s var(--ease) .5s infinite; }
@keyframes handMove {
	0% { translate: var(--x0) var(--y0); opacity: 0; scale: 1; }
	10% { translate: var(--x0) var(--y0); opacity: 1; scale: .88; }
	58% { translate: var(--x1) var(--y1); opacity: 1; scale: .88; }
	70% { translate: var(--x1) var(--y1); opacity: 1; scale: 1; }
	86%, 100% { translate: var(--x1) var(--y1); opacity: 0; scale: 1; }
}

/* Settings — the game's own panel, toggle and buttons */
.bb-settings {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(20, 10, 4, .45);
	animation: fadeIn .25s var(--ease);
}
.bb-settings[hidden] { display: none; }
.bb-settings-card {
	position: relative;
	width: min(100%, 290px);
	padding: 24px 22px 26px;
	background: url(assets/blockblast/settings-board.webp) center / 100% 100% no-repeat;
	color: var(--bb-ink);
	text-align: center;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35));
	animation: popIn .4s var(--spring);
}
.bb-settings-title { margin-bottom: 18px; font: 700 26px/1.1 'Balsamiq Sans', var(--font-display); color: var(--bb-ink); }
.bb-close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 9px;
	border: 0;
	background: none;
	cursor: pointer;
}
.bb-close img { width: 100%; height: auto; }
.bb-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 4px;
	font: 700 20px/1 'Balsamiq Sans', var(--font-display);
	color: var(--bb-ink);
	text-align: left;
}
.bb-row img { width: 36px; height: auto; }
.bb-row span { flex: 1; }
.bb-toggle {
	position: relative;
	flex: none;
	width: 76px;
	height: 44px;
	padding: 0;
	border: 0;
	background: url(assets/blockblast/toggle-off.webp) center / 100% 100% no-repeat;
	cursor: pointer;
}
.bb-toggle[aria-checked="true"] { background-image: url(assets/blockblast/toggle-on.webp); }
.bb-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 40px;
	height: 40px;
	background: url(assets/blockblast/toggle-knob.webp) center / contain no-repeat;
	transition: translate .3s var(--spring);
}
.bb-toggle[aria-checked="true"] .bb-knob { translate: 32px 0; }
.bb-toggle:focus-visible,
.bb-close:focus-visible,
.bb-btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.bb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 54px;
	padding: 8px 28px 13px;
	border: 0;
	background: center / 100% 100% no-repeat;
	font: 700 21px/1 'Balsamiq Sans', var(--font-display);
	cursor: pointer;
	transition: translate .2s var(--spring), filter .2s;
}
.bb-btn:hover { translate: 0 -2px; filter: brightness(1.05); }
.bb-btn:active { translate: 0 2px; }
.bb-btn--yellow { min-width: 176px; background-image: url(assets/blockblast/btn-yellow.webp); color: #5C3A00; }
.bb-btn--yellow img { width: 20px; height: auto; filter: brightness(.35); }
.bb-btn--green { min-width: 210px; background-image: url(assets/blockblast/btn-green.webp); color: #fff; text-shadow: 0 2px 0 rgba(0, 80, 40, .4); }

/* Game over: "No space left", then the result card */
.bp-over {
	position: absolute;
	inset: 0;
	z-index: 7;
	display: grid;
	place-items: center;
	padding: 14px;
	background: rgba(20, 10, 4, .58);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: fadeIn .35s var(--ease);
}
.bp-over[hidden] { display: none; }
.bb-nospace {
	position: absolute;
	inset: 36% 0 auto;
	text-align: center;
	font: 700 clamp(30px, 8vw, 38px)/1 'Balsamiq Sans', var(--font-display);
	color: var(--bb-cream);
	text-shadow: 0 3px 0 rgba(0, 0, 0, .3);
	animation: noSpace 1.1s var(--ease) forwards;
}
@keyframes noSpace {
	0% { opacity: 0; transform: scale(.7); }
	20% { opacity: 1; transform: scale(1.05); }
	70% { opacity: 1; transform: none; }
	100% { opacity: 0; transform: translateY(-20px); }
}
.bp-over-card {
	position: relative;
	width: 100%;
	max-width: 330px;
	margin-top: 44px;
	padding: 62px 18px 22px;
	border-radius: 26px;
	background: var(--bg);
	color: var(--ink);
	text-align: center;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
	animation: popIn .5s var(--spring) .9s both;
}
.bb-cup-big { position: absolute; left: 50%; top: -56px; width: 110px; height: auto; translate: -50% 0; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3)); }
.bb-over-title { font: 700 34px/1.1 'Balsamiq Sans', var(--font-display); color: var(--ink); }
.bp-over-score { margin-top: 6px; font-size: 16px; color: var(--ink-soft); }
.bp-over-score b { font: 700 22px 'Balsamiq Sans', var(--font-display); color: var(--ink); }
.bp-over-text { margin: 10px 0 16px; font-size: 15px; color: var(--ink-soft); }
.bp-over-card .nv-badges { justify-content: center; gap: 8px; margin-bottom: 14px; font-family: var(--font-body); }
.bp-over-card .nv-badge { gap: 7px; min-height: 42px; padding: 5px 11px 5px 9px; border-radius: 11px; }
.bp-over-card .nv-badge svg { width: 20px; height: 20px; }
.bp-over-card .nv-badge small { font-size: 9px; }
.bp-over-card .nv-badge b { font-size: 14.5px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.85) translateY(10px); } }

.bb-hint { min-height: 1.5em; margin-top: 16px; text-align: center; font-size: 14.5px; font-weight: 600; color: rgba(255, 246, 232, .82); }

@media (prefers-reduced-motion: reduce) {
	.bp-over-card { animation: none; }
	.bb-nospace,
	.bb-hand { display: none; }
}

/* ----------------------------------------------------------------------------- library */
.library { background: #FFFDF8; }
.lib-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin-bottom: 10px;
}
.search { position: relative; flex: 1 1 280px; max-width: 380px; }
.search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; translate: 0 -50%; color: var(--ink-soft); pointer-events: none; }
.search input {
	width: 100%;
	min-height: 54px;
	padding: 12px 20px 12px 48px;
	border: 2px solid #EBD5BA;
	border-radius: var(--r-pill);
	background: var(--bg);
	font: 600 16px var(--font-body);
	color: var(--ink);
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.search input::placeholder { color: #9A7A66; }
.search input:focus { outline: none; border-color: var(--grape-btn); background: #fff; box-shadow: 0 0 0 4px rgba(232, 67, 46, .18); }

.tabs { display: flex; gap: 8px; max-width: 100%; padding: 4px; margin: -4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 8px 12px 8px 16px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--bg);
	color: var(--ink);
	font: 700 15px/1 var(--font-body);
	cursor: pointer;
	transition: background-color .2s, color .2s, translate .25s var(--spring);
}
.tabs button:hover { background: #F8E1C6; translate: 0 -1px; }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: 0 6px 16px rgba(59, 36, 22, .25); }
.tab-count {
	min-width: 28px;
	padding: 4px 8px;
	border-radius: var(--r-pill);
	background: rgba(59, 36, 22, .08);
	font-size: 12.5px;
	text-align: center;
}
.tabs button[aria-selected="true"] .tab-count { background: rgba(255, 255, 255, .2); }

.lib-count { min-height: 1.6em; margin: 12px 0 22px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(176px, 42vw), 1fr)); grid-auto-flow: dense; gap: clamp(14px, 2vw, 24px); }
.game-card--feature { display: flex; flex-direction: column; grid-column: span 2; }
.game-card--feature .game-cover .game-blurb { translate: 0 0; padding: 70px 22px 20px; font-size: 16px; }
.game-card--feature .game-cover img { object-position: 50% 16%; }
.game-card--feature .game-name { font-size: 27px; }
.game-card--feature .badge { top: 14px; left: 14px; font-size: 12.5px; padding: 7px 12px 6px; }
.badge--feature { background: #fff; color: var(--grape-ink); }
.game-card--suggest { display: flex; box-shadow: none; background: none; }
.game-card--suggest:hover { translate: none; box-shadow: none; }
.suggest-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 22px 14px;
	border: 2.5px dashed #E2C3A0;
	border-radius: 24px;
	background: var(--grape-soft);
	color: var(--ink);
	text-align: center;
	text-decoration: none;
	transition: background-color .25s, border-color .25s, translate .35s var(--spring);
}
.suggest-link:hover { background: #F6DCBD; border-color: var(--grape); translate: 0 -4px; }
.suggest-link img { width: 104px; margin-bottom: 4px; }
.suggest-link .display { font-size: 26px; }
.suggest-link small { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--grape-ink); }
@media (min-width: 700px) {
	.game-card--feature { grid-row: span 2; }
	.game-card--feature .game-cover { flex: 1; aspect-ratio: auto; min-height: 320px; }
	/* Out of flow so the tall banner can't stretch the two rows it spans; the rows size to the regular cards. */
	.game-card--feature .game-cover img { position: absolute; inset: 0; }
}
.game-card {
	--gc: var(--grape);
	position: relative;
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--sh-1), inset 0 0 0 1px rgba(59, 36, 22, .05);
	transition: translate .4s var(--spring), box-shadow .3s var(--ease);
}
.game-card[hidden] { display: none; }
.game-card:hover,
.game-card:focus-visible { translate: 0 -6px; box-shadow: 0 20px 40px -10px var(--gc), var(--sh-1); }
.game-card:focus-visible { outline: 3px solid var(--grape-btn); outline-offset: 3px; }
.game-cover {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 24px 24px 18px 18px;
	background: var(--gc);
}
.game-cover img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); }
.game-card:hover .game-cover img { scale: 1.07; }
.game-cover .game-blurb {
	position: absolute;
	inset: auto 0 0;
	padding: 46px 14px 14px;
	background: linear-gradient(180deg, rgba(46, 28, 18, 0) 0%, rgba(46, 28, 18, .86) 38%, rgba(46, 28, 18, .95) 100%);
	color: #fff;
	font-size: 14px;
	line-height: 1.45;
	translate: 0 102%;
	transition: translate .4s var(--ease);
}
.game-card:hover .game-cover .game-blurb,
.game-card:focus-visible .game-cover .game-blurb { translate: 0 0; }
.game-blurb--below { display: none; }
.badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 6px 10px 5px;
	border-radius: var(--r-pill);
	font: 800 11.5px/1 var(--font-body);
	letter-spacing: .07em;
	text-transform: uppercase;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
.badge--new { background: var(--pink-ink); color: #fff; }
.badge--soon { background: var(--sunny); color: var(--ink); }
.game-meta { padding: 12px 14px 15px; }
.game-name { font: 800 19px/1.15 var(--font-display); color: var(--ink); text-wrap: balance; }
.game-cat { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.game-cat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gc); }
.game-grid.animate .game-card:not([hidden]) { animation: cardIn .5s var(--spring) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.95); } }

@media (hover: none) {
	.game-cover .game-blurb { display: none; }
	.game-blurb--below {
		display: -webkit-box;
		margin-top: 6px;
		overflow: hidden;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		font-size: 13.5px;
		line-height: 1.45;
		color: var(--ink-soft);
	}
}

.lib-more-wrap { display: flex; justify-content: center; }
.lib-more:not([hidden]) { margin-top: 26px; }
.lib-empty { display: grid; justify-items: center; gap: 14px; padding: 30px 0 10px; text-align: center; }
.lib-empty[hidden] { display: none; }
.lib-empty img { width: 150px; }
.lib-empty .display { font-size: clamp(24px, 3vw, 32px); }

/* ----------------------------------------------------------------------------- overheard */
.overheard {
	overflow: hidden;
	padding-bottom: clamp(36px, 5vw, 64px);
	background: linear-gradient(180deg, #FCEBD3 0%, var(--sky-2) 45%, #FCEBD3 100%);
}
.overheard .cl-a { --w: 240px; top: 6%; right: 8%; --o: .85; }
.overheard .cl-b { --w: 180px; top: 54%; left: -60px; --o: .7; --d: 32s; }
.overheard .cl-c { --w: 300px; bottom: -40px; right: 20%; --o: .8; --d: 36s; --dx: -60px; }
.overheard .sp-a { top: 14%; left: 44%; --s: 22px; }
.overheard .sp-b { bottom: 16%; left: 8%; --s: 18px; --c: #FFE38A; --dl: -1.2s; }

.ovh-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ovh-head .section-head { margin-bottom: 0; }
.ovh-nav { display: none; flex: none; gap: 12px; }

.ovh-scroller {
	--pad-l: max(var(--gutter), calc((100% - var(--wrap)) / 2));
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pad-l);
	scrollbar-width: none;
	padding: 34px 0 40px;
}
.ovh-scroller::-webkit-scrollbar { display: none; }
.ovh-list { display: flex; gap: clamp(18px, 2.4vw, 32px); width: max-content; padding-inline: var(--pad-l); }
.ovh-item { --pw: clamp(216px, 62vw, 246px); width: var(--pw); scroll-snap-align: start; }
.ovh-card { margin: 0; }
.bubble {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 112px;
	margin-bottom: 20px;
	padding: 14px 16px 12px;
	border-radius: 22px;
	background: #fff;
	box-shadow: var(--sh-2);
}
.bubble::after {
	content: '';
	position: absolute;
	left: 36px;
	bottom: -9px;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	background: #fff;
	rotate: 45deg;
}
.bubble p { font: 700 17px/1.3 var(--font-display); color: var(--ink); }
.bubble footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.cast {
	padding: 3px 8px 2px;
	border-radius: var(--r-pill);
	background: var(--grape-soft);
	color: var(--grape-ink);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.phone--shot { cursor: zoom-in; transition: translate .4s var(--spring), box-shadow .3s; }
.phone--shot:hover { translate: 0 -8px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 40px 70px rgba(59, 36, 22, .3); }
.phone--shot:focus-visible { outline: 3px solid var(--grape-btn); outline-offset: 5px; }
.ovh-title { margin-top: 14px; font: 800 16px/1.25 var(--font-display); color: var(--ink-soft); text-align: center; }

@media (min-width: 900px) {
	.ovh-nav { display: flex; }
	.ovh-item:nth-child(even) { margin-top: 56px; }
}

/* ----------------------------------------------------------------------------- trailer */
.trailer { background: var(--dots), var(--bg); }
.trailer-grid { display: grid; gap: 56px; align-items: center; }
.trailer-visual { position: relative; display: flex; justify-content: center; padding-bottom: 20px; }
.phone--video { --pw: clamp(250px, 25vw, 320px); }
.phone--video > img,
.phone--video > video { aspect-ratio: 9 / 16; }
.phone--video > video[hidden],
.phone--video > img[hidden] { display: none; }
.play-big {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--pink-ink);
	cursor: pointer;
	translate: -50% -50%;
	box-shadow: 0 0 0 12px rgba(255, 255, 255, .32), 0 18px 40px rgba(0, 0, 0, .35);
	transition: scale .3s var(--spring);
	animation: ring 2.6s ease-out infinite;
}
.play-big:hover { scale: 1.08; }
.play-big svg { width: 38px; height: 38px; margin-left: 6px; }
.play-big[hidden] { display: none; }
@keyframes ring {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55), 0 18px 40px rgba(0, 0, 0, .35); }
	70%, 100% { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0), 0 18px 40px rgba(0, 0, 0, .35); }
}
.trailer .spark { filter: none; }
.trailer .tr-1 { top: 6%; left: 16%; --s: 28px; --c: var(--sunny); }
.trailer .tr-2 { top: 42%; right: 12%; --s: 18px; --c: var(--pink); --dl: -1.1s; }
.trailer .tr-3 { bottom: 14%; left: 20%; --s: 16px; --c: var(--grape); --dl: -2s; }
.chapters { display: grid; gap: 10px; margin-top: 30px; }
.chapters button {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 68px;
	padding: 8px 16px 8px 8px;
	border: 0;
	border-radius: 18px;
	background: #fff;
	text-align: left;
	cursor: pointer;
	box-shadow: var(--sh-1);
	transition: translate .3s var(--spring), box-shadow .25s;
}
.chapters button:hover { translate: 6px 0; box-shadow: var(--sh-2); }
.chapters button.active { box-shadow: inset 0 0 0 3px var(--pink), var(--sh-2); }
.chapters img { flex: none; width: 52px; height: 52px; object-fit: cover; object-position: 50% 30%; border-radius: 12px; }
.chapters span { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 10px; }
.chapters b { font: 800 18px/1.2 var(--font-display); color: var(--ink); }
.chapters small { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

@media (min-width: 1000px) {
	.trailer-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 80px; }
}

/* ----------------------------------------------------------------------------- community */
.community { overflow: hidden; background: linear-gradient(180deg, var(--bg) 0%, #FCEBD3 100%); }
.community-grid { display: grid; gap: 56px; align-items: center; }
.community-visual { position: relative; display: flex; justify-content: center; padding: 24px 0; }
.phone--community { --pw: clamp(232px, 24vw, 300px); rotate: -4deg; }
.sticker {
	position: absolute;
	z-index: 3;
	padding: 12px 18px 10px;
	border-radius: 20px;
	background: #fff;
	font: 800 clamp(17px, 1.7vw, 21px)/1.1 var(--font-display);
	box-shadow: var(--sh-2);
	rotate: 6deg;
}
.sticker--pink { top: 12%; right: max(0px, calc(50% - var(--pw, 300px) / 2 - 120px)); color: var(--pink-ink); }
.community .cm-1 { top: 4%; left: 14%; --s: 26px; --c: #FFC93C; filter: none; }
.community .cm-2 { bottom: 10%; right: 14%; --s: 18px; --c: #F7B7C8; filter: none; --dl: -1.2s; }
.steps { display: grid; gap: 12px; margin: 30px 0 34px; }
.steps li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 18px;
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--sh-1);
}
.step-icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; }
.step-icon svg { width: 25px; height: 25px; }
.step-icon--sunny { background: #FFF1C7; color: #8A5A00; }
.step-icon--pink { background: var(--pink-soft); color: var(--pink-ink); }
.step-icon--grape { background: #F8E1C6; color: var(--grape-ink); }
.steps h3 { font: 800 21px/1.2 var(--font-display); }
.steps p { margin-top: 2px; font-size: 15.5px; color: var(--ink-soft); }

@media (min-width: 1000px) {
	.community-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; }
}

/* ----------------------------------------------------------------------------- faq */
.faq { background: #FCEBD3; }
.faq-grid { display: grid; gap: 34px; }
.faq-teacher { width: 168px; margin-top: 26px; filter: drop-shadow(0 12px 18px rgba(59, 36, 22, .18)); }
.faq-item {
	margin-bottom: 12px;
	border-radius: 22px;
	background: #fff;
	box-shadow: var(--sh-1);
	transition: box-shadow .3s var(--ease);
}
.faq-item.open { box-shadow: var(--sh-2), inset 0 0 0 2px #F1D6B5; }
.faq-q button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 66px;
	padding: 16px 18px 14px 22px;
	border: 0;
	border-radius: 22px;
	background: none;
	text-align: left;
	font: 800 19px/1.3 var(--font-display);
	color: var(--ink);
	cursor: pointer;
}
.faq-icon {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 8px;
	border-radius: 50%;
	background: var(--grape-soft);
	color: var(--grape-ink);
	transition: rotate .4s var(--spring), background-color .2s, color .2s;
}
.faq-item.open .faq-icon { rotate: 135deg; background: var(--sunny); color: var(--ink); }
.faq-a {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows .38s var(--ease), visibility 0s linear .38s;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .38s var(--ease); }
.faq-a-inner { overflow: hidden; }
.faq-a p { padding: 0 22px 20px; font-size: 16px; color: var(--ink-soft); }

@media (min-width: 1000px) {
	.faq-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 72px; align-items: start; }
	.faq-head { position: sticky; top: calc(var(--header-h) + 28px); }
}
@media (max-width: 999px) {
	.faq-teacher { display: none; }
}

/* ----------------------------------------------------------------------------- final cta */
.final { padding-top: clamp(56px, 7vw, 96px); background: #FCEBD3; }
.final-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	gap: 30px;
	align-items: center;
	padding: clamp(36px, 6vw, 76px);
	border-radius: 40px;
	color: #fff;
	background:
		radial-gradient(80% 120% at 100% 0%, rgba(255, 201, 60, .33) 0%, rgba(255, 201, 60, 0) 52%),
		linear-gradient(125deg, #3B2416 0%, #5A3A26 50%, #8A4A2A 100%);
	box-shadow: 0 30px 70px rgba(176, 84, 40, .35);
}
.final-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.final-sky .cloud { --o: .14; box-shadow: none; }
.final-sky .cl-f1 { --w: 300px; top: 8%; left: -80px; }
.final-sky .cl-f2 { --w: 220px; bottom: 6%; right: 26%; --dx: -40px; }
.final-sky .fs-1 { top: 14%; left: 44%; --s: 22px; --c: #FFE38A; }
.final-sky .fs-2 { top: 66%; left: 6%; --s: 16px; --dl: -1s; }
.final-sky .fs-3 { top: 20%; right: 6%; --s: 26px; --dl: -2s; }
.final-sky .fs-4 { bottom: 12%; left: 52%; --s: 14px; --c: #FFE38A; --dl: -.6s; }
.final-icon { width: 88px; height: 88px; border-radius: 24px; box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }
.final-copy h2 { margin: 22px 0 12px; font-size: clamp(30px, 8.2vw, 70px); text-shadow: 0 4px 0 rgba(59, 36, 22, .25); text-wrap: balance; }
@media (min-width: 700px) { .final-copy h2 { font-size: clamp(44px, 5.4vw, 70px); } }
.hl-sunny { color: var(--sunny); }
.final-copy > p { margin-bottom: 26px; font-size: 19px; color: rgba(255, 255, 255, .9); }
.final-qr { display: none; }
.final-mascot {
	position: absolute;
	z-index: -1;
	right: 4%;
	bottom: -18px;
	width: clamp(86px, 10vw, 128px);
	rotate: -6deg;
	opacity: .95;
}

@media (min-width: 900px) {
	.final-card { grid-template-columns: minmax(0, 1fr) auto; }
	.final-mascot { right: 30%; }
}
@media (min-width: 900px) and (hover: hover) {
	.final-qr {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin-right: 10px;
		padding: 18px 18px 14px;
		border-radius: 28px;
		background: #fff;
		color: var(--ink);
		font: 700 14px/1.2 var(--font-body);
		box-shadow: 0 20px 44px rgba(30, 18, 11, .35);
		rotate: 3deg;
	}
	.final-qr .qr { width: 164px; height: 164px; padding: 0; }
}
@media (max-width: 599px) {
	.final-card { border-radius: 30px; }
	.final-mascot { width: 76px; right: 6px; }
}

/* ----------------------------------------------------------------------------- footer */
.site-footer { padding: 60px 0 44px; background: #4A2E1E; color: rgba(255, 255, 255, .78); }
.footer-grid { display: grid; gap: 26px; }
.footer-brand img { width: auto; height: 66px; }
.footer-brand p { margin-top: 10px; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px; margin-inline: -12px; }
.footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 12px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.footer-links a:hover { background: rgba(255, 255, 255, .08); text-decoration: underline; }
.copyright { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }

@media (min-width: 900px) {
	.footer-grid { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
	.footer-links { justify-content: flex-end; margin-inline: 0 -12px; }
	.copyright { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
	.site-footer { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* ----------------------------------------------------------------------------- sticky mobile cta */
.sticky-cta {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 10px 12px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 14px 36px rgba(59, 36, 22, .24), inset 0 0 0 1px rgba(59, 36, 22, .06);
	translate: 0 150%;
	visibility: hidden;
	transition: translate .5s var(--spring), visibility 0s linear .5s;
}
.sticky-cta.show { translate: 0 0; visibility: visible; transition: translate .5s var(--spring); }
.sticky-cta img { width: 46px; height: 46px; border-radius: 13px; }
.sticky-cta p { flex: 1; min-width: 0; line-height: 1.2; }
.sticky-cta b { display: block; font: 800 17px/1.1 var(--font-display); }
.sticky-cta span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ----------------------------------------------------------------------------- modals */
.modal {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 20px;
	border: 0;
	background: transparent;
	color: #fff;
	overflow: hidden;
}
.modal[open] { display: grid; place-items: center; animation: fadeIn .3s var(--ease); }
.modal::backdrop { background: rgba(30, 18, 11, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal-inner { position: relative; animation: popIn .45s var(--spring); }
.modal-close {
	position: absolute;
	z-index: 5;
	top: -16px;
	right: -16px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	box-shadow: 0 4px 0 #EAD2B4, 0 10px 24px rgba(0, 0, 0, .3);
}
.modal-close svg { width: 22px; height: 22px; }
.modal--video video {
	width: min(calc(100vw - 40px), calc(86vh * 9 / 16), 484px);
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: contain;
	border-radius: 26px;
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.lightbox-inner { display: flex; align-items: center; gap: 24px; }
.lb-figure { display: flex; align-items: center; gap: 28px; margin: 0; }
.lb-figure img {
	width: auto;
	height: min(84vh, 820px);
	aspect-ratio: 1260 / 2736;
	border-radius: 28px;
	background: #2E1C12;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lb-figure figcaption { max-width: 300px; }
.lb-figure h2 { font-size: 30px; line-height: 1.1; }
.lb-figure p { margin-top: 10px; font-size: 16px; color: rgba(255, 255, 255, .85); }
.lb-count { font-weight: 700; font-size: 13px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--sunny) !important; }
.lb-nav { flex: none; }

@media (max-width: 899px) {
	.lightbox-inner { flex-direction: column; gap: 14px; }
	.lb-figure { flex-direction: column; gap: 12px; text-align: center; }
	.lb-figure img { height: min(66vh, 640px); }
	.lb-figure figcaption { max-width: 340px; }
	.lb-figure h2 { font-size: 22px; }
	.lb-figure p { margin-top: 4px; font-size: 14.5px; }
	.lb-nav { position: absolute; z-index: 4; top: calc(min(66vh, 640px) / 2 - 26px); }
	.lb-prev { left: -8px; }
	.lb-next { right: -8px; }
	.modal-close { top: -10px; right: -6px; }
}

/* ----------------------------------------------------------------------------- reveal + motion */
.js [data-reveal] { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity .7s var(--ease), transform .9s var(--spring); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.js [data-reveal] { opacity: 1; transform: none; }
	.marquee { overflow-x: auto; }
	.marquee-track { animation: none; }
}