:root{--navy:#0D3C5E;--blue:#1B79B8;--sky:#E8F6FF;--sun:#FFD54F;--pink:#FF4F9A;--mint:#1DE9B6;--violet:#7C4DFF;--ink:#17324D;--ok:#00C853;--warn:#FF7043;
--ui:'Tajawal',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;--rd:'Noto Naskh Arabic','Amiri','Tajawal',serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overflow-x:hidden}
body{font-family:var(--ui);color:var(--ink);background:linear-gradient(180deg,#BDE7FF 0%,#E8F6FF 40%,#FFF8E1 100%);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#app{flex:1;width:100%;max-width:820px;margin:0 auto;padding:10px 14px 18px}
button{font-family:var(--ui);cursor:pointer;border:0}
button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid #FFB300;outline-offset:3px}
.rd{font-family:var(--rd);font-weight:700;line-height:1.9}
.foot{text-align:center;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--navy),var(--blue));padding:10px 12px calc(10px + env(safe-area-inset-bottom));line-height:1.6}
.foot bdi{font-weight:700;letter-spacing:.3px}
.loading{text-align:center;padding:80px 10px;font-size:22px;font-weight:800}
/* logo card: always on her blue */
.logocard{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--blue));border-radius:22px;padding:14px 18px;box-shadow:0 8px 22px #0D3C5E40}
.logocard img{display:block;width:120px;height:auto}
.logocard.sm{border-radius:14px;padding:5px 7px}.logocard.sm img{width:38px}
/* splash */
.splash{text-align:center;padding:14px 4px}
.splash .logocard img{width:150px}
.prog-name{font-size:34px;font-weight:900;margin:16px 0 4px;color:var(--navy);line-height:1.5}
.prog-name span{display:block;font-size:22px;color:var(--pink)}
.by{font-size:19px;font-weight:800;color:var(--blue);margin:6px 0 2px}
.inst{font-size:15px;color:#3a5a78;margin-bottom:12px}
.big-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:60px;padding:12px 26px;border-radius:30px;font-size:22px;font-weight:900;color:#fff;background:linear-gradient(135deg,#00C853,#00B0FF);box-shadow:0 6px 0 #0B7A4B;transition:transform .1s}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #0B7A4B}
.big-btn.pink{background:linear-gradient(135deg,#FF4F9A,#7C4DFF);box-shadow:0 6px 0 #5B2BB5}
.big-btn.sun{background:linear-gradient(135deg,#FFC400,#FF9100);color:#4a2a00;box-shadow:0 6px 0 #C77700}
.big-btn.ghost{background:#fff;color:var(--blue);box-shadow:0 4px 0 #9cc9e8;font-size:18px;min-height:50px}
.mascot-row{display:flex;align-items:flex-end;gap:8px;justify-content:center;margin:6px 0}
.owl{width:96px;height:96px;flex:none}
.owl.cheer{animation:hop .7s ease 2}.owl.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-18px) rotate(-6deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bubble{background:#fff;border-radius:22px;padding:12px 16px;font-size:19px;font-weight:700;box-shadow:0 4px 14px #0D3C5E22;position:relative;max-width:520px;line-height:1.7}
.bubble.rd{font-size:24px}
/* name */
.card{background:#fff;border-radius:26px;padding:18px;box-shadow:0 8px 24px #0D3C5E1f;margin:12px 0}
.name-in{width:100%;font-size:24px;font-family:var(--ui);padding:12px 16px;border-radius:18px;border:3px solid #9fd3f5;text-align:center}
.gender{display:flex;gap:12px;justify-content:center;margin:14px 0}
.gender button{flex:1;max-width:170px;font-size:22px;font-weight:900;padding:14px;border-radius:20px;background:#EAF6FF;color:var(--ink);border:3px solid transparent}
.gender button.on{border-color:var(--pink);background:#FFE4F1}
/* top bar */
.top{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:8px}
.top .who{font-weight:900;font-size:18px;display:flex;align-items:center;gap:8px;min-width:0}
.top .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{background:#fff;border-radius:20px;padding:6px 12px;font-weight:900;font-size:17px;box-shadow:0 3px 0 #9cc9e8;white-space:nowrap}
.icon-btn{width:48px;height:48px;border-radius:50%;background:#fff;font-size:24px;box-shadow:0 3px 0 #9cc9e8;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}
/* map */
.map-title{text-align:center;font-size:26px;font-weight:900;color:var(--navy);margin:4px 0 0}
.map-sub{text-align:center;font-size:16px;color:#3a5a78;margin:0 0 6px}
.path{position:relative;padding:8px 0 20px}
.station{display:flex;align-items:center;gap:12px;width:78%;margin:0 0 6px;background:#fff;border-radius:24px;padding:10px 12px;box-shadow:0 5px 0 #0D3C5E1c;text-align:right;color:var(--ink);position:relative;z-index:1;min-height:84px}
.station:nth-child(odd){margin-right:0;margin-left:auto}
.station:nth-child(even){margin-left:0;margin-right:auto}
.station .orb{width:62px;height:62px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;box-shadow:inset 0 -5px 0 #0003;position:relative}
.station .orb b{position:absolute;bottom:-6px;left:-6px;background:var(--navy);color:#fff;font-size:13px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.station .st-t{font-size:19px;font-weight:900;line-height:1.5}
.station .st-s{font-size:14px;color:#55708a}
.station .stars{font-size:16px;letter-spacing:1px}
.station.locked{opacity:.6;filter:grayscale(.6)}
.station.next{outline:4px solid var(--sun);animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 8px #FFD54F55}}
.road{position:absolute;inset:0;z-index:0;pointer-events:none}
.links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0}
/* level intro */
.lv-head{display:flex;align-items:center;gap:10px;margin:4px 0 8px}
.lv-head .orb{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;flex:none}
.lv-head h2{margin:0;font-size:22px;line-height:1.4}
.lv-head small{display:block;font-size:15px;color:#55708a;font-weight:700}
.examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.ex{background:#fff;border-radius:22px;padding:12px 8px;text-align:center;box-shadow:0 5px 0 #0D3C5E1c;color:var(--ink)}
.ex .rd{font-size:42px;display:block}
.ex .p{font-size:40px;display:block;line-height:1.2}
.ex .tap{font-size:14px;color:var(--blue);font-weight:800}
.ex.playing{outline:4px solid var(--mint)}
.w{border-radius:10px;padding:0 3px;transition:background .15s,color .15s}
.w.on{background:#FFF176;color:#C2185B}
.w.ok{color:#00A040}.w.miss{color:#FF6D00}
/* play */
.prog{height:14px;background:#ffffffaa;border-radius:10px;overflow:hidden;flex:1}
.prog i{display:block;height:100%;background:linear-gradient(90deg,#00E5FF,#00C853);border-radius:10px;transition:width .4s}
.q-ins{font-size:19px;font-weight:800;text-align:center;margin:8px 0;line-height:1.7}
.stage{background:#fff;border-radius:28px;padding:16px 12px;box-shadow:0 8px 24px #0D3C5E1f;text-align:center;position:relative}
.speak{width:92px;height:92px;border-radius:50%;font-size:44px;background:linear-gradient(135deg,#00B0FF,#7C4DFF);color:#fff;box-shadow:0 6px 0 #4527A0;margin:6px auto;display:flex;align-items:center;justify-content:center}
.speak.playing{animation:pulse .8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.big-word{font-size:64px;display:block;margin:4px 0}
.mid-word{font-size:48px}
.stim-pic{font-size:84px;line-height:1.2;display:block}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px}
.choice{min-height:96px;border-radius:22px;background:#F1F9FF;border:3px solid #BFE3FA;font-size:46px;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;box-shadow:0 4px 0 #9cc9e8}
.choice.txt{font-family:var(--rd);font-weight:700;font-size:50px;line-height:1.6}
.choice.num{font-family:var(--ui);font-weight:900;font-size:40px}
.choice small{font-size:18px;letter-spacing:-2px}
.choice.right{background:#C8F7DC;border-color:var(--ok);animation:hop .5s}
.choice.wrong{background:#FFE0D6;border-color:var(--warn);opacity:.55;animation:shake .4s}
.choice.hl{outline:4px solid var(--sun)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.fillword{font-size:66px;display:inline-flex;align-items:center;gap:2px;direction:rtl}
.fillword .tgt{color:var(--pink);background:#FFF3F8;border-radius:12px;padding:0 6px}
.fillword .gap{display:inline-block;min-width:54px;height:76px;border:4px dashed var(--pink);border-radius:14px;vertical-align:middle;margin:0 6px}
.sep-part{background:#F1F9FF;border-radius:14px;padding:0 10px}
.built{font-size:62px;min-height:120px;display:block}
.slots{display:flex;gap:8px;justify-content:center;direction:rtl;margin:4px 0 10px}
.slot{width:62px;height:62px;border:3px dashed #9fd3f5;border-radius:16px;font-family:var(--rd);font-weight:700;font-size:34px;display:flex;align-items:center;justify-content:center}
.slot.f{border-style:solid;border-color:var(--ok);background:#E7FBEF}
.tiles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tile{min-width:76px;height:76px;padding:0 12px;border-radius:20px;background:linear-gradient(180deg,#FFF59D,#FFD54F);font-family:var(--rd);font-weight:700;font-size:40px;color:#3E2A00;box-shadow:0 5px 0 #E0A800;line-height:1}
.tile.used{visibility:hidden}
.tile.wrong{animation:shake .4s;background:#FFCCBC}
/* read step */
.readtxt{font-size:46px;line-height:2;word-spacing:6px;margin:6px 0;display:block}
.readtxt.para{font-size:32px;text-align:justify;line-height:2.15}
.rec-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.rbtn{min-width:120px;min-height:64px;padding:8px 14px;border-radius:22px;font-size:20px;font-weight:900;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.rbtn.model{background:linear-gradient(135deg,#00B0FF,#2979FF);box-shadow:0 5px 0 #1A4FB0}
.rbtn.mic{background:linear-gradient(135deg,#FF4F9A,#F50057);box-shadow:0 5px 0 #A0003A}
.rbtn.mic.on{animation:pulse .9s infinite}
.rbtn.mine{background:linear-gradient(135deg,#7C4DFF,#651FFF);box-shadow:0 5px 0 #3B1A99}
.rbtn.check{background:linear-gradient(135deg,#00BFA5,#00C853);box-shadow:0 5px 0 #00795B}
.rbtn[disabled]{opacity:.45}
.self{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.self button{flex:1;min-width:140px;max-width:240px;min-height:66px;border-radius:22px;font-size:21px;font-weight:900}
.self .yes{background:#C8F7DC;color:#006B33;box-shadow:0 5px 0 #6BD69A}
.self .again{background:#FFF3C4;color:#7A5200;box-shadow:0 5px 0 #F0C24A}
.note{font-size:16px;color:#3a5a78;margin:6px 0;line-height:1.6}
.wpm{display:inline-block;background:#E8F6FF;border-radius:16px;padding:8px 14px;font-weight:900;font-size:18px;margin-top:6px}
.chk{font-size:18px;font-weight:800;margin-top:8px}
/* feedback */
.fb{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;background:#fff;border-radius:26px;padding:14px 22px;font-size:24px;font-weight:900;box-shadow:0 10px 30px #0D3C5E44;display:flex;align-items:center;gap:12px;animation:pop .3s;max-width:92vw}
.fb.ok{border:4px solid var(--ok);color:#00873A}.fb.no{border:4px solid var(--warn);color:#D84315}
.fb .nx{font-size:20px;min-height:52px;padding:8px 18px;border-radius:20px;background:linear-gradient(135deg,#00C853,#00B0FF);color:#fff;font-weight:900}
@keyframes pop{from{transform:translate(-50%,30px);opacity:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-40px;font-size:28px;font-style:normal;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.finish{text-align:center}
.finish .stars-big{font-size:58px;letter-spacing:6px;margin:8px 0}
.badge-big{font-size:76px;display:block}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.bdg{background:#fff;border-radius:20px;padding:10px;text-align:center;font-weight:800;font-size:15px;line-height:1.5}
.bdg .e{font-size:44px;display:block}.bdg.off{opacity:.35;filter:grayscale(1)}
/* parent */
.parent h2{color:var(--navy);margin:10px 0 6px;font-size:22px}
.parent p,.parent li{font-size:16px;line-height:1.8}
.ptable{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border-radius:16px;overflow:hidden}
.ptable th,.ptable td{padding:8px 6px;border-bottom:1px solid #e3eef7;text-align:right;vertical-align:top}
.ptable th{background:#EAF6FF}
.switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;margin:8px 0}
.switch input{width:26px;height:26px}
.soon{font-size:13px;background:var(--sun);color:#4a2a00;border-radius:10px;padding:1px 8px;font-weight:900}
@media (min-width:700px){.choice{min-height:120px}.big-word{font-size:76px}.station{width:62%}.readtxt{font-size:52px}}
@media (max-width:380px){.choice.txt{font-size:42px}.big-word{font-size:56px}.tile{min-width:64px;font-size:34px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.steps3{display:flex;align-items:center;justify-content:center;gap:4px;margin:4px 0 8px;font-size:14px;font-weight:900;flex-wrap:nowrap}
.steps3 span{background:#fff;border-radius:14px;padding:4px 9px;color:#7a92a8;white-space:nowrap;font-family:var(--rd)}
.steps3 span.on{background:var(--pink);color:#fff}.steps3 span.done{background:#C8F7DC;color:#006B33}
.steps3 i{font-style:normal;color:#9cb3c7;font-size:12px}
.chest{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#FFF8D6,#FFE082);border-radius:24px;padding:10px 14px;margin:8px 0;box-shadow:0 5px 0 #F0C24A}
.ch-ic{font-size:50px;line-height:1}
.ch-b{flex:1;min-width:0}.ch-t{font-size:18px;font-weight:900;color:#5a3d00}
.ch-bar{height:16px;background:#fff;border-radius:10px;overflow:hidden;margin:5px 0;border:2px solid #F0C24A}
.ch-bar i{display:block;height:100%;background:linear-gradient(90deg,#FFD54F,#FF9100);border-radius:8px}
.ch-s{font-size:13px;color:#6b5200;font-weight:700}
.pts{background:#FFF8D6}
.plus{background:#FFD54F;color:#5a3d00;border-radius:12px;padding:0 8px;font-size:18px;font-family:var(--ui)}
.retry-tag{text-align:center;margin:4px 0 0;font-weight:900;color:#C2185B}
.score-big{font-size:42px;font-weight:900;margin:6px 0;color:var(--navy)}.score-big small{font-size:20px;color:#55708a}
.next-big{font-size:28px;min-height:76px;padding:14px 34px;margin:12px 0;animation:pulse 1.2s ease-in-out infinite}
.fb.wait{border:4px solid #FFB300;color:#7A5200}
.choice.right.show{outline:4px solid var(--ok)}
.choices.two{grid-template-columns:1fr 1fr}
.choice.txt.med span{font-size:36px}.choice.txt.long span{font-size:24px;line-height:1.6}
.story{font-size:24px!important;background:#F7FBFF;border-radius:18px;padding:8px 12px}
.qx{font-size:30px!important;line-height:1.8}

a.big-btn{text-decoration:none}

.speak.sm{width:56px;height:56px;font-size:26px;display:inline-flex;vertical-align:middle;margin:0 4px}
.storybox{background:#F7FBFF;border:2px solid #CFE8FA;border-radius:20px;padding:10px 12px;margin-bottom:10px;text-align:right}
.stitle{display:block;text-align:center;font-size:24px;color:var(--blue)}
.story{display:block;font-size:24px;line-height:2;text-align:justify}
.qx{font-size:30px;line-height:1.8}
.choices.col{grid-template-columns:1fr}
.choices.col .choice{min-height:68px;flex-direction:row}
.choices.col .choice.txt span,.choices.col .choice.txt.med span,.choices.col .choice.txt.long span{font-size:28px;line-height:1.6}
.big-word.sent{font-size:36px;line-height:1.9}
.built.sent{font-size:32px;min-height:80px;line-height:1.9}
.slots.words{display:none}
.tile.wtile{font-size:28px;height:64px;min-width:0;padding:0 16px}
.readtxt.para{font-size:30px}
.cert{background:#fff;border-radius:24px;padding:10px;margin:12px 0;box-shadow:0 8px 24px #0D3C5E26}
.cert-in{border:6px double var(--blue);border-radius:18px;padding:16px 12px;text-align:center;background:linear-gradient(180deg,#fff,#F4FBFF)}
.cert-head{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.cert-head .logocard img{width:84px}
.cert-org{display:flex;flex-direction:column;font-size:15px;color:var(--navy);text-align:right}.cert-org b{font-size:22px}
.cert-trophy{font-size:54px;margin-top:6px}
.cert-title{font-size:34px;color:var(--navy);margin:0}
.cert-line{font-size:21px;margin:6px 0}
.cert-name{font-size:40px;font-weight:900;color:var(--pink);border-bottom:3px dotted #FFB300;display:inline-block;min-width:60%;padding:0 10px;margin:4px 0 8px;line-height:1.6}
.cert-stats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.cert-stats span{background:#FFF8D6;border-radius:16px;padding:8px 12px;font-weight:800;font-size:15px;display:flex;flex-direction:column;min-width:96px}
.cert-stats b{font-size:24px;color:#5a3d00}
.cert-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;padding:0 6px}
.cert-foot div{display:flex;flex-direction:column;font-size:16px}.cert-foot small{color:#55708a}
.sig b{font-size:24px;color:var(--blue)}.sig i{display:block;border-top:2px solid var(--navy);width:140px;margin-top:4px}
.cert-copy{font-size:12px;color:#55708a;margin:12px 0 0}
@media print{body{background:#fff!important}.noprint,.foot,.confetti,.fb{display:none!important}#app{max-width:none;padding:0}
 .cert{box-shadow:none;margin:0}.cert-in{min-height:95vh;display:flex;flex-direction:column;justify-content:center}
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}@page{size:A4 landscape;margin:10mm}}

/* ===== cover v2 ===== */
.foot{display:flex;align-items:center;justify-content:center;gap:10px}
.flogo{width:40px;height:auto;flex:none}
body.on-cover .flogo{display:none}
body.on-cover #app{padding:0;max-width:none}
.glogo{display:block;height:auto}
.mini-owl .owl{width:40px;height:40px}
.cover{position:relative;min-height:calc(100vh - 44px);min-height:calc(100dvh - 44px);overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#5EC8FF 0%,#9FDFFF 38%,#D9F3FF 62%,#FFF4C9 100%)}
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cv-sun{position:absolute;top:18px;left:18px;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle,#FFF59D 0 45%,#FFD54F 46% 62%,transparent 63%);
  box-shadow:0 0 40px 16px #FFE08288;animation:spin 18s linear infinite}
.cv-sun::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:repeating-conic-gradient(#FFD54F 0 8deg,transparent 8deg 30deg);-webkit-mask:radial-gradient(circle,transparent 0 52%,#000 53% 70%,transparent 71%);mask:radial-gradient(circle,transparent 0 52%,#000 53% 70%,transparent 71%)}
@keyframes spin{to{transform:rotate(360deg)}}
.cloud{position:absolute;background:#fff;border-radius:50px;height:34px;opacity:.95;filter:drop-shadow(0 4px 0 #ffffff88)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:44px;height:44px;top:-22px;right:18px}.cloud::after{width:30px;height:30px;top:-14px;right:52px}
.c1{width:110px;top:70px;right:-120px;animation:drift 26s linear infinite}
.c2{width:80px;top:150px;right:-90px;animation:drift 34s linear infinite 6s;transform:scale(.8)}
.c3{width:130px;top:22px;right:-140px;animation:drift 40s linear infinite 14s}
@keyframes drift{to{right:110%}}
.fl{position:absolute;bottom:-40px;font-family:var(--rd);font-weight:700;font-size:30px;opacity:.0;animation:floatup linear infinite;text-shadow:0 2px 0 #fff}
@keyframes floatup{0%{transform:translateY(0) rotate(-8deg);opacity:0}10%{opacity:.75}80%{opacity:.6}100%{transform:translateY(-105vh) rotate(10deg);opacity:0}}
.starpath{position:absolute;left:0;right:0;top:250px;width:100%;height:120px;opacity:.9}
.tw{position:absolute;font-size:22px;animation:twinkle 2.2s ease-in-out infinite}
.t1{top:120px;right:16%}.t2{top:200px;left:12%;animation-delay:.6s}.t3{top:300px;right:8%;animation-delay:1.1s}.t4{top:46px;right:42%;animation-delay:1.6s}
@keyframes twinkle{50%{transform:scale(1.35) rotate(15deg);opacity:.55}}
.cv-in{position:relative;z-index:2;text-align:center;padding:26px 14px 6px;flex:1}
.cv-title{margin:6px 0 0;line-height:1.35;font-size:58px;font-weight:700;letter-spacing:0}
.cv-title span{display:inline-block;-webkit-text-stroke:0;text-shadow:0 3px 0 #fff,0 -3px 0 #fff,3px 0 0 #fff,-3px 0 0 #fff,0 7px 0 #0D3C5E33}
.cv-title .w1{color:#FF4F9A;animation:bob 3s ease-in-out infinite}
.cv-title .w2{color:#7C4DFF;animation:bob 3s ease-in-out infinite .4s}
.ribbon{display:inline-block;margin-top:2px;background:linear-gradient(135deg,#FFC400,#FF9100);color:#4a2a00;font-size:22px;padding:4px 26px;border-radius:999px;box-shadow:0 5px 0 #C77700;position:relative}
.cv-owl{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4px;margin:14px auto 4px;max-width:420px}
.cv-owl .owl{width:150px;height:150px;filter:drop-shadow(0 8px 0 #0D3C5E22)}
.cv-bub{font-size:19px;max-width:190px;text-align:right;margin-bottom:60px;animation:pop .6s .4s both}
.cv-bub::after{content:"";position:absolute;bottom:14px;right:-10px;border:10px solid transparent;border-left-color:#fff;transform:rotate(180deg)}
.book{position:absolute;bottom:-2px;left:calc(50% - 120px);font-size:40px;animation:bob 2.6s ease-in-out infinite .8s}
.cv-tag{display:inline-block;background:#ffffffcc;border-radius:16px;padding:4px 14px;font-size:17px;margin:4px 0 12px;color:var(--navy)}
.start-btn{font-size:28px;min-height:74px;padding:14px 38px;border-radius:40px;background:linear-gradient(135deg,#00E676,#00B0FF);box-shadow:0 7px 0 #0B7A4B,0 12px 26px #00B0FF55;animation:bounce 1.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-10px) scale(1.04)}60%{transform:translateY(0) scale(.98)}}
.cv-by{font-size:20px;font-weight:800;color:var(--navy);margin:16px 0 4px}.cv-by b{color:#C2185B}
.cv-link{display:inline-block;font-size:16px;font-weight:800;color:var(--blue);background:#ffffffb3;border-radius:14px;padding:6px 14px;text-decoration:none;margin-bottom:8px}
.ground{position:relative;z-index:2;margin-top:6px}
.ground svg{display:block;width:100%;height:60px}
.ground-in{background:#4527A0;text-align:center;padding:4px 10px 14px;color:#EDE7F6;font-weight:800;font-size:15px}
.ground-in p{margin:6px 0 0}
.cv-logo{width:120px;margin:-26px auto 0}
.owl .lids{transform-origin:60px 50px;transform:scaleY(0);animation:blink 4.5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
.owl.wave .wing-r{transform-origin:90px 66px;animation:wave 1.4s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-38deg)}}
.pl{width:110px;margin:12px auto 0}
.cert-logo{width:96px}
@media (min-width:700px){.cv-title{font-size:76px}.cv-owl .owl{width:190px;height:190px}.starpath{top:300px}}
@media (max-width:370px){.cv-title{font-size:48px}.cv-owl .owl{width:120px;height:120px}}

.cv-logo{width:140px}

/* bee */
.bee .wings{transform-origin:60px 46px;animation:flap .22s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
.owl.fly{animation:fly 2.6s ease-in-out infinite}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(4px,-10px) rotate(4deg)}}
.owl.wave .arm-r{transform-origin:93px 76px;animation:wave 1.2s ease-in-out infinite}
.owl.wave .wing-r{animation:none}
.owl.cheer .arm-r,.owl.cheer .arm-l{animation:wave .5s ease-in-out 4}
.owl.cheer .arm-l{transform-origin:27px 76px}
.owl .lids{transform-origin:60px 64px}
.owl.mini{width:54px;height:54px;flex:none}
.jar{width:70px;height:84px;flex:none}
.chest{background:linear-gradient(135deg,#FFF8E1,#FFE082)}
.cover{background:linear-gradient(180deg,#5EC8FF 0%,#9FDFFF 40%,#DDF5FF 66%,#F1FFE6 100%)}
.ground-in{background:#2E7D32;position:relative;color:#F1F8E9}
.flw{position:absolute;font-size:24px;top:-6px}.f1{right:8%}.f2{right:26%;top:14px}.f3{left:10%}.f4{left:28%;top:16px}
.book.b2{left:auto;right:calc(50% - 130px);animation-delay:1.4s}
.mini-owl .owl{width:40px;height:40px}

.L.hl{color:#FF4F9A;text-shadow:0 0 1px #FF4F9A}
.lw{font-size:72px}
.tapword .tapl{cursor:pointer;border-radius:8px;transition:color .2s}
.tapword .tapl:hover{color:#7C4DFF}
.tapword .tapl.bad{color:#FF7043;animation:shake .4s}
.tapword .tapl.hl{color:#00A040}
.forms{background:#fff;border-radius:22px;padding:8px;box-shadow:0 5px 0 #0D3C5E1c;margin:10px 0}
.fr{display:grid;grid-template-columns:44px repeat(4,1fr);align-items:center;text-align:center;border-bottom:1px dashed #d6e8f5}
.fr:last-child{border-bottom:0}
.fr span{font-size:38px;line-height:1.6;color:var(--ink)}
.fr b{font-size:30px;color:#fff;background:var(--violet);border-radius:12px;margin:4px}
.fr.fh span{font-size:13px;font-family:var(--rd);color:#55708a;line-height:1.4}.fr.fh b{background:none}
.choice.pw{flex-direction:column}.choice.pw .cp{font-size:40px;line-height:1.1}.choice.pw .cw{font-size:24px;line-height:1.6}

.readtxt.para{text-align:right}

.owl .tail{transform-origin:84px 98px;animation:wag 1.8s ease-in-out infinite}
@keyframes wag{50%{transform:rotate(8deg)}}
.owl.cat.fly,.owl.lion.fly{animation:bob 2.4s ease-in-out infinite}

/* natural bee «زينة» (image layers) */
.beeimg{position:relative;display:inline-block;flex:none}
.beeimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.beeimg .bw{transform-origin:52% 39%;animation:wflap .16s ease-in-out infinite alternate}
@keyframes wflap{from{transform:rotate(0) scale(1)}to{transform:rotate(-7deg) scale(.94,.86)}}
.beeimg.fly{animation:beefloat 3s ease-in-out infinite}
@keyframes beefloat{0%,100%{transform:translate(0,0) rotate(-2deg)}25%{transform:translate(3px,-8px) rotate(2deg)}50%{transform:translate(0,-12px) rotate(-1deg)}75%{transform:translate(-3px,-6px) rotate(2deg)}}
.beeimg.bob{animation:bob 2.4s ease-in-out infinite}
.beeimg.cheer{animation:hop .7s ease 3}
.cv-owl .beeimg{width:190px;height:190px}
.owl.mini.beeimg,.mini-owl .beeimg{width:52px;height:52px}
.mini-owl .beeimg{width:40px;height:40px}
@media (max-width:370px){.cv-owl .beeimg{width:150px;height:150px}}

.sec-h{font-size:20px;color:var(--navy);margin:14px 4px 6px}
.lgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.lg{background:#fff;border-radius:14px;font-size:30px;line-height:1.5;min-height:52px;color:var(--ink);box-shadow:0 3px 0 #9cc9e8;padding:0}
.lg.on{background:#FFE4F1;color:#C2185B;box-shadow:0 3px 0 #FF4F9A}
.lbig{display:none;align-items:center;justify-content:center;gap:16px;background:#fff;border-radius:20px;margin:8px 0;padding:6px 12px;box-shadow:0 5px 0 #0D3C5E1c}
.lbig.show{display:flex}.lbig-c{font-size:80px;line-height:1.3;color:#7C4DFF}.lbig-n{font-size:34px;color:var(--navy)}
.part-tag{text-align:center;background:#7C4DFF;color:#fff;border-radius:16px;padding:4px 12px;margin:6px auto 0;font-size:18px;width:fit-content;max-width:100%}
.choice.txt.bigL span{font-size:64px;line-height:1.3}

/* ---- station 1 v4: letter card, writing pad, free navigation ---- */
.lcard{display:none;background:#fff;border-radius:22px;margin:10px 0;padding:10px 10px 14px;box-shadow:0 5px 0 #0D3C5E1c;text-align:center}
.lcard.show{display:block}
.lc-top{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.lc-top .lbig-c{font-size:84px;line-height:1.25;color:var(--violet);font-family:'Noto Naskh Arabic',serif}
.lc-ns{display:flex;align-items:center;gap:8px}
.lc-ns .lbig-n{font-size:30px;font-weight:700}
.speak.sm{width:52px;height:52px;font-size:24px;margin:0;box-shadow:0 4px 0 #4527A0}
.lc-h{margin:8px 0 4px;font-size:19px;color:var(--navy);text-align:right;font-weight:700}
.lc-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lc-shapes.two{grid-template-columns:repeat(2,1fr)}
.lc-sh{background:#F3EEFF;border-radius:14px;padding:4px 2px;display:flex;flex-direction:column;align-items:center}
.lc-sh b{font-size:40px;line-height:1.5;color:#FF4F9A;font-family:'Noto Naskh Arabic',serif}
.lc-sh small{font-size:13px;color:#4a5b6e;line-height:1.3}
.lc-note{background:#FFF8E1;border-radius:12px;padding:6px 10px;font-size:17px;margin:8px 0 0}
.lc-words{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lcw{background:#F1F9FF;border:3px solid #cfe6f7;border-radius:18px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;color:var(--ink);min-width:0}
.lcw.playing{border-color:var(--violet);background:#EDE7FF}
.lcw .lc-pos{font-size:12px;color:#5b6b7c;line-height:1.3}
.lcw .cp{font-size:36px;line-height:1.2}
.lcw .lw{font-size:30px;line-height:1.7;white-space:nowrap}
.lcw .tap{font-size:14px}
.lc-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.lc-btns .big-btn{min-height:52px;padding:8px 18px;font-size:19px}
.grps{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:6px 0 12px}
.grp{background:#fff;border-radius:18px;padding:10px 6px;box-shadow:0 4px 0 #9cc9e8;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.grp b{font-size:18px;color:var(--violet)}
.grp .rd{font-size:24px;letter-spacing:2px;line-height:1.5}
.where-L{font-size:76px;color:var(--violet);font-family:'Noto Naskh Arabic',serif}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:4px 0 6px}
.qn{background:#fff;border:2px solid #cfe6f7;border-radius:20px;padding:6px 12px;font-size:16px;font-weight:800;color:var(--navy);min-height:40px}
.qn[disabled]{opacity:.4}
.qcount{font-size:16px}
.write-top{display:flex;align-items:center;justify-content:center;gap:12px}
.write-L{font-size:56px;color:var(--violet);font-family:'Noto Naskh Arabic',serif}
.pad-wrap{display:flex;justify-content:center;margin:6px 0}
canvas.pad{background:#fff;border:3px dashed #b39ddb;border-radius:22px;touch-action:none;-ms-touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:block}
.pad-msg{text-align:center;font-size:20px;min-height:30px;margin:4px 0;color:#4a5b6e}
.pad-msg.ok{color:var(--ok);font-weight:900;font-size:26px}
.pad-b{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pad-b .big-btn{min-height:50px;padding:8px 18px;font-size:19px}
.pad-ov{position:fixed;inset:0;top:0;left:0;right:0;bottom:0;background:rgba(13,60,94,.55);z-index:60;display:flex;align-items:center;justify-content:center;padding:10px;touch-action:none;overscroll-behavior:contain}
.pad-card{background:#FFFDF5;border-radius:24px;padding:10px 12px 14px;width:100%;max-width:380px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.pad-h{display:flex;align-items:center;justify-content:space-between}
.pad-h b{font-size:22px}
.pad-l{color:var(--violet);font-size:30px}
body.noscroll{overflow:hidden}
.lcw .lc-pos{display:block;margin:0 0 4px;position:static}
.lcw .cp{display:block;margin:2px 0 0;position:static;height:auto}

/* question number row (jump to any question) */
.qdots{position:relative;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0 4px;max-width:100%;max-height:132px;overflow-y:auto;padding:2px}
.qd{position:relative;min-width:40px;height:40px;padding:0 4px;border-radius:12px;border:2px solid #cfe6f7;background:#fff;color:var(--navy);font-weight:800;font-size:16px;font-family:inherit;line-height:1;cursor:pointer}
.qd i{position:absolute;top:-7px;left:-5px;font-style:normal;font-size:11px;width:17px;height:17px;line-height:17px;border-radius:50%;color:#fff}
.qd.ok{background:#dcfce7;border-color:#22c55e;color:#166534}.qd.ok i{background:#22c55e}
.qd.no{background:#ffedd5;border-color:#fb923c;color:#9a3412}.qd.no i{background:#fb923c}
.qd.cur{background:var(--navy);border-color:var(--navy);color:#fff;transform:scale(1.08);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.res-ok{color:#166534}.res-no{color:#9a3412}

.cv-title .w2s{display:block;font-size:.6em;line-height:1.3;white-space:normal}

/* ===== demo version ===== */
.st-banner{display:flex;align-items:center;gap:12px;margin:12px auto 6px;max-width:520px;width:calc(100% - 12px);padding:14px 16px;border:0;border-radius:22px;background:linear-gradient(135deg,#FFF3C4,#FFE082);box-shadow:0 5px 0 #E0A800;color:#5A3B00;text-decoration:none;font-family:inherit;text-align:right;cursor:pointer;box-sizing:border-box}
.st-banner .st-bi{font-size:40px;flex:none}.st-banner b{display:block;font-size:22px}.st-banner small{font-size:15px;font-weight:700;display:block}
.demo-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;padding:7px 10px;background:linear-gradient(90deg,#FF4F9A,#FF9100);color:#fff;font-family:var(--ui);font-weight:900;font-size:16px;line-height:1.3;text-align:center;box-shadow:0 2px 8px #0D3C5E33;position:relative;z-index:5}
.demo-bar .db-tag{background:#fff;color:#E11D48;border-radius:999px;padding:3px 12px;font-size:15px;white-space:nowrap}
.demo-bar .db-txt{white-space:nowrap}
.demo-bar button{border:0;background:#0D3C5E;color:#FFE082;border-radius:999px;padding:5px 12px;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.cv-demo{display:inline-block;margin:10px auto 0;background:#fff;color:#E11D48;border-radius:999px;padding:6px 14px;font-weight:900;font-size:16px;box-shadow:0 3px 0 #FFB3D1}
.station.locked{opacity:.88;filter:saturate(.75)}
.station.locked .soon{color:#8a6d00;font-weight:800}
.lg.lglk{position:relative;background:#EEF3F7;color:#9AA9B6;box-shadow:0 3px 0 #C9D6E1;cursor:pointer}
.lg.lglk i{position:absolute;top:-4px;left:-2px;font-size:13px;font-style:normal;line-height:1}
.grp.dlock{opacity:.8;filter:saturate(.6)}
.steps3 .dlock{cursor:pointer;opacity:.75}
.dsheet-ov{position:fixed;left:0;right:0;top:0;bottom:0;z-index:80;background:rgba(13,60,94,.55);display:flex;align-items:flex-end;justify-content:center;animation:dfade .25s}
.dsheet{position:relative;width:100%;max-width:520px;box-sizing:border-box;background:#FFFDF5;border-radius:28px 28px 0 0;padding:14px 18px calc(22px + env(safe-area-inset-bottom));text-align:center;box-shadow:0 -10px 30px #0D3C5E55;animation:dup .32s ease-out;max-height:92vh;overflow-y:auto}
.dsheet .dgrip{display:block;width:54px;height:6px;border-radius:3px;background:#D3DEE8;margin:0 auto 8px}
.dsheet .dsh-bee{height:96px;display:flex;justify-content:center;overflow:visible}
.dsheet .dsh-bee .owl{width:96px;height:96px}
.dsheet h2{font-size:28px;margin:6px 0 8px;color:var(--navy);line-height:1.6}
.dsheet p{font-size:18px;line-height:1.7;margin:0 0 14px;color:var(--ink)}
.dsheet .big-btn{display:flex;width:100%;box-sizing:border-box;margin:0 0 12px;text-decoration:none}
.dsheet .dsh-go{font-size:23px;min-height:64px;background:linear-gradient(135deg,#25D366,#00B0FF);color:#fff;box-shadow:0 6px 0 #0B7A4B}
@keyframes dup{from{transform:translateY(100%)}to{transform:none}}
@keyframes dfade{from{opacity:0}to{opacity:1}}
@media (max-width:430px){.demo-bar .db-txt{display:none}}
@media (max-width:380px){.demo-bar{font-size:15px}.dsheet h2{font-size:25px}.dsheet p{font-size:17px}}

/* ===== QA fixes 2026-10-30 ===== */
/* contrast (WCAG AA): white text only on dark green/blue */
.big-btn{background:linear-gradient(135deg,#0f7a06,#0a6a8c);box-shadow:0 6px 0 #064d03}
.start-btn{background:linear-gradient(135deg,#0f7a06,#0a6a8c);box-shadow:0 7px 0 #064d03,0 12px 26px #0a6a8c55}
.fb .nx{background:linear-gradient(135deg,#0f7a06,#0a6a8c);color:#fff}
.big-btn.pink{background:linear-gradient(135deg,#C2185B,#5E35B1)}
.rbtn.model{background:linear-gradient(135deg,#0068B5,#1E4FC2)}
.rbtn.mic{background:linear-gradient(135deg,#C2185B,#AD0047)}
.rbtn.mine{background:linear-gradient(135deg,#5E35B1,#4A1FBF)}
.rbtn.check{background:linear-gradient(135deg,#00796B,#0f7a06)}
.qd.ok i{background:#15803d}.qd.no i{background:#c2410c}
.part-tag{background:#5E35B1}
/* child picker */
.kid-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.kid{font:inherit;font-size:21px;font-weight:800;padding:12px 18px;border-radius:20px;background:#EAF6FF;color:var(--ink);border:3px solid #BFE3FA;min-height:56px}
.kid.on{border-color:var(--pink);background:#FFE4F1}
a.who{text-decoration:none;color:inherit}
/* no-sound prompt */
.nosnd{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:80;background:#7A1E00;color:#fff;font:inherit;font-size:19px;font-weight:900;padding:12px 20px;border-radius:24px;border:3px solid #fff;box-shadow:0 8px 24px #0006;animation:pop .3s;max-width:92vw}
/* grown-up lock */
.hold-btn{position:relative;overflow:hidden;display:block;width:100%;max-width:340px;margin:10px auto;min-height:66px;border-radius:33px;background:#0D3C5E;color:#fff;font:inherit;font-size:21px;font-weight:900;border:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hold-btn i{position:absolute;inset:0 auto 0 0;width:0;background:#0f7a06}
.hold-btn span{position:relative}
.hold-btn.on{box-shadow:0 0 0 4px #FFC400}
/* landscape phone: picture beside the answers, everything on one screen */
@media (orientation:landscape) and (max-height:520px){
  #app{padding-top:4px;padding-bottom:6px}
  .top{margin-bottom:2px}
  .steps3,.part-tag{display:none}
  .qdots{display:flex;flex-wrap:nowrap!important;overflow-x:auto;max-height:none!important;gap:4px;padding:2px 0}
  .qdots .qd{min-width:32px;height:32px;font-size:14px;flex:none}
  .qnav{margin:2px 0}
  .q-ins{font-size:16px;margin:2px 0;line-height:1.4}
  .retry-tag{margin:2px auto;font-size:14px}
  .qbody{display:flex;flex-direction:row;align-items:center;gap:16px}
  .qbody>.stage{flex:1 1 40%;min-width:0;margin:0!important;padding:4px!important}
  .qbody>.choices,.qbody>.tiles{flex:1 1 60%;min-width:0;margin:0!important}
  .qbody .stim-pic{font-size:56px!important}
  .qbody .big-word{font-size:46px;margin:0}
  .qbody .fillword{font-size:46px}
  .qbody .speak{width:60px;height:60px;font-size:28px;margin:4px auto}
  .qbody .choice{min-height:64px;font-size:34px}
  .qbody .slot{width:48px;height:48px;font-size:28px}
  .qbody .tile{min-width:58px;height:58px;font-size:30px}
  .fb{bottom:8px;padding:8px 14px;font-size:19px}
}

/* demo: contrast */
.dsheet .dsh-go{background:linear-gradient(135deg,#0f7a06,#0a6a8c);color:#fff;box-shadow:0 6px 0 #064d03}
.demo-bar{background:linear-gradient(90deg,#B0245F,#A34400)}