/* The page shell: a full-height column on the dark ground, with two soft glows
   behind everything. */

/* 100dvh where supported: on a phone 100vh is the height with the browser's toolbars
   hidden, so a page that tall scrolls under the graph while they show */
.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 18% 8%, #14201700 0%, var(--color-bg) 70%), var(--color-bg);
  overflow: hidden;
}

.page__glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.page__glow--top {
  top: -220px;
  left: -160px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgb(var(--area-ai) / .10), transparent 62%);
}
.page__glow--bottom {
  bottom: -260px;
  right: -120px;
  width: 680px;
  height: 680px;
  background: radial-gradient(circle, rgb(var(--area-games) / .07), transparent 62%);
}