/* Pele "Crônica Shinobi" da landing (MVP, 2026-09-24). Camada por cima de landing.css — remover a
   <link> do landing.html devolve a página antiga. Mesmas fontes e paleta de cronica.css. */
@font-face { font-family: 'Lilita One'; src: url('fonts/lilita-one.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/manrope.woff2') format('woff2'); font-weight: 500 800; font-display: swap; }
:root {
  --cr-acao: #f26a21; --cr-acao2: #ff8a3d; --cr-ouro: #ffce56; --cr-ouro-esc: #c98a1b;
  --cr-papel: #f6d58a; --cr-papel-claro: #fdf0cf; --cr-madeira: #4a291b; --cr-tinta: #211711; --cr-carimbo: #b9362b;
  --gold: var(--cr-ouro);
}
body { font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(180deg, #2b170e55 0%, #2b170ecc 100%), url('/imgs/fundosite.jpg') #2b170e;
  background-size: cover; background-position: center top; background-attachment: fixed; }

/* títulos de anime: laranja com contorno de tinta */
.lp-hero h1, .lp-sec h2, .lp-final h2 {
  font-family: 'Lilita One', 'Segoe UI', sans-serif; font-weight: 400; letter-spacing: .01em; color: #fff4dc;
  text-shadow: -2px -2px 0 var(--cr-tinta), 2px -2px 0 var(--cr-tinta), -2px 2px 0 var(--cr-tinta), 2px 2px 0 var(--cr-tinta), 0 4px 0 var(--cr-tinta);
}
.lp-hero h1 em { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--cr-acao2); }
.lp-logo { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .03em; }
.lp-eyebrow { color: var(--cr-tinta); background: var(--cr-ouro); border: 2px solid var(--cr-tinta); box-shadow: 0 2px 0 var(--cr-tinta); }

/* barra do topo e faixa de números: madeira com aro dourado */
.lp-nav { background: linear-gradient(180deg, #6b3d25, var(--cr-madeira)); border-bottom: 3px solid var(--cr-tinta); box-shadow: inset 0 -2px 0 var(--cr-ouro-esc); }
.lp-nav-links a { color: #f3dcb0; font-weight: 700; }
.lp-stats { background: linear-gradient(180deg, #6b3d25, var(--cr-madeira)); border: 2.5px solid var(--cr-tinta); box-shadow: inset 0 0 0 2px var(--cr-ouro-esc); color: #fff4dc; }
.lp-stat { border-color: #ffffff22; }

/* botões: laranja de ação com contorno e sombra chapada */
.lp-btn { background: linear-gradient(180deg, var(--cr-acao2), var(--cr-acao)); color: #fff; text-shadow: 0 1px 0 var(--cr-tinta);
  border: 2.5px solid var(--cr-tinta); box-shadow: 0 4px 0 var(--cr-tinta); border-radius: 12px; }
.lp-btn:hover { box-shadow: 0 6px 0 var(--cr-tinta); }
.lp-btn.ghost { background: #fff8e6; color: var(--cr-tinta); text-shadow: none; border: 2.5px solid var(--cr-tinta); box-shadow: 0 4px 0 var(--cr-tinta); }
.lp-btn.ghost:hover { background: #ffe7b8; color: var(--cr-tinta); border-color: var(--cr-tinta); }

/* seções com fundo: faixa washi dourada; cartões: pergaminho com contorno de tinta */
.lp-sec.alt { background: url('/imgs/ui/washi.jpg') center / cover; border-top: 3px solid var(--cr-tinta); border-bottom: 3px solid var(--cr-tinta); }
.lp-sec.alt h2 + *, .lp-sec.alt .lp-sec-lead { color: var(--cr-tinta); }
.lp-step, .lp-card, .lp-village, .lp-ninja {
  --txt: var(--cr-tinta); --mut: #6b4a2e; --line: #d8b77a; --line2: #8a5a2b;
  background: linear-gradient(180deg, var(--cr-papel-claro), var(--cr-papel) 170%); color: var(--cr-tinta);
  border: 2.5px solid var(--cr-tinta); border-radius: 12px; box-shadow: 0 4px 0 var(--cr-tinta);
}
.lp-card h3, .lp-step h3, .lp-village h3 { color: var(--cr-madeira); }
.lp-rodape { background: var(--cr-madeira); border-top: 3px solid var(--cr-tinta); color: #f3dcb0; }
.lp-rodape a { color: var(--cr-ouro); }

/* a mini-batalha do topo ganha moldura de madeira e céu de fim de tarde */
.lp-hero-stage { border: 3px solid var(--cr-tinta); border-radius: 14px;
  box-shadow: 0 0 0 5px var(--cr-madeira), 0 0 0 7px var(--cr-tinta), 0 18px 40px #000a;
  background: linear-gradient(180deg, #f59a2c 0%, #ffbe6b 45%, #8fbf6a 68%, #5f8f45 100%); }
.stg-ground { background: linear-gradient(180deg, #b58a4f 0%, #8a6334 100%); border-top: 3px solid var(--cr-tinta); }

/* ícones ilustrados na landing (2026-09-25) */
.lp-logo { display: inline-flex; align-items: center; gap: 8px; }
.lp-logo .ico { width: 30px; height: 30px; }
.lp-village .emb .ico { width: 64px; height: 64px; }
/* cor da vila no papel claro: a cor do elemento pura some no creme (Raio/Vento) — mesma cor,
   escurecida, com peso maior */
.lp-village .nome i, .lp-village .kage { color: color-mix(in srgb, var(--cor-vila, #b36b00) 55%, #211711); font-weight: 800; }
/* o `.lp-hero-stage img` dos sprites (absoluto, 132px, pixelado) pegava também o ícone do choque */
.lp-hero-stage .stg-clash img { position: static; width: 46px; height: 46px; image-rendering: auto; filter: none; }