/* We use fully dynamic fluid sizes now, removing static paddings to keep it perfectly centered */

@media (min-width: 2000px) {
  .board {
    --tile-size: 65px;
    --tile-gap: 5px;
  }
}

@media (max-width: 1200px) {
  .board {
    --tile-size: clamp(32px, 4.2vw, 50px);
  }
}

@media (max-width: 900px) {
  .board {
    --tile-size: clamp(26px, 4.5vw, 40px);
  }
  .accent-segment {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 600px) {
  .board {
    --tile-size: min(36px, calc((100vw - 48px) / var(--grid-cols) - var(--tile-gap, 2px)));
    --tile-gap: 2px;
  }
  .keyboard-hint {
    display: none;
  }
  .accent-bar {
    display: none;
  }
}