/* حركات «سين جيم» (js/sj-fx.js) — المسرح، وكلمات المواجهة والشعار، وقلم رسم اللوحة، وحجب النتيجة حتى الكشف.
   الحركة كلّها Web Animations من المخرج؛ هنا الهيئة الثابتة فقط. المسرح شفّاف فوق أرضيّة الصفحة: لا خلفيّة ولا وهج. */

.sj-fx-stage{
  --sjfx-shadow:rgba(91,74,31,.22); --sjfx-gold-face:#b08a32; --sjfx-gold-deep:#6e5418;
  position:fixed; inset:0; z-index:50; display:grid; place-items:center; overflow:hidden; cursor:pointer;
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
}
:root.dark .sj-fx-stage{ --sjfx-shadow:rgba(0,0,0,.55); --sjfx-gold-face:#dcb75c; --sjfx-gold-deep:#7a5a16; }
.sj-fx-shake{ display:grid; place-items:center; width:100%; pointer-events:none; }

/* صفّ المواجهة: عمودان متساويان حول الشعار ⇒ الشعار في المنتصف تماماً أيّاً كان طول الكلمتين، وكلّ كلمة تلاصقه.
   في RTL العمود الأوّل يمين: نهايته (يساره) عند الشعار، وبداية الثالث (يمينه) عنده كذلك */
.sj-fx-row{
  --sjfx-size:clamp(40px, calc(10.5 * var(--vw, 1vw)), 150px);
  position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center;
  column-gap:.22em; width:100%; padding-inline:16px; font-size:var(--sjfx-size);
}
.sj-fx-word{
  font-family:"Alexandria", var(--font); font-weight:900; line-height:1.15; white-space:nowrap; color:var(--c); padding:0 .06em;
  text-shadow:0 .035em 0 var(--d), 0 .05em 0 var(--d), 0 .065em 0 var(--d), 0 .08em 0 var(--d), 0 .14em .18em var(--sjfx-shadow);
}
.sj-fx-r{ justify-self:end; }
.sj-fx-l{ justify-self:start; }
.sj-fx-ink{ --c:var(--ink); --d:var(--sjfx-gold-deep); }
.sj-fx-gold{ --c:var(--sjfx-gold-face); --d:var(--sjfx-gold-deep); }
.sj-fx-t1{ --c:var(--t1); --d:var(--t1-deep); }
.sj-fx-t2{ --c:var(--t2); --d:var(--t2-deep); }
.sj-fx-logo{ width:1.15em; aspect-ratio:1; display:block; filter:drop-shadow(0 .08em .12em var(--sjfx-shadow)); }
.sj-fx-logo-svg{ width:100%; height:100%; display:block; overflow:visible; }
/* خطّا الاصطدام الذهبيّان فوق الصفّ وتحته: يمتدّان من المنتصف ثمّ يخبوان */
.sj-fx-rule{ position:absolute; inset-inline:14%; height:2px; background:var(--gold); }
.sj-fx-rule.top{ top:-.1em; }
.sj-fx-rule.bottom{ bottom:-.1em; }
.sj-fx-stamp{
  grid-column:1 / -1; justify-self:center; margin-top:.12em; font-size:.6em;
  font-family:"Alexandria", var(--font); font-weight:900; line-height:1.1; color:var(--c);
  text-shadow:0 .035em 0 var(--d), 0 .055em 0 var(--d), 0 .075em 0 var(--d), 0 .13em .16em var(--sjfx-shadow);
}

/* «تخطٍّ» في الزاوية تحت الشريط العلويّ: أسفل الشاشة يشغله إشعار الرصيد بعد البدء (flashNotice) */
.sj-fx-skip{
  position:absolute; top:calc(var(--hdr) + 14px); inset-inline-end:16px;
  padding:8px 18px; border-radius:999px; cursor:pointer;
  font:800 14px var(--font); color:var(--ink); background:var(--card); border:1px solid var(--card-line);
}
.sj-fx-skip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* قلم الرسم: طبقة SVG فوق اللوحة بإحداثيّاتها (المضيف #view-board يصير مرجعاً لها أثناء المشهد) */
#view-board.sj-fx-host{ position:relative; }
.sj-fx-pen{ position:absolute; top:0; left:0; z-index:3; pointer-events:none; overflow:visible; }
.sj-fx-pen path{
  fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1 1; stroke-dashoffset:1;
}

/* لوحة النتيجة مرسومة تحت مسرح النهاية ومحجوبة حتى الكشف */
#view-result.sj-fx-hold{ visibility:hidden; }

/* الهاتف أثناء اللعب: زرٌّ خامس في الشريط يقصّ حبّة الدور (390px: «الدور: الصقور» ⇐ «الدور: ا…») ⇒ زرّ الكتم في الإعداد
   والنتيجة وحدهما، والاختيار محفوظٌ على الجهاز */
@media (max-width:820px){
  :where(body[data-phase="board"], body[data-phase="question"]) #btn-sound{ display:none; }
}