.lobby-page { max-width:1160px }
.online-section { min-width:0; padding:18px 0; border-top:1px solid #ffffff20 }
.matchmaking { padding:20px 0 18px; border-top:0 }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px }
.section-heading h1,.section-heading h2 { margin:0 }
.section-heading>span,.section-heading small { color:#d5ae70; font-size:13px }
.online-deck-row { margin:15px 0 8px }
.online-deck-row select { min-height:40px }
.online-panel button,.lobby-page button { transition:background-color .12s,border-color .12s }
.social-layout { display:grid; grid-template-columns:minmax(300px,0.85fr) minmax(360px,1.15fr); gap:32px }
.friend-add { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin:14px 0 }
.friend-add input,.chat-compose input { width:100%; min-width:0; padding:9px 11px; border:1px solid #7e6746; border-radius:4px; background:#181817; color:#fff0d2; font:inherit }
.friend-list { display:grid; gap:4px }
.friend-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto auto; gap:9px; align-items:center; padding:9px 0; border-bottom:1px solid #ffffff18 }
.friend-info { min-width:0 }
.friend-info strong,.friend-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.friend-info small { margin-top:4px; color:#b5a488; font-size:12px }
.friend-row button { padding:6px 9px!important; font-size:13px!important }
.presence-dot { width:8px; height:8px; border-radius:50%; background:#776f65 }
.presence-dot.online { background:#75c77a; box-shadow:0 0 6px #75c77a88 }
.friend-requests { display:grid; gap:7px; padding:10px 0; border-bottom:1px solid #ffffff18 }
.friend-requests>strong { color:#e1c18e; font-size:13px }
.friend-request { display:flex; align-items:center; gap:8px }
.friend-request span { margin-right:auto }
.friend-request button { padding:5px 9px!important; font-size:12px!important }
.friend-chat { display:flex; flex-direction:column; min-height:350px; border-top:0 }
.friend-chat .section-heading { padding-bottom:12px; border-bottom:1px solid #ffffff20 }
.friend-chat .section-heading button { padding:2px 9px!important; font-size:20px!important }
.message-list { display:flex; flex:1; flex-direction:column; gap:9px; max-height:370px; min-height:250px; overflow:auto; padding:12px 2px }
.chat-message { align-self:flex-start; max-width:84% }
.chat-message.mine { align-self:flex-end; text-align:right }
.chat-message small { color:#a9997e; font-size:11px }
.chat-message p { width:fit-content; max-width:100%; margin:4px 0 0; padding:8px 11px; border-radius:5px; background:#403629; color:#f2e3c7; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere }
.chat-message.mine p { margin-left:auto; background:#684b2c }
.chat-compose { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding-top:10px; border-top:1px solid #ffffff20 }
.chat-empty { padding:45px 0; color:#cdbb9c }
.incoming-invite { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:10px 0; padding:12px 14px; border-left:3px solid #e2b965; background:#443722 }
.incoming-invite strong { margin-right:auto }
.incoming-invite small { color:#d0bea0 }
.incoming-invite div { display:flex; gap:8px }
.incoming-invite button { padding:6px 10px!important }
.queue-elapsed { color:#efcc83; font-variant-numeric:tabular-nums }
.online-password { margin-top:20px }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
@media(max-width:760px) {
  .social-layout { grid-template-columns:1fr; gap:4px }
  .friend-chat { min-height:300px }
  .incoming-invite { align-items:flex-start }
  .incoming-invite strong { width:100% }
}