
:root {
    --night: #071a2c;
    --night-2: #0b2a42;
    --sea: #0d3f58;
    --gold: #ffd45a;
    --gold-2: #ff9f1c;
    --cream: #fff4cf;
    --ink: #23170d;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #05121c; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: #fff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        linear-gradient(rgba(4, 12, 18, .62), rgba(4, 12, 18, .72)),
        url("img/cave-bg.png") center top / cover no-repeat fixed;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 219, 112, .12), transparent 30%),
        linear-gradient(180deg, rgba(8,24,36,.06) 0%, rgba(2,7,10,.12) 100%);
}
body::after {
    content: "";
    position: fixed;
    inset: auto 0 0;
    height: 28vh;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 14, 20, 0) 0%, rgba(5, 14, 20, .72) 80%, rgba(5, 14, 20, .92) 100%);
}

.game-shell { position: relative; z-index: 1; width: min(1100px, calc(100% - 28px)); margin: 0 auto; padding: 48px 0 70px; }
.hero { position: relative; text-align: center; padding: 12px 12px 24px; }
.welcome-message {
    max-width: 760px;
    margin: 16px auto 8px;
    padding: 13px 16px;
    border: 1px solid rgba(255, 212, 90, .48);
    border-radius: 14px;
    color: #fff1b5;
    background: rgba(5, 20, 33, .74);
    text-align: center;
    font-weight: 800;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    backdrop-filter: blur(5px);
}

.eyebrow { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .23em; color: #9dd2df; font-size: .74rem; font-weight: 800; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 9vw, 6.5rem); line-height: .95; letter-spacing: -.04em; color: var(--gold); text-shadow: 0 4px 0 #8e4418, 0 12px 30px rgba(255, 168, 35, .25); }
.subtitle { max-width: 650px; margin: 18px auto 10px; color: #d9edf2; font-size: clamp(1rem, 2.5vw, 1.22rem); line-height: 1.6; }
.probability-note { display: inline-flex; border: 1px solid rgba(255,212,90,.35); background: rgba(5,20,33,.55); color: #fce7a8; border-radius: 999px; padding: 8px 14px; font-size: .78rem; backdrop-filter: blur(4px); }
.moon { position: absolute; top: -6px; right: 5%; width: 86px; aspect-ratio: 1; border-radius: 50%; background: #fff1bf; box-shadow: 0 0 40px rgba(255,241,191,.28); opacity: .85; z-index: -1; }
.moon::after { content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:rgba(168,141,104,.18); left:18px; top:17px; box-shadow: 29px 14px 0 7px rgba(168,141,104,.12), 5px 39px 0 3px rgba(168,141,104,.12); }
.stars, .stars::before, .stars::after { position:absolute; inset:0; content:""; pointer-events:none; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.6px); background-size: 63px 63px; opacity:.24; }
.stars::before { transform: translate(22px, 19px); background-size: 91px 91px; }
.stars::after { transform: translate(-8px, 10px); background-size: 121px 121px; }

.chest-area { text-align: center; }
.chest-area h2 { margin: 10px 0 28px; font-family: Georgia, serif; font-size: clamp(1.25rem, 4vw, 2rem); color: var(--cream); text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.chest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 45px); max-width: 850px; margin: 0 auto; }
.chest-button { position: relative; min-height: 245px; border: 0; padding: 25px 8px 12px; color: inherit; background: transparent; cursor: pointer; perspective: 700px; border-radius: 25px; transition: background .2s, transform .2s, opacity .2s; }
.chest-button:hover:not(:disabled) { transform: translateY(-7px); background: rgba(255,255,255,.035); }
.chest-button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.chest-button:disabled:not(.selected) { opacity: .32; filter: saturate(.4); }
.chest-number { position:absolute; top:0; left:50%; transform:translateX(-50%); font-weight:900; color:#bfe7ef; font-size:.85rem; letter-spacing:.08em; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.chest {
    display:block;
    position:relative;
    width:min(235px, 98%);
    height: 215px;
    margin: 18px auto 0;
    filter: drop-shadow(0 22px 24px rgba(0,0,0,.50));
}
.chest-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform, opacity, filter;
    transition: opacity .42s ease, transform .52s cubic-bezier(.2,.8,.2,1.08), filter .42s ease;
}
.chest-closed {
    z-index: 3;
    opacity: 1;
    transform: scale(1);
}
.chest-open {
    z-index: 2;
    opacity: 0;
    transform: scale(.94) translateY(10px);
}
.chest-glow {
    position:absolute;
    z-index:1;
    left:50%;
    top:46%;
    width:26px;
    height:26px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:#fff7a3;
    opacity:0;
    box-shadow:0 0 36px 24px rgba(255,213,77,.74);
    transition:opacity .35s ease, transform .7s ease;
}
.chest-burst {
    position:absolute;
    inset: 10% 12% 12%;
    z-index:1;
    border-radius:50%;
    background: radial-gradient(circle, rgba(255,242,170,.98) 0 10%, rgba(255,205,76,.58) 24%, rgba(255,205,76,.18) 46%, transparent 72%);
    opacity:0;
    transform: scale(.25);
    transition: opacity .35s ease, transform .7s ease;
    filter: blur(5px);
}
.status { min-height: 1.5em; margin: 30px 0 0; color:#c9e3e8; font-weight:700; text-shadow: 0 2px 8px rgba(0,0,0,.45); }

.chest-button.rumbling .chest { animation: rumble .12s linear infinite; }
.chest-button.opened .chest-closed { opacity:0; transform: scale(.94) translateY(6px); filter: brightness(1.08); }
.chest-button.opened .chest-open { opacity:1; transform: scale(1.03) translateY(0); filter: brightness(1.08) saturate(1.08); }
.chest-button.opened .chest-glow { opacity:1; transform:translate(-50%,-50%) scale(8); }
.chest-button.opened .chest-burst { opacity:1; transform: scale(1.65); }
.chest-button.opened .chest-glow { opacity:1; transform:translate(-50%,-50%) scale(8); }
.chest-button.opened .chest-burst { opacity:1; transform: scale(1.7); }
.chest-button.opened { z-index:5; }
@keyframes rumble { 0%,100%{transform:translate(0) rotate(0)} 25%{transform:translate(-4px,1px) rotate(-1deg)} 75%{transform:translate(4px,-1px) rotate(1deg)} }
.spark { position:absolute; z-index:10; left:50%; top:52%; width:8px; height:8px; border-radius:50%; background:#fff7a3; box-shadow:0 0 9px #ffd13b; pointer-events:none; animation:sparkFly 1.1s ease-out forwards; }
@keyframes sparkFly { from{transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(1);opacity:1} to{transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) scale(0);opacity:0} }


.chest-fx-coin {
    position:absolute;
    z-index:12;
    left:50%;
    top:51%;
    color:#ffd84d;
    font-size:clamp(13px, 2.2vw, 23px);
    line-height:1;
    text-shadow:0 0 8px #ffca32, 0 2px 3px rgba(75,38,0,.8);
    pointer-events:none;
    opacity:0;
    animation:chestCoinJump 1.2s cubic-bezier(.18,.72,.2,1) forwards;
}
@keyframes chestCoinJump {
    0% { transform:translate(-50%,-50%) scale(.3) rotate(0deg); opacity:0; }
    12% { opacity:1; }
    58% { transform:translate(calc(-50% + var(--coin-x)), var(--coin-y)) scale(1) rotate(var(--coin-spin)); opacity:1; }
    100% { transform:translate(calc(-50% + var(--coin-x)), 74px) scale(.72) rotate(var(--coin-spin)); opacity:0; }
}
.chest-smoke {
    position:absolute;
    z-index:10;
    left:50%;
    top:49%;
    width:44px;
    height:44px;
    margin:-22px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,247,190,.62) 0 20%, rgba(255,203,74,.34) 45%, transparent 72%);
    filter:blur(4px);
    pointer-events:none;
    opacity:0;
    animation:goldSmoke 1.45s ease-out forwards;
}
@keyframes goldSmoke {
    0% { transform:translate(0, 12px) scale(.35); opacity:0; }
    18% { opacity:.72; }
    100% { transform:translate(var(--smoke-x), -115px) scale(var(--smoke-scale)); opacity:0; }
}
.chest-prize-pop {
    position:absolute;
    z-index:20;
    left:50%;
    top:39%;
    width:min(245px, 96%);
    padding:9px 13px;
    border:2px solid rgba(255,230,121,.75);
    border-radius:999px;
    color:#fff9d5;
    background:linear-gradient(180deg, rgba(124,72,14,.95), rgba(67,32,5,.96));
    box-shadow:0 0 25px rgba(255,207,65,.46), 0 8px 20px rgba(0,0,0,.42);
    font-family:Georgia, serif;
    font-size:clamp(.82rem, 2.2vw, 1.05rem);
    font-weight:800;
    text-align:center;
    text-shadow:0 2px 3px rgba(0,0,0,.7);
    pointer-events:none;
    opacity:0;
    transform:translate(-50%, 34px) scale(.7);
    animation:prizeFromChest 1.65s .28s cubic-bezier(.15,.9,.25,1.2) forwards;
}
@keyframes prizeFromChest {
    0% { opacity:0; transform:translate(-50%, 34px) scale(.7); }
    28% { opacity:1; transform:translate(-50%, -68px) scale(1.05); }
    78% { opacity:1; transform:translate(-50%, -76px) scale(1); }
    100% { opacity:0; transform:translate(-50%, -92px) scale(.96); }
}

.reveal-overlay { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:22px; background:rgba(2,9,15,.84); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; overflow:hidden; }
.reveal-overlay.show { opacity:1; visibility:visible; }
.treasure-rays { position:absolute; width:min(850px,130vw); aspect-ratio:1; background:repeating-conic-gradient(from 0deg, rgba(255,222,91,.2) 0 8deg, transparent 8deg 18deg); animation:spin 18s linear infinite; mask-image:radial-gradient(circle,#000 0 46%,transparent 72%); }
@keyframes spin { to{transform:rotate(360deg)} }
.prize-card { position:relative; z-index:2; width:min(480px,100%); color:var(--ink); text-align:center; border:5px solid #7b4d0d; border-radius:28px; padding:36px 28px 28px; background:linear-gradient(145deg,#fff9df,#f5d984); box-shadow:0 0 0 8px rgba(255,214,76,.16), 0 35px 80px rgba(0,0,0,.55); transform:translateY(45px) scale(.75) rotate(-2deg); opacity:0; }
.reveal-overlay.show .prize-card { animation:prizeIn .75s .15s cubic-bezier(.15,.9,.25,1.25) forwards; }
@keyframes prizeIn { to{transform:translateY(0) scale(1) rotate(0);opacity:1} }
.close-reveal { position:absolute; top:12px; right:14px; width:38px; height:38px; border-radius:50%; border:0; background:rgba(72,40,10,.12); color:#5e360e; font-size:1.7rem; cursor:pointer; }
.prize-crown { width:84px; height:84px; display:grid; place-items:center; margin:-77px auto 10px; border:5px solid #7b4d0d; border-radius:50%; background:linear-gradient(145deg,#ffe885,#e79d13); color:#4c2807; font-size:2.5rem; box-shadow:0 8px 20px rgba(80,40,0,.3); }
.prize-kicker { margin:10px 0 6px; color:#8b5511; letter-spacing:.18em; font-size:.72rem; font-weight:900; }
.prize-card h2 { margin:3px 0 10px; font-family:Georgia,serif; font-size:clamp(2rem,7vw,3.4rem); line-height:1; color:#5f3108; }
.prize-card p { font-size:1.08rem; line-height:1.55; }
.prize-image-wrap { width:120px; height:120px; margin:12px auto; border-radius:22px; overflow:hidden; border:4px solid rgba(123,77,13,.25); background:#fff; }
.prize-image-wrap img { width:100%; height:100%; object-fit:cover; }
.winner-seal { display:inline-block; margin:8px 0 20px; padding:7px 12px; border:2px dashed #a4630e; border-radius:8px; color:#8d5108; font-weight:900; transform:rotate(-2deg); }
.play-again { display:block; width:100%; border:0; border-radius:14px; padding:15px 18px; color:#fff8dc; background:linear-gradient(#9a541c,#63300f); font-weight:900; font-size:1rem; cursor:pointer; box-shadow:0 7px 0 #3a1b08; }
.play-again:active { transform:translateY(4px); box-shadow:0 3px 0 #3a1b08; }
.coin-field { position:absolute; inset:0; pointer-events:none; }
.falling-coin { position:absolute; top:-10%; color:#ffd546; font-size:clamp(14px,3vw,28px); text-shadow:0 0 8px #ffbd20; animation:coinFall 2s linear both; }
@keyframes coinFall { 0%{transform:translate(0,-20px) rotate(0);opacity:0} 10%{opacity:1} 100%{transform:translate(var(--drift),115vh) rotate(900deg);opacity:.3} }
.flash-gold::after { content:""; position:fixed; z-index:40; inset:0; pointer-events:none; background:#ffe67c; animation:flash .75s ease-out forwards; }
@keyframes flash { from{opacity:.65} to{opacity:0} }

@media (max-width: 680px) {
    body {
        background:
            linear-gradient(rgba(4, 12, 18, .7), rgba(4, 12, 18, .8)),
            url("img/cave-bg.png") center top / cover no-repeat fixed;
    }
    .game-shell { width:min(100% - 18px, 540px); padding-top:28px; }
    .chest-grid { gap:12px 5px; }
    .chest-button { min-height:220px; padding-inline:0; }
    .chest { height:170px; width:min(190px,100%); }
        .probability-note { border-radius:14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

.account-bar{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;margin-bottom:18px;padding:12px 16px;border:1px solid rgba(255,212,90,.28);border-radius:16px;background:rgba(3,13,21,.72);backdrop-filter:blur(7px);box-shadow:0 12px 30px rgba(0,0,0,.25)}.account-bar span{display:block;color:#9fc6d0;font-size:.73rem;text-transform:uppercase;letter-spacing:.08em}.account-bar strong{display:block;color:#ffe18a;margin-top:2px}.account-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.account-actions a,.deposit-cta{display:inline-block;text-decoration:none;color:#fff4cd;font-weight:900;border:1px solid rgba(255,212,90,.34);background:rgba(125,67,16,.7);border-radius:11px;padding:9px 12px}.deposit-cta{margin-top:16px}.chest-button:disabled{cursor:not-allowed}.chest-button:disabled:not(.selected){opacity:.34;filter:saturate(.45)}@media(max-width:680px){.account-bar{grid-template-columns:1fr 1fr}.account-actions{grid-column:span 2;justify-content:center}}


/* v17 mobile theme */
body{background:var(--app-bg)!important;color:var(--app-text)}
.user-appbar{position:fixed;inset:0 0 auto;z-index:120;background:var(--app-surface-dark);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.user-appbar-inner{width:min(100%,720px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:12px 14px}
.user-balance-chip{text-decoration:none;color:var(--app-text-light);display:flex;align-items:center;gap:8px;min-width:0}.user-balance-chip span{font-size:.75rem;color:rgba(255,255,255,.72)}.user-balance-chip strong{font-size:1.08rem;white-space:nowrap}.user-deposit-chip{text-decoration:none;font-weight:900;padding:10px 14px;border-radius:11px;background:var(--app-primary);color:var(--app-primary-text)}
.user-menu{position:relative}.user-menu summary{list-style:none;cursor:pointer;color:var(--app-text-light);display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}.user-menu summary::-webkit-details-marker{display:none}.user-menu-dropdown{position:absolute;right:0;top:calc(100% + 8px);width:180px;display:grid;padding:8px;background:#fff;border:1px solid rgba(17,24,39,.09);border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.18)}.user-menu-dropdown a{text-decoration:none;color:var(--app-text);padding:10px 12px;border-radius:10px}.user-menu-dropdown a:hover{background:#f8fafc}
.user-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:115;background:var(--app-surface-dark);border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(4,1fr);padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px));gap:4px}.user-bottom-nav a{text-decoration:none;color:rgba(255,255,255,.78);display:grid;justify-items:center;gap:4px;padding:7px 4px;border-radius:12px;font-size:.74rem}.user-bottom-nav a.active{color:var(--app-primary)}.user-bottom-nav .nav-icon{font-size:1.15rem;line-height:1}
@media(max-width:820px){
  .game-shell{width:min(100%,720px);padding:88px 12px 98px}
  .hero,.chest-area{background:var(--app-card-bg)!important;border:1px solid var(--app-card-border);box-shadow:0 14px 34px rgba(15,23,42,.06);backdrop-filter:blur(6px);border-radius:24px;color:var(--app-text);padding:20px}
  .hero h1,.hero .subtitle,.hero .eyebrow,.probability-note,.status,.chest-area h2{color:var(--app-text)!important;text-shadow:none}
  .hero{min-height:unset}.moon,.stars{display:none}.probability-note{background:var(--app-note-bg)!important;border-color:var(--app-card-border)}
  .chest-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.chest-button{border-radius:18px;background:var(--app-card-bg)!important;border:1px solid var(--app-card-border);backdrop-filter:blur(5px);padding:16px 8px 18px;min-height:220px}.chest-number{color:var(--app-muted);text-shadow:none;font-size:1rem}.deposit-cta{border:none}
}
@media(min-width:821px){.user-bottom-nav{display:none}.user-appbar{position:sticky;top:0;border-radius:20px;margin:20px auto 18px;inset:auto;width:min(100%,720px)}}


/* v18 background image + pix/button colors */
body{
  background-color:var(--app-bg)!important;
  background-image:linear-gradient(rgba(3,10,16,.58), rgba(3,10,16,.72)), var(--app-bg-image)!important;
  background-position:center center, center center!important;
  background-size:cover, cover!important;
  background-repeat:no-repeat, no-repeat!important;
  background-attachment:fixed, fixed!important;
}
.primary,
.secondary-button,
.action-link.primary,
.deposit-cta,
.user-deposit-chip,
.play-again{
  background:var(--app-button-bg)!important;
  color:var(--app-button-text)!important;
  border-color:rgba(17,24,39,.10)!important;
  box-shadow:none!important;
}
.pix-code,
.copy-box{
  background:var(--app-pix-code-bg)!important;
  color:var(--app-pix-code-text)!important;
  border-color:rgba(255,255,255,.12)!important;
}
.copy-label{color:var(--app-button-text)!important}


/* v18.1 transparent game cards */
@media(max-width:820px){.hero,.chest-area,.chest-button,.probability-note{box-shadow:0 10px 28px rgba(0,0,0,.12)}}


/* v18.2 definitive mobile transparency */
@media (max-width:820px){
  body{
    background-color:var(--app-bg)!important;
    background-image:linear-gradient(rgba(3,10,16,.40),rgba(3,10,16,.55)),var(--app-bg-image)!important;
    background-position:center center,center center!important;
    background-size:cover,cover!important;
    background-repeat:no-repeat,no-repeat!important;
    background-attachment:fixed,fixed!important;
  }
  .hero,
  .chest-area,
  .chest-button{
    background-color:transparent!important;
    background-image:none!important;
    border-color:var(--app-card-border)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .probability-note{
    background:var(--app-note-bg)!important;
    border-color:var(--app-card-border)!important;
    box-shadow:none!important;
  }
}


/* v19 — carrossel e personalização por objeto */
.user-appbar{background:var(--app-appbar-bg)!important}
.user-balance-chip{color:var(--app-appbar-text)!important}.user-balance-chip span{color:var(--app-appbar-label)!important}
.user-deposit-chip{background:var(--app-appbar-button-bg)!important;color:var(--app-appbar-button-text)!important}
.user-bottom-nav{background:var(--app-bottom-nav-bg)!important}.user-bottom-nav a{color:var(--app-bottom-nav-text)!important}.user-bottom-nav a.active{color:var(--app-bottom-nav-active)!important}
.hero-carousel{position:relative;overflow:hidden;border:1px solid var(--app-carousel-border);border-radius:25px;height:var(--carousel-desktop-height);box-shadow:0 18px 48px rgba(0,0,0,.28);margin-bottom:18px;background:#050b13}
.carousel-track,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s ease;display:block;padding:0;background:none}
.hero-slide.active{opacity:1;visibility:visible;z-index:2}
.hero-slide-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--app-carousel-overlay),rgba(0,0,0,.22) 68%,rgba(0,0,0,.08));z-index:0}
.hero-slide-content{position:relative;z-index:1;width:min(660px,92%);text-align:center;margin:auto}
.carousel-eyebrow{margin:0 0 9px;color:var(--app-carousel-eyebrow);font-weight:900;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.hero-slide h1{margin:0;color:var(--app-carousel-title);font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.6rem,7vw,5.6rem);line-height:.98;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.carousel-subtitle{max-width:630px;margin:17px auto 12px;color:var(--app-carousel-subtitle);line-height:1.6;font-size:clamp(.95rem,2.2vw,1.18rem);text-shadow:0 2px 10px rgba(0,0,0,.5)}
.carousel-note{display:inline-flex;max-width:610px;padding:9px 16px;border-radius:14px;background:var(--app-carousel-note-bg);color:var(--app-carousel-note-text);font-size:.78rem;line-height:1.35}
.carousel-arrow{position:absolute;top:50%;z-index:5;transform:translateY(-50%);width:40px;height:48px;border:1px solid rgba(255,255,255,.28);border-radius:13px;background:rgba(0,0,0,.28);color:#fff;font-size:2rem;cursor:pointer}.carousel-prev{left:12px}.carousel-next{right:12px}
.carousel-dots{position:absolute;z-index:6;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:7px}.carousel-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--app-carousel-dot);cursor:pointer;transition:width .2s}.carousel-dots button.active{width:25px;background:var(--app-carousel-dot-active)}
.chest-area{background:var(--app-chest-panel-bg)!important;border-color:var(--app-chest-panel-border)!important}.chest-area h2{color:var(--app-chest-title)!important}.status{color:var(--app-chest-status)!important}
.chest-button{background:var(--app-chest-button-bg)!important;border-color:var(--app-chest-button-border)!important}.chest-number{color:var(--app-chest-number)!important}
.reveal-overlay{background:var(--app-prize-overlay)!important}.prize-card{background:var(--app-prize-card-bg)!important;border-color:var(--app-prize-card-border)!important;color:var(--app-prize-text)!important}.prize-kicker{color:var(--app-prize-kicker)!important}.prize-card h2{color:var(--app-prize-title)!important}.play-again{background:var(--app-prize-button-bg)!important;color:var(--app-prize-button-text)!important}
@media(max-width:820px){.hero-carousel{height:var(--carousel-mobile-height);border-radius:20px}.hero-slide{padding:22px 18px}.hero-slide h1{font-size:clamp(2rem,10vw,3.4rem)}.carousel-subtitle{font-size:.92rem;line-height:1.5}.carousel-note{font-size:.72rem}.carousel-arrow{width:34px;height:42px;font-size:1.65rem}.carousel-prev{left:7px}.carousel-next{right:7px}.chest-area{backdrop-filter:blur(6px)}}


/* v20: carrossel somente com imagens */
.hero-slide-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-slide-shade,.hero-slide-content{display:none!important}

/* v20: tentativa sem saldo */
.chest-button.balance-denied .chest{filter:drop-shadow(0 0 18px rgba(255,95,65,.7)) drop-shadow(0 20px 18px rgba(0,0,0,.45))}
.chest-button.balance-denied-pop .chest{animation:balanceDeniedPop .45s ease}
@keyframes balanceDeniedPop{0%{transform:scale(1)}35%{transform:scale(.9)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.balance-overlay{position:fixed;z-index:80;inset:0;display:grid;place-items:center;padding:22px;background:rgba(2,9,15,.78);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
.balance-overlay.show{opacity:1;visibility:visible}
.balance-card{position:relative;width:min(420px,100%);padding:30px 24px 24px;text-align:center;border:2px solid var(--app-prize-card-border);border-radius:24px;background:var(--app-prize-card-bg);color:var(--app-prize-text);box-shadow:0 28px 70px rgba(0,0,0,.48);transform:translateY(25px) scale(.92);transition:transform .32s cubic-bezier(.2,.85,.25,1.15)}
.balance-overlay.show .balance-card{transform:translateY(0) scale(1)}
.balance-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.08);color:var(--app-prize-title);font-size:1.55rem;cursor:pointer}
.balance-lock{font-size:3.2rem;animation:lockedBounce .7s ease both}
@keyframes lockedBounce{0%{transform:translateY(-15px) scale(.6);opacity:0}55%{transform:translateY(4px) scale(1.1);opacity:1}100%{transform:translateY(0) scale(1)}}
.balance-kicker{margin:8px 0 4px;color:var(--app-prize-kicker);font-size:.72rem;font-weight:900;letter-spacing:.16em}
.balance-card h2{margin:5px 0 10px;color:var(--app-prize-title);font-family:Georgia,serif;font-size:clamp(1.8rem,7vw,2.6rem)}
.balance-card p{color:var(--app-prize-text);line-height:1.55}
.balance-deposit-button,.balance-cancel-button{display:block;width:100%;border:0;border-radius:13px;padding:14px 16px;font:inherit;font-weight:900;text-decoration:none;cursor:pointer}
.balance-deposit-button{margin-top:18px;background:var(--app-primary-button-bg);color:var(--app-primary-button-text)}
.balance-cancel-button{margin-top:9px;background:var(--app-secondary-button-bg);color:var(--app-secondary-button-text)}


/* v20.1 — carrossel horizontal full width no mobile */
.hero-carousel{background:#050b13}
.hero-slide-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;background:#050b13}
@media(max-width:820px){
  .game-shell{width:100%;max-width:720px;padding:88px 12px 98px;overflow-x:clip}
  .hero-carousel{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-bottom:16px;
    height:var(--carousel-mobile-height);
    border-radius:0;
    border-left:0;
    border-right:0;
    box-shadow:none;
    background:#050b13;
  }
  .carousel-track,.hero-slide{inset:0}
  .hero-slide{padding:0!important}
  .hero-slide-image{object-fit:contain!important;background:#050b13}
  .carousel-arrow{top:auto;bottom:12px;transform:none;width:34px;height:34px;border-radius:10px;font-size:1.35rem;background:rgba(0,0,0,.36)}
  .carousel-prev{left:10px}.carousel-next{right:10px}
  .carousel-dots{bottom:14px}
}
@media(min-width:821px){
  .hero-carousel{width:100%;border-radius:18px}
  .hero-slide-image{object-fit:cover}
}


/* v20.2 — remove excesso de espaço e fundo transparente do carrossel */
.hero-carousel,
.carousel-track,
.hero-slide{background:transparent!important}
.hero-slide-image{background:transparent!important}
@media(max-width:820px){
  .hero-carousel{
    height:auto!important;
    aspect-ratio: 336 / 124;
    min-height:0!important;
    background:transparent!important;
    margin-top:0;
    margin-bottom:10px;
  }
  .carousel-track,.hero-slide{background:transparent!important}
  .hero-slide-image{
    width:100%;
    height:100%;
    object-fit:contain!important;
    object-position:center center;
    background:transparent!important;
  }
  .carousel-arrow{bottom:8px}
  .carousel-dots{bottom:8px}
}


/* v20.3 — imagem do carrossel de canto a canto */
@media(max-width:820px){
  .hero-carousel{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    border-radius:0!important;
    overflow:hidden;
    aspect-ratio: 16 / 6;
  }
  .hero-slide,
  .carousel-track{
    width:100%;
    height:100%;
  }
  .hero-slide-image{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    display:block;
  }
}


/* v20.4 — menu da conta totalmente configurável pelo admin */
.user-menu summary{
    color:var(--app-profile-button-icon)!important;
    background:var(--app-profile-button-bg)!important;
    border-color:var(--app-profile-button-border)!important;
}
.user-menu-dropdown{
    background:var(--app-account-menu-bg)!important;
    border-color:var(--app-account-menu-border)!important;
}
.user-menu-dropdown a{
    color:var(--app-account-menu-text)!important;
}
.user-menu-dropdown a:hover,
.user-menu-dropdown a:focus-visible{
    background:var(--app-account-menu-hover-bg)!important;
    color:var(--app-account-menu-hover-text)!important;
    outline:none;
}


/* v20.5 maiores baus */
@media(max-width:820px){.chest-art{transform:scale(1.18)}}
@media(min-width:821px){.chest-art{transform:scale(1.04)}}


/* v20.6 baus 2 por linha no mobile */
@media(max-width:820px){
  .chest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
  .chest{margin-top:10px}
  .chest-button{width:100%}
}

/* v30 — Roletinha Premiada */
.roulette-page{
  background-color:#D9BC69!important;
  background-image:
    radial-gradient(circle at 50% 16%,rgba(255,251,224,.76),transparent 34%),
    linear-gradient(rgba(225,199,119,.62),rgba(116,83,38,.48)),
    var(--app-bg-image)!important;
  background-blend-mode:screen,soft-light,soft-light!important;
  color:var(--app-text);
}
.roulette-shell{width:min(980px,calc(100% - 24px));padding-bottom:92px}
.wheel-area{
  position:relative;
  text-align:center;
  padding:clamp(20px,4vw,38px) clamp(12px,3vw,32px) 28px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.wheel-area::before{display:none;content:none}
.wheel-heading{position:relative;z-index:2;margin:0 auto 15px;max-width:650px}
.wheel-eyebrow{margin:0 0 6px;color:var(--app-wheel-accent);font-size:.72rem;font-weight:950;letter-spacing:.18em}
.wheel-heading h1{
  margin:0;
  color:var(--app-chest-title)!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,7vw,4rem);
  letter-spacing:-.04em;
  line-height:1;
  text-shadow:0 3px 0 rgba(255,255,255,.4),0 10px 22px rgba(50,29,14,.18);
}
.wheel-heading>p:last-child{margin:11px 0 0;color:var(--app-chest-status);font-size:clamp(.9rem,2.5vw,1.08rem)}
.wheel-heading strong{color:var(--app-wheel-accent)}
.roulette-stage{
  position:relative;
  z-index:2;
  width:min(660px,94vw);
  aspect-ratio:1;
  margin:10px auto 0;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 30px 28px rgba(37,20,9,.33));
}
.roulette-frame{
  position:relative;
  width:88%;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 35% 24%,rgba(255,255,255,.55),transparent 20%),
    linear-gradient(145deg,var(--app-wheel-frame-light),var(--app-wheel-frame),var(--app-wheel-frame-dark));
  border:clamp(8px,1.8vw,17px) solid var(--app-wheel-frame);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.38),
    inset 0 0 0 11px rgba(103,61,18,.2),
    0 0 0 4px rgba(255,246,207,.64),
    0 20px 45px rgba(64,35,13,.34);
}
.roulette-frame::after{
  content:"";
  position:absolute;
  inset:8.5%;
  border-radius:50%;
  pointer-events:none;
  border:clamp(3px,.7vw,7px) solid rgba(255,249,224,.9);
  box-shadow:inset 0 0 14px rgba(77,41,15,.35),0 0 0 2px rgba(74,40,14,.25);
  z-index:4;
}
.roulette-bulbs{position:absolute;inset:0;border-radius:50%;z-index:8;pointer-events:none}
.roulette-bulbs span{
  position:absolute;
  width:clamp(7px,1.55vw,15px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--app-wheel-bulb);
  box-shadow:0 0 5px rgba(255,255,255,.9),0 0 12px var(--app-wheel-bulb),inset 0 1px 2px #fff;
  animation:rouletteBulbPulse .9s var(--bulb-delay) ease-in-out infinite alternate;
}
@keyframes rouletteBulbPulse{from{opacity:.58;filter:brightness(.82)}to{opacity:1;filter:brightness(1.35)}}
.roulette-rotor{
  position:absolute;
  inset:10.2%;
  z-index:2;
  border-radius:50%;
  overflow:hidden;
  transform:rotate(0deg);
  will-change:transform;
  box-shadow:inset 0 0 24px rgba(0,0,0,.24),0 0 0 3px rgba(92,51,16,.25);
}
.roulette-rotor canvas{display:block;width:100%;height:100%;border-radius:50%}
.roulette-pointer{
  position:absolute;
  z-index:15;
  top:1.8%;
  left:50%;
  width:clamp(44px,9vw,76px);
  height:clamp(68px,13vw,110px);
  transform:translateX(-50%);
  filter:drop-shadow(0 8px 7px rgba(48,22,8,.4));
  pointer-events:none;
}
.roulette-pointer::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:72%;
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(145deg,var(--app-wheel-pointer-light),var(--app-wheel-pointer));
  border:4px solid var(--app-wheel-pointer-dark);
  box-shadow:inset 0 4px 5px rgba(255,255,255,.42);
}
.roulette-pointer span{
  position:absolute;
  left:50%;
  top:31%;
  width:0;
  height:0;
  transform:translateX(-50%);
  border-left:clamp(16px,3.5vw,29px) solid transparent;
  border-right:clamp(16px,3.5vw,29px) solid transparent;
  border-top:clamp(36px,7vw,62px) solid var(--app-wheel-pointer);
}
.roulette-spin-wrap{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  width:100%;
  margin:clamp(-12px,-1.4vw,-5px) auto 0;
  padding:0 clamp(12px,4vw,28px);
}
.roulette-spin-button{
  position:relative;
  width:min(520px,88%);
  min-height:clamp(68px,10vw,92px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:12px 34px 10px;
  border-radius:999px;
  border:clamp(4px,.72vw,7px) solid var(--app-wheel-hub-ring);
  color:var(--app-wheel-center-text);
  background-color:var(--app-wheel-center-bg);
  background-image:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.6),transparent 42%),
    linear-gradient(180deg,var(--app-wheel-frame-light),var(--app-wheel-frame) 54%,var(--app-wheel-frame-dark));
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.26),
    inset 0 -7px 12px rgba(93,48,12,.18),
    0 7px 0 var(--app-wheel-center-shadow),
    0 17px 28px rgba(32,18,10,.34);
  text-shadow:0 2px 1px rgba(42,21,7,.55),0 0 12px rgba(255,244,181,.28);
  cursor:pointer;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.roulette-spin-button::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:inherit;
  pointer-events:none;
}
.roulette-spin-button:hover:not(:disabled){transform:translateY(-3px) scale(1.012);filter:brightness(1.06)}
.roulette-spin-button:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.2),inset 0 -4px 8px rgba(93,48,12,.16),0 3px 0 var(--app-wheel-center-shadow),0 8px 16px rgba(32,18,10,.28)}
.roulette-spin-button:focus-visible{outline:4px solid #fff;outline-offset:5px}
.roulette-spin-button:disabled{cursor:not-allowed;filter:saturate(.68) brightness(.88)}
.roulette-spin-button span{display:block;font-size:clamp(1.45rem,5vw,2.65rem);font-weight:1000;letter-spacing:.045em;line-height:1}
.roulette-spin-button small{display:block;margin-top:5px;font-size:clamp(.65rem,1.8vw,.84rem);font-weight:900;letter-spacing:.04em;text-transform:uppercase;opacity:.88}
.roulette-spin-button.is-spinning span{animation:spinButtonPulse .55s ease-in-out infinite alternate}
@keyframes spinButtonPulse{to{transform:scale(1.06);text-shadow:0 0 15px rgba(255,255,255,.62)}}
.roulette-status{position:relative;z-index:2;margin:17px auto 0!important;min-height:24px;color:var(--app-chest-status)!important;font-weight:850}
.roulette-engine-note{position:relative;z-index:2;max-width:680px;margin:8px auto 0;color:var(--app-chest-status);font-size:.72rem;line-height:1.45;opacity:.75}
.roulette-empty{position:relative;z-index:2;margin:25px auto;padding:18px;border-radius:16px;background:rgba(255,255,255,.7);color:#6e350e;font-weight:850}
.roulette-stage.is-spinning .roulette-pointer{animation:pointerTick .16s ease-in-out infinite alternate}
@keyframes pointerTick{to{transform:translateX(-50%) rotate(3deg)}}
.roulette-stage.spin-finished{animation:rouletteFinish .55s cubic-bezier(.16,.9,.25,1.25)}
@keyframes rouletteFinish{35%{transform:scale(1.025)}70%{transform:scale(.99)}to{transform:scale(1)}}
.roulette-stage.balance-denied{filter:drop-shadow(0 0 20px rgba(220,55,45,.5))}
.roulette-confetti:nth-child(3n+1){color:#f6cb43}.roulette-confetti:nth-child(3n+2){color:#ef635b}.roulette-confetti:nth-child(3n){color:#41a6c8}
.roulette-page .prize-card{border-radius:28px}
.roulette-page .prize-crown{font-family:system-ui,sans-serif}
.roulette-page .winner-seal{transform:none}
.roulette-page .deposit-cta{position:relative;z-index:2}

@media(max-width:820px){
  .roulette-shell{width:100%;max-width:720px;padding:78px 10px 98px}
  .wheel-area{border-radius:0;padding:20px 4px 24px;background:transparent!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important}
  .wheel-heading{padding:0 12px}
  .roulette-stage{width:min(610px,98vw);margin-top:2px}
  .roulette-frame{width:92%}
  .roulette-engine-note{padding:0 13px}
}
@media(max-width:430px){
  .wheel-heading h1{font-size:2.15rem}
  .roulette-stage{width:100vw;margin-left:calc(50% - 50vw)}
  .roulette-frame{width:94%}
  .roulette-spin-wrap{margin-top:-5px;padding:0 14px}
  .roulette-spin-button{width:min(92vw,460px);min-height:70px;padding:10px 26px 9px}
  .roulette-bulbs span{width:8px}
}
@media(prefers-reduced-motion:reduce){
  .roulette-bulbs span,.roulette-stage.is-spinning .roulette-pointer,.roulette-spin-button.is-spinning span{animation:none!important}
}


/* Apenas suporte para ícones SVG do menu inferior */
.user-bottom-nav .nav-icon{
    display:grid;
    place-items:center;
    line-height:1;
}
.user-bottom-nav .nav-icon svg{
    width:1.12rem;
    height:1.12rem;
    display:block;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Visitante: vê a página completa, mas precisa entrar ou cadastrar para girar */
.roulette-auth-button{
  text-decoration:none;
  text-align:center;
  animation:rouletteAuthPulse 1.8s ease-in-out infinite alternate;
}
.roulette-auth-button span{
  font-size:clamp(1.12rem,4.2vw,2.15rem);
}
.roulette-auth-button:hover{
  transform:translateY(-3px) scale(1.012);
  filter:brightness(1.08);
}
body.guest-view .roulette-shell{
  padding-top:clamp(22px,4vw,46px);
}
body.guest-view .roulette-engine-note{
  max-width:620px;
}
@keyframes rouletteAuthPulse{
  from{
    box-shadow:
      inset 0 0 0 3px rgba(255,255,255,.26),
      inset 0 -7px 12px rgba(93,48,12,.18),
      0 7px 0 var(--app-wheel-center-shadow),
      0 17px 28px rgba(32,18,10,.34);
  }
  to{
    box-shadow:
      inset 0 0 0 3px rgba(255,255,255,.34),
      inset 0 -7px 12px rgba(93,48,12,.14),
      0 7px 0 var(--app-wheel-center-shadow),
      0 18px 38px rgba(255,210,31,.34);
  }
}
@media(prefers-reduced-motion:reduce){
  .roulette-auth-button{animation:none}
}

