@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700;800;900&display=swap');

:root{
    --night:#042f2e;
    --night-dark:#021d1d;
    --gold:#ffd166;
    --cream:#fff3c4;
    --red:#cf2e2e;
    --green:#087f5b;
}

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

html{
    min-height:100%;
    background:var(--night-dark);
}

body{
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    color:#fff8dc;
    font-family:'Be Vietnam Pro',sans-serif;
    background:
        radial-gradient(circle at 50% -15%,rgba(23,162,144,.45),transparent 40%),
        linear-gradient(180deg,#062f31 0%,#064b45 52%,#0c6b50 100%);
}

button,
input{
    font:inherit;
}

.festival-sky{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}

.festival-sky::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.65;
    background-image:
        radial-gradient(circle,#fff8be 0 1px,transparent 1.7px),
        radial-gradient(circle,#82d3cf 0 1px,transparent 1.8px);
    background-position:0 0,35px 55px;
    background-size:110px 110px,160px 160px;
}

.moon{
    position:absolute;
    top:80px;
    left:5vw;
    width:170px;
    height:170px;
    border-radius:50%;
    background:
        radial-gradient(circle at 65% 35%,rgba(255,255,255,.85) 0 3%,transparent 4%),
        radial-gradient(circle at 35% 70%,rgba(224,202,130,.55) 0 8%,transparent 9%),
        #fff0b5;
    box-shadow:
        0 0 30px rgba(255,241,178,.9),
        0 0 90px rgba(255,230,125,.48);
}

.cloud{
    position:absolute;
    width:280px;
    height:80px;
    opacity:.18;
    filter:blur(1px);
    background:rgba(212,255,244,.75);
    border-radius:80px;
}

.cloud::before,
.cloud::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:inherit;
}

.cloud::before{
    width:110px;
    height:110px;
    left:50px;
    top:-55px;
}

.cloud::after{
    width:140px;
    height:140px;
    right:40px;
    top:-80px;
}

.cloud-a{
    left:-80px;
    bottom:15vh;
}

.cloud-b{
    right:-90px;
    top:32vh;
    transform:scale(.75);
}

.event-layout{
    width:min(1100px,100%);
    margin:0 auto;
    padding:24px 22px 38px;
    position:relative;
    z-index:1;
}

.event-header{
    position:relative;
    padding:18px 160px 4px;
    text-align:center;
}

.brand-line{
    margin:0 0 12px;
    color:#ffe69a;
    font-size:13px;
    font-weight:800;
    letter-spacing:2.5px;
}

.event-header h1{
    margin:0;
    color:#ffd66b;
    font-size:clamp(34px,6vw,68px);
    font-weight:900;
    line-height:.96;
    text-shadow:
        0 5px 0 #8a331e,
        0 9px 20px rgba(2,6,23,.45);
}

.event-header h1 span{
    display:block;
    margin-top:12px;
    color:#fff2b5;
    font-size:.68em;
}

.event-subtitle{
    margin:18px 0 0;
    color:#d9fff3;
    font-size:16px;
}

.lantern{
    position:absolute;
    top:0;
    width:72px;
    height:90px;
    border:5px solid #ffcb57;
    border-radius:48% 48% 42% 42%;
    background:
        repeating-linear-gradient(90deg,#c71f37 0 8px,#ed4c4c 8px 16px);
    box-shadow:0 12px 24px rgba(0,0,0,.25);
}

.lantern::before{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    top:-14px;
    height:11px;
    border-radius:8px;
    background:#f6b73c;
}

.lantern::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-36px;
    width:4px;
    height:34px;
    transform:translateX(-50%);
    background:#ffd166;
    box-shadow:-12px 8px 0 -1px #ffd166,12px 8px 0 -1px #ffd166;
}

.lantern-left{left:54px;transform:rotate(-7deg)}
.lantern-right{right:54px;transform:rotate(7deg)}

.wheel-stage{
    margin-top:22px;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.wheel-top-label{
    min-width:min(560px,90vw);
    margin-bottom:14px;
    padding:13px 36px 16px;
    position:relative;
    z-index:6;
    text-align:center;
    border:6px solid #f9c74f;
    border-radius:22px;
    background:linear-gradient(180deg,#9f1d24,#c72c35);
    box-shadow:0 8px 0 #7f1d1d,0 18px 30px rgba(0,0,0,.25);
}

.wheel-top-label small{
    display:block;
    color:#fff;
    font-size:18px;
    font-weight:900;
}

.wheel-top-label strong{
    display:block;
    margin-top:7px;
    color:#ffe792;
    font-size:clamp(15px,2.2vw,23px);
}

.wheel-wrap{
    width:min(680px,92vw);
    aspect-ratio:1;
    position:relative;
    display:grid;
    place-items:center;
    border-radius:50%;
    filter:drop-shadow(0 22px 32px rgba(1,20,20,.48));
}

.wheel-wrap::before{
    content:"";
    position:absolute;
    inset:2%;
    border-radius:50%;
    border:13px solid #fff1a1;
    box-shadow:
        inset 0 0 0 8px #bb1f24,
        0 0 0 7px #c98220;
    pointer-events:none;
    z-index:2;
}

#prizeWheel{
    width:100%;
    height:100%;
    border-radius:50%;
    transform:rotate(0deg);
}

.wheel-pointer{
    width:0;
    height:0;
    margin-bottom:-30px;
    z-index:8;
    border-left:26px solid transparent;
    border-right:26px solid transparent;
    border-top:54px solid #ffe680;
    filter:drop-shadow(0 5px 0 #a33222);
}

.spin-button{
    width:150px;
    height:150px;
    position:absolute;
    z-index:7;
    display:grid;
    place-items:center;
    border:10px solid #ffe69a;
    border-radius:50%;
    background:
        radial-gradient(circle at 40% 25%,#fff8cd 0 8%,#ffd557 38%,#f4a326 100%);
    color:#c51f2a;
    font-size:22px;
    font-weight:900;
    cursor:pointer;
    box-shadow:
        0 8px 0 #b66b14,
        0 14px 30px rgba(0,0,0,.32);
    transition:.2s ease;
}

.spin-button:hover:not(:disabled){
    transform:scale(1.05);
}

.spin-button:active:not(:disabled){
    transform:scale(.97);
}

.spin-button:disabled{
    cursor:not-allowed;
    filter:grayscale(.55);
    opacity:.65;
}

.rabbit{
    position:absolute;
    left:4%;
    bottom:118px;
    width:120px;
    height:145px;
    z-index:4;
    filter:drop-shadow(0 12px 8px rgba(1,21,17,.25));
}

.rabbit-ear{
    width:30px;
    height:82px;
    position:absolute;
    top:0;
    border:5px solid #ffe8d6;
    border-radius:50% 50% 40% 40%;
    background:#fffaf0;
}

.rabbit-ear-left{left:26px;transform:rotate(-16deg)}
.rabbit-ear-right{right:26px;transform:rotate(16deg)}

.rabbit-head{
    width:92px;
    height:82px;
    position:absolute;
    left:14px;
    top:48px;
    display:grid;
    place-items:center;
    border-radius:48%;
    background:#fffaf0;
    color:#85534d;
    font-weight:900;
}

.rabbit-body{
    width:100px;
    height:65px;
    position:absolute;
    left:10px;
    bottom:0;
    border-radius:50% 50% 25% 25%;
    background:#fffaf0;
}

.username-panel{
    width:min(660px,94vw);
    margin-top:20px;
    padding:17px;
    border:1px solid rgba(255,237,178,.45);
    border-radius:18px;
    background:rgba(1,39,36,.72);
    backdrop-filter:blur(10px);
    box-shadow:0 15px 32px rgba(0,0,0,.18);
}

.username-panel label{
    display:block;
    margin-bottom:9px;
    color:#ffe292;
    font-size:14px;
    font-weight:800;
}

.username-panel > div{
    display:flex;
    align-items:center;
    gap:12px;
}

.username-panel input{
    min-width:0;
    flex:1;
    padding:13px 15px;
    border:2px solid rgba(255,230,145,.35);
    border-radius:12px;
    outline:none;
    background:#fffaf0;
    color:#123;
    font-weight:700;
}

.username-panel input:focus{
    border-color:#ffd166;
    box-shadow:0 0 0 4px rgba(255,209,102,.18);
}

.username-panel span{
    color:#bfe6dc;
    font-size:12px;
}

.event-status{
    min-height:24px;
    margin-top:13px;
    color:#fff0b7;
    text-align:center;
    font-size:13px;
}

.prize-list{
    margin-top:28px;
    padding:25px;
    border:1px solid rgba(255,229,153,.3);
    border-radius:24px;
    background:rgba(1,38,35,.72);
    backdrop-filter:blur(12px);
}

.prize-list h2{
    margin:0 0 18px;
    color:#ffe08a;
    text-align:center;
    font-size:20px;
}

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

.prize-card{
    min-width:0;
    padding:15px;
    display:flex;
    align-items:center;
    gap:13px;
    border:1px solid color-mix(in srgb,var(--prize-color),white 25%);
    border-radius:16px;
    background:
        linear-gradient(135deg,color-mix(in srgb,var(--prize-color),transparent 55%),rgba(255,255,255,.07));
}

.prize-card-icon{
    width:58px;
    height:58px;
    min-width:58px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:14px;
    background:rgba(255,255,255,.92);
    font-size:31px;
}

.prize-card-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.prize-card strong{
    display:block;
    color:#fff7d1;
    font-size:14px;
}

.prize-card span{
    display:block;
    margin-top:5px;
    color:#b6ddd5;
    font-size:12px;
}

.event-footer{
    padding:26px 0 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    color:#b7dcd4;
    font-size:12px;
    text-align:center;
}

.event-footer strong{
    color:#ffd166;
}

.event-footer a{
    color:#fff0b3;
}

.result-modal{
    position:fixed;
    inset:0;
    z-index:50;
    display:none;
    place-items:center;
    padding:20px;
    background:rgba(1,18,20,.78);
    backdrop-filter:blur(8px);
}

.result-modal.is-open{
    display:grid;
}

.result-modal-card{
    width:min(430px,100%);
    padding:32px;
    position:relative;
    text-align:center;
    border:4px solid #ffd66a;
    border-radius:28px;
    background:
        radial-gradient(circle at 50% 0%,rgba(255,217,105,.26),transparent 32%),
        linear-gradient(180deg,#0b5a4e,#053c39);
    box-shadow:0 28px 70px rgba(0,0,0,.42);
}

.modal-close{
    position:absolute;
    top:10px;
    right:14px;
    border:0;
    background:transparent;
    color:#ffe7a1;
    font-size:30px;
    cursor:pointer;
}

.result-stars{
    color:#ffe066;
    font-size:27px;
    letter-spacing:9px;
}

.result-modal-card h2{
    margin:12px 0;
    color:#ffe089;
    font-size:30px;
}

.result-icon{
    width:110px;
    height:110px;
    margin:12px auto;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:26px;
    background:#fff8df;
    font-size:56px;
}

.result-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.result-modal-card > strong{
    display:block;
    color:#fff;
    font-size:21px;
}

.result-modal-card p{
    color:#c9ede4;
    font-size:13px;
    line-height:1.6;
}

.modal-primary,
.install-card button{
    padding:13px 24px;
    border:0;
    border-radius:12px;
    background:linear-gradient(180deg,#ffd759,#f2a92d);
    color:#8a251d;
    font-weight:900;
    cursor:pointer;
}

.install-page{
    display:grid;
    place-items:center;
    padding:20px;
}

.install-card{
    width:min(520px,100%);
    padding:30px;
    border-radius:22px;
    background:#fff;
    color:#172033;
    box-shadow:0 25px 70px rgba(0,0,0,.3);
}

.install-card form{
    display:grid;
    gap:11px;
}

.install-card input{
    padding:12px;
    border:1px solid #ccd5df;
    border-radius:10px;
}

.alert{
    margin:14px 0;
    padding:12px;
    border-radius:10px;
}

.alert-error{background:#fee2e2;color:#991b1b}
.alert-success{background:#dcfce7;color:#166534}
.primary-link{color:#075985;font-weight:800}

@media(max-width:760px){
    .event-layout{padding:15px 12px 28px}
    .event-header{padding:10px 18px 2px}
    .event-header h1{font-size:36px}
    .event-subtitle{font-size:13px}
    .lantern{display:none}
    .moon{
        top:92px;
        left:-34px;
        width:120px;
        height:120px;
    }
    .wheel-top-label{
        min-width:92vw;
        padding-left:15px;
        padding-right:15px;
        border-width:4px;
    }
    .wheel-wrap{width:94vw}
    .spin-button{
        width:105px;
        height:105px;
        border-width:7px;
        font-size:16px;
    }
    .wheel-pointer{
        margin-bottom:-23px;
        border-left-width:20px;
        border-right-width:20px;
        border-top-width:42px;
    }
    .rabbit{display:none}
    .username-panel > div{
        flex-direction:column;
        align-items:stretch;
    }
    .prize-grid{grid-template-columns:1fr}
    .event-footer{
        flex-direction:column;
        gap:5px;
    }
}