/* Lightweight full-game card backdrop — state via #game-bg[data-state] */

#game-bg {
  --bg-base-1: #000000;
  --bg-base-2: #020304;
  --bg-glow-a: rgba(99, 197, 218, 0.048);
  --bg-glow-b: rgba(152, 251, 152, 0.028);
  --bg-glow-c: rgba(255, 215, 0, 0.014);
  --bg-tier-accent-rgb: var(--ccm-current-tier-accent-rgb, 152, 251, 152);
  --bg-neon-pink-rgb: var(--ccm-neon-pink-rgb, 255, 45, 192);
  --bg-neon-cyan-rgb: var(--ccm-neon-cyan-rgb, 34, 224, 255);
  --bg-neon-lime-rgb: var(--ccm-neon-lime-rgb, 132, 255, 56);
  --bg-stipple-opacity: 0.092;
  --bg-orbit-opacity: 0.048;
  --bg-cards-opacity: 0.042;
  --bg-accent-opacity: 0.052;
  --bg-rotate-speed: 320s;

  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(165deg, var(--bg-base-1) 0%, var(--bg-base-2) 55%, #000000 100%);
  box-shadow: inset 0 0 min(44vw, 320px) min(32vw, 240px) rgba(0, 0, 0, 0.72);
  transition:
    background 1.1s ease,
    box-shadow 1.1s ease;
}

.game-bg__pattern,
.game-bg__orbit,
.game-bg__cards,
.game-bg__glow,
.game-bg__accents {
  position: absolute;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.game-bg__pattern,
.game-bg__orbit,
.game-bg__cards {
  inset: -32%;
  width: 164%;
  height: 164%;
  left: -32%;
  top: -32%;
}

/*
 * Fine micro-stipple — same technique as in-game .card-back
 * (radial-gradient speckle at ~0.6rem), NOT a domino dot grid.
 */
.game-bg__pattern {
  opacity: var(--bg-stipple-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Ccircle cx='2.2' cy='2.2' r='1.8' fill='rgba(100,220,200,0.55)'/%3E%3C/svg%3E");
  background-size: 9px 9px;
  animation: gameBgStippleMotion var(--bg-rotate-speed) linear infinite;
  transition: opacity 1s ease;
}

/*
 * Desktop-only orbital ring layer — larger sweep at viewport edges.
 * Hidden on phones where the overscan barely registers.
 */
.game-bg__orbit {
  display: none;
  opacity: var(--bg-orbit-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Ccircle cx='210' cy='210' r='148' fill='none' stroke='rgba(99,197,218,0.24)' stroke-width='1.1'/%3E%3Ccircle cx='210' cy='210' r='188' fill='none' stroke='rgba(152,251,152,0.16)' stroke-width='0.85'/%3E%3Cellipse cx='210' cy='210' rx='172' ry='118' fill='none' stroke='rgba(255,215,0,0.13)' stroke-width='0.7' transform='rotate(18 210 210)'/%3E%3Cellipse cx='210' cy='210' rx='172' ry='118' fill='none' stroke='rgba(99,197,218,0.11)' stroke-width='0.65' transform='rotate(-42 210 210)'/%3E%3Cpath d='M210 24 A186 186 0 0 1 396 210' fill='none' stroke='rgba(140,255,230,0.18)' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M210 396 A186 186 0 0 1 24 210' fill='none' stroke='rgba(255,215,0,0.12)' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 420px 420px;
  background-position: center;
  animation: gameBgOrbitMotion calc(var(--bg-rotate-speed) * 1.85) linear infinite;
  transition: opacity 1s ease;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .game-bg__orbit {
    display: block;
    inset: -42%;
    width: 184%;
    height: 184%;
    left: -42%;
    top: -42%;
  }
}

/*
 * Sparse ghost card backs — teal glass radial fill like real backs,
 * no internal dot grid (that was reading as dominos).
 */
.game-bg__cards {
  opacity: var(--bg-cards-opacity);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='200' viewBox='0 0 148 200'%3E%3Cdefs%3E%3CradialGradient id='cb' cx='30%25' cy='28%25' r='72%25'%3E%3Cstop offset='0%25' stop-color='rgba(140,255,230,0.55)'/%3E%3Cstop offset='45%25' stop-color='rgba(100,220,200,0.28)'/%3E%3Cstop offset='100%25' stop-color='rgba(50,100,90,0.12)'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='14' y='18' width='120' height='164' rx='11' fill='url(%23cb)' stroke='rgba(100,200,180,0.22)' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='200' viewBox='0 0 148 200'%3E%3Cdefs%3E%3CradialGradient id='cb' cx='30%25' cy='28%25' r='72%25'%3E%3Cstop offset='0%25' stop-color='rgba(140,255,230,0.55)'/%3E%3Cstop offset='45%25' stop-color='rgba(100,220,200,0.28)'/%3E%3Cstop offset='100%25' stop-color='rgba(50,100,90,0.12)'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='14' y='18' width='120' height='164' rx='11' fill='url(%23cb)' stroke='rgba(100,200,180,0.22)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 148px 200px, 148px 200px;
  background-position: 0 0, 74px 100px;
  animation: gameBgCardsMotion calc(var(--bg-rotate-speed) * 1.35) linear infinite reverse;
  transition: opacity 1s ease;
}

.game-bg__glow,
.game-bg__accents {
  inset: 0;
}

.game-bg__glow {
  opacity: 0.5;
  background:
    radial-gradient(ellipse 85% 65% at 20% 18%, var(--bg-glow-a) 0%, transparent 52%),
    radial-gradient(ellipse 75% 60% at 84% 82%, var(--bg-glow-b) 0%, transparent 50%),
    radial-gradient(ellipse 58% 42% at 50% 50%, rgba(var(--bg-tier-accent-rgb), 0.026) 0%, transparent 58%),
    radial-gradient(ellipse 44% 34% at 52% 92%, var(--bg-glow-c) 0%, transparent 62%);
  transition: opacity 1.1s ease;
}

.game-bg__accents {
  opacity: var(--bg-accent-opacity);
  background-image:
    radial-gradient(circle at 14% 70%, rgba(var(--bg-neon-pink-rgb), 0.12) 0%, transparent 7%),
    radial-gradient(circle at 86% 22%, rgba(var(--bg-neon-cyan-rgb), 0.1) 0%, transparent 6%),
    radial-gradient(circle at 74% 84%, rgba(var(--bg-neon-lime-rgb), 0.08) 0%, transparent 7%),
    radial-gradient(circle at 26% 36%, rgba(var(--bg-tier-accent-rgb), 0.095) 0%, transparent 6%),
    linear-gradient(118deg, transparent 0%, transparent 46%, rgba(var(--bg-neon-cyan-rgb), 0.035) 49%, transparent 53%, transparent 100%),
    linear-gradient(62deg, transparent 0%, transparent 48%, rgba(var(--bg-neon-pink-rgb), 0.03) 51%, transparent 55%, transparent 100%);
  animation: gameBgAccentShift 26s ease-in-out infinite alternate;
  transition: opacity 1s ease;
}

.game-bg__accents::before,
.game-bg__accents::after {
  content: "";
  position: absolute;
  inset: 8% 5%;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(ellipse 18% 46% at 7% 82%, rgba(var(--bg-neon-pink-rgb), 0.075), transparent 70%),
    radial-gradient(ellipse 16% 42% at 91% 18%, rgba(var(--bg-neon-cyan-rgb), 0.07), transparent 68%),
    radial-gradient(ellipse 22% 34% at 82% 86%, rgba(var(--bg-tier-accent-rgb), 0.062), transparent 70%);
  filter: blur(0.2px);
}

.game-bg__accents::after {
  inset: 18% 12%;
  opacity: 0.38;
  background:
    linear-gradient(130deg, transparent 0%, transparent 36%, rgba(var(--bg-neon-cyan-rgb), 0.055) 39%, transparent 43%, transparent 100%),
    linear-gradient(50deg, transparent 0%, transparent 44%, rgba(var(--bg-neon-pink-rgb), 0.048) 47%, transparent 52%, transparent 100%);
}

/* Drift the repeating tiles via background-position only — rotating a tiled
   pattern aliases/moirés every frame, which is what read as background flicker. */
@keyframes gameBgStippleMotion {
  from { background-position: 0 0; }
  to { background-position: 180px 180px; }
}

@keyframes gameBgOrbitMotion {
  from { background-position: 0 0; }
  to { background-position: 420px 420px; }
}

@keyframes gameBgCardsMotion {
  from { background-position: 0 0, 74px 100px; }
  to { background-position: 148px 200px, 222px 300px; }
}

@keyframes gameBgAccentShift {
  0% { opacity: calc(var(--bg-accent-opacity) * 0.85); }
  100% { opacity: var(--bg-accent-opacity); }
}

/* --- States --- */

#game-bg[data-state="welcome"] {
  --bg-glow-a: rgba(99, 197, 218, 0.052);
  --bg-glow-b: rgba(152, 251, 152, 0.032);
  --bg-stipple-opacity: 0.088;
  --bg-cards-opacity: 0.046;
}

#game-bg[data-state="play"] {
  --bg-glow-a: rgba(99, 197, 218, 0.032);
  --bg-glow-b: rgba(152, 251, 152, 0.02);
  --bg-stipple-opacity: 0.078;
  --bg-orbit-opacity: 0.042;
  --bg-cards-opacity: 0.036;
  --bg-accent-opacity: 0.044;
}

#game-bg[data-state="victory"] {
  --bg-base-1: #010302;
  --bg-base-2: #040806;
  --bg-glow-a: rgba(152, 251, 152, 0.045);
  --bg-glow-b: rgba(255, 215, 0, 0.028);
  --bg-glow-c: rgba(40, 167, 69, 0.02);
  --bg-stipple-opacity: 0.05;
  --bg-cards-opacity: 0.028;
}

#game-bg[data-state="victory"] .game-bg__glow {
  animation: gameBgVictoryPulse 2.8s ease-in-out infinite;
}

@keyframes gameBgVictoryPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.72; filter: brightness(1.06); }
}

#game-bg[data-state="tier"] {
  --bg-base-1: #010206;
  --bg-base-2: #04060a;
  --bg-glow-a: rgba(var(--bg-neon-pink-rgb), 0.052);
  --bg-glow-b: rgba(var(--bg-neon-cyan-rgb), 0.04);
  --bg-glow-c: rgba(var(--bg-tier-accent-rgb), 0.028);
  --bg-stipple-opacity: 0.056;
  --bg-orbit-opacity: 0.06;
  --bg-accent-opacity: 0.086;
}

#game-bg[data-state="tier"] .game-bg__glow {
  animation: gameBgTierSweep 4s ease-in-out infinite;
}

@keyframes gameBgTierSweep {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1.5%); }
}

#game-bg[data-state="zenith"] {
  --bg-base-1: #020106;
  --bg-base-2: #08040e;
  --bg-glow-a: rgba(var(--bg-neon-pink-rgb), 0.052);
  --bg-glow-b: rgba(var(--bg-neon-cyan-rgb), 0.03);
  --bg-glow-c: rgba(190, 120, 255, 0.026);
  --bg-stipple-opacity: 0.048;
  --bg-orbit-opacity: 0.058;
  --bg-accent-opacity: 0.07;
}

#game-bg[data-state="gameover"] {
  --bg-base-1: #030101;
  --bg-base-2: #080404;
  --bg-glow-a: rgba(220, 53, 69, 0.028);
  --bg-glow-b: rgba(40, 20, 24, 0.05);
  --bg-stipple-opacity: 0.04;
  --bg-cards-opacity: 0.018;
}

#game-bg[data-state="gameover"] .game-bg__cards {
  filter: saturate(0.35) brightness(0.65);
}

#game-bg[data-state="pause"] {
  --bg-glow-a: rgba(99, 197, 218, 0.012);
  --bg-glow-b: rgba(152, 251, 152, 0.008);
  --bg-stipple-opacity: 0.035;
  --bg-orbit-opacity: 0.014;
  --bg-cards-opacity: 0.016;
  --bg-accent-opacity: 0.025;
}

#game-bg[data-state="pause"] .game-bg__glow,
#game-bg[data-state="pause"] .game-bg__accents,
#game-bg[data-state="pause"] .game-bg__orbit {
  opacity: 0.22;
  filter: brightness(0.38);
}

/*
 * Freeze background motion while a blur scrim (overlay fog) is up. A static
 * backdrop stops the backdrop-filter from re-rasterizing moving layers every
 * frame, which is what causes the flicker behind the welcome/other modals.
 */
body.ccm-fog-active .game-bg__pattern,
body.ccm-fog-active .game-bg__orbit,
body.ccm-fog-active .game-bg__cards,
body.ccm-fog-active .game-bg__accents,
body.ccm-fog-active .game-bg__glow,
body.ccm-reveal-active .game-bg__pattern,
body.ccm-reveal-active .game-bg__orbit,
body.ccm-reveal-active .game-bg__cards,
body.ccm-reveal-active .game-bg__accents,
body.ccm-reveal-active .game-bg__glow {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .game-bg__pattern,
  .game-bg__orbit,
  .game-bg__cards,
  .game-bg__accents,
  #game-bg[data-state="victory"] .game-bg__glow,
  #game-bg[data-state="tier"] .game-bg__glow {
    animation: none;
  }
}