/* multiplayer lobby */
#lobby-connect { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 20px 0; }
#lobby-connect.hidden, #lobby-room.hidden { display: none; }
.join { display: flex; gap: 10px; }
#join-code { width: 150px; text-align: center; font: inherit; font-weight: 900; font-size: 22px; letter-spacing: 4px; text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, .08); border: 2px solid #5a1119; border-radius: 12px; padding: 8px; }
#join-code:focus { outline: none; border-color: var(--accent); }
#lobby-room .versus { padding-inline: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: 1fr auto 1fr; justify-items: center; }
#lobby-room .stage-emote { position: absolute; left: -46px; top: 50%; transform: translateY(-50%); }   /* beside the stage so it stays centered */
.lobby-picks { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; }
#lobby-room { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#room-share { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 4px; }
#room-code { font-size: 28px; letter-spacing: 5px; color: var(--accent); }
#btn-copy, #btn-lobby-back { border: 2px solid #5a1119; border-radius: 10px; background: rgba(0, 0, 0, .4); color: var(--ink); font-weight: 800; padding: 5px 14px; }
#btn-copy:hover, #btn-lobby-back:hover { border-color: var(--accent); }
#lobby-status { min-height: 22px; margin: 8px 0 4px; font-weight: 800; opacity: .85; text-align: center; }
#lobby-maps.locked { opacity: .6; pointer-events: none; }
#btn-lobby-start:disabled { opacity: .4; cursor: default; }

/* phones in landscape: everything fits without scrolling (fighters on the left, map and start on the right) */
@media (max-height: 520px) {
  #screen-lobby { gap: 0; }
  #screen-lobby:has(#lobby-room:not(.hidden)) .logo { display: none; }   /* the room code is title enough */
  #btn-lobby-back { position: absolute; top: 6px; left: 8px; padding: 3px 10px; font-size: 12px; }
  #lobby-room { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 12px; }
  #room-share { grid-column: 1 / -1; justify-content: center; margin: 0; }
  #lobby-room .versus { grid-column: 1; grid-row: 2 / span 2; }
  #lobby-room .art { height: 21vh; }
  .lobby-picks .picker { max-width: none; flex-wrap: nowrap; }
  #lobby-maps { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(4, auto); margin: 0; }
  #btn-lobby-start { grid-column: 2; grid-row: 3; justify-self: center; }
}