/* Stage 3 graphics upgrade: richer shell, lighting, and presentation polish. */
html, body {
  background:
    radial-gradient(circle at 15% 12%, rgba(0,255,157,0.18), transparent 38%),
    radial-gradient(circle at 85% 8%, rgba(0,183,255,0.18), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(110,65,255,0.18), transparent 42%),
    linear-gradient(180deg, #08111c 0%, #03070d 55%, #020407 100%);
}

.arcade-shell {
  position: relative;
  border-color: rgba(90, 255, 198, 0.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    radial-gradient(circle at 20% 0%, rgba(0,255,157,0.12), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(0,180,255,0.14), transparent 55%),
    rgba(2, 5, 10, 0.92);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.88),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(255,255,255,0.02);
}

.arcade-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 18%),
    linear-gradient(315deg, rgba(0,255,157,0.06), transparent 22%);
  mix-blend-mode: screen;
}

.arcade-title {
  text-shadow: 0 0 18px rgba(0,255,157,0.22), 0 0 38px rgba(0,183,255,0.12);
}

.arcade-subtitle {
  opacity: 0.82;
}

.pill,
.leaderboard,
.caught-products,
.progression,
.touch-toggle label,
.arcade-overlay .panel,
.shop-panel,
.howto-card,
.reward-card {
  backdrop-filter: blur(10px);
}

.arcade-canvas-wrap {
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 18px 36px rgba(255,255,255,0.02),
    0 12px 30px rgba(0,0,0,0.6);
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,0.08), transparent 35%),
    linear-gradient(180deg, #0b1118 0%, #020408 100%);
}

.arcade-stage-glow,
.arcade-lights-overlay,
.arcade-frame-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.arcade-stage-glow {
  z-index: 0;
  background:
    radial-gradient(60% 45% at 50% 15%, rgba(0,255,157,0.13), transparent 62%),
    radial-gradient(55% 34% at 25% 14%, rgba(0,183,255,0.11), transparent 68%),
    radial-gradient(45% 34% at 75% 12%, rgba(130,100,255,0.10), transparent 68%);
  animation: arcadeAuroraFloat 11s ease-in-out infinite alternate;
}

.arcade-lights-overlay {
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: screen;
  background:
    linear-gradient(116deg, transparent 0 22%, rgba(255,255,255,0.08) 27%, transparent 32%),
    linear-gradient(244deg, transparent 0 18%, rgba(0,255,157,0.10) 23%, transparent 28%),
    linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,0.03) 50%, transparent 54%);
  animation: stageLightSweep 9s linear infinite;
}

.arcade-frame-overlay {
  z-index: 6;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 24px 34px rgba(255,255,255,0.05),
    inset 0 -20px 28px rgba(0,0,0,0.36);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.06), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 18%, transparent 82%, rgba(0,0,0,0.18));
}

.product-flash {
  z-index: 10;
}
.product-flash img {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(2,8,12,0.7);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 20px rgba(0,255,157,0.28),
    0 10px 30px rgba(0,0,0,0.35);
}
.product-flash-name {
  box-shadow: 0 6px 20px rgba(0,0,0,0.32);
}

.in-game-hud .mini-pill,
.wave-readout,
.boss-state-indicator,
.event-banner {
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.btn,
.shop-item-btn,
.mode-btn,
.ctrl {
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.btn:hover,
.shop-item-btn:not(:disabled):hover,
.mode-btn:hover,
.ctrl:hover {
  box-shadow: 0 0 20px rgba(0,255,157,0.18);
}

.mode-btn.active,
.btn-primary {
  box-shadow: 0 0 18px rgba(0,255,157,0.22), inset 0 1px 0 rgba(255,255,255,0.2);
}

body.mode-runway .arcade-stage-glow {
  background:
    radial-gradient(60% 48% at 50% 10%, rgba(255,210,160,0.10), transparent 62%),
    radial-gradient(40% 30% at 22% 18%, rgba(255,130,190,0.12), transparent 65%),
    radial-gradient(40% 30% at 78% 18%, rgba(110,220,255,0.12), transparent 65%);
}

body.mode-runway .arcade-lights-overlay {
  opacity: 0.62;
}

body.reduced-motion .arcade-stage-glow,
body.reduced-motion .arcade-lights-overlay {
  animation: none !important;
}

@keyframes arcadeAuroraFloat {
  0% { transform: translate3d(-1%, 0, 0) scale(1); }
  50% { transform: translate3d(1%, -1%, 0) scale(1.02); }
  100% { transform: translate3d(0, 1%, 0) scale(1.04); }
}

@keyframes stageLightSweep {
  0% { transform: translateX(-6%); }
  50% { transform: translateX(6%); }
  100% { transform: translateX(-6%); }
}