@font-face{font-family:Hafs;src:url('assets/uthmanic_hafs_v20.ttf') format('truetype');font-display:swap}
.catalog-controls{display:flex;align-items:end;gap:18px;margin:25px 0;flex-wrap:wrap}.catalog-controls label{display:grid;gap:7px;font-size:12px;color:#6e8068}.catalog-controls input,.catalog-controls select{font:14px 'Noto Sans Arabic',sans-serif;min-height:48px;border:1px solid #d4dfcb;border-radius:10px;background:white;color:#174f46;padding:9px 13px}.catalog-controls input{width:260px}.catalog-controls>span{font-size:12px;color:#7e8e75;margin-bottom:12px}.chapter-group{margin:30px 0}.hizb-heading{font-size:18px;font-weight:600;margin-bottom:18px}.course-summary{font-size:12px!important;color:#5b7b54!important}.source-link{display:inline-block;font-size:12px;min-height:40px;line-height:2}.mission-map{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.mission{display:grid;grid-template-columns:40px 1fr;gap:5px 12px;align-items:center;background:#f7f9f3;color:#174f46;border:1px solid #dbe5d3;border-radius:14px;padding:18px;text-align:right}.mission-number{grid-row:span 2;display:grid;place-items:center;height:36px;width:36px;background:#e5eedc;border-radius:50%}.mission strong{font-size:15px}.mission small{font-size:11px;color:#71846b}.mission.done{background:#e8f2e0;border-color:#aac695}.mission:disabled{background:#f4f4ef;opacity:.55}.basmala{text-align:center;font-size:28px!important;color:#55764c;border-bottom:1px solid #e5e4d5;padding:10px 0 16px}.next-mission{margin-top:15px}.bonus-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}.bonus-card{border:1px solid #e1e3d4;border-radius:18px;padding:25px;background:#f2eee3}.bonus-card h2{font-size:21px;margin:12px 0}.bonus-card p{font-size:13px;line-height:2;color:#75816d}.bonus-card .text-button{font-size:14px;min-height:44px;text-decoration:underline}.story-invite{background:#e9efe1;display:flex;align-items:center;gap:15px}.guide-bird{width:115px;flex-shrink:0;animation:bird-float 4s ease-in-out infinite}.guess-verse{padding:20px;background:#fbfaf3;border:1px solid #e8e4d4;border-radius:15px;text-align:center;margin:20px 0}.mixed-score{font-size:17px;color:#597d42;line-height:2}.empty-state{padding:35px;background:white;border-radius:15px;font-size:15px}.story-stage{height:300px;border-radius:20px;background:#e6f0e7;position:relative;overflow:hidden;margin:10px 0 20px;isolation:isolate}.story-sun{width:70px;height:70px;position:absolute;top:32px;right:60px;border-radius:50%;background:#efd99c;box-shadow:0 0 0 13px #efd99c33}.story-hill{position:absolute;border-radius:50%;width:140%;height:260px;bottom:-140px;background:#bad1a6;z-index:-1}.hill-a{right:-55%}.hill-b{left:-70%;bottom:-160px;background:#d1dfb9}.story-trail{position:absolute;width:150px;height:250px;bottom:-170px;right:25%;transform:rotate(-25deg);background:#f1e8c8;border-radius:50%}.story-cloud{position:absolute;width:95px;height:26px;top:50px;left:30px;background:#fff9;border-radius:40px;animation:cloud-drift 8s ease-in-out infinite}.story-cloud:before{content:'';position:absolute;width:50px;height:45px;border-radius:50%;background:#fff9;left:25px;bottom:0}.cloud-b{left:48%;top:85px;transform:scale(.7);animation-delay:-4s}.story-bird{position:absolute;width:155px;bottom:25px;right:12%;animation:bird-float 3s ease-in-out infinite}.story-sign{position:absolute;left:9%;bottom:70px;border:2px solid #b0c5a0;background:#fffbed;border-radius:14px;padding:15px;font-size:17px;color:#426843;box-shadow:0 9px 0 #78956522;transform:rotate(-4deg)}.story-star{position:absolute;color:#c6a25d;font-size:32px;animation:star-shine 3s ease-in-out infinite}.star-a{left:22%;top:35px}.star-b{right:37%;bottom:110px;animation-delay:-1s}.story-stage[data-scene="1"] .story-bird{right:48%;animation-name:bird-hop}.story-stage[data-scene="1"] .story-sign{left:8%;bottom:45px;background:#f5f0dd}.story-stage[data-scene="2"] .story-bird{right:24%;animation:bird-hop 2s ease-in-out infinite}.story-stage[data-scene="2"] .story-star{font-size:45px;color:#b79b42}.story-stage[data-scene="2"] .story-sun{background:#f2dd9d;box-shadow:0 0 0 22px #efd99c22}.story-actions{display:flex;align-items:center;gap:15px;margin:20px 0}.story-actions .text-button{font-size:13px;min-height:44px}#storyTitle{font:700 30px/1.6 Amiri,serif;margin:10px 0}#storyContent>.game-desc{min-height:85px}.story-stage+.save-caption{text-align:center}@keyframes bird-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}@keyframes bird-hop{0%,100%{transform:translateY(0) rotate(-2deg)}35%{transform:translateY(-20px) rotate(3deg)}65%{transform:translateY(-4px) rotate(-2deg)}}@keyframes cloud-drift{0%,100%{margin-left:0}50%{margin-left:20px}}@keyframes star-shine{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}@media(max-width:1000px){.bonus-grid{grid-template-columns:1fr}.catalog-controls{gap:12px}.mission-map{grid-template-columns:1fr 1fr}}@media(max-width:720px){.mission-map{grid-template-columns:1fr}.catalog-controls{align-items:stretch}.catalog-controls label{width:100%}.catalog-controls input,.catalog-controls select{width:100%}.story-stage{height:250px}.story-bird{width:125px;right:4%}.story-sign{font-size:13px;left:5%;padding:12px}.story-invite{padding:20px}.guide-bird{width:95px}.bonus-card h2{font-size:20px}.story-stage[data-scene="1"] .story-bird{right:45%}.story-star{font-size:24px}.story-sun{right:35px;width:55px;height:55px}#storyTitle{font-size:26px}.guess-verse{padding:14px}}
@media(prefers-reduced-motion:reduce){.guide-bird,.story-bird,.story-cloud,.story-star{animation:none!important;transform:none!important}}
/* Learning screens use larger type and touch targets than the initial mockup. */
.quran-text,.quran-answer,.quran-token{font-family:Hafs,Amiri,serif;font-weight:400;font-synthesis:none;letter-spacing:0}
.quran-text{font-size:34px;line-height:2.3}.quran-answer{font-size:29px;line-height:2.2;padding:12px 20px}.quran-token{font-size:28px;line-height:1.9}
.nav{font-size:14px;min-height:48px}.primary{font-size:14px;min-height:48px}.hero p,.path-card p{font-size:13px;line-height:2.1}.card-action{font-size:14px;min-height:52px}.hero .pill,.hero-foot,.tag,.section-head p{font-size:11px}.hero-copy{width:63%}.illustration{width:37%}.hero h2{font-size:44px}.hero-foot{flex-wrap:wrap;gap:8px 18px}.hero{min-height:390px}.hero-copy{padding-bottom:24px}.stats small{font-size:12px}.breadcrumb{font-size:12px}.section-description{font-size:14px;color:#617361;line-height:2}.home-courses{grid-template-columns:repeat(3,1fr)}.home-courses .path-card{padding:20px 18px 0}.home-courses .card-action{margin-right:-18px;width:calc(100% + 36px);padding:14px 18px}.home-courses .tile{font-size:14px;font-weight:600}.course-heading{margin-top:30px}.course-steps{display:flex;gap:6px;flex-wrap:wrap;margin:15px 0 23px;font-size:11px}.course-steps span{background:#f1f4ec;padding:5px 8px;border-radius:7px}.course-steps .done{background:#dcebd8;color:#23563b}.playable-card .tag{font-size:10px}.review-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#f2eee2;border:1px solid #e9e2cd;border-radius:18px;padding:22px 26px;margin-top:24px}.review-panel h2{font-size:20px;margin:4px 0}.review-panel h2 span{display:inline-grid;place-items:center;font:500 14px 'Noto Sans Arabic',sans-serif;background:#fff9;border-radius:50%;width:30px;height:30px;margin-right:10px}.review-panel p{font-size:12px;color:#77816c;margin:0}.progress-row .save-caption{margin:15px 0}.source-caption,.save-caption{font-size:12px;line-height:1.9;color:#71816e}.quran-reader{padding:18px 23px;background:#fbfaf3;border:1px solid #e8e4d4;border-radius:15px;margin-top:12px}.verse-row{display:flex;gap:18px;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e4d477;padding:5px 0}.verse-row:last-child{border-bottom:0}.verse-number{flex-shrink:0;display:grid;place-items:center;width:29px;height:29px;border:1px solid #c6cfba;border-radius:50%;font:13px 'Noto Sans Arabic',sans-serif;color:#6f825d}.reader-toggle{font-size:13px;min-height:44px;text-decoration:underline}.levels-title{font-size:16px;margin-top:25px}.level-picker{display:grid;gap:10px}.level-choice{border:1px solid #dce5d7;background:#fff;color:#174f46;display:grid;grid-template-columns:40px 1fr;gap:2px 12px;text-align:right;align-items:center;padding:14px;border-radius:12px}.level-choice:disabled{background:#f4f5f0;opacity:.65}.level-number{grid-row:span 2;background:#e9f0e2;border-radius:50%;height:36px;width:36px;display:grid;place-items:center}.level-choice strong{font-size:15px;font-weight:600}.level-choice small{font-size:12px;color:#7a8771}.question-meter{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#6e8066}.level-bar{display:block;height:auto;margin:18px 0}.question-progress{height:6px;background:#e9eee5;border-radius:10px;overflow:hidden}.question-progress>span{display:block;height:100%;background:#448275}.game-desc{font-size:14px}.game-title{font-size:24px;line-height:1.8}.reference-label{font-size:12px;color:#829474}.feedback{font-size:14px}.feedback:empty{display:none}.hint-panel{background:#f8f3e5;border:1px solid #e9dec0;padding:16px;border-radius:12px;font-size:14px;line-height:2;margin-top:20px}.hint-panel p{margin:6px 0}.hint-panel .spelling-hint{font-size:15px;color:#6a755c}.order-zone{gap:8px;padding:18px;min-height:100px;flex-direction:row;align-content:start}.order-placeholder{font-size:14px;color:#71816e}.tokens{gap:8px;padding:8px 0}.token{min-height:48px;padding:8px 15px}.selected-token{background:#e4efdd;border-color:#8fae81}.tokens .token:disabled{opacity:.25;transform:none}.game-actions{flex-wrap:wrap}.game-actions .text-button,.back-to-study{min-height:44px;font-size:13px}.back-to-study{margin-top:14px}.input-answer{resize:vertical;font-size:23px;line-height:1.9}.arabic-keyboard{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding:15px 0;direction:rtl}.keyboard-key{border:1px solid #d4e0cc;background:#fff;border-radius:8px;min-height:44px;font-size:21px;color:#174f46}.keyboard-key.wide{grid-column:span 4;font-size:14px}.keyboard-toggle{min-height:44px;font-size:13px}.completion .text-button{display:block;margin:16px auto;min-height:44px;font-size:13px}.transfer-panel{border:1px solid #e3e8db;background:#f1f4eb;border-radius:15px;padding:25px;margin-top:25px}.transfer-panel h2{font-size:18px}.transfer-panel p{font-size:12px;line-height:2;color:#738367}.transfer-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.import-label{position:relative;display:inline-flex;align-items:center;min-height:48px;border:1px solid #b5c6a9;padding:9px 20px;border-radius:9px;cursor:pointer;font-size:14px;overflow:hidden}.import-label input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.import-label:focus-within{outline:3px solid #d69448;outline-offset:3px}.transfer-panel>.text-button{min-height:44px;font-size:12px}.storage-notice{padding:14px;border-radius:10px;background:#fff1cf;color:#785328;font-size:13px;line-height:2;margin-top:15px}.source-body{font-size:13px}.source-body a{overflow-wrap:anywhere}.dialog-head{position:sticky;top:-25px;background:#fff;padding:10px 0;z-index:2}.close{height:44px;width:44px;flex-shrink:0}dialog{max-width:700px}.progress-dots{flex-wrap:wrap}.progress-dots span{font-size:12px}.nav{touch-action:manipulation}.text-button:focus-visible{outline:3px solid #d69448}.stats>div{min-width:0}
@media(max-width:1200px){.home-courses{grid-template-columns:1fr 1fr}.hero-foot{font-size:10px}.hero-copy{width:64%}.hero h2{font-size:39px}.illustration{width:36%}}
@media(min-width:721px) and (max-width:1000px){.sidebar{width:180px;padding:25px 12px}.sidebar .brand{font-size:23px}.brand-icon{font-size:32px}.sidebar .nav{padding:12px;font-size:13px}main{margin-right:180px;padding:0 23px}.hero{min-height:420px}.hero-copy{padding:25px;width:100%;padding-left:125px}.hero h2{font-size:39px}.illustration{position:absolute;left:-30px;bottom:80px;width:150px;opacity:.55}.arch{width:135px;height:200px}.float-tag,.spark{display:none}.path-grid{grid-template-columns:1fr}.hero p{font-size:13px}.hero-foot{font-size:10px}.sidebar-note{padding:16px 12px}.sidebar-note h3{font-size:21px}.review-panel{align-items:flex-start;flex-direction:column}.stats>div{gap:8px}.stats small{font-size:10px}.stat-icon{width:33px;height:33px}}
@media(max-width:720px){.hero{min-height:400px}.hero-copy{width:100%;padding:25px 22px}.hero h2{font-size:40px;max-width:230px}.hero p{font-size:13px;max-width:240px}.illustration{left:-65px;bottom:80px;opacity:.25}.hero-foot{white-space:normal;font-size:10px}.hero .pill{font-size:10px}.nav{font-size:11px;min-height:59px}.home-courses{grid-template-columns:1fr}.stats small{font-size:9px}.stats>div{gap:6px}.stats b{font-size:21px}.game-title{font-size:22px}.game-desc{font-size:14px}.quran-text{font-size:30px}.quran-answer{font-size:27px;line-height:2.3}.quran-token{font-size:26px}.quran-reader{padding:12px 15px}.verse-row{gap:10px}.verse-number{height:25px;width:25px}.review-panel{flex-direction:column;align-items:stretch;padding:20px}.review-panel .primary{align-self:flex-start}.question-meter{font-size:11px}.arabic-keyboard{grid-template-columns:repeat(7,1fr)}.keyboard-key.wide{grid-column:span 3}.source-caption{font-size:10px}.progress-dots{gap:6px}.progress-dots span{font-size:11px;padding:6px 10px}.source-body{font-size:12px}.breadcrumb{font-size:10px}.transfer-panel{padding:20px}.gentle-note{font-size:11px}dialog{max-height:94dvh}.desktop{display:none}.dialog-head{top:-20px}.course-steps{font-size:12px}.card-top .tag{font-size:11px}}