:root{--sand: #fbf1d6;--ink: #2d2a26;--green: #2f9e5b;--green-d: #1f7a43;--gold: #f2b01e;--red: #d9534f;--blue: #2a7bb8;--card: #ffffff;--shadow: 0 6px 18px rgba(80, 55, 10, .18)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;color:var(--ink);background:linear-gradient(180deg,#ffe9b8,var(--sand) 40%,#f4d79a);font-family:Amiri,Noto Naskh Arabic,Geeza Pro,serif;font-size:20px;line-height:1.7}button{font-family:inherit;font-size:inherit;cursor:pointer}[title]{cursor:help}button[title]{cursor:pointer}.screen{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 16px;text-align:center}.screen h1{font-size:clamp(2.2rem,7vw,3.6rem);margin:0;color:var(--green-d);text-shadow:0 2px 0 #fff}.sub{font-size:1.3rem;margin:0}.verse{font-size:1.7rem;color:var(--blue);margin:6px 0}.route-preview{font-size:2rem;letter-spacing:14px}.tip{opacity:.75;font-size:.95rem;max-width:32ch}.best{margin:0;font-size:1rem}.btn{background:var(--green);color:#fff;border:0;border-radius:14px;padding:8px 22px;box-shadow:0 4px 0 var(--green-d);transition:transform .08s}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green-d)}.btn.big{font-size:1.6rem;padding:12px 34px;margin:10px 0}.btn small{display:block;font:500 .7rem system-ui,sans-serif;opacity:.85;line-height:1.1}.badge{font-size:5rem;animation:pop .6s ease-out}.stars{font-size:2.6rem;letter-spacing:6px;color:#ccc}.stars .on{color:var(--gold);animation:pop .5s ease-out}.big-xp{font-size:2.4rem;font-weight:700;margin:0;color:var(--green-d)}@keyframes pop{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.game{min-height:100%;display:flex;flex-direction:column}.bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--green-d);color:#fff;box-shadow:var(--shadow)}.bar .title{font-size:1.4rem;font-weight:700}.stats{display:flex;gap:8px;align-items:center}.chip{background:#ffffff2e;border-radius:999px;padding:0 12px;font-size:1rem;font-family:system-ui,sans-serif}.icon{background:none;border:0;font-size:1.3rem;color:#fff}.layout{flex:1;display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:20px;padding:16px;max-width:1100px;width:100%;margin:0 auto}@media (max-width: 760px){.layout{grid-template-columns:1fr}.map{max-width:340px;margin:0 auto}}.layout{align-items:start}.map{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:3px solid #fff;background:#f3dca4}.map svg{display:block;width:100%;height:auto;aspect-ratio:2 / 3}.route{fill:none;stroke:#b0793a;stroke-width:5;stroke-dasharray:2 10;stroke-linecap:round}.route.done{stroke:var(--green);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(47,158,91,.6))}.sea-label{font-size:16px;fill:#1d5f8d;text-anchor:middle}.stop circle{fill:#fff;stroke:#b0793a;stroke-width:3}.stop.reached circle{stroke:var(--green);fill:#eaffee}.stop-icon{font-size:18px;text-anchor:middle}.stop-name{text-anchor:end;font-size:17px;fill:var(--ink);paint-order:stroke;stroke:#fff6;stroke-width:4px}.traveler{transition:none}.traveler-icon{font-size:30px}.traveler.moving .traveler-icon{animation:bob .35s ease-in-out infinite alternate}@keyframes bob{0%{transform:translateY(0)}to{transform:translateY(-5px)}}.panel{display:flex;flex-direction:column;gap:14px;justify-content:center}.story{background:#fff8e2;border:2px dashed var(--gold);border-radius:14px;padding:10px 16px;animation:slide .4s ease-out}.story p{margin:4px 0 0}@keyframes slide{0%{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}.card{background:var(--card);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);transition:opacity .3s}.card.dim{opacity:.45;pointer-events:none}.q{font-size:1.5rem;margin:0 0 12px;line-height:1.6}.opts{list-style:none;margin:0;padding:0;display:grid;gap:10px}.opt{width:100%;text-align:right;font-size:1.3rem;padding:10px 16px;border-radius:12px;border:2px solid #e0d2ad;background:#fffdf5;transition:transform .1s,background .15s}.opt:hover:not(:disabled){background:#fff1c2;transform:translate(-4px)}.opt.wrong{background:#fde3e1;border-color:var(--red);animation:shake .35s;opacity:.7}.opt.right{background:#d9f7e3;border-color:var(--green);animation:pop .4s}@keyframes shake{25%{transform:translate(8px)}75%{transform:translate(-8px)}}.feedback{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 0;font-size:1.3rem}.feedback.bad{color:var(--red)}.feedback.good{color:var(--green-d)}.gain{font:700 1.1rem system-ui,sans-serif;background:#fff3c4;border-radius:999px;padding:0 12px;color:#8a5a00;animation:pop .4s}.feedback .btn{margin-inline-start:auto}.link{background:none;border:0;font-size:1.4rem}.hint{font:400 .95rem/1.4 system-ui,sans-serif;direction:ltr;text-align:left;background:#eef6ff;border-radius:10px;padding:8px 12px;margin:8px 0 0;color:#23415a}.opt:disabled{color:var(--ink)}.opt.wrong:disabled{color:#8a4a47}.page{min-height:100%;display:flex;flex-direction:column}.hub h1{margin-bottom:4px}.hubstats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.chip.dark{background:#fff;color:var(--ink);box-shadow:var(--shadow);padding:2px 14px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;width:min(720px,100%);margin:10px 0}.grid.small{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.gcard{background:#fff;border:0;border-radius:18px;padding:16px 10px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .12s;font-size:1.15rem;color:var(--ink)}.gcard:hover{transform:translateY(-3px)}.gcard.off{opacity:.5;box-shadow:none;background:#ffffff90;cursor:default;font-size:1rem;padding:10px}.gcard.off:hover{transform:none}.gi{font-size:2.2rem}.soon{width:min(720px,100%)}.soon summary{cursor:pointer;opacity:.8}.seg{display:inline-flex;border-radius:999px;overflow:hidden;border:2px solid var(--green-d);background:#fff}.seg button{border:0;background:#fff;padding:2px 14px;font:600 .85rem system-ui,sans-serif;color:var(--green-d)}.seg button.on{background:var(--green-d);color:#fff}.bar .seg{border-color:#fff}.vwrap{flex:1;display:flex;justify-content:center;padding:16px}.vq{width:min(560px,100%);display:flex;flex-direction:column;gap:10px;align-self:flex-start}.mode{margin:0;color:var(--blue);font-size:1.1rem}.prompt{text-align:center;font-size:2.4rem;padding:6px 0}.prompt.en{font:600 1.7rem/1.3 system-ui,sans-serif}.opt.ltr{direction:ltr;text-align:left;font:500 1.05rem system-ui,sans-serif}.icon.dark{color:var(--ink)}.answer{min-height:62px;border:3px dashed #c9b47a;border-radius:14px;background:#fffdf5;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;font-size:2rem}.answer .ph{opacity:.4}.chip-l{font-size:2rem;background:#ffeaa8;border:0;border-radius:10px;padding:0 12px;line-height:1.4;color:var(--ink)}.tiles,.kbd-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.tile,.key{min-width:52px;height:52px;font-size:1.7rem;background:#fff;border:2px solid #e0d2ad;border-radius:12px;box-shadow:0 3px #e0d2ad;color:var(--ink)}.tile:active,.key:active{transform:translateY(2px);box-shadow:0 1px #e0d2ad}.tile:disabled{opacity:.25}.key{min-width:40px;height:46px;font-size:1.4rem}.key.wide{min-width:80px;font:700 1.2rem system-ui,sans-serif}.kbd{display:flex;flex-direction:column;gap:6px}.typeEn{display:flex;gap:10px}.typeEn input{flex:1;font:600 1.3rem system-ui,sans-serif;padding:8px 12px;border:2px solid #e0d2ad;border-radius:12px;direction:ltr}.result{background:#f4fbf6;border-radius:14px;padding:10px 14px;text-align:center}.ra{font-size:2rem}.re{font:600 1.2rem system-ui,sans-serif}.re.big{font-size:1.6rem;text-align:center;margin:4px 0}.ex{margin-top:8px}.exa{font-size:1.3rem}.exe{font:.95rem system-ui,sans-serif;opacity:.8;direction:ltr}.exe.faint{opacity:.4}.vq.shake{animation:shake .35s}.intro{text-align:center}.intro .btn,.card .btn{align-self:center}.missed{max-width:460px}.miss{display:inline-block;margin:4px;padding:2px 12px;background:#fff;border-radius:10px;font-size:1.4rem;box-shadow:var(--shadow)}.newbadge{font-size:1.4rem;background:#fff3c4;border-radius:999px;padding:4px 18px;animation:pop .5s}.wlist{list-style:none;margin:0 auto;padding:12px;width:min(640px,100%);display:grid;gap:8px}.witem{display:grid;grid-template-columns:auto 1fr 1.2fr auto auto;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:6px 12px;box-shadow:var(--shadow)}.wa{font-size:1.5rem}.we{font:600 1rem system-ui,sans-serif;direction:ltr;text-align:left;cursor:pointer;min-height:1.4em}.wp{font:.75rem system-ui,sans-serif;opacity:.55}.dots{display:inline-flex;gap:3px;direction:ltr}.dots i{width:9px;height:9px;border-radius:50%;background:#ddd}.dots i.on{background:var(--green)}.gain,.chip{direction:ltr;unicode-bidi:isolate}.grid{width:min(800px,100%);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.gs{font:500 .8rem system-ui,sans-serif;color:#6b5b3a;direction:ltr;text-align:center}.soon{width:min(800px,100%);font:500 .95rem system-ui,sans-serif}.modes{display:flex;flex-wrap:wrap;gap:6px}.modes button{font:600 .85rem system-ui,sans-serif;border:2px solid #d9c892;background:#fffdf5;color:var(--ink);border-radius:999px;padding:2px 12px}.modes button.on{background:var(--green-d);border-color:var(--green-d);color:#fff}.modes button:disabled{opacity:.6}.builder{display:flex;flex-direction:column;gap:12px}.slot{font-size:1.4rem;background:#ffeaa8;border:2px solid #f0cf6a;border-radius:10px;padding:0 12px;color:var(--ink)}.slot.ok{background:#d9f7e3;border-color:var(--green)}.slot.bad{background:#fde3e1;border-color:var(--red)}.answer{font-size:1.4rem}.tile.phrase{height:auto;min-height:48px;padding:4px 14px;font-size:1.3rem}.row{display:flex;gap:10px;justify-content:center}.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 4px #e0d2ad;border:2px solid #e0d2ad}.en{font:.8rem system-ui,sans-serif;opacity:.75;direction:ltr;display:inline-block}.big-prompt{font-size:1.5rem;text-align:center;margin:4px 0}.big-prompt.enl{font:600 1.35rem/1.4 system-ui,sans-serif;direction:ltr}.sub-q{font:.9rem system-ui,sans-serif;opacity:.75;text-align:center;direction:ltr;margin:0}.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.bucket{min-height:150px;border:3px dashed #c9b47a;border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:6px;background:#fffdf5}.bucket h3{margin:0;text-align:center;font-size:1.2rem}.bucket.ready{background:#fff1c2}.card-s{background:#fff;border:2px solid #e0d2ad;border-radius:10px;padding:4px 10px;font-size:1.1rem;text-align:center}.card-s.ok{border-color:var(--green);background:#d9f7e3}.card-s.bad{border-color:var(--red);background:#fde3e1}.pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.mapbox{position:relative;width:100%;max-width:380px;margin:0 auto;border-radius:14px;overflow:hidden;border:3px solid #fff;box-shadow:var(--shadow)}.mapbox img{display:block;width:100%}.hot{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent}.hot.dbg{background:#ff000040}.hot.found{background:#2f9e5b59;outline:3px solid var(--green);border-radius:10px}.hot.miss{background:#d9534f59}.ladder{display:flex;flex-direction:column-reverse;gap:2px;font:600 .75rem system-ui,sans-serif;min-width:70px}.ladder span{padding:1px 8px;border-radius:6px;background:#ffffff90;text-align:center}.ladder span.on{background:var(--gold)}.ladder span.past{background:#d9f7e3}.life{font:600 .9rem system-ui,sans-serif}.lifelines{display:flex;gap:8px;justify-content:center}.lifelines button{border:2px solid #d9c892;background:#fffdf5;border-radius:999px;padding:2px 12px;font:600 .85rem system-ui,sans-serif}.lifelines button:disabled{opacity:.35}.cloze{font-size:1.6rem;text-align:center}.cloze b{background:#ffeaa8;border-radius:8px;padding:0 10px}.checks{list-style:none;padding:0;margin:0;display:grid;gap:8px}.checks button{width:100%;text-align:right;font-size:1.2rem;padding:8px 14px;border-radius:12px;border:2px solid #e0d2ad;background:#fffdf5;color:var(--ink)}.checks button.sel{background:#fff1c2;border-color:var(--gold)}.checks button.ok{background:#d9f7e3;border-color:var(--green)}.checks button.bad{background:#fde3e1;border-color:var(--red)}.pledgecard{background:linear-gradient(135deg,#fff8e2,#ffe9b8);border:3px solid var(--gold);border-radius:18px;padding:14px 20px;text-align:center;box-shadow:var(--shadow)}.pledgecard li{font-size:1.3rem;text-align:right;margin:6px 0}.arena{position:relative;width:min(560px,100%);height:420px;margin:0 auto;background:linear-gradient(#bfe6ff,#f6e4b3);border-radius:16px;overflow:hidden;touch-action:none;border:3px solid #fff;box-shadow:var(--shadow)}.falling{position:absolute;transform:translate(-50%);background:#fff;border-radius:12px;padding:2px 12px;font-size:1.5rem;box-shadow:0 2px 6px #0003;white-space:nowrap}.basket{position:absolute;bottom:6px;transform:translate(-50%);font-size:2.6rem}.target{text-align:center;font:700 1.5rem system-ui,sans-serif;margin:6px 0}.sec{margin:10px 0 0;font-size:1.3rem;width:min(800px,100%);text-align:right}.known{border-bottom:1px dotted #2a7bb8;cursor:help}.card-s.sel{background:#fff1c2;border-color:var(--gold)}.pledgecard .btn,.pledgecard .link{margin:6px}.drag-ghost{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%) scale(1.08);opacity:.92;box-shadow:0 8px 20px #0004;background:#fff;border-radius:12px;padding:4px 14px;font-size:1.3rem}.dragging{opacity:.3}.bucket,.answer{transition:background .15s}.loginbox{width:min(380px,100%);display:flex;flex-direction:column;gap:12px}.loginbox label{display:flex;flex-direction:column;gap:4px;font-size:1.1rem}.loginbox input,.tform input{font:500 1.1rem system-ui,sans-serif;padding:10px 12px;border:2px solid #e0d2ad;border-radius:12px;direction:ltr}.loginbox .btn{align-self:center}.userbar{position:absolute;top:10px;inset-inline-end:14px;display:flex;gap:8px;align-items:center}.btn.small{padding:2px 14px;font:600 .85rem system-ui,sans-serif}.hub{position:relative}.teacher{font-family:system-ui,sans-serif;font-size:1rem;direction:ltr}.tmain{display:grid;gap:16px;padding:16px;max-width:1000px;width:100%;margin:0 auto}.tmain h2{margin:0 0 8px;font-size:1.2rem}.tform{display:flex;gap:8px;flex-wrap:wrap}.tform input{flex:1;min-width:150px}.tmsg{margin:8px 0 0;font-weight:600;color:var(--green-d)}.ttable{width:100%;border-collapse:collapse}.ttable th,.ttable td{text-align:left;padding:6px 8px;border-bottom:1px solid #eee;vertical-align:top}.ttable tr.off{opacity:.5}.tact{display:flex;gap:6px;flex-wrap:wrap}.tact button{font:600 .8rem system-ui,sans-serif;border:2px solid #d9c892;background:#fffdf5;border-radius:8px;padding:2px 8px}.wgrid{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;direction:rtl}.wchip{font:1.1rem Amiri,serif;padding:0 10px;border-radius:8px;background:#eee}.wchip.l0{background:#e3f3e6}.wchip.l1{background:#c6e8cd}.wchip.l2{background:#9fd8ab}.wchip.l3{background:#6cc283}.wchip.l4{background:#36a95a;color:#fff}
