/* =========================================================================
   royale-kazino.com — «Gecə & Qızılgül» design layer
   =========================================================================

   ONE LAYER. Every selector appears once and the last rule for a selector is the
   only rule for it — the 62nd build's trap was a repair written against a rule
   that sat 1200 lines above the one that actually rendered.

   Reading order:
     0. Tokens                     — the palette, mapped once from theme.json
     1. Base canvas + typography   — prose rhythm, figures, links
     2. The signature: BORU-ARTIMI — the overrunning tubes, defined once and reused
     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

   CONTRAST CONTRACT (measured for THIS palette by palette_rcb.py, not inherited — >= 4.5:1):
     on --field / --field-deep / --plate / --plate-raised
                                           : paper 17.5/18.3/16.0/14.4, figure 15.1/15.8/13.8/12.5,
                                             prose 14.3/15.0/13.0/11.8, muted 9.4/9.9/8.6/7.8,
                                             xeber 7.1/7.4/6.5/5.8, dim 7.0/7.3/6.4/5.8,
                                             gül 6.7/7.0/6.1/5.5
     on --live fill (AKTİV pine)           : paper 11.6, figure 10.0, prose 9.5, muted 6.3,
                                             xeber 4.7, dim 4.6
     on --gul-deep fill (deep sapphire)  : paper 13.5, figure 11.7, prose 11.0, muted 7.3,
                                             xeber 5.4, dim 5.4
     on --amber-deep fill (18+/RG note)    : paper 13.2, figure 11.4, prose 10.8, muted 7.1,
                                             xeber 5.3, dim 5.3 (a link inside a filled note
                                             still takes --paper + underline)

   The ACCENT is the NARROWEST margin in the table (6.7:1 on the field, 5.5:1 on the lightest
   plate and 4.9:1 on --plate-top) — the inverse of the donor's, and it is a property of the
   hue, not of the choice: a true blue at h236 carries only 7% of the luminance formula in its
   dominant channel, so a sapphire that still reads as a sapphire is dimmer than any green or
   cyan at the same lightness. It clears AA everywhere it is used and it has no headroom to
   spare, which is why --gul is never set on --plate-top-filled panels and why the probe
   measures it rather than trusting it.
     on --gul / --paper / --figure fill  : ink 6.7 / 17.5 / 15.1
     the CTA ramp's DEEPEST stop (#d95fa4) : ink 4.77 — the stop is CHOSEN for this. The
                                             natural h236 s72 l58 deepening (#e05fa8) measures
                                             3.19 and was rejected: a money button is read as
                                             one object and its darkest pixel is where the
                                             label has to survive. The ramp is also written
                                             MINIFIED in inc/chrome.php; both spellings are one
                                             object, change both.

   --mis, --live-lit and --rule-lit are BORDER, GRADIENT-STOP AND DECOR colours.
   --mis is the champagne metal the notch's cut faces are made of and it measures 13.3/14.0/12.2/11.0
   — it would pass every contrast gate there is. A leak into a text node is therefore an
   IDENTITY defect with nothing measurably wrong: bone prose reads as a second accent this
   site does not have. `probe_rpy.js` gates --mis on ROLE (which elements may paint with
   it), not on contrast.
   ========================================================================= */

/* ---- 0. Tokens ---------------------------------------------------------- */
:root {
	--field: #0d0b1c;
	--field-deep: #070612;
	--plate: #16142B;
	--plate-raised: #1e1b39;
	--rule: #3A3563;
	--rule-lit: #615a94;
	--paper: #f7f5fc;
	--prose: #e0dcf1;
	--muted: #b6b0cf;
	--dim: #9c96b8;
	--gul: #ef86bd;
	--mis: #c98a52;
	--gul-deep: #521337;
	/* The two stops the SIGNATURE needs by name. They were the donor's gradient literals
	   and nothing else, so `var(--gul-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. */
	--gul-lit: #f8b3d6;
	--plate-top: #272348;
	--ink: #0d0b1c;
	--figure: #f2d9bd;
	--live: #0f3a33;
	--live-lit: #46c2ad;
	--amber: #eba86a;
	--amber-deep: #41250f;

	--plate-grad: linear-gradient(183deg, #16142B 0%, #0d0b1c 100%);
	--plate-raised-grad: linear-gradient(183deg, #272348 0%, #16142B 100%);
	--gul-grad: linear-gradient(166deg, #f8b3d6 0%, #ef86bd 54%, #d95fa4 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;

	/* BORU-ARTIMI geometry, stated once so the mark, the plate, the card and the
	   section divider are provably the same drawing at three scales.

	   The device does not touch the silhouette at all: the box stays a rounded rectangle
	   and its TOP and BOTTOM edges are redrawn as neon TUBES that run --tube-over past both
	   corners of their own edge. The plate is therefore always narrower than its own two
	   rules — the one thing that reads instantly at any scale, and the one thing no other
	   device on this network does.

	   The overrun is a LENGTH, never a percentage: `inset` resolves a percentage against the
	   containing block rather than against the element, so a percentage overhang would grow
	   with the section instead of staying the same physical stub on every component.

	   Only the PRIMITIVES live here. --sig-tubes (the two bars) is declared on the
	   COMPONENTS instead, in §2, and the reason is the defect the 72nd build shipped and
	   its probe caught:

	     a var() inside another CUSTOM PROPERTY is substituted where that property is
	     DECLARED, and the result inherits as a computed value.

	   So a card that re-declares its own --tube-w would still inherit a --sig-tubes
	   computed at the root's — correct primitives, wrong drawing, and nothing in the CSS
	   looking wrong. Declaring the composite on the components themselves makes it resolve
	   per element, which is what "one geometry, three scales" needs to be true rather than
	   merely intended. */
	--tube-over: 8px;      /* how far each tube runs past its edge, at BOTH ends */
	--tube-w: 3px;         /* the tube's own thickness */
	--tube-rail: 2px;      /* the bottom rail is the thinner of the two */
	--tube-glow: 7px;      /* the halo radius; 0 under prefers-reduced-transparency */
	--tube-lit: var(--gul);
	--tube-metal: var(--mis);

	--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;
	/* Aleo'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 walnut 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(239, 134, 189, .10), transparent 62%),
		radial-gradient(58rem 34rem at 8% 108%, rgba(201, 138, 82, .07), transparent 60%);
}

/* ---- Editorial lead: «Bakı gecəsi» ------------------------------------ */
/* A real, intentionally sparse opening image gives the guide a recognisable face.
   Its wide crop leaves the copy on solid darkness; the image never competes with the
   article's factual content and is not reused below the fold. */
.rkz-editorial-hero {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: clamp(24px, 5vw, 72px);
	align-items: center;
	max-width: 1240px;
	margin: clamp(20px, 4vw, 50px) auto clamp(54px, 8vw, 106px);
	padding: clamp(20px, 3.5vw, 48px);
	background: linear-gradient(118deg, rgba(7, 14, 24, .98), rgba(12, 29, 39, .9));
	border: 1px solid rgba(133, 179, 163, .35);
	border-radius: 2px;
	box-shadow: 0 28px 80px rgba(0, 0, 0, .32);
	overflow: hidden;
}

.rkz-editorial-hero__copy { position: relative; z-index: 1; }

.rkz-editorial-hero__kicker {
	margin: 0 0 17px;
	font-family: "Sono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	color: #9bceba;
}

.rkz-editorial-hero__title {
	margin: 0 0 20px;
	max-width: 11ch;
	font-family: "Aleo", Georgia, serif;
	font-size: clamp(38px, 5vw, 72px);
	font-weight: 800;
	line-height: .98;
	letter-spacing: -.045em;
	color: #f8f5eb;
}

.rkz-editorial-hero__copy > p:not(.rkz-editorial-hero__kicker):not(.rkz-editorial-hero__title) {
	margin-bottom: 26px;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.6;
	color: #d8e2dc;
}

.rkz-editorial-hero__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 11px 0;
	font-weight: 700;
	color: #bde9d4;
	text-decoration-color: rgba(189, 233, 212, .55);
	text-underline-offset: 5px;
}

.rkz-editorial-hero__link span { font-size: 21px; transition: transform .2s var(--ease); }
.rkz-editorial-hero__link:hover span { transform: translateY(4px); }

.rkz-editorial-hero__media {
	position: relative;
	margin: calc(clamp(20px, 3.5vw, 48px) * -1);
	margin-left: 0;
	min-height: 440px;
	align-self: stretch;
	overflow: hidden;
}

.rkz-editorial-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(7, 14, 24, .66), transparent 36%), linear-gradient(0deg, rgba(7, 14, 24, .46), transparent 45%);
}

.rkz-editorial-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% center;
}

.rkz-editorial-hero__media figcaption {
	position: absolute;
	right: 16px;
	bottom: 14px;
	z-index: 1;
	margin: 0;
	font-size: 11px;
	letter-spacing: .08em;
	color: rgba(248, 245, 235, .8);
}

/* The template gives <main> an ID, not a class, so the class rule this replaces had
   never matched anything on any page. */
#rkz-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. */
.rkz-num,
.rkz-fact__val,
.rkz-offer__amount,
.rkz-meter__val,
.rkz-toc__num,
.rkz-steps__num {
	font-family: "Sono", 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. */
.rkz-sec {
	padding-block: clamp(46px, 6vw, 84px);
	scroll-margin-top: 78px;
}

.rkz-sec + .rkz-sec {
	border-top: 1px solid rgba(58, 53, 99, .55);
}

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

.rkz-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. */
.rkz-lede {
	font-size: clamp(18px, 2.1vw, 21px);
	line-height: 1.62;
	color: var(--paper);
	max-width: 68ch;
}

/* ---- 2. THE SIGNATURE: BORU-ARTIMI --------------------------------------- */
/*
   One idea, drawn at three scales:

   1. BORU — the tube. Every plate, card, tile and the age-gate box carries its TOP and
      BOTTOM edges as neon tubes, and every tube runs --tube-over past BOTH corners of its
      edge. The silhouette is untouched and the box is still a rounded rectangle; what the
      eye reads is that the box is NARROWER THAN ITS OWN RULES. Nothing in this network
      exceeds its box — the other twenty-three axes all cut, bite, raise or interrupt one.
   2. The two tubes are two-tone: the top one is QIZILGÜL and lit, the bottom one a thinner
      MİS RAIL. A neon sign has a live tube and a mounting rail, and so does every plate here.
   3. The same pair with the plate removed is the section divider — the tubes seen alone
      rather than a second idea.

   Three mechanics, all load-bearing:

   * A background layer cannot paint outside its own box, so the tubes live on ONE absolutely
     positioned ::before whose box is --tube-over wider than the component on each side. The
     second pseudo-element stays free for §14's hover affordance; the 69th and 70th each lost
     a device to a component that had already spent both.
   * The ::before is `pointer-events: none`. It overhangs the column gap between two cards,
     and a transparent overlay hanging over the neighbour would otherwise swallow the click
     that was aimed at it.
   * The glow is a `filter: drop-shadow`, not a `box-shadow`: the shadow has to follow the
     two BARS, and a box-shadow would halo the pseudo-element's whole transparent rectangle
     instead — a rose fog over the gap between every pair of cards.
*/
/* THE COMPOSITE, declared on every component that wears the device.

   It cannot live on :root: a var() inside a custom property is substituted where that
   property is declared, so a root-level --sig-tubes freezes the root's --tube-w and every
   card inherits the PLATE's geometry no matter what it re-declares. Declared here, each
   element resolves it from its own --tube-* values — which is why §14 can resize the whole
   device for a card by setting two numbers, and why --raised/--quiet/:hover can recolour the
   live tube by setting one. */
.rkz-plate,
.rkz-gate__box,
.rkz-card,
.rkz-quick__card,
.rkz-game,
.rkz-rule {
	--sig-tubes:
		linear-gradient(var(--tube-lit), var(--tube-lit)) 0 0 / 100% var(--tube-w) no-repeat,
		linear-gradient(var(--tube-metal), var(--tube-metal)) 0 100% / 100% var(--tube-rail) no-repeat;
}

.rkz-plate::before,
.rkz-gate__box::before,
.rkz-card::before,
.rkz-quick__card::before,
.rkz-game::before {
	content: "";
	position: absolute;
	inset: -1px calc(var(--tube-over) * -1);
	background: var(--sig-tubes);
	filter: drop-shadow(0 0 var(--tube-glow) var(--tube-lit));
	pointer-events: none;
	z-index: 1;
}

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

/* The raised variant lights the rail as well: both tubes live. A rule that set only
   `background:` would not disturb the device here — the tubes are on the pseudo-element, not
   in this shorthand — which is the whole reason the 58th's failure mode (a later
   `background:` resetting every layer and taking the signature with it) cannot happen on
   this build. */
.rkz-plate--raised {
	background: var(--plate-raised-grad);
	background-origin: border-box;
	border-color: var(--rule-lit);
	--tube-lit: var(--gul-lit);
	--tube-metal: var(--gul);
	--tube-rail: 3px;
}

/* The quiet variant is the SAME pair of tubes UNLIT — the sign that is not switched on.
   A second volume of one drawing, not a second drawing. */
.rkz-plate--quiet {
	--tube-lit: var(--rule-lit);
	--tube-metal: var(--rule);
	--tube-glow: 0px;
}

/* The age gate wears it too: it is the first plate a visitor sees and the one place the
   device has to introduce itself. */
.rkz-gate__box {
	--tube-lit: var(--gul-lit);
}

/* BORU ALONE — the section divider is the two tubes with no plate under them: a lit
   QIZILGÜL bar with the MİS rail's two stubs running past it at each end, at the same
   overrun every plate uses. The divider is the signature's unit, not a rule with a dot. */
.rkz-rule {
	position: relative;
	height: var(--tube-w);
	width: 148px;
	max-width: 100%;
	margin: 6px 0 26px;
	background:
		linear-gradient(var(--tube-lit), var(--tube-lit)) 0 0 / 100% var(--tube-w) no-repeat,
		linear-gradient(var(--tube-metal), var(--tube-metal)) calc(var(--tube-over) * -1) 0 / calc(100% + var(--tube-over) * 2) var(--tube-rail) no-repeat;
	background-origin: border-box;
	filter: drop-shadow(0 0 var(--tube-glow) var(--tube-lit));
}

/* ---- 3. Chrome ---------------------------------------------------------- */
/* 3a. Skip link */
.rkz-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);
}

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

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

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

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

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

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

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

/* THE WORDMARK IS THE ONE PLACE THE NEON SCRIPT PAINTS.

   Yellowtail is a brush script with ZERO network uses and NO ə/Ə. It is scoped to this
   selector alone, whose text is generated from the literal «Royale Casino» — a string with no
   Azerbaijani-specific letter in it — and probe_rkz.js §Y fails the build if any element drawn
   in this face ever contains one. A script face at 21px also needs a size and a colour of its
   own: it draws smaller on the same em than a slab does, and the identity's accent is where
   a neon sign's light actually is. */
.rkz-wordmark__name {
	font-family: "Yellowtail", "Segoe Script", "Brush Script MT", cursive;
	font-weight: 400;
	font-size: 25px;
	line-height: 1.1;
	letter-spacing: .004em;
	color: var(--gul);
}

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

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

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

.rkz-nav a:hover {
	color: var(--paper);
	border-color: var(--rule);
	background: rgba(30, 27, 57, .7);
}

.rkz-head__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap);
	padding: 10px 20px;
	background: var(--gul-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(--gul);
	flex: 0 0 auto;
}

.rkz-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. */
.rkz-trust {
	border-bottom: 1px solid var(--rule);
	background: rgba(22, 20, 43, .62);
}

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

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

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

.rkz-trust__seg--age {
	color: var(--amber);
}

.rkz-trust__seg--age::before {
	background: var(--amber);
}

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

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

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

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

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

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

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

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

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

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

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

.rkz-updated time {
	font-family: "Sono", 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. */
.rkz-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(7, 6, 18, .96);
	border-top: 1px solid var(--rule);
	backdrop-filter: blur(8px);
}

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

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

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

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

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

.rkz-gate__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	border: 2px solid var(--amber);
	/* 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: "Sono", ui-monospace, monospace;
	font-size: 19px;
	font-weight: 700;
	color: var(--amber);
}

.rkz-gate__title {
	font-family: "Aleo", "Rockwell", "Bookman Old Style", Georgia, serif;
	font-weight: 700;
	font-size: 26px;
	color: var(--paper);
	margin: 0 0 10px;
}

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

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

.rkz-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(13, 11, 28, .74);
	font-size: 14px;
	color: var(--prose);
}

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

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

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

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

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

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

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

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

.rkz-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. */
.rkz-toc {
	margin: 0;
}

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

.rkz-toc__list li {
	margin: 0;
}

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

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

.rkz-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(--gul);
	flex: 0 0 auto;
	min-width: 2ch;
}

/* 4c. Quick-nav cards */
/* gap >= 2 x --tube-over + 10px of air: the cards' tubes overhang this gutter. */
.rkz-quick {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

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

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

.rkz-quick__title {
	display: block;
	font-family: "Aleo", "Rockwell", "Bookman Old Style", Georgia, serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--paper);
	margin-bottom: 7px;
}

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

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

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

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

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

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

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

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

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

.rkz-btn--ghost {
	background: transparent;
	color: var(--gul);
	border-color: var(--rule-lit);
}

.rkz-btn--ghost:hover {
	background: rgba(30, 27, 57, .8);
	color: var(--paper);
	border-color: var(--mis);
}

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

/* 4f. Chips */
.rkz-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);
}

.rkz-chip--live {
	background: var(--live);
	border-color: var(--live-lit);
	color: var(--paper);
}

.rkz-chip--amber {
	background: var(--amber-deep);
	border-color: var(--amber);
	color: var(--paper);
}

.rkz-chip--gul {
	background: var(--gul-deep);
	border-color: var(--mis);
	color: var(--paper);
}

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

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

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

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

/* inc/schema.php reads .rkz-step__title + .rkz-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. */
.rkz-step__text {
	display: block;
	color: var(--prose);
	font-size: 15.5px;
	line-height: 1.62;
}

/* 4h. Fact / feature grid */
/* gap >= 2 x --tube-over + 10px of air: the cards' tubes overhang this gutter. */
.rkz-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}

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

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

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

/* 4i. Game tiles */
/* gap >= 2 x --tube-over + 10px of air: the tiles' tubes overhang this gutter. */
.rkz-games {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

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

.rkz-game__name {
	display: block;
	font-family: "Aleo", "Rockwell", "Bookman Old Style", Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--paper);
	margin-bottom: 6px;
}

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

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

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

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

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

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

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

.rkz-note--warn {
	border-left-color: var(--amber);
	background: rgba(65, 37, 15, .5);
}

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

.rkz-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 --amber-deep (3.8:1) or --live (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. */
.rkz-note--rg a,
.rkz-note--warn a {
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

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

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

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

.rkz-tablewrap th,
.rkz-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;
}

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

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

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

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

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

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

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

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

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

.rkz-faq summary:hover {
	background: rgba(30, 27, 57, .6);
}

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

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

/* 4m. Payments rail in content */
.rkz-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;
}

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

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

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

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

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

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

/* 4o. Compare strip */
.rkz-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) */
.rkz-crumbs {
	font-size: 13.5px;
	color: var(--dim);
	padding: 16px 0 0;
}

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

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

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

/* 4q. Back-to-contents link, repeated down a long document */
.rkz-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;
}

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

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

.rkz-lastmod time {
	font-family: "Sono", ui-monospace, monospace;
	color: var(--muted);
}

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

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

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

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

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

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

.rkz-btn:focus-visible,
.rkz-head__cta:focus-visible,
.rkz-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],
.rkz-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. */
.rkz-main p,
.rkz-main li {
	font-size: max(15px, 1em);
}

/* 6b. Tap targets: 44px on EVERY pointer, not only under 600px. */
.rkz-nav a,
.rkz-toc__list a,
.rkz-btn,
.rkz-head__cta,
.rkz-sticky__link,
.rkz-faq summary,
.rkz-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. */
.rkz-main p a,
.rkz-foot__legal a,
.rkz-faq__answer a {
	min-height: 0;
}

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

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

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

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

	body {
		padding-bottom: 92px;
	}

	.rkz-head__cta {
		display: none;
	}

	:root {
		/* The overrun is the one number that cannot scale with the viewport: at 360px the
		   root padding is 17px, so an 8px stub either side still clears the viewport edge —
		   but only just, and the plates are full-width here. 5px keeps the same reading with
		   12px of air to spare, and the glow comes in with it so the halo does not bloom
		   across the whole gutter on a small screen. */
		--tube-over: 5px;
		--tube-glow: 5px;
	}

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

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

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

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

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

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

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

	.rkz-quick,
	.rkz-grid,
	.rkz-games,
	.rkz-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;
	}

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

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

@media (max-width: 760px) {
	.rkz-editorial-hero {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 26px;
		margin-inline: -2px;
		padding: 24px;
	}

	.rkz-editorial-hero__title { max-width: 13ch; font-size: clamp(38px, 12vw, 55px); }

	.rkz-editorial-hero__media {
		order: -1;
		margin: -24px -24px 0;
		min-height: min(70vw, 330px);
	}

	.rkz-editorial-hero__media::after { background: linear-gradient(0deg, rgba(7, 14, 24, .42), transparent 58%); }
}

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

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

	.rkz-plate::before,
	.rkz-plate::after,
	.rkz-card::before,
	.rkz-quick__card::before,
	.rkz-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(--mis);
	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. */
.rkz-sig {
	display: grid;
	gap: 12px;
}

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

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

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

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

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

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

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

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

.rkz-anatomy__rows li:last-child {
	background: var(--gul-deep);
}

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

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

.rkz-anatomy__note,
.rkz-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 */
.rkz-mock {
	margin: 0;
}

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

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

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

.rkz-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(--gul);
	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. */
.rkz-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.rkz-nav__list li {
	margin: 0;
}

.rkz-nav__mobile {
	display: none;
}

.rkz-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);
	border-radius: var(--r-ctl);
	background: var(--plate-raised);
	color: var(--paper);
	font-size: 15px;
	font-weight: 700;
}

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

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

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

.rkz-nav__panel li {
	margin: 0;
}

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

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

.rkz-nav a[aria-current],
.rkz-nav__list a[aria-current] {
	color: var(--paper);
	border-color: var(--rule);
	background: rgba(30, 27, 57, .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. */
.rkz-head__cta--quiet {
	background: transparent;
	background-image: none;
	color: var(--gul);
	border-color: var(--rule-lit);
}

.rkz-head__cta--quiet:hover {
	background: rgba(30, 27, 57, .85);
	background-image: none;
	color: var(--paper);
	border-color: var(--mis);
}

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

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

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

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

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

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

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

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

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

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

	.rkz-nav__mobile {
		display: block;
	}

	.rkz-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. */
.rkz-brand {
	min-height: var(--tap);
}

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

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

.rkz-crumbs a,
.rkz-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. */
.rkz-cookie__row .rkz-cookie__ok {
	background: transparent;
	background-image: none;
	color: var(--prose);
	border-color: var(--rule-lit);
}

.rkz-cookie__row .rkz-cookie__ok:hover {
	border-color: var(--mis);
	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. `.rkz-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. */
.rkz-nav {
	min-width: 0;
}

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

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

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

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

@media (max-width: 1023px) {
	.rkz-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. */
.rkz-offer .rkz-btn {
	justify-self: start;
}

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

	.rkz-offer .rkz-btn + .rkz-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. */
.rkz-hero__facts {
	margin-bottom: 26px;
}

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

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

@media (min-width: 1100px) {
	.rkz-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. */
.rkz-tablewrap td a {
	display: inline-block;
	min-height: var(--tap);
	padding-block: 11px;
	box-sizing: border-box;
}

/* ---- 14. The card tubes: the same drawing, one volume quieter ------------

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

     * SIZE — a card re-declares --tube-over/--tube-w/--tube-glow and both bars follow,
       because the composite is declared on this selector too and resolves per element.
       There is no second geometry to keep in step.
     * VOLUME — the live tube is UNLIT on an idle card (it wears the card's own rule colour)
       and LIGHTS on hover. A card is a link; the tube coming on is the affordance, and the
       silhouette is identical in every state, which is the 69th's other lesson.

   THE GRIDS BELOW MOVE WITH IT. A card overhangs its column gap by --tube-over on each
   side, so two neighbours in a 12px gap would have their stubs touching. Every card grid
   goes to 20px, which leaves 10px of air between two 5px stubs — the 71st build's sideways
   inlays needed exactly this correction and are the reason it is made here rather than
   found by a screenshot. */
.rkz-card,
.rkz-quick__card,
.rkz-game {
	--tube-over: 5px;
	--tube-w: 2px;
	--tube-rail: 2px;
	--tube-glow: 4px;
	--tube-lit: var(--rule-lit);
	--tube-metal: var(--rule);
	background: var(--plate-grad);
	background-origin: border-box;
}

.rkz-quick__card:hover,
.rkz-quick__card:focus-visible,
.rkz-game:hover {
	--tube-lit: var(--gul);
	--tube-metal: var(--mis);
	--tube-glow: 8px;
}

/* 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. */
.rkz-quick__card:hover {
	background: var(--plate-raised-grad);
	background-origin: border-box;
}