/* Display: Rubik — chunky rounded grotesque that echoes the extruded logo lettering. Body: Manrope. Both: Latin + Cyrillic. */
@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 500 900;
    font-display: swap;
    src: url("../fonts/rubik-500-900-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 500 900;
    font-display: swap;
    src: url("../fonts/rubik-500-900-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/manrope-400-800-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/manrope-400-800-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
    /* NLC palette: midnight navy, electric violet, cyan and cool white. */
    --plum-950: #101034;
    --plum-900: #14143e;
    --plum-800: #1b1b50;
    --plum-700: #242460;
    --plum-600: #303070;
    --velvet-600: #39128a;
    --velvet-500: #341077;
    --violet-500: #6725df;
    --violet-400: #8b17ff;
    --magenta-400: #43bfff;
    --magenta-500: #6935ed;
    --gold-100: #f3eeff;
    --gold-200: #d9b8ff;
    --gold-300: #be83ff;
    --gold-400: #8b17ff;
    --gold-500: #6610d3;
    --gold-600: #510bb1;
    --bronze-700: #3f098f;
    --ink-plum: #0d0d2e;   /* logo outline */
    --cream: #f3f4f6;      /* gold-100 mixed toward white for long-form text */
    --lilac: #c1c8ef;      /* violet-400 lightened 70% toward white */
    --rose: #ff6b6b;       /* red of heart card / roulette (guest-desktop), lightened for AA */

    --color-bg: var(--plum-950);
    --color-bg-glow: var(--velvet-500);
    --color-text: var(--cream);
    --color-text-soft: #e7e9fb;
    --color-text-muted: rgba(243, 244, 246, 0.72);
    --color-placeholder: rgba(243, 244, 246, 0.62);
    --color-neutral-70: #acb1d2;
    --color-neutral-35: #4a4a78;
    --color-accent: var(--gold-300);
    --color-accent-soft: var(--gold-200);
    --color-headline: var(--gold-300);
    --color-danger: var(--rose);
    --color-on-primary: var(--ink-plum);
    --color-white: #ffffff;
    --color-gold: var(--gold-400);
    --color-sky: var(--lilac);

    --surface-glass: linear-gradient(180deg, rgba(52, 16, 119, 0.62) 0%, rgba(27, 27, 80, 0.86) 100%);
    --surface-velvet: radial-gradient(120% 90% at 50% 0%, #302078 0%, var(--plum-800) 58%, var(--plum-900) 100%);
    --border-glass: rgba(139, 23, 255, 0.24);
    --border-gold: linear-gradient(180deg, var(--gold-200), var(--gold-500) 55%, var(--bronze-700));
    --shadow-card: 0 20px 48px rgba(10, 0, 14, 0.55);
    --shadow-primary-glow: 0 8px 24px rgba(139, 23, 255, 0.3);
    --shadow-magic: 0 0 48px rgba(105, 53, 237, 0.35);

    --duration-fast: 0.15s;
    --duration-base: 0.25s;
    --duration-slow: 0.45s;

    --overlay-light-004: rgba(255, 255, 255, 0.04);
    --overlay-light-005: rgba(255, 255, 255, 0.05);
    --overlay-light-008: rgba(255, 255, 255, 0.08);
    --overlay-light-016: rgba(255, 255, 255, 0.16);
    --overlay-light-040: rgba(255, 255, 255, 0.4);
    --overlay-light-064: rgba(255, 255, 255, 0.64);
    --overlay-dark-032: rgba(12, 13, 19, 0.32);
    --overlay-dark-064: rgba(12, 13, 19, 0.64);

    --gradient-primary: linear-gradient(180deg, var(--gold-200) 0%, var(--gold-400) 48%, var(--gold-500) 100%);
    --gradient-gold-text: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-200) 30%, var(--gold-400) 62%, var(--gold-500) 100%);
    --gradient-page-glow: linear-gradient(180deg, var(--color-bg-glow) 0%, rgba(16, 16, 52, 0) 100%);
    --shadow-primary-inset: inset 0 2px 0 rgba(243, 238, 255, 0.85), inset 0 -3px 0 rgba(81, 11, 177, 0.55);
    --shadow-gold-text: drop-shadow(0 2px 0 var(--ink-plum)) drop-shadow(0 6px 14px rgba(10, 0, 14, 0.6));
    --shadow-xl: 0 34px 40px rgba(10, 0, 14, 0.45);

    --space-2: 2px;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;

    --radius-2: 2px;
    --radius-4: 4px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-64: 64px;
    --radius-full: 999px;

    --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-accent: "Rubik", "Manrope", system-ui, sans-serif;
    --font-display: "Rubik", "Manrope", system-ui, sans-serif;

    /* Type scale (mobile → desktop via clamp) */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: clamp(24px, 3vw, 28px);
    --text-2xl: clamp(30px, 5vw, 44px);
    --text-hero: clamp(30px, 7.4vw, 58px);

    --page-gutter: var(--space-16);
}

@media (min-width: 768px) {
    :root {
        --page-gutter: var(--space-32);
    }
}

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

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

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 22px;
}

h1,
h2,
h3,
p,
ul {
    margin: 0;
}

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

a {
    color: inherit;
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--color-accent-soft);
    outline-offset: 2px;
}

.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;
    top: -100px;
    left: var(--space-16);
    z-index: 100;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-12);
    background: var(--color-text);
    color: var(--color-bg);
}

.skip-link:focus {
    top: var(--space-8);
}

body.header-app::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    height: 535px;
    background: var(--gradient-page-glow);
    pointer-events: none;
}

.site-main,
.site-header,
.site-footer {
    position: relative;
    z-index: 1;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16);
    border: 0;
    border-radius: var(--radius-12);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--primary {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-primary-inset), 0 0 0 1px rgba(63, 9, 143, 0.55), var(--shadow-primary-glow);
    color: var(--color-on-primary);
    font-weight: 700;
}

.btn--primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary-inset), 0 0 0 1px rgba(63, 9, 143, 0.55), 0 12px 32px rgba(139, 23, 255, 0.45);
}

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

.btn.is-loading {
    pointer-events: none;
    filter: saturate(0.75) brightness(0.88);
}

.btn.is-loading::before {
    content: "";
    flex: none;
    width: 0.8em;
    height: 0.8em;
    border: 0.14em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

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

.btn--md {
    font-size: 16px;
    line-height: 20px;
}

.btn--lg {
    height: 50px;
    border-radius: var(--radius-full);
    font-size: 22px;
    font-weight: 600;
    line-height: 26px;
}

.site-header {
    display: flex;
    align-items: center;
    padding: var(--space-12) var(--page-gutter);
}

.site-header--guest {
    justify-content: center;
    padding-block: var(--space-16);
}

.site-header--guest .site-header__logo img {
    width: 120px;
    height: 68px;
}

.site-header--app {
    justify-content: space-between;
    gap: var(--space-16);
}

.site-header__left,
.site-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-16);
}

.site-header__burger {
    display: block;
    width: 24px;
    height: 24px;
}

.site-header__logo img {
    width: 64px;
    height: 36px;
    object-fit: cover;
}

.site-header__buy {
    width: 64px;
}

.balance {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 38px;
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-12);
    background: var(--overlay-light-005);
    color: var(--color-white);
    font-size: 16px;
    line-height: 22px;
    white-space: nowrap;
}

.balance__coin {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
}

@media (min-width: 768px) {
    .site-header--guest .site-header__logo img {
        width: 84px;
        height: 48px;
    }

    .site-header__left {
        gap: var(--space-24);
    }

    .site-header__buy {
        width: 94px;
    }
}

.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
    padding: var(--space-32) var(--page-gutter);
    overflow: hidden;
}

.section--compact {
    padding-block: var(--space-16);
}

.section__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: center;
}

.section__title:not(.section__title--sm)::after {
    content: "";
    display: block;
    width: 96px;
    height: 10px;
    margin: var(--space-12) auto 0;
    background:
        linear-gradient(45deg, transparent 50%, var(--gold-400) 50%) 50% 50% / 7px 7px no-repeat,
        linear-gradient(90deg, transparent, var(--gold-500) 30%, var(--gold-200) 50%, var(--gold-500) 70%, transparent) 50% 50% / 100% 2px no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) 50% 50% / 100% 2px no-repeat, linear-gradient(#000 0 0) 50% 50% / 7px 7px no-repeat;
    mask: linear-gradient(#000 0 0) 50% 50% / 100% 2px no-repeat, linear-gradient(#000 0 0) 50% 50% / 7px 7px no-repeat;
}

.section__title--sm {
    font-size: 18px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .section--compact {
        padding-block: var(--space-32);
    }

    .section__title {
        font-size: 32px;
    }

    .section__title--sm {
        font-size: 18px;
    }
}

.page-guest .site-main {
    position: static;
}

.page-guest .site-main > :not(.guest-bg, .signup-bar, .bonus-modal) {
    position: relative;
    z-index: 1;
}

.guest-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    height: 720px;
    overflow: hidden;
    background: var(--color-bg);
    pointer-events: none;
}

.guest-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 380px;
    background: linear-gradient(180deg, rgba(16, 16, 52, 0) 0, var(--color-bg) 160px);
}

.guest-bg img {
    width: 440px;
    max-width: none;
    height: 720px;
    margin-left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
}

@media (min-width: 441px) and (max-width: 767px) {
    .guest-bg img {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    }
}

@media (min-width: 1441px) {
    .guest-bg img {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
    }
}

@media (min-width: 768px) {
    .guest-bg {
        height: 900px;
        background: var(--color-bg);
    }

    .guest-bg::after {
        height: 120px;
        background: linear-gradient(180deg, rgba(16, 16, 52, 0) 0, var(--color-bg) 100%);
    }

    .guest-bg img {
        width: 1440px;
        height: 900px;
    }
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
    padding: var(--space-8) var(--page-gutter) var(--space-24);
    scroll-margin-top: var(--space-16);
}

.hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    text-align: center;
}

.hero__title {
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    filter: var(--shadow-gold-text);
}

.hero__subtitle {
    margin-top: calc(-1 * var(--space-8));
    color: var(--color-text);
    font-style: italic;
    line-height: 20px;
    text-shadow: 0 2px 8px rgba(10, 0, 14, 0.8);
}

.hero__bonus {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-24) var(--space-8) var(--space-12);
    border: 1px solid rgba(139, 23, 255, 0.55);
    border-radius: var(--radius-full);
    background: radial-gradient(120% 140% at 50% 0%, rgba(67, 191, 255, 0.35) 0%, rgba(27, 27, 80, 0.8) 70%);
    box-shadow: 0 0 32px rgba(105, 53, 237, 0.45), inset 0 1px 0 rgba(243, 238, 255, 0.25);
    color: var(--gold-300);
    font-family: var(--font-accent);
    font-size: 32px;
    font-weight: 500;
    line-height: 32px;
}

.hero__bonus img {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
}

@media (min-width: 768px) {
    .hero {
        padding-top: var(--space-24);
    }

    .hero__title {
        font-size: 32px;
    }
}

.signup {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
    max-width: 372px;
    padding: var(--space-16);
    border: 1px solid rgba(139, 23, 255, 0.4);
    border-radius: var(--radius-24);
    background: var(--surface-glass);
    box-shadow: var(--shadow-card), var(--shadow-magic), inset 0 1px 0 rgba(243, 238, 255, 0.18);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

@media (min-width: 768px) {
    .signup {
        max-width: 368px;
        padding: var(--space-24);
    }
}

.signup__errors {
    padding: var(--space-8) var(--space-12);
    border: 1px solid rgba(255, 107, 107, 0.45);
    border-radius: var(--radius-12);
    background: rgba(255, 107, 107, 0.12);
    color: var(--color-text);
    font-size: 14px;
    line-height: 18px;
}

.field {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: 47px;
    padding: 0 var(--space-16);
    border: 1px solid rgba(193, 200, 239, 0.22);
    border-radius: var(--radius-full);
    background: rgba(16, 16, 52, 0.62);
    box-shadow: inset 0 2px 6px rgba(10, 0, 14, 0.5);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.field:hover {
    border-color: rgba(193, 200, 239, 0.4);
}

.field:focus-within {
    border-color: var(--color-gold);
    box-shadow: inset 0 2px 6px rgba(10, 0, 14, 0.5), 0 0 0 3px rgba(139, 23, 255, 0.22);
}

.field.is-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
    animation: field-shake 0.4s ease;
}

.check.is-invalid .check__box {
    animation: field-shake 0.4s ease;
}

.check.is-invalid .check__text {
    color: #ffb3b3;
}

@keyframes field-shake {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-4px);
    }

    40%, 80% {
        transform: translateX(4px);
    }
}

.field__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-accent);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    outline: none;
}

.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    transition: background-color 600000s 0s, color 600000s 0s;
}

.field__input:autofill {
    background: transparent;
    filter: none;
}

.field__input::placeholder {
    color: var(--color-placeholder);
    opacity: 1;
}

.field__toggle {
    display: flex;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0.64;
}

.field__toggle[aria-pressed="true"] {
    opacity: 1;
}

.signup__terms {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.check {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    cursor: pointer;
}

.check__input {
    position: absolute;
    width: 24px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.check__box {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.check__box::before {
    content: "";
    position: absolute;
    inset: 12.5%;
    border: 1px solid var(--overlay-light-040);
    border-radius: var(--radius-4);
}

.check__box::after {
    content: "";
    position: absolute;
    inset: calc(12.5% + 4px);
    border-radius: var(--radius-2);
    background: var(--color-accent);
    opacity: 0;
}

.check__input:checked + .check__box::before {
    border-color: var(--color-accent-soft);
}

.check__input:checked + .check__box::after {
    opacity: 1;
}

.check__input:focus-visible + .check__box {
    outline: 2px solid var(--color-accent-soft);
    outline-offset: 0;
    border-radius: var(--radius-4);
}

.check.is-invalid .check__box::before {
    border-color: var(--color-danger);
}

.check__text {
    flex: 1;
    color: var(--color-text-soft);
    font-family: var(--font-accent);
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
}

.check__text a {
    color: var(--color-accent);
    text-decoration: none;
}

.check__text a:hover {
    text-decoration: underline;
}

.signup__submit {
    width: 100%;
}

.signup__disclaimer {
    color: var(--color-text-soft);
    font-family: var(--font-accent);
    font-size: 10px;
    line-height: 14px;
    text-align: center;
}

.signup__disclaimer a {
    color: inherit;
}

.grecaptcha-badge {
    visibility: hidden;
}

.signup-bar {
    position: fixed;
    visibility: hidden;
    transform: translateY(calc(100% + 40px));
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    padding: var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-glass);
    border-radius: var(--radius-24) var(--radius-24) 0 0;
    background: rgba(27, 27, 80, 0.9);
    box-shadow: 0 -12px 32px rgba(10, 0, 14, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.signup-bar.is-visible {
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .signup-bar {
        transition: none;
    }
}

.signup-bar__button {
    flex: 1;
    min-width: 68px;
    max-width: 361px;
    padding: var(--space-8) var(--space-16);
    border: 1px solid rgba(63, 9, 143, 0.55);
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-primary-inset), var(--shadow-primary-glow);
    color: var(--color-on-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
}

.page-guest .site-footer {
    padding-bottom: calc(var(--space-24) + 72px);
}

@media (min-width: 768px) {
    .signup-bar {
        display: none;
    }

    .page-guest .site-footer {
        padding-bottom: var(--space-24);
    }
}

.game-stack {
    position: relative;
    flex-shrink: 0;
    width: 340px;
    height: 174px;
}

.game-card {
    position: absolute;
    display: block;
    border-radius: var(--radius-12);
    overflow: hidden;
    box-shadow: 0 14px 14px #000000;
    transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, filter 0.15s ease;
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-card:hover {
    filter: brightness(1.08);
}

.game-card--left,
.game-card--right {
    z-index: 1;
    top: 16px;
    width: 105px;
    height: 142px;
}

.game-card--left {
    left: 9px;
}

.game-card--right {
    left: 225px;
}

.game-card--center {
    z-index: 2;
    top: 0;
    left: 105px;
    width: 129px;
    height: 174px;
}

.game-card__badge {
    position: absolute;
    top: var(--space-8);
    left: var(--space-8);
    display: flex;
    align-items: center;
    height: 18px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--overlay-dark-032);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.25);
    color: #f3f6f5;
    font-family: var(--font-accent);
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
}

@media (min-width: 768px) {
    .game-stack {
        width: 550px;
        height: 282px;
    }

    .game-card--left,
    .game-card--right {
        top: 26px;
        width: 170px;
        height: 230px;
        box-shadow: 0 8px 14px #000000;
    }

    .game-card--left {
        left: 14px;
    }

    .game-card--right {
        left: 364px;
    }

    .game-card--center {
        left: 170px;
        width: 208px;
        height: 282px;
        box-shadow: 0 0 18px #000000, 0 12px 22px #000000;
    }
}

.game-card--hidden {
    display: none;
}

.game-stack.is-carousel {
    width: calc(100% + 32px);
    height: var(--card-h);
    margin-inline: -16px;
    perspective: 1000px;
    transform-style: preserve-3d;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.game-stack.is-carousel .carousel-slide {
    top: 0;
    left: calc(50% - var(--card-w) / 2);
    width: var(--card-w);
    height: var(--card-h);
    overflow: hidden;
    border: 1px solid var(--overlay-light-016);
    border-radius: 20px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: transform 0.5s ease, opacity 0.5s ease;
    -webkit-user-drag: none;
}

.game-stack.is-carousel .carousel-slide.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.game-stack.is-carousel .game-card__badge {
    display: none;
}

.carousel-pagination {
    display: none;
    justify-content: center;
    gap: var(--space-16);
}

.carousel-pagination button {
    display: grid;
    place-items: center;
    width: 62px;
    height: 54px;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-full);
    background: var(--surface-glass);
    color: var(--color-text);
    font-size: 30px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.carousel-pagination button:hover {
    border-color: var(--color-gold);
    background: rgba(139, 23, 255, 0.14);
    color: var(--gold-200);
}

.carousel-pagination button:active {
    background: rgba(139, 23, 255, 0.24);
}

.carousel-pagination .prev span {
    transform: rotate(90deg);
}

.carousel-pagination .next span {
    transform: rotate(-90deg);
}

.carousel-pagination span {
    display: grid;
}

.carousel-pagination svg {
    transform: translateY(0);
    transition: transform 300ms;
}

@media (hover: hover) {
    .carousel-pagination button:hover svg {
        transform: translateY(5px);
    }
}

@media (min-width: 768px) {
    .game-stack.is-carousel {
        width: 100%;
        margin-inline: 0;
    }
}

@media (min-width: 1024px) {
    .carousel-pagination {
        display: flex;
    }
}

.benefits {
    display: grid;
    gap: var(--space-24);
    width: 100%;
}

.benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-16) var(--space-16) var(--space-24);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-24);
    background: var(--surface-velvet);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(243, 238, 255, 0.14);
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .benefit:hover {
        border-color: rgba(139, 23, 255, 0.6);
        box-shadow: var(--shadow-card), var(--shadow-magic), inset 0 1px 0 rgba(243, 238, 255, 0.2);
        transform: translateY(-4px);
    }
}

.benefit__image {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 360 / 200;
    object-fit: cover;
}

.benefit__title {
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    filter: drop-shadow(0 2px 0 var(--ink-plum));
}

.benefit__text {
    max-width: 360px;
    color: var(--color-text-muted);
}

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

@media (min-width: 1200px) {
    .benefits {
        gap: var(--space-32);
    }
}

.banner {
    padding: var(--space-16);
}

.banner__inner {
    position: relative;
    display: flex;
    max-width: 1032px;
    min-height: 464px;
    margin-inline: auto;
    padding: var(--space-24);
    overflow: hidden;
    border-radius: var(--radius-16);
    background: var(--overlay-light-016);
}

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

.banner__content {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
}

.banner__title {
    color: var(--color-headline);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--shadow-xl);
}

.banner__button {
    width: 100%;
    max-width: 240px;
    height: 46px;
}

@media (min-width: 768px) {
    .banner {
        padding: var(--space-24) var(--space-32);
    }

    .banner__inner {
        min-height: 396px;
        padding: var(--space-24) var(--space-32) var(--space-24) var(--space-48);
        border-radius: var(--radius-12);
        background: rgba(231, 231, 231, 0.2);
    }

    .banner__content {
        align-items: flex-start;
        justify-content: center;
    }

    .banner__title {
        max-width: 50%;
        font-size: 40px;
        line-height: 40px;
        text-align: left;
    }

    .banner__button {
        height: 50px;
    }
}

.game {
    display: flex;
    justify-content: center;
    padding: var(--space-16);
}

.game__wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
    max-width: 938px;
}

.game-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-8);
    border-top: 0.5px solid #2b5cd6;
    border-radius: var(--radius-full);
    background: #0a2560;
}

.game-bar__left {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    min-width: 0;
}

.game-bar__title {
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.round-button {
    display: flex;
    flex-shrink: 0;
    padding: var(--space-8);
    border: 1px solid rgba(88, 140, 230, 0.24);
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, rgba(156, 190, 243, 0.15) 0%, rgba(248, 250, 255, 0.3) 143.33%);
}

.round-button__icon {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
}

.round-button__icon img {
    width: 20px;
    height: 20px;
}

.like-icon {
    display: block;
    width: 20px;
    height: 20px;
    overflow: visible;
}

.like-icon path {
    fill: transparent;
    stroke: rgba(237, 59, 124, 0.75);
    stroke-width: 1.8;
    stroke-linejoin: round;
    transition: fill 0.2s ease, stroke 0.2s ease, filter 0.2s ease;
}

.round-button--like:hover .like-icon path {
    fill: rgba(237, 59, 124, 0.22);
    stroke: #ed3b7c;
}

.round-button--like[aria-pressed="true"] .like-icon path {
    fill: #ed3b7c;
    stroke: #ed3b7c;
    filter: drop-shadow(0 0 4px rgba(237, 59, 124, 0.75));
}

.round-button--like.is-popping .like-icon {
    animation: like-pop 0.35s ease-out;
}

@keyframes like-pop {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.game-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 938 / 520;
    min-height: 280px;
    overflow: hidden;
    border-top: 1px solid var(--color-neutral-35);
    border-radius: var(--radius-24);
    background: #021238;
}

.game-frame__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(16px) brightness(0.45);
    transform: scale(1.15);
}

.game-frame__placeholder {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-24);
    text-align: center;
}

.game-frame__title {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
}

.game-frame__text {
    color: var(--color-text-muted);
}

.game-frame__iframe {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    height: 100%;
    border: 0;
    background: transparent;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
}

.game-frame--landscape .game-frame__iframe {
    width: 100%;
}

body.page-game {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

.page-game .site-main {
    display: flex;
    flex: 1;
    min-height: 0;
}

.page-game .game {
    flex: 1;
    min-height: 0;
    padding: var(--space-8) var(--space-8) var(--space-8);
}

.page-game .game__wrap {
    flex: 1;
    min-height: 0;
}

.game-frame--portrait {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: var(--radius-16);
}

.game-frame--portrait .game-frame__iframe {
    width: 100%;
}


@media (max-height: 480px) {
    body.page-game {
        height: auto;
    }

    .game-frame--portrait {
        flex: none;
        height: 460px;
    }
}

@media (min-width: 600px) {
    .game-frame--portrait {
        max-height: 844px;
        border-radius: var(--radius-24);
    }

    .game-frame--portrait .game-frame__iframe {
        width: auto;
        min-width: min(100%, 320px);
        max-width: 100%;
        aspect-ratio: 430 / 844;
    }
}

.game-frame.is-ready .game-frame__iframe {
    opacity: 1;
}

.game-frame.is-ready .game-frame__placeholder {
    display: none;
}

@media (min-width: 768px) {
    .game,
    .page-game .game {
        padding: var(--space-24) var(--space-32);
    }

    .game-bar__title {
        font-size: 20px;
        line-height: 26px;
    }
}

.legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
    padding: var(--space-32) var(--page-gutter);
}

.legal__back,
.legal__back,
.legal__body {
    width: 100%;
    max-width: 940px;
}

.legal__back {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-family: var(--font-accent);
    text-decoration: none;
}

.legal__back:hover span {
    text-decoration: underline;
}

.prose {
    color: var(--color-text);
    font-size: 14px;
    line-height: 18px;
    overflow-wrap: anywhere;
}

.prose > * + * {
    margin-top: var(--space-16);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    margin-bottom: 0;
    font-weight: 400;
}

.prose h1 {
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
}

.prose h2 {
    font-size: 20px;
    line-height: 26px;
    text-transform: uppercase;
}

.prose h1 + *,
.prose h2 + * {
    margin-top: var(--space-12);
}

.prose h3 {
    font-size: 20px;
    line-height: 26px;
}

.prose h4 {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
}

.prose h5 {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

.prose h6 {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.prose :is(h3, h4, h5, h6) + * {
    margin-top: var(--space-8);
}

.prose * + :is(h2, h3, h4, h5, h6) {
    margin-top: var(--space-24);
}

.prose ul,
.prose ol {
    padding-left: 21px;
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li + li {
    margin-top: var(--space-4);
}

.prose strong,
.prose b {
    font-weight: 600;
}

.prose em,
.prose i {
    font-style: italic;
}

.prose span {
    font: inherit;
    color: inherit;
}

.prose a {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-decoration: underline;
    text-decoration-color: #ffd941;
    text-underline-position: from-font;
}

.prose a:hover {
    text-decoration-color: #f8bc23;
    filter: brightness(1.1);
}

.prose hr {
    height: 1px;
    border: 0;
    background: var(--overlay-light-016);
}

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

.prose th,
.prose td {
    padding: var(--space-8);
    border: 1px solid var(--overlay-light-016);
    text-align: left;
    vertical-align: top;
}

.prose th {
    font-weight: 600;
}

@media (min-width: 768px) {
    .prose h2 {
        font-size: 26px;
        line-height: 28px;
    }
}

.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
    margin-top: var(--space-32);
    padding: var(--space-48) var(--space-32) var(--space-24);
    border-top: 1px solid var(--border-glass);
    background: linear-gradient(180deg, rgba(27, 27, 80, 0.55) 0%, rgba(10, 0, 14, 0.85) 100%);
    text-align: center;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: min(480px, 80%);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    transform: translateX(-50%);
}

.site-footer__logo {
    width: 120px;
    height: 68px;
    object-fit: cover;
}

.site-footer__help {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
}

.support-chip {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-full);
    background: var(--surface-glass);
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.support-chip:hover {
    border-color: var(--color-gold);
    color: var(--gold-200);
}

.site-footer__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-32);
}

.site-footer__disclaimer {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    max-width: 946px;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 18px;
}

.site-footer__cap {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    order: 2;
}

.site-footer__link {
    color: var(--color-sky);
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
}

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

.site-footer__link--desktop {
    display: none;
}

.payment-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-8);
    order: 1;
    padding: 0;
    list-style: none;
}

.payment-logos__item {
    position: relative;
    width: 60px;
    height: 40px;
}

.payment-logos__item img {
    width: 100%;
    height: 100%;
}

.payment-logos__item--mastercard img {
    position: absolute;
    top: 20.83%;
    left: 18.57%;
    width: 64.29%;
    height: 57.53%;
}

.payment-logos__item--apple {
    width: 68px;
}

.payment-logos__item--apple img {
    position: absolute;
    top: 20.83%;
    left: 9.64%;
    width: 80.71%;
    height: 58.34%;
}

.site-footer__copy {
    order: 3;
    font-size: 14px;
    line-height: 18px;
}

@media (min-width: 768px) {
    .site-footer__links {
        flex-flow: row wrap;
        justify-content: center;
        gap: var(--space-12) var(--space-48);
        order: 1;
    }

    .site-footer__link--desktop {
        display: inline;
    }

    .payment-logos {
        order: 2;
    }
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
}

.modal:target,
.modal.is-open {
    display: flex;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-dark-064);
}

.modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

.modal__panel:focus {
    outline: none;
}

.modal__head {
    position: relative;
    display: flex;
    justify-content: center;
    padding: var(--space-12) var(--space-16);
}

.modal__title {
    max-width: 300px;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
}

.modal__close {
    position: absolute;
    top: var(--space-12);
    right: var(--space-16);
    display: block;
    width: 26px;
    height: 26px;
}

html.is-scroll-locked,
html:has(.modal:target) {
    overflow: hidden;
}

html.is-scroll-locked body {
    position: fixed;
    right: 0;
    left: 0;
    width: 100%;
}

.drawer,
.store {
    overscroll-behavior: contain;
}

.modal--drawer {
    justify-content: flex-start;
}

.drawer {
    width: min(393px, 100%);
    height: 100%;
    overflow-y: auto;
    animation: drawer-in 0.2s ease;
}

.drawer__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-8) var(--space-16) var(--space-16);
}

.drawer__divider {
    width: 100%;
    height: 2px;
    margin: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--overlay-light-004);
}

.menu-link {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    text-decoration: none;
}

.menu-link img {
    width: 24px;
    height: 24px;
}

.menu-link__dot {
    display: flex;
    padding: var(--space-4);
    border-radius: var(--radius-full);
    background: #540007;
}

.menu-link__dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: #df3438;
}

.menu-link--danger {
    color: var(--color-danger);
    font-size: 16px;
    line-height: 22px;
}

@keyframes drawer-in {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.modal--center {
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
}

.store {
    width: 100%;
    max-width: 440px;
    max-height: min(700px, 100%);
    overflow: hidden auto;
    border: 1px solid var(--overlay-light-040);
    border-radius: var(--radius-24);
}

.store::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 535px;
    background: var(--gradient-page-glow);
    pointer-events: none;
}

.store > * {
    position: relative;
}

.store__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: 0 var(--space-16) var(--space-16);
}

.store__cols {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(-1 * var(--space-8));
    padding: 0 var(--space-12);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

.store__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: 0;
    list-style: none;
}

.package {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 68px;
    overflow: hidden;
    border: 0.5px solid transparent;
    border-radius: var(--radius-64);
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.package:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.package:active {
    transform: translateY(0);
}

.package--pink {
    border-color: #e8226e;
    background: radial-gradient(87% 411% at 13% 0%, rgba(255, 39, 79, 0.2) 0%, rgba(255, 147, 167, 0.11) 50%, rgba(255, 255, 255, 0.02) 100%);
}

.package--blue {
    border-color: #07b5ff;
    background: radial-gradient(87% 411% at 13% 0%, rgba(7, 181, 255, 0.2) 0%, rgba(131, 218, 255, 0.11) 50%, rgba(255, 255, 255, 0.02) 100%);
}

.package--purple {
    border-color: #a144ff;
    background: radial-gradient(87% 411% at 13% 0%, rgba(233, 39, 255, 0.2) 0%, rgba(244, 147, 255, 0.11) 50%, rgba(255, 255, 255, 0.02) 100%);
}

.package--plain {
    border: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0.28%, rgba(255, 255, 255, 0.07) 100%);
}

.package__deal {
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    display: flex;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-8) var(--space-2) 36px;
    border-bottom-right-radius: 10px;
    background: var(--overlay-light-008);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.package__deal span,
.store__note a {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.package__value {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-12) var(--space-8) var(--space-12) var(--space-16);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    white-space: nowrap;
    text-shadow: 0 4px 6px rgba(2, 6, 23, 0.05), 0 10px 15px rgba(2, 6, 23, 0.1);
}

.package__deal + .package__value {
    padding-top: var(--space-24);
}

.package__value img {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
}

.package__price {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: 104px;
    padding: var(--space-16) var(--space-12) var(--space-16) var(--space-8);
}

.package__buy {
    width: 100%;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-12);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-primary-inset);
    color: var(--color-bg);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
}

.package__old {
    position: absolute;
    top: 13px;
    left: 53px;
    min-width: 43px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.86);
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.package__old::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35px;
    height: 1px;
    border-radius: 99px;
    background: #ff0000;
    transform: translate(-50%, -50%) rotate(8.56deg);
}

.store__note {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

.store__note a {
    font-weight: 400;
    text-decoration: none;
}

.store__note a:hover {
    text-decoration: underline;
    text-decoration-color: #ffd941;
}

.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
    padding: var(--space-64) var(--page-gutter);
    text-align: center;
}

.not-found__title {
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
}

.not-found__text {
    color: var(--color-text-muted);
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.store,
.drawer {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 217, 65, 0.55) transparent;
}

.store::-webkit-scrollbar,
.drawer::-webkit-scrollbar {
    width: 6px;
}

.store::-webkit-scrollbar-track,
.drawer::-webkit-scrollbar-track {
    margin-block: 24px;
    background: transparent;
}

.store::-webkit-scrollbar-thumb,
.drawer::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd941, #f8bc23);
}

.store::-webkit-scrollbar-thumb:hover,
.drawer::-webkit-scrollbar-thumb:hover {
    background: #ffd941;
}

.game-bar__right {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.game-bar__exit--mobile,
.game-bar__buy {
    display: none;
}

@media (max-width: 599px) {
    .page-game .site-header {
        display: none;
    }

    .page-game .game {
        padding: var(--space-8) 0 0;
    }

    .page-game .game-bar {
        margin: 0 var(--space-16);
        padding: var(--space-12) var(--space-16);
        border-top: 0.5px solid #2b5cd6;
        border-bottom: 0.5px solid #2b5cd6;
    }

    .page-game .game-bar__title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .page-game .game-bar__exit--mobile {
        display: flex;
    }

    .page-game .game-bar__exit--desktop {
        display: none;
    }

    .page-game .game-bar__buy {
        display: inline-flex;
        width: 64px;
    }

    .page-game .game-frame--portrait {
        border-top: 0;
        border-radius: 0;
    }
}

.game-bar__demo {
    flex-shrink: 0;
    padding: 3px 10px;
    border: 1px solid rgba(255, 217, 65, 0.45);
    border-radius: var(--radius-full);
    background: rgba(255, 217, 65, 0.12);
    color: #ffd941;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.game-bar__signup {
    padding: var(--space-8) var(--space-24);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

@media (min-width: 600px) {
    .page-demo .game-bar {
        padding: var(--space-8) var(--space-12) var(--space-8) var(--space-24);
    }
}

@media (max-width: 599px) {
    .page-demo .game-bar {
        padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16);
    }
}

.bonus-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    background: radial-gradient(ellipse at 50% 40%, rgba(52, 16, 119, 0.92), rgba(10, 0, 14, 0.97) 70%);
    animation: bonus-fade 0.25s ease-out;
}

.bonus-modal__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 360px;
    padding: var(--space-24) var(--space-24) var(--space-24);
    overflow: hidden;
    border: 1px solid rgba(139, 23, 255, 0.55);
    border-radius: 28px;
    background: radial-gradient(120% 70% at 50% 0%, #44308c 0%, var(--plum-700) 55%, var(--plum-900) 100%);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(139, 23, 255, 0.08), 0 0 70px rgba(105, 53, 237, 0.4), inset 0 1px 0 rgba(243, 238, 255, 0.2);
    text-align: center;
    animation: bonus-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.bonus-modal__art {
    position: relative;
    display: grid;
    place-items: center;
    width: 168px;
    height: 150px;
}

.bonus-modal__rays {
    position: absolute;
    inset: -50px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 217, 65, 0.28) 0deg 7deg, transparent 7deg 20deg);
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 64%);
    mask-image: radial-gradient(circle, #000 18%, transparent 64%);
    animation: bonus-rays 16s linear infinite;
}

.bonus-modal__badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.7), transparent 42%), linear-gradient(180deg, #ffd941, #f8bc23);
    box-shadow: 0 0 0 6px rgba(255, 217, 65, 0.18), 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 -6px 12px rgba(190, 110, 0, 0.45);
    animation: bonus-float 3.2s ease-in-out infinite;
}

.bonus-modal__kicker {
    margin-top: var(--space-8);
    padding: 5px 12px;
    border: 1px solid rgba(255, 217, 65, 0.4);
    border-radius: var(--radius-full);
    background: rgba(255, 217, 65, 0.12);
    color: #ffd941;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.bonus-modal__title {
    margin-top: var(--space-12);
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
}

.bonus-modal__text {
    margin-top: var(--space-8);
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 22px;
}

.bonus-modal__button {
    width: 100%;
    margin-top: var(--space-24);
}

@keyframes bonus-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bonus-pop {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bonus-rays {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bonus-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* =====================================================================
   nlimcoin — neon gaming in the NLC palette
   Signature devices, repeated site-wide:
   1. Extruded gold (logo faces + bronze extrusion + plum outline) on titles and buttons.
   2. Marquee frame with light bulbs (hall lamps / casino signage).
   3. Arches (hall arches) + the gold-to-magenta magic trail with a spark.
   Image boxes keep their exact geometry: decoration lives in shadows,
   pseudo-elements and surrounding elements, never on top of an image.
   ===================================================================== */

:root {
    --pattern-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0 56 28 28 56 0 28Z' fill='none' stroke='%238b17ff' stroke-opacity='.06'/%3E%3Ccircle cx='28' cy='28' r='1.3' fill='%238b17ff' fill-opacity='.14'/%3E%3C/svg%3E");
    --ornament-trail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='24' viewBox='0 0 220 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236935ed' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%2343bfff'/%3E%3Cstop offset='.5' stop-color='%23d9b8ff'/%3E%3Cstop offset='.7' stop-color='%2343bfff'/%3E%3Cstop offset='1' stop-color='%236935ed' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 14C30 4 60 20 90 12s20-6 20 0 20 8 50-2 40-4 60 2' fill='none' stroke='url(%23g)' stroke-width='2'/%3E%3Cpath d='M110 1l2.8 8.2L121 12l-8.2 2.8L110 23l-2.8-8.2L99 12l8.2-2.8Z' fill='%23d9b8ff'/%3E%3Cpath d='M110 6l1.2 4.8L116 12l-4.8 1.2L110 18l-1.2-4.8L104 12l4.8-1.2Z' fill='%23f3f4f6'/%3E%3C/svg%3E");
    --bulbs: radial-gradient(circle, #f3f4f6 0 1.6px, #be83ff 2.4px, rgba(139, 23, 255, 0.45) 3.6px, transparent 4.8px);
    --suit-spade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C9 6 4 9 4 13a4 4 0 0 0 7 2.6L10 21h4l-1-5.4A4 4 0 0 0 20 13c0-4-5-7-8-11Z' fill='%238b17ff'/%3E%3C/svg%3E");
    --suit-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11Z' fill='%238b17ff'/%3E%3C/svg%3E");
    --suit-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7 10-7 10-7-10Z' fill='%238b17ff'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23ff6b6b'/%3E%3Cpath d='M10 5v6' stroke='%23101034' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.6' r='1.3' fill='%23101034'/%3E%3C/svg%3E");
    --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M2 38V8a6 6 0 0 1 6-6h30' fill='none' stroke='%238b17ff' stroke-width='2'/%3E%3Cpath d='M8 8h6v6H8z' fill='%238b17ff' transform='rotate(45 11 11)'/%3E%3C/svg%3E");
    --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M38 2v30a6 6 0 0 1-6 6H2' fill='none' stroke='%238b17ff' stroke-width='2'/%3E%3Cpath d='M26 26h6v6h-6z' fill='%238b17ff' transform='rotate(45 29 29)'/%3E%3C/svg%3E");
    --extrude: drop-shadow(0 1px 0 #510bb1) drop-shadow(0 2px 0 #3f098f) drop-shadow(0 2px 0 #0d0d2e) drop-shadow(0 10px 18px rgba(10, 0, 14, 0.6));
    --extrude-sm: drop-shadow(0 1px 0 #3f098f) drop-shadow(0 1px 0 #0d0d2e) drop-shadow(0 4px 8px rgba(10, 0, 14, 0.5));
    --velvet: linear-gradient(180deg, #302078 0%, #211750 55%, #141438 100%);
    --ring-gold: inset 0 0 0 1px rgba(139, 23, 255, 0.6);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Base ---------- */

html {
    background: var(--color-bg);
}

body {
    background:
        radial-gradient(70% 45% at 50% 0%, rgba(103, 37, 223, 0.22), transparent 70%),
        var(--pattern-lattice) 50% 0 / 56px 56px,
        var(--color-bg);
    font-family: var(--font-body);
    font-weight: 500;
    line-height: 1.5;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
}

::selection {
    background: rgba(139, 23, 255, 0.4);
    color: #ffffff;
}

:focus-visible {
    outline: 3px solid var(--gold-200);
    outline-offset: 3px;
}

body.header-app::before {
    height: 680px;
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(105, 53, 237, 0.45), transparent 70%),
        radial-gradient(90% 100% at 50% 0%, rgba(52, 16, 119, 0.55), transparent 80%);
}

/* Gold extruded headings */
.hero__title,
.section__title,
.banner__title,
.benefit__title,
.not-found__title,
.prose h1,
.bonus-modal__title,
.modal__title,
.game-frame__title {
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--font-display);
}

.hero__title,
.section__title,
.banner__title,
.not-found__title,
.prose h1,
.bonus-modal__title {
    filter: var(--extrude);
}

.benefit__title,
.modal__title,
.game-frame__title {
    filter: var(--extrude-sm);
}

/* ---------- Marquee bulbs (shared) ---------- */

.signup::before,
.banner::before,
.not-found::before,
.bonus-modal__card::before {
    content: "";
    position: absolute;
    padding: 11px;
    background: var(--bulbs) 0 0 / 15px 15px round, linear-gradient(180deg, #44308c, #1a1748);
    box-shadow: 0 0 0 1px rgba(139, 23, 255, 0.75), 0 0 24px rgba(139, 23, 255, 0.25);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    animation: jr-bulbs 1.4s ease-in-out infinite;
}

@keyframes jr-bulbs {
    0%, 100% {
        filter: brightness(0.85);
    }

    50% {
        filter: brightness(1.25);
    }
}

/* ---------- Buttons ---------- */

.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) ease, filter var(--duration-fast) ease;
}

.btn--primary,
.signup-bar__button {
    background: linear-gradient(180deg, #f3eeff 0%, #d9b8ff 16%, #8b17ff 55%, #6610d3 100%);
    color: var(--ink-plum);
    text-shadow: 0 1px 0 rgba(243, 238, 255, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -3px 0 rgba(81, 11, 177, 0.6),
        0 4px 0 #3f098f,
        0 5px 0 #0d0d2e,
        0 10px 22px rgba(139, 23, 255, 0.32);
}

.btn--primary::after,
.signup-bar__button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 46%, transparent 62%);
    transform: translateX(-130%);
    transition: transform 0.7s var(--ease-out);
}

.btn--primary:hover,
.signup-bar__button:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -3px 0 rgba(81, 11, 177, 0.6),
        0 6px 0 #3f098f,
        0 7px 0 #0d0d2e,
        0 16px 30px rgba(139, 23, 255, 0.45);
}

.btn--primary:hover::after,
.signup-bar__button:hover::after {
    transform: translateX(130%);
}

.btn--primary:active,
.signup-bar__button:active {
    transform: translateY(3px);
    box-shadow:
        inset 0 2px 6px rgba(63, 9, 143, 0.45),
        0 1px 0 #3f098f,
        0 2px 0 #0d0d2e,
        0 4px 10px rgba(139, 23, 255, 0.25);
}

.btn--primary:focus-visible,
.signup-bar__button:focus-visible {
    outline: 3px solid var(--lilac);
    outline-offset: 5px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    background: linear-gradient(180deg, #61618b, #3b3b66);
    color: rgba(243, 244, 246, 0.7);
    text-shadow: none;
    box-shadow: 0 4px 0 #202044;
    filter: none;
    transform: none;
}

.btn.is-loading {
    filter: none;
    cursor: progress;
    background-image:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 0 10px, transparent 10px 20px),
        linear-gradient(180deg, #d9b8ff 0%, #8b17ff 55%, #6610d3 100%);
    background-size: 28px 28px, 100% 100%;
    animation: jr-loading 0.8s linear infinite;
}

@keyframes jr-loading {
    to {
        background-position: 28px 0, 0 0;
    }
}

.btn--md {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
}

.btn--lg {
    height: 54px;
    font-size: 18px;
    letter-spacing: 0.06em;
}

/* ---------- App header ---------- */

.site-header--app {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-block: 11px;
    background: linear-gradient(180deg, rgba(26, 23, 72, 0.94), rgba(16, 16, 52, 0.86));
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: 0 10px 30px rgba(10, 0, 14, 0.5);
}

.site-header--app::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-500) 20%, var(--gold-200) 50%, var(--gold-500) 80%, transparent);
}

.site-header__burger {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #44308c, #1a1748);
    box-shadow: inset 0 0 0 1px rgba(139, 23, 255, 0.55), 0 4px 12px rgba(10, 0, 14, 0.5);
    transition: box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.site-header__burger:hover {
    box-shadow: inset 0 0 0 2px var(--gold-300), 0 0 18px rgba(139, 23, 255, 0.4);
}

.site-header__burger:active {
    transform: translateY(1px);
}

.balance {
    gap: var(--space-8);
    height: 40px;
    padding: 6px 14px 6px 8px;
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, #1a1748, #101034);
    box-shadow: inset 0 0 0 1px rgba(139, 23, 255, 0.6), inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 18px rgba(105, 53, 237, 0.4);
    color: var(--gold-100);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Guest header ---------- */

.site-header--guest {
    gap: 18px;
    padding-block: 16px;
}

.site-header--guest .site-header__logo {
    flex: none;
}

.site-header--guest::before,
.site-header--guest::after {
    content: none;
}

/* ---------- Hero (home) ---------- */

.hero {
    gap: 20px;
    padding-top: var(--space-16);
}

.hero__text {
    position: relative;
    z-index: 2;
    gap: 14px;
}

.hero__title {
    max-width: 11.5em;
    font-size: clamp(28px, 7vw, 54px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-wrap: balance;
    animation: jr-rise 0.7s var(--ease-out) both;
}

.hero__subtitle {
    margin-top: 0;
    padding: 7px 34px;
    background:
        linear-gradient(var(--gold-400), var(--gold-400)) top / 100% 2px no-repeat,
        linear-gradient(var(--gold-500), var(--gold-500)) bottom / 100% 2px no-repeat,
        linear-gradient(180deg, #5723b3, #341077 60%, #242452);
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
    color: var(--gold-100);
    font-family: var(--font-display);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 20px;
    text-shadow: 0 1px 0 var(--ink-plum);
    text-transform: uppercase;
    animation: jr-rise 0.7s 0.08s var(--ease-out) both;
}

.hero__bonus {
    position: relative;
    z-index: 3;
    gap: 12px;
    margin-bottom: -48px;
    padding: 10px 26px 10px 14px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, #1a1748, #101034);
    box-shadow:
        inset 0 0 0 1px rgba(139, 23, 255, 0.85),
        inset 0 0 0 4px #1a1748,
        inset 0 0 0 5px rgba(139, 23, 255, 0.4),
        inset 0 6px 14px rgba(0, 0, 0, 0.7),
        0 0 0 3px var(--ink-plum),
        0 0 34px rgba(67, 191, 255, 0.6),
        0 12px 24px rgba(0, 0, 0, 0.5);
    font-family: var(--font-display);
    font-size: clamp(32px, 6vw, 44px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    animation: jr-rise 0.7s 0.16s var(--ease-out) both;
}

.hero__bonus > span {
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: var(--extrude-sm);
}

@keyframes jr-rise {
    from {
        opacity: 0;
        translate: 0 18px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (max-width: 479px) {
    .hero__subtitle {
        padding-inline: 22px;
        font-size: 12px;
        letter-spacing: 0.06em;
    }
}

@media (min-width: 768px) {
    .hero {
        gap: 24px;
        padding-top: var(--space-24);
    }

    .hero__subtitle {
        font-size: 15px;
    }
}

/* Arched portal form */
.signup {
    position: relative;
    gap: 12px;
    max-width: 400px;
    padding: 64px 20px 24px;
    border: 1px solid rgba(139, 23, 255, 0.8);
    border-radius: 200px 200px 28px 28px / 110px 110px 28px 28px;
    background:
        radial-gradient(110% 55% at 50% 0%, rgba(67, 191, 255, 0.38), transparent 62%),
        linear-gradient(180deg, rgba(52, 16, 119, 0.9), rgba(20, 20, 62, 0.95));
    box-shadow:
        inset 0 0 0 5px rgba(27, 27, 80, 0.9),
        inset 0 0 0 6px rgba(139, 23, 255, 0.32),
        0 0 0 1px var(--ink-plum),
        0 30px 60px rgba(10, 0, 14, 0.7),
        0 0 70px rgba(105, 53, 237, 0.35);
    animation: jr-rise 0.8s 0.24s var(--ease-out) both;
}

.signup::before {
    inset: -12px;
    z-index: -1;
    border-radius: 212px 212px 40px 40px / 122px 122px 40px 40px;
}

.signup::after {
    content: "";
    position: absolute;
    right: 8%;
    bottom: -46px;
    left: 8%;
    z-index: -2;
    height: 60px;
    background: radial-gradient(ellipse at 50% 0%, rgba(139, 23, 255, 0.28), transparent 70%);
    pointer-events: none;
}

@media (min-width: 768px) {
    .signup {
        max-width: 400px;
        padding: 68px 32px 28px;
    }
}

/* Fields */
.field {
    height: 52px;
    gap: 12px;
    border: 1px solid rgba(193, 200, 239, 0.72);
    border-radius: 14px;
    background: linear-gradient(180deg, #101034, #14143e);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(139, 23, 255, 0.15);
}

.field::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    background: var(--lilac);
    transform: rotate(45deg);
    transition: background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.field:hover {
    border-color: rgba(193, 200, 239, 0.95);
}

.field:focus-within {
    border-color: var(--gold-300);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(139, 23, 255, 0.25), 0 0 20px rgba(139, 23, 255, 0.22);
}

.field:focus-within::before {
    background: var(--gold-300);
    box-shadow: 0 0 8px var(--gold-400);
}

.field.is-invalid {
    border-color: var(--rose);
    background: linear-gradient(180deg, #2a0414, #14143e);
}

.field.is-invalid::before {
    background: var(--rose);
}

.field__input {
    font-family: var(--font-body);
    font-weight: 600;
}

/* The whole .field lights up on :focus-within — no second outline on the bare input. */
.field__input:focus,
.field__input:focus-visible {
    outline: none;
}

.signup__errors {
    padding: 10px 12px 10px 40px;
    border: 1px solid rgba(255, 107, 107, 0.55);
    border-left-width: 4px;
    border-radius: 12px;
    background: var(--icon-alert) 12px 11px / 18px 18px no-repeat, rgba(255, 107, 107, 0.1);
    color: #ffd9d9;
    font-weight: 600;
}

.check__box::before {
    border: 1.5px solid rgba(139, 23, 255, 0.7);
    border-radius: 6px;
    background: #101034;
    transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.check:hover .check__box::before {
    border-color: var(--gold-300);
}

.check__box::after {
    inset: calc(12.5% + 3px);
    border-radius: 0;
    background: var(--gradient-primary);
    -webkit-mask: var(--icon-check) center / contain no-repeat;
    mask: var(--icon-check) center / contain no-repeat;
    transform: scale(0.4);
    transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) ease;
}

.check__input:checked + .check__box::before {
    border-color: var(--gold-300);
    background: rgba(139, 23, 255, 0.14);
    box-shadow: 0 0 10px rgba(139, 23, 255, 0.35);
}

.check__input:checked + .check__box::after {
    transform: none;
}

.check__input:focus-visible + .check__box {
    outline: 3px solid var(--gold-200);
    outline-offset: 1px;
    border-radius: 6px;
}

.check__text {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.check__text a {
    color: var(--gold-300);
    text-decoration: underline;
    text-decoration-color: rgba(190, 131, 255, 0.4);
    text-underline-offset: 2px;
}

.check__text a:hover {
    text-decoration-color: var(--gold-300);
}

.signup__disclaimer {
    color: var(--lilac);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Mobile sign-up bar */
.signup-bar {
    border-top: 1px solid rgba(139, 23, 255, 0.6);
    background: linear-gradient(180deg, rgba(37, 32, 80, 0.94), rgba(16, 16, 52, 0.97));
}

.signup-bar::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 28px;
    left: 28px;
    height: 8px;
    background: var(--bulbs) 0 50% / 14px 8px round;
    opacity: 0.8;
    animation: jr-bulbs 1.4s ease-in-out infinite;
}

.signup-bar__button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 8px;
    padding: 12px 16px;
    border: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) ease, filter var(--duration-fast) ease;
}

/* ---------- Sections ---------- */

.section {
    position: relative;
    gap: 28px;
    padding-block: 52px;
}

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

.section__title {
    font-size: var(--text-2xl);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.section__title:not(.section__title--sm)::after {
    width: 220px;
    height: 24px;
    margin: 14px auto 0;
    background: var(--ornament-trail) center / contain no-repeat;
    -webkit-mask: none;
    mask: none;
}

.section__title--sm {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.section__title--sm::before,
.section__title--sm::after {
    content: "";
    width: 56px;
    height: 10px;
    background:
        linear-gradient(45deg, transparent 50%, var(--gold-400) 50%) 100% 50% / 7px 7px no-repeat,
        linear-gradient(90deg, transparent, var(--gold-400)) 0 50% / calc(100% - 9px) 2px no-repeat;
}

.section__title--sm::after {
    transform: scaleX(-1);
}

@media (min-width: 768px) {
    .section {
        padding-block: 72px;
    }

    .section__title--sm {
        font-size: 28px;
    }
}

/* Stage band: game carousel framed by velvet curtains, spotlight and floor glow */
.section:has(.game-stack) {
    overflow: hidden;
    background:
        radial-gradient(45% 55% at 50% 52%, rgba(105, 53, 237, 0.38), transparent 70%),
        radial-gradient(38% 10% at 50% 90%, rgba(139, 23, 255, 0.2), transparent 70%),
        linear-gradient(180deg, transparent, rgba(27, 27, 80, 0.75) 22%, rgba(27, 27, 80, 0.75) 78%, transparent);
}

.section:has(.game-stack)::before,
.section:has(.game-stack)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: clamp(26px, 12vw, 210px);
    background:
        linear-gradient(180deg, rgba(139, 23, 255, 0.9), rgba(139, 23, 255, 0.9)) var(--fringe, 100%) 0 / 3px 100% no-repeat,
        repeating-linear-gradient(90deg, #25205d 0 6px, #46248c 14px, #25205d 22px, #18183f 30px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.section:has(.game-stack)::before {
    left: 0;
}

.section:has(.game-stack)::after {
    --fringe: 0%;
    right: 0;
}

.game-stack.is-carousel .carousel-slide {
    border-color: rgba(139, 23, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(13, 13, 46, 0.9), 0 0 0 4px rgba(139, 23, 255, 0.35), 0 18px 40px rgba(0, 0, 0, 0.65);
}

.game-stack.is-carousel .carousel-slide.current {
    border-color: var(--gold-300);
    box-shadow: 0 0 0 3px var(--ink-plum), 0 0 0 5px var(--gold-400), 0 0 40px rgba(139, 23, 255, 0.4), 0 24px 50px rgba(0, 0, 0, 0.7);
}

.carousel-pagination {
    gap: 20px;
}

.carousel-pagination button {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #44308c, #1a1748);
    box-shadow: inset 0 0 0 1px rgba(139, 23, 255, 0.7), 0 4px 0 var(--ink-plum), 0 8px 18px rgba(0, 0, 0, 0.5);
    color: var(--gold-200);
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.carousel-pagination button:hover {
    background: linear-gradient(180deg, #d9b8ff, #8b17ff 55%, #6610d3);
    color: var(--ink-plum);
    box-shadow: inset 0 1px 0 #ffffff, 0 4px 0 #3f098f, 0 0 24px rgba(139, 23, 255, 0.45);
}

.carousel-pagination button:active {
    background: linear-gradient(180deg, #8b17ff, #6610d3);
    transform: translateY(3px);
    box-shadow: 0 1px 0 #3f098f;
}

/* "Why" band: arched cards with a playing-card suit keystone, middle card raised */
.section:has(.benefits) {
    background:
        radial-gradient(50% 40% at 50% 60%, rgba(103, 37, 223, 0.3), transparent 70%),
        linear-gradient(180deg, transparent, rgba(20, 20, 62, 0.6) 30%, transparent);
}

.benefit {
    position: relative;
    gap: 10px;
    padding-top: 40px;
    padding-bottom: 30px;
    border-color: rgba(139, 23, 255, 0.55);
    border-radius: 180px 180px 24px 24px / 92px 92px 24px 24px;
    background:
        var(--suit-spade) 50% 12px / 18px 18px no-repeat,
        radial-gradient(75% 42% at 50% 30%, rgba(67, 191, 255, 0.55), rgba(105, 53, 237, 0.2) 60%, transparent 80%),
        var(--velvet);
    box-shadow:
        inset 0 0 0 5px rgba(20, 20, 62, 0.85),
        inset 0 0 0 6px rgba(139, 23, 255, 0.22),
        0 24px 48px rgba(10, 0, 14, 0.6);
    transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}

.benefit:nth-child(3n + 2) {
    background:
        var(--suit-heart) 50% 12px / 18px 18px no-repeat,
        radial-gradient(75% 42% at 50% 30%, rgba(67, 191, 255, 0.5), rgba(139, 23, 255, 0.12) 60%, transparent 80%),
        var(--velvet);
}

.benefit:nth-child(3n + 3) {
    background:
        var(--suit-diamond) 50% 12px / 18px 18px no-repeat,
        radial-gradient(75% 42% at 50% 30%, rgba(67, 191, 255, 0.55), rgba(105, 53, 237, 0.2) 60%, transparent 80%),
        var(--velvet);
}

@media (hover: hover) {
    .benefit:hover {
        border-color: var(--gold-300);
        box-shadow:
            inset 0 0 0 5px rgba(20, 20, 62, 0.85),
            inset 0 0 0 6px rgba(139, 23, 255, 0.45),
            0 0 50px rgba(105, 53, 237, 0.45),
            0 30px 60px rgba(10, 0, 14, 0.65);
        transform: translateY(-8px);
    }
}

.benefit__title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
}

.benefit__text {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.55;
}

@media (min-width: 768px) {
    .benefits {
        align-items: stretch;
        padding-top: 32px;
    }

    .benefit:nth-child(3n + 2) {
        margin-top: -32px;
        border-color: var(--gold-400);
        box-shadow:
            inset 0 0 0 5px rgba(20, 20, 62, 0.85),
            inset 0 0 0 6px rgba(139, 23, 255, 0.45),
            0 0 60px rgba(139, 23, 255, 0.18),
            0 30px 60px rgba(10, 0, 14, 0.65);
    }
}

/* ---------- Lobby banner ---------- */

.banner {
    position: relative;
}

.banner::before {
    top: 4px;
    right: max(4px, calc(50% - 528px));
    bottom: 4px;
    left: max(4px, calc(50% - 528px));
    z-index: 0;
    border-radius: 28px;
}

.banner__inner {
    z-index: 1;
    box-shadow: 0 0 0 2px var(--ink-plum), 0 0 0 3px rgba(139, 23, 255, 0.9), 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 90px rgba(105, 53, 237, 0.4);
}

.banner__title {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.02;
    text-shadow: none;
}

.banner__button {
    max-width: 260px;
    height: 54px;
}

@media (min-width: 768px) {
    .banner::before {
        top: 12px;
        right: max(20px, calc(50% - 528px));
        bottom: 12px;
        left: max(20px, calc(50% - 528px));
        border-radius: 24px;
    }

    .banner__title {
        font-size: clamp(40px, 4.6vw, 56px);
        line-height: 1;
    }

    .banner__button {
        height: 56px;
    }
}

/* ---------- Game page ---------- */

.game-bar {
    border-top: 1px solid rgba(139, 23, 255, 0.6);
    background: linear-gradient(180deg, #252050, #14143e);
    box-shadow: inset 0 -1px 0 rgba(139, 23, 255, 0.25), 0 0 0 1px var(--ink-plum), 0 12px 28px rgba(0, 0, 0, 0.5);
}

.game-bar__title {
    color: var(--gold-100);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.round-button {
    border: 1px solid rgba(139, 23, 255, 0.65);
    background: radial-gradient(circle at 50% 30%, #44308c, #1a1748);
    box-shadow: 0 3px 0 var(--ink-plum), 0 6px 12px rgba(0, 0, 0, 0.45);
    transition: box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.round-button:hover {
    border-color: var(--gold-200);
    box-shadow: 0 3px 0 var(--ink-plum), 0 0 18px rgba(139, 23, 255, 0.45);
}

.round-button:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--ink-plum);
}

.like-icon path {
    stroke: rgba(224, 85, 191, 0.85);
}

.round-button--like:hover .like-icon path {
    fill: rgba(224, 85, 191, 0.25);
    stroke: #e055bf;
}

.round-button--like[aria-pressed="true"] .like-icon path {
    fill: #e055bf;
    stroke: #e055bf;
    filter: drop-shadow(0 0 5px rgba(224, 85, 191, 0.8));
}

.game-bar__demo {
    border: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, #d9b8ff, #6610d3);
    color: var(--ink-plum);
    font-family: var(--font-display);
    font-weight: 800;
}

.game-frame {
    border-top-color: rgba(139, 23, 255, 0.6);
    background: #101034;
    box-shadow: 0 0 0 3px #14143e, 0 0 0 4px rgba(139, 23, 255, 0.65), 0 0 60px rgba(105, 53, 237, 0.4), 0 30px 60px rgba(0, 0, 0, 0.6);
}

.game-frame__title {
    font-size: 28px;
    font-weight: 900;
}

.game-frame__placeholder:has([data-game-status-text]:not([hidden]))::before {
    content: "";
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    border: 4px solid rgba(139, 23, 255, 0.25);
    border-top-color: var(--gold-300);
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

@media (min-width: 1100px) {
    body.page-game .site-main::before,
    body.page-game .site-main::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        width: clamp(40px, 7vw, 140px);
        background:
            linear-gradient(180deg, rgba(139, 23, 255, 0.85), rgba(139, 23, 255, 0.85)) var(--fringe, 100%) 0 / 3px 100% no-repeat,
            repeating-linear-gradient(90deg, #25205d 0 6px, #46248c 14px, #25205d 22px, #18183f 30px);
        pointer-events: none;
    }

    body.page-game .site-main::before {
        left: 0;
    }

    body.page-game .site-main::after {
        --fringe: 0%;
        right: 0;
    }
}

@media (max-width: 599px) {
    .page-game .game-bar {
        border-top: 1px solid rgba(139, 23, 255, 0.6);
        border-bottom: 1px solid rgba(139, 23, 255, 0.3);
    }

    .page-game .game-frame--portrait {
        box-shadow: none;
    }
}

/* ---------- Legal pages ---------- */

.legal {
    align-items: stretch;
    gap: 28px;
    padding-top: 40px;
}

.legal > * {
    width: 100%;
    max-width: 940px;
    margin-inline: auto;
}

.legal__back {
    width: fit-content;
    margin-left: max(0px, calc((100% - 940px) / 2));
    margin-right: auto;
    padding: 6px 18px 6px 8px;
    border-radius: var(--radius-full);
    background: var(--velvet);
    box-shadow: inset 0 0 0 1px rgba(139, 23, 255, 0.55), 0 4px 0 var(--ink-plum);
    color: var(--gold-100);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.legal__back:hover {
    box-shadow: inset 0 0 0 2px var(--gold-300), 0 4px 0 var(--ink-plum), 0 0 20px rgba(139, 23, 255, 0.3);
    transform: translateX(-3px);
}

.legal__back:hover span {
    text-decoration: none;
}

.legal__body {
    padding: 32px 20px;
    border-radius: 28px;
    background:
        var(--corner-tl) 14px 14px / 40px 40px no-repeat,
        var(--corner-br) calc(100% - 14px) calc(100% - 14px) / 40px 40px no-repeat,
        linear-gradient(180deg, rgba(37, 32, 80, 0.82), rgba(26, 3, 33, 0.94)),
        var(--pattern-lattice) 0 0 / 56px 56px;
    box-shadow:
        inset 0 0 0 1px rgba(139, 23, 255, 0.5),
        inset 0 0 0 6px rgba(20, 20, 62, 0.85),
        inset 0 0 0 7px rgba(139, 23, 255, 0.2),
        0 30px 60px rgba(0, 0, 0, 0.5);
}

.prose {
    font-size: 15px;
    line-height: 1.65;
}

.prose h1 {
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 900;
    line-height: 1.05;
}

.prose h1::after {
    content: "";
    display: block;
    width: 200px;
    height: 22px;
    margin-top: 12px;
    background: var(--ornament-trail) left center / contain no-repeat;
}

.prose h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: var(--gold-200);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.prose h2::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--gold-400);
    transform: translateY(-2px) rotate(45deg);
}

.prose h3,
.prose h4 {
    color: var(--lilac);
    font-family: var(--font-display);
    font-weight: 700;
}

.prose strong,
.prose b {
    color: #ffffff;
    font-weight: 800;
}

.prose li::marker {
    color: var(--gold-400);
}

.prose a {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--gold-300);
    text-decoration-color: rgba(190, 131, 255, 0.45);
    text-underline-offset: 3px;
}

.prose a:hover {
    filter: none;
    text-decoration-color: var(--gold-300);
}

.prose th,
.prose td {
    border-color: rgba(139, 23, 255, 0.25);
}

.prose th {
    background: rgba(139, 23, 255, 0.1);
    color: var(--gold-100);
}

@media (min-width: 768px) {
    .legal__body {
        padding: 52px 64px;
    }

    .prose h2 {
        font-size: 22px;
        line-height: 1.3;
    }
}

/* ---------- 404 ---------- */

.not-found {
    position: relative;
    width: min(100% - 32px, 520px);
    margin: 64px auto;
    padding: 72px 28px 40px;
    border: 1px solid rgba(139, 23, 255, 0.8);
    border-radius: 260px 260px 28px 28px / 130px 130px 28px 28px;
    background:
        radial-gradient(100% 60% at 50% 0%, rgba(67, 191, 255, 0.38), transparent 62%),
        var(--velvet);
    box-shadow: inset 0 0 0 5px rgba(27, 27, 80, 0.9), inset 0 0 0 6px rgba(139, 23, 255, 0.32), 0 30px 60px rgba(10, 0, 14, 0.7);
}

.not-found::before {
    inset: -12px;
    z-index: -1;
    border-radius: 272px 272px 40px 40px / 142px 142px 40px 40px;
}

.not-found__title {
    font-size: clamp(30px, 6vw, 44px);
    font-weight: 900;
    line-height: 1.05;
}

/* ---------- Footer ---------- */

.site-footer {
    gap: 28px;
    margin-top: 48px;
    padding: 64px var(--page-gutter) 28px;
    border-top: 1px solid rgba(139, 23, 255, 0.3);
    background:
        radial-gradient(50% 60% at 50% 0%, rgba(103, 37, 223, 0.25), transparent 70%),
        linear-gradient(180deg, rgba(20, 20, 62, 0.7), #0b0b27 70%),
        var(--pattern-lattice) 50% 0 / 56px 56px;
}

.site-footer::before {
    top: -12px;
    width: 260px;
    height: 24px;
    background: var(--ornament-trail) center / contain no-repeat;
}

.site-footer__help {
    gap: 12px;
    padding: 18px 22px;
    border-radius: 20px;
    background: var(--velvet);
    box-shadow: inset 0 0 0 1px rgba(139, 23, 255, 0.45), 0 16px 32px rgba(0, 0, 0, 0.4);
}

.site-footer__help-title {
    color: var(--gold-100);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.support-chip {
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(139, 23, 255, 0.6);
    background: rgba(16, 16, 52, 0.6);
    color: var(--color-text);
    font-weight: 700;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}

.support-chip:hover {
    border-color: var(--gold-300);
    box-shadow: 0 0 18px rgba(139, 23, 255, 0.3);
    color: var(--gold-200);
}

.site-footer__disclaimer {
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.site-footer__disclaimer a {
    color: var(--gold-300);
    text-underline-offset: 2px;
}

.site-footer__cap {
    gap: 20px;
    padding-top: 22px;
    border-top: 1px solid rgba(139, 23, 255, 0.2);
}

.site-footer__link {
    padding-bottom: 2px;
    background: linear-gradient(var(--gold-300), var(--gold-300)) 0 100% / 0 1px no-repeat;
    color: var(--lilac);
    font-weight: 600;
    transition: background-size 0.25s var(--ease-out), color var(--duration-fast) ease;
}

.site-footer__link:hover {
    background-size: 100% 1px;
    color: var(--gold-300);
}

.payment-logos {
    gap: 10px;
}

.payment-logos__item {
    border-radius: 10px;
    background: rgba(243, 244, 246, 0.07);
    box-shadow: inset 0 0 0 1px rgba(139, 23, 255, 0.22);
}

.site-footer__copy {
    color: var(--color-text-muted);
    font-size: 13px;
}

@media (min-width: 1024px) {
    .site-footer {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "logo main help" "cap cap cap";
        align-items: center;
        column-gap: 48px;
        row-gap: 36px;
        padding-inline: max(32px, calc((100% - 1240px) / 2));
        text-align: left;
    }

    .site-footer__logo {
        grid-area: logo;
    }

    .site-footer__main {
        grid-area: main;
        flex-direction: row;
        align-items: center;
        gap: 28px;
    }

    .site-footer__help {
        grid-area: help;
        align-items: flex-start;
    }

    .site-footer__cap {
        grid-area: cap;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "links pay" "copy copy";
        align-items: center;
    }

    .site-footer__links {
        grid-area: links;
        justify-content: flex-start;
        gap: 12px 32px;
    }

    .payment-logos {
        grid-area: pay;
    }

    .site-footer__copy {
        grid-area: copy;
    }
}

/* ---------- Modals: overlay, drawer menu, store ---------- */

.modal__overlay {
    background: rgba(10, 0, 14, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.modal__panel {
    background: var(--velvet);
}

.modal__head {
    padding: 18px 64px 16px;
}

.modal__title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 30px;
    text-transform: uppercase;
}

.modal__close {
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #44308c, #1a1748);
    box-shadow: inset 0 0 0 1px rgba(139, 23, 255, 0.6);
    transition: box-shadow var(--duration-fast) ease;
}

.modal__close:hover {
    box-shadow: inset 0 0 0 2px var(--gold-300), 0 0 16px rgba(139, 23, 255, 0.4);
}

.drawer {
    background:
        radial-gradient(90% 40% at 0% 0%, rgba(105, 53, 237, 0.4), transparent 70%),
        linear-gradient(180deg, #252050, #141438 50%, #101034),
        var(--pattern-lattice) 0 0 / 56px 56px;
    box-shadow: 1px 0 0 rgba(139, 23, 255, 0.7), 16px 0 50px rgba(0, 0, 0, 0.6);
    animation: drawer-in 0.3s var(--ease-out);
}

.drawer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 6px;
    bottom: 0;
    width: 8px;
    background: var(--bulbs) 50% 0 / 8px 16px round;
    pointer-events: none;
    animation: jr-bulbs 1.4s ease-in-out infinite;
}

.drawer .modal__head {
    justify-content: flex-start;
    padding-left: 24px;
    border-bottom: 1px solid rgba(139, 23, 255, 0.25);
}

.drawer__body {
    gap: 14px;
    padding: 20px 28px 20px 16px;
}

.menu-link {
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(103, 37, 223, 0.38), rgba(27, 27, 80, 0.55));
    box-shadow: inset 0 0 0 1px rgba(139, 23, 255, 0.3);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: box-shadow var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out), color var(--duration-fast) ease;
}

.menu-link:hover,
.menu-link:focus-visible {
    box-shadow: inset 0 0 0 1px var(--gold-300), 0 0 22px rgba(105, 53, 237, 0.5);
    color: var(--gold-100);
    transform: translateX(4px);
}

.menu-link:active {
    transform: translateX(2px);
}

.menu-link__dot {
    margin-left: auto;
    background: rgba(255, 107, 107, 0.25);
}

.menu-link__dot::before {
    background: var(--rose);
    box-shadow: 0 0 8px var(--rose);
}

.menu-link--danger {
    background: rgba(255, 107, 107, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.35);
    color: var(--rose);
    font-size: 16px;
}

.menu-link--danger:hover,
.menu-link--danger:focus-visible {
    box-shadow: inset 0 0 0 1px var(--rose), 0 0 18px rgba(255, 107, 107, 0.3);
    color: #ffb3b3;
}

.drawer__divider {
    height: 24px;
    border-radius: 0;
    background: var(--ornament-trail) center / 220px 24px no-repeat;
}

.store {
    border: 1px solid rgba(139, 23, 255, 0.75);
    border-radius: 28px;
    background:
        radial-gradient(120% 45% at 50% 0%, rgba(105, 53, 237, 0.5), transparent 62%),
        linear-gradient(180deg, #211750, #101034);
    box-shadow: inset 0 0 0 5px #14143e, inset 0 0 0 6px rgba(139, 23, 255, 0.3), 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 70px rgba(105, 53, 237, 0.4);
}

.store::before {
    background: none;
}

.store .modal__head::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: 2px;
    left: 28px;
    height: 8px;
    background: var(--bulbs) 0 50% / 14px 8px round;
    animation: jr-bulbs 1.4s ease-in-out infinite;
}

.store__content {
    padding-top: 10px;
}

.store__cols {
    color: var(--lilac);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.package {
    min-height: 70px;
    border: 0;
    border-radius: 18px;
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) ease;
}

.package:hover {
    filter: none;
    transform: translateY(-2px);
}

.package--pink {
    background: linear-gradient(90deg, rgba(67, 191, 255, 0.4), rgba(52, 16, 119, 0.45));
    box-shadow: inset 0 0 0 1px var(--magenta-400);
}

.package--blue {
    background: linear-gradient(90deg, rgba(139, 23, 255, 0.24), rgba(52, 16, 119, 0.45));
    box-shadow: inset 0 0 0 1px var(--gold-400);
}

.package--purple {
    background: linear-gradient(90deg, rgba(139, 23, 255, 0.45), rgba(52, 16, 119, 0.45));
    box-shadow: inset 0 0 0 1px var(--violet-400);
}

.package--plain {
    background: linear-gradient(90deg, rgba(243, 244, 246, 0.09), rgba(243, 244, 246, 0.04));
    box-shadow: inset 0 0 0 1px rgba(193, 200, 239, 0.25);
}

.package--pink:hover {
    box-shadow: inset 0 0 0 2px var(--magenta-400);
}

.package--blue:hover {
    box-shadow: inset 0 0 0 2px var(--gold-300);
}

.package--purple:hover {
    box-shadow: inset 0 0 0 2px #a66bff;
}

.package--plain:hover {
    box-shadow: inset 0 0 0 2px rgba(193, 200, 239, 0.5);
}

.package__deal {
    top: 0;
    left: 0;
    padding: 2px 10px 2px 24px;
    border-bottom-right-radius: 12px;
    background: linear-gradient(90deg, #d9b8ff, #8b17ff 50%, #6610d3);
    color: var(--ink-plum);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.package__deal span {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--ink-plum);
}

.package__value {
    gap: 8px;
    color: var(--gold-100);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    text-shadow: 0 2px 0 var(--ink-plum);
}

.package__price {
    border-left: 2px dashed rgba(139, 23, 255, 0.35);
}

.package__buy {
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, #d9b8ff, #8b17ff 55%, #6610d3);
    box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 #3f098f;
    color: var(--ink-plum);
    font-family: var(--font-display);
    font-weight: 800;
}

.package__old {
    background: rgba(16, 16, 52, 0.8);
    color: rgba(243, 244, 246, 0.88);
}

.package__old::after {
    background: var(--rose);
}

.store__note {
    color: var(--color-text-soft);
    font-weight: 600;
}

.store__note a {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--gold-300);
    text-decoration: underline;
    text-decoration-color: rgba(190, 131, 255, 0.4);
    text-underline-offset: 2px;
}

/* ---------- Bonus modal ---------- */

.bonus-modal__card {
    padding: 34px 28px 30px;
    border-color: rgba(139, 23, 255, 0.85);
    background:
        radial-gradient(120% 70% at 50% 0%, #46248c 0%, var(--plum-700) 55%, var(--plum-900) 100%);
}

.bonus-modal__card::before {
    inset: 8px;
    z-index: 0;
    border-radius: 22px;
    padding: 8px;
    box-shadow: none;
    opacity: 0.85;
}

.bonus-modal__card > * {
    position: relative;
    z-index: 1;
}

.bonus-modal__badge {
    background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.75), transparent 42%), linear-gradient(180deg, #d9b8ff, #8b17ff 55%, #6610d3);
    box-shadow: 0 0 0 6px rgba(139, 23, 255, 0.2), 0 0 0 9px var(--ink-plum), 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 -6px 12px rgba(63, 9, 143, 0.5);
}

.bonus-modal__rays {
    background: repeating-conic-gradient(from 0deg, rgba(139, 23, 255, 0.32) 0deg 7deg, rgba(67, 191, 255, 0.15) 7deg 10deg, transparent 10deg 20deg);
}

.bonus-modal__kicker {
    padding: 6px 26px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(var(--gold-400), var(--gold-400)) top / 100% 2px no-repeat,
        linear-gradient(var(--gold-500), var(--gold-500)) bottom / 100% 2px no-repeat,
        linear-gradient(180deg, #5723b3, #341077);
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
    color: var(--gold-100);
    font-family: var(--font-display);
    font-weight: 800;
}

.bonus-modal__title {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
}

/* ---------- Scroll reveal (progressive, motion-safe) ---------- */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .benefit,
        .section__title,
        .site-footer__help,
        .site-footer__main,
        .legal__body {
            animation: jr-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}

@keyframes jr-reveal {
    from {
        opacity: 0;
        translate: 0 32px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .signup::before,
    .banner::before,
    .not-found::before,
    .bonus-modal__card::before,
    .drawer::after,
    .signup-bar::before,
    .store .modal__head::after,
    .bonus-modal__rays,
    .bonus-modal__badge {
        animation: none !important;
    }

    .btn--primary::after,
    .signup-bar__button::after {
        display: none;
    }
}

/* nlimcoin: NLC accents with the existing component geometry. */
:root {
    --color-on-primary: #ffffff;
    --color-headline: #f3f4f6;
    --gradient-primary: linear-gradient(180deg, #a347ff 0%, #8b17ff 55%, #7010dd 100%);
    --gradient-gold-text: linear-gradient(180deg, #ffffff 0%, #ede1ff 48%, #be83ff 100%);
}
.site-header__logo img, .site-footer__logo { object-fit: contain; }

@media (max-width: 767px) {
    .site-header {
        padding-top: 38px;
    }
}
.btn--primary,
.signup-bar__button,
.package__buy {
    background: var(--gradient-primary);
    color: var(--color-on-primary);
    text-shadow: 0 1px 2px rgba(16, 16, 52, 0.4);
}