/* ============================================================
   GameRoch — Account & sign-in (V3 Live Update 1, prefix nxa-)

   A UTILITY screen: no hero, no gradient. One card that says who the player
   is, why to sign in and what to press; one quieter card beside it about
   getting a player back. Built on the nx- kit (css/next.css); everything that
   belongs to the THEME uses the theme tokens, and the three meanings used here
   are the kit's own (good = signed in, amber = attention, red = it failed).

   Layout follows the SHELL's width (container gr-shell), never the window's.
   Motion answers the player's own action (the answer arriving, the wait for
   the provider) and is removed under [data-motion=off] and reduced motion.
   ============================================================ */

#gr-complete .nxa { display: grid; gap: var(--nx-gap); min-width: 0; }
#gr-complete .nxa .nx-head { margin: 0 0 4px; }
#gr-complete .nxa p { margin: 0; }
#gr-complete .nxa ul { list-style: none; margin: 0; padding: 0; }
#gr-complete .nxa h2, #gr-complete .nxa h3 { margin: 0; color: var(--gr-ink); }
#gr-complete .nxa-cols {
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: var(--nx-gap);
  align-items: start; max-width: 1080px; min-width: 0;
}
/* NOT overflow:hidden — that would make the card a scroll container, and an answer brought
   into view inside it would lose its scroll margin (the phone's bottom bar would cover it).
   The tinted strip carries the card's top corners itself instead. */
#gr-complete .nxa-card { min-width: 0; }

/* containers that take the keyboard when an answer appears (see announce in signin.js) */
#gr-complete .nxa [tabindex="-1"]:focus { outline: none; }
#gr-complete .nxa [tabindex="-1"]:focus-visible { outline: 3px solid var(--gr-blue); outline-offset: 2px; }
/* …and wherever it lands stays clear of the shell: the sticky header above 620px, the
   bottom bar on a phone (see the 620px block). signin.js reads these two margins. */
#gr-complete .nxa [data-nxa-focus], #gr-complete .nxa-back {
  scroll-margin-block: calc(var(--gr-header-h, 75px) + 12px) 16px;
}

/* ---------- who am I, and what state am I in ---------- */
#gr-complete .nxa-who {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px;
  padding: 20px 22px; border-bottom: 1px solid var(--gr-line);
  border-radius: calc(var(--nx-r) - 1px) calc(var(--nx-r) - 1px) 0 0;
  background: color-mix(in srgb, var(--gr-tint) 55%, var(--gr-panel));
}
#gr-complete .nxa-face { display: inline-grid; }
#gr-complete .nxa-id { min-width: 0; }
#gr-complete .nxa-name {
  font: 800 23px/1.15 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere;
}
#gr-complete .nxa-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 5px;
  font-size: 13px; line-height: 1.3; color: var(--gr-sub);
}
#gr-complete .nxa-meta:empty { display: none; }
#gr-complete .nxa-handle { font-weight: 600; overflow-wrap: anywhere; }
#gr-complete .nxa-holds { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
#gr-complete .nxa-hold { font-size: 13px; font-weight: 600; color: var(--gr-sub); white-space: nowrap; }
#gr-complete .nxa-hold > i { font-size: 12px; }
#gr-complete .nxa-status { display: grid; justify-items: end; gap: 5px; text-align: end; }
#gr-complete .nxa-status .nx-pill { font-size: 13px; padding: 5px 12px; gap: 6px; }
#gr-complete .nxa-status .nx-pill svg { width: 15px; height: 15px; }
#gr-complete .nxa-status-sub { font-size: 12.5px; line-height: 1.3; color: var(--gr-sub); }

/* ---------- a deletion in progress ---------- */
#gr-complete .nxa-del {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 22px;
  background: var(--nx-warn-soft); border-bottom: 1px solid color-mix(in srgb, var(--nx-warn) 30%, transparent);
}
#gr-complete .nxa-del > svg { flex: none; width: 22px; height: 22px; color: var(--nx-warn); }
#gr-complete .nxa-del > div { flex: 1 1 220px; min-width: 0; }
#gr-complete .nxa-del h3 { font: 700 16px/1.25 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; }
#gr-complete .nxa-del p { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--gr-ink); }
#gr-complete .nxa .nxa-ref { margin-top: 5px; font-size: 12.5px; color: var(--gr-ink); }
#gr-complete .nxa-ref code {
  font: 600 12.5px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--gr-ink) 9%, transparent);
  overflow-wrap: anywhere;
}

/* ---------- the body: why, the one button, the reassurance ---------- */
#gr-complete .nxa-body { display: grid; gap: 14px; padding: 20px 22px 22px; min-width: 0; }
#gr-complete .nxa-title { font: 700 19px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; }
#gr-complete .nxa-lead { font-size: 15px; line-height: 1.5; color: var(--gr-ink); margin-top: -6px; }
#gr-complete .nxa-why { display: grid; gap: 10px; }
#gr-complete .nxa-why li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; color: var(--gr-ink); }
#gr-complete .nxa-why svg, #gr-complete .nxa-q > svg {
  flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 11px;
  background: var(--gr-tint); color: var(--gr-blue);
}
#gr-complete .nxa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 2px; }
#gr-complete .nxa-actions .gr-play, #gr-complete .nxa-actions .gr-soft { min-height: 48px; font-size: 15px; }
#gr-complete .nxa-actions .gr-play svg, #gr-complete .nxa-actions .gr-soft svg { width: 17px; height: 17px; }
#gr-complete .nxa-actions .gr-soft { padding-inline: 16px; }
#gr-complete .gr-play.nxa-go, #gr-complete .gr-soft.nxa-go {
  min-height: 54px; padding-block: 9px; padding-inline: 10px 22px; border-radius: 14px; gap: 12px;
  font: 800 16px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em;
}
#gr-complete .nxa-mark {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: #fff; color: #000; box-shadow: 0 1px 2px #0000002b;
}
#gr-complete .nxa-mark svg { width: 20px; height: 20px; display: block; }
#gr-complete .nxa-go[aria-busy=true] { padding-inline: 18px 22px; cursor: progress; opacity: .9; }
#gr-complete .gr-link.nxa-later { font-size: 14px; min-height: 44px; padding-inline: 10px; }
#gr-complete .nxa-hint { font-size: 13.5px; line-height: 1.45; color: var(--gr-sub); }
#gr-complete .nxa .nxa-fine {
  display: flex; align-items: flex-start; gap: 9px; margin: 0;
  font-size: 13px; line-height: 1.5; color: var(--gr-sub);
}
#gr-complete .nxa-fine > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
#gr-complete .nxa-part {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 22px;
  border-top: 1px solid var(--gr-line); font-size: 13.5px; color: var(--gr-sub);
}
#gr-complete .nxa-part > svg { flex: none; width: 18px; height: 18px; }
#gr-complete .nxa-part > span { flex: 1 1 200px; min-width: 0; }
#gr-complete .nxa-part .gr-soft svg { width: 15px; height: 15px; }

/* the wait for the provider's window */
#gr-complete .nxa-spin {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-block;
  border: 2.5px solid color-mix(in srgb, currentColor 32%, transparent); border-top-color: currentColor;
  animation: nxa-spin .8s linear infinite;
}
@keyframes nxa-spin { to { transform: rotate(360deg); } }

/* ---------- the answer to the last attempt, in place ---------- */
#gr-complete .nxa-out {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--nx-r-sm);
  border: 1px solid var(--gr-line); background: color-mix(in srgb, var(--gr-ink) 4%, var(--gr-panel));
}
#gr-complete .nxa-out > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--gr-sub); }
#gr-complete .nxa-out > div { min-width: 0; }
#gr-complete .nxa-out-t { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--gr-ink); overflow-wrap: anywhere; }
#gr-complete .nxa .nxa-out-s { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--gr-sub); }
#gr-complete .nxa-out.is-good { background: var(--nx-good-soft); border-color: color-mix(in srgb, var(--nx-good) 35%, transparent); }
#gr-complete .nxa-out.is-good > svg { color: var(--nx-good); }
#gr-complete .nxa-out.is-bad { background: var(--nx-bad-soft); border-color: color-mix(in srgb, var(--nx-bad) 35%, transparent); }
#gr-complete .nxa-out.is-bad > svg { color: var(--nx-bad); }
#gr-complete .nxa-out.is-good .nxa-out-s, #gr-complete .nxa-out.is-bad .nxa-out-s { color: var(--gr-ink); }
#gr-complete .nxa [data-fresh] {
  animation: nxa-in .32s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--nxa-el, 0ms);
}
@keyframes nxa-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- that account already has a player: the choice ----------
   Two doors, each button beside its own consequence, and what switching costs
   said underneath. Nothing here is decoration: the frame is the theme's accent
   because this is the one thing on the screen that is waiting for an answer. */
#gr-complete .nxa-choice {
  display: grid; gap: 14px; padding: 16px; border-radius: var(--nx-r); min-width: 0;
  border: 1.5px solid color-mix(in srgb, var(--gr-blue) 50%, var(--gr-line));
  background: color-mix(in srgb, var(--gr-tint) 45%, var(--gr-panel));
}
#gr-complete .nxa-choice-head h3 { font: 700 18px/1.25 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; }
#gr-complete .nxa-choice-head p { margin-top: 5px; font-size: 14.5px; line-height: 1.45; color: var(--gr-ink); }
#gr-complete .nxa-choice-err {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--nx-r-sm);
  background: var(--nx-bad-soft); color: var(--gr-ink); font-size: 14px; font-weight: 600; line-height: 1.4;
}
#gr-complete .nxa-choice-err > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--nx-bad); }
/* side by side while each door has room for its words, one under the other when it has not */
#gr-complete .nxa-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(236px, 100%), 1fr)); gap: 12px; }
#gr-complete .nxa-door {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 14px 12px;
  padding: 14px; border-radius: var(--nx-r-sm); border: 1px solid var(--gr-line); background: var(--gr-panel);
  min-width: 0;
}
#gr-complete .nxa-door > button { grid-column: 1 / -1; width: 100%; min-height: 48px; font-size: 15px; }
#gr-complete .nxa-door > .gr-play { font-weight: 800; }
#gr-complete .nxa-door-mark {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: #fff; color: #000; border: 1px solid var(--gr-line);
}
#gr-complete .nxa-door-mark > svg { width: 22px; height: 22px; display: block; }
#gr-complete .nxa-door-mark.is-face { background: none; border: 0; }
#gr-complete .nxa-door-txt { min-width: 0; display: grid; gap: 3px; align-content: start; }
#gr-complete .nxa-door-txt b { font: 700 16px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
#gr-complete .nxa-door-txt small { font-size: 13px; line-height: 1.4; color: var(--gr-sub); }
#gr-complete .nxa-door-txt .nxa-holds { margin-top: 3px; }
#gr-complete .nxa-door-txt .nxa-hold { white-space: normal; }
#gr-complete .nxa .nxa-warn {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--nx-r-sm);
  background: var(--nx-warn-soft); color: var(--nx-warn); font-size: 13.5px; font-weight: 600; line-height: 1.45;
}
#gr-complete .nxa-warn > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* ---------- getting your player back ---------- */
#gr-complete .nxa-back {
  display: grid; gap: 16px; padding: 20px 22px; min-width: 0;
}
#gr-complete .nxa-back > h2 { font: 700 19px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -.02em; }
#gr-complete .nxa-qa { display: grid; gap: 16px; }
#gr-complete .nxa-q { display: flex; align-items: flex-start; gap: 12px; }
#gr-complete .nxa-q > svg { background: color-mix(in srgb, var(--gr-ink) 7%, transparent); color: var(--gr-ink); }
#gr-complete .nxa-q > div { min-width: 0; }
#gr-complete .nxa-q h3 { font: 700 15.5px/1.25 Outfit, 'DM Sans', sans-serif; letter-spacing: -.01em; }
#gr-complete .nxa-q p { margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--gr-sub); }
#gr-complete .nxa-back-foot { display: flex; flex-wrap: wrap; gap: 10px; }
#gr-complete .nxa-back-foot .gr-soft { font-size: 14px; min-height: 44px; padding-inline: 14px; }
#gr-complete .nxa-back-foot .gr-soft svg { width: 16px; height: 16px; }
#gr-complete .nxa-back.is-here {
  border-color: color-mix(in srgb, var(--gr-blue) 60%, var(--gr-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gr-blue) 16%, transparent), var(--gr-shadow);
}
#gr-complete .nxa-back.is-here:focus-visible { box-shadow: var(--gr-shadow); }

/* ---------- still checking ---------- */
#gr-complete .nxa-sk {
  display: block; border-radius: 10px;
  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;
}
#gr-complete .nxa-who.is-skel { grid-template-columns: auto minmax(0, 1fr); background: none; }
#gr-complete .nxa-sk.is-face { width: 56px; height: 56px; border-radius: 50%; }
#gr-complete .nxa-sk.is-name { width: min(160px, 60%); height: 22px; }
#gr-complete .nxa-sk.is-meta { width: min(220px, 80%); height: 14px; margin-top: 9px; }
#gr-complete .nxa-sk.is-line { width: 82%; height: 16px; }
#gr-complete .nxa-sk.is-line.is-short { width: 56%; }
#gr-complete .nxa-sk.is-btn { width: min(260px, 100%); height: 54px; border-radius: 14px; margin-top: 4px; }

/* ---------- the confirmation before a switch (the kit's dialog, moved inside the theme) ---------- */
#gr-complete .gr-modal.nxa-modal .gr-modal-card { max-width: 440px; }
#gr-complete .nxa-ask { display: grid; gap: 12px; margin-top: 10px; }
#gr-complete .nxa-ask p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--gr-ink); }
#gr-complete .nxa-ask-lost {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--nx-r-sm);
  background: var(--nx-warn-soft); border: 1px solid color-mix(in srgb, var(--nx-warn) 30%, transparent);
}
#gr-complete .nxa-ask-face { flex: none; display: inline-grid; }
#gr-complete .nxa-ask-lost > div { min-width: 0; display: grid; gap: 4px; }
#gr-complete .nxa-ask .nxa-ask-who { font-weight: 600; overflow-wrap: anywhere; }
#gr-complete .nxa-ask .nxa-ask-who b { font-weight: 800; }
#gr-complete .nxa-modal .gr-buttons { margin-top: 18px; gap: 10px; }
/* side by side when both fit on one line, otherwise one under the other — never a wrapped label */
#gr-complete .nxa-modal .gr-buttons button { flex: 1 1 186px; min-height: 48px; font-size: 15px; white-space: nowrap; }
#gr-complete .nxa-modal .gr-buttons button:disabled { opacity: .55; cursor: default; }

/* ---------- smaller shells ---------- */
/* two cards side by side need about a thousand pixels of shell; below that, one column */
@container gr-shell (max-width: 1040px) {
  #gr-complete .nxa-cols { grid-template-columns: minmax(0, 1fr); max-width: 660px; }
}
@container gr-shell (max-width: 620px) {
  /* COMPACT, so the one button is on the first screen of a small phone (360×740):
     a smaller face, the figures left to the header's own coin and Roch Points pills
     directly above, smaller reason marks. */
  #gr-complete .nxa-who { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; gap: 10px 12px; }
  #gr-complete .nxa-who .nx-face { width: 46px; height: 46px; }
  #gr-complete .nxa-name { font-size: 20px; }
  #gr-complete .nxa-meta { margin-top: 3px; }
  #gr-complete .nxa-who .nxa-holds { display: none; }
  #gr-complete .nxa-status {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    justify-items: start; text-align: start;
  }
  #gr-complete .nxa-del { padding: 14px 16px; }
  #gr-complete .nxa-del > button { width: 100%; }
  #gr-complete .nxa-body { padding: 16px; gap: 12px; }
  #gr-complete .nxa-title { font-size: 18px; }
  #gr-complete .nxa-why { gap: 8px; }
  #gr-complete .nxa-why li { font-size: 14.5px; gap: 10px; }
  #gr-complete .nxa-why svg { width: 30px; height: 30px; padding: 7px; border-radius: 9px; }
  #gr-complete .nxa-actions > button { width: 100%; }
  /* …and the button comes BEFORE the reasons (the markup, and so the reading order, is
     unchanged): on a phone the one thing to press must never be under the bottom bar. */
  #gr-complete .nxa-body.is-guest > .nxa-title { order: 1; }
  #gr-complete .nxa-body.is-guest > .nxa-out { order: 2; }
  #gr-complete .nxa-body.is-guest > .nxa-actions { order: 3; }
  #gr-complete .nxa-body.is-guest > .nxa-hint { order: 4; }
  #gr-complete .nxa-body.is-guest > .nxa-why { order: 5; }
  #gr-complete .nxa-body.is-guest > .nxa-fine { order: 6; }
  #gr-complete .nxa-choice { padding: 14px; }
  /* what switching costs is read before the buttons, not under the fold */
  #gr-complete .nxa-choice > .nxa-choice-head { order: 1; }
  #gr-complete .nxa-choice > .nxa-choice-err, #gr-complete .nxa-choice > .nxa-hint { order: 2; }
  #gr-complete .nxa-choice > .nxa-warn { order: 3; }
  #gr-complete .nxa-choice > .nxa-doors { order: 4; }
  #gr-complete .nxa-part { padding: 12px 16px; }
  #gr-complete .nxa-back { padding: 16px; }
  #gr-complete .nxa [data-nxa-focus], #gr-complete .nxa-back { scroll-margin-block: 12px 100px; }
}

/* ---------- motion off ---------- */
#gr-complete[data-motion=off] .nxa [data-fresh],
#gr-complete[data-motion=off] .nxa-spin,
#gr-complete[data-motion=off] .nxa-sk { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #gr-complete .nxa [data-fresh], #gr-complete .nxa-spin, #gr-complete .nxa-sk { animation: none; }
}