/* Glass finish: one cool light source, soft edge highlights, and restrained depth. */
:root {
  --glass-edge: rgba(255, 255, 255, 0.88);
  --glass-hairline: rgba(82, 111, 145, 0.14);
  --glass-shadow: 0 22px 54px rgba(24, 42, 60, 0.09), 0 3px 10px rgba(24, 42, 60, 0.045);
  --glass-shadow-hover: 0 26px 62px rgba(24, 42, 60, 0.13), 0 5px 14px rgba(24, 42, 60, 0.06);
}

/* The navigation reads like a thin glass visor over the scene. */
html body .navbar {
  border-bottom-color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(242, 247, 250, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 26px rgba(24, 42, 60, 0.055);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  backdrop-filter: blur(20px) saturate(1.18);
}

html body .navbar.is-scrolled {
  border-bottom-color: rgba(82, 111, 145, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 247, 250, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 12px 34px rgba(24, 42, 60, 0.075);
}

/* On the hero, translucent controls keep the image present while protecting text. */
html body .hero .hero-actions,
html body .hero .hero-data {
  border-color: rgba(255, 255, 255, 0.38);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(7, 12, 18, 0.2), rgba(7, 12, 18, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px rgba(4, 11, 20, 0.1);
  -webkit-backdrop-filter: blur(5px) saturate(1.08);
  backdrop-filter: blur(5px) saturate(1.08);
}

html body .hero .hero-data {
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  background: linear-gradient(120deg, rgba(7, 12, 18, 0.16), rgba(7, 12, 18, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(4, 11, 20, 0.08);
}

html body .hero .hero-actions .primary-button,
html body .hero .hero-actions .secondary-link {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.82);
}

html body .hero .hero-actions .primary-button i,
html body .hero .hero-actions .secondary-link span {
  color: rgba(255, 255, 255, 0.96);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}

html body .hero .hero-data-item span,
html body .hero .hero-data-item strong {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.82);
}

/* A stronger glass shell, quieter inset navigation, and lighter member panes. */
html body .roster .roster-board {
  border-color: rgba(255, 255, 255, 0.94);
  outline: 1px solid rgba(82, 111, 145, 0.08);
  outline-offset: -1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(228, 238, 245, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 0 0 1px rgba(120, 151, 176, 0.08), var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.14);
  backdrop-filter: blur(22px) saturate(1.14);
}

html body .roster .roster-main {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(237, 244, 248, 0.28));
}

html body .roster .squad-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(235, 242, 247, 0.46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
}

html body .roster .squad-profile {
  border-right-color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(232, 240, 246, 0.62) 54%, rgba(216, 230, 239, 0.54));
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}

html body .roster .member-register {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(243, 248, 251, 0.36));
}

html body .roster .member-row {
  border-color: rgba(255, 255, 255, 0.94);
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.68), rgba(241, 247, 251, 0.42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 5px 16px rgba(24, 42, 60, 0.045);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
}

@media (hover: hover) and (min-width: 721px) {
  html body .roster .member-row:hover {
    border-color: rgba(49, 95, 174, 0.24);
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.86), rgba(231, 240, 249, 0.64));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 10px 24px rgba(29, 60, 97, 0.1);
    transform: translateY(-1px);
  }
}

/* Carry the same glass material into the match and member directory surfaces. */
html body .upcoming-match-board,
html body .directory-panel {
  border-color: var(--glass-edge);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(237, 244, 248, 0.56));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 0 0 1px rgba(120, 151, 176, 0.07), var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  backdrop-filter: blur(20px) saturate(1.12);
}

html body .directory-grid,
html body .directory-grid.is-filtered {
  background: rgba(247, 248, 247, 0.72);
}

html body .directory-grid .directory-member,
html body .directory-grid.is-filtered .directory-member {
  border-color: rgba(16, 23, 34, 0.12);
  background: rgba(248, 250, 250, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 5px 16px rgba(25, 39, 50, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (hover: hover) {
  html body .directory-grid .directory-member:hover,
  html body .directory-grid.is-filtered .directory-member:hover {
    border-color: rgba(16, 23, 34, 0.16);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 8px 20px rgba(25, 39, 50, 0.08);
  }
}

/* Recruitment cards use the map image as a soft refracted layer, with solid copy contrast. */
html body .recruit-v2-roles {
  border-color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(232, 241, 247, 0.52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 24px 58px rgba(30, 52, 72, 0.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.14);
  backdrop-filter: blur(22px) saturate(1.14);
}

html body .recruit-v2-role-name,
html body .recruit-v2-standard,
html body .recruit-v2-role ul {
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.48), rgba(242, 248, 251, 0.28));
}

html body .recruit-v2-role,
html body .recruit-v2-role:last-child {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.36), rgba(246, 250, 252, 0.2));
}

html body .recruit-v2-process {
  border-color: rgba(17, 25, 35, 0.14);
  background: rgba(247, 248, 247, 0.72);
  box-shadow: 0 10px 24px rgba(25, 39, 50, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html body .recruit-v2 .light-button {
  border-color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(226, 237, 246, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 12px 28px rgba(30, 52, 72, 0.1);
}

@media (max-width: 720px) {
  html body .hero .hero-actions {
    border-radius: 9px;
  }

  html body .hero .hero-data {
    border-radius: 9px;
  }

  html body .roster .member-row,
  html body .roster .member-row:nth-child(3n),
  html body .roster .member-row:nth-child(4n) {
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.78), rgba(240, 246, 250, 0.54));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 7px 18px rgba(24, 42, 60, 0.075);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    backdrop-filter: blur(14px) saturate(1.12);
  }

  html body .recruit-v2-roles {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html body .recruit-v2-role,
  html body .recruit-v2-role:last-child {
    border-color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(235, 243, 248, 0.56));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 12px 28px rgba(30, 52, 72, 0.09);
    -webkit-backdrop-filter: blur(16px) saturate(1.14);
    backdrop-filter: blur(16px) saturate(1.14);
  }

  html body .recruit-v2-role-name,
  html body .recruit-v2-standard,
  html body .recruit-v2-role ul {
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.56), rgba(241, 247, 251, 0.36));
  }

  html body .recruit-v2-process {
    background: rgba(247, 248, 247, 0.72);
  }
}

@media (min-width: 721px) {
  html body .recruit-v2-media img {
    filter: grayscale(0.3) saturate(0.48) contrast(0.96) brightness(1.1);
    opacity: 0.38;
  }

  html body .recruit-v2-media::after {
    background:
      linear-gradient(90deg, rgba(238, 241, 243, 0.91), rgba(238, 241, 243, 0.66) 58%, rgba(238, 241, 243, 0.49)),
      linear-gradient(to bottom, rgba(238, 241, 243, 0.12), rgba(238, 241, 243, 0.32) 46%, #edf1f3 100%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  html body .navbar,
  html body .navbar.is-scrolled,
  html body .hero .hero-actions,
  html body .hero .hero-data,
  html body .roster .roster-board,
  html body .upcoming-match-board,
  html body .directory-panel,
  html body .recruit-v2-roles,
  html body .recruit-v2-role,
  html body .recruit-v2-role:last-child,
  html body .recruit-v2-process {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}