/* ─────────────────────────────────────────────────────────────
   NewSea — página de apresentação
   Tema único, comprometido com o escuro (jogo naval noturno).
   Todos os tokens nascem no :root; nada de cor solta em bloco. */

:root{
  /* profundidade */
  --abyss:      #04090f;
  --deep:       #061019;
  --surface:    #0a1a28;
  --hull:       #0a1622;
  --hull-lit:   #0f2133;
  --navy:       #12263f;   /* o fundo dos medalhões de relíquia */

  /* metal */
  --brass:      #d4af37;   /* o ouro exato do jogo */
  --brass-lit:  #f2dc9b;
  --brass-dim:  rgba(212,175,55,.34);
  --brass-ghost:rgba(212,175,55,.12);

  /* texto */
  --ink:        #e4e9ed;
  --ink-soft:   #b7c4cf;
  --fathom:     #7d93a6;   /* cinza enviesado pro azul */
  --fathom-dim: rgba(125,147,166,.58);

  /* zonas de PVP — dados do jogo, não decoração */
  --zone-green: #4fa06a;
  --zone-amber: #c7952f;
  --zone-red:   #b8534c;

  /* raridades — hex do servidor */
  --r-comum:    #aaaaaa;
  --r-incomum:  #4adf6a;
  --r-raro:     #4a8aff;
  --r-epico:    #cc55ff;
  --r-lendario: #ff9900;

  --ff-display: "Cinzel", "Times New Roman", serif;
  --ff-verse:   "Cormorant Garamond", "Georgia", serif;
  --ff-body:    "Montserrat", "Segoe UI", system-ui, sans-serif;

  --fs-eyebrow: .72rem;
  --fs-body:    1.0rem;
  --fs-lead:    1.1rem;
  --fs-h3:      1.3rem;
  --fs-h2:      clamp(1.85rem, 4.2vw, 2.7rem);
  --fs-h1:      clamp(2.4rem, 7.4vw, 4.6rem);

  --wrap:       1080px;
  --gutter:     clamp(18px, 5vw, 52px);
}

/* Reset mínimo. No Artifact isto vinha pronto do hospedeiro; num site
   solto é nosso — sem `margin:0` o corpo nasce com a calha de 8px do
   navegador e a faixa de arte deixa de ser full-bleed. */
body{ margin: 0; }
img{ max-width: 100%; }

html{ background: var(--abyss); color-scheme: dark; }

/* O fundo escurece conforme a página desce — da superfície ao abismo.
   Attachment padrão (scroll) de propósito: o gradiente cobre o corpo
   inteiro do documento, então a descida acontece de verdade. */
body{
  background: linear-gradient(180deg,
              var(--surface) 0%,
              var(--deep)   34%,
              var(--abyss)  72%,
              var(--abyss) 100%);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

*{ box-sizing: border-box; }

.wrap{
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1,h2,h3{ margin:0; text-wrap: balance; font-weight: 600; }
p{ margin:0; }
img{ display:block; }

a{ color: var(--brass-lit); }

:where(a,button):focus-visible{
  outline: 2px solid var(--brass-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── peças recorrentes ─────────────────────────────────────── */

.eyebrow{
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
}

.verse{
  font-family: var(--ff-verse);
  font-style: italic;
  font-weight: 400;
  color: var(--brass-lit);
}

.lead{
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 62ch;
}

section{ padding-block: clamp(56px, 8vw, 104px); }

.sec-head{ display:flex; flex-direction:column; gap:12px; margin-bottom: clamp(28px,4vw,44px); }
.sec-head h2{ font-family: var(--ff-display); font-size: var(--fs-h2); line-height:1.12; letter-spacing:.01em; }

/* ── botões ────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--ff-body);
  font-size:.86rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  padding: 14px 26px;
  border-radius: 2px;
  text-decoration:none;
  border:1px solid transparent;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn-steam{
  background: linear-gradient(180deg, var(--brass-lit), var(--brass));
  color: #16120a;
  border-color: var(--brass-lit);
  box-shadow: 0 10px 30px -14px rgba(212,175,55,.75);
}
.btn-steam:hover{ transform: translateY(-2px); }
/* Enquanto não existe página da Steam o botão segue sendo o primário da tela:
   fica em ouro apagado, não em botão secundário. */
.btn-steam[aria-disabled="true"]{
  background: rgba(212,175,55,.09);
  color: var(--brass-lit);
  border-color: var(--brass);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.14);
  cursor: default;
}
.btn-steam[aria-disabled="true"]:hover{ transform:none; }
.btn-ghost{
  color: var(--ink-soft);
  border-color: rgba(125,147,166,.38);
}
.btn-ghost:hover{ border-color: var(--brass-dim); color: var(--brass-lit); }

.steam-note{
  font-size:.78rem; letter-spacing:.04em; color: var(--fathom);
}

/* ── topo ──────────────────────────────────────────────────── */

.topbar{
  position: relative; z-index:3;
  display:flex; align-items:center; gap: 16px 28px;
  padding-block: 22px;
  flex-wrap: wrap;
}
.wordmark{
  font-family: var(--ff-display);
  font-size: 1.25rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--ink);
  text-decoration:none;
  margin-right:auto;
}
.wordmark em{ font-style:normal; color: var(--brass); }
.nav{ display:flex; gap: 30px; align-items:center; }
.nav a{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fathom); text-decoration:none;
  transition: color .2s ease;
}
.nav a:hover{ color: var(--brass-lit); }

/* seletor de idioma — sempre visível, inclusive quando o menu some */
.lang{
  display:flex; align-items:stretch;
  border:1px solid rgba(125,147,166,.26);
  border-radius: 2px;
  overflow:hidden;
  flex:none;
}
.lang button{
  appearance:none; background:transparent; border:0;
  font-family: var(--ff-body);
  font-size:.7rem; font-weight:600; letter-spacing:.14em;
  color: var(--fathom);
  padding: 7px 11px;
  cursor:pointer;
  transition: color .2s ease, background-color .2s ease;
}
.lang button + button{ border-left:1px solid rgba(125,147,166,.2); }
.lang button:hover{ color: var(--brass-lit); }
.lang button[aria-pressed="true"]{
  color: #16120a;
  background: var(--brass);
  cursor: default;
}

/* ── herói ─────────────────────────────────────────────────── */

.hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-art{
  position:absolute; inset:0; z-index:-2;
  background-image: url("../img/baia.png");
  background-size: cover;
  background-position: 50% 42%;
  animation: swell 46s ease-in-out infinite alternate;
}
@keyframes swell{
  from{ transform: scale(1.03) translate3d(0,0,0); }
  to  { transform: scale(1.11) translate3d(0,-1.6%,0); }
}
/* Escurece o suficiente para o texto ficar legível e ainda deixar a frota
   fantasma aparecer — o véu anterior apagava a arte por completo. */
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(4,9,15,.92) 0%, rgba(4,9,15,.72) 38%, rgba(4,9,15,.28) 70%, rgba(4,9,15,.42) 100%),
    linear-gradient(180deg, rgba(10,26,40,.72) 0%, rgba(6,16,25,.10) 30%, rgba(6,16,25,.30) 74%, var(--surface) 99%);
}
.hero-inner{
  padding-block: clamp(64px, 12vw, 132px) clamp(64px, 10vw, 112px);
  display:flex; flex-direction:column; gap: 26px;
  max-width: 44rem;
}
.hero h1{
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: .005em;
  text-shadow: 0 6px 40px rgba(4,9,15,.85);
}
.hero h1 > span{ display:block; }
.hero h1 .verse{
  font-family: var(--ff-verse);
  font-size: .82em;
  line-height: 1.12;
  margin-top: .1em;
  letter-spacing: .01em;
}
.hero .lead{ text-shadow: 0 2px 18px rgba(4,9,15,.9); }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.hero-meta{
  display:flex; flex-wrap:wrap; gap: 8px 20px;
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fathom);
}

/* ── faixa de números ──────────────────────────────────────── */

.stats{
  border-block: 1px solid var(--brass-ghost);
  background: linear-gradient(180deg, rgba(18,38,63,.55), rgba(6,16,25,.35));
  padding-block: clamp(30px, 4.4vw, 46px);
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(18px, 3vw, 34px);
}
.stat{ display:flex; flex-direction:column; gap:6px; text-align:center; }
.stat b{
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 700;
  line-height:1;
  color: var(--brass-lit);
  font-variant-numeric: tabular-nums;
}
.stat span{
  font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  color: var(--fathom); line-height:1.5;
}

/* ── sobre ─────────────────────────────────────────────────── */

.about{
  display:grid;
  grid-template-columns: minmax(0,.86fr) minmax(0,1fr);
  gap: clamp(30px, 5vw, 62px);
  align-items:center;
}
.about-fig{ position:relative; margin:0; }
.about-fig img{
  width:100%; height:auto; max-width:100%;
  border-radius: 3px;
  border:1px solid var(--brass-ghost);
  filter: saturate(.94) brightness(.94);
}
.about-fig figcaption{
  margin-top:12px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fathom);
}
.about-body{ display:flex; flex-direction:column; gap:20px; }
.about-body h2{ font-family: var(--ff-display); font-size: var(--fs-h2); line-height:1.14; }
.about-body p{ color: var(--ink-soft); font-weight:300; }
.signature{
  font-family: var(--ff-verse);
  font-style:italic;
  font-size: 1.5rem;
  color: var(--brass);
  margin-top: 4px;
}

/* ── pilares ───────────────────────────────────────────────── */

.pillars{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2.4vw, 24px);
  align-items: stretch;
}
.pillar{
  display:flex; flex-direction:column; gap:14px;
  padding: clamp(22px, 2.6vw, 30px);
  background: linear-gradient(180deg, var(--hull-lit), var(--hull));
  border:1px solid rgba(125,147,166,.14);
  border-top: 1px solid var(--brass-dim);
  border-radius: 3px;
}
.chip{
  align-self:flex-start;
  font-size:.64rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color: var(--brass);
  border:1px solid var(--brass-dim);
  border-radius: 999px;
  padding: 5px 12px;
}
.pillar h3{ font-family: var(--ff-display); font-size: var(--fs-h3); line-height:1.24; }
.pillar p{ color: var(--fathom); font-size:.94rem; font-weight:300; }
.pillar ul{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:7px;
  font-size:.88rem; color: var(--ink-soft);
}
.pillar li{ display:flex; gap:10px; }
.pillar li::before{
  content:""; flex:none; margin-top:.62em;
  width:4px; height:4px; rotate:45deg; background: var(--brass); opacity:.7;
}

/* ── relíquias ─────────────────────────────────────────────── */

.relic-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: clamp(14px, 2.2vw, 26px);
}
.relic{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin:0; }
.relic img{
  width:100%; height:auto; max-width:118px;
  filter: drop-shadow(0 10px 18px rgba(4,9,15,.7));
}
.relic-name{
  font-family: var(--ff-display);
  font-size:.8rem; line-height:1.3; color: var(--ink-soft);
}
.relic-rar{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  display:flex; align-items:center; gap:6px;
}
.relic-rar::before{
  content:""; width:5px; height:5px; border-radius:50%; background: currentColor;
}
.rar-comum{ color: var(--r-comum); }
.rar-raro{ color: var(--r-raro); }
.rar-epico{ color: var(--r-epico); }
.rar-lendario{ color: var(--r-lendario); }

.legend{
  display:flex; flex-wrap:wrap; gap: 10px 26px;
  margin-top: clamp(28px,3.4vw,40px);
  padding-top: 22px;
  border-top:1px solid rgba(125,147,166,.14);
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
}
.legend i{ font-style:normal; display:flex; align-items:center; gap:8px; }
.legend i::before{ content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }

/* ── carta náutica / mares ─────────────────────────────────── */

.zone{ margin-bottom: clamp(28px, 3.6vw, 44px); }
.zone-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap: 6px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(125,147,166,.16);
}
.zone-head h3{
  font-family: var(--ff-display); font-size: 1.05rem;
  letter-spacing:.14em; text-transform:uppercase;
  display:flex; align-items:center; gap:11px;
}
.zone-head h3::before{
  content:""; width:10px; height:10px; rotate:45deg; background: currentColor;
}
.zone-head p{ font-size:.88rem; color: var(--fathom); font-weight:300; }
.z-green h3{ color: var(--zone-green); }
.z-amber h3{ color: var(--zone-amber); }
.z-red   h3{ color: var(--zone-red);   }

.seas{ display:flex; flex-direction:column; }
.sea{
  display:grid;
  grid-template-columns: 2.4rem minmax(0,1.5fr) minmax(0,1.4fr) auto;
  gap: 8px 18px;
  align-items:baseline;
  padding-block: 13px;
  border-bottom:1px solid rgba(125,147,166,.09);
  border-left: 2px solid transparent;
  padding-left: 14px;
  margin-left: -16px;
  transition: border-color .2s ease, background-color .2s ease;
}
.sea:hover{ background: rgba(18,38,63,.36); }
.z-green .sea:hover{ border-left-color: var(--zone-green); }
.z-amber .sea:hover{ border-left-color: var(--zone-amber); }
.z-red   .sea:hover{ border-left-color: var(--zone-red);   }

.sea-n{
  font-family: var(--ff-display); font-size:.82rem;
  color: var(--brass); opacity:.62; font-variant-numeric: tabular-nums;
}
.sea-name{ font-family: var(--ff-display); font-size: 1rem; color: var(--ink); }
.sea-boss{ font-size:.86rem; color: var(--ink-soft); font-weight:300; }
.sea-boss.none{ color: var(--fathom-dim); }
.sea-tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.tag{
  font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color: var(--fathom);
  border:1px solid rgba(125,147,166,.22);
  border-radius:2px; padding: 3px 8px; white-space:nowrap;
  font-style:normal;
}
.tag-gold{ color: var(--brass); border-color: var(--brass-dim); }

/* ── masmorras (tríptico) ──────────────────────────────────── */

.trip{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.2vw, 24px);
}
.trip figure{ margin:0; display:flex; flex-direction:column; gap:12px; }
.trip img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; max-width:100%;
  border-radius:3px; border:1px solid var(--brass-ghost);
  filter: saturate(.92) brightness(.9);
  transition: filter .3s ease;
}
.trip figure:hover img{ filter: saturate(1) brightness(1.02); }
.trip figcaption{ display:flex; flex-direction:column; gap:4px; }
.trip strong{ font-family: var(--ff-display); font-weight:600; font-size:.98rem; }
.trip span{ font-size:.78rem; color: var(--fathom); font-weight:300; }

/* ── sistemas (lista, não cartões) ─────────────────────────── */

.systems{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 clamp(30px, 5vw, 64px);
}
.sys{
  display:flex; flex-direction:column; gap:3px;
  padding-block: 17px;
  border-bottom:1px solid rgba(125,147,166,.11);
}
.sys dt{
  font-family: var(--ff-display); font-size:.98rem; color: var(--ink);
  display:flex; align-items:center; gap:10px;
}
.sys dt::before{
  content:""; flex:none; width:5px; height:5px; rotate:45deg;
  background: var(--brass); opacity:.8;
}
.sys dd{ margin:0; font-size:.88rem; color: var(--fathom); font-weight:300; line-height:1.6; }

/* ── perguntas ─────────────────────────────────────────────── */

.faq{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(22px,3vw,38px); }
.q{ display:flex; flex-direction:column; gap:8px; }
.q h3{ font-family: var(--ff-display); font-size:1.02rem; color: var(--brass-lit); }
.q p{ font-size:.92rem; color: var(--ink-soft); font-weight:300; }

/* ── chamada final ─────────────────────────────────────────── */

.finale{
  position:relative; isolation:isolate; overflow:hidden;
  text-align:center;
  padding-block: clamp(76px, 11vw, 130px);
  border-top:1px solid var(--brass-ghost);
}
/* O redemoinho gira de verdade. Para isso a arte precisa ser um QUADRADO
   maior que a diagonal da faixa e girar em torno do próprio centro — com
   `inset:0` os cantos ficavam vazios em cada 45° da volta. */
.finale-art{
  position:absolute; z-index:-2;
  top:50%; left:50%;
  width: 130vmax; height: 130vmax;
  translate: -50% -50%;
  background-image:url("../img/abismo.png");
  background-size: cover; background-position: 50% 50%;
  animation: drift 120s linear infinite;
}
@keyframes drift{
  from{ rotate: 0deg; }
  to  { rotate: 360deg; }
}
.finale-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(85% 70% at 50% 50%, rgba(4,9,15,.55) 0%, rgba(4,9,15,.9) 62%, var(--abyss) 100%);
}
.finale-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.finale h2{
  font-family: var(--ff-verse); font-style:italic; font-weight:400;
  font-size: clamp(2.1rem, 6vw, 3.4rem); line-height:1.1;
  color: var(--brass-lit);
}
.finale .lead{ text-align:center; margin-inline:auto; }

/* ── rodapé ────────────────────────────────────────────────── */

footer{
  border-top:1px solid rgba(125,147,166,.13);
  padding-block: 40px 52px;
}
.foot{
  display:flex; flex-wrap:wrap; gap: 26px 40px;
  justify-content:space-between; align-items:flex-start;
}
.foot-brand{ display:flex; flex-direction:column; gap:8px; max-width: 30ch; }
.foot-brand p{ font-size:.8rem; color: var(--fathom); font-weight:300; }
.foot-brand .wordmark{ margin-right:0; }
.foot-col{ display:flex; flex-direction:column; gap:9px; }
.foot-col h4{
  margin:0; font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  color: var(--brass); font-weight:600;
}
.foot-col a, .foot-col span{
  font-size:.82rem; color: var(--fathom); text-decoration:none; font-weight:300;
}
.foot-col a:hover{ color: var(--brass-lit); }
.foot-legal{
  margin-top: 34px; padding-top: 20px;
  border-top:1px solid rgba(125,147,166,.09);
  font-size:.72rem;
  display:flex; flex-wrap:wrap; gap: 6px 18px; justify-content:space-between;
  color: var(--fathom-dim);
}

/* ── responsivo ────────────────────────────────────────────── */

@media (max-width: 900px){
  .about{ grid-template-columns: minmax(0,1fr); }
  .pillars{ grid-template-columns: minmax(0,1fr); }
  .relic-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .systems{ grid-template-columns: minmax(0,1fr); }
  .faq{ grid-template-columns: minmax(0,1fr); }
  .nav{ display:none; }
}
@media (max-width: 620px){
  .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 18px; }
  .relic-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .trip{ grid-template-columns: minmax(0,1fr); }
  .sea{
    grid-template-columns: 2.2rem minmax(0,1fr);
    row-gap: 4px;
  }
  .sea-boss{ grid-column: 2; }
  .sea-tags{ grid-column: 2; justify-content:flex-start; }
  .hero-cta .btn{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── baixar ────────────────────────────────────────────────── */

.dl-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
}
.dl-card{
  display:flex; flex-direction:column; gap:16px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--hull);
  border:1px solid rgba(125,147,166,.16);
  border-radius: 3px;
  transition: border-color .22s ease, background-color .22s ease;
}
.dl-card:hover{ border-color: var(--brass-dim); background: var(--hull-lit); }

.dl-head{ display:flex; align-items:center; gap:14px; }
.dl-glyph{
  font-size:1.5rem; line-height:1;
  width:46px; height:46px; flex:0 0 46px;
  display:grid; place-items:center;
  background: var(--navy);
  border:1px solid rgba(212,175,55,.18);
  border-radius:3px;
}
.dl-head h3{
  font-family: var(--ff-display);
  font-size: var(--fs-h3); letter-spacing:.04em;
}
.dl-sub{ font-size:.78rem; letter-spacing:.06em; color: var(--fathom); }
.dl-body{ color: var(--ink-soft); font-size:.94rem; }

/* `margin-top:auto` alinha os dois botões na mesma linha mesmo quando um
   cartão tem uma linha de texto a mais que o outro. */
.dl-btn{ margin-top:auto; justify-content:center; }

.dl-meta{
  min-height:1.2em;              /* reserva a linha: sem isso o cartão pula de
                                    altura quando o tamanho do arquivo entra */
  font-size:.74rem; letter-spacing:.05em; color: var(--fathom);
  text-align:center;
}

.dl-note{
  margin-top: clamp(20px, 3vw, 30px);
  font-size:.8rem; line-height:1.7; color: var(--fathom);
  max-width: 62ch;
}

/* O "Baixar" do menu é o único link do topo com peso de ação. */
.nav-cta{ color: var(--brass) !important; font-weight:600; }
.nav-cta:hover{ color: var(--brass-lit) !important; }