/*
 * Base layer — global typography, layout wrappers, shared components.
 * Loads after style.css and tokens.css. Blocks reuse these classes,
 * never redefine them (see CLAUDE.md §4).
 *
 * ────────────────────────────────────────────────────────────────────────────
 * THE TWO REGISTERS. Read this before adding anything.
 *
 * The design direction ("Kinetic Typography") was written for a landing page:
 * body copy at 20–24px, headlines at 160–200px, 128px section padding, one
 * screen per idea. Our pages are 2000–3000-word SEO articles on an 820px
 * measure. Applied literally to the tenth section of an article it produces a
 * page that is five screens of scroll per paragraph, and the reader leaves.
 *
 * So the theme has TWO registers that share one DNA (flat, square, 2px rules,
 * uppercase display, one acid accent):
 *
 *   POSTER  — hero, cta-banner, casino-cards, calculator, key-takeaways,
 *             marquee bands, footer. Full kinetic: viewport typography,
 *             oversized numerals, hard colour inversion, motion.
 *   READING — content-section, tables, FAQ, callouts, sources, prose.
 *             Same DNA, ordinary measure, calm body. Uppercase headings and
 *             accent kickers keep it in the family.
 *
 * The contrast between the two is what makes the style land on a content site:
 * the poster sections hit BECAUSE the prose between them is not trying to hit.
 * Do not "upgrade" the reading register to poster scale.
 * ────────────────────────────────────────────────────────────────────────────
 */

/* ---------- Global ---------- */

html {
	/* In-page anchors (TOC, #cta links) glide instead of jumping.
	   NOTE: overflow-x:clip must NOT sit on html — Chromium then refuses to
	   run smooth/programmatic scrolls entirely. The sideways-scroll guard
	   lives on #page below instead. */
	scroll-behavior: smooth;
}

#page {
	/* The page never scrolls sideways — wide content must live inside its
	   own scroller (.xd4fcf88f, .x48ae507b). clip (not hidden) keeps
	   position:sticky working for the header. */
	overflow-x: clip;
	position: relative;
}

/*
 * Atmosphere: print/poster grain over the whole viewport. This replaces the
 * previous market's soft colour wash — a gradient would contradict the flat
 * doctrine, whereas grain is what a screen-printed poster actually has.
 *
 * The noise is an inline SVG feTurbulence data URI (no external request, and
 * the CSP-safe way to do it). It is fixed, decorative and MUST NOT intercept a
 * click. Opacity is deliberately tiny: at anything above ~.05 it starts eating
 * the contrast measured in tokens.css.
 *
 * NO mix-blend-mode, deliberately. The direction specifies `mix-blend-overlay`,
 * but a full-viewport FIXED element with a blend mode forces the compositor to
 * re-blend the whole page on every scroll frame and is a long-standing jank
 * source on mobile Safari. It is also not needed: `fractalNoise` produces alpha
 * noise as well as colour noise, so the tile already reads as a faint speckle
 * that lightens the near-black ground — which is what grain on dark ink does.
 * `stitchTiles` keeps the 140px tile seamless.
 */
#page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Ctitle%3EDecorative print grain%3C/title%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: .035;
	pointer-events: none;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Anchor targets land BELOW the sticky header instead of underneath it
   (header is ~90px: compliance topbar + nav bar), with breathing room. */
[id] {
	scroll-margin-top: 116px;
}

body {
	background: var(--sn-bg);
	color: var(--sn-text);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-md);
	line-height: var(--sn-lh-body);
	/* Hyphenation is on for the whole document because this is a French site
	   set in uppercase display type: French compound headings are long, and
	   without it a single word can force a horizontal overflow at 320px.
	   Requires lang="fr-FR" on <html>, which inc/theme-setup.php prints. */
	hyphens: auto;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--sn-heading);
	line-height: var(--sn-lh-heading);
	font-family: var(--sn-font-display);
	/* 800 IS REAL HERE. Archivo's fvar runs 400–900 (checked, not assumed) —
	   unlike the previous market's display face, which stopped at 700 and
	   silently rendered 700 for every `font-weight: 800` in eleven files. */
	font-weight: 800;
	letter-spacing: var(--sn-tracking-display);
	clear: both;
	/* Long French words must break rather than push the page sideways. */
	overflow-wrap: break-word;
}

/*
 * UPPERCASE, and where it stops. The direction asks for uppercase on all
 * display text; h1 and h2 take it because that lockup IS the signature. h3
 * does NOT: an article that shouts at three levels reads as an error message,
 * and h3 is where the prose actually lives.
 */
h1, h2 {
	text-transform: uppercase;
}

/* Fluid display sizes: the token is the FLOOR (phone) and the clamp scales up
   to a desktop ceiling. Ceilings are lower than the direction's 160–200px
   because these are ARTICLE headings — the poster-scale type lives on
   .x50a745b8 below, which the hero and section breaks opt into. */
h1 { font-size: clamp(var(--sn-fs-2xl), 1.9rem + 3.4vw, 4.5rem); }
h2 { font-size: clamp(var(--sn-fs-xl), 1.2rem + 1.9vw, 2.75rem); }
h3 { font-size: var(--sn-fs-lg); letter-spacing: -.01em; }

/*
 * POSTER TYPE. Opt-in, for the hero headline and section breaks only. This is
 * the "viewport-width typography" the direction requires, kept off the
 * document's ordinary headings so an article does not become a poster.
 */
.x50a745b8 {
	font-family: var(--sn-font-display);
	font-size: clamp(2.75rem, 11vw, 9rem);
	font-weight: 900;
	line-height: var(--sn-lh-display);
	letter-spacing: -.04em;
	text-transform: uppercase;
	text-wrap: balance;
}

/*
 * MASSIVE NUMERALS as graphic shapes. Decorative by definition, so every use
 * must be aria-hidden — a screen reader announcing "zero three" between two
 * paragraphs is noise.
 *
 * On a gambling site these carry a second risk: a giant figure next to casino
 * copy reads as a payout, a bonus or odds. Use them ONLY as section indices
 * (01, 02, 03) — never a currency amount, a percentage or a multiplier.
 */
.xe945517b {
	font-family: var(--sn-font-display);
	font-size: clamp(5rem, 18vw, 12rem);
	font-weight: 900;
	line-height: .78;
	letter-spacing: -.06em;
	color: var(--sn-surface-2);
	user-select: none;
	pointer-events: none;
}

/*
 * Section marker: a short accent rule ABOVE every content H2 (the poster
 * kicker). It sits above rather than beside the heading on purpose — a
 * left-side marker eats horizontal space, and French headings are long enough
 * to need all of it.
 *
 * It is also the family's fingerprint slot: NL underline, DE vertical rule,
 * SE filled square, TH gold lozenge, AU2 open ring, FR rule-above. Do NOT add
 * per-block heading markers on top of this one.
 */
.site-main h2::before {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	margin-bottom: var(--sn-sp-4);
	background: var(--sn-accent);
}

/* Eyebrow label above section headings — Michael can drop it in a WYSIWYG as
   <p class="xe5a9ddb3">…</p> right before a heading. */
.xe5a9ddb3 {
	margin: 0 0 var(--sn-sp-2);
	color: var(--sn-accent);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
}

/* When an eyebrow is present it replaces the kicker rule — two markers
   stacked above one heading is just clutter. */
.xe5a9ddb3 + h2 {
	margin-top: 0;
}

.site-main .xe5a9ddb3 + h2::before {
	display: none;
}

.xe5a9ddb3 + h3 {
	margin-top: 0;
}

/* Lede: the opening paragraph of an article, one step up from body. Michael
   applies it in a WYSIWYG as <p class="x770e9306">…</p>. */
.x770e9306 {
	font-size: 1.3125rem;
	line-height: 1.55;
	color: var(--sn-heading);
	font-weight: 500;
}

/*
 * THE GLOBAL LINK RULES ARE ZERO-SPECIFICITY, VIA :where(). This is not a
 * style choice, it is what stops them repainting things that are not prose.
 *
 * Written as bare `a:hover` these rules are (0,1,1), which BEATS any
 * single-class button rule (0,1,0). Our own .x9db39076 escapes only because
 * `.x9db39076:hover` happens to be (0,2,0) — a third-party link-button has no
 * such luck. The casino-list plugin's CTA is `<a class="primary-button">`, and
 * at (0,1,0) it lost both fights: on hover its label was repainted to
 * --sn-primary-hover on a --sn-primary-hover background, and after one click
 * `a:visited` repainted it to --sn-accent on an --sn-accent gradient. Both are
 * 1.00:1 — the label simply disappeared, permanently in the visited case.
 *
 * At (0,0,0) any class-based rule wins and the cascade does the right thing by
 * default. Prose links are unaffected: nothing else sets their colour, so
 * source order still decides.
 *
 * ORDER IS LVHA (link, visited, hover, active) and must stay that way. It was
 * a, hover, visited — with equal specificity the later `a:visited` won, so a
 * visited link did not visibly respond to hover at all.
 */
:where(a) {
	color: var(--sn-accent);
	text-decoration: none;
}

:where(a:visited) {
	color: var(--sn-accent);
}

/*
 * HOVERS BRIGHTEN HERE. This is the first DARK skin in the family, and every
 * light market's rule was the opposite ("hovers darken, never brighten"),
 * written because a light action colour going lighter vanished. Inverted
 * ground, inverted rule: --sn-primary-hover (#EDEF2E) is a step UP from
 * --sn-accent (#DFE104). Do not port the darken rule back in from a sibling.
 */
:where(a:hover, a:focus) {
	color: var(--sn-primary-hover);
	text-decoration: underline;
}

/* PROSE LINKS ARE UNDERLINED. Colour alone is not a distinction, and on this
   skin it is barely a distinction at all: body text is #FAFAFA and links are
   #DFE104, which differ by only 1.35:1 in luminance — an accent link in a
   paragraph is effectively invisible to anyone who does not perceive hue.
   :where() keeps this at ZERO specificity so the opt-out list below always
   wins — an earlier skin wrote it as `.site-main p a` (0,1,2), which outranked
   `.x9db39076` (0,1,0) and underlined every button sitting in a paragraph. */
:where(.site-main, .x80bd0bb1) :where(p, li, td, th, dd, blockquote) a {
	text-decoration: underline;
	text-underline-offset: .15em;
	text-decoration-thickness: 2px;
}

:where(.site-main, .x80bd0bb1) :where(p, li, td, th, dd, blockquote) :where(.x9db39076, .x8382bb41) {
	text-decoration: none;
}

/* Global keyboard focus ring. There was none at all on this branch's parent:
   only one search input had a visible focus state. :focus-visible keeps it off
   mouse clicks. No radius — nothing in this skin is round. */
:focus-visible {
	outline: 2px solid var(--sn-accent);
	outline-offset: 3px;
	border-radius: 0;
}

/* Native controls (checkbox, radio, range, text caret) pick up the brand
   instead of the browser's default blue. */
:root {
	accent-color: var(--sn-accent);
	caret-color: var(--sn-accent);
	color-scheme: dark; /* native scrollbars/controls match the ground */
}

img {
	max-width: 100%;
	height: auto;
}

/* Content lists: ONE compact hanging indent. Underscores ships
   `margin: 0 0 1.5em 3em` on top of the browser's ~40px padding-left —
   a double indent that wrecks lists inside callouts and flex layouts.
   Blocks that restyle their own lists (toc, faq, chips, sources…) set
   explicit margins/paddings with class selectors and are unaffected. */
ul,
ol {
	margin: 0 0 1.5em;
	padding-left: var(--sn-sp-6);
}

li > ul,
li > ol {
	margin: var(--sn-sp-1) 0 0;
}

/*
 * Selection: accent ground, DARK ink. The inherited rule paired the accent
 * background with --sn-on-chrome (off-white), which measures 1.35:1 — selected
 * text was unreadable. On a light skin the same pair happened to be survivable;
 * here it is not.
 */
::selection {
	background: var(--sn-accent);
	color: var(--sn-primary-dark);
}

/* ---------- Layout wrappers ---------- */

.xfda27cc8 {
	width: 100%;
	max-width: var(--sn-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sn-sp-4);
	padding-right: var(--sn-sp-4);
}

/* Poster sections push to the edges. Still capped by --sn-container so it does
   not become unbounded on an ultrawide monitor. */
.xbff8f0e7 {
	max-width: min(var(--sn-container-wide), 1600px);
}

.x80bd0bb1 {
	width: 100%;
	max-width: var(--sn-content);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sn-sp-4);
	padding-right: var(--sn-sp-4);
}

@media (min-width: 768px) {
	.xfda27cc8,
	.x80bd0bb1 {
		padding-left: var(--sn-sp-6);
		padding-right: var(--sn-sp-6);
	}
}

/* ---------- Buttons ---------- */

/*
 * NEVER set `color` on .x9db39076 from a context — set --sn-btn-ink instead.
 * WHY, because this bug shipped twice: base.css forced
 * `.x9db39076:visited { color: … }` while a context (the CTA band, the casino
 * panels) recoloured the same button. Equal specificity meant that AFTER the
 * visitor followed the link the label was repainted to the base ink, which on
 * a light band is the same colour as the band — the label simply vanished.
 * Routing ink through a custom property means a context override is inherited
 * by the base, hover and visited rules alike and cannot lose that race.
 */
.x9db39076 {
	display: inline-block;
	padding: var(--sn-sp-4) var(--sn-sp-8);
	border: var(--sn-border-w) solid transparent;
	border-radius: 0;
	background: var(--sn-accent);
	color: var(--sn-btn-ink, var(--sn-primary-dark));
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.2;
	/* Touch target: 44px minimum. sp-4 top+bottom plus an 18px line box
	   clears it; min-height makes that explicit rather than incidental. */
	min-height: 44px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background var(--sn-motion-fast) var(--sn-ease),
	            transform var(--sn-motion-fast) var(--sn-ease);
}

/* Scale, not lift: there are no shadows in this skin, so a translateY has
   nothing to cast and just looks like a jump. */
.x9db39076:hover,
.x9db39076:focus {
	background: var(--sn-primary-hover); /* BRIGHTENS — dark skin */
	color: var(--sn-btn-ink, var(--sn-primary-dark));
	text-decoration: none;
	transform: scale(1.04);
}

.x9db39076:active {
	transform: scale(.97);
}

.x9db39076:visited {
	color: var(--sn-btn-ink, var(--sn-primary-dark));
}

/*
 * Secondary is an OUTLINE that HARD-FILLS on hover (off-white ground, dark
 * ink) — the direction's colour-inversion move, and it keeps the secondary
 * clearly subordinate to the accent CTA without ever competing for the same
 * colour. The border uses --sn-border-strong, not --sn-border: this is the
 * edge of a control, so it needs 3:1 (see tokens.css note 1).
 */
.x8382bb41 {
	background: transparent;
	border-color: var(--sn-border-strong);
	--sn-btn-ink: var(--sn-heading);
}

.x8382bb41:hover,
.x8382bb41:focus {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
	--sn-btn-ink: var(--sn-bg);
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.x9db39076,
	.x9db39076:hover,
	.x9db39076:focus,
	.x9db39076:active,
	.x8382bb41:hover,
	.x8382bb41:focus {
		transform: none;
		transition: none;
	}
}

/* ---------- Hard colour inversion (the "flood") ---------- */

/*
 * The direction's signature card behaviour: on hover the surface floods with
 * the accent and everything on it inverts to dark ink.
 *
 * INK ROUTES THROUGH CUSTOM PROPERTIES, never through a descendant `*` rule.
 * The obvious implementation (`.x5e4bdc4a:hover * { color: … }`) is (0,2,0) and
 * would outrank the very block rules that own each element's contrast — the
 * exact mistake that made the plugin CTA and the visited button label vanish
 * (CLAUDE.md §12, 2026-08-10, twice). Consumers read var(--sn-ink) etc., so a
 * block can always override its own ink and win.
 *
 * :focus-within is included so a keyboard user gets the same state a mouse
 * user gets. Note that NO CONTENT MAY APPEAR only on hover — the flood changes
 * colour and position, never visibility (CLAUDE.md §7 and §12 2026-07-14).
 */
.x5e4bdc4a {
	--sn-ink: var(--sn-heading);
	--sn-ink-muted: var(--sn-text-muted);
	--sn-ink-rule: var(--sn-border);
	transition: background var(--sn-motion) var(--sn-ease),
	            border-color var(--sn-motion) var(--sn-ease);
}

.x5e4bdc4a:hover,
.x5e4bdc4a:focus-within {
	background: var(--sn-accent);
	border-color: var(--sn-accent);
	--sn-ink: var(--sn-primary-dark);
	/* Both derived values are MEASURED against the accent ground, not picked by
	   eye: ink-muted #383909 reads 8.48, ink-rule #747508 reads 3.47 (a rule is
	   a meaningful boundary, so 3:1 per WCAG 1.4.11). The rule started at 30%
	   dark, which looked right and measured 1.99 — anything under 50% dark
	   fails on this ground, so do not lighten it back for looks. */
	--sn-ink-muted: color-mix(in srgb, var(--sn-primary-dark) 78%, var(--sn-accent));
	--sn-ink-rule: color-mix(in srgb, var(--sn-primary-dark) 50%, var(--sn-accent));
}

/* A button inside a flooded card inverts the other way — dark fill, accent
   label — so it stays visible once its surroundings become the accent. */
.x5e4bdc4a:hover .x9db39076,
.x5e4bdc4a:focus-within .x9db39076 {
	background: var(--sn-primary-dark);
	--sn-btn-ink: var(--sn-accent);
}

@media (prefers-reduced-motion: reduce) {
	.x5e4bdc4a {
		transition: none;
	}
}

/* ---------- Marquee ---------- */

/*
 * Infinite marquee, CSS only — no react-fast-marquee, no JS (hard rule §1.2).
 *
 * MARKUP CONTRACT: .x48ae507b > .xc939cc1a containing the content
 * TWICE, with the second copy aria-hidden="true". The keyframe translates the
 * track by exactly -50%, which is one full copy, so the loop is seamless. If
 * you ship one copy it will scroll off and leave a gap.
 *
 * COMPLIANCE — READ THIS BEFORE PUTTING ANYTHING IN A MARQUEE. The statutory
 * French gambling warning, the helpline number, the 18+ badge and every
 * responsible-gambling link are FORBIDDEN here: the law requires that warning
 * to be legible and permanent, and a moving strip is the opposite of that. A
 * marquee may carry section names, the site wordmark or neutral labels. Never
 * a bonus figure, a payout or anything that reads as a promise.
 */
.x48ae507b {
	overflow: hidden;
	border-top: var(--sn-border-w) solid var(--sn-border);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
	/* Own stacking context: the animated child would otherwise be composited
	   against whatever ancestor layer it lands in, which on the front page is
	   the same layer as the sticky header. */
	isolation: isolate;
}

/*
 * NO `gap` ON THE TRACK, and this is arithmetic rather than taste. With two
 * copies A and B and a track-level gap g, the track is A + g + B, so -50% of it
 * is A + g/2 — but seamlessness needs the shift to be A + g, so that B lands
 * exactly where A started. The difference is a visible jump on every loop.
 * Spacing therefore lives INSIDE the items (see __item's padding-right), which
 * makes the track exactly 2A wide and -50% exactly one copy.
 */
.xc939cc1a {
	display: flex;
	width: max-content;
	align-items: center;
	padding: var(--sn-sp-4) 0;
	/* No edge fade — the raw cut-off is part of the aesthetic. */
	animation: x48ae507b var(--sn-marquee-slow) linear infinite;
	will-change: transform;
}

.xe148ad4c {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.xe9fde781 .xc939cc1a {
	animation-duration: var(--sn-marquee-fast);
}

.x66ca934f {
	display: inline-flex;
	align-items: center;
	/* The spacing that would otherwise be the track's gap — see above. */
	padding-right: var(--sn-sp-8);
	font-family: var(--sn-font-display);
	font-size: clamp(1.25rem, 3.4vw, 2.25rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.02em;
	white-space: nowrap;
}

/* The separator glyph between repetitions of the wordmark. */
.xc1158d9b {
	padding-left: var(--sn-sp-8);
	opacity: .5;
}

/* The one accent-flooded band on the site. The direction also floods the
   footer; that is deliberately not done — the accent has to keep meaning
   "this is the action", and a yellow band under a compliance strip reads as
   promotional. See tokens.css. */
.x1f292aaf {
	background: var(--sn-accent);
	border-color: var(--sn-accent);
	color: var(--sn-primary-dark);
}

@keyframes x48ae507b {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/*
 * Reduced motion: the track stops, the duplicate copy is removed from the flow
 * so there is no doubled text, and the strip becomes a normal horizontal
 * scroller so nothing is unreachable.
 */
@media (prefers-reduced-motion: reduce) {
	.x48ae507b {
		overflow-x: auto;
	}

	.xc939cc1a {
		animation: none;
		will-change: auto;
	}

	.xc939cc1a > [aria-hidden='true'] {
		display: none;
	}
}

/* ---------- Poster section rhythm ---------- */

.x6aa94ce7 {
	padding-top: var(--sn-sp-16);
	padding-bottom: var(--sn-sp-16);
}

@media (min-width: 1024px) {
	.x6aa94ce7 {
		padding-top: var(--sn-sp-24);
		padding-bottom: var(--sn-sp-24);
	}
}

/* Full-width structural rule between major sections — the divider of choice
   in a system with no shadows. */
.xc43bfccf {
	border: 0;
	border-top: var(--sn-border-w) solid var(--sn-border);
	margin: var(--sn-sp-12) 0;
}

/* ---------- Images (rendered by blocks) ---------- */

.xbfea7111 {
	display: block;
	border-radius: 0;
	height: auto;
	max-width: 100%;
}

/* ---------- Shared table base ---------- */
/* Table blocks wrap their <table class="x5b2d395e"> in .xd4fcf88f — mandatory. */

/*
 * Tables here are RULE-DRIVEN: a 2px frame, an accent-underlined header band,
 * hairline row separators, no fill games and no zebra. On a near-black ground
 * a striped table reads as broken rendering rather than as structure.
 *
 * WHENEVER THE THEAD BACKGROUND CHANGES, re-check the sticky corner in
 * blocks/comparison-table/style.css — it has to be painted with the SAME
 * colour as the band or it reads as a patch. That has now been wrong on THREE
 * separate market passes, because the band lives here and the corner lives in
 * the block. Both files carry this warning.
 */
.xd4fcf88f {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	box-shadow: none;
}

.x5b2d395e {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--sn-fs-sm);
}

.x5b2d395e th,
.x5b2d395e td {
	padding: var(--sn-sp-3) var(--sn-sp-4);
	border: 0;
	text-align: left;
	vertical-align: top;
}

.x5b2d395e thead th {
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
	border-bottom: var(--sn-border-w) solid var(--sn-accent);
}

.x5b2d395e tbody tr {
	background: var(--sn-surface);
	transition: background var(--sn-motion-fast) var(--sn-ease);
}

.x5b2d395e tbody td,
.x5b2d395e tbody th {
	border-bottom: 1px solid var(--sn-border);
}

.x5b2d395e tbody tr:last-child td,
.x5b2d395e tbody tr:last-child th {
	border-bottom: 0;
}

.x5b2d395e tbody tr:hover {
	background: var(--sn-surface-2);
}

/* WYSIWYG tables (auto-wrapped by sterrennacht_wrap_naked_tables) usually
   keep their header cells in the first body row — style them like a thead. */
.x83bd4ed7 tr:first-child th {
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
	border-bottom: var(--sn-border-w) solid var(--sn-accent);
}

.x83bd4ed7 td {
	min-width: 120px; /* keeps pasted tables readable before the wrap scrolls */
}

/* ---------- Panels ---------- */

.x843bc893 {
	background: var(--sn-surface);
	border: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	padding: var(--sn-sp-6);
	box-shadow: none;
}

@media (min-width: 768px) {
	.x843bc893 {
		padding: var(--sn-sp-8);
	}
}

/* ---------- Site header (T1) ---------- */

/* The chrome is the SAME ground as the page, separated by a 2px rule instead
   of by colour — there is no "dark bar" here because the whole site is dark. */
.x48c6aa6a {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sn-bg);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
}

.admin-bar .x48c6aa6a {
	top: 32px;
}

/* The 18+ compliance strip. Static, never in a marquee. */
.xf527be52 {
	border-bottom: 1px solid var(--sn-border);
	font-size: var(--sn-fs-xs);
	color: var(--sn-text-muted);
}

.xca86647d {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-2);
	padding-top: var(--sn-sp-1);
	padding-bottom: var(--sn-sp-1);
}

.xca87da17 {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--sn-sp-2);
	border: 2px solid var(--sn-accent);
	border-radius: 0;
	color: var(--sn-accent);
	font-family: var(--sn-font-display);
	font-weight: 800;
	letter-spacing: 0;
}

.x55e93c30 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sn-sp-4);
	padding-top: var(--sn-sp-3);
	padding-bottom: var(--sn-sp-3);
}

.x38a4b393 {
	flex: 0 0 auto;
}

.xf3c8f2c4 {
	margin: 0;
	font-family: var(--sn-font-display);
	font-size: 1.5rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -.03em;
	white-space: nowrap;
}

.xf3c8f2c4 a {
	color: var(--sn-heading);
	text-decoration: none;
}

.xf3c8f2c4 a::after {
	content: '.';
	color: var(--sn-accent);
}

.x48c6aa6a .custom-logo {
	max-height: 64px;
	width: auto;
}

/* Phone: the header is STICKY, so every pixel here is spent on every screen of
   the page, not just the first. Measured at 375x667 it was 133px — a fifth of
   the viewport — which is why the money list under a hero could not break the
   fold. 112px here, and the compliance topbar is untouched: the 18+ badge and
   the notice keep their size and their two lines (§7 — that strip is the one
   thing on the page that may never be shrunk to buy space). */
@media (max-width: 767px) {
	.x55e93c30 {
		padding-top: var(--sn-sp-2);
		padding-bottom: var(--sn-sp-2);
	}

	.x48c6aa6a .custom-logo {
		max-height: 44px;
	}
}

.x410c85e6 {
	position: relative;
	/* Underscores sets .main-navigation to width:100%; flex keeps the
	   hamburger pinned to the far right on mobile. */
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.xee9209cc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--sn-sp-2);
	background: transparent;
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	color: var(--sn-heading);
	cursor: pointer;
}

.x410c85e6 ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Mobile: dropdown panel (covers both wp_nav_menu ul and wp_page_menu div>ul). */
.x410c85e6 > ul,
.x410c85e6 > div > ul {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + var(--sn-sp-2));
	min-width: 240px;
	padding: var(--sn-sp-2);
	background: var(--sn-bg);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	box-shadow: none;
}

.x410c85e6.toggled > ul,
.x410c85e6.toggled > div > ul {
	display: block;
}

.x410c85e6 li a {
	display: block;
	padding: var(--sn-sp-3);
	border-radius: 0;
	color: var(--sn-text);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	text-decoration: none;
}

.x410c85e6 li a:hover,
.x410c85e6 li a:focus {
	background: var(--sn-accent);
	color: var(--sn-primary-dark);
	text-decoration: none;
}

.x410c85e6 li.current-menu-item > a,
.x410c85e6 li.current_page_item > a {
	color: var(--sn-accent);
}

/* Chevron on parent items (rotates up when open via .focus — navigation.js). */
.x410c85e6 li.menu-item-has-children > a::after,
.x410c85e6 li.page_item_has_children > a::after {
	content: '';
	display: inline-block;
	margin-left: var(--sn-sp-2);
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	padding: 2.5px;
	transform: translateY(-3px) rotate(45deg);
	transition: transform var(--sn-motion-fast) var(--sn-ease);
}

.x410c85e6 li.menu-item-has-children.focus > a::after,
.x410c85e6 li.page_item_has_children.focus > a::after {
	transform: translateY(1px) rotate(225deg);
}

/* Mobile submenu: nested inline inside the panel, indented, collapsed until
   the parent gets .focus (tap — handled by navigation.js/nav.js). Overrides
   underscores' absolute/-999em positioning. */
.x410c85e6 ul ul {
	display: none;
	position: static;
	float: none;
	margin: var(--sn-sp-1) 0 var(--sn-sp-1) var(--sn-sp-3);
	padding: 0 0 0 var(--sn-sp-2);
	border-left: var(--sn-border-w) solid var(--sn-accent);
	box-shadow: none;
}

.x410c85e6 li.focus > ul {
	display: block;
	left: auto;
}

/* Underscores force-opens all nested uls when .toggled — collapse them back
   so the mobile submenu is a tap-to-expand accordion (chevron on parent). */
.x410c85e6.toggled ul ul {
	display: none;
}

.x410c85e6.toggled li.focus > ul {
	display: block;
}

.x410c85e6 ul ul a {
	width: auto; /* underscores forces 200px */
	font-weight: 600;
}

@media (min-width: 768px) {
	.xee9209cc {
		display: none;
	}

	.x410c85e6 {
		justify-content: flex-start; /* Desktop: menu sits next to the logo. */
	}

	.x410c85e6 > ul,
	.x410c85e6 > div > ul {
		display: flex !important; /* Beat underscores' .main-navigation rules. */
		position: static;
		gap: var(--sn-sp-1);
		min-width: 0;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.x410c85e6 li a {
		color: var(--sn-text);
		padding: var(--sn-sp-2) var(--sn-sp-3);
		border-bottom: var(--sn-border-w) solid transparent;
	}

	/* Hard flip on hover — the direction's inversion, at nav scale. */
	.x410c85e6 li a:hover,
	.x410c85e6 li a:focus {
		background: var(--sn-accent);
		color: var(--sn-primary-dark);
		border-bottom-color: var(--sn-accent);
	}

	.x410c85e6 li.current-menu-item > a,
	.x410c85e6 li.current_page_item > a {
		color: var(--sn-heading);
		border-bottom-color: var(--sn-accent);
	}

	/* Desktop dropdown: hard-edged panel under the parent item. Opens on
	   hover, keyboard focus, or click (.focus via nav.js). */
	.x410c85e6 ul ul {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		min-width: 250px;
		margin: 0;
		padding: var(--sn-sp-2);
		background: var(--sn-bg);
		border: var(--sn-border-w) solid var(--sn-border-strong);
		border-radius: 0;
		box-shadow: none;
	}

	/* Invisible bridge so the pointer can cross the gap without closing. */
	.x410c85e6 ul ul::before {
		content: '';
		position: absolute;
		top: -12px;
		left: 0;
		right: 0;
		height: 12px;
	}

	.x410c85e6 li:hover > ul,
	.x410c85e6 li:focus-within > ul,
	.x410c85e6 li.focus > ul {
		display: block;
		left: 0;
	}

	.x410c85e6 ul ul li a {
		color: var(--sn-text);
		border-bottom: 0;
	}

	.x410c85e6 ul ul li a:hover,
	.x410c85e6 ul ul li a:focus {
		background: var(--sn-accent);
		color: var(--sn-primary-dark);
	}

	.x410c85e6 ul ul li.current-menu-item > a,
	.x410c85e6 ul ul li.current_page_item > a {
		color: var(--sn-accent);
	}

	/* Chevron opens on hover too. */
	.x410c85e6 li.menu-item-has-children:hover > a::after,
	.x410c85e6 li.page_item_has_children:hover > a::after {
		transform: translateY(1px) rotate(225deg);
	}
}

/* ---------- Site footer (T2) ---------- */
/* Three stacked rows behind rules: brand/menus, the prominent
   responsible-gambling strip, then copyright + disclosure. */

.x88be26d0 {
	margin-top: var(--sn-sp-16);
	background: var(--sn-purple-deep);
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-sm);
	border-top: 4px solid var(--sn-accent);
}

/* Row 1: brand + about | menus. */
.x42d29e6c {
	display: grid;
	gap: var(--sn-sp-8);
	padding: var(--sn-sp-12) 0 var(--sn-sp-8);
}

.x5ca902f0 {
	margin: 0 0 var(--sn-sp-3);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-lg);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -.03em;
}

.x5ca902f0::after {
	content: '.';
	color: var(--sn-accent);
}

.xc17fa2dd {
	margin: 0;
	max-width: 46ch;
}

.x450e4c6a {
	margin: 0 0 var(--sn-sp-3);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	font-size: var(--sn-fs-xs);
}

.x8a1574b9 {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sn-sp-2);
}

.x8a1574b9 a {
	color: var(--sn-text-muted);
	text-decoration: none;
}

.x8a1574b9 a:hover,
.x8a1574b9 a:focus {
	color: var(--sn-on-chrome);
	text-decoration: underline;
	text-decoration-color: var(--sn-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Row 2: responsible-gambling strip — compliance made prominent.
   In France the warning wording is statutory, so this strip is STATIC by
   requirement: no marquee, no reveal animation, no hover-only content. */
.x7e0dc6a1 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-4);
	padding: var(--sn-sp-6) 0;
	border-top: var(--sn-border-w) solid var(--sn-border);
	border-bottom: var(--sn-border-w) solid var(--sn-border);
}

.x04023c86 {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	flex-wrap: wrap;
}

.x04023c86 p {
	margin: 0;
	color: var(--sn-text);
}

.x024a2cbc {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sn-sp-2);
	margin: 0;
	padding: 0;
}

/* Outlined chips — deliberately NOT the accent colour: compliance links are
   informational, not the action (CLAUDE.md §7). --sn-border-strong because
   these are interactive edges. */
.x024a2cbc a {
	display: inline-block;
	padding: var(--sn-sp-2) var(--sn-sp-3);
	border: 1px solid var(--sn-border-strong);
	border-radius: 0;
	color: var(--sn-text);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-decoration: none;
	transition: border-color var(--sn-motion-fast) var(--sn-ease),
	            background var(--sn-motion-fast) var(--sn-ease),
	            color var(--sn-motion-fast) var(--sn-ease);
}

.x024a2cbc a:hover,
.x024a2cbc a:focus {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
	color: var(--sn-bg);
	text-decoration: none;
}

/* Row 3: copyright + disclosure. */
.x50ed05f2 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-4) 0 var(--sn-sp-6);
	font-size: var(--sn-fs-xs);
	color: var(--sn-text-muted);
}

.x7277b579,
.xc512172d {
	margin: 0;
}

@media (min-width: 768px) {
	.x42d29e6c {
		grid-template-columns: minmax(0, 1.5fr) auto auto;
		gap: var(--sn-sp-16);
	}

	.x7e0dc6a1 {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.x50ed05f2 {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sn-sp-8);
	}

	.xc512172d {
		text-align: right;
		max-width: 62ch;
	}
}

/* ---------- Scroll reveal ---------- */
/*
 * COMPLIANCE BY CONSTRUCTION: the hidden state exists ONLY under .xf46e0e38,
 * which reveal.js adds after its own prefers-reduced-motion check and only for
 * blocks still below the fold. No JS means nothing is EVER hidden, which is
 * what keeps this on the right side of the standing rule that no page content
 * may be obscured (CLAUDE.md §7).
 *
 * The transform is a small rise, NOT the direction's scale-from-0.8: scaling
 * text in and out of place on a page whose body is already large reads as a
 * rendering glitch, and it moves the LCP candidate.
 */

.xf46e0e38 .xe7cdac7b {
	opacity: 0;
	transform: translateY(14px);
}

.xf46e0e38 .xe7cdac7b.is-inview {
	opacity: 1;
	transform: none;
	transition: opacity .45s var(--sn-ease), transform .45s var(--sn-ease);
}

@media (prefers-reduced-motion: reduce) {
	.xf46e0e38 .xe7cdac7b,
	.xf46e0e38 .xe7cdac7b.is-inview {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Utilities ---------- */

.xccdd4237 {
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-sm);
}

/* Small uppercase label — the direction's "tracking-widest" micro type. */
.x4d56baaa {
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-text-muted);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}