/* Illustrated island windows. Deliberately scoped away from the battle HUD. */
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog){
 --social-ink:#164e60;--social-gold:#ffe4a0;box-sizing:border-box;
 width:min(960px,calc(100vw - 44px));max-width:none;max-height:calc(100dvh - 104px);
 top:48px;bottom:0;margin:auto;padding:0;overflow:visible;
 color:var(--social-ink);border:3px solid #fff2b9;border-radius:29px;
 background:linear-gradient(135deg,#faffef,#e1f7f1 58%,#bceae7);
 box-shadow:0 0 0 2px #bd913f,0 0 0 6px #59c8c4,0 8px 0 5px #146277,0 28px 85px #021b35ad;
 font-family:'Nunito Sans',sans-serif;
}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)::backdrop{background:#042339ba;backdrop-filter:blur(6px)}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading{
 position:relative;flex:none;display:flex;align-items:center;min-height:118px;box-sizing:border-box;
 padding:23px 250px 22px 28px;margin:0;border:0;border-bottom:3px solid #f6de99;border-radius:24px 24px 0 0;
 background:linear-gradient(90deg,#074b64f5 10%,#087d8bbb 64%,#128aa548),url('../assets/home-art-v1/lagoon.webp') 50% 38%/cover;
 box-shadow:inset 0 2px 0 #ffffffa8;color:#fff8db;
}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading :is(small,.eyebrow,.friends-heading>div>span){font:900 10px/1.3 'Nunito Sans',sans-serif;color:#9feee6;letter-spacing:2px}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading h2{font:800 38px/1.1 'Baloo 2',sans-serif!important;color:#fff7d8;margin:4px 0 3px!important;text-shadow:0 3px 0 #054555;letter-spacing:-.5px}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading p{font-size:12px;line-height:1.45;color:#defaf1;margin:6px 0 0;max-width:560px}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-mascot{position:absolute;z-index:3;top:-66px;right:65px;width:204px;height:204px;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 9px 5px #043d5650)}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) :is(.social-close,.dialog-close){position:absolute;z-index:5;right:13px;top:12px;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:2px solid #fff1b5;border-radius:50%;background:linear-gradient(#3dcee0,#09758f);color:#fff9df;font:800 29px/1 'Nunito Sans',sans-serif;box-shadow:0 3px 0 #05506b;cursor:pointer}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) button{touch-action:manipulation;transition:filter .15s,box-shadow .15s}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) button:hover:not(:disabled){filter:brightness(1.08)}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) :is(button,input):focus-visible{outline:3px solid #166bad;outline-offset:3px}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-empty-emblem{display:block;width:100px;height:100px;object-fit:contain;margin:0 auto 12px;filter:drop-shadow(0 7px 5px #22525f22)}
.social-eyebrow{display:block;font-size:10px;font-weight:900;letter-spacing:2px;color:#43868a;margin-bottom:9px}

/* Ranking board: real season leaders, with an illustrated state before the first result. */
#ranking-boards[open]{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;height:min(760px,calc(100dvh - 104px));overflow:visible}
#ranking-boards .ranking-metrics{gap:10px;padding:18px 25px 0}
#ranking-boards button:not(.social-close){font:900 12px/1.3 'Nunito Sans',sans-serif;border:2px solid #fffbe1;border-radius:13px;color:#176075;background:linear-gradient(#fafff5,#c6f2e9);box-shadow:0 3px 0 #60aeb4;padding:11px 13px;min-height:42px}
#ranking-boards .ranking-metrics button[aria-pressed=true]{background:linear-gradient(#fff6bf,#ffd76c);border-color:#fffce3;color:#775119;box-shadow:0 3px 0 #bb8634}
#ranking-boards .ranking-formats{margin:15px 0 7px;gap:7px}
#ranking-boards .ranking-formats button{min-width:94px;min-height:34px;padding:6px 16px;border-radius:30px}
#ranking-boards .ranking-formats button[aria-pressed=true]{color:#fff8df;background:linear-gradient(#23acc1,#066983);border-color:#b6f8ef;box-shadow:0 2px 0 #06475c}
#ranking-boards .ranking-board-status{font-size:11px;margin:8px 24px 14px;min-height:16px;color:#407783}
#ranking-boards .ranking-board-content{margin:0 24px;min-height:0;border:1px solid #9fc9c3;border-radius:19px;background:linear-gradient(#f8fff2e6,#e4f5eaeb),url('../assets/home-art-v1/lagoon.webp') center/cover;box-shadow:inset 0 2px 8px #438d9620;overflow:auto;scrollbar-color:#49aeba transparent}
#ranking-boards .ranking-empty{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
#ranking-boards .ranking-empty .social-empty-emblem{width:120px;height:120px;margin-bottom:15px}
#ranking-boards .ranking-empty strong{font:800 29px/1.1 'Baloo 2',sans-serif;color:#215d6c}
#ranking-boards .ranking-empty p{max-width:380px;font-size:12px;line-height:1.6;color:#4a7c86}
#ranking-boards .ranking-board-note{font-size:10px;color:#49727e;margin:13px 24px 17px;line-height:1.5}
#ranking-boards .ranking-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;padding:26px 18px 16px;background:radial-gradient(ellipse at 50% 20%,#fff2b8bb,transparent 70%)}
#ranking-boards .ranking-champion{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:end;min-height:194px;padding:10px 12px 13px;border:2px solid #fff8df;border-radius:19px;background:linear-gradient(145deg,#f9fff5,#9edbdc);box-shadow:0 3px 0 #6ea8b3,0 5px 12px #315e7826;text-align:center;min-width:0}
#ranking-boards .ranking-champion[data-position='1']{order:2;min-height:219px;background:linear-gradient(150deg,#fff8db,#ffdd87);border-color:#fffbe4;box-shadow:0 3px 0 #c69341,0 0 0 1px #d9b263,0 8px 24px #b88c4824}
#ranking-boards .ranking-champion[data-position='2']{order:1}
#ranking-boards .ranking-champion[data-position='3']{order:3;background:linear-gradient(145deg,#fff9df,#e8c5a8);box-shadow:0 3px 0 #ae896e}
#ranking-boards .ranking-champion-portrait{position:relative;flex:none;height:90px;width:100%;display:grid;place-items:center;filter:drop-shadow(0 5px 2px #23466020)}
#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:111px}
#ranking-boards .ranking-champion-portrait img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:100%;object-fit:contain;margin:0}
#ranking-boards .ranking-champion-name{display:block;max-width:100%;font:800 20px/1.2 'Baloo 2',sans-serif;overflow-wrap:anywhere;color:#184f64;margin:8px 0 2px}
#ranking-boards .ranking-champion-rank{font-size:10px;color:#5c737b}
#ranking-boards .ranking-champion-value{font:800 18px/1.1 'Baloo 2',sans-serif;margin-top:8px;padding:5px 13px;border:1px solid #fffee9;border-radius:30px;color:#fff6d3;background:#0c758b;box-shadow:0 2px 0 #3f829766}
#ranking-boards .ranking-medal{position:absolute;top:-16px;left:14px;display:grid;place-items:center;width:38px;height:42px;border:2px solid #fff7c6;border-radius:13px 13px 19px 19px;background:linear-gradient(#ffe9a7,#dca645);box-shadow:0 3px 0 #957039;font:800 25px 'Baloo 2';color:#684510}
#ranking-boards .ranking-board-content table{border-collapse:separate;border-spacing:0 5px;padding:0 12px 8px}
#ranking-boards .ranking-board-content th{background:#12677b;color:#efffe5;font-size:10px;padding:9px 14px}
#ranking-boards .ranking-board-content th:first-child{border-radius:10px 0 0 10px}
#ranking-boards .ranking-board-content th:last-child{border-radius:0 10px 10px 0;text-align:right}
#ranking-boards .ranking-board-content td{padding:7px 13px;border-bottom:1px solid #a8d3ca;background:#fcfff4}
#ranking-boards .ranking-player img{width:42px;height:49px;background:linear-gradient(#d7f7ee,#b4ded5)}
#ranking-boards .ranking-player strong{font-size:14px}
#ranking-boards .ranking-value strong{font-size:21px}

/* Friends: a compact invitation desk above a roomy crew list. */
#friends-dialog[open]{display:flex;height:min(710px,calc(100dvh - 104px));gap:0}
#friends-dialog .social-mascot{width:230px;right:58px;top:-68px}
#friends-dialog .friends-connect{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px 24px 16px}
#friends-dialog .friends-code{display:grid;grid-template-columns:1fr auto;gap:7px;padding:13px 15px;border:1px solid #d0bc7f;border-radius:16px;background:linear-gradient(135deg,#fffce4,#f8e8b8);box-shadow:inset 0 1px #fff,0 3px 0 #e0d6ae}
#friends-dialog .friends-code>span{width:auto;grid-column:1/-1;font:900 10px 'Nunito Sans';color:#80703c;letter-spacing:.8px;text-transform:uppercase}
#friends-dialog .friends-code>strong{font-size:24px;color:#6a5322;letter-spacing:2px;align-self:center}
#friends-dialog button:not(.social-close){min-height:40px;padding:8px 14px;border:2px solid #fff7d7;border-radius:12px;background:linear-gradient(#f7fff1,#c1eee5);color:#135b6d;box-shadow:0 3px 0 #73adb0;font-size:11px}
#friends-dialog .friends-code button{margin:0;font-size:10px;padding:7px 10px}
#friends-dialog .friends-add{padding:5px 0}
#friends-dialog .friends-add label{font:900 11px 'Nunito Sans';color:#357785;margin:0 0 11px;display:block}
#friends-dialog .friends-add input{background:#fcfff3;border:1px solid #92c8c4;box-shadow:inset 0 2px 4px #38899215;font-size:12px;border-radius:12px;min-height:42px}
#friends-dialog .friends-add button{background:linear-gradient(#fff3b3,#ffd777);color:#725019;box-shadow:0 3px 0 #bd9148}
#friends-dialog .friends-tabs{gap:9px;margin:0 24px 14px;padding:0}
#friends-dialog .friends-tabs button[aria-pressed=true]{color:#fff9de;background:linear-gradient(#22a4b7,#086781);border-color:#b3eee6;box-shadow:0 3px 0 #095167}
#friends-dialog .friends-list{margin:0 24px;padding:12px;border:1px solid #a4cfc8;border-radius:18px;background:linear-gradient(#f6fff1d9,#e0f3e6e8),url('../assets/home-art-v1/lagoon.webp') center/cover;box-shadow:inset 0 2px 8px #27757514}
#friends-dialog .friends-empty{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:25px 14px}
#friends-dialog .friends-empty h3{font-size:26px;color:#246373;margin:5px 0 9px}
#friends-dialog .friends-empty p{font-size:12px;color:#507d86}
#friends-dialog .friends-person{padding:12px 14px;gap:14px;border:1px solid #c6d6b7;background:linear-gradient(100deg,#fffdf0,#f1fff3);border-radius:17px;box-shadow:0 3px 0 #8fb6a633}
#friends-dialog .friends-avatar{width:58px;height:64px;flex-basis:58px;border:2px solid #e8c675;border-radius:16px;background:#d3f5ed;box-shadow:0 3px 0 #a19c65}
#friends-dialog .friends-avatar img{background:radial-gradient(#f6ffe7,#b5e8dd)}
#friends-dialog .friends-person-name{font-size:20px;line-height:1.2}
#friends-dialog .friends-person-detail{font-size:11px;margin-top:5px}
#friends-dialog .friends-person[data-presence=online] .friends-person-detail::before{content:'';display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#25b082;box-shadow:0 0 0 3px #28b68819}
#friends-dialog .friends-row-action:first-child{background:linear-gradient(#fff0ae,#fbd37b);box-shadow:0 3px 0 #c6a159;color:#745326}
#friends-dialog footer{min-height:42px;padding:12px 24px 18px;flex:none}

/* Room browser: illustrated arenas and legible status, including playing rooms. */
#entry-dialog[open]{display:flex;flex-direction:column;height:fit-content;overflow:visible}
#entry-dialog .social-heading{min-height:131px;padding-bottom:20px}
#entry-dialog .social-heading h2{font-size:35px!important}
#entry-dialog .social-heading p{font-size:11px}
#entry-dialog .browser-scroll{padding:15px 24px 0;min-height:0;overflow:auto;scrollbar-color:#51a8b3 transparent}
#entry-dialog .browser-heading{display:flex;align-items:center;justify-content:space-between;padding:0 0 12px;background:none;border:0}
#entry-dialog .browser-heading h3{display:flex;align-items:center;gap:10px;font:800 24px 'Baloo 2';color:#246071;margin:0}
#entry-dialog .browser-heading h3 span{background:#d2f3d4;border:1px solid #a6d9ab;color:#287b57;border-radius:20px;padding:4px 9px;font:900 8px 'Nunito Sans';letter-spacing:.8px}
#entry-dialog .browser-heading button{display:flex;align-items:center;gap:6px;min-height:36px;border:2px solid #fff9df;border-radius:12px;background:linear-gradient(#39b2c5,#08738c);box-shadow:0 3px 0 #136174;padding:7px 13px;font-size:11px;color:#fffce1}
#entry-dialog .rooms-columns{display:none}
#entry-dialog #available-rooms{display:grid;gap:10px;padding:1px 2px 5px;max-height:340px;min-height:145px;overflow:auto;background:none;border:0;scrollbar-color:#71b1b7 transparent}
#entry-dialog .available-room{display:grid;grid-template-columns:1fr 1.4fr .8fr 55px 75px;gap:15px;align-items:center;padding:10px 14px;border:1px solid #b4ccc1;border-radius:17px;background:linear-gradient(110deg,#fffef0,#e5f8ee);box-shadow:0 3px 0 #73aca930}
#entry-dialog .available-identity strong{font-size:21px;color:#185f73;letter-spacing:1.5px}
#entry-dialog .available-identity>span{font-size:11px;color:#557e82}
#entry-dialog .available-map{gap:10px;color:#2a6e7a;font-size:11px;display:flex;flex-direction:row;grid-column:auto;grid-row:auto}
#entry-dialog .available-map img{width:94px;height:63px;object-fit:cover;flex:none;border:2px solid #fff2c7;outline:1px solid #c7b57f;border-radius:10px;box-shadow:0 3px 0 #87b4af}
#entry-dialog .available-mode{font-size:11px;line-height:1.5;color:#4f7f85}
#entry-dialog .available-count{font-size:12px;color:#287b77;background:#c8efe6;border:1px solid #a2d4c5;padding:7px 3px;border-radius:10px}
#entry-dialog .available-room>button{min-height:40px;border:2px solid #fff6bf;border-radius:12px;color:#735015;background:linear-gradient(#ffefab,#ffd268);box-shadow:0 3px 0 #b58b43;padding:7px;font-size:12px}
#entry-dialog .available-room>button:disabled{color:#457e89;background:linear-gradient(#edf8f0,#cce7df);border-color:#eef9ec;box-shadow:0 2px 0 #95b8b6;opacity:1;font-size:11px}
#entry-dialog .available-room[data-room-status=playing]{border-color:#6fbbce;background:linear-gradient(100deg,#eefaf3,#d3f0f1)}
#entry-dialog .rooms-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:185px;border:1px dashed #a3cbb9;border-radius:18px;background:#f7ffef8c;padding:12px!important;color:#4a7b83!important}
#entry-dialog .rooms-empty .social-empty-emblem{width:76px;height:76px;margin-bottom:6px}
#entry-dialog .rooms-empty p{margin:4px;font:800 13px/1.5 'Nunito Sans';max-width:380px}
#entry-dialog #room-browser-status{font-size:10px;color:#52818a;margin:8px 2px 11px}
#entry-dialog .browser-settings{grid-template-columns:1.2fr 1fr;gap:20px;padding:14px 0;border-top:1px solid #a9d7c9}
#entry-dialog .browser-settings .mode-picker legend{font-size:10px;color:#427784;font-weight:900}
#entry-dialog .mode-picker span{padding:10px 8px;color:#2b7381;background:#faffed;border:1px solid #bcddd3}
#entry-dialog .mode-picker input:checked+span{background:linear-gradient(#29abc0,#10788c);color:#fff7d8;border-color:#96ddd9;box-shadow:inset 0 1px 0 #d6fbef}
#entry-dialog .entry-map{border:1px solid #95c5bd;border-radius:12px;background:linear-gradient(#fcfff0,#c8efe4);box-shadow:0 3px 0 #83b2b0;min-height:43px}
#entry-dialog .entry-map strong{color:#226b7b}
#entry-dialog .browser-footer{margin:0;padding:15px 24px 21px;gap:14px;border-top:1px solid #abcec0;background:linear-gradient(#e8f7e7,#c8ece2);border-radius:0 0 25px 25px}
#entry-dialog .browser-footer input{background:#faffef;border:1px solid #8eb9ad;color:#195b69;min-height:44px;border-radius:12px 0 0 12px}
#entry-dialog .browser-footer .secondary-button{background:linear-gradient(#30abc0,#0a6b87);color:#fff9dd;border:2px solid #dafff2;border-radius:0 12px 12px 0;min-height:44px;font-size:12px}
#entry-dialog .browser-footer .primary-button{background:linear-gradient(#fff0ac,#ffd276);color:#75521c;border:2px solid #fff9d7;box-shadow:0 3px 0 #ba8f42;border-radius:14px;font:800 19px 'Baloo 2';min-height:46px}
#entry-dialog .entry-reputation{font-size:10px;color:#4e7d81;margin:0 0 10px}
#entry-dialog .lobby-status:not(:empty){margin:0;padding:4px 24px 10px;background:#d4f0e5;border-radius:0 0 23px 23px;font-size:11px}

/* Daily missions use the same art family without changing objectives or payouts. */
#daily-missions-dialog[open]{display:flex;flex-direction:column;width:min(960px,calc(100vw - 44px));height:min(670px,calc(100dvh - 104px))}
#daily-missions-dialog .social-heading{min-height:118px}
#daily-missions-dialog .social-heading .progression-balance{position:absolute;right:281px;top:36px;max-width:130px;background:#fff9df;color:#356272;font-size:10px;box-shadow:0 3px 0 #0a627899}
#daily-missions-dialog .social-heading .progression-balance b{font-size:21px}
#daily-missions-dialog .social-heading .progression-balance>span:last-child{display:none}
#daily-missions-dialog [data-daily-body]{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;flex:1;gap:20px;padding:24px;min-height:0;overflow:auto}
#daily-missions-dialog .daily-reward-banner{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:25px 23px;text-align:center;border:2px solid #fff8cf;border-radius:22px;background:linear-gradient(#fff5cced,#ffdf91ed),url('../assets/home-art-v1/ranked.webp') center/cover;box-shadow:0 4px 0 #bb985a55,0 0 0 1px #d6ba7b}
#daily-missions-dialog .daily-reward-seal{width:103px;height:103px;transform:none;filter:drop-shadow(0 5px 3px #94783e26)}
#daily-missions-dialog .daily-reward-seal .social-empty-emblem{width:100%;height:100%;margin:0}
#daily-missions-dialog .daily-reward-banner h3{font:800 29px/1.1 'Baloo 2';color:#7b5321;margin:9px 0}
#daily-missions-dialog .daily-reward-banner p{font-size:12px;line-height:1.5;color:#866735}
#daily-missions-dialog .daily-complete-count{position:static;margin:4px 0 0;min-width:110px;border:2px solid #fff8d7;border-radius:30px;background:linear-gradient(#18a7b2,#076e80);padding:8px 18px;color:#fff5c6;font-size:27px;box-shadow:0 3px 0 #b0a062}
#daily-missions-dialog .daily-mission-list{display:grid;grid-template-rows:repeat(3,1fr);gap:12px;margin:0}
#daily-missions-dialog .daily-mission{position:relative;gap:13px;flex-wrap:nowrap;min-height:102px;padding:15px;border:1px solid #9ec9b8;border-radius:19px;background:linear-gradient(110deg,#fcfff1,#e2f5e9);box-shadow:0 3px 0 #8cb9a92b}
#daily-missions-dialog .daily-mission-icon{width:58px;height:67px;background:linear-gradient(#fff7dc,#c8eee2);border:1px solid #d2c38f;border-radius:15px;box-shadow:0 3px 0 #9bb69b;overflow:hidden}
#daily-missions-dialog .daily-mission-icon img{width:100%;height:100%;object-fit:contain}
#daily-missions-dialog .daily-mission-copy h3{font-size:18px;color:#235f70;margin:0 0 11px}
#daily-missions-dialog .progression-meter{height:11px;border:1px solid #92bbb4;background:#c6dfd3;border-radius:20px;box-shadow:inset 0 2px 2px #2d6d6420;overflow:hidden}
#daily-missions-dialog .progression-meter>span{background:linear-gradient(#76ede2,#12a5b1);border-radius:20px;box-shadow:inset 0 2px 0 #b9fff8}
#daily-missions-dialog .daily-mission-value{font-size:15px;min-width:64px;color:#256777}
#daily-missions-dialog .daily-mission-value small{color:#577f79;font-size:9px}
#daily-missions-dialog .daily-mission[data-complete=true]{border-color:#d8bd78;background:linear-gradient(105deg,#fff8d5,#e9f4d8)}
#daily-missions-dialog .daily-rules{grid-column:1/-1;border-top:1px solid #b7d5c2;padding:12px 24px 0;gap:14px}
#daily-missions-dialog .daily-rules p{font-size:11px;max-width:none;line-height:1.5}

/* Compact landscape phones keep generous touch targets; only the list scrolls. */
/* Hand-painted dimensional embellishments stay outside the interactive area. */
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)::before,
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)::after{content:'';position:absolute;z-index:4;bottom:-22px;width:90px;height:90px;background:url('../assets/social-art-v1/frame-corner.webp') center/contain no-repeat;pointer-events:none}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)::before{left:0}
:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)::after{right:0;transform:scaleX(-1)}
#entry-dialog .available-room{grid-template-columns:180px minmax(120px,1fr) 115px 55px 75px;grid-template-areas:'map identity mode count action'}
#entry-dialog .available-map{grid-area:map;position:relative;display:block;align-self:stretch;min-height:91px}
#entry-dialog .available-map img{display:block;width:100%;height:100%;min-height:91px;box-sizing:border-box;object-fit:cover}
#entry-dialog .available-map>span{position:absolute;bottom:2px;left:2px;right:2px;padding:14px 10px 6px;border-radius:0 0 8px 8px;background:linear-gradient(transparent,#083345e8);color:#fff9da;font-size:12px;font-weight:900;text-shadow:0 1px 2px #003044}
#entry-dialog .available-identity{grid-area:identity}
#entry-dialog .available-mode{grid-area:mode}
#entry-dialog .available-count{grid-area:count}
#entry-dialog .available-room>button{grid-area:action}
#daily-missions-dialog .daily-reward-banner{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:320px;padding:23px 17px 18px;background:linear-gradient(#034a65ad,transparent 34%,transparent 55%,#063f58e6),url('../assets/social-art-v1/daily-reward.webp') center/cover}
#daily-missions-dialog .daily-reward-seal{display:none}
#daily-missions-dialog .daily-reward-banner>div:not(.daily-reward-seal){width:100%}
#daily-missions-dialog .daily-reward-banner .progression-kicker{color:#a9fff0;text-shadow:0 1px 2px #06485a}
#daily-missions-dialog .daily-reward-banner h3{color:#fff4be;text-shadow:0 2px 2px #06415e;max-width:215px;margin:8px auto}
#daily-missions-dialog .daily-reward-banner p{position:absolute;bottom:82px;left:17px;right:17px;color:#fff8dc;text-shadow:0 1px 2px #002b3f;font-size:11px;line-height:1.45}
#daily-missions-dialog .daily-complete-count{margin:0;flex:none}
@media(max-height:600px){
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog){top:22px;max-height:calc(100dvh - 43px);width:min(940px,calc(100vw - 38px));border-radius:22px}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)[open]{height:calc(100dvh - 43px)}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading{min-height:70px;padding:10px 170px 10px 20px;border-radius:18px 18px 0 0}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading h2{font-size:27px!important;margin:2px 0!important}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading :is(small,.eyebrow,.friends-heading>div>span){font-size:8px;letter-spacing:1.5px}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading p{display:none}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-mascot{width:120px;height:120px;top:-29px;right:63px}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) :is(.social-close,.dialog-close){width:36px;height:36px;min-height:36px;top:10px;right:12px}
 #ranking-boards .ranking-metrics{padding:10px 18px 0;gap:8px}
 #ranking-boards .ranking-metrics button{min-height:34px;padding:6px 9px;font-size:11px}
 #ranking-boards .ranking-formats{margin:9px 0 4px}
 #ranking-boards .ranking-formats button{min-height:32px;padding:4px 10px;font-size:11px}
 #ranking-boards .ranking-board-status{font-size:10px;margin:5px 18px 7px;min-height:13px}
 #ranking-boards .ranking-board-content{margin:0 18px}
 #ranking-boards .ranking-board-note{font-size:9px;margin:7px 18px 9px}
 #ranking-boards .ranking-empty{padding:12px;display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;text-align:left;justify-content:center;align-content:center;min-height:125px}
 #ranking-boards .ranking-empty .social-empty-emblem{width:76px;height:76px;grid-row:1/3;margin:0}
 #ranking-boards .ranking-empty .social-eyebrow{display:none}
 #ranking-boards .ranking-empty strong{font-size:24px;align-self:end}
 #ranking-boards .ranking-empty p{font-size:11px;margin:6px 0 0;align-self:start}
 #ranking-boards .ranking-podium{padding:22px 13px 12px;gap:10px}
 #ranking-boards .ranking-champion{min-height:154px;padding:8px}
 #ranking-boards .ranking-champion[data-position='1']{min-height:169px}
 #ranking-boards .ranking-champion-portrait{height:60px}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:74px}
 #ranking-boards .ranking-champion-name{font-size:17px}
 #ranking-boards .ranking-champion-value{font-size:15px}
 #ranking-boards[open]{grid-template-columns:1fr auto;grid-template-rows:auto auto auto minmax(0,1fr) auto}
 #ranking-boards :is(.social-heading,.ranking-metrics,.ranking-board-content,.ranking-board-note){grid-column:1/-1}
 #ranking-boards .ranking-formats{grid-column:1;grid-row:3;justify-content:flex-start;margin:9px 0 9px 18px}
 #ranking-boards .ranking-board-status{grid-column:2;grid-row:3;align-self:center;text-align:right;max-width:300px;margin:6px 18px 6px 10px}
 #ranking-boards .ranking-podium{padding:16px 10px 10px;gap:8px}
 #ranking-boards .ranking-champion,#ranking-boards .ranking-champion[data-position='1']{min-height:103px;padding:6px 9px;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:8px;text-align:left;align-content:center}
 #ranking-boards .ranking-champion-portrait,#ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{grid-column:1;grid-row:1/4;height:70px;width:48px}
 #ranking-boards .ranking-champion-name{grid-column:2;font-size:15px;margin:0;align-self:end}
 #ranking-boards .ranking-champion-rank{grid-column:2;font-size:9px;margin:3px 0;align-self:start}
 #ranking-boards .ranking-champion-value{grid-column:2;justify-self:start;font-size:13px;line-height:1.2;padding:4px 7px;margin-top:2px}
 #ranking-boards .ranking-medal{width:23px;height:27px;top:-13px;left:12px;font-size:17px;border-radius:8px}
 #friends-dialog .friends-connect{padding:10px 18px;gap:14px}
 #friends-dialog .friends-code{padding:8px 12px;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
 #friends-dialog .friends-code>span{grid-column:auto;font-size:8px;max-width:52px;line-height:1.4}
 #friends-dialog .friends-code>strong{font-size:18px;letter-spacing:1px}
 #friends-dialog .friends-add{padding:0}
 #friends-dialog .friends-add label{display:none}
 #friends-dialog button:not(.social-close){min-height:36px;font-size:10px;padding:6px 10px}
 #friends-dialog .friends-add input{min-height:38px;font-size:11px;padding:7px 9px}
 #friends-dialog .friends-tabs{margin:0 18px 10px}
 #friends-dialog .friends-list{margin:0 18px;padding:6px 9px}
 #friends-dialog .friends-empty{padding:9px;display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:15px;text-align:left;align-content:center;min-height:89px}
 #friends-dialog .friends-empty .social-empty-emblem{width:60px;height:60px;grid-row:1/3;margin:0}
 #friends-dialog .friends-empty h3{font-size:21px;align-self:end;margin:0 0 4px}
 #friends-dialog .friends-empty p{font-size:11px;align-self:start}
 #friends-dialog .friends-person{padding:8px 10px;gap:10px}
 #friends-dialog .friends-avatar{width:40px;height:46px;flex-basis:40px;border-radius:11px}
 #friends-dialog .friends-person-name{font-size:17px}
 #friends-dialog .friends-person-detail{font-size:10px;margin-top:2px}
 #friends-dialog footer{padding:8px 18px 12px;min-height:36px}
 #entry-dialog .browser-scroll{padding:11px 18px 0}
 #entry-dialog .browser-heading{padding-bottom:9px}
 #entry-dialog .browser-heading h3{font-size:21px}
 #entry-dialog #available-rooms{max-height:225px;min-height:96px}
 #entry-dialog .rooms-empty{min-height:105px;flex-direction:row;padding:10px!important;gap:16px}
 #entry-dialog .rooms-empty .social-empty-emblem{width:62px;height:62px;margin:0}
 #entry-dialog .rooms-empty p{font-size:12px;max-width:340px;text-align:left}
 #entry-dialog .available-room{gap:12px;padding:9px 12px}
 #entry-dialog .available-room{grid-template-columns:115px minmax(110px,1fr) 105px 45px 65px;gap:10px}
 #entry-dialog .available-map{min-height:66px}
 #entry-dialog .available-map img{width:100%;height:100%;min-height:66px}
 #entry-dialog .available-map>span{font-size:10px;padding:12px 7px 4px}
 #entry-dialog .browser-settings{padding:10px 0}
 #entry-dialog .browser-footer{padding:10px 18px 14px;border-radius:0 0 18px 18px}
 #entry-dialog .browser-footer .primary-button{min-height:42px;font-size:17px}
 #entry-dialog .browser-footer input,#entry-dialog .browser-footer .secondary-button{min-height:40px}
 #daily-missions-dialog .social-heading .progression-balance{right:190px;top:17px;padding:4px 9px}
 #daily-missions-dialog [data-daily-body]{grid-template-columns:220px 1fr;grid-template-rows:auto auto;align-content:start;gap:14px;padding:14px 18px}
 #daily-missions-dialog .daily-reward-banner{gap:5px;padding:12px;min-height:243px}
 #daily-missions-dialog .daily-reward-banner p{bottom:48px;font-size:9px}
 #daily-missions-dialog .daily-reward-seal{width:60px;height:60px}
 #daily-missions-dialog .daily-reward-banner h3{font-size:23px;margin:5px 0}
 #daily-missions-dialog .daily-reward-banner p{font-size:10px}
 #daily-missions-dialog .daily-complete-count{font-size:22px;padding:5px 15px}
 #daily-missions-dialog .daily-mission{min-height:73px;padding:9px 11px;gap:10px;border-radius:14px}
 #daily-missions-dialog .daily-mission-list{gap:9px}
 #daily-missions-dialog .daily-mission-icon{width:42px;height:48px;border-radius:10px}
 #daily-missions-dialog .daily-mission-copy h3{font-size:15px;margin-bottom:7px}
 #daily-missions-dialog .daily-mission-value{font-size:13px;min-width:55px}
 #daily-missions-dialog .daily-rules{padding-top:8px}
 #daily-missions-dialog .daily-rules p{font-size:9px}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)::before,:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)::after{width:48px;height:48px;bottom:-13px}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)::before{left:0}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)::after{right:0}
}
@media(max-width:650px){
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog){width:calc(100vw - 24px)}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading{padding-left:16px;padding-right:126px;min-height:110px}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading h2{font-size:29px!important}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-mascot{width:135px;height:135px;right:43px;top:-54px}
 :is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) .social-heading p{display:none}
 #ranking-boards .ranking-metrics{padding:13px 12px 0;gap:5px}
 #ranking-boards .ranking-metrics button{font-size:10px;padding:8px 5px}
 #ranking-boards .ranking-board-content{margin:0 12px}
 #ranking-boards .ranking-podium{gap:6px;padding:24px 8px 12px}
 #ranking-boards .ranking-champion{padding:8px 5px;min-height:175px;border-radius:12px}
 #ranking-boards .ranking-champion[data-position='1']{min-height:190px}
 #ranking-boards .ranking-champion-name{font-size:15px}
 #ranking-boards .ranking-champion-value{font-size:13px;padding:5px 7px}
 #ranking-boards .ranking-medal{left:8px;width:28px;height:33px;font-size:20px}
 #ranking-boards .ranking-champion-portrait{height:65px}
 #ranking-boards .ranking-champion[data-position='1'] .ranking-champion-portrait{height:80px}
 #friends-dialog .friends-connect{grid-template-columns:1fr;gap:10px;padding:15px}
 #friends-dialog .friends-code{grid-template-columns:1fr auto;gap:6px}
 #friends-dialog .friends-code>span{grid-column:1/-1;max-width:none}
 #friends-dialog .friends-add{padding:0}
 #friends-dialog .friends-tabs,#friends-dialog .friends-list{margin-left:15px;margin-right:15px}
 #friends-dialog .friends-person{padding:9px;gap:9px}
 #friends-dialog .friends-avatar{flex-basis:40px;width:40px;height:49px}
 #friends-dialog .friends-person-name{font-size:17px}
 #friends-dialog .friends-empty h3{font-size:23px}
 #entry-dialog .browser-scroll{padding:13px 14px 0}
 #entry-dialog .available-room{grid-template-columns:1fr 1.1fr 64px;grid-template-areas:'identity map count' 'mode map action';gap:8px;padding:11px}
 #entry-dialog .available-identity{grid-column:1;grid-row:1}
 #entry-dialog .available-map{grid-column:2;grid-row:1/3;flex-direction:column;align-items:flex-start;gap:5px}
 #entry-dialog .available-map img{width:100%;height:100%;min-height:75px;max-width:100%}
 #entry-dialog .available-mode{grid-column:1;grid-row:2}
 #entry-dialog .available-count{grid-column:3;grid-row:1}
 #entry-dialog .available-room>button{grid-column:3;grid-row:2}
 #entry-dialog .browser-settings{grid-template-columns:1fr;gap:12px}
 #entry-dialog .browser-settings .mode-picker,#entry-dialog .browser-settings .entry-map{grid-column:auto}
 #entry-dialog .browser-footer{padding:12px 14px 17px;gap:10px}
 #daily-missions-dialog .social-heading .progression-balance{position:static;margin:6px 0 0;padding:4px 8px;width:max-content}
 #daily-missions-dialog .social-heading{display:block}
 #daily-missions-dialog [data-daily-body]{display:flex;flex-direction:column;padding:16px;gap:15px}
 #daily-missions-dialog .daily-reward-banner{display:flex;min-height:325px;gap:10px;padding:17px;text-align:center;background-position:center 45%}
 #daily-missions-dialog .daily-reward-seal{width:60px;height:60px}
 #daily-missions-dialog .daily-complete-count{grid-column:1/-1;justify-self:center;font-size:21px;padding:6px 20px}
 #daily-missions-dialog .daily-reward-banner h3{font-size:25px}
 #daily-missions-dialog .daily-mission{min-height:95px;padding:12px;gap:9px}
 #daily-missions-dialog .daily-mission-copy h3{font-size:16px}
 #daily-missions-dialog .daily-mission-icon{width:43px;height:53px}
}
@media(prefers-reduced-motion:reduce){:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog) button{transition:none}:is(#ranking-boards,#friends-dialog,#entry-dialog,#daily-missions-dialog)::backdrop{backdrop-filter:none}}