/* ═══════════════════════════════════════════════════════════════
   FEATURES — Magic Mix · Colorful Stickers · Certificate · Story
   These extend social.css with the v2 enhancements.
   ─────────────────────────────────────────────────────────────── */

/* ─── ROOM 5: TREASURES — re-styled with full features ─── */
.treasures-intro{
  background:linear-gradient(135deg,#FFE0B2,#FFCC80);
  border:2.5px solid #FB8C00;
  border-radius:var(--r-lg);padding:.85rem 1rem;
  display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;
  position:relative;overflow:hidden;
}
.treasures-intro::after{
  content:'✨';position:absolute;top:-6px;right:-4px;font-size:2.2rem;opacity:.25;
}
.treasures-intro .em{font-size:2rem;animation:bob 3s ease-in-out infinite}
.treasures-intro h4{font-size:1.05rem;font-weight:900;color:#E65100}
.treasures-intro p{font-size:.8rem;color:#BF360C;font-weight:700}

/* ─── MAGIC MIX — the recipe of a khulq ─── */
.magic-mix{
  background:
    radial-gradient(circle at 90% 8%, rgba(255,255,255,.55) 0 16px, transparent 17px),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.35) 0 10px, transparent 11px),
    radial-gradient(circle at 80% 88%, rgba(255,255,255,.4) 0 12px, transparent 13px),
    linear-gradient(135deg, var(--hc), color-mix(in srgb,var(--hc) 60%,#000));
  color:#fff;
  border-radius:var(--r-lg);
  padding:1rem 1.1rem 1.1rem;
  margin:.6rem 0 .8rem;
  box-shadow:0 8px 0 color-mix(in srgb,var(--hc) 45%,#000),
             0 14px 30px rgba(40,20,10,.2);
  position:relative;overflow:hidden;
}
.magic-mix::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 0% 100%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}
.mm-hdr{
  display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem;
  position:relative;z-index:1;
}
.mm-hdr .em{
  font-size:2rem;animation:wiggle 3s ease-in-out infinite;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.25));
}
.mm-hdr h4{font-size:1.05rem;font-weight:900;line-height:1.15}
.mm-hdr p{font-size:.75rem;opacity:.9;font-weight:700;margin-top:.1rem}

.mm-recipe{
  display:flex;flex-direction:column;gap:.5rem;
  position:relative;z-index:1;
}
.mm-ingredient{
  background:rgba(255,255,255,.96);color:var(--ink);
  border-radius:var(--r);
  padding:.55rem .75rem;
  display:flex;align-items:center;gap:.55rem;
  box-shadow:0 3px 0 rgba(0,0,0,.08);
}
.mm-ingredient .num{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg, var(--hc), color-mix(in srgb,var(--hc) 65%,#000));
  color:#fff;font-weight:900;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.mm-ingredient .em{font-size:1.5rem;flex-shrink:0}
.mm-ingredient .txt{flex:1;font-size:.85rem;line-height:1.5;font-weight:700}
.mm-ingredient .txt b{color:var(--hc)}

.mm-formula{
  background:rgba(0,0,0,.2);
  border-radius:var(--r);
  padding:.55rem .85rem;
  text-align:center;font-weight:900;font-size:.92rem;
  margin-top:.65rem;line-height:1.7;
  position:relative;z-index:1;
  border:2px dashed rgba(255,255,255,.55);
}
.mm-formula .eq{font-size:1.15rem;display:block;margin-top:.18rem;letter-spacing:1px}

/* ─── COLORFUL STICKERS ─── */
.stickers{margin-top:.6rem}
.sticker{
  /* base reset — overridden by per-sticker color when earned */
  background:#fafafa;
  border:3px dashed #D0D0D0;
}
.sticker.earned{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--st-color,#E8A82F) 22%,#fff),
    color-mix(in srgb, var(--st-color,#E8A82F) 8%,#fff))!important;
  border:3px solid var(--st-color,#E8A82F)!important;
  box-shadow:0 5px 0 color-mix(in srgb, var(--st-color,#E8A82F) 40%,#fff),
             0 8px 18px rgba(40,20,10,.15);
}
.sticker.earned .em{
  filter:drop-shadow(0 2px 0 color-mix(in srgb, var(--st-color,#E8A82F) 65%,#000));
}
.sticker.earned .ttl{color:color-mix(in srgb, var(--st-color,#E8A82F) 75%,#000)}
.sticker.earned::after{background:var(--st-color,#4CAF50)!important}

/* Earned sticker also gets a colored ribbon on top */
.sticker.earned::before{
  content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:30px;height:14px;
  background:var(--st-color,#E8A82F);
  border-radius:0 0 12px 12px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}

/* ─── CERTIFICATE ─── */
.cert-card{
  position:relative;
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,.08) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #FFFEF5, #FFF8DC);
  border:5px double var(--hc);
  border-radius:var(--r-lg);
  padding:1.2rem 1rem;margin:.8rem 0;
  text-align:center;
  box-shadow:0 8px 24px rgba(40,20,10,.12);
  overflow:hidden;
}
.cert-card::before, .cert-card::after{
  content:'';position:absolute;width:50px;height:50px;
  border:3px solid var(--hc);
  opacity:.5;
}
.cert-card::before{top:8px;left:8px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.cert-card::after{bottom:8px;right:8px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.cert-ribbon{
  display:inline-flex;align-items:center;gap:.35rem;
  background:linear-gradient(135deg,#FFD56B,var(--gold));
  color:#fff;font-weight:900;font-size:.78rem;
  padding:.25rem .8rem;border-radius:0 0 1rem 1rem;
  position:relative;top:-1.2rem;margin-bottom:-.6rem;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.cert-h{
  font-size:1.4rem;font-weight:900;color:var(--hc);
  margin-top:.4rem;line-height:1.2;
  font-family:'Tajawal','Nunito',serif;
}
.cert-sub{font-size:.82rem;color:var(--ink-2);margin-top:.3rem;font-weight:700}
.cert-name-row{
  margin:1rem 0 .6rem;font-size:.95rem;color:var(--ink);
}
.cert-name{
  display:inline-block;
  min-width:200px;min-height:34px;
  border-bottom:2.5px dashed var(--hc);
  color:var(--hc);font-weight:900;font-size:1.2rem;
  padding:.15rem .55rem;outline:none;
  background:rgba(255,255,255,.7);
  border-radius:.4rem;
}
.cert-name:empty::before{content:'... اكتب اسمك هنا';color:#bbb;font-weight:400}
.cert-statement{
  font-size:.85rem;line-height:1.9;color:var(--ink-2);
  font-weight:600;margin:.4rem 0 .9rem;
}
.cert-statement b{color:var(--hc);font-weight:900}
.cert-seal{
  display:inline-block;
  width:84px;height:84px;border-radius:50%;
  border:3px solid var(--hc);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--hc) 22%,#fff),
    color-mix(in srgb,var(--hc) 10%,#fff));
  color:var(--hc);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:900;font-size:.65rem;text-align:center;line-height:1.1;
  margin:.6rem 0 .4rem;
  position:relative;
  transform:rotate(-8deg);
  box-shadow:0 4px 12px rgba(40,20,10,.1);
}
.cert-seal .em{font-size:1.6rem;margin-bottom:.05rem}
.cert-seal::before, .cert-seal::after{
  content:'';position:absolute;inset:5px;border-radius:50%;
  border:1.5px dashed var(--hc);opacity:.45;
}
.cert-sig{
  display:flex;justify-content:space-around;
  margin-top:.6rem;font-size:.7rem;color:var(--ink-3);font-weight:700;
}
.cert-sig .line{
  border-bottom:1.5px solid var(--hc);width:120px;height:18px;margin:0 auto .15rem;
}
.cert-actions{
  display:flex;gap:.5rem;margin-top:.7rem;justify-content:center;flex-wrap:wrap;
}
.cert-actions button{
  background:#fff;border:2px solid var(--hc);color:var(--hc);
  border-radius:1.5rem;padding:.36rem 1rem;font-weight:900;font-family:inherit;font-size:.85rem;
  display:inline-flex;align-items:center;gap:.35rem;
  cursor:pointer;transition:.18s;
}
.cert-actions button:hover{background:var(--hc);color:#fff}
.cert-actions button.primary{background:var(--hc);color:#fff}
.cert-actions button.primary:hover{filter:brightness(1.15)}
.cert-locked{
  background:#FFF3E0;border:2px dashed #FB8C00;color:#BF360C;
  border-radius:var(--r);padding:.7rem 1rem;font-weight:700;font-size:.85rem;
  text-align:center;
}

/* Print mode — show only certificate */
@media print {
  body * { visibility:hidden!important; }
  #printArea, #printArea * { visibility:visible!important; }
  #printArea {
    position:fixed!important;inset:0!important;
    padding:1cm!important;background:#fff!important;
  }
  .cert-card { box-shadow:none!important;margin:0!important }
}

/* ─── INTERACTIVE STORY READER (paginated) ─── */
.story-reader{
  /* Replaces inner layout with multi-step pages */
  align-items:flex-start;padding-top:2.5vh;padding-bottom:2.5vh;
}
.sr-box{
  /* taller for paginated reading */
  max-width:580px;display:flex;flex-direction:column;
}
.sr-progress{
  display:flex;gap:.3rem;
  padding:.55rem 1rem .25rem;
  background:color-mix(in srgb, var(--hc) 10%, #fff);
  border-bottom:1px solid color-mix(in srgb, var(--hc) 25%, #fff);
}
.sr-dot{
  flex:1;height:6px;border-radius:4px;background:#E0E0E0;
  transition:.3s;
}
.sr-dot.done{background:var(--hc)}
.sr-dot.current{background:var(--hc);box-shadow:0 0 0 3px color-mix(in srgb,var(--hc) 25%,#fff)}

/* Scene illustration (SVG container) */
.sr-scene{
  width:100%;height:170px;
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#A6E1FA,#FFE9A8 70%, #C6E5A0);
}
.sr-scene.scene-desert{background:linear-gradient(180deg,#FFE0B2,#FFB74D 70%, #D4A574)}
.sr-scene.scene-madinah{background:linear-gradient(180deg,#FFEBA0,#E8C97A 70%, #A78863)}
.sr-scene.scene-night{background:linear-gradient(180deg,#1A237E,#3949AB 70%, #0D1845)}
.sr-scene.scene-garden{background:linear-gradient(180deg,#B2EBF2,#A5D6A7 60%, #66BB6A)}
.sr-scene.scene-mosque{background:linear-gradient(180deg,#E8EAF6,#C5CAE9 70%, #7986CB)}
.sr-scene svg{width:100%;height:100%}
.sr-character{
  position:absolute;bottom:14px;left:50%;
  transform:translateX(-50%);
  font-size:3rem;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.18));
  animation:bob 3s ease-in-out infinite;
}

.sr-page{
  padding:1rem 1.1rem 1.2rem;
  flex:1;overflow-y:auto;
  animation:fadeUp .35s ease both;
}
.sr-page-num{
  display:inline-flex;align-items:center;gap:.3rem;
  background:color-mix(in srgb,var(--hc) 15%,#fff);
  color:var(--hc);font-weight:900;font-size:.72rem;
  padding:.15rem .55rem;border-radius:1rem;margin-bottom:.55rem;
}
.sr-page-text{
  font-size:1rem;line-height:2.05;color:var(--ink);font-weight:600;
}
.sr-page-text b{color:var(--hc);font-weight:900}
.sr-page-text em{color:#C62828;font-style:normal;font-weight:800}

.sr-narrate{
  display:inline-flex;align-items:center;gap:.3rem;
  background:#fff;border:2px solid var(--hc);color:var(--hc);
  border-radius:1.4rem;padding:.25rem .75rem;
  font-family:inherit;font-weight:800;font-size:.78rem;
  margin-bottom:.5rem;cursor:pointer;transition:.18s;
}
.sr-narrate:hover{background:var(--hc);color:#fff}
.sr-narrate.playing{background:var(--hc);color:#fff;animation:pulse 1.4s ease-in-out infinite}

/* Inline choice / question */
.sr-choice{
  background:linear-gradient(135deg, #FFF8E1, #FFECB3);
  border:2.5px dashed #FFB300;
  border-radius:var(--r);padding:.75rem .9rem;
  margin-top:.65rem;
}
.sr-choice .q{font-weight:900;color:#E65100;font-size:.92rem;margin-bottom:.45rem;display:flex;align-items:center;gap:.35rem}
.sr-choice .opt{
  display:block;width:100%;text-align:start;
  background:#fff;border:2px solid #FFB300;color:var(--ink);
  border-radius:var(--r);padding:.45rem .75rem;margin:.3rem 0;
  font-family:inherit;font-size:.86rem;font-weight:700;
  transition:.15s;cursor:pointer;
}
.sr-choice .opt:hover:not(:disabled){background:#FFF8E1}
.sr-choice .opt.ok{background:#E8F5E9;border-color:#4CAF50;color:#1B5E20}
.sr-choice .opt.bad{background:#FFEBEE;border-color:#E53935;color:#C62828;animation:shake .3s}

/* Footer with prev / next / progress */
.sr-foot{
  display:flex;align-items:center;gap:.5rem;
  padding:.6rem .9rem;
  border-top:2px solid color-mix(in srgb,var(--hc) 18%,#fff);
  background:#fff;
}
.sr-foot button{
  background:#fff;border:2px solid var(--hc);color:var(--hc);
  border-radius:1.4rem;padding:.35rem .9rem;font-weight:900;font-family:inherit;font-size:.85rem;
  display:inline-flex;align-items:center;gap:.25rem;
  cursor:pointer;transition:.18s;
}
.sr-foot button:hover:not(:disabled){background:var(--hc);color:#fff}
.sr-foot button:disabled{opacity:.4;cursor:default}
.sr-foot .grow{flex:1;text-align:center;font-size:.78rem;color:var(--ink-3);font-weight:800}
.sr-foot button.primary{background:var(--hc);color:#fff}
.sr-foot button.primary:hover{filter:brightness(1.15)}

/* End-of-story quiz screen */
.sr-quiz{padding:0 1rem}
.sr-quiz .q-hdr{
  text-align:center;font-size:1.05rem;font-weight:900;color:var(--hc);
  background:color-mix(in srgb,var(--hc) 14%,#fff);
  border-radius:var(--r);padding:.7rem;margin-bottom:.55rem;
  border:2.5px solid var(--hc);
}
.sr-quiz .q-row{margin:.5rem 0}
.sr-quiz .q-row .q{font-size:.92rem;font-weight:800;color:var(--ink);margin-bottom:.3rem}
.sr-quiz .opt-btn{font-size:.86rem}

/* Story moral overlay (at end) */
.sr-end{
  text-align:center;padding:1rem 1rem 1.2rem;
  animation:fadeUp .4s ease both;
}
.sr-end .em{font-size:3rem;animation:pop .55s cubic-bezier(.34,1.56,.64,1) both;display:block}
.sr-end h4{font-size:1.1rem;font-weight:900;color:var(--hc);margin-top:.3rem}
.sr-end .moral{
  background:linear-gradient(135deg,#FFF8E1,#FFECB3);
  border:2.5px solid #FFB300;border-radius:var(--r);
  padding:.7rem .9rem;margin:.8rem 0;
  font-size:.94rem;font-weight:800;color:#5D4037;line-height:1.7;
}
.sr-end .badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:linear-gradient(135deg,var(--hc),color-mix(in srgb,var(--hc) 65%,#000));
  color:#fff;font-weight:900;border-radius:2rem;
  padding:.45rem 1rem;font-size:.9rem;
  box-shadow:0 6px 0 color-mix(in srgb,var(--hc) 45%,#000);
}