/* =====================================================================================
   UNIVERSO: a constelação 3D dos três eixos (desenhada por js/universo.js). Dono: frente Universo.
   O canvas é transparente: a cena da tela aparece por trás. Os rótulos são texto de verdade
   (nítidos em qualquer tela), posicionados por cima do desenho.
   Altura padrão 360 px; se o elemento que recebe o universo tiver altura própria, ele ocupa essa altura.
   ===================================================================================== */
.uni {
  position: relative; width: 100%; height: 360px;
  touch-action: pan-y;               /* arrastar para cima ou para baixo continua rolando a página */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  isolation: isolate; cursor: grab;
}
.uni.girando { cursor: grabbing; }
/* o desenho some suave nas bordas (máscara feita pela placa de vídeo, sem custo para o desenho) */
.uni-tela {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%), linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%), linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-composite: intersect;
}
/* janela de céu atrás da constelação: escurece a cena e acende uma névoa de galáxia bem discreta.
   O tamanho e o lugar vêm do js (segue o centro da camada em foco). */
.uni-ceu {
  position: absolute; left: 0; top: 0; width: 120%; height: 120%; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255,212,146,.15), rgba(176,152,255,.075) 42%, transparent 100%) 50% 50% / 62% 58% no-repeat,
    radial-gradient(closest-side, rgba(5,4,10,.62), rgba(5,4,10,.46) 52%, rgba(5,4,10,0) 100%);
  opacity: 0; transition: opacity 1.4s ease, transform .9s var(--mola); will-change: transform;
}
.uni.aceso .uni-ceu { opacity: 1; }
.uni-cams, .uni-itens { position: absolute; inset: 0; pointer-events: none; }

/* um rótulo por camada na visão geral: nome em Cinzel e a média em serifa, na cor da camada */
.uni-cam {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: 84px;
  color: var(--cor); opacity: 0; transition: opacity .55s ease; will-change: transform, opacity;
}
.uni-cam.on { opacity: 1; }
.uni-cam-n { font: 600 11px/1.25 var(--cinzel); letter-spacing: .13em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 1px 10px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.7); }
.uni-cam-v {
  font: 500 26px/.92 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums;
  color: color-mix(in srgb, var(--cor) 62%, #fff);
  text-shadow: 0 0 18px color-mix(in srgb, var(--cor) 60%, transparent), 0 1px 3px rgba(0,0,0,.85);
}
.uni-cam-v:empty { display: none; }

/* nome e nota de cada ponta (aparecem no foco, para fora do polígono) */
.uni-it {
  position: absolute; left: 0; top: 0; max-width: 82px; text-align: center;
  opacity: 0; transform: translate3d(-9999px, 0, 0); transition: opacity .42s ease; transition-delay: calc(var(--i, 0) * 30ms);
  will-change: transform, opacity;
}
.uni-it.on { opacity: 1; }
.uni-it[data-al="e"] { text-align: left; }
.uni-it[data-al="d"] { text-align: right; }
.uni-it span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;   /* nome comprido quebra em linhas, sem cortar palavra */
  font: 600 12.5px/1.16 var(--sans); letter-spacing: 0; color: rgba(245,239,228,.82); text-wrap: balance; overflow-wrap: break-word;
  text-shadow: 0 1px 8px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.85);
}
.uni-it b {
  display: block; margin-top: 1px; font: 600 18px/1.08 var(--serif); font-variant-numeric: lining-nums tabular-nums;
  color: color-mix(in srgb, var(--cor) 70%, #fff);
  text-shadow: 0 0 12px color-mix(in srgb, var(--cor) 55%, transparent), 0 1px 3px rgba(0,0,0,.85);
}
/* muitas pontas (mais de 8 gatilhos): rótulo mais estreito, cabe sem encolher a teia */
.uni-itens.compacto .uni-it { max-width: 68px; }
.uni-itens.compacto .uni-it span { font-size: 11.5px; -webkit-line-clamp: 3; }
.uni-itens.compacto .uni-it b { font-size: 15.5px; }
.uni-it.fraco b { color: #ff9b7e; text-shadow: 0 0 12px rgba(255,96,64,.65), 0 1px 3px rgba(0,0,0,.85); }
.uni-it.nulo b { color: var(--txt-4); text-shadow: none; }
/* sem check-in: só o nome de cada ponta, na cor da camada, mais apagado */
.uni-it.fantasma span { color: color-mix(in srgb, var(--cor) 55%, rgba(245,239,228,.62)); }

/* camada em foco: nome + média no canto e o botão de voltar às três */
.uni-tit {
  position: absolute; left: 16px; top: 8px; display: flex; align-items: baseline; gap: 9px; pointer-events: none;
  color: var(--cor, var(--ouro)); opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity .3s ease, transform .5s var(--mola);
}
.uni-tit.on { opacity: 1; transform: none; transition-delay: .22s; }
.uni-tit span { font: 600 11px/1 var(--cinzel); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.uni-tit b { font: 500 22px/1 var(--serif); color: color-mix(in srgb, var(--cor, var(--ouro)) 62%, #fff); text-shadow: 0 0 16px color-mix(in srgb, var(--cor, var(--ouro)) 55%, transparent); }
.uni-tit b:empty { display: none; }
.uni-volta {
  position: absolute; right: 8px; top: -4px; width: 46px; height: 46px; display: grid; place-items: center; color: var(--txt-2);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .2s var(--mola); cursor: pointer;
}
.uni-volta::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(14,12,20,.42); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-luz);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.uni-volta svg { position: relative; width: 17px; height: 17px; }
.uni.em-foco .uni-volta { opacity: 1; pointer-events: auto; transition-delay: .2s; }
.uni-volta:active { transform: scale(.9); }
.uni-volta:focus-visible { outline: 2px solid rgba(217,180,106,.7); outline-offset: -4px; border-radius: 50%; }