@font-face{font-family:Cairo;font-weight:400;src:url(../fonts/cairo-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:Cairo;font-weight:700;src:url(../fonts/cairo-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:Cairo;font-weight:900;src:url(../fonts/cairo-arabic-900-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:Cairo;font-weight:400;src:url(../fonts/cairo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Cairo;font-weight:700;src:url(../fonts/cairo-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
:root{--red:#db161b;--green:#008000;--dg:#0b5d2a;--dr:#a30f13;--ink:#1d2a22;--bg:#f6f8f5;--line:#d9e2d9}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Cairo,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px}
.flag-bar{display:flex;height:10px}.flag-bar i{flex:1}.flag-bar i:nth-child(1){background:var(--red)}.flag-bar i:nth-child(2){background:#fff;border-block:1px solid var(--line)}.flag-bar i:nth-child(3){background:var(--green)}
.top{background:#fff;border-bottom:3px solid var(--red);position:sticky;top:0;z-index:20}
.title-row{padding:8px 16px 0}
h1{margin:0;font-size:clamp(20px,3.6vw,32px);font-weight:900;color:var(--dr)}
.sub{margin:0;font-size:13px;color:#4a5a4f}
.tabs{display:flex;gap:6px;padding:8px 12px;overflow-x:auto}
.tabs button{flex:1;min-width:max-content;border:2px solid var(--line);background:#fff;border-radius:12px;padding:8px 14px;font:700 15px Cairo;cursor:pointer;color:var(--dg)}
.tabs button.on{background:var(--green);border-color:var(--green);color:#fff}
main{max-width:1280px;margin:0 auto;padding:14px 12px 30px}
.screen{display:none}.screen.on{display:block}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:0 2px 8px #0001}
h2{margin:0 0 8px;font-size:20px;color:var(--dg)}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ctl.row2{margin:8px 0;padding:8px;background:#f1f6f1;border-radius:10px}
label{font-size:14px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
select,input[type=range]{font:600 14px Cairo}
select{padding:5px 8px;border-radius:8px;border:1px solid #9bb09b;background:#fff}
.btn{font:700 15px Cairo;border:2px solid var(--green);background:#fff;color:var(--dg);padding:8px 14px;border-radius:10px;cursor:pointer;min-height:42px}
.btn:hover:not(:disabled){background:#eaf5ea}.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--green);color:#fff}.btn.primary:hover:not(:disabled){background:#006a00}
.btn.small{min-height:34px;padding:4px 10px;font-size:13px}
.status{min-height:30px;padding:4px 10px;border-radius:8px;background:#fff7e6;border:1px solid #f0d9a0;font-weight:700;margin:6px 0}
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.ic{background:#fff;border:1px solid var(--line);border-top:5px solid var(--green);border-radius:14px;padding:10px;text-align:center}
.ic:nth-child(even){border-top-color:var(--red)}
.ic .big{font-size:30px;font-weight:900;color:var(--dr)}.ic .t{font-size:13px;color:#4a5a4f}
/* النوتة */
.score-box{direction:ltr;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;max-height:520px;position:relative}
.score-box.tall{max-height:440px}
.score-box:fullscreen{max-height:none;width:100vw;height:100vh;padding:16px}
.score-wrap{position:relative;width:max-content}
.score-over{position:absolute;inset:0;pointer-events:none}
.m-box{position:absolute;border-radius:6px;pointer-events:auto;cursor:pointer;transition:background .15s}
.m-box:hover{background:#00800012}
.m-box .m-num{position:absolute;top:-2px;left:2px;font:700 12px Cairo;color:var(--dr);background:#fff;padding:0 4px;border-radius:6px;border:1px solid #e8c9ca}
.m-box.cur{background:#db161b1c;outline:2px solid var(--red)}
.m-box.done{background:#0080002a;outline:2px solid var(--green)}
.m-box.done.cur{background:#0080002a}
.score-wrap svg{display:block;font-family:Cairo,sans-serif}
.score-wrap svg text{font-family:Cairo,sans-serif}
.vf-stavenote.hl .vf-notehead path,.vf-stavenote.hl .vf-notehead use{fill:var(--red);stroke:var(--red)}
.vf-stavenote.hl .vf-stem path{stroke:var(--red)}
.vf-stavenote.hl{filter:drop-shadow(0 0 4px #db161baa)}
.vf-stavenote.ok .vf-notehead path{fill:var(--green);stroke:var(--green)}
.vf-stavenote.bad .vf-notehead path{fill:#e8a100;stroke:#e8a100}
/* كيبورد */
.kb{margin-top:10px}
.piano{position:relative;height:150px;direction:ltr;user-select:none;touch-action:none;max-width:900px;margin:0 auto}
.piano button{position:absolute;top:0;border:1px solid #333;padding:0;margin:0;cursor:pointer;font-family:Cairo}
.wk{height:100%;background:#fff;border-radius:0 0 8px 8px}.wk.used{background:#f7fbf7}
.bk{height:60%;background:#222;border-radius:0 0 6px 6px;z-index:2}
.kl{position:absolute;bottom:6px;left:0;right:0;font:700 12px Cairo;text-align:center;pointer-events:none}
.wk .kl{color:#244}.bk .kl{color:#fff;bottom:4px;font-size:10px}
.wk.lit{background:#ff7b7f;box-shadow:inset 0 -10px 18px #db161b}.bk.lit{background:#e0393e}
.wk.hint{background:#b8f0b8;box-shadow:inset 0 0 0 3px var(--green)}.bk.hint{background:#1c7a1c}
.wk.ok{background:#8fe08f}.wk.bad{background:#ffd27a}.bk.ok{background:#2e9e2e}.bk.bad{background:#c98700}
/* تعلم العزف */
.practice{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.now-note{background:#fff;border:2px solid var(--green);border-radius:14px;padding:6px 16px;min-width:230px;display:flex;flex-direction:column}
.now-note .lbl{font-size:12px;color:#4a5a4f}.now-note b{font-size:28px;color:var(--dr);line-height:1.2}.now-note .val{font-weight:700;color:var(--dg)}
.practice .status{flex:1;min-width:220px}
/* الإشارات */
.signs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.sg{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fbfdfb}
.sg b{color:var(--dr)}.sg.no{opacity:.75;background:#f5f5f5}
.sg .chip{display:inline-block;background:var(--green);color:#fff;border-radius:20px;padding:0 10px;font-size:12px;font-weight:700;margin-inline-start:6px}
.sg.no .chip{background:#888}
/* اختبار */
.q-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-weight:700}
.q-prog{height:10px;background:#e4ebe4;border-radius:6px;overflow:hidden;margin:6px 0 12px}.q-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#4cb04c);width:0;transition:width .3s}
.q-text{font-size:20px;font-weight:700;margin:6px 0}
.q-score{direction:ltr;overflow:auto;border:1px solid var(--line);border-radius:10px;margin:6px 0}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.opt{font:700 18px Cairo;padding:12px;border:2px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;min-height:54px}
.opt:hover:not(:disabled){border-color:var(--green)}
.opt.right{background:#d8f5d8;border-color:var(--green)}.opt.wrong{background:#ffdede;border-color:var(--red)}
.fb{padding:10px;border-radius:10px;font-weight:700;margin:6px 0}.fb.ok{background:#e1f7e1;color:#0b5d2a}.fb.no{background:#ffe8e8;color:#8f0f13}
.badge{display:inline-block;font-size:12px;border-radius:12px;padding:0 10px;background:#eee;margin-inline-end:6px}
.badge.e{background:#d8f5d8}.badge.m{background:#fff0c4}.badge.h{background:#ffd9d9}
.result{text-align:center}.result .big{font-size:56px;font-weight:900;color:var(--dr)}
footer{text-align:center;padding:14px;font-weight:700;color:#fff;background:linear-gradient(90deg,var(--red) 0 33%,#fff 33% 34%,var(--green) 34%);background:var(--dg)}
@media(max-width:640px){.btn{font-size:14px;padding:6px 10px}.piano{height:120px}.kl{font-size:10px}.now-note b{font-size:22px}}
.q-score .m-box{pointer-events:none}
.vf-stavenote.ok .vf-stem path{stroke:var(--green)}
/* ===== الإصدار ٢ ===== */
.score-wrap{position:relative;width:auto;overflow:hidden}
.score-inner{position:absolute;top:0;left:0;transform-origin:0 0}
.score-inner svg{display:block}
.goal{background:#fff;border:1px solid var(--line);border-inline-start:6px solid var(--red);border-radius:12px;padding:8px 14px;margin-bottom:12px;font-size:15px}
.goal .tip{display:block;color:#4a5a4f;font-size:13px}
.tabs button b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;margin-inline-end:4px;font-size:13px}
.tabs button.on b{background:#fff;color:var(--green)}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.seg button{flex:1;min-width:max-content;border:2px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;font:700 15px Cairo;cursor:pointer;color:var(--dg)}
.seg button.on{background:var(--dg);border-color:var(--dg);color:#fff}
.warn{background:#fff4e0;border:1px solid #f0c27a;border-radius:8px;padding:6px 10px;margin:6px 0;font-weight:600;font-size:14px}
.legend{display:flex;gap:10px;font-size:12px;margin:4px 0}.lg{padding:0 8px;border-radius:10px;background:#eee}.lg.rev{color:#b45f00;background:#fff0d9}.lg.miss{color:#888}
.score-wrap svg text.lyr{font:700 17px Cairo,sans-serif;fill:#14301f;direction:rtl}
.score-wrap svg text.nm{font:700 13px Cairo,sans-serif;fill:#8a1015}
.score-wrap svg text.lyr.rev{fill:#b45f00}
.score-wrap svg text.lyr.miss{fill:#bbb;font-weight:400}
.score-wrap svg text.lyr.hl{fill:var(--red);font-size:20px;paint-order:stroke;stroke:#ffd6d8;stroke-width:3px}
.score-wrap svg text.lyr.ok{fill:#0b8a2e}.score-wrap svg text.lyr.bad{fill:#d00}.score-wrap svg text.lyr.warn{fill:#d58a00}.score-wrap svg text.lyr.skip{fill:#999}
.vf-stavenote.warn .vf-notehead path{fill:#e8a100;stroke:#e8a100}.vf-stavenote.skip .vf-notehead path{fill:#9a9a9a;stroke:#9a9a9a}
.vf-stavenote.bad .vf-notehead path{fill:#d62020;stroke:#d62020}
.vf-stavenote.ok .vf-notehead path{fill:var(--green);stroke:var(--green)}
.modal{position:fixed;inset:0;background:#000a;z-index:50;display:grid;place-items:center;padding:10px}.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:16px;padding:14px;width:min(1100px,100%);max-height:94vh;overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl th,.tbl td{border:1px solid var(--line);padding:5px 8px;text-align:right}.tbl th{background:#eef6ee}
.tbl td.g{color:#0b6a2a;font-weight:700}.tbl td.o{color:#b45f00;font-weight:700}.tbl-wrap{overflow:auto;max-height:340px}
.tbl tr.st-high td,.tbl tr.st-low td{background:#fff1f1}.tbl tr.st-missing td{background:#ffe6e6}.tbl tr.st-unscored td{background:#f2f2f2}
.note{font-size:13px;color:#4a5a4f}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}.chip-b{font:700 16px Cairo;border:2px solid var(--green);background:#fff;border-radius:20px;padding:6px 14px;cursor:pointer}
.chip-b.on{background:var(--green);color:#fff}.chip-b.rnd{border-color:var(--red);color:var(--dr)}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}.btn.file{display:inline-flex;align-items:center;cursor:pointer}
.meter{height:8px;background:#e4ebe4;border-radius:5px;overflow:hidden;margin:4px 0}.meter i{display:block;height:100%;background:linear-gradient(90deg,#4cb04c,#e8a100,#d62020);width:0}
#rec-audio{width:100%;margin:6px 0}
.rep{border:2px solid var(--green);border-radius:12px;padding:10px;margin-top:10px;background:#fbfffb}.rep h3{margin:8px 0 2px;font-size:16px;color:var(--dg)}
.rep li.g{color:#0b6a2a}.rep li.o{color:#b45f00}.rep li.r{color:#a30f13}
.anchors{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;max-height:220px;overflow:auto}.anchors input{width:72px;font:600 13px Cairo}
details.cal{margin:6px 0;border:1px dashed #9bb09b;border-radius:10px;padding:6px 10px}
.le-rows{display:flex;flex-direction:column;gap:6px}.le-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:10px}
.le-row.ss-review{background:#fff5e6}.le-row.ss-missing{background:#f3f3f3}.le-id{font:600 11px monospace;color:#888}.le-in{font:700 18px Cairo;width:130px;padding:3px 6px;border:1px solid #9bb09b;border-radius:6px}
details summary{cursor:pointer;font-weight:700}
.practice .now-note{min-width:260px}

.kids .bigbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.btn.big{font-size:22px;padding:14px;min-height:68px;border-radius:16px}
.status.big{font-size:20px;text-align:center}
.stars{font-size:40px;text-align:center;min-height:50px}
.chip-b.done{background:#d8f5d8}
@media print{body.print-live header,body.print-live footer,body.print-live .goal,body.print-live .screen:not(#s0)>*,body.print-live #s0 .card>*:not(#k-live-box){display:none!important}body.print-live #k-live-box{display:block!important;border:0}body.print-live #k-live-box .ctl{display:none}}
.kl+.cnt,.cnt{position:absolute;top:4px;left:0;right:0;text-align:center;font:900 15px Cairo;color:#0b5d2a;font-style:normal;pointer-events:none}.bk .cnt{color:#fff}.errs{margin:6px 0}.errs ul{margin:2px 0;padding-inline-start:20px}
.score-wrap svg text.ntag{font:900 22px Cairo,sans-serif;fill:#d00;paint-order:stroke;stroke:#fff;stroke-width:4px;direction:rtl}.now-note{display:none!important}

.wa{position:fixed;z-index:85;bottom:64px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:94vw}
.wa-card{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border-radius:22px;box-shadow:0 14px 36px rgba(0,0,0,.25);text-decoration:none;color:var(--ink);width:min(430px,86vw);animation:waIn .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes waIn{0%{transform:translateY(30px) scale(.9);opacity:0}100%{transform:none;opacity:1}}
.wa-av,.wa-mini img{width:58px;height:58px;border-radius:50%;border:3px solid #25d366;object-fit:cover;flex:0 0 58px}
.wa-tx{display:flex;flex-direction:column;gap:1px;min-width:0}.wa-tx b{color:var(--dg);font-size:1rem}.wa-tx small{color:#556;font-weight:800;font-size:.78rem}.wa-tx em{font-style:normal;color:#667085;font-size:.85rem}
.wa-x{width:30px;height:30px;border-radius:50%;border:0;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);font-weight:900;color:#555;cursor:pointer}
.wa-mini[hidden]{display:none}.wa-mini{display:flex;flex-direction:column;align-items:center;border:0;background:transparent;padding:0;cursor:pointer}
.wa-mini i{font-style:normal;font-size:.7rem;font-weight:900;background:#25d366;color:#fff;border-radius:999px;padding:1px 8px;margin-top:-10px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.wa.min{left:auto;right:12px;bottom:60px;transform:none}.wa.min .wa-card,.wa.min .wa-x{display:none}
@media print{.wa{display:none!important}}
footer.credit{padding-bottom:90px}
.hello{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px;font-weight:700}.hello input{font:600 15px Cairo;padding:4px 10px;border:2px solid var(--green);border-radius:10px;width:150px}
.hello .tot{margin-inline-start:auto;background:#fff;border:2px solid var(--red);border-radius:20px;padding:2px 14px;color:var(--dr)}
.journey{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.stp{display:flex;flex-direction:column;align-items:center;min-width:76px;padding:6px 8px;border:3px solid var(--line);border-radius:18px;background:#fff;font:700 13px Cairo;cursor:pointer}
.stp .em{font-size:26px;line-height:1.1}.stp .st{font-size:12px;min-height:16px;color:#d58a00}
.stp.on{border-color:var(--red);background:#fff1f1;transform:scale(1.07)}.stp.done{border-color:var(--green);background:#eafbea}
.btn.help{border-color:#d58a00;color:#8a5a00}
.confetti{position:fixed;top:-30px;font-size:28px;z-index:99;pointer-events:none;animation:fall 2.6s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}}
.cert{border:10px double var(--dg);padding:26px;text-align:center;background:#fffdf5}.cert h2{font-size:30px;color:var(--dr)}.cert .nm{font-size:34px;font-weight:900;color:var(--dg);margin:10px}
@media print{body.print-cert header,body.print-cert footer,body.print-cert main,body.print-cert .wa{display:none!important}body.print-cert .modal{position:static;background:none}body.print-cert .modal-box{max-height:none}body.print-cert .modal .bar,body.print-cert #cert-ctl{display:none}}
.score-wrap svg text.ntag.ok{fill:#0b8a2e}.score-wrap svg text.ntag.bad{fill:#d00}
.stp .em svg{width:38px;height:38px}.confetti svg{width:38px;height:38px}.stp .st{color:#d58a00}.stars{color:#d58a00}

.vf-stavenote.glow{filter:drop-shadow(0 0 5px #ffd54a) drop-shadow(0 0 12px #ffb300)}.score-wrap svg text.lyr.glow{fill:#e0a800}
.wk.wave{background:#fff0b3!important;box-shadow:inset 0 -10px 14px #ffc83a}.bk.wave{background:#c98f00!important}

.coach{display:flex;gap:12px;align-items:center;margin:8px 0}.mascot{flex:0 0 118px}
.bubble{flex:1;position:relative;background:#fff;border:3px solid var(--green);border-radius:20px;padding:6px 14px}.bubble:before{content:'';position:absolute;right:-12px;top:30px;border:10px solid transparent;border-left-color:var(--green);transform:rotate(180deg)}
.bubble .status.big{background:transparent;border:0;font-size:21px;line-height:1.9;margin:0;text-align:right}
.steps3{grid-template-columns:repeat(3,1fr)!important}.btn.big{min-height:84px;font-size:26px;border-radius:22px}.btn .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-size:20px;margin-inline-end:6px}
.btn.next{animation:pulse 1.2s ease-in-out infinite;box-shadow:0 0 0 4px #ffd54a}
@keyframes pulse{50%{transform:scale(1.05)}}@media(prefers-reduced-motion:reduce){.btn.next{animation:none}}
details.more{margin:6px 0;border:2px dashed #9bb09b;border-radius:12px;padding:4px 10px}
.stp{min-width:92px;min-height:92px}.stars{font-size:34px}
@media(max-width:640px){.steps3 .btn.big{font-size:20px}.mascot{flex-basis:84px}}

.beat svg{width:48px;height:48px;display:block}.beat{display:inline-block;transition:transform .12s}.beat.hit{animation:hit .35s}
@keyframes hit{0%{transform:scale(1.35) rotate(-8deg)}100%{transform:none}}
.drums{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.drum{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border:3px solid var(--line);border-radius:18px;background:#fff;font:600 14px Cairo;cursor:pointer;text-align:center}
.drum svg{width:64px;height:64px}.drum b{font-size:18px;color:var(--dr)}.drum small{color:#4a5a4f}.drum.hit svg{animation:hit .35s}.drum:hover{border-color:var(--green)}
.deco{display:inline-flex;gap:2px}.deco svg{width:32px;height:32px}
.score-wrap svg circle.fngc{fill:#e6f1fb;stroke:#0b5d9a;stroke-width:1.6}.score-wrap svg text.fng{font:900 15px Cairo,sans-serif;fill:#0b5d9a}

/* ===== واجهة الأطفال المبسّطة ===== */
body:not(.teacher):not(.adv) .tabs{display:none} /* التبويبات تظهر في الوضع المتقدم وللمعلم */
body:not(.teacher) .title-row .sub{display:none}
.kid-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.av{width:60px;height:60px;border-radius:50%;border:4px solid var(--line);background:#fff;padding:0;cursor:pointer}.av .kidhead{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}.av.on{border-color:var(--red);box-shadow:0 0 0 3px #ffd54a}
.kid-top .hi{font:900 20px Cairo;color:var(--dr)}.kid-top .tot{margin-inline-start:auto;background:#fff;border:3px solid var(--red);border-radius:20px;padding:2px 14px;color:var(--dr);font-weight:900}
.kid-score{max-height:320px;margin:6px 0}
.kbwrap{position:relative;margin-top:6px}.kbwrap .hand{height:150px;position:relative;direction:ltr;max-width:900px;margin:0 auto;pointer-events:none}.kbwrap .hand svg{position:absolute;left:0;top:0}
.kbwrap .piano{height:200px}
.ctl.center{justify-content:center}
#kb0 .fg{position:absolute;top:6px;left:0;right:0;text-align:center;font:900 22px Cairo;color:#fff;background:#0b5d9a;border-radius:50%;width:32px;height:32px;line-height:32px;margin:0 auto;pointer-events:none}
.stp.sm{min-width:66px;min-height:66px}
.btn.big.locked{opacity:.5}
@media(max-width:640px){.kbwrap .piano{height:150px}.kbwrap .hand{height:150px}}
.kid-score+.kb{margin-top:10px}#kb0.piano{height:200px}@media(max-width:640px){#kb0.piano{height:150px}}
.kid-top+.journey,#k-phrases.journey{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity}
#k-phrases .stp{flex:0 0 auto;min-width:84px;min-height:84px;scroll-snap-align:center}

body:not(.teacher) .teacher-only{display:none!important}
#k-voice.off{opacity:.55}

.rain{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:99}
.fall{position:absolute;top:-50px;animation:rainfall 3s linear forwards}
@keyframes rainfall{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--sway),55vh) rotate(180deg)}100%{transform:translate(calc(var(--sway) * -1),112vh) rotate(360deg);opacity:.35}}
.popup{position:fixed;z-index:98;pointer-events:none;animation:popup .85s ease-out forwards}
@keyframes popup{0%{transform:translateY(0) scale(.6);opacity:1}100%{transform:translateY(-90px) scale(1.2) rotate(20deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.rain,.popup{display:none}}

/* ===== توسيط الأزرار + بطاقة «عزفي» ===== */
#s0 .bigbtns.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,230px))!important;justify-content:center;gap:14px;margin:14px auto 8px}
#s0 .ctl.center{justify-content:center;margin:6px auto}
.mine{margin:14px auto 6px;padding:10px 12px 12px;border:3px solid var(--green);border-radius:20px;background:#fbfffb;text-align:center}
.mine h3{margin:2px 0 6px;font:900 20px Cairo;color:var(--dg)}
.mine #k-live{max-height:430px;text-align:start}
.mine .mine-btns{gap:12px;margin-top:8px}.mine-exp{display:inline-flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.btn.big2{font-size:19px;min-height:56px;padding:8px 18px;border-radius:16px}
#k-replay.playing{background:var(--red);color:#fff;border-color:var(--red)}
.wa-btn{background:#25d366;color:#073b1b;border-color:#1aa34f}.wa-btn:hover{background:#2fe173}
.mine audio{display:block;margin:8px auto 0;max-width:100%}
@media(max-width:640px){#s0 .bigbtns.steps3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}.btn.big2{font-size:17px;width:100%}.mine-exp{width:100%}}
body.print-live .mine{display:block!important;border:0}body.print-live .mine .mine-btns{display:none}
@media print{body.print-live #s0>*:not(#k-live-box){display:none!important}}

/* ===================================================================
   صفحة البداية + الحركة والحيوية + نسبة الإجادة + الوضع المتقدم
   =================================================================== */
/* ---- صفحة البداية ---- */
.intro{position:fixed;inset:0;z-index:90;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:16px 12px 34px;background:radial-gradient(1100px 520px at 50% -8%,#fff3c4 0,#fffdf3 48%,#f1f8ee 100%)}
.intro[hidden],html.no-intro .intro{display:none}
.intro.out{animation:introOut .6s ease-in forwards;pointer-events:none}
@keyframes introOut{to{transform:translateY(-105%);opacity:.2}}
.intro-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.intro-bg i{position:absolute;bottom:-70px;left:var(--x);opacity:.32;animation:drift var(--d) linear infinite;animation-delay:var(--dl)}
.intro-bg svg{width:var(--s);height:var(--s)}
@keyframes drift{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-62vh) rotate(180deg) translateX(24px)}100%{transform:translateY(-122vh) rotate(360deg)}}
.intro-in{position:relative;z-index:2;width:min(980px,100%);margin:auto;text-align:center}
.intro-flag{display:flex;height:12px;border-radius:8px;overflow:hidden;width:min(420px,72%);margin:4px auto 10px;box-shadow:0 3px 8px #0002;animation:flagIn .9s .05s backwards cubic-bezier(.2,1.3,.4,1)}
.intro-flag i{flex:1}.intro-flag i:nth-child(1){background:var(--red)}.intro-flag i:nth-child(2){background:#fff}.intro-flag i:nth-child(3){background:var(--green)}
@keyframes flagIn{from{transform:scaleX(0);opacity:0}}
.logo{margin:.1em 0 .15em;font:900 clamp(30px,5.5vw,66px)/1.25 Cairo,sans-serif;letter-spacing:0}
.logo span{display:inline-block;color:transparent;background:linear-gradient(90deg,#a30f13,#db161b 22%,#f2a900 48%,#0b8a2e 74%,#0b5d2a);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 7px 8px #0003);animation:wordIn .9s calc(var(--i) * .17s + .15s) backwards cubic-bezier(.2,1.5,.4,1),shine 6s linear infinite}
@keyframes wordIn{0%{opacity:0;transform:translateY(-70px) scale(.5) rotate(-7deg)}100%{opacity:1;transform:none}}
@keyframes shine{to{background-position:300% 0}}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,22px);margin:8px auto 4px;max-width:800px}
.scene{margin:0;padding:8px 6px 6px;background:#fff;border:4px solid var(--line);border-radius:26px;box-shadow:0 10px 24px #0002;transition:transform .25s,box-shadow .25s;animation:cardIn .85s calc(.95s + var(--k,0) * .34s) backwards cubic-bezier(.2,1.3,.4,1)}
.scene:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 16px 30px #0003}
.s-listen{--k:0;border-color:#9bd1a2}.s-play{--k:1;border-color:#f3c75a}.s-sing{--k:2;border-color:#eba3a5}
@keyframes cardIn{0%{opacity:0;transform:translateY(70px) scale(.6) rotate(5deg)}100%{opacity:1;transform:none}}
.scene figcaption{margin-top:2px;font:900 clamp(24px,4.6vw,42px)/1.35 Cairo,sans-serif;color:var(--dr)}
.s-listen figcaption{color:var(--dg)}.s-play figcaption{color:#c47f00}
.pic{position:relative;height:clamp(92px,13vw,128px);overflow:visible}
.fnote{position:absolute;top:30%;width:24%;opacity:0;pointer-events:none;animation:floatUp 3.2s ease-in infinite}
.fnote svg{width:100%;height:auto}
.fn1{left:36%;animation-delay:.2s;--dx:22px}.fn2{left:56%;animation-delay:1.3s;--dx:-18px}.fn3{left:44%;animation-delay:2.3s;--dx:10px}
@keyframes floatUp{0%{transform:translateY(14px) scale(.5);opacity:0}18%{opacity:1}100%{transform:translateY(-62px) translateX(var(--dx)) rotate(24deg) scale(1.05);opacity:0}}
/* استمع: صبي عماني يميل برأسه نحو صوت الرحماني وموجات تتّسع */
.rip{position:absolute;left:9%;bottom:8%;width:42%;aspect-ratio:1;border-radius:50%;border:3px solid #0b8a2e;opacity:0;animation:ripple 2.4s ease-out infinite}
.rip.r2{animation-delay:.8s;border-color:#f2a900}.rip.r3{animation-delay:1.6s;border-color:#db161b}
@keyframes ripple{0%{transform:scale(.35);opacity:.95}100%{transform:scale(2.5);opacity:0}}
/* اعزف: بنت عمانية فوق كيبورد تضغط مفاتيحه بالتتابع وأرقام أصابع تقفز */
/* غنِّ: طفلان عمانيان يغنّيان بفم مفتوح ونغمات تتطاير */
.phrase{margin:4px 0 0;font:900 clamp(26px,4.8vw,48px)/1.35 Cairo,sans-serif;animation:fadeUp .8s 2.15s backwards}
.phrase span{display:inline-block;animation:hopW 2.6s ease-in-out infinite}
.phrase .w1{color:#0b8a2e;animation-delay:2.5s}.phrase .w2{color:#d58a00;animation-delay:2.8s}.phrase .w3{color:var(--red);animation-delay:3.1s}
.phrase i{display:inline-block;margin:0 .3em;color:#d4a100;font-style:normal;animation:spinDot 3s linear infinite}
@keyframes hopW{0%,66%,100%{transform:none}33%{transform:translateY(-11px) scale(1.12)}}
@keyframes spinDot{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}}
.byline{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 10px;font:700 clamp(15px,2.5vw,20px)/1.5 Cairo,sans-serif;color:#3a4a3f;animation:fadeUp .8s 2.55s backwards}
.byline b{color:var(--dr);font-weight:900}
.by-av{width:46px;height:46px;border-radius:50%;object-fit:cover;border:3px solid var(--green);box-shadow:0 2px 6px #0003}
.start-box{max-width:660px;margin:0 auto;padding:12px 14px 14px;background:#ffffffd9;border:3px solid var(--green);border-radius:26px;box-shadow:0 10px 26px #0002;animation:fadeUp .9s 2.95s backwards}
.nm-l{display:block;font:900 22px Cairo,sans-serif;color:var(--dg);margin-bottom:4px}
#k-name{width:min(420px,100%);font:900 28px/1.4 Cairo,sans-serif;text-align:center;padding:6px 14px;border:4px solid var(--green);border-radius:18px;background:#fff;color:var(--ink);outline:none;transition:box-shadow .2s,border-color .2s}
#k-name:focus{border-color:var(--red);box-shadow:0 0 0 5px #ffd54a}
#k-name::placeholder{color:#9aae9f;font-weight:700}
#k-name.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.nm-err{min-height:26px;font:800 16px Cairo,sans-serif;color:var(--red)}
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
.mode{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 10px 12px;border:4px solid var(--line);border-radius:22px;background:#fff;cursor:pointer;font-family:Cairo,sans-serif;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.mode b{font:900 24px/1.4 Cairo,sans-serif;color:var(--dg)}
.mode small{font:600 14px/1.6 Cairo,sans-serif;color:#41594a}
.mode .mi{display:flex;gap:4px}.mode .mi svg{width:44px;height:44px;transition:transform .3s}
.mode:hover,.mode:focus-visible{transform:translateY(-4px);border-color:var(--red);box-shadow:0 10px 18px #0003;outline:none}
.mode:hover .mi svg{transform:scale(1.2) rotate(-6deg)}
.mode.on{border-color:var(--green);background:#f0fbf0}
.mode:active{transform:scale(.97)}
#mode-adv b{color:var(--dr)}
@media(max-width:560px){.modes{grid-template-columns:1fr}.trio{gap:6px}.scene{border-width:3px;border-radius:18px}}

/* ---- الوضعان: البسيط والمتقدم ---- */
body:not(.adv):not(.teacher) .adv-only{display:none!important}
.adv-panel{margin:8px 0;padding:2px 8px;background:#fffbe6;border:2px dashed #e0b84a;border-radius:16px}
.kid-top{flex-wrap:wrap}
.chipbtn{border:2px solid var(--green);background:#fff;color:var(--dg);border-radius:999px;padding:2px 14px;font:800 14px Cairo,sans-serif;cursor:pointer;transition:transform .15s,background .2s}
.chipbtn:hover{transform:translateY(-2px);background:#eefaee}
#k-mode[data-mode=adv]{border-color:var(--red);color:var(--dr);background:#fff5f5}
body.intro-on{overflow:hidden}

/* ---- نسبة الإجادة ---- */
.pct{display:flex;flex-direction:column;align-items:center;gap:0;margin:0 auto 6px}
.pct>small{font:800 17px Cairo,sans-serif;color:#2f5a3a}
.pct-ring{position:relative;width:150px;height:150px}
.ring{width:100%;height:100%}.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .rbg{stroke:#e3ebe3}.ring .rfg{stroke:var(--c,#008000);stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.pct-tx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.pct-tx b{font:900 40px/1.1 Cairo,sans-serif;color:var(--c,#008000)}
.pct-tx span{color:#d58a00;font-size:22px;letter-spacing:2px}
.pct[data-tone=orange]{--c:#e08a00}.pct[data-tone=lime]{--c:#4f9f1f}.pct[data-tone=green]{--c:#008000}.pct[data-tone=gold]{--c:#d9a300}
.pct[data-tone=gold] .rfg{filter:drop-shadow(0 0 7px #ffd54a)}
.pct.boom{animation:boom .9s cubic-bezier(.2,1.5,.4,1)}
@keyframes boom{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.1)}100%{transform:none;opacity:1}}
.stp .pc{font:800 12px Cairo,sans-serif;color:var(--dg);line-height:1.1}

/* ---- حركة وحيوية في التطبيق كله ---- */
.btn{transition:transform .15s,box-shadow .15s,background .2s,border-color .2s}
.btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 14px #0002}
.btn:not(:disabled):active{transform:scale(.95)}
.btn.big{box-shadow:0 6px 0 #0003}.btn.big:not(:disabled):active{transform:translateY(5px);box-shadow:0 1px 0 #0003}
.btn.big:not(:disabled):hover{box-shadow:0 9px 0 #0003,0 14px 18px #0002}
@keyframes bob{50%{transform:translateY(-4px) rotate(1.5deg)}}
@keyframes hopIn{0%{transform:scale(.7) translateY(12px)}60%{transform:scale(1.12) translateY(-8px)}100%{transform:none}}
.bubble{animation:bubIn .5s backwards cubic-bezier(.2,1.4,.4,1)}
@keyframes bubIn{from{opacity:0;transform:translateX(18px) scale(.96)}}
.stars.pop{animation:starPop .9s cubic-bezier(.2,1.6,.4,1)}
@keyframes starPop{0%{transform:scale(.3) rotate(-20deg);opacity:0}60%{transform:scale(1.35) rotate(6deg)}100%{transform:none;opacity:1}}
#k-phrases .stp{animation:chipIn .5s calc(var(--i,0) * 35ms) backwards cubic-bezier(.2,1.4,.4,1);transition:box-shadow .25s,background .25s}
@keyframes chipIn{from{opacity:0;transform:translateY(16px) scale(.8)}}
#k-phrases .stp.on{box-shadow:0 0 0 4px #ffd54a,0 8px 16px #0003}
#k-phrases .stp:hover{box-shadow:0 6px 14px #0002}
.stp .em svg{transition:transform .3s}.stp:hover .em svg{transform:scale(1.18) rotate(-6deg)}
.screen.on{animation:scrIn .45s ease-out}
@keyframes scrIn{from{opacity:0}}
.mine{animation:mineIn .6s cubic-bezier(.2,1.3,.4,1)}
@keyframes mineIn{from{opacity:0;transform:translateY(24px) scale(.97)}}
header .title-row h1{color:transparent;background:linear-gradient(90deg,var(--dr),var(--red) 25%,#d49100 50%,var(--dg) 75%,var(--dr));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:shine 9s linear infinite}
.flag-bar i{background-size:200% 100%}
.kid-top .tot{transition:transform .3s}.tot.pop{animation:starPop .8s}
.av{transition:transform .2s,box-shadow .2s}.av:hover{transform:scale(1.1) rotate(-4deg)}
.kid-score,.kb{transition:box-shadow .3s}
#kb0 .wk,#kb0 .bk{transition:background .12s,transform .1s,box-shadow .15s}
#kb0 .wk.press,#kb0 .bk.press{transform:translateY(2px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}.intro-bg{display:none}}
/* ---- ضغط صفحة البداية لتناسب شاشة ٨٠٠ بكسل بلا تمرير ---- */
.intro{padding-top:8px;padding-bottom:20px}
.intro-flag{height:10px;margin:2px auto 4px}
.logo{margin:0;font-size:clamp(30px,5vw,58px);line-height:1.2}
.trio{margin:4px auto 0}
.scene{padding:6px 6px 2px}
.pic{height:clamp(84px,10.5vw,112px)}
.scene figcaption{font-size:clamp(22px,3.6vw,34px);line-height:1.25}
.phrase{margin:2px 0 0;font-size:clamp(24px,4.2vw,42px);line-height:1.25}
.phrase i{margin:0 .12em}
.byline{margin:0 0 6px}.by-av{width:40px;height:40px}
.start-box{padding:6px 12px 10px}
.nm-l{font-size:19px;margin-bottom:0}
#k-name{font-size:24px;padding:2px 12px;border-width:3px}
.nm-err{min-height:20px;font-size:15px}
.modes{gap:10px;margin-top:0}
.mode{padding:6px 8px 8px;border-width:3px}
.mode .mi svg{width:36px;height:36px}.mode b{font-size:21px;line-height:1.3}.mode small{font-size:13px;line-height:1.5}
.mine audio[hidden],.mine [hidden]{display:none!important}
.trio{margin-bottom:10px}.phrase{margin-top:6px}

/* ---- الصور الثلاث على صفحة البداية (استمع/اعزف/غنِّ) ---- */
.pic{height:clamp(124px,14vw,176px)}
.pimg{display:block;margin:0 auto;height:100%;width:auto;max-width:100%;object-fit:contain;transform-origin:50% 92%;user-select:none;-webkit-user-drag:none}
.s-listen .pic{border-radius:16px;overflow:hidden;box-shadow:0 0 0 3px #fff,0 3px 8px #0003}
.s-listen .pimg{width:100%;height:100%;object-fit:cover;transform-origin:50% 60%;animation:kenburns 9s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translateY(-1.5%)}}
.s-play .pimg{filter:drop-shadow(0 6px 5px #0003);animation:playBob .8s ease-in-out infinite}
@keyframes playBob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-7px) rotate(1.6deg)}}
.s-sing .pimg{filter:drop-shadow(0 6px 5px #0003);animation:singSway 1.8s ease-in-out infinite}
@keyframes singSway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}}
.rip{left:50%;top:80%;width:90px;height:90px;margin:-45px 0 0 -45px;bottom:auto;aspect-ratio:auto;z-index:2;border-width:4px}
.s-listen .fnote{z-index:3}
#pic-listen .fn1{left:30%;top:52%}#pic-listen .fn2{left:62%;top:46%}
#pic-play .fn1{left:8%;top:30%}#pic-play .fn2{left:68%;top:22%}
#pic-sing .fn1{left:64%;top:34%}#pic-sing .fn2{left:72%;top:20%}#pic-sing .fn3{left:10%;top:36%}
.fnote{width:22%;max-width:44px;filter:drop-shadow(0 2px 2px #0003)}

/* ---- أدوات صفحة البداية + رابط واتساب ---- */
.intro-tools{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px}
.intro-tools .chipbtn{font-size:13px;padding:1px 12px}
a.byline{text-decoration:none;color:#3a4a3f;cursor:pointer;border-radius:999px;padding:2px 10px;transition:transform .2s,background .2s}
a.byline:hover{background:#e9fbe9;transform:translateY(-2px)}
.by-wa{font-style:normal;font:800 12px Cairo,sans-serif;background:#25d366;color:#073b1b;border-radius:999px;padding:1px 10px;white-space:nowrap;animation:waPulse 2.2s ease-in-out infinite}
@keyframes waPulse{0%,100%{box-shadow:0 0 0 0 #25d36680}50%{box-shadow:0 0 0 7px #25d36600}}
body.intro-on .wa{z-index:95}
body.intro-on .wa.min{bottom:12px}
@media(max-width:560px){.intro{padding-bottom:86px}}

/* ---- عبارة التشجيع تحت نسبة الإجادة ---- */
.pct-msg{margin:6px auto 0;max-width:460px;padding:6px 16px;font:800 18px/1.7 Cairo,sans-serif;color:#0b5d2a;background:linear-gradient(90deg,#fff7d6,#eaf9e6);border:2px solid #f2c94c;border-radius:18px;animation:msgIn .7s .5s backwards cubic-bezier(.2,1.4,.4,1)}
.pct[data-tone=orange] .pct-msg{color:#8a4b00}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.95)}}

/* ---- نافذة التعليمات ---- */
.modal{z-index:100}
.help{padding:2px 4px 8px}
.help-lead{margin:2px 0 6px;text-align:center;font:700 18px/1.9 Cairo,sans-serif;color:#2a4a34}
.hsec{display:flex;align-items:center;gap:10px;margin:14px 0 8px;font:900 22px Cairo,sans-serif;color:var(--dg)}
.hno{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font:900 18px Cairo,sans-serif}
.hno.hwa{background:#fff;color:#0a7a30}
.hgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hstep{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:#fff;border:2px solid var(--line);border-inline-start:7px solid var(--green);border-radius:16px;box-shadow:0 3px 8px #0001;animation:stepIn .5s calc(var(--i) * 70ms) backwards cubic-bezier(.2,1.3,.4,1)}
.hstep:nth-child(3n+2){border-inline-start-color:var(--red)}.hstep:nth-child(3n){border-inline-start-color:#e3a100}
.hn{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font:900 18px Cairo,sans-serif}
.hic{flex:0 0 auto}.hic svg{width:44px;height:44px;display:block}
.hstep h4,.tl h4{margin:0;font:900 19px/1.5 Cairo,sans-serif;color:var(--dr)}
.hstep p,.tl p{margin:2px 0 0;font:600 15.5px/1.9 Cairo,sans-serif;color:#33463a}
.kbd{display:inline-block;direction:ltr;padding:0 8px;border:2px solid #b9c9bb;border-bottom-width:4px;border-radius:8px;background:#f6faf6;font:800 13.5px Cairo,sans-serif;letter-spacing:2px}
.hsend{margin:16px 0 6px;border:3px solid #25d366;border-radius:22px;background:linear-gradient(180deg,#f0fff4,#fff 45%);overflow:hidden;box-shadow:0 6px 16px #25d36633}
.hsend>header{display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(90deg,#25d366,#16a34a);color:#04270c}
.hsend>header img{width:56px;height:56px;border-radius:50%;border:3px solid #fff;object-fit:cover;box-shadow:0 2px 6px #0003}
.hsend>header h3{margin:0;display:flex;align-items:center;gap:8px;font:900 22px Cairo,sans-serif;color:#04270c}
.hsend>header small{font:700 14px Cairo,sans-serif;color:#06310f}
.tl{list-style:none;margin:0;padding:12px 14px}
.tl li{position:relative;display:flex;gap:12px;padding:4px 0 12px;animation:stepIn .5s calc(var(--i) * 90ms + .3s) backwards}
.tl li:not(:last-child)::before{content:'';position:absolute;inset-inline-start:16px;top:42px;bottom:0;width:3px;background:repeating-linear-gradient(#25d366 0 6px,transparent 6px 12px)}
.tn{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#25d366;color:#04270c;font:900 19px Cairo,sans-serif;box-shadow:0 0 0 4px #25d36633;z-index:1}
.tl li:last-child .tn{background:#f2c94c;box-shadow:0 0 0 4px #f2c94c44}
.tips{margin:0;padding:0 22px 0 0;display:grid;gap:4px;font:600 15.5px/1.9 Cairo,sans-serif}.tips li::marker{color:var(--red)}
.help-end{text-align:center;margin:12px 0 4px}
@keyframes stepIn{from{opacity:0;transform:translateY(16px)}}
@media(max-width:640px){.hgrid{grid-template-columns:1fr}.hstep h4,.tl h4{font-size:17px}.hsend>header h3{font-size:19px}}

/* أيقونة واتساب فقط بجوار اسم المصمم (بلا كلمة) */
.by-wa{display:inline-grid;place-items:center;padding:0;background:none;border-radius:50%;line-height:0;flex:0 0 auto}.by-wa svg{width:30px;height:30px;display:block}

/* ===== علم سلطنة عُمان يرفرف بملء الشاشة ===== */
.flagbg{position:fixed;inset:0;overflow:hidden;pointer-events:none;direction:ltr;background:#fff;z-index:0}
.fs{position:absolute;top:-28px;bottom:-28px;left:calc(var(--i) / var(--n) * 100%);width:calc(100% / var(--n) + 1px);background:url(../media/oman-flag.svg) no-repeat;background-size:calc(var(--n) * 100%) 100%;background-position:calc(var(--i) / (var(--n) - 1) * 100%) 0;--a:calc(3px + var(--i) * 20px / var(--n));animation:fwave 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -4.3s / var(--n))}
@keyframes fwave{0%,100%{transform:translateY(calc(var(--a) * -1))}50%{transform:translateY(var(--a))}}
.fshade{position:absolute;inset:0;overflow:hidden}
.fshade::before{content:'';position:absolute;top:0;bottom:0;left:-100%;right:-100%;background:repeating-linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 8%,transparent 16%,rgba(255,255,255,.18) 24%,transparent 32%);animation:fshade 6s linear infinite}
@keyframes fshade{to{transform:translateX(32%)}}
.introflag{z-index:0}
.intro-bg{z-index:1}
.intro-in{background:#ffffffc9;border-radius:32px;padding:6px 16px 14px;box-shadow:0 12px 40px #0005}
.appflag{opacity:.15}
body.intro-on .appflag{display:none}
main,footer.credit{position:relative;z-index:1}
@media print{.flagbg{display:none!important}}

/* ---- الصديق بصورتَي الولد والبنت (من صور المعلم) ---- */
.kid{position:relative;display:block;width:118px;transform-origin:50% 92%;animation:bob 3.6s ease-in-out infinite}
.kid img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 4px #0003);user-select:none;-webkit-user-drag:none}
.kid .kstars{position:absolute;left:-10%;top:-16%;width:120%;height:auto;pointer-events:none;overflow:visible;animation:kstar 1.3s ease-in-out infinite alternate}
@keyframes kstar{from{transform:scale(.88) rotate(-5deg);opacity:.85}to{transform:scale(1.08) rotate(5deg);opacity:1}}
.mascot.hop .kid{animation:hopIn .65s cubic-bezier(.3,1.6,.5,1),bob 3.6s .65s ease-in-out infinite}
.kid.great,.kid.star{animation:cheerJump .65s ease-in-out infinite alternate}
@keyframes cheerJump{from{transform:translateY(0) rotate(-2.5deg)}to{transform:translateY(-12px) rotate(2.5deg) scale(1.04)}}
.kid.try{animation:tryNod 2s ease-in-out infinite}
@keyframes tryNod{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg) translateY(-2px)}}
@media(max-width:640px){.kid{width:84px}}
.av{background:#fff8e6;overflow:hidden}

/* ---- زر الرئيسية في الترويسة (ظاهر في كل الشاشات) ---- */
.title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.tt{min-width:0}
.homebtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:5px 14px 5px 12px;margin-top:2px;border:3px solid var(--green);border-radius:999px;background:#fff;color:var(--dg);font:900 16px Cairo,sans-serif;cursor:pointer;box-shadow:0 3px 0 #0b5d2a55;transition:transform .15s,background .2s,box-shadow .15s}
.homebtn:hover{background:#eefaee;transform:translateY(-2px);box-shadow:0 6px 10px #0002}
.homebtn:active{transform:translateY(2px);box-shadow:none}
.homebtn svg{flex:0 0 auto}
@media(max-width:480px){.homebtn{padding:4px 10px}.homebtn span{font-size:14px}}
@media print{.homebtn{display:none!important}}

/* ---- علم التطبيق خفيف: لا يظهر إلا في شاشة المتعلم، ويتوقف أثناء أي تمرين حفاظًا على دقّة التوقيت ---- */
body:not([data-screen="s0"]) .appflag{display:none}
body.busy .appflag .fs,body.busy .appflag .fshade::before{animation-play-state:paused}
.appflag .fshade{display:none}

/* ---- أثناء «اعزف»: الكلمات تحت النغمات تظهر عند عزف كل نغمة فقط، وبعد انتهاء المحاولة تظهر كلها ---- */
#k-score text.lyr{transition:opacity .3s}
#k-score.reveal-mode text.lyr:not(.shown){opacity:0}
#k-score.reveal-mode text.lyr.shown{opacity:1}

.intro-tools{flex-wrap:wrap}.chipbtn.off{opacity:.65}

/* موسيقى صفحة البداية: المتصفح منع التشغيل التلقائي فننبّه الزائر لنقرة واحدة */
.chipbtn.wait{animation:bgmwait 1.6s ease-in-out infinite;border-color:#c8102e;color:#c8102e}
@keyframes bgmwait{50%{transform:scale(1.05);box-shadow:0 0 0 6px rgba(200,16,46,.15)}}
@media (prefers-reduced-motion:reduce){.chipbtn.wait{animation:none}}
.play-full-stage{min-width:0}
.play-full-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;padding:4px 8px;color:#145b3b;font:800 14px Cairo,sans-serif}
.play-full-button{white-space:nowrap;border:2px solid #0b6b39!important;color:#075331!important;background:#fff!important}
.play-full-stage:fullscreen,.play-full-stage.pseudo-full{box-sizing:border-box;width:100vw;height:100dvh;max-height:100dvh;overflow:auto;background:#f5f4ec;padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:5px;direction:rtl}
.play-full-stage:fullscreen .play-full-bar,.play-full-stage.pseudo-full .play-full-bar{flex:none;margin:0;min-height:40px}
.play-full-stage:fullscreen .score-box,.play-full-stage.pseudo-full .score-box{flex:0 1 auto;max-height:38dvh;overflow:auto;min-height:80px;margin:0}
.play-full-stage:fullscreen #kb3,.play-full-stage.pseudo-full #kb3{flex:1 0 auto;width:100%;max-width:100%;min-height:38dvh;height:auto;margin:auto 0 0}
.play-full-stage:fullscreen .piano-hand-caption,.play-full-stage.pseudo-full .piano-hand-caption{flex:none;margin:0}
.play-full-stage:fullscreen .piano-hand-stage,.play-full-stage.pseudo-full .piano-hand-stage{flex:1 0 auto;max-width:100%;width:100%;height:min(49dvh,330px);min-height:160px;margin:0 auto}
.play-full-stage.pseudo-full{position:fixed;inset:0;z-index:9999}
body.play-full-open{overflow:hidden}
@media(max-width:640px){.play-full-bar{font-size:12px}.play-full-button{font-size:12px}.play-full-stage:fullscreen .score-box,.play-full-stage.pseudo-full .score-box{max-height:30dvh}}
/* Fallback covers the normal header/footer on browsers without Fullscreen API. */
.play-full-stage.pseudo-full{z-index:2147483000}
body.play-full-open>header,body.play-full-open>footer,body.play-full-open>#wa{visibility:hidden}
.play-full-stage:fullscreen .piano-hand-stage,.play-full-stage.pseudo-full .piano-hand-stage{flex:none;width:min(100%,900px);max-width:900px;height:min(42dvh,310px);min-height:150px;margin:0 auto}
.play-full-stage:fullscreen #kb3,.play-full-stage.pseudo-full #kb3{max-width:none;height:min(55dvh,420px);min-height:150px;flex:none}
.play-full-stage:fullscreen .play-full-button,.play-full-stage.pseudo-full .play-full-button{position:sticky;top:0;z-index:8}