/* ============================================================
   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);
}
/* Winter — cool, icy blues on a light background. */
.advk-app[data-theme="winter"] {
	--bg:        oklch(0.97 0.018 235);
	--bg-2:      oklch(0.94 0.03 240);
	--surface:   oklch(0.995 0.006 235);
	--surface-2: oklch(0.95 0.02 235);
	--line:      oklch(0.88 0.02 235);
	--accent:    oklch(0.55 0.12 245);
	--accent-2:  oklch(0.62 0.09 210);
	--tile:      oklch(0.99 0.008 235);
}
/* Easter — soft pastel greens and pinks. */
.advk-app[data-theme="ostern"] {
	--bg:        oklch(0.975 0.02 145);
	--bg-2:      oklch(0.95 0.035 150);
	--surface:   oklch(0.995 0.008 145);
	--surface-2: oklch(0.955 0.025 140);
	--line:      oklch(0.89 0.03 140);
	--accent:    oklch(0.62 0.12 150);
	--accent-2:  oklch(0.72 0.12 20);
	--tile:      oklch(0.99 0.01 145);
}
/* Halloween — dark, orange + purple. */
.advk-app[data-theme="halloween"] {
	--bg:        oklch(0.22 0.03 300);
	--bg-2:      oklch(0.17 0.03 300);
	--ink:       oklch(0.95 0.02 80);
	--ink-soft:  oklch(0.80 0.03 80);
	--surface:   oklch(0.29 0.03 300);
	--surface-2: oklch(0.24 0.03 300);
	--line:      oklch(0.42 0.03 300);
	--accent:    oklch(0.72 0.17 55);
	--accent-ink:oklch(0.20 0.02 60);
	--accent-2:  oklch(0.58 0.16 300);
	--tile:      oklch(0.31 0.03 300);
	--tile-ink:  oklch(0.94 0.02 80);
}

/* particle overlay (snow) */
.advk-app .advk-particles { position:absolute; inset:0; z-index:2; pointer-events:none; }

.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: var(--advk-shell-max, 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(var(--advk-cols-m, 4), minmax(0, 1fr)); }
@media (min-width:620px){ .advk-app .cal-grid { grid-template-columns: repeat(var(--advk-cols, 6), minmax(0, 1fr)); } }

/* optional plugin credit badge under the grid (opt-in via settings) */
.advk-app .cal-credit { text-align:center; margin-top: clamp(20px,3vw,32px); }
.advk-app .cal-credit-link { display:inline-flex; align-items:center; gap:6px;
	font-size:12px; font-weight:600; letter-spacing:.3px; text-decoration:none;
	color: var(--ink-soft); background: var(--surface-2);
	border:1px solid var(--line); border-radius:999px; padding:6px 14px;
	transition: color .18s, border-color .18s, transform .18s; }
.advk-app .cal-credit-link:hover { color: var(--accent);
	border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); transform: translateY(-1px); }

.advk-app .cal-scene { display:grid; gap: clamp(10px,1.8vw,18px) clamp(12px,2vw,22px);
	grid-template-columns: repeat(var(--advk-cols-m, 4), minmax(0, 1fr)); align-items:start; }
@media (min-width:620px){ .advk-app .cal-scene { grid-template-columns: repeat(var(--advk-cols, 6), minmax(0, 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); }

/* custom per-door image: the uploaded graphic fills the tile (clipped to the
   chosen shape), with a subtle scrim so the day number stays legible on top. */
.advk-app .door--custom .door-face { background-size: cover; background-position: center;
	background-repeat: no-repeat; border-color: transparent; }
.advk-app .door--custom .door-face::after { content:""; position:absolute; inset:0; z-index:1;
	border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.42)); }
.advk-app .door--custom .door-num { color:#fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.advk-app .door--custom .topbar, .advk-app .door--custom .gift-v, .advk-app .door--custom .gift-h { display:none; }
/* keep the image visible (and just dimmed) while the door is still locked */
.advk-app .door--custom.state--today .door-face,
.advk-app .door--custom.state--future .door-face { background-color: var(--surface-2);
	box-shadow: 0 10px 24px -14px rgba(40,20,10,.55); border:none; }
.advk-app .door--custom.state--future .door-face { opacity:.8; }
.advk-app .door--custom.state--future .door-num { color:#fff; }

/* 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) ============ */
/* portal wrapper on <body>: only hosts the fixed overlay, so it must not paint
   a background or create a box/clip of its own. */
.advk-app.advk-portal { position:static; background:none; overflow:visible; }

.advk-app .flow-overlay { position:fixed; inset:0; z-index:2147483000; 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); }

/* flex:1 + min-height:0 lets the body shrink and scroll while the header
   (.flow-top) and footer (.flow-foot) stay pinned and fully visible — even
   when a door has a lot of text. */
.advk-app .flow-body { padding: 20px 24px 8px; overflow-y:auto; flex:1 1 auto; min-height:0; }
.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; }
/* rich text: admin-authored HTML (paragraphs, lists, links, emphasis) */
.advk-app .step-text p { margin:0 0 12px; }
.advk-app .step-text p:last-child { margin-bottom:0; }
/* force bullets/numbers back on — many themes reset list-style:none globally */
.advk-app .step-text ul, .advk-app .step-text ol { margin:0 0 12px; padding-left:1.5em; }
.advk-app .step-text ul { list-style: disc outside !important; }
.advk-app .step-text ol { list-style: decimal outside !important; }
.advk-app .step-text li { display: list-item !important; list-style: inherit !important; margin:2px 0; }
.advk-app .step-text a { color: var(--accent); text-decoration: underline; }
.advk-app .step-text strong, .advk-app .step-text b { color: var(--ink); }
.advk-app .step-text img { max-width:100%; height:auto; border-radius:12px; margin:8px 0; display:block; }
.advk-app .step-text img.zoomable { cursor: zoom-in; }

/* 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:120px; margin:0 auto; object-fit:contain; }
.advk-app .sponsor-logo img.zoomable { cursor: zoom-in; }
.advk-app .sponsor-logo-link { display:block; cursor:pointer; transition: transform .18s, filter .18s; }
.advk-app .sponsor-logo-link:hover { transform: translateY(-2px); filter: brightness(1.03); }
.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); }
/* sponsor name as a link to the sponsor's site (with an external-link icon) */
.advk-app a.sponsor-name-link { display:flex; align-items:center; justify-content:center; gap:8px;
	text-decoration:none; color: var(--ink); transition: color .18s; }
.advk-app a.sponsor-name-link:hover { color: var(--accent); }
.advk-app a.sponsor-name-link:hover .sponsor-name-text { text-decoration:underline; }
.advk-app a.sponsor-name-link svg { flex:none; opacity:.75; }
.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); }

/* multiple prizes per door: each prize as its own card */
.advk-app .prize-card { border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px;
	background: color-mix(in oklab, var(--surface-2) 45%, var(--surface)); }
.advk-app .prize-card-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.advk-app .prize-card-head .prize-idx { flex:none; width:26px; height:26px; border-radius:50%;
	background: var(--accent); color: var(--accent-ink); font-family:"Bricolage Grotesque",sans-serif;
	font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.advk-app .prize-card-head b { font-family:"Bricolage Grotesque",sans-serif; font-size:19px; font-weight:600; color: var(--ink); }
.advk-app .prize-card .prize-img { margin-bottom:12px; }
.advk-app .prize-card .step-text { margin-bottom:0; }
.advk-app .prize-img img.zoomable { cursor: zoom-in; }

/* admin preview note above the calendar */
.advk-app .advk-admin-note { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--ink);
	border:1px solid color-mix(in oklab, var(--accent) 35%, var(--line)); border-radius:12px;
	padding:10px 14px; font-size:13px; font-weight:600; text-align:center; margin-bottom:16px; }

/* image lightbox — sits above the door pop-up (portal on <body>) */
.advk-lightbox { position:fixed; inset:0; z-index:2147483001; background:rgba(20,12,8,.86);
	display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out;
	animation: advk-ov-in .2s ease both; }
.advk-lightbox img { max-width:92vw; max-height:92vh; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.55); }

/* donation (optional step) */
.advk-app .donate-btn { display:inline-flex; align-items:center; gap:8px; margin:4px 0 12px;
	padding:14px 22px; border-radius:13px; font-size:15.5px; font-weight:700; text-decoration:none;
	background: var(--accent); color: var(--accent-ink); box-shadow:0 12px 26px -12px var(--accent);
	transition: filter .2s, transform .2s; }
.advk-app .donate-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.advk-app .donate-note { font-size:12.5px; color: var(--ink-soft); margin:0; }

/* 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 .expired-seal { width:80px; height:80px; border-radius:50%; margin:6px auto 18px;
	background: var(--surface-2); border:1px solid var(--line);
	display:flex; align-items:center; justify-content:center; color: var(--ink-soft);
	animation: advk-pop .5s cubic-bezier(.2,1.2,.4,1) both; }
.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: 92px; }
}

/* 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); }
}

/* ============================================================
   Public winners list ([advk_winners]) + share buttons
   ============================================================ */
.advk-winners-wrap { max-width: var(--advk-shell-max, 1060px); margin: 0 auto; padding: clamp(20px,4vw,40px) clamp(16px,4vw,32px); }
.advk-app .advk-winners-title { font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800;
	font-size: clamp(26px,4vw,40px); line-height:1.2; color: var(--ink); margin:0 0 22px; padding:2px 0;
	text-align:center; overflow:visible; }
.advk-app .advk-winners-empty { color: var(--ink-soft); text-align:center; }
.advk-app .advk-winners-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
/* High-specificity + !important so host themes that style content `li`
   (padding/margins/markers) can't squash the row or push the badge to the edge. */
.advk-app .advk-winners-list .advk-winner-item { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
	margin:0 !important; list-style:none !important; text-indent:0 !important;
	background: var(--surface); border:1px solid var(--line); border-radius:14px;
	padding:20px 24px !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 22px -16px rgba(40,20,10,.4); }
.advk-app .advk-winners-list .advk-winner-item::before,
.advk-app .advk-winners-list .advk-winner-item::marker { content:none !important; }
.advk-app .advk-winner-day { flex:0 0 auto; margin:0; font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
	font-size:13px; line-height:1.2; color: var(--accent-ink); background: var(--accent); border-radius:999px; padding:5px 14px; }
.advk-app .advk-winner-name { font-weight:700; color: var(--ink); }
.advk-app .advk-winner-prize { color: var(--ink-soft); font-size:14.5px; }
.advk-app .advk-winner-name + .advk-winner-prize::before { content:"·"; margin:0 10px 0 -2px; opacity:.55; }
@media (max-width:520px){ .advk-app .advk-winner-prize { flex-basis:100%; }
	.advk-app .advk-winner-name + .advk-winner-prize::before { content:none; } }

/* share buttons (referral / done step) */
.advk-app .advk-share { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.advk-app .advk-share a { display:inline-flex; align-items:center; gap:7px; text-decoration:none;
	font-size:13.5px; font-weight:600; color: var(--ink); background: var(--surface-2);
	border:1px solid var(--line); border-radius:999px; padding:8px 14px; transition: all .18s; }
.advk-app .advk-share a:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
	color: var(--accent); transform: translateY(-1px); }
/* calendar-wide share row (under the grid) */
.advk-app .advk-share-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
	gap:10px; margin-top: clamp(18px,3vw,28px); }
.advk-app .advk-share-label { font-size:13px; font-weight:700; color: var(--ink-soft); }
.advk-app .advk-share-row .advk-share { margin-top:0; }