/* «تحدي المعلومات» — مسرح المسابقة (٢٠٢٦/١٠/١٦ بطلب المالك: ألعاب الأسئلة كلّ وحدة بشكلها).
   كلّ رقم له لون وشكل ثابت (١ مثلّث · ٢ معيّن · ٣ دائرة · ٤ مربّع) عشان المتابع يعرفه من جواله المصغّر.
   الحركة بـtransform بس — لا تحرّك background/filter على عناصر كبيرة (فخّ موسم الصقر). */
.g-wrap:has(.tq) > .g-top,
.g-wrap:has(.tq) > .g-how,
.g-wrap:has(.tq) > #gtimer{display:none}
.g-wrap:has(.tq) > .g-body{align-items:stretch;justify-content:stretch;padding:0;gap:0;max-width:none;width:100%}

.tq{--c1:#ff4d5e;--c1d:#b8162a;--c2:#3d8bff;--c2d:#1747b3;--c3:#ffb21f;--c3d:#b86e00;--c4:#a463ff;--c4d:#5d23b8;
  position:relative;flex:1 1 auto;min-height:0;width:100%;overflow:hidden;container-type:size;
  display:grid;grid-template-rows:auto minmax(0,1.05fr) minmax(0,1.5fr) auto;gap:2.4cqh;padding:2.6cqh 3cqw 2.2cqh;
  border-radius:18px;color:#fff;font-weight:800;
  background:radial-gradient(90% 70% at 50% 0%,#2b3f9c 0%,#16205a 45%,#0a0f2e 100%)}
/* أشعّة استوديو ثابتة + أرضيّة لامعة */
.tq-rays{position:absolute;inset:-20% -10% 30%;pointer-events:none;opacity:.55;
  background:repeating-conic-gradient(from 0deg at 50% 0%,rgba(140,190,255,.10) 0 4deg,transparent 4deg 13deg);
  -webkit-mask:radial-gradient(70% 90% at 50% 0%,#000 30%,transparent 75%);mask:radial-gradient(70% 90% at 50% 0%,#000 30%,transparent 75%)}
.tq::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;
  background:linear-gradient(0deg,rgba(80,120,255,.18),transparent)}
.tq > :not(.tq-rays){position:relative;z-index:1}

/* الرأس: رقم السؤال · نقاط التقدّم · الساعة */
.tq-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2cqw}
.tq-num{justify-self:start;display:flex;align-items:baseline;gap:.35em;font-size:max(16px,3cqh);font-weight:900;
  padding:.35em .9em;border-radius:999px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.14)}
.tq-num b{font-size:1.5em;color:var(--star);line-height:1}
.tq-num small{font-size:.8em;font-weight:800;opacity:.75}
.tq-dots{display:flex;gap:.7cqw;justify-content:center}
.tq-dots i{width:max(10px,1.6cqh);height:max(10px,1.6cqh);border-radius:50%;background:rgba(255,255,255,.18)}
.tq-dots i.d{background:var(--star);opacity:.75}
.tq-dots i.n{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25);transform:scale(1.25)}
.tq-clock{justify-self:end;position:relative;width:max(64px,12cqh);aspect-ratio:1;display:grid;place-items:center;--p:1}
.tq-clock svg{position:absolute;inset:0;transform:rotate(-90deg)}
.tq-clock circle{fill:none;stroke-width:9}
.tq-clock .bg{stroke:rgba(255,255,255,.14);fill:rgba(6,10,36,.6)}
.tq-clock .fg{stroke:var(--star);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p) * 100);transition:stroke-dashoffset 1s linear,stroke .3s}
.tq-clock b{font-size:max(26px,5.2cqh);font-weight:900;line-height:1}
.tq-clock.warn .fg{stroke:#ff5a66}
.tq-clock.warn b{color:#ff8a93;animation:tqBeat 1s ease-in-out infinite}
.tq.done .tq-clock{opacity:.35}

/* لوحة السؤال */
.tq-q{display:grid;place-items:center;min-height:0;padding:2cqh 4cqw;border-radius:2.6cqh;text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,#e9eeff 100%);color:#121a4a;
  box-shadow:0 1cqh 0 #8e9be0,0 2.4cqh 5cqh rgba(0,0,0,.45);animation:tqIn .5s cubic-bezier(.3,1.4,.5,1) backwards}
.tq-q span{font-size:clamp(20px,6.4cqh,64px);font-weight:900;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* الخيارات ٢×٢ */
.tq-opts{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2cqh 2cqw;min-height:0}
.tq-o{--c:var(--c1);--cd:var(--c1d);position:relative;overflow:hidden;min-height:0;display:flex;align-items:center;gap:1.6cqw;
  padding:0 2cqw 0 1.4cqw;border-radius:2.2cqh;background:var(--c);box-shadow:0 .9cqh 0 var(--cd),0 1.6cqh 3cqh rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .35s;animation:tqIn .45s cubic-bezier(.3,1.4,.5,1) backwards}
.tq-o[data-i="1"]{--c:var(--c2);--cd:var(--c2d);animation-delay:.06s}
.tq-o[data-i="2"]{--c:var(--c3);--cd:var(--c3d);animation-delay:.12s}
.tq-o[data-i="3"]{--c:var(--c4);--cd:var(--c4d);animation-delay:.18s}
.tq-o .bar{position:absolute;bottom:0;height:max(5px,1cqh);inset-inline-start:0;width:0;border-radius:0 999px 999px 0;background:rgba(255,255,255,.85);box-shadow:0 0 1.4cqh rgba(255,255,255,.6);transition:width .4s ease;pointer-events:none}
.tq-o > :not(.bar){position:relative;z-index:1}
.tq-k{flex:0 0 auto;position:relative;height:min(max(46px,10cqh),74%);aspect-ratio:1;display:grid;place-items:center}
.tq-k .sh{position:absolute;inset:0;background:rgba(255,255,255,.95)}
.tq-o[data-i="0"] .sh{clip-path:polygon(50% 6%,96% 90%,4% 90%)}
.tq-o[data-i="1"] .sh{clip-path:polygon(50% 2%,98% 50%,50% 98%,2% 50%)}
.tq-o[data-i="2"] .sh{border-radius:50%;inset:6%}
.tq-o[data-i="3"] .sh{inset:9%;border-radius:12%}
.tq-k b{position:relative;font-size:max(20px,4.6cqh);font-weight:900;color:var(--cd);line-height:1}
.tq-o[data-i="0"] .tq-k b{transform:translateY(18%)}
.tq-t{flex:1 1 auto;min-width:0;font-size:clamp(17px,4.8cqh,48px);font-weight:900;line-height:1.2;
  text-shadow:0 .3cqh 0 rgba(0,0,0,.25);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tq-who{flex:0 0 auto;display:flex;align-items:center;gap:.8cqw}
.tq-who .c{min-width:1.9em;padding:.15em .45em;border-radius:999px;text-align:center;font-size:max(15px,3cqh);font-weight:900;
  background:rgba(0,0,0,.28)}
.tq-o:not(.hasvotes) .tq-who .c{opacity:.55}
.tq-who .oav .av{width:max(28px,5.4cqh);height:max(28px,5.4cqh)}

/* الكشف: الصحيح يكبر ويلمع، الغلط يبهت */
.tq-o.wrong{opacity:.28;transform:scale(.96)}
.tq-o.right{transform:scale(1.04);z-index:2;box-shadow:0 .9cqh 0 var(--cd),0 0 0 .7cqh #fff,0 0 6cqh rgba(255,255,255,.55)}
.tq-o.right::after{content:'✓';position:absolute;z-index:2;top:50%;inset-inline-end:-.1em;transform:translateY(-50%);
  font-size:min(16cqh,120px);font-weight:900;color:rgba(255,255,255,.22);line-height:1;pointer-events:none}

.tq-foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;font-size:max(15px,2.7cqh);font-weight:900}
.tq-foot span{opacity:.9}
.tq-foot span b,.tq-foot em b{color:var(--star)}
.tq-foot em{font-style:normal;padding:.3em .9em;border-radius:999px;background:rgba(255,255,255,.08)}

@keyframes tqIn{0%{transform:scale(.8) translateY(2cqh);opacity:0}100%{transform:none;opacity:1}}
@keyframes tqBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* شاشة ضيّقة (جوال/عمودي): الخيارات عمود واحد */
@container (max-aspect-ratio: 1/1){
  .tq{grid-template-rows:auto minmax(0,.8fr) minmax(0,2fr) auto}
  .tq-opts{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);gap:1.4cqh}
  .tq-dots{display:none}
}