/**
 * shared/auth.css
 * Stiler for innloggingsvinduet som shared/auth.js injiserer i document.body.
 *
 * Sider som laster shared/kippi.css trenger IKKE denne filen — kippi.css har
 * allerede stilene. Denne finnes for spillsider som har sitt eget designsystem
 * (wordle, wordle-race) og derfor ikke kan laste kippi.css uten at .card,
 * .divider, body og :root kolliderer med spillets egen CSS.
 *
 * Alt er scopet under .modal-overlay, og variablene er lokale (--a-*), slik at
 * ingenting lekker ut i spillayouten.
 */

.modal-overlay {
  /* Lokale variabler — auth.css skal ikke være avhengig av spillets :root */
  --a-surface:       #0c1525;
  --a-surface-2:     #111e30;
  --a-surface-3:     #172438;
  --a-primary:       #6c5fff;
  --a-primary-light: #9b8fff;
  --a-primary-dim:   rgba(108, 95, 255, 0.15);
  --a-primary-glow:  rgba(108, 95, 255, 0.35);
  --a-text:          #e8edf8;
  --a-text-2:        #8892aa;
  --a-text-3:        #3d4d65;
  --a-red:           #f87171;
  --a-border:        rgba(255, 255, 255, 0.07);
  --a-border-2:      rgba(255, 255, 255, 0.13);

  /* auth.js bruker inline-avstandsklosser: style="height:var(--s3)" */
  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px;

  position: fixed;
  inset: 0;
  z-index: 900;                /* over spillenes egne modaler (500–600) */
  background: rgba(4, 8, 16, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--a-text);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal-overlay .modal {
  background: var(--a-surface);
  border: 1px solid var(--a-border-2);
  border-radius: 24px;
  padding: var(--s8);
  width: 100%;
  max-width: 400px;
  transform: translateY(16px) scale(0.97);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

.modal-overlay .modal__title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: var(--s2);
}
.modal-overlay .modal__sub {
  font-size: 0.875rem;
  color: var(--a-text-2);
  margin-bottom: var(--s6);
}

/* auth.js veksler .hidden på PIN-steget */
.modal-overlay .hidden { display: none !important; }

/* ── Tekstfelt ─────────────────────────────────────────────────── */
.modal-overlay .input {
  width: 100%;
  padding: var(--s3) var(--s4);
  background: var(--a-surface-2);
  border: 1.5px solid var(--a-border);
  border-radius: 12px;
  color: var(--a-text);
  font: inherit;
  font-size: 1rem;
  transition: border-color 140ms;
}
.modal-overlay .input::placeholder { color: var(--a-text-3); }
.modal-overlay .input:focus {
  outline: none;
  border-color: var(--a-primary);
  background: var(--a-surface-3);
}

/* ── PIN ───────────────────────────────────────────────────────── */
.modal-overlay .pin-inputs {
  display: flex;
  gap: var(--s3);
  justify-content: center;
}
.modal-overlay .pin-input {
  width: 52px;
  height: 60px;
  background: var(--a-surface-2);
  border: 1.5px solid var(--a-border);
  border-radius: 12px;
  color: var(--a-text);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  transition: border-color 140ms, background 140ms;
}
.modal-overlay .pin-input:focus {
  outline: none;
  border-color: var(--a-primary);
  background: var(--a-surface-3);
}
.modal-overlay .pin-input.filled {
  border-color: var(--a-primary);
  color: var(--a-primary-light);
}

/* ── Knapper ───────────────────────────────────────────────────── */
.modal-overlay .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border: none;
  border-radius: 9999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: filter 140ms, background 140ms, border-color 140ms, transform 140ms;
}
.modal-overlay .btn:active   { transform: scale(0.97); }
.modal-overlay .btn:disabled { opacity: 0.45; pointer-events: none; }
.modal-overlay .btn--full    { width: 100%; }
.modal-overlay .btn--sm      { padding: var(--s2) var(--s4); font-size: 0.82rem; }

.modal-overlay .btn--primary {
  background: var(--a-primary);
  color: #fff;
}
.modal-overlay .btn--primary:hover {
  filter: brightness(1.14);
  box-shadow: 0 4px 20px var(--a-primary-glow);
}

.modal-overlay .btn--ghost {
  background: transparent;
  color: var(--a-text-2);
  border: 1.5px solid var(--a-border-2);
}
.modal-overlay .btn--ghost:hover {
  color: var(--a-text);
  border-color: var(--a-primary);
  background: var(--a-primary-dim);
}

/* ── Feilmelding ───────────────────────────────────────────────── */
.modal-overlay .error-msg {
  font-size: 0.82rem;
  color: var(--a-red);
  min-height: 1.2em;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-overlay .modal { transition: none; }
}