/* ==================================================================
 * loveletter.css — o tema do modo Love Letter
 *
 * Paleta própria, escopada em `body[data-jogo="loveletter"]` — o mesmo
 * mecanismo que separa o Lobisomem do shell. Prefixo `--ll-`: sem prefixo
 * distinto, a ordem das folhas passaria a decidir a aparência. Nenhuma
 * variável daqui vaza para a HOME nem para os outros dois jogos, e o tema
 * do shell (Padrão/Steampunk/Cyberpunk) não entra aqui.
 *
 * O spec (§5) sugeria pergaminho creme com lacre de cera — e avisava que
 * isso não serve se as ilustrações saírem sombrias. Saíram: pintura a
 * óleo, fundo oliva e cinza, retrato realista. Página creme faria as
 * cartas parecerem buracos no papel. Então a paleta é a do mesmo mundo
 * das artes: quase-preto quente, marfim, vinho de lacre, dourado só em
 * detalhe. Trocar para o creme é trocar este bloco de variáveis.
 *
 * Contrastes conferidos: marfim sobre fundo 15:1, tinta fraca 7,6:1,
 * dourado 7,7:1, marfim sobre lacre 7:1 — todos acima do AA.
 * ================================================================== */

body[data-jogo="loveletter"] {
  --ll-fundo:#17110f;
  --ll-painel:#211815;
  --ll-painel-2:#2a1f1b;
  --ll-linha:#3a2b26;
  --ll-tinta:#efe3d3;
  --ll-tinta-fraca:#b3a394;
  --ll-lacre:#8e1b2c;
  --ll-lacre-vivo:#b3273a;
  --ll-ouro:#c9a24a;
  --ll-fonte:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;

  background:var(--ll-fundo);
  color:var(--ll-tinta);
}

#tela-ll {
  background:var(--ll-fundo);
  color:var(--ll-tinta);
  font-family:var(--ll-fonte);
}

/* O cabeçalho reaproveita a moldura dos outros jogos (.s-head/.marca);
   aqui só a cor, para não herdar a do Lobisomem. */
#tela-ll .s-head { border-bottom-color:var(--ll-linha); }
#tela-ll .marca-nome { color:var(--ll-tinta); }
#tela-ll .marca-sub { color:var(--ll-tinta-fraca); font-style:italic; }
#tela-ll .marca-icone { box-shadow:none; border-radius:9px; }
#tela-ll .voltar-jogos { color:var(--ll-tinta-fraca); }
#tela-ll .icone { border-color:var(--ll-linha); color:var(--ll-tinta); background:var(--ll-painel); }
#tela-ll .menu-sus-lista { background:var(--ll-painel); border-color:var(--ll-linha); color:var(--ll-tinta); }
#tela-ll .menu-sus-lista [role="option"].on { color:var(--ll-ouro); }

/* ---------------- aviso do modo enxuto ---------------- */
.ll-aviso {
  margin:12px 20px 0; padding:10px 12px;
  border:1px solid var(--ll-ouro); border-left-width:3px;
  color:var(--ll-tinta); font-size:13px; line-height:1.45;
  background:var(--ll-painel);
}

/* ---------------- abas ---------------- */
.ll-abas {
  display:flex; margin:14px 20px 0;
  border-bottom:1px solid var(--ll-linha);
}
.ll-abas [role="tab"] {
  flex:1; padding:10px 8px 11px;
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--ll-tinta-fraca); font:inherit; font-size:14px; letter-spacing:.04em;
  text-transform:uppercase; cursor:pointer;
  margin-bottom:-1px;
}
.ll-abas [role="tab"][aria-selected="true"] {
  color:var(--ll-tinta); border-bottom-color:var(--ll-lacre-vivo);
}
.ll-abas [role="tab"]:focus-visible { outline:2px solid var(--ll-ouro); outline-offset:-2px; }

/* ---------------- corpo rolável ---------------- */
.ll-corpo {
  flex:1; min-height:0; overflow-y:auto;
  padding:16px 20px calc(22px + var(--base));
  -webkit-overflow-scrolling:touch;
}

/* ---------------- aba Cartas ---------------- */
.ll-linha {
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 0; border-bottom:1px solid var(--ll-linha);
}
.ll-linha:last-of-type { border-bottom:0; }

/* A caixa tem tamanho por conta própria: proporção 2:3 e largura fixa.
   A <img> só pinta por cima. Se ela falhar e for removida, a caixa fica
   — com o fundo servindo de placeholder — e nada salta. */
.ll-arte {
  flex:0 0 96px; width:96px; aspect-ratio:2 / 3;
  background:linear-gradient(160deg, var(--ll-painel-2), var(--ll-painel));
  border:1px solid var(--ll-linha); border-radius:6px; overflow:hidden;
  position:relative;
}
.ll-arte::after {
  /* o lacre: marca d'água discreta que aparece quando não há imagem */
  content:""; position:absolute; left:50%; top:50%; width:26px; height:26px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--ll-lacre); opacity:.35;
}
.ll-arte img {
  position:relative; z-index:1;
  display:block; width:100%; height:100%; object-fit:cover;
}

.ll-txt { flex:1; min-width:0; }
.ll-cab {
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-bottom:4px; line-height:1.2;
}
.ll-valor {
  font-size:22px; font-weight:700; color:var(--ll-ouro);
  font-variant-numeric:tabular-nums; min-width:1.2em;
}
.ll-nome { font-size:17px; font-weight:600; }
.ll-qtd { margin-left:auto; font-size:12px; color:var(--ll-tinta-fraca); white-space:nowrap; }
.ll-efeito { font-size:15px; line-height:1.45; }
.ll-detalhes {
  margin:8px 0 0; padding-left:16px;
  font-size:13px; line-height:1.45; color:var(--ll-tinta-fraca);
}
.ll-detalhes li { margin-top:3px; }

.ll-rodape-lista {
  margin-top:16px; padding-top:14px; border-top:1px solid var(--ll-linha);
  font-size:13px; color:var(--ll-tinta-fraca); line-height:1.5;
}
.ll-remover-titulo { margin-top:8px; color:var(--ll-tinta); }
.ll-remover { padding-left:16px; margin-top:2px; }

/* ---------------- aba Regras ---------------- */
.ll-secao { max-width:62ch; margin-bottom:22px; }
.ll-secao h2 {
  font-size:18px; letter-spacing:.03em; margin-bottom:8px;
  color:var(--ll-ouro);
}
.ll-secao p { font-size:15.5px; line-height:1.55; margin-bottom:8px; }
.ll-especificas {
  margin:6px 0 0; padding:10px 12px 10px 28px;
  border-left:3px solid var(--ll-lacre); background:var(--ll-painel);
  font-size:14.5px; line-height:1.5;
}
.ll-especificas li { margin-top:4px; }

.ll-tabela {
  border-collapse:collapse; margin:10px 0 6px; font-size:15px;
  font-variant-numeric:tabular-nums;
}
.ll-tabela caption { text-align:left; font-size:13px; color:var(--ll-tinta-fraca); margin-bottom:6px; }
.ll-tabela th, .ll-tabela td { padding:6px 18px 6px 0; text-align:left; border-bottom:1px solid var(--ll-linha); }
.ll-tabela th { color:var(--ll-tinta-fraca); font-weight:600; font-size:13px; }
.ll-tabela td:last-child { color:var(--ll-ouro); font-weight:700; }

/* ---------------- a marca ---------------- */
.ll-marca {
  margin-top:26px; padding-top:14px; border-top:1px solid var(--ll-linha);
  font-size:11.5px; line-height:1.55; color:var(--ll-tinta-fraca);
}

@media (min-width:600px) {
  .ll-arte { flex-basis:112px; width:112px; }
}