body {
  min-width: 0;
}

@media (max-width: 900px), (max-height: 720px) {
  body {
    overflow: auto;
  }

  .shell {
    width: min(100% - 24px, 760px);
    height: auto;
    min-height: calc(100vh - 24px);
    margin: 12px auto;
    grid-template-rows: auto auto auto;
  }

  .desk {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(360px, 52vh) auto auto;
    padding: 18px;
  }

  .scene,
  .board {
    min-height: 360px;
  }

  .tools {
    flex-wrap: wrap;
  }

  .tools button {
    min-width: min(220px, 100%);
    flex: 1 1 190px;
  }

  .decision {
    grid-template-columns: 1fr;
  }

  .actions {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .topline {
    grid-template-columns: 1fr auto;
  }

  .pips {
    display: none;
  }

  .desk {
    padding: 12px;
  }

  .board-title,
  .bins {
    grid-template-columns: 1fr;
  }

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

  .balance {
    grid-template-columns: auto 1fr auto;
  }

  .balance input {
    width: 100%;
  }

  .decision h1 {
    font-size: 24px;
  }
}