/* Aventuras do Luno — estilos do app (design system v2) */
/* Layout: coluna de celular centralizada; fundo creme, cartões claros, ação azul, confirmação verde, destaques dourados. Visual único (claro), definido de propósito. */
/* Altura: o app ocupa exatamente a tela (100dvh). A página nunca rola; cada tela se ajusta à altura disponível
   com tamanhos fluidos (clamp + dvh). Só listas longas (Missões, Diário, Área dos Pais) rolam por dentro da própria tela,
   com o cabeçalho e a navegação parados. Texto do Modo Criança: mínimo 16 px. */
:root{
  --creme:#F6EBD2; --cartao:#FFFBF2; --borda:#E3D3B0; --borda-forte:#9a6a2c;
  --marrom:#493B2B; --marrom-suave:#6B5A45;
  --azul:#1769AA; --azul-esc:#0F4F82; --azul-claro:#E3EEF7;
  --verde:#34764A; --verde-esc:#255737; --verde-claro:#E4EFE6;
  --dourado:#F4B842; --dourado-esc:#C98F1C; --estrela:#F4B842;
  --mesa:#E9DABA;
  --f-titulo:"Baloo 2",system-ui,sans-serif;
  --f-texto:"Nunito",system-ui,sans-serif;
  /* ritmo vertical: encolhe em telas baixas */
  --gap:clamp(10px,2dvh,16px);
  --pad:clamp(12px,2.4dvh,16px);
  --topo-seguro:env(safe-area-inset-top,0px);
  --base-segura:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--creme);color:var(--marrom);font-family:var(--f-texto);font-weight:600;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
::selection{background:var(--dourado);color:var(--marrom)}
input,textarea{caret-color:var(--azul)}
#app{position:relative;max-width:440px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--creme)}
.tela{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--gap);padding:calc(var(--pad) + var(--topo-seguro)) 16px calc(var(--pad) + 8px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--borda) transparent}
.tela::-webkit-scrollbar{width:6px}
.tela::-webkit-scrollbar-thumb{background:var(--borda);border-radius:999px}
/* tela sem navegação embaixo: respeita a barra do sistema */
.tela:last-child{padding-bottom:calc(var(--pad) + 8px + var(--base-segura))}
.tela > *{flex-shrink:0}
.centro{align-items:center;text-align:center}
.mola{flex:1 1 0;min-height:0}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.escuro :focus-visible{outline-color:var(--dourado)}

.titulo{font:800 clamp(23px,3.6dvh,26px)/1.15 var(--f-titulo);text-wrap:balance}
.subtitulo{font:700 19px/24px var(--f-titulo);text-wrap:balance}
.texto{font:600 16px/24px var(--f-texto);text-wrap:pretty}
.apoio{font:600 16px/22px var(--f-texto);color:var(--marrom-suave);text-wrap:pretty}
.rot{font:800 16px/20px var(--f-texto);color:var(--marrom-suave)}
.selo{align-self:flex-start;padding:3px 12px;border-radius:999px;background:var(--verde);color:#fff;font:800 16px/20px var(--f-titulo)}
.selo.ouro{background:var(--dourado);color:var(--marrom)}
.chip-teste{align-self:center;padding:4px 12px;border-radius:999px;border:1px dashed var(--marrom-suave);color:var(--marrom-suave);font:800 14px/18px var(--f-texto);text-align:center}

.card{background:var(--cartao);border-radius:20px;box-shadow:0 2px 10px rgba(73,59,43,.12);padding:var(--pad);display:flex;flex-direction:column;gap:clamp(8px,1.6dvh,12px)}
.card.sem-pad{padding:0;overflow:hidden}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:clamp(50px,7.4dvh,56px);padding:0 22px;border:0;border-radius:999px;cursor:pointer;font:700 18px/22px var(--f-titulo);text-decoration:none;transition:transform .12s cubic-bezier(.2,.8,.2,1),box-shadow .12s,filter .15s;width:100%}
.btn:active{transform:translateY(3px);box-shadow:none!important}
@media (hover:hover){.btn:hover{filter:brightness(1.06)}}
.btn.azul{background:var(--azul);color:#fff;box-shadow:0 3px 0 var(--azul-esc)}
.btn.verde{background:var(--verde);color:#fff;box-shadow:0 3px 0 var(--verde-esc)}
.btn.contorno{background:transparent;color:var(--azul);border:2px solid var(--azul)}
.btn.ouro{background:var(--dourado);color:var(--marrom);box-shadow:0 3px 0 var(--dourado-esc)}
.btn svg{width:20px;height:20px;flex-shrink:0}
.link{align-self:center;min-height:48px;display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font:800 16px/20px var(--f-texto);color:var(--azul);text-underline-offset:4px}
@media (hover:hover){.link:hover{text-decoration:underline}}
.voltar{width:48px;height:48px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:inherit;border-radius:14px;flex-shrink:0}
.topo{display:flex;align-items:center;gap:8px;min-height:48px}

/* splash e onboarding: ocupam a tela inteira, por baixo da barra do sistema */
.splash{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(24px + var(--topo-seguro)) 20px calc(clamp(20px,4dvh,32px) + var(--base-segura));color:#fff;overflow:hidden;background:linear-gradient(180deg,#4FA3E0 0%,#1769AA 48%,#255737 100%)}
.splash .veu{position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 38%,rgba(255,255,255,.18),rgba(255,255,255,0) 60%)}
.splash > *:not(.veu){position:relative}
.splash .logo{width:min(72%,300px,42dvh);height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))}
.frase{font:700 clamp(19px,3dvh,22px)/1.3 var(--f-titulo);text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.35);text-wrap:balance}
.onb{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--verde-esc);color:#fff}
.onb .arte{position:relative;flex:1 1 auto;min-height:0;padding-top:var(--topo-seguro);background:var(--creme);display:flex;align-items:flex-end;justify-content:center;border-radius:0 0 32px 32px;overflow:hidden}
.onb .arte img{height:calc(100% - 56px);max-height:360px;width:auto;max-width:82%;aspect-ratio:240/275;object-fit:cover;border-radius:28px 28px 0 0;display:block}
.onb .corpo{flex-shrink:0;padding:clamp(18px,3dvh,24px) 20px calc(clamp(18px,3.4dvh,28px) + var(--base-segura));display:flex;flex-direction:column;gap:clamp(8px,1.4dvh,12px)}
.onb h1{font:800 clamp(23px,3.6dvh,26px)/1.15 var(--f-titulo);text-wrap:balance}
.onb p{font:600 16px/24px var(--f-texto);color:#E6EFE8;text-wrap:pretty}
.pontos{display:flex;gap:6px}
.pontos span{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.4);transition:width .3s cubic-bezier(.2,.8,.2,1)}
.pontos span.on{width:22px;background:#fff}
.pular{position:absolute;top:calc(12px + var(--topo-seguro));right:12px;min-height:48px;padding:0 18px;border-radius:999px;border:0;background:rgba(73,59,43,.62);color:#fff;cursor:pointer;font:800 16px/20px var(--f-texto)}
.avancar{width:60px;height:60px;border-radius:999px;border:0;background:var(--dourado);color:var(--marrom);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 var(--dourado-esc);flex-shrink:0}
.avancar:active{transform:translateY(3px);box-shadow:none}
.avancar svg{width:26px;height:26px}

/* cabeçalho e navegação */
.cabeca{display:flex;align-items:center;gap:10px}
.cabeca .av{width:48px;height:48px;border-radius:999px;border:2px solid var(--dourado);box-sizing:border-box;flex-shrink:0;display:block}
.cabeca .ola{flex:1;min-width:0}
.cabeca .ola b{display:block;font:800 19px/22px var(--f-titulo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pilula-estrelas{display:inline-flex;align-items:center;gap:4px;min-height:36px;box-sizing:border-box;padding:4px 12px 4px 6px;border-radius:999px;background:var(--cartao);box-shadow:0 1px 4px rgba(73,59,43,.15);font:800 17px/20px var(--f-titulo);font-variant-numeric:tabular-nums;flex-shrink:0}
.pilula-estrelas svg{width:22px;height:22px}
.cadeado{width:48px;height:48px;border-radius:999px;border:0;background:var(--cartao);box-shadow:0 1px 4px rgba(73,59,43,.15);display:grid;place-items:center;cursor:pointer;color:var(--marrom);flex-shrink:0}
.cadeado svg{width:20px;height:20px}
.nav{flex-shrink:0;display:flex;padding:6px 4px calc(8px + var(--base-segura));background:var(--cartao);border-top:1px solid var(--borda);box-shadow:0 -2px 10px rgba(73,59,43,.08)}
.nav button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;padding:4px 2px;background:none;border:0;border-radius:14px;cursor:pointer;color:var(--marrom-suave);font:800 16px/18px var(--f-titulo);letter-spacing:-.01em}
.nav button[aria-current="page"]{color:var(--azul)}
.nav button[aria-current="page"] .bolha{background:var(--azul);color:#fff}
.nav .bolha{width:48px;height:30px;border-radius:999px;display:grid;place-items:center;transition:background .2s}
.nav svg{width:22px;height:22px}

/* início */
.elastico{flex-shrink:1!important;min-height:0}
.aventura .corpo{flex-shrink:0}
.aventura .banner{position:relative;flex:0 1 auto;min-height:0;height:clamp(84px,19dvh,170px);background:linear-gradient(180deg,#8CC4EC,#E3EEF7);overflow:hidden}
.aventura .banner img{position:absolute;inset:4% 0;margin:auto;height:92%;width:auto;max-width:92%;object-fit:contain;display:block}
.aventura .corpo{padding:var(--pad);display:flex;flex-direction:column;gap:clamp(8px,1.4dvh,10px)}
.aventura h2{font:800 24px/26px var(--f-titulo)}
.barra{height:12px;border-radius:999px;background:var(--borda);overflow:hidden}
.barra span{display:block;height:100%;border-radius:999px;background:var(--verde);transition:width .4s}
.atalhos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.atalho{display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(8px,1.6dvh,12px) 4px;border-radius:18px;border:0;background:var(--cartao);box-shadow:0 2px 8px rgba(73,59,43,.1);cursor:pointer;font:800 16px/20px var(--f-titulo);color:var(--marrom)}
.atalho:active{transform:translateY(2px)}
.medalhao{width:clamp(44px,7dvh,52px);height:clamp(44px,7dvh,52px);border-radius:999px;display:grid;place-items:center;color:#fff;border:3px solid var(--dourado);box-sizing:border-box;flex-shrink:0}
.medalhao svg{width:24px;height:24px}

/* lista de missões */
.lista{display:flex;flex-direction:column;gap:10px}
.item-missao{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:var(--cartao);box-shadow:0 2px 8px rgba(73,59,43,.1);border:0;width:100%;text-align:left;cursor:pointer;color:var(--marrom)}
.item-missao:not([disabled]):active{transform:translateY(2px)}
.item-missao[disabled]{cursor:default;background:#F1E5C9;box-shadow:none}
.miniatura{position:relative;width:64px;height:56px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;color:#fff;overflow:hidden}
.miniatura img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.item-missao .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item-missao .nome{font:800 18px/22px var(--f-titulo)}
.item-missao .desc{font:600 16px/21px var(--f-texto);color:var(--marrom-suave)}
.item-missao .pts{display:flex;align-items:center;gap:4px;font:800 16px/20px var(--f-titulo)}
.item-missao .pts svg{width:18px;height:18px}
.ok{width:28px;height:28px;border-radius:999px;background:var(--verde);display:grid;place-items:center;color:#fff;flex-shrink:0}
.ok svg{width:16px;height:16px}
.seta{color:var(--marrom-suave);flex-shrink:0}
.seta svg{width:20px;height:20px}
.envelopes{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.envelope-mini{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;border-radius:16px;background:#F1E5C9;font:800 16px/18px var(--f-titulo);color:var(--marrom-suave)}
.capitulos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.capitulo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:18px;background:#F1E5C9;text-align:center}
.capitulo b{font:800 17px/20px var(--f-titulo)}
.capitulo span{font:600 16px/20px var(--f-texto);color:var(--marrom-suave)}

/* missão */
.heroi-missao{position:relative;margin:calc(-1 * (var(--pad) + var(--topo-seguro))) -16px 0;height:calc(clamp(124px,30dvh,280px) + var(--topo-seguro));flex-shrink:1!important;min-height:calc(92px + var(--topo-seguro));background:var(--verde-claro);overflow:hidden;border-radius:0 0 28px 28px}
/* capa ilustrada 16:9; o Luno fica no centro da cena, então o corte prioriza o topo (capacete) */
.heroi-missao img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.heroi-missao .voltar{position:absolute;top:calc(12px + var(--topo-seguro));left:12px;background:rgba(255,251,242,.92);color:var(--marrom)}
.heroi-missao .num-missao{position:absolute;top:calc(20px + var(--topo-seguro));right:16px}
.fala{display:flex;gap:10px;align-items:flex-start}
.quem{font:800 17px/20px var(--f-titulo);color:var(--azul)}
.ouvir{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border-radius:999px;border:2px solid var(--azul);background:var(--azul-claro);color:var(--azul-esc);cursor:pointer;font:800 16px/18px var(--f-titulo);flex-shrink:0}
.ouvir svg{width:18px;height:18px}
.ouvir[aria-pressed="true"]{background:var(--azul);color:#fff}
.precisa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.precisa div{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;align-items:center;padding:10px;border-radius:14px;background:var(--creme);font:800 16px/19px var(--f-titulo)}
.precisa svg{width:24px;height:24px;color:var(--azul);grid-row:span 2}
.precisa small{grid-column:2;font:600 16px/19px var(--f-texto);color:var(--marrom-suave)}

/* hora da aventura, até amanhã, recompensa: a ilustração é a parte que encolhe */
.retrato{height:clamp(110px,27dvh,236px);width:auto;aspect-ratio:190/216;object-fit:cover;border:4px solid var(--dourado);flex-shrink:1!important;min-height:96px}
.retrato.arco{border-radius:999px 999px 28px 28px}
.retrato.quadro{border-radius:24px;aspect-ratio:170/212}
.palco{position:relative;background:linear-gradient(180deg,#8CC4EC,#E3EEF7);height:clamp(120px,26dvh,230px);overflow:hidden}
.palco img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:92%;width:auto;border-radius:24px 24px 0 0;display:block}

/* registro */
.grade{display:grid;gap:8px}
.lente{aspect-ratio:1;border-radius:999px;border:2px dashed var(--borda-forte);background:var(--cartao);display:grid;place-items:center;cursor:pointer;font:800 18px/1 var(--f-titulo);color:var(--marrom-suave);min-height:48px}
.lente[aria-pressed="true"]{border:0;background:var(--dourado);color:var(--marrom);box-shadow:0 3px 0 var(--dourado-esc)}
.lente svg{width:26px;height:26px}
.opcoes{grid-template-columns:repeat(auto-fill,minmax(min(100%,84px),1fr))}
/* cartão que ocupa a sobra da tela: as opções crescem até um limite confortável */
.card.cresce{flex:1 1 auto;min-height:0}
.card.cresce .opcoes{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(64px,128px);align-content:center}
.card.cresce .opcao{min-height:0}
.card.cresce .palco{flex:1 1 auto;height:auto;min-height:clamp(120px,26dvh,230px);max-height:440px}
.opcao{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:clamp(64px,10dvh,84px);padding:6px 4px;border-radius:16px;border:2px solid var(--borda);background:var(--cartao);color:var(--marrom);cursor:pointer;font:800 16px/18px var(--f-titulo)}
.opcao svg{width:clamp(26px,4.4dvh,34px);height:clamp(26px,4.4dvh,34px);color:var(--verde)}
.opcao[aria-pressed="true"]{background:var(--verde);border-color:var(--verde-esc);color:#fff}
.opcao[aria-pressed="true"] svg{color:#fff}
.cores{grid-template-columns:repeat(4,minmax(0,clamp(52px,9dvh,72px)));justify-content:center;gap:12px}
.cores.tres{grid-template-columns:repeat(3,minmax(0,clamp(64px,11dvh,88px)))}
.cor{aspect-ratio:1;border-radius:999px;border:4px solid var(--cartao);cursor:pointer;position:relative;box-shadow:0 0 0 2px var(--borda);min-width:48px}
.cor[aria-pressed="true"]{box-shadow:0 0 0 4px var(--marrom)}
.cor[aria-pressed="true"]::after{content:"";position:absolute;inset:28%;border-radius:999px;background:var(--cartao)}
.placar{font:800 24px/28px var(--f-titulo);color:var(--azul);font-variant-numeric:tabular-nums}
/* o quadro de desenho ocupa o espaço que sobrar na tela */
.card.desenho{flex:1 1 auto;min-height:clamp(176px,28dvh,240px)}
.pintura{position:relative;flex:1 1 auto;min-height:120px;border-radius:14px;border:2px solid var(--borda);background:#fff;overflow:hidden;touch-action:none}
.pintura canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:crosshair}
.lapis{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lapis button.tinta-btn{width:40px;height:40px;border-radius:999px;border:3px solid var(--cartao);box-shadow:0 0 0 2px var(--borda);cursor:pointer;padding:0}
.lapis button.tinta-btn[aria-pressed="true"]{box-shadow:0 0 0 3px var(--marrom)}
.mini{min-height:48px;padding:0 16px;border-radius:999px;border:2px solid var(--borda);background:var(--cartao);color:var(--marrom);cursor:pointer;font:800 16px/18px var(--f-titulo)}

/* recompensa */
.faixa{position:relative;align-self:center;margin-top:-26px;padding:8px 28px;background:var(--dourado);color:var(--marrom);font:800 20px/24px var(--f-titulo);border-radius:6px;box-shadow:0 3px 0 var(--dourado-esc)}
.estrelas-ganhas{display:flex;gap:6px;justify-content:center}
.estrelas-ganhas svg{width:clamp(36px,6dvh,44px);height:clamp(36px,6dvh,44px)}
@media (prefers-reduced-motion:no-preference){
  .pula{display:inline-block;animation:pula .6s cubic-bezier(.3,1.6,.5,1) both}
  .pula:nth-child(2){animation-delay:.15s}
  .carimbo{animation:carimbo .5s .35s cubic-bezier(.3,1.5,.5,1) both}
  .tela,.onb,.splash{animation:entra .28s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes pula{from{transform:scale(.2) rotate(-30deg)}to{transform:none}}
@keyframes carimbo{from{transform:scale(1.8) rotate(-10deg);opacity:0}to{transform:rotate(-10deg);opacity:1}}
@keyframes entra{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.carimbo{transform:rotate(-10deg)}

/* conquistas, diário */
.segmento{display:flex;gap:4px;padding:4px;border-radius:999px;background:#EADBB9}
.segmento button{flex:1;min-height:48px;border-radius:999px;border:0;cursor:pointer;background:transparent;color:var(--marrom);font:800 16px/18px var(--f-titulo)}
.segmento button[aria-pressed="true"]{background:var(--azul);color:#fff}
.emblemas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.4dvh,12px)}
.emblema{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.8dvh,8px);padding:clamp(8px,1.6dvh,16px) 8px;border-radius:18px;background:var(--cartao);box-shadow:0 2px 8px rgba(73,59,43,.1);text-align:center}
.emblema b{font:800 16px/19px var(--f-titulo)}
.emblema small{font:600 16px/19px var(--f-texto);color:var(--marrom-suave)}
.emblema.travado .medalhao{background:#D9CDB3!important;border-color:#C4B597;color:#8C7D63}
.carimbos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.slot{aspect-ratio:1;border-radius:999px;border:2px dashed var(--borda-forte);display:grid;place-items:center;font:800 18px/1 var(--f-titulo);color:var(--marrom-suave)}
.diario{display:flex;flex-direction:column;gap:12px}
.pagina{background:var(--cartao);border-radius:18px;box-shadow:0 2px 8px rgba(73,59,43,.1);padding:14px;display:flex;flex-direction:column;gap:8px}
.pagina img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:var(--creme);display:block}
.pagina .itens{display:flex;flex-wrap:wrap;gap:6px}
.pagina .itens span{padding:3px 10px;border-radius:999px;background:var(--verde-claro);color:var(--verde-esc);font:800 16px/20px var(--f-texto)}
.bolinha{width:20px;height:20px;border-radius:999px;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px var(--borda)}

/* passaporte */
.campo{height:52px;box-sizing:border-box;padding:0 16px;border-radius:14px;border:2px solid var(--borda-forte);background:#fff;font:700 19px/24px var(--f-titulo);color:var(--marrom);width:100%}
.campo::placeholder,textarea.nota::placeholder{color:#8A7860;opacity:1}
.idades{display:flex;justify-content:space-between;gap:6px}
.idade{width:clamp(48px,7.4dvh,54px);height:clamp(48px,7.4dvh,54px);border-radius:999px;border:2px solid var(--borda);background:#fff;color:var(--marrom);font:800 22px/1 var(--f-titulo);cursor:pointer}
.idade[aria-pressed="true"]{background:var(--azul);color:#fff;border-color:var(--azul-esc)}
.avatares{display:grid;grid-template-columns:repeat(4,minmax(0,clamp(56px,9.4dvh,80px)));justify-content:space-between;gap:10px}
.av-btn{aspect-ratio:1;padding:0;border-radius:999px;border:3px solid var(--borda);background:none;cursor:pointer;overflow:hidden}
.av-btn .av{width:100%;height:100%;display:block}
.av-btn[aria-pressed="true"]{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-claro)}
.aviso{font:800 16px/22px var(--f-texto);color:#8A3A1E}

/* área dos pais (adultos) */
.abas{display:flex;gap:4px;padding:4px;border-radius:999px;background:#EADBB9;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.abas::-webkit-scrollbar{display:none}
.aba{flex:1 0 auto;min-height:44px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;background:transparent;color:var(--marrom);font:800 15px/18px var(--f-titulo)}
.aba[aria-pressed="true"]{background:var(--azul);color:#fff}
.secao{background:var(--cartao);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.secao ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font:600 15px/22px var(--f-texto)}
.secao p{font:600 15px/22px var(--f-texto)}
textarea.nota{box-sizing:border-box;width:100%;padding:12px;border-radius:14px;border:2px solid var(--borda-forte);background:#fff;font:600 15px/22px var(--f-texto);color:var(--marrom);resize:vertical;min-height:84px}
.opcoes-gate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.opcoes-gate button{min-height:64px;border-radius:16px;border:2px solid var(--borda);background:#fff;color:var(--marrom);font:800 26px/1 var(--f-titulo);cursor:pointer}
.preco{font:800 40px/1 var(--f-titulo);color:var(--azul);font-variant-numeric:tabular-nums}
.selo-escuro{padding:4px 12px;border-radius:999px;background:var(--verde);color:#fff;font:800 13px/18px var(--f-texto)}
.check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;border:2px dashed var(--borda-forte);background:var(--cartao);cursor:pointer}
.check input{width:24px;height:24px;margin:0;accent-color:var(--verde);flex-shrink:0}
.item-lista{display:flex;gap:10px;align-items:flex-start;font:600 15px/21px var(--f-texto)}
.status{font:800 13px/16px var(--f-texto);padding:4px 10px;border-radius:999px;white-space:nowrap}
.status.ok2{background:var(--verde);color:#fff}
.status.nao{background:#EADBB9;color:var(--marrom)}
.toast{font:800 15px/20px var(--f-texto);padding:12px 14px;border-radius:14px;background:var(--azul-claro);color:var(--azul-esc)}
.nw{white-space:nowrap}
.linha{display:flex;align-items:center;gap:12px}
.contadores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pais .rot{font-size:14px;line-height:18px}

/* tela baixa (celular pequeno, ou deitado): menos ar, ilustrações menores */
@media (max-height:640px){
  .cabeca .av,.cadeado{width:44px;height:44px}
  .nav button{min-height:52px}
  .nav .bolha{height:26px}
}

/* tablet e computador: o app vira um aparelho centralizado sobre a mesa */
@media (min-width:600px) and (min-height:700px){
  body{background:var(--mesa) radial-gradient(circle at 1px 1px,rgba(73,59,43,.10) 1px,transparent 0) 0 0/22px 22px;display:grid;place-items:center}
  #app{width:min(440px,100vw - 48px);height:min(100dvh - 48px,920px);border-radius:36px;box-shadow:0 30px 60px -20px rgba(73,59,43,.45),0 0 0 8px var(--cartao),0 0 0 9px var(--borda);margin:0}
}

/* celular deitado: o app foi feito em pé (o app instalado já abre travado em retrato) */
#girar{display:none}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  #girar{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:24px;padding:16px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left));background:var(--creme);color:var(--marrom)}
  #girar img{height:min(70dvh,220px);width:auto;aspect-ratio:190/216;object-fit:cover;border-radius:999px 999px 28px 28px;border:4px solid var(--dourado)}
  #girar p{font:800 24px/1.25 var(--f-titulo);max-width:16ch}
  #app{visibility:hidden}
}