/* الألعاب الأربع الجديدة — arcade.js (2026-10-14). مسطّحة: بلا ظلال */

.game-new {
  position:absolute; top:12px; inset-inline-start:12px;
  background:var(--brand-500); color:#fff; font-size:var(--fs-xs); font-weight:800;
  padding:2px 12px; border-radius:999px;
}

/* اختيار المجموعة */
.arc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s4); }
.arc-chip {
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-size:var(--fs-xs); font-weight:700;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--border); background:var(--surface); color:var(--ink-soft);
}
.arc-chip:hover { border-color:var(--brand-400); }
.arc-chip.on { background:var(--brand-500); border-color:var(--brand-500); color:#fff; }
.arc-chip svg { width:15px; height:15px; }

/* التخطيط: المشهد بجوار السؤال على الشاشة العريضة */
.arc-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--s3); align-items:start; }
@media (max-width: 900px) { .arc-grid { grid-template-columns:1fr; } }
.arc-stage { padding:var(--s3); overflow:hidden; }
.arc-svg { display:block; width:100%; height:auto; border-radius:16px; }

.arc-names { display:grid; gap:6px; margin-top:8px; }
.arc-names span { direction:rtl;
  text-align:center; font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft);
  padding:6px 4px; border-radius:12px; border:1.5px solid transparent; line-height:1.4;
}
.arc-names span b { display:block; color:var(--pc); font-size:var(--fs-md); }
.arc-names span.on { border-color:var(--pc); background:color-mix(in srgb, var(--pc) 9%, transparent); color:var(--ink); }

/* صاحب الدور */
.arc-turn {
  display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3);
  padding:var(--s3); border-radius:16px;
  background:color-mix(in srgb, var(--pc) 8%, var(--surface)); border:1.5px solid var(--pc);
}
.arc-dot { width:16px; height:16px; border-radius:50%; background:var(--pc); flex:none; }
.arc-who { font-size:var(--fs-xl); color:var(--pc); }

/* الصواريخ */
.rk { transition:transform .9s cubic-bezier(.3,1.4,.5,1); }
.rk-flame { transform-origin:0 30px; animation:rkFlame .18s infinite alternate; }
.rk:not(.is-turn) .rk-flame { opacity:.35; animation:none; }
@keyframes rkFlame { from { transform:scaleY(.75); } to { transform:scaleY(1.15); } }
.tw-star { animation:twinkle 2.4s infinite ease-in-out; }
@keyframes twinkle { 50% { fill-opacity:.15; } }

/* هزّة الخطأ */
.is-shake { animation:arcShake .45s; }
@keyframes arcShake {
  20% { translate:-6px 0; } 40% { translate:6px 0; } 60% { translate:-4px 0; } 80% { translate:3px 0; }
}

/* الخزنة */
.arc-vaults { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
@media (max-width: 640px) { .arc-vaults { grid-template-columns:1fr; } }
.vt { text-align:center; padding:var(--s3); border-radius:18px; border:2px solid transparent; }
.vt.is-turn { border-color:var(--pc); background:color-mix(in srgb, var(--pc) 6%, transparent); }
.vt h3 { color:var(--pc); margin:0 0 2px; }
.vt-box { position:relative; perspective:900px; height:220px; max-width:300px; margin:0 auto;
          border-radius:18px; background:#f5efe1; border:3px solid var(--pc); overflow:hidden; }
.vt-gold { position:absolute; inset:30px 20px 10px; display:grid; place-items:end center; }
.vt-gold svg { width:100%; }
.vt-door {
  position:absolute; inset:0; background:var(--pc); transform-origin:left center;
  display:grid; place-items:center; align-content:center; gap:12px;
  transition:transform 1.2s cubic-bezier(.5,0,.2,1);
}
.vt.is-open .vt-door { transform:rotateY(-105deg); }
.vt-dial { width:84px; height:84px; }
.vt-handle { transform-origin:40px 40px; transition:transform .8s; }
.vt.is-turn .vt-handle { animation:dialIdle 6s linear infinite; }
@keyframes dialIdle { to { transform:rotate(360deg); } }
.vt-code { display:flex; gap:8px; direction:ltr; }
.vt-code span {
  width:40px; height:48px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff; font-size:26px; font-weight:800;
  border:2px dashed rgba(255,255,255,.4);
}
.vt-code span.on { background:#fff; color:var(--pc); border-style:solid; border-color:#fff; }
.vt-code span.spin { animation:digitSpin .7s; }
@keyframes digitSpin { from { transform:rotateX(360deg) scale(.6); } to { transform:none; } }

/* شدّ الحبل */
.tg-rope, .tg-team { transition:transform .8s cubic-bezier(.3,1.3,.5,1); }
.tg-fig.is-pull { animation:pull .5s; }
@keyframes pull { 50% { translate:0 4px; } }

/* البرج */
.tw-drop { animation:twDrop .6s cubic-bezier(.3,1.5,.5,1); }
@keyframes twDrop { from { translate:0 -140px; opacity:0; } }
.tw-fall { animation:twFall .8s forwards ease-in; }
@keyframes twFall { to { translate:60px 260px; rotate:35deg; opacity:0; } }

/* الفوز */
.arc-win { position:relative; overflow:hidden; text-align:center; padding:var(--s6) var(--s4); border-color:var(--brand-500); }
.arc-win h2 { color:var(--brand-500); margin:var(--s2) 0; }
.arc-trophy { width:140px; height:140px; animation:trophyUp 1s cubic-bezier(.3,1.5,.5,1); }
@keyframes trophyUp { from { translate:0 60px; scale:.4; opacity:0; } }
.arc-win-names { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:var(--s2) 0; }
.arc-win-names b { background:var(--brand-50); color:var(--brand-500); padding:6px 16px; border-radius:999px; font-size:var(--fs-md); }
.arc-confetti { position:absolute; inset:0; pointer-events:none; }
.arc-confetti i {
  position:absolute; top:-20px; left:var(--x); width:10px; height:16px; border-radius:3px;
  background:var(--k); rotate:var(--r); animation:conf 2.8s var(--d) ease-in forwards;
}
@keyframes conf { to { translate:0 520px; rotate:calc(var(--r) + 540deg); opacity:.2; } }

@media (prefers-reduced-motion: reduce) {
  .rk, .tg-rope, .vt-door, .rk-flame, .tw-star, .is-shake, .tw-drop, .tw-fall,
  .arc-trophy, .arc-confetti i, .vt-handle, .vt-code span { animation:none !important; transition:none !important; }
}

/* شدّ الحبل: زرّا «من رفع يده أوّلًا» */
.tg-buzz { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.tg-side {
  font:inherit; cursor:pointer; padding:14px; border-radius:16px;
  border:2px solid var(--pc); background:color-mix(in srgb, var(--pc) 7%, var(--surface));
  color:var(--ink); display:grid; gap:2px; text-align:center;
}
.tg-side b { color:var(--pc); font-size:var(--fs-md); }
.tg-side.on { background:var(--pc); }
.tg-side.on b, .tg-side.on span { color:#fff; }