/* ════════════════════════════════════════════════════════════════
   ABJAD — Identity Override (v6.0 — Complete & Safe)
   ────────────────────────────────────────────────────────────────
   ✓ كل تفاصيل الهوية المتفق عليها
   ✓ بدون لمس عناصر اللعبة الديناميكية (.scoreboard, phase-*, hidden)
   ✓ بدون transition: all
   ✓ Responsive كامل + safe areas للأيفون
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1) DARK THEME
   ════════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="dark"] {
  --bg:           #07090C !important;
  --bg-grad-1:    #0F1620 !important;
  --bg-grad-2:    #07090C !important;
  --surface-1:    #10171F !important;
  --surface-2:    #0C1218 !important;
  --surface-3:    #1A2530 !important;
  --border:       rgba(240, 244, 248, 0.08) !important;
  --border-strong:rgba(240, 244, 248, 0.16) !important;

  --text:         #F0F4F8 !important;
  --text-soft:    #B0B8C0 !important;
  --text-muted:   #7A8B95 !important;
  --text-faded:   rgba(240, 244, 248, 0.20) !important;

  --neon:         #38D6FF !important;
  --neon-soft:    #5CE5FF !important;
  --neon-deep:    #1FA8D6 !important;
  --neon-glow:    rgba(56, 214, 255, 0.40) !important;
  --neon-trail:   rgba(56, 214, 255, 0.10) !important;

  --danger:       #38D6FF !important;
  --danger-soft:  #5CE5FF !important;
  --danger-glow:  rgba(56, 214, 255, 0.45) !important;

  --success:      #38D6FF !important;
  --warning:      #FFB87A !important;
  --info:         #38D6FF !important;

  --mvp-bg:       rgba(56, 214, 255, 0.18);
  --mvp-text:     #38D6FF;
}


/* ════════════════════════════════════════════════════════════════
   2) LIGHT THEME
   ════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  --bg:           #FCE4D0 !important;
  --bg-grad-1:    #FFF5EC !important;
  --bg-grad-2:    #F5C9A5 !important;
  --surface-1:    #FFFFFF !important;
  --surface-2:    #FFFFFF !important;
  --surface-3:    #FFFFFF !important;
  --border:       rgba(123, 94, 168, 0.15) !important;
  --border-strong:rgba(123, 94, 168, 0.25) !important;

  --text:         #3A2840 !important;
  --text-soft:    #5C4570 !important;
  --text-muted:   #9A8598 !important;
  --text-faded:   rgba(58, 40, 64, 0.20) !important;

  --neon:         #7B5EA8 !important;
  --neon-soft:    #B888E8 !important;
  --neon-deep:    #5C4288 !important;
  --neon-glow:    rgba(184, 136, 232, 0.40) !important;
  --neon-trail:   rgba(184, 136, 232, 0.12) !important;

  --danger:       #FF9148 !important;
  --danger-soft:  #FFB87A !important;
  --danger-glow:  rgba(255, 145, 72, 0.40) !important;

  --success:      #7B5EA8 !important;
  --warning:      #FF9148 !important;
  --info:         #7B5EA8 !important;

  --mvp-bg:       rgba(184, 136, 232, 0.25);
  --mvp-text:     #7B5EA8;
}


/* ════════════════════════════════════════════════════════════════
   3) BODY BACKGROUND + CITY SILHOUETTE
   ════════════════════════════════════════════════════════════════ */
body {
  background: var(--bg) !important;
  background-image: linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2)) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
}

/* html يأخذ نفس الخلفية لمنع الخلفية السوداء عند scroll */
html {
  background: var(--bg) !important;
  background-image: linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2)) !important;
  min-height: 100vh !important;
}

body::before {
  display: none !important;
}

/* DARK: Misty City Horizon */
:root[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='xMidYEnd slice'><defs><linearGradient id='f' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%230F1825' stop-opacity='0.6'/><stop offset='100%' stop-color='%23000510' stop-opacity='0.9'/></linearGradient></defs><g fill='url(%23f)'><rect x='0' y='120' width='45' height='120'/><rect x='48' y='100' width='38' height='140'/><rect x='90' y='135' width='32' height='105'/><rect x='125' y='105' width='50' height='135'/><rect x='180' y='130' width='40' height='110'/><rect x='225' y='110' width='45' height='130'/><rect x='275' y='140' width='35' height='100'/><rect x='313' y='115' width='42' height='125'/><rect x='358' y='135' width='38' height='105'/><rect x='400' y='105' width='48' height='135'/><rect x='452' y='140' width='32' height='100'/><rect x='488' y='120' width='44' height='120'/><rect x='535' y='135' width='36' height='105'/><rect x='575' y='110' width='42' height='130'/><rect x='620' y='140' width='34' height='100'/><rect x='658' y='115' width='46' height='125'/><rect x='708' y='135' width='36' height='105'/><rect x='748' y='105' width='48' height='135'/><rect x='800' y='140' width='32' height='100'/><rect x='836' y='120' width='42' height='120'/><rect x='882' y='135' width='36' height='105'/><rect x='922' y='110' width='44' height='130'/><rect x='970' y='140' width='32' height='100'/><rect x='1006' y='115' width='46' height='125'/><rect x='1056' y='135' width='34' height='105'/><rect x='1094' y='105' width='48' height='135'/><rect x='1146' y='130' width='54' height='110'/></g><g opacity='0.7'><rect x='22' y='150' width='2' height='2' fill='%23FFB87A'/><rect x='68' y='130' width='2' height='2' fill='%2338D6FF'/><rect x='140' y='145' width='2' height='2' fill='%23FFB87A'/><rect x='195' y='150' width='2' height='2' fill='%2338D6FF'/><rect x='245' y='135' width='2' height='2' fill='%23FFB87A'/><rect x='290' y='160' width='2' height='2' fill='%2338D6FF'/><rect x='330' y='140' width='2' height='2' fill='%23FFB87A'/><rect x='380' y='155' width='2' height='2' fill='%2338D6FF'/><rect x='420' y='130' width='2' height='2' fill='%23FFB87A'/><rect x='470' y='160' width='2' height='2' fill='%2338D6FF'/><rect x='510' y='140' width='2' height='2' fill='%23FFB87A'/><rect x='555' y='150' width='2' height='2' fill='%2338D6FF'/><rect x='595' y='135' width='2' height='2' fill='%23FFB87A'/><rect x='640' y='160' width='2' height='2' fill='%2338D6FF'/><rect x='680' y='140' width='2' height='2' fill='%23FFB87A'/><rect x='730' y='155' width='2' height='2' fill='%2338D6FF'/><rect x='770' y='130' width='2' height='2' fill='%23FFB87A'/><rect x='820' y='160' width='2' height='2' fill='%2338D6FF'/><rect x='860' y='140' width='2' height='2' fill='%23FFB87A'/><rect x='900' y='150' width='2' height='2' fill='%2338D6FF'/><rect x='945' y='135' width='2' height='2' fill='%23FFB87A'/><rect x='985' y='160' width='2' height='2' fill='%2338D6FF'/><rect x='1030' y='140' width='2' height='2' fill='%23FFB87A'/><rect x='1075' y='155' width='2' height='2' fill='%2338D6FF'/><rect x='1115' y='130' width='2' height='2' fill='%23FFB87A'/><rect x='1165' y='150' width='2' height='2' fill='%2338D6FF'/></g></svg>");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
}

/* LIGHT: Apricot City Silhouette */
:root[data-theme="light"] body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 180' preserveAspectRatio='xMidYEnd slice'><defs><linearGradient id='c' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23E8956B' stop-opacity='0'/><stop offset='100%' stop-color='%23D17040' stop-opacity='1'/></linearGradient></defs><g fill='url(%23c)'><rect x='0' y='80' width='45' height='100'/><rect x='48' y='60' width='38' height='120'/><rect x='90' y='90' width='32' height='90'/><rect x='125' y='55' width='50' height='125'/><rect x='180' y='75' width='40' height='105'/><rect x='225' y='65' width='45' height='115'/><rect x='275' y='95' width='35' height='85'/><rect x='313' y='70' width='42' height='110'/><rect x='358' y='85' width='38' height='95'/><rect x='400' y='60' width='48' height='120'/><rect x='452' y='90' width='32' height='90'/><rect x='488' y='70' width='44' height='110'/><rect x='535' y='85' width='36' height='95'/><rect x='575' y='65' width='42' height='115'/><rect x='620' y='90' width='34' height='90'/><rect x='658' y='75' width='46' height='105'/><rect x='708' y='85' width='36' height='95'/><rect x='748' y='60' width='48' height='120'/><rect x='800' y='90' width='32' height='90'/><rect x='836' y='70' width='42' height='110'/><rect x='882' y='85' width='36' height='95'/><rect x='922' y='65' width='44' height='115'/><rect x='970' y='90' width='32' height='90'/><rect x='1006' y='75' width='46' height='105'/><rect x='1056' y='85' width='34' height='95'/><rect x='1094' y='55' width='48' height='125'/><rect x='1146' y='80' width='54' height='100'/></g></svg>");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
}


/* ════════════════════════════════════════════════════════════════
   4) BRAND LOGO — "أبجد" with refined underline
   ════════════════════════════════════════════════════════════════ */
.abjad-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  user-select: none;
}

.abjad-logo__text {
  font-family: 'Tajawal', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1;
  display: flex;
  gap: 2px;
}

.abjad-logo__underline {
  position: relative;
  width: 100%;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.abjad-logo__underline::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1.5px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--neon) 50%,
    transparent 100%
  );
  border-radius: 1px;
}

.abjad-logo__underline::after {
  content: '';
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon-glow);
}

.brand-mark {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════
   5) CURRENT LETTER — لون الحرف + الهالة (متمركزة على الحرف بدقة)
   ════════════════════════════════════════════════════════════════ */
.write-letter-value,
.letter-display,
.round-letter,
[id="letter-display"],
[id="write-letter-display"] {
  color: var(--neon) !important;
  font-weight: 800 !important;
  /* الهالة الكبيرة تطلع من خلال text-shadow متعددة */
  text-shadow: 
    0 0 14px var(--neon-glow),
    0 0 30px var(--neon-glow),
    0 0 60px var(--neon-glow) !important;
  position: relative !important;
  z-index: 2;
  display: inline-block !important;
  /* خط الضوء يكون تحت الحرف نفسه */
  padding-bottom: 12px !important;
}

/* خط الضوء تحت الحرف (مرتبط بالحرف، مو بالـ bar) */
.write-letter-value::after,
[id="write-letter-display"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 1.5px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--neon) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* الـ bar نفسه - بدون أي أثر */
.write-letter-bar {
  position: relative !important;
}


/* ════════════════════════════════════════════════════════════════
   6) INPUT FIELDS — حقول الإجابات (الطافي بهالة)
   ════════════════════════════════════════════════════════════════ */
.field-input {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
}

.field-input:focus {
  border-color: var(--neon) !important;
  border-width: 1.5px !important;
  box-shadow: 
    0 4px 12px var(--neon-glow),
    0 0 0 4px var(--neon-trail) !important;
  outline: none !important;
}


/* ════════════════════════════════════════════════════════════════
   7) STOP BUTTON
   ════════════════════════════════════════════════════════════════ */
.btn-danger,
button[id*="stop"]:not([id*="stop-overlay"]) {
  background: var(--danger) !important;
  color: var(--bg) !important;
  font-weight: 900 !important;
  border: none !important;
  border-radius: 26px !important;
  box-shadow: 0 6px 20px var(--danger-glow) !important;
}

:root[data-theme="light"] .btn-danger,
:root[data-theme="light"] button[id*="stop"]:not([id*="stop-overlay"]) {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #FFB87A 0%, #FF9148 100%) !important;
}

.btn-danger:hover {
  transform: translateY(-2px);
}


/* ════════════════════════════════════════════════════════════════
   8) MVP BADGE
   ════════════════════════════════════════════════════════════════ */
.badge--mvp,
.mvp-badge {
  background: var(--mvp-bg) !important;
  color: var(--mvp-text) !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
}


/* ════════════════════════════════════════════════════════════════
   9) SCOREBOARD RANK COLORS — جدول النقاط الملوّن
   ────────────────────────────────────────────────────────────
   مهم جداً: لا نلمس .scoreboard container أبداً (يبقى شفاف)
   نلوّن فقط أرقام/نقاط البطاقات داخله (.score-card, .sc-pts)
   هذا يضيف الفخامة بدون ظهور الجدول الفارغ للمضيف
   ════════════════════════════════════════════════════════════════ */

/* البطاقة الأولى - ذهبي */
.scoreboard .score-card:nth-child(1) .sc-pts {
  background: linear-gradient(135deg, #F5D680 0%, #B89050 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* البطاقة الثانية - فضي */
.scoreboard .score-card:nth-child(2) .sc-pts {
  background: linear-gradient(135deg, #D8DDE4 0%, #9AA3AE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* البطاقة الثالثة - برونزي */
.scoreboard .score-card:nth-child(3) .sc-pts {
  background: linear-gradient(135deg, #D4956A 0%, #8B6037 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}


/* ════════════════════════════════════════════════════════════════
   10) USED LETTERS GRID — الحروف المستخدمة والمختارة في الشبكة
   ────────────────────────────────────────────────────────────
   نستهدف فقط .lg-cell.used و .lg-cell.selected
   لا نلمس .letter-grid container
   ════════════════════════════════════════════════════════════════ */

/* الحروف المستخدمة - باهتة */
.lg-cell.used {
  color: var(--text-faded) !important;
  opacity: 0.4;
}

/* الحرف المختار - واضح بلون الثيم مع توهج */
.lg-cell.selected {
  color: var(--neon) !important;
  font-weight: 800 !important;
  background: rgba(56, 214, 255, 0.12) !important;
  border-color: var(--neon) !important;
  box-shadow: 
    0 0 0 1px var(--neon),
    0 0 16px var(--neon-glow) !important;
  filter: drop-shadow(0 0 6px var(--neon-glow));
}

/* في الثيم الفاتح - استخدام لون الموف */
:root[data-theme="light"] .lg-cell.selected {
  background: rgba(184, 136, 232, 0.18) !important;
  color: var(--neon-deep) !important;
  border-color: var(--neon) !important;
  box-shadow: 
    0 0 0 1px var(--neon),
    0 0 16px var(--neon-glow) !important;
}


/* ════════════════════════════════════════════════════════════════
   11) RESPONSIVE — Mobile (≤ 768px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  :root[data-theme="dark"] body::after {
    height: 160px;
  }
  
  :root[data-theme="light"] body::after {
    height: 120px;
  }

  .abjad-logo__text {
    font-size: 20px;
  }

  /* الهالة أصغر في الموبايل */
  .write-letter-value,
  .letter-display,
  [id="write-letter-display"] {
    text-shadow: 
      0 0 10px var(--neon-glow),
      0 0 20px var(--neon-glow),
      0 0 40px var(--neon-glow) !important;
  }

  .field-input {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 380px) {
  .abjad-logo__text {
    font-size: 18px;
  }

  .write-letter-value,
  .letter-display,
  [id="write-letter-display"] {
    text-shadow: 
      0 0 8px var(--neon-glow),
      0 0 16px var(--neon-glow),
      0 0 30px var(--neon-glow) !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   12) SAFE AREAS for iPhone notch/home indicator
   ════════════════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .sticky-bottom,
  .fixed-bottom {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}


/* ════════════════════════════════════════════════════════════════
   13) SCROLLBAR + SELECTION + TOUCH
   ════════════════════════════════════════════════════════════════ */
* {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--neon);
  color: var(--bg);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-2);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neon);
}


/* ════════════════════════════════════════════════════════════════
   ✅ ما يحتويه هذا الملف (شامل):
   ────────────────────────────────────────────────────────────
   1. ألوان الثيمين (موف للفاتح + أزرق للغامق)
   2. خلفية متدرّجة + مدينة silhouette (الثيمين)
   3. اللوقو "أبجد" + خط منحني + نقطة
   4. الحرف الكبير الموف/الأزرق مع توهج
   5. المنصّة (الهالة + خط الضوء) على write-letter-bar
   6. حقول الإجابات بـ halo عند التركيز
   7. زر STOP بلون كل ثيم
   8. MVP Badge
   9. جدول النقاط بألوان المراكز (ذهبي/فضي/برونزي)
   10. الحروف المستخدمة في الشبكة (باهتة)
   11. Responsive للجوال (768px و 380px)
   12. Safe areas للأيفون
   13. Scrollbar + Selection styling

   ❌ ما لا يلمسه (لحماية اللعبة):
   - .scoreboard container (يبقى شفاف)
   - #phase-spin, #phase-write, #phase-results, #phase-gameover
   - .letter-grid, .letter-grid-wrap
   - .hidden
   - transition: all
   ════════════════════════════════════════════════════════════════ */