:root{--sand:#FAF3E0;--sand2:#F1E4C3;--saffron:#E9A23B;--teal:#1F5F5B;--ink:#3B2A1E;--muted:#7a6552;--card:#FFFBF1;--line:#e6d6b0}
.night{--sand:#0f2624;--sand2:#143331;--card:#173b38;--ink:#F5EBD3;--muted:#b9c9bf;--line:#2a5550;--teal:#7fd1c4}
body{margin:0}
.app{min-height:100vh;color:var(--ink);font-family:'IBM Plex Sans',sans-serif;
 background:radial-gradient(circle at 20% 0%,rgba(233,162,59,.18),transparent 40%),
 repeating-linear-gradient(135deg,transparent 0 22px,rgba(0,0,0,.018) 22px 23px),var(--sand);transition:background .3s}
.serif{font-family:'Fraunces',serif}
.fa{font-family:'Vazirmatn',sans-serif;line-height:1.9;direction:rtl;text-align:right}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 20px -12px rgba(59,42,30,.35)}
.muted{color:var(--muted)}
.chip{border:1px solid var(--line);background:var(--sand2);border-radius:999px;padding:3px 11px;font-size:13px;cursor:pointer}
.chip:hover{border-color:var(--saffron)}
.btn{border-radius:12px;padding:10px 16px;font-weight:600;border:1px solid var(--line);background:var(--card);cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:var(--teal);color:var(--sand);border-color:var(--teal)}
.btn-done{background:var(--saffron);color:#3B2A1E;border-color:var(--saffron)}
.tile{aspect-ratio:1;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--line);background:var(--card);position:relative;transition:transform .2s}
.tile:hover{transform:translateY(-3px) rotate(-1deg)}
.tile.done{background:var(--teal);color:var(--sand)}
.tile.current{border:2px solid var(--saffron);animation:pulse 1.8s infinite}
.tile.locked{opacity:.5}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(233,162,59,.6)}50%{box-shadow:0 0 0 10px rgba(233,162,59,0)}}
.bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden}
.bar>div{height:100%;background:var(--saffron);transition:width .6s}
.hl{background:rgba(233,162,59,.3);border-bottom:2px solid var(--saffron);padding:0 4px;border-radius:4px;cursor:pointer;font-family:'Fraunces',serif;font-size:.9em;direction:ltr;unicode-bidi:isolate}
.parchment{background:linear-gradient(180deg,#f7e9c4,#efdba9);color:#3B2A1E;border-radius:6px 22px 6px 22px;box-shadow:inset 0 0 40px rgba(120,80,20,.25)}
.parchment .muted{color:#6d5638}
.speak{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:var(--sand2);flex-shrink:0}
.speak:hover{background:var(--saffron)}
.fadeup{animation:fu .5s both}
@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.confetti{position:fixed;top:-10px;width:9px;height:14px;z-index:60;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.camel{position:fixed;bottom:20px;left:-220px;z-index:61;animation:walk 4s linear forwards;font-size:60px;display:flex;align-items:flex-end;gap:6px}
.camel span.b{font-size:14px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:6px 10px;margin-bottom:50px;white-space:nowrap;font-family:'Vazirmatn'}
@keyframes walk{to{left:110vw}}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:70}