/* ═══════════════════════════════════════════════════════════════════════════
   ROUNDZ — Auth flow (v3, "terminal"). DESIGNER-SAFE.

   Rebuilt 2026-08-04 to match the design the rest of the app now ships (landing
   v2 "floor of the exchange", lobby v3, the in-game HUD): hairline borders,
   corner ticks, mono uppercase micro-labels, flat surfaces, one solid cyan
   primary. The v2 look this replaces — 24px radii, blurred glass panels,
   gradient buttons, Inter sentence-case labels — was the last screen still
   speaking the old language, and it showed the moment you left the landing.

   Scoped entirely under `.auth2` (#login / #codeShow / #custShow / #codeNick /
   #phantomChoice) so its generic class names (.card, .note, .field, .eyebrow,
   .rcpt-* …) never collide with the rest of style.css. Design tokens are ALSO
   scoped to .auth2, so nothing leaks app-wide. The game's screen system
   (.screen / .page / .overlay / .hidden) and every JS hook are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
.auth2 {
  /* mirror :root in style.css — one design system, two files */
  --bg: #0b1220;
  --deep: #07101d;
  --panel: rgba(17, 26, 43, .85);
  --panel-strong: rgba(17, 26, 43, .94);
  --text: #E6EEFF;
  --muted: #8B98B3;
  --muted-2: #64708c;
  --line: rgba(139, 152, 179, .18);
  --line2: rgba(139, 152, 179, .30);
  --line-strong: rgba(0, 229, 255, .34);
  --accent: #00e5ff;
  --danger: #ff5a6a;
  --warning: #ffd35d;
  --success: #4EF6C2;
  --r: 16px;
  --r-sm: 12px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --heading: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--body);
}

/* Centered content column inside each auth screen (the game's .page/.overlay
   wrappers do the outer positioning). 520px, not the old 720: since the v3
   "Two worlds" login shows exactly ONE world panel at a time, the column holds a
   switch, one card and a note — at 720 that read as a wide form with air in it. */
.auth2 .auth-col {
  width: min(100%, 520px);
  margin: 0 auto;
  display: grid;
  gap: 14px;
  align-content: start;
}

/* ── world switch (REAL | DEMO) ───────────────────────────────────────────────
   The FIRST decision on the login screen, and the only one that is a choice
   between equals — so it is a segmented control, not two buttons. Exactly one
   panel is visible at a time; see #authCol[data-world] below. client.js keeps
   aria-selected in sync and hides this whole strip when no real-money rail is
   configured (one world left → nothing to switch between). */
.auth2 .world-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(7, 16, 29, .55);
}
.auth2 .world-seg button {
  min-height: 44px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: 600 11.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth2 .world-seg button:hover { color: var(--text); }
.auth2 .world-seg button[aria-selected="true"] {
  background: rgba(0, 229, 255, .12);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.auth2 .world-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Which world's panel is on screen. `.hidden` is display:none !important, so the
   config gate in client.js (#realBlock with no real-money rail) still wins over
   both of these — the two systems never fight. */
.auth2 .auth-col[data-world="real"] #demoBlock,
.auth2 .auth-col[data-world="demo"] #realBlock { display: none; }
/* #worldsNote deliberately stays in BOTH worlds: the fact is equally true on the
   demo side, and a note that appears/vanishes on every tap would jump the column. */

.auth2 button, .auth2 input, .auth2 textarea { font: inherit; }
.auth2 button { cursor: pointer; }
.auth2 a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
.auth2 a:hover { text-decoration: underline; }
/* The topbar wordmark is an <a>, so the accent link colour above would paint the
   WHOLE "ROUNDZ" cyan — only the trailing Z (global `.logo b`) is the accent. */
.auth2 .logo { color: var(--text); }
.auth2 .logo:hover { text-decoration: none; }

/* The topbar's Back control speaks the same mono-uppercase dialect as every
   other button on the screen (it is the way OUT of the form — see .flow-close). */
.auth2 .topbar .btn.ghost {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: 600 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.auth2 .topbar .btn.ghost:hover { border-color: rgba(0, 229, 255, .55); color: var(--accent); }

/* ── micro-label: the app's .mlabel, under a name this file already used ──── */
.auth2 .eyebrow {
  margin: 0;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── surfaces ─────────────────────────────────────────────────────────────── */
.auth2 .card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
/* corner ticks — the terminal frame marks, same geometry as the landing's .ticked */
.auth2 .card.strong { border-color: var(--line2); background: var(--panel-strong); }
.auth2 .card.strong::before, .auth2 .card.strong::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(0, 229, 255, .45);
  pointer-events: none;
}
.auth2 .card.strong::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.auth2 .card.strong::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.auth2 .entry-card { padding: 26px 26px 24px; }

/* (.header-row / .icon-box are GONE with the v3 "Two worlds" login: the panels
   lost their 44px icon tile — the title carries the card, and with one world on
   screen at a time there is nothing left for an icon to disambiguate. Nothing
   else in .auth2 used them; #phantomChoice/#walletChoice use .badge.) */
.auth2 .button svg,
.auth2 .hint svg,
.auth2 .mobile-choice svg,
.auth2 .close-btn svg,
.auth2 .flow-close svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.auth2 h1, .auth2 h2, .auth2 h3, .auth2 p { margin: 0; }
.auth2 h1, .auth2 h2, .auth2 h3 {
  font-family: var(--heading);
  letter-spacing: -.03em;
  line-height: 1.1;
  font-weight: 800;
}
.auth2 h1 { font-size: clamp(26px, 3.4vw, 34px); }
.auth2 h2 { font-size: clamp(22px, 3vw, 28px); }
.auth2 h3 { font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.auth2 .lede { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-top: 7px; }
.auth2 .lede b { color: var(--text); font-weight: 600; }
.auth2 .stack { display: grid; gap: 10px; }
/* The login panels lost their .header-row (icon tile + title block, which carried
   this gap as margin-bottom) — the title now sits straight on the card. */
.auth2 .entry-card .stack { margin-top: 20px; }

/* ── buttons: mono, uppercase, one solid cyan primary ─────────────────────── */
.auth2 .button {
  min-height: 52px; width: 100%;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  /* vertical padding + a real line-height: mono uppercase labels are wide, and
     the longest one ("create account — no wallet needed") wraps on a phone. It
     has to look deliberate when it does. */
  padding: 12px 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center;
  font: 600 12.5px/1.35 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.auth2 .button:active { transform: translateY(1px); }
.auth2 .button:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.auth2 .button-primary {
  color: #041019;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 28px rgba(0, 229, 255, .3);
}
.auth2 .button-primary:hover:not(:disabled) { box-shadow: 0 0 40px rgba(0, 229, 255, .48); }
.auth2 .button-secondary { color: var(--text); border-color: var(--line); background: transparent; }
.auth2 .button-secondary:hover { border-color: rgba(0, 229, 255, .55); color: var(--accent); }
/* (.button-tertiary went with the v3 login: it existed for "Create demo account"
   as the quiet third rank under REAL's two. DEMO is its own world now, so that
   button is its panel's primary.) */
.auth2 .button:focus-visible,
.auth2 input:focus-visible,
.auth2 .close-btn:focus-visible,
.auth2 .flow-close:focus-visible,
.auth2 .rcpt-copy:focus-visible,
.auth2 .rcpt-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* (.note went with the "Demo and Real are two separate worlds" strip under the
   login panels — owner 2026-08-07: "отвлекает". It was the last user of this
   class in .auth2; the DEMO panel's lede still carries the separate-world fact
   where it belongs.)

   (.demo-card / .demo-row / .demo-copy are GONE with the v3 "Two worlds" login:
   DEMO is no longer a squat secondary card stacked under REAL — it is a full
   panel of the same shape, behind the second tab. Nothing else used them.) */

/* #codeToggle stays a BUTTON (client.js toggles #codeBlock.hidden + aria-expanded)
   — a quiet mono disclosure. #custToggle/#custBlock are its real-card twins. */
.auth2 #codeToggle,
.auth2 #custToggle {
  display: block; width: fit-content; margin: 18px auto 0;
  padding: 14px 4px 0;
  border: 0; border-top: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  font: 600 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.auth2 #codeToggle::after,
.auth2 #custToggle::after { content: " ↓"; }
.auth2 #codeToggle[aria-expanded="true"]::after,
.auth2 #custToggle[aria-expanded="true"]::after { content: " ↑"; }
/* One column at every width since the v3 login narrowed .auth-col to 520px: the
   old `1fr 200px` split left the input too short to show "enter your 12-word
   recovery phrase" and wrapped "Continue with phrase" across two lines inside
   its 200px button. Stacked, it also matches what phones always showed. */
.auth2 #codeBlock,
.auth2 #custBlock { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.auth2 #codeBlock.hidden,
.auth2 #custBlock.hidden,
.auth2 #custToggle.hidden { display: none; }

/* ── fields ───────────────────────────────────────────────────────────────── */
.auth2 .field,
.auth2 #codeInput,
.auth2 #codeNickInput {
  width: 100%; min-height: 52px; padding: 0 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line2);
  background: rgba(7, 16, 29, .8); color: var(--text);
  transition: border-color .15s ease;
}
.auth2 .field:focus,
.auth2 #codeInput:focus,
.auth2 #codeNickInput:focus { border-color: rgba(0, 229, 255, .55); outline: none; }
.auth2 #codeInput, .auth2 #codeNickInput, .auth2 #custInput { font-family: var(--mono); font-size: 14.5px; }
.auth2 .field::placeholder,
.auth2 #codeInput::placeholder,
.auth2 #codeNickInput::placeholder { color: var(--muted-2); }

/* ── 18+ row ──────────────────────────────────────────────────────────────── */
.auth2 .legal-row {
  min-height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--muted); font: 500 12px/1.5 var(--mono); text-align: center;
}
.auth2 .legal-row input,
.auth2 .checkline input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }

.auth2 #loginError,
.auth2 #codeNickError { min-height: 18px; color: var(--danger); font-size: 13px; text-align: center; }

/* ── the two-step flow cards (code / phrase / nickname) ───────────────────────
   Receipt layout since 2026-08-05 (owner-picked variant B, docs/design/mockups/
   auth-step1-variants.html): a left-aligned DOCUMENT — kicker + step counter,
   the credential as a torn-off receipt block (dashed rule under its header),
   a gold-edged ledger warning, a perforation line before the sign-off.
   The centered icon/title stack, the 2-segment progress meter, the 132px side
   copy tile and the three trust badges of the previous card are gone: they were
   the template-modal look the owner called out ("выглядит иишной"). */
.auth2 .flow-card { width: min(100%, 620px); justify-self: center; margin: 0 auto; padding: 22px 26px 24px; }

/* THE WAY OUT — top-right, 44px tap target. Unguarded since 2026-08-05: step 1
   creates nothing anymore (deferred creation), so there is nothing to strand. */
.auth2 .flow-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(7, 16, 29, .6);
  color: var(--muted);
  z-index: 2;
  transition: color .15s ease, border-color .15s ease;
}
.auth2 .flow-close:hover { color: var(--accent); border-color: rgba(0, 229, 255, .5); }

/* kicker row: document label left, step counter right; clears the ✕ */
.auth2 .rcpt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 48px; min-height: 20px; }
.auth2 .rcpt-kick, .auth2 .rcpt-step {
  font: 600 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.auth2 .rcpt-step b { color: var(--accent); font-weight: 600; }
.auth2 .rcpt-title { margin-top: 14px; font-size: clamp(21px, 2.6vw, 24px); }
.auth2 .rcpt-lede { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-top: 6px; }

/* the credential as a receipt: header strip, dashed tear rule, centered words */
.auth2 .rcpt-codewrap { margin-top: 18px; border: 1px solid var(--line2); border-radius: var(--r-sm); overflow: hidden; }
.auth2 .rcpt-codetop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-bottom: 1px dashed var(--line2); background: rgba(139, 152, 179, .05);
}
.auth2 .rcpt-copy {
  display: inline-flex; align-items: center; gap: 7px;
  margin: -4px -6px; padding: 4px 6px; /* 32px+ hit area without growing the strip */
  border: 0; background: transparent; color: var(--muted);
  font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transition: color .15s ease;
}
.auth2 .rcpt-copy:hover { color: var(--accent); }
.auth2 .rcpt-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth2 .rcpt-words {
  padding: 16px 18px; text-align: center;
  color: var(--accent); font-family: var(--mono);
  font-size: 15px; font-weight: 600; line-height: 1.8; letter-spacing: -.01em; word-break: break-word;
}

/* ledger note: gold edge, not a full gold box */
.auth2 .rcpt-warn {
  margin-top: 16px; padding: 12px 14px;
  border-left: 2px solid var(--warning); background: rgba(255, 211, 93, .06);
  color: #f0e2bb; font-size: 13.5px; line-height: 1.55;
}
.auth2 .rcpt-warn b { color: var(--warning); font-weight: 700; }

/* perforation before the sign-off (checkbox + CTA) */
.auth2 .rcpt-perf { height: 1px; margin-top: 18px; background: repeating-linear-gradient(90deg, var(--line2) 0 6px, transparent 6px 12px); }
.auth2 .checkline { margin-top: 16px; display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; cursor: pointer; }
.auth2 .rcpt-cta { margin-top: 14px; }

/* step 2's quiet skip — a text action, deliberately NOT a second pill */
.auth2 .rcpt-skip {
  display: block; margin: 12px auto 0; padding: 6px 10px;
  border: 0; background: transparent; color: var(--muted);
  font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: color .15s ease;
}
.auth2 .rcpt-skip:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.auth2 .rcpt-note { margin-top: 10px; color: var(--muted-2); font-size: 12.5px; line-height: 1.5; text-align: center; }
.auth2 .rcpt-note b { color: var(--muted); font-weight: 600; }

/* ── nickname step ────────────────────────────────────────────────────────── */
.auth2 .field-block { margin-top: 16px; display: grid; gap: 9px; text-align: left; }
.auth2 .field-label {
  color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.auth2 .hint-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; }
.auth2 .hint { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 13px; }
.auth2 .hint.good, .auth2 .nick-avail.ok { color: var(--success); }
.auth2 .nick-avail.bad { color: var(--danger); }
.auth2 .nick-avail { font: 500 12px/1 var(--mono); letter-spacing: .04em; }
.auth2 .subtle { color: var(--muted-2); font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ── Phantom mobile choice sheet ──────────────────────────────────────────── */
.auth2 .mobile-shell { width: min(100%, 430px); justify-self: center; margin: 0 auto; }
.auth2 .mobile-top { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.auth2 .close-btn {
  width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: var(--r-sm);
  border: 1px solid var(--line); color: var(--muted); background: rgba(7, 16, 29, .6);
}
.auth2 .close-btn:hover { color: var(--accent); border-color: rgba(0, 229, 255, .5); }
.auth2 .mobile-card { padding: 22px; display: grid; gap: 14px; }
.auth2 .mobile-header { display: grid; gap: 8px; text-align: left; }
.auth2 .mobile-choice {
  min-height: 64px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(7, 16, 29, .55);
  text-align: left; color: var(--text);
  transition: border-color .15s ease;
}
.auth2 .mobile-choice:hover { border-color: rgba(0, 229, 255, .5); }
.auth2 .mobile-choice strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.auth2 .mobile-choice span { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.auth2 .mobile-choice.primary { border-color: var(--line-strong); background: rgba(0, 229, 255, .04); }
.auth2 .mobile-choice .badge {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm);
  border: 1px solid rgba(0, 229, 255, .24); background: rgba(0, 229, 255, .05); color: var(--accent);
}

/* ── tablet / short desktop ───────────────────────────────────────────────── */
/* (the ≤860px rule that stacked #codeBlock/#custBlock is gone — they are single
   column at every width now, see the rule above.) */
@media (max-height: 860px) and (min-width: 861px) {
  .auth2 .entry-card { padding-top: 20px; padding-bottom: 20px; }
  .auth2 .entry-card .stack { margin-top: 16px; }
  .auth2 .flow-card { padding-top: 18px; padding-bottom: 20px; }
  .auth2 .button, .auth2 .field, .auth2 #codeInput, .auth2 #codeNickInput { min-height: 48px; }
  .auth2 .rcpt-codewrap { margin-top: 14px; }
  .auth2 .rcpt-words { padding: 13px 16px; }
  .auth2 .rcpt-warn, .auth2 .rcpt-perf { margin-top: 12px; }
  .auth2 .checkline { margin-top: 12px; }
}

/* ── Phones (≤640px) — the whole receipt (key → warning → checkbox → Continue)
   fits one ~844px viewport with room to spare now that the badges are gone. ── */
@media (max-width: 640px) {
  .auth2 .page-body.narrow { padding: 12px 12px 20px; }
  .auth2 .entry-card { padding: 18px 16px; }
  .auth2 h1 { font-size: 22px; }
  .auth2 h2 { font-size: 20px; }
  .auth2 .lede { font-size: 13px; line-height: 1.5; margin-top: 5px; }
  /* World switch: 44px tall stays a real touch target; the label loses tracking
     so "Real · USDC" / "Demo · free" never wrap inside a 390px-wide half. */
  .auth2 .world-seg button { min-height: 42px; font-size: 11px; letter-spacing: .1em; }
  .auth2 .entry-card .stack { margin-top: 16px; }
  .auth2 .button, .auth2 .field, .auth2 #codeInput, .auth2 #codeNickInput { min-height: 48px; font-size: 12px; }
  .auth2 #codeInput, .auth2 #codeNickInput { font-size: 14px; }
  .auth2 .topbar .btn.ghost { padding: 0 14px; font-size: 11px; }
  /* Step overlays (code / phrase / nickname) — receipt, compacted. */
  .auth2 .flow-card { padding: 16px 14px 16px; }
  .auth2 .flow-close { top: 10px; right: 10px; width: 38px; height: 38px; }
  .auth2 .rcpt-top { padding-right: 44px; }
  .auth2 .rcpt-title { font-size: 20px; margin-top: 12px; }
  .auth2 .rcpt-lede { font-size: 12.5px; }
  .auth2 .rcpt-codewrap { margin-top: 14px; }
  .auth2 .rcpt-words { padding: 13px 14px; font-size: 14px; line-height: 1.7; }
  .auth2 .rcpt-warn { margin-top: 12px; padding: 11px 12px; font-size: 12.5px; line-height: 1.5; }
  .auth2 .rcpt-perf { margin-top: 14px; }
  .auth2 .checkline { margin-top: 12px; font-size: 13px; }
  .auth2 .field-block { margin-top: 12px; }
  .auth2 .rcpt-note { font-size: 12px; }
  .auth2 .legal-row { font-size: 11.5px; }
}