/* Sky lobby + shared social composition: native points, no game-coordinate changes. */ :is(#channelScreen,#socialScreen).theme-sky { overflow: hidden; --sky-accent: #176b96; --lobby-muted: var(--sky-muted); --lobby-text: var(--sky-ink); background: #96d5f6 var(--sky-background) center / cover no-repeat; } :is(#channelScreen,#socialScreen).theme-sky::before, :is(#channelScreen,#socialScreen).theme-sky::after { display: none; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; margin: 0; padding: 10px var(--theme-safe-right, 10px) max(10px, env(safe-area-inset-bottom)) var(--theme-safe-left, 10px); display: grid; grid-template-columns: 68px minmax(0, 1fr) minmax(268px, .85fr); grid-template-rows: 44px 44px minmax(0, 1fr); gap: 8px; background: none; border: 0; box-shadow: none; color: var(--sky-ink); font: 15px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) * { box-sizing: border-box; text-shadow: none; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) button { position: relative; inset: auto; min-width: 44px; min-height: 44px; height: auto; margin: 0; padding: 8px 12px; border: 1px solid #b0d0e2; border-radius: 12px; background: linear-gradient(#f8fdff, #e1f2fc); color: var(--sky-ink); font: 750 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-indent: 0; transform: none; box-shadow: inset 0 1px 0 #fff, 0 3px 8px #2579a317; touch-action: manipulation; cursor: pointer; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) button:disabled { opacity: .62; cursor: default; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) input { position: static; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 10px 12px; border: 1px solid #a8c6da; border-radius: 11px; background: #f8fdff; color: var(--sky-ink); font: 16px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: inset 0 1px 3px #20618c0a; -webkit-user-select: text; user-select: text; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) input::placeholder { color: #536e85; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .lobbyPanel { position: relative; inset: auto; width: auto; height: auto; min-width: 0; min-height: 0; border: 1.5px solid var(--sky-line); border-radius: 18px; background: var(--sky-panel); box-shadow: var(--sky-shadow); } :is(#channelScreen,#socialScreen).theme-sky #lobbySideActions { position: static; grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; width: auto; height: auto; padding: 0; background: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbySideActions button { width: 100%; padding: 8px 4px; font-size: 13px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyTopBar { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0,1fr) 44px; gap: 2px 8px; padding: 8px 10px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountHeading { position: static; grid-column: 1; grid-row: 1; min-width: 0; } :is(#channelScreen,#socialScreen).theme-sky .lobbyEyebrow { display: block; color: var(--sky-accent); font-size: 10px; line-height: 12px; letter-spacing: 1.7px; font-weight: 850; } :is(#channelScreen,#socialScreen).theme-sky #myName2 { position: static; width: auto; margin: 2px 0; color: var(--sky-ink); font-size: 20px; line-height: 24px; font-weight: 850; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } :is(#channelScreen,#socialScreen).theme-sky #lobbyPresenceSummary { position: static; inset: auto; grid-column: 2; grid-row: 1; align-self: center; justify-self: end; display: flex; align-items: center; gap: 5px; height: auto; max-width: none; padding: 5px 8px; border: 1px solid #b0e2d1; border-radius: 30px; background: #d4f3e7; color: var(--sky-positive); font-size: 11px; line-height: 14px; white-space: nowrap; box-shadow: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyPresenceSummary .presenceDot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #26a567; box-shadow: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyPresenceSummary.none-online { background: #e8f0f5; border-color: #c6d9e4; color: var(--sky-muted); } :is(#channelScreen,#socialScreen).theme-sky #lobbyPresenceSummary.none-online .presenceDot { background: #7891a6; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountStats, :is(#channelScreen,#socialScreen).theme-sky #lobbyBalances { position: static; inset: auto; width: auto; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; padding: 0; border: 0; background: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountStats { grid-row: 2; grid-column: 1; grid-template-columns: minmax(0,1fr); } :is(#channelScreen,#socialScreen).theme-sky #lobbyBalances { grid-row: 2; grid-column: 2 / 5; } :is(#channelScreen,#socialScreen).theme-sky #lobbyTopBar { grid-template-columns: 44px repeat(3,minmax(0,1fr)); } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountHeading { grid-column: 1 / 5; align-self: center; padding-right: 136px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyPresenceSummary { grid-column: 2 / 5; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountStats > *, :is(#channelScreen,#socialScreen).theme-sky #lobbyBalances > * { position: static; width: auto; height: 44px; min-width: 0; padding: 2px 3px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; border-left: 1px solid #b9d2e366; border-radius: 0; background: none; box-shadow: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountStats > :first-child { border-left: 0; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountStats span, :is(#channelScreen,#socialScreen).theme-sky #lobbyBalances span { font-size: 11px; line-height: 13px; color: var(--sky-muted); } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountStats strong, :is(#channelScreen,#socialScreen).theme-sky #lobbyBalances strong { color: var(--sky-ink); font-size: 16px; line-height: 21px; font-weight: 850; letter-spacing: -.3px; } :is(#channelScreen,#socialScreen).theme-sky #myGold2 strong { color: #926000; } :is(#channelScreen,#socialScreen).theme-sky #myCash2 strong { color: #176f9e; } :is(#channelScreen,#socialScreen).theme-sky #myInfoBox { display: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions { position: static; grid-column: 3; grid-row: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; width: auto; height: auto; margin: 0; padding: 0; background: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions button, :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions #buttonAvatarShop, :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions #buttonCreateRoom { position: relative; inset: auto; width: 100%; height: 44px; padding: 6px; display: flex; gap: 6px; align-items: center; justify-content: center; border: 1px solid #e5f8ff; border-radius: 13px; background: linear-gradient(#faffff,#def2fd); color: var(--sky-ink); font-size: 15px; box-shadow: var(--sky-shadow); } :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions .sky-icon { flex-basis: 18px; width: 18px; height: 18px; color: #2179ab; } :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions #buttonCreateRoom, :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(#lobbyChatSend,#directChatSend,#dialogCreateRoomButtonOK,#friendDialogSend,#goToRoomConfirm,#lobbyPlayerDialogChat,#incomingRoomInviteAccept) { background: linear-gradient(var(--sky-blue-top),var(--sky-blue-bottom)); color: #fff; border-color: #8de3ff; } :is(#channelScreen,#socialScreen).theme-sky #buttonCreateRoom .sky-icon { color: #fff; } :is(#channelScreen,#socialScreen).theme-sky #lobbyFriendsBadge { position: absolute; right: -4px; top: -6px; min-width: 20px; height: 20px; margin: 0; padding: 2px 5px; border: 1px solid #fff; border-radius: 20px; background: #bd354a; color: #fff; font-size: 11px; line-height: 14px; font-weight: 850; box-shadow: 0 2px 5px #8d29352b; } :is(#channelScreen,#socialScreen).theme-sky #lobbyMainPanel { grid-column: 1 / 3; grid-row: 3; padding: 10px; display: flex; flex-direction: column; gap: 6px; } :is(#channelScreen,#socialScreen).theme-sky .lobbyPanelHeading { position: static; inset: auto; height: auto; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; } :is(#channelScreen,#socialScreen).theme-sky .lobbyHeadingCopy { min-width: 0; } :is(#channelScreen,#socialScreen).theme-sky .lobbyPanelHeading h2 { margin: 0; color: var(--sky-ink); font-size: 20px; line-height: 24px; letter-spacing: -.4px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyRoomFilters { position: static; inset: auto; width: auto; height: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; padding: 0; border: 0; background: none; flex-shrink: 0; } :is(#channelScreen,#socialScreen).theme-sky #lobbyRoomFilters button { width: 100%; padding: 6px; font-size: 13px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyRoomFilters button.active { background: #226f9f; border-color: #226f9f; color: #fff; box-shadow: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyMainPanel #roomsList { position: relative; inset: auto; width: auto; height: auto; min-height: 0; flex: 1; margin: 0; padding: 1px 3px 3px 1px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: min-content; align-content: start; gap: 7px; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .lobbyRoom { position: relative; width: 100%; height: auto; min-height: 0; padding: 8px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: auto auto auto auto; gap: 4px 5px; text-align: left; border: 1px solid #bbdcef; background: #f9fdffd9; border-radius: 12px; box-shadow: 0 2px 7px #297cab0b; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .lobbyRoom > span { position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; min-width: 0; transform: none; text-shadow: none; } :is(#channelScreen,#socialScreen).theme-sky .lobbyRoomNumber { grid-column: 1; grid-row: 1; color: var(--sky-accent); font-size: 13px; font-weight: 850; } :is(#channelScreen,#socialScreen).theme-sky .lobbyRoomTitle { grid-column: 2 / 4; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sky-ink); font-size: 15px; line-height: 19px; font-weight: 800; } :is(#channelScreen,#socialScreen).theme-sky .lobbyRoomPlayers { grid-column: 1 / 3; grid-row: 4; font-size: 12px; line-height: 16px; color: var(--sky-muted); text-align: left; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .lobbyRoomMap { grid-column: 1 / 4; grid-row: 3; display: block; overflow: hidden; border-radius: 5px; color: var(--sky-muted); font-size: 12px; line-height: 16px; } :is(#channelScreen,#socialScreen).theme-sky .lobbyRoomMap svg { display: block; width: 100%; height: auto; aspect-ratio: 213 / 50; overflow: hidden; } :is(#channelScreen,#socialScreen).theme-sky .lobbyRoomMode { grid-column: 1 / 3; grid-row: 2; color: var(--sky-muted); font-size: 12px; line-height: 16px; } :is(#channelScreen,#socialScreen).theme-sky .lobbyRoomFormat { grid-column: 3; grid-row: 2; color: var(--sky-muted); font-size: 12px; line-height: 16px; white-space: nowrap; text-align: right; } :is(#channelScreen,#socialScreen).theme-sky .lobbyRoomStatus { grid-column: 3; grid-row: 4; color: var(--sky-positive); font-size: 11px; line-height: 16px; font-weight: 850; text-align: right; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .lobbyRoom:disabled { opacity: 1; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .lobbyRoom.full { background: #e6ebef; border-color: #c4cdd6; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .lobbyRoom.full > span { color: #536477; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .lobbyRoom.full .lobbyRoomMap { filter: grayscale(1); opacity: .75; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .lobbyRoom.playing { background: #d7edfc; border-color: #77b6df; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .lobbyRoom.playing > span { color: #145780; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .lobbyRoomFriend { display: none; grid-column: 1; grid-row: 4; align-self: center; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .hasFriend .lobbyRoomPlayers { grid-column: 2; } :is(#channelScreen,#socialScreen).theme-sky #roomsList .hasFriend .lobbyRoomFriend { position: relative; display: inline-block; width: 18px; height: 18px; border: 0; border-radius: 50%; background: #2179ab; } :is(#channelScreen,#socialScreen).theme-sky .lobbyRoomFriend::before { left: 6px; top: 3px; width: 6px; height: 6px; background: #fff; } :is(#channelScreen,#socialScreen).theme-sky .lobbyRoomFriend::after { left: 4px; bottom: 3px; width: 10px; height: 5px; background: #fff; } :is(#channelScreen,#socialScreen).theme-sky .lobbyRoomJoin { display: none; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .screenMessage { position: static; inset: auto; display: block; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; flex-shrink: 0; color: var(--sky-danger); font-size: 13px; line-height: 17px; text-align: left; overflow-wrap: anywhere; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .screenMessage:empty { display: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatPanel { grid-column: 3; grid-row: 2 / 4; display: flex; flex-direction: column; gap: 8px; padding: 12px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatTitle { overflow-wrap: anywhere; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatAudience { width: auto; min-width: 70px; max-width: 96px; padding: 6px 9px; font-size: 13px; color: var(--sky-muted); background: #d9edf9; border: 0; box-shadow: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatMessages, :is(#channelScreen,#socialScreen).theme-sky #directChatMessages { position: relative; inset: auto; flex: 1; min-height: 0; width: auto; height: auto; margin: 0; padding: 0 3px 0 0; border: 0; background: none; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatMessages .lobbyChatMessage, :is(#channelScreen,#socialScreen).theme-sky .directChatLine { margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid #bbd4e36b; border-radius: 0; background: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatMessages .lobbyChatMessage > div { display: flex; justify-content: space-between; gap: 8px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatMessages .lobbyChatMessage strong, :is(#channelScreen,#socialScreen).theme-sky .directChatLine strong { color: var(--sky-accent); font-size: 15px; line-height: 20px; overflow-wrap: anywhere; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatMessages :is(.lobbyChatMessage,.lobbyChatDate) time { color: #536e85; font-size: 11px; line-height: 20px; white-space: nowrap; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatMessages .lobbyChatDate { display: flex; align-items: center; gap: 8px; padding: 2px 0; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatMessages .lobbyChatDate::before, :is(#channelScreen,#socialScreen).theme-sky #lobbyChatMessages .lobbyChatDate::after { content: ""; flex: 1; min-width: 0; border-top: 1px solid #bbd4e36b; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatMessages .lobbyChatMessage.dayEnd { border-bottom-color: transparent; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatMessages .lobbyChatMessage p, :is(#channelScreen,#socialScreen).theme-sky .directChatLine p { margin: 4px 0 0; color: #263d57; font-size: 16px; line-height: 21px; overflow-wrap: anywhere; white-space: pre-wrap; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatForm, :is(#channelScreen,#socialScreen).theme-sky #directChatForm { position: relative; inset: auto; width: auto; height: auto; margin: 0; padding: 0; display: flex; align-items: center; gap: 7px; flex-shrink: 0; background: none; border: 0; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatInput, :is(#channelScreen,#socialScreen).theme-sky #directChatInput { flex: 1; width: 0; padding-right: 33px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatLimit, :is(#channelScreen,#socialScreen).theme-sky #directChatLimit { position: absolute; right: 75px; top: 14px; width: 25px; padding: 0; color: var(--sky-muted); font-size: 11px; line-height: 16px; text-align: right; pointer-events: none; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatSend, :is(#channelScreen,#socialScreen).theme-sky #directChatSend { position: static; width: 64px; height: 44px; padding: 6px; font-size: 15px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyChatDone { display: none; } /* Shared social portal is transparent and never intercepts gameplay unless open. */ #socialScreen.theme-sky { position: fixed; inset: 0; z-index: 9000; pointer-events: none; background: none; } #socialScreen.theme-sky #socialShell { display: contents; padding: 0; } #socialScreen.theme-sky .sky-lobby-dialog { pointer-events: auto; } /* Native-point dialogs. Original room/map/social behavior is unchanged. */ :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .sky-lobby-dialog { position: fixed; inset: 0; top: var(--theme-visible-top,0px); width: 100%; height: var(--theme-visible-height,100%); padding: 8px var(--theme-safe-right,10px) 8px var(--theme-safe-left,10px); display: flex; align-items: center; justify-content: center; z-index: 120; } :is(#channelScreen,#socialScreen).theme-sky .sky-lobby-dialog .dialogShade { position: absolute; inset: 0; width: 100%; height: 100%; background: #0b294a80; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(.sky-lobby-dialog-panel,#playersList) { position: relative; inset: auto; transform: none; width: min(100%,560px); height: auto; max-height: 100%; min-height: 0; margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; border: 1.5px solid #fff; border-radius: 20px; background: #eff9ff; box-shadow: 0 10px 40px #07365640; color: var(--sky-ink); } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(.sky-lobby-dialog-panel,#playersList) h2 { margin: 0; color: var(--sky-ink); font-size: 22px; line-height: 27px; letter-spacing: -.4px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(.sky-lobby-dialog-panel,#playersList) p { margin: 0; color: var(--sky-muted); font-size: 14px; line-height: 19px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(.sky-lobby-dialog-panel,#playersList) > header { position: static; inset: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; flex-shrink: 0; height: auto; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .sky-lobby-dialog-panel > header > button { position: static; width: auto; height: 44px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .sky-lobby-dialog-panel > label { position: static; width: auto; height: auto; margin: 0; padding: 0; display: block; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .sky-lobby-dialog-panel > label > span { display: block; margin: 0 0 5px; color: var(--sky-muted); font-size: 13px; line-height: 17px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .sky-lobby-dialog-panel > footer { position: static; inset: auto; display: flex; justify-content: flex-end; gap: 8px; width: auto; height: auto; margin: 0; padding: 0; flex-shrink: 0; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .sky-lobby-dialog-panel > footer button { position: static; flex: 1; width: auto; min-width: 44px; max-width: none; height: 44px; font-size: 15px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(#removeFriendConfirm,#incomingRoomInviteReject) { color: var(--sky-danger); background: #ffedf0; border-color: #db9aa8; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(#friendListPanel,#playersList,#directChatPanel) { height: min(100%,600px); overflow: hidden; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(#friendListPopupRows,#friendListRequests,#channelPlayersListHtml) { position: relative; inset: auto; width: auto; height: auto; min-height: 0; margin: 0; padding: 0 3px 0 0; flex: 1; border: 0; background: none; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) #friendListRequests { flex: 0 1 auto; max-height: min(32%,100px); } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) #friendListPanel #friendListPopupRows { inset: auto; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) #lobbyProfileRanking { background: none; border: 0; border-radius: 8px; box-shadow: none; padding: 2px 3px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(.lobbyFriend,.lobbyFriendRequest,.lobbyPlayer) { position: relative; width: 100%; height: auto; min-height: 58px; margin: 0; padding: 8px 4px; display: flex; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid #bfd8e7; border-radius: 0; color: var(--sky-ink); background: none; box-shadow: none; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(.lobbyFriend,.lobbyFriendRequest) > div:first-of-type { flex: 1; min-width: 0; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(.lobbyFriend,.lobbyFriendRequest) strong { display: block; color: var(--sky-ink); font-size: 16px; line-height: 21px; overflow-wrap: anywhere; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(.lobbyFriend,.lobbyFriendRequest) div > span { color: var(--sky-muted); font-size: 12px; line-height: 17px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .lobbyFriendRequest > div:last-child:not(:first-child) { display: flex; gap: 6px; flex: 0 0 auto; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) :is(.friendChatButton,.lobbyFriendRequest button) { position: static; width: auto; min-width: 44px; height: 44px; font-size: 15px; } :is(#channelScreen,#socialScreen).theme-sky .friendPresenceDot { position: static; flex: 0 0 9px; width: 9px; height: 9px; border: 0; border-radius: 50%; background: #90a4b3; box-shadow: none; } :is(#channelScreen,#socialScreen).theme-sky .online .friendPresenceDot { background: #26a567; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .friendUnreadBadge { position: static; display: inline-block; min-width: 20px; height: 20px; margin: 3px 0 0 7px; padding: 1px 5px; border-radius: 12px; background: #bd354a; color: #fff !important; font-size: 12px; line-height: 18px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .lobbyPlayer { justify-content: flex-start; font-size: 16px; text-align: left; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .lobbyPlayer strong { color: var(--sky-ink); font-size: 16px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .popupFriend { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .popupFriend > div { position: static; grid-column: 2; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .popupFriend > .friendPresenceDot { grid-column: 1; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .popupFriend > .friendChatButton { grid-column: 3; } :is(#channelScreen,#socialScreen).theme-sky .lobbyEmptyState { padding: 18px 6px; color: var(--sky-muted); font-size: 15px; background: none; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) #dialogCreateRoom { width: min(100%,650px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; overflow-y: auto; touch-action: pan-y; } :is(#channelScreen,#socialScreen).theme-sky #dialogCreateRoom > header, :is(#channelScreen,#socialScreen).theme-sky #createRoomTitleField, :is(#channelScreen,#socialScreen).theme-sky #createClassicOptions, :is(#channelScreen,#socialScreen).theme-sky #createRoomDialogMessage, :is(#channelScreen,#socialScreen).theme-sky #dialogCreateRoom > footer { grid-column: 1 / 3; } :is(#channelScreen,#socialScreen).theme-sky #dialogCreateRoom > header p { display: none; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) #dialogCreateRoom > header { justify-content: space-between; gap: 12px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) #CreateRoomTraining { position: static; width: 124px; min-width: 124px; height: 44px; font-size: 16px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) #CreateRoomTraining[aria-pressed="true"] { background: #2378a6; color: white; } :is(#channelScreen,#socialScreen).theme-sky #dialogCreateRoom > header .lobbyEyebrow { display: none; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) #dialogCreateRoom > footer { position: sticky; bottom: -18px; z-index: 2; margin: 0 -2px -2px; padding: 8px 2px; background: #eff9ff; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .createRoomSelector { position: static; width: auto; height: auto; min-height: 68px; margin: 0; padding: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 4px; border: 0; background: none; } :is(#channelScreen,#socialScreen).theme-sky .createRoomSelector > span { grid-column: 1 / 4; color: var(--sky-muted); font-size: 12px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .createRoomSelector > div { position: static; width: auto; color: var(--sky-ink); font-size: 16px; text-align: center; align-self: center; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .createRoomSelector > button { width: 44px; height: 44px; font-size: 24px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) #CreateRoomModeIcon { grid-column: 1 / 3; position: relative; width: 100%; height: auto; min-height: 74px; display: flex; justify-content: center; align-items: center; gap: 16px; padding: 10px; } :is(#channelScreen,#socialScreen).theme-sky #CreateRoomMapImage { position: static; display: block; width: 213px; height: 50px; flex: 0 0 213px; transform: none; } :is(#channelScreen,#socialScreen).theme-sky #CreateRoomMapName { position: static; width: auto; color: var(--sky-ink); font-size: 16px; } :is(#channelScreen,#socialScreen).theme-sky #createClassicOptions { position: static; width: auto; height: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 0; } :is(#channelScreen,#socialScreen).theme-sky #createClassicOptions button { width: 100%; padding: 8px 4px; } :is(#channelScreen,#socialScreen).theme-sky #createClassicOptions span { display: block; color: var(--sky-muted); font-size: 11px; } :is(#channelScreen,#socialScreen).theme-sky #createClassicOptions strong { display: block; color: var(--sky-ink); font-size: 14px; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .roomMapSelectPanel { width: min(100%,760px); height: 100%; overflow: hidden; } :is(#channelScreen,#socialScreen).theme-sky #createRoomMapSelectGrid { position: relative; inset: auto; width: auto; height: auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(223px,1fr)); gap: 8px; overflow-y: auto; touch-action: pan-y; } :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) .createRoomMapChoice { width: 100%; height: 92px; min-height: 92px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 5px; } :is(#channelScreen,#socialScreen).theme-sky .createRoomMapChoicePreview { position: static; width: 213px; height: 50px; flex: 0 0 50px; transform: none; } :is(#channelScreen,#socialScreen).theme-sky .createRoomMapChoice strong { position: static; color: var(--sky-ink); font-size: 14px; } :is(#channelScreen,#socialScreen).theme-sky .createRoomMapChoice.selected { outline: 3px solid #2378a6; outline-offset: -3px; } /* The composer stays reachable instead of shrinking the whole lobby when typing. */ :is(#channelScreen,#socialScreen).theme-sky.theme-chat-keyboard #lobbyChatPanel { position: fixed; inset: 0; top: var(--theme-visible-top,0px); height: var(--theme-visible-height,100%); padding: 8px var(--theme-safe-right,10px) 8px var(--theme-safe-left,10px); border-radius: 0; z-index: 100; background: #eff9ff; } :is(#channelScreen,#socialScreen).theme-sky.theme-chat-keyboard #lobbyChatDone { display: block; width: 58px; height: 44px; padding: 6px; flex-shrink: 0; } :is(#channelScreen,#socialScreen).theme-sky.theme-chat-keyboard #lobbyChatPanel .lobbyPanelHeading { display: none; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) .sky-lobby-dialog { padding-top: 4px; padding-bottom: 4px; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) :is(.sky-lobby-dialog-panel,#playersList) { padding: 6px 12px; gap: 5px; border-radius: 14px; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) .sky-lobby-dialog-panel > :is(.lobbyEyebrow,p) { display: none; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) :is(#friendDialogPanel,#removeFriendDialogPanel,#goToRoomDialogPanel) { width: min(100%,760px); display: grid; grid-template-columns: minmax(120px,1fr) auto; align-items: center; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) :is(#friendDialogPanel,#removeFriendDialogPanel,#goToRoomDialogPanel) > h2 { grid-column: 1 / 3; font-size: 17px; line-height: 21px; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) .sky-lobby-dialog-panel > label > span { display: none; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) .sky-lobby-dialog-panel > .screenMessage:not(:empty) { grid-column: 1 / 3; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) #dialogCreateRoom { grid-template-columns: minmax(120px,1fr) auto; width: min(100%,760px); } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact #dialogCreateRoom > :is(.createRoomSelector,#CreateRoomModeIcon,#createClassicOptions) { display: none; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact #dialogCreateRoom > header { grid-column: 1 / 3; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact #dialogCreateRoom > header .lobbyEyebrow { display: none; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) #dialogCreateRoom > header h2 { font-size: 17px; line-height: 21px; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact #createRoomTitleField { grid-column: 1; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact #dialogCreateRoom > footer { grid-column: 2; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) #dialogCreateRoom > footer { position: static; margin: 0; padding: 0; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) .sky-lobby-dialog-panel > footer button { white-space: nowrap; min-width: max-content; flex: 0 0 auto; padding-inline: 14px; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) #directChatPanel { width: 100%; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) #directChatPanel { padding: 2px 8px; gap: 2px; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) #directChatMessages { display: none; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) #directChatDialog { padding-top: 2px; padding-bottom: 2px; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact #directChatPanel > header :is(.lobbyEyebrow,p) { display: none; } :is(#channelScreen,#socialScreen).theme-sky.theme-keyboard-compact :is(#lobbyShell,#socialShell) #directChatPanel > header h2 { font-size: 17px; line-height: 21px; } @media (max-width: 760px) { :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) { grid-template-columns: 60px minmax(0,1fr) minmax(260px,.9fr); gap: 6px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyTopBar { padding: 8px; grid-template-rows: 1fr 44px; gap: 4px 2px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountHeading { padding-right: 130px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyPresenceSummary { padding: 3px 6px; font-size: 11px; line-height: 14px; } :is(#channelScreen,#socialScreen).theme-sky #myName2 { margin: 0; font-size: 18px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountStats strong, :is(#channelScreen,#socialScreen).theme-sky #lobbyBalances strong { font-size: 16px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountStats span, :is(#channelScreen,#socialScreen).theme-sky #lobbyBalances span { font-size: 11px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions { gap: 6px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions .sky-icon { flex-basis: 16px; width: 16px; height: 16px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions button, :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions #buttonAvatarShop, :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions #buttonCreateRoom { font-size: 14px; gap: 4px; } } @media (min-width: 1000px) { :is(#channelScreen,#socialScreen).theme-sky :is(#lobbyShell,#socialShell) { padding-top: 16px; grid-template-columns: 84px minmax(0,1fr) minmax(360px,.8fr); grid-template-rows: 54px 54px minmax(0,1fr); gap: 12px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions button, :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions #buttonAvatarShop, :is(#channelScreen,#socialScreen).theme-sky #lobbyHeaderActions #buttonCreateRoom { height: 54px; font-size: 18px; } :is(#channelScreen,#socialScreen).theme-sky #lobbySideActions button { height: 54px; font-size: 15px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyTopBar { padding: 10px 15px; grid-template-rows: 1fr 54px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountStats strong, :is(#channelScreen,#socialScreen).theme-sky #lobbyBalances strong { font-size: 20px; line-height: 25px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyAccountStats span, :is(#channelScreen,#socialScreen).theme-sky #lobbyBalances span { font-size: 12px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyMainPanel, :is(#channelScreen,#socialScreen).theme-sky #lobbyChatPanel { padding: 16px; } :is(#channelScreen,#socialScreen).theme-sky #myName2 { font-size: 24px; line-height: 30px; } :is(#channelScreen,#socialScreen).theme-sky #lobbyPresenceSummary { font-size: 12px; } } #roomPreviewPlayers { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; overflow-y: auto; min-height: 0; touch-action: pan-y; } #roomPreviewPlayers > div { color: #1878b0; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; } #roomPreviewPlayers > div[data-team="1"] { color: #bd4658; }