:root {
    --ink: #2E2A3D;
    --ink-soft: #625C77;
    --sun: #FF9F1C;
    --sun-deep: #E6850A;
    --berry: #E4536B;
    --leaf: #2FA36B;
    --sky: #2E8FC9;
    --grape: #7C5CBF;
    --white: #FFFFFF;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --canvas: #0B0B12;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Vazirmatn',sans-serif; background:#000; color:#fff; overflow:hidden;
  }
  h1,h2,h3,.brand,.btn{font-family:'Baloo Bhaijaan 2','Vazirmatn',sans-serif;}
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:100px;font-weight:700;font-size:14.5px;white-space:nowrap;transition:transform .2s var(--ease);}
  .btn-primary{background:var(--sun);color:#fff;box-shadow:0 4px 0 var(--sun-deep);}
  .btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--sun-deep);}
  .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);}

  /* ===================== App shell (desktop: phone-like centered frame) ===================== */
  .reel-app{ position:relative; height:100dvh; height:100vh; background:#000; overflow:hidden; }
  .reel-frame{ position:relative; height:100%; max-width:480px; margin:0 auto; background:#000; overflow:hidden; }
  @media (min-width:900px){
    .reel-app{ display:flex; align-items:center; justify-content:center; background:#050507; }
    .reel-frame{ height:min(100vh,860px); border-radius:28px; box-shadow:0 30px 80px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.08); }
  }

  /* ===================== Feed ===================== */
  .reel-feed{ height:100%; overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .reel-feed::-webkit-scrollbar{ display:none; }
  .reel{ position:relative; height:100%; width:100%; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; display:flex; align-items:flex-end; }

  .reel-bg{ position:absolute; inset:0; overflow:hidden; }
  .reel-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 38%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.45) 100%); }
  .bg-1{ background:radial-gradient(ellipse 80% 60% at 70% 20%, rgba(255,159,28,.55), transparent 60%), linear-gradient(160deg,#7C5CBF,#2E8FC9); }
  .bg-2{ background:radial-gradient(ellipse 80% 60% at 30% 25%, rgba(228,83,107,.5), transparent 60%), linear-gradient(160deg,#2FA36B,#2E8FC9); }
  .bg-3{ background:radial-gradient(ellipse 80% 60% at 65% 15%, rgba(255,159,28,.5), transparent 60%), linear-gradient(160deg,#E4536B,#7C5CBF); }
  .bg-4{ background:radial-gradient(ellipse 80% 60% at 35% 20%, rgba(46,143,201,.55), transparent 60%), linear-gradient(160deg,#FF9F1C,#E4536B); }
  .bg-5{ background:radial-gradient(ellipse 80% 60% at 70% 25%, rgba(124,92,191,.5), transparent 60%), linear-gradient(160deg,#2FA36B,#FF9F1C); }
  .bg-6{ background:radial-gradient(ellipse 80% 60% at 30% 15%, rgba(255,159,28,.5), transparent 60%), linear-gradient(160deg,#2E8FC9,#2FA36B); }
  .bg-7{ background:radial-gradient(ellipse 80% 60% at 65% 20%, rgba(228,83,107,.5), transparent 60%), linear-gradient(160deg,#7C5CBF,#FF9F1C); }
  .bg-8{ background:radial-gradient(ellipse 80% 60% at 35% 25%, rgba(46,163,107,.5), transparent 60%), linear-gradient(160deg,#2E8FC9,#7C5CBF); }

  .blob{ position:absolute; border-radius:50%; background:rgba(255,255,255,.16); filter:blur(2px); animation:float 6s ease-in-out infinite; }
  .blob.b1{ width:120px; height:120px; top:14%; left:10%; }
  .blob.b2{ width:80px; height:80px; bottom:30%; right:14%; animation-delay:1.2s; }
  .blob.b3{ width:50px; height:50px; top:40%; right:26%; animation-delay:2s; }
  @keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-18px) } }

  .reel-mascot{ position:absolute; inset:0; margin:auto; width:96px; height:96px; opacity:.95; filter:drop-shadow(0 10px 30px rgba(0,0,0,.35)); animation:bob 2.4s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-10px) scale(1.03) } }
  .reel.paused .blob, .reel.paused .reel-mascot{ animation-play-state:paused; }

  .reel-caption-word{
    position:absolute; top:44%; left:50%; transform:translate(-50%,-50%);
    background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25); border-radius:100px;
    padding:8px 20px; font-size:14px; font-weight:700; backdrop-filter:blur(3px);
  }

  .center-toggle{ position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; pointer-events:none; }
  .reel.paused .center-toggle{ opacity:1; }
  .center-toggle svg{ width:26px; height:26px; color:#fff; }

  /* ===================== Bottom caption ===================== */
  .reel-caption{ position:relative; z-index:3; padding:0 88px 26px 18px; padding-bottom:calc(26px + var(--safe-b)); width:100%; }
  .reel-caption .level-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--sun); color:#fff; font-size:11.5px; font-weight:800; padding:4px 12px; border-radius:100px; margin-bottom:10px; }
  .reel-caption h3{ font-size:17px; font-weight:800; line-height:1.5; margin-bottom:6px; }
  .reel-caption p{ font-size:13px; color:rgba(255,255,255,.85); margin-bottom:10px; }
  .reel-tags{ display:flex; gap:8px; flex-wrap:wrap; }
  .reel-tags span{ font-size:12px; font-weight:700; color:rgba(255,255,255,.85); }

  /* ===================== Top bar ===================== */
  .reel-topbar{
    position:absolute; top:0; inset-inline:0; z-index:10; padding:calc(14px + var(--safe-t)) 14px 30px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  }
  .icon-btn{ width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .icon-btn svg{ width:19px; height:19px; }
  .reel-topbar .title{ font-size:15px; font-weight:800; }
  .story-dots{ position:absolute; top:calc(6px + var(--safe-t)); inset-inline:14px; display:flex; gap:4px; z-index:10; }
  .story-dots span{ flex:1; height:3px; border-radius:100px; background:rgba(255,255,255,.3); transition:background .2s; }
  .story-dots span.done{ background:rgba(255,255,255,.9); }
  .story-dots span.active{ background:var(--sun); }

  /* ===================== Right action bar ===================== */
  .reel-actions{ position:absolute; z-index:10; bottom:calc(26px + var(--safe-b)); inset-inline-end:12px; display:flex; flex-direction:column; align-items:center; gap:18px; }
  .action-btn{ display:flex; flex-direction:column; align-items:center; gap:4px; }
  .action-circle{ width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; transition:transform .15s var(--ease); }
  .action-btn:active .action-circle{ transform:scale(.88); }
  .action-circle svg{ width:22px; height:22px; color:#fff; }
  .action-btn.liked .action-circle{ background:var(--berry); }
  .action-btn.liked svg{ fill:#fff; }
  .action-count{ font-size:11.5px; font-weight:700; color:#fff; }
  .action-avatar{ width:42px; height:42px; border-radius:50%; overflow:hidden; border:2px solid #fff; background:var(--grape); display:flex; align-items:center; justify-content:center; font-size:18px; }

  /* ===================== Menu drawer ===================== */
  .reel-menu-drawer{
    position:absolute; inset:0; z-index:40; background:rgba(10,9,16,.97); backdrop-filter:blur(6px);
    display:flex; flex-direction:column; padding:calc(20px + var(--safe-t)) 22px 22px;
    transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .reel-menu-drawer.open{ transform:translateX(0); }
  .menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
  .menu-head .brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; }
  .menu-head .brand img{ width:30px; height:30px; border-radius:50%; }
  .menu-links{ display:flex; flex-direction:column; gap:6px; }
  .menu-links a{ padding:14px 8px; font-size:17px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; }
  .menu-links a span.tag{ font-size:11px; font-weight:700; color:var(--sun); background:rgba(255,159,28,.15); padding:3px 10px; border-radius:100px; }
  .menu-cta{ margin-top:auto; display:flex; gap:10px; }
  .menu-cta .btn{ flex:1; }

  /* ===================== Quiz overlay ===================== */
  .quiz-overlay{
    position:absolute; inset:0; z-index:30; display:flex; align-items:flex-end;
    background:linear-gradient(to top, rgba(6,5,10,.96) 46%, rgba(6,5,10,.7) 72%, rgba(6,5,10,.15));
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  }
  .quiz-overlay.show{ opacity:1; pointer-events:auto; }
  .quiz-panel{ width:100%; padding:18px 18px calc(20px + var(--safe-b)); transform:translateY(24px); transition:transform .4s var(--ease); }
  .quiz-overlay.show .quiz-panel{ transform:translateY(0); }
  .quiz-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .quiz-type-badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); font-size:12px; font-weight:700; padding:6px 12px; border-radius:100px; }
  .quiz-skip{ font-size:12.5px; font-weight:700; color:rgba(255,255,255,.65); padding:6px 4px; }
  .quiz-question{ font-size:16.5px; font-weight:800; margin-bottom:16px; line-height:1.6; }

  .quiz-options{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .quiz-options.single-col{ grid-template-columns:1fr; }
  .quiz-opt{
    background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.18); border-radius:16px;
    padding:14px 12px; font-size:14.5px; font-weight:700; text-align:center; transition:all .18s var(--ease); color:#fff;
  }
  .quiz-opt:active{ transform:scale(.97); }
  .quiz-opt.tf{ padding:20px 12px; font-size:20px; }
  .quiz-opt.correct{ background:rgba(47,163,107,.35); border-color:var(--leaf); }
  .quiz-opt.wrong{ background:rgba(228,83,107,.35); border-color:var(--berry); }
  .quiz-opt.img-opt{ font-size:34px; padding:16px 8px; }

  .quiz-feedback{
    display:none; align-items:center; gap:10px; margin-top:14px; padding:12px 16px; border-radius:14px; font-weight:700; font-size:14px;
  }
  .quiz-feedback.show{ display:flex; }
  .quiz-feedback.ok{ background:rgba(47,163,107,.25); color:#B9F0D2; }
  .quiz-feedback.bad{ background:rgba(228,83,107,.25); color:#FBDEE3; }
  .quiz-feedback svg{ width:20px; height:20px; flex-shrink:0; }

  .quiz-continue{ margin-top:16px; display:none; }
  .quiz-continue.show{ display:flex; width:100%; }

  /* word meaning */
  .word-card{ text-align:center; background:rgba(255,255,255,.08); border-radius:16px; padding:18px; margin-bottom:16px; }
  .word-card .en{ font-size:26px; font-weight:800; font-family:'Baloo Bhaijaan 2'; margin-bottom:4px; }
  .word-card .ph{ font-size:12.5px; color:rgba(255,255,255,.65); }

  /* matching */
  .match-wrap{ display:flex; gap:14px; }
  .match-col{ flex:1; display:flex; flex-direction:column; gap:10px; }
  .match-item{ background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.18); border-radius:14px; padding:12px; text-align:center; font-weight:700; font-size:14px; transition:all .18s var(--ease); }
  .match-item.selected{ border-color:var(--sun); background:rgba(255,159,28,.22); }
  .match-item.matched{ border-color:var(--leaf); background:rgba(47,163,107,.28); opacity:.8; pointer-events:none; }
  .match-item.mismatch{ border-color:var(--berry); background:rgba(228,83,107,.28); }

  /* mic */
  .mic-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:6px 0 4px; }
  .mic-btn{ width:78px; height:78px; border-radius:50%; background:var(--berry); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 0 #b53d51; transition:transform .12s; }
  .mic-btn svg{ width:30px; height:30px; color:#fff; }
  .mic-btn.recording{ animation:mic-pulse 1s ease-in-out infinite; }
  @keyframes mic-pulse{ 0%,100%{ box-shadow:0 6px 0 #b53d51, 0 0 0 0 rgba(228,83,107,.5) } 50%{ box-shadow:0 6px 0 #b53d51, 0 0 0 16px rgba(228,83,107,0) } }
  .mic-hint{ font-size:13px; color:rgba(255,255,255,.75); }

  /* color */
  .color-swatches{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .swatch{ width:52px; height:52px; border-radius:50%; border:3px solid rgba(255,255,255,.35); transition:transform .15s var(--ease); }
  .swatch:active{ transform:scale(.9); }
  .swatch.correct{ border-color:var(--leaf); box-shadow:0 0 0 3px rgba(47,163,107,.4); }
  .swatch.wrong{ border-color:var(--berry); }

  /* tracing */
  .trace-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; }
  .trace-canvas-box{ position:relative; width:150px; height:150px; background:rgba(255,255,255,.08); border-radius:18px; overflow:hidden; }
  .trace-letter{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:110px; font-weight:800; font-family:'Baloo Bhaijaan 2'; color:rgba(255,255,255,.18); user-select:none; pointer-events:none; }
  .trace-canvas-box canvas{ position:absolute; inset:0; touch-action:none; }
  .trace-hint{ font-size:13px; color:rgba(255,255,255,.75); }

  /* ===================== No-scroll hint / small screens ===================== */
  @media (max-width:360px){
    .reel-caption h3{ font-size:15.5px; }
    .action-circle{ width:42px; height:42px; }
  }


.icon-sprite-defs { position:absolute; width:0; height:0; overflow:hidden; }
.swatch--berry { background:#E4536B; }
.swatch--sky { background:#2E8FC9; }
.swatch--sun { background:#FFD93D; }
.swatch--leaf { background:#2FA36B; }
.quiz-continue.is-flex { display:flex; }