/* ═══════════════════════════════════════════════════════════════
   درون شمشک — پوسته‌ی کودکانه

   این فایل روی app.css سوار می‌شود و فقط جایی را عوض می‌کند که
   باید بچگانه باشد. هدر، فوتر و داک دست‌نخورده می‌مانند —
   تا معلوم باشد شمشک هم خانه‌ی درون است.

   چیزهایی که حذف نمی‌شوند: شکلکِ جواهرِ چشم‌دار، لکه‌های رنگی،
   ستاره‌ها، قابِ رنگین‌کمانی، گوشه‌های گرد، زبانِ خودمانی.

   دسترس‌پذیری: روی زردِ #ffd23f متن همیشه مرکّب است، نه سفید.
   کنتراستِ سفید روی این زرد ۱٫۶:۱ است — برای بچه غیرقابلِ خواندن.
   ═══════════════════════════════════════════════════════════════ */

body.sk{
  --sk-yellow:#ffd23f;
  --sk-purple:#8b5cf6;
  --sk-purple-2:#a78bfa;
  --sk-pink:#ff5c8a;
  --sk-teal:#2ec4a0;
  --sk-blue:#3a86ff;
  --sk-deep:#3b0764;

  /* پالتِ خودش، نه پالتِ سایت */
  --bg:#fffaf2;
  --bg-2:#fff2e4;
  --fg:#3b2d5a;
  --sub:#6b5b8a;
  --faint:#8a7ba8;
  --hair:#f0e2d4;
  --hair-2:#e3d0be;
  --accent:#9b5de5;
  --accent-ink:#ffffff;

  --r:22px;
  --r-lg:30px;

  /* یک پله درشت‌تر و بازتر: بچه و نوجوان راحت‌تر می‌خوانند */
  font-size:17.5px;
  line-height:1.72;
}

/* شمشک همیشه روشن است، حتی وقتی تمِ سایت شب است.
   برای بچه‌ها صفحه‌ی تیره جای خوبی نیست. */
:root[data-theme="paper"] body.sk{ --bg:#fffaf2 }

body.sk .head{background:color-mix(in srgb,#fffaf2 88%,transparent);border-bottom-color:#f0e2d4}
body.sk .tgl{display:none}   /* تمِ شمشک انتخابی نیست */

/* ════════════════ هیرو ════════════════ */

.sk-hero{position:relative;padding:56px 0 34px;overflow:hidden}
.sk-head{display:flex;align-items:center;gap:26px;flex-wrap:wrap;position:relative;z-index:2}
.sk-copy{flex:1;min-width:250px}
.sk-hero h1{font-size:clamp(40px,10vw,84px);line-height:1.06}
.sk-word{background:linear-gradient(95deg,#ff5c8a,#ffd23f 42%,#9b5de5);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#9b5de5}
.sk-hero .say{font-size:clamp(19px,3.2vw,28px);color:var(--sub)}
.sk-hero .say b{color:var(--sk-pink)}
.sk-hero .kick{color:var(--sk-purple);font-weight:600}

/* لکه‌های رنگیِ پس‌زمینه — شخصیتِ صفحه */
.sk-blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.42;pointer-events:none;z-index:1}
.sk-blob.b1{width:260px;height:260px;background:#ffd23f;top:-70px;inset-inline-end:8%}
.sk-blob.b2{width:210px;height:210px;background:#a78bfa;bottom:-80px;inset-inline-start:12%}
.sk-blob.b3{width:170px;height:170px;background:#2ec4a0;top:38%;inset-inline-start:42%}

.sk-mascot{flex:none}
.sk-mascot svg{width:clamp(96px,22vw,148px);height:auto}
.sk-wiggle{transform-origin:70px 70px;animation:wiggle 4.2s ease-in-out infinite}
@keyframes wiggle{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%    {transform:rotate(3deg)  translateY(-6px)}
}

/* ════════════════ شبکه‌ی قصه‌ها ════════════════ */

body.sk .grid{gap:30px 20px}
body.sk .ep .cov{border-radius:var(--r);box-shadow:0 10px 24px -16px rgba(107,91,138,.55)}
body.sk .ep:hover .cov{transform:rotate(-1.2deg) scale(1.01)}
body.sk .ep .cov{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
body.sk .ep .work{font-size:18px}
body.sk .ep .num{background:var(--sk-yellow);color:var(--sk-deep);font-weight:600;
  display:inline-flex;align-items:center;gap:4px}
body.sk .ep .num svg{width:11px;height:11px;fill:currentColor}
body.sk .ep .play i{background:var(--sk-purple);color:#fff;width:52px;height:52px}

body.sk .pbtn{background:var(--sk-purple);color:#fff}
body.sk .pbtn:hover{transform:translateY(-2px) scale(1.02)}
/* اگر روزی دکمه زرد شد، متنش باید مرکّب بماند */
body.sk .pbtn.yellow{background:var(--sk-yellow);color:var(--sk-deep)}

/* ════════════════ ستاره‌ی بزرگ و فنری ════════════════ */

body.sk .rate{border:2px dashed var(--hair-2);border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fffdf8,#fff6ea)}
body.sk .stars .st{width:44px;height:44px}
body.sk .stars .st svg{width:30px;height:30px}
body.sk .stars .st.on,body.sk .stars .st.avg{color:var(--sk-yellow)}
body.sk .stars .st.on{filter:drop-shadow(0 2px 4px rgba(255,210,63,.6))}
body.sk .stars:not(.ro) .st:hover{transform:scale(1.28) rotate(-8deg)}
body.sk .stars:not(.ro) .st:active{transform:scale(.92)}
body.sk .stars .st{transition:transform .2s cubic-bezier(.34,1.8,.64,1),color .15s}

/* ════════════════ نظرها ════════════════ */

body.sk .n-form{border:2px solid var(--hair-2);border-radius:var(--r-lg);background:#fff}
body.sk .n-av{background:linear-gradient(140deg,#a78bfa,#ff8fb1);color:#fff;font-size:15px}
body.sk .n-item:nth-child(3n+2) .n-av{background:linear-gradient(140deg,#ffd23f,#ff8fb1);color:var(--sk-deep)}
body.sk .n-item:nth-child(3n+3) .n-av{background:linear-gradient(140deg,#2ec4a0,#3a86ff)}
body.sk .n-body{font-size:16px}

/* ════════════════ هنوز قصه‌ای نیست ════════════════ */

.sk-soon{text-align:center;padding:52px 20px;border:2px dashed var(--hair-2);border-radius:var(--r-lg)}
.sk-soon h3{font-size:24px;margin:16px 0 10px}
.sk-soon p{color:var(--sub);max-width:42ch;margin-inline:auto}
.sk-btn{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  padding:13px 26px;border-radius:99px;background:var(--sk-purple);color:#fff;font-weight:600;
  transition:transform .18s}
.sk-btn:hover{transform:translateY(-2px) scale(1.02)}
.sk-btn svg{width:17px;height:17px}

/* ════════════════ پل به شمشِ بزرگ‌ترها ════════════════ */

.sk-grown{display:flex;align-items:center;gap:18px;margin-top:56px;padding:26px 28px;
  border-radius:var(--r-lg);background:#141416;color:#ededee;transition:transform .22s}
.sk-grown:hover{transform:translateY(-2px)}
.sk-grown .tag{font-size:11.5px;color:#8e9096;font-weight:600}
.sk-grown h3{font-size:24px;margin:6px 0 8px;color:#fff}
.sk-grown p{font-size:14.5px;color:#a7a8ad;max-width:46ch}
.sk-grown .go{margin-inline-start:auto;flex:none;color:var(--sk-yellow)}
.sk-grown .go svg{width:22px;height:22px}

/* ════════════════ خطاها، با لحنِ مهربان ════════════════ */

body.sk .msg.err{color:#b8456b;border-color:#ffc9d9;background:#fff3f7}
body.sk .msg.ok{color:#1f8f74;border-color:#b6ecdc;background:#f1fbf8}

/* ════════════════ داک، با کاورِ درشت‌تر ════════════════ */

body.sk .dock{background:color-mix(in srgb,#fffaf2 94%,transparent);border-top-color:var(--hair-2)}
body.sk .d-cover{width:58px;height:58px;border-radius:16px}
body.sk .d-play{background:var(--sk-purple)!important;color:#fff!important}

@media (prefers-reduced-motion:reduce){
  .sk-wiggle{animation:none}
}