/* =========================================================================
   Royale Casino — royale-slot.com — theme design layer
   Burgundy & Cream (LIGHT) · Kanit / Lexend / Spline Sans Mono
   Loaded on the front end and inside the editor canvas.
   Structure comes from core blocks; this file supplies the printed-paper
   card look (ink hairlines, wax-seal burgundy fills, antique-gold figures)
   and the mobile behaviour the raw markup needs.
   ========================================================================= */

:root {
	--rc-maxw: 1200px;
	--rc-card-border: 1px solid rgba(123, 34, 51, 0.174);
	--rc-card-border-strong: 1px solid rgba(123, 34, 51, 0.319);
	--rc-hairline: 1px solid rgba(36, 16, 20, 0.096);
}

/* ---- Base canvas & background glow ------------------------------------ */
body {
	background-color: var(--wp--preset--color--base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* clip (not hidden) prevents sideways scroll without creating a scroll
	   container that would break the sticky header */
	overflow-x: clip;
}

/* Front-end only: the ambient purple/gold glows from the original design. */
.wp-site-blocks {
	position: relative;
}
.wp-site-blocks::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(1200px 600px at 78% -8%, rgba(176, 141, 60, 0.184), transparent 60%),
		radial-gradient(900px 500px at 12% 4%, rgba(123, 34, 51, 0.116), transparent 55%);
}
.wp-site-blocks > * {
	position: relative;
	z-index: 1;
}

::selection {
	background: rgba(123, 34, 51, .18);
	color: #241014;
}

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

/* ---- Reusable section rhythm ------------------------------------------ */
.rc-section {
	padding-top: clamp(40px, 6vw, 56px);
	padding-bottom: clamp(16px, 3vw, 24px);
}

/* ---- Eyebrow / labels -------------------------------------------------- */
.rc-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--purple-soft);
}

/* ---- Live / license badge --------------------------------------------- */
.rc-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	border-radius: 100px;
	border: 1px solid rgba(123, 34, 51, 0.406);
	background: rgba(123, 34, 51, 0.087);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .4px;
	color: var(--wp--preset--color--gold);
}
.rc-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	box-shadow: 0 0 8px var(--wp--preset--color--green);
}

/* ---- Cards ------------------------------------------------------------- */
.rc-card,
.rc-card-raised {
	border-radius: 16px;
	background: var(--wp--preset--gradient--card);
	border: var(--rc-card-border);
}
.rc-card-raised {
	background: var(--wp--preset--gradient--card-raised);
	border: var(--rc-card-border-strong);
	box-shadow: var(--wp--preset--shadow--card);
}

/* ---- Buttons ----------------------------------------------------------- */
.wp-block-button.rc-btn-outline .wp-block-button__link,
.wp-block-button__link.rc-btn-outline {
	background: rgba(36, 16, 20, 0.032) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid rgba(123, 34, 51, 0.435);
	box-shadow: none;
}
.wp-block-button.rc-btn-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold-soft) !important;
}
/* Gold buttons: explicit gradient (theme.json color.background renders a
   gradient token as a flat colour, so we set the real gradient here). */
.wp-block-button:not(.rc-btn-outline) > .wp-block-button__link {
	background: var(--wp--preset--gradient--gold) !important;
	color: var(--wp--preset--color--ink) !important;
	border: none;
	box-shadow: var(--wp--preset--shadow--gold);
}
.wp-block-button:not(.rc-btn-outline) > .wp-block-button__link:hover { filter: brightness(1.05); }
/* keep button labels on one line (fixes "Giri / ş" wrapping in the header) */
.wp-block-button__link { white-space: nowrap; }
/* button sizing by context (kept out of block attrs so markup stays valid) */
.rc-hero .wp-block-buttons .wp-block-button__link { padding: 15px 30px; font-size: 16px; }
.rc-header .wp-block-button__link { padding: 10px 16px; font-size: 14px; }
.rc-gold-text { background: linear-gradient(120deg, #92283B, #B08D3C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #7A5E1E; }
.wp-block-separator.rc-sep { border: none; height: 1px; background: rgba(123, 34, 51, 0.174); opacity: 1; max-width: none; }

/* ---- Hero -------------------------------------------------------------- */
.rc-hero {
	padding-top: clamp(36px, 6vw, 64px);
}
.rc-hero__art img {
	border-radius: 20px;
	border: 1px solid rgba(123, 34, 51, 0.261);
	box-shadow: var(--wp--preset--shadow--soft);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}
.rc-stats {
	gap: 26px 32px;
}
.rc-stat__num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 26px;
	color: var(--wp--preset--color--gold);
	line-height: 1;
}
.rc-stat__label {
	font-size: 12.5px;
	color: var(--wp--preset--color--dim);
	font-weight: 600;
}

/* ---- Hero trust / payments row ---------------------------------------- */
/* Sits under the stats in the home hero so the (shorter) text column fills
   more of the height next to the tall image + offer card, killing the void
   that appeared when the columns were vertically centred. */
.rc-trustrow {
	gap: 10px;
	margin-top: 24px;
	align-items: center;
}
.rc-trust {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: 10px;
	background: rgba(36, 16, 20, 0.048);
	border: 1px solid rgba(123, 34, 51, 0.203);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
.rc-trust b { color: var(--wp--preset--color--contrast); font-weight: 700; }

/* ---- Bonus offer card -------------------------------------------------- */
.rc-offer {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	padding: 34px 30px;
	background: var(--wp--preset--gradient--card-raised);
	border: var(--rc-card-border-strong);
	box-shadow: var(--wp--preset--shadow--card);
}
.rc-offer::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 22px;
	pointer-events: none;
	background: radial-gradient(400px 200px at 80% 0%, rgba(176, 141, 60, 0.253), transparent 65%);
}
.rc-offer > * { position: relative; z-index: 1; }
.rc-offer__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 46px;
	line-height: 1;
	color: var(--wp--preset--color--heading);
}
.rc-offer__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	padding: 9px 0;
	border-bottom: var(--rc-hairline);
}
.rc-offer__row span:first-child { color: var(--wp--preset--color--muted); }
.rc-offer__row span:last-child  { color: var(--wp--preset--color--contrast); font-weight: 700; }

/* Floating animation (respect reduced motion) */
@keyframes rc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.rc-float { animation: rc-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rc-float { animation: none; } }

/* ---- Quick links ------------------------------------------------------- */
.rc-quicklink {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 18px;
	border-radius: 14px;
	background: var(--wp--preset--gradient--card);
	border: var(--rc-card-border);
	transition: transform .18s ease, border-color .18s ease;
}
.rc-quicklink:hover { transform: translateY(-3px); border-color: rgba(123, 34, 51, 0.507); }
.rc-quicklink__icon { font-size: 26px; }
.rc-quicklink__title { font-size: 15.5px; font-weight: 700; color: var(--wp--preset--color--contrast); }
.rc-quicklink__sub { font-size: 12.5px; color: var(--wp--preset--color--dim); }

/* ---- Game cards -------------------------------------------------------- */
.rc-game {
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(123, 34, 51, 0.145);
	transition: transform .18s ease, border-color .18s ease;
}
.rc-game:hover { transform: translateY(-4px); border-color: rgba(123, 34, 51, 0.435); }
.rc-game__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.rc-game__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-game__body { padding: 12px 13px; }
.rc-game__title {
	font-size: 14px; font-weight: 700; color: var(--wp--preset--color--contrast);
	/* Wrap to two lines instead of ellipsing: at 360px the grid tracks are ~150px
	   and titles like "Mini Roulette" were being truncated with no way to read them. */
	line-height: 1.25;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.rc-game__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.rc-game__provider { font-size: 11.5px; color: var(--wp--preset--color--dim); }
.rc-game__play {
	/* Tap target: the 5px/12px pill rendered ~22px tall — under the 44px minimum.
	   Sized here rather than per-card so every game grid inherits the fix. */
	font-size: 12.5px; font-weight: 700; color: var(--wp--preset--color--ink);
	background: var(--wp--preset--gradient--gold); padding: 10px 16px; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; text-decoration: none;
	/* Owns its own top gap so the game cards don't each repeat an inline style
	   (18 identical style="" attributes were a network footprint tell). */
	margin-top: 10px;
}
.rc-tag {
	position: absolute; top: 9px; left: 9px; z-index: 2;
	padding: 3px 9px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .5px;
}
/* Crash-red labels carry white ink, so the background has to be the DEEP red:
   #FFFFFF on #B3261E is 3.03:1 (fails AA at 10px) while #FFFFFF on #9F1F18 is
   6.5:1. --wp--preset--color--danger stays reserved for red TEXT on graphite. */
:root { --rc-danger-deep: #9F1F18; }
.rc-tag--hot { background: var(--rc-danger-deep); color: #FFF8F0; }
.rc-tag--jackpot { background: var(--wp--preset--gradient--gold); color: var(--wp--preset--color--ink); }

/* ---- Filter chips ------------------------------------------------------ */
.rc-chips .wp-block-button__link {
	padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
	background: transparent !important; color: var(--wp--preset--color--muted) !important;
	border: 1px solid rgba(123, 34, 51, 0.203); box-shadow: none;
}
.rc-chips .wp-block-button.is-active .wp-block-button__link,
.rc-chips .wp-block-button:first-child .wp-block-button__link {
	background: rgba(123, 34, 51, 0.174) !important; color: var(--wp--preset--color--gold) !important;
	border-color: rgba(123, 34, 51, 0.58);
}

/* ---- Feature cards ----------------------------------------------------- */
.rc-feature { padding: 26px 24px; border-radius: 16px; background: var(--wp--preset--gradient--card); border: var(--rc-card-border); }
.rc-feature__icon {
	width: 48px; height: 48px; border-radius: 12px; background: rgba(123, 34, 51, 0.145);
	display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px;
}
.rc-feature__title { font-size: 17px; font-weight: 700; color: var(--wp--preset--color--contrast); margin-bottom: 7px; }
.rc-feature__text { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--muted); }

/* ---- App download ------------------------------------------------------ */
.rc-app {
	position: relative; overflow: hidden;
	border-radius: 22px; padding: clamp(28px, 4vw, 44px);
	background: var(--wp--preset--gradient--card-raised);
	border: 1px solid rgba(123, 34, 51, 0.232);
}
.rc-app::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(500px 300px at 90% 50%, rgba(176, 141, 60, 0.184), transparent 60%);
}
.rc-app > * { position: relative; z-index: 1; }
.rc-app__art img { border-radius: 18px; border: 1px solid rgba(123, 34, 51, 0.232); width: 100%; }
.rc-store {
	display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 11px;
	background: rgba(36, 16, 20, 0.08); border: 1px solid rgba(123, 34, 51, 0.362);
	font-weight: 700; color: var(--wp--preset--color--contrast);
}
.rc-store:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold-soft); }

/* ---- Payments ---------------------------------------------------------- */
.rc-pay {
	height: 64px; border-radius: 12px; background: var(--wp--preset--color--surface);
	border: 1px solid rgba(123, 34, 51, 0.145); display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px; color: #92283B;
}

/* ---- Steps ------------------------------------------------------------- */
.rc-step { padding: 28px 24px; border-radius: 16px; background: var(--wp--preset--gradient--card); border: var(--rc-card-border); }
.rc-step__num { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 40px; color: rgba(123, 34, 51, 0.507); line-height: 1; margin-bottom: 14px; }
.rc-step__title { font-size: 18px; font-weight: 700; color: var(--wp--preset--color--contrast); margin-bottom: 7px; }
.rc-step__text { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--muted); }

/* ---- Reviews & comparison --------------------------------------------- */
.rc-review { padding: 20px 22px; border-radius: 14px; background: var(--wp--preset--gradient--card); border: var(--rc-card-border); }
.rc-avatar {
	width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
	background: var(--wp--preset--gradient--purple);
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #FFF8F0;
}
.rc-stars { color: var(--wp--preset--color--gold); font-size: 13px; letter-spacing: 1px; }
.rc-rating-pill {
	padding: 6px 12px; border-radius: 100px; background: rgba(176, 141, 60, 0.138);
	color: var(--wp--preset--color--green-soft); font-size: 13px; font-weight: 700;
}
/* top clears the sticky header (topbar 34 + bar 74 + 12 breathing room). */
.rc-compare { padding: 28px 26px; border-radius: 18px; background: var(--wp--preset--gradient--card-raised); border: var(--rc-card-border-strong); position: sticky; top: 124px; }
.rc-compare__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 8px 0; border-bottom: var(--rc-hairline); }
.rc-compare__row span:first-child { color: var(--wp--preset--color--muted); }
.rc-compare__row span:last-child { color: var(--wp--preset--color--green-soft); font-weight: 700; }

/* ---- Blog cards -------------------------------------------------------- */
.rc-post { border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--surface); border: var(--rc-card-border); display: block; transition: transform .18s ease, border-color .18s ease; }
.rc-post:hover { transform: translateY(-4px); border-color: rgba(123, 34, 51, 0.435); }
.rc-post__cover { aspect-ratio: 16 / 9; overflow: hidden; }
.rc-post__cover img { width: 100%; height: 100%; object-fit: cover; }
.rc-post__body { padding: 18px 20px; }
.rc-post__cat { font-size: 12px; font-weight: 700; color: var(--wp--preset--color--purple-soft); }
.rc-post__title { font-size: 16px; font-weight: 700; color: var(--wp--preset--color--contrast); line-height: 1.35; margin: 8px 0 6px; }
.rc-post__date { font-size: 12.5px; color: var(--wp--preset--color--dim); }

/* ---- FAQ (native <details>) ------------------------------------------- */
.rc-faq { border-radius: 14px; background: var(--wp--preset--gradient--card); border: 1px solid rgba(123, 34, 51, 0.174); overflow: hidden; }
.rc-faq + .rc-faq { margin-top: 12px; }
.rc-faq > summary {
	list-style: none; cursor: pointer; padding: 20px 22px;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	font-size: 16px; font-weight: 700; color: var(--wp--preset--color--contrast);
}
.rc-faq > summary::-webkit-details-marker { display: none; }
.rc-faq > summary::after {
	content: "+"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
	background: rgba(123, 34, 51, 0.174); color: var(--wp--preset--color--gold);
	display: flex; align-items: center; justify-content: center; font-size: 18px; transition: transform .2s ease;
}
.rc-faq[open] > summary::after { transform: rotate(45deg); }
.rc-faq__answer { margin: 0; padding: 0 22px 20px; font-size: 15.5px; line-height: 1.65; color: var(--wp--preset--color--body); max-width: 62ch; }

/* ---- Responsible gaming banner ---------------------------------------- */
.rc-18 {
	display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-radius: 14px;
	background: rgba(176, 141, 60, 0.069); border: 1px solid rgba(176, 141, 60, 0.23);
}
.rc-18__badge {
	width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; background: rgba(176, 141, 60, 0.172);
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: var(--wp--preset--color--purple-soft);
}
.rc-18__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--wp--preset--color--muted); }

/* =========================================================================
   INTERIOR PAGES — shared helpers
   ========================================================================= */
.rc-breadcrumb { font-size: 12.5px; color: var(--wp--preset--color--dim); }
.rc-breadcrumb a { color: var(--wp--preset--color--muted); }
.rc-lead { font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--body); max-width: 660px; }

/* ---- Interior page hero (breadcrumb + eyebrow + H1 + lead + CTA) -------
   The interior hero is a single constrained column, so with the 820px content
   width the text used to float mid-screen with dead gutters on both sides and
   the lead (max-width 660) auto-centred *narrower* than the H1 — reading as a
   broken indent. We turn it into a deliberate, symmetric centred page header
   with an ambient glow so the first screen feels composed, not empty.
   Targets only the interior variant (the home hero has columns, no breadcrumb). */
.rc-hero:has(.rc-breadcrumb) {
	position: relative;
	overflow: clip;
	text-align: center;
	padding-top: clamp(48px, 6vw, 76px);
	padding-bottom: clamp(28px, 4vw, 44px);
}
.rc-hero:has(.rc-breadcrumb)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(680px 320px at 50% 8%, rgba(176, 141, 60, 0.184), transparent 62%),
		radial-gradient(420px 220px at 50% 4%, rgba(123, 34, 51, 0.102), transparent 60%);
}
.rc-hero:has(.rc-breadcrumb) > * { position: relative; z-index: 1; }
/* comfortable measure + real centring for the lead and buttons */
.rc-hero:has(.rc-breadcrumb) .rc-lead {
	margin-left: auto;
	margin-right: auto;
}
.rc-hero:has(.rc-breadcrumb) .rc-breadcrumb,
.rc-hero:has(.rc-breadcrumb) .rc-eyebrow { text-align: center; }
.rc-hero:has(.rc-breadcrumb) .wp-block-buttons { justify-content: center; margin-top: 8px; }

/* Fallback for browsers without :has() — still readable, just left-aligned */
@supports not selector(:has(*)) {
	.rc-hero .rc-lead { margin-right: auto; }
}

/* generic stat tiles (aviator game info, payment facts) */
.rc-statbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.rc-stat-tile {
	padding: 16px 18px; border-radius: 12px; background: var(--wp--preset--gradient--card);
	border: var(--rc-card-border);
}
.rc-stat-tile .k { font-size: 12px; color: var(--wp--preset--color--dim); font-weight: 600; }
.rc-stat-tile .v { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 22px; color: var(--wp--preset--color--gold); }

/* bonus card = feature card + a price line + button (reuses .rc-feature look) */
.rc-bonus__amount { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 30px; color: var(--wp--preset--color--gold); line-height: 1; margin: 6px 0 8px; }

/* CTA banner */
.rc-cta {
	position: relative; overflow: hidden; text-align: center;
	padding: clamp(28px, 4vw, 44px); border-radius: 22px;
	background: var(--wp--preset--gradient--card-raised); border: var(--rc-card-border-strong);
}
.rc-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 240px at 50% 0%, rgba(176, 141, 60, 0.184), transparent 65%); }
.rc-cta > * { position: relative; z-index: 1; }

/* comparison / payment tables (dense, kept in html blocks) */
.rc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Pages emit <figure class="wp-block-table rc-table">, so the figure itself is the
   horizontal scroll container on mobile; the inner <table> keeps the min width. */
.rc-table { display: block; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 14px; }
.rc-table > table { width: 100%; border-collapse: collapse; min-width: 560px; }
.rc-table th, .rc-table td { padding: 12px 14px; text-align: left; border-bottom: var(--rc-hairline); }
.rc-table thead th { color: var(--wp--preset--color--heading); font-weight: 800; }
.rc-table tbody th { color: var(--wp--preset--color--muted); font-weight: 600; }
.rc-table td { color: var(--wp--preset--color--contrast); }
.rc-table .yes { color: var(--wp--preset--color--green-soft); font-weight: 700; }
.rc-table .no { color: var(--wp--preset--color--dim); }
.rc-table .rc-col-hi { background: rgba(123, 34, 51, 0.116); color: var(--wp--preset--color--gold); font-weight: 700; }
.rc-table .rc-badge-rec { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:6px; font-size:10px; font-weight:800; background:var(--wp--preset--gradient--gold); color:var(--wp--preset--color--ink); }

/* warning-sign / checklist rows */
.rc-warn { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 10px; }
.rc-warn li { position: relative; padding: 13px 14px 13px 42px; border-radius: 12px; background: var(--wp--preset--gradient--card); border: var(--rc-card-border); font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--body); }
/* U+FE0E forces the text (not emoji) presentation of the warning sign so it picks
   up the cyan accent instead of rendering as a colour emoji on Win/Android. */
.rc-warn li::before { content: "\26A0\FE0E"; position: absolute; left: 14px; top: 13px; color: var(--wp--preset--color--gold); }

/* =========================================================================
   HEADER
   ========================================================================= */
.rc-header {
	position: sticky; top: 0; z-index: 50;
	backdrop-filter: blur(14px);
	background: rgba(26, 16, 48, .82);
	border-bottom: 1px solid rgba(123, 34, 51, 0.203);
}
.rc-header__inner {
	min-height: 74px;
	max-width: var(--rc-maxw);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
	gap: 20px;
}
.rc-instruments {
	max-width: var(--rc-maxw);
	margin: 0 auto;
	padding: 6px 24px;
	width: 100%;
}
.rc-header__actions { margin-left: auto; }
/* the nav lives in the middle and can shrink/scroll before the burger kicks in */
.rc-nav { min-width: 0; }
/* ---- Wordmark: heraldic shield crest + Anton lockup -------------------
   The identity brief for this domain is a heraldic shield emblem, so the mark is
   an inline SVG crest (champagne edge, amethyst field, three reel bars) followed
   by "ROYALE" in heading white and "SLOTS" in champagne. No script lettering, no
   monogram tile, no TLD chip — the header silhouette is unlike any sibling. */
.rc-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}
.rc-brand__crest {
	flex: 0 0 auto;
	width: 30px;
	height: 34px;
	display: block;
	filter: drop-shadow(0 3px 10px rgba(176, 141, 60, 0.517));
}
.rc-brand__lock {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.rc-brand__word {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 3.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--heading);
}
.rc-brand__cluster {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 5.6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-top: 3px;
}
.rc-brand:hover .rc-brand__cluster { color: var(--wp--preset--color--gold-soft); }
.rc-brand--footer .rc-brand__word { font-size: 18px; }
.rc-brand--footer .rc-brand__cluster { font-size: 12px; letter-spacing: 5px; }

/* ---- Instrument rail under the header (replaces the sibling's topbar) ---- */
.rc-instruments {
	max-width: var(--rc-maxw);
	margin: 0 auto;
	padding: 8px 24px 10px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 22px;
	border-top: 1px solid rgba(36, 16, 20, 0.08);
}
.rc-instruments__rail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
}
.rc-instruments__cell {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 3px 9px;
	border-radius: 4px;
	background: rgba(123, 34, 51, 0.102);
	border: 1px solid rgba(123, 34, 51, 0.232);
}
.rc-instruments__cell dt {
	font-size: 11px;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}
.rc-instruments__cell dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12.5px;
	font-weight: 600;
	color: #7A5E1E;
}
.rc-instruments__legal { margin: 0; font-size: 12px; color: var(--wp--preset--color--dim); }
.rc-instruments__legal a { color: var(--wp--preset--color--gold-soft); }
.rc-instruments__age {
	display: inline-block;
	padding: 1px 6px;
	margin-right: 4px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 800;
	color: #FFF8F0;
	background: var(--rc-danger-deep, #9F1F18);
}

/* ---- Footer payment rail (mirrors the header rail, sits at the bottom) --- */
.rc-payrail {
	max-width: var(--rc-maxw);
	margin: 34px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(176, 141, 60, 0.184);
}
.rc-payrail__title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .6px;
	color: var(--wp--preset--color--contrast);
}
.rc-payrail__row { display: flex; flex-wrap: wrap; gap: 9px; }
.rc-payrail__note { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--wp--preset--color--dim); }

/* Navigation */
.rc-nav { flex-wrap: nowrap; }
.rc-nav .wp-block-navigation-item__content { font-size: 14px; font-weight: 600; color: var(--wp--preset--color--body); padding: 8px 11px; border-radius: 8px; white-space: nowrap; }
.rc-header__inner .wp-block-navigation__responsive-container:not(.is-menu-open) { background: transparent; }
.rc-nav .current-menu-item .wp-block-navigation-item__content,
.rc-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--contrast); background: rgba(123, 34, 51, 0.116); }

/* Language pills */
.rc-lang { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(123, 34, 51, 0.29); border-radius: 9px; background: rgba(36, 16, 20, 0.032); }
.rc-lang a { padding: 5px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--wp--preset--color--dim); }
.rc-lang a.is-active { background: rgba(123, 34, 51, 0.232); color: var(--wp--preset--color--gold); }

.rc-instruments { min-height: 34px; font-size: 12px; color: var(--wp--preset--color--dim); }
.rc-instruments__legal b { color: var(--wp--preset--color--gold); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.rc-footer { border-top: 1px solid rgba(123, 34, 51, 0.174); background: var(--wp--preset--color--base-deep); }
.rc-footer__col-title { font-size: 13px; font-weight: 800; letter-spacing: .6px; color: var(--wp--preset--color--contrast); margin-bottom: 14px; }
.rc-footer a { font-size: 13px; color: var(--wp--preset--color--muted); }
.rc-footer a:hover { color: var(--wp--preset--color--gold); }
.rc-footer .rc-footer__links { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rc-footer .rc-brand__name { color: var(--wp--preset--color--heading); }
.rc-footer__legal { font-size: 12px; color: var(--wp--preset--color--dim); }
.rc-chip {
	padding: 8px 14px; border-radius: 8px; background: rgba(36, 16, 20, 0.048);
	border: 1px solid rgba(36, 16, 20, 0.096); font-size: 12px; font-weight: 600; color: var(--wp--preset--color--dim);
}

/* =========================================================================
   RESPONSIVE  — the piece the original inline markup was missing entirely
   ========================================================================= */

/* Tablet */
@media (max-width: 900px) {
	.rc-compare { position: static; }
	.rc-offer__amount { font-size: 40px; }
}

/* Mobile */
@media (max-width: 600px) {
	body { --rc-side: 16px; }
	.rc-section { padding-top: 36px; }

	/* tighten root padding on small screens */
	.rc-header__inner { min-height: 60px; }
	.rc-brand__mark { width: 32px; height: 32px; font-size: 18px; }
	.rc-brand__name { font-size: 17px; }

	/* stat row wraps to 2-up */
	.rc-stats { gap: 18px 28px; }

	.rc-offer { padding: 26px 20px; }
	.rc-offer__amount { font-size: 38px; }

	/* buttons go full width so they are tappable */
	.rc-hero .wp-block-buttons .wp-block-button,
	.rc-app .wp-block-buttons .wp-block-button { width: 100%; }
	.rc-hero .wp-block-buttons .wp-block-button__link,
	.rc-app .wp-block-buttons .wp-block-button__link { display: block; text-align: center; }

	.rc-faq > summary { font-size: 15px; padding: 16px 18px; }
	.rc-18 { flex-direction: row; align-items: flex-start; }
}

/* Mobile header: keep only logo, burger and the primary CTA; the language
   switch and secondary link move out of the cramped bar. Core Navigation
   shows its hamburger below 600px. */
@media (max-width: 600px) {
	.rc-header__inner { gap: 10px; padding: 0 16px; }
	.rc-instruments { padding: 6px 16px; }
	.rc-lang { display: none; }
	.rc-header__actions .rc-btn-outline { display: none; }
	.rc-header__actions { gap: 10px; }
	/* let the nav (burger) sit just before the CTA on the right */
	.rc-nav { order: 3; margin-left: auto; }
	.rc-header__actions { order: 4; margin-left: 0; }
	.rc-instruments { font-size: 11px; gap: 4px 12px; }
}

/* Very small */
@media (max-width: 400px) {
	.rc-brand__name { display: none; }
	.rc-header__actions .wp-block-button__link { padding: 9px 14px !important; }
}

/* ===========================================================================
   Accessibility & polish pass (v2.1.0)
   Additive only — no changes to block markup, so Gutenberg validation is safe.
   =========================================================================== */

/* Skip-to-content: off-screen until it receives keyboard focus. */
.rc-skip-link {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -130%);
	z-index: 2000;
	padding: 12px 22px;
	background: #EFE7D9;
	color: #FFF8F0;
	font-family: "Nunito Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 8px 24px rgba(70, 24, 34, 0.126);
	transition: transform .18s ease-out;
}
.rc-skip-link:focus {
	transform: translate(-50%, 0);
	outline: none;
}

/* Visible keyboard focus on every interactive element (WCAG 2.4.7).
   Only shows for keyboard users via :focus-visible, so mouse clicks stay clean. */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #92283B;
	outline-offset: 3px;
	border-radius: 6px;
}

/* Mobile: guarantee 44px tap targets and remove the 300ms tap delay (WCAG 2.5.5). */
@media (max-width: 600px) {
	.wp-block-button__link,
	.rc-nav .wp-block-navigation-item__content,
	.rc-header__actions a,
	.rc-lang a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		touch-action: manipulation;
	}
}

/* Honour prefers-reduced-motion globally, not just the floating hero art. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Supplement: native wp:table dark styling + mobile scroll, notes (added by builder) ---- */
.wp-block-table{margin:18px 0;}
.wp-block-table.rc-table,.wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.wp-block-table table{width:100%;border-collapse:collapse;min-width:520px;font-size:14px;}
.wp-block-table th,.wp-block-table td{padding:12px 14px;text-align:left;border-bottom:var(--rc-hairline,1px solid rgba(36, 16, 20, 0.128));}
.wp-block-table thead th{color:var(--wp--preset--color--heading);font-weight:800;font-family:var(--wp--preset--font-family--mono);letter-spacing:.3px;}
.wp-block-table tbody td{color:var(--wp--preset--color--body);}
.wp-block-table tbody td:nth-child(n+2){font-family:var(--wp--preset--font-family--mono);color:var(--wp--preset--color--contrast);}
.rc-note{font-size:13px;line-height:1.6;color:var(--wp--preset--color--dim);border-left:2px solid rgba(123, 34, 51, 0.435);padding:2px 0 2px 14px;margin:14px 0;}
.rc-rating-pill{white-space:nowrap;}
@media (max-width:600px){.wp-block-table table{min-width:480px;}}

/* Static single-language marker (AZ-only site). */
.rc-langtag {
	display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 7px;
	border: 1px solid rgba(123, 34, 51, 0.435); background: rgba(123, 34, 51, 0.102);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px; font-weight: 400; letter-spacing: 1px;
	color: var(--wp--preset--color--gold);
}

/* ---- Multiplier scale strip (green cash-out zone -> red crash zone) ------- */
.rc-mult {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px;
	list-style: none; padding-left: 0; margin: 0;
}
.rc-mult li {
	padding: 14px 12px; border-radius: 10px; text-align: center;
	background: var(--wp--preset--gradient--card); border: 1px solid rgba(36, 16, 20, 0.096);
}
.rc-mult .x {
	display: block; font-family: var(--wp--preset--font-family--mono);
	font-size: 22px; line-height: 1; color: var(--wp--preset--color--contrast);
}
.rc-mult .t { display: block; margin-top: 7px; font-size: 12px; color: var(--wp--preset--color--dim); }
.rc-mult li.is-safe   { border-color: rgba(30, 122, 84, 0.408); }
.rc-mult li.is-safe   .x { color: var(--wp--preset--color--green-soft); }
.rc-mult li.is-risky  { border-color: rgba(179, 38, 30, 0.36); }
.rc-mult li.is-risky  .x { color: #B3261E; }

/* ---- RTP / provider fact card (mono figures) ----------------------------- */
.rc-rtp {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
	background: rgba(36, 16, 20, 0.112); border: 1px solid rgba(36, 16, 20, 0.112);
	border-radius: 12px; overflow: hidden;
}
.rc-rtp div { background: var(--wp--preset--color--surface); padding: 16px 18px; }
.rc-rtp .k { font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.rc-rtp .v {
	font-family: var(--wp--preset--font-family--mono); font-size: 21px; line-height: 1.25;
	color: var(--wp--preset--color--gold); margin-top: 5px;
}

/* ---- Signal / predictor warning callout ---------------------------------- */
.rc-alert {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 20px 22px; border-radius: 12px;
	background: rgba(179, 38, 30, 0.084);
	border: 1px solid rgba(179, 38, 30, 0.336);
	border-left-width: 3px;
}
.rc-alert__icon {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
	display: flex; align-items: center; justify-content: center; font-size: 19px;
	background: rgba(179, 38, 30, 0.168); color: #B3261E;
}
.rc-alert h3 {
	font-size: 16px; margin: 0 0 6px; color: #9F1F18;
	letter-spacing: .4px;
}
.rc-alert p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--body); }

/* ---- Demo vs real comparison strip --------------------------------------- */
.rc-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rc-vs > div {
	padding: 20px 20px 18px; border-radius: 12px;
	background: var(--wp--preset--gradient--card); border: 1px solid rgba(36, 16, 20, 0.112);
}
.rc-vs > div.is-real { border-color: rgba(123, 34, 51, 0.435); }
.rc-vs h3 { font-size: 15px; margin: 0 0 12px; letter-spacing: .6px; }
.rc-vs ul { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 9px; }
.rc-vs li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--body); }
.rc-vs li::before { content: "\2013"; position: absolute; left: 4px; color: var(--wp--preset--color--muted); }
.rc-vs li.y::before { content: "\2713"; color: var(--wp--preset--color--green); }
.rc-vs li.n::before { content: "\2715"; color: #B3261E; }
@media (max-width: 600px) { .rc-vs { grid-template-columns: 1fr; } }

/* ---- Provider strip (Spribe & friends — text marks, no borrowed logos) ---- */
.rc-provider {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	height: 62px; border-radius: 10px;
	background: var(--wp--preset--color--surface); border: 1px solid rgba(36, 16, 20, 0.112);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.rc-provider small {
	font-family: var(--wp--preset--font-family--mono); font-size: 11px;
	letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--muted);
}

/* Numeric emphasis: any mono run reads as instrument data. */
.rc-num { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--gold); }

/* Eyebrows pick up the mono voice on this domain. */
.rc-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400; letter-spacing: 2.6px; font-size: 12.5px;
	color: var(--wp--preset--color--gold);
}

/* Skeleton placeholder for the heavier grids (no images shipped). */
@keyframes rc-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.rc-skeleton {
	border-radius: 12px; min-height: 120px;
	background: linear-gradient(90deg, #FFFFFF 0%, #33215C 50%, #FFFFFF 100%);
	background-size: 840px 100%;
	animation: rc-shimmer 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .rc-skeleton { animation: none; } }
/* Aspect-ratio variants so a skeleton can reserve the exact box of the block it
   stands in for (no layout shift when the real content lands). */
.rc-skeleton--card { aspect-ratio: 3 / 4; min-height: 0; }
.rc-skeleton--wide { aspect-ratio: 16 / 9; min-height: 0; }
.rc-skeleton--row  { min-height: 64px; }


/* ===========================================================================
   UX / UI / ACCESSIBILITY PASS — v2.2.0  (royale-slots.net)
   Appended last on purpose: every rule below is a deliberate override of the
   layers above. Identity (Royal Purple & Champagne, Anton / Nunito Sans /
   DM Mono) is preserved — only rhythm, reach and contrast change.
   =========================================================================== */

/* ---- A. Fragment navigation must clear the sticky header ------------------
   /strategiya/#siqnal, /#faq, /mesuliyyetli-oyun/#istisna and the skip link all
   landed underneath the 108px sticky header. scroll-padding on the scroll
   container fixes every one of them, including the skip link. */
html {
	scroll-padding-top: 124px;
}
@media (max-width: 600px) {
	html { scroll-padding-top: 88px; }
}

/* ---- B. Root gutter: 24px is too much on a 360px screen ------------------
   theme.json sets a single 24px root padding. Narrowing it to 16px below 600px
   gives the tables, grids and `minmax()` tracks 32px more usable width, which is
   what stops the densest inline grids from clipping. */
@media (max-width: 600px) {
	body {
		--wp--style--root--padding-right: 16px;
		--wp--style--root--padding-left: 16px;
	}
}

/* ---- C. Skip link ------------------------------------------------------- */
/* Core adds a second skip link (#wp-skip-link) pointing at the same #rc-main.
   Two identical first tab stops is noise — keep the theme's styled one. */
#wp-skip-link {
	display: none !important;
}
/* The theme's own link killed its outline; give it a ring for the moment it
   slides in, and pull the ring inside so the rounded corners don't clip it. */
.rc-skip-link:focus,
.rc-skip-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

/* ---- D. Interior page header --------------------------------------------
   The six interior pages use page-wide.html, so their breadcrumb + H1 + eyebrow
   + lead are bare top-level blocks: they used to butt straight into the sticky
   header with 0px of air, and `.rc-hero:has(.rc-breadcrumb)` never matched.
   These rules build the page header out of what is actually in the markup. */
.entry-content {
	position: relative;
}
.entry-content > .rc-breadcrumb:first-child::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -56px;
	transform: translateX(-50%);
	width: min(1180px, 132vw);
	height: 430px;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(640px 300px at 26% 22%, rgba(176, 141, 60, 0.172), transparent 62%),
		radial-gradient(430px 220px at 6% 6%, rgba(123, 34, 51, 0.116), transparent 60%);
}
.entry-content > .rc-breadcrumb:first-child {
	margin-bottom: 16px;
}
.entry-content > .rc-breadcrumb + h1 {
	margin-top: 0;
}

/* On these pages the eyebrow sits *after* the H1, so it reads as a kicker.
   Give it the flight-trail tick so it looks authored rather than misplaced. */
h1 + .rc-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	margin-bottom: 0;
}
h1 + .rc-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), rgba(123, 34, 51, 0));
}
h1 + .rc-eyebrow + .rc-lead {
	margin-top: 14px;
}

/* ---- E. Vertical rhythm + prose measure ---------------------------------
   blockGap is a flat 24px, so an H2 sat as close to the paragraph above it as
   two paragraphs sat to each other. Section heads now get real separation, and
   long Azerbaijani prose is capped at ~72 characters instead of running the full
   820px content width at 1440. */
.entry-content > h2,
.rc-section > h2 {
	margin-top: clamp(44px, 5vw, 68px);
}
.entry-content > h3,
.rc-section > h3 {
	margin-top: clamp(28px, 3vw, 38px);
}
.entry-content > .rc-breadcrumb + h1,
.entry-content > h2:first-child,
.rc-section > h2:first-child {
	margin-top: 0;
}
/* Flight-trail rule under every section head: identity marker + rhythm cue. */
.entry-content > h2::after,
.rc-section > h2::after,
.rc-cta > h2::after {
	content: "";
	display: block;
	width: 46px;
	height: 2px;
	margin-top: 14px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold) 0%, rgba(176, 141, 60, 0.632) 68%, rgba(176, 141, 60, 0) 100%);
}
.rc-cta h2::after,
h2.has-text-align-center::after {
	margin-left: auto;
	margin-right: auto;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.rc-section > p,
.rc-section > ul,
.rc-section > ol {
	max-width: 62ch;
}
.entry-content > p.has-text-align-center,
.rc-section > p.has-text-align-center,
.rc-cta p {
	/* Match the content column exactly (NOT `none`: core sets max-width in the same
	   low-specificity :where() rule, so `none` here made prose full-bleed while the
	   headings stayed at 720px — the same misalignment mirrored). */
	max-width: var(--wp--style--global--content-size, 720px);
}
/* The lead already had its own 660px cap; keep whichever is narrower. */
.rc-lead {
	max-width: min(660px, 62ch);
}

/* ---- F. Legibility: no prose below 15px --------------------------------- */
.rc-feature__text,
.rc-step__text,
.rc-alert p {
	font-size: 15px;
	line-height: 1.6;
}
.rc-vs li,
.rc-18__text {
	font-size: 14.5px;
}
.rc-note {
	font-size: 14px;
}
.rc-breadcrumb {
	font-size: 13px;
}
.rc-footer a {
	font-size: 14px;
}
.rc-instruments {
	font-size: 12px;
}

/* ---- G. Tap targets: 44px everywhere, not just under 600px --------------
   WCAG 2.5.5 / 2.5.8. Inline links inside a sentence are exempt and are left
   alone; every standalone control below was under 44px. */
a,
button,
summary,
.wp-block-button__link {
	touch-action: manipulation;
}
.rc-brand {
	min-height: 44px;
}
.rc-nav .wp-block-navigation-item__content {
	min-height: 44px;
	display: flex;
	align-items: center;
}
.rc-header .wp-block-button__link,
.rc-chips .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Hamburger + overlay close button were 24px icon buttons. */
.rc-nav .wp-block-navigation__responsive-container-open,
.rc-nav .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--contrast);
	border-radius: 9px;
}
/* Overlay menu: core forces `padding:0` on the links at (0,4,0) specificity, so
   the burger menu inherited 14px links with no vertical reach. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .rc-nav .wp-block-navigation-item__content {
	font-size: 19px;
	font-weight: 600;
	padding: 11px 4px;
	min-height: 48px;
	width: 100%;
}
/* Breadcrumb link was an 18px-tall inline target: pad the hit area out to 44px
   and pull it back with negative margin so the line box does not move. */
.rc-breadcrumb a {
	display: inline-block;
	/* Grow the hit area to 44px tall without moving the text: the extra padding is
	   cancelled by an equal negative margin, and the left edge is left untouched so
	   the crumb still lines up with the H1 below it. */
	padding: 12px 8px 12px 0;
	margin: -12px -8px -12px 0;
}
.rc-footer .rc-footer__links {
	gap: 2px;
}
.rc-footer .rc-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
/* 404 template: search field + pagination controls. */
.wp-block-search__input,
.wp-block-search__button {
	min-height: 44px;
}
.wp-block-search__input {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(123, 34, 51, 0.319);
	color: var(--wp--preset--color--contrast);
	border-radius: 8px;
	padding: 0 14px;
}
.wp-block-search__input::placeholder {
	/* muted #6B565C is 7.3:1 on surface — a placeholder, never body copy. */
	color: var(--wp--preset--color--muted);
	opacity: 1;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border-radius: 8px;
}
.wp-block-query-pagination .page-numbers.current {
	background: rgba(123, 34, 51, 0.174);
	color: var(--wp--preset--color--gold);
}

/* ---- H. Focus rings that are actually visible ---------------------------
   `.rc-faq` and `.rc-game` clip their children (overflow:hidden), so a ring with
   a +3px offset was cropped away. Draw those two inside the element instead. */
.rc-faq > summary:focus-visible {
	outline-offset: -4px;
}
.rc-game .rc-game__play:focus-visible,
.rc-post:focus-visible {
	outline-offset: 2px;
}

/* ---- I. Complete the state matrix (hover / focus / active / disabled) ---- */
.wp-block-button__link:active,
.rc-store:active,
.rc-game__play:active,
.rc-quicklink:active,
.rc-sticky a:active {
	transform: translateY(1px);
}
.rc-quicklink:focus-visible,
.rc-quicklink:focus-within {
	border-color: rgba(123, 34, 51, 0.58);
}
.rc-game:focus-within,
.rc-post:focus-visible {
	border-color: rgba(123, 34, 51, 0.507);
}
.rc-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--contrast);
	background: rgba(123, 34, 51, 0.145);
}
.rc-faq > summary:hover {
	background: rgba(123, 34, 51, 0.065);
}
.rc-faq > summary:hover::after,
.rc-faq > summary:focus-visible::after {
	background: rgba(123, 34, 51, 0.319);
	color: var(--wp--preset--color--gold-soft);
}
.rc-faq[open] > summary {
	border-bottom: var(--rc-hairline);
}
.rc-footer a:focus-visible,
.rc-breadcrumb a:hover,
.rc-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--gold);
}
button:disabled,
.wp-block-button__link[aria-disabled="true"],
.wp-block-button__link[disabled] {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
	filter: grayscale(.35);
	pointer-events: none;
}

/* ---- J. Emoji are not an icon system -----------------------------------
   Page markup ships decorative emoji in `.rc-quicklink__icon`; they render as
   inconsistent colour glyphs and read as a template. Swapped for a champagne
   reel-slot tile (three bars = the slot motif of this domain), so the icon
   system reinforces the identity. Purely CSS — page markup is untouched. */
.rc-quicklink__icon {
	font-size: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	background: rgba(123, 34, 51, 0.131);
	border: 1px solid rgba(123, 34, 51, 0.348);
	transition: background .18s ease, border-color .18s ease;
}
.rc-quicklink__icon::before,
.rc-quicklink__icon::after {
	content: "";
	width: 4px;
	height: 15px;
	border-radius: 2px;
	background: var(--wp--preset--color--gold);
	box-shadow: 7px 0 0 0 var(--wp--preset--color--gold-deep);
}
.rc-quicklink__icon::after {
	height: 9px;
	box-shadow: none;
	opacity: .55;
	margin-left: 7px;
}
.rc-quicklink:hover .rc-quicklink__icon,
.rc-quicklink:focus-visible .rc-quicklink__icon {
	background: rgba(123, 34, 51, 0.232);
	border-color: rgba(123, 34, 51, 0.609);
}
/* The alert callout's ⚠ comes from page markup — force text presentation so it
   inherits the crash-red tint rather than becoming a colour emoji. */
.rc-alert__icon {
	font-variant-emoji: text;
}
/* ---- J2. Two inherited rules carried latent contrast failures ------------
   Neither is used by the seven pages that ship today, but both are landmines for
   whoever reuses this stylesheet: white ink on the cyan trail gradient is ~2.5:1
   and white on the blue avatar gradient is ~2.5–6.5:1 depending on the stop. */
.rc-brand__num {
	color: var(--wp--preset--color--ink);
}
.rc-avatar {
	background: rgba(123, 34, 51, 0.203);
	border: 1px solid rgba(123, 34, 51, 0.406);
	color: var(--wp--preset--color--gold);
}

/* Footer age chip: was "🔞 18+" (emoji as an icon). Now a typographic cyan chip. */
.rc-chip--age {
	color: var(--wp--preset--color--gold);
	background: rgba(123, 34, 51, 0.102);
	border-color: rgba(123, 34, 51, 0.406);
	font-weight: 700;
	letter-spacing: .4px;
}

/* ---- K. Tables: nested scrollers + a scroll affordance ------------------
   `.rc-table-wrap` and `.rc-table` were both scroll containers; the inner one
   always wins, so the outer was dead weight. Keep one scroller and hint at it. */
.rc-table-wrap {
	position: relative;
	overflow: visible;
}
.rc-table:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold-soft);
	outline-offset: 2px;
}
@media (max-width: 600px) {
	/* Below 600px every table (min-width 520–560px) definitely overflows, so the
	   fade is always truthful. */
	.rc-table-wrap::after {
		content: "";
		position: absolute;
		top: 0;
		right: -1px;
		bottom: 0;
		width: 34px;
		pointer-events: none;
		background: linear-gradient(to left, var(--wp--preset--color--base), rgba(26, 16, 48, 0));
	}
}

/* ---- L. Header: collapse the nav before it runs out of room -------------
   Core only swaps in the hamburger below 600px, but the four AZ labels plus the
   brand and the two CTAs need ~830px. Between 600 and 900 the <ul> silently
   wrapped to a second row and doubled the header height. Move the breakpoint. */
@media (min-width: 600px) and (max-width: 899px) {
	.rc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.rc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.rc-nav {
		order: 3;
		margin-left: auto;
	}
	.rc-header__actions {
		order: 4;
		margin-left: 0;
	}
}

/* ---- M. Small-screen layout fixes -------------------------------------- */
@media (max-width: 600px) {
	/* "10.00x+" at 22px mono overflowed a 3-up 96px track: go 2-up instead. */
	.rc-mult {
		grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	}
	/* The static AZ marker is decorative and repeated in the footer — reclaim the
	   space in a nowrap header instead of risking an overflow. */
	.rc-header__actions .rc-langtag {
		display: none;
	}
	.rc-18 {
		gap: 12px;
		padding: 16px 16px;
	}
	.rc-18__text {
		font-size: 14px;
	}
	.rc-alert {
		padding: 16px 16px;
		gap: 12px;
	}
	.rc-offer__row,
	.rc-compare__row {
		/* long AZ labels + value on one 328px line: let the pair wrap. */
		flex-wrap: wrap;
	}
	/* `.rc-rtp` clips its children, so "Provably fair" at 21px mono was being cut
	   off in a 128px cell at 360px. Same guard for the stat tiles ("20:00–21:00"). */
	.rc-rtp .v {
		font-size: 17px;
	}
	.rc-stat-tile .v {
		font-size: 19px;
	}
	.rc-rtp .v,
	.rc-stat-tile .v,
	.rc-mult .x {
		line-height: 1.3;
		overflow-wrap: anywhere;
	}
	.entry-content > .rc-breadcrumb:first-child::after {
		height: 340px;
	}
}

/* ---- N. Reduced motion: finish the job --------------------------------- */
@media (prefers-reduced-motion: reduce) {
	/* The global block above zeroes durations; also stop the two decorative
	   translate effects from moving at all and drop the blur work. */
	.rc-quicklink:hover,
	.rc-game:hover,
	.rc-post:hover,
	.wp-block-button__link:active,
	.rc-store:active,
	.rc-game__play:active,
	.rc-quicklink:active,
	.rc-sticky a:active {
		transform: none !important;
	}
	.rc-header {
		backdrop-filter: none;
	}
	html {
		scroll-behavior: auto !important;
	}
}

/* ---- O. Forced-colors / high-contrast safety net ----------------------- */
@media (forced-colors: active) {
	.rc-card, .rc-card-raised, .rc-quicklink, .rc-game, .rc-feature, .rc-step,
	.rc-faq, .rc-flight, .rc-offer, .rc-cta, .rc-alert, .rc-18, .rc-stat-tile {
		border: 1px solid CanvasText;
	}
	a:focus-visible, button:focus-visible, summary:focus-visible {
		outline: 3px solid Highlight;
	}
}

/* ---- Item/game card grid ------------------------------------------------
   Pages author the grid wrapper as <div class="rc-games"> inside wp:html; own
   the layout here so every listing page shares one responsive track instead of
   repeating an inline grid declaration (and so it can be tuned in one place). */
.rc-games {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
@media (max-width: 480px) {
	.rc-games {
		grid-template-columns: 1fr;
	}
}

/* ---- Tables authored as <div class="rc-table-wrap"><table class="rc-table"> ---
   The rules inherited above assume the sibling site's shape, where the SCROLLER is
   a <figure class="wp-block-table rc-table"> wrapping a plain <table>. Every page
   on this domain authors the table inside a wp:html block instead, so `.rc-table`
   lands on the <table> element itself — where `display:block` would destroy the
   table layout and `overflow-x` does nothing. Own both shapes here so page markup
   needs no inline style crutches. */
.rc-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
table.rc-table {
	display: table;
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	overflow: visible;
}


/* ===========================================================================
   SLOT-SPECIALIST COMPONENTS — royale-slots.net
   Reel strip, provider filter rail, RTP meter, jackpot tiers, payout grid and
   the demo callout. Pure CSS (no JS) so every money block is server-rendered
   HTML and CLS stays at 0.
   =========================================================================== */

/* ---- Reel strip: the signature hero ornament ------------------------------
   Three vertical "reels" of champagne symbols behind a soft amethyst wash.
   Decorative only (aria-hidden in the markup) and it reserves its own box, so
   it can never shift the hero copy. */
.rc-reels {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 16px;
	aspect-ratio: 4 / 3;
	border-radius: 22px;
	background:
		radial-gradient(520px 260px at 82% 4%, rgba(176, 141, 60, 0.299), transparent 62%),
		var(--wp--preset--gradient--card-raised);
	border: 1px solid rgba(123, 34, 51, 0.319);
	box-shadow: var(--wp--preset--shadow--card);
}
.rc-reels__reel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	border-radius: 14px;
	background: rgba(70, 24, 34, 0.154);
	border: 1px solid rgba(123, 34, 51, 0.174);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(20px, 4.2vw, 30px);
	line-height: 1;
	color: var(--wp--preset--color--gold);
	letter-spacing: 1px;
}
.rc-reels__reel span { opacity: .38; }
.rc-reels__reel span.is-hit { opacity: 1; text-shadow: 0 0 22px rgba(123, 34, 51, 0.797); }
.rc-reels__line {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50%;
	height: 2px;
	transform: translateY(-1px);
	background: linear-gradient(90deg, rgba(123, 34, 51, 0), var(--wp--preset--color--gold) 22%, var(--wp--preset--color--gold) 78%, rgba(123, 34, 51, 0));
	opacity: .8;
}
.rc-reels__tag {
	position: absolute;
	left: 16px;
	bottom: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: .6px;
	color: var(--wp--preset--color--dim);
}

/* ---- Provider / genre filter rail ---------------------------------------
   A real horizontal scroller (not JS tabs): on 360px it swipes, on desktop it
   wraps. Each chip is a link to the section it filters, so it works with JS off. */
.rc-filter {
	display: flex;
	gap: 9px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding: 4px 0 10px;
	margin: 0;
	list-style: none;
}
.rc-filter li { flex: 0 0 auto; }
.rc-filter a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	background: rgba(123, 34, 51, 0.072);
	border: 1px solid rgba(123, 34, 51, 0.261);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--wp--preset--color--dim);
	text-decoration: none;
	white-space: nowrap;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.rc-filter a:hover,
.rc-filter a:focus-visible {
	background: rgba(123, 34, 51, 0.203);
	border-color: rgba(123, 34, 51, 0.667);
	color: var(--wp--preset--color--gold);
}
.rc-filter a[aria-current="true"] {
	background: var(--wp--preset--gradient--gold);
	border-color: transparent;
	color: var(--wp--preset--color--ink);
}
@media (min-width: 782px) { .rc-filter { flex-wrap: wrap; overflow: visible; } }

/* ---- Game tiles: portrait, champagne RTP badge --------------------------- */
.rc-game { border-radius: 18px; }
.rc-game__rtp {
	position: absolute;
	right: 9px;
	bottom: 9px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(70, 24, 34, 0.22);
	border: 1px solid rgba(123, 34, 51, 0.493);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	color: var(--wp--preset--color--gold);
}
/* Card art with no raster image: a reel-band gradient keeps the 3:4 box filled
   and palette-locked instead of shipping an empty grey well. */
.rc-game__media--css {
	background:
		linear-gradient(115deg, rgba(123, 34, 51, 0.232), transparent 58%),
		repeating-linear-gradient(90deg, rgba(36, 16, 20, 0.072) 0 2px, transparent 2px 26px),
		var(--wp--preset--gradient--card-raised);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	color: rgba(123, 34, 51, 0.797);
	letter-spacing: 2px;
}

/* ---- RTP meter: the number AND a bar, so the figure is scannable --------- */
.rc-rtpbar { display: grid; gap: 12px; margin: 18px 0; }
.rc-rtpbar__row {
	display: grid;
	grid-template-columns: minmax(120px, 1.4fr) minmax(90px, 3fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--wp--preset--gradient--card);
	border: 1px solid rgba(123, 34, 51, 0.174);
}
.rc-rtpbar__name { font-size: 14.5px; font-weight: 700; color: var(--wp--preset--color--contrast); }
.rc-rtpbar__track {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: rgba(36, 16, 20, 0.112);
	overflow: hidden;
}
.rc-rtpbar__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 999px;
	background: var(--wp--preset--gradient--gold);
}
.rc-rtpbar__val {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}
@media (max-width: 600px) {
	.rc-rtpbar__row { grid-template-columns: 1fr auto; }
	.rc-rtpbar__track { grid-column: 1 / -1; }
}

/* ---- Jackpot tiers ------------------------------------------------------
   Tier NAMES and how the pool grows — deliberately NOT a live ticker: this site
   has no feed, and a fake counter would be a fabricated figure. */
.rc-jackpot {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.rc-jackpot li {
	padding: 18px 16px;
	border-radius: 16px;
	text-align: center;
	background: var(--wp--preset--gradient--card);
	border: 1px solid rgba(176, 141, 60, 0.253);
}
.rc-jackpot .t {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--purple-soft);
}
.rc-jackpot .r {
	display: block;
	margin-top: 9px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 17px;
	color: var(--wp--preset--color--gold);
}
.rc-jackpot .d { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--muted); }

/* ---- Demo callout ------------------------------------------------------- */
.rc-demo {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 22px 24px;
	border-radius: 18px;
	background:
		radial-gradient(460px 200px at 92% 0%, rgba(176, 141, 60, 0.23), transparent 64%),
		var(--wp--preset--gradient--card-raised);
	border: 1px solid rgba(123, 34, 51, 0.319);
}
.rc-demo__badge {
	flex: 0 0 auto;
	min-width: 62px;
	padding: 10px 12px;
	border-radius: 14px;
	text-align: center;
	background: rgba(123, 34, 51, 0.174);
	border: 1px solid rgba(123, 34, 51, 0.435);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	color: var(--wp--preset--color--gold);
}
.rc-demo p { margin: 0; flex: 1 1 260px; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--body); }

/* ---- Payout grid (keno hit table / plinko rows) ------------------------- */
.rc-payout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 8px;
	list-style: none;
	padding-left: 0;
	margin: 16px 0;
}
.rc-payout li {
	padding: 12px 8px;
	border-radius: 12px;
	text-align: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(36, 16, 20, 0.096);
}
.rc-payout .h {
	display: block;
	font-size: 11.5px;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.rc-payout .x {
	display: block;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 17px;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	overflow-wrap: anywhere;
}
.rc-payout li.is-top { border-color: rgba(123, 34, 51, 0.609); }
.rc-payout li.is-top .x { color: var(--wp--preset--color--gold); }

/* ---- Provider mark: text-only, never a borrowed logo file --------------- */
.rc-provider { border-radius: 14px; height: 66px; letter-spacing: 1.6px; }

/* ---- Section heads: swap the sibling's trail rule for a reel tick ------- */
.entry-content > h2::after,
.rc-section > h2::after,
.rc-cta > h2::after {
	width: 54px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold) 0%, rgba(176, 141, 60, 0.805) 62%, rgba(176, 141, 60, 0) 100%);
}
h1 + .rc-eyebrow::before {
	background: linear-gradient(90deg, var(--wp--preset--color--gold), rgba(123, 34, 51, 0));
}

/* ---- Ambient wash: purple-dominant (the sibling's was blue-dominant) ---- */
.wp-site-blocks::before {
	background:
		radial-gradient(1100px 560px at 84% -10%, rgba(176, 141, 60, 0.253), transparent 62%),
		radial-gradient(860px 480px at 8% 2%, rgba(123, 34, 51, 0.102), transparent 58%);
}

/* ---- Skeletons re-based on the purple surfaces ------------------------- */
.rc-skeleton {
	background: linear-gradient(90deg, #FFFFFF 0%, #33215C 50%, #FFFFFF 100%);
	background-size: 840px 100%;
}

/* ---- Pill buttons need slightly tighter header padding ----------------- */
.rc-header .wp-block-button__link { padding: 11px 20px; font-size: 14px; }
.rc-game__play { border-radius: 999px; }
.rc-chips .wp-block-button__link { border-radius: 999px; }

/* ---- Trust rail sits ABOVE the brand row on this domain (sibling-distinct) --
   The inherited rule gave it a top border, which read as a stray hairline under
   the viewport edge. Flip it to a bottom border and drop the rounded gutter. */
.rc-header .rc-instruments {
	border-top: 0;
	border-bottom: 1px solid rgba(123, 34, 51, 0.174);
	padding: 7px 24px;
	justify-content: flex-start;
}
@media (max-width: 600px) {
	.rc-header .rc-instruments { padding: 6px 16px; }
}

/* ---- Per-page last-updated line (inc/chrome.php appends it to the content) --- */
.rc-updated {
	margin-top: clamp(34px, 4vw, 52px);
	padding-top: 16px;
	border-top: 1px solid rgba(123, 34, 51, 0.203);
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.rc-updated .rc-num { color: var(--wp--preset--color--gold); }

/* ---- UX pass: box-sizing for the raw (wp:html) components ------------------
   Core blocks get border-box from the block library, but every `.rc-*` element is
   hand-authored inside a wp:html block and inherited content-box. `.rc-instruments`
   and `.rc-payrail` combine `width:100%` with horizontal padding, so each one was
   48px wider than the viewport and pushed the whole document into a sideways scroll
   at 360 / 768 / 1024 (measured, not theoretical). Scoped to rc- classes so core
   block metrics are untouched. */
[class*="rc-"],
[class*="rc-"]::before,
[class*="rc-"]::after {
	box-sizing: border-box;
}

/* ---- UX pass: the interior-page glow must not widen the document ------------
   The inherited decorative wash behind the first breadcrumb was `width: min(1180px,
   132vw)` centred on the content column. At 360 / 768 / 1024 that put its edges
   58–123px past the viewport, so documentElement.scrollWidth exceeded the viewport
   on every interior page (measured with Chrome at all four breakpoints). `body`
   has `overflow-x: clip`, which hides the scrollbar — but the page is still wider
   than the screen, and mobile engines that ignore clip on <body> will pan.
   Constrain it to the content box and grow the gradients instead, so the effect is
   unchanged and the document is exactly viewport-wide. */
.entry-content > .rc-breadcrumb:first-child::after {
	left: 0;
	transform: none;
	width: 100%;
	height: 460px;
	top: -64px;
	background:
		radial-gradient(700px 330px at 24% 20%, rgba(176, 141, 60, 0.196), transparent 64%),
		radial-gradient(470px 240px at 4% 4%, rgba(123, 34, 51, 0.116), transparent 62%);
}
@media (max-width: 600px) {
	.entry-content > .rc-breadcrumb:first-child::after {
		height: 360px;
	}
}

/* ---- UX pass: one left edge for the whole text column ----------------------
   The inherited rhythm layer capped top-level prose at 62ch while headings kept the
   full content width. WP's constrained layout centres children with
   `margin-inline: auto !important`, so the narrower paragraphs were pushed ~64px
   further right than the H2 above them — three left edges on one screen (root
   gutter, heading, paragraph), which reads as a broken indent rather than a measure.
   The !important makes the margins unwinnable, so the measure is governed by the
   content column instead: theme.json's contentSize is now 720px (~72 characters of
   Nunito Sans at 18px, a textbook measure) and the per-element cap is dropped. Every
   top-level block — heading, paragraph, list — now shares one left edge. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.rc-section > p,
.rc-section > ul,
.rc-section > ol {
	/* Match the content column exactly (NOT `none`: core sets max-width in the same
	   low-specificity :where() rule, so `none` here made prose full-bleed while the
	   headings stayed at 720px — the same misalignment mirrored). */
	max-width: var(--wp--style--global--content-size, 720px);
}

/* ---- UX pass: game-tile density -------------------------------------------
   Two problems with the inherited tile: a 3:4 cover is sized for real game art, and
   this domain ships CSS reel-band art instead — so each card carried ~300px of empty
   gradient. And the grid collapsed to ONE column below 480px, which turned a 12-game
   listing into ~5 600px of vertical scroll on a 360px screen. A 4:5 cover plus a
   real 2-up mobile grid halves the scroll depth while keeping the tap target and the
   two-line title clamp intact. */
.rc-game__media {
	aspect-ratio: 4 / 5;
}
.rc-games {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (max-width: 480px) {
	.rc-games {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.rc-game__body { padding: 11px 11px 12px; }
	.rc-game__media--css { font-size: 24px; }
	.rc-game__rtp { right: 7px; bottom: 7px; padding: 3px 7px; font-size: 11px; }
	/* At ~150px the pill label would wrap; keep it one line and full width. */
	.rc-game__play { width: 100%; padding: 10px 8px; font-size: 12px; }
}

/* ---- UX pass: game cards keep their CTA on one baseline --------------------
   `.rc-game__title` clamps to two lines, so a card whose name wraps ("Wanted Dead or
   a Wild") pushed its "Demo aç" pill lower than its row-mates — the grid stretches the
   cards to equal height but the button floated wherever the text ended. Make the body
   a flex column and push the CTA to the bottom so every button in a row lines up. */
.rc-game {
	display: flex;
	flex-direction: column;
}
.rc-game__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.rc-game__meta {
	margin-bottom: 2px;
}
.rc-game__play {
	margin-top: auto;
}


/* =========================================================================
   LIGHT-THEME DELTAS (royale-slot.com)
   The inherited layer was authored for a dark canvas: it leaned on glows,
   translucent white hairlines and heavy shadows to separate panels. On cream
   paper the separation has to come from borders and ink weight instead, and
   the decorative washes have to be dialled right back or the page looks
   dirty. Everything below overrides the retinted inheritance.
   ========================================================================= */

/* Paper canvas: a barely-there warm wash instead of two coloured glows. */
.wp-site-blocks::before {
	background:
		radial-gradient(1100px 520px at 82% -10%, rgba(123, 34, 51, .055), transparent 62%),
		radial-gradient(820px 460px at 8% 2%, rgba(176, 141, 60, .05), transparent 58%);
}
.entry-content > .rc-breadcrumb:first-child::after {
	background:
		radial-gradient(700px 330px at 24% 20%, rgba(123, 34, 51, .06), transparent 66%),
		radial-gradient(470px 240px at 4% 4%, rgba(176, 141, 60, .05), transparent 64%);
}

/* Panels sit on paper: visible warm border + a whisper of lift, no glow. */
:root {
	--rc-card-border: 1px solid rgba(123, 34, 51, .16);
	--rc-card-border-strong: 1px solid rgba(123, 34, 51, .26);
	--rc-hairline: 1px solid rgba(36, 16, 20, .10);
}
.rc-card,
.rc-feature,
.rc-step,
.rc-faq,
.rc-game,
.rc-post,
.rc-quicklink {
	box-shadow: 0 2px 0 rgba(123, 34, 51, .05), 0 12px 30px rgba(70, 24, 34, .055);
}
.rc-card-raised,
.rc-compare {
	box-shadow: 0 3px 0 rgba(123, 34, 51, .07), 0 18px 44px rgba(70, 24, 34, .085);
}

/* Wax-seal buttons: cream ink on burgundy, squarer than the network norm. */
.wp-block-button:not(.rc-btn-outline) > .wp-block-button__link {
	background: var(--wp--preset--gradient--gold);
	color: var(--wp--preset--color--ink) !important;
	border-radius: 10px;
	box-shadow: 0 2px 0 #4B1420;
}
.wp-block-button:not(.rc-btn-outline) > .wp-block-button__link:hover {
	filter: none;
	background: var(--wp--preset--gradient--gold-bright);
}
.wp-block-button:not(.rc-btn-outline) > .wp-block-button__link:active {
	box-shadow: 0 0 0 #4B1420;
}
.wp-block-button.rc-btn-outline .wp-block-button__link,
.wp-block-button__link.rc-btn-outline {
	background: #FFFFFF !important;
	color: var(--wp--preset--color--gold) !important;
	border: 1.5px solid rgba(123, 34, 51, .38);
	box-shadow: 0 2px 0 rgba(123, 34, 51, .10);
}
.wp-block-button.rc-btn-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--gold);
	background: #FDF4F2 !important;
	color: var(--wp--preset--color--gold-deep) !important;
}
.rc-game__play,
.rc-chips .wp-block-button .wp-block-button__link,
.rc-store {
	border-radius: 10px;
}

/* Figures: antique-gold mono. Never used for body copy — only numbers. */
.rc-num,
.rc-stat-tile .v,
.rc-rtp .v,
.rc-updated .rc-num {
	color: var(--wp--preset--color--cyan);
}
.rc-badge {
	background: rgba(123, 34, 51, .05);
	border-color: rgba(123, 34, 51, .30);
	color: var(--wp--preset--color--gold);
}
.rc-badge::before {
	background: var(--wp--preset--color--green);
	box-shadow: none;
}

/* Headings: Kanit is a display grotesk with real weight — the inherited
   uppercase + letter-spacing treatment fights it, so keep it in mixed case
   and let the underline flourish carry the rhythm. */
.entry-content > h2::after,
.rc-section > h2::after,
.rc-cta > h2::after {
	background: linear-gradient(90deg, #7B2233, rgba(176, 141, 60, .5));
	height: 4px;
	border-radius: 2px;
}
.rc-eyebrow {
	color: var(--wp--preset--color--purple-soft);
	letter-spacing: 1.6px;
}
.rc-gold-text {
	background: linear-gradient(104deg, #7B2233 0%, #B08D3C 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #7B2233;
}

/* Header / footer on paper: hairline rules, no translucent blur stack. */
.rc-header {
	background: rgba(247, 243, 236, .94);
	border-bottom: 1px solid rgba(123, 34, 51, .16);
}
.rc-header .rc-instruments {
	background: #FFFFFF;
	border-top: 1px solid rgba(123, 34, 51, .12);
	border-bottom: 0;
}
.rc-footer {
	background: var(--wp--preset--color--base-deep);
	border-top: 2px solid rgba(123, 34, 51, .22);
}
.rc-chip {
	background: #FFFFFF;
	border: 1px solid rgba(123, 34, 51, .20);
	color: var(--wp--preset--color--body);
}
.rc-chip--age {
	background: var(--wp--preset--gradient--gold);
	color: var(--wp--preset--color--ink);
	border-color: transparent;
}

/* Reel band -> "card fan": on light stock the glowing reel strip reads as a
   smudge, so the hero motif is an inked card set instead. */
.rc-reels {
	background: #FFFFFF;
	border: 1px solid rgba(123, 34, 51, .18);
	box-shadow: 0 18px 44px rgba(70, 24, 34, .10);
}
.rc-reels__reel {
	background: #FDF7EF;
	border: 1px solid rgba(123, 34, 51, .14);
	color: var(--wp--preset--color--gold);
}
.rc-reels__reel span { opacity: .30; }
.rc-reels__reel span.is-hit {
	opacity: 1;
	text-shadow: none;
	color: var(--wp--preset--color--gold);
}
.rc-reels__line {
	background: linear-gradient(90deg, transparent, #B08D3C, transparent);
}

/* Multiplier / payout / jackpot rails: white tiles, inked values. */
.rc-mult li,
.rc-payout li,
.rc-jackpot li,
.rc-vs > div,
.rc-rtp div,
.rc-stat-tile,
.rc-provider {
	background: #FFFFFF;
}
.rc-mult .x,
.rc-payout .x { color: var(--wp--preset--color--gold); }
.rc-mult li.is-safe .x { color: var(--wp--preset--color--green-soft); }
.rc-mult li.is-risky .x { color: var(--wp--preset--color--danger); }
.rc-rtpbar__track { background: rgba(36, 16, 20, .08); }
.rc-rtpbar__fill { background: linear-gradient(90deg, #B08D3C, #7B2233); }
.rc-rtpbar__val { color: var(--wp--preset--color--cyan); }

/* Game tiles: the CSS art band is a paper-stock diamond field. */
.rc-game {
	background: #FFFFFF;
}
.rc-game__media--css {
	background:
		repeating-linear-gradient(135deg, rgba(123, 34, 51, .05) 0 12px, transparent 12px 24px),
		linear-gradient(168deg, #FDF7EF 0%, #F6ECDD 100%);
	color: var(--wp--preset--color--gold);
}
.rc-game__rtp {
	background: #FFFFFF;
	border: 1px solid rgba(123, 34, 51, .22);
	color: var(--wp--preset--color--cyan);
}
.rc-game__title { color: var(--wp--preset--color--heading); }

/* Filter chips: paper tabs with an inked active state. */
.rc-filter a {
	background: #FFFFFF;
	border: 1px solid rgba(123, 34, 51, .20);
	color: var(--wp--preset--color--body);
}
.rc-filter a[aria-current="true"] {
	background: var(--wp--preset--gradient--gold);
	border-color: transparent;
	color: var(--wp--preset--color--ink);
}
.rc-filter a:hover,
.rc-filter a:focus-visible {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold-deep);
}

/* Tables: ledger ruling instead of dark banding. */
.wp-block-table table,
.rc-table > table { background: #FFFFFF; }
.wp-block-table thead th,
.rc-table thead th {
	background: #F6ECDD;
	color: var(--wp--preset--color--heading);
	border-bottom: 2px solid rgba(123, 34, 51, .24);
}
.rc-table .rc-col-hi {
	background: rgba(123, 34, 51, .07);
	color: var(--wp--preset--color--gold);
}
.rc-table .yes { color: var(--wp--preset--color--green-soft); }
.rc-table .no { color: var(--wp--preset--color--muted); }

/* Alerts / notes / warnings on paper. */
.rc-alert,
.rc-demo,
.rc-cta,
.rc-offer,
.rc-app,
.rc-18 {
	background: var(--wp--preset--gradient--card-raised);
	border: 1px solid rgba(123, 34, 51, .20);
}
.rc-cta::after,
.rc-offer::after,
.rc-app::after {
	background: radial-gradient(620px 240px at 50% 0%, rgba(176, 141, 60, .10), transparent 66%);
}
.rc-warn li { background: #FFFFFF; }
.rc-warn li::before { color: var(--wp--preset--color--danger); }
.rc-note { border-left: 3px solid rgba(123, 34, 51, .38); }
.rc-skeleton {
	background: linear-gradient(100deg, #F3EADB 20%, #FBF5EC 42%, #F3EADB 64%);
}

/* Focus ring has to be visible against cream, not white-on-dark. */
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.rc-faq > summary:focus-visible,
.rc-game .rc-game__play:focus-visible,
.rc-quicklink:focus-visible,
.rc-filter a:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #7B2233;
	outline-offset: 2px;
}
.rc-skip-link {
	background: #7B2233;
	color: #FFF8F0;
}

/* The age gate / cookie / sticky chrome is inlined by inc/chrome.php with its
   own literals; these keep the two layers in step if either drifts. */
.rc-agegate__card,
.rc-cookie { background: #FFFFFF; }

/* UX pass: the "Populyar / Cekpot" corner tag is position:absolute, but nothing in
   the inherited chain established a containing block for it — .rc-game__media is
   relative while the card itself was not, so a tag authored as a child of .rc-game
   (or of .rc-game__meta) escaped all the way to the page box and rendered as a
   floating label in the top-left corner of the document. Make the card the
   containing block; the tag then sits on its own cover art as designed. */
.rc-game {
	position: relative;
}

/* UX pass: gradient-only fills need a flat fallback -----------------------------
   The active filter tab, the primary button and the 18+ chip all paint cream ink
   on a burgundy GRADIENT (a background-image). If the gradient is dropped — a
   forced-colors profile, a print stylesheet, an image-blocking extension, or the
   Simply Static export mangling the token — the computed background-color stays
   transparent and cream ink lands on cream paper at 1.05:1, i.e. invisible.
   Declaring the flat burgundy first keeps the worst case at 8.2:1. */
.rc-filter a[aria-current="true"],
.rc-chip--age,
.wp-block-button:not(.rc-btn-outline) > .wp-block-button__link,
.rc-agegate__yes,
.rc-cookie__row .rc-cookie__ok,
.rc-sticky a,
.rc-tag--jackpot {
	background-color: #7B2233;
}
.rc-tag--jackpot { color: #FFF8F0; }

/* The display face carries a lot of visual weight at display sizes; the inherited
   -1.2px tracking on the H1 was tuned for a condensed face and pinched the wider
   letterforms. Loosen it, and keep the fluid H1/H2 steps from colliding with the
   lead paragraph on small screens. (Still valid after the Syne → Kanit swap: Kanit
   is normal-width too, which is part of why it was picked over the condensed
   ə-carrying candidates.) */
h1 { letter-spacing: -0.6px; }
h2 { letter-spacing: -0.4px; }

/* UX pass: desktop density for the catalogue components ------------------------
   The prose column is deliberately 704px (~72 characters of Lexend at 17.5px),
   but WP's constrained layout applies that cap to EVERY direct child — including
   the 12-card game grid, the RTP meters and the wide tables. At 1440px that left
   a 3-up grid of narrow cards inside two 360px gutters while the page had room
   for five columns. Widen the data components to the wide column, but only from
   1240px up: 1180px + the 2x22px root padding = 1224px, so the widened block can
   never be the reason the document exceeds the viewport (16px of slack covers the
   classic scrollbar case). Below that breakpoint they keep the prose width. */
@media (min-width: 1240px) {
	.rc-games,
	.rc-rtpbar,
	.rc-table-wrap,
	.rc-statbox,
	.rc-filter,
	.rc-payout,
	.rc-jackpot,
	.rc-mult {
		max-width: 1180px;
	}
}

/* UX pass: shorter cover art for CSS-drawn tiles -------------------------------
   The inherited 4:5 cover was sized for real game screenshots. This domain ships
   a drawn diamond-field band instead, so four fifths of each tile was empty
   texture and a 12-game grid ran ~1.6 screens deep on desktop. A 16:11 band with
   a larger suit mark keeps the card recognisable and cuts the grid height by a
   third without touching the tap targets. */
.rc-game__media {
	aspect-ratio: 16 / 11;
}
.rc-game__media--css {
	font-size: 34px;
}
@media (max-width: 480px) {
	.rc-game__media--css { font-size: 26px; }
}

/* UX pass: long Azerbaijani headings must break, not push the page ------------
   Measured at 360px on /provayderlar/: the H1 "Royale Casino Oyun Provayderləri
   2026" needs 355px for the single word "Provayderləri" at the fluid minimum
   size, but the content box is 328px. Headings default to overflow-wrap:normal,
   so the word stuck out and documentElement.scrollWidth became 371px — an 11px
   sideways pan on every phone. Azerbaijani agglutination makes 12-16 character
   words routine here (Provayderləri, Məsuliyyətli, qeydiyyatsız), so this has to
   be a global rule rather than a per-page fix. */
h1, h2, h3, h4, h5, h6,
.rc-game__title,
.rc-feature__title,
.rc-step__title,
.rc-faq > summary,
.rc-provider,
.rc-quicklink__title {
	overflow-wrap: break-word;
	word-break: normal;
}

/* Same measurement pass: the inserted figure was 2px wider than its column.
   Only elements carrying an rc- class inherit border-box from the UX layer, and
   the <img> inside .rc-figure has no class of its own — so its width:100% was
   the CONTENT width and the 1px hairline on each side was added on top. */
.rc-figure img {
	box-sizing: border-box;
}

/* Breaking a word mid-syllable is the safety net, not the design. On a 360px
   phone the fluid H1 minimum (35px) still needs 355px for "Provayderləri", so
   step the display sizes down slightly below 400px: every heading word on this
   site then fits its column and the break above never has to fire. */
@media (max-width: 400px) {
	h1 { font-size: 30px; letter-spacing: -0.3px; }
	h2 { font-size: 25px; }
}

/* =========================================================================
   DESIGN-REVIEW PASS (ux-ui-master findings, measured on the 360/768/1024/1440
   screenshots). Each block records the defect it removes, because several of
   these look like arbitrary overrides otherwise.
   ========================================================================= */

/* 1. Phantom 22px indent on interior hero leads.
   `.rc-hero:has(.rc-breadcrumb) .rc-lead` still carried the centred margins
   from the old centred-hero design, and `.rc-lead` caps at min(660px, 62ch) —
   inside the 704px column that centred it 22px right of the H1 above it, so
   every interior page showed two left rails one line apart. */
.rc-hero:has(.rc-breadcrumb) .rc-lead {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* 2. Catalogue grid: 12 items in 5 tracks left a 2-card orphan row on every
   listing page. Widened blocks are capped at 1040px (not 1180px) and the tile
   floor raised to 258px, which yields exactly 4 columns => 3 clean rows of 4,
   and cuts the jog between the prose rail and the data rail roughly in half. */
@media (min-width: 1240px) {
	.rc-games,
	.rc-rtpbar,
	.rc-table-wrap,
	.rc-filter,
	.rc-payout,
	.rc-jackpot,
	.rc-mult {
		max-width: 1040px;
	}
	/* Fact tiles are four short key/value pairs — they never needed the wide
	   column, and at 1180px they left ~470px of dead space to the right. */
	.rc-statbox {
		max-width: 704px;
	}
}
.rc-games {
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

/* 3. `.rc-statbox` used auto-FILL, so it created ~8 tracks and populated 4.
   auto-fit collapses the empty tracks. The value slot also has to survive
   prose ("m10 · bank kartı · bank köçürməsi"), which in the 22px display face
   wrapped to five lines and stretched all four tiles: only genuine figures
   (.rc-num) keep the display treatment now. */
.rc-statbox {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rc-stat-tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.rc-stat-tile .v:not(.rc-num) {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
	letter-spacing: 0;
}

/* 4. RTP meters: label track resolved to ~330px while the longest label needs
   ~190px, so every row had a gap between name and bar. (The 0-100% domain
   problem is fixed in the markup — the fills are now plotted on a 90-100%
   scale with a printed scale note, since a 5-point spread on a 100-point axis
   is invisible.) */
.rc-rtpbar__row {
	grid-template-columns: minmax(150px, max-content) 1fr auto;
}
.rc-rtpbar__scale {
	grid-column: 1 / -1;
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--dim);
}

/* 5. Game/provider tiles read as "the image failed to load": one hatched band
   with an arbitrary card suit, identical across 12 cards AND across two
   different entity types. Replaced by a lettermark tile — the entity's initial
   in the display face on one of six deterministic burgundy/gold fields. */
.rc-game__media--css {
	background: linear-gradient(160deg, #FDF7EF 0%, #F4E9D8 100%);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 46px;
	letter-spacing: -1px;
	color: var(--wp--preset--color--gold);
}
.rc-game__media--t1 { background: linear-gradient(160deg, #FBEFEF 0%, #F1DCDC 100%); }
.rc-game__media--t2 { background: linear-gradient(160deg, #FAF3E4 0%, #EFE2C4 100%); color: var(--wp--preset--color--cyan); }
.rc-game__media--t3 { background: linear-gradient(160deg, #F7F1EC 0%, #E9DED2 100%); }
.rc-game__media--t4 { background: linear-gradient(160deg, #FDF4F5 0%, #EEDADE 100%); }
.rc-game__media--t5 { background: linear-gradient(160deg, #F6F2EA 0%, #E6E0D2 100%); color: var(--wp--preset--color--cyan); }
.rc-game__media--t6 { background: linear-gradient(160deg, #FBF0EA 0%, #EFDCCF 100%); }
@media (max-width: 480px) {
	.rc-game__media--css { font-size: 34px; }
}
/* Provider tiles get a squarer, quieter band so the two card types are
   distinguishable at a glance. */
.rc-games--providers .rc-game__media {
	aspect-ratio: 16 / 7;
}

/* 6. RTP badges held "≈97%", "99%-ə qədər" and "96.0-96.5%" in the same slot,
   so the badge row was ragged card to card. */
.rc-game__rtp {
	min-width: 7ch;
	text-align: center;
}

/* 7. Four identical quicklink icons (the universal CSS mark replaced four
   emoji with one glyph, four times). No icon reads better than four of the
   same icon; the cards work as title + sub. */
.rc-quicklink__icon {
	display: none;
}

/* 8. Hero card set: the mono caption was absolutely positioned inside the
   card grid and at 1024px it straddled two card borders. Make the ornament a
   column: cards, then the caption as a real line beneath them. The suits were
   also too faint to read as card pips. */
.rc-reels {
	display: flex;
	flex-direction: column;
	gap: 12px;
	aspect-ratio: auto;
}
.rc-reels__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.rc-reels__reel {
	aspect-ratio: 3 / 4;
	font-size: clamp(22px, 4.4vw, 32px);
}
.rc-reels__reel span { opacity: .55; }
.rc-reels__reel span.is-hit { opacity: 1; text-shadow: none; }
.rc-reels__line {
	left: 16px;
	right: 16px;
	top: 42%;
}
.rc-reels__tag {
	position: static;
	margin: 0;
	text-align: center;
}

/* 9. Provider text marks used the MONO face for prose descriptors
   ("plinko · mines · aviator"), against this theme's own rule that mono is for
   figures only — and the two faces never shared a baseline, so row heights
   went ragged across the grid. */
.rc-provider {
	flex-direction: column;
	gap: 4px;
	height: auto;
	min-height: 62px;
	padding: 12px 14px;
	text-align: center;
}
.rc-provider small {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	letter-spacing: 0;
	line-height: 1.45;
}

/* 10. Card links underlined their own description line, because the whole card
   is one <a>. Same for the nine permanently underlined footer links. */
.rc-quicklink,
.rc-quicklink__sub,
.rc-game,
.rc-game__play {
	text-decoration: none;
}
.rc-quicklink__title {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.rc-footer a {
	text-decoration: none;
}
.rc-footer a:hover,
.rc-footer a:focus-visible {
	text-decoration: underline;
}

/* 11. The mobile nav toggle rendered as two bare bars — no box, no
   affordance — next to a filled Giriş button. Give it the same paper-chip
   treatment as the other header controls. */
.rc-nav .wp-block-navigation__responsive-container-open {
	border: 1px solid rgba(123, 34, 51, .30);
	border-radius: 10px;
	background: #FFFFFF;
	padding: 8px;
}
.rc-nav .wp-block-navigation__responsive-container-open svg {
	width: 22px;
	height: 22px;
}
.rc-nav .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--wp--preset--color--gold);
	background: #FDF4F2;
}

/* 12. Interior heroes put the eyebrow under the H1 with a gold tick; the home
   hero put it above with no tick. One pattern, applied to both. */
.rc-hero .rc-eyebrow {
	display: block;
	margin-bottom: 10px;
}

/* The hero card set is a flex column now, so the payline has to be positioned
   against the CARD grid rather than the whole ornament (which includes the
   caption line beneath it). */
.rc-reels__cards {
	position: relative;
}

/* Grid track maths, measured rather than assumed --------------------------------
   `minmax(258px, 1fr)` inside the 1040px widened column fits only 3 tracks
   (4x258 + 3x14 = 1074 > 1040), so the 12-card listings still ended on a
   3-card row. 240px fits four (4x240 + 42 = 1002). */
.rc-games {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* The quick-nav and feature grids are authored as inline-styled wp:html grids
   (they have no class of their own), so they are reached by relationship and the
   track override needs !important to beat the inline style. Four quicklinks were
   laying out 3 + 1 and three feature cards 2 + 1 — an orphan on both. */
@media (min-width: 1240px) {
	div:has(> .rc-quicklink),
	div:has(> .rc-feature) {
		max-width: 1040px;
		grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)) !important;
	}
}

/* The lead paragraph was the last element off the shared left rail: measured at
   1024px it sat at x=182 while the H1, eyebrow and breadcrumb all sat at x=160,
   because `.rc-lead` caps at min(660px, 62ch) and WP's constrained layout centres
   every child with `margin-inline: auto !important` — (704-660)/2 = 22px of
   phantom indent. (The earlier `:has(.rc-breadcrumb)` fix could not apply: the
   breadcrumb is a SIBLING of the hero group, not a descendant.) Governing the
   measure with the content column instead keeps one left edge on every page. */
.rc-lead {
	max-width: var(--wp--style--global--content-size, 704px);
}

/* Contrast pass, second sweep (selectors the first probe list missed) --------
   `.rc-alert h3` carried a dark-theme pale pink (#FFC2C2 -> 1.38:1 on cream);
   it now uses the deep brick. `.rc-demo__badge` painted burgundy ink on a 17%
   burgundy wash — legible in practice but a same-hue, low-separation pairing on
   the one element that has to read as a label, so it becomes a solid chip. */
.rc-demo__badge {
	background: var(--wp--preset--gradient--gold);
	background-color: #7B2233;
	color: var(--wp--preset--color--ink);
	border-color: transparent;
}
.rc-alert__icon {
	color: #9F1F18;
}