/* Glass recipes and bento tiles. Blur is progressive enhancement: without backdrop-filter
   every glass surface falls back to an opaque --surface. Tiles that carry informational
   text use --glass-solid (alpha >= .8) so contrast never depends on what is behind them. */

.glass, .tile, .setup-card, .stat-card, .highlight, .panel-section, .live-banner, .empty-state,
.court-card, .round-row, .standings-row, .player-filter, .timer-dock, .roster-card {
  background: linear-gradient(180deg, var(--glass-strong), var(--glass));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
/* Blur only on the few large tiles (perf on tablets); list rows/cards rely on the solid base.
   R1-26: .panel-section dropped (its base is already --glass-solid) to keep the Round screen
   within the ~6 blurred-surface budget. */
.glass, .tile, .setup-card, .stat-card, .highlight, .live-banner, .empty-state, .timer-dock {
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

/* Text-dense tiles: a mostly-opaque base, blur is only a whisper on top. */
.setup-card, .panel-section, .court-card, .round-row, .standings-row, .live-banner, .empty-state,
.highlight, .timer-dock, .player-filter, .stat-card, .roster-card {
  background: var(--glass-solid);
}

.tile { border-radius: var(--radius-3); padding: 20px 24px; }
.tile--lime {
  background: var(--tile-lime);
  color: var(--on-accent);
  border-color: transparent;
}
.tile--olive {
  background: var(--tile-olive);
  color: var(--tile-olive-ink);
  border-color: transparent;
}

/* Court-line texture: masked SVG so it takes the current line colour. */
.court-lines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--line-strong);
  -webkit-mask: url('../assets/court-lines.svg') no-repeat right -10% bottom -20% / 70% auto;
  mask: url('../assets/court-lines.svg') no-repeat right -10% bottom -20% / 70% auto;
  opacity: 0.35;
  pointer-events: none;
  transform: rotate(-6deg);
}

/* Ghost numeral: giant, faint, behind content. */
.ghost-num {
  position: absolute;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.06em;
  line-height: 0.8;
  color: var(--text);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .tile, .setup-card, .stat-card, .highlight, .panel-section, .live-banner, .empty-state,
  .court-card, .round-row, .standings-row, .player-filter, .timer-dock, .roster-card { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass, .tile, .setup-card, .stat-card, .highlight, .panel-section, .live-banner, .empty-state,
  .court-card, .round-row, .standings-row, .player-filter, .timer-dock, .roster-card {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--line-strong);
  }
}