:root {
  --game-controls-height: 72px;
  --app-footer-height: 44px;

  /* UI-role colors are independent from the canvas rendering palette. */
  --color-app-background: #1a1a2e;
  --color-surface: #102a43;
  --color-surface-alt: #16324f;
  --color-surface-deep: #0b2034;
  --color-border: #486581;
  --color-text: #f0f4f8;
  --color-text-dim: #9fb3c8;
  --color-accent: #62b0e8;
  --color-accent-light: #9ed7ff;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
  background: var(--color-app-background);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}
.app-root {
  width: 100%;
  height: 100%;
}
.ui-overlay-layer,
.ui-utility-layer { display: contents; }
.app-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--color-app-background);
}
.shell-region {
  min-height: 0;
  pointer-events: none;
}
.shell-region--top {
  min-height: env(safe-area-inset-top);
}