:is(
  .auth-page-shell,
  .guides-page-shell,
  .guide-page-shell,
  .servers-page-shell,
  .server-view-page-shell,
  .dex-page-shell,
  .abilities-page-shell,
  .moves-page-shell,
  .pokepage-shell,
  .team-page-shell,
  .battles-page,
  .teams-page
) {
  position: relative;
  overflow-x: clip;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(255, 208, 44, var(--shell-yellow-alpha, 0.18)), transparent 28%),
    radial-gradient(circle at top right, rgba(122, 199, 76, var(--shell-green-alpha, 0.14)), transparent 24%),
    radial-gradient(circle at 34% 16%, rgba(176, 87, 197, var(--shell-purple-alpha, 0)), transparent 28%),
    radial-gradient(circle at 78% 14%, rgba(99, 144, 240, var(--shell-blue-alpha, 0)), transparent 26%),
    linear-gradient(180deg, #f7f0ff 0%, #f3f2f8 42%, #f5f5f5 100%);
}

:is(
  .auth-page-backdrop,
  .guides-page-backdrop,
  .guide-page-backdrop,
  .servers-page-backdrop,
  .server-view-page-backdrop,
  .dex-page-backdrop,
  .abilities-page-backdrop,
  .moves-page-backdrop,
  .pokepage-backdrop,
  .team-page-backdrop,
  .battles-backdrop,
  .teams-backdrop
) {
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  pointer-events: none;
}

:is(
  .auth-page-backdrop-left,
  .guides-page-backdrop-left,
  .guide-page-backdrop-left,
  .servers-page-backdrop-left,
  .server-view-page-backdrop-left,
  .dex-page-backdrop-left,
  .abilities-page-backdrop-left,
  .moves-page-backdrop-left,
  .pokepage-backdrop-left,
  .team-page-backdrop-left,
  .battles-backdrop-left,
  .teams-backdrop-left
) {
  width: 420px;
  height: 420px;
  top: 160px;
  left: -120px;
  background: radial-gradient(circle, rgba(176, 87, 197, 0.18), rgba(176, 87, 197, 0));
}

:is(
  .auth-page-backdrop-right,
  .guides-page-backdrop-right,
  .guide-page-backdrop-right,
  .servers-page-backdrop-right,
  .server-view-page-backdrop-right,
  .dex-page-backdrop-right,
  .abilities-page-backdrop-right,
  .moves-page-backdrop-right,
  .pokepage-backdrop-right,
  .team-page-backdrop-right,
  .battles-backdrop-right,
  .teams-backdrop-right
) {
  width: 460px;
  height: 460px;
  top: 120px;
  right: -160px;
  background: radial-gradient(circle, rgba(99, 144, 240, 0.16), rgba(99, 144, 240, 0));
}
