/* ═══ رتّبها 🔢 (sortit.js) — «حبل الغسيل على السطح» (٢٠٢٦/١٠/٢١) — تصميم خاصّ فيها
   سطح بيت نجدي وقت المغرب، حبل غسيل مايل عليه ٤ بطاقات ورق بمشابك خشب تتمرجح.
   الكشف: البطاقات تنشال وتنعلّق بالترتيب الصحيح وحدة وحدة، وتحت كلّ وحدة قيمتها ونسبة اللي حطّوها صح. ═══ */
.so{position:relative;overflow:hidden;font-weight:800;color:#fff;background:#2a2347}
.so>.xg-head,.so>.so-main{position:relative;z-index:2}
.so-sky{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 78% 70%,rgba(255,214,140,.95) 0 6cqh,rgba(255,170,90,.35) 9cqh,transparent 26cqh),
    linear-gradient(180deg,#2b2a5c 0%,#5b4a8e 34%,#c46b7a 62%,#ff9a5c 82%,#ffc477 100%)}
.so-sky::after{content:"";position:absolute;inset:0 0 40% 0;opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 31% 9%,#fff 50%,transparent),
    radial-gradient(1px 1px at 52% 22%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 67% 12%,#fff 50%,transparent),radial-gradient(1px 1px at 88% 26%,#fff 50%,transparent)}
/* جدار السطح بالشرفات النجديّة (مثلّثات) */
.so-roof{position:absolute;left:0;right:0;bottom:0;height:17cqh;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#c99a6b,#a87a4f 60%,#8c6440)}
.so-roof::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:4.6cqh;
  background:linear-gradient(135deg,transparent 50%,#c99a6b 50%) 0 0/4.6cqh 4.6cqh repeat-x,linear-gradient(225deg,transparent 50%,#c99a6b 50%) 0 0/4.6cqh 4.6cqh repeat-x}
.so-roof::after{content:"";position:absolute;left:0;right:0;top:3cqh;height:.6cqh;background:rgba(80,50,25,.35)}
.so .xg-chip{background:rgba(30,22,50,.75);border:2px solid rgba(255,200,140,.55)}
.so .xg-title b{color:#fff;text-shadow:0 .3cqh 1.4cqh rgba(40,20,60,.6)}
.so .xg-title small{color:#ffe3c2;font-size:max(14px,2.6cqh)}
.so-main{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:1.4cqh}

/* الحبل والأعمدة */
.so-line{position:relative;flex:1 1 auto;min-height:0;margin:0 3cqw}
.so-line::before,.so-line::after{content:"";position:absolute;top:0;width:1.6cqh;height:62cqh;max-height:100%;background:linear-gradient(90deg,#6b4a2b,#8a6238 50%,#5a3d22);border-radius:.6cqh;z-index:0}
.so-line::before{right:-1.6cqh}.so-line::after{left:-1.6cqh}
.so-rope{position:absolute;left:0;right:0;top:1cqh;width:100%;height:16cqh;overflow:visible;z-index:1}
.so-rope path{fill:none;stroke:#f3e6cf;stroke-width:3.2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}
.so-end{position:absolute;top:-1.2cqh;z-index:3;font-size:max(13px,2.4cqh);font-weight:900;color:#1d1633;background:#ffd28a;padding:.4cqh 1.4cqh;border-radius:99px;box-shadow:0 .4cqh 1cqh rgba(0,0,0,.3)}
.so-end.r{right:1cqw}.so-end.l{left:1cqw}

/* البطاقات: ورق معلّق بمشبك، تتبع ميلان الحبل (الطرفين أعلى) */
.so-cards{position:absolute;inset:0;display:flex;justify-content:space-around;align-items:flex-start;z-index:2;padding:0 1cqw}
.so-card{--dy:7.2cqh;position:relative;width:22%;max-width:36cqh;min-height:24cqh;margin-top:var(--dy);padding:5cqh 1.6cqh 2.4cqh;border-radius:1.2cqh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fffaf0,#f6ead2);color:#3a2817;text-align:center;
  box-shadow:0 1.2cqh 2.4cqh rgba(20,10,30,.35),inset 0 -.6cqh 0 rgba(150,110,60,.18);
  transform-origin:50% -2cqh;animation:soSwing 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.7s)}
.so-card:nth-child(1),.so-card:nth-child(4){--dy:4.4cqh}
@keyframes soSwing{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.so-card .peg{position:absolute;top:-2.6cqh;left:50%;width:2.4cqh;height:5.4cqh;margin-left:-1.2cqh;border-radius:.5cqh;
  background:linear-gradient(90deg,#b98a55,#e2b880 45%,#a87843);box-shadow:0 .3cqh .5cqh rgba(0,0,0,.35)}
.so-card .peg::after{content:"";position:absolute;left:0;right:0;top:45%;height:.5cqh;background:#7a7f86}
.so-card em{position:absolute;top:-1.6cqh;inset-inline-start:-1.4cqh;width:7.6cqh;height:7.6cqh;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-weight:900;font-size:max(22px,5cqh);color:#fff;background:radial-gradient(circle at 35% 30%,#ffb066,#ff7a2e 60%,#d9541a);
  border:.45cqh solid #fff;box-shadow:0 .5cqh 1.2cqh rgba(0,0,0,.35);direction:ltr}
.so-card b{display:block;font-weight:900;font-size:max(18px,min(5.6cqh,3.6cqw));line-height:1.18;overflow-wrap:anywhere}
.so-card.big b{font-size:max(34px,11cqh);line-height:1;color:#5a2b7a}
.so-card.math b{direction:ltr;font-size:max(22px,min(6cqh,4.2cqw));color:#22406e}
.so-val{display:block;margin-top:1.2cqh;padding:.6cqh 1cqh;border-radius:.8cqh;background:#3a2a5c;color:#ffe08a;text-decoration:none;font-weight:900;font-size:max(15px,3.2cqh)}
.so-pct{display:block;margin-top:.8cqh;text-decoration:none;font-weight:800;font-size:max(12px,2.2cqh);color:#7a5a3a;min-height:1em}

/* الكشف */
.so.rev .so-card{animation:none}
.so-card.wait{opacity:.2;transform:translateY(-3cqh) scale(.92)}
.so-card.in{animation:soIn .55s cubic-bezier(.2,1.5,.4,1) both,soSwing 3.4s ease-in-out .6s infinite alternate}
@keyframes soIn{from{opacity:.2;transform:translateY(-6cqh) rotate(-8deg) scale(.9)}to{opacity:1;transform:none}}
.so.rev .so-card.in{box-shadow:0 1.2cqh 2.4cqh rgba(20,10,30,.35),0 0 0 .5cqh #6ee08a}

/* الأسفل: الشرح، أكثر الترتيبات، العدد */
.so-foot{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1cqh;padding-bottom:1.6cqh}
.so-how,.so-ans{font-size:max(15px,3cqh);font-weight:900;color:#fff;background:rgba(30,20,50,.7);padding:.9cqh 2.4cqh;border-radius:99px;text-align:center}
.so-how b,.so-ans b{color:#ffd28a}
.so-ans b{font-size:1.35em;letter-spacing:.25em;margin-inline-start:.5em}
.so-top{display:flex;gap:1.2cqw;min-height:5cqh;align-items:center}
.so-chip{display:inline-flex;align-items:center;gap:.6cqw;background:#fffaf0;color:#3a2817;border-radius:1cqh;padding:.5cqh 1.4cqh;font-weight:900;font-size:max(15px,3cqh);box-shadow:0 .4cqh 1cqh rgba(0,0,0,.3)}
.so-chip b{letter-spacing:.12em}.so-chip i{font-style:normal;color:#c2561e}
.so-n{font-size:max(13px,2.5cqh);color:#ffe3c2}.so-n b{color:#fff}
.so-full{display:flex;align-items:center;gap:1cqw;flex-wrap:wrap;justify-content:center;font-size:max(14px,2.8cqh);font-weight:900;background:rgba(30,20,50,.7);padding:.8cqh 2cqh;border-radius:1.4cqh}
.so-full b{color:#6ee08a;font-size:1.2em}.so-full em{font-style:normal;color:#ffd28a}

/* الطولي: البطاقات أعرض والخطّ أصغر */
@media (orientation:portrait){
  .so-card{width:23%;padding:3.4cqh .8cqh 1.6cqh}
  .so-card b{font-size:max(14px,2.6cqh)}
  .so-end{font-size:max(11px,1.8cqh)}
}
body.perf-lite .so-card{animation:none}