/* Shared frosted glass. Every glass surface (round helper buttons, the tray, stage labels, small panels)
   carries class="glass" and keeps only its own shape and size in its component file.
   Edge, fill, shadow and the background blur come from here; the values are the --glass-* tokens. */
.glass {
  border: 1px solid var(--glass-edge);
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .glass { border-color: ButtonText; }
}