/* ---------------------------------------------------------------------
   Paleta: oceano noturno + latão de navio + pergaminho de carta náutica.
   Tipografia: serifada de bilhete de embarque (títulos) + sóbria (dados).
--------------------------------------------------------------------- */
:root {
  --cor-fundo: #0b2545;
  --cor-fundo-profundo: #071a30;
  --cor-onda: #123b5c;
  --cor-onda-clara: #1c4a73;
  --cor-destaque: #c89b3c;
  --cor-destaque-claro: #e4c876;
  --cor-superficie: #f3e9d2;
  --cor-texto-claro: #eaf2f5;
  --cor-texto-escuro: #1b2a38;
  --cor-alerta: #b23a2e;
  --cor-sucesso: #3e7c59;
  --fonte-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --fonte-corpo: "Inter", "Segoe UI", system-ui, sans-serif;
  --fonte-utilitaria: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top, var(--cor-onda-clara) 0%, var(--cor-fundo) 55%, var(--cor-fundo-profundo) 100%);
  font-family: var(--fonte-corpo);
  color: var(--cor-texto-claro);
  padding: 0.75rem 1rem 1.5rem;
}

/* Só a página do tabuleiro (não o admin, nem a página de participantes)
   trava a altura na viewport, sem scroll — pensada pra ficar fixa numa TV. */
html.tela-fixa {
  height: 100%;
  overflow: hidden;
}
body.tela-fixa {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.6rem 1rem 0.75rem;
}
body.tela-fixa .pagina {
  height: 100%;
  overflow: hidden;
}

.pagina {
  max-width: 1900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* --- Cabeçalho: bilhete de embarque em pergaminho ------------------- */
.cabecalho {
  background: var(--cor-superficie);
  color: var(--cor-texto-escuro);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 2px solid var(--cor-destaque);
}

.cabecalho .eyebrow {
  font-family: var(--fonte-utilitaria);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-onda);
  display: block;
  margin-bottom: 0.1rem;
}

.cabecalho h1 {
  font-family: var(--fonte-display);
  font-size: 1.3rem;
  margin: 0;
  font-weight: 700;
}

.cabecalho .meta-info {
  font-family: var(--fonte-utilitaria);
  font-size: 0.7rem;
  text-align: right;
  line-height: 1.4;
}

/* --- Erro de configuração ------------------------------------------- */
.aviso {
  background: var(--cor-superficie);
  color: var(--cor-texto-escuro);
  border-left: 5px solid var(--cor-alerta);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  font-family: var(--fonte-corpo);
}
.aviso code {
  font-family: var(--fonte-utilitaria);
  background: rgba(0, 0, 0, 0.08);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

/* --- Tabuleiro: grade em zigue-zague (bustrofédon) ------------------- */
.tabuleiro {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--cor-tabuleiro, #e6d19a);
  box-shadow: inset 0 0 80px rgba(90, 60, 20, 0.35);
}

.cenario-tabuleiro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.camada-casas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.casa {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 5.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-linear-gradient(
    135deg,
    var(--cor-onda),
    var(--cor-onda) 10px,
    var(--cor-onda-clara) 10px,
    var(--cor-onda-clara) 20px
  );
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: clamp(2px, 0.2vw, 4px) solid #7a5a28;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.casa .numero {
  font-family: var(--fonte-utilitaria);
  font-size: clamp(0.55rem, 0.6vw, 0.85rem);
  color: rgba(234, 242, 245, 0.75);
  position: absolute;
  top: 4px;
  left: 6px;
}

.casa.eh-partida,
.casa.eh-meta {
  background: linear-gradient(160deg, var(--cor-destaque-claro), var(--cor-destaque));
}
.casa.eh-partida .rotulo,
.casa.eh-meta .rotulo {
  color: var(--cor-texto-escuro);
  font-weight: 700;
}

.casa .rotulo {
  font-family: var(--fonte-utilitaria);
  font-size: clamp(0.5rem, 0.55vw, 0.75rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto-claro);
}

.casa .icone-evento {
  font-size: clamp(0.9rem, 1.1vw, 1.5rem);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

.casa.evento-oculto .icone-evento {
  opacity: 0.55;
}

/* Peças: aro de salva-vidas com o retrato do líder no centro */
.pecas-na-casa {
  position: absolute;
  bottom: -8px;
  left: -22px;
  right: -22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 2px;
  z-index: 10;
}

.peca {
  position: relative;
  width: clamp(17px, 1.45vw, 34px);
  height: clamp(17px, 1.45vw, 34px);
  border-radius: 50%;
  background: repeating-conic-gradient(
    var(--cor-equipe-peca, var(--cor-alerta)) 0deg 22.5deg,
    var(--cor-texto-claro) 22.5deg 45deg
  );
  padding: 3px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--cor-equipe-peca, transparent);
  animation: balancar 3.4s ease-in-out infinite;
}
.peca:first-child {
  margin-left: 0;
}

.badge-mais-participantes {
  width: clamp(14px, 1.1vw, 22px);
  height: clamp(14px, 1.1vw, 22px);
  border-radius: 50%;
  background: var(--cor-fundo-profundo);
  color: var(--cor-destaque-claro);
  border: 2px solid var(--cor-destaque);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-utilitaria);
  font-size: clamp(0.5rem, 0.55vw, 0.62rem);
  font-weight: 600;
  flex-shrink: 0;
}

.peca .retrato {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cor-onda);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-utilitaria);
  font-size: 0.75rem;
  color: var(--cor-texto-claro);
}
.peca .retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.peca.presa {
  animation: none;
  filter: grayscale(0.6);
}

@keyframes balancar {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}

/* --- Tripulações (roster) -------------------------------------------- */
.tripulacoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

.cartao-equipe {
  background: var(--cor-superficie);
  color: var(--cor-texto-escuro);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.cartao-equipe .retrato-grande {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--cor-alerta) 0deg 22.5deg, #fff 22.5deg 45deg);
  padding: 3px;
  flex-shrink: 0;
}
.cartao-equipe .retrato-grande .miolo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cor-onda);
  color: var(--cor-texto-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-utilitaria);
  font-size: 0.85rem;
}
.cartao-equipe .retrato-grande img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cartao-equipe .info-equipe {
  min-width: 0;
}
.cartao-equipe .nome-equipe {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}
.cartao-equipe .detalhe-equipe {
  font-family: var(--fonte-utilitaria);
  font-size: 0.75rem;
  color: var(--cor-onda);
}
.cartao-equipe.na-prisao {
  border-left: 4px solid var(--cor-alerta);
}
.cartao-equipe.venceu {
  border-left: 4px solid var(--cor-sucesso);
}

/* --- Painel de casas reveladas ---------------------------------------- */
.reveladas {
  background: var(--cor-superficie);
  color: var(--cor-texto-escuro);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.reveladas h2 {
  font-family: var(--fonte-display);
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
}
.reveladas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.reveladas li strong {
  font-family: var(--fonte-utilitaria);
}

/* --- Botões que herdam o visual das peças/cartões (agora clicáveis) --- */
.peca {
  border: none;
  cursor: pointer;
  font: inherit;
}
.cartao-equipe-clicavel {
  border: none;
  cursor: pointer;
  font: inherit;
  width: 100%;
  text-align: left;
}
.cartao-equipe-clicavel:hover,
.peca:hover {
  filter: brightness(1.08);
}

/* --- Cela da prisão: espaço reservado, fora da trilha numerada -------- */
.cela-prisao {
  background: var(--cor-fundo-profundo);
  border: 1px dashed var(--cor-alerta);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.cela-prisao h2 {
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
  color: var(--cor-destaque-claro);
}
.cela-prisao .detalhe-equipe {
  color: rgba(234, 242, 245, 0.75);
  margin: 0 0 0.75rem;
}
.pecas-na-cela {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.legenda-cela {
  font-family: var(--fonte-utilitaria);
  font-size: 0.78rem;
  color: rgba(234, 242, 245, 0.85);
  margin-right: 0.75rem;
}

/* --- Modal de perfil da equipe ----------------------------------------- */
.modal-perfil {
  border: none;
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  max-width: 360px;
  width: 90%;
  background: var(--cor-superficie);
  color: var(--cor-texto-escuro);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.modal-perfil::backdrop {
  background: rgba(7, 26, 48, 0.65);
}
.modal-perfil h2 {
  font-family: var(--fonte-display);
  margin: 0.75rem 0 0.5rem;
}
.modal-perfil .retrato-grande {
  width: 64px;
  height: 64px;
}
.botao-fechar-modal {
  float: right;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--cor-texto-escuro);
}

.peca.acabou-de-mover {
  animation: pulso-movimento 0.6s ease-out 3;
}
@keyframes pulso-movimento {
  0%, 100% { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 0 6px var(--cor-equipe-peca, rgba(200, 155, 60, 0.55)); }
}

.link-perigo {
  background: none;
  border: none;
  color: var(--cor-alerta);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.nav-admin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--cor-fundo-profundo);
  padding: 0.85rem 1.25rem;
  border-radius: 6px;
}
.marca-admin {
  font-family: var(--fonte-display);
  color: var(--cor-destaque-claro);
  text-decoration: none;
  font-weight: 700;
}
.links-nav-admin {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.links-nav-admin a {
  color: var(--cor-texto-claro);
  text-decoration: none;
  font-family: var(--fonte-utilitaria);
  font-size: 0.85rem;
  opacity: 0.85;
}
.links-nav-admin a:hover {
  opacity: 1;
  text-decoration: underline;
}

.caixa-login {
  max-width: 380px;
  margin: 3rem auto 0;
}

.painel-cartao {
  background: var(--cor-superficie);
  color: var(--cor-texto-escuro);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}
.painel-cartao h2 {
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  margin: 0 0 0.85rem;
}

.tabela-admin {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.tabela-admin th,
.tabela-admin td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(27, 42, 56, 0.12);
}
.tabela-admin th {
  font-family: var(--fonte-utilitaria);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
}

.etiqueta {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-family: var(--fonte-utilitaria);
  font-size: 0.72rem;
}
.etiqueta-alerta {
  background: var(--cor-alerta);
  color: #fff;
}

.formulario-admin {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 480px;
}
.formulario-admin label {
  font-family: var(--fonte-utilitaria);
  font-size: 0.78rem;
  margin-top: 0.6rem;
}
.formulario-admin input[type="text"],
.formulario-admin input[type="number"],
.formulario-admin input[type="password"],
.formulario-admin textarea {
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(27, 42, 56, 0.25);
  border-radius: 4px;
  background: #fff;
  color: var(--cor-texto-escuro);
}
.rotulo-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fonte-corpo) !important;
}

.botao-primario,
.botao-secundario {
  display: inline-block;
  text-align: center;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-size: 0.9rem;
}
.botao-primario {
  background: var(--cor-destaque);
  color: var(--cor-texto-escuro);
}
.botao-secundario {
  background: transparent;
  color: var(--cor-texto-escuro);
  border: 1px solid rgba(27, 42, 56, 0.3);
}

.grade-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.cartao-atalho {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  background: rgba(11, 37, 69, 0.06);
  color: var(--cor-texto-escuro);
  text-decoration: none;
}
.cartao-atalho strong {
  font-family: var(--fonte-display);
}
.cartao-atalho span {
  font-size: 0.82rem;
  opacity: 0.75;
}

/* ======================================================================
   Layout tabuleiro + barra de progresso das equipes
====================================================================== */
.layout-tabuleiro {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.barra-progresso {
  background: var(--cor-superficie);
  color: var(--cor-texto-escuro);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.barra-progresso h2 {
  font-family: var(--fonte-display);
  font-size: 0.8rem;
  margin: 0;
  flex-basis: 100%;
}
.item-progresso {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 130px;
  flex: 1;
}
.cabecalho-item-progresso {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.retrato-pequeno {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cor-onda);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-utilitaria);
  font-size: 0.55rem;
  color: var(--cor-texto-claro);
  flex-shrink: 0;
}
.retrato-pequeno img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nome-item-progresso {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 0.9rem;
}
.trilho-progresso {
  height: 10px;
  border-radius: 5px;
  background: rgba(11, 37, 69, 0.12);
  overflow: hidden;
}
.preenchimento-progresso {
  height: 100%;
  background: linear-gradient(90deg, var(--cor-destaque), var(--cor-destaque-claro));
  border-radius: 5px;
  transition: width 0.6s ease;
}

/* --- Zonas especiais: Necrotério e Fossa das Marianas ------------------ */
.zonas-especiais {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.zona-especial {
  flex: 1 1 240px;
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.conector-necroterio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  padding: 0 0.25rem;
  color: rgba(234, 242, 245, 0.55);
}
.seta-conectora {
  font-size: 1.5rem;
  line-height: 1;
}
.placa-eliminados {
  font-family: var(--fonte-utilitaria);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(234, 242, 245, 0.4);
  border-radius: 3px;
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
}
.zona-especial h2 {
  font-family: var(--fonte-display);
  font-size: 1rem;
  margin: 0 0 0.25rem;
}
.zona-necroterio {
  background: #2b2b2b;
  color: #cfcfcf;
}
.zona-necroterio .detalhe-equipe {
  color: rgba(207, 207, 207, 0.7);
}
.zona-fossa {
  background: linear-gradient(180deg, #0a1f33, #030b14);
  color: rgba(234, 242, 245, 0.85);
}
.zona-fossa .detalhe-equipe {
  color: rgba(234, 242, 245, 0.6);
}
.pecas-zona-especial {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.zona-especial-cartao {
  opacity: 0.7;
}

/* ======================================================================
   Painel de revelação (botão da reunião)
====================================================================== */
.painel-revelacao {
  background: var(--cor-superficie);
  color: var(--cor-texto-escuro);
  border-radius: 6px;
  padding: 0.5rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.botao-revelar {
  background: var(--cor-destaque);
  color: var(--cor-texto-escuro);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(200, 155, 60, 0.4);
}
.botao-revelar:hover {
  filter: brightness(1.08);
}
.detalhe-revelacao {
  font-family: var(--fonte-utilitaria);
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ======================================================================
   Pódios (diário e geral)
====================================================================== */
.podios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
}
.podio {
  background: linear-gradient(160deg, var(--cor-destaque-claro), var(--cor-destaque));
  color: var(--cor-texto-escuro);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.podio h2 {
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}
.lista-podio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--fonte-corpo);
  font-size: 0.92rem;
}
.medalha-podio {
  font-size: 1.1rem;
  margin-right: 0.2rem;
}

/* ======================================================================
   Anúncio de evento (modal, ao revelar quem caiu numa casa de evento)
====================================================================== */
.modal-evento {
  max-width: 420px;
  text-align: center;
}
.modal-evento .evento-retrato {
  width: 96px;
  height: 96px;
  margin: 0 auto;
}
.modal-evento .evento-retrato .miolo {
  font-size: 2.4rem;
}
.modal-evento #evento-membro-nome {
  margin: 0.75rem 0 0;
}
.modal-evento h2 {
  font-size: 1.4rem;
}
.evento-descricao {
  font-size: 1rem;
  color: var(--cor-texto-escuro);
  opacity: 0.9;
}
.evento-curiosidade {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(11, 37, 69, 0.2);
  font-style: italic;
}

/* ======================================================================
   Eventos pendentes (resolvíveis direto no tabuleiro)
====================================================================== */
.eventos-pendentes {
  background: var(--cor-superficie);
  color: var(--cor-texto-escuro);
  border-radius: 6px;
  padding: 0.5rem 0.85rem;
  border-left: 4px solid var(--cor-alerta);
}
.eventos-pendentes h2 {
  font-family: var(--fonte-display);
  font-size: 0.85rem;
  margin: 0 0 0.3rem;
}
.item-pendencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(11, 37, 69, 0.1);
}
.form-pendencia {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Link entre o tabuleiro e a página separada de pódio/participantes */
.link-participantes {
  display: inline-block;
  align-self: flex-start;
  color: var(--cor-destaque-claro);
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  padding: 0.35rem 0.1rem;
}
.link-participantes:hover {
  text-decoration: underline;
}

/* Peças dentro das zonas especiais (Prisão / Necrotério / Fossa): o container
   é ancorado pelo CENTRO da zona (left/top vêm inline), não pelo rodapé da
   casa como .pecas-na-casa faz — sem isso as peças flutuavam longe da zona. */
.pecas-na-zona {
  bottom: auto;
  right: auto;
  transform: translate(-50%, -50%);
  max-width: 11%;
  justify-content: center;
  z-index: 10;
}


/* ======================================================================
   Fundo do tabuleiro: cor + textura (ou imagem própria, que sobrepõe tudo)
   Trocáveis em /admin/tema-visual.
====================================================================== */
.tabuleiro.textura-pergaminho {
  background-image:
    radial-gradient(ellipse at 22% 28%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 78% 72%, rgba(120, 85, 30, 0.16) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 45%, rgba(255, 250, 235, 0.30) 0%, transparent 60%);
}
.tabuleiro.textura-linho {
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 90, 40, 0.10) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(120, 90, 40, 0.10) 0 1px, transparent 1px 6px);
}
.tabuleiro.textura-hachurado {
  background-image: repeating-linear-gradient(45deg, rgba(110, 80, 35, 0.13) 0 1px, transparent 1px 9px);
}
.tabuleiro.textura-pontilhado {
  background-image: radial-gradient(circle, rgba(110, 80, 35, 0.20) 1.2px, transparent 1.4px);
  background-size: 14px 14px;
}
.tabuleiro.textura-ondas {
  background-image: repeating-radial-gradient(circle at 50% 50%, rgba(110, 80, 35, 0.10) 0 2px, transparent 2px 22px);
  background-size: 180px 180px;
}
/* imagem própria: vence cor e textura (fica por último de propósito) */
.tabuleiro.com-imagem-fundo {
  background-image: var(--imagem-fundo-tabuleiro, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Chapéu de capitão nas peças marcadas como líder */
.chapeu-lider {
  position: absolute;
  left: 50%;
  top: -66%;
  width: 145%;
  height: 92%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
.chapeu-lider svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* anel dourado: marca o líder mesmo em telas pequenas, onde o chapéu fica miúdo */
.peca.lider {
  z-index: 4;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--cor-destaque, #c89b3c);
}

/* ======================================================================
   "+N" das casas lotadas: caixa com os participantes escondidos
   Abre no hover do grupo inteiro (badge + caixa), então continua aberta
   enquanto o ponteiro estiver sobre a lista. Também abre no foco pelo
   teclado (:focus-within).
====================================================================== */
.grupo-ocultos {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 20;
}
.grupo-ocultos .badge-mais-participantes {
  cursor: pointer;
  border: 2px solid var(--cor-destaque);
  font: inherit;
  font-family: var(--fonte-utilitaria);
  font-size: clamp(0.5rem, 0.55vw, 0.62rem);
  font-weight: 600;
}
.popover-ocultos {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.5rem 0.6rem;
  background: var(--cor-superficie);
  color: var(--cor-texto-escuro);
  border: 2px solid var(--cor-destaque);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  z-index: 30;
}
.grupo-ocultos:hover .popover-ocultos,
.grupo-ocultos:focus-within .popover-ocultos {
  display: block;
}
.titulo-popover {
  display: block;
  font-family: var(--fonte-utilitaria);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 0.35rem;
}
.lista-popover {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.item-popover {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.item-popover .peca {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  animation: none;
}
.nome-popover {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  color: var(--cor-texto-escuro);
  text-align: left;
  white-space: nowrap;
}
.nome-popover:hover {
  text-decoration: underline;
}

/* Ícone de casa quando o evento usa imagem própria (128x128px recomendado) */
.casa .icone-evento .icone-imagem {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.casa .icone-evento.sem-icone {
  display: none;
}

/* A caixa do "+N" vira de lado quando abriria pra fora do tabuleiro */
.grupo-ocultos.abre-para-baixo .popover-ocultos {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 4px;
}
.grupo-ocultos.alinha-esquerda .popover-ocultos {
  left: 0;
  transform: none;
}
.grupo-ocultos.alinha-direita .popover-ocultos {
  left: auto;
  right: 0;
  transform: none;
}

/* A casa (e a zona) sob o mouse sobe acima das vizinhas — sem isso a caixa
   do "+N" fica presa atrás das casas seguintes, porque o transform de
   centralização cria um contexto de empilhamento próprio em cada casa. */
.casa:hover,
.casa:focus-within {
  z-index: 60;
}
.pecas-na-zona:hover,
.pecas-na-zona:focus-within {
  z-index: 60;
}