/*
 * Pandido Casino - design system
 * Illustrated tropical jungle: parchment boards, bamboo frames,
 * gold P medallions, glossy leaf-green CTAs. Light-only theme.
 */

:root {
    /* Typography */
    --font-display: "Fredoka", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

    /* Jungle greens */
    --jungle-950: #0b2215;
    --jungle-900: #12331f;
    --jungle-800: #1a4429;
    --jungle-700: #22573a;
    --leaf-700: #276419;
    --leaf-600: #3a7f23;
    --leaf-500: #4c9b2d;
    --leaf-300: #a6d86a;
    --green-text: #1f5420;

    /* Ink & paper */
    --ink: #1c2f1b;
    --ink-soft: #3a4832;
    --cream: #fdf6e3;
    --cream-dim: #efe6cc;
    --parchment-100: #f8ebc8;
    --parchment-200: #f0dca8;
    --parchment-300: #e3c588;
    --parchment-edge: #c99a4d;

    /* Gold, wood, accents */
    --gold-200: #fff1a6;
    --gold-400: #ffd34a;
    --gold-500: #e8ae22;
    --gold-700: #a46d10;
    --honey: #b9772f;
    --wood-dark: #5e3814;
    --turquoise-600: #0f8f8a;
    --turquoise-500: #1fb5ae;
    --turquoise-100: #d8f3ef;
    --coral-500: #e9533f;
    --coral-100: #fde4dd;
    --amber-100: #fff0c2;
    --amber-500: #e0a21e;
    --river-800: #0d3b57;
    --river-600: #14638a;
    --sun-400: #ffcf3f;

    /* Shape & depth */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    --shadow-board: 0 22px 50px rgba(6, 24, 12, 0.38);
    --shadow-soft: 0 10px 24px rgba(10, 30, 15, 0.18);

    /* Layout */
    --gutter: clamp(16px, 4vw, 40px);
    --container: 1200px;
    --pole: 18px;
    --rail: 22px;
    --section-space: clamp(56px, 8vw, 104px);

    /* Surfaces */
    --parchment-fill: radial-gradient(120% 90% at 50% 35%, #fff9e8 0%, #f8eac6 52%, #edd59d 100%);
    --paper-noise: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27180%27%20height=%27180%27%3E%3Cfilter%20id=%27n%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%27.85%27%20numOctaves=%272%27%20stitchTiles=%27stitch%27/%3E%3CfeColorMatrix%20values=%270%200%200%200%20.42%200%200%200%200%20.3%200%200%200%200%20.1%200%200%200%20.1%200%27/%3E%3C/filter%3E%3Crect%20width=%27180%27%20height=%27180%27%20filter=%27url(%23n)%27/%3E%3C/svg%3E");
    --bamboo-h: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2764%27%20height=%2720%27%20viewBox=%270%200%2064%2020%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27g%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23d6e884%27/%3E%3Cstop%20offset=%27.42%27%20stop-color=%27%239ab83e%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23587419%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20y=%272%27%20width=%2764%27%20height=%2716%27%20fill=%27url(%23g)%27/%3E%3Cpath%20d=%27M0%202.6h64M0%2017.4h64%27%20stroke=%27%23324810%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M6%206h44%27%20stroke=%27%23f1f9c8%27%20stroke-width=%271.6%27%20stroke-linecap=%27round%27/%3E%3Crect%20x=%2757%27%20y=%27.8%27%20width=%276%27%20height=%2718.4%27%20rx=%272.6%27%20fill=%27%23809f2c%27%20stroke=%27%23324810%27%20stroke-width=%271.2%27/%3E%3Cpath%20d=%27M58.6%203.5v13%27%20stroke=%27%23cfe27a%27%20stroke-width=%271%27/%3E%3C/svg%3E");
    --bamboo-v: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2764%27%20viewBox=%270%200%2020%2064%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27g%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%270%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23d6e884%27/%3E%3Cstop%20offset=%27.42%27%20stop-color=%27%239ab83e%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23587419%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20x=%272%27%20width=%2716%27%20height=%2764%27%20fill=%27url(%23g)%27/%3E%3Cpath%20d=%27M2.6%200v64M17.4%200v64%27%20stroke=%27%23324810%27%20stroke-width=%271.4%27/%3E%3Cpath%20d=%27M6%206v44%27%20stroke=%27%23f1f9c8%27%20stroke-width=%271.6%27%20stroke-linecap=%27round%27/%3E%3Crect%20x=%27.8%27%20y=%2757%27%20width=%2718.4%27%20height=%276%27%20rx=%272.6%27%20fill=%27%23809f2c%27%20stroke=%27%23324810%27%20stroke-width=%271.2%27/%3E%3Cpath%20d=%27M3.5%2058.6h13%27%20stroke=%27%23cfe27a%27%20stroke-width=%271%27/%3E%3C/svg%3E");
    --lash: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2728%27%20height=%2728%27%20viewBox=%270%200%2028%2028%27%3E%3Ccircle%20cx=%2714%27%20cy=%2714%27%20r=%279%27%20fill=%27%236a4a1c%27/%3E%3Cg%20stroke-linecap=%27round%27%3E%3Cpath%20d=%27M6%206l16%2016M22%206L6%2022%27%20stroke=%27%234a3010%27%20stroke-width=%276%27/%3E%3Cpath%20d=%27M6%206l16%2016M22%206L6%2022%27%20stroke=%27%23e2b46a%27%20stroke-width=%273.2%27/%3E%3Cpath%20d=%27M4%2014h20%27%20stroke=%27%234a3010%27%20stroke-width=%275%27/%3E%3Cpath%20d=%27M4%2014h20%27%20stroke=%27%23d19c4f%27%20stroke-width=%272.6%27/%3E%3C/g%3E%3C/svg%3E");
    --leaf-tick: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M3.5%2020.5C3.5%209.5%2010.5%203.8%2021%203c-.8%2010.5-6.8%2017.5-17.5%2017.5z%27%20fill=%27%235aa032%27%20stroke=%27%231f4d1c%27%20stroke-width=%271.5%27/%3E%3Cpath%20d=%27M8%2013l3%203%206-7%27%20fill=%27none%27%20stroke=%27%23fdf6e3%27%20stroke-width=%272.2%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E");
}

/* ============================================
   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 & TYPOGRAPHY
   ============================================ */

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    position: relative;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--cream);
    overflow-x: clip;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--green-text);
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--green-text);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

a:hover { color: var(--leaf-700); }

ul, ol { padding-left: 1.25em; }

:focus-visible {
    outline: 3px solid var(--sun-400);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(18, 51, 31, 0.85);
    border-radius: 6px;
}

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

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--cream);
    color: var(--green-text);
    font-weight: 800;
    border-radius: var(--radius-sm);
    transition: top 0.2s;
}

.skip-link:focus { top: 12px; }

/* ============================================
   LAYOUT PRIMITIVES
   ============================================ */

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

.section--cream {
    background: linear-gradient(180deg, var(--cream) 0%, #e7f6f1 100%);
}

.section--parchment {
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
}

.section--river {
    background: linear-gradient(180deg, var(--river-600) 0%, var(--river-800) 100%);
    color: var(--cream);
}

.section-head {
    max-width: 760px;
    margin: 0 auto clamp(28px, 4vw, 48px);
    text-align: center;
}

.section-head--left {
    margin-left: 0;
    text-align: left;
}

.lead {
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
    color: var(--ink-soft);
}

.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }
.prose > :first-child { margin-top: 0; }

.split {
    display: grid;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

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

.on-dark { color: var(--cream); }
.on-dark h2, .on-dark h3 { color: var(--gold-400); }
.on-dark p, .on-dark li { color: var(--cream-dim); }
.on-dark a:not([class]) { color: var(--gold-200); }

/* ============================================
   BUTTONS & LINKS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0.7em 1.6em;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--primary {
    color: #ffffff;
    background: linear-gradient(180deg, #62b33a 0%, #469528 16%, #3a7f23 55%, #2a6719 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.45),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),
        0 5px 0 #1b4610,
        0 10px 18px rgba(8, 30, 10, 0.35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.btn--primary:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),
        0 7px 0 #1b4610,
        0 14px 24px rgba(8, 30, 10, 0.4),
        0 0 22px rgba(166, 216, 106, 0.55);
}

.btn--primary:active {
    transform: translateY(3px);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 2px 0 #1b4610, 0 4px 8px rgba(8, 30, 10, 0.3);
}

.btn--parchment {
    color: var(--green-text);
    background: linear-gradient(180deg, #fffaea 0%, #f2dfae 100%);
    box-shadow: inset 0 0 0 2px #c9a35a, 0 4px 0 #9a7531, 0 8px 14px rgba(8, 30, 10, 0.25);
}

.btn--parchment:hover {
    color: var(--leaf-700);
    transform: translateY(-2px);
}

.btn--sm {
    min-height: 44px;
    padding: 0.55em 1.15em;
    font-size: 1rem;
}

.btn--lg {
    min-height: 56px;
    padding: 0.8em 2em;
    font-size: 1.25rem;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 44px;
    font-weight: 800;
    color: var(--green-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.text-link::after {
    content: "→";
    text-decoration: none;
    transition: transform 0.15s;
}

.text-link:hover::after { transform: translateX(3px); }

.on-dark .text-link { color: var(--gold-200); }

/* ============================================
   BADGES, MEDALLIONS, CHIPS
   ============================================ */

.age-badge {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--jungle-800);
    background: var(--cream);
    color: var(--jungle-800);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
}

.age-badge--light {
    border-color: var(--cream);
    background: var(--jungle-900);
    color: var(--cream);
}

.age-badge--sm {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
    border-width: 2px;
}

.medallion,
.coin {
    --med: 52px;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: var(--med);
    height: var(--med);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fff6bd 0 10%, #ffd84f 32%, #e3a91f 64%, #a86f0f 100%);
    box-shadow:
        inset 0 0 0 3px #a8700f,
        inset 0 0 0 6px #f6cd4c,
        inset 0 -5px 8px rgba(120, 70, 0, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.35);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: calc(var(--med) * 0.5);
    line-height: 1;
    color: #2b5414;
    text-shadow: 0 1px 0 #fff2a8, 0 -1px 0 #6e4a0a;
    user-select: none;
}

.coin { --med: 30px; }
.coin--sm { --med: 24px; }

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: #fff8e6;
    border: 2px solid #d9bd7c;
    color: var(--ink);
    font-weight: 700;
    font-size: 0.95rem;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.check-list li {
    position: relative;
    padding-left: 34px;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 22px;
    height: 22px;
    background: var(--leaf-tick) center / contain no-repeat;
}

/* ============================================
   PARCHMENT BOARD + BAMBOO FRAME (signature motif)
   ============================================ */

.board,
.bamboo-frame {
    position: relative;
}

.board {
    margin: 12px;
    padding: clamp(30px, 4vw, 52px) clamp(22px, 4vw, 48px);
    border-radius: 6px;
    color: var(--ink);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow:
        inset 0 0 0 1px rgba(170, 120, 40, 0.35),
        inset 0 0 46px rgba(214, 160, 52, 0.4),
        var(--shadow-board);
}

.board--glow {
    box-shadow:
        inset 0 0 0 1px rgba(170, 120, 40, 0.35),
        inset 0 0 56px rgba(232, 178, 52, 0.45),
        0 0 70px rgba(255, 214, 90, 0.45),
        var(--shadow-board);
}

.board__inner {
    position: relative;
    z-index: 1;
}

.board::before,
.bamboo-frame::before {
    content: "";
    position: absolute;
    inset: calc(var(--pole) * -0.6);
    z-index: 3;
    pointer-events: none;
    background:
        var(--lash) left 0 top 0 / 28px 28px no-repeat,
        var(--lash) right 0 top 0 / 28px 28px no-repeat,
        var(--lash) left 0 bottom 0 / 28px 28px no-repeat,
        var(--lash) right 0 bottom 0 / 28px 28px no-repeat,
        var(--bamboo-h) left 0 top 2px / auto var(--pole) repeat-x,
        var(--bamboo-h) left 0 bottom 2px / auto var(--pole) repeat-x;
}

.board::after,
.bamboo-frame::after {
    content: "";
    position: absolute;
    inset: calc(var(--pole) * -0.6);
    z-index: 2;
    pointer-events: none;
    background:
        var(--bamboo-v) left 2px top 0 / var(--pole) auto repeat-y,
        var(--bamboo-v) right 2px top 0 / var(--pole) auto repeat-y;
}

.board > .medallion--tl,
.board > .medallion--tr {
    position: absolute;
    top: -26px;
    z-index: 4;
}

.board > .medallion--tl { left: -26px; }
.board > .medallion--tr { right: -26px; }

.board h1,
.board h2,
.board h3 { color: var(--green-text); }

/* Ribbon heading */
.ribbon-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 680px;
    margin: 0 auto clamp(28px, 4vw, 44px);
}

.ribbon-heading__band {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 12px 34px;
    text-align: center;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), linear-gradient(180deg, #fff7dc 0%, #f1dca4 100%);
    border-block: 4px solid #8fae3a;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}

.ribbon-heading__title {
    margin: 0;
    font-size: clamp(1.2rem, 0.95rem + 1.2vw, 1.85rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--green-text);
}

.ribbon-heading__end {
    position: relative;
    z-index: 2;
    margin-right: -20px;
    display: grid;
    place-items: center;
}

.ribbon-heading__end--r {
    margin-right: 0;
    margin-left: -20px;
}

.ribbon-heading__end .medallion { --med: clamp(44px, 6vw, 58px); position: relative; z-index: 1; }

.ribbon-heading__sprig {
    position: absolute;
    top: -14px;
    left: -18px;
    width: 52px;
    height: auto;
    z-index: 0;
}

.ribbon-heading__end--r .ribbon-heading__sprig {
    left: auto;
    right: -18px;
    transform: scaleX(-1);
}

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

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding-block: 10px;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -36px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 26, 14, 0.62) 0%, rgba(8, 26, 14, 0) 100%);
}

.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-brand {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 56px;
    padding: 6px 16px;
    text-decoration: none;
}

.site-brand::before {
    content: "";
    position: absolute;
    inset: -12px -20px;
    z-index: -1;
    background: url("./assets/122b45f4085d3f1bcad0224c9496c3cd.webp") center / contain no-repeat;
}

.site-brand__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.88;
    font-family: var(--font-display);
    font-weight: 700;
}

.site-brand__name,
.site-brand__sub {
    text-shadow:
        2px 0 0 #1b4512, -2px 0 0 #1b4512, 0 2px 0 #1b4512, 0 -2px 0 #1b4512,
        2px 2px 0 #1b4512, -2px 2px 0 #1b4512, 2px -2px 0 #1b4512, -2px -2px 0 #1b4512,
        0 5px 8px rgba(0, 0, 0, 0.45);
}

.site-brand__name {
    font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.25rem);
    color: var(--gold-400);
}

.site-brand__sub {
    font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
    color: #c6ee6a;
}

.site-brand:hover .site-brand__name { color: #ffe27a; }

/* Mobile toggle */
.menu-toggle {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 3px solid #6f8c24;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffaea, #f0dba6);
    box-shadow: 0 4px 0 #4f6a18, 0 8px 14px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.menu-toggle__bars {
    display: grid;
    gap: 5px;
    width: 24px;
}

.menu-toggle__bars span {
    display: block;
    height: 3px;
    border-radius: 3px;
    background: var(--green-text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

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

.site-nav__link {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--green-text);
    text-decoration: none;
}

.site-nav__note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

/* Mobile drawer */
@media (max-width: 1023.98px) {
    .site-nav {
        position: fixed;
        top: var(--header-bottom, 76px);
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        z-index: 60;
        display: flex;
        flex-direction: column;
        gap: 22px;
        padding: 26px var(--gutter) 32px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--cream);
        background-image: var(--bamboo-h), var(--paper-noise), var(--parchment-fill);
        background-size: auto 16px, auto, auto;
        background-repeat: repeat-x, repeat, no-repeat;
        background-position: left top, 0 0, 0 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
    }

    .site-nav.is-open {
        visibility: visible;
        transform: none;
        transition: transform 0.22s ease, visibility 0s;
    }

    .site-nav__list li + li { border-top: 2px dashed rgba(169, 120, 50, 0.4); }

    .site-nav__link {
        min-height: 52px;
        padding: 8px 4px;
        font-size: 1.3rem;
    }

    .site-nav__link[aria-current="page"] {
        color: var(--leaf-700);
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 0.25em;
    }

    .header-actions {
        display: grid;
        gap: 14px;
    }

    .header-actions .btn {
        width: 100%;
        min-height: 52px;
        font-size: 1.125rem;
    }
}

/* Desktop navigation bar */
@media (min-width: 1024px) {
    .site-header { padding-block: 18px; }

    .menu-toggle { display: none; }

    .site-nav {
        position: relative;
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-left: 24px;
        padding: 10px 18px 10px 22px;
        border-radius: 4px;
        background-color: var(--parchment-100);
        background-image: var(--paper-noise), var(--parchment-fill);
        box-shadow: inset 0 0 26px rgba(214, 160, 52, 0.35), 0 10px 24px rgba(5, 20, 10, 0.35);
    }

    .site-nav::before {
        content: "";
        position: absolute;
        inset: -9px;
        pointer-events: none;
        background:
            var(--lash) left 0 top 0 / 24px 24px no-repeat,
            var(--lash) right 0 top 0 / 24px 24px no-repeat,
            var(--lash) left 0 bottom 0 / 24px 24px no-repeat,
            var(--lash) right 0 bottom 0 / 24px 24px no-repeat,
            var(--bamboo-h) left 0 top 2px / auto 14px repeat-x,
            var(--bamboo-h) left 0 bottom 2px / auto 14px repeat-x,
            var(--bamboo-v) left 2px top 0 / 14px auto repeat-y,
            var(--bamboo-v) right 2px top 0 / 14px auto repeat-y;
    }

    .site-nav__menu,
    .header-actions { position: relative; z-index: 1; }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .site-nav__link {
        min-height: 44px;
        padding: 8px 12px;
        border-radius: var(--radius-pill);
        font-size: 1.05rem;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .site-nav__link:hover {
        background: rgba(143, 174, 58, 0.25);
        color: var(--leaf-700);
    }

    .site-nav__link[aria-current="page"] {
        background: var(--leaf-700);
        color: var(--cream);
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .site-nav__note { display: none; }
}

@media (min-width: 1200px) {
    .site-nav { margin-left: 36px; padding-inline: 26px 20px; }
    .site-nav__list { gap: 6px; }
    .site-nav__link { padding-inline: 16px; }
}

/* ============================================
   PAGE HERO (full-bleed illustrated scene)
   ============================================ */

.page-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--header-h, 84px) + 28px);
    color: var(--ink);
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: var(--hero-bg-pos, 50% 50%);
    background-repeat: no-repeat;
}

.page-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 26, 14, 0.35) 0%, rgba(8, 26, 14, 0) 22%);
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    padding-bottom: 20px;
}

.hero-card {
    max-width: 600px;
}

.hero-card h1 { margin-bottom: 0.45em; }

.page-hero__art {
    position: relative;
    z-index: 0;
    height: clamp(230px, 70vw, 400px);
    margin-top: -6px;
    background-image: var(--hero-art);
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.page-hero .lantern {
    position: absolute;
    top: calc(var(--header-h, 84px) - 8px);
    z-index: 0;
}

.page-hero .lantern--left { left: 1.5%; }
.page-hero .lantern--right { right: 1.5%; }

@media (max-width: 767.98px) {
    .page-hero .lantern--left { display: none; }
    .page-hero .lantern { width: 44px; }
}

@media (min-width: 1024px) {
    .page-hero {
        min-height: clamp(640px, 52vw, 800px);
        justify-content: center;
        padding-bottom: clamp(48px, 6vw, 96px);
    }

    .page-hero__inner { padding-bottom: 0; }

    .hero-card { max-width: min(580px, 52%); }

    .page-hero__art {
        position: absolute;
        right: max(var(--gutter), calc((100% - 1320px) / 2));
        bottom: 0;
        width: min(44%, 640px);
        height: 88%;
        margin: 0;
        background-position: right bottom;
    }
}

/* Breadcrumbs */
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.breadcrumbs li + li::before {
    content: "›";
    margin-right: 8px;
    color: var(--honey);
}

.breadcrumbs a {
    color: var(--green-text);
    text-decoration: underline;
}

/* Jump pills */
.jump-pills ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.jump-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px 8px 12px;
    border-radius: var(--radius-pill);
    background: #fffbef;
    border: 2px solid #cfae67;
    color: var(--green-text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 3px 0 #b48f45;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.jump-pill:hover {
    background: var(--turquoise-100);
    color: var(--leaf-700);
    transform: translateY(-2px);
}

.jump-pill__leaf { width: 18px; height: 18px; flex-shrink: 0; }

/* CTA group */
.cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
}

.cta-group--center {
    align-items: center;
    text-align: center;
}

.cta-group__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.cta-group__note {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.on-dark .cta-group__note { color: var(--cream-dim); }

/* ============================================
   STILT-HUT GAME TILES
   ============================================ */

.hut-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 34px) clamp(12px, 2.4vw, 26px);
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.hut {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.hut:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 0 18px rgba(255, 210, 90, 0.55));
}

.hut__roof {
    display: block;
    width: 104%;
    max-width: none;
    height: clamp(34px, 5vw, 50px);
    margin-inline: -2%;
}

.hut__name {
    position: relative;
    z-index: 1;
    width: 82%;
    margin: -16px 0 0;
    padding: 5px 8px;
    border-radius: 5px;
    background: linear-gradient(180deg, #fffaea, #ecd7a2);
    box-shadow: inset 0 0 0 2px #8a5a24, 0 3px 0 #5e3814;
    font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.05rem);
    line-height: 1.2;
    text-align: center;
    color: #4a2c0c;
}

.hut__frame {
    width: 90%;
    margin-top: 8px;
    padding: 6px;
    border-radius: 4px;
    background: linear-gradient(180deg, #c98a42, #9c6223);
    box-shadow: inset 0 0 0 2px #5e3814, 0 6px 14px rgba(0, 0, 0, 0.35);
}

.hut__frame img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #3b2412;
}

.hut__base {
    position: relative;
    width: 100%;
    height: 26px;
    margin-top: 12px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 30px, rgba(74, 44, 12, 0.6) 30px 32px),
        linear-gradient(180deg, #d39a52 0%, #a8692a 60%, #7d4a1a 100%);
    box-shadow: inset 0 0 0 2px #5e3814, 0 4px 0 #4a2c0c;
    display: grid;
    place-items: center;
}

.hut__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #b9ec7a 0 12%, #5cae34 42%, #2f7a1f 78%, #1d4a12 100%);
    box-shadow: inset 0 0 0 3px #f5e3b0, 0 0 0 3px #4a2c0c, 0 6px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hut__play:hover {
    transform: scale(1.08);
    box-shadow: inset 0 0 0 3px #fff3cf, 0 0 0 3px #4a2c0c, 0 0 18px rgba(186, 236, 92, 0.75);
}

.hut__text {
    width: 100%;
    margin: 22px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(253, 246, 227, 0.96);
    color: var(--ink);
    font-size: 0.9375rem;
    line-height: 1.45;
    text-align: center;
}

/* ============================================
   JUNGLE BAND (dark green strip with bamboo rails)
   ============================================ */

.jungle-band {
    position: relative;
    isolation: isolate;
    padding-block: calc(var(--rail) + clamp(52px, 7vw, 92px));
    background:
        radial-gradient(70% 90% at 50% 40%, #1f5a3a 0%, rgba(18, 51, 31, 0) 70%),
        linear-gradient(180deg, var(--jungle-900), var(--jungle-950));
    color: var(--cream);
}

.jungle-band::before,
.jungle-band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--rail);
    z-index: 2;
    background: var(--bamboo-h) left center / auto 100% repeat-x;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.jungle-band::before { top: 0; }
.jungle-band::after { bottom: 0; }

.jungle-band > .container {
    position: relative;
    z-index: 1;
}

.jungle-band h2,
.jungle-band h3 { color: var(--gold-400); }
.jungle-band p { color: var(--cream-dim); }
.jungle-band a:not([class]) { color: var(--gold-200); }

.band-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.band-decor__med {
    position: absolute;
    z-index: 3;
    --med: clamp(40px, 5vw, 58px);
    margin: calc(var(--med) / -2) 0 0 calc(var(--med) / -2);
}

.band-decor__med--tl { top: calc(var(--rail) / 2); left: 16%; }
.band-decor__med--tr { top: calc(var(--rail) / 2); left: 84%; }
.band-decor__med--bl { top: calc(100% - var(--rail) / 2); left: 16%; }
.band-decor__med--br { top: calc(100% - var(--rail) / 2); left: 84%; }

.band-decor__side {
    position: absolute;
    top: calc(var(--rail) - 4px);
    width: 120px;
    height: 420px;
    display: none;
}

.band-decor__side--l { left: 0; }
.band-decor__side--r { right: 0; }
.band-decor__side--r .band-vine { transform: scaleX(-1); }

.band-vine {
    display: block;
    width: 120px;
    height: 420px;
}

.band-decor__side .coin {
    position: absolute;
    top: var(--y);
}

.band-decor__side--l .coin { left: var(--x); }
.band-decor__side--r .coin { right: var(--x); }

@media (min-width: 1100px) {
    .band-decor__side { display: block; }
}

/* Bamboo ring medallions */
.ring-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
    align-items: start;
}

.ring-grid--stack { grid-template-columns: minmax(0, 1fr); }

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

@media (min-width: 1024px) {
    .ring-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
    .ring-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ring-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
}

.ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ring__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    border-radius: var(--radius-md);
}

.ring__link:hover .ring__disc {
    box-shadow: 0 0 46px rgba(214, 255, 120, 0.7);
}

.ring__disc {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(118px, 34vw, 190px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #f5ffa6 0%, #bfe65e 28%, #4f9e2e 56%, #1b4a25 74%, #12331f 100%);
    box-shadow: 0 0 34px rgba(186, 236, 92, 0.45);
    transition: box-shadow 0.2s ease;
}

.ring__bamboo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ring__img {
    position: relative;
    width: 74%;
    height: 74%;
    object-fit: contain;
}

.ring__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 48%;
}

.ring__icon svg { width: 100%; height: auto; }

.ring__title {
    margin: 14px 0 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.5rem);
    line-height: 1.2;
    color: var(--gold-400);
}

.ring__text {
    max-width: 28ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--cream-dim);
}

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

.faq-list {
    display: grid;
    gap: 16px;
    align-items: start;
    max-width: 880px;
    margin-inline: auto;
}

.faq-item {
    position: relative;
    border-radius: var(--radius-md);
    background-color: #fffaf0;
    background-image: var(--paper-noise), linear-gradient(180deg, #fffaf0 0%, #f6e6bf 100%);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), 0 8px 18px rgba(20, 40, 20, 0.12);
}

.faq-item + .faq-item::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: -13px;
    height: 10px;
    border-radius: 5px;
    background: var(--bamboo-h) left center / auto 10px repeat-x;
}

.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 16px 20px;
    list-style: none;
    cursor: pointer;
    border-radius: var(--radius-md);
}

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

.faq-item__title {
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--green-text);
}

.faq-item__toggle {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--turquoise-500);
    box-shadow: inset 0 0 0 2px #0d6f6b, 0 3px 0 #0d6f6b;
    transition: transform 0.25s ease;
}

.faq-item__toggle::before,
.faq-item__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 3px;
    margin: -1.5px 0 0 -8px;
    border-radius: 2px;
    background: #06302e;
    transition: transform 0.25s ease;
}

.faq-item__toggle::after { transform: rotate(90deg); }

.faq-item[open] .faq-item__toggle { transform: rotate(180deg); }
.faq-item[open] .faq-item__toggle::after { transform: rotate(90deg) scaleX(0); }

.faq-item__a {
    padding: 0 20px 20px;
    color: var(--ink);
}

.faq-item__a p { margin: 0; }

.faq-list--gold .faq-item__toggle {
    background: radial-gradient(circle at 34% 28%, #fff6bd 0 10%, #ffd84f 34%, #e3a91f 68%, #a86f0f 100%);
    box-shadow: inset 0 0 0 2px #a8700f, 0 3px 0 #7a520c;
}

.faq-list--gold .faq-item__toggle::before,
.faq-list--gold .faq-item__toggle::after { background: #2b5414; }

/* ============================================
   NOTICE, RG ROW, SCROLL, TABLES, LANTERN
   ============================================ */

.notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    border-left: 6px solid var(--amber-500);
    background: var(--amber-100);
    color: var(--ink);
}

.notice--coral {
    border-left-color: var(--coral-500);
    background: var(--coral-100);
}

.notice--turquoise {
    border-left-color: var(--turquoise-600);
    background: var(--turquoise-100);
}

.notice__icon { flex-shrink: 0; width: 30px; height: 30px; }

.notice__title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--green-text);
}

.notice__body p { margin: 0; }
.notice__body p + p { margin-top: 4px; }

.rg-row {
    display: grid;
    gap: 18px;
}

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

.rg-row__item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rg-row__item p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.rg-row__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem !important;
    color: var(--green-text);
}

.rg-heart { flex-shrink: 0; width: 40px; height: 40px; }

.rg-row--dark .rg-row__item p { color: var(--cream-dim); }
.rg-row--dark .rg-row__title { color: var(--gold-400); }

/* Parchment scroll */
.scroll {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 26px;
    max-width: 980px;
    margin-inline: auto;
    filter: drop-shadow(0 18px 26px rgba(6, 24, 12, 0.4));
}

.scroll__roller {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll__knob {
    flex-shrink: 0;
    width: 40px;
    max-width: none;
    height: 20px;
}

.scroll__rod {
    flex: 1;
    width: 100%;
    margin-block: -4px;
    border-radius: 12px;
    background: linear-gradient(90deg, #5e3814 0%, #b47a3a 30%, #f0c47c 50%, #b07633 72%, #5e3814 100%);
    box-shadow: inset 0 0 0 2px #4a2c0c;
}

.scroll__paper {
    position: relative;
    z-index: 1;
    margin-inline: -8px;
    margin-block: 10px;
    padding: clamp(28px, 4vw, 48px) clamp(22px, 5vw, 64px);
    color: var(--ink);
    background-color: var(--parchment-100);
    background-image:
        var(--paper-noise),
        linear-gradient(180deg, rgba(170, 120, 50, 0.22) 0%, rgba(170, 120, 50, 0) 6%, rgba(170, 120, 50, 0) 94%, rgba(170, 120, 50, 0.22) 100%),
        linear-gradient(90deg, #e6cd94 0%, #fbf0d2 7%, #fff8e6 50%, #fbf0d2 93%, #e6cd94 100%);
}

.scroll__paper h2,
.scroll__paper h3 { text-align: center; }

@media (min-width: 768px) {
    .scroll { grid-template-columns: 34px minmax(0, 1fr) 34px; }
    .scroll__knob { width: 50px; height: 24px; }
}

/* Data tables */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fffaf0;
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), var(--shadow-soft);
}

.data-table caption {
    caption-side: top;
    text-align: left;
    padding-bottom: 10px;
    font-weight: 700;
    color: var(--ink-soft);
}

.data-table th,
.data-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    background: var(--jungle-800);
    color: var(--cream);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
}

.data-table tbody th {
    font-weight: 800;
    color: var(--green-text);
}

.data-table tbody tr:nth-child(even) > * { background: var(--turquoise-100); }

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

    .data-table--stack { background: transparent; box-shadow: none; overflow: visible; }

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

    .data-table--stack tr {
        margin-bottom: 14px;
        border-radius: var(--radius-md);
        background: #fffaf0;
        box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), var(--shadow-soft);
        overflow: hidden;
    }

    .data-table--stack tbody tr:nth-child(even) > * { background: transparent; }

    .data-table--stack tbody th { background: var(--jungle-800) !important; color: var(--cream); }

    .data-table--stack td {
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        gap: 10px;
        padding: 10px 16px;
    }

    .data-table--stack td + td { border-top: 1px dashed rgba(169, 120, 50, 0.45); }

    .data-table--stack td::before {
        content: attr(data-label);
        font-weight: 800;
        color: var(--green-text);
    }
}

/* Lantern */
.lantern {
    position: relative;
    display: inline-block;
    width: 56px;
    pointer-events: none;
}

.lantern__svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.lantern__glow {
    position: absolute;
    left: 50%;
    top: 62%;
    width: 160%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 210, 90, 0.75) 0%, rgba(255, 190, 60, 0.28) 38%, rgba(255, 190, 60, 0) 70%);
}

.lantern.is-glowing .lantern__glow {
    animation: lantern-pulse 3.4s ease-in-out infinite;
}

.is-hidden-tab .lantern__glow { animation-play-state: paused; }

@keyframes lantern-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.92); }
    50% { transform: translate(-50%, -50%) scale(1.12); }
}

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

.site-footer {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(72px, 10vw, 140px) 0 28px;
    color: var(--cream);
}

.site-footer__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--jungle-900);
    background-image:
        linear-gradient(180deg, rgba(10, 32, 18, 0.1) 0%, rgba(10, 32, 18, 0.35) 55%, rgba(8, 24, 14, 0.92) 100%),
        url("./assets/8831ce3ecca7cfa0a02791354b55fb17.webp");
    background-size: cover, cover;
    background-position: center, 50% 40%;
    background-repeat: no-repeat;
}

.site-footer__inner {
    display: grid;
    gap: clamp(32px, 4vw, 44px);
    max-width: calc(1000px + 2 * var(--gutter));
}

.footer-plate {
    position: relative;
    display: grid;
    gap: 28px;
    margin: 10px;
    padding: clamp(30px, 4vw, 44px) clamp(22px, 4vw, 44px);
    border-radius: var(--radius-md);
    color: var(--ink);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 40px rgba(214, 160, 52, 0.35), var(--shadow-board);
}

.footer-plate::before {
    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    top: -10px;
    height: var(--pole);
    background:
        var(--lash) left 0 top 50% / 26px 26px no-repeat,
        var(--lash) right 0 top 50% / 26px 26px no-repeat,
        var(--bamboo-h) left center / auto var(--pole) repeat-x;
}

.footer-brand {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--green-text);
    text-decoration: none;
}

.footer-plate__brand p {
    margin: 0;
    color: var(--ink-soft);
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.footer-nav__title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--leaf-700);
}

.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgba(31, 84, 32, 0.4);
    text-underline-offset: 0.2em;
}

.footer-nav a:hover {
    color: var(--leaf-700);
    text-decoration-color: currentColor;
}

@media (min-width: 768px) {
    .footer-plate { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 36px; }
    .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.footer-licence {
    display: grid;
    gap: 20px;
    padding: clamp(22px, 3vw, 30px);
    border-radius: var(--radius-md);
    background: rgba(9, 28, 16, 0.88);
    box-shadow: inset 0 0 0 2px rgba(166, 216, 106, 0.35);
}

.footer-licence__text {
    margin: 0;
    color: var(--cream);
    font-size: 0.9875rem;
}

.footer-licence .rg-row__item p { color: var(--cream-dim); }
.footer-licence .rg-row__title { color: var(--gold-400); }

.footer-licence .age-badge {
    border-color: var(--cream);
    background: var(--jungle-900);
    color: var(--cream);
}

.site-footer__copy {
    margin: 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--cream-dim);
}

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

/* Hero */
.home-hero .hero-card {
    position: relative;
}

.home-hero .hero-card::before {
    content: "";
    position: absolute;
    inset: -12% -18%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 222, 110, 0.55), rgba(255, 210, 90, 0.18) 60%, rgba(255, 210, 90, 0) 100%);
}

.home-hero .lead { color: var(--ink-soft); }

.offer-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 2px dashed rgba(169, 120, 50, 0.45);
}

.offer-block__title {
    font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
    margin-bottom: 0.4em;
}

.offer-block__deal { margin-bottom: 12px; }

.offer-terms {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 12px 14px 12px 16px;
    list-style: none;
    border-radius: var(--radius-sm);
    border-left: 5px solid var(--leaf-600);
    background: rgba(255, 252, 240, 0.85);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.offer-terms strong { color: var(--green-text); }

.home-hero .page-hero__art {
    background-position: center bottom;
}

@media (min-width: 1024px) {
    .home-hero .page-hero__art {
        width: min(42%, 620px);
        height: 74%;
        background-position: right bottom;
    }
}

/* Shared readability plate for copy over illustrated scenes */
.scene-plate {
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: rgba(9, 28, 16, 0.84);
    color: var(--cream);
    box-shadow: inset 0 0 0 2px rgba(166, 216, 106, 0.3);
}

.scene-plate p { color: var(--cream); }
.scene-plate .text-link { color: var(--gold-200); }
.scene-plate a:not([class]) { color: var(--gold-200); }

.scene-plate--river {
    background: rgba(6, 34, 52, 0.84);
    box-shadow: inset 0 0 0 2px rgba(31, 181, 174, 0.4);
}

/* Popular slots */
.slots-scene {
    position: relative;
    isolation: isolate;
    padding: var(--section-space) 0 clamp(120px, 16vw, 240px);
    background: var(--jungle-900);
}

.slots-scene__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("./assets/69cc5f2433ec8b200a736b875e53a67f.webp");
    background-size: cover;
    background-position: 50% 100%;
    background-repeat: no-repeat;
}

.slots-scene__inner {
    display: grid;
    gap: clamp(26px, 4vw, 44px);
}

.slots-scene__inner .ribbon-heading { margin-bottom: 0; }

.slots-scene__intro {
    max-width: 820px;
    margin-inline: auto;
}

.slots-frame {
    margin: 12px;
    padding: clamp(28px, 4vw, 44px) clamp(16px, 3vw, 36px);
    background: rgba(10, 34, 22, 0.55);
    border-radius: 4px;
}

.slots-frame .hut-grid > li { display: flex; justify-content: center; }
.slots-frame .hut { width: 100%; }

.slots-scene__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 640px;
    margin-inline: auto;
}

.slots-scene__foot p { margin: 0; }

/* Live casino */
.live-scene {
    position: relative;
    isolation: isolate;
    padding-top: var(--section-space);
    background: var(--river-800);
}

.live-scene__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("./assets/dbf3c72471e542cd145393f8ecc96847.webp");
    background-size: cover;
    background-position: 30% 50%;
    background-repeat: no-repeat;
}

.live-scene__grid {
    display: grid;
    gap: 32px;
}

.live-label {
    display: grid;
    gap: 20px;
    align-content: start;
}

.live-label .btn { margin-top: 14px; }

.live-banner {
    display: flex;
    align-items: center;
}

.live-banner__cap {
    flex-shrink: 0;
    width: 44px;
    height: auto;
    position: relative;
    z-index: 1;
}

.live-banner__cap--r { transform: scaleX(-1); }

.live-banner__band {
    flex: 1;
    min-width: 0;
    margin-inline: -14px;
    padding: 12px 22px;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), linear-gradient(180deg, #fff7dc 0%, #f1dca4 100%);
    border-block: 4px solid #8fae3a;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.live-banner__band h2 {
    margin: 0;
    font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
    color: var(--green-text);
}

.live-card {
    margin: 12px;
    border-radius: 4px;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 40px rgba(214, 160, 52, 0.35), var(--shadow-board);
}

.live-card__inner {
    position: relative;
    z-index: 1;
    padding: clamp(30px, 4vw, 44px) clamp(24px, 3.5vw, 44px);
}

.live-card .cta-group { margin-top: 16px; }

.live-scene__gazebo {
    height: clamp(260px, 82vw, 440px);
    margin-top: 8px;
    background-image: url("./assets/dcfcb15985bb2df829de2f4d6d4c9972.webp");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
    .live-scene {
        min-height: clamp(640px, 50vw, 760px);
        padding-bottom: clamp(80px, 8vw, 120px);
    }

    .live-scene__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 40px;
        align-items: start;
    }

    .live-label { padding-top: clamp(120px, 12vw, 200px); }

    .live-card { position: relative; z-index: 1; }

    .live-scene__gazebo {
        position: absolute;
        z-index: 2;
        right: max(0px, calc((100% - 1320px) / 2));
        bottom: 0;
        width: min(40%, 560px);
        height: 92%;
        margin: 0;
        background-position: right bottom;
        pointer-events: none;
    }
}

/* Mechanics band */
.mechanics .section-head p { color: var(--cream-dim); }

.mechanics__more {
    max-width: 760px;
    margin: clamp(32px, 4vw, 48px) auto 0;
    text-align: center;
}

/* Clearing: payments + licence */
.clearing {
    position: relative;
    isolation: isolate;
    padding-block: clamp(56px, 7vw, 96px) clamp(24px, 4vw, 48px);
    background: var(--jungle-800);
}

.clearing__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(180deg, rgba(10, 32, 18, 0.25) 0%, rgba(10, 32, 18, 0.1) 40%, rgba(10, 32, 18, 0.45) 100%),
        url("./assets/8831ce3ecca7cfa0a02791354b55fb17.webp");
    background-size: cover, cover;
    background-position: center, 50% 20%;
    background-repeat: no-repeat;
}

.clearing__section {
    position: relative;
    padding-block: clamp(20px, 3vw, 36px);
}

.pay-plate {
    position: relative;
    display: grid;
    gap: 18px;
    max-width: 880px;
    margin: 10px auto;
    padding: clamp(30px, 4vw, 44px) clamp(22px, 4vw, 44px);
    border-radius: var(--radius-md);
    text-align: center;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 40px rgba(214, 160, 52, 0.35), var(--shadow-board);
}

.pay-plate::before {
    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    top: -10px;
    height: var(--pole);
    background:
        var(--lash) left 0 top 50% / 26px 26px no-repeat,
        var(--lash) right 0 top 50% / 26px 26px no-repeat,
        var(--bamboo-h) left center / auto var(--pole) repeat-x;
}

.pay-plate h2,
.pay-plate p { margin: 0; }

.pay-plate .notice { text-align: left; }

.pay-chips { justify-content: center; }

.pay-chip {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
}

.pay-chip--crypto {
    background: var(--turquoise-100);
    border-color: #7cc9c2;
}

.pay-plate__link { display: flex; justify-content: center; }

.licence-rg {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px dashed rgba(169, 120, 50, 0.45);
}

.final-cta {
    max-width: 680px;
    margin: clamp(32px, 4vw, 48px) auto 0;
    padding: 24px 22px;
    border-radius: var(--radius-lg);
    background: rgba(9, 28, 16, 0.86);
    box-shadow: inset 0 0 0 2px rgba(166, 216, 106, 0.35);
    text-align: center;
}

.final-cta__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    color: var(--gold-400);
}

.final-cta .cta-group { margin-top: 14px; }

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

/* Hero */
.bonus-hero .hero-card { max-width: 620px; }
.bonus-hero .lead { margin-bottom: 0; color: var(--ink-soft); }

@media (min-width: 1024px) {
    .bonus-hero .hero-card { max-width: min(620px, 56%); }

    .bonus-hero .page-hero__art {
        width: min(40%, 560px);
        height: 80%;
        background-position: right bottom;
    }
}

/* Welcome steps */
.welcome {
    background: linear-gradient(180deg, var(--cream) 0%, #d8f3ef 100%);
}

.welcome__intro { margin-bottom: clamp(24px, 3vw, 36px); }

.welcome__grid {
    display: grid;
    gap: 32px;
    align-items: start;
}

@media (min-width: 1024px) {
    .welcome__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; }
}

.trail { position: relative; }

.trail__line {
    position: absolute;
    left: 0;
    top: 24px;
    width: 40px;
    max-width: none;
    height: calc(100% - 48px);
    z-index: 0;
}

.trail__list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step {
    position: relative;
    margin-left: 56px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background-color: #fffaf0;
    background-image: var(--paper-noise), linear-gradient(180deg, #fffaf0 0%, #f6e6bf 100%);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), var(--shadow-soft);
}

.step::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 28px;
    width: 16px;
    height: 6px;
    border-radius: 3px;
    background: #9ab83e;
    box-shadow: 0 0 0 1.5px #324810;
}

.step .medallion {
    --med: 40px;
    position: absolute;
    left: -56px;
    top: 12px;
}

.step h3 { margin-bottom: 0.3em; }
.step p { margin: 0; }
.step p + p { margin-top: 8px; }

.step__note {
    padding: 8px 10px;
    border-left: 4px solid var(--amber-500);
    background: var(--amber-100);
    border-radius: 6px;
    font-size: 0.9375rem;
}

.terms-panel {
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--radius-md);
    border-left: 6px solid var(--coral-500);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 30px rgba(214, 160, 52, 0.3), var(--shadow-soft);
}

.terms-panel h3 { margin-bottom: 0.6em; }
.terms-panel .check-list li strong { color: var(--green-text); }

@media (min-width: 1024px) {
    .terms-panel { position: sticky; top: 24px; }
}

/* Wagering */
.wagering { max-width: 860px; }
.wagering h2 { margin-bottom: 0.6em; }

.equation {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 26px 0;
}

.equation__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.equation__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    background: var(--turquoise-100);
    border: 3px solid var(--turquoise-500);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
    color: var(--green-text);
}

.equation__label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-align: center;
}

.equation__op {
    align-self: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--coral-500);
}

@media (min-width: 768px) {
    .equation { flex-direction: row; align-items: flex-start; gap: 14px; }
    .equation__op { margin-top: 6px; }
}

/* Bonus Crab */
.crab-panel {
    display: grid;
    gap: 28px;
    align-items: center;
    padding: clamp(28px, 4vw, 52px);
    border-radius: var(--radius-lg);
    color: var(--cream);
    background:
        radial-gradient(60% 80% at 20% 50%, rgba(190, 230, 94, 0.4) 0%, rgba(190, 230, 94, 0) 70%),
        linear-gradient(180deg, var(--jungle-800), var(--jungle-950));
    box-shadow: inset 0 0 0 3px rgba(166, 216, 106, 0.35), var(--shadow-board);
}

.crab-panel__media { display: grid; place-items: center; }
.crab-panel h2 { color: var(--gold-400); }
.crab-panel p { color: var(--cream-dim); }
.crab-panel a:not([class]) { color: var(--gold-200); }

@media (min-width: 768px) {
    .crab-panel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; }
}

/* Crypto + sport cards */
.offer-pair {
    display: grid;
    gap: 28px;
    align-items: stretch;
}

@media (min-width: 1024px) {
    .offer-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

.offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    padding: clamp(22px, 3vw, 34px);
    border-radius: var(--radius-md);
    background-color: #fffaf0;
    background-image: var(--paper-noise), linear-gradient(180deg, #fffaf0 0%, #f6e6bf 100%);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.45), var(--shadow-soft);
}

.offer-card--crypto {
    background-image: var(--paper-noise), linear-gradient(180deg, #e3f7f3 0%, #fff6dc 100%);
    box-shadow: inset 0 0 0 2px #7cc9c2, var(--shadow-soft);
}

.offer-card h2 {
    margin: 0;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
}

.offer-card--crypto h2 { padding-right: 76px; }

.offer-card p { margin: 0; }

.offer-card__ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 92px;
    height: 92px;
}

.offer-card .offer-terms { margin-top: auto; }
.offer-card .cta-group { margin-top: 4px; }

.sport-icons {
    display: flex;
    gap: 12px;
}

/* Reload + cashback */
.rc-grid {
    display: grid;
    gap: 24px;
}

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

.rc-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: #fffaf0;
    background-image: var(--paper-noise), linear-gradient(180deg, #fffaf0 0%, #f6e6bf 100%);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.45), var(--shadow-soft);
}

.rc-card__bar {
    display: block;
    width: 100%;
    max-width: none;
    height: 22px;
}

.rc-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    padding: clamp(20px, 3vw, 30px);
}

.rc-card__body > * { margin: 0; }

.card-note {
    margin-top: auto !important;
    padding: 10px 12px;
    border-left: 4px solid var(--turquoise-600);
    border-radius: 6px;
    background: var(--turquoise-100);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.gauge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 132px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--turquoise-500) 0 54deg, #cfe9e4 54deg 360deg);
}

.gauge::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: #fffaf0;
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.3);
}

.gauge__sub,
.gauge__num { position: relative; z-index: 1; line-height: 1.05; }

.gauge__sub {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--ink-soft);
}

.gauge__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    color: var(--green-text);
}

/* VIP teaser */
.vip-banner {
    display: grid;
    gap: 28px;
    align-items: center;
    padding: clamp(24px, 4vw, 40px);
    border-radius: var(--radius-lg);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 0 3px rgba(169, 120, 50, 0.45), inset 0 0 40px rgba(214, 160, 52, 0.3), var(--shadow-soft);
}

.vip-banner h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.vip-banner__copy p { margin-bottom: 8px; }

.vip-steps {
    position: relative;
    padding-top: 48px;
}

.vip-steps__ladder {
    position: absolute;
    inset: 36px 12px 28px;
    width: calc(100% - 24px);
    height: calc(100% - 64px);
    max-width: none;
}

.vip-steps__list {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vip-steps__list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: calc(var(--i) * 9px);
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--green-text);
    text-align: center;
}

.vip-steps__list .medallion { --med: 40px; }

@media (min-width: 768px) {
    .vip-banner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
    .vip-steps__list li { font-size: 0.9375rem; margin-bottom: calc(var(--i) * 12px); }
    .vip-steps__list .medallion { --med: 48px; }
}

/* FAQ + final */
.faq-more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.bonus-final { padding-block: clamp(40px, 6vw, 72px); }

.bonus-final .final-cta { margin-top: 0; }

.final-cta__links {
    margin: 16px 0 0;
    font-size: 0.9375rem;
    color: var(--cream-dim);
}

.final-cta__links a { color: var(--gold-200); }

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

.spil-narrow { max-width: 860px; }

/* Hero */
.spil-hero .hero-card { max-width: 640px; }
.spil-hero .lead { margin-bottom: 0; color: var(--ink-soft); }
.spil-hero .jump-pills ul { margin-top: 18px; }

@media (min-width: 1024px) {
    .spil-hero .hero-card { max-width: min(620px, 56%); }

    .spil-hero .page-hero__art {
        width: min(38%, 520px);
        height: 88%;
        background-position: right bottom;
    }
}

/* Category grid on a teal band with a log pier */
.spil-cats {
    position: relative;
    padding: var(--section-space) 0 0;
    background: linear-gradient(180deg, #0f5a60 0%, #0a4048 55%, #08303a 100%);
    color: var(--cream);
}

.spil-cats .section-head h2 { color: var(--gold-400); }
.spil-cats .section-head p { color: var(--cream-dim); }

.spil-cats__grid > li { display: flex; justify-content: center; }
.spil-cats__grid .hut { width: 100%; }

.pier {
    margin-top: clamp(8px, 2vw, 20px);
    line-height: 0;
}

.pier svg {
    display: block;
    width: 100%;
    height: 46px;
    max-width: none;
}

/* Slots */
.spil-slots {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, #fff9e8 0%, #f6ecd0 100%);
}

.spil-slots .notice { margin-top: 24px; }

.leaf-list {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.leaf-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.leaf-list .leaf-icon { margin-top: 4px; }

.leaf-list__term {
    font-weight: 800;
    color: var(--green-text);
    background-image: linear-gradient(var(--turquoise-500), var(--turquoise-500));
    background-size: 100% 3px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 1px;
}

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

/* Live casino */
.spil-live {
    position: relative;
    isolation: isolate;
    padding-block: var(--section-space) calc(var(--section-space) + 36px);
    background: linear-gradient(180deg, var(--river-600) 0%, var(--river-800) 100%);
}

.spil-live .container { position: relative; z-index: 1; }

.spil-live__card {
    max-width: 900px;
    margin: 12px auto;
    border-radius: 4px;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 40px rgba(214, 160, 52, 0.35), var(--shadow-board);
}

.spil-live__inner {
    position: relative;
    z-index: 1;
    padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 52px);
}

.spil-live__inner h3 { margin-top: 1.1em; }
.spil-live__chips { margin: 4px 0 16px; }
.spil-live__note { margin-top: 12px; }

.spil-live__waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    max-width: none;
    height: 60px;
    pointer-events: none;
}

/* Crash */
.spil-crash {
    padding-block: var(--section-space);
    background: var(--cream);
}

.crash-split {
    display: grid;
    gap: 28px;
    align-items: center;
}

@media (min-width: 768px) {
    .crash-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; }
}

.crash-visual {
    padding: 18px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(70% 70% at 30% 80%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #7fd9d1 0%, #1fb5ae 100%);
    box-shadow: inset 0 0 0 3px #0d6f6b, var(--shadow-soft);
}

.crash-visual svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Sportsbook */
.spil-sport {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, #e7f6f1 0%, var(--cream) 100%);
}

.feature-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 0 0 clamp(24px, 3vw, 36px);
    padding: 0;
    list-style: none;
}

.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 24px 10px 18px;
    border-radius: var(--radius-pill);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), linear-gradient(180deg, #fffaf0 0%, #f2dfae 100%);
    border: 2px solid #cfae67;
    box-shadow: 0 3px 0 #b48f45;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--green-text);
}

.feature-chip svg { flex-shrink: 0; }

.league-grid {
    display: grid;
    gap: 20px;
    max-width: 900px;
    margin-inline: auto;
}

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

.league-card {
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--radius-md);
    background-color: #fffaf0;
    background-image: var(--paper-noise), linear-gradient(180deg, #fffaf0 0%, #f6e6bf 100%);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), var(--shadow-soft);
}

.league-card h3 { margin-bottom: 0.3em; }
.league-card p { margin: 0; }

.spil-sport__more {
    max-width: 820px;
    margin: clamp(24px, 3vw, 36px) auto 0;
    text-align: center;
}

/* Providers */
.spil-providers {
    padding-block: var(--section-space);
    background: var(--cream);
}

.honest-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: clamp(20px, 3vw, 32px);
    border-left: 6px solid var(--coral-500);
    border-radius: var(--radius-md);
    background-color: #fffaf0;
    background-image: var(--paper-noise), linear-gradient(180deg, #fffaf0 0%, #f6e6bf 100%);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.3), var(--shadow-soft);
}

.honest-card__icon { margin-top: 2px; }
.honest-card p { margin: 0 0 14px; }
.honest-card p:last-child { margin-bottom: 0; }

.studio-chips { margin: 0 0 16px; }

.chip--plain {
    background: #ffffff;
    border-color: #d9bd7c;
    color: var(--ink);
}

@media (max-width: 480px) {
    .honest-card { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile */
.spil-mobile {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, var(--cream) 0%, #d8f3ef 100%);
}

.mobile-split {
    display: grid;
    gap: 28px;
    align-items: center;
}

@media (min-width: 768px) {
    .mobile-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
}

.phone-panel {
    display: grid;
    place-items: center;
    min-height: 280px;
    padding: 28px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #5fd0c8 0%, #1fb5ae 100%);
    box-shadow: inset 0 0 0 3px #0d6f6b, var(--shadow-soft);
}

.phone-panel svg { width: auto; height: 250px; max-width: 100%; }

/* Final CTA scroll */
.spil-final {
    padding-block: clamp(48px, 7vw, 88px);
    background:
        radial-gradient(70% 90% at 50% 40%, #1f5a3a 0%, rgba(18, 51, 31, 0) 70%),
        linear-gradient(180deg, var(--jungle-900), var(--jungle-950));
}

.spil-final .scroll__paper > p { text-align: center; }

.spil-final__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 28px;
    margin-top: 12px;
}

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

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

.om-narrow { max-width: 860px; }

/* Hero */
.om-hero .hero-card { max-width: 620px; }
.om-hero .page-hero__art { background-position: center bottom; }
.om-hero .jump-pills ul { margin-top: 22px; }
.om-hero .breadcrumbs ol { margin-bottom: 20px; }

@media (min-width: 1024px) {
    .om-hero .hero-card { max-width: min(600px, 54%); }

    .om-hero .page-hero__art {
        width: min(38%, 520px);
        height: 80%;
        background-position: right bottom;
    }
}

/* Story */
.om-story {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, #fff9e8 0%, var(--cream) 100%);
}

.om-story__grid {
    display: grid;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

@media (min-width: 1024px) {
    .om-story__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.om-story__text {
    position: relative;
    padding-left: 52px;
}

.om-story__medal {
    position: absolute;
    left: 0;
    top: 0;
}

.om-story__medal .medallion { --med: 40px; }

.om-story__rule {
    position: absolute;
    left: 10px;
    top: 52px;
    bottom: 0;
    width: 20px;
    background: var(--bamboo-v) center top / 20px auto repeat-y;
}

.om-story__text h2 { padding-top: 4px; }

.om-aside {
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--radius-md);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), inset 0 0 30px rgba(214, 160, 52, 0.25), var(--shadow-soft);
}

/* Fact table */
.om-facts {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, var(--cream) 0%, #e7f6f1 100%);
}

.fact-card {
    position: relative;
    max-width: 860px;
    margin-inline: auto;
    padding: 36px clamp(14px, 3vw, 28px) clamp(18px, 3vw, 28px);
    border-radius: var(--radius-md);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), var(--shadow-board);
}

.fact-card__bar {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 8px;
    height: 20px;
    background: var(--bamboo-h) left center / auto 20px repeat-x;
}

.fact-card .data-table { box-shadow: none; }

@media (max-width: 767.98px) {
    .fact-card { padding-inline: 12px; }
}

/* Licence scroll */
.om-licence {
    padding-block: var(--section-space);
    background:
        radial-gradient(70% 90% at 50% 40%, #1f5a3a 0%, rgba(18, 51, 31, 0) 70%),
        linear-gradient(180deg, var(--jungle-900), var(--jungle-950));
}

.om-licence .scroll__paper h2 { margin-bottom: 0.7em; }
.om-licence .scroll__paper .notice { margin-block: 1.2em; }

/* Legal question */
.om-legal {
    padding-block: var(--section-space);
    background: var(--cream);
}

.answer-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: clamp(20px, 3vw, 32px);
    border: 2px solid var(--turquoise-500);
    border-radius: var(--radius-lg);
    background: var(--turquoise-100);
    box-shadow: var(--shadow-soft);
}

.answer-callout__icon { margin-top: 2px; }
.answer-callout p { margin: 0 0 0.8em; }
.answer-callout p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
    .answer-callout { grid-template-columns: minmax(0, 1fr); }
}

/* Mascot band */
.om-mascot .container { position: relative; z-index: 1; }

.mascot-card {
    max-width: 760px;
    margin-inline: auto;
    padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px);
    border-radius: var(--radius-lg);
    text-align: center;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 0 3px rgba(169, 120, 50, 0.45), var(--shadow-board);
}

.mascot-card h2 { color: var(--green-text); }
.mascot-card p { color: var(--ink); }

.mascot-card .mascot-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.2em;
    font-weight: 700;
    color: var(--green-text);
}

/* Security chips */
.om-security {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, var(--cream) 0%, #fff9e8 100%);
}

.trust-chips {
    display: grid;
    gap: 18px;
    margin: 0 0 clamp(24px, 3vw, 36px);
    padding: 0;
    list-style: none;
}

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

.trust-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 20px;
    border-radius: var(--radius-lg);
    text-align: center;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), linear-gradient(180deg, #fffaf0 0%, #f6e6bf 100%);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), var(--shadow-soft);
}

.trust-chip h3 { margin: 0; font-size: 1.2rem; }
.trust-chip p { margin: 0; font-size: 0.9875rem; }

.om-security__more { margin-inline: auto; text-align: center; }

/* Support */
.om-support {
    padding-block: var(--section-space);
    background: #fff9e8;
}

.support-grid {
    display: grid;
    gap: 20px;
    max-width: 860px;
    margin-inline: auto;
}

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

.support-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--radius-md);
    border-top: 6px solid var(--turquoise-500);
    background: #ffffff;
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.25), var(--shadow-soft);
}

.support-card h3 { margin: 0; }
.support-card p { margin: 0; }

.om-support__more {
    max-width: 860px;
    margin: clamp(20px, 3vw, 32px) auto 0;
    text-align: center;
}

/* Responsible gaming */
.om-rg {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, #fff9e8 0%, #f6ecd0 100%);
}

.rg-card {
    position: relative;
    display: grid;
    gap: 22px;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 44px);
    border-radius: var(--radius-lg);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 0 3px rgba(169, 120, 50, 0.45), inset 0 0 40px rgba(214, 160, 52, 0.3), var(--shadow-board);
}

.rg-card::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 8px;
    height: 12px;
    background: var(--bamboo-h) left center / auto 12px repeat-x;
}

@media (min-width: 768px) {
    .rg-card { grid-template-columns: auto minmax(0, 1fr); gap: 36px; }
}

.rg-card__side {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

@media (min-width: 768px) {
    .rg-card__side { flex-direction: column; padding-top: 6px; }
}

.rg-card .rg-card__age {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
    border-color: var(--jungle-800);
    background: var(--jungle-800);
    color: var(--cream);
}

.rg-card__body h2 { margin-top: 6px; }
.rg-card__body .check-list { margin-top: 18px; }

/* FAQ + final */
.om-faq .faq-list { margin-bottom: 0; }

.om-final {
    padding-block: clamp(48px, 7vw, 88px);
    background:
        radial-gradient(70% 90% at 50% 40%, #1f5a3a 0%, rgba(18, 51, 31, 0) 70%),
        linear-gradient(180deg, var(--jungle-900), var(--jungle-950));
}

.om-final .final-cta { margin-top: 0; }
.om-final .final-cta > p:not([class]) { margin-top: 10px; color: var(--cream-dim); }

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

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

.vip-narrow { max-width: 860px; }

/* Hero */
.vip-hero .hero-card { max-width: 620px; }
.vip-hero .page-hero__inner { padding-bottom: clamp(220px, 62vw, 340px); }
.vip-hero .page-hero__bg { background-position: 78% 100%; }
.vip-hero .board .lead { margin-bottom: 0.8em; }
.vip-hero .breadcrumbs ol { margin-bottom: 20px; }

@media (min-width: 1024px) {
    .vip-hero .page-hero__inner { padding-bottom: 0; }
    .vip-hero .page-hero__bg { background-position: 60% 50%; }
    .vip-hero .hero-card { max-width: min(600px, 52%); }
}

/* Levels table with bamboo ladder */
.vip-levels {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, #fff9e8 0%, var(--cream) 100%);
}

.vip-card {
    --pl: 52px;
    position: relative;
    max-width: 980px;
    margin-inline: auto;
    padding: 24px 14px 24px var(--pl);
    border-radius: var(--radius-lg);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), var(--shadow-board);
}

@media (min-width: 768px) {
    .vip-card { --pl: 64px; padding-right: 24px; }
}

.vip-ladder {
    position: absolute;
    left: calc(var(--pl) / 2 - 15px);
    top: 30px;
    width: 30px;
    height: calc(100% - 60px);
    max-width: none;
}

.vip-card .table-wrapper { overflow: visible; }

.vip-table {
    position: relative;
    overflow: visible;
    background: #fffaf0;
    box-shadow: none;
}

.vip-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.vip-table thead th:first-child { border-top-left-radius: var(--radius-md); }
.vip-table thead th:last-child { border-top-right-radius: var(--radius-md); }
.vip-table tbody tr:last-child > :first-child { border-bottom-left-radius: var(--radius-md); }
.vip-table tbody tr:last-child > :last-child { border-bottom-right-radius: var(--radius-md); }

.vip-table tbody th { position: relative; white-space: nowrap; }

.vip-rung {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: calc(var(--pl) / -2 - 20px);
    display: block;
    transform: translateY(-50%);
}

.vip-rung .medallion { --med: 40px; }

@media (max-width: 767.98px) {
    .vip-table--stack tr { overflow: visible; }
    .vip-table--stack tbody th {
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        white-space: normal;
    }
    .vip-table--stack tbody tr:last-child > * { border-radius: 0; }
    .vip-table--stack tbody tr:last-child > :last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
}

/* Benefits */
.vip-benefits {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, var(--cream) 0%, #e7f6f1 100%);
}

.benefit-grid {
    display: grid;
    gap: 20px;
    max-width: 1000px;
    margin-inline: auto;
}

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

.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--radius-md);
    background-color: #fffaf0;
    background-image: var(--paper-noise), linear-gradient(180deg, #fffaf0 0%, #f6e6bf 100%);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), var(--shadow-soft);
}

.benefit-card h3 { margin: 0; }
.benefit-card p { margin: 0; }

.benefit-card__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--turquoise-500);
    box-shadow: inset 0 0 0 3px #0d6f6b, 0 3px 0 #0d6f6b;
}

/* Rules + timeline */
.vip-rules {
    padding-block: var(--section-space);
    background: var(--cream);
}

.timeline {
    position: relative;
    display: grid;
    gap: 18px;
    margin: clamp(28px, 4vw, 40px) 0 0;
    padding: 0;
    list-style: none;
}

.timeline__rope { position: absolute; max-width: none; }
.timeline__rope--h { display: none; }

.timeline__rope--v {
    left: 26px;
    top: 40px;
    width: 12px;
    height: calc(100% - 80px);
}

.timeline__node {
    position: relative;
    z-index: 1;
    padding: 16px 18px 16px 76px;
    border-radius: var(--radius-md);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), linear-gradient(180deg, #fffaf0 0%, #f6e6bf 100%);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.45), var(--shadow-soft);
}

.timeline__node .medallion {
    --med: 44px;
    position: absolute;
    left: 8px;
    top: 14px;
}

.timeline__node h3 { margin-bottom: 0.3em; }
.timeline__node p { margin: 0; }

@media (min-width: 768px) {
    .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
    .timeline__rope--v { display: none; }

    .timeline__rope--h {
        display: block;
        left: 16.66%;
        right: 16.66%;
        width: 66.68%;
        top: 28px;
        height: 12px;
    }

    .timeline__node {
        padding: 68px 18px 20px;
        text-align: center;
    }

    .timeline__node .medallion {
        left: 50%;
        top: 12px;
        transform: translateX(-50%);
    }
}

/* Rewards band */
.vip-rewards .section-head { max-width: 780px; }

/* Responsible play */
.vip-rest {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, #fff9e8 0%, #f6ecd0 100%);
}

.vip-rest__grid {
    display: grid;
    gap: 28px;
    align-items: center;
}

@media (min-width: 768px) {
    .vip-rest__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; }
}

.vip-rest__art {
    position: relative;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, rgba(31, 181, 174, 0.3) 0%, rgba(31, 181, 174, 0.12) 55%, rgba(31, 181, 174, 0) 100%);
}

.vip-rest__art img {
    width: 100%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
}

.vip-rest__card {
    padding: clamp(24px, 4vw, 44px);
    border-radius: var(--radius-lg);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 0 3px rgba(169, 120, 50, 0.45), inset 0 0 36px rgba(214, 160, 52, 0.28), var(--shadow-soft);
}

.vip-rest__card .check-list { margin: 18px 0; }
.vip-rest__card .rg-row {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 2px dashed rgba(169, 120, 50, 0.45);
}

/* FAQ + final */
.vip-faq {
    padding-block: var(--section-space);
    background: var(--cream);
}

.vip-final {
    padding-block: clamp(48px, 7vw, 88px);
    background:
        radial-gradient(70% 90% at 50% 40%, #1f5a3a 0%, rgba(18, 51, 31, 0) 70%),
        linear-gradient(180deg, var(--jungle-900), var(--jungle-950));
}

.vip-final .final-cta { margin-top: 0; }

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

.pay-narrow { max-width: 820px; margin-inline: auto; }
.pay-narrow--after { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 16px; }
.pay-narrow p { margin: 0; }

/* Hero */
.pay-hero .hero-card { max-width: 620px; }
.pay-hero .page-hero__inner { padding-bottom: clamp(180px, 52vw, 300px); }
.pay-hero .board .lead { margin-bottom: 0.4em; }
.pay-hero .breadcrumbs ol { margin-bottom: 20px; }

@media (min-width: 1024px) {
    .pay-hero .page-hero__inner { padding-bottom: 0; }
    .pay-hero .hero-card { max-width: min(600px, 47%); }
}

/* Quick facts on a plank */
.pay-facts {
    padding-block: var(--section-space) clamp(32px, 5vw, 56px);
    background: linear-gradient(180deg, #fff9e8 0%, var(--cream) 100%);
}

.plank {
    position: relative;
    max-width: 1040px;
    margin-inline: auto;
    padding: 30px clamp(30px, 5vw, 64px);
}

.plank__beam {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    filter: drop-shadow(0 8px 10px rgba(60, 35, 10, 0.3));
}

.plank__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.fact-plaque {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #fffaea 0%, #f2dfae 100%);
    box-shadow: inset 0 0 0 2px #c9a35a, 0 3px 0 #7d4a1a;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--ink);
}

.fact-plaque .medallion { --med: 30px; }
.fact-plaque strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--green-text);
}

/* Methods table board */
.pay-methods {
    padding-block: clamp(32px, 5vw, 56px) var(--section-space);
    background: linear-gradient(180deg, var(--cream) 0%, #e7f6f1 100%);
}

.pay-methods .ribbon-heading { margin-bottom: clamp(20px, 3vw, 32px); }

.pay-board {
    max-width: 1040px;
    margin: clamp(24px, 3vw, 36px) auto 0;
    padding: clamp(40px, 5vw, 56px) clamp(14px, 3vw, 32px) clamp(18px, 3vw, 30px);
    border-radius: 4px;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 40px rgba(214, 160, 52, 0.35), var(--shadow-board);
}

.pay-vine {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    width: 100%;
    height: 44px;
    max-width: none;
    pointer-events: none;
}

.pay-board .table-wrapper { overflow: visible; }
.pay-board .data-table { box-shadow: none; }
.pay-board .data-table tbody tr > * { background: #fffaf0; }
.pay-board .data-table tbody tr:nth-child(even) > * { background: #f6ecd0; }

@media (max-width: 767.98px) {
    .pay-board .data-table--stack tbody tr > *,
    .pay-board .data-table--stack tbody tr:nth-child(even) > * { background: transparent; }
}

.pay-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--turquoise-500);
    background: var(--turquoise-100);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.pay-badge--sun { border-color: var(--amber-500); background: var(--amber-100); }
.pay-badge--coral { border-color: var(--coral-500); background: var(--coral-100); }

.pay-board .data-table--stack tbody th .pay-badge { color: var(--ink); }

.status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 2px dashed #cfae67;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--ink-soft);
}

/* Crypto */
.pay-crypto .section-head p { color: var(--cream-dim); }
.coin-tick {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(0.95rem, 0.8rem + 0.9vw, 1.5rem);
    letter-spacing: 0.02em;
    color: var(--cream);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.pay-crypto .ring__icon { width: 70%; }

.pay-crypto__note {
    max-width: 760px;
    margin: clamp(32px, 4vw, 48px) auto 0;
    text-align: center;
}

/* Limits */
.pay-limits {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, #fff9e8 0%, var(--cream) 100%);
}

.limit-grid {
    display: grid;
    gap: 36px;
    max-width: 780px;
    margin-inline: auto;
}

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

.limit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.limit-card {
    width: calc(100% - 24px);
    margin: 12px;
    padding: clamp(24px, 4vw, 36px) 20px;
    border-radius: 4px;
    text-align: center;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 30px rgba(214, 160, 52, 0.35), var(--shadow-soft);
}

.limit-card__num {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
    line-height: 1;
    color: var(--jungle-800);
}

.limit-card__label { margin: 8px 0 0; font-weight: 700; color: var(--ink-soft); }

.limit-tag {
    padding: 4px 18px;
    background: var(--leaf-700);
    color: var(--cream);
    font-family: var(--font-display);
    font-weight: 600;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
}

/* River scene: withdrawals + fees */
.river-scene {
    position: relative;
    isolation: isolate;
    padding-block: clamp(48px, 7vw, 96px);
    background: var(--river-800);
}

.river-scene__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("./assets/f5ed7f07ab681c04461bae76a93d8e44.webp");
    background-size: cover;
    background-position: 30% 50%;
    background-repeat: no-repeat;
}

.river-scene__section { padding-block: clamp(20px, 3vw, 40px); }

.wd-grid { display: grid; }

@media (min-width: 1024px) {
    .wd-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
    .wd-panel { grid-column: 2; }
}

.wd-panel {
    display: grid;
    gap: 16px;
    padding: clamp(24px, 4vw, 40px);
    border-radius: var(--radius-lg);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 0 3px rgba(169, 120, 50, 0.45), inset 0 0 36px rgba(214, 160, 52, 0.28), var(--shadow-board);
}

.wd-panel h2, .wd-panel p { margin: 0; }

.bridge { position: relative; padding-block: 6px; }
.bridge__rope { display: none; }

.bridge-steps {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bridge-steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.bridge-steps .medallion { --med: 44px; }
.bridge-steps h3 { margin: 0 0 0.2em; font-size: 1.2rem; }
.bridge-steps p { margin: 0; }

@media (min-width: 768px) {
    .bridge-steps li {
        margin-left: calc(var(--i) * 7%);
        padding: 10px 12px;
        border-radius: var(--radius-md);
        background: rgba(255, 250, 235, 0.85);
    }

    .bridge__rope {
        display: block;
        position: absolute;
        z-index: 0;
        left: 34px;
        top: 40px;
        width: 21%;
        height: calc(100% - 130px);
        max-width: none;
    }
}

.wd-panel .step__note {
    padding: 10px 12px;
    border-left: 4px solid var(--amber-500);
    border-radius: 6px;
    background: var(--amber-100);
    font-size: 0.9375rem;
}

/* Fees */
.fee-panel {
    max-width: 860px;
    margin: 12px auto;
    display: grid;
    gap: 16px;
    padding: clamp(26px, 4vw, 42px) clamp(20px, 4vw, 44px);
    border-radius: 4px;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 40px rgba(214, 160, 52, 0.35), var(--shadow-board);
}

.fee-panel p { margin: 0; }

.fee-panel__head { display: flex; align-items: center; gap: 14px; }
.fee-panel__head h2 { margin: 0; }
.fee-panel__lantern { flex-shrink: 0; display: block; width: 40px; }
.fee-panel__lantern .lantern { width: 40px; }

.fee-rows { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.fee-rows li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(255, 250, 235, 0.9);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.3);
}

.fee-rows strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--green-text); }

.fee-dot {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--coral-500);
    box-shadow: 0 0 0 4px var(--coral-100);
}

/* Currency */
.pay-currency {
    padding-block: var(--section-space);
    background: linear-gradient(180deg, var(--cream) 0%, #d8f3ef 100%);
}

.pay-currency h2 { margin-bottom: 0.5em; }

.cur-compare {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 0 2px rgba(169, 120, 50, 0.4), var(--shadow-soft);
}

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

.cur-compare__item { display: flex; align-items: center; gap: 12px; }

.cur-badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
}

.cur-badge--ok { background: var(--turquoise-500); color: #06302e; box-shadow: inset 0 0 0 2px #0d6f6b; }
.cur-badge--q { background: var(--sun-400); color: #4a3200; box-shadow: inset 0 0 0 2px var(--gold-700); }

/* FAQ + licence */
.pay-faq {
    padding-block: var(--section-space);
    background: var(--cream);
}

.pay-licence { position: relative; }
.pay-licence .container { position: relative; z-index: 1; }

.pay-licence__lantern {
    position: absolute;
    top: 0;
    z-index: 0;
    display: none;
}

.pay-licence__lantern--l { left: 2%; }
.pay-licence__lantern--r { right: 2%; }

@media (min-width: 1100px) {
    .pay-licence__lantern { display: block; }
}

.pay-licence .final-cta { margin-top: clamp(32px, 4vw, 48px); }

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

/* Hero */
.faq-hero .hero-card { max-width: 620px; }
.faq-hero .page-hero__inner { padding-bottom: clamp(240px, 70vw, 380px); }
.faq-hero .page-hero__bg { background-position: 84% 100%; }
.faq-hero .board .lead { margin-bottom: 0.7em; }
.faq-hero .breadcrumbs ol { margin-bottom: 18px; }

@media (min-width: 1024px) {
    .faq-hero .page-hero__inner { padding-bottom: 0; }
    .faq-hero .page-hero__bg { background-position: 70% 50%; }
    .faq-hero .hero-card { max-width: min(560px, 46%); }
}

/* Topic ring strip */
.faq-topics .section-head { margin-bottom: clamp(20px, 3vw, 32px); }

.topic-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 14px;
}

.topic-grid {
    display: flex;
    gap: 20px;
    width: max-content;
    margin: 0;
    padding: 6px 4px 8px;
    list-style: none;
}

.topic-grid > li {
    flex: 0 0 148px;
    scroll-snap-align: start;
}

.topic-grid .ring__disc { width: 118px; }

.topic-grid .ring__link:focus-visible { outline-offset: 6px; }

.topic-grid .ring__title {
    margin: 12px 0 0;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    color: var(--green-text);
    font-size: 1rem;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

@media (min-width: 1024px) {
    .topic-scroll { overflow: visible; padding-bottom: 0; }

    .topic-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 36px 20px;
        width: auto;
    }

    .topic-grid > li { flex: none; }
    .topic-grid .ring__disc { width: clamp(120px, 12vw, 150px); }
}

/* FAQ sections */
.faq-section {
    position: relative;
    padding-block: var(--section-space);
}

.faq-section > .container { position: relative; z-index: 1; }

.faq-section--cream { background: linear-gradient(180deg, #fff9e8 0%, var(--cream) 100%); }
.faq-section--mint { background: linear-gradient(180deg, var(--cream) 0%, #e7f6f1 100%); }
.faq-section--sand { background: linear-gradient(180deg, #e7f6f1 0%, #f6ecd0 100%); }
.faq-section--phone { background: linear-gradient(180deg, var(--cream) 0%, #d8f3ef 100%); }

.faq-leaf {
    position: absolute;
    z-index: 0;
    width: clamp(80px, 14vw, 170px);
    height: auto;
    pointer-events: none;
}

.faq-leaf--tl { top: 0; left: 0; }
.faq-leaf--br { right: 0; bottom: 0; transform: rotate(180deg); }

.faq-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 880px;
    margin: 0 auto clamp(22px, 3vw, 34px);
    text-align: center;
}

.faq-head h2 { margin: 0; }

.faq-ring {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #f5ffa6 0%, #bfe65e 28%, #4f9e2e 56%, #1b4a25 74%, #12331f 100%);
    box-shadow: 0 0 26px rgba(186, 236, 92, 0.6);
}

.faq-ring__bamboo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.faq-ring__icon {
    position: relative;
    width: 56%;
    height: auto;
}

/* Pavilion scene */
.faq-pavilion {
    position: relative;
    isolation: isolate;
    padding-block: clamp(24px, 4vw, 56px);
    background: var(--river-800);
}

.faq-pavilion__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("./assets/a18abecff58f89278289bc9952f4b1f5.webp");
    background-size: cover;
    background-position: 78% 50%;
    background-repeat: no-repeat;
}

.faq-pavilion__section { padding-block: clamp(18px, 3vw, 34px); }

.faq-panel {
    margin: 14px 12px;
    padding: clamp(28px, 4vw, 42px) clamp(16px, 3vw, 36px) clamp(24px, 3.5vw, 36px);
    border-radius: 4px;
    background-color: var(--parchment-100);
    background-image: var(--paper-noise), var(--parchment-fill);
    box-shadow: inset 0 0 40px rgba(214, 160, 52, 0.35), var(--shadow-board);
}

.faq-panel > h2 { margin-bottom: 0.8em; }
.faq-panel .faq-list { max-width: none; }

@media (min-width: 1024px) {
    .faq-panel { max-width: min(680px, 56%); }
}

.faq-panel--rg { margin-top: 44px; }

.rg-tag {
    position: absolute;
    top: -32px;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    transform: translateX(-50%);
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #fffaea 0%, #f2dfae 100%);
    box-shadow: inset 0 0 0 2px #c9a35a, 0 4px 0 #9a7531, 0 8px 14px rgba(8, 30, 10, 0.25);
    white-space: nowrap;
}

.rg-tag__knot {
    position: absolute;
    top: -16px;
    left: 50%;
    width: 40px;
    height: 20px;
    margin-left: -20px;
}

.rg-tag__text {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--green-text);
}

.rg-tag .age-badge { border-color: var(--jungle-800); }

@media (max-width: 400px) {
    .rg-tag { padding-inline: 12px; gap: 6px; }
    .rg-tag .rg-heart { width: 24px; height: 24px; }
}

/* Final licence note */
.faq-final .scroll__paper h2 { color: var(--green-text); }
.faq-final .scroll__paper p { color: var(--ink); }
.faq-final .scroll__paper a:not([class]) { color: var(--green-text); }
.faq-final .scroll__paper .rg-row__title { color: var(--green-text); }
.faq-final .final-cta { margin-top: clamp(32px, 4vw, 48px); }

.faq-final > .lantern {
    position: absolute;
    top: calc(var(--rail) + 8px);
    z-index: 1;
    display: none;
}

.faq-final > .lantern--left { left: max(130px, 7%); }
.faq-final > .lantern--right { right: max(130px, 7%); }

@media (min-width: 1100px) {
    .faq-final > .lantern { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .hut:hover,
    .btn:hover,
    .jump-pill:hover { transform: none; }
}