/* <!-- check-allow: ranked --> */
/* Home. The first screen answers a first visit (the game, free, Windows, your own copy, DOWNLOAD and How it works)
   and a returning player (who is online, the sets of the last 24 hours) side by side; the board, the latest sets
   and the characters start right under it, and a short "What is Project Backdash" with the three steps closes it.
   The site's type scale, sections and panels (site.css) and the Ranked pages' rows (pages/ranked.css) are used
   throughout; small labels are monospaced capitals, and crimson stays on DOWNLOAD, the logo and the sets being played
   now. */

.hub {
  --hub-mono: var(--font-mono);
  color: var(--text-1);
  font-size: var(--fs-3);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.hub a { color: inherit; }
.hub img { display: block; }
/* ---- First screen ------------------------------------------------------------------------------------------- */
.hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 32px 48px;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 36px;
}
/* Home's lead is a little shorter and further from the title than other pages'. */
.hub-pitch .hero-lead {
  max-width: 33em;
  margin-top: 18px;
}
.hub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
}
.hub-actions .dl-arrow { width: 20px; height: 20px; flex: none; fill: currentColor; }
/* "DOWNLOAD FOR WINDOWS" needs about 500 px. In a narrower column the button says DOWNLOAD on one line, and
   "for Windows" stays in its name and in the line under it. */
.hub-pitch { container-type: inline-size; }
@container (max-width: 559.98px) {
  .hub-actions .dl-for { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.hub-how { min-height: 56px; padding: 0 22px; font-size: 1.0625rem; }
.hub-facts {
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: var(--fs-2);
}
.hub-facts + .hub-facts { margin-top: 4px; }
.hub-facts a { color: var(--link); text-underline-offset: 3px; white-space: nowrap; }

/* The live panel: one big number, the grid of the latest Ranked sets, and the headline counts. */
.hub-live { border-radius: 4px; padding: 18px 22px 0; }
.hub-live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-live-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text-2); }
.hub-big { display: flex; flex-direction: column; margin: 14px 0 14px; }
/* The number's line keeps its height while the loader's keys stand in for it. */
.hub-num { display: flex; align-items: center; min-height: 0.9em; font: 400 4.5rem/0.9 var(--font-display); letter-spacing: 0.02em; }
.hub-num .rk-input { gap: 10px; }
.hub-num .rk-input svg { width: 22px; height: 22px; }
.hub-big-label { margin-top: 10px; color: var(--text-3); }

/* One square per set, newest first at the top left; brighter is more recent, an outline is a forfeit, crimson is
   a set being played right now. home-hub.mjs sizes the squares (--sq, --gap) so they all fit this fixed box. */
.hub-grid {
  --sq: 10px;
  --gap: 3px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap);
  height: 136px;
  overflow: hidden;
}
.hub-grid i { flex: none; width: var(--sq); height: var(--sq); border-radius: 1px; background: rgba(233, 238, 237, 0.14); }
.hub-grid .g1 { background: rgba(233, 238, 237, 0.66); }
.hub-grid .g2 { background: rgba(233, 238, 237, 0.42); }
.hub-grid .g3 { background: rgba(233, 238, 237, 0.26); }
.hub-grid .g-q { background: transparent; box-shadow: inset 0 0 0 1px rgba(233, 238, 237, 0.42); }
.hub-grid .g-live { background: var(--verm-500); animation: hub-live 1.2s ease-in-out infinite alternate; }
@keyframes hub-live { to { opacity: 0.45; } }
@media (hover: hover) and (pointer: fine) {
  .hub-grid i { cursor: pointer; }
  .hub-grid i:hover { background: var(--gold); box-shadow: none; }
}
/* The legend, or the set under the pointer: its players and characters give way (cut short at the end) before
   its time, which always shows. Names keep their own capitals. Phones have no pointer, so there the legend wraps
   rather than lose its end. */
.hub-readout {
  display: flex;
  margin: 10px 0 0;
  color: var(--text-3);
  white-space: nowrap;
}
.hub-readout > span { flex: none; }
.hub-readout > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hub-readout.is-set { color: var(--text-2); letter-spacing: 0.04em; text-transform: none; }
/* Players, online now and lobbies open, then Ranked games and searching / playing now on a row of two. */
.hub-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 16px -22px 0; padding: 0; border-top: 1px solid var(--hairline); }
.hub-tiles > div { grid-column: span 2; min-width: 0; padding: 12px 16px 14px 22px; }
.hub-tiles > div:nth-child(n + 4) { grid-column: span 3; border-top: 1px solid var(--hairline); }
.hub-tiles > div:not(:first-child, :nth-child(4)) { border-left: 1px solid var(--hairline); }
.hub-tiles dt { color: var(--text-3); font-family: var(--hub-mono); font-size: 11px; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.hub-tiles dd { margin: 6px 0 0; font: 400 1.75rem/1 var(--font-display); }
.hub-tiles .hub-sub { margin-top: 6px; overflow: hidden; color: var(--text-3); font: 500 var(--fs-1)/1.3 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }

/* ---- The board, the latest sets and the characters --------------------------------------------------------- */
.hub-body { display: grid; gap: 36px; padding-bottom: 56px; }
/* Side by side, the two panels of a row end on the same line. */
.hub-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; }
.hub-cols-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hub-cols > section { display: flex; flex-direction: column; }
.hub-cols > section > .panel { flex: 1 0 auto; }
/* The site's list spacing (li + li) is for reading text; Home's lists are rows and steps that line up. */
.hub li + li { margin-top: 0; }
.hub-msg { padding: 20px 16px; color: var(--text-2); font-size: var(--fs-2); }
.hub .hub-f32 { width: 32px; height: 32px; }

/* Rows hold their place while they load, so nothing under them moves when they arrive. */
.hub-board, .hub-feed, .hub-chars { margin: 0; padding: 6px 0; list-style: none; }
.hub-board { min-height: 678px; }
.hub-feed { min-height: 678px; }
.hub-chars { min-height: 412px; padding: 8px 0; }

/* Display figures are wide; a number never breaks inside itself. */
.hub-pct, .hub-score, .hub-num, .hub-tiles dd { overflow-wrap: normal; white-space: nowrap; }
/* A name too long for its column wraps at its natural breaks; a part still too wide takes the smaller size, and only
   past that breaks anywhere (player-name.mjs), so it is never cut short. */
.hub .pbd-name.is-small { font-size: var(--fs-1); }
.hub .pbd-name.is-tight { overflow-wrap: anywhere; }

/* Every row has the same columns (the score's is fixed), so the scores and the losers line up down the list; when
   the set was played goes on a line of its own under the names. */
.hub-set {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 52px 32px minmax(0, 1fr);
  align-items: center;
  gap: 1px 10px;
  min-height: 62px;
  padding: 6px 16px;
  text-decoration: none;
}
.hub-feed li + li { border-top: 1px solid var(--hairline); }
a.hub-set:hover, a.hub-set:focus-visible { background: var(--gold-wash); box-shadow: inset 2px 0 0 var(--gold); outline-offset: -2px; }
.hub-side { min-width: 0; }
.hub-side b { display: block; font-weight: 600; font-size: var(--fs-2); line-height: 1.25; }
.hub-side > span { display: block; color: var(--text-3); font-size: var(--fs-1); line-height: 1.3; }
.hub-shift { white-space: nowrap; }
.hub-up { color: var(--good); font-weight: 600; }
.hub-down { color: var(--bad); font-weight: 600; }
.hub-set .hub-lost { opacity: 0.6; }
.hub-score { font: 400 var(--fs-4)/1 var(--font-display); text-align: center; white-space: nowrap; }
.hub-when { grid-column: 2 / -1; overflow: hidden; color: var(--text-3); font-size: var(--fs-1); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

.hub-char {
  display: grid;
  grid-template-columns: 32px 128px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 4px 16px;
}
.hub-char-name { overflow: hidden; font-weight: 600; font-size: var(--fs-2); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.hub-char-name span { display: block; color: var(--text-3); font-weight: 500; font-size: var(--fs-1); }
.hub-track { position: relative; height: 10px; border-radius: 2px; background: rgba(233, 238, 237, 0.08); }
.hub-track i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: rgba(233, 238, 237, 0.55); }
.hub-half::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 50%; width: 2px; background: var(--text-3); }
.hub-pct { font: 400 var(--fs-3)/1 var(--font-display); text-align: right; }
.hub-foot { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--hairline); color: var(--text-3); font-size: var(--fs-1); }

/* ---- What is Project Backdash, and the three steps ------------------------------------------------------- */
.hub-about-in { padding: 22px 24px 24px; }
.hub-about-lead { max-width: 52em; margin: 0; color: var(--text-2); font-size: var(--fs-3); }
.hub-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
/* Each step's big value scales with its column (NPUB30009 is 8.1 em wide in the display face), so it never runs
   into the next step. */
.hub-steps li { padding: 20px 24px 4px; container-type: inline-size; }
.hub-steps li:first-child { padding-left: 0; }
.hub-steps li + li { border-left: 1px solid var(--hairline); }
.hub-step-n { color: var(--text-3); }
.hub-step-big { display: block; margin: 10px 0 8px; font: 400 min(2.5rem, 12cqi)/1 var(--font-display); letter-spacing: 0.02em; white-space: nowrap; }
.hub-step-big small { margin-left: 10px; color: var(--text-3); font-family: var(--hub-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.hub-steps p { margin: 0; color: var(--text-2); font-size: var(--fs-2); }
.hub-about-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

.hub-off { margin: 16px 0 0; color: var(--text-2); font-size: var(--fs-2); }
p.hub-off.panel { margin: 0; padding: 16px 18px; border-radius: 4px; }
.hub-off a { color: var(--link); }

/* ---- Narrower screens ---------------------------------------------------------------------------------- */
/* A set's row needs about 480 px for both names, characters and rating changes, so under 1100 px the top ten and the
   latest sets each take the full width, one above the other. */
@media (max-width: 1099.98px) {
  .hub-cols:not(.hub-cols-even) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 959.98px) {
  .hub-hero { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .hub-cols-even { grid-template-columns: minmax(0, 1fr); }
  .hub-steps { grid-template-columns: minmax(0, 1fr); }
  .hub-steps li, .hub-steps li:first-child { padding: 16px 0; }
  .hub-steps li + li { border-left: 0; border-top: 1px solid var(--hairline); }
}
@media (max-width: 599.98px) {
  .hub-hero { gap: 24px; padding-top: 20px; padding-bottom: 28px; }
  .hub-pitch .hero-lead { margin-top: 12px; }
  .hub-actions { margin-top: 20px; gap: 10px; }
  .hub-actions .dl-button { width: 100%; justify-content: center; }
  .hub-how { width: 100%; min-height: 48px; }
  .hub-facts { margin-top: 12px; }
  .hub-live { padding: 16px 16px 0; }
  .hub-num { font-size: 3.5rem; }
  .hub-grid { height: 92px; }
  .hub-big-label, .hub-readout { font-size: 11px; letter-spacing: 0.08em; }
  .hub-readout:not(.is-set) { white-space: normal; }
  .hub-readout:not(.is-set) > span:first-child { overflow: visible; }
  /* Two a row; searching / playing now, with the longest label, takes the last row. */
  .hub-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px -16px 0; }
  .hub-tiles > div, .hub-tiles > div:nth-child(n + 4) { grid-column: auto; padding: 12px 16px; border-left: 0; }
  .hub-tiles > div:nth-child(even) { border-left: 1px solid var(--hairline); }
  .hub-tiles > div:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .hub-tiles > div:nth-child(5) { grid-column: 1 / -1; }
  .hub-tiles dd { font-size: 1.5rem; }
  .hub-body { gap: 28px; padding-bottom: 40px; }

  /* Top players' phone rows (site.css) are a little shorter. */
  .hub-board { min-height: 648px; }

  /* A side's rating change follows its character without the dot, so it can take the next line on its own. */
  .hub-feed { min-height: 366px; }
  .hub-set { grid-template-columns: 28px minmax(0, 1fr) 40px 28px minmax(0, 1fr); gap: 1px 8px; padding: 8px 12px; }
  .hub-dot { display: none; }
  .hub .hub-set .hub-f32 { width: 28px; height: 28px; }
  .hub-feed li:nth-child(n + 6) { display: none; }
  .hub-score { font-size: var(--fs-3); }

  .hub-char { grid-template-columns: 28px clamp(104px, 34vw, 136px) minmax(0, 1fr) 58px; gap: 10px; padding: 4px 12px; }
  .hub .hub-char .hub-f32 { width: 28px; height: 28px; }
  .hub-about-in { padding: 18px 16px 20px; }
  .hub-step-big { font-size: min(2rem, 12cqi); }
}

/* The narrowest phones: the title's longest word fits the column, and the big number's label keeps room for the two
   lines "Games in the last 24 hours, every mode" takes, so nothing under it moves when it comes. */
@media (max-width: 359.98px) {
  .hub-big-label { min-height: 2.6em; }
}

/* Without JavaScript the live parts have nothing to show: they leave, and a line says so. */
@media (scripting: none) {
  [data-needs-js] { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-grid .g-live { animation: none; }
}
@media (forced-colors: active) {
  .hub-grid i { background: CanvasText; forced-color-adjust: none; }
  .hub-grid .g-q { background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .hub-grid .g-live { background: Highlight; }
  .hub-track i { background: CanvasText; }
}