@import url('../global.css');

/* =============================================================================
   Pentago — 6×6 board with a visible 2×2 quadrant split, wrapped by eight
   rotation controls (CCW/CW per quadrant).
   ========================================================================== */

:root {
  --title-color: var(--color-pentago);
}

.pentago-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.pentago-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
  aspect-ratio: 1;
  padding: var(--spacing-sm);
  background: var(--logic-grid-frame-bg);
  border: 1px solid var(--logic-grid-frame-border);
  border-radius: var(--border-radius-lg);
  transition:
    background 0.2s,
    border-color 0.2s;
}

/* Thicker gutters between the four 3×3 quadrants. */
.pentago-cell:nth-child(6n + 3) {
  margin-right: 4px;
}
.pentago-cell:nth-child(n + 13):nth-child(-n + 18) {
  margin-bottom: 4px;
}

.pentago-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: var(--logic-grid-cell-bg);
  cursor: pointer;
  transition:
    background 0.12s ease,
    transform 0.08s ease;
}

.pentago-cell:disabled {
  cursor: default;
}
.pentago-cell.is-seat-0 {
  background: var(--color-pentago);
}
.pentago-cell.is-seat-1 {
  background: var(--accent);
}
.pentago-cell.is-pending {
  background: color-mix(in srgb, var(--color-pentago) 45%, var(--logic-grid-cell-bg));
  box-shadow: 0 0 0 2px var(--color-pentago) inset;
}

.pentago-rotations {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: var(--spacing-xs);
  justify-content: center;
}

.pentago-rotate {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--border-radius-md);
  background: var(--surface-2);
  color: var(--text-color);
  cursor: pointer;
  transition:
    background 0.12s ease,
    transform 0.08s ease;
}
.pentago-rotate:not(:disabled):hover {
  background: color-mix(in srgb, var(--color-pentago) 25%, var(--surface-2));
}
.pentago-rotate:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Highlight the rotation row while a marble is pending. */
.pentago-board.is-choosing-rotation .pentago-rotations {
  outline: 2px dashed var(--color-pentago);
  outline-offset: 4px;
  border-radius: var(--border-radius-md);
}