/* «خمّن المشهور» — السجّادة الحمرا (٢٠٢٦/١٠/١٦ بطلب المالك: «التصميم حق الصفحة يبيله جديد»).
   شكل فقط. الحركة بـtransform للعناصر الصغيرة (الكشّافات) — الخلفيّة ثابتة. */
.sx{--gold:#ffcf5a;--gold2:#fff1c1;--red:#d3142c;--good:#34d77b;--bad:#ff5a6e;--edge:rgba(255,207,90,.35);
  position:relative;container-type:size;width:100%;height:100%;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:2cqh;padding:2.2cqh 2.4cqw 2.4cqh;color:#fff;font-weight:800;
  background:radial-gradient(60% 55% at 50% 30%,#4a1838 0%,#22081e 55%,#0c0410 100%)}
.sx > :not(.sx-beam):not(.sx-carpet){position:relative;z-index:1}
/* كشّافات تتمرجح + سجّادة حمرا تحت الصورة */
.sx-beam{position:absolute;top:-10%;width:28cqw;height:120%;z-index:0;pointer-events:none;opacity:.5;
  background:linear-gradient(180deg,rgba(255,236,190,.55),rgba(255,236,190,0) 75%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);transform-origin:50% 0}
.sx-beam.l{left:8cqw;animation:sxSwing 7s ease-in-out infinite alternate}
.sx-beam.r{right:8cqw;animation:sxSwing 8s ease-in-out infinite alternate-reverse}
.sx-photo{position:relative}
.sx-carpet{position:absolute;z-index:-1;left:50%;bottom:-3cqh;width:min(100%,50cqw);height:42cqh;transform:translateX(-50%) perspective(60cqh) rotateX(58deg);transform-origin:50% 100%;
  background:linear-gradient(90deg,#7a0616,#d3142c 12%,#e3263d 50%,#d3142c 88%,#7a0616);box-shadow:0 0 0 1cqh #ffcf5a55;pointer-events:none}

/* الرأس */
.sx-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2cqw}
.sx-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.6cqh 1.6cqw;border-radius:2cqh;
  background:rgba(255,255,255,.07);border:2px solid var(--edge);font-size:max(13px,2.2cqh)}
.sx-chip small{font-weight:900;color:var(--gold)}
.sx-chip b{font-size:max(22px,4.6cqh);line-height:1}
.sx-chip b i{font-style:normal;font-size:.55em;opacity:.7}
.sx-ask{text-align:center;display:flex;flex-direction:column;gap:.4cqh}
.sx-ask b{font-size:clamp(28px,8cqh,82px);line-height:1;color:#fff;text-shadow:0 .5cqh 0 #7a0616,0 0 4cqh rgba(255,90,120,.45)}
.sx-ask i{font-style:normal;font-size:max(14px,2.5cqh);font-weight:900;color:var(--gold2)}
.sx-clock{background:conic-gradient(var(--gold) calc(var(--p) * 360deg),rgba(255,255,255,.1) 0)}
.sx-clock::before{background:#1a0716;box-shadow:inset 0 0 0 2px var(--edge)}

/* الوسط: الصورة + قائمة اللي عرفوه */
.sx-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,24cqw,380px);gap:2.4cqw;min-height:0}
.sx-photo{isolation:isolate;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqh}
.sx .st-lens{position:relative;flex:1 1 auto;min-height:0;height:auto;max-height:100%;aspect-ratio:4/5;max-width:100%;border-radius:3cqh;overflow:hidden;
  background:#120510;box-shadow:0 0 0 .7cqh var(--gold),0 0 0 1.3cqh #7a4a10,0 3cqh 6cqh rgba(0,0,0,.6),0 0 8cqh rgba(255,207,90,.25)}
.sx .st-lens canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sx .st-lens::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 6cqh rgba(0,0,0,.55)}
.sx .st-kind{position:absolute;top:1.6cqh;inset-inline-start:1.6cqh;z-index:3;padding:.5em 1em;border-radius:999px;font-weight:900;font-size:max(13px,2.3cqh);
  background:rgba(14,4,12,.78);border:2px solid var(--edge);backdrop-filter:blur(4px)}
.sx .st-name{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:8cqh 2cqh 2.4cqh;text-align:center;
  background:linear-gradient(0deg,rgba(10,2,8,.95),rgba(10,2,8,0));transform:translateY(100%);transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.sx .st-name.on{transform:none}
.sx .st-name small{display:block;font-weight:900;font-size:max(13px,2.4cqh);color:var(--gold)}
.sx .st-name b{display:block;font-weight:900;font-size:clamp(26px,6.2cqh,64px);line-height:1.1;color:#fff}
.sx .st-lens.done{animation:sxFlash .9s ease-out}

/* شريط الوضوح أفقي تحت الصورة */
.sx-meter{flex:0 0 auto;width:min(100%,62cqh);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4cqw;
  padding:1cqh 1.6cqw;border-radius:999px;background:rgba(14,4,12,.72);border:2px solid var(--edge)}
.sx-mlbl,.sx-now{font-size:max(13px,2.3cqh);font-weight:900;white-space:nowrap}
.sx-mlbl b{color:#fff;font-size:1.15em}
.sx-now{color:var(--gold2)}
.sx-now b{font-size:1.5em;color:var(--gold);direction:ltr;display:inline-block}
.sx-tube{height:max(10px,1.8cqh);border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.sx-tube i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#ff5a6e,#ffcf5a 55%,#34d77b)}

/* اللي عرفوه */
.sx-hits{min-height:0;display:flex;flex-direction:column;gap:1.2cqh;padding:2cqh 1.4cqw;border-radius:2.6cqh;overflow:hidden;
  background:rgba(14,4,12,.7);border:2px solid var(--edge);backdrop-filter:blur(6px)}
.sx-hits h4{margin:0;text-align:center;font-size:max(17px,3.4cqh);font-weight:900;color:var(--gold)}
.sx-hits #stHits{display:flex;flex-direction:column;gap:1cqh;min-height:0;overflow:hidden}
.sx .st-empty{margin:0;text-align:center;font-size:max(13px,2.3cqh);font-weight:900;color:#e9c9d6;line-height:1.6}
.sx .st-hit{display:flex;align-items:center;gap:.8cqw;padding:1cqh .8cqw;border-radius:1.8cqh;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.08)}
.sx .st-hit:first-child{background:linear-gradient(90deg,rgba(255,207,90,.28),rgba(255,207,90,.08));border-color:var(--gold)}
.sx .st-hit.new{animation:sxIn .45s cubic-bezier(.2,1.4,.4,1)}
.sx .st-rk{flex:0 0 auto;width:max(24px,4cqh);height:max(24px,4cqh);border-radius:50%;display:grid;place-items:center;font-size:max(12px,2.2cqh);font-weight:900;background:rgba(255,255,255,.14)}
.sx .st-hit:first-child .st-rk{background:linear-gradient(135deg,#fff1c1,#ffcf5a);color:#2a1900}
.sx .st-hit .av{width:max(30px,5.4cqh)!important;height:max(30px,5.4cqh)!important}
.sx .st-nm{flex:1;min-width:0;font-weight:900;font-size:max(15px,2.8cqh);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx .st-nm small{display:block;font-size:.72em;color:#e9c9d6;font-weight:900}
.sx .st-pt{font-weight:900;font-size:max(16px,3cqh);color:var(--gold);direction:ltr}

@keyframes sxSwing{0%{transform:rotate(-14deg)}100%{transform:rotate(14deg)}}
@keyframes sxFlash{0%{filter:brightness(2.2)}100%{filter:brightness(1)}}
@keyframes sxIn{0%{transform:translateX(30%);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sx-beam{animation:none}}

/* طولي/جوال: القائمة تحت الصورة */
@container (max-aspect-ratio: 1/1){
  .sx-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .sx-hits{max-height:26cqh}
  .sx-head{grid-template-columns:auto 1fr auto}
}