@import url("/theme/fonts/billboard.css");
/* ------------------------------------------------- YOUR X ON THE LIVE SHOW (x-on-the-show.js) */
/* A copy of the approved design X1A, in the console's own materials: the hero monitor's bezel (community-art/crt.webp)
   around the stream still (x-on-the-show-art, a clean plate of the design's still), the deck's steel and screws
   (community-art/deck.webp) for the heading bar, HOW OFTEN YOU AIR and the steps, the LIVE BUYS panel's frame
   (community-art/panel.webp) for the ticker and the readouts, the brass rank plates of the holders board
   (leaderboard-art/brass-plate.webp), and the BUY $QUIT plate (community-art/plate.webp) for the orange key. Every word
   and number is live text, set in the site's faces (--t-font-pixel for the title alone, the readable --t-font-display for
   the other headings, plates, keys and numerals, --t-font-body for data; owner order, 25 Oct 2026), except the words on
   the still's billboard and banner: those are in the show's billboard
   face (--t-font-billboard, the theme's billboard.css, imported above), as the stream letters them. --u is one pixel of
   the design (1774 wide), so the section keeps its proportions at any desktop width; under 900 px of block it stacks,
   in plain pixels. No box in it scrolls; if one ever does, it follows
   the page's wheel rule (overscroll contain, auto under a fine pointer). Its colours are the theme's tokens: the site's
   orange (--t-accent) for every accent, the console green (--t-green), the ink and the muted grey; the brass is art. */
.q-community > .q-community__xshow {
  grid-column: 1 / -1;
  min-width: 0;
  container: qx / inline-size;
  scroll-margin-top: calc(var(--t-header-desktop, 72px) + 12px);
}
/* On a desktop the section runs edge to edge, as the full-bleed floors do (QUIT LAUNCHPAD, THE ARCADE; the owner's rule
   of 22 Oct 2026): it steps out over the block's side padding, so its bezels meet the floors' edges.
   Each case mirrors community.css .q-community: 30 frame pixels a side on a desktop, 12 px on a phone held sideways,
   and the phone keeps the block's own sides. A hidden block has no padding (loading.css), so the step waits for it. */
.q-community:not([hidden]) > .q-community__xshow { margin-inline: calc(-30 * var(--qc-px)); }
@media (max-width: 767px), (max-width: 1199px) and (max-aspect-ratio: 3/4) {
  .q-community:not([hidden]) > .q-community__xshow { margin-inline: 0; }
}
@media (min-width: 768px) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  .q-community:not([hidden]) > .q-community__xshow { margin-inline: -12px; }
}
html[data-device="phone"] .q-community > .q-community__xshow { margin-inline: 0; }
.q-xshow {
  --u: calc(100cqw / 1774);
  --qx-cell: #040b07;
  --qx-glow-accent: color-mix(in srgb, var(--t-accent) 35%, transparent);
  --qx-glow-green: color-mix(in srgb, var(--t-green) 38%, transparent);
  display: grid;
  grid-template-columns: minmax(0, 1235fr) minmax(0, 503fr);
  grid-template-areas:
    "head head"
    "screen ladder"
    "ticker ladder"
    "steps steps"
    "crown crown"
    "status status"
    "how how"
    "top top";
  column-gap: calc(17 * var(--u));
  row-gap: calc(6 * var(--u));
  min-width: 0;
  color: var(--t-ink);
  font: 400 max(13px, calc(26 * var(--u)))/1.15 var(--t-font-body);
}
.q-xshow :where(h2, h3, p, ol, li, figure) { margin: 0; padding: 0; }
.q-xshow :where(a) { color: inherit; text-decoration: none; }
.q-xshow :is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--t-focus); outline-offset: 2px; }
.q-xshow [hidden] { display: none !important; }
.q-xshow :where([data-scrolls]) { overflow: auto; overscroll-behavior: contain; }
@media (pointer: fine) { .q-xshow :where([data-scrolls]) { overscroll-behavior: auto; } }

/* ------------------------------------------------------------------ the heading bar */
.q-xshow__head {
  grid-area: head;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: calc(10 * var(--u));
  padding: calc(14 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: calc(20 * var(--u)) calc(30 * var(--u));
  border-image: url("community-art/deck.webp") 66 76 72 76 / calc(44 * var(--u)) calc(50 * var(--u)) calc(46 * var(--u)) round;
  background: var(--qx-cell);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #020504, inset 0 0 calc(24 * var(--u)) rgb(0 0 0 / .8);
  text-align: center;
}
/* The title fills its bar on one line at every width: the pixel face (Jersey 20 since 26 Oct 2026, "QUIT Pixel" in
   /theme/fonts/display.css) sets YOUR X ON THE LIVE SHOW 9.906 em wide at no letter-spacing (measured in Chromium,
   26 Oct 2026) and the bar's text box is 1666 design pixels (1774 less two 30 px borders and two 24 px paddings), so 164
   design pixels leave it about 2.5 percent to spare. Under 1200 px of block the box is 100cqw less 56 px. Where the face
   sets it wider (its advances round at small sizes, a face still loading runs wider), x-on-the-show.js fitTitle sets it
   at the largest size that fits the bar; until it runs, a wider line wraps rather than leaves the bar. Its advances are
   kept linear (geometricPrecision): with whole-pixel advances a pixel face's line widens in 15 px steps on a phone and
   no size fills the bar. */
.q-xshow__title {
  color: var(--t-accent);
  font: 700 calc(164 * var(--u))/.95 var(--t-font-pixel, "QUIT Pixel", monospace);
  letter-spacing: 0;
  text-rendering: geometricPrecision;
  text-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 #1c0a03, 0 0 calc(18 * var(--u)) var(--qx-glow-accent);
  text-wrap: balance;
}
.q-xshow__line {
  color: var(--t-green);
  font: 400 max(14px, calc(31 * var(--u)))/1.1 var(--t-font-body);
  letter-spacing: .04em;
  text-shadow: 0 0 calc(8 * var(--u)) var(--qx-glow-green);
  text-wrap: balance;
}

/* ------------------------------------------------------- the still in the CRT bezel */
.q-xshow__screen {
  grid-area: screen;
  position: relative;
  min-width: 0;
  border-style: solid;
  border-color: transparent;
  border-width: calc(18 * var(--u));
  border-image: url("community-art/crt.webp") 134 / calc(58 * var(--u)) stretch;
  border-radius: calc(16 * var(--u));
  background: #020504;
}
.q-xshow__still {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1800 / 874;
  border-radius: calc(10 * var(--u));
  background: #1c0a03;
  isolation: isolate;
}
.q-xshow__plate-art { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The one link over the whole still; its focus ring stays inside the still's rounded edge. */
.q-xshow__watch { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.q-xshow .q-xshow__watch:focus-visible { outline-offset: -4px; }
/* The live text on the plate: each box set in plain pixels, then drawn onto its quad of the plate (quadTransform). */
.q-xshow__face, .q-xshow__brass, .q-xshow__banner {
  position: absolute;
  inset: 0 auto auto 0;
  display: grid;
  place-content: center;
  justify-items: center;
  transform-origin: 0 0;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}
.q-xshow__face { width: 960px; height: 300px; gap: 14px; padding: 18px 26px; }
/* The billboard's words in the billboard face, as on the stream: x-on-the-show.js fitLine sets each line at its largest
   size and narrows it to its line, measured once the face is in; these sizes, by the line's length, stand until then. */
.q-xshow__face-handle {
  max-width: 908px;
  overflow: hidden;
  color: var(--t-ink);
  font: 400 min(150px, calc(1450px / var(--chars, 9))) / 1.05 var(--t-font-billboard);
  letter-spacing: .01em;
  text-overflow: clip;
  text-shadow: 0 0 18px color-mix(in srgb, var(--t-accent) 50%, transparent), 6px 6px 0 #1c0a03;
}
.q-xshow__face-slogan { max-width: 908px; overflow: hidden; color: var(--t-ink); font: 400 min(56px, calc(1300px / var(--slogan-chars, 12))) / 1.05 var(--t-font-billboard); letter-spacing: .06em; }
.q-xshow__still[data-billboard="call"] .q-xshow__face-handle { color: var(--t-accent); }
.q-xshow__brass { width: 480px; height: 80px; }
.q-xshow__brass-text { color: #2a1505; font: 700 min(34px, calc(540px / var(--chars, 14))) / 1 var(--t-font-display); letter-spacing: .04em; text-shadow: 0 2px 0 rgb(255 255 255 / .3); }
.q-xshow__banner { width: 720px; height: 110px; }
.q-xshow__banner-text { max-width: 470px; overflow: hidden; color: #1c0a03; font: 400 min(86px, calc(730px / var(--chars, 9))) / 1.05 var(--t-font-billboard); letter-spacing: .02em; }
.q-xshow__marker {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  border: calc(4 * var(--u)) solid #1c0a03;
  border-radius: 50%;
  background: var(--t-accent);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--t-accent), 0 calc(4 * var(--u)) 0 #1c0a03;
  color: #1c0a03;
  font: 700 max(13px, calc(30 * var(--u)))/1 var(--t-font-display);
}
/* 1 at the billboard's top left corner, 2 at the banner's right end (the plate's own pixels, in percent). */
.q-xshow__marker[data-n="1"] { left: calc(860 / 1800 * 100% - 26 * var(--u)); top: calc(318 / 874 * 100% - 40 * var(--u)); }
.q-xshow__marker[data-n="2"] { left: calc(1522 / 1800 * 100% - 22 * var(--u)); top: calc(85 / 874 * 100% - 30 * var(--u)); }
.q-xshow__preview {
  position: absolute;
  z-index: 2;
  left: calc(860 / 1800 * 100% + 36 * var(--u));
  top: calc(318 / 874 * 100% - 40 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: calc(2 * var(--u)) solid #020504;
  background: var(--t-green);
  color: #04140a;
  font: 700 max(11px, calc(20 * var(--u)))/1 var(--t-font-display);
}
.q-xshow__tag {
  position: absolute;
  z-index: 3;
  top: calc(14 * var(--u));
  left: calc(14 * var(--u));
  padding: calc(7 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u));
  background: var(--t-accent);
  box-shadow: 0 calc(3 * var(--u)) 0 #1c0a03;
  color: #1c0a03;
  font: 700 max(12px, calc(24 * var(--u)))/1 var(--t-font-body);
  letter-spacing: .04em;
}
.q-xshow__tag:hover { filter: brightness(1.12); }

/* ---------------------------------------------------------------------- the ticker */
.q-xshow__ticker {
  grid-area: ticker;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: calc(100 * var(--u));
  row-gap: 2px;
  min-height: calc(40 * var(--u));
  padding: calc(4 * var(--u)) calc(18 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: calc(8 * var(--u)) calc(16 * var(--u));
  border-image: url("community-art/panel.webp") 60 / calc(16 * var(--u)) calc(22 * var(--u)) stretch;
  background: var(--qx-cell);
  color: var(--t-green);
  font: 400 max(13px, calc(26 * var(--u)))/1.1 var(--t-font-body);
  letter-spacing: .05em;
  text-shadow: 0 0 calc(8 * var(--u)) var(--qx-glow-green);
}
.q-xshow__tick { white-space: nowrap; }
.q-xshow__who { font-weight: 400; }
.q-xshow__ticker[data-state="unknown"] .q-xshow__who { color: var(--t-accent); }

/* ---------------------------------------------------------------- HOW OFTEN YOU AIR */
.q-xshow__ladder {
  grid-area: ladder;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: calc(10 * var(--u));
  min-width: 0;
  padding: calc(8 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: calc(22 * var(--u)) calc(16 * var(--u));
  border-image: url("community-art/deck.webp") 66 76 72 76 fill / calc(44 * var(--u)) calc(40 * var(--u)) calc(46 * var(--u)) round;
}
.q-xshow__ladder-title {
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  background: var(--qx-cell);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #020504;
  color: var(--t-accent);
  font: 700 max(16px, calc(31 * var(--u)))/1.05 var(--t-font-display);
  letter-spacing: 0;
  text-align: center;
  text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #1c0a03;
  text-wrap: balance;
}
.q-xshow__rungs { display: grid; align-content: space-between; gap: calc(7 * var(--u)); list-style: none; }
.q-xshow__rung {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 180fr) minmax(0, 96fr) minmax(0, 186fr);
  align-items: stretch;
  gap: calc(6 * var(--u));
  min-height: calc(58 * var(--u));
}
.q-xshow__rank {
  display: grid;
  place-items: center;
  padding: 0 calc(8 * var(--u));
  background: url("leaderboard-art/brass-plate.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / .65));
  color: #2a1505;
  font: 700 max(9px, min(calc(19 * var(--u)), calc(196 * var(--u) / var(--chars, 8)))) / 1 var(--t-font-display);
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 0 rgb(255 255 255 / .28);
  white-space: nowrap;
}
.q-xshow__hold, .q-xshow__every {
  display: flex;
  align-items: center;
  padding: 0 calc(10 * var(--u));
  font-size: max(13px, calc(20 * var(--u)));
  background: var(--qx-cell);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #16241b;
  white-space: nowrap;
}
.q-xshow__hold { justify-content: center; color: var(--t-ink); }
.q-xshow__every { color: var(--t-green); text-shadow: 0 0 calc(6 * var(--u)) var(--qx-glow-green); }
.q-xshow__rung[data-you] .q-xshow__hold,
.q-xshow__rung[data-you] .q-xshow__every { box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--t-accent); }
.q-xshow__you {
  position: absolute;
  right: calc(-6 * var(--u));
  top: calc(-10 * var(--u));
  padding: calc(3 * var(--u)) calc(6 * var(--u));
  border: calc(2 * var(--u)) solid #020504;
  background: var(--t-accent);
  color: #120802;
  font: 700 max(10px, calc(16 * var(--u)))/1 var(--t-font-display);
}
.q-xshow__each {
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: var(--qx-cell);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #16241b;
  color: var(--t-ink);
  font: 700 max(10px, calc(15 * var(--u)))/1.2 var(--t-font-display);
  letter-spacing: .02em;
  text-align: center;
}

/* -------------------------------------------------- the steps (the claim form) and the key */
.q-xshow__steps, .q-xshow__mine {
  grid-area: steps;
  display: grid;
  grid-template-columns: minmax(0, 383fr) minmax(0, 403fr) minmax(0, 478fr) minmax(0, 467fr);
  gap: calc(7 * var(--u));
  min-width: 0;
}
.q-xshow__step, .q-xshow__cell {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
  min-height: calc(84 * var(--u));
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: calc(10 * var(--u)) calc(14 * var(--u));
  border-image: url("community-art/deck.webp") 66 76 72 76 / calc(26 * var(--u)) calc(30 * var(--u)) calc(28 * var(--u)) round;
  background: var(--qx-cell);
  box-shadow: inset 0 0 calc(14 * var(--u)) rgb(0 0 0 / .8);
}
.q-xshow__n {
  flex: none;
  color: var(--t-accent);
  font: 700 max(28px, calc(66 * var(--u)))/.8 var(--t-font-display);
  text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #1c0a03;
}
.q-xshow__connect {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t-ink);
  cursor: pointer;
  font: 700 max(13px, calc(26 * var(--u)))/1.05 var(--t-font-display);
  letter-spacing: .01em;
  text-align: left;
}
.q-xshow__connect:hover { color: #fff; }
.q-xshow__connect[data-state="connected"] { color: var(--t-green); }
.q-xshow__fields { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; gap: calc(6 * var(--u)); min-width: 0; }
.q-xshow__handle, .q-xshow__slogan {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: calc(2 * var(--u)) solid color-mix(in srgb, var(--t-green) 42%, transparent);
  border-radius: 0;
  background: #020805;
  color: var(--t-ink);
}
.q-xshow__handle {
  min-height: max(36px, calc(42 * var(--u)));
  padding: 0 calc(10 * var(--u));
  font: 700 max(14px, calc(17 * var(--u)))/1 var(--t-font-display);
}
.q-xshow__handle::placeholder { color: var(--t-ink); opacity: .92; }
.q-xshow__slogan-row { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.q-xshow__slogan-label { flex: none; color: var(--t-muted); font: 700 max(10px, calc(16 * var(--u)))/1 var(--t-font-display); }
.q-xshow__slogan {
  min-height: max(28px, calc(32 * var(--u)));
  padding: 0 calc(8 * var(--u));
  font: 400 max(13px, calc(20 * var(--u)))/1 var(--t-font-body);
}
.q-xshow__slogan option { background: #050c09; color: var(--t-ink); }
.q-xshow__handle:focus, .q-xshow__slogan:focus { border-color: var(--t-green); outline: none; }
.q-xshow__note { color: var(--t-ink); font: 700 max(12px, calc(21 * var(--u)))/1.15 var(--t-font-display); letter-spacing: .01em; }
.q-xshow__go {
  --qc-plate-h: max(52px, calc(68 * var(--u)));
  align-self: center;
  justify-self: stretch;
  min-width: 0;
  min-height: var(--qc-plate-h);
  height: auto;
  margin: 0;
  padding: 4px 6px calc(var(--qc-plate-h) * .2);
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--qc-plate-h) * 74 / 206) 0 calc(var(--qc-plate-h) * 64 / 206);
  border-image: url("community-art/plate.webp") 0 74 0 64 fill / 0 calc(var(--qc-plate-h) * 74 / 206) 0 calc(var(--qc-plate-h) * 64 / 206) stretch;
  /* The site's orange under the words, inside the plate's opaque face (the plate's own orange is about the same), so a
     contrast check reads the pair a visitor sees instead of the dark page behind the plate; the plate image covers it
     (audit COMM-15). */
  background: var(--t-accent) content-box;
  color: #120802;
  cursor: pointer;
  font: 700 max(13px, calc(24 * var(--u)))/1.05 var(--t-font-display);
  letter-spacing: .02em;
  text-align: center;
  transition: transform .12s ease-out, filter .12s ease-out;
}
.q-xshow__go:hover:not([aria-busy="true"]) { transform: translateY(-2px); filter: brightness(1.1); }
.q-xshow__go:active:not([aria-busy="true"]) { transform: translateY(2px); filter: brightness(.94); }
.q-xshow__go[aria-busy="true"] { cursor: progress; filter: saturate(.75); }

/* The wallet's own airtime, in the steps' place. */
.q-xshow__cell { flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(6 * var(--u)); }
.q-xshow__cell-label { color: var(--t-accent); font: 700 max(10px, calc(18 * var(--u)))/1 var(--t-font-display); letter-spacing: .03em; }
.q-xshow__cell-value { color: var(--t-green); font: 400 max(13px, calc(25 * var(--u)))/1.1 var(--t-font-body); letter-spacing: .03em; }
.q-xshow__mine[data-status="off_air"] .q-xshow__cell-value,
.q-xshow__mine[data-status="holding_unknown"] .q-xshow__cell-value { color: var(--t-accent); }
.q-xshow__crown {
  grid-area: crown;
  justify-self: end;
  min-height: 44px;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border: calc(3 * var(--u)) solid var(--t-green);
  background: #04110a;
  color: var(--t-green);
  cursor: pointer;
  font: 700 max(12px, calc(22 * var(--u)))/1 var(--t-font-display);
}
.q-xshow__status {
  grid-area: status;
  min-height: 1.2em;
  color: var(--t-green);
  font: 400 max(13px, calc(24 * var(--u)))/1.2 var(--t-font-body);
  letter-spacing: .03em;
  text-align: center;
}
.q-xshow__status:empty { min-height: 0; }
.q-xshow__status[data-tone="refused"] { color: var(--t-red); }
.q-xshow__status[data-tone="done"] { color: var(--t-accent); }

/* ----------------------------------------------------------------------- HOW IT WORKS */
.q-xshow__how {
  grid-area: how;
  min-width: 0;
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  background: var(--qx-cell);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #16241b;
}
.q-xshow__how > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--t-accent);
  cursor: pointer;
  font: 700 max(14px, calc(28 * var(--u)))/1 var(--t-font-display);
  letter-spacing: .02em;
}
.q-xshow__how-list { display: grid; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) 0 calc(10 * var(--u)) 1.6em; color: var(--t-ink); font: 400 max(14px, calc(25 * var(--u)))/1.3 var(--t-font-body); }
.q-xshow__how-list strong { color: var(--t-green); font-weight: 400; }

/* ------------------------------------------------------------------- the top 25 table */
.q-xshow__top {
  grid-area: top;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(8 * var(--u));
  min-width: 0;
  padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: calc(22 * var(--u));
  border-image: url("community-art/crt.webp") 134 / calc(64 * var(--u)) stretch;
  border-radius: calc(16 * var(--u));
  background: var(--qc-screen, #020906);
}
.q-xshow__top-title { color: var(--t-accent); font: 700 max(16px, calc(36 * var(--u)))/1 var(--t-font-display); letter-spacing: 0; text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #020504; }
.q-xshow__table { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.q-xshow__tr {
  display: grid;
  grid-template-columns: minmax(0, 90fr) minmax(0, 210fr) minmax(0, 420fr) minmax(0, 240fr) minmax(0, 300fr);
  align-items: center;
  column-gap: calc(12 * var(--u));
  min-height: calc(52 * var(--u));
  border-bottom: calc(2 * var(--u)) solid color-mix(in srgb, var(--t-green) 22%, transparent);
}
.q-xshow__tr--head { min-height: calc(40 * var(--u)); }
.q-xshow__th { color: var(--t-green); font: 700 max(10px, calc(18 * var(--u)))/1 var(--t-font-display); letter-spacing: .03em; }
.q-xshow__td { min-width: 0; overflow: hidden; color: var(--t-ink); text-overflow: ellipsis; white-space: nowrap; }
.q-xshow__plate {
  display: inline-grid;
  place-items: center;
  min-width: calc(150 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(10 * var(--u));
  background: url("leaderboard-art/brass-plate.webp") center / 100% 100% no-repeat;
  color: #2a1505;
  font: 700 max(9px, min(calc(17 * var(--u)), calc(170 * var(--u) / var(--chars, 8)))) / 1 var(--t-font-display);
}
.q-xshow__plate:empty { visibility: hidden; }
.q-xshow__holder-handle { color: var(--t-green); }
.q-xshow__holder-wallet { color: var(--t-ink); }
.q-xshow__holder :is(a):hover { text-decoration: underline; }
.q-xshow__airs { color: var(--t-green); }
.q-xshow__airs[data-off] { color: var(--t-muted); }
.q-xshow__tr[data-you] { box-shadow: inset calc(4 * var(--u)) 0 0 var(--t-accent); }
.q-xshow__tr--empty { grid-template-columns: minmax(0, 1fr); }
.q-xshow__more > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--t-green);
  cursor: pointer;
  font: 700 max(12px, calc(22 * var(--u)))/1 var(--t-font-display);
}
.q-xshow__top-source { color: var(--t-muted); font: 400 max(12px, calc(18 * var(--u)))/1.2 var(--t-font-body); letter-spacing: .02em; }
.q-xshow__top-source:empty { display: none; }
.q-xshow__top[data-state="unknown"] .q-xshow__empty { color: var(--t-accent); }
/* Held rows and the held SHOW RANKS 11 TO 25 keep their room while the holders are read, and show nothing. */
.q-xshow [data-held] { visibility: hidden; }

/* The console's plate that leads here (linkDeckToSection) keeps the plate's own look; it is a link. */
.q-community .c-claim__cta.q-xshow-jump { text-decoration: none; }

/* ------------------------------------- under 1200 px of block: one column, in plain pixels */
@container qx (max-width: 1199px) {
  .q-xshow {
    --u: 1px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "screen" "ticker" "ladder" "steps" "crown" "status" "how" "top";
    row-gap: 10px;
    font-size: 15px;
  }
  .q-xshow__head { padding: 10px 12px 12px; border-width: 14px 16px; border-image-width: 30px 32px 32px; }
  .q-xshow__title { font-size: calc((100cqw - 56px) / 10.11); }
  .q-xshow__line { font-size: clamp(14px, 2.1cqw, 20px); }
  .q-xshow__screen { border-width: 12px; border-image-width: 36px; }
  .q-xshow__marker { width: clamp(24px, 3.4cqw, 40px); height: clamp(24px, 3.4cqw, 40px); border-width: 2px; font-size: clamp(13px, 1.9cqw, 22px); }
  .q-xshow__marker[data-n="1"] { left: calc(860 / 1800 * 100% - 12px); top: calc(318 / 874 * 100% - 22px); }
  .q-xshow__marker[data-n="2"] { left: calc(1522 / 1800 * 100% - 10px); top: calc(85 / 874 * 100% - 16px); }
  .q-xshow__preview { left: calc(860 / 1800 * 100% + 20px); top: calc(318 / 874 * 100% - 22px); font-size: 11px; padding: 3px 5px; }
  .q-xshow__tag { top: 10px; left: 10px; padding: 5px 8px 4px; font-size: clamp(12px, 1.7cqw, 18px); }
  .q-xshow__ticker { gap: 2px 40px; border-width: 8px 12px; border-image-width: 14px 18px; font-size: 16px; }
  .q-xshow__ladder { border-width: 16px 12px; border-image-width: 32px 30px 34px; gap: 8px; }
  .q-xshow__ladder-title { font-size: clamp(20px, 3cqw, 30px); padding: 8px; }
  .q-xshow__rung { grid-template-columns: minmax(0, 150fr) minmax(0, 70fr) minmax(0, 160fr); min-height: 46px; gap: 5px; }
  .q-xshow__rank { font-size: min(15px, calc(160px / var(--chars, 8))); padding: 0 6px; }
  .q-xshow__hold, .q-xshow__every { padding: 0 8px; font-size: 16px; }
  .q-xshow__you { font-size: 11px; right: -4px; top: -8px; }
  .q-xshow__each { font-size: 13px; padding: 8px; }
  .q-xshow__steps, .q-xshow__mine { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .q-xshow__step, .q-xshow__cell { min-height: 64px; padding: 8px 12px; gap: 14px; border-width: 8px 10px; border-image-width: 20px 22px; }
  .q-xshow__n { font-size: 34px; }
  .q-xshow__connect, .q-xshow__note { font-size: 16px; }
  .q-xshow__handle { min-height: 44px; font-size: 16px; }
  .q-xshow__slogan { min-height: 44px; font-size: 16px; }
  .q-xshow__slogan-label { font-size: 11px; }
  .q-xshow__go { --qc-plate-h: 56px; font-size: 16px; }
  .q-xshow__cell-label { font-size: 12px; }
  .q-xshow__cell-value { font-size: 16px; }
  .q-xshow__crown { justify-self: stretch; font-size: 14px; }
  .q-xshow__status { font-size: 15px; }
  .q-xshow__how { padding: 6px 12px; }
  .q-xshow__how > summary { font-size: 18px; }
  .q-xshow__how-list { font-size: 16px; gap: 10px; }
  .q-xshow__top { border-width: 16px; border-image-width: 44px; padding: 8px 10px; gap: 6px; }
  .q-xshow__top-title { font-size: 22px; }
  .q-xshow__tr { min-height: 46px; column-gap: 10px; }
  .q-xshow__th { font-size: 12px; }
  .q-xshow__td { font-size: 15px; }
  .q-xshow__plate { min-width: 120px; height: 30px; font-size: min(12px, calc(132px / var(--chars, 8))); }
  .q-xshow__more > summary { font-size: 15px; }
  .q-xshow__top-source { font-size: 13px; }
}
/* ------------------------------------------------------- phone: the table's rows fold */
@container qx (max-width: 899px) {
  .q-xshow__ticker { flex-direction: column; font-size: 15px; }
  /* WATCH ON PUMP.FUN: its 3 px shadow drawn as its bottom border, so its own box, the one a target-size check reads,
     is 24 px tall at its smallest type; it paints the same. */
  .q-xshow__tag { box-shadow: none; border-bottom: 3px solid #1c0a03; }
  .q-xshow__rung { grid-template-columns: minmax(0, 118fr) minmax(0, 60fr) minmax(0, 150fr); min-height: 44px; }
  .q-xshow__rank { font-size: 11px; line-height: 1.05; white-space: normal; text-wrap: balance; }
  .q-xshow__hold, .q-xshow__every { padding: 0 6px; font-size: 14px; }
  .q-xshow__each { font-size: 12px; }
  .q-xshow__line { font-size: 15px; }
  .q-xshow__top { border-width: 14px; border-image-width: 40px; padding: 8px 6px; }
  .q-xshow__top-title { font-size: 20px; }
  .q-xshow__tr {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "rank who bal" "rank tier airs";
    row-gap: 4px;
    min-height: 58px;
    padding: 6px 0;
  }
  .q-xshow__tr--head { display: none; }
  .q-xshow__rank-n { grid-area: rank; font-size: 15px; }
  .q-xshow__tier { grid-area: tier; }
  .q-xshow__holder { grid-area: who; font-size: 14px; }
  .q-xshow__bal { grid-area: bal; justify-self: end; font-size: 14px; }
  .q-xshow__airs { grid-area: airs; justify-self: end; font-size: 13px; }
  .q-xshow__plate { min-width: 104px; height: 28px; font-size: min(11px, calc(110px / var(--chars, 8))); }
  .q-xshow__tr--empty { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .q-xshow__more > summary { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .q-xshow :is(.q-xshow__go) { transition: none; }
}
:root[data-reduced-motion="true"] .q-xshow :is(.q-xshow__go) { transition: none; }
/* The status row holds the status line and, under it when no wallet is found, the way on (audit COMM-02). */
.q-xshow__say { grid-area: status; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.q-xshow__say > .q-xshow__status { width: 100%; }
.q-xshow__say .c-open-wallet { justify-content: center; margin-top: 0; }
/* Touch areas of at least 24 px for the holder wallet links and WATCH ON PUMP.FUN (audit COMM-12); nothing moves. */
.q-xshow__td.q-xshow__holder { overflow: clip; overflow-clip-margin: 8px; }
.q-xshow__holder-wallet { position: relative; }
.q-xshow__holder-wallet::before, .q-xshow__tag::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 28px); transform: translateY(-50%); }

/* Parked (the owner, 24 Oct 2026: hide the advert for putting your X on the show for now; community.js
   XSHOW_ADVERT_PARKED). Only the TOP 25 HOLDERS board shows: the heading, the still, the ticker, HOW OFTEN YOU AIR, the
   claim steps, the crown key, the status line, HOW IT WORKS and the table's AIRS column are hidden, and the empty grid
   rows close up. */
.q-community__xshow[data-xshow-parked] .q-xshow { row-gap: 0; }
.q-community__xshow[data-xshow-parked] .q-xshow > :not(.q-xshow__top) { display: none !important; }
.q-community__xshow[data-xshow-parked] .q-xshow__tr > :nth-child(5) { display: none !important; }
.q-community__xshow[data-xshow-parked] .q-xshow__tr:not(.q-xshow__tr--empty) {
  grid-template-columns: minmax(0, 90fr) minmax(0, 210fr) minmax(0, 420fr) minmax(0, 240fr);
}
@container qx (max-width: 1199px) {
  .q-community__xshow[data-xshow-parked] .q-xshow__tr:not(.q-xshow__tr--empty) {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "rank who bal" "rank tier tier";
  }
}