/* =================== Universo Astrobox (js/universo/index.js) =================== */
.uni {
  position: relative; overflow: hidden; outline: none; background: #02010a;
  height: clamp(420px, 78vh, 900px);
  border: 5px solid var(--ink); border-radius: 28px;
  box-shadow: 0 8px 0 var(--ink), 0 0 70px rgba(62,224,255,.25);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.uni:focus-visible { box-shadow: 0 8px 0 var(--ink), 0 0 0 4px var(--cyan); }
.uni-cena { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.uni-cena canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.uni-cena canvas:active { cursor: grabbing; }
.uni-carregando { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; margin: 0; padding: 20px; font: 18px 'Lilita One'; color: #9ff4ff; }
.uni-carregando small { font: 700 13px 'Nunito'; color: var(--muted); }
.uni-rotulos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.uni-r { pointer-events: none; }
.uni-r > * { pointer-events: auto; }

/* ---- rótulos 3D ---- */
.uni-uf, .uni-cid, .uni-cint, .uni-esc {
  font: inherit; color: #fff; cursor: pointer; border: 0; padding: 0; background: none;
}
.uni-uf { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.uni-uf b { font: 18px 'Lilita One'; letter-spacing: .5px; background: var(--c); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 1px 10px; box-shadow: 0 3px 0 var(--ink), 0 0 22px var(--c); transition: transform .15s; }
.uni-uf small { font: 800 11px 'Nunito'; background: rgba(10,4,30,.82); padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
.uni-uf:hover b, .uni-uf:focus-visible b { transform: scale(1.15); }
.uni-uf.vazio b { font-size: 12px; background: rgba(40,40,80,.85); color: #a8b0d8; border-width: 2px; box-shadow: none; padding: 0 6px; }

.uni-cid { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.uni-cid b { font: 14px 'Lilita One'; background: rgba(10,4,30,.85); border: 2px solid var(--c); border-radius: 10px; padding: 1px 8px; white-space: nowrap; transition: transform .15s; }
.uni-cid small { font: 800 10px 'Nunito'; color: var(--c); background: rgba(10,4,30,.75); padding: 0 6px; border-radius: 6px; white-space: nowrap; }
.uni-cid.livre b { border-style: dashed; border-color: #9ff4ff; color: #cfefff; font-size: 12px; }
.uni-cid.livre small { color: #9ff4ff; }
.uni-cid.minha b { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.uni-cid:hover b, .uni-cid:focus-visible b { transform: scale(1.12); }

.uni-sol { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.uni-sol b { font: 16px 'Lilita One'; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); border-radius: 10px; padding: 0 10px; box-shadow: 0 3px 0 var(--ink); }
.uni-sol small { font: 800 11px 'Nunito'; color: var(--gold); }

.uni-esc { display: flex; flex-direction: column; align-items: center; transform: scale(var(--us, 1)); transform-origin: 50% 100%; }
.uni-esc .ball { width: 34px; height: 34px; display: grid; place-items: center; font-size: 22px; background: var(--c); border: 3px solid var(--ink); border-radius: 42% 42% 50% 50% / 38% 38% 62% 62%; box-shadow: 0 3px 0 var(--ink); transition: transform .15s; }
.uni-esc .lbl { margin-top: 3px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px 'Lilita One'; background: rgba(10,4,30,.85); padding: 1px 7px; border-radius: 8px; }
.uni-esc:hover .ball, .uni-esc:focus-visible .ball { transform: scale(1.2) rotate(-8deg); }
.uni-esc.minha .ball { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px #fff, 0 0 18px var(--c); }
.uni-esc.minha .lbl { background: var(--gold); color: var(--ink); }
.uni-cint { font: 12px 'Lilita One'; color: #f1e3bd; background: rgba(10,4,30,.85); border: 2px dashed #d9c9a0; border-radius: 10px; padding: 2px 9px; white-space: nowrap; }
.uni-cint:hover { background: #3a2a10; }

/* ---- HUD ---- */
.uni-trilha { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; pointer-events: none; }
.uni-trilha button { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; font: 15px 'Lilita One'; color: #fff; background: rgba(20,10,51,.88); border: 3px solid var(--ink); border-radius: 12px; padding: 4px 10px; cursor: pointer; }
.uni-trilha button .ico { font-size: 20px; }
.uni-trilha button[aria-current] { background: var(--violet); cursor: default; }
.uni-trilha .sep { font: 18px 'Lilita One'; color: var(--muted); }

.uni-erro { font: 800 13px 'Nunito'; color: #fff; background: var(--pink); border: 3px solid var(--ink); border-radius: 12px; padding: 4px 10px; }

.uni-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.uni-zoom button { width: 44px; height: 44px; display: grid; place-items: center; font: 24px 'Lilita One'; color: #fff; background: rgba(20,10,51,.9); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.uni-zoom button .ico { font-size: 24px; display: block; }
/* iOS: zera o espaçamento/aparência nativos do botão (deixavam o botão retangular e o ícone fora do centro) */
.uni-zoom button { -webkit-appearance: none; appearance: none; padding: 0; margin: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.uni-zoom button:disabled { opacity: .35; cursor: default; }

.uni-card { position: absolute; top: 60px; right: 12px; z-index: 6; width: min(330px, calc(100% - 24px)); max-height: calc(100% - 140px); overflow-y: auto; background: linear-gradient(180deg, #2a1862, #20124c); border: 3px solid var(--ink); border-radius: 18px; padding: 14px; box-shadow: 0 5px 0 var(--ink), 0 0 30px color-mix(in srgb, var(--c) 50%, transparent); }
.uni-card.hide { display: none; }
.uni-card .fechar { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); border: 2px solid var(--ink); color: #fff; font-size: 16px; cursor: pointer; }
.uc-topo { display: flex; gap: 10px; align-items: center; margin: 0 30px 10px 0; }
.uc-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 30px; background: var(--c); border: 3px solid var(--ink); border-radius: 14px; }
.uc-topo b { display: block; font: 17px 'Lilita One'; }
.uc-topo small { font: 800 12px 'Nunito'; color: var(--muted); }
.uni-card .btn { margin-top: 12px; }
.uc-lista { display: grid; gap: 4px; }
.uc-lista button { display: grid; grid-template-columns: 34px 22px 1fr auto; align-items: center; gap: 6px; text-align: left; font: inherit; color: #fff; background: rgba(255,255,255,.06); border: 0; border-left: 4px solid var(--c); border-radius: 8px; padding: 5px 8px; cursor: pointer; }
.uc-lista button:hover { background: rgba(255,255,255,.12); }
.uc-lista span { font: 13px 'Lilita One'; color: var(--muted); }
.uc-lista .ico { font-size: 20px; }
.uc-lista b { font: 800 13px 'Nunito'; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-lista small { font: 800 11px 'Nunito'; color: var(--muted); }

@media (max-width: 560px) {
  .uni-card { top: auto; bottom: 12px; }
}

/* ---- página pública /universo ---- */
body.uni-pagina { margin: 0; min-height: 100dvh; background: #02010a; }
body.uni-pagina .uni { position: fixed; inset: 0; height: auto; border: 0; border-radius: 0; box-shadow: none; }
body.uni-pagina .uni-trilha { right: 150px; }
.uni-marca { position: fixed; top: 12px; right: 12px; z-index: 7; display: flex; align-items: center; gap: 6px; font: 16px 'Lilita One'; color: #fff; text-decoration: none; background: rgba(20,10,51,.9); border: 3px solid var(--ink); border-radius: 12px; padding: 4px 10px; }
.uni-marca .ico { font-size: 22px; }

/* ---- dentro do jogo (#/universo): tela cheia entre o HUD e a navegação, igual ao mapa ----
   (o `mundo-ativo` no <body> é posto pelo app.js e faz do .screen uma coluna de altura total) */
.uni-tela .uni { height: calc(100dvh - 230px); min-height: 420px; }
body.mundo-ativo .uni-tela { overflow: hidden; }
body.mundo-ativo .uni-tela .uni { flex: 1 1 auto; height: 100%; min-height: 300px; border: 0; border-radius: 0; box-shadow: none; }
.uni-oculto { visibility: hidden; }
/* números do card da escola (posição na cidade, heróis, XP) */
.uni-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; }
.uni-kpis div { background: rgba(255,255,255,.07); border-radius: 10px; padding: 4px 6px; text-align: center; }
.uni-kpis b { display: block; font: 17px 'Lilita One'; color: var(--gold); }
.uni-kpis small { font: 800 11px 'Nunito'; color: var(--muted); }

/* abertura: a cena só aparece com a câmera já no lugar (sem mostrar o Brasil e pular) */
.uni-cena canvas, .uni-cena .uni-rotulos { transition: opacity .5s ease; }
.uni-cena.uni-abrindo canvas, .uni-cena.uni-abrindo .uni-rotulos { opacity: 0; }

/* encaixe dos rótulos (js/universo/index.js, desamontoar): deslocamento para o lado e versão compacta */
.uni-r > * { translate: var(--dx, 0px) var(--dy, 0px); transition: translate .25s ease; }
.uni-esc.compacto .lbl { display: none; }
.uni-cid.compacto small { display: none; }
.uni-cid.compacto b { font-size: 11px; padding: 0 6px; border-width: 1px; }
.uni-uf.compacto small { display: none; }

.uni-cint.minha { border-color: var(--gold); color: var(--gold); }

/* onde o jogador está (nível Brasil) e o estado dele */
.uni-voce { display: flex; flex-direction: column; align-items: center; font: 14px 'Lilita One'; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); border-radius: 12px; padding: 2px 10px; box-shadow: 0 3px 0 var(--ink), 0 0 18px rgba(255,200,61,.7); cursor: pointer; white-space: nowrap; }
.uni-voce small { font: 800 10px 'Nunito'; }
.uni-uf.minha b { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--gold), 0 0 26px var(--gold); }

/* planeta escondido de missão (O Planeta Perdido) */
.uni-segredo .ball { font: 20px 'Lilita One'; color: #0b2a1e; animation: uniSegredo 1.6s ease-in-out infinite; }
.uni-segredo .lbl { color: #39ff9c; }
@keyframes uniSegredo { 50% { box-shadow: 0 3px 0 var(--ink), 0 0 22px #39ff9c; } }
.uni-codigo { font: 900 28px ui-monospace, 'Consolas', monospace; letter-spacing: 4px; text-align: center; color: #39ff9c; background: #06140f; border: 3px solid var(--ink); border-radius: 12px; padding: 10px; }