@media (max-width: 1080px) {
  .hud-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .actions {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .meta-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 0.65rem;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .mode-strip {
    grid-template-columns: 1fr;
  }

  body[data-embed="1"] .mode-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hud-grid,
  .actions,
  .meta-grid {
    grid-template-columns: 1fr;
  }

  body[data-embed="1"] .hud-grid,
  body[data-embed="1"] .actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .board-wrap {
    padding: 0.6rem;
  }

  .board {
    width: min(100%, 860px);
    height: 620px;
  }
}