/* Friends use the collection's palette and a fixed action footer. */
.modal:has(.social-lobby){padding:10px}
.modal:has(.social-lobby) .modal-card{display:flex;flex-direction:column;width:min(1320px,98vw);height:min(750px,calc(100dvh - 20px));max-height:calc(100dvh - 20px);padding:14px 18px;overflow:hidden;border-color:#79c8fa88;background:radial-gradient(ellipse at 100% 0,#65217955,transparent 60%),linear-gradient(135deg,#153a64,#152846 65%,#32204f)}
.modal:has(.social-lobby) #modalTitle{font-size:22px;line-height:1.3;margin:0 0 9px;padding-inline-end:40px;flex:none;color:#ffedb2}
.modal:has(.social-lobby) #modalBody{display:flex;flex:1;min-height:0;overflow:hidden;padding:0}
.modal:has(.social-lobby) #modalActions{margin-top:9px;flex:none;display:flex}
.modal:has(.social-lobby) #modalActions>button{font-size:12px;min-height:36px;padding:6px 14px;margin:0;width:100%}
.social-lobby{display:flex;flex-direction:column;gap:10px;width:100%;min-height:0;min-width:0;text-align:start}
.social-lobby button{min-height:40px;font-size:12px;padding:7px 10px;border-radius:10px;line-height:1.4;margin:0;box-sizing:border-box}
.social-lobby input{width:100%;min-width:0;box-sizing:border-box;min-height:39px;font-size:13px;line-height:1.4;border:1px solid #7ab4d566;border-radius:10px;padding:9px 11px;background:#102840;color:#eef8ff}
.social-lobby input:focus-visible{outline:2px solid #ffdf89;outline-offset:1px}
.social-lobby button:focus-visible{outline:2px solid #ffdf89;outline-offset:2px}
.social-lobby .muted{font-size:11px;line-height:1.6;margin:5px 0;color:#bed3e8}
.social-lobby .social-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;flex:none;border:1px solid #68dfff55;border-radius:13px;background:linear-gradient(100deg,#175981a6,#56316b66)}
.social-header-copy{display:grid;gap:4px;min-width:0}.social-header-copy strong{font-size:16px;color:#fff0c4}.social-header-copy small{font-size:11px;color:#c6e9f7;line-height:1.5}
.social-online-count{flex:none;white-space:nowrap;display:flex;align-items:center;gap:6px;border:1px solid #84efc45c;padding:6px 9px;border-radius:30px;color:#acffd8;font-size:11px;background:#16474766}.social-online-count:before{content:'';width:6px;height:6px;border-radius:50%;background:#81f2c0}
.social-workspace{display:grid;grid-template-columns:minmax(190px,24%) minmax(0,1fr);gap:12px;flex:1;min-height:0}
.social-sidebar{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;padding:1px 2px 4px}
.social-code-card,.party-card{padding:12px;border:1px solid #7abbde55;border-radius:15px;background:linear-gradient(140deg,#204464aa,#122d4999);min-width:0}
.social-lobby h3{font-size:13px;line-height:1.4;margin:0 0 9px;color:#fff0bc}
.friend-code{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:10px;padding:7px 8px;border:1px dashed #70c5e35c;border-radius:8px;background:#0e284180}.friend-code span{font-size:10px;color:#bdd8e9}.friend-code bdi{font-size:14px;font-weight:900;letter-spacing:1px;color:#b8eeff;user-select:text}
.social-add{display:grid;gap:7px}.social-add .primary{width:100%}
.party-card{border-color:#73ecc155}.social-party-empty{font-size:12px!important;line-height:1.7;margin:0;color:#c1d9e8}.party-members{display:grid;gap:7px;margin-bottom:8px}.party-member{display:flex;gap:6px;align-items:center;font-size:11px;min-width:0}.party-member bdi{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:#eff8ff}.party-member small{font-size:9px;white-space:nowrap;color:#aabacf}.party-member small.online{color:#9fedc9}.party-member-icon{color:#ffe38d;font-size:14px;min-width:15px}.party-actions{display:grid;gap:4px}.party-actions .text-button{min-height:29px;font-size:10px;padding:4px}
.social-directory{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}
.social-lobby .social-tabs{display:flex;gap:7px;flex:none;overflow:auto;scrollbar-width:none;touch-action:pan-x;padding-bottom:3px}.social-lobby .social-tabs button{flex:1 0 auto;border:1px solid #6bafd088;background:#214a70;color:#c6f0ff;white-space:nowrap;min-height:35px;font-size:11px;padding:7px 11px}.social-lobby .social-tabs button.active{background:linear-gradient(110deg,#ffdc71,#ff8f43);color:#192e47;box-shadow:0 3px 0 #a95528;border-color:#ffdb8477}
.social-search{flex:none}
.social-results{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;padding:2px 3px 6px}
.social-friend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));align-items:start;gap:10px}
.social-lobby .friend-card,.social-invitation{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px;border:1px solid #89cce066;border-radius:15px;background:radial-gradient(ellipse at 0 0,#438cca26,transparent 75%),linear-gradient(145deg,#193f62,#1b2d4c);box-shadow:inset 0 1px 0 #ffffff1a,0 5px 14px #07152c44}
.friend-card-head{display:flex;align-items:center;gap:9px;min-width:0}.friend-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;border:1px solid #87d8fb88;background:linear-gradient(140deg,#386787,#2d4476);font-size:22px;font-weight:900;color:#ffe9bd}.friend-info{display:grid;gap:4px;flex:1;min-width:0}.friend-info bdi{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff3d4;line-height:1.4}.friend-presence{font-size:10px;color:#afc6d5;line-height:1.4}.friend-presence.online{color:#81f2c0}.friend-presence.in_match{color:#ffcd8c}.social-lobby .friend-more{font-size:10px;min-height:33px;padding:5px;color:#c4dded;background:transparent;flex:none}
.friend-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%;margin-top:auto}.social-lobby .friend-actions button{width:100%;font-size:11px;min-height:38px;padding:6px 7px;overflow-wrap:anywhere}.friend-actions .friend-cancel{grid-column:1/-1;color:#c4dded!important;min-height:27px!important;padding:3px!important}.friend-actions>button:only-child{grid-column:1/-1}.social-request-status{font-size:11px;color:#e5d498;line-height:1.5}
.social-invitation{border-color:#ffdc6a88;background:radial-gradient(ellipse at 100% 0,#926e3f40,transparent 85%),#24384d}.social-invitation-details{display:grid;gap:5px;min-width:0}.social-invitation-details bdi{font-size:15px;font-weight:800;overflow-wrap:anywhere}.social-card-eyebrow{font-size:9px;font-weight:900;color:#ffdc8f;letter-spacing:1px}[dir=rtl] .social-card-eyebrow{letter-spacing:0}.social-lobby .social-invite-notice{width:100%;margin-bottom:9px;font-size:11px;color:#ffe9b1;border:1px solid #ffda8288;background:#6a553e55;min-height:34px}
.social-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:120px;height:100%;box-sizing:border-box;padding:15px;border:1px dashed #79c2df55;border-radius:13px;gap:8px;background:radial-gradient(ellipse at center,#245f7833,transparent 85%);color:#c5e4f5}.social-empty-symbol{font-size:28px;line-height:1.1;color:#e0c78e}.social-empty strong{font-size:14px;line-height:1.5;color:#e7f5ff}.social-empty p{font-size:11px!important;line-height:1.6;max-width:350px;margin:0}.social-load-status{display:flex;align-items:center;gap:9px;border:1px solid #e7c28155;border-radius:10px;padding:7px 9px;margin-bottom:8px;font-size:11px;line-height:1.5;background:#604a3344}.social-load-status span{flex:1}.social-load-status button{font-size:10px;min-height:32px;padding:5px 9px}
.has-social-notice{box-shadow:0 0 0 2px #ffd877}
.private-chat{display:grid;gap:12px;min-width:0}.chat-compose{display:flex;gap:8px}.chat-compose input{min-width:0;flex:1}.private-chat-messages{min-height:120px;max-height:45vh;overflow-y:auto;display:flex;flex-direction:column;gap:7px}.chat-message{align-self:flex-start;max-width:90%;padding:9px 12px;margin:0;border-radius:12px;background:#173e54;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}.chat-message.outgoing{align-self:flex-end;background:#196257}
@media(max-height:500px){.modal:has(.social-lobby) .modal-card{padding:9px 12px}.modal:has(.social-lobby) #modalTitle{font-size:18px;margin-bottom:5px}.social-lobby{gap:6px}.social-lobby .social-header{padding:6px 10px}.social-header-copy{gap:1px}.social-header-copy strong{font-size:13px}.social-header-copy small{font-size:9px}.social-online-count{font-size:9px;padding:4px 7px}.social-workspace{gap:9px;grid-template-columns:minmax(178px,24%) minmax(0,1fr)}.social-sidebar{gap:7px}.social-code-card,.party-card{padding:9px;border-radius:12px}.social-lobby h3{font-size:11px;margin-bottom:7px}.friend-code{padding:5px 7px;margin-bottom:7px}.friend-code bdi{font-size:12px}.social-lobby input{min-height:34px;padding:6px 9px;font-size:12px}.social-lobby button{font-size:10px;min-height:34px;padding:5px 8px}.social-lobby .social-tabs button{font-size:10px;min-height:31px;padding:5px 9px}.social-directory{gap:5px}.social-lobby .friend-card,.social-invitation{padding:9px;gap:8px;border-radius:12px}.friend-avatar{width:33px;height:33px;font-size:19px;border-radius:10px}.friend-info bdi{font-size:12px}.friend-presence{font-size:9px}.social-lobby .friend-actions button{font-size:10px;min-height:34px}.social-empty{gap:4px;padding:9px;min-height:110px}.social-empty-symbol{font-size:23px}.social-empty strong{font-size:12px}.social-empty p{font-size:10px!important}.modal:has(.social-lobby) #modalActions{margin-top:5px}.modal:has(.social-lobby) #modalActions>button{min-height:32px;font-size:11px;padding:5px 10px}}
@media(orientation:portrait) and (max-width:650px){.social-workspace{display:flex;flex-direction:column;overflow:auto}.social-sidebar{overflow:visible;min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}.social-directory{min-height:280px;flex:1;overflow:visible}.social-results{overflow:visible;flex:1}.social-header-copy small{display:none}.social-header-copy strong{font-size:13px}.social-online-count{font-size:10px}.social-lobby .social-tabs button{min-height:40px}.friend-code{flex-wrap:wrap}.social-friend-grid{grid-template-columns:1fr}}
/* While typing, the existing viewport controller owns the dialog bounds. */
#modal.input-viewport:has(.social-lobby) .modal-card{height:100%;max-height:100%}
#modal.input-viewport:has(.social-lobby) #modalBody{overflow:auto;display:block}
#modal.input-viewport .social-lobby{min-height:280px}
#modal.input-viewport .social-lobby .social-header{display:none}
#modal.input-viewport .social-workspace{min-height:250px}
#modal.input-viewport .social-sidebar,#modal.input-viewport .social-results{overflow:visible}
#modal.input-viewport .social-directory{min-height:230px}
.achievement-banner{position:fixed;z-index:150;inset-inline:18px;top:18px;max-width:450px;margin:auto;padding:16px 20px;border:1px solid #ffe091;border-radius:18px;background:#12394cf5;color:#fff5d6;box-shadow:0 8px 35px #05101a99;pointer-events:none;animation:achievement-arrive .35s ease-out}.achievement-banner strong{display:block;color:#ffe084}.achievement-banner p{margin:5px 0}.level-progress{display:grid;gap:6px;margin:10px 0}.level-progress progress{width:100%;height:12px;accent-color:#78f2c3}.achievement-list{display:grid;gap:10px}.achievement-item{padding:12px;border:1px solid #8de7ef33;border-radius:14px}.achievement-item progress{width:100%;accent-color:#ffd979}.achievement-item.unlocked{border-color:#ffdb7280}.achievement-toolbar{display:flex;gap:8px;flex-wrap:wrap}@keyframes achievement-arrive{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.achievement-banner{animation:none}}

.lobby-level-progress{position:absolute;top:68px;inset-inline-end:18px;width:min(220px,35vw);z-index:2;pointer-events:none;font-size:11px}.lobby-level-progress:empty{display:none}@media(max-height:430px){.lobby-level-progress{top:57px;width:150px;font-size:10px;gap:2px}.lobby-level-progress progress{height:7px}}