*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;color:#f5f7ff;background:#11182f;min-height:100vh}body::before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(12,20,48,.48),rgba(20,30,60,.52)),url("assets/qadr_bg.svg") center/cover no-repeat;z-index:-2}.topbar{position:sticky;top:0;z-index:30;padding:11px 18px;background:rgba(13,21,48,.88);backdrop-filter:blur(10px);box-shadow:0 5px 22px #0004;display:flex;justify-content:space-between;align-items:center}.brand b{display:block;font-size:21px}.brand small{font-weight:800;color:#d9dcf0}.scorebox{background:#fff3a9;color:#3b3356;padding:8px 14px;border-radius:999px;font-weight:900}.icon-btn{border:0;border-radius:12px;padding:9px 11px;background:#eef2ff;font-size:18px;cursor:pointer}.screen{display:none;max-width:1060px;min-height:650px;margin:28px auto;padding:28px;border-radius:28px;background:rgba(248,250,255,.94);color:#26314b;box-shadow:0 18px 55px #0005}.screen.active{display:block;animation:show .35s ease}.hero-grid{min-height:565px;display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center}.hero-symbol{text-align:center;font-size:95px;filter:drop-shadow(0 10px 25px #ffe98077);animation:float 4s ease-in-out infinite}h1,h2{text-align:center;color:#263553}h1{font-size:40px}.lead{font-size:19px;line-height:2;text-align:center}.notice{font-size:18px;line-height:1.9;text-align:center;background:#edf2ff;border-radius:18px;padding:13px}.btn{border:0;border-radius:15px;padding:12px 21px;background:#445b88;color:white;font-size:17px;font-weight:900;cursor:pointer}.btn.next{background:#b89530}.nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px}.mapbox{max-width:930px;margin:18px auto}.mapbox img{display:block;width:100%;max-height:620px;object-fit:contain;border-radius:22px;background:#fff;box-shadow:0 12px 30px #0002}.nodes{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px}.node{width:55px;height:55px;border:0;border-radius:50%;background:#8994a7;color:#fff;font-size:19px;font-weight:900;cursor:pointer}.node.active-node{width:72px;height:72px;background:#d9ad36;box-shadow:0 0 0 10px #ffd55c22,0 0 30px #ffd55c77;animation:pulse 1.2s infinite}.node.done{opacity:.55;transform:scale(.78)}.explain{max-width:900px;margin:15px auto;padding:18px 21px;border-radius:20px;background:#fff9df;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.4s ease-in-out infinite;overflow:hidden}.lesson::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff6b84a 48%,transparent 65%);transform:translateX(115%);animation:shine 5s infinite;pointer-events:none}.key-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.key-bank,.gate-zone{display:grid;gap:13px}.key{border:2px solid #ddc77c;background:#fffbea;border-radius:16px;padding:13px;font-weight:900;font-size:18px;cursor:grab}.key.selected{outline:4px solid #edc14c}.gate{min-height:115px;border:3px dashed #bea968;border-radius:20px;background:#fffdf5;padding:17px;font-size:18px;line-height:1.7;font-weight:800;transition:.25s}.gate.good{background:#ecf9ef;border-style:solid;border-color:#46a85e;box-shadow:0 0 27px #59b76b55}.gate-icon{font-size:36px}.qcard{padding:18px;margin:14px 0;border:2px solid #e6decd;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{border:2px solid #d6cebd;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}.ex3-wrap{position:relative;max-width:920px;margin:18px auto}.ex3-image{width:100%;display:block;border-radius:22px;background:#fff}.ex3-drop{position:absolute;border:3px dashed rgba(177,142,61,.9);border-radius:16px;background:rgba(255,251,220,.82);padding:8px;display:flex;flex-direction:column;gap:5px;min-height:85px;transition:.2s}.ex3-drop.good{border-style:solid;border-color:#43a65e;background:rgba(231,249,235,.92)}.drop-signs{top:12%;right:39%;width:24%;height:25%}.drop-name{top:47%;right:39%;width:24%;height:22%}.drop-merit{top:32%;left:6%;width:31%;height:47%}.drop-title{font-weight:900;text-align:center;background:#fff8d9;border-radius:9px;padding:4px}.ex3-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.ex3-card{border:2px solid #d8c993;background:#fffdf2;border-radius:15px;padding:11px;font-size:16px;font-weight:850;cursor:grab}.ex3-card.selected{outline:4px solid #e3b845}.ex3-card.wrong{background:#ffe0e0;animation:shake .3s}.placed-mini{font-size:13px;background:#fff;border-radius:9px;padding:5px;border:1px solid #c9b675}.fix-card{padding:18px;margin:13px 0;border:2px solid #e1d8c5;border-radius:18px;background:#fff}.fix-statement{font-size:19px;line-height:1.8;font-weight:850}.fix-actions{display:flex;justify-content:center;gap:12px;margin-top:12px}.corrections{display:none;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:12px}.corrections.show{display:flex}.correction{border:2px solid #cfc4af;background:#fffaf0;border-radius:13px;padding:10px 13px;font-size:16px;cursor:pointer}.correction.correct{background:#e3f8e7;border-color:#43a65d}.correction.wrong{background:#ffe0e0;border-color:#d84343;animation:shake .3s}.night-zone{display:grid;grid-template-columns:1fr 1fr;gap:18px}.action-bank{display:grid;gap:10px}.night-action{border:2px solid #d7c57d;background:#fffced;border-radius:15px;padding:11px;font-size:17px;font-weight:850;cursor:grab}.night-action.selected{outline:4px solid #e6b842}.lanterns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lantern{min-height:160px;border:3px dashed #b79f59;border-radius:22px;background:#fff9df;padding:12px;text-align:center;font-weight:900;transition:.25s}.lantern.good{background:#fff5b8;border-style:solid;box-shadow:0 0 35px #ffd95c99}.lantern-icon{font-size:48px}.bad-tray{grid-column:1/-1;border:3px dashed #777;border-radius:20px;padding:15px;background:#f3f3f3;min-height:120px}.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;user-select:none}.word-card.selected{outline:4px solid #e8b944}.word-card.dragging{opacity:.45}.surah-fill{font-family:"Traditional Arabic",Tahoma,Arial,sans-serif;font-size:24px;line-height:2.8;text-align:center;background:#fff;border:2px solid #eadfca;border-radius:23px;padding:20px}.inline-drop{display:inline-flex;min-width:130px;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}.inline-drop.wrong{background:#ffe0e0;border-color:#d74343}.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 #0002}.final-badge{font-size:72px}.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,.key-grid,.night-zone{grid-template-columns:1fr}.hero-symbol{font-size:76px}.screen{margin:12px;padding:18px}.lead{font-size:18px}h1{font-size:31px}.ex3-cards{grid-template-columns:1fr}.drop-merit{left:2%;width:36%}.drop-signs,.drop-name{right:34%;width:29%}.lanterns{grid-template-columns:1fr}}
.ex3-categories{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.ex3-categories .ex3-drop{position:static!important;width:auto!important;height:auto!important;min-height:150px}
@media(max-width:760px){
 .ex3-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.ex3-card{font-size:13px!important;line-height:1.45;padding:8px!important}.ex3-categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ex3-categories .ex3-drop{min-height:135px;padding:6px;font-size:12px}.drop-title{font-size:13px}.placed-mini{font-size:11px!important;padding:4px!important}
 .night-zone{grid-template-columns:1fr!important;gap:10px}.action-bank{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.night-action{font-size:13px;padding:8px}.lanterns{grid-template-columns:1fr 1fr!important;gap:7px}.lantern{min-height:115px;padding:7px;font-size:12px}.lantern-icon{font-size:32px}.bad-tray{grid-column:1/-1;min-height:90px;padding:8px;font-size:12px}
 #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:85px;min-height:34px;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}
}