/* Vidas de Lenda — pele PIXEL ART (Fase 8).
   Especificação visual: docs/fase9/previa-pixel-art.html, aprovada pelo
   usuário em 2026-08-13. Tudo é CSS: nenhum arquivo de imagem, nenhuma fonte
   baixada, nenhum canvas. A paleta é FECHADA em 14 cores — pixel art não é
   filtro, é restrição, e é a restrição que faz a pele parecer desenhada em
   vez de estilizada.

   Tema único por decisão de direção (o jogo é escuro). Não há bloco de
   prefers-color-scheme: toda cor é pintada explicitamente, então a página se
   sustenta sobre qualquer fundo do sistema.

   Regras da pele, quando for preciso acrescentar algo:
   1. Borda de 2px (--px) sólida em --borda; sombra DURA (box-shadow sem blur)
      em --preto. Nada de border-radius, nada de gradiente suave.
   2. Rótulos em caixa alta com letter-spacing; números em tabular-nums.
   3. --ouro é o único destaque; --sangue e --brasa só para perda e morte;
      --musgo e --verde só para ganho.
   4. Barra é BLOCO discreto (repeating-linear-gradient), nunca preenchimento
      contínuo. */

:root {
  /* --- a paleta fechada (14) --- */
  --preto:   #10121c;
  --fundo:   #1a1c2c;
  --caixa2:  #232a40;
  --caixa:   #333c57;
  --borda:   #566c86;
  --apagado: #94b0c2;
  --claro:   #f4f4f4;
  --ouro:    #ffcd75;
  --brasa:   #ef7d57;
  --sangue:  #b13e53;
  --musgo:   #a7f070;
  --verde:   #38b764;
  --anil:    #3b5dc9;
  --gelo:    #41a6f6;

  --px: 2px;  /* o "pixel" da interface */
  --f: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--fundo);
  color: var(--claro);
  font-family: var(--f);
  font-size: 14px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  /* dither de fundo: xadrez de 6px — o meio-tom do 16 bits, feito de cor
     chapada em vez de gradiente. */
  background-image: repeating-conic-gradient(var(--caixa2) 0% 25%, transparent 0% 50%);
  background-size: 6px 6px;
  image-rendering: pixelated;
}

#app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hidden { display: none !important; }

button, input {
  font-family: var(--f);
  border-radius: 0;
}
button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: var(--px) solid var(--ouro);
  outline-offset: var(--px);
}

.title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ouro);
  text-shadow: var(--px) var(--px) 0 var(--preto);
  text-wrap: balance;
}

/* ===== Botões ===== */
.btn-primary {
  display: block;
  width: 100%;
  min-height: 46px;
  background: var(--ouro);
  color: var(--preto);
  border: var(--px) solid var(--ouro);
  box-shadow: 4px 4px 0 var(--preto);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 10px 14px;
}
.btn-primary:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--preto); }
.btn-primary:disabled {
  background: var(--caixa);
  border-color: var(--borda);
  color: var(--apagado);
  box-shadow: 4px 4px 0 var(--preto);
  cursor: not-allowed;
}

.btn-secondary {
  display: block;
  width: 100%;
  min-height: 46px;
  background: var(--caixa2);
  color: var(--claro);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  padding: 10px 14px;
}
.btn-secondary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--preto); }

.icon-btn {
  min-width: 46px;
  min-height: 46px;
  background: var(--caixa);
  color: var(--ouro);
  border: var(--px) solid var(--borda);
  box-shadow: 3px 3px 0 var(--preto);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.icon-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--preto); }

/* ===== Overlays (seções de #app) ===== */
.overlay { width: 100%; }

#creator {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--fundo);
  background-image: repeating-conic-gradient(var(--caixa2) 0% 25%, transparent 0% 50%);
  background-size: 6px 6px;
  overflow-y: auto;
  padding: 26px 16px 40px;
}

#hud {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--caixa);
  border-bottom: 4px solid var(--borda);
  padding: 9px 12px;
}

#stage {
  flex: 1;
  padding: 13px;
  padding-bottom: 84px; /* a barra de navegação flutua por cima do fim */
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* Barra de navegação fixa: ficha, marca no mundo e saves. */
#savebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  gap: var(--px);
  padding: 6px;
  background: var(--preto);
  border-top: 4px solid var(--borda);
}
#savebar .icon-btn { flex: 1; box-shadow: none; }
#savebar .icon-btn:active { transform: none; }

/* ===== A caixa — o átomo da pele ===== */
.caixa {
  background: var(--caixa);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  padding: 12px;
}
.rot, .panel-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 9px;
}

/* ===== Criador de personagem ===== */
.creator-head { margin-bottom: 4px; }
.creator-step {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ouro);
}
.creator-head .title { font-size: 22px; }
.creator-intro {
  margin: 10px 0 20px;
  color: var(--apagado);
  font-size: 13px;
  line-height: 1.6;
}

.panel {
  background: var(--caixa);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  padding: 13px;
  margin-bottom: 16px;
}
.creator-input {
  width: 100%;
  min-height: 46px;
  background: var(--preto);
  border: var(--px) solid var(--borda);
  color: var(--claro);
  font-size: 16px;
  padding: 10px 11px;
}
.creator-input:focus { border-color: var(--ouro); outline: none; }

.creator-spacer { margin-top: 14px; }

.name-row { display: flex; gap: 8px; align-items: stretch; }
.name-row .creator-input { flex: 1; }
.name-row .icon-btn { flex: 0 0 auto; font-size: 20px; }

.world-choice { display: flex; flex-direction: column; }

/* ===== Card provisório (ano vazio, erro de carga) ===== */
.provisional-card {
  background: var(--caixa);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  padding: 14px;
}
.provisional-card .title { font-size: 18px; margin-bottom: 9px; }
.provisional-card p { color: var(--apagado); font-size: 13px; line-height: 1.6; margin: 0 0 12px; }

/* ===== HUD ===== */
.hud-line1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hud-name {
  color: var(--ouro);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hud-age, .hud-title { color: var(--apagado); font-size: 11px; }
.hud-title { margin-left: auto; }
.hud-line2 {
  display: flex;
  gap: 14px;
  margin-top: 5px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.hud-stat { color: var(--claro); }
.hud-line3 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.hud-nemesis { margin-top: 6px; font-size: 11px; color: var(--brasa); }

/* ===== Chips ===== */
.chip {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border: var(--px) solid var(--borda);
  color: var(--apagado);
  box-shadow: 2px 2px 0 var(--preto);
  white-space: nowrap;
}
.chip--up { color: var(--musgo); border-color: var(--verde); }
.chip--down { color: var(--brasa); border-color: var(--sangue); }
.chip--danger { color: var(--claro); background: var(--sangue); border-color: var(--sangue); }
.chip--arte { color: var(--ouro); border-color: var(--ouro); }

/* ===== Card de evento ===== */
.event-card {
  background: var(--caixa);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  padding: 12px;
}
.event-text { font-size: 13px; line-height: 1.65; margin: 0; }

.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-height: 44px;
  width: 100%;
  text-align: left;
  background: var(--caixa2);
  border: var(--px) solid var(--borda);
  box-shadow: 3px 3px 0 var(--preto);
  color: var(--claro);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 11px;
  cursor: pointer;
}
.choice:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--preto); }
.choice:hover:not(:disabled) { border-color: var(--ouro); }
.choice--locked { opacity: 0.5; cursor: not-allowed; }
.choice-badge {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--claro);
  background: var(--borda);
  padding: 1px 5px;
}
.choice-text { font-size: 12px; line-height: 1.45; }
.choice-chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* ===== Desfecho ===== */
.outcome-card {
  background: var(--caixa);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  padding: 12px;
}
.outcome-text { font-size: 13px; line-height: 1.65; margin: 0 0 11px; }
.outcome-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.outcome-death {
  margin: 0 0 12px;
  padding: 7px 9px;
  background: var(--sangue);
  color: var(--claro);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===== Barras em blocos (Vida / Essência) ===== */
.barras { display: flex; flex-direction: column; gap: 10px; }
.barra-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.barra-nome { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); }
.barra-num { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.trilho { height: 14px; background: var(--preto); border: var(--px) solid var(--borda); padding: 2px; }
.fill { display: block; height: 100%; }
.fill--vida { background-image: repeating-linear-gradient(90deg, var(--sangue) 0 8px, var(--preto) 8px 10px); }
.fill--ess { background-image: repeating-linear-gradient(90deg, var(--gelo) 0 8px, var(--preto) 8px 10px); }

/* ===== Crônica do ano ===== */
.chronicle-card {
  background: var(--caixa);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  padding: 12px;
}
.chronicle-year {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--ouro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: var(--px) var(--px) 0 var(--preto);
}
/* Autoria na cara: a linha do jogador é dourada e acesa, a do mundo é
   apagada. É o que torna "o mundo corre sem você" visível de relance. */
.linhas, .chronicle-lines {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.linhas li, .chronicle-lines li {
  font-size: 12px;
  line-height: 1.5;
  padding-left: 11px;
  border-left: var(--px) solid var(--borda);
  color: var(--apagado);
}
.linhas li.voce, .chronicle-lines li.voce { border-left-color: var(--ouro); color: var(--claro); }
.chronicle-life { border-left-color: var(--anil) !important; }

/* ===== Draft trienal ===== */
.draft-card {
  background: var(--caixa);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  padding: 12px;
}
.draft-title {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--ouro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.draft-options { display: flex; flex-direction: column; gap: 8px; }
.draft-option {
  width: 100%;
  min-height: 46px;
  text-align: left;
  background: var(--caixa2);
  border: var(--px) solid var(--borda);
  box-shadow: 3px 3px 0 var(--preto);
  color: var(--claro);
  font-size: 12px;
  padding: 11px;
  cursor: pointer;
}
.draft-option:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--preto); }
.draft-option--rare { border-color: var(--ouro); color: var(--ouro); }

/* ===== Epílogo ===== */
.epilogue { display: flex; flex-direction: column; gap: 11px; }
.epilogue-title {
  margin: 0;
  font-size: 22px;
  color: var(--ouro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: var(--px) var(--px) 0 var(--preto);
}
.epilogue-col {
  background: var(--caixa);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  padding: 12px;
}
.epilogue-col h3 {
  margin: 0 0 9px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);
  font-weight: 400;
}
.epilogue-col p { margin: 0 0 7px; font-size: 12px; line-height: 1.55; }
.epilogue-col p:last-child { margin-bottom: 0; }
.epilogue-col ul { margin: 0 0 7px; padding-left: 16px; font-size: 12px; line-height: 1.55; }
.ambition-cumpriu { color: var(--musgo); }
.ambition-perto { color: var(--ouro); }
.ambition-longe { color: var(--brasa); }
.epilogue-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* ===== Nascimento ===== */
.birth-card {
  background: var(--caixa);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.birth-card .title { font-size: 20px; }
.birth-card .creator-step { margin: 0; }

/* Fita de 5 blocos: quantos acesos = quão raro. A porcentagem confirma em
   número o que a fita já disse em forma. */
.tier-fita { display: flex; gap: var(--px); }
.tier-fita span {
  flex: 1;
  height: 10px;
  background: var(--caixa2);
  border: var(--px) solid var(--borda);
}
.tier-fita span.ativo { background: var(--ouro); border-color: var(--ouro); }
.tier-nome {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ouro);
  text-shadow: var(--px) var(--px) 0 var(--preto);
}
.tier-pct { font-size: 11px; color: var(--apagado); }
.tier-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tier--lendario .tier-nome { color: var(--brasa); }
.tier--lendario .tier-fita span.ativo { background: var(--brasa); border-color: var(--brasa); }
.tier--unico .tier-nome { color: var(--sangue); }
.tier--unico .tier-fita span.ativo { background: var(--sangue); border-color: var(--sangue); }

/* Linha rótulo→valor: a unidade de leitura de dado do jogo inteiro. */
.dado {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin-top: 7px;
}
.dado span:first-child { color: var(--apagado); }
.dado span:last-child { text-align: right; }
.dado--sobe span:last-child { color: var(--musgo); }
.dado--desce span:last-child { color: var(--brasa); }

.birth-marca {
  margin: 0;
  padding: 6px 8px;
  background: var(--anil);
  color: var(--claro);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.birth-foot { margin: 0; font-size: 11px; color: var(--apagado); line-height: 1.55; }
.birth-empty { margin: 0; font-size: 12px; color: var(--apagado); }

/* ===== Ficha (RA-4) ===== */
.overall { display: flex; align-items: center; gap: 13px; }
.overall-num {
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
  text-shadow: 4px 4px 0 var(--preto);
}
.overall-rot { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); }
.overall-sub { font-size: 12px; }

/* Mãe colapsável: toca no nome, abrem as duas filhas. <details> nativo — sem
   uma linha de JS de estado. */
.stat { border-top: var(--px) solid var(--borda); }
.stat:first-of-type { border-top: 0; }
.stat > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  min-height: 42px;
  cursor: pointer;
  list-style: none;
}
.stat > summary::-webkit-details-marker { display: none; }
.seta { color: var(--ouro); font-size: 8px; width: 9px; }
.stat[open] .seta { transform: rotate(90deg); }
.stat-nome { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.stat-val { margin-left: auto; font-size: 15px; color: var(--ouro); font-variant-numeric: tabular-nums; }
.filhas { padding: 0 0 11px 18px; display: flex; flex-direction: column; gap: 7px; }
.filha { display: flex; align-items: center; font-size: 11px; color: var(--apagado); }
.filha b { margin-left: auto; color: var(--claro); font-weight: 400; font-variant-numeric: tabular-nums; }
.filha-desc { font-size: 10px; color: var(--apagado); line-height: 1.4; margin: 2px 0 0; }
.mini { height: 6px; background: var(--preto); border: var(--px) solid var(--borda); margin-top: 3px; }
.mini span {
  display: block;
  height: 100%;
  background-image: repeating-linear-gradient(90deg, var(--ouro) 0 4px, var(--preto) 4px 6px);
}

/* ===== Painéis de consulta (saves, ficha, marca no mundo) ===== */
#panel {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--fundo);
  background-image: repeating-conic-gradient(var(--caixa2) 0% 25%, transparent 0% 50%);
  background-size: 6px 6px;
  overflow-y: auto;
  padding: 16px 16px 90px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

#savePanel {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--fundo);
  background-image: repeating-conic-gradient(var(--caixa2) 0% 25%, transparent 0% 50%);
  background-size: 6px 6px;
  overflow-y: auto;
  padding: 20px 16px 40px;
}
.save-slot {
  background: var(--caixa);
  border: var(--px) solid var(--borda);
  box-shadow: 4px 4px 0 var(--preto);
  padding: 12px;
  margin-bottom: 11px;
}
.save-slot h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ouro);
  font-weight: 400;
}
.save-slot .save-empty { color: var(--apagado); font-size: 12px; margin: 6px 0; }
.save-slot .save-info { font-size: 12px; line-height: 1.55; margin: 6px 0; color: var(--claro); }
.save-slot .save-info small { color: var(--apagado); }
.save-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.save-actions .btn-secondary { flex: 1; min-height: 44px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }