.header-actions>#friends-open{order:99;position:relative;font-size:25px;min-width:44px;min-height:44px}
#friends-dialog,#friend-chat-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(390px,100vw);height:100dvh;max-height:100dvh;max-width:100vw;border-radius:18px 0 0 18px;padding:calc(16px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom));background:#123b32;color:#f0f6ed;border:1px solid #567765;box-shadow:-14px 0 45px #0007;z-index:220;overflow-y:auto}
#friends-dialog:not([open]),#friend-chat-dialog:not([open]){display:none}
#friends-dialog .dialog-heading{position:sticky;top:-16px;background:#123b32;z-index:2;padding:8px 0}
#friends-dialog h2{font-size:22px}#friends-dialog details{border-bottom:1px solid #486758;padding:12px 0}#friends-dialog summary{cursor:pointer;font-weight:700;font-size:16px;min-height:36px}
#friends-dialog .friend-row{display:block;min-height:65px;padding:12px 0;border-bottom:1px solid #355b4d;overflow:hidden}
.social-avatar{width:46px;height:46px;object-fit:cover;border-radius:50%;float:left;margin:0 10px 8px 0}
#friends-dialog .friend-name-link{font-size:16px;min-height:32px;text-align:left;color:#fff}#friends-dialog .friend-presence{margin:2px 0 8px;color:#c1e2bc;font-size:14px}
#friends-dialog .relationship-actions{clear:both;display:flex;flex-wrap:wrap;gap:6px}#friends-dialog button{min-height:40px}#friends-dialog .caption{font-size:13px}#social-recent-players{max-height:240px;overflow-y:auto}
#chat-panel{inset:0 0 0 auto;width:min(390px,100vw);height:100dvh;max-height:100dvh;box-sizing:border-box;border-radius:18px 0 0 18px;z-index:221;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));overflow-y:auto}
#chat-panel .chat-messages{min-height:80px;flex:1}#friend-chat-dialog .friend-messages{max-height:45dvh} 
#social-shade{position:fixed;inset:0;background:#041a18a8;z-index:215;backdrop-filter:blur(2px)}
#social-shade[hidden]{display:none}
.header-actions>#friends-open.drawer-active{position:fixed;top:calc(10px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));z-index:230;background:#345d49;border-color:#f5cf79}
#social-unread-badge{position:absolute;top:-6px;right:-6px;background:#ec624c;color:#fff;border:2px solid #102b27;min-width:22px;height:22px;line-height:18px;border-radius:14px;padding:0 3px;text-align:center;font-size:12px;font-weight:850;box-shadow:0 2px 5px #0008}
#friend-badge{display:none!important}
#friends-dialog .dialog-heading{padding-right:52px}
@media(max-width:700px){#friends-dialog,#friend-chat-dialog,#chat-panel{width:min(390px,100vw)}}
.topbar:has(#friends-open.drawer-active){z-index:230}
.topbar:has(#friends-open.drawer-active) .brand,.topbar:has(#friends-open.drawer-active) .header-actions>:not(#friends-open){visibility:hidden}
#friends-dialog[open] #friends-close{display:grid;place-items:center;position:relative;z-index:4;flex:none;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;font-size:26px}
#friends-open.drawer-active #social-unread-badge{display:none}
/* Compact contact list for narrow portrait screens. */
#friends-dialog{padding:calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));box-sizing:border-box}
#friends-dialog .dialog-heading{top:-10px;padding:4px 0 8px 0}
#friends-dialog h2{font-size:19px;margin:0}
#friends-dialog h3{font-size:16px;margin:14px 0 5px}
#friends-dialog details{padding:5px 0}
#friends-dialog summary{font-size:14px;min-height:30px}
#friends-dialog .friend-toolbar{display:flex;gap:6px;align-items:center;margin:8px 0 10px}
#friends-dialog .friend-toolbar input{flex:1;min-width:0;height:38px;padding:6px 9px;font-size:13px}
#friends-dialog .friend-toolbar button{font-size:12px;line-height:1.1;min-height:38px;padding:6px 8px;white-space:nowrap}
#friends-dialog #friend-notifications-open{width:36px;flex:none;font-size:20px;padding:0}
#friends-dialog .friend-row{display:flex;align-items:center;min-height:53px;padding:7px 0;gap:6px;overflow:visible}
#friends-dialog .social-avatar{float:none;flex:none;width:34px;height:34px;margin:0}
#friends-dialog .friend-identity{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
#friends-dialog .friend-name-link{display:block;width:100%;padding:0;min-height:19px;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#friends-dialog .friend-presence{display:block;margin:0;font-size:11px;line-height:1.2;color:#bed8c1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#friends-dialog .contact-actions{display:flex;flex:none;align-items:center;gap:3px;white-space:nowrap}
#friends-dialog .contact-actions .relationship-actions{display:flex;flex-wrap:nowrap;clear:none;gap:3px}
#friends-dialog .contact-actions button{box-sizing:border-box;flex:none;width:30px;min-width:30px;min-height:32px;height:32px;padding:0;font-size:17px;line-height:1;text-align:center}
#friends-dialog .contact-actions .chat-action{width:auto;min-width:43px;padding:0 5px;font-size:11px;font-weight:700;color:#f6d485;border-color:#ac9360}
#friends-dialog #social-recent-players{max-height:none;overflow:visible}
#friends-dialog .friend-request{font-size:13px;padding:5px 0}
#friends-dialog .friend-request p{margin:3px 0}
@media(max-width:365px){#friends-dialog{padding-left:9px;padding-right:9px}#friends-dialog .friend-row{gap:4px}#friends-dialog .contact-actions,#friends-dialog .contact-actions .relationship-actions{gap:2px}#friends-dialog .contact-actions button{width:28px;min-width:28px}}

#friends-dialog .friend-toolbar #friends-create-table{width:auto;flex:none;max-width:130px}
#friends-dialog .friend-toolbar input{width:0;flex:1 1 90px}
/* Email addresses need the full drawer width, including on narrow iPhones. */
#friends-dialog .joy-invite form{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px}
#friends-dialog .joy-invite label{display:block;min-width:0}
#friends-dialog .joy-invite input{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:44px;margin-top:6px;font-size:16px}
#friends-dialog .joy-invite form button{width:100%;min-height:44px}
#friends-dialog .dialog-heading{position:sticky}
#friends-dialog #social-icons-help{margin-left:auto;flex:none;width:32px;min-height:32px;height:32px;padding:0;border:1px solid #587a6b;border-radius:50%;background:#21463c;color:#f1d48d;font-size:19px;z-index:3}
#friends-dialog .social-icons-guide{position:sticky;top:41px;z-index:4;background:#21453b;border:1px solid #9bba9c;box-shadow:0 10px 22px #041d1a99;border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.45}
#friends-dialog .social-icons-guide[hidden]{display:none}
#friends-dialog .social-icons-guide p{margin:5px 0}
#friends-dialog .contact-actions .chat-action{position:relative;width:32px;min-width:32px;padding:0;font-size:17px}
#friends-dialog .contact-unread{position:absolute;top:-7px;right:-5px;min-width:16px;height:16px;padding:0 2px;border-radius:10px;background:#e56249;color:#fff;font-size:10px;line-height:16px;font-weight:700}
#friends-dialog .contact-actions .mute-action[aria-pressed="true"]{border-color:#efa16d;background:#60392e;color:#fff}
#friends-dialog .contact-actions button:focus-visible::after{content:attr(title);position:absolute;z-index:6;bottom:calc(100% + 6px);right:0;padding:5px 8px;border-radius:6px;background:#092a25;color:#fff;font-size:12px;line-height:1.2;white-space:nowrap;box-shadow:0 3px 8px #0008}
#friends-dialog .contact-actions button{position:relative}

@media(hover:hover){#friends-dialog .contact-actions button:hover::after{content:attr(title);position:absolute;z-index:6;bottom:calc(100% + 6px);right:0;padding:5px 8px;border-radius:6px;background:#092a25;color:#fff;font-size:12px;line-height:1.2;white-space:nowrap;box-shadow:0 3px 8px #0008}}
/* One visible close control inside every drawer, including portrait Safari. */
.topbar:has(#friends-open.drawer-active) #friends-open{visibility:hidden;pointer-events:none}
#friend-chat-dialog .dialog-heading,#chat-panel .dialog-heading{position:sticky;top:0;background:#123b32;z-index:5;flex:none}
#friend-chat-dialog #friend-chat-close,#chat-panel #chat-close{flex:none;display:grid;place-items:center;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;font-size:26px}
/* Keep the composer and the close button inside the visible viewport when iOS opens its keyboard. */
#friends-dialog,#friend-chat-dialog,#chat-panel{top:var(--chat-viewport-top,0px);height:var(--chat-viewport-height,100dvh);max-height:var(--chat-viewport-height,100dvh)}
#chat-panel .dialog-heading{margin:0;min-height:44px}
#chat-panel .chat-messages{min-height:0;overflow-y:auto}
@media(max-width:700px){#chat-panel,#friend-chat-dialog,#friends-dialog{border-radius:0}}

#social-events{position:fixed;inset:auto 12px 16px auto;width:min(410px,calc(100vw - 24px));max-height:70dvh;overflow-y:auto;margin:0;padding:0;border:0;background:transparent;color:#f2f7ee;z-index:350}
#social-events[hidden]{display:none}.social-event-card{padding:16px;border:1px solid #d2b978;border-radius:16px;background:#153f35;box-shadow:0 6px 25px #0007;margin:8px 0;font-size:16px;text-align:left}.social-event-card>strong{color:#ffe09a;font-size:17px}.social-event-card p{margin:8px 0;line-height:1.4;overflow-wrap:anywhere}.social-event-card .social-event-details{font-size:14px;color:#d4e8d8}.social-event-actions{display:flex;gap:10px}.social-event-actions button{min-height:44px;flex:1;font-size:16px;white-space:normal}
@media(orientation:landscape) and (max-height:600px){#social-events{bottom:12px;max-height:calc(100dvh - 24px)}}
/* Group conversations share the friend drawer but keep a separate composer. */
.groups-section{margin:16px 0;border-top:1px solid #5d8874;padding-top:12px}
.groups-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.groups-heading h3{margin:0!important}
.groups-heading button{min-height:40px!important}.group-list-item{display:block;width:100%;margin:8px 0;padding:12px;text-align:left;border:1px solid #638c73;border-radius:12px;background:#1b4b3d;color:#fff;font-size:15px}
.group-dialog{position:fixed;inset:var(--chat-viewport-top,0px) 0 auto auto;width:min(430px,100vw);height:var(--chat-viewport-height,100dvh);max-height:var(--chat-viewport-height,100dvh);max-width:100vw;margin:0;padding:calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));box-sizing:border-box;border:1px solid #648a75;border-radius:18px 0 0 18px;background:#123b32;color:#f0f6ed;z-index:222;overflow:auto}
.group-dialog:not([open]){display:none}.group-dialog .dialog-heading{position:sticky;top:0;z-index:2;background:#123b32;display:flex;align-items:center;justify-content:space-between}.group-dialog .dialog-heading h2{font-size:21px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-dialog .dialog-heading button{min-width:44px;min-height:44px}.group-dialog input,.group-dialog textarea{box-sizing:border-box;width:100%;min-height:44px;margin:5px 0 10px;padding:9px;border:1px solid #739581;border-radius:10px;background:#092c26;color:#fff;font-size:16px}.group-dialog fieldset{border:1px solid #587968;border-radius:12px;margin:12px 0;padding:10px}.group-dialog .friend-messages{height:40dvh;min-height:130px;overflow:auto;margin:12px 0}.group-dialog #group-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.group-dialog #group-form textarea{min-width:0;margin:0;resize:vertical}.group-dialog #group-form button{width:auto;min-height:44px;margin:0;padding:10px 14px;white-space:nowrap}.group-dialog #group-management{margin:12px 0;padding:10px;border:1px solid #587968;border-radius:12px}.group-dialog #group-management summary{cursor:pointer;font-size:15px;font-weight:700}.group-person{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:7px 0;border-bottom:1px solid #ffffff20}.group-person span{flex:1}.group-person button{font-size:12px;padding:6px}.group-friend-picker{max-height:25dvh;overflow:auto}.group-friend-picker label{display:flex;align-items:center;gap:8px;min-height:38px}.group-friend-picker input{width:20px;min-height:20px;height:20px;margin:0;accent-color:#a5f3cd}.group-dialog #group-admin>button,.group-dialog #group-leave{margin:6px;min-height:40px}
@media(max-width:700px){.group-dialog{width:100vw;border-radius:0}}
.group-dialog #group-form{position:sticky;bottom:0;z-index:2;padding:8px 0;background:#123b32}
/* Compact conversation surfaces and contacts. */
#friend-index{display:flex;flex-wrap:wrap;gap:2px;position:sticky;top:54px;z-index:3;background:#103e38;padding:4px 0}
#friend-index[hidden]{display:none}
#friend-index button{min-width:28px;min-height:36px;padding:2px;font-size:14px;background:transparent;border:0;color:#a5f3cd}
.friend-sort{font-size:14px!important;padding:4px 10px!important;min-height:36px!important}
#friends-dialog .friend-row{gap:9px;padding:10px 0;min-height:60px;border-radius:0;background:transparent;scroll-margin-top:100px}
#friends-dialog .social-avatar{width:40px;height:40px}
#friends-dialog .friend-name-link{font-size:16px;line-height:1.3;text-decoration:none}
#friends-dialog .friend-presence{font-size:14px;line-height:1.3}
#friends-dialog .contact-actions button{width:36px;min-width:36px;height:40px;min-height:40px;background:transparent;border:0;font-size:20px}
#friends-dialog .contact-actions .chat-action{width:36px;min-width:36px}
.message-name{cursor:pointer}.message-name:focus-visible{outline:2px solid #a5f3cd;border-radius:4px}
.chat-message{position:relative;overflow-wrap:anywhere;max-width:90%;width:fit-content;margin:5px 0;padding:8px 11px}
.chat-message.own{margin-left:auto;background:#a5f3cd;color:#062e2a}
.chat-message p{margin:3px 0 0;white-space:pre-wrap}.chat-message.own>strong{display:none}
.message-time{display:block;text-align:right;font-size:12px;opacity:.65;line-height:1.2;margin-top:4px}
.message-reactions{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;min-height:0}
.message-reactions:has(>.reaction-add:only-child){height:0;margin:0}
.message-reactions .reaction-add{position:absolute;right:2px;top:1px;min-width:28px;min-height:28px;padding:2px;opacity:.4;background:transparent;border:0}
.chat-message:hover .reaction-add,.reaction-add:focus-visible{opacity:1}
.reaction-picker{position:absolute;bottom:calc(100% + 4px);left:0;z-index:7;display:flex;gap:2px;padding:4px;border-radius:22px;background:#214c42;box-shadow:0 4px 16px #0006}
.reaction-picker[hidden]{display:none}
.reaction-picker button,.reaction-chip{min-height:30px;min-width:30px;padding:3px 5px;font-size:18px;border:0;border-radius:16px}
#friend-chat-dialog .chat-back,#group-dialog .chat-back{min-width:40px;font-size:30px;padding:0;background:transparent;border:0}
#friend-chat-dialog>.caption,#friend-chat-dialog>.fair-play-note{display:none}
#friend-chat-dialog #friend-status:empty,#group-status:empty{display:none}
#group-dialog[open]{display:flex;flex-direction:column;overflow:hidden;gap:7px}
#group-dialog .friend-messages{height:auto;flex:1 1 0;min-height:0;display:flex;flex-direction:column;margin:0;padding:8px 0}
#group-dialog #group-management{flex:none;max-height:35dvh;overflow:auto;font-size:14px;margin:0}
#group-dialog #group-form{flex:none;position:relative;padding:6px 0}
#opponent-dialog #opponent-relationships{margin-top:24px;padding-top:16px;border-top:1px solid #ffffff25}
#opponent-dialog #opponent-relationships button{width:100%;background:transparent;color:#ffaaa0;border:0;text-align:left}
#chat-notice,#activity-notice{position:fixed!important;inset:auto!important;top:max(12px,env(safe-area-inset-top))!important;left:50%!important;transform:translateX(-50%);height:auto!important;min-height:0!important;max-height:130px!important;width:min(420px,calc(100vw - 24px));box-sizing:border-box;overflow:hidden;align-content:start}
#chat-notice[hidden],#activity-notice[hidden]{display:none!important}
#chat-notice-open{height:auto!important;min-height:0!important}
#activity-notice strong,#activity-notice span{display:block;overflow-wrap:anywhere}
.spectator-compose{display:flex;gap:8px;margin-top:10px}.spectator-compose input{flex:1;min-width:0;font-size:16px}.spectator-compose button{min-height:44px}
.spectator-private{margin:8px 0}.spectator-chat>div{max-height:32dvh;overflow:auto}.spectator-chat .chat-message{font-size:16px}
#friend-index{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:3px;padding:3px 0}
#friend-index button{flex:none}
.chat-message.own p,.chat-message.own .reaction-chip{color:inherit}
.contact-actions svg{width:23px;height:23px;vertical-align:middle}