/* Missão Premiada — estilo único para todo o site */
:root{
  --bg:#140f33; --bg2:#1f1750;
  --card:rgba(32,24,84,.78); --card2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --txt:#fff; --mut:rgba(255,255,255,.72);
  --ouro:#ffc83d; --ouro2:#ff9f1c; --verde:#33d17a; --verm:#ff5d6c; --azul:#6aa8ff;
  --r:20px; --sh:0 14px 34px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--txt);
  font-family:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight:600;
  background:var(--bg);
  background-image:linear-gradient(180deg,rgba(20,15,51,.55),rgba(20,15,51,.92) 55%,var(--bg)),url(../images/fundo.webp);
  background-size:cover; background-position:center top; background-attachment:fixed;
}
a{color:var(--ouro)}
h1,h2,h3{margin:0 0 .4em; line-height:1.15; font-weight:900}
h1{font-size:clamp(26px,4.5vw,38px)}
h2{font-size:clamp(20px,3vw,26px)}
h3{font-size:18px}
p{margin:.2em 0 .8em; line-height:1.5}
.mut{color:var(--mut)}
.small{font-size:14px}
.center{text-align:center}

/* topo */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:10px max(14px,env(safe-area-inset-left)); background:rgba(20,15,51,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:900; font-size:19px; margin-right:auto}
.brand img{width:30px; height:30px}
.nav{display:flex; gap:4px}
.nav a{display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:12px; color:#fff; text-decoration:none; font-weight:800; font-size:15px}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.1)}
.saldo-pill{display:flex; align-items:center; gap:6px; padding:5px 12px 5px 6px; border-radius:999px; background:rgba(255,200,61,.16); border:1px solid rgba(255,200,61,.45); color:#fff; text-decoration:none; font-size:18px}
.saldo-pill img{width:26px; height:26px}
@media (max-width:620px){
  .brand span{display:none}
  .nav a{flex-direction:column; gap:0; padding:4px 8px; font-size:11px}
  .nav .ico{font-size:20px}
}

.wrap{max-width:1040px; margin:0 auto; padding:22px 16px 40px}
.foot{text-align:center; color:var(--mut); font-size:13px; padding:20px}

/* cartões */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--sh); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); margin-bottom:18px}
.card.tight{padding:14px}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.card-h h2,.card-h h3{margin:0}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
@media (max-width:560px){ .g3{grid-template-columns:1fr 1fr; gap:10px} .premio{padding:9px} .premio h3{font-size:15px} .premio p{font-size:12px} .premio .btn{font-size:14px; min-height:40px; padding:8px 10px} .preco-form input{width:64px} }
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}

/* botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 18px;
  border-radius:14px; border:0; cursor:pointer; font:inherit; font-weight:900; font-size:16px; text-decoration:none;
  color:#2a1a00; background:linear-gradient(180deg,var(--ouro),var(--ouro2)); box-shadow:0 6px 0 #b86a00,0 10px 18px rgba(0,0,0,.25);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 #b86a00}
.btn.sec{color:#fff; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px var(--line)}
.btn.ok{color:#04310f; background:linear-gradient(180deg,#5ef29a,#22b863); box-shadow:0 5px 0 #157a40}
.btn.no{color:#fff; background:rgba(255,93,108,.18); box-shadow:inset 0 0 0 1px rgba(255,93,108,.55)}
.btn.sm{min-height:36px; padding:6px 12px; font-size:14px; border-radius:11px}
.btn.big{min-height:58px; font-size:19px; padding:12px 26px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
form.inline{display:inline}
.linkbtn{background:none; border:0; color:var(--ouro); font:inherit; font-weight:800; cursor:pointer; padding:0; text-decoration:underline}

/* formulários */
label{display:block; font-weight:800; margin:10px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.25); color:#fff; font:inherit; font-size:16px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ouro); border-color:transparent}
select option{color:#000}
.hint{font-size:13px; color:var(--mut); margin-top:4px}
.fields{display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* mensagens */
.flash{padding:12px 16px; border-radius:14px; margin-bottom:14px; font-weight:800; background:rgba(51,209,122,.16); border:1px solid rgba(51,209,122,.5)}
.flash.erro{background:rgba(255,93,108,.16); border-color:rgba(255,93,108,.55)}
.flash.info{background:rgba(106,168,255,.14); border-color:rgba(106,168,255,.5)}
.vazio{padding:18px; text-align:center; color:var(--mut); border:1px dashed var(--line); border-radius:16px}
.badge{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:800; background:rgba(255,255,255,.1)}
.badge.ouro{background:rgba(255,200,61,.18); color:var(--ouro)}
.badge.verde{background:rgba(51,209,122,.18); color:#7df0ad}
.count{display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:var(--verm); color:#fff; font-size:13px; font-weight:900}

/* estrelas / progresso */
.estrela{display:inline-flex; align-items:center; gap:4px; font-weight:900; color:var(--ouro); white-space:nowrap}
.estrela::before{content:""; width:1.1em; height:1.1em; background:url(../images/estrela.webp) center/contain no-repeat}
.barra{height:16px; border-radius:999px; background:rgba(0,0,0,.35); overflow:hidden; border:1px solid var(--line)}
.barra>i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--ouro2),var(--ouro)); transition:width .6s}

/* listas */
.lista{display:grid; gap:10px}
.item{display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; background:var(--card2); border:1px solid var(--line)}
.item .em{font-size:30px; width:44px; text-align:center; flex:none}
.item .tx{flex:1; min-width:0}
.item .tx b{display:block}
.item .tx small{color:var(--mut)}
.item .acts{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}

/* prêmios */
.pimg{aspect-ratio:1/1; border-radius:16px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 40%,rgba(255,200,61,.22),rgba(0,0,0,.25) 70%)}
.pimg img{width:88%; height:88%; object-fit:contain}
.pimg.emoji span{font-size:clamp(56px,10vw,96px); filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.mini{width:52px; flex:none; border-radius:12px}
.mini.emoji span{font-size:30px}
.premio{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:18px; background:var(--card2); border:1px solid var(--line); position:relative}
.premio h3{font-size:16px; margin:2px 0 0}
.premio p{font-size:13px; color:var(--mut); margin:0; flex:1}
.premio .preco{font-size:18px}
.premio.pode{border-color:rgba(255,200,61,.6); box-shadow:0 0 0 1px rgba(255,200,61,.25),0 0 24px rgba(255,200,61,.18)}
.premio.oculto{opacity:.5}
.premio .tag{position:absolute; top:10px; left:10px; z-index:1}
.premio .falta{font-size:13px; color:var(--mut)}
.cat{margin:26px 0 10px}
.cat h2{display:flex; align-items:center; gap:8px; margin:0}
.cat p{margin:2px 0 0; color:var(--mut)}
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none}
.chips a{flex:none; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.08); color:#fff; text-decoration:none; font-weight:800; font-size:14px; border:1px solid var(--line)}

/* área da criança */
.hero-kid{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center}
.hero-kid .mascote{width:120px}
.cofre{font-size:clamp(44px,9vw,64px); font-weight:900; line-height:1; color:var(--ouro); display:flex; align-items:center; gap:10px}
.cofre img{width:.9em; height:.9em}
.balao{position:relative; background:#fff; color:#2b1d62; border-radius:18px; padding:12px 16px; font-weight:800; margin-top:8px}
.objetivo{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center}
.tarefa{display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; background:var(--card2); border:1px solid var(--line)}
.tarefa .em{font-size:34px; width:48px; text-align:center; flex:none}
.tarefa .tx{flex:1; min-width:0}
.tarefa .tx b{display:block; font-size:18px}
.tarefa.feita{opacity:.75; background:rgba(51,209,122,.08); border-color:rgba(51,209,122,.35)}
.tarefa .btn{min-width:96px}
@media (max-width:520px){
  .hero-kid{grid-template-columns:1fr; text-align:center}
  .hero-kid .mascote{width:90px; margin:0 auto}
  .cofre{justify-content:center}
  .objetivo{grid-template-columns:72px 1fr}
  .tarefa{padding:12px 10px; gap:10px}
  .tarefa .em{font-size:28px; width:34px}
  .tarefa .tx b{font-size:16px}
  .tarefa .btn{min-width:74px; padding:10px 12px}
  .item{padding:10px; gap:10px}
  .item .em{font-size:26px; width:34px}
  .card{padding:16px}
}

/* home */
.home{max-width:980px; margin:0 auto}
.home-hero{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:center; padding:20px 0 10px}
.home-hero h1{font-size:clamp(36px,6vw,62px); text-shadow:0 6px 0 rgba(0,0,0,.3)}
.home-hero .lead{font-size:clamp(17px,2vw,20px); color:#f1ecff}
.home-hero img{width:100%; max-width:340px; display:block; margin:0 auto; filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))}
.passos{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.passo{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px}
.passo .n{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--ouro); color:#2a1a00; font-weight:900; margin-bottom:8px}
.passo .e{font-size:34px; float:right}
.entradas{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:18px 0}
.entrada{display:block; text-decoration:none; color:#fff; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; transition:transform .12s}
.entrada:hover{transform:translateY(-3px); border-color:rgba(255,200,61,.6)}
.entrada .e{font-size:44px}
.entrada b{display:block; font-size:22px; margin:6px 0}
@media (max-width:720px){ .home-hero{grid-template-columns:1fr; text-align:center} .home-hero img{max-width:220px} }

/* login */
.auth{max-width:440px; margin:10px auto}
.tabs{display:flex; background:rgba(0,0,0,.25); border-radius:14px; padding:4px; margin-bottom:12px}
.tabs a{flex:1; text-align:center; padding:10px; border-radius:11px; color:#fff; text-decoration:none; font-weight:800}
.tabs a.on{background:rgba(255,255,255,.14)}
.kids{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px}
.kid{display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 10px; border-radius:18px; background:var(--card2); border:1px solid var(--line); color:#fff; font:inherit; font-weight:900; font-size:18px; cursor:pointer; width:100%}
.kid .av{font-size:52px; line-height:1}
.kid:hover{border-color:var(--ouro)}
.pin{letter-spacing:.5em; text-align:center; font-size:28px !important; font-weight:900}
.avatares{display:flex; flex-wrap:wrap; gap:8px}
.avatares label{margin:0}
.avatares input{position:absolute; opacity:0; pointer-events:none}
.avatares span{display:grid; place-items:center; width:50px; height:50px; font-size:28px; border-radius:14px; background:var(--card2); border:2px solid transparent; cursor:pointer}
.avatares input:checked+span{border-color:var(--ouro); background:rgba(255,200,61,.15)}

/* painel dos pais */
.kidcard{display:flex; flex-direction:column; gap:10px}
.kidcard .top{display:flex; align-items:center; gap:12px}
.kidcard .av{font-size:42px}
.kidcard .nums{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.kidcard .num{background:rgba(0,0,0,.2); border-radius:12px; padding:8px; text-align:center}
.kidcard .num b{display:block; font-size:20px; color:var(--ouro)}
.kidcard .num small{color:var(--mut); font-size:12px}
.passos-ini .ok{color:#7df0ad}
.passos-ini li{margin:8px 0}
details summary{cursor:pointer; font-weight:800}
details[open] summary{margin-bottom:10px}
table{width:100%; border-collapse:collapse}
td,th{padding:8px 6px; border-bottom:1px solid var(--line); text-align:left; font-size:15px}
.mov-pos{color:#7df0ad; font-weight:900}
.mov-neg{color:#ff9aa5; font-weight:900}

/* gerenciar prêmios */
.preco-form{display:flex; gap:6px; align-items:center}
.preco-form input{width:90px; padding:8px 10px; font-size:15px}

/* confete */
.confete{position:fixed; top:-20px; width:10px; height:14px; z-index:99; pointer-events:none; animation:cair linear forwards}
@keyframes cair{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes pulo{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pula{animation:pulo 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .pula,.confete{animation:none} .confete{display:none} }