/* ==================================================================
 * salem.css — o tema do modo Salem 1692
 *
 * Paleta própria, escopada em `body[data-jogo="salem"]`, com prefixo
 * `--sl-`. Mesmo mecanismo dos outros modos: sem prefixo distinto a
 * ordem das folhas passaria a decidir a aparência, e sem o escopo por
 * jogo as variáveis herdariam para a HOME.
 *
 * Salem é uma casa de reunião puritana à noite: madeira escura, uma
 * vela, papel de julgamento. Daí o escuro QUENTE — carvão amarronzado,
 * não a ardósia fria do Coup — com pergaminho no texto e brasa como
 * acento. O Love Letter também é quente, mas é marrom claro com lacre
 * vermelho; aqui é quase preto, e o acento é fuligem alaranjada, não
 * cera. Na troca de aba os três se distinguem sem ler o título.
 *
 * O vermelho fica reservado ao que mata — a Noite e a forca. Usá-lo
 * também como acento geral tiraria dele o único trabalho que tem.
 *
 * Contrastes medidos sobre o fundo (#141210): pergaminho 14,9:1,
 * pergaminho fraco 7,1:1, brasa 4,6:1. Branco sobre o botão de brasa
 * (#9d4519): 6,4:1.
 * ================================================================== */

body[data-jogo="salem"] {
  --sl-fundo:#141210;
  --sl-painel:#1d1a17;
  --sl-painel-2:#262220;
  --sl-linha:#38322c;
  --sl-pergaminho:#e8e2d6;
  --sl-pergaminho-fraco:#a49b8b;
  --sl-brasa:#c4622e;
  --sl-brasa-bt:#9d4519;
  --sl-forca:#8f2f2f;
  --sl-fonte:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;

  background:var(--sl-fundo);
  color:var(--sl-pergaminho);
}

#tela-sl-setup, #tela-sl-dia, #tela-sl-passo, #tela-sl-ref {
  background:var(--sl-fundo);
  color:var(--sl-pergaminho);
  font-family:var(--sl-fonte);
}

/* O cabeçalho reaproveita a moldura dos outros jogos; aqui só a cor. */
#tela-sl-setup .s-head, #tela-sl-dia .s-head, #tela-sl-ref .s-head { border-bottom-color:var(--sl-linha); }
body[data-jogo="salem"] .marca-nome { color:var(--sl-pergaminho); letter-spacing:.02em; }
body[data-jogo="salem"] .marca-sub { color:var(--sl-brasa); font-style:italic; letter-spacing:.06em; }
body[data-jogo="salem"] .marca-icone { border-radius:9px; box-shadow:none; }
body[data-jogo="salem"] .lbl { color:var(--sl-pergaminho-fraco); }
body[data-jogo="salem"] .nota { color:var(--sl-pergaminho-fraco); opacity:.75; }
body[data-jogo="salem"] .link { color:var(--sl-brasa); }

.sl-desc { color:var(--sl-pergaminho-fraco); font-size:13.5px; line-height:1.6; margin-bottom:18px; }

/* A nota de idioma emprestado. Não é erro — é o app dizendo em que
   língua vai narrar, antes de a mesa descobrir pelo áudio. */
.sl-emprestado {
  border-left:3px solid var(--sl-brasa); padding:8px 12px; margin-bottom:18px;
  background:var(--sl-painel); color:var(--sl-pergaminho-fraco); font-size:12.5px; line-height:1.5;
}

body[data-jogo="salem"] .players button {
  background:var(--sl-painel); border-color:var(--sl-linha); color:var(--sl-pergaminho-fraco);
}
body[data-jogo="salem"] .players button.on {
  background:var(--sl-brasa-bt); border-color:var(--sl-brasa); color:#fff;
}

/* A tabela de Cartas de Julgamento: o único cálculo do modo, e é uma
   consulta. Três números grandes, porque é o que a mesa copia para o
   monte antes de começar. */
.sl-escala { display:flex; gap:10px; margin-bottom:22px; }
.sl-esc {
  flex:1; text-align:center; padding:12px 6px; border-radius:10px;
  background:var(--sl-painel); border:1px solid var(--sl-linha);
}
.sl-esc b { display:block; font-size:26px; color:var(--sl-brasa); line-height:1.1; }
.sl-esc span { display:block; margin-top:4px; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--sl-pergaminho-fraco); }

.sl-bt {
  width:100%; margin-bottom:10px; padding:15px; border-radius:10px; font-size:14.5px;
  background:var(--sl-painel); border:1px solid var(--sl-linha); color:var(--sl-pergaminho);
}
body[data-jogo="salem"] .prim.sl-bt {
  background:var(--sl-brasa-bt); border-color:var(--sl-brasa); color:#fff; font-size:15.5px;
}
.sl-feito {
  margin-bottom:10px; font-size:12px; color:var(--sl-pergaminho-fraco);
  text-transform:uppercase; letter-spacing:.08em;
}
.sl-linha-link { display:flex; gap:16px; margin:14px 0 18px; }

/* O interruptor do Vigilante: a única coisa que o app sabe da partida.
   É botão de verdade com role=switch, e não uma caixa de marcar — o
   estado precisa ser lido por leitor de tela, e ele é apertado no meio
   de uma partida, às vezes no escuro. */
.sl-chave {
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  margin-bottom:16px; padding:13px 15px; border-radius:10px;
  background:var(--sl-painel); border:1px solid var(--sl-linha); color:var(--sl-pergaminho);
}
.sl-chave-txt { flex:1; min-width:0; }
.sl-chave-txt b { display:block; font-size:14px; font-weight:600; }
.sl-chave-txt span { display:block; margin-top:3px; font-size:11.5px; line-height:1.4;
  color:var(--sl-pergaminho-fraco); }
.sl-chave-luz {
  flex:none; width:44px; height:26px; border-radius:13px;
  background:var(--sl-painel-2); border:1px solid var(--sl-linha); position:relative;
}
.sl-chave-luz::after {
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:var(--sl-pergaminho-fraco); transition:transform .15s, background .15s;
}
.sl-chave.on .sl-chave-luz { background:var(--sl-brasa-bt); border-color:var(--sl-brasa); }
.sl-chave.on .sl-chave-luz::after { transform:translateX(18px); background:#fff; }

.sl-fim { display:flex; gap:10px; margin-bottom:6px; }
.sl-fim button {
  flex:1; padding:13px 10px; border-radius:10px; font-size:12.5px; line-height:1.35;
  background:var(--sl-painel); border:1px solid var(--sl-linha); color:var(--sl-pergaminho);
}

/* ================= NARRAÇÃO =================
   Tela de olhos fechados: quase ninguém olha para ela. Existe para o
   narrador acompanhar e para quando o áudio falta — aí o texto grande
   é o que alguém lê em voz alta. */
#tela-sl-passo .rp-topo { border-bottom-color:var(--sl-linha); }
/* Rede de segurança, não correção: medido em 360×640, a fala mais longa
   do modo cabe com a ampulheta aberta e ainda sobra o rodapé. Mas o
   texto é dado traduzido, e uma tradução mais longa que a original —
   ou uma fala nova — transbordaria uma tela `position:fixed` sem deixar
   como alcançar o resto. Só engata se passar. */
#tela-sl-passo .rp-core { min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sl-conta { font-size:11.5px; color:var(--sl-pergaminho-fraco); font-variant-numeric:tabular-nums; }
.sl-fala {
  font-size:22px; line-height:1.45; text-align:center; color:var(--sl-pergaminho);
  max-width:22em; margin:0 auto;
}

/* A contagem na tela é a rede de segurança do áudio ausente, e não o
   normal: número mudo não cobre barulho nenhum, então alguém tem de ler
   junto — daí o tamanho. */
.sl-contagem {
  margin-top:26px; font-size:96px; line-height:1; text-align:center;
  color:var(--sl-brasa); font-variant-numeric:tabular-nums;
}

.sl-ampulheta { margin-top:28px; width:min(100%, 320px); margin-inline:auto; }
.sl-ampulheta-n {
  text-align:center; font-size:34px; color:var(--sl-brasa);
  font-variant-numeric:tabular-nums; margin-bottom:10px;
}
.sl-barra { height:6px; border-radius:3px; background:var(--sl-painel-2); overflow:hidden; }
.sl-barra i { display:block; height:100%; background:var(--sl-brasa); transition:width .25s linear; }

#tela-sl-passo .rp-foot { border-top-color:var(--sl-linha); gap:10px; }
#tela-sl-passo .rp-foot button {
  flex:1; padding:14px; border-radius:10px; font-size:13.5px;
  background:var(--sl-painel); border:1px solid var(--sl-linha); color:var(--sl-pergaminho);
}
#tela-sl-passo .rp-foot button.prim {
  background:var(--sl-brasa-bt); border-color:var(--sl-brasa); color:#fff;
}
body[data-jogo="salem"] .n-abort { color:var(--sl-pergaminho-fraco); }

/* ================= REFERÊNCIA ================= */
/* `flex:none` para a barra de abas não encolher quando a lista cresce —
   ela é a única forma de trocar de aba, e uma aba espremida a zero
   deixaria a pessoa presa na lista em que está. */
.sl-abas { flex:none; display:flex; gap:6px; padding:12px 16px; border-bottom:1px solid var(--sl-linha); }
.sl-abas button {
  flex:1; padding:10px; border-radius:8px; font-size:12.5px;
  background:transparent; border:1px solid var(--sl-linha); color:var(--sl-pergaminho-fraco);
}
.sl-abas button.on { background:var(--sl-painel); color:var(--sl-pergaminho); border-color:var(--sl-brasa); }

/* `.tela` é `position:fixed; inset:0` em coluna flex: a tela tem
   exatamente a altura da janela e não rola. Quem rola tem de ser este
   container, e `min-height:0` é o que o permite — sem ele o item flex
   se recusa a encolher abaixo do próprio conteúdo, a lista transborda
   para fora da tela fixa e não há como alcançar o fim dela.

   O `--base` no fim é a barra do sistema no celular: sem ele a última
   ficha fica atrás dela. */
.sl-lista {
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 16px calc(22px + var(--base));
  display:flex; flex-direction:column; gap:14px;
}
.sl-ficha {
  display:flex; gap:14px; padding:12px; border-radius:12px;
  background:var(--sl-painel); border:1px solid var(--sl-linha);
}
.sl-ficha img, .sl-sem-arte {
  flex:none; width:84px; height:128px; object-fit:cover; border-radius:8px;
  border:1px solid var(--sl-linha);
}
/* A arte chega aos poucos. O lugar vazio é do tamanho certo para a
   lista não pular quando a imagem que falta for gerada. */
.sl-sem-arte { background:var(--sl-painel-2); }
.sl-ficha-txt { flex:1; min-width:0; }
.sl-ficha-txt h3 { font-size:15px; font-weight:600; margin-bottom:2px; }
.sl-papel, .sl-cor {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--sl-brasa); margin-bottom:7px;
}
.sl-hab { font-size:12.5px; line-height:1.5; color:var(--sl-pergaminho); }
.sl-hist { margin-top:6px; font-size:11.5px; line-height:1.5; color:var(--sl-pergaminho-fraco); }

/* A cor da carta é regra do jogo — verde sai depois do uso, vermelha
   acusa, azul fica em jogo, preta resolve na hora. A borda repete o que
   o rótulo já diz, para quem varre a lista com o olho. */
.sl-carta[data-cor="verde"]    { border-left:3px solid #5d7f4e; }
.sl-carta[data-cor="vermelha"] { border-left:3px solid var(--sl-forca); }
.sl-carta[data-cor="azul"]     { border-left:3px solid #4a6b86; }
.sl-carta[data-cor="preta"]    { border-left:3px solid #6b6560; }
.sl-carta img, .sl-carta .sl-sem-arte { height:84px; }