/* ===========================
   🎨 ROOT VARIABLES & BASE
=========================== */
:root{
  --bg:#0f1220;
  --paper:#151932;
  --ink:#e9ecff;
  --muted:#b9c0ff;
  --accent:#6ea8ff;
  --accent-2:#ff7ad9;
  --ok:#22c55e;
  --bad:#ef4444;
  --pill:#243056;
  --border:#1f2442;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  font-size:20px;
}

@media (max-width:640px){ :root{ font-size:19px; } }
@media (max-width:460px){ :root{ font-size:18px; } }

*{ box-sizing:border-box; }

html, body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial;
  overflow-x:hidden;
  overflow-y:auto;
}

/* ===========================
   🟦 TOP BAR
=========================== */
.topbar{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .9rem;
  background:linear-gradient(90deg,#121735,#191f45 50%,#121735);
  border-bottom:1px solid var(--border);
}
#menuBtn{
  width:2.2rem; height:2.2rem;
  border-radius:.6rem; border:1px solid var(--border);
  background:var(--pill); color:var(--ink);
  font-size:1.1rem; cursor:pointer;
}
.app-title{ margin:0; font-size:1.1rem; }
.lang-wrap{ margin-left:auto; display:flex; gap:.4rem; }
#langSelect{
  background:var(--pill); color:var(--ink);
  border:1px solid var(--border);
  border-radius:.6rem; padding:.25rem .4rem;
}

/* ===========================
   📄 CONTENT
=========================== */
.content{
  max-width:900px; margin:1rem auto;
  padding:0 1rem 2rem;
}
.hint{
  opacity:.8; color:var(--muted);
  background:var(--paper);
  border:1px dashed var(--border);
  padding:1rem; border-radius:1rem;
  text-align:center;
}
#lessonView{
  min-height:300px;
  transition:opacity .25s ease;
}

/* ===========================
   📚 SIDEBAR
=========================== */
#backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.drawer{
  position:fixed; inset:0 auto 0 0;
  width:min(92vw,420px);
  background:linear-gradient(180deg,#131836,#0f1330);
  border-right:1px solid var(--border);
  transform:translateX(-100%);
  transition:transform .25s ease;
  z-index:600;
  display:flex; flex-direction:column;
}
.drawer.open{ transform:none; }
.drawer.open ~ #backdrop{ opacity:1; pointer-events:auto; }

.drawer-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:.8rem .9rem;
  border-bottom:1px solid var(--border);
  background:#111633;
}
.drawer-head h2{ margin:0; font-size:1.1rem; }
.drawer-head button{
  background:var(--pill); color:var(--ink);
  border:1px solid var(--border);
  border-radius:.5rem; padding:.25rem .5rem;
  cursor:pointer;
}

.toc{ padding:.6rem .8rem 1.2rem; overflow:auto; }
.unit{
  border:1px solid var(--border); border-radius:.8rem;
  background:var(--paper);
  padding:.6rem .6rem .3rem; margin-bottom:.7rem;
}
.unit h3{ margin:.2rem .2rem .6rem; color:var(--muted); }
.unit ul{ margin:0; padding:0; list-style:none; }
.unit li button{
  width:100%; text-align:left;
  padding:.6rem .7rem;
  border-radius:.55rem;
  border:1px solid var(--border);
  background:#0f1530; color:var(--ink);
  cursor:pointer;
}
.unit li button:hover{ outline:2px solid #28356c; }

/* ===========================
   🟪 READING + TRANSLATION
=========================== */
.reading-tools{
  display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem;
}
.pill{
  border:1px solid var(--border);
  background:var(--pill); color:var(--ink);
  border-radius:999px;
  padding:.4rem .8rem; cursor:pointer;
}
.sec-title{ margin:1.2rem 0 .4rem; color:var(--muted); }
.reading,.translation{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:.8rem; padding:1rem;
  white-space:pre-wrap;
  line-height:1.5;
  box-shadow:var(--shadow);
}

/* ===========================
   🧠 QUIZ SYSTEM
=========================== */
.quiz-sec #quiz{ display:grid; gap:.8rem; }
.question{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:.8rem;
  padding:.8rem;
}
.question .q-title{ margin:0 0 .5rem; font-weight:600; }

.options{
  display:flex; gap:.45rem; flex-wrap:wrap;
}
.options button{
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:.6rem;
  padding:.5rem .8rem;
  cursor:pointer;
  transition:.12s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.options button:nth-child(6n+1){ background:linear-gradient(135deg,#2563eb,#3b82f6);}
.options button:nth-child(6n+2){ background:linear-gradient(135deg,#10b981,#34d399);}
.options button:nth-child(6n+3){ background:linear-gradient(135deg,#f59e0b,#fbbf24);}
.options button:nth-child(6n+4){ background:linear-gradient(135deg,#ec4899,#f472b6);}
.options button:nth-child(6n+5){ background:linear-gradient(135deg,#8b5cf6,#a78bfa);}
.options button:nth-child(6n+6){ background:linear-gradient(135deg,#06b6d4,#22d3ee);}
.options button:hover{ transform:translateY(-1px); }
.options button:active{ transform:translateY(0); }
.options button.correct{
  box-shadow:0 0 0 2px rgba(34,197,94,.9),0 6px 20px rgba(34,197,94,.35);
  border-color:#22c55e;
}
.options button.wrong{
  box-shadow:0 0 0 2px rgba(239,68,68,.9),0 6px 20px rgba(239,68,68,.35);
  border-color:#ef4444;
}
.options button:disabled{
  opacity:.75; cursor:not-allowed;
}

/* ===========================
   🖍️ LETTER HIGHLIGHT
=========================== */
.letter{
  display:inline-block;
  transition:background .25s linear, color .25s linear;
  padding:0 .5px;
}
.active-letter{
  background:linear-gradient(90deg,#ffe066,#ffd54f,#ffca28);
  color:#000; border-radius:3px;
}

/* ===========================
   🎤 AUDIO RECORDER
=========================== */
.audio-recorder{
  margin:20px auto;
  padding:16px;
  background:rgba(240,240,240,.1);
  color:#fff; text-align:center;
  border-radius:12px;
}
.audio-recorder .controls{
  display:flex; justify-content:center; gap:8px;
  margin-top:10px;
}
.audio-recorder button{
  background:hotpink; border:none; color:white;
  padding:8px 14px;
  border-radius:10px; cursor:pointer;
}
.audio-recorder button:disabled{
  opacity:.5; cursor:not-allowed;
}
#recordIndicator{
  color:red; font-weight:bold; margin-top:10px;
}

/* ===========================
   📘 FOOTER NAV
=========================== */
#footer-nav{
  position:fixed; bottom:0; left:0; right:0;
  background:#fafafa;
  border-top:1px solid #ccc;
  display:flex; justify-content:center; gap:14px;
  padding:10px; z-index:999;
}
#footer-nav button{
  padding:8px 16px;
  font-size:1rem;
  background:#fff;
  border:1px solid #999;
  border-radius:10px;
  cursor:pointer;
  transition:.2s ease;
}
#footer-nav button:hover{
  background:#eee;
  transform:scale(1.05);
}
#lesson-counter{
  font-size:.95rem; color:#333;
}

/* ===========================
   🌟 SPLASH SCREEN (OLD STYLE)
=========================== */
body.splash-active{ overflow:hidden; }

/* خلفية شاشة الإقلاع القديمة */
#splash-screen{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  z-index:9999;
  background:
    radial-gradient(circle at center,#05060a 0%,#000 100%),
    linear-gradient(180deg,#080a12 0%,#000 100%);
  animation:fadeInSplash 1.5s ease forwards;
}
@keyframes fadeInSplash{
  from{ opacity:0; transform:scale(1.02); }
  to{ opacity:1; transform:scale(1); }
}
#splash-screen.hidden{
  opacity:0; pointer-events:none;
  transition:opacity 1s ease;
}

/* شعار MiM */
#mim-logo{
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:30px; z-index:10;
}
.top-row,.bottom-row{
  display:flex; gap:10px;
}
.win{
  width:50px; height:50px;
  background:linear-gradient(145deg,#ffcc99,#ffb3a3);
  border-radius:10px;
  animation:floatWin 3s infinite ease-in-out;
  box-shadow:0 0 20px rgba(255,200,150,.4);
}
.win1{ animation-delay:0s; }
.win2{ animation-delay:.4s; }
.win3{ animation-delay:.8s; }
.win4{ animation-delay:1.2s; }
@keyframes floatWin{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

/* شعار M */
#m-logo{
  font-size:5rem; font-weight:bold; margin-top:30px;
  color:#ffe9d6;
  text-shadow:0 0 40px #ffbda1,0 0 80px #ffcc99;
  animation:mPulse 3s infinite;
}
@keyframes mPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.9; transform:scale(1.08); }
}

/* شريط التحميل */
#loading-bar{
  width:220px; height:8px;
  border-radius:10px;
  background:rgba(255,255,255,.1);
  overflow:hidden; margin-top:20px;
}
#loading-progress{
  height:100%;
  background:linear-gradient(90deg,#ff9966,#ffcc99,#fff5e1);
  animation:loadBar 10s ease forwards;
}
@keyframes loadBar{
  from{ width:0%; }
  to{ width:100%; }
}

/* اللغات */
#splash-footer{
  position:absolute; bottom:3%;
  display:flex; gap:20px;
  justify-content:center;
}
.lang{
  font-size:1.2rem; color:#ffcc99;
  opacity:0;
  transition:opacity .6s ease;
  text-shadow:0 0 15px rgba(255,220,180,.6);
}
.lang.active{ opacity:1; }

/* الـ Canvas */
#splash-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  background:transparent;
  z-index:1;
}
.hidden { display: none !important; }