:root {
  --game-canvas-max: 1480px;
  --game-page-gutter: 12px;
  --game-sidebar-width: 330px;
}

@media (min-width: 851px) {
  .bubbles-app,
  .wheel-app {
    width: min(var(--game-canvas-max), calc(100% - 24px));
    margin: var(--game-page-gutter) auto 28px;
  }

  .shell {
    padding: var(--game-page-gutter);
  }

  .shell > .common-game-header,
  .shell > .game-layout {
    width: 100%;
    max-width: var(--game-canvas-max);
    margin-right: auto;
    margin-left: auto;
  }

  .bubbles-app > .common-game-header,
  .bubbles-app > .game-layout,
  .wheel-app > .common-game-header {
    width: 100%;
    max-width: none;
  }

  .bubbles-app > .game-layout {
    grid-template-columns: var(--game-sidebar-width) minmax(0, 1fr);
  }

  body:has(#stage) .game-layout {
    grid-template-columns: var(--game-sidebar-width) minmax(520px, 1fr) var(--game-sidebar-width);
  }

  body:has(#plinkoBoard) .game-layout {
    grid-template-columns: var(--game-sidebar-width) minmax(600px, 1fr);
  }
}