/* Real standings and friends, composed over illustrated materials. */
#ranking-boards[open]{width:min(1180px,calc(100vw - 76px));height:min(840px,calc(100dvh - 100px));grid-template-columns:1fr;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;background:#fff0d1}
#ranking-boards .social-heading{min-height:142px;padding:15px 245px 14px 175px;justify-content:center;text-align:center}
#ranking-boards .social-heading>div{display:flex;flex-direction:column;align-items:center}
#ranking-boards .social-heading h2{font-size:57px!important;order:0;line-height:1.02!important;white-space:nowrap}
#ranking-boards .social-heading small{order:1;font-size:16px;letter-spacing:1px;margin-top:7px;color:#d7fff4}
#ranking-boards .social-heading p{display:none}
#ranking-boards .social-mascot{width:252px;height:252px;right:51px;top:-94px}
#ranking-boards .ranking-metrics{position:relative;z-index:1;padding:0 28px;gap:4px;margin-top:-3px;background:linear-gradient(#04738c,#0296a4);border-top:2px solid #fff4b5;border-bottom:3px solid #d8a946;box-shadow:0 2px #fff5cf}
#ranking-boards .ranking-metrics button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:58px;padding:4px 15px;border:2px solid #71e9e9;border-radius:26px 26px 21px 21px;background:linear-gradient(#10c3d4 0%,#0091b0 47%,#087085 100%);box-shadow:inset 0 2px 1px #e8fffc,0 2px 1px #09495c;font-size:22px;color:#f6ffed;text-shadow:0 2px 1px #035369}
#ranking-boards .ranking-metrics button[aria-pressed=true]{background:linear-gradient(#fff9bf 0%,#ffdf55 35%,#f3b91c 80%,#ffdb67);border-color:#fff9cf;color:#623d0a;box-shadow:inset 0 2px #fffef1,0 0 0 1px #be831a,0 3px 0 #8e671c;text-shadow:0 1px #fff3b1}
#ranking-boards .ranking-metric-art{width:44px;height:45px;object-fit:contain;filter:drop-shadow(0 2px 2px #144c6f55)}
#ranking-boards .ranking-formats{position:relative;z-index:1;width:max-content;max-width:90%;margin:0 auto 0;padding:9px 24px 10px;border:2px solid #dab56e;border-top:0;border-radius:0 0 38px 38px;background:linear-gradient(#fff9e5,#f3dcaa);gap:10px;box-shadow:inset 0 -2px 0 #fffbee}
#ranking-boards .ranking-formats button{min-width:120px;min-height:31px;padding:4px 18px;border-radius:26px;border:2px solid #daba80;background:linear-gradient(#fffef0,#fff1d9);color:#11516b;box-shadow:inset 0 2px #fff;font-size:15px}
#ranking-boards .ranking-formats button[aria-pressed=true]{border-color:#fff6b1;background:linear-gradient(#fff3a3,#fac726);box-shadow:0 0 0 1px #d9a43c,0 2px #b68128;color:#61400a}
#ranking-boards .ranking-board-status{grid-column:1;grid-row:auto;margin:5px 24px 6px;min-height:14px;font-size:10px;color:#807658}
#ranking-boards .ranking-board-content{grid-column:1;margin:0 25px;padding:0;border:0;border-radius:20px;box-shadow:none;background:transparent;overflow:auto}
#ranking-boards .ranking-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:0;position:relative;height:330px;padding:0 12.5%;background:url('../assets/social-prestige-leaders/podium-stage.webp') center/100% 100% no-repeat;border:2px solid #fff7d7;outline:1px solid #d3a464;border-radius:21px;overflow:hidden}
#ranking-boards .ranking-champion,#ranking-boards .ranking-champion[data-position='1'],#ranking-boards .ranking-champion[data-position='3']{position:relative;display:block;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;outline:none;overflow:visible}
#ranking-boards .ranking-champion[data-position='2']{order:1}
#ranking-boards .ranking-champion[data-position='1']{order:2}
#ranking-boards .ranking-champion[data-position='3']{order:3}
#ranking-boards .ranking-champion-portrait,#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{position:absolute;display:block;inset:auto 0 29%;width:100%;height:66%;margin:0;filter:drop-shadow(0 5px 2px #02464d44)}
#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:72%;bottom:31%}
#ranking-boards .ranking-champion-portrait img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center bottom}
#ranking-boards .ranking-champion-plaque{position:absolute;left:-1%;right:-1%;bottom:3.5%;height:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0 6px;z-index:2}
#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-plaque{bottom:3.5%;height:25%}
#ranking-boards .ranking-champion-name{font:800 22px/1.12 'Baloo 2',sans-serif;color:#58310c;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px #fff6d4}
#ranking-boards .ranking-champion-rank{font:800 9px/1.25 'Nunito Sans',sans-serif;color:#816342;margin-top:2px}
#ranking-boards .ranking-champion-value{font:800 27px/1.1 'Baloo 2',sans-serif;color:#654019;margin:1px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-shadow:0 1px #fff8d2}
#ranking-boards .ranking-champion[data-position='2'] :is(.ranking-champion-name,.ranking-champion-value){color:#184e66}
#ranking-boards .ranking-champion[data-position='3'] :is(.ranking-champion-name,.ranking-champion-value){color:#633218}
#ranking-boards .ranking-medal{position:absolute;top:63%;left:50%;transform:translate(-50%,-50%);width:43px;height:43px;border:0;border-radius:50%;background:none;box-shadow:none;font:800 37px/1 'Baloo 2',sans-serif;color:#fff9dc;text-shadow:0 2px 1px #855820,1px 0 #855820,-1px 0 #855820;z-index:3;display:grid;place-items:center}
#ranking-boards .ranking-champion[data-position='1'] .ranking-medal{top:57%;font-size:43px}
#ranking-boards .ranking-board-content table{border-collapse:separate;border-spacing:0 7px;padding:4px 0 0}
#ranking-boards .ranking-board-content thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#ranking-boards .ranking-board-content td{padding:5px 16px;border-top:1px solid #d3b682;border-bottom:1px solid #cbaa70;background:linear-gradient(#fffdf0,#fcecd0);box-shadow:inset 0 2px #fffef6,inset 0 -2px #fff9e7}
#ranking-boards .ranking-board-content tr.is-you{outline:none}
#ranking-boards .ranking-board-content tr.is-you td{background:linear-gradient(110deg,#56e4e3,#8cefe7 50%,#40cbd2);border-color:#e4b962;box-shadow:inset 0 2px #fff7d3,inset 0 -2px #cefefa}
#ranking-boards .ranking-board-content td:first-child{border-left:1px solid #d3b682;border-radius:15px 0 0 15px;text-align:center;width:70px;font-size:30px}
#ranking-boards .ranking-board-content td:last-child{border-right:1px solid #d3b682;border-radius:0 15px 15px 0}
#ranking-boards .ranking-player{gap:18px}
#ranking-boards .ranking-player-face{display:block;position:relative;width:53px;height:53px;border-radius:50%;overflow:hidden;flex:none;border:2px solid #ffe897;box-shadow:0 0 0 1px #b58229,inset 0 2px #fff;background:radial-gradient(#caf9f4,#32b1c4)}
#ranking-boards .ranking-player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;border-radius:0;background:none;transform:scale(1.5);transform-origin:center 15%}
#ranking-boards .ranking-player strong{font:800 20px/1.2 'Baloo 2',sans-serif;color:#0d4b65}
#ranking-boards .ranking-player small{font-size:9px;color:#7d795f}
#ranking-boards .ranking-value strong{font-size:29px;color:#0c4e6d}
#ranking-boards .ranking-value small{font-size:12px;color:#0c4e6d;font-weight:900}
#ranking-boards .ranking-value .rank-badge{display:none}
#ranking-boards .ranking-board-note{margin:10px 70px 17px;font-size:10px;color:#8f8162}
#ranking-boards .ranking-empty{min-height:390px;border-radius:22px;border:2px solid #fff2c7;background:linear-gradient(#fff6d235,#fffae9ee 80%),url('../assets/arena-art-v1/village.webp') center/cover}
#ranking-boards .ranking-empty .social-empty-emblem{width:150px;height:150px;margin-bottom:12px}
#ranking-boards .ranking-empty strong{font-size:34px;color:#165b69;text-shadow:0 2px #fff8d9}
#ranking-boards .ranking-empty p{font-size:14px;color:#305e66;background:#fff4d8d9;border-radius:14px;padding:12px 20px}

#friends-dialog[open]{width:min(1180px,calc(100vw - 76px));height:min(800px,calc(100dvh - 100px));background:linear-gradient(#04a6b3 0 33%,#fff2d6 33%);gap:0}
#friends-dialog .social-heading{min-height:155px;padding:0 270px 0 30px;background:linear-gradient(90deg,#13b7c82b,#027e9b80),url('../assets/arena-art-v1/village.webp') center 48%/cover;border-bottom:3px solid #f9de94;align-items:flex-end}
#friends-dialog .friends-wood-sign{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:620px;height:177px;max-width:100%;padding:15px 35px 17px;box-sizing:border-box;background:url('../assets/social-prestige-leaders/friends-sign.webp') center/100% 100% no-repeat;filter:drop-shadow(0 5px 3px #07313d66);margin:0 0 -6px -10px}
#friends-dialog .friends-wood-sign h2{order:0;font-size:49px!important;line-height:1.02!important;margin:15px 0 0!important;white-space:nowrap;text-shadow:0 3px #704219,0 5px #472b10;color:#fff0bf;letter-spacing:-1px}
#friends-dialog .friends-wood-sign>span{order:1;letter-spacing:1px;color:#ffecc0;font-size:14px;line-height:1.1;margin:15px 0 0;text-shadow:0 2px #603917}
#friends-dialog .friends-wood-sign>p{display:none}
#friends-dialog .social-mascot{width:284px;height:284px;right:45px;top:-119px}
#friends-dialog .friends-connect{padding:16px 26px 20px;grid-template-columns:1fr 1fr;gap:13px;background:linear-gradient(#13c0c6,#00a2b3);box-shadow:inset 0 3px #f5e59e,inset 0 -2px #0c6e83}
#friends-dialog .friends-code{position:relative;padding:13px 18px;border:2px solid #fff0ab;outline:1px solid #a8812d;border-radius:16px;background:radial-gradient(ellipse at 30% 0,#fff7b6,transparent 60%),linear-gradient(#ffd66b,#e6b450);box-shadow:inset 0 0 0 3px #eebf60,inset 0 0 0 4px #fff1bd,0 4px #07818d;gap:6px}
#friends-dialog .friends-code>span{color:#673c16;font-size:14px;font-weight:900;letter-spacing:0;text-transform:none;text-align:center;grid-column:1}
#friends-dialog .friends-code>strong{align-self:center;background:#ffedb3;border:1px solid #c49643;border-radius:10px;box-shadow:inset 0 2px 4px #b980252f,0 1px #fff7d1;padding:5px 13px;font-size:29px;line-height:1.1;color:#5a3211;text-align:center;letter-spacing:1px;grid-column:1}
#friends-dialog .friends-code>button{grid-column:2;grid-row:1/3;align-self:center}
#friends-dialog button:not(.social-close){min-height:46px;padding:9px 19px;font:900 15px/1.15 'Nunito Sans',sans-serif;color:#fffaf0;border:2px solid #d8ffff;border-radius:26px;background:linear-gradient(#77f4f1,#08b7d0 50%,#0086a5);box-shadow:inset 0 2px #d5fffd,0 0 0 1px #087494,0 3px #05647b;text-shadow:0 1px #086079}
#friends-dialog .friends-code button{font-size:14px;white-space:nowrap}
#friends-dialog .friends-add{border:2px solid #6eeae2;outline:1px solid #037b8c;border-radius:16px;padding:12px;display:flex;align-items:center;background:linear-gradient(145deg,#60d9db88,#0b9cb788);box-shadow:inset 0 0 0 2px #199bac,0 3px #0d7d90}
#friends-dialog .friends-add label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#friends-dialog .friends-add>div{width:100%;gap:11px}
#friends-dialog .friends-add input{font-size:15px;text-transform:none;letter-spacing:0;padding:12px 15px;min-height:54px;border:2px solid #7bbcb8;border-radius:16px;box-shadow:inset 0 3px 5px #08496b26,0 1px #cafdfa;background:linear-gradient(#e0f1ed,#f8fff5);color:#265b72}
#friends-dialog .friends-add input::placeholder{font-size:12px;color:#567e8c}
#friends-dialog .friends-add button,#friends-dialog .friends-row-action:first-child{background:linear-gradient(#fff6a4,#ffd549 37%,#f1b013 84%,#ffd162);border-color:#fff1b3;color:#5e340b;box-shadow:inset 0 2px #fff9d3,0 0 0 1px #b6842c,0 3px #a06c21;text-shadow:0 1px #fff0b0}
#friends-dialog .friends-add button{padding:10px 20px;font-size:17px}
#friends-dialog .friends-tabs{position:relative;z-index:2;grid-template-columns:repeat(3,minmax(0,1fr));margin:-10px 85px 14px;gap:5px}
#friends-dialog .friends-tabs button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:50px;background:linear-gradient(#fffdf0,#eadcc2);border-color:#fff6d7;box-shadow:inset 0 2px #fff,0 0 0 1px #b78c47,0 3px #ac8b56;font-size:21px;color:#523a28;text-shadow:0 1px #fff}
#friends-dialog .friends-tabs button[aria-pressed=true]{background:linear-gradient(#c4fffa,#36e7ee 46%,#13becf);border-color:#efffec;color:#10546a;box-shadow:inset 0 2px #fff,0 0 0 1px #b78c47,0 3px #a8813b;text-shadow:0 1px #c8ffed}
#friends-dialog .friends-tab-count{font:900 15px/1.1 'Nunito Sans';color:#fff;padding:5px 13px;border-radius:30px;background:#938b93;text-shadow:none;box-shadow:inset 0 1px 3px #62566455}
#friends-dialog .friends-tabs button[aria-pressed=true] .friends-tab-count{background:#0799b0;box-shadow:inset 0 1px 3px #086885}
#friends-dialog .friends-list{margin:0 27px;padding:3px 4px 7px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:auto}
#friends-dialog .friends-person{position:relative;isolation:isolate;overflow:hidden;min-height:106px;box-sizing:border-box;margin-bottom:9px;gap:18px;padding:8px 20px;border:1px solid #d3a76c;border-radius:22px;background:linear-gradient(#fffdf3,#f7e8cb);box-shadow:inset 0 0 0 2px #fffaf0,0 3px #d2b98655}
#friends-dialog .friends-row-scenery{position:absolute;pointer-events:none;z-index:-1;inset:0 24% 0 34%;background:url('../assets/arena-art-v1/village.webp') center 60%/cover;mask-image:linear-gradient(90deg,transparent,#000 24%,#000 70%,transparent);opacity:.85}
#friends-dialog .friends-person:nth-child(even) .friends-row-scenery{background-image:url('../assets/home-art-v1/lagoon.webp')}
#friends-dialog .friends-avatar{width:82px;height:82px;flex:0 0 82px;border-radius:50%;border:3px solid #ffeab0;box-shadow:0 0 0 2px #b2873d,0 3px 4px #91764f55;background:radial-gradient(#b8f7ef,#0794b8)}
#friends-dialog .friends-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 15%;transform:scale(1.6);transform-origin:center 15%;background:none}
#friends-dialog .friends-person-copy{position:relative;flex:1;min-width:0;max-width:360px;text-shadow:0 1px #fff7e0}
#friends-dialog .friends-person-name{font:800 24px/1.1 'Baloo 2',sans-serif;color:#4c281b}
#friends-dialog .friends-person-detail{font-size:14px;font-weight:900;margin-top:5px;color:#858279;display:flex;align-items:center;gap:7px}
#friends-dialog .friends-person-detail::before{content:'';display:inline-block;width:11px;height:11px;background:#969391;border-radius:50%;box-shadow:0 1px #fff;flex:none}
#friends-dialog .friends-person[data-presence=online] .friends-person-detail{color:#1b9422}
#friends-dialog .friends-person[data-presence=online] .friends-person-detail::before{width:11px;height:11px;background:#26c911;box-shadow:0 1px #fff;margin:0}
#friends-dialog .friends-person[data-presence=battle] .friends-person-detail{color:#0482b8}
#friends-dialog .friends-person[data-presence=battle] .friends-person-detail::before{background:#0dacf0}
#friends-dialog .friends-person-caption{display:block;margin-top:5px;color:#827d71;font-size:11px;font-weight:700}
#friends-dialog .friends-row-actions{margin-left:auto;gap:15px;align-items:center}
#friends-dialog .friends-row-action{min-width:115px;min-height:44px;font-size:15px;padding:10px 17px;background:linear-gradient(#fffefa,#e8dfd1);border-color:#fffaf4;color:#665b50;box-shadow:inset 0 2px #fff,0 0 0 1px #b9a89a,0 3px #b8a799;text-shadow:0 1px #fff}
#friends-dialog .friends-row-action:first-child{min-width:139px;font-size:18px}
#friends-dialog .friends-row-action:disabled{opacity:1;background:linear-gradient(#e9e8e5,#b4b5bf);border-color:#f5f1eb;color:#7c7c81;box-shadow:inset 0 2px #f5f5f1,0 0 0 1px #a5a5aa,0 3px #99979b;text-shadow:0 1px #f6f6f0}
#friends-dialog footer{padding:14px 31px 18px;min-height:51px;background:linear-gradient(transparent,#f9e7c3);border-radius:0 0 24px 24px;gap:15px}
#friends-dialog .friends-message{font:italic 800 18px/1.2 'Baloo 2',sans-serif;color:#11768b;text-align:center}
#friends-dialog .friends-message[data-error=true]{color:#a54833;font-size:13px;font-style:normal}
#friends-dialog footer button{min-width:148px;min-height:46px;font-size:16px}
#friends-dialog .friends-empty{min-height:280px;border:1px solid #d3b176;border-radius:23px;background:linear-gradient(#fff4d591,#fff8e9ed),url('../assets/arena-art-v1/village.webp') center/cover}
#friends-dialog .friends-empty .social-empty-emblem{width:132px;height:132px;margin-bottom:10px}
#friends-dialog .friends-empty h3{font-size:29px;color:#1e6070}
#friends-dialog .friends-empty p{font-size:14px;color:#5c776e}

@media(max-height:650px) and (min-width:651px){
 #ranking-boards[open],#friends-dialog[open]{width:calc(100vw - 48px);height:calc(100dvh - 36px);max-height:calc(100dvh - 36px);top:18px;bottom:18px;margin:0 auto}
 #ranking-boards .social-heading{min-height:62px;padding:7px 165px 7px 70px}
 #ranking-boards .social-heading h2{font-size:33px!important}
 #ranking-boards .social-heading small{font-size:9px;margin-top:2px}
 #ranking-boards .social-mascot{width:133px;height:133px;top:-54px;right:52px}
 #ranking-boards .ranking-metrics{padding:0 15px;gap:4px}
 #ranking-boards .ranking-metrics button{min-height:35px;font-size:15px;padding:2px 10px;gap:6px}
 #ranking-boards .ranking-metric-art{width:28px;height:28px}
 #ranking-boards .ranking-formats{grid-column:1;grid-row:auto;margin:0 auto;padding:4px 18px 5px;gap:8px}
 #ranking-boards .ranking-formats button{min-width:83px;min-height:26px;font-size:11px;padding:2px 13px}
 #ranking-boards .ranking-board-status{display:none}
 #ranking-boards[open]{grid-template-rows:auto auto auto minmax(0,1fr) auto}
 #ranking-boards .ranking-board-content{margin:7px 17px 0;grid-column:1}
 #ranking-boards .ranking-podium{height:193px;padding:0 12.5%}
 #ranking-boards .ranking-champion,#ranking-boards .ranking-champion[data-position='1']{display:block;height:100%;min-height:0;padding:0}
 #ranking-boards .ranking-champion-portrait,#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{width:100%;height:68%;bottom:29%}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:72%;bottom:32%}
 #ranking-boards .ranking-champion-name{font-size:15px}
 #ranking-boards .ranking-champion-value{font-size:18px;padding:0;line-height:1.05}
 #ranking-boards .ranking-champion-rank{display:none}
 #ranking-boards .ranking-medal,#ranking-boards .ranking-champion[data-position='1'] .ranking-medal{width:30px;height:30px;font-size:24px;left:50%;top:63%}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-medal{top:57%;font-size:28px}
 #ranking-boards .ranking-board-note{font-size:8px;margin:5px 50px 8px;grid-column:1}
 #ranking-boards .ranking-board-content td{padding:4px 11px}
 #ranking-boards .ranking-player-face{width:35px;height:35px}
 #ranking-boards .ranking-player strong{font-size:16px}
 #ranking-boards .ranking-value strong{font-size:22px}
 #ranking-boards .ranking-empty{display:flex;min-height:172px;padding:10px;gap:0}
 #ranking-boards .ranking-empty .social-empty-emblem{width:68px;height:68px;margin:0}
 #ranking-boards .ranking-empty strong{font-size:23px}
 #ranking-boards .ranking-empty p{font-size:11px;margin:5px 0 0;padding:4px 10px}
 #friends-dialog .social-heading{min-height:71px;padding:0 180px 0 30px}
 #friends-dialog .friends-wood-sign{width:370px;height:100px;padding:7px 20px 9px;margin-bottom:-5px}
 #friends-dialog .friends-wood-sign h2{font-size:30px!important;margin:7px 0 0!important}
 #friends-dialog .friends-wood-sign>span{display:block;font-size:9px;margin-top:7px}
 #friends-dialog .social-mascot{width:145px;height:145px;top:-65px;right:45px}
 #friends-dialog .friends-connect{padding:8px 17px 11px;gap:12px}
 #friends-dialog .friends-code{grid-template-columns:auto 1fr auto;padding:8px 11px;gap:6px}
 #friends-dialog .friends-code>span{font-size:9px;grid-column:auto;max-width:42px;line-height:1.2}
 #friends-dialog .friends-code>strong{font-size:20px;padding:3px 5px;grid-column:auto}
 #friends-dialog .friends-code>button{grid-column:auto;grid-row:auto;font-size:10px;min-height:32px;padding:5px 9px}
 #friends-dialog .friends-add{padding:6px}
 #friends-dialog .friends-add input{font-size:11px;min-height:36px;padding:6px 9px;border-radius:10px}
 #friends-dialog .friends-add input::placeholder{font-size:10px}
 #friends-dialog .friends-add button{min-height:35px;font-size:11px;padding:6px 10px}
 #friends-dialog .friends-tabs{margin:-4px 60px 7px;gap:5px}
 #friends-dialog .friends-tabs button{min-height:32px;font-size:14px;padding:4px 10px;gap:9px}
 #friends-dialog .friends-tab-count{font-size:10px;padding:3px 8px}
 #friends-dialog .friends-list{margin:0 18px;padding:2px 3px 5px}
 #friends-dialog .friends-person{min-height:66px;padding:7px 11px;gap:12px;margin-bottom:7px;border-radius:15px}
 #friends-dialog .friends-avatar{width:48px;height:48px;flex-basis:48px;border-width:2px}
 #friends-dialog .friends-person-name{font-size:17px}
 #friends-dialog .friends-person-detail{font-size:10px;margin-top:3px;gap:5px}
 #friends-dialog .friends-person-detail::before,#friends-dialog .friends-person[data-presence=online] .friends-person-detail::before{width:7px;height:7px}
 #friends-dialog .friends-person-caption{display:none}
 #friends-dialog .friends-row-actions{gap:10px}
 #friends-dialog .friends-row-action,#friends-dialog .friends-row-action:first-child{min-width:83px;min-height:34px;font-size:11px;padding:6px 12px}
 #friends-dialog footer{padding:7px 22px 9px;min-height:36px}
 #friends-dialog .friends-message{font-size:12px}
 #friends-dialog footer button{min-height:32px;min-width:99px;font-size:11px;padding:5px 12px}
 #friends-dialog .friends-empty{display:flex;min-height:100px;padding:8px}
 #friends-dialog .friends-empty .social-empty-emblem{width:44px;height:44px;margin:0}
 #friends-dialog .friends-empty h3{font-size:20px;margin:3px 0}
 #friends-dialog .friends-empty p{font-size:10px}
}
@media(max-width:650px){
 #ranking-boards[open],#friends-dialog[open]{width:calc(100vw - 32px);height:calc(100dvh - 75px);max-height:calc(100dvh - 75px);top:40px;bottom:35px;margin:0 auto}
 #ranking-boards .social-heading{min-height:120px;padding:17px 72px 17px 15px;justify-content:flex-start;text-align:left}
 #ranking-boards .social-heading h2{font-size:32px!important;white-space:normal}
 #ranking-boards .social-heading small{font-size:10px;margin-top:8px}
 #ranking-boards .social-mascot{width:119px;height:119px;right:35px;top:-46px}
 #ranking-boards .ranking-metrics{padding:0 7px;gap:3px}
 #ranking-boards .ranking-metrics button{display:flex;flex-direction:column;gap:0;font-size:12px;min-height:62px;padding:4px;border-radius:19px}
 #ranking-boards .ranking-metric-art{width:31px;height:30px}
 #ranking-boards .ranking-formats{padding:8px 8px 9px;gap:5px;max-width:95%}
 #ranking-boards .ranking-formats button{min-width:75px;min-height:31px;font-size:12px;padding:3px 9px}
 #ranking-boards .ranking-board-status{font-size:9px;margin:6px 10px}
 #ranking-boards .ranking-board-content{margin:0 8px;border-radius:16px}
 #ranking-boards .ranking-podium{height:206px;padding:0 7%;background-size:116% 100%;background-position:center}
 #ranking-boards .ranking-champion,#ranking-boards .ranking-champion[data-position='1']{display:block;min-height:0;padding:0;height:100%}
 #ranking-boards .ranking-champion-portrait,#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:55%;bottom:35%;width:100%}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:62%;bottom:38%}
 #ranking-boards .ranking-champion-name{font-size:11px;white-space:normal;line-height:1.05;max-height:24px}
 #ranking-boards .ranking-champion-value{font-size:13px;white-space:nowrap;line-height:1.1;padding:0}
 #ranking-boards .ranking-champion-plaque{bottom:3.5%;height:25%;padding:0 2px}
 #ranking-boards .ranking-champion-rank{display:none}
 #ranking-boards .ranking-medal,#ranking-boards .ranking-champion[data-position='1'] .ranking-medal{width:23px;height:23px;left:50%;top:63%;font-size:23px}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-medal{top:57%;font-size:27px}
 #ranking-boards .ranking-board-content td{padding:6px 7px}
 #ranking-boards .ranking-board-content td:first-child{width:24px;font-size:22px}
 #ranking-boards .ranking-player{gap:7px}
 #ranking-boards .ranking-player-face{width:36px;height:36px}
 #ranking-boards .ranking-player strong{font-size:13px;max-width:125px;white-space:normal;overflow-wrap:anywhere}
 #ranking-boards .ranking-player small{font-size:8px}
 #ranking-boards .ranking-value strong{font-size:19px;margin:0}
 #ranking-boards .ranking-value small{display:block;font-size:9px}
 #ranking-boards .ranking-board-note{font-size:8px;margin:10px 28px 13px}
 #ranking-boards .ranking-empty{display:flex;min-height:290px;padding:20px 15px}
 #ranking-boards .ranking-empty strong{font-size:24px}
 #ranking-boards .ranking-empty p{font-size:12px;padding:10px}
 #friends-dialog .social-heading{min-height:116px;padding:0 20px 0 10px;align-items:end}
 #friends-dialog .friends-wood-sign{width:270px;max-width:92%;height:115px;padding:13px 20px 10px;margin:0 0 -9px -7px;align-items:center}
 #friends-dialog .friends-wood-sign h2{font-size:27px!important;white-space:normal;margin:8px 0 0!important;text-align:center;line-height:.98!important;max-width:200px}
 #friends-dialog .friends-wood-sign>span{font-size:8px;margin-top:7px;display:block}
 #friends-dialog .social-mascot{width:126px;height:126px;right:20px;top:-50px}
 #friends-dialog .friends-connect{grid-template-columns:1fr;gap:9px;padding:13px 11px 18px}
 #friends-dialog .friends-code{grid-template-columns:1fr auto;padding:8px 11px;gap:4px}
 #friends-dialog .friends-code>span{grid-column:1;font-size:11px;max-width:none}
 #friends-dialog .friends-code>strong{font-size:24px;padding:4px 9px}
 #friends-dialog .friends-code>button{grid-column:2;grid-row:1/3;font-size:12px;min-height:40px;padding:7px 11px}
 #friends-dialog .friends-add{padding:8px;gap:6px}
 #friends-dialog .friends-add>div{gap:7px}
 #friends-dialog .friends-add input{min-height:44px;font-size:12px;padding:8px}
 #friends-dialog .friends-add input::placeholder{font-size:10px}
 #friends-dialog .friends-add button{font-size:12px;min-height:42px;padding:8px 12px}
 #friends-dialog .friends-tabs{margin:-7px 9px 9px;gap:4px}
 #friends-dialog .friends-tabs button{font-size:11px;min-height:40px;padding:5px 6px;gap:4px}
 #friends-dialog .friends-tab-count{font-size:10px;padding:3px 6px}
 #friends-dialog .friends-list{margin:0 9px;padding:3px 1px 6px}
 #friends-dialog .friends-person{padding:10px 9px;min-height:118px;gap:11px;display:grid;grid-template-columns:51px minmax(0,1fr);border-radius:19px}
 #friends-dialog .friends-avatar{width:49px;height:49px;flex-basis:49px;border-width:2px}
 #friends-dialog .friends-person-copy{max-width:none}
 #friends-dialog .friends-person-name{font-size:18px}
 #friends-dialog .friends-person-detail{font-size:11px}
 #friends-dialog .friends-person-caption{display:none}
 #friends-dialog .friends-row-actions{grid-column:1/-1;display:flex;flex-direction:row;justify-content:flex-end;margin:0;gap:9px}
 #friends-dialog .friends-row-action,#friends-dialog .friends-row-action:first-child{font-size:12px;min-width:91px;min-height:34px;padding:6px 12px}
 #friends-dialog .friends-row-scenery{inset:0 0 0 40%;opacity:.5}
 #friends-dialog footer{padding:9px 17px 12px;min-height:40px;gap:8px}
 #friends-dialog .friends-message{font-size:12px;text-align:left}
 #friends-dialog footer button{min-width:78px;min-height:37px;font-size:11px;padding:7px 11px}
 #friends-dialog .friends-empty{min-height:220px;padding:18px}
 #friends-dialog .friends-empty .social-empty-emblem{width:84px;height:84px}
 #friends-dialog .friends-empty h3{font-size:23px}
 #friends-dialog .friends-empty p{font-size:12px}
}
#friends-dialog .social-heading>.friends-wood-sign{width:620px;max-width:100%}
#ranking-boards .ranking-podium{padding-left:8%;padding-right:8%}
#ranking-boards .ranking-champion{z-index:1}
#ranking-boards .ranking-champion-portrait{z-index:1;height:77%;bottom:16%}
#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:88%;bottom:13%}
#ranking-boards .ranking-champion-plaque{bottom:12%;height:20%;z-index:4}
#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-plaque{bottom:12%;height:25%}
#ranking-boards .ranking-medal{top:57%;z-index:4}
#ranking-boards .ranking-champion[data-position='1'] .ranking-medal{top:50.5%}
#ranking-boards .ranking-champion[data-position='2']{transform:translateX(-1%)}
#ranking-boards .ranking-champion[data-position='3']{transform:translateX(1%)}
@media(max-height:650px) and (min-width:651px){
 #friends-dialog .social-heading>.friends-wood-sign{width:370px}
 #ranking-boards .ranking-champion-portrait{height:77%;bottom:16%}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:88%;bottom:13%}
 #ranking-boards .ranking-medal{top:57%}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-medal{top:50.5%}
}
@media(max-width:650px){
 #friends-dialog .social-heading>.friends-wood-sign{width:270px;max-width:92%}
 #ranking-boards .ranking-podium{padding-left:4%;padding-right:4%;background-size:110% 100%}
 #ranking-boards .ranking-champion-portrait{height:74%;bottom:18%}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:86%;bottom:15%}
 #ranking-boards .ranking-medal{top:57%}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-medal{top:50.5%}
}
#ranking-boards .ranking-champion{z-index:auto;transform:none!important}
#ranking-boards .ranking-podium-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2;pointer-events:none}
@media(max-width:650px){#ranking-boards .ranking-podium-overlay{width:110%;left:-5%;max-width:none}}
/* Crop to the actual head rather than scaling the entire sprite into a square. */
#friends-dialog .friends-avatar img,#ranking-boards .ranking-player-face img{position:absolute;inset:auto;width:115%;height:auto;max-width:none;max-height:none;left:-7.5%;top:-7%;object-fit:initial;object-position:initial;transform:none;background:none}
#friends-dialog .friends-avatar[data-character='mira'] img,#ranking-boards .ranking-player-face[data-character='mira'] img{width:108%;left:-4%;top:-6%}
#friends-dialog .friends-avatar[data-character='lumi'] img,#ranking-boards .ranking-player-face[data-character='lumi'] img{width:108%;left:-4%;top:-8%}
#friends-dialog .friends-avatar[data-character='vera'] img,#ranking-boards .ranking-player-face[data-character='vera'] img{width:131%;left:-15.5%;top:-7%}
#friends-dialog .friends-wood-sign{height:151px}
#friends-dialog .friends-person{min-height:103px}
#friends-dialog footer{padding-top:9px;padding-bottom:14px}
#ranking-boards .ranking-podium{height:300px}
#ranking-boards .ranking-board-note{margin-top:8px;margin-bottom:12px}
#ranking-boards .ranking-board-status{margin-top:3px;margin-bottom:3px;font-size:9px;min-height:12px}
@media(max-height:650px) and (min-width:651px){
 #friends-dialog .social-heading{height:69px;min-height:69px;max-height:69px}
 #friends-dialog .friends-wood-sign{height:74px}
 #friends-dialog .friends-wood-sign h2{font-size:26px!important;margin-top:4px!important}
 #friends-dialog .friends-wood-sign>span{font-size:8px;margin-top:6px}
 #friends-dialog .friends-connect{padding-top:7px;padding-bottom:9px}
 #friends-dialog .friends-code{padding-top:6px;padding-bottom:6px}
 #friends-dialog .friends-person{min-height:61px;padding-top:5px;padding-bottom:5px;margin-bottom:6px}
 #friends-dialog .friends-avatar{width:44px;height:44px;flex-basis:44px}
 #friends-dialog footer{padding-top:5px;padding-bottom:7px;min-height:31px}
 #friends-dialog footer button{min-height:30px}
 #ranking-boards .ranking-podium{height:169px}
 #ranking-boards .ranking-board-note{margin-top:4px;margin-bottom:7px}
}
@media(max-width:650px){
 #friends-dialog .friends-wood-sign{height:115px}
 #friends-dialog .friends-person{min-height:118px}
 #friends-dialog footer{padding-top:9px;padding-bottom:12px}
 #ranking-boards .ranking-podium{height:206px}
 #ranking-boards .ranking-board-note{margin-top:10px;margin-bottom:13px}
}
#ranking-boards .ranking-champion{grid-row:1}
#ranking-boards .ranking-champion[data-position='1']{grid-column:2}
#ranking-boards .ranking-champion[data-position='2']{grid-column:1}
#ranking-boards .ranking-champion[data-position='3']{grid-column:3}
@media(max-height:650px) and (min-width:651px){#friends-dialog .friends-row-action,#friends-dialog .friends-row-action:first-child{min-height:40px}}
/* Stage height leaves the entire character face above the medal rim. */
#ranking-boards .ranking-podium{background:radial-gradient(ellipse at 50% 0,#fff6b877,transparent 65%),url('../assets/arena-art-v1/village.webp') center 55%/cover}
#ranking-boards .ranking-podium-overlay{height:74%;top:auto;bottom:0}
#ranking-boards .ranking-champion-portrait,#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{bottom:15%;height:82%}
#ranking-boards .ranking-champion-plaque,#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-plaque{bottom:8.5%;height:18%;padding:0 4px}
#ranking-boards .ranking-champion-name,#ranking-boards .ranking-champion-value,#ranking-boards .ranking-champion-rank{align-self:center;justify-self:center;text-align:center;max-width:100%}
#ranking-boards .ranking-champion-name{font-size:20px}
#ranking-boards .ranking-champion-value{font-size:25px}
#ranking-boards .ranking-champion-rank{display:none}
#ranking-boards .ranking-medal{top:68.2%}
#ranking-boards .ranking-champion[data-position='1'] .ranking-medal{top:63.4%;font-size:35px}
#ranking-boards .ranking-player{display:table-cell;vertical-align:middle}
#ranking-boards .ranking-player-inner{display:flex;gap:18px;align-items:center;min-width:0}
#ranking-boards .ranking-board-content tr.is-you td{background:linear-gradient(#73efea,#43cccf)}
#ranking-boards .ranking-player .ranking-player-face{display:block;gap:0}
#friends-dialog .friends-avatar[data-character='vera'] img,#ranking-boards .ranking-player-face[data-character='vera'] img{width:131%;left:-15.5%;top:-9%}
@media(max-height:650px) and (min-width:651px){
 #ranking-boards .ranking-champion-name{font-size:13px;line-height:1.05;margin:0}
 #ranking-boards .ranking-champion-value{font-size:15px;line-height:1.1;margin:0}
 #ranking-boards .ranking-medal{top:68.2%;font-size:23px}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-medal{top:63.4%;font-size:25px}
 #ranking-boards .ranking-player-inner{gap:10px}
}
@media(max-width:650px){
 #ranking-boards .ranking-champion-name{font-size:10px;line-height:1.05;margin:0;white-space:normal;max-height:21px}
 #ranking-boards .ranking-champion-value{font-size:12px;line-height:1.1;margin:0}
 #ranking-boards .ranking-medal{top:68.2%;font-size:23px}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-medal{top:63.4%;font-size:25px}
 #ranking-boards .ranking-champion-portrait,#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:76%;bottom:20%}
 #ranking-boards .ranking-player-inner{gap:7px}
 #ranking-boards .social-heading{padding-right:16px;padding-left:12px;align-items:end;min-height:120px}
 #ranking-boards .social-heading>div{width:100%;align-items:center}
 #ranking-boards .social-heading h2{font-size:30px!important;line-height:1!important;white-space:nowrap;margin:0 0 6px!important}
 #ranking-boards .social-heading small{font-size:9px;margin-top:2px}
 #ranking-boards .social-mascot{width:89px;height:89px;right:37px;top:-50px}
 #friends-dialog .social-mascot{width:101px;height:101px;right:31px;top:-47px}
 #friends-dialog .social-heading{min-height:119px;align-items:end}
 #friends-dialog .friends-wood-sign{height:94px;margin-bottom:0;padding-top:7px}
 #friends-dialog .friends-wood-sign h2{font-size:26px!important;margin-top:5px!important}
}
@media(max-width:650px){#friends-dialog .social-mascot{width:89px;height:89px;right:35px;top:-44px}}