/* ═══ الذاكرة 📸 (snap.js) — «عدسة الكاميرا» (٢٠٢٦/١٠/١٨) — تصميم خاصّ فيها
   الحفظ: شاشة كاميرا (زوايا الإطار، REC يومض، ISO) ⇒ غالق بستّ شرائح ينسكّر.
   الأسئلة: غرفة مظلمة بضوء أحمر والخيارات لقطات فيلم بفتحات جانبيّة. ═══ */
.sn{position:relative;overflow:hidden;font-weight:800;color:#fff;background:#0a0a0c}
.sn.show{background:radial-gradient(ellipse at 50% 50%,#1d2026,#07080a 75%)}
.sn.ask,.sn.dev{background:radial-gradient(ellipse at 50% 30%,#4a0d12 0%,#1a0507 55%,#070102 100%)}
.sn .xg-chip{background:#16181c;border:2px solid #3a3d44;font-family:'Courier New',Tajawal,monospace}
.sn .xg-title b{color:#fff;letter-spacing:.02em}
.sn .xg-title small{color:#c9ccd3}
.sn.ask .xg-title b,.sn.dev .xg-title b{color:#ffb3b8;text-shadow:0 0 2cqh rgba(255,40,60,.5)}
.sn-main{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}

/* عدسة الكاميرا */
.sn-vf{position:relative;height:100%;max-height:74cqh;aspect-ratio:4/3;max-width:92cqw;display:grid;place-items:center;padding:6cqh 5cqh;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.04),transparent 70%);border-radius:1.4cqh}
.sn-vf>.c{position:absolute;width:6cqh;height:6cqh;border:0 solid #fff;opacity:.9}
.sn-vf>.tl{top:1.4cqh;left:1.4cqh;border-top-width:.6cqh;border-left-width:.6cqh}
.sn-vf>.tr{top:1.4cqh;right:1.4cqh;border-top-width:.6cqh;border-right-width:.6cqh}
.sn-vf>.bl{bottom:1.4cqh;left:1.4cqh;border-bottom-width:.6cqh;border-left-width:.6cqh}
.sn-vf>.br{bottom:1.4cqh;right:1.4cqh;border-bottom-width:.6cqh;border-right-width:.6cqh}
.sn-rec{position:absolute;top:2.2cqh;inset-inline-end:9cqh;display:flex;align-items:center;gap:.6cqw;font-family:'Courier New',monospace;font-size:max(14px,2.6cqh);direction:ltr}
.sn-rec i{width:1.8cqh;height:1.8cqh;border-radius:50%;background:#ff2a3a;box-shadow:0 0 1.4cqh #ff2a3a;animation:snRec 1s steps(2) infinite}
@keyframes snRec{50%{opacity:.15}}
.sn-iso{position:absolute;bottom:2.2cqh;inset-inline-start:9cqh;font-family:'Courier New',monospace;font-size:max(12px,2cqh);color:#c9ccd3;direction:ltr}

/* الشبكة: خانات مرقّمة بلون ورمز */
.sn-grid{display:grid;grid-template-columns:repeat(var(--c),1fr);grid-template-rows:repeat(var(--r),1fr);gap:1.2cqh;width:100%;height:100%}
.sn-cell{position:relative;display:grid;place-items:center;border-radius:1.2cqh;background:var(--bg);box-shadow:inset 0 -.8cqh 0 rgba(0,0,0,.18),0 .6cqh 1.4cqh rgba(0,0,0,.4);
  animation:snIn .45s cubic-bezier(.2,1.4,.4,1) both}
.sn-cell:nth-child(3n+2){animation-delay:.05s}.sn-cell:nth-child(3n){animation-delay:.1s}
@keyframes snIn{from{transform:scale(.5);opacity:0}}
.sn-cell em{position:absolute;top:.6cqh;inset-inline-start:.8cqh;font-style:normal;font-weight:900;font-size:max(13px,2.4cqh);color:#fff;text-shadow:0 .2cqh .4cqh rgba(0,0,0,.6)}
.sn-cell b{font-size:min(9cqh,7cqw);line-height:1;filter:drop-shadow(0 .4cqh .4cqh rgba(0,0,0,.35))}

/* الغالق: ستّ شرائح تدور وتنسكّر */
.sn-shutter{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:1.4cqh}
.sn-shutter i{position:absolute;left:50%;top:50%;width:120%;height:120%;background:linear-gradient(135deg,#1a1c20,#2e3138);transform-origin:0 0;
  transform:rotate(calc(var(--k) * 60deg)) translate(-50%, -170%);opacity:0;transition:transform .45s cubic-bezier(.6,0,.4,1),opacity .15s;border-bottom:.3cqh solid #000}
.sn-shutter i:nth-child(1){--k:0}.sn-shutter i:nth-child(2){--k:1}.sn-shutter i:nth-child(3){--k:2}
.sn-shutter i:nth-child(4){--k:3}.sn-shutter i:nth-child(5){--k:4}.sn-shutter i:nth-child(6){--k:5}
.sn-vf.shut .sn-shutter i{transform:rotate(calc(var(--k) * 60deg)) translate(-50%, -50%);opacity:1}
.sn-vf.shut::after{content:"";position:absolute;inset:0;background:#fff;animation:snFlash .35s ease-out forwards;border-radius:1.4cqh}
@keyframes snFlash{from{opacity:.9}to{opacity:0}}

/* الغرفة المظلمة: السؤال + لقطات الفيلم */
.sn-dark{display:flex;flex-direction:column;align-items:center;gap:3cqh;width:100%}
.sn-q{font-size:max(26px,6.4cqh);font-weight:900;text-align:center;color:#fff;text-shadow:0 0 3cqh rgba(255,60,80,.5)}
.sn-film{display:flex;gap:0;padding:0 1cqw;background:#121214;border-radius:.6cqh;box-shadow:0 2cqh 5cqh rgba(0,0,0,.6)}
.sn-o{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqh;width:min(20cqw,34cqh);height:34cqh;margin:4cqh .6cqw;
  background:linear-gradient(180deg,#2a2c30,#1b1c20);border:.4cqh solid #3b3e45;transition:transform .3s,background .3s,opacity .3s}
.sn-o .holes{position:absolute;left:0;right:0;height:2.4cqh;background:repeating-linear-gradient(90deg,transparent 0 .8cqw,#fff3 .8cqw 1.8cqw);pointer-events:none}
.sn-o .holes:first-of-type{top:-3.4cqh}
.sn-o .holes:last-of-type{bottom:-3.4cqh}
.sn-o .k{position:absolute;top:1cqh;inset-inline-start:1cqh;display:grid;place-items:center;width:4.6cqh;height:4.6cqh;border-radius:50%;background:#ff3b4a;color:#fff;font-weight:900;font-size:max(16px,2.8cqh)}
.sn-o b{font-size:max(26px,9cqh);line-height:1}
.sn-o b.num{font-size:max(30px,10cqh);font-family:'Courier New',Tajawal,monospace;color:#ffe2a8}
.sn-o b.col{font-size:max(18px,3.6cqh);padding:1cqh 1.4cqw;border-radius:1cqh;background:var(--sw);color:#fff;text-shadow:0 .2cqh .4cqh rgba(0,0,0,.5)}
.sn-o .who{display:flex;align-items:center;gap:.4cqw;min-height:4cqh}
.sn-o .who u{text-decoration:none;font-size:max(13px,2.2cqh);color:#ffb3b8}
.sn-o.right{background:linear-gradient(180deg,#1e5a32,#123a20);border-color:#4cd97b;transform:scale(1.07);box-shadow:0 0 4cqh rgba(76,217,123,.5)}
.sn-o.wrong{opacity:.35;filter:grayscale(.7)}
.sn-n{font-size:max(16px,2.8cqh);color:#ffb3b8}
.sn-n b{color:#fff}

/* بين الصور: الصورة «تتحمّض» تحت الضوء الأحمر */
.sn-print{display:flex;flex-direction:column;align-items:center;gap:1.4cqh;height:100%;max-height:70cqh;aspect-ratio:4/3.3;padding:2.4cqh;background:#f2f0ea;border-radius:.6cqh;
  box-shadow:0 2cqh 5cqh rgba(0,0,0,.6);animation:snDev 2.4s ease-out both}
.sn-print small{color:#3a2a2a;font-size:max(14px,2.4cqh)}
@keyframes snDev{from{filter:sepia(1) brightness(.2) contrast(1.6)}to{filter:none}}

@container (max-aspect-ratio:1/1){
  .sn-vf{aspect-ratio:3/4;max-height:68cqh}
  .sn-film{flex-wrap:wrap;justify-content:center}
  .sn-o{width:40cqw;height:22cqh}
}
@media (prefers-reduced-motion:reduce){.sn-rec i{animation:none}}