/* perf.css — loaded last, on purpose.
 *
 * backdrop-filter is the single most expensive thing on this page. Measured
 * here with the ocean paused: with every panel blurring its backdrop, scrolling
 * ran at 24fps; with none, 60fps. The blur has to be recomputed for each
 * promoted layer on every frame it moves, and a long page scrolls a dozen of
 * them past the viewport at once.
 *
 * Rather than hunt ~38 declarations across six stylesheets - and re-introduce
 * one every time a component is added - this layer switches them off in one
 * place. The panels keep their translucent background, so the water still shows
 * through and they still read as glass; what they lose is the refraction, which
 * almost nobody would name and everybody feels as stutter.
 *
 * The header is the deliberate exception: there is exactly one of it, it never
 * scrolls, and it sits over the busiest part of the scene where legibility
 * matters most. One fixed blurred element is affordable; a dozen moving ones
 * are not.
 */
*:not(header):not(header *) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Panels lose refraction, so they need a touch more opacity of their own to
   stay legible over the moving water. */
.card, .stat, .step, .plat-card, .panel, .rp-grid > div, .mc-cell {
  background-color: rgba(7, 34, 52, 0.72);
}
.light-theme .card, .light-theme .stat, .light-theme .step,
.light-theme .plat-card, .light-theme .panel,
.light-theme .rp-grid > div, .light-theme .mc-cell {
  background-color: rgba(255, 255, 255, 0.86);
}

/* Phones get no blur at all, including the header: the panels are full-bleed
   there so there is almost nothing behind them to refract, and phone GPUs are
   exactly where this stutters worst. */
@media (max-width: 720px) {
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}