*{box-sizing:border-box}
body{margin:0;font-family:Tahoma,Arial,sans-serif;color:#26314b;background:#f7f4ea;min-height:100vh}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(255,255,255,.76),rgba(251,248,235,.82)),url("assets/bayyina_bg.svg") center/cover no-repeat;z-index:-2}
.topbar{position:sticky;top:0;z-index:20;padding:11px 18px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);box-shadow:0 5px 20px #0001;display:flex;justify-content:space-between;align-items:center}
.brand b{display:block;font-size:20px}.brand small{font-weight:800;color:#768094}.scorebox{font-weight:900;background:#fff6ce;padding:8px 14px;border-radius:999px}.icon-btn{border:0;border-radius:12px;padding:9px 11px;background:#edf2ff;font-size:18px;cursor:pointer}
.screen{display:none;max-width:1060px;min-height:660px;margin:28px auto;padding:28px;border-radius:28px;background:rgba(255,255,255,.93);box-shadow:0 18px 55px #34415d22}
.screen.active{display:block;animation:show .35s ease}.hero-grid{min-height:570px;display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:center}.hero-icon{font-size:120px;text-align:center;filter:drop-shadow(0 15px 20px #c8ac5333);animation:float 4s ease-in-out infinite}
h1,h2{text-align:center;color:#243249}h1{font-size:40px;margin:8px}.lead{font-size:20px;line-height:2;text-align:center}.notice{font-size:18px;line-height:1.9;text-align:center;background:#eef6ff;border-radius:18px;padding:13px}
.btn{border:0;border-radius:15px;padding:12px 22px;background:#46648c;color:#fff;font-size:17px;font-weight:900;cursor:pointer}.btn.next{background:#c4932d}.nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px}.intro-nav{margin-top:30px}
.mapbox{max-width:930px;margin:18px auto}.mapbox img{display:block;width:100%;max-height:620px;object-fit:contain;border-radius:23px;background:#fff;box-shadow:0 12px 28px #0001}.nodes{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:17px}.node{width:54px;height:54px;border:0;border-radius:50%;background:#9aa4b4;color:white;font-size:19px;font-weight:900;cursor:pointer}.node.active-node{width:70px;height:70px;background:#d3a52f;animation:pulse 1.3s infinite;box-shadow:0 0 0 9px #e7c75522,0 0 28px #e7b73477}.node.done{transform:scale(.78);opacity:.65}.explain{max-width:900px;margin:15px auto;padding:18px 21px;border-radius:20px;background:#fff9e5;font-size:20px;line-height:1.9;font-weight:800;min-height:95px}
.lessons{display:grid;gap:13px}.lesson{position:relative;padding:17px 20px;border-radius:20px;background:#fff;border-right:5px solid #d8a92f;font-size:18px;line-height:1.8;font-weight:800;box-shadow:0 8px 22px #0001;animation:lessonFloat 4.5s ease-in-out infinite;overflow:hidden}.lesson::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff6b844 48%,transparent 65%);transform:translateX(115%);animation:shine 5s infinite;pointer-events:none}.lesson:nth-child(even){animation-delay:-2s}
.challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.bank,.lamp-zone{display:grid;gap:12px}.concept{border:2px solid #d9ca9b;background:#fffdf4;border-radius:16px;padding:13px;font-size:18px;font-weight:900;cursor:grab}.concept.selected{outline:4px solid #f0c14f}.lamp{min-height:100px;border:3px dashed #c1a35a;border-radius:21px;padding:17px;background:#fffaf0;font-size:17px;line-height:1.7;font-weight:800;transition:.25s}.lamp.good{background:#ecfbe9;border-style:solid;border-color:#50a85b;box-shadow:0 0 25px #66be6b55}.lamp .lamp-icon{font-size:32px}
.qcard{padding:18px;margin:14px 0;border:2px solid #e7dfcf;border-radius:19px;background:#fff}.q{font-size:20px;font-weight:900;line-height:1.8}.opts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}.opt,.drag-card{border:2px solid #d7cfbf;background:#fff;border-radius:14px;padding:11px 16px;font-size:17px;font-weight:850;cursor:pointer}.opt.correct{background:#dff7e6;border-color:#39a15b}.opt.wrong{background:#ffe1e1;border-color:#d74343;animation:shake .3s}
.image-ex-grid{display:grid;grid-template-columns:330px 1fr;gap:20px;align-items:start}.image-bank{display:grid;gap:13px}.image-drag{background:#fff;border:2px solid #e2d9c8;border-radius:18px;padding:10px;cursor:grab;transition:.2s}.image-drag img{width:100%;height:140px;object-fit:contain}.image-drag.selected{outline:4px solid #e0b43d}.verse-targets{display:grid;gap:13px}.verse-target{min-height:135px;padding:16px;border:3px dashed #b9a371;border-radius:19px;background:#fffdf6;font-size:19px;line-height:1.9;font-family:"Traditional Arabic",Tahoma,Arial,sans-serif;transition:.25s}.verse-target.good{border-style:solid;border-color:#43a65d;background:#ecf9ef}.target-image{width:115px;height:80px;object-fit:contain;float:left;margin:0 12px 4px 0}
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.benefit{min-height:125px;border:3px solid #d9d2c3;background:#fff;border-radius:18px;padding:16px;font-size:17px;line-height:1.8;font-weight:800;cursor:pointer;transition:.2s}.benefit.correct{background:#e2f8e7;border-color:#43a55e}.benefit.wrong{background:#ffe2e2;border-color:#d84343;animation:shake .3s}
.binary{display:flex;justify-content:center;gap:18px}.binary .opt{min-width:170px}
.cards{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:15px}.word-card{border:2px solid #d8c691;background:#fffced;border-radius:15px;padding:10px 13px;font-size:17px;font-weight:900;cursor:grab}.word-card.selected{outline:4px solid #e8b944}.word-card.dragging{opacity:.45}.surah-fill{font-family:"Traditional Arabic",Tahoma,Arial,sans-serif;font-size:23px;line-height:2.7;text-align:center;background:#fff;border:2px solid #eadfca;border-radius:23px;padding:20px}.inline-drop{display:inline-flex;min-width:125px;min-height:45px;align-items:center;justify-content:center;border:3px dashed #b6a16f;border-radius:11px;padding:3px 8px;margin:2px;background:#fffdf7;vertical-align:middle}.inline-drop.drag-over{background:#fff1b9}.inline-drop.ok{border-style:solid;border-color:#3fa25a;background:#e4f8e9;color:#176e36;font-weight:900}
.feedback{text-align:center;min-height:30px;margin-top:10px;font-weight:900;color:#9d5f2b}.final-card{text-align:center;max-width:760px;margin:30px auto;padding:30px;border-radius:28px;background:#fff;box-shadow:0 15px 40px #0001}.final-badge{font-size:74px}.final-stars{font-size:30px}.final-title{font-size:34px;font-weight:900;color:#34405c}.final-scorebox{display:inline-block;margin:16px;padding:12px 20px;border-radius:999px;background:#fff3bd;border:2px solid #d4a634;font-size:21px;font-weight:900}
@keyframes show{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes lessonFloat{50%{transform:translateY(-4px)}}@keyframes pulse{50%{transform:scale(1.08)}}@keyframes shine{0%,55%{transform:translateX(115%)}75%,100%{transform:translateX(-115%)}}@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@media(max-width:760px){.hero-grid,.challenge-grid,.image-ex-grid,.benefit-grid{grid-template-columns:1fr}.hero-icon{font-size:86px}.screen{margin:12px;padding:18px}.lead{font-size:18px}h1{font-size:31px}.verse-target{font-size:17px}}

/* mobile polish 2026-09 */
@media(max-width:760px){
 .challenge-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;gap:8px!important;align-items:start}.bank,.lamp-zone{gap:8px}.concept{font-size:14px;padding:9px 7px}.lamp{font-size:13px;line-height:1.5;padding:9px;min-height:82px}.lamp .lamp-icon{font-size:22px}
 .image-ex-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;gap:8px!important}.image-bank{gap:8px}.image-drag{padding:5px}.image-drag img{height:105px}.verse-target{font-size:14px!important;line-height:1.55;min-height:150px;padding:9px}.target-image{width:72px;height:54px}.number-prompt{font-size:12px;margin-top:6px;color:#7b6a45}.number-choices{display:flex;gap:5px;justify-content:center;margin-top:5px}.num-choice{border:1px solid #cbb989;border-radius:9px;background:#fff;padding:5px 8px;font-weight:800}.num-choice.correct{background:#dff7e6;border-color:#39a15b}.num-choice.wrong{background:#ffe1e1;border-color:#d74343}
 #s8 h2{font-size:23px}.word-card{font-size:13px;padding:7px 9px}.surah-fill{font-size:17px;line-height:2.15;padding:12px}.inline-drop{min-width:88px;min-height:35px;font-size:14px}
 .final-card .nav{justify-content:center;gap:10px}.final-card .nav .btn{width:145px;min-height:58px;padding:8px 10px;font-size:14px}.final-card #restartBtn{font-size:13px}
}