body.flip-page {
  --game-canvas-size: min(92vw, 600px);
  --flip-game-ratio: 16 / 9;
  --game-radius: 20px;
  background: radial-gradient(circle at 50% 0%, #201047 0, #090513 34%, #030208 72%);
}

/* The game owns scrolling only while a run is in progress. */
body.flip-page.flip-playing {
  overflow: hidden;
  overscroll-behavior: none;
}

body.flip-page h2 {
  font-family: "Zen Dots", sans-serif;
  margin-top: 30px;
  letter-spacing: .1em;
  text-align: center;
  color: #f4deff;
  text-shadow: 0 0 8px #ff4fd8, 0 0 22px #704dff;
}

.flip-wrapper {
  width: var(--game-canvas-size) !important;
  height: var(--game-canvas-size) !important;
  max-width: 600px !important;
  /* Keep the complete fixed game world visible at every screen size. */
  aspect-ratio: var(--flip-game-ratio);
  overflow: hidden;
  background: #04020d;
  border: 1px solid rgba(237, 74, 255, .8);
  box-shadow: 0 0 0 1px rgba(77, 238, 255, .4), 0 0 18px rgba(255, 79, 216, .38), 0 24px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
  /* Preserve vertical page scrolling when a trackpad or touch screen starts on the game. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#game.flip-canvas-host {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--game-radius) !important;
  touch-action: pan-y;
}

#game.flip-canvas-host canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--game-radius) !important;
  /* Phaser anti-aliasing must not be overridden by pixel-art canvas rendering. */
  image-rendering: auto;
  touch-action: pan-y;
}

body.flip-page.flip-playing .flip-wrapper,
body.flip-page.flip-playing #game.flip-canvas-host,
body.flip-page.flip-playing #game.flip-canvas-host canvas {
  touch-action: none;
}

.flip-page .hud {
  background: transparent;
}

.flip-page .controls,
.flip-page .score-status {
  color: rgba(255, 255, 255, .78);
}

.flip-page .scoreline .item span[id] {
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.08rem;
  font-weight: 900;
}

.flip-page .music-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 14px 0 4px;
  padding: .55rem .8rem;
  border: 1px solid rgba(198, 91, 255, .62);
  border-radius: 999px;
  background: rgba(39, 12, 71, .52);
  color: #fff;
  font: 700 .82rem/1 system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.flip-page .music-toggle:hover,
.flip-page .music-toggle:focus-visible {
  border-color: #ff70dc;
  background: rgba(96, 29, 126, .7);
  outline: none;
  transform: translateY(-1px);
}

.flip-page .leaderboard.game-meta-card {
  padding: 14px;
}

.flip-page .leaderboard h3 {
  color: #fff;
  margin: 0 0 12px;
}

.flip-page .game-highscores {
  border-color: rgba(198, 91, 255, .36);
  border-radius: 14px;
  background: rgba(20, 7, 38, .3);
}

@media (min-width: 980px) {
  body.flip-page {
    --game-canvas-size: 600px;
  }

  .flip-page .game-main {
    grid-template-columns: 600px minmax(280px, 360px);
  }
}