/* Lobby Watch: base. Reset, body, type utilities, links, focus, scrollbars, the app shell, body state classes. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: #34363a transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/20px var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre {
  margin: 0;
}
ul, ol {
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
}
button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: 0;
}
button {
  cursor: pointer;
}
table {
  border-collapse: collapse;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

[hidden],
.is-hidden {
  display: none !important;
}

::selection {
  background: var(--selection);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #34363a transparent;
}

/* ---- Headings and type utilities ---------------------------------------------------------------------------- */

h1,
.t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 600;
}
h2 {
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  font-weight: 600;
}

/* Mono is for data only (timestamps, keys, UUIDs, server names, countdowns, durations in tables). 12 px by default;
   a .t-* class after it changes the size. */
.mono {
  font-family: var(--mono);
  font-size: var(--fs-meta);
}

.t-meta  { font-size: var(--fs-meta);  line-height: var(--lh-meta); }
.t-dense { font-size: var(--fs-dense); line-height: var(--lh-dense); }
.t-ui    { font-size: var(--fs-ui);    line-height: var(--lh-ui); }
.t-lede  { font-size: var(--fs-lede);  line-height: var(--lh-lede); }
.t-name  { font-size: var(--fs-name);  line-height: var(--lh-name); font-weight: 600; }

.tx-1    { color: var(--text); }
.tx-2    { color: var(--text-2); }
.tx-3    { color: var(--text-3); }
.tx-warn { color: var(--warn); }
.tx-err  { color: var(--err); }

.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }

.nowrap { white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Links -------------------------------------------------------------------------------------------------- */

/* Text links: --text with a quiet underline. Never accent-coloured. */
a {
  color: var(--text);
  text-decoration: underline 1px var(--link-line);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: var(--text);
}

/* Navigation-like links (names, lobby names, timestamps): no underline at rest, currentColor underline on hover. */
.nl {
  color: inherit;
  text-decoration: none;
}
.nl:hover {
  text-decoration: underline 1px currentColor;
  text-underline-offset: 3px;
}

/* ---- Focus -------------------------------------------------------------------------------------------------- */

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- Shell: top bar ------------------------------------------------------------------------------------------- */

#topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 48px;
  padding: 0 var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--rule-strong);
  display: grid;
  /* The search column gives way first (240 px down to 120 px) once the flexible space is gone, so the one-row bar
     never pushes the username off screen or the page sideways. */
  grid-template-columns: auto auto minmax(16px, 1fr) minmax(120px, 240px) auto auto auto;
  grid-template-areas: "mark nav . search sbtn feed user";
  align-items: center;
}

.tb-mark {
  grid-area: mark;
  margin-right: 24px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.tb-mark:hover {
  text-decoration: none;
}

.tb-demo {
  display: none;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--warn);
}

.tb-nav {
  grid-area: nav;
  display: flex;
  gap: 16px;
  height: 100%;
  align-items: stretch;
}
.tb-link {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.tb-link:hover {
  color: var(--text);
  text-decoration: none;
}
.tb-link.is-active {
  color: var(--text);
  font-weight: 500;
}
/* 2 px accent bar flush on the bar's bottom edge, covering the rule. */
.tb-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}

.tb-search {
  grid-area: search;
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  min-width: 0;
}
.tb-search .ps {
  flex: 1 1 auto;
  min-width: 0;
}
/* Phone-only controls. Scoped to #topbar so they beat .tbtn's display: inline-flex (components.css loads later). */
#topbar .tb-cancel {
  display: none;
}
#topbar.is-home .tb-search {
  visibility: hidden;
}

#topbar .tb-searchbtn {
  grid-area: sbtn;
  display: none;
}

.feed {
  grid-area: feed;
  margin-left: 24px;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-2);
  white-space: nowrap;
}

.tb-user {
  grid-area: user;
  margin-left: 16px;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-user:hover {
  color: var(--text);
  text-decoration: none;
}

/* ---- Shell: main and status bar -------------------------------------------------------------------------------- */

#app {
  display: block;
  padding: 16px var(--gutter) 48px;
}

#statusbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  height: 24px;
  padding: 0 var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--rule-strong);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
  white-space: nowrap;
}
.sb-left {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-right {
  margin-left: auto;
}

body.has-statusbar #app {
  padding-bottom: calc(48px + var(--statusbar-h));
}

/* Lobbies: the app is a fixed-height frame; its columns scroll on their own. */
body.is-fullheight #app {
  padding: 0;
  height: calc(100dvh - var(--topbar-h));
  overflow: hidden;
}
body.is-fullheight.has-statusbar #app {
  height: calc(100dvh - var(--topbar-h) - var(--statusbar-h));
}

/* Login: no shell. */
body.is-login #topbar,
body.is-login #statusbar {
  display: none !important;
}
body.is-login #app {
  padding: 0 var(--gutter);
}

/* ---- Page header pattern ---------------------------------------------------------------------------------------- */

/* h1 left, right-aligned text actions on the same line. 16 px below. */
.ph {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 4px;
  margin-bottom: 16px;
}
.ph-a {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

/* A back link above an h1 ("‹ Lobbies"). */
.back {
  display: inline-block;
  margin-bottom: 4px;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
  text-decoration: none;
}
.back:hover {
  color: var(--text);
  text-decoration: underline 1px currentColor;
}

/* The one plain sentence that answers why you came (player, bots). */
.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--text);
  max-width: 72ch;
}

/* Content width limits used by screens. */
.maxw-1280 { max-width: 1280px; }
.maxw-720  { max-width: 720px; }

/* ---- Breakpoints for the shell ---------------------------------------------------------------------------------- */

/* Narrow tablets (720–859): the one-row bar keeps every link, the search box and the username by tightening its gaps
   and dropping the feed word (the glyph and its title stay). From 860 up the full bar fits as drawn in 4.2. */
@media (min-width: 720px) and (max-width: 859.98px) {
  .tb-mark {
    margin-right: 16px;
  }
  .tb-nav {
    gap: 12px;
  }
  .feed {
    margin-left: 16px;
  }
  .feed-w {
    display: none;
  }
  .feed .g {
    margin-right: 0;
  }
  .tb-user {
    margin-left: 12px;
    max-width: 96px;
  }
}

@media (max-width: 719.98px) {
  #topbar {
    height: 80px;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-rows: 44px 36px;
    grid-template-areas:
      "mark demo . sbtn feed user"
      "nav  nav  nav nav nav nav";
    align-items: center;
  }
  .tb-mark {
    margin-right: 0;
  }
  .tb-demo {
    display: block;
    grid-area: demo;
    margin-left: 8px;
  }
  .tb-nav {
    align-self: stretch;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    border-top: 1px solid var(--rule);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tb-nav::-webkit-scrollbar {
    display: none;
  }
  .tb-search {
    grid-area: nav;
    display: none;
    width: auto;
    align-self: center;
  }
  #topbar .tb-cancel {
    display: inline-flex;
  }
  #topbar.is-home .tb-search {
    visibility: visible;
  }
  #topbar.is-searching .tb-search {
    display: flex;
  }
  #topbar.is-searching .tb-nav > * {
    visibility: hidden;
  }
  #topbar .tb-searchbtn {
    display: inline-flex;
    margin-left: 12px;
  }
  #topbar.is-home .tb-searchbtn,
  #topbar.is-searching .tb-searchbtn {
    display: none;
  }
  .feed {
    margin-left: 16px;
  }
  .feed-w {
    display: none;
  }
  .feed .g {
    margin-right: 0;
  }
  .tb-user {
    margin-left: 16px;
    max-width: 96px;
  }
  #statusbar {
    display: none !important;
  }
  body.has-statusbar #app {
    padding-bottom: 48px;
  }
  body.is-fullheight.has-statusbar #app,
  body.is-fullheight #app {
    padding: 0;
    height: calc(100dvh - var(--topbar-h));
  }
}