:root {
    --public-primary: #7c3aed;
    --public-primary-light: #9f67ff;
    --public-primary-soft: rgba(124, 58, 237, 0.14);
    --public-primary-border: rgba(159, 103, 255, 0.24);

    --public-bg: #08080c;
    --public-surface: rgba(255, 255, 255, 0.045);
    --public-surface-hover: rgba(255, 255, 255, 0.065);
    --public-border: rgba(255, 255, 255, 0.085);

    --public-text: #f7f5ff;
    --public-muted: rgba(247, 245, 255, 0.58);
    --public-muted-soft: rgba(247, 245, 255, 0.38);

    --public-radius-large: 24px;
    --public-radius: 18px;
    --public-radius-small: 12px;

    --public-container: 1120px;
}


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


html {
    color-scheme: dark;
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    color: var(--public-text);

    background:
        var(--public-bg);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}


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


button,
input,
textarea,
select {
    font: inherit;
}


button {
    color: inherit;
}


img {
    max-width: 100%;
}


::selection {
    color: #fff;
    background:
        rgba(124, 58, 237, 0.65);
}


/* BACKGROUND */


.public-background {
    position: fixed;
    z-index: -1;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(124, 58, 237, 0.16),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #09090e 0%,
            #07070a 100%
        );
}


.public-orb {
    position: absolute;

    border-radius: 999px;

    filter: blur(90px);

    opacity: 0.13;

    background:
        var(--public-primary);
}


.public-orb-one {
    width: 420px;
    height: 420px;

    top: 12%;
    left: -220px;
}


.public-orb-two {
    width: 480px;
    height: 480px;

    top: 42%;
    right: -280px;

    opacity: 0.09;
}


.public-orb-three {
    width: 340px;
    height: 340px;

    bottom: 5%;
    left: 35%;

    opacity: 0.07;
}


/* NAV */


.public-nav-wrap {
    position: sticky;
    z-index: 100;

    top: 0;

    padding:
        14px 16px 0;

    pointer-events: none;
}


.public-nav {
    width:
        min(
            var(--public-container),
            100%
        );

    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin: 0 auto;

    padding:
        0 18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius: 17px;

    background:
        rgba(12, 12, 18, 0.76);

    box-shadow:
        0 18px 60px
        rgba(0, 0, 0, 0.24);

    backdrop-filter:
        blur(18px);

    pointer-events: auto;
}


.public-nav-brand {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    font-size: 17px;
    font-weight: 850;

    letter-spacing:
        -0.055em;
}


.public-nav-brand-accent {
    color:
        var(--public-primary-light);
}


.public-nav-links {
    display: flex;
    align-items: center;

    gap: 4px;
}


.public-nav-link {
    padding:
        9px 12px;

    border-radius: 9px;

    color:
        var(--public-muted);

    font-size: 12px;
    font-weight: 650;

    transition:
        color 0.18s ease,
        background 0.18s ease;
}


.public-nav-link:hover {
    color:
        var(--public-text);

    background:
        rgba(255, 255, 255, 0.055);
}


/* LAYOUT */


.public-shell {
    width:
        min(
            var(--public-container),
            calc(100% - 32px)
        );

    margin: 0 auto;
}


.public-section {
    margin-top: 100px;
}


.public-section-heading {
    max-width: 640px;

    margin-bottom: 28px;
}


.public-section-heading h2 {
    margin:
        8px 0 8px;

    font-size:
        clamp(
            26px,
            4vw,
            38px
        );

    line-height: 1.08;

    letter-spacing:
        -0.045em;
}


.public-section-heading p {
    margin: 0;

    color:
        var(--public-muted);

    font-size: 14px;
    line-height: 1.7;
}


.public-eyebrow {
    display: inline-block;

    color:
        var(--public-primary-light);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.14em;
}


/* HERO */


.public-hero {
    max-width: 780px;

    margin:
        105px auto 0;

    text-align: center;
}


.public-hero-logo {
    display: flex;
    justify-content: center;

    margin-bottom: 24px;
}


.public-hero-logo img {
    width: auto;
    max-width: min(380px, 80vw);
    max-height: 140px;

    object-fit: contain;
}


.public-hero-wordmark {
    margin-bottom: 22px;

    font-size:
        clamp(
            42px,
            10vw,
            76px
        );

    font-weight: 900;

    line-height: 0.95;

    letter-spacing:
        -0.075em;
}


.public-hero-wordmark span {
    color:
        var(--public-primary-light);
}


.public-hero h1 {
    margin:
        0 auto;

    font-size:
        clamp(
            30px,
            5vw,
            48px
        );

    line-height: 1.06;

    letter-spacing:
        -0.055em;
}


.public-hero-subtitle {
    margin:
        16px auto 0;

    color:
        rgba(255, 255, 255, 0.78);

    font-size:
        clamp(
            15px,
            2vw,
            18px
        );

    font-weight: 550;
}


.public-hero-description {
    max-width: 620px;

    margin:
        13px auto 0;

    color:
        var(--public-muted);

    font-size: 14px;
    line-height: 1.75;
}


/* SOCIALS */


.public-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 25px;
}


.public-social-link {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--public-border);

    border-radius: 12px;

    color:
        rgba(255, 255, 255, 0.7);

    background:
        rgba(255, 255, 255, 0.035);

    font-size: 10px;
    font-weight: 800;

    transition:
        transform 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}


.public-social-link:hover {
    transform:
        translateY(-2px);

    color: #fff;

    border-color:
        var(--public-primary-border);

    background:
        var(--public-primary-soft);
}


/* AFFILIATE CODE */


.public-affiliate-code {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    margin-top: 70px;

    padding: 28px;

    overflow: hidden;

    border:
        1px solid
        var(--public-primary-border);

    border-radius:
        var(--public-radius-large);

    background:
        linear-gradient(
            135deg,
            rgba(124, 58, 237, 0.13),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, 0.24);
}


.public-affiliate-code::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -180px;
    left: 20%;

    border-radius: 999px;

    background:
        var(--public-primary);

    filter: blur(100px);

    opacity: 0.16;

    pointer-events: none;
}


.public-affiliate-code h2 {
    position: relative;

    margin:
        7px 0 5px;

    font-size:
        clamp(
            20px,
            3vw,
            27px
        );

    letter-spacing:
        -0.035em;
}


.public-affiliate-code p {
    position: relative;

    margin: 0;

    color:
        var(--public-muted);

    font-size: 12px;
    line-height: 1.6;
}


.public-code-button {
    position: relative;

    min-width: 260px;

    display: grid;
    grid-template-columns:
        1fr auto;
    align-items: center;

    column-gap: 15px;

    padding:
        13px 15px 13px 18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 14px;

    color: #fff;

    background:
        rgba(5, 5, 8, 0.54);

    cursor: pointer;

    text-align: left;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}


.public-code-button:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(159, 103, 255, 0.45);

    background:
        rgba(124, 58, 237, 0.12);
}


.public-code-label {
    grid-column: 1;

    color:
        var(--public-muted-soft);

    font-size: 9px;
    font-weight: 750;

    letter-spacing: 0.1em;
}


.public-code-button strong {
    grid-column: 1;

    margin-top: 2px;

    color:
        var(--public-primary-light);

    font-size: 17px;

    letter-spacing: 0.02em;
}


.public-code-copy-icon {
    grid-column: 2;
    grid-row: 1 / 3;

    color:
        var(--public-muted);

    font-size: 20px;
}


.public-code-button.is-copied {
    border-color:
        rgba(159, 103, 255, 0.65);

    background:
        rgba(124, 58, 237, 0.17);
}


/* OFFERS */


.public-offers {
    display: grid;

    gap: 20px;
}


.public-offer-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        var(--public-border);

    border-radius:
        var(--public-radius-large);

    background:
        rgba(255, 255, 255, 0.035);

    box-shadow:
        0 24px 80px
        rgba(0, 0, 0, 0.18);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}


.public-offer-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(159, 103, 255, 0.22);

    background:
        rgba(255, 255, 255, 0.045);
}


.public-offer-banner {
    display: block;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.02);
}


.public-offer-banner img {
    width: 100%;
    height: auto;

    display: block;

    transition:
        transform 0.35s ease;
}


.public-offer-card:hover
.public-offer-banner img {
    transform:
        scale(1.006);
}


.public-offer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    padding: 20px;
}


.public-offer-copy {
    min-width: 0;
}


.public-offer-copy h3 {
    margin: 0;

    font-size: 18px;

    letter-spacing:
        -0.025em;
}


.public-offer-copy p {
    max-width: 720px;

    margin:
        7px 0 0;

    color:
        var(--public-muted);

    font-size: 12px;
    line-height: 1.65;
}


.public-offer-badge {
    position: absolute;
    z-index: 5;

    top: 13px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 999px;

    color: #fff;

    background:
        rgba(9, 9, 14, 0.78);

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.24);

    backdrop-filter:
        blur(12px);

    font-size: 10px;
    font-weight: 750;
}


.public-offer-badge-left {
    left: 13px;
}


.public-offer-badge-right {
    right: 13px;
}


/* BUTTONS */


.public-button {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    flex: 0 0 auto;

    padding:
        0 17px;

    border:
        1px solid
        transparent;

    border-radius: 12px;

    font-size: 12px;
    font-weight: 750;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


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


.public-button-primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--public-primary),
            var(--public-primary-light)
        );

    box-shadow:
        0 10px 30px
        rgba(124, 58, 237, 0.2);
}


.public-button-primary:hover {
    box-shadow:
        0 13px 35px
        rgba(124, 58, 237, 0.3);
}


/* DISCORD */


.public-discord {
    position: relative;

    min-height: 190px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    margin-top: 90px;

    padding: 32px;

    overflow: hidden;

    border:
        1px solid
        var(--public-primary-border);

    border-radius:
        var(--public-radius-large);

    background:
        linear-gradient(
            120deg,
            rgba(124, 58, 237, 0.18),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.22);
}


.public-discord-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    top: -190px;
    right: 10%;

    border-radius: 999px;

    background:
        var(--public-primary);

    filter: blur(90px);

    opacity: 0.18;

    pointer-events: none;
}


.public-discord-content {
    position: relative;

    display: flex;
    align-items: center;

    gap: 22px;
}


.public-discord-icon {
    width: 66px;
    height: 66px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 18px;

    color: #fff;

    background:
        rgba(124, 58, 237, 0.2);
}


.public-discord-icon svg {
    width: 33px;
    height: 33px;
}


.public-discord-copy h2 {
    margin:
        6px 0 7px;

    font-size:
        clamp(
            23px,
            3.5vw,
            34px
        );

    letter-spacing:
        -0.045em;
}


.public-discord-copy p {
    max-width: 600px;

    margin: 0;

    color:
        var(--public-muted);

    font-size: 13px;
    line-height: 1.65;
}


.public-button-discord {
    position: relative;

    min-width: 165px;

    color: #fff;

    background:
        var(--public-primary);

    box-shadow:
        0 12px 34px
        rgba(124, 58, 237, 0.24);
}

/* VIDEO CAROUSEL */


.public-video-carousel {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    cursor: grab;

    scrollbar-width: none;

    -ms-overflow-style: none;

    touch-action: pan-y;

    user-select: none;

    -webkit-user-select: none;

    overscroll-behavior-x: contain;
}


.public-video-carousel::-webkit-scrollbar {
    display: none;
}


.public-video-carousel.is-dragging {
    cursor: grabbing;
}


.public-video-track {
    width: max-content;

    display: flex;
    align-items: stretch;

    gap: 18px;

    padding:
        2px 2px 12px;
}


.public-video-card {
    width: 330px;

    display: block;

    flex:
        0 0 330px;

    overflow: hidden;

    border:
        1px solid
        var(--public-border);

    border-radius:
        var(--public-radius);

    background:
        rgba(255, 255, 255, 0.03);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.18);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.public-video-card:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--public-primary-border);

    background:
        rgba(255, 255, 255, 0.045);
}



.public-video-thumbnail {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #050507;
}


.public-video-thumbnail img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    pointer-events: none;

    transition:
        transform 0.3s ease;
}


.public-video-card:hover
.public-video-thumbnail img {
    transform:
        scale(1.015);
}


.public-video-play {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 999px;

    color: #fff;

    background:
        rgba(7, 7, 10, 0.68);

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.32);

    backdrop-filter:
        blur(10px);

    pointer-events: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.public-video-play svg {
    width: 20px;
    height: 20px;

    display: block;

    margin-left: 2px;
}


.public-video-card:hover
.public-video-play {
    transform:
        translate(-50%, -50%)
        scale(1.06);

    background:
        var(--public-primary);
}


.public-video-content {
    padding:
        14px 15px 15px;
}


.public-video-content h3 {
    display: -webkit-box;

    min-height: 38px;

    margin: 0;

    overflow: hidden;

    color:
        var(--public-text);

    font-size: 13px;
    font-weight: 700;

    line-height: 1.45;

    letter-spacing:
        -0.015em;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.public-video-content span {
    display: block;

    margin-top: 8px;

    overflow: hidden;

    color:
        var(--public-muted-soft);

    font-size: 10px;
    font-weight: 600;

    text-overflow: ellipsis;

    white-space: nowrap;
}

/* VIDEO PLACEHOLDER */


.public-video-placeholder-card {
    min-height: 170px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    border:
        1px dashed
        rgba(255, 255, 255, 0.1);

    border-radius:
        var(--public-radius-large);

    color:
        var(--public-muted-soft);

    background:
        rgba(255, 255, 255, 0.018);

    font-size: 12px;

    text-align: center;
}


/* FAQ */


.public-faq {
    display: grid;

    gap: 10px;
}


.public-faq-item {
    overflow: hidden;

    border:
        1px solid
        var(--public-border);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.028);

    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}


.public-faq-item:hover,
.public-faq-item.is-open {
    border-color:
        rgba(159, 103, 255, 0.2);

    background:
        rgba(255, 255, 255, 0.04);
}


.public-faq-question {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        19px 20px;

    border: 0;

    color:
        var(--public-text);

    background:
        transparent;

    cursor: pointer;

    text-align: left;

    font-size: 13px;
    font-weight: 700;
}


.public-faq-plus {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border:
        1px solid
        var(--public-border);

    border-radius: 9px;

    color:
        var(--public-primary-light);

    background:
        rgba(255, 255, 255, 0.025);

    font-size: 17px;

    transition:
        transform 0.2s ease;
}


.public-faq-item.is-open
.public-faq-plus {
    transform:
        rotate(45deg);
}


.public-faq-answer {
    padding:
        0 20px 20px;
}


.public-faq-answer-inner {
    max-width: 850px;

    color:
        var(--public-muted);

    font-size: 13px;
    line-height: 1.75;
}


.public-faq-answer-inner
:first-child {
    margin-top: 0;
}


.public-faq-answer-inner
:last-child {
    margin-bottom: 0;
}


/* EMPTY */


.public-empty {
    padding:
        55px 25px;

    border:
        1px solid
        var(--public-border);

    border-radius:
        var(--public-radius-large);

    color:
        var(--public-muted-soft);

    background:
        rgba(255, 255, 255, 0.02);

    text-align: center;

    font-size: 13px;
}


/* FOOTER */


.public-footer {
    margin-top: 110px;

    padding:
        30px 0 40px;

    border-top:
        1px solid
        var(--public-border);
}


.public-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.public-footer-brand {
    font-size: 17px;
    font-weight: 850;

    letter-spacing:
        -0.055em;
}


.public-footer-brand span {
    color:
        var(--public-primary-light);
}


.public-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;
}


.public-footer-links a {
    color:
        var(--public-muted);

    font-size: 11px;
    font-weight: 600;

    transition:
        color 0.18s ease;
}


.public-footer-links a:hover {
    color:
        var(--public-text);
}


.public-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 25px;

    color:
        var(--public-muted-soft);

    font-size: 10px;
}


.public-footer-bottom p {
    margin: 0;
}


/* TOAST */


.public-toast-container {
    position: fixed;
    z-index: 1000;

    right: 18px;
    bottom: 18px;

    width:
        min(
            380px,
            calc(100% - 36px)
        );

    display: grid;

    gap: 9px;

    pointer-events: none;
}


.public-toast {
    transform:
        translateY(8px);

    padding:
        14px 16px;

    border:
        1px solid
        var(--public-primary-border);

    border-radius: 13px;

    color:
        rgba(255, 255, 255, 0.9);

    background:
        rgba(16, 14, 24, 0.94);

    box-shadow:
        0 18px 55px
        rgba(0, 0, 0, 0.35);

    backdrop-filter:
        blur(18px);

    opacity: 0;

    font-size: 11px;
    line-height: 1.55;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.public-toast.is-visible {
    transform:
        translateY(0);

    opacity: 1;
}


/* REVEALS */


.public-reveal {
    transform:
        translateY(12px);

    opacity: 0;

    transition:
        transform 0.48s ease,
        opacity 0.48s ease;
}


.public-reveal.is-revealed {
    transform:
        translateY(0);

    opacity: 1;
}


/* RESPONSIVE */


@media (max-width: 760px) {

    .public-nav-wrap {
        padding:
            10px 10px 0;

        .public-video-track {
        gap: 12px;
    }


    .public-video-card {
        width:
            min(
                82vw,
                310px
            );

        flex:
            0 0
            min(
                82vw,
                310px
            );
    }


    .public-video-play {
        width: 42px;
        height: 42px;
    }


    .public-video-play svg {
        width: 18px;
        height: 18px;
    }
    }


    .public-nav {
        min-height: 56px;

        padding:
            0 13px;

        gap: 12px;

        border-radius: 14px;
    }


    .public-nav-brand {
        font-size: 14px;
    }


    .public-nav-links {
        gap: 0;
    }


    .public-nav-link {
        padding:
            8px 7px;

        font-size: 10px;
    }


    .public-shell {
        width:
            calc(100% - 22px);
    }


    .public-hero {
        margin-top: 70px;
    }


    .public-affiliate-code {
        align-items: stretch;
        flex-direction: column;

        gap: 20px;

        margin-top: 50px;

        padding: 22px;
    }


    .public-code-button {
        width: 100%;
        min-width: 0;
    }


    .public-section {
        margin-top: 75px;
    }


    .public-offer-content {
        align-items: stretch;
        flex-direction: column;

        gap: 16px;

        padding: 17px;
    }


    .public-offer-button {
        width: 100%;
    }


    .public-discord {
        align-items: stretch;
        flex-direction: column;

        gap: 25px;

        margin-top: 75px;

        padding: 24px;
    }


    .public-discord-content {
        align-items: flex-start;
    }


    .public-button-discord {
        width: 100%;
    }


    .public-footer-top,
    .public-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 520px) {

    .public-nav-brand {
        font-size: 12px;
    }


    .public-nav-link {
        padding:
            8px 5px;

        font-size: 9px;
    }


    .public-hero-wordmark {
        font-size:
            clamp(
                38px,
                15vw,
                60px
            );
    }


    .public-discord-content {
        flex-direction: column;
    }


    .public-discord-icon {
        width: 54px;
        height: 54px;

        border-radius: 15px;
    }


    .public-discord-icon svg {
        width: 28px;
        height: 28px;
    }


    .public-section-heading {
        margin-bottom: 22px;
    }

}


@media (
    prefers-reduced-motion:
    reduce
) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }


    .public-reveal {
        transform: none;
        opacity: 1;
    }

}

/* =========================================================
   
/* =========================================================
   LUCKYWHEEL
   Premium public experience
   ========================================================= */

.luckywheel-page {
    --lw-purple: #8b5cf6;
    --lw-purple-bright: #a855f7;
    --lw-purple-soft: #c4b5fd;
    --lw-gold: #facc15;
    --lw-green: #22c55e;
    --lw-surface: rgba(14, 11, 24, .76);
    --lw-border: rgba(255, 255, 255, .085);

    position: relative;
    z-index: 1;

    width:
        min(
            1240px,
            calc(100% - 40px)
        );

    margin: 0 auto;

    padding:
        clamp(54px, 7vw, 96px)
        0
        100px;
}


/* ---------- AMBIANCE ---------- */

.luckywheel-page::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -120px;
    left: 50%;

    width: min(1100px, 100vw);
    height: 720px;

    transform: translateX(-50%);

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(124, 58, 237, .14),
            rgba(124, 58, 237, .045) 38%,
            transparent 69%
        );

    filter: blur(4px);
}


/* ---------- HERO ---------- */

.luckywheel-heading {
    position: relative;

    max-width: 760px;

    margin:
        0 auto
        clamp(42px, 5vw, 64px);

    text-align: center;
}

.luckywheel-eyebrow {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 29px;

    padding: 0 13px;

    border:
        1px solid
        rgba(167, 139, 250, .17);

    border-radius: 999px;

    color: #c4b5fd;

    background:
        rgba(139, 92, 246, .075);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .035);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.luckywheel-heading h1 {
    margin:
        17px 0
        15px;

    color: #fff;

    font-size:
        clamp(
            46px,
            6vw,
            76px
        );

    font-weight: 850;

    line-height: .96;

    letter-spacing: -.055em;

    text-shadow:
        0 4px 32px
        rgba(139, 92, 246, .12);
}

.luckywheel-heading h1::after {
    content: ".";

    color: #9b6df8;
}

.luckywheel-heading p {
    max-width: 590px;

    margin: 0 auto;

    color:
        rgba(
            235,
            232,
            244,
            .61
        );

    font-size: 15px;

    line-height: 1.72;
}


/* ---------- MAIN GRID ---------- */

.luckywheel-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(350px, .85fr);

    gap:
        clamp(
            42px,
            6vw,
            82px
        );

    align-items: center;
}


/* ---------- WHEEL AREA ---------- */

.luckywheel-stage-column {
    position: relative;

    min-width: 0;
}

.luckywheel-stage-column::before {
    content: "";

    position: absolute;

    z-index: -1;

    top: 50%;
    left: 50%;

    width: 78%;
    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    pointer-events: none;

    background:
        rgba(109, 40, 217, .12);

    filter: blur(80px);
}

.luckywheel-stage {
    position: relative;

    width:
        min(
            100%,
            660px
        );

    margin: 0 auto;

    opacity: 0;

    transform:
        translateY(14px)
        scale(.975);

    transition:
        opacity .65s ease,
        transform .75s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}

.luckywheel-stage.is-ready {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.luckywheel-stage::before {
    content: "";

    position: absolute;

    z-index: -2;

    inset: 5%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(168, 85, 247, .16),
            rgba(109, 40, 217, .05) 48%,
            transparent 72%
        );

    filter: blur(38px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.luckywheel-stage.is-spinning::before {
    opacity: 1;

    transform: scale(1.08);
}

.luckywheel-stage.has-landed::before {
    background:
        radial-gradient(
            circle,
            rgba(250, 204, 21, .18),
            rgba(168, 85, 247, .08) 46%,
            transparent 72%
        );

    transform: scale(1.11);
}


/* ---------- WHEEL ---------- */

.luckywheel-shell {
    position: relative;

    width: 100%;

    aspect-ratio: 1;

    border-radius: 50%;

    filter:
        drop-shadow(
            0 30px 55px
            rgba(0, 0, 0, .36)
        );
}

.luckywheel-canvas {
    display: block;

    width: 100%;
    height: 100%;

    transform: translateZ(0);
}


/* ---------- POINTER ---------- */

.luckywheel-pointer {
    position: absolute;

    z-index: 12;

    top: -3px;
    left: 50%;

    width: 46px;
    height: 59px;

    transform:
        translateX(-50%);

    pointer-events: none;

    filter:
        drop-shadow(
            0 7px 10px
            rgba(0, 0, 0, .55)
        );
}

.luckywheel-pointer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 36px;
    height: 36px;

    transform:
        translateX(-50%)
        rotate(45deg);

    border:
        3px solid
        rgba(255, 255, 255, .78);

    border-radius:
        10px 10px 4px 10px;

    background:
        linear-gradient(
            135deg,
            #f7f4ff,
            #c4b5fd 48%,
            #8b5cf6
        );

    box-shadow:
        inset 0 2px 4px
        rgba(255, 255, 255, .85),
        0 0 20px
        rgba(139, 92, 246, .42);
}

.luckywheel-pointer::after {
    content: "";

    position: absolute;

    top: 25px;
    left: 50%;

    width: 18px;
    height: 28px;

    transform:
        translateX(-50%);

    clip-path:
        polygon(
            0 0,
            100% 0,
            50% 100%
        );

    background:
        linear-gradient(
            to bottom,
            #c4b5fd,
            #ffffff
        );
}

.luckywheel-stage.is-spinning
.luckywheel-pointer {
    animation:
        luckywheelPointer
        .115s
        ease-in-out
        infinite alternate;
}

.luckywheel-stage.has-landed
.luckywheel-pointer {
    animation:
        luckywheelPointerLand
        .55s
        cubic-bezier(
            .34,
            1.56,
            .64,
            1
        );
}


/* ---------- CENTER HUB ---------- */

.luckywheel-center {
    position: absolute;

    z-index: 8;

    top: 50%;
    left: 50%;

    display: grid;

    place-items: center;

    width:
        clamp(
            76px,
            14%,
            98px
        );

    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    border:
        4px solid
        rgba(239, 232, 255, .86);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 25%,
            #d8b4fe 0%,
            #8b5cf6 30%,
            #5b21b6 66%,
            #2e1065 100%
        );

    box-shadow:
        inset 0 3px 8px
        rgba(255, 255, 255, .32),
        inset 0 -9px 16px
        rgba(30, 10, 60, .42),
        0 8px 28px
        rgba(0, 0, 0, .5),
        0 0 28px
        rgba(139, 92, 246, .42);

    pointer-events: none;
}

.luckywheel-center::before {
    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    border-radius: inherit;
}

.luckywheel-center span {
    position: relative;

    color: #fff;

    font-size:
        clamp(
            30px,
            5vw,
            42px
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -.08em;

    text-shadow:
        0 4px 12px
        rgba(0, 0, 0, .35);
}


/* ---------- CAPTION ---------- */

.luckywheel-wheel-caption {
    display: flex;

    justify-content: center;

    margin-top: 15px;

    color:
        rgba(
            224,
            220,
            234,
            .43
        );

    font-size: 11px;

    text-align: center;
}

.luckywheel-wheel-caption span {
    display: inline-flex;

    align-items: center;

    gap: 7px;
}

.luckywheel-wheel-caption span::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(
            167,
            139,
            250,
            .65
        );

    box-shadow:
        0 0 7px
        rgba(139, 92, 246, .55);
}


/* ---------- CONTROL CARD ---------- */

.luckywheel-control-column {
    position: relative;
}

.luckywheel-control-card {
    position: relative;

    overflow: hidden;

    padding:
        clamp(
            25px,
            3vw,
            34px
        );

    border:
        1px solid
        rgba(255, 255, 255, .085);

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(24, 19, 38, .82),
            rgba(11, 9, 18, .82)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .035),
        0 30px 80px
        rgba(0, 0, 0, .26);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}

.luckywheel-control-card::before {
    content: "";

    position: absolute;

    top: -140px;
    right: -120px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    pointer-events: none;

    background:
        rgba(124, 58, 237, .11);

    filter: blur(65px);
}

.luckywheel-control-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 14%;

    width: 72%;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(196, 181, 253, .28),
            transparent
        );
}


/* ---------- CONTROL HEADER ---------- */

.luckywheel-control-heading {
    position: relative;

    margin-bottom: 26px;
}

.luckywheel-control-heading > span {
    color:
        rgba(
            196,
            181,
            253,
            .72
        );

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .19em;
}

.luckywheel-control-heading h2 {
    margin:
        7px 0
        8px;

    color: #fff;

    font-size:
        clamp(
            27px,
            3vw,
            34px
        );

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -.035em;
}

.luckywheel-control-heading p {
    max-width: 390px;

    margin: 0;

    color:
        rgba(
            225,
            221,
            234,
            .52
        );

    font-size: 12px;

    line-height: 1.62;
}


/* ---------- FORM ---------- */

.luckywheel-form {
    position: relative;

    display: grid;

    gap: 15px;
}

.luckywheel-field {
    display: grid;

    gap: 7px;
}

.luckywheel-field > span {
    padding-left: 2px;

    color:
        rgba(
            238,
            235,
            244,
            .72
        );

    font-size: 11px;

    font-weight: 700;
}

.luckywheel-field input {
    width: 100%;

    box-sizing: border-box;

    min-height: 52px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(255, 255, 255, .085);

    border-radius: 13px;

    outline: none;

    color: #f7f5fb;

    background:
        rgba(255, 255, 255, .035);

    box-shadow:
        inset 0 1px 1px
        rgba(255, 255, 255, .015);

    font: inherit;

    font-size: 13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.luckywheel-field input::placeholder {
    color:
        rgba(
            235,
            232,
            242,
            .27
        );
}

.luckywheel-field input:hover {
    border-color:
        rgba(
            255,
            255,
            255,
            .13
        );

    background:
        rgba(
            255,
            255,
            255,
            .045
        );
}

.luckywheel-field input:focus {
    border-color:
        rgba(
            167,
            139,
            250,
            .52
        );

    background:
        rgba(
            139,
            92,
            246,
            .045
        );

    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, .09);
}

.luckywheel-field input:disabled {
    opacity: .62;
}


/* ---------- SPIN BUTTON ---------- */

.luckywheel-spin-button {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    min-height: 56px;

    margin-top: 5px;

    padding: 0 22px;

    border:
        1px solid
        rgba(216, 180, 254, .26);

    border-radius: 14px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #9b6df8 0%,
            #7c3aed 48%,
            #6d28d9 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .18),
        0 12px 30px
        rgba(91, 33, 182, .24);

    font: inherit;

    font-size: 13px;

    font-weight: 850;

    letter-spacing: .01em;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease,
        opacity .2s ease;
}

.luckywheel-spin-button::before {
    content: "";

    position: absolute;

    z-index: -1;

    top: -100%;
    left: -40%;

    width: 30%;
    height: 300%;

    transform:
        rotate(24deg);

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, .23),
            transparent
        );

    transition:
        left .65s ease;
}

.luckywheel-spin-button:hover:not(:disabled) {
    transform:
        translateY(-2px);

    filter: brightness(1.07);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .22),
        0 16px 36px
        rgba(91, 33, 182, .34);
}

.luckywheel-spin-button:hover:not(:disabled)::before {
    left: 120%;
}

.luckywheel-spin-button:active:not(:disabled) {
    transform:
        translateY(0)
        scale(.992);
}

.luckywheel-spin-button:disabled {
    cursor: not-allowed;

    opacity: .5;

    filter: saturate(.7);
}

.luckywheel-spin-button.is-spinning {
    opacity: .78;
}


/* ---------- STATUS ---------- */

.luckywheel-status {
    position: relative;

    margin-top: 14px;

    padding:
        11px 13px;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius: 11px;

    color:
        rgba(
            238,
            235,
            245,
            .7
        );

    background:
        rgba(
            255,
            255,
            255,
            .025
        );

    font-size: 11px;

    line-height: 1.5;
}

.luckywheel-status[data-type="error"] {
    border-color:
        rgba(
            248,
            113,
            113,
            .14
        );

    color:
        rgba(
            254,
            202,
            202,
            .84
        );

    background:
        rgba(
            239,
            68,
            68,
            .07
        );
}

.luckywheel-status[data-type="success"] {
    border-color:
        rgba(
            74,
            222,
            128,
            .13
        );

    color:
        rgba(
            187,
            247,
            208,
            .84
        );

    background:
        rgba(
            34,
            197,
            94,
            .07
        );
}

.luckywheel-status[data-type="cooldown"] {
    border-color:
        rgba(
            167,
            139,
            250,
            .14
        );

    color:
        rgba(
            221,
            214,
            254,
            .82
        );

    background:
        rgba(
            139,
            92,
            246,
            .07
        );
}


/* ---------- RESULT ---------- */

.luckywheel-result {
    position: relative;

    overflow: hidden;

    margin-top: 18px;

    padding:
        25px 21px
        21px;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius: 18px;

    text-align: center;

    background:
        rgba(
            255,
            255,
            255,
            .025
        );

    opacity: 0;

    transform:
        translateY(9px)
        scale(.985);

    transition:
        opacity .4s ease,
        transform .55s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}

.luckywheel-result.is-revealed {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.luckywheel-result.is-winner {
    border-color:
        rgba(
            250,
            204,
            21,
            .19
        );

    background:
        linear-gradient(
            145deg,
            rgba(250, 204, 21, .07),
            rgba(139, 92, 246, .055)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .04),
        0 15px 40px
        rgba(0, 0, 0, .12);
}

.luckywheel-result.is-winner::before {
    content: "";

    position: absolute;

    top: -80px;
    left: 50%;

    width: 220px;
    height: 160px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(
            250,
            204,
            21,
            .09
        );

    filter: blur(45px);
}

.luckywheel-result-icon {
    position: relative;

    display: grid;

    place-items: center;

    width: 50px;
    height: 50px;

    margin:
        0 auto
        12px;

    border:
        1px solid
        rgba(255, 255, 255, .1);

    border-radius: 50%;

    color:
        rgba(
            237,
            233,
            245,
            .75
        );

    background:
        rgba(
            255,
            255,
            255,
            .045
        );

    font-size: 21px;
}

.luckywheel-result.is-winner
.luckywheel-result-icon {
    border-color:
        rgba(
            250,
            204,
            21,
            .28
        );

    color: #fde68a;

    background:
        rgba(
            250,
            204,
            21,
            .085
        );

    box-shadow:
        0 0 24px
        rgba(250, 204, 21, .08);
}

.luckywheel-result-kicker {
    position: relative;

    color:
        rgba(
            196,
            181,
            253,
            .62
        );

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .18em;
}

.luckywheel-result.is-winner
.luckywheel-result-kicker {
    color:
        rgba(
            253,
            230,
            138,
            .72
        );
}

.luckywheel-result h3 {
    position: relative;

    margin:
        7px 0
        8px;

    color: #fff;

    font-size: 25px;

    font-weight: 850;

    line-height: 1.1;

    letter-spacing: -.035em;
}

.luckywheel-result p {
    position: relative;

    max-width: 390px;

    margin: 0 auto;

    color:
        rgba(
            231,
            228,
            238,
            .56
        );

    font-size: 11px;

    line-height: 1.58;
}


/* ---------- RESULT CTA ---------- */

.luckywheel-result-actions {
    position: relative;

    display: grid;

    gap: 8px;

    margin-top: 18px;
}

.luckywheel-action-primary,
.luckywheel-action-secondary {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 45px;

    padding:
        0 15px;

    border-radius: 11px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.luckywheel-action-primary {
    border:
        1px solid
        rgba(196, 181, 253, .18);

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #6d28d9
        );

    box-shadow:
        0 10px 25px
        rgba(91, 33, 182, .18);
}

.luckywheel-action-secondary {
    border:
        1px solid
        rgba(255, 255, 255, .075);

    color:
        rgba(
            241,
            238,
            246,
            .72
        );

    background:
        rgba(
            255,
            255,
            255,
            .025
        );
}

.luckywheel-action-primary:hover,
.luckywheel-action-secondary:hover {
    transform:
        translateY(-1px);
}

.luckywheel-action-secondary:hover {
    border-color:
        rgba(
            255,
            255,
            255,
            .13
        );

    background:
        rgba(
            255,
            255,
            255,
            .045
        );
}


/* ---------- RULES ---------- */

.luckywheel-rules {
    position: relative;

    margin-top: 21px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(255, 255, 255, .055);

    color:
        rgba(
            224,
            220,
            232,
            .36
        );

    font-size: 9.5px;

    line-height: 1.55;
}

.luckywheel-rules p {
    margin:
        3px 0;
}


/* ---------- LIVE ---------- */

.luckywheel-live {
    margin-top:
        clamp(
            70px,
            9vw,
            110px
        );
}

.luckywheel-section-heading {
    display: flex;

    align-items: end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.luckywheel-section-heading > div > span {
    color:
        rgba(
            196,
            181,
            253,
            .54
        );

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .19em;
}

.luckywheel-section-heading h2 {
    margin:
        5px 0
        0;

    color: #fff;

    font-size:
        clamp(
            25px,
            3vw,
            32px
        );

    font-weight: 800;

    letter-spacing: -.035em;
}

.luckywheel-live-indicator {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        6px 10px;

    border:
        1px solid
        rgba(34, 197, 94, .11);

    border-radius: 999px;

    color:
        rgba(
            187,
            247,
            208,
            .58
        );

    background:
        rgba(
            34,
            197,
            94,
            .035
        );

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .09em;
}

.luckywheel-live-indicator i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 8px
        rgba(34, 197, 94, .72);

    animation:
        luckywheelLivePulse
        1.8s ease-in-out
        infinite;
}

.luckywheel-live-list {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 10px;
}

.luckywheel-live-item {
    position: relative;

    display: flex;

    align-items: center;

    min-width: 0;

    gap: 11px;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .032),
            rgba(255, 255, 255, .016)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .018);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.luckywheel-live-item:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            167,
            139,
            250,
            .12
        );

    background:
        rgba(
            139,
            92,
            246,
            .035
        );
}

.luckywheel-live-avatar {
    flex:
        0 0 36px;

    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    border:
        1px solid
        rgba(196, 181, 253, .1);

    border-radius: 11px;

    color:
        rgba(
            221,
            214,
            254,
            .8
        );

    background:
        linear-gradient(
            145deg,
            rgba(139, 92, 246, .15),
            rgba(76, 29, 149, .09)
        );

    font-size: 11px;

    font-weight: 900;
}

.luckywheel-live-copy {
    display: grid;

    flex: 1;

    min-width: 0;

    gap: 2px;
}

.luckywheel-live-copy strong,
.luckywheel-live-copy span {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.luckywheel-live-copy strong {
    color:
        rgba(
            246,
            244,
            249,
            .8
        );

    font-size: 11px;

    font-weight: 750;
}

.luckywheel-live-copy span {
    color:
        rgba(
            224,
            220,
            231,
            .4
        );

    font-size: 9px;
}

.luckywheel-live-win,
.luckywheel-live-neutral {
    flex: 0 0 auto;

    padding:
        4px 6px;

    border-radius: 6px;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .08em;
}

.luckywheel-live-win {
    color:
        rgba(
            253,
            230,
            138,
            .8
        );

    background:
        rgba(
            250,
            204,
            21,
            .055
        );
}

.luckywheel-live-neutral {
    color:
        rgba(
            221,
            214,
            254,
            .38
        );

    background:
        rgba(
            139,
            92,
            246,
            .035
        );
}


/* ---------- EMPTY / DISABLED ---------- */

.luckywheel-live-empty,
.luckywheel-unavailable {
    padding:
        38px 25px;

    border:
        1px solid
        rgba(255, 255, 255, .065);

    border-radius: 19px;

    color:
        rgba(
            229,
            226,
            236,
            .5
        );

    text-align: center;

    background:
        rgba(
            255,
            255,
            255,
            .022
        );
}

.luckywheel-live-empty span {
    display: block;

    margin-bottom: 7px;

    color:
        rgba(
            167,
            139,
            250,
            .5
        );

    font-size: 18px;
}

.luckywheel-unavailable {
    max-width: 650px;

    margin:
        0 auto;
}

.luckywheel-unavailable h2 {
    margin:
        0 0 7px;

    color: #fff;

    font-size: 24px;
}

.luckywheel-unavailable p {
    margin: 0;

    font-size: 12px;

    opacity: .58;
}


/* ---------- ANIMATIONS ---------- */

@keyframes luckywheelPointer {
    from {
        transform:
            translateX(-50%)
            rotate(-4deg);
    }

    to {
        transform:
            translateX(-50%)
            rotate(4deg);
    }
}

@keyframes luckywheelPointerLand {
    0% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    35% {
        transform:
            translateX(-50%)
            translateY(7px)
            scale(.94);
    }

    70% {
        transform:
            translateX(-50%)
            translateY(-3px)
            scale(1.03);
    }

    100% {
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}

@keyframes luckywheelLivePulse {
    0%,
    100% {
        opacity: .45;

        transform:
            scale(.9);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.12);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .luckywheel-page {
        width:
            min(
                100% - 30px,
                760px
            );

        padding-top: 58px;
    }

    .luckywheel-heading {
        margin-bottom: 42px;
    }

    .luckywheel-layout {
        grid-template-columns:
            1fr;

        gap: 42px;
    }

    .luckywheel-stage {
        width:
            min(
                100%,
                590px
            );
    }

    .luckywheel-control-column {
        width:
            min(
                100%,
                570px
            );

        margin:
            0 auto;
    }

    .luckywheel-live-list {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .luckywheel-page {
        width:
            calc(100% - 20px);

        padding:
            36px 0
            68px;
    }


    /* Hero plus compact */

    .luckywheel-heading {
        margin-bottom: 27px;

        padding:
            0 8px;
    }

    .luckywheel-eyebrow {
        min-height: 26px;

        padding:
            0 10px;

        font-size: 8px;
    }

    .luckywheel-heading h1 {
        margin:
            13px 0
            11px;

        font-size:
            clamp(
                39px,
                13vw,
                54px
            );

        line-height: .98;
    }

    .luckywheel-heading p {
        max-width: 360px;

        font-size: 12px;

        line-height: 1.6;
    }


    /* Roue en premier */

    .luckywheel-layout {
        gap: 29px;
    }

    .luckywheel-stage {
        width:
            min(
                100%,
                440px
            );
    }

    .luckywheel-stage-column::before {
        width: 90%;

        filter: blur(55px);
    }

    .luckywheel-pointer {
        top: 0;

        width: 34px;
        height: 44px;
    }

    .luckywheel-pointer::before {
        width: 27px;
        height: 27px;

        border-width: 2px;

        border-radius:
            8px 8px 3px 8px;
    }

    .luckywheel-pointer::after {
        top: 19px;

        width: 13px;
        height: 21px;
    }

    .luckywheel-center {
        width:
            clamp(
                58px,
                18vw,
                74px
            );

        border-width: 3px;
    }

    .luckywheel-center span {
        font-size:
            clamp(
                25px,
                8vw,
                31px
            );
    }

    .luckywheel-wheel-caption {
        margin-top: 8px;

        font-size: 9px;
    }


    /* Formulaire */

    .luckywheel-control-column {
        width: 100%;
    }

    .luckywheel-control-card {
        padding:
            22px 17px
            18px;

        border-radius: 20px;
    }

    .luckywheel-control-heading {
        margin-bottom: 21px;
    }

    .luckywheel-control-heading h2 {
        font-size: 27px;
    }

    .luckywheel-control-heading p {
        font-size: 11px;

        line-height: 1.55;
    }

    .luckywheel-field input {
        min-height: 50px;

        font-size: 16px;
    }

    /*
     * 16px volontairement :
     * évite le zoom automatique
     * d'iOS sur les inputs.
     */

    .luckywheel-spin-button {
        min-height: 54px;
    }

    .luckywheel-result {
        padding:
            22px 16px
            17px;
    }

    .luckywheel-result h3 {
        font-size: 23px;
    }


    /* Social proof */

    .luckywheel-live {
        margin-top: 58px;
    }

    .luckywheel-section-heading {
        align-items: center;

        margin-bottom: 15px;
    }

    .luckywheel-section-heading h2 {
        font-size: 25px;
    }

    .luckywheel-live-list {
        grid-template-columns:
            1fr;

        gap: 8px;
    }

    .luckywheel-live-item {
        padding:
            11px 12px;

        border-radius: 12px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .luckywheel-page {
        width:
            calc(100% - 14px);
    }

    .luckywheel-heading h1 {
        font-size: 38px;
    }

    .luckywheel-control-card {
        padding:
            20px 14px
            16px;
    }

    .luckywheel-live-indicator {
        padding:
            5px 7px;
    }
}


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

@media (prefers-reduced-motion: reduce) {

    .luckywheel-stage,
    .luckywheel-result,
    .luckywheel-live-item,
    .luckywheel-spin-button {
        transition-duration: .01ms;
    }

    .luckywheel-live-indicator i {
        animation: none;
    }
}

/* =========================================================
   WAGERRACE - FUNCTIONAL BASE
   Final premium pass comes next
   ========================================================= */

.wagerrace-page {
    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin: 0 auto;

    padding:
        70px 0
        100px;
}

.wagerrace-hero {
    max-width: 820px;

    margin:
        0 auto
        70px;

    text-align: center;
}

.wagerrace-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        7px 12px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 999px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .14em;
}

.wagerrace-live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22c55e;
}

.wagerrace-live-dot.is-ended {
    background:
        rgba(255,255,255,.35);
}

.wagerrace-hero h1 {
    margin:
        18px 0
        12px;

    font-size:
        clamp(
            44px,
            7vw,
            76px
        );

    line-height: 1;

    letter-spacing: -.05em;
}

.wagerrace-hero-text {
    opacity: .62;

    line-height: 1.6;
}

.wagerrace-hero-stats {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 12px;

    max-width: 650px;

    margin:
        30px auto
        0;
}

.wagerrace-hero-stat {
    display: grid;

    gap: 7px;

    padding: 20px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 16px;

    background:
        rgba(255,255,255,.03);
}

.wagerrace-hero-stat span {
    opacity: .48;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .13em;
}

.wagerrace-hero-stat strong {
    font-size: 22px;
}

.wagerrace-section {
    margin-top: 65px;
}

.wagerrace-section-heading {
    display: flex;

    align-items: end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.wagerrace-section-heading span {
    opacity: .48;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .15em;
}

.wagerrace-section-heading h2 {
    margin:
        5px 0
        0;

    font-size: 30px;
}

.wagerrace-podium {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 14px;

    align-items: end;
}

.wagerrace-podium-card {
    padding: 25px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 20px;

    background:
        rgba(255,255,255,.03);
}

.wagerrace-podium-1 {
    min-height: 210px;

    border-color:
        rgba(250,204,21,.2);
}

.wagerrace-podium-rank {
    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    margin-bottom: 20px;

    border-radius: 50%;

    background:
        rgba(139,92,246,.14);

    font-weight: 900;
}

.wagerrace-podium-1
.wagerrace-podium-rank {
    color: #fde68a;

    background:
        rgba(250,204,21,.1);
}

.wagerrace-podium-user {
    overflow: hidden;

    margin-bottom: 18px;

    font-size: 20px;

    font-weight: 800;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.wagerrace-podium-wager,
.wagerrace-podium-prize {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 8px;
}

.wagerrace-podium-wager span,
.wagerrace-podium-prize span {
    opacity: .42;

    font-size: 9px;

    font-weight: 800;
}

.wagerrace-ranking {
    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 20px;

    background:
        rgba(255,255,255,.025);
}

.wagerrace-ranking-head,
.wagerrace-ranking-row {
    display: grid;

    grid-template-columns:
        70px
        minmax(0,1fr)
        180px
        150px;

    align-items: center;

    gap: 15px;
}

.wagerrace-ranking-head {
    padding:
        13px 20px;

    opacity: .45;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;
}

.wagerrace-ranking-row {
    min-height: 64px;

    padding:
        0 20px;

    border-top:
        1px solid
        rgba(255,255,255,.055);
}

.wagerrace-ranking-row.is-top {
    background:
        rgba(139,92,246,.025);
}

.wagerrace-ranking-position {
    font-weight: 900;
}

.wagerrace-ranking-user {
    overflow: hidden;

    font-weight: 700;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.wagerrace-ranking-wager,
.wagerrace-ranking-prize {
    text-align: right;
}

.wagerrace-ranking-prize {
    font-weight: 800;
}

.wagerrace-last-update {
    opacity: .45;

    font-size: 10px;
}

.wagerrace-last-update strong {
    margin-left: 5px;

    color: #c4b5fd;
}

.wagerrace-disclaimer {
    margin-top: 24px;

    opacity: .32;

    font-size: 9px;

    text-align: center;
}

.wagerrace-ranking-empty,
.wagerrace-unavailable {
    padding: 50px 20px;

    text-align: center;
}

.wagerrace-unavailable {
    max-width: 650px;

    margin: 50px auto;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 20px;
}

@media (max-width: 760px) {

    .wagerrace-page {
        width:
            calc(100% - 20px);

        padding:
            45px 0
            70px;
    }

    .wagerrace-hero {
        margin-bottom: 45px;
    }

    .wagerrace-hero-stats {
        grid-template-columns:
            1fr;
    }

    .wagerrace-podium {
        grid-template-columns:
            1fr;
    }

    .wagerrace-podium-1 {
        order: -1;

        min-height: 0;
    }

    .wagerrace-ranking {
        overflow-x: auto;
    }

    .wagerrace-ranking-head,
    .wagerrace-ranking-row {
        min-width: 650px;
    }

    .wagerrace-section-heading {
        align-items: flex-start;

        flex-direction: column;
    }
}
/* WagerRace participating offers */

.wagerrace-offers-section {
    margin-top: 80px;
}

.wagerrace-public-offers {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
    gap: 16px;
}

@media (max-width: 900px) {

    .wagerrace-public-offers {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}

@media (max-width: 600px) {

    .wagerrace-public-offers {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   WAGERRACE PREMIUM
   ========================================================= */

.wagerrace-premium {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 80px;
}

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


/* ---------- COMMON ---------- */

.wr-kicker {
    display: block;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(196, 181, 253, .82);
}

.wr-section {
    margin-top: 76px;
}

.wr-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 24px;
}

.wr-section-header h2 {
    margin: 8px 0 0;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.wr-section-header > p {
    width: min(390px, 100%);
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    text-align: right;
    color: rgba(255, 255, 255, .52);
}


/* ---------- HERO ---------- */

.wr-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 560px;
    display: grid;
    place-items: center;
    padding: 72px 40px 58px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 32px;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(139, 92, 246, .20),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .045),
            rgba(255, 255, 255, .015)
        );
    box-shadow:
        0 35px 100px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .055);
}

.wr-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );
    background-size: 44px 44px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.6),
            transparent 80%
        );
}

.wr-hero-glow {
    position: absolute;
    z-index: -2;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    opacity: .18;
}

.wr-hero-glow-one {
    top: -220px;
    left: -80px;
    background: #8b5cf6;
}

.wr-hero-glow-two {
    right: -180px;
    bottom: -250px;
    background: #a855f7;
}

.wr-hero-content {
    width: min(760px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.wr-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
}

.wr-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.wr-status-live {
    color: #4ade80;
    border-color: rgba(74, 222, 128, .18);
    background: rgba(34, 197, 94, .07);
}

.wr-status-live .wr-status-dot {
    box-shadow:
        0 0 0 4px rgba(74,222,128,.08),
        0 0 14px rgba(74,222,128,.6);
    animation:
        wr-live-pulse 1.8s ease-in-out infinite;
}

.wr-status-upcoming {
    color: #c4b5fd;
}

.wr-status-ended {
    color: rgba(255,255,255,.48);
}

@keyframes wr-live-pulse {
    50% {
        opacity: .45;
    }
}

.wr-hero-heading {
    margin-top: 28px;
}

.wr-hero-heading h1 {
    margin: 10px 0 0;
    font-size: clamp(36px, 6vw, 66px);
    line-height: .98;
    letter-spacing: -.055em;
}

.wr-hero-heading p {
    max-width: 610px;
    margin: 18px auto 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,.56);
}

.wr-prize-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 38px;
}

.wr-prize-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    color: rgba(255,255,255,.42);
}

.wr-prize-value {
    margin-top: 7px;
    font-size: clamp(48px, 8vw, 78px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.06em;
    background:
        linear-gradient(
            180deg,
            #ffffff 15%,
            #ddd6fe 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter:
        drop-shadow(
            0 10px 28px
            rgba(124,58,237,.18)
        );
}

.wr-prize-subtitle {
    margin-top: 9px;
    font-size: 12px;
    color: rgba(255,255,255,.38);
}

.wr-timer-card {
    min-width: min(510px, 100%);
    margin-top: 35px;
    padding: 18px 24px 20px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 18px;
    background: rgba(0,0,0,.14);
    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035);
}

.wr-timer-label {
    display: block;
    margin-bottom: 12px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .18em;
    color: rgba(255,255,255,.38);
}

.wr-countdown {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
}

.wr-time-unit {
    width: 68px;
}

.wr-time-unit strong {
    display: block;
    font-size: 29px;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.wr-time-unit span {
    display: block;
    margin-top: 8px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    color: rgba(255,255,255,.3);
}

.wr-time-separator {
    margin-top: 4px;
    font-size: 22px;
    line-height: 1;
    color: rgba(255,255,255,.2);
}

.wr-ended {
    display: block;
    padding: 5px 0;
    font-size: 25px;
}


/* ---------- PODIUM ---------- */

.wr-podium-section {
    padding-top: 8px;
}

.wr-podium {
    display: grid;
    grid-template-columns:
        minmax(0, .94fr)
        minmax(0, 1.08fr)
        minmax(0, .94fr);
    grid-template-areas:
        "second first third";
    gap: 16px;
    align-items: end;
    padding-top: 34px;
}

.wr-podium-card {
    position: relative;
    min-width: 0;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 34px 22px 24px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 22px;
    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.016)
        );
    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.04);
}

.wr-podium-rank-1 {
    grid-area: first;
    min-height: 292px;
    padding-top: 45px;
    border-color: rgba(250,204,21,.18);
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(250,204,21,.09),
            transparent 50%
        ),
        linear-gradient(
            155deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.016)
        );
    box-shadow:
        0 25px 70px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.wr-podium-rank-2 {
    grid-area: second;
}

.wr-podium-rank-3 {
    grid-area: third;
}

.wr-crown {
    position: absolute;
    top: -31px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 33px;
    line-height: 1;
    color: #fde68a;
    filter:
        drop-shadow(
            0 6px 12px
            rgba(250,204,21,.18)
        );
}

.wr-medal {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.055);
    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08);
}

.wr-podium-rank-1 .wr-medal {
    width: 68px;
    height: 68px;
    border-color: rgba(250,204,21,.28);
    background:
        linear-gradient(
            145deg,
            rgba(250,204,21,.23),
            rgba(161,98,7,.08)
        );
    color: #fde68a;
}

.wr-podium-rank-2 .wr-medal {
    color: #e2e8f0;
    background:
        linear-gradient(
            145deg,
            rgba(226,232,240,.14),
            rgba(100,116,139,.05)
        );
}

.wr-podium-rank-3 .wr-medal {
    color: #fdba74;
    background:
        linear-gradient(
            145deg,
            rgba(251,146,60,.15),
            rgba(154,52,18,.05)
        );
}

.wr-medal-number {
    font-size: 20px;
    font-weight: 900;
}

.wr-player-name {
    width: 100%;
    overflow: hidden;
    margin-top: 17px;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wr-podium-rank-1 .wr-player-name {
    font-size: 21px;
}

.wr-player-wager {
    margin-top: 21px;
    text-align: center;
}

.wr-player-wager span,
.wr-player-prize span {
    display: block;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
    color: rgba(255,255,255,.3);
}

.wr-player-wager strong {
    display: block;
    margin-top: 6px;
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}

.wr-player-prize {
    width: 100%;
    margin-top: auto;
    padding-top: 19px;
    text-align: center;
}

.wr-player-prize::before {
    content: "";
    display: block;
    width: 54px;
    height: 1px;
    margin: 0 auto 15px;
    background: rgba(255,255,255,.07);
}

.wr-player-prize strong {
    display: block;
    margin-top: 5px;
    font-size: 15px;
    color: #c4b5fd;
}


/* ---------- RANKING ---------- */

.wr-ranking-header {
    align-items: center;
}

.wr-sync {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    font-size: 10px;
    color: rgba(255,255,255,.4);
}

.wr-sync strong {
    color: rgba(255,255,255,.7);
}

.wr-sync-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #4ade80;
    box-shadow:
        0 0 9px rgba(74,222,128,.45);
}

.wr-ranking-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );
    box-shadow:
        0 22px 70px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.wr-ranking-head,
.wr-ranking-row {
    display: grid;
    grid-template-columns:
        110px
        minmax(220px,1fr)
        210px
        170px;
    align-items: center;
}

.wr-ranking-head {
    min-height: 50px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
    color: rgba(255,255,255,.3);
}

.wr-ranking-row {
    position: relative;
    min-height: 69px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255,255,255,.052);
    transition:
        background .18s ease,
        transform .18s ease;
}

.wr-ranking-row:last-child {
    border-bottom: 0;
}

.wr-ranking-row:hover {
    background: rgba(255,255,255,.025);
}

.wr-ranking-row.is-top {
    background:
        linear-gradient(
            90deg,
            rgba(139,92,246,.055),
            transparent 60%
        );
}

.wr-ranking-row.is-top-1 {
    background:
        linear-gradient(
            90deg,
            rgba(250,204,21,.055),
            transparent 62%
        );
}

.wr-mini-medal {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
}

.wr-mini-medal-1 {
    color: #fde68a;
    border: 1px solid rgba(250,204,21,.23);
    background: rgba(250,204,21,.09);
}

.wr-mini-medal-2 {
    color: #e2e8f0;
    border: 1px solid rgba(226,232,240,.16);
    background: rgba(226,232,240,.065);
}

.wr-mini-medal-3 {
    color: #fdba74;
    border: 1px solid rgba(251,146,60,.18);
    background: rgba(251,146,60,.07);
}

.wr-normal-rank {
    padding-left: 10px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.34);
}

.wr-name-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wr-player-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    font-size: 11px;
    font-weight: 850;
    color: rgba(255,255,255,.64);
}

.wr-name-cell strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wr-wager-cell,
.wr-gain-cell {
    font-size: 13px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.wr-wager-cell {
    color: rgba(255,255,255,.72);
}

.wr-gain-cell {
    color: rgba(255,255,255,.36);
}

.wr-gain-cell.has-prize {
    font-weight: 750;
    color: #c4b5fd;
}

.wr-ranking-empty {
    display: flex;
    min-height: 230px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.wr-ranking-empty > span {
    font-size: 30px;
}

.wr-ranking-empty strong {
    margin-top: 12px;
    font-size: 16px;
}

.wr-ranking-empty p {
    margin: 6px 0 0;
    font-size: 12px;
    color: rgba(255,255,255,.4);
}


/* ---------- CASINOS ---------- */

.wr-casinos-section {
    margin-top: 82px;
}

.wr-offers {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
    gap: 16px;
}

.wr-offers .public-offer-card {
    min-width: 0;
}


/* ---------- FOOT NOTE ---------- */

.wr-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 54px;
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,.05);
    color: rgba(255,255,255,.3);
}

.wr-footer-note > span {
    font-size: 13px;
}

.wr-footer-note p {
    margin: 0;
    font-size: 10px;
    line-height: 1.5;
}


/* ---------- UNAVAILABLE ---------- */

.wr-unavailable {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(139,92,246,.12),
            transparent 45%
        ),
        rgba(255,255,255,.018);
    text-align: center;
}

.wr-unavailable-icon {
    margin-bottom: 20px;
    font-size: 38px;
}

.wr-unavailable h1 {
    margin: 10px 0 0;
    font-size: clamp(34px,6vw,55px);
    letter-spacing: -.045em;
}

.wr-unavailable p {
    margin: 14px 0 0;
    font-size: 14px;
    color: rgba(255,255,255,.45);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .wagerrace-premium {
        width: min(
            100% - 28px,
            760px
        );
    }

    .wr-hero {
        min-height: auto;
        padding:
            58px
            26px
            45px;
    }

    .wr-podium {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
        gap: 10px;
    }

    .wr-podium-card {
        padding-left: 14px;
        padding-right: 14px;
    }

    .wr-ranking-card {
        overflow-x: auto;
    }

    .wr-ranking-head,
    .wr-ranking-row {
        min-width: 760px;
    }

    .wr-offers {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .wagerrace-premium {
        width: calc(100% - 22px);
        padding-top: 16px;
        padding-bottom: 50px;
    }

    .wr-section {
        margin-top: 54px;
    }

    .wr-section-header {
        display: block;
        margin-bottom: 19px;
    }

    .wr-section-header h2 {
        font-size: 27px;
    }

    .wr-section-header > p {
        width: 100%;
        margin-top: 9px;
        font-size: 12px;
        text-align: left;
    }


    /* HERO MOBILE */

    .wr-hero {
        padding:
            38px
            17px
            28px;
        border-radius: 22px;
    }

    .wr-status {
        min-height: 27px;
        font-size: 9px;
    }

    .wr-hero-heading {
        margin-top: 22px;
    }

    .wr-hero-heading h1 {
        font-size: clamp(
            33px,
            11vw,
            48px
        );
    }

    .wr-hero-heading p {
        margin-top: 13px;
        font-size: 12px;
        line-height: 1.6;
    }

    .wr-prize-block {
        margin-top: 31px;
    }

    .wr-prize-value {
        font-size: clamp(
            47px,
            17vw,
            68px
        );
    }

    .wr-prize-subtitle {
        font-size: 10px;
    }

    .wr-timer-card {
        min-width: 0;
        width: 100%;
        margin-top: 29px;
        padding:
            16px
            9px
            17px;
        border-radius: 15px;
    }

    .wr-countdown {
        gap: 5px;
    }

    .wr-time-unit {
        width: 54px;
    }

    .wr-time-unit strong {
        font-size: 24px;
    }

    .wr-time-unit span {
        margin-top: 6px;
        font-size: 6.5px;
    }

    .wr-time-separator {
        margin-top: 3px;
        font-size: 18px;
    }


    /* PODIUM MOBILE */

    .wr-podium {
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
        grid-template-areas:
            "first first"
            "second third";
        gap: 9px;
        padding-top: 28px;
    }

    .wr-podium-card {
        min-height: 210px;
        padding:
            25px
            12px
            18px;
        border-radius: 17px;
    }

    .wr-podium-rank-1 {
        width: 100%;
        min-height: 235px;
        padding-top: 32px;
    }

    .wr-crown {
        top: -26px;
        font-size: 29px;
    }

    .wr-medal {
        width: 48px;
        height: 48px;
    }

    .wr-podium-rank-1 .wr-medal {
        width: 58px;
        height: 58px;
    }

    .wr-medal-number {
        font-size: 17px;
    }

    .wr-player-name,
    .wr-podium-rank-1
    .wr-player-name {
        margin-top: 13px;
        font-size: 15px;
    }

    .wr-player-wager {
        margin-top: 16px;
    }

    .wr-player-wager strong {
        font-size: 15px;
    }

    .wr-player-prize {
        padding-top: 15px;
    }

    .wr-player-prize strong {
        font-size: 13px;
    }


    /* RANKING MOBILE
       No horizontal scrolling */

    .wr-ranking-header {
        display: block;
    }

    .wr-sync {
        width: max-content;
        max-width: 100%;
        margin-top: 13px;
    }

    .wr-ranking-card {
        overflow: hidden;
        border-radius: 17px;
    }

    .wr-ranking-head {
        display: none;
    }

    .wr-ranking-row {
        min-width: 0;
        min-height: 73px;
        display: grid;
        grid-template-columns:
            39px
            minmax(0,1fr)
            auto;
        grid-template-areas:
            "rank name wager"
            "rank name prize";
        column-gap: 8px;
        row-gap: 2px;
        padding: 12px 13px;
    }

    .wr-rank-cell {
        grid-area: rank;
        align-self: center;
    }

    .wr-name-cell {
        grid-area: name;
        align-self: center;
        gap: 8px;
    }

    .wr-player-avatar {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 9px;
    }

    .wr-name-cell strong {
        font-size: 12px;
    }

    .wr-wager-cell {
        grid-area: wager;
        align-self: end;
        font-size: 11px;
        text-align: right;
    }

    .wr-wager-cell::before {
        content: "Wager ";
        font-size: 7px;
        font-weight: 750;
        text-transform: uppercase;
        color: rgba(255,255,255,.25);
    }

    .wr-gain-cell {
        grid-area: prize;
        align-self: start;
        font-size: 10px;
        text-align: right;
    }

    .wr-gain-cell::before {
        content: "Gain ";
        font-size: 7px;
        font-weight: 750;
        text-transform: uppercase;
        color: rgba(255,255,255,.25);
    }

    .wr-mini-medal {
        width: 29px;
        height: 29px;
    }

    .wr-normal-rank {
        padding-left: 8px;
        font-size: 11px;
    }


    /* OFFERS MOBILE */

    .wr-casinos-section {
        margin-top: 58px;
    }

    .wr-offers {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wr-footer-note {
        align-items: flex-start;
        margin-top: 38px;
        padding:
            14px
            4px;
    }

    .wr-footer-note p {
        font-size: 9px;
    }

}


/* ---------- VERY SMALL ---------- */

@media (max-width: 370px) {

    .wagerrace-premium {
        width: calc(100% - 16px);
    }

    .wr-time-unit {
        width: 47px;
    }

    .wr-time-unit strong {
        font-size: 21px;
    }

    .wr-countdown {
        gap: 2px;
    }

    .wr-ranking-row {
        grid-template-columns:
            34px
            minmax(0,1fr)
            auto;
        padding-left: 9px;
        padding-right: 9px;
    }

    .wr-player-avatar {
        display: none;
    }

}

/* =========================================================
   SEO PAGES
   ========================================================= */

.seo-public-page {
    position: relative;
    z-index: 1;
    width: min(920px, calc(100% - 32px));
    margin: 0 auto;
    padding: 72px 0 90px;
}

.seo-public-hero {
    margin-bottom: 42px;
    text-align: center;
}

.seo-public-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: #a78bfa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.seo-public-hero h1 {
    max-width: 780px;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(34px, 6vw, 62px);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.seo-public-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.seo-content-block {
    padding: 26px;
    border: 1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(15, 15, 24, 0.68);
    backdrop-filter: blur(18px);
}

.seo-content-block h2,
.seo-content-block h3 {
    margin: 0 0 12px;
    color: #fff;
}

.seo-content-block h2 {
    font-size: 25px;
}

.seo-content-block h3 {
    font-size: 20px;
}

.seo-content-block p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-line;
}

.seo-image-block {
    padding: 10px;
}

.seo-image-block img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.seo-image-block figcaption {
    padding: 11px 8px 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

.seo-offer-block {
    display: grid;
    grid-template-columns:
        minmax(180px, 0.7fr)
        minmax(0, 1fr);
    align-items: center;
    gap: 22px;
}

.seo-offer-block > img {
    width: 100%;
    border-radius: 14px;
}

.seo-offer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.seo-offer-content h2 {
    margin: 0;
}

.seo-offer-badge {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    color: #c4b5fd;
    font-size: 11px;
    font-weight: 800;
}

.seo-public-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 5px;
    padding: 0 18px;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #9333ea
        );
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.seo-cta-block {
    text-align: center;
}

.seo-faq-block details {
    color: #fff;
}

.seo-faq-block summary {
    cursor: pointer;
    font-size: 16px;
    font-weight: 750;
}

.seo-faq-block details p {
    margin-top: 15px;
}

@media (max-width: 700px) {
    .seo-public-page {
        width: min(100% - 22px, 920px);
        padding-top: 46px;
    }

    .seo-content-block {
        padding: 19px;
        border-radius: 16px;
    }

    .seo-offer-block {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   GIVEAWAYS PAGE
   ========================================================= */

.public-page-hero {
    position: relative;

    max-width: 760px;

    margin:
        92px auto 0;

    padding:
        46px 24px 12px;

    text-align: center;
}

.public-page-hero::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 360px;
    height: 210px;

    top: -35px;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(124, 58, 237, 0.15);

    filter: blur(75px);

    pointer-events: none;
}

.public-page-hero h1 {
    margin:
        10px 0 0;

    font-size:
        clamp(
            38px,
            7vw,
            62px
        );

    font-weight: 880;

    line-height: 0.98;

    letter-spacing:
        -0.065em;
}

.public-page-hero p {
    max-width: 540px;

    margin:
        17px auto 0;

    color:
        var(--public-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* GRID */

.public-page-hero
+ .public-section {
    margin-top: 54px;
}

.public-giveaways-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;

    padding-bottom: 90px;
}


/* CARD */

.public-giveaway-card {
    position: relative;

    min-height: 390px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.085);

    border-radius:
        var(--public-radius-large);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.2);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.public-giveaway-card::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    top: -95px;
    right: -70px;

    border-radius: 50%;

    background:
        var(--public-primary);

    opacity: 0.14;

    filter: blur(45px);

    pointer-events: none;
}

.public-giveaway-card::after {
    content: "";

    position: absolute;

    height: 1px;

    top: 0;
    right: 22px;
    left: 22px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(159, 103, 255, 0.5),
            transparent
        );

    opacity: 0.55;
}

.public-giveaway-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(159, 103, 255, 0.27);

    background:
        linear-gradient(
            145deg,
            rgba(124, 58, 237, 0.095),
            rgba(255, 255, 255, 0.022)
        );

    box-shadow:
        0 30px 85px
        rgba(0, 0, 0, 0.28);
}


/* CARD TOP */

.public-giveaway-top {
    position: relative;
    z-index: 1;

    min-height: 52px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}

.public-giveaway-emoji {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(159, 103, 255, 0.23);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(124, 58, 237, 0.2),
            rgba(124, 58, 237, 0.075)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.055);

    font-size: 23px;
}

.public-giveaway-badge {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 10px;

    border:
        1px solid
        rgba(159, 103, 255, 0.22);

    border-radius: 999px;

    background:
        rgba(124, 58, 237, 0.11);

    color:
        #c4a5ff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing:
        0.08em;

    text-transform: uppercase;
}


/* CONTENT */

.public-giveaway-content {
    position: relative;
    z-index: 1;

    flex: 1;

    padding-top: 25px;
}

.public-giveaway-content h2 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(
            19px,
            2vw,
            23px
        );

    font-weight: 760;

    line-height: 1.12;

    letter-spacing:
        -0.04em;
}

.public-giveaway-main-text {
    margin-top: 12px;

    color:
        var(--public-primary-light);

    font-size:
        clamp(
            25px,
            3vw,
            34px
        );

    font-weight: 880;

    line-height: 1;

    letter-spacing:
        -0.055em;
}

.public-giveaway-content > p {
    margin:
        17px 0 0;

    color:
        var(--public-muted);

    font-size: 12px;
    line-height: 1.7;
}


/* FREQUENCY */

.public-giveaway-frequency {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-top: 22px;
    padding-top: 15px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.065);
}

.public-giveaway-frequency span {
    color:
        var(--public-muted-soft);

    font-size: 9px;
    font-weight: 700;

    letter-spacing:
        0.08em;

    text-transform: uppercase;
}

.public-giveaway-frequency strong {
    color:
        rgba(255, 255, 255, 0.82);

    font-size: 10px;
    font-weight: 700;

    text-align: right;
}


/* BUTTON */

.public-giveaway-card
> .public-button {
    position: relative;
    z-index: 1;

    width: 100%;

    min-height: 44px;

    margin-top: 22px;

    border-radius: 11px;

    font-size: 11px;
    font-weight: 750;
}

.public-giveaway-card
> .public-button-primary {
    border:
        1px solid
        rgba(159, 103, 255, 0.32);

    background:
        linear-gradient(
            135deg,
            var(--public-primary),
            #6d28d9
        );

    box-shadow:
        0 10px 28px
        rgba(124, 58, 237, 0.2);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.public-giveaway-card
> .public-button-primary:hover {
    transform:
        translateY(-1px);

    filter: brightness(1.08);

    box-shadow:
        0 14px 36px
        rgba(124, 58, 237, 0.3);
}


/* EMPTY STATE */

.public-page-hero
+ .public-section
.public-empty {
    max-width: 580px;

    margin: 0 auto 100px;

    padding: 52px 25px;

    border:
        1px solid
        var(--public-border);

    border-radius:
        var(--public-radius-large);

    background:
        rgba(255, 255, 255, 0.025);

    text-align: center;
}

.public-page-hero
+ .public-section
.public-empty h2 {
    margin: 0;

    color: #fff;

    font-size: 20px;

    letter-spacing:
        -0.035em;
}

.public-page-hero
+ .public-section
.public-empty p {
    margin: 9px 0 0;

    color:
        var(--public-muted);

    font-size: 12px;
}


/* RESPONSIVE */

@media (max-width: 920px) {

    .public-giveaways-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 620px) {

    .public-page-hero {
        margin-top: 58px;

        padding:
            35px 8px 0;
    }

    .public-page-hero
    + .public-section {
        margin-top: 38px;
    }

    .public-giveaways-grid {
        grid-template-columns: 1fr;

        gap: 12px;

        padding-bottom: 65px;
    }

    .public-giveaway-card {
        min-height: 0;

        padding: 19px;

        border-radius: 19px;
    }

    .public-giveaway-card:hover {
        transform: none;
    }

    .public-giveaway-content {
        padding-top: 21px;
    }

    .public-giveaway-main-text {
        font-size: 28px;
    }
}

/* =========================================================
   PUBLISHED HOME VISUAL THEME
   ========================================================= */

body[data-theme-background] {
    font-size:
        var(
            --public-theme-body-size,
            16px
        );
}


/* BACKGROUND PRESETS */


body[data-theme-background]
.public-background {
    background:
        var(--public-bg);
}


body[data-theme-background="glow"]
.public-background {
    background:
        radial-gradient(
            circle at 50% -20%,
            color-mix(
                in srgb,
                var(--public-primary) 18%,
                transparent
            ),
            transparent 40%
        ),
        var(--public-bg);
}


body[data-theme-background="gradient"]
.public-background {
    background:
        linear-gradient(
            var(
                --public-theme-gradient-angle,
                135deg
            ),
            var(--public-bg),
            var(--public-theme-secondary-bg)
        );
}


body[data-theme-background="aurora"]
.public-background {
    background:
        radial-gradient(
            circle at 14% 18%,
            color-mix(
                in srgb,
                var(--public-primary) 20%,
                transparent
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at 84% 34%,
            color-mix(
                in srgb,
                var(--public-accent) 14%,
                transparent
            ),
            transparent 38%
        ),
        linear-gradient(
            var(
                --public-theme-gradient-angle,
                135deg
            ),
            var(--public-bg),
            var(--public-theme-secondary-bg)
        );
}


body[data-theme-background="solid"]
.public-orb {
    display: none;
}


/* BACKGROUND INTENSITY */


body[data-theme-intensity="subtle"]
.public-orb {
    opacity: 0.055;
}


body[data-theme-intensity="normal"]
.public-orb {
    opacity: 0.12;
}


body[data-theme-intensity="strong"]
.public-orb {
    opacity: 0.22;
}


body[data-theme-intensity="subtle"]
.public-orb-two {
    opacity: 0.035;
}


body[data-theme-intensity="normal"]
.public-orb-two {
    opacity: 0.08;
}


body[data-theme-intensity="strong"]
.public-orb-two {
    opacity: 0.15;
}


body[data-theme-intensity="subtle"]
.public-orb-three {
    opacity: 0.025;
}


body[data-theme-intensity="normal"]
.public-orb-three {
    opacity: 0.06;
}


body[data-theme-intensity="strong"]
.public-orb-three {
    opacity: 0.11;
}


/* BACKGROUND ANIMATION */


@keyframes public-theme-orb-float {
    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50% {
        transform:
            translate3d(
                42px,
                -28px,
                0
            );
    }
}


@keyframes public-theme-orb-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.14);
    }
}


@keyframes public-theme-orb-drift {
    0%,
    100% {
        transform:
            translate3d(
                -30px,
                0,
                0
            );
    }

    50% {
        transform:
            translate3d(
                55px,
                35px,
                0
            );
    }
}


body[data-theme-animation="float"]
.public-orb {
    animation:
        public-theme-orb-float
        10s
        ease-in-out
        infinite;
}


body[data-theme-animation="pulse"]
.public-orb {
    animation:
        public-theme-orb-pulse
        8s
        ease-in-out
        infinite;
}


body[data-theme-animation="drift"]
.public-orb {
    animation:
        public-theme-orb-drift
        12s
        ease-in-out
        infinite;
}


body[data-theme-animation-speed="slow"]
.public-orb {
    animation-duration: 16s;
}


body[data-theme-animation-speed="fast"]
.public-orb {
    animation-duration: 6s;
}


/* GLOBAL LAYOUT */


body[data-theme-background]
.public-shell {
    width:
        min(
            var(--public-container),
            calc(
                100%
                - (
                    var(
                        --public-theme-desktop-padding,
                        24px
                    )
                    * 2
                )
            )
        );
}


body[data-theme-background]
.public-section {
    margin-top:
        var(
            --public-theme-section-spacing,
            72px
        );
}


/* TYPOGRAPHY */


body[data-theme-background]
.public-hero-title {
    font-size:
        var(
            --public-theme-hero-title-size,
            52px
        );
}


body[data-theme-background]
.public-hero-description {
    font-size:
        var(
            --public-theme-hero-description-size,
            18px
        );
}


body[data-theme-background]
.public-section-title,
body[data-theme-background]
.section-title {
    font-size:
        var(
            --public-theme-section-title-size,
            32px
        );
}


body[data-theme-background]
.public-section-heading {
    text-align:
        var(
            --public-theme-section-align,
            center
        );
}


body[data-theme-hero-align="left"]
.public-hero {
    margin-left: 0;
    text-align: left;
}


body[data-theme-hero-align="left"]
.public-hero-description {
    margin-left: 0;
}


body[data-theme-hero-align="left"]
.public-social-links {
    justify-content: flex-start;
}


/* CARD SURFACES */


body[data-theme-background]
.public-offer-card,
body[data-theme-background]
.public-faq-item,
body[data-theme-background]
.faq-item {
    border-radius:
        var(
            --public-theme-card-radius,
            22px
        );
}


body[data-theme-background]
.public-offer-card {
    padding:
        var(
            --public-theme-offer-padding,
            18px
        );
}


body[data-theme-background]
.public-offers-grid {
    grid-template-columns:
        repeat(
            var(
                --public-theme-offer-columns,
                1
            ),
            minmax(0, 1fr)
        );

    gap:
        var(
            --public-theme-offer-gap,
            20px
        );
}


/* OFFER BANNERS */


body[data-theme-background]
.public-offer-banner,
body[data-theme-background]
.offer-banner {
    width: 100%;
    max-width:
        var(
            --public-theme-banner-max-width,
            760px
        );

    border-radius:
        var(
            --public-theme-image-radius,
            16px
        );
}


body[data-theme-banner-mode="natural"]
.public-offer-banner img,
body[data-theme-banner-mode="natural"]
.offer-banner img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


body[data-theme-banner-mode="wide"]
.public-offer-banner img,
body[data-theme-banner-mode="wide"]
.offer-banner img {
    width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
}


body[data-theme-banner-mode="compact"]
.public-offer-banner img,
body[data-theme-banner-mode="compact"]
.offer-banner img {
    width: 100%;
    aspect-ratio: 4 / 1;
    object-fit: cover;
}


/* BUTTONS */


body[data-theme-background]
.public-button,
body[data-theme-background]
.public-offer-button,
body[data-theme-background]
.discord-button {
    border-radius:
        var(
            --public-theme-button-radius,
            14px
        );
}


/* REVEAL */


@keyframes public-theme-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes public-theme-fade-up {
    from {
        opacity: 0;
        transform:
            translate3d(
                0,
                18px,
                0
            );
    }

    to {
        opacity: 1;
        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}


@keyframes public-theme-scale {
    from {
        opacity: 0;
        transform: scale(0.975);
    }

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


body[data-theme-reveal="fade"]
.public-section {
    animation:
        public-theme-fade
        var(
            --public-theme-reveal-duration,
            500ms
        )
        ease both;
}


body[data-theme-reveal="fade-up"]
.public-section {
    animation:
        public-theme-fade-up
        var(
            --public-theme-reveal-duration,
            500ms
        )
        ease both;
}


body[data-theme-reveal="scale"]
.public-section {
    animation:
        public-theme-scale
        var(
            --public-theme-reveal-duration,
            500ms
        )
        ease both;
}


/* MOBILE */


@media (max-width: 768px) {

    body[data-theme-background]
    .public-shell {
        width:
            calc(
                100%
                - (
                    var(
                        --public-theme-mobile-padding,
                        16px
                    )
                    * 2
                )
            );
    }


    body[data-theme-background]
    .public-section {
        margin-top:
            var(
                --public-theme-mobile-section-spacing,
                48px
            );
    }


    body[data-theme-background]
    .public-hero-title {
        font-size:
            var(
                --public-theme-mobile-hero-title-size,
                36px
            );
    }


    body[data-theme-background]
    .public-hero-description {
        font-size:
            var(
                --public-theme-mobile-hero-description-size,
                16px
            );
    }


    body[data-theme-background]
    .public-section-title,
    body[data-theme-background]
    .section-title {
        font-size:
            var(
                --public-theme-mobile-section-title-size,
                26px
            );
    }


    body[data-theme-background]
    .public-offers-grid {
        grid-template-columns: 1fr;

        gap:
            var(
                --public-theme-mobile-offer-gap,
                16px
            );
    }


    body[
        data-theme-reduce-mobile-effects="true"
    ]
    .public-orb {
        opacity: 0.045;
        filter: blur(110px);
    }


    body[
        data-theme-compact-mobile="true"
    ]
    .public-offer-card {
        padding:
            min(
                var(
                    --public-theme-offer-padding,
                    18px
                ),
                14px
            );
    }
}


/* ACCESSIBILITY */


@media (prefers-reduced-motion: reduce) {

    body[
        data-theme-respect-motion="true"
    ]
    .public-orb,

    body[
        data-theme-respect-motion="true"
    ]
    .public-section {
        animation: none !important;
    }
}

/* =========================================================
   HOME THEME — OFFERS ADVANCED
   ========================================================= */

body[data-theme-background]
.public-offer-card {
    text-align:
        var(
            --public-theme-offer-content-align,
            left
        );
}


body[data-theme-background]
.public-offer-card
.public-button {
    margin-left:
        var(
            --public-theme-offer-button-margin-left,
            0
        );

    margin-right:
        var(
            --public-theme-offer-button-margin-right,
            0
        );
}


body[data-theme-background]
.public-offer-banner,
body[data-theme-background]
.offer-banner {
    max-width:
        var(
            --public-theme-banner-max-width,
            760px
        );

    margin-left:
        var(
            --public-theme-banner-margin-left,
            0
        );

    margin-right:
        var(
            --public-theme-banner-margin-right,
            0
        );
}


body[data-theme-banner-height="custom"]
.public-offer-banner img,
body[data-theme-banner-height="custom"]
.offer-banner img {
    height:
        var(
            --public-theme-banner-height
        );

    object-fit: cover;
}


/* SECTION-SPECIFIC SPACING */

body[data-theme-background]
[data-theme-section="discord"] {
    padding-top:
        var(
            --public-theme-discord-padding-top,
            0px
        );

    padding-bottom:
        var(
            --public-theme-discord-padding-bottom,
            0px
        );
}

/* =========================================================
   HOME — SECTION HEADING ALIGNMENT
   ========================================================= */

.public-section-heading[data-heading-align="left"],
.public-custom-heading[data-heading-align="left"] {
    text-align: left;
    align-items: flex-start;
}


.public-section-heading[data-heading-align="center"],
.public-custom-heading[data-heading-align="center"] {
    text-align: center;
    align-items: center;
}


.public-section-heading[data-heading-align="center"] {
    margin-left: auto;
    margin-right: auto;
}


.public-section-heading[data-heading-align="center"] p,
.public-custom-heading[data-heading-align="center"] p {
    margin-left: auto;
    margin-right: auto;
}


.public-affiliate-code[data-heading-align="center"]
.public-custom-heading {
    text-align: center;
}

/* ============================================================
   OFFERS — COMPACT NATURAL-RATIO CARDS
   ============================================================ */

/*
 * La taille choisie dans l'éditeur correspond à la largeur
 * de toute la carte, pas uniquement à celle de l'image.
 */
body[data-theme-background]
.public-offers {
    justify-items: center;
}


/*
 * Toute la carte suit la largeur configurée.
 */
body[data-theme-background]
.public-offer-card {
    width: 100%;

    max-width:
        var(
            --public-theme-banner-max-width,
            760px
        );

    margin-left: auto;
    margin-right: auto;
}


/*
 * La bannière prend exactement toute la largeur de la carte.
 */
body[data-theme-background]
.public-offer-banner,
body[data-theme-background]
.offer-banner {
    width: 100%;
    max-width: none;
    height: auto;

    overflow: hidden;
}


/*
 * L'image conserve TOUJOURS son ratio naturel.
 * Toutes les anciennes variantes wide / compact / hauteur
 * personnalisée sont neutralisées.
 */
body[data-theme-background]
.public-offer-banner img,
body[data-theme-background]
.offer-banner img,
body[data-theme-banner-mode="natural"]
.public-offer-banner img,
body[data-theme-banner-mode="natural"]
.offer-banner img,
body[data-theme-banner-mode="wide"]
.public-offer-banner img,
body[data-theme-banner-mode="wide"]
.offer-banner img,
body[data-theme-banner-mode="compact"]
.public-offer-banner img,
body[data-theme-banner-mode="compact"]
.offer-banner img,
body[data-theme-banner-height="custom"]
.public-offer-banner img,
body[data-theme-banner-height="custom"]
.offer-banner img {
    width: 100%;
    height: auto;

    display: block;

    aspect-ratio: auto;

    object-fit: contain;
}


/*
 * Sous la bannière :
 *
 * TITRE
 * Description
 * BOUTON
 *
 * Tout est centré.
 */
body[data-theme-background]
.public-offer-content {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    gap: 16px;

    padding:
        var(
            --public-theme-offer-padding,
            18px
        );

    text-align: center;
}


/*
 * Bloc texte centré.
 */
body[data-theme-background]
.public-offer-copy {
    width: 100%;
    min-width: 0;

    text-align: center;
}


body[data-theme-background]
.public-offer-copy h3 {
    width: 100%;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


body[data-theme-background]
.public-offer-copy p {
    width: 100%;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


/*
 * Bouton pleine largeur sous le texte,
 * comme sur ton ancien site.
 */
body[data-theme-background]
.public-offer-content
.public-button {
    width: 100%;

    margin-left: 0;
    margin-right: 0;

    align-self: stretch;
}


/*
 * Sécurité responsive :
 * la carte ne peut jamais dépasser l'écran.
 */
@media (max-width: 760px) {

    body[data-theme-background]
    .public-offer-card {
        width: 100%;
        max-width: 100%;
    }

    body[data-theme-background]
    .public-offer-content {
        gap: 13px;
    }
}

/* ============================================================
   PUBLIC NAV + FOOTER — CENTERED MINIMAL LAYOUT
   ============================================================ */


/* ------------------------------------------------------------
   NAVIGATION
   Plus de header visuel :
   logo centré + navigation centrée directement dans la page.
   ------------------------------------------------------------ */

.public-nav-wrap {
    position: relative;
    z-index: 100;

    top: auto;

    width: 100%;

    padding:
        30px
        var(--public-theme-desktop-padding, 16px)
        0;

    pointer-events: auto;
}


.public-nav {
    width: 100%;
    max-width: var(--public-container);

    min-height: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 17px;

    margin: 0 auto;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    pointer-events: auto;
}


/* Logo ZARTEXBONUS */

.public-nav-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: none;

    margin: 0;
    padding: 0;

    color: var(--public-text);

    font-size: 22px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.06em;

    text-align: center;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}


.public-nav-brand:hover {
    transform: translateY(-1px);

    opacity: 0.92;
}


.public-nav-brand-main {
    color: var(--public-text);
}


.public-nav-brand-accent {
    color: var(--public-primary-light);
}


/* Navigation */

.public-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;

    width: 100%;

    margin: 0;
}


.public-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius: 999px;

    color:
        var(--public-muted);

    background:
        rgba(255, 255, 255, 0.025);

    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    text-align: center;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}


.public-nav-link:hover {
    transform: translateY(-1px);

    color:
        var(--public-text);

    border-color:
        var(--public-primary-border);

    background:
        var(--public-primary-soft);
}


/* ------------------------------------------------------------
   FOOTER
   Tout est centré sur desktop ET mobile.
   ------------------------------------------------------------ */

.public-footer {
    width: 100%;

    margin-top: 110px;

    padding:
        34px 0
        44px;

    border-top:
        1px solid
        var(--public-border);

    text-align: center;
}


.public-footer-top {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 22px;

    margin: 0 auto;
}


/* Logo footer */

.public-footer-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;

    color:
        var(--public-text);

    font-size: 20px;
    font-weight: 900;

    line-height: 1;

    letter-spacing:
        -0.06em;

    text-align: center;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}


.public-footer-brand:hover {
    transform: translateY(-1px);

    opacity: 0.92;
}


.public-footer-brand-main {
    color:
        var(--public-text);
}


.public-footer-brand-accent,
.public-footer-brand span {
    color:
        var(--public-primary-light);
}


/* Liens footer */

.public-footer-links {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap:
        10px 22px;

    margin: 0;

    text-align: center;
}


.public-footer-links a {
    color:
        var(--public-muted);

    font-size: 11px;
    font-weight: 600;

    text-align: center;

    transition:
        color 0.18s ease;
}


.public-footer-links a:hover {
    color:
        var(--public-text);
}


/* Bas footer */

.public-footer-bottom {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-top: 27px;

    color:
        var(--public-muted-soft);

    font-size: 10px;

    line-height: 1.6;

    text-align: center;
}


.public-footer-bottom p {
    margin: 0 auto;

    text-align: center;
}


.public-footer-copyright {
    width: 100%;
}


.public-footer-disclaimer {
    width: 100%;

    max-width: 560px;
}


/* ------------------------------------------------------------
   MOBILE
   On conserve exactement le même principe :
   aucun header, tout centré.
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    .public-nav-wrap {
        position: relative;

        top: auto;

        padding:
            24px
            var(--public-theme-mobile-padding, 11px)
            0;
    }


    .public-nav {
        min-height: 0;

        gap: 15px;

        padding: 0;

        border: 0;
        border-radius: 0;

        background: transparent;

        box-shadow: none;
    }


    .public-nav-brand {
        font-size: 20px;
    }


    .public-nav-links {
        justify-content: center;

        gap: 6px;
    }


    .public-nav-link {
        min-height: 34px;

        padding:
            0 11px;

        font-size: 10px;
    }


    .public-footer {
        margin-top: 80px;

        padding:
            30px 0
            36px;
    }


    .public-footer-top,
    .public-footer-bottom {
        width: 100%;

        align-items: center;
        justify-content: center;

        text-align: center;
    }


    .public-footer-top {
        gap: 20px;
    }


    .public-footer-brand {
        font-size: 19px;
    }


    .public-footer-links {
        justify-content: center;

        gap:
            10px 17px;
    }


    .public-footer-links a {
        font-size: 10px;
    }


    .public-footer-bottom {
        gap: 14px;

        margin-top: 25px;
    }


    .public-footer-bottom p {
        width: 100%;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }
}


@media (max-width: 420px) {

    .public-nav-wrap {
        padding-top: 21px;
    }


    .public-nav-brand {
        font-size: 19px;
    }


    .public-nav-links {
        gap: 5px;
    }


    .public-nav-link {
        min-height: 32px;

        padding:
            0 9px;

        font-size: 9px;
    }


    .public-footer-links {
        gap:
            9px 14px;
    }
}
/* ============================================================
   HOME — ROUND PROFILE LOGO
   ============================================================ */

/*
 * Logo d'identité de la homepage :
 * toujours circulaire, quelle que soit l'image source.
 */
.public-hero-logo {
    width: 140px;
    height: 140px;

    aspect-ratio: 1 / 1;

    margin-left: auto;
    margin-right: auto;

    padding: 4px;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--public-primary) 38%,
            rgba(255, 255, 255, 0.16)
        );

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 0 0 1px
        rgba(255, 255, 255, 0.035),

        0 0 22px
        color-mix(
            in srgb,
            var(--public-primary) 20%,
            transparent
        ),

        0 10px 34px
        rgba(0, 0, 0, 0.28);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/*
 * L'image remplit le cercle.
 * Comme elle a déjà été cadrée en 1:1 par notre cropper,
 * aucun cadrage supplémentaire indésirable.
 */
.public-hero-logo img {
    display: block;

    width: 100%;
    height: 100%;

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    object-fit: cover;
    object-position: center;
}


/* Mobile */

@media (max-width: 760px) {

    .public-hero-logo {
        width: 112px;
        height: 112px;

        padding: 3px;

        box-shadow:
            0 0 0 1px
            rgba(255, 255, 255, 0.035),

            0 0 18px
            color-mix(
                in srgb,
                var(--public-primary) 18%,
                transparent
            ),

            0 8px 26px
            rgba(0, 0, 0, 0.24);
    }
}

/* HOME — rapproche le hero de la navigation */

.public-hero {
    margin-top: 55px;
}

@media (max-width: 760px) {
    .public-hero {
        margin-top: 40px;
    }
}

/* ============================================================
   PUBLIC — FLOATING NAVIGATION
   ============================================================ */


/*
 * Conteneur fixe.
 *
 * Invisible par défaut et totalement hors interaction.
 */
.public-floating-nav {
    position: fixed;

    top: 12px;
    left: 50%;

    z-index: 5000;

    width: max-content;
    max-width: calc(100vw - 24px);

    transform:
        translate(-50%, -14px)
        scale(0.97);

    opacity: 0;

    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 180ms ease,
        transform 220ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        visibility 180ms ease;
}


/*
 * État affiché.
 */
.public-floating-nav.is-visible {
    transform:
        translate(-50%, 0)
        scale(1);

    opacity: 1;

    visibility: visible;
    pointer-events: auto;
}


/*
 * Capsule glass autour des 4 boutons.
 */
.public-floating-nav-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    width: max-content;
    max-width: 100%;

    padding: 6px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 999px;

    background:
        rgba(12, 10, 18, 0.76);

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.30),

        0 0 20px
        color-mix(
            in srgb,
            var(--public-primary) 8%,
            transparent
        );

    backdrop-filter:
        blur(18px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(135%);
}


/*
 * On réutilise les .public-nav-link existants,
 * mais on verrouille ici uniquement ce qui est nécessaire
 * pour la version flottante.
 */
.public-floating-nav
.public-nav-link {
    flex: 0 0 auto;

    min-height: 34px;

    padding:
        0 13px;

    white-space: nowrap;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .public-floating-nav {
        top: 8px;

        max-width:
            calc(100vw - 12px);
    }


    .public-floating-nav-inner {
        gap: 4px;

        padding: 5px;
    }


    .public-floating-nav
    .public-nav-link {
        min-height: 32px;

        padding:
            0 10px;

        font-size: 9px;
    }
}


/*
 * Très petits téléphones :
 * on compacte juste assez pour conserver les 4 boutons
 * sur une seule ligne.
 */
@media (max-width: 390px) {

    .public-floating-nav-inner {
        gap: 3px;

        padding: 4px;
    }


    .public-floating-nav
    .public-nav-link {
        min-height: 31px;

        padding:
            0 8px;

        font-size: 8.5px;
    }
}


/*
 * Respect de la préférence système pour les animations réduites.
 */
@media (prefers-reduced-motion: reduce) {

    .public-floating-nav {
        transition:
            opacity 100ms linear,
            visibility 100ms linear;

        transform:
            translate(-50%, 0);
    }


    .public-floating-nav.is-visible {
        transform:
            translate(-50%, 0);
    }
}

/* ============================================================
   DISCORD — MOBILE COMPACT CARD
   ============================================================ */

@media (max-width: 760px) {

    .public-discord {
        padding: 20px !important;

        border-radius: 22px;

        text-align: left;
    }


    /*
     * Réduit les espacements verticaux hérités du desktop.
     */
    .public-discord-content {
        gap: 0;
    }


    /*
     * Icône plus petite et moins isolée.
     */
    .public-discord-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 17px;

        border-radius: 14px;
    }


    .public-discord-icon svg {
        width: 24px;
        height: 24px;
    }


    /*
     * Eyebrow
     */
    .public-discord .public-eyebrow {
        margin-bottom: 7px;

        font-size: 9px;
        letter-spacing: 0.14em;
    }


    /*
     * Titre
     */
    .public-discord h2,
    .public-discord h3 {
        margin: 0 0 7px;

        font-size: 22px;
        line-height: 1.15;
    }


    /*
     * Description plus compacte.
     */
    .public-discord p {
        max-width: 100%;

        margin: 0;

        font-size: 13px;
        line-height: 1.55;
    }


    /*
     * Bouton séparé proprement du texte.
     */
    .public-discord .public-button {
        width: 100%;

        min-height: 44px;

        margin-top: 18px;

        align-self: stretch;

        border-radius: 14px;
    }
}

/* DISCORD — MOBILE CENTERED */

@media (max-width: 760px) {

    .public-discord {
        text-align: center;
    }

    .public-discord-content {
        align-items: center;
        text-align: center;
    }

    .public-discord-icon {
        margin-left: auto;
        margin-right: auto;
    }

    .public-discord .public-eyebrow,
    .public-discord h2,
    .public-discord h3,
    .public-discord p {
        width: 100%;
        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }

    .public-discord p {
        max-width: 290px;
    }

    .public-discord .public-button {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/* ============================================================
   OFFERS — CARD BORDER ALIGNED WITH BANNER
   ============================================================ */

/*
 * Le contour extérieur a exactement la même largeur
 * que la bannière.
 */
body[data-theme-background]
.public-offer-card {
    width: 100%;
    max-width:
        var(
            --public-theme-banner-max-width,
            760px
        );

    padding: 0;

    overflow: hidden;

    margin-left: auto;
    margin-right: auto;
}


/*
 * La bannière touche exactement les deux bords
 * de la carte : aucun retrait horizontal.
 */
body[data-theme-background]
.public-offer-banner,
body[data-theme-background]
.offer-banner {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    border-radius: 0;
}


/*
 * L'image remplit exactement la largeur intérieure.
 * Toujours aucun crop.
 */
body[data-theme-background]
.public-offer-banner img,
body[data-theme-background]
.offer-banner img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    border-radius: 0;

    object-fit: contain;
}


/*
 * L'arrondi du haut est désormais assuré par la carte
 * elle-même grâce à overflow:hidden.
 */
body[data-theme-background]
.public-offer-card {
    border-radius:
        var(
            --public-theme-card-radius,
            24px
        );
}


/*
 * Le contenu conserve son espace intérieur,
 * mais sans élargir la carte.
 */
body[data-theme-background]
.public-offer-content {
    box-sizing: border-box;

    width: 100%;

    padding:
        var(
            --public-theme-offer-padding,
            18px
        );
}


/* Mobile : même comportement exact */

@media (max-width: 760px) {

    body[data-theme-background]
    .public-offer-card {
        width: 100%;
        max-width: 100%;

        padding: 0;
    }

    body[data-theme-background]
    .public-offer-banner,
    body[data-theme-background]
    .offer-banner,
    body[data-theme-background]
    .public-offer-banner img,
    body[data-theme-background]
    .offer-banner img {
        width: 100%;
        max-width: 100%;

        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================================
   SOCIALS — ROUND GLASS ICONS
   ============================================================ */

.public-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}


/* Cercle principal */

.public-social-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    padding: 0;

    border-radius: 50% !important;

    color: var(--public-text);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.085),
            rgba(255, 255, 255, 0.025)
        );

    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 18px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    overflow: hidden;

    text-decoration: none;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease;
}


/* Petit reflet glass */

.public-social-link::before {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            transparent 48%
        );

    pointer-events: none;
}


/* SVG parfaitement centré */

.public-social-link svg {
    position: relative;
    z-index: 1;

    display: block;

    width: 21px;
    height: 21px;

    flex: 0 0 21px;

    color: currentColor;
}


/* Fallback éventuel */

.public-social-link > span {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;
    font-weight: 800;
}


/* Hover premium */

.public-social-link:hover {
    transform: translateY(-3px) scale(1.05);

    color: #ffffff;

    border-color:
        color-mix(
            in srgb,
            var(--public-accent) 60%,
            rgba(255, 255, 255, 0.18)
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--public-primary) 22%,
                rgba(255, 255, 255, 0.08)
            ),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 0 20px
            color-mix(
                in srgb,
                var(--public-accent) 28%,
                transparent
            );
}


/* Petit feedback au clic */

.public-social-link:active {
    transform: translateY(-1px) scale(0.97);
}


/* Accessibilité clavier */

.public-social-link:focus-visible {
    outline: 2px solid var(--public-accent);
    outline-offset: 3px;
}


/* Mobile */

@media (max-width: 640px) {

    .public-socials {
        gap: 10px;
    }

    .public-social-link {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }

    .public-social-link svg {
        width: 20px;
        height: 20px;

        flex-basis: 20px;
    }
}

/* ============================================================
   HOME — UNIFIED DESKTOP CONTENT WIDTH
   La largeur configurée pour les bannières devient la largeur
   de référence de tous les blocs principaux de l'accueil.
   ============================================================ */

@media (min-width: 761px) {

    /*
     * Sections principales :
     * toutes utilisent exactement la largeur configurée
     * dans "Largeur max bannière".
     */
    body[data-theme-background]
    .public-affiliate-code,

    body[data-theme-background]
    .public-discord,

    body[data-theme-background]
    [data-theme-section="offers"],

    body[data-theme-background]
    [data-theme-section="youtube"],

    body[data-theme-background]
    [data-theme-section="faq"] {
        width: 100%;

        max-width:
            var(
                --public-theme-banner-max-width,
                800px
            );

        margin-left: auto;
        margin-right: auto;
    }


    /*
     * Les offres suivent déjà cette largeur,
     * mais on la verrouille ici pour garantir
     * un alignement parfait avec les autres blocs.
     */
    body[data-theme-background]
    .public-offers,

    body[data-theme-background]
    .public-offer-card {
        width: 100%;

        max-width:
            var(
                --public-theme-banner-max-width,
                800px
            );

        margin-left: auto;
        margin-right: auto;
    }


    /*
     * Le carousel YouTube occupe toute la largeur
     * disponible de sa section.
     */
    body[data-theme-background]
    .public-video-carousel {
        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;
    }


    /*
     * La FAQ prend elle aussi toute la largeur
     * de son conteneur unifié.
     */
    body[data-theme-background]
    .public-faq {
        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   ZARTEXBONUS — LOADING TRANSITION
   ============================================================ */

.public-loading-transition {
    position: fixed;
    z-index: 999999;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    visibility: hidden;

    background:
        radial-gradient(
            circle at 50% 44%,
            color-mix(
                in srgb,
                var(--public-primary, #7c3aed) 10%,
                transparent
            ),
            transparent 34%
        ),
        #08080c;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 260ms ease,
        visibility 260ms ease;
}


.public-loading-transition.is-visible {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


.public-loading-transition.is-leaving {
    visibility: visible;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 420ms ease,
        visibility 420ms ease;
}


.public-loading-transition.is-finished {
    display: none;
}


/* Empêche uniquement le scroll pendant que le loader est visible */

html.public-loading-active,
html.public-loading-active body {
    overflow: hidden;
}


/* Centre */

.public-loading-transition-inner {
    width:
        min(
            440px,
            calc(100vw - 48px)
        );

    display: flex;
    align-items: center;
    flex-direction: column;

    transform:
        translateY(-2vh);

    text-align: center;
}


/* ============================================================
   WORDMARK
   ============================================================ */

.public-loading-wordmark {
    position: relative;

    display: inline-block;

    max-width: 100%;

    font-size:
        clamp(
            38px,
            7vw,
            68px
        );

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -0.075em;

    white-space: nowrap;
}


/* Texte sombre non rempli */

.public-loading-wordmark-base {
    display: block;

    color:
        rgba(
            255,
            255,
            255,
            0.105
        );

    text-shadow:
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.025
        );
}


/*
 * Deuxième copie exactement superposée.
 * clip-path révèle progressivement le texte de gauche à droite.
 */

.public-loading-wordmark-fill {
    --loading-progress: 0%;

    position: absolute;

    inset: 0;

    display: block;

    overflow: hidden;

    color: transparent;

    background:
        linear-gradient(
            90deg,

            var(
                --public-primary,
                #7c3aed
            )
            0%,

            var(
                --public-primary-light,
                #a78bfa
            )
            46%,

            #ffffff
            78%,

            #ffffff
            100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    -webkit-text-fill-color:
        transparent;

    clip-path:
        inset(
            0
            calc(
                100% - var(--loading-progress)
            )
            0
            0
        );

    filter:
        drop-shadow(
            0 0 13px
            color-mix(
                in srgb,
                var(--public-primary, #7c3aed) 24%,
                transparent
            )
        );

    will-change:
        clip-path;
}


/* ============================================================
   PROGRESS BAR
   ============================================================ */

.public-loading-progress {
    width: 100%;
    height: 2px;

    margin-top: 28px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            0.075
        );
}


.public-loading-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(
                --public-primary,
                #7c3aed
            ),
            var(
                --public-primary-light,
                #a78bfa
            ),
            #ffffff
        );

    box-shadow:
        0 0 14px
        color-mix(
            in srgb,
            var(--public-primary, #7c3aed) 50%,
            transparent
        );

    will-change: width;
}


/* ============================================================
   PERCENTAGE
   ============================================================ */

.public-loading-percentage {
    margin-top: 12px;

    color:
        rgba(
            255,
            255,
            255,
            0.34
        );

    font-size: 10px;
    font-weight: 750;

    letter-spacing: 0.12em;

    font-variant-numeric:
        tabular-nums;
}


/* ============================================================
   COMPLETION
   ============================================================ */

.public-loading-transition.is-completing
.public-loading-wordmark-fill {
    filter:
        drop-shadow(
            0 0 18px
            color-mix(
                in srgb,
                var(--public-primary, #7c3aed) 36%,
                transparent
            )
        );
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .public-loading-transition-inner {
        width:
            min(
                330px,
                calc(100vw - 44px)
            );
    }


    .public-loading-wordmark {
        font-size:
            clamp(
                32px,
                11vw,
                48px
            );
    }


    .public-loading-progress {
        margin-top: 22px;
    }
}


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

@media (
    prefers-reduced-motion:
    reduce
) {

    .public-loading-transition,
    .public-loading-transition.is-leaving {
        transition-duration:
            80ms;
    }


    .public-loading-wordmark-fill,
    .public-loading-progress-bar {
        transition: none;
    }
}
/* ============================================================
   LOADING TRANSITION — PRE-PAINT DESTINATION GUARD
   ============================================================ */

/*
 * Lors d'une navigation interne, le petit bootstrap synchrone
 * du <head> ajoute cette classe AVANT le premier rendu.
 *
 * Le loader est donc immédiatement visible sur la destination,
 * avant même que loading-transition.js (defer) ne s'exécute.
 *
 * Cela supprime le flash :
 *
 * loader -> destination -> loader -> destination
 *
 * et donne :
 *
 * loader -> loader -> destination
 */

html.public-loading-pending
.public-loading-transition {
    display: flex;

    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/*
 * Pendant cette phase extrêmement courte, on masque les éléments
 * publics derrière l'overlay.
 *
 * L'overlay étant déjà fixed + plein écran, ceci constitue une
 * sécurité supplémentaire contre un flash de contenu.
 */

html.public-loading-pending
body {
    overflow: hidden;
}


/*
 * Important :
 * le fond du document lui-même reste sombre pendant que le CSS
 * et le loader prennent leur place.
 */

html.public-loading-pending,
html.public-loading-pending
body {
    background: #08080c;
}

/* ============================================================
   HOME — AFFILIATE CODE COMPACT
   Desktop : bloc horizontal compact
   Mobile  : bloc vertical beaucoup moins haut
   ============================================================ */


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 761px) {

    body[data-theme-background]
    .public-affiliate-code {
        min-height: 0;

        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: center;

        gap: 24px;

        margin-top: 52px;

        padding:
            18px
            20px;
    }


    /*
     * Partie texte :
     * titre + description beaucoup plus compacts.
     */
    body[data-theme-background]
    .public-affiliate-code
    .public-custom-heading {
        min-width: 0;

        display: flex;
        align-items: baseline;
        flex-wrap: wrap;

        gap:
            4px
            12px;

        margin: 0;
    }


    body[data-theme-background]
    .public-affiliate-code
    .public-eyebrow {
        width: 100%;

        margin: 0 0 2px;

        font-size: 9px;
        line-height: 1.2;
    }


    body[data-theme-background]
    .public-affiliate-code
    h2 {
        flex: 0 0 auto;

        margin: 0;

        font-size: 21px;
        line-height: 1.15;

        white-space: nowrap;
    }


    body[data-theme-background]
    .public-affiliate-code
    p {
        flex: 1 1 auto;

        min-width: 220px;

        margin: 0;

        font-size: 11px;
        line-height: 1.45;
    }


    /*
     * Bouton/code plus horizontal et moins haut.
     */
    body[data-theme-background]
    .public-code-button {
        width: auto;
        min-width: 245px;

        padding:
            10px
            13px
            10px
            15px;

        border-radius: 13px;
    }


    body[data-theme-background]
    .public-code-label {
        font-size: 8px;
    }


    body[data-theme-background]
    .public-code-button strong {
        margin-top: 1px;

        font-size: 16px;
        line-height: 1.15;
    }


    body[data-theme-background]
    .public-code-copy-icon {
        font-size: 18px;
    }
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    /*
     * On réduit fortement la hauteur totale de la carte.
     */
    body[data-theme-background]
    .public-affiliate-code {
        align-items: stretch;

        gap: 13px;

        margin-top: 36px;

        padding:
            15px
            14px;

        border-radius: 20px;
    }


    body[data-theme-background]
    .public-affiliate-code
    .public-custom-heading {
        width: 100%;

        margin: 0;

        text-align: center;
    }


    /*
     * Eyebrow éventuel beaucoup plus discret.
     */
    body[data-theme-background]
    .public-affiliate-code
    .public-eyebrow {
        margin:
            0 0
            5px;

        font-size: 8px;
        line-height: 1.2;
    }


    /*
     * "Un seul code à retenir"
     */
    body[data-theme-background]
    .public-affiliate-code
    h2 {
        margin:
            0 0
            5px;

        font-size: 19px;
        line-height: 1.15;

        letter-spacing: -0.03em;
    }


    /*
     * Description plus compacte.
     */
    body[data-theme-background]
    .public-affiliate-code
    p {
        max-width: 320px;

        margin:
            0 auto;

        font-size: 11px;
        line-height: 1.4;
    }


    /*
     * Champ du code :
     * toujours pleine largeur mais nettement moins haut.
     */
    body[data-theme-background]
    .public-code-button {
        width: 100%;
        min-width: 0;
        min-height: 0;

        column-gap: 10px;

        padding:
            9px
            11px
            9px
            13px;

        border-radius: 12px;
    }


    body[data-theme-background]
    .public-code-label {
        font-size: 7px;
        line-height: 1.2;

        letter-spacing: 0.09em;
    }


    body[data-theme-background]
    .public-code-button strong {
        margin-top: 1px;

        font-size: 16px;
        line-height: 1.15;
    }


    body[data-theme-background]
    .public-code-copy-icon {
        font-size: 17px;
    }
}


/* ------------------------------------------------------------
   VERY SMALL MOBILE
   ------------------------------------------------------------ */

@media (max-width: 420px) {

    body[data-theme-background]
    .public-affiliate-code {
        gap: 11px;

        margin-top: 32px;

        padding:
            13px
            12px;

        border-radius: 18px;
    }


    body[data-theme-background]
    .public-affiliate-code
    h2 {
        font-size: 18px;
    }


    body[data-theme-background]
    .public-affiliate-code
    p {
        max-width: 290px;

        font-size: 10px;
        line-height: 1.4;
    }


    body[data-theme-background]
    .public-code-button {
        padding:
            8px
            10px
            8px
            12px;
    }


    body[data-theme-background]
    .public-code-button strong {
        font-size: 15px;
    }
}

/* ============================================================
   HOME — AFFILIATE FINAL SPACING / ALIGNMENT
   ============================================================ */


/* Desktop : description alignée avec le titre à gauche */
@media (min-width: 761px) {

    body[data-theme-background]
    .public-affiliate-code
    .public-custom-heading {
        text-align: left;
        align-items: flex-start;
    }

    body[data-theme-background]
    .public-affiliate-code
    .public-custom-heading p {
        margin-left: 0;
        margin-right: 0;

        text-align: left;
    }
}

/* ============================================================
   HOME — MOBILE AFFILIATE -> FIRST OFFER GAP
   Même espacement qu'entre deux offres
   ============================================================ */

@media (max-width: 760px) {

    body[data-theme-background]
    .public-affiliate-code + .public-section {
        margin-top:
            var(
                --public-theme-mobile-offer-gap,
                16px
            ) !important;
    }

}

/* ============================================================
   HOME — MOBILE DISCORD FINAL
   - même gap que deux offres
   - card plus compacte
   - logo + titres centrés ensemble
   - description + bouton dessous
   ============================================================ */

@media (max-width: 760px) {

    /* --------------------------------------------------------
       1. GAP OFFRES -> DISCORD

       Le Discord est le sibling direct de la SECTION offres,
       pas de .public-offers.
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-section[data-theme-section="offers"]
    + .public-discord {
        margin-top:
            var(
                --public-theme-mobile-offer-gap,
                16px
            ) !important;
    }
}
/* ============================================================
   HOME — DISCORD STRUCTURE
   ============================================================ */


/* ------------------------------------------------------------
   DESKTOP
   Conserve la présentation desktop existante.
   ------------------------------------------------------------ */

.public-discord-heading {
    display: flex;
    align-items: center;

    gap: 22px;
}


.public-discord-description {
    max-width: 600px;

    margin: 0;

    color:
        var(--public-muted);

    font-size: 13px;
    line-height: 1.65;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    /* --------------------------------------------------------
       GAP DERNIÈRE OFFRE -> DISCORD
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-section[data-theme-section="offers"]
    + .public-discord {
        margin-top:
            var(
                --public-theme-mobile-offer-gap,
                16px
            ) !important;
    }


    /* --------------------------------------------------------
       CARD
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-discord {
        min-height: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        gap: 0;

        padding:
            16px !important;

        border-radius: 20px;

        text-align: center;
    }


    /* --------------------------------------------------------
       CONTENU GLOBAL
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-discord-content {
        width: 100%;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        gap: 11px;

        margin: 0;

        text-align: center;
    }


    /* --------------------------------------------------------
       PREMIÈRE LIGNE :
       [ LOGO ] [ COMMUNAUTÉ !
                [ LE DISCORD !
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-discord-heading {
        width: max-content;
        max-width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 11px;

        margin:
            0 auto;
    }


    /* Logo */

    body[data-theme-background]
    .public-discord-icon {
        width: 46px;
        height: 46px;

        flex:
            0 0 46px;

        margin: 0 !important;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 13px;
    }


    body[data-theme-background]
    .public-discord-icon svg {
        width: 23px;
        height: 23px;
    }


    /* --------------------------------------------------------
       TITRES À DROITE DU LOGO
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-discord-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 3px;

        min-width: 0;

        text-align: left;
    }


    body[data-theme-background]
    .public-discord-copy
    .public-eyebrow {
        width: auto;

        margin: 0 !important;

        font-size: 8px;
        line-height: 1.1;

        letter-spacing: 0.14em;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-copy
    h2 {
        width: auto;

        margin: 0 !important;

        font-size: 19px;
        line-height: 1.08;

        letter-spacing: -0.035em;

        text-align: left !important;
    }


    /* --------------------------------------------------------
       DESCRIPTION
       Maintenant réellement sous TOUT le groupe supérieur.
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-discord-description {
        width: 100%;
        max-width: 290px;

        margin:
            0 auto !important;

        color:
            var(--public-muted);

        font-size: 10.5px;
        line-height: 1.4;

        text-align: center !important;
    }


    /* --------------------------------------------------------
       BOUTON
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-button-discord {
        width: 100%;

        min-width: 0;
        min-height: 40px;

        margin:
            13px 0
            0 !important;

        padding:
            0
            14px;

        border-radius: 12px;

        font-size: 10.5px;
    }
}

/* ============================================================
   HOME — DISCORD DESKTOP FINAL
   - même gap que les offres
   - description sous DISCORD et centrée avec le titre
   - mobile inchangé
   ============================================================ */

@media (min-width: 761px) {

    /* --------------------------------------------------------
       GAP DERNIÈRE OFFRE -> DISCORD
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-section[data-theme-section="offers"]
    + .public-discord {
        margin-top:
            var(
                --public-theme-offer-gap,
                24px
            ) !important;
    }


    /* --------------------------------------------------------
       CARD DISCORD
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-discord {
        padding:
            24px
            32px;
    }


    /* --------------------------------------------------------
       CONTENU GAUCHE :
       logo + titre/description
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-discord-content {
        display: flex;
        align-items: center;

        gap: 18px;
    }


    body[data-theme-background]
    .public-discord-heading {
        display: flex;
        align-items: center;

        gap: 18px;
    }


    /* --------------------------------------------------------
       LOGO
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-discord-icon {
        margin: 0;
        flex-shrink: 0;
    }


    /* --------------------------------------------------------
       DISCORD + DESCRIPTION

       On garde le titre au-dessus.
       La description vient juste dessous et se centre
       par rapport au titre.
       -------------------------------------------------------- */

    body[data-theme-background]
    .public-discord-copy {
        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }


    body[data-theme-background]
    .public-discord-copy
    .public-eyebrow {
        text-align: center;
    }


    body[data-theme-background]
    .public-discord-copy
    h2 {
        margin: 0;

        text-align: center;
    }


    body[data-theme-background]
    .public-discord-description {
        max-width: 360px;

        margin:
            5px 0
            0;

        font-size: 12px;
        line-height: 1.45;

        text-align: center;
    }
}

/* ============================================================
   HOME — DISCORD FINAL RESPONSIVE LAYOUT
   ============================================================ */


/* ------------------------------------------------------------
   DESKTOP

   [ LOGO ] [ DISCORD                    ]    [ BOUTON ]
            [ Description............... ]
   ------------------------------------------------------------ */

@media (min-width: 761px) {

    body[data-theme-background]
    .public-discord-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 18px;

        min-width: 0;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-icon {
        flex:
            0 0 auto;

        margin: 0 !important;
    }


    body[data-theme-background]
    .public-discord-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 5px;

        min-width: 0;

        text-align: left;
    }


    body[data-theme-background]
    .public-discord-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 2px;

        margin: 0;

        text-align: left;
    }


    body[data-theme-background]
    .public-discord-copy
    .public-eyebrow {
        width: auto;

        margin: 0 !important;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-copy
    h2 {
        width: auto;

        margin: 0 !important;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-description {
        width: auto;
        max-width: 440px;

        margin: 0 !important;

        font-size: 12px;
        line-height: 1.45;

        text-align: left !important;
    }
}


/* ------------------------------------------------------------
   MOBILE

          [ LOGO ] [ COMMUNAUTÉ !
                   [ Le Discord !

              Description

          [        BOUTON        ]
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    body[data-theme-background]
    .public-discord-content {
        width: 100%;

        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: center;

        gap: 11px;

        margin: 0;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-icon {
        width: 46px;
        height: 46px;

        flex:
            0 0 46px;

        margin: 0 !important;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 13px;
    }


    body[data-theme-background]
    .public-discord-icon svg {
        width: 23px;
        height: 23px;
    }


    body[data-theme-background]
    .public-discord-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 8px;

        min-width: 0;
    }


    body[data-theme-background]
    .public-discord-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 3px;

        min-height: 46px;

        text-align: left;
    }


    body[data-theme-background]
    .public-discord-copy
    .public-eyebrow {
        width: auto;

        margin: 0 !important;

        font-size: 8px;
        line-height: 1.1;

        letter-spacing: 0.14em;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-copy
    h2 {
        width: auto;

        margin: 0 !important;

        font-size: 19px;
        line-height: 1.08;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-description {
        margin: 0 !important;

        max-width: 245px;

        font-size: 10.5px;
        line-height: 1.4;

        text-align: left !important;
    }
}
/* ============================================================
   HOME — DISCORD DESKTOP MICRO POLISH
   ============================================================ */

@media (min-width: 761px) {

    /* Rapproche légèrement la description du titre DISCORD */
    body[data-theme-background]
    .public-discord-text {
        gap: 8px !important;
    }


    body[data-theme-background]
    .public-discord-description {
        margin-top: -13px !important;
    }


    /* Bouton Discord légèrement plus imposant */
    body[data-theme-background]
    .public-button-discord {
        min-height: 48px;

        padding:
            0
            22px;

        font-size: 12.5px;

        border-radius: 15px;
    }
}
/* ============================================================
   PUBLIC TOAST — TOP SUCCESS NOTIFICATION
   ============================================================ */

.public-toast-container {
    position: fixed;
    z-index: 10000;

    top: 18px;
    right: auto;
    bottom: auto;
    left: 50%;

    width:
        min(
            390px,
            calc(100% - 28px)
        );

    display: grid;

    gap: 8px;

    transform:
        translateX(-50%);

    pointer-events: none;
}


.public-toast {
    position: relative;

    transform:
        translateY(-18px)
        scale(0.97);

    padding:
        13px 18px;

    border:
        1px solid
        rgba(74, 222, 128, 0.34);

    border-radius: 14px;

    color: #f0fff4;

    background:
        rgba(17, 80, 49, 0.96);

    box-shadow:
        0 14px 45px
        rgba(0, 0, 0, 0.38),
        0 0 24px
        rgba(34, 197, 94, 0.12);

    backdrop-filter:
        blur(18px);

    opacity: 0;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;

    text-align: center;

    transition:
        transform 0.28s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),
        opacity 0.22s ease;
}


.public-toast::before {
    content: "✓";

    width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-right: 8px;

    border-radius: 50%;

    color: #052e16;

    background: #86efac;

    font-size: 12px;
    font-weight: 900;

    vertical-align: -1px;
}


.public-toast.is-visible {
    transform:
        translateY(0)
        scale(1);

    opacity: 1;
}


/* Erreur éventuelle */

.public-toast-error {
    border-color:
        rgba(248, 113, 113, 0.38);

    color: #fff5f5;

    background:
        rgba(100, 28, 28, 0.96);

    box-shadow:
        0 14px 45px
        rgba(0, 0, 0, 0.38),
        0 0 24px
        rgba(239, 68, 68, 0.10);
}


.public-toast-error::before {
    content: "!";

    color: #450a0a;

    background: #fca5a5;
}


@media (max-width: 760px) {

    .public-toast-container {
        top: 12px;

        width:
            calc(100% - 24px);
    }


    .public-toast {
        padding:
            12px 14px;

        border-radius: 13px;

        font-size: 11px;
    }
}

/* ============================================================
   LUCKYWHEEL — CENTER Z OPTICAL ALIGNMENT
   ============================================================ */

.luckywheel-center span {
    transform: translate(-2px, -2px);
}

/* ============================================================
   LUCKYWHEEL — PROBABILITIES INFO
   ============================================================ */

.luckywheel-control-card {
    position: relative;
}


.luckywheel-probabilities {
    position: absolute;

    top: 24px;
    right: 24px;

    z-index: 20;
}


.luckywheel-probabilities > summary {
    list-style: none;
}


.luckywheel-probabilities > summary::-webkit-details-marker {
    display: none;
}


.luckywheel-probabilities-trigger {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    color:
        rgba(255, 255, 255, 0.72);

    background:
        rgba(255, 255, 255, 0.055);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);

    backdrop-filter:
        blur(12px);

    font-size: 13px;
    font-weight: 800;
    font-family:
        Georgia,
        serif;

    font-style: italic;

    line-height: 1;

    cursor: pointer;

    user-select: none;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


.luckywheel-probabilities-trigger:hover {
    color: #ffffff;

    border-color:
        rgba(168, 85, 247, 0.5);

    background:
        rgba(124, 58, 237, 0.16);

    box-shadow:
        0 0 18px
        rgba(124, 58, 237, 0.16);

    transform:
        translateY(-1px);
}


.luckywheel-probabilities[open]
.luckywheel-probabilities-trigger {
    color: #ffffff;

    border-color:
        rgba(168, 85, 247, 0.52);

    background:
        rgba(124, 58, 237, 0.20);

    box-shadow:
        0 0 20px
        rgba(124, 58, 237, 0.18);
}


.luckywheel-probabilities-popover {
    position: absolute;

    top: 40px;
    right: 0;

    width: 250px;

    padding: 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 16px;

    color:
        var(--public-text);

    background:
        rgba(15, 12, 24, 0.97);

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.48),
        0 0 30px
        rgba(124, 58, 237, 0.08);

    backdrop-filter:
        blur(22px);
}


.luckywheel-probabilities-eyebrow {
    display: block;

    margin-bottom: 4px;

    color:
        rgba(196, 181, 253, 0.70);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.luckywheel-probabilities-title {
    display: block;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 850;
}


.luckywheel-probabilities-list {
    display: grid;

    gap: 0;
}


.luckywheel-probabilities-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 9px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.065);

    color:
        rgba(255, 255, 255, 0.60);

    font-size: 10px;
}


.luckywheel-probabilities-row span {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.luckywheel-probabilities-row strong {
    flex: 0 0 auto;

    color:
        rgba(255, 255, 255, 0.92);

    font-size: 10px;
    font-weight: 800;
}


@media (max-width: 760px) {

    .luckywheel-probabilities {
        top: 18px;
        right: 18px;
    }


    .luckywheel-probabilities-trigger {
        width: 29px;
        height: 29px;

        font-size: 12px;
    }


    .luckywheel-probabilities-popover {
        width:
            min(
                245px,
                calc(100vw - 56px)
            );

        padding: 14px;

        border-radius: 15px;
    }

}

/* ============================================================
   WAGERRACE — MOBILE HEADINGS CENTER
   ============================================================ */

@media (max-width: 760px) {

    .wagerrace-page .wr-section-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .wagerrace-page .wr-section-header > div {
        width: 100% !important;
        text-align: center !important;
    }

    .wagerrace-page .wr-section-header .wr-kicker,
    .wagerrace-page .wr-section-header h2 {
        width: 100% !important;
        text-align: center !important;
    }

    .wagerrace-page .wr-ranking-header .wr-sync {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .wagerrace-page .wr-casinos-header > p {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

}
/* ============================================================
   GIVEAWAYS — MOBILE HERO SPACING
   ============================================================ */

@media (max-width: 620px) {

    .public-page-hero {
        padding-top: 0;
    }

}
/* ============================================================
   GIVEAWAYS — MOBILE CARDS WIDTH
   Strictement limité à la grille Giveaways
   ============================================================ */

@media (max-width: 620px) {

    .public-giveaways-grid {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .public-giveaways-grid > .public-giveaway-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }

}
/* ============================================================
   GIVEAWAYS — VERY SMALL MOBILE CENTERING
   ============================================================ */

@media (max-width: 340px) {

    .public-giveaways-grid {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);

        margin-left: auto;
        margin-right: auto;

        transform: translateX(12px);
    }

}
/* ============================================================
   FLOATING NAV — DARKER INDIVIDUAL BUTTONS
   ============================================================ */

.public-floating-nav .public-nav-link {
    background: rgba(10, 8, 16, 0.88) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* ============================================================
   FLOATING NAV — REMOVE OUTER GLASS CAPSULE
   Garde uniquement les boutons individuels
   ============================================================ */

.public-floating-nav-inner {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* ============================================================
   HOME — DISCORD MOBILE FINAL LAYOUT
   ============================================================ */

@media (max-width: 760px) {

    body[data-theme-background]
    .public-discord-content {
        display: grid !important;

        grid-template-columns:
            46px
            minmax(0, auto);

        grid-template-areas:
            "icon text"
            "button button";

        width: 100%;

        column-gap: 11px;
        row-gap: 16px;

        align-items: center !important;
        justify-content: center !important;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-icon {
        grid-area: icon;

        width: 46px;
        height: 46px;

        margin: 0 !important;

        align-self: center;
    }


    body[data-theme-background]
    .public-discord-text {
        grid-area: text;

        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        width: auto;
        max-width: 210px;
        min-width: 0;

        gap: 5px;

        margin: 0 !important;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-copy {
        display: block;

        min-height: 0;

        margin: 0 !important;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-copy
    .public-eyebrow {
        display: none;
    }


    body[data-theme-background]
    .public-discord-copy
    h2 {
        width: auto;

        margin: 0 !important;

        font-size: 19px;
        line-height: 1.05;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-discord-description {
        width: auto;
        max-width: 210px;

        margin: 0 !important;

        font-size: 10.5px;
        line-height: 1.35;

        text-align: left !important;
    }


    body[data-theme-background]
    .public-button-discord {
        grid-area: button;

        width: 100%;

        margin: 0 !important;
    }

}

/* ============================================================
   HOME — AFFILIATE -> FIRST OFFER PERMANENT GAP
   Même espacement qu'entre deux offres
   ============================================================ */

@media (min-width: 761px) {

    body[data-theme-background]
    .public-affiliate-code
    + .public-offers-section {
        margin-top:
            var(
                --public-theme-offer-gap,
                24px
            ) !important;
    }

}


@media (max-width: 760px) {

    body[data-theme-background]
    .public-affiliate-code
    + .public-offers-section {
        margin-top:
            var(
                --public-theme-mobile-offer-gap,
                16px
            ) !important;
    }

}

/* ============================================================
   HOME THEME — BACKGROUND ANIMATIONS FINAL
   ============================================================ */


/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */

body[data-theme-animation]:not([data-theme-animation="none"])
.public-orb {
    display: block;

    will-change:
        transform,
        opacity;

    backface-visibility: hidden;
}


/* ------------------------------------------------------------
   VITESSES
   ------------------------------------------------------------ */

body[data-theme-animation-speed="slow"] {
    --zb-bg-speed-1: 18s;
    --zb-bg-speed-2: 22s;
    --zb-bg-speed-3: 26s;
}

body[data-theme-animation-speed="normal"] {
    --zb-bg-speed-1: 11s;
    --zb-bg-speed-2: 14s;
    --zb-bg-speed-3: 17s;
}

body[data-theme-animation-speed="fast"] {
    --zb-bg-speed-1: 6s;
    --zb-bg-speed-2: 8s;
    --zb-bg-speed-3: 10s;
}


/* ============================================================
   FLOTTEMENT
   ============================================================ */

@keyframes zb-background-float-one {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    33% {
        transform:
            translate3d(
                90px,
                -55px,
                0
            )
            scale(1.08);
    }

    66% {
        transform:
            translate3d(
                45px,
                75px,
                0
            )
            scale(0.96);
    }
}


@keyframes zb-background-float-two {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    35% {
        transform:
            translate3d(
                -110px,
                65px,
                0
            )
            scale(1.06);
    }

    70% {
        transform:
            translate3d(
                -55px,
                -70px,
                0
            )
            scale(0.95);
    }
}


@keyframes zb-background-float-three {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    40% {
        transform:
            translate3d(
                75px,
                -90px,
                0
            )
            scale(1.10);
    }

    75% {
        transform:
            translate3d(
                -65px,
                -30px,
                0
            )
            scale(0.97);
    }
}


body[data-theme-animation="float"]
.public-orb-one {
    animation:
        zb-background-float-one
        var(--zb-bg-speed-1, 11s)
        ease-in-out
        infinite
        !important;
}


body[data-theme-animation="float"]
.public-orb-two {
    animation:
        zb-background-float-two
        var(--zb-bg-speed-2, 14s)
        ease-in-out
        infinite
        !important;
}


body[data-theme-animation="float"]
.public-orb-three {
    animation:
        zb-background-float-three
        var(--zb-bg-speed-3, 17s)
        ease-in-out
        infinite
        !important;
}


/* ============================================================
   PULSATION
   ============================================================ */

@keyframes zb-background-pulse-one {

    0%,
    100% {
        transform:
            scale(0.88);
    }

    50% {
        transform:
            scale(1.28);
    }
}


@keyframes zb-background-pulse-two {

    0%,
    100% {
        transform:
            scale(1.18);
    }

    50% {
        transform:
            scale(0.82);
    }
}


@keyframes zb-background-pulse-three {

    0%,
    100% {
        transform:
            scale(0.92);
    }

    50% {
        transform:
            scale(1.22);
    }
}


body[data-theme-animation="pulse"]
.public-orb-one {
    animation:
        zb-background-pulse-one
        var(--zb-bg-speed-1, 11s)
        ease-in-out
        infinite
        !important;
}


body[data-theme-animation="pulse"]
.public-orb-two {
    animation:
        zb-background-pulse-two
        var(--zb-bg-speed-2, 14s)
        ease-in-out
        infinite
        !important;
}


body[data-theme-animation="pulse"]
.public-orb-three {
    animation:
        zb-background-pulse-three
        var(--zb-bg-speed-3, 17s)
        ease-in-out
        infinite
        !important;
}


/* ============================================================
   DÉPLACEMENT
   ============================================================ */

@keyframes zb-background-drift-one {

    0% {
        transform:
            translate3d(
                -40px,
                -30px,
                0
            )
            scale(0.95);
    }

    25% {
        transform:
            translate3d(
                220px,
                70px,
                0
            )
            scale(1.08);
    }

    50% {
        transform:
            translate3d(
                420px,
                190px,
                0
            )
            scale(1);
    }

    75% {
        transform:
            translate3d(
                180px,
                320px,
                0
            )
            scale(1.10);
    }

    100% {
        transform:
            translate3d(
                -40px,
                -30px,
                0
            )
            scale(0.95);
    }
}


@keyframes zb-background-drift-two {

    0% {
        transform:
            translate3d(
                40px,
                20px,
                0
            )
            scale(1.05);
    }

    25% {
        transform:
            translate3d(
                -220px,
                -80px,
                0
            )
            scale(0.96);
    }

    50% {
        transform:
            translate3d(
                -400px,
                -200px,
                0
            )
            scale(1.10);
    }

    75% {
        transform:
            translate3d(
                -160px,
                -330px,
                0
            )
            scale(1);
    }

    100% {
        transform:
            translate3d(
                40px,
                20px,
                0
            )
            scale(1.05);
    }
}


@keyframes zb-background-drift-three {

    0% {
        transform:
            translate3d(
                0,
                40px,
                0
            )
            scale(1);
    }

    25% {
        transform:
            translate3d(
                180px,
                -130px,
                0
            )
            scale(1.08);
    }

    50% {
        transform:
            translate3d(
                -130px,
                -280px,
                0
            )
            scale(0.94);
    }

    75% {
        transform:
            translate3d(
                -240px,
                -80px,
                0
            )
            scale(1.12);
    }

    100% {
        transform:
            translate3d(
                0,
                40px,
                0
            )
            scale(1);
    }
}


body[data-theme-animation="drift"]
.public-orb-one {
    animation:
        zb-background-drift-one
        var(--zb-bg-speed-1, 11s)
        ease-in-out
        infinite
        !important;
}


body[data-theme-animation="drift"]
.public-orb-two {
    animation:
        zb-background-drift-two
        var(--zb-bg-speed-2, 14s)
        ease-in-out
        infinite
        !important;
}


body[data-theme-animation="drift"]
.public-orb-three {
    animation:
        zb-background-drift-three
        var(--zb-bg-speed-3, 17s)
        ease-in-out
        infinite
        !important;
}


/* ============================================================
   AUCUNE
   ============================================================ */

body[data-theme-animation="none"]
.public-orb {
    animation:
        none
        !important;
}


/* ============================================================
   SOLID
   ============================================================ */

/*
 * Le preset "Uni" reste volontairement sans orbes.
 * Une animation sur un fond parfaitement uni n'aurait rien
 * de visuel à déplacer.
 */

body[data-theme-background="solid"]
.public-orb {
    display:
        none
        !important;
}

/* ============================================================
   PUBLIC ERROR PAGES — 404 / 500
   ============================================================ */


.public-error-page {
    position: relative;

    width:
        min(
            100%,
            1180px
        );

    min-height:
        calc(
            100vh
            - 100px
        );

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0 auto;

    padding:
        100px
        24px
        80px;

    overflow: hidden;
}


.public-error-glow {
    position: absolute;

    z-index: -1;

    width: 620px;
    height: 620px;

    top: 50%;
    left: 50%;

    border-radius: 999px;

    transform:
        translate(
            -50%,
            -50%
        );

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(
                    --public-primary,
                    #7c3aed
                )
                20%,
                transparent
            )
            0%,
            color-mix(
                in srgb,
                var(
                    --public-primary,
                    #7c3aed
                )
                8%,
                transparent
            )
            38%,
            transparent
            72%
        );

    filter:
        blur(20px);

    pointer-events: none;
}


.public-error-card {
    position: relative;

    width:
        min(
            100%,
            720px
        );

    display: flex;

    align-items: center;
    flex-direction: column;

    padding:
        64px
        48px
        58px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius:
        var(
            --public-theme-card-radius,
            28px
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.055
            ),
            rgba(
                255,
                255,
                255,
                0.018
            )
        );

    box-shadow:
        0
        32px
        100px
        rgba(
            0,
            0,
            0,
            0.38
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.045
        );

    text-align: center;

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


.public-error-card::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 1px;

    top: 0;
    left: 50%;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            color-mix(
                in srgb,
                var(
                    --public-primary,
                    #7c3aed
                )
                75%,
                white
            ),
            transparent
        );

    opacity: 0.8;
}


.public-error-code-wrap {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 4px;
}


.public-error-code {
    position: relative;

    z-index: 2;

    margin: 0;

    color: transparent;

    background:
        linear-gradient(
            135deg,
            #ffffff
            5%,
            color-mix(
                in srgb,
                var(
                    --public-primary,
                    #7c3aed
                )
                62%,
                white
            )
            48%,
            var(
                --public-primary,
                #7c3aed
            )
            100%
        );

    background-clip: text;

    -webkit-background-clip: text;

    font-size:
        clamp(
            100px,
            17vw,
            172px
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.075em;

    text-indent: -0.075em;

    filter:
        drop-shadow(
            0
            0
            35px
            color-mix(
                in srgb,
                var(
                    --public-primary,
                    #7c3aed
                )
                20%,
                transparent
            )
        );
}


.public-error-code-shadow {
    position: absolute;

    top: 50%;
    left: 50%;

    color:
        color-mix(
            in srgb,
            var(
                --public-primary,
                #7c3aed
            )
            12%,
            transparent
        );

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08);

    font-size:
        clamp(
            100px,
            17vw,
            172px
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.075em;

    text-indent: -0.075em;

    filter:
        blur(16px);

    user-select: none;
}


.public-error-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 27px;

    margin-top: 24px;

    padding:
        0
        12px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(
                --public-primary,
                #7c3aed
            )
            24%,
            transparent
        );

    border-radius: 999px;

    color:
        color-mix(
            in srgb,
            var(
                --public-primary,
                #7c3aed
            )
            45%,
            white
        );

    background:
        color-mix(
            in srgb,
            var(
                --public-primary,
                #7c3aed
            )
            8%,
            transparent
        );

    font-size: 10px;

    font-weight: 850;

    line-height: 1;

    letter-spacing: 0.15em;
}


.public-error-title {
    max-width: 600px;

    margin:
        24px
        0
        0;

    color:
        var(
            --public-theme-text,
            #ffffff
        );

    font-size:
        clamp(
            30px,
            5vw,
            46px
        );

    font-weight: 850;

    line-height: 1.08;

    letter-spacing: -0.035em;
}


.public-error-description {
    max-width: 520px;

    margin:
        18px
        auto
        0;

    color:
        var(
            --public-muted,
            rgba(
                255,
                255,
                255,
                0.62
            )
        );

    font-size: 15px;

    line-height: 1.75;
}


.public-error-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}


.public-error-primary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    min-height: 48px;

    padding:
        0
        21px;

    border-radius:
        var(
            --public-theme-button-radius,
            14px
        );

    font-weight: 800;
}


.public-error-arrow {
    display: inline-block;

    font-size: 17px;

    transition:
        transform
        180ms
        ease;
}


.public-error-primary:hover
.public-error-arrow {
    transform:
        translateX(4px);
}


.public-error-secondary {
    min-height: 48px;

    padding:
        0
        20px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius:
        var(
            --public-theme-button-radius,
            14px
        );

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    font-size: 13px;

    font-weight: 750;

    cursor: pointer;

    transition:
        border-color
        180ms
        ease,
        color
        180ms
        ease,
        background
        180ms
        ease,
        transform
        180ms
        ease;
}


.public-error-secondary:hover {
    border-color:
        color-mix(
            in srgb,
            var(
                --public-primary,
                #7c3aed
            )
            30%,
            transparent
        );

    color: #ffffff;

    background:
        color-mix(
            in srgb,
            var(
                --public-primary,
                #7c3aed
            )
            7%,
            transparent
        );

    transform:
        translateY(-1px);
}


/* ============================================================
   ERROR PAGE — MOBILE
   ============================================================ */


@media (max-width: 760px) {

    .public-error-page {
        min-height:
            calc(
                100svh
                - 100px
            );

        padding:
            62px
            14px
            54px;
    }


    .public-error-glow {
        width: 430px;
        height: 430px;
    }


    .public-error-card {
        padding:
            48px
            20px
            42px;

        border-radius:
            min(
                var(
                    --public-theme-card-radius,
                    24px
                ),
                24px
            );
    }


    .public-error-code,
    .public-error-code-shadow {
        font-size:
            clamp(
                92px,
                31vw,
                132px
            );
    }


    .public-error-badge {
        margin-top: 21px;
    }


    .public-error-title {
        margin-top: 20px;

        font-size:
            clamp(
                28px,
                8vw,
                36px
            );
    }


    .public-error-description {
        margin-top: 15px;

        font-size: 14px;

        line-height: 1.65;
    }


    .public-error-actions {
        width: 100%;

        flex-direction: column;

        margin-top: 29px;
    }


    .public-error-primary,
    .public-error-secondary {
        width: 100%;
    }

}