/* Scoped Dua Builder presentation: document scrolling, readable Arabic, gentle motion. */
body[data-sg-page=dua-builder]{overflow-x:clip} .db-wrap{width:min(920px,100%);margin:auto;padding:24px 18px 36px;color:#163e57;scroll-margin-top:calc(var(--sg-header) + 10px)}.db-wrap *{box-sizing:border-box}.db-wrap .hidden,.db-wrap [hidden]{display:none!important}.db-wrap h1,.db-wrap h2,.db-wrap h3,.db-wrap h4{margin:0;font-weight:1000;line-height:1.22}.db-wrap p{margin:8px 0;line-height:1.5}.db-wrap button,.db-wrap a,.db-wrap summary{touch-action:manipulation}.db-wrap button{cursor:pointer;min-height:44px;font:900 15px/1.3 Nunito,sans-serif;padding:11px 15px;color:#164c67;background:#fff;border:2px solid #beddea;border-radius:14px;box-shadow:0 3px #d0e5eb;transition:background .15s,transform .15s}.db-wrap button:hover{background:#edf9fc}.db-wrap button:active{transform:translateY(2px);box-shadow:none}.db-wrap button:disabled{cursor:default;opacity:.6;transform:none}.db-wrap :focus-visible{outline:3px solid #7c3aed;outline-offset:3px}.db-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.db-heading h1{font-size:clamp(27px,5vw,38px);color:#086783}.db-heading h1 span{color:#df9c13}.db-heading>a{font-size:14px;font-weight:900;color:#5930a3}.db-eyebrow{font-size:12px!important;font-weight:1000;letter-spacing:.06em;text-transform:uppercase;color:#57738b}.db-shell{background:white;border:4px solid white;border-radius:28px;box-shadow:0 10px #a8d6e466,0 20px 40px #22679117;overflow:visible;position:relative}.db-cover{height:190px;position:relative;border-radius:24px 24px 8px 8px;overflow:hidden;background:#d0f5e5}.db-cover img{width:100%;height:100%!important;object-fit:cover;object-position:50% 52%}.db-cover>span{position:absolute;left:18px;bottom:14px;border:2px solid #fff;background:#fffffff2;border-radius:12px;padding:8px 12px;font-weight:1000;color:#146358}.db-intro{padding:24px 28px;text-align:center}.db-intro h2{font-size:clamp(27px,4vw,35px);color:#106d64}.db-intro>p{max-width:680px;margin:12px auto}.db-instructions{background:#f3f9fe;border-radius:15px;padding:12px;font-size:14px;line-height:1.8;font-weight:800}.db-instructions span{color:#0c7a70;white-space:nowrap}.db-lengths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.db-lengths button{display:grid;gap:8px;justify-items:center;padding:15px 7px;min-width:0;background:#eafaf2;border-color:#a8d9c5;box-shadow:0 4px #a8d9c5}.db-lengths button:nth-child(2){background:#fff8e5;border-color:#edcf83;box-shadow:0 4px #edcf83}.db-lengths button:nth-child(3){background:#f4f0ff;border-color:#d0c1ed;box-shadow:0 4px #d0c1ed}.db-lengths button>span{font-size:32px}.db-lengths strong{font-size:20px}.db-lengths small{font-size:12px;color:#435a70}.db-tip{font-weight:850;background:#effbf5;padding:10px;border-radius:12px}.db-fine{font-size:12px;color:#4a6678}.db-toolbar{position:sticky;top:var(--sg-header);z-index:30;display:flex;justify-content:space-between;align-items:center;gap:10px;background:#e8f9f7;border-bottom:3px solid #b7e4dc;border-radius:24px 24px 14px 14px;padding:12px 18px}.db-toolbar>div{display:grid;text-align:center}.db-toolbar strong{font-size:23px;color:#096b68}.db-toolbar small{font-size:11px;font-weight:900}.db-play{padding:18px 24px 22px}.db-trail{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 0 15px}.db-trail>span{display:grid;place-items:center;width:28px;height:28px;flex:0 1 28px;border-radius:50%;border:2px solid #d0e5e9;background:#f0f8fc;color:#476578;font-size:12px;font-weight:1000}.db-trail .current{background:#fff5d7;border-color:#dcb649;color:#714700;box-shadow:0 0 0 3px #fff8e6}.db-trail .done{background:#168576;color:#fff;border-color:#087263}.db-context{display:flex;gap:16px;align-items:center;background:linear-gradient(130deg,#f0faf6,#f5faff);border-radius:18px;padding:16px}.db-context>span{font-size:44px;flex-shrink:0}.db-context h2{font-size:clamp(21px,3vw,27px);color:#145f5a}.db-context p{font-size:14px}.db-source{margin:12px 0;border-bottom:1px solid #d4e6ed;font-size:12px;color:#4a6575}.db-source summary{cursor:pointer;min-height:44px;padding:12px 4px;font-weight:800;line-height:1.6;overflow-wrap:anywhere}.db-source>div{padding:0 8px 12px}.db-build-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px}.db-build-head h3{font-size:20px}.db-build-head>span{font-size:12px;font-weight:900;color:#547087}.db-words{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;min-height:56px}.db-answer{border:2px dashed #74beab;background:#f3fcf8;border-radius:18px;min-height:85px;padding:12px}.db-empty{font:800 15px/1.4 Nunito,sans-serif;color:#597c78}.db-bank{padding:10px 0 14px}.db-bank-label{font-size:13px;font-weight:900;color:#4e7081}.db-wrap button.db-token{font:700 28px/1.55 Amiri,serif;min-height:60px;padding:5px 18px;background:#f2faff;color:#164561;border:2px solid #aad2e5;border-bottom-width:4px;border-radius:14px;box-shadow:none;max-width:100%;overflow-wrap:anywhere;scroll-margin:120px 0}.db-answer button.db-token{background:#f1edff;color:#423672;border-color:#c6b9e7}.db-wrap button.db-token.is-right,.db-wrap button.db-token:disabled{background:#dcf6e9;color:#135b49;border-color:#7ac5a6;opacity:1}.db-wrap button.db-token.needs-change{border-color:#c78132;background:#fff7e7;box-shadow:0 0 0 2px #f7dfad}.db-wrap button.db-token.is-hint{outline:3px solid #9b6b0a;outline-offset:3px;background:#fff3ca}.db-tools{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 15px}.db-tools button{flex:1;font-size:13px;padding:10px 9px}.db-tools #hint-btn{background:#fff9e8;border-color:#ebd59c}.db-preview{padding:14px;background:#fffaf0;border:2px solid #eedcb5;border-radius:16px;margin-bottom:14px}.db-preview [lang=ar],.db-arabic,#recall-word{font:700 28px/1.8 Amiri,serif!important;color:#155d57}.db-feedback{border-radius:16px;background:#f0f8fe;border:2px solid #c5e0ee;padding:12px 15px;min-height:76px;scroll-margin-top:calc(var(--sg-header) + 90px)}.db-feedback strong{font-size:17px}.db-feedback p{font-size:14px}.db-feedback[data-kind=correct]{background:#ecfaf1;border-color:#a6d8ba;color:#165b42}.db-feedback[data-kind=retry]{background:#fff7e9;border-color:#e9cf9b;color:#71501b}.db-wrap .db-primary{background:#127e73;color:#fff;border-color:#0c695f;box-shadow:0 4px #0c5c55;font-weight:1000}.db-wrap .db-primary:hover{background:#0b6c63}.db-wrap .db-primary:disabled{background:#608580;color:#fff;opacity:1;box-shadow:0 3px #5a7975;border-color:#547b76}.db-check{width:100%;margin-top:4px;font-size:18px!important;padding:14px!important}.db-keys{font-size:11px;color:#5c7385;text-align:center;margin-top:16px!important}.db-pause{padding:30px 20px;text-align:center}.db-pause>span{font-size:45px}.db-pause h2{font-size:28px;color:#146c61}.db-pause button{display:block;margin:16px auto}.db-result-head{text-align:center;padding:25px 24px 8px}.db-result-head h2{font-size:clamp(26px,4vw,34px);color:#116b62}.db-bloom{font-size:60px;color:#ecae2d;line-height:1.1;transform-origin:center}.db-bloom.is-blooming{animation:dbBloom 1.5s ease-out}.db-result-actions{display:flex;justify-content:center;gap:12px;margin:14px 20px}.db-shell>#results-screen>#storage-note{margin:16px 24px}.db-recall{margin:20px 24px;padding:18px;border:2px solid #d3c9ed;border-radius:20px;background:#faf7ff}.db-recall h3{font-size:23px;color:#63488b}.db-recall>p{font-size:14px}#recall-word{margin:18px 0}#recall-choices{display:grid;gap:10px}#recall-choices button{text-align:left;line-height:1.45}#recall-choices .is-correct{background:#e4f7ec;border-color:#82c7a2;color:#185a45}#recall-feedback{font-size:14px;min-height:42px}.db-phrasebook{padding:4px 24px 25px}.db-phrasebook>h3{font-size:23px;color:#146b61}#duas-learned{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}.db-phrase{min-width:0;background:#fbfffc;border:2px solid #c3e0d3;border-radius:18px;padding:16px}.db-phrase h4{font-size:16px;color:#176659}.db-phrase>p:not([lang=ar]){font-size:14px}.db-phrase .db-arabic{overflow-wrap:anywhere}.db-learning{display:block;padding:14px;text-align:center;border-radius:14px;background:#e9f7ff;color:#0b6586;font-weight:900;min-height:44px}.db-wrap [tabindex="-1"]{outline-offset:4px}@keyframes dbBloom{0%{transform:scale(.8) rotate(-12deg)}40%{transform:scale(1.08) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@media(max-width:600px){.db-wrap{padding:14px 8px 28px}.db-heading{gap:10px;margin:0 6px 16px}.db-heading>a{font-size:12px;max-width:76px}.db-eyebrow{font-size:10px!important}.db-shell{border-width:3px;border-radius:23px}.db-cover{height:145px;border-radius:20px 20px 8px 8px}.db-cover>span{font-size:13px;left:10px;bottom:10px;padding:7px 10px}.db-intro{padding:18px 14px}.db-lengths{gap:8px}.db-lengths strong{font-size:16px}.db-lengths small{font-size:11px}.db-lengths button>span{font-size:26px}.db-instructions{font-size:12px}.db-toolbar{padding:10px 9px;gap:6px}.db-toolbar button{padding:9px;font-size:13px}.db-toolbar strong{font-size:21px}.db-toolbar small{font-size:10px}.db-play{padding:14px 12px 18px}.db-trail{gap:6px;padding-bottom:12px}.db-context{gap:11px;padding:12px}.db-context>span{font-size:32px}.db-context h2{font-size:20px}.db-context p{font-size:13px}.db-build-head{margin-top:12px}.db-build-head h3{font-size:18px}.db-answer{padding:9px;min-height:76px}.db-words{gap:8px}.db-wrap button.db-token{font-size:27px;padding:4px 13px;min-height:55px}.db-tools{gap:8px}.db-tools button{font-size:12px;min-width:85px;padding:8px}.db-feedback{padding:11px;min-height:70px}.db-feedback strong{font-size:16px}.db-feedback p{font-size:13px}.db-result-head{padding:20px 13px 8px}.db-result-actions{gap:9px;margin:12px}.db-result-actions button{padding:11px 13px}.db-recall{margin:18px 12px;padding:14px}.db-phrasebook{padding:4px 12px 22px}#duas-learned{grid-template-columns:1fr}.db-phrase{padding:14px}.db-pause{padding:20px 12px}.db-pause button{margin:12px auto}.db-pause>span{font-size:36px}.db-fine{font-size:12px}}
@media(max-width:350px){.db-lengths{grid-template-columns:1fr}.db-lengths button{grid-template-columns:34px 1fr;align-items:center;text-align:left;justify-items:start;gap:3px 10px;padding:10px 13px}.db-lengths button>span{grid-row:span 2}.db-lengths small{grid-column:2}.db-trail{gap:3px}.db-trail>span{height:24px;flex-basis:24px}.db-tools button{min-width:75px}.db-pause{padding:12px}.db-pause>span{font-size:30px}.db-pause h2{font-size:24px}.db-pause p{font-size:13px}.db-pause button{margin:10px auto}}
@media(max-height:500px){.db-wrap{padding-top:10px}.db-heading{margin-bottom:12px}.db-cover{height:125px}.db-pause{padding:12px}.db-pause>span{display:none}.db-pause h2{font-size:23px}.db-pause button{display:inline-block;margin:6px}.db-toolbar{padding:6px 12px}.db-wrap button.db-token{min-height:48px;font-size:24px;padding:3px 12px}}
@media(prefers-reduced-motion:reduce){.db-wrap *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}html[data-sg-calm=true] .db-wrap *{animation:none!important;transition:none!important}

/* Keep the shared sticky header attached to document scrolling. */
@supports(overflow:clip){html:has(body[data-sg-page="dua-builder"]){overflow-x:clip}body[data-sg-page="dua-builder"].sg-responsive-game{overflow-x:clip;overflow-y:visible}}

/* Short landscape keeps the current moment and pause explanation in view. */
@media(max-height:420px) and (orientation:landscape){.db-toolbar{position:static}.db-play{padding-top:10px}.db-trail{padding-bottom:8px}.db-context{padding:9px 12px;gap:10px}.db-context>span{font-size:28px}.db-context h2{font-size:20px}.db-context p{font-size:12px;margin:5px 0}.db-source{margin:7px 0}.db-build-head{margin-top:10px}}