@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    color-scheme: dark;
    --bg: #020817;
    --panel: #071329;
    --gold: #ffca00;
    --text: #f8f7f2;
    --muted: #afbdd1;
    --line: #d8e5ff20;
    --display: 'Barlow Condensed','Arial Narrow',Impact,sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.7 'DM Sans',Arial,sans-serif
}

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

button {
    font: inherit;
    cursor: pointer
}

a, button {
    -webkit-tap-highlight-color: transparent
}

    a:focus-visible, button:focus-visible {
        outline: 3px solid var(--gold);
        outline-offset: 5px
    }

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

figure {
    margin: 0
}

h1, h2, h3, p {
    margin-top: 0
}

h1, h2, h3 {
    font-family: var(--display);
    line-height: 1.03;
    font-weight: 700
}

h2 {
    font-size: clamp(40px,5vw,66px);
    letter-spacing: -.5px;
    margin-bottom: 24px
}

em {
    font-style: normal;
    color: var(--gold)
}

[hidden] {
    display: none !important
}

.wrap {
    width: min(1200px,calc(100% - 64px));
    margin-inline: auto
}

.skip {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 50;
    background: var(--gold);
    color: var(--bg);
    padding: 12px
}

    .skip:focus {
        top: 10px
    }

.topline {
    display: flex;
    justify-content: space-between;
    padding: 8px max(32px,calc((100% - 1200px)/2));
    background: #030a17;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 1.2px
}

    .topline a {
        color: var(--gold)
    }

.header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #061126ee;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line)
}

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

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

    .brand img {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 50%;
        border: 1px solid #e8c77580
    }

    .brand > span {
        font: 800 31px/1 var(--display);
        letter-spacing: 2px
    }

    .brand small {
        display: block;
        font: 8px/2.5 'DM Sans',sans-serif;
        letter-spacing: 2.4px;
        color: var(--gold)
    }

nav {
    display: flex;
    align-items: center;
    gap: 24px
}

    nav > a {
        font-size: 12px
    }

        nav > a:hover, footer a:hover {
            color: var(--gold)
        }

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    min-height: 52px;
    padding: 15px 22px;
    border: 1px solid #ffde8c;
    border-radius: 5px;
    background: linear-gradient(110deg,#ffe299,#ffc444);
    color: #081329;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: .5px;
    box-shadow: 0 6px 30px #ffc64819;
    transition: transform .25s,box-shadow .25s
}

    .button:hover {
        transform: translateY(-3px);
        box-shadow: 0 7px 30px #ffc64845;
        color: #081329
    }

    .button span {
        font-size: 20px
    }

    .button.compact {
        font-size: 10px;
        padding: 12px 15px;
        min-height: 44px;
        gap: 15px
    }

    .button.outline {
        background: #0a1c36;
        border-color: #6783b060;
        color: var(--text);
        box-shadow: none
    }

.menu-toggle {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: transparent;
    width: 44px;
    height: 44px;
    padding: 10px
}

    .menu-toggle span {
        display: block;
        height: 2px;
        background: var(--gold);
        margin: 6px 0
    }

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(ellipse at 75% 35%,#204d9066,transparent 55%),linear-gradient(120deg,#051022,#0a1e3e)
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .2;
    background-image: linear-gradient(#52729b20 1px,transparent 1px),linear-gradient(90deg,#52729b20 1px,transparent 1px);
    background-size: 75px 75px;
    mask-image: linear-gradient(transparent,#000)
}

.hero-layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 65px;
    padding-block: 85px 110px;
    min-height: 695px
}

.hero-copy {
    position: relative;
    z-index: 2;
    animation: entry .8s both
}

.eyebrow {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 2.4px;
    font-weight: 700;
    margin-bottom: 24px
}

.tiny-star {
    font-size: 18px;
    margin-right: 8px
}

h1 {
    font-size: clamp(65px,7.8vw,105px);
    letter-spacing: -1.5px;
    line-height: .95;
    margin-bottom: 28px
}

    h1 em {
        background: linear-gradient(110deg,#fff0b7,#ffce51,#d79c2b);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        filter: drop-shadow(0 0 25px #e7b23c20)
    }

.hero-description {
    max-width: 440px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 30px
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.hero-caption {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    color: var(--muted)
}

    .hero-caption > span {
        border: 1px solid #ffca0055;
        border-radius: 50%;
        height: 38px;
        width: 38px;
        display: grid;
        place-items: center;
        font-size: 12px;
        color: var(--gold)
    }

    .hero-caption p {
        font-size: 10px;
        line-height: 1.7;
        margin: 0
    }

.casino-stage {
    position: relative;
    isolation: isolate;
    margin: 15px 20px 15px 0;
    animation: entry 1s .15s both
}

.brand-image {
    position: relative;
    z-index: 2;
    padding: 7px;
    border-radius: 18px;
    transform: rotate(4deg);
    border: 1px solid #f2ce6870;
    background: linear-gradient(130deg,#ffdb7220,#152b4e);
    box-shadow: 0 25px 80px #0009
}

    .brand-image img {
        border-radius: 12px
    }

    .brand-image figcaption {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 10px 5px;
        color: var(--gold);
        font-size: 9px;
        letter-spacing: 1px
    }

        .brand-image figcaption span {
            font-size: 7px
        }

.roulette {
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,#182a50 0deg 9deg,#e5b94d 9deg 10deg,#070d1e 10deg 19deg,#e5b94d 19deg 20deg);
    border: 9px ridge #d4a443;
    box-shadow: inset 0 0 0 7px #08172e,0 0 0 2px #f8d37255,0 10px 35px #0007;
    display: grid;
    place-items: center
}

    .roulette:before {
        content: '';
        position: absolute;
        inset: 19%;
        border: 3px solid #d2a848;
        border-radius: 50%;
        background: radial-gradient(circle,#164072,#09182e);
        box-shadow: 0 0 0 7px #061326,0 0 0 9px #e4ba5266
    }

    .roulette span {
        position: relative;
        z-index: 1;
        color: var(--gold);
        font-size: 56px
    }

.halo {
    position: absolute;
    width: 115%;
    aspect-ratio: 1;
    top: -8%;
    left: -8%;
    opacity: .5;
    animation: wheel 80s linear infinite
}

.playing-card {
    position: absolute;
    z-index: 4;
    width: 105px;
    height: 150px;
    border: 2px solid #ffe4a2;
    border-radius: 10px;
    background: linear-gradient(125deg,#fffef7,#d9d1bb);
    box-shadow: 0 15px 30px #0008;
    display: grid;
    place-items: center;
    color: #122349;
    animation: float-card 7s ease-in-out infinite
}

    .playing-card span {
        position: absolute;
        top: 8px;
        left: 9px;
        font: 700 19px/1 Georgia,serif;
        text-align: center
    }

        .playing-card span:last-child {
            top: auto;
            left: auto;
            right: 9px;
            bottom: 8px;
            transform: rotate(180deg)
        }

    .playing-card b {
        font: 60px Georgia,serif
    }

.card-back {
    left: -42px;
    bottom: -30px;
    --tilt: -23deg
}

.card-front {
    left: 24px;
    bottom: -52px;
    --tilt: -7deg;
    color: #a42032;
    animation-delay: -2s
}

.chip {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: repeating-conic-gradient(#ffe3a0 0deg 12deg,#a57522 12deg 16deg,#14336a 16deg 45deg);
    border: 2px solid #ffe29b;
    box-shadow: 0 6px 0 #94702d,0 10px 0 #112547,0 16px 25px #0008
}

    .chip span {
        display: grid;
        place-items: center;
        width: 72%;
        height: 72%;
        border: 2px dashed #fbd777;
        border-radius: 50%;
        background: radial-gradient(circle,#254c88,#08162f);
        color: #ffdc83;
        font-size: 36px
    }

.chip-one {
    z-index: 3;
    right: -32px;
    top: -35px;
    width: 95px;
    height: 95px;
    animation: float-chip 6s ease-in-out infinite
}

.chip-two {
    z-index: 4;
    right: -35px;
    bottom: -35px;
    width: 112px;
    height: 112px;
    animation: float-chip 7s -3s ease-in-out infinite
}

.stage-label {
    position: absolute;
    bottom: -90px;
    width: 100%;
    text-align: center;
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--muted)
}

.hero-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--line);
    padding: 20px 0;
    font-size: 9px;
    letter-spacing: 1.3px;
    color: var(--muted)
}

    .hero-bottom a {
        color: var(--gold)
    }

#motion-toggle {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--muted);
    font-size: 10px;
    padding: 7px 12px
}

.sparks {
    position: absolute;
    inset: 0;
    pointer-events: none
}

    .sparks i {
        position: absolute;
        color: #ffe3a0;
        font-style: normal;
        text-shadow: 0 0 20px #ffda66;
        animation: spark 6s ease-in-out infinite
    }

        .sparks i:nth-child(1) {
            top: 12%;
            left: 46%
        }

        .sparks i:nth-child(2) {
            top: 78%;
            left: 52%;
            animation-delay: -2s
        }

        .sparks i:nth-child(3) {
            top: 30%;
            left: 95%;
            animation-delay: -4s
        }

        .sparks i:nth-child(4) {
            top: 82%;
            left: 5%;
            animation-delay: -1s
        }

        .sparks i:nth-child(5) {
            top: 5%;
            left: 78%;
            animation-delay: -3s
        }

.ribbon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 28px;
    white-space: nowrap;
    overflow: hidden;
    padding: 21px 25px;
    border-block: 1px solid #ffca0044;
    background: linear-gradient(90deg,#81611d18,#d4aa3c15,#81611d18);
    font: 600 17px var(--display);
    letter-spacing: 3px;
    color: #edcd83
}

    .ribbon b {
        font-size: 22px
    }

.section {
    padding-block: 95px
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 45px;
    margin-bottom: 38px
}

    .section-heading h2 {
        margin-bottom: 0
    }

    .section-heading > p {
        color: var(--muted);
        font-size: 13px;
        max-width: 350px;
        margin-bottom: 4px
    }

.identity-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

.identity-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(150deg,#12264a,#08162b);
    transition: transform .3s,border-color .3s,box-shadow .3s
}

    .identity-card:hover {
        transform: translateY(-7px);
        border-color: #ffca0080;
        box-shadow: 0 15px 45px #0005
    }

.illustration {
    height: 230px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at center,#2a548d70,transparent 70%);
    border-bottom: 1px solid var(--line)
}

.mini-card {
    position: absolute;
    top: 42px;
    left: calc(50% - 85px);
    width: 105px;
    height: 150px;
    border-radius: 9px;
    background: linear-gradient(125deg,#fffdf4,#dcd5c0);
    border: 2px solid #ffe3a0;
    padding: 10px;
    color: #102348;
    font: 700 24px/1 Georgia,serif;
    box-shadow: 0 10px 30px #0008;
    transform: rotate(-20deg)
}

    .mini-card > span {
        display: block;
        font-size: 64px;
        text-align: center;
        margin-top: 15px
    }

    .mini-card.right {
        left: calc(50% - 10px);
        transform: rotate(14deg);
        color: #aa2233
    }

.art-star {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--gold);
    font-size: 40px
}

.card-copy {
    padding: 27px
}

.card-number {
    color: var(--gold);
    font-size: 8px;
    letter-spacing: 2px
}

.card-copy h3 {
    font-size: 32px;
    margin-block: 15px
}

.card-copy p {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 0;
    line-height: 1.85
}

.art-chip {
    width: 110px;
    height: 110px;
    transform: rotate(-15deg)
}

    .art-chip.one {
        left: calc(50% - 88px);
        top: 74px
    }

    .art-chip.two {
        left: calc(50% - 15px);
        top: 80px;
        transform: rotate(20deg)
    }

    .art-chip.three {
        left: calc(50% - 55px);
        top: 27px;
        transform: rotate(-8deg)
    }

.small-wheel {
    position: absolute;
    width: 210px;
    height: 210px;
    top: 32px;
    left: calc(50% - 105px);
    transform: rotate(-20deg)
}

.section-footnote {
    font-size: 10px;
    color: var(--muted);
    margin: 20px 0 0
}

.mobile-section {
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: radial-gradient(ellipse at 80% 40%,#23518b55,transparent 60%),#0a1931
}

.mobile-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 80px;
    padding-block: 90px
}

.lead {
    max-width: 450px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.85
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 30px 0
}

    .feature-list li {
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
        font-size: 12px
    }

    .feature-list span {
        color: var(--gold);
        margin-right: 18px;
        font-size: 10px
    }

.phone-scene {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    flex-direction: column
}

.phone-orbit {
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid #ffca0030;
    border-radius: 50%;
    top: 40px;
    z-index: -1;
    box-shadow: 0 0 0 40px #ffca0004,0 0 0 80px #ffca0003
}

.smartphone {
    width: 262px;
    padding: 32px 12px 20px;
    background: #060d1b;
    border: 5px solid #405674;
    border-radius: 39px;
    box-shadow: 3px 3px 0 #c4a859,20px 30px 60px #0007;
    position: relative;
    transform: rotate(6deg);
    animation: phone-float 8s ease-in-out infinite
}

.phone-camera {
    position: absolute;
    top: 9px;
    left: calc(50% - 35px);
    width: 70px;
    height: 13px;
    border-radius: 20px;
    background: #020711
}

.phone-top {
    display: flex;
    justify-content: space-between;
    font: 700 21px var(--display);
    padding: 0 7px 12px;
    color: var(--gold)
}

    .phone-top span {
        font: 10px 'DM Sans',sans-serif;
        border: 1px solid #ffca0060;
        border-radius: 20px;
        padding: 3px 6px
    }

.smartphone > img {
    height: 165px;
    width: 100%;
    object-fit: cover;
    object-position: center 38%;
    border-radius: 9px
}

.phone-content {
    padding: 20px 8px 5px
}

    .phone-content .eyebrow {
        font-size: 7px;
        letter-spacing: 1px
    }

    .phone-content h3 {
        font-size: 27px;
        margin: 12px 0 20px
    }

.phone-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    font-size: 9px;
    color: var(--muted)
}

    .phone-row span {
        color: var(--gold)
    }

.phone-home {
    width: 80px;
    height: 3px;
    background: #9dacbf;
    border-radius: 5px;
    margin: 10px auto 0
}

.phone-scene figcaption {
    font-size: 9px;
    color: var(--muted);
    text-align: center;
    margin-top: 35px;
    max-width: 280px
}

.withdrawal {
    display: grid;
    grid-template-columns: .8fr 1.3fr;
    align-items: center;
    gap: 75px;
    background: radial-gradient(ellipse at 10% 30%,#30558166,transparent 65%),linear-gradient(110deg,#142b4d,#0c1c34);
    border: 1px solid #ffca0060;
    border-radius: 16px;
    padding: 55px
}

    .withdrawal p:not(.eyebrow) {
        color: var(--muted);
        font-size: 13px;
        max-width: 500px
    }

    .withdrawal h2 {
        font-size: clamp(38px,4.5vw,57px)
    }

    .withdrawal .fine-print {
        font-size: 10px;
        margin: 18px 0 0
    }

.withdrawal-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 270px
}

.receipt {
    width: 180px;
    height: 240px;
    background: linear-gradient(135deg,#ffca00,#d8ae4d);
    color: #102348;
    padding: 23px;
    transform: rotate(-10deg);
    box-shadow: 14px 20px 30px #0005;
    clip-path: polygon(0 0,100% 0,100% 100%,90% 95%,80% 100%,70% 95%,60% 100%,50% 95%,40% 100%,30% 95%,20% 100%,10% 95%,0 100%)
}

    .receipt > span {
        font: 800 25px var(--display);
        letter-spacing: 3px
    }

    .receipt i {
        display: block;
        height: 3px;
        background: #10234835;
        margin-top: 10px
    }

        .receipt i:nth-child(3) {
            width: 65%
        }

    .receipt div {
        font-size: 50px;
        font-weight: 700;
        line-height: 1.6
    }

    .receipt small {
        font-size: 9px;
        letter-spacing: 2px;
        font-weight: 700
    }

.seal {
    position: absolute;
    bottom: 15px;
    right: 5%;
    width: 80px;
    height: 80px;
    background: #102848;
    border: 3px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 35px;
    color: var(--gold);
    box-shadow: 0 10px 20px #0006
}

.conditions-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    padding: 30px 20px 0
}

    .conditions-row > div {
        border-left: 2px solid #ffca0055;
        padding-left: 20px
    }

    .conditions-row span {
        font-size: 9px;
        color: var(--gold);
        letter-spacing: 2px
    }

    .conditions-row p {
        font-size: 11px;
        color: var(--muted);
        margin: 8px 0 0
    }

.responsible-section {
    padding-block: 75px;
    background: #040d1e;
    border-block: 1px solid var(--line)
}

.responsible-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 65px;
    align-items: center
}

.age-emblem {
    width: 200px;
    height: 200px;
    border: 1px solid #ffca0070;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gold);
    font: 700 100px var(--display);
    box-shadow: 0 0 0 13px #ffca0005,0 0 0 14px #ffca0015
}

    .age-emblem span {
        font-size: 50px
    }

.responsible-layout h2 {
    font-size: 46px
}

.responsible-layout p {
    font-size: 12px;
    color: var(--muted)
}

.responsible-layout .eyebrow {
    color: var(--gold);
    font-size: 10px
}

.care-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 30px;
    margin-top: 25px
}

    .care-grid p {
        margin: 0
    }

    .care-grid b {
        display: block;
        color: var(--text);
        margin-bottom: 5px
    }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 22px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: linear-gradient(120deg,#122649,#0b1931);
    padding: 28px;
    transition: border-color .25s,transform .25s
}

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

.contact-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: #ffca0012;
    border: 1px solid #ffca0050;
    border-radius: 50%;
    color: var(--gold);
    font: bold 28px Arial;
    flex-shrink: 0
}

.contact-card > span:nth-child(2) {
    display: grid;
    gap: 5px
}

.contact-card small {
    font-size: 9px;
    color: var(--gold);
    letter-spacing: 2px
}

.contact-card strong {
    font: 600 28px var(--display)
}

.contact-card span span {
    color: var(--muted);
    font-size: 11px
}

.contact-card > b {
    margin-left: auto;
    color: var(--gold)
}

.policy-note {
    padding-top: 25px;
    font-size: 11px;
    color: var(--muted)
}

#policy-links {
    display: flex;
    gap: 20px
}

    #policy-links a {
        text-decoration: underline;
        color: var(--gold)
    }

footer {
    background: #030b19;
    border-top: 1px solid var(--line)
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
    gap: 35px;
    padding-block: 45px
}

    .footer-main h3 {
        font: 600 10px 'DM Sans',sans-serif;
        color: var(--gold);
        letter-spacing: 1.5px;
        margin-bottom: 17px
    }

    .footer-main p, .footer-main > div > a:not(.brand) {
        display: block;
        font-size: 11px;
        color: var(--muted);
        margin: 10px 0
    }

    .footer-main .brand {
        margin-bottom: 5px
    }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    font-size: 9px;
    color: var(--muted)
}

    .footer-bottom a {
        color: var(--gold)
    }

.reveal.pending {
    opacity: 0;
    transform: translateY(24px)
}

.reveal {
    transition: opacity .7s,transform .7s
}

.motion-paused * {
    animation-play-state: paused !important
}

.motion-paused .reveal {
    transition: none
}

    .motion-paused .reveal.pending {
        opacity: 1;
        transform: none
    }

@keyframes entry {
    from {
        opacity: 0;
        translate: 0 20px
    }

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

@keyframes float-card {
    0%,100% {
        transform: translateY(0) rotate(var(--tilt))
    }

    50% {
        transform: translateY(-12px) rotate(calc(var(--tilt) + 4deg))
    }
}

@keyframes float-chip {
    0%,100% {
        transform: translateY(0) rotate(-12deg)
    }

    50% {
        transform: translateY(-15px) rotate(6deg)
    }
}

@keyframes wheel {
    to {
        transform: rotate(360deg)
    }
}

@keyframes spark {
    0%,100% {
        opacity: .2;
        transform: scale(.7)
    }

    50% {
        opacity: .85;
        transform: scale(1.1)
    }
}

@keyframes phone-float {
    0%,100% {
        transform: translateY(0) rotate(6deg)
    }

    50% {
        transform: translateY(-12px) rotate(4deg)
    }
}

@media(min-width:901px) {
    .menu-toggle {
        display: none
    }

    .header nav {
        display: flex !important
    }
}

@media(max-width:1100px) {
    nav {
        gap: 15px
    }

    .header .compact {
        display: none
    }

    .hero-layout {
        gap: 40px
    }

    .hero .button {
        padding-inline: 16px;
        font-size: 10px
    }

    .mobile-layout {
        gap: 45px
    }

    .withdrawal {
        gap: 35px;
        padding: 40px
    }

    .stage-label {
        letter-spacing: 1.5px
    }
}

@media(max-width:900px) {
    .wrap {
        width: calc(100% - 40px)
    }

    .topline {
        padding-inline: 20px;
        font-size: 8px
    }

    .header-inner {
        min-height: 76px;
        flex-wrap: wrap
    }

    .header nav {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 15px
    }

        .header nav > a {
            padding: 12px 5px;
            font-size: 14px;
            border-bottom: 1px solid var(--line)
        }

        .header nav .compact {
            display: flex;
            margin-top: 10px
        }

    .header .menu-toggle {
        display: block
    }

        .header .menu-toggle[hidden] {
            display: none
        }

    .hero-layout {
        padding-block: 65px 95px;
        gap: 35px;
        min-height: 630px
    }

    h1 {
        font-size: 76px
    }

    .hero-description {
        font-size: 14px
    }

    .actions {
        gap: 10px
    }

    .hero .button {
        font-size: 10px
    }

    .casino-stage {
        margin-right: 15px
    }

    .playing-card {
        width: 80px;
        height: 115px
    }

        .playing-card span {
            font-size: 14px
        }

        .playing-card b {
            font-size: 45px
        }

    .chip-one {
        width: 70px;
        height: 70px;
        right: -20px
    }

    .chip-two {
        width: 80px;
        height: 80px;
        right: -20px
    }

    .chip span {
        font-size: 27px
    }

    .card-front {
        left: 10px
    }

    .card-back {
        left: -35px
    }

    .hero-bottom {
        font-size: 8px
    }

    .section {
        padding-block: 70px
    }

    .section-heading {
        gap: 25px
    }

        .section-heading > p {
            max-width: 270px;
            font-size: 12px
        }

    .identity-grid {
        gap: 14px
    }

    .card-copy {
        padding: 20px
    }

        .card-copy h3 {
            font-size: 27px
        }

    .illustration {
        height: 210px
    }

    .mobile-layout {
        gap: 35px
    }

        .mobile-layout h2 {
            font-size: 48px
        }

    .smartphone {
        width: 240px
    }

    .phone-scene figcaption {
        max-width: 235px
    }

    .withdrawal {
        grid-template-columns: .7fr 1.3fr;
        gap: 25px;
        padding: 35px
    }

        .withdrawal h2 {
            font-size: 43px
        }

        .withdrawal .button {
            font-size: 10px;
            padding-inline: 15px
        }

    .responsible-layout {
        grid-template-columns: 150px 1fr;
        gap: 40px
    }

    .age-emblem {
        width: 140px;
        height: 140px;
        font-size: 72px
    }

        .age-emblem span {
            font-size: 38px
        }

    .contact-card {
        padding: 22px;
        gap: 15px
    }

        .contact-card strong {
            font-size: 25px
        }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 25px
    }
}

@media(max-width:600px) {
    html {
        scroll-padding-top: 90px
    }

    .wrap {
        width: calc(100% - 36px)
    }

    .topline {
        font-size: 7px;
        letter-spacing: .6px;
        padding: 8px 18px
    }

    .header-inner {
        min-height: 72px
    }

    .brand img {
        width: 42px;
        height: 42px
    }

    .brand > span {
        font-size: 27px
    }

    .brand small {
        font-size: 7px
    }

    .hero-layout {
        grid-template-columns: 1fr;
        padding: 45px 0 105px;
        gap: 70px
    }

    .eyebrow {
        font-size: 9px;
        letter-spacing: 1.8px;
        margin-bottom: 19px
    }

    h1 {
        font-size: clamp(66px,16vw,90px);
        margin-bottom: 23px
    }

    .hero-description {
        font-size: 14px;
        max-width: 380px
    }

    .hero .button {
        font-size: 10px;
        padding: 14px 16px;
        gap: 16px
    }

    .hero-caption {
        margin-top: 25px
    }

    .casino-stage {
        width: 78%;
        max-width: 330px;
        margin: 0 auto
    }

    .playing-card {
        width: 80px;
        height: 115px
    }

    .card-back {
        bottom: -25px;
        left: -30px
    }

    .card-front {
        bottom: -42px;
        left: 18px
    }

    .chip-one {
        width: 72px;
        height: 72px
    }

    .chip-two {
        width: 83px;
        height: 83px
    }

    .stage-label {
        bottom: -78px;
        font-size: 7px;
        letter-spacing: 1.3px
    }

    .hero-bottom {
        flex-wrap: wrap;
        gap: 14px;
        padding: 18px 0
    }

        .hero-bottom > span {
            display: none
        }

    .ribbon {
        justify-content: flex-start;
        padding-block: 17px;
        font-size: 14px;
        gap: 22px
    }

    .section {
        padding-block: 60px
    }

    .section-heading {
        display: block;
        margin-bottom: 28px
    }

        .section-heading > p {
            max-width: 100%;
            margin-top: 20px
        }

    .identity-grid {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .identity-card {
        display: grid;
        grid-template-columns: 42% 58%;
        align-items: stretch
    }

    .illustration {
        height: auto;
        min-height: 240px;
        border-right: 1px solid var(--line);
        border-bottom: 0
    }

    .mini-card {
        width: 72px;
        height: 105px;
        font-size: 18px;
        top: 75px;
        left: calc(50% - 60px)
    }

        .mini-card > span {
            font-size: 42px;
            margin-top: 6px
        }

        .mini-card.right {
            left: calc(50% - 15px);
            top: 60px
        }

    .art-star {
        top: 20px;
        right: 20px;
        font-size: 30px
    }

    .card-copy {
        padding: 25px 18px
    }

        .card-copy h3 {
            font-size: 28px
        }

        .card-copy p {
            font-size: 11px
        }

    .card-number {
        font-size: 7px;
        letter-spacing: 1px
    }

    .art-chip {
        width: 80px;
        height: 80px
    }

        .art-chip.one {
            left: calc(50% - 55px);
            top: 115px
        }

        .art-chip.two {
            left: calc(50% - 25px);
            top: 97px
        }

        .art-chip.three {
            left: calc(50% - 48px);
            top: 65px
        }

    .small-wheel {
        width: 180px;
        height: 180px;
        left: calc(50% - 90px);
        top: 50px
    }

    .roulette span {
        font-size: 42px
    }

    .mobile-layout {
        grid-template-columns: 1fr;
        gap: 60px;
        padding-block: 60px
    }

        .mobile-layout h2 {
            font-size: 48px
        }

    .smartphone {
        width: 258px
    }

    .phone-scene figcaption {
        max-width: 280px
    }

    .phone-orbit {
        width: 330px;
        height: 330px;
        top: 80px
    }

    .withdrawal {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 25px
    }

    .withdrawal-art {
        min-height: 190px
    }

    .receipt {
        width: 140px;
        height: 185px;
        padding: 16px
    }

        .receipt > span {
            font-size: 22px
        }

        .receipt div {
            font-size: 32px
        }

        .receipt small {
            font-size: 7px
        }

    .seal {
        height: 65px;
        width: 65px;
        right: 19%;
        bottom: -5px;
        font-size: 26px
    }

    .withdrawal h2 {
        font-size: 43px
    }

    .withdrawal .button {
        gap: 15px;
        width: 100%;
        font-size: 10px
    }

    .conditions-row {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 26px 8px 0
    }

    .responsible-section {
        padding-block: 60px
    }

    .responsible-layout {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .age-emblem {
        width: 100px;
        height: 100px;
        font-size: 54px;
        margin-left: 10px
    }

        .age-emblem span {
            font-size: 28px
        }

    .care-grid {
        gap: 20px
    }

    .responsible-layout h2 {
        font-size: 44px
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .contact-card {
        padding: 24px
    }

        .contact-card strong {
            font-size: 28px
        }

    .footer-main {
        gap: 30px 22px;
        padding-block: 35px
    }

        .footer-main > div:first-child {
            grid-column: 1/-1
        }

    .footer-bottom {
        flex-wrap: wrap;
        gap: 12px;
        font-size: 8px
    }

        .footer-bottom > span:nth-child(2) {
            width: 100%;
            order: 3
        }
}

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

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

    .playing-card {
        transform: rotate(var(--tilt))
    }

    .reveal.pending {
        opacity: 1;
        transform: none
    }
}

@media(max-width:380px) {
    .identity-card {
        grid-template-columns: 1fr
    }

    .illustration {
        height: 210px;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .card-copy h3 {
        font-size: 30px
    }

    .card-copy p {
        font-size: 12px
    }

    .care-grid {
        grid-template-columns: 1fr
    }

    .contact-card {
        padding: 20px 15px;
        gap: 12px
    }

        .contact-card strong {
            font-size: 25px
        }
}
/* Fondo vivo: capas decorativas que no interceptan los enlaces. */
.hero::before{content:'';position:absolute;inset:-20%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 25% 35%,#1d5ea874,transparent 45%),radial-gradient(ellipse at 80% 65%,#d7a83d30,transparent 45%),radial-gradient(ellipse at 60% 15%,#123e8a80,transparent 50%);animation:banner-light 18s ease-in-out infinite alternate;will-change:transform}
.hero-grid{inset:-80px;animation:banner-grid 24s linear infinite;opacity:.35}
.hero-floaters{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-layout,.hero-bottom{position:relative;z-index:1}
.drift-chip{width:68px;height:68px;opacity:.35;animation:banner-drift 13s ease-in-out infinite;--rotation:20deg}
.drift-chip span{font-size:23px}
.drift-one{left:2%;top:10%;animation-delay:-3s}
.drift-two{left:44%;top:65%;width:90px;height:90px;animation-delay:-8s}
.drift-three{right:2%;top:48%;animation-delay:-5s}
.drift-four{left:17%;bottom:7%;width:48px;height:48px;animation-delay:-10s}
.drift-card{width:64px;height:94px;opacity:.25;animation:banner-drift 15s ease-in-out infinite;--rotation:-18deg}
.drift-card span{font-size:11px;top:5px;left:5px}.drift-card span:last-child{right:5px;bottom:5px}.drift-card b{font-size:34px}
.drift-five{left:39%;top:7%;animation-delay:-4s}
.drift-six{left:3%;bottom:23%;color:#ac2036;--rotation:23deg;animation-delay:-9s}
.drift-seven{right:3%;top:9%;color:#ac2036;--rotation:32deg;animation-delay:-12s}
.spotlight-button{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#ffecaa,#ffd052,#ffe49a);border-color:#fff0bd;animation:button-glow 3.6s ease-in-out infinite}
.spotlight-button::before{content:'';position:absolute;inset:-65% auto -65% -80%;width:45%;pointer-events:none;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:skewX(-22deg);animation:button-shine 4.8s ease-in-out infinite}
.spotlight-button:hover,.spotlight-button:focus-visible{animation-play-state:paused;box-shadow:0 0 18px #ffca0075,0 0 45px #ffc64845;transform:translateY(-3px)}
@keyframes banner-light{from{transform:translate(-3%,-2%) rotate(-4deg) scale(1)}to{transform:translate(5%,4%) rotate(6deg) scale(1.12)}}
@keyframes banner-grid{from{transform:translate(0,0)}to{transform:translate(75px,75px)}}
@keyframes banner-drift{0%,100%{transform:translate(0,0) rotate(var(--rotation))}50%{transform:translate(18px,-32px) rotate(calc(var(--rotation) + 22deg))}}
@keyframes button-glow{0%,100%{translate:0 0;box-shadow:0 5px 22px #ffc64840,0 0 8px #ffdb6320}50%{translate:0 -4px;box-shadow:0 9px 35px #ffc64875,0 0 18px #ffdb6340}}
@keyframes button-shine{0%,25%{left:-80%}65%,100%{left:150%}}
.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@media(max-width:600px){.drift-chip{width:45px;height:45px;opacity:.24}.drift-chip span{font-size:17px}.drift-card{width:45px;height:66px;opacity:.18}.drift-card span{font-size:8px}.drift-card b{font-size:25px}.drift-one{top:3%;left:85%}.drift-two{left:2%;top:57%}.drift-three{top:85%}.drift-four{left:5%;bottom:3%}.drift-five{left:55%;top:35%}.drift-six{left:1%;bottom:35%}.drift-seven{right:1%;top:48%}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero-grid,.drift-chip,.drift-card,.spotlight-button,.spotlight-button::before{animation:none!important}.spotlight-button::before{display:none}.spotlight-button{box-shadow:0 5px 25px #ffc64845}}

/* Refinamiento visual: cabecera integrada, luz ambiental y formas suaves. */
body{background:radial-gradient(ellipse at 78% 3%,#24569a65,transparent 23%),#061126}
.topline{position:relative;z-index:21;background:transparent;border:0}
.header{background:transparent;border-bottom:0;backdrop-filter:none;transition:background .3s,box-shadow .3s}
.header.is-scrolled{background:#061126ad;backdrop-filter:blur(22px);box-shadow:0 8px 28px #00000015}
.hero{margin-top:-121px;padding-top:121px;background:radial-gradient(ellipse at 75% 30%,#204d9066,transparent 60%),linear-gradient(120deg,#051022,#0a1e3e)}
.hero-layout{grid-template-columns:1.14fr 1fr;gap:45px}
.hero h1{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:clamp(66px,7.6vw,110px);line-height:1.08;letter-spacing:-2px;text-shadow:0 5px 0 #0002,0 0 38px #a5cfff15}
.hero h1 em{display:inline-block;font-size:1.28em;letter-spacing:-3px;background:linear-gradient(110deg,#fff6ce,#ffd156 50%,#ffeaab);background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 5px 0 #855a2526) drop-shadow(0 0 26px #e7b23c35)}
.button,.button.compact,.button.outline{border-radius:999px;padding-inline:26px}
.menu-toggle,#motion-toggle{border-radius:999px}
#motion-toggle{padding:9px 16px}
main>section{position:relative;isolation:isolate}
.section::before{content:'';position:absolute;z-index:-1;inset:0 calc((1200px - 100vw)/2);pointer-events:none;background:radial-gradient(ellipse at 18% 35%,#245aa43d,transparent 62%),radial-gradient(ellipse at 85% 70%,#c593301c,transparent 50%)}
#retiros::before{background:radial-gradient(ellipse at 76% 45%,#3879c43d,transparent 65%),radial-gradient(ellipse at 15% 65%,#f1c2531f,transparent 50%)}
#contacto::before{background:radial-gradient(ellipse at 50% 60%,#2e609c45,transparent 65%),radial-gradient(ellipse at 90% 25%,#ffca0020,transparent 50%)}
.mobile-section{background:radial-gradient(ellipse at 78% 45%,#3879c46b,transparent 65%),radial-gradient(ellipse at 12% 85%,#d8b34b1a,transparent 55%),#0b1d38;border-color:#9ac5ff20}
.responsible-section{background:radial-gradient(ellipse at 20% 45%,#26548c55,transparent 60%),radial-gradient(ellipse at 88% 50%,#c69b3120,transparent 60%),#08162c;border-color:#9ac5ff20}
.identity-card{background:linear-gradient(140deg,#1c3960,#0b1c35);box-shadow:inset 0 1px 0 #c8dfff15,0 10px 40px #0002}
.illustration{background:radial-gradient(ellipse at 45% 40%,#437abb85,transparent 75%)}
.brand-image{animation:brand-hover 9s ease-in-out infinite}
.brand img{animation:logo-breathe 8s ease-in-out infinite}
.illustration>*:not(.art-star){animation:illustration-hover 7s ease-in-out infinite}
.illustration>*:nth-child(2){animation-delay:-2s}.illustration>*:nth-child(3){animation-delay:-4s}
.receipt{animation:illustration-hover 8s ease-in-out infinite}.seal{animation:illustration-hover 7s -3s ease-in-out infinite}
.smartphone>img{animation:logo-breathe 10s ease-in-out infinite}
.pointer-glow{position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:19;background:radial-gradient(circle,#ffe3a31c 0%,#8fbfff0c 35%,transparent 69%);opacity:0;transition:opacity .3s;will-change:transform;mix-blend-mode:screen}
.pointer-glow.visible{opacity:1}.motion-paused .pointer-glow{opacity:0}
@keyframes brand-hover{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes illustration-hover{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes logo-breathe{0%,100%{scale:1}50%{scale:1.025}}
@media(max-width:1264px){.section::before{inset-inline:-32px}}
@media(max-width:900px){.hero{margin-top:-106px;padding-top:106px}.hero h1{font-size:clamp(56px,7.5vw,68px);letter-spacing:-1.5px}.hero h1 em{font-size:1.25em}.hero-layout{gap:28px}.section::before{inset-inline:-20px}.header:has(.menu-toggle[aria-expanded='true']){background:#07152cf5;backdrop-filter:blur(22px)}.header nav .compact{border-radius:999px;padding:14px 22px}}
@media(max-width:600px){.hero{margin-top:-101px;padding-top:101px}.hero-layout{grid-template-columns:1fr;gap:70px}.hero h1{font-size:clamp(52px,13.8vw,80px);letter-spacing:-1px}.hero h1 em{font-size:1.32em;letter-spacing:-2px}.hero .button{border-radius:999px;padding-inline:20px}.section::before{inset-inline:-18px}.pointer-glow{display:none}}
@media(prefers-reduced-motion:reduce){.brand-image,.brand img,.illustration>*,.receipt,.seal,.smartphone>img{animation:none!important}.pointer-glow{display:none}.header{transition:none}}
/* El fondo usa el ancho disponible, sin sumar el espacio de la barra de scroll. */
.section::before{inset-inline:calc((min(1200px, 100vw - 64px) - 100vw + 18px)/2)}
@media(max-width:1264px){.section::before{inset-inline:-24px}}
@media(max-width:900px){.section::before{inset-inline:-12px}}
@media(max-width:600px){.section::before{inset-inline:-10px}}
/* Galería informativa: ilustraciones originales construidas con HTML y CSS. */
.guide-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.guide-card{grid-column:span 2;position:relative;isolation:isolate;min-height:430px;border:1px solid #95b8ff35;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 70% 10%,#2867af99,transparent 60%),linear-gradient(145deg,#142c53,#050f23 85%);box-shadow:inset 0 1px 0 #dcecff18,0 18px 40px #0003;transition:border-color .35s,box-shadow .35s,translate .35s}
.guide-card:nth-child(-n+2){grid-column:span 3;min-height:440px}
.guide-card:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
.guide-card:hover,.guide-card:focus-visible{border-color:#ffdb7299;box-shadow:inset 0 1px 0 #ffe7a440,0 12px 45px #377acb35,0 0 20px #ffca0015;translate:0 -5px}
.guide-art{position:relative;height:250px;pointer-events:none;perspective:650px}
.guide-copy{position:relative;z-index:2;padding:0 25px 28px;background:linear-gradient(transparent,#050f2377)}
.guide-kicker{font-size:9px;letter-spacing:2px;color:#ffca00}
.guide-copy h3{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:clamp(42px,4.6vw,64px);line-height:1.05;letter-spacing:-.5px;margin:10px 0 20px;text-shadow:0 3px 0 #15396c,0 0 22px #468be945;display:table;position:relative}
.guide-copy h3::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:3px;background:linear-gradient(90deg,#ffca00,#edb638);transform:scaleX(0);transform-origin:left;transition:transform .4s;box-shadow:0 0 12px #ffca0088}
.guide-card:hover h3::after,.guide-card:focus-visible h3::after{transform:scaleX(1)}
.guide-copy p{font-size:12px;line-height:1.85;color:#bdcbe1;margin:0;max-width:390px}
.guide-card:nth-child(-n+2) .guide-copy h3{font-size:70px}
.slot-machine{position:absolute;top:35px;left:calc(50% - 135px);width:270px;padding:10px 12px 16px;border-radius:22px;background:linear-gradient(140deg,#efd893,#8c6b2c 35%,#102c54 38%,#061227);border:2px solid #ffca00;box-shadow:0 18px 30px #0007,0 0 36px #ffce5225;transform:rotate(-7deg);transition:transform .7s}
.slot-lights{color:#ffca00;text-shadow:0 0 8px #ffca00;letter-spacing:13px;font-size:7px;text-align:center;height:18px;white-space:nowrap}
.slot-window{display:flex;gap:7px;padding:7px;border-radius:12px;background:#030c1d;border:1px solid #e6ba5b77}
.slot-window>div{flex:1;height:115px;overflow:hidden;background:linear-gradient(#c5cbd3,#fffef5 30%,#ece9dd 65%,#9ca6b8);border-radius:7px;box-shadow:inset 0 5px 12px #0005}
.slot-window span{display:block;text-align:center;font:700 79px/115px var(--display);color:#143a71;text-shadow:1px 2px 0 #fff9;transition:transform 1s cubic-bezier(.22,.7,.3,1)}
.slot-window>div:nth-child(2) span{transition-delay:.12s}.slot-window>div:nth-child(3) span{transition-delay:.24s}.slot-base{width:65%;height:5px;margin:12px auto 0;background:#ffca0088;border-radius:8px}
.guide-slots:hover .slot-window span,.guide-slots:focus-visible .slot-window span{transform:translateY(-230px)}
.guide-slots:hover .slot-machine,.guide-slots:focus-visible .slot-machine{transform:rotate(-2deg) translateY(-5px)}
.sports-field{position:absolute;top:15px;left:calc(50% - 140px);width:280px;height:230px;border:2px solid #e8d59b99;transform:rotateX(47deg) rotateZ(-7deg);background:repeating-linear-gradient(#16457380 0 35px,#13375c80 35px 70px);box-shadow:0 0 24px #4c9cdb55,inset 0 0 20px #5999d433;transition:transform .8s}
.field-middle{position:absolute;top:50%;width:100%;border-top:2px solid #eee2b899}.field-circle{position:absolute;top:calc(50% - 35px);left:calc(50% - 35px);width:70px;height:70px;border:2px solid #eee2b899;border-radius:50%}.field-goal{position:absolute;left:25%;width:50%;height:38px;border:2px solid #eee2b899}.goal-top{top:-2px}.goal-bottom{bottom:-2px}
.sports-ball{position:absolute;top:92px;left:calc(50% - 33px);width:66px;height:66px;border-radius:50%;display:grid;place-items:center;color:#0d2245;font-size:40px;line-height:1;background:radial-gradient(circle at 30% 25%,#fff,#deded5 60%,#8296b7);box-shadow:0 15px 15px #0007,inset -6px -6px 10px #132e4b50;transition:transform 1s}
.guide-sports:hover .sports-ball,.guide-sports:focus-visible .sports-ball{transform:translate(48px,-30px) rotate(180deg)}.guide-sports:hover .sports-field,.guide-sports:focus-visible .sports-field{transform:rotateX(38deg) rotateZ(0)}
.guide-wheel{position:absolute;width:226px;height:226px;top:10px;left:calc(50% - 113px);border:6px ridge #ffca00;border-radius:50%;background:repeating-conic-gradient(#24599a 0deg 15deg,#07152d 15deg 30deg);box-shadow:0 0 0 2px #e6bb5280,0 18px 30px #0008,0 0 28px #ffcf5620;animation:guide-wheel-spin 8s linear infinite;animation-play-state:paused}
.guide-wheel::before{content:'';position:absolute;inset:30px;border-radius:50%;border:3px solid #ffca00;background:radial-gradient(#2b4d72,#0a1931);box-shadow:0 0 0 5px #020c1e}
.wheel-labels{position:absolute;inset:5px}.wheel-labels span{position:absolute;left:calc(50% - 10px);top:0;width:20px;height:202px;text-align:center;font-size:9px;color:#fff1ba;transform:rotate(calc(var(--i)*30deg))}.wheel-labels span:nth-child(1){--i:0}.wheel-labels span:nth-child(2){--i:1}.wheel-labels span:nth-child(3){--i:2}.wheel-labels span:nth-child(4){--i:3}.wheel-labels span:nth-child(5){--i:4}.wheel-labels span:nth-child(6){--i:5}.wheel-labels span:nth-child(7){--i:6}.wheel-labels span:nth-child(8){--i:7}.wheel-labels span:nth-child(9){--i:8}.wheel-labels span:nth-child(10){--i:9}.wheel-labels span:nth-child(11){--i:10}.wheel-labels span:nth-child(12){--i:11}
.wheel-center{position:absolute;inset:50px}.wheel-center i{position:absolute;width:100%;height:5px;top:calc(50% - 2px);background:linear-gradient(90deg,#ad791c,#ffca00,#ad791c);border-radius:4px}.wheel-center i:nth-child(2){rotate:60deg}.wheel-center i:nth-child(3){rotate:120deg}.wheel-center b{position:absolute;width:24px;height:24px;top:calc(50% - 12px);left:calc(50% - 12px);background:#ffca00;border:5px solid #a97922;border-radius:50%}.wheel-ball{position:absolute;top:35px;right:42px;width:12px;height:12px;border-radius:50%;background:radial-gradient(at 30% 30%,white,#a5b5cc);box-shadow:0 3px 5px #0009}
.guide-roulette:hover .guide-wheel,.guide-roulette:focus-visible .guide-wheel{animation-play-state:running}
.guide-playing-card{position:absolute;width:100px;height:145px;padding:10px;border-radius:11px;border:1px solid #ffca00;background:linear-gradient(130deg,#fffdf2,#c5cedc);color:#152c52;box-shadow:0 10px 20px #0008;transition:transform .7s}
.guide-playing-card>span{font:700 22px/1.05 Georgia,serif}.guide-playing-card>b{display:block;text-align:center;font:58px/1 Georgia,serif}.twenty-one{position:absolute;top:-8px;left:calc(50% - 65px);font:130px/1.2 var(--display);color:transparent;-webkit-text-stroke:1px #f5ce6688}
.bj-first{left:calc(50% - 91px);top:80px;transform:rotate(-8deg)}.bj-second{left:calc(50% - 7px);top:90px;transform:rotate(12deg);color:#ad2940}
.guide-blackjack:hover .bj-first,.guide-blackjack:focus-visible .bj-first{transform:translate(-12px,-13px) rotate(-17deg)}.guide-blackjack:hover .bj-second,.guide-blackjack:focus-visible .bj-second{transform:translate(12px,-6px) rotate(20deg)}
.poker-fan{position:absolute;left:50%;top:40px;width:0;height:170px}.poker-fan .guide-playing-card{left:-50px;top:0;width:85px;height:125px;background:linear-gradient(130deg,#214a80,#06152f);color:#ffca00;transform-origin:50% 160px;transform:rotate(var(--angle));border-color:#e8bd5a88}.poker-fan .guide-playing-card>span{font-size:17px}.poker-fan .guide-playing-card>b{font-size:45px}.poker-fan .guide-playing-card:nth-child(1){--angle:-30deg;--spread:-43deg}.poker-fan .guide-playing-card:nth-child(2){--angle:-10deg;--spread:-15deg}.poker-fan .guide-playing-card:nth-child(3){--angle:10deg;--spread:15deg}.poker-fan .guide-playing-card:nth-child(4){--angle:30deg;--spread:43deg}
.guide-poker:hover .guide-playing-card,.guide-poker:focus-visible .guide-playing-card{transform:translateY(-5px) rotate(var(--spread))}
.poker-stack{position:absolute;right:20%;bottom:10px;width:52px;height:55px;transition:transform .7s}.poker-stack i{position:absolute;width:52px;height:22px;border-radius:50%;border:3px dashed #ffca00;background:#bd913d;box-shadow:0 5px 0 #14346a,0 7px 0 #d6af52}.poker-stack i:nth-child(1){top:28px}.poker-stack i:nth-child(2){top:14px}.poker-stack i:nth-child(3){top:0}.guide-poker:hover .poker-stack,.guide-poker:focus-visible .poker-stack{transform:translateY(-8px) rotate(-8deg)}
@keyframes guide-wheel-spin{to{transform:rotate(360deg)}}
.motion-paused .guide-card,.motion-paused .guide-card *,.motion-paused .guide-card *::after{transition:none!important}.motion-paused .guide-card:hover,.motion-paused .guide-card:focus-visible{translate:none}
@media(max-width:900px){.guide-grid{gap:18px}.guide-card{grid-column:span 3}.guide-card:last-child{grid-column:2/span 4}.guide-card:nth-child(-n+2){min-height:430px}.guide-copy h3,.guide-card:nth-child(-n+2) .guide-copy h3{font-size:52px}.slot-machine{scale:.85}.sports-field{scale:.85}.guide-copy{padding-inline:22px}.guide-kicker{font-size:8px}}
@media(max-width:600px){.guide-grid{grid-template-columns:1fr;gap:22px}.guide-card,.guide-card:nth-child(-n+2),.guide-card:last-child{grid-column:auto;min-height:420px}.guide-copy h3,.guide-card:nth-child(-n+2) .guide-copy h3{font-size:55px}.guide-art{height:245px}.guide-copy{padding:0 24px 27px}.guide-copy p{font-size:12px}.game-guide .section-heading h2{font-size:46px}}
@media(prefers-reduced-motion:reduce){.guide-card,.guide-card *,.guide-card *::after{animation:none!important;transition:none!important}.guide-card:hover,.guide-card:focus-visible{translate:none}}
/* Tiras continuas, títulos luminosos y botón con barrido cromático. */
.marquee{display:block;overflow:hidden;padding:18px 0;background:linear-gradient(110deg,#e5b645,#ffca00,#e5b645);color:#0b1b35;border-block:1px solid #ffca00;box-shadow:0 0 30px #eabd3d20}
.marquee-track{display:flex;width:max-content;animation:ribbon-scroll 28s linear infinite}
.marquee-group{display:flex;align-items:center;justify-content:space-around;gap:42px;flex-shrink:0;min-width:100vw;padding-right:42px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:20px;letter-spacing:2.5px;font-weight:700}
.marquee-group b{font-size:22px}.marquee:hover .marquee-track{animation-play-state:paused}
.withdrawal-ribbon{margin-bottom:26px;border-radius:14px;padding-block:14px;transform:rotate(-1deg)}
.withdrawal-ribbon .marquee-track{animation-duration:32s;animation-direction:reverse}
.withdrawal-ribbon .marquee-group{min-width:1200px;font-size:18px}
.section-heading h2,.mobile-layout h2,.withdrawal h2,.responsible-layout h2{font-size:clamp(48px,5.5vw,78px);line-height:1.1;letter-spacing:-.7px}
h2 em{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:.94em;letter-spacing:-.5px;line-height:1.2;background:linear-gradient(105deg,#e9ae31 0%,#ffca00 24%,#ffca00 40%,#ffca00 50%,#e9ae31 75%,#ffca00 100%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #8b5f252c) drop-shadow(0 0 17px #ffc84c38);animation:title-gold 8s ease-in-out infinite}
.section-heading{align-items:center}.section-heading>div{min-width:0;flex:1}.section-heading>p{flex:0 1 310px}
.withdrawal{grid-template-columns:.65fr 1.35fr;gap:38px}.withdrawal h2{font-size:clamp(45px,4.8vw,64px)}
.recharge-button{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(100deg,#e9ad2d,#ffca00,#ffca00,#f5c347,#e9ad2d);background-size:300% 100%;animation:recharge-color 4s ease-in-out infinite;box-shadow:0 0 28px #f9c74c36}
.recharge-button::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#c7891722,#fff3ba88);transform:scaleX(0);transform-origin:left;animation:recharge-fill 4s ease-in-out infinite;pointer-events:none}
@keyframes ribbon-scroll{to{transform:translateX(-50%)}}
@keyframes title-gold{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes recharge-color{0%,100%{background-position:0% 50%}60%{background-position:100% 50%}}
@keyframes recharge-fill{0%{transform:scaleX(0);opacity:0}15%{opacity:1}80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@media(max-width:900px){.section-heading h2,.mobile-layout h2,.responsible-layout h2{font-size:54px}.withdrawal{grid-template-columns:.6fr 1.4fr;gap:24px}.withdrawal h2{font-size:46px}.marquee-group{font-size:18px;gap:30px;padding-right:30px}}
@media(max-width:600px){.section-heading h2,.game-guide .section-heading h2,.mobile-layout h2,.responsible-layout h2{font-size:clamp(42px,10.5vw,58px)}.withdrawal{grid-template-columns:1fr}.withdrawal h2{font-size:clamp(34px,8.7vw,49px)}.marquee-group{font-size:17px;letter-spacing:1.5px}.withdrawal-ribbon{border-radius:10px}.withdrawal-ribbon .marquee-group{font-size:16px}.marquee{padding-block:13px}}
@media(prefers-reduced-motion:reduce){.marquee-track,h2 em,.recharge-button,.recharge-button::before{animation:none!important}.marquee-group{min-width:0;flex-wrap:wrap;white-space:normal;gap:12px 20px;padding:0 18px}.marquee-track{width:100%}.marquee-group+.marquee-group{display:none}.withdrawal-ribbon{transform:none}}
/* Ribbon compartido, con recorte horizontal local y extremos sobrantes. */
.withdrawal-ribbon-bleed{position:relative;width:100vw;left:50%;margin-left:-50vw;overflow:hidden;padding:28px 0;margin-bottom:22px}
.withdrawal-ribbon{width:calc(100% + 120px);margin:0 -60px;border-radius:0;transform:rotate(-1deg);padding-block:18px}
.withdrawal-ribbon .marquee-track{animation-duration:28s;animation-direction:normal}
.withdrawal-ribbon .marquee-group{min-width:100vw;font-size:20px}
/* La sección de retiros ocupa el ancho disponible sin que 100vw sume la barra de scroll. */
#retiros{width:100%;max-width:none;overflow:clip;padding-top:50px}
#retiros>.withdrawal,#retiros>.conditions-row{width:min(1200px,calc(100% - 64px));margin-inline:auto}
.withdrawal-ribbon-bleed{width:100%;left:0;margin-left:0}
.mobile-section{position:relative;isolation:isolate;background:radial-gradient(ellipse at 75% 40%,#285da579,transparent 62%),#08172f}
.mobile-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.mobile-atmosphere::before,.mobile-atmosphere::after{content:'';position:absolute;width:65%;height:75%;border-radius:50%;filter:blur(50px);animation:atmosphere-drift 18s ease-in-out infinite alternate;background:radial-gradient(ellipse,#2979ca60,transparent 68%);right:-10%;top:-10%}
.mobile-atmosphere::after{background:radial-gradient(ellipse,#edbd4240,transparent 68%);right:20%;top:40%;animation-delay:-9s}
.mobile-atmosphere i{position:absolute;width:4px;height:4px;background:#ffca00;border-radius:50%;box-shadow:0 0 13px #ffde8b;animation:atmosphere-particle 9s ease-in-out infinite}
.mobile-atmosphere i:nth-child(1){left:9%;top:20%}.mobile-atmosphere i:nth-child(2){left:40%;top:12%;animation-delay:-3s}.mobile-atmosphere i:nth-child(3){left:63%;top:70%;animation-delay:-5s}.mobile-atmosphere i:nth-child(4){left:90%;top:40%;animation-delay:-7s}.mobile-atmosphere i:nth-child(5){left:20%;top:82%;animation-delay:-4s}.mobile-atmosphere i:nth-child(6){left:55%;top:42%;animation-delay:-2s}.mobile-atmosphere i:nth-child(7){left:85%;top:88%;animation-delay:-6s}.mobile-atmosphere i:nth-child(8){left:73%;top:8%;animation-delay:-1s}
.mobile-atmosphere b{position:absolute;right:4%;top:25%;width:280px;height:280px;border:1px solid #ffca0025;transform:rotate(35deg);border-radius:45px;animation:atmosphere-drift 22s ease-in-out infinite alternate}.mobile-atmosphere b:last-child{right:35%;top:65%;width:90px;height:90px;border-radius:50%;animation-delay:-12s}
.mobile-layout{grid-template-columns:1.12fr 1fr;gap:65px;padding-block:105px}
.device-shell{position:relative;width:320px;padding:8px;border-radius:49px;background:linear-gradient(120deg,#9cabc1,#223550 22%,#70839a 50%,#111c31 75%,#c8a658);box-shadow:0 0 0 2px #020914,8px 12px 0 #030b1a,30px 40px 70px #0007,0 0 70px #4a8bdc22;transform:rotate(5deg);animation:device-float 10s ease-in-out infinite}
.device-screen{position:relative;overflow:hidden;border:3px solid #030916;border-radius:40px;background:#061124;padding:15px 13px 12px}
.device-island{position:absolute;top:10px;left:calc(50% - 40px);width:80px;height:23px;background:#01050c;border-radius:20px;box-shadow:inset 0 1px 2px #ffffff18}
.device-island::after{content:'';position:absolute;right:12px;top:8px;width:7px;height:7px;background:radial-gradient(circle at 30% 30%,#7483bc,#101632);border-radius:50%}
.device-side{position:absolute;left:-5px;top:125px;width:4px;height:60px;border-radius:3px;background:#627389;box-shadow:0 74px 0 #627389}
.device-status{display:flex;justify-content:space-between;font:600 10px 'DM Sans',sans-serif;padding:0 9px 23px;color:#eff4ff}
.device-brand{display:flex;align-items:center;gap:8px;padding:9px 0 15px}.device-brand img{width:34px;height:34px;border-radius:50%}.device-brand>b{font:700 25px/1 var(--display);letter-spacing:1px}.device-brand small{display:block;font:6px/2.3 'DM Sans',sans-serif;letter-spacing:1px;color:var(--gold)}.device-brand>span{margin-left:auto;color:var(--gold);font-size:10px;border:1px solid #ffca0055;border-radius:20px;padding:4px 7px}
.device-banner{display:grid;gap:4px;border:1px solid #ffca0040;border-radius:12px;padding:14px;background:linear-gradient(125deg,#214979,#0c1c34)}.device-banner small{font-size:7px;letter-spacing:2px;color:var(--gold)}.device-banner strong{font:600 28px var(--display);color:#ffca00}.device-banner>span{font-size:8px;color:#becce1}
.device-caption{display:flex;justify-content:space-between;padding:16px 1px 10px;font:600 12px var(--display)}.device-caption span{font:7px 'DM Sans',sans-serif;color:var(--gold)}
.screen-window{height:310px;overflow:hidden;position:relative;mask-image:linear-gradient(transparent,#000 3%,#000 95%,transparent);border-radius:10px}
.screen-loop{animation:screen-catalog 36s linear infinite;will-change:transform}
.screen-loop-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:10px}
.screen-tile{min-width:0;overflow:hidden;background:#102441;border:1px solid #83a9e12b;border-radius:9px;padding-bottom:9px}.screen-tile img{width:100%;height:auto;aspect-ratio:180/140;object-fit:cover}.screen-tile strong{display:block;padding:7px 8px 0;font:600 17px var(--display);text-transform:uppercase}.screen-tile small{display:block;font-size:7px;color:#b9c9e1;padding:3px 8px 0}
.device-bottom{display:flex;justify-content:space-around;border:1px solid #ffca0035;background:#0c1b32;border-radius:13px;padding:10px 0;font-size:8px;color:#ced9eb;margin-top:8px}.device-bottom span:first-child{color:var(--gold)}.device-home{width:90px;height:4px;border-radius:4px;background:#e2e6ed;margin:12px auto 0}.phone-scene figcaption{max-width:330px;line-height:1.7;margin-top:30px}.phone-orbit{width:450px;height:450px;top:85px}
@keyframes screen-catalog{to{transform:translateY(-50%)}}
@keyframes device-float{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes atmosphere-drift{from{translate:-12px -10px;rotate:-4deg}to{translate:20px 15px;rotate:6deg}}
@keyframes atmosphere-particle{0%,100%{translate:0 0;opacity:.25}50%{translate:10px -22px;opacity:.8}}
@media(max-width:900px){.withdrawal-ribbon .marquee-group{font-size:18px}.mobile-layout{gap:35px}.device-shell{width:285px}.screen-window{height:285px}#retiros>.withdrawal,#retiros>.conditions-row{width:calc(100% - 40px)}}
@media(max-width:600px){.withdrawal-ribbon{padding-block:13px}.withdrawal-ribbon .marquee-group{font-size:17px}.withdrawal-ribbon-bleed{padding-block:18px;margin-bottom:12px}.mobile-layout{grid-template-columns:1fr;padding-block:65px;gap:60px}.device-shell{width:min(300px,calc(100vw - 65px));border-radius:43px}.device-screen{border-radius:35px}.phone-orbit{width:310px;height:310px;top:120px}.device-banner strong{font-size:25px}.screen-window{height:290px}.device-brand>b{font-size:23px}.mobile-atmosphere::before,.mobile-atmosphere::after{filter:blur(25px)}#retiros>.withdrawal,#retiros>.conditions-row{width:calc(100% - 36px)}}
@media(prefers-reduced-motion:reduce){.device-shell,.screen-loop,.mobile-atmosphere *,.mobile-atmosphere::before,.mobile-atmosphere::after{animation:none!important}.device-shell{transform:rotate(3deg)}.screen-window{height:auto;mask-image:none}.screen-loop-group+.screen-loop-group{display:none}.withdrawal-ribbon{transform:rotate(-1deg)}.withdrawal-ribbon .marquee-group{min-width:0;font-size:inherit}}