Update app.py

app.py

@@ -136,13 +136,6 @@ def run_model(user_input: str, system_prompt: str) -> str:
 
 
 def play_level(user_input: str, level_idx: int, unlocked_state: list):
-    """
-    الدالة الرئيسية للعبة:
-    1. تفحص ArabGuard
-    2. لو محظور → رسالة حظر
-    3. لو آمن → تشغيل النموذج
-    4. تحقق من وجود كلمة اللور في الرد → تكشف القصة
-    """
     lv = LEVELS[level_idx]
     unlocked = list(unlocked_state)
 
@@ -200,275 +193,285 @@ def play_level(user_input: str, level_idx: int, unlocked_state: list):
 
 
 # ══════════════════════════════════════════════════
-#  مساعدات HTML
+#  مساعدات HTML — ألوان عالية التباين
 # ══════════════════════════════════════════════════
 def build_progress_html(unlocked: list) -> str:
     pips = ""
     for i in range(5):
         if i in unlocked:
-            color = "#3A7BD5"
-            glow  = "box-shadow:0 0 6px #3A7BD5;"
+            color, border = "#4A9EFF", "#4A9EFF"
         else:
-            color = "rgba(100,160,255,0.12)"
-            glow  = ""
-        pips += f'<div style="width:52px;height:6px;border-radius:3px;background:{color};{glow}border:0.5px solid rgba(100,160,255,0.25);transition:all .4s;"></div>'
-
+            color, border = "#1A2E50", "#2A4A7A"
+        pips += (
+            f'<div style="width:52px;height:8px;border-radius:4px;'
+            f'background:{color};border:1px solid {border};transition:all .4s;"></div>'
+        )
     count = len(unlocked)
     pct   = int(count / 5 * 100)
-    bar   = f'<div style="height:4px;background:#060B14;border-radius:3px;margin-top:10px;overflow:hidden;"><div style="height:100%;width:{pct}%;background:linear-gradient(90deg,#1A4A8A,#5A9BF5);border-radius:3px;transition:width .5s;"></div></div>'
-
+    bar = (
+        f'<div style="height:5px;background:#1A2E50;border-radius:3px;'
+        f'margin-top:12px;overflow:hidden;">'
+        f'<div style="height:100%;width:{pct}%;background:#4A9EFF;'
+        f'border-radius:3px;transition:width .5s;"></div></div>'
+    )
     return (
-        f'<div style="display:flex;gap:6px;justify-content:center;">{pips}</div>'
+        f'<div style="display:flex;gap:8px;justify-content:center;">{pips}</div>'
         f'{bar}'
-        f'<p style="text-align:center;font-size:12px;color:#3A5A8A;margin-top:6px;letter-spacing:1px;">'
-        f'المستويات المخترقة: <span style="color:#5A9BF5;">{count}</span> / 5'
+        f'<p style="text-align:center;font-size:14px;color:#8BB8E8;'
+        f'margin-top:8px;letter-spacing:1px;font-family:Tajawal,sans-serif;">'
+        f'المستويات المخترقة: <span style="color:#4A9EFF;font-weight:700;">{count}</span> / 5'
         f'</p>'
     )
 
 
 def level_info_html(level_idx: int) -> str:
     lv = LEVELS[level_idx]
-    return f"""
-<div style="direction:rtl;font-family:'Tajawal',sans-serif;padding:4px 0;">
-  <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
-    <span style="background:rgba(58,123,213,0.18);border:0.5px solid #3A7BD5;color:#7BBFFF;
-                 font-size:11px;letter-spacing:1.5px;padding:3px 10px;border-radius:4px;">
-      {lv['badge']}
-    </span>
-    <span style="font-size:11px;color:#3A5A8A;letter-spacing:1px;">{lv['attack_type']}</span>
-  </div>
-  <div style="font-size:18px;font-weight:700;color:#A8C8FF;margin-bottom:6px;">{lv['title']}</div>
-  <div style="font-size:14px;color:#5A7AAA;line-height:1.7;">{lv['desc']}</div>
-</div>"""
+    return (
+        f'<div style="direction:rtl;font-family:Tajawal,sans-serif;padding:8px 0 14px;">'
+        f'<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">'
+        f'<span style="background:#1A3A6A;border:1px solid #4A9EFF;color:#A8D4FF;'
+        f'font-size:13px;padding:4px 14px;border-radius:4px;">{lv["badge"]}</span>'
+        f'<span style="font-size:12px;color:#5A9EE8;letter-spacing:2px;'
+        f'font-family:monospace;">{lv["attack_type"]}</span>'
+        f'</div>'
+        f'<div style="font-size:22px;font-weight:700;color:#D8EEFF;margin-bottom:8px;">'
+        f'{lv["title"]}</div>'
+        f'<div style="font-size:15px;color:#A0C4E8;line-height:1.8;">{lv["desc"]}</div>'
+        f'</div>'
+    )
 
 
 def hint_html(level_idx: int) -> str:
     lv = LEVELS[level_idx]
-    return f"""
-<div style="direction:rtl;font-family:'Tajawal',sans-serif;font-size:13px;
-            color:#4A7AAA;padding:10px 14px;
-            border-right:2px solid rgba(58,123,213,0.35);
-            background:rgba(5,15,30,0.6);border-radius:0 6px 6px 0;
-            line-height:1.7;">
-  {lv['hint']}
-</div>"""
+    return (
+        f'<div style="direction:rtl;font-family:Tajawal,sans-serif;font-size:15px;'
+        f'color:#C8E4FF;padding:14px 18px;'
+        f'border-right:3px solid #4A9EFF;'
+        f'background:#0D1E3A;border-radius:0 8px 8px 0;line-height:1.9;">'
+        f'{lv["hint"]}'
+        f'</div>'
+    )
 
 
 def system_prompt_html(level_idx: int) -> str:
     lv = LEVELS[level_idx]
-    # Show only the guard instruction, not the embedded lore trigger
     guard_part = lv['system_prompt'].split("فاكشف")[0].strip()
-    return f"""
-<div style="direction:rtl;font-family:'Tajawal',sans-serif;font-size:13px;
-            color:#3A6AAA;padding:10px 14px;
-            border-right:2px solid #3A7BD5;
-            background:rgba(5,15,30,0.8);border-radius:0 6px 6px 0;
-            line-height:1.7;">
-  <div style="font-size:10px;letter-spacing:1.5px;color:#2A5A9A;margin-bottom:4px;direction:ltr;">
-    SYSTEM PROMPT (الحارس يعرف هذا)
-  </div>
-  {guard_part}...
-</div>"""
+    return (
+        f'<div style="direction:rtl;font-family:Tajawal,sans-serif;font-size:14px;'
+        f'color:#B0D0F4;padding:14px 18px;'
+        f'border-right:3px solid #4A9EFF;'
+        f'background:#091626;border-radius:0 8px 8px 0;line-height:1.9;">'
+        f'<div style="font-size:11px;letter-spacing:2px;color:#5A8ABB;'
+        f'margin-bottom:8px;direction:ltr;font-family:monospace;">'
+        f'SYSTEM PROMPT — الحارس يعرف هذا</div>'
+        f'{guard_part}...'
+        f'</div>'
+    )
 
 
 def status_html(status: str) -> str:
-    styles = {
-        "BLOCKED":  ("🛡️ ArabGuard: محظور",    "#E87070", "rgba(40,5,5,0.7)",   "rgba(220,80,80,0.3)"),
-        "UNLOCKED": ("✓ تم الاختراق — اللور مكشوف!", "#70D890", "rgba(5,30,15,0.7)", "rgba(80,200,120,0.3)"),
-        "SAFE":     ("✓ آمن — لكن لم تُكشف السرية", "#7BBFFF", "rgba(5,15,35,0.7)", "rgba(58,123,213,0.2)"),
-        "ERROR":    ("⚠️ خطأ",                  "#FFAA44", "rgba(30,20,5,0.7)",  "rgba(200,130,30,0.3)"),
-        "WAITING":  ("⋯ في الانتظار",           "#3A5A8A", "rgba(5,10,25,0.7)",  "rgba(30,50,100,0.2)"),
+    cfg = {
+        "BLOCKED":  ("🛡️ ArabGuard: محظور — الرسالة لم تصل للحارس", "#FF8888", "#2A0C0C", "#DD4444"),
+        "UNLOCKED": ("✓ تم الاختراق بنجاح — المعلومة السرية مكشوفة!", "#50EE88", "#082414", "#28AA55"),
+        "SAFE":     ("↩ الحارس رد — لم تُكشف السرية بعد",            "#A8D4FF", "#091830", "#3A7BD5"),
+        "ERROR":    ("⚠️ خطأ في النظام",                              "#FFB84A", "#221408", "#CC8820"),
+        "WAITING":  ("⋯ في انتظار رسالتك",                           "#7AAAD8", "#0A1425", "#2A4A7A"),
     }
-    label, color, bg, border = styles.get(status, styles["WAITING"])
-    return f"""
-<div style="font-size:13px;color:{color};background:{bg};
-            border:0.5px solid {border};border-radius:6px;
-            padding:8px 14px;text-align:center;
-            font-family:'Tajawal',sans-serif;letter-spacing:0.5px;">
-  {label}
-</div>"""
+    label, color, bg, border = cfg.get(status, cfg["WAITING"])
+    return (
+        f'<div style="font-size:15px;color:{color};background:{bg};'
+        f'border:1px solid {border};border-radius:6px;'
+        f'padding:10px 16px;text-align:center;'
+        f'font-family:Tajawal,sans-serif;font-weight:500;">'
+        f'{label}</div>'
+    )
 
 
 def lore_html(lore_text: str) -> str:
     if not lore_text:
         return ""
-    return f"""
-<div style="direction:rtl;font-family:'Tajawal',sans-serif;
-            background:rgba(5,30,15,0.9);border:0.5px solid rgba(80,200,120,0.3);
-            border-radius:8px;padding:16px 18px;animation:fadeIn 0.6s ease;">
-  <div style="font-size:10px;letter-spacing:2px;color:#40A860;
-              margin-bottom:10px;font-family:monospace;">◈ معلومة سرية مكشوفة ◈</div>
-  <div style="font-size:15px;color:#90EAB0;line-height:1.9;">{lore_text}</div>
-</div>"""
+    return (
+        f'<div style="direction:rtl;font-family:Tajawal,sans-serif;'
+        f'background:#08200F;border:1px solid #28AA55;'
+        f'border-radius:8px;padding:18px 20px;margin-top:6px;">'
+        f'<div style="font-size:11px;letter-spacing:2px;color:#40CC70;'
+        f'margin-bottom:10px;font-family:monospace;">◈ معلومة سرية مكشوفة ◈</div>'
+        f'<div style="font-size:16px;color:#90F0B8;line-height:2.0;">{lore_text}</div>'
+        f'</div>'
+    )
 
 
 def victory_html() -> str:
     chapters = "".join([
-        f'<div style="margin-bottom:18px;">'
-        f'<div style="font-size:11px;letter-spacing:2px;color:#2A6A40;margin-bottom:6px;">'
+        f'<div style="margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid #1A4028;">'
+        f'<div style="font-size:11px;letter-spacing:2px;color:#40CC70;'
+        f'margin-bottom:8px;font-family:monospace;">'
         f'CHAPTER {lv["num"]} — {lv["title"]}</div>'
-        f'<div style="font-size:14px;color:#80D8A0;line-height:1.9;">{lv["lore"]}</div>'
+        f'<div style="font-size:15px;color:#A8F0CC;line-height:2.0;">{lv["lore"]}</div>'
         f'</div>'
         for lv in LEVELS
     ])
-    return f"""
-<div style="direction:rtl;font-family:'Tajawal',sans-serif;
-            background:rgba(5,25,15,0.95);border:0.5px solid rgba(80,200,120,0.25);
-            border-radius:12px;padding:24px 26px;">
-  <div style="text-align:center;margin-bottom:20px;">
-    <div style="font-size:24px;font-weight:700;color:#90EAB0;">مبروك — الحقيقة الكاملة</div>
-    <div style="font-size:12px;letter-spacing:2px;color:#40A860;margin-top:4px;">
-      ALL 5 LEVELS BREACHED — ARABGUARD DEFEATED
-    </div>
-  </div>
-  {chapters}
-</div>"""
+    return (
+        f'<div style="direction:rtl;font-family:Tajawal,sans-serif;'
+        f'background:#061610;border:1px solid #28AA55;'
+        f'border-radius:12px;padding:28px 30px;">'
+        f'<div style="text-align:center;margin-bottom:26px;">'
+        f'<div style="font-size:26px;font-weight:700;color:#70F0A8;">مبروك — الحقيقة الكاملة</div>'
+        f'<div style="font-size:12px;letter-spacing:2px;color:#38B860;margin-top:8px;font-family:monospace;">'
+        f'ALL 5 LEVELS BREACHED — ARABGUARD DEFEATED</div>'
+        f'</div>'
+        f'{chapters}'
+        f'</div>'
+    )
 
 
 # ══════════════════════════════════════════════════
-#  CSS مخصص للتطبيق
+#  CSS — ألوان عالية التباين
 # ══════════════════════════════════════════════════
 CUSTOM_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&family=Rajdhani:wght@400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&family=Rajdhani:wght@400;600;700&display=swap');
 
 body, .gradio-container {
-    background: #060B14 !important;
+    background: #0B1628 !important;
     font-family: 'Rajdhani', sans-serif !important;
 }
 
-/* Stars background */
-.gradio-container::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background-image:
-        radial-gradient(1px 1px at 15% 25%, rgba(180,200,255,0.4) 0%, transparent 100%),
-        radial-gradient(1px 1px at 45% 10%, rgba(180,200,255,0.3) 0%, transparent 100%),
-        radial-gradient(1.2px 1.2px at 70% 60%, rgba(180,200,255,0.35) 0%, transparent 100%),
-        radial-gradient(0.8px 0.8px at 30% 80%, rgba(180,200,255,0.25) 0%, transparent 100%),
-        radial-gradient(1px 1px at 85% 35%, rgba(180,200,255,0.3) 0%, transparent 100%),
-        radial-gradient(0.9px 0.9px at 55% 90%, rgba(180,200,255,0.2) 0%, transparent 100%),
-        radial-gradient(1.1px 1.1px at 10% 55%, rgba(180,200,255,0.25) 0%, transparent 100%),
-        radial-gradient(0.8px 0.8px at 92% 75%, rgba(180,200,255,0.2) 0%, transparent 100%);
-    pointer-events: none;
-    z-index: 0;
-}
-
-/* Title */
 .game-title-block {
     text-align: center;
     padding: 28px 0 18px;
-    border-bottom: 0.5px solid rgba(100,160,255,0.1);
+    border-bottom: 1px solid #1E3A60;
     margin-bottom: 20px;
 }
 .game-title-block h1 {
     font-family: 'Rajdhani', sans-serif !important;
-    font-size: 28px !important;
+    font-size: 30px !important;
     font-weight: 700 !important;
-    color: #7BBFFF !important;
+    color: #A8D4FF !important;
     letter-spacing: 4px !important;
     text-transform: uppercase !important;
     margin: 0 !important;
 }
 .game-title-block p {
     font-family: 'Tajawal', sans-serif !important;
-    font-size: 14px !important;
-    color: #3A5A8A !important;
-    margin: 6px 0 0 !important;
-    letter-spacing: 1px !important;
+    font-size: 15px !important;
+    color: #7AAAD8 !important;
+    margin: 8px 0 0 !important;
 }
 
-/* Panels */
-.gr-panel, .gr-box, .gr-form {
-    background: rgba(8,18,38,0.85) !important;
-    border: 0.5px solid rgba(100,160,255,0.15) !important;
+.gr-panel, .gr-box, .gr-form, .gradio-group {
+    background: #0F1F3A !important;
+    border: 1px solid #1E3A60 !important;
     border-radius: 10px !important;
 }
 
-/* Inputs */
 textarea, input[type="text"] {
-    background: rgba(4,12,28,0.95) !important;
-    border: 0.5px solid rgba(100,160,255,0.22) !important;
+    background: #081428 !important;
+    border: 1px solid #2A5080 !important;
     border-radius: 6px !important;
-    color: #C8D8F0 !important;
+    color: #E0F0FF !important;
     font-family: 'Tajawal', sans-serif !important;
-    font-size: 14px !important;
+    font-size: 15px !important;
     direction: rtl !important;
 }
 textarea:focus, input[type="text"]:focus {
-    border-color: rgba(100,160,255,0.45) !important;
-    box-shadow: none !important;
+    border-color: #4A9EFF !important;
+    box-shadow: 0 0 0 2px rgba(74,158,255,0.18) !important;
+    outline: none !important;
 }
 textarea::placeholder, input::placeholder {
-    color: #2A4A7A !important;
+    color: #3A6090 !important;
+}
+textarea[readonly], textarea[disabled] {
+    color: #C8E4FF !important;
+    background: #091A30 !important;
+    opacity: 1 !important;
 }
 
-/* Buttons */
-button.primary {
-    background: rgba(58,123,213,0.15) !important;
-    border: 0.5px solid #3A7BD5 !important;
-    color: #7BBFFF !important;
+button.primary, .gr-button-primary {
+    background: #1A4A9A !important;
+    border: 1px solid #4A9EFF !important;
+    color: #E8F4FF !important;
     font-family: 'Rajdhani', sans-serif !important;
-    font-size: 13px !important;
+    font-size: 14px !important;
     font-weight: 600 !important;
     letter-spacing: 1.5px !important;
     text-transform: uppercase !important;
     border-radius: 6px !important;
     transition: all 0.2s !important;
 }
-button.primary:hover {
-    background: rgba(58,123,213,0.3) !important;
+button.primary:hover, .gr-button-primary:hover {
+    background: #2860C0 !important;
+    border-color: #80C0FF !important;
 }
 
-button.secondary {
-    background: transparent !important;
-    border: 0.5px solid rgba(100,160,255,0.2) !important;
-    color: #3A6AAA !important;
+button.secondary, .gr-button-secondary {
+    background: #102040 !important;
+    border: 1px solid #2A5080 !important;
+    color: #90C0F0 !important;
     font-family: 'Rajdhani', sans-serif !important;
-    font-size: 12px !important;
+    font-size: 13px !important;
     letter-spacing: 1px !important;
     text-transform: uppercase !important;
     border-radius: 4px !important;
+    transition: all 0.2s !important;
 }
-button.secondary:hover {
-    border-color: rgba(100,160,255,0.4) !important;
-    color: #6A9ACA !important;
+button.secondary:hover, .gr-button-secondary:hover {
+    border-color: #4A9EFF !important;
+    color: #C8E4FF !important;
+    background: #18305A !important;
 }
 
-/* Labels */
-label span {
-    color: #4A6A9A !important;
+label, label span, .gr-label {
+    color: #90B8E8 !important;
     font-family: 'Rajdhani', sans-serif !important;
-    font-size: 11px !important;
+    font-size: 12px !important;
     letter-spacing: 1.5px !important;
     text-transform: uppercase !important;
 }
 
-/* Tabs */
-.tab-nav button {
+.tab-nav button, .tabs button {
     font-family: 'Tajawal', sans-serif !important;
-    color: #4A6A9A !important;
+    color: #7AAAD8 !important;
+    font-size: 14px !important;
+    background: transparent !important;
     border-bottom: 2px solid transparent !important;
+    padding: 8px 14px !important;
+    transition: all 0.2s !important;
+}
+.tab-nav button.selected, .tabs button.selected {
+    color: #A8D4FF !important;
+    border-bottom: 2px solid #4A9EFF !important;
+    background: rgba(74,158,255,0.08) !important;
+}
+
+.accordion > .label-wrap {
+    background: #0F1F3A !important;
+    border: 1px solid #1E3A60 !important;
+    border-radius: 6px !important;
+    padding: 8px 14px !important;
 }
-.tab-nav button.selected {
-    color: #7BBFFF !important;
-    border-bottom: 2px solid #3A7BD5 !important;
+.accordion > .label-wrap span,
+.accordion > .label-wrap button {
+    color: #90C0F0 !important;
+    font-size: 14px !important;
+    font-family: 'Tajawal', sans-serif !important;
 }
 
-/* Slider */
-input[type="range"] {
-    accent-color: #3A7BD5 !important;
+.prose p, .gr-markdown p, .gr-markdown li {
+    color: #C0D8F4 !important;
+    font-size: 14px !important;
 }
 
-/* HTML outputs */
-.output-html { background: transparent !important; border: none !important; }
+.json-component {
+    background: #081428 !important;
+    color: #80C0FF !important;
+    border: 1px solid #1E3A60 !important;
+}
 
-/* Scrollbars */
-::-webkit-scrollbar { width: 4px; }
-::-webkit-scrollbar-track { background: #060B14; }
-::-webkit-scrollbar-thumb { background: #1A3A6A; border-radius: 2px; }
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: #0B1628; }
+::-webkit-scrollbar-thumb { background: #2A4A7A; border-radius: 3px; }
 
-/* Animations */
 @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
 """
 
@@ -477,11 +480,9 @@ input[type="range"] {
 # ══════════════════════════════════════════════════
 with gr.Blocks(css=CUSTOM_CSS, title="ArabGuard Breach — اختراق الحارس العربي") as demo:
 
-    # ── State ────────────────────────────────────
-    unlocked_state = gr.State([])       # list of unlocked level indices
-    current_level  = gr.State(0)        # current level index
+    unlocked_state = gr.State([])
+    current_level  = gr.State(0)
 
-    # ── Header ───────────────────────────────────
     gr.HTML("""
     <div class="game-title-block">
       <h1>◈ ArabGuard Breach ◈</h1>
@@ -489,63 +490,48 @@ with gr.Blocks(css=CUSTOM_CSS, title="ArabGuard Breach — اختراق الحا
     </div>
     """)
 
-    # ── Progress bar ─────────────��───────────────
-    progress_display = gr.HTML(value=build_progress_html([]), elem_id="progress")
+    progress_display = gr.HTML(value=build_progress_html([]))
 
-    # ── Level tabs ───────────────────────────────
-    with gr.Tabs() as tabs:
+    with gr.Tabs():
         for i, lv in enumerate(LEVELS):
             with gr.TabItem(f"{lv['badge']} — {lv['title']}"):
 
-                # Level info
                 gr.HTML(value=level_info_html(i))
 
-                # System prompt reveal
-                with gr.Accordion("👁 عرض System Prompt الحارس", open=False):
+                with gr.Accordion("👁  عرض System Prompt الحارس", open=False):
                     gr.HTML(value=system_prompt_html(i))
 
-                # Hint
-                with gr.Accordion("💡 تلميح", open=False):
+                with gr.Accordion("💡  تلميح", open=False):
                     gr.HTML(value=hint_html(i))
 
-                # User input
                 user_input = gr.Textbox(
                     label="رسالتك للحارس",
                     placeholder="اكتب رسالتك باللغة العربية هنا...",
                     lines=3,
-                    elem_id=f"input_lvl_{i}",
                 )
 
-                # Buttons row
                 with gr.Row():
-                    send_btn  = gr.Button("إرسال ←", variant="primary", scale=3)
-                    clear_btn = gr.Button("مسح", variant="secondary", scale=1)
+                    send_btn  = gr.Button("إرسال ←", variant="primary",   scale=3)
+                    clear_btn = gr.Button("مسح ✕",   variant="secondary",  scale=1)
 
-                # Status badge
-                status_out = gr.HTML(value=status_html("WAITING"), label="الحالة")
+                status_out = gr.HTML(value=status_html("WAITING"))
 
-                # Model reply
                 reply_out = gr.Textbox(
                     label="رد الحارس",
                     interactive=False,
-                    lines=4,
-                    elem_id=f"reply_lvl_{i}",
+                    lines=5,
                 )
 
-                # Lore reveal
-                lore_out = gr.HTML(value="", label="")
+                lore_out = gr.HTML(value="")
 
-                # ArabGuard trace
-                with gr.Accordion("🔍 تفاصيل ArabGuard", open=False):
+                with gr.Accordion("🔍  تفاصيل ArabGuard", open=False):
                     trace_out = gr.JSON(label="Pipeline Trace")
 
-                # ── Wire up ──────────────────────
                 def make_handler(level_idx):
                     def handler(user_msg, unlocked):
                         reply, status, lore, new_unlocked, prog = play_level(
                             user_msg, level_idx, unlocked
                         )
-                        # Also get full trace for the accordion
                         trace = {}
                         if user_msg and user_msg.strip():
                             res = guard.analyze(user_msg)
@@ -572,21 +558,21 @@ with gr.Blocks(css=CUSTOM_CSS, title="ArabGuard Breach — اختراق الحا
                     outputs=[user_input, status_out, reply_out, lore_out, trace_out],
                 )
 
-    # ── Victory panel ────────────────────────────
     gr.Markdown("---")
 
-    with gr.Accordion("🏆 الخاتمة — اقرأ بعد اختراق المستويات الخمسة", open=False):
+    with gr.Accordion("🏆  الخاتمة — اقرأ بعد اختراق المستويات الخمسة", open=False):
         victory_out = gr.HTML(value="")
 
         def show_victory(unlocked):
             if len(unlocked) >= 5:
                 return victory_html()
             missing = 5 - len(unlocked)
-            return f"""
-<div style='direction:rtl;font-family:Tajawal,sans-serif;color:#3A5A8A;
-            text-align:center;padding:16px;font-size:14px;'>
-  لا تزال {missing} مستوى/مستويات بانتظار الاختراق...
-</div>"""
+            return (
+                f'<div style="direction:rtl;font-family:Tajawal,sans-serif;'
+                f'color:#7AAAD8;text-align:center;padding:18px;font-size:15px;">'
+                f'لا تزال <span style="color:#FF9A50;font-weight:700;">{missing}</span>'
+                f' مستوى/مستويات بانتظار الاختراق...</div>'
+            )
 
         gr.Button("كشف الحقيقة الكاملة ✨", variant="primary").click(
             fn=show_victory,