:root {
  --navy-950: #03111f;
  --navy-900: #071a2d;
  --navy-800: #0b2840;
  --navy-700: #123a57;
  --emerald-600: #059669;
  --emerald-500: #10b981;
  --emerald-300: #6ee7b7;
  --cyan-400: #22d3ee;
  --gold-500: #f59e0b;
  --gold-300: #fcd34d;
  --violet-500: #8b5cf6;
  --rose-500: #f43f5e;
  --white: #f8fafc;
  --muted: #a8bfd0;
  --panel: rgba(8, 31, 52, 0.88);
  --panel-soft: rgba(12, 48, 75, 0.68);
  --line: rgba(157, 220, 222, 0.18);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-arabic: "Amiri Quran", "Noto Naskh Arabic", "Traditional Arabic", "Scheherazade New", serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy-950); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--white);
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 16% 12%, rgba(16, 185, 129, .18), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(34, 211, 238, .13), transparent 30%),
    radial-gradient(circle at 50% 95%, rgba(139, 92, 246, .12), transparent 34%),
    linear-gradient(145deg, #03111f 0%, #071d31 55%, #03111f 100%);
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible {
  outline: 3px solid rgba(34, 211, 238, .7);
  outline-offset: 3px;
}

.ambient {
  position: fixed;
  width: 34rem;
  height: 34rem;
  border-radius: 999px;
  filter: blur(100px);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.ambient-a { background: #10b981; top: -15rem; left: -12rem; }
.ambient-b { background: #38bdf8; right: -18rem; bottom: -16rem; }

#app { position: relative; z-index: 1; min-height: 100vh; }
.screen { min-height: 100vh; padding: clamp(16px, 3vw, 34px); }
.shell { width: min(1240px, 100%); margin: 0 auto; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(3, 17, 31, .72);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 12px;
  z-index: 40;
}
.brand-mini { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-orb {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fef3c7, #34d399 42%, #047857 74%);
  color: #06251d; font-weight: 900; box-shadow: 0 0 28px rgba(52, 211, 153, .45);
}
.brand-mini strong { display: block; font-size: 14px; letter-spacing: .02em; }
.brand-mini span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.stat-pill, .icon-btn, .small-btn, .primary-btn, .secondary-btn, .danger-btn {
  border: 0; border-radius: 14px; cursor: pointer; color: var(--white);
}
.stat-pill { padding: 9px 12px; background: rgba(20, 58, 84, .78); border: 1px solid var(--line); font-size: 13px; }
.icon-btn { min-width: 42px; height: 42px; padding: 0 12px; background: rgba(22, 63, 91, .74); border: 1px solid var(--line); }
.icon-btn:hover, .small-btn:hover, .secondary-btn:hover { background: rgba(29, 78, 108, .9); transform: translateY(-1px); }

.panel {
  background: linear-gradient(145deg, rgba(8, 31, 52, .94), rgba(9, 38, 62, .82));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.soft-panel { background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* Splash */
.splash-screen { display: grid; place-items: center; overflow: hidden; position: relative; }
.splash-screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 42px 42px; opacity: .08;
}
.splash-card {
  width: min(1040px, 100%); min-height: min(720px, calc(100vh - 36px));
  display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; position: relative;
}
.splash-copy { padding: clamp(30px, 6vw, 76px); display: flex; flex-direction: column; justify-content: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 12px; border-radius: 999px; background: rgba(16,185,129,.13); border: 1px solid rgba(110,231,183,.25); color: var(--emerald-300); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.splash-copy h1 { font-size: clamp(38px, 6vw, 76px); line-height: .98; margin: 24px 0 18px; letter-spacing: -.04em; }
.splash-copy h1 span { color: var(--emerald-300); text-shadow: 0 0 30px rgba(110,231,183,.25); }
.splash-copy p { color: #bfd2df; line-height: 1.8; max-width: 610px; font-size: clamp(15px, 1.6vw, 18px); }
.splash-badges { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 30px; }
.splash-badges span { padding: 8px 11px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #dbeafe; font-size: 13px; }
.primary-btn, .secondary-btn, .danger-btn { min-height: 48px; padding: 12px 18px; font-weight: 800; transition: .2s ease; }
.primary-btn { background: linear-gradient(135deg, var(--emerald-500), #0891b2); box-shadow: 0 12px 30px rgba(16,185,129,.22); }
.primary-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.secondary-btn { background: rgba(20, 58, 84, .78); border: 1px solid var(--line); }
.danger-btn { background: rgba(244, 63, 94, .16); border: 1px solid rgba(244,63,94,.35); color: #fecdd3; }
.cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.splash-art { min-height: 620px; position: relative; background: linear-gradient(180deg, rgba(14,76,94,.22), rgba(7,18,35,.7)); overflow: hidden; }
.magic-moon { position: absolute; width: 230px; height: 230px; border-radius: 50%; top: 70px; right: 70px; background: radial-gradient(circle at 35% 35%, #fff9db, #6ee7b7 34%, #0e7490 70%); box-shadow: 0 0 90px rgba(110,231,183,.38); opacity: .9; }
.castle { position: absolute; bottom: 0; left: 5%; right: 5%; height: 56%; filter: drop-shadow(0 -10px 35px rgba(0,0,0,.45)); }
.tower { position: absolute; bottom: 0; width: 22%; background: linear-gradient(180deg, #194968, #071a2d); border: 1px solid rgba(125,211,252,.18); }
.tower::before { content: ""; position: absolute; left: -10%; right: -10%; top: -42px; height: 52px; clip-path: polygon(50% 0,100% 100%,0 100%); background: #0b2e49; }
.tower.one { height: 56%; left: 8%; } .tower.two { height: 76%; left: 39%; } .tower.three { height: 63%; right: 7%; }
.tower::after { content: ""; position: absolute; width: 28%; height: 16%; border-radius: 999px 999px 0 0; background: #fcd34d; box-shadow: 0 0 22px rgba(252,211,77,.42); left: 36%; top: 28%; }
.floating-book { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%) rotate(-4deg); width: 190px; height: 130px; perspective: 700px; }
.floating-book::before, .floating-book::after { content: ""; position: absolute; top: 0; width: 50%; height: 100%; background: linear-gradient(145deg,#fef3c7,#fde68a 40%,#d97706); border: 3px solid #92400e; box-shadow: 0 0 40px rgba(252,211,77,.32); }
.floating-book::before { left: 0; transform: skewY(-7deg); border-radius: 8px 2px 2px 16px; }
.floating-book::after { right: 0; transform: skewY(7deg); border-radius: 2px 8px 16px 2px; }
.book-mark { position: absolute; z-index: 3; inset: 30px 15px auto; text-align: center; color: #78350f; font-family: var(--font-arabic); font-size: 30px; font-weight: 800; }
.star { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff; animation: float 4s ease-in-out infinite; }
.star.s1 { top: 18%; left: 16%; } .star.s2 { top: 31%; right: 12%; animation-delay: .8s; } .star.s3 { top: 55%; left: 13%; animation-delay: 1.8s; } .star.s4 { top: 44%; right: 22%; animation-delay: 2.4s; }
@keyframes float { 50% { transform: translateY(-12px) scale(1.5); opacity: .55; } }

/* General page */
.page-content { padding: 28px 0 12px; }
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 20px 2px 24px; }
.page-title h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 46px); letter-spacing: -.035em; }
.page-title p { margin: 0; color: var(--muted); line-height: 1.6; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; }
.section-title h2 { margin: 0; font-size: 20px; }
.section-title span { color: var(--muted); font-size: 13px; }

/* Home */
.home-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; padding: clamp(24px, 4vw, 46px); overflow: hidden; position: relative; }
.home-hero::after { content:""; position:absolute; width:320px; height:320px; border-radius:50%; right:-100px; top:-100px; background:radial-gradient(circle,rgba(34,211,238,.2),transparent 65%); }
.home-copy h1 { font-size: clamp(34px, 5vw, 62px); line-height: 1.03; margin: 12px 0 14px; letter-spacing: -.04em; }
.home-copy h1 em { color: var(--gold-300); font-style: normal; }
.home-copy p { color: #c7dbe6; line-height: 1.75; max-width: 690px; }
.progress-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 24px; }
.metric { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid var(--line); }
.metric strong { display:block; font-size: 25px; } .metric span { color: var(--muted); font-size: 12px; }
.mentor-card { min-height: 330px; display: grid; place-items: center; position: relative; }
.mentor-card::before { content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(110,231,183,.28),transparent 68%); }
.mentor-figure { position: relative; width: 210px; height: 265px; z-index: 2; }
.mentor-head { position:absolute; width:112px; height:112px; border-radius:52% 52% 48% 48%; left:49px; top:22px; background:#f3c9a9; box-shadow:inset 0 -10px 0 rgba(112,52,35,.08); }
.mentor-hijab { position:absolute; width:162px; height:176px; left:24px; top:0; border-radius:50% 50% 42% 42%; background:linear-gradient(145deg,#0f766e,#0e4b62); clip-path:polygon(50% 0,92% 22%,100% 72%,76% 100%,50% 82%,24% 100%,0 72%,8% 22%); }
.mentor-face { position:absolute; z-index:3; left:68px; top:57px; width:75px; height:60px; }
.mentor-face::before, .mentor-face::after { content:""; position:absolute; width:11px; height:16px; border-radius:50%; background:#102a43; top:12px; }
.mentor-face::before { left:7px; } .mentor-face::after { right:7px; }
.mentor-smile { position:absolute; left:28px; bottom:7px; width:20px; height:10px; border-bottom:3px solid #8b3a3a; border-radius:50%; }
.mentor-body { position:absolute; left:26px; bottom:0; width:158px; height:145px; border-radius:70px 70px 22px 22px; background:linear-gradient(160deg,#0d9488,#0b4568); border:2px solid rgba(110,231,183,.25); }
.mentor-emblem { position:absolute; z-index:5; left:91px; top:170px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#4b3100; background:radial-gradient(circle,#fef3c7,#f59e0b); box-shadow:0 0 18px rgba(245,158,11,.5); font-family:var(--font-arabic); }
.speech-bubble { position:absolute; bottom:16px; left:16px; right:16px; z-index:4; padding:13px 15px; background:rgba(3,17,31,.82); border:1px solid var(--line); border-radius:16px; color:#d8edf3; font-size:13px; text-align:center; }
.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
.mode-card { padding:26px; position:relative; overflow:hidden; min-height:260px; cursor:pointer; transition:.22s ease; }
.mode-card:hover { transform:translateY(-4px); border-color:rgba(110,231,183,.42); }
.mode-card::after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-70px; bottom:-80px; background:radial-gradient(circle,rgba(110,231,183,.18),transparent 67%); }
.mode-card.quran::after { background:radial-gradient(circle,rgba(252,211,77,.18),transparent 67%); }
.mode-icon { width:62px; height:62px; border-radius:19px; display:grid; place-items:center; font-size:30px; background:rgba(16,185,129,.14); border:1px solid rgba(110,231,183,.22); }
.mode-card.quran .mode-icon { background:rgba(245,158,11,.13); border-color:rgba(252,211,77,.25); }
.mode-card h2 { margin:18px 0 8px; font-size:25px; } .mode-card p { color:var(--muted); line-height:1.65; max-width:540px; }
.mode-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.mode-meta span { font-size:12px; padding:7px 9px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--line); }

/* Academy */
.academy-layout { display:grid; grid-template-columns:1fr 1.05fr; gap:20px; }
.letter-panel, .lesson-panel, .quiz-panel, .trace-panel { padding:22px; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.tab-btn { border:1px solid var(--line); color:#cbe5ee; background:rgba(255,255,255,.035); padding:10px 13px; border-radius:12px; cursor:pointer; font-weight:700; }
.tab-btn.active { background:linear-gradient(135deg,rgba(16,185,129,.28),rgba(14,116,144,.28)); border-color:rgba(110,231,183,.42); color:#fff; }
.harakat-row { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.harakat-btn { min-width:88px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.04); color:#d9edf3; padding:10px 12px; cursor:pointer; }
.harakat-btn.active { background:rgba(245,158,11,.16); border-color:rgba(252,211,77,.36); color:#fff5c7; }
.letter-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; max-height:520px; overflow:auto; padding-right:4px; }
.letter-btn { aspect-ratio:1; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); color:#fff; font-family:var(--font-arabic); font-size:clamp(24px,3vw,38px); cursor:pointer; transition:.18s ease; }
.letter-btn:hover, .letter-btn.active { background:rgba(16,185,129,.16); border-color:rgba(110,231,183,.45); transform:translateY(-2px); }
.letter-stage { min-height:260px; display:grid; place-items:center; position:relative; overflow:hidden; border-radius:22px; background:radial-gradient(circle at center,rgba(16,185,129,.12),transparent 62%),rgba(3,17,31,.36); border:1px solid var(--line); }
.letter-stage::before { content:""; position:absolute; width:180px; height:180px; border-radius:50%; border:1px solid rgba(110,231,183,.17); box-shadow:0 0 50px rgba(16,185,129,.1); }
.big-letter { position:relative; z-index:2; font-family:var(--font-arabic); font-size:clamp(110px,17vw,210px); line-height:1; color:#fef9c3; text-shadow:0 0 28px rgba(252,211,77,.24); direction:rtl; }
.letter-name { text-align:center; margin-top:12px; } .letter-name h2 { margin:0 0 5px; font-size:26px; } .letter-name p { margin:0; color:var(--muted); }
.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.form-box { padding:13px 8px; text-align:center; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.form-box strong { display:block; font-family:var(--font-arabic); font-size:34px; min-height:50px; } .form-box span { color:var(--muted); font-size:11px; }
.info-note { margin-top:14px; padding:14px; border-radius:15px; background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.18); color:#ccecf6; line-height:1.6; font-size:13px; }
.lesson-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.quiz-card { min-height:430px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.quiz-prompt { color:var(--muted); margin-bottom:10px; }
.quiz-symbol { font-family:var(--font-arabic); font-size:100px; margin:6px 0 18px; }
.quiz-options { width:min(560px,100%); display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.quiz-option { border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.04); color:#fff; min-height:62px; padding:10px; cursor:pointer; font-weight:800; }
.quiz-option:hover { background:rgba(16,185,129,.12); }
.quiz-option.correct { background:rgba(16,185,129,.2); border-color:rgba(110,231,183,.55); }
.quiz-option.wrong { background:rgba(244,63,94,.16); border-color:rgba(251,113,133,.52); }
.feedback-line { min-height:28px; margin-top:14px; font-weight:800; color:var(--gold-300); }
.trace-wrap { display:grid; grid-template-columns:minmax(280px,1fr) minmax(230px,.6fr); gap:18px; align-items:start; }
.trace-board { position:relative; width:100%; aspect-ratio:1.25; min-height:340px; border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#f8fafc,#e2e8f0); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
#traceCanvas { width:100%; height:100%; touch-action:none; cursor:crosshair; display:block; }
.trace-guide { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-arabic); font-size:clamp(150px,23vw,290px); color:rgba(14,116,144,.15); pointer-events:none; direction:rtl; }
.trace-side { padding:18px; }
.trace-side h3 { margin-top:0; } .trace-side p { color:var(--muted); line-height:1.65; }
.trace-score { margin:16px 0; padding:14px; text-align:center; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.trace-score strong { display:block; font-size:30px; color:var(--gold-300); }

/* Surah selection */
.difficulty-block { margin-bottom:24px; }
.difficulty-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.difficulty-label { display:flex; align-items:center; gap:10px; }
.diff-dot { width:12px; height:12px; border-radius:50%; box-shadow:0 0 16px currentColor; }
.diff-easy { color:#34d399; } .diff-medium { color:#fbbf24; } .diff-hard { color:#fb7185; }
.surah-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.surah-card { padding:18px; cursor:pointer; transition:.2s ease; min-height:190px; position:relative; overflow:hidden; }
.surah-card:hover { transform:translateY(-4px); border-color:rgba(125,211,252,.35); }
.surah-number { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--gold-300); font-weight:900; }
.surah-arabic { font-family:var(--font-arabic); font-size:34px; text-align:right; direction:rtl; margin:12px 0 2px; }
.surah-card h3 { margin:0; font-size:18px; } .surah-card p { color:var(--muted); font-size:12px; line-height:1.5; }
.card-progress { margin-top:14px; height:7px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.card-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--emerald-500),var(--cyan-400)); border-radius:999px; }
.card-foot { display:flex; justify-content:space-between; margin-top:8px; color:var(--muted); font-size:11px; }

/* Quran Builder */
.builder-grid { display:grid; grid-template-columns:250px minmax(0,1fr); gap:18px; align-items:start; }
.companion-panel { padding:18px; position:sticky; top:94px; }
.companion-mini { height:240px; display:grid; place-items:center; position:relative; border-radius:20px; overflow:hidden; background:radial-gradient(circle,rgba(16,185,129,.16),transparent 65%),rgba(3,17,31,.35); }
.companion-mini .mentor-figure { transform:scale(.78); transform-origin:center; }
.companion-message { margin-top:12px; padding:13px; border-radius:15px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:#d7eaf1; line-height:1.55; font-size:13px; min-height:72px; }
.builder-main { padding:22px; }
.builder-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.builder-header h1 { margin:0 0 5px; font-size:28px; } .builder-header p { margin:0; color:var(--muted); }
.verse-progress { min-width:220px; }
.progress-label { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-bottom:7px; }
.progress-track { height:9px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.progress-track span { display:block; height:100%; background:linear-gradient(90deg,var(--gold-500),var(--emerald-500)); }
.ayah-panel { padding:18px; border-radius:20px; background:linear-gradient(145deg,rgba(245,158,11,.08),rgba(16,185,129,.06)); border:1px solid rgba(252,211,77,.18); }
.ayah-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ayah-meta strong { color:#fde68a; }
.audio-btn { border:1px solid rgba(252,211,77,.24); background:rgba(245,158,11,.1); color:#fef3c7; border-radius:12px; padding:9px 12px; cursor:pointer; }
.slot-title, .deck-title { margin:18px 0 10px; color:#ccecf6; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.slots, .deck { display:flex; flex-wrap:wrap; gap:10px; direction:rtl; min-height:72px; align-content:flex-start; }
.word-slot { min-width:90px; min-height:62px; border:2px dashed rgba(125,211,252,.28); border-radius:14px; background:rgba(2,16,29,.34); display:grid; place-items:center; padding:8px 12px; transition:.18s ease; }
.word-slot.drag-over { border-color:var(--cyan-400); background:rgba(34,211,238,.09); }
.word-slot.filled { border-style:solid; border-color:rgba(110,231,183,.28); }
.word-slot.wrong-slot { animation:shake .35s ease; border-color:rgba(251,113,133,.7); background:rgba(244,63,94,.08); }
.slot-index { color:rgba(255,255,255,.28); font-size:12px; direction:ltr; }
.word-card { border:1px solid rgba(110,231,183,.32); border-radius:14px; background:linear-gradient(145deg,rgba(16,185,129,.18),rgba(14,116,144,.14)); color:#fff9db; min-height:58px; padding:8px 15px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-arabic); font-size:25px; cursor:grab; box-shadow:0 8px 20px rgba(0,0,0,.16); user-select:none; transition:.18s ease; direction:rtl; }
.word-card:hover { transform:translateY(-2px); border-color:rgba(252,211,77,.46); }
.word-card.selected { border-color:var(--gold-300); box-shadow:0 0 0 3px rgba(252,211,77,.12),0 8px 20px rgba(0,0,0,.16); }
.word-card.placed { cursor:pointer; min-width:100%; }
.deck-empty { width:100%; text-align:center; color:var(--muted); padding:20px; border:1px dashed var(--line); border-radius:14px; }
.builder-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.builder-feedback { margin-top:16px; min-height:60px; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.035); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.builder-feedback.success { border-color:rgba(110,231,183,.4); background:rgba(16,185,129,.1); }
.builder-feedback.error { border-color:rgba(251,113,133,.38); background:rgba(244,63,94,.08); }
.builder-feedback strong { display:block; margin-bottom:3px; }
.builder-feedback span { color:var(--muted); font-size:13px; }
.correct-ayah { margin-top:14px; text-align:center; font-family:var(--font-arabic); font-size:clamp(28px,4vw,44px); line-height:1.8; color:#fff8ce; direction:rtl; text-shadow:0 0 22px rgba(252,211,77,.2); animation:glow 1.8s ease-in-out infinite alternate; }
@keyframes glow { to { text-shadow:0 0 32px rgba(110,231,183,.42); } }
@keyframes shake { 25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)} }

/* Modal / rewards / settings */
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; background:rgba(1,8,15,.78); backdrop-filter:blur(10px); }
.modal { width:min(620px,100%); max-height:90vh; overflow:auto; padding:26px; text-align:center; }
.modal h2 { margin:8px 0 8px; font-size:34px; } .modal p { color:var(--muted); line-height:1.7; }
.clear-burst { width:105px; height:105px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; font-size:46px; background:radial-gradient(circle,#fff7c7,#f59e0b 40%,rgba(16,185,129,.15) 70%); box-shadow:0 0 60px rgba(252,211,77,.35); }
.reward-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.reward-card { padding:18px; min-height:230px; position:relative; overflow:hidden; }
.reward-card.locked { filter:grayscale(.8); opacity:.48; }
.reward-art { height:90px; display:grid; place-items:center; font-size:48px; border-radius:18px; background:radial-gradient(circle,rgba(252,211,77,.2),rgba(16,185,129,.06)); border:1px solid var(--line); }
.reward-card h3 { margin:14px 0 6px; } .reward-card p { color:var(--muted); font-size:12px; line-height:1.55; }
.reward-tag { display:inline-block; margin-top:8px; padding:6px 8px; border-radius:9px; background:rgba(16,185,129,.11); color:#a7f3d0; font-size:11px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.setting-card { padding:18px; }
.setting-card label { display:block; font-weight:800; margin-bottom:8px; }
.setting-card small { display:block; color:var(--muted); line-height:1.5; margin-bottom:12px; }
.text-input, .select-input { width:100%; border:1px solid var(--line); background:rgba(3,17,31,.7); color:#fff; padding:12px 13px; border-radius:13px; }
.range-input { width:100%; accent-color:var(--emerald-500); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.toggle { position:relative; width:52px; height:30px; border-radius:999px; background:#24445c; border:1px solid var(--line); cursor:pointer; }
.toggle::after { content:""; position:absolute; width:22px; height:22px; border-radius:50%; background:#fff; top:3px; left:4px; transition:.2s ease; }
.toggle.on { background:#059669; } .toggle.on::after { left:25px; }
.footer-note { text-align:center; color:#7894a8; font-size:12px; padding:28px 12px 8px; }

.toast { position:fixed; left:50%; bottom:24px; z-index:120; transform:translateX(-50%); min-width:min(420px,calc(100% - 30px)); padding:13px 16px; border-radius:14px; background:rgba(3,17,31,.95); border:1px solid rgba(110,231,183,.28); box-shadow:0 15px 50px rgba(0,0,0,.4); text-align:center; color:#e6f8f1; animation:toastIn .25s ease; }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,14px); } }

@media (max-width: 980px) {
  .splash-card { grid-template-columns:1fr; }
  .splash-art { min-height:380px; order:-1; }
  .magic-moon { width:160px; height:160px; top:35px; right:45px; }
  .floating-book { top:43%; transform:translate(-50%,-50%) scale(.8); }
  .home-hero, .academy-layout, .builder-grid { grid-template-columns:1fr; }
  .mentor-card { min-height:300px; }
  .companion-panel { position:static; display:grid; grid-template-columns:190px 1fr; gap:12px; align-items:center; }
  .companion-mini { height:190px; }
  .surah-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reward-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .screen { padding:12px; }
  .topbar { border-radius:18px; padding:10px 12px; top:6px; }
  .brand-mini span, .stat-pill.hide-mobile { display:none; }
  .splash-copy { padding:28px 22px 34px; }
  .splash-art { min-height:310px; }
  .home-hero { padding:24px 18px; }
  .progress-summary { grid-template-columns:1fr 1fr 1fr; }
  .mode-grid, .surah-grid, .reward-grid, .settings-grid { grid-template-columns:1fr; }
  .academy-layout { gap:12px; }
  .letter-grid { grid-template-columns:repeat(6,1fr); max-height:none; }
  .form-grid { grid-template-columns:repeat(2,1fr); }
  .quiz-options { grid-template-columns:1fr; }
  .trace-wrap { grid-template-columns:1fr; }
  .trace-board { min-height:300px; }
  .builder-main { padding:16px; }
  .builder-header { flex-direction:column; }
  .verse-progress { width:100%; min-width:0; }
  .companion-panel { grid-template-columns:120px 1fr; padding:12px; }
  .companion-mini { height:135px; }
  .companion-mini .mentor-figure { transform:scale(.5); }
  .word-card { font-size:22px; }
  .word-slot { min-width:78px; }
  .builder-feedback { align-items:flex-start; flex-direction:column; }
}

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }

/* =========================================================
   AKADEMI AL-QUR'AN — visual revision using the user's image
   ========================================================= */
:root {
  --academy-teal: #0b6b64;
  --academy-teal-dark: #073f43;
  --academy-cream: #fff9ea;
  --academy-gold: #f4bd45;
}
html {
  background: #e8c88f;
}
body {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(6, 40, 44, .58), rgba(6, 40, 44, .18) 42%, rgba(69, 41, 18, .18)),
    url('assets/background-akademi.png') center center / cover fixed no-repeat;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.20));
  z-index: 0;
}
.ambient { display: none; }
#app { position: relative; z-index: 1; }
.screen { position: relative; }
.shell { width: min(1320px, 100%); }
.panel {
  background: linear-gradient(145deg, rgba(6, 57, 61, .93), rgba(8, 75, 76, .88));
  border: 1px solid rgba(255, 247, 218, .28);
  box-shadow: 0 22px 65px rgba(35, 23, 10, .28);
}
.topbar {
  background: rgba(6, 62, 64, .92);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 34px rgba(53, 31, 10, .25);
}
.brand-avatar {
  width: 47px;
  height: 47px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #fff5cc;
  box-shadow: 0 0 0 3px rgba(244,189,69,.30);
  flex: 0 0 auto;
  background: #f8dfab;
}
.brand-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 52% 20%;
  transform: scale(1.85);
}
.brand-mini strong { font-size: 16px; }
.brand-mini span span { color: #d8f2e8; }
.stat-pill, .icon-btn, .secondary-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
}
.primary-btn {
  color: #fff;
  background: linear-gradient(135deg, #0ca678, #087d76);
  box-shadow: 0 12px 30px rgba(4, 90, 78, .28);
}
.primary-btn:hover { filter: brightness(1.1); }
.eyebrow {
  color: #fff0a8;
  background: rgba(244,189,69,.16);
  border-color: rgba(255,233,145,.34);
}

/* Cover */
.splash-screen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: clamp(16px, 3vw, 34px);
  overflow: hidden;
}
.splash-screen::before { display: none; }
.cover-layout {
  width: min(1280px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(350px, .75fr);
  gap: clamp(20px, 4vw, 54px);
  align-items: center;
}
.cover-copy {
  padding: clamp(28px, 5vw, 64px);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(5, 64, 66, .94), rgba(8, 85, 78, .86));
  backdrop-filter: blur(15px);
}
.cover-copy h1 {
  margin: 18px 0 18px;
  font-size: clamp(54px, 8vw, 102px);
  line-height: .88;
  letter-spacing: -.055em;
  text-shadow: 0 5px 20px rgba(0,0,0,.22);
}
.cover-copy h1 span { color: #ffe48a; }
.cover-copy p {
  max-width: 720px;
  color: #e9faf4;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.7;
}
.cover-mode-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 30px;
}
.cover-mode-list span {
  padding: 12px 15px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800;
}
.cover-mode-list b { color: #ffe58e; margin-right: 8px; }
.large-cta { min-height: 58px; padding-inline: 28px; font-size: 17px; }
.cover-mascot {
  min-height: min(720px, 76vh);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.mentor-figure {
  position: relative;
  width: min(430px, 100%);
  height: 520px;
  margin: 0;
  z-index: 2;
}
.mentor-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 42%;
  border-radius: 46% 46% 34% 34% / 31% 31% 24% 24%;
  border: 5px solid rgba(255,250,222,.90);
  box-shadow: 0 24px 65px rgba(46,25,7,.35), 0 0 0 9px rgba(11,107,100,.28);
  user-select: none;
}
.cover-character { width: min(470px, 100%); height: min(650px, 72vh); }
.cover-character .mentor-image { object-position: 52% 47%; }
.mascot-callout {
  position: absolute;
  z-index: 4;
  right: 0;
  top: 8%;
  max-width: 230px;
  padding: 14px 16px;
  border-radius: 18px 18px 18px 5px;
  color: #17423f;
  background: #fff9df;
  border: 3px solid #f4c356;
  box-shadow: 0 12px 30px rgba(60,35,10,.22);
  font-weight: 900;
}

/* Main menu */
.home-hero {
  background: linear-gradient(135deg, rgba(6, 66, 68, .94), rgba(8, 91, 80, .88));
}
.home-copy h1 em { color: #ffe487; }
.home-copy p { color: #e1f4ef; }
.mentor-card { min-height: 360px; }
.mentor-card::before {
  background: radial-gradient(circle, rgba(255,226,132,.28), transparent 68%);
}
.mentor-card .mentor-figure { width: 245px; height: 300px; }
.speech-bubble {
  color: #21423f;
  background: rgba(255,250,229,.96);
  border: 2px solid #e7bb54;
  font-weight: 800;
}
.mode-card {
  background: linear-gradient(145deg, rgba(8, 91, 84, .94), rgba(5, 60, 67, .94));
  border: 2px solid rgba(255,237,173,.24);
}
.mode-card.quran {
  background: linear-gradient(145deg, rgba(111, 72, 18, .93), rgba(74, 53, 22, .94));
}
.mode-card h2 { color: #fff; }
.mode-card p { color: #e6f2ef; }
.mode-meta span { background: rgba(255,255,255,.10); }

/* Internal screens */
.page-title {
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(6, 58, 62, .84);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
}
.page-title p, .section-title span { color: #d8ece8; }
.soft-panel { background: rgba(2, 42, 47, .66); }
.letter-panel, .lesson-panel, .quiz-panel, .trace-panel, .builder-main, .companion-panel, .setting-card { color: #fff; }
.info-note { background: rgba(255,255,255,.08); color: #effdfa; }
.letter-stage { background: radial-gradient(circle, rgba(244,189,69,.18), transparent 62%), rgba(1,34,39,.45); }
.big-letter { color: #fff0a4; }
.form-box, .metric, .word-card, .word-slot, .setting-card, .reward-tag { background-color: rgba(255,255,255,.08); }
.companion-mini .mentor-figure { width: 180px; height: 220px; transform: none; }
.companion-mini .mentor-image { border-width: 3px; }

.footer-note {
  width: min(1180px, calc(100% - 12px));
  margin: 24px auto 4px;
  padding: 13px 20px;
  color: #4e3a1f;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  background: rgba(255, 249, 226, .94);
  border: 2px dashed rgba(133, 82, 31, .42);
  border-radius: 16px;
  box-shadow: 0 9px 24px rgba(63, 37, 10, .18);
  backdrop-filter: blur(8px);
}

@media (max-width: 900px) {
  body { background-position: 48% center; }
  .cover-layout { grid-template-columns: 1fr; }
  .cover-mascot { min-height: 330px; }
  .cover-character { width: 280px; height: 330px; }
  .mascot-callout { right: 6%; top: 2%; font-size: 13px; }
  .home-hero, .academy-layout, .builder-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { background-position: 57% center; }
  .screen { padding: 12px; }
  .cover-copy { padding: 24px 18px; }
  .cover-copy h1 { font-size: 52px; }
  .cover-copy p { font-size: 15px; }
  .cover-mode-list { display: grid; }
  .cover-mascot { min-height: 275px; }
  .cover-character { width: 230px; height: 270px; }
  .mascot-callout { max-width: 170px; right: 0; font-size: 11px; padding: 10px; }
  .brand-mini span span { display: none; }
  .footer-note { font-size: 12px; padding: 11px 10px; }
}


/* Versi lengkap Al-Fatihah + Juz 30 */
.translation-panel {
  margin-top:16px;
  padding:15px 17px;
  border-radius:16px;
  border:1px solid rgba(125,211,252,.22);
  background:linear-gradient(145deg,rgba(14,116,144,.11),rgba(255,255,255,.035));
}
.translation-label {
  color:#a5f3fc;
  font-size:12px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.translation-panel p {
  margin:0;
  color:#edf8fc;
  line-height:1.65;
  font-size:15px;
}
.correct-answer-wrap {
  margin-top:15px;
  border-radius:18px;
  padding:14px 16px;
  background:rgba(16,185,129,.08);
  border:1px solid rgba(110,231,183,.24);
}
.correct-answer-wrap .correct-ayah { margin-top:0; }
.correct-translation {
  margin:8px auto 0;
  max-width:850px;
  color:#d8f6ee;
  line-height:1.65;
  text-align:center;
  font-size:14px;
}
.surah-card p { min-height:44px; }
@media (max-width: 700px) {
  .word-card { font-size:21px; min-height:52px; padding:7px 11px; }
  .word-slot { min-width:72px; min-height:56px; padding:6px 8px; }
  .translation-panel p { font-size:14px; }
}