/* =========================================================================
   royale-azerbaycan.com — «Zeytun & Buz» design layer
   =========================================================================

   ONE LAYER. Every selector appears once and the last rule for a selector is the only rule
   for it.

   Reading order:
     0. Tokens                     — the palette, mapped once from theme.json
     1. Base canvas + typography   — prose rhythm, figures, links
     2. The signature: YARIM-TİR   — a stem, a crossbar, and where the crossbar STOPS
     3. Chrome                     — header, trust bar, footer, sticky, modals
     4. Sections                   — hero, TOC, lobby, bonus, pay, FAQ …
     5. State matrix               — hover / focus / active / disabled
     6. Accessibility + responsive — tap targets, 360/768/1024/1440, motion

   THE IDENTITY. The field is ZEYTUN — a chromatic olive-black (h80) — and the lead is BUZ, an
   ice cyan (h188). Col AF asked for «Royal Purple & Champagne» (#1A1030 field, #E6C88A accent,
   amethyst #8B5CF6) with Syne / Lexend / Spline Sans Mono, and every part of that was already
   taken: on the pairing metric the palette scores 23.1 against royale-vip, #8B5CF6 ships as an
   exact hex on royale-ios, Syne has no U+0259 at all, Lexend has four network uses and Spline
   Sans Mono three.

   The hue circle itself is finished — lanes_rzb.py reports a maximum clearance of 6 degrees in
   BOTH registers anywhere on the wheel — so the claim is a PAIRING claim. Field + lead sits
   57.2 units from the nearest site: h80 olive-black is a ground only three sites build on
   (royale-casino-az, royale-kazino, royale-oyna) and every one of them pairs it with a WARM
   lead. Note what was rejected to get here: pairsearch_rzb.py's own top answer was a garnet
   ground with a green lead at 123.5, which is visually the 79th's «Şərab & Zümrüd» one row
   later. The metric scored it as far away because it compares candidates against that site's
   CORAL and never against its emerald — a pairing metric ranks hues, not strategies.

   SÜMÜK (bone) #d5cdb4 is the METAL: the licence hairline, plate edges, the stem and tick of
   the device. It is never body text, never the CTA and never the brand colour. NARINCI
   #ec9370 is the risk signal alone (18+ chip, T&C separators, self-exclusion).

   CONTRAST CONTRACT (measured for THIS palette with _fix_identity_rzb.py, not inherited —
   body >= 4.5:1):
     on --field / --field-deep / --plate / --plate-raised / --plate-top
                                           : paper 16.2/17.9/14.2/12.2/10.4,
                                             figure 15.4/17.0/13.5/11.6/9.8,
                                             prose 13.7/15.1/12.0/10.3/8.8,
                                             buz-lit 12.0/13.3/10.6/9.1/7.7,
                                             sümük 11.0/12.2/9.7/8.3/7.1,
                                             muted 10.5/11.7/9.3/7.9/6.8,
                                             buz 10.0/11.0/8.7/7.5/6.4,
                                             dim 7.4/8.2/6.5/5.6/4.8,
                                             narıncı 5.9/6.5/5.2/4.4/4.8
     INK on the ice CTA fill (--buz)       : 9.95 — the lead is the SATURATED colour here, so
                                             the primary CTA is an ice slab with olive ink.
     paper on --buz-deep fill              : 11.4
     paper on --aktiv fill                 : 11.3
     paper on --risk-deep fill (18+/RG)    : 14.4
     --rule on field/plate/raised          : 2.16 / 1.90 / 1.63 — a PANEL SEAM, decoration.
     --rule-ctl on field/plate/raised      : 7.04 / 6.19 / 5.30 — the boundary of a CONTROL,
                                             WCAG 1.4.11, and a separate token because the two
                                             jobs have different floors (79th build's finding).
*/

/* ---- 0. Tokens ---------------------------------------------------------- */
:root {
	--field: #151c07;
	--field-deep: #0b0f04;
	--plate: #1e2810;
	--plate-raised: #283419;
	--rule: #46552c;
	--rule-lit: #647a3f;
	/* --rule-ctl is the boundary of an INTERACTIVE element, and it is a separate token because
	   the two jobs have different floors. A hairline between two panels is decoration and may
	   sit at any contrast; the edge that tells a reader «this is a control» is WCAG 1.4.11
	   non-text contrast and must clear 3:1 against whatever it sits on. --rule is 1.73:1 on the
	   field, which is correct for a panel seam and wrong for a button — measured on all three
	   grounds: 4.11 on --field, 3.81 on --plate, 3.43 on --plate-raised. */
	--rule-ctl: #9aab74;
	--paper: #f5f7ec;
	--prose: #e0e6d2;
	--muted: #c3cdae;
	--dim: #a3ad8c;
	--buz: #5fd3e6;
	--sumuk: #d5cdb4;
	--buz-deep: #0c3a44;
	/* The two stops the SIGNATURE needs by name. They were the donor's gradient literals
	   and nothing else, so `var(--buz-lit)` / `var(--plate-top)` in §2 resolved to an
	   invalid declaration and the raised jewel and both quiet mounts painted TRANSPARENT.
	   Declared here so the gradients below and the jewels in §2 name one source. */
	--buz-lit: #8ae4f2;
	--plate-top: #333f22;
	--ink: #151c07;
	--figure: #eef2e4;
	--aktiv: #2b3a1a;
	--aktiv-lit: #8ae4f2;
	--risk: #ec9370;
	--risk-deep: #3a1c0b;

	--plate-grad: linear-gradient(183deg, #1e2810 0%, #151c07 100%);
	--plate-raised-grad: linear-gradient(183deg, #333f22 0%, #1e2810 100%);
	--buz-grad: linear-gradient(166deg, #8ae4f2 0%, #5fd3e6 54%, #34aec4 100%);

	/* The radius ramp INVERTS every sibling's. Each of them softens the CONTROLS and
	   keeps the plate hard-edged (0 throughout, 4px with one 18px pocket, 7/5 soft
	   slab, 14/999 pill, a flat head on a 12px foot, three wide corners with one 4px
	   cut). Here the plate is uniformly soft — a plaque, all four corners equal, so
	   nothing on it competes with the two tubes that overrun it — and the controls go
	   SQUARE at 3px. --r-head is kept equal to --r-plate on purpose: this identity has no
	   special corner, because its edge event is not on the silhouette at all. */
	--r-plate: 14px;
	--r-ctl: 3px;
	--r-head: 14px;

	/* YARIM-TİR geometry, stated once so the mark, the plate, the card and the section
	   divider are provably the same drawing at three scales.

	   Only the PRIMITIVES live here. Every composite (the bar's half-width, the tick's seat above
	   the bar's free end) is arithmetic over these and is declared on the COMPONENTS in §2 —
	   because a var() inside a custom property is substituted where that property is DECLARED, so
	   a root-level composite would freeze the root's numbers onto every element that re-declares
	   its own. That is the 77th build's recorded defect and the 78th's rule; it is applied here
	   rather than re-learned. */
	--tir-stemw: 2px;       /* the stem standing at the plate's left edge — the bowl's edge */
	--tir-barh: 3px;        /* the crossbar's thickness */
	--tir-y: 26px;          /* how far down the plate the crossbar sits */
	--tir-reach: 50%;       /* WHERE THE BAR STOPS. The whole device is this number. */
	--tir-tick: 7px;        /* the tick standing above the bar's free end */
	--tir-tw: 2px;
	--tir-drop: 5px;        /* the tick's clearance above the bar: it stands, never touches */
	--tir-line: var(--sumuk);   /* stem + tick: the metal */
	--tir-bar: var(--buz);      /* the crossbar: the lead */

	--tap: 44px;
	--ease: cubic-bezier(.2, .6, .3, 1);
}

/* ---- 1. Base canvas + typography --------------------------------------- */
html {
	scroll-behavior: smooth;
	/* Every in-page target on a one-pager sits under a 62px sticky header. */
	scroll-padding-top: 78px;
}

body {
	background: var(--field);
	color: var(--prose);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Alumni Sans's default figures are LINING — fontrender_rcb.py's «0123456789 550 AZN
	   2026» row was read before adoption, which is how the donor's face was caught
	   defaulting to old-style. This declaration therefore corrects nothing in the FIRST
	   face; it is here for the FALLBACKS, because Bookman Old Style and Palatino Linotype
	   both default to old-style figures and a css2 failure would re-introduce the defect
	   on exactly the pages where a figure matters most. */
	font-variant-numeric: lining-nums;
}

/* A quiet citron-and-steel wash so the page is not a flat black rectangle. Two very low
   alpha radials — no image, no request, and both stops are on the field hue so
   nothing here can shift a measured contrast ratio. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(70rem 40rem at 78% -8%, rgba(95, 211, 230, .10), transparent 62%),
		radial-gradient(58rem 34rem at 8% 108%, rgba(213, 205, 180, .07), transparent 60%);
}

/* The template gives <main> an ID, not a class, so the class rule this replaces had
   never matched anything on any page. */
#rzb-main {
	display: block;
	min-height: 40vh;
}

/* Prose rhythm. Nothing below 15px anywhere on the site. */
p {
	margin: 0 0 1.05em;
	max-width: 74ch;
}

p:last-child {
	margin-bottom: 0;
}

/* The mono face carries FIGURES ONLY — never an uppercase Azerbaijani label.
   That is a structural rule, not a preference: the mono slot is where ə/Ə is
   most often missing or drawn as the wrong outline, and digits contain no
   schwa, so the risk disappears instead of needing an audit each build. */
.rzb-num,
.rzb-fact__val,
.rzb-offer__amount,
.rzb-meter__val,
.rzb-toc__num,
.rzb-steps__num {
	font-family: "Reddit Mono", ui-monospace, Consolas, "Courier New", monospace;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -.01em;
	color: var(--figure);
}

/* Section rhythm on a long single document: generous, and identical for every
   anchor target so the scroll never feels uneven. */
.rzb-sec {
	padding-block: clamp(46px, 6vw, 84px);
	scroll-margin-top: 78px;
}

.rzb-sec + .rzb-sec {
	border-top: 1px solid rgba(70, 85, 44, .55);
}

/* Eyebrow: small caps label above a heading. Display face, never the mono. */
.rzb-eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	font-family: "Rethink Sans", "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
}

.rzb-eyebrow::after {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	margin-left: 10px;
	vertical-align: .32em;
	background: var(--rule-lit);
}

/* The citable opening passage: definition -> offer -> CTA, in one paragraph an
   answer engine can lift whole. Slightly larger and lighter than body prose. */
.rzb-lede {
	font-size: clamp(18px, 2.1vw, 21px);
	line-height: 1.62;
	color: var(--paper);
	max-width: 68ch;
}

/* ---- 2. THE SIGNATURE: YARIM-TİR --------------------------------------- */
/*
   One idea, drawn at three scales:

   1. SAP — a bone hairline standing at the plate's LEFT edge, the full height of the plate.
   2. TİR — the ice crossbar. It starts at that stem and stops DEAD at the plate's horizontal
      centre: half the plate wide, and no more.
   3. DİRƏK — a short bone tick standing directly above the bar's free end, centred on it and
      never touching it.

   It is the crossbar of Ə — the letter only Azerbaijani carries among Latin alphabets, and the
   glyph this network has fought its fonts over for eighty builds. The domain is the country's
   own name; the mark is the country's own letter, taken apart.

   Four mechanics, all load-bearing:

   * THE HALF IS GEOMETRY, NOT A MASK. The bar is one solid fill sized to --tir-reach (50%), so
     its right edge lands on the plate's centre by construction and a probe can prove it on the
     rendered page. Nothing is masked, so there is no vendor-prefixed property to lose.
   * THE TICK IS CENTRED BY THE SAME NUMBER, not by eye: a background-position of 50% aligns the
     image's centre with the container's centre, which is exactly where the bar ends. One
     primitive places both, so they cannot drift apart.
   * THE STACKING ORDER IS THE DEVICE. The drawing is inside the box, so it sits behind the
     reader's sentence: `z-index: -1` on the ::before and `isolation: isolate` on every
     component that wears it. Without the isolation the negative index escapes the component's
     stacking context and the drawing paints behind the SECTION — it vanishes with nothing in
     the CSS looking wrong.
   * ONE absolutely positioned ::before, `pointer-events: none`: its BOX is the whole plate and
     only its PAINT is the device, so without this every link inside a plate would be dead.
*/
/* THE COMPOSITES, declared on every component that wears the device — never on :root, for the
   reason stated with the primitives in §0. Each element resolves them from its OWN --tir-*
   values, which is why the age gate can re-scale the entire drawing by setting three numbers. */
.rzb-plate,
.rzb-agegate__card,
.rzb-card,
.rzb-quick__card,
.rzb-game,
.rzb-rule {
	--tir-tickY: calc(var(--tir-y) - var(--tir-tick) - var(--tir-drop));
	--sig-row:
		linear-gradient(var(--tir-line) 0 0),
		linear-gradient(var(--tir-bar) 0 0),
		linear-gradient(var(--tir-line) 0 0);
	--sig-size:
		var(--tir-stemw) 100%,
		var(--tir-reach) var(--tir-barh),
		var(--tir-tw) var(--tir-tick);
	--sig-pos:
		0 0,
		0 var(--tir-y),
		var(--tir-reach) var(--tir-tickY);
}

.rzb-plate::before,
.rzb-agegate__card::before,
.rzb-card::before,
.rzb-quick__card::before,
.rzb-game::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--sig-row);
	background-size: var(--sig-size);
	background-position: var(--sig-pos);
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: -1;
}

.rzb-plate {
	position: relative;
	isolation: isolate;
	background: var(--plate-grad);
	background-origin: border-box;
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
	padding: 24px 26px;
}

/* The raised variant reads the same sentence closer: the slot widens, the segment thickens and
   brightens, and it drops one pixel further. The drawing does not change — only its volume. A
   later rule that sets only `background:` cannot disturb it, because the device lives on the
   pseudo-element and not in that shorthand. */
.rzb-plate--raised {
	background: var(--plate-raised-grad);
	background-origin: border-box;
	border-color: var(--rule-lit);
	--tir-barh: 4px;
	--tir-y: 30px;
	--tir-tick: 9px;
	--tir-bar: var(--buz-lit);
}

/* The quiet variant is the SAME drawing with the lead taken out: the slot and the brackets stay,
   the inserted syllable goes the colour of the edge. Nothing marks it — which is the point. */
.rzb-plate--quiet {
	--tir-line: var(--rule);
	--tir-bar: var(--rule-lit);
}

/* The age gate wears it too: it is the first plate a visitor sees and the one place the device
   has to introduce itself, so it is drawn at the largest scale on the site. inc/chrome.php
   paints this modal from its own inline <style>, so the class list here and the one there have
   to stay in step — on the 76th build they were not (the sheet was drawn for .rzb-gate__box
   while chrome.php rendered .rzb-agegate__card, so every rule was dead and the modal wore an
   ancestor's drawing). The name here is the name chrome.php actually emits, and the probe
   re-reads the RENDERED DOM for it rather than trusting this comment. */
.rzb-agegate__card {
	position: relative;
	isolation: isolate;
	--tir-barh: 4px;
	--tir-drop: 8px;
	--tir-tick: 9px;
	--tir-bar: var(--buz-lit);
}

/* TİR ALONE — the section divider is the device with no plate under it, so the whole sentence
   shows rather than the top edge of something else. It needs no isolation: it has no content to
   sit behind, because the element IS the drawing. */
.rzb-rule {
	position: relative;
	height: 14px;
	width: 132px;
	max-width: 100%;
	margin: 6px 0 24px;
	background-image: var(--sig-row);
	background-size: var(--sig-size);
	background-position: var(--sig-pos);
	background-repeat: no-repeat;
	--tir-barh: 3px;
	--tir-drop: 6px;
	--tir-tick: 8px;
}

/* ---- 3. Chrome ---------------------------------------------------------- */
/* 3a. Skip link */
.rzb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--paper);
	color: var(--ink);
	font-weight: 700;
	border-radius: var(--r-ctl);
}

.rzb-skip-link:focus,
.rzb-skip-link:focus-visible {
	left: 12px;
	top: 12px;
	outline: 3px solid var(--buz);
	outline-offset: 2px;
}

/* 3b. Header */
.rzb-head {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(11, 15, 4, .93);
	backdrop-filter: blur(9px);
	border-bottom: 1px solid var(--rule);
}

.rzb-head__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 11px 20px;
	min-height: 62px;
}

.rzb-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	flex: 0 0 auto;
}

.rzb-brand:hover,
.rzb-brand:focus-visible {
	text-decoration: none;
}

.rzb-mark {
	display: block;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}

.rzb-wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

/* THE WORDMARK IS SET IN THE DISPLAY FACE, and that is a decision rather than a default.

   The donor scoped a FOURTH webfont (a brush script carrying no ə/Ə) to this one selector and
   kept the scope honest with a standing probe gate. Two things were wrong with inheriting it
   here: the css2 request no longer asks for that face, so this rule was resolving to the
   system's «Brush Script MT» — a face nobody chose, on the one string a visitor reads first —
   and a scoped face is only ever as safe as the gate that watches it. Alumni Sans carries the full
   Azerbaijani set, so there is no scope to enforce and no fourth file to download.

   It still needs its own size, weight and colour: the wordmark sits next to the mark at 34px
   and has to hold that lockup without becoming a heading. */
.rzb-wordmark__name {
	font-family: "Alumni Sans", "Arial Narrow", "Segoe UI", Tahoma, sans-serif;
	font-weight: 600;
	font-size: 23px;
	line-height: 1.1;
	letter-spacing: -.012em;
	color: var(--buz);
}

.rzb-wordmark__sub {
	margin-top: 3px;
	font-family: "Reddit Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: .26em;
	color: var(--muted);
}

.rzb-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	flex-wrap: wrap;
}

.rzb-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 8px 11px;
	font-size: 15px;
	color: var(--prose);
	text-decoration: none;
	border-radius: var(--r-ctl);
	border: 1px solid transparent;
}

.rzb-nav a:hover {
	color: var(--paper);
	border-color: var(--rule);
	background: rgba(40, 52, 25, .7);
}

.rzb-head__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap);
	padding: 10px 20px;
	background: var(--buz-grad);
	color: var(--ink);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	text-decoration: none;
	border-radius: var(--r-ctl);
	border: 1px solid var(--buz);
	flex: 0 0 auto;
}

.rzb-head__cta:hover {
	color: var(--ink);
	background: var(--paper);
	text-decoration: none;
}

/* 3c. Trust bar — licence № / 18+ / RG. Figures in mono, labels in the sans. */
.rzb-trust {
	border-bottom: 1px solid var(--rule);
	background: rgba(30, 40, 16, .62);
}

.rzb-trust__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 9px 20px;
	font-size: 13px;
	color: var(--muted);
}

.rzb-trust__seg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.rzb-trust__seg::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--sumuk);
	transform: rotate(45deg);
	flex: 0 0 auto;
}

.rzb-trust__seg--age {
	color: var(--risk);
}

.rzb-trust__seg--age::before {
	background: var(--risk);
}

/* 3d. Footer */
.rzb-foot {
	margin-top: 0;
	background: var(--field-deep);
	border-top: 1px solid var(--rule);
	padding: 46px 20px 34px;
	font-size: 15px;
	color: var(--muted);
}

.rzb-foot__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.rzb-foot h2,
.rzb-foot h3 {
	font-size: 14px;
	font-family: "Rethink Sans", "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--paper);
	margin: 0 0 12px;
}

.rzb-foot a {
	color: var(--prose);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rzb-foot a:hover {
	color: var(--paper);
}

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

.rzb-foot li + li {
	margin-top: 9px;
}

.rzb-foot__legal {
	max-width: 1140px;
	margin: 30px auto 0;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
	font-size: 12.5px;
	line-height: 1.72;
	color: var(--dim);
}

.rzb-pay {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rzb-pay li {
	margin: 0;
	padding: 7px 12px;
	border: 1px solid var(--rule);
	border-radius: var(--r-ctl);
	background: rgba(30, 40, 16, .8);
	font-size: 13px;
	color: var(--prose);
	letter-spacing: .02em;
}

.rzb-updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--dim);
}

.rzb-updated time {
	font-family: "Reddit Mono", ui-monospace, monospace;
	color: var(--muted);
}

/* 3e. Sticky mobile CTA.
   The anchor carries its OWN class. On two earlier builds chrome.php emitted a
   bare <a> inside the sticky wrapper, so every rule that painted it was a
   descendant selector — and a probe measuring `.<prefix>-sticky__link` reported
   a clean PASS on an element that did not exist. Both the markup and the gate
   name this class now. */
.rzb-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: none;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(11, 15, 4, .96);
	border-top: 1px solid var(--rule);
	backdrop-filter: blur(8px);
}

.rzb-sticky__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--tap);
	padding: 13px 18px;
	background: var(--buz-grad);
	color: var(--ink);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .02em;
	text-decoration: none;
	border: 1px solid var(--buz);
	border-radius: var(--r-ctl);
}

.rzb-sticky__link:hover,
.rzb-sticky__link:active {
	color: var(--ink);
	background: var(--paper);
	text-decoration: none;
}

.rzb-sticky__note {
	display: block;
	margin-top: 6px;
	text-align: center;
	font-size: 11.5px;
	color: var(--dim);
}

/* 3f. Age gate + cookie banner */
.rzb-gate {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
	background: rgba(21, 28, 7, .93);
}

.rzb-agegate__card {
	max-width: 460px;
	width: 100%;
	background: var(--plate-raised-grad);
	border: 1px solid var(--rule-lit);
	border-radius: var(--r-plate);
	padding: 30px 26px 26px;
	position: relative;
	text-align: center;
}

.rzb-gate__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	border: 2px solid var(--risk);
	/* Editorial square, like every other corner on this build. A round badge here
	   was the donor's geometry and would have been the one circle on the site. */
	border-radius: var(--r-ctl);
	font-family: "Reddit Mono", ui-monospace, monospace;
	font-size: 19px;
	font-weight: 700;
	color: var(--risk);
}

.rzb-gate__title {
	font-family: "Alumni Sans", "Arial Narrow", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: var(--paper);
	margin: 0 0 10px;
}

.rzb-gate__text {
	font-size: 15px;
	color: var(--prose);
	margin: 0 0 20px;
}

.rzb-gate__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.rzb-cookie {
	position: fixed;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 150;
	max-width: 640px;
	margin: 0 auto;
	padding: 18px 20px;
	background: var(--plate-raised-grad);
	border: 1px solid var(--rule-lit);
	border-radius: var(--r-plate);
	box-shadow: 0 16px 44px rgba(21, 28, 7, .74);
	font-size: 14px;
	color: var(--prose);
}

.rzb-cookie__row {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 14px;
}

/* ---- 4. Sections -------------------------------------------------------- */
/* 4a. Hero */
.rzb-hero {
	padding-block: clamp(38px, 6vw, 74px) clamp(30px, 4.4vw, 54px);
}

.rzb-hero h1 {
	margin: 0 0 16px;
	/* 18ch broke «Royale Casino Kazino AZ» so that «AZ» sat alone on line two at 1440 —
	   a two-word line with one word on it is a widow, and on the one heading the whole
	   EMD exists for. 22ch holds it as two balanced lines at every width above 900px. */
	max-width: 22ch;
	text-wrap: balance;
}

.rzb-hero__lede {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.6;
	color: var(--paper);
	max-width: 60ch;
	margin: 0 0 24px;
}

.rzb-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 26px;
}

.rzb-hero__facts {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
	overflow: hidden;
}

.rzb-fact {
	background: var(--plate);
	padding: 16px 18px;
}

.rzb-fact__val {
	display: block;
	font-size: clamp(20px, 2.6vw, 26px);
	line-height: 1.14;
	margin-bottom: 5px;
}

.rzb-fact__key {
	display: block;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.45;
}

/* 4b. Numbered table of contents — the spine of a one-pager. */
.rzb-toc {
	margin: 0;
}

.rzb-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
	counter-reset: kzntoc;
}

.rzb-toc__list li {
	margin: 0;
}

.rzb-toc__list a {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-height: var(--tap);
	padding: 11px 14px;
	border: 1px solid var(--rule-ctl);
	border-radius: var(--r-ctl);
	background: rgba(30, 40, 16, .55);
	color: var(--prose);
	text-decoration: none;
	font-size: 15.5px;
	line-height: 1.4;
}

.rzb-toc__list a:hover {
	border-color: var(--sumuk);
	background: var(--plate-raised);
	color: var(--paper);
	text-decoration: none;
}

.rzb-toc__num {
	font-size: 13px;
	/* the DECOR metal is 4.05:1 and this is TEXT — the accent proper is 6.5:1 */
	color: var(--buz);
	flex: 0 0 auto;
	min-width: 2ch;
}

/* 4c. Quick-nav cards */
/* 14px: nothing overhangs this gutter — a background layer cannot paint outside its own box. */
.rzb-quick {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.rzb-quick__card {
	position: relative;
	display: block;
	padding: 26px 20px 26px;
	background: var(--plate-grad);
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
	color: var(--prose);
	text-decoration: none;
}

.rzb-quick__card:hover {
	border-color: var(--sumuk);
	text-decoration: none;
}

.rzb-quick__title {
	display: block;
	font-family: "Alumni Sans", "Arial Narrow", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--paper);
	margin-bottom: 7px;
}

.rzb-quick__text {
	display: block;
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.55;
}

/* 4d. Bonus offer */
.rzb-offer {
	display: grid;
	gap: 22px;
	align-items: start;
}

.rzb-offer__amount {
	display: block;
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.06;
	margin-bottom: 8px;
}

.rzb-offer__cap {
	display: block;
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 18px;
}

.rzb-offer__terms {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 9px;
}

.rzb-offer__terms li {
	position: relative;
	padding-left: 20px;
	font-size: 15.5px;
	line-height: 1.6;
	margin: 0;
}

.rzb-offer__terms li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 1px;
	background: var(--sumuk);
}

/* 4e. Buttons (hand-rolled, for markup outside core/button) */
.rzb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: var(--tap);
	padding: 14px 28px;
	background: var(--buz-grad);
	color: var(--ink);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .025em;
	text-decoration: none;
	border: 1px solid var(--buz);
	border-radius: var(--r-ctl);
	cursor: pointer;
}

.rzb-btn:hover {
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
}

.rzb-btn--ghost {
	background: transparent;
	color: var(--buz);
	border-color: var(--rule-ctl);
}

.rzb-btn--ghost:hover {
	background: rgba(40, 52, 25, .8);
	color: var(--paper);
	border-color: var(--sumuk);
}

.rzb-btn--small {
	min-height: var(--tap);
	padding: 10px 18px;
	font-size: 14.5px;
}

/* 4f. Chips */
.rzb-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: var(--r-ctl);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	border: 1px solid var(--rule);
	background: var(--plate-raised);
	color: var(--prose);
}

.rzb-chip--aktiv {
	background: var(--aktiv);
	border-color: var(--aktiv-lit);
	color: var(--paper);
}

.rzb-chip--risk {
	background: var(--risk-deep);
	border-color: var(--risk);
	color: var(--paper);
}

.rzb-chip--buz {
	background: var(--buz-deep);
	border-color: var(--sumuk);
	color: var(--paper);
}

/* 4g. Steps ladder */
.rzb-steps {
	list-style: none;
	counter-reset: kznstep;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.rzb-steps li {
	position: relative;
	margin: 0;
	padding: 18px 20px 18px 62px;
	background: var(--plate-grad);
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
}

.rzb-steps li::before {
	counter-increment: kznstep;
	content: counter(kznstep, decimal-leading-zero);
	position: absolute;
	left: 20px;
	top: 17px;
	font-family: "Reddit Mono", ui-monospace, monospace;
	font-size: 15px;
	font-weight: 700;
	color: var(--buz);
}

.rzb-step__title {
	display: block;
	font-weight: 700;
	color: var(--paper);
	margin-bottom: 5px;
	font-size: 16.5px;
}

/* inc/schema.php reads .rzb-step__title + .rzb-step__text to build the HowTo nodes, so
   these two class names are a CONTRACT between the markup and the schema layer, not a
   styling choice. Renaming either silently empties the HowTo graph while every other
   node still ships and every block gate still passes. */
.rzb-step__text {
	display: block;
	color: var(--prose);
	font-size: 15.5px;
	line-height: 1.62;
}

/* 4h. Fact / feature grid */
/* 14px: nothing overhangs this gutter — a background layer cannot paint outside its own box. */
.rzb-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}

.rzb-card {
	position: relative;
	padding: 26px 20px 26px;
	background: var(--plate-grad);
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
}

.rzb-card h3 {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--paper);
}

.rzb-card p {
	font-size: 15px;
	color: var(--muted);
	margin: 0;
}

/* 4i. Game tiles */
/* 14px: nothing overhangs this gutter — a background layer cannot paint outside its own box. */
.rzb-games {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.rzb-game {
	position: relative;
	padding: 22px 18px 22px;
	background: var(--plate-grad);
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
}

.rzb-game__name {
	display: block;
	font-family: "Alumni Sans", "Arial Narrow", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--paper);
	margin-bottom: 6px;
}

.rzb-game__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 13px;
	color: var(--muted);
}

.rzb-game__meta b {
	font-family: "Reddit Mono", ui-monospace, monospace;
	font-weight: 700;
	color: var(--figure);
}

/* RTP meter: a figure AND a bar, so the number is scannable at a glance. */
.rzb-meter {
	margin-top: 12px;
}

.rzb-meter__bar {
	height: 5px;
	background: var(--plate-raised);
	border: 1px solid var(--rule);
	border-radius: 1px;
	overflow: hidden;
}

.rzb-meter__fill {
	display: block;
	height: 100%;
	background: var(--sumuk);
}

.rzb-meter__val {
	font-size: 13px;
}

/* 4j. Notes / callouts */
.rzb-note {
	position: relative;
	padding: 18px 20px 18px 20px;
	border: 1px solid var(--rule);
	border-left: 3px solid var(--sumuk);
	border-radius: var(--r-ctl);
	background: rgba(30, 40, 16, .74);
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--prose);
}

.rzb-note--warn {
	border-left-color: var(--risk);
	background: rgba(58, 28, 11, .5);
}

.rzb-note--rg {
	border-left-color: var(--risk);
	background: var(--risk-deep);
	color: var(--paper);
}

.rzb-note strong {
	color: var(--paper);
}

/* A link inside a FILLED note cannot wear the accent. The accent is text-safe on the
   four dark grounds (5.6-6.5:1) and NOT on --risk-deep (3.8:1) or --aktiv (3.4:1), and a
   token whose text-safety depends on which panel it lands on is exactly the defect the
   contrast contract at the top of this file warns about. On a filled note the link takes
   --paper (10.0:1 on amber-deep) and keeps its affordance from the underline instead of
   from hue — which is the more accessible signal anyway. */
.rzb-note--rg a,
.rzb-note--warn a {
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.rzb-note--rg a:hover,
.rzb-note--warn a:hover {
	text-decoration-thickness: 2px;
}

/* 4k. Tables — dark, scrollable, and never below 15px */
.rzb-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
	background: var(--plate);
}

.rzb-tablewrap table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.rzb-tablewrap th,
.rzb-tablewrap td,
.wp-block-table th,
.wp-block-table td {
	padding: 12px 15px;
	text-align: start;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
	line-height: 1.55;
}

/* A <caption> is the one table part this theme had no rule for, so it rendered centred in
   the browser's default and read as a stray line above the head row. It is a LABEL: start-
   aligned like every other cell, muted like a kicker, and separated from the head by the same
   hairline the rows use. */
.rzb-tablewrap caption {
	text-align: start;
	color: var(--muted);
	font-size: 13.5px;
	letter-spacing: .02em;
	padding: 12px 15px;
	border-bottom: 1px solid var(--rule);
}

.rzb-tablewrap thead th,
.wp-block-table thead th {
	background: var(--plate-raised);
	color: var(--paper);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .04em;
	white-space: nowrap;
}

.rzb-tablewrap tbody tr:last-child td,
.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	background: var(--plate);
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
}

.rzb-tablewrap td b,
.wp-block-table td b {
	color: var(--paper);
}

/* 4l. FAQ — native <details>, so the answers are in the HTML for crawlers. */
.rzb-faq {
	display: grid;
	gap: 10px;
}

.rzb-faq details {
	background: var(--plate-grad);
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
	overflow: hidden;
}

.rzb-faq summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--tap);
	padding: 15px 18px;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: 16.5px;
	color: var(--paper);
	line-height: 1.45;
}

.rzb-faq summary::-webkit-details-marker {
	display: none;
}

.rzb-faq summary::after {
	content: "";
	margin-left: auto;
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-right: 2px solid var(--sumuk);
	border-bottom: 2px solid var(--sumuk);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s var(--ease);
}

.rzb-faq details[open] summary::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.rzb-faq summary:hover {
	background: rgba(40, 52, 25, .6);
}

.rzb-faq__answer {
	padding: 0 18px 17px;
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--prose);
}

.rzb-faq__answer p {
	margin-bottom: .8em;
}

/* 4m. Payments rail in content */
.rzb-payrail {
	display: grid;
	gap: 10px;
	/* 130px, not 160px: with FIVE rails a 160px minimum lays out 4 + 1 in a ~700px
	   column and «Visa / Mastercard» sits alone on a second row, reading as an
	   afterthought instead of one of five equals. The 41st build recorded the same
	   `auto-fit` stranding on a four-cell grid. Stated as a MINIMUM rather than a
	   fixed count so 360px still gets one rail per row. */
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.rzb-payrail li {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--rule);
	border-radius: var(--r-ctl);
	background: var(--plate);
}

.rzb-payrail__name {
	display: block;
	font-weight: 700;
	color: var(--paper);
	margin-bottom: 4px;
	font-size: 15.5px;
}

.rzb-payrail__meta {
	display: block;
	font-size: 13px;
	color: var(--muted);
}

/* 4n. App / download block */
.rzb-app {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.rzb-app__spec {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--muted);
}

.rzb-app__spec b {
	font-family: "Reddit Mono", ui-monospace, monospace;
	color: var(--figure);
	font-weight: 700;
}

/* 4o. Compare strip */
.rzb-compare {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* 4p. Breadcrumbs (interior pages only — the one-pager uses the anchor TOC) */
.rzb-crumbs {
	font-size: 13.5px;
	color: var(--dim);
	padding: 16px 0 0;
}

.rzb-crumbs a {
	color: var(--muted);
	text-decoration: none;
}

.rzb-crumbs a:hover {
	color: var(--paper);
	text-decoration: underline;
}

.rzb-crumbs span[aria-current] {
	color: var(--prose);
}

/* 4q. Back-to-contents link, repeated down a long document */
.rzb-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: var(--tap);
	margin-top: 18px;
	font-size: 13.5px;
	color: var(--muted);
	text-decoration: none;
}

.rzb-back:hover {
	color: var(--paper);
	text-decoration: underline;
}

/* 4r. Per-page last-updated line, appended by inc/chrome.php */
.rzb-lastmod {
	margin-top: 34px;
	padding-top: 16px;
	border-top: 1px solid var(--rule);
	font-size: 13px;
	color: var(--dim);
}

.rzb-lastmod time {
	font-family: "Reddit Mono", ui-monospace, monospace;
	color: var(--muted);
}

/* 4s. Skeleton loading for the heaviest blocks */
.rzb-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--plate-raised);
	border-radius: var(--r-plate);
	min-height: 90px;
}

.rzb-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(96deg, transparent 12%, rgba(95, 211, 230, .1) 48%, transparent 84%);
	transform: translateX(-100%);
	animation: rzb-shimmer 1.5s infinite;
}

@keyframes rzb-shimmer {
	100% {
		transform: translateX(100%);
	}
}

/* ---- 5. State matrix ---------------------------------------------------- */
a,
button,
summary,
.rzb-btn,
.rzb-quick__card,
.rzb-toc__list a {
	transition: color .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease);
}

a:active,
.rzb-btn:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

/* Focus. A two-tone ring so it is visible on the buz fills AND on the field:
   the dark inner line survives on light plates, the buz outer line on dark. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--buz);
	outline-offset: 2px;
	border-radius: var(--r-ctl);
}

.rzb-btn:focus-visible,
.rzb-head__cta:focus-visible,
.rzb-sticky__link:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--paper);
	outline-offset: 3px;
	box-shadow: 0 0 0 1px var(--ink) inset;
}

button[disabled],
.rzb-btn[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	filter: grayscale(.4);
}

/* ---- 6. Accessibility + responsive ------------------------------------- */
/* 6a. Nothing below 15px in prose. 12.5px is reserved for legal lines only. */
.rzb-main p,
.rzb-main li {
	font-size: max(15px, 1em);
}

/* 6b. Tap targets: 44px on EVERY pointer, not only under 600px. */
.rzb-nav a,
.rzb-toc__list a,
.rzb-btn,
.rzb-head__cta,
.rzb-sticky__link,
.rzb-faq summary,
.rzb-back {
	min-height: var(--tap);
}

/* 6c. Inline links inside a sentence are exempt from WCAG 2.5.8 — they are sized
   by the text around them and must not be padded into a block. */
.rzb-main p a,
.rzb-foot__legal a,
.rzb-faq__answer a {
	min-height: 0;
}

/* 6d. 1024 and below */
@media (max-width: 1023px) {
	.rzb-head__inner {
		flex-wrap: wrap;
		gap: 10px;
	}

	.rzb-nav {
		order: 3;
		width: 100%;
		margin-left: 0;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 2px;
	}

	.rzb-nav a {
		white-space: nowrap;
	}
}

/* 6e. 768 and below — the sticky CTA appears, the header CTA folds away */
@media (max-width: 767px) {
	.rzb-sticky {
		display: block;
	}

	body {
		padding-bottom: 92px;
	}

	.rzb-head__cta {
		display: none;
	}

	:root {
		/* The number that has to move with the viewport is the SLOT. At 360px a plate is only
		   ~328px across, so a 42px slot starting 34px in eats a fifth of the edge and the
		   inserted syllable stops reading as an insertion and starts reading as a break. A
		   narrower slot closer to the corner keeps the same sentence at a phone's proportions,
		   and the segment narrows with it so the clearance stays equal on both sides. */
		--tir-tick: 6px;
	}

	.rzb-sec {
		padding-block: 40px;
	}

	.rzb-plate {
		padding: 30px 17px 20px;
	}

	.rzb-hero h1 {
		max-width: none;
	}
}

/* 6f. 360 — the narrowest supported width */
@media (max-width: 400px) {
	.rzb-head__inner {
		padding-inline: 15px;
	}

	.rzb-wordmark__name {
		font-size: 19px;
	}

	.rzb-steps li {
		padding: 16px 16px 16px 54px;
	}

	.rzb-steps li::before {
		left: 16px;
	}

	.rzb-quick,
	.rzb-grid,
	.rzb-games,
	.rzb-toc__list {
		grid-template-columns: 1fr;
	}
}

/* 6g. Reduced motion — finish the job, including the smooth scroll and shimmer */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.rzb-skeleton::after {
		display: none;
	}

	a:active,
	.rzb-btn:active {
		transform: none;
	}
}

/* 6h. Forced colours / high contrast safety net */
@media (forced-colors: active) {
	.rzb-plate,
	.rzb-card,
	.rzb-quick__card,
	.rzb-game,
	.rzb-steps li,
	.rzb-faq details {
		border: 1px solid CanvasText;
	}

	.rzb-btn,
	.rzb-head__cta,
	.rzb-sticky__link {
		border: 2px solid ButtonText;
		background: ButtonFace;
		color: ButtonText;
		forced-color-adjust: none;
	}

	.rzb-plate::before,
	.rzb-plate::after,
	.rzb-card::before,
	.rzb-quick__card::before,
	.rzb-game::before {
		background: CanvasText;
		border-color: CanvasText;
	}
}

/* ---- 7. Core block harmonisation --------------------------------------- */
.wp-block-button__link {
	border-radius: var(--r-ctl);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--rule);
	opacity: 1;
	max-width: 100%;
}

.wp-block-image img {
	border-radius: var(--r-plate);
	height: auto;
	max-width: 100%;
}

.wp-block-list {
	padding-left: 1.15em;
}

.wp-block-list li {
	margin-bottom: .5em;
	line-height: 1.68;
}

.wp-block-quote {
	border-left: 3px solid var(--sumuk);
	padding-left: 18px;
	margin-left: 0;
	font-style: normal;
	color: var(--paper);
}

.wp-block-group.has-background {
	border-radius: var(--r-plate);
}

/* The editor canvas inherits the same ground so the plate signature is visible
   while writing, not only on the front end. */
.editor-styles-wrapper {
	background: var(--field);
	color: var(--prose);
}

/* ---- 8. Brand-layer devices (inc/brand.php) ----------------------------
   Every class emitted by a shortcode in inc/brand.php is styled here. A class that
   exists only in PHP and nowhere in this file ships an unstyled block that passes
   every markup gate — that is the «phantom class» failure recorded on royalspin.az,
   so the two lists are kept in step deliberately. */
.rzb-sig {
	display: grid;
	gap: 12px;
}

.rzb-sig__text {
	font-size: 13px;
	line-height: 1.65;
	color: var(--dim);
	margin: 0;
	max-width: 62ch;
}

.rzb-light {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
}

/* The citable passage */
.rzb-pull {
	margin: 0;
}

.rzb-pull__body {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.6;
	color: var(--paper);
	max-width: 66ch;
}

.rzb-pull__body p:last-child {
	margin-bottom: 0;
}

/* Wager-arithmetic device */
.rzb-anatomy {
	margin: 0;
}

.rzb-anatomy__rows {
	list-style: none;
	counter-reset: none;
	margin: 4px 0 14px;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: var(--r-ctl);
	overflow: hidden;
}

.rzb-anatomy__rows li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 11px 14px;
	background: var(--plate);
	font-size: 15.5px;
}

.rzb-anatomy__rows li:last-child {
	background: var(--buz-deep);
}

.rzb-anatomy__key {
	color: var(--prose);
}

.rzb-anatomy__rows li:last-child .rzb-anatomy__key {
	color: var(--paper);
	font-weight: 700;
}

.rzb-anatomy__note,
.rzb-mock__note {
	font-size: 14px;
	line-height: 1.62;
	color: var(--muted);
	margin: 0;
	max-width: 64ch;
}

/* Inert pictures of the operator's own controls */
.rzb-mock {
	margin: 0;
}

.rzb-mock__box {
	display: grid;
	gap: 9px;
	margin: 6px 0 14px;
	padding: 16px;
	background: var(--field-deep);
	border: 1px dashed var(--rule-lit);
	border-radius: var(--r-ctl);
}

.rzb-mock__field {
	display: block;
	padding: 12px 13px;
	border: 1px solid var(--rule);
	border-radius: var(--r-ctl);
	background: var(--plate);
	color: var(--dim);
	font-size: 14.5px;
}

.rzb-mock__field--code {
	font-family: "Reddit Mono", ui-monospace, monospace;
	letter-spacing: .3em;
	color: var(--muted);
}

.rzb-mock__btn {
	display: block;
	padding: 12px 13px;
	text-align: center;
	border-radius: var(--r-ctl);
	/* a fill that carries --ink must clear 4.5:1 ON ITS OWN */
	background: var(--buz);
	color: var(--ink);
	font-weight: 700;
	font-size: 14.5px;
}

/* ---- 9. Nav, header CTA variant, footer structure ----------------------
   These class names are emitted by inc/chrome.php and parts/*.html. Same rule as §8:
   nothing may exist in markup that has no rule here. */
.rzb-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.rzb-nav__list li {
	margin: 0;
}

.rzb-nav__mobile {
	display: none;
}

.rzb-nav__mobile summary {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: var(--tap);
	padding: 9px 14px;
	list-style: none;
	cursor: pointer;
	border: 1px solid var(--rule-ctl);
	border-radius: var(--r-ctl);
	background: var(--plate-raised);
	color: var(--paper);
	font-size: 15px;
	font-weight: 700;
}

.rzb-nav__mobile summary::-webkit-details-marker {
	display: none;
}

.rzb-nav__bars {
	display: block;
	width: 15px;
	height: 2px;
	background: var(--buz);
	box-shadow: 0 5px 0 var(--buz), 0 -5px 0 var(--buz);
}

.rzb-nav__panel {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
	border: 1px solid var(--rule);
	border-radius: var(--r-plate);
	background: var(--plate);
	padding: 8px;
}

.rzb-nav__panel li {
	margin: 0;
}

.rzb-nav__panel a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	padding: 10px 12px;
	border-radius: var(--r-ctl);
	color: var(--prose);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
}

.rzb-nav__panel a:hover,
.rzb-nav__panel a[aria-current] {
	background: var(--plate-raised);
	color: var(--paper);
}

.rzb-nav a[aria-current],
.rzb-nav__list a[aria-current] {
	color: var(--paper);
	border-color: var(--rule);
	background: rgba(40, 52, 25, .7);
}

/* The non-money header control on the three service pages: an outline, so the one page
   whose job is NOT to sell never carries a filled money button. */
.rzb-head__cta--quiet {
	background: transparent;
	background-image: none;
	color: var(--buz);
	border-color: var(--rule-lit);
}

.rzb-head__cta--quiet:hover {
	background: rgba(40, 52, 25, .85);
	background-image: none;
	color: var(--paper);
	border-color: var(--sumuk);
}

.rzb-langtag {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border: 1px solid var(--rule);
	border-radius: var(--r-ctl);
	font-family: "Reddit Mono", ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--muted);
}

.rzb-trust__seg--rg {
	color: var(--buz);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rzb-trust__seg--rg:hover {
	color: var(--paper);
}

.rzb-foot__brand h2,
.rzb-foot__col h2 {
	font-size: 13px;
}

.rzb-foot__brand p {
	font-size: 14.5px;
	line-height: 1.66;
	color: var(--muted);
	max-width: 46ch;
}

.rzb-foot__brand .rzb-updated {
	margin-top: 12px;
}

.rzb-foot__legal p + p {
	margin-top: 10px;
}

.rzb-foot__legal b {
	color: var(--muted);
}

.rzb-sig {
	max-width: 1140px;
	margin: 26px auto 0;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
}

@media (max-width: 1023px) {
	.rzb-nav__list {
		display: none;
	}

	.rzb-nav__mobile {
		display: block;
	}

	.rzb-nav {
		order: 3;
		width: 100%;
		overflow: visible;
	}
}


/* ---- 10. Repairs from probe_rgb.js run 1 --------------------------------
   Four standalone controls sat under the 44px target the brief sets. None of them is a
   link inline in a sentence, so the WCAG 2.5.8 inline exemption does not cover them:
   the header lockup and the trust-bar RG link are the two controls a phone user reaches
   for first, and the footer/breadcrumb lists are pure navigation. */
.rzb-brand {
	min-height: var(--tap);
}

.rzb-trust__seg--rg {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

.rzb-foot__col li a,
.rzb-foot__brand a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

.rzb-crumbs a,
.rzb-crumbs span[aria-current] {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

/* The cookie banner's ACCEPT control. The reskin moved the filled treatment onto the
   DECLINE button on purpose — this banner defaults to declining non-essential storage —
   which left this class with no rule at all and shipped an unstyled button. It is stated
   here explicitly rather than deleted, so the next fork reads the intent instead of
   "restoring" a filled accept button. */
.rzb-cookie__row .rzb-cookie__ok {
	background: transparent;
	background-image: none;
	color: var(--prose);
	border-color: var(--rule-ctl);
}

.rzb-cookie__row .rzb-cookie__ok:hover {
	border-color: var(--sumuk);
	color: var(--paper);
}

/* ---- 11. Repairs from probe_rgb.js run 2 --------------------------------
   The mobile nav panel overflowed the viewport by 24px at 360, on every page, and only
   there. `.rzb-nav` is a flex row, so its `<details>` child sizes to MAX-CONTENT — and
   the panel's longest item («Bonus — 550 AZN + 250 fırlanma və dövriyyə şərti») is wider
   than a 360px phone. A flex item's default `min-width: auto` refuses to shrink below its
   content, so `width: 100%` on the ancestor did not bind: the floor has to be removed
   explicitly. Same shape as the recorded «a display reset without min-width keeps the
   560px floor» defect, one layer further in. */
.rzb-nav {
	min-width: 0;
}

.rzb-nav__mobile {
	min-width: 0;
	max-width: 100%;
}

.rzb-nav__panel {
	box-sizing: border-box;
	max-width: 100%;
	/* The real floor was HERE, not on the <details>: the panel is a grid, an auto column
	   is minmax(min-content, auto), and a grid item's own min-width:auto refuses to go
	   below min-content — so «Bonus — 550 AZN + 250 fırlanma və dövriyyə şərti» set the
	   column to 360px inside a 330px panel. Constraining the ancestors could never bind;
	   the track and the item both have to be allowed to shrink. It is invisible until the
	   menu is OPENED (a closed <details> clips it, and document.scrollWidth stays 360),
	   which is why only a per-element measurement found it. */
	grid-template-columns: minmax(0, 1fr);
}

.rzb-nav__panel li {
	min-width: 0;
}

.rzb-nav__panel a {
	overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
	.rzb-nav__mobile {
		width: 100%;
	}
}

/* The offer plate is a grid, so its two CTAs stretched to the full plate width and the
   money button read as a banner rather than as a control. Sized to content instead, and
   laid on one row where there is room for two. */
.rzb-offer .rzb-btn {
	justify-self: start;
}

@media (min-width: 640px) {
	.rzb-offer {
		grid-template-columns: 1fr;
	}

	.rzb-offer .rzb-btn + .rzb-btn {
		margin-top: -8px;
	}
}

/* ---- 12. Repairs the SCREENSHOT found (nothing measurable was wrong) -----
   The hero's three stacked components are raw HTML inside one wp:html block, so
   WordPress's blockGap never applies between them: the quick-nav grid sat flush against
   the facts strip and each card's column rule was drawn ON the strip's bottom border.
   Every gate passed — a probe measures elements, not the space between them.

   And the quick-nav grid STRANDED ITS FOURTH CARD: auto-fit with a 210px floor resolves
   to three columns in a 700px content well, so «Yüklə» sat alone on a second row under
   three siblings. (Same shape as the recorded auto-fit orphan on royale-vip.org.) Two
   balanced rows of two beat three-plus-one at every width this column ever has. */
.rzb-hero__facts {
	margin-bottom: 26px;
}

.rzb-quick {
	margin-top: 0;
}

@media (min-width: 560px) {
	.rzb-quick {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.rzb-quick {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---- 13. Repairs from probe_rya.js run 1 --------------------------------

   ONE finding, at 768/1024/1440: the only link inside a data cell on this site —
   «Addımlar APK bölməsində», in the platform table — measured 96x42.

   WCAG 2.5.8 exempts a target that sits INSIDE A SENTENCE, and the probe implements that
   as «the parent holds at least 12 more characters than the link does». This cell holds
   nine more. That is a fragment rather than a sentence, so the exemption is arguable and
   the gate is right to ask: the cheaper answer is to give the link the tap height rather
   than to widen the probe's exemption until the finding disappears. One row of one table
   grows by 8px; the site's only in-table link becomes thumb-sized on a phone. */
.rzb-tablewrap td a {
	display: inline-block;
	min-height: var(--tap);
	padding-block: 11px;
	box-sizing: border-box;
}

/* ---- 14. The card row: the same drawing, smaller and quieter -------------

   The 69th build shipped sixteen cards wearing the PREVIOUS identity's device, because its
   probe only asserted `.rzb-plate`. So every component that has a ground gets the device, and
   this section sets only the three things that legitimately differ on a card:

     * PITCH — a card is roughly a third of a plate's width, and the plate's 14px pitch drawn
       across a 96px card leaves seven ticks that read as a hatch rather than as a rhythm. The
       card takes a 10px pitch on a 6px tick. The composite is declared on this selector too,
       so it resolves per element and there is no second geometry to keep in step.
     * SKIP — the gap moves to the third tooth, because at a card's width the plate's fourth
       tooth falls under the title's first line, where an absence cannot be read as one.
     * VOLUME — the halo is OUT on an idle card (the ticks wear the card's own rule colour) and
       lights on hover. A card is a link; the gap lighting up is the affordance, and the
       silhouette is identical in every state, which is the 69th's other lesson.

   WHY THE TOP EDGE. The row hangs from the top edge, which on a card is the one band the
   content grid never occupies: the title starts below it and the meta line ends above the
   padding. That is the whole reason this row could keep the card grids at 14px — the 75th's
   thread crossed the middle of the box and had to buy its own space at every copy length,
   while a row along the top edge is drawn where there was never a sentence. The tighter card
   rhythm is a consequence of the drawing, not a decoration applied on top of it. */
.rzb-card,
.rzb-quick__card,
.rzb-game {
	position: relative;
	isolation: isolate;
	/* The card's own scale: the slot closer to the corner and a shorter bracket, so the
	   drawing reads as the same sentence at a smaller size instead of one that ran out of box.
	   Only these numbers differ from the plate — the composite resolves per element, so there
	   is no second geometry to keep in step. */
	--tir-barh: 3px;
	--tir-drop: 5px;
	--tir-tick: 6px;
	--tir-line: var(--rule);
	--tir-bar: var(--rule-lit);
	background: var(--plate-grad);
	background-origin: border-box;
}

.rzb-quick__card:hover,
.rzb-quick__card:focus-visible,
.rzb-game:hover {
	--tir-line: var(--sumuk);
	--tir-bar: var(--buz);
	--tir-barh: 4px;
}

/* The hover ground is a plain `background:` and stays safe: this device does not live in
   the component's own background layers, so no later shorthand can reset it. That is the
   58th's failure mode designed out rather than avoided by discipline. */
.rzb-quick__card:hover {
	background: var(--plate-raised-grad);
	background-origin: border-box;
}