/* Optional website surround. Game artwork and controls remain inside the player. */
.play-page--curves {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(115deg, #f8fcff 8%, #edf8ff 64%, #e3f4ff 100%);
}
.play-page--curves > .container { position: relative; z-index: 1; }
.play-page--curves::before,
.play-page--curves::after,
.play-page--curves .play-page__ring {
  position: absolute;
  pointer-events: none;
}
.play-page--curves::before {
  content: "";
  z-index: 0;
  right: -16%;
  bottom: -210px;
  width: max(780px, 76%);
  height: 740px;
  border-radius: 58% 0 0 0;
  background: linear-gradient(140deg, #55bdf5 0%, #229ded 52%, #0878e8 100%);
  transform: rotate(-8deg);
}
.play-page--curves::after {
  content: "";
  z-index: 0;
  left: -20%;
  bottom: -470px;
  width: 112%;
  height: 680px;
  border: 30px solid #c6e8fc;
  border-radius: 50%;
  background: #f8fcff;
  transform: rotate(9deg);
}
.play-page--curves .play-page__ring {
  z-index: 0;
  width: 420px;
  height: 420px;
  border: 64px solid rgba(145, 209, 250, .16);
  border-radius: 50%;
}
.play-page--curves .play-page__ring--left { top: 170px; left: -225px; }
.play-page--curves .play-page__ring--right {
  top: -215px;
  right: -115px;
  width: 520px;
  height: 520px;
  border-width: 76px;
  border-color: rgba(255, 255, 255, .7);
}
@media (max-width: 700px) {
  .play-page--curves::before {
    right: -290px;
    bottom: -110px;
    width: 620px;
    height: 440px;
  }
  .play-page--curves::after {
    left: -65%;
    bottom: -285px;
    width: 150%;
    height: 400px;
    border-width: 18px;
  }
  .play-page--curves .play-page__ring--left {
    top: 130px; left: -175px; width: 250px; height: 250px; border-width: 38px;
  }
  .play-page--curves .play-page__ring--right {
    top: -155px; right: -155px; width: 340px; height: 340px; border-width: 50px;
  }
}

/* Dark ribbon sweeps behind the player from upper left to lower right. */
.play-page--curves .play-page__swoop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../images/game-page-swoop.svg") center / 100% 100% no-repeat;
}
@media (max-width: 700px) {
  .play-page--curves .play-page__swoop { top: 270px; }
}