/* Shared "Sign in to take" modal — used by /packs (take-CTA path) and
   the landing-page hero deck (onTake path).  Markup is built on first
   open by /signin-modal.js so consumers only need to include this
   stylesheet + the script. */
.signin-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-family: var(--mtt-font-sans);
  animation: signin-modal-fade 140ms ease-out;
}
.signin-modal[hidden] { display: none; }
@keyframes signin-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.signin-modal .panel {
  width: 100%;
  max-width: 380px;
  background: #0f0f10;
  border: 1px solid color-mix(in srgb, var(--mtt-overlay) 10%, transparent);
  border-radius: 16px;
  padding: 22px 22px 20px;
  color: var(--mtt-text-bright);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.signin-modal .signin-take-preview {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--mtt-radius-lg);
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.30);
}
.signin-modal .signin-take-preview[hidden] { display: none; }

/* Optional image slot — caller hands us a structured `takeImage`
   payload and we render a player headshot (circle-cropped on a white
   plate, matches the prop card), a single team logo, or a two-team
   matchup glyph with an "@" between.  Sits above the take statement. */
.signin-modal .signin-take-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.signin-modal .signin-take-image[hidden] { display: none; }
.signin-modal .signin-take-image .single {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mtt-overlay) 4%, transparent);
}
.signin-modal .signin-take-image .single.is-player {
  border-radius: 50%;
  background: #fff;
}
.signin-modal .signin-take-image .matchup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.signin-modal .signin-take-image .matchup img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.signin-modal .signin-take-image .matchup .vs {
  font-size: 0.85rem;
  font-weight: var(--mtt-fw-medium);
  color: var(--mtt-text-muted);
}

.signin-modal .signin-take-preview .statement {
  font-size: 0.92rem;
  font-weight: var(--mtt-fw-medium);
  color: var(--mtt-text-display);
  line-height: 1.35;
}
.signin-modal h2 {
  font-size: 1.15rem;
  font-weight: var(--mtt-fw-semibold);
  color: var(--mtt-text-display);
  margin: 0 0 14px;
}
.signin-modal .sub {
  font-size: 0.85rem;
  color: var(--mtt-text-muted);
  margin: 0 0 14px;
  line-height: 1.4;
}
.signin-modal label {
  display: block;
  font-size: var(--mtt-fs-xs);
  font-weight: var(--mtt-fw-semibold);
  letter-spacing: var(--mtt-tracking-wide);
  text-transform: uppercase;
  color: var(--mtt-text-secondary);
  margin: 10px 0 6px;
}
.signin-modal input[type="tel"],
.signin-modal input[type="text"] {
  width: 100%;
  padding: 11px 12px;
  background: #1a1a1c;
  border: 1px solid color-mix(in srgb, var(--mtt-overlay) 14%, transparent);
  border-radius: var(--mtt-radius-lg);
  color: var(--mtt-text-display);
  font: inherit;
  font-size: var(--mtt-fs-lg);
  font-variant-numeric: tabular-nums;
}
.signin-modal input[type="tel"]:focus,
.signin-modal input[type="text"]:focus {
  outline: 2px solid var(--mtt-brand-500);
  outline-offset: 1px;
  border-color: transparent;
}
.signin-modal .consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 0.75rem;
  color: var(--mtt-text-muted);
  line-height: 1.4;
}
.signin-modal .consent input { margin-top: 3px; }
.signin-modal .consent a { color: #93c5fd; text-decoration: underline; }
.signin-modal .consent label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.75rem;
  color: #94a3b8;
}
.signin-modal .message {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--mtt-radius-md);
  font-size: 0.8rem;
  line-height: 1.4;
}
.signin-modal .message.error { background: rgba(248, 113, 113, 0.10); color: var(--mtt-danger-text); border: 1px solid rgba(248, 113, 113, 0.35); }
.signin-modal .message.info  { background: rgba(56, 189, 248, 0.10); color: #bae6fd; border: 1px solid rgba(56, 189, 248, 0.35); }
.signin-modal .row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.signin-modal button {
  appearance: none;
  font: inherit;
  font-weight: var(--mtt-fw-semibold);
  font-size: 0.92rem;
  padding: 11px 18px;
  border-radius: var(--mtt-radius-lg);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.signin-modal button.primary {
  background: var(--mtt-brand-500);
  color: var(--mtt-surface-base);
  flex: 1;
}
.signin-modal button.primary:hover:not(:disabled) { background: var(--mtt-brand-400); }
.signin-modal button.primary:disabled { opacity: 0.55; cursor: progress; }
.signin-modal button.ghost {
  background: transparent;
  color: var(--mtt-text-muted);
  border-color: color-mix(in srgb, var(--mtt-overlay) 15%, transparent);
}
.signin-modal button.ghost:hover { color: var(--mtt-text-display); border-color: color-mix(in srgb, var(--mtt-overlay) 30%, transparent); }
.signin-modal .recaptcha { margin-top: 12px; }

/* Busy state — shown when the caller uses `keepOpenAfterSignin: true`
   and we need a real "Submitting…" indicator while post-signin work
   (e.g., POST /api/me/takes) is in flight.  Layered ABOVE the panel
   (not replacing its contents) so the underlying form listeners stay
   attached and the modal can re-open cleanly after close() tears the
   overlay down. */
.signin-modal .panel { position: relative; }
.signin-modal .signin-busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 12px;
  background: #0f0f10;
  border-radius: inherit;
  z-index: 1;
}
.signin-modal .signin-busy .spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--mtt-overlay) 14%, transparent);
  border-top-color: var(--mtt-brand-500);
  animation: signin-busy-spin 700ms linear infinite;
}
.signin-modal .signin-busy .label {
  font-size: 0.95rem;
  font-weight: var(--mtt-fw-medium);
  color: var(--mtt-text-display);
  text-align: center;
}
@keyframes signin-busy-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .signin-modal .signin-busy .spinner { animation: none; }
}