/* ============================================================
   CELESTIAL MASTER — V3 DESIGN SYSTEM (locked)
   Master's Academy — أكاديمية الربان
   ============================================================ */

:root{
  --navy-900:#0a1628; --navy-800:#0f1f3a; --navy-700:#1a2f4f;
  --gold:#d4a857; --gold-400:#e6c074; --gold-300:#f0d28e;
  --success:#27ae60; --danger:#e74c3c; --warning:#f39c12;
  --cyan:#4dd0e1; /* phonetic_ar color */

  --ink:#e8ecf4;
  --ink-dim:#93a3bc;
  --glass-bg:rgba(15,31,58,.55);
  --glass-border:rgba(212,168,87,.18);
  --glass-border-strong:rgba(212,168,87,.42);
  --radius:16px;
  --radius-sm:10px;

  --font-ar:'Cairo',sans-serif;
  --font-en:'Cormorant Garamond',serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html{scroll-behavior:smooth}

body{
  font-family:var(--font-ar);
  background:
    radial-gradient(1200px 800px at 80% -10%, #14294a 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 110%, #10223f 0%, transparent 55%),
    var(--navy-900);
  color:var(--ink);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  direction:rtl;
  unicode-bidi:plaintext;
  line-height:1.7;
}

/* English terms inline inside Arabic text */
.en{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.92em;
  color:var(--gold-300);
}
.en-serif{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
  font-family:var(--font-en);
  color:var(--gold-300);
}

/* phonetic_ar — نطق عربي بالتقطيع */
.phonetic{
  color:var(--cyan);
  font-size:.85em;
  font-weight:600;
  letter-spacing:.5px;
}

.mono{font-family:var(--font-mono);direction:ltr;unicode-bidi:isolate}

/* ---------- Fixed deco: starfield (CSS only, low cost) ---------- */
.deco-starfield{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 12%, rgba(240,210,142,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 81%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 28%, rgba(77,208,225,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 60%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 15%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 88%, rgba(240,210,142,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 92%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 90%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 30%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 48%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 7%, rgba(255,255,255,.6) 50%, transparent 51%);
  opacity:.5;
  animation:starTwinkle 9s ease-in-out infinite alternate;
}
@keyframes starTwinkle{
  from{opacity:.35}
  to{opacity:.6}
}

/* ---------- Fixed deco: radar sweep (60s rotation) ---------- */
.deco-radar{
  position:fixed;z-index:0;pointer-events:none;
  width:130vmax;height:130vmax;
  left:50%;top:50%;
  margin:-65vmax 0 0 -65vmax;
  border-radius:50%;
  /* الحلقات ثابتة — لا تدور (توفير GPU) */
  background:repeating-radial-gradient(circle at center, transparent 0 119px, rgba(212,168,87,.05) 119px 120px);
  opacity:.5;
}
/* شعاع الرادار فقط هو الذي يدور — طبقة مركّبة خفيفة */
.deco-radar::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(212,168,87,.10) 0deg, transparent 70deg, transparent 360deg);
  animation:radarSweep 60s linear infinite;
  will-change:transform;
}
@keyframes radarSweep{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .deco-radar,.deco-radar::before,.deco-starfield{animation:none}
}

/* ---------- App root ---------- */
.app-root{
  position:relative;z-index:1;
  max-width:860px;
  margin:0 auto;
  padding:16px 16px calc(28px + env(safe-area-inset-bottom));
}

/* ---------- Glassmorphism panel ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}

/* ---------- Typography ---------- */
h1,h2,h3{font-weight:700;line-height:1.35}
.title-en{
  font-family:var(--font-en);
  direction:ltr;unicode-bidi:isolate;
  font-weight:600;
  letter-spacing:1px;
  color:var(--gold);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ar);font-weight:700;font-size:1rem;
  color:var(--navy-900);
  background:linear-gradient(135deg,var(--gold-300),var(--gold));
  border:none;border-radius:var(--radius-sm);
  padding:12px 20px;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 18px rgba(212,168,87,.25);
}
.btn:active{transform:scale(.97)}
.btn-ghost{
  background:transparent;
  color:var(--gold-300);
  border:1px solid var(--glass-border-strong);
  box-shadow:none;
}
.btn-block{width:100%}

/* ---------- Progress bars ---------- */
.pbar{
  height:8px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.08);
}
.pbar>span{
  display:block;height:100%;width:0%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold-300));
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.pbar.green>span{background:linear-gradient(90deg,#1e8a4c,var(--success))}
.pbar.yellow>span{background:linear-gradient(90deg,#c8860d,var(--warning))}
.pbar.blue>span{background:linear-gradient(90deg,#2a9dab,var(--cyan))}

/* ---------- Utility ---------- */
.dim{color:var(--ink-dim)}
.gold{color:var(--gold-300)}
.center{text-align:center}
.hidden{display:none!important}


/* ============ وضع الجهاز (P11): أداء فوق البهرجة ============
   blur فوق خلفية متحركة = إعادة رسم كل إطار — نستبدله بتعبئة أكثف
   ووميض النجوم يتوقف؛ شعاع الرادار (البصمة) يبقى */
.cm-native .glass{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:rgba(13,27,50,.92);
}
.cm-native .deco-starfield{animation:none;opacity:.45}