.member-profile-view { --member-color: #ff62bc; --member-secondary: #63e6ff; --member-border: #ffb7d5; --member-heading: #fff; --member-body: #dce5ff; --member-base: #090921; --member-theme-image: none; }
.member-profile-heading .eyebrow { color: var(--member-color); }
.member-profile-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(230px, .7fr); align-items: center; gap: 24px; min-height: 360px; padding: clamp(24px, 4vw, 44px); overflow: hidden; border-color: color-mix(in srgb, var(--member-border) 68%, transparent); background-color: var(--member-base); background-image: linear-gradient(90deg, color-mix(in srgb, var(--member-base) 88%, transparent) 0%, color-mix(in srgb, var(--member-base) 70%, transparent) 42%, color-mix(in srgb, var(--member-base) 84%, transparent) 100%), var(--member-theme-image); background-position: center; background-size: cover; box-shadow: inset 0 0 70px color-mix(in srgb, var(--member-base) 75%, transparent), 0 0 34px color-mix(in srgb, var(--member-color) 18%, transparent); }
.member-profile-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.08), color-mix(in srgb, var(--member-base) 78%, transparent)); pointer-events: none; }
.member-profile-hero::after { content: ""; position: absolute; inset: auto -7% -55% auto; z-index: -1; width: 420px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--member-secondary) 48%, transparent), transparent 68%); pointer-events: none; }
.member-profile-hero > * { position: relative; z-index: 1; }
.member-profile-portrait { position: relative; width: clamp(145px, 18vw, 220px); aspect-ratio: 1; overflow: hidden; border: 3px solid var(--member-border); border-radius: 16%; background: var(--member-base); box-shadow: 0 0 0 7px color-mix(in srgb, var(--member-color) 15%, transparent), 0 0 38px color-mix(in srgb, var(--member-secondary) 48%, transparent); }
.member-profile-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.member-profile-portrait span { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; color: #080823; background: white; font-size: .68rem; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.member-profile-copy h2 { margin: 4px 0 8px; color: var(--member-heading); font-family: "Bungee", sans-serif; font-size: clamp(2rem, 5vw, 4.2rem); text-shadow: 0 0 24px color-mix(in srgb, var(--member-color) 72%, transparent); }
.member-profile-copy > p:not(.profile-kicker) { max-width: 650px; margin: 0; color: var(--member-body); font-weight: 800; line-height: 1.55; text-shadow: 0 2px 10px var(--member-base); }
.member-profile-status { display: inline-flex; margin-top: 16px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--member-border) 72%, transparent); border-radius: 999px; color: var(--member-heading); background: color-mix(in srgb, var(--member-color) 20%, var(--member-base)); font-size: .78rem; font-weight: 900; box-shadow: 0 0 18px color-mix(in srgb, var(--member-color) 18%, transparent); }
.member-profile-favorites { position: relative; z-index: 1; display: grid; gap: 10px; margin: 0; }
.member-profile-favorites div { padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--member-border) 28%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--member-base) 78%, transparent); backdrop-filter: blur(10px); }
.member-profile-favorites dt { color: color-mix(in srgb, var(--member-secondary) 72%, white); font-size: .64rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.member-profile-favorites dd { margin: 4px 0 0; color: var(--member-heading); font-weight: 950; }
.member-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.member-profile-stats article { display: grid; gap: 6px; min-height: 112px; align-content: center; padding: 20px; border-color: color-mix(in srgb, var(--member-border) 42%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--member-color) 12%, #090921), color-mix(in srgb, var(--member-base) 92%, #090921)); }
.member-profile-stats small { color: var(--member-color); font-weight: 1000; letter-spacing: .1em; }
.member-profile-stats strong { color: var(--member-heading); font-family: "Bungee", sans-serif; font-size: clamp(1.25rem, 3vw, 2rem); }
.member-profile-stats span { color: var(--member-body); font-size: .78rem; font-weight: 800; }
.member-profile-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 16px; }
.member-profile-grid > article { padding: clamp(18px, 3vw, 28px); border-color: color-mix(in srgb, var(--member-border) 34%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--member-color) 8%, #090921), color-mix(in srgb, var(--member-base) 88%, #090921)); }
.member-profile-grid .card-heading span { color: #929ecb; font-size: .72rem; font-weight: 850; }
.member-rhythm-records > [data-member-rhythm-records] { display: grid; gap: 9px; margin-top: 18px; }
.member-rhythm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(6,8,31,.64); }
.member-rhythm-row span { display: grid; gap: 3px; }
.member-rhythm-row strong, .member-rhythm-row b { color: white; }
.member-rhythm-row small { color: #9ea9d4; font-size: .68rem; font-weight: 850; }
.member-rhythm-row em { color: var(--member-color); font-style: normal; font-weight: 950; }
.member-achievements > [data-member-achievements] { display: grid; gap: 10px; margin-top: 18px; }
.member-achievements [data-member-achievements] > span { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid color-mix(in srgb, var(--member-color) 30%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--member-color) 9%, #080821); }
.member-achievements i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; color: #080821; background: var(--member-color); font-style: normal; font-weight: 1000; }
.member-achievements strong { color: white; }
.arcade-list-player[data-member-profile], .arcade-podium-player, .fc-board-entry button[data-member-profile] { padding: 0; color: inherit; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.arcade-list-player[data-member-profile]:hover strong, .arcade-podium-player:hover, .fc-board-entry button[data-member-profile]:hover { color: #72e9ff; text-decoration: underline; text-underline-offset: 3px; }
.arcade-podium-player { color: white; font-weight: 950; }

@media (max-width: 850px) {
  .member-profile-hero { grid-template-columns: auto 1fr; }
  .member-profile-favorites { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .member-profile-hero { grid-template-columns: 1fr; text-align: center; }
  .member-profile-portrait { margin: auto; }
  .member-profile-copy > p:not(.profile-kicker) { margin-inline: auto; }
  .member-profile-favorites, .member-profile-stats { grid-template-columns: 1fr; }
  .member-rhythm-row { grid-template-columns: 1fr auto; text-align: left; }
  .member-rhythm-row em { grid-column: 2; }
}