:root{--quest-bg:#201b17;--quest-header:#2b2219;--quest-brass:#b79b67;--quest-heading:#f3e7c9;--quest-title:#eddbad;--quest-owner:#d0b97f;--quest-card:#30271e;--quest-text:#f4eedf;--quest-border:#92764e;--quest-ayah:#fff8e6;--quest-muted:#c8baa5;--quest-answer:#3b2e20;--quest-line:#a28555;--quest-answer-text:#fff6dd;--quest-button:#dac18a;--quest-button-text:#2b2115;--quest-gold:#e0cb98;--quest-feedback-text:#fff1cc;--quest-feedback:#3d3020;--quest-pass:#cde1bc;--quest-pass-bg:#2c402b;}
/* Quest integration: quiet reading surface; decoration belongs to the shell. */
body.mumin-layout{background:var(--quest-bg)}
.mumin-layout .app>header{background:var(--quest-header);border-bottom-color:var(--quest-brass);color:var(--quest-heading)}
.mumin-layout .brand-name{display:block;white-space:nowrap;font-family:Georgia,serif;font-size:clamp(20px,5.5vw,28px);line-height:1.15;color:var(--quest-title)}
.quest-owner{display:block;font:12px/1.5 Georgia,serif;letter-spacing:1px;color:var(--quest-owner)}
.mumin-layout #main .flow-question{background:var(--quest-card);color:var(--quest-text);border:1px solid var(--quest-border);border-radius:12px;padding:24px;box-shadow:none;outline:none}
.mumin-layout #main .flow-question::before,.mumin-layout #main .flow-question::after{content:none}
.mumin-layout #main .flow-question h1{margin:12px 0;font-size:19px;color:var(--quest-text)}
.mumin-layout #main .flow-ayah{color:var(--quest-ayah);font-size:var(--quran-size,28px);line-height:2.1;margin:20px 0}
.mumin-layout #main .flow-question :is(.flow-note,.flow-quiet,.flow-typing label){color:var(--quest-muted)}
.mumin-layout #main .flow-answers button,.mumin-layout #main .flow-typing input{background:var(--quest-answer);border:1px solid var(--quest-line);color:var(--quest-answer-text);box-shadow:none;min-height:60px}
.mumin-layout #main .flow-answers button:disabled{opacity:.45}
.mumin-layout #main .flow-question button.primary{background:var(--quest-button);color:var(--quest-button-text);border:1px solid var(--quest-button);min-height:44px}
.mumin-layout .flow-difficulty{grid-template-columns:repeat(2,minmax(0,1fr))}
.quest-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mumin-layout #main .quest-controls button{background:transparent;color:var(--quest-gold);border:1px solid var(--quest-line);min-height:44px;padding:8px 12px;font-size:13px}
.quest-points{font-size:13px;text-align:end;color:var(--quest-gold);margin:12px 0}
.mumin-layout #main .flow-feedback.correct,.mumin-layout #main .flow-feedback.wrong{width:100%;max-width:none;color:var(--quest-feedback-text);border:1px solid var(--quest-brass);background:var(--quest-feedback);margin:12px 0 0}
.flow-feedback .full{display:block;width:100%;margin-top:12px}
.mumin-layout .flow-verdict.pass{color:var(--quest-pass);background:var(--quest-pass-bg)}
@media(max-width:690px){.mumin-layout #main{padding:16px 10px}.mumin-layout #main .flow-question{padding:16px 12px;width:100%;max-width:100%}.mumin-layout .app>header{padding-inline:10px}.mumin-layout #main .flow-quiet{margin-bottom:10px;font-size:12px}.flow-answers{gap:8px}.mumin-layout #main .flow-answers button{padding:10px 6px;line-height:1.7;height:auto;overflow:visible}.mumin-layout #main .flow-question h1{font-size:17px}}

/* First paint before data/modules arrive; does not write or override saved preferences. */
.quest-loading{--bg:var(--quest-bg);--wood:var(--quest-card);--wood-raised:var(--quest-header);--text:var(--quest-text);--muted:var(--quest-muted)}
.quest-loading .app,.quest-loading #main{background:var(--quest-bg);color:var(--quest-text)}
.quest-loading #nav{display:none!important}.quest-loading .brand-logo{display:none!important}
.quest-loading .startup-status{padding:24px;text-align:center;color:var(--quest-muted)}
.quest-loading .startup-screen{display:grid;place-items:center;min-height:160px}


/* Home Practice chooser: presentation only; existing actions own sessions/selection. */
.practice-chooser{width:min(480px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--wood);color:var(--text)}
.practice-chooser::backdrop{background:rgb(0 0 0 / .6)}
.practice-chooser-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.practice-chooser-head h2{margin:0;font-size:22px}.practice-chooser button{min-height:48px;white-space:normal}
.practice-chooser-options{display:grid;gap:12px}.practice-chooser-options>button{width:100%;text-align:start;padding:12px 16px}
.practice-chooser p{font-size:14px;color:var(--muted);line-height:1.5;margin:12px 0 0}

.quran-size-settings{display:grid;gap:12px}.quran-size-control{display:flex;align-items:center;gap:14px;min-width:0}.quran-size-control input{flex:1;min-width:0;width:100%;min-height:44px;accent-color:var(--gold)}.quran-size-control output{min-width:52px;white-space:nowrap;font-variant-numeric:tabular-nums}.quran-size-settings .quran-size-preview{font-family:var(--arabic-font);font-size:var(--quran-size,28px);line-height:1.8;padding:12px;margin:0;border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere;text-align:center}.quran-size-settings small{color:var(--muted)}

.reader-ayah p{font-size:var(--quran-size,28px)}

html[lang="ar"] .mumin-layout .brand-name{font-family:var(--arabic-font);font-size:clamp(16px,4.6vw,24px);line-height:1.5;white-space:normal;max-width:100%;text-wrap:balance}

/* Opening prefaces stay visually separate without changing the underlying verse. */
.bismi{display:block;font-size:.72em;line-height:1.9;margin-block-end:.55em;text-align:center;white-space:normal}
.flow-ayah-body,.context-verse{display:block}.context-verse{margin-block:.4em}
.mumin-layout #main .flow-ayah.numbered-basmala{font-size:calc(var(--quran-size,28px)*.78)}
.context-verse.numbered-basmala{font-size:.78em}
.flow-filled-answer{display:inline;padding:0 .12em;border-radius:4px;border-bottom:2px solid #c7b677}
.flow-filled-answer.correct{background:#30432b;color:#eef4dc}.flow-filled-answer.revealed{background:#59462c;color:#f4e8cc}
.mumin-layout #main .flow-feedback.correct{background:#2d402b;border-color:#a7bd8d;color:#eef4dc}
.mumin-layout #main .flow-feedback.wrong{background:#4b3027;border-color:#c09a7c;color:#f7decb}
.flow-extra-keyboard{max-width:560px;margin:14px auto 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--wood)}
.keyboard-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;font-size:13px}
.keyboard-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.flow-extra-keyboard .arabic-keyboard{margin-block:12px 0}.flow-extra-keyboard .key-row{gap:3px}
.flow-extra-keyboard .key-row button{min-width:0;min-height:44px;padding:6px 2px;font-size:19px;background:var(--wood-raised);border-color:var(--line)}
.flow-extra-keyboard .key-tools button{max-width:none;font-size:14px}

.flow-question{container-type:inline-size}
.flow-verse-card{overflow:hidden;border:1px solid #b69a64;border-radius:12px;margin:16px 0}
.flow-verse-head{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;background:#35291d;color:#f1e2c2;font-size:15px}
.mumin-layout #main .flow-verse-card .flow-ayah{background:#f2e7d3;color:#30271d;margin:0;padding:22px 14px;text-align:center}
.flow-verse-foot{padding:8px 12px;background:#35291d;color:#dbc497;text-align:center;font-size:12px}
.flow-verse-card .flow-blank{background:#dac8a433;border-bottom-color:#8c6d38}
@container(min-width:460px){.flow-answers{grid-template-columns:repeat(4,minmax(0,1fr))}}
.flow-verse-card{box-shadow:0 5px 18px rgb(0 0 0 / .18)}

/* Choices: walnut shell, matte paper and lighter brown answers form distinct layers. */
.mumin-layout #main .flow-choice-question{background:#2a221b;border-color:#786247;box-shadow:0 8px 24px rgb(0 0 0 / .14)}
.mumin-layout #main .flow-choice-question h1{color:#f4e7cd;margin:16px 0 18px}
.mumin-layout #main .flow-choice-question .flow-quiet{color:#d2c2a9}
.flow-choice-question .flow-question-progress{margin-block:4px 16px;font-variant-numeric:tabular-nums}
.flow-choice-question .flow-question-progress>span{padding:6px 10px;border-radius:6px;background:#3e3124;color:#f1dfba}
.flow-question-meter{display:block;width:76px;height:5px;flex:0 0 76px;border:0;border-radius:4px;overflow:hidden;background:#51422f;color:#cdb07a;appearance:none}
.flow-question-meter::-webkit-progress-bar{background:#51422f;border-radius:4px}
.flow-question-meter::-webkit-progress-value{background:#cdb07a;border-radius:4px}
.flow-question-meter::-moz-progress-bar{background:#cdb07a;border-radius:4px}
.flow-choice-question .flow-verse-head{background:#493829;color:#f5e6c6}
.mumin-layout #main .flow-choice-question .flow-verse-card .flow-ayah{background:#f6eedf;color:#30271d}
.flow-choice-question .flow-verse-foot{background:#dfceb2;color:#51402c}
.mumin-layout #main .flow-choice-question .flow-answers button{background:#bda17b;border-color:#c7ae85;color:#2b2118;box-shadow:0 2px 0 #806746;padding-block:11px}
.mumin-layout #main .flow-choice-question .flow-answers button:not(:disabled):hover{background:#d1b894}
.mumin-layout #main .flow-choice-question .flow-answers button:focus-visible{outline:3px solid #e6c177;outline-offset:3px}
.mumin-layout #main .flow-choice-question .flow-answers button:disabled{box-shadow:none}
.mumin-layout #main .flow-choice-question .flow-answers .answer-correct:disabled{opacity:1;background:#30432b;color:#eef4dc;border-color:#a7bd8d}
.mumin-layout #main .flow-choice-question .flow-answers .answer-tried:disabled{opacity:1;background:#593c30;color:#f7e1d0;border-color:#c39c7e}
.mumin-layout #main .flow-choice-question .flow-answers .answer-revealed:disabled{opacity:1;background:#59462c;color:#f4e8cc;border-color:#cdb07a}
.mumin-layout #main .flow-choice-question .quest-controls button{background:#3b2e21;color:#f0d8a3;border-color:#9f8258}
.mumin-layout #main .flow-choice-question .quest-controls button[aria-pressed=true]{background:#5b482e;border-color:#d1b67e}
.mumin-layout #main .flow-choice-question .quest-points{color:#e0c796}

/* Local review: a calm reading surface with secondary tools below the answers. */
body.mumin-layout[data-view=quiz]{--bg:#211b16;--wood:#30261e;--wood-raised:#433326;--text:#f4ead9;--muted:#cdbb9e;--line:#8d7350;--gold:#d2b77e;--quest-bg:#211b16;--quest-header:#2b221a;--quest-title:#ead7af;--quest-owner:#cdbb9e;--quest-muted:#cdbb9e;--quest-text:#f4ead9;--quest-answer:#bda17b;--quest-answer-text:#2b2118;--quest-gold:#dfc697;background:#211b16}
body.mumin-layout[data-view=quiz] #main .flow-question{padding:0;border:0;background:transparent;box-shadow:none}
body.mumin-layout[data-view=quiz] #main .flow-question>.flow-quiet{margin-bottom:8px;line-height:1.5}
body.mumin-layout[data-view=quiz] #main .flow-question-progress{margin-block:4px 10px}
body.mumin-layout[data-view=quiz] .flow-question-progress>span{padding:6px 10px;border-radius:6px;background:#3e3124;color:#f1dfba}
body.mumin-layout[data-view=quiz] #main .flow-question h1{margin:12px 0 16px;font-size:18px;line-height:1.5;font-weight:400;color:#f0e1c6}
body.mumin-layout[data-view=quiz] .flow-verse-card{margin:18px 0 22px;border-color:#aa8e61;border-radius:15px;box-shadow:0 5px 18px rgb(0 0 0 / .14)}
body.mumin-layout[data-view=quiz] .flow-verse-head{padding:11px 16px;background:#443526;color:#f5e6c6;font-size:14px}
body.mumin-layout[data-view=quiz] #main .flow-verse-card .flow-ayah{display:flex;flex-direction:column;justify-content:center;min-height:180px;padding:32px 18px;background:#f6eedf;color:#30271d;line-height:2.2}
body.mumin-layout[data-view=quiz] .flow-verse-foot{padding:7px 12px;background:#e1d1b6;color:#51402c;font-size:11px}
body.mumin-layout[data-view=quiz] .flow-answers{gap:12px;grid-auto-rows:1fr;align-items:stretch}
body.mumin-layout[data-view=quiz] #main .flow-answers button{min-height:68px;padding:12px 9px;line-height:1.6;border-radius:10px}
body.mumin-layout[data-view=quiz] .quest-controls{gap:8px;align-items:center;margin-top:20px;padding-top:14px;border-top:1px solid #594631}
body.mumin-layout[data-view=quiz] #main .quest-controls button{min-height:44px;padding:7px 10px;font-size:12px;line-height:1.5;background:transparent;color:#e1cba2;border:1px solid #8d7350;border-radius:8px}
body.mumin-layout[data-view=quiz] #main .quest-controls .flow-exit{margin-inline-start:auto;color:#cfbca0;border-color:transparent}
body.mumin-layout[data-view=quiz] #main .quest-controls button[aria-pressed=true]{background:#463724;border-color:#c8ac75}
body.mumin-layout[data-view=quiz] .quest-points{margin:12px 0 8px;font-size:12px;color:#cfb98e}
body.mumin-layout[data-view=quiz] .flow-typing{margin-top:22px}
body.mumin-layout[data-view=quiz] .flow-extra-keyboard{border-color:#756043;background:#2c231c}
body.mumin-layout[data-view=quiz] #main .flow-extra-keyboard button{color:#f0dfbd;border-color:#8d7350}
body.mumin-layout[data-view=quiz] #main :is(button,input):focus-visible{outline:3px solid #d2b77e;outline-offset:3px}
@media(min-width:700px){body.mumin-layout[data-view=quiz] #main .flow-verse-card .flow-ayah{min-height:220px;padding:40px 28px}body.mumin-layout[data-view=quiz] .flow-answers{gap:16px}}

/* Keep the game keyboard in the answer form, without summoning the phone IME. */
body[data-view=quiz] #main .typing-entry{position:relative;width:100%;margin:10px 0}
body[data-view=quiz] #main .typing-entry #typedAnswer{display:block;width:100%;min-width:0;box-sizing:border-box;margin:0;padding-inline:52px;text-align:center;font-size:26px;min-height:60px}
body[data-view=quiz] #main .typing-entry .keyboard-toggle{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);width:44px;min-height:44px;padding:8px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;box-shadow:none}
body[data-view=quiz] #main .keyboard-toggle span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-view=quiz] #main .typed-answer .arabic-keyboard{margin:0 0 10px;padding:8px 4px;border:1px solid var(--line);border-radius:8px;background:var(--wood)}
body[data-view=quiz] #main .typed-answer .arabic-keyboard[hidden]{display:none}
body[data-view=quiz] #main .typed-answer .key-row{display:flex;justify-content:center;gap:3px;margin:3px 0}
body[data-view=quiz] #main .typed-answer .key-row button{flex:1 1 0;width:auto;min-width:0;max-width:48px;min-height:44px;padding:6px 1px;font-size:19px;touch-action:manipulation;background:var(--wood-raised);border-color:var(--line)}
body[data-view=quiz] #main .typed-answer .key-tools button{max-width:120px}
body[data-view=quiz] #main .typed-answer .typed-check{width:100%;min-height:48px;margin:0}
body.native-typing[data-view=quiz] .flow-verse-card,body.native-typing[data-view=quiz] .question-card{position:sticky;top:var(--typing-viewport-top,0px);z-index:5;max-height:calc(var(--typing-viewport-height,100dvh)*.5);overflow:auto;overscroll-behavior:contain}
@media(max-width:360px),(max-height:500px){body[data-view=quiz] #main .typed-answer .key-row{gap:2px}body[data-view=quiz] #main .typed-answer .key-row button{font-size:17px;padding-inline:0}}