/* ═══════════════════════════════════════════════════════════════════
   player.css — صقل شاشة الغرفة للزبون (?player=)
   ───────────────────────────────────────────────────────────────────
   الغرض: تنفيذ «وثيقة تطوير واجهة شاشات الغرف» بلا لمس js/modes/playerScreen.js
   (تاريخه جدارُ أعطال سباق توقيت — قاعدة المالك: «لا تكسر شيئاً — أدنى تدخّل»).

   • هذا الملف آخر ورقة CSS في index.html (بعد polish.css)، فقواعده تفوز
     على كتل <style> السطرية لشاشة الغرفة (٧٨٠–٨٣٥ و٣٢٤٥–٣٤٨٠ بالأصل) بترتيب
     المصدر وحده — لا نُكثر من !important، ونستعمله فقط حيث القاعدة المُتجاوَزة
     نفسها معرّفة بـ!important (‏#player-room-title).
   • كل حركة هنا يغطّيها أمان prefers-reduced-motion العامّ في base.css (يستهدف *).
     فكل عنصر مُتحرّك يحمل قيمةً ساكنة صريحة تصمد حين تُطفأ الحركة.
   • للرجوع: احذف هذا الملف وسطرَه من tools/build-html.js. صفر أثر على المنطق.

   المرحلة أ (CSS فقط): خط رعب للاسم · خفقان/تآكل الشعار · رمز غامض للزر ·
                        تعتيم أقوى خلف الرسالة · ضبط خلفية الصورة كي لا تتمطّط.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ١) خلفية صورة الغرفة: تُغطّي بلا تمطيط على أي نسبة شاشة ─────────
   applyRoomBg() في roomAtmosphere.js يضبط background-image سطرياً فقط
   (تدرّج تعتيم + url)، ولا يضبط الحجم/الموضع — فتقع هذه هنا. */
#player-interface {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* حَشوةٌ رأسية أنحف قليلاً تستوعب رمز زر المساعدة الجديد دون قصٍّ
       (‏#player-interface نفسه overflow:hidden). الأفقية كما هي: 3vw. */
    padding-block: 1.1vh;
}
/* حين توجد صورة غرفة: طبقة تعتيم إضافية أسفل المحتوى مباشرةً لضمان تباين
   النصّ فوق أي صورة، دون إطفاء تفاصيلها (التدرّج المخبوز في الصورة أعلى منها). */
#player-interface.has-room-bg::before {
    background:
        radial-gradient(ellipse 60% 45% at 50% 46%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 72%),
        radial-gradient(ellipse 30% 30% at 0% 0%, rgba(138,0,0,.18) 0%, transparent 70%),
        radial-gradient(ellipse 30% 30% at 100% 100%, rgba(100,0,0,.12) 0%, transparent 70%);
}

/* ── ٢) اسم الغرفة: خطّ رعب لاتيني (الاسم يُعرض إنجليزياً وبأحرفٍ كبيرة) ──
   Eater خطّ عرضٍ متآكل من Google Fonts — أُضيف إلى وسم <link> بالأصل و
   إلى EXTERNAL_URLS في sw.js. القاعدة المُتجاوَزة (#player-room-title)
   معرّفة بـ!important، فنطابقها. نُبقي الوميض (plNameFlicker).
   اللون: أحمر دمٍ بوهجٍ يطابق نبض العدّاد (اختيار المالك: بديل A). */
#player-interface #player-room-title,
#player-interface .player-room-name {
    font-family: 'Eater', 'Cairo', system-ui, cursive !important;
    font-weight: 400 !important;
    letter-spacing: .05em !important;
    color: #e01313 !important;
    text-shadow:
        0 0 5px #ff1a1a,
        0 0 26px rgba(220,0,0,.8),
        0 0 66px rgba(150,0,0,.5),
        0 3px 0 #120000 !important;
}

/* ── ٣) الشعار: خافقٌ متآكل ─────────────────────────────────────────
   opacity ساكنة صريحة (لأمان reduced-motion)، حواف متآكلة بقناع تدرّج،
   ووميض «مصباح يحتضر» نادر بـsteps حتى يكون قطعياً لا سلساً. */
#player-interface .pl-brand-img {
    opacity: .82;
    filter:
        grayscale(.35) brightness(.92) contrast(1.18)
        drop-shadow(0 0 16px rgba(200,0,0,.42));
    -webkit-mask-image: radial-gradient(ellipse 135% 125% at 50% 42%, #000 52%, rgba(0,0,0,.35) 80%, transparent 100%);
            mask-image: radial-gradient(ellipse 135% 125% at 50% 42%, #000 52%, rgba(0,0,0,.35) 80%, transparent 100%);
    animation: plBrandFlicker 7.5s steps(1, end) infinite;
}
@keyframes plBrandFlicker {
    0%, 39%, 43%, 71%, 73%, 100% { opacity: .82; }
    40%, 42%                     { opacity: .26; }
    41%                         { opacity: .55; }
    72%                         { opacity: .40; }
}

/* ── ٤) زر المساعدة: رمزٌ غامض (كفٌّ مبسوطة تستغيث) ──────────────────
   ::after مأخوذ (خطوط مسح)، فنستعمل ::before. اللون currentColor فيتبع
   حالتَي الزر: خافت أحمر وهو معطَّل، أبيض متوهّج وهو مفعّل — بلا قواعد إضافية. */
#player-interface #pl-help-btn::before {
    content: '';
    /* مقيّدٌ بارتفاع الشاشة لا بحجم خطّ الزر (‏3.6vw)، وبسقفٍ ثابت — وإلا صار
       الرمز مفرطَ الكبر على شاشة ١٩٢٠؛ وحَشوة #player-interface عُدِّلت أعلاه
       لتستوعب هذه الزيادة الصغيرة دون قصّ. */
    width: clamp(18px, 2.6vh, 28px);
    height: clamp(18px, 2.6vh, 28px);
    margin-bottom: 2px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2a1.5 1.5 0 0 0-1.5 1.5V10h-1V1.5a1.5 1.5 0 0 0-3 0V10H7V3.5a1.5 1.5 0 0 0-3 0V13c0 5 3 9 8 9s8-4 8-9V6.5a1.5 1.5 0 0 0-3 0V10h-1V3.5A1.5 1.5 0 0 0 13.5 2z'/%3E%3C/svg%3E");
            mask: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2a1.5 1.5 0 0 0-1.5 1.5V10h-1V1.5a1.5 1.5 0 0 0-3 0V10H7V3.5a1.5 1.5 0 0 0-3 0V13c0 5 3 9 8 9s8-4 8-9V6.5a1.5 1.5 0 0 0-3 0V10h-1V3.5A1.5 1.5 0 0 0 13.5 2z'/%3E%3C/svg%3E");
    opacity: .92;
    filter: drop-shadow(0 0 7px rgba(255,0,0,.45));
    flex-shrink: 0;
}

/* ── ٥) الرسالة المخفية: تعتيم أقوى لباقي الشاشة أثناء ظهورها ────────
   ‏.pl-hidden-msg شفّافةٌ (opacity:0) في السكون، فالـbackdrop-filter لا
   يعمل إلا حين تضيف playerScreen/roomAtmosphere صنف pl-msg-show. */
#player-interface .pl-hidden-msg {
    background: rgba(0,0,0,.58);
    -webkit-backdrop-filter: blur(2px) brightness(.42) saturate(.72);
            backdrop-filter: blur(2px) brightness(.42) saturate(.72);
}