rather than the shell header so leagues that strip the generic top bar still get a functional control row. Max-width aligns with .live-grid below. */ .live-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 14px 0; max-width: 2400px; margin: 0 auto; } .live-grid { display: grid; /* auto-fit (not auto-fill) collapses empty columns so one tile grows to fill the row instead of squatting at the min-width. Min is the smallest readable size; columns otherwise share the available width equally. The min is exposed as --tile-min-w so the header slider can resize all tiles at once; live.js writes the var on :root from localStorage. */ grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-w, 360px), 1fr)); gap: 14px; padding: 14px; max-width: 2400px; margin: 0 auto; } .tile { background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; /* Cap a single tile so it doesn't balloon on a wide monitor when only one server is connected. The tile centers within its column via the auto margins. */ max-width: 960px; margin-inline: auto; width: 100%; /* Container-query context so the reaction bar can collapse when the tile itself is narrow (mobile, or many-tiles grid where each column shrinks). Inline-size only — we don't constrain by height. */ container-type: inline-size; container-name: tile; } .tile.stale { opacity: 0.6; } .tile header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; line-height: 1.2; } /* Wide tiles: each .head-row uses display:contents so its children flatten into the header's single flex line. CSS `order` on .score / .shot-btn / .focus-btn (paired with display:none on .spacer-main) reproduces the original sequence — name, meta, count, watchers, tickrate, buffer, [spacer-chips: flex 1], score, shot, focus. The narrow override below undoes both, so each .head-row becomes its own stacked flex row. */ .tile header .head-row { display: contents; } .tile header .spacer-main { display: none; } .tile header .spacer-chips { flex: 1; order: 50; } .tile header .score { order: 90; } .tile header .shot-btn { order: 100; } .tile header .focus-btn { order: 101; } @container tile (max-width: 520px) { .tile header .head-row { display: flex; flex: 1 1 100%; align-items: baseline; gap: 8px; min-width: 0; } .tile header .head-row.main { flex-wrap: nowrap; } .tile header .head-row.main .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .tile header .head-row.chips { flex-wrap: wrap; } /* Reset orders inside each row so DOM order rules each row independently: row 1 = name, meta, [spacer-main: flex 1], score (score hard-right); row 2 = count, watchers, tickrate, buffer, [spacer-chips: flex 1], shot, focus (buttons hard-right). */ .tile header .score, .tile header .shot-btn, .tile header .focus-btn, .tile header .spacer-chips { order: 0; } .tile header .spacer-main { display: block; flex: 1; } } .tile .name { font-weight: 700; color: var(--text); } .tile .meta { color: var(--muted); font-size: 12px; } .tile .players-count { color: var(--muted); font-size: 12px; } /* Watcher count: eye-icon glyph + integer. Same muted styling as the sibling player count, with tabular-nums so the value doesn't dance when ticking up/down. */ .tile .watchers-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .tile .tickrate { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } /* Buffer-fill ring: visible only while a tile is in warmup (renderTs has not yet caught up to the oldest buffered frame). Fixed-size SVG glyph instead of percentage text so the header doesn't reflow as the value ticks. Gold to read as a transient "loading" cue, distinct from the muted always-on tickrate. */ .tile .buffer-fill { display: none; width: 14px; height: 14px; align-self: center; } .tile .buffer-fill svg { width: 100%; height: 100%; display: block; /* Start the arc at 12 o'clock and fill clockwise as stroke-dashoffset drops from circumference to 0. */ transform: rotate(-90deg); } .tile .buffer-fill svg .bg { fill: none; stroke: color-mix(in srgb, #f5c542 25%, transparent); stroke-width: 2.25; } .tile .buffer-fill svg .fg { fill: none; stroke: #f5c542; stroke-width: 2.25; stroke-linecap: round; transition: stroke-dashoffset 120ms linear; } .tile.buffering .buffer-fill { display: inline-block; } body.live.fullscreen .tile .buffer-fill { display: none; } /* Render-option toggles in the header. A single flip applies to every tile because the renderer reads state.* each frame — no per-tile plumbing. */ .live-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; /* Allow the controls row to shrink and wrap freely inside the toolbar's flex parent — without min-width: 0 it would refuse to wrap below its intrinsic content width and push the status-bar off-screen on phones. */ min-width: 0; } /* Each control unit (toggle/slider/select/button) is treated as an indivisible chip — wrapping happens between chips, not in the middle of "follow puck" or "tile size 360". */ .live-controls > * { white-space: nowrap; } .live-controls .toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: pointer; user-select: none; } .live-controls .toggle input { margin: 0; cursor: pointer; accent-color: var(--accent); } /* Tile-size slider. Lives next to the toggles in .live-controls and writes --tile-min-w via live.js. Hidden in fullscreen because that mode computes its own column count (recomputeFsCols) and the slider would conflict. */ .live-controls .tile-size { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; user-select: none; } .live-controls .tile-size input[type="range"] { cursor: pointer; accent-color: var(--accent); /* Was a fixed 160px which wrapped awkwardly on narrow viewports. Clamp gives the slider a sensible width on desktop without forcing a row break on a phone. */ width: clamp(96px, 30vw, 160px); min-width: 0; } /* Buffer-size dropdown: jitter-absorption window for live playback. Mirrors .tile-size visually so the toolbar stays uniform; the