/* ==========================================================================
   NOSTALGAR — Design System "Noite de Thais"
   identidade.css — componentes compartilhados (prefixo .ns-).
   Requer tokens.css e fontes/fontes.css carregados antes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

.ns-corpo {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Textura de pedra: ruído discreto sem imagem externa */
.ns-corpo::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 500px at 50% -140px, rgba(242, 169, 59, 0.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.08) 2px 4px);
  pointer-events: none;
}

.ns-link, .ns-prosa a {
  color: var(--cor-link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cor-link) 35%, transparent);
  transition: color var(--transicao), border-color var(--transicao), text-shadow var(--transicao);
}
.ns-link:hover, .ns-prosa a:hover {
  color: var(--brasa-2);
  border-bottom-color: var(--brasa-2);
  text-shadow: var(--brilho-tocha);
}

:where(.ns-corpo) :focus-visible {
  outline: 2px solid var(--brasa-1);
  outline-offset: 2px;
}

::selection { background: var(--brasa-3); color: var(--pedra-0); }

/* Sprites da era: nunca suavizar */
.ns-sprite { image-rendering: pixelated; }

/* Números de jogo (level, exp, gp) — VT323 é para número GRANDE e isolado
   (contadores, faixas). Dentro de tabela ele vira sã tabular: legibilidade
   primeiro (ver .ns-tabela .ns-num). */
.ns-num {
  font-family: var(--fonte-pixel);
  font-size: 1.18em;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Títulos
   -------------------------------------------------------------------------- */
.ns-titulo, .ns-subtitulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  letter-spacing: var(--caps-espaco);
  text-transform: uppercase;
  color: var(--cor-titulo);
  line-height: 1.2;
  margin: 0 0 var(--esp-4);
  text-shadow: 0 1px 0 #000;
}
.ns-titulo { font-size: var(--texto-2xl); }
.ns-subtitulo {
  font-size: var(--texto-xl);
  color: var(--brasa-1);
  border-bottom: 1px solid var(--linha-2);
  padding-bottom: var(--esp-2);
}

/* Ornamento central: ── ◆ ── */
.ns-divisor {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-6) 0;
  color: var(--brasa-3);
  border: 0;
}
.ns-divisor::before, .ns-divisor::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linha-2));
}
.ns-divisor::after { background: linear-gradient(90deg, var(--linha-2), transparent); }
.ns-divisor > span { font-size: var(--texto-xs); transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   Moldura biselada — o relevo 3D da marca (sem border-radius)
   -------------------------------------------------------------------------- */
.ns-moldura {
  border: 1px solid var(--linha-2);
  box-shadow:
    inset 1px 1px 0 var(--bisel-luz),
    inset -1px -1px 0 var(--bisel-sombra),
    var(--sombra-baixa);
}

/* Card sobre pedra */
.ns-card {
  background: linear-gradient(180deg, var(--pedra-4), var(--pedra-3) 55%);
  border: 1px solid var(--linha-2);
  box-shadow:
    inset 1px 1px 0 var(--bisel-luz),
    inset -1px -1px 0 var(--bisel-sombra),
    var(--sombra-card);
  padding: var(--esp-5);
}
a.ns-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
a.ns-card:hover {
  transform: translateY(-2px);
  border-color: var(--brasa-3);
  box-shadow:
    inset 1px 1px 0 var(--bisel-luz),
    inset -1px -1px 0 var(--bisel-sombra),
    var(--sombra-card), var(--brilho-tocha);
}

/* Pergaminho: superfície clara com cantos chanfrados (papel à mesa) */
.ns-pergaminho {
  background:
    linear-gradient(180deg, var(--perg-1), var(--perg-2)),
    var(--perg-1);
  color: var(--perg-tinta-1);
  clip-path: polygon(
    var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro),
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro)
  );
  border: 0;
  box-shadow: inset 0 0 0 2px var(--perg-3), inset 0 0 42px rgba(122, 90, 40, 0.18);
  padding: var(--esp-5) var(--esp-6);
}
.ns-pergaminho a { color: var(--lacre-3); }
.ns-pergaminho .ns-titulo, .ns-pergaminho .ns-subtitulo {
  color: var(--perg-tinta-1);
  text-shadow: none;
  border-color: var(--perg-3);
}

/* --------------------------------------------------------------------------
   Botões — bisel que afunda ao clicar
   -------------------------------------------------------------------------- */
.ns-btn {
  display: inline-block;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--texto-sm);
  letter-spacing: var(--caps-espaco);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  padding: 10px 22px 9px;
  color: var(--tinta-1);
  background: linear-gradient(180deg, var(--pedra-4), var(--pedra-2));
  border: 1px solid var(--linha-2);
  box-shadow:
    inset 1px 1px 0 var(--bisel-luz),
    inset -1px -1px 0 var(--bisel-sombra),
    0 2px 0 rgba(0, 0, 0, 0.5);
  transition: color var(--transicao), border-color var(--transicao),
              box-shadow var(--transicao), transform var(--transicao),
              background var(--transicao);
}
.ns-btn:hover {
  color: var(--brasa-2);
  border-color: var(--brasa-3);
  box-shadow:
    inset 1px 1px 0 var(--bisel-luz),
    inset -1px -1px 0 var(--bisel-sombra),
    0 2px 0 rgba(0, 0, 0, 0.5), var(--brilho-tocha);
}
.ns-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 1px 1px 0 var(--bisel-sombra),
    inset -1px -1px 0 var(--bisel-luz);
}

.ns-btn--primario {
  color: #241503;
  background: linear-gradient(180deg, var(--brasa-2), var(--brasa-1) 45%, var(--brasa-3));
  border-color: var(--brasa-3);
  text-shadow: 0 1px 0 rgba(255, 235, 190, 0.4);
}
.ns-btn--primario:hover {
  color: #180d00;
  background: linear-gradient(180deg, #ffd489, var(--brasa-2) 45%, var(--brasa-1));
}

/* --------------------------------------------------------------------------
   Tags / selos de estado
   -------------------------------------------------------------------------- */
.ns-tag {
  display: inline-block;
  font-family: var(--fonte-ui);
  font-weight: 500;
  font-size: var(--texto-xs);
  line-height: 1;
  letter-spacing: var(--caps-ui);
  text-transform: uppercase;
  padding: 5px 9px 4px;
  border: 1px solid var(--linha-2);
  color: var(--tinta-2);
  background: var(--pedra-2);
  white-space: nowrap;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.ns-tag--musgo { color: var(--musgo-2); border-color: var(--musgo-3); background: rgba(133, 172, 89, 0.10); }
.ns-tag--brasa { color: var(--brasa-2); border-color: var(--brasa-3); background: var(--brasa-veu); }
.ns-tag--lacre { color: #e89288;      border-color: var(--lacre-3); background: rgba(166, 43, 33, 0.14); }
.ns-tag--mana  { color: var(--mana-2); border-color: var(--mana-3);  background: rgba(127, 160, 204, 0.10); }

/* Selo de cera (marca de autenticidade em quotes/callouts) */
.ns-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%; /* única exceção circular: cera não tem canto */
  background: radial-gradient(circle at 35% 30%, var(--lacre-2), var(--lacre-1) 55%, var(--lacre-3));
  color: var(--perg-1);
  font-family: var(--fonte-display);
  font-weight: 900;
  font-size: 20px;
  box-shadow:
    inset 0 2px 3px rgba(255, 200, 180, 0.25),
    inset 0 -3px 5px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Callout (aviso com borda de brasa)
   -------------------------------------------------------------------------- */
.ns-callout {
  background: var(--brasa-veu);
  border: 1px solid var(--linha-2);
  border-left: 3px solid var(--brasa-1);
  padding: var(--esp-4) var(--esp-5);
}
.ns-callout--lacre { border-left-color: var(--lacre-2); background: rgba(166, 43, 33, 0.07); }
.ns-callout--musgo { border-left-color: var(--musgo-1); background: rgba(133, 172, 89, 0.07); }
.ns-callout--mana { border-left-color: var(--mana-1); background: rgba(127, 160, 204, 0.07); }

/* --------------------------------------------------------------------------
   Tabelas — dados de jogo
   -------------------------------------------------------------------------- */
.ns-rolagem { overflow-x: auto; }
.ns-tabela {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fonte-ui);        /* dado denso pede a sã, não a serifa */
  font-size: var(--texto-sm);
  background: var(--pedra-2);
  border: 1px solid var(--linha-2);
}
.ns-tabela th {
  font-family: var(--fonte-display);
  font-size: var(--texto-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--brasa-1);
  background: var(--pedra-0);
  padding: 11px 14px;
  border-bottom: 2px solid var(--brasa-3);
  white-space: nowrap;
}
.ns-tabela td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--linha-1);
  vertical-align: middle;
  line-height: 1.45;
}
.ns-tabela tbody tr { transition: background var(--transicao); }
.ns-tabela tbody tr:hover { background: var(--brasa-veu); }
.ns-tabela td .ns-sprite { vertical-align: middle; }
/* números dentro de tabela: sã tabular alinhada, nada de fonte pixel miúda */
.ns-tabela .ns-num {
  font-family: var(--fonte-ui);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Grades utilitárias
   -------------------------------------------------------------------------- */
.ns-grade {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ns-wrap {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--esp-4);
}

/* --------------------------------------------------------------------------
   Movimento — entradas discretas e a chama da tocha
   -------------------------------------------------------------------------- */
@keyframes ns-surgir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ns-tocha {
  0%, 100% { opacity: 0.85; }
  46%      { opacity: 1; }
  52%      { opacity: 0.78; }
  60%      { opacity: 0.96; }
}
.ns-surgir { animation: ns-surgir var(--transicao-lenta) both; }
.ns-tocha  { animation: ns-tocha 3.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ns-surgir, .ns-tocha { animation: none; }
  .ns-corpo * { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Barra de rolagem (WebKit) — taverna, não escritório
   -------------------------------------------------------------------------- */
.ns-corpo::-webkit-scrollbar { width: 12px; }
.ns-corpo::-webkit-scrollbar-track { background: var(--pedra-0); }
.ns-corpo::-webkit-scrollbar-thumb {
  background: var(--pedra-4);
  border: 1px solid var(--linha-2);
}
.ns-corpo::-webkit-scrollbar-thumb:hover { background: var(--brasa-3); }