/* Ranking e central social — componentes isolados da loja e da partida. */
.social-kicker{display:block;font:700 11px/1.4 system-ui,sans-serif;letter-spacing:2px;color:#d4ad68}
#pgSocial .so{max-width:1100px;margin:8px auto 0}
.social-heading{margin-bottom:24px}.social-heading h2{margin-top:7px;font-size:32px}.social-heading p{margin-top:8px;line-height:1.5}
.social-navigation{display:flex;gap:8px;border-bottom:1px solid #ffffff18;padding-bottom:15px;margin-bottom:20px}
#pgSocial .social-navigation button{min-width:140px;border-radius:10px;padding:12px 22px;font:700 15px system-ui,sans-serif}
#pgSocial .so-body{background:none;border:0;padding:0}
.social-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.social-stats>div{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid #b5b49328;background:linear-gradient(120deg,#242c21f5,#141c17f5);border-radius:12px}
.social-stats b{color:#f4d596;font:600 30px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}.social-stats span{font:600 10px/1.5 system-ui,sans-serif;letter-spacing:1.4px;color:#b3bcab}
.social-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(250px,1fr);gap:18px;align-items:start}
.social-card{padding:24px;border:1px solid #b5b49330;border-radius:16px;background:linear-gradient(145deg,#1b241ef7,#101914f7);box-shadow:0 12px 30px #0003;min-width:0}
.social-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:18px;border-bottom:1px solid #ffffff13;margin-bottom:20px}
.social-card h3{margin:0;font:600 19px/1.3 system-ui,sans-serif;color:#f0eddf}.social-card-heading>span{font:600 9px/1.5 system-ui,sans-serif;letter-spacing:1.2px;color:#98a793}
#pgSocial .social-add label{display:block;font:500 12px/1.5 system-ui,sans-serif;color:#b7c0af;margin-bottom:9px}
.social-add>div{display:flex;gap:9px}
#pgSocial input{box-sizing:border-box;min-width:0;flex:1;background:#090f0d;border:1px solid #60715b;border-radius:9px;padding:12px 14px;color:#f0eddf;font:400 16px system-ui,sans-serif;outline-offset:3px;max-width:100%}
#pgSocial input::placeholder{color:#7d8d7c}
#pgSocial button:focus-visible,#ranked button:focus-visible,#ranked summary:focus-visible,#pgSocial input:focus-visible{outline:2px solid #87dbec;outline-offset:3px}
#pgSocial .social-card button{min-height:42px;border:1px solid #697353;border-radius:9px;padding:10px 16px;background:#2d3928;color:#eae9d6;font:600 13px/1.3 system-ui,sans-serif;cursor:pointer}
#pgSocial #frAdd{background:linear-gradient(#f0c878,#c28b38);border-color:#ebc673;color:#251c0f;white-space:nowrap}
#pgSocial button:disabled{opacity:.5;cursor:wait}
#frMsg:empty,#clMsg:empty{display:none}#frMsg,#clMsg{color:#f3ce87;line-height:1.5}
#pgSocial .flist{margin:18px 0 0;padding:0;list-style:none}
#pgSocial .flist li{gap:12px;background:#ffffff04;border:1px solid #ffffff14;border-radius:10px;padding:15px 12px;margin:8px 0!important;min-height:60px;box-sizing:border-box}
#pgSocial .flist li>span{font:400 15px/1.5 system-ui,sans-serif;overflow-wrap:anywhere}
#pgSocial .flist li>span>b{font-weight:600;color:#eeeadd}
#pgSocial .flist small{font:400 11px/1.5 system-ui,sans-serif;color:#9dab9a}
#pgSocial .flist button{flex-shrink:0;padding:8px 11px;min-height:40px}
#pgSocial .flist button.x{background:#ffffff06;border-color:#ffffff16;font-size:22px;width:40px;padding:0;color:#a8b5a4}
#pgSocial .dot{flex:none;width:8px;height:8px;background:#536254}#pgSocial .dot.on{background:#83d7a3;box-shadow:0 0 10px #83d7a34a}.friend-actions{display:flex;flex:none;align-items:center;gap:7px}
#pgSocial .flist .empty{padding:28px 15px;line-height:1.6;text-align:center;border-style:dashed;color:#a9b5a5}
.social-field-guide{padding-top:26px}.social-field-guide h3{margin:10px 0 22px;font-size:21px}.social-field-guide ol{list-style:none;counter-reset:guide;margin:0;padding:0}
.social-field-guide li{counter-increment:guide;position:relative;padding:0 0 24px 38px}
.social-field-guide li:before{content:counter(guide);position:absolute;left:0;top:0;display:grid;place-items:center;width:25px;height:25px;border:1px solid #a994594d;border-radius:8px;color:#e3c181;font:600 12px system-ui,sans-serif;background:#a9945912}
.social-field-guide li b{display:block;color:#e0e5d7;font:600 13px/1.4 system-ui,sans-serif}.social-field-guide li span{display:block;color:#9da99a;font:400 12px/1.6 system-ui,sans-serif;margin-top:5px}
.social-field-guide>p{margin:0;padding-top:16px;border-top:1px solid #ffffff13;color:#91b89b;font:400 11px/1.6 system-ui,sans-serif}
.clan-card{max-width:850px}.clan-navigation{display:flex;gap:6px;background:#0b120e;border:1px solid #ffffff10;padding:5px;border-radius:12px}
#pgSocial .clan-navigation button{flex:1;background:transparent;border:0;color:#a4b09e}#pgSocial .clan-navigation button.on{background:#35402c;color:#f6d89a}
.clan-ranking-intro{margin:26px 0 20px}.clan-ranking-intro h3{font-size:22px}.clan-ranking-intro p{color:#a2af9d;font:400 13px/1.6 system-ui,sans-serif;margin-bottom:0}
.clan-crest{display:grid;place-items:center;flex:none;width:50px;height:56px;background:linear-gradient(145deg,#a48235,#554620);clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);color:#fce2a9;font:700 12px system-ui,sans-serif;letter-spacing:1px;padding-bottom:6px;box-sizing:border-box}
.clan-position{color:#ddbd7d;font:600 17px system-ui,sans-serif;width:24px;flex:none}
#pgSocial .clan-ranking li{padding:18px 16px;gap:18px}#pgSocial .clan-ranking li:first-child{background:linear-gradient(100deg,#ac843a1f,#ffffff04);border-color:#d8ad5952}
#pgSocial .clan-ranking li small{display:block;margin-top:5px}#pgSocial .clan-ranking em{font:600 20px/1.2 system-ui,sans-serif;text-align:right;white-space:nowrap;color:#e8cd8b}#pgSocial .clan-ranking em small{font-size:9px;letter-spacing:1px}
#pgSocial .clhead{display:flex;align-items:center;gap:18px;margin:24px 0;padding:20px;background:#ffffff04;border:1px solid #ffffff14;border-radius:12px;text-align:left}.clhead h3{margin:5px 0}.clhead small{color:#afbaa7}
#clBody>.row{display:flex;gap:10px;margin:14px 0}#clBody>h3{margin-top:24px}#pgSocial #clLeave{width:auto;margin-top:10px;background:#58382d;border-color:#8f6651}#pgSocial #clCreate{width:auto}
/* A larger, scrollable ranking dialog; matchmaking keeps its existing compact size. */
#ranked:has(#rkLeader:not(.hidden)){padding:20px;box-sizing:border-box;background:#050a08c9;backdrop-filter:blur(7px)}
#ranked:has(#rkLeader:not(.hidden))>.box{width:100%;max-width:680px;max-height:calc(100dvh - 40px);box-sizing:border-box;padding:30px;overflow:auto;text-align:left;border:1px solid #b6ae7b50;border-radius:20px;background:radial-gradient(ellipse at 90% 0,#53623a30,transparent 55%),#121b17;box-shadow:0 25px 100px #000a;color:#eeeadd}
#ranked .close{top:15px;right:15px;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#ffffff08;border:1px solid #ffffff1c;font-size:21px;color:#c6cdbf;padding:0}
.ranking-heading{padding-right:28px}.ranking-heading h2{font:600 27px/1.2 system-ui,sans-serif;letter-spacing:-.6px;margin:10px 0;color:#f5efdc;text-align:left}.ranking-heading p{font:400 13px/1.6 system-ui,sans-serif;color:#a4b09c;margin:0 0 24px}
#rkSummary{display:flex;align-items:center;gap:18px;padding:20px;border:1px solid #d3b46745;border-radius:13px;background:linear-gradient(110deg,#3b4028a6,#1b281e);margin-bottom:24px}
.rank-badge{display:grid;place-items:center;flex:none;width:54px;height:64px;font-size:29px;background:linear-gradient(135deg,#e1c58033,#b49e5920);border:1px solid #d1b76e66;border-radius:12px}
.rank-summary-copy{flex:1;min-width:0}.rank-summary-copy>span{color:#c1b795;font:600 9px/1.4 system-ui,sans-serif;letter-spacing:1.5px}.rank-summary-copy h3{font:600 20px/1.3 system-ui,sans-serif;margin:3px 0 6px;color:#f5e7be}.rank-summary-copy p{font:400 11px/1.6 system-ui,sans-serif;color:#abb69e;margin:0}.rank-summary-copy p b{color:#d8d7ba}
.rank-total{font:600 29px/1.1 system-ui,sans-serif;color:#efcf8a;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.rank-total small{display:block;font:600 8px/1.5 system-ui,sans-serif;letter-spacing:1px;margin-top:6px;color:#b8bd9f}
.rank-progress{height:4px;background:#060c0888;margin-top:12px;border-radius:5px;overflow:hidden}.rank-progress i{display:block;height:100%;background:linear-gradient(90deg,#aa8e4e,#efd395);border-radius:5px}
.ranking-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}.ranking-label h3{font:600 15px system-ui,sans-serif;margin:0}.ranking-label button{background:transparent;border:1px solid #ffffff20;border-radius:7px;padding:8px 12px;font:500 11px system-ui,sans-serif;color:#c2ccb8;min-height:36px;cursor:pointer}.ranking-label button:disabled{opacity:.5}
#rkList{max-height:none;overflow:visible;padding:0;margin:0;display:grid;gap:8px;list-style:none}
#rkList li{display:flex;gap:18px;padding:17px 18px;align-items:center;border:1px solid #ffffff10;background:#ffffff03;border-radius:10px;box-sizing:border-box;text-align:left}
#rkList li.me{background:#95ad6620;border-color:#aabf6d65;box-shadow:inset 3px 0 #c0d183}
#rkList .rank-position{font:600 17px/1 system-ui,sans-serif;color:#9ba88f;width:24px;flex:none;font-variant-numeric:tabular-nums}
#rkList .rank-podium .rank-position{color:#f0d18d}#rkList .rank-player{min-width:0;flex:1}#rkList .rank-player-name{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere;font:600 15px/1.4 system-ui,sans-serif;color:#f0efdf}
#rkList .rank-you{color:#d9e2a5;font:600 8px/1 system-ui,sans-serif;letter-spacing:1px;padding:4px 5px;background:#c2d27c1a;border-radius:4px}
#rkList .rank-player>small{display:block;color:#a0ad98;font:400 11px/1.5 system-ui,sans-serif;margin-top:4px}
.rank-score{flex:none;text-align:right}.rank-score strong{font:600 19px/1.2 system-ui,sans-serif;color:#f3d89c;font-variant-numeric:tabular-nums}#rkList .rank-score strong small{font:500 10px system-ui,sans-serif;color:#c3ba97}.rank-score span{display:block;margin-top:5px;color:#9fac97;font:400 10px/1.5 system-ui,sans-serif}
#rkList li.ranking-empty{display:block;text-align:center;padding:30px 18px;font:500 14px/1.6 system-ui,sans-serif;color:#d0d9c7}#rkList .ranking-empty small{display:block;margin-top:6px;font:400 12px/1.5 system-ui,sans-serif;color:#a5b29c}
.rank-guide{margin-top:22px;padding-top:18px;border-top:1px solid #ffffff15}.rank-guide summary{cursor:pointer;font:500 12px/1.5 system-ui,sans-serif;color:#c1cdb5;min-height:28px}.rank-guide summary span{float:right;color:#7f907b;font-size:10px;margin-top:2px}.rank-guide p{font:400 11px/1.6 system-ui,sans-serif;color:#93a18d;margin:14px 0 0}
#rkRanks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:14px}#rkRanks>div{padding:12px 4px;text-align:center;background:#ffffff04;border:1px solid #ffffff10;border-radius:9px}#rkRanks>div.current{border-color:#ceb66a77;background:#ceb66a15}#rkRanks i{display:block;font-style:normal;font-size:18px;height:25px}#rkRanks b{display:block;font:500 10px/1.5 system-ui,sans-serif;color:#d0d8c5}#rkRanks small{font:400 9px/1.5 system-ui,sans-serif;color:#91a186}
.reward-promo .reward-error{color:#bdc8b7;line-height:1.6;font:400 14px/1.6 system-ui,sans-serif}.reward-promo .reward-error small{display:block;color:#94a38c;margin-top:6px}
#rkRanks>div>i{display:flex;align-items:center;justify-content:center;gap:2px}#rkRanks>div>i .ffi{display:inline-block;height:auto;font-size:14px}
@media(max-width:760px){
 .social-layout{grid-template-columns:minmax(0,1fr)}.social-stats>div{display:block;text-align:center;padding:16px 6px}.social-stats b{font-size:26px}.social-stats span{display:block;margin-top:9px;font-size:8px;letter-spacing:.8px}.social-stats{gap:8px}
 .social-card{padding:18px}.social-card-heading{margin-bottom:18px}.social-card-heading>span{font-size:8px;letter-spacing:.5px}.social-card h3{font-size:17px}.social-heading{margin-bottom:20px}.social-heading h2{font-size:27px}.social-heading p{font-size:13px}
 #pgSocial .social-navigation button{flex:1;min-width:0}.social-navigation{margin-bottom:16px}
 .social-add>div{gap:7px}#pgSocial .social-add input{padding:12px 10px}#pgSocial #frAdd{font-size:12px;padding:10px}
 #pgSocial .flist li{gap:9px;padding:12px 10px;flex-wrap:wrap}#pgSocial .flist li>span{font-size:13px;flex-basis:calc(100% - 98px)}#pgSocial .flist li button{font-size:11px}
 #pgSocial .social-roster li:not(.empty){display:grid;grid-template-columns:8px minmax(0,1fr) auto;flex-wrap:nowrap}.friend-actions{gap:5px}#pgSocial .social-roster li>span{flex-basis:auto}#pgSocial .friend-actions button{padding:8px}.friend-actions button.x{width:34px!important}
 #pgSocial .clan-ranking li{gap:10px;padding:15px 10px;flex-wrap:nowrap}#pgSocial .clan-ranking li>span{flex-basis:auto}#pgSocial .clan-ranking em{font-size:17px}.clan-crest{width:39px;height:46px;font-size:10px}.clan-position{font-size:14px;width:20px}
 #pgSocial .clhead{padding:16px;gap:13px}#clBody>.row{flex-wrap:wrap}#clBody>.row input{flex-basis:100%}#pgSocial #clJoinTag{flex-basis:0}
 #ranked:has(#rkLeader:not(.hidden)){padding:10px}
 #ranked:has(#rkLeader:not(.hidden))>.box{padding:23px 17px;max-height:calc(100dvh - 20px);border-radius:16px}
 .ranking-heading h2{font-size:23px;max-width:240px}.ranking-heading p{font-size:12px;margin-bottom:18px}.social-kicker{font-size:9px}
 #rkSummary{padding:15px 12px;gap:12px;margin-bottom:20px}.rank-badge{width:39px;height:51px;font-size:23px}.rank-summary-copy h3{font-size:17px}.rank-summary-copy p{font-size:10px}.rank-total{font-size:23px}.rank-total small{font-size:6px;letter-spacing:.5px}.rank-summary-copy>span{font-size:8px}
 #rkList li{gap:10px;padding:14px 10px}#rkList .rank-position{font-size:15px;width:23px}#rkList .rank-player-name{font-size:13px;gap:5px;flex-wrap:wrap}#rkList .rank-player>small{font-size:10px}.rank-score strong{font-size:17px}.rank-score span{font-size:9px}.rank-guide summary span{font-size:9px}#rkRanks{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:550px){
 #pgSocial .so{margin-top:4px}.social-heading{margin-bottom:14px}.social-heading h2{font-size:24px}.social-heading p{margin-bottom:0}.social-layout{grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr)}.social-card{padding:18px}.social-stats>div{padding:12px 18px}.social-stats b{font-size:25px}
 #ranked:has(#rkLeader:not(.hidden)){padding:8px}#ranked:has(#rkLeader:not(.hidden))>.box{max-height:calc(100dvh - 16px);padding:22px 25px}.ranking-heading h2{font-size:23px}.ranking-heading p{margin-bottom:16px}#rkSummary{padding:14px 18px;margin-bottom:16px}
 #rkLeader:not(.hidden){display:grid;grid-template-columns:190px minmax(0,1fr);gap:0 20px}.ranking-heading{grid-column:1/-1}.ranking-heading h2{margin:5px 0}.ranking-heading p{margin-bottom:16px}
 #rkSummary{grid-column:1;grid-row:2/4;flex-direction:column;align-items:flex-start;gap:12px;margin:0;align-self:start;padding:16px}.rank-badge{display:none}.rank-summary-copy{width:100%}.rank-total{text-align:left;font-size:25px}.rank-total small{font-size:7px}.rank-summary-copy h3{font-size:18px}.ranking-label{grid-column:2;grid-row:2;margin-bottom:8px}#rkList{grid-column:2;grid-row:3;gap:5px}#rkList li{padding:11px 12px;gap:12px}.rank-guide{grid-column:1/-1;margin-top:15px;padding-top:13px}#rkRanks{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:360px){#pgSocial .social-roster .friend-actions{grid-column:2/4;justify-content:flex-end}#pgSocial .social-roster li:not(.empty){grid-template-columns:8px minmax(0,1fr)}#pgSocial .social-roster li>span{grid-column:2/4}}
@media(prefers-reduced-motion:reduce){#pgSocial{animation:none}}