/* ═══════════════════════════════════════════════════════════
   LYDIA INTERACTIVE EXPERIENCE v3 — screens.css
   Per-screen layout, animations, transitions + mobile-first
═══════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════╗
   ║   V3 — HIDE SCORE GAUGE FROM USER                        ║
   ╚══════════════════════════════════════════════════════════╝ */
.result__gauge-wrap--hidden {
  display: none !important;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║   V3 — SCREEN 2: USER INFO (Name & Age)                  ║
   ╚══════════════════════════════════════════════════════════╝ */

.userinfo__content {
  gap: 0;
}

.userinfo__card {
  width: 100%;
  max-width: var(--card-max-w);
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
  text-align: center;
  animation: fadeInUp 600ms cubic-bezier(0.16,1,0.3,1) both;
}

.userinfo__icon {
  font-size: 3rem;
  animation: emojiPop 500ms var(--t-bounce) both;
}

.userinfo__title {
  font-size: clamp(var(--fs-xl), 5vw, var(--fs-2xl));
  font-weight: 900;
  color: var(--text-primary);
}

.userinfo__subtitle {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: -8px;
}

.userinfo__fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  text-align: right;
}

/* Field group */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.field-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
  padding-right: 4px;
}

.field-input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-arabic);
  font-size: 1rem; /* ≥16px prevents iOS zoom */
  font-weight: 600;
  direction: rtl;
  outline: none;
  transition: border-color var(--t-normal), box-shadow var(--t-normal), background var(--t-normal);
  -webkit-appearance: none;
}

.field-input:focus {
  border-color: rgba(255,45,120,0.5);
  box-shadow: 0 0 0 3px rgba(255,45,120,0.12);
  background: rgba(255,255,255,0.07);
}

.field-input::placeholder {
  color: var(--text-dim);
  font-weight: 400;
}

.field-input--number {
  text-align: center;
  letter-spacing: 0.05em;
  font-family: var(--font-accent);
}

.field-input--error {
  border-color: rgba(255,45,120,0.6) !important;
  box-shadow: 0 0 0 3px rgba(255,45,120,0.15) !important;
}

.field-error {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--pink-light);
  padding-right: 4px;
  min-height: 1em;
  display: block;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║   V3 — CUSTOM ANSWER ("حاجة تانى") AREA                  ║
   ╚══════════════════════════════════════════════════════════╝ */

.custom-answer-wrap {
  width: 100%;
  margin-top: var(--gap-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeInUp 350ms ease both;
}

.custom-answer-wrap[hidden] { display: none; }

.custom-answer-textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,45,120,0.3);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-arabic);
  font-size: 1rem;
  font-weight: 500;
  direction: rtl;
  resize: vertical;
  min-height: 90px;
  outline: none;
  transition: border-color var(--t-normal), box-shadow var(--t-normal);
  line-height: 1.6;
  -webkit-appearance: none;
}

.custom-answer-textarea:focus {
  border-color: rgba(255,45,120,0.6);
  box-shadow: 0 0 0 3px rgba(255,45,120,0.12);
  background: rgba(255,255,255,0.07);
}

.custom-answer-textarea::placeholder {
  color: var(--text-dim);
}

.custom-answer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}

.custom-word-count {
  font-family: var(--font-accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
  transition: color var(--t-normal);
}

.custom-word-count.is-valid {
  color: #10b981;
  text-shadow: 0 0 10px rgba(16,185,129,0.4);
}

/* "حاجة تانى" option styling */
.quiz__option--custom {
  border-style: dashed;
  border-color: rgba(168,85,247,0.3);
  color: var(--purple-light);
}

.quiz__option--custom .quiz__option-badge {
  background: rgba(168,85,247,0.15);
  border-color: rgba(168,85,247,0.3);
  color: var(--purple-light);
  font-size: 1rem;
}

.quiz__option--custom:hover {
  border-color: rgba(168,85,247,0.5);
  background: rgba(168,85,247,0.1);
}

.quiz__option--custom.is-selected {
  background: rgba(168,85,247,0.15);
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 0 0 2px rgba(168,85,247,0.2);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║   V3 — MOBILE FIRST (≤480px)                             ║
   ╚══════════════════════════════════════════════════════════╝ */

@media (max-width: 480px) {

  /* Let screens scroll if content overflows */
  .screen {
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px 12px;
  }

  .screen__content {
    min-height: calc(100dvh - 32px);
    justify-content: center;
  }

  /* Cards */
  .landing__card,
  .userinfo__card,
  .intro__card,
  .result__card {
    padding: 28px 18px 24px;
    border-radius: var(--radius-md);
  }

  .quiz__card {
    padding: 24px 16px 20px;
    border-radius: var(--radius-md);
    min-height: unset;
  }

  /* Typography */
  .landing__headline { font-size: 1.5rem; }
  .userinfo__title   { font-size: 1.4rem; }
  .intro__typewriter-text { font-size: 1.1rem; line-height: 1.8; }
  .quiz__question    { font-size: 1rem; }

  /* Buttons */
  .btn--large { padding: 14px 24px; font-size: 1rem; }
  .btn        { padding: 13px 22px; }

  /* Quiz options — larger touch targets */
  .quiz__option {
    padding: 15px 14px;
    font-size: 0.9rem;
    min-height: 52px;
  }

  .quiz__option-badge {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  /* Result */
  .result__title   { font-size: 1.1rem; }
  .result__body    { font-size: 0.9rem; }
  .result__constant { font-size: 0.9rem; }
  .result__actions { gap: 8px; }

  /* Analysis */
  .analysis__orb-container { width: 100px; height: 100px; }
  .analysis__core          { font-size: 2rem; }
  .analysis__message       { font-size: 1rem; max-width: 260px; }
  .analysis__progress-wrap { max-width: 260px; }

  /* User info */
  .field-input { padding: 13px 14px; }

  /* Custom textarea */
  .custom-answer-textarea { min-height: 80px; font-size: 0.95rem; }
  .custom-answer-footer   { flex-wrap: wrap; gap: 8px; }

  /* Dodge HUD — shrink on mobile */
  .dodge-hud {
    font-size: 0.75rem;
    padding: 8px 14px;
    gap: 6px;
    top: 12px;
  }

  /* Running button — keep within smaller viewport */
  .btn--runner {
    font-size: 0.85rem;
    padding: 10px 18px;
  }
}

/* Landscape mobile */
@media (max-height: 600px) and (orientation: landscape) {
  .screen {
    align-items: flex-start;
    overflow-y: auto;
    padding: 12px;
  }

  .analysis__orb-container { width: 70px; height: 70px; }
  .analysis__core          { font-size: 1.6rem; }

  .landing__card,
  .intro__card,
  .userinfo__card { padding: 20px 20px; }
}

/* Tablet (481px – 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .screen { padding: 20px 16px; }

  .landing__card,
  .userinfo__card,
  .intro__card,
  .result__card { padding: 36px 28px 32px; }

  .quiz__option { min-height: 50px; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║          SCREEN TRANSITION SYSTEM                        ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Default: screens are invisible and non-interactive */
.screen {
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.screen--active {
  opacity: 1;
  pointer-events: all;
}

/* Slide-in animations */
.screen--slide-in-right {
  animation: slideInFromRight 450ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.screen--slide-in-left {
  animation: slideInFromLeft 450ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.screen--fade-in {
  animation: fadeInUp 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

/* ╔══════════════════════════════════════════════════════════╗
   ║          SCREEN 1 — LANDING                              ║
   ╚══════════════════════════════════════════════════════════╝ */

.landing__content {
  gap: 0;
}

.landing__card {
  width: 100%;
  max-width: var(--card-max-w);
  padding: 44px 36px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
  text-align: center;
  animation: landingCardIn 800ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

@keyframes landingCardIn {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.landing__headline {
  font-size: clamp(var(--fs-xl), 5vw, var(--fs-2xl));
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.3;
  animation: fadeInUp 700ms ease 400ms both;
}

.landing__subtext {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.7;
  animation: fadeInUp 700ms ease 500ms both;
}

.landing__subtext--muted {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 400;
}

.landing__disclaimer {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-weight: 400;
  margin-top: -4px;
  animation: fadeInUp 700ms ease 800ms both;
}

/* Animate button in after card */
#btn-start {
  animation:
    landingCardIn 700ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both,
    btnPulse 2.8s ease-in-out 1400ms infinite;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║          SCREEN 2 — INTRO TYPEWRITER                     ║
   ╚══════════════════════════════════════════════════════════╝ */

.intro__content {
  align-items: center;
}

.intro__card {
  width: 100%;
  max-width: var(--card-max-w);
  padding: 48px 36px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-lg);
  text-align: center;
  min-height: 280px;
  justify-content: center;
}

.intro__typewriter-wrap {
  position: relative;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.intro__typewriter-text {
  font-size: clamp(var(--fs-lg), 4vw, var(--fs-xl));
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.9;
  white-space: pre-wrap;
  text-align: center;
  max-width: 340px;
}

/* Blinking cursor */
.intro__cursor {
  display: inline-block;
  color: var(--pink);
  font-weight: 300;
  font-size: var(--fs-xl);
  animation: cursorBlink 0.8s step-end infinite;
  margin-right: 2px;
  vertical-align: text-bottom;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Individual line reveal classes */
.intro__line {
  display: block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.intro__line--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle glow on specific words */
.intro__highlight {
  color: var(--pink-light);
  text-shadow: 0 0 12px rgba(255, 45, 120, 0.5);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║          SCREEN 3 — QUIZ / QUESTION FLOW                 ║
   ╚══════════════════════════════════════════════════════════╝ */

.quiz__content {
  gap: var(--gap-sm);
}

/* Header row */
.quiz__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeInUp 400ms ease both;
}

.quiz__counter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  direction: rtl;
}

.quiz__counter-num {
  font-family: var(--font-accent);
  font-weight: 700;
  color: var(--pink-light);
  font-size: var(--fs-md);
}

.quiz__counter-sep {
  color: var(--text-dim);
  margin: 0 2px;
}

/* Question card */
.quiz__card {
  width: 100%;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
  text-align: center;
  min-height: 360px;
  justify-content: center;
}

/* Question slide animations */
.quiz__card--slide-out {
  animation: questionSlideOut 300ms ease forwards;
}

.quiz__card--slide-in {
  animation: questionSlideIn 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes questionSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(50px); }
}

@keyframes questionSlideIn {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Question emoji */
.quiz__emoji {
  font-size: 2.8rem;
  line-height: 1;
  animation: emojiPop 400ms var(--t-bounce) both;
  filter: drop-shadow(0 0 10px rgba(255,45,120,0.3));
}

@keyframes emojiPop {
  from { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Question text */
.quiz__question {
  font-size: clamp(var(--fs-md), 3.5vw, var(--fs-xl));
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.5;
  max-width: 320px;
}

/* Options list */
.quiz__options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  direction: rtl;
}

/* Option stagger-in animation */
.quiz__option {
  animation: optionFadeIn 300ms ease both;
}

.quiz__option:nth-child(1) { animation-delay: 80ms; }
.quiz__option:nth-child(2) { animation-delay: 160ms; }
.quiz__option:nth-child(3) { animation-delay: 240ms; }

@keyframes optionFadeIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║          SCREEN 4 — ANALYSIS                             ║
   ╚══════════════════════════════════════════════════════════╝ */

.analysis__content {
  gap: var(--gap-lg);
  align-items: center;
}

/* Orb container */
.analysis__orb-container {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInUp 500ms ease both;
}

/* Spinning rings */
.analysis__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

.analysis__ring--1 {
  border-top-color: var(--pink);
  border-right-color: rgba(255,45,120,0.2);
  animation: ringRotate 1.8s linear infinite;
  box-shadow: 0 0 12px rgba(255,45,120,0.3);
}

.analysis__ring--2 {
  inset: 14px;
  border-top-color: var(--purple);
  border-left-color: rgba(168,85,247,0.2);
  animation: ringRotate 2.4s linear infinite reverse;
  box-shadow: 0 0 12px rgba(168,85,247,0.3);
}

.analysis__ring--3 {
  inset: 28px;
  border-top-color: var(--cyan);
  border-bottom-color: rgba(0,240,255,0.2);
  animation: ringRotate 3s linear infinite;
  box-shadow: 0 0 10px rgba(0,240,255,0.25);
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Core emoji */
.analysis__core {
  font-size: 2.4rem;
  position: absolute;
  animation: corePulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(168,85,247,0.5));
}

@keyframes corePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(168,85,247,0.5)); }
  50%       { transform: scale(1.1); filter: drop-shadow(0 0 18px rgba(255,45,120,0.6)); }
}

/* Message text */
.analysis__message {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  min-height: 2.5em;
  max-width: 280px;
  line-height: 1.5;
  transition: opacity 400ms ease, transform 400ms ease;
}

.analysis__message--hidden {
  opacity: 0;
  transform: translateY(-8px);
}

/* Percent label */
.analysis__percent-label {
  font-family: var(--font-accent);
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--pink-light);
  text-shadow: var(--glow-pink);
  letter-spacing: -0.02em;
  min-width: 80px;
  text-align: center;
}

.analysis__percent-num {
  display: inline-block;
  min-width: 2.5ch;
  text-align: right;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║          SCREEN 5 — RESULT                               ║
   ╚══════════════════════════════════════════════════════════╝ */

.result__content {
  gap: 0;
}

.result__card {
  width: 100%;
  max-width: var(--card-max-w);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
  text-align: center;
  animation: resultCardIn 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes resultCardIn {
  from { opacity: 0; transform: translateY(40px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Gauge wrapper */
.result__gauge-wrap {
  margin: -4px 0 -8px;
  animation: fadeInUp 600ms ease 200ms both;
}

/* Result emoji (band-specific) */
.result__emoji {
  font-size: 3rem;
  line-height: 1;
  animation: emojiDrop 600ms var(--t-bounce) 300ms both;
  filter: drop-shadow(0 0 14px rgba(255,45,120,0.4));
}

@keyframes emojiDrop {
  from { opacity: 0; transform: scale(0) rotate(20deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* Result title */
.result__title {
  font-size: clamp(var(--fs-lg), 4vw, var(--fs-xl));
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.4;
  animation: fadeInUp 500ms ease 400ms both;
}

/* Result body */
.result__body {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.8;
  animation: fadeInUp 500ms ease 500ms both;
}

/* Divider */
.result__divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  animation: fadeInUp 500ms ease 550ms both;
}

.result__divider::before,
.result__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

/* Constant message */
.result__constant {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.9;
  text-align: center;
  padding: 0 8px;
  animation: fadeInUp 500ms ease 600ms both;
}

.result__constant em {
  font-style: normal;
  color: var(--text-secondary);
}

.result__constant--highlight {
  display: block;
  color: var(--pink-light);
  text-shadow: 0 0 14px rgba(255,45,120,0.4);
  font-size: var(--fs-lg);
  margin-top: 4px;
}

/* Actions row */
.result__actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  animation: fadeInUp 500ms ease 700ms both;
}

/* Replay button */
#btn-replay {
  animation: fadeInUp 500ms ease 850ms both;
  transition: color var(--t-normal), border-color var(--t-normal), transform var(--t-bounce);
}

#btn-replay:hover {
  transform: rotate(-5deg) scale(1.05);
}

/* ══ Result band colour overrides ════════════════════════════ */

/* High (18-24) — Pink glow */
.result__card.band--high .result__title {
  color: var(--pink-light);
  text-shadow: 0 0 20px rgba(255, 45, 120, 0.4);
}

/* Medium (10-17) — Purple glow */
.result__card.band--medium .result__title {
  color: var(--purple-light);
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

/* Low (0-9) — Cyan glow */
.result__card.band--low .result__title {
  color: var(--cyan-dim);
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║          RESPONSIVE — MOBILE FIRST                       ║
   ╚══════════════════════════════════════════════════════════╝ */

@media (max-width: 420px) {

  .landing__card,
  .intro__card,
  .result__card {
    padding: 32px 20px 28px;
    border-radius: var(--radius-md);
  }

  .quiz__card {
    padding: 28px 18px 24px;
    border-radius: var(--radius-md);
    min-height: 300px;
  }

  .landing__headline {
    font-size: 1.4rem;
  }

  .intro__typewriter-text {
    font-size: var(--fs-lg);
  }

  .quiz__question {
    font-size: var(--fs-md);
  }

  .quiz__option {
    padding: 14px 16px;
    font-size: var(--fs-sm);
  }

  .btn--large {
    padding: 14px 28px;
    font-size: var(--fs-md);
  }

  .result__gauge {
    width: 120px;
    height: 120px;
  }

  .analysis__orb-container {
    width: 110px;
    height: 110px;
  }
}

@media (min-height: 700px) {
  .quiz__card {
    min-height: 400px;
  }
}

/* Very short screens (landscape mobile) */
@media (max-height: 600px) {
  .screen {
    align-items: flex-start;
    overflow-y: auto;
    padding: 16px;
  }

  .quiz__card {
    min-height: unset;
  }

  .analysis__orb-container {
    width: 80px;
    height: 80px;
  }

  .analysis__core {
    font-size: 1.8rem;
  }
}