/* Multiplayer screens: #multi lists rooms, #multi-room is the room joined. The chat drawer takes the right edge. */
#multi:not([hidden]), #multi-room:not([hidden]) { display: grid; grid-template-columns: clamp(280px, 28vw, 360px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px 24px; min-height: 0; box-sizing: border-box; padding: 40px 0 12px; }
#multi:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top" "list" "commands"; }
#multi-room:not([hidden]) { grid-template-areas: "info members" "commands commands"; }
body:has(.room-chat-panel:not([hidden])) :is(#multi, #multi-room):not([hidden]) { padding-right: 372px; }
:is(#multi, #multi-room) [hidden] { display: none; }
:is(#multi, #multi-room) h2, :is(#multi, #multi-room) h3, :is(#multi, #multi-room) p { margin: 0; }
#multi-room-info { grid-area: side; display: grid; align-content: start; gap: 16px; padding: 20px; min-height: 0; overflow: auto; }
#multi-room-info { grid-area: info; }
#multi-top { grid-area: top; display: flex; align-items: center; gap: 24px; padding: 0 12px; }
#multi-top h2 { flex: 1; }
#multi-search { width: min(28em, 40vw); height: 40px; padding: 0 12px; box-sizing: border-box; }
#multi-create-dialog form { display: grid; gap: 14px; min-width: 22em; }
#multi-create label { display: grid; gap: 4px; }
#multi-create p { display: flex; gap: 8px; justify-content: flex-end; margin: 0; }
#multi-create input { width: 100%; box-sizing: border-box; min-width: 0; }
#multi-proposals { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
#multi-rooms { grid-area: list; margin: 0; padding: 8px 12px; list-style: none; display: grid; align-content: start; gap: 6px; overflow: auto; overflow-x: hidden; min-height: 0; }
#multi-rooms button { width: 100%; min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto 8em; gap: 24px; align-items: center; text-align: left; padding: 12px 28px; }
.multi-room-title { display: grid; gap: 4px; min-width: 0; }
.multi-room-title b { font-size: 21px; }
.multi-room-title > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-room-pips { display: flex; gap: 6px; }
.multi-room-pips i { width: 12px; height: 12px; border-radius: 50%; }
.multi-state { justify-self: end; font-size: 15px; font-weight: 700; white-space: nowrap; }
#multi-room-members { grid-area: members; padding: 8px 12px; min-height: 0; overflow: auto; }
#multi-room-members table { width: 100%; }
#multi-room-members table { border-spacing: 0 6px; border-collapse: separate; }
#multi-room-members td { padding: 14px 16px; text-align: left; }
#multi-room-members .c-slot, #multi-room-members .c-score { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
#multi-room-members td:first-child { border-radius: 8px 0 0 8px; }
#multi-room-members td:last-child { border-radius: 0 8px 8px 0; }
#multi-room-members .c-name { font-size: 19px; font-weight: 700; }
#multi-room-members .c-rank { font-variant-numeric: tabular-nums; }
#multi-room-members .c-score { text-align: right; }
#multi-room-members .c-slot { width: 3em; text-align: center; }
#multi-room-members .multi-watch { margin-left: 12px; min-height: 32px; padding: 0 12px; }
#multi-commands, #multi-room-commands { grid-area: commands; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
#multi-status, #multi-room-status { flex: 1; }
#multi-heading, #multi-title, #multi-create-heading { font-size: 28px; line-height: 1.2; }
#multi-song { font-size: 17px; }
#multi-top, #multi-room-info, #multi-rooms, #multi-room-members { border-radius: 10px; }
#multi-link { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
#multi-link::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; }
#multi-pick { min-height: 48px; }
#multi-room-commands [data-action="start"] { min-width: 10em; }
.multi-host, .multi-country { margin-right: 10px; }
.multi-country { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; }
#multi-proposals li { display: flex; align-items: center; gap: 8px; }
#multi-proposals li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#multi-bot { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
#multi-bot input { width: 4em; }