/* Overview 6. Existing profile pages keep their layouts. */
@media(min-height:360px){body #profileOverviewSection #profileShowcase button{min-height:44px!important}}
body #profileOverviewSection .profile-hero-panel::after{content:none}
body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-stage{padding-bottom:0!important}
body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav{display:grid!important;overflow:visible!important}
body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav button{min-width:0!important;white-space:normal}
body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav button>strong{white-space:normal;overflow:visible}
body #profileOverviewBrand{display:none}
body #profileSettingsBtn{color:#211706!important;background:linear-gradient(#f2cc72,#b7822a)}
body:has(#profile:not(.hidden) :is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active) .mobile-dock{display:none!important}
body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active){--profile-gold:#e5bc69;--profile-line:#71542c;color:#f0dfbb;font-family:Georgia,"Times New Roman",serif}
body #profileOverviewSection{min-height:0;height:100%;display:grid;grid-template-rows:34px minmax(0,1fr);gap:8px}
body #profileOverviewPages{display:flex;gap:8px;align-items:stretch}
body #profileOverviewPages button{margin:0;min-height:32px;padding:4px 18px;font:700 14px Georgia,serif;border:1px solid #796035;background:#091b12;color:#d7b36d;box-shadow:none}
body #profileOverviewPages button[aria-pressed=true]{background:linear-gradient(#315b25,#122d14);color:#ffdc8e;border-color:#c69a43}
body #profileOverviewPlayer{min-height:0;display:grid;grid-template-rows:minmax(180px,1.8fr) minmax(90px,1fr) minmax(64px,.65fr);gap:12px}
body #profileOverviewPlayer[hidden],body #profileOverviewShowcase[hidden]{display:none}
body #profileOverviewSection .profile-hero-panel{margin:0;min-height:0;grid-template-columns:minmax(100px,.65fr) minmax(160px,1.15fr) minmax(190px,1fr)!important;gap:18px!important;padding:20px!important;background:linear-gradient(140deg,#10261d,#030d09);border:1px solid var(--profile-line);border-radius:14px}
body #profileOverviewSection .profile-avatar-frame{position:relative;justify-self:center;align-self:center;width:clamp(100px,15vw,215px)!important;height:clamp(100px,15vw,215px)!important;min-width:0;padding:4px;border-radius:50%;border:3px solid #cf9e4f;background:radial-gradient(#1c5036,#021108);box-shadow:inset 0 0 0 2px #412912}
body #profileAvatar{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;overflow:hidden;font:700 80px Georgia,serif;color:#edc77c}
body #profileAvatar img{width:100%;height:100%;object-fit:cover}
body .profile-avatar-edit-mark{position:absolute;bottom:2px;right:0;background:#214b1d;border:1px solid #b78a3d;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:23px}
body #profileOverviewSection .profile-hero-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:10px}
body #profileOverviewSection .profile-title-row{display:flex;flex-wrap:wrap;gap:6px}
body #profileOverviewSection .profile-title-row h2{margin:0;font:700 clamp(23px,2.4vw,38px)/1.15 Georgia,serif;color:#f4eada}
body #profileOverviewSection .profile-title-row h2{white-space:normal;overflow:visible;text-overflow:clip;max-width:100%}
body #profileOverviewSection .role-badge{display:none} /* The same tier is visible in the account card. */
body #profileOverviewSection p{margin:0;font-size:13px;line-height:1.3}
body #copyProfileId{display:block;text-align:left;white-space:normal;overflow-wrap:anywhere;min-height:32px;padding:2px 0;border:0;background:none;box-shadow:none;color:#a3d6e9;font:16px/1.3 Georgia,serif;user-select:text}
body #copyProfileId .button-icon,body #profileOverviewSection button:after{display:none}
body #profileCopyStatus:empty{display:none}
body #profileCopyStatus{font-size:12px;color:#dada99;line-height:1.25}
body #profileCopyStatus:not(:empty){position:fixed;z-index:400;bottom:12px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);padding:10px 16px;border:1px solid #aa843f;border-radius:8px;background:#062014;font:14px/1.3 Georgia,serif}
body #profileOverviewSection .player-progress{width:100%;max-width:380px;min-height:44px;border:0;background:none;padding:0;gap:6px;color:#eed9a1;font:16px Georgia,serif}
body #profileOverviewSection .player-xp-bar{height:9px;background:#010604;border:1px solid #57451e}
body #profileOverviewSection .player-xp-bar i{background:linear-gradient(#ffe298,#c28727)}
body #profileOverviewSection .profile-hero-side{display:grid;grid-template-rows:1.3fr 1fr 40px;gap:10px;min-width:0}
body #profileOverviewSection .profile-tier-card,body #profileDetailsOpen{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid var(--profile-line);border-radius:12px;background:linear-gradient(145deg,#101e19,#030b08);text-align:left;min-width:0}
body #profileOverviewSection svg{width:45px;height:45px;flex-shrink:0}
body #profileTierLabel{display:block;color:#edc16a;font-size:25px;line-height:1.15}
body #profileTierExpiry{display:block;margin-top:6px;color:#b7d967;font-size:14px}
body #profileDetailsOpen{font:18px Georgia,serif;color:#e9d7b7;white-space:normal}
body #profileSettingsBtn{min-height:36px;font:14px Georgia,serif;padding:5px 10px;color:#f3dba5}
body #profileOverviewMetrics{min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
body #profileOverviewMetrics article{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:10px;border:1px solid var(--profile-line);border-radius:13px;background:linear-gradient(140deg,#10211b,#050e0a);text-align:center}
body #profileOverviewMetrics article>span{font-size:16px;line-height:1.15}
body #profileOverviewMetrics article>strong{font-size:34px;line-height:1.1;color:#f7ebd3}
body #profileOverviewMetrics small{font-size:13px;color:#bbd77e}
body #profileOverviewSection .profile-overview-footer{margin:0;min-height:0;grid-template-columns:1fr 1fr;border:1px solid var(--profile-line)}
body #profileOverviewSection .profile-overview-footer>div{min-height:0;padding:10px 20px;gap:14px}
body #profileOverviewSection .profile-overview-footer small{font:14px Georgia,serif;text-transform:none;color:#d5c29e}
body #profileOverviewSection .profile-overview-footer strong{font:18px Georgia,serif;color:#c5df84;line-height:1.3}
body #profileOverviewShowcase{min-height:0}
body #profileOverviewSection #profileShowcase{height:100%;min-height:0;box-sizing:border-box;margin:0;padding:14px;display:flex;flex-direction:column;gap:8px}
body #profileOverviewSection #profileShowcase[hidden]{display:none}
body #profileOverviewSection #profileShowcase h2{font:22px Georgia,serif;margin:0}
body #profileOverviewSection #profileShowcase p{font-size:12px}
body #profileOverviewSection #profileShowcaseStatus:empty{display:none}
body #profileOverviewSection #profileShowcaseContext{display:flex;gap:12px;align-items:center}
body #profileOverviewSection #profileShowcaseGroups{min-height:0;flex:1;display:grid;grid-template-rows:1fr 1fr;gap:8px}
body #profileOverviewSection #profileShowcaseGroups>section{margin:0;min-height:0;display:flex;flex-direction:column;gap:5px}
body #profileOverviewSection #profileShowcaseGroups header{gap:8px;flex-wrap:nowrap}
body #profileOverviewSection #profileShowcaseGroups h3{font:16px Georgia,serif;margin:0}
body #profileOverviewSection .showcase-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;min-height:0}
body #profileOverviewSection .showcase-card{padding:8px;min-height:0}
body #profileOverviewSection .showcase-card strong{font:14px/1.15 Georgia,serif}
body #profileOverviewSection .showcase-card p,body #profileOverviewSection .showcase-card small{display:none} /* Full descriptions and dates are available in each group's dialog. */
body #profileOverviewSection .showcase-art{width:40px;height:40px;font-size:28px;margin:0 auto 5px}
body #profileDetailsDialog{box-sizing:border-box;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:#0b2116;color:#e9d3a7;border:1px solid #b68b44;border-radius:14px;padding:20px;font:16px Georgia,serif}
body #profileDetailsDialog::backdrop{background:#000a}
body #profileDetailsDialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px}
body #profileDetailsDialog h2{font-size:22px;margin:0}
body #profileDetailsDialog button{min-height:44px;white-space:normal}
body #profileDetailsDialog #profileSocialLinks{display:flex;flex-wrap:wrap;gap:8px}
body #profileDetailsDialog #profileSocialLinks button{flex:1;min-width:130px;font-size:14px}
body #profileDetailsDialog .kv>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0}
body .profile-balance-summary{display:flex;flex-wrap:wrap;gap:20px;margin:16px 0}
@media(min-width:1100px){
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active){height:100dvh;min-height:0;grid-template-rows:76px 58px minmax(0,1fr)!important}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>#profileOverviewBrand{grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:center;gap:12px;color:#ecc66f;font-size:32px}
 body #profileOverviewBrand img{width:160px;height:76px;object-fit:contain}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>#profileSectionRail{grid-row:2/4}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>#profileSectionRail button>strong{font:700 17px Georgia,serif}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail{grid-row:2}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav{grid-template-columns:repeat(8,minmax(0,1fr))}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-stage{grid-row:3}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-stage{min-height:0;padding:10px;overflow:visible}
 body :is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active{height:100%;min-height:0;overflow:visible;align-content:stretch}
}
@media(max-width:1099px){
 body:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active):has(#profile:not(.hidden))>.app-shell>.topbar{display:none}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active){position:fixed;inset:0;z-index:35;margin:0;padding:6px;height:100dvh;min-height:0;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:32px 46px minmax(0,1fr)!important;background:#020b07;gap:5px}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active) #profileSectionRail{grid-column:1;grid-row:1;display:flex;flex-direction:row;padding:0;border:0;gap:4px;border-radius:0;overflow:visible}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active) #profileSectionRail button{flex:1;margin:0;min-height:30px;padding:3px;font:11px Georgia,serif;min-width:0;justify-content:center}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active) #profileSectionRail button>span{display:none}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active) #profileSectionRail button>strong{font:11px Georgia,serif}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail{grid-column:1;grid-row:2;padding:0;margin:0;min-height:0;overflow:visible;border-radius:8px}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav{min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav button{min-height:20px;padding:1px;font-size:10px}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav button>strong{font:10px Georgia,serif}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-stage{grid-column:1;grid-row:3;padding:0;min-height:0;overflow:visible}
 body :is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active{height:100%;min-height:0;overflow:visible;align-content:stretch}
 body #profileOverviewSection{grid-template-rows:28px minmax(0,1fr);gap:4px}
 body #profileOverviewPages button{min-height:26px;padding:2px 12px;font-size:12px}
 body #profileOverviewPlayer{grid-template-rows:minmax(0,1.8fr) minmax(42px,.75fr) minmax(30px,.5fr);gap:5px}
 body #profileOverviewSection .profile-hero-panel{grid-template-columns:80px minmax(0,1fr) minmax(140px,.75fr)!important;padding:7px!important;gap:8px!important;border-radius:8px}
 body #profileOverviewSection .profile-avatar-frame{width:74px!important;height:74px!important;border-width:2px}
 body #profileAvatar{font-size:42px}
 body .profile-avatar-edit-mark{width:24px;height:24px;font-size:17px}
 body #profileOverviewSection .profile-hero-copy{gap:3px}
 body #profileOverviewSection .profile-title-row h2{font-size:18px}
 body #profileOverviewSection p{font-size:10px}
 body #profileLocaleSummary{display:none} /* Language and region remain in Account settings. */
 body #copyProfileId{min-height:20px;font-size:11px;padding:0}
 body #profileCopyStatus{font-size:10px}
 body #profileOverviewSection .player-progress{min-height:30px;font-size:12px;gap:3px}
 body #profileOverviewSection .player-progress small{font-size:9px}
 body #profileOverviewSection .player-xp-bar{height:6px}
 body #profileOverviewSection .profile-hero-side{grid-template-rows:1fr 28px 26px;gap:4px}
 body #profileOverviewSection .profile-tier-card,body #profileDetailsOpen{padding:5px;gap:5px;border-radius:6px}
 body #profileOverviewSection svg{width:22px;height:22px}
 body #profileTierLabel{font-size:15px}
 body #profileTierExpiry{font-size:10px;margin-top:2px}
 body #profileDetailsOpen{font-size:11px;min-height:24px}
 body #profileSettingsBtn{min-height:24px;font-size:10px;padding:2px}
 body #profileOverviewMetrics{gap:4px}
 body #profileOverviewMetrics article{padding:3px;gap:2px;border-radius:6px}
 body #profileOverviewMetrics article>span{font-size:10px}
 body #profileOverviewMetrics article>strong{font-size:19px}
 body #profileOverviewMetrics small{font-size:9px}
 body #profileOverviewSection .profile-overview-footer>div{padding:3px 8px;gap:6px}
 body #profileOverviewSection .profile-overview-footer small{font-size:10px}
 body #profileOverviewSection .profile-overview-footer strong{font-size:11px}
 body #profileOverviewSection .profile-overview-icon{font-size:22px}
 body #profileOverviewSection #profileShowcase{padding:5px;gap:3px}
 body #profileOverviewSection #profileShowcase h2{font-size:14px}
 body #profileOverviewSection #profileShowcase p{font-size:10px}
 body #profileOverviewSection #profileShowcase button{min-height:24px;padding:2px 6px;font-size:10px}
 body #profileOverviewSection #profileShowcaseGroups{gap:3px}
 body #profileOverviewSection #profileShowcaseGroups h3{font-size:11px}
 body #profileOverviewSection #profileShowcaseGroups>section{gap:2px}
 body #profileOverviewSection .showcase-grid{gap:4px}
 body #profileOverviewSection .showcase-card{padding:3px}
 body #profileOverviewSection .showcase-card strong{font-size:10px;line-height:1.1}
 body #profileOverviewSection .showcase-art{width:20px;height:20px;font-size:18px;margin-bottom:2px}
}
@media(max-width:600px) and (orientation:portrait){
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active){grid-template-rows:48px 70px minmax(0,1fr)!important;padding:8px;gap:7px}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active) #profileSectionRail button{min-height:42px}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav button{min-height:32px}
 body #profileOverviewSection{grid-template-rows:36px minmax(0,1fr);gap:8px}
 body #profileOverviewPages button{min-height:34px;font-size:13px}
 body #profileOverviewPlayer{grid-template-rows:minmax(200px,1.3fr) minmax(150px,1fr) 84px;gap:8px}
 body #profileOverviewSection .profile-hero-panel{grid-template-columns:92px minmax(0,1fr)!important;padding:10px!important;gap:8px!important}
 body #profileOverviewSection .profile-hero-copy{gap:6px}
 body #profileOverviewSection .profile-avatar-frame{width:85px!important;height:85px!important}
 body #profileOverviewSection .profile-hero-side{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:44px 38px;gap:6px}
 body #profileOverviewSection .profile-tier-card{grid-row:1/3}
 body #profileSettingsBtn{min-height:36px;font-size:12px}
 body #profileDetailsOpen{font-size:12px}
 body #profileOverviewMetrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 body #profileOverviewMetrics article>span{font-size:12px}
 body #profileOverviewMetrics article>strong{font-size:24px}
 body #profileOverviewSection .profile-overview-footer{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
 body #profileOverviewSection .profile-overview-footer strong{font-size:13px}
 body #profileOverviewSection #profileShowcase{padding:8px;gap:8px}
 body #profileOverviewSection #profileShowcase h2{font-size:18px}
 body #profileOverviewSection #profileShowcase button{min-height:36px;font-size:12px}
 body #profileOverviewSection .showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 body #profileOverviewSection .showcase-card strong{font-size:12px}
 body #profileOverviewSection .showcase-art{width:28px;height:28px;margin-bottom:5px}
}

@media(max-width:1099px) and (orientation:landscape){
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active){grid-template-rows:28px 34px minmax(0,1fr)!important}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav{grid-template-columns:repeat(8,minmax(0,1fr))}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav button{min-height:30px;font-size:9px;padding:1px}
 body #profile:has(:is(#profilePage-overview,#profilePage-stats,#profilePage-history,#profilePage-awards,#profilePage-collections,#profilePage-account).panel-page-active)>.app-view-rail nav button>strong{font-size:9px}
 body #profileOverviewPlayer{grid-template-rows:minmax(0,1fr) 50px 32px}
 body #profileOverviewSection .profile-hero-panel{padding:5px!important}
 body #profileOverviewSection .profile-hero-side{height:100%;min-height:0;align-self:stretch;grid-template-rows:minmax(30px,1fr) 24px 24px;gap:3px}
 body #profileOverviewSection .profile-title-row h2{font-size:16px}
 body #profileOverviewSection .profile-tier-card{padding:3px}
 body #profileDetailsOpen{padding:2px 5px}
 body #profileDetailsOpen svg{width:16px;height:16px}
 body #profileOverviewMetrics article{gap:1px}
 body #profileOverviewMetrics small{line-height:1.1}
 body #profileSubtitle{display:none}
 body #profileOverviewSection #profileShowcaseGroups{grid-template-rows:1fr;grid-template-columns:1fr 1fr;gap:8px}
 body #profileOverviewSection #profileShowcaseGroups header{flex-wrap:wrap;gap:2px}
 body #profileOverviewSection .showcase-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}