/* ═══════════════════════════════════════════════════════════
   hub.css — o "menu do jogo" (seleção de ambiente).
   Topo (launcher.css) → cards inclinados com borda neon → trilha.
   Mobile-first: cards empilham; a partir de 768px viram fileira.
   ═══════════════════════════════════════════════════════════ */

.hub {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  /* Sem overflow:hidden aqui — senão corta o popup do launcher.
     As estrelinhas ficam contidas pela camada .hub__deco-layer. */

  background-color: var(--color-bg-dark);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 50% 40%, var(--color-pink-glow), transparent 58%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}

/* As estrelas ficam no fundo. A topbar precisa ficar ACIMA dos cards, senão
   o popup do launcher abre atrás deles e parece que não funciona. */
.hub > .topbar {
  position: relative;
  z-index: 50;
}
.hub-stage,
.hub-nav {
  position: relative;
  z-index: 1;
}

/* ── Estrelinhas decorativas (contidas; sangram pelos cantos) ── */
.hub__deco-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hub__deco {
  position: absolute;
  color: var(--color-pink);
}
.hub__deco svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hub__deco--1 { width: 130px; top: -26px; left: -22px; opacity: 0.16; transform: rotate(-8deg); }
.hub__deco--2 { width: 66px;  top: 16%;   right: 5%;    opacity: 0.20; }
.hub__deco--3 { width: 180px; bottom: -40px; right: -30px; opacity: 0.10; transform: rotate(10deg); }
.hub__deco--4 { width: 56px;  bottom: 20%; left: 4%;     opacity: 0.16; transform: rotate(12deg); }

/* ── Ano empilhado (20 / 26) ── */
.hub-year {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 0.82;
}

/* ── Tagline + linha de orientação (orienta quem chega) ── */
.hub-intro {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-xs) var(--space-md) 0;
}
.hub-intro__kicker {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pink);
}
.hub-intro__hook {
  margin-top: 0.15rem;
  font-family: var(--font-comic);
  font-size: clamp(1.7rem, 5vw, 3rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.hub-intro__lead {
  margin: 0.4rem auto 0;
  max-width: 48ch;
  font-size: 0.95rem;
  color: var(--color-ink-dim);
}

/* ═══════════════ Cards ═══════════════ */
.hub-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
}

/* O card é a "moldura" (borda neon); o conteúdo vai no __inner. */
.hub-card {
  position: relative;
  flex: 1 1 0;
  max-width: 300px;
  height: min(58vh, 520px);
  background: rgba(255, 255, 255, 0.16);
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
  transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.hub-card__inner {
  position: absolute;
  inset: 2px;
  overflow: hidden;
  background-color: #0e0d0c;
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}

.hub-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hub-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.2) 52%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

.hub-card__num {
  position: absolute;
  top: var(--space-sm);
  right: 17%;
  z-index: 2;
  font-family: var(--font-comic);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--color-pink);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

.hub-card__body {
  position: absolute;
  left: 13%;
  right: 8%;
  bottom: var(--space-md);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.hub-card__name {
  font-family: var(--font-comic);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

.hub-card__tag {
  font-size: 0.8rem;
  color: var(--color-ink-dim);
}

.hub-card__cta {
  margin-top: 0.55rem;
  padding: 0.35rem 0.95rem;
  font-weight: 600;
  font-size: 0.78rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);   /* padrão recua; o rosa guia fica só no card destaque */
  border-radius: var(--radius-pill);
}

/* Card ativo: a moldura acende em rosa e o card pula no hover/foco. */
.hub-card--active {
  cursor: pointer;
}
.hub-card--active:hover,
.hub-card--active:focus-visible {
  outline: none;
  background: var(--color-pink);
  transform: translateY(-8px);
  filter: drop-shadow(0 16px 34px var(--color-pink-glow)) brightness(1.06);
}
/* foco por teclado: anel branco visível por cima do rosa do card */
.hub-card--active:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
/* o CTA inverte no hover/foco pra saltar contra o card que acendeu */
.hub-card--active:hover .hub-card__cta,
.hub-card--active:focus-visible .hub-card__cta {
  background: #fff;
  color: var(--color-pink-deep);
}

/* ── Card destaque: a "porta de entrada" (Aura Kit) — rosa = começa aqui ── */
.hub-card--featured {
  background: var(--color-pink);   /* moldura rosa no repouso = "selecionado" */
  filter: drop-shadow(0 10px 26px var(--color-pink-glow));
}
.hub-card--featured .hub-card__cta {
  background: var(--color-pink-deep);   /* o único CTA rosa: guia pra cá */
}
.hub-card__badge {
  align-self: flex-start;
  margin-bottom: 0.15rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-pink-deep);
  border-radius: var(--radius-pill);
}

/* ═══════════════ Trilha de navegação (decorativa, level select) ═══════════════ */
.hub-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-xl) var(--space-lg);
}
.hub-nav__track {
  position: absolute;
  left: var(--space-xl);
  right: var(--space-xl);
  top: calc(var(--space-md) + 7px);
  border-top: 2px dashed var(--color-line);
}
.hub-nav__mark {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  background: var(--color-pink);
}
.hub-nav__mark--square { border-radius: 3px; }
.hub-nav__mark--circle { border-radius: 50%; }
.hub-nav__mark--triangle {
  width: 0;
  height: 0;
  background: transparent;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 16px solid var(--color-pink);
}

/* ═══════════════ Desktop / tablet ═══════════════ */
@media (min-width: 768px) {
  .hub-stage {
    gap: clamp(0.5rem, 1.5vw, 1.5rem);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
  }
}

/* ═══════════════ Mobile: cards viram painéis empilhados ═══════════════ */
@media (max-width: 767px) {
  .hub-stage {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .hub-card {
    width: 100%;
    max-width: none;
    height: clamp(112px, 18vh, 172px);
    clip-path: none;
    border-radius: var(--radius-md);
  }
  .hub-card__inner {
    clip-path: none;
    border-radius: calc(var(--radius-md) - 2px);
  }
  .hub-card__num {
    right: var(--space-md);
  }
  .hub-card__body {
    left: var(--space-md);
    right: var(--space-md);
  }
  .hub-card--active:hover,
  .hub-card--active:focus-visible {
    transform: translateY(-3px);
  }

  /* trilha vira só as 3 formas centralizadas (igual ao sketch mobile) */
  .hub-nav {
    justify-content: center;
    gap: var(--space-lg);
  }
  .hub-nav__track {
    display: none;
  }
}