/*
 * Mobile.Lobby.css — the phone layout for the login and lobby screens.
 *
 * Everything here is scoped to `html.mobileUI`, a class Scaling.js adds when it detects a phone or
 * small tablet. In that mode Scaling.js also stops applying its body transform, so these rules lay
 * out against the real viewport: a CSS pixel here is a CSS pixel on the device, and a 48px button
 * is genuinely 48px under a thumb.
 *
 * That is the whole reason this file exists. The desktop screens are a fixed 1800px canvas scaled
 * to fit, which on a phone in portrait lands around 22% — text and controls shrink with it, so no
 * amount of padding can produce a usable tap target. Here they simply are not scaled.
 *
 * Scoped to a device class rather than a width media query on purpose: a desktop window dragged
 * narrow would otherwise get this layout while still being transform-scaled, which looks broken in
 * a way neither layout intends.
 */

html.mobileUI, html.mobileUI body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* ── Login ─────────────────────────────────────────────────────────────────────────────────── */

html.mobileUI #login,
html.mobileUI #createAccount,
html.mobileUI #googleClaim {
    position: static;
    width: auto;
    height: auto;
    max-width: 520px;
    margin: 0 auto;
    padding: 16px 14px 40px 14px;
    border: none;
    overflow: visible;
}

html.mobileUI #loginTitle,
html.mobileUI .loginTitle {
    width: 100%;
    height: auto;
    max-width: 460px;
}

html.mobileUI #loginMessage,
html.mobileUI .loginMessage,
html.mobileUI .createAccountParragraph {
    width: auto;
    font-size: 17px;
    margin: 10px 0 4px 0;
}

/* Inputs sized for a thumb, and 16px minimum so iOS does not zoom the page on focus. */
html.mobileUI #loginUsername,
html.mobileUI #loginPassword,
html.mobileUI .createAccountInput {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    font-size: 17px;
    margin-bottom: 12px;
    text-align: center;
}

html.mobileUI #loginButton,
html.mobileUI #loginCreateAccount,
html.mobileUI .loginCreateAccount,
html.mobileUI #loginGoogleButton {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    font-size: 17px;
    margin: 0 auto 10px auto;
    display: block;
}

html.mobileUI #loginGoogleButton {
    display: flex;
    align-items: center;
    justify-content: center;
}

html.mobileUI #loginGoogleNote {
    width: auto;
    font-size: 14px;
}

/* ── Lobby ─────────────────────────────────────────────────────────────────────────────────── */

/* The desktop lobby is absolutely-positioned blocks on a fixed canvas. On a phone they simply
 * stack, in document order — which the markup now states directly, so no flex ordering is needed
 * here.
 *
 * Deliberately NOT setting `display` on #lobby: the screen is hidden with display:none and shown
 * by JS setting an inline display:block. A display rule here would either reveal the lobby behind
 * the login screen (stylesheet beating the default none) or be ignored once shown (inline beating
 * the stylesheet). Leaving display alone lets that mechanism keep working untouched. */
html.mobileUI #lobby {
    position: static;
    width: auto;
    height: auto;
    font-size: 17px;
    padding: 0 10px 30px 10px;
    box-sizing: border-box;
}

html.mobileUI #lobby > * {
    position: static;
    width: auto;
    height: auto;
    left: auto;
    top: auto;
}

/* Phone header -- ONE row, everything on it:
 *
 *   [logo] [Light][Dark][View Cards] ..... Top: somebody 1000 · 1234 games   Version: 3.7  [Settings]
 *
 * The phone UI is built for LANDSCAPE, which is wide but very short -- 568x320 up to 932x430. Height
 * is the scarce resource, width is not, so every band of header costs a meaningful slice of the
 * screen while there is spare room across. The info used to sit on its own lines beneath the bar,
 * which made the header 74px of a 390px-tall display (19%) with hundreds of px going unused to the
 * right. Folding it onto the bar roughly halves that.
 *
 * A wrapping flex row (rather than a grid) is used deliberately: a grid with the wide ELO text
 * spanning columns while the controls sat in the flexible column made that column balloon and shoved
 * Settings off-screen. Here every item sizes to content except the ELO text, which is the designated
 * flexible one (see below) -- so the row absorbs slack and gives it back without anything moving.
 *
 * Wrapping is deliberately left ON. In landscape the row always fits, so it never triggers; in
 * portrait, which this UI does not target, there is genuinely no way to fit this content across
 * ~320px, and wrapping to a second line degrades better than crushing every control.
 *
 * The two desktop wrappers (.lobbyVersionDiv, .lobbyFactsDiv) are only groupers; display:contents
 * dissolves them so their children -- help links, Settings, the version line, the two fact lines --
 * order independently in the one flex row. */
html.mobileUI .lobbyTopDiv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 8px;
}

/* Undo the desktop absolute positioning / floats AND the fixed desktop box sizes (e.g. help links are
 * a 250x150 overflow:hidden block, Settings is 230x60) -- without clearing height/width/overflow the
 * help-links box stays 150px tall and shoves everything below it down. order + flex sizing drive
 * placement from here. */
html.mobileUI .lobbyVersionDiv,
html.mobileUI .lobbyImageDiv,
html.mobileUI .lobbyFactsDiv,
html.mobileUI .lobbyHelpLinks,
html.mobileUI .lobbyHelpLink,
html.mobileUI .lobbyThemeToggle,
html.mobileUI .lobbySettingButton,
html.mobileUI .lobbyTitleImage,
html.mobileUI .lobbyFactsDiv .lobbyVersionNumber,
html.mobileUI .lobbyFactText {
    position: static;
    top: auto;
    left: auto;
    float: none;
    margin: 0;
    width: auto;
    height: auto;
    overflow: visible;
}

/* Dissolve the two desktop grouper divs so their children become flex items of the header row. */
html.mobileUI .lobbyVersionDiv,
html.mobileUI .lobbyFactsDiv {
    display: contents;
}

/* --- Row 1: the top bar --- */

/* Logo, top-left. Height-only sizing keeps the aspect ratio. */
html.mobileUI .lobbyImageDiv {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    height: auto;
}
html.mobileUI .lobbyTitleImage {
    width: auto;
    max-width: 96px;
    height: 24px;
    display: block;
}

/* Light/Dark then the cards link (order flips the DOM's cards-first sequence), right of the logo.
 *
 * Held at its natural size and forbidden from wrapping inside itself. Once the row stops wrapping,
 * something has to absorb an over-long display name, and left shrinkable this block was volunteering:
 * it squeezed until "View Cards" dropped under the Light/Dark pair, which made the bar two lines
 * tall -- the exact outcome nowrap exists to prevent, arrived at from the inside. The ELO name is the
 * designated thing that gives way, so everything else on the row holds its width. */
html.mobileUI .lobbyHelpLinks {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px 8px;
}
html.mobileUI .lobbyThemeToggle { order: 1; margin: 0; gap: 5px; }
html.mobileUI #lobbyViewCards { order: 2; }

html.mobileUI .lobbyThemeButton {
    font-size: 13px;
    padding: 4px 8px;
}
html.mobileUI .lobbyHelpLink {
    width: auto;
    min-height: 34px;
    line-height: 34px;
    font-size: 14px;
}

/* Chat lives here as a button rather than as a pane in the page -- see MobileLobby.js. Sized and
 * shaped to match Settings beside it, since they are the row's two actions. */
html.mobileUI .lobbyChatButton {
    order: 6;
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    font-size: 14px;
    padding: 0 12px;
    margin: 0 8px 0 0;
}

/* An arriving message while the overlay is shut. Colour AND the "!!!" in the label (set by
 * MobileLobby.js) carry it, so it does not rely on colour alone. */
html.mobileUI .lobbyChatButtonUnread {
    color: #FFD700;
    border-color: #FFD700;
    animation: lobbyChatPulse 1s ease-in-out infinite;
}
@keyframes lobbyChatPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* Settings closes the row on the right. It needs no auto margin: the ELO item below grows into all
 * the slack, which pushes Settings and everything between it hard to the right edge. */
html.mobileUI .lobbySettingButton {
    order: 7;
    width: auto;
    min-height: 38px;
    font-size: 14px;
    padding: 0 12px;
    display: block;
}

/* --- The info block, riding on the same row, between the links and Settings ---
 *
 * Lobby.js feeds these the server's compact variants while html.mobileUI is on: the full sentences
 * ("<name> has the highest ELO at [n]!" and "[n] games played across all accounts!") run ~76
 * characters combined and would leave no room for the controls beside them.
 *
 * The facts sit directly after the links and the slack is collected further right, on the version
 * (see its margin-left below). The facts previously grew to absorb that slack themselves and then
 * right-aligned their text inside the grown box, which parked all the empty space between View Cards
 * and the message and made the name start eliding while a gap sat unused beside it. Sized to content
 * instead, the message simply occupies what it needs and only gives way once the row is genuinely
 * full.
 *
 * min-width:0 is the part that is easy to miss: without it a flex item refuses to shrink below its
 * own text, so a long display name would overflow the row instead of eliding. */
html.mobileUI #lobbyHighestELO {
    order: 3;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px;
    overflow: hidden;
}

/* Inside the ELO item only the NAME is allowed to give way. Eliding the item as one flat string
 * trimmed from the end, which dropped the ELO number -- the point of the line -- and kept the
 * over-long name that caused the overflow. Selecting on "every child except the name" rather than on
 * the number's own class keeps this working whatever colour band the player's ELO falls into. */
html.mobileUI #lobbyHighestELO > * {
    flex: 0 0 auto;
}
html.mobileUI #lobbyHighestELO > .lobbyFactName {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The total game count is the more valuable of the two facts, so it is the one that never gives way:
 * fixed width, never elided, and still present at widths where the ELO line has been dropped. */
html.mobileUI #lobbyTotalGameCount {
    order: 4;
    flex: 0 0 auto;
}

/* The version string is off the phone bar entirely (author's call). At ~90px it was the least
 * useful thing competing for a row that also has to carry two facts and two buttons, and dropping
 * it is what lets the ELO fact survive down to much narrower screens. It is still on the desktop
 * lobby, which is where anyone reporting a bug is reading it from.
 *
 * Kept as a rule rather than removed from the markup: the element is desktop furniture, and hiding
 * it for one layout is not a reason to restructure the header for both. */
html.mobileUI .lobbyFactsDiv .lobbyVersionNumber {
    display: none;
}

/* With the version gone the spare width is collected here instead, so it still pools in one place --
 * between the message and the buttons -- leaving the message beside View Cards with room to grow
 * into and the two buttons pinned right. An auto margin only takes POSITIVE free space, so once the
 * row is full it contributes nothing and the facts shrink as usual. */
html.mobileUI .lobbyChatButton {
    margin-left: auto;
}

/* Separator lives in CSS so the two server strings stay independent and plain. */
html.mobileUI #lobbyTotalGameCount::before {
    content: "·";
    margin: 0 5px;
    opacity: 0.6;
}

/* A long display name elides rather than wrapping or pushing the game count off-screen. */
html.mobileUI .lobbyFactText {
    flex-basis: auto;
    text-align: right;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* In landscape the bar must never become two bars: a second band is a real bite out of a 320-430px
 * tall screen. Wrapping is what a flex row does by default when the content is too wide, and it
 * decides that on each item's hypothetical size -- so a long enough display name pushed the row over
 * and dropped the whole info block under Settings, rather than eliding as intended. Turning wrapping
 * off in landscape leaves shrinking as the only option, which is what the eliding name is for.
 *
 * Portrait keeps wrapping: ~320px genuinely cannot hold this row, and a second line reads better
 * there than every control crushed to nothing. */
@media (orientation: landscape) {
    html.mobileUI .lobbyTopDiv { flex-wrap: nowrap; }
}

/* Below 640px the ELO fact is dropped entirely: that far down the row it has only ~45px to live in
 * and would shrink to a meaningless "Top: ..." stub, so the total game count -- the more valuable
 * fact -- takes the space instead. This covers the oldest landscape phone (568) and portrait.
 *
 * The threshold was 760px until the version string came off the bar. Those ~90px go straight to the
 * ELO's budget, which is what brings the 667 landscape phones back to showing both facts; at that
 * width the name elides rather than the whole fact disappearing.
 *
 * This block has to come after the separator rule above, not next to the sizing rules it relates to:
 * a media query adds no specificity, so the plain `content: "·"` would otherwise win on source order
 * and leave a dot dangling at the head of the line with nothing before it. */
@media (max-width: 640px) {
    html.mobileUI #lobbyHighestELO { display: none; }
    html.mobileUI #lobbyTotalGameCount::before { content: none; }
}

/* Create game: two controls and two buttons wrap rather than sitting on one 1100px row.
 *
 * The basis is a width, not a percentage, so the row packs by how much room there actually is: all
 * four fit on one line in landscape and fall to two-by-two in portrait. As a percentage it was
 * always two-by-two, which cost an entire 58px band of a 390px-tall landscape screen to no purpose
 * -- and that band came straight out of the players/games boards below.
 *
 * flex-end alignment matters once they share a line: the two selects carry a label above them and
 * the two buttons do not, so aligning on the top would leave the buttons floating a label's height
 * above the controls they sit beside. */
html.mobileUI .lobbyCreateGame {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 8px 10px;
    margin-bottom: 10px;
}

/* 120px basis: four of these plus three 10px gaps is 510px, inside the 548px of content width the
 * narrowest landscape phone (568 less the lobby's padding) has, so every landscape size keeps one
 * line. They grow to fill whatever is really there, so the number is a packing threshold rather
 * than a width anything ends up at. Portrait (~390) cannot fit four and falls to two-by-two.
 *
 * min-width:0 is what makes the basis mean anything. Flexbox decides where to break a line using
 * each item's hypothetical size, and the default min-width:auto raises that to the item's min-content
 * width -- for a <select> or a button captioned "Watch Replay" that is well over 130px, so the row
 * kept breaking on the intrinsic widths and ignoring the basis entirely. */
html.mobileUI .lobbyCreateField {
    flex: 1 1 120px;
    min-width: 0;
}

html.mobileUI .lobbyCreateSelect,
html.mobileUI #lobbyDifficultySelect,
html.mobileUI #lobbyNumPlayersSelect,
html.mobileUI .lobbyCreateGameButton {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    font-size: 17px;
}

html.mobileUI .lobbyCreateLabel { font-size: 15px; }

/* ── Players | Games, side by side ───────────────────────────────────────────────────────────
 *
 *   [ Players            ] [ Games              ]
 *   [ [Online] alice   ? ] [ Open               ]
 *   [ [In Game] bob    ? ] [   Game 12  join    ]
 *   [ [Disc.] carol    ? ] [ In Progress        ]
 *   [                    ] [   Game 9   spectate]
 *
 * Who is here and what can be joined are the two things worth landing on, and in landscape there is
 * width to show both at once -- stacked they were two full-width blocks and the games list started
 * below the fold. They stay side by side in portrait too: halved columns are still legible, and
 * stacking them there would put games back under the fold, which is the problem being fixed.
 *
 * These elements are absolutely positioned by the desktop sheets and are no longer direct children
 * of #lobby (the .lobbyBoards wrappers sit between), so the `#lobby > *` reset above no longer
 * reaches them -- they are reset here instead. */
html.mobileUI .lobbyBoards {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

html.mobileUI .lobbyBoardCol {
    /* Equal halves that may shrink: min-width:0 stops a long game description from forcing the
     * column wider than its share and pushing the other one off-screen. */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

html.mobileUI .lobbyColumnHeader,
html.mobileUI .lobbyPlayersOnline,
html.mobileUI .lobbyJoinGame {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
}

/* Column headings become section headings, sized down to buy back vertical space. */
html.mobileUI .lobbyColumnHeader {
    font-size: 16px;
    margin: 0 0 4px 0;
    padding-bottom: 3px;
    flex: 0 0 auto;
}

/* Each list scrolls inside its own column rather than growing the page, so the two headings stay
 * put and side by side however uneven the two lists are. The cap is in vh because the whole point
 * is to leave the chat and tabs reachable below on a ~390px-tall landscape screen.
 *
 * flex-basis stays auto: with basis 0 the list asks for no height, and since .lobbyBoards has no
 * height of its own to distribute (it is sized by its content), "no height" is exactly what it got
 * -- both lists collapsed to 0px under visible headings. Sizing to content and capping with
 * max-height gives the same bounded, internally-scrolling box without the circularity. */
html.mobileUI .lobbyPlayersOnline,
html.mobileUI .lobbyJoinGame {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 46vh;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 17px;
}

/* Group headings inside the games column, marking the join-able run from the watch-only one. */
html.mobileUI .lobbyGameGroup {
    margin: 6px 0 2px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.65;
}
html.mobileUI .lobbyGameGroup:first-child { margin-top: 0; }

html.mobileUI .lobbyBoardEmpty {
    margin: 6px 0;
    font-size: 14px;
    opacity: 0.6;
}

/* Unscaled, so this really is a 52px target rather than 52px shrunk to eleven. */
html.mobileUI .lobbyUserRow {
    min-height: 52px;
    font-size: 17px;
}

html.mobileUI .lobbyUserDetails {
    min-width: 44px;
    min-height: 40px;
    font-size: 16px;
}

html.mobileUI .lobbyJoinSpecificGame {
    font-size: 17px;
    padding: 14px 12px;
}

/* ── Chat, as an overlay rather than a pane in the page ──────────────────────────────────────
 *
 * MobileLobby.js moves .lobbyChatDiv out of the lobby and into .lobbyChatBox below, so these rules
 * style it in its new home. It is no longer a section of the page and wants no separating border or
 * top margin; the box supplies its own frame.
 *
 * The overlay is only in the DOM on a phone (MobileLobby.js builds it), which is why none of this
 * needs a desktop counterpart to switch it back off. */
/* The desktop placement has to be undone HERE, explicitly. The blanket reset near the top of this
 * file is `#lobby > *`, and moving the chat box onto <body> takes it out of that selector's reach --
 * so it went back to being position:absolute at top:650 left:350, 1100px wide, laid out against the
 * page instead of the overlay while the box sat empty. Same trap as the .lobbyBoards wrappers. */
html.mobileUI .lobbyChatDiv {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

html.mobileUI .lobbyChatOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the lobby but below the settings sheet, which is a deliberate dialog and should win. */
    z-index: 120;
    background: rgba(0, 0, 0, 0.55);
    padding: 12px;
    box-sizing: border-box;
}
html.mobileUI .lobbyChatOverlay.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bounded rather than full-bleed: on a phone in landscape a full-height sheet puts the input under
 * the on-screen keyboard, and the dimmed margin is also the tap target that closes it. */
html.mobileUI .lobbyChatBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    min-height: 0;
    padding: 10px 12px 12px 12px;
    box-sizing: border-box;
    border: 1px solid rgba(128, 128, 128, 0.6);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
    /* Colour comes from the `background` class on the element itself (see MobileLobby.js), which is
     * what follows the Light/Dark toggle. Not `inherit` -- the parent here is the dim. */
}

html.mobileUI .lobbyChatBoxHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: bold;
}

html.mobileUI .lobbyChatDone {
    min-height: 40px;
    padding: 0 16px;
    font-size: 15px;
}

/* The message pane takes the slack, so the input row stays pinned to the bottom of the box however
 * long the history is -- height is on the box, not on this. */
html.mobileUI #lobbyChatMessages {
    /* Desktop fixes this at 1100x265; both have to be released or the pane defines the box. */
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 120px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Side margins are zeroed explicitly on both: the desktop input carries margin-left:5px, and margin
 * sits outside box-sizing, so width:100% plus a margin hangs the control past the box edge. */
html.mobileUI #lobbyChatInput {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    /* 16px+ or iOS zooms the page when the field takes focus. */
    font-size: 17px;
    margin: 8px 0 0 0;
}

html.mobileUI #lobbyChatSend {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    font-size: 17px;
    margin: 8px 0 0 0;
}

/* (The 68%/28% side-by-side input row that used to live here belonged to the inline chat pane and
 * is gone with it -- the overlay's full-width rows above replace it. Left as a note because the two
 * rule sets targeted the same ids, and the later one silently won.) */

/* Least urgent on a phone, so it sits last and is not given much room. */
html.mobileUI .lobbyPatchNotes {
    max-height: 45vh;
    overflow-y: auto;
    font-size: 15px;
    margin-top: 12px;
}

/* ===== Lobby centre tabs (phone) =============================================
   The desktop lobby is an absolutely-positioned canvas; on a phone every direct
   child of #lobby is un-positioned and stacks in document order. The tab strip
   and its panel box are now two of those children, so they need the same
   treatment -- and the strip has to wrap rather than sit on one line. */
/* One row of four, not a 2x2 block. The tabs previously took `flex: 1 1 40%`, which asks for 40%
 * each and so can only ever fit two per line; with basis 0 they ask for nothing and simply divide
 * whatever the row is. Even the narrowest landscape phone has ~530px here, or ~132px a tab, which
 * clears the longest label ("Patch Notes", ~112px including padding) -- nowrap and an ellipsis keep
 * a label from stacking or spilling if that ever stops being true. */
html.mobileUI #lobbyTabStrip {
    height: auto;
    overflow: visible;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 12px;
}

html.mobileUI .lobbyTab {
    float: none;
    min-width: 0;
    flex: 1 1 0;
    font-size: 16px;
    margin-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* No scrollbar of its own. A panel that scrolls inside a page that also scrolls means two nested
 * gestures over the same area, and 45vh of a landscape phone is ~175px -- a viewport small enough
 * that most panels were scrolling for no reason. The panels size to their content and the PAGE
 * scrolls; only the patch notes, which are the entire changelog and unbounded by nature, keep an
 * inner scroller (below). */
html.mobileUI #lobbyTabPanels {
    height: auto;
    max-height: none;
    overflow: visible;
}

html.mobileUI #lobbyPanelPatchNotes {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Portrait gives each tab ~88px, where "Patch Notes" at the landscape size elides. Smaller type and
 * tighter padding keep all four labels whole rather than turning three of them into "Patch No...". */
@media (orientation: portrait) {
    html.mobileUI .lobbyTab {
        font-size: 13px;
        padding: 0 4px;
    }
}

html.mobileUI .lobbyProfileStats {
    grid-template-columns: 1fr repeat(3, 54px);
    font-size: 15px;
}

html.mobileUI .lobbyProfileLabel {
    min-width: 0px;
}