/* ==================================================================
 * onuw-temas.css — os temas do modo Lobisomem
 *
 * O Lobisomem não participa dos temas do shell (Padrão/Steampunk/
 * Cyberpunk) — está escrito no temas.css e continua valendo. Ele tem
 * sistema próprio, e é este.
 *
 * Duas coisas separam um sistema do outro:
 *
 * 1. **Prefixo `--x-`.** O `--t-` é do shell. Sem prefixos distintos
 *    bastaria a ordem das folhas mudar para um tema pintar o outro.
 *
 * 2. **Escopo `body[data-jogo="onuw"]`.** O style.css declara `--bg`,
 *    `--ink` e companhia em `:root`, sem prefixo, e essas variáveis
 *    herdam para a página inteira. Redefinir na `body` pintaria a HOME e
 *    o Resistance junto. O atributo `data-jogo` existe por isso — e não
 *    dá para deduzir da tela, porque a de noite é compartilhada entre os
 *    dois jogos.
 *
 * A variante é a escura da §7 do spec: o taco entintado em vez da folha.
 * A noite continua sendo a mais escura das três superfícies — ela é preta
 * por função, não por estilo.
 *
 * O tema atual (preto e âmbar) é o Sombrio, e continua sendo o `:root`
 * do style.css: sem atributo, nada aqui pega. Não é elegante que ele
 * seja "a ausência do outro", mas é o que garante zero regressão na tela
 * mais antiga do app — o Breu só existe por adição.
 *
 * O nome do tema e Breu. A paleta sai do ONUW-TEMA-XILOGRAVURA.md, mas da
 * variante escura da §7 — o spec propunha o papel claro como padrao e o
 * escuro como opcao; aqui e o escuro que ficou.
 * ================================================================== */

body[data-jogo="onuw"][data-tema-onuw="breu"] {
  /* ---- a paleta do spec, §2, na inversao da §7 ---- */
  /* A §7 do spec previu esta variante: papel escuro também no setup e no
     dia. A metáfora inverte — a tela deixa de ser a folha e passa a ser o
     taco entintado; a impressão é que fica clara. Os nomes continuam
     "papel" e "tinta" porque continuam sendo os papéis de superfície e de
     texto; o que trocou foi qual dos dois é claro. */
  --x-papel:#1a1714;          /* o taco: superfície principal */
  --x-papel-sol:#241e17;      /* o dia, um degrau mais quente */
  --x-papel-sombra:#12100e;   /* recuado: cartões, linhas, rodapés */
  --x-tinta:#e9dfc8;          /* a impressão, em marfim */
  --x-tinta-fraca:#a2988a;
  --x-noite:#0c0b0a;
  --x-noite-papel:#e9dfc8;
  --x-sangue:#9b1b1f;
  --x-sangue-vivo:#c0272d;

  /* O que vai POR CIMA do sangue. Antes era o papel; com a inversão o
     papel ficou escuro, e texto escuro sobre vermelho não se lê. */
  --x-contra:#f0e7d2;

  /* Grão do papel: feTurbulence embutido, ~300 bytes, sem arquivo
     externo. Multiply por cima da cor chapada — a mesma imagem serve às
     três superfícies, muda só a cor de baixo. */
  --x-grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Veio de madeira do taco entintado: mesmo ruído esticado na
     horizontal. Quase imperceptível de propósito — a noite é tela preta
     por função, a textura só tira a cara de "preto de monitor". */
  --x-veio:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");

  /* Hachura: o estado "fora de jogo". Traduz o cross-hatching dos
     retratos e elimina o cinza-médio, que o estilo não tem. */
  --x-hachura:repeating-linear-gradient(45deg,
    transparent 0 3px, rgba(233,223,200,.13) 3px 4px);

  /* Rye e Alegreya (OFL) ainda não estão em assets/fonts/. Até estarem, a
     serifada do sistema segura a metáfora — é serifa, não geométrica,
     que é o que o spec proíbe. */
  --x-fonte:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --x-fonte-titulo:"Rockwell","Bookman Old Style",Georgia,serif;

  /* ---- daqui para baixo, a tradução para os nomes que o style.css
         já consome. Nenhuma regra do style.css muda. ---- */
  --bg:var(--x-papel);
  --panel:var(--x-papel-sombra);
  --panel2:#1f1a15;
  --line:#332c24;
  --line2:#332c24;
  --ink:var(--x-tinta);
  --muted:var(--x-tinta-fraca);
  /* O Sombrio tem tres pesos de texto (ink/muted/dim); o Breu tem dois,
     porque a paleta do spec so tem tinta e tinta-com-pouca-pressao. O
     terceiro peso vira o segundo em vez de inventar um cinza que o
     estilo nao tem — e o cinza que eu tinha posto dava 3,8:1 sobre as
     linhas de papel, abaixo do AA. */
  --dim:var(--x-tinta-fraca);
  --blood:var(--x-sangue);
  --blood-lit:var(--x-sangue-vivo);
  --gold:#b89a5e;            /* o âmbar sai; sobra o mínimo para o que ainda o cita */
  --moon:#9db4c4;
  --ok:#7fae8a;
  --warn:#c49a4a;
  --err:var(--x-sangue);

  font-family:var(--x-fonte);
}

/* O body pinta a área fora da tela (rebote de rolagem, safe area). */
body[data-jogo="onuw"][data-tema-onuw="breu"] {
  background:var(--x-papel);
  color:var(--x-tinta);
}

/* ---------------- as três superfícies ---------------- */

body[data-jogo="onuw"][data-tema-onuw="breu"] .tela {
  background-color:var(--x-papel);
  background-image:var(--x-grao);
  color:var(--x-tinta);
}

/* O dia é a estampa ao sol: papel um degrau mais amarelo. */
body[data-jogo="onuw"][data-tema-onuw="breu"] #tela-dia,
body[data-jogo="onuw"][data-tema-onuw="breu"] #tela-votacao {
  background-color:var(--x-papel-sol);
}

/* A explicação e os papéis já eram claros no tema Sombrio; aqui viram o
   mesmo papel das outras, sem o pergaminho próprio. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .tela.clara {
  background-color:var(--x-papel);
  color:var(--x-tinta);
}

/* A noite continua preta — é função, não estilo: a tela fica no meio da
   mesa e não pode vazar luz. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .tela.noturna {
  background-color:var(--x-noite);
  background-image:var(--x-veio);
  color:var(--x-noite-papel);
  --ink:var(--x-noite-papel);
  --muted:#9a8f7c;
  --dim:#6e6558;
  --line:#2a2622;
  --panel:#171512;
}

/* ---------------- ornamentos ---------------- */

/* Cantos retos. Xilogravura não arredonda. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .card,
body[data-jogo="onuw"][data-tema-onuw="breu"] .role,
body[data-jogo="onuw"][data-tema-onuw="breu"] .pcard,
body[data-jogo="onuw"][data-tema-onuw="breu"] .ecard,
body[data-jogo="onuw"][data-tema-onuw="breu"] button,
body[data-jogo="onuw"][data-tema-onuw="breu"] .chip,
body[data-jogo="onuw"][data-tema-onuw="breu"] .folha,
body[data-jogo="onuw"][data-tema-onuw="breu"] input,
body[data-jogo="onuw"][data-tema-onuw="breu"] select {
  border-radius:2px;
}

/* Nada de sombra suave. Quando precisa destacar, é a sombra dura de
   impressão — registro desalinhado, como nos retratos. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .role.picked,
body[data-jogo="onuw"][data-tema-onuw="breu"] .ecard.marcada {
  box-shadow:3px 3px 0 var(--x-sangue);
}

/* Filete duplo nos blocos principais. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .role.picked,
body[data-jogo="onuw"][data-tema-onuw="breu"] .pcard {
  border:3px double var(--x-tinta);
}

/* O acento único do jogo: o botão que começa a noite, e o "votem!". */
body[data-jogo="onuw"][data-tema-onuw="breu"] .ir button,
body[data-jogo="onuw"][data-tema-onuw="breu"] .prim,
body[data-jogo="onuw"][data-tema-onuw="breu"] #btContar {
  background:var(--x-sangue);
  border-color:var(--x-sangue-vivo);
  color:var(--x-contra);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] .ir button:disabled {
  background:transparent;
  color:var(--x-tinta-fraca);
  background-image:var(--x-hachura);
}

body[data-jogo="onuw"][data-tema-onuw="breu"] #vWord {
  color:#d4544c;
  font-family:var(--x-fonte-titulo);
}

/* Papel que não entra na partida: hachurado, não acinzentado. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .role:not(.picked) .card {
  background-image:var(--x-hachura);
}

/* Títulos em serifada de cartaz, caixa-alta. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .s-title,
body[data-jogo="onuw"][data-tema-onuw="breu"] .x-head h2,
body[data-jogo="onuw"][data-tema-onuw="breu"] #res h2,
body[data-jogo="onuw"][data-tema-onuw="breu"] #eTitulo {
  font-family:var(--x-fonte-titulo);
  letter-spacing:.06em;
}

/* O timer do dia é o número que a mesa olha de longe. */
body[data-jogo="onuw"][data-tema-onuw="breu"] #dTimer {
  font-family:var(--x-fonte-titulo);
  color:var(--x-tinta);
}

/* ==================================================================
 * As cores cravadas
 *
 * O style.css tem ~90 blocos com hex direto — pretos, marrons e brancos
 * do tema Sombrio, escritos antes de existir tema nenhum. Variável
 * redefinida não alcança nenhum deles.
 *
 * A alternativa era trocar os 90 por variáveis no style.css. Não fiz:
 * mexeria na tela mais antiga do app para beneficiar um tema novo, e
 * qualquer engano ali quebra o Sombrio, que é o que está no ar. Aqui o
 * risco é só do Breu — se eu esqueci um, aparece um bloco escuro no
 * papel, e não uma regressão no que já funciona.
 *
 * O seletor tem especificidade 0,3,x contra 0,2,0 das regras originais,
 * então vence sem precisar de !important.
 * ================================================================== */

body[data-jogo="onuw"][data-tema-onuw="breu"] :is(
  .s-foot, .e-foot, .sel, .ask button, .escolhas button) {
  background:var(--x-papel-sombra);
  border-color:var(--x-tinta);
}

/* Papel escolhido: no Sombrio ele escurece; no Breu ele é o inverso —
   a estampa impressa, tinta sobre papel, com a sombra dura de registro. */
body[data-jogo="onuw"][data-tema-onuw="breu"] :is(.role.picked, .exp-item.on) {
  background:var(--x-papel-sol);
  border-color:var(--x-tinta-fraca);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] :is(
  .role.picked .rname b, .exp-item.on .exp-txt b) {
  color:var(--x-tinta);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] .role.night {
  border-left-color:#d4544c;
}

/* Os selos pretos: token do papel, contador, caixa da expansão. */
body[data-jogo="onuw"][data-tema-onuw="breu"] :is(
  .tok, .cnt button, .exp-item .cx, .exp-thumb) {
  background:var(--x-papel-sombra);
  border-color:var(--x-tinta);
  color:var(--x-tinta);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] .tok {
  border:1px solid var(--x-tinta);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] .tok.none {
  background-image:var(--x-hachura);
}

/* A carta: no Sombrio é um degradê escuro; aqui é a estampa em papel.
   Sem gradiente — xilogravura não tem degradê. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .card {
  background:var(--x-papel-sombra);
  border:1px solid var(--x-tinta);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] .card .cn { color:var(--x-tinta); }
body[data-jogo="onuw"][data-tema-onuw="breu"] .card .cl { color:var(--x-tinta-fraca); }

/* Botões de acento: o branco puro sai, entra o papel. */
body[data-jogo="onuw"][data-tema-onuw="breu"] :is(
  .go, .players button.on, .ecard .badge, .e-foot .prim,
  .res .botoes .prim, .escolhas button.on, .x-foot .prim) {
  color:var(--x-contra);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] :is(.go:disabled, .e-foot .prim:disabled) {
  background:transparent;
  background-image:var(--x-hachura);
  border-color:var(--x-tinta-fraca);
  color:var(--x-tinta-fraca);
}

/* Chips da eliminação. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .chip {
  background:var(--x-papel-sol);
  border-color:var(--x-tinta-fraca);
  color:var(--x-tinta);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] .chip.none {
  border-color:var(--x-tinta);
  color:var(--x-tinta-fraca);
  background-image:var(--x-hachura);
}

/* Texto fraco: os cinzas escuros do Sombrio somem no papel. */
body[data-jogo="onuw"][data-tema-onuw="breu"] :is(.nota, .vazio, .pinfo .en) {
  color:var(--x-tinta-fraca);
}

/* Times, na tela de resultado — §2 do spec: aldeia é tinta (o normal),
   lobisomens é sangue, Curtidor é musgo. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .win-aldeia { color:var(--x-tinta); }
body[data-jogo="onuw"][data-tema-onuw="breu"] :is(.win-lobisomem, .win-servo) { color:#d4544c; }
body[data-jogo="onuw"][data-tema-onuw="breu"] :is(.win-curtidor, .win-aprendiz) { color:#9bb05e; }
body[data-jogo="onuw"][data-tema-onuw="breu"] .win-none { color:var(--x-tinta-fraca); }

/* O anel da votação e a barra do dia. */
body[data-jogo="onuw"][data-tema-onuw="breu"] .v-anel { border-color:var(--x-tinta); }
body[data-jogo="onuw"][data-tema-onuw="breu"] .x-bar { background:var(--x-papel-sombra); }
body[data-jogo="onuw"][data-tema-onuw="breu"] .x-bar i { background:var(--x-sangue-vivo); }
body[data-jogo="onuw"][data-tema-onuw="breu"] .x-pontos i { background:var(--x-papel-sombra); }
body[data-jogo="onuw"][data-tema-onuw="breu"] .x-pontos i.feito { background:var(--x-tinta); }

/* A explicação e os papéis já eram claros; só o que destoa da paleta. */
body[data-jogo="onuw"][data-tema-onuw="breu"] :is(.x-foot, .pcard) {
  background:var(--x-papel-sombra);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] .x-foot button {
  background:var(--x-papel);
  color:var(--x-tinta);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] :is(.x-passo, .x-sair, .x-tema) {
  color:var(--x-tinta-fraca);
}
body[data-jogo="onuw"][data-tema-onuw="breu"] .x-texto { color:var(--x-tinta); }