:root {
  --bg: #0f172a;
  --card: #1e293b;
  --blue: #0f6fff;
  --lightblue: #38bdf8;
  --red: #dc2626;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --yellow: #facc15;
  --repeat-blue: #3b82f6;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); font-family: Tajawal, system-ui, -apple-system, Segoe UI, sans-serif; color: var(--text); text-align: center; padding-bottom: 95px; }
.topbar { padding: .9rem .5rem .2rem; background: rgba(15,23,42,.7); backdrop-filter: blur(7px); position: sticky; top: 0; z-index: 20; }
.title-box { display: inline-block; background: rgba(248,250,252,.04); padding: .4rem 1.1rem .65rem; border-radius: 18px; border:1px solid rgba(148,163,184,.15); }
.main-title { margin:0; font-size:28px; color:#fff; font-weight:800; letter-spacing:.2px; }
.sub-title { margin:.15rem 0 .25rem; line-height:1.25; }
.name-red { color: var(--red); font-weight:700; font-size:1.05rem; }
.phone-white { color:#fff !important; font-weight:700; direction:ltr; text-shadow:0 0 6px rgba(255,255,255,.35); }
a[href^="tel"] { color:#fff !important; text-decoration:none !important; }
.unit-title { margin:.1rem 0; color: var(--red); font-weight:700; }
.hint { margin:.1rem 0; color: var(--muted); }
.controls { display:flex; flex-direction:column; align-items:center; gap:.7rem; margin:1rem auto; }
.controls .row { display:grid; grid-template-columns:repeat(2,180px); grid-auto-rows:50px; gap:.8rem; }
.btn-test,.score-pill,.btn-random,.btn-repeat { width:180px;height:50px;border-radius:999px;font-weight:800;font-size:16px;border:none;cursor:pointer;transition:transform .15s,opacity .15s,box-shadow .15s;box-shadow:0 8px 22px rgba(0,0,0,.16); }
.btn-test:hover,.score-pill:hover,.btn-random:hover,.btn-repeat:hover { transform:translateY(-1px); opacity:.96; }
.btn-test{background:#f97316;color:#fff}.score-pill{background:#16a34a;color:#fff}.btn-random{background:var(--yellow);color:#1f2937}.btn-repeat{background:var(--repeat-blue);color:#fff}
.words-wrap{max-width:620px;margin:0 auto;padding:0 .6rem}
.word{background:var(--card);border-radius:16px;margin:.55rem auto;padding:.65rem .6rem .8rem;box-shadow:0 6px 18px rgba(0,0,0,.12);border:1px solid rgba(148,163,184,.08)}
.word .en{display:flex;gap:.55rem;justify-content:center;align-items:center;flex-direction:row-reverse}
.word .num{color:var(--lightblue);font-weight:800;font-size:1.1rem}
.word .en-text{font-weight:800;font-size:1.85rem;color:#bfdbfe;text-shadow:0 1px 0 rgba(0,0,0,.2);transition:transform .12s,filter .12s}
.word .en-text.speaking{transform:scale(1.03);filter:drop-shadow(0 0 10px rgba(56,189,248,.55))}
.word .ar{font-size:1.04rem;margin-top:.45rem;color:#e2e8f0;font-weight:600}
.input-word{width:100%;margin-top:.5rem;padding:.6rem .65rem;border-radius:12px;border:2px solid #38bdf8;direction:ltr;background:#dbeafe;color:#0f3ccc;font-weight:800;font-size:1.22rem;text-align:center;box-shadow:0 0 6px rgba(59,130,246,.3)}
.input-word:focus{outline:none;border-color:#60a5fa;background:#eff6ff;box-shadow:0 0 10px rgba(96,165,250,.6)}
.correct-answer{margin-top:.4rem;font-weight:800;font-size:1.6rem;color:#f43f5e}
.bottom-nav{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(15,23,42,.55);display:flex;gap:1rem;align-items:center;padding:.5rem 1.3rem;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(8px);border:1px solid rgba(148,163,184,.15)}
.nav-btn{background:var(--blue);color:#fff;border:none;padding:.4rem .85rem;border-radius:999px;font-weight:700}
.page-info{font-weight:700;color:#e2e8f0;min-width:80px;display:inline-block}
.excellent{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle,rgba(15,23,42,0) 0%,rgba(15,23,42,.35) 65%,rgba(15,23,42,.65) 100%);z-index:999;font-size:clamp(2.5rem,6vw,4rem);font-weight:900;color:#fef9c3;text-shadow:0 0 10px rgba(250,204,21,.9),0 0 24px rgba(250,204,21,.8);animation:popIn 1.1s ease,goldPulse 2.4s ease-in-out infinite}
.hidden{display:none !important}
@keyframes popIn{0%{transform:scale(.4);opacity:0}40%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes goldPulse{0%{filter:drop-shadow(0 0 9px #fde68a)}50%{filter:drop-shadow(0 0 18px #f59e0b)}100%{filter:drop-shadow(0 0 9px #fde68a)}}
button{-webkit-tap-highlight-color:transparent}