/* Onboarding Screen */
#onboarding {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-4);
  background-color: var(--bg-primary);
  z-index: 50;
}

.onboarding-content {
  max-width: 320px;
  margin: 0 auto;
}

.onboarding-text {
  font-size: 1.125rem;
  font-weight: var(--font-light);
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

#begin-btn {
  min-width: 120px;
}

/* Identity Setup */
.onboarding-identity {
  max-width: 400px;
  width: 100%;
}

.identity-prompt {
  font-size: 1.25rem;
  font-weight: var(--font-light);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

#identity-input {
  min-height: 120px;
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: var(--space-3);
  text-align: left;
}

/* Fade animation */
.onboarding-content,
.onboarding-identity {
  animation: fadeIn var(--duration-slow) var(--ease-out);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-out {
  animation: fadeOut var(--duration-normal) var(--ease-out) forwards;
}

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

/* =============================================
   RESPONSIVE / MOBILE STYLES - ONBOARDING
   ============================================= */

/* Touch device detection */
@media (hover: none) and (pointer: coarse) {
  #begin-btn:active,
  #start-btn:active {
    transform: scale(0.96);
  }
}

/* Tablet breakpoint */
@media (max-width: 768px) {
  #onboarding {
    padding: var(--space-3);
  }

  .onboarding-content {
    max-width: 300px;
  }

  .onboarding-identity {
    max-width: 360px;
  }

  .onboarding-text {
    font-size: 1rem;
  }

  .identity-prompt {
    font-size: 1.125rem;
  }
}

/* Phone breakpoint */
@media (max-width: 480px) {
  #onboarding {
    padding: var(--space-2);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top));
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  }

  .onboarding-content {
    max-width: calc(100vw - 32px);
  }

  .onboarding-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--space-4);
  }

  #begin-btn {
    min-width: 140px;
    min-height: 48px;
    font-size: 1rem;
  }

  .onboarding-identity {
    max-width: calc(100vw - 32px);
  }

  .identity-prompt {
    font-size: 1rem;
    margin-bottom: var(--space-2);
  }

  #identity-input {
    min-height: 100px;
    font-size: 16px; /* Prevents iOS zoom */
    line-height: 1.5;
    margin-bottom: var(--space-2);
    padding: var(--space-2);
  }

  #start-btn {
    min-height: 48px;
    font-size: 1rem;
  }
}

/* Small phone breakpoint */
@media (max-width: 320px) {
  #onboarding {
    padding: var(--space-1);
    padding-top: calc(var(--space-2) + env(safe-area-inset-top));
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  }

  .onboarding-content {
    max-width: calc(100vw - 16px);
  }

  .onboarding-text {
    font-size: 0.875rem;
    margin-bottom: var(--space-3);
  }

  #begin-btn {
    min-width: 120px;
    min-height: 44px;
  }

  .onboarding-identity {
    max-width: calc(100vw - 16px);
  }

  .identity-prompt {
    font-size: 0.9375rem;
  }

  #identity-input {
    min-height: 80px;
    font-size: 16px;
  }
}