/* ============================================================
   STYLE.CSS — Ninja Revolution / Naruto Players 2.0
   Base global: tokens, reset, tipografia, botões, mensagens.
   Conceito: "dossiê shinobi" — tinta, selos, pergaminho rasgado.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&family=Chakra+Petch:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* tinta / superfícies */
  --ink-950: #313131;
  /* --page-bg: cor de fundo da PÁGINA (body/.np-body e as classes .xxx-body
     de cada tela) — separada de --ink-950, que continua sendo reaproveitada
     como cor de "slot vazio" em vários componentes (avatares, ícones de
     doujutsu, badges de aba activa etc.). Trocar só --page-bg testa a cor
     de fundo sem recolorir esses componentes internos junto. */
  --page-bg: #FFB800;
  /* --header-bg: cor do cabeçalho (.np-topbar) — testada separadamente da
     cor de fundo da página. --header-bg-dim é usada só pro degradê. */
  --header-bg: #269DDB;
  --header-bg-dim: #1c76a4;
  --ink-900: #0e1117;
  --ink-850: #12151d;
  --ink-800: #1a1f2b;
  --ink-750: #202533;
  --ink-700: #262d3a;
  --ink-line: rgba(255,255,255,.08);
  --ink-line-strong: rgba(255,255,255,.14);

  /* acentos */
  --chakra: #4fd1ff;
  --chakra-dim: #2b7ea3;
  --chakra-glow: rgba(79,209,255,.35);
  --ember: #ff5a36;
  --ember-dim: #b8391f;
  --ember-glow: rgba(255,90,54,.35);
  --gold: #d9a441;
  --gold-dim: #96702b;
  --parchment: #ede3c8;

  /* texto */
  --text: #dde2ea;
  --text-dim: #8891a1;
  --text-faint: #565e6f;

  /* estado */
  --success: #35d488;
  --danger:  #ff4d5e;
  --warning: #f1c40f;

  /* forma */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --notch: 16px; /* tamanho do corte "pergaminho rasgado" */

  /* tipografia */
  --font-display: 'Yuji Syuku', 'Hiragino Mincho ProN', serif;
  --font-body: 'Chakra Petch', 'Nunito', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: .3px; }
p { margin: 0; }

/* Respeita usuários com preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* foco visível — acessibilidade */
:focus-visible {
  outline: 2px solid var(--chakra);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: 10px; border: 2px solid var(--ink-900); }
::-webkit-scrollbar-thumb:hover { background: var(--chakra-dim); }
* { scrollbar-width: thin; scrollbar-color: var(--ink-700) var(--ink-900); }

/* ── UTILITÁRIOS ────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── ASSINATURA: painel "dossiê rasgado" ───────────────────────
   Canto superior-direito cortado + linha de tinta no corte.
   Reaproveitado em cards, modais e barras do jogo inteiro.     */
.np-panel,
.np-modal-card {
  position: relative;
  background: var(--ink-800);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  clip-path: polygon(
    0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% 100%, 0 100%
  );
}
.np-panel::before,
.np-modal-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: var(--notch); height: var(--notch);
  background: linear-gradient(135deg, transparent 48%, var(--chakra-dim) 49%, transparent 51%);
  opacity: .8;
  pointer-events: none;
}

/* ── BOTÕES ─────────────────────────────────────────────────── */
.btn-primary,
.np-btn-sair,
.np-tool-btn,
.perg-btn-entrar,
.reg-btn-criar {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid var(--ink-line-strong);
  background: var(--ink-750);
  color: var(--text);
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  position: relative;
  transition: transform .12s ease, border-color .12s ease, color .12s ease;
  overflow: hidden;
}
.btn-primary::after,
.perg-btn-entrar::after,
.reg-btn-criar::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%; bottom: 0;
  height: 2px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.btn-primary:hover::after,
.perg-btn-entrar:hover::after,
.reg-btn-criar:hover::after { transform: scaleX(1); }

.btn-primary,
.perg-btn-entrar,
.reg-btn-criar {
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
  border-color: var(--ember-dim);
  color: #fff;
}
.btn-primary:hover,
.perg-btn-entrar:hover,
.reg-btn-criar:hover {
  border-color: var(--ember);
  transform: translateY(-1px);
}
.btn-primary:active,
.perg-btn-entrar:active { transform: translateY(0); }

.np-btn-sair {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
  padding: 6px 14px;
  font-size: .82rem;
}
.np-btn-sair:hover { background: rgba(255,77,94,.12); }

.btn-cancelar-ren {
  font-family: var(--font-body);
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--ink-line-strong);
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: border-color .12s ease, color .12s ease;
}
.btn-cancelar-ren:hover { border-color: var(--text-dim); color: var(--text); }

.np-tool-btn {
  font-size: .78rem;
  padding: 6px 12px;
  border-color: var(--chakra-dim);
  color: var(--chakra);
  background: rgba(79,209,255,.06);
}
.np-tool-btn:hover { border-color: var(--chakra); background: rgba(79,209,255,.14); }

button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

/* ── MENSAGENS (msg-box) ────────────────────────────────────── */
.msg-box {
  display: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--chakra);
  background: var(--ink-800);
  color: var(--text);
  margin-bottom: 12px;
}
.msg-box.show,
.msg-box.success,
.msg-box.error,
.msg-box.warning,
.msg-box.info { display: block; }
.msg-box.success { border-left-color: var(--success); color: #b9f5d8; background: rgba(53,212,136,.08); }
.msg-box.error   { border-left-color: var(--danger);  color: #ffc2c9; background: rgba(255,77,94,.08); }
.msg-box.warning { border-left-color: var(--warning); color: #fbe9a8; background: rgba(241,196,15,.08); }
.msg-box.info     { border-left-color: var(--chakra);  color: #cdeeff; background: rgba(79,209,255,.08); }

/* ── ABAS / FILTROS genéricos (reaproveitados por várias páginas) ── */
.jut-aba, .mis-filtro-btn, .pvp-vila-btn, .tab-btn,
.bijuu-filtro-btn, .inv-filtro-btn, .rnk-aba {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .82rem;
  padding: 8px 16px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  background: var(--ink-800);
  color: var(--text-dim);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.jut-aba:hover, .mis-filtro-btn:hover, .pvp-vila-btn:hover, .tab-btn:hover,
.bijuu-filtro-btn:hover, .inv-filtro-btn:hover, .rnk-aba:hover {
  color: var(--text);
  border-color: var(--chakra-dim);
}
.jut-aba.active, .mis-filtro-btn.active, .pvp-vila-btn.active, .tab-btn.active,
.bijuu-filtro-btn.active, .inv-filtro-btn.active, .rnk-aba.active {
  color: var(--ink-950);
  background: var(--chakra);
  border-color: var(--chakra);
}

/* ── INPUTS genéricos ───────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, select {
  font-family: var(--font-body);
  background: var(--ink-900);
  border: 1px solid var(--ink-line-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  transition: border-color .12s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--chakra);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* Números / HUD (ryous, chakra, hp) — usar .np-mono onde fizer sentido */
.np-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── RODAPÉ LEGAL — aviso de fã-projeto, presente em todas as páginas ── */
.np-legal-footer {
  max-width: 900px;
  margin: 40px auto 18px;
  padding: 16px 22px 0;
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-body);
  font-size: .66rem;
  line-height: 1.55;
  color: var(--text-faint);
  text-align: center;
}
.np-legal-footer p { margin: 0 0 6px; }
.np-legal-footer p:last-child { margin-bottom: 0; }