:root {
  --bg: #0f172a;
  --card: #1e293b;
  --blue: #0f6fff;
  --lightblue: #38bdf8;
  --red: #dc2626;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --yellow: #facc15;
  --repeat-blue: #3b82f6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  font-family: "Tajawal", system-ui, sans-serif;
  color: var(--text);
  text-align: center;
  padding-bottom: 90px;
}
.main-title { color: var(--blue); font-weight: 800; margin: 0; font-size: 28px; }
.name-red { color: var(--red); font-weight: 700; }
.phone-blue { color: var(--lightblue); font-weight: 700; direction: ltr; }
.unit-title { color: var(--red); font-weight: 700; }
.hint { color: var(--muted); margin: 0.2rem; }

.btn-random { background: var(--yellow); color: #1f2937; border: none; border-radius: 50px; padding: .4rem 1rem; font-weight: 700; }
.btn-repeat { background: var(--repeat-blue); color: #fff; border: none; border-radius: 50px; padding: .4rem 1rem; font-weight: 700; }
.btn-test { background: #f97316; color: #fff; border: none; border-radius: 50px; padding: .4rem 1rem; font-weight: 700; }
.score-pill { background: #16a34a; color: #fff; border: none; border-radius: 50px; padding: .4rem 1rem; font-weight: 700; }

.word { background: var(--card); border-radius: 1rem; margin: .5rem auto; padding: .6rem; max-width: 480px; }
.word .en { display: flex; gap: .6rem; justify-content: center; align-items: center; flex-direction: row-reverse; }
.word .num { color: var(--lightblue); font-weight: 700; font-size: 1.05rem; }
.word .en-text { font-weight: 700; font-size: 1.8rem; color: #bfdbfe; }
.word .ar { color: #e2e8f0; }
.correct-answer { font-size: 1.6rem; color: #f43f5e; font-weight: bold; }

.bottom-nav {
  position: fixed;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 1rem;
  background: rgba(15,23,42,.5);
  border-radius: 50px;
  padding: .4rem 1rem;
  backdrop-filter: blur(6px);
}
.nav-btn { background: var(--blue); color: #fff; border: none; border-radius: 999px; padding: .4rem .8rem; font-weight: 600; }
.page-info { color: #e2e8f0; }

.excellent {
  position: fixed; inset: 0; display: grid; place-items: center;
  font-size: 4rem; font-weight: 800;
  color: #fef9c3;
  background: rgba(0,0,0,.4);
  animation: pulse 2.4s infinite;
}
.hidden { display: none; }

@keyframes pulse {
  0%,100% { text-shadow: 0 0 10px #fde68a; }
  50% { text-shadow: 0 0 24px #fbbf24; }
}