/* ═══════════════════════════════════════════════════════════════════════════
   CASINO AFFILIATE PRO v8 — STYLE BASE
   Shared layout/reset only. Style-specific files handle the look.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── RESET ───────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: transparent; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: -9999px;
}
.skip-link:focus {
    inset-inline-start: 1rem;
    top: 1rem;
    z-index: 999;
    padding: 8px 16px;
    background: #000;
    color: #fff;
}

/* ── DYNAMIC HEIGHT VARS (set by JS at runtime) ────────────────────── */
:root {
    --header-height-actual: 64px;
    --toc-height-actual: 0px;
}

/* ── COMMON CONTAINERS ─────────────────────────────────────────────── */
.container {
    max-width: var(--container, 1200px);
    margin: 0 auto;
    padding: 0 var(--gutter, 24px);
    width: 100%;
}

/* ── DROPDOWN MENU SHARED STRUCTURE ────────────────────────────────── */
.header-nav-list,
.mobile-drawer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-nav-list { display: flex; align-items: center; gap: 2px; }

.header-nav-list .menu-item-has-children { position: relative; }

.header-nav-list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 8px;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 220ms cubic-bezier(.4,0,.2,1), transform 220ms cubic-bezier(.4,0,.2,1), visibility 0s linear 160ms;
    z-index: 600;

    /* Visual — Solid gradient (matches mockup) */
    background: linear-gradient(160deg, #161a2a, #0e1119);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="light"] .header-nav-list .sub-menu {
    background: linear-gradient(160deg, #ffffff, #f5f8fb);
    border-color: rgba(15,23,42,.12);
    box-shadow: 0 16px 40px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.7);
}
/* Top hairline gradient — 1px, brand color */
.header-nav-list .sub-menu::before {
    content: '';
    position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--brand-primary) 50%, transparent),
        transparent);
}
[data-theme="light"] .header-nav-list .sub-menu::before {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--brand-primary) 35%, transparent),
        transparent);
}

/* Featured-card layout (Varyant X) — applied when walker adds sub-X class */
.header-nav-list .sub-menu.sub-X {
    min-width: 520px;
    padding: 14px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 14px;
    align-items: start; /* keeps featured card at natural height, no stretching */
}
.header-nav-list .sub-menu.sub-X .sub-links {
    list-style: none; margin: 0; padding: 0;
}
.header-nav-list .sub-menu.sub-X .sub-links li {
    list-style: none; margin: 0; padding: 0;
}

/* Featured card (Image-First) */
.feat-X {
    border-radius: 12px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
    display: flex; flex-direction: column;
    background: linear-gradient(160deg, #161a2a, #0e1119);
    align-self: start;
}
[data-theme="light"] .feat-X {
    background: linear-gradient(160deg, #ffffff, #f5f8fb);
    border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
}
.feat-X-img {
    aspect-ratio: 16 / 9;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.feat-X-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Mobile: hide featured card entirely — only show link list */
@media (max-width: 900px) {
    .sub-X .mm-featured { display: none; } /* v9.32: tek kart, mobilde X panelinde gizli */
    .header-nav-list .sub-menu.sub-X {
        grid-template-columns: 1fr;
        min-width: 240px;
    }
}
.feat-X-img-placeholder {
    background:
        radial-gradient(220px 140px at 30% 50%, color-mix(in srgb, var(--brand-primary) 50%, transparent), transparent 65%),
        radial-gradient(180px 120px at 80% 30%, color-mix(in srgb, var(--cc-gold) 35%, transparent), transparent 65%),
        linear-gradient(135deg, #0a1f1a, #0f1b2e);
    font-size: 38px;
    min-height: 100px;
}
[data-theme="light"] .feat-X-img-placeholder {
    background:
        radial-gradient(220px 140px at 30% 50%, color-mix(in srgb, var(--brand-primary) 30%, transparent), transparent 65%),
        radial-gradient(180px 120px at 80% 30%, color-mix(in srgb, var(--cc-gold) 22%, transparent), transparent 65%),
        linear-gradient(135deg, #f0fdf9, #f5f8fb);
}
.feat-X-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.45));
    pointer-events: none;
}
[data-theme="light"] .feat-X-img::after { display: none; }

.feat-X-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.feat-X-eyebrow {
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cc-green-2);
}
.feat-X-title {
    font-size: 14px; font-weight: 800; line-height: 1.3;
    color: var(--text-primary);
}
.feat-X-desc {
    font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin: 0;
}
.feat-X-cta {
    margin-top: 4px; padding: 7px 12px;
    background: linear-gradient(135deg, var(--cc-green-2), var(--cc-teal));
    color: #04261b; font-size: 11px; font-weight: 800;
    border-radius: 7px; text-decoration: none;
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 5px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.feat-X-cta:hover {
    background: linear-gradient(135deg, var(--cc-teal), var(--cc-green-2));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-primary) 50%, transparent);
}

/* Invisible bridge — prevents hover loss across gap */
.header-nav-list .sub-menu::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

/* Hover open (desktop) */
@media (min-width: 901px) {
    /* v9.32 m32a: gorunurluk kapisi. Kapanista panel 160ms hit-testable kalir,
       koprü + panel uzerine geri donus menuyu yeniden acar; acilis gecikmesiz. */
    .header-nav-list .menu-item-has-children:hover > .sub-menu,
    .header-nav-list .menu-item-has-children:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s;
    }
}

/* JS-controlled open class */
.header-nav-list .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Sub-sub-menu (grandchild) — yan flyout */
@media (min-width: 901px) {
    .header-nav-list .sub-menu .sub-menu {
        top: -6px;
        inset-inline-start: calc(100% + 4px);
    }
}

.header-nav-list .sub-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav-list .sub-menu a {
    display: block;
    position: relative;
    padding: 8px 12px;
    padding-inline-end: 28px; /* room for hover arrow */
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: background .15s, color .15s, padding .18s;
    white-space: nowrap;
}
.header-nav-list .sub-menu a:hover {
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    color: var(--cc-green-2);
}
/* Arrow: positioned absolutely so it doesn't push label.
   v9.32: mega panelde (.sub-mega) ok basilmaz; linkin sonundaki mm-star
   puan chipinin ustune biniyordu. Standart dropdownlarda davranis ayni. */
.header-nav-list .sub-menu:not(.sub-mega) a:not(.mf-cta)::after {
    content: '→';
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    opacity: 0;
    transition: opacity .18s, transform .18s;
    color: var(--cc-green-2);
    font-size: 11px;
    pointer-events: none;
}
.header-nav-list .sub-menu:not(.sub-mega) a:not(.mf-cta):hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Chevron icon */
.menu-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-inline-start: 6px;
    margin-top: -3px;
    transition: transform 220ms cubic-bezier(.4,0,.2,1);
    opacity: 0.7;
    vertical-align: middle;
}
.menu-item-has-children:hover > a > .menu-chevron,
.menu-item-has-children.is-open > a > .menu-chevron {
    transform: rotate(225deg);
    opacity: 1;
}

/* Sub-menu chevron points right (for flyout) */
.sub-menu .menu-chevron {
    transform: rotate(-45deg);
}
.sub-menu .menu-item-has-children:hover > a > .menu-chevron,
.sub-menu .menu-item-has-children.is-open > a > .menu-chevron {
    transform: rotate(-45deg) translate(2px, 2px);
}

/* MOBILE — hide desktop nav */
@media (max-width: 900px) {
    .header-nav { display: none; }
}

/* MOBILE DRAWER ACCORDION */
.mobile-drawer-list { display: flex; flex-direction: column; gap: 2px; }
.mobile-drawer-list li { list-style: none; }
.mobile-drawer-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    text-decoration: none;
}
.mobile-drawer-list .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms cubic-bezier(.4,0,.2,1);
    padding-inline-start: 14px;
}
.mobile-drawer-list .menu-item-has-children.is-open > .sub-menu {
    max-height: 800px;
}
.mobile-drawer-list .menu-chevron {
    transform: rotate(45deg);
}
.mobile-drawer-list .menu-item-has-children.is-open > a > .menu-chevron {
    transform: rotate(225deg);
}

/* ── TOC ITEM ELLIPSIS (v8) ─────────────────────────────────────────── */
.casino-toc-link {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
@media (max-width: 768px) {
    .casino-toc-link { max-width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CASINO AFFILIATE PRO — v4.0.0 MINIMALIST PREMIUM DESIGN SYSTEM
   Dark (default) + Light mode via [data-theme="light"]
   Based on Design 01 prototype aesthetic
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ───────────────────────────────────────────────────── */
:root {
    /* DARK (default) */
    --bg-base: #0f1117;
    --bg-surface-1: #161922;
    --bg-surface-2: #1c2030;
    --bg-surface-3: #252a36;
    --bg-subtle: #11141c;
    --bg-elevated: #1a1d27;

    --text-primary: #ffffff;
    --text-secondary: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    --text-inverted: #0f172a;

    --brand-primary: #10b981;
    --brand-primary-hover: #059669;
    --brand-accent: #fbbf24;
    --brand-cta: #10b981;
    --brand-cta-hover: #059669;
    --brand-danger: #ef4444;
    --brand-info: #3b82f6;

    /* Casino color tokens — derived from brand for site-wide tinting */
    --cc-green: var(--brand-primary);
    --cc-green-2: #34d399; /* fallback for browsers without color-mix */
    --cc-green-2: color-mix(in srgb, var(--brand-primary) 85%, #fff 15%);
    --cc-teal: #14b8a6; /* fallback */
    --cc-teal: color-mix(in srgb, var(--brand-primary) 75%, #000 25%);
    --cc-gold: var(--brand-accent);
    --cc-gold-2: #fcd34d; --cc-gold-2: color-mix(in srgb, var(--brand-accent) 80%, #fff 20%);
    /* v9.32 m33: sport kimligi. --cc-teal marka yesilinden turedigi icin
       sport gorsel dili icin GERCEK teal ayri tokenda sabitlendi. */
    --cc-sport: #14b8a6;
    /* v9.32 m21: icerik karti golgesi (#767676 tonlu cift katman) */
    --cic-copy-shadow: 0 2px 8px rgba(118,118,118,.28), 0 14px 38px rgba(118,118,118,.34);
    /* v9.32 m19: overlap gorsel yukseklik tavani (canlida buradan ayarlanir) */
    --cic-overlap-max: 370px;

    /* CTA (.ctaB) text + arrow color. ONE source of truth so the <a> and <button>
       variants can never desync. Dark ink reads on the gold fill in both modes. */
    --cc-cta-ink: #231603;

    --rank-gold: var(--brand-accent);
    --rank-silver: #cbd5e1;
    --rank-bronze: #f97316;
    --rank-default: #64748b;

    --border: #252a36;
    --border-strong: #334155;
    --border-subtle: #1e2230;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.2);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.25);
    --shadow-md: 0 4px 16px rgba(0,0,0,.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.35);
    --shadow-xl: 0 24px 80px rgba(0,0,0,.5);

    --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;

    --font: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;

    --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
    --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;

    --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px;
    --sp-7: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 48px; --sp-12: 64px;

    --container: 1320px; --gutter: 24px;
    --ease: cubic-bezier(.4,0,.2,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms;

    --header-height: 64px;
}

/* LIGHT MODE */
[data-theme="light"] {
    --bg-base: #eef1f5;
    --bg-surface-1: #ffffff;
    --bg-surface-2: #f1f4f8;
    --bg-surface-3: #e3e8ef;
    --bg-subtle: #f6f8fb;
    --bg-elevated: #ffffff;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #5b6877;
    --text-dim: #8593a3;
    --text-inverted: #ffffff;

    --brand-accent: #d97706;
    --rank-gold: var(--brand-accent);
    --rank-silver: #94a3b8;
    --rank-bronze: #a16207;
    --rank-default: #94a3b8;

    /* Casino color tokens — darker variants for light bg readability */
    --cc-green-2: #0f7a52; /* fallback for browsers without color-mix */
    --cc-green-2: color-mix(in srgb, var(--brand-primary) 80%, #000 20%);
    --cc-teal: #0a6e62; /* fallback */
    --cc-teal: color-mix(in srgb, var(--brand-primary) 65%, #000 35%);
    --cc-sport: #0a6e62; /* v9.32 m33: acik modda koyu gercek teal */

    --border: #c8d0db;
    --border-strong: #aab4c2;
    --border-subtle: #dde3ea;

    --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
    --shadow-sm: 0 2px 6px rgba(15,23,42,.09);
    --shadow-md: 0 5px 16px rgba(15,23,42,.11);
    --shadow-lg: 0 12px 30px rgba(15,23,42,.15);
    --shadow-xl: 0 26px 54px rgba(15,23,42,.2);
}

/* LIGHT MODE — page background must be light. Overrides the dark
   bg-start/bg-end gradient that the body uses in dark mode. */
[data-theme="light"] body {
    background-color: var(--bg-base);
    background-image:
        radial-gradient(820px 560px at 8% -4%, color-mix(in srgb, var(--brand-primary) 6%, transparent), transparent 62%),
        radial-gradient(760px 560px at 96% 4%, color-mix(in srgb, var(--brand-accent) 5%, transparent), transparent 60%),
        linear-gradient(180deg, #f5f7fa, #e8ecf2);
}

/* ── RESET ───────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font);
    font-size: var(--text-base);
    color: var(--text-primary);
    background-color: var(--bg-base);
    background-image:
        radial-gradient(900px 620px at 8% -4%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 60%),
        radial-gradient(820px 600px at 96% 6%, color-mix(in srgb, var(--brand-accent) 7%, transparent), transparent 58%),
        linear-gradient(180deg, var(--bg-start, var(--bg-base)), var(--bg-end, var(--bg-base)));
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

/* Sticky footer: main fills remaining height so the footer sits at the bottom
   even on short pages (e.g. 404). */
.site-main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
button { cursor: pointer; font: inherit; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
input, textarea, select {
    font: inherit;
    background: var(--bg-surface-1);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 14px;
    transition: border-color var(--dur-fast);
}
/* Checkboxes and radios are native controls, not text fields. The rule above
   adds 10px 14px padding which, with box-sizing:border-box, shrinks the box and
   hides the native check/dot. Keep their padding at zero. (v9.28.10) */
input[type="checkbox"], input[type="radio"] { padding: 0; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}

/* ── UTILITIES ───────────────────────────────────────────────────────── */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link {
    position: absolute; top: -100%; inset-inline-start: 0;
    background: var(--brand-primary); color: #fff;
    padding: 8px 16px; z-index: 10000;
    border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { top: 0; }

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--font); font-weight: 600; white-space: nowrap;
    border: none; border-radius: var(--r-md);
    transition: all var(--dur-fast) var(--ease);
    cursor: pointer; line-height: 1.4; text-decoration: none;
}
.btn:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
.btn-primary {
    background: var(--brand-cta); color: #fff;
    padding: 11px 22px; font-size: var(--text-sm);
}
.btn-primary:hover {
    background: var(--brand-cta-hover);
    color: #fff;
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
    background: transparent; color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 10px 20px; font-size: var(--text-sm);
}
.btn-secondary:hover {
    background: var(--bg-surface-2);
    border-color: var(--border-strong);
}
.btn-ghost {
    background: transparent; color: var(--text-muted);
    padding: 8px 14px; font-size: var(--text-sm);
}
.btn-ghost:hover { color: var(--text-primary); }
.btn-lg { padding: 14px 28px; font-size: var(--text-base); }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ── SITE HEADER ─────────────────────────────────────────────────────── */
.site-header {
    position: sticky; top: 0; z-index: 500;
    background: color-mix(in srgb, var(--bg-surface-1) 30%, transparent);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    border-bottom: 1px solid var(--border);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.03);
    transition: background var(--dur-base) var(--ease);
}
.scroll-progress {
    position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0; z-index: 600;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 22%, #000), var(--brand-primary));
    transition: width .1s linear; pointer-events: none;
}
.header-main { padding: 14px 0; }
.header-inner {
    display: flex; align-items: center; gap: 32px;
    min-height: 44px;
}
.site-logo { flex-shrink: 0; display: flex; align-items: center; max-width: 240px; }
.site-logo img { height: 36px; max-height: 40px; width: auto; }
/* Dark/light logo swap — de-scoped from .site-logo so it works wherever
   casino_render_site_logo() is output (header .site-logo AND footer
   .footer-logo). */
.site-logo-dark { display: inline-block; }
.site-logo-light { display: none; }
[data-theme="light"] .site-logo-dark { display: none; }
[data-theme="light"] .site-logo-light { display: inline-block; }
.logo-text {
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ── HEADER NAV (v8) ───────────────────────────────────────────── */
.header-nav { flex: 1; }
.header-nav-list {
    display: flex; gap: 2px; align-items: center;
    list-style: none; padding: 0; margin: 0;
}
.header-nav-list > li { list-style: none; }
.header-nav-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 14px;
    font-weight: 500; font-size: 13px;
    color: var(--text-secondary);
    border-radius: 100px;
    transition: all 200ms ease;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
}
.header-nav-link:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}
[data-theme="light"] .header-nav-link:hover { background: rgba(0,0,0,0.05); }

.header-nav-list > .current-menu-item > .header-nav-link,
.header-nav-list > .current-menu-parent > .header-nav-link,
.header-nav-list > .current-menu-ancestor > .header-nav-link {
    color: var(--text-primary);
}
.header-nav-list > .current-menu-item > .header-nav-link {
    background: var(--bg-surface-2);
    color: var(--brand-primary);
    font-weight: 600;
}

.header-actions {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-inline-start: auto;
}

/* Theme toggle */
.theme-toggle-btn {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-surface-1);
    color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--dur-fast);
}
.theme-toggle-btn:hover {
    background: var(--bg-surface-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.theme-toggle-btn .icon-sun { display: none; }
.theme-toggle-btn .icon-moon { display: block; }
[data-theme="light"] .theme-toggle-btn .icon-moon { display: none; }
[data-theme="light"] .theme-toggle-btn .icon-sun { display: block; }

/* Language switcher */
.lang-switcher { position: relative; }
.lang-switcher-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 600;
    transition: all var(--dur-fast);
}
.lang-switcher-btn:hover {
    background: var(--bg-surface-2);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.lang-dropdown {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 6px;
    min-width: 140px;
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 100;
}
.lang-switcher.is-open .lang-dropdown { display: block; }
.lang-dropdown a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    border-radius: var(--r-sm);
    transition: background var(--dur-fast);
}
.lang-dropdown a:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.lang-dropdown a.active { color: var(--brand-primary); background: var(--bg-surface-2); }
.lang-flag {
    width: 20px; height: 14px; border-radius: 3px;
    object-fit: cover; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.25);
}
.lang-caret { flex-shrink: 0; opacity: .7; }

/* Mobile menu button */
.mobile-menu-btn {
    display: none;
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-surface-1);
    color: var(--text-primary);
    align-items: center; justify-content: center;
}
.mobile-menu-btn:hover { background: var(--bg-surface-2); }
.mobile-menu-btn span {
    display: block; width: 18px; height: 2px;
    background: currentColor;
    position: relative;
    border-radius: 1px;
    transition: all var(--dur-base);
}
.mobile-menu-btn span::before,
.mobile-menu-btn span::after {
    content: ''; position: absolute; inset-inline-start: 0; width: 18px; height: 2px;
    background: currentColor; border-radius: 1px;
    transition: all var(--dur-base);
}
.mobile-menu-btn span::before { top: -6px; }
.mobile-menu-btn span::after { top: 6px; }

@media (max-width: 900px) {
    .header-nav { display: none; }
    .mobile-menu-btn { display: inline-flex; }
    /* Search feature: only the light-mode toggle is hidden on mobile
       (it also lives in the drawer). Language + search stay in the header. */
    .theme-toggle-btn { display: none; }
}

/* ── MOBILE DRAWER ───────────────────────────────────────────────────── */
.mobile-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    z-index: 900;
    opacity: 0; visibility: hidden;
    transition: all var(--dur-base);
}
.mobile-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.mobile-drawer {
    position: fixed;
    top: 0; inset-inline-end: 0; bottom: 0;
    width: 340px; max-width: 86vw;
    background:
        radial-gradient(320px 240px at 90% 3%, color-mix(in srgb, var(--brand-primary) 20%, transparent), transparent 62%),
        radial-gradient(300px 260px at 4% 80%, color-mix(in srgb, var(--brand-accent) 13%, transparent), transparent 66%),
        #0a0c0b;
    border-inline-start: 1px solid var(--border);
    z-index: 950;
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
[dir="rtl"] .mobile-drawer { transform: translateX(-100%); }
.mobile-drawer.is-open { transform: translateX(0); }
[data-theme="light"] .mobile-drawer {
    background:
        radial-gradient(320px 240px at 90% 3%, color-mix(in srgb, var(--brand-primary) 13%, transparent), transparent 62%),
        radial-gradient(300px 260px at 4% 80%, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent 66%),
        var(--bg-surface-1);
}

/* drawer header */
.mobile-drawer-header {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px 4px;
}
.mobile-drawer-header .logo-text { font-size: 18px; }
.mobile-drawer-close {
    width: 37px; height: 37px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mobile-drawer-close:hover { color: var(--text-primary); }

/* scrollable body */
.mobile-drawer-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 14px 18px 18px;
    display: flex; flex-direction: column; gap: 18px;
}
.md-eyebrow {
    font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 11px;
}

/* bento popular pages */
.md-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.md-bt {
    position: relative; overflow: hidden;
    border-radius: 16px; text-decoration: none;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.md-bt:active { transform: scale(.98); }
.md-bt:hover { border-color: var(--border-strong); }
[data-theme="light"] .md-bt { background: #fff; box-shadow: var(--shadow-sm); }
.md-bt-hero {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 13px;
    background:
        radial-gradient(220px 150px at 88% 8%, color-mix(in srgb, var(--brand-primary) 26%, transparent), transparent 66%),
        color-mix(in srgb, var(--brand-primary) 9%, var(--bg-surface-1));
    border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
}
[data-theme="light"] .md-bt-hero {
    background:
        radial-gradient(220px 150px at 88% 8%, color-mix(in srgb, var(--brand-primary) 20%, transparent), transparent 66%),
        color-mix(in srgb, var(--brand-primary) 8%, #fff);
}
.md-bt-sm:last-child:nth-child(even) { grid-column: 1 / -1; }
.md-bt-ico {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, color-mix(in srgb, var(--brand-primary) 78%, #fff), var(--brand-primary));
}
.md-bt-ico svg { width: 19px; height: 19px; color: #04261b; }
.md-bt-ico img { width: 20px; height: 20px; object-fit: contain; }
.md-bt-ico.gold {
    background: linear-gradient(140deg, color-mix(in srgb, var(--brand-accent) 78%, #fff), var(--brand-accent));
}
.md-bt-ico.gold svg { color: #3a2c05; }
.md-bt-ico.ghost {
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    border: 1px solid var(--border);
}
.md-bt-ico.ghost svg { color: var(--brand-primary); }
.md-bt-hero .md-bt-ico { width: 44px; height: 44px; border-radius: 13px; }
.md-bt-hero .md-bt-ico svg { width: 22px; height: 22px; }
.md-bt-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.md-bt-tx strong { font-size: 15.5px; font-weight: 700; color: var(--text-primary); }
.md-bt-tx span { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.md-bt-sm { display: flex; flex-direction: column; gap: 9px; min-height: 98px; }
.md-bt-name {
    font-size: 12.5px; font-weight: 700; color: var(--text-primary);
    margin-top: auto; line-height: 1.3;
}
.md-bt-sub { font-size: 9.5px; font-weight: 600; color: var(--text-dim); margin-top: -5px; }

/* drawer nav */
.mobile-drawer-nav {
    flex-shrink: 0;
    --md-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
.mobile-drawer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-drawer-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px;
    font-size: 14px; font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 12px;
    transition: background var(--dur-fast);
}
.mobile-drawer-list > li > a::after {
    content: ""; width: 16px; height: 16px; margin-inline-start: auto; flex-shrink: 0;
    background: currentColor; opacity: .32;
    -webkit-mask: var(--md-chev) center / contain no-repeat;
    mask: var(--md-chev) center / contain no-repeat;
}
[dir="rtl"] .mobile-drawer-list > li > a::after { transform: scaleX(-1); }
.mobile-drawer-nav a:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.mobile-drawer-list .is-current {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    border: 1px solid var(--border);
}
.mobile-drawer-list .sub-menu {
    list-style: none; margin: 2px 0 4px 14px; padding: 0;
    padding-inline-start: 10px;
    border-inline-start: 1px solid var(--border);
}
.mobile-drawer-list .sub-menu a { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.mobile-drawer-list .sub-menu a::after { display: none; }

/* drawer footer */
.mobile-drawer-footer {
    flex-shrink: 0;
    padding: 13px 18px 18px;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 10px;
}
.md-foot-row { display: flex; gap: 9px; align-items: stretch; }
.md-toggle {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 13px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px; font-weight: 700; font-family: inherit;
    cursor: pointer;
    transition: color var(--dur-fast);
}
.md-toggle:hover { color: var(--text-primary); }
.md-toggle svg { color: var(--brand-accent); flex-shrink: 0; }
.md-toggle .icon-sun { display: none; }
[data-theme="light"] .md-toggle .icon-moon { display: none; }
[data-theme="light"] .md-toggle .icon-sun { display: block; }
.md-toggle .md-tg-light { display: none; }
[data-theme="light"] .md-toggle .md-tg-dark { display: none; }
[data-theme="light"] .md-toggle .md-tg-light { display: inline; }
.md-lang { position: relative; flex-shrink: 0; }
.md-lang-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 13px; border-radius: 11px;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
    transition: color var(--dur-fast);
}
.md-lang-btn:hover { color: var(--text-primary); }
.md-lang-caret { opacity: .7; transition: transform var(--dur-fast); }
.md-lang.is-open .md-lang-caret { transform: rotate(180deg); }
.md-lang-menu {
    position: absolute;
    bottom: calc(100% + 8px); inset-inline-end: 0;
    min-width: 168px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-strong);
    border-radius: 12px; padding: 6px;
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 20;
}
.md-lang.is-open .md-lang-menu { display: block; }
.md-lang-menu a {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    text-decoration: none;
}
.md-lang-menu a:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.md-lang-menu a.is-active {
    color: var(--brand-primary);
    background: var(--bg-surface-2);
}
.md-cta {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 14px;
    border-radius: 13px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 88%, #fff), var(--brand-primary));
    color: #04241a;
    font-size: 13.5px; font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--brand-primary) 60%, transparent);
    transition: transform var(--dur-fast);
}
.md-cta:active { transform: scale(.99); }

/* ── HERO SECTION ────────────────────────────────────────────────────── */
.hero-section {
    padding: var(--sp-12) 0 var(--sp-10);
    text-align: center;
    background: var(--bg-base);
}
.hero-eyebrow {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 12px;
    display: inline-block;
}
.hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 16px;
}
.hero-subtitle {
    font-size: var(--text-lg);
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── SECTIONS ────────────────────────────────────────────────────────── */
.section { padding: var(--sp-10) 0; }
.section-header {
    margin-bottom: var(--sp-8);
}
.section-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.section-sub {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   CASINO LIST — Design 01 Minimal (exact prototype match)
   ═══════════════════════════════════════════════════════════════════════ */

.casino-list-shortcode { margin-block: var(--sp-8); }
/* Header — EXACT copy of the homepage "Popular Casino Games" pattern
   (.hp-eyebrow / .hp-shead h2 / .hp-lead from homepage-glass.css, values inlined
   because --hp-* tokens only exist on the homepage stylesheet) */
/* Eyebrow — GREY text + GREEN leading line (matches the Popular Casino
   Games section look: the line carries the accent, the text stays muted) */
.casino-list-shortcode .casino-list-shortcode-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}
.casino-list-shortcode .casino-list-shortcode-eyebrow::before {
    content: ''; width: 20px; height: 1px;
    background: var(--cc-green-2); flex-shrink: 0;
}
[data-theme="light"] .casino-list-shortcode .casino-list-shortcode-eyebrow::before { background: var(--cc-green-2); } /* --hp-green light */
.casino-list-shortcode .casino-list-shortcode-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif; /* --hp-display */
    font-size: clamp(26px, 3.7vw, 38px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.14;
    margin: 14px 0 12px;
    /* The hp pattern's h2 is actually painted by the global heading rule
       (var(--text-primary)), not --hp-text — match that exactly. */
    color: var(--text-primary);
}
.casino-list-shortcode .casino-list-shortcode-sub {
    color: rgba(243,245,244,.66); /* --hp-text-2 dark */
    font-size: 15.5px;
    line-height: 1.68;
    max-width: 640px;
    margin-bottom: 34px;
}
[data-theme="light"] .casino-list-shortcode .casino-list-shortcode-sub { color: rgba(15,23,42,.68); }

/* ═══════════════════════════════════════════════════════════════════════
   CASINO CARD — Aurora Glass Row
   ═══════════════════════════════════════════════════════════════════════ */
.casino-list {
    container-type:inline-size;
    --cc-ink:#fff; --cc-ink-2:rgba(255,255,255,.72); --cc-ink-3:rgba(255,255,255,.48); --cc-ink-4:rgba(255,255,255,.34);
    --cc-glass:rgba(255,255,255,.055); --cc-glass-2:rgba(255,255,255,.085); --cc-glass-3:rgba(255,255,255,.12);
    --cc-line:rgba(255,255,255,.11); --cc-line-2:rgba(255,255,255,.2);
    --cc-sheen:rgba(255,255,255,.14);
    /* cc-green/cc-green-2/cc-teal/cc-gold/cc-gold-2 inherited from :root (brand-derived) */
    --cc-shadow-2:0 18px 50px -14px rgba(0,0,0,.55);
    --cc-shadow-3:0 30px 70px -18px rgba(0,0,0,.68);
    --cc-ease:cubic-bezier(.22,.61,.36,1);
    --cc-spring:cubic-bezier(.34,1.4,.64,1);
    display:block;
    position:relative;
    padding:18px;
    border-radius:26px;
}

/* Light mode — token overrides */
[data-theme="light"] .casino-list {
    --cc-ink:#0f172a; --cc-ink-2:#334155; --cc-ink-3:#5b6877; --cc-ink-4:#8593a3;
    --cc-glass:rgba(15,23,42,.035); --cc-glass-2:rgba(15,23,42,.055); --cc-glass-3:rgba(15,23,42,.085);
    --cc-line:rgba(15,23,42,.14); --cc-line-2:rgba(15,23,42,.24);
    --cc-sheen:rgba(255,255,255,.9);
    --cc-shadow-2:0 12px 30px -10px rgba(15,23,42,.22);
    --cc-shadow-3:0 22px 48px -14px rgba(15,23,42,.3);
}

/* ── Card wrapper ── */
.casino-card-wrap {
    position:relative;
    margin-bottom:14px;
    border-radius:24px;
    overflow:hidden;
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    border:1px solid var(--border);
    box-shadow:var(--cc-shadow-2), inset 0 1px 0 var(--cc-sheen);
    transition:border-color .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1);
}
.casino-card-wrap:last-child { margin-bottom:0; }
.casino-card-wrap[hidden] { display:none; }
.casino-card-wrap:hover {
    border-color:color-mix(in srgb, var(--text-primary) 14%, var(--border));
    box-shadow:var(--cc-shadow-3), inset 0 1px 0 var(--cc-sheen);
}
.casino-card-row, .casino-card-expand-btn, .casino-card-details { position:relative; z-index:1; }

/* ── Rank — ghost number (top-left, faded; #1 gold) ── */
.rb-ghost {
    position:absolute; inset-inline-start:20px; top:50%; transform:translateY(-50%); z-index:0;
    font-family:'Sora', system-ui, sans-serif;
    font-size:62px; line-height:1; font-weight:800; letter-spacing:-.04em;
    color:color-mix(in srgb, var(--text-primary) 9%, transparent);
    pointer-events:none; user-select:none;
}
.rb-ghost.g1 { color:color-mix(in srgb, var(--cc-gold) 34%, transparent); }

/* ── Rating — top-right typographic score (mobile only; tier colour) ── */
.rt-chip-m {
    display:none;
    position:absolute; top:16px; inset-inline-end:16px; z-index:6;
    align-items:baseline; gap:2px;
    font-family:'Sora', system-ui, sans-serif; font-variant-numeric:tabular-nums;
}
.rt-chip-m b { font-size:22px; line-height:1; font-weight:800; letter-spacing:-.03em; }
.rt-chip-m i { font-size:11px; line-height:1; font-weight:800; font-style:normal; opacity:.55; }
.rt-chip-m::after {
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:99px;
    background:linear-gradient(90deg, currentColor, transparent); opacity:.7;
}
[dir="rtl"] .rt-chip-m::after { background:linear-gradient(270deg, currentColor, transparent); }
.rt-g { color:var(--cc-green-2); }
.rt-t { color:var(--cc-teal); }
.rt-a { color:var(--cc-gold); }

/* ── Row layout — desktop ── */
.casino-card-row { display:flex; align-items:center; gap:26px; padding-block:28px 24px; padding-inline:114px 26px; }
.cc-logo {
    position:relative;
    width:128px; height:80px; flex-shrink:0;
    border-radius:16px; display:flex; align-items:center; justify-content:center;
    padding:12px 16px; overflow:visible;
    background:var(--cc-glass-2); border:1px solid var(--cc-line-2);
}
.cc-logo::before {
    content:""; position:absolute; inset:0; border-radius:16px;
    background:#fff; opacity:.4;
    transform:rotate(-5deg) translate(-5px, 4px); z-index:-1;
}
[data-theme="light"] .cc-logo::before { background:#000; }
.cc-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.cc-logo-fallback { font-weight:800; font-size:18px; letter-spacing:-0.02em; color:var(--cc-ink); }

.cc-center { flex:1; min-width:0; display:flex; align-items:center; gap:24px; }
.cc-id { flex:1 1 0; min-width:0; }
.cc-name-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.casino-card-wrap a.cc-name,
.casino-card-wrap a.cc-name:visited {
    display:block; font-size:18px; font-weight:800; letter-spacing:-0.02em;
    margin-bottom:0; color:var(--cc-ink); text-decoration:none; transition:color .2s var(--cc-ease);
}
[data-theme="light"] .casino-card-wrap a.cc-name { color:var(--cc-ink); }
.casino-card-wrap a.cc-name:hover,
[data-theme="light"] .casino-card-wrap a.cc-name:hover { color:var(--cc-green-2); }
[data-theme="light"] .casino-card-wrap a.cc-name:hover { color:var(--cc-green-2); }
.cc-name-rt { display:inline-flex; align-items:center; gap:5px; flex:none; }
.cc-name-rt svg { width:15px; height:15px; fill:var(--cc-gold); flex:none; }
.cc-name-rt b { font-size:15px; line-height:1; font-weight:800; font-family:'Sora', system-ui, sans-serif; color:var(--cc-ink); font-variant-numeric:tabular-nums; }
.cc-name-rt i { font-size:11px; line-height:1; font-style:normal; font-weight:800; color:var(--cc-ink-3); }
.cc-meta { display:flex; gap:14px; flex-wrap:wrap; }
.cc-meta-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); font-weight:600; }
.cc-meta-item .ic { width:13px; height:13px; stroke:var(--cc-green-2); }
.cc-sfeat { display:grid; grid-template-columns:auto auto; gap:7px 18px; margin-top:2px; justify-content:start; }
.cc-sfeat-item { display:inline-flex; align-items:center; gap:7px; }
.cc-sfeat-ico { font-size:13px; line-height:1; flex:none; }
.cc-sfeat-tx { display:inline-flex; align-items:baseline; gap:5px; min-width:0; }
.cc-sfeat-lbl { font-size:11px; font-weight:700; color:var(--text-secondary); white-space:nowrap; }
.cc-sfeat-val { font-size:12.5px; font-weight:800; color:var(--cc-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cc-sfeat-item.off { opacity:.42; }
.cc-sfeat-item.off .cc-sfeat-val { color:var(--cc-ink-3); font-weight:700; }
.cc-sfeat-no { text-transform:uppercase; font-weight:800; letter-spacing:.03em; }

.cc-extra { display:none; gap:8px; flex-wrap:wrap; }
.cc-xchip {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border-radius:999px;
    background:var(--cc-glass); border:1px solid var(--cc-line);
    font-size:11px; font-weight:600; color:var(--cc-ink-2);
}
.cc-xchip .ic { width:13px; height:13px; stroke:var(--cc-green-2); }

.cc-bonus { flex:1 1 0; display:flex; justify-content:center; min-width:0; }
.cc-right { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; flex-shrink:0; }
/* v9.32 m18-B revize: bonus kodu chip'i CTA butonunun hemen altinda oturur */
.cc-right .bn-code { margin-block-start:0; }
/* (right-side .cc-rating retired — rating now shows inline beside the casino name) */
@media (min-width:1440px) {
    .cc-extra { display:flex; }
}

/* ── Bonus — typographic (B2) + top-3 hover trace ── */
.bn-typo { display:flex; flex-direction:column; align-items:flex-start; gap:4px; position:relative; min-width:0; max-width:100%; }
.bonus-k { display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--cc-gold-2); white-space:nowrap; }
.bonus-ico { font-size:12px; line-height:1; letter-spacing:0; }
[data-theme="light"] .bonus-k { color:#b45309; }
.bn-v2 {
    font-size:19px; line-height:1.15; font-weight:800; letter-spacing:-0.02em;
    font-family:'Sora', system-ui, sans-serif;
    color:var(--cc-ink); white-space:nowrap;
    max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.bn-v2.muted { color:var(--cc-ink-3); font-weight:700; }
.bn-typo::after {
    content:""; width:52px; height:2.5px; border-radius:99px; margin-top:6px;
    background:linear-gradient(90deg, var(--cc-gold), transparent);
    transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.bn-typo::before {
    content:""; position:absolute; inset:-16px -22px; border-radius:18px;
    pointer-events:none; z-index:-1; opacity:0;
    background:radial-gradient(62% 85% at 50% 50%, color-mix(in srgb, var(--cc-gold) 17%, transparent), transparent 72%);
    transition:opacity .45s ease;
}
.s-top:hover .bn-typo::before { opacity:1; }
.s-top:hover .bn-typo::after { width:100%; }
@media (prefers-reduced-motion: reduce) {
    .bn-typo::before, .bn-typo::after { transition:none !important; }
}

/* ── CTA pill ── */
.gcta {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:none; border-radius:999px; cursor:pointer;
    -webkit-appearance:none; appearance:none;
    -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto;
    color:#fff; font-weight:800; letter-spacing:-0.01em; font-family:inherit;
    background:linear-gradient(135deg, var(--brand-primary, var(--brand-primary)), color-mix(in srgb, var(--brand-primary, var(--brand-primary)) 28%, #000));
    transition:transform .25s var(--cc-spring);
    position:relative; overflow:hidden; text-decoration:none;
}
.gcta::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
    transform:translateX(-130%);
}
.gcta:hover { transform:translateY(-2px); }
.gcta:hover::after { transform:translateX(130%); transition:transform .85s var(--cc-ease); }
.gcta .ic { width:15px; height:15px; stroke:#fff; }
.cc-cta { padding:14px 26px; font-size:14px; min-width:152px; }

/* ── CTA — solid gold (G1): gradient fill, dark text, hover sheen + arrow slide, NO lift ──
   The old green neon ring (.ctaB-ring) is retired; the SVG element is hidden so
   existing markup keeps working. Fill/text follow the Accent Color setting via
   --cc-gold-2 / --brand-accent, so the button matches the chosen accent in both modes. */
.ctaB, a.ctaB:visited {
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, var(--cc-gold-2), color-mix(in srgb, var(--brand-accent) 78%, #000 22%));
    color:var(--cc-cta-ink); text-decoration:none; border-radius:14px;
    transition:filter .3s var(--cc-ease);
}
.ctaB .ctaB-ring { display:none; } /* green neon ring retired */
.ctaB::before { content:none; }
.ctaB::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
    transform:translateX(-130%);
}
.ctaB:hover { transform:none !important; filter:brightness(1.03); }
.ctaB:hover::after { transform:translateX(130%); transition:transform .85s var(--cc-ease); }
.ctaB .ic { stroke:var(--cc-cta-ink); transition:transform .35s var(--cc-ease); }
.ctaB:hover .ic { transform:translateX(4px); }
@media (prefers-reduced-motion: reduce) { .ctaB::after { transition:none; } }

/* ── Expand button + details panel ── */
.casino-card-expand-btn {
    width:100%; padding:11px 0 13px; margin:6px 0 0; background:transparent;
    border:0; border-top:1px solid var(--border);
    color:var(--text-muted); font-size:10px; font-weight:800; line-height:1; font-family:inherit;
    letter-spacing:.16em; text-transform:uppercase;
    display:flex; align-items:center; justify-content:center; gap:8px;
    cursor:pointer; transition:color .35s cubic-bezier(.22,.61,.36,1);
}
.casino-card-wrap:hover .casino-card-expand-btn { color:var(--cc-green-2); }
.casino-card-expand-btn svg { width:13px; height:13px; transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.casino-card-expand-btn:hover svg { transform:translateY(2px); }
.casino-card-expand-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.casino-card-details { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--cc-ease); }
.casino-card-details.is-open { grid-template-rows:1fr; }
.casino-card-details-inner { overflow:hidden; min-height:0; }
.casino-card-details-content { padding:20px; border-top:1px solid var(--cc-line); }
.casino-card-details-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:16px; }
.detail-col h4, .detail-col .dt-h { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--cc-ink-4); margin-bottom:11px; font-weight:800; }
.detail-col .spec { display:flex; justify-content:space-between; padding:5px 0; font-size:12px; border-bottom:1px solid var(--cc-line); }
.detail-col .spec:last-child { border-bottom:none; }
.detail-spec-label { color:var(--cc-ink-3); }
.detail-spec-val { color:var(--cc-ink); font-weight:600; }
.detail-col .list-item { font-size:12px; color:var(--cc-ink-2); padding:4px 0; display:flex; gap:7px; line-height:1.5; }
.detail-col .list-item::before { content:'✓'; color:var(--cc-green-2); font-weight:800; flex-shrink:0; }
.detail-col.cons .list-item::before { content:'✕'; color:#f87171; }
[data-theme="light"] .detail-col.cons .list-item::before { color:#dc2626; }
.detail-payments { padding-top:16px; border-top:1px dashed var(--cc-line); }
.detail-payments h4, .detail-payments .dt-h { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--cc-ink-4); margin-bottom:11px; font-weight:800; }
/* ── v9.32 m4: R2e cekmece hucreleri ──────────────────────────────────
   Isimli rozetler yerine grid hucreleri: govdede logo (contain), altta
   isim bandi. Hassas isaretcili cihazlarda bant hover/focus'ta acilir,
   dokunmatikte hep acik. Kart sinif adlari core.js icin KORUNUR. */
.payment-badges {
    display:grid; gap:8px;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    --pmb-band: 14px;
}
.review-payments-section .payment-badges {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    --pmb-band: 15px;
}
.payment-badge {
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    min-block-size:52px;
    padding:8px 8px calc(var(--pmb-band) + 10px);
    background:var(--bg-surface-2);
    border:1px solid var(--border); border-radius:10px;
    font-size:11px; color:var(--cc-ink-2); font-weight:600;
    text-align:center;
}
.payment-badge.has-logo { padding-inline-start:8px; gap:0; }
.payment-badge-logo { display:flex; align-items:center; justify-content:center; inline-size:100%; }
.payment-badge-logo img { max-height:26px; max-width:100%; width:auto; height:auto; object-fit:contain; display:block; }
.payment-badge-sep { display:none; }
/* Logosuz yontem: bas harf monogrami govdede, tam isim bantta */
.payment-badge .pm-mono {
    display:grid; place-items:center;
    inline-size:30px; block-size:30px; border-radius:8px;
    background:var(--bg-surface-3); border:1px solid var(--border);
    font-size:13px; font-weight:800; color:var(--text-secondary);
}
.payment-badge .pm-name {
    position:absolute; inset-inline:0; inset-block-end:0;
    block-size:var(--pmb-band);
    display:flex; align-items:center; justify-content:center;
    padding-inline:4px;
    background:var(--bg-surface-3);
    border-block-start:1px solid var(--border);
    font-size:9px; font-weight:700; letter-spacing:.02em;
    color:var(--text-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (hover:hover) and (pointer:fine) {
    .payment-badge .pm-name {
        transform:translateY(100%);
        transition:transform var(--dur-fast) var(--ease);
    }
    .payment-badge:hover .pm-name,
    .payment-badge:focus-visible .pm-name,
    .payment-badge:focus-within .pm-name { transform:translateY(0); }
}
.payment-badge.payment-hidden-overflow { display:none; }
.detail-footer { padding-top:14px; margin-top:16px; border-top:1px dashed var(--cc-line); text-align:center; }
.detail-review-link {
    display:inline-flex; align-items:center; gap:7px;
    font-size:12px; font-weight:700; color:var(--cc-green-2);
    padding:7px 13px; border-radius:12px; transition:all .2s var(--cc-ease);
}
[data-theme="light"] .detail-review-link { color:var(--cc-green-2); }
.detail-review-link:hover { background:var(--cc-glass); gap:10px; }
.detail-review-link svg { width:13px; height:13px; }

/* ── Load more ── */
.casino-list-load-more-wrap { text-align:center; margin-top:20px; }
.casino-list-load-more {
    background:var(--bg-surface-1); border:1px solid var(--border);
    color:var(--text-muted); padding:13px 26px; border-radius:999px;
    font-weight:800; font-size:11px; font-family:inherit;
    letter-spacing:.14em; text-transform:uppercase; line-height:1;
    display:inline-flex; align-items:center; gap:9px;
    cursor:pointer;
    transition:color .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.casino-list-load-more:hover {
    color:var(--cc-green-2);
    border-color:color-mix(in srgb, var(--cc-green-2) 45%, var(--border));
    box-shadow:0 10px 26px -12px color-mix(in srgb, var(--cc-green-2) 50%, transparent);
}
[data-theme="light"] .casino-list-load-more:hover { color:var(--cc-green-2); }
.casino-list-load-more svg { width:13px; height:13px; transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.casino-list-load-more:hover svg { transform:translateY(2px); }
/* Load-more reveal: cards rise in with a stagger (delay set by JS) */
@keyframes cc-reveal { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.casino-card-wrap.cc-reveal { animation:cc-reveal .5s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .casino-card-wrap.cc-reveal { animation:none; } }

/* v9.32 m18-A: kompakt kart kademesi (dar konteynerde tasmayi onler) */
@container (max-width: 880px) {
    .casino-card-row { padding-inline: 92px 22px; gap: 18px; }
    .cc-logo { width: 112px; }
    .cc-cta { padding: 12px 20px; min-width: 138px; }
}

/* ════ MOBILE — compact stack, centred logo, rating in corner ════ */
@media (max-width:768px) {
    .casino-list { padding:14px; }
    .rt-chip-m { display:flex; }
    .rb-ghost { font-size:40px; top:18px; inset-inline-start:14px; transform:none; }
    .casino-card-row {
        flex-direction:column; align-items:center;
        gap:11px; padding:8px 16px 14px;
    }
    /* corner band reserve: ghost (~72px) + score (~96px) must stay clear of the logo */
    .cc-logo { width:min(200px, calc(100% - 168px)); min-width:110px; height:74px; padding:11px 14px; }
    .cc-center { flex-direction:column; align-items:center; gap:11px; width:100%; }
    .cc-id { width:100%; text-align:center; }
    .cc-name-row, .cc-sfeat, .cc-meta { display:none; }
    .cc-meta { justify-content:center; gap:14px; }
    .cc-extra { display:none !important; }
    .cc-bonus { margin-inline:0; width:100%; min-width:0; }
    .bn-typo { align-items:center; text-align:center; }
    .bn-typo::after { margin-inline:auto; }
    .bn-v2 { white-space:normal; }
    .cc-right { flex-direction:column; width:100%; gap:11px; }
    .cc-cta { width:100%; }
    .casino-card-details-grid { grid-template-columns:1fr; gap:16px; }
    .casino-card-details-content { padding:16px; }
}

/* Narrow CONTAINERS (content columns, sidebars, tablets): same stacked layout,
   driven by the list's own width. Viewport media above stays as a fallback
   for browsers without container query support. */
@container (max-width: 800px) {
    .rt-chip-m { display:flex; }
    .rb-ghost { font-size:40px; top:18px; inset-inline-start:14px; transform:none; }
    .casino-card-row {
        flex-direction:column; align-items:center;
        gap:11px; padding:8px 16px 14px;
    }
    .cc-logo { width:min(200px, calc(100% - 168px)); min-width:110px; height:74px; padding:11px 14px; }
    .cc-center { flex-direction:column; align-items:center; gap:11px; width:100%; }
    .cc-id { width:100%; text-align:center; }
    .cc-name-row, .cc-sfeat, .cc-meta { display:none; }
    .cc-meta { justify-content:center; gap:14px; }
    .cc-extra { display:none !important; }
    .cc-bonus { margin-inline:0; width:100%; min-width:0; }
    .bn-typo { align-items:center; text-align:center; }
    .bn-typo::after { margin-inline:auto; }
    .bn-v2 { white-space:normal; }
    .cc-right { flex-direction:column; width:100%; gap:11px; }
    .cc-cta { width:100%; }
    .casino-card-details-grid { grid-template-columns:1fr; gap:16px; }
    .casino-card-details-content { padding:16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SINGLE CASINO REVIEW PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.breadcrumb {
    padding: 20px 0 16px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.breadcrumb a {
    color: var(--text-muted);
    transition: color var(--dur-fast);
}
.breadcrumb a:hover { color: var(--brand-primary); }
.breadcrumb-sep { color: var(--text-dim); }
.breadcrumb [aria-current="page"] { color: var(--text-primary); }

.review-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
    padding-bottom: var(--sp-12);
}
/* v9.32 m10: grid cocugu min-width:auto tasmasina kok cozum */
.review-main { min-width: 0; }
@media (max-width: 968px) {
    .review-layout { grid-template-columns: 1fr; }
}

/* Review hero */
.review-hero {
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 20px;
    position: relative;
}
.review-hero-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 700;
}
.rating-badge-value {
    color: var(--brand-primary);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.rating-badge-max {
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 500;
}
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.trust-badge svg { width: 14px; height: 14px; }
.trust-badge.trust-high { color: var(--brand-primary); border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent); }
.trust-badge.trust-medium { color: var(--brand-accent); border-color: color-mix(in srgb, var(--brand-accent) 30%, transparent); }
.trust-badge.trust-low { color: var(--text-muted); }

.review-hero-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 24px;
    align-items: center;
}
@media (max-width: 640px) {
    .review-hero-grid { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .review-hero-logo { justify-self: center; }
}
.review-hero-logo {
    width: 120px; height: 72px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    padding: 10px;
    overflow: hidden;
}
.review-hero-logo img {
    max-width: 100%; max-height: 100%; object-fit: contain;
}
.review-hero-content {}
.review-hero-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
    line-height: 1.1;
}
.review-hero-bonus {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 16px;
}
.review-hero-bonus-icon { font-size: 20px; flex-shrink: 0; }
.review-hero-bonus-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 2px;
}
.review-hero-bonus-text {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.review-hero-cta .btn { padding: 14px 28px; font-size: var(--text-base); }

/* Quick stats grid */
.review-quick-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 20px;
}
@media (max-width: 640px) {
    .review-quick-stats { grid-template-columns: repeat(2, 1fr); }
}
.quick-stat {
    background: var(--bg-surface-1);
    padding: 16px;
    text-align: center;
}
.quick-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.quick-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Review sections */
.review-section {
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}
.review-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.review-section-title svg { width: 14px; height: 14px; color: var(--brand-primary); }

/* Payment methods inline stats */
.payment-inline-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}
@media (max-width: 500px) { .payment-inline-stats { grid-template-columns: 1fr; } }
.payment-inline-stat {
    display: flex; align-items: center; gap: 12px;
}
.payment-inline-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
}
.payment-inline-icon svg { width: 18px; height: 18px; }
.payment-inline-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    display: block;
    margin-bottom: 2px;
}
.payment-inline-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Pros & cons */
.pros-cons-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 640px) { .pros-cons-grid { grid-template-columns: 1fr; } }
.pros-col-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-cta);
    margin-bottom: 10px;
}
.cons-col-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-danger);
    margin-bottom: 10px;
}
.pros-list, .cons-list { margin: 0; }
.pros-list li, .cons-list li {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0;
    display: flex;
    gap: 8px;
    line-height: 1.5;
}
.pros-list li::before {
    content: '✓'; color: var(--brand-cta); font-weight: 700;
}
.cons-list li::before {
    content: '✗'; color: var(--brand-danger); font-weight: 700;
}

/* Rating breakdown */
.scores-breakdown { display: flex; flex-direction: column; gap: 10px; }
.score-row {
    display: grid;
    grid-template-columns: 1fr 2fr 40px;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}
.score-row-label { color: var(--text-secondary); }
.score-bar-wrap {
    height: 6px;
    background: var(--bg-surface-2);
    border-radius: var(--r-full);
    overflow: hidden;
}
.score-bar-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: var(--r-full);
    transition: width 0.8s var(--ease);
}
.score-row-value {
    text-align: end;
    font-weight: 700;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

/* CTA banner */
.review-cta-banner {
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.review-cta-banner-title {
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.review-cta-banner-bonus {
    font-size: 13px;
    color: var(--brand-accent);
    font-weight: 600;
}

/* Editor content — responsive padding in a single rule (scales down on
   mobile so the blocks inside get more width; no separate breakpoint needed). */
.review-editor-content { padding: clamp(18px, 3vw, 26px) clamp(14px, 3vw, 22px); }
.entry-content { color: var(--text-secondary); line-height: 1.7; }
.entry-content h2 { font-size: 22px; margin: 28px 0 12px; color: var(--text-primary); }
.entry-content h3 { font-size: 18px; margin: 20px 0 10px; color: var(--text-primary); }
.entry-content h4 { font-size: 16px; margin: 16px 0 8px; color: var(--text-primary); }
.entry-content p { margin-bottom: 14px; }
.entry-content a:where(:not(.casino-card-wrap a)) { color: var(--brand-primary); }
.entry-content a:where(:not(.casino-card-wrap a)):hover { text-decoration: underline; }
/* Related-posts shortcode cards render inside the_content(); keep them neutral. */
.entry-content a.rp-card, .entry-content a.rp-card:hover { color: inherit; text-decoration: none; }
.entry-content { overflow-wrap: break-word; }
.entry-content > blockquote,
.entry-content blockquote.wp-block-quote {
    border-inline-start: 3px solid var(--brand-primary);
    padding: 8px 16px;
    margin: 16px 0;
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-style: italic;
    border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm);
}

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.faq-question {
    width: 100%;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: start;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: none;
    transition: background var(--dur-fast);
}
.faq-question:hover { background: var(--bg-surface-2); }
.faq-question svg {
    width: 14px; height: 14px;
    transition: transform var(--dur-base);
    flex-shrink: 0;
    color: var(--text-muted);
}
.faq-item.is-open .faq-question svg { transform: rotate(180deg); }
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-base) var(--ease);
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; min-height: 0; }
.faq-answer-content {
    padding: 0 18px 14px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Author box */
.author-box {
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 16px;
    align-items: start;
}
.author-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-surface-2);
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }
.author-role {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
    margin-bottom: 4px;
}
.author-name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}
.author-name a { color: var(--text-primary); }
.author-name a:hover { color: var(--brand-primary); }
.author-bio {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 8px;
}
.author-meta {
    font-size: 11px;
    color: var(--text-dim);
}
/* Mobile author layout — placed AFTER the base .author-* rules so the 56px
   avatar + grid track win on mobile (equal specificity → later source order
   wins). Previously this block sat before the base .author-avatar (72px)
   rule, so on mobile the avatar stayed 72px inside a 56px grid track and
   overflowed into the author text. */
@media (max-width: 500px) {
    .author-box { grid-template-columns: 56px 1fr; gap: 12px; padding: 16px; }
    .author-avatar { width: 56px; height: 56px; }
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────── */
.review-sidebar {
    position: sticky;
    top: calc(var(--header-height-actual, var(--header-height)) + var(--toc-height-actual, 0px) + 16px);
}
.sidebar-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sidebar-logo {
    width: 100%;
    height: 80px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
}
.sidebar-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sidebar-bonus {
    padding: 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.sidebar-bonus-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-accent);
    display: block;
    margin-bottom: 4px;
}
.sidebar-bonus-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    line-height: 1.4;
}
.sidebar-divider {
    height: 1px;
    background: var(--border);
}
.sidebar-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    display: block;
    margin-bottom: 8px;
}
.sidebar-spec {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--border);
}
.sidebar-spec:last-child { border-bottom: none; }
.sidebar-spec-label { color: var(--text-muted); }
.sidebar-spec-val { color: var(--text-primary); font-weight: 600; }

@media (max-width: 968px) {
    .review-sidebar { display: none; }
}

/* ── STICKY MOBILE CTA BAR ───────────────────────────────────────────── */
.sticky-cta-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg-surface-1);
    border-top: 1px solid var(--border);
    padding: 10px 16px 10px;
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 400;
    box-shadow: 0 -4px 16px rgba(0,0,0,.2);
    height: 90px;
}
@media (max-width: 968px) {
    .sticky-cta-bar.is-visible { display: flex; }
}
.sticky-cta-logo {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 0 0 3px var(--bg-surface-1);
    z-index: 2;
}
.sticky-cta-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sticky-cta-info {
    flex: 1;
    min-width: 0;
    padding-top: 8px;
}
.sticky-cta-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 2px;
}
.sticky-cta-bonus-box {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    max-width: 100%;
}
.sticky-cta-bonus-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}
.sticky-cta-btn {
    flex-shrink: 0;
    padding: 12px 18px;
    background: var(--brand-cta);
    color: #fff;
    border-radius: var(--r-md);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 40%, transparent);
}

/* ── TOC BAR ─────────────────────────────────────────────────────────── */
.casino-toc-bar {
    background: color-mix(in srgb, var(--bg-surface-1) 30%, transparent);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    position: sticky;
    top: var(--header-height-actual, var(--header-height));
    z-index: 90;
}
.casino-toc-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}
.casino-toc-list {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding: 2px 0;
}
.casino-toc-list::-webkit-scrollbar { display: none; }
.casino-toc-item { flex-shrink: 0; list-style: none; }
.casino-toc-link {
    display: inline-block;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--bg-surface-1);
    color: var(--text-secondary);
    white-space: nowrap;
    transition: all var(--dur-fast);
}
.casino-toc-link:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
    background: var(--bg-surface-2);
}
.casino-toc-link.is-active {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
    font-weight: 600;
}
.casino-toc-arrow {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
    color: var(--text-primary);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all var(--dur-fast);
}
.casino-toc-arrow:hover:not(:disabled) {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
.casino-toc-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.casino-toc-arrow[hidden] { display: none !important; }
[dir="rtl"] .casino-toc-arrow svg { transform: scaleX(-1); }

@media (max-width: 768px) {
    .casino-toc-arrow { display: none !important; }
}

h2[id], h3[id], h4[id], h5[id] {
    scroll-margin-top: calc(var(--header-height-actual, var(--header-height)) + var(--toc-height-actual, 0px) + 20px);
}

/* ═══════════════════════════════════════════════════════════════════════
   BLOG LISTING — Aurora Glass
   ═══════════════════════════════════════════════════════════════════════ */
.blog-listing {
    --cc-ink:#fff; --cc-ink-2:rgba(255,255,255,.72); --cc-ink-3:rgba(255,255,255,.48); --cc-ink-4:rgba(255,255,255,.34);
    --cc-glass:rgba(255,255,255,.055); --cc-glass-2:rgba(255,255,255,.085); --cc-glass-3:rgba(255,255,255,.12);
    --cc-line:rgba(255,255,255,.11); --cc-line-2:rgba(255,255,255,.2);
    --cc-sheen:rgba(255,255,255,.14);
    /* cc-green-2 / cc-teal inherited from :root */
    --cc-shadow-2:0 18px 50px -14px rgba(0,0,0,.55);
    --cc-shadow-3:0 30px 70px -18px rgba(0,0,0,.68);
    --cc-ease:cubic-bezier(.22,.61,.36,1);
    padding-top:28px; padding-bottom:50px;
}
[data-theme="light"] .blog-listing {
    --cc-ink:#0f172a; --cc-ink-2:#334155; --cc-ink-3:#5b6877; --cc-ink-4:#8593a3;
    --cc-glass:rgba(15,23,42,.035); --cc-glass-2:rgba(15,23,42,.055); --cc-glass-3:rgba(15,23,42,.085);
    --cc-line:rgba(15,23,42,.14); --cc-line-2:rgba(15,23,42,.24);
    --cc-sheen:rgba(255,255,255,.9);
    --cc-shadow-2:0 12px 30px -10px rgba(15,23,42,.18);
    --cc-shadow-3:0 22px 48px -14px rgba(15,23,42,.26);
}

/* ── Page head ── */
.page-head { margin-bottom:20px; }
.page-eyebrow { font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--cc-green-2); }
[data-theme="light"] .page-eyebrow { color:var(--cc-green-2); }
.page-title { font-size:30px; font-weight:800; letter-spacing:-0.025em; margin:6px 0 5px; color:var(--cc-ink); }
.page-sub { font-size:14px; color:var(--cc-ink-2); }

/* ── Filter bar ── */
.filter-bar {
    display:flex; align-items:center; gap:16px;
    padding:14px 16px; border-radius:20px; margin-bottom:24px;
    background:linear-gradient(150deg, var(--cc-glass-2), var(--cc-glass));
    backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
    border:1px solid var(--cc-line); box-shadow:var(--cc-shadow-2), inset 0 1px 0 var(--cc-sheen);
}
[data-theme="light"] .filter-bar { background:#fff; }
.filter-cats { display:flex; gap:8px; flex:1; flex-wrap:wrap; }
.fcat {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 16px; border-radius:999px;
    font-size:13px; font-weight:700; color:var(--cc-ink-2); font-family:inherit;
    background:var(--cc-glass-2); border:1px solid var(--cc-line);
    cursor:pointer; transition:all .2s var(--cc-ease);
}
.fcat:hover { background:var(--cc-glass-3); color:var(--cc-ink); }
.fcat.active {
    background:linear-gradient(118deg, var(--cc-green-2), var(--cc-teal));
    color:#04261b; border-color:transparent;
    box-shadow:0 8px 20px -6px color-mix(in srgb, var(--brand-primary) 55%, transparent);
}
.fcat .cnt { font-size:11px; opacity:.7; font-weight:800; }
.filter-search {
    display:flex; align-items:center; gap:8px; flex-shrink:0;
    width:220px; padding:0 14px; height:42px; border-radius:999px;
    background:var(--cc-glass-2); border:1px solid var(--cc-line);
    transition:border-color .2s var(--cc-ease);
}
.filter-search:focus-within { border-color:var(--cc-green-2); }
.filter-search svg { width:15px; height:15px; color:var(--cc-ink-3); flex-shrink:0; }
.filter-search input {
    flex:1; min-width:0; background:none; border:none; outline:none;
    color:var(--cc-ink); font-size:13px; font-weight:500; font-family:inherit;
}
.filter-search input::placeholder { color:var(--cc-ink-4); }

/* ── Grid + card ── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; transition:opacity .2s var(--cc-ease); }
.blog-grid.is-loading { opacity:.45; pointer-events:none; }
.blog-card {
    border-radius:20px; overflow:hidden; text-decoration:none;
    background:linear-gradient(160deg, color-mix(in srgb, var(--cc-teal) 8.5%, transparent), var(--cc-glass) 48%);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid var(--cc-line); box-shadow:var(--cc-shadow-2), inset 0 1px 0 var(--cc-sheen);
    transition:transform .3s var(--cc-ease), border-color .3s var(--cc-ease), box-shadow .3s var(--cc-ease);
}
[data-theme="light"] .blog-card { background:linear-gradient(160deg, color-mix(in srgb, var(--cc-teal) 7%, transparent), #fff 55%); }
.blog-card:hover { transform:translateY(-4px); border-color:var(--cc-line-2); box-shadow:var(--cc-shadow-3), inset 0 1px 0 var(--cc-sheen); }
.blog-card-thumb {
    aspect-ratio:16/10; position:relative; display:flex; align-items:flex-start;
    padding:12px; border-bottom:1px solid var(--cc-line); overflow:hidden;
}
.blog-card-thumb.no-img { background:linear-gradient(135deg, #1d4ed8, #0891b2); }
.blog-card-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.blog-card-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), transparent 45%); }
.blog-card-cat {
    position:relative; z-index:1; display:inline-flex; align-items:center;
    padding:5px 11px; border-radius:999px;
    background:rgba(11,13,19,.62); backdrop-filter:blur(8px); border:1px solid var(--cc-line-2);
    font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cc-green-2);
}
.blog-card-body { padding:15px 17px 17px; }
.blog-card-title {
    font-size:16px; font-weight:800; letter-spacing:-0.015em; line-height:1.34; margin-bottom:9px; color:var(--cc-ink);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card-excerpt {
    font-size:12.5px; color:var(--cc-ink-3); line-height:1.6; margin-bottom:13px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card-meta { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; color:var(--cc-ink-4); }
.blog-card-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--cc-ink-4); }
.blog-empty { grid-column:1/-1; text-align:center; padding:50px 20px; color:var(--cc-ink-3); font-size:14px; }

/* ── Numeric pagination ── */
.blog-pagination { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:32px; }
.pg {
    min-width:40px; height:40px; padding:0 12px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:var(--cc-ink-2); text-decoration:none;
    background:var(--cc-glass-2); border:1px solid var(--cc-line);
    transition:all .2s var(--cc-ease);
}
.pg:hover { background:var(--cc-glass-3); color:var(--cc-ink); }
.pg.active {
    background:linear-gradient(118deg, var(--cc-green-2), var(--cc-teal));
    color:#04261b; border-color:transparent;
    box-shadow:0 8px 20px -6px color-mix(in srgb, var(--brand-primary) 55%, transparent);
}
.pg.dots { background:none; border:none; pointer-events:none; }
.pg svg { width:15px; height:15px; }

/* ── Blog listing mobile ── */
@media (max-width:880px) {
    .blog-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
    .page-title { font-size:23px; }
    .filter-bar { flex-direction:column; align-items:stretch; gap:12px; padding:13px; }
    .filter-cats { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
    .filter-cats::-webkit-scrollbar { display:none; }
    .fcat { flex-shrink:0; }
    .filter-search { width:100%; }
    .blog-grid { grid-template-columns:1fr; gap:16px; }
}


/* Single blog post */
.blog-post-hero {
    padding: 40px 0 24px;
    max-width: 780px;
    margin: 0 auto;
}
.blog-post-hero-cat {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 12px;
}
.blog-post-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 16px;
}
.blog-post-hero-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.blog-post-featured-img {
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 32px;
    background: var(--bg-surface-2);
}
.blog-post-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-post-content {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--gutter) 48px;
}

/* ── AUTHOR PAGES ────────────────────────────────────────────────────── */
.author-archive-hero {
    padding: 48px 0 32px;
    text-align: center;
    background: var(--bg-surface-1);
    border-bottom: 1px solid var(--border);
}
.author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 32px 0;
}
.author-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: all var(--dur-base);
}
.author-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}
.author-card-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
    background: var(--bg-surface-2);
}
.author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card-name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}
.author-card-name a { color: var(--text-primary); }
.author-card-name a:hover { color: var(--brand-primary); }
.author-card-role {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.author-card-count {
    font-size: 11px;
    color: var(--text-dim);
}

.single-author-hero {
    padding: 40px 0 32px;
    background: var(--bg-surface-1);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.single-author-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 16px;
    background: var(--bg-surface-2);
}
.single-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.single-author-name {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.single-author-role {
    font-size: 12px;
    color: var(--brand-primary);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.single-author-bio {
    max-width: 560px;
    margin: 0 auto;
    color: var(--text-muted);
    line-height: 1.6;
}
.author-content-section { padding: 32px 0; }
.author-content-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}
/* ════════════════════════════════════════════════════════════════════
   COMPARISON POPUP — Ribbon design (glass + ambient)  [v9.5.0]
   Logo glass tile · Larger popup · Recommended scaled up
   Light mode fully supported · Centered mobile layout
   ════════════════════════════════════════════════════════════════════ */
.popup-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    z-index: 9000;
    display: grid; place-items: center;
    padding: 20px;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
[data-theme="light"] .popup-overlay { background: rgba(15,23,42,.42); }
.popup-overlay.is-open { opacity: 1; visibility: visible; }

.popup-container {
    position: relative; isolation: isolate;
    width: 100%; max-width: 680px; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    box-shadow: 0 34px 90px rgba(0,0,0,.62);
    transform: scale(.96);
    transition: transform .25s cubic-bezier(.22,.78,.28,1);
}
[data-theme="light"] .popup-container {
    background: #fbfcfe;
    border: 1px solid rgba(15,23,42,.14);
    box-shadow: 0 30px 80px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.10);
}
.popup-overlay.is-open .popup-container { transform: scale(1); }
.popup-container::before, .popup-container::after {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    width: 70%; height: 90%; filter: blur(85px);
}
.popup-container::before { top: -26%; inset-inline-start: -10%; background: radial-gradient(circle, var(--brand-primary), transparent 60%); opacity: .22; }
.popup-container::after  { bottom: -26%; inset-inline-end: -10%; background: radial-gradient(circle, var(--brand-accent), transparent 60%); opacity: .13; }
[data-theme="light"] .popup-container::before { opacity: .10; }
[data-theme="light"] .popup-container::after  { opacity: .07; }
.popup-content { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; flex: 1; }

.popup-header {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.06);
}
[data-theme="light"] .popup-header {
    border-bottom: 1px solid rgba(15,23,42,.10);
    background: rgba(15,23,42,.02);
}
.popup-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
[data-theme="light"] .popup-title { color: #0f172a; }
.popup-title .pop-bolt {
    width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--cc-green-2) 13%, transparent); border: 1px solid color-mix(in srgb, var(--cc-green-2) 26%, transparent); color: var(--cc-green-2);
}
[data-theme="light"] .popup-title .pop-bolt {
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--brand-primary) 32%, transparent); color: color-mix(in srgb, var(--brand-primary) 78%, #000);
}
.popup-title .pop-bolt svg { width: 14px; height: 14px; }
.popup-close {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.72); transition: background .2s ease;
}
[data-theme="light"] .popup-close {
    background: rgba(15,23,42,.05); border: 1px solid rgba(15,23,42,.12); color: rgba(15,23,42,.65);
}
.popup-close:hover { background: rgba(255,255,255,.1); }
[data-theme="light"] .popup-close:hover { background: rgba(15,23,42,.08); }
.popup-close svg { width: 14px; height: 14px; }

.popup-body {
    flex: 1; overflow-y: auto;
    padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.popup-error { padding: 44px 24px; text-align: center; color: rgba(255,255,255,.6); font-size: 14px; font-weight: 600; }
[data-theme="light"] .popup-error { color: rgba(15,23,42,.6); }

/* ── ribbon casino card ── */
.pc-card {
    position: relative; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: flex-end; gap: 14px;
    padding: 14px 16px; border-radius: 16px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
}
[data-theme="light"] .pc-card {
    background: #f1f4f9;
    border: 1px solid rgba(15,23,42,.12);
    box-shadow: 0 1px 3px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.7);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.pc-card-rec {
    border-color: color-mix(in srgb, var(--cc-green-2) 32%, transparent);
    background: linear-gradient(155deg, color-mix(in srgb, var(--cc-green-2) 8%, transparent), rgba(255,255,255,.03) 62%);
    box-shadow: 0 0 26px color-mix(in srgb, var(--cc-green-2) 10%, transparent);
    gap: 16px; padding: 16px 18px;
}
[data-theme="light"] .pc-card-rec {
    background: linear-gradient(155deg, color-mix(in srgb, var(--brand-primary) 12%, transparent), #f1f4f9 60%);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 40%, transparent);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--brand-primary) 15%, transparent), inset 0 1px 0 rgba(255,255,255,.7);
}
.pc-ribbon {
    position: absolute; top: 15px; inset-inline-start: -46px; transform: rotate(-45deg); z-index: 4;
    background: linear-gradient(115deg, var(--cc-green-2), var(--cc-teal)); color: #04261b;
    font-size: 8px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 48px; box-shadow: 0 4px 11px rgba(0,0,0,.4);
}
[dir="rtl"] .pc-ribbon {
    transform: rotate(45deg);
    background: linear-gradient(-115deg, var(--cc-green-2), var(--cc-teal));
}

/* ── logo (glass tile — no inline brand color anymore) ── */
.pc-logo {
    flex-shrink: 0; width: 124px; height: 70px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    padding: 9px; overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.18),
        0 4px 12px rgba(0,0,0,.20);
    transition: transform .22s cubic-bezier(.22,.78,.28,1), box-shadow .22s ease, border-color .22s ease;
}
/* Logo as link/button — clickable, navigates to review page */
a.pc-logo, button.pc-logo {
    cursor: pointer;
    font-family: inherit; color: inherit; text-decoration: none;
    appearance: none; -webkit-appearance: none;
}
a.pc-logo:hover, button.pc-logo:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(0,0,0,.18),
        0 6px 16px rgba(0,0,0,.28);
}
[data-theme="light"] a.pc-logo:hover, [data-theme="light"] button.pc-logo:hover {
    border-color: rgba(15,23,42,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(15,23,42,.06),
        0 4px 12px rgba(15,23,42,.14);
}
[data-theme="light"] .pc-logo {
    background: linear-gradient(135deg, #ffffff, #e8edf5);
    border: 1px solid rgba(15,23,42,.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(15,23,42,.06),
        0 2px 8px rgba(15,23,42,.10);
}
.pc-card-rec .pc-logo { width: 142px; height: 80px; border-radius: 13px; }

.pc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pc-lw {
    font-weight: 900; text-align: center; line-height: 1.05;
    font-size: 14px; word-break: break-word;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
[data-theme="light"] .pc-lw { color: #0f172a; text-shadow: none; }

.pc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pc-name {
    font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; color: #fff;
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 5px;
}
[data-theme="light"] .pc-name { color: #0f172a; }
.pc-card-rec .pc-name { font-size: 17.5px; }
.pc-crown { width: 16px; height: 16px; color: var(--brand-accent); flex-shrink: 0; }
[data-theme="light"] .pc-crown { color: var(--brand-accent); }
.pc-card-rec .pc-crown { width: 17px; height: 17px; }

.pc-score {
    flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 1px;
    font-size: 14px; font-weight: 900; color: var(--brand-accent);
}
[data-theme="light"] .pc-score { color: #b45309; }
.pc-card-rec .pc-score { font-size: 15.5px; }
.pc-score svg { width: 12px; height: 12px; align-self: center; margin-inline-end: 3px; }
.pc-card-rec .pc-score svg { width: 13px; height: 13px; }
.pc-score small { font-size: .62em; color: currentColor; opacity: .55; font-weight: 700; }
.pc-score.dim { color: rgba(255,255,255,.72); }
[data-theme="light"] .pc-score.dim { color: rgba(15,23,42,.55); }

.pc-bonus {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 11px; border-radius: 10px;
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
    font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.72); line-height: 1.35;
    white-space: nowrap;
}
[data-theme="light"] .pc-bonus {
    background: rgba(15,23,42,.05); border: 1px solid rgba(15,23,42,.10); color: rgba(15,23,42,.72);
}
.pc-card-rec .pc-bonus { font-size: 12.5px; padding: 9px 12px; }
.pc-gift { flex-shrink: 0; color: var(--brand-accent); width: 14px; height: 14px; }
[data-theme="light"] .pc-gift { color: var(--brand-accent); }

.pc-cta {
    flex-shrink: 0; width: 152px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px; border-radius: 11px;
    font-size: 12.5px; font-weight: 800; font-family: inherit;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    border: 1px solid transparent; appearance: none; -webkit-appearance: none;
    transition: transform .26s cubic-bezier(.22,.78,.28,1), box-shadow .26s cubic-bezier(.22,.78,.28,1), background .26s ease, color .26s ease;
}
.pc-cta svg { width: 14px; height: 14px; transition: transform .26s cubic-bezier(.22,.78,.28,1); }
.pc-cta-primary { background: linear-gradient(115deg, var(--cc-green-2), var(--cc-teal)); color: #04261b; box-shadow: 0 8px 20px color-mix(in srgb, var(--cc-teal) 26%, transparent); }
[data-theme="light"] .pc-cta-primary { background: linear-gradient(115deg, var(--brand-primary), var(--cc-teal)); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 32%, transparent); }
.pc-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--cc-teal) 36%, transparent); }
.pc-cta-primary:hover svg { transform: translateX(3px); }
.pc-cta-ghost { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.72); }
[data-theme="light"] .pc-cta-ghost {
    background: #ffffff; border: 1px solid rgba(15,23,42,.16);
    color: rgba(15,23,42,.72); box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.pc-cta-ghost:hover { background: rgba(255,255,255,.07); color: #fff; }
[data-theme="light"] .pc-cta-ghost:hover { background: #f8fafc; color: #0f172a; }
.pc-card-rec .pc-cta { width: 174px; padding: 13px 14px; font-size: 13.5px; border-radius: 12px; }
.pc-card-rec .pc-cta svg { width: 16px; height: 16px; }

/* ── mobile: centered modal, all sides padded, larger logos ── */
@media (max-width: 600px) {
    .popup-overlay { padding: 16px; place-items: center; }
    .popup-container {
        max-width: none;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        border-radius: 18px;
    }
    .popup-body { padding: 18px; gap: 13px; }
    .pc-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 18px 16px;
    }
    .pc-card-rec { padding: 22px 18px; gap: 16px; }
    .pc-logo { width: 160px; height: 88px; }
    .pc-card-rec .pc-logo { width: 188px; height: 104px; }
    .pc-mid { width: 100%; align-items: center; gap: 10px; }
    .pc-top { justify-content: center; }
    .pc-name { white-space: normal; overflow: visible; text-overflow: clip; justify-content: center; }
    .pc-bonus { width: 100%; justify-content: center; white-space: normal; }
    .pc-cta { width: 100%; padding: 14px; }
    .pc-card-rec .pc-cta { padding: 15px; font-size: 14px; }
}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   FOOTER (Varyant O — Floating Diagonal Card)
   ═══════════════════════════════════════════════════════════════════ */
.site-footer.footO {
    flex-shrink: 0;
    padding: 32px 0 0;
    margin-top: 40px;
    /* No background — page bg shows through, card floats on its own */
}

.footO-card {
    position: relative; isolation: isolate;
    background:
        radial-gradient(640px 320px at 12% 0%, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 60%),
        radial-gradient(560px 280px at 92% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 58%),
        linear-gradient(180deg, #0a0c14, #050709);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 44px 36px 24px;
    overflow: hidden;
    box-shadow: 0 28px 60px rgba(0,0,0,.4);
}
[data-theme="light"] .footO-card {
    background:
        radial-gradient(640px 320px at 12% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 60%),
        radial-gradient(560px 280px at 92% 0%, color-mix(in srgb, var(--brand-primary) 4%, transparent), transparent 58%),
        #ffffff;
    border-color: rgba(15,23,42,.12);
    box-shadow: 0 16px 38px rgba(15,23,42,.10);
}
/* Diagonal accent bar — bold 10px + glow */
.footO-card::before {
    content: ''; position: absolute;
    top: -4px; left: -24px; right: -24px; height: 10px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--brand-primary) 85%, transparent) 14%,
        var(--cc-green-2) 38%,
        var(--cc-teal) 62%,
        color-mix(in srgb, var(--brand-primary) 65%, transparent) 86%,
        transparent 100%);
    transform: skewY(-1deg);
    transform-origin: left;
    filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--brand-primary) 50%, transparent));
}
/* Top hairline */
.footO-card::after {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-primary) 50%, transparent), transparent);
    pointer-events: none;
}

.footO-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 26px;
}
@media (max-width: 900px) {
    .footO-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footO-brand { grid-column: 1 / -1; }
}
.footO-brand { display: flex; flex-direction: column; gap: 14px; }
.footO-brand .footer-logo {
    font-size: 18px; font-weight: 900; letter-spacing: -.02em;
    color: var(--text-primary);
    text-decoration: none;
    display: inline-block;
}
.footO-brand .footer-logo img { height: 34px; max-height: 40px; width: auto; }
.footO-desc {
    font-size: 13.5px; color: rgba(255,255,255,.66); line-height: 1.7; max-width: 320px;
}
[data-theme="light"] .footO-desc { color: rgba(15,23,42,.7); }

.footO-trust-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.footO-trust-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
    font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.8);
    text-decoration: none;
    transition: border-color .18s, background .18s;
}
a.footO-trust-chip:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 42%, transparent);
    background: rgba(255,255,255,.08);
}
[data-theme="light"] .footO-trust-chip {
    background: rgba(15,23,42,.03); border-color: rgba(15,23,42,.14); color: rgba(15,23,42,.78);
}

.footO-col-title {
    font-size: 13px; font-weight: 800; color: #fff;
    margin-bottom: 16px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
[data-theme="light"] .footO-col-title {
    color: #0f172a; border-bottom-color: rgba(15,23,42,.14);
}
.footO-links { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 0; margin: 0; }
.footO-links li { list-style: none; }
.footO-links a {
    font-size: 13.5px; font-weight: 500;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color .18s, padding .18s;
    display: inline-flex; align-items: center; gap: 6px;
    padding-inline-start: 0;
}
.footO-links a::before {
    content: '→'; opacity: 0; transform: translateX(-4px);
    transition: opacity .18s, transform .18s;
    color: var(--cc-green-2);
}
.footO-links a:hover { color: var(--cc-green-2); padding-inline-start: 6px; }
.footO-links a:hover::before { opacity: 1; transform: translateX(0); }
[data-theme="light"] .footO-links a { color: rgba(15,23,42,.7); }

.footO-bottom {
    margin: 0 -36px -24px;
    padding: 18px 36px;
    background: rgba(0,0,0,.25);
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    font-size: 12px; color: rgba(255,255,255,.55);
}
[data-theme="light"] .footO-bottom {
    background: rgba(15,23,42,.03);
    border-top-color: rgba(15,23,42,.10);
    color: rgba(15,23,42,.6);
}
.footO-rg-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--brand-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-accent) 32%, transparent);
    color: var(--brand-accent); font-weight: 700; font-size: 11px;
}
[data-theme="light"] .footO-rg-pill {
    background: color-mix(in srgb, var(--brand-accent) 10%, transparent); border-color: color-mix(in srgb, var(--brand-accent) 30%, transparent); color: #b45309;
}

/* ── 404 / SEARCH ────────────────────────────────────────────────────── */
.error-404, .search-no-results {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    padding: clamp(48px, 9vh, 110px) 20px;
}
.err-glyph {
    font-family: 'Space Grotesk', var(--font);
    font-weight: 800;
    font-size: clamp(96px, 22vw, 180px);
    line-height: .9;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 4px;
}
.error-title {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-primary);
}
.error-sub {
    color: var(--text-muted);
    font-size: 16px;
    max-width: 46ch;
    margin: 0 auto 28px;
}
.err-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.err-actions .btn svg { width: 17px; height: 17px; }
.err-search {
    margin: 22px auto 0;
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-strong);
    cursor: pointer;
    color: var(--text-muted);
    font: inherit;
    font-size: 15px;
    text-align: start;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.err-search:hover { border-color: var(--brand-primary); }
.err-search svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }
.err-search span { flex: 1; }

/* ── RELATED / PAGINATION ────────────────────────────────────────────── */
.pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 24px 0;
}
.pagination .page-numbers {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    transition: all var(--dur-fast);
}
.pagination .page-numbers:hover {
    background: var(--bg-surface-2);
    border-color: var(--border-strong);
}
.pagination .page-numbers.current {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

/* ── SCROLLBAR ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-surface-1); }
::-webkit-scrollbar-thumb { background: var(--bg-surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── PRINT ───────────────────────────────────────────────────────────── */
@media print {
    .site-header, .site-footer, .mobile-drawer, .casino-toc-bar, .sticky-cta-bar, .popup-overlay { display: none !important; }
    body { background: white; color: black; }
}

/* ── HELPERS ─────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }
.hidden-desktop { display: none; }
@media (max-width: 768px) {
    .hidden-mobile { display: none !important; }
    .hidden-desktop { display: block; }
}

/* ════════════════════════════════════════════════════════════════════════
   OPTION O HERO — Minimal review hero (full-width, dynamic brand colors)
   ════════════════════════════════════════════════════════════════════════ */

.review-hero-min {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 32px;
    border: 1px solid var(--border);
    background-color: var(--bg-surface-1);
}
.review-hero-min-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.review-hero-min-main {
    position: relative;
    z-index: 1;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 24px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Logo — wider, centered */
.review-hero-min-logo {
    width: 140px;
    height: 80px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--brand-accent);
    font-weight: 700;
    font-size: 13px;
}
.review-hero-min-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Info column */
.review-hero-min-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.review-hero-min-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.rh-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}
.rh-badge-verified .rh-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 8px color-mix(in srgb, var(--brand-primary) 60%, transparent);
}
.rh-badge-trust.rh-trust-high   { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent); color: color-mix(in srgb, var(--brand-primary) 55%, #fff 45%); }
.rh-badge-trust.rh-trust-medium { background: color-mix(in srgb, var(--brand-accent) 12%, transparent); border-color: color-mix(in srgb, var(--brand-accent) 30%, transparent); color: #fde68a; }
.rh-badge-trust.rh-trust-low    { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #fca5a5; }

.review-hero-min-name {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}

/* Rating block */
.review-hero-min-rating {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    flex-shrink: 0;
}
.rh-rating-num {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.rh-rating-num span {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
}
.rh-rating-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: start;
}
.rh-rating-stars {
    color: var(--brand-accent);
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1;
}
.rh-rating-label {
    font-size: 9px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* CTA */
.review-hero-min-cta {
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    transition: filter 200ms ease, transform 200ms ease;
    line-height: 1.2;
    white-space: nowrap;
}
.review-hero-min-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Bottom — stats + bonus */
.review-hero-min-bottom {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    background: var(--bg-base);
}
.review-hero-min-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.review-hero-min-stats .rh-stat {
    padding: 16px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.rh-stat-icon { font-size: 14px; margin-bottom: 4px; line-height: 1; }
.rh-stat-label {
    font-size: 9px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    font-weight: 600;
}
.rh-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.review-hero-min-bonus {
    padding: 14px 22px;
    background: color-mix(in srgb, var(--brand-accent) 4%, transparent);
    border-left: 1px solid;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 280px;
}
.rh-bonus-info { flex: 1; min-width: 0; }
.rh-bonus-label {
    font-size: 9px;
    color: var(--brand-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 2px;
}
.rh-bonus-text {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rh-bonus-claim {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: filter 200ms ease;
}
.rh-bonus-claim:hover { filter: brightness(1.08); }

/* MOBILE — Option O wraps to stacked layout */
@media (max-width: 768px) {
    .review-hero-min-main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "info"
            "rating"
            "cta";
        gap: 16px;
        padding: 20px;
        text-align: center;
        justify-items: center;
    }
    .review-hero-min-logo {
        grid-area: logo;
        width: 160px;
        height: 90px;
    }
    .review-hero-min-info {
        grid-area: info;
        align-items: center;
        text-align: center;
    }
    .review-hero-min-name {
        font-size: 26px;
    }
    .review-hero-min-rating {
        grid-area: rating;
        justify-self: center;
        padding: 14px 24px;
    }
    .rh-rating-side { text-align: center; }
    .review-hero-min-cta {
        grid-area: cta;
        width: 100%;
        max-width: 320px;
        padding: 14px;
        font-size: 14px;
    }
    .review-hero-min-bottom {
        grid-template-columns: 1fr;
    }
    .review-hero-min-stats {
        grid-template-columns: 1fr 1fr;
    }
    .review-hero-min-stats .rh-stat:nth-child(2n) {
        border-right: 0;
    }
    .review-hero-min-stats .rh-stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .review-hero-min-bonus {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.06);
        min-width: 0;
    }
}

/* Light mode adjustments */
[data-theme="light"] .review-hero-min {
    background-color: var(--bg-surface-1);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}
[data-theme="light"] .review-hero-min-main { border-bottom-color: var(--border); }
[data-theme="light"] .review-hero-min-name { color: var(--text-primary); }
[data-theme="light"] .review-hero-min-rating {
    background: var(--bg-surface-2);
    border-color: var(--border);
}
[data-theme="light"] .rh-rating-num { color: var(--text-primary); }
[data-theme="light"] .rh-rating-num span { color: var(--text-dim); }
[data-theme="light"] .rh-rating-label { color: var(--text-muted); }
[data-theme="light"] .rh-stat-value { color: var(--text-primary); }
[data-theme="light"] .rh-stat-label { color: var(--text-muted); }
[data-theme="light"] .rh-bonus-text { color: var(--text-primary); }
[data-theme="light"] .rh-badge {
    background: var(--bg-surface-2);
    border-color: var(--border);
    color: var(--text-secondary);
}
[data-theme="light"] .review-section,
[data-theme="light"] .sidebar-card {
    box-shadow: var(--shadow-sm);
}

/* ════════════════════════════════════════════════════════════════════════
   STICKY CTA BAR — Option 10 (golden gradient icon + premium feel)
   ════════════════════════════════════════════════════════════════════════ */

.sticky-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    background: rgba(15, 17, 23, 0.96);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px 14px;
    display: none;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.sticky-cta-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand-accent) 30%, var(--brand-accent) 70%, transparent);
    border-radius: 2px;
}
.sticky-cta-bar.is-visible {
    display: grid;
    transform: translateY(0);
}

.sticky-cta-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--brand-accent), #f59e0b);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-accent) 30%, transparent);
}

.sticky-cta-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sticky-cta-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sticky-cta-label {
    font-size: 8px;
    color: var(--brand-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.sticky-cta-stars {
    color: var(--brand-accent);
    font-size: 8px;
    letter-spacing: 1px;
    opacity: 0.7;
}
.sticky-cta-text {
    font-size: 12px;
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticky-cta-btn {
    padding: 11px 14px 11px 16px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.sticky-cta-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.sticky-cta-arrow {
    display: inline-flex;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Show sticky bar only on mobile */
@media (min-width: 769px) {
    .sticky-cta-bar { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   GAME REVIEW HERO — Option GD (glass orbs + frosted card + green/gold ambient)
   ════════════════════════════════════════════════════════════════════════ */

.game-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 32px;
    background: var(--bg-base, #0a0a12);
    padding: 0;
}
.game-hero-ambient {
    position: absolute;
    width: 60%;
    height: 80%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}
.game-hero-ambient-green {
    top: -30%;
    left: 5%;
    background: radial-gradient(circle, var(--brand-primary), transparent 60%);
    opacity: 0.25;
}
.game-hero-ambient-gold {
    bottom: -30%;
    right: 5%;
    background: radial-gradient(circle, var(--brand-accent), transparent 60%);
    opacity: 0.18;
}

.game-hero-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.game-hero-main {
    padding: 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: center;
}

.game-hero-thumb {
    height: 210px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}
.game-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.game-hero-thumb-placeholder {
    font-size: 64px;
    opacity: 0.4;
}

.game-hero-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.game-hero-badge {
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 100px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, var(--brand-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 25%, transparent);
    color: #fde68a;
    backdrop-filter: blur(12px);
    align-self: flex-start;
}
/* Category-only variant (games without the Editor's Pick flag) */
.game-hero-badge-cat {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border);
    color: var(--text-secondary);
}

.game-hero-name {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0;
}

.game-hero-orbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.game-orb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.game-orb-icon {
    font-size: 13px;
}
.game-orb-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
.game-orb-text strong {
    color: #fff;
    font-weight: 700;
}
.game-orb-gold {
    background: color-mix(in srgb, var(--brand-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand-accent) 25%, transparent);
}
.game-orb-gold .game-orb-text strong {
    color: #fde68a;
}
.game-orb-rate {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 16px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}
.game-orb-rate .game-orb-text strong {
    color: var(--brand-primary);
    font-size: 14px;
}

.game-hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.game-hero-cta {
    padding: 12px 24px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-primary) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: filter 200ms ease, transform 200ms ease;
}
.game-hero-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.game-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 28px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
    margin-top: 4px;
}

.game-stat-tile {
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.game-stat-icon {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1;
}
.game-stat-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    font-weight: 600;
}
.game-stat-value {
    font-size: 14px;
    color: #fff;
    font-weight: 700;
}

/* Mobile — game hero stack */
@media (max-width: 768px) {
    .game-hero-main {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 16px;
        align-items: center;
        text-align: center;
    }
    .game-hero-thumb {
        height: 170px;
        justify-self: center;
    }
    .game-hero-info {
        align-items: center;
    }
    .game-hero-badge { align-self: center; }
    .game-hero-name { font-size: 28px; }
    .game-hero-orbs { justify-content: center; }
    .game-hero-actions {
        width: 100%;
        flex-direction: column;
    }
    .game-hero-cta {
        width: 100%;
        max-width: 320px;
    }
    .game-hero-stats {
        grid-template-columns: 1fr 1fr;
        padding: 16px;
        padding-top: 16px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   GAME LAYOUT — content + sidebar
   ════════════════════════════════════════════════════════════════════════ */

.game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1024px) {
    .game-layout { grid-template-columns: 1fr; }
    .game-sidebar { display: none; }
}

.game-main {
    min-width: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   GAME SIDEBAR — Option SD (compact horizontal sticky)
   ════════════════════════════════════════════════════════════════════════ */

.game-sidebar {
    position: sticky;
    top: calc(var(--header-height-actual, var(--header-height)) + var(--toc-height-actual, 0px) + 16px);
    align-self: start;
}

.game-sidebar-card {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.game-sidebar-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.game-sidebar-thumb {
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.game-sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.game-sidebar-thumb-ph {
    font-size: 32px;
    opacity: 0.4;
}

.game-sidebar-meta {
    min-width: 0;
}
.game-sidebar-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 4px;
}
.game-sidebar-prov {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}
.game-sidebar-prov strong {
    color: var(--brand-accent);
    font-weight: 700;
}

.game-sidebar-rate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    backdrop-filter: blur(12px);
}
.game-sidebar-rate-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.game-sidebar-rate-num span {
    font-size: 11px;
    color: color-mix(in srgb, var(--brand-primary) 50%, transparent);
}
.game-sidebar-rate-side {
    text-align: end;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.game-sidebar-stars {
    color: var(--brand-accent);
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 1;
}
.game-sidebar-rate-lab {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.game-sidebar-section-l {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}
.game-sidebar-spec {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.game-sidebar-spec:last-child {
    border-bottom: 0;
}
.game-sidebar-spec span:first-child {
    color: rgba(255, 255, 255, 0.5);
}
.game-sidebar-spec span:last-child {
    color: #fff;
    font-weight: 600;
}

.game-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.game-sidebar-cta {
    padding: 12px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: filter 200ms ease, transform 200ms ease;
}
.game-sidebar-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════════════
   GAME SPECS GRID
   ════════════════════════════════════════════════════════════════════════ */

.game-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.game-spec-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-size: 13px;
}
.game-spec-label {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}
.game-spec-value {
    color: #fff;
    font-weight: 700;
}
@media (max-width: 640px) {
    .game-specs-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   CASINO REVIEW HERO — Option O + Glass Effect
   ════════════════════════════════════════════════════════════════════════ */

.review-hero-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 32px;
    padding: 0;
    background: var(--bg-base, #0a0a12);
}
.review-hero-ambient-1,
.review-hero-ambient-2 {
    position: absolute;
    width: 60%;
    height: 80%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}
.review-hero-ambient-1 {
    top: -30%;
    left: 5%;
    opacity: 0.4;
}
.review-hero-ambient-2 {
    bottom: -30%;
    right: 5%;
    opacity: 0.3;
}

/* Apply glass effect to existing review-hero-min when wrapped in glass class */
.review-hero-min-glass {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    margin-bottom: 0 !important;
}

.review-hero-min-glass .review-hero-min-rating {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.review-hero-min-glass .review-hero-min-bottom {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(20px);
}

.review-hero-min-glass .rh-stat {
    background: rgba(255, 255, 255, 0.02);
}

/* ════════════════════════════════════════════════════════════════════════
   CASINO REVIEW SIDEBAR — Glass effect
   ════════════════════════════════════════════════════════════════════════ */

.sidebar-card-glass {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.sidebar-card-glass .sidebar-bonus {
    backdrop-filter: blur(12px);
}

/* Light mode adjustments for glass */
[data-theme="light"] .review-hero-min-glass {
    background: #ffffff !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] .sidebar-card-glass {
    background: #ffffff !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] .game-hero-card,
[data-theme="light"] .game-sidebar-card {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}
[data-theme="light"] .game-hero-name,
[data-theme="light"] .game-sidebar-name { color: var(--text-primary); }
[data-theme="light"] .game-hero-badge {
    background: rgba(180, 83, 9, .10);
    border-color: rgba(180, 83, 9, .32);
    color: #92520a;
}
[data-theme="light"] .game-hero-badge-cat {
    background: rgba(15, 23, 42, .05);
    border-color: var(--border);
    color: var(--text-secondary);
}
[data-theme="light"] .game-orb-text { color: var(--text-secondary); }
[data-theme="light"] .game-orb-text strong { color: var(--text-primary); }
[data-theme="light"] .game-stat-value,
[data-theme="light"] .game-spec-value { color: var(--text-primary); }
[data-theme="light"] .game-stat-label,
[data-theme="light"] .game-spec-label { color: var(--text-muted); }
[data-theme="light"] .game-hero-card,
[data-theme="light"] .game-sidebar-card { border-color: var(--border-strong); }
[data-theme="light"] .game-sidebar-spec { border-bottom-color: var(--border); }
[data-theme="light"] .game-sidebar-spec span:first-child,
[data-theme="light"] .game-sidebar-section-l { color: var(--text-muted); }
[data-theme="light"] .game-sidebar-spec span:last-child { color: var(--text-primary); }

/* #27 — light-mode visibility for glass tiles / badges / rows */
[data-theme="light"] .header-nav-link:hover { background: rgba(15,23,42,.05); }
[data-theme="light"] .rh-badge,
[data-theme="light"] .review-hero-min-rating,
[data-theme="light"] .review-hero-min-glass .review-hero-min-rating,
[data-theme="light"] .game-orb,
[data-theme="light"] .game-stat-tile,
[data-theme="light"] .game-sidebar-rate-row,
[data-theme="light"] .game-spec-item,
[data-theme="light"] .review-hero-min-glass .rh-stat,
[data-theme="light"] .popup-game-context {
    background: var(--bg-surface-2);
    border-color: var(--border);
}
[data-theme="light"] .review-hero-min-name,
[data-theme="light"] .rh-rating-num,
[data-theme="light"] .rh-badge { color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════════════════
   GAME COMPARISON POPUP — single recommended casino card
   ════════════════════════════════════════════════════════════════════════ */
.popup-game-context {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 16px;
}
.popup-game-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #1a1d27;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup-game-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.popup-game-text {
    min-width: 0;
}
.popup-game-label {
    font-size: 10px;
    color: var(--text-dim, #888);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 4px;
}
.popup-game-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary, #fff);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.popup-game-prov {
    font-size: 12px;
    color: var(--text-secondary, #aaa);
    margin-top: 2px;
}
.popup-game-arrow {
    text-align: center;
    font-size: 28px;
    color: var(--text-dim, #888);
    margin: 4px 0 12px;
    font-weight: 300;
}
.popup-card-single {
    max-width: 380px;
    margin: 0 auto;
}

[data-theme="light"] .popup-game-context {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   AUTHOR PAGE — Aurora Glass
   ═══════════════════════════════════════════════════════════════════════ */
.author-page {
    --cc-ink:#fff; --cc-ink-2:rgba(255,255,255,.72); --cc-ink-3:rgba(255,255,255,.48); --cc-ink-4:rgba(255,255,255,.34);
    --cc-glass:rgba(255,255,255,.055); --cc-glass-2:rgba(255,255,255,.085); --cc-glass-3:rgba(255,255,255,.12);
    --cc-line:rgba(255,255,255,.11); --cc-line-2:rgba(255,255,255,.2);
    --cc-sheen:rgba(255,255,255,.14);
    /* cc-green/cc-green-2/cc-teal/cc-gold/cc-gold-2 inherited from :root */
    --cc-shadow-2:0 18px 50px -14px rgba(0,0,0,.55);
    --cc-shadow-3:0 30px 70px -18px rgba(0,0,0,.68);
    --cc-ease:cubic-bezier(.22,.61,.36,1);
    --cc-spring:cubic-bezier(.34,1.4,.64,1);
    padding-top:28px; padding-bottom:48px;
}
[data-theme="light"] .author-page {
    --cc-ink:#0f172a; --cc-ink-2:#334155; --cc-ink-3:#5b6877; --cc-ink-4:#8593a3;
    --cc-glass:rgba(15,23,42,.035); --cc-glass-2:rgba(15,23,42,.055); --cc-glass-3:rgba(15,23,42,.085);
    --cc-line:rgba(15,23,42,.14); --cc-line-2:rgba(15,23,42,.24);
    --cc-sheen:rgba(255,255,255,.9);
    --cc-shadow-2:0 12px 30px -10px rgba(15,23,42,.18);
    --cc-shadow-3:0 22px 48px -14px rgba(15,23,42,.26);
}

/* ── Hero ── */
.author-hero {
    position:relative; display:grid; grid-template-columns:auto 1px 1fr;
    gap:32px; align-items:center; padding:30px 34px;
    border-radius:26px; overflow:hidden;
    background:linear-gradient(150deg, var(--cc-glass-2), var(--cc-glass));
    backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
    border:1px solid var(--cc-line); box-shadow:var(--cc-shadow-2), inset 0 1px 0 var(--cc-sheen);
}
[data-theme="light"] .author-hero { background:#fff; }
.author-hero::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 42% 120% at 16% -10%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 70%);
}
.ah-left { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:11px; width:210px; flex-shrink:0; }
.ah-avatar {
    width:108px; height:108px; border-radius:50%; overflow:hidden;
    background:linear-gradient(135deg, var(--cc-green), var(--cc-teal));
    display:flex; align-items:center; justify-content:center;
    font-size:38px; font-weight:800; color:#04261b;
    border:3px solid var(--cc-line-2); box-shadow:0 12px 30px -8px color-mix(in srgb, var(--brand-primary) 50%, transparent), inset 0 2px 0 rgba(255,255,255,.25);
}
.ah-avatar img { width:100%; height:100%; object-fit:cover; }
.ah-role {
    display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:999px;
    background:color-mix(in srgb, var(--brand-primary) 13%, transparent); border:1px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
    font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cc-green-2);
}
[data-theme="light"] .ah-role { color:var(--cc-green-2); }
.ah-role .ic-star { width:11px; height:11px; }
.ah-name { font-size:23px; font-weight:800; letter-spacing:-0.02em; line-height:1.15; color:var(--cc-ink); }
.ah-stats { display:flex; gap:10px; margin-top:3px; }
.ah-stat { padding:8px 14px; border-radius:12px; background:var(--cc-glass-2); border:1px solid var(--cc-line); text-align:center; }
.ah-stat b { display:block; font-size:17px; font-weight:800; color:var(--cc-ink); line-height:1; }
.ah-stat span { font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cc-ink-3); margin-top:3px; display:block; }
.ah-divider { position:relative; z-index:1; width:1px; align-self:stretch; background:linear-gradient(180deg, transparent, var(--cc-line) 20%, var(--cc-line) 80%, transparent); }
.ah-bio { position:relative; z-index:1; min-width:0; }
.ah-bio-label { font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cc-ink-4); margin-bottom:9px; }
.ah-bio p { font-size:14px; line-height:1.75; color:var(--cc-ink-2); }

/* ── Rail ── */
.rail-sec { margin-top:30px; }
.rail-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding:0 2px; }
.rail-title { display:flex; align-items:center; gap:9px; font-size:17px; font-weight:800; letter-spacing:-0.02em; color:var(--cc-ink); }
.rail-title .tdot { width:7px; height:7px; border-radius:50%; background:var(--cc-green-2); box-shadow:0 0 10px var(--cc-green-2); }
.rail-title .tcount { font-size:12px; font-weight:700; color:var(--cc-ink-3); background:var(--cc-glass-2); border:1px solid var(--cc-line); padding:2px 9px; border-radius:999px; }
.rail-nav { display:flex; gap:8px; }
.rail-btn {
    width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--cc-glass-2); border:1px solid var(--cc-line); color:var(--cc-ink-2);
    cursor:pointer; transition:all .2s var(--cc-ease);
}
.rail-btn:hover { background:var(--cc-glass-3); border-color:var(--cc-line-2); color:var(--cc-ink); }
.rail-btn svg { width:16px; height:16px; }
.rail {
    display:flex; gap:16px; overflow-x:auto;
    scroll-snap-type:x mandatory; scroll-padding-inline:4px;
    padding:4px; margin:-4px;
    scrollbar-width:none; -ms-overflow-style:none;
}
.rail::-webkit-scrollbar { display:none; }

/* ── Casino review card ── */
.rcard {
    flex:0 0 248px; scroll-snap-align:start; border-radius:20px; overflow:hidden;
    background:linear-gradient(160deg, color-mix(in srgb, var(--cc-green-2) 9%, transparent), var(--cc-glass) 46%);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid var(--cc-line); box-shadow:var(--cc-shadow-2), inset 0 1px 0 var(--cc-sheen);
    transition:transform .3s var(--cc-ease), border-color .3s var(--cc-ease), box-shadow .3s var(--cc-ease);
    text-decoration:none;
}
[data-theme="light"] .rcard { background:linear-gradient(160deg, color-mix(in srgb, var(--brand-primary) 7%, transparent), #fff 55%); }
.rcard:hover { transform:translateY(-4px); border-color:var(--cc-line-2); box-shadow:var(--cc-shadow-3), inset 0 1px 0 var(--cc-sheen); }
.rc-logo { height:92px; display:flex; align-items:center; justify-content:center; padding:14px; border-bottom:1px solid var(--cc-line); }
.rc-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.rc-logo .lg { font-weight:800; font-size:18px; letter-spacing:-0.02em; color:#fff; }
.rc-body { padding:15px 16px 17px; }
.rc-name { font-size:16px; font-weight:800; letter-spacing:-0.02em; margin-bottom:9px; color:var(--cc-ink); }
.rc-meta { display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.rc-rating {
    display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
    background:color-mix(in srgb, var(--brand-primary) 12%, transparent); border:1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
    font-size:12px; font-weight:800; color:var(--cc-green-2);
}
[data-theme="light"] .rc-rating { color:var(--cc-green-2); }
.rc-rating .ic-star { width:12px; height:12px; color:var(--cc-gold); }
.rc-date { font-size:11px; color:var(--cc-ink-4); font-weight:600; }
.rc-bonus {
    display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-radius:12px;
    background:linear-gradient(135deg, rgb(0 0 0 / 17%), rgb(71 54 9 / 6%));
    border:1px solid color-mix(in srgb, var(--brand-accent) 30%, transparent); margin-bottom:12px;
}
[data-theme="light"] .rc-bonus { background:linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 14%, transparent), color-mix(in srgb, var(--brand-accent) 5%, transparent)); border-color:color-mix(in srgb, var(--brand-accent) 36%, transparent); }
.rc-bonus-k { font-size:8px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--cc-gold-2); }
[data-theme="light"] .rc-bonus-k { color:#b45309; }
.rc-bonus-v { font-size:13.5px; font-weight:800; color:var(--cc-ink); }
.rc-link {
    display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; border-radius:12px;
    background:var(--cc-glass-2); border:1px solid var(--cc-line);
    font-size:12px; font-weight:700; color:var(--cc-ink-2); transition:all .2s var(--cc-ease);
}
.rcard:hover .rc-link { background:linear-gradient(118deg, var(--cc-green-2), var(--cc-teal)); color:#04261b; border-color:transparent; }
.rc-link svg { width:13px; height:13px; transition:transform .25s var(--cc-ease); }
.rcard:hover .rc-link svg { transform:translateX(3px); }

/* ── Blog card ── */
.bcard {
    flex:0 0 300px; scroll-snap-align:start; border-radius:20px; overflow:hidden;
    background:linear-gradient(160deg, color-mix(in srgb, var(--cc-teal) 8%, transparent), var(--cc-glass) 46%);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid var(--cc-line); box-shadow:var(--cc-shadow-2), inset 0 1px 0 var(--cc-sheen);
    transition:transform .3s var(--cc-ease), border-color .3s var(--cc-ease), box-shadow .3s var(--cc-ease);
    text-decoration:none;
}
[data-theme="light"] .bcard { background:linear-gradient(160deg, color-mix(in srgb, var(--cc-teal) 7%, transparent), #fff 55%); }
.bcard:hover { transform:translateY(-4px); border-color:var(--cc-line-2); box-shadow:var(--cc-shadow-3), inset 0 1px 0 var(--cc-sheen); }
.bc-img {
    height:158px; position:relative; display:flex; align-items:flex-end; padding:12px;
    border-bottom:1px solid var(--cc-line);
    background-size:cover; background-position:center;
}
.bc-img.no-img { background:linear-gradient(135deg, #1d4ed8, #0891b2); }
.bc-img::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.45)); }
.bc-cat {
    position:relative; z-index:1; display:inline-flex; align-items:center; gap:5px;
    padding:5px 11px; border-radius:999px;
    background:rgba(11,13,19,.6); backdrop-filter:blur(8px); border:1px solid var(--cc-line-2);
    font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cc-green-2);
}
.bc-body { padding:14px 16px 16px; }
.bc-title {
    font-size:15px; font-weight:800; letter-spacing:-0.015em; line-height:1.35; margin-bottom:9px; color:var(--cc-ink);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bc-excerpt {
    font-size:12.5px; color:var(--cc-ink-3); line-height:1.6; margin-bottom:12px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bc-meta { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; color:var(--cc-ink-4); }
.bc-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--cc-ink-4); }

/* ── Game rail card (author page + "More Games" on game reviews) ── */
.gcard {
    flex:0 0 230px; scroll-snap-align:start; border-radius:20px; overflow:hidden;
    background:linear-gradient(160deg, color-mix(in srgb, var(--cc-green-2) 9%, transparent), var(--cc-glass) 46%);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid var(--cc-line); box-shadow:var(--cc-shadow-2), inset 0 1px 0 var(--cc-sheen);
    transition:transform .3s var(--cc-ease), border-color .3s var(--cc-ease), box-shadow .3s var(--cc-ease);
    text-decoration:none; display:flex; flex-direction:column;
}
[data-theme="light"] .gcard { background:linear-gradient(160deg, color-mix(in srgb, var(--brand-primary) 7%, transparent), #fff 55%); }
.gcard:hover { transform:translateY(-4px); border-color:var(--cc-line-2); box-shadow:var(--cc-shadow-3), inset 0 1px 0 var(--cc-sheen); }
.gc-img {
    height:132px; position:relative; display:flex; align-items:flex-end; padding:10px;
    border-bottom:1px solid var(--cc-line);
    background-size:cover; background-position:center;
}
.gc-img.no-img { background:linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 55%, #000 40%), color-mix(in srgb, var(--cc-teal) 70%, #000 25%)); align-items:center; justify-content:center; }
.gc-img::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.5)); }
.gc-img-ph { position:relative; z-index:1; font-size:38px; }
.gc-cat {
    position:relative; z-index:1; display:inline-flex; align-items:center;
    padding:4px 10px; border-radius:999px;
    background:rgba(11,13,19,.62); backdrop-filter:blur(8px); border:1px solid var(--cc-line-2);
    font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cc-green-2);
}
.gc-body { padding:13px 15px 15px; display:flex; flex-direction:column; gap:9px; flex:1; }
.gc-name {
    font-size:15px; font-weight:800; letter-spacing:-0.015em; line-height:1.32; color:var(--cc-ink);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.gc-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gc-rating {
    display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:999px;
    background:color-mix(in srgb, var(--brand-primary) 12%, transparent); border:1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
    font-size:11.5px; font-weight:800; color:var(--cc-green-2);
}
[data-theme="light"] .gc-rating { color:var(--cc-green-2); }
.gc-prov { font-size:11px; font-weight:600; color:var(--cc-ink-4); }
.gc-link {
    margin-top:auto;
    display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; border-radius:11px;
    background:var(--cc-glass-2); border:1px solid var(--cc-line);
    font-size:11.5px; font-weight:700; color:var(--cc-ink-2); transition:all .2s var(--cc-ease);
}
.gcard:hover .gc-link { background:linear-gradient(118deg, var(--cc-green-2), var(--cc-teal)); color:#04261b; border-color:transparent; }
.gc-link svg { width:13px; height:13px; transition:transform .25s var(--cc-ease); }
.gcard:hover .gc-link svg { transform:translateX(3px); }
.game-related { margin-top:36px; }

.author-empty { text-align:center; padding:50px 20px; color:var(--cc-ink-3); font-size:14px; }

/* ── Author page mobile ── */
@media (max-width:768px) {
    .author-hero { grid-template-columns:1fr; gap:18px; padding:24px 20px; text-align:center; }
    .ah-left { width:auto; }
    .ah-divider { display:none; }
    .ah-bio, .ah-bio-label { text-align:center; }
    .rail-sec { margin-top:24px; }
    .rail { margin:0; padding:4px; }
    .rail-nav { display:none; }
    .rcard { flex:0 0 78%; }
    .bcard { flex:0 0 84%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BLOG SINGLE — Aurora Glass
   ═══════════════════════════════════════════════════════════════════════ */
.blog-single {
    --cc-ink:#fff; --cc-ink-2:rgba(255,255,255,.72); --cc-ink-3:rgba(255,255,255,.48); --cc-ink-4:rgba(255,255,255,.34);
    --cc-glass:rgba(255,255,255,.055); --cc-glass-2:rgba(255,255,255,.085);
    --cc-line:rgba(255,255,255,.11); --cc-line-2:rgba(255,255,255,.2);
    --cc-sheen:rgba(255,255,255,.14);
    /* cc-green/cc-green-2/cc-teal/cc-gold-2 inherited from :root */
    --cc-shadow-2:0 18px 50px -14px rgba(0,0,0,.55);
    --cc-shadow-3:0 30px 70px -18px rgba(0,0,0,.7);
    padding-top:28px; padding-bottom:52px;
}
[data-theme="light"] .blog-single {
    --cc-ink:#0f172a; --cc-ink-2:#334155; --cc-ink-3:#5b6877; --cc-ink-4:#8593a3;
    --cc-glass:rgba(15,23,42,.035); --cc-glass-2:rgba(15,23,42,.055);
    --cc-line:rgba(15,23,42,.14); --cc-line-2:rgba(15,23,42,.24);
    --cc-sheen:rgba(255,255,255,.9);
    --cc-shadow-2:0 12px 30px -10px rgba(15,23,42,.18);
    --cc-shadow-3:0 22px 48px -14px rgba(15,23,42,.26);
}

/* ── Hero card ── */
.post-hero {
    position:relative; border-radius:26px; overflow:hidden; margin-bottom:24px;
    border:1px solid var(--cc-line); box-shadow:var(--cc-shadow-3), inset 0 1px 0 var(--cc-sheen);
}
.post-hero-img { aspect-ratio:16/5; position:relative; overflow:hidden; background:#10131b; }
.post-hero-img.no-img { background:linear-gradient(135deg, #1d4ed8, #0891b2, #7c3aed); }
.post-hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
.post-hero-scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,13,19,.15) 0%, transparent 28%, rgba(11,13,19,.55) 64%, rgba(11,13,19,.93) 100%); }
.post-hero-body { position:absolute; left:0; right:0; bottom:0; padding:30px 34px; }
.post-hero-cat {
    display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; margin-bottom:13px;
    background:color-mix(in srgb, var(--brand-primary) 16%, transparent); backdrop-filter:blur(8px); border:1px solid color-mix(in srgb, var(--brand-primary) 34%, transparent);
    font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--cc-green-2);
}
.post-hero-cat svg { width:11px; height:11px; }
.post-hero-title {
    font-size:32px; font-weight:800; letter-spacing:-0.025em; line-height:1.18; max-width:760px; color:#fff;
    text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.post-hero-meta { display:flex; align-items:center; gap:11px; margin-top:15px; }
.phm-avatar {
    width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0;
    background:linear-gradient(135deg, var(--cc-green), var(--cc-teal));
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:800; color:#04261b; border:2px solid rgba(255,255,255,.2);
}
.phm-avatar img { width:100%; height:100%; object-fit:cover; }
.phm-text { font-size:12.5px; color:rgba(255,255,255,.72); font-weight:600; }
.phm-text b { color:#fff; font-weight:800; }
.phm-text b a { color:inherit; }
.phm-row { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.6); font-size:12px; font-weight:600; margin-top:2px; }
.phm-sep { width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.4); }
.phm-i { display:inline-flex; align-items:center; gap:5px; }
.phm-ico { width:13px; height:13px; flex-shrink:0; }
.ic-cal { color:var(--cc-green-2); }
.ic-clk { color:var(--cc-gold-2); }

/* ── Content box ── */
.post-content {
    padding:42px 48px; border-radius:26px;
    background:linear-gradient(160deg, var(--cc-glass-2), var(--cc-glass) 55%);
    backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
    border:1px solid var(--cc-line); box-shadow:var(--cc-shadow-2), inset 0 1px 0 var(--cc-sheen);
}
[data-theme="light"] .post-content { background:#fff; }
.post-content p { font-size:15.5px; line-height:1.8; color:var(--cc-ink-2); margin-bottom:20px; }
.post-content > p:first-child, .post-content .lead { font-size:17px; line-height:1.75; color:var(--cc-ink); font-weight:500; }
/* Blog-post body accents — scoped to DIRECT children of the content
   container only. Patterns (wp-block-group, wp-block-columns, .related-posts
   etc.) are descendants at deeper levels, so they are never touched by
   these rules. This was the root cause of green accent lines bleeding into
   homepage section headings. */
.post-content > h2,
.entry-content > h2 {
    font-size:22px; font-weight:800; letter-spacing:-0.02em; margin:34px auto 14px;
    display:flex; align-items:center; gap:10px; color:var(--cc-ink);
}
.post-content > h2::before,
.entry-content > h2::before { content:''; width:5px; height:22px; border-radius:3px; background:linear-gradient(180deg, var(--cc-green-2), var(--cc-teal)); flex-shrink:0; }

.post-content h3 { font-size:17px; font-weight:800; margin:24px auto 10px; color:var(--cc-ink); }

/* Blog-post body list styling — DIRECT children only. Patterns own their
   own list styling at deeper nesting levels and are never touched. */
.post-content > ul, .post-content > ol,
.entry-content > ul, .entry-content > ol,
.post-content ul.wp-block-list, .post-content ol.wp-block-list,
.entry-content ul.wp-block-list, .entry-content ol.wp-block-list { margin:0 auto 20px; padding-inline-start:4px; list-style:none; }
.post-content > ul > li, .post-content > ol > li,
.entry-content > ul > li, .entry-content > ol > li,
.post-content ul.wp-block-list > li, .post-content ol.wp-block-list > li,
.entry-content ul.wp-block-list > li, .entry-content ol.wp-block-list > li {
    font-size:15px; line-height:1.7; color:var(--cc-ink-2); padding-inline-start:26px; position:relative; margin-bottom:9px;
}
.post-content > ul > li::before,
.entry-content > ul > li::before,
.post-content ul.wp-block-list > li::before,
.entry-content ul.wp-block-list > li::before {
    content:''; position:absolute; inset-inline-start:4px; top:9px; width:7px; height:7px; border-radius:50%;
    background:var(--cc-green-2); box-shadow:0 0 8px color-mix(in srgb, var(--cc-green-2) 60%, transparent);
}
.post-content > ol, .entry-content > ol,
.post-content ol.wp-block-list, .entry-content ol.wp-block-list { counter-reset:postlist; }
.post-content > ol > li, .entry-content > ol > li,
.post-content ol.wp-block-list > li, .entry-content ol.wp-block-list > li { counter-increment:postlist; }
.post-content > ol > li::before, .entry-content > ol > li::before,
.post-content ol.wp-block-list > li::before, .entry-content ol.wp-block-list > li::before {
    content:counter(postlist); position:absolute; inset-inline-start:0; top:1px;
    font-size:11px; font-weight:800; color:var(--cc-green-2);
}
.post-content > blockquote,
.post-content blockquote.wp-block-quote {
    margin:24px auto; padding:18px 22px; border-radius:16px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 10%, transparent), var(--cc-glass));
    border-inline-start:3px solid var(--cc-green-2);
    font-size:15.5px; line-height:1.7; color:var(--cc-ink); font-style:italic;
}
/* Content links — casino cards inside post content are exempt (cards style their own links) */
/* :where() keeps this at its original (0,1,1) specificity — the card exemption must never out-rank pattern buttons */
.post-content a:where(:not(.casino-card-wrap a)) { color:var(--cc-green-2); text-decoration:underline; text-underline-offset:2px; }
[data-theme="light"] .post-content a:where(:not(.casino-card-wrap a)) { color:var(--cc-green-2); }
.post-content img { max-width:100%; height:auto; border-radius:16px; }
.post-content strong { color:var(--cc-ink); font-weight:800; }

@media (max-width:640px) {
    .post-hero-img { aspect-ratio:4/3.1; }
    .post-hero-body { padding:18px 18px 20px; }
    .post-hero-title { font-size:21px; }
    .post-content { padding:22px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE MENU — Popular Pages: see Aurora Drawer + Bento styles above
   (.md-bento / .md-bt) which replaced the old .mp-grid / .pp-card grid.
   ═══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   MORE GAMES — glass stage (game-review hero benzeri)  [v9.4.8]
   ════════════════════════════════════════════════════════════════════ */
.mg-stage {
    position: relative;
}
.mg-stage .rail { position: relative; z-index: 1; scroll-snap-type: x proximity; }

.mgcard {
    flex: 0 0 256px; scroll-snap-align: start;
    position: relative; border-radius: 18px; padding: 11px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 16px 48px rgba(0,0,0,.34);
    text-decoration: none; display: block;
    transition: transform .42s cubic-bezier(.22,.78,.28,1),
                box-shadow .42s cubic-bezier(.22,.78,.28,1),
                background .42s cubic-bezier(.22,.78,.28,1),
                border-color .42s cubic-bezier(.22,.78,.28,1);
}
.mgcard:hover {
    transform: translateY(-8px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.15);
    box-shadow: 0 26px 58px rgba(0,0,0,.46);
}
.mg-img {
    position: relative; height: 148px; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
}
.mg-art {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform .55s cubic-bezier(.22,.78,.28,1);
}
.mgcard:hover .mg-art { transform: scale(1.07); }
.mg-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 32%, rgba(7,9,8,.6));
}
.mg-img.no-img { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 55%, #000 40%), color-mix(in srgb, var(--cc-teal) 70%, #000 25%)); }
.mg-img-ph { font-size: 40px; }
.mg-type {
    position: absolute; top: 9px; inset-inline-start: 9px; z-index: 2;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(7,9,8,.6); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.14);
    font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.72);
}
.mg-rate {
    position: absolute; top: 9px; inset-inline-end: 9px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px; border-radius: 9px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 95%, transparent), rgba(245,158,11,.9));
    box-shadow: 0 4px 12px rgba(245,158,11,.4);
    font-size: 12px; font-weight: 900; color: #241803;
}
.mg-rate svg { width: 11px; height: 11px; }
.mg-name {
    margin-top: 13px; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em;
    line-height: 1.3; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.mg-prov {
    margin-top: 6px; display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; color: var(--cc-green-2);
}
.mg-prov svg { width: 13px; height: 13px; }
.mg-strip {
    margin-top: 13px; display: flex; align-items: center;
    padding: 12px 6px; border-radius: 13px;
    background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.06);
}
.mg-stat { flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 11px; min-width: 0; }
.mg-stat + .mg-stat { border-left: 1px solid rgba(255,255,255,.07); }
.mg-stat-ic {
    flex-shrink: 0; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: color-mix(in srgb, var(--cc-green-2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cc-green-2) 20%, transparent); color: var(--cc-green-2);
}
.mg-stat-ic svg { width: 14px; height: 14px; }
.mg-stat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-stat-label { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.34); }
.mg-stat-value { font-size: 13.5px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.mg-cta {
    margin-top: 13px; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px; border-radius: 13px;
    background: color-mix(in srgb, var(--cc-green-2) 7%, transparent); border: 1px solid color-mix(in srgb, var(--cc-green-2) 30%, transparent);
    font-size: 12.5px; font-weight: 800; color: var(--cc-green-2);
    transition: background .3s cubic-bezier(.22,.78,.28,1), color .3s cubic-bezier(.22,.78,.28,1), border-color .3s cubic-bezier(.22,.78,.28,1);
}
.mg-cta svg { width: 14px; height: 14px; transition: transform .3s cubic-bezier(.22,.78,.28,1); }
.mgcard:hover .mg-cta {
    background: linear-gradient(115deg, var(--cc-green-2), var(--cc-teal));
    color: #04261b; border-color: transparent;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--cc-teal) 28%, transparent);
}
.mgcard:hover .mg-cta svg { transform: translateX(3px); }
/* Light mode — base rules above are the dark default; these flip the
   hardcoded white/dark values (card surface, shadow, text, strip,
   dividers) to theme-aware light values so the cards adapt like the rest
   of the theme (mirrors the .rp-card light treatment). */
[data-theme="light"] .mgcard {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.16);
    box-shadow: 0 2px 10px rgba(15,23,42,.10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .mgcard:hover {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--brand-primary) 32%, transparent);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}
[data-theme="light"] .mg-img { border-color: rgba(15,23,42,.10); }
[data-theme="light"] .mg-name,
[data-theme="light"] .mg-stat-value { color: var(--cc-ink); }
[data-theme="light"] .mg-stat-label { color: rgba(15,23,42,.46); }
[data-theme="light"] .mg-strip {
    background: rgba(15,23,42,.03);
    border-color: rgba(15,23,42,.10);
}
[data-theme="light"] .mg-stat + .mg-stat { border-left-color: rgba(15,23,42,.10); }
@media (max-width: 560px) {
    .mg-stage { padding: 0; }
    .mgcard { flex-basis: 230px; }
}

/* RTL Overrides - Most handled via logical properties, minor tweaks here */
[dir="rtl"] .detail-review-link svg,
[dir="rtl"] .gcta .ic,
[dir="rtl"] .rc-link svg,
[dir="rtl"] .rail-btn svg,
[dir="rtl"] .pg svg {
    transform: scaleX(-1);
}
[dir="rtl"] .casino-toc-link { text-align: right; }
[dir="rtl"] .hero-eyebrow { letter-spacing: 0.08em; }

/* Mobile menu Popular Pages — grid is symmetric; headings align to start */
[dir="rtl"] .mp-head,
[dir="rtl"] .mp-menu-label { text-align: right; }

/* #22 — Content list bullets/markers flipped to the right in RTL */
[dir="rtl"] .entry-content ul,
[dir="rtl"] .entry-content ol { margin: 14px 20px 14px 0; }

/* List bullet/marker direction is now handled automatically by logical
   properties on the base rules (.post-content/.entry-content > ul/ol),
   so the previous [dir="rtl"] padding/::before overrides were removed:
   they duplicated the logical output for direct children and wrongly
   reached into nested pattern lists (which own their styling). */

/* Pros / cons list markers */
[dir="rtl"] .pros-list li,
[dir="rtl"] .cons-list li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .pros-list li::before,
[dir="rtl"] .cons-list li::before { left: auto; right: 0; }

/* (Removed a duplicate of the entry-content list RTL block — now handled
   by the logical base rules above.) */

/* ═══════════════════════════════════════════════════════════════════
   RELATED POSTS RAIL (Varyant I — Dual-Tone Stacked)
   Shown on blog single-post page below content.
   Image → 2px brand accent → title + meta → distinct-bg author footer.
   ═══════════════════════════════════════════════════════════════════ */
.related-posts {
    margin: 48px auto 16px;
    max-width: 100%;
    padding: 0 4px;
}
.rp-section-title {
    font-size: 19px; font-weight: 800; letter-spacing: -0.02em;
    margin: 0 0 16px;
    display: flex; align-items: center; gap: 9px;
    color: var(--cc-ink);
}
.rp-section-title .tdot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cc-green-2);
    box-shadow: 0 0 10px var(--cc-green-2);
    flex-shrink: 0;
}

/* Horizontal scroll rail */
.rp-rail {
    display: flex;
    gap: 14px;
    padding: 8px 4px 16px;
    margin: 0 -4px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.rp-rail::-webkit-scrollbar { display: none; }
.rp-rail > .rp-card {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 310px;
}

/* Card */
.rp-card {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    text-decoration: none;
    color: inherit;
    transition: transform .3s var(--cc-ease, cubic-bezier(.22,.78,.28,1)),
                border-color .3s ease, box-shadow .3s ease;
    isolation: isolate;
}
.rp-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand-primary) 32%, transparent);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}
[data-theme="light"] .rp-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.16);
    box-shadow: 0 2px 10px rgba(15,23,42,.10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Thumbnail */
.rp-card-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #1c2640, #0f1726);
}
.rp-card-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.rp-card-thumb.no-img {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-primary) 40%, #0f1726),
        color-mix(in srgb, var(--brand-primary) 18%, #1c2640));
}
[data-theme="light"] .rp-card-thumb.no-img {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-primary) 35%, #e0e6ee),
        color-mix(in srgb, var(--brand-primary) 18%, #f1f4f8));
}
.rp-card-thumb-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    opacity: .45;
}
.rp-card-cat {
    position: absolute; top: 12px; inset-inline-start: 12px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--cc-green-2);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 40%, transparent);
    font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px;
    max-width: calc(100% - 24px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Brand accent bar (2px) — separates image from body */
.rp-card-accent {
    height: 2px;
    background: linear-gradient(90deg,
        var(--cc-green-2),
        var(--cc-teal),
        transparent);
}

/* Top section: title + meta */
.rp-card-top {
    padding: 14px 16px 12px;
    display: flex; flex-direction: column;
    gap: 10px;
}
.rp-card-title {
    font-size: 15.5px; font-weight: 800; line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--cc-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rp-card-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 11.5px; font-weight: 600;
    color: var(--cc-ink-2);
}
.rp-card-meta-item {
    display: inline-flex; align-items: center; gap: 5px;
}
.rp-card-meta-item .emo {
    font-size: 13px; line-height: 1;
}

/* Author footer with distinct background tone */
.rp-card-foot {
    background: rgba(255,255,255,.025);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 11px 16px;
    display: flex; align-items: center;
    gap: 9px;
    margin-top: auto;
}
[data-theme="light"] .rp-card-foot {
    background: #e9eef6;
    border-top: 1px solid rgba(15,23,42,.18);
}
.rp-card-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cc-green-2), var(--cc-teal));
    color: #04261b;
    font-size: 11px; font-weight: 800;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.18);
    overflow: hidden;
}
/* When avatar image exists — no gradient bg, just img cover */
.rp-card-avatar.rp-card-avatar-img {
    background: none;
    padding: 0;
}
.rp-card-avatar.rp-card-avatar-img img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; border-radius: 50%;
}
[data-theme="light"] .rp-card-avatar {
    border-color: rgba(15,23,42,.18);
    color: #fff;
}
.rp-card-foot-info {
    display: flex; flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.rp-card-foot-name {
    font-size: 12px; font-weight: 800;
    color: var(--cc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rp-card-foot-sub {
    font-size: 10px; font-weight: 600;
    color: var(--cc-ink-3);
}

/* Mobile: 75% card width — gives ~20% peek on smallest 360px screens */
@media (max-width: 700px) {
    .related-posts { margin: 36px auto 12px; }
    .rp-section-title { font-size: 17px; }
    .rp-rail > .rp-card { width: 75%; }
    .rp-card-title { font-size: 15px; }
}

/* RTL */
[dir="rtl"] .rp-card-accent {
    background: linear-gradient(270deg,
        var(--cc-green-2),
        var(--cc-teal),
        transparent);
}

/* ════════════════════════════════════════════════════════════════════
   v9.5.6 — CASINO CONTENT PATTERNS
   All styles use theme tokens. RTL via logical properties.
   Light/dark adapt via [data-theme] token overrides.
   ════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   3-Column Category Cards — V5.1
   Skewed brand stripe accent. Mobile stack.
   ────────────────────────────────────────────────────────────────── */
.casino-3col-wrap { margin-block: var(--sp-8); }
/* casino-3col layout is handled by Gutenberg's native wp:columns block.
   We only set the gap; everything else (display:flex on .wp-block-columns,
   responsive collapse, etc.) comes from WP core. */
.casino-3col.wp-block-columns {
    gap: 16px;
    margin: 0;
}
/* The dynamic block renders .casino-3col directly (no wp-block-columns), so
   give it its own grid + a container so cards collapse based on the block's
   own width (works inside a narrow sidebar, not just a narrow viewport). */
.casino-3col-wrap { container-type: inline-size; }
.casino-3col {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 16px;
    margin: 0;
}
@container (max-width: 720px) {
    .casino-3col { grid-template-columns: 1fr; }
}
.casino-3col-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 30px 26px 26px;
    /* Editorial Outline: minimal bordered surface, no fill — adapts to light
       mode (and the light editor canvas) automatically via theme tokens. */
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
/* Small top-left corner accent (replaces the old full-width stripe). */
.casino-3col-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 34px;
    height: 3px;
    background: var(--brand-primary);
    border-end-end-radius: 3px;
    transition: width var(--dur-base) var(--ease);
}
.casino-3col-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand-primary) 55%, transparent);
    background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
    color: var(--text-primary);
}
.casino-3col-card:hover::before { width: 64px; }
/* Head row: icon circle on the start side, serif index number on the end. */
.casino-3col-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}
.casino-3col-circ {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.casino-3col-idx {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 34px;
    font-weight: 700;
    line-height: .8;
    color: color-mix(in srgb, var(--brand-primary) 38%, transparent);
    transition: color var(--dur-base) var(--ease);
}
.casino-3col-card:hover .casino-3col-idx { color: var(--brand-primary); }
.casino-3col-ico { font-size: 22px; line-height: 1; }
/* Image icon (iconType=image): bigger than the emoji, shown cleanly with no
   circle or background so transparent PNGs read well. */
.casino-3col-circ.is-img {
    inline-size: auto;
    block-size: auto;
    background: none;
    border: 0;
    border-radius: 0;
    place-items: start;
}
.casino-3col-img {
    display: block;
    block-size: 56px;
    inline-size: auto;
    max-inline-size: 120px;
    object-fit: contain;
    border-radius: 10px;
}
.casino-3col-title,
h3.casino-3col-title,
.wp-block-heading.casino-3col-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text-primary);
}
.casino-3col-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.55;
    flex: 1;
}
.casino-3col-arrow {
    align-self: flex-start;
    margin-top: 2px;
}
.casino-3col-arrow a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1.5px solid color-mix(in srgb, var(--brand-primary) 40%, transparent);
    padding-bottom: 2px;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), gap var(--dur-base) var(--ease);
}
.casino-3col-card:hover .casino-3col-arrow a,
.casino-3col-arrow a:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    gap: 11px;
}
@media (max-width: 720px) {
    /* wp:columns collapses to single column automatically below 781px in
       its native CSS. No override needed. */
    .casino-3col.wp-block-columns { gap: 12px; }
}
@container (max-width: 520px) {
    /* Phone-width: shrink card padding so copy isn't squeezed into a thin
       strip once the page gutter + card padding stack on a narrow column. */
    .casino-3col-card { padding: 20px 18px; }
}


/* ──────────────────────────────────────────────────────────────────
   Content List (2-Column)
   Layout: native wp:columns (2 columns) + each item uses native
   flex layout (icon + body horizontal). We only style the appearance.
   ────────────────────────────────────────────────────────────────── */
.casino-cl-wrap { margin-block: var(--sp-7); }
.casino-cl.wp-block-columns {
    gap: 16px 24px;
    margin: 0;
}
/* The dynamic block renders .casino-cl directly (no wp-block-columns). Give
   it a 2-col grid + a container so it collapses based on its own width
   (narrow sidebar / mobile), and make the item a flex row itself. */
.casino-cl-wrap { container-type: inline-size; }
.casino-cl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
    margin: 0;
}
/* Column count is editor-controlled (1 / 2 / 3). The doubled class keeps each
   variant winning over the base; collapse rules below match its specificity. v9.28.10 */
.casino-cl.casino-cl--cols-1 { grid-template-columns: 1fr; }
.casino-cl.casino-cl--cols-2 { grid-template-columns: repeat(2, 1fr); }
.casino-cl.casino-cl--cols-3 { grid-template-columns: repeat(3, 1fr); }
.casino-cl-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0;
}
/* Responsive collapse via the wrap's inline-size container: 3-col drops to
   2-col, then every layout to a single column on narrow widths. */
@container (max-width: 860px) {
    .casino-cl.casino-cl--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 600px) {
    .casino-cl,
    .casino-cl.casino-cl--cols-1,
    .casino-cl.casino-cl--cols-2,
    .casino-cl.casino-cl--cols-3 { grid-template-columns: 1fr; }
}
.casino-cl-item.wp-block-group {
    gap: 12px;
    padding: 4px 0;
}
.casino-cl-check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 45%, transparent);
    display: grid; place-items: center;
    color: var(--cc-green-2);
    font-size: 13px;
    font-weight: 800;
    margin-top: 2px;
}
.casino-cl-body { display: flex; flex-direction: column; gap: 2px; }
.casino-cl-body strong,
.casino-cl-body h4,
.casino-cl-body .cx-h,
.casino-cl-body .wp-block-heading {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.casino-cl-body span:not(.cx-h), /* v9.32 m6 fix: Span secilen baslik govde stiline dusmesin */
.casino-cl-body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 720px) {
    /* wp:columns native collapse handles this — keep override for gap only */
    .casino-cl.wp-block-columns { gap: 12px; }
}


/* ──────────────────────────────────────────────────────────────────
   Numbered Tips — C+ Editorial Magazine
   3-column grid (2 on tablet, 1 on mobile). Each item:
     • Top brand divider (1px) + skewed accent (32×3px) in top-left corner
     • Flex head row: Playfair gradient num + optional 56×56 square image
     • Serif title + sans description
     • If image is omitted (no img child or empty src), number scales up

   Layout: native Gutenberg grid (outer) + native flex (head row).
   We only style appearance.
   ────────────────────────────────────────────────────────────────── */
.casino-tips {
    --tips-title: var(--text-primary);
    --tips-text: var(--text-muted);
    --tips-divider: color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
[data-theme="light"] .casino-tips {
    --tips-divider: color-mix(in srgb, var(--brand-primary) 38%, transparent);
}
.casino-tips.wp-block-group {
    margin-block: var(--sp-8);
}
/* ── Dynamic block (casino/tips): clean markup without wp-block-group
   wrappers, so it needs its own grid / item / head / accent rules. The
   number, image, title and text rules below are NOT wp-block-group-scoped,
   so they already apply to the block. Responsive uses container queries so
   the grid collapses inside a narrow sidebar too. ── */
.casino-tips { container-type: inline-size; margin-block: var(--sp-8); }
.casino-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 36px;
    margin: 0;
}
.casino-tips-item {
    position: relative;
    padding: 22px 0 24px;
    border-block-start: 1px solid var(--tips-divider);
    background: transparent;
}
.casino-tips-item::before {
    content: '';
    position: absolute;
    top: -2px;
    inset-inline-start: 0;
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, var(--cc-green-2), var(--cc-teal));
    transform: skewX(-20deg);
    border-radius: 2px;
    pointer-events: none;
}
[dir="rtl"] .casino-tips-item::before { transform: skewX(20deg); }
.casino-tips-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-block-end: 12px;
}
@container (max-width: 760px) {
    .casino-tips-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 28px; }
}
@container (max-width: 480px) {
    .casino-tips-grid { grid-template-columns: 1fr; gap: 4px 0; }
    .casino-tips-item { padding: 18px 0 20px; }
    .casino-tips-num { font-size: 44px; }
    .casino-tips-item.no-img .casino-tips-num { font-size: 52px; }
    .casino-tips-img,
    figure.casino-tips-img { width: 96px; height: 96px; }
    .casino-tips-title,
    h4.casino-tips-title { font-size: 17px; }
}
.casino-tips-grid.wp-block-group {
    gap: 4px 36px;
}
.casino-tips-item.wp-block-group {
    position: relative;
    padding: 22px 0 24px;
    border-block-start: 1px solid var(--tips-divider);
    background: transparent;
}
/* Skewed brand accent at top-left corner of each item */
.casino-tips-item.wp-block-group::before {
    content: '';
    position: absolute;
    top: -2px;
    inset-inline-start: 0;
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, var(--cc-green-2), var(--cc-teal));
    transform: skewX(-20deg);
    border-radius: 2px;
    pointer-events: none;
}
[dir="rtl"] .casino-tips-item.wp-block-group::before {
    transform: skewX(20deg);
}
/* Head row: num + image */
.casino-tips-head.wp-block-group {
    gap: 16px;
    margin-block-end: 12px;
    align-items: center;
}
.casino-tips-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--cc-green-2), var(--cc-teal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    flex-shrink: 0;
    display: inline-block;
}
.casino-tips-img,
figure.casino-tips-img {
    /* Transparent, borderless box sized for cut-out (background-removed) PNGs.
       object-fit:contain shows the whole cut-out without cropping. */
    width: 120px;
    height: 120px;
    overflow: visible;
    background: transparent;
    border: none;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}
.casino-tips-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* When item has no image (no .casino-tips-img inside, OR empty <img>),
   number scales up. :has() is supported in all evergreen browsers since 2023. */
.casino-tips-item.wp-block-group:not(:has(.casino-tips-img img[src])) .casino-tips-num,
.casino-tips-item.wp-block-group:has(.casino-tips-img img[src=""]) .casino-tips-num,
.casino-tips-item.no-img .casino-tips-num {
    font-size: 60px;
}
.casino-tips-title,
h4.casino-tips-title,
.wp-block-heading.casino-tips-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px;
    font-weight: 800;
    color: var(--tips-title);
    margin: 0 0 7px;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.casino-tips-text,
p.casino-tips-text {
    font-size: 12.5px;
    color: var(--tips-text);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 960px) {
    /* native columnCount=3 from layout JSON doesn't auto-collapse;
       override with same 2-class specificity as WP's emitted .wp-block-group.is-layout-grid */
    .wp-block-group.casino-tips-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 28px; }
}
@media (max-width: 560px) {
    .wp-block-group.casino-tips-grid { grid-template-columns: 1fr; gap: 4px 0; }
    .casino-tips-num { font-size: 44px; }
    .casino-tips-item.wp-block-group:not(:has(.casino-tips-img img[src])) .casino-tips-num,
    .casino-tips-item.wp-block-group:has(.casino-tips-img img[src=""]) .casino-tips-num,
    .casino-tips-item.no-img .casino-tips-num {
        font-size: 52px;
    }
    .casino-tips-img,
    figure.casino-tips-img { width: 96px; height: 96px; }
    .casino-tips-title,
    h4.casino-tips-title { font-size: 17px; }
    .casino-tips-item.wp-block-group { padding: 18px 0 20px; }
}


/* ──────────────────────────────────────────────────────────────────
   Bonus Highlight — Single Hero (B Centered)
   Flexible logo 200×60 fixed container, object-fit contain.
   Playfair gradient amount.
   ────────────────────────────────────────────────────────────────── */
.casino-bonus-hero {
    margin: var(--sp-8) auto;
    max-width: 560px;
}
.casino-bonus-hero-inner {
    position: relative;
    padding: 36px 30px 28px;
    background:
        radial-gradient(420px 280px at 50% 0%, color-mix(in srgb, var(--brand-primary) 14%, transparent), transparent 70%),
        linear-gradient(180deg, var(--bg-surface-1), var(--bg-base));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
    border-radius: var(--r-xl);
    text-align: center;
    overflow: hidden;
}
.casino-bonus-hero-logo {
    width: 200px;
    height: 60px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
}
.casino-bonus-hero-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.casino-bonus-hero-logo:empty,
.casino-bonus-hero-logo img[src=""],
.casino-bonus-hero-logo img:not([src]) {
    background: linear-gradient(135deg, var(--bg-surface-2), var(--bg-surface-1));
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
}
.casino-bonus-hero-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-green-2);
    margin-bottom: 8px;
    padding: 4px 12px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.casino-bonus-hero-amount,
h3.casino-bonus-hero-amount,
.wp-block-heading.casino-bonus-hero-amount {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 76px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.035em;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--cc-green-2) 60%, var(--cc-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--brand-primary) 30%, transparent));
    margin: 6px 0;
}
.casino-bonus-hero-sub {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.casino-bonus-hero-badges {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 22px;
}
.casino-bonus-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 10px;
    color: var(--text-muted);
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
}
/* Bonus CTA - target the <a> link inside button blocks */
a.casino-bonus-cta,
.wp-block-button__link.casino-bonus-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--brand-primary), var(--cc-teal));
    color: #fff;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .02em;
    text-decoration: none;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 80%, transparent);
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--brand-primary) 35%, transparent),
        0 1px 0 rgba(255,255,255,.18) inset;
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
a.casino-bonus-cta:hover,
.wp-block-button__link.casino-bonus-cta:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow:
        0 12px 32px color-mix(in srgb, var(--brand-primary) 45%, transparent),
        0 1px 0 rgba(255,255,255,.2) inset;
}
a.casino-bonus-cta::after,
.wp-block-button__link.casino-bonus-cta::after { content: '→'; font-size: 16px; line-height: 1; }
[dir="rtl"] a.casino-bonus-cta::after,
.wp-block-button__link.casino-bonus-cta::after { content: '←'; }
.casino-bonus-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-dim);
    text-decoration: none;
}
.casino-bonus-link:hover { color: var(--text-muted); text-decoration: underline; }

@media (max-width: 540px) {
    .casino-bonus-hero-inner { padding: 28px 20px 22px; }
    .casino-bonus-hero-amount,
h3.casino-bonus-hero-amount,
.wp-block-heading.casino-bonus-hero-amount { font-size: 52px; }
}


/* ──────────────────────────────────────────────────────────────────
   Bonus Highlight — Multi Grid (N1)
   Layout: native wp:group grid layout (minimumColumnWidth:260px).
   We only style appearance + ensure gap is correct.
   ────────────────────────────────────────────────────────────────── */
.casino-bonus-grid-wrap { margin-block: var(--sp-8); }
.casino-bonus-grid.wp-block-group {
    gap: 16px;
}
.casino-bonus-card.wp-block-group {
    /* native grid sizes the cards; we just paint them */
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--bg-surface-1), var(--bg-base));
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
    padding: 0;
}
.casino-bonus-card.wp-block-group:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
}
.casino-bonus-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background:
        radial-gradient(220px 80px at 0% 50%, color-mix(in srgb, var(--brand-primary) 30%, transparent), transparent 70%),
        var(--bg-surface-2);
    border-block-end: 1px solid var(--border);
}
.casino-bonus-cat {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-green-2);
}
.casino-bonus-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 3px 8px;
    color: var(--cc-gold);
    background: color-mix(in srgb, var(--cc-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc-gold) 35%, transparent);
    border-radius: var(--r-full);
}
.casino-bonus-body {
    padding: 18px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.casino-bonus-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.casino-bonus-logo {
    width: 110px;
    height: 36px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.casino-bonus-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.casino-bonus-logo:has(img:not([src])),
.casino-bonus-logo:has(img[src=""]) {
    background: var(--bg-surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
}
.casino-bonus-operator {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.01em;
}
.casino-bonus-amount,
h4.casino-bonus-amount,
.wp-block-heading.casino-bonus-amount {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.025em;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--cc-green-2) 60%, var(--cc-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 4px 0 2px;
}
.casino-bonus-amount-sub {
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 6px;
}
.casino-bonus-card .casino-bonus-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}
.casino-bonus-card .casino-bonus-cta {
    padding: 11px 18px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
}
/* No mobile media query needed: native wp:group grid layout with
   "minimumColumnWidth":"260px" uses grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))
   which automatically collapses to single column when viewport < 260+gap. */


/* ──────────────────────────────────────────────────────────────────
   Casino Alert — L1 Side Border + Icon
   Layout: native wp:group flex (icon left + body right).
   We only paint the box + variant colours.
   ────────────────────────────────────────────────────────────────── */
.casino-alert {
    --al-color: var(--cc-green-2);
    --al-glow: var(--brand-primary);
}
.casino-alert.wp-block-group,
.casino-alert {
    display: flex;
    gap: 16px;
    padding: 18px 22px;
    margin-block: var(--sp-7);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--al-glow) 12%, transparent) 0%,
        color-mix(in srgb, var(--al-glow) 4%, transparent) 50%,
        transparent 100%);
    border: 1px solid color-mix(in srgb, var(--al-glow) 22%, transparent);
    border-inline-start: 4px solid var(--al-color);
    border-radius: var(--r-md);
    align-items: flex-start;
}
.casino-alert.is-info {
    --al-color: var(--cc-green-2);
    --al-glow: var(--brand-primary);
}
.casino-alert.is-tip {
    --al-color: var(--cc-gold);
    --al-glow: var(--cc-gold);
}
.casino-alert.is-warning {
    --al-color: #f97316;
    --al-glow: #f97316;
}
.casino-alert-ico {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--al-color);
}
.casino-alert-ico svg { width: 20px; height: 20px; }
.casino-alert-body {}
.casino-alert-label,
h4.casino-alert-label,
.wp-block-heading.casino-alert-label {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--al-color);
    margin-bottom: 4px;
}
.casino-alert-body p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.casino-alert-body p strong,
.casino-alert-body p b {
    color: var(--al-color);
    font-weight: 800;
}
@media (max-width: 540px) {
    .casino-alert.wp-block-group,
    .casino-alert { padding: 14px 16px; gap: 12px; }
    .casino-alert-ico { width: 32px; height: 32px; }
    .casino-alert-ico svg { width: 18px; height: 18px; }
}


/* ════════════════════════════════════════════════════════════════════
   Casino Table block styles (v9.29.0)
   Four styles registered on core/table (see includes/table-block-styles.php):
     · casino-table-zebra:  Solid green header + zebra rows (comparison)
     · casino-table-grid:   Full bordered grid (comparison / spec sheet)
     · casino-table-glass:  Glass panel (comparison, premium)
     · casino-table-rail:   Left rail + node dots (key / value)
   All derive every colour from brand tokens, work in dark + light, are RTL
   safe (logical properties), and degrade to horizontal scroll on narrow
   screens. First column is emphasised (the usual row label); no column is
   assumed to be a rating, so styles stay generic for any table content.
   ════════════════════════════════════════════════════════════════════ */

/* v9.32 m12: hucre icindeki resim metin hizasina uyar (global display:block reset'ini kirar) */
.wp-block-table :is(td, th) img { display: inline-block; vertical-align: middle; }

/* ── 1) Solid Header + Zebra ─────────────────────────────────────────── */
:is(.casino-table-zebra, .is-style-casino-table-zebra) {
    margin-block: var(--sp-8);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    /* rounded corner clip on one axis + horizontal scroll on the other */
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-sm);
}
:is(.casino-table-zebra, .is-style-casino-table-zebra) table {
    width: 100%; min-width: 600px; border-collapse: collapse; margin: 0;
}
:is(.casino-table-zebra, .is-style-casino-table-zebra) thead th {
    text-align: start; padding: 13px 16px; font-size: 11px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: #08130d;
    background: linear-gradient(135deg, var(--brand-primary), var(--cc-teal)); border: 0;
}
[data-theme="light"] :is(.casino-table-zebra, .is-style-casino-table-zebra) thead th { color: #04210f; }
:is(.casino-table-zebra, .is-style-casino-table-zebra) tbody td {
    padding: 13px 16px; font-size: 14px; color: var(--text-secondary);
    border: 0; border-block-end: 1px solid var(--border-subtle);
}
:is(.casino-table-zebra, .is-style-casino-table-zebra) tbody tr:nth-child(odd) {
    background: color-mix(in srgb, var(--bg-surface-1) 60%, transparent);
}
:is(.casino-table-zebra, .is-style-casino-table-zebra) tbody tr:last-child td { border-block-end: 0; }
:is(.casino-table-zebra, .is-style-casino-table-zebra) tbody td:first-child { color: var(--text-primary); font-weight: 700; }
:is(.casino-table-zebra, .is-style-casino-table-zebra) tbody tr:hover { background: color-mix(in srgb, var(--brand-primary) 9%, transparent); }


/* ── 2) Bordered Grid ────────────────────────────────────────────────── */
:is(.casino-table-grid, .is-style-casino-table-grid) {
    margin-block: var(--sp-8);
    border-radius: var(--r-md);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-strong);
}
:is(.casino-table-grid, .is-style-casino-table-grid) table {
    width: 100%; min-width: 600px; border-collapse: collapse; margin: 0; background: var(--bg-surface-1);
}
:is(.casino-table-grid, .is-style-casino-table-grid) thead th {
    text-align: start; padding: 11px 14px; font-size: 10.5px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
    background: color-mix(in srgb, var(--brand-primary) 10%, var(--bg-surface-2));
    border: 1px solid var(--border-strong);
}
:is(.casino-table-grid, .is-style-casino-table-grid) tbody td {
    padding: 11px 14px; font-size: 13.5px; color: var(--text-secondary); border: 1px solid var(--border);
}
:is(.casino-table-grid, .is-style-casino-table-grid) tbody td:first-child { color: var(--text-primary); font-weight: 600; }
:is(.casino-table-grid, .is-style-casino-table-grid) tbody tr:hover td { background: color-mix(in srgb, var(--brand-primary) 6%, transparent); }


/* ── 3) Glass Panel ──────────────────────────────────────────────────── */
:is(.casino-table-glass, .is-style-casino-table-glass) {
    margin-block: var(--sp-8);
    border-radius: var(--r-xl);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* aurora glow baked into the background (no pseudo) so it never fights the
       overflow clipping needed for horizontal scroll */
    background:
        radial-gradient(460px 220px at 12% -10%, color-mix(in srgb, var(--brand-primary) 13%, transparent), transparent 60%),
        rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%);
    box-shadow: var(--shadow-lg);
}
[data-theme="light"] :is(.casino-table-glass, .is-style-casino-table-glass) {
    background:
        radial-gradient(460px 220px at 12% -10%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 60%),
        rgba(15,23,42,.02);
    border: 1px solid rgba(15,23,42,.10);
}
:is(.casino-table-glass, .is-style-casino-table-glass) table {
    width: 100%; min-width: 600px; border-collapse: collapse; margin: 0;
}
:is(.casino-table-glass, .is-style-casino-table-glass) thead th {
    text-align: start; padding: 13px 16px; font-size: 11px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
    background: rgba(255,255,255,.04); border: 0; border-block-end: 1px solid rgba(255,255,255,.10);
}
[data-theme="light"] :is(.casino-table-glass, .is-style-casino-table-glass) thead th {
    background: rgba(15,23,42,.03); border-block-end: 1px solid rgba(15,23,42,.10);
}
:is(.casino-table-glass, .is-style-casino-table-glass) tbody td {
    padding: 13px 16px; font-size: 14px; color: var(--text-secondary);
    border: 0; border-block-end: 1px solid rgba(255,255,255,.05);
}
[data-theme="light"] :is(.casino-table-glass, .is-style-casino-table-glass) tbody td { border-block-end: 1px solid rgba(15,23,42,.06); }
:is(.casino-table-glass, .is-style-casino-table-glass) tbody tr:last-child td { border-block-end: 0; }
:is(.casino-table-glass, .is-style-casino-table-glass) tbody td:first-child { color: var(--text-primary); font-weight: 700; }
:is(.casino-table-glass, .is-style-casino-table-glass) tbody tr:hover td { background: rgba(255,255,255,.05); }
[data-theme="light"] :is(.casino-table-glass, .is-style-casino-table-glass) tbody tr:hover td { background: rgba(15,23,42,.03); }


/* ── 4) Key / Value — Left Rail ──────────────────────────────────────── */
:is(.casino-table-rail, .is-style-casino-table-rail) {
    position: relative;
    max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-block: var(--sp-8);
    padding-inline-start: 24px;
}
:is(.casino-table-rail, .is-style-casino-table-rail)::before {
    content: ''; position: absolute; inset-block: 8px; inset-inline-start: 6px;
    width: 2px; border-radius: 2px;
    background: linear-gradient(var(--cc-green-2), color-mix(in srgb, var(--brand-primary) 25%, transparent));
}
:is(.casino-table-rail, .is-style-casino-table-rail) table {
    width: 100%; border-collapse: collapse; margin: 0;
}
/* Dots only on body rows (header/footer never get one). The dot lives on the
   first CELL, not the row: a <tr>::before is wrapped by the browser in an
   anonymous table-cell -> a phantom first column that pushed every body cell one
   column to the right (header/footer had no ::before, so they misaligned). A
   cell ::before generates no phantom cell, so the columns line up. */
:is(.casino-table-rail, .is-style-casino-table-rail) tbody td:first-child::before {
    content: ''; position: absolute; inset-inline-start: -21px; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--bg-base); border: 2px solid var(--cc-green-2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
:is(.casino-table-rail, .is-style-casino-table-rail) tbody td {
    padding: 13px 14px; font-size: 14px; color: var(--text-primary); font-weight: 700;
    border: 0; border-block-end: 1px solid var(--border-subtle); vertical-align: middle;
}
:is(.casino-table-rail, .is-style-casino-table-rail) tbody td:first-child {
    position: relative; color: var(--text-secondary); font-weight: 600;
}
:is(.casino-table-rail, .is-style-casino-table-rail) tbody tr:last-child td { border-block-end: 0; }

/* WordPress core adds 3px lines on thead (border-bottom) and tfoot (border-top),
   which double up under our header/footer rows. Neutralize both for all styles. */
:is(.casino-table-zebra, .is-style-casino-table-zebra,
    .casino-table-grid, .is-style-casino-table-grid,
    .casino-table-glass, .is-style-casino-table-glass,
    .casino-table-rail, .is-style-casino-table-rail) :is(thead, tfoot) { border: 0; }

/* Key/Value Rail header: subtle styling. No fixed width - natural auto layout
   makes thead/tbody/tfoot share columns so they line up automatically, and the
   key column hugs its content instead of leaving a gap before the values. */
:is(.casino-table-rail, .is-style-casino-table-rail) thead th {
    text-align: start; padding: 10px 14px; font-size: 10.5px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
    background: transparent; border: 0; border-block-end: 1px solid var(--border-subtle);
}

/* Footer (tfoot) cells: styled per design so footers no longer fall back to
   core's light/white 1px borders. Each footer reads as a subtle summary row. */
:is(.casino-table-zebra, .is-style-casino-table-zebra) tfoot td {
    padding: 13px 16px; font-size: 13px; color: var(--text-secondary); font-weight: 700;
    border: 0; border-block-start: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface-1) 60%, transparent);
}
:is(.casino-table-zebra, .is-style-casino-table-zebra) tfoot td:first-child { color: var(--text-primary); }

:is(.casino-table-grid, .is-style-casino-table-grid) tfoot td {
    padding: 11px 14px; font-size: 13px; color: var(--text-primary); font-weight: 700;
    border: 1px solid var(--border-strong);
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--bg-surface-2));
}

:is(.casino-table-glass, .is-style-casino-table-glass) tfoot td {
    padding: 13px 16px; font-size: 13px; color: var(--text-secondary); font-weight: 700;
    border: 0; border-block-start: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
}
[data-theme="light"] :is(.casino-table-glass, .is-style-casino-table-glass) tfoot td {
    border-block-start: 1px solid rgba(15, 23, 42, .10); background: rgba(15, 23, 42, .03);
}
:is(.casino-table-glass, .is-style-casino-table-glass) tfoot td:first-child { color: var(--text-primary); }

:is(.casino-table-rail, .is-style-casino-table-rail) tfoot td {
    padding: 13px 14px; font-size: 13px; color: var(--text-secondary); font-weight: 700;
    border: 0; border-block-start: 1px solid var(--border-subtle); vertical-align: middle;
}


/* ──────────────────────────────────────────────────────────────────
   Editor previews — block edit UI only
   (cosmetic, only shown inside the block editor)
   ────────────────────────────────────────────────────────────────── */
.casino-cta-block-edit {
    padding: 16px;
    background: var(--bg-surface-1);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
}
.casino-cta-block-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.casino-cta-block-preview-pill {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cc-green-2);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
    border-radius: var(--r-full);
    padding: 4px 12px;
}
.casino-game-card-edit {
    padding: 16px;
    background: var(--bg-surface-1);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
}
.casino-game-card-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.casino-game-card-preview-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}
.casino-game-card-preview-rank,
.casino-game-card-preview-size {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: .05em;
}



/* ══════════════════════════════════════════════════════════════════════
   RankMath Schema Blocks — FAQ + How-to
   Built against real RankMath output (verified via browser inspect):

   FAQ:
     <div id="rank-math-faq" class="rank-math-block">
       <div class="rank-math-list flex">
         <div id="faq-question-..." class="rank-math-list-item">
           <h3 class="rank-math-question">Q?</h3>
           <div class="rank-math-answer">
             <p>A.</p>
           </div>
         </div>
       </div>
     </div>

   How-to (different class structure than FAQ):
     <div id="rank-math-howto" class="rank-math-block">
       <div class="rank-math-howto-description">…intro paragraph…</div>
       <div class="rank-math-steps">
         <div id="howto-step-..." class="rank-math-step">
           <h3 class="rank-math-step-title">Step title</h3>
           <div class="rank-math-step-content">
             <p>Step body…</p>
           </div>
         </div>
       </div>
     </div>

   Note: How-to's id is "rank-math-howto" (one word, no hyphen) — NOT
   "rank-math-how-to". This was a long-standing bug in earlier versions.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Outer wrappers ──────────────────────────────────────────────────── */
#rank-math-faq,
#rank-math-howto {
    margin-block: var(--sp-8);
}

/* ─── How-to intro paragraph ──────────────────────────────────────────── */
#rank-math-howto .rank-math-howto-description {
    margin: 0 0 18px;
    padding: 16px 20px;
    background: var(--cc-glass);
    border-inline-start: 3px solid var(--cc-green-2);
    border-radius: var(--r-sm);
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.65;
}
#rank-math-howto .rank-math-howto-description p {
    margin: 0 0 6px;
}
#rank-math-howto .rank-math-howto-description p:last-child {
    margin-bottom: 0;
}

/* ─── FAQ: list container (Q+A cards stack) ───────────────────────────── */
#rank-math-faq .rank-math-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ─── FAQ: each Q+A pair (card) ───────────────────────────────────────── */
#rank-math-faq .rank-math-list-item {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 22px 26px;
    background: linear-gradient(180deg, var(--bg-surface-1), var(--bg-base));
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--dur-base) var(--ease);
}
#rank-math-faq .rank-math-list-item:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
}

/* ─── FAQ: question heading ───────────────────────────────────────────── */
#rank-math-faq .rank-math-question {
    position: relative;
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.45;
    letter-spacing: -.01em;
    margin: 0;
    padding-inline-end: 40px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#rank-math-faq .rank-math-question:focus-visible {
    outline: 2px solid var(--cc-green-2);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ─── FAQ: + icon on the right (rotates to × when open) ───────────────── */
#rank-math-faq .rank-math-question::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background-image:
        linear-gradient(var(--cc-green-2), var(--cc-green-2)),
        linear-gradient(var(--cc-green-2), var(--cc-green-2));
    background-size: 16px 2px, 2px 16px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform var(--dur-base) var(--ease);
}
#rank-math-faq .rank-math-list-item:not(.is-closed) .rank-math-question::after {
    transform: rotate(45deg);  /* + → × */
}

/* ─── FAQ: answer text styling (animation handled below via grid-rows) ── */
#rank-math-faq .rank-math-answer {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.65;
}
#rank-math-faq .rank-math-answer p {
    margin: 0 0 8px;
}
#rank-math-faq .rank-math-answer p:last-child {
    margin-bottom: 0;
}
#rank-math-faq .rank-math-answer img {
    max-width: 100%;
    height: auto;
    margin-block: 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
}
#rank-math-faq .rank-math-answer a {
    color: var(--cc-green-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── How-to: 2-column grid of image-aware step cards ─────────────────
   Design A · Outlined Big Number Cards (Image-Aware)
   - Each step is a card with:
     · Image (when present) on top at 16/9, with a "Step N" glass pill
       badge at top-left (small green-gradient circle + STEP N text).
     · Body below (or alone if no image) with title + text.
     · Outlined giant number (96px) at the bottom-right, border-only
       stroke in brand color, transparent fill. 78px when image present
       (smaller to balance the visual weight), 96px when image absent
       (fills the card).
   - Detection: :has(img) selects step cards with an embedded image.
   - 2-column grid on desktop, 1-column on mobile.
   ────────────────────────────────────────────────────────────────────── */
#rank-math-howto .rank-math-steps {
    counter-reset: howto-step;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each step card */
#rank-math-howto .rank-math-step {
    counter-increment: howto-step;
    position: relative;
    background: linear-gradient(160deg, var(--bg-surface-1), color-mix(in srgb, var(--bg-base) 90%, transparent));
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    transition: border-color .25s var(--ease);
    list-style: none;
    margin: 0;
    padding: 0;
}
#rank-math-howto .rank-math-step:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

/* Image — when present, RankMath emits <img> inside step-content.
   When .has-image class is present (added by JS), the <img> has been
   moved out of step-content to be the FIRST direct child of the step.
   This lets the visual order be image → title → body without any
   display:contents or order hacks. */
#rank-math-howto .rank-math-step > img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0;
    border: none;
    border-radius: 0;
    position: relative;
}

/* The "STEP N" label now lives above the title in the body for ALL steps
   (has-image and not), so it never overlaps the image. See the unified
   .rank-math-step-title::before rule below. The old image-overlay badge,
   its darkening mask and RTL override were removed. */

/* Title placement when image IS present: lives in body area below image */
#rank-math-howto .rank-math-step.has-image .rank-math-step-title {
    position: static;
    padding: 16px 18px 0;
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -.01em;
}
#rank-math-howto .rank-math-step.has-image .rank-math-step-content p {
    position: relative;
    z-index: 2;
    padding: 0 18px 18px;
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* When image is NOT present: padded body with a "STEP N" tag above title */
#rank-math-howto .rank-math-step:not(.has-image) {
    padding: 16px 18px 18px;
}
#rank-math-howto .rank-math-step:not(.has-image) .rank-math-step-title {
    position: relative;
    z-index: 2;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px;
    line-height: 1.3;
    letter-spacing: -.01em;
}
/* Add the "STEP N" tag above the title via ::before on the title element.
   Applies to ALL steps (has-image and not). The word comes from a CSS
   variable fed by casino_t('STEP','howto_step'), so every site can translate
   it in WPML String Translation (Domain: casino-theme); falls back to 'STEP'. */
#rank-math-howto .rank-math-step .rank-math-step-title::before {
    content: var(--howto-step-word, 'STEP') ' ' counter(howto-step);
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-green-2);
    margin-bottom: 6px;
    line-height: 1;
}
#rank-math-howto .rank-math-step:not(.has-image) .rank-math-step-content {
    position: relative;
    z-index: 2;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    padding-inline-end: 34px;
}
#rank-math-howto .rank-math-step:not(.has-image) .rank-math-step-content p {
    margin: 0 0 6px;
}
#rank-math-howto .rank-math-step:not(.has-image) .rank-math-step-content p:last-child {
    margin-bottom: 0;
}

/* Outlined giant number — bottom-right corner, every card.
   Positioned INSIDE the card (small positive offsets) so the card's
   overflow:hidden no longer clips it; sits behind content (z-index:0)
   as a faint outlined watermark, matching the Design-A mockup. */
#rank-math-howto .rank-math-step::before {
    content: counter(howto-step);
    position: absolute;
    inset-inline-end: -2px;
    bottom: -13px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 84px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--brand-primary) 50%, transparent);
    color: transparent;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
/* Smaller giant number when image present (image shortens the body area) */
#rank-math-howto .rank-math-step.has-image::before {
    font-size: 62px;
    bottom: -13px;
}
/* (RTL flip is handled by the base inset-inline-end above; no override needed.) */

/* Generic links inside step content */
#rank-math-howto .rank-math-step-content a {
    color: var(--cc-green-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── How-to image lightbox (v9.29.0) ─────────────────────────────────
   Progressive enhancement only, built in JS, appended to <body>, so the
   RankMath How-to markup/schema is untouched. Mirrors the .popup-overlay
   modal dialect (blurred dark backdrop, scale-in, X close top-right).
   z-index 9500: above the comparison popup (9000), below the skip-link (10000). */
#rank-math-howto .rmht-zoomable { cursor: zoom-in; }
.rmht-lb {
    position: fixed; inset: 0; z-index: 9500;
    display: grid; place-items: center; padding: 24px;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
[data-theme="light"] .rmht-lb { background: rgba(15,23,42,.55); }
.rmht-lb.is-open { opacity: 1; visibility: visible; }
.rmht-lb-img {
    max-width: min(96vw, 1100px); max-height: 88vh; width: auto; height: auto;
    display: block; border-radius: var(--r-lg);
    box-shadow: 0 34px 90px rgba(0,0,0,.6);
    transform: scale(.96);
    transition: transform .25s cubic-bezier(.22,.78,.28,1);
}
.rmht-lb.is-open .rmht-lb-img { transform: scale(1); }
.rmht-lb-close {
    position: fixed; top: 18px; inset-inline-end: 18px;
    width: 40px; height: 40px; border-radius: var(--r-full);
    display: grid; place-items: center; cursor: pointer;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    color: #fff; transition: background .2s var(--ease);
}
.rmht-lb-close:hover { background: rgba(255,255,255,.2); }
.rmht-lb-close svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
    .rmht-lb, .rmht-lb-img { transition: none; }
}


/* ─── FAQ animation — SMOOTH grid-template-rows trick ─────────────────
   Better than max-height because:
   - Animates the actual content height (not a fake big max)
   - No "dead time" overshoot — closes/opens in real time
   - GPU-friendly, no JS height measurement needed
   The JS wraps existing answer children in .rank-math-answer-inner so
   the grid can use overflow:hidden on a child while animating the parent.
   ────────────────────────────────────────────────────────────────────── */
#rank-math-faq .rank-math-answer {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    /* Grid container is a ZERO box (margin/padding/border all 0) so nothing
       survives the 0fr collapse. NOTE: a broad [class*="answer"] fallback adds
       margin-top/padding/border to anything with "answer" in the class — the
       margin:0 here is what kills the residual gap when closed. All visible
       spacing + the Q/A divider live on .rank-math-answer-inner, which is
       clipped to 0 together with the grid row. */
    margin: 0;
    padding: 0;
    border: 0;
    transition:
        grid-template-rows .35s cubic-bezier(.4, 0, .2, 1),
        opacity .35s cubic-bezier(.4, 0, .2, 1);
}
#rank-math-faq .rank-math-answer-inner {
    /* Clipped element MUST be a zero box — any padding/border here becomes a
       border-box floor (~13px) that the 0fr track can't collapse. So spacing +
       the Q/A divider live on the first child INSIDE this clip instead. */
    overflow: hidden;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
#rank-math-faq .rank-math-answer-inner > :first-child {
    margin-block-start: 0;
    padding-block-start: 12px;                   /* gap below the divider */
    border-block-start: 1px solid var(--border); /* Q/A divider, clipped when closed */
}
#rank-math-faq .rank-math-list-item.is-closed .rank-math-answer {
    grid-template-rows: 0fr;
    opacity: 0;
}


/* ─── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    #rank-math-howto .rank-math-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 720px) {
    #rank-math-howto .rank-math-steps {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 540px) {
    #rank-math-faq .rank-math-list-item {
        padding: 18px 20px;
    }
    #rank-math-faq .rank-math-question {
        font-size: 15px;
        padding-inline-end: 32px;
    }
    #rank-math-faq .rank-math-answer { font-size: 14px; }
    #rank-math-howto .rank-math-step-title { font-size: 15.5px; }
    #rank-math-howto .rank-math-step::before {
        font-size: 80px;
    }
    #rank-math-howto .rank-math-step.has-image::before {
        font-size: 64px;
    }
    #rank-math-howto .rank-math-howto-description {
        font-size: 14px;
        padding: 14px 16px;
    }
}





/* ════════════════════════════════════════════════════════════════════
   v9.5.7 — Universal content layout + alignwide/alignfull
   Works across ALL templates: page.php (.entry-content), single-post.php
   (.post-content), single-casino, single-game (both .entry-content).
   Content flows full width inside its container; alignwide goes to
   container width; alignfull breaks out to full width.
   ════════════════════════════════════════════════════════════════════ */
.single-page { padding: 30px 0 40px; }
.single-page-head {
    margin: 0 0 32px;
}
.single-page-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}
/* Gradient word highlight on page titles (set via "Page Title Display" meta box) */
.single-page-title .page-title-g {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-theme="light"] .single-page-title .page-title-g {
    background: linear-gradient(135deg, var(--cc-green-2), var(--brand-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Content width — SINGLE SOURCE OF GUTTER = the wrapper.
   The horizontal gutter is provided once by the content wrapper: the .container
   (pages, reviews, blog) or the padded cards (.post-content, the review card)
   or the .homepage padding on the front page. The rules below only CAP width
   and centre — they add NO gutter of their own, so content never double-/triple-
   pads inside a padded card, and wide blocks stay aligned with the header. */
.entry-content > *,
.post-content > * {
    box-sizing: border-box;
}
/* alignwide caps at the header's content width (container minus its gutters) so
   wide blocks line up with the menu; fills any narrower wrapper via 100%. */
.entry-content > .alignwide,
.post-content > .alignwide,
.entry-content > [class*="wp-block-"].alignwide,
.post-content > [class*="wp-block-"].alignwide {
    max-width: min(calc(var(--container) - 2 * var(--gutter)), 100%);
}
/* alignfull fills the wrapper's content box (the front page breaks it back out
   to the page edge — see ".homepage > .alignfull" in homepage-minimal.css). */
.entry-content > .alignfull,
.post-content > .alignfull,
.entry-content > [class*="wp-block-"].alignfull,
.post-content > [class*="wp-block-"].alignfull {
    max-width: 100%;
    width: 100%;
}

/* Homepage only: plain content blocks carry no alignment class — set them
   to the wide container width AND centre them so they line up with the casino
   patterns (which centre their own .hp-wrap). Without margin-inline:auto the
   capped content stayed flush-left. alignfull children are unaffected — their
   negative-margin breakout rule is more specific. */
.homepage > * {
    max-width: min(calc(var(--container) - 2 * var(--gutter)), 100%);
    margin-inline: auto;
}

/* Generic alignwide / alignfull fallback for any other front-end context */
.alignwide { max-width: min(calc(var(--container) - 2 * var(--gutter)), 100%); margin-inline: auto; }
.alignfull { max-width: 100%; }


/* Reset button block wrapper when casino-bonus-cta class is also on the .wp-block-button div */
.wp-block-button.casino-bonus-cta {
    all: unset;
    display: inline-block;
}
.casino-bonus-grid .wp-block-buttons,
.casino-bonus-hero-inner .wp-block-buttons {
    justify-content: center;
}
.casino-bonus-grid .wp-block-button {
    width: 100%;
}
.casino-bonus-grid .wp-block-button .wp-block-button__link {
    width: 100%;
    justify-content: center;
}

/* ─── v9.5.7 cleanup: native Gutenberg layouts handle .casino-bonus-grid,
   .casino-3col, .casino-cl, .casino-tips, .casino-alert containers via
   their layout JSON ("type":"grid"|"flex"|"columns"). We only keep
   margin-resets so child .wp-block-heading / <p> respect parent gap. */

/* Strip default WP heading/paragraph margin inside pattern bodies that
   rely on flex/grid gap for spacing */
.casino-cl-body > .wp-block-heading,
.casino-tips-body > .wp-block-heading,
.casino-alert-body > .wp-block-heading,
.casino-cl-body > p,
.casino-tips-body > p,
.casino-alert-body > p {
    margin: 0;
}
.casino-3col-card > .wp-block-heading,
.casino-3col-card > p {
    margin: 0;
}

/* Bonus card body should also collapse its native margins */
.casino-bonus-card .casino-bonus-body > * {
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════
   v9.5.7 — RankMath broader-match fallbacks
   RankMath outputs FAQ/Howto blocks with several different class
   patterns depending on plugin version (free/pro) and block variant.
   These fallbacks use [class*="..."] attribute matching so they catch
   every variant without locking us to one exact markup.
   ════════════════════════════════════════════════════════════════════ */

/* FAQ — universal wrapper match */
[class*="rank-math-faq"],
[class*="rm-faq"] {
    margin-block: var(--sp-8);
    display: block;
}
[class*="rank-math-faq"] [class*="list-item"],
[class*="rank-math-faq"] details,
details[class*="rank-math"],
[class*="rm-faq"] details {
    background: linear-gradient(180deg, var(--bg-surface-1), var(--bg-base));
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 22px;
    margin-block-end: 10px;
    transition: border-color var(--dur-base) var(--ease);
}
[class*="rank-math-faq"] [class*="list-item"]:hover,
[class*="rank-math-faq"] details:hover,
details[class*="rank-math"]:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
}

/* FAQ questions — broad match for any element with "question" in class */
[class*="rank-math"] [class*="question"],
[class*="rank-math"] summary,
[class*="rm-faq"] summary {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding-inline-end: 36px;
    position: relative;
    display: block;
}
[class*="rank-math"] [class*="question"]::-webkit-details-marker,
[class*="rank-math"] summary::-webkit-details-marker,
[class*="rm-faq"] summary::-webkit-details-marker {
    display: none;
}
[class*="rank-math"] [class*="question"]::after,
[class*="rank-math"] summary::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    width: 14px; height: 14px;
    transform: translateY(-50%);
    transition: transform var(--dur-base) var(--ease);
    background-image:
        linear-gradient(var(--cc-green-2), var(--cc-green-2)),
        linear-gradient(var(--cc-green-2), var(--cc-green-2));
    background-size: 14px 2px, 2px 14px;
    background-position: center;
    background-repeat: no-repeat;
}
details[class*="rank-math"][open] summary::after,
details[class*="rank-math"][open] [class*="question"]::after,
[class*="rank-math"] details[open] summary::after,
[class*="rank-math"] details[open] [class*="question"]::after {
    transform: translateY(-50%) rotate(135deg);
}

/* FAQ answers — broad match */
[class*="rank-math"] [class*="answer"] {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.65;
    margin-top: 12px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--border-subtle);
}
[class*="rank-math"] [class*="answer"] p:last-child {
    margin-bottom: 0;
}

/* ─── Howto — broad match ─────────────────────────────────────── */
[class*="rank-math-howto"],
[class*="rank-math-block-howto"],
[class*="rm-howto"] {
    margin-block: var(--sp-8);
    counter-reset: howto-step;
}
[class*="rank-math-howto"] [class*="rank-math-title"],
[class*="rank-math-howto"] > h2,
[class*="rank-math-howto"] > h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin-block-end: 6px;
    letter-spacing: -0.02em;
}
[class*="rank-math-howto"] [class*="rank-math-description"],
[class*="rank-math-howto"] > p:first-of-type {
    color: var(--text-muted);
    margin-block-end: 18px;
}
[class*="rank-math-howto"] ol,
[class*="rank-math-howto"] [class*="rank-math-steps"],
[class*="rank-math-howto"] [class*="rank-math-list"] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}
[class*="rank-math-howto"] ol > li,
[class*="rank-math-howto"] [class*="rank-math-steps"] > li,
[class*="rank-math-howto"] [class*="rank-math-list"] > li,
[class*="rank-math-howto"] [class*="step-content"] {
    counter-increment: howto-step;
    position: relative;
    padding: 22px 22px 22px 80px;
    background: linear-gradient(180deg, var(--bg-surface-1), var(--bg-base));
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--cc-green-2);
    border-radius: var(--r-md);
    list-style: none;
    margin: 0;
    transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
[dir="rtl"] [class*="rank-math-howto"] ol > li,
[dir="rtl"] [class*="rank-math-howto"] [class*="rank-math-steps"] > li,
[dir="rtl"] [class*="rank-math-howto"] [class*="rank-math-list"] > li {
    padding: 22px 80px 22px 22px;
    border-inline-start: 0;
    border-inline-end: 3px solid var(--cc-green-2);
}
[class*="rank-math-howto"] ol > li::before,
[class*="rank-math-howto"] [class*="rank-math-steps"] > li::before,
[class*="rank-math-howto"] [class*="rank-math-list"] > li::before {
    content: counter(howto-step, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 22px;
    top: 22px;
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    background: linear-gradient(135deg, var(--cc-green-2), var(--cc-gold));
    -webkit-background-clip: text;
    background-clip: text;
}
[class*="rank-math-howto"] ol > li:hover,
[class*="rank-math-howto"] [class*="rank-math-steps"] > li:hover,
[class*="rank-math-howto"] [class*="rank-math-list"] > li:hover {
    transform: translateX(2px);
    border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
}
[class*="rank-math-howto"] [class*="step-title"],
[class*="rank-math-howto"] > li > strong:first-child,
[class*="rank-math-howto"] [class*="rank-math-steps"] > li > strong:first-child {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-block-end: 6px;
}
[class*="rank-math-howto"] [class*="step-description"],
[class*="rank-math-howto"] [class*="step-content"] {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.65;
}
[class*="rank-math-howto"] [class*="step-image"] img {
    max-width: 240px;
    border-radius: var(--r-sm);
    margin-block-start: 10px;
}


/* ══════════════════════════════════════════════════════════════════════
   v9.5.7 — Block Style Variations (Yol C)
   These styles are activated when a block has class "is-style-casino-*"
   added by the editor sidebar's Styles panel. Patterns markup applies
   these classes automatically; users can also apply them to their own
   blocks via the sidebar.

   Naming: matches what's registered in includes/block-styles.php
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Paragraph variations ─────────────────────────────────────────── */

/* Eyebrow: small caps green label with a leading horizontal line */
.is-style-casino-eyebrow {
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-muted); /* grey text, accent lives in the line */
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}
.is-style-casino-eyebrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--cc-green-2);
    flex-shrink: 0;
}
[data-theme="light"] .is-style-casino-eyebrow::before { background: var(--cc-green-2); }

/* Lead: bigger intro paragraph */
.is-style-casino-lead {
    font-size: 16.5px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 22px;
    max-width: 60ch;
}

/* Stat label: BYTE-FOR-BYTE MATCH to original .hp-stat span
   (no uppercase, no letter-spacing, no nowrap — just plain text).
   The label renders as written: "Casinos Reviewed" in mixed case.
   With 12px / weight 600 / no spacing it fits easily inside a 148px
   card with 26px horizontal padding (~96px inner width). */
.is-style-casino-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--hp-text-3, rgba(255,255,255,.55));
    margin: 0;
}

/* ─── Heading variations ───────────────────────────────────────────── */

/* Display: hero H1 — matches original .hp-hero h1 exactly.
   - Inter (--hp-body), weight 700, NOT Playfair
   - <em> inside is NORMAL style (not italic) — only the gradient color
     changes via background-clip, with an animated 5s gradient shine */
h1.is-style-casino-display,
h2.is-style-casino-display,
h3.is-style-casino-display {
    font-family: var(--hp-body), 'Inter', system-ui, sans-serif;
    font-size: clamp(34px, 5.6vw, 58px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.14;
    margin: 18px auto;
    max-width: 780px;
    color: var(--text-primary);
}
.is-style-casino-display em {
    font-style: normal;
    background: linear-gradient(120deg, var(--hp-green, var(--cc-green-2)), var(--hp-teal, var(--cc-teal)), var(--hp-green, var(--cc-green-2)));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hpShine 5s linear infinite;
}
@keyframes hpShine {
    to { background-position: 200% center; }
}

/* Section title: medium heading for section labels */
.is-style-casino-section {
    font-size: clamp(26px, 3.7vw, 38px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin: 14px 0 12px;
    color: var(--text-primary);
}

/* Stat number: BYTE-FOR-BYTE MATCH to original .hp-stat b
   font-family is --hp-display (Playfair Display, loaded by the theme).
   font-size 25px, display:block. Margin 0 (label gets its own spacing
   via natural flow + the label's heading margin baseline). */
.is-style-casino-stat-num {
    font-family: var(--hp-display);
    font-size: 25px;
    display: block;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.2;
}
/* Gold star em (matches .hp-stat b.g) */
.is-style-casino-stat-num .g,
.is-style-casino-stat-num em {
    color: var(--hp-gold);
    font-style: normal;
    background: none;
    -webkit-text-fill-color: var(--hp-gold);
}

/* ─── Button variations ────────────────────────────────────────────── */

/* Primary: green gradient with glow */
.wp-block-button.is-style-casino-primary > .wp-block-button__link {
    background: linear-gradient(135deg, var(--cc-green-2), var(--cc-teal));
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 26px;
    font-weight: 700;
    font-size: 14.5px;
    box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--cc-green-2) 60%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-button.is-style-casino-primary > .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--cc-green-2) 70%, transparent);
    color: #fff;
}

/* Outline: transparent with border */
.wp-block-button.is-style-casino-outline > .wp-block-button__link {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 13px 26px;
    font-weight: 700;
    font-size: 14.5px;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.wp-block-button.is-style-casino-outline > .wp-block-button__link:hover {
    border-color: var(--cc-green-2);
    color: var(--cc-green-2);
    background: color-mix(in srgb, var(--cc-green-2) 6%, transparent);
}

/* Gold CTA: gradient gold for premium CTAs */
.wp-block-button.is-style-casino-gold > .wp-block-button__link {
    background: linear-gradient(135deg, var(--cc-gold-2), var(--cc-gold));
    color: #231803;
    border: none;
    border-radius: 999px;
    padding: 14px 26px;
    font-weight: 800;
    font-size: 14.5px;
    box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--cc-gold) 60%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-button.is-style-casino-gold > .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--cc-gold) 70%, transparent);
    color: #231803;
}

/* ─── Group variations ─────────────────────────────────────────────── */

/* Generic card */
.wp-block-group.is-style-casino-card {
    padding: 22px 24px;
    background: linear-gradient(180deg, var(--bg-surface-1), var(--bg-base));
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.wp-block-group.is-style-casino-card:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
    transform: translateY(-2px);
}

/* Stat card: BYTE-FOR-BYTE MATCH to original .hp-stat
   padding 18px 26px, border-radius 16px, min-width 148px.
   Background + border come from the .hp-glass class when used inside
   the Hero pattern; when a user applies this variation to their own
   Group block elsewhere, the rule below adds a default glass look. */
.wp-block-group.is-style-casino-stat {
    padding: 18px 26px;
    border-radius: 16px;
    min-width: 148px;
    text-align: center;
    background: var(--hp-glass, rgba(255,255,255,.04));
    border: 1px solid var(--hp-line, rgba(255,255,255,.08));
    transition: border-color .2s ease;
}
.wp-block-group.is-style-casino-stat:hover {
    border-color: color-mix(in srgb, var(--hp-green, var(--cc-green-2)) 40%, transparent);
}
/* Match the original mobile breakpoint behaviour from homepage-minimal.css:
   "@media(max-width:760px) .hp-stat{min-width:calc(50% - 5px);padding:15px}" */
@media (max-width: 760px) {
    .wp-block-group.is-style-casino-stat {
        min-width: calc(50% - 5px);
        padding: 15px;
    }
}

/* Section wrapper (vertical padding only) */
.wp-block-group.is-style-casino-section {
    padding-block: clamp(48px, 6vw, 80px);
    position: relative;
}

/* Alert variations */
.wp-block-group.is-style-casino-alert-info,
.wp-block-group.is-style-casino-alert-tip,
.wp-block-group.is-style-casino-alert-warning {
    padding: 18px 22px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-surface-1), var(--bg-base));
}
.wp-block-group.is-style-casino-alert-info    { border-inline-start: 4px solid var(--cc-green-2); }
.wp-block-group.is-style-casino-alert-tip     { border-inline-start: 4px solid var(--cc-gold); }
.wp-block-group.is-style-casino-alert-warning { border-inline-start: 4px solid #f97316; }

/* ─── Hero pattern wrappers (specific layouts) ─────────────────────── */

.casino-hero {
    padding-block: clamp(48px, 6vw, 80px);
    position: relative;
    overflow: hidden;
}
.casino-hero-cta {
    margin: 28px 0 36px;
    display: flex !important;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Note: .casino-hero-stats container styling is handled by the original
   .hp-stats rule from homepage-minimal.css (flex + flex-wrap + center).
   This keeps the design pixel-identical to the original Hero. */


/* ═══════════════════════════════════════════════════════════════════════
   Bonus Highlight (Single) — casino/bonus-highlight block · Conic Neon Frame
   Self-contained DARK card in BOTH colour themes: the rotating conic border
   and the amount glow are a dark-surface effect (matches the approved
   mockup), so colours are hard-set here rather than pulled from theme tokens.
   All selectors are namespaced under .casino-bonus-highlight + .bh-* to avoid
   collisions. Reduced-motion freezes the animations.
   ═══════════════════════════════════════════════════════════════════════ */
.casino-bonus-highlight { width: 100%; max-width: 1000px; margin-inline: auto; }

.casino-bonus-highlight .bh-frame { position: relative; border-radius: 24px; overflow: hidden; background: #0a0d0c; padding: 1.6px; }
.casino-bonus-highlight .bh-frame::before { content: ''; position: absolute; inset: -60%; z-index: 0; background: conic-gradient(from 0deg, transparent 0deg, var(--cc-green-2) 60deg, var(--cc-teal) 120deg, transparent 200deg, transparent 360deg); animation: bh-spin 6s linear infinite; }
@keyframes bh-spin { to { transform: rotate(1turn); } }
/* Light: neutral track + vivid arc + lift shadow so the rotating line reads */
[data-theme="light"] .casino-bonus-highlight .bh-frame { background: #cdd6e2; padding: 2px; box-shadow: 0 14px 38px -18px rgba(15,23,42,.28); }
[data-theme="light"] .casino-bonus-highlight .bh-frame::before { background: conic-gradient(from 0deg, transparent 0deg, var(--brand-primary) 46deg, var(--cc-teal) 120deg, transparent 196deg, transparent 360deg); }

.casino-bonus-highlight .bh-inner {
    position: relative; z-index: 1; border-radius: 22px; overflow: hidden;
    background:
        radial-gradient(900px 620px at 8% -4%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 60%),
        radial-gradient(220px 200px at 96% 6%, color-mix(in srgb, var(--brand-accent) 6%, transparent), transparent 58%),
        linear-gradient(180deg, var(--bg-start, var(--bg-base)), var(--bg-end, var(--bg-base)));
    display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: stretch;
    padding: 40px 42px; color: var(--text-primary); line-height: 1.6; letter-spacing: -.005em;
}
/* Light: --bg-start/--bg-end are emitted by the settings inline CSS with dark
   values only (no light variant), so the inner must NOT use them in light —
   otherwise the card stays dark on a light page. */
[data-theme="light"] .casino-bonus-highlight .bh-inner {
    background:
        radial-gradient(900px 620px at 8% -4%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 60%),
        radial-gradient(220px 200px at 96% 6%, color-mix(in srgb, var(--brand-accent) 6%, transparent), transparent 58%),
        linear-gradient(180deg, var(--bg-surface-1), var(--bg-surface-2));
}
.casino-bonus-highlight .bh-num, .casino-bonus-highlight .bh-r { position: relative; z-index: 1; }
.casino-bonus-highlight .bh-num { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding-inline-end: 36px; border-inline-end: 1px solid var(--border); }
.casino-bonus-highlight .bh-num::before { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 24%, transparent), transparent 65%); filter: blur(8px); z-index: -1; pointer-events: none; }
.casino-bonus-highlight .bh-match { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.casino-bonus-highlight .bh-money { font-family: 'Sora', system-ui, sans-serif; font-weight: 800; font-size: 70px; line-height: .9; letter-spacing: -.03em; color: var(--text-primary); text-shadow: 0 0 26px color-mix(in srgb, var(--cc-green-2) 60%, transparent), 0 0 56px color-mix(in srgb, var(--cc-green-2) 30%, transparent); }
[data-theme="light"] .casino-bonus-highlight .bh-money { text-shadow: none; }

.casino-bonus-highlight .bh-r { display: flex; flex-direction: column; gap: 13px; min-height: 210px; align-items: center; text-align: center; }
.casino-bonus-highlight .bh-op { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.casino-bonus-highlight .bh-emblem { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cc-green-2) 42%, transparent); }
.casino-bonus-highlight .bh-emblem svg { width: 22px; height: 22px; stroke: var(--cc-green-2); }
.casino-bonus-highlight .bh-logo-wrap { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 13px; background: color-mix(in srgb, var(--text-primary) 6%, transparent); border: 1px solid var(--border); }
/* Light: operator logos are often white-on-transparent — keep the plate dark
   so they stay visible (a light-grey plate would swallow them). */
[data-theme="light"] .casino-bonus-highlight .bh-logo-wrap { background: rgba(15, 23, 42, .85); border-color: rgba(15, 23, 42, .55); }
.casino-bonus-highlight .bh-logo { display: block; height: 44px; width: auto; max-width: 200px; object-fit: contain; }
.casino-bonus-highlight .bh-rate { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 800; color: var(--text-primary); white-space: nowrap; }
.casino-bonus-highlight .bh-rate svg { width: 15px; height: 15px; color: var(--brand-accent); flex: none; }
.casino-bonus-highlight .bh-rate small { color: var(--text-muted); font-weight: 700; }
.casino-bonus-highlight .bh-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--cc-green-2); }
.casino-bonus-highlight .bh-pulse { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--cc-green-2); box-shadow: 0 0 0 0 color-mix(in srgb, var(--cc-green-2) 60%, transparent); animation: bh-dot 2s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes bh-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cc-green-2) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.casino-bonus-highlight .bh-spins { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.casino-bonus-highlight .bh-chips { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.casino-bonus-highlight .bh-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--text-primary) 5%, transparent); border: 1px solid var(--border); color: var(--text-secondary); }
.casino-bonus-highlight .bh-chip-em { color: var(--cc-green-2); border-color: color-mix(in srgb, var(--cc-green-2) 40%, transparent); background: color-mix(in srgb, var(--cc-green-2) 10%, transparent); }
.casino-bonus-highlight .bh-foot { margin-top: auto; width: 100%; }
.casino-bonus-highlight a.bh-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; overflow: hidden; isolation: isolate; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 15.5px; color: #04221a; cursor: pointer; border: none; border-radius: 13px; padding: 15px 30px; text-decoration: none; min-height: 50px; background: linear-gradient(135deg, var(--cc-green-2), var(--cc-teal)); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--brand-primary) 45%, transparent); transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1); }
[data-theme="light"] .casino-bonus-highlight a.bh-cta { background: linear-gradient(135deg, var(--brand-primary), var(--cc-teal)); color: #04221a; }
.casino-bonus-highlight a.bh-cta:focus-visible { outline: 3px solid color-mix(in srgb, var(--cc-green-2) 60%, transparent); outline-offset: 3px; }
.casino-bonus-highlight a.bh-cta::after { content: ''; position: absolute; top: 0; left: -60%; width: 38%; height: 100%; pointer-events: none; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); animation: bh-sweep 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes bh-sweep { 0% { left: -60%; } 45% { left: 130%; } 100% { left: 130%; } }
.casino-bonus-highlight a.bh-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--brand-primary) 60%, transparent); }
.casino-bonus-highlight a.bh-cta:active { transform: translateY(0); }

@media (max-width: 720px) {
    .casino-bonus-highlight .bh-inner { grid-template-columns: 1fr; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 32px 22px 28px; }
    .casino-bonus-highlight .bh-num { border-inline-end: none; border-block-end: 1px solid var(--border); padding-inline-end: 0; padding-block-end: 20px; width: 100%; }
    .casino-bonus-highlight .bh-r { min-height: 0; width: 100%; }
    .casino-bonus-highlight .bh-money { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
    .casino-bonus-highlight .bh-frame::before,
    .casino-bonus-highlight .bh-pulse,
    .casino-bonus-highlight .bh-cta::after { animation: none !important; }
    .casino-bonus-highlight a.bh-cta { transition: none !important; }
}

/* ============================================================================
   Casino · Bonus Cards — Spotlight Orb (casino/bonus-orb) +
                           Diagonal Band  (casino/bonus-diagonal)
   Two independent blocks that share one horizontal swipe rail (.cbg-rail).
   No arrows. Desktop 4 cards + peek of the 5th, tablet 2 + peek, mobile 1 + peek.
   Mouse drag-to-scroll is added by initDragRails() (.cbg-rail) in core.js;
   touch uses native scrolling. Per-item accent is injected as --acc (sanitised
   hex) on the card. Theme-aware (uses the same tokens as the rest of minimal).
   ============================================================================ */
.cbg-wrap { margin-block: 8px; }
.cbg-head {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--text-primary);
}

/* Shared rail: single source for sizing + peek via custom properties. */
.cbg-rail {
  --cbg-cols: 4;
  --cbg-gap: 22px;
  --cbg-peek: 50px;
  display: flex;
  gap: var(--cbg-gap);
  overflow-x: auto;
  padding: 10px 2px 22px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cbg-rail::-webkit-scrollbar { display: none; }
.cbg-rail > * {
  flex: 0 0 calc((100% - (var(--cbg-cols) - 1) * var(--cbg-gap) - var(--cbg-peek)) / var(--cbg-cols));
  scroll-snap-align: start;
}
@media (max-width: 1000px) {
  .cbg-rail { --cbg-cols: 2; --cbg-peek: 56px; }
}
@media (max-width: 720px) {
  .cbg-rail { --cbg-cols: 1; --cbg-peek: 54px; }
}

/* ---- Spotlight Orb card ---- */
.bo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 352px;
  padding: 26px 18px 20px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--border));
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 60%),
    var(--bg-surface-1);
  transition: transform .25s, box-shadow .25s;
}
.bo-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px color-mix(in srgb, var(--acc) 28%, rgba(0,0,0,.4)); }
.bo-orb {
  width: 74px; height: 74px;
  display: grid; place-items: center;
  font-size: 34px;
  border-radius: 50%;
  margin-bottom: 14px;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--acc) 80%, #fff 10%), color-mix(in srgb, var(--acc) 55%, #000 20%));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 14%, transparent),
              0 12px 28px color-mix(in srgb, var(--acc) 40%, transparent);
}
/* Image variant: neutral round tile (keeps the accent glow ring); the logo fits
   inside the fixed circle so the card size never changes. v9.28.10 */
.bo-orb--img { background: var(--bg-surface-2); overflow: hidden; }
.bo-orb--img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; display: block; border-radius: inherit; }
.bo-type {
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 8px;
}
.bo-amount {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 800; font-size: 30px; letter-spacing: -.03em; line-height: 1.04;
  margin-bottom: 8px;
  background: linear-gradient(180deg, var(--text-primary), color-mix(in srgb, var(--acc) 70%, var(--text-primary)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bo-desc { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); margin-bottom: auto; padding: 0 4px; }
.casino-bonus-orb a.bo-cta {
  margin-top: 16px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 999px; border: none;
  font: 700 14px/1 'Inter', sans-serif; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #000 12%));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--acc) 38%, transparent);
  transition: transform .2s, filter .2s;
}
.casino-bonus-orb a.bo-cta:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; text-decoration: none; }
.bo-tc { font-size: 10.5px; color: var(--text-muted); margin-top: 9px; }

/* ---- Diagonal Band card ---- */
.bd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-surface-1);
  transition: transform .25s, box-shadow .25s;
}
.bd-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.bd-band {
  position: relative;
  height: 86px;
  padding: 15px 16px;
  background: linear-gradient(118deg, color-mix(in srgb, var(--acc) 92%, #000 4%), color-mix(in srgb, var(--acc) 52%, #000 16%));
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
}
.bd-type { font: 800 11px/1.2 'Inter', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #fff; }
.bd-ic {
  position: absolute; inset-inline-end: 16px; top: 18px; z-index: 2;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-size: 26px;
  border-radius: 14px;
  background: var(--bg-surface-1);
  border: 1px solid color-mix(in srgb, var(--acc) 42%, transparent);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
/* Image variant: the logo fits inside the fixed tile so the card never grows. v9.28.10 */
.bd-ic--img { padding: 5px; }
.bd-ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 9px; }
.bd-body { padding: 24px 16px 0; flex: 1; }
.bd-amount { font-family: 'Sora', system-ui, sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 8px; color: var(--text-primary); }
.bd-amount em { font-style: normal; color: var(--acc); }
.bd-desc { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.bd-tc { font-size: 10.5px; color: var(--text-muted); margin-top: 10px; }
.casino-bonus-diagonal a.bd-cta {
  margin: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 11px; border: none;
  font: 700 14px/1 'Inter', sans-serif; color: #0b0d12; text-decoration: none;
  background: var(--acc);
  transition: filter .2s, transform .2s;
}
[data-theme="light"] .casino-bonus-diagonal a.bd-cta { color: #fff; }
.casino-bonus-diagonal a.bd-cta:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .bo-card, .bo-cta, .bd-card, .bd-cta { transition: none !important; }
  .bo-card:hover, .bo-cta:hover, .bd-card:hover, .bd-cta:hover { transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   HEADER SEARCH — Editorial bottom-sheet (minimal)
   Trigger button in .header-actions; panel slides up from bottom to ~56vh.
   Close concept "B": top toolbar (label left, X right) + scrim + Esc.
   ═══════════════════════════════════════════════════════════════════════ */

/* trigger button — matches theme-toggle look, visible on all viewports */
.header-search-btn {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-surface-1);
    color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--dur-fast);
}
.header-search-btn:hover {
    background: var(--bg-surface-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* overlay root */
.cs-root {
    position: fixed; inset: 0;
    z-index: 1000;
    pointer-events: none;
}
.cs-root.is-open { pointer-events: auto; }

.cs-scrim {
    position: absolute; inset: 0;
    background: rgba(7, 10, 18, .62);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}
[data-theme="light"] .cs-scrim { background: rgba(15, 23, 42, .42); }
.cs-root.is-open .cs-scrim { opacity: 1; }

/* the sheet */
.cs-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 56vh;
    background: var(--bg-base);
    border-top: 2px solid var(--border-strong);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -28px 60px rgba(0, 0, 0, .5);
    transform: translateY(100%);
    transition: transform .44s cubic-bezier(.22, 1, .36, 1);
    display: flex; flex-direction: column;
}
[data-theme="light"] .cs-sheet { box-shadow: 0 -24px 54px rgba(15, 23, 42, .22); }
.cs-root.is-open .cs-sheet { transform: none; }

/* top toolbar (concept B) */
.cs-bar {
    flex: none;
    display: flex; align-items: center; justify-content: space-between;
    height: 46px; padding: 0 16px 0 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.cs-bar-label {
    font-family: 'Space Grotesk', var(--font);
    font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-dim);
}
.cs-close {
    width: 32px; height: 32px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    display: grid; place-items: center; cursor: pointer;
    transition: all var(--dur-fast);
}
.cs-close:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.cs-close svg { width: 16px; height: 16px; }

/* body */
.cs-body {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    width: 100%; max-width: 760px; margin: 0 auto;
    padding: 24px 28px 22px;
}
.cs-fieldwrap {
    flex: none; position: relative;
    border-bottom: 2px solid var(--border-strong);
    padding-bottom: 11px;
}
.cs-fieldwrap::after {
    content: ""; position: absolute; inset-inline-start: 0; bottom: -2px;
    height: 2px; width: 0; background: var(--brand-accent);
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.cs-root.is-open .cs-fieldwrap::after { width: 100%; }
.cs-input {
    width: 100%; background: transparent; border: 0; outline: 0;
    color: var(--text-primary);
    font-family: 'Space Grotesk', var(--font); font-weight: 600;
    font-size: clamp(22px, 3.4vw, 32px); letter-spacing: -.02em;
}
.cs-input::placeholder { color: var(--text-dim); }
.cs-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.cs-scroll { flex: 1; min-height: 0; overflow-y: auto; margin-top: 16px; }
.cs-trend {
    display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
}
.cs-featured { margin-top: 16px; }
.cs-eyebrow {
    font-family: 'Space Grotesk', var(--font);
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-dim);
}
.cs-chip {
    font-size: 12.5px; font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 6px 12px; cursor: pointer;
    transition: all var(--dur-fast);
}
.cs-chip:hover { border-color: var(--brand-primary); color: var(--text-primary); }

/* results live in .cs-scroll (which handles overflow); hidden until typing */
.cs-results { margin-top: 16px; }
.cs-default + .cs-results:empty { display: none; }
.cs-state { color: var(--text-muted); font-size: 14px; padding: 14px 2px; }
.cs-group { margin-bottom: 6px; }
.cs-group-label {
    display: block; margin: 8px 2px 4px;
    font-family: 'Space Grotesk', var(--font);
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-dim);
}
.cs-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: var(--r-lg);
    text-decoration: none; color: inherit;
    transition: background var(--dur-fast);
}
.cs-row:hover { background: var(--bg-surface-2); }
.cs-logo {
    width: 130px; height: 65px; flex: none;
    border-radius: 9px; overflow: hidden;
    display: grid; place-items: center;
    color: #fff; font-family: 'Space Grotesk', var(--font);
    font-weight: 700; font-size: 20px; letter-spacing: .01em;
}
.cs-logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 10px; }
@media (max-width: 600px) {
    .cs-logo { width: 90px; height: 50px; }
}
.cs-thumb { background: var(--bg-surface-3); }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.cs-ic {
    width: 40px; height: 40px; flex: none;
    border-radius: 9px; background: var(--bg-surface-3);
    color: var(--text-muted);
    display: grid; place-items: center;
}
.cs-ic svg { width: 18px; height: 18px; }
.cs-meta { min-width: 0; flex: 1; }
.cs-nm {
    display: block; font-size: 14px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-sub { display: block; font-size: 12px; color: var(--text-muted); }
.cs-rt {
    flex: none; font-family: 'Sora', var(--font);
    font-weight: 700; font-size: 13px; color: var(--cc-green-2);
}

@media (prefers-reduced-motion: reduce) {
    .cs-scrim, .cs-sheet, .cs-fieldwrap::after { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE HEADER AUTO-HIDE (≤900px)
   JS toggles .hdr-hidden on <html> (scroll down → hide, up → reveal). The
   sticky header slides up; the sticky TOC bar drops its header-height offset
   to 0 so it fills the gap. Desktop is unaffected (class never set there).
   ═══════════════════════════════════════════════════════════════════════ */
.site-header { transition: background var(--dur-base) var(--ease), transform .32s var(--ease); will-change: transform; }
.casino-toc-bar { transition: top .32s var(--ease); }
@media (max-width: 900px) {
    html.hdr-hidden .site-header { transform: translateY(-100%); }
    html.hdr-hidden .casino-toc-bar { top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BONUS SECTION — hub + single type pages. v9.18.7
   B-style tiled cards (2-col desktop, slider mobile).
   Shared .bn-shell / .bn-side used by both single-bonus.php and page.php
   (pages with _page_bonus_menu meta). has-bonus-menu body class enables
   the layout on any page.
   ═══════════════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.bn-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); margin: 18px 0 16px; }
.bn-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.bn-breadcrumb a:hover { color: var(--brand-primary); text-decoration: none; }
.bn-breadcrumb .bn-sep { color: var(--text-muted); }
.bn-crumb-current { color: var(--text-primary); }

/* Shell: left sidebar + main (page.php + single-bonus.php + hub block) */
.bn-shell { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; padding-bottom: 48px; }
.bn-main { min-width: 0; width: 100%; }

/* Sidebar nav — V1 Solid Panel style */
.bn-side {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: calc(var(--header-height-actual, var(--header-height)) + var(--toc-height-actual, 0px) + 20px);
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 12px;
}
.bn-side-heading {
    font-family: 'Space Grotesk', var(--font);
    font-size: 13px; font-weight: 700;
    color: var(--text-primary);
    padding: 0 8px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.bn-side-heading svg { width: 15px; height: 15px; color: var(--brand-primary); flex-shrink: 0; }
.bn-side a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 10px;
    color: var(--text-secondary); font-size: 14px; font-weight: 500;
    text-decoration: none; position: relative;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.bn-side a:hover,
.bn-side a:focus { background: var(--bg-surface-2); color: var(--text-primary); text-decoration: none; }
.bn-side a.is-active {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--brand-primary); font-weight: 600;
}
.bn-side a.is-active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 0 3px 3px 0;
    background: var(--brand-primary);
}
[dir="rtl"] .bn-side a.is-active::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
.bn-emo { font-size: 17px; width: 24px; text-align: center; flex-shrink: 0; line-height: 1; }
.bn-side-label { min-width: 0; }

/* ── Single bonus: M1 hero (green gradient surface + inset card) v9.19.0 ── */
.bn-hero {
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: center;
    gap: 28px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 16%, var(--bg-surface-1)), var(--bg-surface-1) 72%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 28px;
}
.bn-hero.is-solo {
    grid-template-columns: 1fr;
}
/* divider removed in M1; kept as no-op guard if markup still emits it */
.bn-hero-divider { display: none; }
.bn-hero-tx {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.bn-hero-feat {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Eyebrow badge */
.bn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, var(--border));
    border-radius: 999px;
    padding: 4px 12px 4px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-primary);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 16px;
    width: fit-content;
}
[data-theme="light"] .bn-eyebrow { color: var(--cc-green-2); border-color: color-mix(in srgb, var(--cc-green-2) 30%, var(--border)); background: color-mix(in srgb, var(--cc-green-2) 10%, transparent); }
.bn-eyebrow svg { width: 13px; height: 13px; flex-shrink: 0; display: block; }
.bn-title { font-family: 'Space Grotesk', var(--font); font-weight: 800; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.bn-title .g { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
[data-theme="light"] .bn-title .g { background: linear-gradient(135deg, var(--cc-green-2), var(--brand-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bn-intro { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 10px 0 18px; }
.bn-quick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.bn-quick li { position: relative; padding-inline-start: 22px; color: var(--text-secondary); font-size: 13px; }
.bn-quick li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; color: var(--brand-primary); font-weight: 700; }

/* Bonus hero statboxes (v9.19.0) — Wagering / Free Spins / Min / Max */
.bn-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 4px; }
.bn-statbox { background: color-mix(in srgb, var(--bg-base) 60%, transparent); border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; }
.bn-stat-k { display: flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.bn-stat-v { font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 16px; color: var(--text-primary); }
.bn-stat-v.green { color: var(--cc-green-2); }

/* ── Single bonus/payment: offer cards ──
   Featured card uses the M1 "inset" language (v9.19.0): recessed into the
   green hero surface, green accent, no gold glow. Shared by payment + bonus
   (+ sport) single heroes via casino_bonus_offer_card($id, true). */
.bn-offer-feat {
    background: var(--bg-base);
    border: 0;
    border-left: 3px solid var(--brand-primary);
    border-radius: 12px;
    padding: 18px 18px 18px 20px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.02);
}
.bn-of-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bn-of-pick { color: var(--cc-green-2); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.bn-of-pick::before { content: "#1"; background: var(--brand-primary); color: #04140d; font-weight: 800; padding: 1px 7px; border-radius: 5px; font-size: 11px; margin-inline-end: 6px; }
[data-theme="light"] .bn-of-pick { color: var(--cc-green-2); }
[data-theme="light"] .bn-of-pick::before { color: #fff; }
.bn-of-rating { color: var(--cc-green-2); font-size: 13px; font-weight: 700; flex-shrink: 0; }
[data-theme="light"] .bn-of-rating { color: var(--cc-green-2); }
.bn-of-id { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.bn-of-logo { width: 76px; height: 76px; border-radius: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bn-of-logo.sm { width: 60px; height: 60px; border-radius: 13px; }
.bn-of-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.bn-of-ini { color: #fff; font-weight: 800; font-size: 15px; }
.bn-of-logo.sm .bn-of-ini { font-size: 13px; }
.bn-of-idtx { min-width: 0; }
.bn-of-name { display: block; font-weight: 700; font-size: 16px; color: var(--text-primary); text-decoration: none; }
.bn-of-name:hover,
.bn-of-name:focus { color: var(--brand-primary); text-decoration: none; }
.bn-of-sub { color: var(--text-secondary); font-size: 12px; margin-top: 1px; }
.bn-of-bonus { font-family: 'Space Grotesk', var(--font); font-weight: 800; font-size: clamp(18px, 2.4vw, 22px); color: var(--cc-green-2); line-height: 1.15; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bn-of-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 10px; font-family: var(--font); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; background: var(--brand-primary); color: var(--text-inverted, #fff); transition: filter var(--dur-fast) var(--ease); }
.bn-of-btn:hover,
.bn-of-btn:focus { filter: brightness(1.06); text-decoration: none; }
.bn-offer-feat .bn-of-btn { width: 100%; height: 44px; margin-top: 14px; font-size: 15px; }
[data-theme="light"] .bn-of-btn { color: #04241a; }
.bn-offers { display: flex; flex-direction: column; gap: 10px; }
.bn-offer { display: flex; align-items: center; gap: 13px; background: var(--bg-surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 15px; }
.bn-of-rowtx { flex: 1; min-width: 0; }
.bn-offer .bn-of-name { font-size: 14px; }
.bn-of-bonus-row { color: var(--text-secondary); font-size: 12.5px; margin-top: 1px; }
.bn-more { margin-top: 26px; }
.bn-more-head { font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 17px; color: var(--text-primary); margin: 0 0 12px; }
.bn-body { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.bn-body > * { max-width: 100% !important; margin-inline: 0 !important; }

/* ── Hub: block wrapper full-width override ── */
.wp-block-casino-bonus-hub,
.wp-block-casino-bonus-hub.alignwide { max-width: min(calc(var(--container) - 2 * var(--gutter)), 100%) !important; width: 100% !important; }
.bn-hub-d { margin: 4px 0; width: 100%; }
.bn-hub-d .bn-shell { width: 100%; }

/* ── Hub: intro + featured card ── */
.bn-hub-intro { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin: 0 0 20px; }
.bn-feat-type { display: block; border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, var(--border)); border-radius: 16px; padding: 28px 32px; text-decoration: none; background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--brand-primary) 13%, transparent), transparent 55%), var(--bg-surface-1); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.bn-feat-type:hover,
.bn-feat-type:focus { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--border)); text-decoration: none !important; }
.bn-feat-type,
.bn-feat-type:hover,
.bn-feat-type:focus,
.bn-feat-type *,
.bn-feat-type *:hover,
.bn-feat-type *:focus { text-decoration: none !important; }
.bn-feat-eyebrow { display: inline-flex; align-items: flex-end; gap: 7px; color: var(--brand-accent); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; line-height: 1; }
[data-theme="light"] .bn-feat-eyebrow { color: #b45309; }
.bn-feat-eyebrow svg { display: block; width: 14px; height: 14px; flex-shrink: 0; }
.bn-feat-name { display: block; font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: clamp(22px, 2.8vw, 28px); color: var(--text-primary); }
.bn-feat-desc { display: block; color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin: 10px 0 20px; }
.bn-feat-more { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-primary); font-size: 13px; font-weight: 600; text-decoration: none; }
.bn-feat-more svg { width: 13px; height: 13px; flex-shrink: 0; }
[dir="rtl"] .bn-feat-more svg { transform: scaleX(-1); }

/* Hub block wrapper — no shell, no sidebar; just the content area */
.bn-hub-main { width: 100%; min-width: 0; }

/* ── Hub: B-style tiled type grid ── */
.bn-other-types-head { font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 16px; color: var(--text-primary); margin: 32px 0 14px; }
.bn-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* B-style card: stacked — icon+title row → body text → explore link */
.bn-type-card {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg-surface-1); border: 1px solid var(--border);
    border-radius: 14px; padding: 20px;
    text-decoration: none; color: inherit;
    position: relative; overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bn-type-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(80% 80% at 0% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 70%);
    opacity: 0; transition: opacity var(--dur-fast) var(--ease);
    pointer-events: none;
}
.bn-type-card:hover,
.bn-type-card:focus { border-color: color-mix(in srgb, var(--brand-primary) 50%, var(--border)); transform: translateY(-2px); text-decoration: none; }
.bn-type-card:hover::before,
.bn-type-card:focus::before { opacity: 1; }
/* Suppress underline on the card itself and every child element */
.bn-type-card,
.bn-type-card:hover,
.bn-type-card:focus,
.bn-type-card *,
.bn-type-card *:hover,
.bn-type-card *:focus { text-decoration: none !important; }
.bn-type-card-head { display: flex; align-items: center; gap: 10px; position: relative; }
.bn-type-card .bn-emo { font-size: 22px; line-height: 1; flex-shrink: 0; }
.bn-type-card-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.bn-type-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; flex: 1; position: relative; }
.bn-type-card-arrow { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-primary); font-size: 12.5px; font-weight: 600; margin-top: auto; position: relative; }
.bn-type-card-arrow svg { width: 12px; height: 12px; flex-shrink: 0; }
[dir="rtl"] .bn-type-card-arrow svg { transform: scaleX(-1); }

/* Manual-card icons (image option) + featured-card icon — v9.28.10 */
.bn-type-card .bn-ico { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; display: block; }
.bn-feat-head { display: flex; align-items: center; gap: 12px; }
.bn-feat-head .bn-feat-name { margin: 0; }
.bn-feat-emo { font-size: 30px; line-height: 1; flex-shrink: 0; }
.bn-feat-ico { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; flex-shrink: 0; display: block; }

/* ── Mobile top nav strip (was a fixed bottom bar before 9.20.0) ── */
.bn-mobilenav { display: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .bn-shell { grid-template-columns: 1fr; gap: 0; }
    .bn-side { display: none; }
    .bn-hero { grid-template-columns: 1fr; border-radius: 14px; padding: 20px; }
    .bn-hero-divider { display: none; }
    .bn-hero-tx { padding: 0; }
    .bn-hero-feat { padding: 0; margin-top: 18px; }
    .bn-stat-grid { grid-template-columns: repeat(2, 1fr); }

    /* Type grid: horizontal peek-slider on mobile */
    .bn-type-grid {
        display: flex; gap: 12px;
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin-inline-end: -16px; padding-inline-end: 16px; padding-block: 4px;
    }
    .bn-type-grid::-webkit-scrollbar { display: none; }
    .bn-type-grid .bn-type-card { flex: 0 0 72%; scroll-snap-align: start; }

    /* The menu rides ABOVE the breadcrumb as a static, horizontally-scrolling
       chip strip (no longer fixed to the bottom of the viewport). */
    .bn-mobilenav { display: block; margin: 0 0 16px; }
    .bn-chips { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
    .bn-chips::-webkit-scrollbar { display: none; }
    .bn-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--border); color: var(--text-secondary); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; }
    .bn-chip:hover, .bn-chip:focus { text-decoration: none; }
    .bn-chip.is-active { background: color-mix(in srgb, var(--brand-primary) 16%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent); color: var(--brand-primary); }
    .bn-chip .bn-emo { font-size: 18px; width: auto; }
    .bn-chip .pm-logo.bn-chip-logo { width: 24px; height: 24px; border-radius: 6px; }
    .bn-chip .pm-logo.bn-chip-logo .pm-logo-ini { font-size: 9px; }
}

/* RTL: mobile slider reverse direction */
[dir="rtl"] .bn-type-grid {
    margin-inline-end: 0; margin-inline-start: -16px;
    padding-inline-end: 0; padding-inline-start: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════
   PAYMENT SECTION — single method (G hero) + hub (filter + grid). v9.18.15
   Reuses .bn-shell / .bn-side / .bn-mobilenav (shared with bonus).
   Uses theme tokens → dark + light + RTL.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Payment logo tile (image or initials) ── */
.pm-logo { width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-surface-2); border: 1px solid var(--border); }
.pm-logo.lg { width: 72px; height: 72px; border-radius: 16px; }
.pm-logo img { width: 100%; height: 100%; object-fit: cover; }
.pm-logo-ini { font-family: 'Space Grotesk', var(--font); font-weight: 800; font-size: 15px; color: var(--text-primary); letter-spacing: -.02em; }
.pm-logo.lg .pm-logo-emo { font-size: 34px; line-height: 1; }
.pm-logo-emo { font-size: 26px; line-height: 1; }
/* Payment sidebar: small logo tile in place of the emoji */
.bn-side .pm-side-logo { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; }
.bn-side .pm-side-logo img { width: 100%; height: 100%; object-fit: cover; }

/* ── Single payment: G-style hero (identity + stats | featured casino) ── */
.pm-hero {
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: center;
    gap: 28px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 16%, var(--bg-surface-1)), var(--bg-surface-1) 72%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 28px;
}
.pm-hero.is-solo { grid-template-columns: 1fr; }
.pm-hero-divider { display: none; }
.pm-hero-tx { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pm-hero-feat { display: flex; flex-direction: column; justify-content: center; }

.pm-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, var(--border));
    border-radius: 999px; padding: 4px 12px 4px 8px;
    font-size: 11px; font-weight: 700; color: var(--brand-primary);
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; width: fit-content;
}
[data-theme="light"] .pm-eyebrow { color: var(--cc-green-2); border-color: color-mix(in srgb, var(--cc-green-2) 30%, var(--border)); background: color-mix(in srgb, var(--cc-green-2) 10%, transparent); }
.pm-eyebrow svg { width: 13px; height: 13px; flex-shrink: 0; display: block; }

.pm-idhead { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.pm-idtx { min-width: 0; }
.pm-name { font-family: 'Space Grotesk', var(--font); font-weight: 800; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.pm-type { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.pm-intro { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }

.pm-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.pm-statbox { background: color-mix(in srgb, var(--bg-base) 60%, transparent); border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; }
.pm-stat-k { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.pm-stat-v { font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 16px; color: var(--text-primary); }

/* ── Single payment: pros & cons box ── */
.pm-proscons { margin-top: 28px; }
.pm-proscons-head { font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 20px; color: var(--text-primary); margin: 0 0 14px; }
.pm-pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pm-pc-box { background: var(--bg-surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.pm-pc-pro { border-top: 3px solid var(--brand-primary); }
.pm-pc-con { border-top: 3px solid #ef4444; }
.pm-pc-title { font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.pm-pc-pro .pm-pc-title { color: var(--brand-primary); }
[data-theme="light"] .pm-pc-pro .pm-pc-title { color: var(--cc-green-2); }
.pm-pc-con .pm-pc-title { color: #ef4444; }
[data-theme="light"] .pm-pc-con .pm-pc-title { color: #dc2626; }
.pm-pc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pm-pc-list li { position: relative; padding-inline-start: 24px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.pm-pc-list li::before { position: absolute; inset-inline-start: 0; top: 1px; font-weight: 700; font-size: 13px; }
.pm-pc-pro .pm-pc-list li::before { content: "✓"; color: var(--brand-primary); }
[data-theme="light"] .pm-pc-pro .pm-pc-list li::before { color: var(--cc-green-2); }
.pm-pc-con .pm-pc-list li::before { content: "✕"; color: #f87171; }
[data-theme="light"] .pm-pc-con .pm-pc-list li::before { color: #dc2626; }

/* ══════════ PAYMENT HUB — filter sidebar + grid ══════════ */
/* The hub is a self-contained block: it lives inside .entry-content and
   splits ITSELF into a filter column + a method grid. It does NOT use the
   page-level .bn-shell — the rest of the page (title, intro) stays full width. */
.pm-hub { width: 100%; margin-bottom: 32px; }
.wp-block-casino-payment-hub { width: 100%; }
.pm-hub-intro { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin: 0 0 20px; }

.pm-fl-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; width: 100%; }
.pm-fl-shell.no-filters { grid-template-columns: 1fr; }

/* Filter sidebar */
.pm-fl-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-height-actual, var(--header-height)) + 20px); }
.pm-fl-search { width: 100%; height: 42px; padding: 0 14px; border-radius: 11px; background: var(--bg-surface-1); border: 1px solid var(--border); color: var(--text-primary); font-size: 14px; }
.pm-fl-search:focus { outline: none; border-color: color-mix(in srgb, var(--brand-primary) 50%, var(--border)); }
.pm-fl-grp { display: flex; flex-direction: column; gap: 4px; }
.pm-fl-h { font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 6px; padding: 0 2px; }
.pm-fl-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--text-secondary); font-size: 14px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pm-fl-opt:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.pm-fl-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pm-fl-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--bg-surface-1); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.pm-fl-box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.pm-fl-opt input:checked + .pm-fl-box { background: var(--brand-primary); border-color: var(--brand-primary); }
.pm-fl-opt input:checked + .pm-fl-box svg { opacity: 1; }
[data-theme="light"] .pm-fl-opt input:checked + .pm-fl-box svg { color: #04241a; }
.pm-fl-opt input:focus-visible + .pm-fl-box { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.pm-fl-label { min-width: 0; }
.pm-fl-clear { margin-top: 4px; align-self: flex-start; background: none; border: none; color: var(--brand-primary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
.pm-fl-clear:hover { text-decoration: underline; }

/* Mobile filter toggle (hidden on desktop) */
.pm-fl-mobile-toggle { display: none; }
.pm-fl-mhead, .pm-fl-mfoot { display: none; }

/* Results bar */
.pm-fl-main { min-width: 0; }
.pm-fl-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pm-fl-count { color: var(--text-secondary); font-size: 14px; }
.pm-fl-count b { color: var(--text-primary); font-weight: 700; }

/* Method grid */
.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; position: relative; }
.pm-card {
    position: relative;
    display: flex; flex-direction: column; gap: 11px;
    background: var(--bg-surface-1); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px;
    text-decoration: none; color: inherit; cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pm-card:hover,
.pm-card:focus-within { border-color: color-mix(in srgb, var(--brand-primary) 50%, var(--border)); transform: translateY(-2px); text-decoration: none; }
.pm-card,
.pm-card:hover,
.pm-card *,
.pm-card *:hover { text-decoration: none !important; }
/* Filtering hides cards cleanly (no gaps); the grid height is animated in JS so
   content below slides smoothly instead of jumping. */
.pm-card.is-hidden { display: none; }
.pm-card-top { display: flex; align-items: center; gap: 11px; }
.pm-card-id { min-width: 0; }
/* Method name is a "stretched link": its ::after overlay makes the whole card
   clickable while the card root stays a <div> (wpautop-safe). */
.pm-card-nm { font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 15px; color: var(--text-primary); display: inline-block; }
a.pm-card-nm { text-decoration: none; }
.pm-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pm-card-ty { color: var(--text-muted); font-size: 12px; margin-top: 1px; }
.pm-card-st { display: flex; flex-direction: column; gap: 6px; padding-top: 11px; border-top: 1px solid var(--border); }
.pm-st-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pm-st-k { color: var(--text-secondary); font-size: 12.5px; }
.pm-st-v { font-weight: 600; font-size: 12.5px; color: var(--text-primary); }
.pm-card-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 2px; }
.pm-card-explore { color: var(--brand-primary); font-size: 12.5px; font-weight: 600; }
.pm-card-arr { color: var(--brand-primary); display: inline-flex; }
.pm-card-arr svg { width: 14px; height: 14px; }
[dir="rtl"] .pm-card-arr svg { transform: scaleX(-1); }

.pm-no-results { color: var(--text-secondary); font-size: 15px; text-align: center; padding: 40px 20px; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .pm-hero { grid-template-columns: 1fr; border-radius: 14px; padding: 20px; }
    .pm-hero-divider { display: none; }
    .pm-hero-tx { padding: 0; }
    .pm-hero-feat { padding: 0; margin-top: 18px; }
    .pm-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .pm-pc-grid { grid-template-columns: 1fr; }

    /* Hub: collapse filter sidebar into a toggle sheet */
    .pm-fl-shell { grid-template-columns: 1fr; gap: 0; }
    .pm-fl-side {
        position: fixed; inset: 0; z-index: 600;
        background: var(--bg-base); padding: 20px;
        overflow-y: auto; display: none;
        gap: 18px;
    }
    .pm-fl-side.is-open { display: flex; }
    .pm-fl-mobile-toggle {
        display: inline-flex; align-items: center; gap: 8px;
        height: 44px; padding: 0 18px; margin-bottom: 16px;
        border-radius: 11px; background: var(--bg-surface-1);
        border: 1px solid var(--border); color: var(--text-primary);
        font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .pm-fl-mobile-toggle svg { width: 16px; height: 16px; }
    .pm-fl-mobile-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-primary); color: #04241a; font-size: 12px; font-weight: 700; }
    .pm-fl-mhead {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 2;
        margin: -20px -20px 2px; padding: 16px 20px;
        background: var(--bg-base); border-bottom: 1px solid var(--border);
    }
    .pm-fl-mtitle { font-size: 17px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; }
    .pm-fl-mclose { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-surface-1); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; }
    .pm-fl-mclose svg { width: 18px; height: 18px; }
    .pm-fl-mfoot {
        display: block; position: sticky; bottom: 0; z-index: 2; margin-top: auto;
        margin-inline: -20px; margin-bottom: -20px; padding: 14px 20px;
        background: var(--bg-base); border-top: 1px solid var(--border);
    }
    .pm-fl-apply {
        display: block; width: 100%; height: 50px; border: none; border-radius: 12px;
        background: var(--brand-primary); color: #04241a; font-size: 15px; font-weight: 700; cursor: pointer;
    }
    .pm-fl-apply:active { transform: translateY(1px); }
    .pm-grid { grid-template-columns: 1fr; }
}

/* Between mobile and full desktop: 2 columns when the filter sidebar leaves
   the grid a bit cramped for 3. */
@media (min-width: 901px) and (max-width: 1200px) {
    .pm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── RTL ── */
[dir="rtl"] .pm-eyebrow { padding: 4px 8px 4px 12px; }
[dir="rtl"] .pm-pc-list li,
[dir="rtl"] .pm-quick li { padding-inline-start: 24px; }


/* ══════════════════════════════════════════════════════════════════════
   HUB HERO BLOCK (casino/hub-hero) — shared search-led hero for the
   Payments / Bonuses / Sports hub pages. Scoped to .chh; new rules go here,
   ABOVE the HARD PINS block (which must remain last).
   ══════════════════════════════════════════════════════════════════════ */
/* Transparent, contained hero: no background fill, no border, no glow — the
   hero blends into the page and is NOT full-width. It sits at its align width
   (wide = container) and centres a widened content column with little top pad. */
.chh{position:relative;text-align:center;padding:10px 0 26px;background:transparent;border:0;border-radius:0}
.chh-in{position:relative;max-width:100%;margin:0 auto}
.chh-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--cc-green-2);
    background:color-mix(in srgb, var(--brand-primary) 12%, transparent);border:1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);padding:5px 13px;border-radius:var(--r-full)}
.chh-h{font-family:'Space Grotesk', var(--font);font-weight:700;font-size:clamp(30px, 4.6vw, 50px);line-height:1.08;letter-spacing:-.02em;color:var(--text-primary);margin:14px auto 0;max-width:26ch}
.chh-h em{font-style:normal;background:linear-gradient(135deg, var(--cc-green-2), var(--cc-teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.chh-lead{color:var(--text-muted);font-size:clamp(14.5px, 1.7vw, 16.5px);line-height:1.6;max-width:72ch;margin:13px auto 0}
.chh-searchbox{position:relative;width:100%;max-width:760px;margin:22px auto 0}
.chh-search{display:flex;align-items:center;gap:0;width:100%;background:var(--bg-surface-1);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding-block:7px;padding-inline:18px 7px;cursor:text;text-align:start;font-family:var(--font)}
.chh-search:focus-within{border-color:var(--brand-primary)}
.chh-si{width:20px;height:20px;flex-shrink:0;color:var(--text-dim);margin-inline-end:10px}
.chh-input{flex:1;min-width:0;border:0;background:transparent;color:var(--text-primary);font-size:15px;line-height:1.2;padding:12px 8px;font-family:var(--font);outline:none}
.chh-input::placeholder{color:var(--text-dim)}
.chh-sbtn{flex-shrink:0;display:inline-flex;align-items:center;height:42px;padding:0 22px;border-radius:var(--r-md);background:var(--brand-cta);color:var(--text-inverted);font-weight:600;font-size:14.5px;border:0;cursor:pointer}
.chh-results{position:absolute;inset-inline:0;top:calc(100% + 8px);z-index:30;background:var(--bg-surface-1);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 18px 40px -12px rgba(0,0,0,.35);padding:8px;max-height:60vh;overflow-y:auto;text-align:start}
.chh-results .chh-rs-row{display:flex;flex-direction:row;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);text-decoration:none;color:var(--text-primary)}
.chh-results .chh-rs-row:hover,.chh-results .chh-rs-row:focus{background:var(--bg-surface-2);color:var(--text-primary);text-decoration:none}
.chh-rs-emo{font-size:21px;line-height:1;flex-shrink:0;width:34px;text-align:center}
.chh-rs-logo{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:48px;padding:4px 8px;background:#fff;border-radius:8px}
.chh-rs-logo img{max-height:24px;max-width:84px;object-fit:contain;display:block}
.chh-rs-nm{font-weight:600;font-size:15px;color:var(--text-primary)}
.chh-rs-state{padding:14px;margin:0;color:var(--text-dim);font-size:14px;text-align:center}
.chh-chiplabel{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-weight:700;margin:24px 0 0}
.chh-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.chh-chip{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 17px 0 11px;border-radius:var(--r-full);background:var(--bg-surface-1);border:1px solid var(--border);color:var(--text-secondary);font-size:15px;font-weight:500;text-decoration:none;transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}
.chh-chip.no-pad{padding-inline-start:17px}
.chh-chip:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.chh-chip .chh-emo{font-size:20px;line-height:1}
.chh-chip .chh-tile{width:29px;height:29px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;color:#fff;letter-spacing:.02em;flex-shrink:0}
.chh-chip .chh-logo{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:42px;padding:3px 7px;background:#fff;border-radius:7px;flex-shrink:0}
.chh-chip .chh-logo img{max-height:22px;max-width:76px;object-fit:contain;display:block}
.chh-payments .chh-chip{height:54px;padding:0 18px 0 10px}
.chh-chip .chh-clab{line-height:1}
.chh-chips a.chh-chip, .chh-chips a.chh-chip:hover{color:var(--text-secondary);text-decoration:none}
@media (max-width: 640px){
    .chh{padding:6px 0 22px}
    .chh-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .chh-chips::-webkit-scrollbar{height:0}
    .chh-chip{flex-shrink:0}
    .chh-chiplabel{text-align:start}
}


/* ══════════════════════════════════════════════════════════════════════
   SINGLE SPORT — "J / Split Hero" sport-only pieces (v9.20.0).
   Reuses .bn-shell / .bn-side / .bn-hero / .bn-offers / .pm-proscons.
   New: numbered step headers + the 5 "key feature" stat boxes + hero meta.
   ══════════════════════════════════════════════════════════════════════ */
.sp-step { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; }
.sp-step-no { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--brand-primary) 14%, transparent); color: var(--cc-green-2); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.sp-step-h { font-size: 16px; font-weight: 700; color: var(--text-primary); }

.sp-eyebrow-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-eyebrow-row .bn-eyebrow { margin-bottom: 0; }
.sp-meta { display: flex; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.sp-meta-i { font-size: 12.5px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
.sp-meta-i .casino-ui-ic { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }
.sp-tag-live { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, #f87171 15%, transparent); border: 1px solid color-mix(in srgb, #f87171 30%, transparent); color: #f87171; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.sp-tag-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f87171; animation: sp-pulse 1.4s ease-in-out infinite; }
@keyframes sp-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.sp-feat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sp-feat-box { position: relative; background: var(--bg-surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px; }
.sp-feat-box.on { border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent); }
.sp-feat-box.off { opacity: .65; }
.sp-feat-badge { position: absolute; top: 12px; inset-inline-end: 12px; font-size: 13px; line-height: 1; }
.sp-feat-badge.yes { color: var(--cc-green-2); }
.sp-feat-badge.no { color: #f87171; }
.sp-feat-icon { display: block; font-size: 18px; margin-bottom: 8px; }
.sp-feat-lbl { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.sp-feat-val { display: block; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.sp-feat-val.no { color: var(--text-dim); }
@media (max-width: 1100px) { .sp-feat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .sp-feat-grid { grid-template-columns: repeat(2, 1fr); } }



/* ─── Game Review — B Layout (M1, mockup-faithful) · v9.28.1 ─────────────
   Reuses the shared .bn-shell / .bn-side / .bn-mobilenav primitives and the
   .bn-eyebrow / .bn-title / .bn-stat-grid / .bn-statbox styles (so the game
   single stays in lock-step with bonus/payment/sport). Only the game-specific
   hero and the sidebar thumbnail tile are defined here. Stays ABOVE HARD PINS. */

/* Sidebar thumbnail tile — games show real cover art instead of an emoji.
   Scoped to .bn-side-img, which bonus/payment never emit (no ripple). */
.bn-side-img { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
    overflow: hidden; background: var(--bg-surface-3); display: flex;
    align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
.bn-side-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero: cover image (inline-start) + text/stats/CTA (inline-end), M1 gradient */
.gr-hero { display: grid; grid-template-columns: 280px 1fr; align-items: stretch;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 16%, var(--bg-surface-1)), var(--bg-surface-1) 72%);
    border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-bottom: 28px; }
.gr-thumb-col { position: relative; overflow: hidden; align-self: stretch; min-height: 300px;
    background-color: rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center; }
/* Blurred-fill: full image (contain) sits sharp over a blurred, zoomed copy of itself,
   so a landscape image fills the tall column with no crop and no dead space. */
.gr-thumb-col.has-img::before { content: ''; position: absolute; inset: 0; z-index: 0;
    background: var(--gr-img) center/cover no-repeat;
    filter: blur(30px) brightness(.5) saturate(1.2); transform: scale(1.25); }
.gr-thumb-fg { position: absolute; inset: 0; z-index: 1;
    background: var(--gr-img) center/contain no-repeat; }
.gr-thumb-ph { position: relative; z-index: 1; opacity: .5; font-size: 64px; }
.gr-tx { padding: 28px; padding-inline-start: 24px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }

/* Eyebrow row: review/provider eyebrow (start) + editor's-pick pill (end) */
.gr-eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.gr-eyebrow-row .bn-eyebrow { margin: 0; }
.gr-pick { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto;
    background: color-mix(in srgb, var(--brand-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 38%, var(--border));
    color: var(--brand-accent); font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
[data-theme="light"] .gr-pick { color: #b45309; border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); }

/* About-this-game prose, in the hero (no heading) — sits under the title */
.gr-about { color: var(--text-secondary); font-size: 14px; line-height: 1.7; margin: 4px 0 14px; max-width: 64ch; }

/* Byline under the title: provider + editor rating badge (v9.28.10) */
.gr-byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 12px; }
.gr-prov { color: var(--text-secondary); font-size: 13.5px; }
.gr-prov strong { color: var(--text-primary); font-weight: 700; }
.gr-rating { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-weight: 800; font-size: 13px; line-height: 1; }
.gr-rating svg { width: 14px; height: 14px; color: var(--brand-accent); flex-shrink: 0; }
.gr-rating .gr-rating-num { letter-spacing: .01em; }
.gr-rating .gr-rating-max { color: var(--text-muted); font-weight: 600; font-size: 11px; }
[data-theme="light"] .gr-rating svg { color: #d97706; }

/* Provider / meta line with leading icons (calendar, paylines) */
.gr-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    color: var(--text-muted); font-size: 13px; margin: 0 0 18px; }
.gr-meta-i { display: inline-flex; align-items: center; gap: 6px; }
.gr-meta .casino-ui-ic { width: 14px; height: 14px; color: var(--brand-primary); flex-shrink: 0; }
.gr-meta-sep { opacity: .45; }

/* Hero taxonomy chips (themes) — v9.28.10 */
.gr-tax { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.gr-tax-label { display: inline-flex; align-items: center; height: 26px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gr-tax-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.gr-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; font-weight: 600; line-height: 1; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.gr-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--cc-green-2); margin-inline-end: 7px; flex-shrink: 0; opacity: .85; }
.gr-tag:hover { border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border)); color: var(--text-primary); }

/* Paylines badge: important hero stat, styled to stand out (v9.28.10) */
.gr-pay { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--brand-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-primary) 32%, var(--border)); color: var(--cc-green-2); font-weight: 700; font-size: 12.5px; line-height: 1; }
.gr-pay .casino-ui-ic { width: 15px; height: 15px; color: var(--cc-green-2); flex-shrink: 0; }

/* CTA row */
.gr-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.gr-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-primary);
    color: #04140d; font-size: 15px; font-weight: 700; padding: 12px 22px; border-radius: 12px;
    text-decoration: none; transition: filter var(--dur-fast) var(--ease); }
.gr-cta:hover { filter: brightness(1.08); color: #04140d; text-decoration: none; }
.gr-cta svg { width: 16px; height: 16px; stroke: currentColor; }
.gr-demo { color: var(--text-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.gr-demo:hover { color: var(--text-primary); }

/* Section heading (Pros & Cons, Best casinos) — M1 bar style */
.gr-section-head { font-family: 'Space Grotesk', var(--font); font-size: 17px; font-weight: 700;
    color: var(--text-primary); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.gr-section-head::before { content: ''; display: inline-block; width: 3px; height: 18px;
    background: var(--brand-primary); border-radius: 2px; flex-shrink: 0; }

/* Responsive — match .bn-hero: image stacks on top below 900px */
@media (max-width: 900px) {
  .gr-hero { grid-template-columns: 1fr; border-radius: 14px; }
  .gr-thumb-col { min-height: 0; aspect-ratio: 16 / 9; align-self: auto; }
  /* has-img box: relying on aspect-ratio alone collapses on iOS Safari (flex
     container with only absolutely-positioned children). display:block makes
     aspect-ratio reliable, and min-height is a hard fallback if aspect-ratio
     is unsupported, so the cover image always has height on real phones. */
  .gr-thumb-col.has-img { display: block; min-height: 180px; }
  .gr-thumb-col.has-img::before { display: none; }  /* no blur on mobile — box is already wide */
  .gr-thumb-col.has-img::after  { display: none; }  /* no edge fade; show the full image cleanly */
  /* Fill the box edge-to-edge (centered) instead of contain, so the image never
     leaves a side gap when its aspect ratio differs from the box (v9.29.0). */
  .gr-thumb-col.has-img .gr-thumb-fg { background-size: cover; background-position: center; }
  .gr-tx { padding: 20px; padding-inline-start: 20px; }
}

/* Light mode */
[data-theme="light"] .gr-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 10%, #f8f9fa), #f8f9fa 72%); border-color: #e0e0e0; }
[data-theme="light"] .gr-thumb-col { background: rgba(0,0,0,.06); }
[data-theme="light"] .bn-side-img { background: #e8e8e8; }


/* ══════════════════════════════════════════════════════════════════════
   IMAGE + CONTENT block (casino/image-content): 4 layouts.
   variant: split | bar | overlap | framed. Token-driven, logical props,
   light-mode aware, stacks on mobile. Stays ABOVE the HARD PINS block.
   ══════════════════════════════════════════════════════════════════════ */
.cic { margin-block: var(--sp-8); }
.cic-copy { min-inline-size: 0; }
.cic-media { min-inline-size: 0; }
.cic-eyebrow { font-family: 'Space Grotesk', var(--font); font-weight: 800; font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--cc-green-2); margin: 0 0 10px; }
.cic-h { font-family: var(--font); font-weight: 800; font-size: 26px; line-height: 1.25; letter-spacing: -.02em; color: var(--text-primary); margin: 0 0 12px; }
.cic-p { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 16px; }
.cic-p p { margin: 0 0 12px; }
.cic-p p:last-child { margin-bottom: 0; }
.cic-img { display: block; inline-size: 100%; object-fit: cover; border-radius: 14px; border: 1px solid var(--border); }
.cic-feat { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.cic-feat li { position: relative; padding-inline-start: 26px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.cic-feat li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; font-weight: 800; color: var(--cc-green-2); }
.cic-btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 13px; line-height: 1; background: linear-gradient(135deg, var(--cc-green-2), var(--brand-primary)); color: #04261b; padding: 11px 18px; border-radius: 11px; text-decoration: none; }
.cic-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 13px; line-height: 1; color: var(--cc-green-2); text-decoration: none; }
.cic-btn .cic-arr, .cic-link .cic-arr { display: inline-block; }
[dir="rtl"] .cic-btn .cic-arr, [dir="rtl"] .cic-link .cic-arr { transform: scaleX(-1); }
/* Pin CTA colours: body-content link styling (.entry-content a:where(...), 0,1,1)
   would otherwise force these CTAs green + underlined. Higher specificity wins. v9.28.10 */
.cic a.cic-btn, .cic a.cic-btn:hover, .cic a.cic-btn:focus, .cic a.cic-btn:visited { color: #04261b; text-decoration: none; }
.cic a.cic-link, .cic a.cic-link:hover, .cic a.cic-link:focus, .cic a.cic-link:visited { color: var(--cc-green-2); text-decoration: none; }

/* ── Layouts (v9.28.10): kept = Accent Bar, Editorial Overlap; added = Inset
   Banner, Overhang Inset, Diagonal Split, Diagonal Color Panel. ── */

/* Side-by-side grid layouts */
.cic--bar, .cic--inset, .cic--overhang { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }

/* image side (logical order swap) */
.cic--img-right .cic-media { order: 2; }
.cic--img-right .cic-copy { order: 1; }

/* no image: single column */
.cic--no-img { display: block; }

/* Image fit on side-by-side layouts: show the whole image (no crop), centred on
   a surface backdrop inside a fixed ratio box. */
.cic--bar .cic-media, .cic--inset .cic-media, .cic--overhang .cic-media {
  aspect-ratio: 4 / 3; background: var(--bg-surface-2); border-radius: 14px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.cic--bar .cic-img, .cic--inset .cic-img, .cic--overhang .cic-img {
  inline-size: 100%; block-size: 100%; object-fit: contain; border: 0; border-radius: 0;
}

/* Accent Bar: brand accent bar on the copy */
.cic--bar .cic-copy { border-inline-start: 3px solid var(--brand-primary); padding-inline-start: 20px; }
.cic--bar.cic--img-right .cic-copy { border-inline-start: 0; border-inline-end: 3px solid var(--brand-primary); padding-inline-start: 0; padding-inline-end: 20px; }

/* Inset Banner: image + copy inside a subtly brand-tinted rounded panel */
.cic--inset { padding: 26px; border-radius: 18px; border: 1px solid var(--border); box-shadow: var(--cic-copy-shadow);
  background: linear-gradient(150deg, var(--bg-surface-1), color-mix(in srgb, var(--brand-primary) 8%, var(--bg-surface-1))); }

/* Overhang Inset: the image breaks out past the top edge with a soft shadow */
.cic--overhang { border-radius: 18px; margin-block-start: 26px; box-shadow: var(--cic-copy-shadow); }
.cic--overhang .cic-media { margin-block: -26px 0; box-shadow: var(--shadow-lg); }

/* Editorial Overlap: large image with a copy card overlapping its inner edge */
.cic--overlap { display: block; }
.cic--overlap .cic-img { aspect-ratio: 16 / 9; object-fit: cover; max-block-size: min(var(--cic-overlap-max, 370px), 55vh); }
.cic--overlap .cic-copy { position: relative; margin-block-start: -64px; margin-inline-start: auto; inline-size: 74%; background: linear-gradient(160deg, var(--bg-surface-1), color-mix(in srgb, var(--bg-base) 88%, transparent)); border: 1px solid var(--border); border-radius: 14px; padding: 24px 26px; box-shadow: var(--cic-copy-shadow); }
.cic--overlap.cic--img-right .cic-copy { margin-inline-start: 0; margin-inline-end: auto; }

/* Diagonal Split + Diagonal Color Panel: copy panel over a full-bleed image with
   a slanted inner edge. Shared geometry, different panel skin. */
.cic--diagonal, .cic--colorpanel { position: relative; display: block; border-radius: 18px; overflow: hidden; min-block-size: 320px; }
.cic--diagonal .cic-media, .cic--colorpanel .cic-media { position: absolute; inset: 0; }
/* v9.32: gorsel kutusu %95; bosluk HER ZAMAN copy'nin kapattigi inline
   kenara duser (varsayilanda inline-end, img-right'ta inline-start). Boylece
   kart kosesindeki gorsel sizintisi kapanir, dort yon de temiz kalir. */
.cic--diagonal .cic-img, .cic--colorpanel .cic-img { position: absolute; inset-block: 0; inset-inline: 0 auto; inline-size: 95%; block-size: 100%; object-fit: cover; border: 0; border-radius: 0; }
.cic--diagonal.cic--img-right .cic-img, .cic--colorpanel.cic--img-right .cic-img { inset-inline: auto 0; }
.cic--diagonal, .cic--colorpanel { --cic-slope: 96px; } /* v9.32 m14: egim piksel kilidi */
.cic--diagonal .cic-copy, .cic--colorpanel .cic-copy {
  position: relative; inline-size: 60%; min-block-size: 320px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 36px calc(var(--cic-slope) + 22px) 36px 32px;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cic-slope)) 100%, 0 100%);
}
.cic--diagonal.cic--img-right .cic-copy, .cic--colorpanel.cic--img-right .cic-copy {
  margin-inline-start: auto; padding: 36px 32px 36px calc(var(--cic-slope) + 22px);
  clip-path: polygon(var(--cic-slope) 0, 100% 0, 100% 100%, 0 100%);
}
[dir="rtl"] .cic--diagonal .cic-copy, [dir="rtl"] .cic--colorpanel .cic-copy {
  margin-inline-start: auto; padding: 36px 32px 36px calc(var(--cic-slope) + 22px);
  clip-path: polygon(var(--cic-slope) 0, 100% 0, 100% 100%, 0 100%);
}
[dir="rtl"] .cic--diagonal.cic--img-right .cic-copy, [dir="rtl"] .cic--colorpanel.cic--img-right .cic-copy {
  margin-inline-start: 0; padding: 36px calc(var(--cic-slope) + 22px) 36px 32px;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cic-slope)) 100%, 0 100%);
}

/* Diagonal Split skin: plain surface panel */
.cic--diagonal .cic-copy { background: var(--bg-surface-1); }

/* Diagonal Color Panel skin: subtle brand tint + brand inline-start edge (colour 7) */
.cic--colorpanel .cic-copy {
  background: linear-gradient(150deg, var(--bg-surface-1), color-mix(in srgb, var(--brand-primary) 16%, var(--bg-surface-1)));
  border-inline-start: 4px solid var(--brand-primary);
}
.cic--colorpanel .cic-eyebrow { color: var(--cc-green-2); }
.cic--colorpanel .cic-btn { background: linear-gradient(135deg, var(--cc-green-2), var(--brand-primary)); color: #04261b; }

/* CTA + image polish for the two diagonal layouts.
   The gradient button stays wide but is held clear of the slanted image edge
   (the inline side that narrows toward the bottom where the CTA sits) and its
   label is centred. The text-link CTA keeps its natural inline size. The image
   crop biases toward the side that is actually visible next to the panel. */
/* v9.32 m14: %18 margin hack'i emekli; egim padding'i butonu zaten korur. */
.cic--diagonal .cic-btn, .cic--colorpanel .cic-btn { align-self: flex-start; justify-content: center; }
.cic--diagonal .cic-link, .cic--colorpanel .cic-link { align-self: flex-start; }
.cic--diagonal .cic-img, .cic--colorpanel .cic-img { object-position: right center; }
.cic--diagonal.cic--img-right .cic-img, .cic--colorpanel.cic--img-right .cic-img { object-position: left center; }
[dir="rtl"] .cic--diagonal .cic-img, [dir="rtl"] .cic--colorpanel .cic-img { object-position: left center; }
[dir="rtl"] .cic--diagonal.cic--img-right .cic-img, [dir="rtl"] .cic--colorpanel.cic--img-right .cic-img { object-position: right center; }

/* ── v9.32 m1: imagePosition=center duzenleri ─────────────────────────
   bar/inset/overhang tek kolon (medya ustte 16:9 contain), overlap karti
   ortalanir, diagonal/colorpanel dikey yoruma gecer (gorsel ustte, alt
   kenari egik). Kolon ici kompakt kademeler container query ile. */
.cic--img-center { container-type: inline-size; }
.cic--img-center.cic--bar, .cic--img-center.cic--inset, .cic--img-center.cic--overhang {
  grid-template-columns: 1fr;
}
.cic--img-center.cic--bar .cic-media,
.cic--img-center.cic--inset .cic-media,
.cic--img-center.cic--overhang .cic-media { aspect-ratio: 16 / 9; }
.cic--img-center.cic--bar .cic-copy,
.cic--img-center.cic--bar.cic--img-right .cic-copy {
  border-inline: 0; padding-inline: 0;
  border-block-start: 3px solid var(--brand-primary); padding-block-start: 18px;
}
.cic--img-center.cic--overhang .cic-media { margin-block: -26px 0; }
.cic--img-center.cic--overlap .cic-copy,
.cic--img-center.cic--overlap.cic--img-right .cic-copy {
  margin-inline: auto; inline-size: 80%;
}
.cic--img-center.cic--diagonal, .cic--img-center.cic--colorpanel {
  min-block-size: 0;
}
.cic--img-center.cic--diagonal .cic-media, .cic--img-center.cic--colorpanel .cic-media {
  position: relative; inset: auto; block-size: 240px;
}
.cic--img-center.cic--diagonal .cic-img, .cic--img-center.cic--colorpanel .cic-img {
  position: absolute; inset-inline: 0; inline-size: 100%; object-position: center; /* center modda bosluk yok */
}
.cic--img-center.cic--diagonal .cic-copy, .cic--img-center.cic--colorpanel .cic-copy,
[dir="rtl"] .cic--img-center.cic--diagonal .cic-copy, [dir="rtl"] .cic--img-center.cic--colorpanel .cic-copy,
.cic--img-center.cic--diagonal.cic--img-right .cic-copy, .cic--img-center.cic--colorpanel.cic--img-right .cic-copy,
[dir="rtl"] .cic--img-center.cic--diagonal.cic--img-right .cic-copy, [dir="rtl"] .cic--img-center.cic--colorpanel.cic--img-right .cic-copy {
  inline-size: auto; min-block-size: 0; margin-inline: 0;
  margin-block-start: calc(-1 * var(--cic-slope) / 2);
  padding: calc(var(--cic-slope) / 2 + 22px) 28px 26px;
  clip-path: polygon(0 var(--cic-slope), 100% 0, 100% 100%, 0 100%);
}
[dir="rtl"] .cic--img-center.cic--diagonal .cic-copy, [dir="rtl"] .cic--img-center.cic--colorpanel .cic-copy,
[dir="rtl"] .cic--img-center.cic--diagonal.cic--img-right .cic-copy, [dir="rtl"] .cic--img-center.cic--colorpanel.cic--img-right .cic-copy {
  clip-path: polygon(0 0, 100% var(--cic-slope), 100% 100%, 0 100%);
}
/* v9.32 m1 fix: brand seridi spec geregi USTTE; kopyanin ust kenari egik
   clip oldugundan serit blok konteynerinin ustune tasindi. */
.cic--img-center.cic--colorpanel { border-block-start: 4px solid var(--brand-primary); }
.cic--img-center.cic--colorpanel .cic-copy { border-inline-start: 0; }
@container (max-width: 460px) {
  .cic--img-center .cic-h { font-size: 21px; }
  .cic--img-center.cic--inset { padding: 20px; }
  .cic--img-center.cic--diagonal .cic-media, .cic--img-center.cic--colorpanel .cic-media { block-size: 200px; }
}
@container (max-width: 260px) {
  .cic--img-center.cic--bar .cic-media,
  .cic--img-center.cic--inset .cic-media,
  .cic--img-center.cic--overhang .cic-media { aspect-ratio: 4 / 3; }
  .cic--img-center .cic-h { font-size: 18px; }
  .cic--img-center .cic-p { font-size: 13px; }
  .cic--img-center.cic--inset { padding: 14px; }
  .cic--img-center.cic--diagonal .cic-copy, .cic--img-center.cic--colorpanel .cic-copy { padding-inline: 18px; }
}

/* Overlay layouts with no image: drop to a normal full-width panel */
.cic--diagonal.cic--no-img .cic-copy, .cic--colorpanel.cic--no-img .cic-copy,
[dir="rtl"] .cic--diagonal.cic--no-img .cic-copy, [dir="rtl"] .cic--colorpanel.cic--no-img .cic-copy {
  inline-size: auto; min-block-size: 0; clip-path: none; margin-inline: 0; padding: 26px 28px;
}
.cic--diagonal.cic--no-img, .cic--colorpanel.cic--no-img { min-block-size: 0; }
.cic--diagonal.cic--no-img .cic-btn, .cic--colorpanel.cic--no-img .cic-btn { align-self: flex-start; }

/* Light mode: image backdrop border (tokens handle the rest) */
[data-theme="light"] .cic-img { border-color: var(--border); }

/* Mobile: stack everything */
@media (max-width: 782px) {
  .cic--bar, .cic--inset, .cic--overhang { grid-template-columns: 1fr; gap: 18px; }
  .cic--img-right .cic-media, .cic--img-right .cic-copy { order: 0; }
  .cic--bar .cic-copy, .cic--bar.cic--img-right .cic-copy { border-inline: 0; border-block-start: 3px solid var(--brand-primary); padding-inline: 0; padding-block-start: 16px; }
  .cic--overhang { margin-block-start: 0; }
  .cic--overhang .cic-media { margin-block: 0; }
  .cic--overlap .cic-copy, .cic--overlap.cic--img-right .cic-copy { margin-block-start: -32px; margin-inline: 0; inline-size: 92%; }
  .cic--diagonal, .cic--colorpanel { min-block-size: 0; display: flex; flex-direction: column; }
  .cic--diagonal .cic-media, .cic--colorpanel .cic-media { position: relative; }
  .cic--diagonal .cic-img, .cic--colorpanel .cic-img { position: relative; inset-inline: auto; inline-size: 100%; aspect-ratio: 16 / 9; block-size: auto; } /* mobil yiginda tam genislik */
  .cic--diagonal .cic-copy, .cic--colorpanel .cic-copy,
  .cic--diagonal.cic--img-right .cic-copy, .cic--colorpanel.cic--img-right .cic-copy,
  [dir="rtl"] .cic--diagonal .cic-copy, [dir="rtl"] .cic--colorpanel .cic-copy,
  [dir="rtl"] .cic--diagonal.cic--img-right .cic-copy, [dir="rtl"] .cic--colorpanel.cic--img-right .cic-copy {
    position: relative; inline-size: auto; min-block-size: 0; clip-path: none; margin-inline: 0; padding: 26px 28px;
  }
  .cic--colorpanel .cic-copy { border-inline-start: 0; border-block-start: 4px solid var(--brand-primary); }
  .cic--diagonal .cic-btn, .cic--colorpanel .cic-btn,
  .cic--diagonal.cic--img-right .cic-btn, .cic--colorpanel.cic--img-right .cic-btn,
  [dir="rtl"] .cic--diagonal .cic-btn, [dir="rtl"] .cic--colorpanel .cic-btn,
  [dir="rtl"] .cic--diagonal.cic--img-right .cic-btn, [dir="rtl"] .cic--colorpanel.cic--img-right .cic-btn { margin-right: 0; margin-left: 0; }
  .cic--diagonal .cic-img, .cic--colorpanel .cic-img,
  .cic--diagonal.cic--img-right .cic-img, .cic--colorpanel.cic--img-right .cic-img { object-position: center; }
}


/* ════════════════════════════════════════════════════════════════════
   Casino Gallery block (v9.30.0)
   Optional featured image pinned to the inline-start on desktop with the
   remaining cards scrolling in a rail that slides UNDER it; on mobile the
   featured sits on top and the cards scroll below normally. With no featured
   image every image is an equal card in a plain horizontal-scroll carousel.
   Mouse drag-to-scroll on the rail; click any image to open the lightbox.
   ════════════════════════════════════════════════════════════════════ */
.casino-gallery { position: relative; margin-block: var(--sp-8); --feat-w: 36%; }

/* Shared card + image + glass caption */
.casino-gallery .gal-zoom {
    position: relative; overflow: hidden; border-radius: var(--r-md);
    box-shadow: var(--shadow-sm); cursor: zoom-in; background: var(--bg-surface-2);
    display: block; outline: none; margin: 0;
}
.casino-gallery .gal-zoom:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 55%, transparent); }
.casino-gallery .g-img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: 4 / 3; transition: transform .45s var(--ease);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .14);
    user-select: none; -webkit-user-drag: none;
}
.casino-gallery .gal-zoom:hover .g-img { transform: scale(1.06); }
.casino-gallery .g-cap {
    position: absolute; inset-inline: 8px; bottom: 8px; z-index: 2;
    padding: 7px 11px; border-radius: var(--r-md); color: #fff;
    font-size: 12.5px; font-weight: 600;
    background: rgba(15, 18, 26, .42);
    backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .16);
}

/* Drag-scroll rail */
.casino-gallery .gal-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: stretch; }
.casino-gallery .drag-scroll { cursor: grab; user-select: none; }
.casino-gallery .drag-scroll .gal-zoom { cursor: inherit; }
.casino-gallery .drag-scroll.is-dragging { cursor: grabbing; }
.casino-gallery .drag-scroll.is-dragging .g-img { transform: none !important; }
.casino-gallery .gal-rail::-webkit-scrollbar { height: 8px; }
.casino-gallery .gal-rail::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
.casino-gallery .gal-rail::-webkit-scrollbar-track { background: transparent; }

/* Featured pinned inline-start; rail slides under it */
.casino-gallery.has-featured .gal-rail { padding-inline-start: calc(var(--feat-w) + 18px); }
.casino-gallery.has-featured .gal-rail .gal-zoom { flex: 0 0 260px; height: 268px; width: 260px; }
.casino-gallery.has-featured .gal-rail .gal-zoom .g-img { height: 100%; width: 100%; object-fit: cover; aspect-ratio: auto; }
.casino-gallery.has-featured .gal-featured {
    position: absolute; inset-inline-start: 0; top: 0; height: 268px; width: var(--feat-w);
    z-index: 5; box-shadow: 14px 0 30px -8px rgba(0, 0, 0, .6), var(--shadow-md);
}
.casino-gallery.has-featured .gal-featured .g-img { height: 100%; aspect-ratio: auto; }
.casino-gallery.has-featured .gal-featured .g-cap { inset-inline: 10px; bottom: 10px; padding: 9px 13px; font-size: 13.5px; font-weight: 700; }
/* RTL: the featured's depth shadow falls on the rail (inline-end) side */
[dir="rtl"] .casino-gallery.has-featured .gal-featured { box-shadow: -14px 0 30px -8px rgba(0, 0, 0, .6), var(--shadow-md); }

/* No featured: plain horizontal-scroll carousel of equal cards */
.casino-gallery.no-featured .gal-rail .gal-zoom { flex: 0 0 clamp(220px, 32%, 280px); }

@media (max-width: 700px) {
    .casino-gallery.has-featured { display: flex; flex-direction: column; }
    .casino-gallery.has-featured .gal-featured { position: relative; width: auto; height: auto; box-shadow: var(--shadow-md); margin-bottom: 12px; }
    .casino-gallery.has-featured .gal-featured .g-img { height: auto; aspect-ratio: 16 / 10; }
    .casino-gallery.has-featured .gal-rail { padding-inline-start: 0; }
    .casino-gallery.has-featured .gal-rail .gal-zoom { height: auto; flex: 0 0 46%; }
    .casino-gallery.has-featured .gal-rail .gal-zoom .g-img { height: auto; aspect-ratio: 4 / 3; }
    .casino-gallery.no-featured .gal-rail .gal-zoom { flex: 0 0 70%; }
}

/* Lightbox (appended to <body> by the front-end script) */
.casino-glb {
    position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 24px;
    background: rgba(0, 0, 0, .85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
[data-theme="light"] .casino-glb { background: rgba(15, 23, 42, .6); }
.casino-glb.is-open { opacity: 1; visibility: visible; }
.casino-glb-stage { position: relative; width: 100%; max-width: min(94vw, 1080px); display: flex; flex-direction: column; align-items: center; }
.casino-glb-img {
    display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain;
    border-radius: var(--r-lg); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); background: var(--bg-surface-2);
    transform: scale(.97); transition: transform .25s var(--ease);
}
.casino-glb.is-open .casino-glb-img { transform: scale(1); }
.casino-glb-cap { margin-top: 12px; text-align: center; color: #fff; font-size: 14px; font-weight: 600; min-height: 18px; }
.casino-glb-btn {
    position: fixed; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-full);
    cursor: pointer; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff;
    transition: background .2s var(--ease);
}
.casino-glb-btn:hover { background: rgba(255, 255, 255, .22); }
.casino-glb-btn svg { width: 20px; height: 20px; }
.casino-glb-close { top: 18px; inset-inline-end: 18px; }
.casino-glb-prev { top: 50%; transform: translateY(-50%); inset-inline-start: 18px; }
.casino-glb-next { top: 50%; transform: translateY(-50%); inset-inline-end: 18px; }
/* In RTL the prev/next swap sides (logical props), so flip the chevrons too */
[dir="rtl"] .casino-glb-prev svg, [dir="rtl"] .casino-glb-next svg { transform: scaleX(-1); }
.casino-glb-count { position: fixed; top: 24px; inset-inline-start: 20px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; background: rgba(0, 0, 0, .4); padding: 5px 11px; border-radius: var(--r-full); }
@media (max-width: 560px) { .casino-glb-prev { inset-inline-start: 8px; } .casino-glb-next { inset-inline-end: 8px; } }
@media (prefers-reduced-motion: reduce) { .casino-glb, .casino-glb-img { transition: none; } }



/* ═══════════════════════════════════════════════════════════════════
   v9.32.0 EKLEMELERI : HARD PINS'ten once kalir
   ═══════════════════════════════════════════════════════════════════ */

/* ── m28: blok ici link kimligi ── */
.cx-link { color: var(--brand-primary); }
.cx-link:hover, .cx-link:focus-visible { text-decoration: underline; }
.cic--colorpanel .cx-link { color: var(--cc-green-2); }

/* ── m2: akis govdesi tik listesi (cic-feat gorsel dili, tek global kural) ── */
.cx-il { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.cx-il li { position: relative; padding-inline-start: 26px; font-size: inherit; color: inherit; line-height: 1.6; }
.cx-il li::before { content: "\2713"; position: absolute; inset-inline-start: 0; top: 0; font-weight: 800; color: var(--cc-green-2); }

/* m2: akis govdesi ic ritmi (tum cx-flow sarmallari icin tek kural) */
.cx-flow > p { margin: 0 0 12px; }
.cx-flow > p:last-child, .cx-flow > .cx-il:last-child { margin-bottom: 0; }

/* ── m30: Browse hedefi capasi ── */
#casino-list { scroll-margin-top: calc(var(--header-height-actual, var(--header-height)) + 12px); }

/* ── m27: drawer parent 50/50 ── */
.mobile-drawer .menu-item-has-children > .drw-row { display: flex; align-items: stretch; }
.mobile-drawer .menu-item-has-children > .drw-row > a { flex: 1 1 50%; min-inline-size: 0; }
.drw-sub-btn {
    flex: 1 1 50%;
    display: flex; align-items: center; justify-content: flex-end;
    padding-inline-end: 4px;
    border-inline-start: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    color: var(--text-muted);
    background: none; border-block: 0; border-inline-end: 0; cursor: pointer;
}
.drw-sub-btn svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.mobile-drawer .menu-item-has-children.is-open > .drw-row .drw-sub-btn svg { transform: rotate(180deg); }
[dir="rtl"] .drw-sub-btn svg { transform: scaleX(-1); }
[dir="rtl"] .mobile-drawer .menu-item-has-children.is-open > .drw-row .drw-sub-btn svg { transform: scaleX(-1) rotate(180deg); }

/* ── m18-B: bonus kodu chip'i (kart + review hero + popup) ── */
.bn-code {
    display: inline-flex; align-items: center; gap: 7px;
    margin-block-start: 8px;
    padding: 5px 10px;
    border: 1.5px dashed color-mix(in srgb, var(--cc-gold) 55%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--cc-gold) 8%, transparent);
    font-size: 11px; font-weight: 700; color: var(--text-secondary);
    cursor: pointer; user-select: none;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.bn-code:hover { border-color: var(--cc-gold); background: color-mix(in srgb, var(--cc-gold) 14%, transparent); }
.bn-code .bn-code-k { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--cc-gold) 80%, var(--text-primary)); }
.bn-code .bn-code-v { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; }
.bn-code .bn-code-ic { font-size: 12px; opacity: .8; }
.bn-code.is-copied { border-style: solid; border-color: var(--cc-green-2); background: color-mix(in srgb, var(--cc-green-2) 12%, transparent); }
.bn-code.is-copied .bn-code-ic { color: var(--cc-green-2); }

/* ── m18-B revize + sidebar CTA uyumu ──
   Review sidebar'daki "Go to Casino" butonu hero butonuyla ayni kimlige
   gecer: sari zemin, siyah yazi, lift hover. Marka-rengi inline stili
   sablondan kaldirildi; kural yalniz sidebar kapsaminda gecerlidir. */
.review-sidebar .btn.btn-primary {
    background: var(--cc-gold);
    color: var(--cc-cta-ink);
    border: 0;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.review-sidebar .btn.btn-primary:hover,
.review-sidebar .btn.btn-primary:focus-visible {
    background: var(--cc-gold);
    color: var(--cc-cta-ink);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.review-sidebar a.btn.btn-primary,
.review-sidebar a.btn.btn-primary:visited,
.review-sidebar a.btn.btn-primary:hover { color: var(--cc-cta-ink); text-decoration: none; }

/* ── m32b: mega menu (M3) ── */
.header-nav { position: relative; }
.header-nav-list > li.has-mega { position: static; }
.header-nav-list > li.has-mega > .sub-menu.sub-mega {
    inset-inline: 0; margin-inline: auto;
    inline-size: min(980px, calc(100% - 32px));
    padding: 20px 22px 14px;
}
.sub-mega .mm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: start; }
.sub-mega.no-featured .mm-grid { grid-template-columns: minmax(0, 1fr); }
.sub-mega .mm-cols { columns: 3; column-gap: 22px; margin: 0; padding: 0; list-style: none; }
.sub-mega .mm-cols > li { break-inside: avoid; margin: 0 0 4px; }
.sub-mega .mm-cols a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 9px; border-radius: 8px;
    font-size: 13px; color: var(--text-secondary);
}
.sub-mega .mm-cols a:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.sub-mega .mm-star { font-size: 11px; font-weight: 800; color: var(--cc-gold); white-space: nowrap; }
.sub-menu .mm-featured {
    /* v9.32 F4 "Altin Cerceve": ince altin-yesil gradyan sinir (2px, border-box
       gradyan teknigi), ortali kompozisyon. Casino ve slot ayni kabi kullanir. */
    position: relative; text-align: center;
    border: 2px solid transparent;
    border-radius: 12px; padding: 14px;
    background:
        linear-gradient(color-mix(in srgb, var(--cc-gold) 7%, var(--bg-surface-1)), color-mix(in srgb, var(--cc-gold) 7%, var(--bg-surface-1))) padding-box,
        linear-gradient(135deg, var(--cc-gold), color-mix(in srgb, var(--cc-gold) 25%, var(--border)) 45%, var(--cc-green-2)) border-box;
}
.sub-menu .mm-featured .mf-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--cc-gold) 80%, var(--text-primary)); margin-bottom: 5px; }
.sub-menu .mm-featured .mf-title { font-size: 14px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.sub-menu .mm-featured .mf-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 9px; }
.sub-menu .mm-featured a.mf-cta {
    display: inline-flex; inline-size: 100%; justify-content: center;
    padding: 8px 12px; border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--cc-green-2) 55%, transparent);
    font-size: 11px; font-weight: 800; color: var(--cc-green-2);
}
.sub-mega .mm-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-block-start: 14px; padding-block-start: 11px;
    border-block-start: 1px solid var(--border);
    font-size: 11.5px; color: var(--text-dim);
}
.sub-mega .mm-bar a { color: var(--cc-green-2); font-weight: 700; }
@media (max-width: 900px) { .sub-mega { display: none; } }
/* Drawer kuyruk satiri (mega parentin mobil hali) */
.mobile-drawer .drw-hide { display: none; }
.drw-more a { font-size: 12.5px; font-weight: 700; color: var(--cc-green-2) !important; }

/* ── v9.32: TEK featured kart (mega panel + standart dropdown ayni kart) ──
   Kapsam .sub-menu: hem .sub-mega hem .sub-X bu siniftan gectigi icin ayni
   F4 kart her iki baglamda da ayni pikselle cizilir. Logo seffaf zeminde
   contain (rh2-logo ile senkron), puan satiri altin yildizla. */
.sub-menu .mm-featured .mf-logo {
    inline-size: 96px; block-size: 46px;
    margin-block-end: 9px; margin-inline: auto;
    border-radius: 9px;
    display: grid; place-items: center;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.sub-menu .mm-featured .mf-logo img { max-inline-size: 82%; max-block-size: 74%; object-fit: contain; }
.sub-menu .mm-featured .mf-rate {
    display: inline-flex; align-items: baseline; gap: 3px;
    font-size: 12px; font-weight: 800; color: var(--cc-gold);
    margin-block-end: 6px;
}
.sub-menu .mm-featured .mf-rate small { font-weight: 700; color: var(--text-muted); font-size: 10px; }

/* SF4 "Bilet Satirlari": slot tipinde dolu stat alanlari satir olur. */
.sub-menu .mm-featured .mf-rows { margin: 0 0 10px; padding: 0; list-style: none; text-align: start; }
.sub-menu .mm-featured .mf-rows li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 2px; font-size: 10.5px; border-bottom: 1px dashed color-mix(in srgb, var(--border) 80%, transparent); }
.sub-menu .mm-featured .mf-rows li:last-child { border-bottom: 0; }
.sub-menu .mm-featured .mf-rows i { font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 9px; color: var(--text-dim); align-self: center; }
.sub-menu .mm-featured .mf-rows b { font-weight: 800; color: var(--text-secondary); }
.sub-menu .mm-featured .mf-rows b.gold { color: var(--cc-gold); }

/* ── v9.32: mega icinde 2. seviye INLINE grup (yan flyout kapali) ──
   Kok neden: torun flyout kurali (.sub-menu .sub-menu, yana acilir) mega
   icindeki cocuklu ogelere de uygulanip featured kartin ustune biniyordu.
   Mega'da alt liste ebeveyninin altinda HER ZAMAN gorunur, girintili grup
   olarak basilir; ortusme fiziken imkansiz, link kaybi yok. */
.sub-mega .mm-cols .sub-menu { position: static; inset: auto; min-width: 0; margin: 2px 0 6px; padding: 0; display: block; opacity: 1; visibility: visible; transform: none; transition: none; pointer-events: auto; background: transparent; border: 0; box-shadow: none; }
.sub-mega .mm-cols .sub-menu::before, .sub-mega .mm-cols .sub-menu::after { content: none; }
.sub-mega .mm-cols .sub-menu a { padding-block: 5px; padding-inline: 18px 9px; font-size: 12px; color: var(--text-muted); }

/* ── v9.32: tablo tasmasi KOK cozum ──
   Stil sinifi olsun olmasin HER core tablo figure'u yatay kaydirma kabidir;
   tablo icerigi sayfayi genisletemez. Stilli varyantlarin kendi overflow
   kurallari korunur, bu kural onlarla cakismaz. Editor onizlemesi ayni
   dosyayi yukledigi icin otomatik kapsanir. */
figure.wp-block-table { max-inline-size: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
/* KOK (kullanicinin inspect tespiti): core block-library hizali tablolara
   display:table basar; table kutulari overflow'u YOK SAYAR ve min-content
   altina inemez, figure sayfayi genisletir. Blok kutusu + fit-content ayni
   shrink-wrap ve hizalama davranisini korur (dar tablo ortalanir/floatlanir)
   ama max-inline-size ve overflow yeniden calisir; genis tablo kayar. */
/* Ana sayfa baglami: front-page icerigi tam genislik, dolgusuz bir
   entry-content sarmalinda akar (hp bloklari kendi hp-wrap'ini getirir).
   Oraya konan tablo bloklari viewport kenarina yapismasin diye hp-wrap ile
   ayni 22px oluk + container siniri verilir ve kutu ortalanir. */
.homepage.entry-content figure.wp-block-table,
.homepage.entry-content > .cap-tscroll,
.homepage.entry-content > table {
    margin-inline: auto;
    max-inline-size: min(100% - 44px, var(--container, 1320px));
}
figure.wp-block-table:is(.aligncenter, .alignleft, .alignright) {
    display: block;
    inline-size: fit-content;
    max-inline-size: 100%;
}
/* Ortalanin core'a bagimliligi kalmasin: aligncenter kendi margin'ini tasir. */
figure.wp-block-table.aligncenter { margin-inline: auto; }
/* Icerik filtresinin sardigi kap: yazim yolu ne olursa olsun (blok, HTML
   yapistirma, klasik) her tablo bu kapta kayar. Sinifi dogrudan <table>
   uzerinde tasiyan stilli tablolara figure'deki 600px garantisi burada
   verilir; kap kendisi bosluk tasimasin diye margin tabloda kalir. */
.cap-tscroll { max-inline-size: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.cap-tscroll > table:is(.casino-table-zebra, .casino-table-grid, .casino-table-glass, .casino-table-rail) { min-width: 600px; }
/* SAVUNMA KATMANI: sarmalayici HIC olusmasa bile (onbellek, filtre disi
   render yolu) tablo sayfayi genisletemesin. display:block tabloyu kendi
   kaydirma kabina cevirir; stil siniflari ve icerik alanlarinin dogrudan
   cocugu olan ciplak tablolar kapsanir, tema bilesen tablolari etkilenmez. */
table:is(.casino-table-zebra, .casino-table-grid, .casino-table-glass, .casino-table-rail),
.entry-content > table, .post-content > table {
    display: block; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}

/* ── m33: REVIEW HERO v2 : M1 iskeleti + R2 gradyan cerceve + B3 bant ── */
.rh2 {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-block-end: var(--sp-8);
}
.rh2::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(420px 200px at 0% 0%, color-mix(in srgb, var(--cc-gold) 14%, transparent), transparent 65%),
        radial-gradient(420px 200px at 100% 0%, color-mix(in srgb, var(--cc-sport) 18%, transparent), transparent 65%);
}
[dir="rtl"] .rh2::before {
    background:
        radial-gradient(420px 200px at 100% 0%, color-mix(in srgb, var(--cc-gold) 14%, transparent), transparent 65%),
        radial-gradient(420px 200px at 0% 0%, color-mix(in srgb, var(--cc-sport) 18%, transparent), transparent 65%);
}
.rh2-top {
    position: relative; z-index: 1;
    display: grid; align-items: center;
    grid-template-columns: auto minmax(150px, 1fr) auto;
    gap: 20px;
    padding: 55px 26px;
}
.rh2-logo {
    inline-size: 170px; block-size: 90px;
    border-radius: var(--r-lg);
    display: grid; place-items: center;
    overflow: hidden;
    font-weight: 900; font-size: 15px; color: #0f172a;
    letter-spacing: .04em;
    box-shadow: var(--shadow-sm);
}
.rh2-logo img { max-inline-size: 86%; max-block-size: 80%; object-fit: contain; }
.rh2-info { min-inline-size: 0; }
.rh2-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 7px; }
.rh2-name { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--text-primary); margin: 0; }

/* Rozetler: mockup degerleri rh2 kapsaminda sabitlenir (eski hero tanimlari
   ne olursa olsun yeni hero birebir m1-b3-final gorunumunde kalir). */
.rh2 .rh-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 9px; border-radius: var(--r-full);
    border: 1px solid var(--border-strong);
    color: var(--text-muted); background: var(--bg-surface-2);
}
.rh2 .rh-badge-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--cc-green-2); }
.rh2 .rh-badge-trust {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
    color: color-mix(in srgb, var(--brand-primary) 55%, #fff 45%);
}
[data-theme="light"] .rh2 .rh-badge-trust { color: var(--cc-green-2); }

/* M1 BILET: iki kocan tek govdede; arada kesikli dikis + perfore centikler.
   Sport kimligi --cc-sport token'indan gelir (mockup'taki gercek teal;
   acik modda koyu ton). */
.rh-ticket {
    display: flex;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    background: var(--bg-surface-2);
    min-inline-size: 0;
}
.tk {
    display: flex; align-items: center; gap: 8px;
    padding: 15px 20px;
    min-inline-size: 0;
}
.tk--casino {
    background: color-mix(in srgb, var(--cc-gold) 10%, transparent);
    border-start-start-radius: 13px; border-end-start-radius: 13px;
}
/* Sport kocani yoksa (bag yok / popup casino) tek kocan tam yuvarlanir */
.rh-ticket .tk--casino:last-child { border-start-end-radius: 13px; border-end-end-radius: 13px; }
.tk--sport {
    position: relative;
    background: color-mix(in srgb, var(--cc-sport) 12%, transparent);
    border-start-end-radius: 13px; border-end-end-radius: 13px;
    border-inline-start: 2px dashed color-mix(in srgb, var(--text-dim) 55%, transparent);
}
.tk--sport::before, .tk--sport::after {
    content: ''; position: absolute;
    inset-inline-start: -8px;
    inline-size: 14px; block-size: 14px; border-radius: 50%;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-strong);
}
.tk--sport::before { inset-block-start: -8px; }
.tk--sport::after  { inset-block-end: -8px; }
.tk .o-ic { font-size: 20px; flex-shrink: 0; }
/* Buton-yazi cakismasina kok cozum: metin esner ve kirpilir, buton her
   kocanda satirin sonuna sabitlenir, asla ustune binmez. */
.tk .o-txt { flex: 1; min-inline-size: 0; }
.tk .o-amt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk .o-btn { flex-shrink: 0; padding: 10px 18px; font-size: 13px; margin-inline-start: 5px; }

.o-btn {
    display: inline-block;
    font-size: 12.5px; font-weight: 800;
    padding: 9px 16px; border-radius: 10px;
    border: 0; cursor: pointer; font-family: inherit;
    text-align: center; white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.o-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
a.o-btn, a.o-btn:visited, a.o-btn:hover, a.o-btn:focus { text-decoration: none; }
.o-btn--gold { background: var(--cc-gold); color: var(--cc-cta-ink); }
a.o-btn--gold, a.o-btn--gold:visited, a.o-btn--gold:hover { color: var(--cc-cta-ink); }
button.o-btn--gold { color: var(--cc-cta-ink); }
.o-btn--teal { background: var(--cc-sport); color: #fff; }
a.o-btn--teal, a.o-btn--teal:visited, a.o-btn--teal:hover { color: #fff; }

.o-lbl {
    display: block;
    font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    margin-block-end: 2px;
}
.o-lbl--casino { color: color-mix(in srgb, var(--cc-gold) 80%, var(--text-primary)); }
.o-lbl--sport  { color: color-mix(in srgb, var(--cc-sport) 70%, var(--text-primary)); }
[data-theme="light"] .o-lbl--sport { color: var(--cc-sport); }
.o-amt { display: block; font-size: 15px; font-weight: 800; line-height: 1.15; color: var(--text-primary); }

/* Rating pill (banda tasinan kucuk hal) */
.rh2-rate {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px;
    border-radius: var(--r-full);
    border: 1px solid color-mix(in srgb, var(--cc-gold) 45%, transparent);
    background: color-mix(in srgb, var(--cc-gold) 12%, transparent);
    font-weight: 800; font-size: 14px; color: var(--text-primary);
}
.rh2-rate .st { color: var(--cc-gold); font-size: 13px; }
.rh2-rate small { font-weight: 700; color: var(--text-muted); font-size: 11px; }

/* Sport ozellik chip'leri (kapali: soluk "No X") */
.rh2-feat {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 10.5px; font-weight: 700;
    padding: 4px 9px; border-radius: var(--r-full);
    border: 1px solid color-mix(in srgb, var(--cc-sport) 48%, transparent);
    background: color-mix(in srgb, var(--bg-surface-1) 55%, transparent);
    color: color-mix(in srgb, var(--cc-sport) 62%, var(--text-primary));
}
.rh2-feat .fi { font-weight: 900; color: var(--cc-sport); }
[data-theme="light"] .rh2-feat { color: var(--cc-sport); }
.rh2-feat.off { border-color: var(--border-strong); color: var(--text-dim); }
.rh2-feat.off .fi { color: var(--text-dim); }

/* B3: segment hucreli bant */
.rh2-stc { display: grid; gap: 2px; justify-items: center; text-align: center; }
.rh2-stc .ic { font-size: 16px; line-height: 1; margin-block-end: 2px; }
.rh2-stc .k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.rh2-stc .v { font-size: 13.5px; font-weight: 800; color: var(--text-secondary); }
.rh2-band {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: auto repeat(4, minmax(0, 1fr)) minmax(0, 1.9fr);
    gap: 10px;
    padding: 12px 26px;
    border-block-start: 1px solid var(--border);
    background: var(--bg-base);
}
.rh2-band.no-sport { grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
.rh2-cell {
    display: grid; place-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg-surface-1);
    min-block-size: 48px;
}
.rh2-cell--rate { border-color: color-mix(in srgb, var(--cc-gold) 40%, transparent); background: color-mix(in srgb, var(--cc-gold) 7%, var(--bg-surface-1)); }
.rh2-cell--rate .rh2-rate { border: 0; background: transparent; padding: 0; }
.rh2-cell--sport {
    border-color: color-mix(in srgb, var(--cc-sport) 42%, transparent);
    background: color-mix(in srgb, var(--cc-sport) 9%, var(--bg-surface-1));
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
    padding: 8px 12px;
}

@media (max-width: 940px) {
    .rh2-top { grid-template-columns: auto 1fr; }
    .rh-ticket { grid-column: 1 / -1; }
    .tk { flex: 1; }
    .tk .o-amt { white-space: normal; }
}
@media (max-width: 620px) {
    .rh2-top { padding: 55px 18px; gap: 14px 16px; display: flex; flex-direction: column; }
    .rh2-logo { inline-size: 200px; block-size: 70px; font-size: 13px; border-radius: 10px; }
    .rh2-name { font-size: 25px; text-align: center; }
    .rh2-badges { margin-block-end: 15px; }
    .o-btn { padding: 10px 16px; }
    .tk .o-btn { padding: 10px 17px; }

    /* Bilet dikey: dikis yataylasir, centikler yanlara tasinir; butonlar
       iki kocanda da satir sonunda ayni hizada kalir. */
    .rh-ticket { flex-direction: column; }
    .tk--casino { border-radius: 0; border-start-start-radius: 13px; border-start-end-radius: 13px; }
    .rh-ticket .tk--casino:last-child { border-radius: 13px; }
    .tk--sport {
        border-radius: 0; border-end-start-radius: 13px; border-end-end-radius: 13px;
        border-inline-start: 0;
        border-block-start: 2px dashed color-mix(in srgb, var(--text-dim) 55%, transparent);
    }
    .tk--sport::before, .tk--sport::after { inset-block-start: -8px; inset-block-end: auto; }
    .tk--sport::before { inset-inline-start: -8px; }
    .tk--sport::after  { inset-inline-start: auto; inset-inline-end: -8px; }
    .rh2-band, .rh2-band.no-sport { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px 18px; } /* no-sport (0,2,0) mobil kurali ezmesin */
    .rh2-cell--rate { grid-column: 1 / -1; }
    .rh2-cell--sport { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .rh2-cell--sport .rh2-feat { inline-size: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CASINO CARD LINK HARD PINS — must stay LAST in this file.
   Content-area link rules (.post-content a, .entry-content a, a:hover,
   :visited, :focus, plugin styles) must never restyle links inside cards.
   <a> and <button> CTAs are pinned identically in both themes.
   ═══════════════════════════════════════════════════════════════════════ */
.casino-card-wrap a,
.casino-card-wrap a:hover,
.casino-card-wrap a:visited,
.casino-card-wrap a:focus { text-decoration: none; }

.casino-card-wrap a.cc-name,
.casino-card-wrap a.cc-name:visited { color: var(--cc-ink); }
.casino-card-wrap a.cc-name:hover,
.casino-card-wrap a.cc-name:focus { color: var(--cc-green-2); }
[data-theme="light"] .casino-card-wrap a.cc-name,
[data-theme="light"] .casino-card-wrap a.cc-name:visited { color: var(--cc-ink); }
[data-theme="light"] .casino-card-wrap a.cc-name:hover,
[data-theme="light"] .casino-card-wrap a.cc-name:focus { color: var(--cc-green-2); }

.casino-card-wrap a.ctaB,
.casino-card-wrap a.ctaB:link,
.casino-card-wrap a.ctaB:visited,
.casino-card-wrap a.ctaB:hover,
.casino-card-wrap a.ctaB:focus,
.casino-card-wrap a.ctaB:active,
.casino-card-wrap button.ctaB,
.casino-card-wrap button.ctaB:hover,
.casino-card-wrap button.ctaB:focus,
.casino-card-wrap button.ctaB:active { color: var(--cc-cta-ink); text-decoration: none; }
.casino-card-wrap .ctaB .ic { stroke: var(--cc-cta-ink); }
[data-theme="light"] .casino-card-wrap a.ctaB,
[data-theme="light"] .casino-card-wrap a.ctaB:link,
[data-theme="light"] .casino-card-wrap a.ctaB:visited,
[data-theme="light"] .casino-card-wrap a.ctaB:hover,
[data-theme="light"] .casino-card-wrap a.ctaB:focus,
[data-theme="light"] .casino-card-wrap a.ctaB:active,
[data-theme="light"] .casino-card-wrap button.ctaB,
[data-theme="light"] .casino-card-wrap button.ctaB:hover,
[data-theme="light"] .casino-card-wrap button.ctaB:focus,
[data-theme="light"] .casino-card-wrap button.ctaB:active { color: var(--cc-cta-ink); }
[data-theme="light"] .casino-card-wrap .ctaB .ic { stroke: var(--cc-cta-ink); }

.casino-card-wrap a.detail-review-link,
.casino-card-wrap a.detail-review-link:visited { color: var(--cc-green-2); }
[data-theme="light"] .casino-card-wrap a.detail-review-link,
[data-theme="light"] .casino-card-wrap a.detail-review-link:visited { color: var(--cc-green-2); }