/* Roblox 2020-style profile page. */
.p20{max-width:1000px}
.p20-header{display:flex;align-items:center;gap:24px;background:var(--surface);padding:24px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.p20-headshot{width:128px;height:128px;flex-shrink:0;border-radius:50%;overflow:hidden;background:#d4d6d8}
.p20-headshot canvas{display:block;width:100%;height:100%}
.p20-header-main{flex:1;min-width:0}
.p20-header h1{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:32px;font-weight:bold;overflow-wrap:anywhere}
.p20-header h1 .account-badge{width:26px;height:26px}
.p20-stats{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.p20-stats li{display:flex;flex-direction:column;gap:2px}
.p20-stats span{font-size:13px;color:var(--muted)}
.p20-stats a,.p20-stats strong{font-size:18px;font-weight:bold;color:inherit}
.p20-header-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:140px}
.p20-header-actions .notice{text-align:center;font-size:13px}
.p20-header-actions .outline,.p20-button{height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;font-size:15px;font-weight:500;color:inherit;background:transparent;border:1px solid #b8babe;border-radius:3px;text-decoration:none;cursor:pointer}
.p20-header-actions .outline:hover,.p20-button:hover{background:rgba(0,0,0,.06);text-decoration:none}
.p20-header-actions [data-friend-action="request"],.p20-header-actions [data-friend-action="accept"]{background:#00a2ff;border-color:#00a2ff;color:#fff}
.p20-header-actions [data-friend-action="request"]:hover,.p20-header-actions [data-friend-action="accept"]:hover{background:#32b5ff}
body.dark .p20-header-actions .outline,body.dark .p20-button{border-color:#656668}
body.dark .p20-header,body.dark .p20-panel{box-shadow:none}

.p20-tabs{display:flex;margin:18px 0 6px;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.p20-tabs a{flex:1;text-align:center;padding:12px 8px 10px;font-size:17px;font-weight:500;color:inherit;text-decoration:none;border-bottom:4px solid transparent}
.p20-tabs a:hover{border-bottom-color:#b8e3ff}
.p20-tabs a.selected{border-bottom-color:#00a2ff}
body.dark .p20-tabs{box-shadow:none}

.p20-section{margin-top:22px}
.p20-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.p20-section-head h2{margin:0;font-size:21px;font-weight:bold}
.p20-see-all{font-size:14px;font-weight:500;color:inherit;padding:6px 10px;border-radius:4px}
.p20-see-all:hover{background:rgba(0,0,0,.08);text-decoration:none}
.p20-panel{background:var(--surface);padding:16px 20px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.p20-bio{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.5}

.p20-wearing{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.p20-stage{position:relative}
.p20-stage .avatar-view{height:300px;background:radial-gradient(ellipse at 50% 40%,#f2f4f5 0%,#dfe2e5 60%,#c9cdd1 100%)}
body.dark .p20-stage .avatar-view{background:radial-gradient(ellipse at 50% 40%,#4a4d50 0%,#393b3d 70%)}
/* Profile avatar is 2D only; the controls stay in the page (the shared preview code expects them) but are hidden. */
.p20-stage .preview-controls{display:none}
.p20-worn{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;align-content:start}
.p20-thumb{position:relative;display:block;aspect-ratio:1;background:#e7e9eb;border-radius:3px;overflow:hidden}
.p20-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.p20-thumb img:not([src]){visibility:hidden}
.p20-thumb .face-thumb{background:#fff}
.p20-thumb:hover{outline:2px solid #b8babc}
.p20-thumb .limited-label{top:auto;bottom:4px;left:4px;font-size:9px;padding:1px 6px}
body.dark .p20-thumb{background:#4a4d50}
.p20-hint{margin:8px 0 0}
.p20-hint:empty,.p20 .form-error:empty{display:none}

.p20-friends{display:flex;gap:16px;overflow:hidden}
.p20-badges{display:flex;flex-wrap:wrap;gap:24px}
.p20-badge{display:flex;flex-direction:column;align-items:center;gap:6px;width:100px;text-align:center;font-size:14px;font-weight:500}
.p20-badge img{width:64px;height:64px;object-fit:contain}
.p20-collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px}
.p20-collectible{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none;min-width:0}
.p20-collectible-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p20-collectible:hover .p20-collectible-name{text-decoration:underline}
.p20-serial{font-size:12px;color:var(--muted)}
.p20-statistics{display:flex;gap:40px;flex-wrap:wrap}
.p20-statistics div{display:flex;flex-direction:column;gap:4px}
.p20-statistics span{font-size:13px;color:var(--muted)}
.p20-statistics strong{font-size:18px}

.p20-creations{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.p20-creation{color:inherit;text-decoration:none}
.p20-creation-thumb{aspect-ratio:1;border-radius:8px;overflow:hidden;background:#d4d6d8}
.p20-creation-thumb img{width:100%;height:100%;object-fit:cover}
.p20-creation h3{margin:8px 0 0;font-size:16px;font-weight:bold;overflow-wrap:anywhere}

@media(max-width:760px){.p20-header{flex-wrap:wrap}.p20-headshot{width:90px;height:90px}.p20-header h1{font-size:24px}.p20-header-actions{width:100%;flex-direction:row;flex-wrap:wrap}.p20-wearing{grid-template-columns:1fr}}

/* ⋯ menu at the top right of other players' profiles (Message, Chat, Trade Items, Follow, Block). */
.p20-header{position:relative}
.p20-more{position:absolute;top:10px;right:10px}
.p20-dots{display:flex;align-items:center;justify-content:center;gap:4px;width:40px;height:32px;padding:0;background:transparent;border:0;border-radius:4px;cursor:pointer}
.p20-dots:hover,.p20-dots[aria-expanded="true"]{background:rgba(0,0,0,.08)}
body.dark .p20-dots:hover,body.dark .p20-dots[aria-expanded="true"]{background:rgba(255,255,255,.1)}
.p20-dots span{width:5px;height:5px;border-radius:50%;background:currentColor}
.p20-menu{position:absolute;right:0;top:36px;z-index:20;min-width:170px;padding:6px 0;background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.p20-menu a,.p20-menu button{display:block;width:100%;padding:9px 16px;font-size:15px;text-align:left;color:inherit;background:transparent;border:0;cursor:pointer;text-decoration:none}
.p20-menu a:hover,.p20-menu button:hover{background:rgba(0,0,0,.06);text-decoration:none}
body.dark .p20-menu a:hover,body.dark .p20-menu button:hover{background:rgba(255,255,255,.08)}
.p20-menu .p20-danger{color:#d43131}
.p20-header-actions{margin-right:36px}
.p20-block-confirm{background:#d43131!important}

.p20-collection{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:14px}.p20-collection .p20-collectible{flex:0 0 110px;min-width:0}
/* Currently Playing (Roblox 2020 game card) and the "Playing <game>" line in the header. */
.p20-game{display:flex;align-items:center;gap:16px}
.p20-game-thumb{display:block;width:176px;aspect-ratio:16/9;flex-shrink:0;overflow:hidden;border-radius:3px;background:#d4d6d8}
body.dark .p20-game-thumb{background:#4a4d50}
.p20-game-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.p20-game-info{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.p20-game-name{font-size:18px;font-weight:bold;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p20-game-name:hover{text-decoration:underline}
.p20-game-meta{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.p20-game-dot{width:8px;height:8px;border-radius:50%;background:#02b757}
.p20-join{flex-shrink:0;min-width:150px;height:40px;padding:0 24px;font-size:16px;font-weight:bold;color:#fff;background:#00b06f;border:1px solid #00b06f;border-radius:3px;cursor:pointer}
.p20-join:hover:not(:disabled){background:#3fc679;border-color:#3fc679}
.p20-join:disabled{opacity:.5;cursor:default}
.p20-status{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:14px;font-weight:500;color:#02b757}
.p20-status a{color:#02b757;font-weight:bold}
.p20-status-icon{width:10px;height:10px;border-radius:50%;background:#02b757}
.p20-headshot.in-game{box-shadow:0 0 0 3px #02b757}
@media(max-width:700px){.p20-game{flex-wrap:wrap}.p20-game-thumb{width:120px}.p20-join{width:100%}}
/* Profile header in the current Roblox layout (overrides the older 2020 header styles above). */
.pm-header{padding:8px 0 0}
.pm-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:20px}
.pm-avatar{position:relative;width:128px;height:128px}
.pm .p20-headshot{width:128px;height:128px;border-radius:50%;background:#d4d6d8;box-shadow:none}
body.dark .pm .p20-headshot{background:#393b3d}
.pm-presence{position:absolute;right:-2px;bottom:4px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;color:#fff;background:#00b06f;border:3px solid var(--page,#f2f4f5);border-radius:50%}
body.dark .pm-presence{border-color:#232527}
.pm-presence svg{width:20px;height:20px}
.pm-names{align-self:center;min-width:0;padding-bottom:8px}
.pm-names h1{display:flex;align-items:center;gap:8px;margin:0;font-size:28px;font-weight:bold;line-height:1.2;overflow-wrap:anywhere}
.pm-names h1 .account-badge{width:24px;height:24px;margin-left:0}
.pm-handle{margin:4px 0 0;font-size:16px;color:var(--muted)}
.pm-side{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:330px;max-width:100%}
.pm-game{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;color:inherit;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.pm-game:hover{text-decoration:none;border-color:#9aa0a6}
.pm-game-thumb{width:48px;height:48px;flex-shrink:0;overflow:hidden;border-radius:6px;background:#d4d6d8}
.pm-game-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pm-game-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pm-game-text strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-game-text small{font-size:14px;color:var(--muted)}
.pm-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.pm-actions>.notice,.pm-actions>span.notice{display:none}
.pm-button,.pm-actions .outline{display:inline-flex;align-items:center;justify-content:center;flex:1;height:44px;padding:0 18px;font-size:16px;font-weight:bold;color:#1d1f22;background:#e3e5e7;border:0;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap}
.pm-button:hover,.pm-actions .outline:hover{background:#d4d7da;text-decoration:none}
body.dark .pm-button,body.dark .pm-actions .outline{color:#fff;background:#393b3d}
body.dark .pm-button:hover,body.dark .pm-actions .outline:hover{background:#4a4d50}
.pm-button.pm-join,.pm-actions [data-friend-action="accept"]{color:#fff;background:#335fff}
.pm-button.pm-join:hover:not(:disabled),.pm-actions [data-friend-action="accept"]:hover{background:#4f74ff}
.pm-button:disabled{opacity:.5;cursor:default}
.pm-more{position:relative;flex:none}
.pm-dots{flex:none;width:44px;padding:0;font-size:22px;letter-spacing:1px}
.pm-blocked{font-size:14px;color:var(--muted)}
.pm-pills{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.pm-pill{display:inline-flex;align-items:center;height:34px;padding:0 14px;font-size:15px;font-weight:bold;color:#1d1f22;background:#e3e5e7;border-radius:17px;text-decoration:none}
a.pm-pill:hover{background:#d4d7da;text-decoration:none}
body.dark .pm-pill{color:#fff;background:#393b3d}
body.dark a.pm-pill:hover{background:#4a4d50}
.pm-bio{margin:14px 0 0;max-width:760px}
.pm-bio-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:0;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow:hidden;overflow-wrap:anywhere}
.pm-bio-text.open{display:block;-webkit-line-clamp:unset}
.pm-more-link{padding:0;margin-top:2px;font-size:15px;color:inherit;text-decoration:underline;background:none;border:0;cursor:pointer}
.pm-more-link[hidden]{display:none}
.pm .p20-tabs{margin:18px 0 6px;background:transparent;box-shadow:none;border-bottom:1px solid var(--line)}
.pm .p20-tabs a{padding:12px 8px;font-size:16px;font-weight:bold;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.pm .p20-tabs a:hover{color:inherit;border-bottom-color:transparent}
.pm .p20-tabs a.selected{color:inherit;border-bottom-color:currentColor}
@media(max-width:800px){.pm-top{grid-template-columns:auto minmax(0,1fr)}.pm-side{grid-column:1/-1;width:100%}.pm-avatar,.pm .p20-headshot{width:96px;height:96px}.pm-names h1{font-size:24px}}

/* 2019 profile layout (.p19). */
.p19{max-width:970px}
.p19-header{position:relative;display:flex;align-items:center;gap:20px;background:var(--surface);padding:12px 16px;box-shadow:0 1px 4px rgba(0,0,0,.18);margin-bottom:12px}
body.dark .p19-header{box-shadow:none}
.p19-pic{position:relative;width:128px;height:128px;flex:none}
.p19-pic .p20-headshot{width:128px;height:128px;border-radius:50%;overflow:hidden;background:#d4d7da;border:1px solid #c3c7ca;box-sizing:border-box}
body.dark .p19-pic .p20-headshot{background:#4a4d50;border-color:#606467}
.p19-pic .p20-headshot img{width:100%;height:100%;object-fit:cover}
.p19-presence{position:absolute;right:8px;bottom:8px;width:22px;height:22px;border-radius:50%;background:#02b757;color:#fff;border:2px solid var(--surface);display:flex;align-items:center;justify-content:center}
.p19-presence svg{width:14px;height:14px}
.p19-info{flex:1;min-width:0;align-self:flex-start}
.p19-info h1{display:flex;align-items:center;gap:6px;margin:6px 0 4px;font-size:26px;font-weight:400;overflow-wrap:anywhere}
.p19-info h1 .account-badge{width:22px;height:22px}
.p19-playing{margin:0 0 6px;font-size:14px;color:var(--muted)}
.p19-playing a{color:#02b757;font-weight:600}
.p19-stats{display:flex;gap:10px;list-style:none;margin:10px 0 0;padding:0}
.p19-stats li{display:flex;flex-direction:column;align-items:center;min-width:80px}
.p19-stat-label{font-size:13px;color:var(--muted)}
.p19-stat-value{font-size:17px;color:#0074bd;text-decoration:none}
a.p19-stat-value:hover{text-decoration:underline}
body.dark .p19-stat-value{color:#4ebeff}
.p19-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-self:flex-end;max-width:45%}
.p19-actions .outline,.p19-btn{height:32px;padding:0 14px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;text-decoration:none;cursor:pointer;color:inherit;background:var(--surface);border:1px solid #b8bcbf}
.p19-actions .outline:hover,.p19-btn:hover{background:#f2f4f5}
body.dark .p19-actions .outline,body.dark .p19-btn{border-color:#959799}
body.dark .p19-actions .outline:hover,body.dark .p19-btn:hover{background:#4a4d50}
.p19-actions .outline[data-friend-action="request"],.p19-actions .outline[data-friend-action="accept"]{background:#00a2ff;border-color:#00a2ff;color:#fff}
.p19-actions .outline[data-friend-action="request"]:hover,.p19-actions .outline[data-friend-action="accept"]:hover{background:#32b5ff}
.p19-join{background:#02b757;border-color:#02b757;color:#fff}
.p19-join:hover{background:#3fc679}
.p19-join:disabled{opacity:.55;cursor:default}
body.dark .p19-join{border-color:#02b757;background:#02b757}
.p19-more{position:absolute;top:4px;right:8px}
.p19-dots{background:none;border:0;color:inherit;font-size:20px;letter-spacing:1px;line-height:1;padding:2px 6px;cursor:pointer;border-radius:3px}
.p19-dots:hover{background:rgba(0,0,0,.06)}
body.dark .p19-dots:hover{background:rgba(255,255,255,.1)}
.p19-more .p20-menu{right:0;left:auto}
.p19-tabs{display:flex;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.18);margin:0 0 12px;border:0}
body.dark .p19-tabs{box-shadow:none}
.p19-tabs a{flex:1;text-align:center;padding:9px 0 7px;font-size:15px;color:inherit;text-decoration:none;border-bottom:3px solid transparent;font-weight:400}
.p19-tabs a.selected{border-bottom-color:#00a2ff;font-weight:400}
.p19-tabs a:hover{color:#00a2ff}
.p19 .p20-section{margin-bottom:12px}
.p19 .p20-section-head{margin:0 0 4px}
.p19 .p20-section-head h2{font-size:21px;font-weight:400}
.p19-panel{background:var(--surface);padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
body.dark .p19-panel{box-shadow:none}
.p19-about{padding:12px 12px 10px}
.p19-bio{margin:0;padding-bottom:12px;border-bottom:1px solid #c3c7ca;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
body.dark .p19-bio{border-color:#606467}
.p19-socials{display:flex;gap:14px;flex-wrap:wrap;padding-top:8px;font-size:13px}
.p19-social{color:#0074bd}
body.dark .p19-social{color:#4ebeff}
.p19-wearing{display:grid;grid-template-columns:1fr 1fr;min-height:260px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
body.dark .p19-wearing{box-shadow:none}
.p19-stage{position:relative;background:var(--surface);min-height:260px}
.p19-stage .avatar-view{width:100%;height:100%;min-height:260px;background:transparent;border:0;border-radius:0}
.p19-3d{position:absolute;right:10px;bottom:10px;height:26px;min-width:34px;padding:0 6px;font-size:13px;font-weight:bold;color:#fff;background:#656668;border:0;border-radius:3px;cursor:pointer}
.p19-3d:hover{background:#7b7c7e}
.p19-worn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:8px;padding:12px;background:#3d7499}
body.dark .p19-worn{background:#2c5674}
.p19-worn .p20-thumb{background:#fff;border-radius:2px}
.p19-none{grid-column:1/-1;margin:auto;color:#e8f1f7;font-size:14px;align-self:center}
.p19-statistics{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:14px 12px}
.p19-statistics div{display:flex;flex-direction:column;gap:2px}
.p19-statistics span{font-size:13px;color:var(--muted)}
.p19-statistics strong{font-size:16px;font-weight:400}
@media(max-width:760px){.p19-header{flex-wrap:wrap}.p19-pic,.p19-pic .p20-headshot{width:96px;height:96px}.p19-actions{max-width:none;width:100%;justify-content:flex-start}.p19-stats li{min-width:64px}.p19-wearing{grid-template-columns:1fr}.p19-worn{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Currently Wearing pages: 4 × 2 items with dots underneath. */
.p19-worn{display:flex;flex-direction:column;gap:8px;grid-template-columns:none}
.p19-pages{flex:1}
.p19-page{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.p19-page[hidden]{display:none}
.p19-page-dots{display:flex;justify-content:center;gap:5px;margin-top:auto}
.p19-page-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid #fff;background:transparent;cursor:pointer}
.p19-page-dots button[aria-selected="true"]{background:#fff}
@media(max-width:760px){.p19-page{grid-template-columns:repeat(3,minmax(0,1fr))}}