/* ══════════════════════════════════════════════════════════════
   GATE TO HEAVENS — folha de estilo do site de lançamento
   Paleta extraída da arte oficial da JYSTech (2003-2004).
   Lei visual: "você está no céu, não num continente."
   ══════════════════════════════════════════════════════════════ */

/* EB Garamond (SIL OFL) — auto-hospedada: a CSP do servidor é default-src 'self',
   então fonte externa ou data: URI seria bloqueada.
   NOTA: a Cormorant Garamond foi descartada — no subset latino do Google os acentos
   agudo e circunflexo ficam soltos e deslocados ("Você está no céu" sai quebrado),
   e metade do público lê português. */
@font-face{
  font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/ebg-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/ebg-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/ebg-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme:dark;

  /* profundidades — o azul-petróleo da arte original */
  --abismo:#04101a;
  --noite:#061a24;
  --profundo:#0a2530;
  --agua:#12384a;
  --teal:#17475a;

  /* acentos frios */
  --piscina:#5a95b8; /* 5.9:1 — o #3c7292 anterior dava 3.67:1 */
  --runico:#4a7ca8;
  --gelo:#8fbdd4;

  /* acentos quentes — tocha, âmbar, ouro gravado */
  --ouro:#daaa78;
  --ambar:#e6b06f;
  --brasa:#b36940;
  --creme:#e4d8c7;

  /* neutros */
  --nuvem:#eef3f6;
  --texto:#c8dae4;
  --suave:#8aa4b3;
  --tenue:#7b93a2;   /* 5.6:1 — o #5d7787 anterior dava 4.07:1 */

  --borda:rgba(143,189,212,.14);
  --borda-forte:rgba(143,189,212,.26);

  --serif:'EB Garamond','Iowan Old Style','Palatino Linotype',Palatino,'Hoefler Text',Constantia,Georgia,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  --larg:1180px;
  --sombra-arte:
    0 0 0 1px rgba(143,189,212,.10),
    0 2px 4px rgba(0,0,0,.30),
    0 12px 32px rgba(0,0,0,.36),
    0 40px 90px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
section[id],main[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--texto);
  background:var(--abismo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ambar);text-decoration:none}
a:hover{color:var(--creme)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;line-height:1.06;margin:0;text-wrap:balance}
p{margin:0 0 1.1em}
em{font-style:italic}

.pular{position:absolute;left:-9999px;top:0;background:var(--ouro);color:var(--abismo);padding:.7rem 1.1rem;z-index:100}
.pular:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:2px}

/* ─────────── botões ─────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  padding:.78rem 1.5rem;border-radius:2px;border:1px solid transparent;
  cursor:pointer;transition:all .25s var(--ease);
  white-space:normal;text-align:center;max-width:100%;
}
.btn-grande{padding:1rem 2rem;font-size:1.02rem}
.btn-primario{color:#0a1a12;background:var(--ouro)}
.btn-primario:hover{background:var(--ambar);color:#0a1a12}
.btn-fantasma{color:var(--texto);border-color:var(--borda-forte);background:rgba(143,189,212,.04)}
.btn-fantasma:hover{color:var(--nuvem);border-color:var(--gelo);background:rgba(143,189,212,.10);transform:translateY(-2px)}

/* ─────────── cabeçalho ─────────── */
.topo{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.6rem;
  padding:.85rem clamp(1rem,4vw,2.4rem);
  background:rgba(4,16,26,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.topo.preso{border-bottom-color:var(--borda);background:rgba(4,16,26,.9)}
.marca{flex:0 0 auto}
.marca img{width:auto;height:36px;opacity:1;filter:brightness(1.9) contrast(.95) drop-shadow(0 1px 6px rgba(0,0,0,.6))}
.nav-links{display:flex;gap:1.7rem;margin-left:auto;font-size:.9rem}
.nav-links a{color:var(--suave);letter-spacing:.02em;position:relative;padding:.2rem 0}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--ouro);transition:right .3s var(--ease)}
.nav-links a:hover{color:var(--nuvem)}
.nav-links a:hover::after{right:0}
.nav-acoes{display:flex;align-items:center;gap:.7rem}
.btn-discord{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:600;
  color:var(--texto);padding:.55rem .9rem;border:1px solid var(--borda);border-radius:2px;transition:all .25s
}
.btn-discord:hover{color:#fff;background:#5865f2;border-color:#5865f2}
.btn-download{
  color:#07131b;background:var(--ouro);border-color:var(--ouro);
  box-shadow:0 0 0 1px rgba(230,176,111,.18),0 8px 24px rgba(0,0,0,.22)
}
.btn-download:hover{
  color:#07131b;background:var(--creme);border-color:var(--creme);transform:translateY(-1px)
}
.ico-discord{
  width:17px;height:13px;flex:0 0 auto;background:currentColor;
  -webkit-mask:radial-gradient(circle at 30% 45%,#000 2.2px,transparent 2.3px),radial-gradient(circle at 70% 45%,#000 2.2px,transparent 2.3px),radial-gradient(ellipse 52% 50% at 50% 50%,#000 99%,transparent);
  mask:radial-gradient(circle at 30% 45%,#000 2.2px,transparent 2.3px),radial-gradient(circle at 70% 45%,#000 2.2px,transparent 2.3px),radial-gradient(ellipse 52% 50% at 50% 50%,#000 99%,transparent);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
@media (max-width:900px){.nav-links{display:none}.marca img{height:28px}}

/* Os quatro botoes da dobra sao UM conjunto, e precisam ler como um.
   Estavam em 218x61, 176x61, 230x47 e 231x47 -- quatro larguras e duas
   alturas. Isto ja tinha sido corrigido no @media de 560px e nunca no
   desktop, que e onde a diferenca aparece mais, porque ali eles ficam lado
   a lado e a comparacao e imediata. */
.hero-acoes .btn{min-width:15rem;min-height:3.85rem}

/* ─── hero: os dois caminhos rapidos ───
   .hero-oauth nao tinha regra NENHUMA. Eram dois <form>, e form e' elemento
   de bloco: os botoes empilhavam um sobre o outro e ficavam centrados
   embaixo do par principal, com cara de menu que abriu por cima da arte --
   ainda mais com o do Google sendo branco solido sobre fundo escuro.

   Agora e' UMA linha, na mesma direcao do par de cima.

   E menores de proposito. Eles fazem a MESMA coisa que "Create your
   account", so que mais rapido; do mesmo tamanho virariam um terceiro e um
   quarto botao disputando a mesma decisao, e quatro pesos iguais e' o mesmo
   que nenhum peso. As cores de marca ficam: e' por elas que o olho acha o
   caminho que ja conhece. */
.hero-oauth{
  display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;
  margin-top:1.1rem;
}
/* min-height sozinho nao encolhe nada: a altura de .btn vem do PADDING
   (.78rem em cima e embaixo). Entao o padding e' que cai aqui, junto com o
   corpo da letra. Sem min-width: a largura passa a ser a do conteudo, e o
   rotulo curto ("Google", "Discord") faz o resto -- com o icone ao lado e o
   "or in one click" logo acima, ninguem precisa da frase inteira. */
.hero-oauth .btn{
  min-width:0;min-height:0;
  padding:.52rem 1.15rem;font-size:.84rem;font-weight:600;
}

/* O "or" que diz que isto e' atalho, e nao mais uma opcao. Linha propria e
   discreta: se disputasse atencao, teria trocado um problema por outro. */
.hero-ou{
  margin:1.4rem 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tenue);
}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:6rem clamp(1rem,5vw,2rem) 5rem;
  overflow:hidden;isolation:isolate;
}
.hero-fundo{position:absolute;inset:0;z-index:-2}
.hero-arte{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;
  opacity:1;transform:scale(1.05);filter:saturate(1.12) contrast(1.1) brightness(1.16)
}
/* A cena do templo tem o portal branco bem no centro, exatamente onde o
   titulo cai. Por isso o veu escurece o MEIO e deixa as bordas respirarem —
   e as tochas e as guardias continuam visiveis dos dois lados. */
.hero-veu{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 44% 34% at 50% 41%,rgba(4,16,26,.72),rgba(4,16,26,.30) 64%,transparent 100%),
    linear-gradient(180deg,rgba(4,16,26,.46) 0%,rgba(4,16,26,.10) 22%,rgba(4,16,26,.42) 68%,var(--abismo) 100%);
}
.hero-nuvem{
  position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(ellipse 46% 26% at 18% 74%,rgba(143,189,212,.16),transparent 70%),
    radial-gradient(ellipse 40% 22% at 82% 66%,rgba(218,170,120,.12),transparent 70%);
}
.hero-conteudo{position:relative;max-width:830px;text-align:center;z-index:1}
/* legibilidade sobre a arte: sombra de texto no que é cor sólida,
   drop-shadow no título (text-shadow vaza através de background-clip:text) */
.canonica,.canonica-fonte,.hero-sub,.hero-nota,.contagem-rotulo,.contagem-data{
  text-shadow:0 1px 3px rgba(4,16,26,.95),0 2px 14px rgba(4,16,26,.9),0 0 40px rgba(4,16,26,.7)}
.hero-titulo{filter:drop-shadow(0 2px 5px rgba(4,16,26,.95)) drop-shadow(0 6px 26px rgba(4,16,26,.85))}

.canonica{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.04rem,1.8vw,1.26rem);
  line-height:1.85;color:var(--gelo);opacity:.82;margin:0 0 .7rem;letter-spacing:.01em
}
.canonica em{color:var(--ambar);font-style:italic}
.canonica-fonte{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--suave);opacity:.85;margin:0 0 2.6rem
}
.hero-titulo{margin:0 0 1.5rem;font-size:clamp(2.6rem,7.6vw,5.4rem);line-height:.98}
.hero-titulo .linha-1{display:block;color:var(--nuvem)}
.hero-titulo .linha-2{
  display:block;font-style:italic;
  background:linear-gradient(96deg,#f4dcae,var(--ouro) 40%,#c08c4c 78%,#f0cf95);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{max-width:53ch;margin:0 auto 2.8rem;color:var(--suave);font-size:clamp(1rem,1.7vw,1.13rem)}
.hero-acoes{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}
.hero-nota{
  margin:1.5rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue)
}

/* contagem */
.contagem{margin:0 0 2.6rem}
.contagem-rotulo{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 1rem
}
.contagem-blocos{display:flex;gap:clamp(.6rem,2.6vw,1.6rem);justify-content:center}
.bloco{
  min-width:clamp(62px,13vw,96px);padding:.85rem .5rem .6rem;
  border:1px solid var(--borda);border-radius:2px;
  background:linear-gradient(180deg,rgba(143,189,212,.07),rgba(143,189,212,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
.bloco span{
  display:block;font-family:var(--mono);font-size:clamp(1.5rem,4.2vw,2.3rem);
  font-variant-numeric:tabular-nums;color:var(--creme);line-height:1;font-weight:500
}
.bloco small{
  display:block;margin-top:.45rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)
}
.contagem-data{margin:1rem 0 0;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;color:var(--suave)}
.contagem-aberto{
  margin:1rem 0 0;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ambar)
}

.rolar{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);width:22px;height:34px;border:1px solid var(--borda-forte);border-radius:11px}
.rolar span{position:absolute;left:50%;top:7px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--ouro);animation:rolar 2s var(--ease) infinite}
@keyframes rolar{0%{opacity:0;transform:translateY(0)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(13px)}}
@media (prefers-reduced-motion:reduce){.rolar span{animation:none}}

/* ═══════════════ PROVAS ═══════════════ */
.provas{padding:0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);background:linear-gradient(180deg,rgba(23,71,90,.16),transparent)}
.provas-lista{
  max-width:var(--larg);margin:0 auto;padding:2.4rem clamp(1rem,4vw,2rem);
  list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem
}
.provas-lista li{text-align:center}
.provas-lista .num{
  display:block;font-family:var(--mono);font-size:clamp(1.35rem,2.9vw,2rem);font-weight:500;
  color:var(--ambar);font-variant-numeric:tabular-nums;line-height:1.1;margin-bottom:.4rem
}
.provas-lista span{display:block;font-size:.79rem;line-height:1.45;color:var(--suave);max-width:22ch;margin:0 auto}
@media (max-width:860px){.provas-lista{grid-template-columns:repeat(2,1fr);gap:1.8rem}.provas-lista li:last-child{grid-column:1/-1}}

/* ═══════════════ SEÇÕES — comuns ═══════════════ */
section{padding:clamp(4.5rem,10vw,8.5rem) clamp(1rem,5vw,2rem)}
.secao-topo{max-width:760px;margin:0 auto clamp(3rem,6vw,4.5rem);text-align:center}
.olho{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--piscina);margin:0 0 1.1rem
}
.titulo-grande{font-size:clamp(1.95rem,4.8vw,3.3rem);margin-bottom:1.2rem;color:var(--nuvem)}
.titulo-grande em{
  display:block;font-style:italic;
  background:linear-gradient(96deg,#f4dcae,var(--ouro) 45%,#c08c4c);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.titulo-imenso{font-size:clamp(2.4rem,7.2vw,4.9rem);line-height:.99;margin-bottom:1.3rem;color:var(--nuvem)}
.lead{font-size:clamp(1.02rem,1.8vw,1.16rem);color:var(--suave);max-width:60ch;margin-left:auto;margin-right:auto}

/* ═══════════════ O CÉU (seção CLARA — a virada) ═══════════════ */
.ceu{
  background:
    radial-gradient(ellipse 60% 50% at 78% 30%,rgba(255,255,255,.75),transparent 70%),
    linear-gradient(170deg,#cfe2ee 0%,#e6eff5 42%,#f4f7f9 100%);
  color:#123040;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center;
  max-width:100%;position:relative
}
.ceu::before,.ceu::after{content:'';position:absolute;left:0;right:0;height:110px;pointer-events:none}
.ceu::before{top:0;background:linear-gradient(180deg,var(--abismo),transparent)}
.ceu::after{bottom:0;background:linear-gradient(0deg,var(--abismo),transparent)}
.ceu-texto{max-width:56ch;justify-self:end;position:relative;z-index:1}
.ceu .olho{color:#2b6382}
.ceu .titulo-grande{color:#0e2c3c}
.ceu .titulo-grande em{background:linear-gradient(96deg,#a9762f,#c8922f 50%,#8a5f22);-webkit-background-clip:text;background-clip:text;color:transparent}
.ceu .lead{color:#2c5468;margin-left:0}
.ceu p{color:#28495a}
.ceu b{color:#0e2c3c}
.marcadores{
  font-family:var(--mono);font-size:.83rem;line-height:2;letter-spacing:.02em;
  color:#2b6382!important;border-left:2px solid rgba(168,118,47,.45);padding-left:1.1rem;margin:1.8rem 0
}
.ceu-arte{margin:0;position:relative;z-index:1;max-width:620px}
.ceu-arte img{border-radius:3px;box-shadow:0 2px 6px rgba(18,48,64,.14),0 20px 50px rgba(18,48,64,.20),0 50px 100px rgba(18,48,64,.12)}
.ceu-arte figcaption{margin-top:.9rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:#456b80;line-height:1.6}
@media (max-width:960px){.ceu{grid-template-columns:1fr}.ceu-texto{justify-self:start}}

/* ═══════════════ FAIXA CINEMATOGRÁFICA ═══════════════ */
.faixa{
  margin:0;padding:0;position:relative;
  background:var(--abismo);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)
}
.faixa img{
  width:100%;height:clamp(300px,38vw,470px);object-fit:cover;object-position:center 42%;
  filter:saturate(1.02)
}
.faixa figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.2rem,5vw,3rem) clamp(1.3rem,3vw,2rem);
  background:linear-gradient(0deg,rgba(4,16,26,.94) 12%,rgba(4,16,26,.55) 55%,transparent);
  display:flex;flex-direction:column;gap:.5rem
}
.faixa-sel{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)
}
.faixa-txt{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2.2vw,1.42rem);
  line-height:1.45;color:var(--nuvem);max-width:58ch;
  text-shadow:0 2px 12px rgba(4,16,26,.9)
}

/* ═══════════════ LINHA DO TEMPO ═══════════════ */
.historia{background:linear-gradient(180deg,var(--abismo),var(--noite) 50%,var(--abismo))}
.linha{position:relative;max-width:var(--larg);margin:0 auto;padding-left:clamp(3rem,7vw,7rem)}
.rail{
  position:absolute;left:clamp(.9rem,2.4vw,2.4rem);top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--borda-forte) 6%,var(--borda-forte) 94%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 92%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 7%,#000 92%,transparent);
}
.feixe{
  position:absolute;left:0;top:0;width:2px;height:0;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--piscina) 8%,var(--ouro) 72%,#f4dcae);
  box-shadow:0 0 14px rgba(218,170,120,.45);
  transition:none
}
.marco{position:relative;display:grid;grid-template-columns:clamp(5.5rem,11vw,10rem) 1fr;gap:clamp(1.2rem,3vw,2.6rem);padding-bottom:clamp(3.5rem,8vw,6rem)}
.marco-ano{position:sticky;top:100px;align-self:start;padding-top:.2rem}
.marco-ano span{
  display:block;font-family:var(--mono);font-size:clamp(1.05rem,2.3vw,1.5rem);
  color:var(--gelo);letter-spacing:.02em;font-variant-numeric:tabular-nums
}
.marco-ano small{display:block;font-family:var(--mono);font-size:.72rem;color:var(--tenue);margin-top:.15rem}
.marco-ano::before{
  content:'';position:absolute;left:calc(-1 * clamp(3rem,7vw,7rem) + clamp(.9rem,2.4vw,2.4rem) - 4px);
  top:.55rem;width:10px;height:10px;border-radius:50%;
  background:var(--noite);border:2px solid var(--borda-forte);transition:all .4s var(--ease)
}
.marco.ativo .marco-ano::before{border-color:var(--ouro);box-shadow:0 0 0 4px rgba(218,170,120,.13),0 0 16px rgba(218,170,120,.5)}
.marco.ativo .marco-ano span{color:var(--creme)}
.marco-corpo{max-width:64ch}
.marco-corpo h3{font-size:clamp(1.34rem,2.8vw,1.95rem);color:var(--nuvem);margin-bottom:.85rem}
.marco-corpo p{color:var(--suave)}
.marco-corpo em{color:var(--gelo)}
.marco-escuro .marco-corpo h3{color:#c6a5a5}
.marco-luz .marco-corpo h3{
  background:linear-gradient(96deg,#f4dcae,var(--ouro) 50%,#c08c4c);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
/* o último marco não precisa do vão de 6rem embaixo */
.marco-final{padding-bottom:0}
.marco-final .marco-corpo h3{font-size:clamp(1.8rem,3.9vw,2.8rem)}
.marco-final .btn{margin-top:.7rem}

.destaque-num{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin:1.6rem 0;padding:1.1rem 1.4rem;
  border-left:2px solid var(--ouro);background:linear-gradient(90deg,rgba(218,170,120,.09),transparent 80%)
}
.destaque-num b{font-family:var(--mono);font-size:clamp(1.5rem,3.4vw,2.1rem);color:var(--ambar);font-variant-numeric:tabular-nums;line-height:1}
.destaque-num span{font-size:.88rem;color:var(--suave);max-width:34ch}

.marco-img{margin:1.7rem 0 0}
.marco-img img{border-radius:3px;box-shadow:var(--sombra-arte)}
.marco-img figcaption{margin-top:.8rem;font-family:var(--mono);font-size:.72rem;color:var(--tenue);line-height:1.6}

.citacao{
  margin:1.7rem 0;padding:1.5rem 1.7rem;
  border:1px solid var(--borda);border-left:2px solid var(--brasa);
  background:linear-gradient(120deg,rgba(179,105,64,.09),rgba(6,26,36,.4))
}
.citacao p{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.14rem,2.4vw,1.48rem);
  line-height:1.45;color:var(--creme);margin:0 0 .9rem
}
.citacao cite{font-family:var(--mono);font-size:.72rem;font-style:normal;letter-spacing:.08em;color:var(--tenue)}

.lista-prova{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem}
.lista-prova li{display:flex;align-items:baseline;gap:.9rem;padding-bottom:.7rem;border-bottom:1px solid var(--borda)}
.lista-prova li b{font-family:var(--mono);font-size:.98rem;color:var(--ambar);flex:0 0 auto;min-width:8.5rem;font-variant-numeric:tabular-nums}
.lista-prova li span{font-size:.9rem;color:var(--suave)}
.lista-prova li span b{display:inline;min-width:0;font-size:inherit}

@media (max-width:760px){
  .marco{grid-template-columns:1fr;gap:.5rem}
  .marco-ano{position:static}
  .marco-ano::before{left:calc(-1 * clamp(3rem,7vw,7rem) + clamp(.9rem,2.4vw,2.4rem) - 4px);top:.5rem}
}

/* ═══════════════ PROMESSA ═══════════════ */
.promessa{background:var(--abismo);border-top:1px solid var(--borda)}
.grade-promessa{
  max-width:var(--larg);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem
}
.cartao-p{
  padding:1.9rem 1.7rem;border:1px solid var(--borda);border-radius:3px;
  background:linear-gradient(165deg,rgba(23,71,90,.20),rgba(6,26,36,.45));
  transition:border-color .35s var(--ease),transform .35s var(--ease)
}
.cartao-p:hover{border-color:var(--borda-forte);transform:translateY(-3px)}
.medo{
  font-family:var(--serif);font-style:italic;font-size:1.26rem;color:#d3b0a4;
  margin:0 0 1rem;padding-bottom:1rem;border-bottom:1px solid var(--borda)
}
.resposta{font-size:.94rem;color:var(--suave);margin-bottom:.9rem}
.resposta b{color:var(--creme);font-weight:600}
.link-prova{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em}

/* ═══════════════ SONHO ═══════════════ */
.sonho{
  background:
    radial-gradient(ellipse 65% 50% at 50% 0%,rgba(60,114,146,.20),transparent 65%),
    linear-gradient(180deg,var(--abismo),#03090f);
  border-top:1px solid var(--borda);text-align:center
}
.sonho-conteudo{max-width:var(--larg);margin:0 auto}
.sonho .titulo-imenso{
  background:linear-gradient(96deg,#f4dcae,var(--ouro) 42%,#c08c4c 72%,#f0cf95);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.sonho-lead{font-size:clamp(1.05rem,2vw,1.24rem);color:var(--suave);max-width:56ch;margin:0 auto 3.6rem}
.sonho-grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2.4rem 2.2rem;
  text-align:left;margin-bottom:3.4rem
}
.sonho-grade h3{font-size:1.32rem;color:var(--creme);margin-bottom:.6rem;padding-top:1rem;border-top:1px solid var(--borda-forte)}
.sonho-grade p{font-size:.92rem;color:var(--suave);margin:0}
.sonho-fecho{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.5vw,1.56rem);
  line-height:1.5;color:var(--gelo);max-width:52ch;margin:0 auto
}

/* ─────────── olho do hero: o sonho, antes de tudo ─────────── */
.olho-hero{
  color:var(--ouro);font-size:.78rem;letter-spacing:.34em;margin-bottom:1.6rem;
  text-shadow:0 1px 3px rgba(4,16,26,.9)
}

/* ─────────── epígrafe (a frase canônica de 2003) ─────────── */
.epigrafe{
  margin:0 0 2rem;padding:0 0 0 1.3rem;border-left:2px solid rgba(168,118,47,.4)
}
.epigrafe p{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.06rem,2vw,1.3rem);
  line-height:1.75;color:#2c5468;margin:0 0 .5rem
}
.epigrafe em{color:#a9762f}
.epigrafe cite{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  font-style:normal;color:#456b80
}

/* ─────────── número com fonte clicável ─────────── */
.destaque-link{text-decoration:none;transition:border-color .3s,background .3s}
.destaque-link:hover{border-left-color:var(--ambar);background:linear-gradient(90deg,rgba(218,170,120,.16),transparent 80%)}
.destaque-link:hover span{color:var(--texto)}

/* ═══════════════ EVENTO DE MUNDO ═══════════════ */
.evento{
  background:
    radial-gradient(ellipse 70% 55% at 50% 12%,rgba(179,105,64,.16),transparent 62%),
    linear-gradient(180deg,#03090f,var(--abismo));
  border-top:1px solid var(--borda)
}
.evento-conteudo{max-width:830px;margin:0 auto}
.evento .titulo-grande{margin-bottom:2.4rem;text-align:center}
.evento .titulo-grande span{display:inline-block}  /* não quebra frase no meio */
.evento .olho{text-align:center;color:var(--brasa)}
.evento-texto p{font-size:clamp(1.02rem,1.9vw,1.14rem);color:var(--suave)}
.evento-texto b{color:var(--creme)}
.ev-virada{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,3vw,1.9rem)!important;line-height:1.35;
  color:#e0a882!important;margin:2rem 0;text-align:center
}
.ev-virada em{color:var(--ambar);font-style:italic}
.evento-ramos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin:2.4rem 0
}
.ramo{padding:1.5rem 1.4rem;border:1px solid var(--borda);border-radius:3px}
.ramo h3{font-size:1.2rem;margin-bottom:.6rem}
.ramo p{font-size:.92rem;margin:0}
.ramo-perde{background:linear-gradient(160deg,rgba(120,45,30,.18),rgba(6,26,36,.4));border-color:rgba(179,105,64,.3)}
.ramo-perde h3{color:#d8a08c}
.ramo-ganha{background:linear-gradient(160deg,rgba(218,170,120,.13),rgba(6,26,36,.4));border-color:rgba(218,170,120,.3)}
.ramo-ganha h3{color:var(--ambar)}
.ev-fecho{
  font-family:var(--mono);font-size:.9rem!important;line-height:2;letter-spacing:.02em;
  color:var(--gelo)!important;text-align:center;padding-top:1.6rem;border-top:1px solid var(--borda)
}
.fecho .lead{margin-bottom:0}

/* ═══════════════ CLASSES ═══════════════ */
.classes{background:var(--abismo)}
.galeria{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:720px){.galeria{grid-template-columns:repeat(4,1fr)}}
.galeria figure{margin:0;overflow:hidden;border-radius:3px;border:1px solid var(--borda);background:var(--noite)}
.galeria img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .7s var(--ease),filter .5s;filter:saturate(.92) brightness(.92)
}
.galeria figure:hover img{transform:scale(1.07);filter:saturate(1.05) brightness(1)}

.caminhos{
  list-style:none;padding:0;max-width:var(--larg);margin:0 auto clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1.6rem
}
.caminhos li{padding-top:1.2rem;border-top:1px solid var(--borda-forte)}
.elemento{
  display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ambar);margin-bottom:.5rem
}
.caminhos h3{font-size:1.36rem;color:var(--nuvem);margin-bottom:.2rem}
.cl-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--tenue);margin:0 0 .9rem}
.caminhos blockquote{
  margin:0 0 .9rem;font-family:var(--serif);font-style:italic;font-size:1.02rem;
  line-height:1.5;color:var(--gelo)
}
.cl-p{font-size:.88rem;color:var(--suave);margin:0}
.caminhos-fonte{
  max-width:var(--larg);margin:0 auto clamp(2.5rem,5vw,3.5rem);text-align:center;
  font-family:var(--mono);font-size:.72rem;line-height:1.8;color:var(--tenue)
}
.nota-lore{
  font-size:.9rem!important;color:#3f6478!important;
  padding:.75rem 0 0;border-top:1px solid rgba(168,118,47,.28);margin:-1rem 0 1.8rem
}
.nota-lore b{color:#0e2c3c}

/* ═══════════════ O JOGO HOJE ═══════════════ */
.hoje{
  background:linear-gradient(180deg,#03090f,var(--noite));
  display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:clamp(2rem,5vw,4rem);
  max-width:1340px;margin:0 auto;align-items:start
}
.hoje-fixo{position:sticky;top:110px}
.hoje-fixo .lead{margin-left:0}
.hoje-lista{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:.65rem}
.hoje-lista li{
  font-family:var(--mono);font-size:.8rem;color:var(--suave);
  padding-left:1.4rem;position:relative;line-height:1.6
}
.hoje-lista li::before{content:'';position:absolute;left:0;top:.55rem;width:6px;height:6px;border-radius:50%;background:var(--ouro);opacity:.75}
.hoje-imagens{display:grid;gap:1.6rem}
.hoje-imagens figure{margin:0}
.hoje-imagens img{border-radius:3px;box-shadow:var(--sombra-arte);width:100%}
.hoje-imagens figcaption{margin-top:.75rem;font-family:var(--mono);font-size:.73rem;color:var(--tenue);line-height:1.6}
@media (max-width:900px){.hoje{grid-template-columns:1fr}.hoje-fixo{position:static}}

/* ═══════════════ COMO JOGAR ═══════════════ */
.jogar{background:var(--abismo);border-top:1px solid var(--borda)}
.passos{
  list-style:none;max-width:var(--larg);margin:0 auto;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2rem
}
.passos li{padding-top:1.6rem;border-top:1px solid var(--borda-forte)}
.passo-n{
  display:block;font-family:var(--mono);font-size:.88rem;letter-spacing:.2em;
  color:var(--ambar);margin-bottom:.9rem
}
.passos h3{font-size:1.42rem;color:var(--nuvem);margin-bottom:.7rem}
.passos p{font-size:.93rem;color:var(--suave);margin-bottom:1.3rem}

/* ═══════════════ FECHO ═══════════════ */
.fecho{
  position:relative;text-align:center;
  background:
    radial-gradient(ellipse 60% 60% at 50% 100%,rgba(218,170,120,.13),transparent 65%),
    linear-gradient(180deg,var(--noite),var(--abismo));
  border-top:1px solid var(--borda)
}
.fecho-conteudo{max-width:760px;margin:0 auto}
.canonica-fecho{margin-bottom:2rem}
.contagem-fecho{margin:2.4rem 0 2.8rem}

/* ═══════════════ RODAPÉ ═══════════════ */
.rodape{padding:3.5rem clamp(1rem,5vw,2rem) 2.5rem;border-top:1px solid var(--borda);background:#03090f}
.rodape-grade{
  max-width:var(--larg);margin:0 auto 2.4rem;
  display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap
}
.rodape-marca{height:32px;width:auto;opacity:.75;filter:brightness(1.7) contrast(.95);margin-bottom:.8rem}
.rodape-linha{font-family:var(--serif);font-style:italic;color:var(--tenue);margin:0;font-size:1.12rem}
.rodape nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.rodape nav a{color:var(--suave);font-size:.87rem}
.rodape nav a:hover{color:var(--nuvem)}
.rodape-legal{
  max-width:var(--larg);margin:0 auto;padding-top:1.8rem;border-top:1px solid var(--borda);
  font-size:.76rem;line-height:1.75;color:var(--tenue);max-width:78ch
}

/* ═══════════════ REVELAÇÃO AO ROLAR ═══════════════ */
.rev{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rev.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .hero-arte{transform:none!important}
}

/* ══════════════════════════════════════════════════════════════
   CELULAR — os defeitos estavam todos aqui, e só aqui.
   Em 390px o CTA do topo saía 33px para fora da tela, o CTA do
   Discord media 441px num viewport de 375px, e nenhum botão
   aparecia na primeira dobra.
   ══════════════════════════════════════════════════════════════ */
/* Os quatro botoes da dobra empilham ate 900px. Em 560 -- o valor antigo --
   sobrava largura para DOIS deles lado a lado e os outros dois caiam para a
   linha de baixo com largura diferente: em 600px media 240, 240, 258 e 259.
   Empilhado ate 900 os quatro sao sempre identicos. */
@media (max-width:900px){
  .hero-acoes,.hero-oauth{flex-direction:column;align-items:stretch;gap:.7rem}
  .hero-acoes .btn,.hero-oauth .btn,.hero-oauth .externo{width:100%;min-width:0}
}

@media (max-width:560px){
  .topo{gap:.6rem;padding:.7rem .8rem;flex-wrap:wrap}
  .nav-acoes{flex:1 1 17rem;justify-content:flex-end;flex-wrap:wrap;margin-left:auto;gap:.4rem}
  .btn-discord{padding:.5rem .62rem;font-size:0}          /* fica só o ícone */
  .btn-discord .ico-discord{font-size:1rem}
  .nav-acoes .btn-primario{padding:.6rem .85rem;font-size:.85rem}
  .idi{padding:.4rem .45rem;font-size:.66rem}

  /* primeira dobra: o botão precisa caber junto com o contador */
  .hero{padding:3.6rem 1rem 3rem;min-height:auto}
  .hero .olho-hero{margin-bottom:1rem;letter-spacing:.26em}
  .hero-sub{font-size:.96rem;max-width:36ch;margin-bottom:1.25rem}
  .contagem{margin-bottom:1.25rem}
  .contagem-rotulo{margin-bottom:.7rem}
  .contagem-data{font-size:.7rem;letter-spacing:.04em;line-height:1.7}
  .hero-acoes{flex-direction:column;align-items:stretch;gap:.7rem}
  .hero-acoes .btn{width:100%}
  .rolar{display:none}                                     /* nunca visível aqui */

  h1,h2,h3{line-height:1.18}                               /* acento não encosta */
  .marco-corpo h3{line-height:1.22}

  .lista-prova li{flex-direction:column;gap:.15rem}
  .lista-prova li b{min-width:0}

  .faixa figcaption{padding:2rem 1rem 1.1rem}
  .evento-ramos{gap:1rem}

  /* ---- topo: nada quebra linha ----
     .btn nasce com white-space:normal, que serve ao corpo do texto e nao a
     uma barra de 89px. "Sign in" ia a 2 linhas e "Create account" a 3; em
     coreano piora, porque "계정 만들기" tem espaco no meio. */
  .topo a,.topo button{white-space:nowrap}

  /* ---- os quatro botoes da dobra viram um bloco unico ----
     Eram tres medidas empilhadas: 343x61 os dois primeiros, 230x47 os de
     login social, e fontes diferentes. Numa coluna de 375px isso le como
     desalinho, nao como hierarquia. */
  .hero-oauth{display:flex;flex-direction:column;align-items:stretch;gap:.7rem}
  .hero-oauth .externo{width:100%;display:flex}
  .hero-oauth .btn{width:100%;padding:1rem 2rem;font-size:1.02rem}
  /* min-height e nao padding: mesmo padding ainda dava 61 contra 55, porque
     a linha do coreano e mais alta que a do alfabeto latino. Com o piso, os
     quatro fecham na mesma altura em qualquer um dos dois idiomas. */
  .hero-acoes .btn,.hero-oauth .btn{min-height:3.85rem}

  /* ---- a arte de fundo ----
     hero-templo.webp e 1920x952 (razao 2.02) e a caixa era 394x970 (0.41).
     Com object-fit:cover a escala vem da altura, a largura projetada passa
     de 1900px e sobra uma tira central: 20% da imagem, sem templo e sem as
     guardias dos lados.

     Presa a 520px no alto, a mesma arte mostra 36% da largura, e o resto da
     dobra fica no abismo -- que ja e a cor em que o veu terminava. O scale
     de 1.05 sai junto: era ele que jogava a imagem 9px para fora dos dois
     lados da tela. */
  .hero-fundo{inset:0 0 auto 0;height:520px}
  .hero-arte{transform:none;object-position:50% 44%}
  .hero-veu{
    background:
      radial-gradient(ellipse 70% 40% at 50% 30%,rgba(4,16,26,.62),rgba(4,16,26,.24) 70%,transparent 100%),
      linear-gradient(180deg,rgba(4,16,26,.52) 0%,rgba(4,16,26,.12) 26%,rgba(4,16,26,.58) 72%,var(--abismo) 100%);
  }
}
@media (max-width:400px){
  .bloco{min-width:0;flex:1}
  .contagem-blocos{gap:.45rem}
}

/* botão desabilitado — o /download ainda é 404 no servidor, então em vez de
   mandar o jogador para uma página de erro no passo 2 de 3, ele lê a data */
.btn-inativo{
  opacity:.55;cursor:default;pointer-events:none;
  border-style:dashed;border-color:var(--borda-forte)
}
.passos .link-prova{display:inline-block;margin-top:.7rem}

/* a linha da data no fim do subtitulo do hero: separada, sem virar outro paragrafo */
.hero-sub-fecho{
  display:block;margin-top:.9rem;color:var(--creme);
  font-family:var(--serif);font-style:italic;font-size:1.14em
}

/* ══════════════════════════════════════════════════════════════
   PATCH NOTES
   O texto das notas ja vem numa forma: "o que estava errado.
   o que foi feito." A pagina so torna essa forma visivel — o
   problema apagado, o conserto aceso.
   ══════════════════════════════════════════════════════════════ */
.pagina-notas{background:var(--abismo)}
.notas-topo{max-width:860px;margin:0 auto;text-align:center;padding-top:clamp(3rem,7vw,5.5rem)}
.notas-topo .lead{margin-bottom:clamp(2.5rem,5vw,3.5rem)}

.notas-placar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0 0 clamp(2.5rem,5vw,3.5rem);
  padding:1.6rem 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)
}
.notas-placar div{display:flex;flex-direction:column-reverse;gap:.35rem}
.notas-placar dd{
  margin:0;font-family:var(--mono);font-size:clamp(1.5rem,3.4vw,2.2rem);
  color:var(--ambar);font-variant-numeric:tabular-nums;line-height:1
}
.notas-placar dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);line-height:1.4
}
@media (max-width:640px){.notas-placar{grid-template-columns:repeat(2,1fr);gap:1.4rem}}

.cadencia{margin:0 0 clamp(1rem,3vw,2rem)}
.cadencia-fita{display:grid;grid-auto-flow:column;grid-auto-columns:14px;gap:3px;justify-content:center}
.cel{
  display:block;width:14px;height:22px;border-radius:2px;
  background:rgba(143,189,212,.08);border:1px solid rgba(143,189,212,.14)
}
.cel.cheia{
  background:var(--ouro);
  border-color:var(--ouro);box-shadow:0 0 10px rgba(218,170,120,.35)
}
.cel.hoje{border-color:var(--gelo);border-style:dashed}
.cadencia figcaption{
  margin-top:1rem;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--tenue)
}
.cad-legenda{display:inline-flex;align-items:center;gap:.4rem}
.cad-legenda .cel{width:9px;height:14px;flex:0 0 auto}

.notas-lista{max-width:var(--larg);margin:0 auto;padding-top:0}
.nota{
  display:grid;grid-template-columns:clamp(6rem,13vw,11rem) 1fr;gap:clamp(1.2rem,3vw,2.6rem);
  padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--borda)
}
.nota-meta{position:sticky;top:96px;align-self:start}
.nota-data{
  display:block;font-family:var(--mono);font-size:1.02rem;color:var(--gelo);
  font-variant-numeric:tabular-nums
}
.nota-hora{display:block;font-family:var(--mono);font-size:.68rem;color:var(--tenue);margin-top:.25rem}
.nota-versao{
  display:inline-block;margin-top:.7rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  color:var(--ouro);border:1px solid rgba(218,170,120,.3);border-radius:2px;padding:.2rem .45rem
}
.nota-corpo h2{font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--nuvem);margin-bottom:1.3rem}
.mudancas{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.mudanca{
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.6rem;align-items:baseline;
  padding-bottom:.85rem;border-bottom:1px solid rgba(143,189,212,.07);font-size:.93rem;line-height:1.55
}
.mudanca:last-child{border-bottom:0;padding-bottom:0}
.antes{color:var(--tenue)}
.depois{color:var(--texto);position:relative;padding-left:1.1rem}
.depois::before{
  content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;
  background:var(--ouro);opacity:.8
}
.mudanca.simples{grid-template-columns:1fr}
@media (max-width:760px){
  .nota{grid-template-columns:1fr;gap:.8rem}
  .nota-meta{position:static;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
  .nota-hora,.nota-versao{margin-top:0}
  .mudanca{grid-template-columns:1fr;gap:.2rem}
}

.notas-fecho{max-width:700px;margin:0 auto;text-align:center;border-top:1px solid var(--borda)}
.notas-fecho .lead{margin-bottom:2rem}
.nav-links a.atual{color:var(--creme)}
.nav-links a.atual::after{right:0}

/* seletor de idioma: ingles primeiro, portugues segundo, os dois visiveis */
.idiomas{display:flex;border:1px solid var(--borda-forte);border-radius:2px;overflow:hidden}
.idi{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  background:transparent;border:0;color:var(--tenue);
  padding:.46rem .55rem;cursor:pointer;transition:color .2s,background .2s
}
.idi + .idi{border-left:1px solid var(--borda)}
.idi:hover{color:var(--nuvem)}
.idi.ativo{color:var(--abismo);background:var(--ouro);font-weight:700}

/* ══════════════════════════════════════════════════════════════
   PÁGINAS DE CONTA — login, registro, painel, erro
   O site novo nasceu como landing page: fora da home não existia
   cartão, campo, botão de OAuth nem tabela, e essas telas cairiam
   sem estilo nenhum. Elas entram aqui na mesma paleta, mas com um
   contrato diferente do da home — lá o trabalho é encantar, aqui é
   não atrapalhar quem só quer entrar na conta.
   ══════════════════════════════════════════════════════════════ */

/* A paleta da arte de 2004 não tem cor de estado: nada nela diz
   "deu erro" nem "terceiro lugar". Estas duas saem de dentro da
   família quente que já existe (--brasa clareada com --creme), e
   não de um vermelho de framework que brigaria com o ouro.
   Medidas sobre o fundo do cartão (#091d29): 8.3:1 e 5.8:1. */
:root{
  --erro:#f0a08f;
  --bronze:#c28a68;
}

/* ─────────── cabeçalho: a navegação real do _Layout ───────────
   O layout entrega um <nav> sem classe — não é o .nav-links do
   protótipo da home —, então a régua do topo tem que vir pelo
   elemento, ou os links caem empilhados à esquerda do wordmark. */
.topo nav{
  display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;
  gap:.55rem 1.3rem;margin-left:auto;font-size:.9rem;
}
/* :where() zera a especificidade do filtro, para que os dois
   links-botão abaixo definam a própria cor sem precisar de um
   seletor mais forte só para vencer esta linha. */
.topo nav a:where(:not(.discord-topo):not(.destaque)){
  color:var(--suave);letter-spacing:.02em;transition:color .25s var(--ease);
}
.topo nav a:where(:not(.discord-topo):not(.destaque)):hover{color:var(--nuvem)}

/* No celular estes quatro links sao ancoras da propria home e empilhavam em
   quatro linhas: o cabecalho ia a 170px de 812 (21% da tela, e ele e' sticky)
   e empurrava o botao de criar conta para 757px, no limite de sair da
   primeira tela.

   A regra que os escondia ja existia em .nav-links no @media de 900px, mas
   perdia para o `.topo nav` acima -- elemento+classe, e mais abaixo no
   arquivo. Precisa vir depois e com o mesmo alcance do seletor que venceu. */
@media (max-width:900px){
  .topo nav{display:none}
}

/* O Discord se destaca por POSIÇÃO — está em toda página, sempre no
   topo — e não por tamanho: fica compacto, no blurple da marca.
   Branco sobre #5865f2 mede 4.6:1 e passa AA raspando; o gradiente
   só escurece daí para baixo, então o pior caso é o topo. */
.discord-topo{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.44rem .82rem;border:1px solid #7a85f6;border-radius:2px;
  background:linear-gradient(180deg,#5865f2,#4d59e0);
  color:#fff;font-weight:600;font-size:.85rem;letter-spacing:.02em;
  transition:filter .25s var(--ease),transform .25s var(--ease);
}
.discord-topo:hover{color:#fff;filter:brightness(1.12);transform:translateY(-1px)}

/* Mesmo desenho do .ico-discord do topo: máscara em CSS. A CSP do
   servidor é default-src 'self' e um SVG externo seria mais um
   round-trip para um ícone de 13px. */
.discord-icone,.botao-discord .d{
  width:17px;height:13px;flex:0 0 auto;background:currentColor;
  -webkit-mask:radial-gradient(circle at 30% 45%,#000 2.2px,transparent 2.3px),radial-gradient(circle at 70% 45%,#000 2.2px,transparent 2.3px),radial-gradient(ellipse 52% 50% at 50% 50%,#000 99%,transparent);
  mask:radial-gradient(circle at 30% 45%,#000 2.2px,transparent 2.3px),radial-gradient(circle at 70% 45%,#000 2.2px,transparent 2.3px),radial-gradient(ellipse 52% 50% at 50% 50%,#000 99%,transparent);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* "Create account" é a única ação do cabeçalho; recebe a placa
   dourada do sistema — texto escuro sobre --ouro dá 8.5:1. */
.destaque{
  padding:.44rem .95rem;border-radius:2px;
  color:#0a1a12;font-weight:600;font-size:.86rem;background:var(--ouro);
  transition:background .25s var(--ease);
}
.destaque:hover{color:#0a1a12;background:var(--ambar)}

/* o form de logout é só o portador do antiforgery: não pode abrir
   linha nem caixa própria no meio dos links */
.inline{display:inline-flex;align-items:center;margin:0}
.link{
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.9rem;letter-spacing:.02em;
  color:var(--suave);transition:color .25s var(--ease);
}
.link:hover{color:var(--nuvem)}

/* ─────────── o cartão ───────────
   A regra section{padding:8.5rem} existe para as faixas da home;
   aqui o cartão é um objeto pequeno no meio da página, então repõe
   o próprio padding e usa margem para o respiro externo.
   width:min() em vez de max-width porque a folga lateral precisa
   existir a 390px — com max-width o cartão encosta nas bordas. */
.cartao{
  width:min(100% - 2rem,27rem);
  margin:clamp(2.6rem,7vw,5rem) auto;
  padding:clamp(1.7rem,4vw,2.3rem);
  border:1px solid var(--borda);border-radius:3px;
  background:linear-gradient(165deg,rgba(23,71,90,.24),rgba(6,26,36,.55));
  box-shadow:0 2px 4px rgba(0,0,0,.30),0 18px 46px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05);
}
.cartao.largo{width:min(100% - 2rem,42rem)}

.cartao :where(h1,h2){margin:0;font-size:clamp(1.55rem,3.6vw,2rem);color:var(--nuvem)}
/* fio dourado curto sob o título: a mesma marcação de hierarquia
   que a home faz com o .olho, sem exigir marcação nova */
.cartao :where(h1,h2)::after{
  content:'';display:block;width:2.6rem;height:1px;margin:.9rem 0 1.4rem;
  background:linear-gradient(90deg,var(--ouro),transparent);
}
/* o painel tem três blocos seguidos (conta, login vinculado,
   personagens); a linha em cima do h3 separa sem pedir moldura */
.cartao h3{
  margin:2.2rem 0 .7rem;padding-top:1.4rem;
  border-top:1px solid var(--borda);
  font-size:1.25rem;color:var(--creme);
}

/* <p class="nota"> destas telas é texto de apoio e não tem relação
   com o .nota da página de patch notes, que é uma grade de duas
   colunas com padding de 3rem. Um seletor mais específico desfaz a
   colisão sem mexer na regra de lá. */
.cartao p.nota{
  display:block;padding:0;border-top:0;
  color:var(--suave);font-size:.92rem;line-height:1.6;
}
.cartao p.nota strong{color:var(--creme);font-weight:600}
.cartao p.nota a{
  color:var(--ambar);text-decoration:underline;
  text-underline-offset:.18em;text-decoration-color:rgba(230,176,111,.45);
}
.cartao p.nota a:hover{color:var(--creme);text-decoration-color:currentColor}
/* o "No account yet?" fecha o cartão logo abaixo do último botão;
   sem esta folga ele encosta na placa do Discord */
.cartao>p.nota:last-child{margin:1.5rem 0 0}

.dica{display:block;margin:.35rem 0 0;color:var(--tenue);font-size:.8rem;line-height:1.5}

/* O erro tem que ser lido antes do campo que ele condena: cor
   quente, tamanho de texto normal (nada de 11px) e o traço de
   --brasa na lateral quando é o aviso do formulário inteiro. */
.erro{display:block;margin:.4rem 0 0;color:var(--erro);font-size:.88rem;line-height:1.5}
.cartao p.erro,.cartao div.erro{
  margin:0 0 1.3rem;padding:.75rem .9rem;
  border:1px solid rgba(179,105,64,.35);border-left:2px solid var(--brasa);border-radius:2px;
  background:rgba(179,105,64,.12);
}
.cartao div.erro ul{margin:0;padding-left:1.15rem}
/* o tag helper deixa o resumo e os spans de validação no HTML mesmo
   quando não há erro nenhum; vazios eles abririam um vão no meio do
   formulário. As duas classes abaixo são escritas pelo ASP.NET. */
.erro:empty,.erro.field-validation-valid,.erro.validation-summary-valid{display:none}

/* confirmação (ex.: "Google desvinculado"): o mesmo bloco do erro,
   no frio — no resto do site o azul é o "seguiu tudo bem" */
.cartao p.aviso-ok{
  margin:1.4rem 0 0;padding:.75rem .9rem;
  border:1px solid var(--borda);border-left:2px solid var(--piscina);border-radius:2px;
  background:rgba(143,189,212,.08);color:var(--texto);
}

/* ─────────── formulários ───────────
   Entrar e criar conta são a tela que decide se o jogador entra.
   Coluna única, rótulo colado no campo dele e nada disputando
   atenção entre o último campo e o botão. */
.cartao form{display:flex;flex-direction:column}
.cartao label{margin:1.15rem 0 .35rem;color:var(--gelo);font-size:.86rem;font-weight:600;letter-spacing:.04em}
/* agrupador de campo: rótulo, entrada e dica como um bloco só, para
   quem escrever tela nova não repetir margem à mão */
.campo{display:flex;flex-direction:column;margin-top:1.15rem}
.campo>label{margin-top:0}

.cartao input,.cartao textarea{
  width:100%;padding:.68rem .8rem;
  font:inherit;font-size:.98rem;color:var(--nuvem);
  background:rgba(4,16,26,.55);
  border:1px solid var(--borda-forte);border-radius:2px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.cartao textarea{min-height:13rem;font-size:.94rem;line-height:1.6;resize:vertical}
.cartao input::placeholder,.cartao textarea::placeholder{color:var(--tenue)}
/* O outline global do :focus-visible continua valendo; a borda
   acesa e o halo dizem QUAL campo está vivo mesmo para quem enxerga
   pouco contraste de outline sobre fundo escuro. */
.cartao input:focus,.cartao textarea:focus{
  border-color:var(--piscina);background:rgba(4,16,26,.72);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35),0 0 0 3px rgba(90,149,184,.18);
}
/* o autofill do Chrome pinta o campo de amarelo e some com o texto
   claro; a sombra interna gigante é a única forma de repintar o
   fundo do autofill sem !important */
.cartao input:-webkit-autofill,
.cartao input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--nuvem);
  -webkit-box-shadow:inset 0 0 0 100px #071a26;
  caret-color:var(--nuvem);
}

/* ─────────── botões ───────────
   .botao é o irmão do .btn-primario da home: mesma placa dourada,
   porque em toda tela onde ele aparece é a ação principal (entrar,
   criar conta, publicar). Google e Discord só trocam a pele. */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.8rem 1.6rem;border:1px solid transparent;border-radius:2px;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  text-align:center;white-space:normal;max-width:100%;cursor:pointer;
  color:#0a1a12;
  background:var(--ouro);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.botao:hover{
  color:#0a1a12;transform:translateY(-2px);
}
.botao:active{transform:translateY(0)}
/* dentro do cartão o botão ocupa a linha inteira: não há segunda
   ação competindo com ele */
.cartao form .botao{width:100%;margin-top:1.6rem}

/* A Google exige o botão branco com o G colorido, e é assim que ele
   é reconhecido em um décimo de segundo. Cores fixadas pela marca,
   não pela paleta: #131314 sobre #fff dá 18.6:1. */
.botao-google{color:#131314;background:#fff;border-color:#dadce0;box-shadow:0 1px 2px rgba(0,0,0,.30)}
.botao-google:hover{
  color:#131314;background:#f4f6f8;transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.botao-google .g{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:1.15rem;height:1.15rem;border-radius:2px;
  background:#fff;color:#1a73e8;
  font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:.9rem;line-height:1;
}
.botao-discord{
  color:#fff;border-color:#7a85f6;
  background:linear-gradient(180deg,#5865f2,#4d59e0);
  box-shadow:0 10px 24px rgba(88,101,242,.22);
}
.botao-discord:hover{
  color:#fff;background:linear-gradient(180deg,#6b76f5,#5460e8);
  transform:translateY(-2px);box-shadow:0 16px 32px rgba(88,101,242,.30);
}

/* o form de OAuth existe só para carregar o antiforgery: não pode
   criar caixa nem espaço próprio em volta do botão */
.externo{margin:0}
.cartao .externo{margin-top:.7rem}
.cartao .externo .botao{width:100%;margin-top:0}

.separador{
  display:flex;align-items:center;gap:.9rem;margin:1.8rem 0 1.1rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tenue);
}
.separador::before,.separador::after{content:'';flex:1;height:1px;background:var(--borda-forte)}

/* Na home os três caminhos de entrada têm o mesmo peso: mesma base
   de largura, mesma altura, e encolhem juntos. */
.acoes{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:.9rem;margin-top:2rem}
.acoes>.botao,.acoes>.externo{flex:0 1 17rem}
.acoes .externo .botao{width:100%;height:100%;margin-top:0}

/* ─────────── dados da conta ─────────── */
.info{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;margin:0}
.info dt{
  align-self:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);
}
.info dd{margin:0;color:var(--creme)}

.tabela{width:100%;border-collapse:collapse;font-size:.94rem}
.tabela th{
  padding:0 .7rem .55rem;text-align:left;
  font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);border-bottom:1px solid var(--borda-forte);
}
.tabela td{padding:.62rem .7rem;border-bottom:1px solid var(--borda);color:var(--texto)}
.tabela tbody tr:last-child td{border-bottom:0}
/* nível é número: alinha à direita e com largura de dígito fixa,
   para as casas baterem de uma linha para outra */
.tabela td:last-child,.tabela th:last-child{text-align:right}
.tabela td:last-child{font-variant-numeric:tabular-nums;color:var(--creme)}

/* desvincular pede a senha: um campo só, e estreito — a largura
   cheia sugeriria um formulário maior do que ele é */
.linha-senha{max-width:20rem;margin-top:1.5rem}

/* ─────────── ultimas notas, direto do banco ─────────── */
.ultimas{background:var(--abismo);border-top:1px solid var(--borda)}
.ultimas-lista{
  list-style:none;max-width:var(--larg);margin:0 auto;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem
}
.ultimas-lista li{padding-top:1.2rem;border-top:1px solid var(--borda-forte)}
.ultimas-lista a{display:block;color:inherit}
.ultimas-lista time{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:.5rem
}
.ultimas-titulo{
  display:block;font-family:var(--serif);font-size:1.28rem;line-height:1.25;
  color:var(--nuvem);margin-bottom:.5rem;transition:color .2s
}
.ultimas-lista a:hover .ultimas-titulo{color:var(--ambar)}
.ultimas-resumo,.nota-resumo{font-size:.9rem;color:var(--suave);margin:.5rem 0 0}
.ultimas-todas{max-width:var(--larg);margin:2.2rem auto 0;text-align:center}

/* ─────────── ajustes que a pagina de notas pedia ───────────
   Sao tres coisas que estavam em style inline nas Razor Pages. Inline nao
   e' errado, mas some do radar de quem edita o CSS depois. */

/* O placar tem 3 numeros e nao 4: o total de mudancas so existiria com o
   corpo de cada nota em maos, e busca-lo da view seria N+1 no banco. */
.notas-placar{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}

/* A fita cresce uma celula por dia, para sempre. Sem rolagem propria ela
   seria cortada em silencio pelo overflow-x:hidden do body. O "safe center"
   centraliza enquanto cabe e alinha a esquerda quando nao cabe mais --
   com "center" puro o inicio fica inalcancavel. O padding evita que a
   caixa de rolagem corte o brilho das celulas acesas. */
.cadencia-fita{overflow-x:auto;justify-content:safe center;padding:8px 0}
.cadencia-fita:focus-visible{outline:2px solid var(--ambar);outline-offset:4px}

/* ═══════════════ PÁGINAS DE CONTEÚDO — /lore, /world, /crafting ═══════
   A versão anterior punha o texto dentro de uma caixa de 704px com borda e
   fundo. Uma caixa cinza no meio da tela é o desenho padrão de "documento",
   e nada tem a ver com o resto do site — a home tem arte sangrando e
   tipografia grande, e essas páginas pareciam de outro produto.

   Aqui o texto vive DIRETO sobre o abismo, com uma coluna de leitura estreita
   e um cabeçalho grande. O que ganha destaque ganha por tipografia, não por
   moldura. */
/* Paginas de leitura: UMA coluna de 42rem (~75 caracteres por linha) e uma
   borda esquerda so. Titulo, abertura, paragrafo, lista, imagem e botao
   alinham todos nela -- nada de cada elemento com sua propria largura. */
.texto{
  width:min(100% - 2.5rem,42rem);margin:0 auto;padding:6rem 0 5rem;
  line-height:1.78;color:var(--texto);font-size:1.04rem;
}
/* /crafting nao e' texto corrido, e consulta: ocupa a largura toda e
   poe as receitas em grade. Em 54rem sobravam 600px vazios de cada lado
   e a pagina passava de 52 mil pixels de altura. */

.texto>.olho{
  margin:0 0 1rem;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--tenue);
}
.texto h1{
  margin:0 0 2.2rem;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:1.08;
  color:var(--nuvem);text-wrap:balance;
}
/* A primeira frase é a promessa da página: entra maior, em creme, e com um
   fio dourado que separa a abertura do corpo sem desenhar caixa. */
/* .abertura e nao .destaque: .destaque ja e o BOTAO dourado do menu (ver
   acima). Reusar o nome fazia o paragrafo de abertura herdar o gradiente do
   botao -- minha regra sobrescrevia cor e tamanho, nunca o background. */
.texto .abertura{
  font-size:1.16rem;line-height:1.6;color:var(--creme);
  margin:0 0 2rem;padding-bottom:1.4rem;
  border-bottom:1px solid var(--borda);background:none;box-shadow:none;
}
.texto h2{
  margin:3.4rem 0 1.1rem;font-weight:400;font-size:1.62rem;letter-spacing:.01em;
  line-height:1.2;color:var(--gelo);text-transform:none;border:0;padding:0;
}
/* h3 numerado: as três eras do lore são uma progressão, e o número faz o
   olho entender isso antes de ler. counter-reset no artigo, não no body. */
.texto{counter-reset:etapa}
.texto h3{
  counter-increment:etapa;
  margin:2.6rem 0 .6rem;padding:0;border:0;
  font-weight:400;font-size:1.02rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gelo);display:flex;align-items:baseline;gap:.9rem;
}
.texto h3::before{
  content:counter(etapa,decimal-leading-zero);
  font-size:.78rem;color:var(--tenue);letter-spacing:.04em;
}
.texto p{margin:0 0 1.15rem}
.texto ul{margin:0 0 1.3rem;padding-left:1.1rem}
.texto li{margin-bottom:.5rem}
.texto a:not(.btn){color:var(--gelo);text-underline-offset:.22em}
.texto a:not(.btn):hover{color:var(--nuvem)}
.texto strong,.texto b{color:var(--creme);font-weight:600}

/* Citação sem aspas desenhadas: recuo, corpo maior e o fio dourado à
   esquerda. É a mesma marcação da home, para as páginas lerem como o
   mesmo site. */
/* ─────────── loja e páginas legais ───────────
   .miudo e não .nota: .nota já é o CARTÃO de patch note (grid de duas
   colunas, coluna grudenta). Reusar o nome transformaria cada rodapé de
   parágrafo numa grade quebrada -- mesmo erro que .destaque causou antes. */
.texto .miudo{
  margin:2.2rem 0 0;font-size:.82rem;line-height:1.7;color:var(--tenue);
  letter-spacing:.01em;
}
.texto .miudo a{color:var(--gelo);text-decoration:none;border-bottom:1px solid var(--borda-forte)}
.texto .miudo a:hover{color:var(--ouro);border-bottom-color:var(--ouro)}

/* O preço vive DENTRO do botão, e o botão é o único jeito de comprar: sem
   campo de valor na página não há valor para adulterar. */
.linha-compra{margin:.7rem 0 0}

.carteira-cc{
  display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;align-items:end;
  margin:2rem 0 2.4rem;padding:1.25rem 1.4rem;
  border:1px solid var(--borda-forte);border-left:3px solid var(--ouro);
  background:rgba(143,189,212,.06)
}
.carteira-cc span,.carteira-cc small{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)
}
.carteira-cc strong{
  grid-row:1 / span 2;grid-column:2;
  font-family:var(--serif);font-size:clamp(2rem,6vw,3.2rem);font-weight:400;line-height:1;color:var(--creme)
}
.aviso-carteira{
  margin:1.2rem 0 0;padding:.85rem 1rem;border:1px solid var(--borda);
  color:var(--suave);background:rgba(4,16,26,.35)
}
@media (max-width:560px){
  .btn-download{padding:.55rem .75rem}
  .carteira-cc{grid-template-columns:1fr}
  .carteira-cc strong{grid-row:auto;grid-column:auto;margin:.3rem 0}
}

/* O "+10%" ao lado do pacote. Discreto de proposito: bonus gritado em caixa
   colorida e' o visual de loja que empurra, e a prateleira aqui tem tres
   linhas -- quem compara ve o numero sozinho. */
.selo{
  display:inline-block;margin-left:.5rem;padding:.05rem .4rem;
  border:1px solid var(--borda-forte);font-size:.72rem;letter-spacing:.04em;
  color:var(--ouro);vertical-align:.08em;
}

.rodape-legal-links{
  display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;
  margin-bottom:1.4rem;font-size:.78rem;letter-spacing:.04em;
}
.rodape-legal-links a{color:var(--tenue);text-decoration:none;transition:color .2s var(--ease)}
.rodape-legal-links a:hover{color:var(--gelo)}

.texto .citacao{
  margin:2rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:1px solid var(--borda-forte);
  font-size:1.24rem;line-height:1.5;color:var(--creme);font-style:normal;
}
.texto .tabela{width:100%;border-collapse:collapse;margin-bottom:.6rem;font-size:.94rem}
.texto .tabela th{
  text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--borda-forte);
  color:var(--gelo);font-weight:600;letter-spacing:.04em;
}
.texto .tabela td{vertical-align:top;padding:.55rem .7rem;border-bottom:1px solid var(--borda)}
.craft-tabela td,.craft-tabela th{padding:.32rem .45rem}
.craft-tabela{font-size:.86rem}
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.2rem}
.cta-linha{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:3.4rem;padding-top:2.4rem;border-top:1px solid var(--borda)}

/* ─────────── /world: página de leitura, não de consulta ───────────
   Era três tabelas. Tabela é grade densa: o olho varre em Z procurando uma
   célula, que é o oposto de ler uma linha até o fim. Aqui a linha é a
   unidade, e o nome do lugar fica em destaque para o olho ter onde pousar
   enquanto desce. */
.lugares{list-style:none;margin:1.2rem 0 1.6rem;padding:0}
.lugares li{
  padding:.75rem 0 .75rem 1.1rem;border-left:1px solid var(--borda);
  margin-bottom:.15rem;transition:border-color .25s var(--ease);
}
.lugares li:hover{border-left-color:var(--ouro)}
.lugares b{color:var(--creme);font-weight:600;letter-spacing:.01em}

/* A arte fica na largura do artigo: um recuo unico alinha titulo, texto,
   imagem e botao na mesma borda esquerda -- e uma pagina, nao um mural. */
.mundo-arte{margin:2.4rem 0;width:100%}
.mundo-arte img{
  width:100%;height:auto;display:block;border:1px solid var(--borda);
  filter:saturate(1.06) contrast(1.04);
}
.mundo-arte figcaption{
  margin-top:.6rem;font-size:.78rem;color:var(--tenue);
  letter-spacing:.03em;line-height:1.6;
}
.texto .olho{
  margin:0 0 .6rem;font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--tenue);
}


/* ─────── /database/items ───────
   Os icones vem dos 4 atlas originais do cliente (interface_icon.pack),
   512x512 com celulas de 32px. Sprite por CLASSES, nao por style inline:
   a CSP e style-src 'self' e bloquearia o atributo. 36 regras cobrem os
   931 itens. pixelated: e' pixel art de 2003, borrar e' que estraga. */
.texto-db{width:min(100% - 2.5rem,56rem)}
.ic{display:inline-block;width:32px;height:32px;background-size:512px 512px;
  image-rendering:pixelated;vertical-align:middle;background-color:rgba(0,0,0,.35);
  border:1px solid var(--borda);border-radius:2px}
.a1{background-image:url(/img/db/itemicon1.webp)}
.a2{background-image:url(/img/db/itemicon2.webp)}
.a3{background-image:url(/img/db/itemicon3.webp)}
.a4{background-image:url(/img/db/itemicon4.webp)}
.cx0{background-position-x:0px} .cx1{background-position-x:-32px} .cx2{background-position-x:-64px} .cx3{background-position-x:-96px} .cx4{background-position-x:-128px} .cx5{background-position-x:-160px} .cx6{background-position-x:-192px} .cx7{background-position-x:-224px} .cx8{background-position-x:-256px} .cx9{background-position-x:-288px} .cx10{background-position-x:-320px} .cx11{background-position-x:-352px} .cx12{background-position-x:-384px} .cx13{background-position-x:-416px} .cx14{background-position-x:-448px} .cx15{background-position-x:-480px}
.cy0{background-position-y:0px} .cy1{background-position-y:-32px} .cy2{background-position-y:-64px} .cy3{background-position-y:-96px} .cy4{background-position-y:-128px} .cy5{background-position-y:-160px} .cy6{background-position-y:-192px} .cy7{background-position-y:-224px} .cy8{background-position-y:-256px} .cy9{background-position-y:-288px} .cy10{background-position-y:-320px} .cy11{background-position-y:-352px} .cy12{background-position-y:-384px} .cy13{background-position-y:-416px} .cy14{background-position-y:-448px} .cy15{background-position-y:-480px}
.db-abas{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.4rem 0 1.2rem}
.db-aba{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;
  border:1px solid var(--borda-forte);border-radius:2px;text-decoration:none;
  color:var(--texto);font-size:.9rem;transition:all .2s var(--ease)}
.db-aba:hover{border-color:var(--gelo);color:var(--nuvem)}
/* a ativa usa o dourado da casa, igual botao primario */
.db-aba.ativa{background:var(--ouro);color:#0a1a12;border-color:var(--ouro);font-weight:600}
.db-n{font-family:var(--mono);font-size:.72rem;opacity:.75}
.db-tabela td{vertical-align:middle}
.db-td-ico{width:40px}
.db-td-nome b{color:var(--creme);font-weight:600}
.db-desc{display:block;font-size:.8rem;color:var(--tenue);line-height:1.45;max-width:34rem}
.db-td-classe{white-space:nowrap}
/* siglas de classe: caixinha mono; cores por elemento, discretas */
.db-classe{display:inline-block;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;padding:.1rem .4rem;margin-right:.25rem;
  border:1px solid var(--borda);border-radius:2px;color:var(--gelo)}
.db-c-all{color:var(--tenue)}
.db-c-soul,.db-c-kow,.db-c-koc{color:#d9c8f0;border-color:#5a4a78}
.db-c-wind,.db-c-pe,.db-c-ww{color:#c8ecd8;border-color:#3f6e55}
.db-c-water,.db-c-gms,.db-c-dms,.db-c-pms{color:#c3ddf2;border-color:#3d6284}
.db-c-earth,.db-c-tss,.db-c-dss,.db-c-uss{color:#eeD9b8;border-color:#7a6238}
.db-td-level{font-family:var(--mono);text-align:right;color:var(--creme)}

/* secoes da database: as placas da loja */
.db-sec th{
  padding:1.5rem .7rem .5rem;text-align:left;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro);
  border-bottom:1px solid var(--borda-forte);
}
/* raridade colore o nome, como o jogo colore */
.rar1{color:var(--gelo)}
.rar2{color:var(--ouro)}
.rar3{color:var(--ambar)}


/* A pagina rola, o contexto nao se perde: cabecalho da tabela e placas de
   secao grudam logo abaixo do topo fixo. Sticky NAO funciona dentro de um
   ancestral com overflow (a .rolagem virava o container e empurrava os
   titulos por cima da primeira linha) -- entao no desktop a .rolagem abre
   (a tabela cabe) e o sticky age; no celular ela volta a rolar de lado e o
   sticky descansa. As ABAS nao grudam: a altura delas varia com a quebra
   de linha e qualquer top fixo baseado nela quebra. */
@media (min-width:760px){
  .texto-db .rolagem{overflow-x:visible}
  .db-tabela thead th{
    position:sticky;top:64px;z-index:12;
    background:rgba(6,20,32,.97);
  }
  .db-sec th{
    position:sticky;top:101px;z-index:11;
    background:rgba(4,16,26,.97);
  }
}
/* busca da database: mesma familia visual dos filtros do site */
.db-busca{
  display:block;width:100%;margin:1.2rem 0 .2rem;padding:.65rem .9rem;
  font-family:var(--mono);font-size:.92rem;color:var(--nuvem);
  background:rgba(6,20,32,.7);border:1px solid var(--borda-forte);border-radius:3px;
}
.db-busca:focus{outline:none;border-color:var(--ouro)}
.db-busca::placeholder{color:var(--tenue)}
.db-busca-n{font-family:var(--mono);font-size:.78rem;color:var(--tenue);margin:.4rem 0 0}
.db-busca-n a{color:var(--gelo)}
/* o link aceso do scrollspy ganha a cor da casa, nao so o sublinhado */
.nav-links a.atual{color:var(--ouro)}

/* ═══════════════ A MOLDURA DO JOGO ═══════════════
   A barra de titulo das janelas do cliente, vestindo os campos do site que
   carregam conteudo DO JOGO. A arte e recorte real de interface_data.pack
   (if_main0.dds), nas coordenadas que o proprio if.cfg declara:
     IF_ITEM_WIN_TITLE_BAR      textura 0, x 234 y 0,   278x36  -> ornamento
     IF_SKILL_WIN_TITLE_BOTTOM  textura 0, x 136 y 600, 217x21  -> fio
   A filigrana foi isolada com alfa; o metal da barra e CSS, para ela esticar
   em qualquer largura sem deformar a arte.

   ONDE NAO USAR: formulario, painel da conta, qualquer campo que a pessoa
   precise preencher. A barra e rotulo de objeto do jogo -- em tudo, vira
   papel de parede e para de significar. */
.gth-barra{
  display:flex;align-items:center;gap:.9rem;position:relative;
  min-height:38px;padding:0 0 0 1rem;
  background:linear-gradient(180deg,#0d2836 0%,#071c27 48%,#04131c 100%);
  border:1px solid var(--borda-forte);border-radius:3px 3px 0 0;
  box-shadow:inset 0 1px 0 rgba(143,189,212,.13);
}
.gth-barra::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:170px;height:38px;pointer-events:none;
  background:url(/img/gth-ornamento.webp) right center/contain no-repeat;
  opacity:.85;
}
.gth-barra b{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ambar);font-weight:400;
}
.gth-n{
  font-family:var(--mono);font-size:.7rem;color:var(--tenue);
  border:1px solid var(--borda);border-radius:2px;padding:.05rem .4rem;
  font-variant-numeric:tabular-nums;
}
/* a janela inteira: barra grudada num corpo */
.gth-janela{border:1px solid var(--borda-forte);border-radius:3px;background:rgba(6,26,36,.45)}
.gth-janela>.gth-barra{border:0;border-bottom:1px solid var(--borda-forte);border-radius:0}
.gth-janela>.nota{padding-left:clamp(1rem,3vw,2rem);padding-right:clamp(1rem,3vw,2rem);border-top:0}

/* o fio: rodape da janela de Skill, unico elemento do jogo que ja nasceu
   linha horizontal -- nao precisou de adaptacao */
.gth-fio{
  height:24px;margin:1.5rem 0;
  background:url(/img/gth-divisor.webp) center/auto 100% no-repeat;
  opacity:.55;
}

/* ── database: as placas de secao viram a barra ── */
.db-sec th{
  padding:1.6rem 0 0;border-bottom:0;background:transparent;
}
.db-sec th .gth-barra{min-height:34px}
@media (min-width:760px){
  /* a barra e grudenta no lugar da placa antiga */
  .db-sec th{top:96px}
}
/* a filigrana some quando nao ha largura para ela: sobra so o rotulo */
@media (max-width:560px){
  .gth-barra::after{display:none}
}
/* a versao ja esta rotulada na barra da janela: repetir na coluna lateral
   e dizer duas vezes a mesma coisa a um palmo de distancia */
.gth-janela .nota-versao{display:none}