/* ========================================
   حلّها (Hallha) - Light Theme
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Droid+Arabic+Kufi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #FFF8F3;
  --bg-card: #ffffff;
  --bg-card-hover: #fff1e8;
  --bg-input: #fef5ee;
  --primary: #e8596a;
  --primary-light: #f4929c;
  --primary-dark: #d44455;
  --accent: #FFB84D;
  --accent-light: #ffd699;
  --blue: #7c6bef;
  --green: #2dd4a8;
  --red: #f43f5e;
  --orange: #FFB84D;
  --text: #2d1f3d;
  --text-muted: #7a6b8a;
  --text-light: #b5a8c4;
  --border: #f0e4d8;
  --border-hover: #d4b8a0;
  --shadow: 0 2px 8px rgba(232, 89, 106, 0.06), 0 1px 3px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 16px rgba(232, 89, 106, 0.1);
  --shadow-lg: 0 8px 30px rgba(232, 89, 106, 0.12);
  --radius: 16px;
  --radius-sm: 12px;
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* RTL Support */
[dir="rtl"] {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', 'Inter', -apple-system, sans-serif;
  text-align: right;
  line-height: 1.7;
}

/* IBM Plex Sans Arabic only ships weights 300–700. The English CSS uses
   800/900 on several headings — leaving those in RTL causes faux-bold,
   which is what made fonts look inconsistent between elements. Cap
   heading weights at 700 for Arabic so every bold renders NATIVELY. */
[dir="rtl"] .how-it-works h2,
[dir="rtl"] .step-card h3,
[dir="rtl"] .feature h3,
[dir="rtl"] .input-card-title,
[dir="rtl"] .round-title,
[dir="rtl"] .victory-title,
[dir="rtl"] .card-title,
[dir="rtl"] .boss-name,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  font-weight: 700; /* native bold in Plex, not faux-bold */
}

/* The logo + hero title are the ONLY exceptions — they use Kufi display
   font where faux-bold actually looks fine (and the weight-900 is part
   of their display character). */
[dir="rtl"] .logo-text,
[dir="rtl"] .hero-title {
  font-weight: 900;
}

/* Single source of truth for Arabic font consistency.
   Buttons/inputs don't inherit font by default — the browser falls back to
   Arial/system on buttons, which makes Arabic text look inconsistent next to
   Kufi text. This block forces Kufi everywhere the student reads/clicks. */
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] .option-btn,
[dir="rtl"] .battle-button,
[dir="rtl"] .continue-btn,
[dir="rtl"] .subject-chip,
[dir="rtl"] .lang-btn,
[dir="rtl"] .cta-button,
[dir="rtl"] .boss-name,
[dir="rtl"] .round-question,
[dir="rtl"] .blitz-statement,
[dir="rtl"] .blitz-btn,
[dir="rtl"] .blitz-result,
[dir="rtl"] .hint-box,
[dir="rtl"] .solution-text,
[dir="rtl"] .victory-title,
[dir="rtl"] .card-title,
[dir="rtl"] .stat,
[dir="rtl"] .stat-label,
[dir="rtl"] .stat-value {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', 'Inter', sans-serif;
}

[dir="rtl"] .hero {
  text-align: center;
}

[dir="rtl"] .hero-subtitle {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
}

[dir="rtl"] .hero-desc {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 16px;
  line-height: 2;
  font-weight: 400;
  color: #4B5563;
}

[dir="rtl"] .hero-badge {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 700;
}

[dir="rtl"] .how-it-works h2 {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 32px;
  font-weight: 800;
  text-align: center;
}

[dir="rtl"] .step-card {
  text-align: center;
}

[dir="rtl"] .step-card h3 {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 18px;
  font-weight: 800;
}

[dir="rtl"] .step-card p {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 400;
  color: #4B5563;
}

[dir="rtl"] .option-btn,
[dir="rtl"] .form-group {
  text-align: right;
}

[dir="rtl"] .feature {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .feature > div {
  flex: 1;
  min-width: 0;
}

[dir="rtl"] .feature h3 {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 17px;
  font-weight: 800;
}

[dir="rtl"] .feature p {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 400;
  color: #4B5563;
}

[dir="rtl"] .boss-info,
[dir="rtl"] .stat,
[dir="rtl"] .strike-input-group {
  flex-direction: row-reverse;
}

[dir="rtl"] .health-text {
  text-align: left;
}

[dir="rtl"] .top-bar {
  flex-direction: row-reverse;
}

[dir="rtl"] .stats-bar {
  flex-direction: row-reverse;
}

/* Buttons with DOM order [text, icon] need their icon to stay on the
   visually-right side in RTL too (Arabic readers expect 🚀 on the
   right, at the start of the reading direction). Default flex 'row'
   puts the icon on the left in RTL because the first DOM child goes
   to the start (right). row-reverse flips it so icon ends up on the
   right where it belongs. Applies to .battle-button (start, new
   battle) and to .cta-button's icon span when present. */
[dir="rtl"] .battle-button {
  flex-direction: row-reverse;
}

[dir="rtl"] .cta-button {
  font-size: 20px;
  font-weight: 700;
}

[dir="rtl"] .landing-footer {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: #4B5563;
  line-height: 1.9;
}

[dir="rtl"] .input-card-title {
  font-weight: 800;
}

[dir="rtl"] .input-desc {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-weight: 400;
  color: #4B5563;
  line-height: 1.9;
}

[dir="rtl"] textarea,
[dir="rtl"] input,
[dir="rtl"] select {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  text-align: right;
}

[dir="rtl"] .subject-chips {
  direction: rtl;
}

[dir="rtl"] .upload-zone {
  text-align: center;
}

[dir="rtl"] .solution-text {
  text-align: right;
  direction: rtl;
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  line-height: 2;
  color: #4B5563;
}

/* Language Toggle */
.lang-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999;
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

[dir="rtl"] .lang-toggle {
  right: auto;
  left: 16px;
}

.lang-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.lang-btn.active {
  background: var(--primary);
  color: white;
}

/* ========================================
   Landing Page
   ======================================== */

.landing-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

.hero {
  text-align: center;
  padding: 60px 0 40px;
}

.hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f97066, #e8596a, #9b5de5);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 24px;
}

.hero-title {
  font-size: clamp(48px, 10vw, 80px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 16px;
}

.glow {
  background: linear-gradient(135deg, #2d1f3d, #e8596a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glow.accent {
  background: linear-gradient(135deg, #FFB84D, #e8596a, #9b5de5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 22px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.hero-subtitle strong {
  color: var(--accent);
}

/* Main slogan — sits between app name and hero subtitle, most prominent supporting line */
.hero-tagline {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.2px;
  margin: 4px 0 18px;
  line-height: 1.4;
}

[dir="rtl"] .hero-tagline {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 28px;
  line-height: 1.8;
}

.hero-desc {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 40px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(232, 89, 106, 0.3);
}

.cta-button:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 32px rgba(232, 89, 106, 0.4);
}

.cta-icon {
  font-size: 22px;
}

/* How It Works */
.how-it-works {
  padding: 60px 0 40px;
}

.how-it-works h2 {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 32px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  position: relative;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow);
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.step-number {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary), var(--blue));
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-emoji {
  font-size: 36px;
  margin-bottom: 12px;
}

.step-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.step-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Features */
.features {
  padding: 20px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  box-shadow: var(--shadow);
}

.feature-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.feature h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.feature p {
  font-size: 13px;
  color: var(--text-muted);
}

.landing-footer {
  text-align: center;
  padding: 40px 0;
  color: var(--text-muted);
  font-size: 14px;
}

.landing-footer .copyright,
.app-footer .copyright {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-light);
  letter-spacing: 0.2px;
}

.app-footer {
  text-align: center;
  padding: 32px 20px 24px;
  color: var(--text-muted);
  font-size: 13px;
  max-width: 700px;
  margin: 40px auto 0;
  border-top: 1px solid var(--border);
}

[dir="rtl"] .app-footer,
[dir="rtl"] .landing-footer .copyright,
[dir="rtl"] .app-footer .copyright {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
}

/* Contact link + email in the footer */
.footer-contact {
  margin-top: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.contact-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease;
  display: inline-block;
}
.contact-link:hover {
  background: rgba(232, 89, 106, 0.08);
  transform: translateY(-1px);
}
.footer-sep {
  color: var(--text-muted);
  opacity: 0.5;
}
.footer-email {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.footer-email:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--primary);
}
[dir="rtl"] .contact-link,
[dir="rtl"] .footer-email {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
}

/* ========================================
   Contact modal — opens from "Contact us" footer link.
   Form pre-fills a mailto: to support@hallha.app on submit.
   ======================================== */
.contact-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(45, 31, 61, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: contactFadeIn 0.18s ease-out;
}
.contact-modal-backdrop[hidden] {
  display: none;
}
@keyframes contactFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.contact-modal {
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  padding: 28px 24px 20px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: contactSlideUp 0.22s ease-out;
}
@keyframes contactSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.contact-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}
[dir="rtl"] .contact-modal-close {
  right: auto;
  left: 14px;
}
.contact-modal-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text);
}
.contact-modal-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 18px;
  line-height: 1.55;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-field label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  resize: vertical;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(232, 89, 106, 0.12);
}
.contact-submit {
  margin-top: 4px;
  background: linear-gradient(135deg, var(--primary) 0%, #f97066 100%);
  color: white;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.contact-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 89, 106, 0.3);
}
.contact-submit:active {
  transform: translateY(0);
}

.contact-or {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.contact-direct-email {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-input);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.contact-copy {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.contact-copy:hover {
  background: white;
  border-color: var(--primary);
  color: var(--primary);
}

.contact-toast {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #16a34a;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  min-height: 18px;
}
.contact-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

[dir="rtl"] .contact-modal-title,
[dir="rtl"] .contact-modal-sub,
[dir="rtl"] .contact-field label,
[dir="rtl"] .contact-field input,
[dir="rtl"] .contact-field select,
[dir="rtl"] .contact-field textarea,
[dir="rtl"] .contact-submit,
[dir="rtl"] .contact-or,
[dir="rtl"] .contact-copy {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
}

/* ========================================
   Share section (Victory screen) — appears
   right after a win, peak emotional moment.
   ======================================== */
.share-section {
  margin: 24px auto 16px;
  padding: 18px 16px;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: 16px;
  text-align: center;
  max-width: 480px;
}

/* Title — flexbox so 🎉 emoji always sits on the START side (right in
   RTL, left in LTR) without bidi quirks.
   DOM order is [emoji-span, text-span]; default flex 'row' direction
   means emoji is the first item — it ends up on the visual right in RTL
   (the reading start) and on the visual left in LTR. nowrap so they
   never split onto separate lines. */
.share-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.share-title-emoji {
  font-size: 19px;
  line-height: 1;
  /* unicode-bidi: isolate keeps the emoji from interacting with the
     RTL bidi run of the Arabic text — guarantees clean placement. */
  unicode-bidi: isolate;
}

.share-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.share-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Chip-style buttons — smaller, lighter, easier to scan. */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: white;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.share-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.09); }
.share-btn:active { transform: translateY(0); }
.share-btn-icon { font-size: 13px; line-height: 1; }
.share-btn-label { font-size: 12px; }
.share-whatsapp:hover  { border-color: #25D366; }
.share-instagram:hover { border-color: #E1306C; }
.share-twitter:hover   { border-color: #000000; }
.share-copy:hover      { border-color: var(--primary); }

[dir="rtl"] .share-title,
[dir="rtl"] .share-subtitle,
[dir="rtl"] .share-btn {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
}

/* Toast feedback below share buttons (e.g. "✓ Link copied") */
.share-toast {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #16a34a;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  min-height: 18px;
}
.share-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   App Page - Top Bar
   ======================================== */

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Inline language toggle (inside top bar) */
.lang-toggle-inline {
  display: flex;
  background: var(--bg-input);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.lang-toggle-inline .lang-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.lang-toggle-inline .lang-btn.active {
  background: var(--primary);
  color: white;
}

.logo-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 12px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.logo-link:hover {
  background: rgba(var(--primary-rgb, 227, 90, 108), 0.08);
  transform: translateY(-1px);
}

.logo-text {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Arabic logo uses the Kufi display font for a proper brand feel.
   This and .hero-title are the ONLY places Kufi is primary — everywhere
   else uses IBM Plex Sans Arabic for consistent, properly-weighted body text.

   CRITICAL: Arabic diacritics (shadda ّ, fatha َ, etc.) sit ABOVE the letter.
   With tight line-heights (1.0–1.1) those marks get clipped by the text box
   and especially by -webkit-background-clip:text gradient masks. So we give
   the logo generous line-height + top padding to keep ّ fully visible. */
[dir="rtl"] .logo-text {
  font-family: 'Droid Arabic Kufi', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 32px;
  line-height: 1.5;        /* room for shadda above */
  padding-top: 6px;        /* extra guard for the gradient-clip mask */
  padding-bottom: 4px;     /* Kufi descender balance */
}

[dir="rtl"] .hero-title {
  font-family: 'Droid Arabic Kufi', 'IBM Plex Sans Arabic', sans-serif;
  line-height: 1.4;        /* big display heading — shadda needs headroom */
  padding-top: 12px;       /* at clamp(48px,10vw,80px) the shadda is tall */
}

.logo-text.accent {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stats-bar {
  display: flex;
  gap: 16px;
  align-items: center;
}

.stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.stat-icon {
  font-size: 16px;
}

.stat-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

/* Mode Banner */
.mode-banner {
  text-align: center;
  background: #fff1e8;
  color: #c44d5a;
  font-size: 13px;
  padding: 8px;
  border-bottom: 1px solid #f0e4d8;
}

.mode-banner a {
  color: #e8596a;
  font-weight: 600;
}

/* ========================================
   Screens
   ======================================== */

.screen {
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 20px;
}

.screen.hidden {
  display: none;
}

/* Input Screen */
/* 1. Premium Card Depth */
.input-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  padding: 44px 36px 36px;
  text-align: center;
  box-shadow:
    0 20px 60px rgba(150, 100, 200, 0.08),
    0 8px 24px rgba(150, 100, 200, 0.04),
    0 0 0 1px rgba(220, 210, 230, 0.3);
  overflow: hidden;
}

/* Decorative blobs */
.card-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.card-blob-1 {
  width: 200px;
  height: 200px;
  background: var(--primary);
  top: -60px;
  right: -40px;
  animation: float 6s ease-in-out infinite;
}

.card-blob-2 {
  width: 160px;
  height: 160px;
  background: var(--accent);
  bottom: -40px;
  left: -30px;
  animation: float 8s ease-in-out infinite reverse;
}

.card-header-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.card-title {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--text), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.input-desc {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.input-sections {
  position: relative;
  z-index: 1;
}

/* Subject Chips */
.subject-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subject-chip {
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subject-chip:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: rgba(232, 89, 106, 0.04);
  transform: translateY(-1px);
}

.subject-chip.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(232, 89, 106, 0.25);
}

.form-group {
  text-align: left;
  margin-bottom: 20px;
}

/* 4. Typography - Labels */
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #3d2b5a;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Arabic labels — English uses uppercase + wide letter-spacing to look
   prominent at 11px. Neither applies to Arabic (no uppercase in the script,
   and letter-spacing breaks Arabic letter-joining). So Arabic at 11px with
   those treatments stripped looks TINY. Bump the size + clean the spacing
   so Arabic labels read at the same visual weight as English. */
[dir="rtl"] .form-group label {
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 12px;
}

/* Unified Input Zone */
.unified-input {
  border: 2px solid #e8e2ee;
  border-radius: 16px;
  background: #ffffff;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.unified-input:focus-within {
  border-color: #9b5de5;
  box-shadow: 0 0 0 4px rgba(155, 93, 229, 0.08), 0 4px 20px rgba(155, 93, 229, 0.06);
}

.unified-input textarea {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 16px 18px 8px;
  resize: none;
  min-height: 80px;
}

.unified-input textarea:focus {
  box-shadow: none !important;
}

.unified-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}

.unified-divider-line {
  flex: 1;
  height: 1px;
  background: #e8e2ee;
}

.unified-divider-text {
  font-size: 12px;
  font-weight: 600;
  color: #b5a8c4;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.unified-upload-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 14px;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 0 0 14px 14px;
}

.unified-upload-area:hover {
  background: rgba(155, 93, 229, 0.04);
}

.unified-upload-icon {
  font-size: 20px;
}

.unified-upload-text {
  font-size: 13px;
  color: var(--text-muted);
}

.unified-upload-text strong {
  color: #9b5de5;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.unified-input.dragover {
  border-color: #9b5de5;
  background: rgba(155, 93, 229, 0.03);
}

.unified-input .upload-file-list {
  padding: 0 18px 12px;
}

/* Custom Select Dropdown */
.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s, box-shadow 0.2s;
  user-select: none;
}

.custom-select-trigger:hover {
  border-color: var(--border-hover);
}

.custom-select-trigger.open {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(232, 89, 106, 0.1);
}

.custom-select-arrow {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.custom-select-trigger.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}

.custom-select-options.open {
  display: block;
}

.custom-select-option {
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-select-option:hover {
  background: var(--bg-input);
}

.custom-select-option.selected {
  color: var(--primary);
  font-weight: 600;
  background: rgba(232, 89, 106, 0.06);
}

.custom-select-option.selected::after {
  content: '✓';
  color: var(--primary);
  font-weight: 700;
}

/* Hidden native select for form value */
.native-select {
  display: none;
}

/* 2. Modern Input Fields */
.form-group textarea {
  width: 100%;
  background: #ffffff;
  color: var(--text);
  border: 1px solid #e8e2ee;
  border-radius: 14px;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
  transition: border-color 0.3s, box-shadow 0.3s;
  min-height: 110px;
}

/* 4. Placeholder text - lighter for contrast */
.form-group textarea::placeholder {
  color: #c4b8d4;
}

.form-group textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

/* 3. Drag & Drop Zone - Soft purple, not red */
.upload-zone {
  border: 1.5px dashed #c4b8d4;
  border-radius: 14px;
  padding: 16px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(155, 93, 229, 0.02);
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: #9b5de5;
  border-style: solid;
  background: rgba(155, 93, 229, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(155, 93, 229, 0.1);
}

.upload-zone-icon {
  font-size: 22px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #9b5de5, var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.upload-zone-text {
  font-size: 13px;
  color: var(--text-muted);
  text-align: left;
}

.upload-zone-text strong {
  color: #9b5de5;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.upload-zone-hint {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
  text-align: left;
}

.upload-file-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.upload-file-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232, 89, 106, 0.08);
  border: 1px solid rgba(232, 89, 106, 0.2);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--primary-dark);
}

.upload-file-remove {
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1;
}

.upload-file-remove:hover {
  color: var(--red);
}

.battle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--primary), #c44477, var(--accent));
  background-size: 200% 100%;
  color: white;
  font-size: 17px;
  font-weight: 700;
  padding: 16px 40px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background-position 0.4s;
  box-shadow: 0 4px 20px rgba(232, 89, 106, 0.25);
  margin-top: 12px;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
}

.battle-button:hover {
  background-position: 100% 0;
}

.battle-button-icon {
  font-size: 20px;
  transition: transform 0.2s;
}

.battle-button:hover .battle-button-icon {
  transform: translateX(4px);
}

.battle-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(232, 89, 106, 0.35);
}

.battle-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Loading Screen */
.loading-card {
  text-align: center;
  padding: 60px 20px;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: spin 0.8s linear infinite;
}

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

.loading-card h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

.loading-card p {
  color: var(--text-muted);
}

/* ========================================
   Boss Battle Screen
   ======================================== */

.boss-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.boss-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.boss-emoji {
  font-size: 36px;
}

.boss-name {
  font-size: 22px;
  font-weight: 800;
}

/* A/B test provider badge — small chip next to topic name showing which
   AI produced the current battle (only shown during Gemini test). */
.provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-inline-start: auto;
  white-space: nowrap;
}
.provider-badge.provider-claude  { background: rgba(212, 131, 69, 0.15); color: #B86A28; }
.provider-badge.provider-gemini  { background: rgba(66, 133, 244, 0.15); color: #1A73E8; }
[dir="rtl"] .provider-badge {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
}

.health-bar-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.health-bar {
  flex: 1;
  height: 20px;
  background: var(--bg-input);
  border-radius: 10px;
  overflow: hidden;
}

.health-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #fbbf24, var(--orange));
  border-radius: 10px;
  transition: width 0.6s ease, background 0.6s;
}

.health-fill.medium {
  background: linear-gradient(90deg, var(--orange), #22c55e);
}

.health-fill.high {
  background: linear-gradient(90deg, #22c55e, #10b981);
}

.health-text {
  font-size: 14px;
  font-weight: 700;
  min-width: 40px;
  text-align: right;
}

/* Round Indicator */
.round-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
}

.round-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.3s;
}

.round-dot.active {
  background: linear-gradient(135deg, var(--primary), var(--blue));
  border-color: transparent;
  color: white;
  box-shadow: 0 0 16px rgba(232, 89, 106, 0.3);
}

.round-dot.completed {
  background: var(--green);
  border-color: transparent;
  color: white;
}

.round-connector {
  width: 40px;
  height: 2px;
  background: var(--border);
}

/* Round Content */
.round-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  min-height: 200px;
  box-shadow: var(--shadow);
}

/* Round header tag — single pill at the top-start corner of the card.
   Combines "Round N" + round title into one compact label. The character's
   role name ("The Curious One", "الفضولي", etc.) is no longer shown here —
   the visual identity comes from Hal's form itself. */

.round-header-tag {
  position: absolute;
  top: 14px;
  inset-inline-start: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  z-index: 2;
}

.round-header-tag .rht-num {
  opacity: 0.7;
  font-weight: 700;
}

.round-header-tag .rht-sep {
  opacity: 0.35;
  font-weight: 400;
}

.round-header-tag .rht-title {
  font-weight: 800;
}

/* Per-round accent tints so the pill inherits the round's color identity */
.round-content.round-1 .round-header-tag { background: rgba(201, 99, 28, 0.12);  color: #B15012; }
.round-content.round-2 .round-header-tag { background: rgba(94, 78, 143, 0.12);  color: #5E4E8F; }
.round-content.round-3 .round-header-tag { background: rgba(184, 134, 11, 0.15); color: #8B6100; }

/* Consistent Arabic font across every label/tag on the platform */
[dir="rtl"] .round-header-tag {
  font-family: 'IBM Plex Sans Arabic', 'Droid Arabic Kufi', sans-serif;
  font-size: 15px;
  padding: 10px 18px;
  line-height: 1.3;
}

/* Mobile — tighten the pill so it doesn't crowd the character */
@media (max-width: 640px) {
  .round-header-tag {
    top: 10px;
    inset-inline-start: 12px;
    font-size: 12px;
    padding: 6px 12px;
  }
  [dir="rtl"] .round-header-tag {
    font-size: 13px;
    padding: 8px 14px;
  }
}

.round-question {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--text);
}

/* Round 1 "حلّها" (Solve It) - Multiple Choice */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.option-btn {
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.option-btn:hover {
  border-color: var(--primary);
  background: rgba(232, 89, 106, 0.04);
  transform: scale(1.02);
}

.option-btn.correct {
  border-color: var(--green);
  background: rgba(16, 185, 129, 0.1);
  animation: correctPulse 0.4s ease;
}

.option-btn.wrong {
  border-color: var(--red);
  background: rgba(239, 68, 68, 0.08);
  animation: shake 0.4s ease;
}

.option-btn.disabled {
  pointer-events: none;
  opacity: 0.5;
}

@keyframes correctPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Round 2 "افهمها" (Understand It) - True/False */
.blitz-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blitz-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}

.blitz-pip {
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  transition: background 0.3s;
}

.blitz-pip.active {
  background: var(--primary);
}

.blitz-pip.done-correct {
  background: var(--green);
}

.blitz-pip.done-wrong {
  background: var(--red);
}

.blitz-statement {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  line-height: 1.5;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blitz-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.blitz-btn {
  padding: 18px;
  font-size: 17px;
  font-weight: 700;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-card);
  color: var(--text);
}

.blitz-btn:hover {
  transform: scale(1.03);
}

.blitz-btn.true-btn:hover {
  border-color: #06D6A0;
  background: rgba(6, 214, 160, 0.06);
}

.blitz-btn.false-btn:hover {
  border-color: #f43f5e;
  background: rgba(244, 63, 94, 0.06);
}

.blitz-btn.correct {
  border-color: #06D6A0;
  background: rgba(6, 214, 160, 0.12);
  color: #059669;
  animation: correctPulse 0.4s ease;
}

.blitz-btn.wrong {
  border-color: #f43f5e;
  background: rgba(244, 63, 94, 0.12);
  color: #e11d48;
  animation: shake 0.4s ease;
}

.blitz-btn.disabled {
  pointer-events: none;
  opacity: 0.4;
}

.blitz-result {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 8px;
  border-radius: 8px;
  margin-top: 4px;
}

.blitz-result.correct {
  color: #047857;
  background: rgba(0, 196, 140, 0.1);
}

.blitz-result.wrong {
  color: #b91c1c;
  background: rgba(255, 107, 107, 0.1);
}

/* Round 3 "اتقنها" (Master It) */
.strike-input-group {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.strike-input {
  flex: 1;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s;
}

.strike-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(232, 89, 106, 0.1);
}

.strike-btn {
  background: linear-gradient(135deg, var(--accent), var(--red));
  color: white;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s;
  white-space: nowrap;
}

.strike-btn:hover {
  transform: scale(1.05);
}

/* Hint box */
.hint-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 14px;
  font-size: 14px;
  color: #92400e;
}

/* Insight box */
.insight-box {
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 14px;
  font-size: 14px;
  color: #155e75;
}

/* Continue button after each round */
.continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green);
  color: white;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 16px;
  transition: transform 0.2s;
}

.continue-btn:hover {
  transform: scale(1.05);
}

/* Points Popup */
.points-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
  pointer-events: none;
  z-index: 200;
  animation: pointsFloat 1s ease forwards;
}

.points-popup.hidden {
  display: none;
}

@keyframes pointsFloat {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  50% { opacity: 1; transform: translate(-50%, -70%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -100%) scale(1); }
}

/* Screen shake */
@keyframes screenShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  50% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
  90% { transform: translateX(-1px); }
}

.shake {
  animation: screenShake 0.4s ease;
}

/* ========================================
   Victory Screen
   ======================================== */

.victory-card {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  box-shadow: var(--shadow-md);
}

.victory-emoji {
  font-size: 64px;
  margin-bottom: 12px;
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}

.victory-title {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}

.victory-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.b-stat {
  text-align: center;
}

.v-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
}

.v-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.solution-box {
  text-align: left;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 24px;
}

[dir="rtl"] .solution-box {
  text-align: right;
}

.solution-box h3 {
  font-size: 16px;
  margin-bottom: 12px;
}

.solution-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* ========================================
   Animations & Transitions
   ======================================== */

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

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

@keyframes fadeScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gentlePulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(232, 89, 106, 0.25); }
  50% { box-shadow: 0 4px 32px rgba(232, 89, 106, 0.45); }
}

@keyframes borderPulse {
  0%, 100% { border-color: #c4b8d4; }
  50% { border-color: #9b5de5; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.8); }
  50% { transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes healthGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

@keyframes confettiBurst {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-200px) rotate(720deg); opacity: 0; }
}

@keyframes trophySpin {
  0% { transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.2) rotate(10deg); }
  80% { transform: scale(0.95) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* --- Landing page entrance animations --- */
.hero-badge {
  animation: fadeSlideUp 0.6s ease both;
  animation-delay: 0.1s;
}

.hero-title {
  animation: fadeSlideUp 0.6s ease both;
  animation-delay: 0.2s;
}

.hero-subtitle {
  animation: fadeSlideUp 0.6s ease both;
  animation-delay: 0.35s;
}

.hero-desc {
  animation: fadeSlideUp 0.6s ease both;
  animation-delay: 0.45s;
}

.cta-button {
  animation: fadeSlideUp 0.6s ease both, gentlePulse 3s ease-in-out 1.2s infinite;
}

.how-it-works h2 {
  animation: fadeSlideUp 0.5s ease both;
  animation-delay: 0.6s;
}

.step-card:nth-child(1) { animation: fadeSlideUp 0.5s ease both; animation-delay: 0.7s; }
.step-card:nth-child(2) { animation: fadeSlideUp 0.5s ease both; animation-delay: 0.85s; }
.step-card:nth-child(3) { animation: fadeSlideUp 0.5s ease both; animation-delay: 1.0s; }

.feature:nth-child(1) { animation: fadeSlideUp 0.4s ease both; animation-delay: 1.1s; }
.feature:nth-child(2) { animation: fadeSlideUp 0.4s ease both; animation-delay: 1.2s; }
.feature:nth-child(3) { animation: fadeSlideUp 0.4s ease both; animation-delay: 1.3s; }
.feature:nth-child(4) { animation: fadeSlideUp 0.4s ease both; animation-delay: 1.4s; }
.feature:nth-child(5) { animation: fadeSlideUp 0.4s ease both; animation-delay: 1.5s; }

/* --- App page animations --- */
.input-card {
  animation: fadeScaleIn 0.5s ease both;
}

.upload-zone {
  animation: borderPulse 3s ease-in-out infinite;
}

.battle-button {
  animation: gentlePulse 3s ease-in-out infinite;
}

/* --- Screen transitions --- */
.screen {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.screen.animate-in {
  animation: fadeSlideUp 0.45s ease both;
}

.screen.animate-out {
  animation: fadeIn 0.3s ease reverse both;
  pointer-events: none;
}

/* --- Battle animations --- */
.boss-header {
  animation: slideInFromTop 0.5s ease both;
}

.round-indicator {
  animation: fadeSlideUp 0.4s ease both;
  animation-delay: 0.2s;
}

.round-content {
  animation: fadeScaleIn 0.4s ease both;
}

.round-content .option-btn:nth-child(1) { animation: fadeSlideUp 0.3s ease both; animation-delay: 0.1s; }
.round-content .option-btn:nth-child(2) { animation: fadeSlideUp 0.3s ease both; animation-delay: 0.18s; }
.round-content .option-btn:nth-child(3) { animation: fadeSlideUp 0.3s ease both; animation-delay: 0.26s; }
.round-content .option-btn:nth-child(4) { animation: fadeSlideUp 0.3s ease both; animation-delay: 0.34s; }

.round-content .blitz-btn { animation: fadeSlideUp 0.3s ease both; animation-delay: 0.15s; }

.health-fill.damage {
  animation: healthGlow 0.5s ease;
}

/* --- Victory celebration --- */
.victory-card {
  animation: fadeScaleIn 0.6s ease both;
  position: relative;
  overflow: hidden;
}

.victory-card::before,
.victory-card::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.victory-card::before {
  background: var(--accent);
  animation: confettiBurst 1.2s ease-out 0.3s both;
  box-shadow:
    -40px 0 0 var(--primary),
    40px -20px 0 var(--accent),
    -60px -40px 0 var(--blue),
    20px -60px 0 var(--green),
    60px -10px 0 var(--primary-light),
    -20px -80px 0 var(--accent-light);
}

.victory-card::after {
  background: var(--blue);
  animation: confettiBurst 1.4s ease-out 0.5s both;
  box-shadow:
    30px -30px 0 var(--green),
    -50px -10px 0 var(--accent),
    50px -50px 0 var(--primary),
    -30px -70px 0 var(--blue),
    70px -30px 0 var(--accent-light),
    -10px -50px 0 var(--primary-light);
}

.victory-emoji {
  animation: trophySpin 0.8s ease both 0.2s;
}

.victory-title {
  animation: fadeSlideUp 0.5s ease both;
  animation-delay: 0.4s;
}

.b-stat:nth-child(1) { animation: fadeSlideUp 0.4s ease both; animation-delay: 0.5s; }
.v-stat:nth-child(2) { animation: fadeSlideUp 0.4s ease both; animation-delay: 0.6s; }
.v-stat:nth-child(3) { animation: fadeSlideUp 0.4s ease both; animation-delay: 0.7s; }

.solution-box {
  animation: fadeSlideUp 0.4s ease both;
  animation-delay: 0.8s;
}

/* --- Micro-interactions --- */
.option-btn:hover,
.blitz-btn:hover {
  box-shadow: 0 4px 16px rgba(232, 89, 106, 0.15);
}

.step-card:hover {
  box-shadow: var(--shadow-lg);
}

textarea:focus,
input:focus,
.custom-select-trigger:focus {
  box-shadow: 0 0 0 3px rgba(232, 89, 106, 0.12), 0 0 20px rgba(232, 89, 106, 0.06);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.continue-btn {
  animation: fadeSlideUp 0.4s ease both;
}

/* Loading shimmer effect */
.loading-card h2 {
  background: linear-gradient(90deg, var(--text) 30%, var(--primary-light) 50%, var(--text) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2s ease-in-out infinite;
}

/* ========================================
   Responsive - Tablet
   ======================================== */

@media (max-width: 900px) {
  .screen {
    max-width: 100%;
    padding: 24px 16px;
  }

  .input-card {
    padding: 28px 24px;
  }
}

/* ========================================
   Responsive - Mobile
   ======================================== */

@media (max-width: 600px) {
  .hero {
    padding: 40px 0 30px;
  }

  .hero-title {
    font-size: 42px;
  }

  .hero-subtitle {
    font-size: 18px;
  }

  .hero-desc {
    font-size: 14px;
  }

  .cta-button {
    font-size: 16px;
    padding: 14px 32px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .step-card {
    padding: 24px 20px;
  }

  .options-grid {
    grid-template-columns: 1fr;
  }

  .stats-bar {
    gap: 10px;
  }

  .stat-label {
    display: none;
  }

  .stat-value {
    font-size: 13px;
  }

  .top-bar {
    padding: 10px 14px;
  }

  .logo-text {
    font-size: 24px;
  }

  .strike-input-group {
    flex-direction: column;
  }

  .input-card {
    padding: 24px 16px;
    border-radius: 12px;
  }

  .input-card h1 {
    font-size: 22px;
  }

  .victory-stats {
    gap: 16px;
  }

  .victory-card {
    padding: 28px 20px;
  }

  .victory-title {
    font-size: 26px;
  }

  .boss-header {
    padding: 16px;
  }

  .boss-name {
    font-size: 18px;
  }

  .round-content {
    padding: 20px 16px;
  }

  .round-title {
    font-size: 18px;
  }

  .battle-button {
    font-size: 15px;
    padding: 12px 28px;
    width: 100%;
    justify-content: center;
  }

  .upload-zone {
    padding: 20px 16px;
  }

  .lang-toggle {
    top: auto;
    bottom: 16px;
    right: 50%;
    transform: translateX(50%);
  }

  [dir="rtl"] .lang-toggle {
    left: auto;
    right: 50%;
    transform: translateX(50%);
  }
}

/* ========================================
   Responsive - Large Desktop
   ======================================== */

@media (min-width: 1200px) {
  .landing-container {
    max-width: 900px;
  }

  .screen {
    max-width: 750px;
  }
}

/* Cloudflare Turnstile widget container */
.turnstile-container {
  display: flex;
  justify-content: center;
  margin: 0 0 16px 0;
  min-height: 0;
}
.turnstile-container:empty {
  display: none;
}

/* ========================================
   Hal Character (mascot)
   Three evolving forms:
   - hal-curious  → الفضولي  → Round 1 "حلّها"
   - hal-thinker  → المفكِّر → Round 2 "افهمها"
   - hal-champion → البطل   → Round 3 "اتقنها"
   ======================================== */

.hal {
  width: 140px;
  height: 160px;
  display: block;
  will-change: transform;
  animation: hal-idle 3.4s ease-in-out infinite;
}

@keyframes hal-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Subtle lightbulb pulse on the Thinker form */
.hal-thinker .hal-lightbulb {
  transform-origin: 70px 22px;
  animation: hal-bulb-flicker 2.2s ease-in-out infinite;
}
.hal-thinker .hal-bulb-glow {
  animation: hal-bulb-glow 2.2s ease-in-out infinite;
  transform-origin: 70px 22px;
}

@keyframes hal-bulb-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; transform: scale(1.04); }
}
@keyframes hal-bulb-glow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* Champion aura pulse + crown shine */
.hal-champion .hal-aura {
  transform-origin: 70px 92px;
  animation: hal-aura 2.6s ease-in-out infinite;
}
.hal-champion .hal-crown {
  transform-origin: 70px 30px;
  animation: hal-crown-wobble 4s ease-in-out infinite;
}

@keyframes hal-aura {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes hal-crown-wobble {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-1.5deg); }
  75%      { transform: rotate(1.5deg); }
}

/* Landing hero mascot */
.hero-mascot {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.hero-mascot .hal {
  width: 120px;
  height: 140px;
}

/* In-round character header */
.round-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.round-hero .hal {
  width: 100px;
  height: 115px;
}

/* Victory champion — larger, celebratory */
.victory-mascot {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.victory-mascot .hal {
  width: 160px;
  height: 185px;
}

/* ========================================
   Per-round background identity
   Applied to .round-content which wraps each round's UI.
   ======================================== */

.round-content {
  position: relative;
  border-radius: 20px;
  padding: 18px 20px 22px;
  transition: background 0.5s ease;
  overflow: hidden;
}

.round-content.round-1 {
  background: linear-gradient(180deg, #FFF7ED 0%, #FFE4CC 100%);
}
.round-content.round-2 {
  background: linear-gradient(180deg, #F5F3FF 0%, #E0DAFF 100%);
}
.round-content.round-3 {
  background: linear-gradient(180deg, #FFFBEB 0%, #FFE4A8 100%);
}

/* Round-specific title accent */
.round-content.round-1 .round-title { color: #C9631C; }
.round-content.round-2 .round-title { color: #5E4E8F; }
.round-content.round-3 .round-title { color: #B8860B; }

/* Softer corners for mobile */
@media (max-width: 640px) {
  .round-content {
    padding: 16px 14px 20px;
    border-radius: 16px;
  }
  .hero-mascot .hal { width: 96px; height: 112px; }
  .round-hero .hal  { width: 80px;  height: 92px;  }
  .victory-mascot .hal { width: 130px; height: 150px; }
}

/* ========================================
   Hal — entrance + reaction animations
   ======================================== */

/* Landing hero mascot entrance */
.hero-mascot {
  animation: halHeroEntrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.05s;
}
@keyframes halHeroEntrance {
  0%   { opacity: 0; transform: translateY(-26px) scale(0.7) rotate(-6deg); }
  60%  { opacity: 1; transform: translateY(4px)   scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0)     scale(1)    rotate(0); }
}

/* In-round Hal entrance */
.round-hero {
  animation: halRoundEntrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes halRoundEntrance {
  0%   { opacity: 0; transform: translateY(18px) scale(0.8); }
  65%  { opacity: 1; transform: translateY(-4px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Celebrate — bounce + playful rotate (overrides idle via .hal.hal-* specificity) */
.hal.hal-celebrate {
  animation: halCelebrate 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes halCelebrate {
  0%   { transform: translateY(0) rotate(0); }
  22%  { transform: translateY(-22px) rotate(-10deg) scale(1.08); }
  44%  { transform: translateY(0)    rotate(8deg)   scale(1); }
  66%  { transform: translateY(-10px) rotate(-4deg) scale(1.03); }
  88%  { transform: translateY(0)    rotate(2deg); }
  100% { transform: translateY(0)    rotate(0); }
}

/* Confused — subtle wobble + head tilt */
.hal.hal-confused {
  animation: halConfused 0.8s ease-in-out 1;
}
@keyframes halConfused {
  0%, 100% { transform: rotate(0) translateX(0); }
  20%      { transform: rotate(-6deg) translateX(-3px); }
  40%      { transform: rotate(5deg)  translateX(3px); }
  60%      { transform: rotate(-3deg) translateX(-2px); }
  80%      { transform: rotate(2deg)  translateX(1px); }
}

/* Morph — used when round changes (dissolve + scale) */
.hal.hal-morph-out {
  animation: halMorphOut 0.4s ease-in forwards;
}
.hal.hal-morph-in {
  animation: halMorphIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes halMorphOut {
  0%   { opacity: 1; transform: scale(1)    rotate(0); filter: brightness(1); }
  50%  { opacity: 1; transform: scale(1.18) rotate(8deg); filter: brightness(1.5) blur(1px); }
  100% { opacity: 0; transform: scale(0.4)  rotate(-12deg); filter: brightness(2) blur(4px); }
}
@keyframes halMorphIn {
  0%   { opacity: 0; transform: scale(0.4)  rotate(12deg);  filter: brightness(2)   blur(4px); }
  40%  { opacity: 1; transform: scale(1.18) rotate(-6deg);  filter: brightness(1.4) blur(1px); }
  100% { opacity: 1; transform: scale(1)    rotate(0);      filter: brightness(1)   blur(0); }
}

/* Victory — full triumphant entrance for the Champion on the victory screen */
.hal.hal-victory {
  animation: halVictoryEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes halVictoryEntrance {
  0%   { opacity: 0; transform: translateY(50px) scale(0.5) rotate(-18deg); }
  55%  { opacity: 1; transform: translateY(-12px) scale(1.12) rotate(6deg); }
  80%  { transform: translateY(3px) scale(0.97) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

/* Sparkle burst for celebrate moments — pure CSS pseudo-elements */
.round-hero.hal-celebrating::before,
.round-hero.hal-celebrating::after {
  content: '✨';
  position: absolute;
  font-size: 20px;
  opacity: 0;
  pointer-events: none;
  animation: halSparkle 0.9s ease-out;
}
.round-hero.hal-celebrating {
  position: relative;
}
.round-hero.hal-celebrating::before { left: 18%; top: 10%; animation-delay: 0.05s; }
.round-hero.hal-celebrating::after  { right: 18%; top: 15%; animation-delay: 0.2s; }

@keyframes halSparkle {
  0%   { opacity: 0; transform: translateY(0) scale(0.5) rotate(0); }
  50%  { opacity: 1; transform: translateY(-18px) scale(1.3) rotate(180deg); }
  100% { opacity: 0; transform: translateY(-36px) scale(0.7) rotate(360deg); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hal,
  .hal.hal-celebrate,
  .hal.hal-confused,
  .hal.hal-morph-in,
  .hal.hal-morph-out,
  .hero-mascot,
  .round-hero {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
  }
}