:root{--roxo:#5b2fc9;--roxo2:#2d1b5e;--lilas:#c3a9f3;--teal:#2bb39a;--menta:#7ee0c3;--ouro:#ffc94d;--rosa:#ff8fab;--txt:#fff;--fundo:#1a1036;--card:#ffffff14;--borda:#ffffff22;--acento:#ffc94d;--ev1:transparent;--ev2:transparent;
--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--fundo);color:var(--txt);font-family:"Nunito","Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px}
body{background:radial-gradient(120% 80% at 50% 0%,#4b2a9a 0%,#24124f 55%,#140a2e 100%) fixed;overscroll-behavior:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--menta)}
#app{max-width:520px;margin:0 auto;min-height:100%;position:relative;padding-bottom:calc(76px + var(--safe-b))}
.tela{padding:calc(12px + var(--safe-t)) 14px 18px;animation:entra .28s ease}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1,h2,h3{margin:.3em 0 .4em;line-height:1.15}
h1{font-size:1.7rem}h2{font-size:1.3rem}h3{font-size:1.05rem}
.titulo-anima{font-weight:900;font-size:2.6rem;letter-spacing:.04em;background:linear-gradient(180deg,#fff4c2,#ffc94d 40%,#c77dff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 3px 18px #c77dff55;margin:0}
.sub{opacity:.85;margin:0 0 10px}
.card{background:var(--card);border:1px solid var(--borda);border-radius:20px;padding:14px;margin:10px 0;backdrop-filter:blur(6px)}
.card.ouro{border-color:#ffc94d77;background:linear-gradient(135deg,#ffc94d22,#c77dff22)}
.linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.entre{justify-content:space-between}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{border:0;border-radius:16px;padding:12px 16px;font-weight:800;background:linear-gradient(180deg,#8b5cf6,#5b2fc9);box-shadow:0 4px 0 #3b1d8f,0 8px 20px #0004;cursor:pointer;min-height:46px;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #3b1d8f}
.btn.ouro{background:linear-gradient(180deg,#ffe08a,#ffb703);color:#3b1d00;box-shadow:0 4px 0 #b26b00}
.btn.teal{background:linear-gradient(180deg,#5eead4,#14a38b);color:#032b24;box-shadow:0 4px 0 #0c6b5b}
.btn.leve{background:#ffffff1c;box-shadow:none;border:1px solid var(--borda)}
.btn.perigo{background:linear-gradient(180deg,#ff6b6b,#c92a2a);box-shadow:0 4px 0 #861616}
.btn.mini{padding:7px 11px;min-height:34px;font-size:.9rem;border-radius:12px}
.btn.cheio{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
label{display:block;font-weight:700;margin:10px 0 4px;font-size:.95rem}
input:not([type]),input[type=text],input[type=tel],input[type=url],input[type=search],input[type=email],input[type=password],input[type=date],input[type=number],input[type=datetime-local],select,textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--borda);background:#0000002e;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--menta)}
select option{color:#111}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:.92rem}
.check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--teal)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:7px 11px;border-radius:999px;background:#ffffff16;border:1px solid var(--borda);font-weight:700;font-size:.88rem;cursor:pointer;user-select:none}
.chip.on{background:linear-gradient(180deg,#5eead4,#14a38b);color:#032b24;border-color:transparent}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;background:#ffffff22;font-size:.78rem;font-weight:800}
.pill.pub{background:#ffc94d;color:#3b1d00}.pill.raro{background:linear-gradient(90deg,#c77dff,#ffc94d);color:#24124f}.pill.lim{background:#ff8c1a;color:#260f00}
.aviso{font-size:.8rem;opacity:.78;line-height:1.35}
.erro{color:#ffb4b4;font-weight:700;min-height:1.2em}
.oculto{display:none!important}
.centro{text-align:center}
.peq{font-size:.85rem}
/* splash */
.splash{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;background:#24134d;position:relative;overflow:hidden;overflow-x:hidden}
.splash-fundo{position:absolute;inset:-40px -40px 45% -40px;background:url(/img/capa.jpg) center 30%/cover no-repeat;filter:blur(30px) brightness(.55) saturate(1.1);transform:translateZ(0)}
.splash-arte{position:relative;flex:0 0 auto;width:min(100%,max(210px,calc((100dvh - 390px) * .72)));aspect-ratio:720/1000;margin:var(--safe-t,0px) auto 0;background:url(/img/capa.jpg) center/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 78%,#0000),linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 78%,#0000),linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000);mask-composite:intersect}
#app:has(>.splash){padding-bottom:0}
.splash .acoes{position:relative;margin-top:-28px!important;padding:4px max(18px,var(--safe-l,0px)) calc(22px + var(--safe-b));display:grid;gap:10px;width:100%;max-width:520px;margin:0 auto}
.splash .aviso{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 14px;margin:4px 0 0;overflow-wrap:anywhere}
.splash .aviso>span{white-space:nowrap}
.copy{font-size:.72rem;opacity:.62;text-align:center;margin:2px 0 0;line-height:1.35}
@media (max-height:620px){.splash .titulo-anima{font-size:2.1rem}}
/* nav */
nav.abas{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;display:grid;grid-template-columns:repeat(5,1fr);background:#1b0f3ee8;backdrop-filter:blur(10px);border-top:1px solid var(--borda);padding:6px 4px calc(6px + var(--safe-b));z-index:30}
nav.abas button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.72rem;font-weight:800;opacity:.7;padding:4px 0;cursor:pointer}
nav.abas button span{font-size:1.45rem}
nav.abas button.on{opacity:1;color:var(--ouro)}
/* topo */
.topo{display:flex;justify-content:space-between;align-items:center;gap:8px}
.moedas{background:#0000003a;border-radius:999px;padding:5px 11px;font-weight:900}
.sino{position:relative;background:none;border:0;font-size:1.4rem;cursor:pointer}
.sino b{position:absolute;top:-2px;right:-4px;background:#ff5d8f;border-radius:999px;font-size:.66rem;padding:1px 5px}
/* banner evento */
.banner-ev{border-radius:18px;padding:10px 12px;margin:8px 0;background:linear-gradient(135deg,var(--ev1),var(--ev2));font-weight:800;display:flex;justify-content:space-between;gap:8px;align-items:center;box-shadow:0 6px 18px #0005}
.banner-ev small{display:block;font-weight:600;opacity:.9}
.banner-ev.finados{background:linear-gradient(135deg,#3a3550,#6c6684);font-weight:700}
.contagem{font-variant-numeric:tabular-nums;background:#0004;border-radius:10px;padding:4px 8px;white-space:nowrap;font-size:.85rem}
/* cena */
.cena{position:relative;height:330px;border-radius:24px;overflow:hidden;margin:8px 0;touch-action:pan-y;box-shadow:inset 0 0 0 1px var(--borda),0 10px 30px #0006}
.ceu{position:absolute;inset:0;transition:background 1s}
.camada{position:absolute;left:0;bottom:0;height:100%;width:300%;will-change:transform;transition:transform 2.6s ease-in-out}
.camada svg{position:absolute;bottom:0;left:0;width:100%;height:100%}
.spot{position:absolute;bottom:58px;transform:translateX(-50%);font-size:.72rem;font-weight:800;background:#0006;padding:3px 8px;border-radius:10px;white-space:nowrap}
.cena.sem-trans .camada,.cena.sem-trans .ator{transition:none!important}
.ator{position:absolute;bottom:22px;left:50%;width:150px;height:160px;transform:translateX(-50%);transition:left 2.6s ease-in-out;z-index:5;cursor:pointer}
.ator .pet-svg{width:150px;height:160px;overflow:visible}
@media (max-width:340px){.ator,.ator .pet-svg{width:124px;height:132px}}
.ator .mini{position:absolute;width:46px;height:50px;left:-34px;bottom:4px;transition:left 1.2s .4s}
.ator.anda .pet-corpo{animation:anda .45s ease-in-out infinite}
.ator.andando-esq .pet-svg{transform:scaleX(-1)}
@keyframes anda{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.pet-svg .pet-corpo{transform-box:fill-box;transform-origin:50% 100%}
.acao-parado .pet-corpo,.acao-acordando .pet-corpo,.acao-conversando .pet-corpo,.acao-trabalhando .pet-corpo,.acao-estudando .pet-corpo,.acao-passeando .pet-corpo{animation:respira 3s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.98)}}
.acao-dancando .pet-corpo,.acao-brincando .pet-corpo{animation:danca .6s ease-in-out infinite}
@keyframes danca{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-8px)}}
.acao-comendo .pet-corpo{animation:come .5s ease-in-out infinite}
@keyframes come{50%{transform:scale(1.04,.96)}}
.acao-dormindo .pet-corpo{animation:dorme 4s ease-in-out infinite}
@keyframes dorme{50%{transform:scale(1.03,.97)}}
.acao-sentado .pet-corpo{transform:scale(1.05,.88)}
.pet-svg .acena{animation:acena .5s ease-in-out infinite alternate;transform-box:fill-box}
@keyframes acena{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.pet-svg .olho{animation:pisca 5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes pisca{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
.pet-svg .broto{transform-box:fill-box;transform-origin:50% 100%;animation:broto 3s ease-in-out infinite}
@keyframes broto{50%{transform:rotate(6deg)}}
.pet-svg .zz text{animation:zz 2s infinite}
@keyframes zz{0%{opacity:0;transform:translateY(6px)}50%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.pet-svg .helice{animation:gira .4s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes gira{to{transform:rotate(360deg)}}
.ator.pula .pet-corpo{animation:pula .5s ease 2}
@keyframes pula{40%{transform:translateY(-34px) scale(.95,1.05)}70%{transform:translateY(0) scale(1.08,.92)}}
.mini-svg{animation:flutua 2.2s ease-in-out infinite}
@keyframes flutua{50%{transform:translateY(-7px)}}
.balao{position:absolute;left:50%;bottom:190px;transform:translateX(-50%);background:#fff;color:#2d1b5e;padding:8px 12px;border-radius:16px;font-weight:800;font-size:.86rem;max-width:84%;z-index:8;box-shadow:0 6px 14px #0005;text-align:center;animation:entra .25s}
.balao::after{content:"";position:absolute;bottom:-8px;left:50%;border:8px solid transparent;border-top-color:#fff;border-bottom:0;transform:translateX(-50%)}
.chuva,.overlay{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.chuva i{position:absolute;top:-10px;width:2px;height:14px;background:#cfe8ff99;animation:cai .8s linear infinite}
@keyframes cai{to{transform:translateY(360px)}}
.overlay span{position:absolute;font-size:22px;animation:sobe 9s linear infinite;opacity:.9}
@keyframes sobe{from{transform:translateY(340px) rotate(0)}to{transform:translateY(-60px) rotate(30deg)}}
.overlay.finados span{animation-duration:16s;opacity:.55}
.vizinho{position:absolute;bottom:26px;width:56px;z-index:4;text-align:center;font-size:.62rem;font-weight:800}
.vizinho .pet-svg{width:56px;height:60px}
.hud-cena{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;z-index:9;font-weight:800;font-size:.8rem}
.hud-cena span{background:#0006;border-radius:10px;padding:4px 8px}
/* stats */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.stat{font-size:.78rem;font-weight:800}
.barra{height:9px;border-radius:9px;background:#0005;overflow:hidden;margin-top:3px}
.barra i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--teal),var(--menta));transition:width .5s}
.barra.ouro i{background:linear-gradient(90deg,#ffb703,#ffe08a)}
.acoes-pet{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0}
.acoes-pet button{background:#ffffff16;border:1px solid var(--borda);border-radius:16px;padding:8px 0;display:flex;flex-direction:column;align-items:center;font-size:.7rem;font-weight:800;cursor:pointer}
.acoes-pet button span{font-size:1.5rem}
.acoes-pet button:active{transform:scale(.94)}
/* ovos */
.ovos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ovo-op{background:#ffffff12;border:2px solid transparent;border-radius:20px;padding:8px 4px;text-align:center;font-size:.78rem;font-weight:800;cursor:pointer}
.ovo-op.on{border-color:var(--ouro);background:#ffc94d22}
.ovo-op .ovo-svg{width:64px;height:80px;display:block;margin:0 auto 4px}
.chocadeira{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;text-align:center}
.chocadeira .ovo-svg{width:170px;height:210px;animation:treme .25s infinite}
@keyframes treme{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.chocadeira .pet-svg{width:200px;height:210px;animation:nasce .9s cubic-bezier(.2,1.6,.4,1)}
@keyframes nasce{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.brilho{position:fixed;inset:0;background:radial-gradient(circle,#fff 0%,#ffc94d88 30%,#0000 70%);animation:flash 1s forwards;pointer-events:none;z-index:50}
@keyframes flash{from{opacity:1}to{opacity:0}}
/* modal */
.modal{position:fixed;inset:0;background:#0009;z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:entra .2s}
.modal .folha{background:linear-gradient(180deg,#2e1a66,#1b0f3e);width:100%;max-width:520px;max-height:90vh;overflow:auto;border-radius:24px 24px 0 0;padding:16px 16px calc(20px + var(--safe-b));border:1px solid var(--borda)}
.modal .fechar{float:right;background:#fff2;border:0;border-radius:50%;width:34px;height:34px;font-size:1.1rem;cursor:pointer}
.toast{position:fixed;left:50%;top:calc(14px + var(--safe-t));transform:translateX(-50%);background:#fff;color:#2d1b5e;font-weight:800;padding:10px 16px;border-radius:16px;z-index:90;box-shadow:0 8px 24px #0006;max-width:92%;animation:entra .2s;text-align:center}
/* chat */
.chat{display:flex;flex-direction:column;gap:8px;min-height:40vh;max-height:56vh;overflow:auto;padding:4px}
.msg{max-width:82%;padding:9px 12px;border-radius:18px;line-height:1.35;white-space:pre-wrap}
.msg.eu{align-self:flex-end;background:linear-gradient(180deg,#8b5cf6,#6d28d9);border-bottom-right-radius:6px}
.msg.pet{align-self:flex-start;background:#ffffff1c;border-bottom-left-radius:6px}
.msg .trad{display:block;font-size:.78rem;opacity:.75;margin-top:4px}
.cvv{background:#ffe3e3;color:#7a1010;border-radius:16px;padding:12px;font-weight:700}
.cvv a{color:#a10f0f}
.falar{width:76px;height:76px;border-radius:50%;font-size:2rem;border:0;background:radial-gradient(circle at 35% 30%,#7ee0c3,#14a38b);box-shadow:0 6px 0 #0c6b5b,0 10px 30px #14a38b66;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.falar.ouvindo{animation:pulsa 1s infinite;background:radial-gradient(circle at 35% 30%,#ffb4c6,#ff5d8f)}
@keyframes pulsa{50%{box-shadow:0 0 0 14px #ff5d8f33}}
/* lista */
.lista{display:flex;flex-direction:column;gap:8px}
.item{background:#ffffff10;border:1px solid var(--borda);border-radius:16px;padding:10px 12px}
.item.res{opacity:.65}
.item img{max-width:100%;border-radius:12px;margin-top:6px}
.canal{display:flex;align-items:center;gap:10px;background:#ffffff12;border:1px solid var(--borda);border-radius:16px;padding:10px 12px;text-decoration:none;color:inherit}
.canal b.num{font-size:1.25rem;min-width:62px;text-align:center;background:#ffc94d;color:#3b1d00;border-radius:12px;padding:6px 4px}
.canal small{display:block;opacity:.8}
.mapa{position:relative;height:220px;border-radius:18px;background:linear-gradient(135deg,#1e3a5f,#274b4f);overflow:hidden;border:1px solid var(--borda)}
.mapa .pino{position:absolute;transform:translate(-50%,-100%);font-size:1.4rem;cursor:pointer}
.mapa .grade-mapa{position:absolute;inset:0;background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);background-size:30px 30px}
/* jogos */
.cartas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.carta{aspect-ratio:1;border-radius:14px;border:0;font-size:1.8rem;background:linear-gradient(135deg,#8b5cf6,#5b2fc9);cursor:pointer}
.carta.aberta{background:#fff;color:#000}
.alvo-reflexo{height:260px;border-radius:20px;background:#0003;position:relative;overflow:hidden}
.alvo-reflexo{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.rf-alvo{position:absolute;width:64px;height:64px;border-radius:50%;border:0;padding:0;line-height:1;font-size:2rem;background:radial-gradient(circle,#fff6d0,#ffb703 70%);box-shadow:0 0 0 4px #fff8,0 4px 12px #0006;cursor:pointer;touch-action:manipulation;animation:rf-pop .12s ease-out}
.rf-alvo[hidden]{display:none}
.rf-alvo.move{transition:left 1.4s linear,top 1.4s linear}
.rf-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;pointer-events:none;text-align:center;padding:12px}
.rf-msg.erro{color:#ff8787}.rf-msg.calma{color:#ffd43b}.rf-msg.ok{color:#5eead4}
.alvo-reflexo.treme{animation:rf-treme .25s}
@keyframes rf-pop{from{transform:scale(.4)}to{transform:scale(1)}}
@keyframes rf-treme{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.rf-alvo,.alvo-reflexo.treme{animation:none}.rf-alvo.move{transition:none}}
.opcoes{display:grid;gap:8px}
.opcoes .btn.certo{background:linear-gradient(180deg,#5eead4,#14a38b)}
.opcoes .btn.errado{background:linear-gradient(180deg,#ff8787,#c92a2a)}
.rank li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #ffffff14}
.rank ol{padding-left:22px;margin:0}
/* trilha */
.trilha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.casa{aspect-ratio:1;border-radius:12px;background:#ffffff12;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.2rem;position:relative;min-width:0;overflow:hidden;padding:3px}
.casa small{font-size:.58rem;line-height:1.1;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.casa.aqui{outline:3px solid var(--ouro);background:#ffc94d33}
.casa .peao{position:absolute;top:2px;right:2px;width:26px;height:26px}.casa .peao svg{width:100%;height:100%}
.dado{font-size:3rem;display:inline-block}
.dado.rolando{animation:gira .3s linear infinite}
/* viagem */
.viagem{position:fixed;inset:0;z-index:70;background:linear-gradient(180deg,#7ec8ff,#c3a9f3);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#2d1b5e;font-weight:900;text-align:center}
.viagem .aviao{font-size:4rem;animation:voa 2.4s ease-in-out}
@keyframes voa{from{transform:translateX(-60vw) rotate(-10deg)}to{transform:translateX(60vw) rotate(10deg)}}
.carimbo{display:inline-block;border:3px dashed #c92a2a;color:#c92a2a;border-radius:12px;padding:6px 10px;transform:rotate(-8deg);font-weight:900;animation:carimba .5s 1.6s both}
@keyframes carimba{from{transform:scale(3) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(-8deg);opacity:1}}
.passaporte{display:flex;flex-wrap:wrap;gap:8px}
.passaporte .carimbo{animation:none;font-size:.78rem;background:#fff;}
/* revelação */
.revela{position:fixed;inset:0;z-index:75;background:radial-gradient(circle,#ffc94d55,#1a1036f2 60%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.revela .presente{font-size:5rem;animation:presente 1s ease}
@keyframes presente{0%{transform:scale(.2) rotate(-30deg)}60%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1)}}
/* paywall */
.paywall{position:fixed;inset:0;z-index:80;background:linear-gradient(180deg,#1b0f3e,#2d1b5e);overflow:auto;padding:calc(18px + var(--safe-t)) 16px 30px}
.paywall .pet-svg{width:150px;height:150px;display:block;margin:0 auto;filter:saturate(.8)}
.plano{border:2px solid var(--borda);border-radius:20px;padding:14px;margin:10px 0;cursor:pointer}
.plano.on{border-color:var(--ouro);background:#ffc94d18}
.plano b{font-size:1.4rem}
.qr{background:#fff;border-radius:16px;padding:10px;width:220px;margin:8px auto;display:block}
.copia{word-break:break-all;font-size:.72rem;background:#0004;padding:8px;border-radius:10px;max-height:80px;overflow:auto}
.instalar{background:linear-gradient(135deg,#14a38b,#5b2fc9);border-radius:18px;padding:12px;display:flex;gap:10px;align-items:center;margin:8px 0}
.menu-mais{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.menu-mais button{background:#ffffff14;border:1px solid var(--borda);border-radius:20px;padding:14px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;font-size:.82rem;cursor:pointer}
.menu-mais button span{font-size:1.9rem}
.guarda{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.peca{background:#ffffff12;border:2px solid transparent;border-radius:16px;padding:8px;text-align:center;font-size:.74rem;font-weight:800;cursor:pointer;position:relative}
.peca.on{border-color:var(--menta)}
.peca.bloq{opacity:.45}
.peca .pet-svg{width:70px;height:70px}
.tema-finados{--ouro:#e9e4f5}
button.plano{color:inherit;font:inherit;background:#ffffff0d}button.plano.on{background:#ffc94d18}
.selo-cortesia{display:inline-block;margin:8px 0 6px;padding:4px 12px;border-radius:999px;background:linear-gradient(90deg,#ffe08a,#f7c4ff);color:#3a1d6e;font-weight:700;font-size:.9rem}
.dado svg{vertical-align:middle}
.convite-card .copia{margin:8px 0}.conv-stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:.88rem}
.conv-qr-linha{display:flex;gap:12px;align-items:center;margin:8px 0}.conv-qr{width:120px;height:120px;border-radius:12px;background:#fff;padding:4px;flex:none;image-rendering:pixelated}.conv-qr-texto{flex:1;min-width:0}.conv-qr-texto .copia{word-break:break-all}
.qr-tela{position:fixed;inset:0;z-index:9999;background:#2d1b5e;display:flex;align-items:center;justify-content:center;padding:20px}
.qr-caixa{background:#fff;color:#2d1b5e;border-radius:24px;padding:24px;text-align:center;max-width:440px;width:100%;display:flex;flex-direction:column;gap:12px;align-items:center}
.qr-caixa img{width:min(80vw,360px);height:auto;image-rendering:pixelated}.qr-caixa small{word-break:break-all;opacity:.8}
.topo .moedas{cursor:pointer}
.saldo-card .saldo{font-size:2.2rem;font-weight:900;margin:2px 0}
.extrato b.pos{color:#3fbf7f}.extrato b.neg{color:#ff7a93}
/* 🎧 Spotify (player oficial, sem recorte nem sobreposição na capa) */
.spt-botao{display:flex;align-items:center;justify-content:center;gap:8px;background:#121212;color:#fff;border:1px solid #1ED760;margin:10px 0}
.spt{position:fixed;left:8px;right:8px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:60;max-width:520px;margin:0 auto;background:#121212;color:#fff;border-radius:14px;padding:8px;box-shadow:0 8px 30px #0008}
.spt-barra{display:flex;align-items:center;gap:8px;margin-bottom:6px}.spt-titulo{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spt-ic{background:#ffffff1a;color:#fff;border:0;border-radius:8px;width:34px;height:34px;font-size:16px;cursor:pointer}
.spt-frame{display:block;border:0;border-radius:12px;background:#282828}
.spt-acoes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.spt-ouvir{display:inline-flex;align-items:center;gap:6px;color:#1ED760;font-weight:800;font-size:12px;letter-spacing:.06em;text-decoration:none;margin-right:auto}
.spt-bolha{display:none}
.spt.mini{left:auto;right:12px;width:auto;padding:0;background:transparent;box-shadow:none}
.spt.mini>*:not(.spt-bolha){position:absolute;left:-9999px;width:300px}
.spt.mini .spt-bolha{display:flex;align-items:center;gap:4px;background:#121212;border:2px solid #1ED760;color:#fff;border-radius:999px;padding:10px 14px;font-size:20px;cursor:pointer;box-shadow:0 6px 20px #0008;animation:sptpulso 2s infinite}
@keyframes sptpulso{50%{box-shadow:0 6px 20px #0008,0 0 0 6px #1ED76055}}
/* modo música do bichinho: dança com fones */
.modo-musica .cena .ator .pet-svg{animation:dancinha .9s ease-in-out infinite}
.modo-musica .cena .ator::after{content:'🎧';position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:34px}
.modo-musica .cena .ator::before{content:'♪ ♫';position:absolute;top:-30px;right:-6px;font-size:20px;color:#1ED760;animation:notinhas 1.8s infinite}
@keyframes dancinha{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-4px)}}
@keyframes notinhas{0%{opacity:0;transform:translateY(8px)}50%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
/* 🔔 avisos e ⏰ despertador */
.push-convite{border:1px solid var(--ouro,#f5c542)}
.av-tipo{padding:6px 0;border-bottom:1px solid #ffffff14}.av-tipo input[type=time]{width:auto}
.dias .chip{cursor:pointer;min-width:38px;text-align:center}
.alarme{padding:8px 0;border-bottom:1px solid #ffffff14}.alarme.off{opacity:.5}.alarme-hora{font-size:26px}
.bomdia{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;color:#3a2200;
  background:radial-gradient(circle at 50% 18%,#fff6c9 0,#ffd36b 30%,#ff9f6b 70%,#e86b8f 100%);overflow:auto}
.bomdia h1{margin:0;color:#3a2200}.bomdia-fala{max-width:420px;font-size:18px}
.bomdia-sol{font-size:72px;animation:solgira 6s linear infinite}.bomdia-hora{font-size:54px;font-weight:900}
.bomdia-pet{width:170px;animation:pulinho .7s ease-in-out infinite alternate}
.bomdia .btn.grande{font-size:20px;padding:16px;max-width:420px}.bomdia .grade2{width:100%;max-width:420px}
.bomdia .card{background:#ffffffcc;color:#3a2200;max-width:420px}
@keyframes solgira{to{transform:rotate(360deg)}}@keyframes pulinho{to{transform:translateY(-14px)}}

/* ——— 🌱 Hortinha ——— */
.horta-cena{display:flex;align-items:center;gap:10px;background:linear-gradient(#bfe8ff,#e9f9d9 70%);border-radius:18px;padding:10px 12px;margin:8px 0}
.horta-pet{width:72px;flex:none}.horta-cena .fala{background:#fff;border-radius:14px;padding:8px 12px;margin:0;color:#2a1846;font-size:14px}
.canteiros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.canteiro{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:118px;padding:10px 6px 8px;border:0;border-radius:16px;
  background:radial-gradient(ellipse at 50% 70%,#8a5a35 0 45%,#6d4325 46% 60%,#5aa04a 61%);color:#fff;font:inherit;cursor:pointer;box-shadow:inset 0 -4px #0002}
.canteiro .ico{font-size:34px;line-height:1.2;filter:drop-shadow(0 2px 1px #0004)}.canteiro b{font-size:13px}.canteiro small{font-size:11px;opacity:.95}
.canteiro.vazio{background:radial-gradient(ellipse at 50% 70%,#9b6a42 0 45%,#7a4c2a 46% 60%,#6bb35a 61%);opacity:.9}
.canteiro.pronto{outline:3px solid #ffd54a}.canteiro.murcha{filter:saturate(.6)}.canteiro.seca{filter:grayscale(.7)}
.canteiro.novo{background:#efe6fa;color:#4b2a7b;border:2px dashed #b9a2dc}
.canteiro .barra{width:80%;height:6px;background:#0003;border-radius:3px;overflow:hidden}.canteiro .barra i{display:block;height:100%;background:#7be36b}
.canteiro .gotas{position:absolute;top:4px;right:6px;font-size:11px;font-style:normal}.canteiro .adubo{position:absolute;top:4px;left:6px;font-style:normal}
.ico.pula{animation:pula 1s ease-in-out infinite}@keyframes pula{50%{transform:translateY(-5px)}}
.celeiro{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.cel-item{background:var(--card,#fff);border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.cel-item span{font-size:26px}
.sementes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.semente{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:12px;border:2px solid #e3d8f2;background:#fff;color:#2a1846;font:inherit;cursor:pointer}.semente span{font-size:30px}
.colheu{text-align:center}.colheu .grande{font-size:64px;display:block;animation:pula 1s ease-in-out 2}
@media (prefers-reduced-motion:reduce){.ico.pula,.colheu .grande{animation:none}}
/* Caminho de vida: a cor da área não pode esconder a seleção */
.peca.carreira-op{border-color:var(--cor,transparent);transition:transform .12s,background .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.peca.carreira-op:active{transform:scale(.96)}
.peca.carreira-op.on{background:var(--cor,var(--menta));color:#fff;box-shadow:0 0 0 3px #fff8,0 4px 14px #0006;text-shadow:0 1px 2px #0008}
.niveis-car{display:flex;gap:6px;flex-wrap:wrap}
.nivel-car{flex:1 1 70px;background:#ffffff12;border:2px solid #ffffff30;border-radius:14px;padding:6px;color:inherit;font:inherit;font-weight:800;font-size:.75rem;display:flex;flex-direction:column;align-items:center;cursor:pointer;touch-action:manipulation}
.nivel-car.on{border-color:var(--menta)}.nivel-car.atual{background:#ffffff26}
.nivel-car small{font-weight:600;opacity:.8}
/* Convite: botão grande do WhatsApp (um toque) */
.btn-wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin:12px 0 8px;border-radius:16px;background:#25d366;color:#fff;font-weight:800;font-size:1.15rem;text-decoration:none;box-shadow:0 4px 0 #128c4b;-webkit-tap-highlight-color:transparent}
.btn-wa:active{transform:translateY(2px);box-shadow:0 2px 0 #128c4b}
.conv-acoes{gap:8px}.conv-acoes .btn{flex:1}
.conv-banner{margin:0 0 12px;text-align:center}
/* ——— 🎨 tema do evento ——— */
body.tema-on{background:radial-gradient(120% 80% at 50% 0%,var(--tf1) 0%,var(--tf2) 55%,var(--tf3) 100%) fixed}
body.tema-on .btn.ouro{background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 70%,#fff),var(--acento));box-shadow:0 4px 0 color-mix(in srgb,var(--acento) 60%,#000)}
body.tema-on nav.abas button.on{color:var(--acento)}
body.tema-on .card.ouro{border-color:color-mix(in srgb,var(--acento) 55%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--acento) 18%,transparent),color-mix(in srgb,var(--ev2) 18%,transparent))}
.faixa-tema{position:sticky;top:0;z-index:30;text-align:center;font-size:.85rem;padding:calc(4px + var(--safe-t)) 10px 4px;background:linear-gradient(90deg,var(--ev2),var(--acento));color:#fff;text-shadow:0 1px 2px #0007;border-radius:0 0 14px 14px}
body.tema-on .tela{padding-top:10px}
.tema-decor{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.tema-prop{position:absolute;filter:drop-shadow(0 2px 3px #0006);animation:balanca 4s ease-in-out infinite;transform-origin:50% 0}
.tema-varal{position:absolute;left:0;top:0;width:100%;height:40px}
.tema-varal .luz{animation:pisca 1.2s ease-in-out infinite alternate}
@keyframes balanca{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes pisca{from{opacity:.35}to{opacity:1}}
body.tema-calmo .tema-prop,body.tema-calmo .tema-varal .luz,body.tema-calmo .overlay span,body.tema-calmo .capa-e{animation:none!important}
@media (prefers-reduced-motion:reduce){.tema-prop,.tema-varal .luz,.capa-e{animation:none!important}}
.capa-tema{position:relative;text-align:center;margin:6px auto 0;padding:10px 12px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--acento) 30%,transparent),color-mix(in srgb,var(--ev2) 30%,transparent));border:1px solid #ffffff33;max-width:340px}
.capa-tema .capa-e{display:inline-block;font-size:34px;margin:0 6px;animation:balanca 3s ease-in-out infinite}
.capa-tema .capa-e.e1{animation-delay:-1s}.capa-tema .capa-e.e2{animation-delay:-2s}
.capa-tema p{margin:4px 0 0}
.tema-loja{border-radius:14px;padding:6px 10px;margin:8px 0;background:linear-gradient(90deg,var(--ev2),var(--acento));font-weight:800}
.mapa-decor{position:absolute;font-size:22px;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 2px #0007)}
/* começo simples: abas que ainda vão abrir */
nav.abas button.travada { opacity: .55; }
/* barras vivas: cor por nível, alerta e +N */
.stat{position:relative}
.stat .alerta{display:none}.stat.baixo .alerta{display:inline;animation:pisca 1.2s infinite}
.stat .num{opacity:.7;font-weight:700}
.stat.ok .barra i{background:linear-gradient(90deg,#2dc653,#80ed99)}
.stat.meio .barra i{background:linear-gradient(90deg,#f4a261,#ffd166)}
.stat.baixo .barra i{background:linear-gradient(90deg,#d62828,#ff6b6b)}
.mais-n{position:absolute;right:2px;top:-4px;font-style:normal;font-weight:900;opacity:0;pointer-events:none}
.mais-n.sobe{color:#80ed99}.mais-n.desce{color:#ff8fab}
.mais-n.anda{animation:maisN 1.4s ease-out}
@keyframes maisN{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
@keyframes pisca{50%{opacity:.35}}
.dica-sono{margin:8px 0 0;padding:6px 10px;border-radius:10px;background:#ffffff14}
/* atalho do evento */
.casa-evento{background:linear-gradient(135deg,#ff8c1a,#9d4edd);color:#fff;font-weight:900;font-size:1.05rem;padding:14px;border-radius:16px;box-shadow:0 6px 18px #0006;margin:8px 0;position:relative;animation:sptpulso 2.4s infinite}
.casa-evento small{font-weight:600;opacity:.9}
.selo{display:inline-block;min-width:22px;padding:1px 7px;border-radius:11px;background:#ff006e;color:#fff;font-size:.85rem;margin-left:4px}
nav.abas button{position:relative}
.selo-aba{position:absolute;top:2px;right:18%;min-width:18px;height:18px;line-height:18px;border-radius:9px;background:#ff006e;color:#fff;font-size:.7rem;font-weight:900}
.decor-casa{position:absolute;bottom:26px;transform:translateX(-50%);display:flex;gap:4px;font-size:22px;z-index:3;pointer-events:none;filter:drop-shadow(0 2px 2px #0006)}
@media (prefers-reduced-motion:reduce){.casa-evento,.stat.baixo .alerta,.mais-n.anda{animation:none}.mais-n.anda{opacity:1}}
.toast.atualizar{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:99;display:flex;gap:8px;align-items:center;background:#240046;color:#fff;padding:10px 14px;border-radius:14px;box-shadow:0 6px 20px #0008}