#settingsMenu {
    position: absolute;
    width: 801px;
    height: 340px;
    top: 170px;
    left: 50%;
    margin-left: -400px;
    border-radius: 15px;
    box-shadow: 0px 0px 15px 5px black;
    padding: 10px;
    overflow: hidden;
    z-index: 150;
    display: none;
    zoom: 1.2;
    -moz-transform: scale(1.2);
}

.settingsDiv {
    width: 390px;
    height: 310px;
    float: left;
    overflow: hidden;
}

.settingsDivider {
    margin-left: 10px;
    margin-right: 10px;
    width: 1px;
    float: left;
    height: 90%;
    background-color: black;
    opacity: 0.5;
}

.settingsDialogButtons {
    float: left;
    width: 801px;
    height: 50px;
    margin-top: 10px;
    text-align: center;
}

.settingsTitle {
    margin-top: 0px;
    margin-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 300px;
    text-align: center;
    border-bottom: 1px solid black;
}

.settingsContainer {
    display: block;
    width: 390px;
    margin-bottom: 10px;
    overflow: hidden;
}

.settingsName {
    display: block;
}

.settingsDescription {
    display: block;
    width: 390px;
    font-weight: bold;
}

/* Inline result of a username-change attempt, shown right under the Change Username control. The
   colour is set by Settings.js (red for the reason a change was refused). Empty by default, so it
   takes no space until there is something to say. Bright red reads on both the light and dark
   lobby themes this control can appear in. */
.settingsUsernameMessage {
    display: block;
    margin-top: 6px;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.3;
}

.settingsRadio {
    display: inline-block;
    width: 100px;
    margin-right: 5px;
    margin-left: 5px;
}

.settingsLink{
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

.settingsButton {
    /*display: block;
    width: 200px;
    margin-left: auto;
    margin-right: auto;*/
    width: 80px;
}

.settingsButtonLarge{
    width: 120px;
    margin-right: 10px;
}

.settingsText {
    /*display: block;*/
    /*width: 385px;*/
    width: 300px;
}

.settingsDialogButton {
    display: inline-block;
    width: 200px;
    margin-right: 20px;
    margin-left: 20px;
}

.settingsDisabled {
    opacity: 0.5;
    pointer-events: none;
}

.settingsColor {
    width: 20px;
    height: 20px;
    float: left;
    margin-left: 5px;
    border: 3px solid transparent;
    cursor: pointer;
    margin-bottom: 5px;
}




/* ── Settings popups ─────────────────────────────────────────────────────────────────────────
   Changing a password and surrendering both deserve a deliberate confirmation step rather than a
   single button in a list. These sit above the settings menu, which stays open behind them. */
.settingsPopup {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    padding: 24px 28px;
    border: 2px solid rgba(128, 128, 128, 0.7);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
    /* Above the settings menu it opens from. */
    z-index: 950000;
    text-align: center;
}

.settingsPopupTitle {
    margin: 0 0 10px 0;
    font-size: 30px;
}

.settingsPopupMessage {
    margin: 0 0 16px 0;
    font-size: 19px;
}

.settingsPopupInput {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 0 10px;
    font-size: 19px;
    text-align: center;
}

.settingsPopupButtons {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 6px;
}

/* Google's own styling, matching the login screen — a Google button that looks bespoke reads as
   untrustworthy at the moment someone decides whether to attach their account. */
#settingsLinkGoogleButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    min-height: 42px;
    margin: 0 auto;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #747775;
    border-radius: 4px;
    color: #1f1f1f;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    cursor: pointer;
}

#settingsLinkGoogleButton span { margin-left: 10px; }
#settingsLinkGoogleButton:hover { background: #f7f8f8; }

/* Phone: popups fill the width rather than sitting at a fixed 520px. */
html.mobileUI .settingsPopup {
    width: 92vw;
    max-width: 460px;
    padding: 18px 16px;
}

html.mobileUI .settingsPopupInput,
html.mobileUI .settingsPopupButtons .settingsDialogButton {
    min-height: 48px;
    font-size: 17px;
}

/* ── Sizing for the reorganised menu ─────────────────────────────────────────────────────────
   The button was a fixed 80px, which was fine for "Submit" and truncated anything longer -
   "Change Username" rendered as "Change Usern". Sized to its label instead, with a floor so the
   short ones stay clickable. */
.settingsButton {
    width: auto;
    min-width: 90px;
    padding: 4px 14px;
    box-sizing: border-box;
}

/* Both columns previously fitted in a fixed 310px. The account side now carries more, and
   overflow:hidden meant anything past that was silently cut rather than scrolled. */
.settingsDiv {
    height: auto;
    min-height: 340px;
    overflow: visible;
}

/* The username row is a field and a button side by side; keep the field from crowding it out. */
#settingsUsername {
    width: 230px;
    margin-right: 6px;
}

/* The menu was a fixed 340px with overflow:hidden, so a column taller than that was cut off with
   no indication. It now grows to its contents, with a ceiling (the menu is zoomed 1.2x and starts
   170px down an 960px canvas, so this keeps it on screen) and a scrollbar past that. */
#settingsMenu {
    height: auto;
    max-height: 560px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===== Settings menu adjustments =============================================
   The close button was vertically thin and left a gap under it; a taller button
   fills that space and is an easier target. */
.settingsDialogButtons {
    height: auto;
    margin-top: 6px;
    padding-bottom: 2px;
}

.settingsDialogButton {
    min-height: 44px;
    font-size: 19px;
}

/* Centre a container's control under its description rather than letting it sit
   against the left edge. Used by Surrender, which reads as an action rather than
   a form field. */
.settingsContainerCentered {
    text-align: center;
}

.settingsContainerCentered .settingsButton {
    display: inline-block;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* A disabled Surrender still has to look disabled: `disabled` alone leaves most
   browsers' buttons nearly unchanged against this dark background. */
#settingsSurrenderButton:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The card-list link, styled to sit with the buttons around it rather than as a
   bare underlined anchor. */
.settingsLink {
    display: inline-block;
    margin-top: 4px;
    font-size: 18px;
}

/* ── Phone: the settings menu as a full-screen sheet ──────────────────────────────────────────
 *
 * On a phone the desktop dialog was not merely awkward, it was unreachable. 801px wide, zoomed
 * 1.2x to ~985px, pinned 170px down and centred with a -400px margin, it rendered at x=-58 on a
 * 927px viewport and ran 269px past the bottom -- taking Close, Surrender, Log Out and View All
 * Cards with it. Its own overflow could not scroll to them either, because the box was taller than
 * the screen rather than its content being taller than the box, so there was no way to dismiss it
 * except reloading the page.
 *
 * It is fixed to the viewport and scrolled internally instead: the sheet is exactly the screen, and
 * everything in it is reachable by scrolling within it.
 *
 * `display` is deliberately not set here. Settings.js shows and hides this with jQuery, which
 * writes an inline display -- a rule here would either be ignored by that or fight it, and the one
 * that fights wins and leaves the menu permanently open. Same reasoning as #lobby. */
html.mobileUI #settingsMenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 10px 12px 0 12px;
    box-sizing: border-box;
    border-radius: 0;
    /* Both of these carry the desktop 1.2x magnification; at phone scale it only costs room. */
    zoom: 1;
    transform: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* The column pair is a vertical divider on a canvas wide enough for it; on a phone the two columns
 * are either side by side with a gap, or stacked, and neither wants a rule between them. */
html.mobileUI .settingsDivider { display: none; }

/* The fixed desktop widths (390px columns, a 390px description, a 300px title) all become the
 * width of whatever column they are in. min-height:340px was sized for the desktop canvas and only
 * pads a phone column out with dead space. */
html.mobileUI #settingsMenu .settingsDiv {
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    overflow: visible;
}
html.mobileUI #settingsMenu .settingsContainer,
html.mobileUI #settingsMenu .settingsDescription,
html.mobileUI #settingsMenu .settingsTitle {
    width: auto;
}

html.mobileUI #settingsMenu .settingsTitle { font-size: 22px; }
html.mobileUI #settingsMenu .settingsDescription { font-size: 15px; }

/* Landscape has the width to keep both columns up at once, which roughly halves how far the sheet
 * has to be scrolled -- the same trade the lobby makes with players and games. Portrait has to
 * stack them. The second column is addressed through the (hidden) divider rather than with
 * :last-of-type, which would match .settingsDialogButtons instead: it is the last div child. */
@media (orientation: landscape) {
    html.mobileUI #settingsMenu .settingsDiv {
        float: left;
        width: 50%;
        padding-right: 10px;
    }
    html.mobileUI #settingsMenu .settingsDivider + .settingsDiv {
        padding-right: 0;
        padding-left: 10px;
    }
}

@media (orientation: portrait) {
    html.mobileUI #settingsMenu .settingsDiv {
        float: none;
        width: 100%;
        padding: 0;
    }
}

/* Close stays on screen at the foot of the sheet however far down the content runs, so dismissing
 * is never something you have to scroll for. It needs an opaque background of its own or the
 * content scrolls visibly through it; `inherit` picks up whichever themed colour .background is
 * currently painting the sheet, so it follows the Light/Dark toggle without hard-coding either. */
html.mobileUI .settingsDialogButtons {
    float: none;
    clear: both;
    width: auto;
    position: sticky;
    bottom: 0;
    margin-top: 8px;
    padding: 8px 0;
    background: inherit;
}

/* The desktop button is a 200px pill with 20px of margin either side. Those margins have to go
 * explicitly: box-sizing does not cover margin, so width:100% plus 20+20 put the button 40px wider
 * than the bar and pushed its right edge past the screen. */
html.mobileUI .settingsDialogButton {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    margin-left: 0;
    margin-right: 0;
}

/* Thumb-sized controls, and 16px+ text everywhere so iOS does not zoom the page on focus. The
 * username field and its button stack rather than sharing a line: side by side in half a phone
 * column there was no width left for either. */
html.mobileUI #settingsMenu .settingsButton {
    width: 100%;
    min-height: 48px;
    font-size: 17px;
    margin-top: 4px;
}
html.mobileUI #settingsUsername {
    width: 100%;
    box-sizing: border-box;
    margin-right: 0;
    min-height: 48px;
    font-size: 17px;
}
html.mobileUI #settingsMenu .settingsLink {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
}

/* Radios are laid out as their own tap rows: at desktop size the label text is the only real
 * target, which is a ~14px-tall strip under a thumb. */
html.mobileUI #settingsMenu .settingsRadio {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    margin-right: 16px;
    font-size: 16px;
}
html.mobileUI #settingsMenu .settingsRadio input[type="radio"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 4px;
}