/*
 * Perfils, edição 2026: folha de estilo base e da tela de jogo.
 * Identidade (paleta, tipografia, componentes .p-*): theme.css. Casca do app, tela inicial, configuração,
 * "Como jogar", menus, avisos e modais: screens.css (carrega depois desta).
 *
 * Aqui ficam só o reset, o mapa de cor dos peões e as animações compartilhadas. Todo token é --p-* (theme.css).
 */

/* player colour -> --pc (score bars, turn badge, ranking bars): the 6 pawns of the original (SPEC-TABULEIRO §2) */
[data-pc="tomate"]  { --pc: var(--p-pawn-red); }
[data-pc="cobalto"] { --pc: var(--p-pawn-blue); }
[data-pc="gema"]    { --pc: var(--p-pawn-yellow); }
[data-pc="folha"]   { --pc: var(--p-pawn-green); }
[data-pc="uva"]     { --pc: var(--p-pawn-plum); }
[data-pc="rosa"]    { --pc: var(--p-pawn-white); }

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

h1, h2, h3, p, ol, ul { margin-top: 0; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.stage { min-height: 100dvh; display: flex; flex-direction: column; outline: none; }
.view { flex: 1; width: 100%; }

/* ----------------------------------------------------------- peão em miniatura (PerfilPieces) */
.pawn-ico { display: inline-block; width: 2.1rem; flex: none; line-height: 0; }
.pawn-ico svg { display: block; width: 79%; height: auto; margin-inline: auto; overflow: visible; }
/* the 3D pawn is a <canvas> sized inline by PerfilPieces; here the context decides the width */
.pawn-ico canvas { display: block; width: 79% !important; height: auto !important; margin-inline: auto; }

/* ------------------------------------------------------------------ jogo */
/* A tela de jogo (cabeçalho, faixa da carta, carta branca da dica, jogada, placar) vive em game.css. */

/* confete */
.confetti {
  position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100vh; height: 100dvh;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; pointer-events: none;
}

/* --------------------------------------------------------------- animações */
@keyframes clueIn {
  from { opacity: 0; transform: translateY(0.8rem) rotate(-1.2deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(-0.6rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-0.5rem) rotate(-0.4deg); }
  36% { transform: translateX(0.45rem) rotate(0.3deg); }
  54% { transform: translateX(-0.3rem); }
  72% { transform: translateX(0.2rem); }
}
.paper.shake { animation: shake var(--dur-3) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}