/* Abertura e onboarding. Isolado das máquinas e da carteira. */
#onb{width:min(540px,100%);padding:calc(14px + var(--safe-t)) 26px calc(24px + var(--safe-b));isolation:isolate}
#onb::before{display:none}
#onb .cena{background:radial-gradient(ellipse at 50% 30%,#24684e88,transparent 55%),linear-gradient(160deg,#102d26,#081c18 60%,#091915)}
#onb .arco,#onb .lampada,#onb .trilho,#onb .pilha,#onb .fichaCoroa,#onb .cartaAs{display:none}
#onb .cena::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#ffe3a780 1px,transparent 2px),radial-gradient(circle,#ffe3a740 1px,transparent 2px);background-size:97px 131px,173px 113px;background-position:15px 0,48px 80px;mask-image:linear-gradient(#000,transparent 80%);animation:poeira 12s ease-in-out infinite alternate}
#onb .onbTopo{height:44px;gap:14px;position:relative;z-index:3}
#onb.modoIntro .onbTopo{justify-content:flex-end}
.controleSom{min-height:44px;padding:0 12px;border:1px solid #d6e9df22;border-radius:22px;color:#c7d8cf;font-size:11px;white-space:nowrap;background:#ffffff07}
.controleSom[aria-pressed="true"]{color:#ffe1a1;border-color:#ffe1a166}
#onb .voltar{width:44px;height:44px;background:#ffffff09;box-shadow:inset 0 0 0 1px #ffffff12}
#onb .progresso{height:5px;background:#ffffff12}
#onb .progresso span{background:linear-gradient(90deg,#72dfb4,#ffe1a1);box-shadow:0 0 12px #80e7b8}
#onb .intro{padding-top:0;justify-content:center;padding-bottom:0}
#onb .intro .ornamento{margin:14px 0 8px}
#onb .ornamento span{font-size:17px;letter-spacing:.2em;color:#f9e6bb}
.seloIntro{font-size:9px;letter-spacing:.26em;color:#9fbbae}
.heroCassino{height:310px;position:relative;margin:12px -12px 4px;display:grid;place-items:center}
.roletaIntro{position:absolute;width:282px;height:282px;top:8px;left:50%;margin-left:-141px;transform:rotateX(18deg);border-radius:50%;box-shadow:0 0 80px #57c29525,0 25px 40px #0008;border:7px solid #bd9653;background:#d2b473}
.roletaDisco{position:absolute;inset:3px;border-radius:50%;background:repeating-conic-gradient(#943d3e 0deg 15deg,#163f34 15deg 30deg);border:2px solid #f7d995;animation:roletaLuxo 65s linear infinite}
.roletaDisco::before{content:"";position:absolute;inset:31px;border-radius:50%;background:radial-gradient(circle,#c9a965 0 7%,#174a38 8% 56%,#d7bd7d 57% 59%,#123629 60%);border:2px solid #e1ba73;box-shadow:inset 0 0 22px #0009}
.roletaDisco span{position:absolute;left:calc(50% - 9px);top:5px;width:18px;height:18px;font:9px var(--font);color:#ffedce;text-align:center;transform-origin:9px 122px;transform:rotate(calc(var(--n)*15deg))}
.bolinhaRoleta{position:absolute;inset:15px;border-radius:50%;animation:roletaLuxo 9s linear infinite reverse}
.bolinhaRoleta::after{content:"";position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;background:#fff8e7;box-shadow:0 0 12px #ffdc9b}
.guia{display:flex;align-items:center;gap:12px;margin:0 0 24px;position:relative}
.milo{width:80px;height:90px;object-fit:contain;filter:drop-shadow(0 9px 12px #0004);flex:none}
.falaMilo{display:flex;flex-direction:column;gap:5px;padding:14px 16px;background:linear-gradient(145deg,#ffffff13,#ffffff07);border:1px solid #ffffff16;border-radius:20px 20px 20px 5px;box-shadow:0 10px 25px #0001;font-size:13px;line-height:1.45;color:#dfebe4}
.falaMilo strong{font-size:10px;letter-spacing:.03em;color:#edcd8b;font-weight:600}
.guiaHero{display:contents}
.guiaHero .milo{position:absolute;z-index:1;width:250px;height:270px;left:calc(50% - 125px);top:22px;animation:miloChega .9s var(--ease) both,miloFlutua 5s ease-in-out 1s infinite}
.guiaHero .falaMilo{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:8px 20px;border-radius:18px;z-index:2;background:#12382eee;backdrop-filter:blur(12px);text-align:center;font-size:12px;box-shadow:0 8px 20px #0003}
.guiaHero .falaMilo strong{font-size:9px}
#onb .heroCassino .ficha{position:absolute;z-index:2;width:82px;height:82px;right:calc(50% - 159px);bottom:48px;margin:0;animation:fichaRola 1.4s cubic-bezier(.2,.8,.3,1) both,respirar 4s 1.4s ease-in-out infinite;box-shadow:0 0 0 2px #b77c41,0 12px 20px #0008}
#onb .heroCassino .ficha::before{inset:12px;box-shadow:0 0 0 2px #f4d896,inset 0 2px 9px #ffffff44}
#onb .heroCassino .ficha span{font-size:23px}
#onb .heroCassino .ficha::after{display:none}
#onb .intro .pergunta{white-space:pre-line;font-family:var(--serif);font-size:clamp(29px,7.5vw,40px);line-height:1.1;letter-spacing:-.035em;margin:15px 0 12px;color:#fff3db}
#onb .intro .sub{font-family:var(--font);font-size:14px;line-height:1.5;color:#b2c7bd;max-width:310px;margin:0 auto}
#onb .intro .nota{font:12px/1.5 var(--font);color:#bdd0c5;margin:18px 0 0}
#onb .botao.gala{overflow:hidden;min-height:62px;margin:15px 0 0;border-radius:20px;font:700 18px var(--font);gap:30px;background:linear-gradient(115deg,#e5b869,#fff0bd 50%,#e8c17e);box-shadow:inset 0 1px 0 #fff8,0 4px 0 #8d6833,0 14px 40px #e6bc5d22}
#onb .botao.gala b{font:24px var(--font);color:#684b24}
#onb .botao.gala::after{content:"";position:absolute;inset:-60% auto -60% -60%;width:35%;background:linear-gradient(90deg,transparent,#ffffff85,transparent);transform:rotate(25deg);animation:botaoBrilha 5s 2s ease-in-out infinite;pointer-events:none}
.rodapeIntro{margin-top:20px;color:#79988a;font-size:8px;letter-spacing:.17em}
#onb:not(.modoIntro){padding:calc(20px + var(--safe-t)) 24px calc(24px + var(--safe-b))}
#onb:not(.modoIntro) .passo{padding-top:22px}
.etapaLabel{font-size:10px;font-weight:600;letter-spacing:.16em;color:#85bda5;margin-bottom:14px}
#onb:not(.modoIntro) .pergunta{font-family:var(--font);font-size:clamp(27px,7vw,35px);line-height:1.12;letter-spacing:-.045em;font-weight:700;margin-bottom:12px;color:#f2f6f3}
#onb .dourado{background:none;color:#a8e6c9}
#onb:not(.modoIntro) .passo .sub{font-size:14px;line-height:1.55;color:#9eb8aa;margin-bottom:24px}
#onb .opcoes{gap:10px}
#onb .opcao{min-height:77px;padding:12px 15px;gap:13px;border-radius:21px;background:linear-gradient(120deg,#ffffff0e,#ffffff05);box-shadow:inset 0 0 0 1px #d4efdf19,0 7px 16px #0001;transition:background .2s,transform .2s,box-shadow .2s}
#onb .opcao:hover{background:#ffffff13;transform:translateY(-2px)}
#onb .opEmoji{width:46px;height:46px;border-radius:15px;background:#a0e5c710;box-shadow:inset 0 0 0 1px #c8ffe50a;font-size:25px}
#onb .opTitulo{font-size:16px;color:#edf5ef}
#onb .opDesc{font-size:12px;color:#a4b9ae;margin-top:3px}
#onb .opCheck{width:24px;height:24px;box-shadow:inset 0 0 0 1px #c3e9d738}
#onb .opcao.escolhido,#onb .chip.escolhido,#onb .bolinha.escolhido{background:linear-gradient(120deg,#28694f,#164936);box-shadow:inset 0 0 0 1.5px #a0ecc6,0 0 28px #6ae6aa22;transform:scale(1.015)}
#onb .opcao.escolhido .opCheck{background:#a5efc9;color:#123a29;box-shadow:0 0 14px #a5efc955}
#onb .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;width:100%}
#onb .chip{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:68px;border-radius:18px;padding:14px 10px;background:#ffffff09;box-shadow:inset 0 0 0 1px #ffffff1a;font-size:15px;font-weight:600;line-height:1.35;text-align:center;text-wrap:balance}
#onb .chip .opTexto{justify-content:center;min-width:0}
#onb .chip .opTitulo{font-size:15px;line-height:1.35}
#onb .bolinha{border-radius:16px;background:#ffffff09;box-shadow:inset 0 0 0 1px #ffffff1a}
#onb .campo{border-radius:17px;background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff20}
#onb .cartaoPerfil{border-radius:28px;background:radial-gradient(ellipse at top,#327556,#102c22 80%);box-shadow:inset 0 0 0 1px #e7d19b44,0 18px 45px #0003}
#onb .revelar{justify-content:flex-start}
#onb .entraDireita{animation:entradaCartao .5s var(--ease)}
#onb .entraEsquerda{animation:entradaCartao .4s var(--ease)}
.confirmando .passo{opacity:.8;transition:opacity .6s;pointer-events:none}
.chuvaFesta{position:fixed;z-index:100;pointer-events:none;width:0;height:0}
.chuvaFesta i{position:absolute;width:6px;height:10px;border-radius:2px;animation:confeteLuxo .9s ease-out both}
@keyframes confeteLuxo{0%{transform:translate(0,0) scale(0);opacity:1}20%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@keyframes fichaRola{0%{opacity:0;transform:translateX(-300px) rotate(-500deg) scale(.5)}65%{opacity:1;transform:translateX(12px) rotate(15deg)}85%{transform:translateX(-5px) rotate(-7deg)}100%{transform:none}}
@keyframes roletaLuxo{to{transform:rotate(360deg)}}
@keyframes miloChega{from{opacity:0;transform:translateY(35px) scale(.85)}to{opacity:1;transform:none}}
@keyframes miloFlutua{50%{transform:translateY(-5px) rotate(-1deg)}}
@keyframes poeira{to{transform:translateY(-22px);opacity:.45}}
@keyframes botaoBrilha{0%,60%{left:-60%}100%{left:140%}}
@keyframes entradaCartao{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media(min-width:760px){#onb{padding-top:24px;padding-bottom:28px}.heroCassino{height:330px;margin-top:18px}.guiaHero .milo{height:290px;width:270px;left:calc(50% - 135px)}.roletaIntro{width:302px;height:302px;margin-left:-151px}.roletaDisco span{transform-origin:9px 132px}.intro .botao{max-width:390px;align-self:center}}
@media(max-width:360px){#onb,#onb:not(.modoIntro){padding-left:18px;padding-right:18px}.heroCassino{height:280px}.guiaHero .milo{height:235px;width:220px;left:calc(50% - 110px)}.roletaIntro{transform:scale(.88);top:-5px}#onb .intro .pergunta{font-size:28px}.falaMilo{padding:11px;font-size:12px}#onb .opTitulo{font-size:15px}}
/* Esplendor de palco e letreiro: mais intensidade nas duas revelações. */
#onb .cena::before{content:"";position:absolute;width:220vmax;height:220vmax;left:50%;top:40%;margin:-110vmax;background:repeating-conic-gradient(from 0deg,#f7d989 0deg 8deg,transparent 8deg 22.5deg);opacity:.035;animation:esplendorGira 80s linear infinite;transition:opacity 1s;will-change:transform}
#onb.modoIntro .cena::before,#onb.modoRevelacao .cena::before{opacity:.16}
#onb .cena::after{background-image:radial-gradient(circle,#ffe3a7b0 1px,transparent 2px),radial-gradient(circle,#fff2c76a 1px,transparent 2px);animation:poeira 9s ease-in-out infinite alternate}
.letreiroCassino{position:relative;flex:none;align-self:center;width:min(330px,100%);padding:27px 22px 25px;margin:10px auto 8px;border:1px solid #f2d58c;border-radius:25px;background:radial-gradient(ellipse at 50% 100%,#94753238,transparent 75%),linear-gradient(140deg,#302b17,#151d14 60%,#262718);box-shadow:0 0 0 4px #151e16,0 0 0 5px #b48d47,0 12px 45px #0004,0 0 48px #f1cc6c18;text-align:center;animation:letreiroChega .85s var(--ease) both}
.letreiroCassino small{display:block;font:italic 12px var(--serif);color:#f2dfac;margin-bottom:3px}
.letreiroCassino strong{display:block;font:700 clamp(38px,10vw,52px)/1 var(--serif);letter-spacing:.09em;padding-left:.09em;background:linear-gradient(#fff1bb,#f1c567 55%,#ba862e);color:transparent;background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 3px 0 #664516)}
.letreiroCassino>span{display:block;font:600 22px/1.2 var(--serif);letter-spacing:.32em;padding-left:.32em;color:#efcf83}
.lampadasLetreiro{position:absolute;left:20px;right:20px;display:flex;justify-content:space-between;pointer-events:none}
.lampadasLetreiro.superior{top:11px}.lampadasLetreiro.inferior{bottom:11px}
.lampadasLetreiro i{width:5px;height:5px;border-radius:50%;background:#fff0b5;box-shadow:0 0 7px #ffe3a5,0 0 12px #e9b65b;animation:lampadaCorre 2.6s ease-in-out var(--atraso) infinite}
#onb .intro{padding-top:12px}
#onb .heroCassino{margin-top:10px;height:280px}
#onb .guiaHero .milo{height:246px;width:230px;left:calc(50% - 115px);top:13px;transform-origin:50% 90%;animation:miloChega .9s var(--ease) both,miloSauda 5s ease-in-out 1s infinite}
#onb .roletaIntro{width:260px;height:260px;margin-left:-130px;top:0;border-color:#d3ac67;box-shadow:0 0 0 2px #ffe0a038,0 0 55px #e9cb7130,0 25px 40px #0007}
#onb .roletaDisco{animation-duration:30s}
#onb .roletaDisco span{transform-origin:9px 111px}
#onb .bolinhaRoleta{animation-duration:6s}
#onb .intro .pergunta{margin-top:12px;font-size:clamp(28px,7vw,36px)}
#onb .intro .nota{margin-top:12px}
#onb .rodapeIntro{margin-top:17px}
#onb .botao.gala{animation:botaoHalo 3s ease-in-out infinite}
#onb .botao.gala::after{animation-duration:3.5s}
#onb .guia:not(.guiaHero) .milo{animation:miloSauda 6s ease-in-out infinite;transform-origin:50% 90%}
#onb .falaMilo{border-color:#f0d9912b;box-shadow:0 8px 26px #0002,inset 0 1px 0 #ffffff09}
#onb .opcao,#onb .chip,#onb .bolinha{position:relative;animation:opcaoChega .45s var(--ease) var(--entrada,0ms) both}
#onb .opcao.escolhido,#onb .chip.escolhido,#onb .bolinha.escolhido{animation:respostaCelebra .6s var(--ease) both}
#onb .confirmando .guia .milo{animation:miloComemora .6s var(--ease) both}
#onb .confirmando .falaMilo{border-color:#ffe5a5;box-shadow:0 0 25px #ffe5a525;transition:box-shadow .2s,border-color .2s}
#onb .confirmando .passo{opacity:1}
#onb.modoRevelacao .letreiroCassino{margin-bottom:26px}
#onb.modoRevelacao .guia{margin-bottom:20px}
#onb.modoRevelacao .cartaoPerfil{border:1px solid #f1d48b77;box-shadow:0 0 35px #ffe5a516,0 20px 45px #0004}
#onb.modoRevelacao .perfilEmoji{animation:medalhaChega .8s var(--ease) both}
#onb.modoRevelacao .perfilSaldo strong{color:#ffe5a0;text-shadow:0 0 20px #ffdc7650}
#onb .luzes i{animation:lampadaCorre 2.6s ease-in-out infinite}
#onb .luzes i:nth-child(even){animation-delay:-1.3s}
@keyframes esplendorGira{to{transform:rotate(360deg)}}
@keyframes lampadaCorre{0%,100%{opacity:1;box-shadow:0 0 8px #ffe3a5,0 0 15px #e9b65b}50%{opacity:.35;box-shadow:0 0 2px #e9b65b}}
@keyframes letreiroChega{from{opacity:0;transform:translateY(-18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes miloSauda{0%,45%,100%{transform:translateY(0) rotate(0)}55%{transform:translateY(-5px) rotate(-3deg)}65%{transform:translateY(-3px) rotate(2deg)}75%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes miloComemora{0%,100%{transform:none}35%{transform:translateY(-12px) rotate(-8deg)}65%{transform:translateY(-4px) rotate(5deg)}}
@keyframes botaoHalo{0%,100%{box-shadow:inset 0 1px 0 #fff8,0 4px 0 #8d6833,0 12px 26px #e6bc5d20}50%{box-shadow:inset 0 1px 0 #fff8,0 4px 0 #8d6833,0 12px 40px #e6bc5d55}}
@keyframes opcaoChega{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes respostaCelebra{0%{transform:scale(1)}40%{transform:scale(1.025);box-shadow:inset 0 0 0 2px #ffe2a0,0 0 30px #f4d57a55}100%{transform:scale(1);box-shadow:inset 0 0 0 1.5px #a0ecc6,0 0 20px #a0ecc622}}
@keyframes medalhaChega{from{opacity:0;transform:scale(.4) rotate(-20deg)}70%{transform:scale(1.12) rotate(5deg)}to{opacity:1;transform:none}}
@media(max-width:360px){.letreiroCassino{width:260px;padding-top:25px;padding-bottom:23px}.letreiroCassino strong{font-size:38px}.letreiroCassino>span{font-size:19px}#onb .heroCassino{height:270px}}
#onb .onbTopo{flex-wrap:wrap;height:auto;min-height:44px;gap:8px}
#onb .onbTopo .progresso{min-width:90px}
#onb .controleSom{padding:0 10px;font-size:10px}
#onb.movimentoReduzido *,#onb.movimentoReduzido *::before,#onb.movimentoReduzido *::after{animation:none!important;transition:none!important}
/* Clímax do onboarding: festa localizada, sem cobrir os controles. */
#onb .revelar{position:relative}
#onb.modoRevelacao .letreiroCassino{width:min(300px,100%);padding-top:23px;padding-bottom:22px;margin-top:2px;margin-bottom:20px}
#onb.modoRevelacao .letreiroCassino strong{font-size:40px}
#onb.modoRevelacao .guia{margin-bottom:16px}
#onb.modoRevelacao .cartaoPerfil{padding:30px 18px 20px;overflow:hidden;isolation:isolate;animation:cartaoPremiere .9s var(--ease) both,resultadoHalo 3.4s 1s ease-in-out infinite}
#onb.modoRevelacao .cartaoPerfil::before{content:"";position:absolute;z-index:-1;width:700px;height:700px;left:50%;top:30%;margin:-350px;background:repeating-conic-gradient(#ffe19a20 0deg 9deg,transparent 9deg 30deg);mask-image:radial-gradient(circle,#000,transparent 65%);animation:esplendorGira 35s linear infinite}
#onb.modoRevelacao .cartaoPerfil::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#fff0b526 45%,transparent 65%);transform:translateX(-100%);animation:resultadoReflexo 4s 1s ease-in-out infinite}
.seloResultado{font-size:9px;font-weight:700;letter-spacing:.2em;color:#ffe2a0;margin:0 0 16px}
#onb.modoRevelacao .perfilEmoji{width:90px;height:90px;display:grid;place-items:center;margin:0 auto 12px;border-radius:50%;font-size:55px;background:radial-gradient(circle,#f4d17b33,#f4d17b05 70%);box-shadow:0 0 0 1px #ffe5a555,0 0 0 7px #ffe5a509,0 0 35px #f4cf6233;animation:medalhaChega 1s .15s var(--ease) both,medalhaFlutua 3s 1.2s ease-in-out infinite}
#onb.modoRevelacao .perfilNome{font-size:clamp(31px,8vw,40px);color:#ffe6a9;text-shadow:0 2px 0 #6a5225,0 0 24px #ebbd6744;animation:resultadoTexto .65s .35s var(--ease) both}
#onb.modoRevelacao .cartaoPerfil .sub{margin-bottom:16px}
#onb.modoRevelacao .perfilSaldo>div{animation:resultadoTexto .65s .55s var(--ease) both;border:1px solid #e4ce8c22;background:#071d17a6}
#onb.modoRevelacao .perfilSaldo>div+div{animation-delay:.75s}
#onb.modoRevelacao .perfilSaldo strong{display:block;font-size:24px;animation:saldoBrilha 2.8s 1s ease-in-out infinite}
#onb.modoRevelacao .luzes i{width:7px;height:7px;animation-duration:1.8s}
.festaResultado{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;border-radius:24px}
.papelResultado{position:absolute;top:-20px;left:var(--left);width:7px;height:13px;border-radius:2px;background:var(--color);opacity:0;animation:papelCai 4.3s var(--delay) cubic-bezier(.2,.6,.5,1) both}
.papelResultado:nth-child(3n){width:5px;height:5px;border-radius:50%}
.ondaResultado{position:absolute;left:50%;top:43%;width:80px;height:80px;margin:-40px;border:2px solid #ffdf99;border-radius:50%;box-shadow:0 0 35px #ffda8055,inset 0 0 25px #ffe4a533;opacity:0;animation:ondaFesta 1.8s var(--delay) ease-out both}
.estrelaResultado{position:absolute;left:50%;top:43%;color:#ffe6a9;font-size:18px;text-shadow:0 0 12px #ffd37b;opacity:0;animation:estrelaExplode 1.8s var(--delay) ease-out both}
@keyframes papelCai{0%{opacity:0;transform:translate3d(0,-15px,0) rotate(0)}10%,75%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),850px,0) rotate(var(--turn))}}
@keyframes ondaFesta{0%{opacity:0;transform:scale(.3)}15%{opacity:.65}100%{opacity:0;transform:scale(8)}}
@keyframes estrelaExplode{0%{opacity:0;transform:scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(130deg) scale(.4)}}
@keyframes cartaoPremiere{from{opacity:0;transform:translateY(25px) scale(.9)}65%{opacity:1;transform:translateY(-4px) scale(1.015)}to{transform:none}}
@keyframes resultadoHalo{0%,100%{box-shadow:0 0 25px #ffe5a51a,0 20px 45px #0004}50%{box-shadow:0 0 50px #ffe5a540,0 20px 45px #0004}}
@keyframes resultadoReflexo{0%,40%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes resultadoTexto{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
@keyframes medalhaFlutua{50%{transform:translateY(-5px) rotate(5deg)}}
@keyframes saldoBrilha{50%{text-shadow:0 0 22px #ffdc7688}}
#onb.movimentoReduzido .festaResultado{display:none}