/* ==========================================================================
   Home panel as the in-game TAB scoreboard (Counter-Strike: Condition Zero)
   Loaded after styles.css. Remove its <link> in index.html to undo.

   Layout, top to bottom, all inside one dark see-through box:
   - title line: server name, IP, Play, LIVE
   - compact map strip: previous / current / next
   - "Connected players" line + refresh timer
   - scoreboard: column labels, then per team a header line
     ("Terrorists  5 players  78  60  31") and the players in team colour
   - spectators line
   ========================================================================== */

.game-info {
    --sb-bg: rgba(13, 13, 13, 0.82);
    --sb-line: rgba(255, 255, 255, 0.14);
    --sb-label: #c8c8b8;
    --sb-title: #ffffff;
    --sb-t: #ff4d40;
    --sb-t-text: #ff7a6e;
    --sb-ct: #99ccff;
    --sb-ct-text: #a9d2ff;
    --sb-spec: #d8d8d0;
    --sb-amber: #e8a63c;
    --sb-amber-line: rgba(232, 166, 60, 0.75);

    background: var(--sb-bg) !important;
    border: 1px solid var(--sb-amber-line) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--sb-label) !important;
    font-family: Verdana, Tahoma, Geneva, sans-serif !important;
    padding: 14px 18px 12px !important;
}

/* ---------- Title line: name left, IP / refresh / LIVE right ---------- */
.game-info .server-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sb-amber-line) !important;
    box-shadow: none !important;
    padding: 0 0 10px !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.game-info .server-header .game-icon {
    flex: 0 0 auto;
    width: 22px !important;
    height: 22px !important;
}

.game-info #server-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    color: #eeae00 !important;
    font-family: Tahoma, Verdana, Geneva, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}


.game-info .server-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* IP: click to copy */
.game-info .server-ip-copy {
    min-width: 0;
    margin: 0;
    padding: 4px 8px 4px 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(232, 166, 60, 0.45);
    border-radius: 3px;
    color: var(--sb-amber);
    font-family: Verdana, Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.game-info .server-ip-copy::after {
    /* small "copy" icon: two overlapping squares */
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 7px;
    border: 1.5px solid currentColor;
    border-radius: 1px;
    box-shadow: -3px 3px 0 -1.5px currentColor;
    vertical-align: 0;
    opacity: 0.8;
}

.game-info .server-ip-copy:hover,
.game-info .server-ip-copy:focus-visible {
    background: rgba(232, 166, 60, 0.14);
    border-color: var(--sb-amber);
    outline: none;
}

.game-info .server-ip-copy.is-copied {
    color: #7ddc7d;
    border-color: rgba(125, 220, 125, 0.7);
}

.game-info .server-ip-copy.is-copied::after {
    display: none;
}

/* Refresh: "↻ 27s" */
.game-info .server-meta #refresh-timer {
    margin: 0 !important;
    color: #8c8c80 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.game-info .server-meta #refresh-timer::before {
    content: "\21BB";
    margin-right: 4px;
}

.game-info .server-meta .live-indicator {
    margin: 0 !important;
    position: static !important;
}

/* ---------- Map strip: three small cards in one row ---------- */
.game-info .map-cycle-container {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 0 !important;
    margin: 0 0 4px !important;
    gap: 8px !important;
    align-items: stretch !important;
    border-bottom: 1px solid var(--sb-amber-line) !important;
}

.game-info .map-cycle-item,
.game-info .map-cycle-item.current-map,
.game-info .map-cycle-item.small {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 6px !important;
    transform: none !important;
}

.game-info .map-cycle-item.current-map {
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.game-info .map-cycle-item p {
    margin: 0 !important;
}

.game-info .map-cycle-item strong {
    color: var(--sb-label) !important;
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase;
    text-shadow: none !important;
}

.game-info .map-cycle-item.current-map strong {
    color: var(--sb-title) !important;
}

.game-info .map-cycle-image {
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    margin: 4px 0 !important;
}

.game-info #map-name,
.game-info #prev-map-name,
.game-info #next-map-name {
    color: var(--sb-title) !important;
    font-size: 11px !important;
    text-shadow: none !important;
}

.game-info .cs-hr {
    display: none !important;
}

/* ---------- The scoreboard table ---------- */
.game-info .players-container,
.game-info .scoreboard-table {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.game-info .scoreboard-table thead th {
    /* The labels live on the team lines now. The header row stays in the
       markup (zero height) only so the column widths keep working. */
    position: static !important;
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    overflow: hidden;
}

/* Rows: no stripes or tints; team shows in the text colour, like in game */
.game-info .scoreboard-table tbody tr,
.game-info .scoreboard-table tbody tr:nth-child(odd),
.game-info .scoreboard-table tbody tr:nth-child(even),
.game-info .scoreboard-table tbody tr.team-t,
.game-info .scoreboard-table tbody tr.team-ct {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

.game-info .scoreboard-table tbody tr.team-t:hover,
.game-info .scoreboard-table tbody tr.team-ct:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.game-info .scoreboard-table tbody td {
    border: 0 !important;
    box-shadow: none !important;
    font-family: Verdana, Tahoma, Geneva, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.game-info .team-t td:not(.vip-game-player),
.game-info .team-t .player-name:not(.vip-game-player) {
    color: var(--sb-t-text) !important;
}

.game-info .team-ct td:not(.vip-game-player),
.game-info .team-ct .player-name:not(.vip-game-player) {
    color: var(--sb-ct-text) !important;
}

.game-info .scoreboard-table .rank-slot {
    color: #8c8c80 !important;
    font-weight: 400 !important;
}

/* No VIP side bar: in game the scoreboard has no row borders */
#players-table-body tr.team-t:has(.vip-game-player),
#players-table-body tr.team-ct:has(.vip-game-player) {
    border-left: 0 !important;
}

/* Desktop: keep the map strip compact so the scoreboard stays the focus */
@media (min-width: 601px) {
    .game-info .map-cycle-image {
        width: 100% !important;
        height: 104px !important;
        object-fit: cover;
    }

    .game-info .map-cycle-item.current-map .map-cycle-image {
        height: 128px !important;
    }
}

/* ---------- Team header lines ---------- */
.game-info .scoreboard-table tbody tr.team-header,
.game-info .scoreboard-table tbody tr.team-header:hover {
    background: transparent !important;
}

.game-info .scoreboard-table tbody tr.team-header td {
    padding-top: 12px !important;
    padding-bottom: 3px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: visible;
}

.game-info .scoreboard-table tbody tr:first-child.team-header td {
    padding-top: 6px !important;
}

.game-info .scoreboard-table tbody tr.team-header-t td {
    color: var(--sb-t) !important;
    border-bottom: 1px solid var(--sb-t) !important;
}

.game-info .scoreboard-table tbody tr.team-header-ct td {
    color: var(--sb-ct) !important;
    border-bottom: 1px solid var(--sb-ct) !important;
}

.game-info tr.team-header .team-count {
    margin-left: 10px;
    font-size: 11px;
    font-weight: 400;
}

.game-info tr.team-header .team-count::before {
    content: "-";
    margin-right: 10px;
}

/* Column labels on the team lines, in yellow */
.game-info .scoreboard-table tbody tr.team-header td.team-col-label {
    color: var(--sb-amber) !important;
    font-size: 12px !important;
    cursor: default;
}

/* Desktop and tablet: keep the panel as tall as before; the player list
   takes up the extra room */
@media (min-width: 601px) {
    .game-info {
        display: flex !important;
        flex-direction: column;
    }

    .game-info > * {
        flex: 0 0 auto;
    }

    .game-info > .players-container,
    .game-info > .players-container.players-container--scroll {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

@media (min-width: 901px) {
    .game-info {
        height: 702px !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .game-info {
        height: 645px !important;
    }
}

.game-info tr.team-header .team-short {
    display: none;
}

/* Breathing room under each team header */
.game-info .scoreboard-table tbody tr.team-header + tr td {
    padding-top: 6px !important;
}

/* ---------- Spectators (left) + connected players (right) ---------- */
.game-info .spectators-container {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--sb-amber-line) !important;
    box-shadow: none !important;
    margin: 8px 0 0 !important;
    padding: 8px 2px 0 !important;
}

.game-info .spectators-container h3 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--sb-spec) !important;
    font-family: Verdana, Tahoma, Geneva, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: none !important;
    flex: 1 1 auto;
    min-width: 0;
}

.game-info .spectators-container h3 > span:first-child {
    color: var(--sb-amber) !important;
    font-weight: 700;
}

.game-info .connected-players-count {
    margin: 0 0 0 auto !important;
    color: var(--sb-amber);
    font-family: Verdana, Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.game-info .connected-players-count #current-players,
.game-info .connected-players-count #max-players {
    color: var(--sb-title) !important;
    font-size: inherit !important;
    text-shadow: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
    .game-info {
        padding: 10px 10px 10px !important;
        height: auto !important;
        max-height: none !important;
        flex-shrink: 0 !important;
    }

    .game-info .scoreboard-table thead th {
        font-size: 9.5px !important;
        letter-spacing: 0 !important;
    }

    .game-info #server-name {
        font-size: 12px !important;
    }

    .game-info .map-cycle-container {
        gap: 5px !important;
        padding: 8px 0 !important;
    }

    .game-info .map-cycle-item,
    .game-info .map-cycle-item.current-map,
    .game-info .map-cycle-item.small {
        padding: 4px !important;
    }

    .game-info .scoreboard-table tbody td {
        font-size: 11px !important;
    }

    .game-info .scoreboard-table tbody tr.team-header td {
        font-size: 12px !important;
    }

    .game-info tr.team-header .team-long {
        display: none;
    }

    .game-info tr.team-header .team-short {
        display: inline;
    }

    .game-info tr.team-header .team-count {
        margin-left: 8px;
    }
}


/* ---------- Separate scroll areas for T and CT ---------- */
.game-info .players-container.players-container--teams {
    overflow: hidden !important;
}

.game-info .team-panes[hidden],
.game-info .players-container table[hidden] {
    display: none !important;
}

.game-info .team-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.game-info .team-pane-head {
    flex: 0 0 auto;
    overflow: hidden;
    scrollbar-gutter: stable;   /* same gutter as the list below: columns line up */
    scrollbar-width: thin;
}

.game-info .team-pane-head::-webkit-scrollbar {
    width: 6px;
}

.game-info .team-pane-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 200, 184, 0.5) transparent;
}

.game-info .team-pane-scroll::-webkit-scrollbar {
    width: 6px;
}

.game-info .team-pane-scroll::-webkit-scrollbar-thumb {
    background: rgba(200, 200, 184, 0.5);
    border-radius: 3px;
}

.game-info .team-pane-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.game-info .team-pane table.scoreboard-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    table-layout: fixed !important;
}

/* No extra top padding on the first line of each pane */
.game-info .team-pane tbody tr.team-header:first-child td {
    padding-top: 6px !important;
}

/* Phones with a busy server: room for about 5 players per team */
@media (max-width: 600px) {
    .game-info .players-container.players-container--teams.players-container--scroll {
        height: 330px !important;
        max-height: 330px !important;
    }
}

/* Draw the team underline as an inset shadow so it moves with the pinned line */
.game-info .team-pane tr.team-header-t td {
    border-bottom: 0 !important;
    box-shadow: inset 0 -1px 0 var(--sb-t) !important;
}

.game-info .team-pane tr.team-header-ct td {
    border-bottom: 0 !important;
    box-shadow: inset 0 -1px 0 var(--sb-ct) !important;
}



/* Phones: readable player names (an older rule shrank them to 8px) */
@media (max-width: 600px) {
    .game-info .scoreboard-table .player-name,
    .game-info .scoreboard-table .player-name-cell {
        font-size: 11.5px !important;
    }

    .game-info .scoreboard-table .rank-slot {
        font-size: 9px !important;
    }
}

/* ==========================================================================
   Responsive columns and header, based on the PANEL width (container
   queries), not the window width: the panel is 308-780px wide depending on
   the screen. Columns drop in this order: Time, Ping, K/D. Name always stays.
   ========================================================================== */
.game-info {
    container-type: inline-size;
    container-name: scoreboard;
}

/* Start from all columns visible (older window-based rules hid some) */
.game-info .scoreboard-table th:nth-child(n+2),
.game-info .scoreboard-table td:nth-child(n+2) {
    display: table-cell !important;
}

@container scoreboard (width < 600px) {
    .game-info .scoreboard-table th:nth-child(6),
    .game-info .scoreboard-table td:nth-child(6) {
        display: none !important;
    }
}

@container scoreboard (width < 500px) {
    .game-info .scoreboard-table th:nth-child(5),
    .game-info .scoreboard-table td:nth-child(5) {
        display: none !important;
    }
}

@container scoreboard (width < 420px) {
    .game-info .scoreboard-table th:nth-child(4),
    .game-info .scoreboard-table td:nth-child(4) {
        display: none !important;
    }
}

/* Message rows (loading / no players) span all columns */
.game-info .scoreboard-table tr.scoreboard-message td {
    display: table-cell !important;
}

/* Team labels: full names when there is room, T / CT when narrow */
.game-info tr.team-header .team-long {
    display: inline !important;
}

.game-info tr.team-header .team-short {
    display: none !important;
}

@container scoreboard (width < 520px) {
    .game-info tr.team-header .team-long {
        display: none !important;
    }

    .game-info tr.team-header .team-short {
        display: inline !important;
    }
}


/* ---------- Bottom line always on one line ----------
   Spectators take the free space; names shrink with "…" and, if needed,
   the last ones collapse into "+N" (see fitSpectators in serverInformation.js). */
.game-info .spectators-container {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.game-info .spectators-container h3 {
    display: flex !important;
    align-items: center;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap;
    overflow: hidden;
}

.game-info .spectators-container h3 > span:first-child {
    flex: 0 0 auto;
    margin-right: 8px;
}

.game-info #spectators-names {
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.game-info #spectators-names .spec-item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

.game-info #spectators-names .spec-item[hidden] {
    display: none !important;
}

.game-info #spectators-names .spec-item + .spec-item::before {
    content: ",";
    margin: 0 8px 0 0;
    color: var(--sb-spec);
}

.game-info #spectators-names .spec-flag {
    flex: 0 0 auto;
    margin-right: 5px;
}

.game-info #spectators-names .spec-name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.game-info #spectators-names .spec-more {
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--sb-line);
    border-radius: 3px;
    color: var(--sb-amber);
    font-size: 11px;
    font-weight: 700;
    cursor: default;
}

.game-info #spectators-names .spec-more[hidden] {
    display: none !important;
}

.game-info .connected-players-count {
    flex: 0 0 auto !important;
    margin-left: 12px !important;
}

/* Narrow panels: drop the "Connected Players:" words, keep the count
   (the full label is in the tooltip) so the spectators get the room */
@container scoreboard (width < 520px) {
    .game-info .connected-players-count > span:first-child {
        display: none;
    }

    .game-info .connected-players-count::before {
        /* small "players" icon */
        content: "";
        display: inline-block;
        width: 13px;
        height: 13px;
        margin-right: 5px;
        vertical-align: -2px;
        background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23e8a63c'%3E%3Ccircle cx='6' cy='4.5' r='2.6'/%3E%3Cpath d='M1 14c0-3 2.2-5 5-5s5 2 5 5z'/%3E%3Ccircle cx='11.5' cy='5' r='2.1' opacity='.7'/%3E%3Cpath d='M12 9.2c1.9.4 3 1.9 3 4.8h-3.2c0-1.9-.5-3.5-1.6-4.6.6-.2 1.2-.3 1.8-.2z' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
    }
}

/* Older spectator styles add margins around every span; the one-line list
   handles its own spacing */
.game-info #spectators-names span,
.game-info #spectators-names .spec-item {
    margin: 0 !important;
}

.game-info #spectators-names .spec-flag {
    margin: 0 5px 0 0 !important;
}

.game-info #spectators-names .spec-item + .spec-item::before {
    margin: 0 8px 0 0 !important;
}

.game-info #spectators-names .spec-more {
    margin-left: 8px !important;
}

/* Narrow panels: wider Kills / Deaths columns so their labels fit; the name
   column gives up the room (long names already end in "…") */
@container scoreboard (width < 520px) {
    .game-info .scoreboard-table th:nth-child(2) {
        width: 46px !important;
    }

    .game-info .scoreboard-table th:nth-child(3) {
        width: 58px !important;
    }

    .game-info .scoreboard-table tbody tr.team-header td.team-col-label {
        font-size: 11.5px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        overflow: visible;
    }
}

/* ==========================================================================
   Header always on ONE line. As the panel narrows: first the copy icon goes,
   then the refresh icon, then the server name shortens with "…".
   ========================================================================== */
.game-info .server-header {
    flex-wrap: nowrap !important;
}

.game-info .server-header #server-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.game-info .server-header .server-meta {
    flex: 0 0 auto !important;
}

@container scoreboard (width < 680px) {
    .game-info .server-ip-copy::after {
        display: none !important;
    }

    .game-info .server-ip-copy {
        padding: 4px 8px !important;
    }
}

@container scoreboard (width < 640px) {
    .game-info .server-meta #refresh-timer::before {
        display: none !important;
    }

    .game-info .server-header .server-meta {
        gap: 9px !important;
    }
}

/* Phones: more compact badges so the name keeps some room */
@container scoreboard (width < 420px) {
    .game-info .server-header {
        gap: 8px !important;
    }

    .game-info .server-header .game-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .game-info .server-ip-copy {
        padding: 3px 6px !important;
        font-size: 11px !important;
    }

    .game-info .server-header .server-meta {
        gap: 7px !important;
    }

    .game-info .server-meta #refresh-timer {
        font-size: 10px !important;
    }

    .game-info .server-meta .live-indicator {
        padding: 2px 5px !important;
        font-size: 9px !important;
    }
}

/* Very small phones: the countdown goes too, so the name keeps a few letters */
@container scoreboard (width < 320px) {
    .game-info .server-meta #refresh-timer {
        display: none !important;
    }
}

/* Every part of the panel always spans its full width (never shrink-to-fit),
   whatever older layout rules say about alignment */
.game-info {
    align-items: stretch !important;
}

.game-info > .server-header,
.game-info > .map-cycle-container,
.game-info > .players-container,
.game-info > .spectators-container {
    align-self: stretch !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
}

.game-info .players-container .team-panes {
    display: block !important;
}

/* Team areas always span the full width. An older rule for windows
   501-900px wide sets ".players-container > div" to width: 50%; this
   overrides it (that is what squashed the tables at those sizes). */
.game-info .players-container > .team-panes,
.game-info .team-panes,
.game-info .team-pane,
.game-info .team-pane-head,
.game-info .team-pane-scroll {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
}

.game-info .players-container > .team-panes {
    flex: none !important;
}

/* Space between the T block and the CT block */
.game-info .team-pane + .team-pane {
    margin-top: 10px;
}

/* Narrow header: after the copy and refresh icons, the IP goes before the
   server name has to shorten (the name still joins through Steam) */
@container scoreboard (width < 620px) {
    .game-info .server-header .server-ip-copy {
        display: none !important;
    }
}

/* ==========================================================================
   Phones: the page does not scroll, so the panel must leave room for the
   menu and credit below it. The panel keeps its natural height and only
   shrinks when the screen runs out of room.
   Header, maps and the spectators line keep their size; the player area
   takes what is left and the T / CT lists scroll inside it.
   ========================================================================== */
@media (max-width: 600px) {
    .game-info {
        display: flex !important;
        flex-direction: column !important;
        /* Natural height, but shrink when the screen is full, so the menu
           and credit (which cannot shrink) always stay visible. */
        flex: 0 1 auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .game-info > * {
        flex: 0 0 auto;
    }

    .game-info > .players-container,
    .game-info > .players-container.players-container--scroll,
    .game-info .players-container.players-container--teams.players-container--scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* Short phone screens: smaller map pictures so more players fit */
@media (max-width: 600px) and (max-height: 720px) {
    .game-info .map-cycle-image,
    .game-info .map-cycle-item .map-cycle-image,
    .game-info .map-cycle-item.small .map-cycle-image,
    .game-info .map-cycle-item.current-map .map-cycle-image,
    .game-info .map-cycle-container .map-cycle-item .map-cycle-image {
        max-height: 42px !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        height: 42px !important;
        object-fit: cover;
    }

    .game-info .map-cycle-container {
        padding: 6px 0 !important;
    }
}