* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;
  --cc-bg-deep: #03142f;
  --cc-bg-blue: #073c7d;
  --cc-panel: rgba(5, 44, 91, 0.72);
  --cc-panel-strong: rgba(3, 27, 63, 0.92);
  --cc-border: rgba(40, 145, 231, 0.52);
  --cc-cyan: #09dff2;
  --cc-electric: #1478ff;
  --cc-text: #f7fbff;
  --cc-text-muted: #abc8e8;
  --cc-positive: #32e2a0;
  --cc-caution: #ffc23f;
  --cc-danger: #ff3c62;
  --cc-radius-sm: 14px;
  --cc-radius: 22px;
  --cc-radius-lg: 30px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--cc-bg-deep);
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--cc-bg-deep);
  color: var(--cc-text);
}

/* Only body clips sideways: the browser moves it to the page itself. On
   both html and body, body turns into its own scroll box, and Android
   Chrome then will not scroll the page with one finger. */
body {
  overflow-x: hidden;
  min-height: 100svh;
  background:
    radial-gradient(circle at 14% 2%, rgba(17, 117, 241, 0.42), transparent 27rem),
    radial-gradient(circle at 92% 34%, rgba(0, 179, 222, 0.18), transparent 25rem),
    linear-gradient(160deg, #061a3c 0%, #032452 48%, #031630 100%);
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.profile-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(132deg, transparent 0 54%, rgba(12, 118, 225, 0.08) 54% 72%, transparent 72%),
    repeating-linear-gradient(145deg, transparent 0 90px, rgba(255, 255, 255, 0.014) 92px, transparent 94px);
}

.profile-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(56, 148, 227, 0.36);
  background: rgba(2, 20, 48, 0.87);
  backdrop-filter: blur(20px);
}

.topbar-inner {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  width: min(100%, 1180px);
  min-height: 76px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  gap: 12px;
}

.brand-link {
  display: block;
  min-width: 0;
}

.brand-link img {
  display: block;
  width: min(100%, 250px);
  height: 44px;
  object-fit: contain;
  object-position: left center;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--cc-text);
  background: transparent;
  cursor: pointer;
}

.icon-button svg,
.primary-nav svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-dot {
  position: absolute;
  top: 7px;
  right: 6px;
  width: 9px;
  height: 9px;
  border: 2px solid #071a3c;
  border-radius: 50%;
  background: var(--cc-danger);
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(9, 223, 242, 0.72);
  border-radius: 50%;
  background: linear-gradient(145deg, #086bd8, #1649f8);
  box-shadow: 0 0 22px rgba(17, 121, 255, 0.34);
  font-size: 13px;
  font-weight: 800;
}

.profile-app {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  min-height: calc(100svh - 76px);
  margin: 0 auto;
  padding: 18px 14px calc(112px + env(safe-area-inset-bottom));
}

.panel {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: linear-gradient(145deg, rgba(7, 57, 116, 0.78), var(--cc-panel));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 18px 45px rgba(0, 13, 39, 0.2);
}

.loading-state,
.error-state {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 680px;
  min-height: 190px;
  margin: 12vh auto 0;
  padding: 28px;
}

.loading-state h1,
.error-state h1 {
  margin: 4px 0 8px;
  font-size: clamp(25px, 7vw, 38px);
}

.loading-state p,
.error-state p {
  margin: 0;
  color: var(--cc-text-muted);
  line-height: 1.5;
}

.loading-mark {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 4px solid rgba(43, 148, 240, 0.25);
  border-top-color: var(--cc-cyan);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.eyebrow {
  margin: 0;
  color: var(--cc-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.21em;
}

.profile-hero {
  position: relative;
  display: grid;
  gap: 20px;
  overflow: hidden;
  padding: 24px 20px;
}

.profile-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(10, 128, 241, 0.12);
}

.identity-block {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.identity-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 3px solid var(--cc-cyan);
  border-radius: 50%;
  background: linear-gradient(145deg, #168fe9, #163dd0);
  box-shadow: 0 0 24px rgba(9, 223, 242, 0.34);
  font-size: 30px;
  font-weight: 850;
}

.identity-avatar.square {
  border-radius: 24px;
}

.identity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.identity-copy {
  min-width: 0;
}

.identity-copy h1 {
  margin: 5px 0 7px;
  overflow-wrap: anywhere;
  font-size: clamp(27px, 8vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.identity-meta,
.identity-subtitle {
  margin: 4px 0 0;
  color: var(--cc-text-muted);
  font-size: 15px;
  line-height: 1.45;
}

.claim-pill,
.relationship-pill,
.sport-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(171, 200, 232, 0.32);
  border-radius: 999px;
  color: var(--cc-text-muted);
  background: rgba(2, 21, 51, 0.5);
  font-size: 12px;
  font-weight: 700;
}

.hero-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.metric-card {
  min-width: 0;
  padding: 15px 12px;
  border: 1px solid rgba(39, 143, 229, 0.46);
  border-radius: var(--cc-radius-sm);
  background: rgba(3, 34, 76, 0.58);
  text-align: center;
}

.metric-card strong {
  display: block;
  margin-bottom: 3px;
  font-size: 25px;
}

.metric-card span {
  color: var(--cc-text-muted);
  font-size: 13px;
}

.sport-selector,
.section-tabs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-panel-strong);
  scrollbar-width: thin;
}

.sport-selector button,
.section-tabs button {
  flex: 1 0 auto;
  min-width: 96px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--cc-text-muted);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.sport-selector button[aria-selected="true"],
.section-tabs button[aria-selected="true"] {
  border-color: var(--cc-cyan);
  color: #fff;
  background: linear-gradient(120deg, rgba(7, 177, 230, 0.76), rgba(20, 86, 255, 0.8));
  box-shadow: 0 0 17px rgba(9, 223, 242, 0.34), inset 0 1px rgba(255, 255, 255, 0.16);
}

.content-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.content-card {
  min-width: 0;
  padding: 20px;
}

.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 17px;
}

.card-heading h2,
.card-heading h3 {
  margin: 0;
  font-size: clamp(19px, 5.2vw, 27px);
}

.card-heading span {
  color: var(--cc-text-muted);
  font-size: 13px;
  text-align: right;
}

.rating-grid,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rating-card {
  padding: 18px 15px;
  border: 1px solid rgba(36, 143, 235, 0.58);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(4, 34, 77, 0.86), rgba(7, 61, 117, 0.65));
}

.rating-card .rating-value {
  display: block;
  margin: 7px 0 3px;
  color: var(--cc-text);
  font-size: 32px;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.rating-card p,
.rating-card small {
  margin: 0;
  color: var(--cc-text-muted);
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 145px;
  padding: 25px;
  border: 1px dashed rgba(93, 174, 238, 0.4);
  border-radius: 17px;
  color: var(--cc-text-muted);
  background: rgba(2, 27, 63, 0.34);
  text-align: center;
}

.empty-state strong {
  display: block;
  margin-bottom: 5px;
  color: var(--cc-text);
  font-size: 17px;
}

.list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid rgba(47, 137, 211, 0.26);
  border-radius: 15px;
  background: rgba(2, 29, 66, 0.42);
}

.list-row-main {
  min-width: 0;
  flex: 1;
}

.list-row strong,
.list-row span {
  overflow-wrap: anywhere;
}

.list-row-main > span,
.list-row > time {
  display: block;
  margin-top: 3px;
  color: var(--cc-text-muted);
  font-size: 12px;
}

.mini-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(9, 223, 242, 0.66);
  border-radius: 50%;
  background: linear-gradient(145deg, #197fd2, #354cd5);
  font-weight: 800;
}

.mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--cc-cyan);
  background: rgba(13, 122, 214, 0.22);
  font-weight: 900;
}

.search-field {
  position: relative;
  display: block;
  margin-bottom: 16px;
}

.search-field span {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--cc-text-muted);
}

.search-field input {
  width: 100%;
  min-height: 50px;
  padding: 12px 15px 12px 45px;
  border: 1px solid var(--cc-border);
  border-radius: 999px;
  color: var(--cc-text);
  background: rgba(3, 35, 77, 0.68);
}

.search-field input::placeholder {
  color: rgba(171, 200, 232, 0.7);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 10px 20px;
  border: 1px solid var(--cc-cyan);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(125deg, #08aeda, var(--cc-electric));
  box-shadow: 0 0 20px rgba(9, 223, 242, 0.25);
  font-weight: 800;
  cursor: pointer;
}

.primary-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  min-height: 82px;
  padding: 8px 6px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(46, 138, 220, 0.48);
  border-radius: 24px 24px 0 0;
  background: rgba(2, 21, 49, 0.95);
  backdrop-filter: blur(22px);
}

.primary-nav-item,
.primary-nav-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 58px;
  color: var(--cc-text-muted);
  text-decoration: none;
}

.primary-nav-item {
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
}

.primary-nav-item.is-active {
  color: var(--cc-cyan);
}

.primary-nav-action {
  position: relative;
  flex-direction: column;
  gap: 8px;
  font-size: 10px;
}

.primary-nav-action svg {
  width: 56px;
  height: 56px;
  margin-top: -30px;
  padding: 14px;
  border: 2px solid var(--cc-cyan);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #09b9dc, #1553ff);
  box-shadow: 0 0 22px rgba(9, 223, 242, 0.34);
}

.noscript-message {
  position: fixed;
  right: 12px;
  bottom: 96px;
  left: 12px;
  z-index: 40;
  padding: 15px;
  border-radius: 12px;
  background: var(--cc-danger);
  text-align: center;
}

.is-hidden {
  display: none !important;
}

@media (min-width: 480px) {
  .profile-app {
    padding-right: 20px;
    padding-left: 20px;
  }

  .profile-hero {
    padding: 28px;
  }

  .identity-avatar {
    width: 112px;
    height: 112px;
  }

  .hero-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rating-grid,
  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .topbar-inner {
    padding-right: 26px;
    padding-left: 26px;
  }

  .profile-app {
    padding: 28px 26px 120px;
  }

  .profile-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(310px, 1fr);
    align-items: center;
  }

  .hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid.two-column,
  .content-grid.player-overview {
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
    align-items: start;
  }

  .content-card {
    padding: 24px;
  }

  .primary-nav {
    right: 20px;
    bottom: 16px;
    left: 20px;
    width: min(calc(100% - 40px), 760px);
    margin: 0 auto;
    border: 1px solid rgba(46, 138, 220, 0.48);
    border-radius: 26px;
  }
}

@media (min-width: 1024px) {
  .profile-app {
    padding-bottom: 42px;
  }

  .profile-hero {
    min-height: 220px;
  }

  .identity-avatar {
    width: 132px;
    height: 132px;
    font-size: 38px;
  }

  .primary-nav {
    position: sticky;
    top: 78px;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(100%, 1180px);
    min-height: 68px;
    margin: 0 auto;
    padding: 5px 18px;
    border-width: 0 1px 1px;
    border-radius: 0 0 24px 24px;
  }

  .primary-nav-item,
  .primary-nav-action {
    flex-direction: row;
    gap: 9px;
    min-height: 50px;
    font-size: 14px;
  }

  .primary-nav-action svg {
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== CourtCast dynamic full-screen PWA foundation ===== */
html {
  width: 100%;
  min-height: 100%;
  background: var(--cc-bg-deep);
  /* No pull-to-refresh, set on the page itself (on body it also stopped
     one-finger scrolling on Android). */
  overscroll-behavior-y: none;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
}

.profile-topbar {
  padding-top: env(safe-area-inset-top);
}

.topbar-inner {
  box-sizing: border-box;
  padding-right: max(12px, env(safe-area-inset-right));
  padding-left: max(12px, env(safe-area-inset-left));
}

.profile-app {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100vh - 76px);
  min-height: calc(100dvh - 76px);
  padding-right: max(14px, env(safe-area-inset-right));
  padding-left: max(14px, env(safe-area-inset-left));
}

.primary-nav {
  box-sizing: border-box;
  padding-right: max(8px, env(safe-area-inset-right));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  padding-left: max(8px, env(safe-area-inset-left));
}

@media (max-width: 759px) {
  .topbar-inner,
  .profile-app,
  .primary-nav {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .profile-app {
    min-height: calc(100vh - 76px);
    min-height: calc(100dvh - 76px);
  }
}

/* ===== CourtCast mobile profile pixel normalization ===== */
@media (max-width: 759px) {
  .profile-topbar {
    padding-top: env(safe-area-inset-top);
  }

  .topbar-inner {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 58px;
    padding-top: 6px;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: 6px;
    padding-left: max(10px, env(safe-area-inset-left));
    gap: 7px;
  }

  .brand-link img {
    width: min(100%, 170px);
    height: 30px;
  }

  .topbar-actions {
    gap: 0;
  }

  .icon-button {
    width: 40px;
    min-height: 44px;
  }

  .icon-button svg {
    width: 21px;
    height: 21px;
  }

  .account-avatar {
    width: 34px;
    height: 34px;
    font-size: 10px;
  }

  .notification-dot {
    top: 8px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-width: 1px;
  }

  .profile-app {
    width: 100%;
    min-height: calc(100dvh - 58px);
    margin: 0;
    padding-top: 10px;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .profile-hero {
    gap: 12px;
    min-height: 0;
    padding: 14px;
    border-radius: 18px;
  }

  .profile-hero::after {
    right: -70px;
    bottom: -95px;
    width: 190px;
    height: 190px;
  }

  .identity-block {
    gap: 12px;
  }

  .identity-avatar {
    width: 78px;
    height: 78px;
    border-width: 2px;
    font-size: 23px;
    box-shadow: 0 0 16px rgba(9, 223, 242, 0.24);
  }

  .identity-avatar.square {
    width: 82px;
    height: 82px;
    border-radius: 17px;
  }

  .eyebrow {
    font-size: 9px;
    letter-spacing: 0.17em;
  }

  .identity-copy h1 {
    margin: 3px 0 4px;
    font-size: clamp(22px, 6.2vw, 28px);
    line-height: 1.04;
    letter-spacing: -0.025em;
  }

  .identity-meta,
  .identity-subtitle {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.3;
  }

  .claim-pill,
  .relationship-pill,
  .sport-chip {
    min-height: 23px;
    padding: 2px 7px;
    font-size: 10px;
  }

  .hero-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .metric-card {
    padding: 8px 4px;
    border-radius: 11px;
  }

  .metric-card strong {
    margin-bottom: 1px;
    font-size: 18px;
    line-height: 1.05;
  }

  .metric-card span {
    font-size: 9.5px;
    line-height: 1.15;
  }

  .sport-selector,
  .section-tabs {
    gap: 4px;
    margin-top: 9px;
    padding: 4px;
    border-radius: 13px;
  }

  .sport-selector button,
  .section-tabs button {
    min-width: 74px;
    min-height: 40px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.1;
  }

  .content-grid {
    gap: 10px;
    margin-top: 10px;
  }

  .content-grid.two-column,
  .content-grid.player-overview {
    grid-template-columns: 1fr;
  }

  .content-card {
    padding: 13px;
    border-radius: 16px;
  }

  .card-heading {
    gap: 8px;
    margin-bottom: 11px;
  }

  .card-heading h2,
  .card-heading h3 {
    font-size: clamp(16px, 4.4vw, 19px);
    line-height: 1.15;
  }

  .card-heading span {
    font-size: 10.5px;
    line-height: 1.2;
  }

  .rating-grid,
  .stat-grid {
    gap: 7px;
  }

  .rating-card {
    padding: 11px 9px;
    border-radius: 13px;
  }

  .rating-card .rating-value {
    margin: 4px 0 2px;
    font-size: 24px;
    line-height: 1;
  }

  .rating-card p,
  .rating-card small {
    font-size: 10.5px;
    line-height: 1.25;
  }

  .empty-state {
    min-height: 94px;
    padding: 14px;
    border-radius: 13px;
    font-size: 12px;
    line-height: 1.35;
  }

  .empty-state strong {
    margin-bottom: 3px;
    font-size: 14px;
  }

  .list {
    gap: 6px;
  }

  .list-row {
    gap: 9px;
    min-height: 50px;
    padding: 8px 9px;
    border-radius: 12px;
    font-size: 12.5px;
  }

  .list-row-main > span,
  .list-row > time {
    margin-top: 2px;
    font-size: 10.5px;
  }

  .mini-avatar,
  .activity-icon {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .loading-state,
  .error-state {
    gap: 13px;
    min-height: 130px;
    margin-top: 8vh;
    padding: 18px;
  }

  .loading-state h1,
  .error-state h1 {
    margin: 3px 0 5px;
    font-size: clamp(21px, 5.8vw, 26px);
  }

  .loading-mark {
    width: 38px;
    height: 38px;
    border-width: 3px;
  }

  .primary-nav {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding-top: 4px;
    padding-right: max(6px, env(safe-area-inset-right));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    padding-left: max(6px, env(safe-area-inset-left));
    border-radius: 18px 18px 0 0;
  }

  .primary-nav-item,
  .primary-nav-action {
    min-height: 50px;
  }

  .primary-nav-item {
    gap: 2px;
    font-size: 9.5px;
  }

  .primary-nav-item svg {
    width: 21px;
    height: 21px;
  }

  .primary-nav-action {
    gap: 3px;
    font-size: 9px;
  }

  .primary-nav-action svg {
    width: 44px;
    height: 44px;
    margin-top: -20px;
    padding: 10px;
    border-width: 2px;
    box-shadow: 0 0 15px rgba(9, 223, 242, 0.28);
  }
}

@media (max-width: 389px) {
  .profile-app {
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .profile-hero {
    padding: 12px;
  }

  .identity-avatar {
    width: 72px;
    height: 72px;
  }

  .identity-avatar.square {
    width: 76px;
    height: 76px;
  }

  .identity-copy h1 {
    font-size: clamp(21px, 6.2vw, 25px);
  }

  .metric-card strong {
    font-size: 17px;
  }

  .metric-card span {
    font-size: 9px;
  }
}


.reference-player-hero {
  padding: 18px;
}

.reference-player-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.reference-player-copy {
  min-width: 0;
}

.reference-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reference-name-row h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.05;
}

.verified-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #249cff;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(36, 156, 255, 0.35);
}

.reference-location,
.reference-demographics,
.reference-tagline {
  margin: 7px 0 0;
  color: #abc7e7;
  font-size: 14px;
}

.reference-location,
.reference-demographics {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reference-tagline {
  margin-top: 11px;
  color: #7fa7d1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.reference-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(55, 169, 255, 0.5);
  border-radius: 13px;
  background: rgba(4, 34, 71, 0.56);
  color: #eff8ff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.reference-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.reference-hero-metric {
  display: grid;
  place-items: center;
  min-height: 80px;
  padding: 10px;
  border: 1px solid rgba(55, 169, 255, 0.34);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(8, 58, 111, 0.66),
      rgba(3, 31, 65, 0.72)
    );
  text-align: center;
}

.reference-hero-metric strong {
  color: #ffffff;
  font-size: 25px;
  line-height: 1;
}

.reference-hero-metric span {
  margin-top: 6px;
  color: #a8c4e2;
  font-size: 12px;
}

.reference-hero-metric.is-rating {
  border-color: rgba(0, 234, 255, 0.88);
  box-shadow:
    inset 0 0 24px rgba(0, 190, 255, 0.12),
    0 0 12px rgba(0, 213, 255, 0.12);
}

.reference-hero-metric.is-rating span {
  color: #45e7ff;
}

.reference-player-overview {
  gap: 14px;
}

.reference-performance-card,
.reference-rating-card {
  overflow: hidden;
}

.reference-card-toolbar,
.reference-rating-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.reference-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reference-card-title h2,
.reference-rating-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
}

.reference-info {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(114, 185, 255, 0.55);
  border-radius: 50%;
  color: #a9d5ff;
  font-size: 11px;
}

.reference-period-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  overflow: hidden;
  border: 1px solid rgba(50, 142, 220, 0.3);
  border-radius: 11px;
}

.reference-period-tabs button {
  min-width: 68px;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-right: 1px solid rgba(50, 142, 220, 0.18);
  background: transparent;
  color: #a9c4df;
  font: inherit;
  font-size: 12px;
}

.reference-period-tabs button:last-child {
  border-right: 0;
}

.reference-period-tabs button.is-active {
  background: linear-gradient(135deg, #00c9ff, #1668ef);
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(80, 241, 255, 0.7);
}

.reference-performance-layout {
  display: grid;
  grid-template-columns: minmax(180px, 290px) minmax(220px, 1fr);
  align-items: center;
  gap: 30px;
  margin-top: 20px;
}

.performance-donut {
  --wins: 61;
  --losses: 32;
  position: relative;
  width: min(100%, 225px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background:
    conic-gradient(
      #109dff 0 calc(var(--wins) * 1%),
      #095bc7 calc(var(--wins) * 1%) calc((var(--wins) + var(--losses)) * 1%),
      #ffc339 calc((var(--wins) + var(--losses)) * 1%) 100%
    );
  box-shadow: 0 0 26px rgba(11, 121, 226, 0.16);
}

.performance-donut::before {
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: #06305d;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.22);
}

.performance-donut-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  text-align: center;
}

.performance-donut-center strong {
  color: #ffffff;
  font-size: 34px;
  line-height: 1;
}

.performance-donut-center span {
  margin-top: 5px;
  color: #adc8e4;
  font-size: 13px;
}

.performance-legend {
  display: grid;
  gap: 18px;
}

.performance-legend-row {
  display: grid;
  grid-template-columns: 18px minmax(80px, 1fr) auto 45px;
  align-items: center;
  gap: 10px;
  color: #a9c6e5;
}

.performance-legend-row strong {
  color: #ffffff;
  font-size: 20px;
}

.performance-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.performance-dot.wins {
  background: #109dff;
  color: #109dff;
}

.performance-dot.losses {
  background: transparent;
  color: #1677e8;
}

.performance-dot.pending {
  background: #ffc339;
  color: #ffc339;
}

.reference-performance-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.performance-total {
  display: grid;
  place-items: center;
  min-height: 72px;
  border: 1px solid rgba(42, 145, 236, 0.48);
  border-radius: 13px;
  background: rgba(2, 39, 77, 0.58);
}

.performance-total strong {
  color: #ffffff;
  font-size: 25px;
}

.performance-total span {
  margin-top: 2px;
  color: #b0cae4;
  font-size: 12px;
}

.performance-total.pending {
  border-color: rgba(255, 193, 57, 0.8);
  background:
    linear-gradient(
      135deg,
      rgba(255, 193, 57, 0.17),
      rgba(2, 39, 77, 0.58)
    );
}

.reference-rating-current {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: end;
  gap: 8px;
  text-align: right;
}

.reference-rating-current strong {
  color: #ffffff;
  font-size: 28px;
}

.reference-rating-current .rating-delta {
  color: #2fe1b2;
  font-weight: 800;
}

.reference-rating-current small {
  grid-column: 1 / -1;
  color: #91afd0;
  font-size: 11px;
}

.reference-chart-wrap {
  margin-top: 14px;
  overflow: hidden;
}

.reference-rating-chart {
  display: block;
  width: 100%;
  min-height: 180px;
}

.rating-grid-line {
  stroke: rgba(105, 163, 217, 0.18);
  stroke-width: 1;
}

.rating-axis-label {
  fill: #88a8c9;
  font-size: 12px;
}

.rating-line {
  fill: none;
  stroke: #57bfff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(
      0 0 5px rgba(66, 185, 255, 0.6)
    );
}

.rating-point {
  fill: #65c9ff;
  stroke: #b4e8ff;
  stroke-width: 2;
}

.reference-percentile {
  display: grid;
  grid-template-columns: auto auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(65, 160, 239, 0.45);
  border-radius: 14px;
  background: rgba(5, 49, 94, 0.58);
}

.reference-trophy {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(22, 126, 244, 0.74);
}

.reference-percentile-copy {
  display: grid;
}

.reference-percentile-copy span,
.reference-percentile-comparison span {
  color: #aac5e1;
  font-size: 12px;
}

.reference-percentile-copy strong {
  color: #ffffff;
  font-size: 20px;
}

.reference-percentile-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(3, 28, 57, 0.84);
}

.reference-percentile-track span {
  display: block;
  width: 85%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #079cff, #20c6ff);
}

.reference-percentile-comparison {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reference-percentile-comparison strong {
  color: #dcedff;
  font-size: 28px;
}

.reference-community-gap {
  height: 12px;
}

@media (max-width: 759px) {
  .reference-player-hero {
    padding: 14px;
  }

  .reference-player-identity {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  .reference-edit-button {
    display: none;
  }

  .reference-name-row h1 {
    font-size: 24px;
  }

  .verified-badge {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .reference-location,
  .reference-demographics {
    margin-top: 4px;
    gap: 5px;
    font-size: 10px;
  }

  .reference-tagline {
    margin-top: 7px;
    font-size: 8px;
    letter-spacing: 0.11em;
  }

  .reference-hero-metrics {
    grid-column: 1 / -1;
    gap: 6px;
    margin-top: 13px;
  }

  .reference-hero-metric {
    min-height: 58px;
    padding: 7px 4px;
    border-radius: 11px;
  }

  .reference-hero-metric strong {
    font-size: 18px;
  }

  .reference-hero-metric span {
    margin-top: 4px;
    font-size: 8px;
  }

  .reference-card-toolbar {
    align-items: center;
  }

  .reference-card-title h2 {
    font-size: 15px;
  }

  .reference-info {
    width: 17px;
    height: 17px;
    font-size: 9px;
  }

  .reference-period-tabs button {
    min-width: 45px;
    min-height: 29px;
    padding: 0 7px;
    font-size: 8px;
  }

  .reference-performance-layout {
    grid-template-columns: 42% 1fr;
    gap: 12px;
    margin-top: 14px;
  }

  .performance-donut {
    width: 126px;
  }

  .performance-donut-center strong {
    font-size: 22px;
  }

  .performance-donut-center span {
    font-size: 7px;
  }

  .performance-legend {
    gap: 8px;
  }

  .performance-legend-row {
    grid-template-columns: 10px minmax(44px, 1fr) auto 28px;
    gap: 5px;
    font-size: 8px;
  }

  .performance-dot {
    width: 9px;
    height: 9px;
    border-width: 1px;
  }

  .performance-legend-row strong {
    font-size: 13px;
  }

  .reference-performance-totals {
    gap: 6px;
    margin-top: 11px;
  }

  .performance-total {
    min-height: 52px;
    border-radius: 10px;
  }

  .performance-total strong {
    font-size: 17px;
  }

  .performance-total span {
    font-size: 8px;
  }

  .reference-rating-heading h2 {
    font-size: 17px;
  }

  .reference-rating-current strong {
    font-size: 21px;
  }

  .reference-rating-current,
  .reference-rating-current small {
    font-size: 8px;
  }

  .reference-rating-chart {
    min-height: 142px;
  }

  .rating-axis-label {
    font-size: 8px;
  }

  .reference-percentile {
    grid-template-columns: auto auto minmax(50px, 1fr);
    gap: 7px;
    padding: 9px;
  }

  .reference-percentile-comparison {
    display: none;
  }

  .reference-trophy {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .reference-percentile-copy span {
    font-size: 7px;
  }

  .reference-percentile-copy strong {
    font-size: 14px;
  }
}

@media (max-width: 389px) {
  .reference-player-identity {
    gap: 10px;
  }

  .reference-name-row h1 {
    font-size: 22px;
  }

  .reference-hero-metric strong {
    font-size: 17px;
  }

  .reference-performance-layout {
    grid-template-columns: 40% 1fr;
    gap: 9px;
  }

  .performance-donut {
    width: 112px;
  }

  .reference-period-tabs button {
    min-width: 40px;
    padding-inline: 5px;
  }
}


/* reference-mobile-alignment-v1 */

.section-tabs button svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-tabs button > span {
  display: block;
}

@media (max-width: 759px) {
  .profile-app {
    padding-inline: 12px;
  }

  .reference-player-hero {
    padding: 22px 20px 18px;
    border-radius: 22px;
  }

  .reference-player-identity {
    grid-template-columns: 118px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
  }

  .reference-player-hero .identity-avatar {
    width: 118px;
    height: 118px;
    font-size: 30px;
    border-width: 3px;
    box-shadow:
      0 0 0 3px rgba(17, 204, 255, 0.08),
      0 0 22px rgba(0, 212, 255, 0.2);
  }

  .reference-name-row {
    gap: 8px;
  }

  .reference-name-row h1 {
    font-size: 30px;
    line-height: 1.02;
  }

  .verified-badge {
    width: 21px;
    height: 21px;
    font-size: 11px;
  }

  .reference-location {
    margin-top: 10px;
    gap: 8px;
    font-size: 14px;
  }

  .reference-demographics {
    margin-top: 7px;
    gap: 9px;
    font-size: 13px;
  }

  .reference-tagline {
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .reference-edit-button {
    display: inline-flex;
    min-width: 122px;
    min-height: 48px;
    padding-inline: 15px;
    font-size: 13px;
  }

  .reference-hero-metrics {
    grid-column: 1 / -1;
    gap: 10px;
    margin-top: 20px;
  }

  .reference-hero-metric {
    min-height: 76px;
    border-radius: 14px;
  }

  .reference-hero-metric strong {
    font-size: 25px;
  }

  .reference-hero-metric span {
    margin-top: 7px;
    font-size: 12px;
  }

  .section-tabs {
    min-height: 94px;
    padding: 0;
    border-radius: 20px;
  }

  .section-tabs button {
    min-height: 92px;
    padding: 10px 6px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 14px;
    border-radius: 16px;
  }

  .section-tabs button svg {
    width: 27px;
    height: 27px;
  }

  .section-tabs button[aria-selected="true"] {
    box-shadow:
      inset 0 0 0 1px rgba(0, 239, 255, 0.8),
      0 0 18px rgba(0, 205, 255, 0.14);
  }

  .reference-player-overview {
    gap: 16px;
  }

  .reference-performance-card,
  .reference-rating-card,
  .reference-community-card {
    border-radius: 20px;
    padding: 20px 18px;
  }

  .reference-card-toolbar {
    align-items: center;
  }

  .reference-card-title {
    gap: 9px;
  }

  .reference-card-title h2 {
    font-size: 22px;
  }

  .reference-info {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .reference-period-tabs {
    border-radius: 12px;
  }

  .reference-period-tabs button {
    min-width: 62px;
    min-height: 40px;
    padding-inline: 11px;
    font-size: 11px;
  }

  .reference-performance-layout {
    grid-template-columns: minmax(180px, 44%) minmax(0, 1fr);
    gap: 28px;
    margin-top: 24px;
  }

  .performance-donut {
    width: 190px;
  }

  .performance-donut::before {
    inset: 28%;
  }

  .performance-donut-center strong {
    font-size: 33px;
  }

  .performance-donut-center span {
    margin-top: 7px;
    font-size: 12px;
  }

  .performance-legend {
    gap: 17px;
  }

  .performance-legend-row {
    grid-template-columns: 17px minmax(64px, 1fr) auto 38px;
    gap: 10px;
    font-size: 13px;
  }

  .performance-dot {
    width: 16px;
    height: 16px;
    border-width: 2px;
  }

  .performance-legend-row strong {
    font-size: 20px;
  }

  .reference-performance-totals {
    gap: 12px;
    margin-top: 22px;
  }

  .performance-total {
    min-height: 72px;
    border-radius: 13px;
  }

  .performance-total strong {
    font-size: 24px;
  }

  .performance-total span {
    font-size: 12px;
  }

  .reference-rating-heading {
    align-items: flex-start;
  }

  .reference-rating-heading h2 {
    font-size: 22px;
  }

  .reference-rating-current strong {
    font-size: 28px;
  }

  .reference-rating-current .rating-delta {
    font-size: 13px;
  }

  .reference-rating-current small {
    margin-top: 3px;
    font-size: 11px;
  }

  .reference-chart-wrap {
    margin-top: 20px;
  }

  .reference-rating-chart {
    width: 100%;
    min-height: 220px;
  }

  .rating-axis-label {
    font-size: 11px;
  }

  .reference-percentile {
    grid-template-columns: auto auto minmax(100px, 1fr) auto;
    gap: 13px;
    margin-top: 14px;
    padding: 15px 16px;
    border-radius: 14px;
  }

  .reference-percentile-comparison {
    display: flex;
  }

  .reference-trophy {
    width: 43px;
    height: 43px;
    font-size: 18px;
  }

  .reference-percentile-copy span {
    font-size: 11px;
  }

  .reference-percentile-copy strong {
    font-size: 21px;
  }

  .reference-percentile-comparison span {
    font-size: 11px;
  }

  .reference-percentile-track {
    height: 9px;
  }
}

@media (max-width: 560px) {
  .reference-player-identity {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 13px;
  }

  .reference-player-hero .identity-avatar {
    width: 82px;
    height: 82px;
    font-size: 25px;
  }

  .reference-edit-button {
    display: none;
  }

  .reference-name-row h1 {
    font-size: 24px;
  }

  .reference-location {
    margin-top: 5px;
    font-size: 10px;
  }

  .reference-demographics {
    margin-top: 3px;
    font-size: 9px;
  }

  .reference-tagline {
    margin-top: 7px;
    font-size: 8px;
  }

  .reference-hero-metrics {
    gap: 7px;
    margin-top: 15px;
  }

  .reference-hero-metric {
    min-height: 60px;
  }

  .reference-hero-metric strong {
    font-size: 19px;
  }

  .reference-hero-metric span {
    font-size: 8px;
  }

  .section-tabs {
    min-height: 72px;
  }

  .section-tabs button {
    min-height: 70px;
    gap: 4px;
    font-size: 10px;
  }

  .section-tabs button svg {
    width: 21px;
    height: 21px;
  }

  .reference-performance-card,
  .reference-rating-card,
  .reference-community-card {
    padding: 16px 14px;
  }

  .reference-card-title h2 {
    font-size: 17px;
  }

  .reference-period-tabs button {
    min-width: 44px;
    min-height: 31px;
    padding-inline: 6px;
    font-size: 8px;
  }

  .reference-performance-layout {
    grid-template-columns: 42% 1fr;
    gap: 12px;
    margin-top: 16px;
  }

  .performance-donut {
    width: 134px;
  }

  .performance-donut-center strong {
    font-size: 24px;
  }

  .performance-donut-center span {
    font-size: 8px;
  }

  .performance-legend {
    gap: 9px;
  }

  .performance-legend-row {
    grid-template-columns: 10px minmax(42px, 1fr) auto 28px;
    gap: 5px;
    font-size: 8px;
  }

  .performance-dot {
    width: 9px;
    height: 9px;
    border-width: 1px;
  }

  .performance-legend-row strong {
    font-size: 14px;
  }

  .reference-performance-totals {
    gap: 6px;
    margin-top: 12px;
  }

  .performance-total {
    min-height: 53px;
  }

  .performance-total strong {
    font-size: 18px;
  }

  .performance-total span {
    font-size: 8px;
  }

  .reference-rating-heading h2 {
    font-size: 18px;
  }

  .reference-rating-current strong {
    font-size: 22px;
  }

  .reference-rating-current .rating-delta,
  .reference-rating-current small {
    font-size: 8px;
  }

  .reference-rating-chart {
    min-height: 185px;
  }

  .rating-axis-label {
    font-size: 9px;
  }

  .reference-percentile {
    grid-template-columns: auto auto minmax(55px, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .reference-percentile-comparison {
    display: none;
  }

  .reference-trophy {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .reference-percentile-copy span {
    font-size: 8px;
  }

  .reference-percentile-copy strong {
    font-size: 15px;
  }
}

body:has(.reference-player-hero) {
  --player-light-ui-m: 1;
  --player-navy: #071b5d;
  --player-navy-2: #0c2d6f;
  --player-blue: #0b91ff;
  --player-blue-2: #22b8ff;
  --player-cyan: #19d4ff;
  --player-ice: #eef8ff;
  --player-card: rgba(255,255,255,.96);
  --player-border: #d7e8f7;
  --player-muted: #526f9b;
  --player-green: #08aa4f;
  --player-gold: #f7b718;
  color-scheme: light;
  background:
    radial-gradient(circle at 20% 6%, rgba(95,190,255,.17), transparent 31%),
    linear-gradient(180deg, #f5fbff 0%, #edf7ff 48%, #e8f5ff 100%);
  color: var(--player-navy);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;
}

body:has(.reference-player-hero) .profile-atmosphere {
  opacity: 1;
  background:
    radial-gradient(circle at 9% 15%, rgba(53,169,255,.11), transparent 25%),
    radial-gradient(circle at 88% 38%, rgba(0,187,255,.08), transparent 27%),
    linear-gradient(180deg, #f6fbff 0%, #eaf6ff 100%);
}











body:has(.reference-player-hero) .menu-button {
  color: #ffffff;
}





body:has(.reference-player-hero) .account-avatar {
  border: 1px solid #19c8ff;
  background:
    linear-gradient(145deg, #108cff, #0a53ea);
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 5px 16px rgba(0,130,255,.25);
}

body:has(.reference-player-hero) .profile-app {
  width: min(100%, 900px);
  max-width: 900px;
  margin-inline: auto;
  padding-top: 16px;
  padding-bottom: calc(126px + env(safe-area-inset-bottom));
}

body:has(.reference-player-hero) .panel,
body:has(.reference-player-hero) .content-card {
  border: 1px solid var(--player-border);
  background: var(--player-card);
  color: var(--player-navy);
  box-shadow:
    0 12px 32px rgba(38,100,151,.09),
    inset 0 1px 0 rgba(255,255,255,.95);
}

body:has(.reference-player-hero) .profile-hero::after {
  display: none;
}

body:has(.reference-player-hero) .reference-player-hero {
  overflow: visible;
  padding: 24px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 17% 20%, rgba(78,183,255,.10), transparent 27%),
    rgba(255,255,255,.97);
}

body:has(.reference-player-hero) .reference-player-identity {
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 22px;
}

body:has(.reference-player-hero) .reference-player-hero .identity-avatar {
  width: 154px;
  height: 154px;
  border: 3px solid #39adff;
  background: #e8f6ff;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.98),
    0 0 0 5px rgba(43,166,255,.32),
    0 10px 25px rgba(42,126,187,.16);
}

body:has(.reference-player-hero) .reference-player-hero .identity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:has(.reference-player-hero) .reference-name-row h1 {
  color: var(--player-navy);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -.035em;
}

body:has(.reference-player-hero) .verified-badge {
  width: 25px;
  height: 25px;
  background: #157df4;
  color: #ffffff;
  box-shadow: none;
}

body:has(.reference-player-hero) .reference-location,
body:has(.reference-player-hero) .reference-demographics {
  color: #3e6295;
  font-size: 16px;
}

body:has(.reference-player-hero) .reference-tagline {
  color: #31558a;
  font-size: 12px;
  letter-spacing: .19em;
}

body:has(.reference-player-hero) .reference-edit-button {
  min-height: 48px;
  padding-inline: 19px;
  border: 1px solid #c4dcf3;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff, #f9fcff);
  color: var(--player-navy);
  font-size: 14px;
  font-weight: 750;
  box-shadow:
    0 5px 14px rgba(55,116,166,.07),
    inset 0 1px 0 #ffffff;
}

body:has(.reference-player-hero) .reference-hero-metrics {
  gap: 12px;
  margin-top: 20px;
}

body:has(.reference-player-hero) .reference-hero-metric {
  min-height: 92px;
  padding: 12px 8px;
  border: 1px solid #d5e4f4;
  border-radius: 15px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1);
}

body:has(.reference-player-hero) .reference-hero-metric strong {
  color: var(--player-navy);
  font-size: 30px;
  font-weight: 800;
}

body:has(.reference-player-hero) .reference-hero-metric span {
  color: #476897;
  font-size: 14px;
}

body:has(.reference-player-hero) .reference-hero-metric.is-rating {
  border-color: #66c9ff;
  background:
    linear-gradient(145deg, rgba(214,247,255,.84), rgba(240,249,255,.98));
  box-shadow:
    inset 0 0 24px rgba(0,178,255,.05);
}

body:has(.reference-player-hero) .reference-hero-metric.is-rating span {
  color: #125ff0;
  font-weight: 750;
}

body:has(.reference-player-hero) .sport-selector,
body:has(.reference-player-hero) .section-tabs {
  border: 1px solid #dceaf7;
  background: rgba(255,255,255,.95);
  box-shadow:
    0 8px 24px rgba(38,98,146,.07),
    inset 0 1px 0 #ffffff;
}

body:has(.reference-player-hero) .section-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;
  margin-top: 14px;
  padding: 5px;
  border-radius: 19px;
}

body:has(.reference-player-hero) .section-tabs button {
  min-width: 0;
  min-height: 74px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: #55739f;
  font-weight: 600;
}

body:has(.reference-player-hero) .section-tabs button svg {
  color: currentColor;
  stroke: currentColor;
}

body:has(.reference-player-hero) .section-tabs button[aria-selected="true"] {
  background:
    linear-gradient(145deg, #0d8dff 0%, #20b9ff 100%);
  color: #ffffff;
  box-shadow:
    0 8px 20px rgba(11,145,255,.23),
    inset 0 1px 0 rgba(255,255,255,.28);
}

body:has(.reference-player-hero) .reference-player-overview {
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}

body:has(.reference-player-hero) .reference-performance-card,
body:has(.reference-player-hero) .reference-rating-card,
body:has(.reference-player-hero) .reference-community-card {
  padding: 24px;
  border-radius: 23px;
  overflow: hidden;
}

body:has(.reference-player-hero) .reference-card-title h2,
body:has(.reference-player-hero) .reference-rating-heading h2,
body:has(.reference-player-hero) .card-heading h2 {
  color: var(--player-navy);
  font-weight: 800;
  letter-spacing: -.025em;
}

body:has(.reference-player-hero) .reference-card-title h2,
body:has(.reference-player-hero) .reference-rating-heading h2 {
  font-size: 24px;
}

body:has(.reference-player-hero) .reference-info {
  border-color: #bfe3ff;
  background: #dff2ff;
  color: #1169e8;
  font-weight: 800;
}

body:has(.reference-player-hero) .reference-period-tabs {
  border: 1px solid #cfe1f1;
  border-radius: 12px;
  background: #fbfdff;
}

body:has(.reference-player-hero) .reference-period-tabs button {
  color: #213f79;
  border-right-color: #dce7f2;
  background: transparent;
}

body:has(.reference-player-hero) .reference-period-tabs button.is-active {
  background:
    linear-gradient(145deg, #0e8eff, #087cf2);
  color: #ffffff;
  box-shadow:
    0 4px 12px rgba(12,127,241,.21);
}

body:has(.reference-player-hero) .reference-performance-layout {
  grid-template-columns: minmax(200px, 290px) minmax(0,1fr);
  gap: 42px;
  margin-top: 26px;
}

body:has(.reference-player-hero) .performance-donut {
  width: min(100%, 250px);
  background:
    conic-gradient(
      #199ef4 0 calc(var(--wins) * 1%),
      #092d68 calc(var(--wins) * 1%) calc((var(--wins) + var(--losses)) * 1%),
      #ffbd22 calc((var(--wins) + var(--losses)) * 1%) 100%
    );
  box-shadow: none;
}

body:has(.reference-player-hero) .performance-donut::before {
  inset: 27%;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(211,229,244,.42);
}

body:has(.reference-player-hero) .performance-donut-center strong {
  color: var(--player-navy);
  font-size: 38px;
}

body:has(.reference-player-hero) .performance-donut-center span {
  color: #476797;
  font-size: 14px;
}

body:has(.reference-player-hero) .performance-legend {
  gap: 20px;
}

body:has(.reference-player-hero) .performance-legend-row {
  color: #143470;
  font-size: 15px;
}

body:has(.reference-player-hero) .performance-legend-row strong {
  color: var(--player-navy);
  font-size: 22px;
}

body:has(.reference-player-hero) .performance-dot.losses {
  background: #092d68;
  color: #092d68;
}

body:has(.reference-player-hero) .reference-performance-totals {
  gap: 14px;
  margin-top: 24px;
}

body:has(.reference-player-hero) .performance-total {
  min-height: 86px;
  border: 1px solid #cfe2f4;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fafdff, #f3f8fd);
}

body:has(.reference-player-hero) .performance-total.wins {
  border-color: #74c9fb;
  background:
    linear-gradient(145deg, #dff5ff, #f1faff);
}

body:has(.reference-player-hero) .performance-total.pending {
  border-color: #ffc950;
  background:
    linear-gradient(145deg, #fff7df, #fffdf5);
}

body:has(.reference-player-hero) .performance-total strong {
  color: var(--player-navy);
  font-size: 29px;
}

body:has(.reference-player-hero) .performance-total span {
  color: #416392;
  font-size: 14px;
}

body:has(.reference-player-hero) .reference-rating-current strong {
  color: var(--player-navy);
}

body:has(.reference-player-hero) .reference-rating-current .rating-delta {
  color: var(--player-green);
}

body:has(.reference-player-hero) .reference-rating-current small {
  color: #59759e;
}

body:has(.reference-player-hero) .reference-chart-wrap {
  margin-top: 20px;
}

body:has(.reference-player-hero) .rating-grid-line {
  stroke: #d5e4f3;
}

body:has(.reference-player-hero) .rating-axis-label {
  fill: #486b9e;
}

body:has(.reference-player-hero) .rating-line {
  stroke: #087df4;
  stroke-width: 3.25;
  filter:
    drop-shadow(0 2px 3px rgba(8,125,244,.16));
}

body:has(.reference-player-hero) .rating-point {
  fill: #ffffff;
  stroke: #087df4;
  stroke-width: 3;
}

body:has(.reference-player-hero) .reference-percentile {
  border: 1px solid #d1e4f4;
  border-radius: 15px;
  background:
    linear-gradient(180deg, #f8fcff, #f0f8ff);
}

body:has(.reference-player-hero) .reference-trophy {
  background:
    linear-gradient(145deg, #0e8eff, #20b8ff);
  color: #ffffff;
  box-shadow: none;
}

body:has(.reference-player-hero) .reference-percentile-copy span,
body:has(.reference-player-hero) .reference-percentile-comparison span {
  color: #42618e;
}

body:has(.reference-player-hero) .reference-percentile-copy strong {
  color: var(--player-navy);
}

body:has(.reference-player-hero) .reference-percentile-track {
  background: #d8e6f4;
}

body:has(.reference-player-hero) .reference-percentile-track span {
  background:
    linear-gradient(90deg, #135fe9, #089cff);
}

body:has(.reference-player-hero) .reference-percentile-comparison strong {
  color: #085de2;
}

body:has(.reference-player-hero) .reference-community-card .card-heading span,
body:has(.reference-player-hero) .card-heading span {
  color: #6681a8;
}

body:has(.reference-player-hero) .list-row,
body:has(.reference-player-hero) .rating-card,
body:has(.reference-player-hero) .metric-card,
body:has(.reference-player-hero) .empty-state {
  border-color: #dce8f4;
  background: #f9fcff;
  color: var(--player-navy);
}

body:has(.reference-player-hero) .list-row-main strong,
body:has(.reference-player-hero) .rating-card .rating-value {
  color: var(--player-navy);
}

body:has(.reference-player-hero) .list-row-main > span,
body:has(.reference-player-hero) .list-row > time,
body:has(.reference-player-hero) .rating-card p,
body:has(.reference-player-hero) .rating-card small {
  color: #6680a6;
}















@media (max-width: 759px) {
  

  

  body:has(.reference-player-hero) .profile-app {
    padding-top: 12px;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  body:has(.reference-player-hero) .reference-player-hero {
    padding: 17px 16px 15px;
    border-radius: 20px;
  }

  body:has(.reference-player-hero) .reference-player-identity {
    grid-template-columns: 82px minmax(0,1fr) auto;
    gap: 10px;
  }

  body:has(.reference-player-hero) .reference-player-hero .identity-avatar {
    width: 82px;
    height: 82px;
    border-width: 2px;
  }

  body:has(.reference-player-hero) .reference-name-row {
    gap: 5px;
  }

  body:has(.reference-player-hero) .reference-name-row h1 {
    font-size: clamp(21px, 5.9vw, 27px);
  }

  body:has(.reference-player-hero) .verified-badge {
    width: 19px;
    height: 19px;
    font-size: 10px;
  }

  body:has(.reference-player-hero) .reference-location {
    margin-top: 6px;
    gap: 5px;
    font-size: 11px;
  }

  body:has(.reference-player-hero) .reference-demographics {
    margin-top: 4px;
    gap: 6px;
    font-size: 10px;
  }

  body:has(.reference-player-hero) .reference-tagline {
    margin-top: 8px;
    font-size: 8px;
    letter-spacing: .16em;
  }

  body:has(.reference-player-hero) .reference-edit-button {
    display: inline-flex;
    min-width: 92px;
    min-height: 42px;
    padding-inline: 10px;
    gap: 5px;
    border-radius: 11px;
    font-size: 11px;
  }

  body:has(.reference-player-hero) .reference-hero-metrics {
    gap: 7px;
    margin-top: 16px;
  }

  body:has(.reference-player-hero) .reference-hero-metric {
    min-height: 70px;
    padding: 8px 3px;
    border-radius: 12px;
  }

  body:has(.reference-player-hero) .reference-hero-metric strong {
    font-size: 23px;
  }

  body:has(.reference-player-hero) .reference-hero-metric span {
    margin-top: 5px;
    font-size: 10px;
  }

  body:has(.reference-player-hero) .section-tabs {
    min-height: 78px;
    margin-top: 10px;
    border-radius: 17px;
  }

  body:has(.reference-player-hero) .section-tabs button {
    min-height: 68px;
    padding: 8px 4px;
    gap: 5px;
    border-radius: 13px;
    font-size: 11px;
  }

  body:has(.reference-player-hero) .section-tabs button svg {
    width: 24px;
    height: 24px;
  }

  body:has(.reference-player-hero) .reference-player-overview {
    gap: 12px;
    margin-top: 12px;
  }

  body:has(.reference-player-hero) .reference-performance-card,
  body:has(.reference-player-hero) .reference-rating-card,
  body:has(.reference-player-hero) .reference-community-card {
    padding: 16px 14px;
    border-radius: 18px;
  }

  body:has(.reference-player-hero) .reference-card-title h2,
  body:has(.reference-player-hero) .reference-rating-heading h2 {
    font-size: 18px;
  }

  body:has(.reference-player-hero) .reference-info {
    width: 19px;
    height: 19px;
    font-size: 10px;
  }

  body:has(.reference-player-hero) .reference-period-tabs button {
    min-width: 52px;
    min-height: 34px;
    padding-inline: 7px;
    font-size: 9px;
  }

  body:has(.reference-player-hero) .reference-performance-layout {
    grid-template-columns: 42% minmax(0,1fr);
    gap: 16px;
    margin-top: 18px;
  }

  body:has(.reference-player-hero) .performance-donut {
    width: min(100%, 150px);
  }

  body:has(.reference-player-hero) .performance-donut-center strong {
    font-size: 28px;
  }

  body:has(.reference-player-hero) .performance-donut-center span {
    font-size: 9px;
  }

  body:has(.reference-player-hero) .performance-legend {
    gap: 11px;
  }

  body:has(.reference-player-hero) .performance-legend-row {
    grid-template-columns: 12px minmax(42px,1fr) auto 31px;
    gap: 5px;
    font-size: 9px;
  }

  body:has(.reference-player-hero) .performance-dot {
    width: 11px;
    height: 11px;
    border-width: 1px;
  }

  body:has(.reference-player-hero) .performance-legend-row strong {
    font-size: 15px;
  }

  body:has(.reference-player-hero) .reference-performance-totals {
    gap: 7px;
    margin-top: 15px;
  }

  body:has(.reference-player-hero) .performance-total {
    min-height: 62px;
    border-radius: 11px;
  }

  body:has(.reference-player-hero) .performance-total strong {
    font-size: 20px;
  }

  body:has(.reference-player-hero) .performance-total span {
    font-size: 9px;
  }

  body:has(.reference-player-hero) .reference-rating-heading {
    align-items: flex-start;
  }

  body:has(.reference-player-hero) .reference-rating-current strong {
    font-size: 22px;
  }

  body:has(.reference-player-hero) .reference-rating-current .rating-delta {
    font-size: 10px;
  }

  body:has(.reference-player-hero) .reference-rating-current small {
    margin-top: 2px;
    font-size: 8px;
  }

  body:has(.reference-player-hero) .reference-rating-chart {
    min-height: 160px;
  }

  body:has(.reference-player-hero) .rating-axis-label {
    font-size: 9px;
  }

  body:has(.reference-player-hero) .reference-percentile {
    grid-template-columns: auto auto minmax(56px,1fr) auto;
    gap: 8px;
    padding: 10px;
  }

  body:has(.reference-player-hero) .reference-trophy {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  body:has(.reference-player-hero) .reference-percentile-copy span,
  body:has(.reference-player-hero) .reference-percentile-comparison span {
    font-size: 8px;
  }

  body:has(.reference-player-hero) .reference-percentile-copy strong {
    font-size: 16px;
  }

  

  

  

  

  

  
}

@media (max-width: 520px) {
  body:has(.reference-player-hero) .reference-player-identity {
    grid-template-columns: 78px minmax(0,1fr) auto;
    gap: 8px;
  }

  body:has(.reference-player-hero) .reference-player-hero .identity-avatar {
    width: 78px;
    height: 78px;
  }

  body:has(.reference-player-hero) .reference-edit-button {
    min-width: 88px;
    padding-inline: 8px;
    font-size: 10px;
  }

  body:has(.reference-player-hero) .reference-performance-layout {
    grid-template-columns: 41% minmax(0,1fr);
    gap: 11px;
  }

  body:has(.reference-player-hero) .performance-donut {
    width: min(100%, 132px);
  }

  body:has(.reference-player-hero) .reference-period-tabs button {
    min-width: 46px;
    padding-inline: 5px;
  }

  body:has(.reference-player-hero) .reference-percentile-comparison {
    display: none;
  }

  body:has(.reference-player-hero) .reference-percentile {
    grid-template-columns: auto auto minmax(45px,1fr);
  }
}

@media (max-width: 390px) {
  body:has(.reference-player-hero) .reference-player-identity {
    grid-template-columns: 72px minmax(0,1fr) 44px;
    gap: 7px;
  }

  body:has(.reference-player-hero) .reference-player-hero .identity-avatar {
    width: 72px;
    height: 72px;
  }

  body:has(.reference-player-hero) .reference-edit-button {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }

  body:has(.reference-player-hero) .reference-edit-button span:last-child {
    display: none;
  }

  body:has(.reference-player-hero) .reference-name-row h1 {
    font-size: 20px;
  }

  body:has(.reference-player-hero) .reference-location {
    font-size: 9px;
  }

  body:has(.reference-player-hero) .reference-demographics,
  body:has(.reference-player-hero) .reference-tagline {
    font-size: 8px;
  }

  body:has(.reference-player-hero) .reference-hero-metric strong {
    font-size: 20px;
  }

  body:has(.reference-player-hero) .reference-hero-metric span {
    font-size: 8px;
  }
}

body:has(.section-tabs button[data-view="ranking"]) {
  --club-light-ui-n: 1;
  --club-navy: #071b5d;
  --club-blue: #087ff5;
  --club-cyan: #13bfff;
  --club-ice: #eef8ff;
  --club-border: #d7e8f7;
  --club-muted: #58749e;
  color-scheme: light;
  background:
    radial-gradient(circle at 14% 7%, rgba(62,177,255,.14), transparent 27%),
    linear-gradient(180deg, #f7fcff 0%, #ecf7ff 55%, #e7f4ff 100%);
  color: var(--club-navy);
}

body:has(.section-tabs button[data-view="ranking"]) .profile-atmosphere {
  opacity: 1;
  background:
    radial-gradient(circle at 12% 18%, rgba(50,171,255,.10), transparent 26%),
    radial-gradient(circle at 90% 43%, rgba(16,187,255,.07), transparent 25%),
    linear-gradient(180deg, #f8fcff, #eaf6ff);
}









body:has(.section-tabs button[data-view="ranking"]) .account-avatar {
  border: 1px solid #17caff;
  background:
    linear-gradient(145deg, #108cff, #0b55ea);
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 5px 16px rgba(0,130,255,.25);
}

body:has(.section-tabs button[data-view="ranking"]) .profile-app {
  width: min(100%, 900px);
  max-width: 900px;
  margin-inline: auto;
  padding-top: 16px;
  padding-bottom: calc(126px + env(safe-area-inset-bottom));
}

body:has(.section-tabs button[data-view="ranking"]) .panel,
body:has(.section-tabs button[data-view="ranking"]) .content-card {
  border: 1px solid var(--club-border);
  background: rgba(255,255,255,.97);
  color: var(--club-navy);
  box-shadow:
    0 12px 32px rgba(38,100,151,.085),
    inset 0 1px 0 rgba(255,255,255,.96);
}

body:has(.section-tabs button[data-view="ranking"]) .profile-hero {
  overflow: visible;
  gap: 20px;
  padding: 24px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 17%, rgba(64,181,255,.09), transparent 28%),
    rgba(255,255,255,.97);
}

body:has(.section-tabs button[data-view="ranking"]) .profile-hero::after {
  display: none;
}

body:has(.section-tabs button[data-view="ranking"]) .identity-block {
  align-items: center;
  gap: 22px;
}

body:has(.section-tabs button[data-view="ranking"]) .identity-avatar.square {
  width: 158px;
  height: 158px;
  border: 1px solid #b9d9f2;
  border-radius: 22px;
  background: #e9f6ff;
  box-shadow:
    0 10px 25px rgba(39,105,158,.12),
    inset 0 1px 0 #ffffff;
}

body:has(.section-tabs button[data-view="ranking"]) .identity-avatar.square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:has(.section-tabs button[data-view="ranking"]) .identity-copy .eyebrow {
  color: #3180cb;
  font-size: 10px;
  letter-spacing: .17em;
}

body:has(.section-tabs button[data-view="ranking"]) .identity-copy h1 {
  margin-top: 4px;
  color: var(--club-navy);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
}

body:has(.section-tabs button[data-view="ranking"]) .identity-meta,
body:has(.section-tabs button[data-view="ranking"]) .identity-subtitle {
  color: #4c6c98;
}

body:has(.section-tabs button[data-view="ranking"]) .hero-metrics {
  gap: 10px;
  margin-top: 18px;
}

body:has(.section-tabs button[data-view="ranking"]) .metric-card {
  min-height: 80px;
  padding: 10px 8px;
  border: 1px solid #d7e6f4;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: inset 0 1px 0 #ffffff;
}

body:has(.section-tabs button[data-view="ranking"]) .metric-card strong {
  color: var(--club-navy);
  font-size: 25px;
  font-weight: 800;
}

body:has(.section-tabs button[data-view="ranking"]) .metric-card span {
  color: #58749d;
  font-size: 12px;
}

body:has(.section-tabs button[data-view="ranking"]) .section-tabs {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 0;
  margin-top: 14px;
  padding: 5px;
  border: 1px solid #d9e8f5;
  border-radius: 20px;
  background: rgba(255,255,255,.97);
  box-shadow:
    0 8px 24px rgba(38,98,146,.07),
    inset 0 1px 0 #ffffff;
}

body:has(.section-tabs button[data-view="ranking"]) .section-tabs button {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  padding: 8px 3px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: #58739d;
  font-weight: 600;
}

body:has(.section-tabs button[data-view="ranking"]) .section-tabs button::before {
  display: block;
  color: currentColor;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

body:has(.section-tabs button[data-view="ranking"]) .section-tabs button[data-view="overview"]::before {
  content: "⌂";
}

body:has(.section-tabs button[data-view="ranking"]) .section-tabs button[data-view="ranking"]::before {
  content: "♛";
}

body:has(.section-tabs button[data-view="ranking"]) .section-tabs button[data-view="members"]::before {
  content: "●●";
  font-size: 16px;
  letter-spacing: -4px;
}

body:has(.section-tabs button[data-view="ranking"]) .section-tabs button[data-view="matches"]::before {
  content: "▣";
}

body:has(.section-tabs button[data-view="ranking"]) .section-tabs button[data-view="events"]::before {
  content: "★";
}

body:has(.section-tabs button[data-view="ranking"]) .section-tabs button[aria-selected="true"] {
  background:
    linear-gradient(145deg, #e0f4ff 0%, #d5edff 100%);
  color: #0878ef;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 5px 14px rgba(21,134,238,.10);
}

body:has(.section-tabs button[data-view="ranking"]) #profile-view {
  margin-top: 16px;
}

body:has(.section-tabs button[data-view="ranking"]) .content-grid {
  gap: 14px;
}

body:has(.section-tabs button[data-view="ranking"]) .content-card {
  padding: 20px;
  border-radius: 22px;
}

body:has(.section-tabs button[data-view="ranking"]) .card-heading h2,
body:has(.section-tabs button[data-view="ranking"]) .card-heading h3 {
  color: var(--club-navy);
  font-weight: 800;
  letter-spacing: -.02em;
}

body:has(.section-tabs button[data-view="ranking"]) .card-heading span {
  color: #6984a8;
}

body:has(.section-tabs button[data-view="ranking"]) .search-field {
  border: 1px solid #cddff0;
  background: #ffffff;
  color: var(--club-navy);
}

body:has(.section-tabs button[data-view="ranking"]) .search-field input {
  color: var(--club-navy);
}

body:has(.section-tabs button[data-view="ranking"]) .search-field input::placeholder {
  color: #94a8c4;
}

body:has(.section-tabs button[data-view="ranking"]) .list {
  gap: 0;
}

body:has(.section-tabs button[data-view="ranking"]) .list-row {
  min-height: 66px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #e3edf6;
  border-radius: 0;
  background: transparent;
  color: var(--club-navy);
}

body:has(.section-tabs button[data-view="ranking"]) .list li:last-child .list-row {
  border-bottom: 0;
}

body:has(.section-tabs button[data-view="ranking"]) .mini-avatar,
body:has(.section-tabs button[data-view="ranking"]) .activity-icon {
  width: 42px;
  height: 42px;
  border-color: #cde3f5;
  background: #eaf6ff;
  color: #117be9;
}

body:has(.section-tabs button[data-view="ranking"]) .list-row-main strong {
  color: var(--club-navy);
  font-size: 15px;
}

body:has(.section-tabs button[data-view="ranking"]) .list-row-main > span,
body:has(.section-tabs button[data-view="ranking"]) .list-row > time {
  color: #7187a8;
}

body:has(.section-tabs button[data-view="ranking"]) .empty-state {
  min-height: 140px;
  border: 1px solid #d8e8f5;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #fbfdff, #f3f9ff);
  color: #5d789e;
}

body:has(.section-tabs button[data-view="ranking"]) .empty-state strong {
  color: var(--club-navy);
}









@media (max-width: 759px) {
  

  

  body:has(.section-tabs button[data-view="ranking"]) .profile-app {
    padding-top: 12px;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  body:has(.section-tabs button[data-view="ranking"]) .profile-hero {
    padding: 16px;
    border-radius: 20px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .identity-block {
    display: grid;
    grid-template-columns: 112px minmax(0,1fr);
    gap: 14px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .identity-avatar.square {
    width: 112px;
    height: 112px;
    border-radius: 18px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .identity-copy h1 {
    font-size: clamp(23px, 6.4vw, 31px);
  }

  body:has(.section-tabs button[data-view="ranking"]) .identity-meta,
  body:has(.section-tabs button[data-view="ranking"]) .identity-subtitle {
    font-size: 12px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .hero-metrics {
    grid-column: 1 / -1;
    gap: 7px;
    margin-top: 14px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .metric-card {
    min-height: 66px;
    padding: 8px 4px;
    border-radius: 12px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .metric-card strong {
    font-size: 21px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .metric-card span {
    font-size: 9px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .section-tabs {
    margin-top: 10px;
    padding: 4px;
    border-radius: 18px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .section-tabs button {
    min-height: 70px;
    padding: 7px 2px;
    border-radius: 13px;
    font-size: 10px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .section-tabs button::before {
    font-size: 19px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .content-card {
    padding: 14px;
    border-radius: 18px;
  }

  

  
}

@media (max-width: 430px) {
  body:has(.section-tabs button[data-view="ranking"]) .identity-block {
    grid-template-columns: 94px minmax(0,1fr);
    gap: 11px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .identity-avatar.square {
    width: 94px;
    height: 94px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .identity-copy h1 {
    font-size: 22px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .section-tabs button {
    font-size: 9px;
  }

  body:has(.section-tabs button[data-view="ranking"]) .section-tabs button::before {
    font-size: 17px;
  }
}

:root {
  --profile-logout-q: 1;
}

.logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(63, 213, 255, 0.86);
  border-radius: 999px;
  background:
    linear-gradient(145deg, #118fff 0%, #0867ef 100%);
  color: #ffffff;
  box-shadow:
    0 5px 16px rgba(0, 122, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.logout-button:hover {
  background:
    linear-gradient(145deg, #1a9aff 0%, #0a70f3 100%);
}

.logout-button:active {
  transform: translateY(1px);
}

.logout-button:focus-visible {
  outline: 2px solid #68dcff;
  outline-offset: 2px;
}

.logout-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.logout-button[hidden] {
  display: none;
}

@media (max-width: 759px) {
  .logout-button {
    min-width: 66px;
    height: 38px;
    padding-inline: 11px;
    font-size: 10px;
  }
}

@media (max-width: 390px) {
  .logout-button {
    min-width: 60px;
    height: 36px;
    padding-inline: 9px;
    font-size: 9px;
  }
}

:root {
  --venues-club-alignment-s2: 1;
}

body:has(.venues-page) {
  --play-navy: #071b5d;
  --play-blue: #087ff5;
  --play-cyan: #13bfff;
  --play-ice: #eef8ff;
  --play-border: #d7e8f7;
  --play-muted: #58749e;
  color: var(--play-navy);
  background:
    radial-gradient(circle at 12% 4%, rgba(91, 190, 255, 0.16), transparent 28rem),
    var(--play-ice);
}

body:has(.venues-page) .venues-page {
  width: min(100%, 1180px);
  min-height: calc(100svh - 76px);
  margin: 0 auto;
  padding:
    14px
    max(12px, env(safe-area-inset-right))
    calc(112px + env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  color: var(--play-navy);
}

body:has(.venues-page) .play-heading {
  margin: 0 0 12px;
  padding: 18px 16px 16px;
  border: 1px solid var(--play-border);
  border-radius: 22px;
  background: rgba(255,255,255,0.97);
  box-shadow:
    0 14px 34px rgba(23,74,122,0.07),
    0 2px 8px rgba(12,55,99,0.025);
}

body:has(.venues-page) .play-heading h1 {
  margin: 0;
  color: var(--play-navy);
  font-size: clamp(36px, 9vw, 54px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

body:has(.venues-page) .play-heading > p {
  margin: 8px 0 15px;
  color: #5270a0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.31em;
}

body:has(.venues-page) .entity-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body:has(.venues-page) .entity-choice {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--play-border);
  border-radius: 15px;
  color: #3f5e92;
  background: #fff;
  box-shadow: 0 4px 14px rgba(20,74,126,0.035);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

body:has(.venues-page) .entity-choice svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:has(.venues-page) .entity-choice.is-active {
  border-color: rgba(9,158,255,0.72);
  color: #fff;
  background: linear-gradient(135deg,#138df8 0%,#087bf4 46%,#12bdf3 100%);
  box-shadow:
    0 8px 22px rgba(10,128,239,0.2),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

body:has(.venues-page) .sport-filter {
  display: none;
}

body:has(.venues-page) .search-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 48px;
  gap: 8px;
  margin: 0 0 10px;
}

body:has(.venues-page) .search-box,
body:has(.venues-page) .filter-button {
  border: 1px solid var(--play-border);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 4px 14px rgba(20,74,126,0.035);
}

body:has(.venues-page) .search-box {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 15px;
}

body:has(.venues-page) .search-box svg {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  color: var(--play-navy);
}

body:has(.venues-page) .search-box input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--play-navy);
  background: transparent;
  font: inherit;
  font-size: 13px;
}

body:has(.venues-page) .search-box input::placeholder {
  color: #7790ad;
  opacity: 1;
}

body:has(.venues-page) .filter-button {
  display: grid;
  width: 48px;
  min-height: 48px;
  place-items: center;
  padding: 0;
  border-radius: 15px;
  color: var(--play-navy);
}

body:has(.venues-page) .collection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 0 0 10px;
}

body:has(.venues-page) .collection-tabs {
  display: flex;
  min-width: 0;
  gap: 6px;
}

body:has(.venues-page) .collection-tab,
body:has(.venues-page) .near-me {
  min-height: 40px;
  border: 1px solid var(--play-border);
  border-radius: 13px;
  color: #44628d;
  background: #fff;
  box-shadow: 0 4px 12px rgba(20,74,126,0.025);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}

body:has(.venues-page) .collection-tab {
  padding: 0 12px;
}

body:has(.venues-page) .collection-tab.is-active {
  border-color: rgba(12,155,250,0.54);
  color: #fff;
  background: linear-gradient(135deg,#138df8 0%,#087bf4 52%,#12bdf3 100%);
  box-shadow: 0 7px 18px rgba(11,126,235,0.18);
}

body:has(.venues-page) .near-me {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 11px;
  color: #086ce5;
}

body:has(.venues-page) .venue-results {
  display: grid;
  gap: 10px;
  margin-top: 0;
}

body:has(.venues-page) .venue-card {
  display: grid;
  grid-template-columns: clamp(112px,30vw,172px) minmax(0,1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--play-border);
  border-radius: 18px;
  color: var(--play-navy);
  background: #fff;
  box-shadow:
    0 10px 28px rgba(28,76,122,0.065),
    0 2px 7px rgba(20,66,111,0.025);
}

body:has(.venues-page) .venue-visual {
  position: relative;
  min-height: 122px;
  overflow: hidden;
}

body:has(.venues-page) .venue-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 11px 12px;
}

body:has(.venues-page) .venue-title-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 7px;
}

body:has(.venues-page) .venue-title {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--play-navy);
  font-size: clamp(14px,3.8vw,17px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

body:has(.venues-page) .save-button {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  margin: -2px -2px 0 0;
  padding: 0;
  border: 1px solid var(--play-border);
  border-radius: 50%;
  color: #092a68;
  background: #fff;
}

body:has(.venues-page) .venue-location {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 5px;
  margin-top: 5px;
  color: var(--play-muted);
  font-size: 10px;
  line-height: 1.3;
}

body:has(.venues-page) .venue-sports {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

body:has(.venues-page) .venue-sports span,
body:has(.venues-page) .venue-category {
  padding: 3px 6px;
  border: 1px solid #e1edf7;
  border-radius: 999px;
  color: #547196;
  background: #f8fbfe;
  font-size: 8px;
  font-weight: 750;
}

body:has(.venues-page) .venue-category {
  width: fit-content;
  margin-top: 4px;
}

body:has(.venues-page) .venue-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  margin-top: 6px;
  color: #66809f;
  font-size: 9px;
}

body:has(.venues-page) .venue-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body:has(.venues-page) .venue-rating strong {
  color: #0874e8;
}

body:has(.venues-page) .venue-contact-row,
body:has(.venues-page) .venue-card-footer {
  display: none;
}

body:has(.venues-page) .empty-state,
body:has(.venues-page) .loading-state {
  border: 1px solid var(--play-border);
  border-radius: 18px;
  background: #fff;
  color: var(--play-muted);
  box-shadow: 0 10px 26px rgba(28,76,122,0.05);
}











@media (max-width: 520px) {
  body:has(.venues-page) .play-heading {
    padding: 15px 13px 14px;
    border-radius: 20px;
  }

  body:has(.venues-page) .entity-choice {
    min-height: 50px;
    font-size: 12px;
  }

  body:has(.venues-page) .collection-tabs {
    flex: 1 1 auto;
  }

  body:has(.venues-page) .collection-tab {
    flex: 1 1 auto;
    padding-inline: 7px;
  }

  body:has(.venues-page) .venue-card {
    grid-template-columns: 34% minmax(0,1fr);
  }

  body:has(.venues-page) .venue-card-body {
    padding: 9px 10px;
  }

  body:has(.venues-page) .venue-sports,
  body:has(.venues-page) .venue-category {
    display: none;
  }
}

:root {
  --shared-header-lock-u: 1;
}

body {
  color-scheme: light !important;
}

.profile-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(77, 174, 255, 0.28) !important;
  background-color: #032958 !important;
  background-image:
    radial-gradient(
      circle at 83% 0%,
      rgba(0, 179, 255, 0.18),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #073d72 0%,
      #032958 52%,
      #021c46 100%
    ) !important;
  box-shadow:
    0 6px 22px rgba(4, 43, 92, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(20px);
}

.topbar-inner {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: min(100%, 920px) !important;
  min-height: 72px !important;
  margin: 0 auto !important;
  padding:
    10px
    max(18px, env(safe-area-inset-right))
    10px
    max(18px, env(safe-area-inset-left)) !important;
  gap: 12px !important;
}

.brand-link {
  display: block !important;
  min-width: 0 !important;
}

.brand-link img {
  display: block !important;
  width: min(100%, 245px) !important;
  height: 46px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.icon-button,
.menu-button,
.topbar-actions {
  color: #ffffff !important;
}

.icon-button {
  position: relative !important;
  display: grid !important;
  width: 44px !important;
  min-height: 44px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.icon-button svg {
  width: 26px !important;
  height: 26px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.notification-dot {
  top: 7px !important;
  right: 6px !important;
  width: 9px !important;
  height: 9px !important;
  border: 2px solid #05305f !important;
  border-radius: 50% !important;
  background: #ff334f !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08) !important;
}

.logout-button {
  flex: 0 0 auto !important;
}

@media (max-width: 759px) {
  .topbar-inner {
    min-height: 64px !important;
    padding:
      8px
      max(14px, env(safe-area-inset-right))
      8px
      max(14px, env(safe-area-inset-left)) !important;
    gap: 8px !important;
  }

  .brand-link img {
    width: min(100%, 176px) !important;
    height: 36px !important;
  }

  .icon-button {
    width: 40px !important;
    min-height: 40px !important;
  }

  .icon-button svg {
    width: 23px !important;
    height: 23px !important;
  }
}

:root {
  --home-pixel-layout-x: 1;
}

body:has(.home-page) {
  --home-navy: #071b5d;
  --home-blue: #087ff5;
  --home-cyan: #13bfff;
  --home-ice: #edf7ff;
  --home-border: #d6e8f7;
  --home-muted: #58749e;
  color: var(--home-navy);
  background:
    radial-gradient(circle at 18% 2%, rgba(95, 195, 255, 0.14), transparent 28rem),
    var(--home-ice);
}

body:has(.home-page) .profile-atmosphere {
  display: none;
}

.home-page {
  width: min(100%, 900px);
  min-height: calc(100svh - 72px);
  margin: 0 auto;
  padding:
    10px
    max(18px, env(safe-area-inset-right))
    calc(118px + env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

.home-composer {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 56px;
  margin: 0;
  padding: 7px 10px;
  gap: 8px;
  border: 1px solid var(--home-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 10px 30px rgba(27, 74, 122, 0.07),
    0 2px 7px rgba(12, 55, 99, 0.025);
}

.home-composer-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #b8dff7;
  border-radius: 50%;
  color: #0b6ed8;
  background: #e9f7ff;
}

.home-composer-avatar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-composer-prompt {
  min-width: 0;
  min-height: 40px;
  overflow: hidden;
  padding: 0 14px;
  border: 1px solid #cfe3f6;
  border-radius: 999px;
  color: #6480a6;
  background: #f9fcff;
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
}

.home-composer-actions {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.home-composer-actions button {
  display: grid;
  min-width: 46px;
  min-height: 44px;
  place-items: center;
  padding: 2px 8px;
  border: 0;
  border-left: 1px solid #dbe8f4;
  color: #204a85;
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  opacity: 1;
}

.home-composer-actions button:first-child {
  border-left: 0;
}

.home-composer-actions svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-composer-actions span {
  margin-top: 1px;
}

.home-feed-filters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 9px 0 10px;
  padding: 0 0 2px;
  scrollbar-width: none;
}

.home-feed-filters::-webkit-scrollbar {
  display: none;
}

.home-feed-filter {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--home-border);
  border-radius: 12px;
  color: #153e79;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 4px 12px rgba(20, 74, 126, 0.025);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-feed-filter svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-feed-filter.is-active {
  border-color: rgba(12, 155, 250, 0.58);
  color: #ffffff;
  background:
    linear-gradient(135deg, #138df8 0%, #087bf4 52%, #12bdf3 100%);
  box-shadow:
    0 8px 20px rgba(11, 126, 235, 0.2),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.home-feed {
  display: grid;
  gap: 10px;
}

.home-feed-card {
  display: grid;
  grid-template-columns: 42% minmax(0, 58%);
  min-height: 132px;
  overflow: hidden;
  border: 1px solid var(--home-border);
  border-radius: 16px;
  color: var(--home-navy);
  background: #ffffff;
  box-shadow:
    0 10px 28px rgba(28, 76, 122, 0.065),
    0 2px 7px rgba(20, 66, 111, 0.025);
}

.home-feed-media {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  background:
    linear-gradient(145deg, #dff3ff 0%, #dceeff 54%, #edf8ff 100%);
}

.home-feed-media-empty {
  display: grid;
  place-items: center;
  color: #4c86bd;
}

.home-feed-media-empty::before,
.home-feed-media-empty::after {
  position: absolute;
  right: 14%;
  left: 14%;
  height: 1px;
  content: "";
  background: rgba(62, 125, 182, 0.42);
}

.home-feed-media-empty::before {
  top: 45%;
}

.home-feed-media-empty::after {
  top: 59%;
}

.home-feed-media-empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.36;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-feed-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 11px 12px;
}

.home-feed-entity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: #102e6b;
  font-size: 10px;
}

.home-feed-entity-mark {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #0b64c7;
}

.home-feed-entity-mark svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.home-feed-body h1 {
  margin: 8px 0 5px;
  color: #081f60;
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.home-feed-body p {
  margin: 0;
  color: #4f6e98;
  font-size: 10px;
  line-height: 1.4;
}

.home-feed-empty-meta {
  margin-top: 8px;
  color: #0b73df;
  font-size: 9px;
  font-weight: 800;
}

body:has(.home-page) .primary-nav-item[data-app-nav="home"] {
  color: #12c8ff;
  background: rgba(5, 116, 205, 0.2);
  box-shadow: inset 0 0 22px rgba(3, 159, 255, 0.13);
}

@media (max-width: 620px) {
  .home-page {
    padding-top: 10px;
  }

  .home-composer {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 58px;
    padding: 7px 9px;
  }

  .home-composer-avatar {
    width: 38px;
    height: 38px;
  }

  .home-composer-prompt {
    min-height: 40px;
    padding-inline: 13px;
    font-size: 12px;
  }

  .home-composer-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 2px -2px -1px;
    border-top: 1px solid #e0ecf6;
  }

  .home-composer-actions button {
    min-height: 42px;
    border-left: 1px solid #e0ecf6;
  }

  .home-composer-actions button:first-child {
    border-left: 0;
  }

  .home-feed-filter {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 10px;
  }

  .home-feed-filter svg {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 480px) {
  .home-page {
    width: 100%;
    padding:
      8px
      max(10px, env(safe-area-inset-right))
      calc(112px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .home-composer {
    border-radius: 16px;
  }

  .home-feed-filters {
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 9px;
  }

  .home-feed-filter {
    min-height: 38px;
    padding-inline: 11px;
  }

  .home-feed-card {
    grid-template-columns: 42% minmax(0, 58%);
    min-height: 132px;
    border-radius: 16px;
  }

  .home-feed-media {
    min-height: 132px;
  }

  .home-feed-body {
    padding: 10px 11px;
  }
}

@media (max-width: 370px) {
  .home-feed-card {
    grid-template-columns: 38% minmax(0, 62%);
  }

  .home-feed-body h1 {
    font-size: 14px;
  }

  .home-feed-body p {
    font-size: 9px;
  }
}


/* COURTCAST REFERENCE UI SYSTEM — 2026-09-22 */

:root {
  --courtcast-reference-ui: 1;

  --cc-ref-navy-950: #041b45;
  --cc-ref-navy-900: #062b5d;
  --cc-ref-navy-800: #073f75;
  --cc-ref-text: #07185e;
  --cc-ref-muted: #58739e;

  --cc-ref-blue: #087df5;
  --cc-ref-blue-2: #0d91ff;
  --cc-ref-cyan: #12c7ff;

  --cc-ref-bg: #eef8ff;
  --cc-ref-bg-2: #e8f4ff;
  --cc-ref-card: rgba(255, 255, 255, 0.96);
  --cc-ref-border: #d8e8f6;

  --cc-ref-radius-sm: 14px;
  --cc-ref-radius-md: 18px;
  --cc-ref-radius-lg: 22px;
  --cc-ref-radius-xl: 28px;

  --cc-ref-shadow:
    0 10px 30px rgba(21, 72, 120, 0.08),
    0 2px 8px rgba(30, 105, 174, 0.04);

  --cc-ref-shadow-active:
    0 8px 20px rgba(8, 125, 245, 0.20),
    0 0 0 1px rgba(18, 199, 255, 0.20);

  --cc-ref-header:
    linear-gradient(
      135deg,
      #073f75 0%,
      #032b5b 52%,
      #021d46 100%
    );

  --cc-ref-active:
    linear-gradient(
      135deg,
      #138df8 0%,
      #087bf4 48%,
      #12bdf3 100%
    );
}

html {
  background: var(--cc-ref-bg);
}

body {
  color: var(--cc-ref-text);
  background:
    linear-gradient(
      180deg,
      #f7fcff 0%,
      var(--cc-ref-bg) 52%,
      var(--cc-ref-bg-2) 100%
    );
}

.profile-atmosphere {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(20, 174, 255, 0.11),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.42),
      transparent 32%
    );
}

.profile-topbar {
  color: #fff;
  background: var(--cc-ref-header);
  border-bottom:
    1px solid rgba(105, 197, 255, 0.18);
  box-shadow:
    0 8px 24px rgba(2, 29, 70, 0.12);
}

.profile-topbar .topbar-inner {
  min-height: 88px;
  padding-inline:
    max(18px, env(safe-area-inset-left))
    max(18px, env(safe-area-inset-right));
}

.profile-topbar .brand-link img {
  width: min(255px, 43vw);
  max-height: 52px;
  object-fit: contain;
}

.profile-topbar .icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  color: #fff;
  border-radius: 50%;
}

.profile-topbar .icon-button svg {
  stroke-width: 1.8;
}

.profile-topbar .notification-dot {
  background: #ff2347;
  border: 2px solid var(--cc-ref-navy-800);
}

.profile-app,
.home-page,
.venues-page {
  color: var(--cc-ref-text);
}

.panel,
.content-card,
.profile-hero,
.reference-performance-card,
.reference-rating-card,
.home-composer,
.home-feed-card,
.venue-card {
  background: var(--cc-ref-card);
  border:
    1px solid var(--cc-ref-border);
  box-shadow: var(--cc-ref-shadow);
}

.panel,
.content-card,
.profile-hero,
.reference-performance-card,
.reference-rating-card {
  border-radius: var(--cc-ref-radius-lg);
}

.profile-hero {
  overflow: hidden;
}

.profile-hero h1,
.reference-rating-heading h2,
.reference-performance-card h2,
.home-feed-body h1,
.venue-title {
  color: var(--cc-ref-text);
  letter-spacing: -0.025em;
}

.profile-hero p,
.reference-performance-card p,
.reference-rating-card p,
.home-feed-body p,
.venue-location,
.venue-meta {
  color: var(--cc-ref-muted);
}

.section-tabs,
.entity-switch,
.collection-tabs,
.home-feed-filters {
  background: rgba(255, 255, 255, 0.80);
  border:
    1px solid var(--cc-ref-border);
  box-shadow:
    0 6px 18px rgba(25, 83, 136, 0.05);
}

.section-tabs button,
.entity-choice,
.collection-tab,
.home-feed-filter {
  color: #244379;
}

.section-tabs button.is-active,
.entity-choice.is-active,
.collection-tab.is-active,
.home-feed-filter.is-active {
  color: #fff;
  background: var(--cc-ref-active);
  border-color: transparent;
  box-shadow: var(--cc-ref-shadow-active);
}

.reference-hero-avatar,
.club-avatar,
.venue-avatar {
  border-color: #27a8ff;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.96),
    0 7px 20px rgba(7, 125, 245, 0.16);
}

.reference-hero-metric,
.rating-card,
.performance-total,
.club-stat {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fbff 100%
    );
  border:
    1px solid var(--cc-ref-border);
  border-radius: var(--cc-ref-radius-md);
}

.reference-hero-metric.is-rating,
.performance-total.wins {
  background:
    linear-gradient(
      145deg,
      #e5f7ff 0%,
      #f5fbff 100%
    );
  border-color: #8bd9ff;
}

.primary-nav {
  left:
    max(12px, env(safe-area-inset-left));
  right:
    max(12px, env(safe-area-inset-right));
  bottom:
    max(12px, env(safe-area-inset-bottom));

  min-height: 92px;
  padding:
    14px 10px
    calc(12px + env(safe-area-inset-bottom));

  border:
    1px solid rgba(102, 193, 255, 0.34);
  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(5,54,105,.985),
      rgba(2,38,78,.995)
    );

  box-shadow:
    0 16px 38px rgba(1, 28, 65, 0.25),
    inset 0 1px 0 rgba(255,255,255,.12);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.primary-nav-item {
  min-width: 0;
  min-height: 58px;

  color: #bdd3ef;
  border-radius: 18px;

  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.primary-nav-item svg {
  width: 27px;
  height: 27px;
}

.primary-nav-item span {
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.primary-nav-item.is-active {
  color: var(--cc-ref-cyan);
  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(7, 126, 245, .34),
      rgba(7, 126, 245, .10) 58%,
      transparent 72%
    );
  box-shadow:
    inset 0 0 22px rgba(3,159,255,.13);
}

.primary-nav-action {
  width: 72px;
  height: 72px;
  margin-top: -34px;

  color: #fff;

  border:
    2px solid rgba(107, 222, 255, .98);
  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #08bdf4 0%,
      #0772f1 72%
    );

  box-shadow:
    0 8px 24px rgba(0, 115, 255, .34),
    0 0 18px rgba(11, 211, 255, .42),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.primary-nav-action svg {
  width: 36px;
  height: 36px;
}

.primary-nav-action span {
  margin-top: 8px;
  color: #dcecff;
  font-size: 12px;
  white-space: nowrap;
}

body:has(.home-page)
  .primary-nav-item[data-app-nav="home"],

body:has(.reference-player-hero)
  .primary-nav-item[data-app-nav="players"],

body:has(.section-tabs button[data-view="ranking"])
  .primary-nav-item[data-app-nav="clubs"],

body:has(.venues-page)
  .primary-nav-item[data-app-nav="venues"] {
  color: var(--cc-ref-cyan);
}

.home-page {
  background: transparent;
}

.home-composer {
  border-radius: var(--cc-ref-radius-lg);
}

.home-composer-prompt {
  min-height: 48px;
  color: var(--cc-ref-muted);
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fbff
    );
  border:
    1px solid #cee2f4;
  border-radius: 999px;
}

.home-composer-actions button {
  min-height: 44px;
  color: var(--cc-ref-text);
}

.home-feed-filters {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.home-feed-filter {
  min-height: 48px;
  border-radius: var(--cc-ref-radius-sm);
}

.home-feed-card {
  overflow: hidden;
  border-radius: var(--cc-ref-radius-md);
}

.reference-player-hero {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(248,252,255,.97)
    );
}

.reference-performance-card,
.reference-rating-card {
  border-radius: var(--cc-ref-radius-lg);
}

.performance-total.pending {
  background:
    linear-gradient(
      145deg,
      #fff7df,
      #fffdf6
    );
  border-color: #ffd264;
}

body:has(.section-tabs button[data-view="ranking"]) {
  --club-navy: var(--cc-ref-text);
  --club-blue: var(--cc-ref-blue);
  --club-cyan: var(--cc-ref-cyan);
}

body:has(.venues-page) {
  --play-navy: var(--cc-ref-text);
  --play-blue: var(--cc-ref-blue);
  --play-cyan: var(--cc-ref-cyan);
}

body:has(.venues-page) .play-heading h1 {
  color: var(--cc-ref-text);
  letter-spacing: -0.045em;
}

body:has(.venues-page) .search-box,
body:has(.venues-page) .filter-button,
body:has(.venues-page) .near-me {
  background: #fff;
  border:
    1px solid var(--cc-ref-border);
  box-shadow:
    0 5px 16px rgba(28, 76, 122, 0.045);
}

body:has(.venues-page) .venue-card {
  border-radius: var(--cc-ref-radius-md);
}

body:has(.venues-page) .venue-visual {
  border-radius: var(--cc-ref-radius-sm);
  overflow: hidden;
}

body:has(.venues-page) .save-button {
  color: var(--cc-ref-text);
  background: #fff;
  border:
    1px solid var(--cc-ref-border);
}

@media (max-width: 620px) {
  .profile-topbar .topbar-inner {
    min-height: 78px;
    padding-inline: 12px;
  }

  .profile-topbar .brand-link img {
    width: min(205px, 45vw);
  }

  .profile-topbar .icon-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .primary-nav {
    left: 6px;
    right: 6px;
    border-radius: 28px;
  }

  .primary-nav-item span,
  .primary-nav-action span {
    font-size: 11px;
  }

  .primary-nav-action {
    width: 66px;
    height: 66px;
  }
}

@media (max-width: 390px) {
  .profile-topbar .brand-link img {
    width: min(174px, 43vw);
  }

  .primary-nav-item span,
  .primary-nav-action span {
    font-size: 10px;
  }

  .primary-nav-action {
    width: 62px;
    height: 62px;
  }
}


/* COURTCAST ADD MATCH ROUTE — 2026-09-22 */

.add-match-page {
  width: min(100%, 760px);
  margin: 0 auto;
  padding:
    30px 18px
    calc(145px + env(safe-area-inset-bottom));
}

.add-match-card {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 6vw, 42px);
  text-align: center;
}

.add-match-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  color: #fff;
  border: 2px solid rgba(107, 222, 255, .98);
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      var(--cc-ref-cyan),
      var(--cc-ref-blue)
    );
  box-shadow:
    0 12px 28px rgba(0, 115, 255, .22);
}

.add-match-mark svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.add-match-copy {
  display: grid;
  gap: 8px;
}

.add-match-copy h1 {
  margin: 0;
  color: var(--cc-ref-text);
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1;
  letter-spacing: -.04em;
}

.add-match-copy p {
  margin: 0;
  color: var(--cc-ref-muted);
  line-height: 1.55;
}

.add-match-status {
  display: grid;
  gap: 6px;
  padding: 18px;
  text-align: left;
  color: var(--cc-ref-text);
  border: 1px solid var(--cc-ref-border);
  border-radius: var(--cc-ref-radius-md);
  background:
    linear-gradient(
      180deg,
      #fff,
      #f7fbff
    );
}

.add-match-status span {
  color: var(--cc-ref-muted);
  line-height: 1.45;
}

@media (max-width: 620px) {
  .add-match-page {
    padding-inline: 12px;
    padding-top: 22px;
  }

  .add-match-card {
    padding: 24px 18px;
  }
}


/* COURTCAST SHARED SHELL LOCK — 2026-09-22 */

/*
  Header and primary navigation are application-shell components.
  Page-specific layouts must not change their geometry.
  The Home tab's header and dock are the source of truth; these rules
  apply on every page that renders the shell's .primary-nav.
*/

/* Reserve the scrollbar lane so short and long tabs centre the shell alike. */
html:has(.primary-nav) {
  scrollbar-gutter: stable;
}

body:has(.primary-nav) .profile-topbar {
  position: relative;
  z-index: 90;
  width: 100%;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #073f75 0%,
      #032b5b 52%,
      #021d46 100%
    );
  border-bottom:
    1px solid rgba(105,197,255,.18);
  box-shadow:
    0 8px 24px rgba(2,29,70,.12);
}

body:has(.primary-nav) .topbar-inner {
  display: grid;
  grid-template-columns:
    42px minmax(0,1fr) auto;
  align-items: center;
  width: min(100%, 900px);
  min-height: 68px;
  margin: 0 auto;
  padding:
    0 max(16px,env(safe-area-inset-right))
    0 max(16px,env(safe-area-inset-left));
  gap: 10px;
  box-sizing: border-box;
}

body:has(.primary-nav) .brand-link {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
}

body:has(.primary-nav) .brand-link img {
  display: block;
  width: min(190px,42vw);
  max-width: 100%;
  max-height: 46px;
  object-fit: contain;
  object-position: left center;
}

body:has(.primary-nav) .icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: transparent;
}

body:has(.primary-nav) .icon-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:has(.primary-nav) .topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

body:has(.primary-nav) .notification-dot {
  background: #ff2347;
  border: 2px solid #073f75;
}

/*
  Canonical dock:
  Home | Players | + | Clubs | Venues
*/

body:has(.primary-nav) .primary-nav {
  position: fixed;
  z-index: 100;
  right: max(12px,env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: max(12px,env(safe-area-inset-left));

  display: grid;
  grid-template-columns:
    1fr 1fr 1.12fr 1fr 1fr;

  width: auto;
  max-width: 760px;
  height: 88px;
  min-height: 88px;
  margin: 0 auto;
  padding: 8px 8px 7px;

  box-sizing: border-box;

  border:
    1px solid rgba(82,183,255,.52);
  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(5,54,105,.99),
      rgba(2,38,78,.995)
    );

  box-shadow:
    0 16px 36px rgba(0,43,91,.25),
    inset 0 1px 0 rgba(255,255,255,.14);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

body:has(.primary-nav) .primary-nav-item {
  display: flex;
  min-width: 0;
  min-height: 68px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  padding: 4px 2px;

  border-radius: 20px;

  color: #b8d2ed;
  background: transparent;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;

  box-sizing: border-box;
}

body:has(.primary-nav) .primary-nav-item svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:has(.primary-nav) .primary-nav-item span {
  margin: 0;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body:has(.primary-nav) .primary-nav-item.is-active {
  color: #12c8ff;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(5,116,205,.28),
      rgba(5,116,205,.14) 62%,
      transparent 75%
    );

  box-shadow:
    inset 0 0 22px rgba(3,159,255,.13);
}






@media (max-width: 620px) {
  body:has(.primary-nav) .topbar-inner {
    min-height: 68px;
    padding-inline: 12px;
    gap: 7px;
  }

  body:has(.primary-nav) .brand-link img {
    width: min(188px,43vw);
    max-height: 44px;
  }

  body:has(.primary-nav) .icon-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  body:has(.primary-nav) .primary-nav {
    right: 7px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 7px;

    height: 86px;
    min-height: 86px;

    padding: 7px 6px 6px;

    border-radius: 27px;
  }

  body:has(.primary-nav) .primary-nav-item {
    min-height: 66px;
    gap: 4px;
  }

  body:has(.primary-nav) .primary-nav-item svg {
    width: 24px;
    height: 24px;
  }

  body:has(.primary-nav) .primary-nav-item span {
    font-size: 10px;
  }



}

@media (max-width: 390px) {
  body:has(.primary-nav) .brand-link img {
    width: min(168px,42vw);
  }

  body:has(.primary-nav) .primary-nav-item span,
}

/* Centre dock action: Open Play. Logo + label are one stacked group,
   centred horizontally and vertically in the bar like the other tabs.
   The CourtCast-OP logo has its own blue ring, so no circle is drawn. */
body:has(.primary-nav) .primary-nav-action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  justify-self: center;
  align-self: center;

  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #dcecff;
  text-decoration: none;
  box-sizing: border-box;
}

body:has(.primary-nav) .primary-nav-action picture {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0,111,244,.32);
}

body:has(.primary-nav) .primary-nav-action img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body:has(.primary-nav) .primary-nav-action span {
  position: static;
  transform: none;
  margin: 0;
  color: #dcecff;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 620px) {
  body:has(.primary-nav) .primary-nav-action picture {
    width: 38px;
    height: 38px;
  }

  body:has(.primary-nav) .primary-nav-action span {
    font-size: 10px;
  }
}


/* COURTCAST PRIMARY DOCK POSITION RESET — 2026-09-22 */

/*
  Legacy Player / Club shells previously centered the dock with
  left:50% + translateX(-50%). The shared shell owns positioning now.
  Explicitly reset every horizontal positioning property so no legacy
  transform can survive the cascade.
*/

body:has(.primary-nav) .primary-nav {
  position: fixed !important;

  top: auto !important;

  left:
    max(7px, env(safe-area-inset-left)) !important;

  right:
    max(7px, env(safe-area-inset-right)) !important;

  bottom:
    calc(8px + env(safe-area-inset-bottom)) !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 760px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  transform: none !important;
  translate: none !important;

  inset-inline-start:
    max(7px, env(safe-area-inset-left)) !important;

  inset-inline-end:
    max(7px, env(safe-area-inset-right)) !important;

  box-sizing: border-box !important;
}

/*
  Also prevent individual nav items from carrying transforms inherited
  from older page-specific nav animation/layout experiments.
*/

body:has(.primary-nav) .primary-nav-item {
  transform: none !important;
  translate: none !important;
}

body:has(.primary-nav) .primary-nav-action {
  transform: none !important;
  translate: none !important;
}


/* COURTCAST STAGE 5 OWNER PROFILE — 2026-09-23 */

.player-profile-status,
.player-profile-demographics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.registration-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(171, 200, 232, 0.28);
  border-radius: 999px;
  color: var(--cc-text-muted);
  background: rgba(2, 21, 51, 0.38);
  font-size: 12px;
  font-weight: 700;
}

.player-profile-location,
.player-profile-demographics {
  margin: 7px 0 0;
  color: var(--cc-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.profile-edit-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(55, 169, 255, 0.5);
  border-radius: 13px;
  background: rgba(4, 34, 71, 0.56);
  color: #eff8ff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.profile-edit-dialog {
  width: min(calc(100% - 24px), 620px);
  max-height: 90svh;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(55, 169, 255, 0.5);
  border-radius: 20px;
  background: #062750;
  color: #f7fbff;
}

.profile-edit-dialog::backdrop {
  background: rgba(0, 10, 30, 0.72);
  backdrop-filter: blur(8px);
}

.profile-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  padding: 20px;
}

.profile-edit-heading,
.profile-edit-message,
.profile-edit-actions,
.profile-edit-form > label:nth-of-type(1),
.profile-edit-form > label:nth-of-type(8),
.profile-edit-form > label:nth-of-type(9) {
  grid-column: 1 / -1;
}

.profile-edit-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-edit-heading h2 {
  margin: 0;
}

.profile-edit-heading button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 24px;
}

.profile-edit-form label {
  display: grid;
  gap: 6px;
  color: #b9d0ea;
  font-size: 12px;
  font-weight: 700;
}

.profile-edit-form input,
.profile-edit-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid rgba(91,164,224,0.42);
  border-radius: 11px;
  background: rgba(2,25,58,0.72);
  color: #fff;
  font: inherit;
}

.profile-edit-form textarea {
  min-height: 110px;
  resize: vertical;
}

.profile-edit-message {
  min-height: 20px;
  margin: 0;
  color: #ffd38a;
  font-size: 13px;
}

.profile-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.profile-edit-actions button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(171,200,232,0.3);
  border-radius: 11px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.profile-edit-actions button[type="submit"] {
  border-color: rgba(70,230,255,0.8);
  background: linear-gradient(135deg, #00bfe8, #1668ef);
}

@media (max-width: 640px) {
  .identity-block {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .profile-edit-button {
    width: 100%;
  }

  .profile-edit-form {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .profile-edit-heading,
  .profile-edit-message,
  .profile-edit-actions,
  .profile-edit-form > label:nth-of-type(1),
  .profile-edit-form > label:nth-of-type(8),
  .profile-edit-form > label:nth-of-type(9) {
    grid-column: auto;
  }
}


/* COURTCAST STAGE 5 OWNER PROFILE CORRECTION — 2026-09-23 */

.canonical-player-hero .identity-block {
  align-items: flex-start;
}

.profile-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: max-content;
  max-width: max-content;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  gap: 5px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.profile-edit-icon {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
}

.profile-edit-heading {
  align-items: flex-start;
}

.profile-edit-heading > div {
  min-width: 0;
}

.profile-edit-heading .eyebrow {
  margin-bottom: 5px;
}

.profile-edit-intro {
  margin: 6px 0 0;
  color: var(--cc-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.profile-edit-privacy {
  grid-column: 1 / -1;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(91, 164, 224, 0.28);
  border-radius: 11px;
  color: var(--cc-text-muted);
  background: rgba(2, 25, 58, 0.42);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .canonical-player-hero .identity-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) max-content;
    align-items: start;
    column-gap: 10px;
  }

  .canonical-player-hero .profile-edit-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: max-content;
    max-width: max-content;
    min-width: 0;
    min-height: 32px;
    height: 32px;
    margin: 0;
    padding: 0 9px;
    gap: 4px;
    border-radius: 9px;
    font-size: 10px;
    line-height: 1;
  }

  .canonical-player-hero .profile-edit-icon {
    font-size: 12px;
  }
}

@media (min-width: 641px) and (max-width: 932px) {
  .canonical-player-hero .identity-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) max-content;
    align-items: start;
    column-gap: 12px;
  }

  .canonical-player-hero .profile-edit-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: max-content;
    max-width: max-content;
    min-height: 34px;
    height: 34px;
    margin: 0;
    padding: 0 10px;
    gap: 5px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1;
  }

  .canonical-player-hero .profile-edit-icon {
    font-size: 13px;
  }
}

@media (orientation: landscape) and (max-width: 932px) {
  .canonical-player-hero .profile-edit-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: max-content;
    max-width: max-content;
    min-width: 0;
    min-height: 34px;
    height: 34px;
    margin: 0;
    padding: 0 10px;
    gap: 5px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1;
  }

  .canonical-player-hero .profile-edit-icon {
    font-size: 13px;
  }
}

/* COURTCAST STAGE 5 EDIT PROFILE SIZE/POSITION LOCK — 2026-09-23 */


/* COURTCAST STAGE 5 EDIT PROFILE FORM PORTRAIT LOCK — 2026-09-23 */

.profile-edit-dialog {
  width: min(calc(100% - 28px), 760px);
  max-width: 760px;
  max-height: calc(100% - 28px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(133, 187, 235, 0.62);
  border-radius: 24px;
  background: rgba(249, 253, 255, 0.98);
  color: #062262;
  box-shadow: 0 22px 60px rgba(0, 59, 126, 0.2);
}

.profile-edit-dialog::backdrop {
  background: rgba(0, 31, 74, 0.32);
  backdrop-filter: blur(5px);
}

.profile-edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 16px;
  padding: 26px;
}

.profile-edit-heading,
.profile-edit-photo-section,
.profile-edit-field--full,
.profile-edit-privacy,
.profile-edit-message,
.profile-edit-actions {
  grid-column: 1 / -1;
}

.profile-edit-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.profile-edit-heading h2 {
  margin: 0;
  color: #071b63;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.profile-edit-intro {
  margin: 7px 0 0;
  color: #6280b7;
  font-size: 15px;
  line-height: 1.35;
}

.profile-edit-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #b9d8f5;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: #061d62;
  font: inherit;
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
}

.profile-edit-photo-section {
  min-width: 0;
}

.profile-edit-photo-section h3 {
  margin: 3px 0 11px;
  color: #0b2b70;
  font-size: 15px;
}

.profile-edit-photo-row {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.profile-edit-photo-avatar {
  position: relative;
  width: 98px;
  height: 98px;
  border: 2px solid #00bdf2;
  border-radius: 50%;
  background: #e5f4ff;
  overflow: visible;
}

.profile-edit-photo-avatar img,
.profile-edit-photo-avatar > span:first-child {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.profile-edit-photo-avatar img {
  display: block;
  object-fit: cover;
}

.profile-edit-photo-avatar > span:first-child {
  display: grid;
  place-items: center;
  color: #0a3477;
  font-size: 24px;
  font-weight: 800;
}

.profile-edit-camera-badge {
  position: absolute;
  right: -5px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #dff5ff;
  border-radius: 50%;
  background: linear-gradient(145deg, #1096ff, #0074ec);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 5px 14px rgba(0, 119, 232, 0.25);
}

.profile-edit-photo-help {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #c0dcf5;
  border-radius: 16px;
  background: rgba(248, 252, 255, 0.8);
}

.profile-edit-info-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0b7cf5;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.profile-edit-photo-help strong,
.profile-edit-photo-help span {
  display: block;
}

.profile-edit-photo-help strong {
  color: #0b4fc8;
  font-size: 13px;
  line-height: 1.35;
}

.profile-edit-photo-help div > span {
  margin-top: 7px;
  color: #6c83b4;
  font-size: 12px;
}

.profile-edit-field {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #13377f;
  font-size: 13px;
  font-weight: 650;
}

.profile-edit-field > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-edit-field b {
  color: #ee535e;
  font-weight: 800;
}

.profile-edit-field input,
.profile-edit-field select,
.profile-edit-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #bedbf5;
  border-radius: 13px;
  outline: none;
  background: rgba(255, 255, 255, 0.84);
  color: #071e66;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  box-shadow: none;
}

.profile-edit-field select {
  appearance: auto;
}

.profile-edit-field textarea {
  min-height: 104px;
  padding-top: 13px;
  padding-bottom: 28px;
  resize: vertical;
  line-height: 1.4;
}

.profile-edit-counted-input {
  position: relative;
  min-width: 0;
}

.profile-edit-counted-input small {
  position: absolute;
  right: 12px;
  bottom: 9px;
  color: #758bbb;
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
}

.profile-edit-counted-input:not(.profile-edit-counted-input--textarea) input {
  padding-right: 56px;
}

.profile-edit-counted-input--textarea small {
  bottom: 10px;
}

.profile-edit-privacy {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d6e7f6;
  border-radius: 12px;
  background: rgba(240, 248, 255, 0.7);
  color: #6880ad;
  font-size: 11px;
  line-height: 1.4;
}

.profile-edit-message {
  min-height: 18px;
  margin: -3px 0 0;
  color: #bf6500;
  font-size: 12px;
}

.profile-edit-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  justify-self: end;
  width: min(100%, 390px);
  gap: 10px;
}

.profile-edit-actions button {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #b9d8f5;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.85);
  color: #244c91;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
}

.profile-edit-actions button[type="submit"] {
  border-color: #008df5;
  background: linear-gradient(135deg, #11aaf8, #0674f6);
  color: #fff;
}

@media (max-width: 640px) {
  .profile-edit-dialog {
    width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    border-radius: 21px;
  }

  .profile-edit-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 11px 9px;
    padding: 18px 16px;
  }

  .profile-edit-heading,
  .profile-edit-photo-section,
  .profile-edit-field--full,
  .profile-edit-privacy,
  .profile-edit-message,
  .profile-edit-actions {
    grid-column: 1 / -1 !important;
  }

  .profile-edit-heading h2 {
    font-size: 29px;
  }

  .profile-edit-intro {
    font-size: 13px;
  }

  .profile-edit-close {
    width: 40px;
    height: 40px;
    font-size: 25px;
  }

  .profile-edit-photo-row {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
  }

  .profile-edit-photo-avatar {
    width: 78px;
    height: 78px;
  }

  .profile-edit-camera-badge {
    width: 30px;
    height: 30px;
  }

  .profile-edit-photo-help {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
    padding: 11px;
    border-radius: 13px;
  }

  .profile-edit-info-icon {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .profile-edit-photo-help strong {
    font-size: 11px;
  }

  .profile-edit-photo-help div > span {
    margin-top: 4px;
    font-size: 10px;
  }

  .profile-edit-field {
    grid-column: auto !important;
    gap: 5px;
    font-size: 11px;
  }

  .profile-edit-field--full {
    grid-column: 1 / -1 !important;
  }

  .profile-edit-field input,
  .profile-edit-field select,
  .profile-edit-field textarea {
    min-height: 44px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 11px;
    font-size: 16px;
  }

  .profile-edit-field textarea {
    min-height: 88px;
    padding-top: 11px;
    padding-bottom: 25px;
  }

  .profile-edit-actions {
    width: 100%;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: 8px;
  }

  .profile-edit-actions button {
    min-height: 44px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .profile-edit-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 9px 7px;
    padding: 15px 12px;
  }

  .profile-edit-heading h2 {
    font-size: 25px;
  }

  .profile-edit-photo-row {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 9px;
  }

  .profile-edit-photo-avatar {
    width: 68px;
    height: 68px;
  }

  .profile-edit-photo-help {
    padding: 9px;
  }

  .profile-edit-photo-help strong {
    font-size: 10px;
  }

  .profile-edit-photo-help div > span {
    font-size: 9px;
  }

  .profile-edit-field {
    grid-column: auto !important;
    font-size: 10px;
  }

  .profile-edit-field--full {
    grid-column: 1 / -1 !important;
  }

  .profile-edit-field input,
  .profile-edit-field select,
  .profile-edit-field textarea {
    min-width: 0;
    min-height: 42px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 16px;
  }

  .profile-edit-counted-input:not(.profile-edit-counted-input--textarea) input {
    padding-right: 43px;
  }

  .profile-edit-counted-input small {
    right: 8px;
    font-size: 9px;
  }

  .profile-edit-actions {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  }
}


/* COURTCAST STAGE 5 AVATAR UPLOAD — 2026-09-23 */
.profile-edit-photo-avatar {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  padding: 0;
  font: inherit;
  line-height: normal;
  text-align: center;
  cursor: pointer;
}

.profile-edit-photo-avatar:focus-visible {
  outline: 3px solid rgba(0, 145, 255, 0.35);
  outline-offset: 4px;
}

.profile-edit-photo-avatar:hover .profile-edit-camera-badge,
.profile-edit-photo-avatar:focus-visible .profile-edit-camera-badge {
  transform: scale(1.06);
}

.profile-edit-camera-badge {
  pointer-events: none;
  transition: transform 120ms ease;
}

.profile-edit-photo-input {
  display: none;
}


/* COURTCAST STAGE 5 PROFILE STATUS PILL SIZE LOCK — 2026-09-23 */
.player-profile-status .claim-pill,
.player-profile-status .registration-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}



/* COURTCAST STAGE 5 PROFILE COMPLETION STATUS — 2026-09-23 */
.player-profile-status .claim-pill--claimed,
.player-profile-status .registration-pill--complete {
  border-color: #86d5a3;
  background: #eaf8ef;
  color: #147a3f;
}

.player-profile-status .registration-pill--incomplete {
  border-color: #f3aaa4;
  background: #fff0ef;
  color: #b42318;
}

.profile-edit-photo-section h3 b {
  color: #ef4444;
  font-weight: 800;
}


/* COURTCAST RESPONSIVE PLAYER HERO GRID — 2026-09-23 */

.canonical-player-hero {
  --hero-gap: clamp(4px, 1.15vw, 7px);

  /*
   * These values are initialized here,
   * then replaced with the exact measured
   * avatar dimensions by profile.js.
   */
  --hero-avatar-px: 88px;
  --hero-name-px: 25px;
  --hero-detail-px: 13px;
  --hero-detail-gap-px: 4px;
  --hero-ribbon-px: 17px;
}

/*
 * ============================================================
 * SHARED FOUR-COLUMN CONTRACT
 * ============================================================
 *
 * ROW 1:
 *   col 1   = avatar, centered
 *   col 2-3 = player identity, left
 *   col 4   = Edit Profile, right
 *
 * ROW 2:
 *   col 1   = Sports
 *   col 2   = Matches
 *   col 3   = Clubs
 *   col 4   = Venues
 *
 * Both rows MUST use the same tracks and the same gap.
 */

.canonical-player-hero .identity-block,
.canonical-player-hero .hero-metrics {
  display: grid !important;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  column-gap: var(--hero-gap) !important;
}

/*
 * ============================================================
 * ROW 1
 * ============================================================
 */

.canonical-player-hero .identity-block {
  position: relative;

  grid-template-rows:
    var(--hero-avatar-px) !important;

  align-items: start !important;

  min-width: 0;
}

/*
 * COLUMN 1
 *
 * The avatar width is NOT independently breakpoint-sized.
 * It is derived directly from the available width of column 1.
 *
 * Five pixels of breathing room remain at each side.
 * 88px is only the maximum reference ceiling.
 */

.canonical-player-hero .identity-avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;

  justify-self: center !important;
  align-self: start !important;

  width:
    min(
      88px,
      calc(100% - 10px)
    ) !important;

  max-width: 88px !important;

  height: auto !important;
  aspect-ratio: 1 / 1;

  box-sizing: border-box;
}

/*
 * Keep the actual image tied to the circular
 * avatar box produced above.
 */

.canonical-player-hero .identity-avatar img {
  width: 100% !important;
  height: 100% !important;

  aspect-ratio: 1 / 1;

  object-fit: cover;
}

/*
 * ============================================================
 * COLUMNS 2 + 3
 *
 * Player identity receives EXACTLY the height measured
 * from the avatar.
 *
 * It is forbidden from expanding Row 1.
 * ============================================================
 */

.canonical-player-hero .identity-copy {
  grid-column: 2 / 4 !important;
  grid-row: 1 !important;

  justify-self: stretch !important;
  align-self: start !important;

  min-width: 0 !important;

  height:
    var(--hero-avatar-px) !important;

  min-height: 0 !important;

  max-height:
    var(--hero-avatar-px) !important;

  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;

  padding: 0 !important;

  overflow: hidden !important;

  text-align: left !important;
}

/*
 * Player name + verification ribbon.
 */

.canonical-player-hero
.player-profile-name-row {
  display: flex;

  align-items: center;

  min-width: 0;

  gap:
    clamp(
      3px,
      var(--hero-detail-gap-px),
      5px
    );

  flex: 0 0 auto;
}

.canonical-player-hero
.player-profile-name-row h1 {
  min-width: 0;

  margin: 0 !important;

  color: #061d62;

  font-size:
    var(--hero-name-px) !important;

  font-weight: 800;

  line-height: 1 !important;

  letter-spacing: -0.035em;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

/*
 * Checked ribbon follows the same measured
 * avatar scale.
 */

.canonical-player-hero
.player-name-ribbon {
  display: inline-flex;

  width:
    var(--hero-ribbon-px);

  height:
    var(--hero-ribbon-px);

  flex:
    0 0 var(--hero-ribbon-px);

  color: #2563eb;
}

.canonical-player-hero
.player-name-ribbon svg {
  display: block;

  width: 100%;
  height: 100%;
}

.canonical-player-hero
.player-name-ribbon--complete {
  color: #16a34a;
}

.canonical-player-hero
.player-name-ribbon--incomplete {
  color: #dc2626;
}

/*
 * Identity detail lines.
 *
 * Font size and vertical spacing are calculated
 * from actual avatar height by ResizeObserver.
 *
 * Each line is constrained to one line so it can
 * NEVER make Row 1 taller than the avatar.
 */

.canonical-player-hero
.player-profile-location,
.canonical-player-hero
.player-profile-demographics,
.canonical-player-hero
.identity-subtitle {
  min-width: 0;

  margin:
    var(--hero-detail-gap-px)
    0
    0 !important;

  color: #45669b;

  font-size:
    var(--hero-detail-px) !important;

  line-height: 1.12 !important;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  flex: 0 0 auto;
}

.canonical-player-hero
.player-profile-demographics {
  display: flex !important;

  flex-wrap: nowrap !important;

  align-items: center;

  gap:
    clamp(
      3px,
      var(--hero-detail-gap-px),
      5px
    ) !important;

  overflow: hidden;
}

.canonical-player-hero
.player-profile-demographics > span {
  flex: 0 0 auto;
}

/*
 * ============================================================
 * COLUMN 4
 * ============================================================
 */

.canonical-player-hero
.profile-edit-button {
  grid-column: 4 !important;
  grid-row: 1 !important;

  justify-self: end !important;
  align-self: start !important;

  width: auto !important;
  max-width: 100%;

  min-height: 31px;

  padding: 0 10px !important;

  border:
    1px solid #d3e2ef !important;

  border-radius: 8px !important;

  background: #ffffff !important;

  color: #061d62 !important;

  font-size:
    clamp(
      9px,
      var(--hero-detail-px),
      11px
    ) !important;

  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

  box-shadow:
    0 2px 7px
    rgba(4, 39, 90, 0.08) !important;
}

/*
 * Public/non-owner profile:
 * when Edit Profile is absent,
 * identity may use column 4 as well.
 */

.canonical-player-hero
.identity-block:not(:has(.profile-edit-button))
.identity-copy {
  grid-column: 2 / 5 !important;
}

/*
 * ============================================================
 * ROW 2
 *
 * Same four tracks.
 * No custom per-card widths.
 * ============================================================
 */

.canonical-player-hero
.hero-metrics {
  margin-top:
    clamp(
      7px,
      var(--hero-detail-gap-px),
      10px
    ) !important;

  row-gap: 0 !important;
}

.canonical-player-hero
.metric-card {
  width: auto !important;

  min-width: 0 !important;

  min-height: 54px;

  padding: 6px 4px !important;

  border:
    1px solid #cfe5f7 !important;

  border-radius: 8px !important;

  background:
    rgba(
      255,
      255,
      255,
      0.84
    ) !important;

  box-shadow: none !important;
}

.canonical-player-hero
.metric-card:first-child {
  border-color:
    #bfe2fb !important;

  background:
    #eaf7ff !important;
}

.canonical-player-hero
.metric-card strong {
  color: #061d62;

  font-size:
    clamp(
      16px,
      calc(
        var(--hero-detail-px)
        + 5px
      ),
      18px
    ) !important;

  line-height: 1 !important;
}

.canonical-player-hero
.metric-card span {
  margin-top: 5px;

  color: #5e7198;

  font-size:
    clamp(
      9px,
      calc(
        var(--hero-detail-px)
        - 2px
      ),
      10px
    ) !important;

  line-height: 1 !important;
}

/*
 * ============================================================
 * RESPONSIVE POLICY
 *
 * We do NOT assign independent avatar sizes at breakpoints.
 *
 * Only layout breathing room changes.
 *
 * Avatar continues to derive from column 1.
 * Identity continues to derive from avatar.
 * ============================================================
 */

@media (max-width: 430px) {
  .canonical-player-hero {
    --hero-gap: 5px;
  }

  .canonical-player-hero
  .profile-edit-button {
    padding:
      0 8px !important;
  }
}

@media (max-width: 360px) {
  .canonical-player-hero {
    --hero-gap: 4px;
  }

  .canonical-player-hero
  .profile-edit-button {
    padding:
      0 6px !important;
  }
}


/* COURTCAST HOME FEED EVENT CARD — DE LEONS CUP 2026 */

.home-feed-card[hidden] {
  display: none !important;
}

.home-feed-card--event {
  display: grid;
  grid-template-columns: 1fr !important;
  overflow: hidden;
}

.home-feed-event-media {
  position: relative;
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 1024 / 509;
  overflow: hidden;
  background: #061a51;
}

.home-feed-event-media picture,
.home-feed-event-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.home-feed-event-media img {
  object-fit: cover;
}

.home-feed-event-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 999px;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      rgba(8,125,245,.96),
      rgba(18,190,243,.96)
    );
  box-shadow:
    0 4px 14px rgba(0,27,75,.26);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.home-feed-event-body {
  justify-content: flex-start !important;
  padding: 13px 14px 15px !important;
}

.home-feed-event-heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.home-feed-event-heading strong {
  color: #102e6b;
  font-size: 11px;
  font-weight: 800;
}

.home-feed-event-heading span {
  color: #6982a5;
  font-size: 9px;
  font-weight: 600;
}

.home-feed-entity-mark--tournament {
  background:
    linear-gradient(
      135deg,
      #087df5,
      #13bfff
    );
}

.home-feed-card--event .home-feed-body h1 {
  margin: 9px 0 10px;
  font-size:
    clamp(
      19px,
      4.6vw,
      25px
    );
  line-height: 1.06;
}

.home-feed-event-details {
  display: grid;
  gap: 7px;
}

.home-feed-event-detail {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
  color: #49688f;
  font-size: 11px;
  line-height: 1.3;
}

.home-feed-event-detail > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 1px;
  fill: none;
  stroke: #087df5;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-feed-event-detail > span {
  min-width: 0;
}

.home-feed-event-detail strong {
  display: block;
  color: #173e79;
  font-size: 11px;
  font-weight: 800;
}

.home-feed-event-detail small {
  display: block;
  margin-top: 1px;
  color: #6982a5;
  font-size: 10px;
}

@media (min-width: 700px) {
  .home-feed-card--event {
    grid-template-columns:
      minmax(0, 56%)
      minmax(0, 44%) !important;
  }

  .home-feed-event-media {
    height: 100%;
    aspect-ratio: auto;
  }

  .home-feed-event-body {
    justify-content: center !important;
    padding:
      18px
      20px !important;
  }
}


/* ==========================================================================
   COURTCAST SHARED TABLET SHELL REPAIR 2026-09-25

   Header inner shell : 900px
   Main content       : 820px (defined in page modules)
   Bottom navigation : 760px
   ========================================================================== */

:root {
  --courtcast-tablet-header-max: 900px;
  --courtcast-tablet-content-max: 820px;
  --courtcast-tablet-nav-max: 760px;
}

@media (min-width: 600px) and (min-height: 600px) {

  /* Full-width navy header; constrained contents only. */
  body .profile-topbar .profile-topbar-inner,
  body .profile-topbar .topbar-inner {
    width: min(calc(100% - 32px), 900px) !important;
    max-width: 900px !important;

    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Shared floating bottom navigation. */
  body .primary-nav {
    right: 0 !important;
    left: 0 !important;

    width: min(calc(100% - 32px), 760px) !important;
    max-width: 760px !important;

    margin-right: auto !important;
    margin-left: auto !important;

    transform: none !important;
  }
}


/* ==========================================================================
   COURTCAST MOBILE SHELL — COMPACT PWA 2026-09-26

   Goal:
   - preserve iOS safe areas
   - reduce CourtCast header height
   - reduce floating bottom dock height
   - give page/tab content more vertical room
   - tablet 900 / 820 / 760 system remains unchanged
   ========================================================================== */

@media (max-width: 599px) {

  /* ------------------------------------------------------------------------
     TOP APPLICATION HEADER

     iOS status-bar safe area is intentionally untouched.
     We only compact the CourtCast row beneath it.
     ------------------------------------------------------------------------ */

  body:has(.primary-nav) .topbar-inner {
    min-height: 56px !important;

    padding:
      4px
      max(10px, env(safe-area-inset-right))
      4px
      max(10px, env(safe-area-inset-left)) !important;

    gap: 6px !important;
  }


  /* Slightly smaller CourtCast lockup. */

  body:has(.primary-nav) .brand-link img {
    width: min(162px, 41vw) !important;
    max-height: 38px !important;

    object-fit: contain;
  }


  /* Keep menu/search/bell useful without letting them enlarge the row. */

  body:has(.primary-nav) .icon-button {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    padding: 7px !important;
  }

  body:has(.primary-nav) .icon-button svg {
    width: 22px !important;
    height: 22px !important;
  }


  /* Compact Logout without changing its meaning or behavior. */

  body:has(.primary-nav) .logout-button {
    min-width: 66px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding-inline: 11px !important;

    border-radius: 999px !important;

    font-size: 11px !important;
  }


  /* ------------------------------------------------------------------------
     BOTTOM NAVIGATION

     Previous mobile dock:
       height ≈ 86px
       bottom = safe-area + 8px

     New dock:
       height = 72px
       slightly closer to the iOS home-indicator safe area
     ------------------------------------------------------------------------ */

  body:has(.primary-nav) .primary-nav {
    right: 6px !important;
    left: 6px !important;

    /*
     * Never overlap the home indicator.
     * On an iPhone with a safe inset this moves the dock slightly downward,
     * while non-notched phones retain a 4px minimum gap.
     */
    bottom:
      max(
        4px,
        calc(env(safe-area-inset-bottom) - 2px)
      ) !important;

    height: 72px !important;
    min-height: 72px !important;

    padding:
      4px
      4px
      3px !important;

    border-radius: 23px !important;
  }


  /* ------------------------------------------------------------------------
     NORMAL NAV ITEMS
     ------------------------------------------------------------------------ */

  body:has(.primary-nav) .primary-nav-item {
    min-height: 54px !important;

    gap: 2px !important;

    border-radius: 16px !important;
  }

  body:has(.primary-nav) .primary-nav-item svg {
    width: 22px !important;
    height: 22px !important;
  }

  body:has(.primary-nav) .primary-nav-item span {
    font-size: 9.5px !important;
    line-height: 1 !important;
  }


  /* ------------------------------------------------------------------------
     CENTER OPEN PLAY ACTION
     ------------------------------------------------------------------------ */

  body:has(.primary-nav) .primary-nav-action {
    min-height: 54px !important;

    gap: 3px !important;

    margin-top: 0 !important;

    justify-content: center !important;
  }

  body:has(.primary-nav) .primary-nav-action picture {
    width: 34px !important;
    height: 34px !important;
  }

  body:has(.primary-nav) .primary-nav-action span {
    margin-top: 0 !important;

    font-size: 9.5px !important;
    line-height: 1 !important;
  }
}


/* ==========================================================================
   VERY NARROW PHONE
   ========================================================================== */

@media (max-width: 374px) {

  body:has(.primary-nav) .brand-link img {
    width: min(150px, 40vw) !important;
  }

  body:has(.primary-nav) .logout-button {
    min-width: 60px !important;

    padding-inline: 9px !important;

    font-size: 10px !important;
  }

  body:has(.primary-nav) .primary-nav-item span,
  body:has(.primary-nav) .primary-nav-action span {
    font-size: 9px !important;
  }
}


/* ==========================================================================
   COURTCAST MOBILE SHELL — IPHONE 15 PRO REFERENCE 2026-09-26

   Golden mobile-shell reference:
   iphone15pro.png

   Target:
   - preserve iOS top safe area
   - compact CourtCast header row to ~52px
   - bottom dock ~84px tall
   - dock approximately 10px from physical bottom on iPhone 15 Pro
   - maintain full visual weight of Open Play centre action
   - tablet shell rules remain untouched
   ========================================================================== */

@media (max-width: 599px) {

  /* ========================================================================
     TOP HEADER
     ======================================================================== */

  body:has(.primary-nav) .topbar-inner {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      auto !important;

    min-height: 52px !important;

    padding:
      0
      max(12px, env(safe-area-inset-right))
      2px
      max(12px, env(safe-area-inset-left)) !important;

    gap: 6px !important;
  }


  /* CourtCast lockup */

  body:has(.primary-nav) .brand-link img {
    width: min(160px, 41vw) !important;
    max-height: 38px !important;

    object-fit: contain !important;
    object-position: left center !important;
  }


  /* Menu / Search / Notification */

  body:has(.primary-nav) .icon-button {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    padding: 7px !important;
  }

  body:has(.primary-nav) .icon-button svg {
    width: 22px !important;
    height: 22px !important;
  }


  /* Logout button — reference size */

  body:has(.primary-nav) .logout-button {
    min-width: 66px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding-inline: 11px !important;

    border-radius: 999px !important;

    font-size: 11px !important;
  }


  /* ========================================================================
     BOTTOM NAVIGATION
     ======================================================================== */

  body:has(.primary-nav) .primary-nav {
    position: fixed !important;

    top: auto !important;

    /*
     * Reference screenshot:
     * approximately 7px horizontal inset.
     */

    right: 7px !important;
    left: 7px !important;

    /*
     * iPhone 15 Pro safe-area-bottom is considerably larger than the
     * visible reference gap. We allow the glass dock to extend into that
     * safe region while retaining a small physical-bottom gap.
     *
     * iPhone 15 Pro:
     * safe inset ~34px → ~10px visible gap.
     *
     * Android / devices without an inset:
     * minimum 8px gap.
     */

    bottom:
      max(
        8px,
        calc(env(safe-area-inset-bottom) - 24px)
      ) !important;

    width: auto !important;
    max-width: none !important;

    height: 84px !important;
    min-height: 84px !important;

    margin: 0 !important;

    padding:
      6px
      5px
      6px !important;

    border-radius: 28px !important;

    transform: none !important;
    translate: none !important;
  }


  /* ========================================================================
     NORMAL NAV TABS
     ======================================================================== */

  body:has(.primary-nav) .primary-nav-item {
    min-height: 66px !important;

    gap: 4px !important;

    border-radius: 19px !important;

    transform: none !important;
    translate: none !important;
  }

  body:has(.primary-nav) .primary-nav-item svg {
    width: 24px !important;
    height: 24px !important;
  }

  body:has(.primary-nav) .primary-nav-item span {
    margin: 0 !important;

    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }


  /* ========================================================================
     OPEN PLAY CENTRE TAB
     ======================================================================== */

  body:has(.primary-nav) .primary-nav-action {
    min-height: 66px !important;

    margin: 0 !important;

    gap: 4px !important;

    justify-content: center !important;

    transform: none !important;
    translate: none !important;
  }

  body:has(.primary-nav) .primary-nav-action picture {
    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;

    border-radius: 50% !important;
  }

  body:has(.primary-nav) .primary-nav-action img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
  }

  body:has(.primary-nav) .primary-nav-action span {
    margin: 0 !important;

    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
}


/* ==========================================================================
   NARROW MOBILE WIDTH
   ========================================================================== */

@media (max-width: 374px) {

  body:has(.primary-nav) .brand-link img {
    width: min(148px, 40vw) !important;
  }

  body:has(.primary-nav) .logout-button {
    min-width: 60px !important;

    padding-inline: 9px !important;

    font-size: 10px !important;
  }

  body:has(.primary-nav) .primary-nav-item span,
  body:has(.primary-nav) .primary-nav-action span {
    font-size: 9.5px !important;
  }
}


/* ==========================================================================
   COURTCAST MOBILE HEADER — SAFE AREA TIGHTEN 2026-09-26

   Goal:
   - keep iOS status / Dynamic Island safe area protected
   - remove unnecessary vertical space below that safe area
   - move CourtCast controls naturally upward
   - no negative transform
   - no bottom navigation changes
   - no tablet shell changes
   ========================================================================== */

@media (max-width: 599px) {

  /*
   * Header background may extend behind the iOS status area.
   * Controls begin immediately after the real safe-area inset.
   */
  body:has(.primary-nav) .profile-topbar {
    padding-top:
      env(safe-area-inset-top) !important;

    padding-bottom: 0 !important;
  }


  /*
   * Compact only the application-control row.
   *
   * Previous target: ~52px
   * New target:      48px
   */
  body:has(.primary-nav) .topbar-inner {
    min-height: 48px !important;

    padding:
      0
      max(12px, env(safe-area-inset-right))
      0
      max(12px, env(safe-area-inset-left)) !important;

    gap: 6px !important;

    align-items: center !important;
  }


  /*
   * Keep the existing control dimensions.
   * Their hit areas remain usable while the surrounding row gets tighter.
   */
  body:has(.primary-nav) .icon-button {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;
  }

  body:has(.primary-nav) .brand-link img {
    max-height: 36px !important;
  }

  body:has(.primary-nav) .logout-button {
    height: 36px !important;
    min-height: 36px !important;
  }
}


/* ==========================================================================
   COURTCAST MOBILE SHELL — FACEBOOK ICON DOCK 2026-09-26

   Mobile only:
   - icons only
   - every nav icon same visual size
   - Open Play is no longer oversized
   - compact floating pill
   - header uses circular player avatar
   - tablet shell remains unchanged
   ========================================================================== */


/* --------------------------------------------------------------------------
   HEADER PROFILE AVATAR
   -------------------------------------------------------------------------- */

.shell-profile-avatar {
  display: grid;
  flex: 0 0 auto;

  width: 38px;
  height: 38px;

  place-items: center;

  overflow: hidden;

  border:
    2px solid rgba(80, 190, 255, 0.88);

  border-radius: 50%;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #1494ff,
      #0866e8
    );

  box-shadow:
    0 3px 10px rgba(0, 72, 160, 0.20);

  text-decoration: none;
}

.shell-profile-avatar img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  border-radius: inherit;
}

.shell-profile-avatar span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 599px) {

  /* ------------------------------------------------------------------------
     HEADER RIGHT SIDE
     ------------------------------------------------------------------------ */

  body:has(.primary-nav) .topbar-actions {
    gap: 7px !important;
  }

  body:has(.primary-nav) .shell-profile-avatar {
    width: 38px;
    height: 38px;
  }


  /* ------------------------------------------------------------------------
     FACEBOOK-LIKE FLOATING DOCK

     Keep CourtCast navy glass; use Facebook-like geometry.
     ------------------------------------------------------------------------ */

  body:has(.primary-nav) .primary-nav {
    right: 7px !important;
    left: 7px !important;

    bottom:
      max(
        6px,
        calc(env(safe-area-inset-bottom) - 24px)
      ) !important;

    height: 64px !important;
    min-height: 64px !important;

    padding:
      4px
      8px !important;

    border-radius: 999px !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    align-items: center !important;
  }


  /* ------------------------------------------------------------------------
     REMOVE MOBILE LABELS
     ------------------------------------------------------------------------ */

  body:has(.primary-nav)
  .primary-nav-item > span,

  body:has(.primary-nav)
  .primary-nav-action > span {
    display: none !important;
  }


  /* ------------------------------------------------------------------------
     ALL FIVE TABS USE THE SAME GEOMETRY
     ------------------------------------------------------------------------ */

  body:has(.primary-nav) .primary-nav-item,
  body:has(.primary-nav) .primary-nav-action {
    display: grid !important;

    width: auto !important;
    height: 54px !important;

    min-width: 0 !important;
    min-height: 54px !important;

    place-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    border-radius: 20px !important;
  }


  /* Standard CourtCast tab icons */

  body:has(.primary-nav)
  .primary-nav-item svg {
    width: 28px !important;
    height: 28px !important;
  }


  /* Open Play becomes exactly the same visual size. */

  body:has(.primary-nav)
  .primary-nav-action picture {
    display: block !important;

    width: 28px !important;
    height: 28px !important;

    margin: 0 !important;

    border-radius: 50% !important;

    box-shadow: none !important;
  }

  body:has(.primary-nav)
  .primary-nav-action img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
  }


  /* ------------------------------------------------------------------------
     ACTIVE TAB

     Similar to Facebooks selected-icon area, but in CourtCast blue glass.
     ------------------------------------------------------------------------ */

  body:has(.primary-nav)
  .primary-nav-item.is-active,

  body:has(.primary-nav)
  .primary-nav-action.is-active {
    color: #13c9ff !important;

    background:
      rgba(16, 132, 238, 0.18) !important;

    box-shadow:
      inset 0 0 20px
      rgba(8, 163, 255, 0.13) !important;
  }
}


/* Very narrow phones */

@media (max-width: 374px) {

  body:has(.primary-nav) .primary-nav {
    right: 5px !important;
    left: 5px !important;

    padding-inline: 5px !important;
  }

  body:has(.primary-nav)
  .primary-nav-item svg,

  body:has(.primary-nav)
  .primary-nav-action picture {
    width: 26px !important;
    height: 26px !important;
  }
}