/* =========================================================================
   Royale Canlı (royale-canli.com) — theme design layer
   Slate & Amber (light) · Playfair Display / Source Sans 3 / Fira Code
   Loaded on the front end and inside the editor canvas.
   Structure comes from core blocks; this file supplies the premium casino
   look (cards, glows, badges) and the mobile behaviour the old inline
   markup lacked.
   ========================================================================= */

:root {
	--cl-maxw: 1200px;
	--cl-card-border: 1px solid rgba(15, 23, 42, .102);
	--cl-card-border-strong: 1px solid rgba(15, 23, 42, .15);
	--cl-hairline: 1px solid rgba(15, 23, 42, .102);
}

/* ---- 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 amber/slate wash. */
.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(51, 65, 85, .16), transparent 60%),
		radial-gradient(900px 500px at 12% 4%, rgba(15, 23, 42, .07), transparent 55%);
}
.wp-site-blocks > * {
	position: relative;
	z-index: 1;
}

::selection {
	background: rgba(217, 138, 11, .3);
	color: #fff;
}

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

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

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

/* ---- Live / license badge --------------------------------------------- */
.cl-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	border-radius: 100px;
	border: 1px solid rgba(217, 138, 11, .28);
	background: rgba(15, 23, 42, .07);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .4px;
	color: var(--wp--preset--color--amber);
}
.cl-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 ------------------------------------------------------------- */
.cl-card,
.cl-card-raised {
	border-radius: 16px;
	background: var(--wp--preset--gradient--card);
	border: var(--cl-card-border);
}
.cl-card-raised {
	background: var(--wp--preset--gradient--card-raised);
	border: var(--cl-card-border-strong);
	box-shadow: var(--wp--preset--shadow--card);
}

/* ---- Buttons ----------------------------------------------------------- */
.wp-block-button.cl-btn-outline .wp-block-button__link,
.wp-block-button__link.cl-btn-outline {
	background: rgba(15, 23, 42, .05) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid rgba(217, 138, 11, .3);
	box-shadow: none;
}
.wp-block-button.cl-btn-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--amber-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(.cl-btn-outline) > .wp-block-button__link {
	background: var(--wp--preset--gradient--amber) !important;
	color: var(--wp--preset--color--ink) !important;
	border: none;
	box-shadow: var(--wp--preset--shadow--amber);
}
.wp-block-button:not(.cl-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) */
.cl-hero .wp-block-buttons .wp-block-button__link { padding: 15px 30px; font-size: 16px; }
.cl-header .wp-block-button__link { padding: 10px 16px; font-size: 14px; }
.cl-amber-text { background: linear-gradient(120deg, #96600A, #475569); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #5A6B84; }
.wp-block-separator.cl-sep { border: none; height: 1px; background: rgba(15, 23, 42, .102); opacity: 1; max-width: none; }

/* ---- Hero -------------------------------------------------------------- */
.cl-hero {
	padding-top: clamp(36px, 6vw, 64px);
}
.cl-hero__art img {
	border-radius: 20px;
	border: 1px solid rgba(15, 23, 42, .15);
	box-shadow: var(--wp--preset--shadow--soft);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}
.cl-stats {
	gap: 26px 32px;
}
.cl-stat__num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 26px;
	color: var(--wp--preset--color--amber);
	line-height: 1;
}
.cl-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. */
.cl-trustrow {
	gap: 10px;
	margin-top: 24px;
	align-items: center;
}
.cl-trust {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: 10px;
	background: rgba(15, 23, 42, .051);
	border: 1px solid rgba(15, 23, 42, .119);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
.cl-trust b { color: var(--wp--preset--color--contrast); font-weight: 700; }

/* ---- Bonus offer card -------------------------------------------------- */
.cl-offer {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	padding: 34px 30px;
	background: var(--wp--preset--gradient--card-raised);
	border: var(--cl-card-border-strong);
	box-shadow: var(--wp--preset--shadow--card);
}
.cl-offer::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 22px;
	pointer-events: none;
	background: radial-gradient(400px 200px at 80% 0%, rgba(51, 65, 85, .22), transparent 65%);
}
.cl-offer > * { position: relative; z-index: 1; }
.cl-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);
}
.cl-offer__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	padding: 9px 0;
	border-bottom: var(--cl-hairline);
}
.cl-offer__row span:first-child { color: var(--wp--preset--color--muted); }
.cl-offer__row span:last-child  { color: var(--wp--preset--color--contrast); font-weight: 700; }

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

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

/* ---- Game cards -------------------------------------------------------- */
.cl-game {
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(15, 23, 42, .085);
	transition: transform .18s ease, border-color .18s ease;
}
.cl-game:hover { transform: translateY(-4px); border-color: rgba(217, 138, 11, .3); }
.cl-game__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.cl-game__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-game__body { padding: 12px 13px; }
.cl-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;
}
.cl-game__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.cl-game__provider { font-size: 11.5px; color: var(--wp--preset--color--dim); }
.cl-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--amber); 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;
}
.cl-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 #7A1B22 is
   6.5:1. --wp--preset--color--danger stays reserved for red TEXT on graphite. */
:root { --cl-danger-deep: #7A1B22; }
.cl-tag--hot { background: var(--cl-danger-deep); color: #FFFFFF; }
.cl-tag--jackpot { background: var(--wp--preset--gradient--amber); color: var(--wp--preset--color--ink); }

/* ---- Filter chips ------------------------------------------------------ */
.cl-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(15, 23, 42, .119); box-shadow: none;
}
.cl-chips .wp-block-button.is-active .wp-block-button__link,
.cl-chips .wp-block-button:first-child .wp-block-button__link {
	background: rgba(15, 23, 42, .102) !important; color: var(--wp--preset--color--amber) !important;
	border-color: rgba(217, 138, 11, .4);
}

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

/* ---- App download ------------------------------------------------------ */
.cl-app {
	position: relative; overflow: hidden;
	border-radius: 22px; padding: clamp(28px, 4vw, 44px);
	background: var(--wp--preset--gradient--card-raised);
	border: 1px solid rgba(15, 23, 42, .136);
}
.cl-app::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(500px 300px at 90% 50%, rgba(51, 65, 85, .16), transparent 60%);
}
.cl-app > * { position: relative; z-index: 1; }
.cl-app__art img { border-radius: 18px; border: 1px solid rgba(15, 23, 42, .136); width: 100%; }
.cl-store {
	display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 11px;
	background: rgba(15, 23, 42, .085); border: 1px solid rgba(217, 138, 11, .25);
	font-weight: 700; color: var(--wp--preset--color--contrast);
}
.cl-store:hover { border-color: var(--wp--preset--color--amber); color: var(--wp--preset--color--amber-soft); }

/* ---- Payments ---------------------------------------------------------- */
.cl-pay {
	height: 64px; border-radius: 12px; background: var(--wp--preset--color--surface);
	border: 1px solid rgba(15, 23, 42, .085); display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px; color: #96600A;
}

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

/* ---- Reviews & comparison --------------------------------------------- */
.cl-review { padding: 20px 22px; border-radius: 14px; background: var(--wp--preset--gradient--card); border: var(--cl-card-border); }
.cl-avatar {
	width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
	background: var(--wp--preset--gradient--slate);
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff;
}
.cl-stars { color: var(--wp--preset--color--amber); font-size: 13px; letter-spacing: 1px; }
.cl-rating-pill {
	padding: 6px 12px; border-radius: 100px; background: rgba(51, 65, 85, .12);
	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). */
.cl-compare { padding: 28px 26px; border-radius: 18px; background: var(--wp--preset--gradient--card-raised); border: var(--cl-card-border-strong); position: sticky; top: 124px; }
.cl-compare__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 8px 0; border-bottom: var(--cl-hairline); }
.cl-compare__row span:first-child { color: var(--wp--preset--color--muted); }
.cl-compare__row span:last-child { color: var(--wp--preset--color--green-soft); font-weight: 700; }

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

/* ---- FAQ (native <details>) ------------------------------------------- */
.cl-faq { border-radius: 14px; background: var(--wp--preset--gradient--card); border: 1px solid rgba(15, 23, 42, .102); overflow: hidden; }
.cl-faq + .cl-faq { margin-top: 12px; }
.cl-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);
}
.cl-faq > summary::-webkit-details-marker { display: none; }
.cl-faq > summary::after {
	content: "+"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
	background: rgba(15, 23, 42, .102); color: var(--wp--preset--color--amber);
	display: flex; align-items: center; justify-content: center; font-size: 18px; transition: transform .2s ease;
}
.cl-faq[open] > summary::after { transform: rotate(45deg); }
.cl-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 ---------------------------------------- */
.cl-18 {
	display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-radius: 14px;
	background: rgba(51, 65, 85, .06); border: 1px solid rgba(51, 65, 85, .2);
}
.cl-18__badge {
	width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; background: rgba(51, 65, 85, .15);
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: var(--wp--preset--color--slate-soft);
}
.cl-18__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--wp--preset--color--muted); }

/* =========================================================================
   INTERIOR PAGES — shared helpers
   ========================================================================= */
.cl-breadcrumb { font-size: 12.5px; color: var(--wp--preset--color--dim); }
.cl-breadcrumb a { color: var(--wp--preset--color--muted); }
.cl-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). */
.cl-hero:has(.cl-breadcrumb) {
	position: relative;
	overflow: clip;
	text-align: center;
	padding-top: clamp(48px, 6vw, 76px);
	padding-bottom: clamp(28px, 4vw, 44px);
}
.cl-hero:has(.cl-breadcrumb)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(680px 320px at 50% 8%, rgba(51, 65, 85, .16), transparent 62%),
		radial-gradient(420px 220px at 50% 4%, rgba(15, 23, 42, .07), transparent 60%);
}
.cl-hero:has(.cl-breadcrumb) > * { position: relative; z-index: 1; }
/* comfortable measure + real centring for the lead and buttons */
.cl-hero:has(.cl-breadcrumb) .cl-lead {
	margin-left: auto;
	margin-right: auto;
}
.cl-hero:has(.cl-breadcrumb) .cl-breadcrumb,
.cl-hero:has(.cl-breadcrumb) .cl-eyebrow { text-align: center; }
.cl-hero:has(.cl-breadcrumb) .wp-block-buttons { justify-content: center; margin-top: 8px; }

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

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

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

/* CTA banner */
.cl-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(--cl-card-border-strong);
}
.cl-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 240px at 50% 0%, rgba(51, 65, 85, .16), transparent 65%); }
.cl-cta > * { position: relative; z-index: 1; }

/* comparison / payment tables (dense, kept in html blocks) */
.cl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Pages emit <figure class="wp-block-table cl-table">, so the figure itself is the
   horizontal scroll container on mobile; the inner <table> keeps the min width. */
.cl-table { display: block; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 14px; }
.cl-table > table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cl-table th, .cl-table td { padding: 12px 14px; text-align: left; border-bottom: var(--cl-hairline); }
.cl-table thead th { color: var(--wp--preset--color--heading); font-weight: 800; }
.cl-table tbody th { color: var(--wp--preset--color--muted); font-weight: 600; }
.cl-table td { color: var(--wp--preset--color--contrast); }
.cl-table .yes { color: var(--wp--preset--color--green-soft); font-weight: 700; }
.cl-table .no { color: var(--wp--preset--color--dim); }
.cl-table .cl-col-hi { background: rgba(15, 23, 42, .07); color: var(--wp--preset--color--amber); font-weight: 700; }
.cl-table .cl-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--amber); color:var(--wp--preset--color--ink); }

/* warning-sign / checklist rows */
.cl-warn { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 10px; }
.cl-warn li { position: relative; padding: 13px 14px 13px 42px; border-radius: 12px; background: var(--wp--preset--gradient--card); border: var(--cl-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 ice accent instead of rendering as a colour emoji on Win/Android. */
.cl-warn li::before { content: "\26A0\FE0E"; position: absolute; left: 14px; top: 13px; color: var(--wp--preset--color--amber); }

/* =========================================================================
   HEADER
   ========================================================================= */
.cl-header {
	position: sticky; top: 0; z-index: 50;
	backdrop-filter: blur(14px);
	background: rgba(11, 27, 51, .82);
	border-bottom: 1px solid rgba(15, 23, 42, .119);
}
.cl-header__inner {
	min-height: 74px;
	max-width: var(--cl-maxw);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
	gap: 20px;
}
.cl-instruments {
	max-width: var(--cl-maxw);
	margin: 0 auto;
	padding: 6px 24px;
	width: 100%;
}
.cl-header__actions { margin-left: auto; }
/* the nav lives in the middle and can shrink/scroll before the burger kicks in */
.cl-nav { min-width: 0; }
/* ---- Wordmark base layout -----------------------------------------------
   The brief for this domain asks for a MINIMAL wordmark whose only ornament is an
   accent dot — no crest, no monogram tile. What survives here is the flex lockup;
   the mark itself is defined in the Slate & Amber layer at the end of the file.
   Historic note: the sibling this file was forked from carried a monogram tile and a
   horizontal lockup. Superseded further down by the dot-accent wordmark this
   domain actually ships — kept only because .cl-brand and .cl-brand__lock below
   are still the live layout rules. */
.cl-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}
.cl-brand__crest {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: block;
	border-radius: 9px;
	/* brass emboss: warm rim light on the top edge, shadow under the bottom */
	box-shadow:
		inset 0 1px 0 rgba(246, 249, 253, .55),
		inset 0 -1px 0 rgba(15, 23, 42, .203),
		0 4px 14px rgba(15, 23, 42, .15);
}
.cl-brand__lock {
	display: flex;
	align-items: baseline;
	gap: 7px;
	line-height: 1;
	min-width: 0;
}
.cl-brand__word {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 19px;
	line-height: 1;
	letter-spacing: -.6px;
	color: var(--wp--preset--color--heading);
}
.cl-brand__cluster {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 19px;
	line-height: 1;
	letter-spacing: -.6px;
	color: var(--wp--preset--color--amber);
}
.cl-brand:hover .cl-brand__cluster { color: var(--wp--preset--color--amber-soft); }
.cl-brand--footer .cl-brand__word,
.cl-brand--footer .cl-brand__cluster { font-size: 17px; }
/* Below 400px the lockup would push the burger off-screen. */
@media (max-width: 400px) {
	.cl-brand__crest { width: 32px; height: 32px; }
	.cl-brand__word,
	.cl-brand__cluster { font-size: 16px; }
}

/* ---- Instrument rail under the header (replaces the sibling's topbar) ---- */
.cl-instruments {
	max-width: var(--cl-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(15, 23, 42, .085);
}
.cl-instruments__rail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
}
.cl-instruments__cell {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 3px 9px;
	border-radius: 4px;
	background: rgba(15, 23, 42, .07);
	border: 1px solid rgba(15, 23, 42, .136);
}
.cl-instruments__cell dt {
	font-size: 11px;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}
.cl-instruments__cell dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12.5px;
	font-weight: 600;
	color: #7A4E00;
}
.cl-instruments__legal { margin: 0; font-size: 12px; color: var(--wp--preset--color--dim); }
.cl-instruments__legal a { color: var(--wp--preset--color--amber-soft); }
.cl-instruments__age {
	display: inline-block;
	padding: 1px 6px;
	margin-right: 4px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 800;
	color: #FFFFFF;
	background: var(--cl-danger-deep, #7A1B22);
}

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

/* Navigation */
.cl-nav { flex-wrap: nowrap; }
.cl-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; }
.cl-header__inner .wp-block-navigation__responsive-container:not(.is-menu-open) { background: transparent; }
.cl-nav .current-menu-item .wp-block-navigation-item__content,
.cl-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--contrast); background: rgba(15, 23, 42, .07); }

/* Language pills */
.cl-lang { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(15, 23, 42, .15); border-radius: 9px; background: rgba(15, 23, 42, .05); }
.cl-lang a { padding: 5px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--wp--preset--color--dim); }
.cl-lang a.is-active { background: rgba(15, 23, 42, .136); color: var(--wp--preset--color--amber); }

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

/* =========================================================================
   FOOTER
   ========================================================================= */
.cl-footer { border-top: 1px solid rgba(15, 23, 42, .102); background: var(--wp--preset--color--base-deep); }
.cl-footer__col-title { font-size: 13px; font-weight: 800; letter-spacing: .6px; color: var(--wp--preset--color--contrast); margin-bottom: 14px; }
.cl-footer a { font-size: 13px; color: var(--wp--preset--color--muted); }
.cl-footer a:hover { color: var(--wp--preset--color--amber); }
.cl-footer .cl-footer__links { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cl-footer .cl-brand__name { color: var(--wp--preset--color--heading); }
.cl-footer__legal { font-size: 12px; color: var(--wp--preset--color--dim); }
.cl-chip {
	padding: 8px 14px; border-radius: 8px; background: rgba(15, 23, 42, .051);
	border: 1px solid rgba(15, 23, 42, .102); 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) {
	.cl-compare { position: static; }
	.cl-offer__amount { font-size: 40px; }
}

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

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

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

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

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

	.cl-faq > summary { font-size: 15px; padding: 16px 18px; }
	.cl-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) {
	.cl-header__inner { gap: 10px; padding: 0 16px; }
	.cl-instruments { padding: 6px 16px; }
	.cl-lang { display: none; }
	.cl-header__actions .cl-btn-outline { display: none; }
	.cl-header__actions { gap: 10px; }
	/* let the nav (burger) sit just before the CTA on the right */
	.cl-nav { order: 3; margin-left: auto; }
	.cl-header__actions { order: 4; margin-left: 0; }
	.cl-instruments { font-size: 11px; gap: 4px 12px; }
}

/* Very small */
@media (max-width: 400px) {
	.cl-brand__name { display: none; }
	.cl-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. */
.cl-skip-link {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -130%);
	z-index: 2000;
	padding: 12px 22px;
	background: #E7EBF1;
	color: #FFFFFF;
	font-family: "Source Sans 3", 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(15, 23, 42, .203);
	transition: transform .18s ease-out;
}
.cl-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 #96600A;
	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,
	.cl-nav .wp-block-navigation-item__content,
	.cl-header__actions a,
	.cl-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.cl-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(--cl-hairline,1px solid rgba(15, 23, 42, .136));}
.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);}
.cl-note{font-size:13px;line-height:1.6;color:var(--wp--preset--color--dim);border-left:2px solid rgba(217, 138, 11, .3);padding:2px 0 2px 14px;margin:14px 0;}
.cl-rating-pill{white-space:nowrap;}
@media (max-width:600px){.wp-block-table table{min-width:480px;}}

/* Static single-language marker (AZ-only site). */
.cl-langtag {
	display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 7px;
	border: 1px solid rgba(217, 138, 11, .3); background: rgba(15, 23, 42, .07);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px; font-weight: 400; letter-spacing: 1px;
	color: var(--wp--preset--color--amber);
}

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

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

/* ---- Signal / predictor warning callout ---------------------------------- */
.cl-alert {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 20px 22px; border-radius: 12px;
	background: rgba(179, 38, 30, .06);
	border: 1px solid rgba(179, 38, 30, .224);
	border-left-width: 3px;
}
.cl-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, .112); color: #F79AA0;
}
.cl-alert h3 {
	font-size: 16px; margin: 0 0 6px; color: #FBCFD1;
	letter-spacing: .4px;
}
.cl-alert p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--body); }

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

/* ---- Provider strip (Spribe & friends — text marks, no borrowed logos) ---- */
.cl-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(15, 23, 42, .119);
	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);
}
.cl-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. */
.cl-num { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--amber); }

/* Eyebrows pick up the mono voice on this domain. */
.cl-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--amber);
}

/* Skeleton placeholder for the heavier grids (no images shipped). */
@keyframes cl-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.cl-skeleton {
	border-radius: 12px; min-height: 120px;
	background: linear-gradient(90deg, #FFFFFF 0%, #23446B 50%, #FFFFFF 100%);
	background-size: 840px 100%;
	animation: cl-shimmer 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .cl-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). */
.cl-skeleton--card { aspect-ratio: 3 / 4; min-height: 0; }
.cl-skeleton--wide { aspect-ratio: 16 / 9; min-height: 0; }
.cl-skeleton--row  { min-height: 64px; }


/* ===========================================================================
   UX / UI / ACCESSIBILITY PASS — v2.2.0  (royale-canli.com)
   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 #cl-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. */
.cl-skip-link:focus,
.cl-skip-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--amber);
	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 `.cl-hero:has(.cl-breadcrumb)` never matched.
   These rules build the page header out of what is actually in the markup. */
.entry-content {
	position: relative;
}
.entry-content > .cl-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(51, 65, 85, .15), transparent 62%),
		radial-gradient(430px 220px at 6% 6%, rgba(15, 23, 42, .07), transparent 60%);
}
.entry-content > .cl-breadcrumb:first-child {
	margin-bottom: 16px;
}
.entry-content > .cl-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 + .cl-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	margin-bottom: 0;
}
h1 + .cl-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--amber), rgba(217, 138, 11, 0));
}
h1 + .cl-eyebrow + .cl-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,
.cl-section > h2 {
	margin-top: clamp(44px, 5vw, 68px);
}
.entry-content > h3,
.cl-section > h3 {
	margin-top: clamp(28px, 3vw, 38px);
}
.entry-content > .cl-breadcrumb + h1,
.entry-content > h2:first-child,
.cl-section > h2:first-child {
	margin-top: 0;
}
/* Flight-trail rule under every section head: identity marker + rhythm cue. */
.entry-content > h2::after,
.cl-section > h2::after,
.cl-cta > h2::after {
	content: "";
	display: block;
	width: 46px;
	height: 2px;
	margin-top: 14px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--amber) 0%, rgba(51, 65, 85, .55) 68%, rgba(51, 65, 85, 0) 100%);
}
.cl-cta h2::after,
h2.has-text-align-center::after {
	margin-left: auto;
	margin-right: auto;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.cl-section > p,
.cl-section > ul,
.cl-section > ol {
	max-width: 62ch;
}
.entry-content > p.has-text-align-center,
.cl-section > p.has-text-align-center,
.cl-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, 740px);
}
/* The lead already had its own 660px cap; keep whichever is narrower. */
.cl-lead {
	max-width: min(660px, 62ch);
}

/* ---- F. Legibility: no prose below 15px --------------------------------- */
.cl-feature__text,
.cl-step__text,
.cl-alert p {
	font-size: 15px;
	line-height: 1.6;
}
.cl-vs li,
.cl-18__text {
	font-size: 14.5px;
}
.cl-note {
	font-size: 14px;
}
.cl-breadcrumb {
	font-size: 13px;
}
.cl-footer a {
	font-size: 14px;
}
.cl-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;
}
.cl-brand {
	min-height: 44px;
}
.cl-nav .wp-block-navigation-item__content {
	min-height: 44px;
	display: flex;
	align-items: center;
}
.cl-header .wp-block-button__link,
.cl-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. */
.cl-nav .wp-block-navigation__responsive-container-open,
.cl-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 .cl-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. */
.cl-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;
}
.cl-footer .cl-footer__links {
	gap: 2px;
}
.cl-footer .cl-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(15, 23, 42, .15);
	color: var(--wp--preset--color--contrast);
	border-radius: 8px;
	padding: 0 14px;
}
.wp-block-search__input::placeholder {
	/* muted #55647A 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(15, 23, 42, .102);
	color: var(--wp--preset--color--amber);
}

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

/* ---- I. Complete the state matrix (hover / focus / active / disabled) ---- */
.wp-block-button__link:active,
.cl-store:active,
.cl-game__play:active,
.cl-quicklink:active,
.cl-sticky a:active {
	transform: translateY(1px);
}
.cl-quicklink:focus-visible,
.cl-quicklink:focus-within {
	border-color: rgba(217, 138, 11, .4);
}
.cl-game:focus-within,
.cl-post:focus-visible {
	border-color: rgba(217, 138, 11, .35);
}
.cl-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--contrast);
	background: rgba(15, 23, 42, .085);
}
.cl-faq > summary:hover {
	background: rgba(15, 23, 42, .07);
}
.cl-faq > summary:hover::after,
.cl-faq > summary:focus-visible::after {
	background: rgba(15, 23, 42, .15);
	color: var(--wp--preset--color--amber-soft);
}
.cl-faq[open] > summary {
	border-bottom: var(--cl-hairline);
}
.cl-footer a:focus-visible,
.cl-breadcrumb a:hover,
.cl-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--amber);
}
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 `.cl-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. */
.cl-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(15, 23, 42, .076);
	border: 1px solid rgba(15, 23, 42, .15);
	transition: background .18s ease, border-color .18s ease;
}
.cl-quicklink__icon::before,
.cl-quicklink__icon::after {
	content: "";
	width: 4px;
	height: 15px;
	border-radius: 2px;
	background: var(--wp--preset--color--amber);
	box-shadow: 7px 0 0 0 var(--wp--preset--color--amber-deep);
}
.cl-quicklink__icon::after {
	height: 9px;
	box-shadow: none;
	opacity: .55;
	margin-left: 7px;
}
.cl-quicklink:hover .cl-quicklink__icon,
.cl-quicklink:focus-visible .cl-quicklink__icon {
	background: rgba(15, 23, 42, .136);
	border-color: rgba(217, 138, 11, .42);
}
/* The alert callout's ⚠ comes from page markup — force text presentation so it
   inherits the crash-red tint rather than becoming a colour emoji. */
.cl-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 ice trail gradient is ~2.5:1
   and white on the blue avatar gradient is ~2.5–6.5:1 depending on the stop. */
.cl-brand__num {
	color: var(--wp--preset--color--ink);
}
.cl-avatar {
	background: rgba(15, 23, 42, .119);
	border: 1px solid rgba(217, 138, 11, .28);
	color: var(--wp--preset--color--amber);
}

/* Footer age chip: was "🔞 18+" (emoji as an icon). Now a typographic ice chip. */
.cl-chip--age {
	color: var(--wp--preset--color--amber);
	background: rgba(15, 23, 42, .07);
	border-color: rgba(217, 138, 11, .28);
	font-weight: 700;
	letter-spacing: .4px;
}

/* ---- K. Tables: nested scrollers + a scroll affordance ------------------
   `.cl-table-wrap` and `.cl-table` were both scroll containers; the inner one
   always wins, so the outer was dead weight. Keep one scroller and hint at it. */
.cl-table-wrap {
	position: relative;
	overflow: visible;
}
.cl-table:focus-visible {
	outline: 3px solid var(--wp--preset--color--amber-soft);
	outline-offset: 2px;
}
@media (max-width: 600px) {
	/* Below 600px every table (min-width 520–560px) definitely overflows, so the
	   fade is always truthful. */
	.cl-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(11, 27, 51, 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) {
	.cl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.cl-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.cl-nav {
		order: 3;
		margin-left: auto;
	}
	.cl-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. */
	.cl-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. */
	.cl-header__actions .cl-langtag {
		display: none;
	}
	.cl-18 {
		gap: 12px;
		padding: 16px 16px;
	}
	.cl-18__text {
		font-size: 14px;
	}
	.cl-alert {
		padding: 16px 16px;
		gap: 12px;
	}
	.cl-offer__row,
	.cl-compare__row {
		/* long AZ labels + value on one 328px line: let the pair wrap. */
		flex-wrap: wrap;
	}
	/* `.cl-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"). */
	.cl-rtp .v {
		font-size: 17px;
	}
	.cl-stat-tile .v {
		font-size: 19px;
	}
	.cl-rtp .v,
	.cl-stat-tile .v,
	.cl-mult .x {
		line-height: 1.3;
		overflow-wrap: anywhere;
	}
	.entry-content > .cl-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. */
	.cl-quicklink:hover,
	.cl-game:hover,
	.cl-post:hover,
	.wp-block-button__link:active,
	.cl-store:active,
	.cl-game__play:active,
	.cl-quicklink:active,
	.cl-sticky a:active {
		transform: none !important;
	}
	.cl-header {
		backdrop-filter: none;
	}
	html {
		scroll-behavior: auto !important;
	}
}

/* ---- O. Forced-colors / high-contrast safety net ----------------------- */
@media (forced-colors: active) {
	.cl-card, .cl-card-raised, .cl-quicklink, .cl-game, .cl-feature, .cl-step,
	.cl-faq, .cl-flight, .cl-offer, .cl-cta, .cl-alert, .cl-18, .cl-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="cl-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). */
.cl-games {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
@media (max-width: 480px) {
	.cl-games {
		grid-template-columns: 1fr;
	}
}

/* ---- Tables authored as <div class="cl-table-wrap"><table class="cl-table"> ---
   The rules inherited above assume the sibling site's shape, where the SCROLLER is
   a <figure class="wp-block-table cl-table"> wrapping a plain <table>. Every page
   on this domain authors the table inside a wp:html block instead, so `.cl-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. */
.cl-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
table.cl-table {
	display: table;
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	overflow: visible;
}


/* ===========================================================================
   SLOT-SPECIALIST COMPONENTS — royale-canli.com
   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. */
.cl-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(51, 65, 85, .26), transparent 62%),
		var(--wp--preset--gradient--card-raised);
	border: 1px solid rgba(15, 23, 42, .15);
	box-shadow: var(--wp--preset--shadow--card);
}
.cl-reels__reel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	border-radius: 14px;
	background: rgba(15, 23, 42, .429);
	border: 1px solid rgba(15, 23, 42, .102);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(20px, 4.2vw, 30px);
	line-height: 1;
	color: var(--wp--preset--color--amber);
	letter-spacing: 1px;
}
.cl-reels__reel span { opacity: .38; }
.cl-reels__reel span.is-hit { opacity: 1; text-shadow: 0 0 22px rgba(217, 138, 11, .55); }
.cl-reels__line {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50%;
	height: 2px;
	transform: translateY(-1px);
	background: linear-gradient(90deg, rgba(217, 138, 11, 0), var(--wp--preset--color--amber) 22%, var(--wp--preset--color--amber) 78%, rgba(217, 138, 11, 0));
	opacity: .8;
}
.cl-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. */
.cl-filter {
	display: flex;
	gap: 9px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding: 4px 0 10px;
	margin: 0;
	list-style: none;
}
.cl-filter li { flex: 0 0 auto; }
.cl-filter a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	background: rgba(15, 23, 42, .07);
	border: 1px solid rgba(15, 23, 42, .15);
	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;
}
.cl-filter a:hover,
.cl-filter a:focus-visible {
	background: rgba(15, 23, 42, .119);
	border-color: rgba(217, 138, 11, .46);
	color: var(--wp--preset--color--amber);
}
.cl-filter a[aria-current="true"] {
	background: var(--wp--preset--gradient--amber);
	border-color: transparent;
	color: var(--wp--preset--color--ink);
}
@media (min-width: 782px) { .cl-filter { flex-wrap: wrap; overflow: visible; } }

/* ---- Game tiles: portrait, champagne RTP badge --------------------------- */
.cl-game { border-radius: 18px; }
.cl-game__rtp {
	position: absolute;
	right: 9px;
	bottom: 9px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(15, 23, 42, .64);
	border: 1px solid rgba(217, 138, 11, .34);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	color: var(--wp--preset--color--amber);
}
/* 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. */
.cl-game__media--css {
	background:
		linear-gradient(115deg, rgba(15, 23, 42, .136), transparent 58%),
		repeating-linear-gradient(90deg, rgba(15, 23, 42, .076) 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(217, 138, 11, .55);
	letter-spacing: 2px;
}

/* ---- RTP meter: the number AND a bar, so the figure is scannable --------- */
.cl-rtpbar { display: grid; gap: 12px; margin: 18px 0; }
.cl-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(15, 23, 42, .102);
}
.cl-rtpbar__name { font-size: 14.5px; font-weight: 700; color: var(--wp--preset--color--contrast); }
.cl-rtpbar__track {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: rgba(15, 23, 42, .119);
	overflow: hidden;
}
.cl-rtpbar__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 999px;
	background: var(--wp--preset--gradient--amber);
}
.cl-rtpbar__val {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	color: var(--wp--preset--color--amber);
	white-space: nowrap;
}
@media (max-width: 600px) {
	.cl-rtpbar__row { grid-template-columns: 1fr auto; }
	.cl-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. */
.cl-jackpot {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.cl-jackpot li {
	padding: 18px 16px;
	border-radius: 16px;
	text-align: center;
	background: var(--wp--preset--gradient--card);
	border: 1px solid rgba(51, 65, 85, .22);
}
.cl-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--slate-soft);
}
.cl-jackpot .r {
	display: block;
	margin-top: 9px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 17px;
	color: var(--wp--preset--color--amber);
}
.cl-jackpot .d { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--muted); }

/* ---- Demo callout ------------------------------------------------------- */
.cl-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(51, 65, 85, .2), transparent 64%),
		var(--wp--preset--gradient--card-raised);
	border: 1px solid rgba(15, 23, 42, .15);
}
.cl-demo__badge {
	flex: 0 0 auto;
	min-width: 62px;
	padding: 10px 12px;
	border-radius: 14px;
	text-align: center;
	background: rgba(15, 23, 42, .102);
	border: 1px solid rgba(217, 138, 11, .3);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	color: var(--wp--preset--color--amber);
}
.cl-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) ------------------------- */
.cl-payout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 8px;
	list-style: none;
	padding-left: 0;
	margin: 16px 0;
}
.cl-payout li {
	padding: 12px 8px;
	border-radius: 12px;
	text-align: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(15, 23, 42, .102);
}
.cl-payout .h {
	display: block;
	font-size: 11.5px;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.cl-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;
}
.cl-payout li.is-top { border-color: rgba(217, 138, 11, .42); }
.cl-payout li.is-top .x { color: var(--wp--preset--color--amber); }

/* ---- Provider mark: text-only, never a borrowed logo file --------------- */
.cl-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,
.cl-section > h2::after,
.cl-cta > h2::after {
	width: 54px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--amber) 0%, rgba(51, 65, 85, .7) 62%, rgba(51, 65, 85, 0) 100%);
}
h1 + .cl-eyebrow::before {
	background: linear-gradient(90deg, var(--wp--preset--color--amber), rgba(217, 138, 11, 0));
}

/* ---- Ambient wash (superseded by the identity layer at the tail) ---- */
.wp-site-blocks::before {
	background:
		radial-gradient(1100px 560px at 84% -10%, rgba(51, 65, 85, .22), transparent 62%),
		radial-gradient(860px 480px at 8% 2%, rgba(15, 23, 42, .07), transparent 58%);
}

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

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

/* ---- Trust rail sits BELOW the brand row on this domain (sibling-distinct) --
   The sibling opened the document with the legal rail; here the brand row comes
   first and the rail closes the header, so the hairline belongs on its bottom
   edge, dividing header from content rather than floating under the viewport. */
.cl-header .cl-instruments {
	border-top: 0;
	border-bottom: 1px solid rgba(15, 23, 42, .102);
	padding: 7px 24px;
	justify-content: flex-start;
}
@media (max-width: 600px) {
	.cl-header .cl-instruments { padding: 6px 16px; }
}

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

/* ---- UX pass: box-sizing for the raw (wp:html) components ------------------
   Core blocks get border-box from the block library, but every `.cl-*` element is
   hand-authored inside a wp:html block and inherited content-box. `.cl-instruments`
   and `.cl-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 cl- classes so core
   block metrics are untouched. */
[class*="cl-"],
[class*="cl-"]::before,
[class*="cl-"]::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 > .cl-breadcrumb:first-child::after {
	left: 0;
	transform: none;
	width: 100%;
	height: 460px;
	top: -64px;
	background:
		radial-gradient(700px 330px at 24% 20%, rgba(51, 65, 85, .17), transparent 64%),
		radial-gradient(470px 240px at 4% 4%, rgba(15, 23, 42, .07), transparent 62%);
}
@media (max-width: 600px) {
	.entry-content > .cl-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 740px (~72 characters of
   IBM Plex 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,
.cl-section > p,
.cl-section > ul,
.cl-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, 740px);
}

/* ---- 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. */
.cl-game__media {
	aspect-ratio: 4 / 5;
}
.cl-games {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (max-width: 480px) {
	.cl-games {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.cl-game__body { padding: 11px 11px 12px; }
	.cl-game__media--css { font-size: 24px; }
	.cl-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. */
	.cl-game__play { width: 100%; padding: 10px 8px; font-size: 12px; }
}

/* ---- UX pass: game cards keep their CTA on one baseline --------------------
   `.cl-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. */
.cl-game {
	display: flex;
	flex-direction: column;
}
.cl-game__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.cl-game__meta {
	margin-bottom: 2px;
}
.cl-game__play {
	margin-top: auto;
}


/* ===========================================================================
   RESTORED SHARED COMPONENTS (source theme lines 1920-2397)
   These are the component layers the fork's split accidentally discarded: the
   category grid, the live-dealer table list, provider wordmark chips, the inline
   TOC, the step lists, the RTP-badge dual-slot fix, the escaped-card-label fix,
   the native-core/table highlight column and the chip-rail / wide-catalogue UX
   pass. Palette tokens are already translated to Slate & Amber; the
   identity layer below still overrides geometry, wordmark, focus ring and washes.
   =========================================================================== */
/* ===========================================================================
   royale-canli.com — Slate & Amber layer
   Everything below is specific to THIS domain: the Unbounded typography guards,
   the game-category grid, the live-dealer table list and the crash-multiplier
   ladder. Kept in one block at the end so the inherited layers above stay
   diffable against the source theme.
   =========================================================================== */

/* ---- Long-word safety net --------------------------------------------------
   Playfair Display is a normal-width grotesk, so it needs far less rescuing than the wide
   geometric face this theme was forked from — but Azerbaijani headline words are
   still long ("Provayderlər", "Məsuliyyətli", "Maşınları"). At 360px a single word
   can still exceed the viewport, and an overflowing H1 pushes the whole document
   sideways, so keep the break-as-last-resort rule. */
h1, h2, h3, .cl-brand__word, .cl-brand__cluster {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}
h1 { -webkit-hyphens: auto; }

/* ---- Focus ring: rose-gold, visible on every surface -------------------------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--amber);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Dot-accent mark (header/footer wordmark) -----------------------------
   Slate & Amber is an editorial, typographic identity: instead of a crest or a
   monogram tile the mark is a single rose-gold dot inside a hairline ring — the
   "accent dot" the brief calls for, at cap-height scale. It reads as punctuation
   next to the wordmark rather than as a logo box, which is what keeps this header
   silhouette unlike every other site in the network. */
.cl-brand__mark {
	flex: 0 0 auto;
	position: relative;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(217, 138, 11, .38);
	background: transparent;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.cl-brand__mark::after {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--amber);
}
.cl-brand:hover .cl-brand__mark {
	border-color: var(--wp--preset--color--amber);
	box-shadow: 0 0 0 3px rgba(15, 23, 42, .085);
}
/* the old inline SVG monogram is no longer shipped; belt-and-braces if cached */
.cl-brand__mark svg { display: none; }

/* ---- Game-category grid (the hub's primary navigation) --------------------
   Four equal cards on desktop, two on tablet, one on phone. Each card is a whole
   link (44px+ tap target by construction) with a mono count in brass. */
.cl-catgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
	list-style: none;
	margin: 24px 0 0;
	padding-left: 0;
}
.cl-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 20px 18px 18px;
	border-radius: 16px;
	background: var(--wp--preset--gradient--card);
	border: 1px solid rgba(15, 23, 42, .119);
	transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.cl-cat:hover { border-color: rgba(217, 138, 11, .42); transform: translateY(-2px); }
.cl-cat__ico {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: rgba(51, 65, 85, .14);
	border: 1px solid rgba(51, 65, 85, .3);
	font-size: 19px;
	line-height: 1;
}
.cl-cat__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.4px;
	color: var(--wp--preset--color--heading);
}
.cl-cat__title a { color: inherit; text-decoration: none; }
/* Stretch the title link over the whole card so the entire tile is clickable. */
.cl-cat__title a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.cl-cat__sub { font-size: 13.5px; line-height: 1.55; color: var(--wp--preset--color--muted); margin: 0; }
.cl-cat__count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12.5px;
	color: var(--wp--preset--color--amber);
}
@media (prefers-reduced-motion: reduce) {
	.cl-cat:hover { transform: none; }
}

/* ---- Live-dealer table list ----------------------------------------------
   A list, not a grid: live tables are read by limit and language, both of which
   are figures, so they belong in a mono column that lines up vertically. */
.cl-tables { display: grid; gap: 10px; list-style: none; padding-left: 0; margin: 22px 0 0; }
.cl-tbl {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 16px;
	padding: 14px 16px;
	border-radius: 13px;
	background: var(--wp--preset--gradient--card);
	border: 1px solid rgba(15, 23, 42, .102);
}
.cl-tbl__name { font-weight: 600; font-size: 15px; color: var(--wp--preset--color--contrast); }
.cl-tbl__prov { font-size: 13px; color: var(--wp--preset--color--muted); }
.cl-tbl__lim {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13.5px;
	color: var(--wp--preset--color--bronze);
	white-space: nowrap;
}
@media (max-width: 600px) {
	.cl-tbl { grid-template-columns: 1fr auto; }
	.cl-tbl__prov { grid-column: 1; }
	.cl-tbl__lim { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- Crash-multiplier ladder (aviator) -----------------------------------
   Illustrates how a crash round ends, with the round-outcome bands the page
   explains in prose. Decorative bars only — no live data, no promised result. */
.cl-ladder { display: grid; gap: 8px; list-style: none; padding-left: 0; margin: 22px 0 0; }
.cl-ladder li {
	display: grid;
	grid-template-columns: 62px 1fr auto;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--wp--preset--color--body);
}
.cl-ladder .x {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14.5px;
	color: var(--wp--preset--color--bronze);
}
.cl-ladder .bar {
	height: 9px;
	border-radius: 999px;
	background: rgba(15, 23, 42, .119);
	overflow: hidden;
}
.cl-ladder .bar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--wp--preset--gradient--slate);
}
.cl-ladder .n { font-family: var(--wp--preset--font-family--mono); font-size: 13px; color: var(--wp--preset--color--muted); }

/* ---- Provider marks: wordmark chips, never a real brand logo file --------- */
.cl-provider {
	display: grid;
	place-items: center;
	padding: 0 14px;
	border-radius: 12px;
	background: rgba(15, 23, 42, .06);
	border: 1px solid rgba(15, 23, 42, .136);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-align: center;
	color: var(--wp--preset--color--dim);
}

/* ---- Inline TOC on the long guide pages ---------------------------------- */
.cl-toc {
	margin: 26px 0 0;
	padding: 18px 20px;
	border-radius: 14px;
	background: rgba(15, 23, 42, .051);
	border-left: 3px solid var(--wp--preset--color--amber);
}
.cl-toc p { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.cl-toc ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.cl-toc li { font-size: 14.5px; }

/* ---- UX pass: chip rail, category grid, wide catalogue --------------------
   Found by shooting the built pages at 360/768/1024/1440. See polish_game.py. */

/* `.cl-provider` is display:grid, so an unstyled `.cl-chips` container stacked the
   studio marks one per row. This is a chip RAIL. */
.cl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
}
.cl-chips .cl-provider {
	height: 44px;
	min-width: 138px;
	flex: 0 1 auto;
}
@media (max-width: 420px) {
	.cl-chips .cl-provider { min-width: 0; flex: 1 1 calc(50% - 5px); }
}

/* Four category cards in a 740px column: 260px lands on 2x2, not 3 + orphan. */
.cl-catgrid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* The catalogue grids get the wide column (see the alignwide wrappers in the page
   markup); inside it, ask for a denser tile so a row reads as a shelf. */
/* 272px resolves to FOUR tiles in the 1260px wide column, three at 1024 and two at
   768. Four was chosen over a denser shelf because it divides the real grids on this
   site evenly (8 tiles on the hub, 12 on /slots/) instead of leaving an orphan row. */
.alignwide > .cl-games,
.alignwide .cl-games {
	grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}

/* Azerbaijani headlines are long, so the last word of a hero regularly falls to a
   line of its own ("...Kazino / AZ"). Let the browser even the lines out instead of
   leaving a one-word widow under a 56px headline. */
h1, h2 { text-wrap: balance; }
.cl-lead { text-wrap: pretty; }


/* ===========================================================================
   PLATINUM & ONYX geometry layer — royale-canli.com
   The forked theme was rounded (16px cards, pill chips) and warm. This identity
   is squared and cold: tighter radii, hairline rims instead of glows, and mono
   figures a shade brighter than body text so RTP/odds read as data. Appended
   last so the inherited layers above stay diffable against the source theme.
   =========================================================================== */

/* Squared geometry: knock ~40% off every inherited card radius. */
.cl-cat,
.cl-cat__title a::after,
.cl-card,
.cl-game,
.cl-panel,
.cl-note,
.cl-steps li,
.cl-faq,
.cl-offer { border-radius: 10px; }
.cl-cat__ico,
.cl-game__thumb,
.cl-provider,
.cl-chip { border-radius: 7px; }

/* Wordmark: "game" is the weight-carrying half on this domain (royale-canli.com),
   so the emphasis order is flipped versus the sibling's "Royale"-first lockup. */
.cl-brand__lock { gap: 4px; }
.cl-brand__word {
	font-weight: 800;
	letter-spacing: -.2px;
	text-transform: lowercase;
}
.cl-brand__cluster {
	font-weight: 500;
	letter-spacing: .6px;
	text-transform: lowercase;
	color: var(--wp--preset--color--muted);
}
.cl-brand:hover .cl-brand__cluster { color: var(--wp--preset--color--dim); }

/* Mono figures: Fira Code runs small at a given px, so nudge the tracking in
   and the brightness up — every number on this site is a claim being cited. */
.cl-num,
.cl-num * {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: -.2px;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--bronze);
}

/* Ambient field: two cold rose-gold washes instead of the inherited warm pair.
   Muted to .07/.05 because on a #F2F4F7 canvas anything stronger greys the ink
   out and costs body copy its 4.5:1. */
.wp-site-blocks::before {
	background:
		radial-gradient(1100px 560px at 82% -10%, rgba(15, 23, 42, .07), transparent 62%),
		radial-gradient(820px 460px at 8% 2%, rgba(51, 65, 85, .05), transparent 58%);
}

/* Hairline rims read better than glows in a monochrome palette. */
.cl-badge { border-radius: 6px; }
:root {
	--cl-card-border: 1px solid rgba(15, 23, 42, .085);
	--cl-card-border-strong: 1px solid rgba(15, 23, 42, .15);
}

/* ---- Provider chip rows -----------------------------------------------------
   Inherited bug (bit the sibling too): `.cl-chips` only ever styled core BUTTON
   children, so a row of plain `.cl-provider` spans got no container layout — and
   because `.cl-provider` is `display:flex`, each span became a block-level flex
   box and the "row" stacked full-width down the page. Give the container a real
   wrap layout and let a provider mark be inline when it is a chip, while still
   filling its cell when a grid places it. */
.cl-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.cl-chips .cl-provider {
	display: inline-flex;
	width: auto;
	height: auto;
	min-height: 44px;
	padding: 10px 16px;
	flex: 0 0 auto;
}

/* ---- Step lists -------------------------------------------------------------
   Inherited gap: `.cl-step` (the item) was fully styled but `.cl-steps` (the <ol>
   holding them) had no rule at all, so an ordered list rendered its default
   decimal markers right next to the big `.cl-step__num` — the number twice, once
   unstyled and hanging outside the card. Give the container the reset and the
   grid it always needed, so page markup never has to inline it. */
.cl-steps {
	list-style: none;
	padding-left: 0;
	margin: 24px 0 0;
	display: grid;
	gap: 14px;
	counter-reset: none;
}
.cl-steps > li::marker { content: none; }
@media (min-width: 780px) {
	.cl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cl-step__num { display: block; }
.cl-step__title { margin-top: 0; }

/* ---- Crash-mechanics panel --------------------------------------------------
   `.cl-flight` is named in the forced-colors branch above as though it were one of
   the card surfaces, but it never had a base rule — an unstyled div waiting to
   trap a page author. Give it the card surface its neighbours have. */
.cl-flight {
	position: relative;
	padding: 24px 22px;
	border-radius: 10px;
	background: var(--wp--preset--gradient--card);
	border: var(--cl-card-border);
	overflow: hidden;
}

/* ---- RTP badge: work in BOTH slots it gets authored into ---------------------
   `.cl-game__rtp` was written as an overlay pinned to the card art
   (`position:absolute` with `.cl-game__media` as the only positioned ancestor).
   Page authors reasonably also put it in the `.cl-game__meta` row next to the
   provider — and there the absolute positioning escaped the card entirely, landing
   the badge over whatever sat below. Pin it only when it really is inside the art;
   in the meta row let it be an ordinary inline chip. */
.cl-game__meta .cl-game__rtp,
.cl-game__body .cl-game__rtp {
	position: static;
	right: auto;
	bottom: auto;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}
/* The meta row is space-between with provider + tag + badge; let it wrap on the
   narrow tracks rather than squeeze the RTP figure out of legibility. */
.cl-game__meta {
	flex-wrap: wrap;
	gap: 6px 8px;
}

/* ---- Card labels outside the art: same escape, same fix ---------------------
   `.cl-tag` was authored as a corner overlay for the card ARTWORK
   (`position:absolute; top:9px; left:9px`) and it carries no background of its own
   unless it is a --hot / --jackpot variant. Page markup also uses it as an ordinary
   volatility/format label in the `.cl-game__meta` row — and there the absolute
   positioning walked it all the way up to the nearest positioned ancestor
   (`.entry-content`), stacking every tag on the page over the breadcrumb. Measured,
   not theoretical: at 1024px twelve `.cl-tag` spans from /slots/ were piled at
   (9,191) on top of the breadcrumb text.
   In the meta row a tag is an inline chip with a visible surface; only inside the
   media well does it stay an overlay. */
.cl-game__meta .cl-tag,
.cl-game__body .cl-tag,
.cl-tbl .cl-tag,
.cl-compare .cl-tag,
p .cl-tag,
li .cl-tag {
	position: static;
	top: auto;
	left: auto;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	background: rgba(15, 23, 42, .076);
	border: 1px solid rgba(15, 23, 42, .136);
	color: var(--wp--preset--color--dim);
	letter-spacing: .3px;
	font-weight: 700;
}
/* the semantic variants keep their own ink wherever they sit */
.cl-game__meta .cl-tag--hot,
.cl-game__body .cl-tag--hot,
p .cl-tag--hot,
li .cl-tag--hot {
	background: var(--cl-danger-deep);
	border-color: var(--cl-danger-deep);
	color: #FFFFFF;
}
.cl-game__meta .cl-tag--jackpot,
.cl-game__body .cl-tag--jackpot,
p .cl-tag--jackpot,
li .cl-tag--jackpot {
	background: var(--wp--preset--gradient--amber);
	border-color: transparent;
	color: var(--wp--preset--color--ink);
}

/* ---- Card monogram tile -----------------------------------------------------
   With no OpenRouter key there is no cover art, so every game card's art well
   carries a monogram built from the game's own title instead of a fake poster.
   `.cl-game__media--css` already centres its child in the display face; this sizes
   and tones the lettermark, and covers both shapes the pages ship it in (a bare
   <span> and an explicit `.cl-game__mono`). Tone is deliberately low — the tile is
   a placeholder standing in for artwork, not a thing to read first. */
.cl-game__mono,
.cl-game__media--css > span:not([class]) {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(30px, 8vw, 44px);
	letter-spacing: 1px;
	line-height: 1;
	color: rgba(217, 138, 11, .3);
	user-select: none;
}
/* A monogram needs far less room than a poster: the inherited 3/4 portrait well left
   a ~370px empty column above a 3-line card body. Squarer reads as a shelf label. */
.cl-game .cl-game__media--css {
	aspect-ratio: 5 / 4;
}
@media (max-width: 480px) {
	.cl-game .cl-game__media--css { aspect-ratio: 4 / 3; }
}

/* ---- Highlight column on a NATIVE core/table -------------------------------
   `.cl-col-hi` was written for raw tables inside a wp:html block. Putting it on a
   <th> inside a core/table block makes the block invalid in the editor: core/table
   keeps cell state in its own head/body attribute arrays and supports only `align`
   per cell, so save() regenerates the <th> without the class and the saved-vs-
   generated comparison fails ("Expected attributes, instead saw"). Measured on
   /aviator/: 1 invalid block, 4 validation console errors.
   A core/table can still carry a highlight column — address it positionally so no
   unsupported attribute has to survive a round-trip. `.cl-table--hi3` marks which
   column is the emphasised one; the class sits on the block wrapper, which core
   /table does support via className. */
.cl-table--hi3 thead th:nth-child(3),
.cl-table--hi3 tbody td:nth-child(3) {
	background: rgba(15, 23, 42, .07);
	color: var(--wp--preset--color--amber);
	font-weight: 700;
}

/* ===========================================================================
   royale-canli.com — "Slate & Amber" identity layer
   The sibling this theme forked from was a warm navy field with a rose-gold
   brand voice, playful 20px radii, a script wordmark and a mascot. This domain
   is the canlı-diler specialist and reads that job warmly: a slate-mist
   field, amber as the only accent, graphite slate reserved for the second
   voice, sharp 4/10/18 geometry, and a crown-over-letter wordmark set in Playfair Display.
   Kept last so the shared plumbing above stays diffable against the source.
   =========================================================================== */

/* ---- Wordmark: engraved token beside the name ----------------------------------------
   The mark is a crown sitting on top of a capital P (inline SVG, no raster art);
   the lockup is Playfair caps + a Fira Code cluster tag, so it reads engineered
   rather than hand-written. No glow: the amber does the work, and a text-shadow
   on a dark glyph on slate mist only muddies the subpixel AA. */
.cl-brand__lock {
	gap: 2px;
	align-items: flex-start;
	flex-direction: column;
}
.cl-brand__word {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.05;
	letter-spacing: -0.4px;
	text-transform: none;
	color: var(--wp--preset--color--heading);
	transition: color .18s ease;
}
.cl-brand__cluster {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	font-size: 10.5px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-soft);
}
.cl-brand:hover .cl-brand__word { color: var(--wp--preset--color--amber); }
.cl-brand:hover .cl-brand__cluster { color: var(--wp--preset--color--amber-soft); }
.cl-brand--footer .cl-brand__word { font-size: 19px; }
@media (max-width: 520px) {
	.cl-brand__word { font-size: 17.5px; }
	.cl-brand__cluster { font-size: 9.5px; letter-spacing: 1.8px; }
}

/* ---- The token mark: a ring IS the mark ----------------------------------------
   Both inherited identities drew a bordered tile around the mark (a dot, then a
   mascot chip). Here the crown IS the mark, so the tile chrome is lifted or the
   two shapes stack. */
.cl-brand__mark {
	width: 30px;
	height: 30px;
	border: 0;
	background: transparent;
	box-shadow: none;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.cl-brand__mark::after { content: none; }
.cl-brand__mark svg { display: block; }
.cl-brand:hover .cl-brand__mark { border-color: transparent; box-shadow: none; }
.cl-token { transition: transform .18s ease; }
.cl-brand:hover .cl-token { transform: translateY(-1.5px); }
@media (max-width: 780px) {
	.cl-brand__mark { width: 26px; height: 26px; }
	.cl-token { width: 26px; height: 26px; }
}
.cl-brand { align-items: center; gap: 10px; }

/* ---- Sharp geometry ---------------------------------------------------------
   Set in one place across the card family, the way the sibling did, but in the
   opposite direction: 18px shells, 10px insets, and only the true pills stay
   round. A play/oyna surface has to look like an instrument panel. */
.cl-card,
.cl-card-raised,
.cl-panel,
.cl-cat,
.cl-game,
.cl-offer,
.cl-flight,
.cl-demo,
.cl-statbox,
.cl-stat-tile,
.cl-quicklink,
.cl-feature,
.cl-step,
.cl-alert,
.cl-note,
.cl-warn,
.cl-jackpot,
.cl-promo,
.cl-table-wrap,
.cl-toc { border-radius: 18px; }
.cl-cat__ico,
.cl-quicklink__icon,
.cl-feature__icon,
.cl-game__thumb { border-radius: 10px; }
.cl-chip,
.cl-provider,
.cl-tag,
.cl-badge,
.cl-rating-pill,
.cl-game__rtp,
.cl-demo__badge,
.cl-langtag,
.cl-filter button,
.cl-eyebrow { border-radius: 999px; }
.cl-game__media,
.cl-game__media--css { border-radius: 18px 18px 0 0; }
.wp-block-button__link,
.wp-element-button { border-radius: 9px; }

/* ---- Focus ring ------------------------------------------------------------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--amber);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---- Ambient field ----------------------------------------------------------
   A single warm wash falling from the top edge plus an amber rule at the very
   top edge — deliberately the inverse silhouette of both siblings (top-left warm
   / bottom-left cold), so no two network pages share a background shape. */
.wp-site-blocks::before {
	background:
		radial-gradient(900px 620px at 6% 104%, rgba(51, 65, 85, .16), transparent 62%),
		radial-gradient(1100px 300px at 60% -6%, rgba(15, 23, 42, .07), transparent 60%);
}

/* ---- Playfair headline guards ---------------------------------------------------
   Playfair Display is a high-contrast transitional serif with small apertures, so
   Azerbaijani compounds ("avtomatları", "Məsuliyyətli", "qeydiyyatdan") run long
   and break badly at 360px. Balance the rag and allow the last-resort break. */
h1, h2 {
	text-wrap: balance;
	-webkit-hyphens: auto;
	hyphens: auto;
}
h1 { word-break: break-word; }

/* ---- In-prose links: amber rule that thickens ------------------------------ */
.entry-content a:not(.wp-element-button):not(.cl-game__play):not(.cl-quicklink):not(.cl-cat) {
	text-decoration-color: rgba(217, 138, 11, .5);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color .16s ease, text-decoration-thickness .16s ease;
}
.entry-content a:not(.wp-element-button):not(.cl-game__play):not(.cl-quicklink):not(.cl-cat):hover {
	text-decoration-color: var(--wp--preset--color--amber);
	text-decoration-thickness: 2px;
}

/* ---- Route/quick-nav tiles --------------------------------------------------
   Round token plates in an amber tint rather than the sibling's square plates
   circles, and four across at wide width. */
.cl-cat__ico,
.cl-feature__icon,
.cl-quicklink__icon {
	width: 44px;
	height: 44px;
	font-size: 22px;
	background: rgba(51, 65, 85, .16);
	border-color: rgba(51, 65, 85, .34);
	color: var(--wp--preset--color--amber);
}
.cl-catgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr)); gap: 14px; }
.cl-cat { padding: 20px 18px 18px; }
.cl-cat__title { font-size: 17.5px; }
.cl-stats { gap: 14px; }
.cl-stat__num { font-size: clamp(27px, 3.2vw, 38px); }
@media (max-width: 520px) {
	.cl-eyebrow { font-size: 11px; letter-spacing: 1.4px; line-height: 1.5; }
}

/* ---- Promo-code field (new on this domain) ----------------------------------
   The /bonus page shows the operator's public welcome code. It is a READ-ONLY
   display + a copy button, never an input that posts anywhere: no field on this
   site collects anything. The code itself is Fira Code, like every other figure. */
.cl-promo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--wp--preset--gradient--card-raised);
	border: 1px solid rgba(15, 23, 42, .15);
}
.cl-promo__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	flex: 1 1 100%;
	margin: 0;
}
.cl-promo__code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(19px, 2.4vw, 25px);
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--wp--preset--color--heading);
	padding: 10px 16px;
	border: 1px dashed rgba(217, 138, 11, .45);
	border-radius: 8px;
	background: rgba(15, 23, 42, .39);
	user-select: all;
}
.cl-promo__copy {
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	min-height: 44px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: 9px;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--gradient--amber);
	touch-action: manipulation;
	transition: filter .16s ease, transform .12s ease;
}
.cl-promo__copy:hover { filter: brightness(1.06); }
.cl-promo__copy:active { transform: translateY(1px); }
.cl-promo__done {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12.5px;
	color: var(--wp--preset--color--green);
	margin: 0;
	flex: 1 1 100%;
}
.cl-promo__done[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
	.cl-promo__copy { transition: none; }
	.cl-promo__copy:active { transform: none; }
	.cl-token, .cl-brand__word { transition: none; }
	.cl-brand:hover .cl-token { transform: none; }
}

/* ---- Completing the half-inherited card families -----------------------------
   Three container components arrived from the source theme with children styled
   but no container rule at all, and one arrived with grid tracks but no
   `display:grid`. The page authors papered over that with per-element inline
   styles inside their wp:html blocks — which works, but repeating the same
   style="" attribute across a dozen cards is exactly the network footprint tell
   this stylesheet warns about elsewhere. So the rules live here, once, and the
   markup can stay clean.

   .cl-catgrid  — had grid-template-columns + gap, but no display:grid, so the
                  four route cards stacked full-width at every breakpoint.
   .cl-cat      — had only padding + radius: no surface, no border, no colour.
   .cl-features / .cl-steps — no container rule existed at all. */
.cl-catgrid,
.cl-features,
.cl-steps {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
	margin: 4px 0 0;
}
.cl-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }

.cl-cat {
	display: block;
	background: var(--wp--preset--gradient--card);
	border: var(--cl-card-border);
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease;
}
.cl-cat:hover { transform: translateY(-3px); border-color: rgba(217, 138, 11, .34); }
.cl-cat__title {
	display: block;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 12px 0 6px;
	line-height: 1.3;
}
.cl-cat__sub,
.cl-cat__text {
	display: block;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.cl-cat__count {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-soft);
}
/* A whole card that is a link must not also underline its own label. */
a.cl-cat,
a.cl-cat:hover { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.cl-cat { transition: none; }
	.cl-cat:hover { transform: none; }
}

/* ---- Trust-bar segments -----------------------------------------------------
   The header rail carries four compliance items (18+, independence, the operator's
   licence line, the RG link) plus the Baku clock. As one run of text separated by
   middots it wrapped to THREE lines at 360px and ate a third of the first screen.
   Splitting it into addressable segments lets the narrow layout keep every
   compliance item — only the clock, which is decorative context rather than a
   disclosure, is dropped — while the independence line switches to a short form.
   The separators are pseudo-elements so no middot is ever read out by a screen
   reader as content. */
.cl-instruments__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 8px;
}
.cl-seg { display: inline-flex; align-items: center; gap: 5px; }
/* The separator is a TRAILING pseudo-element, not a leading one: as a ::before it
   became the first thing on a wrapped line, leaving an orphaned middot hanging in
   the left margin at 360px. As a ::after inside the flex item it stays glued to the
   end of the segment it belongs to and wraps with it. */
.cl-seg:not(:last-child)::after {
	content: "·";
	margin-left: 8px;
	color: rgba(217, 138, 11, .42);
}
.cl-seg--narrow { display: none; }
@media (max-width: 560px) {
	.cl-seg--wide { display: none; }
	.cl-seg--narrow { display: inline-flex; }
	.cl-seg--clock { display: none; }
	.cl-instruments__legal { gap: 2px 7px; line-height: 1.45; }
	.cl-seg:not(:last-child)::after { margin-left: 7px; }
	/* The clock is display:none here, so the RG link becomes the last VISIBLE
	   segment while :last-child still matches the hidden clock — which left a
	   trailing middot dangling after the final item. Silence it explicitly. */
	.cl-seg:nth-last-child(2)::after { content: none; }
}

/* ---- Core's own outline button style has to work too -------------------------
   The inherited layer paints EVERY button with the amber gradient via
   `.wp-block-button:not(.cl-btn-outline) > .wp-block-button__link { ... !important }`
   and only exempts the theme's private `.cl-btn-outline` class. A page author who
   reaches for Gutenberg's built-in "Outline" style (`is-style-outline`, which is
   what the editor UI offers) therefore got a second FILLED primary button — two
   identical CTAs side by side on /bonus, with no visual hierarchy between
   "activate the bonus" and "try the demo".
   Rather than rewrite the page markup, teach the theme to honour the core style:
   same treatment as .cl-btn-outline, matched specificity, declared last so it wins.
   The gradient rule uses !important, so these have to as well. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background: rgba(15, 23, 42, .05) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid rgba(217, 138, 11, .3) !important;
	box-shadow: none;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--amber) !important;
	color: var(--wp--preset--color--amber-soft) !important;
	filter: none;
}


/* =========================================================================
   royale-canli.com — "Slate & Amber" LIGHT identity layer
   -------------------------------------------------------------------------
   Everything above was inherited from a DARK sibling and value-translated.
   This tail layer owns the parts of a light canvas that a substitution cannot
   reason about: where separation comes from when panels and page are both pale,
   what the accent is allowed to touch, and how a high-contrast serif behaves at
   360px in Azerbaijani.

   Identity per the domain brief: slate-mist canvas #F2F4F7, white panels, amber
   #D98A0B as the ONLY accent (fills and buttons — never small text on white),
   graphite #334155 as the second voice, Playfair Display / Source Sans 3 /
   Fira Code, and a circular engraved token as the mark.
   ========================================================================= */

/* ---- A. Ambient field: warm, from the top edge --------------------------
   A light theme cannot use the sibling idiom of a glowing wash — on #F2F4F7 a
   radial at .16 alpha is either invisible or dirt. Instead the page is anchored
   by ONE hard amber rule across the top edge (2px, the token's metal) plus a
   very wide, very faint warm fall beneath it. The shape is a top band, which is
   nothing like any sibling's corner glow. */
.wp-site-blocks::before {
	background:
		linear-gradient(180deg, rgba(217, 138, 11, .10) 0, rgba(217, 138, 11, 0) 420px),
		radial-gradient(1200px 380px at 50% -6%, rgba(217, 138, 11, .07), transparent 64%);
}
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9997;
	background: linear-gradient(90deg, #8A5A00 0%, #D98A0B 38%, #F3BE60 62%, #D98A0B 100%);
	pointer-events: none;
}

::selection {
	background: rgba(217, 138, 11, .30);
	color: #0F172A;
}

/* ---- B. Separation on a pale canvas ------------------------------------
   The inherited card family relied on being LIGHTER than its background. Here
   panels are white on near-white, so the border does the work and the shadow
   only lifts the raised tier. Borders are neutral slate ink, never amber: a warm
   hairline on every card would spend the accent on structure and leave nothing
   for the CTA. */
:root {
	--cl-card-border: 1px solid rgba(15, 23, 42, .10);
	--cl-card-border-strong: 1px solid rgba(15, 23, 42, .16);
	--cl-hairline: 1px solid rgba(15, 23, 42, .09);
	--cl-rule: 1px solid rgba(15, 23, 42, .12);
}
.cl-card,
.cl-panel,
.cl-cat,
.cl-game,
.cl-offer,
.cl-demo,
.cl-statbox,
.cl-stat-tile,
.cl-quicklink,
.cl-feature,
.cl-step,
.cl-review,
.cl-jackpot,
.cl-promo,
.cl-toc,
.cl-table-wrap {
	background: #FFFFFF;
	border: 1px solid rgba(15, 23, 42, .10);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.cl-card-raised,
.cl-flight {
	background: #FFFFFF;
	border: 1px solid rgba(15, 23, 42, .14);
	box-shadow: 0 14px 36px rgba(15, 23, 42, .09);
}
/* Hover lift, but only where the card is a link target. */
a.cl-quicklink:hover,
a.cl-cat:hover {
	border-color: rgba(217, 138, 11, .55);
	box-shadow: 0 10px 24px rgba(217, 138, 11, .18);
}

/* ---- C. Radius scale: the token motif ----------------------------------
   The mark is a round jeton, so the shell radius softens to 14px (the sibling
   used a hard 18px instrument-panel shell) and every small plate becomes a full
   circle or capsule. Nothing on this domain is square. */
.cl-card,
.cl-card-raised,
.cl-panel,
.cl-cat,
.cl-game,
.cl-offer,
.cl-flight,
.cl-demo,
.cl-statbox,
.cl-stat-tile,
.cl-quicklink,
.cl-feature,
.cl-step,
.cl-alert,
.cl-note,
.cl-warn,
.cl-jackpot,
.cl-promo,
.cl-table-wrap,
.cl-review,
.cl-toc { border-radius: 14px; }
.cl-game__media,
.cl-game__media--css { border-radius: 14px 14px 0 0; }
.cl-cat__ico,
.cl-quicklink__icon,
.cl-feature__icon,
.cl-game__thumb { border-radius: 50%; }
.wp-block-button__link,
.wp-element-button { border-radius: 8px; }

/* Round glyph plates: an amber-tinted disc with a ring, i.e. a small token. */
.cl-cat__ico,
.cl-quicklink__icon,
.cl-feature__icon {
	background: #FFF8EC;
	border: 1px solid rgba(217, 138, 11, .38);
	box-shadow: inset 0 0 0 3px #FFFFFF;
	color: #8A5A00;
	display: grid;
	place-items: center;
}

/* ---- D. Editorial rules -------------------------------------------------
   Playfair Display is a print face, so the section rhythm is print rhythm: an
   H2 sits under a hairline with an amber token on the left, and the eyebrow is
   Fira Code small-caps. Replaces the sibling's tick-mark before the heading. */
.cl-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #5A6B84;
	background: transparent;
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cl-eyebrow::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: transparent;
	border: 2.5px solid #D98A0B;
}
.cl-eyebrow::after { content: none; }
h1 + .cl-eyebrow::before { background: transparent; }

.entry-content h2 {
	position: relative;
	padding-top: 20px;
	margin-top: clamp(38px, 4.6vw, 60px);
	border-top: 1px solid rgba(15, 23, 42, .12);
}
.entry-content h2::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 64px;
	height: 3px;
	background: #D98A0B;
}
/* The rule belongs to prose only — headings inside a card or a hero must not
   grow a full-width divider. */
.cl-card h2,
.cl-card-raised h2,
.cl-panel h2,
.cl-hero h2,
.cl-cta h2,
.cl-offer h2,
.cl-demo h2,
.cl-alert h2,
.cl-note h2,
.cl-warn h2,
.cl-faq h2 {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}
.cl-card h2::after,
.cl-card-raised h2::after,
.cl-panel h2::after,
.cl-hero h2::after,
.cl-cta h2::after,
.cl-offer h2::after,
.cl-demo h2::after,
.cl-alert h2::after,
.cl-note h2::after,
.cl-warn h2::after,
.cl-faq h2::after { content: none; }

/* ---- E. Playfair headline guards ---------------------------------------
   High-contrast serif + long Azerbaijani compounds ("Məsuliyyətli",
   "qeydiyyatdan", "provayderlərin") means hairline strokes at display size and
   ugly rags at 360px. Optical sizing keeps the thins from disappearing, and the
   rag is balanced with a last-resort break. */
h1, h2, h3, .cl-brand__word {
	font-optical-sizing: auto;
	font-variant-ligatures: common-ligatures;
}
h1, h2 {
	text-wrap: balance;
	-webkit-hyphens: auto;
	hyphens: auto;
}
h1 { word-break: break-word; }
/* Playfair's thin strokes need a touch more weight than a sans at small sizes. */
h3, h4 { font-weight: 700; }

/* ---- F. Wordmark: the engraved token -----------------------------------
   The mark is a milled round jeton: amber rim, eight edge notches, a cream
   field and an engraved serif R. It is inline SVG (inc/brand.php), so the plate
   below only has to hold it and not draw a competing box. */
.cl-brand { align-items: center; gap: 11px; }
.cl-brand__mark {
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	box-shadow: none;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.cl-brand__mark::after { content: none; }
.cl-brand__mark svg { display: block; }
.cl-token { transition: transform .2s ease; }
.cl-brand:hover .cl-token { transform: rotate(-14deg); }
.cl-brand__lock {
	gap: 1px;
	align-items: flex-start;
	flex-direction: column;
}
.cl-brand__word {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.02;
	letter-spacing: -0.1px;
	text-transform: none;
	color: #0F172A;
	transition: color .18s ease;
}
.cl-brand__cluster {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 1.9px;
	text-transform: uppercase;
	color: #5A6B84;
}
.cl-brand:hover .cl-brand__word { color: #8A5A00; }
.cl-brand:hover .cl-brand__cluster { color: #8A5A00; }
.cl-brand--footer .cl-brand__word { font-size: 19px; }
@media (max-width: 520px) {
	.cl-brand__word { font-size: 17.5px; }
	.cl-brand__cluster { font-size: 9px; letter-spacing: 1.4px; }
	.cl-brand__mark, .cl-token { width: 29px; height: 29px; }
}

/* ---- G. Header: white bar, trust strip ON TOP --------------------------
   The sibling closes its header with the legal rail; here the rail OPENS the
   document as a thin graphite strip and the white brand bar sits under it, so
   the two headers do not share a silhouette. */
.cl-header {
	background: #FFFFFF;
	border-bottom: 1px solid rgba(15, 23, 42, .12);
	box-shadow: 0 1px 0 rgba(217, 138, 11, .22);
	display: flex;
	flex-direction: column;
}
.cl-header .cl-instruments {
	order: -1;
	background: #EDF0F5;
	border-top: 0;
	border-bottom: 1px solid rgba(15, 23, 42, .10);
	padding: 6px 24px;
	justify-content: flex-start;
}
.cl-header .cl-instruments__legal { color: #4B5A6E; }
.cl-header .cl-instruments__legal a { color: #96600A; }
.cl-header .cl-instruments .cl-num { color: #7A4E00; }
@media (max-width: 600px) {
	.cl-header .cl-instruments { padding: 6px 16px; }
}
.cl-header .wp-block-button__link { padding: 11px 20px; font-size: 14px; }

/* Nav links: graphite by default, amber underline on hover — the accent never
   sits under 15px text as a fill. */
.cl-nav a,
.cl-nav .wp-block-navigation-item__content {
	color: #334155;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}
.cl-nav a:hover,
.cl-nav .wp-block-navigation-item__content:hover {
	color: #0F172A;
	border-bottom-color: #D98A0B;
}
.cl-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: #FFFFFF;
	color: #1F2937;
}
.cl-nav .wp-block-navigation__responsive-container.is-menu-open a { color: #334155; }

/* ---- H. Footer: the slate band -----------------------------------------
   Light theme, so the footer is a tinted band rather than a darker slab, with
   an amber hairline on top to close the page the way the top rule opened it. */
.cl-footer {
	background: #E7EBF1;
	border-top: 2px solid #D98A0B;
	color: #334155;
}
.cl-footer__col-title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #55647A;
}
.cl-footer__links a { color: #334155; text-decoration-color: rgba(15, 23, 42, .28); }
.cl-footer__links a:hover { color: #8A5A00; text-decoration-color: #D98A0B; }
.cl-footer__legal { border-top: 1px solid rgba(15, 23, 42, .14); }
.cl-payrail {
	background: #FFFFFF;
	border: 1px solid rgba(15, 23, 42, .10);
	border-radius: 14px;
}
.cl-payrail__title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #55647A;
}
.cl-payrail__note { color: #4B5A6E; }
.cl-chip {
	background: #F6F8FB;
	border: 1px solid rgba(15, 23, 42, .12);
	color: #334155;
	font-weight: 600;
}
.cl-chip--age { background: #7A1B22; border-color: #7A1B22; color: #FFFFFF; }

/* ---- I. Figures: mono, bronze -----------------------------------------
   Fira Code is reserved for numbers, the licence number, RTP and odds — the
   brief is explicit. Bronze #7A4E00 is 6.5:1 on the canvas, so a figure is
   readable at 12.5px and still visibly a different class of thing from prose. */
.cl-num,
.cl-game__mono,
.cl-game__rtp,
.cl-stat__num,
.cl-rtpbar__val,
.cl-tbl__lim {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	color: #7A4E00;
}
.cl-updated { border-top: 1px solid rgba(15, 23, 42, .12); color: #55647A; }
.cl-updated .cl-num { color: #7A4E00; }

/* RTP badge on a game tile: amber capsule, on-amber ink (6.3:1). */
.cl-game__rtp,
.cl-demo__badge {
	background: #FFF3DC;
	border: 1px solid rgba(217, 138, 11, .45);
	color: #7A4E00;
	font-weight: 600;
}
.cl-rtpbar__track { background: rgba(15, 23, 42, .09); }
.cl-rtpbar__fill { background: linear-gradient(90deg, #D98A0B, #8A5A00); }

/* ---- J. Provider marks: text wordmarks, never a borrowed logo file ------ */
.cl-provider {
	background: #FFFFFF;
	border: 1px solid rgba(15, 23, 42, .13);
	color: #334155;
	font-weight: 600;
	letter-spacing: .2px;
}
.cl-provider:hover { border-color: rgba(217, 138, 11, .5); color: #0F172A; }
.cl-pay {
	background: #FFFFFF;
	border: 1px solid rgba(15, 23, 42, .12);
	color: #334155;
}

/* ---- K. Live-dealer table list: the signature block --------------------
   This domain's whole reason to exist is the canlı-diler table list, so it gets
   the strongest component treatment: a token on the left, the dealer/limit
   figures in mono on the right, and an amber rail that appears on hover. */
.cl-tbl {
	background: #FFFFFF;
	border: 1px solid rgba(15, 23, 42, .10);
	border-left: 3px solid rgba(217, 138, 11, .35);
	border-radius: 12px;
	transition: border-left-color .18s ease, box-shadow .18s ease;
}
.cl-tbl:hover {
	border-left-color: #D98A0B;
	box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
}
.cl-tbl__name { color: #0F172A; font-weight: 700; }
.cl-tbl__prov { color: #55647A; }

/* ---- L. Tables: light zebra + a readable header ------------------------ */
.cl-table th,
.wp-block-table th {
	background: #EDF0F5;
	color: #0F172A;
	border-bottom: 2px solid rgba(217, 138, 11, .45);
}
.cl-table td,
.wp-block-table td {
	border-bottom: 1px solid rgba(15, 23, 42, .09);
	color: #334155;
}
.cl-table tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) { background: #F8FAFC; }
.wp-block-table table { background: #FFFFFF; }

/* ---- M. FAQ accordion on white ---------------------------------------- */
.cl-faq {
	background: #FFFFFF;
	border: 1px solid rgba(15, 23, 42, .10);
	border-radius: 14px;
}
.cl-faq summary { color: #0F172A; }
.cl-faq summary:hover { color: #8A5A00; }
.cl-faq[open] summary { border-bottom-color: rgba(15, 23, 42, .10); }
.cl-faq__answer { color: #334155; }

/* ---- N. Focus ring: amber-deep, visible on white AND on the canvas ----- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid #8A5A00;
	outline-offset: 2px;
	border-radius: 6px;
}
.cl-skip-link {
	background: #0F172A;
	color: #FFFFFF;
	font-family: "Source Sans 3", system-ui, sans-serif;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
}

/* ---- O. In-prose links: amber rule that thickens ---------------------- */
.entry-content a:not(.wp-element-button):not(.cl-game__play):not(.cl-quicklink):not(.cl-cat) {
	color: #96600A;
	text-decoration-color: rgba(217, 138, 11, .55);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.entry-content a:not(.wp-element-button):not(.cl-game__play):not(.cl-quicklink):not(.cl-cat):hover {
	color: #7A4E00;
	text-decoration-color: #D98A0B;
	text-decoration-thickness: 2px;
}

/* ---- P. Buttons ------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button {
	background: linear-gradient(158deg, #F3BE60 0%, #D98A0B 52%, #C07C0A 100%);
	color: #241703;
	box-shadow: 0 2px 0 rgba(122, 78, 0, .35);
}
.wp-block-button__link:hover,
.wp-element-button:hover { filter: brightness(1.04); color: #241703; }
.wp-block-button__link:active,
.wp-element-button:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(122, 78, 0, .35); }
.wp-block-button.cl-btn-outline .wp-block-button__link,
.wp-block-button__link.cl-btn-outline {
	background: #FFFFFF !important;
	color: #334155 !important;
	border: 1px solid rgba(15, 23, 42, .22);
	box-shadow: none;
}
.wp-block-button.cl-btn-outline .wp-block-button__link:hover {
	border-color: #D98A0B;
	color: #7A4E00 !important;
	background: #FFFBF3 !important;
}

/* ---- Q. Badges, tags, callouts on light -------------------------------- */
.cl-badge {
	background: #FFF8EC;
	border: 1px solid rgba(217, 138, 11, .42);
	color: #7A4E00;
}
.cl-tag {
	background: #F6F8FB;
	border: 1px solid rgba(15, 23, 42, .13);
	color: #334155;
}
.cl-tag--jackpot { background: linear-gradient(158deg, #F3BE60, #D98A0B); border-color: transparent; color: #241703; }
.cl-note { border-left: 3px solid #D98A0B; }
.cl-warn, .cl-alert { border-left: 3px solid #B3261E; background: #FEF6F5; }
.cl-alert__icon, .cl-warn strong { color: #8C1D18; }
.cl-lead { color: #334155; }
.cl-sep { background: rgba(15, 23, 42, .12); }

/* ---- R. Skeletons on light -------------------------------------------- */
.cl-skeleton {
	background: linear-gradient(90deg, #EDF1F6 0%, #DCE3EE 50%, #EDF1F6 100%);
	background-size: 840px 100%;
}

/* ---- S. Reduced motion / forced colours ------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cl-brand:hover .cl-token { transform: none; }
	.cl-tbl, .cl-token, .cl-provider { transition: none; }
	.wp-block-button__link:active, .wp-element-button:active { transform: none; }
}
@media (forced-colors: active) {
	.cl-card, .cl-card-raised, .cl-panel, .cl-tbl, .cl-faq, .cl-payrail { border: 1px solid CanvasText; }
	body::before { display: none; }
}

/* ---- T. Small screens -------------------------------------------------- */
@media (max-width: 600px) {
	.entry-content h2 { padding-top: 16px; margin-top: 32px; }
	.entry-content h2::after { width: 48px; }
}

/* ---- U. Accent-as-text sweep ------------------------------------------
   Generated by royale-pipeline/contrast_canli.py.

   The inherited DARK theme used its bright accent as an ink colour, which was
   correct on a midnight panel. After the flip to Slate & Amber that slot holds
   amber #D98A0B, and amber on white is 2.77:1 — below the 4.5:1 body floor and
   below even the 3:1 large-text/UI floor. The identity brief is explicit that the
   accent is for FILLS and BUTTONS, not for small text on white.

   Every selector below was found mechanically, so the sweep is complete rather
   than a sample: figures go to bronze #7A4E00 (6.5:1 on the canvas, and visibly a
   different class of thing from prose), everything else to amber-deep #8A5A00
   (5.93:1 on white). Amber keeps every fill, border, rule and gradient it had.
   ------------------------------------------------------------------------- */
.cl-stat__num,
.cl-num,
.wp-block-query-pagination .page-numbers.current,
.cl-rtpbar__val,
.cl-updated .cl-num {
	color: var(--wp--preset--color--bronze);
}
.cl-badge,
.cl-store:hover,
.cl-stars,
.cl-faq > summary::after,
.cl-stat-tile .v,
.cl-bonus__amount,
.cl-table .cl-col-hi,
.cl-warn li::before,
.cl-brand__cluster,
.cl-lang a.is-active,
.cl-instruments__legal b,
.cl-footer a:hover,
.cl-langtag,
.cl-rtp .v,
.cl-footer a:focus-visible, .cl-breadcrumb a:hover, .cl-breadcrumb a:focus-visible,
.cl-reels__reel,
.cl-filter a:hover, .cl-filter a:focus-visible,
.cl-game__rtp,
.cl-jackpot .r,
.cl-demo__badge,
.cl-payout li.is-top .x,
.cl-brand:hover .cl-brand__mark,
.cl-cat__count,
.cl-table--hi3 thead th:nth-child(3), .cl-table--hi3 tbody td:nth-child(3),
.cl-brand:hover .cl-brand__word,
.cl-cat__ico, .cl-feature__icon, .cl-quicklink__icon {
	color: var(--wp--preset--color--amber-deep);
}

/* ---- V. Two inherited washes assumed a dark canvas -----------------------
   The interior-hero glow and the CTA banner glow were slate radials at .16 alpha.
   On midnight blue that is a lift; on #F2F4F7 it is a grey smudge behind the H1
   and behind the CTA heading, and it drags the text contrast down for no visual
   gain. Both become warm amber at a much lower alpha, which is a tint the eye
   reads as paper rather than dirt. */
.cl-hero:has(.cl-breadcrumb)::before {
	background:
		radial-gradient(720px 340px at 50% 4%, rgba(217, 138, 11, .11), transparent 66%),
		radial-gradient(380px 200px at 50% 0%, rgba(217, 138, 11, .07), transparent 62%);
}
.cl-cta::after {
	background: radial-gradient(620px 250px at 50% 0%, rgba(217, 138, 11, .12), transparent 68%);
}
/* The CTA shell: the inherited 22px radius fought the 14px card scale. */
.cl-cta { border-radius: 16px; }

/* ---- W. UX pass: the one measured contrast failure ----------------------
   Found by shooting all six pages at 360/768/1024/1440 and computing the WCAG
   ratio of every text node against its REAL painted background
   (royale-pipeline/shoot_canli.js). Everything else came back clean — no
   overflow, no sub-44px target, no console error — but the language chip failed:

     .cl-langtag  amber-deep #8A5A00 on the header rail = 4.31:1  (needs 4.5)

   The chip inherited a translucent ink background (rgba(15,23,42,.07)), which on
   the #EDF0F5 header rail and the #E7EBF1 footer band composites down to
   rgb(216,220,227) and eats the last 0.2 of the ratio. Giving it the same white
   face the other chips have both fixes the ratio (5.6:1 on white) and makes it
   read as a control rather than a smudge. */
.cl-langtag {
	background: #FFFFFF;
	border: 1px solid rgba(217, 138, 11, .42);
	color: #8A5A00;
	min-height: 30px;
}

/* ---- X. UX pass: two components broke on real content -------------------
   Found by shooting the built pages, not by reading the CSS.

   1. `.cl-warn` was authored upstream as a LIST component
      (`display:grid` on the container, all the padding and the ⚠ marker on `li`).
      The page authors legitimately used it as a single prose callout
      (`<div class="cl-warn">…<span class="cl-num">94,74%</span>…</div>`), and grid
      BLOCKIFIES inline children: every `.cl-num` became its own grid row, so one
      sentence about the American wheel rendered as five stacked fragments with the
      text jammed against the border. Same latent trap in `.cl-alert`.

      Rather than re-author the pages, the component now supports both shapes: the
      grid behaviour is scoped to the list form, and a non-list callout gets its own
      padded box. A component that shatters when handed a `<div>` is the bug.

   2. `.cl-pay` is a fixed-height flex tile with no minimum width, so in a chip rail
      the shortest label ("m10") collapsed to its text box and clipped. */
ul.cl-warn, ol.cl-warn {
	display: grid;
	gap: 10px;
	padding: 0;
}
.cl-warn:not(ul):not(ol),
.cl-alert:not(ul):not(ol) {
	display: block;
	padding: 14px 18px 14px 20px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
}
.cl-warn:not(ul):not(ol) > .cl-num,
.cl-alert:not(ul):not(ol) > .cl-num {
	display: inline;
}
/* Keep the ⚠ marker on the list form only — on a prose callout the red rail is
   already the signal and a floating glyph would sit on top of the first word. */
.cl-warn:not(ul):not(ol) > li::before { content: none; }

.cl-pay {
	min-width: 104px;
	padding-inline: 16px;
	height: 56px;
	flex: 0 1 auto;
}
@media (max-width: 480px) {
	.cl-pay { min-width: 0; flex: 1 1 calc(50% - 5px); height: 50px; }
}

/* ---- Y. Mono figures: tighten the decimal comma ------------------------
   Azerbaijani writes decimals with a comma, and in a monospace cell the comma is
   centred in its own advance width, so "94,74%" renders as "94 , 74%" — it reads
   as three tokens instead of one number. A touch of negative tracking closes the
   cell without losing the tabular alignment that made mono the right choice. */
.cl-num,
.cl-game__mono,
.cl-game__rtp,
.cl-stat__num,
.cl-rtpbar__val,
.cl-tbl__lim,
.cl-stat-tile .v {
	letter-spacing: -0.035em;
}