/* boringbroad — mobile.css */
@media (max-width: 720px) {

  .topbar { padding: 0 8px; height: 48px; }
  .board-title { width: 90px; font-size: 12px; }
  #btn-grid, #btn-undo, #btn-redo { display: none; }
  .tb-btn { padding: 6px 9px; font-size: 11.5px; }

  .stage { inset: 48px 0 0 0; }

  /* tray moves to the bottom, horizontal */
  .tray {
    left: 50%; top: auto; bottom: 12px;
    transform: translateX(-50%);
    flex-direction: row;
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    padding: 6px;
    gap: 0;
  }
  .tray::-webkit-scrollbar { display: none; }
  .tool { width: 40px; height: 40px; flex-shrink: 0; }
  .tray-sep { width: 1px; height: 22px; margin: 0 4px; flex-shrink: 0; }

  /* options float above the tray */
  .opts {
    left: 50%; top: auto; bottom: 68px;
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 20px));
    flex-direction: column;
    max-height: 42vh; overflow-y: auto;
  }
  .swatches { grid-template-columns: repeat(9, 1fr); }
  .swatches .sw { border-radius: 5px; }

  .zoom { right: 8px; bottom: 68px; }
  .boards-pop { right: 8px; left: 8px; width: auto; }
}

@media (max-width: 400px) {
  .logo { font-size: 14px; }
  #btn-clear { display: none; }
}