:root{
  --bg:#070401;--panel:rgba(25,16,5,.82);--panel2:rgba(255,255,255,.035);
  --gold:#f6c343;--gold2:#fff1a4;--gold3:#9d5d04;--text:#fff8e8;
  --muted:#b9aa8d;--line:rgba(255,214,120,.18);--green:#5bea9c;
  --radius:28px;--shadow:0 30px 100px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--text);font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 50% -15%,rgba(255,182,35,.2),transparent 34%),
    radial-gradient(circle at 10% 70%,rgba(112,57,0,.18),transparent 32%),
    linear-gradient(180deg,#130b02,#070401 70%);overflow-x:hidden
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:38px 38px
}
.bg-aurora{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none}
.aurora-a{width:360px;height:360px;background:#884900;left:-160px;top:8%;opacity:.35;animation:floatA 9s ease-in-out infinite}
.aurora-b{width:420px;height:420px;background:#5f3000;right:-200px;bottom:4%;opacity:.3;animation:floatB 11s ease-in-out infinite}
.stars{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ffe49a 1px,transparent 1.8px);background-size:72px 72px;opacity:.12;animation:starsMove 20s linear infinite}
.app-shell{position:relative;z-index:2;width:min(1320px,calc(100% - 28px));margin:auto;padding:20px 0 46px}
.glass{background:linear-gradient(145deg,rgba(38,25,8,.9),rgba(13,8,3,.8));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.blink-border{position:relative;overflow:hidden}
.blink-border::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;
  background:linear-gradient(100deg,transparent 15%,rgba(255,239,160,.95),transparent 45%);
  background-size:250% 100%;animation:borderFlow 4s linear infinite;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude
}
.topbar{min-height:82px;border-radius:22px;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:14px}.brand-emblem{
  width:52px;height:52px;display:grid;place-items:center;border-radius:16px;color:#281600;font-size:25px;
  background:linear-gradient(145deg,#fff1a4,#c77a09);box-shadow:0 0 35px rgba(246,195,67,.28),inset 0 1px 0 #fff
}
.eyebrow{margin:0 0 3px;color:var(--gold);letter-spacing:.2em;font-size:10px}
h1,h2,h3,p{margin-top:0}h1{font:800 25px Cinzel;margin-bottom:0}h2{font:700 clamp(23px,3vw,36px) Cinzel;margin:8px 0}h3{font:700 28px Cinzel;margin:8px 0}p{color:var(--muted);line-height:1.65}
.top-actions{display:flex;align-items:center;gap:10px}.secure-pill,.live-status{
  border-radius:999px;padding:10px 13px;font-size:12px;white-space:nowrap
}
.secure-pill{border:1px solid rgba(91,234,156,.2);background:rgba(91,234,156,.07);color:#b7ffd5}.secure-pill i,.live-status span{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 13px var(--green);margin-right:7px
}
.icon-button,.close-button{
  width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;font-size:18px
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.72fr);gap:18px}
.wheel-card,.control-card,.odds-card{border-radius:var(--radius)}.wheel-card{padding:25px;overflow:hidden}.control-card{padding:28px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.section-heading.compact{align-items:center}
.badge{display:inline-flex;padding:7px 11px;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold2));color:#281600;font-size:10px;font-weight:900;letter-spacing:.14em}
.badge-muted{background:rgba(246,195,67,.09);border:1px solid rgba(246,195,67,.18);color:var(--gold)}
.live-status{border:1px solid rgba(91,234,156,.2);background:rgba(91,234,156,.07);color:#b7ffd5}
.wheel-stage{position:relative;width:min(720px,96%);aspect-ratio:1;margin:4px auto;display:grid;place-items:center}
.wheel-glow{position:absolute;inset:4%;border-radius:50%;background:rgba(246,195,67,.11);filter:blur(35px);animation:wheelPulse 2.4s ease-in-out infinite}
#wheelCanvas{width:100%;height:100%;filter:drop-shadow(0 28px 34px rgba(0,0,0,.58))}
.pointer{position:absolute;z-index:10;top:-3px;left:50%;transform:translateX(-50%);width:58px;height:78px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.55))}
.pointer::before{content:"";position:absolute;left:4px;right:4px;top:0;height:68px;clip-path:polygon(50% 100%,0 0,100% 0);background:linear-gradient(90deg,#a45d00,#fff1a4 50%,#a45d00)}
.pointer-light{position:absolute;left:20px;top:7px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 20px #fff2a8;animation:blink 1s ease-in-out infinite}
.wheel-core{position:absolute;z-index:7;width:22%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#271400;background:radial-gradient(circle at 35% 25%,#fff7c6,#e1a61e 48%,#643200);border:6px solid rgba(255,241,164,.45);box-shadow:0 0 0 9px rgba(80,40,0,.62),0 14px 35px rgba(0,0,0,.5),0 0 42px rgba(246,195,67,.22)}
.core-symbol{font-size:20px;animation:corePulse 1.4s ease-in-out infinite}.wheel-core strong{font:900 clamp(20px,3vw,32px) Cinzel}.wheel-core small{font-size:8px;font-weight:900;letter-spacing:.18em}
.light-ring{position:absolute;inset:1.5%;border-radius:50%;border:2px solid rgba(255,230,130,.15);box-shadow:0 0 28px rgba(255,220,100,.18);animation:ringGlow 1.6s ease-in-out infinite}
.result-bar{padding:14px 16px;border-radius:16px;background:rgba(246,195,67,.07);border:1px solid rgba(246,195,67,.16);text-align:center;color:#eadbbd;font-size:14px}
.panel-heading{margin-bottom:24px}.field{display:block;margin-bottom:16px}.field span{display:block;margin-bottom:8px;font-size:12px;font-weight:800;color:#dac6a4}
.field input{width:100%;height:57px;border-radius:15px;border:1px solid rgba(255,220,145,.17);background:rgba(255,255,255,.045);color:#fff;padding:0 16px;outline:none;font-size:15px;transition:.2s}
.field input:focus{border-color:rgba(246,195,67,.7);box-shadow:0 0 0 4px rgba(246,195,67,.09)}.field input::placeholder{color:#81735d}
.security-note{display:flex;gap:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.035);margin:4px 0 18px}.security-note p{margin:0;font-size:12px;line-height:1.5}
.primary-button,.secondary-button{width:100%;height:59px;border-radius:17px;font-weight:900;letter-spacing:.045em;cursor:pointer;position:relative;overflow:hidden}
.primary-button{border:0;color:#281600;background:linear-gradient(180deg,#fff2a7,#f6c343 48%,#bb7006);box-shadow:0 15px 30px rgba(209,128,8,.25),inset 0 1px 0 #fff}
.primary-button:disabled{opacity:.55;cursor:not-allowed}.button-shimmer{position:absolute;inset:0;transform:translateX(-130%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);animation:buttonShine 2.6s infinite}
.secondary-button{margin-top:12px;border:1px solid rgba(246,195,67,.2);background:rgba(246,195,67,.065);color:var(--gold2)}
.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.quick-stats div{padding:13px 7px;text-align:center;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}.quick-stats span{display:block;font-size:10px;color:#95876e;margin-bottom:6px}.quick-stats strong{font-size:14px;color:#fff1bf}
.odds-card{margin-top:18px;padding:24px}.odds-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}.odds-item{padding:14px;border-radius:15px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.03);transition:.25s}.odds-item:hover{transform:translateY(-3px);border-color:rgba(246,195,67,.28)}.odds-item span{display:block;color:#a89a80;font-size:11px;margin-bottom:6px}.odds-item strong{display:block;color:#fff0b6}.odds-item em{font-style:normal;color:var(--gold);font-size:12px}.text-button{border:0;background:transparent;color:var(--gold);font-weight:900;cursor:pointer}
footer{text-align:center;padding:22px 10px 0}footer p{font-size:12px;margin:0}
.modal{width:min(560px,calc(100% - 24px));border:1px solid var(--line);border-radius:24px;padding:24px;background:linear-gradient(145deg,#211506,#0b0703);color:#fff;box-shadow:0 35px 110px #000;overflow:hidden}.modal::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(7px)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.history-list{display:grid;gap:10px;max-height:390px;overflow:auto}.history-row{display:flex;justify-content:space-between;gap:16px;padding:13px;border-radius:14px;background:rgba(255,255,255,.04)}.history-row small{display:block;color:#988a70;margin-top:4px}.terms-copy p{font-size:14px;margin-bottom:10px}
.winner-modal{text-align:center}.winner-rays{position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg,rgba(246,195,67,.16) 0 8deg,transparent 8deg 18deg);animation:rays 10s linear infinite}.winner-modal>*:not(.winner-rays){position:relative;z-index:2}.winner-sparkles{font-size:34px;color:var(--gold);letter-spacing:12px;animation:winnerSpark 1s ease-in-out infinite}.winner-prize{font:900 clamp(38px,8vw,68px) Cinzel;color:var(--gold2);text-shadow:0 0 35px rgba(246,195,67,.45);margin:16px 0;animation:prizePop .8s cubic-bezier(.2,1.4,.4,1)}
.confetti-layer{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:-30px;width:10px;height:18px;border-radius:2px;animation:confettiFall var(--duration) linear forwards}
@keyframes borderFlow{to{background-position:-250% 0}}@keyframes buttonShine{0%,60%{transform:translateX(-130%)}100%{transform:translateX(130%)}}@keyframes wheelPulse{50%{transform:scale(1.035);opacity:.72}}@keyframes blink{50%{opacity:.35;transform:scale(.75)}}@keyframes ringGlow{50%{box-shadow:0 0 50px rgba(255,220,100,.38);border-color:rgba(255,235,155,.35)}}@keyframes corePulse{50%{transform:scale(1.25);filter:brightness(1.3)}}@keyframes starsMove{to{background-position:120px 120px}}@keyframes floatA{50%{transform:translate(60px,35px)}}@keyframes floatB{50%{transform:translate(-40px,-30px)}}@keyframes rays{to{transform:rotate(360deg)}}@keyframes winnerSpark{50%{transform:scale(1.18);filter:brightness(1.5)}}@keyframes prizePop{0%{transform:scale(.35);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes confettiFall{to{transform:translate3d(var(--drift),110vh,0) rotate(900deg);opacity:.9}}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}.control-card{order:2}.odds-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.app-shell{width:calc(100% - 14px);padding-top:7px}.topbar{min-height:68px;padding:11px 13px}.brand-emblem{width:44px;height:44px}.eyebrow{font-size:8px}h1{font-size:19px}.secure-pill{display:none}.wheel-card,.control-card,.odds-card{padding:17px;border-radius:21px}.section-heading{display:block}.live-status{display:inline-block;margin-top:5px}.wheel-stage{width:105%;margin-left:-2.5%}.pointer{width:44px;height:60px}.odds-grid{grid-template-columns:1fr 1fr}.quick-stats{gap:6px}}

/* PERBAIKAN FINAL LOGO TUNAITOTO */
#tunaitotoHeaderLogo {
    display: flex !important;
    flex: 0 1 210px !important;
    width: 210px !important;
    min-width: 0 !important;
    max-width: 210px !important;
    height: 70px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#tunaitotoHeaderLogo img {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 70px !important;
    object-fit: contain !important;
}

.topbar {
    max-width: 100% !important;
    overflow: hidden !important;
}

.topbar .brand {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* TAMPILAN HP */
@media screen and (max-width: 600px) {
    .topbar {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: center !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .topbar .brand {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #tunaitotoHeaderLogo {
        flex-basis: 280px !important;
        width: min(100%, 280px) !important;
        max-width: 280px !important;
        height: 94px !important;
        margin: 0 auto !important;
    }

    #tunaitotoHeaderLogo img {
        width: 100% !important;
        height: auto !important;
        max-height: 94px !important;
    }
    
    /* TOMBOL LINK ALTERNATIF SELALU TERLIHAT */
.tunai-alt-wrapper {
    position: fixed !important;
    z-index: 999999 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding:
        8px
        10px
        calc(10px + env(safe-area-inset-bottom)) !important;
    background:
        linear-gradient(
            to top,
            rgba(5, 2, 0, 0.98),
            rgba(12, 6, 0, 0.90),
            transparent
        ) !important;
    pointer-events: none;
}

.tunai-alt-button {
    width: min(100%, 1880px) !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
}

/* MENCEGAH KONTEN TERTUTUP TOMBOL */
body {
    padding-bottom: 105px !important;
}

@media screen and (max-width: 600px) {
    .tunai-alt-wrapper {
        padding:
            7px
            8px
            calc(8px + env(safe-area-inset-bottom)) !important;
    }

    .tunai-alt-button {
        min-height: 55px !important;
        padding: 12px 38px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    body {
        padding-bottom: 90px !important;
    }
}
}
/* =====================================================
   TEMPEL KE PALING BAWAH assets/css/style.css
   TUNAITOTO POSTER INTRO + KATALOG HADIAH
===================================================== */

body.tunai-intro-open {
    overflow: hidden !important;
}

#tunaiWelcome {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 8px;
    overflow: auto;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 145, 0, .22), transparent 45%),
        #050300;
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility .45s ease;
}

#tunaiWelcome.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.tunai-welcome-card {
    position: relative;
    width: min(100%, 520px);
    animation: tunaiWelcomeIn .75s cubic-bezier(.2, .8, .2, 1);
}

.tunai-welcome-card::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: 23px;
    background: linear-gradient(120deg, #ff7400, #ffe680, #ff9d00, #fff4b0, #ff7400);
    background-size: 300% 300%;
    filter: blur(12px);
    opacity: .9;
    animation: tunaiWelcomeGlow 3s linear infinite;
}

.tunai-welcome-enter {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(255, 214, 91, .75);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: #050300;
    box-shadow: 0 0 28px rgba(255, 139, 0, .58);
}

.tunai-welcome-image {
    display: block;
    width: 100%;
    max-height: calc(100dvh - 18px);
    object-fit: contain;
}

.tunai-welcome-hint {
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: 2.2%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid #fff0a6;
    border-radius: 999px;
    color: #241100;
    background: linear-gradient(180deg, #fff4ac, #ffbf20 45%, #ee7800);
    box-shadow: 0 0 14px #ffb000, 0 0 32px rgba(255, 80, 0, .8);
    font: 900 13px/1.2 Arial, sans-serif;
    letter-spacing: .7px;
    text-align: center;
    text-transform: uppercase;
    animation: tunaiHintPulse 1.15s ease-in-out infinite;
}

.tunai-prize-showcase {
    width: min(100%, 1320px);
    margin: 22px auto;
    padding: 22px;
    border: 1px solid rgba(212, 175, 55, .34);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(31, 18, 4, .96), rgba(8, 5, 1, .97));
    box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
}

.tunai-prize-showcase h2 {
    margin: 0 0 6px;
    color: #ffe58b;
    text-align: center;
    font-size: clamp(24px, 3vw, 40px);
}

.tunai-prize-showcase > p {
    margin: 0 0 18px;
    color: #bcae92;
    text-align: center;
}

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

.tunai-prize-item {
    min-width: 0;
    padding: 11px 8px;
    border: 1px solid rgba(255, 200, 51, .25);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    text-align: center;
}

.tunai-prize-item img,
.tunai-prize-fallback {
    width: 58px;
    height: 58px;
    margin: 0 auto 8px;
    border-radius: 12px;
    object-fit: contain;
}

.tunai-prize-fallback {
    display: grid;
    place-items: center;
    color: #2b1500;
    background: linear-gradient(145deg, #fff0a1, #e99700);
    font-size: 29px;
}

.tunai-prize-item strong {
    display: block;
    color: #fff1b2;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.tunai-prize-item small {
    display: block;
    margin-top: 4px;
    color: #d7ae37;
    font-size: 10px;
}

@keyframes tunaiWelcomeIn {
    from { opacity: 0; transform: translateY(24px) scale(.95); }
    to { opacity: 1; transform: none; }
}

@keyframes tunaiWelcomeGlow {
    from { background-position: 0 50%; }
    to { background-position: 300% 50%; }
}

@keyframes tunaiHintPulse {
    50% { transform: scale(1.025); filter: brightness(1.16); }
}

@media (max-width: 900px) {
    .tunai-prize-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
    #tunaiWelcome { padding: 0; align-items: start; }
    .tunai-welcome-card { width: 100%; }
    .tunai-welcome-enter { border-radius: 0; border-inline: 0; }
    .tunai-welcome-image { max-height: 100dvh; }
    .tunai-welcome-hint { left: 6%; right: 6%; font-size: 11px; }
    .tunai-prize-showcase { padding: 16px 10px; }
    .tunai-prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .tunai-welcome-card,
    .tunai-welcome-card::before,
    .tunai-welcome-hint { animation: none; }
}

/* Poster pembuka selalu berada paling atas */
#tunaiWelcome {
    z-index: 2147483647 !important;
}

/* Sembunyikan anti-nawala selama poster masih terbuka */
body.tunai-intro-open #tunaiAntiNawala {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Pastikan tombol masuk terlihat di atas poster */
#tunaiWelcome .tunai-welcome-hint {
    z-index: 10 !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 52px !important;
}