/* ═══════════════════════════════════════════════════════════════════
 *  src/start-screen-v2.css — START-SCREEN-V2-01
 *
 *  Drastic redesign of the landing screen for 2026-baseline polish:
 *  layered animated background, glassmorphism card, hero typography,
 *  microinteractions on every interactive element, focus-visible
 *  rings, prefers-reduced-motion respect, and CLS-free reveal of
 *  the "Have an account? Log in" slot (the pre-fix pop-in that
 *  triggered this redesign).
 *
 *  All v2 rules are scoped under `.start-screen-v2` to keep the
 *  classic .logo / .name-input / .btn / #login-* selectors used
 *  elsewhere (gameover screen, login sub-forms) untouched. The legacy
 *  styles.css rules remain in place as fallback; v2 wins by higher
 *  specificity wherever it overlaps.
 *
 *  Browser-first scope: layouts use clamp()/rem so they remain usable
 *  at narrow widths, but no mobile-specific touch UX is added (the
 *  game is not yet mobile-optimized).
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens (scoped) ─────────────────────────────────────── */
.start-screen-v2 {
  --ss-bg-base:        #06080d;
  --ss-bg-glow-1:      rgba(6, 182, 212, 0.18);   /* cyan */
  --ss-bg-glow-2:      rgba(168, 85, 247, 0.14);  /* violet */
  --ss-bg-glow-3:      rgba(245, 158, 11, 0.06);  /* amber */
  --ss-grid-color:     rgba(148, 163, 184, 0.045);
  --ss-glass-bg:       rgba(15, 23, 42, 0.55);
  --ss-glass-border:   rgba(148, 163, 184, 0.13);
  --ss-glass-shadow:   0 32px 80px -16px rgba(0, 0, 0, 0.55),
                       0 0 0 1px rgba(148, 163, 184, 0.06),
                       inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ss-text-primary:   #e2e8f0;
  --ss-text-secondary: #94a3b8;
  --ss-text-tertiary:  #64748b;
  --ss-accent-cyan:    #22d3ee;
  --ss-accent-violet:  #a855f7;
  --ss-accent-amber:   #f59e0b;
  --ss-focus-ring:     0 0 0 2px rgba(34, 211, 238, 0.85), 0 0 0 4px rgba(34, 211, 238, 0.2);

  /* System-font stack — replaces the Windows-only `'Segoe UI', sans-serif`
   * fallback. Renders natively on every OS, no FOUT, no extra HTTP. */
  --ss-font-system:
    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI',
    system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Override the legacy `.screen` solid background ─────────────── */
/* The classic `.screen` uses rgba(8,8,14,.96) which would sit on top
 * of our layered background. Switch to transparent so the layered
 * background is visible. */
.screen.start-screen-v2 {
  background: var(--ss-bg-base);
  font-family: var(--ss-font-system);
  /* Reset the gap so the stage controls its own spacing */
  gap: 0;
  overflow: hidden;  /* contain the background layers */
}

/* ═══════════════════════════════════════════════════════════════════
 *  BACKGROUND LAYERS
 *  Stacked, GPU-only animation. No JS, no canvas — pure CSS.
 *  Layer order (back→front):
 *    .ss-bg-mesh     animated radial-gradient cloud field
 *    .ss-bg-grid     subtle dot grid (sci-fi texture)
 *    .ss-bg-vignette darkening at edges to focus the eye
 *  All decorative, pointer-events:none so they never block clicks.
 * ═══════════════════════════════════════════════════════════════════ */

.start-screen-v2 .ss-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.start-screen-v2 .ss-bg-mesh {
  position: absolute;
  /* Oversized so the animation pan never reveals an edge */
  inset: -20%;
  background:
    radial-gradient(60% 50% at 20% 30%, var(--ss-bg-glow-1) 0%, transparent 60%),
    radial-gradient(55% 45% at 80% 70%, var(--ss-bg-glow-2) 0%, transparent 60%),
    radial-gradient(40% 40% at 50% 85%, var(--ss-bg-glow-3) 0%, transparent 70%);
  filter: blur(20px);
  animation: ss-mesh-drift 38s ease-in-out infinite alternate;
  will-change: transform;
  /* GPU-promote so the animation stays smooth */
  transform: translateZ(0);
}

@keyframes ss-mesh-drift {
  0%   { transform: translate3d(0,    0,    0) scale(1);    }
  50%  { transform: translate3d(-3%, -2%,  0) scale(1.08); }
  100% { transform: translate3d(2%,   1%,  0) scale(1.04); }
}

.start-screen-v2 .ss-bg-grid {
  position: absolute;
  inset: 0;
  /* Two-layer dot grid — primary dots + offset sub-grid for depth */
  background-image:
    radial-gradient(circle at center, var(--ss-grid-color) 1px, transparent 1.5px),
    radial-gradient(circle at center, var(--ss-grid-color) 0.5px, transparent 1px);
  background-size: 56px 56px, 14px 14px;
  background-position: 0 0, 0 0;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
  opacity: 0.55;
}

.start-screen-v2 .ss-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}

/* ═══════════════════════════════════════════════════════════════════
 *  STAGE — the content wrapper above the background layers
 * ═══════════════════════════════════════════════════════════════════ */

.start-screen-v2 .ss-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vh, 32px);
  width: 100%;
  max-width: 480px;
  padding: clamp(16px, 4vh, 40px);
  /* The classic .screen does flex centering on the container; we
   * inherit that, the stage just controls inner stacking. */
}

/* ── Brand block (logo + tagline) ───────────────────────────────── */
.start-screen-v2 .ss-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Entrance: fade up on initial paint */
  animation: ss-fade-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The legacy .logo styles apply by class — we override here with
 * tighter kerning, modern animation, and proper responsive sizing.
 * Higher specificity (`.start-screen-v2 .ss-brand .logo`) wins. */
.start-screen-v2 .ss-brand .logo {
  /* Override the classic 86px / letter-spacing:18px / brightness pulse */
  font-size: clamp(2.75rem, 7.5vw, 5rem);
  font-weight: 800;
  letter-spacing: 0.12em;     /* tasteful kerning, not wireframe-wide */
  line-height: 1;
  background: linear-gradient(
    135deg,
    var(--ss-accent-violet) 0%,
    var(--ss-accent-cyan) 50%,
    var(--ss-accent-amber) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Replace the brightness 1→1.5 flicker with a slow, subtle gradient
   * drift + breath scale. Reads as living, not blinking. */
  animation:
    ss-logo-breathe 8s ease-in-out infinite,
    ss-logo-gradient 14s ease-in-out infinite;
  will-change: transform, background-position;
  /* Subtle aura under the wordmark */
  filter: drop-shadow(0 0 24px rgba(34, 211, 238, 0.15));
}

@keyframes ss-logo-breathe {
  0%, 100% { transform: scale(1);       }
  50%      { transform: scale(1.015);   }
}

@keyframes ss-logo-gradient {
  0%, 100% { background-position: 0%   50%; }
  50%      { background-position: 100% 50%; }
}

.start-screen-v2 .ss-tagline {
  font-size: clamp(0.625rem, 1vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ss-text-secondary);
  margin: 0;
  /* Slight delay vs logo so it lands after */
  animation: ss-fade-up 600ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.start-screen-v2 .ss-tagline .ss-tagline-dot {
  color: var(--ss-accent-cyan);
  margin: 0 0.6em;
}

/* FTUE-UX-2026-03: live player count pill beneath tagline.
 * Hidden by default (hidden attr); revealed by start-screen-v2.js when
 * the /api/player-count response has count > 0. */
.start-screen-v2 .ss-player-count {
  margin: 6px 0 0;
  font-size: clamp(0.55rem, 0.85vw, 0.65rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ss-accent-cyan);
  opacity: 0.75;
  animation: ss-fade-up 500ms 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ═══════════════════════════════════════════════════════════════════
 *  CARD — glassmorphism container for the form
 * ═══════════════════════════════════════════════════════════════════ */

.start-screen-v2 .ss-card {
  width: 100%;
  max-width: 380px;
  padding: clamp(20px, 3vh, 32px) clamp(20px, 3vw, 36px);
  background: var(--ss-glass-bg);
  border: 1px solid var(--ss-glass-border);
  border-radius: 16px;
  box-shadow: var(--ss-glass-shadow);
  /* Glassmorphism — degrades to a slightly more opaque card on
   * browsers without backdrop-filter (Safari < 14 / older Firefox). */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: ss-fade-up 600ms 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .start-screen-v2 .ss-card {
    background: rgba(15, 23, 42, 0.88);  /* opaque fallback */
  }
}

/* ── Name field ─────────────────────────────────────────────────── */

.start-screen-v2 .ss-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.start-screen-v2 .ss-field-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-text-tertiary);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.start-screen-v2 .ss-field-optional {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(100, 116, 139, 0.7);
  text-transform: none;
}

/* CHAR-SLOTS-05: secondary "Sign In / Register" button — muted style
 * so "Play as Guest" (primary .btn) remains the obvious first CTA. */
.start-screen-v2 #sign-in-btn {
  width: 100%;
  padding: 11px 22px;
  font-family: var(--ss-font-system);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-text-secondary);
  background: rgba(8, 12, 20, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 100ms ease;
}

.start-screen-v2 #sign-in-btn:hover {
  background: rgba(8, 12, 20, 0.65);
  border-color: rgba(34, 211, 238, 0.4);
  color: var(--ss-accent-cyan);
}

.start-screen-v2 #sign-in-btn:active {
  transform: translateY(1px);
  transition-duration: 50ms;
}

.start-screen-v2 #sign-in-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--ss-accent-cyan),
    0 0 0 5px rgba(34, 211, 238, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════
 *  LOGIN SLOT — CLS-free reveal
 *  This is the actual reported bug: "Have an account? Log in" pops in
 *  late because save-load.js sets display:none initially and toggles
 *  to 'block' only after AlaknandaAuth.isReady(). We override that:
 *  the slot is always laid out (visibility-hidden when pending) and
 *  fades in via opacity transition when `is-auth-ready` lands on the
 *  parent. The pre-existing inline display:none from the markup is
 *  superseded by `display: block !important` on the v2 selector so
 *  the slot is reserved at first paint. The `style.display = 'none'`
 *  set by _updateStartScreenForAuth for claimed users still wins
 *  because it's an inline style with !important not applied — but
 *  guests (the common case) see the smooth fade.
 * ═══════════════════════════════════════════════════════════════════ */

.start-screen-v2 .ss-login-slot,
.start-screen-v2 #login-section.ss-login-slot {
  /* Reserve the line of text even while hidden, so revealing doesn't
   * push the button down (no CLS). */
  display: block;
  min-height: 22px;     /* ~ line height of "Have an account? Log in" */
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

/* When auth has resolved AND the legacy logic kept the section visible
 * (the inline style.display === 'block' branch), fade it in. */
.start-screen-v2.is-auth-ready .ss-login-slot,
.start-screen-v2.is-auth-ready #login-section.ss-login-slot {
  visibility: visible;
  opacity: 1;
}

/* Override the legacy #login-toggle anchor styling */
.start-screen-v2 #login-toggle {
  display: inline-block;
  padding: 4px 8px;
  color: var(--ss-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  border-radius: 6px;
  transition: color 150ms ease, background 150ms ease;
}

.start-screen-v2 #login-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-left: 6px;
  transition: width 220ms ease;
  opacity: 0.6;
}

.start-screen-v2 #login-toggle:hover {
  color: var(--ss-accent-cyan);
}

.start-screen-v2 #login-toggle:hover::after {
  width: 14px;
}

.start-screen-v2 #login-toggle:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus-ring);
}

/* Sub-forms inside the login slot — tighten/restyle without breaking
 * the existing logic that sets display:none/block on each. */
.start-screen-v2 #login-form,
.start-screen-v2 #reset-request-form,
.start-screen-v2 #reset-complete-form,
.start-screen-v2 #reset-request-done,
.start-screen-v2 #reset-complete-done {
  max-width: 100%;
  margin-top: 12px;
  text-align: left;
  display: none;  /* default; the JS toggles to display:block when active */
}

.start-screen-v2 #login-form input,
.start-screen-v2 #reset-request-form input,
.start-screen-v2 #reset-complete-form input {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  color: var(--ss-text-primary);
  font-size: 0.875rem;
  font-family: var(--ss-font-system);
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.start-screen-v2 #login-form input:focus,
.start-screen-v2 #reset-request-form input:focus,
.start-screen-v2 #reset-complete-form input:focus {
  border-color: var(--ss-accent-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}

.start-screen-v2 #login-submit,
.start-screen-v2 #reset-request-submit,
.start-screen-v2 #reset-complete-submit {
  width: 100%;
  margin-top: 12px;
  padding: 11px 18px;
  background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.start-screen-v2 #login-submit:hover,
.start-screen-v2 #reset-request-submit:hover,
.start-screen-v2 #reset-complete-submit:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 24px -8px rgba(6, 182, 212, 0.5);
}

.start-screen-v2 #login-submit:active,
.start-screen-v2 #reset-request-submit:active,
.start-screen-v2 #reset-complete-submit:active {
  transform: translateY(1px);
}

.start-screen-v2 #login-cancel,
.start-screen-v2 #login-forgot,
.start-screen-v2 #reset-request-cancel,
.start-screen-v2 #reset-request-done-back,
.start-screen-v2 #reset-complete-cancel,
.start-screen-v2 #reset-complete-done-ok {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: var(--ss-text-tertiary);
  font-size: 0.75rem;
  text-decoration: none;
  transition: color 150ms ease;
}

.start-screen-v2 #login-cancel:hover,
.start-screen-v2 #login-forgot:hover,
.start-screen-v2 #reset-request-cancel:hover,
.start-screen-v2 #reset-request-done-back:hover,
.start-screen-v2 #reset-complete-cancel:hover,
.start-screen-v2 #reset-complete-done-ok:hover {
  color: var(--ss-text-secondary);
  text-decoration: underline;
}

.start-screen-v2 #login-error,
.start-screen-v2 #reset-request-error,
.start-screen-v2 #reset-complete-error {
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  color: #fca5a5;
  font-size: 0.75rem;
  text-align: center;
}

.start-screen-v2 .reset-info-msg,
.start-screen-v2 .reset-done-msg {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  color: var(--ss-text-secondary);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
 *  PANEL VISIBILITY — START-SCREEN-IDENTITY-FLOW-V2 (single owner)
 *
 *  Exactly one panel is visible at a time. src/start-screen-v2.js's
 *  applyStartScreenView() sets `data-panel-mode` on #start-screen; these
 *  rules do the showing/hiding so no per-element style write is needed
 *  (and the old multi-owner "form open but buttons still visible" bug
 *  can't recur).
 *
 *    buttons     → primary button + sub-text + secondary links visible;
 *                  login form hidden (its own JS display:none also holds).
 *    login_form  → login form (#login-section) visible; primary button,
 *                  its sub-text, the secondary links, the legacy sign-in
 *                  button, and the footer all hidden.
 *
 *  claim_form / forgot_password are later slices; forgot_password reuses
 *  the login_form layout (the reset sub-forms live inside #login-section).
 * ═══════════════════════════════════════════════════════════════════ */

/* ── START-SCREEN-FAIL-OPEN-BOOT-GATE-01 (supersedes -01's fail-CLOSED gate) ──
 * The start screen must FAIL OPEN. A usable primary CTA — the static
 * #start-btn "PLAY AS GUEST" (its click is wired in game.js::startGame,
 * independent of the V2 render) and the #sign-in-btn "Log in" entry — stays
 * visible from first paint, even if the V2 render path is slow, errors, loads
 * stale, or loses a dependency. The V2 applier ENHANCES this baseline once it
 * stamps `data-render-ready` (relabels the primary to Continue when there is
 * progress, swaps #sign-in-btn for the richer #ss-secondary-links, adds the
 * sub-text, etc.). The previous -01 gate hid #start-btn/#sign-in-btn too,
 * which turned ANY boot-chain hiccup into a dead blank glass card — the
 * primary action must never depend on a perfect JS boot.
 *
 * STARTSCREEN-FLIP-FIX-01: #ss-primary-sub and #ss-secondary-links now carry
 * real STATIC content (the settled `guest_empty` view) in index.html, so they
 * render at first paint and the applier's first paint is a visual no-op — no
 * flip. We therefore no longer hide them pre-render. Only the claim FORM stays
 * hidden pre-render (forms open on demand; it also has its own default
 * display:none below). #start-btn stays the always-reachable fail-open CTA;
 * #sign-in-btn is hidden by its [hidden] attribute and superseded by the
 * static secondary links. (#login-section visibility is still governed by the
 * .is-auth-ready fade, not this gate.) */
.start-screen-v2:not([data-render-ready]) #ss-claim-form {
  display: none !important;
}

/* login_form (and forgot_password) own the whole card — hide the
 * buttons-mode chrome. !important so an earlier inline style write from a
 * legacy path can't leave a button showing under the form. */
.start-screen-v2[data-panel-mode="login_form"] #start-btn,
.start-screen-v2[data-panel-mode="login_form"] #sign-in-btn,
.start-screen-v2[data-panel-mode="login_form"] #ss-primary-sub,
.start-screen-v2[data-panel-mode="login_form"] #ss-secondary-links,
.start-screen-v2[data-panel-mode="login_form"] .ss-meta,
.start-screen-v2[data-panel-mode="forgot_password"] #start-btn,
.start-screen-v2[data-panel-mode="forgot_password"] #sign-in-btn,
.start-screen-v2[data-panel-mode="forgot_password"] #ss-primary-sub,
.start-screen-v2[data-panel-mode="forgot_password"] #ss-secondary-links,
.start-screen-v2[data-panel-mode="forgot_password"] .ss-meta {
  display: none !important;
}

/* claim_form owns the whole card — hide the buttons-mode chrome AND the
 * login form (so a previously-opened login form can't sit under the claim
 * form). Mirrors the login_form rule set. !important so an earlier inline
 * style write from a legacy path can't leave a button showing. */
.start-screen-v2[data-panel-mode="claim_form"] #start-btn,
.start-screen-v2[data-panel-mode="claim_form"] #sign-in-btn,
.start-screen-v2[data-panel-mode="claim_form"] #ss-primary-sub,
.start-screen-v2[data-panel-mode="claim_form"] #ss-secondary-links,
.start-screen-v2[data-panel-mode="claim_form"] .ss-meta,
.start-screen-v2[data-panel-mode="claim_form"] #login-section {
  display: none !important;
}

/* The claim form is hidden by default and shown only in claim_form mode.
 * Visibility is driven entirely by data-panel-mode (single owner) — no
 * per-element style write in JS. */
.start-screen-v2 #ss-claim-form {
  display: none;
}
.start-screen-v2[data-panel-mode="claim_form"] #ss-claim-form {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* buttons mode: the primary button is always shown (its label is owned
 * by the applier). The login form keeps its own display:none until the
 * toggle opens it, so nothing extra is needed to hide it here. */
.start-screen-v2[data-panel-mode="buttons"] #start-btn {
  display: block;
}

/* Sub-text / continue-context line under the primary button. Hidden via
 * the [hidden] attribute until the applier writes a value. */
.start-screen-v2 .ss-primary-sub {
  margin: 2px 0 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ss-text-secondary);
}
.start-screen-v2 .ss-primary-sub[hidden] {
  display: none;
}

/* Secondary account links row ("Log in", "Create account" / "Save this
 * character", "Retry"). Rendered by applyStartScreenView. */
.start-screen-v2 .ss-secondary-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.start-screen-v2 .ss-secondary-links:empty {
  display: none;
}

.start-screen-v2 .ss-secondary-link {
  padding: 4px 8px;
  color: var(--ss-text-secondary);
  font-family: var(--ss-font-system);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 6px;
  transition: color 150ms ease, background 150ms ease;
}

.start-screen-v2 .ss-secondary-link:hover {
  color: var(--ss-accent-cyan);
}

.start-screen-v2 .ss-secondary-link:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════════
 *  CLAIM FORM — on-start-screen "Create account" / "Save this character"
 *  START-SCREEN-IDENTITY-FLOW-V2 (Slice 3). Shown only when
 *  data-panel-mode="claim_form"; styled in the v2 idiom (mirrors the
 *  login form's input/submit/link styling).
 * ═══════════════════════════════════════════════════════════════════ */

.start-screen-v2 .ss-claim-header {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ss-accent-cyan);
}

.start-screen-v2 .ss-claim-sub {
  margin: 6px 0 4px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ss-text-secondary);
}

.start-screen-v2 #ss-claim-form input {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  color: var(--ss-text-primary);
  font-size: 0.875rem;
  font-family: var(--ss-font-system);
  outline: none;
  box-sizing: border-box;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.start-screen-v2 #ss-claim-form input:focus {
  border-color: var(--ss-accent-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}

/* Password row: input + show/hide toggle on the same line. */
.start-screen-v2 .ss-claim-pass-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.start-screen-v2 .ss-claim-pass-row input {
  flex: 1;
}

.start-screen-v2 .ss-claim-pass-toggle {
  margin-top: 8px;
  padding: 0 12px;
  flex-shrink: 0;
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  color: var(--ss-text-secondary);
  font-family: var(--ss-font-system);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.start-screen-v2 .ss-claim-pass-toggle:hover {
  color: var(--ss-accent-cyan);
  border-color: rgba(34, 211, 238, 0.4);
}

.start-screen-v2 .ss-claim-pass-toggle:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus-ring);
}

.start-screen-v2 #ss-claim-submit {
  width: 100%;
  margin-top: 14px;
  padding: 11px 18px;
  background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: var(--ss-font-system);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.start-screen-v2 #ss-claim-submit:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 24px -8px rgba(6, 182, 212, 0.5);
}

.start-screen-v2 #ss-claim-submit:active {
  transform: translateY(1px);
}

.start-screen-v2 #ss-claim-submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  filter: grayscale(0.25);
}

.start-screen-v2 .ss-claim-link {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: var(--ss-text-tertiary);
  font-size: 0.75rem;
  text-decoration: none;
  transition: color 150ms ease;
}

.start-screen-v2 .ss-claim-link:hover {
  color: var(--ss-text-secondary);
  text-decoration: underline;
}

.start-screen-v2 .ss-claim-link:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus-ring);
}

.start-screen-v2 #ss-claim-error {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  color: #fca5a5;
  font-size: 0.75rem;
  text-align: center;
}

.start-screen-v2 #ss-claim-error[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
 *  CTA BUTTON — primary action
 *  Overrides the legacy `.btn` for #start-btn inside the v2 screen.
 * ═══════════════════════════════════════════════════════════════════ */

.start-screen-v2 .btn,
.start-screen-v2 #start-btn {
  width: 100%;
  padding: 14px 28px;
  font-family: var(--ss-font-system);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(34, 211, 238, 0.4);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.95) 0%, rgba(6, 182, 212, 0.95) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* Soft outer glow + subtle inset highlight */
  box-shadow:
    0 16px 40px -12px rgba(168, 85, 247, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    background-position 320ms ease,
    box-shadow 220ms ease,
    transform 100ms ease,
    border-color 220ms ease;
  margin: 0;
}

.start-screen-v2 .btn:hover,
.start-screen-v2 #start-btn:hover {
  background-position: 100% 50%;
  border-color: rgba(34, 211, 238, 0.7);
  box-shadow:
    0 20px 50px -10px rgba(34, 211, 238, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.start-screen-v2 .btn:active,
.start-screen-v2 #start-btn:active {
  transform: translateY(1px);
  transition-duration: 50ms;
}

.start-screen-v2 .btn:focus-visible,
.start-screen-v2 #start-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--ss-accent-cyan),
    0 0 0 5px rgba(34, 211, 238, 0.25),
    0 20px 50px -10px rgba(34, 211, 238, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.start-screen-v2 .btn:disabled,
.start-screen-v2 #start-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  filter: grayscale(0.25);
}

/* When the button is showing LOADING SAVE… / RETRY etc — these states
 * are set by game.js startGame; they share the disabled/temp visual. */
.start-screen-v2 #start-btn[disabled]::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  animation: ss-spin 700ms linear infinite;
}

@keyframes ss-spin {
  to { transform: rotate(360deg); }
}

/* START AS NEW PLAYER button — comes from AUTH-CLIENT-NO-SILENT-IDENTITY-SWAP-01
 * (PR #3158). Restyle in v2 idiom — keep the orange/amber accent that
 * marks it as a destructive-ish action. */
.start-screen-v2 #start-fresh-btn {
  width: 100%;
  margin-top: 10px;
  padding: 11px 22px;
  font-family: var(--ss-font-system);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fed7aa;
  background: rgba(124, 45, 18, 0.55);
  border: 1px solid rgba(234, 88, 12, 0.6);
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 100ms ease;
}

.start-screen-v2 #start-fresh-btn:hover {
  background: rgba(124, 45, 18, 0.75);
  border-color: rgba(234, 88, 12, 0.85);
}

.start-screen-v2 #start-fresh-btn:active {
  transform: translateY(1px);
}

.start-screen-v2 #start-fresh-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(234, 88, 12, 0.9),
    0 0 0 4px rgba(234, 88, 12, 0.25);
}

/* NEW GAME button (added by _initStartScreen() when a save exists)
 * — same v2 idiom, neutral muted style. */
.start-screen-v2 #newgame-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px 22px;
  font-family: var(--ss-font-system);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-text-secondary);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(71, 85, 105, 0.6);
  border-radius: 10px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.start-screen-v2 #newgame-btn:hover {
  background: rgba(30, 41, 59, 0.75);
  border-color: rgba(100, 116, 139, 0.8);
  color: var(--ss-text-primary);
}

.start-screen-v2 #newgame-btn:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════════
 *  META FOOTER — fullscreen toggle + build hint
 * ═══════════════════════════════════════════════════════════════════ */

.start-screen-v2 .ss-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  animation: ss-fade-up 600ms 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Override the legacy #fullscreen-btn — same shape, refined polish */
.start-screen-v2 #fullscreen-btn {
  height: 28px;
  padding: 0 12px 0 10px;
  gap: 6px;
  border-radius: 50px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(15, 23, 42, 0.45);
  color: var(--ss-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--ss-font-system);
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 100ms ease;
}

.start-screen-v2 #fullscreen-btn .fs-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.start-screen-v2 #fullscreen-btn:hover {
  background: rgba(30, 41, 59, 0.65);
  color: var(--ss-text-secondary);
  border-color: rgba(148, 163, 184, 0.28);
}

.start-screen-v2 #fullscreen-btn:active {
  transform: scale(0.95);
}

.start-screen-v2 #fullscreen-btn:focus-visible {
  outline: none;
  box-shadow: var(--ss-focus-ring);
}

.start-screen-v2 #fullscreen-btn.is-fs {
  border-color: rgba(34, 211, 238, 0.35);
  color: var(--ss-accent-cyan);
}

.start-screen-v2 .ss-build {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(100, 116, 139, 0.55);
  margin: 0;
}

/* FTUE-UX-2026-01: hide Pre-alpha badge on non-localhost deployments */
.start-screen-v2 .ss-build.ss-build--hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
 *  ENTRANCE ANIMATIONS
 * ═══════════════════════════════════════════════════════════════════ */

@keyframes ss-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════
 *  REDUCED MOTION
 *  Users who set OS-level reduced motion don't want subtle breathing,
 *  drifting gradients, or fade-ups. Kill every animation; the static
 *  layout still looks intentional.
 * ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .start-screen-v2 .ss-bg-mesh,
  .start-screen-v2 .ss-brand .logo,
  .start-screen-v2 .ss-brand,
  .start-screen-v2 .ss-tagline,
  .start-screen-v2 .ss-card,
  .start-screen-v2 .ss-meta {
    animation: none !important;
  }
  .start-screen-v2 .ss-login-slot {
    transition: none !important;
  }
}