@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --bg1: #3a0f4d;
    --bg2: #0c0414;
    /* --glass: rgba(255, 255, 255, 0.02); */
    --glass: rgba(0, 0, 0, .325);
    --glass-border: rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

:root:not([data-theme="light"]) {
    color-scheme: dark
}



html {
    scroll-padding-top: env(safe-area-inset-top, 0px)
}

html{
    width: 100%;
    height: 100%;
    touch-action: manipulation;
    scroll-behavior: smooth;
    
   -webkit-text-size-adjust: 100%; /* Prevents iOS font-boosting bugs */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body{
    overflow-x: hidden;
    min-height: 100dvh; 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #000;
    overflow: hidden;
    min-height: 100vh;
    font-family: "Nunito", Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
}

@media all and (min-width: 400px){
    body {
        font-size: 16px;
    }
}

@media all and (min-width: 480px){
    body {
        font-size: 18px;
    }
}

@media all and (min-width: 576px){
    body {
        font-size: 22px;
    }
}

@media all and (min-width: 768px){
    body {
        font-size: 22px;
    }
}

@media all and (min-width: 800px){
    body {
        font-size: 26px;
    }
}

@media all and (min-width: 992px){
    body {
        font-size: 30px;
    }
}



/* Mobile: fill screen */
.video-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.video-wrapper video {
    width: 100%;
    height: 100dvh;
    object-fit: cover;
}



/* Message Overlay */
.content-container {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    justify-content: center;
}

.button-container{
    position: absolute;
    padding: 2rem;
    bottom: 0;
    width: 100%;
    z-index: 4;
}

/* .content-container {gap: 2rem;}

@media all and (min-width: 400px){
    .content-container {gap: 2.5rem;}
}

@media all and (min-width: 768px){
    .content-container {gap: 3rem;}
}

@media all and (min-width: 992px){
    .content-container {gap: 4rem;}
} */



@media all and (min-width: 400px) {
    .content-container,
    .button-container {
        padding: 3rem;
    }
}

@media all and (min-width: 480px) {
    .content-container,
    .button-container {
        padding: 3.5rem;
    }
}

@media all and (min-width: 576px) {
    .content-container,
    .button-container {
        padding: 4rem;
    }
}

@media all and (min-width: 992px) {
    .content-container,
    .button-container {
        padding: 6rem;
    }
}



.logo-container img {
    display: block;
    max-width: 100%;
    /* width: 80%; */
    height: auto;
    margin: auto;
}

@media all and (min-width: 768px){
    .logo-container img{
        max-width: 80%;
    }
}

.logo-container{
    margin-bottom: 1.5rem;
}

.jackpot-card{
    margin-bottom: 2.5rem;
    position: relative;
    overflow: visible;
}

@media all and (min-width: 480px){
    .logo-container{
        margin-bottom: 2rem;
    }

    .jackpot-card{
        margin-bottom: 3rem;
    }
}

@media all and (min-width: 576px){
    .logo-container{
        margin-bottom: 2.5rem;
    }

    .jackpot-card{
        margin-bottom: 3.5rem;
    }
}



.jackpot-card {
    padding: 0;
    text-align: center;
}

@media all and (min-width: 768px){
    .jackpot-card {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}



.jackpot-text-size {
    font-size: 3.25rem;
}

@media all and (min-width: 375px) {
    .jackpot-text-size {
        font-size: 3.375rem;
    }
}

@media all and (min-width: 480px) {
    .jackpot-text-size {
        font-size: 4.125rem;
    }
}

@media all and (min-width: 576px) {
    .jackpot-text-size {
        font-size: 5.125rem;
    }
}

@media all and (min-width: 768px) {
    .jackpot-text-size {
        font-size: 5.25rem;
    }
}

@media all and (min-width: 800px) {
    .jackpot-text-size {
        font-size: 6.125rem;
    }
}

@media all and (min-width: 992px) {
    .jackpot-text-size {
        font-size: 7.25rem;
    }
}



.message-box {
    border-radius: 16px;
    max-width: 100%;
    width: 100%;
    text-align: center;
    background: white;
    color: var(--bg1);
    padding: 1.5rem;
}

@media all and (min-width: 480px){
    .message-box {
        padding: 2rem;
    }
}

@media all and (min-width: 576px){
    .message-box {
        border-radius: 32px;
        padding: 2.5rem;
    }
}

@media all and (min-width: 768px){
    .message-box {
        padding: 3rem;
        width: 80%;
        margin: auto;
    }
}

.message-box.purple-glass {
    background: rgba(40, 22, 68, .75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(40, 22, 68, .4);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #fff;
}

.message-box.titanium {
    background-image: linear-gradient(#8b9da9, #fff6e4);
    box-shadow: inset 0 0 100px hsla(0, 0%, 0%, .3);
    color: var(--bg1);
}

.message-box.cream {
    background: linear-gradient(180deg, rgba(255, 249, 232, .9), rgba(240, 224, 184, .9));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #16082d;
}

.message-box.silver {
    background: linear-gradient(180deg, rgb(252 252 252), rgb(183 183 183));
    box-shadow: 0 4px 0 0 rgb(130 123 142);
    color: #16082d;
}

.message-box.glass{
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    color: white;
}

.message-box.glass2{
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.9);
}

.glass3 {
    position: relative;
    background: var(--glass);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 2px solid var(--glass-border);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    color: white;
}

.message{padding-bottom: .5rem;}

.message h1.heading{
  /* text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1); */

    /* text-shadow: -1px 0 #16082d, 0 1px #16082d, 1px 0 #16082d, 0 -1px #16082d, -8px 8px #16082d, -7px 7px #16082d, -6px 6px #16082d, -5px 5px #16082d, -4px 4px #16082d, -3px 3px #16082d, -2px 2px #16082d, -1px 1px #16082d; */

    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.heading,
h1,
h2{
    font-family: "Patua One", "Alfa Slab One", "Rockwell", "Georgia", serif;
}

.heading.winner{font-size: 3rem}

@media all and (min-width: 480px){
    .heading.winner{font-size: 4rem}
}

@media all and (min-width: 576px){
    .heading.winner{font-size: 5rem}
}

@media all and (min-width: 800px){
    .heading.winner{font-size: 6rem}
}

@media all and (min-width: 992px){
    .heading.winner{font-size: 7rem}
}

p.you-won-label {
    margin-top: 1rem;
}



/* ===== Marquee frame ===== */
.frame {
    position: relative;
    padding: 11px;
    border-radius: 22px;
    background: linear-gradient(180deg, #db4199 0%, #b12771 40%, #ab2874 70%, #7c4692 100% 100%);
    box-shadow: inset 0 3px 3px rgb(220 183 242 / 70%), inset 0 -4px 5px #673AB7, 0 0 0 2px #5e1087, 0 18px 40px rgb(124 28 146 / 60%), 0 0 70px rgba(255, 190, 40, .3);
}

@media all and (min-width: 480px) {
    .frame {
        padding: 18px;
        border-radius: 32px;
    }
}

@media all and (min-width: 768px) {
    .frame {
        padding: 24px;
        border-radius: 32px;
    }
}

.bulb {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    background: radial-gradient(circle at 35% 30%, #fff 0, #fff6b8 28%, #ffc928 68%, #c98300 100%);
    box-shadow: 0 0 0 1.5px #9a5a00, 0 0 8px 2px rgba(255, 214, 70, .9);
    animation: blink 1s steps(1, end) infinite;
}

.bulb:nth-child(odd) {
    animation-delay: -.5s
}

@keyframes blink {
    0% {
        filter: brightness(1.3);
        opacity: 1
    }

    50% {
        filter: brightness(.65);
        opacity: .7
    }
}

.panel {
    position: relative;
    border-radius: 24px;
    padding: clamp(12px, 3vw, 28px);
    background: radial-gradient(ellipse at 50% 40%, #771b87, #170832 75%);
    box-shadow: inset 0 0 0 3px #550961, inset 0 0 0 5px #2a1a00, inset 0 10px 34px rgb(12 2 29);
}

.gold-flat {
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    background: linear-gradient(180deg, #fff2a0, #ffd23a 55%, #f0a800);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}



/* ===== 3D GOLD TEXT with glitter (reusable) =====
   <span class="gold-3d" data-text="$48,250,000">$48,250,000</span> */
.glitter {
    position: relative;
    display: inline-block;
}

.gold-3d {
    --depth: 1;
    position: relative;
    display: inline-block;
    isolation: isolate;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    white-space: nowrap;
    background:
        linear-gradient(105deg,
            transparent 42%,
            rgba(255, 255, 255, .95) 50%,
            transparent 58%),
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .95) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .9) 0 1px, transparent 1.6px),
        linear-gradient(180deg,
            #ffffff 0%,
            #fffed5 8%,
            #fff79a 24%,
            #ffef58 42%,
            #ffe01a 58%,
            #ffd300 72%,
            #ffea72 86%,
            #fff9cd 100%);

    background-size: 300% 100%, 19px 23px, 13px 17px, 29px 31px, 100% 100%;
    background-repeat: no-repeat, repeat, repeat, repeat, no-repeat;
    background-position: 150% 0, 0 0, 0 0, 0 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: .012em transparent;
    animation: shine 5s ease-in-out infinite;
}

.gold-3d::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-text-fill-color: #fed84b;
    color: #e1af65;
    -webkit-text-stroke: 0;
    background: none;
    text-shadow:
        0 calc(.012em*var(--depth)) 0 #deb82c,
        0 calc(.024em*var(--depth)) 0 #c7a31e,
        0 calc(.036em*var(--depth)) 0 #aa8a16,
        0 calc(.048em*var(--depth)) 0 #8a6f0c,
        0 calc(.060em*var(--depth)) 0 #705307,
        0 calc(.072em*var(--depth)) 0 #553f04,
        0 calc(.084em*var(--depth)) 0 #3b2c02,
        0 calc(.14em*var(--depth)) .08em rgba(0, 0, 0, .6),
        0 0 .4em rgba(255, 200, 60, .6);
}

@keyframes shine {
    0% {
        background-position: 150% 0, 0 0, 0 0, 0 0, 0 0
    }

    35% {
        background-position: 150% 0, 6.65px 8.05px, -4.55px 5.95px, 10.15px -10.85px, 0 0
    }

    70% {
        background-position: -50% 0, 13.3px 16.1px, -9.1px 11.9px, 20.3px -21.7px, 0 0
    }

    100% {
        background-position: -50% 0, 19px 23px, -13px 17px, 29px -31px, 0 0
    }
}

.sp {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, #fff 0, #fff 35%, #fff3b0 100%);
    clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
    animation: spk .9s ease-out forwards;
}

@keyframes spk {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0);
        opacity: 0
    }

    45% {
        transform: translate(-50%, -50%) scale(1) rotate(45deg);
        opacity: 1
    }

    100% {
        transform: translate(-50%, -50%) scale(0) rotate(90deg);
        opacity: 0
    }
}

@media (max-width:560px) {
    .frame {
        padding: 12px;
        border-radius: 16px
    }

    .panel {
        border-radius: 12px;
        text-align: center;
    }
}

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

    .gold-3d,
    .bulb,
    .sp {
        animation: none
    }
}






/* MOBILE ONLY MESSAGE */
.desktop-only-message {
    display: none;
}

/* Hide experience if landscape OR desktop */
@media (orientation: landscape),
(min-width: 1200px) {

    .desktop-only-message {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 99999;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-align: center;
    }
    
    .desktop-only-message>div{
        width: 60%;
        margin: auto;
    }

    .content-container {
        display: none;
    }
}

.message h1{
    margin-bottom: .75rem;
    /* background: linear-gradient(180deg, #fff2a0, #ffd23a 55%, #f0a800);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; */

    /* background: -webkit-linear-gradient(top, #2c2c2c, #ffffff 50%, #313131);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent; */
}

button{
    border: 0;
    background: white;
    padding: 1rem;
    color: red;
    display: block;
    border-radius: 10px;
    width: 100%;
    margin-top: 3rem;
    font-family: "Patua One", "Alfa Slab One", "Rockwell", "Georgia", serif;
    font-size: 1rem;
}


/* @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.message-box::after, .message-box::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(from var(--angle), #1A3D72, #1E4F8A, #0064B4, #002F6B, #AD0A8F, 
    #D02C8E, #5C0A61, #3D1E68, #1A3D72);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    padding: 5px;
    border-radius: 10px;
    animation: spin 1.5s linear infinite;
}

.message-box::before {
    filter: blur(1.5rem);
    opacity: 1.5;
}

@keyframes spin {
    0% {
    --angle: 0deg;
    }
    100% {
    --angle: 360deg;
    }
} */





.coin {
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
}

.coin::after {
    content: "$";
    display: flex;
    align-items: center;
    justify-content: center;

    width: 10px;
    height: 10px;

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

    color: #fce38a;
    background: #e3a217;
    border: 3px solid #f5d67b;
    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(255, 208, 0, .6),
        inset 0 0 6px rgba(255, 255, 255, .4);
}

.coin--animated,
.coin--animated::after {
    animation-delay: var(--coin-delay, 0s);
    animation-duration: var(--coin-duration, 1.8s);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

.coin--animated {
    animation-name: coin-x-axis;
    animation-timing-function: ease-out;
}

.coin--animated::after {
    animation-name: coin-y-axis-and-flip;
    animation-timing-function: ease-out;
}

@keyframes coin-x-axis {
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  to {
    left: calc(var(--coin-to-x) * 1.5);
  }
}

@keyframes coin-y-axis-and-flip {
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  to {
    transform: translateY(calc(var(--coin-to-y) * 1.5)) rotate3d(1, 1, 1, 1080deg);
  }
}

.panel .gold-flat{
    font-size: .85rem;
}

.panel .glitter{
    margin-top: .25rem;
    margin-bottom: .75rem
}