/* ============================================================
   Adventura — Frontend styles
   Ported pixel-for-pixel from the design prototype (hell, warm,
   modern). All rules are scoped under .advk-app to avoid clashing
   with the host theme. Right/wrong quiz feedback is intentionally
   omitted (users never see correctness).
   ============================================================ */

/* ---- Theme tokens (Beere default) ---- */
.advk-app {
	--bg:        oklch(0.96 0.013 70);
	--bg-2:      oklch(0.93 0.018 65);
	--ink:       oklch(0.24 0.02 55);
	--ink-soft:  oklch(0.47 0.02 55);
	--surface:   oklch(0.995 0.005 75);
	--surface-2: oklch(0.945 0.014 70);
	--line:      oklch(0.88 0.014 70);
	--accent:    oklch(0.52 0.165 22);
	--accent-ink:oklch(0.985 0.01 75);
	--accent-2:  oklch(0.46 0.075 155);
	--tile:      oklch(0.99 0.006 75);
	--tile-ink:  oklch(0.26 0.02 55);

	position: relative;
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}

.advk-app[data-theme="tanne"] {
	--accent:    oklch(0.45 0.085 156);
	--accent-2:  oklch(0.52 0.16 24);
}
.advk-app[data-theme="amber"] {
	--bg:        oklch(0.955 0.02 70);
	--bg-2:      oklch(0.925 0.026 62);
	--accent:    oklch(0.62 0.13 55);
	--accent-2:  oklch(0.48 0.13 30);
}

.advk-app * { box-sizing: border-box; }

.advk-app .serif {
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-optical-sizing: auto;
}

/* warmer Papier-Hintergrund mit feinem Punktraster */
.advk-app .backdrop {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(135% 100% at 50% -25%, var(--bg-2) 0%, transparent 55%),
		var(--bg);
}
.advk-app .backdrop::after {
	content: ""; position: absolute; inset: 0; opacity: .5;
	background-image: radial-gradient(currentColor 1px, transparent 1.4px);
	background-size: 26px 26px;
	color: oklch(0.78 0.02 65);
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
	        mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
}

.advk-app .advk-root { position: relative; z-index: 1; }

.advk-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.advk-app button { font-family: inherit; cursor: pointer; }

/* ============ Kalender ============ */
.advk-app .cal-shell { max-width: 1060px; margin: 0 auto; padding: clamp(28px,5vw,64px) clamp(16px,4vw,40px) 90px; }
.advk-app .cal-head { text-align: center; margin-bottom: clamp(26px,4.5vw,46px); }
.advk-app .cal-eyebrow { display:inline-flex; align-items:center; gap:9px; color: var(--accent);
	font-size: 13px; font-weight:700; letter-spacing: 2px; text-transform: uppercase; }
.advk-app .cal-eyebrow .yr { background: var(--accent); color: var(--accent-ink); border-radius:999px;
	padding:3px 10px; letter-spacing:1px; }
.advk-app .cal-title { font-size: clamp(40px, 8.5vw, 92px); line-height: .92; font-weight: 800;
	margin: 16px 0 14px; color: var(--ink); letter-spacing: -2px; }
.advk-app .cal-title em { font-style: normal; color: var(--accent); }
.advk-app .cal-sub { color: var(--ink-soft); font-size: clamp(15px,2.2vw,18px); line-height:1.55;
	max-width: 44ch; margin: 0 auto; }
.advk-app .cal-progress { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:24px; }
.advk-app .cal-progress-top { display:inline-flex; align-items:center; gap:10px;
	background: var(--surface); border:1px solid var(--line); box-shadow: 0 4px 16px -10px rgba(0,0,0,.3);
	padding:8px 16px 8px 12px; border-radius:999px; font-size:14px; color:var(--ink-soft); }
.advk-app .cal-progress-top .pc { display:flex; align-items:center; justify-content:center; width:26px; height:26px;
	border-radius:50%; background: var(--accent); color: var(--accent-ink); }
.advk-app .cal-progress-top b { color: var(--ink); font-weight:700; font-variant-numeric: tabular-nums; }
.advk-app .cal-streak { background: color-mix(in oklab, var(--accent) 14%, var(--surface)); color: var(--accent);
	font-weight:700; font-size:12.5px; padding:3px 10px; border-radius:999px; }
.advk-app .cal-bar { width: min(360px, 80vw); height:8px; border-radius:999px; background: var(--surface-2);
	border:1px solid var(--line); overflow:hidden; }
.advk-app .cal-bar-fill { display:block; height:100%; border-radius:999px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.advk-app .cal-alldone { margin:0; font-size:13px; color: var(--accent-2); font-weight:600; }
.advk-app .cal-countdown { display:inline-flex; align-items:center; gap:8px; margin-top:16px;
	font-size:14px; color: var(--ink-soft); }
.advk-app .cal-countdown .cd-dot { width:8px; height:8px; border-radius:50%; background: var(--accent);
	box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); animation: advk-pulse 1.6s ease-out infinite; }
.advk-app .cal-countdown .cd-time { color: var(--ink); font-weight:700; font-variant-numeric: tabular-nums;
	letter-spacing:.02em; }
@keyframes advk-pulse {
	0% { box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
	70% { box-shadow:0 0 0 9px transparent; }
	100% { box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.advk-app .cal-countdown .cd-dot { animation: none; }
}

/* layouts */
.advk-app .cal-grid { display:grid; gap: clamp(10px,1.8vw,18px); grid-template-columns: repeat(4,1fr); }
@media (min-width:620px){ .advk-app .cal-grid { grid-template-columns: repeat(6,1fr); } }

.advk-app .cal-scene { display:grid; gap: clamp(10px,1.8vw,18px) clamp(12px,2vw,22px);
	grid-template-columns: repeat(4,1fr); align-items:start; }
@media (min-width:620px){ .advk-app .cal-scene { grid-template-columns: repeat(6,1fr); } }
.advk-app .cal-scene .door-wrap:nth-child(2n)   { transform: translateY(16px); }
.advk-app .cal-scene .door-wrap:nth-child(3n+1) { transform: translateY(-6px); }

.advk-app .door-wrap { width: 100%; }

/* door base */
.advk-app .door { position:relative; width:100%; aspect-ratio:1; border:none; background:none; padding:0;
	display:block; transition: transform .22s cubic-bezier(.2,.8,.3,1); }
.advk-app .door:disabled { cursor: default; }
.advk-app .door:not(:disabled):hover { transform: translateY(-5px); }
.advk-app .door:not(:disabled):active { transform: translateY(-2px) scale(.98); }

.advk-app .door-face { position:absolute; inset:0; border-radius:18px; background: var(--tile);
	box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 24px -14px rgba(40,20,10,.55),
		0 2px 6px -3px rgba(40,20,10,.18);
	display:flex; align-items:center; justify-content:center; overflow:hidden;
	border:1px solid color-mix(in oklab, var(--line) 70%, transparent); }
.advk-app .door--ornament .door-face { border-radius: 50%; }
.advk-app .door--gift .door-face { border-radius: 14px; }

.advk-app .door-num { font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-optical-sizing:auto;
	font-size: clamp(28px, 6.2vw, 46px); color: var(--tile-ink); line-height:1; letter-spacing:-1px;
	position:relative; z-index:2; }

/* gift ribbon */
.advk-app .gift-v, .advk-app .gift-h { position:absolute; background: color-mix(in oklab, var(--accent) 88%, white);
	opacity:.9; z-index:1; }
.advk-app .gift-v { top:0; bottom:0; left:50%; width:12%; transform:translateX(-50%); }
.advk-app .gift-h { left:0; right:0; top:50%; height:12%; transform:translateY(-50%); }
.advk-app .door--gift .door-num { color: var(--ink); }

/* state: today */
.advk-app .door.state--today .door-face { background: var(--accent);
	box-shadow: 0 14px 30px -12px var(--accent), 0 2px 8px -2px rgba(40,20,10,.25);
	border-color: transparent; }
.advk-app .door.state--today .door-num { color: var(--accent-ink); }
.advk-app .door.state--today .gift-v, .advk-app .door.state--today .gift-h { background: rgba(255,255,255,.85); }
.advk-app .door.state--today { animation: advk-today-bob 3.4s ease-in-out infinite; }
@keyframes advk-today-bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-5px);} }
.advk-app .door.state--today:hover { animation: none; }
.advk-app .badge-today { position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:5;
	background: var(--ink); color: var(--surface); font-size:10.5px; font-weight:700;
	letter-spacing:1.2px; text-transform:uppercase; padding:4px 11px; border-radius:999px;
	box-shadow:0 6px 16px -4px rgba(0,0,0,.4); white-space:nowrap; }

/* state: future (locked) */
.advk-app .door.state--future .door-face { background: transparent; box-shadow:none;
	border:1.5px dashed color-mix(in oklab, var(--ink) 22%, transparent); }
.advk-app .door--ornament.state--future .door-face,
.advk-app .door--gift.state--future .door-face { border-style: dashed; }
.advk-app .door.state--future .door-num { color: color-mix(in oklab, var(--ink) 38%, transparent); }
.advk-app .door.state--future .gift-v, .advk-app .door.state--future .gift-h { display:none; }
.advk-app .lock { position:absolute; left:50%; bottom:12%; transform:translateX(-50%); z-index:3;
	display:flex; align-items:center; justify-content:center; color: var(--ink-soft); opacity:.6; }

/* state: past done */
.advk-app .door.is-done .door-face { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
.advk-app .topbar { position:absolute; top:0; left:0; right:0; height:7px; z-index:1;
	background: var(--accent); opacity:.9; }
.advk-app .door--ornament .topbar { display:none; }
.advk-app .badge-done { position:absolute; top:-8px; right:-8px; z-index:5; width:28px; height:28px;
	border-radius:50%; background: var(--accent); color: var(--accent-ink); display:flex;
	align-items:center; justify-content:center; box-shadow:0 5px 12px -3px rgba(0,0,0,.35);
	border:2.5px solid var(--bg); }

/* ============ Teilnahme-Flow (Modal / Bottom-Sheet) ============ */
.advk-app .flow-overlay { position:fixed; inset:0; z-index:100000; display:flex; align-items:flex-end;
	justify-content:center; padding:0; background: rgba(40,22,12,.55);
	animation: advk-ov-in .25s ease both; }
@keyframes advk-ov-in { from{opacity:0;} to{opacity:1;} }
@media (min-width:620px){ .advk-app .flow-overlay { align-items:center; padding:24px; } }

.advk-app .flow-panel { width:100%; max-width:560px; max-height:94vh; background: var(--surface);
	color: var(--ink); border-radius: 22px 22px 0 0; display:flex; flex-direction:column;
	overflow:hidden; box-shadow: 0 -10px 60px -10px rgba(0,0,0,.6);
	animation: advk-panel-up .34s cubic-bezier(.2,.8,.25,1) both; }
@media (min-width:620px){ .advk-app .flow-panel { border-radius:22px; box-shadow:0 30px 90px -20px rgba(0,0,0,.7);} }
@keyframes advk-panel-up { from{ transform: translateY(28px); opacity:0;} to{ transform:none; opacity:1;} }

.advk-app .flow-top { position:relative; padding:18px 20px 0; flex:none; }
.advk-app .flow-bar { height:4px; border-radius:999px; background: var(--surface-2); overflow:hidden; }
.advk-app .flow-bar > i { display:block; height:100%; background: var(--accent);
	border-radius:999px; transition: width .4s cubic-bezier(.2,.8,.25,1); }
.advk-app .flow-meta { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.advk-app .flow-daytag { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
	letter-spacing:1.5px; text-transform:uppercase; color: var(--accent); }
.advk-app .flow-daytag b { font-family:"Bricolage Grotesque",sans-serif; font-size:20px; letter-spacing:0;
	background: var(--accent); color: var(--accent-ink); width:30px; height:30px; border-radius:9px;
	display:flex; align-items:center; justify-content:center; }
.advk-app .flow-close { border:none; background: var(--surface-2); color: var(--ink-soft); width:34px; height:34px;
	border-radius:50%; display:flex; align-items:center; justify-content:center; transition: all .2s; }
.advk-app .flow-close:hover { background: var(--line); color: var(--ink); }

.advk-app .flow-body { padding: 20px 24px 8px; overflow-y:auto; flex:1; }
.advk-app .step-eyebrow { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
	color: var(--accent); margin:0 0 6px; }
.advk-app .step-title { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size: clamp(26px,5vw,34px);
	line-height:1.05; margin:0 0 12px; color: var(--ink); }
.advk-app .step-text { font-size:15.5px; line-height:1.6; color: var(--ink-soft); margin:0 0 16px; }

/* sponsor */
.advk-app .sponsor-logo { background: var(--surface-2); border-radius:14px; padding:18px 20px; margin-bottom:16px; }
.advk-app .sponsor-logo img { display:block; max-width:100%; max-height:80px; margin:0 auto; object-fit:contain; }
.advk-app .sponsor-name { font-family:"Bricolage Grotesque",sans-serif; font-size:30px; font-weight:600; line-height:1;
	text-align:center; color: var(--ink); }
.advk-app .teaser { display:flex; gap:12px; align-items:center; background: color-mix(in oklab, var(--accent) 16%, var(--surface));
	border:1px solid color-mix(in oklab, var(--accent) 40%, transparent); border-radius:12px; padding:12px 14px; }
.advk-app .teaser .ti { width:40px; height:40px; border-radius:10px; background: var(--accent); color: var(--accent-ink);
	display:flex; align-items:center; justify-content:center; flex:none; }
.advk-app .teaser small { display:block; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color: var(--ink-soft); font-weight:600; }
.advk-app .teaser b { font-family:"Bricolage Grotesque",sans-serif; font-size:19px; font-weight:600; color: var(--ink); }

/* prize */
.advk-app .prize-img { border-radius:14px; overflow:hidden; aspect-ratio: 16/10; background: var(--surface-2);
	margin-bottom:16px; border:1px solid var(--line); }
.advk-app .prize-img img { display:block; width:100%; height:100%; object-fit:cover; }
.advk-app .prize-value { display:inline-flex; align-items:center; gap:7px; background: var(--surface-2);
	border-radius:999px; padding:6px 14px; font-size:13.5px; font-weight:600; color: var(--ink);
	margin-bottom:14px; }
.advk-app .prize-value .dot { width:7px; height:7px; border-radius:50%; background: var(--accent); }

/* quiz (pure selection — no correctness shown) */
.advk-app .q-count { font-size:13px; color: var(--ink-soft); font-weight:600; margin:0 0 14px; }
.advk-app .q-block + .q-block { margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.advk-app .q-text { font-family:"Bricolage Grotesque",sans-serif; font-size:23px; font-weight:600; line-height:1.25;
	color: var(--ink); margin:0 0 18px; }
.advk-app .opts { display:flex; flex-direction:column; gap:10px; }
.advk-app .opt { display:flex; align-items:center; gap:12px; text-align:left; padding:14px 16px; border-radius:12px;
	border:1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size:15px;
	font-weight:500; transition: all .18s; width:100%; }
.advk-app .opt:hover:not(:disabled) { border-color: var(--ink-soft); transform: translateY(-1px); }
.advk-app .opt .mark { width:24px; height:24px; border-radius:50%; border:2px solid var(--line); flex:none;
	display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color: var(--ink-soft); }
.advk-app .opt.sel { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
.advk-app .opt.sel .mark { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.advk-app .q-hint { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--ink-soft);
	background: var(--surface-2); border-radius:10px; padding:10px 12px; margin:0 0 16px; }
.advk-app .q-hint svg { flex:none; color: var(--accent); }

/* social */
.advk-app .soc-list { display:flex; flex-direction:column; gap:10px; }
.advk-app .soc-btn { display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:12px;
	border:1.5px solid var(--line); background: var(--surface); color: var(--ink); transition: all .18s; width:100%; }
.advk-app .soc-btn:hover { border-color: var(--ink-soft); }
.advk-app .soc-btn .si { width:42px; height:42px; border-radius:11px; background: var(--surface-2);
	display:flex; align-items:center; justify-content:center; color: var(--ink); flex:none; }
.advk-app .soc-btn .sl { flex:1; text-align:left; }
.advk-app .soc-btn .sl b { display:block; font-size:15px; font-weight:600; }
.advk-app .soc-btn .sl small { color: var(--ink-soft); font-size:12.5px; }
.advk-app .soc-state { font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px;
	background: var(--surface-2); color: var(--ink-soft); }
.advk-app .soc-btn.on { border-color: oklch(0.6 0.15 150); }
.advk-app .soc-btn.on .si { background: oklch(0.6 0.15 150); color:#fff; }
.advk-app .soc-btn.on .soc-state { background: oklch(0.6 0.15 150); color:#fff; }
.advk-app .soc-skip-note { font-size:13px; color: var(--ink-soft); text-align:center; margin-top:14px; }

/* form */
.advk-app .field { margin-bottom:14px; }
.advk-app .field label { display:block; font-size:13px; font-weight:600; color: var(--ink); margin-bottom:6px; }
.advk-app .field label .req { color: var(--accent); }
.advk-app .field input[type=text], .advk-app .field input[type=email] { width:100%; padding:13px 15px; border-radius:11px;
	border:1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size:15px;
	font-family:inherit; transition: border-color .18s; }
.advk-app .field input:focus { outline:none; border-color: var(--accent); }
.advk-app .field.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.advk-app .field.row2 .field { margin:0; }
.advk-app .err-msg { color: oklch(0.55 0.17 25); font-size:12.5px; margin-top:5px; font-weight:600; }
.advk-app .field input.invalid { border-color: oklch(0.55 0.17 25); }
.advk-app .consent { display:flex; gap:11px; align-items:flex-start; padding:14px; border-radius:12px;
	background: var(--surface-2); margin-top:4px; cursor:pointer; }
.advk-app .consent input { width:20px; height:20px; margin-top:1px; flex:none; accent-color: var(--accent); }
.advk-app .consent span { font-size:13px; line-height:1.5; color: var(--ink-soft); }
.advk-app .consent a { color: var(--accent); font-weight:600; }

/* done */
.advk-app .done-wrap { text-align:center; padding:14px 0 6px; }
.advk-app .done-seal { width:88px; height:88px; border-radius:50%; margin:6px auto 18px;
	background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--accent) 70%, white), var(--accent));
	display:flex; align-items:center; justify-content:center; color: var(--accent-ink);
	box-shadow: 0 14px 34px -10px var(--accent); animation: advk-pop .5s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes advk-pop { from{ transform: scale(.4); opacity:0;} to{ transform:none; opacity:1;} }
.advk-app .losnr { font-family:"Bricolage Grotesque",sans-serif; font-size:30px; font-weight:600; letter-spacing:1px;
	color: var(--ink); background: var(--surface-2); border-radius:12px; padding:12px 18px;
	display:inline-block; margin:8px 0 4px; border:1px dashed var(--line); }
.advk-app .losnr-label { font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color: var(--ink-soft); font-weight:600; }

/* footer */
.advk-app .flow-foot { display:flex; gap:12px; padding:16px 24px calc(16px + env(safe-area-inset-bottom));
	border-top:1px solid var(--line); background: var(--surface); flex:none; }
.advk-app .btn { flex:1; padding:15px 20px; border-radius:13px; font-size:15.5px; font-weight:700; border:none;
	display:flex; align-items:center; justify-content:center; gap:8px; transition: all .2s; }
.advk-app .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow:0 12px 26px -12px var(--accent); }
.advk-app .btn-primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.advk-app .btn-primary:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.advk-app .btn-ghost { flex:0 0 auto; background: var(--surface-2); color: var(--ink); }
.advk-app .btn-ghost:hover { background: var(--line); }
.advk-app .btn-text { flex:0 0 auto; background:none; color: var(--ink-soft); font-weight:600; }
.advk-app .btn-text:hover { color: var(--ink); }

/* placeholders */
.advk-app .advk-ph { display:block; width:100%; }
.advk-app .flow-error { color: oklch(0.55 0.17 25); font-size:13.5px; font-weight:600; margin:0 24px 8px; }

/* honeypot — kept in the DOM but away from humans & assistive tech */
.advk-app .advk-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Newsletter / reminder opt-ins + referral block ------------------------- */
.advk-app .consent.optin { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
.advk-app .advk-ref {
	margin-top: 20px;
	padding: 16px;
	border-radius: 16px;
	text-align: left;
	background: color-mix(in oklab, var(--accent) 7%, var(--surface, #fff));
	border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
}
.advk-app .advk-ref-title { font-weight: 800; color: var(--ink); font-size: 15px; }
.advk-app .advk-ref-row { display: flex; gap: 8px; align-items: stretch; }
.advk-app .advk-ref-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
	background: var(--surface, #fff);
	color: var(--ink);
	font-size: 13px;
}
.advk-app .advk-ref-row .btn { white-space: nowrap; }

/* ============ Responsive refinements (small screens) ============ */
/* Tablets & below: the calendar already drops to a 4-col grid via the
   mobile-first base above; here we fine-tune spacing for phones. */
@media (max-width: 560px) {
	/* Stack the first/last-name pair so fields stay comfortably tappable. */
	.advk-app .field.row2 { grid-template-columns: 1fr; gap: 0; }
	.advk-app .field.row2 .field { margin-bottom: 14px; }

	/* Referral input + button stack instead of squeezing side by side. */
	.advk-app .advk-ref-row { flex-direction: column; }
	.advk-app .advk-ref-row .btn { width: 100%; }

	/* Slightly tighter modal padding to give content more room. */
	.advk-app .flow-body { padding: 18px 18px 8px; }
	.advk-app .flow-foot { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
	.advk-app .flow-top { padding: 16px 18px 0; }

	/* Sponsor/prize media a touch smaller on phones. */
	.advk-app .sponsor-logo img { max-height: 64px; }
}

/* Very small phones (≤380px): keep numbers and tap targets sane. */
@media (max-width: 380px) {
	.advk-app .cal-shell { padding-left: 12px; padding-right: 12px; padding-bottom: 72px; }
	.advk-app .cal-grid,
	.advk-app .cal-scene { gap: 8px; }
	.advk-app .opt { padding: 12px 13px; font-size: 14.5px; }
	.advk-app .soc-btn { padding: 11px 13px; gap: 11px; }
	.advk-app .soc-btn .si { width: 38px; height: 38px; }
	/* Footer buttons may wrap on narrow screens rather than overflow. */
	.advk-app .flow-foot { flex-wrap: wrap; }
	.advk-app .btn-primary { flex: 1 1 100%; order: -1; }
}

/* Reduce the staggered-scene vertical offsets on phones so doors don't
   drift too far apart in the narrower grid. */
@media (max-width: 560px) {
	.advk-app .cal-scene .door-wrap:nth-child(2n)   { transform: translateY(8px); }
	.advk-app .cal-scene .door-wrap:nth-child(3n+1) { transform: translateY(-3px); }
}