/* ==========================================================================
   NÚCLEO VISUAL COMUM — alfabetizacao-v2 (cópia idêntica em cada jogo)
   Direção de arte: "livro ilustrado de manhã" — céu em degradê, papel
   creme, peças como brinquedo laqueado (brilho em cima, lábio 3D embaixo,
   sombra macia em camadas), tipografia arredondada do sistema.
   ========================================================================== */
:root {
  --fonte: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Quicksand", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --tinta: #2B2350;
  --tinta-suave: #5E5786;
  --papel: #FFF9EE;
  --papel-2: #FFF1D9;
  --ceu-1: #BFE6FF;
  --ceu-2: #FFF4DF;
  --primaria: #FF8A3D;
  --primaria-esc: #D9601A;
  --ok: #2FBF71;
  --ok-esc: #1E8F52;
  --dica: #FFC531;
  --sombra-1: 0 1px 2px rgba(43, 35, 80, .12), 0 4px 10px rgba(43, 35, 80, .10), 0 14px 30px rgba(43, 35, 80, .10);
  --sombra-2: 0 2px 4px rgba(43, 35, 80, .14), 0 10px 24px rgba(43, 35, 80, .16), 0 30px 60px rgba(43, 35, 80, .14);
  --raio: clamp(16px, 2.6vmin, 26px);
  --alvo: 76px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: var(--fonte); color: var(--tinta); background: var(--ceu-2);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
  font-weight: 700; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible, [role=button]:focus-visible { outline: 4px solid #4AA8FF; outline-offset: 3px; }
svg { display: block; }

/* ---------------- cenário ---------------- */
.n-cenario { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.n-ceu { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ceu-1) 0%, var(--ceu-2) 62%, var(--papel-2) 100%); }
.n-sol { position: absolute; width: 46vmin; height: 46vmin; right: -8vmin; top: -10vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 200, .95) 0 18%, rgba(255, 220, 120, .55) 30%, rgba(255, 210, 120, 0) 68%);
  animation: n-sol 9s ease-in-out infinite; will-change: transform, opacity; }
@keyframes n-sol { 50% { transform: scale(1.06); opacity: .9; } }
.n-camada { position: absolute; left: -3%; width: 106%; will-change: transform; }
.n-nuvens { top: 0; height: 40%; }
.n-morros { bottom: 0; height: 42%; }
.n-nuvem { animation: n-deriva 60s linear infinite; }
.n-nuvem.n2 { animation-duration: 90s; animation-delay: -30s; }
.n-nuvem.n3 { animation-duration: 75s; animation-delay: -50s; }
@keyframes n-deriva { from { transform: translateX(-220px); } to { transform: translateX(1300px); } }
.n-vinheta { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(60, 30, 90, .16) 100%); }

/* ---------------- telas e transição em íris ---------------- */
.n-tela { position: fixed; inset: 0; z-index: 2; display: none; }
.n-tela.ativa { display: flex; }
.n-tela.entrando { animation: n-iris .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes n-iris { from { clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%)); } to { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 50%)); } }

/* ---------------- botões laqueados ---------------- */
.n-botao {
  --cor: var(--primaria); --cor-esc: var(--primaria-esc);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-width: var(--alvo); min-height: var(--alvo); padding: 0 1.2em; border-radius: 999px;
  font-weight: 900; letter-spacing: .02em; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, var(--cor) 0%, var(--cor) 48%, var(--cor-esc) 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 70%, #fff) 0%, var(--cor) 48%, var(--cor-esc) 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.12), 0 6px 0 var(--cor-esc), var(--sombra-1);
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.n-botao::after { content: ""; position: absolute; left: 12%; right: 12%; top: 7%; height: 34%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.n-botao:active, .n-botao.apertado { transform: translateY(5px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 1px 0 var(--cor-esc), var(--sombra-1); }
.n-botao svg { width: 1.2em; height: 1.2em; flex: none; }
.n-botao.redondo { width: var(--alvo); height: var(--alvo); padding: 0; }
.n-botao.redondo svg { width: 44%; height: 44%; }
.n-botao.claro { --cor: #FFFFFF; --cor-esc: #D9CFF0; color: var(--tinta); text-shadow: none; }
.n-botao.verde { --cor: var(--ok); --cor-esc: var(--ok-esc); }
.n-botao.roxo { --cor: #8C6CF2; --cor-esc: #5A3FC0; }
.n-botao.grande { font-size: clamp(26px, 5vmin, 40px); min-height: clamp(84px, 13vmin, 112px); padding: 0 1.4em; }

/* ---------------- HUD ---------------- */
.n-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); pointer-events: none; }
.n-hud > * { pointer-events: auto; }
.n-hud .grupo { display: flex; align-items: center; gap: 10px; }
.n-pilula { display: inline-flex; align-items: center; gap: 6px; height: 52px; padding: 0 16px; border-radius: 999px; font-size: 22px; font-weight: 900;
  background: rgba(255,255,255,.9); box-shadow: var(--sombra-1); }
.n-pilula svg { width: 26px; height: 26px; color: #FFB400; filter: drop-shadow(0 1px 0 #C78400); }

/* trilha de progresso da sessão (pontos que viram estrelas) */
.n-trilha { display: flex; gap: 6px; align-items: center; padding: 0 14px; height: 52px; border-radius: 999px; background: rgba(255,255,255,.82); box-shadow: var(--sombra-1); }
.n-trilha i { width: 22px; height: 22px; border-radius: 50%; background: #E6E0F5; box-shadow: inset 0 2px 3px rgba(0,0,0,.12); display: grid; place-items: center; transition: transform .3s; }
.n-trilha i.feita { background: radial-gradient(circle at 35% 30%, #FFF3B0, #FFC531 55%, #E59A00); box-shadow: 0 2px 0 #C78400, 0 0 10px rgba(255, 197, 49, .7); transform: scale(1.1); }
.n-trilha i.atual { background: #fff; box-shadow: 0 0 0 3px #8C6CF2; animation: n-pulso 1.4s ease-in-out infinite; will-change: transform; }
@keyframes n-pulso { 50% { transform: scale(1.18); } }

/* ---------------- mascote Lili ---------------- */
.n-mascote { position: relative; display: block; }
.n-mascote .lili { width: 100%; height: 100%; overflow: visible; }
.lili-corpo { transform-box: fill-box; transform-origin: 50% 100%; animation: lili-respira 3.2s ease-in-out infinite; }
@keyframes lili-respira { 50% { transform: scale(1.025, .975); } }
.lili-palpebras { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: lili-pisca 4.6s infinite; }
@keyframes lili-pisca { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
.lili-pupilas { transform: translate(var(--olhoX, 0), var(--olhoY, 0)); transition: transform .25s ease-out; }
.lili-asa-e, .lili-asa-d { transform-box: fill-box; }
.lili-asa-e { transform-origin: 100% 0; } .lili-asa-d { transform-origin: 0 0; }
.lili-bico-inf { transform-box: fill-box; transform-origin: 50% 0; }
html.falando .lili-bico-inf { animation: lili-fala .22s ease-in-out infinite alternate; }
@keyframes lili-fala { to { transform: translateY(3px) scaleY(1.25); } }
.lili-sombra { transform-box: fill-box; transform-origin: 50% 50%; }
.n-mascote.feliz .lili-corpo { animation: lili-pulo .75s cubic-bezier(.3, .7, .4, 1) 2; }
.n-mascote.feliz .lili-sombra { animation: lili-sombra .75s ease 2; }
.n-mascote.feliz .lili-asa-e, .n-mascote.torce .lili-asa-e { animation: lili-asa-e .25s ease-in-out infinite alternate; }
.n-mascote.feliz .lili-asa-d, .n-mascote.torce .lili-asa-d { animation: lili-asa-d .25s ease-in-out infinite alternate; }
.n-mascote.torce .lili-corpo { animation: lili-pulo .6s cubic-bezier(.3, .7, .4, 1) infinite; }
.n-mascote.torce .lili-sombra { animation: lili-sombra .6s ease infinite; }
@keyframes lili-pulo {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.16, .84); }
  45% { transform: translateY(-26%) scale(.9, 1.12); }
  70% { transform: translateY(0) scale(1.1, .9); }
  85% { transform: translateY(0) scale(.97, 1.03); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes lili-sombra { 45% { transform: scale(.6); opacity: .5; } }
@keyframes lili-asa-e { to { transform: rotate(28deg); } }
@keyframes lili-asa-d { to { transform: rotate(-28deg); } }
.n-mascote.pensa .lili-corpo { animation: lili-pensa 1.4s ease-in-out; }
@keyframes lili-pensa { 30%, 70% { transform: rotate(-8deg) scale(1.02, .98); } }
.n-mascote.dica .lili-corpo { animation: lili-dica .9s ease-in-out 2; }
@keyframes lili-dica { 0%, 100% { transform: translateX(0) rotate(0); } 40% { transform: translateX(6%) rotate(8deg); } }
.n-mascote.dica .lili-asa-d { animation: lili-aponta .9s ease-in-out 2; }
@keyframes lili-aponta { 40% { transform: rotate(-70deg); } }

/* balão de fala da mascote */
.n-balao { position: absolute; z-index: 6; max-width: min(78vw, 420px); padding: 12px 18px; border-radius: 22px; background: #fff; color: var(--tinta);
  font-size: clamp(18px, 3.4vmin, 26px); font-weight: 900; box-shadow: var(--sombra-2); opacity: 0; transform: scale(.6) translateY(10px); transform-origin: 20% 100%;
  transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.n-balao.mostra { opacity: 1; transform: none; }

/* ---------------- camadas (pausa, etc.) ---------------- */
.n-camada-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(43, 35, 80, .45);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility 0s .25s; }
.n-camada-modal.aberta { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.n-cartao { position: relative; background: linear-gradient(180deg, #FFFFFF, var(--papel)); border-radius: calc(var(--raio) * 1.4); box-shadow: var(--sombra-2), inset 0 2px 0 #fff;
  padding: clamp(18px, 4vmin, 34px); text-align: center; transform: scale(.85); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); max-width: 94vw; max-height: 94vh; overflow: auto; }
.n-camada-modal.aberta .n-cartao { transform: none; }
.n-cartao h2 { font-size: clamp(28px, 6vmin, 44px); font-weight: 900; margin-bottom: 14px; }
.n-cartao .acoes { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 16px; }

/* contador "rodadas de hoje" */
.n-hoje { white-space: nowrap; max-width: 100%; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.85); box-shadow: var(--sombra-1); font-size: clamp(18px, 3vmin, 24px); }
.n-hoje .sois { display: inline-flex; gap: 4px; }
.n-hoje .sois svg { width: 26px; height: 26px; color: #FFB400; filter: drop-shadow(0 0 4px rgba(255, 190, 40, .8)); }
.n-hoje .sois svg.vazio { color: #E3DDF1; filter: none; }

.n-particulas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 40; pointer-events: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .lili-palpebras { transform: scaleY(0) !important; }
}