/* =========================================================
   extras.css — "Em breve", ícones de jogo e seções de SEO.
   (arquivo separado para manter cada CSS abaixo de 64 KB)
   ========================================================= */

/* selo "Em breve" */
.soon-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 1.3rem; padding: 0 .5rem;
  border-radius: 9999px;
  font-size: .65rem; font-weight: 800; letter-spacing: .02em;
  color: #BAE6FD;
  background: rgba(14, 165, 233, 0.14);
  border: 1px solid rgba(125, 211, 252, 0.35);
  white-space: nowrap;
}
.soon-tag--corner { position: absolute; top: .55rem; right: .55rem; z-index: 5; }
.soon-tag--lg { height: 1.75rem; padding: 0 .75rem; font-size: .75rem; }
.cat-banner { position: relative; }

/* ícone de jogo nos atalhos (celular) e no menu */
.shortcut__mini svg { width: 1rem; height: 1rem; }
.cat-menu__icon--empty svg { width: 1.25rem; height: 1.25rem; color: #E0F2FE; }

/* bloco "Em breve" da categoria vazia */
.soon {
  position: relative; overflow: hidden;
  padding: 2.25rem 1.25rem 1.5rem;
  border-radius: 1.5rem;
  text-align: center;
  border: 1px solid rgba(125, 211, 252, 0.16);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(59, 130, 246, 0.16), transparent 70%),
    rgb(8 9 16);
}
@media (min-width: 640px) { .soon { padding: 3rem 2.5rem 2rem; } }
.soon__glow {
  position: absolute; left: 50%; top: -6rem;
  width: 28rem; height: 14rem; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 58, 237, 0.35), transparent);
  pointer-events: none;
}
.soon__head { position: relative; }
.soon__icon {
  width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1.4rem; color: #E0F2FE;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(14, 165, 233, 0.25));
  border: 1px solid rgba(186, 230, 253, 0.3);
  box-shadow: 0 18px 44px -18px rgba(59, 130, 246, 0.9);
  animation: soonBob 4s ease-in-out infinite;
}
@keyframes soonBob { 50% { transform: translateY(-5px); } }
.soon__ghosts {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
  margin-top: 2.25rem; text-align: left;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
}
@media (min-width: 640px) { .soon__ghosts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .soon__ghosts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.soon__ghost {
  padding: .6rem; border-radius: 1.1rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
}
.soon__ghost-img { display: block; aspect-ratio: 16 / 10; border-radius: .8rem; background: rgba(255, 255, 255, 0.04); }
.soon__ghost-line { display: block; height: .6rem; margin-top: .7rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.06); }
.soon__ghost-line--short { width: 55%; }
@media (prefers-reduced-motion: reduce) { .soon__icon { animation: none; } }

/* texto de SEO das categorias e da home */
.seo-block {
  border-radius: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(8, 8, 14, 0.7);
  padding: 1.5rem;
}
@media (min-width: 640px) { .seo-block { padding: 2rem 2.25rem; } }
.seo-block h2 { font-family: 'Sora', 'Geist', sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); color: #fff; }
.seo-block h3 { font-weight: 700; color: #fff; font-size: 1rem; margin-top: 1.4rem; }
.seo-block p { color: rgba(255, 255, 255, 0.66); line-height: 1.7; margin-top: .75rem; font-size: .95rem; }
.seo-block ul { margin-top: .75rem; display: grid; gap: .45rem; }
.seo-block li { display: flex; gap: .55rem; color: rgba(255, 255, 255, 0.72); font-size: .92rem; line-height: 1.55; }
.seo-block li::before { content: ""; flex-shrink: 0; width: .45rem; height: .45rem; margin-top: .5rem; border-radius: 9999px; background: linear-gradient(135deg, #A855F7, #38BDF8); }
.seo-faq { margin-top: 1.5rem; display: grid; gap: .5rem; }
.seo-faq details { border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02); }
.seo-faq summary { cursor: pointer; list-style: none; padding: .9rem 1rem; font-weight: 600; color: #fff; display: flex; justify-content: space-between; gap: 1rem; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after { content: "+"; color: #C4B5FD; font-weight: 700; }
.seo-faq details[open] summary::after { content: "–"; }
.seo-faq details p { margin: 0; padding: 0 1rem 1rem; }

/* foco após "voltar ao topo" sem contorno visível */
#conteudo:focus { outline: none; }