@font-face{font-family:Vazir;src:url(fonts/Vazirmatn.ttf);font-display:swap}
@font-face{font-family:Lalezar;src:url(fonts/Lalezar-Regular.ttf);font-display:swap}
:root{
  --cream:#fffaf1;--ink:#142557;--muted:#62708b;--blue:#166fe7;--blue-d:#0d4fb0;--green:#22a83a;--green-d:#15782a;
  --yellow:#ffc928;--yellow-d:#d99b00;--red:#e8352b;--purple:#7b3fe4;--line:#e9e4da;--card:#fff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#efe6d6;color:var(--ink);font-family:Vazir,system-ui,sans-serif}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
h1,h2,h3,p{margin:0}
.disp{font-family:Lalezar,Vazir,sans-serif;font-weight:400}

/* phone frame: full-bleed on phones, centered card on desktop */
#app{position:relative;width:100%;max-width:440px;height:100dvh;margin:0 auto;background:var(--cream);overflow:hidden;box-shadow:0 0 60px #3a2a0e22}
@media(min-width:520px){#app{height:min(900px,96dvh);margin-top:2dvh;border-radius:34px}}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:16px 16px 18px;overflow-y:auto;overflow-x:hidden;animation:in .28s ease both}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.bob{animation:bob 2.4s ease-in-out infinite}
.sky{background:linear-gradient(#bfe3ff 0%,#e9f5ff 45%,var(--cream) 100%)}
.hills::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-40px;height:190px;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 25% 100%,#4cbb3f 0 60%,transparent 61%),radial-gradient(ellipse 55% 90% at 80% 100%,#39a833 0 60%,transparent 61%);z-index:0}
.screen>*{position:relative;z-index:1}

/* clay buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;border-radius:999px;color:#fff;
  font-family:Lalezar,Vazir;font-size:22px;line-height:1.2;transition:transform .08s,box-shadow .08s;
  box-shadow:inset 0 3px 0 #ffffff66,inset 0 -4px 0 #00000022,0 6px 0 var(--sh,#0003),0 10px 16px #0002}
.btn:active{transform:translateY(4px);box-shadow:inset 0 3px 0 #ffffff66,inset 0 -4px 0 #00000022,0 2px 0 var(--sh,#0003)}
.btn.blue{background:var(--blue);--sh:var(--blue-d)}.btn.green{background:var(--green);--sh:var(--green-d)}
.btn.yellow{background:var(--yellow);--sh:var(--yellow-d);color:var(--ink)}.btn.gray{background:#b9c0cf;--sh:#8b93a6}
.btn.ghost{background:#fff;color:var(--ink);--sh:#d8d2c6;font-size:18px}.btn.red{background:var(--red);--sh:#a5231b}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.sm{width:auto;padding:10px 22px;font-size:18px}
.round{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 3px 0 #0001,0 6px 12px #0001;display:grid;place-items:center;font-size:22px;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;background:#ffffffe6;border-radius:999px;padding:6px 14px;font-weight:800;box-shadow:0 3px 8px #0001}
.card{background:var(--card);border-radius:22px;box-shadow:0 4px 0 #0000000a,0 8px 20px #35271014;padding:14px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px}
.title{font-family:Lalezar,Vazir;font-size:30px;line-height:1.3;text-align:center;color:var(--ink)}
.sub{color:var(--muted);line-height:1.8;text-align:center}
.grow{flex:1}.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.mascot{width:min(250px,62%);height:auto}
.bubble{background:#fff;border-radius:26px;padding:14px 20px;font-weight:800;font-size:20px;line-height:1.7;box-shadow:0 6px 16px #0001;text-align:center}
.dots{display:flex;gap:10px;justify-content:center;margin-top:14px}
.dots i{width:12px;height:12px;border-radius:50%;background:#d8dbe3}.dots i.on{background:var(--blue)}

/* inputs */
input.field{width:100%;padding:14px 16px;border-radius:18px;border:2px solid var(--line);background:#fff;font:inherit;font-size:20px;font-weight:800;text-align:center;color:var(--ink);outline:none}
input.field:focus{border-color:var(--blue)}
.lbl{color:var(--muted);font-size:14px;font-weight:700;margin:0 4px 6px;display:block}

/* onboarding outfit */
.outfit{display:flex;gap:10px}.outfit button{flex:1;height:78px;border-radius:18px;background:#fff;font-size:40px;box-shadow:0 3px 8px #0001;border:3px solid transparent}
.outfit button.sel{border-color:var(--red)}
.kidbody{width:200px;border-radius:26px;box-shadow:0 8px 20px #0002}

/* map */
.map{padding:0;background:var(--bg);overflow:hidden}
.map.grass{--bg:linear-gradient(#a9dcff 0,#d7f0ff 16%,#79cf5c 30%,#5cbb47 100%)}
.map.desert{--bg:linear-gradient(#ffe6a8 0,#ffd88a 18%,#f2c476 40%,#e9b665 100%)}
.map-top{position:absolute;top:0;inset-inline:0;padding:14px 14px 0;display:flex;gap:8px;align-items:center;z-index:3}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid #fff}
.world-title{position:absolute;top:70px;inset-inline:0;text-align:center;z-index:3}
.world-title button{background:#fff;border-radius:34px;padding:8px 26px 10px;box-shadow:0 6px 16px #0002;display:inline-block}
.world-title small{display:block;color:var(--muted);font-weight:700}
.world-title b{font-family:Lalezar;font-size:28px;font-weight:400}
.world-title .prog{display:inline-block;margin-top:8px;background:#fff;border-radius:99px;padding:3px 14px;font-size:13px;font-weight:800;box-shadow:0 3px 8px #0001}
.path{position:absolute;inset:170px 0 104px;z-index:2}
.path svg{position:absolute;inset:0;width:100%;height:100%}
:root{--n:clamp(44px,8.5dvh,64px)}
.node{position:absolute;width:var(--n);height:var(--n);margin:calc(var(--n)/-2) 0 0 calc(var(--n)/-2);border-radius:50%;display:grid;place-items:center;font-family:Lalezar;font-size:calc(var(--n)*.47);color:#fff;
  background:radial-gradient(circle at 35% 30%,#59a6ff,#1665d8);box-shadow:inset 0 -5px 0 #0003,0 6px 0 #0a3f93,0 10px 14px #0003;transition:transform .1s}
.node:active{transform:scale(.93)}
.node.locked{background:radial-gradient(circle at 35% 30%,#b0b5c0,#7a808d);box-shadow:inset 0 -5px 0 #0003,0 6px 0 #565b66,0 10px 14px #0003}
.node.cur{animation:bob 1.6s ease-in-out infinite}
.node .stars{position:absolute;bottom:-14px;display:flex;font-size:15px;filter:drop-shadow(0 1px 0 #0005)}
.node .lock{position:absolute;right:-8px;bottom:-6px;font-size:18px}
.node .you{position:absolute;top:-38px;width:44px;height:44px}
.sign{position:absolute;z-index:2;background:#b9793b;color:#fff;padding:10px 12px;border-radius:12px;font-weight:800;font-size:13px;line-height:1.6;width:96px;text-align:center;box-shadow:0 5px 0 #7d4d20;transform:rotate(-6deg)}
.chest{position:absolute;font-size:46px;z-index:2;filter:drop-shadow(0 4px 0 #0003)}
.deco{position:absolute;font-size:44px;z-index:1;opacity:.95}
.dock{position:absolute;bottom:14px;inset-inline:14px;z-index:3;background:#fffffff0;border-radius:28px;padding:10px;display:flex;gap:10px;box-shadow:0 8px 24px #0003}
.dock button{flex:1;border-radius:20px;padding:10px 4px;color:#fff;font-family:Lalezar;font-size:18px;display:flex;flex-direction:column;align-items:center;gap:0;box-shadow:inset 0 -4px 0 #0003}
.dock .p{background:var(--purple)}.dock .b{background:var(--blue)}.dock .g{background:#eceef4;color:var(--ink);flex:.5;box-shadow:inset 0 -4px 0 #0001}
.dock button span{font-size:26px;line-height:1.1}

/* sheets / modals */
.scrim{position:fixed;inset:0;background:#0e1935a6;z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s both}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-width:440px;background:#fffaf1;border-radius:30px 30px 0 0;padding:20px 18px 24px;animation:up .28s cubic-bezier(.2,.9,.3,1) both;max-height:92dvh;overflow:auto}
.scrim.mid{align-items:center;padding:20px}.scrim.mid .sheet{border-radius:30px;width:100%;max-width:400px}
@keyframes up{from{transform:translateY(60px);opacity:0}}
.xbtn{position:absolute;top:14px;inset-inline-end:14px}
.sheet{position:relative}
.wrow{display:flex;align-items:center;gap:12px;padding:8px;border-radius:18px;background:#fff;margin-bottom:10px;box-shadow:0 3px 8px #0001;text-align:start;width:100%;border:2px solid transparent}
.wrow.sel{border-color:var(--green)}.wrow.off{opacity:.6}
.wthumb{width:84px;height:64px;border-radius:12px;flex:none}
.stars-big{display:flex;gap:6px;justify-content:center;font-size:44px}
.stars-big .off{filter:grayscale(1) opacity(.45)}

/* lesson intro/player */
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:99px;padding:8px 18px;font-weight:800;box-shadow:0 3px 8px #0001}
.bricks{display:flex;gap:6px;justify-content:center}
.brick{width:52px;height:52px;border-radius:12px;box-shadow:inset 0 -5px 0 #0003,inset 0 4px 0 #fff5,0 5px 8px #0002}
.player{background:#0f1b45;color:#fff}
.vwrap{border-radius:22px;overflow:hidden;background:#000;position:relative;aspect-ratio:4/3;box-shadow:0 8px 24px #0006}
.vwrap video{width:100%;height:100%;object-fit:cover;display:block}
.vwrap .playbig{position:absolute;inset:0;display:grid;place-items:center}
.playbig span{width:84px;height:84px;border-radius:50%;background:#4a90ffdd;border:5px solid #fff8;display:grid;place-items:center;font-size:34px}
.seek{width:100%;accent-color:#59a6ff}
.ctl{display:flex;justify-content:center;gap:26px;align-items:center;margin-top:12px}
.ctl button{width:60px;height:60px;border-radius:50%;background:#ffffff1f;font-size:22px;color:#fff}
.ctl button.big{width:76px;height:76px;background:#2b4a9a;font-size:30px}
.time{display:flex;justify-content:space-between;font-size:13px;opacity:.85;direction:ltr}

/* quiz */
.prog-chip{background:#fff;border-radius:22px;padding:8px 18px;text-align:center;font-weight:800;box-shadow:0 3px 8px #0001;font-size:14px}
.prog-chip .dots{margin-top:4px}
.qtop{display:flex;align-items:center;gap:10px;justify-content:space-between}
.eq{font-family:Lalezar;font-size:64px;text-align:center;direction:ltr;letter-spacing:2px;background:#fff;border-radius:28px;padding:18px 8px;box-shadow:0 6px 16px #0001}
.eq b{font-weight:400}.eq .a{color:var(--red)}.eq .p{color:var(--blue)}.eq .b{color:var(--yellow)}.eq .q{color:var(--purple)}
.opts{display:flex;gap:12px;justify-content:center;margin-top:16px}
.opt{flex:1;max-width:120px;aspect-ratio:1;border-radius:24px;color:#fff;font-family:Lalezar;font-size:50px;box-shadow:inset 0 4px 0 #fff5,inset 0 -6px 0 #0003,0 7px 0 var(--sh),0 12px 16px #0002;transition:transform .08s}
.opt:active{transform:translateY(4px)}
.opt.round-o{border-radius:50%}
.opt.wrong{animation:shake .35s;filter:grayscale(.6)}.opt.right{animation:pop .4s}
.opt.c0{background:var(--blue);--sh:var(--blue-d)}.opt.c1{background:var(--yellow);--sh:var(--yellow-d);color:#fff}.opt.c2{background:var(--green);--sh:var(--green-d)}
.cubes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:22px;background:#fff;border-radius:28px;box-shadow:0 6px 16px #0001;justify-items:center}
.cube{width:80px;height:80px;border-radius:16px;box-shadow:inset 0 -8px 0 #0003,inset 0 6px 0 #fff5,0 6px 10px #0003}
.feedback{text-align:center;font-weight:800;min-height:28px;color:var(--green)}.feedback.bad{color:var(--red)}
.box{border:6px solid #b98443;background:#d8a865;border-radius:18px;min-height:150px;padding:14px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-content:flex-end;position:relative;box-shadow:inset 0 10px 0 #0002}
.box .tag{position:absolute;top:8px;inset-inline-start:8px;background:#f3dfbb;border-radius:10px;padding:2px 10px;font-weight:800;font-size:14px}
.tray{background:#efe4d0;border-radius:20px;padding:12px;display:flex;gap:10px;justify-content:center;min-height:82px;box-shadow:inset 0 4px 0 #0001}
.tray .brick,.box .brick{cursor:pointer;width:56px;height:56px}

/* reward */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.confetti i{position:absolute;top:-20px;width:10px;height:22px;border-radius:5px;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110dvh) rotate(540deg)}}

/* trophies */
.trophy{background:linear-gradient(#cbb2f5,#e3d4fb 40%,#f0e8fd)}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:16px;border-bottom:12px solid #cf9b5b;margin-bottom:22px;border-radius:0 0 8px 8px}
.medal{display:flex;flex-direction:column;align-items:center;gap:6px}
.medal .disc{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:38px;background:radial-gradient(circle at 35% 30%,#ffd45e,#f0a316);box-shadow:inset 0 -5px 0 #0002,0 5px 0 #b57406,0 8px 12px #0003;border:5px solid #ffe08a}
.medal.locked .disc{background:radial-gradient(circle at 35% 30%,#e3e5ea,#b3b8c3);border-color:#d5d8df;box-shadow:inset 0 -5px 0 #0002,0 5px 0 #8b909b;filter:grayscale(1)}
.medal span{background:#fff8ea;border-radius:10px;padding:3px 8px;font-size:13px;font-weight:800;text-align:center}

/* shop */
.shop-hero{background:linear-gradient(#c9e7ff,#e7f4ff);border-radius:0 0 30px 30px;margin:-16px -16px 0;padding:16px 16px 10px;text-align:center}
.tabs{display:flex;gap:8px;margin:14px 0 10px}
.tabs button{flex:1;padding:10px 4px;border-radius:99px;background:#fff;font-weight:800;font-size:15px;color:var(--muted);box-shadow:0 3px 8px #0001}
.tabs button.on{background:var(--blue);color:#fff}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.item{background:#fff;border-radius:20px;padding:12px 4px 10px;text-align:center;box-shadow:0 3px 8px #0001;border:3px solid transparent;position:relative}
.item.sel{border-color:var(--blue)}
.item .ic{font-size:44px;height:56px;display:grid;place-items:center}
.item .sw{width:46px;height:46px;border-radius:50%;margin:5px auto;box-shadow:inset 0 -4px 0 #0003,0 3px 6px #0002}
.item small{display:block;font-weight:800;margin-top:4px}
.item .tick{position:absolute;top:-8px;inset-inline-start:-6px;background:var(--blue);color:#fff;border-radius:50%;width:24px;height:24px;font-size:14px;display:grid;place-items:center}
.preview{position:relative;height:200px;display:grid;place-items:center}
.preview .kid{width:130px;height:150px;border-radius:26px;object-fit:cover;object-position:top}
.preview .hatx{position:absolute;top:0;font-size:60px;filter:drop-shadow(0 3px 0 #0003)}

/* parent */
.parent{background:linear-gradient(#e8f3ff,#f5f8ff 40%,#fffaf1)}
.ptabs{display:flex;background:#fff;border-radius:22px;padding:4px;box-shadow:0 3px 8px #0001;margin:12px 0}
.ptabs button{flex:1;padding:10px 4px;border-radius:18px;font-weight:800;color:var(--muted);display:flex;flex-direction:column;align-items:center;font-size:14px}
.ptabs button.on{background:#dbeaff;color:var(--blue)}.ptabs span{font-size:20px}
.stat{display:flex;align-items:center;gap:10px}.stat .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:#eaf3ff}
.stat small{color:var(--muted);display:block;font-size:12px;font-weight:700}.stat b{font-size:19px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:10px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:10px;color:var(--muted)}
.bars i{display:block;width:100%;border-radius:8px 8px 4px 4px;background:linear-gradient(#4aa0ff,#166fe7);margin-bottom:4px}
.meter{height:10px;background:#e8edf5;border-radius:99px;overflow:hidden;flex:1}.meter i{display:block;height:100%;border-radius:99px}
.rowi{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line);width:100%;text-align:start}
.rowi:last-child{border:0}
.switch{width:52px;height:30px;border-radius:99px;background:#cfd6e4;position:relative;flex:none;transition:.2s}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0003;transition:.2s}
.switch.on{background:var(--green)}.switch.on::after{inset-inline-start:25px}
input[type=range]{width:100%;accent-color:var(--blue)}
.gate-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.gate-opts button{background:#fff;border-radius:16px;padding:14px;font-family:Lalezar;font-size:28px;box-shadow:0 4px 0 #0001,0 8px 14px #0001}
.shield{font-size:96px;filter:drop-shadow(0 8px 0 #0a3f9333)}
.note{background:#eaf3ff;border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:center;color:var(--ink);font-size:14px;line-height:1.7}
.warn{background:#fff4d8}
.catalog-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 20px;border-radius:99px;z-index:99;font-weight:800;animation:in .2s both}

.coin{display:inline-grid;place-items:center;width:1.2em;height:1.2em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe27a,#f2a900);color:#c27b00;font-style:normal;font-size:.8em;line-height:1;box-shadow:inset 0 -2px 0 #0002,0 0 0 2px #ffd54a;vertical-align:middle}
.chest svg{display:block}