:root { --board: min(calc(100vw - 48px), calc(100dvh - 180px), 560px); }
#app {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bar { flex: 0 0 48px; max-width: none; padding: 0 12px; }
.bar-end { display: flex; align-items: center; gap: 4px; }
#show-new { width: auto; min-height: 44px; padding: 0 14px; }
p:empty { display: none; }
.play {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px 8px;
}
.board-frame { display: grid; grid-template-columns: 1.1rem var(--board); }
#board, .files, .clock { width: var(--board); height: auto; }
#board { height: var(--board); }
.clock { height: 44px; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.files { margin-left: 1.1rem; }
.side {
  width: var(--board);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#games { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.game { min-height: 44px; }
@media (min-width: 960px) {
  :root { --board: min(calc(100vw - 400px), calc(100dvh - 80px)); }
  .play {
    display: grid;
    grid-template-columns: auto 280px;
    grid-template-rows: 44px minmax(0, 1fr) 44px auto;
    justify-content: center;
    align-content: start;
    column-gap: 24px;
    row-gap: 0;
    padding: 16px 24px;
    height: auto;
  }
  .board-frame { grid-column: 1; grid-row: 1 / 4; align-self: center; }
  .files { grid-column: 1; grid-row: 4; }
  #opp-clock { grid-column: 2; grid-row: 1; width: 280px; }
  .side { grid-column: 2; grid-row: 2; width: 280px; height: auto; align-self: stretch; }
  #my-clock { grid-column: 2; grid-row: 3; width: 280px; }
}