/* Tablet */
@media (max-width: 900px) {
  .board {
    padding: 20px 16px 32px;
  }

  .accent-segment {
    width: 12px;
    height: 12px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .board {
    padding: 12px 8px 24px;
  }

  .accent-bar {
    display: none;
  }

  .keyboard-hint {
    display: none;
  }

  .volume-toggle {
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }
}

/* Fullscreen mode */
:fullscreen .board {
  border-radius: 0;
  box-shadow: none;
}