/* Mesa sob medida: estilos comuns à janela do mestre e à do telão. */
:root {
  --fundo: #14110d;
  --painel: #f3ead6;
  --tinta: #221a12;
  --destaque: #2c6457;
  --perigo: #9b2c22;
  --ouro: #e8b84a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--tinta); font-family: "Alegreya Sans", system-ui, sans-serif; }

/* Tabuleiro: o mapa ocupa tudo; grade e tokens ficam por cima, em porcentagem das colunas e linhas. */
.tabuleiro { position: relative; aspect-ratio: var(--colunas) / var(--linhas); user-select: none; touch-action: none; }
.tabuleiro .mapa { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tabuleiro .grade { position: absolute; inset: 0; pointer-events: none; display: none;
  background-image: linear-gradient(to right, rgba(20, 14, 6, 0.4) 1px, transparent 1px), linear-gradient(to bottom, rgba(20, 14, 6, 0.4) 1px, transparent 1px);
  background-size: calc(100% / var(--colunas)) calc(100% / var(--linhas)); }
.tabuleiro.com-grade .grade { display: block; }
.tabuleiro .tokens { position: absolute; inset: 0; }
.token { position: absolute; aspect-ratio: 1; }
.token img { width: 100%; height: 100%; display: block; pointer-events: none; }
.token.escondido { opacity: 0.45; outline: 3px dashed #fff; outline-offset: -2px; border-radius: 50%; }
.token.vez { filter: drop-shadow(0 0 6px var(--ouro)) drop-shadow(0 0 12px var(--ouro)); }

/* Ponto marcado pelo mestre (Shift + clique). */
.ponto { position: absolute; width: 6%; aspect-ratio: 1; margin: -3% 0 0 -3%; border: 6px solid var(--ouro); border-radius: 50%; pointer-events: none; animation: ponto 2s ease-out forwards; }
@keyframes ponto { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }