/* ==================================================================
 * lpun.css — o tema de Lobisomem por uma Noite
 *
 * Paleta própria, escopada em `body[data-jogo="lpun"]`, com prefixo
 * `--lp-`. 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.
 *
 * Aqui é aldeia a céu aberto sob a lua — tinta azul quase preta, luar
 * no texto, ouro de lua no acento. É o contrário do Salem de propósito:
 * lá é sala fechada, madeira e brasa; os dois são "noite", e se
 * saíssem parecidos ninguém saberia em qual jogo está ao trocar de aba.
 *
 * O vermelho é só do que mata — o botão de anoitecer, a barra dos
 * Lobisomens e dos Mortos na lista. Usá-lo também como acento geral
 * tiraria dele o único trabalho que tem.
 *
 * Contrastes medidos sobre o fundo (#0d1117): luar 15,8:1, luar fraco
 * 7,8:1, lua 10,4:1. Branco sobre o botão de sangue (#a33a3a): 6,1:1.
 * O sangue como texto daria 3,1:1 — por isso ele só é fundo e borda.
 * ================================================================== */

body[data-jogo="lpun"] {
  --lp-fundo:#0d1117;
  --lp-painel:#161e28;
  --lp-painel-2:#1e2836;
  --lp-linha:#2f3d4d;
  --lp-luar:#e6ecf2;
  --lp-luar-fraco:#9aa8b8;
  --lp-lua:#d8b45a;
  --lp-sangue:#a33a3a;
  --lp-fonte:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;

  background:var(--lp-fundo);
  color:var(--lp-luar);
}

#tela-lpun-setup, #tela-lpun-passo, #tela-lpun-apuracao, #tela-lpun-ref {
  background:var(--lp-fundo);
  color:var(--lp-luar);
  font-family:var(--lp-fonte);
}

/* O cabeçalho reaproveita a moldura dos outros jogos; aqui só a cor. */
#tela-lpun-setup .s-head, #tela-lpun-apuracao .s-head, #tela-lpun-ref .s-head { border-bottom-color:var(--lp-linha); }
body[data-jogo="lpun"] .marca-nome { color:var(--lp-luar); letter-spacing:.02em; }
body[data-jogo="lpun"] .marca-sub { color:var(--lp-lua); font-style:italic; letter-spacing:.05em; }
body[data-jogo="lpun"] .lbl { color:var(--lp-luar-fraco); }
body[data-jogo="lpun"] .nota { color:var(--lp-luar-fraco); opacity:.75; }
body[data-jogo="lpun"] .link { color:var(--lp-lua); }

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

/* A nota de idioma. Não é erro — é o app dizendo em que língua vai
   narrar, antes de a mesa descobrir pelo áudio. Os dois manuais são em
   português, e as falas foram gravadas só nele. */
.lp-emprestado {
  border-left:3px solid var(--lp-lua); padding:8px 12px; margin-bottom:18px;
  background:var(--lp-painel); color:var(--lp-luar-fraco); font-size:12.5px; line-height:1.5;
}

/* ================= SETUP =================
   A edição é a primeira escolha da tela porque é ela que muda todo o
   resto: a escala, a ordem da noite e a apuração. Por isso são dois
   cartões com descrição, e não dois botões de uma palavra — quem tem só
   uma das caixas precisa reconhecer a sua sem abrir o manual. */
.lp-edicoes { display:flex; gap:10px; margin-bottom:22px; }
.lp-edicao {
  flex:1; text-align:left; padding:12px; border-radius:10px;
  background:var(--lp-painel); border:1px solid var(--lp-linha); color:var(--lp-luar-fraco);
}
.lp-edicao b { display:block; font-size:14px; font-weight:600; color:var(--lp-luar); margin-bottom:4px; }
.lp-edicao span { display:block; font-size:11px; line-height:1.4; }
.lp-edicao.on { border-color:var(--lp-lua); background:var(--lp-painel-2); }
.lp-edicao.on b { color:var(--lp-lua); }

body[data-jogo="lpun"] .players button {
  background:var(--lp-painel); border-color:var(--lp-linha); color:var(--lp-luar-fraco);
}
body[data-jogo="lpun"] .players button.on {
  background:var(--lp-painel-2); border-color:var(--lp-lua); color:var(--lp-lua);
}

/* O baralho exato para o número de jogadores da mesa, e não a tabela
   inteira do manual: montar o monte errado é o erro que mais acontece,
   e ele só aparece no meio da noite. */
.lp-baralho { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.lp-carta {
  display:flex; align-items:baseline; gap:7px; padding:9px 11px; border-radius:9px;
  background:var(--lp-painel); border:1px solid var(--lp-linha);
}
.lp-carta b { font-size:17px; color:var(--lp-lua); font-variant-numeric:tabular-nums; }
.lp-carta span { font-size:12px; color:var(--lp-luar-fraco); }
.lp-carta[data-time="lobisomens"] { border-left:3px solid var(--lp-sangue); }
.lp-carta[data-time="mortos"] { border-left:3px solid var(--lp-luar-fraco); }
.lp-carta.lp-centro { background:var(--lp-painel-2); }

.lp-avisos:not(:empty) { margin-bottom:18px; }
.lp-aviso {
  border-left:3px solid var(--lp-sangue); padding:8px 12px; margin-bottom:8px;
  background:var(--lp-painel); color:var(--lp-luar-fraco); font-size:12px; line-height:1.5;
}

.lp-bt {
  width:100%; margin-bottom:10px; padding:15px; border-radius:10px; font-size:14.5px;
  background:var(--lp-painel); border:1px solid var(--lp-linha); color:var(--lp-luar);
}
body[data-jogo="lpun"] .prim.lp-bt {
  background:var(--lp-sangue); border-color:var(--lp-sangue); color:#fff; font-size:15.5px;
}
.lp-linha-link { display:flex; gap:16px; margin:14px 0 18px; }

.lp-chave {
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  margin:6px 0 16px; padding:13px 15px; border-radius:10px;
  background:var(--lp-painel); border:1px solid var(--lp-linha); color:var(--lp-luar);
}
.lp-chave-txt { flex:1; min-width:0; }
.lp-chave-txt b { display:block; font-size:14px; font-weight:600; }
.lp-chave-txt span { display:block; margin-top:3px; font-size:11.5px; line-height:1.4; color:var(--lp-luar-fraco); }
.lp-chave-luz {
  flex:none; width:44px; height:26px; border-radius:13px;
  background:var(--lp-painel-2); border:1px solid var(--lp-linha); position:relative;
}
.lp-chave-luz::after {
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:var(--lp-luar-fraco); transition:transform .15s, background .15s;
}
.lp-chave.on .lp-chave-luz { background:var(--lp-lua); border-color:var(--lp-lua); }
.lp-chave.on .lp-chave-luz::after { transform:translateX(18px); background:#1a1408; }

/* ================= NARRAÇÃO ================= */
#tela-lpun-passo .rp-topo { border-bottom-color:var(--lp-linha); }
/* Rede de segurança: a tela é `position:fixed` e não rola sozinha. A
   fala mais longa da noite cabe em 360×640 com a ampulheta aberta, mas
   o texto é dado — uma fala nova mais longa transbordaria sem deixar
   como alcançar o resto. `min-height:0` é a metade que se esquece: sem
   ele o item flex se recusa a encolher e o overflow não tem o que
   cortar. */
#tela-lpun-passo .rp-core { min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.lp-conta { font-size:11.5px; color:var(--lp-luar-fraco); font-variant-numeric:tabular-nums; }

/* O batuque é da edição Monstros e cobre a noite inteira, por cima da
   contagem. Parar no meio é o erro que a mesa comete sempre — daí o
   lembrete fixo, e não uma fala só no começo. */
.lp-batuque {
  text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--lp-lua); margin-bottom:18px;
}
.lp-fala {
  font-size:22px; line-height:1.45; text-align:center; color:var(--lp-luar);
  max-width:22em; margin:0 auto;
}

/* A contagem na tela é a rede de segurança do mp3 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. */
.lp-contagem {
  margin-top:26px; font-size:96px; line-height:1; text-align:center;
  color:var(--lp-lua); font-variant-numeric:tabular-nums;
}

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

#tela-lpun-passo .rp-foot { border-top-color:var(--lp-linha); gap:10px; flex-wrap:wrap; }
#tela-lpun-passo .rp-foot button {
  flex:1; padding:14px; border-radius:10px; font-size:13.5px;
  background:var(--lp-painel); border:1px solid var(--lp-linha); color:var(--lp-luar);
}
#tela-lpun-passo .rp-foot button.prim {
  background:var(--lp-sangue); border-color:var(--lp-sangue); color:#fff;
}
#tela-lpun-passo .rp-foot #lpPaz { flex-basis:100%; color:var(--lp-lua); }
body[data-jogo="lpun"] .n-abort { color:var(--lp-luar-fraco); }

/* ================= APURAÇÃO =================
   Uma pergunta por vez, e a lista de opções é a do baralho em jogo. Rola
   porque a edição Monstros com 7 jogadores tem oito linhas mais as duas
   de empate — não cabe numa tela de celular. */
.lp-apuracao {
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 16px calc(22px + var(--base));
}
.lp-pergunta { font-size:17px; line-height:1.4; margin-bottom:16px; color:var(--lp-luar); }
.lp-opcoes { display:flex; flex-direction:column; gap:8px; }
.lp-opcoes button {
  width:100%; text-align:left; padding:14px; border-radius:10px; font-size:14px;
  background:var(--lp-painel); border:1px solid var(--lp-linha); color:var(--lp-luar);
}
.lp-opcoes button small { display:block; margin-top:3px; font-size:11px; color:var(--lp-luar-fraco); }
.lp-opcoes button[data-time="lobisomens"] { border-left:3px solid var(--lp-sangue); }
.lp-opcoes button[data-time="mortos"] { border-left:3px solid var(--lp-luar-fraco); }

.lp-vence {
  font-size:13px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--lp-lua); text-align:center; margin-bottom:14px;
}
.lp-fala-fim { font-size:19px; margin-bottom:22px; }

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

.lp-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:12px;
}
.lp-ficha {
  display:flex; gap:14px; padding:12px; border-radius:12px;
  background:var(--lp-painel); border:1px solid var(--lp-linha);
}
.lp-ficha img, .lp-sem-arte {
  flex:none; width:78px; height:110px; object-fit:cover; border-radius:8px;
  border:1px solid var(--lp-linha);
}
/* A arte ainda não foi gerada. O lugar vazio já tem o tamanho certo,
   para a lista não pular no dia em que os retratos entrarem. */
.lp-sem-arte { background:var(--lp-painel-2); }
.lp-ficha-txt { flex:1; min-width:0; }
.lp-ficha-txt h3 { font-size:15px; font-weight:600; margin-bottom:2px; }
.lp-time {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--lp-lua); margin-bottom:7px;
}
.lp-hab { font-size:12.5px; line-height:1.5; color:var(--lp-luar); }
.lp-hist { margin-top:6px; font-size:11.5px; line-height:1.5; color:var(--lp-luar-fraco); }
.lp-ficha[data-time="lobisomens"] { border-left:3px solid var(--lp-sangue); }
.lp-ficha[data-time="mortos"] { border-left:3px solid var(--lp-luar-fraco); }