/* REVERSI */
.rev-controles { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.rev-modo-btn {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.85rem;
  background: rgba(255,255,255,0.05); color: #cbc4d9;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
}
.rev-modo-btn.ativa {
  background: linear-gradient(120deg, #34d399, #fbbf24); color: #1a1230; border-color: transparent;
}
.rev-placar {
  display: flex; justify-content: center; gap: 24px;
  margin-bottom: 14px;
}
.rev-placar-jog {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.rev-pino {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 -2px 3px rgba(0,0,0,0.3);
}
.rev-jog-b .rev-pino { background: radial-gradient(circle at 35% 30%, #44403c, #1c1917); }
.rev-jog-w .rev-pino { background: radial-gradient(circle at 35% 30%, #fafaf9, #d6d3d1); border: 1px solid #a8a29e; }
.rev-placar-jog strong {
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1.4rem; color: #fff;
}
.rev-placar-jog.atual { background: rgba(52, 211, 153, 0.15); border: 1px solid #34d399; }

.rev-tabuleiro {
  display: grid; grid-template-columns: repeat(8, 1fr);
  width: min(440px, 92vw); aspect-ratio: 1/1;
  margin: 0 auto 18px;
  background: #047857;
  border: 4px solid #022c22; border-radius: 8px;
  padding: 4px; gap: 2px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
.rev-casa {
  background: #065f46;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
}
.rev-casa.valida::after {
  content: ''; width: 28%; height: 28%;
  background: rgba(255,255,255,0.3); border-radius: 50%;
}
.rev-casa.valida:hover::after { background: rgba(255,255,255,0.5); }
.rev-disco {
  width: 78%; height: 78%; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 -3px 4px rgba(0,0,0,0.3);
  animation: revPlace 0.3s ease-out;
}
.rev-disco.b { background: radial-gradient(circle at 35% 30%, #44403c, #1c1917); }
.rev-disco.w { background: radial-gradient(circle at 35% 30%, #fafaf9, #d6d3d1); border: 1px solid #a8a29e; }
@keyframes revPlace {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}