/*
 * Roulettino Casino - Lucky 777 Mafia design system
 * Canonical design tokens live in this file.
 */

:root {
    --bg: #1f2029;
    --bg-deep: #17181e;
    --bg-band: #1a1b22;
    --surface: #2b2d38;
    --surface-2: #323443;
    --line: rgba(214, 166, 78, 0.28);
    --line-strong: rgba(214, 166, 78, 0.55);
    --gold: #e3b04f;
    --gold-light: #f4cf7a;
    --gold-deep: #a8782c;
    --brass: #b88a45;
    --yellow: #f6d83a;
    --yellow-hover: #ffe45c;
    --text: #eeebe3;
    --muted: #bdb9ae;
    --ink: #2a1a05;
    --red: #d9263a;
    --radius: 16px;
    --radius-sm: 10px;
    --container: 1160px;
    --gutter: clamp(16px, 4vw, 32px);
    --section-y: clamp(56px, 8vw, 104px);
    --font-head: "Rubik", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --glow-yellow: 0 0 26px rgba(246, 216, 58, 0.45), 0 6px 18px rgba(0, 0, 0, 0.35);
    --header-bottom: 64px;
}

/* ============================================
   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;
}

[hidden] {
    display: none !important;
}

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

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 0.6em;
    color: var(--text);
}

h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 500; }

/* Signature gold gradient headings */
.site-main h1,
.site-main h2 {
    color: var(--gold-light);
    background: linear-gradient(180deg, #ffe9a8 0%, #f0c364 45%, #c98f2e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(240, 180, 60, 0.32));
}

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

a {
    color: var(--gold-light);
}

a:hover {
    color: var(--yellow-hover);
}

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

strong { color: #fff; font-weight: 600; }

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

[id] {
    scroll-margin-top: calc(var(--header-bottom) + 72px);
}

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

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--yellow);
    color: #1a1a1a;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
}

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

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

/* ============================================
   BUTTONS, PILLS, TERMS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
    background: var(--yellow);
    color: #1a1608;
    box-shadow: var(--glow-yellow);
}

.btn--primary:hover {
    background: var(--yellow-hover);
    color: #1a1608;
    transform: translateY(-2px);
    box-shadow: 0 0 38px rgba(246, 216, 58, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
}

.btn--outline {
    background: transparent;
    color: var(--gold-light);
    border-color: var(--gold);
}

.btn--outline:hover {
    background: rgba(227, 176, 79, 0.12);
    color: #fff1c8;
    transform: translateY(-2px);
}

.btn--dark {
    background: linear-gradient(180deg, #6e4c16, #4a3109);
    color: #fbe7b0;
    border-color: #3a2606;
    box-shadow: 0 0 22px rgba(227, 176, 79, 0.35), 0 6px 14px rgba(42, 26, 5, 0.35);
}

.btn--dark:hover {
    color: #fff3d0;
    transform: translateY(-2px);
}

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

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--gold);
    color: #1d1405;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: nowrap;
}

.pill--outline {
    background: transparent;
    color: var(--gold-light);
    border: 1.5px solid var(--gold);
}

.pill--warn {
    background: transparent;
    color: #ffc26a;
    border: 1.5px solid #e09a3a;
}

.pill--warn svg {
    width: 16px;
    height: 16px;
}

.pill--lg {
    min-height: 48px;
    padding: 0 20px;
    font-size: 1rem;
}

.micro-terms {
    margin: 12px 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.cta-group {
    margin-top: 24px;
}

.cta-group__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

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

.cta-group--center .cta-group__buttons {
    justify-content: center;
}

.cta-group--right {
    text-align: right;
}

.cta-group--right .cta-group__buttons {
    justify-content: flex-end;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #22232b;
    border-bottom: 1px solid rgba(214, 166, 78, 0.22);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.site-brand__mark {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 6px rgba(227, 176, 79, 0.35));
}

.site-brand__text {
    display: flex;
    flex-direction: column;
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1;
}

.site-brand__name {
    color: #fff;
    font-size: 1.2rem;
}

.site-brand__sub {
    color: var(--gold);
    font-size: 1.05rem;
    margin-top: 2px;
}

.site-nav {
    display: none;
}

.site-nav.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-bottom);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 49;
    background: #1b1c23;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px var(--gutter) 32px;
    border-top: 1px solid var(--line);
}

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

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 4px;
    color: var(--text);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 1.15rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(214, 166, 78, 0.15);
}

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

.site-nav__actions {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.site-nav__note {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--muted);
    text-align: center;
}

.header-actions {
    display: none;
}

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--line-strong);
    border-radius: 10px;
    cursor: pointer;
}

.menu-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--gold-light);
    border-radius: 2px;
    transition: transform 0.2s ease;
}

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

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
    visibility: hidden;
}

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

@media (min-width: 1024px) {
    .header-inner {
        min-height: 72px;
    }

    .site-nav,
    .site-nav.is-open {
        display: block;
        position: static;
        padding: 0;
        background: none;
        border: 0;
        overflow: visible;
    }

    .site-nav__list {
        display: flex;
        gap: 34px;
    }

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

    .site-nav__link.is-active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 4px;
        height: 2px;
        background: var(--gold);
        border-radius: 2px;
        box-shadow: 0 0 8px rgba(227, 176, 79, 0.6);
    }

    .site-nav__actions {
        display: none;
    }

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

    .header-actions .header-cta,
    .header-actions .header-login {
        display: inline-flex;
    }

    .menu-toggle {
        display: none;
    }
}

/* ============================================
   MAIN & SITE-WIDE GEAR ORNAMENTS
   ============================================ */

.site-main {
    position: relative;
    overflow-x: clip;
    isolation: isolate;
}

.site-main > :not(.page-gears) {
    position: relative;
    z-index: 1;
}

.page-gears {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.page-gears__item {
    position: absolute;
    width: var(--gear-size, 260px);
    height: var(--gear-size, 260px);
    opacity: 0.3;
}

.page-gears__item:nth-child(odd) { right: calc(var(--gear-size, 260px) * -0.55); }
.page-gears__item:nth-child(even) { left: calc(var(--gear-size, 260px) * -0.55); }
.page-gears__item--1 { top: 8%; }
.page-gears__item--2 { top: 22%; --gear-size: 220px; }
.page-gears__item--3 { top: 38%; }
.page-gears__item--4 { top: 54%; }
.page-gears__item--5 { top: 70%; --gear-size: 230px; }
.page-gears__item--6 { top: 86%; }

@media (min-width: 1024px) {
    .page-gears__item {
        --gear-size: clamp(340px, 34vw, 560px);
        opacity: 0.55;
    }

    .page-gears__item--2,
    .page-gears__item--5 {
        --gear-size: clamp(280px, 26vw, 440px);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .page-gears__item.is-visible {
        animation: gear-spin 140s linear infinite;
    }

    .page-gears__item.is-visible:nth-child(even) {
        animation-direction: reverse;
    }

    .doc-hidden .page-gears__item {
        animation-play-state: paused;
    }
}

@keyframes gear-spin {
    to { transform: rotate(360deg); }
}

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

.section {
    padding-block: var(--section-y);
}

.section--tight {
    padding-block: calc(var(--section-y) * 0.6);
}

.section--band {
    background: var(--bg-band);
    border-block: 1px solid rgba(214, 166, 78, 0.16);
}

.section-head {
    max-width: 760px;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head__intro {
    color: var(--muted);
    font-size: 1.0625rem;
}

.prose {
    max-width: 760px;
}

.prose--center {
    margin-inline: auto;
}

.prose ul,
.prose ol {
    margin: 0 0 1em;
}

.prose li {
    margin-bottom: 0.4em;
}

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

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

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

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--muted);
}

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

.breadcrumbs a {
    color: var(--gold-light);
}

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

.hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(40px, 7vw, 96px);
}

.hero h1 {
    margin-bottom: 0.4em;
}

.hero__copy {
    position: relative;
    max-width: 620px;
}

.hero__copy::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: -36px;
    height: 40px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.hero__lead {
    font-size: 1.0625rem;
    color: var(--text);
}

.hero .btn--primary {
    box-shadow: 0 0 34px rgba(246, 216, 58, 0.55), 0 0 80px rgba(246, 190, 58, 0.25);
}

/* Full-bleed background hero (mobile: image band on top) */
.hero--bg {
    background: var(--bg-deep);
    padding-top: calc(min(62vw, 460px) - 40px);
    padding-bottom: 56px;
}

.hero__bg {
    position: absolute;
    inset: 0 0 auto 0;
    height: min(62vw, 460px);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: var(--hero-pos, 35% 50%);
    z-index: -1;
}

.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 24, 30, 0) 35%, rgba(23, 24, 30, 0.78) 78%, var(--bg-deep) 100%);
}

@media (min-width: 768px) {
    .hero--bg {
        display: flex;
        align-items: center;
        min-height: clamp(480px, 48vw, 640px);
        padding-block: clamp(72px, 9vw, 120px);
    }

    .hero__bg {
        inset: 0;
        height: auto;
    }

    .hero--right .hero__bg::after {
        background:
            linear-gradient(90deg, rgba(20, 22, 32, 0) 30%, rgba(20, 22, 32, 0.72) 58%, rgba(20, 22, 32, 0.92) 100%),
            linear-gradient(180deg, rgba(23, 24, 30, 0) 78%, var(--bg) 100%);
    }

    .hero--left .hero__bg::after {
        background:
            linear-gradient(270deg, rgba(20, 22, 32, 0) 30%, rgba(20, 22, 32, 0.72) 58%, rgba(20, 22, 32, 0.92) 100%),
            linear-gradient(180deg, rgba(23, 24, 30, 0) 78%, var(--bg) 100%);
    }

    .hero--bg .hero__copy {
        max-width: min(560px, 52%);
    }

    .hero--right .hero__copy {
        margin-left: auto;
        text-align: right;
    }

    .hero--right .cta-group__buttons {
        justify-content: flex-end;
    }

    .hero--right .breadcrumbs ol {
        justify-content: flex-end;
    }
}

/* Compact hero with transparent artwork */
.hero--art .hero__inner {
    display: grid;
    gap: 28px;
    align-items: center;
}

.hero__art {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero__art::before {
    content: "";
    position: absolute;
    inset: 8% 6%;
    background: radial-gradient(circle at 50% 55%, rgba(240, 180, 60, 0.32), rgba(240, 180, 60, 0) 65%);
    z-index: -1;
}

.hero__art img {
    width: min(100%, 560px);
    height: auto;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .hero--art .hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 48px;
    }
}

/* ============================================
   STEP PATH
   ============================================ */

.step-path {
    position: relative;
    display: grid;
    gap: 64px;
    margin: 0;
    padding: 0;
    list-style: none;
    --arrow-top: 50%;
}

.step-path::before {
    content: "";
    position: absolute;
    inset: -10% -5%;
    background: radial-gradient(ellipse at center, rgba(227, 176, 79, 0.14), transparent 65%);
    z-index: -1;
    pointer-events: none;
}

.step-path--media {
    --arrow-top: 100px;
}

.step {
    position: relative;
    text-align: center;
}

.step__media {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.step__media::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: -6px;
    height: 34px;
    background: radial-gradient(ellipse at center, rgba(240, 170, 60, 0.4), transparent 70%);
    z-index: -1;
}

.step__media img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.step__num {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 4rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--gold);
    text-shadow: 0 0 18px rgba(227, 176, 79, 0.25);
}

.step__title {
    color: var(--gold-light);
    font-size: 1.3rem;
    margin-bottom: 8px;
}

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

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

.step__arrow {
    position: absolute;
    left: 50%;
    bottom: -56px;
    width: 22px;
    height: 44px;
    color: var(--gold);
    transform: translateX(-50%) rotate(90deg);
    filter: drop-shadow(0 0 6px rgba(227, 176, 79, 0.5));
}

.step-path--cards .step {
    padding: 28px 24px;
    background: var(--surface);
    border-radius: 14px;
    border-top: 2px solid var(--gold);
    text-align: left;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
    .step-path {
        grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr));
        gap: 56px;
    }

    .step__arrow {
        left: auto;
        right: -42px;
        top: var(--arrow-top);
        bottom: auto;
        transform: translateY(-50%);
    }
}

/* ============================================
   VAULT TILES (game grid)
   ============================================ */

.vault-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

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

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

.vault-tile {
    display: block;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.25s ease;
}

.vault-tile__frame {
    position: relative;
    display: grid;
    grid-template-columns: 32% minmax(0, 1fr);
    gap: 4px;
    aspect-ratio: 16 / 10;
    padding: 6px;
    border-radius: 10px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
        linear-gradient(160deg, #5c6675 0%, #3a414d 55%, #2a2f38 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -3px 6px rgba(0, 0, 0, 0.45), 0 10px 22px rgba(0, 0, 0, 0.5);
}

.vault-tile__door {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px 2px 2px 6px;
    background:
        radial-gradient(circle at 12% 10%, #b5bdc9 0 2px, transparent 3px),
        radial-gradient(circle at 12% 90%, #b5bdc9 0 2px, transparent 3px),
        radial-gradient(circle at 88% 10%, #b5bdc9 0 2px, transparent 3px),
        radial-gradient(circle at 88% 90%, #b5bdc9 0 2px, transparent 3px),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
        linear-gradient(135deg, #6c7787 0%, #47505e 50%, #323843 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), inset -4px 0 8px rgba(0, 0, 0, 0.45);
    transform: perspective(420px) rotateY(16deg);
    transform-origin: left center;
}

.vault-tile__door::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(270deg, rgba(255, 190, 90, 0.45), rgba(255, 190, 90, 0) 60%);
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.vault-tile__wheel {
    width: 56%;
    height: auto;
    color: #cfd6e0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.vault-tile__screen {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 2px solid #d6a64e;
    box-shadow: 0 0 14px rgba(255, 190, 80, 0.35), inset 0 0 12px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.25s ease;
}

.vault-tile__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vault-tile__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 2px 0;
}

.vault-tile__caption {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

.vault-tile__play {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--gold);
    color: var(--gold-light);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.875rem;
}

.vault-tile:hover {
    transform: translateY(-4px);
}

.vault-tile:hover .vault-tile__screen {
    box-shadow: 0 0 26px rgba(255, 196, 90, 0.65), inset 0 0 8px rgba(0, 0, 0, 0.4);
}

.vault-tile:hover .vault-tile__play {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #1a1608;
}

.live-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.live-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .live-badge__dot { animation: live-pulse 1.6s ease-in-out infinite; }
}

@keyframes live-pulse {
    50% { transform: scale(0.55); }
}

/* ============================================
   CHIPS (filters & topic nav)
   ============================================ */

.chips {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 2px 10px;
    scrollbar-width: thin;
}

.chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1.5px solid var(--gold);
    background: transparent;
    color: var(--gold-light);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 0.975rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.chip:hover {
    background: rgba(227, 176, 79, 0.14);
    color: #fff1c8;
}

.chip.is-active,
.chip[aria-pressed="true"] {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #1a1608;
    box-shadow: 0 0 16px rgba(246, 216, 58, 0.4);
}

@media (min-width: 1024px) {
    .chips {
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
    }
}

.topic-nav {
    position: sticky;
    top: var(--header-bottom);
    z-index: 20;
    background: rgba(23, 24, 30, 0.97);
    border-bottom: 1px solid rgba(214, 166, 78, 0.18);
    padding-block: 8px;
}

/* ============================================
   SPLIT FEATURE
   ============================================ */

.split {
    display: grid;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.split__media {
    position: relative;
    aspect-ratio: 3 / 2;
}

.split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.split__body {
    position: relative;
    padding: clamp(24px, 4vw, 48px);
}

.split--dark .split__body {
    border-top: 1px solid var(--line-strong);
}

.split--framed .split__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid #c99a45;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 0 22px rgba(233, 185, 73, 0.45), inset 0 0 0 6px rgba(0, 0, 0, 0.35), inset 0 0 0 7px rgba(214, 166, 78, 0.5);
    pointer-events: none;
}

.split__body h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
}

/* Gold champagne panel */
.split--gold .split__body {
    color: var(--ink);
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0.03) 2px 4px),
        linear-gradient(115deg, #f4e0a2 0%, #e2b960 45%, #b8862f 100%);
}

.split--gold .split__body::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(110, 72, 18, 0.45);
    border-radius: 10px;
    pointer-events: none;
}

.split--gold .split__body::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 250, 225, 0.35), transparent);
    pointer-events: none;
}

.split--gold .split__body > * {
    position: relative;
    z-index: 1;
}

.split--gold h2,
.split--gold h3 {
    color: var(--ink);
    background: none;
    -webkit-text-fill-color: var(--ink);
    filter: none;
}

.split--gold strong {
    color: #1e1203;
}

.split--gold a:not([class]) {
    color: #3b2506;
}

.split--gold .micro-terms {
    color: #3a2709;
}

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

    .split__media {
        aspect-ratio: auto;
        min-height: 320px;
    }

    .split--reverse .split__media {
        order: 2;
    }

    .split--dark .split__body {
        border-top: 1px solid var(--line-strong);
    }

    .split--framed .split__media::after {
        border-radius: var(--radius) 0 0 var(--radius);
    }

    .split--reverse.split--framed .split__media::after {
        border-radius: 0 var(--radius) var(--radius) 0;
    }

    .split__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* ============================================
   GEAR BADGES
   ============================================ */

.badge-row {
    position: relative;
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
}

.badge-row::before {
    content: "";
    position: absolute;
    inset: -15% 0;
    background: radial-gradient(ellipse at center, rgba(227, 176, 79, 0.18), transparent 62%);
    z-index: -1;
    pointer-events: none;
}

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

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

.gear-badge__emblem {
    width: clamp(150px, 18vw, 190px);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(227, 176, 79, 0.25));
}

.gear-badge__emblem svg {
    display: block;
    width: 100%;
    height: auto;
}

.gear-badge__icon {
    color: #fff;
}

.gear-badge__ribbon {
    position: relative;
    margin: -34px 0 0;
    padding: 6px 22px;
    min-width: 70%;
    border: 2px solid #d6a64e;
    border-radius: 6px;
    background: linear-gradient(180deg, #2c3247, #1b2030);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

.gear-badge__text {
    margin-top: 16px;
    max-width: 300px;
    color: var(--muted);
}

.gear-badge--sm .gear-badge__emblem {
    width: 96px;
}

.gear-badge--sm .gear-badge__ribbon {
    margin-top: -20px;
    padding: 3px 12px;
    font-size: 0.875rem;
    min-width: 0;
}

/* ============================================
   ICON CARDS, CHECKLIST, CALLOUT, LINK CARDS
   ============================================ */

.icon-card {
    height: 100%;
    padding: 24px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid rgba(214, 166, 78, 0.2);
}

.icon-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    color: var(--gold);
}

.icon-card__title {
    color: var(--gold-light);
    margin-bottom: 6px;
}

.icon-card__text {
    color: var(--muted);
}

.icon-card--fact {
    padding: 18px;
    border: 0;
    border-top: 2px solid var(--brass);
}

.icon-card--fact .icon-card__icon {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
}

.checklist {
    list-style: none;
    margin: 0;
    padding: 8px 24px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid rgba(214, 166, 78, 0.2);
}

.checklist li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
    margin: 0;
}

.checklist li + li {
    border-top: 1px solid rgba(214, 166, 78, 0.2);
}

.checklist__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 4px;
    border-radius: 50%;
    color: #1a1608;
    background: var(--gold);
}

.callout {
    position: relative;
    padding: clamp(20px, 3vw, 32px);
    border-radius: 14px;
    border: 1px solid var(--brass);
    background:
        radial-gradient(ellipse at 30% 0%, rgba(240, 170, 60, 0.22), transparent 60%),
        var(--surface);
}

.callout__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gold-light);
    margin-bottom: 8px;
}

.callout__figure {
    display: block;
    margin: 6px 0 12px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    line-height: 1.1;
    color: var(--gold-light);
    text-shadow: 0 0 18px rgba(240, 180, 60, 0.4);
}

.link-card {
    position: relative;
    display: block;
    height: 100%;
    padding: 22px 52px 22px 22px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid rgba(214, 166, 78, 0.22);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.link-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    color: var(--text);
}

.link-card__title {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gold-light);
}

.link-card__text {
    display: block;
    color: var(--muted);
}

.link-card__arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    width: 22px;
    height: 22px;
    color: var(--gold);
    transform: translateY(-50%);
}

/* ============================================
   TABLES
   ============================================ */

.table-card {
    border-radius: 14px;
    border: 1px solid var(--brass);
    border-left: 3px solid var(--gold);
    background: var(--surface);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table caption {
    padding: 14px 18px 0;
    text-align: left;
    font-size: 0.875rem;
    color: var(--muted);
}

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

.data-table thead th {
    color: var(--gold-light);
    font-family: var(--font-head);
    font-weight: 700;
    border-bottom: 1px solid var(--line-strong);
}

.data-table tbody th {
    font-weight: 600;
    color: #fff;
}

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

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

    .data-table tr {
        display: block;
        padding: 10px 0;
        border-top: 1px solid rgba(214, 166, 78, 0.18);
    }

    .data-table th,
    .data-table td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 6px 16px;
    }

    .data-table tbody th::before,
    .data-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 50%;
        color: var(--gold-light);
        font-weight: 600;
        font-size: 0.875rem;
    }
}

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

.faq-list {
    display: grid;
    gap: 10px;
    align-items: start;
    max-width: 860px;
}

.faq-item {
    border-radius: 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--brass);
}

.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 14px 18px;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 1.075rem;
    color: #fff;
    list-style: none;
    cursor: pointer;
}

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

.faq-item__chevron {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--gold);
    transition: transform 0.2s ease;
}

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

.faq-item[open] .faq-item__q {
    color: var(--gold-light);
}

.faq-item__a {
    padding: 0 18px 18px;
    color: var(--muted);
}

.faq-item__a a {
    color: var(--gold-light);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ============================================
   TRUST BAR
   ============================================ */

.trust-bar {
    position: relative;
    padding-block: 36px;
    background: var(--bg-band);
}

.trust-bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.trust-bar__title {
    text-align: center;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    margin-bottom: 24px;
}

.trust-bar__list {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
}

.trust-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: #c9a45a;
}

.trust-item__label {
    margin: 0 0 2px;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 1.05rem;
    color: #d8d4ca;
}

.trust-item__label a {
    color: #d8d4ca;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 0.2em;
}

.trust-item__text {
    color: var(--muted);
    font-size: 0.9375rem;
}

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

    .trust-item {
        padding: 4px 24px;
    }

    .trust-item + .trust-item {
        border-left: 1px solid rgba(214, 166, 78, 0.3);
    }
}

/* ============================================
   CTA BANNER
   ============================================ */

.cta-banner {
    padding-block: var(--section-y);
}

.cta-banner__box {
    position: relative;
    overflow: hidden;
    padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 64px);
    border-radius: 20px;
    border: 1px solid var(--line-strong);
    background:
        radial-gradient(ellipse at 50% 120%, rgba(240, 170, 60, 0.3), transparent 60%),
        linear-gradient(180deg, #2a2420, #1c1b20);
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.cta-banner__777 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(8rem, 28vw, 18rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #4d3c22;
    letter-spacing: 0.04em;
    pointer-events: none;
    user-select: none;
}

.cta-banner__box > :not(.cta-banner__777) {
    position: relative;
}

.cta-banner__text {
    max-width: 640px;
    margin-inline: auto;
    font-size: 1.0625rem;
}

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

.site-footer {
    background: #15161c;
    border-top: 1px solid rgba(214, 166, 78, 0.2);
    padding: 56px 0 28px;
    color: var(--muted);
    font-size: 0.9375rem;
}

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

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

    .footer-brand {
        grid-column: 1 / -1;
    }
}

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

    .footer-brand {
        grid-column: auto;
    }
}

.footer-brand__text {
    margin-top: 14px;
    max-width: 380px;
}

.footer-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.footer-methods li {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(214, 166, 78, 0.3);
    color: #d8d4ca;
    font-size: 0.875rem;
}

.footer-col__title {
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: #fff;
}

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

.footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: #d8d4ca;
    text-decoration: none;
}

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

.footer-legal {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(214, 166, 78, 0.18);
}

.footer-legal__badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    color: var(--gold-light);
    font-family: var(--font-head);
    font-weight: 700;
}

.footer-legal__text p {
    margin-bottom: 10px;
}

.footer-legal__text a {
    color: var(--gold-light);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(214, 166, 78, 0.18);
    font-size: 0.875rem;
}

.footer-bottom__cookies {
    min-height: 44px;
    padding: 0 14px;
    background: none;
    border: 1px solid rgba(214, 166, 78, 0.4);
    border-radius: 999px;
    color: var(--gold-light);
    font: inherit;
    cursor: pointer;
}

/* ============================================
   COOKIE BANNER (RODO)
   ============================================ */

.cookie-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    display: grid;
    gap: 16px;
    max-width: 760px;
    margin-inline: auto;
    padding: 20px;
    border-radius: 14px;
    background: #262833;
    border: 1px solid var(--gold);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    font-size: 0.9375rem;
    color: #dcd8ce;
}

.cookie-banner__title {
    margin-bottom: 4px;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--gold-light);
}

.cookie-banner a {
    color: var(--gold-light);
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cookie-banner__actions .btn {
    flex: 1 1 160px;
}

@media (min-width: 768px) {
    .cookie-banner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .cookie-banner__actions {
        flex-direction: column;
    }
}

/* ============================================
   HOME PAGE
   ============================================ */

.hero__note {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    color: #d8d4ca;
}

.section-more,
.badge-row__foot {
    margin-top: clamp(28px, 4vw, 44px);
    text-align: center;
}

.section-more .micro-terms,
.badge-row__foot .micro-terms {
    max-width: 680px;
    margin-inline: auto;
}

.split__note {
    font-size: 0.9375rem;
}

.split--gold .btn--outline {
    color: #2a1a05;
    border-color: #6e4c16;
}

.split--gold .btn--outline:hover {
    background: rgba(110, 72, 18, 0.14);
    color: #1e1203;
}

/* ============================================
   BONUSY PAGE
   ============================================ */

.hero--art .hero__art {
    isolation: isolate;
}

.stage-path {
    --arrow-top: 50%;
    display: grid;
    gap: 64px;
    margin: 0 0 clamp(36px, 5vw, 56px);
    padding: 0;
    list-style: none;
}

.stage-card {
    position: relative;
    padding: 28px 24px 24px;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.stage-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.stage-card__num {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 4rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--gold);
    text-shadow: 0 0 18px rgba(227, 176, 79, 0.25);
}

.stage-card__title {
    color: var(--gold-light);
    font-weight: 700;
}

.stage-card p {
    color: var(--muted);
}

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

.terms-strip {
    display: grid;
    gap: 12px;
    margin: 28px 0 8px;
    padding: 0;
    list-style: none;
}

.terms-strip li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-band);
    border: 1px solid var(--line);
}

.terms-strip__label {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.terms-strip__value {
    color: var(--text);
    font-weight: 600;
}

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

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

.split-cols {
    display: grid;
    gap: 24px;
    align-items: start;
}

@media (min-width: 1024px) {
    .split-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 32px; }
}

.wager-notes {
    margin-top: 32px;
}

.table-card .pill {
    min-width: 64px;
    justify-content: center;
}

.reward-grid {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 20px;
}

.reward-grid::before {
    content: "";
    position: absolute;
    inset: -20% 0;
    background: radial-gradient(ellipse at center, rgba(227, 176, 79, 0.16), transparent 62%);
    z-index: -1;
    pointer-events: none;
}

.reward-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid rgba(214, 166, 78, 0.25);
}

.reward-card__emblem {
    flex-shrink: 0;
    width: 76px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

.reward-card__emblem svg {
    display: block;
    width: 100%;
    height: auto;
}

.reward-card__title {
    color: var(--gold-light);
    font-weight: 700;
}

.reward-card p {
    color: var(--muted);
}

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

.loyalty-cross {
    margin-top: 28px;
    text-align: center;
    color: var(--muted);
}

.feature-art {
    display: grid;
    gap: 24px;
    align-items: center;
}

.feature-art__copy {
    padding-left: 20px;
    border-left: 3px solid var(--gold);
}

.feature-art__img {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
}

.feature-art__img::before {
    content: "";
    position: absolute;
    inset: 4%;
    background: radial-gradient(circle at 50% 60%, rgba(240, 180, 60, 0.38), rgba(240, 180, 60, 0) 66%);
    z-index: -1;
}

.feature-art__img img {
    width: min(100%, 440px);
    height: auto;
    object-fit: contain;
}

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

.vip-strip {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    padding: 28px clamp(16px, 3vw, 32px);
    background: var(--bg-band);
}

.vip-strip::before,
.vip-strip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.vip-strip::before { top: 0; }
.vip-strip::after { bottom: 0; }

.vip-strip__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: var(--gold);
}

.vip-strip__body {
    flex: 1 1 320px;
}

.vip-strip__body h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.faq-wrap {
    max-width: 860px;
    margin-inline: auto;
}

/* ============================================
   GRY PAGE
   ============================================ */

.catalogue-filters {
    margin-bottom: clamp(20px, 3vw, 32px);
}

.section--rule {
    position: relative;
}

.section--rule::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.live-cards {
    margin-top: clamp(24px, 4vw, 40px);
}

.hero--art .breadcrumbs ol {
    margin-bottom: 12px;
}

/* ============================================
   O NAS PAGE
   ============================================ */

.legal-card {
    max-width: 860px;
    margin-inline: auto;
    padding: clamp(22px, 4vw, 40px);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(240, 170, 60, 0.14), transparent 55%),
        var(--surface);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.legal-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.legal-card__head h2 {
    margin-bottom: 0;
    font-size: clamp(1.45rem, 3vw, 2.1rem);
}

.legal-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: var(--gold);
    filter: drop-shadow(0 0 8px rgba(227, 176, 79, 0.45));
}

.legal-card h3 {
    margin-top: 18px;
    color: var(--gold-light);
}

.legal-card ul {
    margin: 0 0 1em;
    color: var(--muted);
}

.legal-check,
.legal-callout,
.fair-note {
    margin-top: clamp(24px, 4vw, 36px);
}

.fair-note {
    color: var(--muted);
}

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

.hero .breadcrumbs ol {
    margin-bottom: 12px;
}

.vip-figures {
    display: grid;
    gap: 20px;
}

.vip-ladder {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vip-ladder::before {
    content: "";
    position: absolute;
    inset: -10% -5%;
    background: radial-gradient(ellipse at 85% 30%, rgba(246, 216, 58, 0.16), transparent 55%);
    z-index: -1;
    pointer-events: none;
}

.vip-step {
    display: flex;
    flex-direction: column;
    padding: 22px 20px 24px;
    border-radius: 14px;
    border-top: 3px solid var(--gold);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.vip-step--4 {
    border-top-color: var(--yellow);
    box-shadow: 0 0 28px rgba(246, 216, 58, 0.22), 0 10px 24px rgba(0, 0, 0, 0.35);
}

.vip-step__crown {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    color: var(--gold-light);
    filter: drop-shadow(0 0 8px rgba(227, 176, 79, 0.45));
}

.vip-step__tag {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.vip-step__tier {
    margin: 4px 0 6px;
    font-weight: 700;
    color: var(--gold-light);
}

.vip-step__from {
    margin-bottom: 12px;
    font-weight: 600;
    color: #fff;
}

.vip-step__perks {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.vip-step__perks li + li {
    margin-top: 4px;
}

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

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

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

    .vip-step--1 { min-height: 300px; }
    .vip-step--2 { min-height: 345px; }
    .vip-step--3 { min-height: 390px; }
    .vip-step--4 { min-height: 435px; }
}

.gold-panel {
    position: relative;
    display: grid;
    gap: 20px;
    align-items: center;
    padding: clamp(24px, 4vw, 44px);
    border-radius: var(--radius);
    color: var(--ink);
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0.03) 2px 4px),
        linear-gradient(115deg, #f4e0a2 0%, #e2b960 45%, #b8862f 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.gold-panel::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(110, 72, 18, 0.45);
    border-radius: 10px;
    pointer-events: none;
}

.gold-panel::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 250, 225, 0.35), transparent);
    pointer-events: none;
}

.gold-panel > * {
    position: relative;
    z-index: 1;
}

.gold-panel__medal {
    width: clamp(110px, 18vw, 160px);
    filter: drop-shadow(0 8px 12px rgba(60, 38, 6, 0.45));
}

.gold-panel__medal svg {
    display: block;
    width: 100%;
    height: auto;
}

.gold-panel h2 {
    color: var(--ink);
    background: none;
    -webkit-text-fill-color: var(--ink);
    filter: none;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.gold-panel strong {
    color: #1e1203;
}

.gold-panel a:not([class]) {
    color: #3b2506;
}

.gold-panel .micro-terms {
    color: #3a2709;
}

.gold-panel .cta-group {
    margin-top: 0;
}

@media (min-width: 1024px) {
    .gold-panel {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 260px);
        gap: 32px;
    }
}

.resp-band {
    position: relative;
    padding-block: clamp(28px, 4vw, 44px);
    background: var(--bg-band);
}

.resp-band::before,
.resp-band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

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

.resp-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
}

.resp-band__inner > div {
    flex: 1 1 320px;
    max-width: 800px;
}

.resp-band__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    color: var(--gold);
}

.resp-band h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.legal-check h3 {
    color: var(--gold-light);
}

/* ============================================
   PŁATNOŚCI PAGE
   ============================================ */

.fact-scroll {
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
}

.fact-strip {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fact-tile {
    flex: 0 0 232px;
    padding: 18px;
    border-radius: 14px;
    border-top: 2px solid var(--brass);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.fact-tile__icon {
    display: block;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    color: var(--gold);
}

.fact-tile__value {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--gold-light);
}

.fact-tile__label {
    margin: 6px 0 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

@media (min-width: 768px) {
    .fact-scroll {
        overflow: visible;
    }

    .fact-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fact-tile {
        flex: none;
    }
}

.notice-wrap {
    position: relative;
    isolation: isolate;
    max-width: 860px;
    margin: 0 auto;
}

.notice-wrap::before {
    content: "";
    position: absolute;
    inset: -30% -8%;
    background: radial-gradient(ellipse at center, rgba(240, 170, 60, 0.28), transparent 65%);
    z-index: -1;
    pointer-events: none;
}

.method-groups {
    display: grid;
    gap: 20px;
    margin-top: clamp(28px, 4vw, 44px);
    grid-template-columns: minmax(0, 1fr);
}

.method-group {
    padding: 20px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.method-group__title {
    margin-bottom: 8px;
    color: var(--gold-light);
    font-weight: 700;
}

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

.method-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(214, 166, 78, 0.18);
}

.method-list li:first-child {
    border-top: 0;
}

.method-list__name {
    font-weight: 600;
    color: #fff;
}

.method-list .pill {
    white-space: normal;
    font-size: 0.8125rem;
}

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

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

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

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

.currency-art {
    display: flex;
    justify-content: center;
}

.currency-art svg {
    width: min(100%, 420px);
    height: auto;
    filter: drop-shadow(0 0 18px rgba(227, 176, 79, 0.3));
}

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

.step-note {
    max-width: 860px;
    margin: clamp(36px, 5vw, 56px) auto 0;
}

.kyc-split .split__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 -28px 36px -18px rgba(0, 0, 0, 0.65);
}

@media (min-width: 768px) {
    .kyc-split .split__media::before {
        box-shadow: inset -28px 0 36px -18px rgba(0, 0, 0, 0.65);
    }
}

.tip-list {
    margin: 0 0 1em;
}

.tip-list li {
    margin-bottom: 0.4em;
}

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

.site-main > .topic-nav {
    position: sticky;
    top: var(--header-bottom);
    z-index: 20;
}

.faq-block__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(18px, 3vw, 28px);
}

.faq-block__head h2 {
    margin-bottom: 0;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.faq-block__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--gold);
    filter: drop-shadow(0 0 8px rgba(227, 176, 79, 0.45));
}

.faq-item__a ol {
    margin: 10px 0 0;
}

.faq-item__a ol li + li {
    margin-top: 6px;
}

.faq-extra {
    margin-top: clamp(24px, 4vw, 36px);
}

.badge-row--sm {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: clamp(20px, 3vw, 32px);
}

.badge-row--sm .gear-badge__emblem {
    width: min(96px, 100%);
}

.badge-row--sm .gear-badge__ribbon {
    max-width: 100%;
    padding: 3px 6px;
    font-size: 0.625rem;
    letter-spacing: 0;
}

@media (min-width: 480px) {
    .badge-row--sm {
        gap: 20px;
    }

    .badge-row--sm .gear-badge__ribbon {
        padding: 3px 12px;
        font-size: 0.8125rem;
        letter-spacing: 0.04em;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .btn:hover,
    .vault-tile:hover,
    .link-card:hover {
        transform: none;
    }
}