/* =========================================================================
   royale-yukle-az.net — «Kömür & Orxideya» 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: NEON-BORU   — the plate device, defined once and reused
     3. Chrome                     — header, trust bar, footer, sticky, modals
     4. Sections                   — hero, TOC, download, steps, 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_rya.py, not inherited — >= 4.5:1):
     on --field / --field-deep / --plate / --plate-raised
                                           : paper 17.5/18.0/16.3/14.8, prose 14.1/14.5/13.1/12.0,
                                             figure 17.1/17.6/15.9/14.5, muted 10.4/10.7/9.7/8.8,
                                             amber 8.9/9.2/8.3/7.6, dim 7.2/7.4/6.7/6.1,
                                             orch 6.7/6.9/6.3/5.7
     on --live fill (AKTUAL teal)          : paper 10.1, prose 8.2, figure 9.9, muted 6.0, amber 5.2
                                             (dim 4.2, orch 3.9 — NO)
     on --orch-deep fill (deep orchid)     : paper 12.5, prose 10.1, figure 12.3, muted 7.5,
                                             amber 6.4, dim 5.2 (orch 4.8 — yes, but only large)
     on --amber-deep fill (18+/RG note)    : paper 11.4, prose 9.2, figure 11.2, muted 6.8, amber 5.9
                                             (dim 4.7, orch 4.4 — NO, which is why a link inside a
                                             filled note takes --paper + an underline, see 4j)
     on --orch / --paper / --figure fill   : ink 6.7 / 17.5 / 17.1
     the CTA ramp's DEEPEST stop (#c061e5) : ink 5.60 — the stop is chosen for this, because 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.
   --qor, --live-lit and --rule-lit are BORDER, GRADIENT-STOP AND DECOR colours. They never
   carry text: --qor (the crimson col AF named) measures 3.3/3.4/3.1/2.8 on the four grounds
   and --live-lit 4.8/5.0/4.5/4.1. On the last three builds a TOC number, a step counter and
   a mock login button were painting text with the decor metal until the probe said so.
   ========================================================================= */

/* ---- 0. Tokens ---------------------------------------------------------- */
:root {
	--field: #130c0d;
	--field-deep: #0d0808;
	--plate: #1e1415;
	--plate-raised: #291c1e;
	--rule: #433032;
	--rule-lit: #6a4d51;
	--paper: #f7f2f3;
	--prose: #e6d9db;
	--muted: #cbbabc;
	--dim: #ac9a9c;
	--orch: #cf71f4;
	--qor: #c1272d;
	--orch-deep: #451757;
	--ink: #130c0d;
	--figure: #f3f0f4;
	--live: #0c4338;
	--live-lit: #298e7a;
	--amber: #ef9f43;
	--amber-deep: #482d0f;

	--plate-grad: linear-gradient(183deg, #1e1415 0%, #130c0d 100%);
	--plate-raised-grad: linear-gradient(183deg, #352426 0%, #1e1415 100%);
	--orch-grad: linear-gradient(166deg, #de99fa 0%, #cf71f4 54%, #c061e5 100%);

	/* A neon tube BENDS, so three corners of the plate open wide to --r-plate and
	   only the corner the tube's cut end sits over is chamfered back to --r-head.
	   The siblings' ramps (0 throughout, 4px with one 18px pocket, 7/5 soft slab,
	   14/999 pill, flat head on a 12px foot) cannot be confused with three wide
	   corners and one narrow one. */
	--r-plate: 18px;
	--r-ctl: 10px;
	--r-head: 4px;

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

	   The device is a BROKEN NEON TUBE: a 3px stroke with round caps runs along the
	   plate's top edge, is UNLIT for one stretch, and resumes past the break in the
	   second metal — the crimson col AF asked for, which is decor and never text.
	   Both runs glow.

	   Seventeen axes in this network do something to an edge — chamfer, bite,
	   keyway, milled rim, chief band, an opened arch, a laid rule, a dashed seam on
	   a pocket, a row of teeth — and every one of them is CONTINUOUS and OPAQUE.
	   This is the first that is DISCONTINUOUS and LUMINOUS. The two runs are stated
	   as FRACTIONS of the tube rather than as lengths, so the break sits at the same
	   place on a 360px card and on a 1440px plate; change a fraction and the mark,
	   the plate and the divider all move together, which is the point. */
	--sig-inset: 18px;
	--sig-weight: 3px;
	--sig-on: .58;       /* the lit run, as a fraction of the tube */
	--sig-end: .26;      /* the run past the break (the gap is what is left: .16) */
	--sig-glow: 10px;

	--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;
	/* Alfa Slab One sets lining figures, and lining-nums is stated anyway so a fallback
	   slab (Rockwell) cannot re-introduce old-style figures; «550 AZN»
	   and «2026» set at cap height instead of dancing across the baseline. */
	font-variant-numeric: lining-nums;
}

/* A quiet tobacco 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(207, 113, 244, .10), transparent 62%),
		radial-gradient(58rem 34rem at 8% 108%, rgba(193, 39, 45, .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. */
#rya-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. */
.rya-num,
.rya-fact__val,
.rya-offer__amount,
.rya-meter__val,
.rya-toc__num,
.rya-steps__num {
	font-family: "Geist 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. */
.rya-sec {
	padding-block: clamp(46px, 6vw, 84px);
	scroll-margin-top: 78px;
}

.rya-sec + .rya-sec {
	border-top: 1px solid rgba(67, 48, 50, .55);
}

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

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

/* ---- 2. THE SIGNATURE: NEON-BORU ------------------------------------- */
/*
   One idea, drawn at two scales:

   1. BORU — the tube. A 3px stroke with fully rounded caps runs along the plate's
      top edge, inset from both corners. It is UNLIT for one stretch (a real neon
      sign's dead segment) and resumes past the break in the second metal. Both
      runs carry a glow, which is what makes the edge read as LIGHT rather than as
      a rule; the crimson run is decor-only and never carries text.
   2. QIRIQ — the break, alone. The section divider is the same tube at 172px with
      the same two fractions, so the divider is the tube's own unit and not a
      second idea.

   Two elements, two RUNS — not two copies of one run. That matters: the 68th build
   drew a spine on ::after and its teeth on ::before, and an engine that dropped the
   mask left a bare rule behind. Here each pseudo-element is a segment of the tube,
   so losing one leaves a shorter tube rather than a different drawing.
*/
.rya-plate {
	position: relative;
	background: var(--plate-grad);
	border: 1px solid var(--rule);
	border-radius: var(--r-plate) var(--r-head) var(--r-plate) var(--r-plate);
	padding: 30px 24px 26px;
}

.rya-plate::before,
.rya-plate::after {
	content: "";
	position: absolute;
	top: -2px;
	height: var(--sig-weight);
	border-radius: 999px;
	pointer-events: none;
}

/* the lit run */
.rya-plate::before {
	left: var(--sig-inset);
	width: calc((100% - var(--sig-inset) * 2) * var(--sig-on));
	background: var(--orch);
	box-shadow: 0 0 var(--sig-glow) rgba(207, 113, 244, .55);
}

/* the run past the break, in the second metal */
.rya-plate::after {
	right: var(--sig-inset);
	width: calc((100% - var(--sig-inset) * 2) * var(--sig-end));
	background: var(--qor);
	box-shadow: 0 0 var(--sig-glow) rgba(193, 39, 45, .5);
}

.rya-plate--raised {
	background: var(--plate-raised-grad);
	border-color: var(--rule-lit);
}

/* The raised variant re-states BOTH runs. Inheritance is what let the 66th build
   ship a donor drawing under a new one. */
.rya-plate--raised::before {
	background: var(--orch);
	box-shadow: 0 0 calc(var(--sig-glow) * 1.4) rgba(207, 113, 244, .65);
}

.rya-plate--raised::after {
	background: var(--qor);
	box-shadow: 0 0 var(--sig-glow) rgba(193, 39, 45, .55);
}

/* The quiet variant is the SAME tube with the power down: the lit run drops to the
   second metal and the terminal run stops glowing altogether. A second volume of
   one drawing, not a second drawing. */
.rya-plate--quiet::before {
	background: var(--qor);
	box-shadow: 0 0 var(--sig-glow) rgba(193, 39, 45, .4);
}

.rya-plate--quiet::after {
	background: var(--rule-lit);
	box-shadow: none;
}

/* QIRIQ — the same drawing as a standalone section divider: the tube's two runs and
   its break, at the identical fractions. */
.rya-rule {
	position: relative;
	height: var(--sig-weight);
	margin: 6px 0 24px;
	max-width: 172px;
}

.rya-rule::before,
.rya-rule::after {
	content: "";
	position: absolute;
	top: 0;
	height: var(--sig-weight);
	border-radius: 999px;
	pointer-events: none;
}

.rya-rule::before {
	left: 0;
	width: calc(100% * var(--sig-on));
	background: var(--orch);
	box-shadow: 0 0 var(--sig-glow) rgba(207, 113, 244, .5);
}

.rya-rule::after {
	right: 0;
	width: calc(100% * var(--sig-end));
	background: var(--qor);
	box-shadow: 0 0 var(--sig-glow) rgba(193, 39, 45, .45);
}

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

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

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

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

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

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

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

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

.rya-wordmark__name {
	font-family: "Alfa Slab One", Rockwell, "Bookman Old Style", serif;
	font-size: 21px;
	letter-spacing: -.012em;
	color: var(--paper);
}

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

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

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

.rya-nav a:hover {
	color: var(--paper);
	border-color: var(--rule);
	background: rgba(41, 28, 30, .7);
}

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

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

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

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

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

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

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

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

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

.rya-foot h2,
.rya-foot h3 {
	font-size: 14px;
	font-family: "Quicksand", "Century Gothic", "Segoe UI", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--paper);
	margin: 0 0 12px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rya-gate__box::before {
	content: "";
	position: absolute;
	top: -1px;
	left: var(--sig-inset);
	right: var(--sig-inset);
	height: var(--sig-weight);
	background: var(--orch);
}

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

.rya-gate__title {
	font-family: "Alfa Slab One", Rockwell, "Bookman Old Style", serif;
	font-size: 26px;
	color: var(--paper);
	margin: 0 0 10px;
}

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

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

.rya-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(7, 4, 4, .74);
	font-size: 14px;
	color: var(--prose);
}

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

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

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

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

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

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

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

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

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

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

.rya-toc__list li {
	margin: 0;
}

.rya-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(30, 20, 21, .55);
	color: var(--prose);
	text-decoration: none;
	font-size: 15.5px;
	line-height: 1.4;
}

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

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

/* 4c. Quick-nav cards */
.rya-quick {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

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

.rya-quick__card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 20px;
	right: 20px;
	height: var(--sig-weight);
	background: var(--qor);
}

.rya-quick__card:hover {
	border-color: var(--qor);
	background: var(--plate-raised-grad);
	text-decoration: none;
}

.rya-quick__card:hover::before {
	background: var(--orch);
}

.rya-quick__title {
	display: block;
	font-family: "Alfa Slab One", Rockwell, "Bookman Old Style", serif;
	font-size: 20px;
	color: var(--paper);
	margin-bottom: 7px;
}

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

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

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

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

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

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

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

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

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

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

.rya-btn--ghost:hover {
	background: rgba(41, 28, 30, .8);
	color: var(--paper);
	border-color: var(--qor);
}

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

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

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

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

.rya-chip--orch {
	background: var(--orch-deep);
	border-color: var(--qor);
	color: var(--paper);
}

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

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

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

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

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

/* 4h. Fact / feature grid */
.rya-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}

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

.rya-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 20px;
	right: 20px;
	height: var(--sig-weight);
	background: var(--qor);
}

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

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

/* 4i. Game tiles */
.rya-games {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

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

.rya-game::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 18px;
	right: 18px;
	height: var(--sig-weight);
	background: var(--qor);
}

.rya-game__name {
	display: block;
	font-family: "Alfa Slab One", Rockwell, "Bookman Old Style", serif;
	font-size: 18px;
	color: var(--paper);
	margin-bottom: 6px;
}

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

.rya-game__meta b {
	font-family: "Geist 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. */
.rya-meter {
	margin-top: 12px;
}

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

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

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

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

.rya-note--warn {
	border-left-color: var(--amber);
	background: rgba(72, 45, 15, .5);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rya-faq summary:hover {
	background: rgba(41, 28, 30, .6);
}

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

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

/* 4m. Payments rail in content */
.rya-payrail {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	body {
		padding-bottom: 92px;
	}

	.rya-head__cta {
		display: none;
	}

	:root {
		--sig-inset: 16px;
	}

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

	.rya-plate {
		padding: 26px 17px 20px;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rya-anatomy__rows li:last-child {
	background: var(--orch-deep);
}

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

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

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

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

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

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

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

.rya-nav__list li {
	margin: 0;
}

.rya-nav__mobile {
	display: none;
}

.rya-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: 600;
}

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

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

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

.rya-nav__panel li {
	margin: 0;
}

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

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

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

.rya-head__cta--quiet:hover {
	background: rgba(41, 28, 30, .85);
	background-image: none;
	color: var(--paper);
	border-color: var(--qor);
}

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

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

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

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

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

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

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

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

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

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

	.rya-nav__mobile {
		display: block;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- 14. The card edges: the same tube, one volume quieter ---------------

   A SCREENSHOT found this; no gate could. `.rya-card`, `.rya-quick__card` and `.rya-game`
   inherited the donor's decor bar — one opaque, continuous, full-width run of the second
   metal along the top edge. Under this identity that is exactly the drawing the signature
   says the site does NOT make: NEON-BORU is DISCONTINUOUS and LUMINOUS, and --qor is the
   run PAST the break, never the whole edge. Sixteen cards were therefore wearing a solid
   crimson stripe that read as a warning rule.

   So every card edge becomes the same tube at the same two fractions as `.rya-plate`:
   a lit run in the accent, the gap, then the terminal run in the crimson. The insets differ
   per component (20px on the cards, 18px on the game tile) because the components' own
   paddings do — the FRACTIONS are what make it one drawing, not the absolute lengths. */
.rya-card::before,
.rya-quick__card::before {
	right: auto;
	width: calc((100% - 40px) * var(--sig-on));
	background: var(--orch);
	border-radius: 999px;
	box-shadow: 0 0 var(--sig-glow) rgba(207, 113, 244, .45);
}

.rya-game::before {
	right: auto;
	width: calc((100% - 36px) * var(--sig-on));
	background: var(--orch);
	border-radius: 999px;
	box-shadow: 0 0 var(--sig-glow) rgba(207, 113, 244, .45);
}

.rya-card::after,
.rya-quick__card::after,
.rya-game::after {
	content: "";
	position: absolute;
	top: -1px;
	height: var(--sig-weight);
	border-radius: 999px;
	background: var(--qor);
	box-shadow: 0 0 var(--sig-glow) rgba(193, 39, 45, .4);
	pointer-events: none;
}

.rya-card::after,
.rya-quick__card::after {
	right: 20px;
	width: calc((100% - 40px) * var(--sig-end));
}

.rya-game::after {
	right: 18px;
	width: calc((100% - 36px) * var(--sig-end));
}

/* The hover state repainted the WHOLE bar in the accent, which re-joined the tube the
   moment a pointer touched a card. Hover brightens the lit run instead. */
.rya-quick__card:hover::before {
	background: var(--orch-lit);
	box-shadow: 0 0 calc(var(--sig-glow) * 1.5) rgba(207, 113, 244, .6);
}