/* ==========================================================================
   JOGOSRÁPIDOS — game-da-velha.css
   ========================================================================== */

.velha { max-width: 22rem; margin: 0 auto; }

.velha__status { text-align: center; font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; margin-bottom: 1rem; }
.velha__status[data-jogador="X"] { color: #60a5fa; }
.velha__status[data-jogador="O"] { color: #f472b6; }

.velha__tabuleiro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; aspect-ratio: 1; }
.velha__celula {
  display: grid; place-items: center; aspect-ratio: 1;
  font-family: var(--font-title); font-weight: 700; font-size: clamp(2rem, 12vw, 3.5rem); line-height: 1;
  background: var(--graphite); border: 1px solid var(--steel); border-radius: var(--radius);
  color: var(--snow); cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.velha__celula:hover:not(:disabled) { border-color: var(--yellow); }
.velha__celula:disabled { cursor: default; }
.velha__celula--x { color: #60a5fa; }
.velha__celula--o { color: #f472b6; }
.velha__celula--vitoria { background: var(--yellow-soft); border-color: var(--yellow); }

.velha__placar { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; color: var(--smoke); font-size: 0.9rem; }
.velha__placar span { display: inline-flex; align-items: center; gap: 0.4rem; }
.velha__placar b { color: var(--snow); font-family: var(--font-title); font-size: 1.05rem; }