#lobby {
    /*margin-right: auto;
    margin-left: auto;*/    
    display: none;    
    position: absolute;
    left: 0;
    right: 0;
    font-size: 20px;
    height: 960px;
    width: 1800px;
}

.lobbyTopDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1800px;
    height: 150px;
    margin-bottom: 10px;
    /*background-color: darkblue;*/
}

.lobbyVersionDiv {
    float: left;
    height: 150px;
    width: 500px;
}

.lobbySettingButton {
    position: absolute;
    top: 40px;
    left: 230px;
    width: 230px;
    height: 60px;
    font-size: 35px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.lobbyImageDiv {
    width: 750px;
    height: 150px;
    float: left;
}

.lobbyFactsDiv {
    width: 550px;
    height: 150px;
    float: left;
}

.lobbyVersion {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
}

.lobbyHelpLinks{
    width: 250px;
    height: 150px;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

.lobbyHelpLink {
    display: block;
    width: 200px;
    height: 30px;
    overflow: hidden;
    font-size: 25px;
    margin-top: 5px;
    margin-left: 5px;
}

.lobbyTitleImage {
    display: block;
    width: 700px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
}

.lobbyFactText {
    margin-top: 5px;
    margin-bottom: 15px;
    text-align: center;
}

.lobbyPatchNotes {
    position: absolute;
    top: 300px;
    left: 350px;
    width: 1100px;
    height: 330px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}


.lobbyPlayersOnline {
    position: absolute;
    top: 195px;
    left: 0px;
    width: 340px;
    height: 765px;
    /* The whole point of the rewrite: this box used to be a fixed 440px with NO overflow rule, so
       past roughly eight users the roster silently spilled out over the game list beneath it. */
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 20px;
}

.lobbyJoinGame {
    position: absolute;
    top: 195px;
    left: 1460px;
    width: 340px;
    height: 765px;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 20px;
}



.lobbyCreateGame {
    position: absolute;
    top: 155px;
    left: 350px;
    width: 1100px;
    /* Only as tall as its contents: a single row of controls. */
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    gap: 20px;
}


.lobbyJoinSpecificGame {
    margin-top: 0px;
    margin-bottom: 0px;
    cursor: pointer;
    text-align: center;
}

.lobbyCreateField {
    display: flex;
    flex-direction: column;
    align-items: center;
}



#lobbyNumPlayersSelect {
    width: 200px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    font-size: 23px;
}

.lobbyFunMode{
    width: 200px;
    display: block;
    font-size: 23px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 10px;
}

.lobbyCreateGameButton {
    margin-right: auto;
    margin-left: auto;
    display: block;
    width: 200px;
    height: 40px;
    margin-top: 10px;
    font-size: 25px;
}

/* The right column stacks the two action buttons (Play Game / Watch Replay);
 * the first button's top margin centers the pair against the dropdown column. */
#lobbyCreateGameButton {
    margin-top: 42px;
}

#lobbyWatchReplayButton {
    margin-top: 22px;
}

/* Dropdowns in the create-game panel (mode, difficulty, players). */
.lobbyCreateSelect {
    width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 23px;
}

/* Caption above each create-game dropdown; its top margin also provides the
 * vertical spacing between the stacked difficulty and player dropdowns. */
.lobbyCreateLabel {
    width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 14px;
    margin-bottom: 3px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.lobbyCardSet {
    width: 200px;
    display: block;
    font-size: 23px;
}

/*#lobbyRightDiv {
    width: 480px;
    height: 300px;
    float: left;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: darkslateblue;
}*/

.lobbyUserStats {
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 25px;
    height: 60px;
}

.lobbyChatDiv {
    position: absolute;
    top: 650px;
    left: 350px;
    width: 1100px;
    height: 310px;
}

#lobbyChatMessages {
    height: 265px;
    width: 1100px;
    overflow-x: hidden;
    overflow-y: auto;
}

#lobbyChatInput {
    width: 960px;
    margin-left: 5px;
    font-size: 20px;
}

#lobbyChatSend {
    width: 100px;
    font-size: 20px;
}

.lobbyVersionNumber {
    margin-top: 5px;
    text-align: right;
    margin-right: 5px;
    margin-bottom: 25px;
}

.versionNumber{
    font-weight: bolder;
    text-decoration: underline;
}

.versionHeader{
    font-weight: bold;
}

/*#lobby {
    position: absolute;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    width: 1300px;
    height: 600px;
    overflow: hidden;
}

#account {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1300px;
    height: 100px;
}

#createGame {
    position: absolute;
    top: 110px;
    left: 0px;
    width: 400px;
    height: 490px;
}

#changeLog {
    position: absolute;
    top: 110px;
    left: 410px;
    width: 400px;
    height: 490px;
    overflow-x: hidden;
    overflow-y: auto;
}

#users {
    position: absolute;
    top: 110px;
    left: 820px;
    width: 480px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}

#lobbyChat {
    position: absolute;
    top: 420px;
    left: 820px;
    width: 480px;
    height: 180px;
}
#lobbyNumPlayersSelect{
    width: 200px;
    overflow: hidden;
}

.lobbyUser {
    width: 480px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.lobbyTitleImage {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 100px;
}

.lobbyStats {
    position: absolute;
    top: 30px;
    left: 510px;
    width: 400px;
    height: 70px;
    margin-top: 0;
    margin-bottom: 0;
}


.lobbyColorOptions {
    position: absolute;
    top: 0px;
    left: 920px;
    width: 170px;
    height: 100px;
    text-align: center;
}

.lobbyAccountSettings {
    position: absolute;
    top: 0px;
    left: 1100px;
    width: 200px;
    height: 100px;
    text-align: center;
}

.lobbySets {
    width: 200px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

.lobbyPlayers {
    width: 200px;
    overflow: hidden;
    position: absolute;
    top: 160px;
    left: 0px;
}

.lobbyCards {
    width: 200px;
    overflow: hidden;
    position: absolute;
    top: 230px;
    left: 0px;
}

.lobbyCreateGameButtons {
    width: 190px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 210px;
    text-align: center;
}

.lobbyGames {
    width: 190px;
    height: 330px;
    overflow: hidden;
    position: absolute;
    top: 110px;
    left: 210px;
}

.lobbyCardSet {
    width: 150px;
    display: block;
    float: left;
    overflow: hidden;
}

.lobbyNumPlayers {
    width: 100px;
    display: block;
    float: left;
}

.lobbySpecificCardInput {
    width: 195px;
    display: block;
    margin-bottom: 5px;
    text-align: center;
}

.createGameButton {
    width: 190px;
    margin-bottom: 10px;
}

.specificGame {
    position: relative;
    width: 190px;
    height: 105px;
    overflow: hidden;
    margin-bottom: 5px;
    text-align: center;
}

.realJoinGameButton {
    width: 190px;
    height: 105px;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.0;
    cursor: pointer;
}

.joinGameButton {
    width: 100px;
    height: 40px;
    position: absolute;
    top: 30px;
    left: 45px;
    text-align: center;
    opacity: 0.0;
    cursor: pointer;
}

    .joinGameButton:hover {
        opacity: 1.0;
    }

.usernameColor {
    float: left;
    width: 50px;
    height: 20px;
    margin: 2px;
    cursor: pointer;
}

#lobbyPasswordInput {
    width: 185px;
    margin-bottom: 10px;
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#lobbyChangePasswordButton {
    width: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#lobbyJoinGame {
    position: absolute;
    width: 400px;
    height: 315px;
    top: 170px;
}

#createCardNameInput {
    width: 280px;
    border-width: 0px;
    border: none;
    margin-left: 5px;
    text-align: center;
    margin-bottom: 5px;
}

#createCardCostInput {
    width: 100px;
    margin-bottom: 5px;
    margin-left: 5px;
    text-align: center;
    display: inline;
}

#createCardCoinInput {
    width: 30px;
    border-width: 0px;
    border: none;
}

#createCardPotionInput {
    width: 30px;
    border-width: 0px;
    border: none;
}

#createCardTextInput {
    width: 385px;
    height: 50px;
    resize: none;
    border-width: 0px;
    border: none;
    margin-left: 5px;
    text-align: center;
}

#createCardSelectType {
    width: 120px;
    margin-left: 5px;
    margin-bottom: 5px;
}

#createCardTypeInput {
    width: 260px;
    text-align: center;
    border-width: 0px;
    border: none;
}

#createCardSaveButton {
    text-align: center;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#createCardContainer {
    width: 400px;
    height: 390px;
    position: absolute;
    top: 90px;
}

#createCardCardContainer {
    width: 260px;
    height: 260px;
    margin-left: auto;
    margin-right: auto;
    top: 5px;
    left: 0;
    right: 0;
    position: relative;
}*/

/* ── Lobby roster ────────────────────────────────────────────────────────────────────────────
   One compact row per account: status, name, and a details button that does nothing yet. The
   old roster printed every player's full stat line, which is what made the list outgrow its box
   in the first place. */
.lobbyUserRow {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Sized as a tap target, not just a line of text: the lobby uses this same layout on a phone.
       Note the ceiling on how much this can achieve - Scaling.js shrinks the whole 1800px canvas to
       fit the screen, so a 44px row lands near 18px on a phone in landscape and under 10px in
       portrait. Taller rows help every screen, but a genuinely thumb-sized target needs a lobby
       layout that does not scale down, the way MobileGame.js does for the game. */
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 8px;
    margin: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    font-size: 19px;
    white-space: nowrap;
}

.lobbyUserStatus {
    flex: 0 0 auto;
    font-size: 15px;
}

.lobbyUserName {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Offline accounts stay listed but recede, so the people actually here read first. */
.lobbyUserRow.lobbyUserOffline {
    opacity: 0.45;
}

.lobbyUserDetails {
    flex: 0 0 auto;
    font-size: 16px;
    /* Also a tap target, so it grows with the row. */
    min-width: 34px;
    min-height: 30px;
    padding: 2px 9px;
    cursor: pointer;
}

/* ── Clickable blocks ────────────────────────────────────────────────────────────────────────
   The game entries are buttons in everything but name — they just said "Click To ..." and hoped.
   A raised edge, a pointer, and a pressed-in look on hover make that legible without changing a
   word of the text. */
.lobbyJoinSpecificGame {
    display: block;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    border: 1px solid rgba(128, 128, 128, 0.55);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    font-size: 20px;
    transition: box-shadow 0.08s ease, transform 0.08s ease;
}

.lobbyJoinSpecificGame:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    transform: translateY(1px);
}

/* The call to action, so the block reads as pressable at a glance. */
.lobbyGameAction {
    display: block;
    margin-top: 6px;
    font-weight: bold;
}

/* Column headings. The roster lists every account now, present or not, so it is "Players" rather
   than the old "Players Online" — and an empty games column needs to say what it is. */
.lobbyColumnHeader {
    position: absolute;
    top: 155px;
    width: 340px;
    margin: 0;
    padding: 0 0 6px 0;
    text-align: center;
    font-size: 24px;
    border-bottom: 2px solid rgba(128, 128, 128, 0.5);
}

.lobbyPlayersHeader { left: 0px; }
.lobbyGamesHeader   { left: 1460px; }

/* Keeps the patch notes from running straight into the chat below them. */
.lobbyChatDiv {
    border-top: 2px solid rgba(128, 128, 128, 0.5);
    padding-top: 6px;
}

/* ===== Lobby centre tabs =====================================================
   The centre column used to be one block of patch notes at top:300, 1100x330.
   The strip plus the panel box occupy that same footprint exactly, so the chat
   below them does not move. Active state reuses .openedTab, the class the
   in-game dialog tabs already use (defined in both Color.css and
   Color.Dark.css), so theming needs nothing new. */
#lobbyTabStrip {
    position: absolute;
    top: 300px;
    left: 350px;
    width: 1100px;
    height: 34px;
    border-bottom: 2px solid rgba(128, 128, 128, 0.5);
}

.lobbyTab {
    display: inline-block;
    float: left;
    min-width: 150px;
    height: 30px;
    line-height: 30px;
    margin-right: 6px;
    padding: 0px 12px;
    cursor: pointer;
    text-align: center;
    font-size: 19px;
    border-radius: 6px 6px 0px 0px;
}

#lobbyTabPanels {
    position: absolute;
    top: 336px;
    left: 350px;
    width: 1100px;
    height: 294px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Panels are shown/hidden by lobbyOpenTab; exactly one is visible at a time. */
.lobbyTabPanel {
    display: none;
    /* Fill the panel box even when the panel is empty, so a tab with nothing in it yet reads as an
       open blank panel rather than collapsing the column to nothing. */
    min-height: 100%;
}

/* The patch notes keep their typography but no longer position themselves --
   #lobbyTabPanels owns the box and the scrolling now. */
#lobbyPanelPatchNotes.lobbyPatchNotes {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    overflow: visible;
}

/* ---- profile panels ----
   The panel box is wide and short (1100 x ~294), so the profile lays out in columns: identity
   across the top, then levels + colors on the left and the stat table on the right. A single
   column overflowed the box and scrolled for what is really not much data. */
.lobbyProfile {
    font-size: 18px;
    padding: 2px 8px 6px 8px;
}

.lobbyProfileHeader {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.35);
}

.lobbyProfileName {
    font-size: 26px;
}

.lobbyProfileStatus {
    font-size: 17px;
}

.lobbyProfileBody {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.lobbyProfileCol {
    flex: 0 0 auto;
}

.lobbyProfileColWide {
    flex: 1 1 auto;
}

.lobbyProfileSectionHeader {
    font-size: 20px;
    margin-top: 6px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.4);
}

/* Label / value pairs, so the values line up in a column of their own. */
.lobbyProfileLevels {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1px 14px;
    align-items: baseline;
}

.lobbyProfileLabel {
    white-space: nowrap;
}

.lobbyProfileXp {
    font-size: 15px;
    opacity: 0.75;
}

/* A formatted date is far longer than the level numbers it sits under, so it is set smaller and
   quieter -- otherwise the longest thing in the block is also the least important. Only ever
   rendered on someone else's profile. */
.lobbyProfileWhen {
    font-size: 15px;
    opacity: 0.8;
}

/* Stat grid: one row per bucket, labelled so no number is ambiguous. */
/* Stat grid. The label column is sized to its content and the number columns are narrow and
   close to it, so each row reads as one line rather than a label stranded from its figures. */
.lobbyProfileStats {
    display: grid;
    grid-template-columns: max-content repeat(3, 62px);
    column-gap: 10px;
    row-gap: 0px;
    align-items: baseline;
}

/* Faded rule under every cell, which lines up into one mark per row -- enough to separate the
   rows without drawing a table. */
.lobbyProfileStats > div {
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
    padding: 3px 0px;
}

/* The header cells get a slightly stronger rule, and the last row none, so the block is bounded
   by the data rather than trailing off. */
.lobbyProfileStats > .lobbyProfileStatHead {
    border-bottom-color: rgba(128, 128, 128, 0.45);
}

.lobbyProfileStats > div:nth-last-child(-n+4) {
    border-bottom: none;
}

.lobbyProfileStatHead {
    font-size: 15px;
    opacity: 0.75;
}

/* Flex rather than relying on the swatches' own float: a floated row collapses its container to
   zero height, which let the hint below render on top of the swatches and swallow their clicks.
   Float is ignored on flex items, so the shared .settingsColor styling still applies. */
/* Sits on the identity line beside the name and status. */
.lobbyProfileColors {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Only your own swatches are pickable; everyone else's are just information. */
.lobbyProfileColorPick {
    cursor: pointer;
}

.lobbyProfileHint {
    font-size: 14px;
    opacity: 0.7;
}

.lobbyProfileEmpty {
    opacity: 0.7;
    font-style: italic;
    padding: 12px 8px;
}


/* The "change username" row is moved in here from the settings menu at runtime. Strip the
   settings-panel framing so it reads as part of the profile. */
#lobbyProfileUsernameSlot .settingsContainer,
#lobbyProfileUsernameSlot.settingsContainer {
    margin: 0px;
    padding: 0px;
    border: none;
    width: auto;
}

#lobbyProfileUsernameSlot {
    margin-top: 10px;
}

#lobbyProfileUsernameSlot .settingsDescription {
    display: block;
    font-size: 16px;
    margin-bottom: 3px;
}

#lobbyProfileUsernameSlot .settingsText {
    width: 180px;
}

/* ===== Colour-picker swatches for the gradient colours ======================
   growth / other are gradient TEXT for card names (background-clip:text), and
   rainbow is drawn per-letter -- none of which fills an empty swatch box. In a
   SWATCH context the gradient has to be a real BACKGROUND, or the box is
   invisible (which it was, in light mode). These live here, in the always-loaded
   lobby stylesheet rather than the theme-swapped Color(.Dark).css, so a swatch
   keeps its colour when the player toggles light/dark. The two-class selector
   outranks the single-class text rules. */
.settingsColor.growth, .settingsColor.Growth,
.settingsColor.growthDark, .settingsColor.GrowthDark {
    background: linear-gradient(to bottom right, #00ffff 30%, #009900 70%);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: initial;
    color: transparent;
}

.settingsColor.other, .settingsColor.Other,
.settingsColor.otherDark, .settingsColor.OtherDark {
    background: linear-gradient(to bottom right, #cc0000 30%, #000099 70%);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: initial;
    color: transparent;
}

.settingsColor.rainbow, .settingsColor.Rainbow,
.settingsColor.rainbowDark, .settingsColor.RainbowDark {
    background: linear-gradient(90deg, #ff4040, #ff9c33, #ffe14d, #4ddb63, #4db8ff, #9a7bff, #ff6ad5);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: initial;
    color: transparent;
}

/* The "?" details button of the player whose profile is currently open in the Player tab, so it is
   findable in the roster even while that tab is hidden. */
.lobbyUserDetails.lobbyUserDetailsActive {
    outline: 2px solid rgba(120, 170, 255, 0.85);
    outline-offset: 1px;
    border-radius: 3px;
}

/* Lobby top-left Light/Dark toggle. */
.lobbyThemeToggle {
    margin-top: 10px;
    margin-left: 5px;
    display: flex;
    gap: 16px;
}

.lobbyThemeButton {
    font-size: 20px;
    padding: 8px 22px;
    cursor: pointer;
    opacity: 0.6;
}

/* The active theme reads as pressed. */
.lobbyThemeButton.lobbyThemeActive {
    opacity: 1;
    font-weight: bold;
    outline: 2px solid rgba(120, 170, 255, 0.85);
}