/* =========================================================
   一周年庆典页 — 全屏多步骤互动
   只在 page-templates/template-celebration.php 上加载（见 inc/celebration.php）。

   约定：
   - 颜色一律走 main.css 的变量，不写死色值，三套皮肤自动生效。
   - 尺寸用 clamp() / dvh，360px 到桌面都不横向滚动。
   - 所有动画在文件末尾的 prefers-reduced-motion 块里统一关掉。
   ========================================================= */

/* ── 页面外壳 ─────────────────────────────────── */
body.celebration-page {
	overflow: hidden;
}

/* 全屏沉浸：站点导航与页脚让位给庆典自己的顶栏 */
body.celebration-page .site-header,
body.celebration-page .site-footer {
	display: none;
}

.celebration {
	position: relative;
	z-index: 1;
	display: grid;
	/* 顶栏 / 关卡 / 底栏；关卡占满中间，所有 step 叠在同一格里做交叉淡入 */
	grid-template-rows: auto minmax(0, 1fr) auto;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background:
		radial-gradient(1200px 800px at 82% -12%, rgba(var(--primary-rgb), 0.20), transparent 62%),
		radial-gradient(900px 700px at -12% 18%, rgba(var(--cyan-rgb), 0.14), transparent 58%),
		radial-gradient(700px 620px at 50% 118%, rgba(var(--primary-rgb), 0.16), transparent 60%),
		var(--bg);
}

/* ── 顶栏 ─────────────────────────────────────── */
.celeb-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px clamp(12px, 4vw, 26px);
	border-bottom: 1px solid var(--border);
	background: rgba(var(--bg-rgb), 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.celeb-bar__back,
.celeb-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
	white-space: nowrap;
}
.celeb-bar__back:hover,
.celeb-bar__btn:hover {
	color: var(--text);
	border-color: var(--border-glow);
	box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.25);
}

.celeb-bar__mid {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.celeb-bar__right { display: flex; gap: 8px; }

.celeb-bar__count {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--muted-2);
	font-variant-numeric: tabular-nums;
}

.celeb-pips { display: flex; align-items: center; gap: 6px; }
.celeb-pip {
	width: 9px; height: 9px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	cursor: pointer;
	transition: width 0.28s, background 0.28s, box-shadow 0.28s, border-color 0.28s;
}
.celeb-pip:hover { border-color: var(--border-glow); }
.celeb-pip.is-active {
	width: 26px;
	background: var(--grad);
	border-color: transparent;
	box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.6);
}
/* 已经走过的关卡：填一半，知道自己走到哪了 */
.celeb-pip.is-done { background: rgba(var(--primary-rgb), 0.45); }

/* ── 关卡通用 ─────────────────────────────────── */
.celeb-step {
	grid-row: 2;
	grid-column: 1;
	display: none;
	padding: clamp(18px, 3.4vh, 36px) clamp(16px, 5vw, 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* 封面光晕/网格、尾声 canvas 都是 absolute，要有个就近的包含块，
	   否则会以 .celebration 为准，铺满整屏并盖住顶栏底栏 */
	position: relative;
}
.celeb-step.is-active { display: grid; animation: celeb-in 0.5s cubic-bezier(0.2, 0.75, 0.3, 1) both; }
.celeb-step:focus { outline: none; }
.celeb-step:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }

/*
 * main.js:133 会给全页所有 .glass-card 加上 .reveal（透明度 0，等滚动进入才现形）。
 * 庆典页的卡片是跟着关卡整体切换的，不靠滚动进场 —— 而且它们在 hidden 的关卡里，
 * 观测器要等关卡激活才回调，中间会闪一下。这里就近把滚动显现取消掉。
 */
.celebration .reveal { opacity: 1; transform: none; transition: none; }

@keyframes celeb-in {
	from { opacity: 0; transform: translateY(16px) scale(0.988); }
	to   { opacity: 1; transform: none; }
}

.celeb-step__title {
	margin: 0 0 6px;
	font-size: clamp(22px, 4.4vw, 34px);
	text-align: center;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 26px rgba(var(--primary-rgb), 0.35));
}
.celeb-step__sub {
	margin: 0 0 22px;
	text-align: center;
	color: var(--muted);
	font-size: 14.5px;
}

/* ── 底栏 ─────────────────────────────────────── */
.celeb-nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 12px clamp(12px, 4vw, 26px) calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--border);
	background: rgba(var(--bg-rgb), 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.celeb-nav__btn {
	min-width: 108px;
	height: 42px;
	padding: 0 22px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	font: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.celeb-nav__btn--next {
	background: var(--grad);
	border-color: transparent;
	color: var(--on-grad);
	box-shadow: 0 8px 26px rgba(var(--primary-rgb), 0.38);
}
.celeb-nav__btn:hover:not(:disabled) {
	color: var(--text);
	border-color: var(--border-glow);
	box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.28);
}
.celeb-nav__btn--next:hover:not(:disabled) { color: var(--on-grad); }
.celeb-nav__btn:disabled { opacity: 0.32; cursor: not-allowed; }

/* 气球全戳完时轻推一下「下一步」 */
.celeb-nav__btn--next.is-nudged { animation: nudge 1.1s ease-in-out 3; }
@keyframes nudge {
	0%, 100% { transform: none; }
	35%      { transform: translateX(5px) scale(1.045); }
	70%      { transform: translateX(-2px); }
}

/* 最后一关没有「下一步」 */
.celeb-nav.is-last .celeb-nav__btn--next { display: none; }
.celeb-nav.is-first .celeb-nav__btn:not(.celeb-nav__btn--next) { visibility: hidden; }

/* =========================================================
   0 · 封面 + 礼物盒
   ========================================================= */
.celeb-cover {
	place-items: center;
	text-align: center;
	overflow: hidden;
}
.celeb-cover__inner { position: relative; z-index: 2; display: grid; justify-items: center; }

.celeb-cover__glow {
	position: absolute;
	top: 50%; left: 50%;
	width: min(560px, 92vw); height: min(560px, 92vw);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--primary-rgb), 0.30), transparent 66%);
	filter: blur(30px);
	pointer-events: none;
	animation: floaty 9s ease-in-out infinite;
}
.celeb-cover__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse 66% 58% at 50% 46%, #000 26%, transparent 74%);
	-webkit-mask-image: radial-gradient(ellipse 66% 58% at 50% 46%, #000 26%, transparent 74%);
}

.celeb-cover__title {
	margin: 0 0 10px;
	font-size: clamp(34px, 8.4vw, 66px);
	font-weight: 900;
	line-height: 1.06;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 34px rgba(var(--primary-rgb), 0.45));
}
.celeb-cover__subtitle {
	margin: 0 0 clamp(14px, 3vh, 30px);
	color: var(--muted);
	font-size: clamp(14px, 2.6vw, 17px);
	letter-spacing: 0.04em;
}
.celeb-cover__hint {
	margin: clamp(16px, 3vh, 28px) 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
	animation: hint-pulse 2.4s ease-in-out infinite;
}
.celeb-cover__date {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.22em;
	color: var(--muted-2);
	font-variant-numeric: tabular-nums;
}
@keyframes hint-pulse {
	0%, 100% { opacity: 0.62; }
	50%      { opacity: 1; }
}

/* ── 礼物盒按钮本体 ───────────────────────────── */
.gift {
	--box-w: 148px;
	--box-h: 118px;
	--box-d: 108px;
	--tilt: rotateX(-14deg) rotateY(-26deg);

	position: relative;
	display: grid;
	/* 这两行是给下面 .gift__scene 的 height:100% 兜底的，别删。
	   没有它们，grid 的行高按内容自动计算，.gift__scene 的百分比高度就变成
	   不定值、按 auto 处理，于是整个场景塌成盒子本身的 118px 高，被 place-items
	   居中后整组 3D 组件（盒盖、蝴蝶结）上移约 110px，直接压到副标题上。 */
	grid-template-rows: 100%;
	grid-template-columns: 100%;
	place-items: center;
	width: min(340px, 82vw);
	height: min(340px, 82vw);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	/* 长按交互：禁止系统选中/放大镜/右键菜单抢事件 */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: manipulation;
	outline: none;
}
.gift:focus-visible .gift__scene { outline: 2px solid var(--cyan); outline-offset: 10px; border-radius: 24px; }

.gift__scene {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%; height: 100%;
	perspective: 900px;
	/* 和 .gift__ring 抢同一个格子，两个都得写死坐标：
	   只给其中一个写，另一个会被自动排到第二行 —— 场景一旦掉到隐式行上，
	   height:100% 又变回不定值、塌成盒子本身的 118px，FIX#1 就白修了。 */
	grid-area: 1 / 1;
}
.gift__scene > * { grid-area: 1 / 1; }

/* 长按进度环 */
.gift__ring {
	/* 这个环要套在盒子上，所以必须和 .gift__scene 占同一个格子。
	   漏了这行它就是一个普通的流内 grid item，会被自动排到第二行 ——
	   .gift 是单列网格，第一行给了场景，环于是整个掉到盒子下方，
	   长按的时候进度环出现在提示文字那一带，跟盒子差三百多像素。
	   （主题原版也有这个问题，那里差 217px；给场景兜底行高之后差距变成 327px，
	   所以看着更明显了。） */
	grid-area: 1 / 1;
	width: min(300px, 74vw); height: min(300px, 74vw);
	border-radius: 50%;
	background: conic-gradient(
		from -90deg,
		var(--cyan) calc(var(--hold, 0) * 360deg),
		rgba(255, 255, 255, 0.07) 0
	);
	-webkit-mask: radial-gradient(circle, transparent 63%, #000 64% 66%, transparent 67%);
	mask: radial-gradient(circle, transparent 63%, #000 64% 66%, transparent 67%);
	/* 这里刻意**不加** var(--tilt)（主题原版是加的）：环本来就和盒子不在
	   同一个 3D 上下文里 —— 盒子在 .gift__scene 的 perspective 下投影，
	   环是它的兄弟节点，没这个 perspective。斜切加在一个没有透视的圆上，
	   得到的不是「跟着盒子一起倾斜的环」，而是一个被压扁、还整体偏左
	   约 26px 的椭圆，看着就是歪的。去掉倾斜，它就是正圆，且与盒子同心。 */
	opacity: 0;
	transition: opacity 0.25s;
}
.gift.is-holding .gift__ring { opacity: 1; }

/* 盒子四壁 */
.gift__box {
	position: relative;
	width: var(--box-w);
	height: var(--box-h);
	transform-style: preserve-3d;
	transform: var(--tilt);
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.gift__face {
	position: absolute;
	inset: 0;
	/* 黑罩层做明暗，保证换皮肤后依旧是同一个渐变 */
	background-image: linear-gradient(rgba(0, 0, 0, var(--shade, 0)), rgba(0, 0, 0, var(--shade, 0))), var(--grad-2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.gift__face--front { --shade: 0;    transform: translateZ(calc(var(--box-d) / 2)); }
.gift__face--back  { --shade: 0.5;  transform: rotateY(180deg) translateZ(calc(var(--box-d) / 2)); }
.gift__face--left,
.gift__face--right {
	left: 50%;
	right: auto;
	width: var(--box-d);
	margin-left: calc(var(--box-d) / -2);
}
.gift__face--left  { --shade: 0.34; transform: rotateY(-90deg) translateZ(calc(var(--box-w) / 2)); }
.gift__face--right { --shade: 0.16; transform: rotateY(90deg)  translateZ(calc(var(--box-w) / 2)); }

/* 缎带：一个元素，两道交叉的带子 */
.gift__ribbon {
	width: var(--box-w);
	height: var(--box-h);
	background-image:
		linear-gradient(90deg, transparent calc(50% - 12px), var(--grad) calc(50% - 12px) calc(50% + 12px), transparent calc(50% + 12px)),
		linear-gradient(0deg,  transparent calc(50% - 12px), var(--grad) calc(50% - 12px) calc(50% + 12px), transparent calc(50% + 12px));
	transform: var(--tilt) translateZ(calc(var(--box-d) / 2 + 1px));
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.3s;
}

/* 盒盖：一块顶板 + 一圈短裙 */
.gift__lid {
	--lid-h: 20px;
	--lid-pad: 7px;
	position: relative;
	width: calc(var(--box-w) + var(--lid-pad) * 2);
	height: var(--lid-h);
	transform-style: preserve-3d;
	/* 盒子高 118，中心在原点，盖子中心要落在盒顶再往上半个盖高 */
	transform: var(--tilt) translateY(calc(var(--box-h) / -2 - var(--lid-h) / 2));
	transition: transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.7s;
}
.gift__lid > * {
	position: absolute;
	background-image: linear-gradient(rgba(0, 0, 0, var(--shade, 0)), rgba(0, 0, 0, var(--shade, 0))), var(--grad-2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.gift__lid-top {
	inset: 0;
	transform: rotateX(90deg);
	background-image: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)), var(--grad-2);
}
.gift__lid-front { inset: 0; transform: translateZ(calc((var(--box-d) + var(--lid-pad) * 2) / 2)); }
.gift__lid-back  { inset: 0; --shade: 0.5;  transform: rotateY(180deg) translateZ(calc((var(--box-d) + var(--lid-pad) * 2) / 2)); }
.gift__lid-left,
.gift__lid-right {
	top: 0; bottom: 0;
	left: 50%;
	width: calc(var(--box-d) + var(--lid-pad) * 2);
	margin-left: calc((var(--box-d) + var(--lid-pad) * 2) / -2);
}
.gift__lid-left  { --shade: 0.34; transform: rotateY(-90deg) translateZ(calc((var(--box-w) + var(--lid-pad) * 2) / 2)); }
.gift__lid-right { --shade: 0.16; transform: rotateY(90deg)  translateZ(calc((var(--box-w) + var(--lid-pad) * 2) / 2)); }

/* 蝴蝶结 */
.gift__bow {
	position: relative;
	width: 0; height: 0;
	transform: var(--tilt) translateY(calc(var(--box-h) / -2 - 20px - 14px));
	transition: transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.7s;
}
.gift__bow i,
.gift__bow b {
	position: absolute;
	display: block;
	background: var(--grad);
	box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.5);
}
.gift__bow i {
	width: 46px; height: 34px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.12), 0 0 18px rgba(var(--primary-rgb), 0.45);
}
.gift__bow i:nth-child(1) { transform: translate(-45px, -17px) rotate(-16deg); }
.gift__bow i:nth-child(2) { transform: translate(-1px, -17px) rotate(16deg); }
.gift__bow b {
	width: 20px; height: 20px;
	border-radius: 50%;
	transform: translate(-10px, -10px);
}

/* 环绕闪星 */
.gift__sparkles { position: absolute; inset: 0; pointer-events: none; }
.gift__sparkles i {
	position: absolute;
	top: 50%; left: 50%;
	font-style: normal;
	font-size: 16px;
	line-height: 1;
	color: var(--cyan);
	text-shadow: 0 0 12px rgba(var(--cyan-rgb), 0.8);
	animation: sparkle 2.6s ease-in-out infinite;
}
.gift__sparkles i:nth-child(1) { transform: translate(-142px, -96px); animation-delay: -0.2s; color: var(--cyan); }
.gift__sparkles i:nth-child(2) { transform: translate(126px, -112px);  animation-delay: -1.1s; font-size: 12px; color: var(--pink); }
.gift__sparkles i:nth-child(3) { transform: translate(158px, 34px);   animation-delay: -1.9s; font-size: 20px; }
.gift__sparkles i:nth-child(4) { transform: translate(-158px, 48px);  animation-delay: -0.7s; font-size: 13px; color: var(--pink); }
.gift__sparkles i:nth-child(5) { transform: translate(52px, -152px);  animation-delay: -2.3s; font-size: 11px; }
.gift__sparkles i:nth-child(6) { transform: translate(-72px, 146px);  animation-delay: -1.5s; font-size: 15px; }
@keyframes sparkle {
	0%, 100% { opacity: 0.18; }
	50%      { opacity: 1; }
}

/* 盒子被按住：轻微下沉，给一点「有重量」的反馈 */
.gift.is-holding .gift__box { transform: var(--tilt) translateY(5px); }

/* 打开：盖子飞走、盒子回弹、闪星炸开 */
.gift.is-open { pointer-events: none; }
.gift.is-open .gift__ring { opacity: 0; }
.gift.is-open .gift__lid {
	transform: var(--tilt) translateY(calc(var(--box-h) / -2 - var(--lid-h) / 2 - 210px)) translateZ(90px) rotateZ(-42deg);
	opacity: 0;
}
.gift.is-open .gift__bow {
	transform: var(--tilt) translateY(calc(var(--box-h) / -2 - 20px - 14px - 210px)) translateZ(90px) rotateZ(-42deg);
	opacity: 0;
}
.gift.is-open .gift__box { animation: gift-bounce 0.75s cubic-bezier(0.22, 1.2, 0.36, 1) both; }
.gift.is-open .gift__ribbon { opacity: 0; transition-delay: 0.16s; }
.gift.is-open .gift__sparkles i { animation: sparkle-burst 0.85s ease-out both; }

@keyframes gift-bounce {
	0%   { transform: var(--tilt) scale(1, 1); }
	28%  { transform: var(--tilt) translateY(-14px) scale(0.94, 1.07); }
	58%  { transform: var(--tilt) translateY(6px) scale(1.05, 0.95); }
	100% { transform: var(--tilt) scale(1, 1); }
}
@keyframes sparkle-burst {
	0%   { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--bx, 0), var(--by, -160px)) scale(2.1) rotate(140deg); }
}
.gift__sparkles i:nth-child(1) { --bx: -180px; --by: -190px; }
.gift__sparkles i:nth-child(2) { --bx: 170px;  --by: -210px; }
.gift__sparkles i:nth-child(3) { --bx: 210px;  --by: 60px; }
.gift__sparkles i:nth-child(4) { --bx: -210px; --by: 90px; }
.gift__sparkles i:nth-child(5) { --bx: 70px;   --by: -240px; }
.gift__sparkles i:nth-child(6) { --bx: -100px; --by: 220px; }

/* =========================================================
   1 · 口令
   ========================================================= */
.celeb-gate { place-items: center; }
.celeb-gate__inner {
	width: min(430px, 100%);
	padding: clamp(24px, 5vw, 38px);
	text-align: center;
	box-shadow: var(--shadow), 0 0 44px rgba(var(--primary-rgb), 0.16);
}
.celeb-gate__lock {
	display: block;
	font-size: 34px;
	line-height: 1;
	margin-bottom: 12px;
	filter: drop-shadow(0 0 18px rgba(var(--primary-rgb), 0.6));
}
.celeb-gate__title {
	margin: 0 0 22px;
	font-size: clamp(16px, 3.4vw, 20px);
	line-height: 1.55;
	color: var(--text);
}

.celeb-gate__field { position: relative; margin-bottom: 20px; }

/* 真正接收按键的输入框：视觉上藏起来，但保留焦点与硬件键盘输入 */
.celeb-gate__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	border: 0;
	background: transparent;
	/* iOS 上 font-size < 16px 会触发聚焦缩放 */
	font-size: 16px;
	color: transparent;
	caret-color: transparent;
}

.celeb-dots {
	display: flex;
	justify-content: center;
	gap: 16px;
	height: 46px;
	align-items: center;
}
.celeb-dots span {
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 2px solid var(--border-glow);
	background: transparent;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.celeb-dots span.is-filled {
	background: var(--grad);
	border-color: transparent;
	transform: scale(1.16);
	box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.7);
}
.celeb-gate__inner.is-error .celeb-dots { animation: gate-shake 0.42s ease-in-out; }
.celeb-gate__inner.is-error .celeb-dots span { border-color: var(--pink); }

@keyframes gate-shake {
	0%, 100% { transform: translateX(0); }
	18% { transform: translateX(-11px); }
	38% { transform: translateX(9px); }
	58% { transform: translateX(-6px); }
	78% { transform: translateX(4px); }
}

/* 数字键盘 */
.celeb-keys {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	max-width: 300px;
	margin: 0 auto;
}
.celeb-key {
	height: 56px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--surface-strong);
	color: var(--text);
	font: inherit;
	font-size: 21px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
	-webkit-tap-highlight-color: transparent;
}
.celeb-key:hover { border-color: var(--border-glow); box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.24); }
.celeb-key:active { transform: scale(0.94); background: rgba(var(--primary-rgb), 0.2); }
.celeb-key--fn { color: var(--muted); font-size: 18px; }

.celeb-gate__msg {
	margin: 16px 0 0;
	min-height: 22px;
	font-size: 14px;
	font-weight: 700;
	color: var(--pink);
}
.celeb-gate__inner.is-ok .celeb-gate__msg { color: var(--green); }
.celeb-gate__hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--muted-2);
}
.celeb-gate__ok { margin: 14px 0 0; font-size: 14px; font-weight: 700; color: var(--green); }

/* 默认（有 JS）隐藏无 JS 表单，由 html:not(.js) 反转 */
.celeb-gate__fallback { display: none; margin-top: 8px; }
.celeb-gate__fallback label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.celeb-gate__fallback input {
	width: 100%;
	padding: 12px 14px;
	margin-bottom: 12px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: rgba(0, 0, 0, 0.25);
	color: var(--text);
	font: inherit;
	text-align: center;
	letter-spacing: 0.3em;
}

/* =========================================================
   2 · 回忆相册
   ========================================================= */
.celeb-gallery {
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	place-items: center;
	overflow: hidden;
	/* 胶片要通到屏幕两边，所以横向内边距挪给里面每个元素自己加 */
	padding-inline: 0;
}
.celeb-gallery .celeb-step__title,
.celeb-gallery .celeb-step__sub,
.celeb-gallery .celeb-gallery__count {
	grid-column: 1;
	padding-inline: clamp(16px, 5vw, 40px);
}

.celeb-reel {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--primary-rgb), 0.5) transparent;
	cursor: grab;
}
.celeb-reel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.celeb-reel::-webkit-scrollbar { height: 6px; }
.celeb-reel::-webkit-scrollbar-track { background: transparent; }
.celeb-reel::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), 0.45); border-radius: 999px; }

.celeb-reel__track {
	display: flex;
	align-items: center;
	gap: clamp(14px, 3vw, 26px);
	width: max-content;
	padding: 14px clamp(16px, 8vw, 90px) 22px;
}

.celeb-photo {
	flex: 0 0 auto;
	width: min(268px, 64vw);
	margin: 0;
	padding: 12px 12px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface-strong);
	box-shadow: var(--shadow);
	scroll-snap-align: center;
	transform: rotate(var(--rot, 0deg));
	transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
	cursor: zoom-in;
}
.celeb-photo:nth-child(3n + 1) { --rot: -1.6deg; }
.celeb-photo:nth-child(3n + 2) { --rot: 1.2deg; }
.celeb-photo:nth-child(3n)     { --rot: -0.5deg; }
.celeb-photo:hover {
	transform: rotate(0deg) translateY(-6px) scale(1.02);
	border-color: var(--border-glow);
	box-shadow: 0 22px 54px rgba(var(--primary-rgb), 0.3);
}
.celeb-photo:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.celeb-photo__frame {
	overflow: hidden;
	border-radius: calc(var(--radius) - 6px);
	background: rgba(0, 0, 0, 0.3);
	aspect-ratio: 3 / 4;
}
.celeb-photo__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}
.celeb-photo:hover .celeb-photo__img { transform: scale(1.05); }

.celeb-photo__cap { padding-top: 12px; }
.celeb-photo__date {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--cyan);
}
.celeb-photo__text {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
}

.celeb-gallery__count {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	color: var(--muted-2);
}

/* 放大遮罩 */
.celeb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 260;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(5, 5, 12, 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.26s, visibility 0.26s;
	cursor: zoom-out;
}
.celeb-lightbox.is-open { opacity: 1; visibility: visible; }
.celeb-lightbox img {
	max-width: min(1100px, 94vw);
	max-height: 86vh;
	width: auto;
	border-radius: var(--radius);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
	transform: scale(0.94);
	transition: transform 0.26s;
}
.celeb-lightbox.is-open img { transform: none; }
.celeb-lightbox__close {
	position: absolute;
	top: 18px; right: 18px;
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* =========================================================
   3 · 戳气球
   ========================================================= */
.celeb-balloons {
	/* 标题 / 副标 / 气球场地 / 弹出来的祝福 / 全部戳完的提示 */
	grid-template-rows: auto auto minmax(0, 1fr) auto auto;
	overflow: hidden;
}
.celeb-field {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 300px;
}

.balloon {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: clamp(56px, 13vw, 78px);
	height: clamp(70px, 16vw, 96px);
	/* 以 --x/--y 为中心摆位，这样百分比位置不会让小屏上的气球溢出 */
	transform: translate(-50%, -50%);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.balloon__body {
	position: absolute;
	inset: 0 0 16px;
	border-radius: 50% 50% 48% 48% / 44% 44% 56% 56%;
	background: hsl(var(--hue) 76% 62%);
	/* 有 color-mix 的浏览器会把气球往当前皮肤的主色上拉，换肤跟着变 */
	background: color-mix(in oklab, hsl(var(--hue) 80% 64%) 60%, var(--primary));
	box-shadow:
		inset -7px -11px 20px rgba(0, 0, 0, 0.24),
		inset 7px 9px 18px rgba(255, 255, 255, 0.16),
		0 10px 28px rgba(var(--primary-rgb), 0.3);
	animation: balloon-bob var(--dur, 5s) ease-in-out var(--wait, 0s) infinite alternate;
	transition: box-shadow 0.2s;
}
/* 高光 */
.balloon__body::before {
	content: "";
	position: absolute;
	top: 16%; left: 22%;
	width: 26%; height: 20%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	filter: blur(3px);
}
/* 结 + 线 */
.balloon__body::after {
	content: "";
	position: absolute;
	left: 50%; top: 100%;
	width: 2px; height: 30px;
	background: linear-gradient(rgba(255, 255, 255, 0.55), transparent);
	transform: translateX(-50%);
}
.balloon:hover .balloon__body,
.balloon:focus-visible .balloon__body { box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), 0.6), 0 10px 28px rgba(var(--primary-rgb), 0.4); }
.balloon:focus-visible { outline: none; }

@keyframes balloon-bob {
	from { transform: translate(-5px, -12px) rotate(-3deg); }
	to   { transform: translate(5px, 12px) rotate(3deg); }
}

.balloon.is-popped { pointer-events: none; }
.balloon.is-popped .balloon__body {
	animation: balloon-pop 0.36s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}
@keyframes balloon-pop {
	0%   { transform: scale(1); opacity: 1; }
	42%  { transform: scale(1.32); opacity: 1; }
	100% { transform: scale(0.2); opacity: 0; }
}

.celeb-pop {
	grid-row: 4;
	align-self: end;
	justify-self: center;
	width: min(560px, 100%);
	margin-top: 12px;
	padding: 18px 22px;
	text-align: center;
	box-shadow: var(--shadow), 0 0 30px rgba(var(--primary-rgb), 0.2);
	animation: pop-in 0.36s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.celeb-pop[hidden] { display: none; }
.celeb-pop__text { margin: 0; font-size: clamp(15px, 2.8vw, 17px); font-weight: 700; line-height: 1.65; }
.celeb-pop__from { margin: 8px 0 0; font-size: 13px; color: var(--cyan); }
@keyframes pop-in {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to   { opacity: 1; transform: none; }
}

/* 气球碎片（戳破时由 JS 临时插入，动画结束自己删掉） */
.balloon__bit {
	position: absolute;
	width: 7px; height: 7px;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	animation: bit-fly 0.6s ease-out forwards;
}
@keyframes bit-fly {
	from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	to   { opacity: 0; transform: translate(calc(-50% + var(--bx, 0px)), calc(-50% + var(--by, 0px))) scale(0.3); }
}

.celeb-balloons__done {
	grid-row: 5;
	justify-self: center;
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--muted);
	animation: pop-in 0.4s ease-out both;
}

/* =========================================================
   4 · 一封信
   ========================================================= */
.celeb-letter { place-items: center; text-align: center; }
.celeb-letter .celeb-step__title { margin-bottom: 20px; }

.envelope {
	position: relative;
	width: min(280px, 72vw);
	aspect-ratio: 3 / 2;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: opacity 0.4s, transform 0.4s;
}
.envelope__body {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-glow);
	background: var(--grad-2);
	box-shadow: var(--shadow), 0 0 30px rgba(var(--primary-rgb), 0.28);
	overflow: hidden;
}
/* 信封的斜折线，用两个旋转的方块做出「口袋」感 */
.envelope__body::before,
.envelope__body::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 78%; height: 78%;
	background: rgba(0, 0, 0, 0.16);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.envelope__body::before { left: -22%;  transform: rotate(38deg)  translateY(28%); }
.envelope__body::after  { right: -22%; transform: rotate(-38deg) translateY(28%); }

.envelope__flap {
	position: absolute;
	inset: 0 0 auto;
	height: 62%;
	background: var(--grad);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform-origin: top center;
	transition: transform 0.6s cubic-bezier(0.3, 0.9, 0.3, 1);
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}
.envelope__seal {
	position: absolute;
	top: 46%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 26px;
	line-height: 1;
	transition: opacity 0.3s, transform 0.3s;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
.envelope__label {
	position: absolute;
	left: 50%; bottom: -40px;
	transform: translateX(-50%);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
}

.envelope:hover .envelope__flap { transform: rotateX(-22deg); }
.envelope:hover .envelope__seal { transform: translate(-50%, -60%); }
.envelope:focus-visible { outline: 2px solid var(--cyan); outline-offset: 8px; border-radius: var(--radius-sm); }

.envelope.is-open { opacity: 0; transform: scale(0.9) translateY(-16px); pointer-events: none; }
.envelope.is-open .envelope__flap { transform: rotateX(-172deg); }
.envelope.is-open .envelope__seal { opacity: 0; }

.celeb-paper {
	width: min(660px, 100%);
	margin: 0 auto;
	padding: clamp(24px, 5vw, 44px);
	text-align: left;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background:
		linear-gradient(rgba(var(--primary-rgb), 0.05), rgba(var(--primary-rgb), 0.05)),
		var(--surface);
	box-shadow: var(--shadow), 0 0 40px rgba(var(--primary-rgb), 0.14);
}
.celeb-paper[hidden] { display: none; }
.celeb-paper__title {
	margin: 0 0 20px;
	font-size: clamp(19px, 3.4vw, 24px);
	color: var(--text);
}
.celeb-paper__p {
	margin: 0 0 1.05em;
	color: var(--muted);
	line-height: 1.95;
	font-size: clamp(14.5px, 2.4vw, 16px);
}
.celeb-paper.is-revealed .celeb-paper__p {
	animation: paper-line 0.7s ease-out both;
	animation-delay: calc(var(--i, 0) * 0.22s);
}
.celeb-paper__p:last-child {
	margin-bottom: 0;
	padding-top: 1em;
	border-top: 1px solid var(--border);
	text-align: right;
	color: var(--text);
	font-weight: 700;
}
@keyframes paper-line {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================
   5 · 视频
   ========================================================= */
.celeb-video { place-items: center; text-align: center; }
.celeb-video__stage {
	/* 舞台 + 上下标题/状态文字都得塞进一屏，所以视频高度留个上限。
	   68vh 是给标题、副标题、「重试」按钮和顶栏底栏留出余量之后的数。 */
	--video-max-h: 68vh;

	position: relative;
	width: min(880px, 100%);
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background:
		radial-gradient(circle at 50% 40%, rgba(var(--primary-rgb), 0.22), transparent 62%),
		rgba(0, 0, 0, 0.42);
	box-shadow: var(--shadow), 0 0 46px rgba(var(--primary-rgb), 0.18);
}
/*
 * 视频挂上之前，舞台是个 16:9 的空框（播放键站在里面）。
 * 挂上之后改成「由视频自己决定多大」：竖屏给竖框，横屏给横框，方的是方的，
 * 都不裁切、也不在两侧留一大片黑边 —— 换任何比例的片子都不用改 CSS。
 * 两道 max-* 上限保证再长的视频也不会把标题和播放键挤出屏幕。
 * 用 :has() 判断有没有视频，省得 JS 再维护一个状态类。
 */
.celeb-video__stage:has(video) {
	width: auto;
	aspect-ratio: auto;
	max-width: min(880px, 100%);
	max-height: var(--video-max-h);
}
.celeb-video__stage video {
	display: block;
	width: auto;
	height: auto;
	max-width: min(880px, 100%);
	max-height: var(--video-max-h);
	background: #000;
}

.celeb-video__play {
	/* 绝对定位不是为了摆位置，是为了**不参与舞台的尺寸计算**。
	   播放键留在流内时它是舞台的另一个 grid item，舞台「贴合视频」就永远
	   贴不上 —— 实测横屏视频 194px 高，播放键把舞台撑到 348px，上下多出来的
	   就是一开始想去掉的那片黑边。铺满舞台再居中内容，视觉上和原来一样。 */
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 14px;
	padding: 26px 34px;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: var(--text);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s;
}
.celeb-video__play:hover { transform: scale(1.04); }
.celeb-video__play:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
/* 播放开始后 celebration.js 会给它加 hidden，但**光有 hidden 没用**：
   上面那条 display: grid 是作者样式，优先级高过浏览器默认的
   [hidden] { display: none }，所以按钮照样占着位置、照样盖在视频上。
   必须补一条同样带 [hidden] 的规则把 display 压回去。
   （.celeb-pop / .celeb-paper / .celeb-video__retry 都早就有这一条，就它漏了。）
   漏掉的后果不只是「按钮不消失」：它是 absolute、视频是流内的，
   定位元素画在非定位元素之上 —— 按钮于是整个盖住原生控件，
   播放中想点暂停/拖进度条，点到的是这个看不见的按钮。*/
.celeb-video__play[hidden] { display: none; }
.celeb-video__icon {
	display: grid;
	place-items: center;
	width: 78px; height: 78px;
	padding-left: 5px;
	border-radius: 50%;
	background: var(--grad);
	color: var(--on-grad);
	font-size: 26px;
	box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.5), 0 12px 36px rgba(var(--primary-rgb), 0.45);
	animation: play-pulse 2.2s ease-out infinite;
}
@keyframes play-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.5), 0 12px 36px rgba(var(--primary-rgb), 0.45); }
	70%  { box-shadow: 0 0 0 26px rgba(var(--primary-rgb), 0), 0 12px 36px rgba(var(--primary-rgb), 0.45); }
	100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0), 0 12px 36px rgba(var(--primary-rgb), 0.45); }
}

/* 取址中：按钮转圈 */
.celeb-video__play.is-loading { pointer-events: none; }
.celeb-video__play.is-loading .celeb-video__icon {
	animation: none;
	color: transparent;
	border: 3px solid rgba(255, 255, 255, 0.28);
	border-top-color: var(--on-grad);
	background: transparent;
}
.celeb-video__play.is-loading .celeb-video__icon::after { content: none; }

.celeb-video__msg {
	margin: 16px 0 0;
	min-height: 22px;
	font-size: 14px;
	color: var(--muted);
}
.celeb-video__msg.is-error { color: var(--pink); font-weight: 700; }
.celeb-video__retry { margin-top: 14px; }
.celeb-video__retry[hidden] { display: none; }

/* =========================================================
   6 · 尾声
   ========================================================= */
.celeb-finale { place-items: center; text-align: center; overflow: hidden; }
.celeb-finale__fx {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	pointer-events: none;
}
.celeb-finale__inner { position: relative; z-index: 2; display: grid; justify-items: center; }

.celeb-finale__title {
	margin: 0 0 12px;
	font-size: clamp(30px, 7.4vw, 58px);
	font-weight: 900;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 34px rgba(var(--primary-rgb), 0.45));
}
.celeb-finale__sub {
	margin: 0 0 clamp(22px, 4vh, 34px);
	color: var(--muted);
	font-size: clamp(14px, 2.6vw, 17px);
}
.celeb-finale__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.celeb-finale__tip {
	margin: clamp(18px, 3.4vh, 30px) 0 0;
	font-size: 13px;
	color: var(--muted-2);
}

/* =========================================================
   无 JS 降级：html 上没有 .js 时，所有关卡顺序展开成一条长页
   （.js 由模板在 get_header() 之后立刻打上）
   ========================================================= */
html:not(.js) body.celebration-page { overflow: auto; }
html:not(.js) .celebration {
	display: block;
	height: auto;
	min-height: 0;
	overflow: visible;
}
html:not(.js) .celeb-step,
html:not(.js) .celeb-step[hidden] {
	display: block;
	overflow: visible;
	padding: clamp(44px, 8vw, 76px) clamp(16px, 5vw, 40px);
	animation: none;
}
html:not(.js) .celeb-cover__inner,
html:not(.js) .celeb-gate__inner,
html:not(.js) .celeb-paper { margin-inline: auto; }
html:not(.js) .celeb-bar,
html:not(.js) .celeb-nav,
html:not(.js) .celeb-gate__form,
html:not(.js) .gift__ring,
html:not(.js) .celeb-finale__fx { display: none; }
html:not(.js) .celeb-gate__fallback,
html:not(.js) .celeb-paper { display: block; }
html:not(.js) .celeb-paper { margin-top: 34px; }
html:not(.js) .gift { pointer-events: none; }
html:not(.js) .balloon { position: static; transform: none; margin: 6px; }
html:not(.js) .celeb-field { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 0; }

/* =========================================================
   减弱动态效果
   桌面端 main.css 里那块只管全站通用元素；本页的动画全是自己的，
   而这份样式表本来就只在庆典页加载，所以就近收在这里，不往前提。
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.celeb-step.is-active { animation: none; }
	.celeb-cover__glow,
	.celeb-cover__hint,
	.gift__sparkles i,
	.balloon__body,
	.celeb-video__icon { animation: none; }

	.gift.is-open .gift__box { animation: none; }
	.gift.is-open .gift__sparkles i { animation: none; opacity: 0; }
	/* 盖子不飞出去，直接淡出 */
	.gift.is-open .gift__lid,
	.gift.is-open .gift__bow { opacity: 0; transition: opacity 0.3s; transform: var(--tilt) translateY(calc(var(--box-h) / -2)); }
	.gift.is-open .gift__bow { transform: var(--tilt) translateY(calc(var(--box-h) / -2 - 34px)); }

	.balloon.is-popped .balloon__body { animation: none; opacity: 0; }
	.balloon__bit { animation: none; opacity: 0; }
	.celeb-balloons__done { animation: none; }
	.celeb-nav__btn--next.is-nudged { animation: none; }
	.celeb-gate__inner.is-error .celeb-dots { animation: none; }
	.celeb-pop { animation: none; }
	.celeb-paper.is-revealed .celeb-paper__p { animation: none; }
	.celeb-photo,
	.celeb-photo__img { transition: none; }
	.celeb-photo:hover { transform: rotate(var(--rot, 0deg)); }
	.celeb-photo:hover .celeb-photo__img { transform: none; }
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 680px) {
	.celeb-bar { gap: 8px; padding: 10px 12px; }
	.celeb-bar__back span:last-child { display: none; }   /* 只留箭头，把位置让给进度点 */
	.celeb-bar__back { padding: 0 11px; }
	.celeb-bar__mid { gap: 8px; }
	.celeb-bar__right { gap: 6px; }
	.celeb-bar__btn { padding: 0 11px; font-size: 12.5px; }

	.celeb-nav__btn { min-width: 0; flex: 1 1 0; max-width: 190px; }

	.celeb-paper { padding: 22px 18px; }
	.celeb-video__icon { width: 62px; height: 62px; font-size: 21px; }
	.celeb-finale__actions { flex-direction: column; align-items: stretch; width: min(320px, 100%); }
	.celeb-finale__actions .btn { width: 100%; }
	.celeb-field { min-height: 260px; }
}

@media (max-width: 400px) {
	.gift { --box-w: 120px; --box-h: 96px; --box-d: 88px; }
	.celeb-bar__count { display: none; }
	.celeb-pips { gap: 4px; }
	.celeb-pip.is-active { width: 20px; }
}

/* 横屏手机：关卡内容通常比高度高，压缩纵向留白 */
@media (max-height: 520px) {
	.celeb-cover__subtitle,
	.celeb-cover__date { margin-bottom: 6px; }
	.gift { width: min(230px, 54vh); height: min(230px, 54vh); }
	.celeb-step__sub { margin-bottom: 12px; }
}