/* Site público do enigmatrics.com.br (LNC-02, ADR-023). Sem script, sem cookie e sem recurso de fora:
   as fontes (Titan One e Nunito, licença OFL) e a arte (retratos e ícones de tools/art e tools/icons)
   moram em site/. A paleta é a da v9 (azul royal, ouro e as cores de raridade), para o site parecer o jogo. */
@font-face {
  font-family: "Titan One";
  src: url("/fontes/titan-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fontes/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --abismo: #070f26;
  --fundo: #0b193d;
  --royal: #12285e;
  --painel: #173273;
  --cartao: #1f3f8a;
  --bisel: #3a68d1;
  --tinta: #060b19;
  --texto: #f2f6ff;
  --suave: #b7c6ea;
  --ouro: #ffcc29;
  --ouro-claro: #fff380;
  --ouro-sombra: #9e5000;
  --ciano: #38f2ff;
  --papel: #ffffff;
  --papel-texto: #1b2340;
  --papel-suave: #55607f;
  --papel-borda: #dfe5f3;
  --papel-marca: #2952ad;
  --comum: #7a98c9;
  --raro: #ffae19;
  --epico: #c84bff;
  --lendario: #38f2ff;
  --display: "Titan One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --corpo: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raio: 22px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--corpo);
  font-weight: 700;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
}
img { max-width: 100%; display: block; }
a { color: var(--ciano); }
.largura { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* Cabeçalho comum a todas as páginas */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(7, 15, 38, .92);
  border-bottom: 2px solid var(--tinta);
  box-shadow: 0 2px 0 rgba(58, 104, 209, .35);
}
.topo .largura { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-top: .7rem; padding-bottom: .7rem; }
.marca { display: flex; align-items: center; gap: .5rem; margin-right: auto; color: var(--texto); text-decoration: none; font-family: var(--display); font-size: 1.2rem; letter-spacing: .02em; }
.marca img { width: 30px; height: 30px; }
.topo nav { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.topo nav a { color: var(--suave); text-decoration: none; font-weight: 800; font-size: .95rem; }
.topo nav a:hover { color: var(--texto); }
.topo nav a[aria-current="page"] { color: var(--ouro); }

/* Botões "massudos" como os da v9: degradê, contorno escuro e sombra dura embaixo */
.botao {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.4rem;
  border: 3px solid var(--tinta);
  border-radius: 16px;
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: .02em;
  text-decoration: none;
  color: #2b1400;
  background: linear-gradient(180deg, var(--ouro-claro), var(--ouro) 55%, #f08c00);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 5px 0 var(--ouro-sombra), 0 8px 18px rgba(0, 0, 0, .35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 2px 0 var(--ouro-sombra); }
.botao.azul { color: var(--texto); background: linear-gradient(180deg, #5c8cff, var(--papel-marca) 60%, #1a3a85); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 5px 0 #0e1f4d, 0 8px 18px rgba(0, 0, 0, .35); }
.botao img { width: 26px; height: 26px; }

/* Selo das lojas: ainda não é link, porque o jogo não está publicado */
.lojas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.loja {
  display: flex;
  flex-direction: column;
  padding: .55rem 1.1rem;
  border: 2px solid var(--bisel);
  border-radius: 14px;
  background: rgba(7, 15, 38, .6);
  line-height: 1.2;
}
.loja small { color: var(--suave); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.loja strong { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }

/* Abertura */
.abertura {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 75% 45%, rgba(56, 242, 255, .18), transparent 60%),
    radial-gradient(50rem 30rem at 10% 0%, rgba(200, 75, 255, .22), transparent 60%),
    linear-gradient(180deg, var(--royal), var(--fundo));
}
/* Grade 4x4 bem de leve no fundo, lembrando a arena */
.abertura::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(58, 104, 209, .16) 2px, transparent 2px),
    linear-gradient(90deg, rgba(58, 104, 209, .16) 2px, transparent 2px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
  pointer-events: none;
}
.abertura .largura {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-top: 3rem;
  padding-bottom: 4.5rem;
}
.selo {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(255, 204, 41, .14);
  border: 2px solid rgba(255, 204, 41, .5);
  color: var(--ouro);
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.titulo-jogo {
  margin: .4rem 0 .8rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 8.5vw, 3.7rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ouro);
  text-shadow: 0 3px 0 var(--ouro-sombra), 0 6px 0 var(--tinta), 0 12px 24px rgba(0, 0, 0, .45);
}
.titulo-jogo span { color: var(--texto); white-space: nowrap; text-shadow: 0 3px 0 #1a3a85, 0 6px 0 var(--tinta), 0 12px 24px rgba(0, 0, 0, .45); }
/* Marca da Enigmatrics em cima do nome do jogo */
.logo-jogo { display: flex; align-items: center; gap: .6rem; margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: .08em; text-transform: uppercase; color: var(--texto); text-shadow: 0 3px 0 var(--tinta); }
.logo-jogo img { width: 48px; height: 48px; }
.abertura .selo { margin-top: 1.75rem; }
.abertura p.chamada { font-size: 1.15rem; color: var(--suave); margin: 0; }
.abertura .acoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

/* Leque de cartas da abertura */
.leque { position: relative; height: 260px; max-width: 420px; width: 100%; margin: 0 auto; }
.leque .carta { position: absolute; top: 50%; left: 50%; width: 40%; }
.leque .carta:nth-child(1) { transform: translate(-115%, -42%) rotate(-14deg); }
.leque .carta:nth-child(2) { transform: translate(-50%, -58%) rotate(0deg); z-index: 2; width: 46%; }
.leque .carta:nth-child(3) { transform: translate(15%, -42%) rotate(14deg); }

/* Carta de gênio: moldura na cor da raridade */
.carta {
  --cor: var(--comum);
  padding: 6px;
  border: 3px solid var(--tinta);
  border-radius: var(--raio);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 85%, #fff), var(--cor) 45%, color-mix(in srgb, var(--cor) 55%, #000));
  box-shadow: 0 6px 0 var(--tinta), 0 14px 28px rgba(0, 0, 0, .45);
}
.carta img { border-radius: 16px; width: 100%; height: auto; aspect-ratio: 1; }
.carta.raro { --cor: var(--raro); }
.carta.epico { --cor: var(--epico); }
.carta.lendario { --cor: var(--lendario); }

@media (prefers-reduced-motion: no-preference) {
  .leque .carta { animation: flutua 5s ease-in-out infinite; }
  .leque .carta:nth-child(2) { animation-delay: -1.6s; }
  .leque .carta:nth-child(3) { animation-delay: -3.2s; }
  @keyframes flutua { 50% { margin-top: -10px; } }
}

/* Seções */
.secao { padding: 4rem 0; }
.secao.escura { background: var(--abismo); }
.secao.clara { background: var(--papel); color: var(--papel-texto); }
.secao h2 {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: .01em;
}
.secao:not(.clara) h2 { text-shadow: 0 3px 0 var(--tinta); }
.secao .lead { margin: 0 0 2rem; color: var(--suave); font-size: 1.1rem; }
.secao.clara .lead { color: var(--papel-suave); }

/* Passos de "Como se joga" */
.passos { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: passo; list-style: none; margin: 0; padding: 0; }
.passos li { margin: 0; }
.passo {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  border: 3px solid var(--tinta);
  border-radius: var(--raio);
  background: linear-gradient(180deg, var(--cartao), var(--painel));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), 0 6px 0 var(--tinta);
}
.passo img { width: 64px; height: 64px; margin-bottom: .6rem; }
.passo h3 { margin: 0 0 .3rem; font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--ouro); }
.passo p { margin: 0; color: var(--suave); }
.passo::after {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, .1);
}

/* Galeria dos gênios */
.genios { display: grid; gap: 1rem .75rem; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.genios li { margin: 0; }
.genios .carta { transition: transform .15s ease; }
.genios .carta:hover { transform: translateY(-4px) rotate(-1deg); }
.genios h3 { margin: .7rem 0 0; font-family: var(--display); font-weight: 400; font-size: 1.05rem; line-height: 1.2; }
.genios p { margin: .1rem 0 0; color: var(--suave); font-size: .85rem; line-height: 1.35; }
.raridades { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1.75rem; padding: 0; list-style: none; font-size: .9rem; color: var(--suave); }
.raridades li { display: flex; align-items: center; gap: .4rem; }
.raridades i { width: 14px; height: 14px; border-radius: 5px; border: 2px solid var(--tinta); }
.nota { margin: 1.75rem 0 0; color: var(--suave); }

/* Jogo limpo: cartões claros e diretos */
.vantagens { display: grid; gap: 1rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.vantagens li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--papel-borda);
  border-radius: 18px;
  background: #f6f8fe;
}
.vantagens img { width: 48px; height: 48px; flex: none; }
.vantagens strong { display: block; font-size: 1.08rem; font-weight: 900; color: var(--papel-texto); }
.vantagens span { color: var(--papel-suave); }

/* Faixa de contato */
.contato {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: 2rem 1.5rem;
  border: 3px solid var(--tinta);
  border-radius: 28px;
  background:
    radial-gradient(30rem 14rem at 100% 0%, rgba(255, 204, 41, .22), transparent 70%),
    linear-gradient(135deg, var(--cartao), var(--royal));
  box-shadow: 0 6px 0 var(--tinta);
}
.contato h2 { margin-bottom: .3rem; }
.contato p { margin: 0; color: var(--suave); }

/* Rodapé */
.rodape { background: var(--abismo); color: var(--suave); font-size: .9rem; border-top: 2px solid var(--tinta); }
.rodape .largura { padding-top: 2rem; padding-bottom: 2.5rem; }
.rodape p { margin: .3rem 0; }
.rodape a { color: var(--texto); }

/* Páginas de texto (privacidade, termos, exclusão): folha clara para leitura longa */
body.doc { background: linear-gradient(180deg, var(--royal), var(--fundo) 22rem); }
body.doc main {
  max-width: 48rem;
  margin: 2rem auto 3rem;
  padding: 2rem 1.25rem 2.5rem;
  border: 3px solid var(--tinta);
  border-radius: 24px;
  background: var(--papel);
  color: var(--papel-texto);
  font-weight: 600;
  box-shadow: 0 6px 0 var(--tinta), 0 20px 40px rgba(0, 0, 0, .35);
}
body.doc main a { color: var(--papel-marca); }
body.doc h1 { margin: 0 0 .5rem; font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 5vw, 2.2rem); line-height: 1.15; color: var(--papel-texto); }
body.doc h2 { margin: 2rem 0 .5rem; font-size: 1.3rem; font-weight: 900; }
body.doc h3 { margin: 1.25rem 0 .25rem; font-size: 1.08rem; font-weight: 900; }
body.doc strong { font-weight: 900; }
.destaque { background: #eef2ff; border-left: 5px solid var(--papel-marca); border-radius: 12px; padding: 1.1rem 1.25rem; margin: 1rem 0 1.5rem; }
.destaque p:first-child { margin-top: 0; }
.destaque p:last-child { margin-bottom: 0; }
.vigencia { color: var(--papel-suave); font-size: .95rem; }
.tabela { overflow-x: auto; margin: .75rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .6rem; border-bottom: 1px solid var(--papel-borda); }
th { font-weight: 900; background: #f6f8fe; }
li { margin: .3rem 0; }
code { font-size: .95em; background: #eef2ff; padding: .05em .35em; border-radius: 6px; }

@media (min-width: 40rem) {
  .genios { grid-template-columns: repeat(3, 1fr); }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .vantagens { grid-template-columns: repeat(2, 1fr); }
  body.doc main { padding: 2.5rem 2.75rem 3rem; }
  .leque { height: 380px; }
}
@media (min-width: 60rem) {
  .abertura .largura { grid-template-columns: 1.35fr 1fr; padding-top: 4.5rem; padding-bottom: 6rem; }
  .genios { grid-template-columns: repeat(6, 1fr); }
  .contato { grid-template-columns: 1fr auto; padding: 2.5rem 3rem; }
}