/* ═══════════════════════════════════════════════════════════════
   🎹 PIANO MAGIC UI THEME — Glassmorphism & Neon Pastel Overrides
   Strictly scoped to game modals and game UI screens!
   ═══════════════════════════════════════════════════════════════ */

:root {
  --magic-glass-bg: rgba(16, 24, 52, 0.82);
  --magic-glass-border: rgba(147, 197, 253, 0.3);
  --magic-primary-grad: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
  --magic-primary-glow: 0 8px 25px rgba(99, 102, 241, 0.55);
}

/* ── 1. TOP GAME STATS CARDS & GAME MODALS ── */
/* Scope exclusively to game elements: top stat cards with specific inline bg */
body[class*="game"] [style*="background: rgba(10,17,36"],
body[class*="game"] [style*="background:rgba(10,17,36"],
body[class*="game"] [style*="background: rgba(5,8,16"],
body[class*="game"] [style*="background:rgba(5,8,16"] {
  background: var(--magic-glass-bg) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid var(--magic-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* Modal container card inside game */
body[class*="game"] div[style*="background: rgba(5,8,16,0.94)"],
body[class*="game"] div[style*="background:rgba(5,8,16,0.94)"],
body[class*="game"] div[style*="background: rgba(5,8,16,0.97)"] {
  background: rgba(15, 23, 48, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  border-radius: 22px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
}