/*
 * Jokery Casino - shared design system
 * Dark carnival: aubergine, gold, cream parchment, crimson, Joker green.
 */

:root {
    /* Palette */
    --c-bg: #1d1120;
    --c-bg-deep: #140a17;
    --c-band: #3a2140;
    --c-panel: #2a1731;
    --c-panel-deep: #180c1c;
    --c-charcoal: #241e29;
    --c-gold: #e8c98a;
    --c-gold-deep: #b8924e;
    --c-cream: #f3e3c0;
    --c-pill: #efd9a7;
    --c-faq-pill: #e8cf9f;
    --c-text: #eadfcd;
    --c-muted: #cbbdab;
    --c-ink: #2a1530;
    --c-parch-1: #e9d3a6;
    --c-parch-2: #cfae78;
    --c-crimson: #8e1b28;
    --c-crimson-bright: #ff5a6a;
    --c-green: #8be04e;
    --c-green-neon: #6dff7f;
    --c-magenta: #d6336c;
    --c-wood: #4a2a1c;

    /* Typography */
    --f-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --f-logo: "Roboto Slab", Rockwell, Georgia, serif;
    --f-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Shape & layout */
    --radius-lg: 28px;
    --radius: 12px;
    --radius-sm: 8px;
    --shell-max: 1100px;
    --shell-pad: calc(10px + 0.75rem);
    --curtain-w: 10px;
    --header-bottom: 0px;
    --section-space: clamp(2.75rem, 7vw, 4.75rem);

    /* Effects */
    --shadow-deep: 0 20px 50px rgba(0, 0, 0, 0.55);
    --glow-gold: 0 0 28px rgba(232, 201, 138, 0.35);
}

/* ============================================
   OVERFLOW PREVENTION - Safety Net
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img, video, iframe, embed, object, svg {
    max-width: 100%;
    height: auto;
}

[class*="grid"] > *,
[class*="flex"] > * {
    min-width: 0;
}

pre, code, .code-block, [class*="code"] {
    max-width: 100%;
    overflow-x: auto;
}

pre code,
.code-block code {
    display: block;
    min-width: 0;
}

.table-wrapper,
[class*="table-"] {
    max-width: 100%;
    overflow-x: auto;
}

p, li, td, th {
    overflow-wrap: break-word;
}

details {
    height: fit-content;
}

:where(p, li, blockquote, figcaption, dd, .prose, .seo-text, article)
  a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

input, textarea, select {
    max-width: 100%;
}

section {
    overflow: clip;
}

/* ============================================
   BASE
   ============================================ */

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(98, 42, 104, 0.35), transparent 70%),
        var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    overflow-x: clip;
}

body.menu-open {
    overflow: hidden;
}

/* Side frame: mobile striped edges */
body::before,
body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        #4b1f5c 0 22px,
        #8e1b28 22px 44px,
        #c9a45c 44px 50px
    );
}

body::before { left: 0; }
body::after { right: 0; }

h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--c-gold);
    line-height: 1.12;
    margin: 0 0 0.6em;
    letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); }

h2 {
    font-size: clamp(1.65rem, 3.6vw, 2.35rem);
    text-transform: uppercase;
}

h3 {
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    color: var(--c-cream);
}

p { margin: 0 0 1em; }

ul, ol { padding-left: 1.25rem; margin: 0 0 1em; }
li + li { margin-top: 0.35em; }

a {
    color: var(--c-gold);
    transition: color 0.2s ease;
}

a:hover { color: var(--c-cream); }

:focus-visible {
    outline: 3px solid var(--c-green);
    outline-offset: 3px;
    border-radius: 4px;
}

strong { color: var(--c-cream); font-weight: 600; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 100;
    background: var(--c-cream);
    color: var(--c-ink);
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus { top: 1rem; color: var(--c-ink); }

/* ============================================
   SHELL + CURTAIN FRAME
   ============================================ */

.site-shell {
    position: relative;
    z-index: 1;
    max-width: calc(var(--shell-max) + 2 * var(--shell-pad));
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}

@media (min-width: 900px) {
    :root {
        --curtain-w: clamp(130px, calc((100vw - 1040px) / 2 + 120px), 380px);
        --shell-pad: calc(var(--curtain-w) * 0.6);
    }

    body::before,
    body::after {
        width: var(--curtain-w);
        background: url("./assets/5164d52654ad202f5abd5db41e20c1b7.webp") left center / cover no-repeat;
    }

    body::after {
        transform: scaleX(-1);
    }
}

/* ============================================
   HEADER
   ============================================ */

.site-header {
    position: sticky;
    top: calc(var(--brand-row-h, 80px) * -1);
    z-index: 50;
}

.site-header__brand-row {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0 0.6rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--c-gold);
}

.site-brand:hover { color: var(--c-gold); }

.site-brand__mask {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.site-brand__mask--mirror { transform: scaleX(-1); }

.site-brand__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.95;
    text-shadow: 0 3px 0 #5a3b18, 0 6px 16px rgba(0, 0, 0, 0.65);
}

.site-brand__name {
    font-family: var(--f-logo);
    font-weight: 800;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.site-brand__sub {
    font-family: var(--f-logo);
    font-weight: 800;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 0.15em;
}

.nav-band {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 60px;
    padding: 0.5rem 0.6rem;
    background: var(--c-band);
    border-top: 1px solid var(--c-gold-deep);
    border-bottom: 1px solid rgba(232, 201, 138, 0.25);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.nav-toggle {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(243, 227, 192, 0.55);
    border-radius: 10px;
    color: var(--c-cream);
    cursor: pointer;
}

.nav-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.site-nav {
    display: none;
    position: fixed;
    top: var(--header-bottom);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #241429;
    border-top: 1px solid var(--c-gold-deep);
    padding: 1rem 1.5rem 2.5rem;
}

.site-nav.is-open { display: block; }

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__list li + li { margin-top: 0; }

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--c-cream);
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 201, 138, 0.18);
}

.site-nav__link:hover,
.site-nav__link.is-active { color: var(--c-gold); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
}

@media (min-width: 768px) {
    .site-header {
        top: calc(var(--brand-row-h, 130px) * -1);
    }

    .site-header__brand-row { padding: 1.1rem 0 1rem; }
    .site-brand { gap: 1rem; }
    .site-brand__mask { width: 92px; height: 92px; }
    .site-brand__name { font-size: 3.4rem; }
    .site-brand__sub { font-size: 1.8rem; }
}

@media (min-width: 1024px) {
    .nav-band {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        padding: 0.5rem 1rem;
    }

    .nav-toggle { display: none; }

    .site-nav {
        display: block;
        grid-column: 2;
        position: static;
        overflow: visible;
        background: none;
        border: 0;
        padding: 0;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .site-nav__extra { display: none; }

    .site-nav__link {
        min-height: 44px;
        padding: 0 0.85rem;
        font-size: 1.08rem;
        border-bottom: 0;
        position: relative;
    }

    .site-nav__link.is-active::after {
        content: "";
        position: absolute;
        left: 0.85rem;
        right: 0.85rem;
        bottom: 6px;
        height: 2px;
        background: var(--c-gold);
    }

    .header-actions {
        grid-column: 3;
        justify-self: end;
        margin-left: 0;
    }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn--cream {
    background: var(--c-pill);
    color: var(--c-ink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 -2px 0 rgba(120, 80, 30, 0.35);
}

.btn--cream:hover { background: #fbe9c0; color: var(--c-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), var(--glow-gold); }

.btn--gold {
    background: linear-gradient(180deg, #f2d79b, #d4ad62);
    color: var(--c-ink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.btn--gold:hover { color: var(--c-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), var(--glow-gold); }

.btn--outline {
    background: transparent;
    color: var(--c-cream);
    border-color: rgba(243, 227, 192, 0.8);
}

.btn--outline:hover { color: var(--c-ink); background: var(--c-cream); }

.btn--plum {
    background: #3a1d45;
    color: var(--c-cream);
    box-shadow: 0 4px 12px rgba(42, 21, 48, 0.45);
}

.btn--plum:hover { background: #4d2659; color: #fff7e6; }

.btn--sm {
    min-height: 44px;
    padding: 0 0.85rem;
    font-size: 0.9375rem;
}

@media (max-width: 359px) {
    .btn--sm { padding: 0 0.65rem; font-size: 0.875rem; }
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
}

.btn-row--center { justify-content: center; }

.text-link {
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--c-gold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.text-link::after { content: " →"; }

/* ============================================
   SECTIONS
   ============================================ */

.section {
    position: relative;
    padding-block: var(--section-space);
}

.section-head {
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: center;
}

.section-head > p { color: var(--c-muted); }

.section--narrow > * {
    max-width: 820px;
    margin-inline: auto;
}

.prose { max-width: 70ch; }
.prose p, .prose li { color: var(--c-text); }

.lead {
    font-size: 1.15rem;
    color: var(--c-text);
}

.muted { color: var(--c-muted); }

.small-note {
    font-size: 0.9375rem;
    color: var(--c-muted);
    font-style: italic;
}

.card-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
    background: var(--c-panel);
    border: 1px solid var(--c-gold-deep);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.card > :last-child { margin-bottom: 0; }

.callout {
    background: linear-gradient(135deg, var(--c-parch-1), var(--c-parch-2));
    color: var(--c-ink);
    border-left: 6px solid var(--c-ink);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
}

.callout :is(h2, h3, h4, strong) { color: var(--c-ink); }
.callout a:not(.btn) { color: var(--c-crimson); }
.callout > :last-child { margin-bottom: 0; }

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumbs { margin: 1rem 0 0; }

.breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    font-size: 0.9375rem;
    color: var(--c-muted);
}

.breadcrumbs__item + .breadcrumbs__item { margin-top: 0; }

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "›";
    margin-right: 0.5rem;
    color: var(--c-gold-deep);
}

.breadcrumbs a {
    color: var(--c-gold);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ============================================
   HERO
   ============================================ */

.hero {
    position: relative;
    margin-top: 1.25rem;
}

.hero__media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    background: var(--hero-bg) var(--hero-pos-m, center) / cover no-repeat;
}

.hero--masked .hero__media {
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

.hero--framed .hero__media {
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-gold-deep);
}

.hero__content {
    position: relative;
    z-index: 1;
    padding: 1.25rem 0 0.5rem;
}

.hero__title {
    margin-bottom: 0.3em;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75);
}

.hero__subtitle {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    color: var(--c-cream);
    line-height: 1.3;
    margin-bottom: 0.9em;
}

.hero__content p { color: #e6d9c4; }

.hero__note {
    font-size: 0.9375rem;
    color: var(--c-muted);
    margin-top: 0.9rem;
}

@media (min-width: 768px) {
    .hero {
        display: flex;
        align-items: center;
        min-height: clamp(460px, 44vw, 600px);
    }

    .hero__media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        background:
            linear-gradient(90deg, rgba(22, 11, 26, 0.92) 0%, rgba(22, 11, 26, 0.72) 32%, rgba(22, 11, 26, 0) 58%),
            var(--hero-bg) var(--hero-pos, center) / cover no-repeat;
    }

    .hero--masked .hero__media {
        -webkit-mask-image: radial-gradient(ellipse 72% 80% at 50% 50%, #000 58%, transparent 100%);
        mask-image: radial-gradient(ellipse 72% 80% at 50% 50%, #000 58%, transparent 100%);
    }

    .hero--framed .hero__media {
        background:
            linear-gradient(90deg, rgba(29, 17, 32, 0.9) 0%, rgba(29, 17, 32, 0.7) 30%, rgba(29, 17, 32, 0) 55%),
            var(--hero-bg) var(--hero-pos, center) / cover no-repeat;
    }

    .hero__content {
        width: min(100%, 48%);
        padding: 3rem 0 3rem clamp(1.75rem, 6vw, 4.5rem);
    }
}

/* ============================================
   STAGE (marquee frame scene)
   ============================================ */

.stage {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-panel-deep);
    border: 3px solid #5a3322;
    box-shadow: var(--shadow-deep);
}

.stage::before,
.stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 18px;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at center, #fff4c9 0 2.5px, #f3c45a 3.5px, rgba(243, 196, 90, 0.35) 6px, transparent 8.5px) 0 50% / 30px 18px repeat-x,
        linear-gradient(180deg, #3d2216, #26140c);
}

.stage::before { top: 0; }
.stage::after { bottom: 0; }

.stage__media {
    aspect-ratio: 16 / 9;
    margin-top: 18px;
    background: var(--stage-bg) var(--stage-pos, center) / cover no-repeat;
}

.stage__content {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.25rem 2.75rem;
}

.stage__content > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .stage {
        display: flex;
        align-items: center;
        min-height: clamp(360px, 36vw, 460px);
    }

    .stage__media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        margin: 0;
    }

    .stage--right .stage__media {
        background:
            linear-gradient(270deg, rgba(20, 10, 23, 0.94) 0%, rgba(20, 10, 23, 0.72) 38%, rgba(20, 10, 23, 0) 62%),
            var(--stage-bg) var(--stage-pos, center) / cover no-repeat;
    }

    .stage--left .stage__media {
        background:
            linear-gradient(90deg, rgba(20, 10, 23, 0.94) 0%, rgba(20, 10, 23, 0.72) 38%, rgba(20, 10, 23, 0) 62%),
            var(--stage-bg) var(--stage-pos, center) / cover no-repeat;
    }

    .stage__content {
        width: min(46%, 500px);
        padding: 3rem 2.5rem;
    }

    .stage--right .stage__content { margin-left: auto; }
}

/* ============================================
   TICKET (parchment admission ticket)
   ============================================ */

.ticket-wrap {
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.55));
}

.ticket {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    color: var(--c-ink);
    background:
        radial-gradient(ellipse at 50% 45%, rgba(255, 245, 220, 0.25) 0%, transparent 55%, rgba(120, 72, 30, 0.35) 100%),
        linear-gradient(135deg, var(--c-parch-1), var(--c-parch-2));
    clip-path: polygon(
        0 6px, 4% 2px, 9% 7px, 14% 1px, 19% 5px, 25% 0, 31% 6px, 36% 3px, 42% 8px, 47% 2px,
        53% 5px, 58% 0, 64% 7px, 70% 3px, 75% 6px, 81% 1px, 86% 5px, 92% 2px, 96% 7px, 100% 3px,
        100% calc(100% - 5px), 95% calc(100% - 1px), 90% calc(100% - 7px), 84% calc(100% - 2px),
        78% calc(100% - 6px), 72% 100%, 66% calc(100% - 5px), 61% calc(100% - 1px), 55% calc(100% - 8px),
        49% calc(100% - 3px), 44% calc(100% - 6px), 38% 100%, 33% calc(100% - 6px), 27% calc(100% - 2px),
        21% calc(100% - 7px), 15% calc(100% - 1px), 10% calc(100% - 5px), 5% calc(100% - 2px), 0 calc(100% - 6px)
    );
    -webkit-mask:
        radial-gradient(circle 16px at 0 50%, transparent 97%, #000 100%) left / 51% 100% no-repeat,
        radial-gradient(circle 16px at 100% 50%, transparent 97%, #000 100%) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 16px at 0 50%, transparent 97%, #000 100%) left / 51% 100% no-repeat,
        radial-gradient(circle 16px at 100% 50%, transparent 97%, #000 100%) right / 51% 100% no-repeat;
}

.ticket::after {
    content: "";
    position: absolute;
    inset: 16px 22px;
    border: 4px double var(--c-crimson);
    border-radius: 4px;
    pointer-events: none;
}

.ticket__stub {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 2rem 0.7rem;
    margin-inline: 22px;
    border-bottom: 2px dashed rgba(142, 27, 40, 0.65);
    color: var(--c-crimson);
}

.ticket__stub--end {
    border-bottom: 0;
    border-top: 2px dashed rgba(142, 27, 40, 0.65);
    padding: 0.7rem 2rem 1.4rem;
}

.ticket__stub-label {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.ticket__stub svg {
    width: 40px;
    height: 40px;
    color: var(--c-crimson);
}

.ticket__body {
    position: relative;
    z-index: 1;
    padding: 1.5rem 2.25rem;
}

.ticket :is(h2, h3, h4) { color: var(--c-ink); }
.ticket strong { color: var(--c-ink); }
.ticket p, .ticket li { color: var(--c-ink); }
.ticket a:not([class]) { color: var(--c-crimson); }
.ticket .text-link { color: var(--c-crimson); }
.ticket .small-note { color: #4a2a38; }

.ticket__split {
    display: grid;
    gap: 1.25rem;
    align-items: center;
}

.ticket__media img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
}

.ticket__text > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .ticket {
        grid-template-columns: 78px minmax(0, 1fr) 78px;
        grid-template-rows: auto;
    }

    .ticket::after { inset: 14px 26px; }

    .ticket__stub {
        margin: 26px 0;
        margin-left: 26px;
        padding: 0.75rem 0.5rem;
        border-bottom: 0;
        border-right: 2px dashed rgba(142, 27, 40, 0.65);
    }

    .ticket__stub--end {
        margin-left: 0;
        margin-right: 26px;
        border-top: 0;
        border-right: 0;
        border-left: 2px dashed rgba(142, 27, 40, 0.65);
        padding: 0.75rem 0.5rem;
    }

    .ticket__stub .ticket__stub-label {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 1.5rem;
    }

    .ticket__stub--end .ticket__stub-label { transform: none; }

    .ticket__body { padding: 2.25rem 2rem; }

    .ticket__split { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 2rem; }
}

/* Compact ticket (cards) */
.ticket--compact,
.ticket.ticket--compact {
    grid-template-columns: 70px minmax(0, 1fr);
    grid-template-rows: auto;
    height: 100%;
}

.ticket--compact::after { inset: 12px 18px; border-width: 3px; }

.ticket.ticket--compact .ticket__stub {
    margin: 18px 0 18px 18px;
    padding: 0.5rem 0.25rem;
    border-bottom: 0;
    border-top: 0;
    border-right: 2px dashed rgba(142, 27, 40, 0.65);
}

.ticket--compact .ticket__body { padding: 1.5rem 1.6rem 1.5rem 1.1rem; }

/* ============================================
   FAQ ACCORDION
   ============================================ */

.faq-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    max-width: 860px;
    margin-inline: auto;
}

.faq-item { margin: 0; }

.faq-item__q {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 50px;
    padding: 0.7rem 1.25rem 0.7rem 1.4rem;
    background: var(--c-faq-pill);
    color: var(--c-ink);
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 -2px 0 rgba(120, 80, 30, 0.3);
    transition: background-color 0.2s ease;
}

.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }

.faq-item__q:hover { background: #f1dcb2; }

.faq-item__q:focus-visible {
    outline: 3px solid var(--c-green);
    outline-offset: 3px;
    border-radius: 999px;
}

.faq-item__chevron {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: var(--c-ink);
    transition: transform 0.25s ease;
}

.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }

.faq-item__answer {
    margin: 0.5rem 0.75rem 0.25rem;
    padding: 1rem 1.25rem;
    background: var(--c-panel-deep);
    border-left: 3px solid var(--c-gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--c-text);
}

.faq-item__answer > :last-child { margin-bottom: 0; }

/* ============================================
   TRUST BADGES
   ============================================ */

.badge-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
    align-items: start;
}

@media (min-width: 768px) {
    .badge-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .badge-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; margin-inline: auto; }
}

.trust-badge { text-align: center; }

.trust-badge__icon svg {
    width: 88px;
    height: 88px;
    display: block;
    margin: 0 auto 0.75rem;
}

.trust-badge--gcb svg { filter: drop-shadow(0 0 10px rgba(90, 130, 255, 0.55)); }
.trust-badge--18 svg { filter: drop-shadow(0 0 10px rgba(255, 59, 78, 0.75)); }
.trust-badge--ssl svg { filter: drop-shadow(0 0 10px rgba(232, 201, 138, 0.6)); }
.trust-badge--rg svg,
.trust-badge--2fa svg { filter: drop-shadow(0 0 10px rgba(109, 255, 127, 0.6)); }

.trust-badge__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--c-cream);
    margin: 0 0 0.25rem;
}

.trust-badge__caption {
    font-size: 0.9375rem;
    color: var(--c-muted);
    margin: 0;
    line-height: 1.45;
}

/* ============================================
   DATA TABLE
   ============================================ */

.data-table-wrap {
    margin: 1.25rem 0;
    border-radius: var(--radius);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-panel);
    border: 1px solid var(--c-gold-deep);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 1rem;
}

.data-table caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 0.6rem;
    color: var(--c-muted);
    font-size: 0.9375rem;
}

.data-table thead th {
    background: linear-gradient(180deg, #f0d9a3, #d9b874);
    color: var(--c-ink);
    font-family: var(--f-display);
    font-weight: 700;
    text-align: left;
    padding: 0.8rem 1rem;
    font-size: 1rem;
}

.data-table tbody th,
.data-table tbody td {
    padding: 0.8rem 1rem;
    border-top: 1px solid rgba(232, 201, 138, 0.22);
    text-align: left;
    vertical-align: top;
    color: var(--c-text);
}

.data-table tbody th {
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--c-gold);
}

.data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }

@media (max-width: 767.98px) {
    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table { background: transparent; border: 0; }

    .data-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .data-table tbody tr {
        background: var(--c-panel);
        border: 1px solid var(--c-gold-deep);
        border-radius: var(--radius);
        padding: 0.5rem 0;
        margin-bottom: 0.85rem;
    }

    .data-table tbody tr:nth-child(even) { background: var(--c-panel); }

    .data-table tbody th,
    .data-table tbody td {
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        gap: 0.75rem;
        border-top: 0;
        padding: 0.45rem 1rem;
    }

    .data-table tbody th { font-size: 1.1rem; }

    .data-table tbody th::before,
    .data-table tbody td::before {
        content: attr(data-label);
        font-family: var(--f-display);
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--c-muted);
    }
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    margin-top: var(--section-space);
    padding: 2.5rem 0 2rem;
    border-top: 1px solid var(--c-gold-deep);
    text-align: center;
}

.site-footer__tag {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--c-gold);
    margin: 0;
}

.site-footer__nav { margin: 2rem 0 1.5rem; }

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.5rem;
}

.footer-links li + li { margin-top: 0; }

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.75rem;
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--c-cream);
    text-decoration: none;
}

.footer-links a:hover { color: var(--c-gold); text-decoration: underline; }

.site-footer__legal {
    max-width: 760px;
    margin: 0 auto;
    font-size: 0.9375rem;
    color: var(--c-muted);
}

.footer-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.age-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--c-crimson-bright);
    color: var(--c-crimson-bright);
    font-family: var(--f-display);
    font-weight: 700;
    box-shadow: 0 0 12px rgba(255, 59, 78, 0.45);
}

.footer-badges__text {
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--c-green);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-footer__copy {
    margin: 1.5rem 0 0;
    font-size: 0.9375rem;
    color: var(--c-muted);
}

/* ============================================
   HOMEPAGE
   ============================================ */

.home-welcome .ticket-wrap {
    max-width: 980px;
    margin-inline: auto;
}

.home-welcome .ticket__media img { max-width: 340px; }

.bonus-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    display: grid;
    gap: 0.45rem;
}

.bonus-steps > li {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 248, 230, 0.45);
    border: 1px solid rgba(142, 27, 40, 0.35);
    border-radius: var(--radius-sm);
    line-height: 1.4;
}

.bonus-steps__num {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-crimson);
    color: #fff4e0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 0.9375rem;
    transform: translateY(2px);
}

.bonus-terms { margin-bottom: 1.1rem; }
.bonus-terms li::marker { color: var(--c-crimson); }

/* Cabinet row (popular games) */
.cabinet-row {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0.9rem;
}

.cabinet-row::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -34px;
    height: 70px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(232, 201, 138, 0.45), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cabinet-row:hover::after,
.cabinet-row:focus-within::after { opacity: 1; }

.cabinet-row > li {
    margin: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}

.cabinet-row > li:hover { transform: translateY(-4px); }

.cabinet__media {
    aspect-ratio: 3 / 4;
}

.cabinet__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
}

.cabinet__plaque {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: -18%;
    padding: 0.95rem 0.7rem 0.9rem;
    text-align: center;
    background: linear-gradient(180deg, #5a3424 0%, var(--c-wood) 45%, #3a2016 100%);
    border: 2px solid var(--c-gold-deep);
    border-radius: 6px 6px 10px 10px;
    box-shadow:
        inset 0 0 0 3px #2c170f,
        inset 0 0 0 4px rgba(232, 201, 138, 0.35),
        0 10px 20px rgba(0, 0, 0, 0.45);
}

.cabinet__title {
    margin: 0;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--c-cream);
}

.cabinet__caption {
    flex: 1;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #e6d6bd;
}

.cabinet__plaque .btn { min-width: 96px; }

.section-foot {
    margin: 2.25rem 0 0;
    text-align: center;
}

@media (min-width: 768px) {
    .cabinet-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; }
}

@media (min-width: 1200px) {
    .cabinet-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
    .cabinet__caption { font-size: 0.8125rem; }
}

/* Live stage spacing */
.home-live .stage__content h2 { margin-bottom: 0.5em; }

/* Sportsbook teaser (integrated artwork) */
.sport-teaser { overflow: visible; }

.sport-teaser__grid {
    display: grid;
    gap: 0.5rem;
    align-items: center;
}

.sport-teaser__media img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .sport-teaser__grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .sport-teaser__media {
        margin-right: calc(var(--shell-pad) * -0.6);
        margin-left: -8%;
    }
}

/* Trust note */
.trust-note {
    max-width: 780px;
    margin: 2.5rem auto 0;
    padding: 1.1rem 1.4rem;
    background: var(--c-panel-deep);
    border: 1px solid rgba(232, 201, 138, 0.3);
    border-left: 4px solid var(--c-crimson-bright);
    border-radius: var(--radius-sm);
}

.trust-note > :last-child { margin-bottom: 0; }

/* FAQ teaser button spacing */
.home-faq .btn-row { margin-top: 2rem; }

/* Outro */
.home-outro {
    text-align: center;
    padding-bottom: 0;
}

.home-outro p {
    max-width: 680px;
    margin-inline: auto;
}

/* ============================================
   BONUSSER PAGE
   ============================================ */

.bp-note {
    max-width: 760px;
    margin: 0 auto 1rem;
    text-align: center;
}

/* Step stubs (welcome package) */
.step-stubs {
    list-style: none;
    max-width: 860px;
    margin: 0 auto 1.5rem;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

.step-stub {
    margin: 0;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
}

.step-stub li + li { margin-top: 0; }

.step-stub__inner {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    color: var(--c-ink);
    background:
        radial-gradient(ellipse at 40% 40%, rgba(255, 245, 220, 0.35), transparent 65%),
        linear-gradient(135deg, #f1dfb6, #d9bc86);
    border-radius: 6px 0 0 6px;
    clip-path: polygon(
        0 0, 100% 0, 99% 8%, 100% 16%, 99% 24%, 100% 32%, 99% 40%, 100% 48%, 99% 56%,
        100% 64%, 99% 72%, 100% 80%, 99% 88%, 100% 96%, 100% 100%, 0 100%
    );
}

.step-stub__num {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px dashed rgba(142, 27, 40, 0.7);
    margin: 12px 0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--c-crimson);
}

.step-stub__body {
    padding: 1rem 1.4rem 1rem 1.1rem;
}

.step-stub__body h3 {
    color: var(--c-ink);
    margin: 0 0 0.5rem;
}

.step-stub__facts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.9rem;
}

.step-stub__facts div { min-width: 0; }

.step-stub__facts dt {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5a2a36;
}

.step-stub__facts dd {
    margin: 0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--c-ink);
}

@media (min-width: 768px) {
    .step-stub__inner { grid-template-columns: 90px minmax(0, 1fr); }
    .step-stub__num { font-size: 3.2rem; }
    .step-stub__body { padding: 1.2rem 2rem 1.2rem 1.4rem; }
    .step-stub__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .step-stub:nth-child(1) { transform: rotate(-1deg); }
    .step-stub:nth-child(3) { transform: rotate(1deg); }
    .step-stubs { gap: 1.4rem; }
}

/* Terms card */
.terms-card {
    position: relative;
    max-width: 860px;
    margin-inline: auto;
    padding: 2.25rem 1.5rem 1.75rem;
    background: var(--c-panel);
    border: 1px solid var(--c-gold);
    border-radius: var(--radius);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.terms-card > :last-child { margin-bottom: 0; }

.terms-card__corner {
    position: absolute;
    width: 34px;
    height: 34px;
}

.terms-card__corner--tl { top: 6px; left: 6px; }
.terms-card__corner--tr { top: 6px; right: 6px; transform: scaleX(-1); }
.terms-card__corner--bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.terms-card__corner--br { bottom: 6px; right: 6px; transform: scale(-1, -1); }

.formula-box {
    margin: 0 0 0.75rem;
    padding: 0.9rem 1.1rem;
    background: var(--c-cream);
    color: var(--c-ink);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 2px rgba(142, 27, 40, 0.35);
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.formula-box__line {
    margin: 0;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.formula-box__line + .formula-box__line { margin-top: 0.3rem; color: var(--c-crimson); }

/* Cashback */
.bp-cashback__grid {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.bp-cashback__art { max-width: 420px; width: 100%; margin-inline: auto; }

.stairs { display: block; width: 100%; height: auto; }

.stairs__top { filter: drop-shadow(0 0 9px rgba(109, 255, 127, 0.55)); }

@media (min-width: 768px) {
    .bp-cashback__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2.5rem; }
}

/* Reload cards */
.reload-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

.reload-card {
    display: flex;
    flex-direction: column;
    background: var(--c-panel);
    border: 1px solid var(--c-gold-deep);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.reload-card__band {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.6rem;
    background: linear-gradient(135deg, var(--c-parch-1), var(--c-cream));
    clip-path: polygon(
        0 0, 100% 0, 100% 75%, 87.5% 100%, 75% 75%, 62.5% 100%, 50% 75%,
        37.5% 100%, 25% 75%, 12.5% 100%, 0 75%
    );
}

.reload-card__band h3 {
    margin: 0;
    color: var(--c-ink);
    font-size: 1.25rem;
}

.reload-card__icon { flex: 0 0 40px; width: 40px; height: 40px; }

.reload-card__body { padding: 1rem 1.25rem 1.4rem; flex: 1; }
.reload-card__body > :last-child { margin-bottom: 0; }

.bp-reloads__more {
    max-width: 860px;
    margin: 1.75rem auto 0;
    color: var(--c-muted);
}

@media (min-width: 768px) {
    .reload-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sports callout */
.bp-sports__box {
    max-width: 860px;
    margin-inline: auto;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
}

.bp-sports__box h2 { color: var(--c-ink); }

/* Coins section (integrated artwork) */
.bp-coins { overflow: visible; }

.bp-coins__grid {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

.bp-coins__media {
    position: relative;
    max-width: 420px;
    width: 100%;
    margin-inline: auto;
}

.bp-coins__media::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(232, 201, 138, 0.38) 0%, rgba(232, 201, 138, 0.12) 45%, transparent 70%);
    pointer-events: none;
}

.bp-coins__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .bp-coins__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2.5rem; }
    .bp-coins__media { max-width: none; }
}

/* High roller stats */
.stat-row {
    list-style: none;
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr);
}

.stat-row li {
    margin: 0;
    padding: 1rem 1.1rem;
    text-align: center;
    background: var(--c-panel-deep);
    border: 1px solid rgba(232, 201, 138, 0.4);
    border-radius: var(--radius);
}

.stat-row__num {
    display: block;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--c-gold);
}

.stat-row__label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    color: var(--c-muted);
}

.bp-budget { margin-top: 1.75rem; }

@media (min-width: 768px) {
    .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* CTA ticket strip */
.bp-cta .ticket-wrap {
    max-width: 980px;
    margin-inline: auto;
}

.bp-cta__inner { text-align: center; }
.bp-cta__inner p { max-width: 640px; margin-inline: auto; }
.bp-cta__inner .small-note { margin-top: 1rem; margin-bottom: 0; }

.bp-faq .section-foot { margin-top: 1.75rem; }

/* ============================================
   SPIL PAGE
   ============================================ */

/* Stat chips */
.stat-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.stat-chips li {
    margin: 0;
    padding: 0.55rem 1.3rem;
    background: var(--c-cream);
    color: var(--c-ink);
    border: 2px solid var(--c-gold-deep);
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.stat-chips strong {
    color: var(--c-crimson);
    font-weight: 700;
    font-size: 1.2rem;
}

/* Slot tickets */
.slot-grid {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

.slot-grid > li { margin: 0; }
.slot-grid .ticket-wrap { height: 100%; }
.slot-grid .ticket__body .btn { margin-top: 0.25rem; }
.slot-grid .ticket__body > :last-child { margin-bottom: 0; }

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

.spil-note {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* Live casino mini cards */
.live-cards {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
    grid-template-columns: minmax(0, 1fr);
}

.live-cards > li { margin: 0; }
.live-cards h3 { margin-bottom: 0.4em; }

@media (min-width: 768px) {
    .live-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* RNG / crash cards */
.game-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.game-cards > li {
    margin: 0;
    padding: 1.1rem 0.9rem 1.2rem;
    background: var(--c-panel);
    border: 1px solid var(--c-gold-deep);
    border-radius: var(--radius);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.game-cards svg {
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 0.7rem;
    color: var(--c-cream);
}

.game-cards h3 {
    font-size: 1.1rem;
    margin-bottom: 0.4em;
}

.game-cards p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--c-text);
}

@media (max-width: 359px) {
    .game-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 768px) {
    .game-cards > li { padding: 1.4rem 1.25rem 1.5rem; }
    .game-cards p { font-size: 0.9375rem; }
}

@media (min-width: 1024px) {
    .game-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
}

/* Provider chips */
.provider-chips {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 780px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.provider-chips li {
    margin: 0;
    padding: 0.45rem 1.1rem;
    background: var(--c-panel-deep);
    color: var(--c-cream);
    border: 1px solid var(--c-gold);
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 600;
}

/* Weighting table */
.spil-weighting .data-table-wrap {
    max-width: 860px;
    margin-inline: auto;
}

.weight-bar {
    display: block;
    min-width: 120px;
    height: 12px;
    margin-top: 0.35rem;
    background: var(--c-bg-deep);
    border: 1px solid rgba(232, 201, 138, 0.45);
    border-radius: 999px;
    overflow: hidden;
}

.weight-bar__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--c-green), var(--c-green-neon));
    border-radius: 999px;
}

.spil-weighting__note {
    max-width: 860px;
    margin: 1.5rem auto 0;
}

/* Mobile split */
.mobile-split {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    max-width: 900px;
    margin-inline: auto;
}

.mobile-split__text > :last-child { margin-bottom: 0; }

.mobile-split__badge {
    max-width: 240px;
    width: 100%;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .mobile-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); gap: 2.5rem; }
}

.spil-faq .section-foot { margin-top: 1.75rem; }

.spil-cta { padding-bottom: 0; }

/* ============================================
   OM OS PAGE
   ============================================ */

.om-summary .callout {
    max-width: 820px;
    margin-inline: auto;
}

.om-summary .callout ul { margin-bottom: 0; }

.om-prose { margin-inline: auto; }
.om-prose h3 { margin-top: 1.5rem; }
.om-prose > h3:first-child { margin-top: 0; }

.om-chips { margin-top: 2rem; }

/* Mascot (integrated artwork with glow) */
.om-theme { overflow: visible; }

.om-theme__grid {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

.om-theme__media {
    position: relative;
    max-width: 300px;
    width: 100%;
    margin-inline: auto;
}

.om-theme__media::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(56, 196, 196, 0.3) 0%, rgba(122, 58, 184, 0.3) 42%, transparent 70%);
}

.om-theme__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.om-theme__text > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .om-theme__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; }
    .om-theme__media { max-width: none; }
}

/* Parchment company panel */
.parch-panel {
    position: relative;
    max-width: 820px;
    margin: 1rem auto 0;
    padding: 1.6rem 1.25rem 1.25rem;
    color: var(--c-ink);
    background:
        radial-gradient(ellipse at 40% 30%, rgba(255, 245, 220, 0.4), transparent 65%),
        linear-gradient(135deg, var(--c-parch-1), var(--c-parch-2));
    border-top: 4px solid var(--c-crimson);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
}

.parch-panel__edge {
    position: absolute;
    left: 0;
    top: -17px;
    width: 100%;
    height: 14px;
    display: block;
}

.company-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--c-ink);
}

.company-table caption {
    text-align: left;
    padding-bottom: 0.6rem;
    font-size: 0.9375rem;
    color: #4a2a38;
}

.company-table thead th {
    text-align: left;
    padding: 0.55rem 0.5rem;
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--c-crimson);
    border-bottom: 3px double var(--c-crimson);
}

.company-table tbody th,
.company-table tbody td {
    text-align: left;
    vertical-align: top;
    padding: 0.7rem 0.5rem;
    border-bottom: 1px dashed rgba(142, 27, 40, 0.5);
}

.company-table tbody tr:last-child th,
.company-table tbody tr:last-child td { border-bottom: 0; }

.company-table tbody th {
    width: 36%;
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--c-crimson);
}

.company-table tbody td { font-weight: 600; }

/* Licence plaque */
.licence-plaque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 820px;
    margin: 0 auto 2rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
    color: var(--c-ink);
    background:
        radial-gradient(ellipse at 40% 30%, rgba(255, 245, 220, 0.4), transparent 65%),
        linear-gradient(135deg, var(--c-parch-1), var(--c-parch-2));
    border: 4px double var(--c-crimson);
    border-radius: var(--radius-sm);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
}

.licence-plaque__seal {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

.licence-plaque__text { min-width: 0; }
.licence-plaque__text p { margin: 0; }

.licence-plaque__label {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-crimson);
}

.licence-plaque__code {
    display: inline-block;
    max-width: 100%;
    margin: 0.5rem 0 !important;
    padding: 0.4rem 1rem;
    background: #3a1d45;
    color: var(--c-gold);
    border-radius: var(--radius-sm);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 6.2vw, 2.3rem);
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

.licence-plaque__note {
    font-size: 0.9375rem;
    color: #4a2a38;
}

@media (min-width: 768px) {
    .licence-plaque {
        flex-direction: row;
        text-align: left;
        gap: 1.75rem;
        padding: 1.75rem 2rem;
    }
}

/* Security */
.om-security .badge-row { margin-bottom: 2rem; }
.om-security__text { text-align: left; }

/* Responsible gaming (quiet panel) */
.om-rg {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 860px;
    margin-inline: auto;
    padding: 1.5rem 1.25rem;
    background: var(--c-panel-deep);
    border: 1px solid rgba(232, 201, 138, 0.25);
    border-left: 5px solid var(--c-green);
    border-radius: var(--radius-sm);
}

.om-rg__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    color: var(--c-green);
}

.om-rg__text { min-width: 0; }
.om-rg__text h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.om-rg__text > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .om-rg { flex-direction: row; gap: 1.5rem; padding: 2rem; }
    .om-rg__icon { width: 72px; height: 72px; }
}

/* Support */
.om-support .section-head { margin-bottom: 0; }

/* CTA ticket */
.om-cta .ticket-wrap {
    max-width: 980px;
    margin-inline: auto;
}

.om-cta__inner { text-align: center; }
.om-cta__inner p { max-width: 640px; margin-inline: auto; }
.om-cta__inner .small-note { margin-top: 1rem; margin-bottom: 0; }

/* ============================================
   VIP PAGE
   ============================================ */

/* Three-step flow with ribbon */
.vip-flow {
    position: relative;
    list-style: none;
    max-width: 980px;
    margin: 0 auto 2rem;
    padding: 0;
    display: grid;
    gap: 1.75rem;
}

.vip-flow__ribbon {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    max-width: none;
}

.vip-flow__ribbon--v {
    display: block;
    left: 12px;
    top: 42px;
    bottom: 40px;
    width: 60px;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}

.vip-flow__ribbon--h { display: none; }

.vip-flow__step {
    position: relative;
    z-index: 1;
    margin: 0;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.vip-flow__step + .vip-flow__step { margin-top: 0; }

.vip-flow__ring {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-panel-deep);
    border: 4px solid var(--c-gold);
    box-shadow: 0 0 0 4px var(--c-panel-deep), 0 0 0 6px var(--c-gold-deep), 0 8px 18px rgba(0, 0, 0, 0.5);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 2.3rem;
    color: var(--c-gold);
}

.vip-flow__text {
    padding: 1rem 1.25rem;
    background: var(--c-panel);
    border: 1px solid var(--c-gold-deep);
    border-radius: var(--radius);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.vip-flow__text h3 { margin-bottom: 0.35em; }
.vip-flow__text p { margin: 0; font-size: 1rem; }

@media (min-width: 768px) {
    .vip-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .vip-flow__ribbon--v { display: none; }

    .vip-flow__ribbon--h {
        display: block;
        left: 0;
        right: 0;
        top: 12px;
        width: 100%;
        height: 60px;
    }

    .vip-flow__step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
    }

    .vip-flow__text { flex: 1; width: 100%; }
}

/* Level table */
.vip-table { max-width: 980px; margin-inline: auto; }

.vip-level {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.vip-suit { flex: 0 0 auto; width: 34px; height: 34px; }
.vip-suit--1 { color: #8c6a3a; }
.vip-suit--2 { color: #a98448; }
.vip-suit--3 { color: #c79f58; }
.vip-suit--4 { color: #e0b968; }
.vip-suit--5 { color: #ffe08a; filter: drop-shadow(0 0 6px rgba(139, 224, 78, 0.75)); }

.vip-table .data-table tbody td { line-height: 1.5; }

.vip-table .data-table tbody tr:last-child {
    background: rgba(139, 224, 78, 0.07);
    box-shadow: inset 0 0 0 1px rgba(109, 255, 127, 0.45), 0 0 24px rgba(109, 255, 127, 0.18);
}

@media (min-width: 768px) {
    .vip-table .data-table tbody tr:last-child { background: rgba(139, 224, 78, 0.07); }
}

.vip-levels .trust-note { max-width: 980px; }

/* Coins shop: reverse columns */
.vip-coins .bp-coins__media::before {
    background: radial-gradient(ellipse at center, rgba(232, 201, 138, 0.5) 0%, rgba(232, 201, 138, 0.16) 45%, transparent 72%);
}

@media (min-width: 768px) {
    .vip-coins .bp-coins__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* Manager cards */
.vip-manager .card-grid { max-width: 900px; margin-inline: auto; }
.vip-manager .bp-note { margin-top: 1.5rem; }

/* Advancement callout */
.vip-callout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem auto 2rem;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
}

.vip-callout__icon { flex: 0 0 auto; width: 56px; height: auto; }
.vip-callout p { color: var(--c-ink); }

@media (min-width: 768px) {
    .vip-callout { flex-direction: row; align-items: flex-start; gap: 1.5rem; padding: 1.5rem 1.75rem; }
}

.vip-adv h3 { margin-top: 0.5rem; }

/* ============================================
   BETALINGER PAGE
   ============================================ */

.pay-wrap {
    max-width: 980px;
    margin-inline: auto;
}

.pay-wrap--text { max-width: 820px; }

.pay-pill {
    display: inline-block;
    padding: 0.15rem 0.75rem;
    background: linear-gradient(180deg, #f2d79b, #d4ad62);
    color: var(--c-ink);
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: nowrap;
}

/* Key facts: poker chips */
.pay-facts { position: relative; }

.pay-facts::before {
    content: "";
    position: absolute;
    inset: 10% 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(139, 224, 78, 0.16) 0%, transparent 65%);
}

.pay-facts > * { position: relative; z-index: 1; }

.pay-chips {
    list-style: none;
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 0.9rem;
}

.pay-chips > li {
    margin: 0;
    text-align: center;
}

.pay-chip__disc {
    width: min(100%, 132px);
    aspect-ratio: 1;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4d2659, #2a1731 70%);
    border: 4px dashed var(--c-gold);
    box-shadow: inset 0 0 0 6px #2a1731, inset 0 0 0 7px rgba(232, 201, 138, 0.45), 0 10px 20px rgba(0, 0, 0, 0.5);
}

.pay-chip__disc span {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 6vw, 2rem);
    color: var(--c-cream);
}

.pay-chip__label {
    margin: 0 0 0.2rem;
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--c-gold);
}

.pay-chip__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--c-muted);
}

@media (min-width: 768px) {
    .pay-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

/* Payment tables */
.pay-deposit .data-table tbody td,
.pay-withdraw .data-table tbody td { line-height: 1.5; }

.small-note a { color: var(--c-gold); }

/* Timeline */
.pay-timeline {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.pay-timeline__step {
    position: relative;
    margin: 0;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.pay-timeline__step + .pay-timeline__step { margin-top: 0; }

.pay-timeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 26px;
    top: 56px;
    bottom: -1.5rem;
    border-left: 3px dotted var(--c-gold);
}

.pay-timeline__node {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-panel-deep);
    border: 3px solid var(--c-gold);
    color: var(--c-gold);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.pay-timeline__text { padding-top: 0.2rem; color: var(--c-text); }

@media (min-width: 768px) {
    .pay-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

    .pay-timeline__step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        text-align: center;
    }

    .pay-timeline__step:not(:last-child)::after {
        left: calc(50% + 40px);
        right: calc(-50% + 40px);
        top: 27px;
        bottom: auto;
        height: 0;
        border-left: 0;
        border-top: 3px dotted var(--c-gold);
    }
}

/* Limits table: VIP highlight */
.pay-limits .data-table thead th.is-vip {
    background: linear-gradient(90deg, #e58bb4, #e8c98a);
    box-shadow: 0 0 18px rgba(214, 51, 108, 0.45);
}

.pay-limits .data-table tbody td.is-vip {
    border-left: 2px solid var(--c-gold);
    border-right: 2px solid var(--c-gold);
}

.pay-limits .data-table tbody tr:last-child td.is-vip { border-bottom: 2px solid var(--c-gold); }

.pay-limits p { margin-top: 1.25rem; }

@media (max-width: 767.98px) {
    .pay-limits .data-table tbody td.is-vip {
        border: 0;
        background: rgba(214, 51, 108, 0.14);
        box-shadow: 0 0 14px rgba(232, 201, 138, 0.2);
    }
}

/* Currency ticket */
.pay-currency .ticket-wrap {
    max-width: 980px;
    margin-inline: auto;
}

.pay-currency .ticket__media img { max-width: 300px; }

@media (min-width: 768px) {
    .pay-currency .ticket__split { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); }
}

/* Turnover callout */
.pay-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: var(--c-faq-pill);
    color: var(--c-ink);
    border-left: 8px solid #3a1d45;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.pay-callout::before {
    content: "";
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin: 0.5rem 0.2rem 0 0;
    border-right: 4px solid var(--c-gold-deep);
    border-bottom: 4px solid var(--c-gold-deep);
    transform: rotate(-45deg);
}

.pay-callout p { margin: 0; color: var(--c-ink); }
.pay-callout strong { color: var(--c-ink); }

/* KYC steps */
.kyc-steps {
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
    counter-reset: kyc;
    display: grid;
    gap: 0.6rem;
}

.kyc-steps > li {
    counter-increment: kyc;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    padding: 0.8rem 1rem;
    background: var(--c-charcoal);
    border-left: 2px solid var(--c-gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.kyc-steps > li::before {
    content: counter(kyc);
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-gold);
    color: var(--c-ink);
    font-family: var(--f-display);
    font-weight: 700;
}

/* Excluded methods */
.pay-excluded__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.pay-excluded__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 1.1rem;
    border: 2px solid var(--c-crimson-bright);
    border-radius: 999px;
    color: #ffc2c8;
    font-family: var(--f-display);
    font-weight: 700;
}

.pay-excluded__pill svg { flex: 0 0 auto; color: var(--c-crimson-bright); }

.pay-excluded .section-head { margin-bottom: 1.5rem; }
.pay-faq .section-foot { margin-top: 1.75rem; }

/* ============================================
   FAQ PAGE
   ============================================ */

/* Category jump chips */
.faq-jump { padding-top: 1.75rem; }

.faq-jump__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.faq-jump__list li { margin: 0; }

.faq-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    background: var(--c-panel);
    color: var(--c-gold);
    border: 2px solid var(--c-gold);
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.faq-chip:hover,
.faq-chip:focus-visible {
    background: var(--c-gold);
    color: var(--c-ink);
}

/* Groups */
.faq-group { padding-block: clamp(2rem, 5vw, 3.25rem); }

.faq-group__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.faq-group__head h2 { margin: 0; }

.faq-suit {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: var(--c-gold);
}

.faq-group .badge-row { margin-bottom: 2.25rem; }

.faq-group .faq-item__answer {
    background: var(--c-panel);
    border-left: 0;
    border-top: 1px solid var(--c-gold);
    border-radius: var(--radius);
    color: var(--c-cream);
}

.faq-group .faq-item__answer a { color: var(--c-gold); }

/* No-deposit torn-ticket callout */
.faq-callout {
    position: relative;
    margin: 0.2rem 0.5rem;
    padding: 1.1rem 1.6rem;
    color: var(--c-ink);
    background:
        radial-gradient(ellipse at 40% 30%, rgba(255, 245, 220, 0.4), transparent 65%),
        linear-gradient(135deg, var(--c-parch-1), var(--c-parch-2));
    -webkit-mask:
        radial-gradient(circle 10px at 0 50%, transparent 97%, #000 100%) left / 51% 100% no-repeat,
        radial-gradient(circle 10px at 100% 50%, transparent 97%, #000 100%) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 10px at 0 50%, transparent 97%, #000 100%) left / 51% 100% no-repeat,
        radial-gradient(circle 10px at 100% 50%, transparent 97%, #000 100%) right / 51% 100% no-repeat;
}

.faq-callout::after {
    content: "";
    position: absolute;
    inset: 7px 12px;
    border: 2px solid var(--c-crimson);
    border-radius: 4px;
    pointer-events: none;
}

.faq-callout p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--c-ink);
}

.faq-callout strong { color: var(--c-crimson); }

/* Calm responsible gaming panel */
.faq-group--calm { padding-block: clamp(2rem, 5vw, 3.25rem); }

.faq-panel {
    max-width: 940px;
    margin-inline: auto;
    padding: 1.75rem 1rem 1.5rem;
    background: var(--c-charcoal);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px rgba(139, 224, 78, 0.35), 0 0 28px rgba(139, 224, 78, 0.16);
}

.faq-panel .faq-suit { color: var(--c-green); }

.faq-panel__note {
    margin: 1.5rem 0 0;
    text-align: center;
    color: var(--c-muted);
    font-size: 0.9375rem;
}

@media (min-width: 768px) {
    .faq-panel { padding: 2.25rem 2rem 1.75rem; }
}

/* Link tiles */
.faq-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.faq-tiles > li { margin: 0; }

.faq-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    padding: 1rem 0.9rem 1.1rem;
    background: var(--c-panel);
    border: 1px solid rgba(232, 201, 138, 0.25);
    border-top: 2px solid var(--c-gold);
    border-radius: var(--radius);
    color: var(--c-text);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-tile:hover,
.faq-tile:focus-visible {
    transform: translateY(-3px);
    color: var(--c-text);
    box-shadow: 0 0 22px rgba(214, 51, 108, 0.5);
}

.faq-tile .faq-suit { width: 28px; height: 28px; }

.faq-tile__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--c-cream);
}

.faq-tile__text {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--c-muted);
}

.faq-tile__arrow {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--c-gold);
}

@media (min-width: 1024px) {
    .faq-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
}

.faq-cta .small-note { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    .faq-tile:hover,
    .faq-tile:focus-visible { transform: none; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .btn:hover { transform: none; }
    .cabinet-row > li:hover { transform: none; }
}