body.social-open #social{inset:0;max-width:none;margin:0;padding:0;overflow:auto;background:linear-gradient(#06131b69,#06131bc7),url('../../assets/ui/lobby-v1/art/lobby-perfil-art.png') center/cover fixed;color:#f4ead4}body.social-open #social .profile-screen{min-height:100svh;padding:clamp(14px,2vw,30px);box-sizing:border-box}.profile-header{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #bf994f;background:#071d30eb;padding:10px 16px;border-radius:10px}.profile-header h2{margin:0;color:#f0d08a;text-transform:uppercase;letter-spacing:2px}.profile-screen button{min-height:44px;border:1px solid #b79750;border-radius:7px;background:linear-gradient(130deg,#17485e,#081d31);color:#fff0d3;padding:10px 16px;font:inherit;cursor:pointer}.profile-screen button:hover{background:#205f76}.profile-screen button:focus-visible,.profile-screen input:focus-visible{outline:3px solid #7be3ff;outline-offset:3px}.profile-screen button:disabled{opacity:.55;cursor:wait}.profile-layout{max-width:1350px;margin:22px auto 0;display:grid;grid-template-columns:minmax(250px,.34fr) minmax(0,1fr);gap:22px}.profile-identity,.profile-summary,.profile-history,.profile-content{background:#071d30ec;border:1px solid #bf994f;border-radius:12px;padding:22px;box-shadow:0 8px 28px #0007}.profile-identity{text-align:center}.profile-avatar{width:clamp(100px,13vw,180px);height:clamp(100px,13vw,180px);border:3px solid #d6b266;border-radius:50%;object-fit:cover}.profile-identity h3{font-size:clamp(25px,3vw,40px);margin:12px 0}.profile-identity form{display:grid;gap:10px;margin:18px 0}.profile-screen label{display:grid;gap:8px;text-align:left;color:#c1d7e3}.profile-screen input,.profile-screen select{box-sizing:border-box;min-height:44px;max-width:100%;width:100%;border:1px solid #448da8;border-radius:6px;background:#061521;color:white;padding:10px;font:inherit}.profile-code-label{color:#bfd9e5;text-align:left;margin-bottom:8px}.profile-code{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:#031522;border:1px solid #367994;padding:10px;border-radius:7px;overflow-wrap:anywhere}.profile-code strong{letter-spacing:1px}.profile-identity nav{display:grid;gap:10px;margin-top:22px}.profile-details{display:flex;flex-direction:column;gap:22px;min-width:0}.profile-details h3{font-size:clamp(22px,2.7vw,34px);color:#f0d08a;margin:0 0 18px}.profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.profile-stats>div{display:grid;text-align:center;gap:12px;background:#08233b;border:1px solid #3c819b;padding:18px 10px;border-radius:9px}.profile-stats span{font-size:clamp(15px,1.8vw,22px)}.profile-stats strong{font-size:36px}.profile-summary>p,.profile-empty p{color:#bfd2e1;line-height:1.5}.profile-summary>p{font-size:14px;margin-bottom:0}.profile-history{flex:1;min-height:190px;background:#071d30d9}.profile-empty{min-height:150px;display:grid;align-content:center;justify-items:center;text-align:center}.profile-empty>span{font-size:64px;color:#86b4c9}.profile-content{max-width:900px;margin:22px auto}.profile-content form{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:18px 0}.profile-content label{min-width:180px;flex:1}.profile-status{max-width:1350px;margin:16px auto;color:#d8ecf6;min-height:1em}.profile-screen .social-row{border-color:#376778}body.social-open #social>[data-social="toggle"]{position:static}
@media(max-width:700px){.profile-layout{grid-template-columns:1fr;gap:16px}.profile-identity{display:block}.profile-avatar{width:100px;height:100px}.profile-identity nav{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-identity nav button{padding:8px 4px;font-size:14px}.profile-stats{gap:8px}.profile-summary,.profile-history,.profile-identity{padding:16px}.profile-header{padding:8px;gap:8px}.profile-header button{padding:8px 10px}.profile-header h2{font-size:22px}.profile-layout{margin-top:16px}}
@media(max-height:500px) and (min-width:701px){.profile-screen .profile-avatar{width:90px;height:90px}.profile-identity h3{font-size:26px}.profile-identity,.profile-summary,.profile-history{padding:14px}.profile-layout,.profile-details{gap:14px}.profile-identity nav{margin-top:12px;gap:6px}.profile-identity form{margin:10px 0}.profile-history{min-height:130px}.profile-empty{min-height:80px}.profile-empty>span{font-size:38px}}
.friends-content{max-width:1100px}.friends-add{padding:0 0 20px;border-bottom:1px solid #3c718b}.friends-tabs{display:flex;gap:12px;margin:20px 0}.friends-tabs button{flex:1;font-weight:bold}.friends-tabs [aria-selected="true"]{background:#1d627c;border:2px solid #e0bc72}.friend-card{display:flex;align-items:center;flex-wrap:wrap;gap:14px;border:1px solid #376778;border-radius:9px;padding:16px;background:#082033;margin:12px 0}.profile-screen .friend-identity{display:flex;align-items:center;gap:14px;background:transparent;border:0;text-align:left;padding:0;flex:1;min-width:160px}.friend-avatar{display:inline-grid;place-items:center;flex-shrink:0;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#256681,#132940);border:1px solid #ba9c62;font-size:24px;color:#f9deb0}.friend-identity strong,.friend-name strong{font-size:20px;overflow-wrap:anywhere}.friend-name{flex:1;display:grid;gap:6px}.friend-name small,.friend-hint{color:#bed4df}.friend-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.profile-content .friend-actions form{margin:0}.friend-menu{position:relative}.friend-menu summary{cursor:pointer;list-style:none;padding:12px;border:1px solid #426c82;border-radius:7px;font-size:20px}.friend-menu summary:focus-visible{outline:3px solid #7be3ff}.friend-menu[open]>button{position:absolute;right:0;top:48px;z-index:2;white-space:nowrap;box-shadow:0 6px 16px #0009}.friend-detail{padding:20px;border:1px solid #467c91;border-radius:10px;background:#082033}.friend-detail-heading{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.friend-detail-heading h3{flex:1;margin:0;font-size:25px}.friends-empty{text-align:center;padding:28px 10px;color:#c1d8e5}.friends-content h3{color:#edd095;margin-top:24px}@media(max-width:700px){.friend-actions{width:100%;justify-content:space-between}.friends-tabs{gap:8px}.friends-tabs button{font-size:14px;padding:10px 6px}.friend-card{padding:12px}.profile-content .friend-actions form{width:100%}.friend-detail{padding:14px}}

/* Navigation stays in view while each section scrolls independently. */
.profile-tabs{display:none}body.social-open #social{overflow:hidden}body.social-open #social .profile-screen{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:12px max(12px,env(safe-area-inset-right));overflow:hidden}.profile-header{flex-shrink:0}.profile-layout{min-height:0;overflow:auto;flex:1;width:100%;margin-top:12px}.profile-content{min-height:0;overflow:auto;flex:1;width:100%;margin:12px auto 0;overscroll-behavior:contain}.profile-status{flex-shrink:0;margin:5px auto 0;min-height:0;font-size:12px}.profile-status:empty{display:none}.profile-identity,.profile-summary,.profile-history{min-width:0}.profile-content label{min-width:min(180px,100%)}
@media(max-width:1000px),(max-height:600px){.profile-tabs{display:flex;gap:8px;margin:8px 0 0;flex-shrink:0}.profile-tabs button{flex:1;min-height:36px;padding:6px 10px}.profile-tabs [aria-pressed=true]{background:linear-gradient(135deg,#23788a,#103d53);border-color:#edcc7c;color:#fff1ce}.profile-layout{display:block;margin-top:8px}.profile-layout[data-profile-tab=identity] .profile-details,.profile-layout:not([data-profile-tab=identity]) .profile-identity,.profile-layout[data-profile-tab=summary] .profile-history,.profile-layout[data-profile-tab=history] .profile-summary{display:none}.profile-details{gap:0}.profile-identity,.profile-summary,.profile-history{padding:12px}.profile-screen .profile-avatar{width:75px;height:75px}.profile-identity h3{font-size:23px;margin:5px 0}.profile-identity form{margin:8px 0;gap:6px}.profile-identity nav{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px;gap:6px}.profile-identity nav button{padding:6px;font-size:13px}.profile-screen label{gap:4px;font-size:13px}.profile-screen input,.profile-screen select{min-height:36px;padding:6px 8px}.profile-screen button{min-height:36px;padding:6px 10px}.profile-code-label{font-size:12px;margin:6px 0}.profile-code{padding:6px 8px}.profile-details h3{font-size:21px;margin-bottom:10px}.profile-stats{gap:8px}.profile-stats>div{padding:10px;gap:6px}.profile-stats strong{font-size:28px}.profile-history{min-height:0}.profile-empty{min-height:90px}.profile-empty>span{font-size:38px}.profile-content form{margin:10px 0;gap:8px}.friends-add{padding-bottom:10px}.friends-tabs{margin:10px 0}.friend-card{padding:10px;gap:8px}.friend-avatar{width:40px;height:40px;font-size:20px}.friend-identity strong,.friend-name strong{font-size:17px}}
@media(max-height:500px) and (orientation:landscape){body.social-open #social .profile-screen{padding:6px 10px}.profile-header{padding:4px 8px;gap:8px}.profile-header h2{font-size:19px}.profile-tabs{margin-top:5px}.profile-tabs button{min-height:32px;padding:4px 8px}.profile-identity{display:grid;grid-template-columns:90px minmax(0,1fr);gap:4px 12px;text-align:left}.profile-identity>.profile-avatar{grid-column:1;grid-row:1/3;align-self:center;justify-self:center}.profile-identity>h3,.profile-identity>form,.profile-identity>p:not(.profile-code-label){grid-column:2}.profile-identity h3{margin:0;font-size:21px}.profile-identity form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;margin:0}.profile-code-label,.profile-code,.profile-identity>nav{grid-column:1/-1}.profile-code-label{margin:2px 0}.profile-identity>nav{margin-top:3px}.profile-identity>nav button{min-height:32px}.profile-content{padding:10px}.profile-content h3{margin-top:6px}.profile-content .friends-add{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.profile-content .friends-add p{margin:0;font-size:12px}.profile-header button{min-height:32px;padding:4px 10px}}

/* Reuse approved champion portraits and circuit emblems throughout social screens. */
.profile-header h2{display:flex;align-items:center;gap:8px}.profile-header-emblem{width:30px;height:30px;object-fit:contain}.profile-avatar-edit{display:block;margin:8px auto}.avatar-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}.profile-screen .avatar-picker button{display:grid;justify-items:center;gap:4px;padding:6px;min-width:0;font-size:12px}.avatar-picker img{width:48px;height:48px;object-fit:cover;border-radius:50%}.avatar-picker [aria-pressed=true]{outline:2px solid #85dded;background:#19566d}.profile-stat-emblem{width:40px;height:40px;object-fit:contain;margin:auto}.social-empty,.friends-empty,.profile-empty{text-align:center}.social-empty-art{width:72px;height:72px;object-fit:contain;margin:8px auto}.friends-empty-art{display:flex;justify-content:center;gap:8px;margin:10px auto}.friends-empty-art img{border:2px solid #b99c61;border-radius:50%}.friend-avatar{object-fit:cover;border:1px solid #b99c61;flex:none}.history-row{display:flex!important;align-items:flex-start!important;gap:10px}.history-outcome{width:44px;height:44px;object-fit:contain;flex:none}.history-copy{display:grid;gap:5px;min-width:0;overflow-wrap:anywhere}.invitation-row>img{object-fit:cover;border-radius:50%;border:1px solid #b99c61}.profile-summary .profile-stats>div{gap:6px}
@media(orientation:landscape) and (max-height:500px){.profile-stat-emblem{width:28px;height:28px}.profile-header-emblem{width:24px;height:24px}.profile-avatar-edit{margin:5px auto}.avatar-picker img{width:38px;height:38px}.social-empty-art{width:50px;height:50px}.history-outcome{width:34px;height:34px}}

.profile-layout[data-profile-tab="tactics"]{display:none}.tactical-profile{max-width:760px;margin:12px auto;padding:16px;background:#102b39;border:1px solid #6b8375;border-radius:10px}.tactical-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.tactical-settings label{display:grid;gap:5px}.tactical-settings select{min-height:40px;width:100%}.tactical-profile small{color:#bccfc9}

.social-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:50%;background:#d9b967;color:#102631;font:bold 12px sans-serif;margin-left:4px}.social-badge[hidden]{display:none}.friend-search-row{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #708a8b55}.friend-search-row strong{flex:1}.friend-search-row img{border-radius:50%}.friend-search-results{max-height:240px;overflow:auto}