@font-face{font-family:Arabic;src:url('arabic.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}body{margin:0;color:#052951;background:#f7f5ef;font:16px/1.6 system-ui,sans-serif}main{max-width:980px;margin:auto;padding:24px}button{font:inherit;cursor:pointer;min-height:48px;border:1px solid #b7d2cb;border-radius:14px;padding:12px 22px;background:#fff;color:#052951}button:focus-visible,a:focus-visible{outline:3px solid #ff5642;outline-offset:4px}button:disabled{cursor:default}h1,h2,h3,p{margin:0 0 16px}h2{font-size:32px;line-height:1.2;letter-spacing:-.03em}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:750;text-transform:uppercase;color:#087c78}.surface{background:white;border:1px solid #d7e3dc;border-radius:24px;padding:28px}.reference,.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;direction:rtl}.reference article{padding:20px 12px;text-align:center;background:#e8f3ed;border-radius:18px;direction:ltr;border-top:5px solid #109e99}.reference article:nth-child(2){background:#fae7e2;border-color:#ff5642}.reference article:nth-child(3){background:#fff0c9;border-color:#ffb617}.glyph{font-family:Arabic;display:block;font-size:88px;line-height:1.4}.reference strong,.reference small{display:block}.reference small{font-size:13px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.primary{background:#052951;color:#fff;border-color:#052951;font-weight:700}.quiet{background:transparent;border:0;text-decoration:underline;font-size:14px}.note{font-size:13px;color:#536d79}.trail{display:flex;gap:10px;align-items:center;margin:14px 0 24px;padding:0;list-style:none}.trail li{border:2px solid #cadbd3;background:#fff;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:12px}.trail li.done{background:#0b6f6c;border-color:#0b6f6c;color:#fff}.trail li.current{border-color:#ff5642;outline:3px solid #ff564233}.prompt{font-size:32px;font-weight:750;letter-spacing:-.02em}.choices button{background:#fff;border:2px solid #c7dcd4;border-bottom-width:6px;transition:transform .12s}.choices button:hover{transform:translateY(-3px)}.choices button.right{border-color:#0b6f6c;background:#e6f2eb}.choices button.wrong{border-color:#bf4d3f;background:#fff1ed}.feedback{padding:16px 20px;margin-top:20px;background:#eef4ed;border-radius:14px;min-height:100px}.feedback strong{display:block}.feedback p{margin:4px 0 0}.summary{font-size:24px;font-weight:700}.result-list{padding-left:20px}.result-list li{margin-bottom:10px}.listen-pending{margin:20px 0;padding:14px 18px;border-left:4px solid #ffb617;background:#fff5d8;font-size:14px}[hidden]{display:none!important}
html[data-theme=dark] body{background:#081a2b;color:#f0f5f7}html[data-theme=dark] .surface{background:#112b42;border-color:#365767}html[data-theme=dark] button{background:#193b50;color:#f0f5f7;border-color:#52747d}html[data-theme=dark] .reference article{color:#052951}html[data-theme=dark] .note{color:#b6c9d5}html[data-theme=dark] .eyebrow{color:#70d8c9}html[data-theme=dark] .trail li{background:#173c50;color:#f0f5f7}html[data-theme=dark] .trail li.done{background:#0b6f6c}html[data-theme=dark] .feedback{background:#173d3d}html[data-theme=dark] .listen-pending{background:#3a321d;color:#fff0c9}html[data-theme=dark] .choices button.right{background:#164d43}html[data-theme=dark] .choices button.wrong{background:#542f32}
@media(max-width:600px){main{padding:12px}.surface{padding:20px 14px}h2,.prompt{font-size:26px}.reference,.choices{gap:8px}.glyph{font-size:66px}.reference article{padding:12px 4px}.reference small{font-size:11px}.choices button{padding:12px 6px}.actions button{flex:1}.trail{gap:7px}.trail li{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.detective-welcome{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;margin-bottom:24px}.detective-art{width:100%;height:auto;border-radius:18px}.detective-welcome h2{font-size:34px}.detective-finish{display:flex;gap:18px;align-items:center;margin-bottom:20px}.detective-finish img{width:145px;height:auto;border-radius:14px}.detective-finish p{margin:0}.trail{flex-wrap:wrap}.choices button.right{animation:found .3s ease-out}@keyframes found{50%{transform:translateY(-5px) scale(1.035)}}@media(max-width:600px){.detective-welcome{grid-template-columns:1fr;gap:18px}.detective-art{max-height:230px;object-fit:cover}.detective-welcome h2{font-size:28px}.detective-finish img{width:110px}}

/* v0.2.1: the homepage's teal-shirt male teacher asks the live question. */
.teacher-question{display:flex;gap:26px;align-items:center;margin:4px 0 24px}.teacher-figure{width:150px;height:180px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 7px #05295112)}.teacher-bubble{position:relative;flex:1;border:2px solid #c7ded6;border-radius:24px;padding:22px 26px;background:#eef6f0}.teacher-bubble:before{content:"";position:absolute;left:-11px;top:50%;width:18px;height:18px;transform:translateY(-50%) rotate(45deg);border-left:2px solid #c7ded6;border-bottom:2px solid #c7ded6;background:#eef6f0}.teacher-label{color:#087c78;font-size:12px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px}.teacher-bubble .prompt{margin-bottom:8px}.teacher-bubble .note{margin-bottom:0}html[data-theme=dark] .teacher-bubble{background:#173d3d;border-color:#52747d}html[data-theme=dark] .teacher-bubble:before{background:#173d3d;border-color:#52747d}html[data-theme=dark] .teacher-label{color:#70d8c9}@media(max-width:600px){.teacher-question{gap:14px;align-items:center;margin-bottom:18px}.teacher-figure{width:86px;height:124px}.teacher-bubble{padding:15px 14px;border-radius:18px}.teacher-bubble .prompt{font-size:25px}.teacher-label{font-size:10px;letter-spacing:.05em}.teacher-bubble .note{font-size:12px}}@media(max-width:360px){.teacher-figure{width:66px;height:110px}.teacher-question{gap:12px}.teacher-bubble .prompt{font-size:22px}}

.reference [data-reading-id]{margin-top:12px;min-height:44px;font-size:14px;padding:10px}.reference [data-reading-id]:disabled{opacity:.65;cursor:default}
.mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.mode-options button{text-align:left;font-weight:700}.mode-options small{display:block;font-weight:400;font-size:13px;margin-top:5px}.mode-options button[aria-pressed=true]{outline:3px solid #109e99;background:#e8f3ed;color:#052951}.mode-options button:disabled{opacity:.55}.group-picker{display:block;margin:20px 0;font-weight:700}.group-picker select{display:block;width:100%;max-width:100%;padding:12px;margin-top:8px;font:inherit;color:inherit;background:transparent;border:1px solid #86aaa3;border-radius:10px}.scope-note{border-left:4px solid #109e99;padding:12px 16px;background:#109e9910}.study-sheet{margin:20px 0}.study-sheet summary{cursor:pointer;padding:12px;border:1px solid #b7d2cb;border-radius:12px}.study-sheet .reference{margin-top:16px}.question-glyph,.word-display{font:72px/1.65 Arabic,serif;text-align:center;letter-spacing:0;margin:12px 0}.word-display mark{background:#ffdb87;color:#052951;border-radius:4px}.name-choices{direction:ltr}.name-choices button{font-weight:700;font-size:22px;min-height:100px}.reference .glyph{font-size:68px}.reference{direction:ltr}.reference article{direction:ltr}.choices .glyph{white-space:nowrap}.teacher-bubble p:last-child{margin-bottom:0}html[data-theme=dark] .mode-options button[aria-pressed=true]{background:#164d43;color:#fff}@media(max-width:600px){.mode-options{grid-template-columns:1fr;gap:8px}.mode-options button{min-height:64px}.reference{grid-template-columns:repeat(2,minmax(0,1fr))}.reference .glyph{font-size:64px}.name-choices button{font-size:18px;min-height:80px;padding:8px 3px}.word-display,.question-glyph{font-size:58px}.teacher-bubble{min-width:0}.teacher-question .prompt{font-size:23px}.teacher-figure{width:70px}.group-picker select{font-size:14px}.teacher-bubble p{overflow-wrap:break-word}}@media(prefers-reduced-motion:reduce){.choices button.right{animation:none}.choices button:hover{transform:none}}

/* v0.6.2: visible round exit and native accessible confirmation. */
.round-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #b7d2cb}
.round-nav button{font-size:14px;font-weight:700;padding:9px 16px}.round-nav span{font-size:12px;color:#536d79}
.exit-dialog{max-width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #b7d2cb;border-radius:20px;padding:26px;background:#fff;color:#052951;font:inherit}.exit-dialog::backdrop{background:#001326b3}.exit-dialog h2{font-size:28px}
html[data-theme=dark] .round-nav span{color:#b6c9d5}html[data-theme=dark] .exit-dialog{background:#112b42;color:#f0f5f7;border-color:#52747d}
.group-picker select{font-family:system-ui,Arabic,sans-serif;direction:ltr;unicode-bidi:plaintext}
@media(max-width:600px){.round-nav{align-items:flex-start}.round-nav button{min-height:48px}.exit-dialog{padding:20px}.exit-dialog .actions button{flex:1 1 100%}}

/* v0.7.1 */
.next-adventure{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:center;gap:22px;border:2px solid #109e99;border-radius:20px;padding:18px;margin-top:30px;background:#edf6f0}
.next-adventure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:14px}.next-adventure p:last-child{margin-bottom:0}.result-teacher{align-items:center}.teacher-question{min-width:0}.teacher-bubble{min-width:0}
.feedback[data-state=correct]{border:3px solid #087c70;background:#e3f5e9;color:#064b3b}.feedback[data-state=wrong]{border:2px solid #bf4d3f}.feedback[data-state=correct] strong{font-size:22px}
.join-choices button.right,.letter-rack button.right{background:#e3f5e9;border:3px solid #087c70;color:#064b3b;box-shadow:inset 0 0 0 2px #fff}.choices button.right:after,.join-choices button.right:after{content:'✓ Correct';display:block;font:700 14px/1.4 system-ui;margin-top:8px}
html[data-theme=dark] .primary{background:#ffcf67;color:#052951;border-color:#ffcf67}html[data-theme=dark] .primary:hover{background:#ffe2a0}
html[data-theme=dark] .feedback[data-state=correct]{background:#134b3d;border-color:#70d8a4;color:#effff6}html[data-theme=dark] .next-adventure{background:#173d3d;color:#f0f5f7}
html[data-theme=dark] .join-choices button.right,html[data-theme=dark] .letter-rack button.right{background:#164d43;color:#fff;border-color:#70d8a4;box-shadow:none}
.feedback+.actions:has([data-action=next]:not([hidden])){padding:14px;border:2px solid #109e99;border-radius:16px;background:#109e9910;justify-content:flex-end}
@media(max-width:600px){.next-adventure{grid-template-columns:1fr;padding:16px}.next-adventure img{max-width:260px;justify-self:center}.next-adventure button{width:100%}.teacher-question{align-items:flex-start}.teacher-bubble .prompt{font-size:23px}.feedback+.actions button{width:100%;flex:1 1 100%}}

/* v0.7.2 compact play surface. No automatic scrolling after an answer. */
main:has(.round-nav){max-width:1000px;padding:10px 16px}
.surface:has(.round-nav){padding:16px 20px}
.round-nav{padding-bottom:8px;margin-bottom:8px;min-height:44px}.round-nav button{min-height:40px;padding:7px 12px}
.surface:has(.round-nav)>.eyebrow{margin:0 0 6px}
.trail{margin:6px 0 10px;gap:8px}.trail li{width:27px;height:27px}
.surface:has(.round-nav) .teacher-question{gap:16px;margin:0 0 10px}
.surface:has(.round-nav) .teacher-figure{width:90px;height:105px}
.surface:has(.round-nav) .teacher-bubble{padding:12px 18px;border-radius:18px}
.surface:has(.round-nav) .teacher-label{font-size:10px;margin:0 0 4px}
.surface:has(.round-nav) .prompt{font-size:26px;line-height:1.2;margin:0 0 5px}
.surface:has(.round-nav) .teacher-bubble p:last-child{font-size:13px;margin:0}
.surface:has(.round-nav) .choices{gap:12px}.surface:has(.round-nav) .choices button{padding:6px 12px;min-height:90px}
.surface:has(.round-nav) .choices .glyph{font-size:58px;line-height:1.2}
.surface:has(.round-nav) .feedback{margin-top:12px;padding:10px 14px;min-height:80px;font-size:14px}
.surface:has(.round-nav) .feedback strong,.surface:has(.round-nav) .feedback[data-state=correct] strong{font-size:17px}
.surface:has(.round-nav) .actions{margin-top:10px;gap:10px;min-height:46px}
.surface:has(.round-nav) .actions button{min-height:44px;padding:9px 18px;font-size:14px}
.surface:has(.round-nav) .feedback+.actions:has([data-action=next]:not([hidden])){padding:0;border:0;background:none}
.surface:has(.round-nav) .choices button.right:after{font-size:12px;margin-top:3px}
@media(max-width:600px){main:has(.round-nav){padding:8px}.surface:has(.round-nav){padding:12px}.surface:has(.round-nav) .teacher-figure{width:60px;height:85px}.surface:has(.round-nav) .teacher-question{gap:10px}.surface:has(.round-nav) .teacher-bubble{padding:10px 12px}.surface:has(.round-nav) .prompt{font-size:21px}.surface:has(.round-nav) .choices .glyph{font-size:50px}.round-nav span{font-size:11px}}

.surface:has(.round-nav) .choices button:after{content:'';display:block;height:17px;margin-top:3px;font:700 12px/1.4 system-ui}.surface:has(.round-nav) .choices button.right:after{content:'✓ Correct'}.surface:has(.round-nav) .feedback{min-height:100px}

/* v0.8.1: two clear alternatives, with compact actionable revision notes. */
.other-adventures{margin-top:24px}.other-adventure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.other-adventure-grid .next-adventure{display:flex;flex-direction:column;gap:0;margin:0;min-width:0}.other-adventure-grid .next-adventure img{width:100%;height:150px;object-fit:contain;aspect-ratio:3/2}.other-adventure-grid .next-adventure>div{padding:14px}.other-adventure-grid .next-adventure h3{font-size:21px}.other-adventure-grid .next-adventure p{font-size:14px}.other-adventure-grid .next-adventure .eyebrow{display:none}.other-adventure-grid button{width:100%;font-size:14px;padding:10px}
.revision-notes{margin:20px 0;padding:16px;border:1px solid #dbbd74;border-radius:16px;background:#fff5dc}.revision-notes ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}.revision-notes li{padding-top:10px;border-top:1px solid #cda95755}.revision-notes p{font-size:14px;margin:5px 0 8px}.revision-notes button,.saved-revision button{font-size:13px;padding:7px 12px}.saved-revision{background:#e6f4ee;padding:12px;border-radius:12px}.revision-notes [lang=ar]{font-family:Arabic}
html[data-theme=dark] .revision-notes{background:#3b321e;color:#fff2cf;border-color:#8d7540}html[data-theme=dark] .saved-revision{background:#193e40;color:#e6f5f0}
@media(max-width:600px){.other-adventure-grid{grid-template-columns:1fr}.other-adventure-grid .next-adventure{display:grid;grid-template-columns:110px 1fr}.other-adventure-grid .next-adventure img{height:100%;min-height:110px}.other-adventure-grid .next-adventure h3{font-size:19px}}