/* ==================================================================
 * coup.css — o tema do modo Coup
 *
 * Paleta própria, escopada em `body[data-jogo="coup"]`, com prefixo
 * `--cp-`. Mesmo mecanismo do Lobisomem e do Love Letter: 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.
 *
 * O jogo é intriga de corte numa cidade-estado italiana, e a moeda é a
 * mecânica inteira — o ícone são três moedas de ouro. Daí a paleta: um
 * escuro FRIO (ardósia esverdeada, quase mármore de palácio), ouro forte
 * como acento e carmim para o que elimina.
 *
 * O frio é de propósito. O Love Letter é marrom quente com lacre de cera;
 * dois modos de consulta com a mesma cara ficariam indistinguíveis na
 * troca de aba. Aqui a diferença é de temperatura, não só de matiz.
 *
 * Contrastes conferidos sobre o fundo: mármore 14,8:1, mármore fraco
 * 7,4:1, ouro 8,4:1, carmim sobre o fundo 4,6:1.
 * ================================================================== */

body[data-jogo="coup"] {
  --cp-fundo:#12171a;
  --cp-painel:#1a2226;
  --cp-painel-2:#222c31;
  --cp-linha:#2f3c42;
  --cp-marmore:#e6e9e6;
  --cp-marmore-fraco:#9fa9aa;
  --cp-ouro:#d4a838;
  --cp-ouro-fraco:#8a6f26;
  --cp-carmim:#b2364a;
  --cp-fonte:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;

  background:var(--cp-fundo);
  color:var(--cp-marmore);
}

#tela-coup {
  background:var(--cp-fundo);
  color:var(--cp-marmore);
  font-family:var(--cp-fonte);
}

/* O cabeçalho reaproveita a moldura dos outros jogos; aqui só a cor. */
#tela-coup .s-head { border-bottom-color:var(--cp-linha); }
#tela-coup .marca-nome { color:var(--cp-marmore); letter-spacing:.02em; }
#tela-coup .marca-sub { color:var(--cp-ouro); font-style:italic; letter-spacing:.06em; }
#tela-coup .marca-icone { box-shadow:none; border-radius:9px; }
#tela-coup .voltar-jogos { color:var(--cp-marmore-fraco); }

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

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

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

/* A caixa tem tamanho próprio: as artes ainda não existem, e a lista não
   pode depender delas para ter layout. Proporção da carta do jogo. */
.cp-arte {
  flex:0 0 96px; width:96px; aspect-ratio:5 / 7;
  background:linear-gradient(160deg, var(--cp-painel-2), var(--cp-painel));
  border:1px solid var(--cp-linha); border-radius:6px; overflow:hidden;
  position:relative;
}
.cp-arte::after {
  /* a moeda: marcador enquanto a arte não chega */
  content:""; position:absolute; left:50%; top:50%;
  width:30px; height:30px; transform:translate(-50%,-50%);
  border-radius:50%; border:2px solid var(--cp-ouro-fraco);
  background:radial-gradient(circle at 38% 34%, var(--cp-ouro-fraco), transparent 70%);
  opacity:.5;
}
.cp-arte img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; }

.cp-txt { flex:1; min-width:0; }
.cp-cab { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:5px; }
.cp-nome { font-size:18px; font-weight:600; letter-spacing:.01em; }
.cp-selo {
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cp-ouro); border:1px solid var(--cp-ouro-fraco);
  border-radius:3px; padding:1px 5px;
}
.cp-copias { margin-left:auto; font-size:12px; color:var(--cp-marmore-fraco); white-space:nowrap; }
.cp-resumo { font-size:15px; line-height:1.45; margin-bottom:9px; }

/* Ação e bloqueio como par rótulo/valor: é o que a mesa consulta, e em
   parágrafo corrido os dois se misturam. */
.cp-poderes { display:grid; grid-template-columns:auto 1fr; gap:3px 10px; font-size:13.5px; line-height:1.4; }
.cp-poderes dt {
  color:var(--cp-ouro); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; padding-top:2px; white-space:nowrap;
}
.cp-poderes dd { color:var(--cp-marmore); }
.cp-nota { margin-top:8px; font-size:12.5px; color:var(--cp-marmore-fraco); font-style:italic; }

.cp-variante .cp-arte { border-style:dashed; }

/* ---------------- aba Como se joga ---------------- */
.cp-secao { max-width:62ch; margin-bottom:22px; }
.cp-secao h2 { font-size:18px; letter-spacing:.03em; margin-bottom:8px; color:var(--cp-ouro); }
.cp-secao p { font-size:15.5px; line-height:1.55; }

.cp-tabela { border-collapse:collapse; margin:14px 0 4px; font-size:14px; width:100%; }
.cp-tabela caption {
  text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cp-marmore-fraco); margin-bottom:7px;
}
.cp-tabela th, .cp-tabela td {
  padding:7px 12px 7px 0; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--cp-linha); line-height:1.4;
}
.cp-tabela th { color:var(--cp-marmore-fraco); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.cp-tabela td:first-child { color:var(--cp-ouro); white-space:nowrap; }
.cp-custo { white-space:nowrap; font-variant-numeric:tabular-nums; }

.cp-variantes { margin-top:12px; font-size:14.5px; line-height:1.5; }
.cp-variantes dt {
  color:var(--cp-marmore); font-weight:600; margin-top:12px;
  padding-left:10px; border-left:3px solid var(--cp-carmim);
}
.cp-variantes dd { padding-left:13px; margin-top:3px; color:var(--cp-marmore-fraco); }

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

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