.profile-page {
    width: 100%;
    max-width: 1000px;
    margin-top: 24px;
}

.profile-screen .page-content {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}

.profile-screen header,
.profile-screen main,
.profile-screen footer {
    position: relative;
    z-index: 1;
}

.profile-screen header { z-index: 40; }
.profile-screen .account-menu,
.profile-screen .account-panel { z-index: 41; }

/* The hero keeps the green glow; the cards below stay calm so the hero and highlights stand out. */
.profile-screen .profile-identity,
.profile-screen .private-profile-notice {
    background: radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%), color-mix(in srgb, var(--panel-bg) 88%, transparent);
    border-color: color-mix(in srgb, var(--border) 76%, var(--accent) 24%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 12px 28px rgb(0 0 0 / 8%);
}

.profile-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.profile-main-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 18px;
}

/* ----- Profile styles from the level road (Settings → Profile style) -----
   Titan (75, amethyst), Mythic (85, holographic) and Gold (100). The accent takes the style's colour across
   the whole page (level ring, heatmap, records, buttons), the cards get its edge and glow, and the name and
   numbers are written in it. Everyone who opens the profile sees it. Each style sets:
   --style-accent / --style-ink (the accent and text on it), --style-glow (r g b) and --style-leaf (text fill). */
.profile-page.profile-style-titan {
    --style-accent: #a98bff;
    --style-ink: #160a2e;
    --style-glow: 140 100 240;
    --style-leaf: linear-gradient(120deg, #e3d6ff, #8b5df0 42%, #c4adff 64%, #6a3fd0);
}
.profile-page.profile-style-mythic {
    --style-accent: #a5bcff;
    --style-ink: #1c1633;
    --style-glow: 165 188 255;
    --style-leaf: linear-gradient(110deg, #ffa3d8, #a5bcff 25%, #93ffe2 50%, #fff4a0 75%, #ffa3d8);
}
.profile-page.profile-style-gold {
    --style-accent: #e6be63;
    --style-ink: #2b1e05;
    --style-glow: 230 190 99;
    --style-leaf: linear-gradient(120deg, #fde9a8, #d6a53d 40%, #f7d97f 62%, #b8862e);
}
/* On a light page the colours are deeper, so text stays readable. */
body[data-mode="light"] .profile-page.profile-style-titan {
    --style-accent: #6a43cc;
    --style-ink: #f7f2ff;
    --style-leaf: linear-gradient(120deg, #7d52e0, #4b2a9e 45%, #6a43cc 70%, #3a1f80);
}
body[data-mode="light"] .profile-page.profile-style-mythic {
    --style-accent: #4f63cf;
    --style-ink: #f4f6ff;
    --style-leaf: linear-gradient(110deg, #c2408f, #4f63cf 28%, #14917c 55%, #a67c0c 80%, #c2408f);
}
body[data-mode="light"] .profile-page.profile-style-gold {
    --style-accent: #a8791c;
    --style-ink: #fffaf0;
    --style-leaf: linear-gradient(120deg, #c9962f, #8d6415 45%, #b8862e 70%, #7a5512);
}
.profile-page:is(.profile-style-titan, .profile-style-mythic, .profile-style-gold) {
    --accent: var(--style-accent);
    --accent-ink: var(--style-ink);
}
.profile-page:is(.profile-style-titan, .profile-style-mythic, .profile-style-gold) :is(.profile-identity, .profile-card):not(#style) {
    background:
        radial-gradient(ellipse at 100% 0%, rgb(var(--style-glow) / 14%), transparent 60%),
        radial-gradient(ellipse at 0% 100%, rgb(var(--style-glow) / 8%), transparent 55%),
        var(--panel-bg) !important;
    /* !important: a styled profile keeps its look for viewers using the Elegant style too. */
    border-color: rgb(var(--style-glow) / 45%) !important;
    box-shadow: inset 0 1px 0 rgb(var(--style-glow) / 16%), 0 0 34px rgb(var(--style-glow) / 10%);
}
.profile-page:is(.profile-style-titan, .profile-style-mythic, .profile-style-gold) .profile-cover-accent {
    background: linear-gradient(105deg, rgb(var(--style-glow) / 30%), rgb(var(--style-glow) / 10%) 55%, transparent);
    border-bottom-color: rgb(var(--style-glow) / 35%);
}
.profile-page:is(.profile-style-titan, .profile-style-mythic, .profile-style-gold) :is(#profileUsername, .profile-hero-stat strong) {
    color: var(--style-accent);
    background: var(--style-leaf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Mythic is holographic, like its label: pastel glows in the cards, a shifting rainbow edge around them,
   a holographic sheen across the top, and the name and numbers drifting through the same colours. */
.profile-page.profile-style-mythic {
    --mythic-holo: linear-gradient(110deg, #ffa3d8, #a5bcff 20%, #93ffe2 40%, #fff4a0 60%, #ffb7a3 80%, #ffa3d8);
}
.profile-page.profile-style-mythic :is(.profile-identity, .profile-card):not(#style) {
    position: relative;
    background:
        radial-gradient(ellipse at 100% 0%, rgb(255 163 216 / 16%), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgb(147 255 226 / 12%), transparent 55%),
        radial-gradient(ellipse at 50% 120%, rgb(165 188 255 / 12%), transparent 60%),
        var(--panel-bg) !important;
    border-color: transparent !important;
    box-shadow: 0 0 34px rgb(165 188 255 / 12%), 0 0 60px rgb(255 163 216 / 6%);
}
.profile-page.profile-style-mythic :is(.profile-identity, .profile-card)::before {
    position: absolute;
    z-index: 2;
    inset: -1px;
    padding: 1.5px;
    background: var(--mythic-holo);
    background-size: 300% 100%;
    border-radius: inherit;
    content: "";
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: earned-label-holo 9s linear infinite;
}
.profile-page.profile-style-mythic .profile-cover-accent {
    background: var(--mythic-holo);
    background-size: 300% 100%;
    border-bottom-color: rgb(255 255 255 / 25%);
    opacity: .32;
    animation: earned-label-holo 12s linear infinite;
}
.profile-page.profile-style-mythic :is(#profileUsername, .profile-hero-stat strong) {
    background: var(--mythic-holo);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: earned-label-holo 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .profile-page.profile-style-mythic :is(#profileUsername, .profile-hero-stat strong, .profile-cover-accent),
    .profile-page.profile-style-mythic :is(.profile-identity, .profile-card)::before { animation: none; }
}

/* ----- Hero ----- */

.profile-identity {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 26px 28px 20px;
    background-color: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.profile-cover-accent {
    position: absolute;
    inset: 0 0 auto;
    height: 84px;
    background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 17%, var(--panel-bg)), color-mix(in srgb, var(--accent) 5%, var(--panel-bg)) 56%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ----- Training Aura (Premium): light drawn from the person's training, behind the hero ----- */
.profile-aura {
    --aura-intensity: 0.6;
    position: absolute;
    inset: 0 0 auto;
    height: 190px;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
    mask-image: linear-gradient(180deg, #000 45%, transparent);
}
.profile-aura[hidden] { display: none; }
.profile-identity:has(.profile-aura:not([hidden])) .profile-cover-accent { opacity: .35; }
/* A soft ribbon of light per trained body area, in the viewer's accent colour. */
.aura-ribbon {
    position: absolute;
    top: var(--ribbon-top);
    left: -15%;
    width: 130%;
    height: var(--ribbon-height);
    background: linear-gradient(90deg, transparent 2%, color-mix(in srgb, var(--accent) var(--ribbon-strength), transparent) 32%, color-mix(in srgb, var(--accent) calc(var(--ribbon-strength) * .55), transparent) 68%, transparent 98%);
    border-radius: 50%;
    filter: blur(16px);
    opacity: calc(0.4 + var(--aura-intensity) * 0.6);
    transform: translateY(-50%) rotate(var(--ribbon-tilt));
}
/* A fine, sharp line through each ribbon keeps it crisp instead of blurry. */
.aura-line {
    position: absolute;
    top: var(--ribbon-top);
    left: -5%;
    width: 110%;
    height: 1px;
    background: linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--accent) 55%, transparent) 38%, color-mix(in srgb, var(--accent) 25%, transparent) 72%, transparent 95%);
    opacity: calc(0.3 + var(--aura-intensity) * 0.7);
    transform: translateY(-50%) rotate(var(--ribbon-tilt));
}
/* Cardio: a brighter trail with a travelling highlight. */
.aura-trail {
    position: absolute;
    top: var(--ribbon-top);
    left: 0;
    width: var(--trail-width);
    height: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 85%, white) 70%, transparent);
    background-size: 200% 100%;
    border-radius: 999px;
    box-shadow: none;
    opacity: calc(0.35 + var(--aura-intensity) * 0.65);
    transform: translateY(-50%) rotate(var(--ribbon-tilt));
}
.aura-ribbon,
.aura-line { animation: aura-drift 16s ease-in-out var(--aura-delay) infinite alternate; }
.aura-trail { animation: aura-trail 6s linear infinite; }
@keyframes aura-drift {
    from { transform: translate(-3%, -50%) rotate(var(--ribbon-tilt)); }
    to { transform: translate(3%, -42%) rotate(calc(var(--ribbon-tilt) * -0.5)); }
}
@keyframes aura-trail {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* Orbits: tilted rings turning slowly around the avatar, with a soft glow at their centre. */
.profile-aura { --orbit-x: 112px; --orbit-y: 48%; }
.aura-core {
    position: absolute;
    top: var(--orbit-y);
    left: var(--orbit-x);
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%);
    border-radius: 50%;
    opacity: calc(0.4 + var(--aura-intensity) * 0.6);
    transform: translate(-50%, -50%);
}
.aura-orbit {
    position: absolute;
    top: var(--orbit-y);
    left: var(--orbit-x);
    width: var(--orbit-size);
    height: calc(var(--orbit-size) * 0.36);
    border: 1.5px solid color-mix(in srgb, var(--accent) var(--orbit-strength), transparent);
    border-radius: 50%;
    box-shadow: inset 0 0 16px color-mix(in srgb, var(--accent) 14%, transparent);
    opacity: calc(0.35 + var(--aura-intensity) * 0.65);
    transform: translate(-50%, -50%) rotate(var(--orbit-tilt));
    animation: aura-orbit var(--orbit-seconds) linear infinite;
}
/* Cardio: a bright dot on the edge of a faster ring, so it circles the avatar. */
.aura-orbit-satellite { border-style: dashed; }
.aura-orbit-satellite::after {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: color-mix(in srgb, var(--accent) 80%, white);
    border-radius: 50%;
    box-shadow: none;
    content: "";
}
@keyframes aura-orbit {
    from { transform: translate(-50%, -50%) rotate(var(--orbit-tilt)); }
    to { transform: translate(-50%, -50%) rotate(calc(var(--orbit-tilt) + 360deg)); }
}

/* Waves: smooth curves flowing sideways, each with a soft glow under a fine line. */
.aura-waves { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aura-wave { opacity: calc(0.35 + var(--aura-intensity) * 0.65); animation: aura-wave var(--wave-seconds) linear infinite; }
.aura-wave path { fill: none; stroke: color-mix(in srgb, var(--accent) var(--wave-strength), transparent); }
.aura-wave-glow { stroke-width: 14; opacity: .16; filter: blur(5px); }
.aura-wave-line { stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.aura-wave-cardio path { stroke: color-mix(in srgb, var(--accent) 80%, white); }
.aura-wave-cardio .aura-wave-line { stroke-width: 2; }
@keyframes aura-wave {
    from { transform: translateX(0); }
    to { transform: translateX(var(--wave-shift)); }
}

@media (max-width: 600px) {
    .profile-identity .profile-aura { --orbit-x: 64px; --orbit-y: 40%; }
}
@media (prefers-reduced-motion: reduce) {
    .aura-ribbon,
    .aura-line,
    .aura-trail,
    .aura-orbit,
    .aura-wave { animation: none !important; }
}

/* The page-wide layer: wider, softer and faint, so the rest of the profile glows a little too. */
.profile-page { position: relative; }
.profile-page > .profile-overview { position: relative; z-index: 1; }
.profile-page-aura {
    inset: -50px -40px;
    z-index: 0;
    height: auto;
    opacity: .35;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 220px, #000 75%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 220px, #000 75%, transparent);
}
.profile-page-aura .aura-ribbon { height: calc(var(--ribbon-height) * 2.6); filter: blur(34px); }
.profile-page-aura .aura-line,
.profile-page-aura .aura-trail,
.profile-page-aura .aura-orbit,
.profile-page-aura .aura-wave-line { display: none; }
/* Orbits and Waves keep only their soft glow behind the rest of the page. */
.profile-page-aura .aura-core { width: 700px; height: 700px; filter: blur(30px); }
.profile-page-aura .aura-wave-glow { stroke-width: 40; opacity: .5; filter: blur(18px); }
/* Cards pick up the accent colour at their edges. */
.profile-page.has-aura .profile-card {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 10%, transparent);
}
.profile-screen .profile-page.has-aura .profile-identity { border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 16%, transparent); }


.profile-identity-main {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 124px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding-top: 14px;
}

.profile-identity-copy { display: grid; min-width: 0; align-content: center; padding-top: 18px; }
.profile-identity-copy h2 { min-width: 0; overflow-wrap: anywhere; }
.profile-identity-copy .profile-created-at { margin-top: 6px; }

/* Avatar inside a ring that fills up with XP; the level sits on a badge at the bottom. */
.profile-avatar-ring {
    --level-progress: 0;
    position: relative;
    display: grid;
    width: 124px;
    height: 124px;
    place-items: center;
}
.profile-level-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.profile-level-ring circle { fill: none; stroke-width: 5; }
.profile-level-ring-track { stroke: color-mix(in srgb, var(--accent) 16%, var(--border)); }
.profile-level-ring-fill {
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-dasharray: calc(var(--level-progress) * 1) 100;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent));
    transition: stroke-dasharray 600ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.profile-level-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    padding: 3px 10px;
    color: var(--accent-ink);
    background: var(--accent);
    border: 2px solid var(--panel-bg);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    white-space: nowrap;
    transform: translateX(-50%);
}
.profile-level-badge strong { font-size: 13px; }
.profile-level-badge[hidden] { display: none; }
/* Premium crown on top of the avatar, tilted like it is being worn. */
.profile-premium-crown { position: absolute; top: -13px; left: 50%; z-index: 2; width: 36px; height: 36px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 30%, var(--panel-bg)), var(--panel-bg)); border-width: 2px; box-shadow: 0 4px 10px rgb(0 0 0 / 30%); transform: translateX(-50%) rotate(-8deg); }
.profile-premium-crown[hidden] { display: none; }
.profile-level-progress-text { margin-top: 8px; color: var(--accent); font-size: 11px; font-weight: 600; }
.profile-level-progress-text[hidden] { display: none; }

.profile-avatar-frame {
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    overflow: hidden;
    background-color: var(--soft-bg);
    border: 1px solid var(--border);
    border-radius: 50%;
}

.profile-avatar-frame.is-loading {
    background: linear-gradient(100deg, var(--soft-bg) 25%, color-mix(in srgb, var(--border) 72%, var(--panel-bg)) 48%, var(--soft-bg) 70%);
    background-size: 220% 100%;
    animation: skeleton-shimmer 1.35s ease-in-out infinite;
}

.profile-avatar,
.profile-avatar-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-fallback {
    display: grid;
    place-items: center;
    color: var(--accent);
    font-size: 42px;
    font-weight: bold;
}

.profile-avatar-fallback[hidden] { display: none; }

.profile-kicker {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

.profile-identity h2 {
    margin-top: 7px;
    color: var(--text);
    font-size: 28px;
}

.profile-email,
.profile-created-at {
    margin-top: 5px;
    color: var(--muted-text);
    font-size: 11px;
}

.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.profile-badges[hidden] { display: none; }
.profile-label-badge,
.profile-country-badge { width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.profile-label-badge { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.profile-country-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--border); }
.profile-country-flag { width: 20px; height: 15px; object-fit: cover; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 4px; }
.profile-label-badge[hidden] { display: none; }
.profile-country-badge[hidden] { display: none; }

/* Key numbers on the left of the hero footer, your actions on the right. */
.profile-identity-footer { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.profile-identity-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }

.profile-hero-stats { display: flex; flex-wrap: wrap; align-items: stretch; }
.profile-hero-stats[hidden] { display: none; }
.profile-hero-stat {
    display: flex;
    min-width: 72px;
    flex-direction: column;
    gap: 4px;
    padding: 0 18px;
    border-left: 1px solid var(--border);
}
.profile-hero-stat:first-child { padding-left: 0; border-left: 0; }
.profile-hero-stat strong { color: var(--text); font-size: 22px; line-height: 1.1; }
.profile-hero-stat span { color: var(--muted-text); font-size: 12px; font-weight: 600; }
.profile-hero-stat strong.count-bump { animation: count-bump 360ms ease-out; }

.profile-friends-button {
    align-items: flex-start;
    margin: 0;
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.profile-friends-button:disabled { cursor: default; }
.profile-friends-button:not(:disabled):hover strong,
.profile-friends-button:not(:disabled):hover span { color: var(--accent); }
.profile-friends-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

@keyframes count-bump {
    0% { transform: scale(1); color: var(--text); }
    45% { transform: scale(1.22); color: var(--accent); }
    100% { transform: scale(1); color: var(--text); }
}

/* ----- Cards below the hero ----- */

.profile-card {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 14px;
    padding: 22px;
    background: color-mix(in srgb, var(--panel-bg) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}
.profile-card[hidden] { display: none; }
.profile-card-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.profile-card-heading h2 { color: var(--text); font-size: 16px; }
.profile-card-meta { color: var(--muted-text); font-size: 11px; }
.profile-card-meta strong { color: var(--accent); font-size: 13px; }

.profile-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.profile-insights[hidden] { display: none; }

/* 12-week heatmap: a day-name column, then one column per week (Monday at the top). */
.profile-heatmap {
    display: grid;
    grid-template-columns: auto repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
    gap: 4px;
    width: 100%;
    max-width: 360px;
}
.profile-heatmap-day { padding-right: 4px; color: var(--muted-text); font-size: 9px; line-height: 1; align-self: center; }
.profile-heatmap-cell,
.profile-heatmap-legend i {
    aspect-ratio: 1;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    border-radius: 4px;
}
.profile-heatmap-cell[data-level="1"],
.profile-heatmap-legend i[data-level="1"] { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.profile-heatmap-cell[data-level="2"],
.profile-heatmap-legend i[data-level="2"] { background: var(--accent); }
.profile-heatmap-cell.is-today { outline: 1px solid var(--text); outline-offset: 1px; }
.profile-heatmap-cell.is-future { background: transparent; }
.profile-heatmap-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.profile-heatmap-footer p { color: var(--muted-text); font-size: 11px; }
.profile-heatmap-legend { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-text); font-size: 10px; }
.profile-heatmap-legend i { display: inline-block; width: 11px; }

/* Records: two compact lists instead of a grid of big cards. */
.profile-record-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.profile-record-group { display: grid; align-content: start; gap: 4px; min-width: 0; }
.profile-record-group[hidden] { display: none; }
/* Group titles in the accent colour with a line under them, so each list clearly starts there. */
.profile-record-group h3 {
    padding-bottom: 8px;
    color: var(--accent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
    font-size: 12px;
    font-weight: 600;
}
.profile-record-list { display: grid; margin: 0; padding: 0; list-style: none; }
.profile-record-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.profile-record-row:last-child { border-bottom: 0; }
.profile-record-name { min-width: 0; color: var(--text); font-size: 13px; font-weight: 600; }
.profile-record-result { display: grid; justify-items: end; gap: 2px; text-align: right; }
.profile-record-result strong { color: var(--text); font-size: 18px; line-height: 1.1; }
.profile-record-result small { color: var(--muted-text); font-size: 10px; }
.profile-record-row.is-empty .profile-record-name,
.profile-record-row.is-empty .profile-record-result strong { color: var(--muted-text); font-weight: 600; }
.profile-record-row.is-empty .profile-record-result strong { font-size: 12px; }
.profile-record-skeleton .skeleton-line { width: 34%; }
.profile-record-skeleton .skeleton-line:last-child { width: 22%; height: 16px; }

.profile-run-improvement { display: flex; align-items: center; gap: 8px; padding: 11px 13px; color: var(--muted-text); background: var(--soft-bg); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; line-height: 1.4; }
.profile-run-improvement::before { width: 7px; height: 7px; flex: 0 0 7px; background: var(--accent); border-radius: 50%; content: ""; }
.profile-run-improvement[hidden] { display: none; }

.profile-empty {
    color: var(--muted-text);
    font-size: 13px;
}

.private-profile-notice {
    padding: 18px 20px;
    background-color: var(--panel-bg);
    color: var(--muted-text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

/* ----- Friends dialog ----- */

.profile-friends-backdrop[hidden] { display: none; }

.profile-friends-backdrop {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgb(0 0 0 / 64%);
}

.profile-friends-dialog {
    width: min(420px, 100%);
    max-width: 100%;
    max-height: min(75dvh, 560px);
    overflow: hidden;
    padding: 20px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgb(0 0 0 / 40%);
}

.profile-friends-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.profile-friends-dialog-header h2 {
    color: var(--text);
    font-size: 20px;
}

.profile-friends-dialog-header button {
    width: 32px;
    height: 32px;
    background: transparent;
    color: var(--muted-text);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
}

.profile-friends-list {
    display: grid;
    max-height: min(58dvh, 420px);
    overflow-y: auto;
}

.profile-friend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.profile-friend-link {
    min-width: 0;
    flex: 1;
    padding: 13px 4px;
    color: var(--text);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

.profile-friend-link:hover { color: var(--accent); }

.remove-profile-friend {
    flex: 0 0 auto;
    padding: 7px 9px;
    background: transparent;
    color: #e56a74;
    border: 1px solid color-mix(in srgb, #e56a74 65%, var(--border));
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
}

.remove-profile-friend:hover {
    background: #e56a74;
    color: #171215;
    border-color: #e56a74;
}

.remove-profile-friend:disabled {
    cursor: wait;
    opacity: 0.55;
}

/* ----- Visibility switch and friend buttons ----- */

.profile-privacy-setting { display: grid; gap: 5px; }
.profile-privacy-heading { color: var(--muted-text); font-size: 11px; font-weight: 700; }
.profile-privacy-control {
    --privacy-index: 0;
    position: relative;
    display: grid;
    width: min(100%, 190px);
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 3px;
    background: var(--soft-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.profile-privacy-control[hidden] { display: none; }
.profile-privacy-indicator {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 2);
    background: var(--accent);
    border-radius: 6px;
    transform: translateX(calc(var(--privacy-index) * 100%));
    transition: transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1);
    pointer-events: none;
}
.profile-privacy-control button {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 7px 9px;
    color: var(--muted-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
    white-space: nowrap;
}
.profile-privacy-control button[aria-pressed="true"] { color: var(--accent-ink); font-weight: 700; }
.profile-privacy-control button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .profile-privacy-indicator,
    .profile-level-ring-fill { transition: none; }
}

.friend-request-button {
    padding: 8px 14px;
    background-color: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.friend-request-button:disabled {
    background-color: transparent;
    color: var(--muted-text);
    border-color: var(--border);
    cursor: default;
}

.profile-favourite-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}
.profile-favourite-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.profile-favourite-button:hover { border-color: var(--accent); }
.profile-favourite-button.is-favourite { color: var(--accent); border-color: var(--accent); }
.profile-favourite-button.is-favourite svg { fill: var(--accent); }
.profile-favourite-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-favourite-button:disabled { cursor: default; opacity: 0.6; }
.profile-favourite-button[hidden] { display: none; }

/* Cancel request / Decline / Remove friend beside the main friend button */
.profile-friend-secondary {
    padding: 8px 14px;
    color: var(--muted-text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}
.profile-friend-secondary:hover { color: var(--text); border-color: var(--text); }
.profile-friend-secondary.is-danger:hover { color: #ff737b; border-color: #e95d68; }
.profile-friend-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-friend-secondary:disabled { cursor: default; opacity: 0.6; }
.profile-friend-secondary[hidden] { display: none; }
.profile-friend-status { flex-basis: 100%; margin-top: 6px; color: #ff737b; font-size: 11px; line-height: 1.4; }
.profile-friend-status[hidden] { display: none; }

.private-profile-notice[hidden],
.profile-privacy-setting[hidden],
.friend-request-button[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .profile-insights { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .profile-identity { padding: 20px 18px 16px; }
    .profile-cover-accent { height: 70px; }
    .profile-identity-main { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding-top: 10px; }
    .profile-avatar-ring { width: 92px; height: 92px; }
    .profile-avatar-frame { width: 76px; height: 76px; }
    .profile-avatar-fallback { font-size: 32px; }
    .profile-level-badge { padding: 2px 8px; font-size: 9px; }
    .profile-level-badge strong { font-size: 11px; }
    .profile-premium-crown { top: -11px; width: 30px; height: 30px; }
    .profile-identity h2 { font-size: 22px; }
    .profile-identity-copy { padding-top: 12px; }
    .profile-identity-footer { flex-direction: column; align-items: stretch; gap: 14px; }
    /* Four numbers in one row that shares the width evenly. */
    .profile-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .profile-hero-stats[hidden] { display: none; }
    .profile-hero-stat { min-width: 0; padding: 0 8px; }
    .profile-hero-stat strong { font-size: 18px; }
    .profile-hero-stat span { font-size: 11px; }
    .profile-identity-actions { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
    /* Friends, Favourite and Remove friend stay on one row: compact buttons, and the heart without its words. */
    .friend-request-button,
    .profile-favourite-button,
    .profile-friend-secondary { padding: 7px 11px; font-size: 11px; white-space: nowrap; }
    .profile-favourite-button { padding-inline: 9px; }
    .profile-favourite-button span { display: none; }
    .profile-card { padding: 16px; }
    .profile-heatmap { gap: 3px; }
    .profile-record-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
    .profile-identity { padding-inline: 14px; }
    .profile-hero-stat { padding: 0 5px; }
}

/* ----- Level: the badge opens the level road on your own profile ----- */
button.profile-level-badge { font-family: inherit; line-height: inherit; }
button.profile-level-badge:not(:disabled) { cursor: pointer; transition: box-shadow 160ms ease; }
button.profile-level-badge:not(:disabled):hover { box-shadow: none; }
button.profile-level-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.profile-level-badge:disabled { opacity: 1; }
.profile-level-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.profile-level-row .profile-level-progress-text { margin-top: 8px; }
.profile-level-road-button { margin-top: 8px; padding: 0; color: var(--text); background: none; border: 0; cursor: pointer; font-size: 11px; font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.profile-level-road-button:hover { color: var(--accent); }
.profile-level-road-button[hidden] { display: none; }

/* ----- Labels earned on the level road -----
   Each has its own material, rarer the higher the level: iron (Grinder), chrome (Machine), bronze
   (Veteran), ember (Beast), sapphire (Elite), amethyst (Titan), holographic (Mythic) and gold (Legend). */
.earned-label {
    position: relative;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    padding: 4px 10px;
    color: var(--label-ink);
    background: var(--label-bg);
    border: 1px solid var(--label-edge);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 0 12px var(--label-glow, transparent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    isolation: isolate;
}
/* A light sweeping across the higher labels now and then. */
.earned-label::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 45%) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%;
    background-position: 130% 0;
    content: "";
    opacity: 0;
}
.earned-label--grinder { --label-bg: linear-gradient(135deg, #4a4e55, #2a2d32 60%, #3c4046); --label-ink: #d4d7dc; --label-edge: #5c616a; }
.earned-label--machine { --label-bg: linear-gradient(135deg, #f1f4f7, #a3abb5 45%, #e4e8ed 70%, #858d97); --label-ink: #1b1f25; --label-edge: #c9ced5; }
.earned-label--veteran { --label-bg: linear-gradient(135deg, #e8ad73, #9a5a2c 50%, #d79458); --label-ink: #2b1609; --label-edge: #c07d44; }
.earned-label--beast { --label-bg: linear-gradient(135deg, #ff7a4d, #a3201b 55%, #e8502e); --label-ink: #fff4ee; --label-edge: #d0412c; --label-glow: rgb(232 80 46 / 35%); }
.earned-label--elite { --label-bg: linear-gradient(135deg, #8ccaff, #1d4ea6 55%, #5ea6f2); --label-ink: #f1f8ff; --label-edge: #4486dc; --label-glow: rgb(68 134 220 / 35%); }
.earned-label--titan { --label-bg: linear-gradient(135deg, #c09cff, #3c1c70 55%, #8f60f2); --label-ink: #f7f1ff; --label-edge: #7d55d8; --label-glow: rgb(125 85 216 / 38%); }
.earned-label--mythic {
    --label-bg: linear-gradient(110deg, #ffa3d8, #a5bcff 25%, #93ffe2 50%, #fff4a0 75%, #ffa3d8);
    --label-ink: #1c1633;
    --label-edge: rgb(255 255 255 / 70%);
    --label-glow: rgb(165 188 255 / 45%);
    background-size: 300% 100%;
    animation: earned-label-holo 6s linear infinite;
}
/* LEGEND: solid gold with a small star in your accent colour. */
.earned-label--legend {
    --label-bg: linear-gradient(135deg, #fde9a8, #d6a53d 40%, #f7d97f 62%, #b8862e);
    --label-ink: #2b1e05;
    --label-edge: #f0cf78;
    --label-glow: rgb(240 207 120 / 45%);
}
.earned-label--legend::before { color: color-mix(in srgb, var(--accent) 30%, #3a2706); content: "✦"; font-size: 11px; letter-spacing: 0; }
.earned-label--titan::after,
.earned-label--mythic::after,
.earned-label--legend::after { opacity: 1; animation: earned-label-sweep 4.5s ease-in-out infinite; }
@keyframes earned-label-sweep {
    0%, 55% { background-position: 130% 0; }
    85%, 100% { background-position: -30% 0; }
}
@keyframes earned-label-holo { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) {
    .earned-label--mythic,
    .earned-label::after { animation: none; }
}
/* On the level road, the label shows under the reward's title. */
.level-road-copy .earned-label { margin: 3px 0 1px; color: var(--label-ink); font-size: 10px; line-height: 1.3; }

/* ----- Level road dialog ----- */
.level-road-dialog { width: min(520px, calc(100vw - 24px)); max-height: min(88vh, 820px); max-height: min(88dvh, 820px); margin: auto; padding: 0; overflow: hidden; color: var(--text); background: var(--panel-bg); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 16px; box-shadow: 0 24px 64px rgb(0 0 0 / 50%); }
/* No blur behind the dialog: blurring the animated profile underneath made scrolling the road lag. */
.level-road-dialog::backdrop { background: rgb(7 9 13 / 80%); }
/* While the road is open, the profile's aura and style animations behind it pause. */
.is-level-road-open .profile-page :is(*, *::before, *::after) { animation-play-state: paused !important; }
.level-road-dialog[open] { display: flex; animation: level-road-enter 220ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.level-road-frame { display: flex; width: 100%; min-height: 0; flex-direction: column; }
.level-road-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.level-road-kicker { color: var(--accent); font-size: 12px; font-weight: 600; }
.level-road-header h2 { margin-top: 4px; font-size: 26px; }
.level-road-progress-text { margin-top: 3px; color: var(--muted-text); font-size: 12px; }
.level-road-close { width: 32px; height: 32px; color: var(--muted-text); background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1; }
.level-road-close:hover { color: var(--text); }
.level-road-xp { height: 6px; margin: 0 22px 12px; overflow: hidden; background: var(--soft-bg); border-radius: 999px; }
.level-road-xp span { display: block; height: 100%; background: var(--accent); border-radius: inherit; box-shadow: none; }
.level-road-status { margin: 0 22px 10px; padding: 9px 12px; color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 8px; font-size: 12px; line-height: 1.45; }
.level-road-status.is-error { color: #ff8a92; background: color-mix(in srgb, #e95d68 10%, transparent); border-color: color-mix(in srgb, #e95d68 40%, var(--border)); }
.level-road-status[hidden] { display: none; }

/* The road: a line down the left with a marker per reward; reached parts are lit. */
/* The road scrolls in its own box (with the slim popup scrollbar from components.css). */
.level-road-scroll { min-height: 0; padding: 6px 22px 24px; overflow-y: auto; overscroll-behavior: contain; }
/* One line behind the markers, filled up to your level. */
.level-road-path { position: relative; }
.level-road-track { position: absolute; top: 0; left: 20px; width: 4px; background: var(--border); border-radius: 999px; }
.level-road-fill { display: block; width: 100%; height: 0; background: var(--accent); border-radius: inherit; box-shadow: none; transition: height 700ms cubic-bezier(0.2, 0.75, 0.25, 1); }
.level-road-list { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.level-road-node { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; }
.level-road-marker { position: relative; z-index: 1; display: grid; width: 44px; height: 44px; place-items: center; color: var(--muted-text); background: var(--panel-bg); border: 2px solid var(--border); border-radius: 50%; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.level-road-node.is-ready .level-road-marker,
.level-road-node.is-claimed .level-road-marker { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: none; }
/* The glow of a reward that's ready fades in and out (opacity only, so it doesn't repaint while scrolling). */
.level-road-node.is-ready .level-road-marker::after { position: absolute; inset: -2px; border-radius: 50%; box-shadow: none; content: ""; opacity: 0; animation: level-road-ready 2.2s ease-in-out infinite; }
.level-road-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--soft-bg) 70%, transparent); border: 1px solid var(--border); border-radius: 12px; }
.level-road-node.is-locked .level-road-card { opacity: .62; }
.level-road-node.is-ready .level-road-card { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--soft-bg)); }
.level-road-node.is-label .level-road-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.level-road-icon { display: grid; width: 34px; height: 34px; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 8px; }
.level-road-icon svg { width: 18px; height: 18px; fill: var(--accent); }
.level-road-copy { display: grid; min-width: 0; gap: 3px; }
/* Several rewards at one level: one entry listing each of them. */
.level-road-group { display: grid; gap: 8px; margin: 6px 0 4px; padding: 0; list-style: none; }
.level-road-group-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; background: color-mix(in srgb, var(--panel-bg) 60%, transparent); border: 1px solid var(--border); border-radius: 8px; }
.level-road-group-icon { display: grid; width: 26px; height: 26px; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 6px; }
.level-road-group-icon svg { width: 14px; height: 14px; fill: var(--accent); }
.level-road-group-copy { display: grid; min-width: 0; gap: 4px; justify-items: start; }
.level-road-group-copy strong { font-size: 13px; }
.level-road-copy strong { font-size: 14px; }
.level-road-copy span { color: var(--muted-text); font-size: 11px; line-height: 1.4; }
.level-road-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.level-road-actions:has(select) { grid-column: 1 / -1; justify-content: stretch; }
.level-road-actions.is-choices { grid-column: 2 / -1; justify-content: flex-start; }
.level-road-group-row .level-road-actions.is-choices { grid-column: 1 / -1; }
.level-road-button { padding: 7px 12px; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }
.level-road-button.is-primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.level-road-button:disabled { cursor: wait; opacity: .6; }
.level-road-friend { flex: 1 1 140px; min-width: 0; padding: 7px 10px; color: var(--text); background: var(--soft-bg); border: 1px solid var(--border); border-radius: 8px; }
.level-road-done { display: grid; width: 26px; height: 26px; place-items: center; color: var(--accent-ink); background: var(--accent); border-radius: 50%; font-size: 13px; font-weight: 800; }
@keyframes level-road-enter {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
@keyframes level-road-ready {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .level-road-dialog[open],
    .level-road-node.is-ready .level-road-marker::after { animation: none; }
    .level-road-fill { transition: none; }
}
@media (max-width: 600px) {
    .level-road-header { padding: 18px 16px 10px; }
    .level-road-xp, .level-road-status { margin-left: 16px; margin-right: 16px; }
    .level-road-scroll { padding: 6px 16px 20px; }
    .level-road-card { grid-template-columns: minmax(0, 1fr) auto; }
    .level-road-icon { display: none; }
    .level-road-actions.is-choices { grid-column: 1 / -1; }
    .level-road-actions.is-choices .level-road-button { flex: 1 1 0; }
}

/* Emote rewards on the level road */
.level-road-emotes { display: flex; gap: 6px; margin: 2px 0; }
.level-road-card-sample { display: block; width: 44px; height: 26px; margin: 4px 0 2px; border-radius: 6px; }
.level-road-card-sample.is-titan { background: linear-gradient(135deg, #e3d6ff, #8b5df0 45%, #c4adff 70%, #6a3fd0); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 25%); }
.level-road-card-sample.is-mythic { background: linear-gradient(110deg, #ffa3d8, #a5bcff 25%, #93ffe2 50%, #fff4a0 75%, #ffa3d8); background-size: 300% 100%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%); animation: earned-label-holo 6s linear infinite; }
.level-road-card-sample.is-carbon { background: linear-gradient(135deg, rgb(255 255 255 / 12%), transparent 55%), repeating-linear-gradient(45deg, #26292f 0 3px, #131418 3px 6px); box-shadow: inset 0 0 0 1px #9aa3ae; }
.level-road-card-sample.is-aurora { background: radial-gradient(ellipse at 30% 60%, rgb(124 245 200 / 70%), transparent 60%), radial-gradient(ellipse at 75% 40%, rgb(196 140 255 / 60%), transparent 55%), #071122; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%); }
.level-road-card-sample.is-gold { background: linear-gradient(135deg, #f6dc96, #d9a94a 45%, #f3d27e 70%, #b98a35); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 25%); }
.level-road-emote { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 40%)); }
.level-road-node.is-locked .level-road-emote { filter: grayscale(.7) brightness(.8); }

/* ----- Managing your personal records (js/ui/recordsDialog.js) ----- */
.profile-manage-records { padding: 5px 12px; color: var(--accent); background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700; }
.profile-manage-records:hover { color: var(--accent-ink); background: var(--accent); }
.profile-manage-records[hidden] { display: none; }
.records-dialog { width: min(480px, calc(100vw - 24px)); max-height: min(85vh, 760px); max-height: min(85dvh, 760px); margin: auto; padding: 0; overflow: hidden; color: var(--text); background: var(--panel-bg); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 16px; box-shadow: 0 24px 64px rgb(0 0 0 / 50%); }
.records-dialog[open] { display: flex; }
.records-dialog::backdrop { background: rgb(7 9 13 / 78%); }
.records-dialog-frame { display: flex; width: 100%; min-height: 0; flex-direction: column; }
.records-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 10px; }
.records-dialog-kicker { color: var(--accent); font-size: 12px; font-weight: 600; }
.records-dialog-header h2 { margin-top: 4px; font-size: 22px; }
.records-dialog-close { width: 32px; height: 32px; color: var(--muted-text); background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1; }
.records-dialog-status { margin: 0 20px 8px; color: var(--muted-text); font-size: 13px; }
.records-dialog-status[hidden] { display: none; }
.records-dialog-list { display: grid; gap: 16px; min-height: 0; padding: 4px 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
.records-dialog-group { display: grid; gap: 6px; }
.records-dialog-group h3 { color: var(--muted-text); font-size: 12px; font-weight: 600; }
.records-dialog-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 10px; }
.records-dialog-copy { display: grid; gap: 2px; }
.records-dialog-copy strong { font-size: 15px; }
.records-dialog-copy strong.is-best { color: var(--accent); }
.records-dialog-copy small { color: var(--muted-text); font-size: 11px; }
.records-dialog-delete { padding: 6px 12px; color: var(--muted-text); background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700; }
.records-dialog-delete:hover { color: #ff7a85; border-color: color-mix(in srgb, #e95d68 50%, var(--border)); }
.records-dialog-delete.is-armed { color: #fff; background: #d94c58; border-color: #d94c58; }
.records-dialog-delete:disabled { cursor: wait; opacity: .6; }
.records-dialog-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.records-dialog-edit { padding: 6px 12px; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700; }
.records-dialog-edit:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.records-dialog-edit-form { display: flex; flex: 1; align-items: center; gap: 8px; }
.records-dialog-edit-form input { width: 0; min-width: 0; flex: 1; max-width: 140px; margin: 0; padding: 7px 10px; color: var(--text); background: var(--panel-bg); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; }
.records-dialog-edit-form > span { color: var(--muted-text); font-size: 12px; }
.records-dialog-save { margin-left: auto; padding: 6px 12px; color: var(--accent-contrast, #0b0d0b); background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700; }
.records-dialog-save:disabled { cursor: wait; opacity: .6; }
.records-dialog-row [hidden] { display: none; }