/* responsive.css — RWD media queries */

/* ── Phone: < 480px ── */
@media (max-width: 480px) {
  :root {
    --board-size: min(88vw, 320px);
    --cell-gap: 5px;
  }

  .symbol-buttons {
    gap: var(--gap-md);
  }

  .symbol-btn {
    padding: var(--gap-md);
    min-width: 100px;
  }

  .game-container {
    gap: var(--gap-md);
    padding: var(--gap-md) var(--gap-sm);
  }
}

/* ── Very small: < 360px ── */
@media (max-width: 360px) {
  :root {
    --board-size: 92vw;
    --cell-gap: 4px;
  }

  .symbol-buttons {
    flex-direction: column;
    align-items: center;
  }

  .symbol-btn {
    width: 160px;
  }
}

/* ── Landscape phone ── */
@media (max-height: 600px) and (orientation: landscape) {
  :root {
    --board-size: min(60vh, 280px);
  }

  .select-container {
    gap: var(--gap-md);
    padding: var(--gap-md);
  }

  .game-container {
    gap: var(--gap-sm);
  }

  .game-title-small {
    display: none;
  }
}

/* ── Desktop: ≥ 768px ── */
@media (min-width: 768px) {
  :root {
    --board-size: 360px;
  }
}