:root {
  --fundo1: #c7f0ff;
  --fundo2: #e9e3ff;
  --cartao: #ffffff;
  --texto: #1e293b;
  --suave: #64748b;
  --linha: #e2e8f0;
  --primaria: #7c3aed;
  --primaria-esc: #5b21b6;
  --ok: #16a34a;
  --erro: #ef4444;
  --amarelo: #facc15;
  --sombra: 0 6px 0 rgba(30, 41, 59, .08), 0 12px 30px rgba(30, 41, 59, .08);
  --raio: 22px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--texto);
  background: radial-gradient(circle at 15% 10%, #fff8 0 8%, transparent 9%), radial-gradient(circle at 85% 20%, #fff6 0 6%, transparent 7%),
    linear-gradient(160deg, var(--fundo1), var(--fundo2));
  background-attachment: fixed;
}
h1, h2, h3, .btn, .titulo-licao, .contagem, .chip { font-family: 'Fredoka', 'Nunito', sans-serif; }
h1 { font-size: 2rem; margin: 0 0 .3rem; }
h2 { font-size: 1.3rem; margin: 1.2rem 0 .5rem; }
h3 { margin: 0 0 .7rem; }
p { line-height: 1.5; }
.sub { color: var(--suave); font-size: 1.05rem; margin-top: 0; }
.mini { color: var(--suave); font-size: .85rem; }
kbd {
  display: inline-block; min-width: 1.8em; padding: .1em .45em; margin: 0 .1em; text-align: center;
  font-family: 'Fredoka', sans-serif; font-weight: 600; background: #f1f5f9; border: 1px solid #cbd5e1;
  border-bottom-width: 3px; border-radius: 7px;
}

#app { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; }
.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px; margin-bottom: 18px; }

.btn {
  font: 600 1rem 'Fredoka', sans-serif; border: 0; border-radius: 14px; padding: .65em 1.1em; cursor: pointer;
  background: #fff; color: var(--texto); box-shadow: 0 4px 0 #cbd5e1; transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #cbd5e1; }
.btn.primario { background: var(--primaria); color: #fff; box-shadow: 0 4px 0 var(--primaria-esc); }
.btn.perigo { background: #fee2e2; color: #b91c1c; box-shadow: 0 4px 0 #fca5a5; }
.grande-btn { font-size: 1.25rem; padding: .8em 1.6em; margin-top: 1rem; }
.grande-btn small { opacity: .7; font-size: .75em; }
button { font-family: inherit; color: inherit; }

/* Boas-vindas */
.boas-vindas { max-width: 620px; margin: 30px auto; text-align: center; padding: 34px 26px; }
.logo { font-size: 4.5rem; animation: flutuar 3s ease-in-out infinite; }
.boas-vindas h1 { font-size: 2.6rem; color: var(--primaria); }
.campo { display: block; font-weight: 800; margin: 1.2rem 0; font-size: 1.1rem; }
.campo input {
  display: block; width: 100%; margin-top: .5rem; font: 600 1.4rem 'Fredoka', sans-serif; text-align: center;
  padding: .6em; border: 3px solid var(--linha); border-radius: 16px; outline: none;
}
.campo input:focus { border-color: var(--primaria); }
.rotulo { font-weight: 800; margin-bottom: .4rem; }
.avatares { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.av {
  font-size: 2.2rem; width: 66px; height: 66px; border-radius: 18px; border: 3px solid var(--linha); background: #fff;
  cursor: pointer; transition: transform .1s; display: grid; place-items: center; line-height: 1;
}
.av:hover:not(:disabled) { transform: scale(1.1); }
.av.sel { border-color: var(--primaria); background: #f3e8ff; transform: scale(1.1); }
.av.trancado { font-size: 1.3rem; opacity: .55; cursor: not-allowed; }
.av.trancado small { font-size: .7rem; display: block; }
.avatares.grandes .av { width: 78px; height: 78px; font-size: 2.6rem; }

/* Cabeçalho */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.perfil {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 0; border-radius: 20px; padding: 8px 18px 8px 8px;
  box-shadow: var(--sombra); cursor: pointer; text-align: left;
}
.perfil .avatar { font-size: 2.4rem; width: 56px; height: 56px; display: grid; place-items: center; background: #f3e8ff; border-radius: 16px; }
.perfil-info b { display: block; font-family: 'Fredoka'; font-size: 1.2rem; }
.perfil-info small { color: var(--suave); font-weight: 700; }
.barra-xp { display: block; width: 160px; height: 9px; background: #ede9fe; border-radius: 9px; margin-top: 4px; overflow: hidden; }
.barra-xp span { display: block; height: 100%; background: linear-gradient(90deg, #a78bfa, #7c3aed); border-radius: 9px; }
.contadores { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: #fff; border: 0; border-radius: 999px; padding: .5em 1em; font-weight: 600; font-size: 1.05rem; box-shadow: var(--sombra); }
button.chip { cursor: pointer; }

/* Mapa */
.mapa-grade { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; }
.continuar {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 22px; margin-bottom: 18px; border: 0; cursor: pointer;
  border-radius: var(--raio); color: #fff; text-align: left; background: linear-gradient(120deg, #8b5cf6, #ec4899);
  box-shadow: 0 6px 0 #6d28d9, 0 14px 30px rgba(124, 58, 237, .3); font-family: 'Fredoka';
}
.continuar.fim { cursor: default; font-size: 1.15rem; }
.continuar small { display: block; opacity: .9; font-size: .95rem; }
.continuar b { font-size: 1.45rem; font-weight: 600; }
.continuar .play { margin-left: auto; font-size: 2rem; animation: pulsar 1.4s infinite; }
.continuar:active { transform: translateY(3px); }
.mundo-emoji { font-size: 2.6rem; }
.mundo { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 16px; border-top: 8px solid var(--cor); }
.mundo.bloqueado { opacity: .6; filter: grayscale(.6); }
.mundo-topo { display: flex; align-items: center; gap: 14px; }
.mundo-topo h2 { margin: 0; color: var(--cor); }
.mundo-topo p { margin: .1rem 0 0; color: var(--suave); }
.mundo-prog { margin-left: auto; font: 600 1.1rem 'Fredoka'; background: #f1f5f9; padding: .3em .8em; border-radius: 999px; white-space: nowrap; }
.trilha { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.no {
  width: 118px; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px;
  border-radius: 16px; transition: background .15s;
}
.no:hover:not(:disabled) { background: #f8fafc; }
.no-circ {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 600 1.5rem 'Fredoka';
  background: #fff; border: 4px solid var(--cor); color: var(--cor); box-shadow: 0 4px 0 rgba(0, 0, 0, .1);
}
.no.feito .no-circ { background: var(--cor); color: #fff; }
.no.atual .no-circ { animation: pulsar 1.4s infinite; box-shadow: 0 0 0 6px color-mix(in srgb, var(--cor) 30%, transparent); }
.no.trancado { cursor: not-allowed; }
.no.trancado .no-circ { border-color: #cbd5e1; color: #94a3b8; font-size: 1.2rem; background: #f1f5f9; }
.no-nome { font-weight: 800; font-size: .85rem; text-align: center; line-height: 1.15; min-height: 2.3em; }
.estrela { color: #e2e8f0; font-size: 1.05rem; }
.estrela.cheia { color: var(--amarelo); text-shadow: 0 1px 0 #ca8a04; }

.lateral .cartao { padding: 18px; }
.jogo-card, .link-card {
  width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; border: 0; cursor: pointer; padding: 12px;
  border-radius: 16px; background: #f8fafc; margin-bottom: 10px; transition: transform .1s, background .1s;
}
.jogo-card:hover:not(:disabled), .link-card:hover { transform: translateY(-2px); background: #f3e8ff; }
.jogo-card b, .link-card b { font-family: 'Fredoka'; font-size: 1.1rem; font-weight: 600; display: block; }
.jogo-card small, .link-card small { color: var(--suave); font-size: .85rem; line-height: 1.35; display: block; }
.jogo-emoji { font-size: 2.4rem; }
.jogo-card.trancado { opacity: .6; cursor: not-allowed; }
.link-card { font-size: 1.6rem; }

/* Postura */
.postura { max-width: 980px; margin: 0 auto; }
.grade-dicas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 1rem; }
.dica-card { background: #f8fafc; border-radius: 16px; padding: 14px; }
.dica-card span { font-size: 2rem; }
.dica-card b { display: block; font-family: 'Fredoka'; font-size: 1.1rem; font-weight: 600; margin-top: 4px; }
.dica-card p { margin: .3rem 0 0; color: var(--suave); font-size: .92rem; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 10px; font-weight: 700; font-size: .9rem; }
.legenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }
.postura .grande-btn { display: block; margin: 1.2rem auto 0; }
.barra-voltar { margin-bottom: 14px; }

/* Lição */
.barra-licao { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.titulo-licao { font-size: 1.3rem; flex: 1; min-width: 200px; }
.titulo-licao b { font-weight: 600; color: var(--cor); }
.mini-stats { display: flex; gap: 8px; }
.mini-stats span { background: #fff; border-radius: 14px; padding: .45em .9em; font-weight: 700; box-shadow: var(--sombra); white-space: nowrap; }
.mini-stats b { font-family: 'Fredoka'; font-size: 1.25rem; }
.mini-stats small { color: var(--suave); }
.progresso { height: 12px; background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 14px; box-shadow: var(--sombra); }
#barra { height: 100%; width: 0; background: linear-gradient(90deg, #4ade80, #22c55e); transition: width .2s; border-radius: 12px; }
.caixa-texto {
  position: relative; background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px 26px;
  font: 500 2rem/1.75 'Fredoka', monospace; letter-spacing: .04em; max-height: calc(3 * 1.75em + 44px); overflow: hidden; word-break: break-word;
}
.caixa-texto.curta { max-height: calc(2 * 1.75em + 28px); font-size: 1.7rem; padding: 14px 22px; }
.c { border-radius: 6px; padding: 0 1px; color: #94a3b8; transition: color .1s; }
.c.esp { padding: 0 .18em; }
.c.ok { color: var(--ok); }
.c.corrigido { color: #f97316; }
.c.atual { color: var(--texto); background: #fef08a; box-shadow: inset 0 -4px 0 var(--primaria); }
.c.erro { color: #fff; background: var(--erro); box-shadow: none; animation: tremer .25s; }
.dica-tecla { text-align: center; margin: 12px 0 6px; font-weight: 700; min-height: 1.6em; color: var(--suave); }
.dica-tecla kbd { font-size: 1.1rem; color: var(--texto); }
.instrucao { text-align: center; font-weight: 700; color: var(--suave); }

/* Teclado virtual */
.teclado-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
.teclado {
  --u: min(52px, calc((100vw - 60px) / 17.5)); background: #334155; padding: calc(var(--u) * .18); border-radius: 18px;
  box-shadow: 0 8px 0 #1e293b, 0 16px 30px rgba(0, 0, 0, .2); display: flex; flex-direction: column; gap: calc(var(--u) * .1);
}
.compacto .teclado { --u: min(38px, calc((100vw - 60px) / 17.5)); }
.linha { display: flex; gap: calc(var(--u) * .1); justify-content: center; }
.tecla {
  width: calc(var(--u) * var(--w) + var(--u) * .1 * (var(--w) - 1)); height: var(--u); border-radius: calc(var(--u) * .18);
  background: color-mix(in srgb, var(--dedo, #e2e8f0) 55%, #fff); color: #1e293b; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font: 600 calc(var(--u) * .36) 'Fredoka'; line-height: 1;
  box-shadow: 0 calc(var(--u) * .07) 0 rgba(0, 0, 0, .35); position: relative; transition: transform .08s, background .1s;
}
.tecla small { font-size: .62em; opacity: .65; }
.tecla.especial { font-size: calc(var(--u) * .25); color: #475569; }
.tecla.risquinho::after { content: ''; position: absolute; bottom: 14%; width: 30%; height: 3px; border-radius: 2px; background: #1e293b; opacity: .55; }
.tecla.alvo { background: var(--dedo, #fde047); outline: 3px solid #fff; box-shadow: 0 0 0 6px var(--primaria), 0 0 18px 6px rgba(124, 58, 237, .6); transform: translateY(-2px); z-index: 1; animation: brilho 1s infinite; }
.tecla.apertou { transform: translateY(3px); filter: brightness(.9); box-shadow: none; }
.tecla.errou { background: var(--erro) !important; color: #fff; transform: translateY(3px); }
.tecla.toupeira::before {
  content: '🐹'; position: absolute; font-size: calc(var(--u) * .8); bottom: 30%; animation: subir .25s ease-out; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3));
}
.tecla.pegou::before { content: '⭐'; position: absolute; font-size: calc(var(--u) * .8); bottom: 40%; animation: subir .3s ease-out; }
.kb-jogo .teclado { --u: min(64px, calc((100vw - 60px) / 17.5)); }
.kb-jogo .tecla.toupeira { overflow: visible; }

.maos { display: flex; gap: 60px; justify-content: center; }
.mao { display: flex; flex-direction: column; align-items: center; }
.dedos { display: flex; align-items: flex-end; gap: 5px; }
.dedo { width: 20px; border-radius: 10px 10px 4px 4px; background: color-mix(in srgb, var(--dedo) 45%, #fde7d3); border: 2px solid #e6b89c; transition: transform .15s; }
.mao-L .d-L5, .mao-R .d-R5 { height: 34px; }
.mao-L .d-L4, .mao-R .d-R4 { height: 46px; }
.mao-L .d-L3, .mao-R .d-R3 { height: 52px; }
.mao-L .d-L2, .mao-R .d-R2 { height: 46px; }
.mao-L .d-TH { height: 26px; transform: rotate(35deg) translate(4px, 8px); }
.mao-R .d-TH { height: 26px; transform: rotate(-35deg) translate(-4px, 8px); }
.dedo.alvo { background: var(--dedo); border-color: var(--primaria); box-shadow: 0 0 12px 3px rgba(124, 58, 237, .55); }
.mao-L .dedo.alvo:not(.d-TH), .mao-R .dedo.alvo:not(.d-TH) { transform: translateY(-6px); }
.palma { width: 128px; height: 46px; background: #fde7d3; border: 2px solid #e6b89c; border-radius: 12px 12px 30px 30px; margin-top: -2px; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: grid; place-items: center; padding: 16px; z-index: 50; backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.caixa-modal {
  background: #fff; border-radius: 28px; padding: 28px 30px; max-width: 520px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); animation: aparecer .3s cubic-bezier(.2, 1.4, .5, 1); max-height: 92vh; overflow: auto;
}
.caixa-modal h2 { font-size: 1.7rem; margin: .3rem 0 .6rem; }
.caixa-modal .grande { font-size: 4rem; }
.mundo-nome { color: var(--cor); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.novas { display: flex; gap: 16px; justify-content: center; margin: 12px 0; }
.nova { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nova kbd { font-size: 2.4rem; min-width: 1.6em; padding: .15em .4em; border-radius: 14px; }
.nova small { font-weight: 700; color: var(--suave); }
.estrelas-grandes { font-size: 4rem; letter-spacing: .1em; }
.estrelas-grandes .estrela { font-size: 4rem; display: inline-block; }
.estrelas-grandes .estrela.cheia { animation: estrelinha .5s backwards; }
.estrelas-grandes .estrela.cheia:nth-child(2) { animation-delay: .25s; }
.estrelas-grandes .estrela.cheia:nth-child(3) { animation-delay: .5s; }
.numeros-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.numeros-res div { background: #f8fafc; border-radius: 14px; padding: 10px 4px; }
.numeros-res b { display: block; font: 600 1.6rem 'Fredoka'; color: var(--primaria); }
.numeros-res small { font-size: .78rem; color: var(--suave); font-weight: 700; }
.botoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.recorde { display: inline-block; background: #fef9c3; color: #a16207; font: 600 1.2rem 'Fredoka'; padding: .3em 1em; border-radius: 999px; animation: pulsar 1s infinite; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 14px 22px;
  border-radius: 16px; font-size: 1.1rem; z-index: 80; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); animation: subirToast .35s; transition: opacity .5s;
}
.toast.saindo { opacity: 0; }
.confete { position: fixed; top: -12px; width: 10px; height: 16px; border-radius: 3px; z-index: 90; animation: cair linear forwards; pointer-events: none; }
.contagem {
  position: fixed; inset: 0; display: grid; place-items: center; font-size: 9rem; color: #fff; z-index: 70; pointer-events: none;
  text-shadow: 0 8px 0 var(--primaria-esc), 0 0 40px rgba(124, 58, 237, .8);
}
.contagem.pulsa { animation: contar .7s; }

/* Meteoros */
.ceu {
  position: relative; height: 430px; border-radius: var(--raio); overflow: hidden; margin-bottom: 10px;
  background: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 15%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 45% 60%, #fff9 0 1px, transparent 2px), radial-gradient(circle at 85% 50%, #fff 0 1px, transparent 2px),
    linear-gradient(#0f172a, #312e81 70%, #7c3aed);
  box-shadow: var(--sombra);
}
.cidade { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 2.4rem; letter-spacing: .1em; background: linear-gradient(transparent, #4c1d95aa); white-space: nowrap; overflow: hidden; }
.digitado { position: absolute; top: 10px; right: 16px; font: 600 1.6rem 'Fredoka'; color: #fde047; }
.meteoro { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.meteoro .fogo { font-size: 2.4rem; transform: rotate(-45deg) scaleX(-1); }
.meteoro .palavra { background: #fff; border-radius: 10px; padding: 2px 10px; font: 600 1.5rem 'Fredoka'; letter-spacing: .05em; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.meteoro .palavra i { font-style: normal; }
.meteoro .palavra i.feito { color: #16a34a; text-decoration: underline; }
.meteoro.alvo .palavra { background: #fde047; outline: 3px solid #f97316; }
.meteoro.explodiu .fogo { transform: none; font-size: 3.4rem; animation: explodir .4s forwards; }

/* Corrida */
.pista { background: #4ade80; border-radius: var(--raio); padding: 10px; box-shadow: var(--sombra); margin-bottom: 12px; }
.raia { display: flex; align-items: center; gap: 10px; }
.raia + .raia { margin-top: 6px; }
.raia-nome { width: 120px; font-weight: 800; color: #14532d; font-size: .95rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raia-nome small { display: block; font-weight: 700; opacity: .8; }
.raia-pista { position: relative; flex: 1; height: 46px; background: #78716c; border-radius: 12px; background-image: repeating-linear-gradient(90deg, transparent 0 30px, #fff6 30px 50px); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 50%; }
.raia:first-child .raia-pista { background-color: #a855f7; }
.corredor { position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(-1); font-size: 2.1rem; transition: left .15s linear; }
.bandeira { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; }

/* Conquistas e pais */
.grade-conquistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.conquista { background: #f8fafc; border-radius: 16px; padding: 14px; text-align: center; opacity: .55; }
.conquista.tem { opacity: 1; background: #fef9c3; }
.conquista span { font-size: 2.6rem; display: block; }
.conquista b { font-family: 'Fredoka'; font-weight: 600; display: block; margin: 4px 0; }
.conquista small { color: var(--suave); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kpis div { background: #f8fafc; border-radius: 16px; padding: 14px; }
.kpis b { display: block; font: 600 1.6rem 'Fredoka'; color: var(--primaria); }
.kpis small { color: var(--suave); font-weight: 700; }
.grafico { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding: 22px 8px 0; background: #f8fafc; border-radius: 16px; }
.barra-g { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.barra-g .col { width: 100%; max-width: 34px; background: linear-gradient(#a78bfa, #7c3aed); border-radius: 8px 8px 0 0; }
.barra-g .valor { font-size: .75rem; font-weight: 800; color: var(--suave); }
.erros-tecla { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 700; }
.referencias li { margin-bottom: .4rem; line-height: 1.45; }
.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
th { color: var(--suave); }
.zona-perigo { margin-top: 24px; text-align: right; }

.aviso-celular { background: #fef3c7; color: #92400e; padding: 12px 16px; text-align: center; font-weight: 700; }

/* Animações */
@keyframes flutuar { 50% { transform: translateY(-10px); } }
@keyframes pulsar { 50% { transform: scale(1.08); } }
@keyframes brilho { 50% { box-shadow: 0 0 0 6px var(--primaria), 0 0 4px 2px rgba(124, 58, 237, .3); } }
@keyframes tremer { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.tremer { animation: tremer .25s 2; }
@keyframes aparecer { from { transform: scale(.7); opacity: 0; } }
@keyframes estrelinha { from { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.3); } }
@keyframes subir { from { transform: translateY(60%) scale(.3); opacity: 0; } }
@keyframes subirToast { from { transform: translate(-50%, 30px); opacity: 0; } }
@keyframes cair { to { transform: translateY(105vh) rotate(720deg); } }
@keyframes contar { from { transform: scale(2); opacity: 0; } 40% { transform: scale(1); opacity: 1; } }
@keyframes explodir { to { transform: scale(1.6); opacity: 0; } }

@media (max-width: 900px) {
  .mapa-grade { grid-template-columns: 1fr; }
  .numeros-res { grid-template-columns: repeat(2, 1fr); }
  .caixa-texto { font-size: 1.5rem; padding: 16px; }
  .maos { display: none; }
  .mundo-topo { flex-wrap: wrap; }
  .no { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}