/* Road map + phonics lessons */
.road,.les{position:fixed;inset:0;direction:rtl;background:var(--bg);color:var(--ink)}
.road{z-index:40;display:flex;flex-direction:column;animation:rdin .35s ease both}
.les{z-index:45;display:flex;flex-direction:column;overflow-y:auto;animation:rdin .3s ease both;padding:0 max(14px,env(safe-area-inset-left,0px)) 0}
@keyframes rdin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rd-top{flex:none;display:flex;align-items:center;gap:10px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top,0px));background:var(--surface);border-bottom:3px solid var(--line);z-index:3}
.rd-ic{flex:none;width:44px;height:44px;border-radius:14px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);display:grid;place-items:center;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.rd-ic img{width:28px;height:28px;object-fit:contain}
.rd-title{flex:1;font-weight:800;font-size:18px;min-width:0}
.rd-lv{flex:none;padding:5px 12px;border-radius:999px;background:var(--sun-soft);color:var(--sun-ink);font-weight:800;font-size:14px;white-space:nowrap}
.rd-words{flex:none;padding:9px 14px;border-radius:14px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);color:var(--ink);font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.rd-scroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-overflow-scrolling:touch}
.rd-stage{position:relative;width:100%;overflow:hidden}
.rd-world{position:relative;width:100%;direction:ltr;background:url(../img/ui/road-bg.webp) center bottom/cover no-repeat}
.rd-rib{position:absolute;pointer-events:none;-webkit-user-drag:none;max-width:none}
.rd-fill{filter:drop-shadow(0 0 8px rgba(255,200,60,.8))}
.rd-n{position:absolute;transform:translate(-50%,-50%);z-index:2}
.rd-n .cv{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 6px rgba(40,70,140,.3));-webkit-user-drag:none}
.rd-n .cv.flip,.rd-goal .cv.flip{transform:scaleX(-1)}
.rd-n.done .cv{filter:drop-shadow(0 0 10px rgba(255,205,60,.95)) drop-shadow(0 0 3px rgba(255,205,60,.9))}
.rd-n.now .cv{filter:drop-shadow(0 0 12px rgba(70,170,255,.95)) drop-shadow(0 0 3px rgba(70,170,255,.9))}
.rd-n.lock .cv{filter:grayscale(.55) brightness(.93) drop-shadow(0 5px 6px rgba(40,70,140,.3))}
.rd-n .num{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);border-radius:50%;border:3px solid #fff;font:inherit;font-weight:800;font-size:calc(var(--cd) * .55);line-height:1;color:#fff;background:#7a4be0;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 3px 8px rgba(40,20,90,.35);-webkit-tap-highlight-color:transparent}
.rd-n.done .num{background:#ff9d1c}
.rd-n.now .num{background:#2f8cff;animation:rdpulse 1.8s ease-in-out infinite}
.rd-n .num:active{transform:translate(-50%,-46%)}
.rd-n .pl{position:absolute;left:50%;top:-16%;width:calc(var(--cd) * .7);transform:translateX(-50%);filter:drop-shadow(0 3px 3px rgba(80,50,0,.3));pointer-events:none}
.rd-n .st{position:absolute;top:10%;width:calc(var(--cd) * .5);height:auto;pointer-events:none}
.rd-n .st.l{left:14%}.rd-n .st.r{right:14%}
.rd-n .lab{position:absolute;left:50%;top:96%;transform:translateX(-50%);padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.92);border:2px solid #5a3217;color:#5a3217;font-weight:800;font-size:12px;white-space:nowrap;direction:ltr;pointer-events:none}
@keyframes rdpulse{0%,100%{box-shadow:0 0 0 0 rgba(80,170,255,.8),0 3px 8px rgba(40,20,90,.35)}50%{box-shadow:0 0 0 12px rgba(80,170,255,0),0 3px 8px rgba(40,20,90,.35)}}
.rd-goal{position:absolute;transform:translate(-50%,-50%);z-index:2;background:none;border:0;padding:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rd-goal .cv{display:block;width:100%;height:auto;filter:drop-shadow(0 0 14px rgba(255,215,80,.95)) drop-shadow(0 0 3px rgba(255,215,80,.9))}
.rd-goal .tr{position:absolute;left:50%;bottom:38%;width:calc(var(--cw) * .6);transform:translateX(-50%);z-index:3;filter:drop-shadow(0 0 12px rgba(255,220,90,.9));pointer-events:none}
.rd-goal.on .tr{animation:rdpulse2 1.6s ease-in-out infinite}
@keyframes rdpulse2{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.08)}}
.rd-cat{position:absolute;left:0;top:0;z-index:4;pointer-events:none;will-change:transform}
.rd-badge{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(0);z-index:6;padding:14px 34px;border-radius:24px;background:var(--sun);border:4px solid #b96612;border-bottom-width:8px;color:#2b1503;font-weight:800;font-size:30px;white-space:nowrap;pointer-events:none}
.rd-spark{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:5;pointer-events:none}

/* lessons */
.les-top{flex:none;display:flex;align-items:center;gap:12px;padding:10px 0;padding-top:max(10px,env(safe-area-inset-top,0px));max-width:620px;width:100%;margin:0 auto}
.les-bar{flex:1;height:14px;border-radius:99px;background:var(--line);overflow:hidden}
.les-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .45s ease}
.les-t{flex:none;font-weight:800;font-size:13px;color:var(--muted)}
.les-body{flex:1;display:flex;flex-direction:column;gap:12px;max-width:620px;width:100%;margin:0 auto;padding-bottom:12px}
.les-cat{display:flex;align-items:flex-end;gap:8px;border-bottom:3px solid var(--line);min-height:100px}
.les-cat>div:first-child{flex:none;background-repeat:no-repeat}
.les-bub{position:relative;flex:1;align-self:center;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:9px 14px;font-weight:700;line-height:1.7;font-size:15px}
.les-bub::after{content:"";position:absolute;top:50%;right:-8px;width:14px;height:14px;background:var(--surface);border-top:2px solid var(--line);border-right:2px solid var(--line);transform:translateY(-50%) rotate(45deg)}
.les-main{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:4px}
.les-main .chip{padding:3px 14px;border-radius:999px;background:var(--sun-soft);color:var(--sun-ink);font-weight:800;font-size:13px}
.les-main h2{margin:0;font-size:20px;font-weight:800;text-align:center}
.les-card{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;background:var(--surface);border:2px solid var(--line);border-radius:22px}
.big-l{font-size:clamp(60px,16svh,112px);font-weight:800;line-height:1;color:var(--sun);direction:ltr}
.ex{font-size:clamp(50px,12svh,90px);line-height:1.1;min-height:1.1em}
.ex img{height:clamp(60px,12svh,100px);width:auto;display:block}
.exw{font-size:30px;font-weight:800;direction:ltr}
.exw .hl{color:var(--sun)}
.exfa{color:var(--muted);font-weight:700}
.ph{font-size:15px;margin:0;text-align:center;color:var(--ink);font-weight:600}
.pic{display:grid;place-items:center;width:100%;background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:12px;font-size:clamp(64px,16svh,100px);line-height:1.1}
.pic img{height:clamp(76px,17svh,112px);width:auto}
.speak2{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:16px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);font:inherit;font-weight:800;cursor:pointer;color:var(--ink)}
.speak2 img{width:26px;height:26px}
.lopts{display:flex;gap:10px;width:100%;justify-content:center}
.lopt{flex:1;max-width:130px;min-height:88px;border-radius:20px;border:2px solid var(--line);border-bottom-width:5px;background:var(--surface);color:var(--ink);font:inherit;font-weight:800;font-size:46px;cursor:pointer;direction:ltr;display:grid;place-items:center;padding:0;-webkit-tap-highlight-color:transparent}
.lopt.pic-o{font-size:52px}
.lopt img{height:64px;width:auto}
.lopt:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.lopt.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.lopt.bad{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.slots{display:flex;gap:8px;direction:ltr}
.slot{width:58px;height:66px;border-radius:14px;border:3px dashed var(--line);display:grid;place-items:center;font-size:36px;font-weight:800;background:var(--surface);cursor:pointer;color:var(--ink)}
.slot.f{border-style:solid;border-color:var(--accent)}
.slots.shake{animation:shk .4s}
.slots.good .slot{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
@keyframes shk{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.tiles{display:flex;gap:10px;direction:ltr;flex-wrap:wrap;justify-content:center}
.tile{width:62px;height:70px;border-radius:16px;border:2px solid var(--line);border-bottom-width:5px;background:var(--sun-soft);color:var(--sun-ink);font:inherit;font-size:36px;font-weight:800;cursor:pointer}
.tile:disabled{opacity:.3}
.tile:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.sent{font-size:32px;font-weight:800;direction:ltr;text-align:center;line-height:1.6}
.sent span{cursor:pointer;padding:0 4px;border-radius:8px}
.sent span:hover,.sent span.say{background:var(--sun-soft)}
.les-dock{position:sticky;bottom:0;background:none;pointer-events:none;flex:none;max-width:620px;width:100%;margin:0 auto;padding:6px 0 max(14px,env(safe-area-inset-bottom,0px))}
.les-dock{display:flex;justify-content:center}
.les-dock .btn{width:auto;min-width:min(78vw,240px);min-height:52px;padding:0 44px;font-size:21px;pointer-events:auto}
.les-done{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
@media (prefers-reduced-motion: reduce){.road,.les,.rd-node.now,.rd-goal.on .g{animation:none}}
.les-dock .btn{background:var(--sun);color:#2b1503;box-shadow:0 5px 0 #b96612;border:0;border-radius:18px}
.les-dock .btn:active{box-shadow:0 2px 0 #b96612;transform:translateY(3px)}


.rd-say{position:absolute;z-index:6;left:50%;bottom:22px;width:max-content;max-width:86vw;text-align:center;padding:9px 18px;border-radius:18px;background:#fff;border:3px solid #5a3217;color:#5a3217;font-weight:800;font-size:15px;direction:rtl;opacity:0;transform:translate(-50%,14px) scale(.8);transition:opacity .3s,transform .3s;pointer-events:none}
.rd-say.on{opacity:1;transform:translate(-50%,0) scale(1)}

/* ===== Houses: one page, the cat stands by the house ===== */
.hs{position:fixed;inset:0;z-index:40;direction:rtl;background:#1b1b2e;color:var(--ink);overflow:hidden;animation:rdin .35s ease both}
.hs[hidden]{display:none}
.hs-stage{position:absolute;transition:filter .4s}
.hs-img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.hs-stage.lock .hs-img{filter:grayscale(.55) brightness(.78) saturate(.8)}
.hs-sign{position:absolute;display:flex;align-items:center;justify-content:center;gap:.35em;direction:ltr;color:#5a3217;font-family:var(--f-en,'Baloo 2',system-ui,sans-serif);
  font-weight:800;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;text-shadow:0 1px 0 rgba(255,235,190,.75);white-space:nowrap}
.hs-sign b{flex:none;display:grid;place-items:center;width:calc(var(--sh) * .74);height:calc(var(--sh) * .74);border-radius:50%;background:#d6452a;border:calc(var(--sh) * .05) solid #fff3d6;box-shadow:0 2px 3px rgba(60,20,0,.35);font-family:'Vazirmatn',system-ui,sans-serif;font-size:calc(var(--sh) * .5);font-weight:800;color:#fff;line-height:1;text-shadow:none;direction:rtl;padding-top:.06em}
.hs-sign i{font-style:normal;font-size:var(--lf,16px);letter-spacing:.02em}
.hs-sign.h8{color:#6b4a0a}.hs-sign.h8 b{color:#8f2a0c}
.hs-stage.lock .hs-sign{opacity:.75}
.hs-door{position:absolute;border:0;background:none;padding:0;cursor:pointer;border-radius:50%/42%;-webkit-tap-highlight-color:transparent;display:grid;place-items:center;font:inherit}
.hs-door:focus-visible{outline:4px solid #fff;outline-offset:2px}
.hs-glow{position:absolute;inset:-6%;border-radius:inherit;pointer-events:none;opacity:0}
.hs-door.hint .hs-glow{opacity:1;background:radial-gradient(closest-side,rgba(255,236,150,.55),rgba(255,236,150,0));animation:hsglow 1.8s ease-in-out infinite}
@keyframes hsglow{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.12);opacity:1}}
.hs-finger{display:none;position:absolute;left:50%;top:48%;width:min(8vmin,46px);height:auto;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.hs-door.hint .hs-finger{display:block;animation:hsfin 1.2s ease-in-out infinite}
@keyframes hsfin{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-14%)}}
.hs-lockic{display:none;position:relative;width:min(9vmin,52px);height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));pointer-events:none}
.hs-stage.lock .hs-lockic{display:block}
.hs-cat{position:absolute;z-index:3;filter:drop-shadow(0 6px 5px rgba(40,25,10,.28))}
.hs-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(20,12,4,.45),rgba(20,12,4,0));pointer-events:none}
.hs-top>*{pointer-events:auto}
.hs-title{flex:1;min-width:0;font-weight:800;font-size:17px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-bottom{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 12px max(14px,env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg,rgba(20,12,4,.5),rgba(20,12,4,0));pointer-events:none}
.hs-bottom>*{pointer-events:auto}
.hs-say{position:static;transform:none;opacity:0;transition:opacity .25s,transform .25s;transform:translateY(6px) scale(.96)}
.hs-say.on{opacity:1;transform:none}
.hs-go{min-width:min(78vw,300px);min-height:56px;padding:0 28px;border:0;border-radius:18px;background:var(--sun,#ffb02e);color:#2b1503;font:inherit;font-weight:800;font-size:20px;box-shadow:0 5px 0 #b96612;cursor:pointer}
.hs-go:active{box-shadow:0 2px 0 #b96612;transform:translateY(3px)}
.hs-go[hidden]{display:none}
.hs-dots{display:flex;gap:7px;direction:rtl;flex-wrap:wrap;justify-content:center}
.hs-dot{width:38px;height:38px;border-radius:50%;border:3px solid #fff;background:#7a4be0;color:#fff;font:inherit;font-weight:800;font-size:16px;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.hs-dot.done{background:#ff9d1c}.hs-dot.now{background:#2f8cff}
.hs-dot.lock{background:#8e8aa0}.hs-dot.lock svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hs-dot.cur{transform:scale(1.22);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.4)}
.hs-badge{position:absolute;left:50%;top:38%;z-index:7;transform:translate(-50%,-50%) scale(0);opacity:0;padding:14px 32px;border-radius:24px;background:var(--sun,#ffb02e);border:4px solid #b96612;border-bottom-width:8px;color:#2b1503;font-weight:800;font-size:clamp(20px,5vw,30px);text-align:center;white-space:nowrap;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .25s;pointer-events:none}
.hs-badge.on{transform:translate(-50%,-50%) scale(1);opacity:1}
.hs-fade{position:absolute;inset:0;z-index:8;background:#fff8e8;opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:520px){.hs-dot{width:34px;height:34px;font-size:15px}.hs-title{font-size:15px}}
/* lesson = inside the house */
.les{isolation:isolate}
.les-bg{position:fixed;inset:0;z-index:-1;background:#fff8ec center/cover no-repeat}
.les-bg.blur{filter:blur(14px) saturate(1.1);transform:scale(1.08)}
.les-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,249,236,.08),rgba(255,249,236,.2))}
.les{background:transparent}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .les-bg::after{background:linear-gradient(180deg,rgba(24,18,12,.35),rgba(24,18,12,.5))}}
:root[data-theme="dark"] .les-bg::after{background:linear-gradient(180deg,rgba(24,18,12,.35),rgba(24,18,12,.5))}

.les{overflow-x:hidden}
.les-body{padding-bottom:20px}
/* shorter lesson screen so the answer buttons stay clear of the next button on small laptop heights */
@media (max-height:800px){.big-l{font-size:clamp(48px,11svh,84px)}.ex img{height:clamp(48px,9svh,76px)}.les-card{padding:10px}.les-main{gap:10px}.les-body{gap:8px}}

/* ===== lesson screen v2: everything lives in one white sheet over the room ===== */
.les{padding:clamp(8px,2.2vh,22px) max(10px,env(safe-area-inset-left,0px));align-items:center}
.les-sheet{position:relative;display:flex;flex-direction:column;width:100%;max-width:640px;min-height:min(100%,780px);margin:auto;background:#fff;color:#12323a;border-radius:28px;box-shadow:0 18px 50px rgba(30,20,5,.32),0 2px 0 rgba(255,255,255,.7) inset;padding:14px clamp(14px,4vw,28px) 16px;overflow:hidden}
.les-sheet .les-top{max-width:none;padding:0 0 12px;margin:0;border-bottom:2px solid #eef3f2}
.les-sheet .les-bar{height:16px;background:#e9f1f0;box-shadow:inset 0 2px 3px rgba(0,0,0,.08)}
.les-sheet .les-bar i{background:linear-gradient(90deg,#ffb02e,#ff9418)}
.les-sheet .les-t{background:#fff3df;color:#8a4b08;padding:4px 12px;border-radius:999px;font-size:13px}
.les-sheet .rd-ic{background:#f4f8f8;border-color:#dbe8e6}
.les-sheet .les-body{max-width:none;margin:0;padding:12px 0 6px;gap:10px}
.les-sheet .les-cat{border:0;background:linear-gradient(180deg,#fff7e8,#fff1d6);border-radius:22px;padding:6px 14px 0;min-height:0;align-items:flex-end}
.les-sheet .les-bub{background:#fff;border:2px solid #f3dfb9;color:#3d2a12;font-size:16px;margin-bottom:12px;align-self:center}
.les-sheet .les-bub::after{background:#fff;border-color:#f3dfb9}
.les-sheet .les-main{gap:12px;justify-content:flex-start}
.les-sheet .les-main .chip{background:#eef7f6;color:#0b6a72;font-size:13px}
.les-sheet .les-main h2{color:#12323a;font-size:clamp(18px,3.2vh,22px)}
.les-sheet .les-card{flex-direction:row;align-items:stretch;gap:0;padding:0;background:#fffaf0;border:2px solid #f6e4c0;border-radius:24px;overflow:hidden}
.les-sheet .les-card .lc-l{flex:1;display:grid;place-items:center;padding:12px 8px;background:linear-gradient(160deg,#fff3d6,#ffe6b0);border-inline-end:2px dashed #f0d79d}
.les-sheet .les-card .lc-w{flex:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 8px}
.les-sheet .big-l{font-size:clamp(54px,13svh,96px);color:#e8820c;text-shadow:0 3px 0 #f6cf8a;white-space:nowrap}
.les-sheet .ex{font-size:clamp(44px,9svh,72px)}
.les-sheet .ex img{height:clamp(56px,11svh,92px)}
.les-sheet .exw{font-size:clamp(24px,4.4svh,32px);color:#12323a}
.les-sheet .exfa{color:#587479;font-size:14px}
.les-sheet .les-card:only-child,.les-sheet .les-main>.les-card:has(>.big-l){flex-direction:column;align-items:center;padding:16px;gap:6px}
.les-sheet .ph{color:#3d4f53}
.les-sheet .pic,.les-sheet .lopt{background:#fffaf0;border-color:#f0e2c4}
.les-sheet .lopt{border-color:#e4d6b6;color:#12323a}
.les-sheet .lopt.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.les-sheet .lopt.bad{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.les-sheet .les-dock{position:static;margin:auto 0 0;max-width:none;padding:10px 0 0;border-top:2px solid #eef3f2;min-height:72px;align-items:center}
.les-sheet .les-dock:empty{border-top-color:transparent}

/* name / sound pair */
.nm-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.nm-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:84px;padding:10px 8px;border:0;border-radius:20px;font:inherit;color:#fff;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;transition:transform .1s,box-shadow .1s}
.nm-btn img{position:absolute;top:8px;inset-inline-start:10px;width:22px;height:22px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}
.nm-btn small{font-size:13px;font-weight:700;opacity:.92}
.nm-btn b{font-size:30px;font-weight:800;line-height:1.2}
.nm-b1{background:linear-gradient(180deg,#5cc4ee,#2b9bd6);box-shadow:0 6px 0 #1b6f9c,inset 0 3px 0 rgba(255,255,255,.45)}
.nm-b2{background:linear-gradient(180deg,#ffc04a,#ff9418);box-shadow:0 6px 0 #c46a0d,inset 0 3px 0 rgba(255,255,255,.55);color:#4a2204}
.nm-btn:active{transform:translateY(4px)}.nm-b1:active{box-shadow:0 2px 0 #1b6f9c}.nm-b2:active{box-shadow:0 2px 0 #c46a0d}
.nm-word{display:inline-flex;align-items:center;gap:8px;background:#f1f6f6;border:2px solid #dbe8e6;border-radius:999px;padding:7px 18px;font:inherit;font-weight:700;color:#12323a;cursor:pointer}
.nm-word img{width:22px;height:22px}
.nm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.nm-box{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 12px;border-radius:22px;text-align:center}
.nm-name{background:#e8f6fd;border:2px solid #b9e3f6}.nm-snd{background:#fff3dc;border:2px solid #f6d79a}
.nm-k{font-weight:800;font-size:15px;color:#3d4f53}
.nm-v{font-size:clamp(40px,8svh,60px);font-weight:800;line-height:1.2}
.nm-name .nm-v{color:#1f84bb}.nm-snd .nm-v{color:#e8820c}
.nm-d{font-size:13px;color:#587479;font-weight:600}
.nm-box .nm-btn{min-height:44px;flex-direction:row;gap:6px;padding:6px 18px;margin-top:6px}
.nm-box .nm-btn img{position:static;width:20px;height:20px}
@media (max-width:420px){.nm-btn b{font-size:26px}.les-sheet{border-radius:22px}}
@media (max-height:760px){.les-sheet .les-cat{padding-top:2px}.nm-btn{min-height:70px}.les-sheet .les-dock{min-height:64px}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .les-sheet{box-shadow:0 18px 50px rgba(0,0,0,.6)}}

/* room picker + word lessons */
.rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-top:4px}
.rm{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px 10px;border:2px solid #f0e2c4;border-bottom-width:5px;border-radius:20px;background:#fffaf0;font:inherit;color:#12323a;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:96px}
.rm b{position:absolute;top:8px;inset-inline-start:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ff9418;color:#fff;font-size:15px;box-shadow:0 2px 0 #c46a0d}
.rm .rm-d{display:block;height:30px}
.rm .rm-n{font-weight:800;font-size:15px;direction:ltr;line-height:1.5;text-align:center}
.rm small{color:#587479;font-size:12px;font-weight:600}
.rm.done{background:var(--ok-bg);border-color:var(--ok)}.rm.done b{background:var(--ok);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.rm.now{background:#fff3dc;border-color:#ffb02e;animation:rmpulse 1.8s ease-in-out infinite}
.rm.lock{opacity:.55;filter:grayscale(.6)}.rm.lock b{background:#9aa9ab;box-shadow:none}
.rm:active:not(.lock){transform:translateY(3px);border-bottom-width:2px}
@keyframes rmpulse{50%{box-shadow:0 0 0 6px rgba(255,176,46,.25)}}
@media (prefers-reduced-motion:reduce){.rm.now{animation:none}}
@media (max-width:420px){.rm-grid{gap:8px}.rm .rm-n{font-size:13px}}
.les-sheet .les-card.wcard{flex-direction:column;align-items:center;padding:16px;gap:4px}
.lopt.txt{font-size:20px;max-width:none;direction:ltr;word-break:break-word;padding:0 4px}
.wopts{flex-wrap:wrap}
.hs-sign i{font-family:'Vazirmatn',system-ui,sans-serif;font-weight:800;direction:rtl}
.les-sheet .les-main>*{flex-shrink:0}
.les-sheet .wcard .ex{min-height:0;display:flex;justify-content:center}
.les-sheet .wcard .ex img{height:clamp(80px,16svh,130px)}
.les-sheet .wcard>*{flex:none}
.les-sheet .wcard .ex{height:auto}
.wc{flex:none;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 12px;background:#fffaf0;border:2px solid #f6e4c0;border-radius:24px}
.wc-i{font-size:clamp(50px,10svh,80px);line-height:1.1}
.wc-i img{display:block;height:clamp(80px,16svh,130px);width:auto}
.wc-w{font-size:clamp(30px,5.5svh,42px);font-weight:800;direction:ltr;line-height:1.2;color:#12323a}
.wc-f{color:#587479;font-weight:700;font-size:15px}
.les-sheet .lopts{margin-top:10px;gap:14px}
.les-sheet .lopt{min-height:96px}
.les-sheet .speak2+.lopts{margin-top:14px}
.nm-btn b.tt{font-size:24px;display:inline-flex;align-items:center;gap:6px}
.nm-btn b.tt .tur{position:static;width:34px;height:34px;filter:none}

/* phonics */
.rime-big{font-size:clamp(64px,14svh,110px);font-weight:900;color:#ff8f12;line-height:1;letter-spacing:2px;text-shadow:0 4px 0 #ffe2b0}
.rime-ex{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.rx,.wl-c{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;border:2px solid #f0e2c4;border-bottom-width:5px;border-radius:20px;background:#fffaf0;font:inherit;color:#12323a;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rx b,.wl-c b{font-size:26px;font-weight:800;line-height:1.2}
.rx-i img,.wl-i img{display:block;height:clamp(52px,9svh,76px);width:auto}.rx-i,.wl-i{font-size:44px;line-height:1.1}
.wl{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;width:100%}
.wl-c small{color:#587479;font-size:12px;font-weight:700}
.wl-c.np{justify-content:center;min-height:80px}
.wl-c.say,.rx:active{background:var(--sun-soft);border-color:#ffb02e;transform:translateY(2px)}
.blk{display:flex;align-items:center;justify-content:center;gap:4px;font-size:clamp(40px,8svh,60px);font-weight:900;color:#12323a}
.bl-gap{display:grid;place-items:center;min-width:1.1em;height:1.2em;padding:0 6px;border-radius:14px;border:3px dashed #ffb02e;background:#fff3dc;color:#ff8f12}
.bl-gap.f{border-style:solid;background:var(--ok-bg);border-color:var(--ok);color:#12323a}
.bl-r{color:#0b6a72}
.wc-w .hl,.wl-c .hl,.rx .hl,.rime-ex .hl,h2 .hl{color:#ff8f12}

/* storybook */
.bk-wrap{width:min(92vw,420px);margin:6px auto 4px;perspective:1600px}
.bk{position:relative;width:100%;aspect-ratio:3/3.8;max-height:54vh;margin:0 auto;filter:drop-shadow(0 10px 18px rgba(80,50,10,.28))}
.bk::before{content:"";position:absolute;left:-7px;top:3px;bottom:3px;width:10px;border-radius:6px 0 0 6px;background:linear-gradient(90deg,#b4531a,#e07a2b);z-index:0}
.bk-leaf{position:absolute;inset:0;transform-origin:left center;transition:transform .75s cubic-bezier(.5,.05,.25,1),opacity .2s .55s;background:#fffaf0;border-radius:4px 16px 16px 4px;border:2px solid #e9d6b0;overflow:hidden;backface-visibility:hidden;transform-style:preserve-3d}
.bk-leaf.turned{transform:rotateY(-170deg);opacity:0;pointer-events:none}
.bk-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(90,55,10,.28),rgba(90,55,10,0) 12%,rgba(255,255,255,0) 80%,rgba(90,55,10,.08));opacity:1}
.bk-pg,.bk-cover,.bk-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 16px 12px 22px;text-align:center}
.bk-cover{background:linear-gradient(160deg,#ffb25a,#ff8a2a);color:#fff;border-radius:inherit}
.bk-cover h3,.bk-end h3{margin:4px 0 0;font-size:24px;text-shadow:0 2px 0 rgba(120,60,0,.35)}
.bk-cover small{font-size:14px;opacity:.95}.bk-cover i{margin-top:auto;font-style:normal;font-weight:800;background:rgba(255,255,255,.25);padding:6px 14px;border-radius:999px;font-size:14px}
.bk-art{position:relative;width:100%;aspect-ratio:1;max-height:50%;display:grid;place-items:center;background:#fff1d8;border-radius:14px;overflow:hidden;flex:0 0 auto}
.bk-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bk-e{font-size:min(22vw,92px)}
.bk-cover .bk-art{border:3px solid rgba(255,255,255,.7)}
.bk-s{font-size:clamp(20px,5.6vw,26px);line-height:1.5;margin-top:2px}
.bk-read{padding:8px 16px;margin-top:auto}
.bk-n{position:absolute;bottom:8px;inset-inline-end:14px;font-size:12px;color:#b08a50}
.bk-end{justify-content:center;background:linear-gradient(160deg,#fff4cf,#ffe49a)}
.bk-star{font-size:72px}
.bk-nav{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:16px;margin:8px 0 2px}
.bk-nav button{width:42px;height:42px;border-radius:50%;border:2px solid var(--line,#f0e2c4);border-bottom-width:4px;background:#fffaf0;font-size:26px;line-height:1;cursor:pointer;color:#12323a}
.bk-nav button:disabled{opacity:.35}
.bk-nav span{min-width:70px;text-align:center;font-weight:800;color:#587479;unicode-bidi:isolate}
@media (prefers-reduced-motion:reduce){.bk-leaf{transition:none}}