/* ============================================================
   GameRoch — the Leaderboard (js/screens/board.js), prefix `nxb-`.

   Built on the nx- kit (css/next.css). Theme colours come from the theme
   tokens; the only fixed colours here are the ones that sit on the hero's own
   gradient (always loud, always white text) and need to read the same in all
   23 themes.

   Layout follows the SHELL's width (container gr-shell), never the window's.
   ============================================================ */

#gr-complete .nxb {
  --nxb-up: #17874b;        /* on a WHITE chip inside the hero, in every theme */
  --nxb-down: #b3263f;
  --nxb-dock: 16px;         /* how far "Find me" floats above the window's foot (set after paint) */
  /* TEXT colours for a zone and for Roch Points. The kit's --nx-good is 3.99:1 on
     its own soft green and 4.2:1 on the page, and --nx-rp is 4.2:1 on the tint of
     the player's own row — fine for an icon, short of AA for 12px words. */
  --nxb-good: #12733f;
  --nxb-rp: var(--nx-rp-deep);
  /* The far end of the hero. --gr-hero2 itself is too light for white words in
     the everyday themes (3.4:1 in Blue, 2.7:1 in Kids), and this hero carries
     small text from edge to edge — so it keeps the hue and loses the glare. */
  --nxb-hero2: color-mix(in srgb, var(--gr-hero2) 70%, #000);
}
#gr-complete .nxb { text-align: start; }      /* the shell's root is `left`; this screen follows the language */
#gr-complete[data-tone=dark] .nxb { --nxb-good: var(--nx-good); --nxb-rp: var(--nx-rp); }
/* The kit's quiet grey (--gr-sub) on its own quiet fills is 4.3–4.4:1: a "Practice"
   pill on the page ground, a tab that is not selected. A step towards the ink clears AA. */
#gr-complete .nxb .nx-pill.is-muted, #gr-complete .nxb button.nx-tab[aria-selected=false] {
  color: color-mix(in srgb, var(--gr-sub) 68%, var(--gr-ink));
}

/* a state panel (failed / empty) keeps its distance from what follows it */
#gr-complete .nxb > .nx-error, #gr-complete .nxb > .nx-empty, #gr-complete .nxb > .nx-skeleton { margin-bottom: var(--nx-gap); }
#gr-complete .nxb > .nx-empty { margin-top: 22px; }

/* ---------- the hero ---------- */
#gr-complete .nxb-hero {
  display: grid; gap: 18px; padding: 24px 26px; margin: 0 0 var(--nx-gap);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--nxb-hero2) 0%, transparent 60%),
    linear-gradient(135deg, var(--gr-hero), color-mix(in srgb, var(--gr-hero) 55%, var(--nxb-hero2)));
}
/* one entrance per visit: the module adds the class on the first paint of a visit only */
#gr-complete .nxb-hero.is-entering { animation: nxb-in .36s cubic-bezier(.2, .8, .2, 1) both; }
/* the kit's two soft circles, as shade instead of light: white words stay AA over them */
#gr-complete .nxb-hero::after {
  opacity: 1;
  background:
    radial-gradient(circle at 10% 125%, #00000017 0 24%, transparent 25%),
    radial-gradient(circle at 94% -14%, #00000014 0 20%, transparent 21%);
}
#gr-complete .nxb-hero .nx-pill, #gr-complete .nxb-hero .nx-pill.is-muted { background: #00000033; color: #fff; }
@keyframes nxb-in { from { opacity: 0; transform: translateY(8px); } }
#gr-complete .nxb-hero p { margin: 0; color: #fff; line-height: 1.4; }
#gr-complete .nxb-hero-top { display: flex; align-items: center; gap: 12px; }
#gr-complete .nxb-hero-id {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 6px 16px; flex-wrap: wrap;
}
#gr-complete .nxb-hero-id b { font: 700 18px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; }
#gr-complete .nxb-hero-ico {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #0000002e;
}
#gr-complete .nxb-hero-ico svg { width: 23px; height: 23px; }
#gr-complete .nxb-ends {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px;
  background: #0000002e; font-size: 14px; font-weight: 600; white-space: nowrap;
}
#gr-complete .nxb-ends svg { width: 16px; height: 16px; flex: none; }
#gr-complete .nxb-hero-main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 350px); gap: 20px 32px; align-items: center;
}
#gr-complete .nxb-hero-you { display: grid; gap: 14px; min-width: 0; justify-items: start; }
#gr-complete .nxb-figure { display: flex; align-items: flex-end; gap: 8px 26px; flex-wrap: wrap; }
#gr-complete .nxb-figure.is-stacked { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; }

/* "You are 22nd of 50": one sentence, one of its words the big figure. */
#gr-complete .nxb-stand {
  margin: 0; color: #fff; font: 600 19px/1 'DM Sans', sans-serif; letter-spacing: 0; overflow-wrap: normal;
}
#gr-complete .nxb-stand b, #gr-complete .nxb-stand span { white-space: nowrap; }
#gr-complete .nxb-stand .nxb-big {
  font: 800 64px/.92 Outfit, 'DM Sans', sans-serif; letter-spacing: -.03em; margin-inline: 4px 2px;
  font-variant-numeric: tabular-nums;
}
#gr-complete .nxb-stand.is-invite {
  font: 800 32px/1.12 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; max-width: 24ch; text-wrap: balance;
}
#gr-complete .nxb-stand.is-line { font: 600 18px/1.35 'DM Sans', sans-serif; max-width: 46ch; }
#gr-complete .nxb-stand.is-line b { font-weight: 800; }
#gr-complete .nxb-hero .nxb-invite-body { font-size: 16px; max-width: 44ch; color: #fff; }
#gr-complete .nxb-total { line-height: 1; }
#gr-complete .nxb-total .nx-cur.is-xl { font-size: 56px; letter-spacing: -.03em; gap: 12px; }
#gr-complete .nxb-total .nx-cur.is-xl .nx-unit { font-size: .42em; }
#gr-complete .nxb-total .nxb-big { font: 800 56px/1 Outfit, 'DM Sans', sans-serif; }

#gr-complete .nxb-hero .nxb-week { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 15px; font-weight: 600; padding-bottom: 5px; }
#gr-complete .nxb-week-score { display: inline-flex; align-items: center; gap: 7px; }
#gr-complete .nxb-pts.is-lg b { font: 800 22px/1 Outfit, 'DM Sans', sans-serif; }
#gr-complete .nxb-fresh {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px;
  background: #0000002e; font-size: 13px; font-weight: 600;
}
#gr-complete .nxb-zone {
  display: flex; align-items: flex-start; gap: 10px; font-size: 16.5px; font-weight: 500; max-width: 60ch;
  text-wrap: pretty;
}
#gr-complete .nxb-zone b { font-weight: 800; }
#gr-complete .nxb-zone-ico {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--gr-hero); margin-top: -1px; box-shadow: 0 2px 6px #0003;
}
#gr-complete .nxb-zone-ico svg { width: 16px; height: 16px; stroke-width: 3; }
#gr-complete .nxb-zone.is-up .nxb-zone-ico { color: var(--nxb-up); }
#gr-complete .nxb-zone.is-down .nxb-zone-ico { color: var(--nxb-down); }

/* ---------- the league track (real players only) ---------- */
#gr-complete .nxb-track { grid-column: 1 / -1; display: grid; gap: 7px; min-width: 0; }
#gr-complete .nxb-hero .nxb-track-cap { font-size: 13px; font-weight: 600; color: #fff; }
#gr-complete .nxb-track-cap b { font-weight: 800; }
#gr-complete .nxb-bar { position: relative; height: 32px; display: flex; align-items: center; }
#gr-complete .nxb-segs { display: flex; gap: 3px; width: 100%; height: 10px; }
#gr-complete .nxb-seg { display: block; flex: 1 1 0; min-width: 8px; height: 100%; border-radius: 3px; }
#gr-complete .nxb-seg:first-child { border-start-start-radius: 99px; border-end-start-radius: 99px; }
#gr-complete .nxb-seg:last-child { border-start-end-radius: 99px; border-end-end-radius: 99px; }
#gr-complete .nxb-seg.is-up { background: #fff; }
#gr-complete .nxb-seg.is-stay { background: #ffffff59; }
#gr-complete .nxb-seg.is-down { background: repeating-linear-gradient(135deg, #ffffffb8 0 4px, #ffffff38 4px 8px); }
#gr-complete .nxb-thumb {
  position: absolute; inset-block-start: 1px; width: 0; display: flex; justify-content: center;
  /* glides from where it last stood (--nxb-from) to where it stands now; nothing changed = nothing moves */
  animation: nxb-glide .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes nxb-glide { from { inset-inline-start: var(--nxb-from, 0%); } }
#gr-complete .nxb-thumb > span { flex: none; display: grid; }
#gr-complete .nxb-thumb .nx-face { box-shadow: 0 0 0 2.5px #fff, 0 3px 9px #00000059; }
#gr-complete .nxb-keys {
  list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 4px 14px;
  flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: #fff;
}
#gr-complete .nxb-key { display: inline-flex; align-items: center; gap: 4px; }
#gr-complete .nxb-key svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* ---------- the next goal and the one button ---------- */
#gr-complete .nxb-next {
  display: grid; gap: 14px; padding: 16px; border-radius: calc(var(--nx-r) - 2px);
  background: #00000026; border: 1px solid #ffffff2b;
}
#gr-complete .nxb-next-goal { display: flex; align-items: center; gap: 12px; min-width: 0; }
#gr-complete .nxb-next-face { display: grid; flex: none; }
#gr-complete .nxb-next-face .nx-face { box-shadow: 0 0 0 2px #ffffffd9; }
#gr-complete .nxb-next-ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #00000033;
}
#gr-complete .nxb-next-ico svg { width: 22px; height: 22px; }
#gr-complete .nxb-next-text { display: grid; gap: 5px; justify-items: start; min-width: 0; }
#gr-complete .nxb-next-text b { font-size: 16px; line-height: 1.35; font-weight: 700; }
#gr-complete .nxb-next-text .nx-cur { vertical-align: -2px; margin-inline: 1px; }
#gr-complete .nxb-next-text .nxb-nm { font-weight: 800; }
#gr-complete .nxb-hero .nxb-cta {
  width: 100%; min-height: 50px; font-size: 16px; background: #fff; color: var(--gr-hero);
  border-bottom-color: #00000038; box-shadow: 0 8px 18px #00000029;
}
#gr-complete .nxb-hero .nxb-cta:hover { background: #fff; filter: brightness(.97); }
#gr-complete .nxb-next.is-bare { background: none; border: 0; padding: 0; }

/* ---------- how the league works ---------- */
#gr-complete .nxb-how { margin: 0 0 4px; }
#gr-complete .nxb-how > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 8px 2px; cursor: pointer; border-radius: 10px;
}
#gr-complete .nxb-how > summary::-webkit-details-marker { display: none; }
#gr-complete .nxb-how > summary h2 { font-size: 22px; letter-spacing: -.5px; }
#gr-complete .nxb-how-chev {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  color: var(--gr-sub); background: color-mix(in srgb, var(--gr-ink) 6%, transparent);
}
#gr-complete .nxb-how-chev svg { transition: rotate .2s ease-out; }
#gr-complete .nxb-how[open] .nxb-how-chev svg { rotate: 180deg; }
#gr-complete .nxb-how-body { display: grid; gap: var(--nx-gap); padding: 4px 0 6px; }
#gr-complete .nxb-tiles { display: grid; gap: var(--nx-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
#gr-complete .nxb-tile { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; }
#gr-complete .nxb-tile-ico {
  flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: var(--gr-tint); color: var(--gr-blue);
}
#gr-complete .nxb-tile-ico svg { width: 21px; height: 21px; }
#gr-complete .nxb-tile-ico.is-rp { background: color-mix(in srgb, var(--nx-rp) 15%, transparent); color: var(--nx-rp); }
#gr-complete .nxb-tile-ico.is-good { background: var(--nx-good-soft); color: var(--nx-good); }
#gr-complete .nxb-tile-ico.is-warn, #gr-complete .nxb-tile-ico.is-coin { background: var(--nx-warn-soft); color: var(--nx-warn); }
#gr-complete .nxb-tile h3, #gr-complete .nxb-prizes h3 { font-size: 16.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
#gr-complete .nxb-tile p, #gr-complete .nxb-prizes p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--gr-sub); }

/* the prizes: one strip under the tiles, only when the server pays any */
#gr-complete .nxb-prizes { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 18px; }
#gr-complete .nxb-prizes-text { flex: 1 1 250px; min-width: 0; }
#gr-complete .nxb-bands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#gr-complete .nxb-bands li {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 700; background: color-mix(in srgb, var(--gr-ink) 5%, transparent);
}
#gr-complete .nxb-bands li > span:first-child { color: var(--gr-sub); }
#gr-complete .nxb-bands li.is-mine { background: var(--gr-tint); box-shadow: inset 0 0 0 1.5px var(--gr-blue); }
#gr-complete .nxb-bands li.is-mine > span:first-child { color: var(--gr-ink); }
#gr-complete .nxb-bands em {
  font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px;
  background: var(--gr-blue); color: var(--gr-on);
}

/* ---------- the board ---------- */
#gr-complete .nxb-legend {
  list-style: none; margin: -4px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 13.5px; color: var(--gr-sub);
}
#gr-complete .nxb-leg { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
#gr-complete .nxb-leg-key { display: inline-grid; flex: none; }
#gr-complete .nxb-leg svg { width: 15px; height: 15px; stroke-width: 2.6; }
#gr-complete .nxb-leg.is-up { color: var(--nxb-good); }
#gr-complete .nxb-leg.is-down { color: var(--nx-bad); }
#gr-complete .nxb-list { position: relative; }
/* "Find me" rests in a band of its own at the foot of the list, so it never covers the last row */
#gr-complete .nxb-list.has-find .nxb-rows { padding-bottom: 62px; }

/* podium: 2nd · 1st · 3rd, the first in the middle and a step higher */
#gr-complete .nxb-podium {
  list-style: none; margin: 0 auto; padding: 26px 16px 0; max-width: 640px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; align-items: end;
}
#gr-complete .nxb-pod {
  grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0;
  text-align: center; position: relative;
}
#gr-complete .nxb-pod.is-p1 { grid-column: 2; }
#gr-complete .nxb-pod.is-p2 { grid-column: 1; }
#gr-complete .nxb-pod.is-p3 { grid-column: 3; }
#gr-complete .nxb-pod-face { position: relative; display: grid; margin-bottom: 4px; }
#gr-complete .nxb-pod.is-p1 .nx-face { box-shadow: 0 0 0 3px var(--gr-panel), 0 0 0 5px var(--gr-blue); }
#gr-complete .nxb-crown {
  position: absolute; inset-block-start: -19px; inset-inline: 0; display: grid; justify-items: center;
  color: var(--nx-gold);
}
#gr-complete .nxb-crown svg { width: 22px; height: 22px; fill: currentColor; fill-opacity: .25; }
#gr-complete .nxb-pod .nxb-who { justify-content: center; max-width: 100%; flex: none; }
#gr-complete .nxb-pod-mark { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; flex-wrap: wrap; }
#gr-complete .nxb-pod .nxb-score { min-width: 0; justify-content: center; font-size: 15px; }
#gr-complete .nxb-pod .nxb-prize { min-width: 0; justify-content: center; }
#gr-complete .nxb-pod-step {
  order: 9; align-self: stretch; margin-top: 8px; display: grid; place-items: center; height: 40px;
  border-radius: 14px 14px 0 0; color: var(--gr-blue);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gr-blue) 15%, var(--gr-panel)), color-mix(in srgb, var(--gr-blue) 5%, var(--gr-panel)));
  font: 800 24px/1 Outfit, 'DM Sans', sans-serif;
}
#gr-complete .nxb-pod.is-p1 .nxb-pod-step { height: 78px; font-size: 36px; }
#gr-complete .nxb-pod.is-p2 .nxb-pod-step { height: 56px; font-size: 28px; }
#gr-complete .nxb-pod.nxb-me .nxb-pod-step { background: var(--gr-blue); color: var(--gr-on); }

/* rows from 4th */
#gr-complete .nxb-rows { list-style: none; margin: 0; padding: 0 0 6px; border-top: 1px solid var(--gr-line); }
#gr-complete .nxb-row {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 9px 20px;
}
#gr-complete .nxb-row + .nxb-row { border-top: 1px solid color-mix(in srgb, var(--gr-line) 62%, transparent); }
#gr-complete .nxb-rank {
  flex: none; width: 30px; text-align: center; color: var(--gr-sub);
  font: 700 16px/1 Outfit, 'DM Sans', sans-serif;
}
#gr-complete .nxb-who { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px 10px; }
#gr-complete .nxb-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 600; }
#gr-complete .nxb-row.is-bot .nxb-nm { font-weight: 500; }
#gr-complete .nxb-you { flex: none; font-size: 15.5px; font-weight: 800; }
#gr-complete .nxb-me .nxb-nm { font-weight: 500; }
#gr-complete .nxb-me .nx-rp { color: var(--nxb-rp); }
#gr-complete .nxb-who .nx-pill, #gr-complete .nxb-who .nx-division { flex: none; }
#gr-complete .nxb-mark { display: inline-grid; flex: none; }
#gr-complete .nxb-mark .nx-pill svg { stroke-width: 3; }
#gr-complete .nxb .nx-pill.is-good { color: var(--nxb-good); }
#gr-complete .nxb-score { flex: none; min-width: 104px; display: flex; justify-content: flex-end; font-size: 15.5px; }
#gr-complete .nxb-score .nx-rp b { color: var(--gr-ink); }
#gr-complete .nxb-pts { white-space: nowrap; color: var(--gr-sub); font-size: 13.5px; }
#gr-complete .nxb-pts b { color: var(--gr-ink); font-size: 15.5px; }
#gr-complete .nxb-hero .nxb-pts, #gr-complete .nxb-hero .nxb-pts b { color: #fff; }
#gr-complete .nxb-prize { flex: none; min-width: 84px; display: flex; justify-content: flex-end; font-size: 14px; }
#gr-complete .nxb-medals { flex: none; display: inline-flex; align-items: center; gap: 10px; }

/* a real player's zone, repeated as an edge so the eye can run down the list */
#gr-complete .nxb-row.is-up::before, #gr-complete .nxb-row.is-down::before, #gr-complete .nxb-row.nxb-me::before {
  content: ""; position: absolute; inset-block: 9px; inset-inline-start: 0; width: 4px;
  border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--nx-good);
}
#gr-complete .nxb-row.is-down::before { background: var(--nx-bad); }
#gr-complete .nxb-row.nxb-me { background: var(--gr-tint); }
#gr-complete .nxb-row.nxb-me::before { inset-block: 0; border-radius: 0; background: var(--gr-blue); }
#gr-complete .nxb-me:focus { outline: none; }
#gr-complete .nxb-me:focus-visible { outline: 2px solid var(--gr-blue); outline-offset: -2px; }
#gr-complete .nxb-row.is-found { animation: nxb-found 1.1s ease-out 1; }
@keyframes nxb-found {
  0%, 40% { box-shadow: inset 0 0 0 2px var(--gr-blue), 0 0 0 6px color-mix(in srgb, var(--gr-blue) 22%, transparent); }
  100% { box-shadow: inset 0 0 0 2px transparent, 0 0 0 0 transparent; }
}

/* tiny medals in a row: the kit's medal, still, with its count beside it */
#gr-complete .nxb-medals .nx-medal { display: inline-flex; align-items: center; gap: 2px; width: auto; perspective: none; }
#gr-complete .nxb-medals .nx-medal svg { width: var(--nx-medal); transform: none; filter: none; transition: none; }
#gr-complete .nxb-medals .nx-medal:hover svg { transform: none; }
#gr-complete .nxb-medals .nx-medal-shine { animation: none; opacity: 0; }
#gr-complete .nxb-medals .nx-medal-count {
  position: static; min-width: 0; padding: 0; background: none; box-shadow: none; color: var(--gr-sub);
  font: 700 12.5px/1 'DM Sans', sans-serif;
}

/* "Find me": floats at the foot of the window while the player's row is off screen */
#gr-complete .nxb-findbar {
  position: sticky; bottom: var(--nxb-dock); z-index: 6; height: 0; display: flex; justify-content: center;
  align-items: flex-end; pointer-events: none;
}
#gr-complete .nxb-findbar[hidden] { display: none; }
#gr-complete .nxb-find {
  pointer-events: auto; min-height: 44px; padding: 10px 18px; border-radius: 99px; font-size: 14px; font-weight: 700;
  background: var(--gr-ink); color: var(--gr-panel); border-color: transparent; box-shadow: 0 10px 24px #00000047;
}
#gr-complete .nxb-find:hover { background: var(--gr-ink); filter: brightness(1.15); }

/* ---------- the division ladder ---------- */
#gr-complete .nxb-steps {
  list-style: none; margin: 0; padding: 18px 16px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 6px;
}
#gr-complete .nxb-step {
  flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 6px;
  padding: 12px 4px; border-radius: 16px; text-align: center; font-size: 14.5px;
}
#gr-complete .nxb-step b { font-weight: 700; overflow-wrap: normal; white-space: nowrap; }
#gr-complete .nxb-step.is-here { flex-grow: 1.5; background: var(--gr-tint); box-shadow: inset 0 0 0 2px var(--gr-blue); }
#gr-complete .nxb-here {
  padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; line-height: 1.25; white-space: nowrap;
  background: var(--gr-blue); color: var(--gr-on);
}
#gr-complete .nxb-step-arrow { flex: none; align-self: flex-start; margin-top: 26px; display: grid; color: var(--gr-sub); }
#gr-complete .nxb-step-arrow:dir(rtl) svg { transform: scaleX(-1); }

/* ---------- tablet ---------- */
@container gr-shell (max-width: 850px) {
  /* one column: the figure keeps its line, and the next goal becomes a row with its button beside it */
  #gr-complete .nxb-hero-main { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #gr-complete .nxb-stand .nxb-big { font-size: 56px; }
  #gr-complete .nxb-next { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; }
  #gr-complete .nxb-next-goal { flex: 1 1 240px; }
  #gr-complete .nxb-hero .nxb-cta { width: auto; flex: 0 0 auto; padding-inline: 28px; }
  #gr-complete .nxb-next.is-bare { justify-content: flex-start; }
  #gr-complete .nxb-tile { flex-direction: column; gap: 10px; }
}

/* ---------- phone ---------- */
@container gr-shell (max-width: 620px) {
  #gr-complete .nxb .nx-head .nx-tabs { width: 100%; }
  #gr-complete .nxb button.nx-tab { min-height: 44px; }
  #gr-complete .nxb-hero { gap: 14px; padding: 18px; }
  #gr-complete .nxb-hero-top { gap: 10px; }
  #gr-complete .nxb-hero-top > .nx-division { --nx-div: 40px !important; }
  #gr-complete .nxb-hero-ico { width: 40px; height: 40px; }
  #gr-complete .nxb-hero-id { display: grid; gap: 2px; justify-content: start; }
  #gr-complete .nxb-hero-id b { font-size: 16.5px; }
  #gr-complete .nxb-ends { padding: 0; background: none; font-size: 13px; opacity: .92; gap: 5px; }
  #gr-complete .nxb-ends svg { width: 14px; height: 14px; }
  #gr-complete .nxb-hero-main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #gr-complete .nxb-hero-you { gap: 10px; }
  #gr-complete .nxb-figure { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 10px; width: 100%; }
  #gr-complete .nxb-stand { font-size: 15px; }
  #gr-complete .nxb-stand .nxb-big { font-size: 42px; margin-inline: 2px 1px; }
  #gr-complete .nxb-week .nx-cur.is-lg { font-size: 20px; }
  #gr-complete .nxb-stand.is-invite { font-size: 26px; }
  /* the week's score sits beside the figure; what the last game added gets a line of its own */
  #gr-complete .nxb-hero .nxb-week { display: contents; font-size: 12.5px; }
  #gr-complete .nxb-week-score { grid-column: 2; grid-row: 1; align-self: end; display: grid; justify-items: end; gap: 3px; padding-bottom: 3px; }
  #gr-complete .nxb-fresh { grid-column: 1 / -1; justify-self: start; font-size: 12.5px; }
  #gr-complete .nxb-figure.is-stacked { grid-template-columns: minmax(0, 1fr); }
  #gr-complete .nxb-figure.is-stacked .nxb-week-score { grid-column: 1; grid-row: auto; display: inline-flex; gap: 7px; font-size: 14px; padding-bottom: 0; }
  #gr-complete .nxb-total .nx-cur.is-xl, #gr-complete .nxb-total .nxb-big { font-size: 44px; }
  #gr-complete .nxb-zone { font-size: 15px; }
  #gr-complete .nxb-zone-ico { width: 24px; height: 24px; }
  #gr-complete .nxb-next { display: grid; padding: 12px; gap: 12px; }
  #gr-complete .nxb-next.is-bare { padding: 0; }
  #gr-complete .nxb-next-face .nx-face, #gr-complete .nxb-next-ico { width: 38px; height: 38px; }
  #gr-complete .nxb-next-text b { font-size: 15px; }
  #gr-complete .nxb-hero .nxb-cta { width: 100%; min-height: 48px; }

  #gr-complete .nxb-how > summary h2 { font-size: 19px; }
  #gr-complete .nxb-tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #gr-complete .nxb-tile { flex-direction: row; gap: 12px; padding: 13px 14px; }
  #gr-complete .nxb-tile-ico { width: 38px; height: 38px; border-radius: 12px; }
  #gr-complete .nxb-tile h3, #gr-complete .nxb-prizes h3 { font-size: 15.5px; }
  #gr-complete .nxb-prizes { padding: 13px 14px; }
  #gr-complete .nxb-prizes-text { flex-basis: 200px; }
  #gr-complete .nxb-bands li { padding: 7px 10px; font-size: 13.5px; }

  #gr-complete .nxb-podium { padding: 24px 8px 0; gap: 0 6px; }
  #gr-complete .nxb-pod .nx-face { width: 54px; height: 54px; }
  #gr-complete .nxb-pod.is-p1 .nx-face { width: 68px; height: 68px; }
  #gr-complete .nxb-pod .nxb-nm, #gr-complete .nxb-pod .nxb-you { font-size: 14px; }
  #gr-complete .nxb-pod .nxb-score { font-size: 14px; }
  #gr-complete .nxb-pod.is-p1 .nxb-pod-step { height: 64px; }
  #gr-complete .nxb-pod.is-p2 .nxb-pod-step { height: 46px; }
  #gr-complete .nxb-pod-step { height: 32px; }

  /* a row: rank · face · name + mark · score, with the prize under the score */
  #gr-complete .nxb-row {
    display: grid; grid-template-columns: 24px 36px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    gap: 0 10px; align-items: center; min-height: 58px; padding: 8px 12px;
  }
  #gr-complete .nxb-row > .nxb-rank { grid-area: 1 / 1 / 3 / 2; width: 24px; font-size: 14.5px; }
  #gr-complete .nxb-row > .nx-face { grid-area: 1 / 2 / 3 / 3; width: 36px; height: 36px; }
  #gr-complete .nxb-row > .nxb-who { grid-area: 1 / 3 / 3 / 4; gap: 6px; }
  #gr-complete .nxb-row > .nxb-score { grid-area: 1 / 4 / 3 / 5; min-width: 0; font-size: 14.5px; }
  #gr-complete .nxb-row > .nxb-prize { grid-area: 2 / 4 / 3 / 5; min-width: 0; font-size: 12.5px; align-self: start; }
  #gr-complete .nxb-row > .nxb-prize ~ .nxb-score { grid-area: 1 / 4 / 2 / 5; align-self: end; }
  #gr-complete .nxb-row > .nxb-medals { grid-area: 2 / 4 / 3 / 5; gap: 6px; justify-content: flex-end; align-self: start; }
  #gr-complete .nxb-row > .nxb-medals ~ .nxb-score { grid-area: 1 / 4 / 2 / 5; align-self: end; }
  #gr-complete .nxb-nm, #gr-complete .nxb-you { font-size: 14.5px; }
  /* the zone mark keeps its arrow; its words stay for screen readers */
  #gr-complete .nxb-row .nxb-mark .nx-pill { padding: 0; width: 22px; height: 22px; justify-content: center; }
  #gr-complete .nxb-row .nxb-mark .nx-pill > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #gr-complete .nxb-row .nx-pill.is-muted { padding: 3px 8px; font-size: 11px; }
  #gr-complete .nxb-medals .nx-medal { --nx-medal: 18px !important; }
  #gr-complete .nxb-pod .nxb-medals { gap: 4px; flex-wrap: wrap; justify-content: center; }
  #gr-complete .nxb-pod .nxb-medals .nx-medal { --nx-medal: 16px !important; gap: 1px; }
  #gr-complete .nxb-pod .nxb-medals .nx-medal-count { font-size: 11px; }
  #gr-complete .nxb-pod-mark { gap: 4px; }

  #gr-complete .nxb-steps { padding: 12px 8px; gap: 0; }
  #gr-complete .nxb-step { padding: 8px 1px; font-size: 11px; gap: 5px; border-radius: 12px; letter-spacing: -.1px; }
  #gr-complete .nxb-step.is-here { flex-grow: 1.9; }
  #gr-complete .nxb-step .nx-division { --nx-div: 34px !important; }
  #gr-complete .nxb-step-arrow { margin-top: 18px; }
  #gr-complete .nxb-step-arrow svg { width: 11px; height: 11px; }
  #gr-complete .nxb-here { padding: 2px 7px; font-size: 10.5px; white-space: nowrap; }
}

/* ---------- motion: all of it off when the player or the system asks ---------- */
#gr-complete[data-motion=off] .nxb-hero.is-entering,
#gr-complete[data-motion=off] .nxb-thumb,
#gr-complete[data-motion=off] .nxb-row.is-found { animation: none; }
#gr-complete[data-motion=off] .nxb-how-chev svg { transition: none; }
@media (prefers-reduced-motion: reduce) {
  #gr-complete .nxb-hero.is-entering, #gr-complete .nxb-thumb, #gr-complete .nxb-row.is-found { animation: none; }
  #gr-complete .nxb-how-chev svg { transition: none; }
}