@font-face{font-family:"Noto Naskh Arabic";font-weight:100 650;font-display:block;src:url(fonts/noto-naskh-arabic-600.ttf) format("truetype")}
@font-face{font-family:"Noto Naskh Arabic";font-weight:651 900;font-display:block;src:url(fonts/noto-naskh-arabic-700.ttf) format("truetype")}
@font-face{font-family:"NaskhL";font-weight:100 900;font-display:block;src:url(fonts/naskh-L-b7de8a043a.woff2) format("woff2")}
@font-face{font-family:"NaskhF";font-weight:100 900;font-display:block;src:url(fonts/naskh-F-a12d95724e.woff2) format("woff2")}
@font-face{font-family:"NaskhD";font-weight:100 900;font-display:block;src:url(fonts/naskh-D-fa08a5de90.woff2) format("woff2")}
@font-face{font-family:"NaskhK";font-weight:100 900;font-display:block;src:url(fonts/naskh-K-c3e8f4db74.woff2) format("woff2")}
@font-face{font-family:"NaskhS";font-weight:100 900;font-display:block;src:url(fonts/naskh-S-ad4052ddc5.woff2) format("woff2")}
@font-face{font-family:"NaskhH";font-weight:100 900;font-display:block;src:url(fonts/naskh-H-c2e1c507fb.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:100 499;font-display:block;src:url(fonts/noto-sans-arabic-400.ttf) format("truetype")}
@font-face{font-family:"Noto Sans Arabic";font-weight:500 650;font-display:block;src:url(fonts/noto-sans-arabic-600.ttf) format("truetype")}
@font-face{font-family:"Noto Sans Arabic";font-weight:651 900;font-display:block;src:url(fonts/noto-sans-arabic-700.ttf) format("truetype")}
:root{
  --bg:#F8F4EE;--card:#FFFDF9;--ink:#302C32;--primary:#5C4B53;--brand:#CFB5AE;--soft:#E9E2DB;
  --fatha:#D62828;--damma:#1D4ED8;--kasra:#15803D;--sukun:#6B7280;--shadda:#7E22CE;
  --hl:#FFF1AD;--ok:#15803D;--retry:#A55319;--muted:#8A7F86;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;touch-action:none;overscroll-behavior:none}
body{font-family:"Noto Sans Arabic",sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none}
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#stage{width:1920px;height:1080px;position:relative;flex:none;transform-origin:center center;background:var(--bg);overflow:hidden}
.naskh{font-family:"Noto Naskh Arabic",serif}
button{font-family:inherit;cursor:pointer;border:none}
.screen{position:absolute;inset:0;display:none}
.screen.on{display:block}
/* top bar */
.topbar{position:absolute;top:36px;right:56px;left:56px;height:84px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:18px}
.brand .name{font-weight:700;font-size:30px;color:var(--primary)}
.brand .sub{font-size:20px;color:var(--muted)}
.chip{background:var(--card);border:2px solid var(--soft);border-radius:999px;padding:12px 26px;font-size:24px;color:var(--primary);display:flex;align-items:center;gap:10px}
.dots{display:flex;gap:10px}
.dots i{width:34px;height:8px;border-radius:8px;background:var(--soft)}
.dots i.on{background:var(--primary)}
.btn{background:var(--primary);color:#fff;border-radius:28px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:18px}
.btn.big{font-size:52px;padding:30px 120px;border-radius:36px}
.btn.mid{font-size:34px;padding:20px 54px}
.btn.ghost{background:var(--card);color:var(--primary);border:3px solid var(--soft)}
.btn:active{transform:scale(.97)}
.card{background:var(--card);border-radius:36px;border:2px solid #EFE8E1}
.bottomnav{position:absolute;bottom:40px;left:56px;right:56px;display:flex;justify-content:space-between;align-items:center}
.bottomnav{pointer-events:none}.bottomnav>*{pointer-events:auto}
.gtabs,.wlist,.units,.acts,.rtabs{z-index:3}
.iconbtn{width:96px;height:96px;border-radius:28px;background:var(--card);border:2px solid var(--soft);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.iconbtn svg{width:44px;height:44px}
/* welcome */
#welcome .hero{position:absolute;left:150px;top:190px;width:560px;height:660px;border-radius:280px 280px 60px 60px;background:#EFE5DF;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
#welcome .text{position:absolute;right:170px;top:250px;width:860px}
#welcome h1{font-size:96px;margin:0 0 10px;font-weight:700;color:var(--ink)}
#welcome .lead{font-size:40px;color:var(--muted);margin:0 0 70px}
.sign{display:flex;align-items:center;gap:22px;margin-bottom:80px}
.sign .emb{width:130px;display:flex;align-items:center;justify-content:center}
.sign b{display:block;font-size:42px}
.sign span{font-size:26px;color:var(--muted)}
#welcome .start{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
#welcome .hint{font-size:26px;color:var(--muted);margin-right:40px}
/* groups / letters */
#letters h2,#game h2,#trace h2{font-size:58px;margin:0;text-align:center}
.gtabs{position:absolute;bottom:56px;right:0;left:0;display:flex;justify-content:center;gap:14px}
.gtab{background:var(--card);border:2px solid var(--soft);border-radius:22px;padding:14px 22px;font-family:'Noto Naskh Arabic',serif;font-size:30px;color:var(--primary)}
.gtab.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.lettergrid{position:absolute;top:290px;right:0;left:0;display:flex;justify-content:center;gap:48px}
.lcard{width:330px;height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:transform .15s}
.lcard .g{font-family:"Noto Naskh Arabic",serif;font-size:210px;line-height:1.2;color:var(--ink)}
.lcard .n{font-size:32px;color:var(--muted)}
.lcard:active{transform:scale(.97)}
.lcard.soon{opacity:.5}
.subtitle{text-align:center;font-size:30px;color:var(--muted);margin-top:8px}
/* letter card */
#letter .title{position:absolute;top:150px;right:0;left:0;text-align:center}
#letter .title h2{font-size:54px;margin:0}
.lc-main{position:absolute;top:250px;left:600px;width:720px;height:470px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.lc-main .frame{width:420px;height:300px;border-radius:30px;background:var(--hl);display:flex;align-items:center;justify-content:center}
.lc-main .frame span{font-family:"Noto Naskh Arabic",serif;font-size:250px;line-height:1;margin-top:-40px}
.listen{background:var(--primary);color:#fff;border-radius:22px;font-size:32px;font-weight:700;padding:14px 46px;display:inline-flex;gap:14px;align-items:center}
.listen svg{width:36px;height:36px}
.lc-mouth{position:absolute;top:250px;right:150px;width:400px;height:470px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
.lc-mouth h3,.lc-sound h3{margin:0;font-size:30px;line-height:1.3}
.lc-mouth p{margin:0;font-size:26px;color:var(--muted)}
.mouthpic{width:340px;height:200px;border-radius:24px;background:#FBF3EF;display:flex;align-items:center;justify-content:center;overflow:hidden}.lipsvg{width:340px;height:193px}
.note{font-size:18px;color:var(--retry)}
.lc-sound{position:absolute;top:250px;left:150px;width:400px;height:470px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px 24px}
.srow{display:grid;grid-template-columns:150px 1fr;align-items:center;column-gap:16px;row-gap:6px;padding:10px 22px 18px;border-radius:24px;background:var(--bg);cursor:pointer}
.srow .syl{font-size:56px;line-height:1.4;text-align:center}
.srow .lbl{font-size:22px;color:var(--muted);white-space:nowrap}
.srow .bar{grid-column:1 / -1}
.bar{height:20px;border-radius:20px;background:var(--soft);position:relative;overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;right:0;border-radius:20px;background:var(--damma)}
.forms{position:absolute;top:750px;right:0;left:0;display:flex;justify-content:center;gap:24px}
.forms .f{width:150px;height:120px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.forms .f span{font-family:"Noto Naskh Arabic",serif;font-size:70px;line-height:1.3}
.forms .f small{font-size:18px;color:var(--muted);margin-top:-6px}
.words{position:absolute;top:892px;right:0;left:0;display:flex;justify-content:center;gap:34px}
.wcard{width:360px;height:130px;display:flex;align-items:center;gap:20px;padding:0 26px;cursor:pointer}
.wcard .pic{width:108px;height:108px;border-radius:22px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:64px;padding:6px}
.wcard .wd{font-size:56px;line-height:1.9}
/* layered arabic word */
.aw{position:relative;display:inline-block;white-space:nowrap}
.aw>.m,.aw>.h{position:absolute;inset:0}
.aw>.h{color:transparent}
.aw>.t{position:relative}
.aw>.t,.aw>.h{font-family:"NaskhL",serif}.aw>.mF{font-family:"NaskhF",serif}.aw>.mD{font-family:"NaskhD",serif}.aw>.mK{font-family:"NaskhK",serif}.aw>.mS{font-family:"NaskhS",serif}.aw>.mH{font-family:"NaskhH",serif}
.aw .hl{background:var(--hl);border-radius:12px;box-shadow:0 0 0 10px var(--hl)}
/* layer fonts missing (slow first visit, iOS Lockdown Mode): one plain layer with black harakat instead of shifted coloured copies */
.nolayer .aw>.m{display:none}.nolayer .aw>.t,.nolayer .aw>.h{font-family:"Noto Naskh Arabic",serif}
.vgrid{position:absolute;top:240px;right:130px;left:130px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;align-items:center}
.vcol{display:flex;flex-direction:column;gap:22px}
.vcol h3{margin:0;text-align:center;font-size:30px;color:var(--muted);font-weight:600}
.vbox{padding:12px 34px 26px;cursor:pointer;display:flex;flex-direction:column;gap:8px}
.vbox .syl{font-size:96px;line-height:1.5;text-align:center}
.vbox .bar{height:22px}
.vbox .k{font-size:22px;color:var(--muted);text-align:center}
.vbox.sk{align-self:stretch;margin-top:0}.vlips{padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px}.vlips .k{font-size:22px;color:var(--muted)}.vlips .mouthpic{width:100%;height:170px}.vlips .lipsvg{width:100%;height:170px}
/* rooms */
.rooms{position:absolute;top:250px;right:150px;left:150px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.room{height:300px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:34px 36px;text-align:right}
.room .num{width:64px;height:64px;border-radius:20px;background:var(--soft);color:var(--primary);font-size:32px;font-weight:700;display:flex;align-items:center;justify-content:center}
.room b{font-size:38px;line-height:1.35}
.room small{font-size:22px;color:var(--muted)}
.room.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.room.on .num{background:rgba(255,255,255,.18);color:#fff}.room.on small{color:#E9E2DB}
.room.soon{opacity:.55}
/* vowel words room */
.units{position:absolute;top:150px;right:0;left:0;display:flex;justify-content:center;gap:16px}
.unit{background:var(--card);border:2px solid var(--soft);border-radius:22px;padding:12px 30px;font-size:28px;color:var(--primary);font-weight:600}
.unit.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.acts{position:absolute;top:240px;right:0;left:0;display:flex;justify-content:center;gap:12px}
.act{background:none;border:none;font-size:30px;color:var(--muted);padding:8px 22px;border-bottom:5px solid transparent;font-weight:600}
.act.on{color:var(--ink);border-color:var(--primary)}
.mirror{position:absolute;top:340px;right:200px;left:200px;display:grid;grid-template-columns:1fr 1fr;gap:60px}
.mcard{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;position:relative}
.mcard .wd{font-size:120px;line-height:1.55}
.mcard .bar{width:70%;height:24px}
.mcard .k{font-size:24px;color:var(--muted)}
.mcard.pick{border-color:var(--ok);box-shadow:0 0 0 6px #CFE9D7}
.mcard.retry{border-color:var(--retry);box-shadow:0 0 0 6px #F1DCCB}
.mpairs{position:absolute;top:690px;right:0;left:0;display:flex;justify-content:center;gap:18px}
.mpairs button{background:var(--card);border:2px solid var(--soft);border-radius:20px;padding:10px 26px;font-family:"Noto Naskh Arabic",serif;font-size:34px;color:var(--ink)}
.mpairs button.on{border-color:var(--primary);box-shadow:0 0 0 4px #E6DCE0}
.syls{position:absolute;top:350px;right:0;left:0;display:flex;justify-content:center;gap:26px;align-items:flex-end}
.sylc{width:230px;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;padding:20px 20px 28px;opacity:.35;transition:opacity .25s}
.sylc.lit{opacity:1;border-color:var(--primary)}
.sylc .s{font-size:110px;line-height:1.5}
.sylc .bar{width:100%;height:22px}
.sylc .stop{width:26px;height:26px;border-radius:50%;background:var(--sukun);margin:0 auto}
.whole{position:absolute;top:660px;right:0;left:0;display:flex;justify-content:center;align-items:center;gap:30px;visibility:hidden}
.whole.on{visibility:visible}
.whole .pic{width:150px;height:150px;border-radius:30px;background:var(--card);border:2px solid #EFE8E1;display:flex;align-items:center;justify-content:center;font-size:96px;padding:10px}
.whole .wd{font-size:96px;line-height:1.6}
.wlist{position:absolute;bottom:170px;right:0;left:0;display:flex;justify-content:center;gap:14px}
.wlist button{background:var(--card);border:2px solid var(--soft);border-radius:18px;padding:6px 22px;font-family:"Noto Naskh Arabic",serif;font-size:32px}
.wlist button.on{border-color:var(--primary);box-shadow:0 0 0 4px #E6DCE0}
/* rooms 3-8 */
.rbody{position:absolute;top:150px;right:0;left:0;bottom:150px}
.rtabs{position:absolute;top:140px;right:0;left:0;display:flex;justify-content:center;gap:12px;z-index:2}
.rtabs:empty{display:none}
.rpic{border-radius:30px;background:var(--card);border:2px solid #EFE8E1;display:flex;align-items:center;justify-content:center;font-size:96px;padding:12px;flex:none}
.r3{display:flex;flex-direction:column;align-items:center;gap:26px;padding-top:80px}
.r3word{display:flex;align-items:center;gap:40px;padding:20px 50px}
.wslot{font-size:110px;line-height:1.6;cursor:pointer;display:flex;align-items:center}
.qbox{display:inline-block;width:90px;height:110px;border:4px dashed var(--brand);border-radius:20px;margin-right:6px;font-family:"Noto Sans Arabic";font-size:54px;color:var(--brand);text-align:center;line-height:110px}
.r3hear{display:flex;gap:20px;justify-content:center}
.baskets{display:flex;gap:40px}
.bask{width:330px;height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.bask b{font-size:52px;line-height:1.4}
.bask small{font-size:24px;color:var(--muted)}
.bask.ok,.tcol.ok{border-color:var(--ok);box-shadow:0 0 0 6px #CFE9D7}
.bask.retry,.tcol.retry{border-color:var(--retry);box-shadow:0 0 0 6px #F1DCCB}
.sylrow,.r7row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:center}
.chip{padding:6px 30px;font-size:72px;line-height:1.6;border-radius:26px}
.chip.big{font-size:88px}
.chip.box{min-width:110px;padding:6px 18px}
.grp{display:flex;gap:10px;padding:10px 14px;border-radius:28px;background:#EFE8E1}
.r5{display:flex;flex-direction:column;align-items:center;gap:26px;padding-top:40px}
.tcols{display:flex;gap:40px}
.tcol{width:360px;height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.tcol .big{font-size:100px;line-height:1.55}
.tcol .ghost{font-size:46px;line-height:1.6;color:var(--muted)}
.tcol small{font-size:24px;color:var(--muted)}
.r6{display:flex;flex-direction:column;align-items:center;gap:24px;padding-top:70px}
.sent{min-width:900px;min-height:200px;display:flex;align-items:center;justify-content:center;font-size:96px;line-height:1.7;padding:10px 50px}
.sent.cover{background:repeating-linear-gradient(45deg,#F3ECE6,#F3ECE6 16px,#EFE6DF 16px,#EFE6DF 32px)}
.covertxt{font-family:"Noto Sans Arabic";font-size:40px;color:var(--primary);font-weight:700}
.r7{display:flex;flex-direction:column;align-items:center;gap:30px;padding-top:80px}
.r8{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:70px}
.textbox{width:1500px;font-size:66px;line-height:2.1;padding:30px 60px;text-align:right}
.tw{border-radius:14px;padding:0 6px;cursor:pointer}
.tw.now{background:var(--hl)}
.tw.err{box-shadow:inset 0 -6px 0 var(--retry)}
.tpanel{font-size:22px;color:var(--muted)}
.rfb{position:absolute;bottom:160px;right:0;left:0;text-align:center;font-size:34px;font-weight:700}
.copy{position:absolute;bottom:8px;right:0;left:0;text-align:center;font-size:18px;color:#A79DA3;pointer-events:none;z-index:5}
/* tracing */
#trace .paper{position:absolute;top:250px;left:330px;width:1260px;height:620px;border-radius:40px;background:#FFFDF9;border:2px solid #EFE8E1;overflow:hidden}
#trace canvas,#trace svg.guide{position:absolute;inset:0;width:100%;height:100%}
#trace .tools{position:absolute;bottom:56px;right:0;left:0;display:flex;justify-content:center;gap:22px;align-items:center}
.pen{width:64px;height:64px;border-radius:50%;border:5px solid transparent}
.pen.on{border-color:var(--primary)}
.tmsg{position:absolute;top:175px;right:0;left:0;text-align:center;font-size:32px;color:var(--muted)}
/* game */
#game .sbtn{position:absolute;top:290px;left:50%;margin-left:-150px;width:300px;height:300px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 22px #EFE5DF}
#game .sbtn svg{width:120px;height:120px}
#game .again{position:absolute;top:625px;right:0;left:0;text-align:center;font-size:28px;color:var(--muted)}
.opts{position:absolute;top:700px;right:0;left:0;display:flex;justify-content:center;gap:70px}
.opt{width:520px;height:240px;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:0 60px;transition:all .2s}
.opt .bar{height:30px}
.opt .bar i{background:var(--primary)}
.opt b{font-size:44px;text-align:center}
.opt.ok{border-color:var(--ok);box-shadow:0 0 0 6px #CFE9D7}
.opt.retry{border-color:var(--retry);box-shadow:0 0 0 6px #F1DCCB}
.prompt{position:absolute;top:175px;right:0;left:0;text-align:center;font-size:34px;color:var(--muted)}
.reveal{position:absolute;top:290px;right:170px;width:380px;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:28px;color:var(--muted);visibility:hidden}
.reveal.on{visibility:visible}
.reveal .syl{font-size:120px;line-height:1.6}
.feedback{position:absolute;top:960px;right:0;left:0;text-align:center;font-size:36px;font-weight:700}
.mascot-sm{position:absolute;width:150px}
.toast{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:18px 34px;border-radius:20px;font-size:26px;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.on{opacity:.92}
@media (prefers-reduced-motion:no-preference){.pop{animation:pop .35s ease-out}@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}}
.r7 .chip.silent{opacity:.55;border-style:dashed}


/* ===== face lift v2 · «دفتر اكتشاف» (design: ChatGPT · build: Claude) ===== */
:root{--bg:#EFF5F1;--paper:#FFFDF8;--card:#FFFFFF;--ink:#263638;--muted:#536366;--primary:#285653;--primary-hover:#204541;--primary-soft:#DCEAE4;
  --soft:#E3ECE7;--line:#CAD8D2;--hl:#FFF0B3;--ok:#285653;--ok-bg:#DCEAE4;--retry:#9B5B20;--retry-bg:#FFF0D9;--brand:#E2A57A;
  --room:#F6DDC9;--room-edge:#E9B48F}
#stage{background:var(--bg)}
#stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='330' viewBox='0 0 420 330'%3E%3Cg fill='%23D3E6DC'%3E%3Cpath d='M40 330C10 250 30 150 120 90c-10 90 0 170 40 240z'/%3E%3Cpath d='M150 330c-20-70 10-150 90-190 0 80-20 140-40 190z'/%3E%3C/g%3E%3Cg fill='%23C3DBCF'%3E%3Cpath d='M0 330c0-60 20-110 70-140-5 60 0 100 15 140z'/%3E%3Cpath d='M250 330c10-50 50-90 110-100-20 40-40 70-50 100z'/%3E%3C/g%3E%3C/svg%3E") left bottom/420px 330px no-repeat,
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='300' viewBox='0 0 380 300'%3E%3Cg fill='%23D3E6DC'%3E%3Cpath d='M380 300c10-90-30-170-120-210 20 80 10 150-30 210z'/%3E%3Cpath d='M220 300c0-60-40-110-100-130 10 50 15 90 0 130z'/%3E%3C/g%3E%3Cpath fill='%23C3DBCF' d='M380 300c-10-50-40-80-90-90 15 30 25 60 25 90z'/%3E%3C/svg%3E") right bottom/380px 300px no-repeat}
.screen{z-index:1}
.page{position:absolute;top:120px;right:100px;bottom:36px;left:150px;background:var(--paper);border-radius:46px;box-shadow:0 8px 0 #DAE7E0,0 26px 60px rgba(38,54,56,.10);pointer-events:none}
.rings{position:absolute;left:120px;top:190px;height:720px;width:66px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='180'%3E%3Crect x='5' y='80' width='56' height='22' rx='11' fill='%23EBD3BD' stroke='%23C49C7E' stroke-width='3'/%3E%3Crect x='14' y='86' width='16' height='6' rx='3' fill='%23F8EBDD'/%3E%3C/svg%3E") center top/66px 180px repeat-y}
.ptab{position:absolute;right:58px;top:200px;width:48px;height:220px;background:var(--room);border:3px solid var(--room-edge);border-left:none;border-radius:0 28px 28px 0;pointer-events:none}
.ptabs{position:absolute;right:56px;top:170px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.ptabs i{display:block;width:48px;height:92px;border-radius:0 26px 26px 0;border:3px solid;border-left:none}
/* top bar & nav */
.topbar{top:26px;right:100px;left:150px;height:84px}
.brand .name{font-size:34px;color:var(--ink);display:flex;align-items:center;gap:14px}
.brand .name::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--room);box-shadow:0 0 0 4px var(--room-edge) inset}
.brand .sub{font-size:24px;color:var(--muted)}
#welcome .brand .name::before,#rooms .brand .name::before,#teacher .brand .name::before{display:none}
.dots i{width:40px;height:10px;background:var(--line)}
.dots i.on{background:var(--primary)}
.homebtn{width:84px;height:84px;border-radius:26px;background:var(--card);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--primary);box-shadow:0 5px 0 #DCE7E1}
.homebtn svg{width:42px;height:42px}
.bottomnav{bottom:64px;left:200px;right:160px}
.btn{background:var(--primary);border-radius:999px;box-shadow:0 7px 0 #1B403D;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 3px 0 #1B403D}
.btn.mid{font-size:36px;padding:20px 64px;min-height:96px}
.btn.big{font-size:54px;padding:30px 130px;box-shadow:0 9px 0 #1B403D}
.btn.ghost{background:var(--card);color:var(--primary);border:3px solid var(--primary);box-shadow:0 6px 0 #D5E3DC}
.iconbtn{background:var(--card);border:2px solid var(--line);border-radius:28px;color:var(--primary);box-shadow:0 6px 0 #DCE7E1}
.iconbtn:active{transform:translateY(3px);box-shadow:0 3px 0 #DCE7E1}
.card{background:var(--card);border:2px solid #E1EAE5;border-radius:32px;box-shadow:0 6px 0 #E6EEEA}
.tbtn{display:flex;align-items:center;gap:12px;height:84px;padding:0 28px;border-radius:26px;background:var(--card);border:2px solid var(--line);color:var(--primary);font-size:28px;font-weight:700;box-shadow:0 5px 0 #DCE7E1}
.tbtn svg{width:38px;height:38px}
.mascot-sm{left:190px!important}
.copy{color:#7F948F;bottom:6px}
.toast{background:var(--primary);border-radius:999px;bottom:160px}
.note{color:var(--muted)}
.listen{background:var(--primary);border-radius:999px;box-shadow:0 6px 0 #1B403D}
.bar{background:#E7EEEA}
/* welcome · two-page spread */
#welcome .rings{left:50%;margin-left:-33px;top:220px;height:560px}
#welcome .lpage{position:absolute;top:150px;left:190px;width:740px;bottom:70px;border-radius:40px;overflow:hidden}
#welcome .hero{left:250px;top:200px;width:620px;height:660px;border-radius:50% 50% 46% 54%/56% 52% 48% 44%;background:#FBE7D7;align-items:center;overflow:visible}
#welcome .hero .leaf{position:absolute;left:-10px;bottom:120px;width:150px}
#welcome .hero .book{position:absolute;right:-30px;bottom:40px;width:230px}
#welcome .text{right:240px;top:230px;width:700px}
#welcome h1{font-size:104px;color:var(--ink);line-height:1.25;margin:0 0 18px}
#welcome .lead{font-size:42px;color:var(--muted);margin:0 0 64px}
#welcome .start{align-items:stretch}
#welcome .btn.big{justify-content:center}
#welcome .sign{margin:40px 0 0;justify-content:center}
#welcome .sign b{font-size:38px;color:var(--ink)}
#welcome .sign span{font-size:24px}
#welcome .topbar{left:150px}
.logo{display:flex;align-items:center;gap:16px}
.logo svg{width:92px;height:72px}
/* rooms · folder cards */
#rooms h2{color:var(--ink)}
.rooms{top:290px;right:230px;left:240px;gap:44px 40px}
.room{height:300px;position:relative;align-items:center;justify-content:center;gap:18px;text-align:center;padding:40px 24px 30px;border-top:14px solid var(--rc);overflow:visible}
.room::before{content:"";position:absolute;top:-40px;right:28px;width:44%;height:40px;border-radius:22px 22px 0 0;background:var(--rc)}
.room .ico{width:150px;height:110px;display:flex;align-items:center;justify-content:center}
.room .ico svg{width:150px;height:110px}
.room b{font-size:40px;color:var(--ink)}
.room small,.room .num{display:none}
.room:active{transform:translateY(4px);box-shadow:0 2px 0 #E6EEEA}
/* letters */
#letters h2{color:var(--ink)}
.lettergrid{top:270px;gap:44px}
.lcard{width:320px;height:400px;position:relative}
.lcard .g{color:var(--ink)}
.lcard .n{font-size:30px;color:var(--muted)}
.lcard .spk{position:absolute;bottom:22px;left:50%;margin-left:-36px;width:72px;height:72px;border-radius:50%;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.lcard .spk svg{width:38px;height:38px}
.lcard:hover,.lcard:focus-visible{background:var(--hl);border-color:var(--primary);box-shadow:0 0 0 4px var(--primary),0 6px 0 #E6EEEA}
.gtabs{bottom:200px}
.gtab{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:12px 30px;font-size:32px;color:var(--ink)}
.gtab.on{background:var(--room);border-color:var(--room-edge);color:var(--ink);box-shadow:0 0 0 3px var(--room-edge) inset}
/* letter card */
#letter .title{top:140px}
#letter .title h2{font-size:52px;color:var(--ink)}
.lc-main{top:230px;left:620px;width:680px;height:480px}
.lc-main .frame{width:520px;height:330px;border-radius:44px;background:var(--hl)}
.lc-main .frame span{font-size:270px}
.lc-mouth,.lc-sound{top:230px;height:480px}
.lc-mouth{right:190px}
.lc-sound{left:220px}
.lc-mouth h3,.lc-sound h3{color:var(--ink)}
.mouthpic{background:#FBEFE7;border-radius:28px}
.srow{background:#F4F8F6;border:2px solid #E6EEEA}
.forms{top:740px}
.forms .f{box-shadow:none}
.words{top:880px}
.wcard .pic{background:#F4F8F6}
/* vowels */
.vbox .syl{color:var(--ink)}
.vlips .mouthpic{background:#FBEFE7}
/* trace */
#trace .paper{left:380px;width:1220px;border:2px solid #E1EAE5;background:#fff}
/* game */
#game .sbtn{box-shadow:0 0 0 22px var(--primary-soft),0 10px 0 22px #D2E2DA}
.opt b{color:var(--ink)}
.opt.ok,.mcard.pick,.bask.ok,.tcol.ok{border-color:var(--ok);box-shadow:0 0 0 6px var(--ok-bg)}
.opt.retry,.mcard.retry,.bask.retry,.tcol.retry{border-color:var(--retry);box-shadow:0 0 0 6px var(--retry-bg)}
/* rooms 2-8 */
.unit,.mpairs button,.wlist button{border-color:var(--line)}
.unit.on{background:var(--room);border-color:var(--room-edge);color:var(--ink)}
.act.on{border-color:var(--primary)}
.mpairs button.on,.wlist button.on{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.grp{background:#EEF4F1}
.sent.cover{background:repeating-linear-gradient(45deg,#EEF4F1,#EEF4F1 16px,#E4EDE8 16px,#E4EDE8 32px)}
.qbox{border-color:var(--room-edge);color:var(--room-edge)}
.rfb{bottom:180px}
/* teacher */
#teacher .card{top:190px}

/* vowels · one pair at a time */
.vtabs{position:absolute;top:150px;left:0;right:0;display:flex;justify-content:center;gap:14px;z-index:3}
.vtab{height:78px;padding:0 34px;border-radius:999px;background:var(--card);border:2px solid var(--line);font-size:30px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:14px;box-shadow:0 5px 0 #E3ECE7}
.vtab i{width:20px;height:20px;border-radius:50%}
.vtab.on{background:var(--primary-soft);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary) inset}
.vpair{position:absolute;top:268px;right:240px;left:370px;display:grid;grid-template-columns:1fr 360px 1fr;gap:36px;align-items:stretch}
.vpair.one{grid-template-columns:1fr 360px;left:520px;right:400px}
.vpair .vbox{height:520px;justify-content:center;align-items:center;padding:20px 40px 30px;gap:14px}
.vpair .vbox .syl{font-size:170px;line-height:1.4}
.vpair .vbox .bar{width:100%;height:26px}
.vpair .vbox .k{font-size:30px;color:var(--muted)}
.vspk{width:84px;height:84px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 #1B403D;margin-top:6px}
.vpair .vlips{height:520px;justify-content:center;gap:14px}
.vpair .vlips .mouthpic{width:100%;height:240px}.vpair .vlips .lipsvg{width:100%;height:240px}
.vpair .vlips .k{font-size:30px;color:var(--ink);font-weight:700}
.vstrip{position:absolute;top:822px;right:240px;left:370px;height:80px;border-radius:999px;background:var(--room);border:2px solid var(--room-edge);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;color:var(--ink)}
#vowels .tmsg{display:none}

/* letter card · bottom bar holds the letter forms */
#letter .title{top:132px}
#letter .lc-main,#letter .lc-mouth,#letter .lc-sound{top:215px;height:450px}
#letter .lc-main .frame{height:300px}
#letter .words{top:690px;gap:30px}
#letter .wcard{height:140px}
#letter .forms{top:auto;bottom:66px;gap:14px;z-index:4;pointer-events:none}
#letter .forms .f{width:118px;height:96px;pointer-events:auto}
#letter .forms .f span{font-size:56px}
#letter .forms .f small{font-size:16px}
#letter .forms .f:last-child{width:200px!important}

/* headings: soft highlighter in the room colour */
#rooms h2,#letters h2,#letter .title h2,#game .prompt{display:inline}
#rooms h2,#letters h2,#letter .title h2{background:linear-gradient(transparent 62%,var(--room) 62%,var(--room) 92%,transparent 92%);padding:0 14px}
#rooms h2{--room:#FBE7D7}
#rooms>div[style*="top:150px"],#letters>div[style*="top:150px"]{text-align:center}

/* mouth: kid-friendly face (old approved motion) */
.mouthpic{position:relative;display:flex;align-items:center;justify-content:center;background:#FBEFE7}
.mouthpic .lipsvg{width:100%;height:100%}
.mouthpic .lipside{display:none!important}
/* fixes */
#welcome h1{white-space:nowrap;font-size:92px}
#welcome .text{width:680px;right:250px}
#vowels .vpair.one~.vstrip{left:520px;right:400px}
.btn.big{border-radius:999px}
.rings{background-size:66px 130px}
#welcome .rings{background-size:66px 120px;margin-left:-63px}
.mirror{left:400px;right:240px}

/* ===== review pass · ChatGPT design notes ===== */
#stage::before{opacity:.6}
.rings{opacity:.55}
.card{border-color:#D9E3DD}
.card,.room,.lcard,.btn,.vtab,.gtab{transition:transform .1s ease}
.card:active,.room:active,.lcard:active{transform:scale(.98)}
.steplbl{font-size:22px;color:var(--muted);margin-left:16px;font-weight:600}
.dots{align-items:center}
/* welcome: rings on the left like every page, no floating logo */
#welcome .rings{left:120px;margin-left:0;top:190px;height:720px;background-size:66px 130px}
#welcome .logo svg{display:none}
#welcome h1{margin-bottom:40px}
#welcome .lead{margin-bottom:48px}
/* rooms */
.ptabs{display:none}
.rooms{top:300px;right:200px;left:240px;grid-template-columns:repeat(4,350px);gap:60px 24px;justify-content:center}
.room{height:250px;padding:30px 20px 24px}
.room .ico,.room .ico svg{width:120px;height:88px}
.room b{font-size:36px}
/* letters */
.lcard .g{font-size:250px}
.lcard .spk{width:88px;height:88px;margin-left:-44px;bottom:18px}
.lcard .spk svg{width:44px;height:44px}
.gtab{height:72px;font-size:28px;padding:0 28px;display:flex;align-items:center}
.gtab.on{border:3px solid var(--primary);box-shadow:none}
/* letter card: letter is the hero; words OR forms */
#letter .lc-main{left:580px;width:660px}
#letter .lc-main .frame{width:600px;height:330px}
#letter .lc-main .frame span{font-size:300px;margin-top:-50px}
#letter .lc-mouth{right:190px;width:330px}
#letter .lc-mouth .mouthpic{width:290px;height:180px}#letter .lc-mouth .lipsvg{width:290px;height:170px}
#letter .lc-sound{left:220px;width:320px}
#letter .lc-sound .bar,#letter .lc-sound .lbl{display:none}
#letter .srow{grid-template-columns:1fr;padding:6px 10px;justify-items:center}
#letter .srow .syl{font-size:96px;line-height:1.35}
.lctabs{position:absolute;top:690px;right:0;left:0;display:flex;justify-content:center;gap:12px;z-index:3}
.lctabs button{height:64px;padding:0 30px;border-radius:999px;background:var(--card);border:2px solid var(--line);font-size:28px;font-weight:700;color:var(--ink)}
.lctabs button.on{background:var(--primary-soft);border:3px solid var(--primary)}
#letter .words{top:772px}
#letter .wcard{height:140px;width:380px}
#letter .wcard .pic{width:112px;height:112px}
#letter .wcard .wd{font-size:72px;line-height:1.6}
#letter .forms{top:772px;bottom:auto;gap:18px}
#letter .forms .f{width:150px;height:140px}
#letter .forms .f span{font-size:96px;line-height:1.15}
#letter .forms .f small{font-size:24px}
#letter .forms .f:last-child{width:260px!important}
/* vowels */
.vpair .vbox .syl{font-size:210px;line-height:1.2}
.vpair .vbox>*{flex:none}
.vbox .bar,.srow .bar,.mcard .bar,.opt .bar,.sylc .bar{flex:none;min-height:16px}
.vpair .vbox .k{font-size:32px}
.vpair .vlips{background:transparent;border:none;box-shadow:none}
.vpair .vlips .mouthpic{width:300px;height:220px;margin:0 auto}.vpair .vlips .lipsvg{width:300px;height:210px}
/* tracing */
#trace .paper{left:370px;width:1260px}
#trace .tools{gap:18px}
#trace .tools .iconbtn{width:84px;height:84px}
/* game */
#game .sbtn{width:144px;height:144px;margin-left:-72px;top:300px;box-shadow:0 0 0 16px var(--primary-soft),0 8px 0 16px #D2E2DA}
#game .sbtn svg{width:64px;height:64px}
#game .again{top:480px}
#game .opts{top:560px;gap:48px}
.opt{width:440px;height:240px}
.opt b{font-size:56px}
.opt .bar{height:20px}
#game .reveal{top:290px;height:250px}   /* ends above the answer cards (top 560) */
#game .feedback{top:814px;height:70px;line-height:70px;width:900px;left:50%;right:auto;margin-left:-450px;border-radius:999px}
/* room 2 */
.mcard .wd{font-size:160px;line-height:1.4}
.mcard{height:340px}
.mirror{top:330px}
.mpairs{top:720px}
#vwords .tmsg{top:810px!important}
.unit{height:72px;font-size:28px;display:flex;align-items:center}
/* rooms 3-8 */
.act{height:72px;padding:0 30px;border-radius:999px;background:var(--card);border:2px solid var(--line)!important;font-size:28px;color:var(--ink)}
.act.on{background:var(--primary-soft);border:3px solid var(--primary)!important}
.rtabs{top:140px}
.r3{padding-top:70px;gap:30px}
.r3 .rpic{width:140px!important;height:140px!important}
.r3 .wslot{font-size:180px;line-height:1.35}
.qbox{width:120px;height:150px;line-height:150px;background:var(--hl);border:4px solid var(--primary);border-style:solid;color:var(--primary);font-size:64px;border-radius:24px}
.bask{width:260px;height:190px}
.bask b{font-size:76px;line-height:1.3}
.bask small{font-size:26px}
.baskets.two .bask{width:360px;height:160px}
.baskets.two .bask b{font-size:52px}
.r3word{min-width:900px;justify-content:center}
.r5{padding-top:60px;gap:30px}
.tcol .big{font-size:140px;line-height:1.45}
.tcols{margin-bottom:28px}
.r6{padding-top:70px}
.r6 .rpic{width:128px!important;height:128px!important}
.sent{min-width:1200px;font-size:112px;line-height:1.6}
.r6 .tmsg{font-size:36px!important}
.r6 .btn.mid{min-height:96px}
.r7{padding-top:70px}
.r7 .rpic{width:112px!important;height:112px!important}
.r7 .chip.big{font-size:112px}
.r7 .tmsg{font-size:34px!important}
.textbox{width:1340px;font-size:88px;line-height:1.8}
.tpanel{font-size:26px}
#rFb{bottom:86px;left:540px;right:540px;pointer-events:none}
#room[data-r="room5"] #rFb{bottom:200px}   /* room 5 keeps its word list at the bottom */   /* between the back button and «التالي», clear of every room's content */
#room .wlist{bottom:-24px}
#vwords .wlist{bottom:150px}
/* success & retry touches */
.ok{position:relative}
.opt.ok::after,.bask.ok::after,.tcol.ok::after,.mcard.pick::after{content:"✓";position:absolute;top:-22px;left:-22px;width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;font-size:32px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--paper);animation:okpop .6s ease-out}
@keyframes okpop{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
/* teacher page */
#teacher .card{top:180px;right:360px;left:360px;padding:44px 60px;font-size:30px;line-height:1.7}
.tsec{margin-bottom:22px}.tsec h3{font-size:38px;margin:0 0 6px;color:var(--primary)}.tsec p{margin:0 0 4px}
.tcopy{font-size:24px;color:var(--muted);margin:10px 0 0}

/* mouth panels (override earlier sizes) */
#letter .lc-mouth .mouthpic{width:300px!important;height:250px!important;border-radius:26px}
.vpair .vlips .mouthpic{width:330px!important;height:280px!important;border-radius:26px}
#letter .lc-mouth .lipsvg,.vpair .vlips .lipsvg{width:100%!important;height:100%!important}

/* side view (مخارج) next to the front face */
.mduo{display:flex;gap:12px;justify-content:center;width:100%}
.sidepic{border-radius:26px;background:#FBEFE7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sidepic .sidesvg{width:100%;height:100%}
.mkh{background:#FFF0B3;color:#285653;border-radius:14px;padding:4px 18px;font-size:24px;font-weight:700;line-height:1.5;min-height:1.5em}
#letter .lc-main{width:540px!important}
#letter .lc-main .frame{width:480px!important}
#letter .lc-mouth{width:570px!important;gap:10px;padding:16px 18px}
#letter .lc-mouth .mouthpic{width:255px!important;height:215px!important}
#letter .lc-mouth .sidepic{width:255px;height:215px}
#letter .lc-mouth p{font-size:20px}
#letter .lc-mouth .note{display:none}
.vpair .vlips{gap:8px!important}
.vpair .vlips .mouthpic{width:290px!important;height:185px!important}
.vpair .vlips .sidepic{width:290px;height:215px}
.vpair .vlips .mkh{font-size:21px;padding:2px 14px}
.vpair .vlips .k{font-size:26px}

/* ===== QA fixes · Nov 2026 ===== */
.toast{z-index:10;top:24px;bottom:auto}   /* top centre: the bottom of the stage holds words, baskets and buttons */
/* letters: the name sits above the speaker button */
.lcard{height:470px;padding-bottom:116px}
.lcard .g{line-height:1.1;pointer-events:none}
/* letter card: «اسمع» inside its card, word cards clear of «التالي» */
#letter .lc-main,#letter .lc-mouth,#letter .lc-sound{height:440px}
#letter .lc-main{gap:12px}
#letter .lc-main .frame{height:310px}
.lctabs{top:676px}
#letter .words,#letter .forms{top:752px}
/* room 7: groups wrap inside the page, clear of the mascot */
.r7row{max-width:1200px}
/* iPad held upright: ask to turn it */
#rotate{display:none;position:fixed;inset:0;z-index:50;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:40px;text-align:center;color:var(--ink)}
#rotate svg{width:170px;height:170px}
#rotate b{font-size:40px;font-weight:700}
@media (orientation:portrait) and (any-pointer:coarse){#rotate{display:flex}}