/** Public player profile: chess identity, progress, and visible milestones. */

.player-profile {
    position: relative;
    overflow: hidden;
    padding-block: clamp(var(--space-5), 5vw, var(--space-10));
    background:
        radial-gradient(circle at 8% 8%, var(--color-primary-100), transparent 24rem),
        var(--color-bg);
}

.player-profile__hero {
    --color-heading: var(--color-on-ink);
    position: relative;
    display: grid;
    min-height: 23rem;
    overflow: hidden;
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    border: 1px solid var(--color-ink-border);
    border-radius: var(--radius-2xl);
    grid-template-columns: minmax(0, 1.4fr) minmax(17rem, 0.68fr);
    align-items: center;
    gap: clamp(var(--space-6), 5vw, var(--space-10));
    color: var(--color-on-ink);
    background: var(--gradient-ink);
    box-shadow: var(--shadow-xl);
}

.player-profile__hero::before {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    content: '';
    pointer-events: none;
    background-image:
        linear-gradient(45deg, var(--color-ink-border) 25%, transparent 25%),
        linear-gradient(-45deg, var(--color-ink-border) 25%, transparent 25%);
    background-size: 5rem 5rem;
    -webkit-mask-image: linear-gradient(90deg, black, transparent 65%);
    mask-image: linear-gradient(90deg, black, transparent 65%);
}

.player-profile__hero::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--space-1);
    content: '';
    background: var(--gradient-brass);
}

.player-profile__identity,
.player-profile__rating { position: relative; z-index: 1; }

.player-profile__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5);
}

.player-profile__avatar {
    display: grid;
    width: 7rem;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid var(--color-accent-400);
    border-radius: var(--radius-2xl);
    place-items: center;
    color: var(--color-on-ink);
    background: var(--color-ink-surface-raised);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
}

.player-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-profile__eyebrow { margin: 0; color: var(--color-accent-400); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.player-profile__name h1 {
    max-width: 18ch;
    margin: var(--space-1) 0 0;
    overflow-wrap: anywhere;
    color: var(--color-on-ink);
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
}

.player-profile__meta { display: flex; margin-top: var(--space-3); flex-wrap: wrap; gap: var(--space-2); }
.player-profile__meta span { display: inline-flex; min-height: 1.75rem; padding-inline: var(--space-3); border: 1px solid var(--color-ink-border); border-radius: var(--radius-full); align-items: center; color: var(--color-on-ink-muted); font-size: var(--text-xs); }
.player-profile__bio { max-width: 58ch; margin: var(--space-4) 0 0; color: var(--color-on-ink-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); white-space: pre-line; }
.player-profile__actions { display: flex; margin-top: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }

.player-profile__rating {
    padding: var(--space-5);
    border: 1px solid var(--color-ink-border);
    border-radius: var(--radius-xl);
    background: var(--color-ink-surface-raised);
    box-shadow: var(--shadow-lg);
}

.player-profile__rating-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.player-profile__rating-top > div { display: grid; gap: var(--space-1); }
.player-profile__rating-top > div span { color: var(--color-on-ink-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.player-profile__rating-top strong { color: var(--color-on-ink); font-size: var(--text-4xl); line-height: 1; font-variant-numeric: tabular-nums; }
.player-profile__piece { display: grid; width: 3.25rem; aspect-ratio: 1; border: 1px solid var(--color-ink-border); border-radius: var(--radius-lg); place-items: center; color: var(--color-accent-400); font-size: var(--text-2xl); }
.player-profile__level { display: flex; margin-top: var(--space-5); align-items: center; justify-content: space-between; gap: var(--space-3); }
.player-profile__level > span:last-child { color: var(--color-on-ink-muted); font-size: var(--text-xs); text-align: right; }
.player-profile__level-name { color: var(--color-on-ink); font-size: var(--text-sm); font-weight: var(--weight-bold); }

.player-profile progress {
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-full);
    color: var(--color-primary-500);
    background: var(--color-surface-sunk);
    accent-color: var(--color-primary-500);
}

.player-profile progress::-webkit-progress-bar { border-radius: var(--radius-full); background: var(--color-surface-sunk); }
.player-profile progress::-webkit-progress-value { border-radius: var(--radius-full); background: var(--gradient-brand); }
.player-profile progress::-moz-progress-bar { border-radius: var(--radius-full); background: var(--color-primary-500); }
.player-profile__rating > progress { width: 100%; height: 0.65rem; margin-top: var(--space-3); background: var(--color-ink-surface); }
.player-profile__rating > progress::-webkit-progress-bar { background: var(--color-ink-surface); }
.player-profile__rating > progress::-webkit-progress-value { background: var(--gradient-brass); }
.player-profile__rating > progress::-moz-progress-bar { background: var(--color-accent-400); }
.player-profile__rating-foot { display: flex; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-ink-border); align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--color-on-ink-muted); font-size: var(--text-xs); }
.player-profile__rating-foot strong { color: var(--color-on-ink); }
.player-profile__rating-foot a { color: var(--color-accent-400); font-weight: var(--weight-bold); text-decoration: none; }
.player-profile__rating-foot a:hover { text-decoration: underline; }

.player-profile__scoreboard {
    display: grid;
    margin: -1px var(--space-5) 0;
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.player-profile__scoreboard > div { display: flex; min-width: 0; padding: var(--space-4) var(--space-5); flex-direction: column; }
.player-profile__scoreboard > div + div { border-left: 1px solid var(--color-border-light); }
.player-profile__scoreboard dt { order: 1; color: var(--color-text-secondary); font-size: var(--text-xs); }
.player-profile__scoreboard dd { order: 2; margin: var(--space-1) 0; overflow-wrap: anywhere; color: var(--color-text); font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); font-weight: var(--weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.player-profile__scoreboard span { order: 3; color: var(--color-text-tertiary); font-size: var(--text-xs); line-height: var(--leading-snug); }

.player-profile__privacy-note { display: grid; margin: var(--space-4) var(--space-5) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-warning); border-radius: var(--radius-lg); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); color: var(--color-text); background: var(--color-warning-bg); }
.player-profile__privacy-note > span { color: var(--color-warning); font-size: var(--text-xl); }
.player-profile__privacy-note p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }
.player-profile__privacy-note a { color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-bold); }

.player-profile__layout { display: grid; margin-top: clamp(var(--space-8), 7vw, var(--space-12)); grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.65fr); align-items: start; gap: var(--space-5); }
.player-profile__main, .player-profile__sidebar { display: grid; min-width: 0; gap: var(--space-5); }

.profile-panel { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.profile-panel__heading { display: flex; margin-bottom: var(--space-5); align-items: start; justify-content: space-between; gap: var(--space-4); }
.profile-panel__heading > div > p { margin: 0 0 var(--space-1); color: var(--color-primary-600); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.profile-panel__heading h2 { margin: 0; font-size: var(--text-xl); }
.profile-panel__heading > span { color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.profile-rating-chart__canvas { min-height: 0; }
.profile-rating-chart canvas { display: block; width: 100%; touch-action: pan-y pinch-zoom; }
.chart-tooltip { position: absolute; z-index: 2; max-width: calc(100% - var(--space-4)); padding: var(--space-2) var(--space-3); overflow: hidden; border-radius: var(--radius-md); transform: translate(-50%, calc(-100% - 0.5rem)); color: var(--color-on-ink); background: var(--color-ink-surface); box-shadow: var(--shadow-md); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-overflow: ellipsis; pointer-events: none; white-space: nowrap; }

.profile-activity { padding: 0; overflow: hidden; }
.profile-activity .profile-panel__heading { margin: 0; padding: var(--space-5); border-bottom: 1px solid var(--color-border-light); }
.profile-activity__list { margin: 0; padding: 0; list-style: none; }
.profile-activity__list li { display: grid; min-height: 5rem; padding: var(--space-4) var(--space-5); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.profile-activity__list li + li { border-top: 1px solid var(--color-border-light); }
.profile-activity__result { display: grid; width: 2.5rem; aspect-ratio: 1; border-radius: var(--radius-full); place-items: center; font-weight: var(--weight-bold); }
.profile-activity__result--solved { color: var(--color-success-700); background: var(--color-success-bg); }
.profile-activity__result--review { color: var(--color-warning); background: var(--color-warning-bg); }
.profile-activity__list li > div:nth-child(2) { display: grid; min-width: 0; gap: var(--space-1); }
.profile-activity__list li > div:nth-child(2) a { overflow: hidden; color: var(--color-text); font-weight: var(--weight-bold); text-overflow: ellipsis; text-decoration: none; white-space: nowrap; }
.profile-activity__list li > div:nth-child(2) a:hover { color: var(--color-primary-600); }
.profile-activity__list li > div:nth-child(2) span, .profile-activity__when span { color: var(--color-text-secondary); font-size: var(--text-xs); }
.profile-activity__when { display: grid; justify-items: end; gap: var(--space-1); text-align: right; }
.profile-activity__when strong { font-size: var(--text-sm); }

.profile-form__score { display: block; color: var(--color-text); font-size: var(--text-4xl); line-height: 1; font-variant-numeric: tabular-nums; }
.profile-form__caption { display: block; margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); }
.profile-form__sequence { display: flex; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border-light); gap: var(--space-2); list-style: none; }
.profile-form__sequence li { width: 0.85rem; aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.profile-form__sequence .is-solved { border-color: var(--color-success); background: var(--color-success); }
.profile-form__sequence .is-review { border-color: var(--color-warning); background: var(--color-warning-bg); }

.profile-week__summary { display: flex; margin-bottom: var(--space-5); align-items: baseline; gap: var(--space-2); }
.profile-week__summary strong { font-size: var(--text-3xl); font-variant-numeric: tabular-nums; }
.profile-week__summary span { color: var(--color-text-secondary); font-size: var(--text-sm); }
.profile-week__bars { display: grid; margin: 0; gap: var(--space-3); }
.profile-week__bars > div { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1.5rem; align-items: center; gap: var(--space-3); }
.profile-week__bars time, .profile-week__bars span { color: var(--color-text-secondary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.profile-week__bars span { text-align: right; }
.profile-week__bars progress { width: 100%; height: 0.6rem; }
.profile-week__bars figcaption { margin-top: var(--space-2); color: var(--color-text-tertiary); font-size: var(--text-xs); }

.profile-themes__list { display: grid; gap: var(--space-2); }
.profile-themes__list a { display: grid; padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-lg); grid-template-columns: minmax(0, 1fr) 2.5rem; gap: var(--space-2) var(--space-3); color: var(--color-text); text-decoration: none; }
.profile-themes__list a:hover { border-color: var(--color-primary-200); background: var(--color-primary-50); }
.profile-themes__list a > div { display: grid; min-width: 0; gap: var(--space-1); }
.profile-themes__list a > div span { color: var(--color-text-secondary); font-size: var(--text-xs); }
.profile-themes__list progress { grid-column: 1 / -1; width: 100%; height: 0.55rem; }
.profile-themes__list b { color: var(--color-text-secondary); font-size: var(--text-sm); text-align: right; font-variant-numeric: tabular-nums; }
.profile-panel__note { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); color: var(--color-text-tertiary); font-size: var(--text-xs); line-height: var(--leading-normal); }
.profile-panel__muted { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.profile-achievements__list { display: grid; gap: var(--space-3); }
.profile-achievements__list > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.profile-achievements__list > div > span { display: grid; width: 2.5rem; aspect-ratio: 1; border: 1px solid var(--color-primary-100); border-radius: var(--radius-lg); place-items: center; background: var(--color-primary-50); }
.profile-achievements__list > div.is-pinned { padding: var(--space-3); border: 1px solid var(--color-accent-400); border-radius: var(--radius-lg); background: var(--color-warning-bg); }
.profile-achievements__list p { display: grid; margin: 0; gap: var(--space-1); }
.profile-achievements__list small { color: var(--color-text-secondary); line-height: var(--leading-snug); }

.profile-openings__list { display: grid; gap: var(--space-2); }
.profile-openings__list a { display: grid; padding: var(--space-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.profile-openings__list a:hover { border-color: var(--color-primary-300); background: var(--color-primary-50); }
.profile-openings__list a > span { display: grid; min-width: 2.75rem; min-height: 2.25rem; padding-inline: var(--space-2); border-radius: var(--radius-md); place-items: center; color: var(--color-primary-700); background: var(--color-primary-100); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.profile-openings__list a > div { display: grid; min-width: 0; gap: var(--space-1); }
.profile-openings__list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-openings__list small { color: var(--color-text-secondary); }
.profile-openings__list b { color: var(--color-primary-600); }

.profile-share__card { --color-heading: var(--color-on-ink); position: relative; overflow: hidden; padding: var(--space-5); border: 1px solid var(--color-ink-border); border-radius: var(--radius-xl); color: var(--color-on-ink); background: var(--gradient-ink); }
.profile-share__card::after { position: absolute; right: -1rem; bottom: -2.5rem; opacity: 0.08; content: '♞'; color: var(--color-on-ink); font-size: 9rem; line-height: 1; pointer-events: none; }
.profile-share__brand { display: flex; margin-bottom: var(--space-5); align-items: center; gap: var(--space-2); color: var(--color-accent-400); }
.profile-share__brand > span { font-size: var(--text-xl); }
.profile-share__brand small { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.profile-share__card > strong { position: relative; z-index: 1; display: block; overflow-wrap: anywhere; color: var(--color-on-ink); font-size: var(--text-2xl); }
.profile-share__card > span { color: var(--color-on-ink-muted); font-size: var(--text-sm); }
.profile-share__card dl { position: relative; z-index: 1; display: grid; margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-ink-border); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.profile-share__card dl > div { display: grid; min-width: 0; gap: var(--space-1); }
.profile-share__card dt { color: var(--color-on-ink-muted); font-size: var(--text-xs); }
.profile-share__card dd { margin: 0; overflow: hidden; color: var(--color-on-ink); font-size: var(--text-sm); font-weight: var(--weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.profile-share__download { width: 100%; margin-top: var(--space-4); justify-content: center; }
.profile-share__privacy { margin: var(--space-3) 0 0; color: var(--color-text-tertiary); font-size: var(--text-xs); line-height: var(--leading-normal); }

.profile-empty { display: grid; min-height: 15rem; padding: var(--space-6); border-radius: var(--radius-lg); place-content: center; justify-items: center; gap: var(--space-2); color: var(--color-text-secondary); background: var(--color-surface-alt); text-align: center; }
.profile-empty > span { color: var(--color-primary-500); font-size: var(--text-4xl); }
.profile-empty strong { color: var(--color-text); }
.profile-empty p { margin: 0; }

.player-profile__cta {
    --color-heading: var(--color-on-ink);
    display: grid;
    margin-top: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-ink-border);
    border-radius: var(--radius-2xl);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    color: var(--color-on-ink);
    background: var(--gradient-ink);
}

.player-profile__cta > span { color: var(--color-accent-400); font-size: var(--text-5xl); }
.player-profile__cta p { margin: 0; color: var(--color-accent-400); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.player-profile__cta h2 { max-width: 38ch; margin: var(--space-1) 0 0; color: var(--color-on-ink); font-size: var(--text-xl); }

.player-profile a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* Profile settings */
.profile-settings { padding-block: clamp(var(--space-6), 6vw, var(--space-10)); background: var(--color-bg); }
.profile-settings__header { --color-heading: var(--color-on-ink); display: flex; overflow: hidden; padding: clamp(var(--space-6), 5vw, var(--space-8)); border: 1px solid var(--color-ink-border); border-radius: var(--radius-2xl); align-items: end; justify-content: space-between; gap: var(--space-6); color: var(--color-on-ink-muted); background: var(--gradient-ink); box-shadow: var(--shadow-lg); }
.profile-settings__header h1 { margin: var(--space-1) 0 var(--space-2); color: var(--color-on-ink); font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
.profile-settings__header p { max-width: 58ch; margin-block: 0; line-height: var(--leading-relaxed); }
.profile-settings__eyebrow { color: var(--color-accent-400); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.profile-settings__layout { display: grid; margin-top: var(--space-6); grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr); align-items: start; gap: var(--space-5); }
.profile-settings__main { display: grid; gap: var(--space-5); }
.profile-settings__form, .profile-settings__aside { display: grid; gap: var(--space-5); }
.profile-settings__panel { padding: clamp(var(--space-5), 4vw, var(--space-6)); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.profile-settings__panel-heading { display: grid; margin-bottom: var(--space-5); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.profile-settings__panel-heading > span { display: grid; width: 2.75rem; aspect-ratio: 1; border-radius: var(--radius-lg); place-items: center; color: var(--color-primary-700); background: var(--color-primary-100); font-size: var(--text-xl); }
.profile-settings__panel-heading p { margin: 0 0 var(--space-1); color: var(--color-primary-600); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.profile-settings__panel-heading h2 { margin: 0; font-size: var(--text-xl); }
.profile-settings__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.profile-settings__field--wide { grid-column: 1 / -1; }
.profile-settings .form__label { display: flex; justify-content: space-between; gap: var(--space-3); }
.profile-settings .form__label > span { color: var(--color-text-tertiary); font-size: var(--text-xs); font-weight: var(--weight-regular); }
.profile-settings .form__textarea { width: 100%; min-height: 8rem; resize: vertical; }
.profile-settings .form__group > small { display: block; margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-xs); line-height: var(--leading-normal); }
.profile-avatar-settings__layout { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-5); }
.profile-avatar-settings__preview { display: grid; width: 7rem; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--color-accent-400); border-radius: var(--radius-2xl); place-items: center; color: var(--color-on-ink); background: var(--color-ink-surface-raised); box-shadow: var(--shadow-md); font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.profile-avatar-settings__preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-settings__form { display: grid; gap: var(--space-3); }
.profile-avatar-settings__form .form__input { padding-block: var(--space-2); }
.profile-avatar-settings__form small, .profile-url-settings__form > small { color: var(--color-text-secondary); font-size: var(--text-xs); line-height: var(--leading-normal); }
.profile-avatar-settings__form .btn { width: max-content; }
.profile-avatar-settings__remove { margin-top: var(--space-2); }
.profile-url-settings__form { display: grid; gap: var(--space-3); }
.profile-url-settings__input { display: grid; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); grid-template-columns: auto minmax(0, 1fr); align-items: stretch; background: var(--color-surface); }
.profile-url-settings__input:focus-within { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px var(--color-primary-100); }
.profile-url-settings__input > span { display: flex; padding-inline: var(--space-3); border-right: 1px solid var(--color-border-light); align-items: center; color: var(--color-text-secondary); background: var(--color-surface-alt); font-size: var(--text-sm); white-space: nowrap; }
.profile-url-settings__input .form__input { border: 0; border-radius: 0; box-shadow: none; }
.profile-url-settings__input .form__input:focus { box-shadow: none; }
.profile-url-settings__actions { display: flex; margin-top: var(--space-2); flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.profile-visibility { display: grid; margin: 0; padding: 0; border: 0; gap: var(--space-3); }
.profile-visibility label { display: grid; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); cursor: pointer; }
.profile-visibility label:has(input:checked) { border-color: var(--color-primary-500); background: var(--color-primary-50); box-shadow: inset 0 0 0 1px var(--color-primary-500); }
.profile-visibility input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--color-primary-600); }
.profile-visibility span { display: grid; gap: var(--space-1); }
.profile-visibility small { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.profile-settings__savebar { display: flex; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-xl); align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.profile-settings__savebar p { max-width: 52ch; margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.profile-settings__repertoire ul { display: grid; margin: 0 0 var(--space-5); padding: 0; gap: var(--space-2); list-style: none; }
.profile-settings__repertoire li { display: grid; padding: var(--space-3); border-radius: var(--radius-lg); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); background: var(--color-surface-alt); }
.profile-settings__repertoire li > span { color: var(--color-primary-600); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.profile-settings__repertoire p, .profile-settings__aside > .profile-settings__panel > p { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.profile-settings__security .form { display: grid; gap: var(--space-4); }
.profile-settings a:focus-visible, .profile-settings button:focus-visible, .profile-settings input:focus-visible, .profile-settings textarea:focus-visible, .profile-settings select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* Privacy gate */
.profile-gate { min-height: 70vh; padding-block: clamp(var(--space-10), 10vw, 8rem); background: radial-gradient(circle at 50% 20%, var(--color-primary-100), transparent 26rem), var(--color-bg); text-align: center; }
.profile-gate .container { display: grid; justify-items: center; }
.profile-gate__board { position: relative; display: grid; width: 7rem; aspect-ratio: 1; margin-bottom: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); grid-template-columns: 1fr 1fr; overflow: hidden; box-shadow: var(--shadow-lg); }
.profile-gate__board span { display: grid; place-items: center; color: var(--color-on-ink); background: var(--color-ink-surface); font-size: var(--text-3xl); }
.profile-gate__board span + span { color: var(--color-primary-800); background: var(--color-primary-100); }
.profile-gate__eyebrow { margin: 0; color: var(--color-primary-600); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.profile-gate h1 { max-width: 20ch; margin: var(--space-2) 0 var(--space-3); font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); }
.profile-gate .container > p:not(.profile-gate__eyebrow) { max-width: 54ch; margin: 0; color: var(--color-text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.profile-gate__actions { display: flex; margin-top: var(--space-6); flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* Achievement showcase controls */
.achievement-profile-guide { display: grid; margin-bottom: var(--space-6); padding: var(--space-5); border: 1px solid var(--color-primary-200); border-radius: var(--radius-xl); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); background: var(--color-primary-50); }
.achievement-profile-guide > span { color: var(--color-primary-600); font-size: var(--text-3xl); }
.achievement-profile-guide p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.achievement-profile-controls { display: flex; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.achievement-profile-controls label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); cursor: pointer; }
.achievement-profile-controls input { width: 1rem; height: 1rem; accent-color: var(--color-primary-600); }
.achievement-profile-controls .btn { margin-left: auto; }

@media (max-width: 1000px) {
    .player-profile__hero { grid-template-columns: 1fr; }
    .player-profile__rating { width: min(100%, 30rem); }
    .player-profile__scoreboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .player-profile__scoreboard > div:nth-child(4) { border-left: 0; }
    .player-profile__scoreboard > div:nth-child(n + 4) { border-top: 1px solid var(--color-border-light); }
    .player-profile__layout { grid-template-columns: 1fr; }
    .player-profile__sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-achievements { grid-column: 1 / -1; }
    .profile-settings__layout { grid-template-columns: 1fr; }
    .profile-settings__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-settings__security { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .player-profile__hero { min-height: 0; padding: var(--space-6); }
    .player-profile__identity { grid-template-columns: 1fr; }
    .player-profile__avatar { width: 5.5rem; }
    .player-profile__rating { width: 100%; }
    .player-profile__scoreboard { margin-inline: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .player-profile__scoreboard > div:nth-child(3) { border-left: 0; }
    .player-profile__scoreboard > div:nth-child(4) { border-left: 1px solid var(--color-border-light); }
    .player-profile__scoreboard > div:nth-child(n + 3) { border-top: 1px solid var(--color-border-light); }
    .player-profile__scoreboard > div:last-child { grid-column: 1 / -1; border-left: 0; }
    .player-profile__sidebar { grid-template-columns: 1fr; }
    .profile-achievements { grid-column: auto; }
    .player-profile__cta { grid-template-columns: auto minmax(0, 1fr); }
    .player-profile__cta .btn { grid-column: 1 / -1; width: 100%; }
    .player-profile__privacy-note { margin-inline: var(--space-3); grid-template-columns: auto minmax(0, 1fr); }
    .player-profile__privacy-note a { grid-column: 2; }
    .profile-settings__header { align-items: start; flex-direction: column; }
    .profile-settings__fields, .profile-settings__aside { grid-template-columns: 1fr; }
    .profile-avatar-settings__layout { grid-template-columns: 1fr; }
    .profile-settings__field--wide, .profile-settings__security { grid-column: auto; }
    .achievement-profile-guide { grid-template-columns: auto minmax(0, 1fr); }
    .achievement-profile-guide .btn { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .player-profile__hero { padding: var(--space-5); }
    .player-profile__actions, .player-profile__actions .btn { width: 100%; }
    .player-profile__scoreboard { grid-template-columns: 1fr; }
    .player-profile__scoreboard > div, .player-profile__scoreboard > div:nth-child(4) { border-top: 1px solid var(--color-border-light); border-left: 0; }
    .player-profile__scoreboard > div:first-child { border-top: 0; }
    .player-profile__scoreboard > div:last-child { grid-column: auto; }
    .profile-panel { padding: var(--space-4); }
    .profile-activity { padding: 0; }
    .profile-activity .profile-panel__heading { padding: var(--space-4); flex-direction: column; }
    .profile-activity__list li { padding: var(--space-4); grid-template-columns: auto minmax(0, 1fr); }
    .profile-activity__when { grid-column: 2; justify-items: start; text-align: left; }
    .profile-panel__heading { flex-direction: column; }
    .player-profile__level, .player-profile__rating-foot { align-items: start; flex-direction: column; }
    .player-profile__level > span:last-child { text-align: left; }
    .player-profile__cta { padding: var(--space-5); grid-template-columns: 1fr; }
    .profile-share__card dl { grid-template-columns: 1fr; }
    .profile-settings__savebar { align-items: stretch; flex-direction: column; }
    .profile-settings__savebar .btn { width: 100%; }
    .profile-avatar-settings__form .btn, .profile-url-settings__actions .btn { width: 100%; }
    .profile-url-settings__input { grid-template-columns: 1fr; }
    .profile-url-settings__input > span { min-height: 2.5rem; border-right: 0; border-bottom: 1px solid var(--color-border-light); white-space: normal; overflow-wrap: anywhere; }
    .achievement-profile-controls { align-items: stretch; flex-direction: column; }
    .achievement-profile-controls .btn { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .player-profile * { scroll-behavior: auto; }
}

@media (forced-colors: active) {
    .player-profile__hero, .profile-panel, .player-profile__scoreboard, .player-profile__cta { border-color: CanvasText; }
    .profile-form__sequence .is-solved, .profile-form__sequence .is-review { border-color: CanvasText; }
}