/**
 * GODS Lobby - App-specific styles
 *
 * This file contains ONLY lobby-specific styles.
 * Design tokens and components come from gods-ui.
 *
 * Build: make css-build (concatenates gods-ui + this file)
 */

/* ==========================================================================
   BASE RESET
   ========================================================================== */

body {
  margin: 0;
  font-family: var(--gods-font-sans);
  background-color: var(--gods-color-background);
}

/* ==========================================================================
   LAYOUT - Default (centered content)
   ========================================================================== */

.layout-default {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gods-space-lg) var(--gods-space-md);
}

/* ==========================================================================
   VIEW TRANSITIONS (Chrome 126+ for cross-document MPA)
   Works for: /register <-> /login navigation via links
   ========================================================================== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

/* ==========================================================================
   VERIFY CODE - 6-digit OTP input (ADR 5: Email Verification UX)

   Best practices:
   - Auto-submit when 6 digits entered
   - Paste support (Ctrl+V distributes digits)
   - Visible paste button for mobile
   - inputmode="numeric" for mobile keypad
   - autocomplete="one-time-code" for SMS autofill
   - Monospace font for digit readability

   References: https://ux-good-patterns.netlify.app/article/otp-ux-guide/
   ========================================================================== */

.verify-code-form {
  max-width: 28rem;
}

.verify-code__instruction {
  color: var(--gods-color-text-muted);
  margin-bottom: var(--gods-space-lg);
}

.verify-code__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gods-space-sm);
  margin-bottom: var(--gods-space-md);
}

.verify-code__inputs {
  display: flex;
  gap: var(--gods-space-sm);
}

.verify-code__digit {
  width: 3rem;
  height: 3.5rem;
  text-align: center;
  font-family: var(--gods-font-mono, ui-monospace, monospace);
  font-size: var(--gods-font-size-2xl);
  font-weight: var(--gods-font-weight-semibold);
  border: var(--gods-border-width) solid var(--gods-color-border);
  border-radius: var(--gods-radius-md);
  background: var(--gods-color-surface);
  color: var(--gods-color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.verify-code__digit:focus {
  outline: none;
  border-color: var(--gods-color-primary-500);
  box-shadow: 0 0 0 3px var(--gods-color-primary-100);
}

.verify-code__digit:invalid {
  border-color: var(--gods-color-error);
}

/* Paste button - icon-only, inline with inputs */
.verify-code__paste-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  background: var(--gods-color-surface);
  border: var(--gods-border-width) solid var(--gods-color-border);
  border-radius: var(--gods-radius-md);
  color: var(--gods-color-text-muted);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.verify-code__paste-btn:hover {
  background: var(--gods-color-slate-50);
  border-color: var(--gods-color-slate-300);
  color: var(--gods-color-text);
}

.verify-code__paste-btn:focus-visible {
  outline: 2px solid var(--gods-color-primary-500);
  outline-offset: 2px;
}

/* Loading indicator */
.verify-code__loading {
  text-align: center;
  padding: var(--gods-space-md);
  color: var(--gods-color-text-muted);
  font-size: var(--gods-font-size-sm);
}

.verify-code__loading::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: var(--gods-space-xs);
  border: 2px solid var(--gods-color-border);
  border-top-color: var(--gods-color-primary-500);
  border-radius: 50%;
  animation: verify-code-spin 0.6s linear infinite;
  vertical-align: middle;
}

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

/* Error state */
.verify-code__error {
  margin-top: var(--gods-space-md);
  padding: var(--gods-space-sm) var(--gods-space-md);
  background: var(--gods-color-error);
  color: var(--gods-color-text-inverse);
  border-radius: var(--gods-radius-md);
  font-size: var(--gods-font-size-sm);
  text-align: center;
}

/* Settings page link (reusable for footer links) */
.settings-link {
  color: var(--gods-color-text-muted);
  font-size: var(--gods-font-size-sm);
  margin-bottom: var(--gods-space-sm);
}

.settings-link a {
  color: var(--gods-color-primary-500);
  text-decoration: underline;
}

/* Utility */
.hidden {
  display: none !important;
}