/* ================= botões ================= */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--r-pill); font-family:var(--f-tit);
  font-weight:700; font-size:1.02rem; line-height:1; transition:var(--t-rapido);
  box-shadow:0 4px 0 var(--sombra-b,#c8cee6); background:var(--papel); color:var(--tinta);
}
.b:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--sombra-b,#c8cee6)}
.b:active{transform:translateY(3px); box-shadow:0 1px 0 var(--sombra-b,#c8cee6)}
.b[disabled]{opacity:.42; pointer-events:none; filter:grayscale(.5)}
.b-1{background:var(--coral); color:#fff; --sombra-b:var(--coral-esc)}
.b-2{background:var(--anil); color:#fff; --sombra-b:var(--anil-esc)}
.b-3{background:var(--menta); color:#04352a; --sombra-b:var(--menta-esc)}
.b-4{background:var(--sol); color:#4a3200; --sombra-b:var(--sol-esc)}
.b-fant{background:transparent; box-shadow:none; color:var(--tinta-2); font-weight:800}
.b-fant:hover{background:var(--papel); box-shadow:none; transform:none; color:var(--tinta)}
.b-gg{padding:18px 34px; font-size:1.18rem}
.b-p{padding:9px 16px; font-size:.86rem}

/* ================= cartões ================= */
.cartao{
  background:var(--papel); border-radius:var(--r-lg); padding:clamp(20px,3.5vw,32px);
  box-shadow:var(--sm-2); border:1px solid var(--borda); position:relative;
}
.cartao-fita{overflow:hidden}
.cartao-fita::before{content:''; position:absolute; inset:0 0 auto 0; height:6px;
  background:linear-gradient(90deg,var(--coral),var(--sol),var(--menta),var(--anil),var(--lilas))}
.grade{display:grid; gap:16px}
.grade-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grade-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grade-4{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}

.selo-txt{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--r-pill);
  background:var(--papel-2); border:1px solid var(--borda);
  font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-2);
}
.olho{color:var(--tinta-2); font-size:1.02rem}
.centro{text-align:center}
.pilha{display:flex; flex-direction:column; gap:14px}
.linha{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.linha-fim{justify-content:flex-end}
.linha-meio{justify-content:center}

/* ================= progresso: foguete ================= */
.trilha{position:relative; height:54px; margin:4px 0 26px}
.trilha-linha{position:absolute; top:34px; left:0; right:0; height:8px; border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--borda) 0 10px,transparent 10px 20px)}
.trilha-feito{position:absolute; top:34px; left:0; height:8px; border-radius:99px;
  background:linear-gradient(90deg,var(--menta),var(--anil)); transition:width var(--t-mole)}
.trilha-nave{position:absolute; top:4px; font-size:1.75rem; transform:translateX(-50%);
  transition:left var(--t-mole); filter:drop-shadow(0 4px 6px rgba(0,0,0,.18))}
.trilha-etapa{position:absolute; top:28px; width:20px; height:20px; border-radius:50%;
  background:var(--papel); border:3px solid var(--borda); transform:translateX(-50%); transition:var(--t-rapido)}
.trilha-etapa.ok{background:var(--menta); border-color:var(--menta-esc)}

/* ================= chips / opções ================= */
.escolha{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 12px; border-radius:var(--r-md); background:var(--papel);
  border:3px solid var(--borda); box-shadow:var(--sm-1); transition:var(--t-rapido); text-align:center;
}
.escolha:hover{transform:translateY(-4px) rotate(-1deg); border-color:var(--lilas)}
.escolha[aria-pressed="true"]{border-color:var(--menta); background:#f0fffa; transform:translateY(-3px)}
.escolha[aria-pressed="true"]::after{content:'\2713'; position:absolute; top:-11px; right:-11px;
  width:28px; height:28px; border-radius:50%; background:var(--menta); color:#fff;
  display:grid; place-items:center; font-weight:900; box-shadow:var(--sm-1); animation:pipoca .3s}
.escolha b{font-family:var(--f-tit); font-size:.98rem}
.escolha small{color:var(--tinta-3); font-size:.74rem; line-height:1.3}
@keyframes pipoca{0%{transform:scale(0) rotate(-90deg)}70%{transform:scale(1.3)}100%{transform:scale(1)}}

.pilula{
  padding:10px 18px; border-radius:var(--r-pill); background:var(--papel); border:2.5px solid var(--borda);
  font-weight:800; font-size:.92rem; transition:var(--t-rapido); box-shadow:var(--sm-1);
}
.pilula:hover{transform:translateY(-2px)}
.pilula[aria-pressed="true"]{background:var(--anil); border-color:var(--anil-esc); color:#fff}

/* ================= campos ================= */
.campo{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.campo > label{font-weight:800; font-size:.9rem; color:var(--tinta-2)}
.campo input,.campo select,.campo textarea{
  padding:14px 18px; border-radius:var(--r-md); border:2.5px solid var(--borda);
  background:var(--papel); font-weight:600; transition:var(--t-rapido); width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--anil); box-shadow:0 0 0 4px rgba(74,92,240,.14)}
.campo .ajuda{font-size:.78rem; color:var(--tinta-3)}
.campo-gg input{font-family:var(--f-tit); font-size:1.35rem; text-align:center; padding:18px}
.erro-txt{color:var(--coral-esc); font-weight:800; font-size:.82rem}

/* ================= medidor de carinhas ================= */
.medidor{display:flex; gap:10px; flex-wrap:wrap}
.medidor button{
  flex:1; min-width:74px; padding:12px 6px; border-radius:var(--r-md); background:var(--papel);
  border:3px solid var(--borda); transition:var(--t-rapido); display:grid; gap:4px; justify-items:center;
}
.medidor button .cara{font-size:1.85rem; transition:transform var(--t-rapido)}
.medidor button small{font-size:.72rem; font-weight:800; color:var(--tinta-3)}
.medidor button:hover .cara{transform:scale(1.22)}
.medidor button[aria-pressed="true"]{border-color:var(--cor-nivel,var(--anil)); background:var(--fundo-nivel,#eef0ff)}
.medidor button[aria-pressed="true"] .cara{transform:scale(1.18)}

/* ================= modal / brindes ================= */
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:18px;
  background:rgba(19,26,58,.55); backdrop-filter:blur(6px); animation:apaga .25s}
.modal[hidden]{display:none}
.modal-caixa{background:var(--papel); border-radius:var(--r-xl); padding:clamp(24px,4vw,38px);
  max-width:520px; width:100%; box-shadow:var(--sm-3); animation:sobe .35s cubic-bezier(.22,1,.36,1);
  max-height:88vh; overflow:auto}
@keyframes apaga{from{opacity:0}}
@keyframes sobe{from{opacity:0; transform:translateY(30px) scale(.94)}}

.brindes{position:fixed; right:16px; bottom:16px; z-index:70; display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.brinde{display:flex; align-items:center; gap:12px; background:var(--noite); color:#fff;
  padding:14px 20px; border-radius:var(--r-lg); box-shadow:var(--sm-3); font-weight:800; max-width:330px;
  animation:entra .4s cubic-bezier(.22,1,.36,1)}
.brinde .med{font-size:1.9rem}
.brinde small{display:block; font-weight:600; opacity:.75; font-size:.76rem}
@keyframes entra{from{opacity:0; transform:translateX(60px) scale(.9)}}
.brinde.saindo{animation:sai .35s forwards}
@keyframes sai{to{opacity:0; transform:translateX(60px)}}

/* ================= misc ================= */
.bolhafala{position:relative; background:var(--papel); border:3px solid var(--noite);
  border-radius:var(--r-lg); padding:16px 20px; font-weight:700; box-shadow:var(--sm-1)}
.bolhafala::after{content:''; position:absolute; left:34px; bottom:-15px; width:0; height:0;
  border:12px solid transparent; border-top-color:var(--noite); border-bottom:0}

.balao-dica{background:linear-gradient(135deg,#fff8e6,#fff2d0); border:2px dashed var(--sol-esc);
  border-radius:var(--r-md); padding:14px 18px; font-size:.9rem; font-weight:700; color:#6a4d00}

.tremeliques{animation:treme .5s}
@keyframes treme{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.pulinho{animation:pula 1.6s ease-in-out infinite}
@keyframes pula{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.gira-lento{animation:gira 22s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}