/* Casino-In-One — retro 2000s casino guide, written with 2026 CSS
   (cascade layers, native nesting, oklch, container queries, :has(),
   scroll-driven animation, @starting-style, view transitions). */

@layer reset, tokens, base, layout, components, utilities;

@font-face {
	font-family: "VT323";
	src: url("../fonts/vt323.woff2") format("woff2");
	font-display: swap;
}

@view-transition { navigation: auto; }

/* ------------------------------------------------------------ reset */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: none; text-size-adjust: none; interpolate-size: allow-keywords; }
	body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
	img, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
	input, button, select, textarea { font: inherit; color: inherit; }
	textarea { field-sizing: content; min-block-size: 6lh; }
	:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	}
}

/* ------------------------------------------------------------ tokens */
@layer tokens {
	:root {
		color-scheme: light;

		--burgundy-900: oklch(0.18 0.06 15);
		--burgundy-700: oklch(0.36 0.14 15);
		--burgundy-600: oklch(0.43 0.17 15);
		--burgundy-500: oklch(0.5 0.19 16);
		--gold-500: oklch(0.82 0.15 85);
		--gold-600: oklch(0.7 0.14 78);
		--gold-700: oklch(0.55 0.11 75);
		--cream: oklch(0.975 0.02 88);
		--paper: oklch(0.995 0.005 90);
		--sand: oklch(0.92 0.05 85);
		--ink: oklch(0.22 0.01 30);
		--ink-soft: oklch(0.42 0.01 30);
		--link: oklch(0.45 0.16 258);
		--link-hover: oklch(0.55 0.18 45);
		--green-500: oklch(0.68 0.18 135);
		--green-700: oklch(0.45 0.13 135);
		--orange-500: oklch(0.76 0.17 65);
		--orange-700: oklch(0.56 0.15 50);
		--led-green: oklch(0.88 0.27 142);
		--led-red: oklch(0.65 0.25 27);

		--font-body: Verdana, Tahoma, Geneva, "DejaVu Sans", sans-serif;
		--font-head: "Trebuchet MS", "Lucida Grande", Verdana, sans-serif;
		--font-display: Impact, Haettenschweiler, "Arial Black", sans-serif;
		--font-led: "VT323", "Courier New", ui-monospace, monospace;

		--radius: 8px;
		--frame: 1120px;
		--gutter: clamp(12px, 2vw, 18px);
		--shadow: 0 1px 3px oklch(0 0 0 / 0.2);

		/* Web 2.0 glossy gradient: light top half, hard edge at 50 %. */
		--gloss-dark: linear-gradient(oklch(0.48 0 0) 0%, oklch(0.31 0 0) 50%, oklch(0.16 0 0) 51%, oklch(0.25 0 0) 100%);
		--gloss-gold: linear-gradient(oklch(0.92 0.1 88) 0%, oklch(0.83 0.16 80) 50%, oklch(0.76 0.17 68) 51%, oklch(0.81 0.16 75) 100%);
		--gloss-red: linear-gradient(var(--burgundy-500) 0%, var(--burgundy-600) 50%, var(--burgundy-700) 51%, oklch(0.4 0.15 15) 100%);
		--gloss-green: linear-gradient(oklch(0.86 0.15 130) 0%, oklch(0.72 0.18 135) 50%, oklch(0.6 0.17 138) 51%, oklch(0.68 0.18 135) 100%);
		--gloss-orange: linear-gradient(oklch(0.88 0.11 75) 0%, oklch(0.78 0.17 65) 50%, oklch(0.7 0.18 55) 51%, oklch(0.76 0.17 62) 100%);
		--gloss-silver: linear-gradient(oklch(1 0 0) 0%, oklch(0.95 0 0) 50%, oklch(0.88 0 0) 51%, oklch(0.93 0 0) 100%);
	}
}

/* ------------------------------------------------------------ base */
@layer base {
	html { scroll-behavior: smooth; scroll-padding-block-start: 1rem; }

	body {
		font: 1rem/1.6 var(--font-body);
		color: var(--ink);
		background-color: var(--burgundy-900);
		background-image:
			repeating-linear-gradient(45deg, oklch(1 0 0 / 0.025) 0 2px, transparent 2px 9px),
			radial-gradient(ellipse at 50% 0, oklch(0.4 0.15 15) 0%, oklch(0.24 0.08 15) 45%, oklch(0.12 0.04 15) 100%);
		background-attachment: fixed;
		padding: 18px 10px 28px;
	}

	a {
		color: var(--link);
		text-underline-offset: 0.15em;
		&:hover { color: var(--link-hover); }
		&:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: 2px; }
	}

	h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; text-wrap: balance; }
	p, li { text-wrap: pretty; }

	::selection { background: var(--gold-500); color: var(--burgundy-900); }

	:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
}

/* ------------------------------------------------------------ layout */
@layer layout {
	.frame {
		max-inline-size: var(--frame);
		margin-inline: auto;
		background: var(--cream);
		border: 1px solid #000;
		box-shadow: 0 0 0 4px var(--gold-600), 0 0 0 5px #000, 0 0 50px oklch(0 0 0 / 0.85);
	}

	.layout {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gutter);
		padding: var(--gutter);
		align-items: flex-start;
	}

	.content {
		flex: 999 1 560px;
		min-inline-size: 0;
		display: flex;
		flex-direction: column;
		gap: var(--gutter);
		&:focus { outline: none; }
	}

	.sidebar {
		flex: 1 1 260px;
		display: flex;
		flex-direction: column;
		gap: var(--gutter);
		@media (min-width: 900px) { position: sticky; inset-block-start: 12px; }
	}

	.layout--single .content { flex-basis: 100%; }
}

/* ------------------------------------------------------------ components */
@layer components {

	/* --- reading progress (scroll-driven) */
	.progress {
		position: fixed;
		inset: 0 0 auto;
		block-size: 4px;
		z-index: 50;
		background: var(--gloss-gold);
		transform-origin: 0 50%;
		transform: scaleX(0);
		@supports (animation-timeline: scroll()) {
			animation: progress linear both;
			animation-timeline: scroll(root block);
		}
	}
	@keyframes progress { to { transform: scaleX(1); } }

	.skip-link {
		position: absolute;
		inset-inline-start: 1rem;
		inset-block-start: -10rem;
		z-index: 100;
		padding: 0.6rem 1rem;
		background: var(--gold-500);
		color: var(--burgundy-900);
		font-weight: bold;
		&:focus { inset-block-start: 1rem; }
	}

	/* --- top bar */
	.topbar {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 4px 12px;
		padding: 4px 12px;
		background: linear-gradient(oklch(0.27 0 0), oklch(0.12 0 0));
		color: oklch(0.85 0 0);
		font-size: 0.75rem;
		border-block-end: 1px solid #000;

		a { color: var(--gold-500); text-decoration: none; &:hover { color: #fff; text-decoration: underline; } }
	}
	.topbar__menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0 14px;
		list-style: none;
		padding: 0;
		li + li::before { content: "|"; margin-inline-end: 14px; color: oklch(0.5 0 0); }
	}
	.topbar__meta abbr { text-decoration: none; }

	/* --- masthead */
	.masthead {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 18px 20px;
		background-color: oklch(0.32 0.12 15);
		background-image:
			radial-gradient(circle at 18% 40%, oklch(0.88 0.15 88 / 0.28) 0, transparent 38%),
			repeating-linear-gradient(90deg, oklch(0 0 0 / 0.12) 0 1px, transparent 1px 6px),
			linear-gradient(oklch(0.42 0.16 15), oklch(0.24 0.09 15));
		border-block-end: 3px solid var(--gold-600);
	}

	.brand {
		display: flex;
		align-items: center;
		gap: 12px;
		text-decoration: none;
	}
	.brand__coin {
		display: grid;
		place-items: center;
		inline-size: 64px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: radial-gradient(circle at 35% 30%, oklch(0.96 0.08 95), var(--gold-500) 40%, var(--gold-700) 100%);
		border: 2px solid var(--burgundy-900);
		box-shadow: 0 0 0 3px var(--gold-500), 0 4px 10px oklch(0 0 0 / 0.6);
		font: 900 2rem/1 var(--font-display);
		color: var(--burgundy-700);
	}
	.brand__logo { inline-size: 64px; border-radius: 50%; }
	.brand__text { display: grid; gap: 4px; }
	.brand__name {
		font: 900 clamp(1.8rem, 4vw, 2.5rem)/1 var(--font-display);
		letter-spacing: 1px;
		background: linear-gradient(oklch(0.98 0.05 95) 0%, var(--gold-500) 45%, var(--gold-700) 55%, oklch(0.9 0.12 90) 100%);
		background-clip: text;
		color: transparent;
		filter: drop-shadow(0 2px 0 oklch(0.15 0.05 15));
		span { color: #fff; -webkit-text-fill-color: #fff; }
	}
	.brand__tagline { font: italic 0.85rem/1.3 Georgia, serif; color: oklch(0.92 0.07 90); }

	/* --- search */
	.search {
		display: flex;
		gap: 6px;
		align-items: center;
	}
	.search__input {
		inline-size: min(240px, 60vw);
		padding: 6px 8px;
		border: 1px solid oklch(0.45 0 0);
		border-block-start-color: oklch(0.3 0 0);
		border-radius: 3px;
		background: #fff;
		box-shadow: inset 1px 1px 2px oklch(0 0 0 / 0.2);
	}

	/* --- glossy main navigation */
	.mainnav {
		background: oklch(0.16 0 0);
		border-block-end: 1px solid #000;
	}
	.mainnav__toggle { display: none; }
	.mainnav__menu {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		margin: 0;
		padding: 0;

		> li { position: relative; }

		a {
			display: block;
			padding: 0 16px;
			line-height: 40px;
			color: #fff;
			font: bold 0.8rem/40px var(--font-body);
			text-transform: uppercase;
			text-decoration: none;
			background: var(--gloss-dark);
			border-inline-start: 1px solid oklch(0.5 0 0);
			border-inline-end: 1px solid #000;
			text-shadow: 0 -1px 0 #000;
		}

		> li > a:hover,
		> li:focus-within > a,
		> .current-menu-item > a,
		> .current-menu-ancestor > a,
		> .current-page-ancestor > a {
			color: oklch(0.25 0.06 45);
			text-shadow: 0 1px 0 oklch(0.95 0.06 90);
			background: var(--gloss-gold);
		}

		.sub-menu {
			position: absolute;
			inset-inline-start: 0;
			inset-block-start: 100%;
			z-index: 30;
			min-inline-size: 240px;
			list-style: none;
			margin: 0;
			padding: 4px 0;
			background: var(--paper);
			border: 1px solid var(--gold-700);
			border-radius: 0 0 var(--radius) var(--radius);
			box-shadow: 0 6px 16px oklch(0 0 0 / 0.35);
			opacity: 0;
			visibility: hidden;
			translate: 0 -4px;
			transition: opacity 0.15s, translate 0.15s, visibility 0s 0.15s;

			a {
				background: none;
				border: 0;
				color: var(--burgundy-700);
				text-transform: none;
				text-shadow: none;
				font: 0.85rem/1.4 var(--font-body);
				padding: 7px 14px;
				&::before { content: "► "; color: var(--gold-600); font-size: 0.7em; }
				&:hover, &[aria-current] { background: oklch(0.95 0.06 90); color: var(--link-hover); }
			}
		}

		> li:is(:hover, :focus-within) > .sub-menu {
			opacity: 1;
			visibility: visible;
			translate: 0;
			transition-delay: 0s;
		}
	}

	@media (max-width: 760px) {
		.mainnav { padding: 6px 10px; }
		.mainnav__toggle { display: inline-block; }
		.mainnav__panel {
			inset: 0 auto 0 0;
			inline-size: min(86vw, 340px);
			block-size: 100dvh;
			margin: 0;
			padding: 12px;
			border: 0;
			border-inline-end: 3px solid var(--gold-600);
			background: var(--burgundy-900);
			overflow-y: auto;
			transition: translate 0.25s, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
			translate: -100% 0;
			&:popover-open { translate: 0; @starting-style { translate: -100% 0; } }
			&::backdrop { background: oklch(0 0 0 / 0.6); }
		}
		.mainnav__menu {
			flex-direction: column;
			.sub-menu { position: static; opacity: 1; visibility: visible; translate: 0; box-shadow: none; border-radius: 0; }
		}
	}
	@media (min-width: 761px) {
		/* The popover is a plain block on desktop. */
		.mainnav__panel { display: block; position: static; inset: auto; inline-size: auto; block-size: auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
	}

	/* --- LED ticker of recent updates */
	.ticker {
		display: flex;
		align-items: center;
		background: #000;
		border-block-end: 2px solid var(--gold-600);
		overflow: hidden;
		font-size: 0.8rem;
	}
	.ticker__label {
		flex: none;
		padding: 0 10px;
		background: var(--burgundy-500);
		color: #fff;
		font-weight: bold;
		line-height: 28px;
		text-transform: uppercase;
	}
	.ticker__track { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
	.ticker__list {
		display: flex;
		inline-size: max-content;
		gap: 36px;
		padding-inline-start: 20px;
		animation: ticker 70s linear infinite;
		font: 1.3rem/28px var(--font-led);

		a { color: var(--led-green); text-decoration: none; &:hover { text-decoration: underline; } }
		li::before { content: "+++ "; color: var(--gold-500); }
	}
	.ticker:is(:hover, :focus-within) .ticker__list { animation-play-state: paused; }
	.ticker__date { color: oklch(0.75 0 0); margin-inline-start: 8px; }
	@keyframes ticker { to { translate: -50% 0; } }

	/* --- breadcrumbs */
	.crumbs ol {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		list-style: none;
		padding: 0;
		font-size: 0.8rem;
		color: var(--ink-soft);
		li + li::before { content: "»"; margin-inline-end: 4px; color: var(--gold-700); }
	}

	/* --- boxes (sidebar style) */
	.box {
		background: var(--paper);
		border: 1px solid var(--gold-700);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
	}
	.box-head {
		margin: 0;
		padding: 7px 12px;
		font: bold 0.8rem/1.3 var(--font-body);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #fff;
		background: var(--gloss-red);
		border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
		text-shadow: 0 -1px 0 var(--burgundy-900);
		border-block-end: 1px solid var(--burgundy-900);
		&::before { content: "» "; }
		a { color: #fff; text-decoration: none; &:hover { text-decoration: underline; } }
	}
	.box__list {
		list-style: none;
		margin: 0;
		padding: 4px 12px 10px;
		li { padding: 6px 0; border-block-end: 1px dotted var(--sand); &:last-child { border: 0; } }
		a { color: var(--burgundy-700); text-decoration: none; &:hover { color: var(--link-hover); text-decoration: underline; } }
	}
	.box__list--flags li { display: flex; align-items: center; gap: 8px; }
	.flag {
		inline-size: 26px;
		block-size: 16px;
		border: 1px solid oklch(0.35 0 0);
		font: bold 0.55rem/14px var(--font-body);
		text-align: center;
		color: #fff;
		text-shadow: 0 1px 1px #000;
		&.flag--fr { background: linear-gradient(90deg, oklch(0.4 0.18 262) 33%, #ddd 33% 66%, oklch(0.55 0.22 27) 66%); }
		&.flag--be { background: linear-gradient(90deg, #111 33%, oklch(0.82 0.17 90) 33% 66%, oklch(0.55 0.22 27) 66%); }
		&.flag--ch { background: oklch(0.55 0.22 27); }
		&.flag--qc { background: oklch(0.45 0.16 258); }
		&.flag--lu { background: linear-gradient(oklch(0.55 0.22 27) 33%, #ddd 33% 66%, oklch(0.65 0.13 235) 66%); }
	}

	.toc__list {
		margin: 0;
		padding: 8px 12px 10px 32px;
		font-size: 0.85rem;
		li { padding-block: 3px; }
		a { color: var(--burgundy-700); &[aria-current="true"] { font-weight: bold; color: var(--link-hover); } }
	}

	.led-box {
		background: #000;
		border: 2px solid var(--gold-600);
		text-align: center;
		padding: 12px 10px;
		color: oklch(0.85 0 0);
		box-shadow: 0 0 12px oklch(0.8 0.17 80 / 0.35);
		a { color: var(--gold-500); }
	}
	.led-box__title { font: bold 0.75rem var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-500); }
	.led-box__number a {
		font: 2.2rem/1.1 var(--font-led);
		color: var(--led-green);
		text-decoration: none;
		text-shadow: 0 0 8px var(--led-green);
	}
	.led-box__text, .led-box__more { font-size: 0.8rem; }

	/* --- article */
	.entry {
		background: var(--paper);
		border: 1px solid var(--sand);
		border-radius: var(--radius);
		padding: clamp(14px, 3vw, 24px);
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.entry__title {
		font-size: clamp(1.5rem, 3.4vw, 2rem);
		color: var(--burgundy-600);
		padding-block-end: 8px;
		border-block-end: 2px dashed var(--sand);
	}
	.entry__updated { font-size: 0.85rem; color: var(--ink-soft); margin-block-start: 6px; }
	.entry__foot {
		font-size: 0.9rem;
		padding: 10px 12px;
		background: oklch(0.96 0.04 90);
		border: 1px dashed var(--gold-600);
		border-radius: 6px;
	}

	.byline {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-block-start: 10px;
		font-size: 0.85rem;
		color: var(--ink-soft);
		img { border-radius: 4px; border: 2px solid var(--gold-600); }
	}
	.byline__role { display: inline-block; margin-inline-start: 6px; padding: 0 6px; background: var(--sand); border-radius: 3px; font-size: 0.75rem; color: var(--ink); }

	/* Long-form typography */
	.prose {
		font-size: 1.02rem;
		max-inline-size: 72ch;

		> * + * { margin-block-start: 1em; }
		h2 {
			margin-block-start: 1.8em;
			font-size: 1.35rem;
			color: var(--burgundy-600);
			padding-block-end: 4px;
			border-block-end: 2px dashed var(--sand);
			scroll-margin-block-start: 1rem;
		}
		h3 { margin-block-start: 1.4em; font-size: 1.1rem; color: var(--burgundy-700); }
		ul, ol { padding-inline-start: 1.4em; li + li { margin-block-start: 0.35em; } }
		ul li::marker { content: "► "; color: var(--gold-600); font-size: 0.75em; }
		blockquote {
			padding: 10px 14px;
			background: oklch(0.97 0.04 95);
			border: 1px dashed var(--gold-600);
			border-radius: 6px;
			font-size: 0.95rem;
		}
		a.ext::after { content: " ↗"; font-size: 0.8em; }
		hr { border: 0; border-block-start: 2px dashed var(--sand); }
		code { font: 0.95em var(--font-led); background: var(--sand); padding: 0 4px; border-radius: 3px; }
	}

	mark.cio-todo {
		background: repeating-linear-gradient(45deg, oklch(0.97 0.1 100) 0 8px, oklch(0.93 0.13 95) 8px 16px);
		color: oklch(0.35 0.08 60);
		padding: 0 3px;
		border: 1px dashed var(--gold-700);
		border-radius: 3px;
		font-size: 0.9em;
	}

	/* Tables: scroll in a box on small screens */
	.table-wrap {
		overflow-x: auto;
		border: 1px solid var(--gold-700);
		border-radius: 6px;
		max-inline-size: 100%;
		&:focus-visible { outline: 3px solid var(--gold-500); }
	}
	table {
		inline-size: 100%;
		border-collapse: collapse;
		font-size: 0.88rem;
		min-inline-size: 520px;
		th {
			padding: 7px 8px;
			text-align: start;
			font-size: 0.75rem;
			text-transform: uppercase;
			color: oklch(0.3 0 0);
			background: linear-gradient(oklch(0.98 0 0), oklch(0.88 0 0));
			border-block-end: 1px solid oklch(0.75 0 0);
		}
		td { padding: 8px; border-block-start: 1px solid oklch(0.92 0.03 85); vertical-align: top; }
		tbody tr:nth-child(even) td { background: oklch(0.975 0.02 88); }
		tbody tr:hover td { background: oklch(0.96 0.07 95); }
	}

	/* --- notices */
	.notice {
		padding: 10px 14px;
		border-radius: 6px;
		font-size: 0.9rem;
		background: oklch(0.96 0.03 250);
		border: 1px solid oklch(0.7 0.08 250);
	}
	.notice--legal { background: oklch(0.96 0.03 250); border-inline-start: 6px solid oklch(0.5 0.15 255); }
	.notice--preview { background: oklch(0.95 0.08 95); border-color: var(--gold-700); }
	.disclosure {
		font-size: 0.8rem;
		color: var(--ink-soft);
		padding: 6px 10px;
		background: oklch(0.97 0.01 90);
		border-block: 1px dotted var(--gold-600);
	}
	.tag {
		display: inline-block;
		padding: 0 6px;
		margin-inline-end: 4px;
		border: 1px solid oklch(0.55 0 0);
		border-radius: 3px;
		font: bold 0.65rem/1.6 var(--font-body);
		text-transform: uppercase;
		color: oklch(0.35 0 0);
		background: var(--gloss-silver);
	}

	/* --- buttons */
	.btn {
		display: inline-block;
		padding: 9px 18px;
		border-radius: 999px;
		font: bold 0.85rem/1.2 var(--font-body);
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		border: 1px solid oklch(0.55 0 0);
		background: var(--gloss-silver);
		color: oklch(0.25 0 0);
		box-shadow: inset 0 1px 0 #fff, 0 2px 3px oklch(0 0 0 / 0.3);
		transition: filter 0.15s;
		&:hover { filter: brightness(1.08); color: oklch(0.25 0 0); }
		&:active { translate: 0 1px; }
	}
	.btn--green {
		border-color: var(--green-700);
		background: var(--gloss-green);
		color: #fff;
		text-shadow: 0 -1px 0 oklch(0.35 0.1 135);
		box-shadow: inset 0 1px 0 oklch(0.95 0.08 130), 0 2px 3px oklch(0 0 0 / 0.35);
		&:hover { color: #fff; }
	}
	.btn--orange {
		padding: 12px 26px;
		font-size: 1rem;
		text-transform: uppercase;
		border-color: var(--orange-700);
		background: var(--gloss-orange);
		color: #fff;
		text-shadow: 0 -1px 0 oklch(0.4 0.12 50);
		box-shadow: inset 0 1px 0 oklch(0.96 0.05 80), 0 3px 6px oklch(0 0 0 / 0.45);
		&:hover { color: #fff; }
	}
	.btn--silver { color: oklch(0.25 0 0); }

	.gloss {
		position: relative;
		overflow: hidden;
		&::after {
			content: "";
			position: absolute;
			inset: 0 0 50%;
			background: linear-gradient(oklch(1 0 0 / 0.45), oklch(1 0 0 / 0.08));
			pointer-events: none;
		}
	}

	.burst {
		display: grid;
		place-items: center;
		inline-size: 96px;
		aspect-ratio: 1;
		background: radial-gradient(oklch(0.97 0.2 105), oklch(0.85 0.17 85));
		color: var(--burgundy-600);
		font: 900 1.9rem/1 var(--font-display);
		rotate: 8deg;
		clip-path: polygon(50% 0, 61% 13%, 77% 5%, 79% 22%, 96% 24%, 88% 39%, 100% 50%, 88% 61%, 96% 76%, 79% 78%, 77% 95%, 61% 87%, 50% 100%, 39% 87%, 23% 95%, 21% 78%, 4% 76%, 12% 61%, 0 50%, 12% 39%, 4% 24%, 21% 22%, 23% 5%, 39% 13%);
	}

	.stars { color: oklch(0.75 0.16 75); letter-spacing: 1px; }

	/* --- home */
	.intro {
		background: var(--paper);
		border: 1px solid var(--sand);
		border-radius: var(--radius);
		padding: clamp(14px, 3vw, 24px);
		display: grid;
		gap: 12px;
	}
	.intro__title { font-size: clamp(1.5rem, 3.6vw, 2.1rem); color: var(--burgundy-600); }
	.trust-row {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		a {
			display: inline-block;
			padding: 6px 12px;
			border: 1px solid var(--gold-600);
			border-radius: 6px;
			background: linear-gradient(var(--paper), oklch(0.94 0.05 88));
			color: var(--burgundy-700);
			font-size: 0.85rem;
			text-decoration: none;
			&:hover { border-color: var(--burgundy-600); }
		}
	}
	.section-title { font-size: 1.3rem; color: var(--burgundy-600); margin-block-end: 10px; }
	.hubs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gutter); }
	.hub-box__pitch { padding: 8px 12px 0; font-size: 0.85rem; color: var(--ink-soft); }

	.meter-list { padding: 12px; display: grid; gap: 8px; }
	.meter-list__item { display: grid; grid-template-columns: minmax(0, 12rem) 1fr 3.5rem; gap: 10px; align-items: center; font-size: 0.85rem; }
	.meter-list__value { text-align: end; font-weight: bold; }
	meter {
		inline-size: 100%;
		block-size: 14px;
		appearance: none;
		background: oklch(0.92 0 0);
		border: 1px solid oklch(0.6 0 0);
		border-radius: 7px;
		&::-webkit-meter-bar { background: oklch(0.92 0 0); border: 0; border-radius: 7px; block-size: 14px; }
		&::-webkit-meter-optimum-value {
			background: repeating-linear-gradient(-45deg, oklch(1 0 0 / 0.3) 0 7px, transparent 7px 14px), var(--orange-500);
			border-radius: 7px;
		}
		&::-moz-meter-bar { background: var(--orange-500); border-radius: 7px; }
	}
	.method-teaser > p { padding: 0 12px 12px; }

	.news-list { padding: 4px 12px 10px; }
	.news-list__item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 0;
		border-block-end: 1px dotted var(--sand);
		&:last-child { border: 0; }
	}
	.news-list__date {
		flex: none;
		inline-size: 44px;
		text-align: center;
		padding: 2px 0;
		font-size: 0.65rem;
		line-height: 1.2;
		text-transform: uppercase;
		background: linear-gradient(#fff, oklch(0.92 0 0));
		border: 1px solid oklch(0.7 0 0);
		border-radius: 4px;
		b { display: block; font-size: 1.1rem; color: var(--burgundy-500); }
	}

	/* --- hub children */
	.hub { display: grid; gap: 10px; }
	.hub__title { font-size: 1.25rem; color: var(--burgundy-600); }
	.hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
	.hub-card { container-type: inline-size; }
	.hub-card__link {
		display: grid;
		gap: 4px;
		block-size: 100%;
		padding: 12px;
		background: linear-gradient(var(--paper), oklch(0.95 0.04 88));
		border: 1px solid var(--gold-600);
		border-radius: var(--radius);
		text-decoration: none;
		color: var(--ink);
		transition: box-shadow 0.15s, translate 0.15s;
		&:hover { box-shadow: 0 0 0 2px var(--orange-500), 0 4px 10px oklch(0 0 0 / 0.2); translate: 0 -2px; color: var(--ink); }
	}
	.hub-card__name { font: bold 1rem var(--font-head); color: var(--burgundy-600); &::before { content: "► "; color: var(--gold-600); font-size: 0.75em; } }
	.hub-card__desc { font-size: 0.82rem; color: var(--ink-soft); @container (max-width: 200px) { display: none; } }

	/* --- toplist */
	.toplist {
		background: var(--paper);
		border: 1px solid var(--gold-700);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		overflow: hidden;
		.box-head { border-radius: 0; }
		.box-head__title { font: inherit; }
		.disclosure, .notice, .toplist__empty { margin: 10px; }
	}
	.toplist__list { display: grid; gap: 10px; padding: 10px; }
	.casino-card {
		container-type: inline-size;
		display: grid;
		grid-template-columns: auto auto 1fr;
		gap: 12px 14px;
		align-items: center;
		padding: 12px;
		background: #fff;
		border: 1px solid var(--gold-700);
		border-radius: var(--radius);
		&:hover { box-shadow: 0 0 0 2px var(--orange-500); }
		&:has(.casino-card__bonus) { grid-template-columns: auto auto 1fr auto; }
	}
	.casino-card__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
	@container (min-width: 760px) {
		.casino-card__cta { grid-column: auto; flex-direction: column; align-items: stretch; }
	}
	.medal {
		display: grid;
		place-items: center;
		inline-size: 36px;
		aspect-ratio: 1;
		border-radius: 50%;
		font: bold 1rem var(--font-body);
		color: #fff;
		text-shadow: 0 1px 1px #000;
		border: 1px solid oklch(0 0 0 / 0.35);
		&.medal--1 { background: radial-gradient(circle at 35% 30%, oklch(0.97 0.08 95), oklch(0.75 0.15 80) 60%, oklch(0.48 0.1 75)); }
		&.medal--2 { background: radial-gradient(circle at 35% 30%, #fff, oklch(0.78 0 0) 60%, oklch(0.5 0 0)); }
		&.medal--3 { background: radial-gradient(circle at 35% 30%, oklch(0.88 0.07 60), oklch(0.6 0.12 55) 60%, oklch(0.38 0.08 50)); }
		&.medal--4 { background: radial-gradient(circle at 35% 30%, oklch(0.88 0.05 260), oklch(0.55 0.15 262) 60%, oklch(0.3 0.1 262)); }
	}
	.casino-card__logo, .review__logo {
		display: grid;
		place-items: center;
		inline-size: 120px;
		block-size: 54px;
		padding: 4px;
		border-radius: 8px;
		border: 1px solid #000;
		background: linear-gradient(135deg, var(--logo-bg), color-mix(in oklch, var(--logo-bg), black 35%));
		color: var(--logo-fg);
		font: 900 0.95rem/1 var(--font-display);
		letter-spacing: 1px;
		text-align: center;
		box-shadow: 0 2px 4px oklch(0 0 0 / 0.4);
	}
	.casino-card__name { font-size: 1.05rem; a { text-decoration: none; } }
	.casino-card__rating, .casino-card__licence, .casino-card__tested { font-size: 0.8rem; color: var(--ink-soft); }
	.casino-card__legal { font-size: 0.7rem; color: var(--ink-soft); text-align: center; }

	.coupon {
		display: grid;
		gap: 2px;
		padding: 8px 12px;
		text-align: center;
		background: linear-gradient(oklch(0.99 0.02 95), oklch(0.95 0.06 88));
		border: 2px dashed var(--gold-600);
		border-radius: 8px;
	}
	.coupon__label { font-size: 0.7rem; text-transform: uppercase; color: var(--ink-soft); }
	.coupon__value { font: bold 1.05rem/1.2 var(--font-head); color: var(--burgundy-500); }
	.coupon__terms { font-size: 0.75rem; color: var(--ink-soft); }

	/* --- review */
	.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
	.review__logo { inline-size: 170px; block-size: 90px; font-size: 1.4rem; }
	.review__title { flex: 1 1 240px; }
	.review__score { margin-inline-start: auto; }
	.review__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
	.review__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gutter); }
	.facts {
		display: grid;
		grid-template-columns: minmax(0, 11rem) 1fr;
		font-size: 0.85rem;
		dt, dd { padding: 6px 12px; border-block-end: 1px dotted var(--sand); }
		dt { color: var(--ink-soft); }
		dd { font-weight: bold; }
	}
	.pros-cons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
	.pros-cons__col {
		padding: 10px 14px;
		border-radius: var(--radius);
		:is(h2, h3) { font-size: 1rem; }
		ul { margin-block-start: 6px; padding-inline-start: 1.2em; }
	}
	.pros-cons__col--pro { background: linear-gradient(oklch(0.98 0.03 140), oklch(0.93 0.06 140)); border: 1px solid oklch(0.7 0.12 140); :is(h2, h3) { color: oklch(0.38 0.1 140); } }
	.pros-cons__col--con { background: linear-gradient(oklch(0.98 0.02 20), oklch(0.93 0.05 20)); border: 1px solid oklch(0.7 0.1 20); :is(h2, h3) { color: oklch(0.4 0.14 20); } }

	/* --- offer box (top of casino reviews) */
	.offer-box {
		margin-block: var(--gutter);
		background: linear-gradient(oklch(0.99 0.02 95), oklch(0.95 0.06 88));
		border: 2px solid var(--gold-600);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		> .notice, > .disclosure { margin: 10px 14px 0; }
	}
	.offer-box__head { border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; }
	.offer-box__body {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 14px 24px;
		padding: 14px;
	}
	.offer-box__deal { flex: 1 1 320px; display: grid; gap: 6px; }
	.offer-box__action { flex: 0 1 230px; display: grid; gap: 8px; justify-items: center; text-align: center; margin-inline: auto; }
	.offer-box__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
	.offer-box__title { font: bold 1.35rem/1.2 var(--font-head); color: var(--burgundy-500); }
	.offer-box__terms { font-size: 0.85rem; color: var(--ink-soft); }
	.offer-box__code {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		font-size: 0.85rem;
		code {
			padding: 2px 12px;
			background: var(--paper);
			border: 2px dashed var(--gold-600);
			border-radius: 4px;
			font: 1.3rem/1.2 var(--font-led);
			letter-spacing: 0.08em;
			color: var(--burgundy-700);
			user-select: all;
		}
	}
	.offer-box__copy { padding: 4px 12px; font-size: 0.75rem; }
	.offer-box__copied { font-size: 0.75rem; font-weight: bold; color: var(--green-700); }
	.offer-box__meta { font-size: 0.75rem; color: var(--ink-soft); }
	.offer-box__legal { font-size: 0.7rem; color: var(--ink-soft); }
	.offer-hidden { margin-block: var(--gutter); }

	/* --- author */
	.author-profile__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
	.author-profile__photo img { border-radius: 8px; border: 3px solid var(--gold-600); }
	.author-profile__job { margin-block-start: 6px; color: var(--ink-soft); }

	/* --- results / 404 */
	.results { display: grid; gap: 10px; }
	.results__item { padding: 12px; }
	.results__title { font-size: 1.1rem; margin-block-end: 4px; }
	.error-404 { padding: 20px; }
	.led { font: 2.4rem var(--font-led); color: var(--led-red); background: #000; padding: 0 10px; border-radius: 4px; text-shadow: 0 0 8px var(--led-red); }

	/* --- forms */
	.form { padding-block-end: 14px; > :not(.box-head) { margin-inline: 14px; } }
	.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
	.form__field {
		display: grid;
		gap: 4px;
		margin-block-start: 12px;
		label { font-weight: bold; font-size: 0.85rem; }
		:is(input, select, textarea) {
			padding: 7px 8px;
			border: 1px solid oklch(0.6 0 0);
			border-block-start-color: oklch(0.45 0 0);
			border-radius: 3px;
			background: #fff;
			box-shadow: inset 1px 1px 2px oklch(0 0 0 / 0.15);
			&:user-invalid { border-color: var(--led-red); background: oklch(0.98 0.02 20); }
		}
	}
	.form__hint { font-size: 0.78rem; color: var(--ink-soft); }
	.form__check { display: flex; gap: 8px; align-items: flex-start; margin-block: 12px; font-size: 0.85rem; input { margin-block-start: 4px; } }
	.form__status { margin-block-start: 12px; padding: 8px 12px; border-radius: 6px; font-weight: bold; }
	.form__status--success { background: oklch(0.95 0.06 140); border: 1px solid oklch(0.65 0.12 140); }
	.form__status--error { background: oklch(0.95 0.04 20); border: 1px solid oklch(0.65 0.14 20); }
	.form__hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

	/* --- consent */
	.consent {
		inset: auto 12px 12px auto;
		inline-size: min(420px, calc(100vw - 24px));
		margin: 0;
		padding: 0 0 14px;
		border: 2px solid var(--gold-600);
		border-radius: var(--radius);
		background: var(--paper);
		box-shadow: 0 10px 30px oklch(0 0 0 / 0.5);
		opacity: 1;
		translate: 0;
		transition: opacity 0.3s, translate 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
		@starting-style { opacity: 0; translate: 0 20px; }
		> p { padding: 10px 14px 0; font-size: 0.88rem; }
	}
	.consent__title { padding: 8px 14px; background: var(--gloss-red); color: #fff; font-size: 0.95rem; border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; }
	.consent__actions, .cookie-settings__actions { display: flex; gap: 10px; flex-wrap: wrap; .btn { flex: 1 1 140px; } }
	.cookie-settings { > p { padding: 10px 14px 0; } > p:last-child { padding-block-end: 14px; } }

	/* --- sitemap */
	.sitemap {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 16px;
		ul { padding-inline-start: 1.2em; }
		.children { margin-block-start: 4px; }
	}

	/* --- footer */
	.site-footer {
		background: linear-gradient(oklch(0.24 0.08 15), oklch(0.12 0.04 15));
		color: oklch(0.88 0.04 85);
		border-block-start: 3px solid var(--gold-600);
		padding: 18px 18px 14px;
		font-size: 0.85rem;

		a { color: var(--gold-500); text-decoration: none; &:hover { color: #fff; text-decoration: underline; } }
	}
	.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
	.site-footer__title { font: bold 0.8rem var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: #fff; margin-block-end: 6px; }
	.site-footer__menu { list-style: none; padding: 0; li { padding-block: 2px; } }
	.site-footer__legal {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		margin-block-start: 16px;
		padding-block-start: 12px;
		border-block-start: 1px solid oklch(0.35 0.08 15);
		text-align: center;
		p { max-inline-size: 70ch; }
	}
	.age-badge {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 40px;
		aspect-ratio: 1;
		border-radius: 50%;
		border: 3px solid oklch(0.58 0.22 27);
		background: #fff;
		color: #000;
		font: 900 0.8rem var(--font-body);
	}
	.site-footer__copy { margin-block-start: 10px; text-align: center; font-size: 0.75rem; color: oklch(0.75 0.04 85); }

	.menu-missing { padding: 8px 12px; color: var(--gold-500); font-size: 0.8rem; }
}

/* ------------------------------------------------------------ utilities */
@layer utilities {
	.screen-reader-text {
		position: absolute !important;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media print {
	body { background: #fff; padding: 0; }
	.frame { box-shadow: none; border: 0; }
	.topbar, .mainnav, .ticker, .sidebar, .search, .progress, .consent { display: none !important; }
}