/* =========================================================
   WE Sports - Glass layer (optional, loaded after wesports.css / landing.css)
   Rollback: remove the <link> to this file (or undo pending changes).
   ========================================================= */

:root {
  --glass: rgba(34, 24, 60, .52);
  --glass-2: rgba(255, 255, 255, .06);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-hi: rgba(255, 255, 255, .07);
  --glass-blur: 16px;
  --surface: var(--glass);
  --surface-2: var(--glass-2);
  --line: rgba(255, 255, 255, .09);
  --shadow: 0 1px 0 var(--glass-hi) inset, 0 18px 40px -22px rgba(5, 0, 20, .85);
}
:root[data-theme="light"] {
  --glass: rgba(255, 255, 255, .58);
  --glass-2: rgba(91, 44, 145, .06);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-hi: rgba(255, 255, 255, .9);
  --line: rgba(91, 44, 145, .12);
  --shadow: 0 1px 0 var(--glass-hi) inset, 0 16px 36px -20px rgba(43, 17, 87, .28);
}

/* ---------- Ambient backdrop the glass blurs ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vmax 42vmax at 92% 8%, rgba(122, 69, 194, .38), transparent 65%),
    radial-gradient(36vmax 36vmax at 4% 46%, rgba(91, 44, 145, .32), transparent 65%),
    radial-gradient(30vmax 30vmax at 78% 92%, rgba(255, 210, 0, .10), transparent 65%),
    var(--bg);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(42vmax 42vmax at 92% 8%, rgba(122, 69, 194, .22), transparent 65%),
    radial-gradient(36vmax 36vmax at 4% 46%, rgba(91, 44, 145, .14), transparent 65%),
    radial-gradient(30vmax 30vmax at 78% 92%, rgba(255, 210, 0, .18), transparent 65%),
    var(--bg);
}

/* ---------- Glass surfaces ---------- */
.ws-side, .ws-panel, .ws-pcard, .ws-tile, .ws-fxgroup, .ws-tl__card, .ws-career__body,
.ws-teamtile, .ws-pcard2, .ws-fact, .ws-authcard, .ws-state, .ws-qcard, .ws-trivia,
.ws-gpcard, .ws-gphero__facts span, .ws-comp, .ws-progress__box, .ws-pager a,
.ws-shead__end .ws-iconbtn, .ws-modal .modal-content {
  background-image: linear-gradient(160deg, var(--glass-hi), transparent 42%);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
}
@media (min-width: 900px) {
  .ws-authx__in {
    background-image: linear-gradient(160deg, var(--glass-hi), transparent 42%);
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  }
}

/* Cards over the purple predict band keep their contrast */
.ws-predict .ws-pcard { --glass: rgba(24, 12, 48, .55); }
:root[data-theme="light"] .ws-predict .ws-pcard { --glass: rgba(255, 255, 255, .78); }

/* ---------- Chrome: header, ticker, tab bar, drawer ---------- */
.ws-header {
  background: color-mix(in srgb, var(--we-purple) 76%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ws-ticker {
  background: color-mix(in srgb, var(--chrome) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}
.ws-tabbar { background: color-mix(in srgb, var(--we-ink) 70%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
.ws-drawer__panel {
  background: radial-gradient(120% 40% at 100% 0%, rgba(122, 69, 194, .35), transparent 60%), color-mix(in srgb, var(--we-ink) 80%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-inline-end: 1px solid rgba(255, 255, 255, .08);
}
.ws-mcard { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

/* Light theme: keep the chrome dense enough for white text */
:root[data-theme="light"] .ws-header { background: color-mix(in srgb, var(--we-purple) 88%, transparent); }
:root[data-theme="light"] .ws-ticker { background: color-mix(in srgb, var(--chrome) 88%, transparent); }

/* ---------- Performance and accessibility ---------- */
@media (max-width: 767px) {
  :root { --glass-blur: 10px; }
  :root:not([data-theme="light"]) { --glass: rgba(34, 24, 60, .66); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #18112a; --glass-2: #211835; }
  :root[data-theme="light"] { --glass: #ffffff; --glass-2: #efebf6; }
  .ws-header { background-color: var(--we-purple); }
  .ws-ticker, .ws-tabbar, .ws-drawer__panel { background-color: var(--chrome); }
}