/* Subtle glass: translucent surfaces that let the night sky and the page behind them show through.
   Switched on by the "glass" class (body on the real site). Without backdrop-filter support, nothing changes. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    --glass-line: rgba(236, 230, 214, 0.11);
    --glass-top: rgba(236, 230, 214, 0.07);
  }

  /* header: the page slides under a frosted bar.
     The blur sits on a pseudo-element so the phone tab bar (a fixed child of the header) is not trapped by it. */
  .glass .top { background: transparent; border-bottom-color: var(--glass-line); }
  .glass .top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 17, 28, 0.58); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); }

  /* the verse that opens the home page */
  .glass .hero .verse { padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem); background: rgba(236, 230, 214, 0.04); border: 1px solid var(--glass-line); border-radius: 20px; box-shadow: inset 0 1px 0 var(--glass-top); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

  /* floating surfaces */
  .glass .player { background: rgba(24, 35, 58, 0.62); border-color: var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-top); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
  .glass .results { background: rgba(24, 35, 58, 0.78); border-color: var(--glass-line); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
  .glass .search input { background: rgba(18, 27, 43, 0.6); border-color: var(--glass-line); }
  .glass.ap .dock { background: rgba(24, 35, 58, 0.72); border-top-color: var(--glass-line); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
  .glass .rd .rbar { background: rgba(24, 35, 58, 0.68); border-color: var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

  @media (max-width: 600px) {
    .glass .top nav { background: rgba(18, 27, 43, 0.72); border-top-color: var(--glass-line); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); }
  }
}