:root{
  --turquoise:#1f9e95; --turquoise-deep:#0f6f68;
  --saffron:#f0a830; --terracotta:#d96e4a;
  --cream:#fbf4e4; --ink:#2a2320; --leaf:#5c9a6f;
  --shadow:0 10px 30px -12px rgba(15,111,104,.45);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
html,body{height:100%}
body{
  font-family:"Fraunces",Georgia,serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(240,168,48,.18), transparent 38%),
    radial-gradient(circle at 88% 92%, rgba(217,110,74,.16), transparent 40%),
    var(--cream);
  color:var(--ink); min-height:100%;
  display:flex;justify-content:center;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.fa{font-family:"Vazirmatn",sans-serif;direction:rtl;unicode-bidi:isolate}
.app{width:100%;max-width:480px;display:flex;flex-direction:column;min-height:100vh;position:relative}
/* Home-screen PWA: scroll INSIDE .app, not the body, so the fixed bottom nav
   sits over a static viewport. iOS Safari only ghost-trails a fixed bar when the
   body itself scrolls — which is why FARABAAN-7 shows in the installed app but
   not in a Safari tab. Scoped to standalone so the browser experience is
   untouched. .app has no transform, so the fixed nav stays viewport-fixed. */
/* NOTE: the standalone app-shell overrides (fixed header + scrolling screen +
   STATIC footer nav) live at the END of this file so they win the source-order
   cascade over the base .bottom-nav/.app rules (FARABAAN-7/19). */
.tileband{height:10px;width:100%;
  background:repeating-linear-gradient(135deg,var(--turquoise) 0 14px,var(--saffron) 14px 28px,var(--terracotta) 28px 42px);opacity:.9}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--turquoise),var(--turquoise-deep));
  display:grid;place-items:center;color:#fff;font-family:"Vazirmatn";font-weight:900;font-size:24px;box-shadow:var(--shadow)}
.brand h1{font-size:18px;font-weight:600}
.brand small{display:block;font-size:11px;color:var(--turquoise-deep);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.brand-ver{font-size:10px;color:#b8aa98;font-weight:400;letter-spacing:0;text-transform:none}
.stats{display:flex;gap:14px;align-items:center;font-family:"Vazirmatn"}
.stat{display:flex;align-items:center;gap:5px;font-weight:700;font-size:15px}
.stat .ico{font-size:18px}
.stat.streak{color:var(--terracotta)} .stat.xp{color:var(--saffron)}
.stat.gems{color:#7a5cff}
.gem-ico{display:inline-block;animation:gem-shimmer 4s linear infinite}
@keyframes gem-shimmer{0%{filter:hue-rotate(0deg) saturate(1.4)}100%{filter:hue-rotate(360deg) saturate(1.4)}}
@keyframes gem-pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.stat.gems.gem-pop{animation:gem-pop .35s ease-out}
.test-mode-btn{border:1px solid #d0c4b3;background:none;color:#b8aa98;font-size:10px;font-family:"Vazirmatn";font-weight:700;padding:3px 8px;border-radius:8px;cursor:pointer;letter-spacing:.5px;transition:all .15s}
.test-mode-btn.on{border-color:var(--terracotta);background:rgba(217,110,74,.12);color:var(--terracotta)}

.screen{flex:1;display:none;flex-direction:column;padding:6px 20px 28px;animation:fade .35s ease}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.hero{margin:14px 0 22px;padding:22px;border-radius:22px;background:linear-gradient(150deg,#ffffff,#fff7e8);box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:after{content:"۱";position:absolute;left:-6px;bottom:-26px;font-family:"Vazirmatn";font-weight:900;font-size:120px;color:rgba(31,158,149,.07)}
.hero h2{font-size:24px;font-weight:600;margin-bottom:4px}
.hero p{font-size:14px;color:#6b5f55;line-height:1.5}
.unit-label{display:inline-block;font-family:"Vazirmatn";font-weight:700;font-size:12px;color:#fff;background:var(--turquoise);padding:4px 12px;border-radius:20px;margin-bottom:12px}

.path{display:flex;flex-direction:column;align-items:center;gap:0;padding-top:6px}
.node{display:flex;flex-direction:column;align-items:center}
.node .connector{width:4px;height:30px;background:repeating-linear-gradient(var(--turquoise) 0 6px,transparent 6px 12px);opacity:.4}
.lesson-btn{width:84px;height:84px;border:none;border-radius:50%;cursor:pointer;position:relative;
  background:radial-gradient(circle at 35% 30%,#fff,#ffe7b8);box-shadow:0 8px 0 #d99a2e,var(--shadow);
  display:grid;place-items:center;font-size:34px;transition:transform .12s,box-shadow .12s;font-family:"Vazirmatn";font-weight:900;color:var(--turquoise-deep)}
.lesson-btn:active{transform:translateY(4px);box-shadow:0 4px 0 #d99a2e,var(--shadow)}
.lesson-btn.locked{background:#e7ddc9;box-shadow:0 8px 0 #c9bfa7;cursor:not-allowed;filter:grayscale(.5);color:#a99}
.lesson-btn.done{background:radial-gradient(circle at 35% 30%,#bff0d4,#5c9a6f);box-shadow:0 8px 0 #3f7152,var(--shadow);color:#fff}
.lesson-btn .badge{position:absolute;top:-4px;right:-4px;background:var(--leaf);color:#fff;width:26px;height:26px;border-radius:50%;display:none;place-items:center;font-family:"Fraunces";font-size:15px;box-shadow:var(--shadow)}
.lesson-btn.done .badge{display:grid}
.lesson-cap{font-family:"Vazirmatn";font-weight:700;font-size:13px;margin-top:8px;color:#6b5f55}
.lesson-sub{font-size:11px;color:#9b8d7e}
.unit-divider{display:flex;align-items:center;gap:10px;width:100%;margin:22px 0 6px;color:var(--turquoise-deep)}
.unit-divider:before,.unit-divider:after{content:"";flex:1;height:2px;background:rgba(31,158,149,.25)}
.unit-divider span{font-family:"Vazirmatn";font-weight:700;font-size:13px}

.lesson-head{display:flex;align-items:center;gap:14px;padding:14px 0 18px}
.quit{border:none;background:none;font-size:26px;color:#b8aa98;cursor:pointer;line-height:1}
.progress{flex:1;height:14px;background:#ece1cd;border-radius:10px;overflow:hidden}
.progress > i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,var(--leaf),#7cc295);transition:width .4s ease}
/* Fixed width per slot so ☆ occupies the same space as ⭐ — no reflow on star loss */
.hearts{font-size:18px;letter-spacing:0;display:flex;gap:0}
.lesson-star{display:inline-flex;align-items:center;justify-content:center;width:22px;line-height:1;transform-origin:center bottom}
@keyframes star-live{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 2px rgba(255,200,0,.4))}
  50%{transform:translateY(-4px) scale(1.15);filter:drop-shadow(0 0 8px rgba(255,215,0,.9))}
}
@keyframes star-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  30%{transform:translateY(-6px) rotate(25deg);opacity:1}
  100%{transform:translateY(44px) rotate(100deg);opacity:0}
}
.lesson-star.star-on{animation:star-live 1.8s ease-in-out infinite}
.lesson-star.star-on:nth-child(2){animation-delay:.45s}
.lesson-star.star-on:nth-child(3){animation-delay:.9s}
.lesson-star.star-fall{animation:star-fall .55s ease-in forwards}

.q-wrap{flex:1;display:flex;flex-direction:column}
.q-prompt{font-size:21px;font-weight:600;margin:6px 0 18px;line-height:1.35}
.q-prompt .fa{font-weight:700}

.wordcard{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:30px 22px;text-align:center;margin-bottom:20px;position:relative;overflow:hidden}
.wordcard:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(31,158,149,.10),transparent 60%);pointer-events:none}
.wordcard .emoji{font-size:72px;line-height:1;position:relative}
.wordcard .glyph{font-family:"Vazirmatn";font-weight:900;font-size:96px;color:var(--turquoise-deep);line-height:1;position:relative}
.wordcard .fa-word{font-family:"Vazirmatn";font-weight:900;font-size:50px;color:var(--turquoise-deep);margin:10px 0 2px;position:relative}
.wordcard .translit{font-size:18px;color:var(--terracotta);font-style:italic;font-weight:600}
.wordcard .meaning{font-size:19px;color:var(--ink);margin-top:2px;font-weight:600}
.wordcard .tag{display:inline-block;font-family:"Vazirmatn";font-weight:700;font-size:13px;background:#eef7f0;color:var(--leaf);padding:4px 12px;border-radius:14px;margin-top:8px}
.speak{margin-top:16px;border:none;cursor:pointer;background:var(--turquoise);color:#fff;font-family:"Vazirmatn";font-weight:700;font-size:15px;padding:10px 22px;border-radius:30px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 5px 0 var(--turquoise-deep);transition:transform .1s,box-shadow .1s}
.speak:active{transform:translateY(3px);box-shadow:0 2px 0 var(--turquoise-deep)}
.speak-row{display:flex;gap:10px;justify-content:center;margin-top:16px}
.speak-row .speak{margin-top:0;font-size:14px;padding:10px 16px}

.options{display:grid;gap:12px}
.options.cols{grid-template-columns:1fr 1fr}
.opt{border:2px solid #e6dcc8;background:#fff;border-radius:18px;padding:18px 16px;cursor:pointer;font-size:19px;text-align:center;transition:all .12s;box-shadow:0 4px 0 #e6dcc8}
.opt:active{transform:translateY(2px);box-shadow:0 2px 0 #e6dcc8}
.opt .fa-word{font-family:"Vazirmatn";font-weight:700;font-size:30px;color:var(--turquoise-deep);display:block}
.opt .glyph{font-family:"Vazirmatn";font-weight:900;font-size:46px;color:var(--turquoise-deep);display:block;line-height:1}
.opt .emoji{font-size:42px;display:block}
.opt.correct{border-color:var(--leaf);background:#e8f6ec;box-shadow:0 4px 0 var(--leaf);color:var(--leaf)}
.opt.wrong{border-color:var(--terracotta);background:#fbe9e3;box-shadow:0 4px 0 var(--terracotta);color:var(--terracotta)}
.opt.dim{opacity:.45}

/* "Tap all the letters" tiles (FARABAAN-18) — multi-select letter grid */
.toggle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.toggle-tile{border:2px solid #e6dcc8;background:#fff;border-radius:16px;padding:14px 6px;cursor:pointer;transition:all .12s;box-shadow:0 4px 0 #e6dcc8}
.toggle-tile:active{transform:translateY(2px);box-shadow:0 2px 0 #e6dcc8}
.toggle-tile .glyph{font-family:"Vazirmatn";font-weight:900;font-size:38px;color:var(--turquoise-deep);display:block;line-height:1}
.toggle-tile.on{border-color:var(--turquoise);background:#e4f5f4;box-shadow:0 4px 0 var(--turquoise)}
.toggle-tile.correct{border-color:var(--leaf);background:#e8f6ec;box-shadow:0 4px 0 var(--leaf)}
.toggle-tile.correct .glyph{color:var(--leaf)}
.toggle-tile.wrong{border-color:var(--terracotta);background:#fbe9e3;box-shadow:0 4px 0 var(--terracotta)}
.toggle-tile.wrong .glyph{color:var(--terracotta)}

.match{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match .col{display:flex;flex-direction:column;gap:10px}
.chip{border:2px solid #e6dcc8;background:#fff;border-radius:16px;padding:16px 8px;cursor:pointer;font-size:18px;text-align:center;box-shadow:0 4px 0 #e6dcc8;transition:all .12s}
.chip .fa-word{font-family:"Vazirmatn";font-weight:700;font-size:24px;color:var(--turquoise-deep)}
.chip .glyph{font-family:"Vazirmatn";font-weight:900;font-size:34px;color:var(--turquoise-deep)}
.chip:active{transform:translateY(2px)}
.chip.sel{border-color:var(--saffron);background:#fff6e3;box-shadow:0 4px 0 var(--saffron)}
.chip.wrong{border-color:var(--terracotta);background:#fbe9e3}
.chip.gone{opacity:0;pointer-events:none;transform:scale(.7);transition:all .3s}

/* ===== Letter tracing ===== */
.trace-wrap{position:relative;width:260px;height:260px;margin:0 auto 14px;border-radius:20px;overflow:hidden;background:#f8f4ed}
.trace-wrap::after{content:'';position:absolute;inset:0;border:3px dashed rgba(31,158,149,.35);border-radius:20px;pointer-events:none}
.trace-guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Vazirmatn";font-weight:900;font-size:170px;line-height:1;
  color:rgba(31,158,149,.22);pointer-events:none;user-select:none}
.trace-canvas{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}
.ah-screen{padding:0!important;position:relative}
#ahCanvas{display:block;width:100%;touch-action:none}
.trace-clear{border:none;background:none;color:var(--terracotta);font-family:"Vazirmatn";font-weight:700;
  font-size:13px;cursor:pointer;text-decoration:underline;margin-top:4px}
.listen-btn{border:none;background:none;font-size:20px;cursor:pointer;vertical-align:middle;padding:2px 6px;transition:transform .1s}
.listen-btn:hover{transform:scale(1.15)}

.footer{padding-top:14px}
.skip-btn{display:none;width:100%;border:2px solid var(--terracotta);cursor:pointer;border-radius:14px;padding:10px;font-family:"Vazirmatn";font-weight:600;font-size:14px;background:transparent;color:var(--terracotta);margin-bottom:8px;opacity:.75;transition:opacity .15s}
.skip-btn:hover{opacity:1}
.check{width:100%;border:none;cursor:pointer;border-radius:18px;padding:18px;font-family:"Vazirmatn";font-weight:700;font-size:18px;background:var(--leaf);color:#fff;box-shadow:0 6px 0 #3f7152;transition:transform .1s,box-shadow .1s,opacity .2s}
.check:active{transform:translateY(4px);box-shadow:0 2px 0 #3f7152}
.check:disabled{opacity:.4;cursor:not-allowed}
.check.recording{background:var(--terracotta)!important;box-shadow:0 6px 0 #b5462b!important;animation:mic-pulse .7s ease-in-out infinite}
@keyframes mic-pulse{0%,100%{transform:none;box-shadow:0 6px 0 #b5462b}50%{transform:translateY(-3px);box-shadow:0 9px 0 #b5462b}}
.mic-status{font-family:"Vazirmatn";font-size:13px;min-height:22px;margin:6px 0 2px;text-align:center}
.mic-on{color:var(--terracotta);animation:mic-pulse .7s ease-in-out infinite;display:inline-block}
.feedback{display:none;border-radius:18px;padding:16px 18px;margin-bottom:12px;font-weight:600;align-items:flex-start;gap:10px}
.feedback.show{display:flex;animation:fade .25s ease}
.feedback.good{background:#e8f6ec;color:#3f7152} .feedback.bad{background:#fbe9e3;color:var(--terracotta)}
.feedback span{line-height:1.5}
.feedback .fa{font-family:"Vazirmatn";font-weight:700}

/* Compact so the whole finish screen fits the viewport with no scrolling
   (FARABAAN-11) — stickers now float instead of stacking here. */
.finish{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;max-height:100dvh;overflow-y:auto;padding:2px 0}
.finish .burst{font-size:38px;animation:pop .5s ease}
@keyframes pop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.finish h2{font-size:23px;font-weight:700}
/* Compact pills so the whole victory screen fits WITH the header shown (FARABAAN-19) */
.finish .reward{display:flex;gap:8px;margin:4px 0 8px}
.pill{background:#fff;border-radius:14px;padding:8px 14px;box-shadow:var(--shadow);font-family:"Vazirmatn";font-weight:700}
.pill .big{display:block;font-size:20px;color:var(--saffron)} .pill.streak .big{color:var(--terracotta)} .pill.gems .big{color:#7a5cff}
.pill small{color:#9b8d7e;font-weight:500;font-size:11px}

.install{display:none;margin:0 0 14px;background:#fff;border:1px dashed var(--turquoise);border-radius:16px;padding:12px 14px;font-size:13px;color:#6b5f55;align-items:center;gap:10px}
.install.show{display:flex}
.install button{margin-inline-start:auto;border:none;background:var(--turquoise);color:#fff;font-family:"Vazirmatn";font-weight:700;padding:8px 14px;border-radius:12px;cursor:pointer;white-space:nowrap}

.voice-hint{display:none;margin:0 0 14px;background:#fff8e1;border:1px solid var(--saffron);border-radius:16px;padding:12px 14px;font-size:13px;color:#6b5f55}

/* ===== Skip button (unified — footer skip for trace/speak) ===== */

/* ===== Topbar menu / return-to-profiles button ===== */
.menu-btn{border:none;background:none;font-size:20px;color:#b8aa98;cursor:pointer;padding:4px 6px;border-radius:8px;line-height:1;transition:all .15s}
.menu-btn:hover{color:var(--turquoise-deep);background:rgba(31,158,149,.1)}

/* ===== Player avatar in topbar ===== */
.player-avatar{display:none;width:30px;height:30px;border-radius:50%;background:var(--terracotta);color:#fff;font-family:"Vazirmatn";font-weight:900;font-size:14px;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(217,110,74,.4)}

/* ===== Welcome screen ===== */
.welcome-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 20px 40px;text-align:center}
.welcome-logo{margin-bottom:8px}
.welcome-title{font-size:32px;font-weight:700;font-family:"Fraunces"}
.welcome-title-fa{font-size:22px;color:#9b8d7e}
.welcome-sub{font-family:"Vazirmatn";font-size:16px;color:#9b8d7e;margin-bottom:20px}
.welcome-form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px;background:#fff;border-radius:24px;padding:26px 24px;box-shadow:var(--shadow)}
.welcome-label{font-family:"Vazirmatn";font-weight:700;font-size:15px;color:#6b5f55;text-align:left}
.check-back{background:#e0d8cc;color:var(--ink);box-shadow:0 6px 0 #c5b8a8}
.check-back:active{box-shadow:0 2px 0 #c5b8a8}
.welcome-input{border:2px solid #e6dcc8;border-radius:14px;padding:14px 16px;font-family:"Fraunces";font-size:18px;color:var(--ink);background:#fbf4e4;outline:none;transition:border-color .15s}
.welcome-input:focus{border-color:var(--turquoise)}
.welcome-btn{margin-top:4px}

/* ===== Profile list on welcome screen ===== */
.welcome-back{font-size:15px;color:#6b5f55;text-align:center;margin-bottom:10px}
.profile-list{display:flex;flex-direction:column;gap:10px;width:100%}
.profile-chip-wrap{display:flex;align-items:center;gap:8px}
.profile-chip{display:flex;align-items:center;gap:14px;border:2px solid #e6dcc8;background:#fff;border-radius:18px;padding:14px 18px;cursor:pointer;text-align:left;box-shadow:0 4px 0 #e6dcc8;transition:all .12s;flex:1}
.profile-chip:active{transform:translateY(2px);box-shadow:0 2px 0 #e6dcc8}
.profile-chip:hover{border-color:var(--turquoise);box-shadow:0 4px 0 var(--turquoise)}
.profile-chip-av{width:38px;height:38px;border-radius:50%;background:var(--terracotta);color:#fff;font-family:"Vazirmatn";font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.profile-chip-name{font-family:"Fraunces";font-size:19px;font-weight:600;color:var(--ink)}
.profile-actions{display:flex;gap:4px;flex-shrink:0}
.prof-act{border:none;background:none;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;color:#b8aa98;transition:all .12s}
.prof-act:hover{background:#f0e8da;color:var(--ink)}
.prof-act.del:hover{color:var(--terracotta);background:rgba(217,110,74,.12)}
.profile-new-btn{margin-top:12px;border:2px dashed #d0c4b3;background:none;color:#9b8d7e;font-family:"Vazirmatn";font-weight:700;font-size:14px;width:100%;padding:12px;border-radius:16px;cursor:pointer;transition:all .15s}
.profile-new-btn:hover{border-color:var(--turquoise);color:var(--turquoise)}
.back-profiles-btn{border:none;background:none;color:var(--turquoise-deep);font-family:"Vazirmatn";font-weight:700;font-size:14px;cursor:pointer;text-align:left;padding:2px 0}

/* ===== Stickers ===== */
.sticker-slot{position:relative;width:64px;height:64px}
.sticker-item{position:absolute;left:0;top:0;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sticker-letter{font-family:"Vazirmatn",sans-serif;font-weight:900;font-size:24px;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.4);pointer-events:none;user-select:none}
.sticker-locked{background:linear-gradient(135deg,#e8e0d4,#d0c8bc);box-shadow:none}
.sticker-locked .sticker-letter{color:#b8aa98;text-shadow:none}
.sticker-common{background:linear-gradient(145deg,#1f9e95,#2ab5ab,#0f6f68);box-shadow:0 3px 10px rgba(31,158,149,.4)}
.sticker-bronze{background:linear-gradient(145deg,#8b4513,#cd7f32,#e8a953,#cd7f32,#8b4513);box-shadow:0 3px 10px rgba(184,115,51,.55)}
.sticker-silver{background:linear-gradient(145deg,#696969,#c0c0c0,#e8e8e8,#c0c0c0,#696969);box-shadow:0 3px 10px rgba(160,160,160,.5)}
.sticker-gold{background:linear-gradient(145deg,#b8860b,#ffd700,#fffacd,#ffd700,#b8860b);box-shadow:0 3px 16px rgba(255,215,0,.65)}
.sticker-count{position:absolute;bottom:3px;right:3px;font-size:8px;font-weight:800;color:#fff;background:rgba(0,0,0,0.45);border-radius:5px;padding:1px 3px;line-height:1;font-family:monospace;pointer-events:none}

/* Collection page */
.coll-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:8px 4px 16px;justify-items:center;overflow-y:auto;direction:rtl}
.coll-section-hd{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#9b8d7e;padding:8px 4px 2px;margin-top:4px}
.coll-stats-row{display:flex;justify-content:space-between;font-size:13px;color:#6b5f55;padding:4px 2px 6px;font-family:"Vazirmatn"}
.coll-legend{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:4px 0 14px}
.coll-legend-item{display:flex;align-items:center;gap:5px;font-size:12px;font-family:"Vazirmatn";font-weight:600;color:#6b5f55}
.coll-legend-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0}
.coll-legend-count{background:rgba(0,0,0,.08);border-radius:10px;padding:1px 6px;font-size:11px;font-weight:700;min-width:18px;text-align:center}

/* Screen lock overlay — shown when content requires unlocking */
.screen-lock-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(248,244,237,.88);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.screen-lock-card{text-align:center;padding:32px 28px;background:#fff;border-radius:22px;
  box-shadow:0 8px 48px rgba(0,0,0,.13);max-width:280px}
.screen-lock-icon{font-size:52px;line-height:1;margin-bottom:14px}
.screen-lock-title{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:8px}
.screen-lock-desc{font-size:13.5px;color:#6b5f55;line-height:1.5;font-family:"Vazirmatn";margin-bottom:22px}
.screen-lock-btn{display:block;width:100%;padding:14px;border-radius:14px;border:none;cursor:pointer;
  background:var(--turquoise);color:#fff;font-size:15px;font-weight:700;font-family:"Fraunces",serif}

/* Collection + settings buttons on home */
.coll-btn{border:none;background:rgba(255,255,255,.75);border-radius:16px;padding:13px 22px;cursor:pointer;font-family:"Vazirmatn";font-weight:700;font-size:14px;color:var(--turquoise-deep);box-shadow:0 2px 8px rgba(0,0,0,.08);transition:all .15s;width:100%}
.coll-btn:active{transform:translateY(2px)}

/* ===== Dashboard ===== */
.dash-header{display:flex;align-items:center;gap:14px;padding:18px 4px 10px}
.dash-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,var(--turquoise),var(--turquoise-deep));color:#fff;font-family:"Vazirmatn";font-weight:900;font-size:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow)}
.dash-greeting{font-family:"Vazirmatn";font-weight:700;font-size:20px;color:var(--ink)}
.dash-sub{display:flex;gap:14px;margin-top:4px;font-family:"Vazirmatn";font-size:14px;font-weight:700}
.dash-nav{display:flex;flex-direction:column;gap:8px}
.dash-item{display:flex;align-items:center;gap:12px;background:#fff;border:none;border-radius:14px;padding:12px 16px;cursor:pointer;text-align:left;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .15s;width:100%}
.dash-item:active{transform:translateY(2px);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.dash-item.dash-locked{opacity:.38;cursor:default;pointer-events:none}
.dash-continue{background:linear-gradient(135deg,var(--turquoise),var(--turquoise-deep));color:#fff;box-shadow:0 6px 0 var(--turquoise-deep),var(--shadow)}
.dash-continue:active{transform:translateY(4px);box-shadow:0 2px 0 var(--turquoise-deep)}
.dash-icon{font-size:26px;flex-shrink:0;width:36px;text-align:center}
.dash-label{flex:1;font-size:15px;font-weight:600;font-family:"Fraunces",serif;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.dash-continue .dash-label{color:#fff}
.dash-label .fa{font-size:14px}
.dash-arrow{font-size:20px;color:#c4b8a8;font-weight:300}
.dash-continue .dash-arrow{color:rgba(255,255,255,.6)}

/* ===== Sub-menu screens (Lessons / Grammar) ===== */
.sub-menu-list{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.sub-menu-item{display:flex;align-items:center;gap:14px;background:#fff;border:none;border-radius:16px;padding:16px 18px;cursor:pointer;text-align:left;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .15s;width:100%;font-size:15px;font-family:"Fraunces",serif;color:var(--ink)}
.sub-menu-item:active{transform:translateY(2px)}
.sub-menu-item.done-item{background:linear-gradient(135deg,#f0fff8,#fff)}
.sub-menu-item.locked-item{opacity:.38;cursor:not-allowed}
.sub-item-icon{font-size:24px;width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:"Vazirmatn";font-weight:900;color:var(--turquoise-deep)}
.sub-item-icon svg{width:38px;height:38px;display:block}
.sub-item-text{flex:1;display:flex;flex-direction:column;gap:2px}
.sub-item-text .fa{font-size:14px;font-weight:700;color:var(--ink)}
.sub-item-en{font-size:12px;color:#9b8d7e}
.sub-item-status{font-size:18px;color:var(--leaf);font-weight:700}

/* ===== Games menu ===== */
#games-menu{padding:0}
.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
.game-tile{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;background-size:cover;background-position:center;transition:filter .18s;aspect-ratio:1}
@media(hover:hover){.game-tile:not(.locked):hover{filter:brightness(1.18)}}
.game-tile:not(.locked):active{filter:brightness(1.30)}
.game-tile.locked{cursor:not-allowed;filter:grayscale(1) brightness(1.25) contrast(.85) saturate(0)}
.game-tile-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.80) 0%,rgba(0,0,0,.18) 55%,transparent 100%)}
.game-tile-name{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:15px;font-weight:700;font-family:"Fraunces",serif;text-shadow:0 1px 6px rgba(0,0,0,.90);line-height:1.35}
.game-tile-name .fa{font-family:"Vazirmatn",sans-serif;font-size:13px;display:block;font-weight:600;opacity:.88}
.game-tile-lock{position:absolute;top:10px;right:12px;font-size:20px;display:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.game-tile.locked .game-tile-lock{display:block}
.mg-setup-panel{padding:16px}
.mg-setup-panel .setup-label{font-size:13px;font-weight:700;color:var(--turquoise-deep);text-transform:uppercase;letter-spacing:.6px;padding-bottom:8px}
.mg-size-row{display:flex;gap:8px;margin-bottom:12px;width:100%}
.mg-size-btn{flex:1;padding:10px;border:2px solid #e0d8cc;border-radius:12px;background:none;cursor:pointer;font-size:15px;font-weight:700;font-family:"Fraunces";color:#9b8d7e;transition:all .15s}
.mg-size-btn.active{border-color:var(--turquoise);color:var(--turquoise-deep);background:rgba(31,158,149,.08)}

/* ===== Memory Game ===== */
.mg-timer-bar{display:flex;align-items:center;gap:8px;padding:6px 4px 2px}
.mg-timer-track{flex:1;height:6px;background:#e8e0d4;border-radius:6px;overflow:hidden}
.mg-timer-fill{height:100%;background:var(--turquoise);border-radius:6px;transition:width 1s linear,background .3s}
.mg-timer-fill-urgent{background:#e74c3c}
.mg-timer-label{font-family:"Vazirmatn";font-weight:900;font-size:15px;color:var(--turquoise-deep);min-width:24px;text-align:right;transition:color .3s}
.mg-timer-urgent{color:#e74c3c;animation:mg-pulse .5s infinite alternate}
@keyframes mg-pulse{from{opacity:1}to{opacity:.4}}
.mg-grid{display:grid;gap:5px;padding:4px;overflow-y:auto}
.mg-card{height:68px;perspective:600px;cursor:pointer}
.mg-card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .35s}
.mg-card.mg-flipped .mg-card-inner,.mg-card.mg-matched .mg-card-inner{transform:rotateY(180deg)}
.mg-card-back,.mg-card-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.mg-card-back{background:linear-gradient(145deg,var(--turquoise),var(--turquoise-deep));color:rgba(255,255,255,.4);font-family:"Vazirmatn";font-weight:900;font-size:18px;box-shadow:0 2px 0 var(--turquoise-deep)}
.mg-card-front{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);transform:rotateY(180deg)}
.mg-card.mg-matched .mg-card-front{background:linear-gradient(135deg,#e8fff3,#f0fff8);box-shadow:0 2px 4px rgba(92,154,111,.2)}
.mg-fa-text{font-family:"Vazirmatn";font-weight:700;font-size:22px;color:var(--turquoise-deep);direction:rtl}
.mg-en-text{font-size:22px;color:#6b5f55;font-family:"Fraunces";text-align:center;font-weight:700}
.mg-victory{display:none;flex-direction:column;align-items:center;gap:12px;padding:24px 20px;text-align:center;animation:fade .3s ease}
@keyframes mg-sticker-bounce{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.3) rotate(6deg)}80%{transform:scale(.9) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
.mg-sticker-pop .sticker-reveal-badge{animation:mg-sticker-bounce .6s ease forwards}
.mg-sticker-pop .sticker-reveal{animation:mg-sticker-bounce .6s ease .1s both}

/* Settings screen */
.settings-section-hd{font-size:13px;font-weight:700;color:var(--turquoise-deep);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;margin-top:8px}
.settings-desc{font-size:13px;color:#9b8d7e;margin-bottom:14px;line-height:1.5}

/* About screen */
.about-log{background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.about-ver{font-size:13px;font-weight:700;color:var(--turquoise-deep);font-family:'Fraunces',serif;margin-bottom:6px}
.about-changes{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.about-changes li{font-size:13px;color:#6b5f55;line-height:1.45}
.voice-cards{display:flex;flex-direction:column;gap:12px}
.voice-card{background:#fff;border-radius:16px;padding:16px;display:flex;align-items:center;gap:14px;cursor:pointer;border:2px solid transparent;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .15s;position:relative}
.voice-card:active{transform:translateY(1px)}
.voice-card.selected{border-color:var(--turquoise);background:linear-gradient(135deg,#f0fffe,#fff)}
.voice-card-flag{font-size:26px;flex-shrink:0}
.voice-card-info{flex:1}
.voice-card-label{font-size:15px;font-weight:700;color:var(--ink)}
.voice-card-desc{font-size:12px;color:#9b8d7e;margin-top:2px}
.voice-preview-btn{border:none;background:rgba(31,158,149,.1);color:var(--turquoise-deep);border-radius:10px;padding:8px 10px;cursor:pointer;font-size:16px;flex-shrink:0;transition:background .15s}
.voice-preview-btn:active{background:rgba(31,158,149,.25)}
.voice-check{position:absolute;top:10px;right:12px;color:var(--turquoise);font-size:14px;font-weight:700}

/* Sticker reveal on finish screen */
/* Loot chest reward (FARABAAN-11) */
/* min-height:0 + a negative TOP margin collapses the chest art's transparent top
   padding so the victory screen fits without scrolling on mobile. No bottom
   negative margin — that pulled the stars up over the "Tap to open" hint
   (FARABAAN-11). The hint itself is pulled up onto the chest base below. */
.reward-chest{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:0;margin:-30px 0 0}
.reward-chest-btn{position:relative;z-index:1;line-height:0;background:none;border:none;cursor:pointer;padding:0}
/* Soft, STATIC warm aura behind the chest (no rotation, no pulse). The life comes
   from the twinkling wisps below. Centred on the chest body (68% of the art). */
.reward-chest::before{content:'';position:absolute;left:50%;top:68%;width:114%;height:86%;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(140,225,255,.4),rgba(255,214,140,.22) 42%,transparent 70%)}

/* Twinkling wisps (FARABAAN-19): many small dots that fade in/out and drift a few
   px LOCALLY, each on its own random timing (set inline in JS). They sparkle all
   around the chest — they do NOT rotate as one mass. */
.chest-wisps{position:absolute;inset:-8% -6%;z-index:2;pointer-events:none}
.wisp{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--c),var(--c0) 70%);
  box-shadow:0 0 7px 1px var(--c);
  opacity:0;animation-name:wisp-twinkle;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
@keyframes wisp-twinkle{
  0%,100%{opacity:0;transform:translate(0,0) scale(.35)}
  50%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1)}
}

/* Continuous golden shine from the OPEN chest's mouth — keeps breathing so the
   treasure looks like it's still glowing after it opens (FARABAAN-19). */
.chest-shine{position:absolute;left:50%;top:43%;width:46%;height:30%;
  transform:translate(-50%,-50%);z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,rgba(255,244,190,.95),rgba(255,216,120,.5) 42%,transparent 72%)}
.reward-chest.open .chest-shine{opacity:1;animation:chest-shine 2.4s ease-in-out infinite}
@keyframes chest-shine{
  0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(.92)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}
/* Real 3D Lottie chest — height-responsive (vh cap) so it shrinks on short phones;
   closed shakes gently until tapped (FARABAAN-11) */
.reward-chest-lottie{position:relative;z-index:1;width:min(330px,86vw,32vh);height:min(330px,86vw,32vh)}
.reward-chest-lottie svg{display:block;width:100%;height:100%}
/* The gold-chest render is already warm gold — no recolour filter (a sepia/hue
   filter would wreck the 3D shading). */
.chest-fallback{font-size:150px;line-height:1;text-align:center}
.reward-chest:not(.open) .reward-chest-lottie{animation:chest-shake 2s ease-in-out infinite}
@keyframes chest-shake{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-4deg)}91%{transform:rotate(4deg)}94%{transform:rotate(-3deg)}97%{transform:rotate(2deg)}}
/* Pull the hint up onto the chest base (it otherwise floats in the art's
   transparent bottom padding), reclaiming that space so the screen fits. */
.reward-chest-hint{font-size:13px;font-weight:700;font-family:"Vazirmatn";color:var(--turquoise-deep);animation:hint-pulse 1.2s ease-in-out infinite;margin-top:-34px;position:relative;z-index:2}
@keyframes hint-pulse{0%,100%{opacity:.55}50%{opacity:1}}
/* Reward banner anchored to the bottom of the chest (left/top set in JS). It pops
   in Hunter-style, stays fully readable ~2.4s, then fades out over the last
   ~0.9s (total 3.4s) — a slow opacity ramp made it look like it vanished early. */
.reward-float-stack{position:fixed;z-index:9000;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;opacity:0;transform:translateX(-50%)}
.reward-float-stack.show{animation:reward-fade-bottom 3.4s ease forwards}
@keyframes reward-fade-bottom{0%{opacity:0;transform:translateX(-50%) translateY(12px) scale(.85)}8%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}74%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.98)}}
/* Hunter-style sticker banner — big */
.chest-sticker-banner{display:flex;align-items:center;gap:18px;justify-content:center;background:rgba(38,26,14,.95);border-radius:22px;padding:20px 30px;max-width:380px;box-shadow:0 14px 40px rgba(0,0,0,.4);animation:stickerPop .5s cubic-bezier(.175,.885,.32,1.4) both}
.chest-sticker-banner.dupe{font-family:"Vazirmatn";font-size:16px;color:#d8c9b4;font-weight:600;padding:16px 26px}
.chest-sticker-badge{width:96px;height:96px;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chest-sticker-badge .sticker-letter{font-size:50px}
.chest-sticker-text{font-family:"Vazirmatn";font-weight:800;font-size:20px;color:#ffe89a;text-align:left}
.reward-gem-banner{display:flex;align-items:center;justify-content:center;gap:6px;font-family:"Vazirmatn";font-weight:800;font-size:16px;color:#7a5cff;margin-top:10px}
.reward-gem-banner.maxed{color:#b57d10}
.reward-gem-ico{font-size:20px;display:inline-block;animation:gem-shimmer 4s linear infinite}
.reward-gem-prog{font-size:12px;font-weight:700;color:#9b8d7e;background:rgba(122,92,255,.12);padding:2px 8px;border-radius:10px}
.flying-gem{position:fixed;font-size:22px;z-index:9999;pointer-events:none;opacity:1;transition:transform .75s cubic-bezier(.5,0,.4,1),opacity .75s;will-change:transform}
.sticker-reveal{display:flex;align-items:center;gap:12px;justify-content:center;padding:10px 0 4px}
.sticker-reveal-badge{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:stickerPop 0.55s cubic-bezier(0.175,0.885,0.32,1.4) 0.25s both}
.sticker-reveal-badge .sticker-letter{font-size:22px}
@keyframes stickerPop{
  0%  {transform:scale(0) rotate(-20deg);opacity:0}
  55% {transform:scale(1.35) rotate(8deg);opacity:1}
  75% {transform:scale(0.88) rotate(-4deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}

/* ===== Home page navigation ===== */
.home-pages{min-height:220px}
.home-page{display:none}
.home-page.active{display:block;animation:hpIn .18s ease}
@keyframes hpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.unit-page-hd{display:flex;justify-content:space-between;align-items:center;font-family:"Vazirmatn";font-size:15px;font-weight:700;color:var(--turquoise-deep);background:rgba(31,158,149,.08);border-radius:16px;padding:8px 16px;margin:8px 0 4px}
.unit-page-hd .fa{text-align:right}
.unit-page-hd span:not(.fa){text-align:left;font-family:"Fraunces";font-weight:600;font-size:14px;color:#9b8d7e}
.pg-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 0 4px}
.pg-arrow{width:38px;height:38px;border-radius:50%;border:2px solid var(--turquoise);background:none;font-size:22px;color:var(--turquoise);cursor:pointer;line-height:1;transition:all .12s;display:flex;align-items:center;justify-content:center}
.pg-arrow:disabled{opacity:.25;cursor:default}
.pg-arrow:not(:disabled):active{background:var(--turquoise);color:#fff}
.pg-dots{display:flex;gap:8px;align-items:center}
.pg-dot{width:10px;height:10px;border-radius:50%;border:none;background:#d0c8bc;cursor:pointer;padding:0;transition:all .15s}
.pg-dot.active{background:var(--turquoise);transform:scale(1.25)}

/* ===== Sentence word buttons (readSentence) ===== */
.sent-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:6px 0 4px}
.sent-word{font-family:"Vazirmatn";font-size:26px;font-weight:700;background:rgba(31,158,149,.1);border:2px solid rgba(31,158,149,.25);border-radius:10px;padding:7px 14px;cursor:pointer;color:var(--ink);transition:background .1s}
.sent-word:active{background:rgba(31,158,149,.28)}

/* ===== Sentence order exercise ===== */
.so-target{text-align:center;padding:4px 0 10px}
.so-ans{min-height:58px;background:rgba(255,255,255,.65);border-radius:14px;border:2px dashed #c8b9a8;padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:0 0 16px;direction:rtl}
.so-pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;direction:rtl;padding:4px 0}
.so-btn{font-family:"Vazirmatn";font-size:22px;font-weight:700;background:var(--cream);border:2px solid #d0c8bc;border-radius:10px;padding:9px 16px;color:var(--ink);cursor:pointer;transition:all .1s}
.so-btn:active{transform:scale(.95)}
.so-placed{font-family:"Vazirmatn";font-size:22px;font-weight:700;background:rgba(31,158,149,.12);border:2px solid var(--turquoise);border-radius:10px;padding:9px 16px;color:var(--ink);cursor:pointer;transition:all .1s}
.so-placed:active{background:rgba(181,70,43,.1);border-color:var(--terracotta)}
.so-hint{color:#b8aa98;font-size:13px;font-family:"Vazirmatn";font-style:italic}

/* ===== Letter forms (Section 2) ===== */
.lforms-wrap{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:8px 4px}
.lform-card{background:rgba(255,255,255,.8);border-radius:16px;padding:14px 18px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.07);min-width:110px}
.lform-shape{font-size:52px;line-height:1.1;color:var(--turquoise-deep);font-weight:900}
.lform-pos{font-size:11px;color:#9b8d7e;font-family:"Vazirmatn";margin:4px 0 2px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.lform-ex{font-size:13px;color:#6b5f55;font-family:"Vazirmatn"}
.lform-note{font-size:11px;color:#b8aa98;margin-top:4px;font-style:italic}
.lform-speak{margin-top:8px;font-size:13px;padding:6px 12px}

/* ===== Word pairs (Section 2) ===== */
.word-pairs-wrap{display:flex;flex-direction:column;gap:14px;align-items:center;padding:12px 0}
.word-pair{display:flex;align-items:center;gap:16px}
.wp-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.wp-word{background:rgba(255,255,255,.85);border:2px solid var(--cream-deep);border-radius:12px;padding:8px 18px;font-size:26px;font-family:"Vazirmatn";font-weight:700;color:var(--ink);cursor:pointer;transition:background .12s}
.wp-word:active{background:var(--cream-deep)}
.wp-en{font-size:12px;color:#9b8d7e;font-family:"Fraunces";font-style:italic}
.pair-dash{color:#c8b9a8;font-size:20px;font-weight:400}

/* ===== High score badge ===== */
.high-badge{background:linear-gradient(135deg,var(--saffron),#f5c642);color:#fff;font-family:"Vazirmatn";font-weight:900;font-size:15px;padding:8px 20px;border-radius:30px;box-shadow:0 4px 14px rgba(240,168,48,.5);animation:pop .5s ease}

/* ===== Journey screen ===== */
#journey{padding:0;overflow:hidden}
/* Restore side padding for the header row only — journey-frame uses its own margins */
#journey .lesson-head{padding-left:20px;padding-right:20px}
/* .journey-frame is a NON-SCROLLING wrapper: overflow:hidden + border-radius creates
   a permanent rounded clip that is always visible at all scroll positions. */
.journey-frame{
  flex:1;
  margin:8px 10px 68px;  /* top gap · sides gap · bottom clearance above fixed nav */
  border-radius:18px;
  overflow:hidden;        /* clips canvas corners — reliable across all browsers */
}
.journey-scroll{
  width:100%;height:100%;
  overflow-y:auto;overflow-x:hidden;
  display:flex;justify-content:center;
  scrollbar-width:none;
}
.journey-scroll::-webkit-scrollbar{display:none}
.journey-canvas{
  position:relative;width:100%;flex-shrink:0;
  background:linear-gradient(170deg,#0a2e28 0%,#0c2840 55%,#16103a 100%);
}
.journey-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.j-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}
.j-bubble{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:42px;line-height:1;position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  transition:transform .13s,box-shadow .13s;
  border:3px solid rgba(255,255,255,.5);
}
.j-node:active .j-bubble{transform:scale(.90)}
.j-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.2px;margin-top:5px;color:rgba(255,255,255,.82);white-space:nowrap}
.j-sub{font-size:10px;color:rgba(255,255,255,.72);margin-top:2px;font-family:'Vazirmatn',sans-serif;white-space:nowrap}

/* ── Pulse animation — bold white ring + scale bounce ── */
@keyframes j-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.95),0 0 30px 6px currentColor;transform:scale(1)}
  60%{box-shadow:0 0 0 26px rgba(255,255,255,0),0 0 50px 14px currentColor;transform:scale(1.12)}
}
.j-pulse .j-bubble{animation:j-pulse 2s ease-in-out infinite}

/* ── Icon animations ── */
@keyframes j-icon-float{
  0%,100%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-10px) scale(1.15)}
  60%{transform:translateY(-8px) scale(1.12)}
}
@keyframes j-icon-wobble{
  0%,100%{transform:rotate(-18deg) scale(1.1)}
  50%{transform:rotate(18deg) scale(1.2)}
}
.j-icon{display:block;line-height:1}
.j-available:not(.j-pulse) .j-icon,.j-done .j-icon{animation:j-icon-float 2.4s ease-in-out infinite}
.j-pulse .j-icon{animation:j-icon-wobble 1.2s ease-in-out infinite}
.j-icon-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}

/* ── States ── */
.j-locked .j-bubble{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.55);cursor:default;box-shadow:none}
.j-locked .j-label{color:rgba(255,255,255,.55);font-size:9.5px}
.j-locked .j-sub{color:rgba(255,255,255,.38)}

/* Lesson nodes – teal */
.j-kind-lesson.j-available .j-bubble,.j-kind-lesson.j-pulse .j-bubble{
  background:linear-gradient(145deg,#22b5ab,#0f6f68);
  box-shadow:0 8px 24px rgba(31,158,149,.45);
}
.j-kind-lesson.j-available .j-label{color:rgba(255,255,255,.9)}
.j-kind-lesson.j-done .j-bubble{background:linear-gradient(145deg,#5fae7a,#3a7550);box-shadow:0 6px 18px rgba(92,154,111,.4)}
.j-kind-lesson.j-done .j-label{color:rgba(255,255,255,.85)}

/* Game nodes – fiery orange */
.j-kind-game.j-available .j-bubble,.j-kind-game.j-pulse .j-bubble{
  background:linear-gradient(145deg,#f5b82e,#d96e4a);
  box-shadow:0 8px 24px rgba(240,168,48,.5);
}
.j-kind-game.j-available .j-label{color:rgba(255,255,255,.9)}
.j-kind-game.j-done .j-bubble{background:linear-gradient(145deg,#f0a830,#b05020);box-shadow:0 6px 18px rgba(217,110,74,.4)}
.j-kind-game.j-done .j-label{color:rgba(255,255,255,.85)}

/* Milestone nodes – gold */
.j-kind-milestone .j-bubble{border-radius:16px;width:68px;height:68px}
.j-kind-milestone.j-available .j-bubble,.j-kind-milestone.j-pulse .j-bubble{
  background:linear-gradient(145deg,#f7d44a,#f0a830);
  box-shadow:0 8px 24px rgba(245,198,66,.55);
  color:#7a4c08;
}
.j-kind-milestone.j-available .j-label{color:rgba(255,255,255,.9)}
.j-kind-milestone.j-done .j-bubble{background:linear-gradient(145deg,#f5c642,#d48a20);color:#7a4c08}
.j-kind-milestone.j-done .j-label{color:rgba(255,255,255,.85)}

/* Stub nodes – soft purple "coming soon" */
.j-kind-stub .j-bubble{background:rgba(176,107,234,.15);border-color:rgba(176,107,234,.55);color:rgba(200,150,255,.85);cursor:default;box-shadow:none}
.j-kind-stub .j-label{color:rgba(200,150,255,.65)}
.j-kind-stub .j-sub{color:rgba(200,150,255,.4)}
.j-kind-stub.j-locked .j-bubble{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.4)}
/* Exam node */
.j-kind-exam.j-locked .j-bubble{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.22)}
.j-pulse.j-kind-locked_always .j-bubble{animation:j-pulse 2.2s ease-in-out infinite;opacity:.7}

/* Number intro card */
.num-intro-dig{font-size:72px;font-weight:900;color:var(--turquoise-deep);line-height:1;margin-bottom:-4px}
.num-intro-far{font-size:38px;font-weight:700;color:#9b8d7e;margin-bottom:4px}
/* Number option buttons */
.opt .num-opt-dig{display:block;font-size:32px;font-weight:900;color:var(--turquoise-deep);line-height:1.1}
.opt .num-opt-fa{display:block;font-size:18px;font-weight:700;color:#3a3228;line-height:1.2}
.opt .num-opt-en{display:block;font-size:12px;color:#9b8d7e;margin-top:1px}

/* Done checkmark badge */
.j-done .j-bubble::after{
  content:'✓';
  position:absolute;bottom:-4px;right:-4px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;color:var(--leaf);
  font-size:11px;font-weight:900;line-height:20px;
  border:2px solid #fff;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
/* Empty star on lesson nodes — always visible */
.j-star-node .j-bubble::before{
  content:'☆';
  position:absolute;top:-5px;left:-5px;
  font-size:20px;line-height:1;
  color:rgba(210,180,100,.55);
}
/* Filled shining star when all exercises perfect */
.j-star-node.j-star .j-bubble::before{
  content:'⭐';
  color:inherit;
  animation:star-shine 2.2s ease-in-out infinite;
}
@keyframes star-shine{
  0%,100%{filter:drop-shadow(0 0 2px rgba(255,200,0,.4))}
  50%{filter:drop-shadow(0 0 7px rgba(255,200,0,.9)) brightness(1.2)}
}
/* Finish screen star arc */
.fin-hearts{text-align:center;margin:4px 0}
.fin-stars-arc{display:flex;justify-content:center;align-items:flex-end;gap:6px;height:62px;margin:8px 0 2px}
.fin-star{font-size:38px;line-height:1;opacity:0;display:inline-block;animation:star-pop .45s cubic-bezier(.34,1.56,.64,1) forwards}
.fin-star-1{margin-bottom:6px;animation-delay:.1s}
.fin-star-2{margin-bottom:20px;animation-delay:.28s}
.fin-star-3{margin-bottom:6px;animation-delay:.46s}
.fin-star-dim{filter:grayscale(1);opacity:0;animation-delay:.1s,.28s,.46s}
@keyframes star-pop{0%{opacity:0;transform:scale(0) rotate(-25deg)}70%{opacity:1;transform:scale(1.35) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.fin-stars-label{font-size:13px;color:#9b8d7e;text-align:center;margin-bottom:4px}
/* Lessons list star rating */
.sub-item-stars{display:inline-flex;gap:0}
.sub-item-stars .lesson-star{width:16px;font-size:13px}

/* ===== Hangman screen ===== */
.hangman-header{display:flex;align-items:center;gap:12px;padding:16px 20px 10px}
.hangman-header h2{font-size:20px;font-weight:700;flex:1}
.hangman-inner{flex:1;padding:0 20px 0;display:flex;flex-direction:column;align-items:center}
/* Setup screen */
#hangmanSetup{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:24px;width:100%}
.hm-lesson-list{display:flex;flex-direction:column;gap:8px;width:100%;max-height:46vh;overflow-y:auto;padding:2px}
.hm-lesson-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:13px 16px;border-radius:14px;border:2px solid var(--turquoise);background:rgba(31,158,149,.06);color:var(--turquoise-deep);font-size:15px;font-weight:700;cursor:pointer;transition:background .12s,border-color .12s}
.hm-lesson-btn.selected{background:var(--turquoise);color:#fff;border-color:var(--turquoise-deep)}
.hm-lesson-btn.locked{border-color:#d0c8bc;background:#f0ebe4;color:#b8aa98;cursor:default}
.hm-lesson-count{font-size:13px;font-weight:600;opacity:.85}
/* Ultimate: all learned words + Word-It dictionary — gold accent */
.hm-lesson-ultimate{border-color:var(--saffron);color:#b57d10;background:linear-gradient(100deg,rgba(240,168,48,.12),rgba(240,168,48,.04))}
.hm-lesson-ultimate.selected{background:linear-gradient(100deg,var(--saffron),#e0910f);color:#fff;border-color:#b57d10}
.hm-lesson-ultimate.locked{border-color:#d0c8bc;background:#f0ebe4;color:#b8aa98}
#hangmanStartBtn{width:100%;padding:16px;border-radius:16px;background:linear-gradient(135deg,var(--turquoise),var(--turquoise-deep));color:#fff;font-size:17px;font-weight:700;box-shadow:0 6px 20px rgba(31,158,149,.35)}
/* Win: the figure hops off the rope, lands on the ground, then dances */
#hmFigure{transform-box:view-box}
@keyframes hm-jump{
  0%{transform:translateY(0)}
  35%{transform:translateY(-16px)}   /* hop up off the rope */
  100%{transform:translateY(30px)}   /* land: feet on the ground line */
}
#hmFigure.hm-jumping{animation:hm-jump .6s cubic-bezier(.4,0,.5,1) forwards;transform-origin:130px 150px}
/* Whole-body groove — pivots at the feet, staying on the ground */
@keyframes hm-groove{
  0%,100%{transform:translateY(30px) rotate(-3deg)}
  25%{transform:translateY(24px) rotate(3deg)}
  50%{transform:translateY(30px) rotate(-2deg)}
  75%{transform:translateY(24px) rotate(2deg)}
}
#hmFigure.hm-dance{animation:hm-groove .5s ease-in-out infinite;transform-origin:130px 180px}
/* Arms and legs swing around their joints while dancing */
@keyframes hm-arm-l{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(22deg)}}
@keyframes hm-arm-r{0%,100%{transform:rotate(40deg)}50%{transform:rotate(-22deg)}}
@keyframes hm-leg-l{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes hm-leg-r{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}}
#hmFigure.hm-dance #hm-larm{animation:hm-arm-l .5s ease-in-out infinite;transform-origin:130px 82px}
#hmFigure.hm-dance #hm-rarm{animation:hm-arm-r .5s ease-in-out infinite;transform-origin:130px 82px}
#hmFigure.hm-dance #hm-lleg{animation:hm-leg-l .5s ease-in-out infinite;transform-origin:130px 118px}
#hmFigure.hm-dance #hm-rleg{animation:hm-leg-r .5s ease-in-out infinite;transform-origin:130px 118px}
#hmFigure.hm-dance #hm-larm,#hmFigure.hm-dance #hm-rarm,
#hmFigure.hm-dance #hm-lleg,#hmFigure.hm-dance #hm-rleg{transform-box:view-box}
/* Loss: the figure swings slowly from the rope */
@keyframes hm-hanged{
  0%,100%{transform:rotate(-9deg)}
  50%{transform:rotate(9deg)}
}
#hmFigure.hm-hanged{animation:hm-hanged 1.7s ease-in-out infinite;transform-origin:130px 38px}
/* Tip button — hides the English word until the player asks for it */
.hm-tip{background:none;border:1.5px dashed var(--turquoise);color:var(--turquoise-deep);font-family:"Vazirmatn";font-weight:700;font-size:14px;padding:5px 14px;border-radius:20px;cursor:pointer}
/* Game screen */
#hangmanGame{display:none;flex-direction:column;align-items:center;gap:14px;width:100%}
#hangmanGame.active{display:flex}
.hangman-svg{width:180px;height:190px}
.hangman-svg .gallows{stroke:var(--ink);stroke-width:4;stroke-linecap:round;fill:none}
.hangman-svg .hm-part{stroke:var(--terracotta);stroke-width:4;stroke-linecap:round;fill:none;display:none}
.hangman-svg .hm-part.visible{display:block}
.hm-head-circle{fill:none;stroke:var(--terracotta);stroke-width:4;display:none}
.hm-head-circle.visible{display:block}
.hm-word{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;direction:rtl;padding:4px 0}
.hm-letter{width:36px;height:42px;border-bottom:3px solid var(--ink);display:flex;align-items:flex-end;justify-content:center;font-family:"Vazirmatn";font-size:24px;font-weight:700;color:var(--turquoise-deep);padding-bottom:2px}
.hm-hint{font-size:13px;color:#9b8d7e;font-family:"Vazirmatn";margin-top:-6px;text-align:center}
.hm-wrong{font-size:13px;color:var(--terracotta);font-weight:600;margin-top:-4px}
.hm-keyboard{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;direction:rtl;max-width:320px;padding:4px 0}
.hm-key{width:38px;height:42px;border-radius:10px;background:rgba(255,255,255,.85);border:2px solid #d0c8bc;font-family:"Vazirmatn";font-size:18px;font-weight:700;color:var(--ink);cursor:pointer;transition:background .1s,opacity .1s;display:flex;align-items:center;justify-content:center}
.hm-key:active{background:rgba(31,158,149,.15)}
.hm-key.hm-hit{background:rgba(92,154,111,.15);border-color:var(--leaf);color:var(--leaf);cursor:default}
.hm-key.hm-miss{background:rgba(217,110,74,.1);border-color:var(--terracotta);color:var(--terracotta);cursor:default;opacity:.6}
#hmResult{display:none;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:10px 0}
#hmResult.active{display:flex}
#hmResult h3{font-size:22px;font-weight:700}
#hmResult p{font-family:"Vazirmatn";font-size:18px}
#hmNextBtn{padding:14px 40px;border-radius:14px;background:linear-gradient(135deg,var(--turquoise),var(--turquoise-deep));color:#fff;font-size:16px;font-weight:700;box-shadow:0 4px 14px rgba(31,158,149,.3);margin-top:4px}

/* ===== Bottom navigation bar ===== */
.bottom-nav{
  /* Centre WITHOUT a transform: a position:fixed element that also has a
     transform is composited into its own layer, which iOS Safari duplicates and
     offsets upward on repaint — the ghosted bar in FARABAAN-7. left/right:0 +
     margin auto centres the max-width bar with no transform. */
  position:fixed;bottom:0;left:0;right:0;margin:0 auto;
  width:100%;max-width:480px;height:64px;
  display:flex;justify-content:space-around;align-items:center;
  background:#fbf4e4;
  /* FARABAAN-7: no transform and no blurred box-shadow on this fixed bar — both
     make iOS Safari composite it into a layer it then duplicates/trails. The
     translateZ(0) attempt (v0.28.4) made the ghost constant, so it's reverted. */
  border-top:1.5px solid rgba(31,158,149,.18);
  padding:0 8px env(safe-area-inset-bottom,0px);
  z-index:500;
}
.bottom-nav.hidden,.game-screen.active~.bottom-nav,#welcome.active~.bottom-nav{display:none}
.game-screen.active~#pet-companion{display:none!important}
.nav-btn{
  /* No default background — the faint tinted rounded-rects read as "ghost" tabs
     behind the icons; only the ACTIVE tab gets a background (FARABAAN-19). */
  flex:1;height:52px;border-radius:14px;border:none;
  background:transparent;font-size:27px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .12s,transform .1s,box-shadow .12s;
  -webkit-user-select:none;user-select:none;
  position:relative;
}
.nav-btn:hover{background:rgba(31,158,149,.16)}
.nav-btn:active{transform:scale(.86);background:rgba(31,158,149,.26)!important}
.nav-btn.active{background:rgba(31,158,149,.2);box-shadow:inset 0 -3px 0 var(--turquoise)}
.nav-btn.test-on{background:rgba(240,168,48,.18);box-shadow:inset 0 -3px 0 var(--saffron)}
/* Journey button — DNA-teal tint + tiny DNA badge */
.nav-btn-journey{background:rgba(38,224,212,.1);border:1.5px solid rgba(38,224,212,.22)}
.nav-btn-journey:hover{background:rgba(38,224,212,.2)}
.nav-btn-journey.active{background:rgba(38,224,212,.25);box-shadow:inset 0 -3px 0 #26e0d4}
.nav-btn-journey::after{content:'🧬';font-size:11px;position:absolute;bottom:5px;right:6px;line-height:1;pointer-events:none}
/* Menu button — slightly bolder font for ☰ */
#navHome{font-size:22px;font-weight:700;color:var(--ink)}
/* Collection nav button — exact same gradient/shadow as .sticker-gold, circle shape */
.nav-fa-icon{
  font-family:'Vazirmatn',sans-serif;font-size:16px;font-weight:900;
  color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.4);
  background:linear-gradient(145deg,#b8860b,#ffd700,#fffacd,#ffd700,#b8860b);
  box-shadow:0 3px 12px rgba(255,215,0,.65);
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
/* Pets nav button — contains the animated Polly canvas */
.nav-btn-pets{overflow:hidden}
/* Disabled state: grey background tint; canvas handles its own greyscale */
.nav-btn-pets.pet-disabled{background:rgba(0,0,0,.1);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)}
.nav-tooltip{
  position:fixed;bottom:72px;
  background:var(--ink);color:#fff;
  font-family:"Vazirmatn",sans-serif;font-size:12px;font-weight:700;
  padding:6px 12px;border-radius:10px;
  pointer-events:none;z-index:501;white-space:nowrap;
  transform:translateX(-50%);display:none;
}
.top-profile-name{
  font-family:"Vazirmatn",sans-serif;font-size:15px;font-weight:700;
  color:var(--turquoise-deep);max-width:90px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Bottom clearance so content isn't hidden under the nav bar */
.screen:not(.game-screen){padding-bottom:72px}
.game-screen{padding-bottom:0}

/* ── Alphabet Table ──────────────────────────────────────────────────────────── */
#alphabet-table{padding:0;overflow:hidden}
#alphabet-table .lesson-head{padding:14px 20px 12px}
#alphaTableGrid{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;
  background:var(--cream);
  padding:0 0 80px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#alphaTableGrid::-webkit-scrollbar{display:none}
/* One row per letter: [ph LEFT] [forms CENTER] [name RIGHT] — fixed LTR layout */
.at-row{
  display:flex;flex-direction:row;align-items:center;
  padding:6px 12px;
  border-bottom:1px dotted #e0cdb8;
  cursor:pointer;min-height:52px;
  transition:background .1s;
}
.at-row:active{background:rgba(0,0,0,.05)}
.at-ph{
  flex:1;
  font-family:'Vazirmatn',sans-serif;font-size:12px;font-weight:600;
  color:#1a7a74;letter-spacing:.02em;text-align:left;
}
.at-forms{
  flex:1;display:flex;align-items:center;justify-content:flex-start;
  gap:6px;direction:rtl;
}
.at-glyph{
  font-family:'Vazirmatn',sans-serif;font-size:24px;font-weight:700;
  color:#d43070;
}
.at-name{
  width:48px;flex-shrink:0;
  font-family:'Vazirmatn',sans-serif;font-size:13px;font-weight:700;
  color:var(--turquoise-deep);text-align:center;direction:rtl;
  white-space:nowrap;
}
/* ══════════════════════════════════════════════════════════════════════════
   STANDALONE (installed PWA) app-shell — placed LAST so these overrides win the
   source-order cascade over the base .app/.screen/.bottom-nav rules above.
   Model: fixed header + a single scrolling active screen + a STATIC footer nav
   (nav is NOT position:fixed, so iOS Safari can't ghost-trail it — FARABAAN-7/19).
   ══════════════════════════════════════════════════════════════════════════ */
@media (display-mode:standalone){
  html,body{height:100vh;height:100dvh;overflow:hidden}
  body{padding:0}
  .app{height:100vh;height:100dvh;min-height:0;overflow:hidden;
       padding-top:env(safe-area-inset-top);padding-bottom:0}
  .app>.tileband,.app>.topbar{flex:none}
  .screen.active{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .screen:not(.game-screen){padding-bottom:20px}
  .bottom-nav{position:static;margin:0;max-width:none;width:100%;flex:none}
  /* Victory screen must FIT with no scrollbar ever (FARABAAN-19) */
  #finish.active{overflow:hidden}
}
/* The victory screen never scrolls (fits or clips, never a scrollbar), and the
   floating pet is hidden here so it can't overlap the pills/Continue (FARABAAN-19) */
.finish{overflow:hidden}
#finish.active ~ #pet-companion{display:none!important}