:root{--status-surface:#f4f5f7}html[data-theme=dark]{--status-surface:#17181c}
html{min-height:100%;background:var(--status-surface)!important}body{min-height:100dvh;background:var(--status-surface)!important}
#statusSurface{position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--status-surface);z-index:950;pointer-events:none;transform:translateZ(0)}
#page[data-page=profile]{overflow-anchor:auto}

/* Profile hero stays in the normal document flow and never follows the scroll. */
.profile-card.profile-hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;height:auto;padding:16px;margin-bottom:12px;isolation:isolate;border-radius:24px;background:linear-gradient(135deg,#fffdfbea,#fff8f1e0);border:1px solid #ffffffbd;box-shadow:0 8px 28px #42250c08;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden}
.profile-main-row{display:flex;align-items:center;gap:15px;min-width:0;width:100%}
.profile-avatar-wrap{position:relative;width:80px;height:80px;flex:0 0 80px;border:2px solid #ffffffc9;border-radius:50%;background:#ffffff52;box-shadow:0 0 0 4px #ffffff2c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.profile-hero .avatar{width:76px;height:76px;flex:0 0 76px;font-size:25px;border-radius:50%;overflow:hidden}.profile-hero .avatar img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;border-radius:50%}
.avatar-pencil{position:absolute;right:-5px;bottom:-3px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fffffff0;color:#4d4845;border:2px solid #ffffffd6;box-shadow:0 0 0 2px #ffffff3b,0 3px 9px #30200e16;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.avatar-pencil:before{content:'';position:absolute;inset:-9px;border-radius:50%}.avatar-pencil svg{width:15px;height:15px;pointer-events:none}.avatar-pencil:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.profile-identity{position:relative;min-width:0;flex:1;margin:0;text-align:left}.profile-identity h2{font-size:21px;line-height:1.18;letter-spacing:-.035em;margin:0;font-weight:750;overflow-wrap:anywhere;text-wrap:pretty}.profile-tags{display:flex;justify-content:flex-start;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}.profile-role,.profile-class{font-size:11px;line-height:1.3;font-weight:650;border-radius:20px;padding:5px 10px;background:var(--accentSoft);color:var(--accent)}.profile-class{background:var(--bg2);color:var(--ink2)}

/* The rank is an inset strip of the same profile card, not a separate large card. */
.profile-rank-inline{width:100%;margin-top:14px;padding:11px 12px 10px;border:1px solid color-mix(in srgb,var(--line2) 55%,transparent);border-radius:16px;background:color-mix(in srgb,var(--card) 60%,transparent);text-align:left}.profile-rank-button{display:flex;align-items:center;width:100%;gap:10px;padding:0;text-align:left}.profile-rank-copy{min-width:0;flex:1}.profile-rank-copy small{display:block;color:var(--ink2);font-size:10px;line-height:1.2;margin-bottom:2px}.profile-rank-copy strong{display:block;font-size:20px;line-height:1.12;letter-spacing:-.035em;margin-top:1px}.profile-rank-copy span{display:block;color:var(--ink2);font-size:11px;line-height:1.25;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.profile-rank-button>svg{width:17px;height:17px;flex:0 0 17px;color:var(--ink2)}.profile-rank-inline .rank-progress{height:5px;margin:9px 0 0}

/* Header avatar: full-bleed circular crop. The rank artwork itself is square. */
.hd-avatar{flex:0 0 44px;min-width:44px;max-width:44px;width:44px!important;height:44px!important;aspect-ratio:1;padding:0!important;border-radius:50%!important;overflow:hidden!important;clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%)}
.hd-avatar img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center!important;border-radius:50%!important;clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%)}

[data-theme=dark] .profile-card.profile-hero{background:linear-gradient(135deg,#303039eb,#25262dea);border-color:#ffffff1c;box-shadow:0 8px 28px #00000012}[data-theme=dark] .profile-avatar-wrap{border-color:#ffffff38;background:#ffffff0f;box-shadow:0 0 0 4px #ffffff0c}[data-theme=dark] .avatar-pencil{background:#41434df0;color:#f4f5f7;border-color:#ffffff38;box-shadow:0 0 0 2px #ffffff0c,0 3px 10px #0002}[data-theme=dark] .profile-rank-inline{background:#ffffff08;border-color:#ffffff10}
@media(max-width:899px){.profile-layout,.profile-layout>div:first-child{display:contents}.profile-stats{margin-bottom:14px}}
@media(min-width:900px){.profile-card.profile-hero{padding:18px}.profile-avatar-wrap{width:86px;height:86px;flex-basis:86px}.profile-hero .avatar{width:82px;height:82px;flex-basis:82px}.profile-identity h2{font-size:22px;max-width:none}.hd-avatar{flex-basis:36px;min-width:36px;max-width:36px;width:36px!important;height:36px!important}}
@media(prefers-reduced-motion:reduce){.profile-hero *{animation:none!important;transition:none!important}}