/* ============================================================
   GameRoch — Tournaments: the hub, a tournament's page, the hall of fame
   (V3 Live Update 1, prefix nxe-)

   Built on the nx- kit (css/next.css). Everything that belongs to the THEME
   uses the theme tokens. The three medal metals mean the same in every theme
   (a medal is drawn by the kit; here its metal only tints the strip or the
   ring of the player who is on course for it).

   One loud panel per screen (.nx-hero); everything under it is calm cards.
   Layout follows the SHELL's width (container gr-shell), never the window's.
   Motion: the kit's own shine on the medals, one entrance for the hub's
   podium, and a one-off pulse when the player's result got better while they
   were away in a game. All of it is removed under [data-motion=off] and
   prefers-reduced-motion (end of file).
   ============================================================ */

#gr-complete .nxe {
  --nxe-diamond: #2aa8e0;
  --nxe-platinum: #8f9db0;
  --nxe-gold: #e6a100;
  /* secondary text that still clears 4.5:1 on a tinted strip (--gr-sub alone does not) */
  --nxe-sub: color-mix(in srgb, var(--gr-sub) 58%, var(--gr-ink));
  display: grid; gap: var(--nx-gap); min-width: 0;
}
#gr-complete .nxe:focus { outline: none; }
#gr-complete .nxe:focus-visible { outline: 3px solid var(--gr-blue); outline-offset: 4px; border-radius: var(--nx-r); }
#gr-complete .nxe ol, #gr-complete .nxe ul { list-style: none; margin: 0; padding: 0; }
#gr-complete .nxe p { margin: 0; }
#gr-complete .nxe > .nx-sect { margin: 14px 0 -2px; }
#gr-complete .nxe > .nx-sect p { color: var(--nxe-sub); }
#gr-complete .nxe-top { display: flex; min-width: 0; }
#gr-complete .nxe button.nxe-back {
  min-height: 44px; padding-block: 8px; padding-inline: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; gap: 8px;
}
#gr-complete .nxe button.nxe-all { min-height: 44px; padding: 8px 10px; font-size: 14px; gap: 6px; }
#gr-complete .nxe button.nxe-more { min-height: 46px; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; }
#gr-complete .nxe .gr-play.nxe-play {
  min-height: 46px; padding: 10px 16px; border-radius: 12px; gap: 8px;
  font: 800 14.5px/1.2 Outfit, 'DM Sans', sans-serif;
}
#gr-complete .nxe .nx-pill svg { flex: none; }
#gr-complete .nxe-you {
  flex: none; padding: 2px 7px; border-radius: 99px; background: var(--gr-blue); color: var(--gr-on);
  font: 800 10.5px/1.5 'DM Sans', sans-serif; letter-spacing: .05em; text-transform: uppercase;
}
#gr-complete .nxe-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gr-complete .nxe-noart {
  width: 100%; height: 100%; display: grid; place-items: center; background: var(--gr-tint); color: var(--gr-blue);
}
#gr-complete .nxe-noart svg { width: 45%; height: 45%; }

/* ---------- the loud panel ---------- */
#gr-complete .nxe-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head stage" "do stage";
  column-gap: 36px; row-gap: 16px; align-items: center; padding: 30px 36px 0;
}
/* White words must hold 4.5:1 where the theme's gradient turns light (its far
   corner in Everyday Blue and Playground), so the panel is deepened a little. */
#gr-complete .nxe-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, #00000024 0%, #0000003d 52%, #00000052 100%);
}
#gr-complete .nxe-hero-head { grid-area: head; align-self: end; display: grid; gap: 10px; min-width: 0; }
#gr-complete .nxe-hero h1 {
  color: #fff; font: 800 clamp(28px, 3.1cqi, 42px)/1.04 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
#gr-complete .nxe-hero .nxe-idea { color: #fff; font-size: 16px; line-height: 1.45; max-width: 36ch; }
#gr-complete .nxe-hero-do {
  grid-area: do; align-self: start; display: grid; gap: 12px; justify-items: start; min-width: 0; padding-bottom: 30px;
}
#gr-complete .nxe-when {
  display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; padding-inline: 10px 12px; border-radius: 99px;
  background: #00000038; color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.3;
}
#gr-complete .nxe-when svg { width: 15px; height: 15px; flex: none; }
#gr-complete .nxe-when .nx-countdown { color: #fff; font-weight: 800; }
#gr-complete .nxe-hero .nxe-next {
  color: #fff; font: 700 19px/1.25 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; margin-top: 4px;
}
#gr-complete .nxe-hero .nxe-next b { font-weight: 800; }
#gr-complete .nxe-hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
#gr-complete .nxe-hero .gr-play.nxe-go {
  min-height: 50px; padding: 12px 22px; border-radius: 14px; gap: 9px; max-width: 100%;
  font: 800 15.5px/1.2 Outfit, 'DM Sans', sans-serif;
  background: #fff; color: var(--gr-hero); border-bottom-color: #0000002e;
  box-shadow: 0 14px 26px -12px #000000a6;
}
#gr-complete .nxe-hero .gr-play.nxe-go:hover { background: #fff; filter: brightness(.97); }
#gr-complete .nxe-hero .gr-play.nxe-go > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gr-complete .nxe-hero button.nxe-mine {
  min-height: 50px; padding-block: 8px; padding-inline: 16px 12px; border-radius: 14px; gap: 10px;
  background: #00000038; color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: inset 0 0 0 1px #ffffff40;
}
#gr-complete .nxe-hero button.nxe-mine:hover { background: #00000057; }
#gr-complete .nxe-mine-n { display: inline-flex; align-items: center; gap: 9px; }
#gr-complete .nxe-mine-n .nx-medal-count { color: #fff; font-size: 13.5px; }
#gr-complete .nxe-hero button.nxe-mine > svg { width: 16px; height: 16px; opacity: .9; }
/* what will be said here is not known yet: the space is kept, nothing is claimed */
#gr-complete .nxe-ph { display: block; border-radius: 12px; background: #ffffff2b; }
#gr-complete .nxe-ph.is-line { width: min(260px, 70%); height: 24px; }
#gr-complete .nxe-ph.is-line.is-short { width: min(190px, 55%); height: 30px; border-radius: 99px; }
#gr-complete .nxe-ph.is-btn { width: 190px; height: 50px; border-radius: 14px; }

/* the podium of medals: 1st in the middle, on smoked glass so the small words hold their contrast */
#gr-complete .nxe-stage {
  --nxe-m: clamp(92px, 10.2cqi, 122px);
  grid-area: stage; align-self: end; position: relative;
  display: grid; grid-template-columns: 1fr 1.16fr 1fr; align-items: end; gap: 8px;
  width: clamp(340px, 40cqi, 492px); padding-top: 6px;
}
/* a spotlight on the first place: soft rays and a glow, behind the medals */
#gr-complete .nxe-stage::before {
  content: ""; position: absolute; inset-inline: 6%; top: -22%; aspect-ratio: 1; pointer-events: none;
  background:
    radial-gradient(closest-side, #ffffff4d, #ffffff00 58%),
    repeating-conic-gradient(from 4deg, #ffffff1f 0deg 8deg, #ffffff00 8deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 12%, #0000 82%);
  mask: radial-gradient(closest-side, #000 12%, #0000 82%);
}
#gr-complete .nxe-prize { position: relative; display: grid; justify-items: center; min-width: 0; }
#gr-complete .nxe-prize.is-p1 { order: 2; }
#gr-complete .nxe-prize.is-p2 { order: 1; }
#gr-complete .nxe-prize.is-p3 { order: 3; }
#gr-complete .nxe-stage .nxe-prize.is-p1 { --nxe-m: clamp(116px, 12.8cqi, 154px); }
/* the medal stands ON its step: its ground shadow falls on the step's top face */
#gr-complete .nxe-stage .nx-medal { width: var(--nxe-m); margin-bottom: calc(var(--nxe-m) * -.07); z-index: 1; }
#gr-complete .nxe-step {
  position: relative; width: 100%; display: grid; justify-items: center; align-content: start; gap: 3px;
  padding: 16px 6px 10px; color: #fff;
  background: linear-gradient(180deg, #00000057, #00000038);
}
/* the step's top face: a lighter plane seen from just above, so the podium has depth */
#gr-complete .nxe-step::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 13px; pointer-events: none;
  background: linear-gradient(180deg, #ffffff2e, #ffffff4d);
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}
#gr-complete .nxe-prize.is-p1 .nxe-step { min-height: 96px; }
#gr-complete .nxe-prize.is-p2 .nxe-step { min-height: 74px; }
#gr-complete .nxe-prize.is-p3 .nxe-step { min-height: 60px; }
#gr-complete .nxe-step > b { font: 800 27px/1 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; }
#gr-complete .nxe-prize.is-p1 .nxe-step > b { font-size: 32px; }
#gr-complete .nxe-step-n { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
/* the step the player holds right now carries their face */
#gr-complete .nxe-prize.is-held .nxe-step { box-shadow: inset 0 0 0 2px #fff; }
#gr-complete .nxe-prize.is-held .nxe-step::before { background: linear-gradient(180deg, #ffffff73, #ffffffb3); }
#gr-complete .nxe-flag {
  position: absolute; top: 0; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 96%; translate: 0 -62%; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding-block: 2px; padding-inline: 2px 10px; border-radius: 99px;
  background: #fff; color: var(--gr-hero); box-shadow: 0 8px 16px -8px #000000b3;
}
#gr-complete .nxe-flag > b { font: 800 12.5px/1 Outfit, 'DM Sans', sans-serif; letter-spacing: .01em; }
#gr-complete .nxe-flag .nx-face { box-shadow: none; }

/* ---------- live tournaments: one card each ---------- */
#gr-complete .nxe-grid { display: grid; gap: var(--nx-gap); grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
#gr-complete .nxe-card {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 16px; min-width: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
#gr-complete .nxe-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px #10203c66, var(--gr-shadow); }
#gr-complete .nxe-card.is-in { border-color: color-mix(in srgb, var(--gr-blue) 34%, var(--gr-line)); }
#gr-complete .nxe-card.is-diamond { border-color: color-mix(in srgb, var(--nxe-diamond) 62%, var(--gr-line)); }
#gr-complete .nxe-card.is-platinum { border-color: color-mix(in srgb, var(--nxe-platinum) 70%, var(--gr-line)); }
#gr-complete .nxe-card.is-gold { border-color: color-mix(in srgb, var(--nxe-gold) 62%, var(--gr-line)); }
#gr-complete .nxe-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
#gr-complete .nxe-cover {
  width: 60px; height: 60px; flex: none; display: block; overflow: hidden; border-radius: 15px;
  box-shadow: 0 8px 14px -9px #0b1a3380, 0 0 0 1px #00000014;
}
#gr-complete .nxe-cover img, #gr-complete .nxe-thumb img, #gr-complete .nxe-poster img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
#gr-complete .nxe-card-id { display: grid; gap: 6px; min-width: 0; }
#gr-complete .nxe-pills { display: flex; flex-wrap: wrap; gap: 6px; }
#gr-complete .nxe-card h3 { font: 700 18px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
#gr-complete .nxe .nx-pill.nxe-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
}
#gr-complete .nxe-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--nxe-sub); font-size: 13px; line-height: 1.35; }
#gr-complete .nxe-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
#gr-complete .nxe-meta svg { width: 14px; height: 14px; flex: none; }
#gr-complete .nxe-meta .nx-countdown { color: var(--gr-ink); }

/* where the player stands — the line a returning player looks for first */
#gr-complete .nxe-stand {
  display: flex; align-items: center; gap: 10px; align-self: start; min-height: 58px; padding: 9px 12px;
  border-radius: var(--nx-r-sm); background: var(--gr-tint); color: var(--gr-ink); font-size: 14px; line-height: 1.3;
}
#gr-complete .nxe-stand > svg { width: 18px; height: 18px; flex: none; color: var(--nxe-sub); }
#gr-complete .nxe-stand-t { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
#gr-complete .nxe-stand b { font: 800 17px/1.1 Outfit, 'DM Sans', sans-serif; }
#gr-complete .nxe-stand .nx-medal { margin-block: -4px; }
#gr-complete .nxe-course { color: var(--nxe-sub); font-size: 12.5px; font-weight: 700; }
#gr-complete .nxe-stand.is-diamond { background: color-mix(in srgb, var(--nxe-diamond) 16%, var(--gr-panel)); }
#gr-complete .nxe-stand.is-platinum { background: color-mix(in srgb, var(--nxe-platinum) 20%, var(--gr-panel)); }
#gr-complete .nxe-stand.is-gold { background: color-mix(in srgb, var(--nxe-gold) 17%, var(--gr-panel)); }
#gr-complete .nxe-stand.is-out, #gr-complete .nxe-stand.is-unknown {
  background: none; box-shadow: inset 0 0 0 1.5px var(--gr-line); color: var(--nxe-sub); font-size: 13.5px;
}
#gr-complete .nxe-stand.is-wait { background: none; padding: 0; }
#gr-complete .nxe-stand.is-wait .nx-skeleton { width: 100%; }
#gr-complete .nxe .nx-skeleton.nxe-sk-line > span { height: 58px; }
#gr-complete .nxe .nx-pill.nxe-new { flex: none; }
#gr-complete .nxe-card-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; align-self: end; min-width: 0; }
#gr-complete .nxe .nxe-card-act .gr-play.nxe-play { flex: 1 1 auto; padding-inline: 12px; white-space: nowrap; }
#gr-complete .nxe .nxe-card-act button.nxe-more { flex: 0 1 auto; padding-inline: 13px; white-space: nowrap; }

/* ---------- hall of fame: a row per finished tournament ---------- */
#gr-complete .nxe-fames { display: grid; gap: 10px; }
#gr-complete .nxe-fame {
  display: grid; grid-template-columns: minmax(210px, 290px) minmax(0, 1fr); align-items: center; gap: 8px 16px;
  padding: 8px; padding-inline-end: 14px; min-width: 0;
}
#gr-complete .nxe-fame.is-mine { border-color: color-mix(in srgb, var(--gr-blue) 50%, var(--gr-line)); }
#gr-complete .nxe button.nxe-fame-id {
  justify-content: flex-start; text-align: start; gap: 12px; min-height: 60px; min-width: 0; padding: 6px 8px; border-radius: 13px;
}
#gr-complete .nxe-thumb { width: 46px; height: 46px; flex: none; display: block; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px #00000014; }
#gr-complete .nxe-fame-t { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
#gr-complete .nxe-fame-t > b { font: 700 16px/1.2 Outfit, 'DM Sans', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gr-complete .nxe-fame-t > small { display: flex; flex-wrap: wrap; gap: 0 6px; color: var(--nxe-sub); font-size: 12.5px; font-weight: 500; }
#gr-complete .nxe-fame-t > small > span + span::before { content: "·"; margin-inline-end: 6px; }
#gr-complete .nxe-fame-id > svg { width: 16px; height: 16px; color: var(--nxe-sub); flex: none; }
#gr-complete .nxe-winners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
#gr-complete .nxe-winner {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding-block: 5px; padding-inline: 6px 12px;
  border-radius: 13px; background: color-mix(in srgb, var(--gr-ink) 4.5%, transparent);
}
#gr-complete .nxe-winner.is-me { background: var(--gr-tint); box-shadow: inset 0 0 0 1.5px var(--gr-blue); }
#gr-complete .nxe-w-who { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; font-size: 14px; font-weight: 600; }
#gr-complete .nxe-w-score { font: 800 15px/1 Outfit, 'DM Sans', sans-serif; color: var(--gr-ink); }
#gr-complete .nxe-counting {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 12px; border-radius: 12px;
  background: var(--nx-warn-soft); color: var(--nx-warn); font-size: 13.5px; font-weight: 700;
}
#gr-complete .nxe-counting svg { width: 15px; height: 15px; flex: none; }
#gr-complete .nxe-week { display: grid; gap: 10px; min-width: 0; }
#gr-complete .nxe-week-h { margin-top: 10px; font-size: 18px; letter-spacing: -.01em; }

/* ---------- loading: this screen's own skeletons ---------- */
#gr-complete .nxe .nx-skeleton.nxe-sk-cards { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--nx-gap); }
#gr-complete .nxe .nx-skeleton.nxe-sk-cards > span { height: 236px; border-radius: var(--nx-r); }
#gr-complete .nxe .nx-skeleton.nxe-sk-rows > span { height: 62px; }
#gr-complete .nxe .nx-skeleton.nxe-sk-hero > span { height: 250px; border-radius: calc(var(--nx-r) + 4px); }
#gr-complete .nxe .nx-skeleton.nxe-sk-tiles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* ---------- "switching on": the games that can be played meanwhile ---------- */
#gr-complete .nxe-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
#gr-complete .nxe-tile { display: flex; align-items: center; gap: 12px; padding: 12px; min-width: 0; }
#gr-complete .nxe-tile h3 { flex: 1 1 auto; min-width: 0; font: 700 16px/1.2 Outfit, 'DM Sans', sans-serif; overflow-wrap: break-word; }
#gr-complete .nxe-tile .nxe-cover { width: 52px; height: 52px; border-radius: 13px; }
#gr-complete .nxe .nxe-tile .gr-play.nxe-play { flex: none; white-space: nowrap; }

/* ---------- a tournament's page ---------- */
#gr-complete .nxe-hero.is-page {
  grid-template-columns: 124px minmax(0, 1fr) minmax(300px, 360px);
  grid-template-areas: "poster id me" "poster rule me";
  align-items: center; align-content: center; column-gap: 24px; row-gap: 10px; padding: 26px 28px;
}
/* the title block dissolves into the hero's own grid, so the poster, the title and the rule
   can be placed one by one (and re-placed on a phone); its children then have to sit above the
   panel's overlays by themselves */
#gr-complete .nxe-hero.is-page .nxe-hero-head { display: contents; }
#gr-complete .nxe-hero.is-page .nxe-hero-head > * { position: relative; z-index: 1; }
#gr-complete .nxe-poster {
  grid-area: poster; width: 100%; aspect-ratio: 3 / 4; display: block; overflow: hidden; border-radius: 18px;
  box-shadow: 0 0 0 3px #ffffff38, 0 20px 30px -16px #000000b3;
}
#gr-complete .nxe-page-id { grid-area: id; align-self: end; display: grid; gap: 9px; justify-items: start; min-width: 0; }
#gr-complete .nxe-hero .nx-pill { background: #00000040; color: #fff; padding: 5px 11px; font-size: 12.5px; }
#gr-complete .nxe-hero .nx-pill.nxe-live::before { background: #5df2a2; box-shadow: 0 0 0 3px #5df2a240; }
#gr-complete .nxe-hero .nx-pill.nxe-newgame { background: #fff; color: var(--gr-hero); }
#gr-complete .nxe-hero .nxe-meta { color: #fff; font-size: 14px; font-weight: 600; gap: 6px 18px; }
#gr-complete .nxe-hero .nxe-meta .nx-countdown { color: #fff; font-weight: 800; }
/* the rule, in one plain sentence, lined up under the title */
#gr-complete .nxe-hero .nxe-rule {
  grid-area: rule; align-self: start; color: #fff; font-size: 14.5px; line-height: 1.45; max-width: 46ch;
}

/* the player's own card: the place is the one big figure of this screen */
#gr-complete .nxe-me {
  grid-area: me; display: grid; gap: 8px; align-content: center; justify-items: start; min-width: 0;
  padding: 18px 20px 20px; border-radius: 20px; background: #0000003d; color: #fff;
  box-shadow: inset 0 0 0 1px #ffffff26;
}
#gr-complete .nxe-me-l { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
#gr-complete .nxe-hero .nxe-me-big { display: flex; align-items: center; gap: 14px; color: #fff; }
#gr-complete .nxe-me-big > b { flex: none; white-space: nowrap; font: 800 clamp(46px, 5cqi, 62px)/.95 Outfit, 'DM Sans', sans-serif; letter-spacing: -.03em; }
#gr-complete .nxe-me-medal { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
#gr-complete .nxe-me-medal > small { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.25; }
#gr-complete .nxe-hero .nxe-me-stats { color: #fff; font-size: 14.5px; font-weight: 500; }
#gr-complete .nxe-me-stats b { font: 800 17px/1 Outfit, 'DM Sans', sans-serif; }
#gr-complete .nxe-me-say b { font: inherit; font-weight: 800; }
#gr-complete .nxe-hero .nxe-me-say { color: #fff; font: 700 21px/1.25 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; }
#gr-complete .nxe-hero .nxe-goal { color: #fff; font: 700 15.5px/1.3 Outfit, 'DM Sans', sans-serif; margin-top: 2px; }
#gr-complete .nxe-goal.is-lead { display: inline-flex; align-items: center; gap: 8px; }
#gr-complete .nxe-goal.is-lead svg { width: 18px; height: 18px; color: #ffd34d; flex: none; }
#gr-complete .nxe-me .nx-bar { width: 100%; height: 8px; }
#gr-complete .nxe-me .nx-pill.nxe-new { background: #fff; color: var(--gr-hero); }
#gr-complete .nxe-me .gr-play.nxe-go { width: 100%; margin-top: 8px; }
#gr-complete .nxe-me-wait { width: 100%; }
/* "Try again" on the place card: a quiet outline on the hero's dark glass; the white Play stays the one loud button */
#gr-complete .nxe-me .nxe-me-retry {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px;
  background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #ffffff8c; font: inherit; font-weight: 700; cursor: pointer;
}
#gr-complete .nxe-me .nxe-me-retry svg { width: 17px; height: 17px; }
#gr-complete .nxe-me .nxe-me-retry:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (hover: hover) { #gr-complete .nxe-me .nxe-me-retry:hover { background: #ffffff1f; } }
#gr-complete .nxe-me .nx-skeleton.nxe-sk-line > span { height: 30px; background: #ffffff2b; animation: none; }

#gr-complete .nxe-cols { display: grid; gap: var(--nx-gap); min-width: 0; }
#gr-complete .nxe-cols.has-side { grid-template-columns: minmax(0, 1fr) 304px; align-items: start; }
#gr-complete .nxe-main { display: grid; gap: var(--nx-gap); min-width: 0; }
#gr-complete .nxe-side { position: sticky; top: 16px; display: grid; gap: var(--nx-gap); min-width: 0; }

/* the prizes */
#gr-complete .nxe-pz { display: grid; gap: 12px; padding: 18px; }
#gr-complete .nxe-pz h2, #gr-complete .nxe-box-h h2 { font-size: 20px; letter-spacing: -.01em; }
#gr-complete .nxe-pz-list { display: grid; gap: 8px; }
#gr-complete .nxe-pz-list > li {
  display: flex; align-items: center; gap: 14px; padding: 6px 12px; border-radius: 14px; min-width: 0;
  background: color-mix(in srgb, var(--gr-ink) 4.5%, transparent);
}
#gr-complete .nxe-pz-t { display: grid; gap: 2px; min-width: 0; }
#gr-complete .nxe-pz-t > b { font: 800 21px/1 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; }
#gr-complete .nxe-pz-t > span { color: var(--nxe-sub); font-size: 13.5px; font-weight: 600; }
#gr-complete .nxe-pz-note { display: flex; align-items: center; gap: 8px; color: var(--nxe-sub); font-size: 13px; line-height: 1.4; }
#gr-complete .nxe-pz-note svg { width: 16px; height: 16px; flex: none; color: var(--gr-blue); }

/* the standings */
#gr-complete .nxe-box { display: grid; gap: 14px; padding: 20px; min-width: 0; }
#gr-complete .nxe-box-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
#gr-complete .nxe-box-h p { color: var(--nxe-sub); font-size: 13.5px; }
#gr-complete .nxe-podium {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px;
  width: 100%; max-width: 620px; justify-self: center; padding-top: 4px;
}
#gr-complete .nxe-pod { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; text-align: center; }
#gr-complete .nxe-pod.is-p1 { order: 2; }
#gr-complete .nxe-pod.is-p2 { order: 1; }
#gr-complete .nxe-pod.is-p3 { order: 3; }
/* the winners: the medal is theirs, and it is the biggest thing in the box */
#gr-complete .nxe-podium.is-won .nxe-pod > .nx-medal { width: 84px; margin-bottom: 2px; }
#gr-complete .nxe-podium.is-won .nxe-pod.is-p1 > .nx-medal { width: 108px; }
#gr-complete .nxe-pod-face { display: grid; place-items: center; }
#gr-complete .nxe-pod-face.is-empty {
  width: 52px; height: 52px; border-radius: 50%; color: var(--nxe-sub); box-shadow: inset 0 0 0 2px var(--gr-line);
  background: color-mix(in srgb, var(--gr-ink) 4%, transparent);
}
#gr-complete .nxe-pod-face.is-empty svg { width: 18px; height: 18px; }
#gr-complete .nxe-pod-who {
  display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; min-width: 0; margin-top: 5px;
  font-size: 14.5px; font-weight: 700; line-height: 1.25;
}
#gr-complete .nxe-pod.is-empty .nxe-pod-who { color: var(--nxe-sub); font-weight: 600; font-size: 13.5px; }
#gr-complete .nxe-pod-score { font: 800 22px/1.1 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; }
#gr-complete .nxe-pod.is-p1 .nxe-pod-score { font-size: 26px; }
#gr-complete .nxe-pod > small { color: var(--nxe-sub); font-size: 12.5px; }
#gr-complete .nxe-pod-step {
  width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px 14px 0 0; color: var(--gr-blue);
  background: linear-gradient(180deg, var(--gr-tint), color-mix(in srgb, var(--gr-tint) 35%, var(--gr-panel)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gr-blue) 28%, transparent);
}
#gr-complete .nxe-pod-step > b { font: 800 22px/1 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; }
#gr-complete .nxe-pod.is-p1 .nxe-pod-step { height: 84px; }
#gr-complete .nxe-pod.is-p2 .nxe-pod-step { height: 66px; }
#gr-complete .nxe-pod.is-p3 .nxe-pod-step { height: 54px; }
#gr-complete .nxe-pod-step > .nx-medal { width: 40px; }
#gr-complete .nxe-pod.is-p1 .nxe-pod-step > .nx-medal { width: 50px; }
#gr-complete .nxe-podium.is-won .nxe-pod.is-p1 .nxe-pod-step { height: 62px; }
#gr-complete .nxe-podium.is-won .nxe-pod.is-p2 .nxe-pod-step { height: 46px; }
#gr-complete .nxe-podium.is-won .nxe-pod.is-p3 .nxe-pod-step { height: 34px; }
#gr-complete .nxe-pod.is-p1 .nxe-pod-step > b { font-size: 27px; }
#gr-complete .nxe-pod.is-me .nxe-pod-step { background: var(--gr-blue); color: var(--gr-on); box-shadow: none; }
#gr-complete .nxe-first { text-align: center; color: var(--gr-ink); font: 700 16px/1.3 Outfit, 'DM Sans', sans-serif; }

#gr-complete .nxe-rows-h, #gr-complete .nxe-row {
  display: grid; grid-template-columns: 34px 36px minmax(0, 1fr) auto 86px; align-items: center; column-gap: 12px;
}
#gr-complete .nxe-rows-h {
  padding: 0 10px; color: var(--nxe-sub); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
#gr-complete .nxe-rows-h > span:first-child { grid-column: 3; }
#gr-complete .nxe-rows-h > span:last-child { text-align: end; }
#gr-complete .nxe-rows { display: grid; }
#gr-complete .nxe-row { min-height: 54px; padding: 8px 10px; border-radius: 12px; position: relative; }
#gr-complete .nxe-row + .nxe-row::before {
  content: ""; position: absolute; inset-inline: 10px; top: 0; height: 1px; background: var(--gr-line);
}
#gr-complete .nxe-row.is-me { background: var(--gr-tint); box-shadow: inset 0 0 0 1.5px var(--gr-blue); }
#gr-complete .nxe-row.is-me::before, #gr-complete .nxe-row.is-me + .nxe-row::before { display: none; }
#gr-complete .nxe-rank { text-align: center; color: var(--nxe-sub); font: 700 15px/1 Outfit, 'DM Sans', sans-serif; }
#gr-complete .nxe-row-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 600; }
#gr-complete .nxe-row-runs { color: var(--nxe-sub); font-size: 13px; white-space: nowrap; }
#gr-complete .nxe-row-best { text-align: end; }
#gr-complete .nxe-row-best > b { font: 800 18px/1 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; }
#gr-complete .nxe-rows.is-pinned { margin-top: 2px; padding-top: 12px; border-top: 2px dashed var(--gr-line); }
#gr-complete .nxe-rows-note { color: var(--nxe-sub); font-size: 13px; text-align: center; }

/* the hall of fame's own hero: the player's medals on a shelf */
#gr-complete .nxe-hero.is-hall { padding-bottom: 28px; }
#gr-complete .nxe-hero.is-hall .nxe-hero-do { padding-bottom: 0; }
#gr-complete .nxe-shelf {
  grid-area: stage; align-self: center; position: relative;
  display: grid; grid-template-columns: repeat(3, auto); column-gap: 26px; padding-inline: 26px;
}
/* the shelf itself: a plank of light under the medals, the names on its front edge */
#gr-complete .nxe-shelf::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 34px; z-index: 0; border-radius: 10px;
  background: linear-gradient(180deg, #ffffff59 0 3px, #0000004d 3px 100%);
  box-shadow: 0 14px 22px -12px #000000a6;
}
#gr-complete .nxe-shelf-i { position: relative; z-index: 1; display: grid; justify-items: center; }
#gr-complete .nxe-shelf .nx-medal { width: clamp(76px, 8.4cqi, 104px); margin-bottom: -4px; }
#gr-complete .nxe-shelf-n {
  height: 34px; display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
#gr-complete .nxe-shelf .nx-medal.is-locked svg { filter: grayscale(1) brightness(1.45) opacity(.5); }

/* Cards in one row share their row lines, so a title that wraps does not push
   that card's standing and buttons out of step with its neighbours. */
@supports (grid-template-rows: subgrid) {
  #gr-complete .nxe-grid > .nxe-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }
}

/* right-to-left: arrows that point "onward" or "back" follow the reading direction */
#gr-complete:dir(rtl) .nxe-back svg, #gr-complete:dir(rtl) .nxe-mine > svg,
#gr-complete:dir(rtl) .nxe-all svg, #gr-complete:dir(rtl) .nxe-fame-id > svg { scale: -1 1; }

/* ---------- motion: one entrance, one answer ---------- */
#gr-complete .nxe-stage.is-enter .nx-medal {
  animation: nxe-rise .52s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc((2 - var(--i, 0)) * 120ms + var(--nxe-el, 0ms));
}
#gr-complete .nxe-stage.is-enter .nxe-flag {
  animation: nxe-pop .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(520ms + var(--nxe-el, 0ms));
}
@keyframes nxe-rise { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes nxe-pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
/* the player's result got better while they were away in the game */
#gr-complete .nxe-stand.is-fresh { animation: nxe-glow 1.2s ease-out both; animation-delay: var(--nxe-el, 0ms); }
#gr-complete .nxe .nx-pill.nxe-new { animation: nxe-pop .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--nxe-el, 0ms); }
@keyframes nxe-glow {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nx-good) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px #0000; }
}

/* ---------- tablet ---------- */
@container gr-shell (max-width: 850px) {
  #gr-complete .nxe-hero { padding: 24px 24px 0; column-gap: 20px; }
  #gr-complete .nxe-stage { --nxe-m: 84px; width: clamp(290px, 40cqi, 340px); }
  #gr-complete .nxe-stage .nxe-prize.is-p1 { --nxe-m: 104px; }
  #gr-complete .nxe-hero.is-page {
    grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "poster id" "me me" "rule rule";
    padding: 22px; column-gap: 18px; row-gap: 16px;
  }
  #gr-complete .nxe-page-id { align-self: center; }
  #gr-complete .nxe-hero .nxe-rule { max-width: none; }
  #gr-complete .nxe-cols.has-side { grid-template-columns: minmax(0, 1fr); }
  #gr-complete .nxe-side { position: static; order: -1; }
  #gr-complete .nxe-pz-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #gr-complete .nxe-pz-list > li { flex-direction: column; gap: 4px; padding: 10px 6px; text-align: center; }
  #gr-complete .nxe-pz-t { justify-items: center; }
  #gr-complete .nxe-fame { grid-template-columns: minmax(0, 1fr); }
  #gr-complete .nxe-shelf { column-gap: 14px; padding-inline: 16px; }
}

/* ---------- phone: one column, the hero compact, the button on the first screen ---------- */
@container gr-shell (max-width: 620px) {
  #gr-complete .nxe { gap: 12px; }
  #gr-complete .nxe-hero {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "do"; row-gap: 10px; padding: 18px 16px 16px;
  }
  #gr-complete .nxe-hero-head { gap: 5px; }
  #gr-complete .nxe-hero h1 { font-size: 26px; }
  #gr-complete .nxe-hero .nxe-idea { font-size: 14px; line-height: 1.4; }
  #gr-complete .nxe-hero-do { padding-bottom: 0; justify-items: stretch; gap: 8px; }
  #gr-complete .nxe-when { justify-self: start; padding-block: 5px; font-size: 13px; }
  #gr-complete .nxe-hero .nxe-next { font-size: 17px; line-height: 1.2; margin-top: 0; }
  #gr-complete .nxe-hero-act { display: grid; gap: 8px; }
  #gr-complete .nxe-hero .gr-play.nxe-go, #gr-complete .nxe-hero button.nxe-mine { width: 100%; }
  #gr-complete .nxe-hero button.nxe-mine { min-height: 46px; justify-content: space-between; }
  #gr-complete .nxe-ph.is-btn { width: 100%; }
  /* the podium is kept, a size down: the hero's one button has to be on the first screen of a small phone */
  #gr-complete .nxe-stage { --nxe-m: 68px; width: 100%; max-width: 320px; justify-self: center; gap: 6px; padding-top: 0; }
  #gr-complete .nxe-stage .nxe-prize.is-p1 { --nxe-m: 86px; }
  #gr-complete .nxe-step { padding: 12px 4px 7px; gap: 2px; }
  #gr-complete .nxe-step::before { height: 9px; }
  #gr-complete .nxe-prize.is-p1 .nxe-step { min-height: 62px; }
  #gr-complete .nxe-prize.is-p2 .nxe-step { min-height: 52px; }
  #gr-complete .nxe-prize.is-p3 .nxe-step { min-height: 45px; }
  #gr-complete .nxe-step > b { font-size: 20px; }
  #gr-complete .nxe-prize.is-p1 .nxe-step > b { font-size: 24px; }
  #gr-complete .nxe-flag { translate: 0 -64%; gap: 4px; padding-inline: 2px 8px; }
  #gr-complete .nxe-flag .nx-face { width: 18px; height: 18px; }
  #gr-complete .nxe-flag > b { font-size: 11px; }
  #gr-complete .nxe-step-n { font-size: 10.5px; letter-spacing: .06em; }
  #gr-complete .nxe-shelf { justify-self: center; }

  #gr-complete .nxe-grid, #gr-complete .nxe .nx-skeleton.nxe-sk-cards { grid-template-columns: minmax(0, 1fr); }
  #gr-complete .nxe-card { padding: 14px; }
  #gr-complete .nxe-card:hover { transform: none; }

  #gr-complete .nxe-hero.is-page { grid-template-columns: 64px minmax(0, 1fr); padding: 16px; column-gap: 14px; row-gap: 10px; }
  #gr-complete .nxe-poster { border-radius: 13px; }
  #gr-complete .nxe-page-id { gap: 6px; }
  #gr-complete .nxe-hero .nxe-meta { font-size: 13px; gap: 4px 14px; }
  #gr-complete .nxe-hero.is-page h1 { font-size: 24px; }
  #gr-complete .nxe-hero .nxe-rule { font-size: 13.5px; }
  #gr-complete .nxe-me { padding: 12px 14px 14px; border-radius: 16px; gap: 5px; }
  #gr-complete .nxe-me-big > b { font-size: 40px; }
  /* ON A PHONE THE PLAY BUTTON COMES FIRST IN THE CARD. Under the header, a two-line title and a
   * meta line that wraps ("Ends in 2d 23h" beside "30 players"), a place with its medal and its
   * progress bar pushed the button under the bottom bar — by 3 to 15 pixels, depending on nothing
   * but how many characters the countdown needed that hour. The one thing a player came to do
   * must not depend on that: the button leads, and the place it is about follows it. */
  #gr-complete .nxe-me .gr-play.nxe-go { order: -1; margin-top: 0; margin-bottom: 6px; }
  #gr-complete .nxe-hero .nxe-me-say { font-size: 19px; }
  /* a winner's card on a phone: the medal a size down, and the score left to the podium right below */
  #gr-complete .nxe-me-big > .nx-medal { width: 44px; }
  #gr-complete .nxe-me.is-won .nxe-me-stats { display: none; }

  #gr-complete .nxe-pz { padding: 14px; gap: 10px; }
  #gr-complete .nxe-pz-list .nx-medal { width: 50px; }
  #gr-complete .nxe-pz-list > li { padding: 8px 4px; }
  #gr-complete .nxe-box { padding: 16px 12px; }
  #gr-complete .nxe-box-h { padding-inline: 4px; }
  #gr-complete .nxe-podium { gap: 6px; }
  #gr-complete .nxe-podium.is-won .nxe-pod > .nx-medal { width: 66px; }
  #gr-complete .nxe-podium.is-won .nxe-pod.is-p1 > .nx-medal { width: 84px; }
  #gr-complete .nxe-pod-step { gap: 5px; }
  #gr-complete .nxe-pod-step > .nx-medal { width: 32px; }
  #gr-complete .nxe-pod.is-p1 .nxe-pod-step > .nx-medal { width: 38px; }
  #gr-complete .nxe-pod-who { font-size: 13.5px; flex-direction: column; gap: 3px; }
  #gr-complete .nxe-rows-h, #gr-complete .nxe-row { grid-template-columns: 26px 32px minmax(0, 1fr) auto 52px; column-gap: 9px; }
  #gr-complete .nxe-row { padding: 8px 6px; }
  #gr-complete .nxe-rows-h { padding: 0 6px; }
  #gr-complete .nxe-row .nx-face { width: 32px; height: 32px; }
  #gr-complete .nxe-row-runs { font-size: 12px; }

  #gr-complete .nxe-fame { padding: 8px; padding-inline-end: 8px; }
  #gr-complete .nxe-winners { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---------- motion off ---------- */
#gr-complete[data-motion=off] .nxe-stage.is-enter .nx-medal, #gr-complete[data-motion=off] .nxe-stage.is-enter .nxe-flag,
#gr-complete[data-motion=off] .nxe-stand.is-fresh, #gr-complete[data-motion=off] .nxe .nx-pill.nxe-new { animation: none; }
#gr-complete[data-motion=off] .nxe-card { transition: none; }
#gr-complete[data-motion=off] .nxe-card:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  #gr-complete .nxe-stage.is-enter .nx-medal, #gr-complete .nxe-stage.is-enter .nxe-flag,
  #gr-complete .nxe-stand.is-fresh, #gr-complete .nxe .nx-pill.nxe-new { animation: none; }
  #gr-complete .nxe-card { transition: none; }
  #gr-complete .nxe-card:hover { transform: none; }
  #gr-complete .nxe .nx-medal svg { transform: none; transition: none; }
  #gr-complete .nxe .nx-medal-shine, #gr-complete .nxe .nx-skeleton > span { animation: none; }
}