/* Aventura no Espaço (a Cometinha, a navezinha): só o que os jogos de nave precisam além do estilo.css. Tudo começa com na-. */

/* O céu do espaço atrás do menu e dos jogos do tema. */
.tela.tela-nave, .tela[class*=" tela-nave-"] {
  background: radial-gradient(circle at 20% 10%, #312e81 0, transparent 45%), radial-gradient(circle at 85% 70%, #581c87 0, transparent 50%), #0f0a2e;
}

/* ---------- menu ---------- */
.na-apresenta-arte { position: relative; width: 132px; height: 120px; flex: none; }
.na-apresenta-planeta { position: absolute; right: -6px; bottom: 0; width: 84px; animation: na-gira-leve 6s ease-in-out infinite; }
.na-apresenta-nave { position: absolute; left: 0; top: 0; width: 62px; animation: na-flutua 2.4s ease-in-out infinite; }
.na-apresenta-arte svg, .na-nave-svg, .na-planeta-svg { display: block; width: 100%; }
.na-chama { transform-origin: 60px 110px; animation: na-chama .18s ease-in-out infinite alternate; }
.na-brincadeira-emoji { background: #e0e7ff; }
.na-recordes {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; font-weight: 700;
}
.na-recordes strong { width: 100%; font-size: 17px; }
.na-recorde { margin: 0; text-align: center; color: #fde68a; font-size: 18px; font-weight: 800; }
.abertura .na-nave-svg { width: 92px; margin: 0 auto; }

/* ---------- a janela da vez ---------- */
.na-janela-vez { border: 6px solid var(--cor, #6366f1); }
.na-janela-vez .janela-arte { width: 92px; }
.na-janela-vez h2 { color: var(--tinta); }

/* ---------- o jogo ---------- */
.na-jogo {
  display: flex; flex-direction: column; gap: 8px; margin: -4px -6px 0;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.na-hud {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 6px 6px 10px;
  border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: var(--sombra);
  border-left: 10px solid var(--cor); font-size: 18px; font-weight: 800;
}
.na-hud .chip { flex: none; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 12px; line-height: 1.2; }
.na-item { white-space: nowrap; }
.na-vidas { letter-spacing: -2px; }
.na-pausar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; background: #ede9fe; color: var(--roxo-escuro);
  font-size: 20px; display: grid; place-items: center;
}
.na-pausar:active:not(:disabled) { transform: scale(.92); }
.na-energia { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.na-energia i { width: 9px; height: 18px; border-radius: 3px; background: #e5e7eb; box-shadow: inset 0 0 0 2px #cbd5e1; }
.na-energia i.na-cheia { background: #facc15; box-shadow: inset 0 0 0 2px #ca8a04; }

/* O painel da pergunta: altura fixa, para o palco não pular quando o texto muda. */
.na-painel {
  position: relative; height: 86px; flex: none; display: grid; place-items: center; padding: 4px 12px;
  border-radius: 20px; background: #fff; box-shadow: var(--sombra); border: 4px solid transparent;
  color: var(--tinta); text-align: center; overflow: hidden; transition: background .2s, border-color .2s;
}
.na-painel.na-surge > * { animation: pula .3s cubic-bezier(.2, 1.6, .4, 1); }
.na-painel.na-certo { background: #dcfce7; border-color: #22c55e; }
.na-painel.na-errado { background: #ffedd5; border-color: #f97316; }
.na-painel.na-dourada { border-color: #fbbf24; background: #fffbeb; }
.na-painel.na-certo.na-dourada { background: #fef9c3; }
.na-painel-dica { font-size: 17px; font-weight: 800; line-height: 1.25; }
.na-painel-fim { font-size: 36px; font-weight: 900; }
.na-selo-dourado {
  position: absolute; top: 3px; right: 8px; padding: 0 8px; border-radius: 999px; background: #fbbf24; color: #78350f;
  font-size: 13px; font-weight: 900; line-height: 1.6;
}
.na-conta { font-size: clamp(30px, 10vw, 50px); font-weight: 900; line-height: 1; white-space: nowrap; }
.na-conta sup { font-size: .55em; }
.na-falta {
  display: inline-block; min-width: 1.3em; padding: 0 .12em; border-radius: 12px;
  border: 3px dashed #a5b4fc; color: #6366f1; background: #eef2ff;
}
.na-falta.na-preenchida { border-style: solid; border-color: #22c55e; color: #15803d; background: #fff; animation: pula .35s cubic-bezier(.2, 1.6, .4, 1); }
.na-errado .na-falta.na-preenchida { border-color: #f97316; color: #c2410c; }
.na-palavra-linha { display: flex; align-items: center; justify-content: center; gap: 12px; }
.na-emoji-grande { font-size: clamp(40px, 12vw, 58px); line-height: 1; }
.na-palavra { display: flex; gap: 4px; }
.na-palavra b {
  display: grid; place-items: center; min-width: 1.05em; height: 1.35em; padding: 0 .08em; border-radius: 10px;
  background: #eef2ff; font-size: clamp(26px, 8vw, 42px); font-weight: 900; line-height: 1;
}
.na-palavra b.na-falta { min-width: 1.05em; }

/* O palco: o canvas ocupa tudo; a altura vem do motor (o resto da tela). */
.na-palco {
  position: relative; width: 100%; min-height: 280px; flex: none; border-radius: 22px; overflow: hidden;
  background: #0b1033; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), var(--sombra); touch-action: none;
}
.na-tela { display: block; width: 100%; height: 100%; touch-action: none; }
.na-pausa {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(11, 16, 51, .72); color: #fff; animation: aparece .2s ease-out;
}
.na-pausa[hidden] { display: none; }
.na-pausa strong { font-size: 34px; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }

@media (max-width: 420px) {
  .na-hud { font-size: 16px; }
  .na-item-recorde { display: none; }
  .na-painel { height: 80px; }
}
@media (min-width: 700px) {
  .na-jogo { margin: 0; }
  .na-painel { height: 96px; }
}

/* =====================================================================
   Viagem pelo Sistema Solar
   ===================================================================== */

/* ---------- o painel da pergunta (um pouco mais alto, para as perguntas dos maiores) ---------- */
.na-painel.na-painel-solar { height: 100px; padding: 4px 10px; }
.na-pergunta, .na-retorno { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; line-height: 1.2; }
.na-pergunta { flex-wrap: wrap; }
.na-retorno { display: block; }
.na-retorno b { font-weight: 900; }
.na-p1 { font-size: clamp(18px, 4.8vw, 26px); }
.na-p2 { font-size: clamp(16px, 4.1vw, 21px); }
.na-p3 { font-size: clamp(14px, 3.6vw, 18px); }
.na-pergunta-fig { flex: none; width: 58px; }
.na-pergunta-fig svg { display: block; width: 100%; }
.na-painel-fim small { font-size: 22px; vertical-align: middle; }
.na-seq-linha { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; }
.na-seq {
  min-width: 34px; padding: 2px 6px; border-radius: 10px; background: #eef2ff; color: #6366f1;
  font-size: 18px; font-weight: 900; line-height: 1.3; text-align: center;
}
.na-seq-feito { background: #dcfce7; color: #15803d; }
.na-seq-proximo { background: #fde047; color: #713f12; box-shadow: 0 0 0 3px #f59e0b; animation: na-pisca 1s ease-in-out infinite; }
.na-seq-dec { font-size: 15px; color: #15803d; }

/* ---------- a mãozinha do gesto ---------- */
.na-gestos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; }
.na-gesto {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--tinta); font-size: 17px; line-height: 1.15; box-shadow: 0 3px 0 rgba(42, 26, 94, .2);
}
.na-mao { display: inline-block; font-size: 28px; line-height: 1; }
.na-gesto-tocar .na-mao { animation: na-mao-toca 1s ease-in-out infinite; }
.na-gesto-arrastar .na-mao { animation: na-mao-arrasta 1.6s ease-in-out infinite; }
.na-gesto-deslizar .na-mao { animation: na-mao-desliza 1.3s ease-in-out infinite; }
.na-gesto-segurar .na-mao { animation: na-mao-segura 1.6s ease-in-out infinite; }
.na-gesto-girar .na-mao { animation: na-mao-gira 1.6s linear infinite; }
.na-gesto-pinca .na-mao { animation: na-mao-pinca 1.2s ease-in-out infinite; }
.na-teclas { font-size: 15px; font-weight: 800; color: #e0e7ff; }
@keyframes na-mao-toca { 0%, 100% { transform: translateY(-4px); } 45% { transform: translateY(3px) scale(.9); } }
@keyframes na-mao-arrasta { 0% { transform: translate(-8px, 4px) scale(.9); } 60% { transform: translate(10px, -4px) scale(.9); } 100% { transform: translate(-8px, 4px); } }
@keyframes na-mao-desliza { 0%, 100% { transform: translateX(-8px) rotate(-8deg); } 50% { transform: translateX(10px) rotate(8deg); } }
@keyframes na-mao-segura { 0% { transform: translateY(-4px); filter: none; } 25%, 85% { transform: translateY(3px) scale(.88); filter: drop-shadow(0 0 4px #f59e0b); } 100% { transform: translateY(-4px); } }
@keyframes na-mao-gira { from { transform: rotate(0deg) translateX(7px) rotate(0deg); } to { transform: rotate(360deg) translateX(7px) rotate(-360deg); } }
@keyframes na-mao-pinca { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.25); } }

/* A dica por cima do jogo (some sozinha). */
.na-dica {
  position: absolute; left: 50%; top: 12px; z-index: 4; transform: translateX(-50%); width: max-content; max-width: calc(100% - 20px);
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; text-align: center;
  animation: na-dica-entra .4s cubic-bezier(.2, 1.6, .4, 1); transition: opacity .35s;
}
.na-dica .na-gesto { font-size: 18px; white-space: normal; }
.na-dica small { padding: 2px 10px; border-radius: 999px; background: rgba(15, 10, 46, .7); color: #e0e7ff; font-size: 14px; font-weight: 800; }
.na-dica-meio { top: 50%; }
.na-dica-some { opacity: 0; }
@keyframes na-dica-entra { from { transform: translateX(-50%) translateY(-20px); opacity: 0; } }

/* Mercúrio: os botões de trocar de órbita. */
.na-orbita-botao {
  position: absolute; bottom: 10px; z-index: 3; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92);
  color: var(--roxo-escuro); font-size: 17px; font-weight: 900; box-shadow: 0 4px 0 rgba(42, 26, 94, .35);
}
.na-orbita-dentro { left: 10px; }
.na-orbita-fora { right: 10px; }
.na-orbita-botao:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(42, 26, 94, .35); }

/* ---------- o cartão do astro (antes de cada fase) ---------- */
.na-cartao {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 28px; background: #fff; color: var(--tinta);
  box-shadow: 0 0 0 6px var(--cor), var(--sombra); max-width: 760px; width: 100%; align-self: center;
}
.na-cartao-vez { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 18px; font-weight: 800; }
.na-cartao-nivel { margin-left: auto; padding: 2px 12px; border-radius: 999px; background: #ede9fe; color: var(--roxo-escuro); font-size: 16px; }
.na-cartao-topo { display: flex; align-items: center; gap: 14px; }
.na-cartao-astro { flex: none; width: 118px; animation: na-flutua 3s ease-in-out infinite; }
.na-cartao-astro svg { display: block; width: 100%; }
.na-cartao-fala {
  position: relative; flex: 1; padding: 12px 14px; border-radius: 20px; background: #f5f3ff; border: 3px solid var(--astro);
}
.na-cartao-fala::before {
  content: ""; position: absolute; left: -14px; top: 38px; border: 8px solid transparent; border-right: 10px solid var(--astro);
}
.na-cartao-fala strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 22px; }
.na-cartao-fala p { margin: 6px 0 0; font-size: 19px; line-height: 1.35; }
.na-cartao-missao { padding: 12px 14px; border-radius: 20px; background: #fefce8; border: 3px dashed #facc15; display: flex; flex-direction: column; gap: 8px; }
.na-cartao-missao b { font-size: 20px; }
.na-cartao-missao p { margin: 0; font-size: 18px; line-height: 1.35; }
.na-cartao-missao .na-gesto { background: #fff; box-shadow: 0 0 0 2px #fde68a; }
.na-cartao-missao .na-teclas { color: #6d28d9; }
.na-cartao-nota { margin: 0; text-align: center; font-size: 17px; font-weight: 800; color: #6d28d9; }
.na-cartao .na-recorde { color: #b45309; font-size: 16px; }
.na-selo { padding: 1px 10px; border-radius: 999px; font-size: 14px; font-weight: 900; }
.na-selo-chefe { background: #fee2e2; color: #b91c1c; }
.na-selo-desafio { background: #dbeafe; color: #1d4ed8; }
.na-selo-bonus { background: #fef3c7; color: #a16207; }
.na-decolar { align-self: center; }
.na-decolar:focus-visible, .na-orbita-botao:focus-visible { outline: 5px solid #fde047; outline-offset: 3px; }

/* ---------- o mapa da viagem ---------- */
.na-viagem-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; color: #fff; font-size: 18px; font-weight: 800; }
.na-viagem-vez { display: inline-flex; align-items: center; gap: 6px; }
.na-nivel-caixa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 20px;
  background: rgba(255, 255, 255, .1); color: #fff;
}
.na-nivel-caixa > strong { font-size: 18px; }
.na-niveis { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.na-nivel {
  padding: 8px 14px; border-radius: 999px; border: 3px solid rgba(255, 255, 255, .35); color: #fff; font-size: 16px; font-weight: 800;
}
.na-nivel small { opacity: .8; font-size: 13px; }
.na-nivel.escolhido { background: #fff; color: var(--roxo-escuro); border-color: #fde047; }
.na-nivel:focus-visible { outline: 4px solid #fde047; outline-offset: 2px; }
.na-nivel-nota { width: 100%; margin: 0; text-align: center; font-size: 15px; font-weight: 700; color: #e0e7ff; }
.na-explica-pequena { font-size: 16px; }

.na-mapa {
  position: relative; width: 100%; border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(253, 224, 71, .35) 0, transparent 22%),
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70% 15%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 60%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 80%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 45%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 10% 70%, #fff 50%, transparent 51%),
    linear-gradient(160deg, #1e1b4b, #0f0a2e 60%, #2e1065);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), var(--sombra);
}
.na-mapa-trilha { position: absolute; inset: 0; width: 100%; height: 100%; }
.na-parada {
  position: absolute; z-index: 1; transform: translate(-50%, -50%); width: 30%; max-width: 128px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 22px; color: #fff;
  transition: transform .15s;
}
.na-parada:active { transform: translate(-50%, -50%) scale(.94); }
.na-parada-astro { display: block; width: 64px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.na-parada-astro svg { display: block; width: 100%; }
.na-parada b { font-size: 15px; line-height: 1.1; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); white-space: nowrap; }
.na-parada-estrelas { font-size: 15px; color: #fde047; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.na-parada-selo { position: absolute; top: 0; right: 10%; font-size: 20px; }
.na-travada .na-parada-astro { filter: saturate(.35) brightness(.6); }
.na-travada b { opacity: .6; }
.na-proxima { background: rgba(253, 224, 71, .16); box-shadow: 0 0 0 3px #fde047; animation: na-brilha-parada 1.4s ease-in-out infinite; }
.na-parada:focus-visible { outline: 5px solid #fde047; outline-offset: 2px; background: rgba(255, 255, 255, .14); }
.na-mapa-nave {
  position: absolute; z-index: 2; width: 34px; margin: -78px 0 0 26px; pointer-events: none;
  animation: na-flutua 2.2s ease-in-out infinite;
}
.na-mapa-nave svg { display: block; width: 100%; }
.na-mapa-largo .na-parada { max-width: 150px; }
.na-mapa-largo .na-parada-astro { width: 78px; }
.na-mapa-largo .na-parada b { font-size: 17px; }
.na-janela-parada .janela-arte { width: 130px; }
@keyframes na-brilha-parada { 50% { box-shadow: 0 0 0 6px rgba(253, 224, 71, .5); } }
@keyframes na-pisca { 50% { transform: scale(1.08); } }

/* ---------- o placar da fase: o carimbo e o que aprendeu ---------- */
.na-fim-carimbo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.na-carimbo-novo { width: 120px; flex: none; transform: rotate(-8deg); animation: na-carimba .6s cubic-bezier(.2, 1.4, .4, 1); }
.na-carimbo-novo svg { display: block; width: 100%; }
.na-aprendi {
  flex: 1; min-width: 240px; max-width: 520px; padding: 12px 16px; border-radius: 20px; background: rgba(255, 255, 255, .95);
  color: var(--tinta); text-align: left; font-size: 17px;
}
.na-aprendi ul { margin: 6px 0 0; padding-left: 20px; }
.na-aprendi li { margin: 3px 0; line-height: 1.35; }
.na-fim-viagem { margin: 0; padding: 10px 14px; border-radius: 18px; background: #fef9c3; color: #713f12; font-size: 18px; font-weight: 800; }
@keyframes na-carimba { from { transform: scale(1.8) rotate(-25deg); opacity: .3; } 70% { transform: scale(.92) rotate(-6deg); opacity: 1; } to { transform: rotate(-8deg); } }

/* ---------- o passaporte ---------- */
.na-passaporte-quem { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.na-passaporte-chip { padding: 4px; border-radius: 999px; border: 3px solid transparent; }
.na-passaporte-chip.escolhido { border-color: #fde047; }
.na-passaporte {
  display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 28px;
  background: linear-gradient(160deg, #1e3a8a, #312e81); color: #fff; box-shadow: 0 0 0 5px var(--cor), var(--sombra);
}
.na-passaporte-capa { display: flex; align-items: center; gap: 14px; }
.na-passaporte-capa h2 { margin: 0; font-size: 26px; }
.na-passaporte-capa p { margin: 4px 0 0; font-size: 17px; }
.na-passaporte-nave { flex: none; width: 70px; }
.na-passaporte-nave svg { display: block; width: 100%; }
.na-passaporte-titulo { display: inline-block; padding: 2px 12px; border-radius: 999px; background: #fde047; color: #713f12 !important; font-weight: 900; }
.na-passaporte-aviso { color: #fde68a; font-size: 15px !important; }
.na-carimbos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.na-carimbo { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.na-carimbo > div { width: 100%; max-width: 110px; }
.na-carimbo svg { display: block; width: 100%; }
.na-carimbo-ok > div { transform: rotate(var(--giro, -6deg)); }
.na-carimbo small { font-size: 13px; font-weight: 800; opacity: .85; }

/* ---------- o destaque no menu ---------- */
.na-destaque-viagem {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 24px; text-align: left;
  background: linear-gradient(120deg, #4c1d95, #1d4ed8); color: #fff; box-shadow: 0 0 0 3px #fde047, var(--sombra);
}
.na-destaque-viagem:active { transform: scale(.98); }
.na-destaque-arte { flex: none; width: 74px; animation: na-gira-leve 6s ease-in-out infinite; }
.na-destaque-arte svg { display: block; width: 100%; }
.na-destaque-viagem strong { display: block; font-size: 21px; }
.na-destaque-viagem small { font-size: 15px; opacity: .9; }
.na-destaque-seta { margin-left: auto; font-size: 36px; font-weight: 900; }
.na-destaque-viagem:focus-visible { outline: 5px solid #fde047; outline-offset: 3px; }

/* ---------- Monte o Sistema Solar ---------- */
.na-sistema { display: flex; flex-direction: column; gap: 8px; }
.na-sis-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #fff; font-size: 18px; font-weight: 800; }
.na-sis-recado {
  min-height: 52px; padding: 8px 12px; border-radius: 18px; background: #fff; color: var(--tinta); text-align: center;
  font-size: 17px; line-height: 1.3; border: 3px solid transparent;
}
.na-sis-recado.na-certo { background: #dcfce7; border-color: #22c55e; }
.na-sis-recado.na-errado { background: #ffedd5; border-color: #f97316; }
.na-sis-pedido { background: #fefce8; border-color: #facc15; font-size: 19px; }
.na-zoom { position: relative; overflow: hidden; touch-action: none; border-radius: 22px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), var(--sombra); }
.na-zoom-miolo { transform-origin: 0 0; will-change: transform; }
.na-com-zoom { cursor: grab; }
.na-lupas { position: absolute; right: 8px; top: 8px; z-index: 3; display: flex; gap: 6px; }
.na-lupa {
  min-width: 48px; height: 48px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--roxo-escuro);
  font-size: 22px; font-weight: 900; box-shadow: 0 4px 0 rgba(42, 26, 94, .3);
}
.na-lupa:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(42, 26, 94, .3); }
.na-sis-quadro { position: relative; width: 100%; background: radial-gradient(circle at 50% 0, #312e81, #0f0a2e 70%); }
.na-sis-fundo { position: absolute; inset: 0; width: 100%; height: 100%; }
.na-sis-vaga {
  position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; max-width: 92px; min-width: 40px;
  border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 5px var(--dica);
  display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .15s, background .15s;
}
.na-sis-rotulo {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; padding: 0 6px; border-radius: 999px;
  background: rgba(15, 10, 46, .75); font-size: 13px; font-weight: 900; white-space: nowrap;
}
.na-sis-sobre { background: rgba(253, 224, 71, .35); border-color: #fde047; transform: translate(-50%, -50%) scale(1.15); }
.na-sis-cheia { border: 0; background: none; box-shadow: none; }
.na-sis-planeta { display: block; width: 125%; flex: none; pointer-events: none; }
.na-sis-planeta svg { display: block; width: 100%; }
.na-sis-errada { animation: na-sacode .5s; background: rgba(249, 115, 22, .45); }
.na-sis-certa { box-shadow: 0 0 0 4px #22c55e; border-radius: 50%; }
.na-sis-vaga:focus-visible { outline: 5px solid #fde047; outline-offset: 4px; }
/* A bandeja fica grudada embaixo da tela: os planetas estão sempre à mão, mesmo rolando a página. */
.na-sis-bandeja {
  position: sticky; bottom: 6px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px; border-radius: 20px;
  background: rgba(30, 27, 75, .88); box-shadow: 0 0 0 2px rgba(255, 255, 255, .18), var(--sombra); touch-action: none;
}
.na-sis-peca {
  width: 76px; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 2px; border-radius: 16px;
  background: rgba(255, 255, 255, .1); color: #fff; touch-action: none; transition: opacity .2s, transform .15s;
}
.na-sis-peca span { display: block; width: 52px; pointer-events: none; }
.na-sis-peca svg { display: block; width: 100%; }
.na-sis-peca small { font-size: 13px; font-weight: 800; pointer-events: none; }
.na-sis-escolhida { background: #fde047; color: #713f12; transform: translateY(-4px); }
.na-sis-levantada { opacity: .35; }
.na-sis-usada { opacity: .18; }
.na-sis-peca:focus-visible { outline: 4px solid #fde047; outline-offset: 2px; }
.na-sis-fantasma { position: fixed; z-index: 80; width: 84px; margin: -42px 0 0 -42px; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.na-sis-fantasma svg { display: block; width: 100%; }
.na-sis-botoes { display: flex; justify-content: center; }
@keyframes na-sacode { 0%, 100% { translate: 0; } 25% { translate: -6px 0; } 75% { translate: 6px 0; } }

@media (max-width: 420px) {
  .na-painel.na-painel-solar { height: 104px; }
  .na-cartao { padding: 12px; gap: 10px; }
  .na-cartao-astro { width: 84px; }
  .na-cartao-fala strong { font-size: 19px; }
  .na-cartao-fala p, .na-cartao-missao p { font-size: 17px; }
  .na-gesto { font-size: 15px; }
  .na-orbita-botao { font-size: 15px; padding: 8px 10px; }
  .na-parada-astro { width: 56px; }
  .na-parada b { font-size: 14px; }
  .na-sis-peca { width: 40px; padding: 2px 0; }
  .na-sis-peca span { width: 36px; }
  .na-sis-peca small { display: none; }
  .na-sis-bandeja { gap: 3px; padding: 6px 4px; }
  .na-sis-rotulo { font-size: 11px; }
}
/* Na TV e no computador: tudo maior, para ler de longe. */
@media (min-width: 1100px) {
  .na-cartao-fala p, .na-cartao-missao p { font-size: 21px; }
  .na-cartao-astro { width: 140px; }
  .na-p1 { font-size: 28px; }
  .na-p2 { font-size: 23px; }
  .na-p3 { font-size: 19px; }
}

@keyframes na-flutua { 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes na-gira-leve { 50% { transform: rotate(-6deg) translateY(3px); } }
@keyframes na-chama { from { transform: scaleY(.85); } to { transform: scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .na-apresenta-planeta, .na-apresenta-nave, .na-chama, .na-cartao-astro, .na-mapa-nave, .na-proxima, .na-mao, .na-destaque-arte, .na-seq-proximo { animation: none; }
}