/* =============================================================
   MD88 — design tokens
   Brand palette (Version 1.0):
   - Foundation (neutrals): depth & contrast — the page, cards, borders.
   - Primary beam: actions, highlights and hero gradients —
     Beam 900 #001F3F dark beam edge · 800 #0D356E deep brand blue ·
     500 #007EFF core CTA · 300 #47A9FF light beam / hover ·
     100 #AEE2FF accent glow / gradient highlight.
   ============================================================= */
:root {
    /* Foundation: neutral 100 (page), 80 (alternate sections), and the
       "cards, modals, dropdowns" surface between neutral 80 and 70. */
    --bg-primary:      #0A0E18;
    --bg-surface:      #111827;
    --bg-surface-2:    #141B2D;
    --border-subtle:   rgba(255, 255, 255, 0.08);
    /* --bg-surface as a bare "r, g, b" triplet, for rgba(var(--bg-surface-rgb), <alpha>)
       fills — see .table-comparison__item. Same reasoning as --primary-rgb/--secondary-rgb. */
    --bg-surface-rgb:  17, 24, 39;
    /* --bg-primary as a triplet, for the dark shades laid over images. */
    --bg-primary-rgb:  10, 14, 24;

    /* Primary beam blues. -400 light beam, -500 core CTA, -600 a pressed
       shade between core and deep, -900 deep brand blue; -950 the dark
       beam edge and -100 the accent glow. */
    --beam-100:        #AEE2FF;
    --primary-400:     #47A9FF;
    --primary-500:     #007EFF;
    --primary-600:     #0066D6;
    --primary-900:     #0D356E;
    --beam-900:        #001F3F;
    /* -500 shade as a bare "r, g, b" triplet, for rgba(var(--primary-rgb), <alpha>)
       glows — see .section--gradient. Same reasoning as --secondary-rgb below. */
    --primary-rgb:     0, 126, 255;

    /* Brand card edge: a 1px border that runs accent glow → light beam →
       core blue → deep brand blue and brightens again at the far corner,
       like light catching the edge. See "Brand gradient edges" at the end. */
    --edge-gradient: linear-gradient(145deg,
        var(--beam-100) 0%,
        var(--primary-400) 14%,
        rgba(0, 126, 255, 0.55) 34%,
        rgba(13, 53, 110, 0.7) 58%,
        rgba(0, 126, 255, 0.55) 82%,
        var(--primary-400) 100%);

    /* Secondary — drop shadows, hover outlines/borders, hover text color.
       --secondary-rgb is the -500 shade as a bare "r, g, b" triplet, for
       rgba(var(--secondary-rgb), <alpha>) shadows — see .btn--primary:hover.
       Kept a separate axis from --primary-* so hover/focus states read as
       a distinct accent rather than a lighter/darker copy of the button
       color. Both are admin-overridable independently — see ThemeColor. */
    /* Brand: the light end of the beam — light beam (hover) and accent
       glow — so hovers and focus rings brighten instead of changing hue. */
    --secondary-500:   #47A9FF;
    --secondary-400:   #AEE2FF;
    --secondary-600:   #007EFF;
    --secondary-900:   #0D356E;
    --secondary-rgb:   71, 169, 255;

    /* Small text/title ("eyebrow") shown above section headings and the
       page H1 — admin-overridable independently via Edit branding, same
       pattern as --secondary-*. Defaults to the secondary-400 accent glow.
       Section eyebrows alternate between this and --primary-400 based on
       position (odd/even) — see .section__eyebrow--accent/--primary and
       page-section.blade.php. */
    --small-text-color: var(--secondary-400);

    /* Alternate ("ghost") button background — admin-overridable via Edit
       branding. Defaults to fully transparent (outline-only style, the
       original look of .btn--ghost before this became configurable). */
    --btn-ghost-bg: transparent;

    /* Footer/navbar backgrounds — each independently admin-overridable via
       Edit branding (see layouts/app.blade.php). By default the footer is
       the page's own background (--bg-primary), so it doesn't read as a
       separate block; the navbar keeps its original hardcoded translucent
       black (paired with backdrop-filter: blur() — see .site-header). */
    --footer-bg: var(--bg-primary);
    --navbar-bg: var(--bg-primary);

    /* Foundation: neutral 0 (white), 40 and a dimmer 50. */
    --text-primary:    #FFFFFF;
    --text-secondary:  #9CA3AF;
    --text-muted:      #6B7280;
    /* White at 78% opacity — the specific "description"/"badge" text color
       used throughout the current typography spec (bullet/feature-grid/
       compact-feature-grid descriptions, footer trust badges). Kept as its
       own token, distinct from --text-secondary (a flat gray), rather than
       redefining --text-secondary itself — --text-secondary is still used
       verbatim in plenty of places this spec doesn't touch (footer links,
       classic table cells, etc.). */
    --text-white-78:   rgba(255, 255, 255, 0.78);

    --radius-md:       12px;
    --radius-lg:       12px;

    --container-max:   1600px;
    --container-narrow: 1600px;

    /* Brand fonts:
       - Barlow (primary) — titles, decorative section titles, labels;
         SemiBold 600 / Bold 700 / ExtraBold 800.
       - Inter (secondary) — body text, buttons, UI; Regular 400 /
         Medium 500 / SemiBold 600, plus Bold 700 (link card titles).
       The title tokens all point at Barlow; the names are kept so
       existing rules don't change. Loaded in layouts/app.blade.php. */
    --font-display: "Barlow", "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
    --font-heading: "Barlow", "Segoe UI", system-ui, sans-serif;
    --font-mono:    "Barlow", "Segoe UI", system-ui, sans-serif;
    --font-faq:     "Barlow", "Segoe UI", system-ui, sans-serif;
}

/* =============================================================
   Reset / base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Keyboard-focus outline — secondary color, so it reads as a distinct
   "you are here" ring rather than a copy of the primary button color. */
:focus-visible { outline: 2px solid var(--secondary-500); outline-offset: 2px; }

body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.2;
    margin: 0 0 0.6em;
    font-weight: 700;
}

h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); }
/* "Section title" typography spec for real <h2>s (legal pages). */
h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    letter-spacing: -2%;
    color: #fff;
}
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

/* Banner, table and FAQ section titles on landing pages — styled exactly
   like the h2 above but deliberately NOT heading elements: a landing
   page's whole heading hierarchy lives in its Content section (see
   page-section.blade.php), so nothing else competes with it. Declared
   before .section__heading so that class's own margin still applies. */
.section__title {
    display: block;
    margin: 0 0 0.6em;
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.46px;
    color: #fff;
}

/* "Description" typography spec — the default look for a rich-text
   paragraph (a section's intro_text, most commonly). Components with
   their own distinct description style (layered banner, FAQ
   answers, table-comparison items, footer text, etc.) override this with
   a more specific selector further down — see each one's own rule. */
p {
    color: #B2B2BD;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.02em;
    margin: 0 0 1em;
}
/* Titles, labels and captions that are <p>s but not body text: keep the
   proportional line height they had before the 28px default (a fixed
   28px would overlap the big titles and space out the small captions). */
.access-panel__card-title,
.access-panel__divider,
.access-panel__eyebrow,
.faq-panel__subtitle,
.game-list__empty,
.layered-banner__caption,
.legal-page__updated,
.promo-dialog__small,
.promo-list__title,
.site-footer__copyright,
.table-comparison__item-title,
.vip-breakdown__requirement,
.vip-breakdown__subtitle,
.vip-breakdown__tier,
.vip-breakdown__title,
.vip-row__name { line-height: 1.3; }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.container--narrow { max-width: var(--container-narrow); }
.container--narrow > p { max-width: 68ch; }

/* Mobile view — widen the content area from the desktop default (85%) to
   95% of the viewport once the screen is this narrow — 85% still leaves
   too little usable width on a small phone once the browser's own margin
   is applied (e.g. 85% of a 375px phone is ~319px); 95% keeps just a thin
   breathing margin on each side without wasting the small screen on
   empty space.
   Redefining the tokens here (rather than a one-off override on
   .container) means every consumer of --container-max/--container-narrow
   widens together with one change — .site-footer__inner reads the same
   tokens directly, without its own .container class. (.site-header__inner
   is the one exception: it has its own fixed 95% independent of these
   tokens, and its own separate 1024px breakpoint for the mobile nav —
   see the nav bar section further down. This 860px is specifically the
   general content-width breakpoint, not tied to the nav's.) */
@media (max-width: 860px) {
    :root {
        --container-max: 95%;
        --container-narrow: 95%;
    }
}

.breadcrumbs { margin-bottom: 1.5rem; }
.breadcrumbs__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}
.breadcrumbs__item { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumbs__item a { color: var(--text-secondary); }
.breadcrumbs__item a:hover { color: var(--secondary-400); }
.breadcrumbs__item [aria-current="page"] { color: var(--text-muted); }
.breadcrumbs__sep { color: var(--text-muted); }

/* Legal pages (Privacy Policy, Terms and Conditions, etc.) — see
   legal-page.blade.php and LegalPage::parsedContent(), which splits the
   admin's single rich-text field into an intro + one entry per <h2> at
   render time, so each becomes its own rounded box below — reference: a
   screenshot of another casino site's Privacy Policy page, same "each
   section is its own card" structure, re-themed to this site's own dark
   palette rather than that reference's light one (its exact colors were
   never meant to be copied, just the layout shape). */
.legal-page__header {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface) 65%, var(--bg-primary) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    margin-bottom: 1.5rem;
}
.legal-page__header h1 { margin-bottom: 0.75rem; }
.legal-page__header p { max-width: 640px; margin-left: auto; margin-right: auto; }

.legal-page__updated {
    display: inline-flex;
    padding: 0.4em 0.9em;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 1.5rem;
}

.legal-page__section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 1.5rem;
}
.legal-page__section:last-child { margin-bottom: 0; }
/* Scoped smaller than the sitewide 36px "Section title" h2 (see the base
   h2 rule above) — that size reads right for a whole page section, but
   is too large for a heading nested one level down, inside a card of
   its own, the way these are. */
.legal-page__section h2 { font-size: 24px; margin-bottom: 0.75rem; }

/* Legal pages' text follows the rest of the site (they're plain editor
   HTML, outside the section system): headings in Barlow Bold with the
   hero title's metal gradient — the title 40px like a hero, each section's
   heading 26px like a card title, then 22 / 18 / 16px — and body text in
   the section text style (Inter 15px, 150%, -2%, white at 80%). */
.legal-page__header h1,
.legal-page__section h2,
.legal-page__section h3,
.legal-page__section h4,
.legal-page__section h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 1.2em repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.legal-page__header h1 { font-size: 40px; letter-spacing: -0.02em; }
.legal-page__section h2 { font-size: 26px; }
.legal-page__section h3 { font-size: 22px; margin: 1.2em 0 0.5em; }
.legal-page__section h4 { font-size: 18px; margin: 1.1em 0 0.45em; }
.legal-page__section h5 { font-size: 16px; margin: 1em 0 0.4em; }
.legal-page__header p,
.legal-page__header li,
.legal-page__section p,
.legal-page__section li {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.8);
}
.legal-page__section ul,
.legal-page__section ol { margin: 0 0 1em; padding-left: 1.4em; }
.legal-page__section li + li { margin-top: 0.3em; }
.legal-page__header :is(strong, b),
.legal-page__section :is(strong, b) { font-weight: 700; color: #ffffff; }
.legal-page__header a,
.legal-page__section a { color: var(--primary-400); text-decoration: underline; }
.legal-page__header a:hover,
.legal-page__section a:hover { color: var(--secondary-400); }
.legal-page__section > :last-child { margin-bottom: 0; }

/* The document's own closing "Contact Us"-style section, when it has
   one (see the str_contains() check in legal-page.blade.php) — same
   tinted-gradient-over-dark-surface highlight already used for
   .table-comparison__item--primary, not a solid
   fill, so body text stays readable regardless of the admin's theme
   color pick. */
.legal-page__section--contact {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.05));
    border-color: var(--primary-500);
}

/* Spacing between page blocks (sections, the notice bar, the hero) — a
   tight, uniform gap, like competitor landing pages. Sections use it as a
   margin (neighbours' margins collapse, so any two sit exactly one gap
   apart); a section with its own background band (alt shade, gradient)
   also gets inner padding so its content doesn't touch the band's edges. */
:root { --section-gap: 20px; }
.section { margin: var(--section-gap) 0; }
.section--content { margin-top: 60px; }
.section--alt,
.section--gradient { padding: clamp(1.75rem, 4vw, 3rem) 0; }
.section--alt { background: #141829; }

/* Scroll reveal (app.js): a block below the first screen waits hidden
   (.reveal) and pops up — fading in, rising and settling from a slight
   shrink — once it scrolls into view (.is-revealed). */
.reveal {
    opacity: 0;
    transform: translateY(48px) scale(0.97);
}
.reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

/* Optional per-section "Gradient background" toggle (PageSection::has_gradient_bg)
   — blends the theme color (top-left glow), the secondary color (top-right
   glow), and the main background color from Edit branding (base fill) into one
   soft background. Takes priority over .section--alt: declared after it, same
   specificity (both single class), so when a section has both classes this
   wins on source order regardless of which comes first in the class attribute. */
.section--gradient {
    background:
        radial-gradient(70% 90% at 15% 15%, rgba(var(--primary-rgb), 0.22), transparent 70%),
        radial-gradient(70% 90% at 85% 15%, rgba(var(--secondary-rgb), 0.16), transparent 70%),
        var(--bg-surface);
}

.section__heading { text-align: left; margin-bottom: 2.2rem; }

/* Small text/title shown above a section heading — see the
   --small-text-color token above. .section__eyebrow--accent/--primary
   alternate per section (odd/even) — assigned in page-section.blade.php. */
.section__eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.61px;
    text-transform: uppercase;
    margin: 0 0 0.6em;
}
.section__eyebrow--accent { color: var(--small-text-color); }
.section__eyebrow--primary { color: var(--primary-400); }
/* No max-width of its own (was a flat 640px, unrelated to the content
   width tokens and never scaled with them) — now just fills the full
   width of whichever container it's in (.container/.container--narrow,
   driven by --container-max/--container-narrow), same as the rest of
   that section's content. */
.section__intro { margin: -1.2rem 0 2.2rem; }
/* Same fix as .section__intro above — was max-width: 640px; margin:
   2.2rem auto 0; text-align: center;, capped well below the actual
   content width and centered. Now fills its container and reads left,
   consistent with the rest of the section's content. */
.section__outro { margin: 2.2rem 0 0; color: var(--text-secondary); }

/* =============================================================
   Buttons
   ============================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.65em 1.4em;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn--lg { padding: 0.85em 1.9em; font-size: 1.05rem; }

/* Every button on the site shrinks (both font size and padding, which
   drives the pill's overall width) at very narrow phone widths — hero/
   section CTAs, closing-cta, footer, cookie banner, etc. .btn--lg gets
   its own smaller value too so it doesn't dwarf a regular .btn at this
   width; the two stay distinguishable but both read as compact here. Not
   scoped to specific button locations on purpose — this is every .btn
   sitewide. (The header's button group has its own, more specific
   sizing — see .site-header__buttons .btn — which wins over this.) */
@media (max-width: 425px) {
    .btn { font-size: 14px; padding: 0.55em 1.1em; }
    .btn--lg { font-size: 14px; padding: 0.6em 1.3em; }
}

/* Brand CTA: light beam → core CTA blue. */
.btn--primary {
    background: linear-gradient(90deg, #59E0FB 0%, #1364DC 100%);
    color: #ffffff;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--secondary-rgb), 0.35); }
.btn--ghost {
    background: var(--bg-surface-2);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}
.btn--ghost:hover { border-color: var(--secondary-500); color: var(--secondary-400); }

/* .btn--glow — attention-grabbing buttons: the hero buttons, slide buttons
   and sidebar highlight cards (.site-sidebar__feature, which sets up its
   own shine/breathe further down). Animates on its own, without any
   interaction:
   1. a light that travels around the border (::before — a conic-gradient
      ring, rotated via the registered --glow-angle property);
   2. on .btn--primary, a soft halo that "breathes" behind the button;
   3. on .btn--primary, a diagonal shine that sweeps across the face.
   Hover speeds the light up. The outline (.btn--ghost) button only gets
   the travelling light, so the main button stays the obvious one. All
   colours come from the theme (--primary-rgb). Browsers without
   @property support show the border light standing still. */
@property --glow-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.btn--glow { position: relative; isolation: isolate; }
.btn--glow::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 1;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--glow-angle),
        transparent 0deg,
        transparent 240deg,
        rgba(var(--primary-rgb), 0.9) 300deg,
        #ffffff 335deg,
        rgba(var(--primary-rgb), 0.9) 350deg,
        transparent 360deg
    );
    /* Keep only the 2px ring: the padding box minus the content box. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: btn-glow-orbit 3s linear infinite;
}
.btn--glow:hover::before { animation-duration: 1.2s; }
/* A second hero button orbits half a turn behind the first, so the two
   don't flash in lockstep. */
.btn--glow + .btn--glow::before { animation-delay: -1.5s; }
.btn--ghost.btn--glow::before { opacity: 0.75; }

.btn--primary.btn--glow {
    background:
        linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.5) 48%, transparent 60%) no-repeat,
        linear-gradient(90deg, #59E0FB 0%, #1364DC 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 150% 0, 0 0;
    animation:
        btn-glow-breathe 2.4s ease-in-out infinite,
        btn-glow-shine 4s ease-in-out infinite;
}
.btn--primary.btn--glow:hover { transform: translateY(-2px); }

@keyframes btn-glow-orbit {
    to { --glow-angle: 360deg; }
}
@keyframes btn-glow-breathe {
    0%, 100% { box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3), 0 0 0 0 rgba(var(--primary-rgb), 0.35); }
    50% { box-shadow: 0 0 26px rgba(var(--primary-rgb), 0.65), 0 0 0 5px rgba(var(--primary-rgb), 0); }
}
/* Sweeps left→right in the last part of each cycle, then rests. */
@keyframes btn-glow-shine {
    0%, 55% { background-position: 150% 0, 0 0; }
    85%, 100% { background-position: -60% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .btn--glow::before,
    .btn--primary.btn--glow { animation: none; }
    .btn--primary.btn--glow { box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.5); }
}

/* =============================================================
   Header / navbar
   Layout: [sidebar toggle][logo] ........ [button group][language]
   The site's links don't sit in the bar itself — they live in the
   slide-out .site-sidebar opened by the toggle. Button-styled nav items
   (e.g. Login/Register) make up the header's button group. The layout is
   the same at every width; narrow phones only tighten sizes/spacing.
   See navbar.blade.php.
   ============================================================= */
:root {
    /* The bar's fixed height (the 1px bottom border is extra) — the
       docked sidebar starts right below it. --sidebar-w is the docked
       sidebar's width, which the page content shifts over by. */
    --header-h: 60px;
    --sidebar-w: 300px;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--navbar-bg);
    backdrop-filter: blur(10px);
    /* border-bottom: 1px solid var(--border-subtle); */
}
.site-header__inner {
    margin: 0 auto;
    min-height: var(--header-h);
    padding: 0 clamp(0.75rem, 2vw, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.site-header__start,
.site-header__end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.site-header__end { gap: 1rem; }

.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; display: inline-flex; align-items: center; }
.brand__text { color: var(--text-primary); }
.brand__logo { width: 169.5px; height: 35.3px; display: block; }
/* Header/sidebar logo: fixed height, natural width, so any uploaded logo
   keeps its proportions. The footer keeps .brand__logo's own size above. */
.site-header .brand,
.site-sidebar .brand { font-size: 1.5rem; }
.site-header .brand__logo,
.site-sidebar .brand__logo { width: auto; height: 28px; max-width: 160px; object-fit: contain; }

/* Square icon button — the sidebar open/close toggles. */
.site-header__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.site-header__icon-btn:hover { color: var(--secondary-400); border-color: var(--secondary-500); }

/* Button group — header-sized .btn: rounded rectangles rather than the
   pill shape used elsewhere on the site. More specific than the ≤425px
   sitewide .btn shrink, so the ≤480px rule below is what applies here. */
.site-header__buttons { display: flex; align-items: center; gap: 0.5rem; }
.site-header__buttons .btn { border-radius: 12px; font-size: 14px; font-weight: 500; padding: 0.5em 1.15em; }

/* Hover/focus animations for the header buttons. Glows and borders use
   the secondary colour, the site's hover colour (see Edit branding).
   - Solid: lifts, a light streak sweeps across once (::after), glows.
   - Outline: a tinted fill sweeps in from the left (::before) and the
     border lights up with a matching glow.
   Both press down slightly on click. Same effect on keyboard focus. */
.site-header__buttons .btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease, filter 0.25s ease;
}
.site-header__buttons .btn:active { transform: translateY(0) scale(0.96); }

.site-header__buttons .btn--primary::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.site-header__buttons .btn--primary:hover,
.site-header__buttons .btn--primary:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 6px 18px rgba(var(--secondary-rgb), 0.35), 0 0 0 3px rgba(var(--secondary-rgb), 0.15);
}
.site-header__buttons .btn--primary:hover::after,
.site-header__buttons .btn--primary:focus-visible::after { animation: header-btn-shine 0.7s ease forwards; }

.site-header__buttons .btn--ghost::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(var(--secondary-rgb), 0.28), rgba(var(--secondary-rgb), 0.1));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}
.site-header__buttons .btn--ghost:hover,
.site-header__buttons .btn--ghost:focus-visible {
    border-color: var(--secondary-400);
    color: var(--text-primary);
    box-shadow: 0 0 14px rgba(var(--secondary-rgb), 0.35), inset 0 0 8px rgba(var(--secondary-rgb), 0.15);
}
.site-header__buttons .btn--ghost:hover::before,
.site-header__buttons .btn--ghost:focus-visible::before { transform: scaleX(1); }

@keyframes header-btn-shine {
    from { left: -80%; }
    to { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header__buttons .btn,
    .site-header__buttons .btn--ghost::before { transition: none; }
    .site-header__buttons .btn--primary:hover,
    .site-header__buttons .btn--primary:focus-visible,
    .site-header__buttons .btn:active { transform: none; }
    .site-header__buttons .btn--primary:hover::after,
    .site-header__buttons .btn--primary:focus-visible::after { animation: none; }
}

/* Language switcher — globe + language code + caret, opening a menu of
   the current country's languages (see Locale::siblingLanguages()).
   Open/close is handled by the generic [data-dropdown] code in app.js. */
.lang-switch { position: relative; }
.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0 0.15rem;
    background: none;
    border: none;
    color: var(--text-white-78);
    cursor: pointer;
    transition: color 0.15s ease;
}
.lang-switch__toggle:hover { color: var(--secondary-400); }
.lang-switch__caret { transition: transform 0.15s ease; }
.lang-switch__toggle[aria-expanded="true"] .lang-switch__caret { transform: rotate(180deg); }
.lang-switch__globe { width: 18px; height: 18px; flex-shrink: 0; }
.lang-switch__current { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
/* The small language code on the right of each menu entry. */
.lang-switch__code { margin-left: auto; padding-left: 1rem; font-size: 12px; font-weight: 600; opacity: 0.6; }
.lang-switch__menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
.lang-switch__toggle[aria-expanded="true"] + .lang-switch__menu { opacity: 1; visibility: visible; }
.lang-switch__menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 0.75rem;
    border-radius: 12px;
    color: var(--text-white-78);
    white-space: nowrap;
}
.lang-switch__menu a:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.lang-switch__menu a.is-active { color: var(--primary-500); font-weight: 700; }

/* Sidebar with every nav link, opened/closed by adding .sidebar-open to
   <html> (see app.js). Two modes:
   - Mobile (≤767px): an overlay drawer over the page, with a backdrop
     and its own logo + close button; the page behind can't scroll.
   - Tablet/desktop (≥768px): docked below the header, pushing the page
     content right by --sidebar-w instead of covering it. The header's
     menu button toggles it, and the choice is remembered across pages.
   Hidden with visibility (not just transform) so its links are out of
   the tab order while closed. */
.site-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    /* background: var(--bg-surface); */
    /* border-right: 1px solid var(--border-subtle); */
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s ease;
}
.sidebar-open .site-sidebar { transform: none; visibility: visible; }
.site-sidebar__backdrop { display: none; }

@media (max-width: 767px) {
    .site-sidebar { top: 0; z-index: 210; width: min(320px, 85vw); }
    .site-sidebar__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 205;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .sidebar-open .site-sidebar__backdrop { opacity: 1; visibility: visible; }
    html.sidebar-open { overflow: hidden; }
}

/* Tablets (768–1024px): the desktop sidebar's look (under the header,
   opened by the header's menu button), but as an overlay — it floats over
   the page instead of pushing it aside, the page behind dims and can't
   scroll, and a tap outside / a link / Esc closes it. It starts closed on
   every page (app.js treats this range as overlay, not docked). */
@media (min-width: 768px) and (max-width: 1024px) {
    .site-sidebar {
        top: calc(var(--header-h) + 1px);
        z-index: 210;
        width: var(--sidebar-w);
        background: var(--bg-primary);
        box-shadow: 12px 0 32px rgba(0, 0, 0, 0.5);
    }
    .site-sidebar__backdrop {
        display: block;
        position: fixed;
        inset: calc(var(--header-h) + 1px) 0 0 0;
        z-index: 205;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .sidebar-open .site-sidebar__backdrop { opacity: 1; visibility: visible; }
    html.sidebar-open { overflow: hidden; }
}

@media (min-width: 1025px) {
    /* Docked: part of the page, not pinned to the screen — it sits under
       the header at the top of the page and scrolls away with the content
       (absolutely positioned against the document, so it's as tall as its
       links, with no scrollbar of its own). */
    .site-sidebar {
        position: absolute;
        top: calc(var(--header-h) + 1px);
        bottom: auto;
        z-index: 90;
        width: var(--sidebar-w);
        overflow: visible;
    }
    /* The header's logo and menu button are right above, so the drawer's
       own copies aren't needed here. */
    /* .site-sidebar__head { display: none; } */

    main { transition: margin-left 0.25s ease; }
    /* On a short page the content area grows at least as tall as the
       sidebar (plus a little room), so the footer sits below its last
       link instead of over it. --sidebar-h is measured by an inline script
       in navbar.blade.php. */
    .sidebar-open main {
        margin-left: var(--sidebar-w);
        min-height: calc(var(--sidebar-h, 0px) + 2.5rem);
    }

    /* Like the header, the footer spans the full width whatever the
       sidebar does, and sits above it if the sidebar's height is ever
       unknown (no JS). */
    .site-footer { position: relative; z-index: 95; }
}

/* .site-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
} */
.site-sidebar__list,
.site-sidebar__sublist { list-style: none; margin: 0; padding: 0; }
.site-sidebar__list { display: flex; flex-direction: column; gap: 5px; padding: 0.75rem; }
.site-sidebar__sublist { display: flex; flex-direction: column; }

/* Each item is its own rounded box on #141829: blue icon, white label, ›
   on the right. The background never changes; the current page's item is
   marked only by a blue inner shadow from the left (#0065F0 at 60%,
   12px 0 20px) — hovering previews it at half strength. */
.site-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0 0.9rem;
    /* Invisible until active (then #0065F0 at 60%), so the item doesn't shift. */
    border: 0.5px solid transparent;
    border-radius: 12px;
    background: #141829;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.site-sidebar__link:hover { box-shadow: inset 12px 0 20px rgba(0, 101, 240, 0.3); }
/* Active: the inner shadow, and a 0.5px border in its colour (#0065F0 at 60%). */
.site-sidebar__link.is-active {
    border: 0.5px solid rgba(0, 101, 240, 0.6);
    box-shadow: inset 12px 0 20px rgba(0, 101, 240, 0.6);
}
.site-sidebar__link:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }

/* Optional Lucide icon (admin-picked, see NavItem::iconSvg()), in the
   theme colour. */
.site-sidebar__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--primary-400); }
.site-sidebar__group-head .site-sidebar__icon { width: 18px; height: 18px; }
.site-sidebar__label { min-width: 0; }
.site-sidebar__chevron { flex-shrink: 0; margin-left: auto; color: var(--text-white-78); transition: transform 0.15s ease; }

/* A group (admin: "Group into dropdown"): one rounded panel holding a
   header — the group's name and a chevron that turns as it opens and
   closes — and compact rows of its links (blue icon, white label, no box
   of their own). On #141829, like the single links; the current page's
   row gets the same blue inner shadow. */
.site-sidebar__group {
    border-radius: 12px;
    background: #141829;
    overflow: hidden;
}
.site-sidebar__group.is-active { border-color: rgba(var(--primary-rgb), 0.35); }
.site-sidebar__group-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 46px;
    padding: 0 0.9rem;
    color: var(--text-white-78);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.site-sidebar__group-head::-webkit-details-marker { display: none; }
.site-sidebar__group-head:hover { color: var(--text-primary); background: rgba(var(--primary-rgb), 0.06); }
.site-sidebar__group-head:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -2px; border-radius: 12px; }
.site-sidebar__group[open] > .site-sidebar__group-head .site-sidebar__chevron { transform: rotate(90deg); }
.site-sidebar__group[open] > .site-sidebar__group-head { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

.site-sidebar__group .site-sidebar__sublist { gap: 0.15rem; padding: 0.35rem; }
.site-sidebar__sublink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0 0.6rem;
    /* Invisible until active (then #0065F0 at 60%), so the row doesn't shift. */
    border: 0.5px solid transparent;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.site-sidebar__sublink:hover { box-shadow: inset 12px 0 20px rgba(0, 101, 240, 0.3); }
.site-sidebar__sublink:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -2px; }
.site-sidebar__sublink.is-active {
    border: 0.5px solid rgba(0, 101, 240, 0.6);
    box-shadow: inset 12px 0 20px rgba(0, 101, 240, 0.6);
}

/* Smooth open/close where the browser can animate <details> content. */
@supports (interpolate-size: allow-keywords) {
    .site-sidebar__group { interpolate-size: allow-keywords; }
    .site-sidebar__group::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size 0.25s ease, content-visibility 0.25s ease allow-discrete;
    }
    .site-sidebar__group[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .site-sidebar__group-head,
    .site-sidebar__sublink { transition: none; }
    .site-sidebar__group::details-content { transition: none; }
}

/* "Sidebar highlight" item (style = feature): a theme-colour gradient card
   with an admin-uploaded image left of the label — for promotions like
   "Spin & Win". The image is 44px, set by NavItemResource's upload field. */
.site-sidebar__feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    min-height: 56px;
    padding: 0.35rem 0.9rem 0.35rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    /* Still — no idle animation: #59E0FB → #1364DC. */
    background: linear-gradient(90deg, #59E0FB 0%, #1364DC 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.site-sidebar__feature:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.site-sidebar__feature.is-active {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.site-sidebar__feature:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.site-sidebar__feature-img { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; border-radius: 12px; }

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

@media (prefers-reduced-motion: reduce) {
    .site-sidebar,
    .site-sidebar__backdrop,
    main { transition: none; }
}

/* Narrow phones: same layout, tighter sizes so toggle + logo + buttons +
   language switcher still fit on one row down to ~320px. */
@media (max-width: 480px) {
    .site-header__inner,
    .site-header__start,
    .site-header__end { gap: 0.5rem; }
    .site-header__buttons { gap: 0.35rem; }
    .site-header__buttons .btn { font-size: 12px; padding: 0.45em 0.8em; }
    .site-header .brand { font-size: 1.2rem; }
    .site-header .brand__logo { height: 22px; max-width: 96px; }
}

/* =============================================================
   Hero
   ============================================================= */
.hero {
    position: relative;
    /* padding: clamp(4rem, 12vw, 8rem) 0; */
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,8,10,0.55) 0%, rgba(6,8,10,0.85) 70%, var(--bg-primary) 100%);
}
.hero__content { position: relative; z-index: 1; }
/* The hero's buttons, under its optional small text / title / description
   (x-hero-content). */
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__figure { margin: 0; }
.hero__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 0.6rem 1.25rem;
    text-align: center;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-muted);
    background: linear-gradient(0deg, rgba(var(--bg-primary-rgb), 0.85) 0%, rgba(var(--bg-primary-rgb), 0) 100%);
}

/* Shown instead of .hero__bg when a page's "side-by-side" hero has no
   background image uploaded — a soft glow built purely from the theme's
   own tokens (--primary-900, admin-overridable via Edit branding) fading
   into the page background, so a blank hero still looks intentional. */
.hero__gradient-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 85% 40%, var(--primary-900) 0%, transparent 70%),
        var(--bg-primary);
}

/* "side-by-side" layout — text column + optional image column. */
.hero__split { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap; }
.hero__text { flex: 1 1 420px; max-width: 640px; }
.hero__side-image {
    flex: 1 1 320px;
    max-width: 480px;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-left: auto;
    /* Softens an image that has its own background (a square photo/banner)
       against the page — a transparent cut-out is unaffected. */
    border-radius: var(--radius-lg);
}

/* Below 1260px, the side image stacks above the text instead of sitting
   next to it — column direction puts .hero__text (first in the DOM)
   below .hero__side-image visually, but order: -1 on the image is what
   actually flips which one comes first; column alone would still show
   text-then-image, just vertically instead of side by side. Centered
   via margin: 0 auto now that it's a block-level item in a column flow,
   replacing the row layout's margin-left: auto (which pushed it to the
   right, not centered it). .hero__split's own align-items: center
   (unchanged, inherited from the base rule above) centers .hero__text
   the same way. */
@media (max-width: 1260px) {
    .hero__split { flex-direction: column; }
    .hero__side-image {
        order: -1;
        margin: 0 auto;
    }
}

/* Tighter vertical padding for the boxed layouts (background-grid,
   slideshow), whose banner/slides already provide the visual weight. */
/* The boxed layouts (image-top, background-grid, slideshow) end right at
   their box/buttons — the next block's --section-gap margin spaces them. */
/* .hero--compact { padding: clamp(1.25rem, 3vw, 2.25rem) 0 0; } */
.hero--image-top { padding-bottom: 0; padding-top: 0 }
/* The full-bleed side-by-side hero keeps room under its content for the
   background image, just less of it when a notice bar follows. */
.hero--side-by-side.hero--has-notice { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* "image-top" layout — a rounded image, with the H1/lead/buttons centered
   below it directly on the page background (no card around them). Also
   used for the H1/lead/buttons under a slideshow. */
.hero-stack__image {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
/* Phones: a very wide banner would shrink to a thin strip, so it gets a
   taller 2:1 box it fills — zoomed on the middle, the far edges trimmed. */
@media (max-width: 767px) {
    .hero-stack__image { aspect-ratio: 2 / 1; object-position: center; }
}
.hero-stack__content { padding-top: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.hero-stack__content .hero__cta { justify-content: center; }

/* "background-grid" layout — a rounded banner showing the background
   image, laid out as a 2-column grid: the H1/lead/buttons fill one column
   (--content-left/--content-right) and the other stays empty so the
   image's artwork shows through. A shade darkens only the text side. */
.hero-banner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: clamp(360px, 32vw, 480px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-surface);
}
.hero-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-banner__gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 90% at 80% 50%, var(--primary-900) 0%, transparent 70%), var(--bg-surface);
}
.hero-banner--content-right .hero-banner__gradient {
    background: radial-gradient(60% 90% at 20% 50%, var(--primary-900) 0%, transparent 70%), var(--bg-surface);
}
.hero-banner__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--bg-primary-rgb), 0.75) 0%, rgba(var(--bg-primary-rgb), 0.35) 45%, transparent 65%);
}
.hero-banner--content-right .hero-banner__shade {
    background: linear-gradient(270deg, rgba(var(--bg-primary-rgb), 0.75) 0%, rgba(var(--bg-primary-rgb), 0.35) 45%, transparent 65%);
}
.hero-banner__content {
    position: relative;
    z-index: 1;
    grid-column: 1;
    padding: clamp(1.75rem, 4vw, 3.5rem);
}
.hero-banner--content-right .hero-banner__content { grid-column: 2; }

/* Below 860px the halves are too narrow to share: the image becomes a
   strip on top (cropped towards the artwork side) with the text below. */
@media (max-width: 860px) {
    .hero-banner { display: block; min-height: 0; }
    .hero-banner__bg,
    .hero-banner__gradient {
        position: relative;
        display: block;
        height: clamp(180px, 45vw, 300px);
    }
    .hero-banner--content-left .hero-banner__bg { object-position: right center; }
    .hero-banner--content-right .hero-banner__bg { object-position: left center; }
    .hero-banner__shade { display: none; }
    .hero-banner__content { padding: 1.5rem; }
}

/* ---- Phones: every hero layout like the slideshow's grid slides ----
   Edge to edge (out of the page's side margins, no rounded card), the
   picture across the top ~¾ fading into the background, and the text
   laid over its lower part, compact so the picture leads.
   - background-grid (.hero-banner): cropped towards the artwork side;
   - image-top (.hero-stack, when it has text — an image on its own just
     runs full width);
   - side-by-side (.hero--side-by-side): already full-bleed; its
     background now fades the same way, text at the bottom. */
@media (max-width: 767px) {
    .hero-banner,
    .hero--image-top .hero-stack {
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        border-radius: 0;
    }
    .hero-banner,
    .hero--image-top .hero-stack:has(.hero-stack__content),
    .hero--side-by-side {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: clamp(400px, 108vw, 580px);
        overflow: hidden;
    }
    .hero--image-top .hero-stack:has(.hero-stack__content) { background: var(--bg-surface); }

    /* The picture: top ~78%. */
    .hero-banner .hero-banner__bg,
    .hero-banner .hero-banner__gradient,
    .hero--image-top .hero-stack:has(.hero-stack__content) .hero-stack__image,
    .hero--side-by-side .hero__bg {
        position: absolute;
        inset: 0 0 auto 0;
        width: 100%;
        height: 78%;
        max-height: none;
        aspect-ratio: auto;
        border-radius: 0;
    }
    .hero-banner--content-left .hero-banner__bg,
    .hero--side-by-side .hero__bg { object-position: 82% center; }
    .hero-banner--content-right .hero-banner__bg { object-position: 18% center; }
    .hero--image-top .hero-stack__image { border-radius: 0; }

    /* The fade from the picture into the background, under the text. */
    .hero-banner .hero-banner__shade,
    .hero-banner--content-right .hero-banner__shade {
        display: block;
        background: linear-gradient(to top, var(--bg-surface) 22%, rgba(var(--bg-surface-rgb), 0.85) 34%, rgba(var(--bg-surface-rgb), 0) 58%);
    }
    .hero--image-top .hero-stack:has(.hero-stack__content)::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(to top, var(--bg-surface) 22%, rgba(var(--bg-surface-rgb), 0.85) 34%, rgba(var(--bg-surface-rgb), 0) 58%);
        pointer-events: none;
    }
    .hero--side-by-side .hero__overlay {
        background: linear-gradient(to top, var(--bg-primary) 22%, rgba(var(--bg-primary-rgb), 0.85) 34%, rgba(var(--bg-primary-rgb), 0) 58%);
    }

    /* The text over the picture's lower part. */
    .hero-banner .hero-banner__content,
    .hero--image-top .hero-stack__content {
        position: relative;
        z-index: 1;
        padding: 1rem 1rem 1.25rem;
        text-align: left;
    }
    .hero--image-top .hero-stack__content .hero__cta { justify-content: flex-start; }
    .hero--side-by-side .hero__content { padding-bottom: 1.25rem; }
    /* Its text column's 420px flex-basis would become a height in the
       stacked (column) layout and hold the text up top. */
    .hero--side-by-side .hero__text { flex: none; width: 100%; }
    /* Its breadcrumbs and ⓘ belong at the top of the hero, not on the text
       block now sitting at the bottom: the block stops being their
       positioning box (the text itself stays above the fade). */
    .hero--side-by-side .hero__content { position: static; }
    .hero--side-by-side .hero__split { position: relative; z-index: 1; }
    .hero--side-by-side .breadcrumbs { position: absolute; top: 0.75rem; left: 0; right: 0; z-index: 1; margin: 0; }

    /* Breadcrumbs on every layout: laid over the top of the banner (out of
       the flow, so the banner starts at the top of the hero), in light
       text with a shadow so they read on any picture. Clear of the ⓘ
       in the top-right corner. */
    .hero > .container > .breadcrumbs {
        position: absolute;
        top: 0.75rem;
        left: 3rem;
        right: 3rem;
        z-index: 7;
        margin: 0;
    }
    /* On a dark, blurred pill (like the ⓘ's), so they read on any picture. */
    .hero .breadcrumbs__list {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        padding: 0.3rem 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        background: rgba(var(--bg-primary-rgb), 0.6);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
    .hero .breadcrumbs__item a { color: #ffffff; }
    .hero .breadcrumbs__item [aria-current="page"],
    .hero .breadcrumbs__sep { color: rgba(255, 255, 255, 0.7); }
    .hero--side-by-side .hero-info-btn--page-edge { top: 12px; right: 12px; }
    :is(.hero-banner__content, .hero--image-top .hero-stack__content, .hero--side-by-side .hero__text) .hero-slide__title { font-size: 21px; margin-bottom: 0.35rem; }
    :is(.hero-banner__content, .hero--image-top .hero-stack__content, .hero--side-by-side .hero__text) .hero-slide__lead { margin-bottom: 0.9rem; }
    :is(.hero-banner__content, .hero--image-top .hero-stack__content, .hero--side-by-side .hero__text) .hero-slide__lead :is(p, li) { font-size: 13px; line-height: 19px; }
    :is(.hero-banner__content, .hero--image-top .hero-stack__content, .hero--side-by-side .hero__text) .btn--lg { font-size: 14px; padding: 0.6em 1.3em; }
}

/* "slideshow" layout — every slide sits in the same grid cell so the
   slideshow is as tall as its tallest slide (no height jump between
   slides); only .is-active is visible. Switching, autoplay, dots and
   swipe are in app.js. */
.hero--slideshow-full { padding-top: 0; }
.hero--slideshow-full .breadcrumbs { margin: 1rem 0; }
.hero-slides { position: relative; }
.hero-slides--boxed {
    /* border: 1px solid var(--border-subtle); */
    border-radius: var(--radius-lg);
    overflow: hidden;
}
/* Phones: no card — the slideshow runs edge to edge, out of the page's
   side margins (like the banner sections). */
@media (max-width: 767px) {
    .hero-slides--boxed {
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        border-radius: 0;
    }
}
.hero-slides__track { display: grid; }
.hero-slide {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    background: var(--bg-surface);
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

/* "Image only" slide: the picture fills the slide (3:1, 2:1 on phones). */
.hero-slide__link { display: block; height: 100%; }
.hero-slide__image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

/* "Content & image with background" slide: title/text/button on the
   left, optional side image on the right, over a background image
   darkened on the text side (see the Winfinity-style reference). */
.hero-slide--split,
.hero-slide--grid {
    display: flex;
    align-items: center;
    min-height: clamp(320px, 28vw, 420px);
}
.hero-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slide__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--bg-primary-rgb), 0.85) 0%, rgba(var(--bg-primary-rgb), 0.55) 45%, rgba(var(--bg-primary-rgb), 0.1) 75%);
}
.hero-slide__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.75rem, 5vw, 4.5rem);
}
/* Full-width: keep the text lined up with the page's content width. */
.hero-slides--full .hero-slide__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
/* Slide title and text are rich text (RichEditor HTML: <p>, <strong>,
   <em>, <u>, <s>, links, lists). The nested <p>/<li> are styled directly,
   since the base `p` rule would otherwise override what they inherit. */
/* Hero title (every hero layout and slide): Barlow Bold 40px, -2%
   tracking, uppercase, in a brushed-metal gradient. The gradient is one
   line tall and repeats, so each line of a two-line title gets the full
   sweep (background-clip: text fills the letters with it). */
.hero-slide__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 1.1em repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-slide__title p { margin: 0; font: inherit; color: inherit; }
@media (max-width: 640px) {
    .hero-slide__title { font-size: 30px; }
}
/* Small label above a hero / slide title, e.g. "CASINO". */
.hero__eyebrow {
    margin: 0 0 0.4rem;
    color: var(--text-white-78);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
/* Hero description: Inter Regular 18/28px, -2% tracking, #DEDEE3. */
.hero-slide__lead { margin: 0 0 1.5rem; }
.hero-slide__lead p,
.hero-slide__lead li {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.02em;
    color: #DEDEE3;
}
.hero-slide__lead p { margin: 0 0 0.6em; }
.hero-slide__lead p:last-child { margin-bottom: 0; }
.hero-slide__lead ul,
.hero-slide__lead ol { margin: 0 0 0.6em; padding-left: 1.25em; }
.hero-slide__lead strong { color: #ffffff; }
/* Bold words in the title keep the metal gradient. */
.hero-slide__title strong { -webkit-text-fill-color: transparent; }
.hero-slide__lead a { color: var(--primary-400); text-decoration: underline; }
.hero-slide__lead a:hover { color: var(--secondary-400); }
.hero-slide__side {
    justify-self: end;
    width: 100%;
    max-width: 460px;
    max-height: 380px;
    object-fit: contain;
}

/* "Background image with content on one side" slide: the same two
   columns, but the text takes the half set by content_side and the other
   stays empty for the artwork — the slide version of .hero-banner. The
   shade darkens only the text side. */
.hero-slide--content-right .hero-slide__text { grid-column: 2; }
.hero-slide--grid .hero-slide__shade {
    background: linear-gradient(90deg, rgba(var(--bg-primary-rgb), 0.75) 0%, rgba(var(--bg-primary-rgb), 0.35) 45%, transparent 65%);
}
.hero-slide--grid.hero-slide--content-right .hero-slide__shade {
    background: linear-gradient(270deg, rgba(var(--bg-primary-rgb), 0.75) 0%, rgba(var(--bg-primary-rgb), 0.35) 45%, transparent 65%);
}

.hero-slides__dots {
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    z-index: 2;
    display: flex;
    transform: translateX(-50%);
}
/* 24px tap target around an 8px dot. */
.hero-slides__dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.hero-slides__dot::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.55);
    transition: background 0.2s ease, transform 0.2s ease;
}
.hero-slides__dot[aria-current="true"]::before { background: #ffffff; transform: scale(1.15); }
.hero-slides__dot:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -4px; border-radius: 50%; }

/* Previous/next arrows (only rendered with 2+ slides): round, frosted
   buttons at the left/right edges, vertically centred. They glow in the
   theme colour on hover. Content slides get extra side padding so their
   text never runs underneath an arrow. */
.hero-slides__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(var(--bg-primary-rgb), 0.45);
    backdrop-filter: blur(6px);
    color: #ffffff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hero-slides__arrow--prev { left: 0.85rem; }
.hero-slides__arrow--next { right: 0.85rem; }
.hero-slides__arrow:hover {
    background: rgba(var(--primary-rgb), 0.35);
    border-color: rgba(var(--primary-rgb), 0.8);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.45);
}
.hero-slides__arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.hero-slides__arrow--next:hover { transform: translateY(-50%) translateX(2px); }
.hero-slides__arrow:active { transform: translateY(-50%) scale(0.92); }
.hero-slides__arrow:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.hero-slides__arrow-icon { width: 22px; height: 22px; }

@media (min-width: 768px) {
    .hero-slides--has-arrows .hero-slide__inner {
        padding-left: max(4.5rem, clamp(1.75rem, 5vw, 4.5rem));
        padding-right: max(4.5rem, clamp(1.75rem, 5vw, 4.5rem));
    }
}
/* Phones: smaller, tucked into the bottom corners beside the dots, so
   they don't cover the stacked text. */
@media (max-width: 767px) {
    .hero-slides__arrow {
        top: auto;
        bottom: 0.4rem;
        width: 32px;
        height: 32px;
        transform: none;
    }
    .hero-slides__arrow--prev:hover,
    .hero-slides__arrow--next:hover { transform: none; }
    .hero-slides__arrow:active { transform: scale(0.92); }
    .hero-slides__arrow-icon { width: 18px; height: 18px; }
    .hero-slides--has-arrows .hero-slide__inner { padding-bottom: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slides__arrow { transition: none; }
}

@media (max-width: 767px) {
    .hero-slide__image { aspect-ratio: 2 / 1; }
    .hero-slide__inner {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem 1.25rem 2.25rem;
    }
    .hero-slide__side { order: -1; justify-self: center; max-height: 200px; }
    .hero-slide__shade { background: rgba(var(--bg-primary-rgb), 0.6); }

    /* Grid slides: the picture across the top ~¾ of the slide (cropped
       towards the artwork side), fading into the slide's background, with
       the text laid over its lower part. */
    .hero-slide--grid {
        display: flex;
        align-items: flex-end;
        min-height: clamp(400px, 108vw, 580px);
    }
    .hero-slide--grid .hero-slide__bg {
        bottom: auto;
        height: 78%;
        object-position: 82% center;
    }
    .hero-slide--grid.hero-slide--content-right .hero-slide__bg { object-position: 18% center; }
    .hero-slide--grid .hero-slide__shade,
    .hero-slide--grid.hero-slide--content-right .hero-slide__shade {
        background: linear-gradient(to top, var(--bg-surface) 22%, rgba(var(--bg-surface-rgb), 0.85) 34%, rgba(var(--bg-surface-rgb), 0) 58%);
    }
    .hero-slide--content-right .hero-slide__text { grid-column: auto; }

    /* The text over the picture: compact, so the picture leads. */
    .hero-slide--grid .hero-slide__inner { gap: 0.6rem; padding: 1rem 1rem 1.25rem; }
    .hero-slides--has-arrows .hero-slide--grid .hero-slide__inner { padding-bottom: 2.75rem; }
    .hero-slides .hero-slide--grid .hero-slide__title { font-size: 21px; margin-bottom: 0.35rem; }
    .hero-slides .hero-slide--grid .hero-slide__lead { margin-bottom: 0.9rem; }
    .hero-slides .hero-slide--grid .hero-slide__lead :is(p, li) { font-size: 13px; line-height: 19px; }
    .hero-slides .hero-slide--grid .btn--lg { font-size: 14px; padding: 0.6em 1.3em; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}

/* Notice bar — an optional one-line announcement right below the hero
   (hero_notice). The border fades from the theme colour on the left. */
.hero-notice { margin: var(--section-gap) 0; }
.hero-notice__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.7rem 1rem;
    /* Dark navy #141829 for the left half, fading to brand blue #006BFF at
       the right edge, with a deep brand blue border. */
    border: 2px solid var(--primary-900);
    border-radius: 12px;
    background:
        linear-gradient(90deg, #141829 0%, #141829 50%, #006BFF 100%) padding-box;
    /* Text: Inter Regular 14px, 150% line height, -2% tracking, white. */
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
}
/* The megaphone tilts upward, as if announcing. */
.hero-notice__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--primary-400); transform: rotate(-20deg); }
.hero-notice__bar:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }

/* Ticker: the text enters at the bar's right edge and slides left until
   it has fully left, then repeats. The padding-left: 100% (of the
   viewport's width) is what starts it just off the right edge; moving by
   -100% of its own width (padding + text) carries it fully off the left.
   --ticker-duration is set in app.js from the distance, for an even speed
   whatever the text length. Pauses on hover and keyboard focus. */
.hero-notice__viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.hero-notice__text {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    will-change: transform;
    animation: hero-notice-ticker var(--ticker-duration, 20s) linear infinite;
}
.hero-notice__bar:hover .hero-notice__text,
.hero-notice__bar:focus-within .hero-notice__text { animation-play-state: paused; }

@keyframes hero-notice-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* No motion: show the whole notice still, wrapping as normal text. */
@media (prefers-reduced-motion: reduce) {
    .hero-notice__viewport { -webkit-mask-image: none; mask-image: none; }
    .hero-notice__text { animation: none; padding-left: 0; white-space: normal; }
}

/* "Content" section — the page's main text, with its own H1/H2/H3
   hierarchy, in one rich-text body (see page-section.blade.php). Shown
   clipped to --collapsed-height with a fade over the cut-off; the round
   button (app.js) expands it. The full text is always in the HTML, so
   search engines read all of it. .is-short: shorter than the collapsed
   height, so no clipping, fade or button. */
.content-collapse__body {
    position: relative;
    max-height: var(--collapsed-height, 220px);
    overflow: hidden;
    transition: max-height 0.45s ease;
}
.content-collapse__body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(180deg, transparent, var(--bg-primary));
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.section--alt .content-collapse__body::after { background: linear-gradient(180deg, transparent, var(--bg-surface)); }
.content-collapse.is-expanded .content-collapse__body::after,
.content-collapse.is-short .content-collapse__body::after { opacity: 0; }
.content-collapse.is-short .content-collapse__body { max-height: none; }

.content-collapse__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 1rem auto 0;
    padding: 0;
    border: 1.5px solid rgba(var(--primary-rgb), 0.6);
    border-radius: 50%;
    background: transparent;
    color: var(--primary-400);
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.content-collapse__toggle[hidden] { display: none; }
.content-collapse__toggle:hover {
    background: rgba(var(--primary-rgb), 0.15);
    box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.4);
    color: #ffffff;
}
.content-collapse__toggle:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 3px; }
.content-collapse__toggle-icon { width: 20px; height: 20px; transition: transform 0.3s ease; }
.content-collapse.is-expanded .content-collapse__toggle-icon { transform: rotate(180deg); }

/* The admin's rich text: headings step down from H1 to H3 but stay
   compact — this block is reading material, not a hero. The nested
   <p>/<li> are styled directly since the base `p` rule would otherwise
   override what they inherit. */
.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 { color: var(--text-primary); line-height: 1.3; margin: 1.1em 0 0.45em; }
/* Tables in rich text (TipTap editor — pasted or built with its table
   tool). Each is wrapped in .rich-table (App\Support\RichText) so a wide
   one scrolls sideways on small screens. TipTap puts a <p> in each cell. */
.rich-table {
    overflow-x: auto;
    margin: 0 0 1em;
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-radius: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb), 0.6) transparent;
}
.rich-table table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 14px;
}
.rich-table th,
.rich-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-white-78);
    text-align: left;
    vertical-align: top;
}
.rich-table th + th,
.rich-table td + td,
.rich-table th + td,
.rich-table td + th { border-left: 1px solid rgba(255, 255, 255, 0.05); }
.rich-table tr:last-child > * { border-bottom: 0; }
.rich-table th {
    background: rgba(var(--primary-rgb), 0.16);
    color: #ffffff;
    font-weight: 700;
}
/* Pasted tables (Google Docs, Word) often have no <th>: their first row
   is the header, so it gets the header look. */
.rich-table table:not(:has(th)) tr:first-child td {
    background: rgba(var(--primary-rgb), 0.16);
    color: #ffffff;
    font-weight: 700;
}
.rich-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.rich-table table:not(:has(th)) tbody tr:nth-child(odd):not(:first-child) td { background: rgba(255, 255, 255, 0.025); }
.rich-table table:not(:has(th)) tbody tr:nth-child(even) td { background: transparent; }
.rich-table th p,
.rich-table td p { margin: 0; font-size: inherit; line-height: 1.45; color: inherit; }
.rich-table th p + p,
.rich-table td p + p { margin-top: 0.4em; }
.content-collapse__body.rich-content .rich-table td p,
.content-collapse__body.rich-content .rich-table th p { font-size: 13px; }

.rich-content h4 { font-size: 16px; }
.rich-content h5 { font-size: 15px; }
.rich-content h6 { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-white-78); }
.rich-content > :first-child { margin-top: 0; }
.rich-content h1 { font-size: clamp(20px, 2.2vw, 24px); }
.rich-content h2 { font-size: clamp(18px, 1.9vw, 20px); }
.rich-content h3 { font-size: 17px; }
.rich-content p,
.rich-content li { font-size: 15px; line-height: 1.6; color: var(--text-white-78); }
/* The Content section reads smaller than other rich text. */
.content-collapse__body.rich-content h1 { font-size: clamp(18px, 1.9vw, 21px); }
.content-collapse__body.rich-content h6 { font-size: 12.5px; }
.content-collapse__body.rich-content p,
.content-collapse__body.rich-content li,
.content-collapse__body.rich-content blockquote { font-size: 13.5px; line-height: 1.6; }
.rich-content p { margin: 0 0 0.8em; }
.rich-content ul,
.rich-content ol { margin: 0 0 0.8em; padding-left: 1.4em; }
.rich-content li + li { margin-top: 0.25em; }
.rich-content a { color: var(--primary-400); text-decoration: underline; }
.rich-content a:hover { color: var(--secondary-400); }
.rich-content strong { color: var(--text-primary); }
.rich-content blockquote {
    margin: 0 0 0.8em;
    padding: 0.4em 0 0.4em 1em;
    border-left: 3px solid rgba(var(--primary-rgb), 0.6);
}

@media (prefers-reduced-motion: reduce) {
    .content-collapse__body,
    .content-collapse__body::after,
    .content-collapse__toggle-icon { transition: none; }
}

/* "Links" section — a grid of rounded, clickable cards (SectionLink; see
   page-section.blade.php). links-grid--N is the admin's cards-per-row
   (1–5) on wide screens; narrower screens step down to fewer. */
.links-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 540px) {
    .links-grid--2, .links-grid--3, .links-grid--4, .links-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .links-grid--3, .links-grid--4, .links-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .links-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .links-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.link-card {
    position: relative;
    display: flex;
    min-height: 120px;
    overflow: hidden;
    /* Brand gradient edge (--edge-gradient) painted in the border area —
       its ::before/::after are taken by the glow and the light streak. */
    /* border: 1px solid transparent; */
    border-radius: 12px;
    /* Fill per layout: no image — #141829 → #006BFF; with an image —
       #001040 for 80% of the width, then #133CED (see --side/--top). */
    --link-card-fill: linear-gradient(90deg, #141829 0%, #006BFF 100%);
    background:
        var(--link-card-fill) padding-box;
        /* var(--edge-gradient) border-box; */
    color: var(--text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.link-card:hover,
.link-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(var(--primary-rgb), 0.38);
}
.link-card:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 3px; }

.link-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    min-width: 50%;
    padding: 1.4rem 1.6rem;
}
/* Title: Inter Bold 20px, -2% tracking, in the hero title's metal
   gradient (one line tall, repeating per line — see .hero-slide__title). */
.link-card__title {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 1.2em repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Description: Inter Regular 16/24px, -2% tracking, #DEDEE3. */
.link-card__text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #DEDEE3;
}

/* Cards with an image: deep navy #001040 across 80%, then #133CED. */
.link-card--side,
.link-card--top { --link-card-fill: linear-gradient(90deg, #001040 0%, #001040 60%, #133CED 100%); }

/* Image beside the text (right). The image sits on a blurred, 10px
   larger copy of itself (15px blur, hard-light blend), which gives it a
   glow in its own colours. */
.link-card--side { min-height: 150px; }
.link-card__media {
    position: relative;
    order: 2;
    display: block;
    width: 100%;
    min-width: 65%;
    align-self: center;
}
.link-card__media .link-card__image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-height: 170px;
    object-fit: cover;
    object-position: right center;
}
.link-card__image-glow {
    position: absolute;
    top: -5px;
    left: -15px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    object-fit: cover;
    object-position: right center;
    filter: blur(18px);
    mix-blend-mode: hard-light;
    pointer-events: none;
}

/* Image across the top, text below. */
.link-card--top { flex-direction: column; }
/* The image fades out towards its bottom edge into the card's own
   background (a mask, so it blends into whatever colour the card is),
   and the text is pulled up into that faded area. */
.link-card--top .link-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
}
.link-card--top .link-card__body {
    justify-content: flex-start;
    align-items: center;
    margin-top: -1.25rem;
    padding: 0 1.3rem 1.3rem;
    text-align: center;
}

/* Image only: fills the card. */
.link-card--background { aspect-ratio: 16 / 10; min-height: 0; --link-card-fill: linear-gradient(var(--bg-surface), var(--bg-surface)); }
.link-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Hover/focus overlay with the card's description (image cards only). */
.link-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(var(--primary-rgb), 0.30);
    backdrop-filter: blur(3px);
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.link-card__description {
    font-size: 14px;
    line-height: 1.45;
    color: #ffffff;
    transform: translateY(6px);
    transition: transform 0.25s ease;
}
.link-card:hover .link-card__overlay,
.link-card:focus-visible .link-card__overlay { opacity: 1; }
.link-card:hover .link-card__description,
.link-card:focus-visible .link-card__description { transform: none; }

/* ---- Link card motion — no idle animation; cards sit still until used:
   - entrance: cards rise in one after another once the grid scrolls into
     view (app.js arms the grid with .is-armed, then adds .is-visible —
     without JS the cards simply show);
   - hover/focus: the card lifts, a light streak sweeps across, the image
     zooms, the arrow fills with the theme colour. */
.links-grid.is-armed:not(.is-visible) .link-card { opacity: 0; }
.links-grid.is-visible .link-card {
    animation: link-card-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 90ms);
}

/* A steady inner glow along the border. */
.link-card::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Above the images (it's only an edge glow), below the overlay. */
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 24px rgba(var(--primary-rgb), 0.35);
    opacity: 0.6;
    pointer-events: none;
}
/* The light streak — only while hovered / focused. */
.link-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 45%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
    transform: translateX(-130%) skewX(-12deg);
    pointer-events: none;
}
.link-card:hover::after,
.link-card:focus-visible::after { animation: link-card-shine 1.4s ease-in-out infinite; }

/* Images: a zoom on hover. */
.link-card__image,
.link-card__media,
.link-card__bg { transition: scale 0.4s ease; }
.link-card:hover .link-card__media,
.link-card:focus-visible .link-card__media,
.link-card--top:hover .link-card__image,
.link-card--top:focus-visible .link-card__image,
.link-card:hover .link-card__bg,
.link-card:focus-visible .link-card__bg { scale: 1.06; }

/* The round "go" arrow: bottom-right, or top-right over an image. */
.link-card__go {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(var(--bg-primary-rgb), 0.45);
    color: #ffffff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, translate 0.2s ease;
}
.link-card__go svg { width: 16px; height: 16px; }

/* An untitled links section's ⓘ, repeated on every card (all open the same
   dialog). It's a sibling of the card's <a> in .link-card-wrap (a button
   can't sit inside a link): top-right, or top-left on the image layouts
   whose "go" arrow takes the top-right. It rides along with the card's
   hover lift and rises in with it. */
.link-card-wrap { position: relative; display: grid; }
.link-card-wrap > .link-card { grid-area: 1 / 1; }
.link-card-wrap > .link-card__info {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 5;
    background: rgba(var(--bg-primary-rgb), 0.55);
    color: #ffffff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.link-card-wrap--top > .link-card__info,
.link-card-wrap--background > .link-card__info { right: auto; left: 0.85rem; }
.link-card-wrap:has(> .link-card:hover) .link-card__info,
.link-card-wrap:has(> .link-card:focus-visible) .link-card__info { translate: 0 -5px; }
.links-grid.is-armed:not(.is-visible) .link-card__info { opacity: 0; }
.links-grid.is-visible .link-card__info {
    animation: link-card-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 90ms);
}
.link-card--top .link-card__go,
.link-card--background .link-card__go { top: 0.85rem; bottom: auto; }
.link-card--text .link-card__body { padding-right: 3.5rem; }
.link-card:hover .link-card__go,
.link-card:focus-visible .link-card__go {
    translate: 3px 0;
    background: var(--primary-500);
    border-color: var(--primary-400);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.7);
}

@keyframes link-card-in {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to { opacity: 1; transform: none; }
}
@keyframes link-card-shine {
    0% { transform: translateX(-130%) skewX(-12deg); }
    22%, 100% { transform: translateX(260%) skewX(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
    .link-card,
    .link-card__overlay,
    .link-card__description,
    .link-card__image,
    .link-card__media,
    .link-card__bg,
    .link-card__go { transition: none; }
    .link-card:hover,
    .link-card:focus-visible { transform: none; }
    .links-grid.is-visible .link-card,
    .link-card::before,
    .link-card::after,
    .link-card__media,
    .link-card__go { animation: none; }
    .link-card::after { display: none; }
    .link-card:hover .link-card__media,
    .link-card:focus-visible .link-card__media,
    .link-card:hover .link-card__image,
    .link-card:focus-visible .link-card__image,
    .link-card:hover .link-card__bg,
    .link-card:focus-visible .link-card__bg { scale: none; }
    .link-card:hover .link-card__go,
    .link-card:focus-visible .link-card__go { translate: none; }
}

/* ---- Links on phones (≤767px) ----
   - Text cards sit two per row (unless the admin chose 1 per row).
   - A section with side-image cards (.links-grid--rail) becomes one row
     of small tiles that scrolls sideways — about four in view with the
     next one peeking in — each with its title on top and the image
     filling the space below. Their description and the "go" arrows are
     left out at this size; the whole card is the link. */
@media (max-width: 767px) {
    .links-grid:not(.links-grid--1) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .link-card { min-height: 0; }
    .link-card__go { display: none; }
    .link-card--text .link-card__body { padding: 1.1rem 1rem; }

    .links-grid--rail {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        /* Room for the hover lift and the cards' glow. */
        padding: 6px 0 10px;
        margin: -6px 0 -10px;
    }
    .links-grid--rail::-webkit-scrollbar { display: none; }
    /* Sized so a fifth tile peeks in when there are more; when they all
       fit (four or fewer), they grow to fill the row edge to edge. */
    .links-grid--rail > * {
        flex: 1 0 calc((100% - 3 * 8px) / 4.2);
        min-width: 84px;
        scroll-snap-align: start;
    }
    .links-grid--rail .link-card { height: 100%; }
    /* Square tiles: the image fills what's left under the title and is
       cropped to fit (overflow hidden on .link-card). */
    .links-grid--rail .link-card--side { flex-direction: column; min-height: 0; height: auto; aspect-ratio: 1; }
    .links-grid--rail .link-card--side .link-card__body {
        flex: none;
        min-width: 0;
        padding: 0.65rem 0.4rem 0.2rem;
        align-items: center;
        text-align: center;
    }
    .links-grid--rail .link-card__title { font-size: 13px; }
    .links-grid--rail .link-card__text { display: none; }
    .links-grid--rail .link-card__media {
        order: 2;
        flex: 1;
        min-width: 0;
        min-height: 0;
        align-self: stretch;
    }
    .links-grid--rail .link-card__media .link-card__image,
    .links-grid--rail .link-card__image-glow {
        height: 100%;
        max-height: none;
        object-fit: cover;
        /* Keep the top of the picture; any crop comes off the bottom. */
        object-position: center top;
    }
    /* The ⓘ (untitled section) moves over the image, clear of the title. */
    .links-grid--rail .link-card-wrap > .link-card__info { top: auto; bottom: 6px; right: 6px; left: auto; width: 24px; height: 24px; }
    .links-grid--rail .link-card-wrap > .link-card__info .section-info-btn__icon { width: 14px; height: 14px; }
}

/* =============================================================
   Text-heavy page sections (About…): info cards, spotlight, timeline,
   contact, text block. Their titles are real H2s and their items H3s
   (page-section.blade.php → each component). Shared look: dark surface
   panels with a theme-colour edge glow, lifting on hover.
   ============================================================= */

/* ---- Info cards ---- */
/* .info-section__intro { max-width: 820px; } */
.info-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
@media (min-width: 640px) {
    .info-grid--2, .info-grid--3, .info-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .info-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .info-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    padding: 1.6rem 1.5rem;
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    border-radius: 12px;
    box-shadow: 0 0px 20px rgba(var(--primary-rgb), 0.2);
    background:
        radial-gradient(80% 60% at 100% 0%, rgba(var(--primary-rgb), 0.30), transparent 70%),
        rgba(0, 16, 64, 0.3);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
/* A light bar along the top edge that sweeps out on hover. */
.info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-400), transparent);
    transform: scaleX(0.25);
    opacity: 0.6;
    transition: transform 0.45s ease, opacity 0.45s ease;
}
.info-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-rgb), 0.6);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), 0 0 22px rgba(var(--primary-rgb), 0.18);
}
.info-card:hover::before { transform: scaleX(1); opacity: 1; }

.info-card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.9), rgba(var(--primary-rgb), 0.35));
    box-shadow: 0 8px 22px rgba(var(--primary-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.info-card__icon-svg { width: 28px; height: 28px; }
.info-card__icon img { width: 36px; height: 36px; object-fit: contain; }
.info-card:hover .info-card__icon { transform: rotate(-8deg) scale(1.08); }

.info-card__title {
    margin: 0 0 0.55rem;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
}
.info-card__text p,
.info-card__text li { font-size: 14px; line-height: 1.6; }
.info-card__text > :last-child { margin-bottom: 0; }

.info-card__media { overflow: hidden; border-radius: 12px; }
.info-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.5s ease;
}
.info-card:hover .info-card__media img { scale: 1.05; }

/* Image beside the text (stacks on phones). */
@media (min-width: 640px) {
    .info-card--image-side { flex-direction: row; align-items: center; gap: 1.4rem; }
    .info-card--image-side .info-card__media { flex: 0 0 42%; aspect-ratio: 4 / 3; }
}
.info-card--image-side .info-card__media { aspect-ratio: 16 / 9; }

/* Wide image on top, fading into the card. */
.info-card--image-top { padding: 0; gap: 0; }
.info-card--image-top .info-card__media {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.info-card--image-top .info-card__body { margin-top: -1rem; padding: 0 1.5rem 1.5rem; }
.info-card--image-top > .info-card__icon { margin: 1.5rem 1.5rem 1rem; }

/* ---- Spotlight ---- */
.spotlight {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 280px;
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    border-radius: 12px;
    background:
        radial-gradient(60% 90% at 85% 40%, rgba(var(--primary-rgb), 0.5), transparent 70%),
        radial-gradient(50% 80% at 10% 100%, rgba(var(--secondary-rgb), 0.14), transparent 70%),
        var(--bg-surface);
    box-shadow: 0 0 28px rgba(var(--primary-rgb), 0.18);
}
.spotlight--media-left {
    background:
        radial-gradient(60% 90% at 15% 40%, rgba(var(--primary-rgb), 0.5), transparent 70%),
        radial-gradient(50% 80% at 90% 100%, rgba(var(--secondary-rgb), 0.14), transparent 70%),
        var(--bg-surface);
}
/* The cut-out rises above the box, so leave room for it. */
.spotlight--has-media { margin-top: 3rem; }
.spotlight__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}
/* Keeps the text readable over any background; a soft light sweeps by. */
.spotlight__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--bg-primary-rgb), 0.7), rgba(var(--bg-primary-rgb), 0.15) 60%, transparent);
    pointer-events: none;
}
.spotlight--media-left .spotlight__glow { background: linear-gradient(270deg, rgba(var(--bg-primary-rgb), 0.7), rgba(var(--bg-primary-rgb), 0.15) 60%, transparent); }
.spotlight__glow::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: spotlight-sweep 7s ease-in-out infinite;
}
.spotlight__content { position: relative; z-index: 2; padding: clamp(1.75rem, 4vw, 3rem); }
.spotlight__title {
    margin: 0 0 0.75rem;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 2px 16px rgba(var(--primary-rgb), 0.45);
}
.spotlight__text { max-width: 60ch; }
.spotlight__text p,
.spotlight__text li { font-size: 15px; }
.spotlight__text > :last-child { margin-bottom: 0; }
.spotlight__button { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; }
.spotlight__button-icon { width: 18px; height: 18px; transition: transform 0.2s ease; }
.spotlight__button:hover .spotlight__button-icon { transform: translateX(3px); }
.spotlight__media {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-self: end;
    pointer-events: none;
}
.spotlight__media img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 340px;
    margin-top: -3rem;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
    animation: spotlight-float 5s ease-in-out infinite alternate;
}
@media (min-width: 760px) {
    .spotlight--has-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
    .spotlight--media-left.spotlight--has-media { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
    .spotlight--media-left .spotlight__media { order: -1; }
    .spotlight__media img { max-height: 380px; margin-top: -4rem; }
}
@media (max-width: 759px) {
    .spotlight__media { order: -1; }
    .spotlight__media img { max-height: 220px; }
    .spotlight__glow { background: linear-gradient(0deg, rgba(var(--bg-primary-rgb), 0.75), rgba(var(--bg-primary-rgb), 0.2)); }
}
/* With a background picture: a firmer dark backdrop behind the text side
   (all over on phones, where the text spans the box), and a soft shadow
   under the letters, so white text stays readable on a busy picture. */
.spotlight--has-bg .spotlight__glow {
    background: linear-gradient(90deg, rgba(var(--bg-primary-rgb), 0.88) 0%, rgba(var(--bg-primary-rgb), 0.7) 50%, rgba(var(--bg-primary-rgb), 0.25) 80%, rgba(var(--bg-primary-rgb), 0.1));
}
.spotlight--has-bg.spotlight--media-left .spotlight__glow {
    background: linear-gradient(270deg, rgba(var(--bg-primary-rgb), 0.88) 0%, rgba(var(--bg-primary-rgb), 0.7) 50%, rgba(var(--bg-primary-rgb), 0.25) 80%, rgba(var(--bg-primary-rgb), 0.1));
}
.spotlight--has-bg .spotlight__text :is(p, li) { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
@media (max-width: 759px) {
    .spotlight--has-bg .spotlight__glow,
    .spotlight--has-bg.spotlight--media-left .spotlight__glow {
        background: linear-gradient(0deg, rgba(var(--bg-primary-rgb), 0.9), rgba(var(--bg-primary-rgb), 0.72) 60%, rgba(var(--bg-primary-rgb), 0.55));
    }
}
@keyframes spotlight-float {
    from { translate: 0 0; }
    to { translate: 0 -10px; }
}
@keyframes spotlight-sweep {
    0% { left: -40%; }
    35%, 100% { left: 110%; }
}

/* ---- Timeline ---- */
.timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* The glowing line. */
.timeline::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 17px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent, var(--primary-400) 8%, var(--primary-600) 92%, transparent);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.6);
}
.timeline__item { position: relative; padding-left: 52px; }
.timeline__item + .timeline__item { margin-top: 1.1rem; }
.timeline__dot {
    position: absolute;
    top: 1.35rem;
    left: 9px;
    width: 18px;
    height: 18px;
    border: 3px solid var(--bg-primary);
    border-radius: 50%;
    background: var(--primary-400);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.6), 0 0 14px rgba(var(--primary-rgb), 0.8);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.timeline__card {
    padding: 1.15rem 1.35rem;
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    border-radius: 12px;
    box-shadow: 0 0px 20px rgba(var(--primary-rgb), 0.2);
    background: radial-gradient(80% 60% at 100% 0%, rgba(var(--primary-rgb), 0.30), transparent 70%),
        rgba(0, 16, 64, 0.3);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.timeline__card:hover { border-color: rgba(var(--primary-rgb), 0.55); }
.timeline__period {
    display: inline-block;
    margin: 0 0 0.6rem;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--primary-400);
    background: linear-gradient(90deg, #ffffff, var(--primary-400));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.timeline__text ul { margin-bottom: 0; }
.timeline__text p,
.timeline__text li { font-size: 14px; line-height: 1.55; }
.timeline__text > :last-child { margin-bottom: 0; }
/* Before a milestone scrolls in (app.js): dot unlit, card waiting. */
.timeline__item.is-armed:not(.is-visible) .timeline__dot { background: var(--bg-surface-2); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25); }
.timeline__item.is-armed:not(.is-visible) .timeline__card { opacity: 0; transform: translateX(-24px); }
.timeline__item.is-visible .timeline__dot { animation: timeline-dot-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Wide screens: the line in the middle, milestones alternating sides. */
@media (min-width: 900px) {
    .timeline::before { left: 50%; margin-left: -1px; }
    .timeline__item { width: 50%; padding: 0 2.75rem 0 0; }
    .timeline__item:nth-child(even) { margin-left: 50%; padding: 0 0 0 2.75rem; }
    .timeline__item + .timeline__item { margin-top: -0.75rem; }
    .timeline__dot { left: auto; right: -9px; }
    .timeline__item:nth-child(even) .timeline__dot { right: auto; left: -9px; }
    .timeline__item.is-armed:not(.is-visible):nth-child(even) .timeline__card { transform: translateX(24px); }
}
@keyframes timeline-dot-pop {
    0% { transform: scale(0.4); }
    60% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ---- Contact ---- */
.contact-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 12px;
    background:
        radial-gradient(60% 100% at 0% 0%, rgba(var(--primary-rgb), 0.22), transparent 70%),
        var(--bg-surface);
}
@media (min-width: 900px) {
    .contact-panel:not(.contact-panel--no-channels) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
}
.contact-panel__title { margin-bottom: 0.75rem; }
.contact-panel__text > :last-child { margin-bottom: 0; }
/* auto-fit (not auto-fill): the channels stretch across the whole space
   beside the text, however many there are, instead of leaving empty
   column slots. */
.contact-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.contact-channel {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.contact-channel--link:hover,
.contact-channel--link:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(var(--primary-rgb), 0.7);
    background: rgba(var(--primary-rgb), 0.12);
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.2);
}
.contact-channel--link:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.contact-channel__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
    color: #ffffff;
}
.contact-channel__icon-svg { width: 22px; height: 22px; }
.contact-channel__icon img { width: 26px; height: 26px; object-fit: contain; }
.contact-channel__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.contact-channel__label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.contact-channel__value { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.contact-channel__go {
    flex: none;
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: var(--primary-400);
    transition: transform 0.2s ease;
}
.contact-channel--link:hover .contact-channel__go { transform: translate(2px, -2px); }

/* ---- Text block ---- */
.text-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; }
@media (min-width: 860px) {
    .text-block--has-media { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
    .text-block--media-left { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
    .text-block--media-left .text-block__media { order: -1; }
}
.text-block__title { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
/* .text-block__text { max-width: 900px; } */
.text-block__text > :last-child { margin-bottom: 0; }
.text-block__media img { display: block; width: 100%; border-radius: 12px; }
.text-block--card {
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(var(--secondary-rgb), 0.05) 70%),
        var(--bg-surface);
}
.text-block--notice {
    padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(var(--secondary-rgb), 0.4);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--secondary-rgb), 0.12), rgba(var(--secondary-rgb), 0.03));
}
.text-block--notice .text-block__title { color: var(--secondary-400); font-size: clamp(20px, 2.4vw, 26px); }
.text-block__notice-icon { flex: none; width: 26px; height: 26px; }
.text-block--notice .text-block__text p { font-size: 14px; }

/* ---- Access panel (login / sign-up showcase — access-panel.blade.php) ----
   The designer's sign-in screen: a rounded box split into a glowing brand
   side and a sign-in card. Nothing in the card is a real input — the
   field rows are links — so it reads as a form but only leads on to the
   real sign-in page. Under 860px the brand side becomes a short banner
   above the card. */
.access-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    overflow: hidden;
    min-height: 460px;
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 12px;
    background: var(--bg-surface);
    box-shadow: 0 0 34px rgba(var(--primary-rgb), 0.18);
}
.access-panel__brand {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    background:
        radial-gradient(55% 60% at 50% 45%, rgba(var(--primary-rgb), 0.55), transparent 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 9px),
        var(--bg-primary);
}
.access-panel__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* A slow drifting glow behind the welcome text. */
.access-panel__glow {
    position: absolute;
    inset: -20%;
    z-index: -1;
    background: radial-gradient(35% 35% at 50% 50%, rgba(var(--primary-rgb), 0.35), transparent 70%);
    animation: access-glow-drift 9s ease-in-out infinite alternate;
    pointer-events: none;
}
.access-panel__brand-content { position: relative; z-index: 1; max-width: 420px; }
.access-panel__eyebrow { margin: 0 0 0.6rem; }
.access-panel__eyebrow span {
    display: block;
    color: var(--text-white-78);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.access-panel__title {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0 28px rgba(var(--primary-rgb), 0.55);
}
.access-panel__title p { margin: 0; color: inherit; font: inherit; }
.access-panel__title strong {
    color: var(--primary-400);
    text-shadow: 0 0 24px rgba(var(--primary-rgb), 0.8);
}
.access-panel__tagline { margin-top: 0.9rem; }
.access-panel__tagline p { margin: 0; color: var(--text-white-78); font-size: 15px; }
.access-panel__checklist {
    display: grid;
    gap: 0.5rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.access-panel__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(var(--bg-primary-rgb), 0.45);
    color: var(--text-white-78);
    font-size: 13.5px;
    line-height: 1.4;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.access-panel__check-icon { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--primary-400); }
.access-panel__media {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    max-width: 45%;
    max-height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
    pointer-events: none;
}

.access-panel__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.06), transparent 40%), var(--bg-surface-2);
}
.access-panel__card-title {
    margin: 0 0 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.access-panel__card-title span {
    display: inline-block;
    padding: 0 0.25rem 0.6rem;
    border-bottom: 2px solid var(--primary-400);
    margin-bottom: -1px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}
.access-panel__socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.access-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.access-social:hover,
.access-social:focus-visible { border-color: rgba(var(--primary-rgb), 0.7); background: rgba(var(--primary-rgb), 0.12); transform: translateY(-1px); }
.access-social__logo { width: 20px; height: 20px; object-fit: contain; }
.access-panel__divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}
.access-panel__divider::before,
.access-panel__divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }

.access-panel__fields { display: grid; gap: 0.85rem; }
.access-field { display: grid; gap: 0.4rem; color: inherit; }
.access-field__label { color: #ffffff; font-size: 13px; font-weight: 600; }
.access-field__box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(var(--bg-primary-rgb), 0.4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.access-field__icon { flex: none; width: 17px; height: 17px; color: var(--text-muted); }
.access-field__placeholder { color: var(--text-muted); font-size: 14px; }
a.access-field:hover .access-field__box,
a.access-field:focus-visible .access-field__box {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}
a.access-field:focus-visible { outline: none; }
.access-panel__cta { width: 100%; justify-content: center; margin-top: 0.4rem; }
.access-panel__note { text-align: center; }
.access-panel__note p { margin: 0; color: var(--text-secondary); font-size: 13.5px; }
.access-panel__note p + p { margin-top: 0.35rem; }
.access-panel__note a { color: var(--primary-400); font-weight: 600; text-decoration: none; }
.access-panel__note a:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .access-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .access-panel__brand { padding: 2rem 1.5rem; }
    .access-panel__media { max-height: 100%; opacity: 0.45; }
}
@media (max-width: 540px) {
    .access-panel__checklist,
    .access-panel__media { display: none; }
}
@keyframes access-glow-drift {
    from { transform: translate(-6%, -4%) scale(1); }
    to { transform: translate(6%, 4%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .access-panel__glow { animation: none; }
    .access-social { transition: none; }
    .access-social:hover,
    .access-social:focus-visible { transform: none; }
}

/* ---- Steps ----
   "cards": numbered cards side by side (as many columns as steps, up to
   5; 2 on tablets, stacked on phones), their number badges joined by a
   glowing line. "list": a compact numbered list, a row per step. */
.steps { margin: 0; padding: 0; list-style: none; }
.step { position: relative; }
.step__number {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15), 0 8px 20px rgba(var(--primary-rgb), 0.45);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
.step__title {
    margin: 0 0 0.45rem;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}
.step__text p,
.step__text li { font-size: 14px; line-height: 1.6; }
.step__text > :last-child { margin-bottom: 0; }

.steps--cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
@media (min-width: 640px) {
    .steps--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .steps--cards { position: relative; grid-template-columns: repeat(min(var(--step-count), 5), minmax(0, 1fr)); }
    /* The line joining the first row's number badges, behind the cards
       (absolutely positioned, so it isn't a grid item). */
    .steps--cards::before {
        content: "";
        position: absolute;
        top: calc(1.4rem + 22px);
        left: 2rem;
        right: 2rem;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--primary-400) 8%, var(--primary-400) 92%, transparent);
        box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.6);
    }
}
.steps--cards .step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem 1.3rem 1.5rem;
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    border-radius: 12px;
    box-shadow: 0 0px 20px rgba(var(--primary-rgb), 0.2);
    background: radial-gradient(80% 60% at 100% 0%, rgba(var(--primary-rgb), 0.30), transparent 70%),
        rgba(0, 16, 64, 0.3);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.steps--cards .step:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-rgb), 0.6);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(var(--primary-rgb), 0.18);
}
.steps--cards .step:hover .step__number { transform: scale(1.12) rotate(-6deg); }
/* The card sits over the joining line; its number badge is what shows on it. */
.steps--cards .step { z-index: 1; }
.step__media { overflow: hidden; border-radius: 12px; }
.step__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.steps--list {
    display: grid;
    gap: 0.75rem;
    counter-reset: none;
}
.steps--list .step {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 0px 20px rgba(var(--primary-rgb), 0.2);
    background: radial-gradient(80% 60% at 100% 0%, rgba(var(--primary-rgb), 0.30), transparent 70%),
        rgba(0, 16, 64, 0.3);
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.steps--list .step:hover { border-color: rgba(var(--primary-rgb), 0.5); background: rgba(var(--primary-rgb), 0.07); }
.steps--list .step__number { width: 38px; height: 38px; font-size: 15px; }
.steps--list .step__title { margin-bottom: 0.25rem; }
/* Optional closing note under the steps (outro_text), e.g. a security note. */
.steps__outro {
    margin-top: 1.25rem;
    padding: 0.95rem 1.2rem;
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-left: 3px solid var(--primary-400);
    border-radius: 12px;
    background: rgba(var(--primary-rgb), 0.07);
}
.steps__outro p { margin: 0; font-size: 14px; line-height: 1.6; }
.steps__outro p + p { margin-top: 0.5em; }

@media (prefers-reduced-motion: reduce) {
    .step,
    .step__number { transition: none; }
    .steps--cards .step:hover,
    .steps--cards .step:hover .step__number { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .info-card,
    .info-card::before,
    .info-card__icon,
    .info-card__media img,
    .timeline__card,
    .contact-channel,
    .contact-channel__go,
    .spotlight__button-icon { transition: none; }
    .info-card:hover,
    .contact-channel--link:hover,
    .contact-channel--link:focus-visible { transform: none; }
    .info-card:hover .info-card__icon { transform: none; }
    .info-card:hover .info-card__media img { scale: none; }
    .spotlight__media img,
    .spotlight__glow::after,
    .timeline__item.is-visible .timeline__dot { animation: none; }
}

/* Screen-reader-only text (e.g. a select's label). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================
   Game list section (game-list.blade.php / game-card.blade.php)
   Filter bar (category tabs + provider select), a header with the
   current category, "View all" and ‹ › paging, then a grid of the
   admin's columns (1–5, see .cols-grid) × 2 rows. Filtering/paging runs
   in app.js.
   ============================================================= */
.game-list__filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 16px;
    padding: 0.4rem;
    /* border: 1px solid var(--border-subtle); */
    /* border-radius: 14px; */
    /* background: var(--bg-surface); */
}
.game-list__tabs {
    display: flex;
    /* flex: 1; */
    gap: 0.35rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg-surface);
    border-radius: 12px;
}
.game-list__tabs::-webkit-scrollbar { display: none; }
.game-list__tab {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.45rem;
    padding: 12px 12px;
    border: 0px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text-white-78);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.game-list__tab:hover { background: var(--bg-surface-2); color: #ffffff; }
.game-list__tab.is-active {
    background: linear-gradient(90deg, #59E0FB 0%, #1364DC 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.4);
}
.game-list__tab:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
/* Category icons (Lucide; an uploaded image keeps its own colours): white
   at 80% — in the tabs and beside the list's label ("Fishing"); white on
   the selected tab. */
.game-list__tab-icon-wrap { display: inline-flex; color: rgba(255, 255, 255, 0.8); }
.game-list__tab .game-list__tab-icon-wrap { color: rgba(255, 255, 255, 0.8); }
.game-list__tab.is-active .game-list__tab-icon-wrap { color: #ffffff; }
.game-list__tab-icon { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }

.game-list__provider select {
    min-width: 170px;
    padding: 0.55rem 2.2rem 0.55rem 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.8rem center;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
}
.game-list__provider select:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }

/* =============================================================
   Custom dropdown — app.js swaps each <select data-custom-select> (whose
   style above is the no-JS fallback) for a button + floating listbox:
   a glassy panel that drops in, a theme-coloured active row, a check on
   the selected one, and optional logos (an option's data-image).
   ============================================================= */
.custom-select { position: relative; min-width: 100px; }
.custom-select__button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.85rem 0.55rem 1rem;
    border: 1px solid var(--bg-surface);
    border-radius: 12px;
    background: var(--bg-surface);
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.custom-select__button:hover,
.custom-select.is-open .custom-select__button {
    border-color: rgba(var(--primary-rgb), 0.8);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18), 0 6px 18px rgba(var(--primary-rgb), 0.2);
}
.custom-select__button:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.custom-select__value { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.custom-select__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select__image {
    flex: none;
    width: 34px;
    height: 20px;
    object-fit: contain;
}
.custom-select__caret {
    flex: none;
    width: 16px;
    height: 16px;
    color: rgba(#FFFFFF, 0.8);
    transition: transform 0.25s ease;
}
.custom-select.is-open .custom-select__caret { transform: rotate(180deg); }

.custom-select__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 100%;
    max-height: 300px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 12px;
    background: rgba(var(--bg-surface-rgb), 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb), 0.5) transparent;
}
.custom-select__list:focus { outline: none; }
.custom-select.is-open .custom-select__list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.custom-select__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    color: var(--text-white-78);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.custom-select__option + .custom-select__option { margin-top: 2px; }
.custom-select__option .custom-select__text { flex: 1; }
.custom-select__option.is-active { background: rgba(var(--primary-rgb), 0.18); color: #ffffff; }
.custom-select__option[aria-selected="true"] {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
    color: #ffffff;
    font-weight: 600;
}
.custom-select__check { flex: none; width: 15px; height: 15px; opacity: 0; }
.custom-select__option[aria-selected="true"] .custom-select__check { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .custom-select__button,
    .custom-select__caret,
    .custom-select__list,
    .custom-select.is-open .custom-select__list { transition: none; }
}

.game-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0.9rem;
}
.game-list__current {
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: #DEDEE3;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
/* A heading-less list's ⓘ, right after its category label; it pushes the
   controls to the right (the header itself spaces its items apart). */
.game-list__header > .game-list__info { flex: none; width: 28px; height: 28px; margin: 0 auto 0 -6px; }
.game-list__controls { display: flex; flex-shrink: 0; align-items: center; gap: 0.45rem; }
.game-list__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.6rem 0.4rem 0.8rem;
    /* border: 1px solid var(--border-subtle); */
    border-radius: 12px;
    background: var(--bg-surface-2);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.game-list__view-all:hover { border-color: rgba(var(--primary-rgb), 0.8); box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.35); }
.game-list__view-all-icon { width: 16px; height: 16px; transition: transform 0.2s ease; }
.game-list__view-all:hover .game-list__view-all-icon { transform: translateX(2px); }

/* Game list controls — category tabs, the provider dropdown (button and
   its options) and "View all": Inter Medium 12px, 150% line height, -2%
   tracking, white at 80%. :where() keeps the dropdown rules at the same
   weight as the base ones, so hover, the active tab and the selected
   option still switch to full white. */
.game-list__tab,
:where(.game-list__provider) select,
:where(.game-list__provider) .custom-select__button,
:where(.game-list__provider) .custom-select__option,
.game-list__view-all {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.8);
}
.game-list__page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface-2);
    color: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.game-list__page-btn:hover:not(:disabled) { border-color: rgba(var(--primary-rgb), 0.8); box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.35); }
.game-list__page-btn:disabled { opacity: 0.35; cursor: default; }
.game-list__page-icon { width: 18px; height: 18px; }

.game-list__empty { margin: 0; padding: 2.5rem 0; text-align: center; color: var(--text-white-78); }
.game-list__empty[hidden] { display: none; }

/* Card grid for game and provider lists: .cols-grid--N is the admin's
   cards per row (1–5, PageSection::listColumns()) on wide screens;
   narrower screens show fewer — at most 4, then 3, then 2 on phones —
   never more than N. app.js reads the resulting column count to size each
   page (columns × data-rows). */
.cols-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 541px) {
    .cols-grid--2, .cols-grid--3, .cols-grid--4, .cols-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 861px) {
    .cols-grid--3, .cols-grid--4, .cols-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1101px) {
    .cols-grid--4, .cols-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1201px) {
    .cols-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .cols-grid { gap: 0.75rem; }
    .cols-grid--2, .cols-grid--3, .cols-grid--4, .cols-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .game-list__filters { flex-wrap: wrap; }
    .game-list__provider { flex: 1 1 100%; }
    .game-list__provider select,
    .game-list__provider .custom-select { width: 100%; }
    .game-list__provider .custom-select__list { left: 0; }
    .game-list__current { font-size: 16px; }
}

/* ---- Game card (both designs) ---- */
.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    border-radius: 12px;
    color: #ffffff;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.game-card[hidden] { display: none; }
.game-card:hover,
.game-card:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(var(--primary-rgb), 0.9);
    box-shadow: 0 14px 32px rgba(var(--primary-rgb), 0.35), 0 0 0 1px rgba(var(--primary-rgb), 0.35);
}
.game-card:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 3px; }

.game-card__media { position: relative; display: block; overflow: hidden; border-radius: 12px; }
.game-card__image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.game-card:hover .game-card__image,
.game-card:focus-visible .game-card__image { transform: scale(1.08); }
/* A wide image (e.g. a sports provider's logo used as the game image) is
   shown whole — fitted and centred, with a little room — instead of being
   cropped to fill the box. app.js adds .is-wide from the image's shape. */
.game-card__image.is-wide { object-fit: contain; padding: 8%; }

/* Hover: the image dims, a light streak sweeps across, and the play
   button pops in (with a springy overshoot) inside a pulsing ring. */
/* An even dark layer over the whole image (not a vignette — that left the
   middle looking uncovered), so the play button stands out. */
.game-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(var(--bg-primary-rgb), 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.game-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.75s ease;
    pointer-events: none;
}
.game-card:hover .game-card__media::before,
.game-card:focus-visible .game-card__media::before { opacity: 1; }
.game-card:hover .game-card__media::after,
.game-card:focus-visible .game-card__media::after { transform: translateX(120%); }

.game-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary-400), var(--secondary-500));
    color: #1a1300;
    box-shadow: 0 6px 22px rgba(var(--secondary-rgb), 0.55);
    opacity: 0;
    transform: scale(0.4) rotate(-30deg);
    transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* No extra nudge: the icon's path is already drawn with its centroid at
   the viewBox centre, which is what reads as centred for a triangle. */
.game-card__play svg { display: block; }
.game-card__play::before {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(var(--secondary-rgb), 0.75);
    border-radius: 50%;
    opacity: 0;
}
.game-card:hover .game-card__play,
.game-card:focus-visible .game-card__play { opacity: 1; transform: scale(1) rotate(0); }
.game-card:hover .game-card__play::before,
.game-card:focus-visible .game-card__play::before { animation: game-play-pulse 1.4s ease-out infinite; }

/* Special (promo) games and providers: a polished-gold "SPECIAL" badge
   (shared by game-card.blade.php and provider-list.blade.php) with a glint
   sweeping across it every few seconds, plus a slowly pulsing glow on the
   card. The gold is fixed (not the theme colour) — it reads as "premium"
   whatever the branding. */
.special-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    overflow: hidden;
    /* The Gold promotion badge's look (PromotionCategory::TEMPLATES['gold']
       + .promo-badge): corner-to-corner gold gradient, no border, Inter
       Bold 12px -2% uppercase in #141829. */
    padding: 3px 12px;
    border: 0;
    border-radius: 5px;
    background: linear-gradient(to bottom right, #916643 0%, #FBE67B 25%, #FCFBE7 50%, #F7D14E 75%, #D4A041 100%);
    color: #141829;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 10px rgba(247, 209, 78, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.special-badge::after {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    transform: skewX(-20deg);
    animation: game-badge-shine 2.8s ease-in-out infinite;
}
/* A promotion category's badge (<x-promotion-badge>) — same shining metal
   treatment as .special-badge, with its colours coming from the category's
   template (PromotionCategory::TEMPLATES → --promo-* custom properties),
   so gold, silver, bronze, normal, etc. all shine the same way. */
.promo-badge {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 3px 12px;
    /* No border on any template. */
    border: 0;
    border-radius: 5px;
    background: var(--promo-bg, #152038);
    /* Text: Inter Bold 12px, -2% tracking, uppercase. Colour from the
       template (PromotionCategory::TEMPLATES): #141829 on the metals and
       gems, white at 60% on Normal. */
    color: var(--promo-fg, rgba(255, 255, 255, 0.6));
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: var(--promo-shadow, none);
    box-shadow: 0 0 10px var(--promo-glow, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.promo-badge::after {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    transform: skewX(-20deg);
    animation: game-badge-shine 2.8s ease-in-out infinite;
}
/* The darker templates catch less light. */
.promo-badge--normal::after,
.promo-badge--bronze::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); }
@media (prefers-reduced-motion: reduce) {
    .promo-badge::after { display: none; }
}

@keyframes game-badge-shine {
    0%, 55% { left: -60%; }
    85%, 100% { left: 130%; }
}
.game-card.is-special { border-color: rgba(var(--secondary-rgb), 0.75); animation: game-special-glow 2.4s ease-in-out infinite; }

/* Entrance when a tab/provider/page change reveals cards: rise and fade
   in, one after another (--i = position on the page, set in app.js). */
/* "backwards" (not "both"): hidden during its stagger delay, but it lets
   go of transform once finished, so the hover lift still works. */
.game-card.is-entering { animation: game-card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.game-card.is-special.is-entering {
    animation: game-card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, game-special-glow 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 45ms), 0s;
}

/* ---- Design 1: framed — inset rounded image, title/provider below ---- */
.game-card--framed {
    padding: 8px;
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.09), rgba(var(--primary-rgb), 0.02)), var(--bg-surface-2);
}
.game-card--framed .game-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.7rem 0.35rem 0.35rem;
    text-align: center;
}

/* ---- Design 2: cover — a square card the image fills, with the
   provider's logo at the top centre and the title in bold capitals at
   the bottom (always visible), inside a thin glowing theme border. ---- */
.game-card--cover {
    /* Lets the logo size itself relative to the card (cqw units below). */
    container-type: inline-size;
    overflow: hidden;
    border: 2px solid rgba(var(--primary-rgb), 0.7);
    border-radius: 12px;
    box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.3);
}
/* The image area fills the whole card (so the hover layer covers all of
   it, corners included). */
.game-card--cover .game-card__media { flex: 1; border-radius: 12px; }
.game-card--cover .game-card__image { aspect-ratio: 1 / 1; }
/* Framed cards: the slot artwork's own 4:5 shape (512×637), so the whole
   picture shows — the character with the game's logo under it — instead
   of a square crop cutting off its top and bottom. */
.game-card--framed .game-card__image { aspect-ratio: 4 / 5; }
/* Trending lists: a slightly shorter 5:4 image in either card design. */
.game-grid--trending .game-card__image { aspect-ratio: 5 / 4; }
/* …except framed cards, which keep the slot artwork's own 4:5 like the
   filtered list (cover cards — e.g. square live-casino pictures — keep 5:4). */
.game-grid--trending.game-grid--framed .game-card__image { aspect-ratio: 4 / 5; }

/* Provider logo, top centre, over a dark fade across the card's top so a
   light logo stays readable on any artwork. */
.game-card__brand {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: 12px 8% 2.2rem;
    background: linear-gradient(180deg, rgba(var(--bg-primary-rgb), 0.7) 0%, rgba(var(--bg-primary-rgb), 0.35) 55%, transparent);
    pointer-events: none;
}
/* Sized relative to the card: 35% of its width, but never taller than
   ~a quarter of it (so a tall/square logo doesn't cover the artwork). */
.game-card__brand-logo {
    display: block;
    width: 35cqw;
    max-width: 100%;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
}
.game-card__brand-name {
    overflow: hidden;
    color: #ffffff;
    font-size: clamp(12px, 6.5cqw, 18px);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* Title, bottom — bold capitals over a dark fade, up to 2 lines. */
.game-card--cover .game-card__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.6rem 0.7rem 0.75rem;
    background: linear-gradient(0deg, rgba(var(--bg-primary-rgb), 0.88) 15%, rgba(var(--bg-primary-rgb), 0.5) 55%, transparent);
    text-align: center;
    pointer-events: none;
}
/* Barlow Bold 40/48px, -2% tracking, uppercase, in the hero title's metal
   gradient (one line tall, repeating per line). 40px on a card of normal
   width; it scales down with narrower cards (cqw: % of the card's width)
   so long names still fit in 2 lines. The shadow is a drop-shadow filter,
   not text-shadow, which would paint over the gradient. */
.game-card--cover .game-card__title {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--font-heading);
    font-size: clamp(20px, 11cqw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: normal;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 1.2em repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75));
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The provider is shown as the logo at the top instead. */
.game-card--cover .game-card__provider { display: none; }
/* Only the title text lifts on hover — the dark fade behind it stays
   anchored to the card's bottom edge, so no strip of image shows below. */
.game-card--cover:hover .game-card__title,
.game-card--cover:focus-visible .game-card__title { transform: translateY(-4px); }

.game-card__title {
    max-width: 100%;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}
/* Framed card title (under the image): Inter Bold 18px, -2% tracking, in
   the hero title's metal gradient. (The cover style keeps its own big
   uppercase title above.) */
.game-card--framed .game-card__title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 1.25em repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: filter 0.2s ease;
}
/* Provider: Inter Regular 14px, -2% tracking, white at 80%. */
.game-card__provider {
    max-width: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Hover: the metal title brightens. */
.game-card--framed:hover .game-card__title,
.game-card--framed:focus-visible .game-card__title { filter: brightness(1.2); }

@keyframes game-play-pulse {
    0% { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.5); opacity: 0; }
}
@keyframes game-special-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(var(--secondary-rgb), 0); }
    50% { box-shadow: 0 0 18px rgba(var(--secondary-rgb), 0.45); }
}
@keyframes game-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .game-card,
    .game-card__image,
    .game-card__media::before,
    .game-card__media::after,
    .game-card__play,
    .game-card--cover .game-card__title { transition: none; }
    .game-card:hover,
    .game-card:focus-visible,
    .game-card:hover .game-card__image,
    .game-card:focus-visible .game-card__image,
    .game-card--cover:hover .game-card__title,
    .game-card--cover:focus-visible .game-card__title { transform: none; }
    .game-card__media::after { display: none; }
    .game-card__play { transform: none; }
    .game-card:hover .game-card__play::before,
    .game-card:focus-visible .game-card__play::before,
    .game-card.is-special,
    .game-card.is-entering,
    .game-card.is-special.is-entering,
    .special-badge::after { animation: none; }
    .special-badge::after { display: none; }
}

/* =============================================================
   Provider list section (provider-list.blade.php) — one row of provider
   logo tiles, paged with ‹ › (shares the game list's filter bar, header
   and paging code). Logos sit muted in greyscale so the row reads as
   one tidy strip; hovering a tile blooms its logo into full colour, lifts
   it, sweeps a light streak across, and a soft theme-colour spotlight
   follows the pointer (--mx/--my, set in app.js).
   ============================================================= */

.provider-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 1rem 1.25rem;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface-2);
    color: #ffffff;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.provider-card[hidden] { display: none; }
/* The pointer-following spotlight. */
.provider-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--primary-rgb), 0.3), transparent 65%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* The light streak. */
.provider-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.18) 45%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.8s ease;
    pointer-events: none;
}
.provider-card:hover,
.provider-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-rgb), 0.7);
    box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.28);
}
.provider-card:hover::before,
.provider-card:focus-visible::before { opacity: 1; }
.provider-card:hover::after,
.provider-card:focus-visible::after { transform: translateX(120%); }
.provider-card:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 3px; }

.provider-card__logo {
    display: block;
    max-width: 100%;
    max-height: 44px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.4);
    opacity: 0.75;
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.provider-card:hover .provider-card__logo,
.provider-card:focus-visible .provider-card__logo {
    filter: none;
    opacity: 1;
    transform: scale(1.08);
}
.provider-card__name {
    overflow: hidden;
    color: var(--text-white-78);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;
}
.provider-card:hover .provider-card__name { color: #ffffff; }
.provider-card .special-badge { top: 6px; left: 6px; font-size: 9px; padding: 2px 7px; }

.provider-card.is-special { border-color: rgba(var(--secondary-rgb), 0.6); animation: game-special-glow 2.4s ease-in-out infinite; }
/* Same staggered entrance as game cards on a tab/page change. */
.provider-card.is-entering { animation: game-card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.provider-card.is-special.is-entering {
    animation: game-card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, game-special-glow 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 45ms), 0s;
}

@media (prefers-reduced-motion: reduce) {
    .provider-card,
    .provider-card::before,
    .provider-card__logo { transition: none; }
    .provider-card::after { display: none; }
    .provider-card:hover,
    .provider-card:focus-visible,
    .provider-card:hover .provider-card__logo,
    .provider-card:focus-visible .provider-card__logo { transform: none; }
    .provider-card.is-special,
    .provider-card.is-entering,
    .provider-card.is-special.is-entering { animation: none; }
}

/* =============================================================
   Promotions section (promotion-list / promotion-card /
   promotion-dialog / promotion-slideshow .blade.php)
   Latest & filtered: a header (title left; top-right button or category
   pills + ‹ › right) and a grid of tall glowing cards. Slideshow: a
   centred carousel of wide slides with the neighbours peeking in.
   "Read More" opens a <dialog> with the full description (app.js).
   ============================================================= */
.promo-list__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}
/* Same font as the game list's title (.game-list__current): Inter
   SemiBold 18px, -2% tracking, #DEDEE3. */
.promo-list__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #DEDEE3;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.promo-list__title-icon { width: 22px; height: 22px; color: var(--primary-400); }
.promo-list__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
    margin-left: auto;
}
.promo-pills { display: flex; gap: 0.4rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.promo-pills::-webkit-scrollbar { display: none; }
.promo-pill {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface-2);
    color: var(--text-white-78);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.promo-pill:hover { color: #ffffff; }
.promo-pill.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.45);
}
.promo-pill:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }

.promo-grid { gap: 1.25rem; }
/* Phones: one tall card per row. */
@media (max-width: 540px) {
    .promo-grid.cols-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Promotion card: a two-sided card that flips in 3D ----
   .promo-card is the grid cell (fixed 3:4 shape, lifts on hover);
   .promo-card__inner rotates (180° when .is-flipped — app.js); the two
   faces sit back to back with backface-visibility hidden. */
.promo-card {
    position: relative;
    aspect-ratio: 3 / 4;
    perspective: 1400px;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.promo-card[hidden] { display: none; }
.promo-card__inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.promo-card.is-flipped .promo-card__inner { transform: rotateY(180deg); }
.promo-card__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    border: 1.5px solid rgba(var(--primary-rgb), 0.8);
    border-radius: 12px;
    background: radial-gradient(90% 70% at 50% 20%, rgba(var(--primary-rgb), 0.45), transparent 70%), var(--bg-surface);
    box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.35);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: box-shadow 0.35s ease;
}
.promo-card__face--front { justify-content: flex-end; }
.promo-card__face--back {
    gap: 0.6rem;
    padding: 1.1rem 1.1rem 1.2rem;
    background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.3) 0%, var(--bg-surface) 55%);
    transform: rotateY(180deg);
}
/* The neon inner edge glow, drawn above everything on both faces. */
.promo-card__face::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    box-shadow: inset 0 0 22px rgba(var(--primary-rgb), 0.45);
    pointer-events: none;
}
.promo-card__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Dark fade behind the front's text. */
/* The dark fade behind the front's text (over the image, under the text). */
.promo-card__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(var(--bg-primary-rgb), 0.97) 0%, rgba(var(--bg-primary-rgb), 0.8) 32%, rgba(var(--bg-primary-rgb), 0.2) 58%, transparent 72%);
    pointer-events: none;
}
.promo-card:hover,
.promo-card:focus-within { transform: translateY(-6px); }
.promo-card:hover .promo-card__face,
.promo-card:focus-within .promo-card__face { box-shadow: 0 14px 34px rgba(var(--primary-rgb), 0.4), 0 0 26px rgba(var(--primary-rgb), 0.5); }
.promo-card:hover .promo-card__image,
.promo-card:focus-within .promo-card__image { transform: scale(1.06); }
.promo-card__badge { position: absolute; top: 12px; left: 12px; z-index: 3; }
.promo-card__face--back .promo-badge { align-self: flex-start; }
.promo-card__back-title {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}
.promo-card__face--back .promo-period { align-self: flex-start; }
/* The full description scrolls inside the card when it's long. */
.promo-card__description {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb), 0.6) transparent;
}
/* Description: Inter Regular 14px, 150% line height, -2% tracking, white at 80%. */
.promo-card__description p,
.promo-card__description li {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.8);
}
.promo-card__face--back .promo-switch { align-self: center; margin-top: 0.2rem; }

/* ---- "Claim now | Read more" switch (promotion-switch.blade.php) ----
   Two equal halves over a sliding glowing knob; data-state="claim" puts
   the knob under Claim now (front), "read" under Read more (back). */
.promo-switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 0.6rem;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}
.promo-switch__knob {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 12px;
    /* The site's main button gradient (.btn--primary). */
    background: linear-gradient(90deg, #59E0FB 0%, #1364DC 100%);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.5);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.promo-switch[data-state="read"] .promo-switch__knob { transform: translateX(100%); }
.promo-switch__option {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.1rem;
    border: 0;
    border-radius: 12px;
    background: none;
    /* Inter Medium 14px, 150% line height, -2% tracking; #B2B2BD when
       inactive, white when active (below) or hovered. */
    color: #B2B2BD;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease;
}
.promo-switch[data-state="claim"] .promo-switch__option--claim,
.promo-switch[data-state="read"] .promo-switch__option--read { color: #ffffff; }
.promo-switch__option:hover { color: #ffffff; }
.promo-switch__option:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 1px; }
.promo-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 1rem 1.2rem;
    text-align: center;
}
/* Front text. Both use the hero title's metal gradient (one line tall,
   repeating per line); their shadow is a drop-shadow filter, since a
   text-shadow would paint over the gradient. The card face is a size
   container (cqw = % of the card's width), so the title scales down on
   narrow cards instead of overflowing. */
.promo-card__face { container-type: inline-size; }
/* Small text: Inter Medium 16/24px, -2% tracking. */
.promo-card__small {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 24px repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
/* Title: Barlow Bold 40/48px, -2% tracking, uppercase (40px on a card
   about 360px wide or more, smaller on narrower cards). */
.promo-card__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-family: var(--font-heading);
    font-size: clamp(22px, 11cqw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 1.2em repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
/* "Latest" type: a shorter, square card (the filtered grid keeps the
   tall 3:4 one), with tighter spacing. The text sizes are the same as
   the tall card's (the title scales with the card itself). */
.promo-card { aspect-ratio: 1 / 1; }
.promo-list--latest .promo-card__body { gap: 0.25rem; padding: 0.75rem 0.9rem 0.9rem; }
.promo-list--latest .promo-switch { margin-top: 0.35rem; }
.promo-list--latest .promo-switch__option { padding: 0.45rem 0.95rem; }
.promo-list--latest .promo-card__face--back { gap: 0.45rem; padding: 0.9rem 0.9rem 1rem; }
.promo-list--latest .promo-card__back-title { font-size: 18px; }
@media (max-width: 540px) {
    .promo-list--latest .promo-card { aspect-ratio: 5 / 4; }
}
.promo-card.is-entering { animation: game-card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }

/* Shared: the offer-dates pill and the two buttons. */
/* Offer-dates pill: #000626 at the top to #0432BB at the bottom; text
   Inter Regular 12px, 150% line height, -2% tracking, white at 80%. */
.promo-period {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid rgba(var(--primary-rgb), 0.75);
    border-radius: 999px;
    background: linear-gradient(180deg, #000626 0%, #0432BB 100%);
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.35);
}
.promo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.6rem; }
.promo-actions--start { justify-content: flex-start; }
.promo-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.15rem;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, filter 0.2s ease;
}
.promo-btn--claim {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.45);
}
.promo-btn--claim:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.6); }
.promo-btn--more { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.08); color: var(--text-white-78); }
.promo-btn--more:hover { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
.promo-btn:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }

/* ---- "Read More" dialog ---- */
.promo-dialog {
    width: min(640px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(var(--primary-rgb), 0.6);
    border-radius: 12px;
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(var(--primary-rgb), 0.25);
}
.promo-dialog::backdrop { background: rgba(var(--bg-primary-rgb), 0.8); backdrop-filter: blur(4px); }
.promo-dialog[open] { animation: promo-dialog-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
html:has(.promo-dialog[open]) { overflow: hidden; }
.promo-dialog__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.promo-dialog__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1.4rem 1.5rem 1.6rem;
}
.promo-dialog__title {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}
.promo-dialog__small { margin: 0; color: var(--text-white-78); font-size: 15px; }
.promo-dialog__description { width: 100%; }
.promo-dialog__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(var(--bg-primary-rgb), 0.6);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease;
}
.promo-dialog__close:hover { background: rgba(var(--primary-rgb), 0.5); }
.promo-dialog__close-icon { width: 18px; height: 18px; }
/* ---- Section info (ⓘ) — page-section.blade.php ----
   A decorative section with info_content gets a slim row above it with a
   round ⓘ button at the right (it takes over the section's top gap, so
   the section itself sits just under it), opening .info-dialog: the
   promotion dialog's shell with the admin's rich text inside. */
/* Sections without a title: the ⓘ sits in a slim row above, on the left. */
.section-info-bar {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--section-gap);
}
.section-info-host > .section { margin-top: 0.5rem; }
/* Sections with a title: the ⓘ sits right after it on the same line
   (<x-section-title>); the row takes over the title's bottom margin. */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}
.section-title-row > :first-child { flex: 0 1 auto; min-width: 0; margin-bottom: 0; }
.section-title-row > .section-info-btn { flex: none; }
/* Centred titles keep the title + ⓘ pair centred. */
.section-title-row:has(> .vip-section__heading) { justify-content: center; }
/* Each title's usual space below it, moved onto the row (.section__title
   alone: 0.6em of its 36px). */
.section-title-row { margin-bottom: 21.6px; }
.section-title-row:has(> .section__heading) { margin-bottom: 2.2rem; }
.section-title-row:has(> .spotlight__title),
.section-title-row:has(> .contact-panel__title) { margin-bottom: 0.75rem; }
.section-title-row:has(> .text-block__title) { margin-bottom: 1rem; }
/* Promotions: the row sits inside the header, which does the spacing. */
.section-title-row:has(> .promo-list__title) { margin-bottom: 0; }
.section-info-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(var(--primary-rgb), 0.55);
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.14);
    color: var(--primary-400);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* A soft ring that pulses now and then, to hint it's clickable. */
.section-info-btn::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(var(--primary-rgb), 0.6);
    border-radius: 50%;
    animation: section-info-ping 3.5s ease-out infinite;
    pointer-events: none;
}
.section-info-btn:hover,
.section-info-btn:focus-visible {
    background: var(--primary-500);
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.6);
}
.section-info-btn:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.section-info-btn__icon { width: 18px; height: 18px; }
@keyframes section-info-ping {
    0%, 60% { opacity: 0; transform: scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.6); }
}

/* The hero's ⓘ (x-hero-info-button): the same button, pinned to the
   top-right corner of the layout's box (slideshow, banner, top image),
   or of the content area for the full-bleed side-by-side layout. Darker
   and blurred behind, to stay readable over any image. */
.hero-stack { position: relative; }
.hero-info-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    background: rgba(var(--bg-primary-rgb), 0.55);
    color: #ffffff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hero-info-btn--page-edge { top: 0; right: 0; }

.info-dialog { width: min(760px, calc(100% - 2rem)); }

/* A thin, theme-coloured scrollbar for the dialogs (info and promotion)
   instead of the browser's default grey one. The WebKit track is inset
   at the ends so the bar stays clear of the rounded corners. */
.promo-dialog {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb), 0.55) transparent;
}
.promo-dialog::-webkit-scrollbar { width: 6px; }
.promo-dialog::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.promo-dialog::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.55);
}
.promo-dialog::-webkit-scrollbar-thumb:hover { background: var(--primary-400); }
.promo-dialog::-webkit-scrollbar-button { display: none; height: 0; }
.info-dialog__body { padding: 2.75rem clamp(1.25rem, 4vw, 2.25rem) 2rem; }
.info-dialog__body > :first-child { margin-top: 0; }
.info-dialog__body > :last-child { margin-bottom: 0; }

@keyframes promo-dialog-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

/* ---- Slideshow: centred carousel, neighbours peeking in ---- */
.promo-carousel { position: relative; }
.promo-carousel__viewport { overflow: hidden; padding: 14px 0; }
.promo-carousel__track {
    display: flex;
    gap: 1.25rem;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}
.promo-slide {
    display: grid;
    flex: 0 0 76%;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    min-height: 260px;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 12px;
    background: linear-gradient(110deg, rgba(var(--primary-rgb), 0.28) 0%, var(--bg-surface) 70%);
    opacity: 0.4;
    transform: scale(0.94);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}
.promo-slide.is-active {
    border-color: rgba(var(--primary-rgb), 0.6);
    opacity: 1;
    transform: none;
    box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.25);
}
.promo-slide__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; min-width: 0; }
.promo-slide__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 800;
    line-height: 1.15;
}
.promo-slide__small { margin: 0; color: #dbe3f0; font-size: 16px; line-height: 1.35; }
.promo-slide__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.promo-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; }
.promo-carousel__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.18);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.promo-carousel__arrow:hover { background: rgba(var(--primary-rgb), 0.4); box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.45); }
.promo-carousel__arrow:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.promo-carousel__arrow-icon { width: 18px; height: 18px; }
.promo-carousel__dots { display: flex; }
.promo-carousel__dot { width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.promo-carousel__dot::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.45);
    transition: background 0.2s ease, transform 0.2s ease;
}
.promo-carousel__dot[aria-current="true"]::before { background: #ffffff; transform: scale(1.15); }
@media (max-width: 767px) {
    .promo-slide { flex-basis: 88%; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-height: 0; }
    .promo-slide__image { order: -1; aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .promo-card,
    .promo-card__inner,
    .promo-card__image,
    .promo-switch__knob,
    .promo-btn,
    .promo-carousel__track,
    .promo-slide { transition: none; }
    .promo-card:hover,
    .promo-card:focus-within,
    .promo-card:hover .promo-card__image,
    .promo-card:focus-within .promo-card__image,
    .promo-btn--claim:hover { transform: none; }
    .promo-card.is-entering,
    .promo-dialog[open] { animation: none; }
    .section-info-btn { transition: none; }
    .section-info-btn::after { animation: none; display: none; }
    .section-info-btn:hover,
    .section-info-btn:focus-visible { transform: none; }
}

/* =============================================================
   VIP section (vip-section.blade.php / vip-card.blade.php) — four
   kinds: CTA banner, tier tracker, tier list, rewards breakdown.
   ============================================================= */

/* ---- Tier card: an uploaded image, or a generated brushed-metal card
   (credit-card proportions) in the metal its tier name suggests. ---- */
.vip-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1.586;
    border-radius: 12px;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
/* An uploaded card image is often a (tilted) card on a transparent
   background: fit it whole rather than cropping it to the box, and shadow
   the card's own outline (drop-shadow) rather than the rectangular box. */
.vip-card--image {
    border-radius: 0;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}
.vip-card--generated {
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: var(--vip-metal);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --vip-ink: rgba(0, 0, 0, 0.3);
    --vip-ink-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), 0 -1px 0 rgba(0, 0, 0, 0.2);
}
/* Fine brushed-metal lines. */
.vip-card--generated::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px);
    pointer-events: none;
}
/* A soft diagonal sheen. */
.vip-card--generated::after {
    content: "";
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
    transform: translateX(-30%);
    transition: transform 0.9s ease;
    pointer-events: none;
}
.vip-card__brand,
.vip-card__name,
.vip-card__member {
    position: absolute;
    color: var(--vip-ink);
    text-shadow: var(--vip-ink-shadow);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.vip-card__brand { top: 7%; left: 6%; font-family: var(--font-display); font-size: 9cqw; letter-spacing: -0.02em; }
.vip-card__name { right: 6%; bottom: 17%; max-width: 88%; overflow: hidden; font-family: var(--font-heading); font-size: 11cqw; text-overflow: ellipsis; text-transform: uppercase; }
.vip-card__member { right: 6%; bottom: 7%; font-size: 4.5cqw; letter-spacing: 0.1em; }
.vip-card--theme-bronze { --vip-metal: linear-gradient(135deg, #7a5232 0%, #c8946a 30%, #8a5a35 55%, #d6a77d 75%, #6e4628 100%); }
.vip-card--theme-silver { --vip-metal: linear-gradient(135deg, #8d9299 0%, #e3e6ea 30%, #a9aeb5 55%, #f2f4f6 75%, #8a8f96 100%); }
.vip-card--theme-gold { --vip-metal: linear-gradient(135deg, #a7801f 0%, #f3d27a 30%, #c39a2e 55%, #ffe7a3 75%, #9c7419 100%); border-color: #ffe7a3; }
.vip-card--theme-diamond { --vip-metal: linear-gradient(135deg, #c9ced6 0%, #f7f9fb 30%, #dfe3e8 55%, #ffffff 75%, #b8bec7 100%); }
.vip-card--theme-platinum,
.vip-card--theme-royal {
    --vip-ink: rgba(255, 255, 255, 0.82);
    --vip-ink-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.vip-card--theme-platinum { --vip-metal: linear-gradient(135deg, #2a2b2e 0%, #6b6e73 30%, #3a3c40 55%, #8a8d92 75%, #25262a 100%); }
.vip-card--theme-royal { --vip-metal: linear-gradient(135deg, #081540 0%, #1f3fa0 35%, #0d2266 60%, #3157c8 80%, #081540 100%); border-color: rgba(120, 160, 255, 0.6); }

/* ---- 1. CTA banner ----
   A still bar — no animation: a gold crown, the text and the button.
   Same colours as the notification bar (.hero-notice__bar): #141829 for
   the left half fading to #006BFF at the right, deep brand blue border. */
.vip-banner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    overflow: hidden;
    padding: 0.85rem 0.85rem 0.85rem 1rem;
    border: 2px solid var(--primary-900);
    border-radius: 12px;
    background: linear-gradient(90deg, #141829 0%, #141829 50%, #006BFF 100%) padding-box;
    box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.25);
}

/* The gold crown before the text. */
.vip-banner__crown {
    position: relative;
    z-index: 1;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid #fff3b0;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe7a3, #f5b700 60%, #c98a00);
    color: #3b2a00;
    box-shadow: 0 0 14px rgba(255, 200, 40, 0.6);
}
.vip-banner__crown-icon { width: 17px; height: 17px; }

/* Title: Inter SemiBold 20px, -2% tracking, in the hero title's metal
   gradient (one line tall, repeating per line). */
.vip-banner__text {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 1.3em repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Button: Inter Medium 14px, -2% tracking, white, on a #59E0FB → #1364DC
   gradient (this bar only — the promotion cards keep their own). */
.vip-banner__button {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    background: linear-gradient(90deg, #59E0FB 0%, #1364DC 100%);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* ---- 2. Tier tracker ---- */
.vip-section__heading { text-align: center; }
.vip-tracker {
    width: 50%;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 1.7rem;
    border: 1px solid rgba(var(--primary-rgb), 0.45);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.22) 0%, var(--bg-surface) 60%);
    box-shadow: 0 0 22px rgba(var(--primary-rgb), 0.2);
}
@media (max-width: 860px) { .vip-tracker { width: 100%; } }
.vip-tracker__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.vip-tracker__label {
    display: block;
    color: var(--text-white-78);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.vip-tracker__tier {
    display: block;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}
.vip-tracker__bar { position: relative; height: 10px; margin: 2.6rem 1rem 0.5rem; }
.vip-tracker__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.vip-tracker__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-600), var(--primary-400) 70%, var(--secondary-400));
    box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.6);
    transition: width 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}
.vip-tracker__fill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: vip-fill-shine 2.4s ease-in-out infinite;
}
.vip-tracker.is-visible .vip-tracker__fill { width: var(--fill); }
@keyframes vip-fill-shine {
    0% { left: -40%; }
    100% { left: 110%; }
}
/* The admin's icon at the end of the fill. */
.vip-tracker__icon {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid #fff3b0;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe7a3, #f5b700 60%, #c98a00);
    color: #3b2a00;
    box-shadow: 0 0 16px rgba(255, 200, 40, 0.6);
    transform: translate(-50%, -50%);
    transition: left 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
    pointer-events: none;
}
.vip-tracker.is-visible .vip-tracker__icon { left: var(--fill); animation: vip-icon-pulse 2.4s ease-in-out 1.8s infinite; }
.vip-tracker__icon-svg { width: 18px; height: 18px; }
@keyframes vip-icon-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 200, 40, 0.6); }
    50% { box-shadow: 0 0 26px rgba(255, 200, 40, 0.95); }
}
/* One marker per tier; its tooltip shows on hover, focus or tap. */
.vip-tracker__marker {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: var(--bg-surface);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, background 0.3s ease, border-color 0.3s ease;
}
.vip-tracker__marker.is-reached { border-color: #ffffff; background: var(--primary-400); }
.vip-tracker__marker:hover,
.vip-tracker__marker:focus-visible,
.vip-tracker__marker.is-open { transform: translate(-50%, -50%) scale(1.3); }
.vip-tracker__marker:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 3px; }
.vip-tracker__tip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 170px;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(var(--primary-rgb), 0.55);
    border-radius: 12px;
    background: rgba(var(--bg-surface-rgb), 0.96);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
    text-align: left;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px) scale(0.77);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}
.vip-tracker__marker.is-start .vip-tracker__tip { left: -8px; transform: translate(0, 6px) scale(0.77); transform-origin: left bottom; }
.vip-tracker__marker.is-end .vip-tracker__tip { left: auto; right: -8px; transform: translate(0, 6px) scale(0.77); transform-origin: right bottom; }
.vip-tracker__marker:hover .vip-tracker__tip,
.vip-tracker__marker:focus-visible .vip-tracker__tip,
.vip-tracker__marker.is-open .vip-tracker__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(0.77); }
.vip-tracker__marker.is-start:hover .vip-tracker__tip,
.vip-tracker__marker.is-start:focus-visible .vip-tracker__tip,
.vip-tracker__marker.is-start.is-open .vip-tracker__tip,
.vip-tracker__marker.is-end:hover .vip-tracker__tip,
.vip-tracker__marker.is-end:focus-visible .vip-tracker__tip,
.vip-tracker__marker.is-end.is-open .vip-tracker__tip { transform: translate(0, 0) scale(0.77); }
/* (The marker itself is scaled 1.3 when active; the tip's 0.77 cancels
   that out so its text stays at its normal size.) */
.vip-tracker__tip-name { color: #ffffff; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.vip-tracker__tip-line { color: var(--text-white-78); font-size: 12.5px; }

/* ---- 3. Tier list ---- */
.vip-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface);
}
.vip-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; }
.vip-row__info { min-width: 0; }
.vip-row__name { margin: 0 0 0.3rem; color: #ffffff; font-family: var(--font-heading); font-size: 17px; font-weight: 800; text-transform: uppercase; }
.vip-row__requirement { margin: 0; color: var(--text-white-78); font-size: 13.5px; line-height: 1.4; }
.vip-row:hover .vip-row__card { transform: translateY(-3px) rotate(-1.5deg); }
.vip-row:hover .vip-card--generated { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 0 22px rgba(var(--primary-rgb), 0.35); }
.vip-row:hover .vip-card--image { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(var(--primary-rgb), 0.4)); }
.vip-row:hover .vip-card--generated::after { transform: translateX(30%); }
@media (max-width: 600px) {
    .vip-row { grid-template-columns: 120px minmax(0, 1fr); gap: 0.75rem 1rem; }
    .vip-row__button { grid-column: 2; justify-self: start; }
}

/* ---- 4. Rewards breakdown ---- */
.vip-breakdown { position: relative; isolation: isolate; }
/* A soft glow pooled under the panel. */
.vip-breakdown::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -10%;
    z-index: -1;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(var(--primary-rgb), 0.3), transparent 70%);
    pointer-events: none;
}
.vip-breakdown__title {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}
.vip-breakdown__title-accent {
    background: linear-gradient(180deg, #ffe7a3, #f5b700 60%, #c98a00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vip-breakdown__subtitle { margin: 0.4rem 0 0; color: var(--text-white-78); font-size: 15px; text-align: center; }
.vip-breakdown__tabs { display: flex; gap: 0.5rem; margin: 1.6rem 0 0.9rem; overflow-x: auto; scrollbar-width: none; }
.vip-breakdown__tabs::-webkit-scrollbar { display: none; }
.vip-breakdown__tab {
    flex: 1 0 110px;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-white-78);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.vip-breakdown__tab:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.25); }
.vip-breakdown__tab.is-active {
    border-color: #ffe7a3;
    background: linear-gradient(180deg, #f7d98b 0%, #c99a2e 55%, #8a6514 100%);
    color: #1d1400;
    font-weight: 800;
    box-shadow: 0 0 16px rgba(240, 190, 60, 0.45);
}
.vip-breakdown__tab:focus-visible { outline: 2px solid #ffe7a3; outline-offset: 2px; }
.vip-breakdown__panel {
    display: grid;
    grid-template-columns: minmax(200px, 340px) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
    padding: 1.75rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(var(--bg-surface-rgb), 0.75);
    backdrop-filter: blur(4px);
}
.vip-breakdown__panel[hidden] { display: none; }
.vip-breakdown__card-wrap { perspective: 900px; }
.vip-breakdown__card { transform: rotateY(-14deg) rotateX(6deg) rotateZ(-6deg); }
.vip-breakdown__card.vip-card--generated { box-shadow: 0 22px 40px rgba(0, 0, 0, 0.55), 0 0 40px rgba(240, 190, 60, 0.3); }
.vip-breakdown__card.vip-card--image { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(240, 190, 60, 0.35)); }
.vip-breakdown__card-wrap:hover .vip-breakdown__card { transform: rotateY(-4deg) rotateX(2deg) rotateZ(-2deg) translateY(-4px); }
.vip-breakdown__info { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.vip-breakdown__tier { margin: 0; color: #ffffff; font-family: var(--font-heading); font-size: 20px; font-weight: 800; text-transform: uppercase; }
.vip-breakdown__requirement { margin: 0; color: #ffffff; font-size: 16px; }
.vip-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.vip-benefits__item { display: flex; align-items: center; gap: 0.55rem; color: var(--text-white-78); font-size: 14px; }
.vip-benefits__icon { flex-shrink: 0; width: 18px; height: 18px; color: #ffffff; object-fit: contain; }
/* Switching tabs: the card swings in, the text rises in. */
.vip-breakdown__panel.is-entering .vip-breakdown__card { animation: vip-card-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vip-breakdown__panel.is-entering .vip-breakdown__info { animation: game-card-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards; }
@keyframes vip-card-in {
    from { opacity: 0; transform: rotateY(-50deg) rotateX(10deg) rotateZ(-10deg) translateX(-30px); }
    to { opacity: 1; transform: rotateY(-14deg) rotateX(6deg) rotateZ(-6deg); }
}
@media (max-width: 760px) {
    .vip-breakdown__panel { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem; }
    .vip-breakdown__card-wrap { max-width: 300px; margin: 0 auto; }
    .vip-benefits { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .vip-card,
    .vip-card--generated::after,
    .vip-tracker__fill,
    .vip-tracker__icon,
    .vip-tracker__marker,
    .vip-tracker__tip,
    .vip-breakdown__tab { transition: none; }
    .vip-tracker__fill::after,
    .vip-tracker.is-visible .vip-tracker__icon,
    .vip-breakdown__panel.is-entering .vip-breakdown__card,
    .vip-breakdown__panel.is-entering .vip-breakdown__info { animation: none; }
    .vip-row:hover .vip-row__card { transform: none; }
}

/* =============================================================
   Layered banner (a "banner" section — see banner-section.blade.php):
   a rounded box with a background image (or a theme-color gradient), up
   to two cut-out images anchored to its bottom-left/right edges, text +
   buttons on top (left, centre or right), and an optional icon feature
   strip along the bottom. Side images are hidden on phones and the text
   always centres there.
   ============================================================= */
.layered-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: clamp(320px, 34vw, 460px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--secondary-rgb), 0.22);
    background:
        radial-gradient(70% 90% at 15% 15%, rgba(var(--primary-rgb), 0.3), transparent 70%),
        radial-gradient(70% 90% at 85% 15%, rgba(var(--secondary-rgb), 0.22), transparent 70%),
        var(--bg-surface);
}
.layered-banner__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.layered-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: layered-banner-zoom 20s ease-in-out infinite alternate;
}
/* Darkens the image behind the text so it stays readable whatever the
   background, plus a soft fade at the bottom under the feature strip. */
.layered-banner__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(var(--bg-primary-rgb), 0.65), transparent 40%),
        radial-gradient(60% 75% at 50% 50%, rgba(var(--bg-primary-rgb), 0.55), rgba(var(--bg-primary-rgb), 0.1));
}
.layered-banner--left .layered-banner__shade {
    background:
        linear-gradient(to top, rgba(var(--bg-primary-rgb), 0.65), transparent 40%),
        linear-gradient(90deg, rgba(var(--bg-primary-rgb), 0.75), rgba(var(--bg-primary-rgb), 0.05) 65%);
}
.layered-banner--right .layered-banner__shade {
    background:
        linear-gradient(to top, rgba(var(--bg-primary-rgb), 0.65), transparent 40%),
        linear-gradient(270deg, rgba(var(--bg-primary-rgb), 0.75), rgba(var(--bg-primary-rgb), 0.05) 65%);
}
.layered-banner--plain .layered-banner__shade { display: none; }

/* The section's ⓘ (info content), inside the banner's top-left corner —
   darker and blurred behind, like the hero's, to stay readable on any
   background. Above the side images and content. */
.layered-banner > .layered-banner__info {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: rgba(var(--bg-primary-rgb), 0.55);
    color: #ffffff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.layered-banner__side {
    position: absolute;
    /* Below the edge by the float distance, so floating never lifts the
       image's bottom into view. */
    bottom: -8px;
    z-index: 0;
    height: 96%;
    width: auto;
    max-width: 30%;
    object-fit: contain;
    object-position: bottom;
    pointer-events: none;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
    animation: layered-banner-float 6s ease-in-out infinite alternate;
}
.layered-banner__side--left { left: 2%; object-position: bottom left; }
.layered-banner__side--right { right: 2%; object-position: bottom right; animation-delay: -3s; }
/* A lone side image moves further in from its edge so it sits inside
   the banner rather than hugging its border; with two, both stay near
   the edges to leave room for the text between them. */
.layered-banner--has-left:not(.layered-banner--has-right) .layered-banner__side--left { left: clamp(1rem, 14%, 14rem); }
.layered-banner--has-right:not(.layered-banner--has-left) .layered-banner__side--right { right: clamp(1rem, 14%, 14rem); }

.layered-banner__content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.layered-banner--left .layered-banner__content,
.layered-banner--right .layered-banner__content {
    align-items: flex-start;
    text-align: left;
}
.layered-banner--left .layered-banner__content { margin-left: 0; }
.layered-banner--right .layered-banner__content { margin-right: 0; }

.layered-banner__logo { margin-bottom: 0.75rem; }
.layered-banner__logo img { display: block; height: 32px; width: auto; }

/* Small title (every line of the small text): Barlow Bold 20px, 104% line
   height, -2% tracking, uppercase, #7B7B7B. */
.layered-banner__eyebrow { margin: 0 0 0.6rem; }
.layered-banner__eyebrow span {
    display: block;
    color: #7B7B7B;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* Title: Barlow Bold 40/48px, -2% tracking, uppercase, in the hero
   title's metal gradient (one line tall, repeating per line; bold words
   share it). The shadow is a drop-shadow filter — a text-shadow would
   paint over the gradient. */
.layered-banner__title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 48px repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}
.layered-banner__title p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.layered-banner__title strong,
.layered-banner__title b { -webkit-text-fill-color: transparent; }
@media (max-width: 640px) {
    .layered-banner__title { font-size: 30px; line-height: 36px; background-size: 100% 36px; }
}

/* Description: Inter Regular 16/24px, -2% tracking, white at 80%. */
.layered-banner__text { max-width: 46ch; margin-top: 0.9rem; }
.layered-banner__text p {
    margin: 0 0 0.5em;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.8);
}
.layered-banner__text p:last-child { margin-bottom: 0; }

.layered-banner__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.layered-banner--left .layered-banner__buttons,
.layered-banner--right .layered-banner__buttons { justify-content: flex-start; }
/* Buttons: Inter Medium 16/24px, -2% tracking, white; a solid button is
   #59E0FB → #1364DC (an outline one keeps its outline look). */
.layered-banner__buttons .btn {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}
.layered-banner__buttons .btn--primary { background: linear-gradient(90deg, #59E0FB 0%, #1364DC 100%); }
.layered-banner__badge {
    display: inline-block;
    border-radius: 12px;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.layered-banner__badge img { display: block; height: 48px; width: auto; }
.layered-banner__badge:hover,
.layered-banner__badge:focus-visible {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 14px rgba(var(--secondary-rgb), 0.35));
}
.layered-banner__badge:focus-visible { outline: 2px solid var(--secondary-400); outline-offset: 3px; }

.layered-banner__caption {
    margin: 0.75rem 0 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.layered-banner__features {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0;
    margin: 0;
    padding: 0.9rem 1rem;
    list-style: none;
    /* background: rgba(var(--bg-primary-rgb), 0.55); */
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
    /* -webkit-backdrop-filter: blur(6px); */
    /* backdrop-filter: blur(6px); */
}
/* Feature strip — icon, text and separator all in the hero title's metal
   gradient. Text: Inter Medium 16/24px, -2% tracking (gradient one line
   tall, via background-clip: text). Icons: their lines are painted with
   the SVG gradient defined in the banner (--feature-stroke). Separator: a
   1px border drawn with the gradient (border-image). */
.layered-banner__feature-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.layered-banner__feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
}
.layered-banner__feature > span {
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 24px repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.layered-banner__feature + .layered-banner__feature {
    border-left: 1px solid transparent;
    border-image: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 1;
}
.layered-banner__feature-icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: #EAEFF3;
    stroke: var(--feature-stroke, currentColor);
}

/* Desktop/tablet: keep centred text clear of the side images, and nudge
   side-aligned text past an image on its own side. */
@media (min-width: 768px) {
    .layered-banner--center.layered-banner--has-left .layered-banner__content,
    .layered-banner--center.layered-banner--has-right .layered-banner__content { max-width: min(640px, 44%); padding-inline: 0; }
    .layered-banner--left.layered-banner--has-left .layered-banner__content { margin-left: 30%; }
    .layered-banner--right.layered-banner--has-right .layered-banner__content { margin-right: 30%; }
    .layered-banner--left.layered-banner--has-left:not(.layered-banner--has-right) .layered-banner__content { margin-left: 44%; }
    .layered-banner--right.layered-banner--has-right:not(.layered-banner--has-left) .layered-banner__content { margin-right: 44%; }
}
/* Phones: no card — the banner runs edge to edge (out of the page's
   side margins), with the text centred at the top and the cut-out images
   standing below it, the left one in front and the right one a little
   smaller behind it (or a single one centred), then the feature strip.
   A grid stacks them: content / people / features. */
@media (max-width: 767px) {
    .layered-banner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "content" "people" "features";
        width: 100vw;
        min-height: 0;
        margin-inline: calc(50% - 50vw);
        border-radius: 0;
    }
    .layered-banner::after { display: none; }
    .layered-banner__content { grid-area: content; }
    .layered-banner__features { grid-area: features; }
    .layered-banner__side {
        grid-area: people;
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        align-self: end;
        height: clamp(220px, 64vw, 400px);
        max-width: 62%;
        margin: -0.5rem 0 -8px;
    }
    .layered-banner__side--left { justify-self: start; margin-left: 14%; z-index: 1; }
    .layered-banner__side--right { justify-self: end; margin-right: 8%; height: clamp(190px, 54vw, 340px); }
    .layered-banner--has-left:not(.layered-banner--has-right) .layered-banner__side--left,
    .layered-banner--has-right:not(.layered-banner--has-left) .layered-banner__side--right {
        justify-self: center;
        left: auto;
        right: auto;
        margin-inline: 0;
    }
    .layered-banner .layered-banner__content {
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }
    .layered-banner--has-left .layered-banner__content,
    .layered-banner--has-right .layered-banner__content { padding-bottom: 1rem; }
    .layered-banner .layered-banner__buttons { justify-content: center; }
    .layered-banner .layered-banner__shade {
        background: linear-gradient(to top, rgba(var(--bg-primary-rgb), 0.75), rgba(var(--bg-primary-rgb), 0.35));
    }
    .layered-banner__features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }
    .layered-banner__feature { padding: 0; }
    .layered-banner__feature + .layered-banner__feature { border-left: 0; border-image: none; }

    /* Side-aligned banners (text left or right): the text keeps its side,
       buttons stack, and the cut-out on the other side becomes a large
       picture behind the text instead of taking up its own space — e.g.
       the app banner's phone, standing on the right behind the copy. */
    .layered-banner--left .layered-banner__content,
    .layered-banner--right .layered-banner__content {
        align-items: flex-start;
        text-align: left;
        padding: 2rem 1.25rem 1.25rem;
    }
    /* Centred banners with a cut-out on both sides: a tall poster — the
       text at the top, the two people standing large in the bottom
       corners (partly off the edges, behind everything), and the buttons
       pushed down to the bottom centre between them. */
    /* --people-h: how tall the people stand; the buttons' top padding
       reserves that much room under the text (less the button's own
       height), so the banner is only as tall as its text needs and the
       people never cover it, whatever the screen width. */
    .layered-banner--center.layered-banner--has-left.layered-banner--has-right {
        --people-h: clamp(250px, 78vw, 440px);
        grid-template-rows: 1fr auto;
        grid-template-areas: "content" "features";
        min-height: 0;
    }
    .layered-banner--center.layered-banner--has-left.layered-banner--has-right .layered-banner__side {
        position: absolute;
        grid-area: auto;
        top: auto;
        bottom: -8px;
        z-index: 0;
        height: var(--people-h);
        max-width: 60%;
        margin: 0;
    }
    .layered-banner--center.layered-banner--has-left.layered-banner--has-right .layered-banner__side--left { left: -6%; right: auto; }
    .layered-banner--center.layered-banner--has-left.layered-banner--has-right .layered-banner__side--right { right: -6%; left: auto; }
    .layered-banner--center.layered-banner--has-left.layered-banner--has-right .layered-banner__content {
        justify-content: flex-start;
        padding-bottom: 1.75rem;
    }
    .layered-banner--center.layered-banner--has-left.layered-banner--has-right .layered-banner__buttons { margin-top: auto; padding-top: calc(var(--people-h) - 4.5rem); }

    /* Room for the ⓘ in the top-left corner above the text. */
    .layered-banner:has(> .layered-banner__info) .layered-banner__content { padding-top: 3.25rem; }
    .layered-banner--left .layered-banner__buttons,
    .layered-banner--right .layered-banner__buttons {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .layered-banner--left.layered-banner--has-right,
    .layered-banner--right.layered-banner--has-left { min-height: clamp(560px, 150vw, 760px); }
    .layered-banner--left.layered-banner--has-right .layered-banner__content,
    .layered-banner--right.layered-banner--has-left .layered-banner__content { padding-bottom: 1.25rem; }
    .layered-banner--left.layered-banner--has-right .layered-banner__text,
    .layered-banner--right.layered-banner--has-left .layered-banner__text { max-width: 70%; }
    .layered-banner--left.layered-banner--has-right .layered-banner__side--right,
    .layered-banner--right.layered-banner--has-left .layered-banner__side--left {
        position: absolute;
        grid-area: auto;
        top: auto;
        /* Standing on the banner's bottom edge (past it by the float
           distance), with the feature strip laid over its foot. */
        bottom: -8px;
        z-index: 0;
        height: 74%;
        max-width: 80%;
        margin: 0;
    }
    .layered-banner--left.layered-banner--has-right .layered-banner__side--right { left: auto; right: -6%; }
    .layered-banner--right.layered-banner--has-left .layered-banner__side--left { right: auto; left: -6%; }
    /* The empty "people" row collapses; content stays on top of the picture. */
    .layered-banner--left.layered-banner--has-right,
    .layered-banner--right.layered-banner--has-left { grid-template-rows: auto 1fr auto; }

    /* Feature strip: one row, each with its icon above a short label. */
    .layered-banner__features {
        position: relative;
        z-index: 1;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
    .layered-banner__feature {
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.35rem;
        text-align: center;
    }
}

@keyframes layered-banner-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}
@keyframes layered-banner-float {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .layered-banner__bg img,
    .layered-banner__side { animation: none; }
    .layered-banner__badge { transition: none; }
    .layered-banner__badge:hover,
    .layered-banner__badge:focus-visible { transform: none; }
}

/* =============================================================
   Table figure wrapper
   ============================================================= */
.table-figure { margin: 0; }
.table-figure__caption {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
}

/* =============================================================
   Data table (wide, many-column lookup tables). First column shrinks
   to fit its own content; remaining columns share the rest of the
   width and wrap their text. Scrolls horizontally as a fallback on
   narrow viewports once columns hit their minimum width.
   ============================================================= */
.data-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--primary-500);
}
.data-table {
    display: grid;
    grid-template-columns: minmax(130px, max-content) repeat(calc(var(--cols) - 1), minmax(160px, 1fr));
}
.data-table__row { display: contents; }
.data-table__row:nth-child(even):not(.data-table__row--head) .data-table__cell { background: var(--bg-surface-2); }
.data-table__row:nth-child(odd):not(.data-table__row--head) .data-table__cell { background: var(--bg-surface); }
.data-table__row--head .data-table__cell {
    background: var(--primary-900);
    color: var(--primary-400);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
}
.data-table__cell {
    padding: 0.85rem 1.1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
}
.data-table__cell:last-child { border-right: none; }
.data-table__row:last-child .data-table__cell { border-bottom: none; }
.data-table__cell--label { color: var(--text-primary); font-weight: 600; }

/* =============================================================
   Table style: "cards" — table_style === 'cards' (PageSection). Each
   row becomes its own card; each column becomes a label/value pair.
   Column 0 is styled as the card's headline field (bigger, themed);
   every other column is a compact label/value row beneath it.
   ============================================================= */
.table-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.table-cards__card {
    background: var(--bg-surface);
    border: 1px solid var(--secondary-500);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.section--alt .table-cards__card { background: var(--bg-surface-2); }
.table-cards__field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.table-cards__field:last-child { border-bottom: none; }
.table-cards__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.table-cards__value { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); text-align: right; }
.table-cards__field--primary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-500);
}
.table-cards__field--primary .table-cards__value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-400);
    text-align: left;
}

/* =============================================================
   Table style: "comparison" — table_style === 'comparison'. Each row
   is a labeled group (label = that row's own first cell, not a column
   header) containing one card per remaining column — column 1's card
   (the first compared item) is highlighted as the "our side" item.
   ============================================================= */
.table-comparison { display: flex; flex-direction: column; gap: 0.8rem; }
.table-comparison__row {
    background: var(--bg-surface);
    border: 1px solid rgba(var(--secondary-rgb), 0.5);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    /* Soft glow, not a hard-edged shadow — 0/0 offset (centered on the
       card), a wide blur radius so it fades away gradually rather than
       cutting off sharply, and a small spread so it visibly extends
       past the card's own edges before that fade starts. */
    box-shadow: 0 0 28px 1px rgba(var(--secondary-rgb), 0.5);
}
.table-comparison__label {
    margin: 0 0 1rem;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.46px;
    color: #fff;
}
.table-comparison__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.table-comparison__item {
    /* The "typical/competitor" side's own look — the main background
       color at 0.8 opacity, white text at 0.78 opacity. The highlighted
       "our side" item (.table-comparison__item--primary below) overrides
       all of this back to its own themed look. */
    background: rgba(var(--bg-surface-rgb), 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
}
.table-comparison__item--primary {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.05));
    border-color: var(--primary-500);
}
.table-comparison__item-title {
    margin: 0 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.85px;
    color: rgba(255, 255, 255, 0.78);
}
.table-comparison__item--primary .table-comparison__item-title { color: var(--primary-400); }
.table-comparison__item-text { margin: 0; font-size: 14px; line-height: 1.2; color: rgba(255, 255, 255, 0.78); }
.table-comparison__item--primary .table-comparison__item-text { color: #fff; }

/* =============================================================
   FAQ — one rounded panel: the title centred with a subtitle under it,
   then each question as its own card ("1. Age requirements"), its answer
   inside the card when open. A round grey button on the right shows "+"
   when closed and "−" when open (its vertical bar folds away). See
   page-section.blade.php (faq-list) and faq-accordion.blade.php.
   ============================================================= */
.faq-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(var(--bg-surface-rgb), 0.85), rgba(var(--bg-surface-rgb), 0.55));
}
.faq-panel__head { margin-bottom: 1.4rem; text-align: center; }
.faq-panel__title { margin: 0; }
/* The ⓘ button (when the section has info content) stays at the right
   while the title is centred. */
.faq-panel__head .section-title-row { position: relative; justify-content: center; margin-bottom: 0; }
.faq-panel__head .section-title-row > :first-child { flex: 0 1 auto; }
.faq-panel__subtitle { margin: 0.45rem 0 0; color: var(--text-secondary); font-size: 13.5px; }

.faq-list { display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: var(--bg-surface-2);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.faq-item:hover { border-color: rgba(var(--primary-rgb), 0.3); }
.faq-item[open] { border-color: rgba(var(--primary-rgb), 0.35); }
.faq-item__question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 62px;
    padding: 0.85rem 1rem 0.85rem 1.2rem;
    cursor: pointer;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; border-radius: 12px; }
/* The question: a real <h3> under the FAQ's H2. */
/* Question: Inter SemiBold 18/28px, -2% tracking; #9997A0 while closed,
   #EAEDFA when open (and on hover, as a preview). */
.faq-item__question-text {
    margin: 0;
    color: #9997A0;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.02em;
    transition: color 0.15s ease;
}
.faq-item__number { margin-right: 0.15rem; }
.faq-item[open] .faq-item__question-text,
.faq-item__question:hover .faq-item__question-text { color: #EAEDFA; }

.faq-item__icon {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transition: background-color 0.2s ease;
}
.faq-item__question:hover .faq-item__icon { background: rgba(var(--primary-rgb), 0.45); }
.faq-item__icon::before,
.faq-item__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
}
.faq-item__icon::before { width: 12px; height: 1.6px; }
.faq-item__icon::after { width: 1.6px; height: 12px; }
/* Open: the vertical bar folds flat, leaving a "−". */
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-item__answer { padding: 0 1.2rem 1.1rem; }
/* Answer text: Inter Regular 16px, #9997A0. */
.faq-item__answer p { margin: 0; color: #9997A0; font-size: 16px; font-weight: 400; line-height: 1.55; }
.faq-item__answer p + p { margin-top: 0.5em; }

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-item__question-text,
    .faq-item__icon,
    .faq-item__icon::before,
    .faq-item__icon::after { transition: none; }
}

/* =============================================================
   Footer — two floors:
   1. Link columns (Footer links, up to 4) on a navy band lit from above:
      a glow strip with a bright edge line, and a fainter line underneath.
   2. Logos under fixed headings (Footer logos — FooterLogo::GROUPS):
      Gaming License + Certification By, then Payment Method, Follow Us,
      Security and Responsible Gaming; then the optional notice and the
      copyright line.
   Background is --footer-bg: the page background by default, so the
   footer blends into the page (admin-overridable via Edit branding).
   ============================================================= */
.site-footer {
    background: var(--footer-bg);
    padding: 0 0 2rem;
}
.site-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Floor 1 — the lit link band. */
.site-footer__links {
    position: relative;
    padding: calc(64px + 2.75rem) 0 2.75rem;
    background: linear-gradient(180deg, rgba(1, 10, 28), rgba(1, 12, 40));
}
/* The glow strip on top, with its bright edge line. */
.site-footer__links::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 64px;
    background:
        radial-gradient(50% 150% at 50% 100%, rgba(var(--primary-rgb)), transparent 70%),
        linear-gradient(180deg, var(--footer-bg), rgba(var(--primary-rgb), 0.06));
    border-bottom: 3px solid var(--beam-100);
    border-image: linear-gradient(90deg, transparent 10%, var(--primary-400) 50%, transparent 90%) 1;
    /* box-shadow: 0 1px 12px rgba(var(--primary-rgb), 0.35); */
    pointer-events: none;
}
/* The fainter line along the bottom edge. */
.site-footer__links::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--beam-100), transparent);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.6);
}

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(var(--footer-cols, 4), minmax(0, 1fr));
    gap: 2rem;
}
.site-footer__columns--1 { --footer-cols: 1; }
.site-footer__columns--2 { --footer-cols: 2; }
.site-footer__columns--3 { --footer-cols: 3; }
.site-footer__column-heading {
    display: block;
    margin: 0 0 1rem;
    color: #2385EE;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.site-footer__column ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.site-footer__column a { color: var(--text-secondary); font-size: 13px; line-height: 1.6; transition: color 0.2s ease; }
.site-footer__column a:hover,
.site-footer__column a:focus-visible { color: var(--text-primary); }

/* Floor 2 — logo rows. */
.site-footer__bottom { padding-top: 3rem; }
.site-footer__logo-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem 3rem;
    margin-bottom: 3rem;
}
.site-footer__logo-row--top { justify-content: flex-start; gap: 2rem 5rem; }

.footer-logos__heading {
    display: block;
    margin-bottom: 1rem;
    /* --text-secondary, not --text-muted: small text needs a 4.5:1
       contrast on the dark footer (muted was 3.98:1). */
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.site-footer__logo-row--top .footer-logos__heading { color: #2385EE; font-weight: 600; }
.footer-logos__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.75rem;
}
/* Each heading's logos share one height (any width), like the design. */
.footer-logos__list img { display: block; height: var(--logo-h, 22px); width: auto; max-width: 160px; object-fit: contain; }
.footer-logos--license { --logo-h: 36px; }
/* An Anjouan license seal (drawn by their script): 100px wide like on
   md88.com, so its "VALID · Click to verify" text stays readable. */
.footer-logos__seal { width: 100px; }
.footer-logos__list .footer-logos__seal img { width: 100%; height: auto; max-width: none; }
.footer-logos--certification { --logo-h: 30px; }
.footer-logos--certification .footer-logos__list { gap: 0.75rem 1rem; }
.footer-logos--payment { --logo-h: 20px; }
.footer-logos--payment .footer-logos__list { max-width: 240px; gap: 0.5rem; }
.footer-logos--social { --logo-h: 20px; }
.footer-logos--social .footer-logos__list { gap: 0.6rem; }
.footer-logos--security { --logo-h: 18px; }
.footer-logos--responsible { --logo-h: 22px; }
.footer-logos__link {
    display: block;
    border-radius: 4px;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-logos__link:hover,
.footer-logos__link:focus-visible { opacity: 1; transform: translateY(-1px); }
.footer-logos__link:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 3px; }

.site-footer__notice { max-width: 720px; margin-bottom: 1rem; }
.site-footer__notice p { font-weight: 400; font-size: 12px; line-height: 1.6; color: var(--text-muted); margin: 0 0 0.5em; }
.site-footer__notice a { color: var(--text-secondary); text-decoration: underline; }
.site-footer__notice a:hover { color: var(--secondary-400); }
/* 4.5:1 contrast for small text (muted at 80% opacity was 2.96:1). */
.site-footer__copyright { margin: 0; color: var(--text-secondary); font-size: 12px; }

@media (max-width: 860px) {
    .site-footer__columns,
    .site-footer__columns--3 { --footer-cols: 2; }
    .site-footer__logo-row,
    .site-footer__logo-row--top { justify-content: flex-start; gap: 2rem 2.5rem; }
}
@media (max-width: 480px) {
    .site-footer__links { padding: calc(48px + 2rem) 0 2rem; }
    .site-footer__links::before { height: 48px; }
    .site-footer__columns--1 { --footer-cols: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .footer-logos__link,
    .site-footer__column a { transition: none; }
    .footer-logos__link:hover,
    .footer-logos__link:focus-visible { transform: none; }
}

.scroll-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--primary-500);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.15s ease;
}
.scroll-to-top:hover { background: var(--primary-600); }
.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =============================================================
   Cookie / notification consent banner
   ============================================================= */
.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 95;
    width: calc(100% - 2rem);
    max-width: 26rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 130%);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.cookie-consent.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.cookie-consent__panel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.cookie-consent__title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.cookie-consent__text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}
.cookie-consent__actions { display: flex; gap: 0.75rem; }
.cookie-consent__actions .btn { flex: 1; }

/* =============================================================
   Foreground push-notification toast
   ============================================================= */
.fcm-toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 28rem;
    max-width: calc(100vw - 2rem);
}
.fcm-toast {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--primary-500);
    border-radius: var(--radius-md);
    padding: 0.85rem 2.1rem 0.85rem 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: fcm-toast-in 0.2s ease;
}
.fcm-toast__close {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-md);
}
.fcm-toast__close:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}
.fcm-toast__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fcm-toast__image {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.fcm-toast__content {
    flex: 1;
    min-width: 0;
}
.fcm-toast__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.fcm-toast__icon {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}
.fcm-toast__title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    margin: 0;
}
.fcm-toast__body {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: justify;
}
@keyframes fcm-toast-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   Brand gradient edges
   Section cards get the brand's multi-colour 1px edge (--edge-gradient):
   their flat border is dropped and the gradient is drawn as a ring on
   ::after (a masked layer, so it follows the rounded corners), above
   the card's content but click-through. It brightens on hover. Link
   cards paint it in their own border area instead (their ::before/
   ::after are taken) — see .link-card.
   ============================================================= */
.info-card,
.spotlight,
.contact-panel,
.access-panel,
.timeline__card,
.game-card--framed,
.game-card--cover,
.promo-slide,
.vip-tracker,
.layered-banner,
.faq-panel,
.legal-page__section {
    position: relative;
    border: 0;
}
/* Already positioned (absolute — the two faces of the flip card). */
.promo-card__face { border: 0; }
.info-card::after,
.spotlight::after,
.contact-panel::after,
.access-panel::after,
.timeline__card::after,
.game-card--framed::after,
.game-card--cover::after,
.promo-card__face::after,
.promo-slide::after,
.vip-tracker::after,
.layered-banner::after,
.faq-panel::after,
.legal-page__section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    padding: var(--edge-width, 1px);
    border-radius: inherit;
    /* background: var(--edge-gradient); */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
/* The bigger, image-led cards get a slightly bolder edge. */
.game-card--cover,
.promo-card__face { --edge-width: 1.5px; }
/* Calmer for the large reading panels. */
.faq-panel::after,
.legal-page__section::after { opacity: 0.7; }
.info-card:hover::after,
.game-card:hover::after,
.promo-card:hover .promo-card__face::after,
.promo-slide:hover::after,
.timeline__card:hover::after { filter: brightness(1.45) saturate(1.2); }
/* =============================================================
   Section headings — every section type
   Barlow Bold in the hero title's metal gradient (one line tall,
   repeating per line, so a wrapped heading gets it on every line):
   H2 level 36px — section titles and H2s in a section's rich text;
   H3 level 26px — card titles (info cards, steps, timeline) and H3s;
   H4 22px; H5 18px. FAQ questions keep their own accordion style.
   ============================================================= */
.section__title,
.spotlight__title,
.section .rich-content h2,
.section .rich-content h3,
.section .rich-content h4,
.section .rich-content h5,
.info-card__title,
.step__title,
.timeline__period {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 1.2em repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.section__title,
.spotlight__title,
.section .rich-content h2 { font-size: 36px; }
.section .rich-content h3,
.info-card__title,
.step__title,
.timeline__period { font-size: 26px; }
.section .rich-content h4 { font-size: 22px; }
.section .rich-content h5 { font-size: 18px; }
/* =============================================================
   Section text — every section type's descriptions and body text
   (intros, outros, card text, the Content section, any section's rich
   text): Inter Regular 15px, 150% line height, -2% tracking, white at
   80%. Bold words in the rich text stay bold. Promotion descriptions
   have their own rule (see .promo-card__description).
   ============================================================= */
.section .rich-content:not(.promo-card__description):not(.promo-dialog__description) :is(p, li, blockquote),
.section__intro :is(p, li),
.section__outro :is(p, li) {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.8);
}
.section .rich-content:not(.promo-card__description):not(.promo-dialog__description) :is(strong, b),
.section__intro :is(strong, b),
.section__outro :is(strong, b) { font-weight: 700; }
/* =============================================================
   Buttons — one corner radius for every text button: 10px. The
   "Claim now | Read more" switch's knob and halves sit 3px inside it, so
   they're 7px (concentric curves). Round icon buttons (slideshow arrows
   and dots, ⓘ info, show more, close, the link card arrow) stay round.
   ============================================================= */
/* .btn,
.site-header__buttons .btn,
.site-header__icon-btn,
.game-list__tab,
.game-list__view-all,
.game-list__page-btn,
.custom-select__button,
.promo-pill,
.promo-btn,
.promo-switch,
.vip-breakdown__tab,
.access-social,
.layered-banner__badge { border-radius: 12px; }
.promo-switch__knob,
.promo-switch__option { border-radius: 12px; } */
/* =============================================================
   Phones (≤767px): bottom bar + Menu sheet
   The sidebar's slide-out drawer and the header's menu button give way
   to a floating bar at the bottom of the screen — Menu, Home and up to 3
   admin shortcuts (navbar.blade.php). Menu opens the sidebar as a sheet
   that grows up out of the bar: the two join into one rounded panel. The
   sheet lists the sidebar's links as compact rows; groups still expand
   and collapse. The page behind dims (the backdrop) and can't scroll.
   ============================================================= */
.mobile-bar { display: none; }

@media (max-width: 767px) {
    :root { --mobile-bar-h: 64px; --mobile-bar-gap: 12px; }

    /* Room for the bar, so it never covers the end of the page. */
    body { padding-bottom: calc(var(--mobile-bar-h) + var(--mobile-bar-gap) * 2 + env(safe-area-inset-bottom)); }

    /* The header's menu button: replaced by the bar's Menu. */
    .site-header [data-sidebar-open] { display: none; }

    /* No side padding on content containers (their 95% width already
       leaves a margin). */
    .container { padding: 0; }

    .mobile-bar {
        position: fixed;
        left: var(--mobile-bar-gap);
        right: var(--mobile-bar-gap);
        bottom: calc(var(--mobile-bar-gap) + env(safe-area-inset-bottom));
        z-index: 220;
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        align-items: stretch;
        height: var(--mobile-bar-h);
        padding: 0 0.25rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        background: #141829;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transition: border-radius 0.2s ease;
    }
    .mobile-bar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        color: #ffffff;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.02em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bar__icon { width: 22px; height: 22px; flex-shrink: 0; }
    .mobile-bar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-bar__item.is-active,
    .mobile-bar__menu[aria-expanded="true"] { color: var(--primary-400); }
    .mobile-bar__item:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -4px; border-radius: 14px; }

    /* The Menu sheet: the sidebar, sitting right on top of the bar. */
    .site-sidebar {
        top: auto;
        left: var(--mobile-bar-gap);
        right: var(--mobile-bar-gap);
        bottom: calc(var(--mobile-bar-gap) + env(safe-area-inset-bottom) + var(--mobile-bar-h) - 1px);
        z-index: 215;
        width: auto;
        max-height: calc(100dvh - var(--mobile-bar-h) - var(--mobile-bar-gap) * 2 - env(safe-area-inset-bottom) - 72px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 0;
        border-radius: 22px 22px 0 0;
        background: #141829;
        opacity: 0;
        transform: translateY(16px);
        transition: transform 0.25s ease, opacity 0.2s ease, visibility 0.25s ease;
    }
    .sidebar-open .site-sidebar { opacity: 1; transform: none; }
    /* Open: the bar's top corners square off, so sheet and bar read as one panel. */
    .sidebar-open .mobile-bar { border-top-color: transparent; border-radius: 0 0 22px 22px; box-shadow: none; }

    /* Compact rows in the sheet: no boxes, just icon + label (groups keep
       their chevron to expand / collapse). */
    .site-sidebar__list { gap: 0.1rem; padding: 0.75rem 0.6rem 0.5rem; }
    .site-sidebar__link,
    .site-sidebar__group { border-color: transparent; background: transparent; }
    .site-sidebar__link { min-height: 44px; padding: 0 0.6rem; }
    .site-sidebar__link > .site-sidebar__chevron { display: none; }
    .site-sidebar__group-head { min-height: 44px; padding: 0 0.6rem; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
    .site-sidebar__group[open] > .site-sidebar__group-head { border-bottom: 0; }
    .site-sidebar__group .site-sidebar__sublist { padding: 0 0 0.25rem 1.6rem; }
    .site-sidebar__feature { margin-bottom: 0.4rem; }

    /* Bottom-anchored pop-ups sit above the bar instead of under it. */
    .cookie-consent,
    .fcm-toast-container { bottom: calc(var(--mobile-bar-h) + var(--mobile-bar-gap) * 2 + env(safe-area-inset-bottom)); }
    .cookie-consent { z-index: 225; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .site-sidebar,
    .mobile-bar { transition: none; }
}
/* =============================================================
   Game list — featured slideshow (filtered lists; game-list.blade.php)
   One big gold-framed game at a time on the left of the grid, with its
   title and provider below and dots to switch (app.js turns it every
   5s). From 1101px it sits beside the grid, as tall as its two rows, and
   the grid drops a column so the cards keep their size; narrower screens
   show it above the grid. Slides stack in one spot and fade.
   ============================================================= */
.game-list__layout--featured { display: grid; gap: 1rem; }
.game-list__grid-wrap { min-width: 0; }

.game-feature { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.game-feature__slides { display: grid; flex: 1; width: 100%; min-height: 0; }
.game-feature__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-area: 1 / 1;
    min-height: 0;
    color: inherit;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.game-feature__slide.is-active { opacity: 1; visibility: visible; }
/* The gold frame: the Gold badge's gradient as a 3px border. */
.game-feature__frame {
    position: relative;
    display: block;
    flex: 1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 4;
    padding: 3px;
    border-radius: 16px;
    background: linear-gradient(to bottom right, #916643 0%, #FBE67B 25%, #FCFBE7 50%, #F7D14E 75%, #D4A041 100%);
    box-shadow: 0 0 22px rgba(247, 209, 78, 0.35);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/* Inside the gold border: the game's image fills the frame (the featured
   games have tall images made for it). */
.game-feature__inner {
    position: absolute;
    inset: 3px;
    overflow: hidden;
    border-radius: 13px;
    background: var(--bg-primary);
}
.game-feature__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The featured artwork comes with its own rounded, transparent corners
       (a much bigger curve than the frame's). A slight zoom pushes them
       outside the frame, so the picture fills it right into its corners. */
    transform: scale(1.06);
}
.game-feature__slide:hover .game-feature__frame,
.game-feature__slide:focus-visible .game-feature__frame { transform: translateY(-3px); box-shadow: 0 0 30px rgba(247, 209, 78, 0.55); }
.game-feature__slide:focus-visible { outline: none; }
.game-feature__slide:focus-visible .game-feature__frame { outline: 2px solid var(--primary-400); outline-offset: 3px; }
/* Title and provider: the framed game cards' text. */
.game-feature__title {
    margin-top: 0.7rem;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #ffffff;
    background: linear-gradient(180deg, #7A96AC 0%, #EAEFF3 17%, #C2D4E1 33%, #FFFFFF 50%, #D4DEE5 67%, #ABBDC8 83%, #BCCAD7 100%) 0 0 / 100% 1.25em repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.game-feature__provider {
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.8);
}
.game-feature__dots { display: flex; gap: 6px; margin-top: 0.75rem; }
.game-feature__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: width 0.25s ease, background-color 0.25s ease;
}
.game-feature__dot.is-active { width: 28px; background: var(--primary-400); }
.game-feature__dot:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }

/* Narrower screens: above the grid, at a comfortable size. */
@media (max-width: 1100px) {
    .game-feature { width: min(100%, 320px); margin: 0 auto; }
    .game-feature__frame { flex: none; }
}
/* Phones: the full width, in a tall 4:5 frame — close to the featured
   images' own 3:4, so the character and the game's logo both show. */
@media (max-width: 767px) {
    .game-feature { width: 100%; }
    .game-feature__frame { aspect-ratio: 4 / 5; }
}
/* Wide screens: beside the grid, as tall as its rows; the grid drops a column. */
@media (min-width: 1101px) {
    .game-list__layout--featured { grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); align-items: stretch; }
    .game-list__layout--featured .game-feature__frame { aspect-ratio: auto; }
    .game-list__layout--featured .cols-grid--2 { grid-template-columns: minmax(0, 1fr); }
    .game-list__layout--featured .cols-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .game-list__layout--featured .cols-grid--4,
    .game-list__layout--featured .cols-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1201px) {
    .game-list__layout--featured { grid-template-columns: minmax(0, 1.3fr) minmax(0, 4fr); }
    .game-list__layout--featured .cols-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .game-feature__slide,
    .game-feature__frame,
    .game-feature__dot { transition: none; }
}
/* =============================================================
   Phone typography (≤767px)
   Every text style scaled down together for small screens — titles stay
   clearly above body text, nothing drops below 12px. Each override uses
   its desktop rule's own selector, so it wins by coming later. Desktop
   and tablet sizes are unchanged. Already-small text (12–13px labels,
   footer, badges) keeps its size.
   ============================================================= */
@media (max-width: 767px) {
    /* Default paragraph. */
    p { font-size: 15px; line-height: 24px; }

    /* Hero. */
    .hero-slide__title { font-size: 28px; }
    .hero-slide__lead p,
    .hero-slide__lead li { font-size: 15px; line-height: 23px; }

    /* Notification bar. */
    .hero-notice__bar { font-size: 13px; }

    /* Section headings (H2 36 → 26, H3 26 → 20, H4 22 → 18, H5 18 → 16). */
    .section__title,
    .spotlight__title,
    .section .rich-content h2 { font-size: 26px; }
    .section .rich-content h3,
    .info-card__title,
    .step__title,
    .timeline__period { font-size: 20px; }
    .section .rich-content h4 { font-size: 18px; }
    .section .rich-content h5 { font-size: 16px; }

    /* Section text. */
    .section .rich-content:not(.promo-card__description):not(.promo-dialog__description) :is(p, li, blockquote),
    .section__intro :is(p, li),
    .section__outro :is(p, li) { font-size: 14px; }

    /* Links section. */
    .link-card__title { font-size: 17px; }
    .link-card__text { font-size: 14px; line-height: 20px; }

    /* Game and promotion lists. */
    .game-list__current,
    .promo-list__title { font-size: 16px; }
    .game-card--framed .game-card__title { font-size: 15px; }
    .game-card__provider { font-size: 12px; }
    .game-feature__title { font-size: 16px; }
    .game-feature__provider { font-size: 12px; }

    /* Promotion cards (the big title already scales with the card). */
    .promo-card__small { font-size: 14px; line-height: 20px; background-size: 100% 20px; }
    .promo-switch__option { font-size: 13px; }
    .promo-card__description p,
    .promo-card__description li { font-size: 13px; }

    /* VIP bar. */
    .vip-banner__text { font-size: 16px; }
    .vip-banner__button { font-size: 13px; }

    /* Layered banners. */
    .layered-banner__title { font-size: 30px; line-height: 36px; background-size: 100% 36px; }
    .layered-banner__eyebrow span { font-size: 16px; }
    .layered-banner__text p { font-size: 14px; line-height: 21px; }
    .layered-banner__buttons .btn { font-size: 14px; line-height: 21px; }
    .layered-banner__feature { font-size: 13px; line-height: 20px; }
    .layered-banner__feature > span { background-size: 100% 20px; }

    /* Legal pages. */
    .legal-page__header h1 { font-size: 28px; }
    .legal-page__section h2 { font-size: 20px; }
    .legal-page__section h3 { font-size: 18px; }
    .legal-page__section h4 { font-size: 16px; }
    .legal-page__section h5 { font-size: 15px; }
    .legal-page__header p,
    .legal-page__header li,
    .legal-page__section p,
    .legal-page__section li { font-size: 14px; }

    /* FAQ. */
    .faq-item__question-text { font-size: 15px; line-height: 22px; }
    .faq-item__answer p { font-size: 14px; }

    /* Buttons. */
    .btn { font-size: 14px; }
    .btn--lg { font-size: 15px; }
}

/* =============================================================
   Card grid spacing
   Every grid of cards (games, providers, promotions, link cards, info
   cards, steps, contact channels, table cards / comparison items) uses
   the same 20px gap from tablet width up, like competitor game grids.
   Kept last so it wins over each grid's own gap above. Narrower screens
   keep their tighter gaps.
   ============================================================= */
@media (min-width: 768px) {
    .cols-grid,
    .game-list__layout--featured,
    .links-grid,
    .info-grid,
    .steps--cards,
    .contact-channels,
    .promo-grid,
    .table-cards,
    .table-comparison__items { gap: 20px; }
}

/* =============================================================
   Gate pages — the region chooser and "not available in your region"
   (layouts/gate.blade.php): the logo above one centred card.
   ============================================================= */
.gate-page { min-height: 100vh; min-height: 100dvh; }
.gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2rem 1rem;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(var(--primary-rgb), 0.22), transparent 70%),
        var(--bg-primary);
}
.gate__logo img { display: block; height: 40px; width: auto; }
.gate__logo .brand__text { font-family: var(--font-heading); font-size: 28px; font-weight: 800; color: #fff; }
.gate__card {
    width: 100%;
    max-width: 560px;
    padding: clamp(1.5rem, 5vw, 2.25rem);
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 16px;
    background: var(--bg-surface);
    box-shadow: 0 0 40px rgba(var(--primary-rgb), 0.15);
    text-align: center;
}
.gate__icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.14);
    color: var(--primary-400);
}
.gate__icon-svg { width: 32px; height: 32px; }
.gate__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading);
    font-size: clamp(22px, 5vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}
.gate__text { margin: 0 auto 1.5rem; max-width: 42ch; font-size: 15px; line-height: 1.55; color: #B2B2BD; }
.gate__text:last-child { margin-bottom: 0; }

/* The region chooser's list: one card per region. */
.region-choice {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
@media (min-width: 560px) {
    .region-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.region-choice__item {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface-2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.region-choice__item:hover,
.region-choice__item:focus-within {
    border-color: rgba(var(--primary-rgb), 0.7);
    box-shadow: 0 6px 22px rgba(var(--primary-rgb), 0.25);
    transform: translateY(-2px);
}
.region-choice__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    color: #ffffff;
}
.region-choice__name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.region-choice__code {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.18);
    color: var(--primary-400);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.region-choice__languages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    padding: 0 1rem 0.85rem;
    font-size: 13px;
}
.region-choice__languages a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.region-choice__languages a:hover { color: var(--secondary-400); }
.region-choice__main:focus-visible,
.region-choice__languages a:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
    .region-choice__item { transition: none; }
    .region-choice__item:hover,
    .region-choice__item:focus-within { transform: none; }
}