/* ─────────────────────────────────────────────────────────────────────────────
   O "chrome" da aplicação: abertura, cursor, menu e troca de tema.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Cursor desenhado ────────────────────────────────────────────────────── */

/* Só em ponteiro fino. Em telas de toque não existe cursor, e forçar um
   `cursor:` ali só atrapalharia. */
@media (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M4 2.5l16.5 9.2-7 1.6-3.2 7z' fill='%23F97316' stroke='%23320f02' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")
        3 3,
      auto;
  }

  a,
  button,
  [role='button'],
  .alternativa,
  .categoria,
  .chip {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='10' fill='none' stroke='%23320f02' stroke-width='4.5'/%3E%3Ccircle cx='15' cy='15' r='10' fill='none' stroke='%23FFB020' stroke-width='2.4'/%3E%3Cpath d='M12.5 10.5l7 4.5-7 4.5z' fill='%23FFB020' stroke='%23320f02' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E")
        15 15,
      pointer;
  }

  input,
  textarea {
    cursor: text;
  }
}

/* Rastro que persegue o ponteiro. Puramente decorativo. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--normal);
}

.cursor.ativo {
  opacity: 1;
}

.cursor__anel,
.cursor__ponto {
  position: absolute;
  border-radius: 50%;
  translate: -50% -50%;
}

.cursor__anel {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgb(249 115 22 / 0.55);
  box-shadow: 0 0 22px rgb(249 115 22 / 0.35), inset 0 0 14px rgb(249 115 22 / 0.2);
  transition:
    width var(--normal),
    height var(--normal),
    border-color var(--normal),
    background var(--normal);
}

.cursor__ponto {
  width: 6px;
  height: 6px;
  background: var(--marca-laranja-brilho);
  box-shadow: 0 0 12px var(--marca-laranja-claro);
}

/* Sobre algo clicável o anel abre e acende. */
.cursor.sobre-alvo .cursor__anel {
  width: 54px;
  height: 54px;
  border-color: rgb(255 176 32 / 0.9);
  background: rgb(249 115 22 / 0.1);
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor {
    display: none;
  }
}

/* ─── Preloader ───────────────────────────────────────────────────────────── */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e4);
  background: var(--fundo);
  background-image: radial-gradient(40rem 30rem at 50% 30%, rgb(249 115 22 / 0.2), transparent 65%);
  transition: opacity var(--lento), visibility var(--lento);
}

.preloader.saindo {
  opacity: 0;
  visibility: hidden;
}

.preloader__palco {
  position: relative;
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
}

/* Aro girando ao redor da marca, com um vão que revela o movimento. */
.preloader__aro {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--marca-laranja-claro);
  border-right-color: rgb(249 115 22 / 0.4);
  animation: girar 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.preloader__aro::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: rgb(255 176 32 / 0.55);
  animation: girar 1.7s linear infinite reverse;
}

.preloader__marca {
  width: 108px;
  filter: drop-shadow(0 8px 26px rgb(249 115 22 / 0.55));
  animation: entrarMarca 700ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes entrarMarca {
  from {
    opacity: 0;
    scale: 0.6;
    rotate: -18deg;
  }
}

.preloader__titulo {
  font-family: var(--fonte-display);
  font-size: clamp(1rem, 4vw, 1.35rem);
  letter-spacing: 0.02em;
  color: var(--texto);
  transform: skewX(-6deg);
  animation: subirSuave 600ms 160ms both;
}

.preloader__titulo b {
  color: var(--marca-laranja);
  font-weight: inherit;
}

.preloader__jogos {
  color: var(--marca-laranja-claro);
}

.preloader__barra {
  width: min(260px, 62vw);
  height: 5px;
  border-radius: var(--r-full);
  background: rgb(128 128 128 / 0.22);
  overflow: hidden;
  animation: subirSuave 600ms 240ms both;
}

.preloader__barra span {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--marca-laranja-brilho), var(--marca-laranja));
  box-shadow: 0 0 14px rgb(255 176 32 / 0.8);
  transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.preloader__texto {
  font-size: var(--texto-sm);
  color: var(--texto-fraco);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: subirSuave 600ms 320ms both;
}

@keyframes subirSuave {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

/* ─── Entrada das telas ───────────────────────────────────────────────────── */

/* Cada bloco direto da tela entra em cascata. O atraso é calculado em JS e
   entregue como `--i`, então funciona para qualquer quantidade de blocos. */
.tela > * {
  animation: entrarBloco var(--lento) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes entrarBloco {
  from {
    opacity: 0;
    translate: 0 22px;
  }
}

/* ─── Navegação ───────────────────────────────────────────────────────────── */

.topo__nav {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin-left: auto;
}

.nav__link {
  position: relative;
  padding: var(--e2) var(--e3);
  border-radius: var(--r-full);
  color: var(--texto-suave);
  font-weight: 600;
  font-size: var(--texto-base);
  transition: color var(--rapido), background var(--rapido);
}
@media (hover: hover) {
  .nav__link:hover,
.nav__link[aria-current='page'] {
    color: var(--texto);
    background: rgb(128 128 128 / 0.12);
  }
}


.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  translate: -50% 0;
  width: 18px;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--marca-laranja);
  box-shadow: 0 0 10px var(--marca-laranja);
}

/* ─── Botão de tema (sol e lua) ───────────────────────────────────────────── */

.tema {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--borda);
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  box-shadow: var(--relevo);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color var(--rapido), transform var(--rapido);
}
@media (hover: hover) {
  .tema:hover {
    border-color: var(--marca-laranja);
    transform: translateY(-1px);
  }
}


.tema__astro {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.tema__sol,
.tema__lua {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: currentColor;
  /* `transform` em vez de `rotate` e `scale` separados: as propriedades
     individuais só existem a partir do Safari 14.1 e do Chrome 104, e num
     aparelho mais antigo seriam ignoradas, deixando os dois astros visíveis
     um em cima do outro. */
  transition:
    opacity var(--normal),
    transform var(--elastico);
  will-change: transform, opacity;
}

/* Escuro (padrão): mostra a lua, o sol está guardado girado. */
.tema__sol {
  color: var(--marca-laranja-claro);
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

.tema__lua {
  color: #cbd5e1;
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Claro: troca de astro. */
:root[data-tema='claro'] .tema__sol {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

:root[data-tema='claro'] .tema__lua {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

/* ─── Menu hambúrguer ─────────────────────────────────────────────────────── */

.hamburguer {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--borda);
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  box-shadow: var(--relevo);
  padding: 12px 11px;
  flex-direction: column;
  justify-content: space-between;
}

.hamburguer span {
  display: block;
  height: 2.5px;
  border-radius: var(--r-full);
  background: var(--texto);
  transition: translate var(--normal), rotate var(--normal), opacity var(--rapido), width var(--normal);
}

.hamburguer span:nth-child(1) {
  width: 100%;
}
.hamburguer span:nth-child(2) {
  width: 72%;
}
.hamburguer span:nth-child(3) {
  width: 88%;
}

.hamburguer[aria-expanded='true'] span:nth-child(1) {
  width: 100%;
  translate: 0 7px;
  rotate: 45deg;
}

.hamburguer[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.hamburguer[aria-expanded='true'] span:nth-child(3) {
  width: 100%;
  translate: 0 -7px;
  rotate: -45deg;
}

.menu-veu {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(3px);
  animation: surgir var(--normal) both;
}

@keyframes surgir {
  from {
    opacity: 0;
  }
}

@media (max-width: 820px) {
  .hamburguer {
    display: flex;
  }

  .topo__nav {
    position: fixed;
    inset: var(--altura-topo) 0 auto;
    z-index: 39;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e1);
    margin: 0;
    padding: var(--e4) var(--e4) var(--e6);
    background: linear-gradient(180deg, var(--fundo-alt), var(--fundo));
    border-bottom: 1px solid var(--borda);
    box-shadow: var(--sombra-lg);
    translate: 0 -110%;
    visibility: hidden;
    transition: translate var(--lento), visibility var(--lento);
  }

  .topo__nav.aberto {
    translate: 0 0;
    visibility: visible;
  }

  .nav__link {
    padding: var(--e4);
    border-radius: var(--r-md);
    text-align: left;
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    border: 1px solid transparent;
  }
  @media (hover: hover) {
    .nav__link:hover,
  .nav__link[aria-current='page'] {
      border-color: var(--borda);
      background: var(--superficie);
    }
  }


  .nav__link[aria-current='page']::after {
    left: auto;
    right: var(--e4);
    bottom: 50%;
    translate: 0 50%;
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
  }
}

/* Aviso do guarda de abertura, quando nem a recuperação automática resolveu. */
.preloader__socorro {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  margin-top: var(--e5);
  padding: var(--e4) var(--e5);
  border-radius: var(--r-lg);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  box-shadow: var(--sombra-lg);
  text-align: center;
  max-width: min(360px, 88vw);
  animation: subirSuave 400ms both;
}

.preloader__socorro p {
  font-weight: 600;
  color: var(--texto);
}

.preloader__socorro span {
  font-size: var(--texto-xs);
  color: var(--texto-fraco);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Cabeçalho flutuante

   Como o cabeçalho saiu do fluxo (é `fixed`), o conteúdo precisa começar
   abaixo dele por conta própria.
   ────────────────────────────────────────────────────────────────────────── */

#conteudo {
  padding-top: var(--altura-topo);
}

/* Links com ar de painel de TV: caixa alta, espaçados, com um traço aceso
   embaixo do item atual em vez de fundo preenchido. */
.nav__link {
  font-family: var(--fonte-display);
  font-size: var(--texto-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  background: none;
  padding: var(--e2) var(--e3);
  transition: color var(--rapido), text-shadow var(--normal);
}
@media (hover: hover) {
  .nav__link:hover {
    color: var(--marca-laranja-claro);
    background: none;
    text-shadow: 0 0 18px rgb(255 176 32 / 0.6);
  }
}


.nav__link[aria-current='page'] {
  color: var(--texto);
  background: none;
}

.nav__link[aria-current='page']::after {
  width: 60%;
  height: 2px;
  bottom: 0;
}

/* O botão de tema também perde a caixa: vira só o astro sobre o fundo. */
.tema {
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--texto-suave);
}
@media (hover: hover) {
  .tema:hover {
    border-color: transparent;
    background: rgb(128 128 128 / 0.12);
  }
}


.hamburguer {
  border-color: transparent;
  background: none;
  box-shadow: none;
}

.hamburguer[aria-expanded='true'] {
  background: rgb(128 128 128 / 0.12);
}

/* No celular o painel do menu continua sendo uma superfície, senão os links
   ficariam ilegíveis sobre o conteúdo. */
@media (max-width: 820px) {
  .topo__nav {
    inset-block-start: 0;
    padding-top: calc(var(--altura-topo) + var(--e3));
    background: linear-gradient(180deg, var(--fundo) 70%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 0;
  }

  .nav__link {
    font-size: var(--texto-base);
    letter-spacing: 0.1em;
  }
}

/* O conteúdo empurra o rodapé para baixo; o rodapé nunca encolhe. */
#conteudo {
  flex: 1 0 auto;
}

.rodape {
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Retorno ao toque

   Com os efeitos de `:hover` restritos a ponteiros que realmente têm hover, a
   tela de toque ficaria sem nenhuma reação ao encostar. `:active` cobre esse
   caso: dura só enquanto o dedo está pressionando, então nunca fica preso como
   o hover ficava.
   ────────────────────────────────────────────────────────────────────────── */

@media (hover: none) {
  .tema:active,
  .hamburguer:active,
  .nav__link:active,
  .rodape__links button:active {
    background: rgb(128 128 128 / 0.18);
  }

  .chip:active:not(:disabled),
  .ajuda:active:not(:disabled) {
    border-color: var(--marca-laranja);
    transform: scale(0.97);
  }

  .alternativa:active:not(:disabled) {
    border-color: var(--marca-laranja);
    background: linear-gradient(180deg, var(--superficie-3), var(--superficie-2));
  }

  .categoria:active,
  .cartao--interativo:active:not(:disabled),
  .ranking__linha:active {
    transform: scale(0.985);
  }

  /* O destaque do item atual do menu continua valendo; só o hover saiu. */
  .nav__link[aria-current='page'] {
    color: var(--texto);
  }
}

/* O ícone do tema não deve piscar de cor no toque: a troca de astro já é o
   retorno visual. */
@media (hover: none) {
  .tema:active .tema__sol,
  .tema:active .tema__lua {
    transition-duration: 0ms;
  }
}