/* ============================================================
   GameRoch — Daily Challenge + Missions (V3 Live Update 1, prefix nxd-)

   Built on the nx- kit (css/next.css). Everything that belongs to the THEME
   uses the theme tokens; gold is used for exactly one meaning in every theme —
   "coins are waiting here" (the Collect button, the ready card's ring).

   Layout follows the SHELL's width (container gr-shell), never the window's.
   All motion is a one-off answer to something the player did, and is removed
   under [data-motion=off] and prefers-reduced-motion (end of file).
   ============================================================ */

#gr-complete .nxd {
  --nxd-gold-ink: #3a2500;                 /* text on gold: 7:1 and more */
  --nxd-good-ink: color-mix(in srgb, var(--nx-good) 86%, #000);
  display: grid; gap: var(--nx-gap); min-width: 0;
}
#gr-complete[data-tone=dark] .nxd { --nxd-good-ink: var(--nx-good); }
#gr-complete .nxd-panel { display: grid; gap: var(--nx-gap); min-width: 0; }
#gr-complete .nxd-top { display: flex; min-width: 0; }
/* The kit's unselected tab label (--gr-sub on a 7% ink track) measures 4.42:1 in Everyday Blue and
   4.45:1 in Playground. Until the kit is corrected, this screen darkens its own (reported in REPORT). */
#gr-complete .nxd .nx-tab:not([aria-selected=true]) { color: color-mix(in srgb, var(--gr-sub) 72%, var(--gr-ink)); }
/* …and its 40px tabs are under the 44px touch target the brief asks for. */
#gr-complete .nxd button.nx-tab { min-height: 44px; }
#gr-complete .nxd-hero p, #gr-complete .nxd-clear p, #gr-complete .nxd-login p, #gr-complete .nxd-card p,
#gr-complete .nxd-mission p, #gr-complete p.nxd-totals { margin: 0; }
#gr-complete .nxd ol, #gr-complete .nxd ul { list-style: none; margin: 0; padding: 0; }

/* containers that receive focus after their own button has gone (see refocus in daily.js) */
#gr-complete .nxd [tabindex="-1"]:focus { outline: none; }
#gr-complete .nxd [tabindex="-1"]:focus-visible { outline: 3px solid var(--gr-blue); outline-offset: 2px; }

/* ---------- the coin, and the gold button ---------- */
#gr-complete .nxd-coin {
  width: 1.15em; height: 1.15em; border-radius: 50%; flex: none; display: inline-block;
  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 .gr-play.nxd-collect {
  min-height: 48px; padding: 11px 20px; border-radius: 14px; gap: 10px;
  font: 800 15px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em;
  color: var(--nxd-gold-ink); border-bottom-color: #b96d00;
  background: linear-gradient(180deg, #ffe58a 0%, #ffcf3f 46%, #f7ad09 100%);
  box-shadow: inset 0 1px 0 #ffffffb3, 0 10px 20px -10px #b96d00cc;
}
#gr-complete .gr-play.nxd-collect:hover {
  background: linear-gradient(180deg, #ffeaa0 0%, #ffd552 46%, #fab31a 100%); filter: none;
}
#gr-complete .gr-play.nxd-collect .nxd-coin { font-size: 17px; box-shadow: inset 0 0 0 1.5px #fff8, 0 0 0 1.5px #a86100; }
#gr-complete .gr-play.nxd-collect.is-wide { width: 100%; }
#gr-complete .gr-play.nxd-collect:disabled { opacity: .72; filter: saturate(.7); }

/* ---------- the hero: where am I, what do I get, what do I press ---------- */
#gr-complete .nxd-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: 20px 34px; padding: 28px 32px;
}
/* White text must stay readable where the theme's gradient turns light (its
   right-hand side in Everyday Blue and Playground), so the panel is deepened a little. */
#gr-complete .nxd-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, #00000024 0%, #0000003d 50%, #0000004d 100%);
}
#gr-complete .nxd-hero-copy { display: grid; gap: 10px; justify-items: start; min-width: 0; }
/* on a phone the copy block dissolves into the hero's own grid (display: contents),
   so its children must sit above the panel's overlays by themselves */
#gr-complete .nxd-hero-copy > * { position: relative; z-index: 1; }
#gr-complete .nxd-hero h1 {
  color: #fff; font: 800 clamp(26px, 2.7cqi, 38px)/1.06 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em;
}
#gr-complete .nxd-hero .nxd-hero-sub { color: #fff; font-size: 15px; line-height: 1.45; max-width: 46ch; }
#gr-complete .nxd-hero .nxd-hero-coins {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; color: #fff;
  font: 700 19px/1.25 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em;
}
#gr-complete .nxd-hero-coins .nxd-coin { font-size: 21px; }
#gr-complete .nxd-hero-coins svg { width: 22px; height: 22px; flex: none; }
#gr-complete .nxd-hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; }
#gr-complete .nxd-hero .gr-play.nxd-collect { box-shadow: inset 0 1px 0 #ffffffb3, 0 0 0 2px #ffffff40, 0 14px 26px -12px #000000a6; }
#gr-complete .nxd-hero .gr-play.nxd-go {
  min-height: 48px; padding: 11px 20px; border-radius: 14px; gap: 9px;
  font: 800 15px/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 .nxd-hero .gr-play.nxd-go:hover { background: #fff; filter: brightness(.97); }
#gr-complete .nxd-when { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 13.5px; font-weight: 500; }
#gr-complete .nxd-when svg { width: 15px; height: 15px; flex: none; }
#gr-complete .nxd-when .nx-countdown { color: #fff; }

/* the seven-arc dial */
#gr-complete .nxd-hero-fig { display: grid; place-items: center; }
#gr-complete .nxd-dial {
  position: relative; width: var(--nxd-dial, 150px); aspect-ratio: 1; display: grid; place-items: center; flex: none;
  border-radius: 50%; background: #0000002e; color: #fff;
}
#gr-complete .nxd-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#gr-complete .nxd-arc { stroke: #ffffff45; }
#gr-complete .nxd-arc.is-on { stroke: #fff; }
#gr-complete .nxd-dial-in { position: relative; display: grid; justify-items: center; line-height: 1; }
#gr-complete .nxd-dial-n { display: inline-flex; align-items: baseline; font-family: Outfit, 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; }
#gr-complete .nxd-dial-n b { font-size: calc(var(--nxd-dial, 150px) * .36); font-weight: 800; letter-spacing: -.03em; line-height: .95; }
#gr-complete .nxd-dial-n i { font-size: calc(var(--nxd-dial, 150px) * .16); font-weight: 700; font-style: normal; opacity: .92; }
#gr-complete .nxd-dial-in small {
  margin-top: 5px; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}

/* this week + the streak, on a pane of dark glass so small type holds 4.5:1 in every theme */
#gr-complete .nxd-hero-side {
  display: grid; gap: 10px; justify-items: start; padding: 14px 16px; border-radius: 18px; background: #00000038;
}
#gr-complete .nxd-side-l { color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
#gr-complete .nxd-week { display: flex; gap: 7px; }
#gr-complete .nxd-day { display: grid; justify-items: center; gap: 5px; width: 28px; }
#gr-complete .nxd-day-l { color: #ffffffeb; font-size: 11px; font-weight: 700; line-height: 1; }
#gr-complete .nxd-day svg { width: 26px; height: 26px; display: block; border-radius: 50%; }
#gr-complete .nxd-day-track { fill: none; stroke: #ffffff4d; stroke-width: 3.2; }
#gr-complete .nxd-day-arc { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
#gr-complete .nxd-day-full { fill: #fff; }
#gr-complete .nxd-day-tick { fill: none; stroke: var(--gr-hero); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
#gr-complete .nxd-day.is-future .nxd-day-track { stroke-dasharray: 2.6 3.7; stroke: #ffffff59; }
#gr-complete .nxd-day.is-future .nxd-day-l { color: #ffffffc2; }
#gr-complete .nxd-day.is-today .nxd-day-l { color: #fff; font-weight: 800; }
#gr-complete .nxd-day.is-today svg { outline: 2px solid #fff; outline-offset: 2px; }
#gr-complete .nxd-streak {
  display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
}
#gr-complete .nxd-streak svg { width: 16px; height: 16px; color: #ffd34d; flex: none; }

/* the Missions hero is the same panel, a size down */
#gr-complete .nxd-hero.is-calm { grid-template-columns: minmax(0, 1fr) auto; padding: 24px 32px; }
#gr-complete .nxd-hero.is-calm .nxd-dial { --nxd-dial: 128px; }

/* ---------- shared bits of a card ---------- */
#gr-complete .nxd-cover { position: relative; width: 64px; height: 64px; flex: none; border-radius: 16px; display: block; }
#gr-complete .nxd-cover img, #gr-complete .nxd-stamp img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
#gr-complete .nxd-cover img { box-shadow: 0 8px 14px -9px #0b1a3380, 0 0 0 1px #00000014; }
#gr-complete .nxd-noart {
  width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit;
  background: var(--gr-tint); color: var(--gr-blue);
}
#gr-complete .nxd-noart svg { width: 45%; height: 45%; }
/* the stamp: a green tick pressed onto the cover */
#gr-complete .nxd-tick {
  position: absolute; inset-inline-end: -7px; bottom: -7px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: #17914f; box-shadow: 0 0 0 3px var(--gr-panel);
}
#gr-complete .nxd-tick::after {
  content: ""; width: 10px; height: 5px; margin-top: -2px; border: solid #fff; border-width: 0 0 2.6px 2.6px; rotate: -45deg;
}
#gr-complete .nxd-prog { display: grid; gap: 7px; min-width: 0; }
#gr-complete .nxd-nums { color: var(--gr-sub); font-size: 13px; line-height: 1.3; font-variant-numeric: tabular-nums; }
#gr-complete .nxd-deal {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; min-height: 48px; min-width: 0;
}
#gr-complete .nxd-reward .nx-cur { font-size: 16px; }
#gr-complete .nxd-got {
  display: inline-flex; align-items: center; gap: 7px; color: var(--nxd-good-ink); font-size: 14px; font-weight: 700;
}
#gr-complete .nxd-got svg { width: 17px; height: 17px; flex: none; }
#gr-complete .nxd-got .nx-cur { color: var(--gr-sub); font-size: 14px; margin-inline-start: 2px; }
#gr-complete .gr-play.nxd-play { min-height: 44px; padding: 10px 18px; border-radius: 12px; font-weight: 800; }
#gr-complete .gr-soft.nxd-again { min-height: 44px; padding: 10px 16px; border-radius: 12px; }
#gr-complete .nxd-err { color: var(--nx-bad); font-size: 13px; font-weight: 600; line-height: 1.4; }

/* ---------- the all-clear bonus: a stamp card ---------- */
#gr-complete .nxd-clear {
  position: relative; display: grid; align-items: center; gap: 12px 20px; padding: 16px 20px;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto auto;
  grid-template-areas: "head stamps count prize act";
}
#gr-complete .nxd-clear-head { grid-area: head; }
#gr-complete .nxd-stamps { grid-area: stamps; }
#gr-complete .nxd-clear-act { display: contents; }
#gr-complete .nxd-clear-count { grid-area: count; }
#gr-complete .nxd-clear-prize { grid-area: prize; }
#gr-complete .nxd-clear-act > button, #gr-complete .nxd-clear-act > .nxd-got { grid-area: act; justify-self: end; }
#gr-complete .nxd-clear-head, #gr-complete .nxd-login { display: flex; align-items: center; gap: 14px; min-width: 0; }
#gr-complete .nxd-clear-ico {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px;
  background: var(--nx-warn-soft); color: var(--nx-warn);
}
#gr-complete .nxd-clear-ico svg { width: 22px; height: 22px; }
#gr-complete .nxd-clear h2, #gr-complete .nxd-login h2 { font: 700 18px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; }
#gr-complete .nxd-clear-head p, #gr-complete .nxd-login p { margin-top: 3px; color: var(--gr-sub); font-size: 13.5px; line-height: 1.4; }
#gr-complete .nxd-stamps { display: flex; justify-content: center; gap: 8px; min-width: 0; }
#gr-complete .nxd-stamps li { flex: 0 1 46px; min-width: 0; }
/* a stamp is a picture of progress, not a control */
#gr-complete .nxd-stamp {
  position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 13px; box-shadow: 0 0 0 1.5px var(--gr-line);
}
#gr-complete .nxd-stamp > img { filter: grayscale(1) contrast(.8); opacity: .42; }
#gr-complete .nxd-stamp.is-done { box-shadow: 0 0 0 2px #17914f; }
#gr-complete .nxd-stamp.is-done > img { filter: none; opacity: 1; }
#gr-complete .nxd-stamp .nxd-tick { width: 18px; height: 18px; inset-inline-end: -5px; bottom: -5px; box-shadow: 0 0 0 2px var(--gr-panel); }
#gr-complete .nxd-stamp .nxd-tick::after { width: 7px; height: 3.5px; border-width: 0 0 2.2px 2.2px; margin-top: -1.5px; }
#gr-complete .nxd-clear-count { display: grid; gap: 1px; justify-items: end; line-height: 1.1; }
#gr-complete .nxd-clear-count b { font: 800 20px/1 Outfit, 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; }
#gr-complete .nxd-clear-count small { color: var(--gr-sub); font-size: 12px; white-space: nowrap; }
#gr-complete .nxd-clear-prize .nx-cur { color: var(--gr-ink); }
#gr-complete .gr-soft.nxd-locked { min-height: 44px; border-radius: 12px; gap: 7px; color: var(--gr-sub); }
#gr-complete .gr-soft.nxd-locked svg { width: 15px; height: 15px; }
#gr-complete .nxd-clear > .nxd-err { grid-column: 1 / -1; }
#gr-complete .nxd-clear.is-ready {
  border-color: color-mix(in srgb, var(--nx-coin) 70%, var(--gr-line));
  box-shadow: 0 0 0 1.5px var(--nx-coin), 0 16px 28px -20px color-mix(in srgb, var(--nx-coin) 90%, transparent);
}
#gr-complete .nxd-clear.is-claimed .nxd-clear-ico, #gr-complete .nxd-login .nxd-clear-ico { background: var(--nx-good-soft); color: var(--nx-good); }
#gr-complete .nxd-login { padding: 16px 20px; }
#gr-complete .nxd-login > div, #gr-complete .nxd-clear-head > div { flex: 1 1 auto; min-width: 0; }

/* ---------- one card per game ---------- */
#gr-complete .nxd-grid, #gr-complete .nxd-sk-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(262px, 100%), 1fr)); gap: var(--nx-gap);
}
#gr-complete .nxd-card {
  position: relative; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 14px;
  padding: 16px; min-width: 0; scroll-margin: 90px 0;
}
#gr-complete .nxd-card-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
#gr-complete .nxd-card-id { min-width: 0; }
#gr-complete .nxd-card h3 { font: 700 17.5px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
#gr-complete .nxd-card .nxd-task { margin-top: 4px; color: var(--gr-ink); font-size: 14.5px; line-height: 1.35; }
#gr-complete .nxd-card .nxd-deal { align-self: end; }
/* ready: gold means "coins are waiting here" */
#gr-complete .nxd-card.is-ready, #gr-complete .nxd-mission.is-ready {
  border-color: color-mix(in srgb, var(--nx-coin) 70%, var(--gr-line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-coin) 10%, var(--gr-panel)) 0%, var(--gr-panel) 68%);
  box-shadow: 0 0 0 1.5px var(--nx-coin), 0 18px 30px -22px color-mix(in srgb, var(--nx-coin) 90%, transparent);
}
/* collected: nothing loud left */
#gr-complete .nxd-card.is-claimed, #gr-complete .nxd-mission.is-claimed { box-shadow: none; }
#gr-complete .nxd-card.is-claimed .nxd-cover img { filter: saturate(.75); }
#gr-complete .nxd-card.is-focus { outline: 3px solid var(--gr-blue); outline-offset: 2px; }

/* ---------- lifetime totals ---------- */
#gr-complete .nxd-totals {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 4px 4px 0;
  color: color-mix(in srgb, var(--gr-sub) 82%, var(--gr-ink)); font-size: 13px;   /* sits on the page, not a card: --gr-sub alone is exactly 4.5:1 there */
}
#gr-complete .nxd-totals > span { display: inline-flex; align-items: center; gap: 7px; }
#gr-complete .nxd-totals svg { width: 15px; height: 15px; flex: none; }
#gr-complete .nxd-totals-l { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

/* ---------- missions: one row each ---------- */
#gr-complete .nxd-missions { display: grid; gap: 12px; }
#gr-complete .nxd-mission {
  position: relative; display: grid; align-items: center; gap: 12px 20px; padding: 14px 18px; min-width: 0;
  grid-template-columns: 48px minmax(0, 1.25fr) minmax(0, 1fr) minmax(200px, auto);
}
#gr-complete .nxd-m-ico {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
  background: var(--gr-tint); color: var(--gr-blue);
}
#gr-complete .nxd-m-ico svg { width: 22px; height: 22px; }
#gr-complete .nxd-mission.is-ready .nxd-m-ico, #gr-complete .nxd-mission.is-claimed .nxd-m-ico { background: var(--nx-good-soft); color: var(--nx-good); }
#gr-complete .nxd-m-id { min-width: 0; }
#gr-complete .nxd-mission h3 { font: 700 17px/1.25 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
#gr-complete .nxd-m-id p { margin-top: 3px; color: var(--gr-sub); font-size: 13.5px; line-height: 1.4; }
#gr-complete .nxd-mission .nxd-deal { justify-content: flex-end; }
#gr-complete .nxd-mission > .nxd-err { grid-column: 2 / -1; }

/* ---------- loading / not switched on / failed ---------- */
#gr-complete .nxd-sk-hero > span { height: 232px; border-radius: calc(var(--nx-r) + 4px); }
#gr-complete .nxd-sk-strip > span { height: 80px; border-radius: var(--nx-r); }
#gr-complete .nxd-sk-cards > span { height: 190px; border-radius: var(--nx-r); }
#gr-complete .nxd-sk-tiles { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
#gr-complete .nxd-sk-tiles > span { height: 196px; border-radius: var(--nx-r); }
#gr-complete .nxd .nx-sect { margin: 12px 0 0; }
#gr-complete .nxd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 12px; }
#gr-complete .nxd-tile { display: grid; gap: 10px; padding: 12px; align-content: start; min-width: 0; }
#gr-complete .nxd-tile .nxd-cover { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 12px; }
#gr-complete .nxd-tile h3 { font: 700 15px/1.25 Outfit, 'DM Sans', sans-serif; overflow-wrap: anywhere; }
#gr-complete .nxd-tile .nxd-play { width: 100%; }

/* ---------- motion: one-off answers to something the player did ----------
   `--nxd-el` is "minus the time already elapsed": a redraw in the middle of an
   effect continues it instead of starting it again (see fxStyle in daily.js). */
#gr-complete .nxd-dial.is-enter .nxd-arc.is-on {
  animation: nxd-arc .42s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms + 140ms + var(--nxd-el, 0ms));
}
@keyframes nxd-arc { from { stroke: #ffffff45; } to { stroke: #fff; } }

/* the stamp is pressed on */
#gr-complete .is-fresh .nxd-tick, #gr-complete .is-new .nxd-tick {
  animation: nxd-stamp .38s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--nxd-el, 0ms);
}
@keyframes nxd-stamp { 0% { scale: 2.3; rotate: -20deg; opacity: 0; } 55% { opacity: 1; } 100% { scale: 1; rotate: 0deg; opacity: 1; } }

/* a few coins leave the button */
#gr-complete .nxd-burst { position: absolute; inset-inline-start: 50%; bottom: 34px; width: 0; height: 0; pointer-events: none; }
#gr-complete .nxd-burst i {
  position: absolute; inset-inline-start: -7px; inset-block-start: -7px; width: 14px; height: 14px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 34% 30%, #fff6c4 0 18%, #ffd34d 19% 54%, #f5a700 55% 100%);
  box-shadow: 0 0 0 1px #b96d00;
  animation: nxd-coin .72s cubic-bezier(.16, .8, .3, 1) both; animation-delay: var(--nxd-el, 0ms);
}
#gr-complete .nxd-burst i:nth-child(1) { --x: -96px; --y: -64px; }
#gr-complete .nxd-burst i:nth-child(2) { --x: -52px; --y: -98px; }
#gr-complete .nxd-burst i:nth-child(3) { --x: -14px; --y: -118px; }
#gr-complete .nxd-burst i:nth-child(4) { --x: 26px; --y: -108px; }
#gr-complete .nxd-burst i:nth-child(5) { --x: 64px; --y: -88px; }
#gr-complete .nxd-burst i:nth-child(6) { --x: 102px; --y: -54px; }
@keyframes nxd-coin {
  0% { translate: 0 0; scale: .5; opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { translate: var(--x) var(--y); scale: 1; opacity: 0; }
}

/* a goal just finished in a game: the card says so once */
#gr-complete .nxd-card.is-new { animation: nxd-pop .6s cubic-bezier(.2, .9, .3, 1) both; animation-delay: var(--nxd-el, 0ms); }
@keyframes nxd-pop {
  0% { scale: .965; box-shadow: 0 0 0 1.5px var(--nx-coin), 0 0 0 0 color-mix(in srgb, var(--nx-coin) 55%, transparent); }
  45% { scale: 1.012; }
  100% { scale: 1; box-shadow: 0 0 0 1.5px var(--nx-coin), 0 0 0 16px transparent; }
}

/* ---------- the stamp card needs a wide row: below that it takes two ---------- */
@container gr-shell (max-width: 1250px) {
  #gr-complete .nxd-clear {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "head count prize act" "stamps stamps stamps stamps";
  }
  #gr-complete .nxd-stamps { justify-content: flex-start; }
}

/* ---------- tablet ---------- */
@container gr-shell (max-width: 1150px) {
  #gr-complete .nxd-hero { grid-template-columns: minmax(0, 1fr) auto; }
  #gr-complete .nxd-hero-side {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px;
  }
  #gr-complete .nxd-mission { grid-template-columns: 48px minmax(0, 1fr) minmax(190px, auto); }
  #gr-complete .nxd-mission .nxd-prog { grid-column: 2 / -1; grid-row: 2; }
}

/* ---------- phone: one column, the button above the fold ---------- */
@container gr-shell (max-width: 620px) {
  #gr-complete .nxd { gap: 12px; }
  #gr-complete .nxd-panel { gap: 12px; }
  #gr-complete .nxd-top .nx-tabs { flex: 1 1 auto; }          /* two equal halves, a thumb wide */
  #gr-complete .nxd-top button.nx-tab { flex: 1 1 0; }
  #gr-complete .nxd-hero, #gr-complete .nxd-hero.is-calm {
    grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 18px; align-items: center;
  }
  /* the dial moves to the left of the title; the copy block is taken apart into rows */
  #gr-complete .nxd-hero-copy { display: contents; }
  #gr-complete .nxd-hero-fig { grid-column: 1; grid-row: 1 / span 2; }
  #gr-complete .nxd-dial, #gr-complete .nxd-hero.is-calm .nxd-dial { --nxd-dial: 88px; }
  #gr-complete .nxd-dial-in small { font-size: 9.5px; margin-top: 3px; }
  #gr-complete .nxd-hero h1 { grid-column: 2; grid-row: 1; align-self: end; font-size: 25px; }
  #gr-complete .nxd-hero .nxd-hero-sub { grid-column: 2; grid-row: 2; align-self: start; font-size: 13.5px; line-height: 1.4; }
  #gr-complete .nxd-hero .nxd-hero-coins { grid-column: 1 / -1; margin-top: 2px; font-size: 17px; }
  #gr-complete .nxd-hero-act { grid-column: 1 / -1; margin-top: 0; gap: 10px 14px; }
  #gr-complete .nxd-hero-act > button { width: 100%; }
  #gr-complete .nxd-hero-side { grid-column: 1 / -1; padding: 12px 14px; }
  #gr-complete .nxd-side-l { display: none; }
  #gr-complete .nxd-week { flex: 1 1 auto; justify-content: space-between; gap: 2px; }
  #gr-complete .nxd-streak { order: -1; flex: 1 1 100%; }

  /* head / stamps / one row of "3/7 · 4 more to go ... +100"; the button appears (full width)
     only when there is something to collect — a locked button would only take room here */
  #gr-complete .nxd-clear {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stamps" "act"; padding: 16px; gap: 14px;
  }
  #gr-complete .nxd-stamps { justify-content: space-between; gap: 6px; }
  #gr-complete .nxd-stamps li { flex: 1 1 0; max-width: 46px; }
  #gr-complete .nxd-clear-act { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  #gr-complete .nxd-clear-count { display: flex; align-items: baseline; gap: 8px; margin-inline-end: auto; justify-self: auto; }
  #gr-complete .nxd-clear-act > .nxd-locked { display: none; }
  #gr-complete .nxd-clear-act > .nxd-collect { flex: 1 1 100%; }

  #gr-complete .nxd-mission { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; gap: 12px 14px; }
  #gr-complete .nxd-m-ico { width: 44px; height: 44px; }
  #gr-complete .nxd-mission .nxd-prog, #gr-complete .nxd-mission .nxd-deal, #gr-complete .nxd-mission > .nxd-err { grid-column: 1 / -1; grid-row: auto; }
  #gr-complete .nxd-mission .nxd-deal { justify-content: space-between; }
  /* a mission still in progress has no button: its reward sits beside the title, not on an empty row */
  #gr-complete .nxd-mission.is-todo { grid-template-columns: 44px minmax(0, 1fr) auto; }
  #gr-complete .nxd-mission.is-todo .nxd-deal { grid-column: 3; grid-row: 1; min-height: 0; align-self: start; padding-top: 2px; }
  #gr-complete .nxd-mission.is-claimed .nxd-deal { min-height: 0; }
  #gr-complete .nxd-sk-hero > span { height: 300px; }
}

/* ---------- no motion: every effect is simply its end state ---------- */
#gr-complete[data-motion=off] .nxd *, #gr-complete[data-motion=off] .nxd *::before, #gr-complete[data-motion=off] .nxd *::after {
  animation: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #gr-complete .nxd *, #gr-complete .nxd *::before, #gr-complete .nxd *::after { animation: none !important; transition: none !important; }
}