/* mobile-perf.css  -  put it AFTER css/style.css:
 *   <link rel="stylesheet" href="css/style.css">
 *   <link rel="stylesheet" href="css/mobile-perf.css">
 * Only affects phones/tablets/touch screens (and weak devices when js/mobile-lite.js adds "perf-lite").
 * Desktop keeps the full look.
 */
@media (max-width: 1024px), (pointer: coarse) {

  /* 1) Glass blur: the main source of lag, and of text/buttons painting blank while scrolling.
        Panels get a more opaque background instead so they stay readable. */
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  :root {
    --bg-card: rgba(13, 17, 38, 0.9);
    --bg-card-hover: rgba(22, 28, 60, 0.94);
  }

  /* 2) The hero title is gradient text (background-clip:text) inside a card that is blurred AND floating
        forever. That combination is what makes the title vanish. Solid colour on touch devices. */
  .welcome-title,
  .cluster-reveal-banner h2,
  .title-correct,
  .title-incorrect,
  .stat-number,
  .level-up-banner {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow: none !important;
  }
  .welcome-title            { color: #e9d5ff !important; -webkit-text-fill-color: #e9d5ff !important; }
  .cluster-reveal-banner h2 { color: #fef08a !important; -webkit-text-fill-color: #fef08a !important; }
  .title-correct            { color: #34d399 !important; -webkit-text-fill-color: #34d399 !important; }
  .title-incorrect          { color: #f87171 !important; -webkit-text-fill-color: #f87171 !important; }
  .stat-number              { color: #7dd3fc !important; -webkit-text-fill-color: #7dd3fc !important; }
  .level-up-banner          { color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24 !important; }

  /* 3) Decorative animations that run forever (each one keeps the GPU busy while you scroll) */
  .hero-glass-card,
  .logo-orb,
  .status-dot,
  .badge-sparkle,
  .btn-sparkle,
  .card-star-orb,
  .hud-check-btn,
  .animate-subtle-pulse,
  .focus-ring-wrapper.running .focus-ring-stroke {
    animation: none !important;
  }

  /* 4) Smooth-scroll animations and heavy repaints while the finger is moving */
  html { scroll-behavior: auto !important; }
  body { background-attachment: scroll !important; }
}

/* Same treatment for weak desktops when js/mobile-lite.js turns on "perf-lite" */
html.perf-lite *,
html.perf-lite *::before,
html.perf-lite *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.perf-lite .hero-glass-card,
html.perf-lite .logo-orb,
html.perf-lite .status-dot,
html.perf-lite .badge-sparkle,
html.perf-lite .btn-sparkle,
html.perf-lite .card-star-orb {
  animation: none !important;
}
html.perf-lite .welcome-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #e9d5ff !important;
  -webkit-text-fill-color: #e9d5ff !important;
  text-shadow: none !important;
}