/* ============================================================
   GameRoch — the Store: a character studio (V3 Live Update 1, prefix nxs-)

   Built on the nx- kit (css/next.css). Everything that belongs to the THEME
   uses the theme tokens. Four things carry colours of their own because they
   must mean the same in every theme: a coin is gold (the kit's), a price tag
   is cream with gold, and the three rarities above "common" are blue, violet
   and gold — as small labels and a thin edge, never as a fill.

   The stage is the ONE loud panel (the theme's gradient). Everything else is
   calm: tiles are small cards, the trying-on list is a card.

   Layout follows the SHELL's width (container gr-shell), never the window's.
   Desktop: the stage (and the trying-on list) stays beside the wardrobe.
   Phone: the stage sticks to the top, the tab bar beneath it, the trying-on
   bar sticks above the shell's bottom bar (--nxs-stage-h / --nxs-bottom are
   measured by shop.js).
   What sticks must also FIT the window's height, which no container can tell:
   inside the shell's breakpoints, two height queries lay the stage down in a
   short window (most laptops leave 600-800px) and let it go in a tiny one.

   Motion: one entrance for the stage (here), one small reaction of the mirror
   to a change and one swing of the price tag (shop.js `pop`). All of it is
   off under [data-motion=off] and prefers-reduced-motion.
   ============================================================ */

#gr-complete .nxs {
  --nxs-common: #56657c;
  --nxs-rare: #1c5fca;
  --nxs-epic: #7437da;
  --nxs-legend: #ffc93c;
  --nxs-legend-ink: #432c00;
  --nxs-glass: #00000040;
  --nxs-stick: 0px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-gap); min-width: 0;
}
#gr-complete .nxs-studio p, #gr-complete .nxs-item p, #gr-complete p.nxs-foot, #gr-complete .nxs-confirm p { margin: 0; }
#gr-complete .nxs ul, #gr-complete .nxs dl, #gr-complete .nxs dd { list-style: none; margin: 0; padding: 0; }
#gr-complete .nxs [tabindex="-1"]:focus { outline: none; }
#gr-complete .nxs [tabindex="-1"]:focus-visible { outline: 3px solid var(--gr-blue); outline-offset: 2px; }
#gr-complete .nxs .nx-head { margin-bottom: 2px; }
#gr-complete .nxs-strips { display: grid; gap: 10px; }

/* ---------- the studio: the stage beside the wardrobe ----------
   On a short tab the shell keeps the page taller than this screen (its side menu is taller). The
   studio takes that room, so the side always has somewhere to stick: a short page never carries
   the mirror under the header. */
#gr-complete .nxs[data-view=studio] { display: flex; flex-direction: column; min-height: 100%; }
#gr-complete .nxs-studio {
  flex: 1 0 auto;
  display: grid; grid-template-columns: minmax(270px, 336px) minmax(0, 1fr); gap: 22px; align-items: start;
}
/* The side sticks under the header and is never taller than what is left of the window at the
   very END of the page, where the shell's footer (--nxs-below, measured by shop.js) comes up from
   below: so the mirror is never pushed under the header. When it has to give, the trying-on list
   scrolls inside. */
#gr-complete .nxs-side {
  position: sticky; top: calc(var(--gr-header-h, 75px) + 14px); z-index: 2;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  max-height: calc(100vh - var(--gr-header-h, 75px) - 14px - var(--nxs-below, 100px));
  max-height: calc(100dvh - var(--gr-header-h, 75px) - 14px - var(--nxs-below, 100px));
}

/* ---------- the stage ---------- */
#gr-complete .nxs-stage {
  --nxs-mirror: clamp(148px, 25vh, 224px);
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  grid-template-areas: "purse purse" "mirror mirror" "name name" "note note" "save save" "reset surprise";
  justify-items: center; text-align: center; padding: 14px 18px 18px;
}
/* white text must hold 4.5:1 where the theme's gradient turns light */
#gr-complete .nxs-stage::before, #gr-complete .nxs-item-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(165deg, #0000001f 0%, #00000047 100%);
}
#gr-complete .nxs-purse {
  grid-area: purse; justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 99px; background: var(--nxs-glass); color: #fff;
  font-size: 12.5px; font-weight: 600; line-height: 1;
}
#gr-complete .nxs-purse .nx-cur { font-size: 14px; }
#gr-complete .nxs-dash { font-weight: 800; font-size: 15px; }

#gr-complete .nxs-mirror { grid-area: mirror; position: relative; width: var(--nxs-mirror); max-width: 100%; aspect-ratio: 1; margin: 12px 0 8px; }
#gr-complete .nxs-mirror::before {
  content: ""; position: absolute; inset: -10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #ffffff38 0 82%, #ffffff17 83% 99%, transparent 100%);
}
#gr-complete .nxs-face {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 5px #fff, 0 24px 34px -18px #000000cc;
}
#gr-complete .nxs-face svg, #gr-complete .nxs-art svg, #gr-complete .nxs-try-art svg,
#gr-complete .nxs-mini svg, #gr-complete .nxs-ring svg, #gr-complete .nxs-confirm-art svg {
  display: block; width: 100%; height: 100%;
}
/* the price tag: "this is not yours yet" */
#gr-complete .nxs-tag {
  position: absolute; top: 3%; inset-inline-end: -12%; z-index: 2;
  display: inline-flex; align-items: center; padding-block: 7px; padding-inline: 19px 11px;
  border-start-start-radius: 7px; border-end-start-radius: 7px; border-start-end-radius: 12px; border-end-end-radius: 12px;
  background: #fff6d2; color: #3a2500; font: 800 14px/1 Outfit, 'DM Sans', sans-serif; white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px #e3a900, 0 8px 16px -8px #000000b3; rotate: 8deg; transform-origin: 9px 50%;
}
/* in a right-to-left language the tag hangs from the mirror's other side, by its other end */
#gr-complete .nxs-tag:dir(rtl) { rotate: -8deg; transform-origin: calc(100% - 9px) 50%; }
#gr-complete .nxs-tag::before {
  content: ""; position: absolute; inset-inline-start: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: #a87400;
}
#gr-complete .nxs-tag .nx-cur { font-size: 14px; gap: 5px; }

#gr-complete .nxs-name {
  grid-area: name; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font: 800 21px/1.15 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em;
}
#gr-complete .nxs-stage .nxs-note { grid-area: note; color: #fff; font-size: 14px; line-height: 1.4; min-height: 2.8em; max-width: 30ch; }
#gr-complete .nxs-unsaved {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 99px;
  background: #fff; color: var(--gr-hero); font-size: 12.5px; font-weight: 800; line-height: 1.2;
}
#gr-complete .nxs-unsaved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#gr-complete .nxs-reason { display: block; font-weight: 700; }

#gr-complete .nxs-act { display: grid; min-width: 0; justify-self: stretch; }
#gr-complete .nxs-act.is-save { grid-area: save; }
#gr-complete .nxs-act.is-reset { grid-area: reset; }
#gr-complete .nxs-act.is-surprise { grid-area: surprise; }
#gr-complete .nxs-stage .gr-play.nxs-save {
  min-height: 48px; padding: 11px 16px; border-radius: 14px;
  font: 800 15px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em;
  background: #fff; color: var(--gr-hero); border-bottom-color: #0000002e; box-shadow: 0 14px 26px -12px #000000a6;
}
#gr-complete .nxs-stage .gr-play.nxs-save:hover { background: #fff; filter: brightness(.97); }
#gr-complete .nxs-stage .gr-play.nxs-save:disabled {
  opacity: 1; background: #ffffff1f; color: #fff; border-bottom-color: transparent; transform: none; filter: none;
  box-shadow: inset 0 0 0 1.5px #ffffff66;
}
#gr-complete .nxs-stage .gr-soft.nxs-ghost {
  min-height: 44px; padding: 6px 10px; border-radius: 12px; gap: 8px;
  background: var(--nxs-glass); border-color: #ffffff4d; color: #fff; font-size: 13.5px; font-weight: 700;
}
#gr-complete .nxs-stage .gr-soft.nxs-ghost:hover:not(:disabled) { background: #00000059; border-color: #fff; }
#gr-complete .nxs-stage .gr-soft.nxs-ghost:disabled { opacity: .62; }
#gr-complete .nxs-mini { display: block; width: 26px; height: 26px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px #fff; }

/* ---------- trying on ----------
   One compact row per part, the same in every layout: its picture, its name, Buy (the label carries
   the price) and a cross that takes it off. A row is 44px, so two of them fit under the stage even
   in a short window; more scroll inside the card. */
#gr-complete .nxs-try {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 18px;
  background: var(--gr-panel); border: 1px solid var(--gr-line); box-shadow: var(--gr-shadow);
}
#gr-complete .nxs-try[hidden] { display: none; }
#gr-complete .nxs-try-h { display: flex; align-items: center; gap: 8px; font: 800 15px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; }
#gr-complete .nxs-count {
  min-width: 20px; padding: 2px 6px; border-radius: 99px; background: var(--gr-blue); color: var(--gr-on);
  font: 800 11px/1.45 'DM Sans', sans-serif; text-align: center;
}
#gr-complete .nxs-try-list { display: grid; gap: 8px; }
#gr-complete .nxs-try-item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; gap: 6px 8px; align-items: center;
  padding-top: 8px; border-top: 1px solid var(--gr-line);
}
#gr-complete .nxs-try-item:first-child { padding-top: 0; border-top: 0; }
#gr-complete .nxs-try-art { display: block; width: 44px; height: 44px; border-radius: 13px; overflow: hidden; background: var(--gr-tint); }
#gr-complete .nxs-try-id { display: grid; gap: 3px; min-width: 0; }
#gr-complete .nxs-try-id > b {
  font-size: 13.5px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
#gr-complete .nxs-try-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
/* a part on sale says its price on its Buy button; the others say why there is none */
#gr-complete .nxs-try-item[data-state=price] .nxs-try-meta { display: none; }
#gr-complete .nxs-off-sale { color: var(--gr-sub); font-weight: 600; }
#gr-complete .nxs-why, #gr-complete .nxs-err { grid-column: 1 / -1; }
#gr-complete .nxs-why {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px;
  color: var(--nx-warn); font-size: 13px; font-weight: 700; line-height: 1.3;
}
#gr-complete .nxs .gr-link.nxs-earn { min-height: 44px; padding: 6px 8px; margin-block: -6px; margin-inline: 0 -8px; font-size: 13px; gap: 5px; }
#gr-complete .nxs .gr-link.nxs-earn svg { width: 15px; height: 15px; }
#gr-complete .nxs-err { color: var(--nx-bad); font-size: 13px; font-weight: 600; line-height: 1.35; }
#gr-complete .nxs-try-acts { display: contents; }
#gr-complete .nxs .gr-play.nxs-buy, #gr-complete .nxs .gr-soft.nxs-buy { min-height: 44px; padding: 9px 14px; border-radius: 12px; font-size: 14px; font-weight: 800; }
#gr-complete .nxs .nxs-try-acts .nxs-buy { grid-column: 3; grid-row: 1; padding: 8px 12px; font-size: 13.5px; }
#gr-complete .nxs .gr-soft.nxs-off { grid-column: 4; grid-row: 1; width: 44px; min-height: 44px; padding: 0; border-radius: 12px; }

/* ---------- the wardrobe ---------- */
#gr-complete .nxs-wardrobe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
/* the tab bar stays in reach while a long tab scrolls beneath it */
#gr-complete .nxs-tabs {
  position: sticky; top: var(--gr-header-h, 75px); z-index: 3; display: flex; min-width: 0;
  margin: -8px -6px; padding: 8px 6px; background: var(--gr-bg);
}
#gr-complete .nxs-tabs .nx-tabs { max-width: 100%; }
#gr-complete .nxs button.nx-tab { min-height: 44px; }
#gr-complete .nxs .nx-tab:not([aria-selected=true]) { color: color-mix(in srgb, var(--gr-sub) 72%, var(--gr-ink)); }
#gr-complete .nxs-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
#gr-complete .nxs-slot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
#gr-complete .nxs-slot-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
#gr-complete .nxs-slot-h { font: 800 16px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; }
#gr-complete .nxs-hint { margin: 0; color: var(--gr-sub); font-size: 13px; line-height: 1.3; }
#gr-complete .nxs-hint[hidden] { display: none; }
#gr-complete .nxs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
#gr-complete .nxs-grid.is-small { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }

/* a tile: the part on your own face, its name, what it costs you */
#gr-complete button.nxs-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  min-width: 0; min-height: 44px; padding: 6px 6px 9px; border-radius: 16px; text-align: center;
  background: var(--gr-panel); border: 1.5px solid var(--gr-line); color: var(--gr-ink);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
  #gr-complete button.nxs-tile:hover { background: var(--gr-panel); border-color: color-mix(in srgb, var(--gr-blue) 60%, var(--gr-line)); transform: translateY(-2px); }
}
#gr-complete .nxs-art { display: block; width: 100%; aspect-ratio: 1; border-radius: 22%; overflow: hidden; background: var(--gr-tint); }
#gr-complete .nxs-tname {
  margin-block: auto; max-width: 100%; font-size: 12.5px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
#gr-complete .nxs-stat {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 16px;
  color: var(--gr-sub); font-size: 12px; font-weight: 700; line-height: 1.2;
}
#gr-complete .nxs-stat .nx-cur { color: var(--gr-ink); font-size: 12.5px; gap: 4px; }
#gr-complete .nxs-stat.is-owned { color: var(--nx-good); }
/* the "owned" tick, and the tick on the tile being worn: drawn here, so 40 tiles need no icon pass */
#gr-complete .nxs-stat.is-owned::before, #gr-complete button.nxs-tile[aria-pressed=true]::before {
  content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.5 2.5 5.1-5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.5 2.5 5.1-5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* worn: a ring in the theme's accent and a tick on the picture */
#gr-complete button.nxs-tile[aria-pressed=true] { border-color: var(--gr-blue); background: var(--gr-tint); box-shadow: 0 0 0 1.5px var(--gr-blue); }
#gr-complete button.nxs-tile[aria-pressed=true]::after {
  content: ""; position: absolute; top: 9px; inset-inline-end: 9px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gr-blue); box-shadow: 0 0 0 2px var(--gr-tint);
}
#gr-complete button.nxs-tile[aria-pressed=true]::before {
  position: absolute; top: 13px; inset-inline-end: 13px; z-index: 1; color: var(--gr-on);
}

/* rarity: a small label, and a thin edge for the three above "common" */
#gr-complete .nxs-rar {
  display: inline-block; padding: 3px 6px; border-radius: 6px; background: var(--nxs-common); color: #fff;
  font: 800 10.5px/1.1 'DM Sans', sans-serif; font-style: normal; letter-spacing: .01em; white-space: nowrap;
}
#gr-complete .nxs-rar.is-rare { background: var(--nxs-rare); }
#gr-complete .nxs-rar.is-epic { background: var(--nxs-epic); }
#gr-complete .nxs-rar.is-legendary { background: var(--nxs-legend); color: var(--nxs-legend-ink); }
/* on a tile the label sits ON the picture's lower edge, like a ribbon: it never hides a hat */
#gr-complete .nxs-tile .nxs-rar { position: relative; z-index: 1; margin-top: -14px; box-shadow: 0 0 0 2px var(--gr-panel); }
#gr-complete button.nxs-tile[aria-pressed=true] .nxs-rar { box-shadow: 0 0 0 2px var(--gr-tint); }
#gr-complete button.nxs-tile.is-r-rare:not([aria-pressed=true]) { border-color: color-mix(in srgb, var(--nxs-rare) 46%, var(--gr-line)); }
#gr-complete button.nxs-tile.is-r-epic:not([aria-pressed=true]) { border-color: color-mix(in srgb, var(--nxs-epic) 46%, var(--gr-line)); }
#gr-complete button.nxs-tile.is-r-legendary:not([aria-pressed=true]) { border-color: color-mix(in srgb, #e39a00 62%, var(--gr-line)); }

/* ---------- frames ---------- */
#gr-complete .nxs-frames-head { display: grid; gap: 4px; }
#gr-complete .nxs-frames-head p, #gr-complete .nxs-quiet { color: var(--gr-sub); font-size: 14px; }
#gr-complete .nxs-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
#gr-complete .nxs-frames > li { display: grid; }
#gr-complete button.nxs-frame {
  display: grid; justify-items: center; align-content: start; gap: 8px; padding: 16px 10px 14px; text-align: center; min-width: 0;
  transition: transform .15s ease, border-color .15s ease;
}
@media (hover: hover) {
  #gr-complete button.nxs-frame:hover { background: var(--gr-panel); border-color: color-mix(in srgb, var(--gr-blue) 60%, var(--gr-line)); transform: translateY(-2px); }
}
#gr-complete .nxs-frame .nxs-tname { font-size: 14px; }
#gr-complete .nxs-ring {
  --nxs-ring: #ecbd49; display: block; width: 76px; height: 76px; flex: none; padding: 6px; border-radius: 30%;
  background: var(--nxs-ring); box-shadow: 0 5px 0 #00000014;
}
#gr-complete .nxs-ring.is-ice { --nxs-ring: #73ccef; }
#gr-complete .nxs-ring.is-orchid { --nxs-ring: #b18be4; }
#gr-complete .nxs-ring svg { border-radius: 24%; }

/* ---------- one item on its own page ---------- */
#gr-complete .nxs .gr-link.nxs-back { justify-self: start; min-height: 44px; padding-block: 6px; padding-inline: 4px 10px; font-size: 14px; }
#gr-complete .nxs-item { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 22px; align-items: stretch; }
#gr-complete .nxs-item-stage { --nxs-mirror: 236px; display: grid; justify-items: center; align-content: center; gap: 14px; padding: 30px 20px; text-align: center; }
#gr-complete .nxs-item-stage > p { color: #fff; font-size: 14px; font-weight: 600; }
#gr-complete .nxs-item-stage .nxs-mirror { grid-area: auto; margin: 16px 0; }
#gr-complete .nxs-item-stage .nxs-ring { width: 200px; height: 200px; padding: 15px; box-shadow: 0 0 0 5px #ffffff3d, 0 24px 34px -18px #000000cc; }
#gr-complete .nxs-thing { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 36px; background: #00000033; color: #fff; }
#gr-complete .nxs-thing svg { width: 56px; height: 56px; }
#gr-complete .nxs-item-info { display: grid; align-content: center; justify-items: start; gap: 12px; padding: 26px 28px; }
#gr-complete .nxs-kind { display: flex; align-items: center; gap: 9px; color: var(--gr-sub); font-size: 13px; font-weight: 700; }
#gr-complete .nxs-item-info h1 { font: 800 clamp(28px, 3.4cqi, 42px)/1.05 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; }
#gr-complete .nxs-desc { color: var(--gr-sub); font-size: 15px; line-height: 1.45; }
#gr-complete .nxs-item-info .nxs-price { display: flex; align-items: center; min-height: 40px; color: var(--gr-ink); }
#gr-complete .nxs-big { font: 800 26px/1.1 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; }
#gr-complete .nxs-big.is-owned { color: var(--nx-good); }
#gr-complete .nxs-big.is-soon { color: var(--gr-sub); }
#gr-complete .nxs-item-info .nxs-why { justify-self: stretch; justify-content: flex-start; gap: 4px 14px; font-size: 14px; }
#gr-complete .nxs .nxs-item-info .gr-link.nxs-earn { margin-block: -6px; margin-inline: 0; }
#gr-complete .nxs-item-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
#gr-complete .nxs-item-acts .gr-play { min-height: 48px; padding: 11px 20px; border-radius: 14px; font-size: 15px; font-weight: 800; }
#gr-complete .nxs-item-acts .nxs-buy { min-height: 48px; padding: 11px 18px; border-radius: 14px; font-size: 15px; }
#gr-complete .nxs-wallet {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; justify-self: stretch;
  border-top: 1px solid var(--gr-line); color: var(--gr-sub); font-size: 13px; font-weight: 600;
}
#gr-complete .nxs-wallet .nx-cur { color: var(--gr-ink); font-size: 14px; }

/* ---------- the line at the foot, and the pictures while reading ---------- */
#gr-complete .nxs-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; color: var(--gr-sub); font-size: 13.5px; line-height: 1.4; }
#gr-complete .nxs-foot .gr-link { min-height: 44px; font-size: 13.5px; gap: 5px; padding: 6px 8px; }
#gr-complete .nxs-foot .gr-link svg { width: 15px; height: 15px; }
#gr-complete .nxs-sk-stage > span { height: 420px; border-radius: calc(var(--nx-r) + 4px); }
#gr-complete .nxs-sk-tabs > span { height: 52px; }
#gr-complete .nxs-sk-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
#gr-complete .nxs-sk-grid > span { height: 138px; border-radius: 16px; }
#gr-complete .nxs-sk-lines { align-content: center; }
#gr-complete .nxs-sk-lines > span { height: 54px; }

/* ---------- the purchase confirmation (inside #gr-complete, so the theme applies) ---------- */
#gr-complete .nxs-modal { background: #0b1220a6; }
#gr-complete .nxs-confirm {
  display: grid; justify-items: center; gap: 14px; max-width: 380px; padding: 26px 24px 22px; text-align: center;
  color: var(--gr-ink); box-shadow: 0 30px 60px -20px #000000a6;
}
#gr-complete .nxs-confirm-art { display: block; width: 96px; height: 96px; border-radius: 26px; overflow: hidden; background: var(--gr-tint); box-shadow: 0 0 0 4px var(--gr-tint); }
#gr-complete .nxs-confirm .nxs-ring { width: 96px; height: 96px; padding: 8px; }
#gr-complete .nxs-confirm h2 { font: 800 23px/1.15 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; margin: 0; }
#gr-complete .nxs-bill { align-self: stretch; justify-self: stretch; display: grid; gap: 0; border: 1px solid var(--gr-line); border-radius: 14px; overflow: hidden; }
#gr-complete .nxs-bill > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 14px; }
#gr-complete .nxs-bill > div + div { border-top: 1px solid var(--gr-line); }
#gr-complete .nxs-bill dt { color: var(--gr-sub); font-weight: 600; text-align: start; }
#gr-complete .nxs-bill dd { font-weight: 800; }
#gr-complete .nxs-bill .is-after { background: var(--gr-tint); }
#gr-complete .nxs-bill .is-after dt { color: var(--gr-ink); font-weight: 700; }
#gr-complete .nxs-confirm-acts { justify-self: stretch; display: grid; gap: 8px; }
#gr-complete .nxs-confirm-acts .gr-play { min-height: 50px; border-radius: 14px; font: 800 15px/1.2 Outfit, 'DM Sans', sans-serif; }
#gr-complete .nxs-confirm-acts .gr-soft { min-height: 46px; border-radius: 14px; font-size: 14px; font-weight: 700; }
/* in a window too short for all of it (a phone on its side) the picture goes, so the sum and both buttons are on screen */
@media (max-height: 520px) {
  #gr-complete .nxs-confirm { gap: 10px; padding: 16px 20px; }
  #gr-complete .nxs-confirm-art { display: none; }
  #gr-complete .nxs-bill > div { padding: 7px 14px; }
  #gr-complete .nxs-confirm-acts .gr-play { min-height: 46px; }
  #gr-complete .nxs-confirm-acts .gr-soft { min-height: 44px; }
}

/* ---------- narrow shells: the stage on top, everything in one column ---------- */
@container gr-shell (max-width: 900px) {
  #gr-complete .nxs { --nxs-stick: var(--gr-header-h, 75px); }
  #gr-complete .nxs-studio { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  #gr-complete .nxs-side, #gr-complete .nxs-wardrobe { display: contents; }

  /* the stage: the mirror beside its controls, stuck to the top while the wardrobe scrolls */
  #gr-complete .nxs-stage {
    --nxs-mirror: 116px;
    order: 1; position: sticky; top: calc(var(--nxs-stick) + 6px); z-index: 6;
    grid-template-columns: var(--nxs-mirror) minmax(0, 1fr) 44px 44px; grid-template-rows: 44px minmax(30px, 1fr) auto;
    grid-template-areas: "mirror purse reset surprise" "mirror note note note" "mirror save save save";
    gap: 5px 8px; align-items: center; justify-items: stretch; text-align: start; padding: 10px; padding-inline-end: 12px;
    box-shadow: 0 0 0 10px var(--gr-bg);                 /* nothing shows round its corners as tiles pass beneath */
  }
  #gr-complete .nxs-mirror { margin: 0; align-self: center; }
  #gr-complete .nxs-mirror::before { inset: -5%; }
  #gr-complete .nxs-face { box-shadow: 0 0 0 3px #fff, 0 14px 22px -12px #000000cc; }
  /* on the small mirror the tag hangs from its lower edge, clear of the controls beside it */
  #gr-complete .nxs-tag {
    top: auto; bottom: -5px; inset-inline: 0; margin-inline: auto; width: max-content; rotate: -5deg;
    padding-block: 5px; padding-inline: 15px 8px; font-size: 12px;
  }
  #gr-complete .nxs-tag:dir(rtl) { rotate: 5deg; }
  #gr-complete .nxs-tag .nx-cur { font-size: 12px; }
  #gr-complete .nxs-tag::before { inset-inline-start: 5px; width: 5px; height: 5px; margin-top: -2.5px; }
  #gr-complete .nxs-name, #gr-complete .nxs-stage .nxs-purse-l, #gr-complete .nxs-ghost-l { display: none; }
  #gr-complete .nxs-purse { padding: 7px 11px; }
  #gr-complete .nxs-stage .nxs-note {
    min-height: 0; max-width: none; font-size: 13px; line-height: 1.3;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  }
  #gr-complete .nxs-reason { display: inline; }
  #gr-complete .nxs-unsaved { padding: 4px 10px; font-size: 12px; }
  #gr-complete .nxs-stage .gr-play.nxs-save { min-height: 44px; padding: 8px 12px; border-radius: 12px; font-size: 14.5px; }
  #gr-complete .nxs-stage .gr-soft.nxs-ghost { padding: 0; }

  #gr-complete .nxs-tabs { order: 2; top: calc(var(--nxs-stick) + var(--nxs-stage-h, 150px) + 8px); z-index: 5; margin: -4px -6px; padding: 6px; }
  #gr-complete .nxs-tabs .nx-tabs { display: flex; width: 100%; }
  #gr-complete .nxs-panel { order: 3; }
  #gr-complete .nxs-foot { order: 5; }

  /* trying on: a bar that stays above the shell's bottom bar; more than three rows scroll inside */
  #gr-complete .nxs-try {
    order: 4; position: sticky; bottom: calc(var(--nxs-bottom, 0px) + 8px); z-index: 6;
    max-height: 178px; padding: 10px 12px; gap: 0;
    box-shadow: 0 0 0 1px var(--gr-line), 0 -12px 30px -14px #0f1f3d80;
  }
  #gr-complete .nxs-try-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #gr-complete .nxs-item { grid-template-columns: minmax(0, 1fr); }

  /* a window too short for a stuck stage, a stuck tab bar AND tiles between them (a phone on its
     side): the stage and the tabs scroll with the page; the trying-on bar, with its Buy, stays */
  @media (max-height: 540px) {
    #gr-complete .nxs-stage { position: relative; top: auto; box-shadow: none; }
    #gr-complete .nxs-tabs { position: relative; top: auto; }
  }
}
/* beside the wardrobe the list never shrinks to nothing (its heading and one row) */
@container gr-shell (min-width: 901px) {
  #gr-complete .nxs-try { min-height: 98px; }

  /* ---------- beside the wardrobe in a SHORT window ----------
     A 1366x768 laptop leaves about 630px, a 1080p one at 125% about 730px. The tall stage with
     two trying-on rows takes 880px, so here the stage lies down — the mirror beside its words, as
     on a phone, but with every button still labelled. Mirror, Save and two rows of Buy are then
     on screen together, from the top of the page to its very end. */
  @media (max-height: 880px) {
    #gr-complete .nxs-stage {
      --nxs-mirror: clamp(112px, calc(100vh - 455px), 148px);
      grid-template-areas: "mirror purse" "mirror name" "mirror note" "save save" "reset surprise";
      grid-template-rows: auto auto minmax(0, 1fr) auto auto;
      gap: 6px 12px; justify-items: stretch; text-align: start; padding: 12px 14px 14px;
    }
    #gr-complete .nxs-stage .nxs-mirror { margin: 0; justify-self: center; align-self: start; }
    #gr-complete .nxs-stage .nxs-mirror::before { inset: -5%; }
    #gr-complete .nxs-stage .nxs-face { box-shadow: 0 0 0 4px #fff, 0 16px 24px -14px #000000cc; }
    #gr-complete .nxs-tag {
      top: auto; bottom: -5px; inset-inline: 0; margin-inline: auto; width: max-content; rotate: -5deg;
      padding-block: 5px; padding-inline: 16px 9px; font-size: 13px;
    }
    #gr-complete .nxs-tag:dir(rtl) { rotate: 5deg; }
    #gr-complete .nxs-tag .nx-cur { font-size: 13px; }
    #gr-complete .nxs-tag::before { inset-inline-start: 6px; width: 5px; height: 5px; margin-top: -2.5px; }
    #gr-complete .nxs-stage .nxs-purse-l { display: none; }
    #gr-complete .nxs-purse { align-self: start; margin-top: 4px; padding: 7px 12px; }
    #gr-complete .nxs-name { justify-self: start; font-size: 19px; }
    #gr-complete .nxs-stage .nxs-note {
      align-self: start; min-height: 0; max-width: none; font-size: 13px; line-height: 1.3;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
    }
    #gr-complete .nxs-reason { display: inline; }
    #gr-complete .nxs-unsaved { padding: 4px 10px; font-size: 12px; }
    #gr-complete .nxs-stage .gr-play.nxs-save { min-height: 44px; padding: 8px 12px; border-radius: 12px; font-size: 14.5px; margin-top: 4px; }
    #gr-complete .nxs-try { min-height: 64px; padding: 10px 12px; gap: 0; }
    #gr-complete .nxs-try-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    #gr-complete .nxs-sk-stage > span { height: 274px; }
  }
}

@container gr-shell (max-width: 620px) {
  #gr-complete .nxs { --nxs-stick: 0px; gap: 12px; }
  #gr-complete .nxs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #gr-complete .nxs-grid.is-small { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #gr-complete .nxs-panel { gap: 18px; }
  #gr-complete .nxs-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* compact, so the item's one action is on the first screen */
  #gr-complete .nxs-item-stage { --nxs-mirror: 148px; padding: 16px; gap: 8px; }
  #gr-complete .nxs-item-stage .nxs-mirror { margin: 10px 0 8px; }
  #gr-complete .nxs-item-stage .nxs-ring { width: 148px; height: 148px; padding: 11px; }
  #gr-complete .nxs-item-info { padding: 18px; }
  #gr-complete .nxs-item-acts { align-self: stretch; }
  #gr-complete .nxs-item-acts > button { flex: 1 1 100%; }
  #gr-complete .nxs-sk-stage > span { height: 150px; }
  #gr-complete .nxs-sk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@container gr-shell (max-width: 370px) {
  #gr-complete .nxs-stage { --nxs-mirror: 100px; }
}

/* ---------- motion: an answer to the player's action, nothing else ---------- */
@keyframes nxs-enter { from { transform: scale(.84); opacity: 0; } to { transform: none; opacity: 1; } }
#gr-complete .nxs-stage.is-enter .nxs-mirror { animation: nxs-enter .56s cubic-bezier(.2, .9, .3, 1.25) var(--nxs-el, 0ms) both; }
/* the mirror's reaction to a change and the tag's swing are run by shop.js (pop), which checks the same two switches */
@media (prefers-reduced-motion: reduce) {
  #gr-complete .nxs-stage.is-enter .nxs-mirror { animation: none; }
  #gr-complete button.nxs-tile, #gr-complete button.nxs-frame { transition: none; }
  #gr-complete button.nxs-tile:hover, #gr-complete button.nxs-frame:hover { transform: none; }
}
#gr-complete[data-motion=off] .nxs-stage.is-enter .nxs-mirror { animation: none; }