/* ═══════════════════════════════════════════════════════════════════
   Flazza Themes Engine — طبقة الفروق الجوهرية (Show Engine v2)
   ─────────────────────────────────────────────────────────────────────
   هذه الطبقة لا تحلّ محلّ quiz-themes.css (الذي يضبط ألوان/خلفية)؛
   بل تُضيف فروقاً فعلية في:
     - حجم الخط العام        (--qzt-text-scale)
     - الكثافة (Padding scale) (--qzt-density)
     - شدّة استدارة الزوايا   (--qzt-radius-scale)
     - مدّة وحركة الانتقالات  (--qzt-motion-duration / --qzt-motion-ease)
     - شدّة التوهج             (--qzt-glow-strength)
     - تفاصيل ألوان الإضاءة    (--qzt-accent-pulse)
   كل ثيم يُعيد تعريف هذه المتغيرات + يضيف رتوشاً جوهرية لمكوّناته.
   ═══════════════════════════════════════════════════════════════════ */

/* ── الافتراضي (classic) ── */
:root {
  --qzt-text-scale: 1;
  --qzt-density: 1;
  --qzt-radius-scale: 1;
  --qzt-motion-duration: 1;
  --qzt-motion-ease: cubic-bezier(.4, 0, .2, 1);
  --qzt-glow-strength: 0;
  --qzt-accent-pulse: 0 0 0 0 rgba(139, 92, 246, 0);
  --qzt-letter-spacing: 0;
  --qzt-shadow-soft: 0 6px 16px rgba(0, 0, 0, 0.18);
  --qzt-stage-vignette: radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.18) 100%);
}

/* لا نلمس body مباشرة — فقط متغيرات يستخدمها كل مكوّن دون كسر التخطيط القائم. */

/* ─────────── Kids: مساحة، خط أكبر، حواف pill، حركة بضع نطّات ─────────── */
html[data-quiz-theme="kids"] {
  --qzt-text-scale: 1.10;
  --qzt-density: 1.15;
  --qzt-radius-scale: 1.6;
  --qzt-motion-duration: 1.25;
  --qzt-motion-ease: cubic-bezier(.34, 1.56, .64, 1);  /* back ease */
  --qzt-glow-strength: 0.25;
  --qzt-accent-pulse: 0 0 24px 4px rgba(251, 191, 36, 0.45);
  --qzt-letter-spacing: 0.01em;
  --qzt-shadow-soft: 0 12px 30px rgba(2, 9, 33, 0.35);
  --qzt-stage-vignette: radial-gradient(140% 90% at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
}

/* ─────────── Arena: ضيق، حاد، إيقاع سريع ─────────── */
html[data-quiz-theme="arena"] {
  --qzt-text-scale: 1.0;
  --qzt-density: 0.92;
  --qzt-radius-scale: 0.55;
  --qzt-motion-duration: 0.78;
  --qzt-motion-ease: cubic-bezier(.85, 0, .15, 1);    /* expo */
  --qzt-glow-strength: 0.40;
  --qzt-accent-pulse: 0 0 20px 2px rgba(239, 68, 68, 0.55);
  --qzt-letter-spacing: 0.02em;
  --qzt-shadow-soft: 0 8px 22px rgba(120, 0, 8, 0.40);
  --qzt-stage-vignette: radial-gradient(120% 80% at 50% 0%, transparent 50%, rgba(40, 0, 6, 0.45) 100%);
}

/* ─────────── Elegant: مريح، حركة لطيفة، توهج خفيف ─────────── */
html[data-quiz-theme="elegant"] {
  --qzt-text-scale: 0.98;
  --qzt-density: 1.05;
  --qzt-radius-scale: 0.85;
  --qzt-motion-duration: 1.4;
  --qzt-motion-ease: cubic-bezier(.4, .14, .3, 1);    /* refined ease */
  --qzt-glow-strength: 0.10;
  --qzt-accent-pulse: 0 0 14px 1px rgba(207, 162, 76, 0.30);
  --qzt-letter-spacing: 0.01em;
  --qzt-shadow-soft: 0 14px 38px rgba(8, 17, 30, 0.40);
  --qzt-stage-vignette: radial-gradient(140% 100% at 50% 0%, transparent 55%, rgba(8, 17, 30, 0.55) 100%);
}

/* ─────────── Neon: توهج عالٍ، نبضات سريعة ─────────── */
html[data-quiz-theme="neon"] {
  --qzt-text-scale: 1.02;
  --qzt-density: 1.0;
  --qzt-radius-scale: 1.1;
  --qzt-motion-duration: 0.92;
  --qzt-motion-ease: cubic-bezier(.2, .8, .2, 1);     /* punchy */
  --qzt-glow-strength: 0.65;
  --qzt-accent-pulse: 0 0 28px 4px rgba(217, 70, 239, 0.65);
  --qzt-letter-spacing: 0.015em;
  --qzt-shadow-soft: 0 18px 42px rgba(80, 0, 130, 0.45);
  --qzt-stage-vignette: radial-gradient(140% 100% at 50% 0%, rgba(217, 70, 239, 0.05) 0%, transparent 70%);
}


/* ═══════════════════════════════════════════════════════════════════
   1) أحجام الخط (Text Scale) — تطبيق غير مدمر
   ─────────────────────────────────────────────────────────────────────
   نضرب حجم الخط في عناصر «عرضية كبيرة» فقط لتفادي العبث بالنماذج/الأزرار الدقيقة.
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme] .question-text,
html[data-quiz-theme] .q-text,
html[data-quiz-theme] .question-prompt,
html[data-quiz-theme] .arena-lobby__qr-label,
html[data-quiz-theme] .countdown-number,
html[data-quiz-theme] .countdown-sub,
html[data-quiz-theme] .lobby-cover-title,
html[data-quiz-theme] .question-options .option-text,
html[data-quiz-theme] .opt-btn,
html[data-quiz-theme] .play-card .opt {
  font-size: calc(1em * var(--qzt-text-scale, 1));
  letter-spacing: var(--qzt-letter-spacing, 0);
}

html[data-quiz-theme] .countdown-number {
  text-shadow: 0 0 calc(20px * var(--qzt-glow-strength)) currentColor;
}


/* ═══════════════════════════════════════════════════════════════════
   2) شدة الاستدارة (Radius Scale)
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme] .opt-btn,
html[data-quiz-theme] .question-option,
html[data-quiz-theme] .qe-card,
html[data-quiz-theme] .play-card,
html[data-quiz-theme] .player-card,
html[data-quiz-theme] .arena-lobby__qr-wrap,
html[data-quiz-theme] .qz-theme-card,
html[data-quiz-theme] .toast-box,
html[data-quiz-theme] .play-card .opt {
  border-radius: calc(14px * var(--qzt-radius-scale, 1));
}

html[data-quiz-theme="kids"] .opt-btn,
html[data-quiz-theme="kids"] .play-card .opt,
html[data-quiz-theme="kids"] .question-option {
  border-radius: 999px;            /* pill حقيقي للأطفال */
}

html[data-quiz-theme="arena"] .opt-btn,
html[data-quiz-theme="arena"] .play-card .opt,
html[data-quiz-theme="arena"] .question-option {
  border-radius: 6px;              /* حواف حادّة */
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}


/* ═══════════════════════════════════════════════════════════════════
   3) كثافة (Density / Spacing) — على عناصر اللوبي والسؤال
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme] .arena-lobby__meta-cell,
html[data-quiz-theme] .question-main,
html[data-quiz-theme] .question-stage-hero,
html[data-quiz-theme] .play-card,
html[data-quiz-theme] .countdown-shell {
  padding: calc(18px * var(--qzt-density, 1));
}

html[data-quiz-theme] .arena-lobby__meta {
  gap: calc(12px * var(--qzt-density, 1));
}


/* ═══════════════════════════════════════════════════════════════════
   4) إيقاع الحركة (Motion duration + easing)
   ─────────────────────────────────────────────────────────────────────
   نتدخّل في بعض الانتقالات/الأنيميشنات الموجودة دون تعريف جديدة.
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme] .opt-btn,
html[data-quiz-theme] .play-card .opt,
html[data-quiz-theme] .question-option,
html[data-quiz-theme] .player-card,
html[data-quiz-theme] .qz-theme-card {
  transition-duration: calc(220ms * var(--qzt-motion-duration, 1));
  transition-timing-function: var(--qzt-motion-ease);
}

html[data-quiz-theme] .countdown-number {
  animation-duration: calc(900ms * var(--qzt-motion-duration, 1)) !important;
  animation-timing-function: var(--qzt-motion-ease);
}

/* Mobile hard-cap for countdown numerals (overrides aggressive theme bundles). */
@media (max-width: 768px) {
  html[data-quiz-theme] .countdown-number,
  html[data-quiz-theme] .countdown-num {
    font-size: clamp(72px, min(32vw, 26vh), 132px) !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 92vw !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   5) Glow / Pulse على عناصر التركيز (تتأثر بـ glow-strength)
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme] .opt-btn:hover:not([disabled]),
html[data-quiz-theme] .play-card .opt:hover:not([disabled]),
html[data-quiz-theme] .question-option:hover:not([disabled]) {
  box-shadow:
    var(--qzt-shadow-soft),
    var(--qzt-accent-pulse);
}

html[data-quiz-theme="neon"] .opt-btn,
html[data-quiz-theme="neon"] .play-card .opt,
html[data-quiz-theme="neon"] .question-option {
  box-shadow:
    inset 0 0 0 1px rgba(217, 70, 239, 0.32),
    0 0 calc(18px * var(--qzt-glow-strength)) rgba(217, 70, 239, 0.45);
}


/* ═══════════════════════════════════════════════════════════════════
   6) كثافة الواجهة لحظة العد التنازلي (لمس بصري لكل ثيم)
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .countdown-shell {
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.20) 0%, transparent 70%);
}
html[data-quiz-theme="arena"] .countdown-shell {
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.30) 0%, transparent 60%);
}
html[data-quiz-theme="elegant"] .countdown-shell {
  background: radial-gradient(circle at center, rgba(207, 162, 76, 0.10) 0%, transparent 75%);
}
html[data-quiz-theme="neon"] .countdown-shell {
  background:
    radial-gradient(circle at center, rgba(217, 70, 239, 0.30) 0%, transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(34, 211, 238, 0.18) 0%, transparent 50%);
}


/* ═══════════════════════════════════════════════════════════════════
   7) لوبي ولوحة الصدارة — لمسات ثيمية بدون تغيير layout
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme] .player-card,
html[data-quiz-theme] .lobby-player-card {
  transition: transform calc(260ms * var(--qzt-motion-duration, 1)) var(--qzt-motion-ease),
              box-shadow calc(260ms * var(--qzt-motion-duration, 1)) var(--qzt-motion-ease);
}

html[data-quiz-theme="kids"] .player-card,
html[data-quiz-theme="kids"] .lobby-player-card {
  /* قفزة ودودة عند الإضافة */
  animation: qzt-kids-bounce-in calc(680ms * var(--qzt-motion-duration, 1)) var(--qzt-motion-ease) both;
}

@keyframes qzt-kids-bounce-in {
  0%   { transform: scale(0.6) translateY(8px); opacity: 0; }
  60%  { transform: scale(1.08) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

html[data-quiz-theme="arena"] .player-card,
html[data-quiz-theme="arena"] .lobby-player-card {
  animation: qzt-arena-slide-in calc(360ms * var(--qzt-motion-duration, 1)) var(--qzt-motion-ease) both;
}

@keyframes qzt-arena-slide-in {
  0%   { transform: translateX(-14px) skewX(-6deg); opacity: 0; }
  100% { transform: translateX(0) skewX(0); opacity: 1; }
}

html[data-quiz-theme="elegant"] .player-card,
html[data-quiz-theme="elegant"] .lobby-player-card {
  animation: qzt-elegant-fade-in calc(720ms * var(--qzt-motion-duration, 1)) var(--qzt-motion-ease) both;
}

@keyframes qzt-elegant-fade-in {
  0%   { transform: translateY(6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

html[data-quiz-theme="neon"] .player-card,
html[data-quiz-theme="neon"] .lobby-player-card {
  animation: qzt-neon-glow-in calc(520ms * var(--qzt-motion-duration, 1)) var(--qzt-motion-ease) both;
}

@keyframes qzt-neon-glow-in {
  0%   { transform: scale(.92); opacity: 0; box-shadow: 0 0 0 rgba(217, 70, 239, 0); }
  60%  { transform: scale(1.04); opacity: 1; box-shadow: 0 0 22px rgba(217, 70, 239, .55); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 12px rgba(217, 70, 239, .25); }
}


/* ═══════════════════════════════════════════════════════════════════
   8) شارة «الثيم النشط» على شاشة المضيف — لمسة شخصية لكل برنامج عرض
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme] #arena-meta-theme::after {
  content: " • برنامج عرض";
  font-size: 0.7em;
  opacity: 0.6;
  margin-inline-start: 6px;
  font-weight: 500;
}
html[data-quiz-theme="classic"] #arena-meta-theme::after { content: " • متوازن"; }
html[data-quiz-theme="kids"]    #arena-meta-theme::after { content: " • مرح"; }
html[data-quiz-theme="arena"]   #arena-meta-theme::after { content: " • تنافسي"; }
html[data-quiz-theme="elegant"] #arena-meta-theme::after { content: " • راقٍ"; }
html[data-quiz-theme="neon"]    #arena-meta-theme::after { content: " • شبابي"; }


/* ═══════════════════════════════════════════════════════════════════
   9) Toasts — نبرة بصرية مختلفة لكل ثيم (نبرة النصّ تأتي من JS engine)
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme] .toast-box,
html[data-quiz-theme] .sa-toast {
  transition: transform calc(260ms * var(--qzt-motion-duration, 1)) var(--qzt-motion-ease),
              opacity calc(260ms * var(--qzt-motion-duration, 1)) var(--qzt-motion-ease);
}

html[data-quiz-theme="kids"] .toast-box {
  font-size: calc(1em * 1.05);
}
html[data-quiz-theme="elegant"] .toast-box {
  letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════════════════════
   10) Coronation — تخصيص مزاج التتويج (مع احترام إعداد victory_video_enabled)
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme] .coronation-scene {
  transition: filter 800ms var(--qzt-motion-ease);
}
html[data-quiz-theme="kids"] .coronation-scene {
  filter: saturate(1.08) brightness(1.04);
}
html[data-quiz-theme="arena"] .coronation-scene {
  filter: contrast(1.08) saturate(1.15);
}
html[data-quiz-theme="elegant"] .coronation-scene {
  filter: saturate(.92) contrast(1.02);
}
html[data-quiz-theme="neon"] .coronation-scene {
  filter: saturate(1.18) brightness(1.05);
}


/* ═══════════════════════════════════════════════════════════════════
   11) Reduced motion — احترام تفضيلات المستخدم على المستوى النظامي
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html[data-quiz-theme] {
    --qzt-motion-duration: 0.001;
  }
  html[data-quiz-theme] .player-card,
  html[data-quiz-theme] .lobby-player-card {
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   12) Body / Panel Background — تغيير الخلفية الأساسية لشاشة اللاعب
   ─────────────────────────────────────────────────────────────────────
   play.css يعرّف body خلفية ثابتة؛ هنا نعيد كتابتها لكل ثيم.
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] body {
  background: linear-gradient(145deg, #0b2545 0%, #143465 55%, #1a3f7a 100%);
}
html[data-quiz-theme="arena"] body {
  background: linear-gradient(145deg, #0f0a0e 0%, #1b0d0a 55%, #2a0b12 100%);
}
html[data-quiz-theme="elegant"] body {
  background: linear-gradient(145deg, #0a141e 0%, #11202e 55%, #152b3e 100%);
}
html[data-quiz-theme="neon"] body {
  background: linear-gradient(145deg, #080516 0%, #110824 40%, #1a0636 100%);
}


/* ═══════════════════════════════════════════════════════════════════
   13) Play Panel Surface — سطح بطاقة اللاعب الرئيسية (.panel)
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .panel {
  background: rgba(11, 37, 69, 0.92);
  border-color: rgba(251, 191, 36, 0.15);
}
html[data-quiz-theme="arena"] .panel {
  background: rgba(15, 10, 14, 0.94);
  border-color: rgba(239, 68, 68, 0.15);
}
html[data-quiz-theme="elegant"] .panel {
  background: rgba(10, 20, 30, 0.93);
  border-color: rgba(14, 165, 233, 0.10);
}
html[data-quiz-theme="neon"] .panel {
  background: rgba(8, 5, 22, 0.94);
  border-color: rgba(217, 70, 239, 0.15);
}


/* ═══════════════════════════════════════════════════════════════════
   14) Form Inputs — حقول الإدخال بلون الثيم
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .form-input:focus {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}
html[data-quiz-theme="arena"] .form-input:focus {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
html[data-quiz-theme="elegant"] .form-input:focus {
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.10);
}
html[data-quiz-theme="neon"] .form-input:focus {
  border-color: rgba(217, 70, 239, 0.55);
  box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.15);
}


/* ═══════════════════════════════════════════════════════════════════
   15) Lobby Brand Area — شعار الاستقبال
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .play-lobby-brand__copy {
  color: #fbbf24;
}
html[data-quiz-theme="arena"] .play-lobby-brand__copy {
  color: #f87171;
}
html[data-quiz-theme="elegant"] .play-lobby-brand__copy {
  color: #7dd3fc;
}
html[data-quiz-theme="neon"] .play-lobby-brand__copy {
  color: #f0abfc;
}


/* ═══════════════════════════════════════════════════════════════════
   16) Feedback Stage — شاشة النتيجة/التغذية الراجعة
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .feedback.ok .fb-icon {
  filter: hue-rotate(-30deg) saturate(1.4);
}
html[data-quiz-theme="arena"] .feedback.ok .fb-icon {
  filter: hue-rotate(-50deg) saturate(1.6);
}
html[data-quiz-theme="elegant"] .feedback.ok .fb-icon {
  filter: hue-rotate(160deg) saturate(0.8);
}
html[data-quiz-theme="neon"] .feedback.ok .fb-icon {
  filter: hue-rotate(260deg) saturate(1.5) brightness(1.2);
}

html[data-quiz-theme="kids"] .fb-points {
  color: #fbbf24;
}
html[data-quiz-theme="arena"] .fb-points {
  color: #f87171;
}
html[data-quiz-theme="elegant"] .fb-points {
  color: #38bdf8;
}
html[data-quiz-theme="neon"] .fb-points {
  color: #f0abfc;
}


/* ═══════════════════════════════════════════════════════════════════
   17) Play Leaderboard — قائمة الترتيب في شاشة اللاعب
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .lb .rank-1 {
  border-color: rgba(251, 191, 36, 0.40);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.15);
}
html[data-quiz-theme="arena"] .lb .rank-1 {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.18);
}
html[data-quiz-theme="elegant"] .lb .rank-1 {
  border-color: rgba(207, 162, 76, 0.35);
  box-shadow: 0 0 20px rgba(207, 162, 76, 0.10);
}
html[data-quiz-theme="neon"] .lb .rank-1 {
  border-color: rgba(217, 70, 239, 0.45);
  box-shadow: 0 0 24px rgba(217, 70, 239, 0.20);
}


/* ═══════════════════════════════════════════════════════════════════
   18) Question Header & Number — ترقيم السؤال
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .q-number,
html[data-quiz-theme="kids"] .question-number {
  color: #fbbf24;
}
html[data-quiz-theme="arena"] .q-number,
html[data-quiz-theme="arena"] .question-number {
  color: #f87171;
}
html[data-quiz-theme="elegant"] .q-number,
html[data-quiz-theme="elegant"] .question-number {
  color: #7dd3fc;
}
html[data-quiz-theme="neon"] .q-number,
html[data-quiz-theme="neon"] .question-number {
  color: #f0abfc;
}

html[data-quiz-theme="kids"] .question-badge {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.25);
}
html[data-quiz-theme="arena"] .question-badge {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}
html[data-quiz-theme="elegant"] .question-badge {
  background: rgba(14, 165, 233, 0.10);
  color: #38bdf8;
  border-color: rgba(14, 165, 233, 0.18);
}
html[data-quiz-theme="neon"] .question-badge {
  background: rgba(217, 70, 239, 0.15);
  color: #f0abfc;
  border-color: rgba(217, 70, 239, 0.25);
}


/* ═══════════════════════════════════════════════════════════════════
   19) Play Status Bar — شريط الحالة في لوبي اللاعب
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .play-status-bar__item span {
  color: #fbbf24;
}
html[data-quiz-theme="arena"] .play-status-bar__item span {
  color: #f87171;
}
html[data-quiz-theme="elegant"] .play-status-bar__item span {
  color: #7dd3fc;
}
html[data-quiz-theme="neon"] .play-status-bar__item span {
  color: #f0abfc;
}


/* ═══════════════════════════════════════════════════════════════════
   20) Host Topbar Accent — لمسات الثيم على الشريط العلوي للمضيف
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .hx-fusion-cell--phase .hx-f-value {
  color: #fbbf24;
}
html[data-quiz-theme="arena"] .hx-fusion-cell--phase .hx-f-value {
  color: #f87171;
}
html[data-quiz-theme="elegant"] .hx-fusion-cell--phase .hx-f-value {
  color: #38bdf8;
}
html[data-quiz-theme="neon"] .hx-fusion-cell--phase .hx-f-value {
  color: #f0abfc;
}

html[data-quiz-theme="kids"] .hx-energy-fill {
  background: linear-gradient(90deg, #f59e0b, #22d3ee);
}
html[data-quiz-theme="arena"] .hx-energy-fill {
  background: linear-gradient(90deg, #ef4444, #fbbf24);
}
html[data-quiz-theme="elegant"] .hx-energy-fill {
  background: linear-gradient(90deg, #0ea5e9, #cfa24c);
}
html[data-quiz-theme="neon"] .hx-energy-fill {
  background: linear-gradient(90deg, #d946ef, #22d3ee);
}


/* ═══════════════════════════════════════════════════════════════════
   21) Host Start Button Glow — توهج زر البدء حسب الثيم
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .hx-fusion-icon-btn--start .hx-fusion-icon-btn__glow-ring {
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.45);
}
html[data-quiz-theme="arena"] .hx-fusion-icon-btn--start .hx-fusion-icon-btn__glow-ring {
  box-shadow: 0 0 22px rgba(239, 68, 68, 0.50);
}
html[data-quiz-theme="elegant"] .hx-fusion-icon-btn--start .hx-fusion-icon-btn__glow-ring {
  box-shadow: 0 0 22px rgba(14, 165, 233, 0.35);
}
html[data-quiz-theme="neon"] .hx-fusion-icon-btn--start .hx-fusion-icon-btn__glow-ring {
  box-shadow: 0 0 28px rgba(217, 70, 239, 0.55);
}


/* ═══════════════════════════════════════════════════════════════════
   22) Finished / Results — شاشة النهاية في اللاعب
   ═══════════════════════════════════════════════════════════════════ */
html[data-quiz-theme="kids"] .results-final-title { color: #fbbf24; }
html[data-quiz-theme="arena"] .results-final-title { color: #f87171; }
html[data-quiz-theme="elegant"] .results-final-title { color: #38bdf8; }
html[data-quiz-theme="neon"] .results-final-title { color: #f0abfc; }

html[data-quiz-theme="kids"] .podium .rank-1 { border-color: rgba(251, 191, 36, 0.50); }
html[data-quiz-theme="arena"] .podium .rank-1 { border-color: rgba(239, 68, 68, 0.55); }
html[data-quiz-theme="elegant"] .podium .rank-1 { border-color: rgba(207, 162, 76, 0.40); }
html[data-quiz-theme="neon"] .podium .rank-1 { border-color: rgba(217, 70, 239, 0.55); }