/* ============================================================
   GameRoch — the `nx-` layer: the shared kit of the V3 Live Update screens
   (Quiz Nova, Daily Challenge, Leaderboard, Tournaments, Achievements, Store).

   One vocabulary for coins, Roch Points, faces, clocks, progress, tabs, pills,
   states, divisions and medals — see js/core/ui.js. Every colour that belongs
   to the THEME comes from the theme tokens (--gr-*), so all 23 themes work;
   only the things that must mean the same in every theme (a coin is gold, a
   Roch Point is violet, a medal's metal, good/warn/bad) carry their own.

   Layout responds to the SHELL's width (container gr-shell), not the window's,
   exactly like css/base.css.
   ============================================================ */

#gr-complete {
  --nx-coin: #f5a700;
  --nx-coin-deep: #b96d00;
  /* Each "meaning" colour is held to 4.5:1 on its own soft fill AND on the
     theme's tint, measured (the first set was not: green was 3.99, amber 4.26
     and the Roch Points violet 4.19 on a tinted row). */
  --nx-rp: #6a3cf0;
  --nx-rp-deep: #4f2bc4;
  --nx-good: #12733f;
  --nx-good-soft: #dff5e8;
  --nx-warn: #8f5200;
  --nx-warn-soft: #fff0cf;
  --nx-bad: #b3263f;
  --nx-bad-soft: #fde4e9;
  --nx-bronze: #b9703a;
  --nx-silver: #8794a6;
  --nx-gold: #dc9a00;
  --nx-platinum: #2ea3bf;
  --nx-legend: #8b3dff;
  --nx-r: var(--gr-radius, 18px);
  --nx-r-sm: calc(var(--gr-radius, 18px) * .62);
  --nx-gap: 16px;
  --nx-lift: 0 1px 0 var(--gr-line), 0 10px 24px -14px #10203c33;
}
#gr-complete[data-tone=dark] {
  --nx-good: #6fe0a3;
  --nx-good-soft: #17382a;
  --nx-warn: #ffc56b;
  --nx-warn-soft: #3d2f12;
  --nx-bad: #ff9fb1;
  --nx-bad-soft: #431b25;
  --nx-rp: #b39bff;
  --nx-rp-deep: #7b4dff;
  --nx-lift: 0 1px 0 var(--gr-line), 0 12px 26px -14px #00000080;
}

/* ---------- page head and sections ---------- */
#gr-complete .nx-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 0 0 20px;
}
#gr-complete .nx-head h1 { font-size: clamp(28px, 4.2cqi, 46px); line-height: 1.02; letter-spacing: -1.2px; font-weight: 800; }
#gr-complete .nx-head p { margin: 8px 0 0; color: var(--gr-sub); font-size: 15px; max-width: 62ch; }
#gr-complete .nx-sect {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 30px 0 14px;
}
#gr-complete .nx-sect h2 { font-size: 22px; letter-spacing: -.5px; }
#gr-complete .nx-sect p { margin: 4px 0 0; color: var(--gr-sub); font-size: 14px; }

/* ---------- currencies ---------- */
#gr-complete .nx-cur {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; line-height: 1;
}
#gr-complete .nx-cur > i {
  width: 1.15em; height: 1.15em; border-radius: 50%; flex: none; display: inline-block;
}
#gr-complete .nx-coin > i {
  background: radial-gradient(circle at 34% 30%, #fff6c4 0 18%, #ffd34d 19% 54%, var(--nx-coin) 55% 100%);
  box-shadow: inset 0 0 0 1.5px #fff8, 0 1px 0 var(--nx-coin-deep);
}
#gr-complete .nx-rp > i {
  border-radius: 28%; rotate: 45deg; scale: .86;
  background: linear-gradient(135deg, #cdbcff, #7b4dff 55%, #4f2bc4);
  box-shadow: inset 0 0 0 1.5px #fff7, 0 1px 0 #3a1f9a;
}
#gr-complete .nx-rp { color: var(--nx-rp); }
#gr-complete .nx-rp .nx-unit { font-size: .72em; font-weight: 800; letter-spacing: .4px; opacity: .85; }
#gr-complete .nx-cur.is-lg { font-size: 22px; font-family: Outfit, 'DM Sans', sans-serif; }
#gr-complete .nx-cur.is-xl { font-size: 34px; font-family: Outfit, 'DM Sans', sans-serif; letter-spacing: -.5px; }

/* ---------- faces ---------- */
#gr-complete .nx-face {
  width: var(--nx-face, 40px); height: var(--nx-face, 40px); flex: none; display: inline-grid;
  border-radius: 50%; overflow: hidden; background: var(--gr-tint);
  box-shadow: 0 0 0 2px var(--gr-panel), 0 0 0 3px var(--gr-line);
}
#gr-complete .nx-face svg { width: 100%; height: 100%; display: block; }
#gr-complete .nx-face.is-me { box-shadow: 0 0 0 2px var(--gr-panel), 0 0 0 4px var(--gr-blue); }
#gr-complete .nx-face.is-gold { box-shadow: 0 0 0 2px var(--gr-panel), 0 0 0 4px var(--nx-gold); }
#gr-complete .nx-face.is-platinum { box-shadow: 0 0 0 2px var(--gr-panel), 0 0 0 4px #b9c4d2; }
#gr-complete .nx-face.is-diamond { box-shadow: 0 0 0 2px var(--gr-panel), 0 0 0 4px #5cc8f0; }

/* ---------- time ---------- */
#gr-complete .nx-countdown { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* ---------- progress ---------- */
#gr-complete .nx-bar {
  display: block; height: 10px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--gr-ink) 11%, transparent);
}
#gr-complete .nx-bar > i {
  display: block; height: 100%; border-radius: inherit; min-width: 0;
  background: linear-gradient(90deg, var(--gr-blue), color-mix(in srgb, var(--gr-blue) 62%, var(--gr-hero2)));
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
#gr-complete .nx-bar.is-good > i { background: linear-gradient(90deg, #22b866, #6fe0a3); }
#gr-complete .nx-bar.is-coin > i { background: linear-gradient(90deg, #f5a700, #ffd34d); }
#gr-complete .nx-bar.is-rp > i { background: linear-gradient(90deg, #7b4dff, #c2adff); }
#gr-complete .nx-bar.is-thick { height: 14px; }
#gr-complete .nx-ring { position: relative; width: var(--nx-ring); height: var(--nx-ring); display: inline-grid; place-items: center; flex: none; }
#gr-complete .nx-ring > svg { position: absolute; inset: 0; }
#gr-complete .nx-ring-track { stroke: color-mix(in srgb, var(--gr-ink) 11%, transparent); }
#gr-complete .nx-ring-fill { stroke: var(--gr-blue); transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
#gr-complete .nx-ring.is-good .nx-ring-fill { stroke: #22b866; }
#gr-complete .nx-ring.is-coin .nx-ring-fill { stroke: var(--nx-coin); }
#gr-complete .nx-ring-inner { position: relative; font-weight: 800; font-family: Outfit, 'DM Sans', sans-serif; line-height: 1; }

/* ---------- tabs ---------- */
#gr-complete .nx-tabs {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; max-width: 100%;
  background: color-mix(in srgb, var(--gr-ink) 7%, transparent); overflow-x: auto; scrollbar-width: none;
}
#gr-complete .nx-tabs::-webkit-scrollbar { display: none; }
#gr-complete button.nx-tab {
  min-height: 44px; padding: 8px 16px; border-radius: 10px; font-weight: 700; font-size: 14px;
  /* --gr-sub alone is 4.4:1 on the track; a step towards the ink clears AA. */
  color: color-mix(in srgb, var(--gr-sub) 68%, var(--gr-ink)); white-space: nowrap; gap: 8px;
}
#gr-complete button.nx-tab:hover { background: color-mix(in srgb, var(--gr-panel) 60%, transparent); }
#gr-complete button.nx-tab[aria-selected=true] {
  background: var(--gr-panel); color: var(--gr-ink); box-shadow: 0 1px 2px #0002, 0 0 0 1px var(--gr-line);
}
#gr-complete .nx-tab-count {
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 99px;
  background: var(--gr-blue); color: var(--gr-on);
}

/* ---------- pills ---------- */
#gr-complete .nx-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  background: var(--gr-tint); color: var(--gr-blue);
}
#gr-complete .nx-pill svg { width: 13px; height: 13px; }
#gr-complete .nx-pill.is-good { background: var(--nx-good-soft); color: var(--nx-good); }
#gr-complete .nx-pill.is-warn { background: var(--nx-warn-soft); color: var(--nx-warn); }
#gr-complete .nx-pill.is-bad { background: var(--nx-bad-soft); color: var(--nx-bad); }
#gr-complete .nx-pill.is-muted { background: color-mix(in srgb, var(--gr-ink) 8%, transparent); color: color-mix(in srgb, var(--gr-sub) 68%, var(--gr-ink)); }
#gr-complete .nx-pill.is-rp { background: color-mix(in srgb, var(--nx-rp) 14%, transparent); color: var(--nx-rp); }
#gr-complete .nx-pill.is-coin { background: var(--nx-warn-soft); color: var(--nx-warn); }
#gr-complete .nx-pill.is-solid { background: var(--gr-blue); color: var(--gr-on); }

/* ---------- figures ---------- */
#gr-complete .nx-stat { display: grid; gap: 2px; min-width: 0; }
#gr-complete .nx-stat > b {
  font: 800 26px/1.05 Outfit, 'DM Sans', sans-serif; letter-spacing: -.6px;
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px;
}
#gr-complete .nx-stat > span { color: var(--gr-sub); font-size: 13px; }
#gr-complete .nx-stat > small { color: var(--gr-sub); font-size: 12px; opacity: .85; }

/* ---------- surfaces ---------- */
#gr-complete .nx-card {
  background: var(--gr-panel); border: 1px solid var(--gr-line); border-radius: var(--nx-r);
  box-shadow: var(--gr-shadow);
}
#gr-complete .nx-pad { padding: 20px; }
/* The loud panel: the theme's own hero colours, so it is vivid in every theme.
   MEASURED, 2 Oct 2026. The first version ran all the way to --gr-hero2 with
   white discs over it and 85%-white paragraphs: small white text came out at
   3.4:1 in Blue and 2.7:1 in Kids. The far end now keeps hero2's hue and loses
   its glare (mixed 70% with black), the discs are dark, and every word is
   plain white — white on --gr-hero is the pair each theme is already held to. */
#gr-complete .nx-hero {
  --nx-hero2: color-mix(in srgb, var(--gr-hero2) 70%, #000);
  position: relative; overflow: hidden; border-radius: calc(var(--nx-r) + 4px); color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--nx-hero2) 0%, transparent 60%),
    linear-gradient(135deg, var(--gr-hero), color-mix(in srgb, var(--gr-hero) 55%, var(--nx-hero2)));
  padding: 24px;
}
#gr-complete .nx-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 120%, #0000001f 0 22%, transparent 23%),
    radial-gradient(circle at 92% -10%, #0000001a 0 18%, transparent 19%);
}
#gr-complete .nx-hero > * { position: relative; z-index: 1; }
#gr-complete .nx-hero h1, #gr-complete .nx-hero h2, #gr-complete .nx-hero h3 { color: #fff; }
#gr-complete .nx-hero p { color: #fff; }
#gr-complete .nx-hero .nx-bar { background: #ffffff33; }
#gr-complete .nx-hero .nx-bar > i { background: linear-gradient(90deg, #fff, #ffffffcc); }
#gr-complete .nx-hero .nx-pill, #gr-complete .nx-hero .nx-pill.is-muted { background: #00000033; color: #fff; }
#gr-complete .nx-hero .nx-rp { color: #fff; }

#gr-complete .nx-grid { display: grid; gap: var(--nx-gap); }
#gr-complete .nx-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#gr-complete .nx-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#gr-complete .nx-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#gr-complete .nx-grid.is-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
#gr-complete .nx-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
#gr-complete .nx-grow { flex: 1 1 auto; min-width: 0; }
#gr-complete .nx-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gr-complete .nx-muted { color: var(--gr-sub); }
#gr-complete .nx-num { font-variant-numeric: tabular-nums; }

/* ---------- states ---------- */
#gr-complete .nx-empty {
  display: grid; justify-items: center; text-align: center; gap: 8px; padding: 36px 20px;
  border: 1.5px dashed var(--gr-line); border-radius: var(--nx-r); color: var(--gr-sub);
}
#gr-complete .nx-empty > svg { width: 28px; height: 28px; color: var(--gr-blue); }
#gr-complete .nx-empty h3 { color: var(--gr-ink); font-size: 19px; }
#gr-complete .nx-empty p { margin: 0 0 6px; max-width: 46ch; font-size: 14px; }
#gr-complete .nx-error, #gr-complete .nx-soon {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px;
  border-radius: var(--nx-r); border: 1px solid var(--gr-line); background: var(--gr-panel);
}
#gr-complete .nx-error { border-color: color-mix(in srgb, var(--nx-bad) 45%, var(--gr-line)); background: var(--nx-bad-soft); }
#gr-complete .nx-error > svg { color: var(--nx-bad); width: 22px; height: 22px; flex: none; }
#gr-complete .nx-soon > svg { color: var(--gr-blue); width: 22px; height: 22px; flex: none; }
#gr-complete .nx-error > div, #gr-complete .nx-soon > div { flex: 1 1 220px; min-width: 0; }
#gr-complete .nx-error h3, #gr-complete .nx-soon h3 { font-size: 16px; }
#gr-complete .nx-error p, #gr-complete .nx-soon p { margin: 2px 0 0; font-size: 13.5px; color: var(--gr-sub); }
#gr-complete .nx-error p { color: var(--gr-ink); opacity: .85; }
/* A state's own button is a full touch target (the shell's plain button is 42px). */
#gr-complete .nx-empty button, #gr-complete .nx-error button, #gr-complete .nx-soon button { min-height: 44px; }
#gr-complete .nx-skeleton { display: grid; gap: 12px; }
#gr-complete .nx-skeleton > span {
  height: 64px; border-radius: var(--nx-r-sm);
  background: linear-gradient(100deg, var(--gr-tint) 30%, color-mix(in srgb, var(--gr-tint) 50%, var(--gr-panel)) 50%, var(--gr-tint) 70%);
  background-size: 200% 100%; animation: nx-shimmer 1.3s linear infinite;
}
@keyframes nx-shimmer { to { background-position: -200% 0; } }

/* ---------- divisions ---------- */
#gr-complete .nx-division { width: var(--nx-div, 44px); height: var(--nx-div, 44px); display: inline-grid; flex: none; filter: drop-shadow(0 3px 4px #0003); }
#gr-complete .nx-division svg { width: 100%; height: 100%; }
#gr-complete .nx-division .nx-div-edge { fill: color-mix(in srgb, var(--nx-div-c) 62%, #000); }
#gr-complete .nx-division .nx-div-face { fill: var(--nx-div-c); }
#gr-complete .nx-division .nx-div-shine { fill: #fff; opacity: .26; }
#gr-complete .nx-division.is-bronze { --nx-div-c: var(--nx-bronze); }
#gr-complete .nx-division.is-silver { --nx-div-c: var(--nx-silver); }
#gr-complete .nx-division.is-gold { --nx-div-c: var(--nx-gold); }
#gr-complete .nx-division.is-platinum { --nx-div-c: var(--nx-platinum); }
#gr-complete .nx-division.is-legend { --nx-div-c: var(--nx-legend); }

/* ---------- medals ----------
   Depth: a ground shadow, a slight tilt that settles on hover, and a band of
   light that crosses the face. `data-motion=off` and reduced-motion stop all
   of it and leave a still, fully lit medal. */
#gr-complete .nx-medal {
  position: relative; width: var(--nx-medal, 96px); display: inline-grid; flex: none;
  perspective: 600px; isolation: isolate;
}
#gr-complete .nx-medal svg {
  width: 100%; height: auto; display: block; transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(6deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 6px 8px #0000002e);
}
#gr-complete .nx-medal:hover svg, #gr-complete :focus-visible > .nx-medal svg { transform: rotateY(10deg) rotateX(-4deg) scale(1.04); }
#gr-complete .nx-medal-shadow { fill: #000; opacity: .16; }
#gr-complete .nx-medal-shine { animation: nx-shine 3.6s ease-in-out infinite; }
#gr-complete .nx-medal.is-platinum .nx-medal-shine { animation-delay: .5s; }
#gr-complete .nx-medal.is-gold .nx-medal-shine { animation-delay: 1s; }
@keyframes nx-shine {
  0%, 55% { transform: rotate(20deg) translateX(0); opacity: 0; }
  60% { opacity: .6; }
  100% { transform: rotate(20deg) translateX(190px); opacity: 0; }
}
#gr-complete .nx-medal.is-locked svg { filter: grayscale(1) contrast(.75) opacity(.38); transform: none; }
#gr-complete .nx-medal.is-locked .nx-medal-shine { animation: none; opacity: 0; }
#gr-complete .nx-medal-count {
  position: absolute; right: -4px; bottom: 6%; min-width: 30px; padding: 3px 8px; border-radius: 99px;
  font: 800 13px/1.2 Outfit, 'DM Sans', sans-serif; text-align: center;
  background: var(--gr-ink); color: var(--gr-panel); box-shadow: 0 0 0 2px var(--gr-panel);
}
#gr-complete .nx-medal-place { display: none; }
/* A SMALL medal (under 44px) is a mark in a row, not an object on a shelf: it
   sits flat, without tilt or shine, and its count is beside it at a size that
   belongs to the medal — the shelf badge is bigger than a 22px medal. */
#gr-complete .nx-medal.is-mini { display: inline-flex; align-items: center; gap: 2px; width: auto; perspective: none; }
#gr-complete .nx-medal.is-mini svg { width: var(--nx-medal); transform: none; filter: none; transition: none; }
#gr-complete .nx-medal.is-mini:hover svg { transform: none; }
#gr-complete .nx-medal.is-mini .nx-medal-shine { animation: none; opacity: 0; }
#gr-complete .nx-medal.is-mini .nx-medal-count {
  position: static; min-width: 0; padding: 0; background: none; box-shadow: none; color: inherit;
  font: 800 max(11px, calc(var(--nx-medal) * .55))/1 Outfit, 'DM Sans', sans-serif;
}
#gr-complete[data-motion=off] .nx-medal svg { transform: none; transition: none; }
#gr-complete[data-motion=off] .nx-medal-shine,
#gr-complete[data-motion=off] .nx-skeleton > span { animation: none; }

/* ---------- small screens ---------- */
@container gr-shell (max-width: 850px) {
  #gr-complete .nx-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #gr-complete .nx-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container gr-shell (max-width: 620px) {
  #gr-complete .nx-head { margin-bottom: 16px; }
  #gr-complete .nx-head p { font-size: 13.5px; }
  #gr-complete .nx-sect { margin: 24px 0 12px; }
  #gr-complete .nx-sect h2 { font-size: 19px; }
  #gr-complete .nx-grid.is-2, #gr-complete .nx-grid.is-3 { grid-template-columns: minmax(0, 1fr); }
  #gr-complete .nx-hero { padding: 18px; }
  #gr-complete .nx-pad { padding: 16px; }
  #gr-complete .nx-tabs { display: flex; }
  #gr-complete button.nx-tab { flex: 1 0 auto; padding: 8px 12px; font-size: 13px; }
}