#online-lobby { text-align:left; margin:1rem 0 1.25rem; }
#lobby:has(#online-lobby:not([hidden])) .lobby-card { max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 2rem); overflow-y:auto; }
#online-players { list-style:none; padding:0; margin:.6rem 0; max-height:34vh; overflow-y:auto; }
.online-player { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.65rem 0; border-bottom:1px solid #ffffff20; }
.online-player > div { display:grid; gap:.15rem; min-width:0; overflow-wrap:anywhere; }
.player-status { font-size:.8rem; opacity:.75; }
#online-lobby button { width:auto; margin:0; padding:.55rem .8rem; font-size:.85rem; min-height:42px; border:1px solid #ffffff50; border-radius:.65rem; background:transparent; color:inherit; font-weight:700; }
#online-lobby #challenge-accept { background:#e4ffe9; color:#103423; }
#online-lobby button:disabled { opacity:.45; }
.lobby-length { display:flex; gap:.7rem; align-items:center; justify-content:space-between; font-size:.85rem; }
#lobby-match-length { font:inherit; color:inherit; background:#18352a; border:1px solid #ffffff50; border-radius:.5rem; padding:.5rem; }
#lobby-challenge { padding:.8rem; margin:.8rem 0; border:1px solid #e8d99280; border-radius:.75rem; }
#lobby-challenge p { margin:0 0 .65rem; }
.challenge-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
#challenge-countdown,#online-empty,#lobby-connection { font-size:.85rem; }
#lobby-connection:empty { display:none; }

#online-lobby .player-name{padding:0;border:0;border-radius:0;text-align:left;text-decoration:underline;text-underline-offset:3px;font-size:inherit;overflow-wrap:anywhere}