:root{--paper:#f8f6ef;--surface:#fffefa;--ink:#193e34;--body:#374e46;--muted:#63726b;--line:#dcded3;--wash:#edf1e8;--accent:#956021;--accent-wash:#f8edd8;--arabic:"Noto Naskh Arabic","Traditional Arabic","Geeza Pro","Segoe UI",Tahoma,serif;--sans:"Segoe UI",Tahoma,Arial,sans-serif}
*{box-sizing:border-box;letter-spacing:normal}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.8}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.48}a{color:var(--ink);text-underline-offset:5px}button:focus-visible,a:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button:focus:not(:focus-visible),[tabindex="-1"]:focus:not(:focus-visible){outline:none}h1,h2,h3,p{margin:0}img{display:block;max-width:100%}[hidden]{display:none!important}.wrap{width:min(1340px,calc(100% - 64px));margin:auto}.skip{position:fixed;top:8px;right:12px;z-index:40;background:var(--ink);color:white;padding:12px;transform:translateY(-150%)}.skip:focus{transform:none}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:28px;font-weight:700;display:flex;align-items:center;gap:10px}.brand b{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ink);color:var(--paper);font-size:34px}.topbar nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.topbar nav a{padding:8px;text-decoration:none;font-size:16px}.topbar nav a[aria-current]{text-decoration:underline}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink);border-radius:12px;padding:11px 20px;min-height:48px;background:var(--ink);color:var(--surface);text-decoration:none;font-size:18px;line-height:1.6}.button.secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}.button:hover:not(:disabled){filter:brightness(.95)}.button svg{width:21px;height:21px;flex:none}.eyebrow{color:var(--accent);font-size:16px}.hub-intro{padding:42px 0 30px;max-width:840px}.hub-intro h1{font-family:var(--arabic);font-size:clamp(40px,4.5vw,66px);line-height:1.7}.hub-intro p:last-child{color:var(--body);margin-top:8px}.story-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.story-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface)}.story-card>img{width:100%;aspect-ratio:3/2;object-fit:contain;background:var(--wash)}.card-content{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}.card-meta{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted)}.letter-badge{display:inline-grid;place-items:center;min-width:54px;min-height:54px;border-radius:16px;background:var(--wash);color:var(--ink);font:38px/1.4 var(--arabic);padding:2px 8px}.card-content h2{font:600 clamp(26px,2.2vw,35px)/1.8 var(--arabic)}.card-content>p{font:24px/1.9 var(--arabic);color:var(--body)}.card-content .button{margin-top:auto}.parent-note{padding:22px 24px;margin:28px 0;background:var(--wash);border-radius:16px;max-width:930px}.parent-note h2{font-size:20px;margin-bottom:6px}.parent-note p{color:var(--body);font-size:17px}.story-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0 22px}.story-heading h1{font:600 clamp(30px,3.7vw,52px)/1.8 var(--arabic)}.story-heading>div{min-width:0}.story-heading .button{flex:none}.reader{border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:18px;min-width:0}.reader-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.page-indicator{color:var(--muted);font-size:16px}.page-dots{display:flex;gap:7px;align-items:center}.page-dots span{width:8px;height:8px;border-radius:50%;background:var(--line)}.page-dots span.active{background:var(--accent);width:22px;border-radius:6px}.reading-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:32px;align-items:center;min-height:0}.story-art{border-radius:17px;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:var(--wash)}.passages{min-width:0;padding:10px 12px}.passage{font:400 clamp(32px,3vw,48px)/2 var(--arabic);text-align:right;overflow-wrap:break-word}.passage p+p{margin-top:8px}.passage+.passage{margin-top:30px;border-top:1px solid var(--line);padding-top:25px}.reader-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}.reader-nav .button{min-width:130px}.reader-hint{font-size:15px;color:var(--muted);margin-top:12px}.js-only{display:none}.js-ready .js-only{display:flex}.js-ready .passage+.passage{margin:0;border:0;padding-top:0}.story-links{display:flex;gap:20px;flex-wrap:wrap;margin:24px 0;font-size:16px}.game{border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:clamp(20px,4vw,48px);margin:24px 0;scroll-margin-top:18px}.game h2{font:600 clamp(30px,3.3vw,48px)/1.8 var(--arabic)}.game-instruction{font:26px/1.9 var(--arabic);margin:8px 0 20px}.game-status{display:flex;justify-content:space-between;gap:20px;color:var(--muted);margin:15px 0}.game-word{font:clamp(52px,6vw,86px)/1.9 var(--arabic);text-align:center;padding:12px;border-radius:16px;background:var(--wash);margin-bottom:20px;overflow-wrap:anywhere}.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.choice{position:relative;min-height:90px;border:2px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);font:38px/1.9 var(--arabic);padding:12px;overflow-wrap:break-word}.choice.position-choice{font-size:28px}.choice.correct{border-color:var(--ink);background:var(--wash);opacity:1}.choice .check{position:absolute;top:3px;left:12px;font:22px var(--sans)}.feedback{min-height:58px;margin:14px 0;font:24px/1.9 var(--arabic)}.feedback.try{color:#85511b}.game-actions{display:flex;gap:12px;flex-wrap:wrap}.game-result{background:var(--wash);padding:25px;border-radius:18px;margin:15px 0}.game-result h3{font:600 38px/1.8 var(--arabic)}.game-result p{font:28px/1.9 var(--arabic)}.reader-modal{padding:16px 22px;border:1px solid var(--line);border-radius:24px;width:94vw;height:92vh;height:92dvh;max-width:94vw;max-height:92vh;max-height:92dvh;background:var(--paper);color:var(--ink);overflow:hidden}.reader-modal::backdrop{background:#0b241bb5}.modal-shell{height:100%;display:flex;flex-direction:column;gap:12px;min-height:0}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal-heading h2{font:600 clamp(24px,2vw,38px)/1.7 var(--arabic)}.close{font-size:28px;min-width:48px;padding:0 12px;line-height:1.5}.modal-mount{flex:1;min-height:0}.modal-mount>.reader{height:100%;border:0;padding:12px;background:var(--surface);gap:10px}.modal-mount .reading-grid{flex:1;overflow:auto;align-items:center}.modal-mount .passage{font-size:clamp(34px,4vw,110px);line-height:1.85}.modal-mount .story-art{max-height:100%}.modal-mount .reader-nav{flex:none}.modal-mount #enlarge-reader{display:none}.modal-open{overflow:hidden}.modal-backdrop{position:fixed;inset:0;background:#0b241bb5;z-index:90}.reader-modal.fallback{display:block;position:fixed;inset:4vh 3vw;margin:0;z-index:91}.tv-mode .wrap{width:94vw;max-width:none}.tv-mode .passage{font-size:clamp(40px,3.1vw,110px)}.tv-mode .button{font-size:clamp(20px,1.4vw,44px);min-height:56px}.tv-mode .choice{font-size:clamp(38px,3vw,96px)}.tv-mode .choice.position-choice{font-size:clamp(26px,2vw,64px)}.tv-mode :focus{outline:4px solid var(--accent);outline-offset:5px}.tv-mode .game-instruction{font-size:clamp(26px,2vw,64px)}footer{border-top:1px solid var(--line);margin:38px 0 24px;padding-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:15px;color:var(--muted)}
@media(max-width:850px){.story-cards{grid-template-columns:1fr}.story-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}.story-card>img{height:100%;object-fit:cover}.reading-grid{gap:16px}.passage{font-size:32px}.story-heading{align-items:flex-start}.story-heading .button{font-size:16px;padding:10px 12px}}
@media(max-width:600px){.wrap{width:calc(100% - 28px)}.topbar{gap:12px;flex-wrap:wrap;padding:14px 0}.topbar nav{gap:5px}.topbar nav a{font-size:15px;padding:7px}.topbar .button{font-size:15px;min-height:44px;padding:7px 11px}.hub-intro{padding-top:24px}.hub-intro h1{font-size:42px}.story-card{display:flex}.story-card>img{height:auto;object-fit:contain}.card-content{padding:18px}.card-content h2{font-size:32px}.story-heading{gap:12px;flex-wrap:wrap;padding:20px 0 16px}.story-heading h1{font-size:32px}.reader{padding:12px;gap:12px;border-radius:18px}.reading-grid{grid-template-columns:1fr;gap:8px}.story-art{max-height:255px}.passages{padding:4px 8px}.passage{font-size:32px;line-height:1.95}.reader-nav .button{min-width:0;font-size:17px;padding:10px 16px}.choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.choice{font-size:34px;padding:12px 8px;min-height:90px}.choice.position-choice{font-size:24px}.game-instruction{font-size:24px}.reader-modal{padding:12px;width:96vw;max-width:96vw;height:94vh;height:94dvh;max-height:94dvh;border-radius:18px}.modal-heading h2{font-size:23px}.modal-mount>.reader{padding:8px}.modal-mount .reading-grid{display:block}.modal-mount .story-art{max-height:205px;margin-bottom:10px}.modal-mount .passage{font-size:34px}.modal-mount .reader-top{font-size:14px}.reader-modal.fallback{inset:3vh 2vw}.tv-mode .passage{font-size:36px}.tv-mode .reading-grid{grid-template-columns:1fr}.story-links{gap:12px}}
@media(prefers-reduced-motion:no-preference){button,a{transition:background .15s ease,outline-color .15s ease}.passage:not([hidden]){animation:appear .2s ease}@keyframes appear{from{opacity:.4}to{opacity:1}}}
@media print{.topbar nav,.js-only,.game,.story-links,footer{display:none!important}.passage[hidden]{display:block!important}.reading-grid{display:block}.story-art{max-width:450px;margin:auto}.passage{font-size:22pt;break-inside:avoid}.reader{border:0}.wrap{width:100%}.reader-hint{display:none}}
.story-shortcuts,.card-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.story-shortcuts{justify-content:flex-start}.card-actions{margin-top:auto}.card-actions .button{margin-top:0}.story-heading>.story-shortcuts{flex-shrink:0;max-width:100%}@media(max-width:850px){.story-heading{flex-wrap:wrap}.story-shortcuts{width:100%}}@media(max-width:600px){.story-shortcuts .button{flex:1}.story-shortcuts .letter-badge{min-width:36px;min-height:36px;font-size:30px}.card-actions .button{flex:1}}@media print{.story-shortcuts,.card-actions{display:none}}