:root{
  --pw:480px;--ph:666px;--u:4.8px;
  --paper:#fbf4e2;--paper2:#f3e8cc;--ink:#2b2235;--muted:#6f6480;
  --cyan:#5ff6ff;--cyan2:#9ffcff;--night:#050a1a;
  --leather:#5b1f24;--leather2:#3a1216;--gold:#e0b44a;
  --topH:58px;--botH:66px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--night);color:#e8f4ff;font-family:Vazirmatn,Tahoma,"Segoe UI",sans-serif;overflow:hidden;
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button{font-family:inherit;color:inherit;cursor:pointer}
svg text{font-family:Vazirmatn,Tahoma,sans-serif}

/* ---------- پس‌زمینه‌ی فضایی ---------- */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.nebula{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 20% 20%,rgba(124,92,255,.22),transparent 55%),
             radial-gradient(ellipse at 85% 75%,rgba(0,200,255,.16),transparent 55%),
             radial-gradient(ellipse at 50% 110%,rgba(255,140,60,.12),transparent 60%)}

/* ---------- نوار بالا ---------- */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topH);z-index:30;display:flex;align-items:center;gap:10px;padding:0 14px;
  background:linear-gradient(to bottom,rgba(5,12,30,.92),rgba(5,12,30,.55));border-bottom:1px solid rgba(95,246,255,.25);backdrop-filter:blur(6px)}
.tb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;min-width:38px;padding:0 12px;border-radius:12px;
  border:1px solid rgba(95,246,255,.35);background:rgba(10,30,60,.7);color:var(--cyan2);font-weight:800;font-size:15px;transition:.2s}
.tb-btn:hover{background:rgba(20,60,100,.85);box-shadow:0 0 14px rgba(95,246,255,.35)}
.tb-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.25}
.tb-title b{font-size:17px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  background:linear-gradient(90deg,#ffd36b,#fff,#9ffcff);-webkit-background-clip:text;background-clip:text;color:transparent}
.era{font-size:12.5px;font-weight:800;color:var(--cyan2);letter-spacing:.3px;text-shadow:0 0 8px rgba(95,246,255,.8);white-space:nowrap}
.era.chg{animation:eraFlick .7s}
@keyframes eraFlick{0%,40%,80%{opacity:.2}20%,60%,100%{opacity:1}}

/* ---------- نوار پایین ---------- */
.botbar{position:fixed;bottom:0;left:0;right:0;height:var(--botH);z-index:30;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 12px}
.nav{height:46px;padding:0 18px;border-radius:23px;border:0;font-weight:900;font-size:16px;color:#08142b;
  background:linear-gradient(135deg,#9ffcff,#5ff6ff);box-shadow:0 0 0 2px rgba(95,246,255,.3),0 6px 18px rgba(95,246,255,.35);transition:transform .15s,opacity .2s}
.nav:hover{transform:translateY(-2px)}
.nav:disabled{opacity:.3;cursor:default;transform:none}
.nav.prev{background:rgba(10,30,60,.85);color:var(--cyan2);border:1px solid rgba(95,246,255,.4);box-shadow:none}
.prog{flex:1;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:4px}
.dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.dots i{width:10px;height:10px;border-radius:50%;background:rgba(159,252,255,.18);border:1px solid rgba(159,252,255,.35);cursor:pointer;transition:.25s}
.dots i.seen{background:rgba(159,252,255,.5)}
.dots i.cur{background:#ffd36b;border-color:#ffd36b;box-shadow:0 0 10px #ffd36b;transform:scale(1.3)}
.pgnum{font-size:12px;color:#9fb6d6;font-weight:700}

/* ---------- صحنه و کتاب ---------- */
.stage{position:fixed;left:0;right:0;top:var(--topH);bottom:var(--botH);z-index:5;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.platform{position:absolute;left:50%;bottom:2%;width:min(1100px,92vw);height:60px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(95,246,255,.35),rgba(95,246,255,.05) 55%,transparent 70%);filter:blur(4px);pointer-events:none;animation:platPulse 5s ease-in-out infinite}
@keyframes platPulse{50%{opacity:.6}}
.book-wrap{position:relative;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity 1s}
body.intro .book-wrap{transform:scale(.6) translateY(60px) rotateX(30deg);opacity:0}
.book{position:relative;width:calc(var(--pw) * 2);height:var(--ph)}
.single .book{width:var(--pw)}
.cover{position:absolute;inset:-12px -16px -14px;border-radius:12px;
  background:radial-gradient(ellipse at 30% 20%,#7a2c32,transparent 60%),linear-gradient(135deg,var(--leather),var(--leather2));
  box-shadow:0 30px 60px rgba(0,0,0,.65),0 0 0 2px #2a0c0f,0 0 60px rgba(95,246,255,.12),inset 0 0 0 4px rgba(224,180,74,.35)}
.cover::after{content:"";position:absolute;left:50%;top:-6px;bottom:-6px;width:26px;transform:translateX(-50%);border-radius:8px;
  background:linear-gradient(90deg,#2a0c0f,#6b262c 45%,#6b262c 55%,#2a0c0f)}
.single .cover{inset:-10px -12px -12px -8px}
.single .cover::after{left:auto;right:-4px;transform:none;width:16px}
.edges{position:absolute;top:3px;bottom:3px;width:var(--et,6px);
  background:repeating-linear-gradient(90deg,#efe3c4 0 1px,#d8c8a2 1px 2px);border-radius:3px;transition:width .6s}
.edges.l{left:calc(-1 * var(--et,6px))}
.edges.r{right:calc(-1 * var(--et,6px))}

.leaf3d{position:absolute;top:0;left:0;width:var(--pw);height:var(--ph);z-index:10;pointer-events:none;transform-style:preserve-3d}
.strip{position:absolute;top:0;height:100%;transform-origin:right center;transform-style:preserve-3d;will-change:transform}
.strip>.face{position:absolute;top:0;bottom:0;left:0;right:-1px;overflow:hidden;pointer-events:none;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.strip>.face.back{transform:rotateY(180deg)}
.slice{position:absolute;top:0;width:var(--pw);height:var(--ph)}
.face>.sh{position:absolute;inset:0;z-index:40;pointer-events:none}
.pg.back{background-color:var(--paper2);box-shadow:inset -18px 0 30px -18px rgba(80,50,10,.35)}
.drop{position:absolute;top:0;width:var(--pw);height:var(--ph);z-index:5;overflow:hidden;pointer-events:none}
.drop.l{left:0}.drop.r{left:var(--pw)}.single .drop.l{left:0}
.drop i{position:absolute;top:0;bottom:0;opacity:0}
.book.turning .base{pointer-events:none}
body.dragging,body.dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
.base{position:absolute;top:0;width:var(--pw);height:var(--ph);z-index:0}
.base.r{left:var(--pw)}
.base.l{left:0}
.single .base{left:0}

/* ---------- کاغذ ---------- */
.pg{position:absolute;inset:0;color:var(--ink);isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.55),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--paper),var(--paper2))}
.pg::before{content:"";position:absolute;top:0;bottom:0;width:12%;pointer-events:none;z-index:15}
.pg.r::before{left:0;background:linear-gradient(to right,rgba(80,50,10,.28),rgba(80,50,10,.06) 40%,transparent)}
.pg.l::before{right:0;background:linear-gradient(to left,rgba(80,50,10,.28),rgba(80,50,10,.06) 40%,transparent)}
.single .pg.combo::before{right:0;width:5%;background:linear-gradient(to left,rgba(80,50,10,.22),transparent)}
.pg.blank::after{content:"🦕";position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--u) * 20);opacity:.06}
.pno{position:absolute;bottom:1.6%;font-size:max(11px,calc(var(--u) * 2.4));font-weight:800;color:#a08a64;z-index:16}
.pg.r .pno{right:6%}.pg.l .pno{left:6%}.pg.combo .pno{position:static;display:block;text-align:center;margin:10px 0 4px}

/* ---------- صفحه‌ی تصویر ---------- */
.pg.art{display:flex;flex-direction:column;padding:5.5% 5.5% 6%}
.scene{position:relative;width:100%;height:calc(var(--u) * 93.45);flex:none;border-radius:calc(var(--u) * 2.5);overflow:hidden;background:#0b1830;
  box-shadow:0 0 0 1.5px rgba(80,50,10,.25),0 6px 16px rgba(60,40,10,.25)}
.scene .sc{display:block;width:100%;height:100%}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 40px rgba(0,0,0,.28);border-radius:inherit}
.cap{flex:1;display:flex;align-items:center;gap:calc(var(--u) * 3);padding-top:calc(var(--u) * 3);min-height:0}
.cap .av{flex:none;width:calc(var(--u) * 15);height:calc(var(--u) * 15);border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#e8defa);
  box-shadow:0 0 0 2px #fff,0 0 0 4px #c9b8f0,0 4px 10px rgba(60,40,120,.25);overflow:hidden;display:grid;place-items:center}
.cap .av svg{width:100%;height:100%}
.cap .bub{position:relative;flex:1;background:#fff;border-radius:calc(var(--u) * 3.5);padding:calc(var(--u) * 2) calc(var(--u) * 3.4);font-size:max(12.5px,calc(var(--u) * 3.3));line-height:1.75;
  box-shadow:0 3px 0 #e2d6bb,0 6px 14px rgba(60,40,10,.12);border:1.5px solid #eadfc4}
.cap .bub::before{content:"";position:absolute;right:-9px;top:50%;margin-top:-8px;border:8px solid transparent;border-left-color:#fff;border-right:0}
.cap .bub b{color:#7c5cff;font-weight:900;margin-left:4px}
.cap .cap-t .cur{display:inline-block;width:2px;height:1em;background:#7c5cff;vertical-align:-2px;animation:caret .8s steps(1) infinite;margin-right:1px}
@keyframes caret{50%{opacity:0}}

/* ---------- صفحه‌ی متن ---------- */
.pg-in{position:absolute;inset:5.5% 7% 6.5% 7.5%;overflow-y:auto;overflow-x:hidden;font-size:clamp(12.5px,calc(var(--u) * 3.25),19px);line-height:1.95;padding-left:4px;
  scrollbar-width:thin;scrollbar-color:#d4c29a transparent}
.pg-in::-webkit-scrollbar{width:6px}.pg-in::-webkit-scrollbar-thumb{background:#d4c29a;border-radius:3px}
.pg-in p{margin:0 0 .7em}
.ch-head{display:flex;align-items:center;gap:.6em;margin:0 0 .8em}
.ch-no{flex:none;width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;font-size:1.05em;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#7c5cff,#ff5a9a);box-shadow:0 3px 0 #5a3ee0}
.ch-head h2{margin:0;font-size:1.45em;font-weight:900;line-height:1.35;color:#3b2a7a}
.ch-head small{display:block;font-size:.62em;color:var(--muted);font-weight:700}
.d{background:#fff;border-radius:.9em;padding:.45em .8em;border-right:4px solid #7c5cff;box-shadow:0 2px 0 #eadfc4}
.d b{font-weight:900}
.d-sara{border-color:#ff8fb1}.d-sara b{color:#d6407a}
.d-nasrin{border-color:#56c2f5}.d-nasrin b{color:#1b86b8}
.d-tiko{border-color:#20c7d6;background:#effeff}.d-tiko b{color:#0b8f9c}
.d-teacher{border-color:#33416b}.d-teacher b{color:#33416b}
.d-geo{border-color:#ff7a1a}.d-geo b{color:#c75400}
.hl{background:linear-gradient(transparent 55%,#ffe58a 55%);font-weight:800}
.key{background:linear-gradient(135deg,#fff7d6,#ffeaa8);border:2px dashed #e0b44a;border-radius:1em;padding:.6em .9em;margin:.8em 0;font-weight:700}
.key::before{content:"⭐ نکته‌ی مهم";display:block;font-weight:900;color:#a86b00;font-size:.9em}

.box{border-radius:1em;margin:.9em 0;overflow:hidden;border:2px solid var(--bc);background:#fff}
.box>.bh{background:var(--bc);color:#fff;font-weight:900;padding:.25em .8em;font-size:.95em;display:flex;align-items:center;gap:.4em}
.box>.bb{padding:.6em .85em}
.box.kav{--bc:#16a34a}.box.fekr{--bc:#f59e0b}.box.gofto{--bc:#5b8def}.box.tip{--bc:#8b5fbf}.box.ramz{--bc:#e11d74}
.box.news{--bc:#2b2235}.box.info{--bc:#0ea5b7}.box.jam{--bc:#9c4a8a}.box.mission{--bc:#3b2a7a}
.bb ol,.bb ul{margin:.1em 0;padding-right:1.3em}
.bb li{margin:.15em 0}
.news-h{font-weight:900;color:#c0262d;font-size:1.1em;text-align:center;line-height:1.6}

/* ---------- پرسش‌ها ---------- */
.q{margin:.8em 0;background:#fff;border-radius:1em;padding:.7em .8em;box-shadow:0 3px 0 #e6dbc0;border:1.5px solid #eadfc4;animation:qIn .5s both}
@keyframes qIn{from{opacity:0;transform:translateY(10px)}}
.q-t{font-weight:900;margin-bottom:.45em;color:#3b2a7a}
.q-t::before{content:"❓ "}
.q-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5em),1fr));gap:.45em}
.q-o.wide{grid-template-columns:1fr}
.opt{position:relative;border:2px solid #e2dbff;background:#faf8ff;border-radius:.8em;padding:.4em .6em;font-size:1em;font-weight:800;line-height:1.6;transition:.15s;text-align:center}
.q-o.wide .opt{text-align:right}
.opt:hover:not(:disabled){border-color:#7c5cff;transform:translateY(-2px);background:#fff}
.opt.right{padding-left:1.5em;border-color:#16a34a;background:#e9fbef;color:#0f6b33}
.opt.right::after{content:"✓";position:absolute;left:.5em;top:50%;transform:translateY(-50%);font-weight:900}
.opt.wrong{border-color:#e5484d;background:#fff0f0;color:#b42318;animation:shake .4s}
.opt:disabled{cursor:default}
.opt.wrong:disabled,.opt.dim{opacity:.5}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.q-f{min-height:0;font-weight:700;margin-top:.4em;border-radius:.7em;padding:0 .7em;transition:.25s}
.q-f.ok{background:#e9fbef;color:#0f6b33;padding:.4em .7em}
.q-f.no{background:#fff4e5;color:#9a4b00;padding:.4em .7em}
.q.done{border-color:#bfe9cc}
.chips{display:flex;flex-wrap:wrap;gap:.4em}
.chip{border:2px solid #e2dbff;background:#faf8ff;border-radius:2em;padding:.25em .8em;font-weight:800;font-size:.95em;transition:.15s}
.chip.on{border-color:#7c5cff;background:#efe9ff;color:#4c2fd0}
.chip.on::before{content:"✓ "}
.chip.good{border-color:#16a34a;background:#e9fbef;color:#0f6b33}
.chip.bad{border-color:#e5484d;background:#fff0f0;color:#b42318;text-decoration:line-through}
.act{display:inline-flex;align-items:center;gap:.35em;border:0;border-radius:.8em;padding:.4em 1em;margin-top:.55em;font-weight:900;font-size:1em;color:#fff;
  background:linear-gradient(135deg,#7c5cff,#5a3ee0);box-shadow:0 3px 0 #3f28a8}
.act:active{transform:translateY(2px);box-shadow:0 1px 0 #3f28a8}
.act.alt{background:linear-gradient(135deg,#20c7d6,#0b8f9c);box-shadow:0 3px 0 #08707a}
.hint{font-size:.88em;color:var(--muted);font-weight:700}
.tap-hint{display:inline-block;background:#e6fbff;border:1.5px dashed #20c7d6;color:#0b8f9c;border-radius:.6em;padding:.1em .6em;font-weight:800;font-size:.92em;animation:tapPulse 1.6s infinite}
@keyframes tapPulse{50%{background:#c9f6ff}}
.missions{list-style:none;padding:0!important;margin:0}
.missions li{display:flex;gap:.5em;align-items:flex-start;padding:.3em 0;border-bottom:1px dashed #e4d9bd}
.missions li:last-child{border:0}
.missions .mi{flex:none}
.ans{display:none;margin-top:.3em;background:#e9fbef;color:#0f5e2f;border-radius:.6em;padding:.35em .6em;font-weight:700;animation:qIn .4s}
.missions li.open .ans{display:block}
.missions .act{padding:.15em .7em;font-size:.85em;margin:.3em 0 0}
.stages{list-style:none;padding:0!important;counter-reset:st}
.stages li{counter-increment:st;display:flex;gap:.5em;align-items:flex-start;padding:.35em .5em;border-radius:.7em;cursor:pointer;transition:.25s;opacity:.55}
.stages li::before{content:counter(st,persian);flex:none;width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;background:#e2dbff;color:#4c2fd0;font-weight:900}
.stages li.cur{opacity:1;background:#eef6ff;box-shadow:inset 0 0 0 2px #5b8def}
.stages li.cur::before{background:#5b8def;color:#fff}
.stages li.past{opacity:.9}
.name-in{width:100%;font:inherit;font-weight:800;border:2px solid #e2dbff;border-radius:.7em;padding:.35em .7em;margin-top:.3em;outline:none;background:#fff}
.name-in:focus{border-color:#7c5cff}
.score{font-size:1.3em;font-weight:900;text-align:center;color:#3b2a7a}

/* ---------- صفحه‌ی عنوان ---------- */
.title-pg{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.3em;padding-top:.4em}
.tp-kicker{font-size:.85em;font-weight:800;color:#fff;background:#3b2a7a;border-radius:2em;padding:.15em 1em}
.tp-title{margin:.15em 0 0;font-size:2.6em;line-height:1.25;font-weight:900;
  background:linear-gradient(135deg,#c0262d,#ff8a3d 50%,#7c5cff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.08))}
.tp-sub{font-weight:800;color:#5a4a7a}
.cast{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;width:100%;margin:.6em 0}
.cast div{background:#fff;border-radius:1em;padding:.4em .3em;box-shadow:0 3px 0 #e6dbc0;border:1.5px solid #eadfc4;font-size:.85em;line-height:1.5}
.cast svg{width:3.6em;height:3.6em;display:block;margin:0 auto}
.cast b{display:block;font-size:1.1em;color:#3b2a7a}
.tp-hint{font-size:.85em;color:var(--muted);font-weight:700;background:#fff8e1;border-radius:.8em;padding:.4em .8em;border:1.5px dashed #e0b44a}

/* ---------- حالت تک‌صفحه (موبایل) ---------- */
.pg.combo{overflow-y:auto;overflow-x:hidden;padding:4% 4.5% 2%;scrollbar-width:thin}
.single .pg.combo .scene{height:calc(var(--u) * 95.55);border-radius:calc(var(--u) * 3)}
.single .pg.combo .cap{padding:calc(var(--u) * 3) 0 calc(var(--u) * 1)}
.single .pg.combo .cap .av{width:calc(var(--u) * 13);height:calc(var(--u) * 13)}
.single .pg.combo .cap .bub{font-size:clamp(13px,calc(var(--u) * 3.7),18px)}
.single .pg.combo .pg-in{position:static;inset:auto;overflow:visible;font-size:clamp(14.5px,calc(var(--u) * 4.1),19px);padding:calc(var(--u) * 2) calc(var(--u) * 1) 0}

/* ---------- گوشه‌های ورق زدن ---------- */
.corner{position:absolute;bottom:0;width:64px;height:64px;z-index:900;border:0;background:transparent;padding:0}
.corner.next{left:0}.corner.prev{right:0}
.corner::before{content:"";position:absolute;bottom:0;width:0;height:0;transition:.25s;border-style:solid}
.corner.next::before{left:0;border-width:0 0 28px 28px;border-color:transparent transparent #e8dcbc transparent;filter:drop-shadow(3px -3px 3px rgba(0,0,0,.25))}
.corner.prev::before{right:0;border-width:28px 0 0 28px;border-color:transparent transparent transparent #e8dcbc;transform:rotate(-90deg);filter:drop-shadow(-3px -3px 3px rgba(0,0,0,.25))}
.corner:hover::before{border-width:0 0 44px 44px}
.corner.prev:hover::before{border-width:44px 0 0 44px}
.corner[hidden]{display:none}
.corner.next{animation:cornerWiggle 3s ease-in-out infinite}
@keyframes cornerWiggle{0%,80%,100%{transform:none}88%{transform:translate(-2px,2px)}}

/* ---------- پیش‌درآمد ---------- */
.intro-ov{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;
  background:radial-gradient(ellipse at center,rgba(10,30,70,.55),rgba(3,6,18,.92));transition:opacity .9s}
.intro-ov.hide{opacity:0;pointer-events:none}
.intro-ov .robo{width:150px;height:150px}
.intro-ov h1{margin:0;font-size:clamp(30px,7vw,58px);font-weight:900;line-height:1.3;
  background:linear-gradient(135deg,#ffd36b,#ff8a3d 40%,#9ffcff 75%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,180,80,.35));animation:titleIn 1.6s both}
@keyframes titleIn{from{letter-spacing:.4em;opacity:0;filter:blur(8px)}}
.intro-ov p{margin:0;color:#bcd3f0;font-size:clamp(15px,3.5vw,19px);font-weight:700;max-width:560px;line-height:1.9;animation:titleIn 1.6s .4s both}
.intro-ov .kick{color:var(--cyan2);font-weight:800;letter-spacing:1px;font-size:14px;animation:titleIn 1.4s both}
.go-btn{margin-top:8px;border:0;border-radius:40px;padding:14px 34px;font-size:20px;font-weight:900;color:#08142b;
  background:linear-gradient(135deg,#ffd36b,#ff8a3d);box-shadow:0 0 0 3px rgba(255,211,107,.3),0 0 34px rgba(255,160,60,.55);animation:titleIn 1.4s .8s both,goPulse 2s 2.2s infinite}
@keyframes goPulse{50%{box-shadow:0 0 0 8px rgba(255,211,107,.15),0 0 50px rgba(255,160,60,.8)}}

/* ---------- سفر در زمان ---------- */
.warp{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;transition:opacity .35s}
.warp.on{opacity:1;pointer-events:auto}
.warp canvas{position:absolute;inset:0;width:100%;height:100%}
.warp .wl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:90%}
.warp .wl small{display:block;color:var(--cyan2);font-weight:800;letter-spacing:2px;font-size:clamp(13px,2.4vw,18px);text-shadow:0 0 10px var(--cyan)}
.warp .wl b{display:block;font-size:clamp(28px,6.5vw,62px);font-weight:900;color:#fff;text-shadow:0 0 20px #5ff6ff,0 0 40px #7c5cff;animation:warpTxt .5s infinite}
@keyframes warpTxt{50%{transform:scale(1.03);text-shadow:0 0 30px #5ff6ff,0 0 60px #ff5a9a}}
.warp .flash{position:absolute;inset:0;background:#fff;opacity:0}
.warp .flash.go{animation:flash .9s}
@keyframes flash{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}

/* ---------- فهرست ---------- */
.menu{position:fixed;inset:0;z-index:50;background:rgba(3,8,22,.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
.menu.open{display:flex}
.menu-card{width:min(640px,100%);max-height:85vh;overflow:auto;background:linear-gradient(160deg,#0f2246,#0a1530);border:1px solid rgba(95,246,255,.35);
  border-radius:20px;padding:18px;box-shadow:0 0 40px rgba(95,246,255,.2)}
.menu-card h3{margin:0 0 12px;color:var(--cyan2);font-size:20px;display:flex;justify-content:space-between;align-items:center}
.menu-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.menu-list button{display:flex;align-items:center;gap:10px;text-align:right;background:rgba(95,246,255,.07);border:1px solid rgba(95,246,255,.25);border-radius:14px;padding:10px;font-weight:800;font-size:14.5px;line-height:1.5;transition:.2s}
.menu-list button:hover{background:rgba(95,246,255,.18)}
.menu-list button.cur{border-color:#ffd36b;box-shadow:0 0 12px rgba(255,211,107,.4)}
.menu-list .mi{font-size:24px}
.menu-list small{display:block;color:#8fb0d6;font-weight:700;font-size:12px}

/* ذرات تشویق */
.burst{position:fixed;pointer-events:none;z-index:80;font-size:18px;animation:burst .9s ease-out forwards}
@keyframes burst{from{transform:translate(0,0) scale(.6);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(var(--r));opacity:0}}

/* =========================================================
   انیمیشن‌های صحنه
   ========================================================= */
.sc [class*="a-"]{transform-box:fill-box;transform-origin:center}
.a-bob{animation:bob 3s ease-in-out infinite}
.a-hover{animation:hover 2.6s ease-in-out infinite}
.a-blink{animation:blink 4.2s infinite}
.a-sway{animation:sway 4s ease-in-out infinite}
.a-wave{animation:wave 1.1s ease-in-out infinite}
.a-pulse{animation:pulse 2.2s ease-in-out infinite}
.a-spin{animation:spin 6s linear infinite}
.a-flap{animation:flap .6s ease-in-out infinite}
.a-flapx{animation:flapx .35s ease-in-out infinite}
.a-fly{animation:fly 14s linear infinite;transform-box:view-box!important}
.a-drift{animation:drift 40s linear infinite;transform-box:view-box!important}
.a-drive{animation:drive 8s linear infinite;transform-box:view-box!important}
.a-walk{animation:walk 9s linear infinite;transform-box:view-box!important}
.a-smoke{animation:smoke 5.6s ease-out infinite;opacity:0}
.a-tail{animation:tail .5s ease-in-out infinite}
.a-pop{animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
.a-beamin{animation:beamin 1s cubic-bezier(.3,1.5,.5,1) both}
.a-flicker{animation:flicker 4s infinite}
.a-nod{animation:nod 5s ease-in-out infinite}
.a-legA{animation:legA .9s ease-in-out infinite}
.a-legB{animation:legB .9s ease-in-out infinite}
.a-fpw{animation:print 9s linear infinite;opacity:0}
.a-printin{animation:printin .5s ease-out both}
.a-qpop{animation:qpop 3.4s ease-out infinite;opacity:0}
.a-glowp{animation:glowp 2.4s ease-in-out infinite}
.a-flame{animation:flame .18s ease-in-out infinite alternate}
.a-print{animation:printshow 8s linear infinite;opacity:0}
.a-hand{animation:hand 8s ease-in-out infinite}
.a-handshadow{animation:handshadow 8s ease-in-out infinite}
.a-mag{animation:mag 8s ease-in-out infinite;opacity:0;transform-box:view-box!important}
.a-reveal{animation:reveal 9s ease-in-out infinite}
.a-brush{animation:brush .5s ease-in-out infinite}
.a-dust{animation:dust 1.6s ease-out infinite;opacity:0}
.a-beam{animation:beam 2s ease-in-out infinite}
.a-dropin{animation:dropin .7s ease-out both}
.a-sed{animation:sed 3.5s linear infinite;opacity:0;transform-box:view-box!important}
.a-ripple{animation:ripple 3s ease-out infinite;opacity:0}
.a-hop{animation:hop 3s ease-in-out infinite}
.a-beepath{animation:beepath 6s ease-in-out infinite}
.a-fall{animation:fall 4s linear infinite;transform-box:view-box!important}
.a-rain{animation:rain .8s linear infinite}

@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes hover{50%{transform:translateY(-8px)}}
@keyframes blink{0%,91%,97%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes wave{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.65;transform:scale(1.1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.45)}}
@keyframes flapx{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.3)}}
@keyframes fly{from{transform:translateX(470px)}to{transform:translateX(-170px)}}
@keyframes drift{from{transform:translateX(-90px)}to{transform:translateX(490px)}}
@keyframes drive{from{transform:translateX(-60px)}to{transform:translateX(460px)}}
@keyframes walk{from{transform:translateX(470px)}to{transform:translateX(-220px)}}
@keyframes smoke{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.75}100%{transform:translate(-40px,-120px) scale(2.6);opacity:0}}
@keyframes tail{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes beamin{0%{transform:scale(.1) translateY(30px);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes flicker{0%,93%,100%{opacity:1}95%{opacity:.6}97%{opacity:1}98%{opacity:.75}}
@keyframes nod{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes legA{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
@keyframes legB{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
@keyframes print{0%{opacity:0;transform:scale(.5)}2%{opacity:1;transform:scale(1)}70%{opacity:1}82%,100%{opacity:0}}
@keyframes printin{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes qpop{0%{transform:translateY(12px) scale(.3);opacity:0}15%{transform:translateY(0) scale(1.2);opacity:1}25%{transform:scale(1)}75%{opacity:1;transform:translateY(-10px)}100%{opacity:0;transform:translateY(-26px)}}
@keyframes glowp{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes flame{from{transform:scaleY(.8)}to{transform:scaleY(1.2)}}
@keyframes printshow{0%,33%{opacity:0}40%,92%{opacity:1}100%{opacity:0}}
@keyframes hand{0%{transform:translate(50px,170px) scale(1.5);opacity:0}6%{opacity:1}22%{transform:translate(0,0) scale(1)}27%{transform:translate(0,0) scale(.965)}36%{transform:translate(0,0) scale(1);opacity:1}52%{transform:translate(60px,200px) scale(1.55);opacity:1}54%,100%{transform:translate(60px,200px) scale(1.55);opacity:0}}
@keyframes handshadow{0%{transform:translate(70px,180px) scale(1.5);opacity:0}22%{transform:translate(0,0) scale(1);opacity:1}36%{transform:translate(0,0) scale(1);opacity:1}52%,100%{transform:translate(80px,210px) scale(1.5);opacity:0}}
@keyframes mag{0%,55%{opacity:0;transform:translate(-50px,-20px)}60%{opacity:1;transform:translate(-50px,-20px)}75%{transform:translate(20px,-62px)}88%{opacity:1;transform:translate(-12px,8px)}94%,100%{opacity:0;transform:translate(-12px,8px)}}
@keyframes reveal{0%,8%{transform:scaleX(1)}60%,92%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes brush{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@keyframes dust{0%{transform:translate(0,0) scale(1);opacity:.9}100%{transform:translate(-22px,-34px) scale(2);opacity:0}}
@keyframes beam{0%,100%{opacity:.25}50%{opacity:.65}}
@keyframes dropin{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
@keyframes sed{0%{transform:translateY(0);opacity:0}10%{opacity:.9}100%{transform:translateY(220px);opacity:0}}
@keyframes ripple{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes hop{0%,62%,100%{transform:translate(0,0) rotate(0)}76%{transform:translate(-6px,-34px) rotate(-12deg)}90%{transform:translate(0,0) rotate(0)}}
@keyframes beepath{0%,100%{transform:translate(0,0)}25%{transform:translate(70px,-30px)}50%{transform:translate(130px,12px) scaleX(-1)}75%{transform:translate(60px,42px) scaleX(-1)}}
@keyframes fall{from{transform:translateY(-30px) rotate(0)}to{transform:translateY(470px) rotate(600deg)}}
@keyframes rain{from{transform:translateY(0);opacity:1}to{transform:translateY(120px);opacity:.2}}

/* صحنه‌ی ۵: هولوگرام جانوران */
.s5 .holo{opacity:0;transform:scale(.3);transition:.45s cubic-bezier(.3,1.5,.5,1);transform-box:fill-box;transform-origin:center}
.s5 .trk.show .holo{opacity:1;transform:scale(1)}
.s5.lock .trk{cursor:default}
.s5 .trk.pick circle:first-of-type{stroke:#16a34a;fill:#e9fbef}

/* صحنه‌ی ۷: لایه‌ها */
.s7 .ly7{cursor:pointer}
.s7 .ly7:hover .lyb{filter:brightness(1.07)}
.s7 .ly7.good .lyb{stroke:#16a34a;stroke-width:4}
.s7 .ly7.bad .lyb{stroke:#e5484d;stroke-width:4}
.s7 .ly7.good{animation:none}

.s7 .age7{opacity:0;transition:opacity .8s}
.s7.aged .age7{opacity:1}
/* صحنه‌ی ۸: مراحل */
.s8 .water8,.s8 .live8,.s8 .snow8,.s8 .geo8,.s8 .grass8,.s8 .ring8,.s8 .sun8{transition:opacity 1.6s}
.s8 .stack8{transition:transform 2s ease-in-out}
.s8 .hero8{transform:translate(200px,150px);transition:transform 2.4s cubic-bezier(.5,0,.4,1)}
.s8 .flip8{transform-box:fill-box;transform-origin:center;transition:transform 1.2s}
.s8 .flesh8{transition:opacity 2s}
.s8 .bones8{opacity:0;transition:opacity 2s}
.s8 .bones8 .bones{transition:stroke 2s}
.s8 .amm8{transform:translateY(-150px);transition:transform 2.6s .4s ease-in;opacity:1}
.s8 .ly8{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1.2s}
.s8 .snow8,.s8 .geo8,.s8 .grass8,.s8 .ring8{opacity:0}
.s8 .sun8{opacity:.3}
.s8:not(.st1) .hero8{transform:translate(200px,288px)}
.s8:not(.st1) .flip8{transform:scaleY(-1) rotate(-6deg)}
.s8:not(.st1) .flesh8{opacity:.65}
.s8:not(.st1) .amm8{transform:none}
.s8.st3 .flesh8,.s8.st4 .flesh8,.s8.st5 .flesh8{opacity:0}
.s8.st3 .bones8,.s8.st4 .bones8,.s8.st5 .bones8{opacity:1}
.s8.st3 .snow8,.s8.st4 .snow8{opacity:1}
.s8.st3 .ly8-1,.s8.st4 .ly8,.s8.st5 .ly8{transform:scaleY(1)}
.s8.st4 .ly8-2{transition-delay:.3s}.s8.st4 .ly8-3{transition-delay:.9s}.s8.st4 .ly8-4{transition-delay:1.5s}
.s8.st4 .bones8 .bones,.s8.st5 .bones8 .bones{stroke:#3a2c1c}
.s8.st5 .water8,.s8.st5 .live8{opacity:0}
.s8.st5 .stack8{transform:translateY(-60px)}
.s8.st5 .geo8,.s8.st5 .grass8,.s8.st5 .sun8{opacity:1}
.s8.st5 .ring8{opacity:1;animation:pulse 1.6s infinite;transform-box:fill-box;transform-origin:center}
.s8 .geo8{transition-delay:1.2s}
.stage-ctl{position:absolute;left:0;right:0;bottom:3.5%;display:flex;justify-content:center;gap:calc(var(--u) * 1.6);z-index:3}
.stage-ctl button{width:calc(var(--u) * 9);height:calc(var(--u) * 9);max-width:40px;max-height:40px;border-radius:50%;border:2px solid #9ffcff;background:rgba(6,34,58,.85);color:#9ffcff;font-weight:900;font-size:max(12px,calc(var(--u) * 3.4));display:grid;place-items:center;padding:0}
.stage-ctl button.cur{background:#ffd36b;color:#3a2600;border-color:#ffd36b;box-shadow:0 0 12px #ffd36b}
.stage-ctl button.play{width:auto;max-width:none;padding:0 calc(var(--u) * 3);border-radius:calc(var(--u) * 5)}

/* صحنه‌ی ۹ */
.s9 .holo9,.s9 .beam9,.s9 .scan9{opacity:0;transition:opacity .6s}
.s9 .slab9{cursor:pointer}
.s9 .slab9.sel .holo9{opacity:.9}
.s9 .slab9.sel .beam9{opacity:1}
.s9 .slab9.sel .scan9{opacity:1;animation:scanY 1.6s ease-in-out infinite;transform-box:view-box}
.s9 .slab9.sel .holo9>g{animation:holoIn .8s both}
@keyframes scanY{0%,100%{transform:translateY(0)}50%{transform:translateY(58px)}}
@keyframes holoIn{0%{opacity:0;transform:translateY(20px)}40%{opacity:.4}55%{opacity:.1}100%{opacity:1;transform:none}}

/* صحنه‌ی ۱۱ */
.s11 .env11{opacity:0;transition:opacity .6s}
.s11 .env11.on{opacity:1}
.s11 .pin11{cursor:pointer}
.s11 .pin11 .ring11{opacity:0}
.s11 .pin11.cur .ring11{opacity:1}
.s11 .pin11.cur .ln11,.s11 .pin11.view .ln11{opacity:.9}
.s11 .pin11.solved>circle:nth-of-type(1){fill:#e9fbef;stroke:#16a34a}

/* صحنه‌ی ۱۲ */
.time-ctl{position:absolute;left:4%;right:4%;bottom:3%;display:flex;align-items:center;gap:calc(var(--u) * 2);background:rgba(6,34,58,.82);border:1.5px solid #5ff6ff;border-radius:calc(var(--u) * 4);padding:calc(var(--u) * 1.5) calc(var(--u) * 3);color:#9ffcff;font-weight:800;font-size:max(11px,calc(var(--u) * 2.9));z-index:3}
.time-ctl input{flex:1;accent-color:#ffd36b;height:24px;cursor:pointer}

/* صحنه‌ی ۱۳ */
.s13 .st13{transition:fill .5s,transform .5s}
.s13 .st13.on{fill:#ffc928;stroke:#e09a00}

/* کاهش حرکت */
@media (prefers-reduced-motion:reduce){
  .sc *{animation-duration:0s!important;animation-iteration-count:1!important}
}
.pg:not(.on) .sc,.pg:not(.on) .sc *{animation-play-state:paused!important}
@media (max-width:560px){
  .hide-sm{display:none}
  .nav{padding:0 12px;font-size:14px;height:42px}
  .dots i{width:8px;height:8px}
  .tb-title b{font-size:15px}
  .botbar{gap:8px}
}

/* نشانه‌ی ادامه‌ی متن */
.more-hint{position:absolute;left:50%;bottom:3.2%;transform:translateX(-50%);z-index:17;display:none;align-items:center;gap:.3em;
  background:#3b2a7a;color:#fff;font-weight:800;font-size:max(11px,calc(var(--u) * 2.5));border-radius:2em;padding:.1em .9em;pointer-events:none;animation:moreB 1.4s ease-in-out infinite}
.pg.more .more-hint{display:flex}
.pg.more .pg-in{-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent);mask-image:linear-gradient(to bottom,#000 88%,transparent)}
@keyframes moreB{50%{transform:translate(-50%,3px)}}

/* سبک‌سازی برای گوشی */
button,.opt,.chip,.corner{touch-action:manipulation}
.single .topbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,12,30,.96)}
.single .menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(3,8,22,.92)}
.single .platform{display:none}
.single .sc [filter]{filter:none}
.single .cover{box-shadow:0 10px 26px rgba(0,0,0,.55),inset 0 0 0 3px rgba(224,180,74,.35)}
.single .stage{bottom:calc(var(--botH) + env(safe-area-inset-bottom, 0px))}
.botbar{padding-bottom:env(safe-area-inset-bottom, 0px);height:calc(var(--botH) + env(safe-area-inset-bottom, 0px))}