/* ==========================================================================
   RAGNAROK CLASSIC IDLE — estrutura da página
   Cabeçalho, navegação, rodapé e os elementos fixos que acompanham o scroll.
   ========================================================================== */


/* ==========================================================================
   1. GRADE
   ========================================================================== */

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

.section { position: relative; padding-block: clamp(var(--s16), 9vw, var(--s32)); }
.section--tight { padding-block: clamp(var(--s12), 6vw, var(--s20)); }

/* O FILETE ENTRE AS SECOES (03/09/2026, pedido do dono).
   Um fio dourado de 1px no alto de cada secao que tem outra antes dela — por
   isso o seletor de irmao adjacente, e nao uma borda em toda secao: assim a
   primeira nao ganha linha (ali quem divide e a faixa de numeros) e nao ha
   linha dupla em lugar nenhum.

   Atravessa a pagina inteira e dissolve nas pontas, com a mesma mascara da
   faixa — as duas divisorias da pagina falam a mesma lingua. */
.pagina .section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold-a35);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

/* ==========================================================================
   1b. A FOLHA QUE COBRE O HERO (02/09/2026)
   --------------------------------------------------------------------------
   Tudo abaixo do hero mora em `.pagina`. O hero e `position: sticky` e fica
   preso no topo; esta folha, com fundo OPACO e z-index maior, desliza por
   cima dele na rolagem. O canto arredondado e a sombra para cima sao o que
   faz a leitura de "folha", e nao de "corte".

   O fundo precisa ser opaco de verdade: qualquer transparencia aqui deixaria
   o video do hero vazar pelo meio do texto. Os dois brilhos radiais repoem a
   profundidade que o `body` tinha e que a folha esconde.
   ========================================================================== */

.pagina {
  position: relative;
  z-index: 1;
  /* NADA DE ROLAGEM HORIZONTAL. `clip` e nao `hidden` de proposito: hidden
     criaria um contexto de rolagem e mataria o `position: sticky` do hero.
     Isto e rede de seguranca — qualquer bloco que entre deslizando de lado
     (as animacoes de 03/09) empurraria a largura da pagina sem ela. */
  overflow-x: clip;
  /* 03/09/2026: a folha subia 28px por cima do hero, para deixar a entrever
     que havia mais pagina abaixo. Com a faixa de numeros encostada no topo
     dela, esses 28px passaram a mostrar os numeros CORTADOS antes de qualquer
     rolagem. A folha agora comeca exatamente na dobra; quem avisa que ha mais
     e a seta do hero. */
  margin-top: 0;
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(30, 48, 112, .65) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 85% 45%, rgba(20, 35, 90, .5) 0%, transparent 65%),
    var(--bg-void);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, .55);
}
/* o fio dourado da borda superior, que acompanha a curva */
.pagina::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 28px;
  border-radius: inherit;
  border-top: 1px solid var(--gold-a35);
  pointer-events: none;
}
@media (max-width: 720px) {
  /* mesmo motivo do `margin-top: 0` acima: no celular o recuo era de 20px, e
     eram 20px de numero cortado antes de a pessoa rolar */
  .pagina { margin-top: 0; border-radius: 20px 20px 0 0; }
  .pagina::before { height: 20px; }
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: 62ch;
  margin-bottom: var(--s12);
}
.section__head--center { margin-inline: auto; text-align: center; align-items: center; }

.section__eyebrow {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .14em;
  color: var(--emerald);
  text-transform: uppercase;
}

.section__title {
  font-family: var(--f-epic);
  font-size: var(--t-2xl);
  font-weight: 700;
}

.section__lead { font-size: var(--t-lg); color: var(--muted); }

/* Grade automática — o número de colunas se resolve sozinho. */
.grid { display: grid; gap: var(--s6); }
/* Larguras escolhidas para que a contagem de itens de cada seção caia
   redonda no container de 1200px: 4 pilares numa linha, 6 sistemas em
   duas de três. Sobrar um card órfão na última linha fica desleixado. */
.grid--auto  { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
.grid--wide  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }


/* ==========================================================================
   2. PRÉ-CARREGADOR
   ========================================================================== */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s5);
  background: var(--bg-void);
  transition: opacity var(--slow) var(--ease), visibility var(--slow);
}
.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__mark {
  font-family: var(--f-epic);
  font-size: var(--t-lg);
  letter-spacing: .22em;
  text-indent: .22em;      /* compensa o espaço extra depois da última letra */
  text-align: center;
}

.preloader__bar { width: min(260px, 60vw); }

.preloader__text {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}
.preloader__text::after {
  content: '';
  animation: blink 1s steps(1) infinite;
}


/* ==========================================================================
   2b. BARRA DE PROGRESSO DA PÁGINA
   --------------------------------------------------------------------------
   Um fio dourado no topo que cresce conforme a pagina desce. Escala em X a
   partir da esquerda — e transformacao, entao anda na GPU e nao repinta nada.
   ========================================================================== */

.progresso {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 170;            /* acima do cabecalho (160), abaixo do modal (200) */
  height: 2px;
  pointer-events: none;
}
.progresso__fio {
  display: block;
  height: 100%;
  transform: scaleX(var(--lido, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi));
  box-shadow: 0 0 10px rgba(224, 176, 77, .55);
}

/* ==========================================================================
   3. CABEÇALHO
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Acima da gaveta (150) de propósito: com o menu aberto o botão vira um X
     e precisa continuar visível e clicável. A gaveta já reserva o espaço do
     cabeçalho no próprio padding-top. Abaixo do modal (200). */
  z-index: 160;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color var(--base) var(--ease), border-color var(--base) var(--ease), backdrop-filter var(--base);
}

/* Ao rolar, o cabeçalho ganha corpo para o texto não competir com o conteúdo. */
.site-header.is-stuck {
  background: rgba(7, 10, 20, .85);
  border-bottom-color: var(--gold-a15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}

.site-header > .container {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

/* --- marca --- */
.brand { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }
.brand__logo, .brand__texto { transition: transform var(--base) var(--ease); }
.brand:hover .brand__logo { transform: scale(1.06); }

/* O logotipo do jogo em miniatura (o mesmo arquivo de 640px do hero). Nasce
   escondido e so entra quando `initBrandLogo` confirma o `load`; ate la, e se
   o arquivo faltar, fica o letreiro em texto. */
.brand__logo {
  display: none;
  height: 46px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55));
}
.brand.tem-logo .brand__logo { display: block; }
.brand.tem-logo .brand__texto { display: none; }
.brand__texto { display: flex; flex-direction: column; }

/* 02/09/2026, pedido do dono: a marca da barra fica SEMPRE visível. Ela nascia
   escondida e só entrava depois da rolagem, para não repetir o logotipo que o
   hero já mostra grande no meio da tela. */
.brand__name {
  font-family: var(--f-epic);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
}
.brand__sub {
  display: block;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .16em;
  color: var(--emerald);
  margin-top: 4px;
}

/* --- navegação --- */
.nav { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }

.nav__link {
  position: relative;
  padding: var(--s2) var(--s3);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-sm);
  transition: color var(--base) var(--ease);
  /* As pills de estado entraram ao lado e a barra ficou apertada: sem isto
     "Como funciona" quebra em duas linhas e desalinha o cabeçalho inteiro. */
  white-space: nowrap;
}
.nav__link:hover { color: var(--text); }

/* Sublinhado que cresce do centro — marca a seção visível. */
.nav__link::after {
  content: '';
  position: absolute;
  left: var(--s3); right: var(--s3);
  bottom: 2px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--base) var(--ease);
}
.nav__link.is-active { color: var(--gold-hi); }
.nav__link.is-active::after { transform: scaleX(1); }

/* Separador fino entre os itens, como no site oficial do Ragnarok. */
.nav__link + .nav__link { margin-left: var(--s2); }
.nav__link + .nav__link::before {
  content: '';
  position: absolute;
  left: calc(var(--s2) * -1);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, .14);
}

.nav__link[data-external]::before {
  content: '↗';
  margin-right: 4px;
  font-size: .8em;
  color: var(--dim);
}

/* --- pills de estado do servidor ---
   Ficam entre a navegação e os botões. A de jogadores nasce `hidden` e só
   aparece quando o balcão responde de verdade — pill com "0 online" durante
   o carregamento diz uma coisa falsa sobre o servidor, e pill sem número diz
   coisa nenhuma. Ver `initEstadoDoServidor` no main.js. */
.server-pills {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 0 0 auto;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px var(--s3);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;   /* o relógio não pode tremer a cada segundo */
  color: var(--muted);
  background: rgba(7, 10, 20, .5);
  border: 1px solid var(--gold-a15);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pill b { color: var(--text); font-weight: 700; }
.pill[hidden] { display: none; }

.pill__icon { width: 13px; height: 13px; opacity: .75; }

.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--exp);
  box-shadow: 0 0 8px var(--exp);
  animation: pulse-online 2.4s ease-in-out infinite;
}
@keyframes pulse-online { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .pill__dot { animation: none; }
}

.header__actions { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }

/* --- botão sanduíche --- */
.burger {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--gold-a35);
  border-radius: var(--r-sm);
  background: rgba(232, 193, 79, .06);
}
.burger__bars { position: relative; width: 20px; height: 2px; background: var(--gold); border-radius: 2px; transition: background-color var(--fast); }
.burger__bars::before,
.burger__bars::after {
  content: '';
  position: absolute;
  left: 0; width: 20px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform var(--base) var(--ease);
}
.burger__bars::before { top: -7px; }
.burger__bars::after  { top:  7px; }

/* Vira um X quando o menu abre. */
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after  { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   4. GAVETA (navegação no celular)
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
}
.drawer.is-open { visibility: visible; }

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, .75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}
.drawer.is-open .drawer__backdrop { opacity: 1; }

.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: calc(var(--header-h) + var(--s6)) var(--s6) var(--s8);
  background: var(--bg-900);
  border-left: 1px solid var(--gold-a35);
  box-shadow: var(--shadow-panel);
  transform: translateX(100%);
  transition: transform var(--base) var(--ease);
  overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: none; }

.drawer__link {
  padding: var(--s4) var(--s3);
  font-size: var(--t-lg);
  font-family: var(--f-epic);
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.drawer__link:hover { color: var(--gold-hi); padding-left: var(--s5); }

.drawer__actions { display: grid; gap: var(--s3); margin-top: var(--s6); }


/* ==========================================================================
   5. TRILHO SOCIAL FLUTUANTE
   O painel da imagem de referência: moldura dourada, gemas e os dois ícones.
   ========================================================================== */

/* À esquerda, como nos portais de MMO: a direita fica livre para a barra
   de rolagem e para o conteúdo respirar.

   A flutuação vive no elemento de dentro, e a centralização mais o desvio
   de rolagem no de fora. Se as duas ficassem no mesmo elemento, o
   `transform` da animação apagaria o `translateY(-50%)` e o trilho
   descentralizaria — que era exatamente o que estava acontecendo. */
.social-rail {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  top: 50%;
  z-index: 90;
  transform: translate3d(0, calc(-50% + var(--rail-drift, 0px)), 0);
  will-change: transform;
}

.social-rail__inner {
  animation: float 4.5s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s3);
}

.social-rail__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--muted);
  transition:
    transform var(--base) var(--ease-out-back),
    color var(--base) var(--ease),
    border-color var(--base) var(--ease),
    box-shadow var(--base) var(--ease);
}
.social-rail__link svg { width: 24px; height: 24px; }

.social-rail__link:hover { transform: scale(1.12); }

/* Cada rede acende na sua própria cor. */
.social-rail__link--instagram:hover {
  color: #fff;
  border-color: #d6249f;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7);
  box-shadow: 0 0 22px rgba(214, 36, 159, .5);
}
.social-rail__link--discord:hover {
  color: #fff;
  border-color: #5865f2;
  background: #5865f2;
  box-shadow: 0 0 22px rgba(88, 101, 242, .55);
}

/*
 * NO CELULAR O TRILHO SAI DA TELA (03/09/2026, pedido do dono).
 *
 * Ele virava uma barra presa no rodape, e numa tela pequena isso e area de
 * conteudo perdida em cima do polegar — ainda mais convivendo com o botao
 * fixo de pre-registro no mesmo canto. As duas redes continuam a um toque:
 * na gaveta do menu e no rodape.
 */
@media (max-width: 640px) {
  .social-rail { display: none; }
  .rune-tooltip { display: none; }
}

/* As redes dentro da gaveta. */
.drawer__social {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.drawer__social a {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--gold-a35);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.drawer__social a svg { width: 22px; height: 22px; }
.drawer__social a:hover,
.drawer__social a:focus-visible { color: var(--gold-hi); border-color: var(--gold); background: var(--gold-a15); }


/* ==========================================================================
   6. RODAPÉ
   ========================================================================== */

.site-footer {
  /* a seção anterior já traz o próprio respiro embaixo */
  padding-top: var(--s16);
  border-top: 1px solid var(--gold-a15);
  background: linear-gradient(180deg, transparent, rgba(3, 5, 12, .6));
}

.footer__grid {
  display: grid;
  gap: var(--s10);
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom: var(--s12);
}

.footer__about { display: flex; flex-direction: column; gap: var(--s4); }
.footer__tagline { font-size: var(--t-sm); color: var(--muted); max-width: 38ch; }

.footer__social { display: flex; gap: var(--s3); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--gold-a35);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.footer__social a svg { width: 20px; height: 20px; }
.footer__social a:hover { color: var(--gold-hi); border-color: var(--gold); background: var(--gold-a15); }

.footer__col h3 {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: var(--s4);
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.footer__col a { font-size: var(--t-sm); color: var(--muted); transition: color var(--fast) var(--ease); }
.footer__col a:hover { color: var(--gold-hi); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: var(--t-xs);
  color: var(--dim);
}
.footer__legal { max-width: 70ch; }

/* Espaço extra no rodapé para o botão fixo de pré-registro não cobrir o
   texto (a barra social saiu do celular em 03/09). */
@media (max-width: 640px) {
  .footer__bottom { padding-bottom: calc(var(--s6) + 64px); }
}


/* ==========================================================================
   7. PONTOS DE QUEBRA
   ========================================================================== */

/* O relógio é o primeiro a sair: é o dado menos útil dos três, e a barra
   fica apertada bem antes de a navegação sumir. */
@media (max-width: 1180px) {
  #pill-clock { display: none; }
}

@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header__actions .rune-btn--ghost { display: none; }

  /*
   * A BARRA NO CELULAR: marca ao CENTRO, acoes a DIREITA (03/09/2026).
   *
   * Com a navegacao escondida, o `margin-left: auto` que empurrava tudo para
   * a direita ia embora junto com ela — e o botao do menu terminava colado no
   * logotipo, na esquerda. A marca sai do fluxo para ficar no meio de
   * verdade (centrar por flex dependeria de os dois lados terem a mesma
   * largura, e nao tem).
   */
  .site-header > .container { position: relative; }
  .site-header .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .header__actions { margin-left: auto; }
}

@media (max-width: 560px) {
  .header__actions .rune-btn { display: none; }
  .server-pills { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}


/* ==========================================================================
   8. ERGONOMIA DE CELULAR (26/08/2026)
   --------------------------------------------------------------------------
   Vem de uma auditoria MEDIDA em 390x844 e 360x800, não de impressão. O que
   ela achou: 17 alvos de toque abaixo do piso de 44px (os links do rodapé
   tinham 16px de altura), e 23 trechos de texto abaixo de 12px — o menor
   deles com 7px.

   As correções ficam TODAS atrás de `@media (pointer: coarse)` ou de largura,
   porque no desktop, com mouse, um link de 16px é clicável sem esforço e o
   texto pequeno é hierarquia deliberada. Alargar tudo em toda tela trocaria
   um problema de celular por um de composição no desktop.
   ========================================================================== */

@media (pointer: coarse) {
  /*
   * O piso é 44px, o número da Apple (o do Google é 48). Vale para o que se
   * TOCA, e o jeito de chegar nele sem inchar o layout é padding vertical +
   * `inline-flex`: a caixa clicável cresce, a linha de texto fica onde está.
   */
  .footer__col a,
  .footer__bottom a,
  .drawer__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Com os links mais altos, o `gap` da lista vira espaço a mais: a caixa
     clicável já encosta na de baixo. Sem isto o rodapé estica sem motivo. */
  .footer__col ul { gap: 0; }

  /* O trilho social já é 44x44 no desktop; no celular ele vira barra e os
     ícones precisam do mesmo piso. */
  .social-rail__link { min-width: 44px; min-height: 44px; }

  /* O par de sexo do carrossel de classes tinha 58x24. */
  .gender-switch__btn { min-height: 44px; padding-inline: var(--s4); }

  .rune-titlebar__close { min-width: 44px; min-height: 44px; }

  /* Os ícones sociais do rodapé nascem 40x40 — quatro pixels do piso. */
  .footer__social a { width: 44px; height: 44px; }

  /* `--quiet` é a variante sem moldura, e o `min-height: 38px` dela é do
     desktop. No toque ela é um link como outro qualquer. */
  .rune-btn--quiet { min-height: 44px; }
}