/*
 * 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).
 *
 * Skin: "Glitchwave" — toxic arcade maximalism. A dead CRT screen with five
 * neons in permanent rotation, CRT scanlines over the whole page, 2px strokes
 * carried by bloom, HUD corner notches instead of tilt, and arcade keys that
 * physically travel on press.
 *
 * FOUR HOUSE RULES THIS FILE ENFORCES, all of them brief anti-patterns if
 * broken:
 *   1. No grey or black drop shadow anywhere. Elevation is neon bloom, an
 *      arcade underside, or nothing.
 *   2. No DIAGONAL stacked offset shadow. That was site #3's entire depth
 *      language and it is the thing this skin is defined against.
 *   3. Nothing rotates. Off-kilter comes from the clip-path corner notch.
 *   4. No capsule buttons. Everything is a 6px arcade key.
 */

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

html {
	/* Tells the browser this is a dark UI: native selects, number spinners,
	   scrollbars and form controls render dark instead of painting a white
	   slab into the page. Without it the calculator's inputs are the only
	   light rectangles on the site. */
	color-scheme: dark;

	/* 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 (.xfc07e7c2). clip (not hidden) keeps position:sticky
	   working for the header.
	   It still earns its keep on this skin: the grid horizons are drawn
	   wider than their container on purpose so the perspective vanishing
	   point sits outside the viewport, and the giant stroke wordmarks bleed
	   off the right edge. Both would widen the document without this. */
	overflow-x: clip;
}

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

/* Anchor targets land BELOW the sticky header instead of underneath it. */
[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);
	/* Same Thai wrapping rule as the headings — long unbroken Thai runs in
	   paragraphs, table cells and chips overflow their box otherwise. */
	overflow-wrap: break-word;
}

/* ---------- Headings ----------
   Display role: Fahkwang, heavy, mint-white, RGB-SPLIT. No uppercase and no
   letter-spacing — see the Thai typography rules in tokens.css; size, weight,
   bloom and the aberration carry the loudness. */
h1, h2, h3, h4, h5, h6 {
	color: var(--sn-heading);
	line-height: var(--sn-lh-heading);
	font-family: var(--sn-font-display);
	font-weight: 500;
	letter-spacing: 0;
	clear: both;
	/* THAI WRAPPING, as a safety net. Thai writes without spaces between words,
	   so any run an author does not break is ONE unbreakable "word" to the
	   layout engine — in a narrow box (a phone headline, a table cell, a chip)
	   it overflows instead of wrapping. Browsers break between grapheme
	   clusters, so tone marks stay attached to their consonants. */
	overflow-wrap: break-word;
}

/* 600 is the CEILING on Fahkwang — the family stops there, and asking for 700
   gets a synthesised fake-bold that smears Thai tone marks (tokens.css).
   Sizes are fluid: the brief wants a hero in the 72–128px band, and a clamp
   is the only way to have that at 1440px without it eating a phone screen. */
h1 {
	font-size: clamp(2.75rem, 8vw, var(--sn-fs-2xl));
	font-weight: 600;
	text-shadow: var(--sn-ts-3);
}

h2 {
	font-size: clamp(2.125rem, 5vw, var(--sn-fs-xl));
	font-weight: 600;
	text-shadow: var(--sn-ts-2);
}

h3 {
	font-size: var(--sn-fs-lg);
	font-weight: 600;
	text-shadow: var(--sn-ts-1);
}

h4, h5, h6 {
	font-size: 1.25rem;
	font-weight: 600;
}

/*
 * Section marker — a TERMINAL CURSOR BLOCK ringed in the clashing neon.
 * Deliberately none of the other three Thai sites' marks (#1 a gold lozenge,
 * #2 a lit dot, #3 a tilted tile), and deliberately not tilted: on this skin
 * rotation is banned and the off-kilter job belongs to the corner notch.
 *
 * Everything is in em so the block scales with the fluid heading instead of
 * turning into a dash at 96px and a slab at 34px. It does NOT blink — a
 * cursor beside all eight h2s on a guide is eight simultaneous flickers, and
 * the brief caps those. The one blinking cursor on the page is the header
 * wordmark's.
 */
.site-main h2 {
	position: relative;
	padding-left: 1.15em;
}

.site-main h2::before {
	content: '';
	position: absolute;
	left: 0;
	/* .44em, not .5em: Thai headings carry ascending vowel marks, so the
	   optical centre of the line sits lower than it does in Latin. */
	top: .44em;
	width: .26em;
	height: .62em;
	background: var(--sn-acc-1);
	box-shadow:
		0 0 0 2px var(--sn-acc-2),
		0 0 14px color-mix(in srgb, var(--sn-acc-1) 60%, transparent);
}

/*
 * Eyebrow label above section headings — Michael can drop it in a WYSIWYG as
 * <p class="xe4ba58c6">…</p> right before a heading. On this skin it is the
 * HUD LABEL: a notched terminal chip with a `>` prompt.
 *
 * THE TRACKING IS ON THE PROMPT ONLY. The chip's own text is editor-typed and
 * will be Thai, so it takes no letter-spacing (Thai rule 3); the `>` is a
 * literal Latin character generated by this stylesheet, which is the scoped
 * exception --sn-hud-track exists for.
 */
.xe4ba58c6 {
	display: inline-flex;
	align-items: baseline;
	gap: .5em;
	margin: 0 0 var(--sn-sp-4);
	padding: var(--sn-sp-1) var(--sn-sp-4);
	border: var(--sn-rule) solid var(--sn-acc-1);
	border-radius: 0;
	clip-path: var(--sn-notch-path);
	background: color-mix(in srgb, var(--sn-acc-1) 12%, var(--sn-surface));
	color: var(--sn-acc-1);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
}

.xe4ba58c6::before {
	content: '>' / '';
	font-family: var(--sn-font-accent);
	font-weight: 700;
	letter-spacing: var(--sn-hud-track);
	opacity: .8;
}

.xe4ba58c6 + h2,
.xe4ba58c6 + h3 {
	margin-top: 0;
}

/* Opening paragraph of a section — Michael can set it in a WYSIWYG as
   <p class="x71e1e16d">…</p>. Body face, not the display face: a squared
   display face at paragraph length is exhausting to read in Thai. */
.x71e1e16d {
	font-size: 1.375rem;
	line-height: 1.8;
	color: var(--sn-heading);
	font-weight: 400;
}

/*
 * STROKE HEADLINE — transparent fill, neon outline. The brief puts 30–40% of
 * large headings in this treatment; here it is an opt-in utility plus the
 * giant background wordmarks at the bottom of this file.
 *
 * NEVER UNDER 3rem, and that is a Thai constraint rather than a taste one: a
 * 2px stroke drawn around a tone mark the size of a comma fills it in solid,
 * so a small outlined Thai headline loses the marks that distinguish its
 * words. The guard is the min() below — the stroke can never exceed 2px and
 * the rule is scoped to display sizes by the classes that use it.
 */
.x30b1d928 {
	color: transparent;
	-webkit-text-stroke: 2px var(--sn-acc-1);
	text-shadow: none;
	paint-order: stroke fill;
}

/* ---------- Links ---------- */

a {
	color: var(--sn-accent);
	text-decoration: none;
}

/* Hover BRIGHTENS to mint-white. The page is the darkest surface in the
   system, so anything that darkens on hover walks toward the background and
   vanishes. */
a:hover,
a:focus {
	color: var(--sn-heading);
	text-decoration: underline;
}

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

/* Links in RUNNING TEXT are underlined, not merely tinted (WCAG 1.4.1).
   :where() zeroes this rule's specificity on purpose, so ANY component rule
   (.x5861cc7d, .xc186fe39 a, …) outranks it without a specificity arms race — the
   first version of this rule underlined every button inside a paragraph. */
:where(.site-main p, .site-main li, .site-main td, .site-main th) a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--sn-accent) 45%, transparent);
	transition: color .15s ease, text-decoration-color .15s ease;
}

:where(.site-main p, .site-main li) a:hover,
:where(.site-main p, .site-main li) a:focus {
	text-decoration-color: currentColor;
}

.xc186fe39 a,
.x2fdf0158 a,
.x08e192b0 a,
.x20e53271 a,
.xc9a0969f a,
.xd632d1ff a,
.x54af1f75 a,
.x5861cc7d {
	text-decoration: none;
}

/*
 * Keyboard focus. The brief asks for a double ring of 8px total in colours
 * that contrast the element AND the page.
 *
 * It is ONE outline plus an equal offset, not a box-shadow stack, and that is
 * deliberate: the offset gap paints whatever is BEHIND the element, so the
 * ring is always separated from the element's own fill by a band of page or
 * tile colour. That matters here because slime measures 14.20 against the
 * page but only 1.35 against amber and 1.32 against mint — on an amber
 * button a touching ring would be invisible and an offset one is not.
 * A box-shadow ring would also be overwritten by every component that sets
 * its own box-shadow, which on this skin is nearly all of them.
 */
:focus-visible {
	outline: 4px solid var(--sn-acc-1);
	outline-offset: 4px;
}

/* Native controls inherit the brand. */
input,
select,
textarea {
	accent-color: var(--sn-primary);
	caret-color: var(--sn-primary);
}

/*
 * FORM CONTROLS — terminal fields, and neutralising underscores. This is a
 * load-order trap worth understanding before touching it.
 *
 * underscores' style.css ships, at line ~596:
 *     input[type="number"], …, textarea { color:#666; border:1px solid #ccc;
 *                                         border-radius:3px; padding:3px }
 * That selector is (0,1,1) — EXACTLY the specificity of a block's own
 * `.x330f42a7 input` — so which of the two wins is decided purely by load
 * order. And block stylesheets registered through block.json are NOT
 * guaranteed to load after style.css: WordPress prints some of them in the
 * head BEFORE it (casino-cards does, verifiably, on this install).
 *
 * Fixing it in the block would only fix that block. It is neutralised here
 * instead, because base.css IS guaranteed to load after style.css, and the
 * selector list below matches underscores' own so it wins on order.
 * A block that wants something different must out-SPECIFY this (two classes),
 * not merely come later — see blocks/payout-calculator/style.css.
 */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
	background: var(--sn-surface-2);
	color: var(--sn-heading);
	border: var(--sn-rule) solid var(--sn-acc-1);
	border-radius: var(--sn-radius-sm);
	padding: var(--sn-sp-3) var(--sn-sp-4);
	/* Mono: these are terminal fields and most of them hold figures. Thai
	   typed into a search box falls through to Fahkwang, which is legible
	   and correctly untracked. */
	font-family: var(--sn-font-accent);
	font-size: var(--sn-fs-md);
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Same story for the focus rule — underscores sets `…:focus { color:#111 }`,
   which is near-black on a near-black page. The field also BLOOMS and swaps
   to a second neon, so focus is never carried by colour alone. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	color: var(--sn-heading);
	border-color: var(--sn-acc-3);
	box-shadow: 0 0 20px color-mix(in srgb, var(--sn-acc-3) 55%, transparent);
}

::placeholder {
	color: color-mix(in srgb, var(--sn-heading) 35%, transparent);
}

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;
}

/* Markers take the accent — a grey bullet is the one thing this page cannot
   contain. --sn-acc-fg, not --sn-acc: a marker is a GLYPH, so it needs the
   lifted value on the two slots that fail at full strength (tokens rule 2). */
.site-main :where(ul, ol) li::marker {
	color: var(--sn-acc-fg);
}

::selection {
	background: var(--sn-acc-1);
	color: var(--sn-bg);
}

/* ---------- THE COLOUR ROTATION TABLE ----------
 *
 * The brief's `colors[index % 5]`, in plain CSS. Every repeated element in
 * the theme — tiles, stats, FAQ rows, steps, chips — reads these custom
 * properties, and this ONE table decides which of the five neons each
 * position gets.
 *
 * Each slot sets FIVE things so a caller never has to know where it landed:
 *   --sn-acc        the colour, for fills, strokes and blooms (TRUE neon);
 *   --sn-acc-ink    what is printed ON that colour;
 *   --sn-acc-fg     the colour as a GLYPH — lifted on coral and violet,
 *                   which fail as foregrounds (tokens.css rule 2);
 *   --sn-acc-clash  the neon its stroke takes, two slots along, so a fill
 *                   and its border always fight ("clash on purpose");
 *   --sn-shadow-1/2 the two bloom layer colours.
 *
 * Two reasons it lives here rather than in each block:
 *   1. the rotation is a SYSTEM, and a system defined in nineteen places
 *      drifts — the third card on one block would stop matching the third
 *      card on another;
 *   2. it needs no markup change at all, so nothing about it reaches Michael,
 *      the field keys, or CONTENT-GUIDE-TH.md.
 */
.x49cbeccf > *,
.x1e4db326 > *,
.x8917fe68 > *,
.x60190e14 > *,
.xc29538ba > *,
.x02e6b68b > *,
.xe7a2f481 > *,
.x5755a3ee > *,
.xc5570363 > *,
.x902bd007 > *,
.x48f1ae61 > *,
.xd2292d90 > *,
.xa8bba3e0 > *,
.xdfdddbb3 > * {
	/* slime */
	--sn-acc: var(--sn-acc-1);
	--sn-acc-ink: var(--sn-bg);
	--sn-acc-fg: var(--sn-acc-1);
	--sn-acc-clash: var(--sn-acc-3);
	--sn-shadow-1: var(--sn-acc-1);
	--sn-shadow-2: var(--sn-acc-3);
}

.x49cbeccf > :nth-child(5n + 2),
.x1e4db326 > :nth-child(5n + 2),
.x8917fe68 > :nth-child(5n + 2),
.x60190e14 > :nth-child(5n + 2),
.xc29538ba > :nth-child(5n + 2),
.x02e6b68b > :nth-child(5n + 2),
.xe7a2f481 > :nth-child(5n + 2),
.x5755a3ee > :nth-child(5n + 2),
.xc5570363 > :nth-child(5n + 2),
.x902bd007 > :nth-child(5n + 2),
.x48f1ae61 > :nth-child(5n + 2),
.xd2292d90 > :nth-child(5n + 2),
.xa8bba3e0 > :nth-child(5n + 2),
.xdfdddbb3 > :nth-child(5n + 2) {
	/* coral — the glyph value is LIFTED (4.22 on a tile at full strength) */
	--sn-acc: var(--sn-acc-2);
	--sn-acc-ink: var(--sn-bg);
	--sn-acc-fg: var(--sn-acc-2-fg);
	--sn-acc-clash: var(--sn-acc-4);
	--sn-shadow-1: var(--sn-acc-2);
	--sn-shadow-2: var(--sn-acc-4);
}

.x49cbeccf > :nth-child(5n + 3),
.x1e4db326 > :nth-child(5n + 3),
.x8917fe68 > :nth-child(5n + 3),
.x60190e14 > :nth-child(5n + 3),
.xc29538ba > :nth-child(5n + 3),
.x02e6b68b > :nth-child(5n + 3),
.xe7a2f481 > :nth-child(5n + 3),
.x5755a3ee > :nth-child(5n + 3),
.xc5570363 > :nth-child(5n + 3),
.x902bd007 > :nth-child(5n + 3),
.x48f1ae61 > :nth-child(5n + 3),
.xd2292d90 > :nth-child(5n + 3),
.xa8bba3e0 > :nth-child(5n + 3),
.xdfdddbb3 > :nth-child(5n + 3) {
	/* azure */
	--sn-acc: var(--sn-acc-3);
	--sn-acc-ink: var(--sn-bg);
	--sn-acc-fg: var(--sn-acc-3);
	--sn-acc-clash: var(--sn-acc-5);
	--sn-shadow-1: var(--sn-acc-3);
	--sn-shadow-2: var(--sn-acc-5);
}

.x49cbeccf > :nth-child(5n + 4),
.x1e4db326 > :nth-child(5n + 4),
.x8917fe68 > :nth-child(5n + 4),
.x60190e14 > :nth-child(5n + 4),
.xc29538ba > :nth-child(5n + 4),
.x02e6b68b > :nth-child(5n + 4),
.xe7a2f481 > :nth-child(5n + 4),
.x5755a3ee > :nth-child(5n + 4),
.xc5570363 > :nth-child(5n + 4),
.x902bd007 > :nth-child(5n + 4),
.x48f1ae61 > :nth-child(5n + 4),
.xd2292d90 > :nth-child(5n + 4),
.xa8bba3e0 > :nth-child(5n + 4),
.xdfdddbb3 > :nth-child(5n + 4) {
	/* Violet. The ONE slot whose ink is mint-white — as ink it reads 4.19:1
	   and mint reads 4.49 (tokens.css rule 1) — and whose glyph value is
	   lifted, because the true violet fails as a foreground on every
	   surface in the theme (rule 2). */
	--sn-acc: var(--sn-acc-4);
	--sn-acc-ink: var(--sn-heading);
	--sn-acc-fg: var(--sn-acc-4-fg);
	--sn-acc-clash: var(--sn-acc-1);
	--sn-shadow-1: var(--sn-acc-4);
	--sn-shadow-2: var(--sn-acc-1);
}

.x49cbeccf > :nth-child(5n + 5),
.x1e4db326 > :nth-child(5n + 5),
.x8917fe68 > :nth-child(5n + 5),
.x60190e14 > :nth-child(5n + 5),
.xc29538ba > :nth-child(5n + 5),
.x02e6b68b > :nth-child(5n + 5),
.xe7a2f481 > :nth-child(5n + 5),
.x5755a3ee > :nth-child(5n + 5),
.xc5570363 > :nth-child(5n + 5),
.x902bd007 > :nth-child(5n + 5),
.x48f1ae61 > :nth-child(5n + 5),
.xd2292d90 > :nth-child(5n + 5),
.xa8bba3e0 > :nth-child(5n + 5),
.xdfdddbb3 > :nth-child(5n + 5) {
	/* amber */
	--sn-acc: var(--sn-acc-5);
	--sn-acc-ink: var(--sn-bg);
	--sn-acc-fg: var(--sn-acc-5);
	--sn-acc-clash: var(--sn-acc-2);
	--sn-shadow-1: var(--sn-acc-5);
	--sn-shadow-2: var(--sn-acc-2);
}

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

.x78a4e6b4 {
	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);
}

.x94a7cfd8 {
	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) {
	.x78a4e6b4,
	.x94a7cfd8 {
		padding-left: var(--sn-sp-8);
		padding-right: var(--sn-sp-8);
	}
}

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

/*
 * THE ARCADE KEY. A solid neon fill with dark ink, a mint stroke, a 6px
 * radius and ONE solid neon underside directly below it — press it and the
 * key travels down by exactly the depth of that underside and the underside
 * disappears, which is what makes it feel mechanical rather than animated.
 *
 * DELIBERATELY NOT the previous skin's button, in all four respects the brief
 * calls out: not a capsule, not a gradient fill, no diagonal offset shadow,
 * and no diagonal sheen. The gradient survives exactly twice on this site —
 * the reading-progress bar and the cta-banner slab — so the action colour is
 * one flat, recognisable slime everywhere a visitor can click.
 *
 * --sn-acc is PINNED to slot 1 here on purpose. Buttons sit inside rotated
 * containers (a casino card, a FAQ row) and would otherwise inherit that
 * container's neon, so the site's single action colour would change from card
 * to card. A context that genuinely wants a different key sets --sn-acc.
 *
 * INK ROUTES THROUGH --sn-btn-ink, never `color`. A context that recolours
 * the button sets the property. NEVER set `color` on .x5861cc7d from a context:
 * `.x5861cc7d:visited` has the same specificity as a plain class rule and
 * repaints the label the moment the visitor comes back, which is how the
 * label has vanished three times in this theme's history.
 */
.x5861cc7d {
	--sn-acc: var(--sn-acc-1);
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 52px, above the 44px touch-target floor and just under the brief's
	   h-14. The 4px is bought back on the phone fold budget, which the first
	   casino card needs — see the hero stylesheet. */
	min-height: 3.25rem;
	padding: var(--sn-sp-3) var(--sn-sp-8);
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-acc);
	color: var(--sn-btn-ink, var(--sn-acc-ink));
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--sn-arcade);
	transition: box-shadow .2s ease-out, transform .1s ease-out, background .2s ease-out;
}

.x5861cc7d:hover,
.x5861cc7d:focus {
	/* Bloom up and brighten — never a colour change alone (anti-pattern 11).
	   The scanline sweep below is the second simultaneous change. */
	color: var(--sn-btn-ink, var(--sn-acc-ink));
	background: var(--sn-primary-hover);
	text-decoration: none;
	box-shadow:
		0 var(--sn-arcade-drop) 0 color-mix(in srgb, var(--sn-acc) 38%, #000),
		0 0 26px color-mix(in srgb, var(--sn-acc) 70%, transparent),
		0 0 60px color-mix(in srgb, var(--sn-acc) 35%, transparent);
}

/* THE KEY PRESS. Travel and underside depth are the same token, so the key
   lands exactly on its own base — if the two ever differ it reads as sinking
   through the cabinet. */
.x5861cc7d:active {
	transform: translateY(var(--sn-arcade-drop));
	box-shadow: var(--sn-arcade-press);
}

.x5861cc7d:visited {
	color: var(--sn-btn-ink, var(--sn-acc-ink));
}

/* THE SCANLINE SWEEP — a bright band crossing the face downward, the CRT
   refresh passing over the key. ::before is the ONE pseudo-element on buttons
   — the hero and casino CTA arrows use ::after, so do not add a second
   ::before. */
.x5861cc7d::before {
	content: '';
	position: absolute;
	inset: -50% 0 auto 0;
	height: 55%;
	background: var(--sn-sheen);
	opacity: 0;
	pointer-events: none;
}

.x5861cc7d:hover::before,
.x5861cc7d:focus::before {
	animation: x59ef02fc .6s ease-out;
}

/*
 * Secondary action: the NEON OUTLINE / terminal button. Transparent, a 2px
 * stroke in the clashing neon, a mono `>` prompt, and it fills solid on
 * hover. Only conversion buttons carry a fill at rest, so an in-content
 * link-out never competes with the money CTA.
 */
.x58ada8dd {
	--sn-btn-ink: var(--sn-acc-3);
	border-color: var(--sn-acc-3);
	background: transparent;
	box-shadow:
		inset 0 0 18px color-mix(in srgb, var(--sn-acc-3) 12%, transparent),
		0 0 16px color-mix(in srgb, var(--sn-acc-3) 30%, transparent);
}

.x58ada8dd::after {
	content: ' _' / '';
	font-family: var(--sn-font-accent);
	letter-spacing: var(--sn-hud-track);
	animation: xdb4fe614 1.1s steps(1) infinite;
}

.x58ada8dd:hover,
.x58ada8dd:focus {
	--sn-btn-ink: var(--sn-bg);
	background: var(--sn-acc-3);
	box-shadow:
		0 0 24px color-mix(in srgb, var(--sn-acc-3) 65%, transparent),
		0 0 56px color-mix(in srgb, var(--sn-acc-3) 32%, transparent);
}

.x58ada8dd:active {
	transform: none; /* an outline button has no underside to collapse */
}

/* LINE is the contact channel in Thailand the way email is in Europe — every
   reference site puts it first. Its brand green is fixed by LINE, so it is
   the one hardcoded colour in the theme; mint on #06C755 reads 2.4:1, so the
   label is ink, not white. */
.x7b8d02f6 {
	--sn-acc: #06C755;
	--sn-btn-ink: #05320F;
	border-color: var(--sn-heading);
	background: #06C755;
}

.x7b8d02f6:hover,
.x7b8d02f6:focus {
	background: #2BE07A;
}

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

.x395c1882 {
	display: block;
	border-radius: var(--sn-radius);
	height: auto;
	max-width: 100%;
	border: var(--sn-rule) solid var(--sn-border);
}

/* ---------- Shared table base ---------- */
/* Table blocks wrap their <table class="x7148539f"> in .xfc07e7c2 — mandatory.
   NOT notched: clip-path on a scroll container breaks the sticky first column
   the comparison table depends on. It gets the sticker ring instead. */

.xfc07e7c2 {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--sn-pat-scanlines), var(--sn-surface);
	border: var(--sn-rule) solid var(--sn-acc-3);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-bloom);
}

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

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

/* Header band: LIGHTER than the tile under it (a darker band on a dark tile
   reads as a gap), closed by a slime rule that clashes with the azure frame.
   NO uppercase and NO letter-spacing (Thai rules 2 and 3). */
.x7148539f thead th {
	background: var(--sn-band-grad);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	white-space: nowrap;
	border-bottom: var(--sn-rule) solid var(--sn-acc-1);
}

/* Zebra rows: Thai tables run long and dense, and a striped body is far
   easier to track across than hairlines alone. */
.x7148539f tbody tr {
	background: transparent;
	transition: background .2s ease;
}

.x7148539f tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--sn-acc-1) 5%, transparent);
}

.x7148539f tbody td,
.x7148539f tbody th {
	border-bottom: 1px solid color-mix(in srgb, var(--sn-acc-1) 28%, transparent);
}

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

.x7148539f tbody tr:hover {
	background: var(--sn-primary-tint);
}

/* WYSIWYG tables (auto-wrapped by sterrennacht_wrap_naked_tables) usually
   keep their header cells in the first body row — style them like a thead. */
.x6a1b34ac tr:first-child th {
	background: var(--sn-band-grad);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	white-space: nowrap;
	border-bottom: var(--sn-rule) solid var(--sn-acc-1);
}

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

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

/*
 * The house HUD tile. A 2px stroke in the CLASHING neon, a corner notch, its
 * own scanline layer so no surface in the theme is a flat fill, and a bloom
 * that follows the clipped silhouette.
 *
 * The pattern is painted in the `background` shorthand rather than as a
 * pseudo-element, because ::before and ::after are both already spoken for on
 * several of the blocks that use .xca590eed.
 */
.xca590eed {
	position: relative;
	background: var(--sn-pat-scanlines), var(--sn-pat-halftone), var(--sn-surface);
	border: var(--sn-rule) solid var(--sn-acc-clash);
	border-radius: var(--sn-radius);
	padding: var(--sn-sp-6);
	clip-path: var(--sn-notch-path);
	filter: var(--sn-bloom-filter);
}

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

/* ---------- Shape utilities ----------
 *
 * THE HUD CORNER NOTCH is this skin's signature shape and the thing that
 * replaces site #3's `rotate(-1deg)`. Two hazards, both real:
 *
 *   1. clip-path CLIPS box-shadow. A notched element therefore gets its bloom
 *      from `filter: drop-shadow()`, which follows the clipped silhouette.
 *      That is why .xfa8dc52a sets both and why a caller must never add a
 *      box-shadow to a notched box expecting to see it.
 *   2. clip-path also clips CHILDREN, and `filter` makes the element a
 *      containing block for absolutely-positioned descendants. Anything that
 *      straddles an edge — the casino rank tile, a badge hanging off a corner
 *      — must not be inside a notched box. Those get .x2cacc172 instead.
 */
.xfa8dc52a {
	clip-path: var(--sn-notch-path);
	filter: var(--sn-bloom-filter);
}

.x3fcdacfa {
	clip-path: var(--sn-notch-path-l);
}

/* THE STICKER RING — two clashing neons as concentric zero-blur spread. The
   alternative to the notch wherever something has to overflow the box. */
.x2cacc172 {
	box-shadow: var(--sn-ring);
}

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

.x3f97d40d {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sn-pat-scanlines), var(--sn-lacquer-grad);
	border-bottom: var(--sn-rule) solid var(--sn-acc-1);
	box-shadow: 0 0 22px color-mix(in srgb, var(--sn-acc-1) 35%, transparent);
}

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

/* Reading progress — sits ON the header's bottom edge, so it covers nothing
   (assets/js/ui.js drives the scale; no JS = a 0-width, invisible bar).
   One of the two surviving uses of the action gradient. */
.x04fec1b5 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	overflow: hidden;
	pointer-events: none;
}

.x92b914ac {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--sn-gold-grad);
	background-size: 200% 100%;
	box-shadow: 0 0 12px color-mix(in srgb, var(--sn-acc-1) 70%, transparent);
	transition: transform .12s linear;
}

.xd602935c {
	background: var(--sn-purple-deep);
	border-bottom: 1px solid color-mix(in srgb, var(--sn-acc-1) 30%, transparent);
	font-size: var(--sn-fs-xs);
	color: color-mix(in srgb, var(--sn-on-chrome) 82%, transparent);
}

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

/* The age badge is a compliance mark, so it takes the money colour and a HUD
   frame rather than the rotating accent — it must look the same everywhere it
   appears (header, footer, responsible-gambling block). Mono, because it is a
   figure. */
.xd1735be1 {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--sn-sp-2);
	border: var(--sn-rule) solid var(--sn-gold);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-gold);
	font-family: var(--sn-font-accent);
	font-weight: 700;
	box-shadow: 0 0 12px color-mix(in srgb, var(--sn-gold) 30%, transparent);
}

.xb2be165f {
	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);
}

.x4b5dbe6d {
	/* SHRINKABLE. A wide custom logo (this site ships a 980x210 wordmark) used
	   to hold the row at its natural width and push the mobile hamburger off
	   the screen entirely — there was no way to open the menu on a phone. */
	flex: 0 1 auto;
	min-width: 0;
}

.xbb255295 {
	margin: 0;
	font-family: var(--sn-font-display);
	font-size: 1.75rem;
	font-weight: 600;
	white-space: nowrap;
	text-shadow: none;
}

/* The wordmark is RGB-SPLIT rather than gradient-filled — site #3's wordmark
   is an animated gradient and this one must not be. The split is horizontal
   only, which is the one way aberration is kinder to Thai than a stacked
   offset: a vertical copy of a tone mark lands inside the consonant below it
   and a horizontal one never can. */
.xbb255295 a {
	color: var(--sn-heading);
	text-decoration: none;
	text-shadow: var(--sn-ts-2);
}

.xbb255295 a:hover,
.xbb255295 a:focus {
	color: var(--sn-heading);
	text-decoration: none;
	animation: xbceba4a3 .3s steps(2) 1;
}

/* THE PAGE'S ONE BLINKING CURSOR. Not a full stop — a period reads as
   punctuation mid-sentence when the site name is Thai — and not the h2
   marker's static block, because exactly one flicker per page is the cap the
   brief sets and this is where it is spent. */
.xbb255295::after {
	content: '';
	display: inline-block;
	width: .5rem;
	height: 1.2rem;
	margin-left: .5rem;
	transform: translateY(2px);
	background: var(--sn-acc-1);
	box-shadow: 0 0 12px color-mix(in srgb, var(--sn-acc-1) 70%, transparent);
	animation: xdb4fe614 1.1s steps(1) infinite;
}

.x3f97d40d .custom-logo {
	max-height: 70px;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* Phones: cap the wordmark so the row always has room for the hamburger. */
@media (max-width: 767px) {
	.x3f97d40d .custom-logo {
		max-height: 44px;
	}
}

.xc98f8e91 {
	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;
}

.x5a4524d8 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sn-sp-2);
	background: var(--sn-purple-tint);
	border: var(--sn-rule) solid var(--sn-acc-1);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-acc-1);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.x5a4524d8:hover {
	background: var(--sn-acc-1);
	color: var(--sn-bg);
	box-shadow: 0 0 20px color-mix(in srgb, var(--sn-acc-1) 60%, transparent);
}

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

/* Mobile: dropdown panel (covers both wp_nav_menu ul and wp_page_menu div>ul). */
.xc98f8e91 > ul,
.xc98f8e91 > div > ul {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + var(--sn-sp-3));
	min-width: 250px;
	padding: var(--sn-sp-3);
	background: var(--sn-pat-scanlines), var(--sn-purple-deep);
	border: var(--sn-rule) solid var(--sn-acc-1);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-bloom);
}

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

.xc98f8e91 li a {
	display: block;
	padding: var(--sn-sp-2) var(--sn-sp-3);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 500;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.xc98f8e91 li a:hover,
.xc98f8e91 li a:focus {
	background: var(--sn-acc-1);
	color: var(--sn-bg);
	text-decoration: none;
}

.xc98f8e91 li.current-menu-item > a,
.xc98f8e91 li.current_page_item > a {
	color: var(--sn-acc-1);
}

/* Chevron on parent items (rotates up when open via .focus — navigation.js). */
.xc98f8e91 li.menu-item-has-children > a::after,
.xc98f8e91 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 .2s ease;
}

.xc98f8e91 li.menu-item-has-children.focus > a::after,
.xc98f8e91 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. */
.xc98f8e91 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-rule) solid var(--sn-acc-3);
	box-shadow: none;
}

.xc98f8e91 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). */
.xc98f8e91.toggled ul ul {
	display: none;
}

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

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

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

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

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

	/* Desktop: the item fills and blooms on hover rather than underlining —
	   an underline is the quiet move and there are none of those here. It
	   does NOT lift or tilt: nothing on this skin rotates.
	   nowrap because Thai menu items are long and were breaking across two
	   lines. NO letter-spacing (Thai rule 3). */
	.xc98f8e91 li a {
		border-radius: var(--sn-radius-sm);
		white-space: nowrap;
		padding: var(--sn-sp-1) var(--sn-sp-3);
		font-size: var(--sn-fs-sm);
		letter-spacing: 0;
	}

	.xc98f8e91 li a:hover,
	.xc98f8e91 li a:focus {
		background: var(--sn-acc-1);
		color: var(--sn-bg);
		box-shadow: 0 0 18px color-mix(in srgb, var(--sn-acc-1) 55%, transparent);
	}

	.xc98f8e91 li.current-menu-item > a,
	.xc98f8e91 li.current_page_item > a {
		background: var(--sn-purple-tint);
		color: var(--sn-acc-1);
	}

	/* Desktop dropdown. Opens on hover, keyboard focus, or click (.focus). */
	.xc98f8e91 ul ul {
		display: none;
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		min-width: 250px;
		margin: 0;
		padding: var(--sn-sp-3);
		background: var(--sn-pat-scanlines), var(--sn-purple-deep);
		border: var(--sn-rule) solid var(--sn-acc-1);
		border-radius: var(--sn-radius);
		box-shadow: var(--sn-bloom);
	}

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

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

	.xc98f8e91 ul ul li a {
		white-space: normal;
		border-radius: var(--sn-radius-sm);
	}

	.xc98f8e91 ul ul li a:hover,
	.xc98f8e91 ul ul li a:focus {
		background: var(--sn-acc-3);
		color: var(--sn-bg);
	}

	.xc98f8e91 ul ul li.current-menu-item > a,
	.xc98f8e91 ul ul li.current_page_item > a {
		background: transparent;
		color: var(--sn-acc-1);
	}

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

/* ---------- Site footer (T2) ---------- */
/* The SYNTHWAVE HORIZON sits here: a glowing grid receding to a vanishing
   point behind the deck, which is the retro-future anchor the brief asks for
   in the hero and the footer. Deck: brand | two menus | the
   responsible-gambling CARD, then a slim bottom bar. */

.xf94671dc {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: var(--sn-sp-24);
	background: var(--sn-pat-scanlines), var(--sn-purple-deep);
	color: color-mix(in srgb, var(--sn-on-chrome) 72%, transparent);
	font-size: var(--sn-fs-sm);
	border-top: var(--sn-rule) solid var(--sn-acc-1);
	box-shadow: 0 0 30px color-mix(in srgb, var(--sn-acc-1) 25%, transparent);
}

/* The grid floor. Drawn wider than the footer so the perspective vanishing
   point falls outside the viewport, and masked toward the horizon so it fades
   rather than ending on a hard line. #page's overflow-x:clip absorbs the
   overhang. */
.xf94671dc::before {
	content: '';
	position: absolute;
	left: -25%;
	right: -25%;
	bottom: 0;
	height: 58%;
	z-index: -1;
	pointer-events: none;
	background: var(--sn-pat-grid);
	transform: perspective(420px) rotateX(62deg);
	transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
	mask-image: linear-gradient(to top, #000 10%, transparent 85%);
	animation: x1cc141c8 8s linear infinite;
}

.xd47df6f1 {
	display: grid;
	gap: var(--sn-sp-8);
	padding: var(--sn-sp-12) 0 var(--sn-sp-8);
}

.x7654b5ba {
	margin: 0 0 var(--sn-sp-3);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font-display);
	font-size: 1.625rem;
	font-weight: 600;
	letter-spacing: 0;
	text-shadow: var(--sn-ts-2);
}

/* Static cursor block, matching the header wordmark but NOT blinking — one
   flicker per page is the cap. */
.x7654b5ba::after {
	content: '';
	display: inline-block;
	width: .45rem;
	height: 1.1rem;
	margin-left: .5rem;
	transform: translateY(2px);
	background: var(--sn-acc-1);
	box-shadow: 0 0 12px color-mix(in srgb, var(--sn-acc-1) 60%, transparent);
}

.x44abd721 {
	margin: 0;
	max-width: 42ch;
}

.xd47df6f1 > * {
	min-width: 0; /* grid children must be allowed to shrink below content */
}

/* Both menus live in one grid cell (see the 1024px rule). */
.xa2fc320f {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-8);
}

.x0bf32a75 {
	min-width: 0;
	flex: 1 1 auto;
}

/* NO uppercase and NO letter-spacing (Thai rules 2 and 3). Size, weight and
   colour separate the column heading from its list instead. */
.x150cee70 {
	margin: 0 0 var(--sn-sp-4);
	color: var(--sn-acc-1);
	font-family: var(--sn-font-display);
	font-weight: 600;
	letter-spacing: 0;
	font-size: var(--sn-fs-md);
}

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

.x8ad41fcd a {
	color: color-mix(in srgb, var(--sn-on-chrome) 72%, transparent);
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}

.x8ad41fcd a:hover,
.x8ad41fcd a:focus {
	color: var(--sn-acc-1);
	padding-left: var(--sn-sp-3);
	text-decoration: none;
}

/* The compliance card — sits in the deck, not in a strip below it. NOT
   notched and NOT blooming: compliance furniture styled like a promotion
   reads as a promotion (§7), so it keeps a plain frame and a money-coloured
   left edge while everything around it glows. */
.x9dccebe0 {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-4);
	padding: var(--sn-sp-6);
	background: color-mix(in srgb, var(--sn-on-chrome) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--sn-on-chrome) 30%, transparent);
	border-left: var(--sn-rule-heavy) solid var(--sn-gold);
	border-radius: var(--sn-radius-sm);
}

.x8e996b51 {
	display: flex;
	align-items: flex-start;
	gap: var(--sn-sp-3);
}

.x8e996b51 p {
	margin: 0;
	color: color-mix(in srgb, var(--sn-on-chrome) 90%, transparent);
}

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

/* Outlined chips in the rotating accent — deliberately NOT filled: compliance
   links are informational and must not read as calls to action (§7). */
.x48f1ae61 a {
	display: inline-block;
	padding: var(--sn-sp-1) var(--sn-sp-3);
	border: 1px solid var(--sn-acc);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-on-chrome);
	font-size: var(--sn-fs-xs);
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.x48f1ae61 a:hover,
.x48f1ae61 a:focus {
	background: var(--sn-acc);
	color: var(--sn-acc-ink);
	text-decoration: none;
	box-shadow: 0 0 16px color-mix(in srgb, var(--sn-acc) 50%, transparent);
}

/* Row 2: copyright + disclosure. */
.x8eef173f {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-6) 0;
	border-top: 1px solid color-mix(in srgb, var(--sn-acc-1) 30%, transparent);
	font-size: var(--sn-fs-xs);
	/* 62%, not 45%: at 45% the copyright and the affiliate disclosure — the
	   two lines that MUST be readable — measured 3.93:1 on an ink footer. */
	color: color-mix(in srgb, var(--sn-on-chrome) 62%, transparent);
}

.x9cab9a61,
.x1d3130b7 {
	margin: 0;
}

@media (min-width: 768px) {
	.xd47df6f1 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sn-sp-8) var(--sn-sp-12);
	}

	.xa2fc320f {
		flex-direction: row;
		gap: var(--sn-sp-12);
	}

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

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

@media (min-width: 1024px) {
	/* Exactly three columns — brand, the menu cell, the compliance card. The
	   menus share ONE cell so an unassigned menu location cannot change the
	   column count and squash the brand text. Do not "simplify" this back
	   into four columns. */
	.xd47df6f1 {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) minmax(250px, 1.3fr);
		gap: var(--sn-sp-12);
		padding-top: var(--sn-sp-16);
	}
}

/* ---------- Keyframe library ----------
 * The brief's motion set: flicker, scan, glitch, drift. Deliberately NOT the
 * bouncy float/wiggle/spin language of site #3 — that is anti-pattern 9 here,
 * and the old keyframe names are gone rather than repointed so a stray
 * `animation: xc6f572c9` in a block stylesheet fails loudly instead of
 * quietly doing the wrong thing.
 *
 * Everything animates `transform`, `opacity`, `filter`, `box-shadow` or
 * `background-position` only, so it all stays off the layout path. Every one
 * is switched off in the reduced-motion block at the end of this file; none
 * carries information.
 */

/* Terminal cursor / neon-sign blink. steps(1) so it snaps rather than fades.
   1.1s is 0.9Hz — well under the 3Hz photosensitivity ceiling. */
@keyframes xdb4fe614 {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: .18; }
}

/* An unstable neon sign. Longer and more irregular than the cursor blink. */
@keyframes xe57130fb {
	0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; }
	20%, 22%, 55%                { opacity: .55; }
}

/* A bright band crossing an element downward — the CRT refresh. */
@keyframes x59ef02fc {
	from { transform: translateY(-120%); opacity: 0; }
	15%  { opacity: 1; }
	to   { transform: translateY(320%); opacity: 0; }
}

/* RGB-split shudder. Fires ONCE on hover or load, then settles. */
@keyframes xbceba4a3 {
	0%   { transform: translate(0); }
	20%  { transform: translate(-2px, 1px); }
	40%  { transform: translate(2px, -1px); }
	60%  { transform: translate(-1px, 0); }
	100% { transform: translate(0); }
}

/* The synthwave floor scrolling toward the viewer. One grid cell per cycle,
   so the loop is seamless. */
@keyframes x1cc141c8 {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 0 40px, 0 40px; }
}

/* MARCHING ANTS — a dashed border that travels around the element. The
   brief's "animated border" for hero and featured elements; drawn as four
   repeating-gradient strips rather than a conic sweep so it works on a box of
   any aspect ratio and costs one pseudo-element instead of two. One dash
   period (24px) per cycle, so the loop is seamless. */
@keyframes xdbc3fdc7 {
	to { background-position: 24px 0, -24px 100%, 0 -24px, 100% 24px; }
}

/* Ticker bands. The content string is duplicated, so -50% is one full lap. */
@keyframes x6b37f07b {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Breathing bloom on a primary CTA. */
@keyframes x829bc9f3 {
	0%, 100% {
		box-shadow: 0 0 18px color-mix(in srgb, var(--sn-acc) 45%, transparent);
	}

	50% {
		box-shadow:
			0 0 34px color-mix(in srgb, var(--sn-acc) 80%, transparent),
			0 0 60px color-mix(in srgb, var(--sn-acc-3) 40%, transparent);
	}
}

/* Gradient travel. The brief prefers a hue-rotate for animated gradients, and
   xc289c7d6 below is that — but hue-rotate is a FILTER, so on the CTA band it
   would also rotate the ink printed on top of the gradient. Surfaces that
   carry text animate their background position instead; xc289c7d6 is reserved
   for purely decorative fills. */
@keyframes xe407fd02 {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Electric hue drift — preferred over a background-position shift for
   decorative gradient fills and sticker rings, per the brief. */
@keyframes xc289c7d6 {
	from { filter: hue-rotate(0deg); }
	to   { filter: hue-rotate(360deg); }
}

/* Motion utilities. Decorative elements opt in with these rather than each
   block restating a duration. */
.xe57130fb  { animation: xe57130fb 3.5s steps(1) infinite; }
.xdb4fe614    { animation: xdb4fe614 1.1s steps(1) infinite; }
.x04d1ebad    { animation: x1cc141c8 8s linear infinite; }
.xc289c7d6      { animation: xc289c7d6 8s linear infinite; }
.xd3261a83     { animation: xe407fd02 8s ease infinite; }
.xe3485968    { animation: x829bc9f3 2s ease-in-out infinite; }

/* ---------- Scroll reveal ---------- */
/* COMPLIANCE BY CONSTRUCTION: the hidden state exists ONLY under .x8d887963,
   which assets/js/reveal.js adds after its prefers-reduced-motion check, and
   only for blocks still below the fold. No JS = nothing is ever hidden. */

.x8d887963 .x1f9b14a1 {
	opacity: 0;
	transform: translateY(18px);
}

.x8d887963 .x1f9b14a1.is-inview {
	opacity: 1;
	transform: none;
	/* ease-out, not the previous skin's overshoot cubic-bezier: a bouncy
	   settle is the motion language this skin is defined against. */
	transition: opacity .45s ease-out, transform .45s ease-out;
}

/* ---------- Atmosphere ----------
 *
 * THE WHOLE PAGE IS A SCREEN, and it takes two layers to say that without
 * costing contrast (see the two-strength note in tokens.css):
 *
 *   body::before  BEHIND everything — the neon bloom mesh, the full-strength
 *                 scanlines and the static noise. This is where the texture
 *                 actually lives, and because it is under the content it
 *                 costs nothing at all.
 *   body::after   ABOVE everything — the soft .06 scanlines only, fixed, so
 *                 the page reads as one screen that content scrolls behind
 *                 rather than as a texture glued to each box.
 *
 * Both hang off BODY, not #page: #page carries overflow-x:clip, and a clip
 * container can clip a fixed-position descendant.
 */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		var(--sn-pat-noise),
		var(--sn-pat-scanlines),
		var(--sn-pat-mesh);
}

body::after {
	content: '';
	position: fixed;
	inset: 0;
	/* Above the sticky header (100) and the promo sticky bar, because a CRT
	   scans the entire screen including its chrome. Below nothing, because
	   the theme has no modal. */
	z-index: 9998;
	pointer-events: none;
	background: var(--sn-pat-scanlines-soft);
}

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

/*
 * THE GIANT STROKE WORDMARK — a huge outlined number bleeding off an edge,
 * the brief's replacement for filled low-opacity background typography.
 *
 * Drawn as a PSEUDO-ELEMENT on containers that already exist, never as
 * markup, so nothing about it reaches the editor, the ACF field keys or
 * CONTENT-GUIDE-TH.md. That is also why the selectors are named here instead
 * of a generic `.x8a7b13a9` utility: a utility class would have to be printed
 * by a render.php, and this pass is CSS-only.
 *
 * The mark is "888": the most auspicious number in Thai gambling culture,
 * language-neutral so it never becomes copy Michael has to own or translate,
 * and the `content: '888' / ''` alt syntax keeps it out of the accessibility
 * tree. It is OUTLINED here rather than filled — at this size a solid mass
 * would fight the content in front of it, and the stroke is the brief's
 * signature 3.
 */
.x20e53271::after,
.x14529642::after,
.x4f4b1e36::after {
	content: '888' / '';
	position: absolute;
	right: -2%;
	bottom: -14%;
	z-index: 0;
	pointer-events: none;
	font-family: var(--sn-font-accent);
	font-size: clamp(9rem, 26vw, 20rem);
	font-weight: 700;
	line-height: .8;
	color: transparent;
	-webkit-text-stroke: 2px var(--sn-acc-1);
	opacity: .28;
}

/*
 * THE MARQUEE TICKER — a full-bleed band of scrolling mono text, the brief's
 * connective decoration between sections. Michael already has this element:
 * <hr class="xb1283f52"> was the section ornament on the last skin and is
 * documented in CONTENT-GUIDE-TH.md, so it keeps working and simply becomes
 * something better.
 *
 * THE STRING IS DUPLICATED INSIDE `content` so translateX(-50%) is exactly
 * one lap and the loop is seamless with a single pseudo-element — no markup.
 *
 * IT SAYS NOTHING. Machine chrome only: no product claim, no compliance
 * wording, no legality or licensing language, nothing an editor owns or a
 * translator would have to touch (§1, §7). It is also the scoped home of
 * --sn-hud-track: a literal Latin string written into this stylesheet, where
 * Thai rule 3 does not apply, and `/ ''` keeps it out of the a11y tree.
 */
.xb1283f52 {
	position: relative;
	display: flex;
	align-items: center;
	height: 2.75rem;
	margin: var(--sn-sp-16) calc(50% - 50vw);
	padding: 0;
	border: 0;
	border-top: var(--sn-rule) solid var(--sn-acc-1);
	border-bottom: var(--sn-rule) solid var(--sn-acc-1);
	background: var(--sn-pat-scanlines), var(--sn-surface);
	box-shadow: 0 0 22px color-mix(in srgb, var(--sn-acc-1) 25%, transparent);
	overflow: hidden;
}

.xb1283f52::before {
	content: '> SYS.ONLINE · SIGNAL OK · UPLINK 99.9 · 24/7 · 888 · > SYS.ONLINE · SIGNAL OK · UPLINK 99.9 · 24/7 · 888 · ' / '';
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--sn-font-accent);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sn-hud-track);
	color: var(--sn-acc-1);
	text-shadow: 0 0 10px color-mix(in srgb, var(--sn-acc-1) 55%, transparent);
	animation: x6b37f07b 26s linear infinite;
}

/* Soft arc on the bottom edge of a full-bleed band. */
.x5098c888 {
	border-bottom-left-radius: 50% 40px;
	border-bottom-right-radius: 50% 40px;
}

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

.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;
}

/* ---------- Reduced motion ----------
 * The brief's rule, and the theme's: keep every visual style — colours,
 * strokes, blooms, patterns, notches — and remove only the movement.
 * Hover and active states stay, at a shorter duration.
 *
 * FLICKER IS THE ONE THAT MATTERS. Everything else here is comfort; the
 * blink, the flicker and the glitch are photosensitivity items and are gated
 * unconditionally.
 */
@media (prefers-reduced-motion: reduce) {
	.x8d887963 .x1f9b14a1,
	.x8d887963 .x1f9b14a1.is-inview {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.xe57130fb,
	.xdb4fe614,
	.x04d1ebad,
	.xc289c7d6,
	.xe3485968,
	.xb1283f52::before,
	.xf94671dc::before,
	.xbb255295::after,
	.xbb255295 a:hover,
	.xbb255295 a:focus,
	.x58ada8dd::after {
		animation: none;
	}

	/* The cursor blocks stay VISIBLE, they just stop blinking. */
	.xbb255295::after,
	.x58ada8dd::after {
		opacity: 1;
	}

	/* The ticker holds its first frame rather than vanishing — the band is
	   part of the page's structure, not an effect. */
	.xb1283f52::before {
		transform: none;
	}

	.x5861cc7d,
	.x5861cc7d:hover,
	.x5861cc7d:focus,
	.x5861cc7d:active {
		transform: none;
		transition-duration: .15s;
	}

	/* Decorative motion off: the progress bar and the scanline sweep carry no
	   information, so they simply disappear. */
	.x04fec1b5 {
		display: none;
	}

	.x5861cc7d::before {
		display: none;
	}
}