/* board.css — full styling for the 3×3 grid and card layout */

.board {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-template-rows: repeat(3, 120px);
  gap: 10px;
  margin: 12px 0 16px;
}

//.board { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }



.cell {
  background: #0f172a;
  border: 1px solid #1f2937;
  border-radius: 12px;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  min-width: 120px;
  min-height: 120px;
}
.board .cell { aspect-ratio: 1 / 1; }

.cell.occupied {
  cursor: default;
}

.cell:hover {
  border-color: #60a5fa;
}

.cardTT {
  width: 100px;
  height: 100px;
  border-radius: 14px;
  border: 2px solid #374151;
  background: #111827;
  position: relative;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.cardTT.you {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96,165,250,0.2) inset;
}

.cardTT.ai {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.18) inset;
}

.cardTT.flip {
  animation: flipPulse 0.25s ease-out;
}

@keyframes flipPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.num {
  position: absolute;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  padding: 2px 6px;
  line-height: 1;
}

.num.top {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.num.right {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.num.bottom {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.num.left {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.hand {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
}

.hand .selectable {
  outline: 2px dashed #60a5fa;
}

.hand .cardTT {
  width: 90px;
  height: 90px;
}

.hand.ai .cardTT {
  opacity: 0.6;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.err {
  color: #fca5a5;
}
.tile-badge { pointer-events: none; }