/* Serpentine — online lobby styles (js/lobby.js builds the DOM). Original design.
 * Sits on top of style.css: reuses its tokens (--panel, --line, --muted, --green…), the .overlay /
 * .dialog shell, .btn-primary / .btn-secondary / .btn-chip, .set-list / .set-row and input.switch.
 * Everything here is scoped under #lobby and namespaced .lby-*.
 *
 * Layouts: desktop (fixed-height dialog, scrolling body) · phone portrait (<= 520 px wide: full-screen
 * sheet, two-line server rows) · phone landscape (<= 520 px tall: one-row header, two-column panes).
 */

#lobby {
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(8, 11, 22, 0.72), rgba(3, 4, 9, 0.93));
  overflow: hidden;
}

#lobby .lby-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 780px);
  height: min(690px, 100%);
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  outline: none;
}

/* ---- head ------------------------------------------------------------------ */
#lobby .lby-title {
  flex: none;
  margin: 0;
  padding: 20px 56px 4px;
}
#lobby .lby-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0 0 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-2);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
#lobby .lby-close:hover { background: rgba(255, 255, 255, 0.13); color: #fff; border-color: rgba(255, 255, 255, 0.22); }
#lobby .lby-close:active { transform: scale(0.92); }
#lobby .lby-close:focus-visible { outline: 2px solid rgba(141, 250, 166, 0.7); outline-offset: 2px; }

/* ---- server status line ------------------------------------------------------ */
#lobby .lby-status {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 22px;
  color: var(--muted);
  font-size: 13px;
}
#lobby .lby-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lobby .lby-status-text b { color: var(--ink-2); font-weight: 600; }
#lobby .lby-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}
#lobby .lby-status[data-state="ok"] .lby-dot { background: var(--green); box-shadow: 0 0 8px rgba(88, 240, 122, 0.8); }
#lobby .lby-status[data-state="looking"] .lby-dot,
#lobby .lby-status[data-state="retrying"] .lby-dot { background: var(--gold); box-shadow: 0 0 8px rgba(255, 210, 63, 0.7); animation: lby-blink 1s ease-in-out infinite; }
#lobby .lby-status[data-state="down"] .lby-dot { background: var(--red); box-shadow: 0 0 8px rgba(255, 59, 92, 0.7); }
#lobby .lby-status-btn { flex: none; min-height: 26px; padding: 0 11px; font-size: 12px; }
@keyframes lby-blink { 50% { opacity: 0.35; } }

/* ---- tabs (segmented control) -------------------------------------------------- */
#lobby .lby-tabs {
  flex: none;
  align-self: center;
  display: flex;
  gap: 4px;
  margin: 8px 16px 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
#lobby .lby-tab {
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}
#lobby .lby-tab:hover { color: #fff; }
#lobby .lby-tab.is-on { background: rgba(255, 255, 255, 0.13); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
#lobby .lby-tab:focus-visible { outline: 2px solid rgba(141, 250, 166, 0.7); outline-offset: 1px; }

/* ---- scrolling body -------------------------------------------------------------- */
#lobby .lby-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 6px 22px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
#lobby .lby-body::-webkit-scrollbar { width: 8px; }
#lobby .lby-body::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(255, 255, 255, 0.14); }
#lobby .lby-body::-webkit-scrollbar-track { background: transparent; }

/* ---- shared field bits --------------------------------------------------------------- */
#lobby .lby-label {
  display: block;
  margin: 0 0 6px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#lobby .lby-inline { display: flex; align-items: center; gap: 8px; }
#lobby .lby-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(8, 11, 20, 0.72);
  color: #fff;
  font: 600 15px var(--font);
  outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-user-select: text;
  user-select: text;
}
#lobby .lby-input::placeholder { color: #55607e; font-weight: 500; }
#lobby .lby-input:hover { border-color: rgba(255, 255, 255, 0.2); }
#lobby .lby-input:focus { border-color: rgba(88, 240, 122, 0.7); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(88, 240, 122, 0.14); }
#lobby .lby-input:disabled { opacity: 0.45; }
#lobby .lby-input[readonly] { color: var(--ink-2); background: rgba(255, 255, 255, 0.04); box-shadow: none; }
#lobby .lby-field-msg { display: none; margin: 6px 4px 0; color: #ff8a9c; font-size: 12.5px; line-height: 1.4; }
#lobby .lby-field-msg.is-on { display: block; }
#lobby .lby-inline > .btn-secondary { flex: none; min-height: 42px; }

/* ---- server address editor + how-to ---------------------------------------------------- */
#lobby .lby-server {
  margin: 6px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}
#lobby .lby-how { margin-bottom: 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; -webkit-user-select: text; user-select: text; }
#lobby .lby-how p { margin: 0 0 6px; }
#lobby .lby-how b { color: #fff; }
#lobby .lby-how ol { margin: 0; padding-left: 22px; }
#lobby .lby-how li { margin: 2px 0; }
#lobby .lby-how .lby-how-direct { margin: 6px 0 0; color: var(--muted); }
#lobby .lby-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--green-hi);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#lobby .lby-link:hover { color: #fff; }
#lobby .lby-link:focus-visible { outline: 2px solid rgba(141, 250, 166, 0.7); outline-offset: 2px; border-radius: 4px; }
#lobby .lby-how code {
  display: inline-block;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--green-hi);
  font: 12.5px/1.55 var(--mono);
  white-space: nowrap;
}

/* ---- error card --------------------------------------------------------------------------- */
#lobby .lby-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 12px;
  padding: 10px 10px 10px 14px;
  border: 1px solid rgba(255, 59, 92, 0.42);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 59, 92, 0.14), rgba(255, 59, 92, 0.07));
  animation: ui-rise-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#lobby .lby-error-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font: 900 15px var(--font-round);
}
#lobby .lby-error-text { flex: 1 1 auto; min-width: 0; color: #ffd9df; font-size: 13.5px; line-height: 1.45; -webkit-user-select: text; user-select: text; }
#lobby .lby-error-text b { display: block; color: #fff; font-size: 14px; }
#lobby .lby-error-actions { flex: none; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#lobby .lby-error-actions .btn-chip { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
#lobby .lby-error-x {
  flex: none;
  align-self: flex-start;
  width: 26px;
  height: 26px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffb3bf;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
#lobby .lby-error-x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
#lobby .lby-error-x:focus-visible { outline: 2px solid rgba(141, 250, 166, 0.7); }

/* ---- servers pane ---------------------------------------------------------------------------- */
#lobby .lby-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  align-items: start;
  gap: 22px;
  padding: 8px 0 12px;
}
#lobby .lby-hero { display: flex; flex-direction: column; gap: 9px; }
#lobby .lby-quick { width: 100%; min-height: 56px; font-size: 23px; margin-bottom: 4px; }
#lobby .lby-hero-sub { padding: 0 6px; color: var(--muted); font-size: 12.5px; line-height: 1.45; text-align: center; }
#lobby .lby-code-input { letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--mono); font-size: 16px; }
#lobby .lby-code-input::placeholder { letter-spacing: 0.18em; }

#lobby .lby-list-head {
  position: sticky;
  top: -6px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -4px;
  padding: 10px 4px 8px;
  background: linear-gradient(180deg, rgb(13, 17, 30) 82%, rgba(13, 17, 30, 0));
}
#lobby .lby-list-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#lobby .lby-list-count:empty { display: none; }
#lobby .lby-list-spin {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--green);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#lobby .lby-list-head.is-fetching .lby-list-spin { opacity: 1; animation: lby-spin 0.7s linear infinite; }
@keyframes lby-spin { to { transform: rotate(360deg); } }
#lobby .lby-refresh { margin-left: auto; min-height: 28px; font-size: 12px; }

#lobby .lby-list { display: flex; flex-direction: column; gap: 6px; }
#lobby .lby-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 192px 74px;   /* fixed: bars and tags line up row to row */
  grid-template-areas: "main fill tags join";
  align-items: center;
  gap: 4px 14px;
  min-height: 58px;
  padding: 8px 8px 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  transition: background 0.12s ease, border-color 0.12s ease;
}
#lobby .lby-room:hover { background: rgba(255, 255, 255, 0.065); border-color: rgba(255, 255, 255, 0.1); }
#lobby .lby-room-main { grid-area: main; min-width: 0; }
#lobby .lby-room-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
#lobby .lby-room-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 15px; font-weight: 700; }
#lobby .lby-room-host { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
#lobby .lby-room-host b { color: var(--ink-2); font-weight: 600; }
#lobby .lby-room-host b.anon { font-style: italic; font-weight: 500; color: var(--muted); }
#lobby .lby-room.is-off .lby-room-nm { color: var(--ink-2); }
#lobby .lby-room.is-off .lby-fill,
#lobby .lby-room.is-off .lby-tags { opacity: 0.6; }

#lobby .lby-fill { grid-area: fill; display: flex; align-items: center; gap: 8px; min-width: 0; }
#lobby .lby-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#lobby .lby-bar i { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--green-lo), var(--green)); transition: width 0.4s ease; }
#lobby .lby-bar[data-level="busy"] i { background: linear-gradient(90deg, #d99a18, var(--gold)); }
#lobby .lby-bar[data-level="full"] i { background: linear-gradient(90deg, #c4213f, var(--red)); }
#lobby .lby-fill-count { flex: none; min-width: 46px; color: #fff; font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

#lobby .lby-tags { grid-area: tags; display: flex; gap: 5px; min-width: 0; overflow: hidden; }
#lobby .lby-tag {
  flex: none;
  padding: 2px 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink-2);
  font-size: 11.5px;
  white-space: nowrap;
}
#lobby .lby-tag[data-diff="easy"] { color: #9df5b3; border-color: rgba(88, 240, 122, 0.22); }
#lobby .lby-tag[data-diff="hard"] { color: #ff9aa9; border-color: rgba(255, 59, 92, 0.3); }

#lobby .lby-badge {
  flex: none;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
#lobby .lby-badge-warn { border-color: rgba(255, 210, 63, 0.4); background: rgba(255, 210, 63, 0.13); color: var(--gold); }
#lobby .lby-badge-host { border-color: rgba(88, 240, 122, 0.45); background: rgba(88, 240, 122, 0.14); color: var(--green-hi); }

#lobby .lby-join { grid-area: join; min-width: 0; padding: 0 12px; border-color: rgba(88, 240, 122, 0.35); color: var(--green-hi); font-weight: 700; }
#lobby .lby-join:hover { background: rgba(88, 240, 122, 0.16); border-color: rgba(88, 240, 122, 0.6); color: #fff; }
#lobby .lby-join:disabled { border-color: var(--line); color: var(--muted); }

#lobby .lby-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 16px 12px;
  text-align: center;
}
#lobby .lby-empty-title { color: #fff; font: 800 17px var(--font-round); }
#lobby .lby-empty-sub { max-width: 430px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
#lobby .lby-empty .btn-secondary { margin-top: 6px; }

/* ---- the little slithering snake (loader / empty-state art) ------------------------------------ */
#lobby .lby-snake { display: flex; align-items: center; justify-content: center; height: 40px; padding-left: 6px; }
#lobby .lby-snake i {
  --c: #58f07a;
  display: block;
  width: 14px;
  height: 14px;
  margin-left: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.75), var(--c) 46%, rgba(0, 0, 0, 0.25) 130%);
  box-shadow: 0 0 10px var(--c);
  animation: lby-slither 1.5s ease-in-out infinite;
}
#lobby .lby-snake i:nth-child(1) { --c: #b77cff; width: 9px; height: 9px; animation-delay: -0.9s; }
#lobby .lby-snake i:nth-child(2) { --c: #6f8cff; width: 11px; height: 11px; animation-delay: -0.75s; }
#lobby .lby-snake i:nth-child(3) { --c: #3a9cff; width: 13px; height: 13px; animation-delay: -0.6s; }
#lobby .lby-snake i:nth-child(4) { --c: #4fd8e8; animation-delay: -0.45s; }
#lobby .lby-snake i:nth-child(5) { --c: #7dffcf; animation-delay: -0.3s; }
#lobby .lby-snake i:nth-child(6) { --c: #58f07a; width: 15px; height: 15px; animation-delay: -0.15s; }
#lobby .lby-snake i:nth-child(7) { --c: #9dff3a; position: relative; z-index: 1; width: 19px; height: 19px; animation-delay: 0s; }
/* two eyes on the head */
#lobby .lby-snake i:nth-child(7)::before,
#lobby .lby-snake i:nth-child(7)::after {
  content: "";
  position: absolute;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset -1.5px 0 0 1.2px #111;
}
#lobby .lby-snake i:nth-child(7)::before { top: 2px; }
#lobby .lby-snake i:nth-child(7)::after { bottom: 2px; }
@keyframes lby-slither { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-5px); } }
#lobby .lby-empty:not(.is-loading) .lby-snake i,
#lobby .lby-snake-still i { animation-play-state: paused; }
#lobby .lby-pane-busy .lby-snake,
#lobby .lby-pane-unsupported .lby-snake { height: 64px; transform: scale(1.7); }
#lobby .lby-empty .lby-snake { height: 52px; transform: scale(1.3); }
#lobby .lby-snake-sm { height: 22px; transform: scale(0.62); transform-origin: left center; margin-right: -30px; }

/* ---- create pane -------------------------------------------------------------------------------- */
#lobby .lby-create { max-width: 560px; margin: 0 auto; padding-top: 8px; }
#lobby .set-list { display: flex; flex-direction: column; gap: 4px; }
#lobby .set-row > span, #lobby .set-row > label { flex: 0 1 auto; }
#lobby .lby-row-num { cursor: default; }
#lobby .lby-row-num > label { cursor: pointer; }
#lobby .lby-row-text .lby-input { flex: 0 1 300px; height: 38px; font-size: 14px; }
#lobby .lby-num { flex: 0 1 300px; display: flex; align-items: center; gap: 10px; min-width: 0; }
#lobby .lby-number {
  flex: none;
  width: 62px;
  height: 36px;
  padding: 0 4px;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
#lobby .lby-number::-webkit-outer-spin-button,
#lobby .lby-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#lobby .lby-unit { flex: none; min-width: 42px; color: var(--muted); font-size: 12.5px; }
#lobby .lby-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 70px;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  --fill: 50%;
}
#lobby .lby-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-lo) 0, var(--green) var(--fill), rgba(255, 255, 255, 0.13) var(--fill));
}
#lobby .lby-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(88, 240, 122, 0.3);
  transition: box-shadow 0.15s ease, transform 0.08s ease;
}
#lobby .lby-range:hover::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(88, 240, 122, 0.18); }
#lobby .lby-range:active::-webkit-slider-thumb { transform: scale(1.12); }
#lobby .lby-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.13); }
#lobby .lby-range::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--green-lo), var(--green)); }
#lobby .lby-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
#lobby .lby-create-note { min-height: 3em; margin: 10px 8px 12px; }
#lobby .lby-create-note.is-bad { color: #ff8a9c; }
#lobby .lby-create-go { min-width: 220px; }

/* ---- direct invite pane --------------------------------------------------------------------------- */
#lobby .lby-direct-intro { max-width: 600px; margin: 8px auto 14px; color: var(--muted); font-size: 13.5px; line-height: 1.5; text-align: center; }
#lobby .lby-direct-back { margin: 6px 0 0; }
#lobby .lby-direct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); justify-content: center; gap: 12px; align-items: start; }
/* inviting to a server that is already running: the host card alone, centred */
#lobby .lby-dialog[data-tab="direct"] .lby-direct-back:not(.hidden) ~ .lby-direct-cards { grid-template-columns: minmax(260px, 440px); }
#lobby .lby-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}
#lobby .lby-card-title { color: #fff; font: 800 16px var(--font-round); }
#lobby .lby-card-note { margin-top: -6px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
#lobby .lby-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; margin: 0; transition: opacity 0.2s ease; }
#lobby .lby-step.is-off { opacity: 0.38; pointer-events: none; }
#lobby .lby-step-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}
#lobby .lby-step-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
#lobby .lby-codebox { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 8px; width: 100%; }
#lobby .lby-codebox .lby-label { grid-column: 1 / -1; margin-bottom: 0; }
#lobby .lby-codebox .lby-textarea:last-child { grid-column: 1 / -1; }
#lobby .lby-textarea {
  display: block;
  width: 100%;
  height: auto;
  min-height: 62px;
  padding: 8px 10px;
  font: 11.5px/1.4 var(--mono);
  resize: none;
  word-break: break-all;
}
#lobby .lby-wait { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* ---- busy / room / unsupported: centred single-column views ------------------------------------------ */
#lobby .lby-pane-busy,
#lobby .lby-pane-room,
#lobby .lby-pane-unsupported {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 100%;
  padding: 12px 0;
  text-align: center;
}
#lobby .lby-busy-title { max-width: 100%; color: #fff; font: 900 22px var(--font-round); overflow-wrap: anywhere; }
#lobby .lby-busy-sub { max-width: 440px; color: var(--muted); font-size: 14px; line-height: 1.55; }
#lobby .lby-pane-busy .btn-secondary,
#lobby .lby-pane-unsupported .btn-primary { margin-top: 10px; }

#lobby .lby-room-kicker { font-size: 12px; }
#lobby .lby-room-name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 100%; color: #fff; font: 900 clamp(22px, 4.5vw, 30px) var(--font-round); overflow-wrap: anywhere; text-shadow: 0 0 18px rgba(255, 255, 255, 0.2); }
#lobby .lby-room-meta { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }
#lobby .lby-room-banner {
  padding: 7px 16px;
  border: 1px solid rgba(255, 210, 63, 0.4);
  border-radius: 999px;
  background: rgba(255, 210, 63, 0.12);
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}
#lobby .lby-invite {
  width: min(100%, 520px);
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}
#lobby .lby-invite .lby-input { font: 13px var(--mono); }
#lobby .lby-invite-note { margin: 8px 4px 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
#lobby .btn-secondary.is-done { border-color: rgba(88, 240, 122, 0.55); color: var(--green-hi); }
#lobby .lby-room-actions { margin-top: 10px; align-items: center; }
#lobby .lby-danger:hover { background: rgba(255, 90, 110, 0.18); border-color: rgba(255, 90, 110, 0.45); color: #fff; }
#lobby .lby-danger.is-armed { background: rgba(255, 59, 92, 0.3); border-color: rgba(255, 90, 110, 0.7); color: #fff; }

/* =========================================================================================
   Phone portrait: full-screen sheet, stacked top block, two-line server rows
   ========================================================================================= */
@media (max-width: 520px) {
  #lobby { padding: calc(8px + var(--st)) calc(8px + var(--sr)) calc(8px + var(--sb)) calc(8px + var(--sl)); }
  #lobby .lby-dialog { width: 100%; height: 100%; border-radius: 18px; }
  #lobby .lby-title { padding: 15px 52px 2px; font-size: 20px; }
  #lobby .lby-close { top: 9px; right: 9px; }
  #lobby .lby-status { padding: 0 12px; font-size: 12.5px; }
  #lobby .lby-status-extra { display: none; }
  #lobby .lby-tabs { margin: 6px 10px 2px; max-width: calc(100% - 20px); }
  #lobby .lby-tab { min-height: 36px; padding: 0 13px; font-size: 13px; }
  #lobby .lby-body { padding: 6px 12px 14px; }
  #lobby .lby-top { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 6px; }
  #lobby .lby-quick { min-height: 54px; }
  #lobby .lby-input { font-size: 16px; }              /* (no zoom-on-focus on iOS) */
  #lobby .lby-textarea[readonly] { font-size: 12px; }
  #lobby .lby-room {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    grid-template-areas: "main main join" "fill tags tags";
    gap: 7px 10px;
    padding: 9px 9px 10px 12px;
  }
  #lobby .lby-fill-count { min-width: 38px; font-size: 12.5px; }
  #lobby .lby-tag { padding: 1px 7px; font-size: 11px; }
  #lobby .lby-join { min-height: 38px; min-width: 68px; padding: 0 16px; }
  #lobby .lby-error { flex-wrap: wrap; padding-right: 8px; }
  #lobby .lby-error-text { flex-basis: calc(100% - 80px); }
  #lobby .lby-error-actions { flex-basis: 100%; justify-content: flex-start; padding-left: 36px; order: 3; }
  #lobby .lby-row-num { flex-wrap: wrap; row-gap: 0; }
  #lobby .lby-row-num > label { flex-basis: 100%; }
  #lobby .lby-num { flex: 1 1 100%; }
  #lobby .lby-row-text { flex-wrap: wrap; row-gap: 4px; }
  #lobby .lby-row-text .lby-input { flex: 1 1 100%; height: 42px; }
  #lobby .lby-create-go { width: 100%; }
  #lobby .lby-busy-title { font-size: 20px; }
  #lobby .lby-invite .lby-inline { flex-wrap: wrap; }
  #lobby .lby-invite .lby-inline > .btn-secondary { flex: 1 1 100%; }
  #lobby .lby-room-actions { width: 100%; }
}

/* =========================================================================================
   Phone landscape: the title gives way to a one-row header (tabs · status · close) and the
   panes go two-column so the important things fit in ~300 px of height
   ========================================================================================= */
@media (max-height: 520px) and (min-width: 521px) {
  #lobby { padding: calc(6px + var(--st)) calc(8px + var(--sr)) calc(6px + var(--sb)) calc(8px + var(--sl)); }
  #lobby .lby-dialog {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: min(100%, 900px);
    height: 100%;
    border-radius: 16px;
  }
  /* still the dialog's accessible name, just not painted */
  #lobby .lby-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #lobby .lby-close { top: 7px; right: 8px; width: 32px; height: 32px; font-size: 21px; }
  #lobby .lby-tabs { grid-column: 1; grid-row: 1; align-self: center; margin: 6px 0 4px 10px; padding: 3px; }
  #lobby .lby-tab { min-height: 32px; padding: 0 13px; font-size: 13px; }
  #lobby .lby-status { grid-column: 2; grid-row: 1; justify-content: flex-end; min-height: 46px; padding: 0 50px 0 12px; font-size: 12.5px; }
  #lobby .lby-dialog:not([data-view="main"]) .lby-status { grid-column: 1 / -1; justify-content: center; padding-left: 50px; }
  #lobby .lby-body { grid-column: 1 / -1; grid-row: 2; padding: 2px 14px 10px; }

  #lobby .lby-pane-servers { display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  #lobby .lby-top { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 0; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 6px 0 0; }
  #lobby .lby-quick { min-height: 48px; font-size: 20px; margin-bottom: 2px; }
  #lobby .lby-hero { gap: 6px; }
  #lobby .lby-hero-sub { font-size: 12px; line-height: 1.35; }
  #lobby .lby-input { height: 38px; }
  #lobby .lby-inline > .btn-secondary { min-height: 38px; }
  #lobby .lby-list-head, #lobby .lby-list, #lobby .lby-empty { grid-column: 2; }
  #lobby .lby-list-head { top: -2px; padding-top: 6px; }
  #lobby .lby-empty { padding: 8px 8px 4px; gap: 5px; }
  #lobby .lby-empty .lby-snake { height: 34px; transform: none; }
  #lobby .lby-pane-busy .lby-snake { height: 44px; transform: scale(1.3); }
  #lobby .lby-room { grid-template-columns: minmax(0, 1fr) 96px 180px 62px; gap: 4px 10px; min-height: 50px; padding: 6px 6px 6px 12px; }
  #lobby .lby-fill-count { min-width: 40px; }
  #lobby .lby-tag { padding: 1px 7px; font-size: 11px; }
  #lobby .lby-join { min-height: 36px; }

  #lobby .lby-server { margin: 2px 0 8px; padding: 10px 14px; }
  #lobby .lby-how { margin-bottom: 8px; font-size: 12.5px; line-height: 1.45; }
  #lobby .lby-error { margin: 2px 0 8px; padding: 7px 8px 7px 12px; }

  #lobby .lby-create { max-width: none; padding-top: 2px; }
  #lobby .set-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 0; }
  #lobby .set-row { min-height: 40px; padding-top: 2px; padding-bottom: 2px; font-size: 14px; }
  #lobby .set-row select { min-width: 118px; }
  #lobby .lby-row-text { grid-column: 1 / -1; }
  #lobby .lby-row-text .lby-input { flex: 1 1 auto; }
  #lobby .lby-num { flex: 1 1 150px; gap: 8px; }
  #lobby .lby-unit { display: none; }
  #lobby .lby-create-note { min-height: 0; margin: 6px 8px 8px; }
  #lobby .lby-create .dialog-actions { margin-top: 0; }
  #lobby .lby-create-go { min-height: 42px; }

  #lobby .lby-direct-intro { margin: 2px auto 8px; font-size: 12.5px; }
  #lobby .lby-card { gap: 8px; padding: 10px 12px 12px; }
  #lobby .lby-textarea { min-height: 46px; }

  #lobby .lby-pane-busy, #lobby .lby-pane-room, #lobby .lby-pane-unsupported { gap: 7px; padding: 4px 0; }
  #lobby .lby-busy-title { font-size: 19px; }
  #lobby .lby-busy-sub { font-size: 13px; line-height: 1.45; }
  #lobby .lby-pane-busy .btn-secondary, #lobby .lby-pane-unsupported .btn-primary { margin-top: 4px; }
  #lobby .lby-room-name { font-size: 22px; }
  #lobby .lby-invite { margin-top: 2px; padding: 9px 12px; }
  #lobby .lby-invite-note { margin-top: 5px; }
  #lobby .lby-room-actions { margin-top: 2px; }
  #lobby .lby-pane-unsupported .lby-snake, #lobby .lby-pane-room .lby-snake { display: none; }
}

/* small landscape phones (e.g. 568 x 320): tighter header, two-line rows in a narrower list */
@media (max-height: 520px) and (min-width: 521px) and (max-width: 720px) {
  #lobby .lby-tabs { gap: 2px; }
  #lobby .lby-tab { padding: 0 9px; font-size: 12.5px; }
  #lobby .lby-status { padding-left: 8px; gap: 6px; }
  #lobby .lby-status-pre, #lobby .lby-status-extra { display: none; }
  #lobby .lby-pane-servers { grid-template-columns: 184px minmax(0, 1fr); column-gap: 12px; }
  #lobby .lby-hero-sub { display: none; }
  #lobby .set-list { grid-template-columns: minmax(0, 1fr); }
  #lobby .lby-room {
    grid-template-columns: 78px minmax(0, 1fr) auto;
    grid-template-areas: "main main join" "fill tags tags";
    gap: 5px 8px;
    padding: 7px 7px 8px 10px;
  }
  #lobby .lby-fill-count { min-width: 34px; font-size: 12px; }
  #lobby .lby-tags { gap: 4px; }
  #lobby .lby-tag { padding: 1px 6px; font-size: 10.5px; }
}

/* very narrow portrait phones (320 px) */
@media (max-width: 360px) {
  #lobby .lby-tabs { gap: 2px; padding: 3px; }
  #lobby .lby-tab { padding: 0 9px; font-size: 12.5px; }
  #lobby .lby-status-pre { display: none; }
  #lobby .lby-room { grid-template-columns: 72px minmax(0, 1fr) auto; }
  #lobby .lby-fill-count { min-width: 34px; font-size: 12px; }
  #lobby .lby-tags { gap: 4px; }
  #lobby .lby-tag { padding: 1px 6px; font-size: 10.5px; }
}

/* Low graphics quality (html.q-low, set by the menu): no animated ornaments. */
html.q-low #lobby .lby-snake i { animation: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  #lobby .lby-snake i, #lobby .lby-dot, #lobby .lby-list-spin { animation: none !important; }
  #lobby .lby-error { animation-duration: 0.01s !important; }
  #lobby .lby-bar i { transition: none; }
}