:root {
    --bg: #020612;
    --panel: rgba(5, 14, 34, .78);
    --panel2: rgba(8, 22, 50, .72);

    --cyan: #56dcff;
    --blue: #168cff;
    --purple: #973cff;
    --pink: #ff43c9;
    --gold: #ffd05b;
    --green: #55ffc0;

    --text: #eef8ff;
    --muted: #9db7d4;

    --line: rgba(86, 220, 255, .27);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        "Segoe UI",
        Inter,
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(93, 26, 174, .48),
            transparent 38%
        ),
        linear-gradient(
            #020612,
            #050b1a 55%,
            #02040a
        );

    overflow-x: hidden;
}

.stars {
    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: .26;

    background-image:
        radial-gradient(
            white 1px,
            transparent 1px
        );

    background-size:
        47px 47px;
}

.aurora {
    position: fixed;

    width: 600px;
    height: 280px;

    filter: blur(100px);

    opacity: .19;

    border-radius: 50%;

    pointer-events: none;
}

.aurora-one {
    background: #7d25ff;
    top: 60px;
    left: -120px;
}

.aurora-two {
    background: #ff2ba8;
    top: 180px;
    right: -180px;
}

.topbar {
    position: sticky;

    top: 0;

    z-index: 50;

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        12px
        clamp(18px, 5vw, 76px);

    background:
        rgba(2, 6, 18, .86);

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid
        rgba(86, 220, 255, .16);
}

.brand {
    display: flex;

    align-items: center;

    gap: 13px;

    color: white;

    text-decoration: none;
}

.brand strong {
    display: block;

    letter-spacing: .16em;

    font-size: 1.05rem;
}

.brand small {
    display: block;

    color: var(--cyan);

    letter-spacing: .19em;

    font-size: .56rem;

    margin-top: 4px;
}

.mini-orb {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            white 0 3%,
            #9dffff 8%,
            #168cff 36%,
            #251477 70%,
            #020612 100%
        );

    box-shadow:
        0 0 22px #168cff,
        inset -5px -5px 14px rgba(0,0,0,.4);
}

nav {
    display: flex;

    gap: 28px;
}

nav a {
    color: #d8edff;

    text-decoration: none;

    font-size: .76rem;

    letter-spacing: .1em;

    text-transform: uppercase;
}

nav a:hover {
    color: white;

    text-shadow:
        0 0 10px
        var(--cyan);
}

.hero {
    min-height: 760px;

    position: relative;

    text-align: center;

    padding:
        72px
        20px
        50px;

    overflow: hidden;
}

.hero:after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 220px;

    opacity: .45;

    background:
        linear-gradient(
            130deg,
            transparent 0 8%,
            #12326b 8.4% 11%,
            transparent 11.4% 18%,
            #36166e 18.4% 21%,
            transparent 21.4%
        );

    clip-path:
        polygon(
            0 100%,
            0 65%,
            6% 38%,
            9% 70%,
            14% 24%,
            18% 67%,
            24% 31%,
            29% 71%,
            35% 25%,
            40% 68%,
            49% 15%,
            54% 68%,
            61% 27%,
            66% 70%,
            73% 33%,
            78% 70%,
            85% 22%,
            90% 68%,
            96% 37%,
            100% 58%,
            100% 100%
        );
}

.eyebrow {
    letter-spacing: .55em;

    color: #cae7ff;

    font-size: .74rem;

    margin-bottom: 12px;
}

.hero h1 {
    margin: 0;

    font-size:
        clamp(
            3.3rem,
            8vw,
            7rem
        );

    line-height: .88;

    letter-spacing: .015em;

    text-shadow:
        0 0 34px
        rgba(22, 140, 255, .3);
}

.hero h1 span {
    color: #ffe193;

    text-shadow:
        0 0 30px
        rgba(255, 208, 91, .42);
}

.motto {
    margin:
        22px 0
        12px;

    font-size:
        clamp(
            .95rem,
            2vw,
            1.45rem
        );

    letter-spacing: .22em;
}

.intro {
    color: var(--muted);

    font-size: 1rem;
}

.orb-zone {
    position: relative;

    width: 300px;
    height: 300px;

    display: grid;

    place-items: center;

    margin:
        12px auto
        -6px;

    z-index: 4;
}

.omni-orb {
    width: 195px;
    height: 195px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 36% 29%,
            white 0 2%,
            #a5ffff 5%,
            #36b6ff 17%,
            #1374e9 37%,
            #1835a5 53%,
            #361376 70%,
            #020612 100%
        );

    box-shadow:
        0 0 24px
        #68ecff,

        0 0 70px
        rgba(22,140,255,.9),

        0 0 125px
        rgba(151,60,255,.55),

        inset
        -18px
        -20px
        42px
        rgba(0,0,0,.35);

    animation:
        orbPulse
        3.2s
        ease-in-out
        infinite;
}

.omni-orb span {
    font-weight: 900;

    font-size: 1.45rem;

    letter-spacing: .09em;

    text-shadow:
        0 0 12px white;
}

.orbit {
    position: absolute;

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

    border-radius: 50%;
}

.orbit-one {
    width: 292px;
    height: 112px;

    transform:
        rotate(-15deg);

    animation:
        rotateOne
        9s
        linear
        infinite;
}

.orbit-two {
    width: 235px;
    height: 90px;

    transform:
        rotate(28deg);

    animation:
        rotateTwo
        7s
        linear
        infinite;
}

@keyframes orbPulse {

    50% {
        transform:
            scale(1.045);

        filter:
            brightness(1.15);
    }
}

@keyframes rotateOne {

    to {
        transform:
            rotate(345deg);
    }
}

@keyframes rotateTwo {

    to {
        transform:
            rotate(-332deg);
    }
}

.entry-grid {
    position: relative;

    z-index: 6;

    width:
        min(
            900px,
            94vw
        );

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 22px;

    margin:
        0 auto;
}

.gateway {
    border-radius:
        15px;

    padding:
        21px
        25px;

    text-align:
        left;

    color:
        white;

    background:
        rgba(
            3,
            13,
            33,
            .86
        );

    backdrop-filter:
        blur(14px);

    cursor:
        pointer;

    transition:
        transform .22s,
        box-shadow .22s;
}

.gateway:hover {
    transform:
        translateY(-5px);
}

.new-user {
    border:
        1px solid
        var(--cyan);

    box-shadow:
        0 0 24px
        rgba(
            22,
            140,
            255,
            .29
        );
}

.existing-user {
    border:
        1px solid
        var(--pink);

    box-shadow:
        0 0 24px
        rgba(
            255,
            67,
            201,
            .25
        );
}

.gateway-title {
    display:
        block;

    margin-bottom:
        7px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    font-size:
        1.05rem;
}

.gateway strong {
    display:
        block;

    font-size:
        1.55rem;

    margin-bottom:
        4px;
}

.gateway small {
    color:
        #b8d1e9;
}

.status-panel,
.world-grid,
.builders-panel,
.vision {
    position:
        relative;

    z-index:
        10;

    width:
        min(
            1180px,
            92vw
        );

    margin:
        0 auto;
}

.status-panel {
    border:
        1px solid
        var(--line);

    border-radius:
        15px;

    background:
        var(--panel);

    backdrop-filter:
        blur(17px);

    overflow:
        hidden;

    margin-top:
        22px;
}

.section-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        18px
        22px;

    border-bottom:
        1px solid
        rgba(
            86,
            220,
            255,
            .14
        );
}

.section-heading h2 {
    margin:
        3px 0
        0;

    font-size:
        1.12rem;
}

.tiny-title,
.gold-label,
.blue-label {
    font-size:
        .68rem;

    letter-spacing:
        .23em;

    font-weight:
        800;
}

.tiny-title,
.blue-label {
    color:
        var(--cyan);
}

.gold-label {
    color:
        var(--gold);
}

.status-time {
    color:
        var(--cyan);

    font-family:
        Consolas,
        monospace;
}

.status-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            1fr
        );
}

.status-grid article {
    padding:
        20px;

    border-right:
        1px solid
        rgba(
            86,
            220,
            255,
            .11
        );
}

.status-grid strong,
.status-grid span {
    display:
        block;
}

.status-grid span {
    color:
        var(--muted);

    margin-top:
        4px;

    font-size:
        .78rem;
}

.status-dot {
    display:
        inline-block;

    width:
        12px;

    height:
        12px;

    border-radius:
        50%;

    margin-bottom:
        10px;
}

.green {
    background:
        var(--green);

    box-shadow:
        0 0 13px
        var(--green);
}

.gold {
    background:
        var(--gold);

    box-shadow:
        0 0 13px
        rgba(
            255,
            208,
            91,
            .66
        );
}

.world-grid {
    display:
        grid;

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

    gap:
        18px;

    padding:
        28px 0;
}

.world-card {
    min-height:
        200px;

    padding:
        25px;

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

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            rgba(
                14,
                40,
                91,
                .71
            ),
            rgba(
                4,
                10,
                25,
                .83
            )
        );

    transition:
        .25s;
}

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

    border-color:
        var(--cyan);

    box-shadow:
        0 15px 45px
        rgba(
            0,
            100,
            255,
            .16
        );
}

.card-icon {
    color:
        var(--cyan);

    font-size:
        2.15rem;
}

.world-card h3 {
    margin:
        22px 0
        8px;
}

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

    line-height:
        1.56;
}

.builders-panel {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        30px;

    padding:
        30px;

    margin-bottom:
        28px;

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

    border-radius:
        15px;

    background:
        linear-gradient(
            90deg,
            rgba(
                42,
                29,
                5,
                .72
            ),
            rgba(
                5,
                17,
                39,
                .86
            )
        );
}

.builders-panel h2 {
    margin:
        7px 0;
}

.builders-panel p {
    color:
        var(--muted);
}

.builder-button,
.primary-button {
    border:
        1px solid
        var(--gold);

    border-radius:
        9px;

    padding:
        14px
        20px;

    color:
        #fff3ce;

    background:
        linear-gradient(
            #72500b,
            #291c02
        );

    font-weight:
        800;

    cursor:
        pointer;
}

.vision {
    text-align:
        center;

    padding:
        55px
        20px
        70px;
}

.vision blockquote {
    margin:
        15px auto;

    max-width:
        840px;

    font-size:
        clamp(
            1.25rem,
            3vw,
            2.3rem
        );

    color:
        #eff8ff;

    line-height:
        1.35;
}

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

footer {
    display:
        flex;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        20px;

    padding:
        28px
        clamp(
            18px,
            5vw,
            76px
        );

    border-top:
        1px solid
        rgba(
            86,
            220,
            255,
            .18
        );

    color:
        #839fbd;

    font-size:
        .68rem;

    letter-spacing:
        .12em;
}

dialog {
    width:
        min(
            560px,
            92vw
        );

    color:
        white;

    background:
        rgba(
            3,
            10,
            27,
            .97
        );

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

    border-radius:
        18px;

    padding:
        32px;

    box-shadow:
        0 0 90px
        rgba(
            22,
            140,
            255,
            .29
        );
}

dialog::backdrop {
    background:
        rgba(
            0,
            2,
            9,
            .78
        );

    backdrop-filter:
        blur(8px);
}

dialog h2 {
    font-size:
        2rem;

    margin:
        8px 0
        10px;
}

dialog p {
    color:
        var(--muted);

    line-height:
        1.55;
}

.close {
    position:
        absolute;

    top:
        11px;

    right:
        15px;

    color:
        white;

    background:
        transparent;

    border:
        0;

    font-size:
        1.8rem;

    cursor:
        pointer;
}

label {
    display:
        block;

    margin:
        16px 0;

    color:
        #d4e7f8;
}

input,
textarea {
    display:
        block;

    width:
        100%;

    margin-top:
        7px;

    padding:
        12px;

    color:
        white;

    background:
        #071630;

    border:
        1px solid
        #27547c;

    border-radius:
        8px;

    font:
        inherit;
}

textarea {
    min-height:
        110px;

    resize:
        vertical;
}

.security-note {
    padding:
        12px;

    border-left:
        3px solid
        var(--green);

    background:
        rgba(
            85,
            255,
            192,
            .06
        );
}

.skills {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin:
        20px 0;
}

.skills span {
    padding:
        8px 11px;

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

    border-radius:
        999px;

    color:
        #cfeaff;

    background:
        rgba(
            12,
            35,
            74,
            .62
        );
}

button:disabled {
    opacity:
        .52;

    cursor:
        not-allowed;
}

@media (
    max-width:
    900px
) {

    nav {
        display:
            none;
    }

    .entry-grid {
        grid-template-columns:
            1fr;
    }

    .status-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .world-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .builders-panel {
        flex-direction:
            column;

        align-items:
            flex-start;
    }
}

@media (
    max-width:
    540px
) {

    .brand small {
        display:
            none;
    }

    .hero {
        padding-top:
            52px;
    }

    .hero h1 {
        font-size:
            3.5rem;
    }

    .orb-zone {
        width:
            250px;

        height:
            250px;
    }

    .omni-orb {
        width:
            165px;

        height:
            165px;
    }

    .orbit-one {
        width:
            240px;
    }

    .status-grid,
    .world-grid {
        grid-template-columns:
            1fr;
    }
}

.arcade-section {
    position: relative;
    z-index: 10;
    width: min(1180px, 92vw);
    margin: 12px auto 38px;
    padding: 32px;
    border: 1px solid rgba(151, 60, 255, .38);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(151, 60, 255, .17),
            transparent 40%
        ),
        rgba(4, 11, 29, .88);
}

.arcade-heading {
    text-align: center;
    margin-bottom: 26px;
}

.arcade-heading h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin: 7px 0;
}

.arcade-heading p {
    color: var(--muted);
}

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

.game-card {
    padding: 24px;
    min-width: 0;
    border: 1px solid rgba(86, 220, 255, .28);
    border-radius: 15px;
    background:
        linear-gradient(
            150deg,
            rgba(15, 40, 88, .75),
            rgba(3, 9, 25, .9)
        );
}

.slot-card {
    border-color: rgba(255, 208, 91, .42);
}

.game-icon {
    font-size: 2.3rem;
    margin-bottom: 12px;
}

.game-age {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .62rem;
    letter-spacing: .14em;
    font-weight: 900;
}

.all-ages {
    color: #aaffdf;
    border: 1px solid rgba(85,255,192,.4);
}

.adult {
    color: #ffe29a;
    border: 1px solid rgba(255,208,91,.5);
}

.game-card h3 {
    margin: 13px 0 8px;
}

.game-card p {
    min-height: 70px;
    color: var(--muted);
    line-height: 1.5;
}

.game-button {
    min-height: 44px;
    border: 1px solid var(--cyan);
    border-radius: 9px;
    padding: 10px 15px;
    color: white;
    background: rgba(12,70,135,.65);
    cursor: pointer;
    font-weight: 800;
}

.game-button:hover {
    box-shadow: 0 0 18px rgba(86,220,255,.35);
}

.slot-button {
    width: 100%;
    border-color: var(--gold);
    background:
        linear-gradient(
            #72500b,
            #2c1c02
        );
}

.slot-machine {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 18px 0;
}

.reel {
    display: grid;
    place-items: center;
    min-height: 78px;
    border: 1px solid rgba(255,208,91,.48);
    border-radius: 10px;
    background: #07101f;
    font-size: 2.3rem;
    box-shadow: inset 0 0 18px rgba(0,0,0,.55);
}

.fun-credit {
    margin: 10px 0 15px;
    text-align: center;
    color: #ffe7a9;
    letter-spacing: .08em;
}

.game-result {
    margin-top: 15px;
    min-height: 42px;
    color: #c9ddf2;
}

.number-controls {
    display: flex;
    gap: 9px;
}

.number-controls input {
    width: 80px;
    margin: 0;
}

.reaction-waiting {
    background: #724f0b !important;
    border-color: #ffd05b !important;
}

.reaction-go {
    background: #08764f !important;
    border-color: #55ffc0 !important;
    box-shadow: 0 0 24px rgba(85,255,192,.45);
}

@media (max-width: 900px) {

    .arcade-grid {
        grid-template-columns: 1fr;
    }

    .game-card p {
        min-height: 0;
    }
}

/* SOPHIA CINEMATIC V1 */
body{background:radial-gradient(ellipse at 50% -8%,rgba(112,39,205,.55),transparent 38%),radial-gradient(ellipse at 18% 38%,rgba(0,122,255,.16),transparent 34%),radial-gradient(ellipse at 82% 40%,rgba(255,45,177,.13),transparent 35%),linear-gradient(#01040d,#050a1c 48%,#02040b)}
.topbar{box-shadow:0 12px 40px rgba(0,0,0,.24)}
.brand strong{background:linear-gradient(90deg,#fff,#63deff,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{min-height:790px;isolation:isolate;background:radial-gradient(circle at 50% 40%,rgba(17,115,255,.17),transparent 30%)}
.sophia-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.sophia-moon{position:absolute;width:190px;height:190px;right:7%;top:95px;border-radius:50%;background:radial-gradient(circle at 37% 32%,#dcd4ff,#8247ca 27%,#352070 58%,#11132e 78%);box-shadow:0 0 70px rgba(143,72,255,.40);opacity:.72}
.city-haze{position:absolute;left:10%;right:10%;bottom:125px;height:250px;background:radial-gradient(ellipse,rgba(22,140,255,.28),transparent 65%);filter:blur(25px)}
.city-silhouette{position:absolute;left:-2%;right:-2%;bottom:0;height:280px;background:linear-gradient(to top,#020713,#071b43 72%,rgba(8,30,72,.68));clip-path:polygon(0 100%,0 60%,5% 36%,8% 62%,12% 22%,16% 67%,21% 42%,25% 15%,29% 66%,35% 32%,40% 67%,49% 8%,53% 68%,58% 32%,64% 15%,68% 64%,74% 29%,79% 68%,84% 20%,88% 60%,94% 34%,100% 60%,100% 100%)}
.city-windows{position:absolute;left:0;right:0;bottom:22px;height:205px;opacity:.56;background-image:radial-gradient(circle,#4de6ff 0 1px,transparent 2px),radial-gradient(circle,#ffcf55 0 1px,transparent 2px);background-size:32px 29px,49px 37px;animation:cityTwinkle 5s ease-in-out infinite alternate}
.water-glow{position:absolute;left:5%;right:5%;bottom:-65px;height:170px;border-radius:50%;background:radial-gradient(ellipse,rgba(16,126,255,.29),transparent 65%);filter:blur(14px)}
@keyframes cityTwinkle{from{opacity:.34}to{opacity:.68}}
.alpha-chip{position:relative;z-index:8;display:inline-block;padding:7px 13px;margin-bottom:17px;border:1px solid rgba(86,220,255,.30);border-radius:999px;background:rgba(4,17,40,.62);color:#aeeeff;letter-spacing:.14em;font-size:.62rem;font-weight:800}
.hero h1{background:linear-gradient(180deg,#fff,#dff6ff 35%,#94cfff 58%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 span{background:linear-gradient(180deg,#fff8d8,#ffd060 47%,#f4a71d);-webkit-background-clip:text;background-clip:text;color:transparent}

.omni-orb{position:relative;border:1px solid rgba(178,247,255,.75);box-shadow:0 0 20px #6aeaff,0 0 50px rgba(22,140,255,.95),0 0 100px rgba(151,60,255,.66),0 0 150px rgba(255,67,201,.22),inset -22px -24px 45px rgba(0,0,0,.38)}
.omni-orb:before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 0 24px rgba(255,255,255,.16)}
.omni-orb:after{content:"";position:absolute;width:34%;height:18%;top:17%;left:23%;border-radius:50%;transform:rotate(-24deg);background:rgba(255,255,255,.42);filter:blur(5px)}
.orbit-two{border-color:rgba(255,75,210,.42);box-shadow:0 0 10px rgba(255,75,210,.24)}
.gateway{position:relative;overflow:hidden;min-height:122px}
.gateway:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.08) 45%,transparent 70%)}
.gateway:hover:before{opacity:1}
.new-user{background:linear-gradient(135deg,rgba(4,42,88,.90),rgba(3,12,32,.90))}
.existing-user{background:linear-gradient(135deg,rgba(63,13,74,.82),rgba(3,12,32,.90))}
.status-panel,.builders-panel{box-shadow:0 20px 70px rgba(0,0,0,.24)}
.world-card{position:relative;overflow:hidden}
.world-card:after{content:"";position:absolute;width:130px;height:130px;right:-55px;bottom:-55px;border-radius:50%;background:radial-gradient(circle,rgba(86,220,255,.10),transparent 68%)}
.arcade-section{overflow:hidden;box-shadow:0 25px 90px rgba(0,0,0,.32);background:radial-gradient(circle at 50% -10%,rgba(255,48,199,.20),transparent 34%),radial-gradient(circle at 0 100%,rgba(22,140,255,.18),transparent 34%),rgba(4,11,29,.92)}
.arcade-heading h2{background:linear-gradient(90deg,#fff,#67e0ff,#ffdd77,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.arcade-truth{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:0 auto 22px;padding:10px 14px;width:fit-content;max-width:100%;border:1px solid rgba(85,255,192,.28);border-radius:999px;background:rgba(3,36,29,.48);font-size:.70rem}
.arcade-truth strong{color:#6dffd1;letter-spacing:.13em}.arcade-truth span{color:#a9cabb}
.game-card{transition:transform .22s,border-color .22s,box-shadow .22s}
.game-card:hover{transform:translateY(-5px);border-color:rgba(86,220,255,.62);box-shadow:0 16px 40px rgba(0,75,180,.16)}
.slot-card{background:radial-gradient(circle at 50% 0,rgba(255,204,62,.13),transparent 37%),linear-gradient(150deg,rgba(67,38,5,.72),rgba(6,10,25,.94))}

.slot-machine{padding:10px;border:1px solid rgba(255,208,91,.32);border-radius:14px;background:linear-gradient(#251903,#090d18);box-shadow:inset 0 0 28px rgba(0,0,0,.62),0 0 20px rgba(255,208,91,.08)}
.reel{position:relative;overflow:hidden;background:linear-gradient(#eef7ff,#9cb7cb 48%,#edf7ff);color:#10151c;text-shadow:none;border:3px solid #8a6415}
.reel.slot-spinning{animation:reelSpin .42s ease}
@keyframes reelSpin{0%{transform:translateY(-5px) scaleY(.93);filter:blur(1px)}45%{transform:translateY(6px) scaleY(1.08);filter:blur(3px)}100%{transform:none;filter:blur(0)}}
.sophia-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.sophia-reveal.visible{opacity:1;transform:none}
@media(max-width:700px){.sophia-moon{width:120px;height:120px;right:-20px;top:100px}.city-silhouette{height:190px}.city-windows{height:140px}.alpha-chip{font-size:.52rem}.arcade-truth{border-radius:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.sophia-reveal{opacity:1;transform:none}}