/*
Theme Name: Dake
Description: DAKEbits — crypto casino bonus codes. Requires the Dake Catalog plugin. Design: DESIGN.md (variant B).
Version: 0.2.0
Requires PHP: 8.1
Text Domain: dake
License: GPL-2.0-or-later
*/

/* All colours, fonts and radii are tokens in :root; the seasonal layer (data-season on <html>) is at the end. */
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-dakebits.woff2") format("woff2"); font-weight: 400 700; font-stretch: 100% 125%; font-display: swap; }
/* Arial/Helvetica scaled to Archivo's width (measured on the site's own text): lines wrap the same before and after
   the web font arrives, so nothing jumps (CLS). Regular, bold, and bold at the 112% width of headings. Android has no
   Arial and falls back to Roboto, which is already within 1% of Archivo for body text. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica"); size-adjust: 98.5%; ascent-override: 89.3%; descent-override: 21.5%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"), local("Helvetica-Bold"); font-weight: 600 700; size-adjust: 97%; ascent-override: 90.7%; descent-override: 21.9%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"), local("Helvetica-Bold"); font-weight: 600 700; font-stretch: 105% 125%; size-adjust: 111%; ascent-override: 79.3%; descent-override: 19.1%; }

:root {
	color-scheme: dark;
	--bg: #0c0d0f;
	--s1: #141519;
	--s2: #1b1d22;
	--s3: #25282e;
	--line: #25272d;
	--line-2: #33363d;
	--hdr-line: var(--line);
	--text: #ede7dd;
	--text-2: #b3aea6;
	--text-3: #969189;
	--heading: #f4efe7;
	--underline: rgba(237, 231, 221, .35);
	--focus: #f4efe7;
	--accent: #6f93ff;
	--accent-hover: #89a7ff;
	--on-accent: #0a0e1c;
	--ok: #86d0a5;
	--bad: #ef9282;
	--bad-bg: #231314;
	--bad-line: #5a2b2b;
	--season: #7b2232;
	--on-season: #f7dcd5;
	--season-line: var(--line-2);
	--shadow-1: 0 10px 24px -18px rgba(0, 0, 0, .9);
	--shadow-2: 0 22px 44px -22px rgba(0, 0, 0, .95), 0 2px 6px rgba(0, 0, 0, .3);
	--btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px rgba(0, 0, 0, .9);

	--font-ui: "Archivo", "Archivo Fallback", system-ui, sans-serif;
	--font-head: var(--font-ui);
	--font-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	--head-stretch: 112%;
	--brand-a: 700 19px/1 var(--font-ui);
	--brand-a-track: .03em;
	--brand-a-stretch: 125%;
	--h1-weight: 700;
	--h1-size: min(44px, 6.75cqi);
	--h1-track: -.02em;
	--h2-weight: 700;
	--h2-size: clamp(23px, 1.4vw + 17px, 28px);
	--h2-track: -.015em;

	--r-1: 6px;
	--r-2: 8px;
	--r-3: 10px;
	--wrap: 1200px;
	--gutter: 16px;
	--t: 160ms ease;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }

:root { --icon-blocked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.7 5.7l12.6 12.6'/%3E%3C/svg%3E"); }


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 16px/1.6 var(--font-ui);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--underline); }
a:hover { text-decoration-color: currentColor; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
time, .num { font-variant-numeric: tabular-nums; }
.icon { width: 16px; height: 16px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 70; padding: 12px 16px; border-radius: var(--r-2); background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header ---------- */
.hdr { border-bottom: 1px solid var(--hdr-line); }
.hdr__in { display: flex; align-items: center; gap: 12px; height: 56px; }
.brand { display: inline-flex; align-items: baseline; margin-right: auto; color: var(--heading); text-decoration: none; white-space: nowrap; }
.brand__a { font: var(--brand-a); letter-spacing: var(--brand-a-track); font-stretch: var(--brand-a-stretch, 100%); }
.brand__b { margin-left: 2px; font: 400 15px/1 var(--font-ui); letter-spacing: .01em; color: var(--text-2); }
.nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a { display: flex; align-items: center; height: 40px; padding: 0 8px; border-radius: var(--r-1); color: var(--text-2); font: 400 14px/1 var(--font-ui); text-decoration: none; transition: color var(--t), background-color var(--t); }
.nav a:hover { color: var(--text); background: var(--s2); }
@media (max-width: 639px) { .nav__casinos { display: none; } }
.age { display: inline-flex; align-items: center; height: 24px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: var(--r-1); color: var(--text-2); font: 600 12px/1 var(--font-ui); font-variant-numeric: tabular-nums; }

/* ---------- Title, trust line, filters ---------- */
.intro { padding: 20px 0 0; container-type: inline-size; }
h1 {
	margin: 0;
	color: var(--heading);
	font: var(--h1-weight) clamp(28px, 2.6vw + 18px, 44px)/1.1 var(--font-head);
	font-stretch: var(--head-stretch, 100%);
	letter-spacing: var(--h1-track);
}
.intro h1 { font-size: var(--h1-size); line-height: 1.08; white-space: nowrap; }
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.trust a { color: var(--text-2); }
.trust a:hover { color: var(--text); }
.trust__ok { display: inline-flex; align-items: center; gap: 6px; }
.trust__ok .icon { color: var(--ok); }
.trust .sep { color: var(--text-3); }

.filters { display: flex; gap: 8px; margin: 16px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter); overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--chip-bg, transparent); color: var(--text-2); font: 400 14px/1 var(--font-ui); text-decoration: none; white-space: nowrap; transition: color var(--t), border-color var(--t), background-color var(--t); }
.chip:hover { color: var(--text); border-color: var(--text-3); }
.chip[aria-current="true"] { background: var(--s3); border-color: var(--text-3); color: var(--text); font-weight: 600; }
.chip__n { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.chip--season { border-color: var(--season-line); }

/* ---------- Casino list ---------- */
.list { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.list-empty { margin-top: 12px; padding: 24px; border: 1px dashed var(--line-2); border-radius: var(--r-3); color: var(--text-2); }
.card {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	grid-template-areas: "rank id" "bonus bonus" "code code" "pay pay" "cta cta";
	gap: 14px 12px;
	padding: 16px;
	background: var(--card-bg, var(--s1));
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	box-shadow: var(--shadow-1);
	transition: border-color var(--t), box-shadow var(--t);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.card__rank { grid-area: rank; align-self: center; color: var(--text-2); font: 600 20px/1 var(--font-ui); font-variant-numeric: tabular-nums; }

.card__id { grid-area: id; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.card__logo { grid-row: span 2; display: flex; align-items: center; width: 104px; height: 36px; }
.card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.card__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text); font: 600 15px/1.3 var(--font-ui); }
.card__checked { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--ok); font-size: 13px; line-height: 1.4; }
.card__checked.is-none { color: var(--text-3); }

.card__bonus { grid-area: bonus; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bonus { color: var(--heading); font: 700 21px/1.2 var(--font-ui); text-wrap: balance; }
.bonus.is-none { color: var(--text-2); font-size: 17px; font-weight: 600; }
.bonus-terms { margin-top: 4px; color: var(--text-2); font-size: 13px; line-height: 1.45; }

.terms { margin-top: 6px; }
.terms summary { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--text-2); font-size: 13px; cursor: pointer; list-style: none; border-radius: var(--r-1); }
.terms summary::-webkit-details-marker { display: none; }
.terms summary:hover { color: var(--text); }
.terms summary .icon { width: 14px; height: 14px; transition: transform var(--t); }
.terms[open] summary .icon { transform: rotate(180deg); }
.terms dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 8px 0 0; padding: 12px; border-radius: var(--r-2); background: var(--s2); font-size: 13px; line-height: 1.45; }
.terms dt { color: var(--text-2); }
.terms dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.unknown { color: var(--text-3); }
.lic-ok { color: var(--ok); }

.card__code { grid-area: code; }
.code { display: flex; align-items: stretch; min-height: 44px; border: 1px dashed var(--code-line, var(--line-2)); border-radius: var(--r-2); background: var(--code-bg, var(--s2)); overflow: hidden; }
.code__label { align-self: center; padding-left: 12px; color: var(--text-2); font-size: 12px; }
.code__val { flex: 1; align-self: center; min-width: 0; padding: 6px 8px; color: var(--text); font: 600 14px/1.25 var(--font-code); letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.code__val--long { font-size: 12px; letter-spacing: 0; } /* e.g. SlickEmber0901 stays on one line */
.code__copy { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 76px; padding: 0 12px; border: 0; border-left: 1px dashed var(--code-line, var(--line-2)); background: var(--s3); color: var(--text); font: 600 13px/1 var(--font-ui); cursor: pointer; transition: background-color var(--t), color var(--t); }
.code__copy:hover { background: var(--line-2); }
.code__copy .icon { width: 14px; height: 14px; }
.code__copy.is-copied { color: var(--ok); }
.code__copy .ic-done, .code__copy.is-copied .ic-copy { display: none; }
.code__copy.is-copied .ic-done { display: block; }
.code-none { color: var(--text-2); font-size: 13px; line-height: 1.45; }

.card__pay { grid-area: pay; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pay { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pay li { display: grid; place-items: center; width: 22px; height: 22px; color: var(--text-2); }
.pay svg { width: 20px; height: 20px; }
.pay__more { color: var(--text-2); font-size: 12px; line-height: 1.3; }

.card__cta { grid-area: cta; display: flex; gap: 8px; }
.dk-offer { flex: 1; display: flex; min-width: 0; }
.dk-offer > * { flex: 1; min-width: 0; }
.btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: var(--r-2); background: var(--accent); color: var(--on-accent); font: 600 15px/1 var(--font-ui); letter-spacing: .01em; text-decoration: none; box-shadow: var(--btn-shadow); transition: background-color var(--t), box-shadow var(--t); }
.btn:hover { background: var(--accent-hover); }
.btn:active { box-shadow: none; }
.btn-2 { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: transparent; color: var(--text); font: 400 14px/1 var(--font-ui); cursor: pointer; text-decoration: none; transition: border-color var(--t), background-color var(--t); }
.btn-2:hover { border-color: var(--text-3); background: var(--s2); }
.blocked-note { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--bad-line); border-radius: var(--r-2); background: var(--bad-bg); color: var(--bad); font-size: 13px; font-weight: 600; line-height: 1.3; }
.blocked-note::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon-blocked) center / contain no-repeat; mask: var(--icon-blocked) center / contain no-repeat; }

.card.is-blocked { background: var(--bg); box-shadow: none; }
.card.is-blocked:hover { box-shadow: none; }
.card.is-blocked .card__logo img { filter: grayscale(1); opacity: .45; }
.card.is-blocked .bonus,
.card.is-blocked .card__name,
.card.is-blocked .bonus-terms,
.card.is-blocked .pay li { color: var(--text-3); }
.u-more { display: none; }
@media (max-width: 1099px) {
	.card.is-unverified .card__code, .card.is-unverified .card__pay { display: none; }
	.card.is-unverified { grid-template-areas: "rank id" "bonus bonus" "cta cta"; }
	.card.is-unverified .u-more { display: inline; }
}
.card.is-blocked .tag--exclusive { background: transparent; border-color: var(--line-2); color: var(--text-3); }

.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: var(--r-1); color: var(--text-2); font: 600 11px/1 var(--font-ui); letter-spacing: .02em; white-space: nowrap; }
.tag--new { color: var(--text); border-color: var(--text-3); }
.tag--exclusive { background: var(--text); border-color: var(--text); color: var(--bg); }
.tag--season { background: var(--season); border-color: var(--season-line); color: var(--on-season); }
.tag--sample { border-style: dashed; color: var(--text-3); }

/* ---------- Sections below the list ---------- */
.section { padding-top: 56px; }
.section h2 { margin: 0 0 8px; color: var(--heading); font: var(--h2-weight) var(--h2-size)/1.12 var(--font-head); font-stretch: var(--head-stretch, 100%); letter-spacing: var(--h2-track); }
.lede { max-width: 62ch; color: var(--text-2); }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; color: var(--text); font-weight: 600; }
.more .icon { transition: transform var(--t); }
.more:hover .icon { transform: translateX(2px); }

.steps { display: grid; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.step { padding: 20px 0; border-bottom: 1px solid var(--line); }
.step h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--heading); font: 600 17px/1.3 var(--font-ui); }
.step h3 .icon { width: 20px; height: 20px; color: var(--text-2); }
.step p { color: var(--text-2); font-size: 15px; line-height: 1.6; }

.guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.guide__body { max-width: 72ch; }
.guide h3 { margin: 32px 0 8px; color: var(--heading); font: 600 19px/1.3 var(--font-ui); }
.guide h3:first-child { margin-top: 0; }
.guide p { color: var(--text-2); }
.guide p + p { margin-top: 12px; }
.table-wrap { margin: 16px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.table caption { padding: 12px 14px 0; color: var(--text-2); font-size: 13px; text-align: left; }
.table th, .table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table tr:last-child > * { border-bottom: 0; }
.table thead th { color: var(--text-2); font-weight: 400; white-space: nowrap; }
.table tbody th { color: var(--text); font-weight: 600; }
.table td { color: var(--text-2); }
.table .num { color: var(--text); text-align: right; white-space: nowrap; }
.table .total > * { color: var(--heading); font-weight: 600; }
/* Comparison table page (template-table.php): wide table that scrolls inside its frame on phones. */
.cmp__hint { margin: 0 0 4px; }
/* The screen-reader-only text in the cells is absolutely positioned: keep it inside the scrolling frame. */
.cmp { position: relative; }
.cmp__table { min-width: 960px; }
.cmp__table thead button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; border-radius: var(--r-1); }
.cmp__table thead button:hover { color: var(--text); }
.cmp__table thead button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp__table th[aria-sort] button { color: var(--text); }
.cmp__table th[aria-sort="ascending"] button::after { content: " ↑"; }
.cmp__table th[aria-sort="descending"] button::after { content: " ↓"; }
.cmp__table tbody th a { color: var(--text); }
.cmp__table .lic-ok .icon { width: 14px; height: 14px; vertical-align: -2px; }
.cmp__table .inline-code { white-space: nowrap; }
.cmp__long { min-width: 240px; }
.kyc__table { min-width: 720px; }
.kyc__text { min-width: 320px; }
@media (max-width: 639px) {
	.table-wrap--stack { border: 0; border-radius: 0; overflow: visible; }
	.table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; }
	.table--stack tr { margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-3); }
	.table--stack th, .table--stack td { padding: 2px 0; border: 0; }
	.table--stack tbody th { margin-bottom: 4px; color: var(--heading); font-weight: 600; }
	.table--stack td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px; }
	.table--stack td::before { content: attr(data-label); color: var(--text-3); }
}

.faq { margin-top: 20px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq h3 { margin: 0; color: var(--heading); font: 600 16px/1.4 var(--font-ui); }
.faq summary .icon { width: 18px; height: 18px; color: var(--text-2); transition: transform var(--t); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { max-width: 70ch; padding-bottom: 18px; color: var(--text-2); }

/* ---------- Footer ---------- */
.foot { margin-top: 72px; padding: 40px 0 28px; border-top: 1px solid var(--line); background: var(--s1); color: var(--text-2); font-size: 14px; line-height: 1.6; }
.foot__grid { display: grid; gap: 32px; }
.foot .brand { margin-bottom: 12px; }
.foot__title { margin-bottom: 10px; color: var(--text); font-weight: 600; }
.foot ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--text); }
.foot__age { display: flex; align-items: flex-start; gap: 10px; }
.foot__help { margin-top: 10px !important; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; }
.foot__bottom p { max-width: 80ch; }

/* ---------- Toast ---------- */
.toast {
	position: fixed; left: 50%; bottom: 20px; z-index: 60;
	display: flex; align-items: center; gap: 10px;
	width: max-content; max-width: calc(100% - 32px);
	padding: 12px 16px;
	border: 1px solid var(--line-2); border-radius: var(--r-3);
	background: var(--s3); color: var(--text); box-shadow: var(--shadow-2);
	font-size: 14px; line-height: 1.4;
	opacity: 0; pointer-events: none; transform: translate(-50%, 8px);
	transition: opacity var(--t), transform var(--t);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast .icon { color: var(--ok); }
.toast:empty { padding: 0; border: 0; }

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
	.hdr__in { gap: 16px; height: 60px; }
	.nav ul { gap: 4px; }
	.nav a { padding: 0 10px; }
	.intro { padding-top: 28px; }
	.section { padding-top: 72px; }
	.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 0; }
	.step { padding: 20px 0 0; border-top: 1px solid var(--line-2); border-bottom: 0; }
	.foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.foot__grid { grid-template-columns: 4fr 4fr 3fr 3fr; }
}
@media (min-width: 680px) and (max-width: 1099px) {
	.list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card { align-content: start; }
}
@media (min-width: 1100px) {
	.list { gap: 10px; margin-top: 16px; }
	.card {
		grid-template-columns: 24px 152px minmax(0, 1fr) 200px 156px 156px;
		grid-template-areas: "rank id bonus code pay cta";
		column-gap: 16px;
		align-items: start;
		padding: 20px 24px;
	}
	.card__rank { align-self: start; line-height: 36px; }
	.card__id { display: block; }
	.card__logo { width: 120px; }
	.card__name { margin-top: 10px; }
	.card__bonus { padding-top: 2px; }
	.card__code { padding-top: 18px; }
	.code { position: relative; overflow: visible; }
	.code__copy { border-radius: 0 calc(var(--r-2) - 1px) calc(var(--r-2) - 1px) 0; }
	.code__label { position: absolute; top: -20px; left: 0; padding: 0; }
	.code-none { padding-top: 2px; }
	.card__pay { flex-direction: column; align-items: flex-start; padding-top: 29px; }
	.card__pay > .unknown { padding-top: 0; margin-top: -16px; }
	.card__cta { flex-direction: column; gap: 4px; }
	.dk-offer { flex: none; }
	.card__cta .btn { min-height: 44px; }
	.card__cta .btn-2 { min-height: 32px; border: 0; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; }
	.card__cta .btn-2:hover { background: none; color: var(--text); text-decoration-color: currentColor; }
	.blocked-note { min-height: 44px; }
	.guide { grid-template-columns: 4fr 8fr; gap: 48px; }
	.guide__head { position: sticky; top: 24px; align-self: start; }
}

@media (max-width: 379px) {
	.hdr__in { gap: 6px; }
	.nav ul { gap: 0; }
	.nav a { padding: 0 6px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after, ::backdrop { transition-duration: 0s !important; animation: none !important; }
	.toast { transform: translate(-50%, 0); }
}

/* ---------- Inner pages: pages, archive, review, 404 ---------- */
.crumbs { padding-top: 20px; color: var(--text-2); font-size: 13px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--text-3); }
.crumbs a { color: var(--text-2); }
.page-head { padding: 24px 0 16px; }
.page-head p { max-width: 62ch; margin-top: 8px; color: var(--text-2); }
.prose { max-width: 72ch; color: var(--text-2); }
.prose h2 { margin: 32px 0 8px; color: var(--heading); font: var(--h2-weight) clamp(22px, 1.4vw + 16px, 28px)/1.2 var(--font-head); font-stretch: var(--head-stretch, 100%); letter-spacing: var(--h2-track); }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose a, .prose strong { color: var(--text); }
.prose table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.prose th, .prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--text); font-weight: 600; white-space: nowrap; }
.prose td:first-child { color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 639px) {
	.prose table, .prose tbody, .prose tr, .prose td { display: block; }
	.prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.prose tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
	.prose td { padding: 2px 0; border: 0; }
}
.muted { color: var(--text-2); }
.empty { padding: 32px; border: 1px dashed var(--line-2); border-radius: var(--r-3); color: var(--text-2); text-align: center; }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section__head h2 { margin: 0; }

.review-head { display: grid; gap: 24px; padding: 20px 0 8px; }
.review-head__title { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.logo { display: grid; place-items: center; flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: var(--r-3); background: var(--s2); color: var(--text); font-weight: 700; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.stamp { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-1); color: var(--text-2); font-size: 13px; }
.stamp.is-checked { color: var(--ok); }
.hero__lede { max-width: 62ch; margin-top: 12px; color: var(--text-2); }
.notice { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--bad-line); border-radius: var(--r-2); background: var(--bad-bg); color: var(--bad); font-size: 14px; }
.offer-box { padding: 20px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--card-bg, var(--s1)); box-shadow: var(--shadow-1); }
.offer-box__bonus { margin-bottom: 8px; color: var(--heading); font: 700 24px/1.2 var(--font-ui); }
.offer-box .code { margin: 12px 0; }
.offer-box small { display: block; margin-top: 12px; color: var(--text-2); font-size: 13px; }
.score__num { color: var(--heading); font: 700 22px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.score__label { color: var(--text-2); font-size: 13px; }
.score--none .score__num { color: var(--text-2); font-size: 15px; font-weight: 600; }
.review-body { display: grid; gap: 32px; margin-top: 24px; }
.review-body h2 { margin: 0 0 12px; color: var(--heading); font: var(--h2-weight) clamp(22px, 1.4vw + 16px, 28px)/1.2 var(--font-head); font-stretch: var(--head-stretch, 100%); letter-spacing: var(--h2-track); }
.facts { width: 100%; margin: 0 0 28px; border-collapse: collapse; font-size: 14px; }
.facts th, .facts td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.facts th { width: 38%; color: var(--text-2); font-weight: 400; }
.pc { display: grid; gap: 12px; margin-bottom: 28px; }
.pc > div { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-3); }
.pc h3 { margin: 0 0 8px; font: 600 16px/1.3 var(--font-ui); }
.pc .pros h3 { color: var(--ok); }
.pc .cons h3 { color: var(--bad); }
.pc ul { margin: 0; padding-left: 1.1em; color: var(--text-2); }
.disclosure { margin: 24px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-3); color: var(--text-2); font-size: 14px; }
.bars { display: grid; gap: 12px; margin-bottom: 12px; }
.bar { display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 6px 12px; color: var(--text-2); font-size: 14px; }
.bar b { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.bar__track { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--s3); }
.bar__fill { display: block; height: 100%; background: var(--text-2); }
.games { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.games a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); color: var(--text-2); text-decoration: none; }
.games a:hover { border-color: var(--text-3); color: var(--text); }
@media (min-width: 960px) {
	.review-head, .review-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
	.offer-box { position: sticky; top: 24px; }
	.pc { grid-template-columns: 1fr 1fr; }
}

/* ---------- Casino landing pages (promo code, comparison) ---------- */
.intro--page { padding-top: 8px; }
.intro--page h1 { white-space: normal; font-size: clamp(30px, 2.6vw + 20px, 52px); }
.answer { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--card-bg, var(--s1)); box-shadow: var(--shadow-1); }
.answer h2 { margin: 0 0 12px; color: var(--text-2); font: 600 14px/1.3 var(--font-ui); }
.answer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; margin: 0; }
.answer__grid dt { color: var(--text-2); font-size: 13px; }
.answer__grid dd { margin: 2px 0 0; color: var(--heading); font-weight: 600; }
.answer__grid .unknown { font-weight: 400; }
.answer__note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 14px; }
.sources { margin-top: 28px; color: var(--text-3); font-size: 13px; }
.sources a { color: var(--text-2); }
.prose--article h3 { margin: 24px 0 8px; color: var(--heading); font: 600 18px/1.35 var(--font-ui); }
.prose--article ol { padding-left: 1.3em; }
.prose--article ol li::marker { color: var(--text); font-weight: 600; }
.small { font-size: 13px; }
.inline-code { padding: 2px 6px; border: 1px dashed var(--code-line, var(--line-2)); border-radius: var(--r-1); color: var(--text); font: 600 13px var(--font-code); letter-spacing: .04em; }
/* "+N more" / "show all": native details that open in place (.more is the "read more" link) */
.reveal { display: block; }
.card__pay .reveal { display: inline; }
.reveal summary { display: inline; cursor: pointer; list-style: none; text-decoration: underline dotted; text-underline-offset: 3px; border-radius: var(--r-1); }
.reveal summary::-webkit-details-marker { display: none; }
.reveal summary:hover { color: var(--text); }
.reveal__hint { color: var(--text-2); font-size: 12px; }
.reveal[open] .reveal__hint { display: none; }
.reveal__list { display: block; margin-top: 6px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.pay-inline .reveal[open] { flex-basis: 100%; }
.pay-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; vertical-align: middle; }
.compare tbody th { width: 26%; }
.compare thead th:not(:first-child) { color: var(--heading); font-weight: 600; }
.compare td { color: var(--text); }
@media (max-width: 639px) {
	.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.compare, .compare tbody { display: block; }
	.compare tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
	.compare tr:last-child { border-bottom: 0; }
	.compare tbody th { grid-column: 1 / -1; width: auto; padding: 0; border: 0; color: var(--text-2); font-weight: 400; font-size: 13px; }
	.compare td { padding: 0; border: 0; overflow-wrap: anywhere; }
	.compare td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--heading); font-size: 12px; font-weight: 600; }
}

/* Optional seasonal artwork slots (shown only when the file exists and the season is on) */
.section-art { display: none; }
@media (min-width: 1100px) {
	.section:has(> .section-art) { position: relative; }
	.section-art { display: block; position: absolute; right: 0; width: auto; pointer-events: none; }
	.section:has(> .section-art--faq) .faq { max-width: calc(100% - 320px); }
}
.consent:has(.consent__icon) { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
.consent__icon { width: 48px; height: 48px; align-self: start; object-fit: contain; }
.consent:has(.consent__icon) .consent__actions { grid-column: 1 / -1; }
@media (min-width: 760px) {
	.consent:has(.consent__icon) { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; }
	.consent:has(.consent__icon) .consent__actions { grid-column: auto; }
	.consent__icon { align-self: center; }
}

/* On-page contents (code pages) */
.toc { margin-top: 16px; }
.toc__title { margin-bottom: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.toc ul { display: flex; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; list-style: none; }
.toc ul::-webkit-scrollbar { display: none; }
.toc a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--chip-bg, transparent); color: var(--text-2); font-size: 13px; text-decoration: none; white-space: nowrap; transition: color var(--t), border-color var(--t); }
.toc a:hover { color: var(--text); border-color: var(--text-3); }
@media (min-width: 680px) { .toc ul { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }
.prose h2[id], .section[aria-labelledby] { scroll-margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Sticky Copy + Claim bar on phones */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: var(--s1); box-shadow: 0 -12px 28px -16px rgba(0, 0, 0, .9); }
.sticky-cta[hidden], .sticky-cta:has(.dk-offer.is-blocked) { display: none; }
.sticky-cta .dk-offer { flex: 1; }
.sticky-cta .btn { min-height: 44px; }
.sticky-cta__code { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px dashed var(--code-line, var(--line-2)); border-radius: var(--r-2); background: var(--s2); color: var(--text); font: 600 14px/1 var(--font-code); letter-spacing: .04em; cursor: pointer; }
.sticky-cta__copy { color: var(--text-2); font: 600 12px/1 var(--font-ui); letter-spacing: 0; }
.sticky-cta__code.is-copied .sticky-cta__copy { color: var(--ok); }
.sticky-cta__name { color: var(--text); font-weight: 600; }
.has-sticky-cta { padding-bottom: 72px; }
.has-sticky-cta .toast { bottom: 84px; }
@media (min-width: 1100px) { .sticky-cta { display: none !important; } .has-sticky-cta { padding-bottom: 0; } }

/* Screenshot gallery on code pages */
.shots__grid { display: grid; gap: 16px; margin-top: 16px; }
.shots__item { margin: 0; }
.shots__item a { display: block; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s2); transition: border-color var(--t); }
.shots__item a:hover { border-color: var(--text-3); }
.shots__item img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: var(--s2); }
.shots__item figcaption { margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.shots > .muted { margin-top: 14px; }
.shot-view { width: min(1100px, calc(100% - 24px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s1); color: var(--text); }
.shot-view::backdrop { background: rgba(0, 0, 0, .8); }
.shot-view img { display: block; width: 100%; height: auto; }
.shot-view__stage { position: relative; }
.shot-view__nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: rgba(12, 13, 15, .78); color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; }
.shot-view__nav:hover { background: var(--s3); }
.shot-view__nav--prev { left: 8px; }
.shot-view__nav--next { right: 8px; }
.shot-view__count { color: var(--text); font-variant-numeric: tabular-nums; }
html:has(dialog[open]) { overflow: hidden; } /* the page doesn't scroll behind an open window */
dialog[open] { animation: dk-pop .16s ease-out; }
dialog[open]::backdrop { animation: dk-fade .16s ease-out; }
@keyframes dk-pop { from { opacity: 0; transform: scale(.98); } }
@keyframes dk-fade { from { opacity: 0; } }
.shot-view__cap { padding: 10px 14px; color: var(--text-2); font-size: 14px; }
.shot-view__close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--s3); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
@media (min-width: 680px) { .shots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .shots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Lists by payment method (template-hub.php), links between lists ---------- */
.hub__mix { margin-top: 12px; }
.more-row { display: flex; flex-wrap: wrap; column-gap: 24px; }

/* ---------- Wagering calculator (template-calculator.php) ---------- */
.calc { display: grid; gap: 20px; margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); }
.calc__inputs { display: grid; gap: 16px; align-content: start; }
.calc__field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.calc__field > label, .calc__field legend { padding: 0; color: var(--text); font-size: 14px; font-weight: 600; }
.calc__field legend { margin-bottom: 6px; }
.calc__input { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg); transition: border-color var(--t), opacity var(--t); }
.calc__input:focus-within { border-color: var(--text-3); outline: 2px solid var(--focus); outline-offset: 2px; }
.calc__input:has(input:disabled) { opacity: .45; }
.calc__input input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--text); font: 400 16px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.calc__input input:focus { outline: none; }
.calc__unit { padding-right: 12px; color: var(--text-3); font-size: 15px; }
.calc__hint { color: var(--text-3); font-size: 13px; line-height: 1.45; }
.calc__seg { display: flex; border: 1px solid var(--line-2); border-radius: var(--r-2); }
.calc__seg label { flex: 1; position: relative; display: flex; }
.calc__seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.calc__seg span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border-radius: calc(var(--r-2) - 1px); color: var(--text-2); font-size: 14px; text-align: center; transition: background-color var(--t), color var(--t); }
.calc__seg input:checked + span { background: var(--s3); color: var(--text); font-weight: 600; }
.calc__seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.calc__out { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--r-2); background: var(--s2); }
.calc__label { color: var(--text-2); font-size: 14px; }
.calc__big { color: var(--heading); font: 700 clamp(34px, 3vw + 22px, 48px)/1.05 var(--font-ui); font-stretch: var(--head-stretch, 100%); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc__rows { display: grid; margin: 4px 0 0; }
.calc__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.calc__rows dt { color: var(--text-2); font-size: 14px; }
.calc__rows dd { margin: 0; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.calc__rows dd.is-pos { color: var(--ok); }
.calc__rows dd.is-neg { color: var(--bad); }
.calc__say { color: var(--text); font-size: 15px; }
.calc__note { color: var(--text-3); font-size: 13px; line-height: 1.5; }
/* Case odds calculator: one row per item (value, chance, remove) */
.odds__head, .odds__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.odds__head { color: var(--text-3); font-size: 13px; }
.odds__rows { display: grid; gap: 8px; }
.odds__del { height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: transparent; color: var(--text-2); font: 400 20px/1 var(--font-ui); cursor: pointer; transition: border-color var(--t), color var(--t); }
.odds__add { justify-self: start; min-height: 44px; margin-top: 4px; padding: 0 14px; border: 1px dashed var(--line-2); border-radius: var(--r-2); background: transparent; color: var(--text); font: 600 14px/1 var(--font-ui); cursor: pointer; transition: border-color var(--t); }
.odds__del:hover, .odds__add:hover { border-color: var(--text-3); color: var(--text); }
.odds__del:focus-visible, .odds__add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Provably fair checker: hashes in full, wrapping anywhere */
.fair__hash { margin: 0; padding: 10px 12px; border-radius: var(--r-2); background: var(--bg); color: var(--text); font: 400 13px/1.5 ui-monospace, "DejaVu Sans Mono", monospace; overflow-wrap: anywhere; }
.fair__verdict { font-weight: 600; }
.fair__verdict.is-pos { color: var(--ok); }
.fair__verdict.is-neg { color: var(--bad); }
@media (min-width: 900px) {
	.calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 24px; }
	.calc__out { position: sticky; top: 24px; align-self: start; }
}

/* ---------- Cookie consent ---------- */
.linklike { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { text-decoration-color: currentColor; }
.consent {
	position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 70;
	display: grid; gap: 12px; max-width: 760px; margin: 0 auto; padding: 16px;
	border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s3); box-shadow: var(--shadow-2);
	font-size: 14px; line-height: 1.5;
}
.consent__text a { color: var(--text); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.consent__actions .btn-2 { flex: 1 1 120px; min-height: 44px; }
.consent__actions .linklike { flex: 0 0 auto; padding: 8px 4px; color: var(--text-2); }
.consent-dialog { width: min(480px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s2); color: var(--text); box-shadow: var(--shadow-2); }
.consent-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.consent-dialog__in { display: grid; gap: 12px; padding: 24px; }
.consent-dialog .consent-dialog__title { margin: 0; color: var(--heading); font: 700 20px/1.3 var(--font-ui); }
.consent-dialog p { color: var(--text-2); font-size: 14px; }
.consent-opt { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-2); }
.consent-opt label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.consent-opt input { width: 18px; height: 18px; accent-color: var(--text); }
.consent-opt p { margin-top: 4px; padding-left: 28px; }
.consent-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.consent-dialog__actions .btn-2 { flex: 1 1 120px; min-height: 44px; }
@media (min-width: 760px) {
	.consent { grid-template-columns: minmax(0, 1fr) auto; align-items: center; bottom: 16px; }
	.consent__actions .btn-2 { flex: none; }
}

/* Initials in place of a logo until one is uploaded. */
.card__initials { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--s2); color: var(--text-2); font: 700 13px/1 var(--font-ui); letter-spacing: .04em; }

/* Seasonal layer: data-season="halloween" on <html>. Switchable; nothing here loads outside the season
   (the font and pictures are only requested when these rules apply).
   Owner's direction (17.10.2026): like CSGORoll at Halloween — night scene behind the page, spooky headings,
   slime on the main buttons, witch hat on the wordmark, pumpkins on seasonal labels. Cards still come first. */
@font-face { font-family: "Creepster"; src: url("assets/fonts/creepster-dakebits.woff2") format("woff2"); font-display: swap; }
/* Creepster is narrow: a system font at 86% takes the same width until it arrives. */
@font-face { font-family: "Creepster Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica"), local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); size-adjust: 86%; }

:root[data-season="halloween"] {
	--bg: #120b1a;
	--s1: #1c1326;
	--s2: #251a33;
	--s3: #302242;
	--card-bg: rgba(28, 19, 38, .92);
	--chip-bg: rgba(18, 11, 26, .88);
	--line: #33243f;
	--line-2: #4a3560;
	--hdr-line: #3a2550;
	--text: #f4ebe2;
	--text-2: #c4b4d1;
	--text-3: #a897b8;
	--heading: #fff4e6;
	--heading-2: #ffa04a;
	--underline: rgba(244, 235, 226, .35);
	--focus: #fff4e6;
	--accent: #ff7b1c;
	--accent-hover: #ff9140;
	--on-accent: #1f0c00;
	--slime: #86d93f;
	--ok: #8fd4a6;
	--bad: #f2937f;
	--bad-bg: #2a1119;
	--bad-line: #6a2536;
	--season: rgba(255, 123, 28, .14);
	--on-season: #ffb36b;
	--season-line: rgba(255, 123, 28, .55);
	--shadow-1: 0 14px 30px -18px rgba(6, 0, 12, 1);
	--shadow-2: 0 28px 56px -24px rgba(6, 0, 12, 1), 0 2px 8px rgba(40, 8, 24, .55);
	--btn-shadow: inset 0 -3px 0 rgba(90, 30, 0, .35), 0 8px 18px -10px rgba(0, 0, 0, 1);
	--font-head: "Creepster", "Creepster Fallback", "Archivo", "Archivo Fallback", system-ui, sans-serif;
	--head-stretch: 100%;
	--h1-weight: 400;
	--h1-size: min(62px, 8.7cqi);
	--h1-track: .03em;
	--h2-weight: 400;
	--h2-size: clamp(30px, 2vw + 22px, 40px);
	--h2-track: .03em;
}

/* Night sky, spider and scenes sit behind the content (z-index -1 inside the isolated body). */
:root[data-season="halloween"] body { position: relative; isolation: isolate; }
:root[data-season="halloween"] .section h2 { color: var(--heading-2); }

/* Graveyard fence above the footer: one seamless tile repeated across the width. */
:root[data-season="halloween"] .foot { position: relative; }
:root[data-season="halloween"] .foot::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 64px; pointer-events: none;
	background: url("assets/season/art/fence.webp") 50% 100% / auto 64px repeat-x;
}

/* Slime dripping from the top edge of the main button (shape = mask, colour = --slime). */
:root[data-season="halloween"] .btn { position: relative; overflow: hidden; }
:root[data-season="halloween"] .btn::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11px; pointer-events: none;
	background: var(--slime);
	-webkit-mask: url("assets/season/slime.svg") 0 0 / 150px 11px repeat-x;
	mask: url("assets/season/slime.svg") 0 0 / 150px 11px repeat-x;
}

/* Witch hat on the wordmark, pumpkins on seasonal labels. */
.brand__hat, .icon-season { display: none; }
:root[data-season="halloween"] .brand { position: relative; }
:root[data-season="halloween"] .brand__hat { display: block; position: absolute; left: -11px; top: -13px; width: 27px; height: 20px; transform: rotate(-16deg); pointer-events: none; }
:root[data-season="halloween"] .icon-season { display: block; width: 16px; height: 16px; flex: none; }
:root[data-season="halloween"] .chip--season { color: var(--on-season); }
:root[data-season="halloween"] .tag--season { gap: 4px; padding-left: 4px; }
:root[data-season="halloween"] .tag--season .icon-season { width: 14px; height: 14px; }

/* Off-screen decor stands still (!important: per-piece rules set animation with the shorthand). */
[data-fx]:not(.is-visible) * { animation-play-state: paused !important; }
@keyframes dk-pulse { 50% { opacity: .55; } }
@keyframes dk-flicker { 0%, 100% { opacity: .9; } 12% { opacity: .62; } 18% { opacity: 1; } 41% { opacity: .74; } 55% { opacity: .96; } 68% { opacity: .66; } 84% { opacity: 1; } }

/* The wordmark hat tips on hover. */
:root[data-season="halloween"] .brand__hat { transition: transform .2s ease; }
:root[data-season="halloween"] .brand:hover .brand__hat { transform: rotate(-26deg) translateY(-2px); }
:root[data-season="halloween"] .brand__hat--art { left: -14px; top: -17px; width: 31px; height: auto; transform: rotate(-10deg); }
:root[data-season="halloween"] .brand:hover .brand__hat--art { transform: rotate(-20deg) translateY(-2px); }
/* Cobweb in the top-left corner; the spider drops on its thread, swings, climbs back in short pulls.
   Only where the left margin is free of content (>=1360px); behind the text, never clickable. */
.spider { display: none; }
@media (min-width: 1360px) {
	:root[data-season="halloween"] .spider { --web: clamp(130px, 50vw - 600px, 220px); --drop: 230px; display: block; position: absolute; z-index: -1; left: 0; top: 0; width: var(--web); pointer-events: none; }
}
@media (min-width: 1800px) {
	:root[data-season="halloween"] .spider { --drop: 270px; }
}
.spider__web { display: block; width: 100%; height: auto; opacity: .6; }
.spider__line { position: absolute; left: calc(var(--web) * .18 - 23px); top: calc(var(--web) * .55); width: 46px; height: calc(var(--drop) + 40px); overflow: hidden; transform-origin: 50% 0; animation: dk-spider-swing 26s ease-in-out infinite; }
.spider__drop { position: relative; animation: dk-spider-drop 26s infinite; }
.spider__drop::before { content: ""; position: absolute; left: calc(50% - .5px); bottom: calc(100% - 3px); width: 1px; height: calc(var(--drop) + 40px); background: rgba(226, 214, 240, .5); }
.spider__body { display: block; width: 46px; height: auto; transform-origin: 50% 5%; animation: dk-spider-legs 26s linear infinite; }
@keyframes dk-spider-drop {
	0%, 10% { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
	34% { transform: translateY(var(--drop)); }
	40% { transform: translateY(calc(var(--drop) - 12px)); }
	46%, 52% { transform: translateY(var(--drop)); }
	57%, 60% { transform: translateY(calc(var(--drop) * .7)); }
	65%, 68% { transform: translateY(calc(var(--drop) * .4)); }
	74% { transform: translateY(calc(var(--drop) * .08)); }
	76%, 100% { transform: translateY(0); }
}
@keyframes dk-spider-swing {
	0%, 34%, 52%, 100% { transform: rotate(0); }
	38% { transform: rotate(4deg); }
	43% { transform: rotate(-3deg); }
	48% { transform: rotate(1.5deg); }
}
@keyframes dk-spider-legs {
	0%, 52%, 57%, 60%, 65%, 68%, 74%, 100% { transform: rotate(0); }
	53.5%, 61.5%, 69.5% { transform: rotate(7deg); }
	55%, 63%, 71% { transform: rotate(-7deg); }
	56%, 64%, 72.5% { transform: rotate(4deg); }
}

img.icon-season { width: auto !important; height: 16px !important; }
.tag--season img.icon-season { height: 14px !important; }

@media (max-width: 639px) {
	:root[data-season="halloween"] .foot::before { height: 46px; background-size: auto 46px; }
}

/* Dashed promo frames (owner likes CSGORoll's dashed tournament box): the code coupon,
   cards with a Halloween promo, and the seasonal box under the list. */
:root[data-season="halloween"] {
	--code-line: rgba(255, 176, 92, .7);
	--code-bg: linear-gradient(100deg, rgba(255, 123, 28, .16), rgba(120, 40, 140, .12));
}
:root[data-season="halloween"] .card[data-promo="halloween"] { border: 1px dashed rgba(255, 176, 92, .55); }
.season-box { display: none; }
:root[data-season="halloween"] .season-box {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 16px;
	margin-top: 24px; padding: 20px; overflow: hidden;
	border: 2px dashed rgba(255, 176, 92, .75); border-radius: 14px;
	background: linear-gradient(100deg, #5a2a0e 0%, #3a1830 55%, #241334 100%);
	box-shadow: var(--shadow-2);
}
.season-box__title { margin: 0; color: var(--heading); font: 400 clamp(26px, 2vw + 18px, 36px)/1.05 var(--font-head); letter-spacing: .03em; }
.season-box__title b { color: var(--on-season); font-weight: 400; }
.season-box p { margin-top: 6px; color: var(--text); }
.season-box .btn { flex: none; display: inline-flex; width: auto; margin-top: 14px; }
@media (min-width: 1280px) {
	/* Filters stay left of the witch art: wrap instead of running under it. */
	:root[data-season="halloween"] body.has-season-hero .filters { flex-wrap: wrap; max-width: calc(100% - 440px); margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; overflow: visible; }
}
@media (min-width: 760px) {
	:root[data-season="halloween"] .season-box { grid-template-columns: minmax(0, 1fr) 360px; padding: 24px 32px; }
}

/* ---------- Team (/authors/, single-person.php): portraits are transparent cut-outs on a soft glow ---------- */
.avatar { display: inline-block; flex: none; width: var(--av, 40px); height: var(--av, 40px); overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 30%, var(--s3), var(--s1) 72%); box-shadow: 0 0 0 1px var(--line-2); vertical-align: middle; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.byline { display: inline-flex; align-items: center; gap: 8px; }
.byline a { color: var(--text); }
.person__head { display: grid; gap: 8px 40px; align-items: end; padding-top: 12px; }
.person__art { position: relative; z-index: 0; justify-self: center; width: min(220px, 62vw); }
.person__art::before { content: ""; position: absolute; z-index: -1; inset: 12% -18% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 179, 107, .16), rgba(111, 147, 255, .08) 60%, transparent); }
.person__art img { display: block; width: 100%; height: auto; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
.person__intro h1 { margin: 0; font-size: clamp(32px, 2.4vw + 22px, 46px); line-height: 1.08; }
.person__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 10px 0 0; color: var(--text-2); }
.person__handle { color: var(--text); font-weight: 600; }
.person__lead { max-width: 56ch; margin: 14px 0 0; color: var(--text-2); font-size: 17px; }
.person__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.person__links a { color: var(--text); }
.person__story { padding-top: 32px; }
.person__pages { margin: 8px 0 0; padding-left: 20px; color: var(--text-2); }
.person__pages a { color: var(--text); }
@media (min-width: 760px) {
	.person__head { grid-template-columns: 300px 1fr; }
	.person__art { width: 300px; }
	.person__intro { padding-bottom: 56px; }
}
.team { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .team { grid-template-columns: repeat(2, 1fr); } }
.team__item { position: relative; display: flex; gap: 18px; align-items: center; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--card-bg, var(--s1)); box-shadow: var(--shadow-1); }
.team__item:hover { border-color: var(--text-3); }
.team__name { margin: 0; font: 700 20px/1.2 var(--font-head); font-stretch: var(--head-stretch, 100%); }
.team__name a { color: var(--heading); text-decoration: none; }
.team__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.team__meta { margin: 2px 0 0; color: var(--text-2); font-size: 14px; }
.team__lead { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }
[data-season="halloween"] .person__art::before { background: radial-gradient(closest-side, rgba(255, 123, 28, .26), rgba(120, 60, 180, .16) 58%, transparent); }

/* ---------- Layered Halloween scenes (inc/season-scenes.php; owner's art, docs/art-kit.html) ----------
   A scene is a box; its units sit in % of the box, so the whole picture scales as one. Motion uses
   transform/opacity only, pauses off-screen ([data-fx]) and stops with reduced motion. */
.scene .u { position: absolute; }
.scene picture { display: contents; }
.scene .u img { display: block; width: 100%; height: auto; }
.scene .fx { position: absolute; pointer-events: none; border-radius: 50%; }
.scene .fx--glow { inset: -45%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 140, 30, .42), transparent 75%); animation: dk-flicker 2.6s linear infinite; }
.scene .u:has(.fx) { isolation: isolate; }

@keyframes dk-pulse { 50% { opacity: .55; } }
@keyframes dk-flicker { 0%, 100% { opacity: .9; } 12% { opacity: .62; } 18% { opacity: 1; } 41% { opacity: .74; } 55% { opacity: .96; } 68% { opacity: .66; } 84% { opacity: 1; } }
@keyframes dk-bob { 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes dk-bob-2 { 50% { transform: translateY(5px) rotate(-4deg); } }
@keyframes dk-twinkle { 0%, 100% { transform: scale(.35) rotate(0); opacity: .25; } 50% { transform: scale(1) rotate(25deg); opacity: 1; } }
@keyframes dk-hover { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-1.2deg); } }
@keyframes dk-fly-in { from { transform: translate(320px, -90px) scale(.7) rotate(-8deg); } to { transform: none; } }
@keyframes dk-flame { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.94, 1.1) skewX(2deg); } 50% { transform: scale(1.04, .93) skewX(-2deg); } 75% { transform: scale(.97, 1.06) skewX(1deg); } }
@keyframes dk-spin { to { transform: rotate(360deg); } }
@keyframes dk-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-9px) rotate(-10deg); } 55% { transform: translateY(0) rotate(4deg); } 75% { transform: translateY(-3px) rotate(-2deg); } }

/* Home, right of the H1 (>=1280px): the witch flies in once, then hovers among pumpkins and potions. */
.scene--hero { display: none; }
@media (min-width: 1280px) {
	:root[data-season="halloween"] main { overflow-x: clip; }
	:root[data-season="halloween"] .intro { position: relative; }
	:root[data-season="halloween"] .scene--hero { display: block; position: absolute; right: -8px; top: -14px; z-index: -1; width: 440px; aspect-ratio: 440 / 250; pointer-events: none; }
}
.scene--hero .u--witch { left: 18%; top: 12%; width: 66%; animation: dk-fly-in 1.5s cubic-bezier(.16, .84, .3, 1) .2s both; animation-play-state: running !important; }
.scene--hero .u--witch img { animation: dk-hover 5.5s ease-in-out 1.7s infinite; }
.scene--hero .u--pk1 { left: 84%; top: 9%; width: 15%; }
.scene--hero .u--pk2 { left: 2%; top: 58%; width: 11%; }
.scene--hero .u--pk3 { left: 13%; top: 6%; width: 8%; }
.scene--hero .u--po1 { left: 62%; top: 7%; width: 8.5%; }
.scene--hero .u--po2 { left: 89%; top: 54%; width: 8.5%; }
.scene--hero .u--pk1 img { animation: dk-bob 4.4s ease-in-out infinite; }
.scene--hero .u--pk2 img { animation: dk-bob-2 3.8s ease-in-out -1.2s infinite; }
.scene--hero .u--pk3 img { animation: dk-bob 5s ease-in-out -2.4s infinite; }
.scene--hero .u--po1 img { animation: dk-bob-2 4.8s ease-in-out -.6s infinite; }
.scene--hero .u--po2 img { animation: dk-bob 4.1s ease-in-out -3s infinite; }
.scene--hero .u--s1 { left: 84%; top: 74%; width: 4%; }
.scene--hero .u--s2 { left: 78%; top: 86%; width: 3%; }
.scene--hero .u--s3 { left: 92%; top: 82%; width: 3.5%; }
.scene--hero .u--s4 { left: 72%; top: 92%; width: 2%; }
.scene .u--s1 img, .scene .u--s2 img, .scene .u--s3 img, .scene .u--s4 img { animation: dk-twinkle 2.2s ease-in-out infinite; }
.scene .u--s2 img { animation-delay: -.6s; }
.scene .u--s3 img { animation-delay: -1.3s; }
.scene .u--s4 img { animation-delay: -1.7s; }

/* Night sky at the top of every page: moon, drifting clouds; on tablets and up bats and far hills. */
.sky { display: none; }
:root[data-season="halloween"] .sky {
	--moon-x: calc(100% - 96px); --moon-y: 120px; --moon: 130px;
	display: block; position: absolute; z-index: -1; inset: 0 0 auto; height: 460px; overflow: hidden; pointer-events: none;
	background: radial-gradient(circle at var(--moon-x) var(--moon-y), rgba(122, 90, 156, .26), transparent 340px);
	-webkit-mask-image: linear-gradient(#000 55%, transparent);
	mask-image: linear-gradient(#000 55%, transparent);
}
.sky .scene { position: absolute; inset: 0; }
/* Phones: the moon and one cloud only (the far layer and extra clouds are not even downloaded). */
@media (max-width: 767px) {
	.sky .scene--sky-far, .scene--sky .u--c2, .scene--sky .u--c3 { display: none; }
}
.scene--sky .u--moon { left: calc(var(--moon-x) - var(--moon) / 2); top: calc(var(--moon-y) - var(--moon) / 2); width: var(--moon); opacity: .45; }
.scene--sky .u--moon img { animation: dk-pulse 9s ease-in-out infinite; }
.scene--sky .u--c1 { left: 0; top: 150px; width: 240px; opacity: .4; animation: dk-drift 150s linear -40s infinite; }
.scene--sky .u--c2 { left: 0; top: 70px; width: 140px; opacity: .35; animation: dk-drift 110s linear -75s infinite; }
.scene--sky .u--c3 { left: 0; top: 230px; width: 150px; opacity: .3; animation: dk-drift 180s linear -10s infinite; }
@keyframes dk-drift { from { transform: translateX(-110%); } to { transform: translateX(100vw); } }
.scene--sky-far .u--land { left: 0; right: 0; bottom: 40px; height: clamp(190px, 24.7vw, 470px); }
.scene--sky-far .u--land img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.scene--sky-far .u--bat1, .scene--sky-far .u--bat2 { left: 0; overflow: hidden; aspect-ratio: 120 / 98; }
.scene--sky-far .u--bat1 { top: 110px; width: 44px; animation: dk-bat-a 26s linear infinite; }
.scene--sky-far .u--bat2 { top: 190px; width: 30px; animation: dk-bat-b 34s linear -14s infinite; }
.scene--sky-far .u--bat1 img, .scene--sky-far .u--bat2 img { width: 300%; max-width: none; animation: dk-flap .45s steps(1, end) infinite; }
.scene--sky-far .u--bat2 img { animation-duration: .38s; }
@keyframes dk-flap { 0% { transform: translateX(0); } 25% { transform: translateX(-33.333%); } 50% { transform: translateX(-66.667%); } 75% { transform: translateX(-33.333%); } }
@keyframes dk-bat-a { 0% { transform: translate(-60px, 0); } 15% { transform: translate(25vw, 24px); } 30% { transform: translate(50vw, -18px); } 45% { transform: translate(75vw, 16px); } 60%, 100% { transform: translate(calc(100vw + 60px), -10px); } }
@keyframes dk-bat-b { 0% { transform: translate(calc(100vw + 40px), 0); } 20% { transform: translate(70vw, -20px); } 40% { transform: translate(35vw, 14px); } 60%, 100% { transform: translate(-60px, -6px); } }
@media (min-width: 640px) {
	:root[data-season="halloween"] .sky { --moon: 170px; --moon-x: calc(100% - 140px); --moon-y: 150px; height: 760px; }
	.scene--sky .u--c1 { width: 340px; }
	.scene--sky .u--c2 { width: 180px; }
	.scene--sky .u--c3 { width: 200px; }
}
@media (min-width: 1280px) {
	/* Home: behind the flying witch. 404: in the empty space right of the ghost. Elsewhere it stays dim. */
	:root[data-season="halloween"] body:is(.has-season-hero, .error404) .sky { --moon: 210px; --moon-x: calc(50% + 372px); --moon-y: 168px; }
	:root[data-season="halloween"] body:is(.has-season-hero, .error404) .scene--sky .u--moon { opacity: .9; }
}

/* "Halloween promos" box under the list: candy basket, potions and pumpkins bob, coins glint. */
.season-box .scene--box { position: relative; width: 100%; max-width: 360px; aspect-ratio: 360 / 150; justify-self: center; pointer-events: none; }
.scene--box .u--basket { left: 30%; top: 6%; width: 41%; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.scene--box .u--po3 { left: 14%; top: 18%; width: 8.6%; }
.scene--box .u--po1 { left: 73%; top: 8%; width: 12.5%; }
.scene--box .u--pk2 { left: 84%; top: 50%; width: 14.7%; }
.scene--box .u--pk3 { left: 2%; top: 58%; width: 10%; }
.scene--box .u--co1 { left: 23%; top: 74%; width: 7%; }
.scene--box .u--co2 { left: 70%; top: 72%; width: 5%; }
.scene--box .u--co3 { left: 62%; top: 4%; width: 3%; }
.scene--box .u--s1 { left: 26%; top: 68%; width: 4.5%; }
.scene--box .u--s2 { left: 64%; top: 0; width: 3%; }
.scene--box .u--po3 img { animation: dk-bob 4.6s ease-in-out -1s infinite; }
.scene--box .u--po1 img { animation: dk-bob-2 4s ease-in-out infinite; }
.scene--box .u--pk2 img { animation: dk-bob 3.9s ease-in-out -2s infinite; }
.scene--box .u--pk3 img { animation: dk-bob-2 4.4s ease-in-out -.5s infinite; }
.scene--box .u--co1 img, .scene--box .u--co2 img, .scene--box .u--co3 img { animation: dk-bob 3.2s ease-in-out infinite; }
.scene--box .u--co2 img { animation-delay: -1.1s; }
.scene--box .u--co3 img { animation-delay: -2.2s; }

/* Beside "How we verify offers" (>=1100px): the magnifier checks the scroll by candle light. */
.section-art--verify { top: 6px; width: 300px; aspect-ratio: 300 / 160; }
.scene--verify .u--scroll { left: 10%; top: 18%; width: 86%; }
.scene--verify .u--candle { left: 0; top: 50%; width: 12%; }
.scene--verify .u--flame { left: 3%; top: 34.5%; width: 6%; }
.scene--verify .u--glass { left: 20%; top: 4%; width: 30%; animation: dk-scan 10s ease-in-out infinite; }
@keyframes dk-scan { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(105%, 14%) rotate(6deg); } 55% { transform: translate(60%, 30%) rotate(-3deg); } 80% { transform: translate(15%, 22%) rotate(2deg); } }
.scene .u--flame img { transform-origin: 50% 92%; animation: dk-flame 1.7s ease-in-out infinite; }
.scene .u--flame .fx--glow { inset: -110% -170%; background: radial-gradient(closest-side, rgba(255, 160, 50, .4), transparent 75%); animation-duration: 2.2s; }

/* Beside the FAQ (>=1100px): mist swirls inside the crystal ball, a kitten peeks over it now and then. */
.section-art--faq { top: 58px; width: 300px; aspect-ratio: 300 / 260; }
.scene--faq .u--cat { left: 31.7%; top: 28.8%; width: 30%; }
.scene--faq .u--cat img { animation: dk-peek 16s ease-in-out infinite; }
@keyframes dk-peek { 0%, 52%, 90%, 100% { transform: translateY(0); } 58%, 84% { transform: translateY(-80%); } 66% { transform: translateY(-80%) rotate(-7deg); } 74% { transform: translateY(-80%) rotate(5deg); } }
.scene--faq .u--ball { left: 16%; top: 20%; width: 61.6%; }
.scene--faq .u--mist { left: 23.3%; top: 22.7%; width: 46.7%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; mix-blend-mode: screen; opacity: .9; }
.scene--faq .u--mist img { height: 100%; animation: dk-spin 40s linear infinite; }
.scene--faq .u--candle { left: 2%; top: 80%; width: 15%; }
.scene--faq .u--flame { left: 6.8%; top: 70.3%; width: 6.5%; }

/* Page not found: a lost ghost floats by the signpost, its lantern flickers. */
.art-404 { position: relative; width: min(300px, 80vw); aspect-ratio: 300 / 240; margin: 24px 0 0; pointer-events: none; }
.scene--404 .u--post { left: 0; top: 8%; width: 46%; }
.scene--404 .u--pk { left: 84%; top: 66%; width: 14%; }
.scene--404 .u--pk img { animation: dk-bob 4s ease-in-out infinite; }
.scene--404 .u--ghost { left: 48%; top: 2%; width: 45%; animation: dk-ghost 4.6s ease-in-out infinite; }
@keyframes dk-ghost { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-3deg); } }
.scene .fx--lamp { left: -11%; top: 35%; width: 50%; height: 40%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 170, 60, .55), transparent); animation: dk-flicker 2.2s linear infinite; }

/* Footer props on the fence: graves (a ghost peeks out), cauldron (fire, bubbles, vapour), pumpkins. */
:root[data-season="halloween"] body.has-foot-props .foot { margin-top: 150px; }
.foot-props { display: none; }
:root[data-season="halloween"] .foot-props { display: block; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; z-index: 1; pointer-events: none; overflow-x: clip; overflow-y: visible; }
.foot-prop { position: absolute; bottom: -4px; }
.foot-prop--graves { left: 5%; height: 100px; aspect-ratio: 367 / 220; }
.foot-prop--cauldron { left: 50%; height: 118px; aspect-ratio: 274 / 260; transform: translateX(-50%); }
.foot-prop--pumpkins { right: 6%; height: 88px; aspect-ratio: 377 / 200; }
.scene--graves .u--stones { left: 0; top: 0; width: 100%; }
.scene--graves .u--ghost { left: 10%; top: 20%; width: 26%; }
.scene--graves .u--ghost img { animation: dk-ghost-peek 22s ease-in-out infinite; }
@keyframes dk-ghost-peek { 0%, 60%, 90%, 100% { transform: translateY(0); } 66%, 84% { transform: translateY(-58%); } 74% { transform: translateY(-58%) rotate(-8deg); } }
.scene--graves .u--candle { left: 38%; top: 77%; width: 14%; }
.scene--graves .u--flame { left: 42.4%; top: 63.6%; width: 6%; }
.scene--cauldron .u--pot { left: 0; top: 0; width: 100%; }
.scene--cauldron .u--f1 { left: 30%; top: 64%; width: 14%; }
.scene--cauldron .u--f2 { left: 42.5%; top: 60%; width: 15%; }
.scene--cauldron .u--f3 { left: 57%; top: 66%; width: 11%; }
.scene--cauldron .u--f2 .fx--glow { inset: -30% -90%; background: radial-gradient(closest-side, rgba(255, 130, 30, .45), transparent 75%); animation-duration: 1.9s; }
.scene--cauldron .u--f1 img, .scene--cauldron .u--f2 img, .scene--cauldron .u--f3 img { transform-origin: 50% 92%; animation: dk-flame 1.3s ease-in-out infinite; }
.scene--cauldron .u--f2 img { animation-duration: 1.6s; animation-delay: -.5s; }
.scene--cauldron .u--f3 img { animation-duration: 1.1s; animation-delay: -.8s; }
.scene .fx--brew { inset: -45% -25% 45%; z-index: -1; background: radial-gradient(closest-side, rgba(134, 217, 63, .35), transparent 72%); animation: dk-pulse 3.2s ease-in-out infinite; }
.scene--cauldron .u--b1 { left: 34%; top: 4%; width: 9%; }
.scene--cauldron .u--b2 { left: 52%; top: 6%; width: 7%; }
.scene--cauldron .u--b3 { left: 62%; top: 3%; width: 5.5%; }
.scene--cauldron .u--b4 { left: 44%; top: 7%; width: 4%; }
.scene--cauldron [class*="u--b"] img { opacity: 0; animation: dk-bubble 3.2s ease-in infinite; }
.scene--cauldron .u--b2 img { animation-duration: 2.8s; animation-delay: -1s; }
.scene--cauldron .u--b3 img { animation-duration: 3.6s; animation-delay: -2.1s; }
.scene--cauldron .u--b4 img { animation-duration: 2.5s; animation-delay: -.4s; }
@keyframes dk-bubble { 0% { transform: translateY(0) scale(.4); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(3px, -300%) scale(1); opacity: 1; } 85% { transform: translate(-2px, -360%) scale(1.25); opacity: .6; } 100% { transform: translate(-2px, -380%) scale(1.6); opacity: 0; } }
.scene--cauldron .u--v1 { left: 34%; top: -30%; width: 12%; }
.scene--cauldron .u--v2 { left: 54%; top: -36%; width: 12%; }
.scene--cauldron .u--v1 img, .scene--cauldron .u--v2 img { transform-origin: 50% 100%; opacity: 0; animation: dk-vapor 5s ease-out infinite; }
.scene--cauldron .u--v2 img { animation-delay: -2.5s; }
@keyframes dk-vapor { 0% { transform: translateY(30%) scale(.7, .5); opacity: 0; } 30% { opacity: .75; } 100% { transform: translateY(-25%) scale(1.2, 1.3); opacity: 0; } }
.scene--pumpkins .u--patch { left: 0; top: 0; width: 100%; }
.scene .fx--halo { inset: -25% -12%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 140, 30, .34), transparent 75%); animation: dk-flicker 2.6s linear infinite; }
.scene .fx--face1, .scene .fx--face2, .scene .fx--face3 { background: radial-gradient(closest-side, rgba(255, 200, 90, .6), transparent); mix-blend-mode: screen; animation: dk-flicker 2.1s linear infinite; }
.scene .fx--face1 { left: 9%; top: 46%; width: 22%; height: 32%; }
.scene .fx--face2 { left: 37%; top: 36%; width: 27%; height: 40%; animation-duration: 2.9s; }
.scene .fx--face3 { left: 70%; top: 58%; width: 16%; height: 24%; animation-duration: 1.7s; }
@media (max-width: 639px) {
	:root[data-season="halloween"] .foot-props { height: 80px; }
	.foot-prop--graves { display: none; }
	.foot-prop--cauldron { left: 30%; height: 76px; }
	.foot-prop--pumpkins { right: 4%; height: 56px; }
}

/* 18+ on a little tombstone in the header (the label stays real text); cookie icon hops in. */
.age--stone { position: relative; justify-content: center; width: 32px; height: 35px; padding: 0; border: 0; color: #2b1f38; font: 400 12px/1 var(--font-head); letter-spacing: .02em; }
.age--stone img { position: absolute; inset: 0; width: 100%; height: 100%; }
.age--stone span { position: relative; margin-top: 4px; }
.age--stone:hover { animation: dk-hop .7s ease-out; }
:root[data-season="halloween"] .consent__icon { animation: dk-hop .9s ease-out .6s both; }
@media (prefers-reduced-motion: reduce) {
	.scene--sky-far .u--bat1, .scene--sky-far .u--bat2 { display: none; }
}