/* Layout shared by the live arcade games, on top of kit/midnight.css (panels, buttons, level list, cards over the game).
   Each game sets its own look by overriding midnight.css's variables on :root in its own CSS file. */
html, body { touch-action: manipulation; }
body { -webkit-user-select: none; user-select: none; }
.stage { position: relative; flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden; touch-action: none; grid-area: board; }
.stage canvas { position: absolute; inset: 0; display: block; }
.controls { flex: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u)); padding: calc(10 * var(--u)) calc(10 * var(--u)) max(calc(24 * var(--u)), env(safe-area-inset-bottom)); grid-area: actions; touch-action: none; }
.controls .group { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.hold {
  display: grid;
  place-items: center;
  width: max(calc(170 * var(--u)), 56px);
  height: max(calc(150 * var(--u)), 56px);
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: max(calc(42 * var(--u)), 15px);
  border: max(1px, calc(3 * var(--u))) solid var(--edge);
  border-radius: calc(26 * var(--u));
  background: var(--glass);
  box-shadow: 0 0 calc(14 * var(--u)) var(--glow), inset 0 1px 0 var(--sheen);
  touch-action: none;
  cursor: pointer;
}
.hold.round { width: max(calc(180 * var(--u)), 64px); height: max(calc(180 * var(--u)), 64px); border-radius: 50%; }
.hold.held { filter: brightness(var(--hover)); border-color: var(--amber); }
.hold svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dpad { display: grid; grid-template: repeat(3, max(calc(92 * var(--u)), 40px)) / repeat(3, max(calc(92 * var(--u)), 40px)); gap: calc(4 * var(--u)); touch-action: none; }
.dpad .hold { width: 100%; height: 100%; border-radius: calc(18 * var(--u)); }
.dpad .up { grid-area: 1 / 2; }
.dpad .left { grid-area: 2 / 1; }
.dpad .right { grid-area: 2 / 3; }
.dpad .down { grid-area: 3 / 2; }
@media (min-aspect-ratio: 5/4) {
  .stage { width: var(--board); height: var(--board); flex: none; }
  .controls { padding: 0; }
}